implemented hover

2 files changed, 118 insertions, 95 deletions

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
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index 6fa7539..6a01927 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -94,50 +94,72 @@ export const GraphScreen = observer(function GraphScreen() {
   // Get previous settings and the data from the org-roam-server
   const sanitizeGraph = (data, nodeIds: string[]) => {
     const cleanLinks = [];
-    data.links.forEach((link, i) => {
-        for (i=0; i<=nodeIds.length; i++){
-        if (link.target === nodeIds[i]) {
+    data.links.forEach((link) => {
+        let target;
+        let source;
+      for (let i = 0; i < nodeIds.length; i++) {
+            let a = data.nodes[i];
+            !a.neighbors && (a.neighbors = []);
+            !a.links && (a.links = []);
+          if (link.target === nodeIds[i]) {
+            //let a = data.nodes[i];
+            //!a.neighbors && (a.neighbors = []);
+            //a.neighbors.push(a);
+            a.links.push(link);
+            target=[a, i];
           cleanLinks.push(link);
-          break;
-        };
+          } else if (link.source === nodeIds[i]) {
+            //let a = data.nodes[i];
+            //!a.neighbors && (a.neighbors = []);
+            //a.neighbors.push(a);
+            a.links.push(link);
+            source=[a, i];
+          };
       };
+        if (target && source) {
+            console.log(link);
+            console.log("target" + target);
+            console.log("source" + source);
+           data.nodes[target[1]].neighbors.push(source[0]);
+           data.nodes[source[1]].neighbors.push(target[0]);
+        }
     });
-      console.log(cleanLinks);
-      data.links = cleanLinks;
-      return data;
-    };
+    console.log(cleanLinks);
+    data.links = cleanLinks;
+    return data;
+  };
 
-    const getNodesById = (data) => {
-        let temp = [];
-        data.nodes.forEach(node => temp.push(node.id));
-        setNodeIds(temp);
-        return temp;
-    };
+  const getNodesById = (data) => {
+    let temp = [];
+    data.nodes.forEach(node => temp.push(node.id));
+    setNodeIds(temp);
+    return temp;
+  };
 
-    useEffect(() => {
-      getData().then((data) => setPhysics(data));
-      axios.get("http://localhost:35901/graph")
-        .then((dataa) => {
-          let nods = getNodesById(dataa.data);
-          setNodeIds(nods);
-          console.log(nodeIds);
-          let cleanData = sanitizeGraph(dataa.data, nods);
-          console.log(cleanData)
-          setGraphData(cleanData);
-        })
-        .catch((e) => {
-          console.log(e);
-          console.log("Couldn't get data.");
-          //setGraphData(rando);
-        });
-    }, [])
-    if (!graphData) { return null }
-    else {
-      return (
-        <Screen style={ROOT} preset="scroll">
-          <Tweaks physics={physics} setPhysics={setPhysics} />
-          <Graph physics={physics} gData={graphData} nodeIds={nodeIds}/>
-        </Screen>
-      )
-    }
-  })
+  useEffect(() => {
+    getData().then((data) => setPhysics(data));
+    axios.get("http://localhost:35901/graph")
+      .then((dataa) => {
+        let nods = getNodesById(dataa.data);
+        setNodeIds(nods);
+        console.log(nodeIds);
+        let cleanData = sanitizeGraph(dataa.data, nods);
+        console.log(cleanData)
+        setGraphData(cleanData);
+      })
+      .catch((e) => {
+        console.log(e);
+        console.log("Couldn't get data.");
+        //setGraphData(rando);
+      });
+  }, [])
+  if (!graphData) { return null }
+  else {
+    return (
+      <Screen style={ROOT} preset="scroll">
+        <Tweaks physics={physics} setPhysics={setPhysics} />
+        <Graph physics={physics} gData={graphData} nodeIds={nodeIds} />
+      </Screen>
+    )
+  }
+})