undid bad highlighting

1 files changed, 88 insertions, 85 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index cef2a5e..cd623ee 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -36,7 +36,7 @@ export interface GraphProps {
 /**
  * Describe your component here
  */
-export const Graph = observer(function Graph(props: GraphProps) {
+export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   const { style, physics, gData } = props
   const styles = flatten([CONTAINER, style])
 
@@ -80,14 +80,14 @@ export const Graph = observer(function Graph(props: GraphProps) {
   const getPrunedTree = useCallback(() => {
     const visibleNodes = []
     const visibleLinks = []
-    ;(function traverseTree(node = nodesById[rootId]) {
-      visibleNodes.push(node)
-      if (node.collapsed) return
-      visibleLinks.push(...node.childLinks)
-      node.childLinks
-        .map((link) => (typeof link.target === "object" ? link.target : nodesById[link.target])) // get child node
-        .forEach(traverseTree)
-    })()
+      ; (function traverseTree(node = nodesById[rootId]) {
+        visibleNodes.push(node)
+        if (node.collapsed) return
+        visibleLinks.push(...node.childLinks)
+        node.childLinks
+          .map((link) => (typeof link.target === "object" ? link.target : nodesById[link.target])) // get child node
+          .forEach(traverseTree)
+      })()
 
     return { nodes: visibleNodes, links: visibleLinks }
   }, [nodesById])
@@ -97,70 +97,82 @@ export const Graph = observer(function Graph(props: GraphProps) {
   const handleNodeClick = useCallback((node) => {
     node.collapsed = !node.collapsed // toggle collapse state
     setPrunedTree(getPrunedTree())
-  }, [])
+  }, []);
 
 
   // Highlight Graph
-const data = useMemo(() => {
-        // cross-link node objects
-        rando.links.forEach(link => {
-          const a = rando.nodes[link.source];
-          const b = rando.nodes[link.target];
-          !a.neighbors && (a.neighbors = []);
-          !b.neighbors && (b.neighbors = []);
-          a.neighbors.push(b);
-          b.neighbors.push(a);
-
-          !a.links && (a.links = []);
-          !b.links && (b.links = []);
-          a.links.push(link);
-          b.links.push(link);
-        });
-
-        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 data = useMemo(() => {
+*         // cross-link node objects
+*         rando.links.forEach(link => {
+*           const a = rando.nodes[link.source];
+*           const b = rando.nodes[link.target];
+*           !a.neighbors && (a.neighbors = []);
+*           !b.neighbors && (b.neighbors = []);
+*           a.neighbors.push(b);
+*           b.neighbors.push(a);
+*
+*           !a.links && (a.links = []);
+*           !b.links && (b.links = []);
+*           a.links.push(link);
+*           b.links.push(link);
+*         });
+*
+*         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]);
+*/
+
+          /* autoPauseRedraw={false}
+        linkWidth={link => highlightLinks.has(link) ? 5 : 1}
+        linkDirectionalParticles={4}
+        linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
+        nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
+        nodeCanvasObject={paintRing}
+        onNodeHover={handleNodeHover}
+        onLinkHover={handleLinkHover}
+                nodeRelSize={NODE_R} */
 
   return (
     <View>
@@ -175,19 +187,10 @@ const [highlightNodes, setHighlightNodes] = useState(new Set());
           nodeColor={(node) =>
             !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
           }
-          onNodeClick={!physics.collapse? null : handleNodeClick}
+          onNodeClick={!physics.collapse ? null : handleNodeClick}
           nodeLabel={(node) => "label"}
-           // nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
+          // nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
           //d3VelocityDecay={visco}
-        autoPauseRedraw={false}
-        linkWidth={link => highlightLinks.has(link) ? 5 : 1}
-        linkDirectionalParticles={4}
-        linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
-        nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
-        nodeCanvasObject={paintRing}
-        onNodeHover={handleNodeHover}
-        onLinkHover={handleLinkHover}
-                nodeRelSize={NODE_R}
         />
       ) : (
         <ForceGraph3D
@@ -201,10 +204,10 @@ const [highlightNodes, setHighlightNodes] = useState(new Set());
           nodeColor={(node) =>
             !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
           }
-          onNodeClick={!physics.collapse ? null : handleNodeClick }
-            nodeVal ={(node)=> node.childLinks.length + 1}
-        linkOpacity={0.8}
-          //d3VelocityDecay={visco}
+          onNodeClick={!physics.collapse ? null : handleNodeClick}
+          nodeVal={(node) => node.childLinks.length + 1}
+          linkOpacity={0.8}
+        //d3VelocityDecay={visco}
         />
       )}
     </View>