This is a combination of 3 commits.

added getKpiVisInfo

also some css improvements

small update, added some info to user

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

@@ -28,7 +28,7 @@
     padding: 4px 3px 0 3px;
   }
   #loadGeojsonButtonsContainer {
-    z-index: 1003;
+    z-index: 997;
     position: absolute;
     top: 5px;
     left: 57px;

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

@@ -127,7 +127,7 @@ export class ResultsMapComponent implements OnChanges {
 
     if (res["message"] == "Calculating...") {
       this.toastrService.show(
-        "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed.",
+        "Server says: Calculating the KPI visualization. GEOJSON loading will not be completed. When it will be ready, you will need to refresh the page.",
         "Geojson not ready",
         {
           status: "danger",
@@ -622,118 +622,16 @@ export class ResultsMapComponent implements OnChanges {
   }
 
   setLoadGeojsons() {
-    if (this.selectedSimulation != undefined) {
-      if (this.selectedSimulation["city"]["cityId"] == "amsterdam") {
-        this.loadGeojsons = [
-          {
-            response: undefined,
-            buttonValue: "bikeability",
-            buttonLabel: "bikeability",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeIntensity",
-            buttonLabel: "bike Intensity",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeSafety",
-            buttonLabel: "bike Safety",
-          },
-          {
-            response: undefined,
-            buttonValue: "pollution",
-            buttonLabel: "pollution",
-          },
-        ];
-      } else if (this.selectedSimulation["city"]["cityId"] == "bilbao") {
-        console.log(
-          "%c buttons set might not be the right ones for bilbao",
-          "background: indianred; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
-        );
-        this.loadGeojsons = [
-          {
-            response: undefined,
-            buttonValue: "bikeability",
-            buttonLabel: "bikeability",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeIntensity",
-            buttonLabel: "bike Intensity",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeSafety",
-            buttonLabel: "bike Safety",
-          },
-          {
-            response: undefined,
-            buttonValue: "pollution",
-            buttonLabel: "pollution",
-          },
-        ];
-      } else if (this.selectedSimulation["city"]["cityId"] == "helsinki") {
-        this.loadGeojsons = [
-          {
-            response: undefined,
-            buttonValue: "congestionsAndBottlenecks",
-            buttonLabel: "congestions And Bottlenecks",
-          },
-          {
+    this.networkService.getKpiVisInfo().subscribe((res) => {
+      this.loadGeojsons = [];
+      res.forEach((but) => {
+        this.loadGeojsons.push({
           response: undefined,
-            buttonValue: "harbourAreaTrafficFlow",
-            buttonLabel: "harbour Area Traffic Flow",
-          },
-          {
-            response: undefined,
-            buttonValue: "accousticPollution",
-            buttonLabel: "accoustic Pollution",
-          },
-          {
-            response: undefined,
-            buttonValue: "pollution",
-            buttonLabel: "pollution",
-          },
-        ];
-      } else if (this.selectedSimulation["city"]["cityId"] == "messina") {
-        console.log(
-          "%c buttons set might not be the right ones for messina",
-          "background: magenta; font-weight: bold; color: black; font-family: serif; padding: 0 10px;"
-        );
-        this.loadGeojsons = [
-          {
-            response: undefined,
-            buttonValue: "bikeability",
-            buttonLabel: "bikeability",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeIntensity",
-            buttonLabel: "bike Intensity",
-          },
-          {
-            response: undefined,
-            buttonValue: "bikeSafety",
-            buttonLabel: "bike Safety",
-          },
-          {
-            response: undefined,
-            buttonValue: "pollution",
-            buttonLabel: "pollution",
-          },
-          {
-            response: undefined,
-            buttonValue: "publicTransportUse",
-            buttonLabel: "public transport use",
-          },
-        ];
-      } else {
-        this.toastrService.show("Unexpected value for city name.", "Error", {
-          status: "danger",
+          buttonValue: but["buttonValue"],
+          buttonLabel: but["buttonLabel"],
+        });
+      });
     });
-      }
-    }
   }
 
   openOverviewOfIndicators(dialog: TemplateRef<any>) {

src/app/pages/simulation-wizard/utils/services/network.service.ts

@@ -91,4 +91,14 @@ export class NetworkService {
       catchError(this.handleError)
     );
   }
+
+  getKpiVisInfo(): Observable<any> {
+    return this.httpClient.get(`${this.dssUrl}/kpi-vis-info`).pipe(
+      map((res) => {
+        return res;
+      }),
+      tapDebugApi,
+      catchError(this.handleError)
+    );
+  }
 }