fix color bug and added data caching

src/Header/Headerdata.jsx

@@ -7,7 +7,7 @@ class HeaderData extends React.Component{
       <div>
         <h1>Network Epidemic Playground</h1>
         <h2>Continuous-time stochastic simulation of epidemic spreading on human-to-human contact networks</h2>
-        <h3 id="credits">Simulation developed by <a href="https://mosi.uni-saarland.de/people/gerrit/" target="_blank" rel="noreferrer">Gerrit Großmann</a>, website developed by <a href="https://juliusherrmann.de" target="_blank" rel="noreferrer">Julius Herrmann</a></h3>
+        <h3 id="credits">Simulation developed by <a href="https://mosi.uni-saarland.de/people/gerrit/" target="_blank" rel="noreferrer">Gerrit Großmann</a>, website developed by <a href="https://juliusherrmann.de" target="_blank" rel="noreferrer">Julius Herrmann</a>. Source code on <a href="https://github.com/JuliusHerrmann/NetworkEpidemicPlayground" target="_blank" rel="noreferrer">github</a>.</h3>
       </div>
 		);
 	}

src/Simulation/Simulation.jsx

@@ -31,17 +31,12 @@ class Simulation extends React.Component{
     var states = selectedModel.getStates();
     var initial_distribution = selectedModel.getDistribution();
 
-		this.state = {rules: rules, states: states, initial_distribution: initial_distribution, graphData: graphData, horizon: 20.0, selectedNetwork: this.networkObject, selectedModel: this.modelObject, simulationData: undefined,};
+    //we have to run the simulation once in the beginning... sadly componentWillUnmount is deprecated
+    var newSimulationData = simulate(rules, states, initial_distribution, this.networkObject.getGraph(), 20.0);
+
+		this.state = {rules: rules, states: states, initial_distribution: initial_distribution, graphData: graphData, horizon: 20.0, selectedNetwork: this.networkObject, selectedModel: this.modelObject, simulationData: newSimulationData,};
 	}
 
-  UNSAFE_componentWillMount() {
-    this.recalculate();
-  }
-
-	//componentDidMount(){
-    //this.recalculate();
-	//}
-
 	horizonChange(e){
 		if(e.target.value > 200){
 			e.target.value = 200

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
@@ -36,8 +37,10 @@ class Graph extends React.Component {
         this.visualizeOneStep(false);
       });
     }
+  }
 
-    //we could check here if the simulation should start displaying
+  componentWillUnmount() {
+    clearInterval(this.animationId);
   }
 
   //layouting algorithm

src/Simulation/visualizations/Visual.jsx

@@ -9,12 +9,16 @@ class Visual extends React.Component {
     this.cy = React.createRef();
     this.stepTime = 0;
     this.neverPlayed = true;
-    this.state ={animationDuration: 4, step: 0, playing: false, animationLength: 100, newColors: null, currentView: "graph"};
+    this.state ={animationDuration: 4, step: 0, playing: false, animationLength: 100, cachedColors: this.props.colors, cachedSimulationData: this.props.simulationData, cachedGraphData: this.props.graphData, currentView: "graph"};
   }
 
   componentDidMount() {
     this.cropAnimation();
-    this.setState({newColors: this.props.colors});
+    this.setState({
+      cachedColors: this.props.colors,
+      cachedSimulationData: this.props.simulationData,
+      cachedGraphData: this.props.graphData
+    });
   }
 
   //remove steps where the animation does not change
@@ -43,8 +47,12 @@ class Visual extends React.Component {
     this.props.recalculateFuntion().then(() => {
       //now crop
       this.cropAnimation();
-      //update the colors for the chart
+      //we now update the cached data
-      this.setState({newColors: this.props.colors});
+      this.setState({
+        cachedColors: this.props.colors,
+        cachedSimulationData: this.props.simulationData,
+        cachedGraphData: this.props.graphData
+      });
     });
   }
 
@@ -63,12 +71,12 @@ class Visual extends React.Component {
   showGraphOrChart = () => {
     if (this.state.currentView === "graph") {
       return (
-        <Graph animationLength={this.state.animationLength} graphData={this.props.graphData} normalize={this.props.normalize} colors={this.props.colors} simulationData={this.props.simulationData.data}/>
+        <Graph animationLength={this.state.animationLength} graphData={this.state.cachedGraphData} normalize={this.props.normalize} colors={this.state.cachedColors} simulationData={this.state.cachedSimulationData.data}/>
         );
     } else {
       return (
         <div id="chart">
-          <Chart stateCounts={this.props.simulationData.stateCounts} timeSteps={this.props.simulationData.timeSteps} colors={this.state.newColors} animationLength={this.state.animationLength}/>
+          <Chart stateCounts={this.state.cachedSimulationData.stateCounts} timeSteps={this.state.cachedSimulationData.timeSteps} colors={this.state.cachedColors} animationLength={this.state.animationLength}/>
         </div>
         );
     }