🔧 Optimize some import issues.

DLR-SC · Feb 22, 2024 · 2db3063 · 2db3063
1 parent 55740eb
commit 2db3063
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 37 deletions.
diff --git a/frontend/assets/third-party-attributions.json b/frontend/assets/third-party-attributions.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -18,7 +18,8 @@ import {useAppDispatch, useAppSelector} from './store/hooks';
 import {selectDistrict} from './store/DataSelectionSlice';
 import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
 import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs';
-import {useTranslation} from 'react-i18next';
+import {I18nextProvider, useTranslation} from 'react-i18next';
+import i18n from './util/i18n';
 
 /**
  * This is the root element of the React application. It divides the main screen area into the three main components.
@@ -30,25 +31,27 @@ export default function App(): JSX.Element {
       <Provider store={Store}>
         <ThemeProvider theme={Theme}>
           <PersistGate loading={null} persistor={Persistor}>
-            <MUILocalization>
-              <Initializer />
-              <Box id='app' display='flex' flexDirection='column' sx={{height: '100%', width: '100%'}}>
-                <TopBar />
-                <Box
-                  id='app-content'
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    flexGrow: 1,
-                    alignItems: 'stretch',
-                    width: '100%',
-                  }}
-                >
-                  <Sidebar />
-                  <MainContent />
+            <I18nextProvider i18n={i18n}>
+              <MUILocalization>
+                <Initializer />
+                <Box id='app' display='flex' flexDirection='column' sx={{height: '100%', width: '100%'}}>
+                  <TopBar />
+                  <Box
+                    id='app-content'
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'row',
+                      flexGrow: 1,
+                      alignItems: 'stretch',
+                      width: '100%',
+                    }}
+                  >
+                    <Sidebar />
+                    <MainContent />
+                  </Box>
                 </Box>
-              </Box>
-            </MUILocalization>
+              </MUILocalization>
+            </I18nextProvider>
           </PersistGate>
         </ThemeProvider>
       </Provider>

diff --git a/frontend/src/components/Scenario/CompartmentList.tsx b/frontend/src/components/Scenario/CompartmentList.tsx
@@ -181,6 +181,7 @@ function SimulationStartTitle(): JSX.Element {
         minDate={dayjs(minDate)}
         maxDate={dayjs(maxDate)}
         onChange={updateDate}
+        slotProps={{textField: {size: 'small'}}}
       />
     </Box>
   );

diff --git a/frontend/src/components/Scenario/index.tsx b/frontend/src/components/Scenario/index.tsx
@@ -9,11 +9,13 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import {ScrollSync} from 'react-scroll-sync';
-import ManageGroupDialog from '../ManageGroupDialog';
 import ConfirmDialog from '../shared/ConfirmDialog';
 import CompartmentList from './CompartmentList';
 import DataCardList from './DataCardList';
 
+// Let's import pop-ups only once they are opened.
+const ManageGroupDialog = React.lazy(() => import('../ManageGroupDialog'));
+
 /**
  * React Component to render the Scenario Cards Section
  * @returns {JSX.Element} JSX Element to render the scenario card container and the scenario cards within.

diff --git a/frontend/src/components/SimulationChart.tsx b/frontend/src/components/SimulationChart.tsx
@@ -16,7 +16,6 @@ import {XYCursor} from '@amcharts/amcharts5/.internal/charts/xy/XYCursor';
 import {LineSeries} from '@amcharts/amcharts5/.internal/charts/xy/series/LineSeries';
 import am5locales_en_US from '@amcharts/amcharts5/locales/en_US';
 import am5locales_de_DE from '@amcharts/amcharts5/locales/de_DE';
-import {Exporting, ExportingMenu} from '@amcharts/amcharts5/plugins/exporting';
 import {useAppDispatch, useAppSelector} from '../store/hooks';
 import {darken, useTheme} from '@mui/material/styles';
 import Box from '@mui/material/Box';
@@ -760,16 +759,22 @@ export default function SimulationChart(): JSX.Element {
         }
       });
     }
-    // Update export menu
-    Exporting.new(rootRef.current as Root, {
-      menu: ExportingMenu.new(rootRef.current as Root, {}),
-      filePrefix: 'Covid Simulation Data',
-      dataSource: data,
-      dateFields: ['date'],
-      dateFormat: `${t('dateFormat')}`,
-      dataFields: dataFields,
-      dataFieldsOrder: dataFieldsOrder,
-    });
+
+    // Let's import this lazily, since it contains a lot of code.
+    import('@amcharts/amcharts5/plugins/exporting')
+      .then((module) => {
+        // Update export menu
+        module.Exporting.new(rootRef.current as Root, {
+          menu: module.ExportingMenu.new(rootRef.current as Root, {}),
+          filePrefix: 'Covid Simulation Data',
+          dataSource: data,
+          dateFields: ['date'],
+          dateFormat: `${t('dateFormat')}`,
+          dataFields: dataFields,
+          dataFieldsOrder: dataFieldsOrder,
+        });
+      })
+      .catch(() => console.warn("Couldn't load exporting functionality!"));
 
     setReferenceDayX();
     // Re-run this effect whenever the data itself changes (or any variable the effect uses)

diff --git a/frontend/src/components/TopBar/ApplicationMenu.tsx b/frontend/src/components/TopBar/ApplicationMenu.tsx
@@ -11,13 +11,15 @@ import Divider from '@mui/material/Divider';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import Snackbar from '@mui/material/Snackbar';
-import ChangelogDialog from './PopUps/ChangelogDialog';
-import ImprintDialog from './PopUps/ImprintDialog';
-import PrivacyPolicyDialog from './PopUps/PrivacyPolicyDialog';
-import AccessibilityDialog from './PopUps/AccessibilityDialog';
-import AttributionDialog from './PopUps/AttributionDialog';
 import Box from '@mui/system/Box';
 
+// Let's import pop-ups only once they are opened.
+const ChangelogDialog = React.lazy(() => import('./PopUps/ChangelogDialog'));
+const ImprintDialog = React.lazy(() => import('./PopUps/ImprintDialog'));
+const PrivacyPolicyDialog = React.lazy(() => import('./PopUps/PrivacyPolicyDialog'));
+const AccessibilityDialog = React.lazy(() => import('./PopUps/AccessibilityDialog'));
+const AttributionDialog = React.lazy(() => import('./PopUps/AttributionDialog'));
+
 /**
  * This menu is found at the top right of the application and is reachable from everywhere. It contains ways to access
  * advanced functionality and all legal texts.