Merge pull request #362 from DLR-SC/feature/fix-parameter-scenario-id…

…-mismatch Fix wrong or no Parameters for a Scenario
DLR-SC · Jun 10, 2024 · f4b2d65 · f4b2d65
2 parents 35425c8 + 3731c3b
commit f4b2d65
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 23 deletions.
diff --git a/frontend/docs/changelog/changelog-de.md b/frontend/docs/changelog/changelog-de.md
@@ -13,10 +13,13 @@ SPDX-License-Identifier: CC-BY-4.0
 
 ### Verbesserungen
 
+- Es wurde mehr Übersetzungen für Szenarien hinzugefügt.
+
 ### Fehlerbehebungen
 
 - Fehlende Übersetzungen wurden ergänzt.
 - Die Auswahl der Farblegenden zeigt jetzt wieder eine Vorschau für alle Optionen.
+- Die Parameter werden jetzt korrekt dem ausgewählten Szenario zugeordnet und eine Info wird angezeigt, wenn keine Parameter verfügbar sind.
 
 ---
 

diff --git a/frontend/docs/changelog/changelog-en.md b/frontend/docs/changelog/changelog-en.md
@@ -13,10 +13,13 @@ SPDX-License-Identifier: CC-BY-4.0
 
 ### Improvements
 
+- Added translations for additional scenarios.
+
 ### Bug fixes
 
 - Missing translations were fixed.
 - The heat legend selection now shows a preview for all legends again.
+- The Parameters will now correctly be associated with the selected scenario and an info will be displayed, when no parameters are available.
 
 ---
 

diff --git a/frontend/locales/de-backend.json5 b/frontend/locales/de-backend.json5
@@ -277,6 +277,10 @@
   },
   'scenario-names': {
     'Baseline Scenario': 'Basisszenario',
+    baseline: 'Basisszenario',
+    closed_schools: 'Geschlossene Schulen',
+    remote_work: 'Homeoffice',
+    '10p_reduced_contacts': '10% Kontaktreduzierung',
     'Summer 2021 Simulation 1': 'Szenario ohne Maßnahmen',
     'Summer 2021 Simulation 2': 'Szenario mit Maßnahmen',
   },

diff --git a/frontend/locales/de-global.json5 b/frontend/locales/de-global.json5
@@ -69,6 +69,9 @@
     timeSeries: 'Zeitreihe',
     parameters: 'Parameter',
   },
+  parameters: {
+    'no-parameters': 'Für das ausgewählte Szenario existieren keine Parameter.',
+  },
   today: 'Heute',
   more: 'Mehr',
   less: 'Weniger',

diff --git a/frontend/locales/en-backend.json5 b/frontend/locales/en-backend.json5
@@ -275,6 +275,10 @@
   },
   'scenario-names': {
     'Baseline Scenario': 'Baseline Scenario',
+    baseline: 'Baseline Scenario',
+    closed_schools: 'Schools Closed',
+    remote_work: 'Home Office',
+    '10p_reduced_contacts': '10% Reduced Contacts',
     'Summer 2021 Simulation 1': 'Scenario without Interventions',
     'Summer 2021 Simulation 2': 'Scenario with Interventions',
   },

diff --git a/frontend/locales/en-global.json5 b/frontend/locales/en-global.json5
@@ -78,6 +78,9 @@
     timeSeries: 'Time Series',
     parameters: 'Parameters',
   },
+  parameters: {
+    'no-parameters': 'No parameters available for the selected scenario.',
+  },
   today: 'Today',
   more: 'More',
   less: 'Less',

diff --git a/frontend/src/__tests__/components/ParameterEditor.test.tsx b/frontend/src/__tests__/components/ParameterEditor.test.tsx
@@ -9,6 +9,7 @@ import i18n from '../../util/i18nForTests';
 import {Provider} from 'react-redux';
 import React from 'react';
 import ParameterEditor from '../../components/ParameterEditor';
+import {selectScenario} from '../../store/DataSelectionSlice';
 
 describe('ParameterEditor', () => {
   test('Editor Loaded', async () => {
@@ -29,6 +30,10 @@ describe('ParameterEditor', () => {
     await screen.findByText('group-filters.groups.age_4');
     await screen.findByText('group-filters.groups.age_5');
 
+    await screen.findByText('parameters.no-parameters');
+
+    Store.dispatch(selectScenario(1));
+
     await screen.findByText('parameters.Test Parameter 1.symbol');
     await screen.findByText('parameters.Test Parameter 1.description');
     await screen.findByText(/0 - 1 parameters\.Test Parameter 1\.unit/);

diff --git a/frontend/src/__tests__/mocks/handlers.ts b/frontend/src/__tests__/mocks/handlers.ts
@@ -4,6 +4,21 @@
 import {http, HttpResponse} from 'msw';
 
 export default [
+  http.get('*/api/v1/simulations/', () => {
+    return HttpResponse.json({
+      results: [
+        {
+          id: 1,
+          name: 'Test Scenario',
+          description: 'Test',
+          startDay: '2024-01-01',
+          numberOfDays: 30,
+          scenario: 'http://localhost:8000/api/v1/scenarios/1/',
+          percentiles: [5, 15, 25, 50, 75, 85, 95],
+        },
+      ],
+    });
+  }),
   http.get('*/api/v1/scenarios/1/', () => {
     return HttpResponse.json({
       results: {

diff --git a/frontend/src/components/ParameterEditor.tsx b/frontend/src/components/ParameterEditor.tsx
@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: 2024 German Aerospace Center (DLR)
 // SPDX-License-Identifier: Apache-2.0
 
-import React, {useCallback} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableHead from '@mui/material/TableHead';
@@ -14,9 +14,11 @@ import {useTheme} from '@mui/material/styles';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
 import MathMarkdown from './shared/MathMarkdown';
-import {ParameterData, useGetScenarioParametersQuery} from '../store/services/scenarioApi';
+import {ParameterData, useGetScenarioParametersQuery, useGetSimulationsQuery} from '../store/services/scenarioApi';
 import {useTranslation} from 'react-i18next';
 import {useGetGroupSubcategoriesQuery} from '../store/services/groupApi';
+import {useAppSelector} from '../store/hooks';
+import GridOff from '@mui/icons-material/GridOff';
 
 /**
  * This component visualizes the parameters of the selected scenario. It uses a table with the following format:
@@ -31,28 +33,84 @@ import {useGetGroupSubcategoriesQuery} from '../store/services/groupApi';
  * be different socio-economic groups, e.g. age.
  */
 export default function ParameterEditor() {
-  const {t} = useTranslation('backend');
+  const {t} = useTranslation();
   const theme = useTheme();
-  const {data} = useGetScenarioParametersQuery(1);
-  const {data: groups} = useGetGroupSubcategoriesQuery();
 
+  const [scenarioId, setScenarioId] = useState<number | null>(null);
+
+  const selectedScenario = useAppSelector((state) => state.dataSelection.scenario);
+  const {data: simulations} = useGetSimulationsQuery();
+  const {data: parameters} = useGetScenarioParametersQuery(scenarioId);
+
+  // This effect gets the id of the scenario, where the parameters are stored.
+  useEffect(() => {
+    const scenario = simulations?.results.find((sim) => sim.id === selectedScenario);
+
+    // The scenario id is unfortunately hidden in a URL. It is always the last number in the URL, so we use the
+    // following regex to extract that number.
+    const scenarioIdResult = scenario?.scenario.match(/(\d+)(?!.*\d)/);
+    if (scenarioIdResult) {
+      const id = parseInt(scenarioIdResult[0]);
+      setScenarioId(id);
+    } else {
+      setScenarioId(null);
+    }
+  }, [simulations, selectedScenario]);
+
+  if (scenarioId !== null) {
+    return (
+      <TableContainer sx={{background: theme.palette.background.paper, height: '100%'}}>
+        <Table stickyHeader size='small' sx={{position: 'relative'}}>
+          <TableHeader />
+          <TableBody>
+            {parameters?.map((entry) => <ParameterRow key={'row-' + crypto.randomUUID()} params={entry} />)}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    );
+  }
+
+  return (
+    <Box sx={{background: theme.palette.background.paper, display: 'flex', flexDirection: 'column', height: '100%'}}>
+      <TableContainer>
+        <Table stickyHeader size='small' sx={{position: 'relative'}}>
+          <TableHeader />
+        </Table>
+      </TableContainer>
+      <Box
+        sx={{
+          margin: 'auto',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexDirection: 'column',
+        }}
+      >
+        <GridOff color='primary' fontSize='large' />
+        <Typography variant='body1'>{t('parameters.no-parameters')}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * Creates the header row of the parameter editor.
+ */
+function TableHeader(): JSX.Element {
+  const {t: tBackend} = useTranslation('backend');
+  const {data: groups} = useGetGroupSubcategoriesQuery();
   return (
-    <TableContainer sx={{background: theme.palette.background.paper, height: '100%'}}>
-      <Table stickyHeader size='small' sx={{position: 'relative'}}>
-        <TableHead>
-          <TableRow>
-            <ParameterColumHeader colSpan={2} name='Parameter' />
-            {groups?.results // Currently only age groups are supported. We also need to ignore the 'total' group.
-              ?.filter((group) => group.key !== 'total')
-              .filter((group) => group.category === 'age')
-              .map((group) => <ParameterColumHeader key={group.key} name={t(`group-filters.groups.${group.key}`)} />)}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {data?.map((entry) => <ParameterRow key={'row-' + crypto.randomUUID()} params={entry} />)}
-        </TableBody>
-      </Table>
-    </TableContainer>
+    <TableHead>
+      <TableRow>
+        <ParameterColumHeader colSpan={2} name='Parameter' />
+        {groups?.results // Currently only age groups are supported. We also need to ignore the 'total' group.
+          ?.filter((group) => group.key !== 'total')
+          .filter((group) => group.category === 'age')
+          .map((group) => (
+            <ParameterColumHeader key={group.key} name={tBackend(`group-filters.groups.${group.key}`)} />
+          ))}
+      </TableRow>
+    </TableHead>
   );
 }
 

diff --git a/frontend/src/store/services/scenarioApi.ts b/frontend/src/store/services/scenarioApi.ts
@@ -108,8 +108,12 @@ export const scenarioApi = createApi({
       },
     }),
 
-    getScenarioParameters: builder.query<Array<ParameterData>, number>({
-      queryFn: async function (arg: number, _queryApi, _extraOptions, fetchWithBQ) {
+    getScenarioParameters: builder.query<Array<ParameterData> | null, number | null>({
+      queryFn: async function (arg: number | null, _queryApi, _extraOptions, fetchWithBQ) {
+        if (!arg) {
+          return {data: null};
+        }
+
         const response = await fetchWithBQ(`scenarios/${arg}/`);
         if (response.error) return {error: response.error};
         const parameters = response.data as ParameterRESTData;