Trying to regain collapse/coloring functionality

2 files changed, 21 insertions, 20 deletions

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index e179cb9..00a4910 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -62,22 +62,22 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
   })
 
   // For the expandable version of the graph
-  /* const rootId = 0
+    const rootId = 0
+
+  const nodesById = useMemo(() => {
+    const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node]))
 
-*   const nodesById = useMemo(() => {
-*   const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.id, node]))
- */
     // link parent/children
-      /* gData.nodes.forEach((node) => {
-  *   node.collapsed = node.id !== rootId
-  *   node.childLinks = []
-  *   node.parentLink = []
-  * })
-  * gData.links.forEach((link) => nodesById[link.source].childLinks.push(link))
-
-  * return nodesById
-    }, [gData])
-   */
+      gData.nodes.forEach((node) => {
+      node.collapsed = node.id !== rootId
+      node.childLinks = []
+      node.parentLink = []
+    })
+    gData.links.forEach((link) => nodesById[link.source].childLinks.push(link))
+
+    return nodesById
+  }, [gData])
+
   /* const getPrunedTree = useCallback(() => {
 *   const visibleNodes = [];
 *   const visibleLinks = [];
@@ -175,6 +175,9 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
         onLinkHover={handleLinkHover}
                 nodeRelSize={NODE_R} */
 
+          //nodeColor={(node) =>
+          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+          //}
   return (
     <View>
       {!physics.threedim ? (
@@ -182,13 +185,11 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           ref={fgRef}
           graphData={gData}
           //graphData={physics.collapse ? prunedTree : gData}
-          // nodeAutoColorBy={d => d.id%GROUPS}
+          nodeAutoColorBy="id"
+          linkAutoColorBy="target"
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
           linkColor="#ffffff"
           linkDirectionalParticles={physics.particles}
-          //nodeColor={(node) =>
-          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
-          //}
           //onNodeClick={!physics.collapse ? null : handleNodeClick}
             nodeLabel={(node) => node.title}
           //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
@@ -197,12 +198,12 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
           linkDirectionalParticleWidth={physics.particleWidth}
-            backgroundColor={"#ffffff"}
         />
       ) : (
         <ForceGraph3D
           ref={fgRef}
           graphData={gData}
+          nodeAutoColorBy="group"
           //graphData={physics.collapse ? prunedTree : gData}
           // nodeAutoColorBy={d => d.id%GROUPS}
           //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index cfe658c..2a2e3d3 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -50,7 +50,7 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
                         step={1} />
                     <Text preset="fieldLabel" text={"Link Force: " + physics.linkStrength} />
                     <Slider style={{ height: 40, width: "90%" }}
-                        minimumValue={0}
+                        minimumValue={-2}
                         maximumValue={2}
                         onValueChange={(value) => { setPhysics({ ...physics, linkStrength: value }) }}
                         value={physics.linkStrength}