Fix site crash when scenario was deleted from DB (#329)

DLR-SC · Feb 23, 2024 · a30024d · a30024d
1 parent 59ea85d
commit a30024d
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 10 deletions.
diff --git a/frontend/docs/changelog/changelog-de.md b/frontend/docs/changelog/changelog-de.md
@@ -42,6 +42,7 @@ SPDX-License-Identifier: CC-BY-4.0
 - Ein Fehler wurde behoben, der beim ersten Laden der Seite den Text in der Suchleiste nicht übersetzt hatte.
 - Ein Fehler wurde behoben, der Landkreise mit fehlenden Daten verschwinden lies.
 - Ein Fehler wurde behoben, der die Webseite abstürzen lässt, nachdem die zugrunde liegenden Daten aktualisiert wurden.
+- Ein Fehler wurde behoben, der die Webseite abstürzen lässt, wenn ein Szenario aus der Datenbank entfernt wurde.
 
 ---
 

diff --git a/frontend/docs/changelog/changelog-en.md b/frontend/docs/changelog/changelog-en.md
@@ -42,6 +42,7 @@ SPDX-License-Identifier: CC-BY-4.0
 - An error was fixed, which prevented the text in the search bar to be translated on an initial site visit.
 - Fixed an error, where districts with missing values weren't shown.
 - Fixed an error, which crashed the website when the data was updated.
+- Fixed an error, which crashed the website when a scenario was removed from the database.
 
 ---
 

diff --git a/frontend/src/components/Scenario/DataCardList.tsx b/frontend/src/components/Scenario/DataCardList.tsx
@@ -145,7 +145,7 @@ export default function DataCardList(): JSX.Element {
           scenario={scenario}
           selected={selectedScenario === scenario.id}
           active={!!activeScenarios && activeScenarios.includes(scenario.id)}
-          color={theme.custom.scenarios[i][0]}
+          color={theme.custom.scenarios[(i + 1) % theme.custom.scenarios.length][0]}
           startValues={startValues}
           onClick={() => {
             // set active scenario to this one and send dispatches

diff --git a/frontend/src/components/Scenario/ScenarioCard.tsx b/frontend/src/components/Scenario/ScenarioCard.tsx
@@ -75,7 +75,7 @@ export function ScenarioCard(props: ScenarioCardProps): JSX.Element {
     <DataCard
       id={props.scenario.id}
       label={tBackend(`scenario-names.${props.scenario.label}`)}
-      color={theme.custom.scenarios[props.scenario.id][0]}
+      color={theme.custom.scenarios[props.scenario.id % theme.custom.scenarios.length][0]}
       selected={props.selected}
       active={props.active}
       compartmentValues={compartmentValues}

diff --git a/frontend/src/components/Sidebar/HeatLegendEdit.tsx b/frontend/src/components/Sidebar/HeatLegendEdit.tsx
@@ -93,7 +93,7 @@ export default function HeatLegendEdit(): JSX.Element {
       return;
     }
 
-    const scenarioDefault = defaultLegends[activeScenario];
+    const scenarioDefault = defaultLegends[activeScenario % defaultLegends.length];
     const legends = [...heatmapLegends];
     legends.unshift(scenarioDefault);
 

diff --git a/frontend/src/components/SimulationChart.tsx b/frontend/src/components/SimulationChart.tsx
@@ -80,7 +80,7 @@ export default function SimulationChart(): JSX.Element {
   const {data: simulationData, isFetching: simulationFetching} = useGetMultipleSimulationDataByNodeQuery(
     {
       // Filter only scenarios (scenario id 0 is case data)
-      ids: activeScenarios ? activeScenarios.filter((s) => s !== 0) : [],
+      ids: activeScenarios ? activeScenarios.filter((s) => s !== 0 && scenarioList.scenarios[s]) : [],
       node: selectedDistrict,
       groups: ['total'],
       compartments: [selectedCompartment ?? ''],
@@ -286,7 +286,7 @@ export default function SimulationChart(): JSX.Element {
       });
 
       // Add series for each scenario
-      Object.entries(scenarioList.scenarios).forEach(([scenarioId, scenario], i) => {
+      Object.entries(scenarioList.scenarios).forEach(([scenarioId, scenario]) => {
         const series = chart.series.push(
           LineSeries.new(root, {
             xAxis: xAxis,
@@ -300,12 +300,11 @@ export default function SimulationChart(): JSX.Element {
             // Fallback Tooltip (if HTML breaks for some reason)
             // For text color: loop around the theme's scenario color list if scenario IDs exceed color list length, then pick first color of sub-palette which is the main color
             tooltip: Tooltip.new(root, {
-              // Offest by one since the scenario 0 colr palette is exclusively for case data
-              labelText: `[bold ${theme.custom.scenarios[(i + 1) % theme.custom.scenarios.length][0]}]${tBackend(
+              labelText: `[bold ${theme.custom.scenarios[scenario.id % theme.custom.scenarios.length][0]}]${tBackend(
                 `scenario-names.${scenario.label}`
               )}:[/] {${scenarioId}}`,
             }),
-            stroke: color(theme.custom.scenarios[(i + 1) % theme.custom.scenarios.length][0]),
+            stroke: color(theme.custom.scenarios[scenario.id % theme.custom.scenarios.length][0]),
           })
         );
         series.strokes.template.setAll({
@@ -692,7 +691,7 @@ export default function SimulationChart(): JSX.Element {
     if (activeScenarios) {
       activeScenarios.forEach((scenarioId) => {
         // Skip case data (already added)
-        if (scenarioId === 0) {
+        if (scenarioId === 0 || !scenarioList.scenarios[scenarioId]) {
           return;
         }
 

diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
@@ -14,7 +14,7 @@ import {groupApi} from './services/groupApi';
 const persistConfig = {
   key: 'root',
   storage,
-  whitelist: ['dataSelection', 'userPreference', 'scenarioList'],
+  whitelist: ['dataSelection', 'userPreference'],
 };
 
 const rootReducer = combineReducers({