summaryrefslogtreecommitdiff
path: root/app/components/graph/graph.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/graph/graph.tsx')
-rw-r--r--app/components/graph/graph.tsx107
1 files changed, 14 insertions, 93 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index 8a3b6be..26f521c 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -8,11 +8,11 @@ import { flatten } from "ramda"
//import data from "../../data/miserables.json"
//import genRandomTree from "../../data/randomdata";
-//import rando from "../../data/rando.json"
+import rando from "../../data/rando.json"
import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from "react-force-graph"
import * as d3 from "d3-force-3d"
-import * as three from "three"
+//import * as three from "three"
import SpriteText from "three-spritetext"
const CONTAINER: ViewStyle = {
@@ -278,47 +278,35 @@ onLinkHover={handleLinkHover}
autoPauseRedraw={false}
//graphData={gData}
graphData={physics.local ? localGraphData : gData}
- nodeAutoColorBy={physics.colorful ? "id" : undefined}
- nodeColor={
- !physics.colorful
- ? (node) => {
+ nodeAutoColorBy={physics.colorful ? (node)=>node.index%GROUPS : 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
+ }) : undefined
}
- linkAutoColorBy={physics.colorful ? "target" : undefined}
- //linkAutoColorBy={(d) => gData.nodes[d.source].id % GROUPS}
- linkColor={
- !physics.colorful
- ? (link) => {
+ linkAutoColorBy={physics.colorful ? ((d) => gData.nodes[d.sourceIndex].id % GROUPS) : undefined}
+ 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"
- }
+ }) : undefined}
linkDirectionalParticles={physics.particles}
- onNodeClick={!physics.collapse ? selectClick : handleNodeClick}
+ onNodeClick={selectClick}
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) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ {
+ return highlightNodes.has(node) ? node.neighbors.length + 5 : node.neighbors.length + 3
+ }
}
linkDirectionalParticleWidth={physics.particleWidth}
nodeCanvasObject={(node, ctx, globalScale) => {
@@ -374,75 +362,8 @@ onLinkHover={handleLinkHover}
/>
) : (
<ForceGraph3D
- ref={fgRef}
- autoPauseRedraw={false}
- graphData={gData}
- //graphData={physics.collapse ? prunedTree : gData}
- 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
- }
- 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 * 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) ? node.neighbors.length + 5 : node.neighbors.length + 3
- }
- linkDirectionalParticleWidth={physics.particleWidth}
- onNodeHover={physics.hover ? handleNodeHover : null}
- //onLinkHover={physics.hover ? handleLinkHover : null}
- d3AlphaDecay={physics.alphaDecay}
- d3AlphaMin={physics.alphaTarget}
- d3VelocityDecay={physics.velocityDecay}
- nodeThreeObject={
- !physics.labels
- ? undefined
- : (node) => {
- if (highlightNodes.has(node)) {
- console.log(node.title)
- const sprite = new SpriteText(node.title.substring(0, 30))
- console.log("didnt crash here 2")
- sprite.color = "#ffffff"
- sprite.textHeight = 8
- return sprite
- } else {
- return undefined
- }
- }
- }
- nodeThreeObjectExtend={true}
+ ref={fgRef}
+ graphData={rando}
/>
)}
</View>