This is a combination of 5 commits.

works but not for values that go in opposite direction e.g. capacity

small css update

removed unneeded div

small css update

tiny css update

src/app/pages/simulation-wizard/results-map/results-map.component.html

@@ -56,7 +56,6 @@
           </nb-card-footer>
         </nb-card>
       </ng-template>
-    </div>
       <div id="grayscaleInput">
         <input
           type="range"
@@ -64,9 +63,9 @@
           (change)="grayscaleChange()"
         />
       </div>
+    </div>
     <div id="inputsLegendContainer">
       <form [formGroup]="newBrinkValues" (ngSubmit)="onApplyNewValuesSubmit()">
-        <section>
         <div>
           <div>
             <label for="">1st color, up to</label>
@@ -128,11 +127,15 @@
           </div>
         </div>
         <div>
-            <button nbButton status="primary" type="submit">
+          <button
+            nbButton
+            status="primary"
+            type="submit"
+            [disabled]="!newBrinkValues.dirty"
+          >
             Apply new values
           </button>
         </div>
-        </section>
       </form>
     </div>
   </nb-card-body>

src/app/pages/simulation-wizard/results-map/results-map.component.scss

@@ -44,13 +44,11 @@
   }
   #inputsLegendContainer {
     padding: 10px;
-    section {
+    form {
       display: flex;
       flex-direction: row;
       justify-content: center;
       align-items: center;
-      margin-bottom: 10px;
-    }
       div:nth-of-type(6) label {
         width: 100%;
         text-align: center;
@@ -61,14 +59,18 @@
         border-radius: 0.25rem;
         text-align: right;
         font-weight: bold;
-      background: #fff;
-      padding: 2px 5px;
+        padding: 3px 7px;
       }
       input {
-      margin: 2px 5px;
+        margin-bottom: 2px;
+        margin-left: 5px;
         height: 1rem;
         width: 10rem;
       }
+      div:nth-child(2) button {
+        margin-left: 8px;
+      }
+    }
   }
 }
 nb-radio {

src/app/pages/simulation-wizard/results-map/results-map.component.ts

@@ -58,14 +58,14 @@ export class ResultsMapComponent implements OnChanges {
     this.grayscaleChange();
 
     const legendLabels = document.querySelectorAll(
-      "#inputsLegendContainer section > div > div > label"
+      "#inputsLegendContainer > form > div > div > label"
     );
     for (let i = 0; i < legendLabels.length; i++) {
       (legendLabels[i] as HTMLElement).style.backgroundColor =
         MapColors.colorsAll[legendLabels.length - i - 1];
     }
     const inputsLegend = document.querySelectorAll(
-      "#inputsLegendContainer section > div > div > input"
+      "#inputsLegendContainer > form > div > div > input"
     );
     for (let i = 0; i < inputsLegend.length; i++) {
       (inputsLegend[i] as HTMLElement).style.backgroundColor =
@@ -223,6 +223,8 @@ export class ResultsMapComponent implements OnChanges {
     this.resetLayersAndButton();
 
     this.selectedGeojson = undefined;
+
+    // when the user will newly click on things, new geojsons will be created
     this.newBrinkValuesApplied = true;
   }