diff --git a/src/Simulation/Simulation.jsx b/src/Simulation/Simulation.jsx
index a8cb706..f2ddb13 100644
--- a/src/Simulation/Simulation.jsx
+++ b/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();
   }
 
@@ -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,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(){
diff --git a/src/Simulation/exampleModels/Model.jsx b/src/Simulation/exampleModels/Model.jsx
index 2d2369c..45d6536 100644
--- a/src/Simulation/exampleModels/Model.jsx
+++ b/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';
 
diff --git a/src/Simulation/visualizations/Chart.jsx b/src/Simulation/visualizations/Chart.jsx
index 0c3c36f..80c1b31 100644
--- a/src/Simulation/visualizations/Chart.jsx
+++ b/src/Simulation/visualizations/Chart.jsx
@@ -2,10 +2,10 @@ 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 = () => {
+    console.log(this.props.animationLength)
     for (let i = 0; i < this.props.stateCounts.length; i++) {
       //set color
       this.props.stateCounts[i].color = 
@@ -14,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);
+        this.props.stateCounts[i]["values"].slice(0, this.props.animationLength + 1);
     }
     return this.props.stateCounts;
   }
@@ -22,9 +22,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]} />
-        </div>);
-}
+        <NVD3Chart type="stackedAreaChart" xAxis={{ tickFormat: (d) => d}} datum={this.calculateChartData} x={(d) => d[0]} y={(d) => d[1]} />
+      </div>);
+  }
 }
 
 export default Chart;
diff --git a/src/Simulation/visualizations/GIFGenerator.jsx b/src/Simulation/visualizations/GIFGenerator.jsx
index e40c0cf..128b39e 100644
--- a/src/Simulation/visualizations/GIFGenerator.jsx
+++ b/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 {
diff --git a/src/Simulation/visualizations/Visual.jsx b/src/Simulation/visualizations/Visual.jsx
index 5165f7e..6c01f9b 100644
--- a/src/Simulation/visualizations/Visual.jsx
+++ b/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();
-    //now crop
-    this.cropAnimation();
-    //update the colors for the chart
-    this.setState({newColors: this.props.colors});
+    this.props.recalculateFuntion().then(() => {
+      //now crop
+      this.cropAnimation();
+      //update the colors for the chart
+      this.setState({newColors: this.props.colors});
+    });
   }
 
   switchView = () => {
diff --git a/src/SimulationScripts/simulation.js b/src/SimulationScripts/simulation.js
index 86d5d9a..575bdc3 100644
--- a/src/SimulationScripts/simulation.js
+++ b/src/SimulationScripts/simulation.js
@@ -59,6 +59,7 @@ function get_next_state(current_labels){
 				//is spont. rule
 				continue
 			}
+      console.log("works")
 			if((current_state1 === currentRule[0][0] && current_state2 === currentRule[0][1]) || (current_state2 === currentRule[0][0] && current_state1 === currentRule[0][1])){
 				let current_fireing_time = randomExponential(currentRule[2]);
 				if(current_fireing_time < fastes_firing_time){
@@ -101,7 +102,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);
   }