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,};
 	}
 
-  UNSAFE_componentWillMount() {
+  componentWillMount() {
     this.recalculate();
   }
 
@@ -59,7 +59,7 @@ class Simulation extends React.Component{
     this.setState({selectedModel: newModel});
   }
 
- recalculate(){
+	recalculate(){
     var selectedModel = this.state.selectedModel;
     var graphData = edgeListToGraph(this.state.selectedNetwork.getGraph());
     var rules = selectedModel.getRules();
@@ -81,9 +81,6 @@ 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,6 +71,7 @@ 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) =>  {
@@ -80,6 +81,7 @@ class Custom extends Model  {
       }
       return [x, 1/newStates.length, "#ffffff"];
     });
+    console.log(newStates);
 
   
     return {rules: newRules, states: newStates};
@@ -109,6 +111,7 @@ 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,4 +1,5 @@
 import React from "react";
+import DistributionStatus from "../DistributionStatus";
 import Slider from "../Slider";
 import '../../css/Model.css';
 

src/Simulation/visualizations/Chart.jsx

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

src/Simulation/visualizations/GIFGenerator.jsx

@@ -1,6 +1,7 @@
 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,6 +121,7 @@ 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();
@@ -146,7 +147,9 @@ class Graph extends React.Component {
       return;
     }
     if (this.state.step > this.props.animationLength) {
-      this.finishAnimation();
+      console.log("finished animation");
+      clearInterval(this.animationId);
+      this.setState({playing: false});
       return;
       //this.setState({step: 0}, () => {
         //return;
@@ -169,22 +172,13 @@ 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();
-      }
+      this.setState({step: this.state.step + 1});
     } 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,13 +25,11 @@ 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})
+    this.setState({animationLength: lastState + 1})
     //this.animationLength = lastState + 1;
   }
 
@@ -40,12 +38,11 @@ class Visual extends React.Component {
     //normalize
     this.props.normalize();
     //then recalculate
-    this.props.recalculateFuntion().then(() => {
-      //now crop
-      this.cropAnimation();
-      //update the colors for the chart
-      this.setState({newColors: this.props.colors});
-    });
+    this.props.recalculateFuntion();
+    //now crop
+    this.cropAnimation();
+    //update the colors for the chart
+    this.setState({newColors: this.props.colors});
   }
 
   switchView = () => {

src/SimulationScripts/simulation.js

@@ -49,6 +49,8 @@ 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){
@@ -99,7 +101,7 @@ function get_next_state(current_labels){
 function count_states(current_labels){
 	var counter = [];
 
-  for (var j = 0; j < states.length; j++) {
+  for (var _ in states) {
     counter.push(0);
   }