diff options
author | Thomas F. K. Jorna <[email protected]> | 2021-07-18 01:42:47 +0200 |
---|---|---|
committer | Thomas F. K. Jorna <[email protected]> | 2021-07-18 01:42:47 +0200 |
commit | 08124aa84fdbc48b1579c37e75cb7bc69c1feff8 (patch) | |
tree | 95e6c9b656342fe54bf82d154633bda8bf5c3420 /app/components | |
parent | ecfd4f05bd32c3942580a5b01f021b2acdff4b54 (diff) |
first steps towards expand mode
Diffstat (limited to 'app/components')
-rw-r--r-- | app/components/graph/graph.tsx | 61 | ||||
-rw-r--r-- | app/components/tweaks/tweaks.tsx | 7 |
2 files changed, 38 insertions, 30 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index ff41ea9..7db642e 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -82,44 +82,45 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { }) // For the expandable version of the graph - const rootId = 0 + + const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node])) + const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) + console.log(nodesById); // link parent/children gData.nodes.forEach((node) => { - node.collapsed = node.id !== rootId + (((typeof physics.rootId) === "number") ? node.collapsed = node.index !== physics.rootId + : node.collapsed = node.id !== physics.rootId) node.childLinks = [] - node.parentLink = [] }) - gData.links.forEach((link) => nodesById[link.source].childLinks.push(link)) + gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)); + return nodesById; + }, [gData]); + const getPrunedTree = useCallback(() => { + const visibleNodes = []; + const visibleLinks = []; + (function traverseTree(node = nodesById[physics.rootId]) { + visibleNodes.push(node); + if (node.collapsed) return + visibleLinks.push(...node.childLinks) + node.childLinks + .map(link => ((typeof link.targetIndex) === "object") ? link.targetIndex : nodesById[link.targetIndex]) // get child node + .forEach(traverseTree); + })(); - return nodesById - }, [gData]) + return { nodes: visibleNodes, links: visibleLinks } + }, [nodesById]) - /* 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) -* })() + const [prunedTree, setPrunedTree] = useState(getPrunedTree()) -* return { nodes: visibleNodes, links: visibleLinks } -* }, [nodesById]) + const handleNodeClick = useCallback((node) => { + node.collapsed = !node.collapsed // toggle collapse state + setPrunedTree(getPrunedTree()) + }, []); -* const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - -* const handleNodeClick = useCallback((node) => { -* node.collapsed = !node.collapsed // toggle collapse state -* setPrunedTree(getPrunedTree()) -* }, []); - */ + //highlighting const [highlightNodes, setHighlightNodes] = useState(new Set()); const [highlightLinks, setHighlightLinks] = useState(new Set()); const [hoverNode, setHoverNode] = useState(null); @@ -184,8 +185,8 @@ onLinkHover={handleLinkHover} <ForceGraph2D ref={fgRef} autoPauseRedraw={false} - graphData={gData} - //graphData={physics.collapse ? prunedTree : gData} + //graphData={gData} + graphData={physics.collapse ? prunedTree : gData} nodeAutoColorBy={physics.colorful ? "id" : undefined} nodeColor={ !physics.colorful ? ( @@ -215,7 +216,7 @@ onLinkHover={handleLinkHover} // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } linkDirectionalParticles={physics.particles} - //onNodeClick={!physics.collapse ? null : handleNodeClick} + onNodeClick={!physics.collapse ? undefined : handleNodeClick} nodeLabel={(node) => node.title} //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1} //d3VelocityDecay={visco} diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index d2b5bd1..49754d0 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -181,6 +181,13 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.collapse} onValueChange={() => { setPhysics({ ...physics, collapse: !physics.collapse }) }} /> + <Text preset="fieldLabel" text={"Change starting point: " + physics.rootId} /> + <Slider style={{ height: 40, width: "90%" }} + minimumValue={0} + maximumValue={600} + onValueChange={(value) => { setPhysics({ ...physics, rootId: value }) }} + value={physics.rootId} + step={1} /> <Text preset="fieldLabel" text="3D" /> <Switch style={{ width: "5", height: 20, marginVertical: 10 }} value={physics.threedim} |