added normalize button

src/Simulation/DistributionStatus.jsx

@@ -4,7 +4,7 @@ class DistributionStatus extends React.Component{
 	render(){
     if (this.props.valid === true) {
       return(<div className="DistributionStatus valid"><h3 className="StatusText">
-          The distribution is valid ✅
+          The total distribution is equal to 1 ✅
         </h3></div>);
     }
     else {

src/Simulation/GraphCytoscape.jsx

@@ -129,8 +129,13 @@ class GraphCytoscape extends React.Component {
       return;
     }
 
+    //if this is null do not continue => bug
+    if (this.props.colors == null) {
+      console.log("no colors were given");
+      return;
+    }
     //array of all nodes
-    let allNodes = this.cy.filter('node');
+    let allNodes = this.cy.elements('node');
     //do one step
     for (var i = 0; i < allNodes.length; i++) {
       //the current state of the current node

src/Simulation/HorizonSelector.jsx

@@ -6,7 +6,7 @@ class HorizonSelector extends React.Component{
 		return (
 			<div id='HorizonSelector'>
 				<h2 id='HorizonSelectorName' className='selectorName'>
-					Select the animation horizon</h2>
+					Select the simulation horizon</h2>
 				<Slider description='Select Horizon'
 				handleChange={this.props.handleChange}
 				currentValue={this.props.currentValue}

src/Simulation/exampleModels/Model.jsx

@@ -63,13 +63,27 @@ class Model extends React.Component {
     this.props.updateSelectedModel(this);
   }
 
-  checkValidity() {
-    let sum = 0;
-    this.getDistribution().forEach((element) => {
-      sum += element;
+  //normalize the distribution to 1 to ease the user experience with a button
+  normalizeDistribution = () => {
+    let sum = this.calculateSumOfDistributions();
+    // do not act if we have a sum of 1
+    if (sum === 0) {
+      return;
+    }
+    //check if we need to add or remove it by changing the sign
+    this.states = this.states.map((element) => {
+      element[1] = Number((element[1] / sum).toPrecision(2));
+      return element;
     });
+    //update
+    this.valid = true;
+    this.setState({});
+  }
+
+  checkValidity() {
+    let sum = this.calculateSumOfDistributions();
     //check if the distribution is about 1
-    if (sum < 0.98 || sum > 1.02) {
+    if (sum < 0.99 || sum > 1.01) {
       //this.setState({valid: false});
       this.valid = false;
       return;
@@ -78,6 +92,14 @@ class Model extends React.Component {
     this.valid = true;
   }
 
+  calculateSumOfDistributions() {
+    let sum = 0;
+    this.getDistribution().forEach((element) => {
+      sum += element;
+    });
+    return sum;
+  }
+
   changeDistribution = (spot, e) =>  {
     //update state
     this.setState({});
@@ -115,7 +137,7 @@ class Model extends React.Component {
 
   //build the sliders for the initial distribution
   buildSlidersDistribution() {
-    var output = [<DistributionStatus key="validation" valid={this.valid}/>];
+    var output = [<button key="normalization" id="normalizeDistribution" onClick={this.normalizeDistribution}>Normalize distribution 🔔</button>, <DistributionStatus key="validation" valid={this.valid}/>];
     var count = 0;
     this.states.forEach((s) => {
       //clamp description

src/Simulation/exampleModels/SIModel.jsx

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

src/Simulation/exampleNetworks/Custom.jsx

@@ -41,7 +41,6 @@ class Custom extends Network {
       output.push(newEntry);
     });
 
-    console.log(output);
     return output;
   }
 

src/css/Graph.css

@@ -16,7 +16,7 @@
   outline: none;
   font-size: 25pt;
   color: #eeeeee;
-  background-color: green;
+  background-color: #0C8F50;
   border-radius: 10px;
   padding: 5px 10px;
 }
@@ -36,7 +36,7 @@
   border-radius: 3px;
   background-color: #222831;
   border: none;
-  outline: none;
+  outline: solid;
 }
 
 #animationDuration:focus {

src/css/Model.css

@@ -11,21 +11,37 @@
   transform: translateY(37px);
 }
 
-/* valudation text thingy */
+/* normalize button */
+#normalizeDistribution {
+  display: inline-block;
+  margin-right: 20px;
+  margin-bottom: 20px;
+  border: none;
+  outline: none;
+  font-size: 14pt;
+  color: #eeeeee;
+  background-color: #ff5722;
+  border-radius: 10px;
+  padding: 18px 10px;
+  font-weight: 600;
+}
+
+/* validation text thingy */
 .DistributionStatus {
+  text-align: center;
+  display: inline-block;
   padding: 1px 15px 1px 15px;
   border-radius: 10px;
   width: fit-content;
   margin-bottom: -10px;
-  transition: width 1s;
 }
 
 .valid {
-  background-color: green;
+  background-color: #0A8E4E;
 }
 
 .invalid {
-  background-color: red;
+  background-color: #ff225b;
 }
 
 /* padding for the validation below */

src/css/Network.css

@@ -15,7 +15,7 @@
 }
 
 .CustomInput:invalid {
-  outline: solid red;
+  outline: solid #ff225b;
 }
 
 code {

src/css/Slider.css

@@ -59,15 +59,16 @@ input[type="range"]::-moz-range-thumb {
 
 .SliderValue {
   display: inline-block;
-  width: 3em;
+  width: 2.6em;
   /*transform: translateY(-3px);*/
-  margin-left: 1em;
+  margin-left: 2%;
   background-color: #222831;
   color: #ff5722;
   border-color: #ff5722;
   border-style: none;
   border-radius: 3px;
   font-size: 15pt;
+  outline: solid;
 }
 
 .SliderValue:focus {