From 6de4b3a6f24c5ff9d29e014589414cfecdb37b00 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sat, 17 Jul 2021 19:49:39 +0200
Subject: implemented hover

---
 app/components/graph/graph.tsx | 107 +++++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 53 deletions(-)

(limited to 'app/components/graph/graph.tsx')

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 7e0b77e..14de37a 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -121,48 +121,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
 *
 *         return rando;
 *       }, []);
-* const [highlightNodes, setHighlightNodes] = useState(new Set());
-*       const [highlightLinks, setHighlightLinks] = useState(new Set());
-*       const [hoverNode, setHoverNode] = useState(null);
-*
-*       const updateHighlight = () => {
-*         setHighlightNodes(highlightNodes);
-*         setHighlightLinks(highlightLinks);
-*       };
-*
-*       const handleNodeHover = node => {
-*         highlightNodes.clear();
-*         highlightLinks.clear();
-*         if (node) {
-*           highlightNodes.add(node);
-*           node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
-*           node.links.forEach(link => highlightLinks.add(link));
-*         }
-*
-*         setHoverNode(node || null);
-*         updateHighlight();
-*       };
-*
-*       const handleLinkHover = link => {
-*         highlightNodes.clear();
-*         highlightLinks.clear();
-*
-*         if (link) {
-*           highlightLinks.add(link);
-*           highlightNodes.add(link.source);
-*           highlightNodes.add(link.target);
-*         }
-*
-*         updateHighlight();
-*       };
-*
-*       const paintRing = useCallback((node, ctx) => {
-*         // add ring just for highlighted nodes
-*         ctx.beginPath();
-*         ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
-*         ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
-*         ctx.fill();
-*       }, [hoverNode]);
+     */
+      const [highlightNodes, setHighlightNodes] = useState(new Set());
+       const [highlightLinks, setHighlightLinks] = useState(new Set());
+       const [hoverNode, setHoverNode] = useState(null);
+
+       const updateHighlight = () => {
+         setHighlightNodes(highlightNodes);
+         setHighlightLinks(highlightLinks);
+       };
+
+       const handleNodeHover = node => {
+         highlightNodes.clear();
+         highlightLinks.clear();
+         if (node) {
+           highlightNodes.add(node);
+           node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+           node.links.forEach(link => highlightLinks.add(link));
+         }
+
+         setHoverNode(node || null);
+         updateHighlight();
+       };
+
+       const handleLinkHover = link => {
+         highlightNodes.clear();
+         highlightLinks.clear();
+
+         if (link) {
+           highlightLinks.add(link);
+           highlightNodes.add(link.source);
+           highlightNodes.add(link.target);
+         }
+
+         updateHighlight();
+       };
+
+  /* const paintRing = useCallback((node, ctx) => {
+*   // add ring just for highlighted nodes
+*   ctx.beginPath();
+*   ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false);
+*   ctx.fillStyle = node === hoverNode ? 'red' : 'orange';
+*   ctx.fill();
+* }, [hoverNode]);
 */
 
           /* autoPauseRedraw={false}
@@ -183,6 +184,7 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
       {!physics.threedim ? (
         <ForceGraph2D
           ref={fgRef}
+          autoPauseRedraw={false}
           graphData={gData}
           //graphData={physics.collapse ? prunedTree : gData}
           nodeAutoColorBy="id"
@@ -194,12 +196,14 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
             nodeLabel={(node) => node.title}
           //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
           //d3VelocityDecay={visco}
-          linkWidth={physics.linkWidth}
+            linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
+          nodeVal={node => highlightNodes.has(node) ? 10 : 5}
           linkDirectionalParticleWidth={physics.particleWidth}
-          nodeCanvasObject={(node, ctx, globalScale) => {
-          if(physics.labels){
+          nodeCanvasObject={
+              (node, ctx, globalScale) => {
+                  if(physics.labels) {
             if(globalScale > physics.labelScale ) {
             const label = node.title.substring(0, Math.min(node.title.length, 30));
             const fontSize = 12/globalScale;
@@ -216,15 +220,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
             ctx.fillText(label, node.x, node.y);
 
             node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
-            }
-        }
-          }}
-          nodePointerAreaPaint={(node, color, ctx) => {
-            ctx.fillStyle = color;
-            const bckgDimensions = node.__bckgDimensions;
-            bckgDimensions && ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+            };
+        };
           }}
-            nodeCanvasObjectMode={()=>'after'}
+          nodeCanvasObjectMode={()=> 'after'}
+          onNodeHover={handleNodeHover}
+          onLinkHover={handleLinkHover}
         />
       ) : (
         <ForceGraph3D
-- 
cgit v1.2.3