From 86b2cf2696ecf3171c9ef05734c940ffbc750537 Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sun, 18 Jul 2021 19:37:03 +0200 Subject: exiting and entering local mode works well --- app/components/graph/graph.tsx | 69 +++++++++++++++++++------------------- app/components/tweaks/tweaks.tsx | 4 +-- app/screens/graph/graph-screen.tsx | 14 ++++---- 3 files changed, 43 insertions(+), 44 deletions(-) (limited to 'app') diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 453e15d..8a3b6be 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -84,39 +84,37 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { // For the expandable version of the graph - const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) - console.log(nodesById) - // link parent/children - gData.nodes.forEach((node) => { - typeof physics.rootId === "number" - ? (node.collapsed = node.index !== physics.rootId) - : (node.collapsed = node.id !== physics.rootId) - node.childLinks = [] - }) - 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 { nodes: visibleNodes, links: visibleLinks } - }, [nodesById]) - - const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - + /* const nodesById = useMemo(() => { + * const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) + * console.log(nodesById) + * // link parent/children + * gData.nodes.forEach((node) => { + * typeof physics.rootId === "number" + * ? (node.collapsed = node.index !== physics.rootId) + * : (node.collapsed = node.id !== physics.rootId) + * node.childLinks = [] + * }) + * 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 { nodes: visibleNodes, links: visibleLinks } + * }, [nodesById]) + * const [prunedTree, setPrunedTree] = useState(getPrunedTree()) + */ const handleNodeClick = useCallback((node) => { node.collapsed = !node.collapsed // toggle collapse state setPrunedTree(getPrunedTree()) @@ -204,7 +202,7 @@ onLinkHover={handleLinkHover} const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] }) useEffect(() => { - !physics.local && setPhysics({ ...physics, local: true }) + localGraphData.nodes.length && !physics.local && setPhysics({ ...physics, local: true }) }, [localGraphData]) const getLocalGraphData = (node) => { @@ -213,6 +211,7 @@ onLinkHover={handleLinkHover} let g = localGraphData console.log(g.nodes) if (!node.local) { + g = {nodes: [], links: []} console.log("length is 0") node.local = true //keep track of these boys g.nodes.push(node) //only add the clicked node if its the first @@ -278,7 +277,7 @@ onLinkHover={handleLinkHover} ref={fgRef} autoPauseRedraw={false} //graphData={gData} - graphData={physics.local ? localGraphData : physics.collapse ? prunedTree : gData} + graphData={physics.local ? localGraphData : gData} nodeAutoColorBy={physics.colorful ? "id" : undefined} nodeColor={ !physics.colorful diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index e52e587..9e23afb 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -62,11 +62,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element step={1} /> { setPhysics({ ...physics, linkStrength: value }) }} value={physics.linkStrength} - step={0.1} + step={0.01} /> { + const sanitizeGraph = (data) => { const cleanLinks = [] data.links.forEach((link, j) => { let target let source - for (let i = 0; i < nodeIds.length; i++) { + for (let i = 0; i < data.nodes.length; i++) { let a = data.nodes[i] !a.neighbors && (a.neighbors = []) !a.links && (a.links = []) // the first time around, // index the node as not a part of the local graph !j && (a.local=false); - if (link.target === nodeIds[i]) { + if (link.target === data.nodes[i].id) { a.links.push(link) target = [a, i] link.target === link.source ? null : cleanLinks.push(link) - } else if (link.source === nodeIds[i]) { + } else if (link.source === data.nodes[i].id) { a.links.push(link) source = [a, i] } @@ -155,7 +155,7 @@ export const GraphScreen = observer(function GraphScreen() { let nods = getNodesById(dataa.data) setNodeIds(nods) console.log(nodeIds) - let cleanData = sanitizeGraph(dataa.data, nods) + let cleanData = sanitizeGraph(dataa.data) console.log(cleanData) setGraphData(cleanData) }) -- cgit v1.2.3