From 5936723f2ebfff4561851866ee161aaa86d989bd Mon Sep 17 00:00:00 2001 From: "Thomas F. K. Jorna" Date: Sun, 18 Jul 2021 18:29:58 +0200 Subject: localgraph working, also prettier --- app/components/graph/graph.tsx | 427 +++++++++++++++++++++---------------- app/components/tweaks/tweaks.tsx | 4 + app/screens/graph/graph-screen.tsx | 123 +++++------ 3 files changed, 312 insertions(+), 242 deletions(-) diff --git a/app/components/graph/graph.tsx b/app/components/graph/graph.tsx index 1f4f4b2..e064b38 100644 --- a/app/components/graph/graph.tsx +++ b/app/components/graph/graph.tsx @@ -12,7 +12,7 @@ import { flatten } from "ramda" 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 = { @@ -55,24 +55,24 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { const fg = fgRef.current //fg.d3Force('center').strength(0.05); if (physics.gravityOn) { - fg.d3Force("x", d3.forceX().strength(physics.gravity)); - fg.d3Force("y", d3.forceY().strength(physics.gravity)); + 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)); + 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)); + 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; - }; + fg.d3Force("x", null) + fg.d3Force("y", null) + physics.threedim ? fg.d3Force("z", null) : null + } fg.d3Force("link").strength(physics.linkStrength) fg.d3Force("link").iterations(physics.linkIts) physics.collision @@ -83,103 +83,103 @@ export const Graph = observer(function Graph(props: GraphProps): JSX.Element { // For the expandable version of the graph - - const nodesById = useMemo(() => { - const nodesById = Object.fromEntries(gData.nodes.map((node) => [node.index, node])) - console.log(nodesById); + console.log(nodesById) // link parent/children gData.nodes.forEach((node) => { - (((typeof physics.rootId) === "number") ? node.collapsed = node.index !== physics.rootId - : node.collapsed = node.id !== physics.rootId) + typeof physics.rootId === "number" + ? (node.collapsed = node.index !== physics.rootId) + : (node.collapsed = node.id !== physics.rootId) node.childLinks = [] }) - gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)); - return nodesById; - }, [gData]); - const getPrunedTree = useCallback(() => { - const visibleNodes = []; - const visibleLinks = []; - (function traverseTree(node = nodesById[physics.rootId]) { - visibleNodes.push(node); - if (node.collapsed) return - visibleLinks.push(...node.childLinks) - node.childLinks - .map(link => ((typeof link.targetIndex) === "object") ? link.targetIndex : nodesById[link.targetIndex]) // get child node - .forEach(traverseTree); - })(); - - return { nodes: visibleNodes, links: visibleLinks } - }, [nodesById]) - - const [prunedTree, setPrunedTree] = useState(getPrunedTree()) - - const handleNodeClick = useCallback((node) => { - node.collapsed = !node.collapsed // toggle collapse state - setPrunedTree(getPrunedTree()) - }, []); + gData.links.forEach((link) => nodesById[link.sourceIndex].childLinks.push(link)) + return nodesById + }, [gData]) + const getPrunedTree = useCallback(() => { + const visibleNodes = [] + const visibleLinks = [] + ;(function traverseTree(node = nodesById[physics.rootId]) { + visibleNodes.push(node) + if (node.collapsed) return + visibleLinks.push(...node.childLinks) + node.childLinks + .map((link) => + typeof link.targetIndex === "object" ? link.targetIndex : nodesById[link.targetIndex], + ) // get child node + .forEach(traverseTree) + })() + + return { nodes: visibleNodes, links: visibleLinks } + }, [nodesById]) + + const [prunedTree, setPrunedTree] = useState(getPrunedTree()) + + const handleNodeClick = useCallback((node) => { + node.collapsed = !node.collapsed // toggle collapse state + setPrunedTree(getPrunedTree()) + }, []) //highlighting - const [highlightNodes, setHighlightNodes] = useState(new Set()); - const [highlightLinks, setHighlightLinks] = useState(new Set()); - const [hoverNode, setHoverNode] = useState(null); + const [highlightNodes, setHighlightNodes] = useState(new Set()) + const [highlightLinks, setHighlightLinks] = useState(new Set()) + const [hoverNode, setHoverNode] = useState(null) const updateHighlight = () => { - setHighlightNodes(highlightNodes); - setHighlightLinks(highlightLinks); - }; - - const handleBackgroundClick = (event) => { - highlightNodes.clear(); - highlightLinks.clear(); + setHighlightNodes(highlightNodes) + setHighlightLinks(highlightLinks) + } - setSelectedNode(null); - updateHighlight(); - } + const handleBackgroundClick = (event) => { + highlightNodes.clear() + highlightLinks.clear() - const handleNodeHover = node => { - console.log("hover"); - if(!selectedNode){ - highlightNodes.clear(); - highlightLinks.clear(); - if (node) { - highlightNodes.add(node); - node.neighbors.forEach(neighbor => highlightNodes.add(neighbor)); - node.links.forEach(link => highlightLinks.add(link)); - } + setSelectedNode(null) + updateHighlight() + } - setHoverNode(node || null); - updateHighlight(); + const handleNodeHover = (node) => { + console.log("hover") + if (!selectedNode) { + 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() } - }; + } - 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); + highlightLinks.add(link) + highlightNodes.add(link.source) + highlightNodes.add(link.target) } - updateHighlight(); - }; + updateHighlight() + } - // Normally the graph doesn't update when you just change the physics parameters - // This forces the graph to make a small update when you do - useEffect(()=>{ - fgRef.current.d3ReheatSimulation(); - }, [physics]); + // Normally the graph doesn't update when you just change the physics parameters + // This forces the graph to make a small update when you do + useEffect(() => { + fgRef.current.d3ReheatSimulation() + }, [physics]) /* const paintRing = useCallback((node, ctx) => { -* // add ring just for highlighted nodes -* ctx.beginPath(); -* ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false); -* ctx.fillStyle = node === hoverNode ? 'red' : 'orange'; -* ctx.fill(); -* }, [hoverNode]); -*/ + * // add ring just for highlighted nodes + * ctx.beginPath(); + * ctx.arc(node.x, node.y, NODE_R * 1.4, 0, 2 * Math.PI, false); + * ctx.fillStyle = node === hoverNode ? 'red' : 'orange'; + * ctx.fill(); + * }, [hoverNode]); + */ /* autoPauseRedraw={false} linkWidth={link => highlightLinks.has(link) ? 5 : 1} @@ -195,26 +195,58 @@ onLinkHover={handleLinkHover} // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" //} - const [selectedNode, setSelectedNode] = useState({}); + const [selectedNode, setSelectedNode] = useState({}) + + //shitty handler to check for doubleClicks + const [doubleClick, setDoubleClick] = useState(0) + const [localGraphData, setLocalGraphData] = useState({ nodes: [], links: [] }) + + const updateLocalGraph = (node) => { + console.log(localGraphData) + localGraphData.nodes.length ? setLocalGraphData({ nodes: [], links: [] }) : null + let g = localGraphData + console.log(g.nodes) + g.nodes.length ? null : g.nodes.push(node) //only add the clicked node if its the first + node.neighbors.forEach((neighbor) => { + if (neighbor !== node) { + const newNode: boolean = g.nodes.every((existingNode) => { + if (existingNode === neighbor) { + return false + } else { + return true + } + }) + newNode && g.nodes.push(neighbor) + } + }) + node.links.forEach((neighborLink) => { + const newLink: boolean = g.links.every((existingLink) => { + if (existingLink === neighborLink) { + return false + } else { + return true + } + }) + newLink && g.links.push(neighborLink) + }) + setLocalGraphData(g) + } - //shitty handler to check for doubleClicks - const [doubleClick, setDoubleClick] = useState(0) const selectClick = (node, event) => { - highlightNodes.clear(); - highlightLinks.clear(); - if(event.timeStamp - doubleClick < 400){ - + highlightNodes.clear() + highlightLinks.clear() + console.log(localGraphData) + if (event.timeStamp - doubleClick < 400) { + updateLocalGraph(node) } - if (node) { - highlightNodes.add(node); - node.neighbors.forEach(neighbor => highlightNodes.add(neighbor)); - node.links.forEach(link => highlightLinks.add(link)); + highlightNodes.add(node) + node.neighbors.forEach((neighbor) => highlightNodes.add(neighbor)) + node.links.forEach((link) => highlightLinks.add(link)) } - - setSelectedNode(node || null); - updateHighlight(); - setDoubleClick(event.timeStamp); + setSelectedNode(node || null) + updateHighlight() + setDoubleClick(event.timeStamp) } return ( @@ -224,32 +256,35 @@ onLinkHover={handleLinkHover} ref={fgRef} autoPauseRedraw={false} //graphData={gData} - graphData={physics.collapse ? prunedTree : gData} + graphData={ + localGraphData.nodes.length ? localGraphData : 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)" + !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" } - // !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) => { - if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" - } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + !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" } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - ) : undefined + : undefined //highlightLinks.has(link) ? "purple" : "grey" // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } @@ -258,43 +293,65 @@ onLinkHover={handleLinkHover} 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} + 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); - - 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); - - node.__bckgDimensions = bckgDimensions; // to re-use in nodePointerAreaPaint - }; - }; - }} - nodeCanvasObjectMode={() => 'after'} + 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, + ) + + ctx.fillStyle = + "rgba(20, 20, 20, " + + (highlightNodes.size === 0 + ? 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) + + node.__bckgDimensions = bckgDimensions // to re-use in nodePointerAreaPaint + } + } + }} + nodeCanvasObjectMode={() => "after"} onNodeHover={physics.hover ? handleNodeHover : null} //onLinkHover={physics.hover ? handleLinkHover : null} d3AlphaDecay={physics.alphaDecay} d3AlphaMin={physics.alphaTarget} d3VelocityDecay={physics.velocityDecay} - onBackgroundClick={handleBackgroundClick} + onBackgroundClick={handleBackgroundClick} /> ) : ( { - if (highlightNodes.size === 0) { - return "rgb(100, 100, 100, 1)" - } else { - return highlightNodes.has(node) ? "purple" : "rgb(50, 50, 50, 0.5)" + !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" } - // !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) => { - if (highlightLinks.size === 0) { - return "rgb(50, 50, 50, 0.8)" - } else { - return highlightLinks.has(link) ? "purple" : "rgb(50, 50, 50, 0.2)" + !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" } - // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" - } - ) : undefined + : undefined //highlightLinks.has(link) ? "purple" : "grey" // !node.childLinks.length ? "green" : node.collapsed ? "red" : "yellow" } @@ -335,10 +393,14 @@ onLinkHover={handleLinkHover} 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} + 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} @@ -346,21 +408,24 @@ onLinkHover={handleLinkHover} d3AlphaMin={physics.alphaTarget} d3VelocityDecay={physics.velocityDecay} nodeThreeObject={ - !physics.labels ? undefined - : ((node) => { + !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 }; - }) + 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} /> )} - ); + ) }) diff --git a/app/components/tweaks/tweaks.tsx b/app/components/tweaks/tweaks.tsx index 49754d0..e52e587 100644 --- a/app/components/tweaks/tweaks.tsx +++ b/app/components/tweaks/tweaks.tsx @@ -193,6 +193,10 @@ export const Tweaks = observer(function Tweaks(props: TweaksProps): JSX.Element value={physics.threedim} onValueChange={() => { setPhysics({ ...physics, threedim: !physics.threedim }) }} /> + { setPhysics({ ...physics, local: !physics.local }) }} + /> }, ]; diff --git a/app/screens/graph/graph-screen.tsx b/app/screens/graph/graph-screen.tsx index b4ec1d9..f06afc9 100644 --- a/app/screens/graph/graph-screen.tsx +++ b/app/screens/graph/graph-screen.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react" import { observer } from "mobx-react-lite" -import { ViewStyle } from "react-native" +import { TouchableOpacity, ViewStyle } from "react-native" import { Screen, Text } from "../../components" // import { useNavigation } from "@react-navigation/native" // import { useStores } from "../../models" @@ -13,7 +13,7 @@ import genRandomTree from "../../data/randomdata" import AsyncStorage from "@react-native-async-storage/async-storage" -import axios from "axios"; +import axios from "axios" import rando from "../../data/rando.json" @@ -29,15 +29,14 @@ export const GraphScreen = observer(function GraphScreen() { // Pull in navigation via hook // const navigation = useNavigation() - const [physics, setPhysics] = useState({}) - const [graphData, setGraphData] = useState(); - const [nodeIds, setNodeIds] = useState([]); + const [graphData, setGraphData] = useState() + const [nodeIds, setNodeIds] = useState([]) // { "nodes": [{ "id": 1 }, { "id": 2 }], "links": [{ "target": 1, "source": 2 }] }); const physicsInit = { charge: -350, collision: true, - linkStrength: .1, + linkStrength: 0.1, linkIts: 1, collapse: false, threedim: false, @@ -57,17 +56,20 @@ export const GraphScreen = observer(function GraphScreen() { colorful: true, galaxy: true, rootId: 0, + local: false, } const getData = async () => { try { - const value: string = await AsyncStorage.getItem("@physics"); + const value: string = await AsyncStorage.getItem("@physics") if (value !== null) { - const valueJson = JSON.parse(value); + const valueJson = JSON.parse(value) console.log(Object.keys(valueJson).length + " is not " + Object.keys(physicsInit).length) if (Object.keys(valueJson).length === Object.keys(physicsInit).length) { - return valueJson; - } else { return physicsInit }; + return valueJson + } else { + return physicsInit + } } else { return physicsInit } @@ -78,7 +80,7 @@ export const GraphScreen = observer(function GraphScreen() { const storeData = async (value) => { try { let jsonVal = JSON.stringify(value) - console.log(jsonVal + " " + value); + console.log(jsonVal + " " + value) await AsyncStorage.setItem("@physics", jsonVal) } catch (e) { console.log(e) @@ -96,81 +98,80 @@ export const GraphScreen = observer(function GraphScreen() { storeData(physics) }, 1000) return () => clearTimeout(timer) - }, [physics]); + }, [physics]) //"ComponentOnMount" // Get previous settings and the data from the org-roam-server const sanitizeGraph = (data, nodeIds: string[]) => { - const cleanLinks = []; + const cleanLinks = [] data.links.forEach((link, j) => { - let target; - let source; + let target + let source for (let i = 0; i < nodeIds.length; i++) { - let a = data.nodes[i]; - !a.neighbors && (a.neighbors = []); - !a.links && (a.links = []); + let a = data.nodes[i] + !a.neighbors && (a.neighbors = []) + !a.links && (a.links = []) + // the first time around, + // index the node as not a part of the local graph + !j && (a.local=false); if (link.target === nodeIds[i]) { - //let a = data.nodes[i]; - //!a.neighbors && (a.neighbors = []); - //a.neighbors.push(a); - a.links.push(link); - target = [a, i]; - link.target===link.source ? null : cleanLinks.push(link); + a.links.push(link) + target = [a, i] + link.target === link.source ? null : cleanLinks.push(link) } else if (link.source === nodeIds[i]) { - //let a = data.nodes[i]; - //!a.neighbors && (a.neighbors = []); - //a.neighbors.push(a); - a.links.push(link); - source = [a, i]; - }; - }; + a.links.push(link) + source = [a, i] + } + } if (target && source) { - data.nodes[target[1]].neighbors.push(source[0]); - data.nodes[source[1]].neighbors.push(target[0]); - link.sourceIndex=source[1]; - link.targetIndex=target[1]; + data.nodes[target[1]].neighbors.push(source[0]) + data.nodes[source[1]].neighbors.push(target[0]) + link.sourceIndex = source[1] + link.targetIndex = target[1] + link.index = [j] + link.local = false; } - }); - console.log(cleanLinks); + }) data.links = cleanLinks; return data; - }; + } const getNodesById = (data) => { - let temp = []; - data.nodes.forEach((node, i) => { - temp.push(node.id); - node.index=i; - } - ); - setNodeIds(temp); - - return temp; - }; + let temp = [] + data.nodes.forEach((node, i) => { + temp.push(node.id) + node.index = i + }) + setNodeIds(temp) + + return temp + } useEffect(() => { - getData().then((data) => setPhysics(data)); - axios.get("http://localhost:35901/graph") + getData().then((data) => setPhysics(data)) + axios + .get("http://localhost:35901/graph") .then((dataa) => { - let nods = getNodesById(dataa.data); - setNodeIds(nods); - console.log(nodeIds); - let cleanData = sanitizeGraph(dataa.data, nods); + let nods = getNodesById(dataa.data) + setNodeIds(nods) + console.log(nodeIds) + let cleanData = sanitizeGraph(dataa.data, nods) console.log(cleanData) - setGraphData(cleanData); + setGraphData(cleanData) }) .catch((e) => { - console.log(e); - console.log("Couldn't get data."); + console.log(e) + console.log("Couldn't get data.") //setGraphData(rando); - }); + }) }, []) - if (!graphData) { return null } - else { + if (!graphData) { + return null + } else { return ( - + ) } -- cgit v1.2.3