From 08124aa84fdbc48b1579c37e75cb7bc69c1feff8 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sun, 18 Jul 2021 01:42:47 +0200
Subject: first steps towards expand mode

---
 app/components/graph/graph.tsx   | 61 ++++++++++++++++++++--------------------
 app/components/tweaks/tweaks.tsx |  7 +++++
 2 files changed, 38 insertions(+), 30 deletions(-)

(limited to 'app/components')

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}
-- 
cgit v1.2.3