summaryrefslogtreecommitdiff
path: root/app/components/graph
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/graph')
-rw-r--r--app/components/graph/graph.tsx57
1 files changed, 50 insertions, 7 deletions
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>