animation now works

src/Simulation/Simulation.jsx

@@ -34,7 +34,7 @@ class Simulation extends React.Component{
 		this.state = {rules: rules, states: states, initial_distribution: initial_distribution, graphData: graphData, horizon: 20.0, selectedNetwork: this.networkObject, selectedModel: this.modelObject, simulationData: undefined,};
 	}
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.recalculate();
   }
 
@@ -81,6 +81,9 @@ class Simulation extends React.Component{
     var newSimulationData = simulate(rules, states, initial_distribution, this.state.selectedNetwork.getGraph(), this.state.horizon);
 
     this.setState({graphData: graphData, rules: rules, states: states, initial_distribution: initial_distribution, simulationData: newSimulationData});
+
+   //return a promise to be sure the data is saved
+   return Promise.resolve("Done");
 	}
 
 	render(){

src/Simulation/exampleModels/Custom.jsx

@@ -71,7 +71,6 @@ class Custom extends Model  {
     //}
 
     //convert states to states with distribution and color
-    console.log(newStates);
     //newStates = newStates.map((x) => [x, 1/newStates.length, "#ffffff"]);
     let i = -1;
     newStates = newStates.map((x) =>  {
@@ -81,7 +80,6 @@ class Custom extends Model  {
       }
       return [x, 1/newStates.length, "#ffffff"];
     });
-    console.log(newStates);
 
   
     return {rules: newRules, states: newStates};
@@ -111,7 +109,6 @@ class Custom extends Model  {
     let leftSide = [subString.slice(0, subString.length / 2)];
     let rightSide = [subString.slice(subString.length / 2, subString.length)];
     let out = [leftSide, rightSide, Number(probability)];
-    console.log(out)
     return out;
     //let out = [0,0,0];
     //out[0] = (leftSide);

src/Simulation/exampleModels/Model.jsx

@@ -1,5 +1,4 @@
 import React from "react";
-import DistributionStatus from "../DistributionStatus";
 import Slider from "../Slider";
 import '../../css/Model.css';
 

src/Simulation/visualizations/Chart.jsx

@@ -2,7 +2,6 @@ import React from "react";
 import NVD3Chart from 'react-nvd3';
 import '../../css/Chart.css'
 import '../../css/nv3d.css'
-import d3 from 'd3';
 
 class Chart extends React.Component {
   calculateChartData = () => {
@@ -14,7 +13,7 @@ class Chart extends React.Component {
         )[1]
       //apply cropping
       this.props.stateCounts[i]["values"] = 
-        this.props.stateCounts[i]["values"].slice(0, this.props.animationLength);
+        this.props.stateCounts[i]["values"].slice(0, this.props.animationLength + 1);
     }
     return this.props.stateCounts;
   }
@@ -22,9 +21,9 @@ class Chart extends React.Component {
   render() {
     return(
       <div id="chart">
-        <NVD3Chart type="stackedAreaChart" xAxis={{ tickFormat: (d) => d + 1}} datum={this.calculateChartData} x={(d) => d[0]} y={(d) => d[1]} />
+        <NVD3Chart type="stackedAreaChart" xAxis={{ tickFormat: (d) => d}} datum={this.calculateChartData} x={(d) => d[0]} y={(d) => d[1]} />
       </div>);
-}
+  }
 }
 
 export default Chart;

src/Simulation/visualizations/GIFGenerator.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import '../../css/Graph.css';
 import '../../css/GIFGenerator.css';
-import Slider from '../Slider';
 import GIF from '@dhdbstjr98/gif.js';
 
 class GIFGenerator extends React.Component {

src/Simulation/visualizations/Graph.jsx

@@ -121,7 +121,6 @@ class Graph extends React.Component {
     this.neverPlayed = false;
     //check if we pause the animation
     clearInterval(this.animationId);
-    console.log("new animation started");
     this.setState({playing: false});
     //first we need to normalize the distribution
     this.props.normalize();
@@ -147,9 +146,7 @@ class Graph extends React.Component {
       return;
     }
     if (this.state.step > this.props.animationLength) {
-      console.log("finished animation");
-      clearInterval(this.animationId);
-      this.setState({playing: false});
+      this.finishAnimation();
       return;
       //this.setState({step: 0}, () => {
         //return;
@@ -172,13 +169,22 @@ class Graph extends React.Component {
       this.cy.getElementById(allNodes[i].id()).style('background-color', color); }
 
     if (increment) {
+      if (this.state.step < this.props.animationLength) {
         this.setState({step: this.state.step + 1});
+      } else {
+        this.finishAnimation();
+      }
     } else {
       //update
       this.setState({});
     }
   }
 
+  finishAnimation() {
+    clearInterval(this.animationId);
+    this.setState({playing: false, step: this.props.animationLength});
+  }
+
   visualizeSpecificStep = (e) => {
     var val = Number(e.target.value);
     if (val < 0 || val > this.props.animationLength) {

src/Simulation/visualizations/Visual.jsx

@@ -25,11 +25,13 @@ class Visual extends React.Component {
       //if (this.checkIfStatesAreEqual(data, lastState, i)) {
         //lastState = i;
       //}
+      //console.log(data[lastState], data[i])
+      //console.log(data[lastState] === data[i])
       if (data[lastState] === data[i]) {
         lastState = i;
       }
     }
-    this.setState({animationLength: lastState + 1})
+    this.setState({animationLength: lastState})
     //this.animationLength = lastState + 1;
   }
 
@@ -38,11 +40,12 @@ class Visual extends React.Component {
     //normalize
     this.props.normalize();
     //then recalculate
-    this.props.recalculateFuntion();
+    this.props.recalculateFuntion().then(() => {
       //now crop
       this.cropAnimation();
       //update the colors for the chart
       this.setState({newColors: this.props.colors});
+    });
   }
 
   switchView = () => {

src/SimulationScripts/simulation.js

@@ -49,8 +49,6 @@ function get_next_state(current_labels){
 		edge = graph_as_edgelist[edge];
 		let node1 = edge[0];
 		let node2 = edge[1];
-    if(node2 === 0) {
-    }
 		let current_state1 = current_labels[node1];
 		let current_state2 = current_labels[node2];
 		for(var currentRule in rules){
@@ -101,7 +99,7 @@ function get_next_state(current_labels){
 function count_states(current_labels){
 	var counter = [];
 
-  for (var _ in states) {
+  for (var j = 0; j < states.length; j++) {
     counter.push(0);
   }