src/Simulation/visualizations/Graph.jsx

@@ -28,6 +28,7 @@ class Graph extends React.Component {
   componentDidUpdate(prevProps, _) {
     //only recalculate the layout if graph has changed
     if (prevProps.graphData !== this.props.graphData) {
+      console.log("updated component => error");
       this.layoutGraph();
       this.setState({step: 0}, () => {
         //first crop the animation

src/VisNetwork.js

@@ -0,0 +1,64 @@
+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;