From cfe44308d00f7266483f1e65db650b6f5b4c3ea4 Mon Sep 17 00:00:00 2001
From: Utsob Roy <roy@utsob.me>
Date: Tue, 14 Feb 2023 11:37:52 +0600
Subject: [PATCH] implement focus on hovered and neigbors

---
 src/site/_includes/components/graphScript.njk | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/site/_includes/components/graphScript.njk b/src/site/_includes/components/graphScript.njk
index 1e8f970..b3b189b 100644
--- a/src/site/_includes/components/graphScript.njk
+++ b/src/site/_includes/components/graphScript.njk
@@ -51,6 +51,12 @@
     var Graph;
 
     function renderGraph(graphData, id, width, height, delay) {
+
+        const highlightNodes = new Set();
+        let hoverNode = null;
+        const color = getCssVar("--text-accent");
+        const mutedColor = getCssVar("--text-faint");
+
         let Graph = ForceGraph()
         (document.getElementById(id))
             .graphData(graphData)
@@ -63,15 +69,34 @@
             .height(height)
             .linkDirectionalArrowLength(2)
             .linkDirectionalArrowRelPos(0.5)
-            .linkColor(() => getCssVar("--text-muted") || getCssVar("--text-normal"))
+            .autoPauseRedraw(false)
+            .linkColor((link) => {
+                if (hoverNode == null) {
+                    return color;
+                }
+                if (link.source.id == hoverNode.id || link.target.id == hoverNode.id) {
+                    return color;
+                } else {
+                    return mutedColor;
+                }
+                
+            })
             .nodeCanvasObject((node, ctx) => {
-                const color = getCssVar("--text-accent");
                 const numberOfNeighbours = (node.neighbors && node.neighbors.length) || 2;
                 const nodeR = Math.min(7, Math.max(numberOfNeighbours / 2, 2));
                 
                 ctx.beginPath();
                 ctx.arc(node.x, node.y, nodeR, 0, 2 * Math.PI, false);
-                ctx.fillStyle = color;
+                if (hoverNode == null) {
+                    ctx.fillStyle = color;
+                } else {
+                    if (node == hoverNode || highlightNodes.has(node.url)) {
+                        ctx.fillStyle = color;
+                    } else {
+                        ctx.fillStyle = mutedColor;
+                    }
+                }
+                 
                 ctx.fill();
                 
                 if (node.current) {
@@ -91,13 +116,22 @@
                 ctx.fillText(label, node.x, node.y + nodeR + 2);
             })
             .onNodeClick(node => {
-                    window.location = node.url;
-                });
-                if (delay != null && graphData.nodes.length > 2) {
-                    setTimeout(() => {
-                        Graph.zoomToFit(5, 75);
-                    }, delay);
+                window.location = node.url;
+            })
+            .onNodeHover(node => {
+                highlightNodes.clear();
+                if (node) {
+                highlightNodes.add(node);
+                node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
                 }
+                hoverNode = node || null;
+                
+            });
+            if (delay != null && graphData.nodes.length > 4) {
+                setTimeout(() => {
+                    Graph.zoomToFit(5, 75);
+                }, delay);
+            }
         return Graph;
     }