update

DLR-SC · Nov 27, 2023 · 1fa1ee8 · 1fa1ee8
1 parent 347c956
commit 1fa1ee8
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 60 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,20 +1,19 @@
-import React, { Suspense, useEffect } from 'react';
-import { Provider } from 'react-redux';
+import React, {Suspense, useEffect} from 'react';
+import {Provider} from 'react-redux';
 
 import './App.scss';
 
 import TopBar from './components/TopBar';
 import Sidebar from './components/Sidebar';
 import MainContent from './components/MainContent';
-import { Store, Persistor } from './store';
+import {Store, Persistor} from './store';
 import Box from '@mui/material/Box';
-import { ThemeProvider } from '@mui/material/styles';
+import {ThemeProvider} from '@mui/material/styles';
 import Theme from './util/Theme';
-import { PersistGate } from 'redux-persist/integration/react';
-import { useAppDispatch, useAppSelector } from './store/hooks';
-import { selectDistrict } from './store/DataSelectionSlice';
-import { useTranslation } from 'react-i18next';
-
+import {PersistGate} from 'redux-persist/integration/react';
+import {useAppDispatch, useAppSelector} from './store/hooks';
+import {selectDistrict} from './store/DataSelectionSlice';
+import {useTranslation} from 'react-i18next';
 
 /**
  * This is the root element of the React application. It divides the main screen area into the three main components.
@@ -27,7 +26,7 @@ export default function App(): JSX.Element {
         <ThemeProvider theme={Theme}>
           <PersistGate loading={null} persistor={Persistor}>
             <Initializer />
-            <Box id='app' display='flex' flexDirection='column' sx={{ height: '100%', width: '100%' }}>
+            <Box id='app' display='flex' flexDirection='column' sx={{height: '100%', width: '100%'}}>
               <TopBar />
               <Box
                 id='app-content'
@@ -41,17 +40,12 @@ export default function App(): JSX.Element {
               >
                 <Sidebar />
                 <MainContent />
-
               </Box>
-
             </Box>
-
           </PersistGate>
         </ThemeProvider>
-
       </Provider>
     </Suspense>
-
   );
 }
 
@@ -60,15 +54,15 @@ export default function App(): JSX.Element {
  * component.
  */
 function Initializer() {
-  const { t } = useTranslation();
+  const {t} = useTranslation();
   const selectedDistrict = useAppSelector((state) => state.dataSelection.district);
   const dispatch = useAppDispatch();
 
   // This effect ensures, that we get the correct translation for 'germany'. This is required, as the store initializes
   // before the translations are available.
   useEffect(() => {
     if (selectedDistrict.ags === '00000' && selectedDistrict.name === '') {
-      dispatch(selectDistrict({ ags: '00000', name: t('germany'), type: '' }));
+      dispatch(selectDistrict({ags: '00000', name: t('germany'), type: ''}));
     }
   }, [selectedDistrict, t, dispatch]);
 

diff --git a/frontend/src/components/Sidebar/DistrictMap.tsx b/frontend/src/components/Sidebar/DistrictMap.tsx
@@ -1,26 +1,26 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useTheme } from '@mui/material/styles';
+import React, {useEffect, useMemo, useState} from 'react';
+import {useTheme} from '@mui/material/styles';
 import * as am5 from '@amcharts/amcharts5';
 import * as am5map from '@amcharts/amcharts5/map';
-import { useTranslation } from 'react-i18next';
-import { useAppDispatch, useAppSelector } from '../../store/hooks';
-import { selectDistrict } from '../../store/DataSelectionSlice';
+import {useTranslation} from 'react-i18next';
+import {useAppDispatch, useAppSelector} from '../../store/hooks';
+import {selectDistrict} from '../../store/DataSelectionSlice';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import LockIcon from '@mui/icons-material/Lock';
-import { useGetSimulationDataByDateQuery } from 'store/services/scenarioApi';
+import {useGetSimulationDataByDateQuery} from 'store/services/scenarioApi';
 import HeatLegend from './HeatLegend';
-import { NumberFormatter } from 'util/hooks';
+import {NumberFormatter} from 'util/hooks';
 import HeatLegendEdit from './HeatLegendEdit';
-import { HeatmapLegend } from '../../types/heatmapLegend';
+import {HeatmapLegend} from '../../types/heatmapLegend';
 import LockOpen from '@mui/icons-material/LockOpen';
 import LoadingContainer from '../shared/LoadingContainer';
 import mapData from 'assets/lk_germany_reduced.geojson';
-import { useGetCaseDataByDateQuery } from '../../store/services/caseDataApi';
+import {useGetCaseDataByDateQuery} from '../../store/services/caseDataApi';
 
-const { useRef } = React;
+const {useRef} = React;
 
 interface IRegionPolygon {
   value: number;
@@ -47,29 +47,29 @@ export default function DistrictMap(): JSX.Element {
   const legend = useAppSelector((state) => state.userPreference.selectedHeatmap);
   const [chart, setChart] = useState<am5map.MapChart | null>(null);
 
-  const { data: simulationData, isFetching: isSimulationDataFetching } = useGetSimulationDataByDateQuery(
+  const {data: simulationData, isFetching: isSimulationDataFetching} = useGetSimulationDataByDateQuery(
     {
       id: selectedScenario ?? 0,
       day: selectedDate ?? '',
       groups: ['total'],
       compartments: [selectedCompartment ?? ''],
     },
-    { skip: selectedScenario === null || selectedScenario === 0 || !selectedCompartment || !selectedDate }
+    {skip: selectedScenario === null || selectedScenario === 0 || !selectedCompartment || !selectedDate}
   );
 
-  const { data: caseData, isFetching: isCaseDataFetching } = useGetCaseDataByDateQuery(
+  const {data: caseData, isFetching: isCaseDataFetching} = useGetCaseDataByDateQuery(
     {
       day: selectedDate ?? '',
       groups: ['total'],
       compartments: [selectedCompartment ?? ''],
     },
-    { skip: selectedScenario === null || selectedScenario > 0 || !selectedCompartment || !selectedDate }
+    {skip: selectedScenario === null || selectedScenario > 0 || !selectedCompartment || !selectedDate}
   );
 
   const legendRef = useRef<am5.HeatLegend | null>(null);
-  const { t, i18n } = useTranslation();
-  const { t: tBackend } = useTranslation('backend');
-  const { formatNumber } = NumberFormatter(i18n.language, 1, 0);
+  const {t, i18n} = useTranslation();
+  const {t: tBackend} = useTranslation('backend');
+  const {formatNumber} = NumberFormatter(i18n.language, 1, 0);
   const theme = useTheme();
   const dispatch = useAppDispatch();
   const lastSelectedPolygon = useRef<am5map.MapPolygon | null>(null);
@@ -188,7 +188,7 @@ export default function DistrictMap(): JSX.Element {
     // add click event
     polygonTemplate.events.on('click', (e) => {
       const item = e.target.dataItem?.dataContext as IRegionPolygon;
-      dispatch(selectDistrict({ ags: item.RS, name: item.GEN, type: t(item.BEZ) }));
+      dispatch(selectDistrict({ags: item.RS, name: item.GEN, type: t(item.BEZ)}));
     });
     // add hover state
     polygonTemplate.states.create('hover', {
@@ -271,7 +271,7 @@ export default function DistrictMap(): JSX.Element {
             if (Number.isFinite(regionData.value)) {
               if (legend.steps[0].value == 0 && legend.steps[legend.steps.length - 1].value == 1) {
                 // if legend is normalized, also pass mix & max to color function
-                fillColor = getColorFromLegend(regionData.value, legend, { min: 0, max: aggregatedMax });
+                fillColor = getColorFromLegend(regionData.value, legend, {min: 0, max: aggregatedMax});
               } else {
                 // if legend is not normalized, min & max are first and last stop of legend and don't need to be passed
                 fillColor = getColorFromLegend(regionData.value, legend);
@@ -346,7 +346,7 @@ export default function DistrictMap(): JSX.Element {
               aria-label={t('heatlegend.lock')}
               onClick={() => setFixedLegendMaxValue(fixedLegendMaxValue ? null : aggregatedMax)}
               size='small'
-              sx={{ padding: theme.spacing(0) }}
+              sx={{padding: theme.spacing(0)}}
             >
               {fixedLegendMaxValue ? <LockIcon /> : <LockOpen />}
             </IconButton>
@@ -361,13 +361,13 @@ export default function DistrictMap(): JSX.Element {
 function getColorFromLegend(
   value: number,
   legend: HeatmapLegend,
-  aggregatedMinMax?: { min: number; max: number }
+  aggregatedMinMax?: {min: number; max: number}
 ): am5.Color {
   // assume legend stops are absolute
   let normalizedValue = value;
   // if aggregated values (min/max) are properly set, the legend items are already normalized => need to normalize value too
   if (aggregatedMinMax && aggregatedMinMax.min < aggregatedMinMax.max) {
-    const { min: aggregatedMin, max: aggregatedMax } = aggregatedMinMax;
+    const {min: aggregatedMin, max: aggregatedMax} = aggregatedMinMax;
     normalizedValue = (value - aggregatedMin) / (aggregatedMax - aggregatedMin);
   } else if (aggregatedMinMax) {
     // log error if any of the above checks fail

diff --git a/frontend/src/components/Sidebar/HeatLegend.tsx b/frontend/src/components/Sidebar/HeatLegend.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect } from 'react';
-import { useTheme } from '@mui/material/styles';
+import React, {useEffect} from 'react';
+import {useTheme} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import * as am5 from '@amcharts/amcharts5';
-import { useTranslation } from 'react-i18next';
-import { NumberFormatter } from 'util/hooks';
-import { HeatmapLegend } from '../../types/heatmapLegend';
+import {useTranslation} from 'react-i18next';
+import {NumberFormatter} from 'util/hooks';
+import {HeatmapLegend} from '../../types/heatmapLegend';
 
 export default function HeatLegend(props: {
   // add is_dynamic/absolute?
@@ -16,8 +16,8 @@ export default function HeatLegend(props: {
   id: string;
 }): JSX.Element {
   const id = props.id + String(Date.now() + Math.random()); // "guarantee" unique id
-  const { i18n: i18n } = useTranslation();
-  const { formatNumber } = NumberFormatter(i18n.language, 3, 8);
+  const {i18n: i18n} = useTranslation();
+  const {formatNumber} = NumberFormatter(i18n.language, 3, 8);
   const theme = useTheme();
 
   useEffect(() => {
@@ -36,7 +36,7 @@ export default function HeatLegend(props: {
     );
 
     // compile stop list
-    const stoplist: { color: am5.Color; opacity: number; offset: number }[] = [];
+    const stoplist: {color: am5.Color; opacity: number; offset: number}[] = [];
     props.legend.steps.forEach((item) => {
       stoplist.push({
         color: am5.color(item.color),

diff --git a/frontend/src/components/Sidebar/index.tsx b/frontend/src/components/Sidebar/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTheme } from '@mui/material/styles';
+import {useTheme} from '@mui/material/styles';
 import SearchBar from './SearchBar';
 import DistrictMap from './DistrictMap';
 import SidebarTabs from './SidebarTabs';
@@ -28,7 +28,7 @@ export default function Sidebar(): JSX.Element {
       <Box id='sidebar-map-wrapper'>
         <DistrictMap />
       </Box>
-      <Container disableGutters sx={{ flexGrow: 1 }}>
+      <Container disableGutters sx={{flexGrow: 1}}>
         <SidebarTabs />
       </Container>
     </Stack>

diff --git a/frontend/webpack/webpack.common.js b/frontend/webpack/webpack.common.js
@@ -15,15 +15,15 @@ module.exports = {
       files: [
         {
           match: /(LOKI_compact)+.+(.svg)$/,
-          attributes: { as: 'image' },
+          attributes: {as: 'image'},
         },
         {
           match: /(lk_germany_reduced)+.+(.geojson)$/,
-          attributes: { as: 'fetch', crossOrigin: 'anonymous' },
+          attributes: {as: 'fetch', crossOrigin: 'anonymous'},
         },
         {
           match: /(lk_germany_reduced_list)+.+(.json)$/,
-          attributes: { as: 'fetch', crossOrigin: 'anonymous' },
+          attributes: {as: 'fetch', crossOrigin: 'anonymous'},
         },
       ],
     }),
@@ -49,18 +49,18 @@ module.exports = {
   },
   module: {
     rules: [
-      { test: /\.tsx?$/i, use: ['ts-loader'], exclude: /node_modules/ },
-      { test: /\.css$/i, use: ['style-loader', 'css-loader'] },
-      { test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader'] },
+      {test: /\.tsx?$/i, use: ['ts-loader'], exclude: /node_modules/},
+      {test: /\.css$/i, use: ['style-loader', 'css-loader']},
+      {test: /\.scss$/i, use: ['style-loader', 'css-loader', 'sass-loader']},
       {
         test: /\.(png|jpe?g|gif|jp2|webp|svg)$/i,
         type: 'asset/resource',
-        generator: { filename: 'images/[name].[hash][ext][query]' },
+        generator: {filename: 'images/[name].[hash][ext][query]'},
       },
       {
         test: /\.(json|geojson)$/i,
         type: 'asset/resource',
-        generator: { filename: 'data/[name].[hash][ext][query]' },
+        generator: {filename: 'data/[name].[hash][ext][query]'},
       },
       {
         test: /locales.*\.json5$/i,
@@ -75,14 +75,14 @@ module.exports = {
       {
         test: /\.md$/i,
         type: 'asset/resource',
-        generator: { filename: 'docs/[name].[hash][ext][query]' },
+        generator: {filename: 'docs/[name].[hash][ext][query]'},
       },
-      { test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: 'file-loader' },
+      {test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/, loader: 'file-loader'},
     ],
   },
   resolve: {
     modules: ['src', 'public', 'node_modules'],
     extensions: ['.ts', '.tsx', '.js', '.jsx'],
-    fallback: { crypto: false },
+    fallback: {crypto: false},
   },
 };