From 7c8fcc2633ceb777652b7b784823f4690babc4c9 Mon Sep 17 00:00:00 2001 From: JuliusHerrmann Date: Fri, 15 Oct 2021 02:54:35 +0200 Subject: [PATCH] added normalize button --- src/Simulation/DistributionStatus.jsx | 2 +- src/Simulation/GraphCytoscape.jsx | 7 ++++- src/Simulation/HorizonSelector.jsx | 2 +- src/Simulation/exampleModels/Model.jsx | 34 +++++++++++++++++++---- src/Simulation/exampleModels/SIModel.jsx | 2 +- src/Simulation/exampleNetworks/Custom.jsx | 1 - src/css/Graph.css | 4 +-- src/css/Model.css | 24 +++++++++++++--- src/css/Network.css | 2 +- src/css/Slider.css | 5 ++-- 10 files changed, 63 insertions(+), 20 deletions(-) diff --git a/src/Simulation/DistributionStatus.jsx b/src/Simulation/DistributionStatus.jsx index 49133fb..8d23954 100644 --- a/src/Simulation/DistributionStatus.jsx +++ b/src/Simulation/DistributionStatus.jsx @@ -4,7 +4,7 @@ class DistributionStatus extends React.Component{ render(){ if (this.props.valid === true) { return(

- The distribution is valid ✅ + The total distribution is equal to 1 ✅

); } else { diff --git a/src/Simulation/GraphCytoscape.jsx b/src/Simulation/GraphCytoscape.jsx index c918536..82db47f 100644 --- a/src/Simulation/GraphCytoscape.jsx +++ b/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 diff --git a/src/Simulation/HorizonSelector.jsx b/src/Simulation/HorizonSelector.jsx index 836f3bc..835b448 100644 --- a/src/Simulation/HorizonSelector.jsx +++ b/src/Simulation/HorizonSelector.jsx @@ -6,7 +6,7 @@ class HorizonSelector extends React.Component{ return (

- Select the animation horizon

+ Select the simulation horizon { - 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 = []; + var output = [, ]; var count = 0; this.states.forEach((s) => { //clamp description diff --git a/src/Simulation/exampleModels/SIModel.jsx b/src/Simulation/exampleModels/SIModel.jsx index a62f9a0..c736d46 100644 --- a/src/Simulation/exampleModels/SIModel.jsx +++ b/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); } diff --git a/src/Simulation/exampleNetworks/Custom.jsx b/src/Simulation/exampleNetworks/Custom.jsx index dc42e16..37a3646 100644 --- a/src/Simulation/exampleNetworks/Custom.jsx +++ b/src/Simulation/exampleNetworks/Custom.jsx @@ -41,7 +41,6 @@ class Custom extends Network { output.push(newEntry); }); - console.log(output); return output; } diff --git a/src/css/Graph.css b/src/css/Graph.css index 87b19ff..eb596eb 100644 --- a/src/css/Graph.css +++ b/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 { diff --git a/src/css/Model.css b/src/css/Model.css index 613d5d0..fd4feaa 100644 --- a/src/css/Model.css +++ b/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 */ diff --git a/src/css/Network.css b/src/css/Network.css index 9a40063..d1500e3 100644 --- a/src/css/Network.css +++ b/src/css/Network.css @@ -15,7 +15,7 @@ } .CustomInput:invalid { - outline: solid red; + outline: solid #ff225b; } code { diff --git a/src/css/Slider.css b/src/css/Slider.css index 81049cb..6811c03 100644 --- a/src/css/Slider.css +++ b/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 {