65 lines
1.4 KiB
JavaScript
65 lines
1.4 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import { Network } from "vis-network";
|
|
|
|
class Graph extends React.Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state = {
|
|
nodes:[
|
|
{ id: 1, label: "Node 1" },
|
|
{ id: 2, label: "Node 2" },
|
|
{ id: 3, label: "Node 3" },
|
|
{ id: 4, label: "Node 4" },
|
|
{ id: 5, label: "Node 5" },
|
|
],
|
|
edges:[
|
|
{ from: 1, to: 3 },
|
|
{ from: 1, to: 2 },
|
|
{ from: 2, to: 4 },
|
|
{ from: 2, to: 5 },
|
|
{ from: 3, to: 3 },
|
|
]
|
|
}
|
|
}
|
|
componentDidMount(){
|
|
this.id = setInterval(()=>this.tick(), 1000);
|
|
}
|
|
componentWillUnmount(){
|
|
clearInterval(this.id);
|
|
}
|
|
tick(){
|
|
if(this.state.nodes[0].label === "Node 1"){
|
|
var copy = this.state;
|
|
copy.nodes[0].label = "TEUZET";
|
|
this.setState(copy)
|
|
}else{
|
|
var copy = this.state;
|
|
copy.nodes[0].label = "Node 1";
|
|
this.setState(copy)
|
|
}
|
|
}
|
|
render(){
|
|
console.log(this.state);
|
|
return (<VisNetwork inp={this.state}/>)
|
|
}
|
|
}
|
|
|
|
function VisNetwork(inp) {
|
|
const visJsRef = useRef(false);
|
|
var nodes = inp.inp.nodes;
|
|
var edges = inp.inp.edges;
|
|
useEffect(() => {
|
|
visJsRef.current.graph = new Network(visJsRef.current, { nodes, edges }, {});
|
|
// Use `network` here to configure events, etc
|
|
}, [visJsRef, nodes, edges]);
|
|
|
|
//redraw the graph
|
|
if(visJsRef.current.graph != null){
|
|
console.log("red")
|
|
visJsRef.current.graph.redraw();
|
|
}
|
|
return <div ref={visJsRef} />;
|
|
};
|
|
|
|
export default Graph;
|