Refit graph view when filtering

When filtering the nodes displayed on the visualisation graph, re-"fit"
 the view so that all nodes that are visible after the filter has been
 applied are fit within the viewport.

The filter is now applied 500ms after the user finishes typing. This
 avoids queueing up multiple "fits" as the user types, while still
 providing a reasonable feedback response to their typing.

Author: mtaylorgds

templates/graph.html

@@ -62,6 +62,15 @@ <h2 id="sidebar-title">No node selected</h2>
         }
       }
 
+      function fitViewToNodes(nodes) {
+        if (nodes.length > 0) {
+          nodes.cy().animate({
+            fit: { eles: nodes },
+            duration: 500,
+          });
+        }
+      }
+
       function renderEntityDetails(node) {
         const data = node.data();
 
@@ -172,6 +181,7 @@ <h2 id="sidebar-title">No node selected</h2>
           selectedNodes.unselect();
           resetSidebar();
         }
+        fitViewToNodes(cy.nodes(':visible'));
       }
 
       async function loadGraph() {
@@ -263,10 +273,12 @@ <h2 id="sidebar-title">No node selected</h2>
             }
           });
 
+          let filterUpdateTimeout;
           filterInput.addEventListener('input', (event) => {
             const filterTerm = event.target.value.trim().toLowerCase();
-
-            filterGraph(cy, filterTerm);
+            
+            clearTimeout(filterUpdateTimeout);
+            filterUpdateTimeout = setTimeout(() => { filterGraph(cy, filterTerm); }, 500);
           });
 
           cy.on('select', 'node', (event) => {