summaryrefslogtreecommitdiff
path: root/app/components/graph
diff options
context:
space:
mode:
Diffstat (limited to 'app/components/graph')
-rw-r--r--app/components/graph/graph.tsx271
1 files changed, 125 insertions, 146 deletions
diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx
index a129f62..ff41ea9 100644
--- a/app/components/graph/graph.tsx
+++ b/app/components/graph/graph.tsx
@@ -54,24 +54,25 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
useEffect(() => {
const fg = fgRef.current
//fg.d3Force('center').strength(0.05);
- if(physics.gravityOn){
+ if (physics.gravityOn) {
fg.d3Force("x", d3.forceX().strength(physics.gravity));
fg.d3Force("y", d3.forceY().strength(physics.gravity));
- if (physics.threedim) {
- if(physics.galaxy){
- fg.d3Force("y", d3.forceY().strength(physics.gravity / 5));
- fg.d3Force("z", d3.forceZ().strength(physics.gravity / 5));
+ 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("y", d3.forceY().strength(physics.gravity));
- fg.d3Force("z", d3.forceZ().strength(physics.gravity));
- } } else {
- fg.d3Force("z", null);
+ fg.d3Force("z", null);
};
} else {
fg.d3Force("x", null);
fg.d3Force("y", null);
- physics.threedim ? fg.d3Force("z", null) : null;
- };
+ physics.threedim ? fg.d3Force("z", null) : null;
+ };
fg.d3Force("link").strength(physics.linkStrength)
fg.d3Force("link").iterations(physics.linkIts)
physics.collision
@@ -81,13 +82,13 @@ 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]))
// link parent/children
- gData.nodes.forEach((node) => {
+ gData.nodes.forEach((node) => {
node.collapsed = node.id !== rootId
node.childLinks = []
node.parentLink = []
@@ -119,63 +120,41 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
* setPrunedTree(getPrunedTree())
* }, []);
*/
+ const [highlightNodes, setHighlightNodes] = useState(new Set());
+ const [highlightLinks, setHighlightLinks] = useState(new Set());
+ const [hoverNode, setHoverNode] = useState(null);
- // Highlight Graph
- /**
-/* const data = useMemo(() => {
-* // cross-link node objects
-* rando.links.forEach(link => {
-* const a = rando.nodes[link.source];
-* const b = rando.nodes[link.target];
-* !a.neighbors && (a.neighbors = []);
-* !b.neighbors && (b.neighbors = []);
-* a.neighbors.push(b);
-* b.neighbors.push(a);
-*
-* !a.links && (a.links = []);
-* !b.links && (b.links = []);
-* a.links.push(link);
-* b.links.push(link);
-* });
-*
-* return rando;
-* }, []);
- */
- const [highlightNodes, setHighlightNodes] = useState(new Set());
- const [highlightLinks, setHighlightLinks] = useState(new Set());
- const [hoverNode, setHoverNode] = useState(null);
-
- const updateHighlight = () => {
- setHighlightNodes(highlightNodes);
- setHighlightLinks(highlightLinks);
- };
+ const updateHighlight = () => {
+ setHighlightNodes(highlightNodes);
+ setHighlightLinks(highlightLinks);
+ };
- const handleNodeHover = node => {
- console.log("hover");
- highlightNodes.clear();
- highlightLinks.clear();
- if (node) {
- highlightNodes.add(node);
- node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
- node.links.forEach(link => highlightLinks.add(link));
- }
+ const handleNodeHover = node => {
+ console.log("hover");
+ highlightNodes.clear();
+ highlightLinks.clear();
+ if (node) {
+ highlightNodes.add(node);
+ node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+ node.links.forEach(link => highlightLinks.add(link));
+ }
- setHoverNode(node || null);
- updateHighlight();
- };
+ setHoverNode(node || null);
+ updateHighlight();
+ };
- const handleLinkHover = link => {
- highlightNodes.clear();
- highlightLinks.clear();
+ const handleLinkHover = link => {
+ highlightNodes.clear();
+ highlightLinks.clear();
- if (link) {
- highlightLinks.add(link);
- highlightNodes.add(link.source);
- highlightNodes.add(link.target);
- }
+ if (link) {
+ highlightLinks.add(link);
+ highlightNodes.add(link.source);
+ highlightNodes.add(link.target);
+ }
- updateHighlight();
- };
+ updateHighlight();
+ };
/* const paintRing = useCallback((node, ctx) => {
* // add ring just for highlighted nodes
@@ -186,19 +165,19 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
* }, [hoverNode]);
*/
- /* autoPauseRedraw={false}
- linkWidth={link => highlightLinks.has(link) ? 5 : 1}
- linkDirectionalParticles={4}
- linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
- nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
- nodeCanvasObject={paintRing}
- onNodeHover={handleNodeHover}
- onLinkHover={handleLinkHover}
- nodeRelSize={NODE_R} */
+ /* autoPauseRedraw={false}
+linkWidth={link => highlightLinks.has(link) ? 5 : 1}
+linkDirectionalParticles={4}
+linkDirectionalParticleWidth={link => highlightLinks.has(link) ? 4 : 0}
+nodeCanvasObjectMode={node => highlightNodes.has(node) ? 'before' : undefined}
+nodeCanvasObject={paintRing}
+onNodeHover={handleNodeHover}
+onLinkHover={handleLinkHover}
+ nodeRelSize={NODE_R} */
- //nodeColor={(node) =>
- // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
- //}
+ //nodeColor={(node) =>
+ // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow"
+ //}
return (
<View>
{!physics.threedim ? (
@@ -209,68 +188,68 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
//graphData={physics.collapse ? prunedTree : gData}
nodeAutoColorBy={physics.colorful ? "id" : undefined}
nodeColor={
- !physics.colorful ? (
+ !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"
+ 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"
+ !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
+ //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}
+ nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+ 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}
nodeCanvasObject={
- (node, ctx, globalScale) => {
- if(physics.labels) {
- if(globalScale > physics.labelScale || highlightNodes.has(node)) {
- const label = node.title.substring(0, Math.min(node.title.length, 30));
- const fontSize = 12/globalScale;
- ctx.font = `${fontSize}px Sans-Serif`;
- const textWidth = ctx.measureText(label).width;
- const bckgDimensions = [textWidth * 1.1, fontSize].map(n => n + fontSize * 0.5); // some padding
- const fadeFactor = Math.min(3*(globalScale - physics.labelScale)/physics.labelScale, 1);
+ (node, ctx, globalScale) => {
+ if (physics.labels) {
+ if (globalScale > physics.labelScale || highlightNodes.has(node)) {
+ const label = node.title.substring(0, Math.min(node.title.length, 30));
+ const fontSize = 12 / globalScale;
+ ctx.font = `${fontSize}px Sans-Serif`;
+ const textWidth = ctx.measureText(label).width;
+ const bckgDimensions = [textWidth * 1.1, fontSize].map(n => n + fontSize * 0.5); // some padding
+ const fadeFactor = Math.min(3 * (globalScale - physics.labelScale) / physics.labelScale, 1);
- ctx.fillStyle = 'rgba(20, 20, 20, ' +
- (highlightNodes.size === 0 ? .5 * fadeFactor : (highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor)) + ')';
- ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
+ ctx.fillStyle = 'rgba(20, 20, 20, ' +
+ (highlightNodes.size === 0 ? .5 * fadeFactor : (highlightNodes.has(node) ? 0.5 : 0.15 * fadeFactor)) + ')';
+ ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions);
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
- ctx.fillStyle = 'rgb(255, 255, 255, ' +
- (highlightNodes.size === 0 ? fadeFactor : (highlightNodes.has(node) ? 1 : 0.3 * fadeFactor)) + ')';
- ctx.fillText(label, node.x, node.y);
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'middle';
+ ctx.fillStyle = 'rgb(255, 255, 255, ' +
+ (highlightNodes.size === 0 ? fadeFactor : (highlightNodes.has(node) ? 1 : 0.3 * fadeFactor)) + ')';
+ ctx.fillText(label, node.x, node.y);
- node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
- };
- };
- }}
- nodeCanvasObjectMode={()=> 'after'}
+ node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint
+ };
+ };
+ }}
+ nodeCanvasObjectMode={() => 'after'}
onNodeHover={physics.hover ? handleNodeHover : null}
//onLinkHover={physics.hover ? handleLinkHover : null}
d3AlphaDecay={physics.alphaDecay}
@@ -285,38 +264,38 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
//graphData={physics.collapse ? prunedTree : gData}
nodeAutoColorBy={physics.colorful ? "id" : undefined}
nodeColor={
- !physics.colorful ? (
+ !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"
+ 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"
+ !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
+ //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}
+ nodeLabel={(node) => node.title}
//nodeVal ={(node)=> node.childLinks.length * 0.5 + 1}
//d3VelocityDecay={visco}
- linkWidth={link => highlightLinks.has(link) ? 3 * physics.linkWidth : physics.linkWidth}
+ 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}
@@ -327,15 +306,15 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element {
d3AlphaMin={physics.alphaTarget}
d3VelocityDecay={physics.velocityDecay}
nodeThreeObject={
- !physics.labels ? undefined
+ !physics.labels ? undefined
: ((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;
- } )}
+ 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;
+ })}
nodeThreeObjectExtend={true}
/>
)}
generated by cgit v1.2.3 (git 2.46.2) at 2024-12-25 05:27:59 +0000