updates and polish

src/Simulation/exampleModels/Custom.jsx

@@ -7,6 +7,7 @@ class Custom extends Model  {
       [["S", "I", 0.5]],
       20, 0.05);
     this.state = {input: ""};
+    this.defaultColors = ["#0fa75f", "#ff225b", "#03aaf9", "#fffb00", "#cc0080"];
   }
 
   textFieldChanged = (e) => {
@@ -34,13 +35,14 @@ class Custom extends Model  {
       return null;
     }
 
+    let newStates = [];
     let newRules = [];
     //regex to match states
     cleaned.forEach((element) => {
       element = element.split(",");
       //test if we have a simple or complex rule
       if (element.length === 3) {
-        newRules.push(this.parseValidRule(element));
+        newRules.push(this.parseValidRule(element, newStates));
       } else {
         //check if there are an equal number of states left and right
         if (element.length % 2 === 0) {
@@ -51,7 +53,7 @@ class Custom extends Model  {
           return;
         }
         //this rule is correct, we can continue
-        newRules.push(this.parseValidRule(element));
+        newRules.push(this.parseValidRule(element, newStates));
       }
     });
     if (newRules.length === 0) {
@@ -59,26 +61,33 @@ class Custom extends Model  {
     }
 
     //parse states
-    let newStates = [];
+    //for (var i = 0; i < newRules.length; i++) {
-    
+      //for (var j = 0; j < newRules[i].length - 1; j++) {
-    //only add states that are not duplicates
+        //let currentState = newRules[i][j];
-    for (var i = 0; i < newRules.length; i++) {
+        //if (!newStates.includes(currentState)) {
-      for (var j = 0; j < newRules[i].length - 1; j++) {
+          //newStates.push(currentState);
-        let currentState = newRules[i][j];
+        //}
-        if (!newStates.includes(currentState)) {
+      //}
-          newStates.push(currentState);
+    //}
-        }
-      }
-    }
 
     //convert states to states with distribution and color
-    newStates = newStates.map((x) => [x, 1/newStates.length, "#ffffff"]);
+    console.log(newStates);
+    //newStates = newStates.map((x) => [x, 1/newStates.length, "#ffffff"]);
+    let i = -1;
+    newStates = newStates.map((x) =>  {
+      i++;
+      if(i < 5) {
+        return [x, 1/newStates.length, this.defaultColors[i]];
+      }
+      return [x, 1/newStates.length, "#ffffff"];
+    });
+    console.log(newStates);
 
   
     return {rules: newRules, states: newStates};
   }
 
-  parseValidRule(rule) {
+  parseValidRule(rule, newStates) {
     //filter states
     let subString = rule.slice(0, rule.length - 1);
 
@@ -88,16 +97,37 @@ class Custom extends Model  {
     //match probability
     re = /([0-9]*[.])?[0-9]+/g
     let probability = rule[rule.length - 1].match(re);
-    return [...subString, Number(probability)];
+    //add states
+    subString.forEach((e) => {
+      if(!newStates.includes(e)) {
+        newStates.push(e);
+      }
+    })
+    //spontaneous rule
+    if(subString.length === 2) {
+      return [...subString, Number(probability)];
+    }
+    //complex (edge) rule
+    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);
+    //out[1] = (rightSide);
+    //out[2] = (Number(probability));
+    //return out;
   }
 
   //override render
   render() {
     return(<div>
-      <h3>Enter the rules like: <code>("S","I",0.1), (("I","I"),("S","I"),0.3)</code></h3>
+      <h3>Enter the rules like: <code>("S","I",0.1), (("I","S"),("I","I"),0.3)</code></h3>
       <textarea className="CustomInput CustomModel" type="text" onChange={this.textFieldChanged}
       value={this.state.input} required pattern="[[(]'?[\w\d]+'?,'?[\w\d]+'?,([0-9]*[.])?[0-9]+[)\]][\s\t]*|[([][([]('?[\w\d]+'?,)+'?[\w\d]+'?[\])],[([]('?[\w\d]+'?,)+'?[\w\d]+'?[\])],([0-9]*[.])?[0-9]+[\])][\s\t]*"
-      placeholder='("S","I",0.1), (("I","I"),("S","I"),0.3)'/>
+      placeholder='("S","I",0.1), (("I","S"),("I","I"),0.3)'/>
+        <h3 id="selectDistributionHeader">Initial Distribution</h3>
       {this.buildSlidersDistribution()}
       </div>);
   }

src/Simulation/exampleModels/SIModel.jsx

@@ -3,8 +3,8 @@ import Model from "./Model";
 class SIModel extends Model  {
   constructor() {
     super("SI Model",
-      [["S", 0.97, "#0FA75F"], ["I", 0.03, "#ff225b"]],
+      [["S", 0.9, "#0FA75F"], ["I", 0.1, "#ff225b"]],
-      [["S", "I", 0.5]],
+      [[["S", "I"],["I", "I"], 0.5]],
       20, 0.05);
   }
 }

src/Simulation/exampleNetworks/Karate.jsx

@@ -2,10 +2,9 @@ import Network from "./Network";
 
 class KarateClass extends Network {
 	constructor(){
-    //super("Karate",
-    //[[2,1], [3,1], [4,1], [5,1]]);
     super("Karate",
-      [[2, 1],[3, 1], [3, 2],[4 ,1], [4, 2], [4, 3],[5, 1],[6, 1],[7, 1], [7, 5], [7, 6],[8, 1], [8, 2], [8, 3], [8, 4],[9, 1], [9, 3],[10, 3],[11, 1], [11, 5], [11, 6],[12, 1],[13, 1], [13, 4],[14, 1], [14, 2], [14, 3], [14, 4],[17, 6], [17, 7],[18, 1], [18, 2],[20, 1], [20, 2],[22, 1], [22, 2],[26, 24], [26, 25],[28, 3], [28, 24], [28, 25],[29, 3],[30, 24], [30, 27],[31, 2], [31, 9],[32, 1], [32, 25], [32, 26], [32, 29],[33, 3], [33, 9], [33, 15], [33, 16], [33, 19], [33, 21], [33, 23], [33, 24], [33, 30], [33, 31], [33, 32], [34, 9], [34, 10], [34, 14], [34, 15], [34, 16], [34, 19], [34, 20], [34, 21], [34, 23], [34, 24], [34, 27], [34, 28], [34, 29], [34, 30], [34, 31], [34, 32], [34, 33]]
+[[1, 0], [2, 0], [2, 1], [3, 0], [3, 1], [3, 2], [4, 0], [5, 0], [6, 0], [6, 4], [6, 5], [7, 0], [7, 1], [7, 2], [7, 3], [8, 0], [8, 2], [9, 2], [10, 0], [10, 4], [10, 5], [11, 0], [12, 0], [12, 3], [13, 0], [13, 1], [13, 2], [13, 3], [16, 5], [16, 6], [17, 0], [17, 1], [19, 0], [19, 1], [21, 0], [21, 1], [25, 23], [25, 24], [27, 2], [27, 23], [27, 24], [28, 2], [29, 23], [29, 26], [30, 1], [30, 8], [31, 0], [31, 24], [31, 25], [31, 28], [32, 2], [32, 8], [32, 14], [32, 15], [32, 18], [32, 20], [32, 22], [32, 23], [32, 29], [32, 30], [32, 31], [33, 8], [33, 9], [33, 13], [33, 14], [33, 15], [33, 18], [33, 19], [33, 20], [33, 22], [33, 23], [33, 26], [33, 27], [33, 28], [33, 29], [33, 30], [33, 31], [33, 32]]
+      //[[2, 1],[3, 1], [3, 2],[4 ,1], [4, 2], [4, 3],[5, 1],[6, 1],[7, 1], [7, 5], [7, 6],[8, 1], [8, 2], [8, 3], [8, 4],[9, 1], [9, 3],[10, 3],[11, 1], [11, 5], [11, 6],[12, 1],[13, 1], [13, 4],[14, 1], [14, 2], [14, 3], [14, 4],[17, 6], [17, 7],[18, 1], [18, 2],[20, 1], [20, 2],[22, 1], [22, 2],[26, 24], [26, 25],[28, 3], [28, 24], [28, 25],[29, 3],[30, 24], [30, 27],[31, 2], [31, 9],[32, 1], [32, 25], [32, 26], [32, 29],[33, 3], [33, 9], [33, 15], [33, 16], [33, 19], [33, 21], [33, 23], [33, 24], [33, 30], [33, 31], [33, 32], [34, 9], [34, 10], [34, 14], [34, 15], [34, 16], [34, 19], [34, 20], [34, 21], [34, 23], [34, 24], [34, 27], [34, 28], [34, 29], [34, 30], [34, 31], [34, 32], [34, 33]]
     );
   }
 

src/Simulation/visualizations/GIFGenerator.jsx

@@ -7,17 +7,21 @@ import GIF from '@dhdbstjr98/gif.js';
 class GIFGenerator extends React.Component {
   constructor() {
     super();
-    this.state = {step: 0, duration: 5, loop: true, background: "#ffffff"};
+    this.state = {step: 0, duration: 5, loop: true, background: "#ffffff", rendering: false};
     this.animationId = 0;
   }
 
 
   generateGIF = () => {
+    if(this.state.rendering) {
+      return;
+    }
     //clean input
     if(!Math.abs(Number(this.state.duration)) > 0) {
       console.log("Only numbers are allowed in duration!");
       return;
     }
+    this.setState({rendering: true});
     this.setState({duration: Math.abs(this.state.duration)});
     var gif = new GIF( {
       workers: 2,
@@ -28,6 +32,7 @@ class GIFGenerator extends React.Component {
 
     //set download trigger
     gif.on('finished', function(blob) {
+      this.setState({rendering: false});
       const link = document.createElement('a');
       // create a blobURI pointing to our Blob
       link.href = URL.createObjectURL(blob);
@@ -38,7 +43,7 @@ class GIFGenerator extends React.Component {
       link.remove();
       // in case the Blob uses a lot of memory
       setTimeout(() => URL.revokeObjectURL(link.href), 7000);
-    });
+    }.bind(this));
 
     let stepBefore = this.state.step;
 
@@ -70,6 +75,13 @@ class GIFGenerator extends React.Component {
       {copy: true, delay: this.state.duration / this.props.animationLength});
   }
 
+  getButtonText = () => {
+    if(this.state.rendering) {
+      return "Please Wait ...";
+    }
+    return "Generate GIF 📸";
+  }
+
     //onChange={(e) => this.setState({loop: e.state.value})}>
   render() {
     return (
@@ -95,7 +107,7 @@ class GIFGenerator extends React.Component {
         onChange={(e) => 
         this.setState({loop: e.target.checked})}/>
       </div>
-      <button className="popupButton" onClick={this.generateGIF} >Generate GIF 📸</button>
+      <button className="popupButton" onClick={this.generateGIF} >{this.getButtonText()}</button>
     </div>
     );
   }

src/SimulationScripts/simulation.js

@@ -47,13 +47,15 @@ function get_next_state(current_labels){
 	//iterate over edges
 	for(var edge in graph_as_edgelist){
 		edge = graph_as_edgelist[edge];
-		let node1 = edge;
+		let node1 = edge[0];
-		let node2 = edge;
+		let node2 = edge[1];
+    if(node2 === 0) {
+    }
 		let current_state1 = current_labels[node1];
 		let current_state2 = current_labels[node2];
 		for(var currentRule in rules){
 			currentRule = rules[currentRule];
-			if(typeof currentRule[0] == typeof ""){
+      if(typeof currentRule[0] == typeof ""){
 				//is spont. rule
 				continue
 			}