fix(rum-explorer): introduces 3s debounce to filter input field

tools/oversight/slicer.js

@@ -242,7 +242,7 @@
       ));
 
       if (cp === 'loadresource') {
         console.log('adding histogram facet');
         // loadresource.target are not discrete values, but the number
         // of milliseconds it took to load the resource, so the best way
         // to present this is to create a histogram
@@ -431,9 +431,14 @@
       loadData(elems.viewSelect.value).then(draw);
     }
 
+    let filterInputDebounce;
+    const debounceTimeout = view === 'week' ? 1000 : 0;
     elems.filterInput.addEventListener('input', () => {
-      updateState();
-      draw();
+      clearTimeout(filterInputDebounce);
+      filterInputDebounce = setTimeout(() => {
+        updateState();
+        draw();
+      }, debounceTimeout);
     });
 
     elems.viewSelect.addEventListener('change', () => {

tools/rum/slicer.js

@@ -381,9 +381,14 @@ const io = new IntersectionObserver((entries) => {
       loadData(elems.viewSelect.value).then(draw);
     }
 
+    let filterInputDebounce;
+    const debounceTimeout = view === 'week' ? 1000 : 0;
     elems.filterInput.addEventListener('input', () => {
-      updateState();
-      draw();
+      clearTimeout(filterInputDebounce);
+      filterInputDebounce = setTimeout(() => {
+        updateState();
+        draw();
+      }, debounceTimeout);
     });
 
     elems.viewSelect.addEventListener('change', () => {