summaryrefslogtreecommitdiff
path: root/app/components/graph/graph.tsx
diff options
context:
space:
mode:
authorThomas F. K. Jorna <[email protected]>2021-07-18 19:37:03 +0200
committerThomas F. K. Jorna <[email protected]>2021-07-18 19:37:03 +0200
commit86b2cf2696ecf3171c9ef05734c940ffbc750537 (patch)
tree8d70d4cd6e1b1bebaaa6b728df27ce85daae147f /app/components/graph/graph.tsx
parenta38f0d5f69f5583732b5a844f472718160d07334 (diff)
exiting and entering local mode works well
Diffstat (limited to 'app/components/graph/graph.tsx')
-rw-r--r--app/components/graph/graph.tsx69
1 files changed, 34 insertions, 35 deletions
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