2022-11-19 22:09:15 +01:00
|
|
|
import Sigma from "sigma";
|
|
|
|
import ForceSupervisor from "graphology-layout-force/worker";
|
|
|
|
import Graph from "graphology";
|
|
|
|
import random from 'graphology-layout/random';
|
|
|
|
|
|
|
|
const container = document.getElementById("graph")
|
|
|
|
console.log("graph")
|
|
|
|
if (container) {
|
|
|
|
const graph = new Graph({
|
|
|
|
type: "directed",
|
|
|
|
});
|
|
|
|
//
|
|
|
|
// graph.addNode("John", {x: 0, y: 10, size: 50, label: "John", color: "blue"});
|
|
|
|
// graph.addNode("Mary", {x: 10, y: 0, size: 30, label: "Mary", color: "red"});
|
|
|
|
// graph.addNode("test", {x: 10, y: 10, size: 30, label: "Mary", color: "red"});
|
|
|
|
// graph.addNode("test2", {x: 10, y: 100, size: 30, label: "Mary", color: "red"});
|
|
|
|
//
|
|
|
|
// graph.addEdge("John", "Mary");
|
|
|
|
// graph.addEdge("John", "test");
|
|
|
|
// graph.addEdge("Mary", "test");
|
|
|
|
// graph.addEdge("Mary", "test2");
|
|
|
|
|
|
|
|
fetch('/graph/graph')
|
|
|
|
.then((response) => response.json())
|
|
|
|
.then((data) => {
|
|
|
|
console.log(data)
|
|
|
|
graph.import(data)
|
|
|
|
random.assign(graph);
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// Create the spring layout and start it
|
|
|
|
const layout = new ForceSupervisor(graph, {isNodeFixed: (_, attr) => attr.highlighted});
|
|
|
|
layout.start();
|
|
|
|
|
|
|
|
console.log(graph.export())
|
|
|
|
|
|
|
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
|
|
const renderer = new Sigma(graph, container, {
|
2022-11-20 00:06:23 +01:00
|
|
|
labelSize: 20,
|
|
|
|
edgeLabelSize: 200,
|
2022-11-19 22:09:15 +01:00
|
|
|
});
|
2022-11-20 00:25:04 +01:00
|
|
|
|
|
|
|
|
|
|
|
renderer.on("clickNode", (e) => {
|
|
|
|
const url = graph.getNodeAttribute(e.node, "url")
|
|
|
|
window.open(url, 'graphURL')
|
|
|
|
|
|
|
|
})
|
2022-11-19 22:09:15 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|