diff options
| -rw-r--r-- | app/components/graph/graph.tsx | 39 | ||||
| -rw-r--r-- | app/components/tweaks/tweaks.tsx | 2 |
2 files changed, 21 insertions, 20 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index e179cb9..00a4910 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -62,22 +62,22 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { }) // For the expandable version of the graph - /* const rootId = 0 + const rootId = 0 + + const nodesById = useMemo(() => { + const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node])) -* const nodesById = useMemo(() => { -* const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node])) - */ // link parent/children - /* gData.nodes.forEach((node) => { - * node.collapsed = node.id !== rootId - * node.childLinks = [] - * node.parentLink = [] - * }) - * gData.links.forEach((link) => nodesById[link.source].childLinks.push(link)) - - * return nodesById - }, [gData]) - */ + gData.nodes.forEach((node) => { + node.collapsed = node.id !== rootId + node.childLinks = [] + node.parentLink = [] + }) + gData.links.forEach((link) => nodesById[link.source].childLinks.push(link)) + + return nodesById + }, [gData]) + /* const getPrunedTree = useCallback(() => { * const visibleNodes = []; * const visibleLinks = []; @@ -175,6 +175,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { onLinkHover={handleLinkHover} nodeRelSize={NODE_R} */ + //nodeColor={(node) => + // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" + //} return ( <View> {!physics.threedim ? ( @@ -182,13 +185,11 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { ref={fgRef} graphData={gData} //graphData={physics.collapse ? prunedTree : gData} - // nodeAutoColorBy={d => d.id%GROUPS} + nodeAutoColorBy="id" + linkAutoColorBy="target" //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} linkColor="#ffffff" linkDirectionalParticles={physics.particles} - //nodeColor={(node) => - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - //} //onNodeClick={!physics.collapse ? null : handleNodeClick} nodeLabel={(node) => node.title} //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} @@ -197,12 +198,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { linkOpacity={physics.linkOpacity} nodeRelSize={physics.nodeRel} linkDirectionalParticleWidth={physics.particleWidth} - backgroundColor={"#ffffff"} /> ) : ( <ForceGraph3D ref={fgRef} graphData={gData} + nodeAutoColorBy="group" //graphData={physics.collapse ? prunedTree : gData} // nodeAutoColorBy={d => d.id%GROUPS} //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS} diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index cfe658c..2a2e3d3 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -50,7 +50,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element step={1} /> <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} /> <Slider style={{ height: 40, width: "90%" }} - minimumValue={0} + minimumValue={-2} maximumValue={2} onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }} value={physics.linkStrength} |