From 53c0324bf91f69ad5b38fe48956020b5279934c4 Mon Sep 17 00:00:00 2001
From: "Thomas F. K. Jorna" <thomasfkjorna@gmail.com>
Date: Sun, 18 Jul 2021 23:38:38 +0200
Subject: prettier buttons etc

---
 app/components/graph/graph.tsx | 57 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 7 deletions(-)

(limited to 'app/components/graph/graph.tsx')

diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index b11eb9b..8b041b5 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -285,7 +285,7 @@ onLinkHover={handleLinkHover}
                   if (highlightNodes.size === 0) {
                     return "rgb(100, 100, 100, 1)"
                   } else {
-                    return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
+                    return highlightNodes.has(node) ? "#a991f1" : "rgb(50, 50, 50, 0.5)"
                   }
                 }
               : (node) => {
@@ -327,7 +327,7 @@ onLinkHover={handleLinkHover}
                   if (highlightLinks.size === 0) {
                     return "rgb(50, 50, 50, 0.8)"
                   } else {
-                    return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
+                    return highlightLinks.has(link) ? "#a991f1" : "rgb(50, 50, 50, 0.2)"
                   }
                 }
               : (link) =>
@@ -407,13 +407,13 @@ onLinkHover={handleLinkHover}
           d3AlphaMin={physics.alphaTarget}
           d3VelocityDecay={physics.velocityDecay}
           onBackgroundClick={handleBackgroundClick}
+          backgroundColor={"#242730"}
         />
       ) : (
         <ForceGraph3D
           ref={fgRef}
           graphData={!physics.local ? gData : localGraphData}
           //graphData={gData}
-          nodeAutoColorBy={physics.colorful ? "id" : undefined}
           nodeColor={
             !physics.colorful
               ? (node) => {
@@ -423,10 +423,39 @@ onLinkHover={handleLinkHover}
                     return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)"
                   }
                 }
-              : undefined
+              : (node) => {
+                  if (node.neighbors.length === 1 || node.neighbors.length === 2) {
+                    return [
+                      "#ff665c",
+                      "#e69055",
+                      "#7bc275",
+                      "#4db5bd",
+                      "#FCCE7B",
+                      "#51afef",
+                      "#1f5582",
+                      "#C57BDB",
+                      "#a991f1",
+                      "#5cEfFF",
+                      "#6A8FBF",
+                    ][node.neighbors[0].index % 11]
+                  } else {
+                    return [
+                      "#ff665c",
+                      "#e69055",
+                      "#7bc275",
+                      "#4db5bd",
+                      "#FCCE7B",
+                      "#51afef",
+                      "#1f5582",
+                      "#C57BDB",
+                      "#a991f1",
+                      "#5cEfFF",
+                      "#6A8FBF",
+                    ][node.index % 11]
+                  }
+                }
           }
-          linkAutoColorBy={physics.colorful ? "target" : undefined}
-          //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
+          //linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined}
           linkColor={
             !physics.colorful
               ? (link) => {
@@ -436,7 +465,20 @@ onLinkHover={handleLinkHover}
                     return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)"
                   }
                 }
-              : undefined
+              : (link) =>
+                  [
+                    "#ff665c",
+                    "#e69055",
+                    "#7bc275",
+                    "#4db5bd",
+                    "#FCCE7B",
+                    "#51afef",
+                    "#1f5582",
+                    "#C57BDB",
+                    "#a991f1",
+                    "#5cEfFF",
+                    "#6A8FBF",
+                  ][gData.nodes[link.sourceIndex].index % 11]
           }
           linkDirectionalParticles={physics.particles}
           nodeLabel={(node) => node.title}
@@ -472,6 +514,7 @@ onLinkHover={handleLinkHover}
           nodeThreeObjectExtend={true}
           onNodeClick={selectClick}
           onBackgroundClick={handleBackgroundClick}
+          backgroundColor={"#242730"}
         />
       )}
     </View>
-- 
cgit v1.2.3