🔧 Refactor Wrapping components

frontend/src/DataContext.tsx

@@ -57,7 +57,6 @@ export const DataContext = createContext<{
   groupCategories: GroupCategories | undefined;
   groupSubCategories: GroupSubcategories | undefined;
   scenarioListData: Simulations | undefined;
-  referenceDay: string | null;
   caseScenarioSimulationData: CaseDataByNode | undefined;
   simulationModelData: SimulationModel | undefined;
   caseScenarioData: SimulationDataByNode | undefined;
@@ -81,7 +80,6 @@ export const DataContext = createContext<{
   groupCategories: undefined,
   groupSubCategories: undefined,
   scenarioListData: undefined,
-  referenceDay: null,
   caseScenarioSimulationData: undefined,
   simulationModelData: undefined,
   caseScenarioData: undefined,
@@ -118,7 +116,6 @@ export const DataProvider = ({children}: {children: React.ReactNode}) => {
   const selectedDate = useAppSelector((state) => state.dataSelection.date);
   const groupFilterList = useAppSelector((state) => state.dataSelection.groupFilters);
   const scenarioList = useAppSelector((state) => state.scenarioList);
-  const referenceDay = useAppSelector((state) => state.dataSelection.simulationStart);
 
   const groupFilterParams1: PostFilter[] = useMemo(() => {
     if (selectedDistrict && groupFilterList) {
@@ -477,7 +474,6 @@ export const DataProvider = ({children}: {children: React.ReactNode}) => {
         groupCategories,
         groupSubCategories,
         scenarioListData,
-        referenceDay,
         caseScenarioSimulationData: caseScenarioSimulationData.data,
         simulationModelData: simulationModelData?.results,
         caseScenarioData,

frontend/src/components/LineChartComponents/LineChart.tsx

@@ -226,7 +226,6 @@ export default function LineChart({
     if (!root || !chart) {
       return null;
     }
-
     return {
       renderer: AxisRendererY.new(root, {}),
       // Fix lower end to 0

frontend/src/components/ScenarioComponents/ReferenceDatePickerComponents.tsx/ReferenceDatePicker.tsx

@@ -49,7 +49,7 @@ export default function ReferenceDatePicker({
       (newDate.isAfter(dayjs(minDate)) || newDate.isSame(dayjs(minDate))) &&
       (newDate.isBefore(dayjs(maxDate)) || newDate.isSame(dayjs(maxDate)))
     )
-      setStartDay(newDate.toString());
+      setStartDay(newDate.format('YYYY-MM-DD'));
   };
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>

frontend/src/components/Sidebar/MapComponents/HeatMap.tsx

@@ -200,6 +200,7 @@ export default function HeatMap({
   const chart = useMapChart(root, chartSettings);
 
   const polygonSettings = useMemo(() => {
+    if (!mapData) return null;
     return {
       geoJSON: mapData as GeoJSON,
       tooltipPosition: 'fixed',
@@ -219,20 +220,18 @@ export default function HeatMap({
         strokeWidth: 1,
         fillOpacity: fillOpacity,
       });
-
-      polygonTemplate.states.create('hover', {
-        stroke: am5.color(theme.palette.primary.main),
-        strokeWidth: 2,
-        layer: 1,
-      });
     })
   );
-
-  // This effect is responsible for showing the tooltip on the heat legend when hovering over a region.
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!polygonSeries) return;
     const polygonTemplate = polygonSeries.mapPolygons.template;
-    //show tooltip on heat legend when hovering
+
+    polygonTemplate.states.create('hover', {
+      stroke: am5.color(theme.palette.primary.main),
+      strokeWidth: 2,
+      layer: 1,
+    });
+
     polygonTemplate.events.on('click', function (ev) {
       if (ev.target.dataItem?.dataContext) {
         setSelectedArea(ev.target.dataItem.dataContext as FeatureProperties);
@@ -284,7 +283,7 @@ export default function HeatMap({
     }
   }, [fixedLegendMaxValue, setAggregatedMax, values]);
 
-  // Create Map with GeoData
+  // This effect is responsible for highlighting the selected region on the map.
   useEffect(() => {
     if (!polygonSeries || isFetching) return;
     // Reset last selected polygon
@@ -325,11 +324,10 @@ export default function HeatMap({
   ]);
 
   // set Data
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!polygonSeries) return;
     if (selectedScenario !== null && !isFetching && values && Number.isFinite(aggregatedMax)) {
       const map = new Map<string | number, number>();
-      if (!values) return;
       values.forEach((value) => {
         map.set(value.id, value.value);
       });
@@ -366,8 +364,6 @@ export default function HeatMap({
       });
     }
   }, [
-    root,
-    chart,
     aggregatedMax,
     defaultFill,
     idValuesToMap,

frontend/src/components/Sidebar/MapContainer.tsx

@@ -163,7 +163,7 @@ export default function MapContainer() {
         />
       </Box>
       <Box id='sidebar-map-wrapper'>
-        <LoadingContainer show={areMapValuesFetching || longLoad} overlayColor={theme.palette.background.default}>
+        <LoadingContainer show={areMapValuesFetching && longLoad} overlayColor={theme.palette.background.default}>
           <HeatMap
             selectedArea={selectedArea}
             setSelectedArea={setSelectedArea}

frontend/src/components/shared/HeatMap/Map.ts

@@ -18,7 +18,8 @@ export default function useMapChart(
       return;
     }
 
-    const newChart = root.container.children.push(am5map.MapChart.new(root, settings));
+    const newChart = am5map.MapChart.new(root, settings);
+    root.container.children.push(newChart);
 
     setChart(newChart);
 
@@ -27,6 +28,7 @@ export default function useMapChart(
     }
 
     return () => {
+      root.container.children.removeValue(newChart);
       newChart.dispose();
     };
   }, [root, settings, initializer]);

frontend/src/components/shared/HeatMap/Polygon.ts

@@ -8,7 +8,7 @@ import {Root} from '@amcharts/amcharts5/.internal/core/Root';
 export default function usePolygonSeries(
   root: Root | null,
   chart: am5map.MapChart | null,
-  settings: am5map.IMapPolygonSeriesSettings,
+  settings: am5map.IMapPolygonSeriesSettings | null,
   initializer?: (polygon: am5map.MapPolygonSeries) => void
 ): am5map.MapPolygonSeries | null {
   const [polygon, setPolygon] = useState<am5map.MapPolygonSeries>();
@@ -17,16 +17,16 @@ export default function usePolygonSeries(
     if (!root || !chart || !settings) {
       return;
     }
-
-    const newPolygon = chart.series.push(am5map.MapPolygonSeries.new(root, settings));
+    const newPolygon = am5map.MapPolygonSeries.new(root, settings);
+    chart.series.push(newPolygon);
 
     if (initializer) {
       initializer(newPolygon);
     }
-
     setPolygon(newPolygon);
 
     return () => {
+      chart.series.removeValue(newPolygon);
       newPolygon.dispose();
     };
   }, [root, settings, chart, initializer]);

frontend/src/components/shared/HeatMap/Zoom.ts

@@ -24,9 +24,6 @@ export default function useZoomControl(
     if (initializer) {
       initializer(newZoom);
     }
-    return () => {
-      newZoom.dispose();
-    };
   }, [root, settings, initializer]);
 
   return zoom ?? null;

frontend/src/components/shared/LineChart/Filter.ts

@@ -31,10 +31,9 @@ export function useDateSelectorFilter(
   );
 
   useLayoutEffect(() => {
-    if (!chart) {
+    if (!chart || chart.isDisposed()) {
       return;
     }
-
     const event = chart.events.on('click', setDateCallback);
 
     return () => {

frontend/src/components/shared/LineChart/LineSeries.ts

@@ -15,7 +15,7 @@ export default function useLineSeries(
   const [series, setSeries] = useState<LineSeries>();
 
   useLayoutEffect(() => {
-    if (!root || !chart || !settings) {
+    if (!root || !chart || !settings || chart.isDisposed() || root.isDisposed()) {
       return;
     }
 
@@ -35,7 +35,6 @@ export default function useLineSeries(
 
   return series ?? null;
 }
-
 export function useLineSeriesList(
   root: Root | null,
   chart: XYChart | null,