basic search bar for word/label

Author: hmsklee

css/style.css

@@ -61,6 +61,10 @@ svg text {
   display:block;
   cursor:pointer;
 }
+#search-minimap {
+  display:block;
+  width:100px;
+}
 #minimap {
   pointer-events:none;
   position:fixed;

index.html

@@ -24,6 +24,7 @@
 
 <div id="minimap" class="noselect">
   <a id="toggle-minimap">hide>></a>
+  <input type="text" id="search-minimap">
   <canvas>
   </canvas>
 </div>

js/GraphLayout.js

@@ -203,6 +203,7 @@ const GraphLayout = (function() {
             // -------- in progress
             // test case : Pos_reg         --> graft "outside"
             // test case : Promotes        --> graft "inside"
+            // test case : Ubiquitination  --> graft left
             // test case : Phosphorylation --> two
 /*            let graftLeftOfRoot = data.anchor.x < this.data[index].root.x;
 

js/minimap.js

@@ -12,9 +12,11 @@ const Minimap = (function() {
     const PADDING = 3;
     const COLOR = {
         word: '#888',
-        untagged: '#aaa',
+        untagged: '#bbb',
         selected: 'crimson',
-        link: 'cyan'
+        link: 'magenta',
+        highlight: 'cyan',
+        unhighlight: '#666'
     }
 
     function update() {
@@ -35,10 +37,20 @@ const Minimap = (function() {
 
             row.words.forEach(function(word) {
                 // choose color
-                ctx.fillStyle = word.tag ? COLOR.word : COLOR.untagged;
-                if (word.isSelected) {
+                if (searchTerm) {
+                    if (word.val.toLowerCase().includes(searchTerm) || (word.tag && word.tag.toLowerCase().includes(searchTerm))) {
+                        ctx.fillStyle = COLOR.highlight;
+                    }
+                    else {
+                        ctx.fillStyle = COLOR.untagged;
+                    }
+                }
+                else if (word.isSelected) {
                     ctx.fillStyle = COLOR.selected;
                 }
+                else {
+                    ctx.fillStyle = word.tag ? COLOR.word : COLOR.untagged;
+                }
 
                 // add word rectangle
                 ctx.fillRect(word.underneathRect.x() * r, (slots[i] - 1) * RECT_HEIGHT + i * PADDING, word.underneathRect.width() * r,RECT_HEIGHT + PADDING / 3);
@@ -57,9 +69,15 @@ const Minimap = (function() {
             let y = (slots[minRow - 1] || 0) + rows[minRow].maxSlots - link.h;
 
             // choose color
-            ctx.fillStyle = COLOR.link;
-
-            if (!link.isSelected && link.style) {
+            if (searchTerm) {
+                if (link.textStr.toLowerCase().includes(searchTerm)) {
+                    ctx.fillStyle = COLOR.highlight;
+                }
+                else {
+                    ctx.fillStyle = COLOR.unhighlight;
+                }
+            }
+            else if (!link.isSelected && link.style) {
                 if (link.style.stroke instanceof LinearGradient) {
                     let x = (maxRow > minRow) ? 0 : link.linesLeftX[0];
                     let gradient = ctx.createLinearGradient(x * r,0,width * r,0);
@@ -71,6 +89,9 @@ const Minimap = (function() {
                     ctx.fillStyle = link.style.stroke;
                 }
             }
+            else {
+                ctx.fillStyle = COLOR.link;
+            }
             ctx.fillRect(link.linesLeftX[0] * r, y * RECT_HEIGHT + minRow * PADDING, width * r, RECT_HEIGHT);
 
             // draw links spanning multiple rows
@@ -107,9 +128,11 @@ const Minimap = (function() {
     }
 
     // drag events
+    let dragStart = null;
     let drag = 0;
     let mousedown = false;
     function onmousedown(e) {
+        dragStart = e;
         drag = e.y;
         mousedown = true;
     }
@@ -119,15 +142,22 @@ const Minimap = (function() {
             drag = e.y;
         }
     }
-    function onmouseup() {
-        mousedown = false;
-    }
 
     let clicked = false;
     let click = 0;
-    function onclick(e) {
-        clicked = true;
-        click = e.offsetY / e.target.getBoundingClientRect().height;
+    function onmouseup(e) {
+        if (mousedown) {
+            if (Math.abs(e.x - dragStart.x) < 2 && Math.abs(e.y - dragStart.y) < 2) {
+                clicked = true;
+                click = e.offsetY / e.target.getBoundingClientRect().height;
+            }
+            mousedown = false;
+        }
+    }
+
+    let searchTerm = null;
+    function search() {
+        searchTerm = this.value.trim().toLowerCase() || null;
     }
 
     class Minimap {
@@ -148,11 +178,14 @@ const Minimap = (function() {
 
                 // swipe minimap to scroll page
                 view.onmousedown = onmousedown;
-                view.onclick = onclick;
                 document.addEventListener('mousemove', onmousemove);
                 document.addEventListener('mouseup', onmouseup);
                 document.addEventListener('mouseleave', onmouseup);
 
+                // add search functionality
+                document.getElementById('search-minimap').onchange = search;
+                document.getElementById('search-minimap').onkeyup = search;
+
                 h = view.height;
                 w = view.width;
                 ctx = view.getContext('2d');