Merge pull request #33 from alphagov/acw-59/filter-graph-nodes

Add a filter for the visualisation graph

Author: mtaylorgds

static/css/graph.css

@@ -17,12 +17,53 @@ main {
   height: calc(100vh - 72px);
 }
 
+.graph-container {
+  position: relative;
+}
+
 #graph {
   width: 100%;
   height: 100%;
   background: #ffffff;
 }
 
+.graph-filter {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #ffffff;
+  border: 1px solid #cecece;
+  border-radius: 10px;
+  padding: 10px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
+  min-width: 240px;
+}
+
+.graph-filter label {
+  font-size: 16px;
+  color: #0b0c0c;
+  font-weight: bold;
+}
+
+.graph-filter input {
+  width: 100%;
+  padding: 10px 10px;
+  font-size: 16px;
+  border: 1px solid #d1d5db;
+  border-radius: 5px;
+  outline: none;
+}
+
+.graph-filter input:focus {
+  outline: rgb(255, 221, 0) solid 3px;
+  outline-offset: 0px;
+  box-shadow: 0px 0px 0px 2px inset;
+}
+
 .sidebar {
   padding: 1rem;
   border-left: 1px solid #d1d5db;

templates/graph.html

@@ -12,7 +12,13 @@ <h1>Graph Viewer</h1>
       <p class="status">Loading graph from the /extract endpoint...</p>
     </header>
     <main>
-      <div id="graph"></div>
+      <div class="graph-container">
+        <div id="graph"></div>
+        <div class="graph-filter">
+          <label for="graph-filter-input">Filter</label>
+          <input id="graph-filter-input" type="search" placeholder="Filter nodes by label..." aria-label="Filter graph nodes" />
+        </div>
+      </div>
       <aside class="sidebar">
         <h2 id="sidebar-title">No node selected</h2>
         <div id="node-details"><p>Select a node to view details.</p></div>
@@ -24,6 +30,7 @@ <h2 id="sidebar-title">No node selected</h2>
       const status = document.querySelector('.status');
       const sidebarTitle = document.getElementById('sidebar-title');
       const details = document.getElementById('node-details');
+      const filterInput = document.getElementById('graph-filter-input');
 
       const BASE_NODE_SIZE = 10;
 
@@ -43,6 +50,10 @@ <h2 id="sidebar-title">No node selected</h2>
       }
 
       function ensureNodeInView(node) {
+        if (node.hidden()) {
+          return;
+        }
+
         if (!isNodeInViewport(node)) {
           node.cy().animate({
             center: { eles: node },
@@ -51,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();
 
@@ -71,17 +91,21 @@ <h2 id="sidebar-title">No node selected</h2>
           }).join('');
           details.innerHTML = `<ul>${aliasList}</ul>`;
 
+          function switchSelectedNode(nodeIdToSelect) {
+            const cy = node.cy();
+            const nodeToSelect = cy.getElementById(nodeIdToSelect);
+            if (nodeToSelect.length > 0) {
+              cy.elements().unselect();
+              nodeToSelect.select();
+              ensureNodeInView(nodeToSelect);
+            }
+          }
+
           document.querySelectorAll('#node-details li a[data-alias-id]').forEach(item => {
             item.addEventListener('click', (e) => {
               const aliasId = e.target.getAttribute('data-alias-id');
               if (aliasId) {
-                const cy = node.cy();
-                const aliasNode = cy.getElementById(aliasId);
-                if (aliasNode.length > 0) {
-                  cy.elements().unselect();
-                  aliasNode.select();
-                  ensureNodeInView(aliasNode);
-                }
+                switchSelectedNode(aliasId);
               }
             });
           });
@@ -134,6 +158,32 @@ <h2 id="sidebar-title">No node selected</h2>
         return BASE_NODE_SIZE + (occurrences.length * 2);
       }
 
+      function resetSidebar() {
+        sidebarTitle.textContent = 'No node selected';
+        details.innerHTML = '<p>Select a node to view details.</p>';
+      }
+
+      function filterGraph(cy, filterTerm) {
+        cy.nodes().forEach((node) => {
+          const label = node.data('label');
+          const shouldShowNode =
+            !filterTerm || label.toLowerCase().includes(filterTerm);
+
+          if (shouldShowNode) {
+            node.show();
+          } else {
+            node.hide();
+          }
+        });
+
+        const selectedNodes = cy.$('node:selected');
+        if (selectedNodes.every((node) => node.hidden())) {
+          selectedNodes.unselect();
+          resetSidebar();
+        }
+        fitViewToNodes(cy.nodes(':visible'));
+      }
+
       async function loadGraph() {
         try {
           const response = await fetch('/graph-viewmodel?run_path={{ run_path }}');
@@ -209,7 +259,7 @@ <h2 id="sidebar-title">No node selected</h2>
                 selector: ':selected',
                 style: {
                   'border-width': 1.5,
-                  'border-color': '#ffdd00'
+                  'border-color': '#ffdd00',
                 }
               }
             ],
@@ -223,14 +273,21 @@ <h2 id="sidebar-title">No node selected</h2>
             }
           });
 
+          let filterUpdateTimeout;
+          filterInput.addEventListener('input', (event) => {
+            const filterTerm = event.target.value.trim().toLowerCase();
+            
+            clearTimeout(filterUpdateTimeout);
+            filterUpdateTimeout = setTimeout(() => { filterGraph(cy, filterTerm); }, 500);
+          });
+
           cy.on('select', 'node', (event) => {
             renderNodeDetails(event.target);
           });
 
           cy.on('tap', (event) => {
             if (event.target === cy) {
-              sidebarTitle.textContent = 'No node selected';
-              details.innerHTML = '<p>Select a node to view details.</p>';
+              resetSidebar();
             }
           });
         } catch (error) {