46 lines
1 KiB
TypeScript
46 lines
1 KiB
TypeScript
|
import { useEffect } from "react"
|
||
|
|
import Graph from "graphology"
|
||
|
|
import { useLoadGraph, useSigma } from "@react-sigma/core"
|
||
|
|
import forceAtlas2 from "graphology-layout-forceatlas2"
|
||
|
|
|
||
|
|
const LoadGraph = ({ data }) => {
|
||
|
|
const loadGraph = useLoadGraph()
|
||
|
|
const sigma = useSigma()
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const graph = new Graph()
|
||
|
|
data.nodes.forEach((node) => {
|
||
|
|
graph.addNode(node.id, {
|
||
|
|
label: node.name,
|
||
|
|
x: Math.random(),
|
||
|
|
y: Math.random(),
|
||
|
|
size: 8,
|
||
|
|
color: node.focal ? "#0a0a0a" : "#a4a4a4",
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
data.links.forEach((link) => {
|
||
|
|
graph.addEdge(link.source, link.target, {
|
||
|
|
size: 1,
|
||
|
|
color: "#a4a4a4",
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
forceAtlas2.assign(graph, {
|
||
|
|
iterations: 100,
|
||
|
|
settings: {
|
||
|
|
gravity: 0,
|
||
|
|
scalingRatio: 8,
|
||
|
|
strongGravityMode: false,
|
||
|
|
slowDown: 2,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
|
||
|
|
loadGraph(graph)
|
||
|
|
}, [loadGraph, data, sigma])
|
||
|
|
|
||
|
|
return null
|
||
|
|
}
|
||
|
|
|
||
|
|
export default LoadGraph
|