From 155dee08e1845122daa6e115137cbad65b87d4eb Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sun, 18 Jul 2021 20:42:33 +0200 Subject: fixed 3d not working --- app/components/graph/graph.tsx | 71 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 65 insertions(+), 6 deletions(-) (limited to 'app/components/graph') 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 ? ( node.index%GROUPS : undefined} @@ -362,8 +362,67 @@ onLinkHover={handleLinkHover} /> ) : ( { + 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} /> )} -- cgit v1.2.3