Add a search box to the Summary Map

Author: kimrutherford

gocam_connections/templates/gocam_connections/index.html

@@ -45,9 +45,12 @@
   font-size: 105%;
 }
 #panel-buttons, #actions {
-  padding: 0.2em 0.5em;
+  padding: 0.4em 0.5em;
   background: #f8f8f8a0;
 }
+#search-input {
+  font-size: 105%;
+}
 #actions {
   bottom: 1em;
 }
@@ -75,7 +78,7 @@
   flex: 0 0 auto;
 }
 #node-details {
-  padding: 2em 0 0 0.2em;
+  padding: 2.5em 0 0 0.2em;
   height: 100%;
   overflow: auto;
   background-color: #fbfbfb;
@@ -129,6 +132,7 @@
   <div id="cy-container">
     <div id="cy"></div>
   <div id="panel-buttons">
+    <input id="search-input" placeholder="Search pathway titles ..."/>
     <button id="zoom-out" title="Zoom out" onclick="modelZoomOut()">
      <img width="16px" height="16px" src='data:image/svg+xml;charset=utf-8,<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg width="10mm" height="10mm" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g transform="matrix(0.09090916,0,0,0.09090916,-2.2369372,-4.0168636)"> <rect style="fill:%23000000;stroke-width:0.264583" width="116.41666" height="31.75" x="31.75" y="95.25" ry="0.26052997" /> </g> </svg>'/>
     </button>
@@ -173,8 +177,10 @@
 
   const modelSummaryById = {};
 
+  const modelNodes = modelConnections.nodes;
+
   const elements = {
-    nodes: modelConnections.nodes.map(node => {
+    nodes: modelNodes.map(node => {
       const summ = { title: node.title };
       modelSummaryById[node.id] = summ;
       const idNoPrefix = node.id.split(':')[1];
@@ -326,7 +332,7 @@
     });
 
     for (const currentModel of currentModels) {
-      cy.$('#' + currentModel.id).style('border-width', 5);
+      cy.$('#' + currentModel.id).style('border-width', 8);
     }
   };
 
@@ -372,6 +378,28 @@
     contentDiv.innerHTML = newContent;
   }
 
+  const searchModels = (searchText) => {
+    let matchCount = 0;
+    modelNodes.map(node => {
+      const title = node.title.toLowerCase();
+      if (title.includes(searchText)) {
+        addToCurrent([node.id]);
+        matchCount++;
+      }
+    });
+    return matchCount;
+  };
+
+  const searchInput = document.getElementById('search-input');
+  searchInput.addEventListener("input", (e) => {
+    const searchText = e.target.value.trim().toLowerCase();
+    clearCurrentModels();
+    if (searchText.length > 1) {
+      searchModels(searchText);
+    }
+    updateDetails();
+  });
+  
   cy.on('box', 'node', function( e ){
     const node = e.target;
     const id = node.data().id;