fixed 3d not working

1 files changed, 65 insertions, 6 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 26f521c..5a76d70 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -169,9 +169,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
 
   // Normally the graph doesn't update when you just change the physics parameters
   // This forces the graph to make a small update when you do
-  useEffect(() => {
-    fgRef.current.d3ReheatSimulation()
-  }, [physics])
+  //useEffect(() => {
+  //  fgRef.current.d3ReheatSimulation()
+  //}, [physics])
   /* const paintRing = useCallback((node, ctx) => {
    *   // add ring just for highlighted nodes
    *   ctx.beginPath();
@@ -275,7 +275,7 @@ onLinkHover={handleLinkHover}
       {!physics.threedim ? (
         <ForceGraph2D
           ref={fgRef}
-          autoPauseRedraw={false}
+          //autoPauseRedraw={false}
           //graphData={gData}
           graphData={physics.local ? localGraphData : gData}
           nodeAutoColorBy={physics.colorful ? (node)=>node.index%GROUPS : undefined}
@@ -362,8 +362,67 @@ onLinkHover={handleLinkHover}
         />
       ) : (
         <ForceGraph3D
-        ref={fgRef}
-        graphData={rando}
+          ref={fgRef}
+          graphData={!physics.local ? gData : localGraphData }
+          //graphData={gData}
+          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          nodeColor={
+            !physics.colorful
+              ? (node) => {
+                  if (highlightNodes.size === 0) {
+                    return "rgb(100, 100, 100, 1)"
+                  } else {
+                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                  }
+                }
+              : undefined
+          }
+          linkAutoColorBy={physics.colorful ? "target" : undefined}
+          //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
+          linkColor={
+            !physics.colorful
+              ? (link) => {
+                  if (highlightLinks.size === 0) {
+                    return "rgb(50, 50, 50, 0.8)"
+                  } else {
+                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                  }
+                }
+              : undefined
+          }
+          linkDirectionalParticles={physics.particles}
+          nodeLabel={(node) => node.title}
+          linkWidth={(link) =>
+            highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth
+          }
+          linkOpacity={physics.linkOpacity}
+          nodeRelSize={physics.nodeRel}
+          nodeVal={(node) =>
+            highlightNodes.has(node) ? node.neighbors.length * 3 : node.neighbors.length * 2
+          }
+          linkDirectionalParticleWidth={physics.particleWidth}
+          onNodeHover={physics.hover ? handleNodeHover : null}
+          d3AlphaDecay={physics.alphaDecay}
+          d3AlphaMin={physics.alphaTarget}
+          d3VelocityDecay={physics.velocityDecay}
+          nodeThreeObject={
+            !physics.labels
+              ? undefined
+              : (node) => {
+                  if (highlightNodes.has(node)) {
+                    console.log(node.title)
+                    const sprite = new SpriteText(node.title.substring(0, 30))
+                    console.log("didnt crash here 2")
+                    sprite.color = "#ffffff"
+                    sprite.textHeight = 8
+                    return sprite
+                  } else {
+                    return undefined
+                  }
+                }
+          }
+          nodeThreeObjectExtend={true}
+          onNodeClick={selectClick}
         />
       )}
     </View>