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 +++++
 app/screens/graph/graph-screen.tsx | 16 +++++++---
 3 files changed, 50 insertions(+), 34 deletions(-)

(limited to 'app')

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}
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index ebca953..b4ec1d9 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -56,6 +56,7 @@ export const GraphScreen = observer(function GraphScreen() {
     hover: true,
     colorful: true,
     galaxy: true,
+    rootId: 0,
   }
 
   const getData = async () => {
@@ -101,7 +102,7 @@ export const GraphScreen = observer(function GraphScreen() {
   // Get previous settings and the data from the org-roam-server
   const sanitizeGraph = (data, nodeIds: string[]) => {
     const cleanLinks = [];
-    data.links.forEach((link) => {
+    data.links.forEach((link, j) => {
       let target;
       let source;
       for (let i = 0; i < nodeIds.length; i++) {
@@ -114,7 +115,7 @@ export const GraphScreen = observer(function GraphScreen() {
           //a.neighbors.push(a);
           a.links.push(link);
           target = [a, i];
-          cleanLinks.push(link);
+          link.target===link.source ? null : cleanLinks.push(link);
         } else if (link.source === nodeIds[i]) {
           //let a = data.nodes[i];
           //!a.neighbors && (a.neighbors = []);
@@ -122,10 +123,12 @@ export const GraphScreen = observer(function GraphScreen() {
           a.links.push(link);
           source = [a, i];
         };
-      };
+        };
       if (target && source) {
         data.nodes[target[1]].neighbors.push(source[0]);
         data.nodes[source[1]].neighbors.push(target[0]);
+        link.sourceIndex=source[1];
+        link.targetIndex=target[1];
       }
     });
     console.log(cleanLinks);
@@ -135,8 +138,13 @@ export const GraphScreen = observer(function GraphScreen() {
 
   const getNodesById = (data) => {
     let temp = [];
-    data.nodes.forEach(node => temp.push(node.id));
+      data.nodes.forEach((node, i) => {
+          temp.push(node.id);
+          node.index=i;
+      }
+      );
     setNodeIds(temp);
+
     return temp;
   };
 
-- 
cgit v1.2.3