From 930793cfb95262714ca3642dbbbd7ba0b30eb22e Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sat, 17 Jul 2021 23:24:43 +0200
Subject: added galaxy mode for 3d

---
 app/components/graph/graph.tsx     | 58 +++++++++++++++++++++++++++-----------
 app/components/tweaks/tweaks.tsx   |  5 ++++
 app/screens/graph/graph-screen.tsx |  1 +
 3 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index a4e91f2..eab78a2 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -55,8 +55,17 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
     if(physics.gravityOn){
       fg.d3Force("x", d3.forceX().strength(physics.gravity));
       fg.d3Force("y", d3.forceY().strength(physics.gravity));
-      physics.threedim ? fg.d3Force("z", d3.forceZ().strength(physics.gravity)) : null;
+        if (physics.threedim) {
+      if(physics.galaxy){
+          fg.d3Force("y",  d3.forceY().strength(physics.gravity / 5));
+      fg.d3Force("z",  d3.forceZ().strength(physics.gravity / 5));
       } else {
+      fg.d3Force("y", d3.forceY().strength(physics.gravity));
+       fg.d3Force("z", d3.forceZ().strength(physics.gravity));
+      }  } else {
+       fg.d3Force("z",  null);
+      };
+    } else {
       fg.d3Force("x", null);
       fg.d3Force("y", null);
           physics.threedim ? fg.d3Force("z",  null) : null;
@@ -269,32 +278,49 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
       ) : (
         <ForceGraph3D
           ref={fgRef}
+          autoPauseRedraw={false}
           graphData={gData}
           //graphData={physics.collapse ? prunedTree : gData}
-          // nodeAutoColorBy={d => d.id%GROUPS}
-          linkWidth={physics.linkWidth}
-          linkDirectionalParticles={physics.particles}
-          nodeColor={(node) =>
-              highlightNodes.has(node) ? "purple" : "grey"
+          nodeAutoColorBy={physics.colorful ? "id" : undefined}
+          nodeColor={
+              !physics.colorful ? (
+              (node) => {
+                  if(highlightNodes.size === 0) {
+                      return "rgb(100, 100, 100, 1)"
+                  } else {
+              return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                  }
           //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+              }) : undefined
           }
-          linkColor={(link) =>
-              highlightLinks.has(link) ? "purple" : "grey"
+          linkAutoColorBy={physics.colorful ? "target" : undefined}
+          //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
+          linkColor={
+              !physics.colorful ? (
+            (link) => {
+                  if(highlightLinks.size === 0) {
+                      return "rgb(50, 50, 50, 0.8)"
+                  } else {
+              return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                  }
+          //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+              }
+              ) : undefined
+              //highlightLinks.has(link) ? "purple" : "grey"
           //  !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
           }
+          linkDirectionalParticles={physics.particles}
           //onNodeClick={!physics.collapse ? null : handleNodeClick}
-          nodeLabel={node => node.title}
-          //nodeVal={(node) => node.childLinks.length + 1}
-        //d3VelocityDecay={visco}
-          //linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
-          //linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+            nodeLabel={(node) => node.title}
+          //nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
+          //d3VelocityDecay={visco}
+            linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
           linkOpacity={physics.linkOpacity}
           nodeRelSize={physics.nodeRel}
-          //nodeVal={node => highlightNodes.has(node) ? 10 : 5}
+          nodeVal={node => highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3}
           linkDirectionalParticleWidth={physics.particleWidth}
-          backgroundColor="#1d1d1d"
           onNodeHover={physics.hover ? handleNodeHover : null}
-          onLinkHover={physics.hover ? handleLinkHover : null}
+          //onLinkHover={physics.hover ? handleLinkHover : null}
           d3AlphaDecay={physics.alphaDecay}
           d3AlphaMin={physics.alphaTarget}
           d3VelocityDecay={physics.velocityDecay}
diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx
index 8913e98..a67b723 100644
--- a/app/components/tweaks/tweaks.tsx
+++ b/app/components/tweaks/tweaks.tsx
@@ -102,6 +102,11 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element
                         onValueChange={(value) => { setPhysics({ ...physics, velocityDecay: value }) }}
                         value={physics.velocityDecay}
                         step={0.01} />
+                    <Text preset="fieldLabel" text={"Galaxy Mode (3D-only)"} />
+                    <Switch style={{ width: "5", height: 20, marginVertical: 10 }}
+                        value={physics.galaxy}
+                        onValueChange={() => { setPhysics({ ...physics, galaxy: !physics.galaxy }) }}
+                    />
                 </View>,
         },
         {
diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx
index 008e53b..a33c6b1 100644
--- a/app/screens/graph/graph-screen.tsx
+++ b/app/screens/graph/graph-screen.tsx
@@ -55,6 +55,7 @@ export const GraphScreen = observer(function GraphScreen() {
     gravityOn: true,
     hover: true,
     colorful: true,
+    galaxy: true,
   }
 
   const getData = async () => {
-- 
cgit v1.2.3