🔧 Map component final version bugless

DLR-SC · Jul 8, 2024 · 20868e8 · 20868e8
1 parent da70a6c
commit 20868e8
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 32 deletions.
diff --git a/frontend/src/DataContext.tsx b/frontend/src/DataContext.tsx
@@ -497,7 +497,6 @@ export const DataProvider = ({children}: {children: React.ReactNode}) => {
         const seriesWithoutGroup = prevData.filter(
           (serie) => typeof serie.serieId === 'number' || !serie.serieId.startsWith('group-filter')
         );
-        console.log(seriesWithoutGroup, lineChartData);
         if (seriesWithoutGroup.length > 0) return [...seriesWithoutGroup, ...lineChartData];
       }
       return lineChartData;

diff --git a/frontend/src/components/Sidebar/MapComponents/HeatMap.tsx b/frontend/src/components/Sidebar/MapComponents/HeatMap.tsx
@@ -144,7 +144,7 @@ export default function HeatMap({
     zoomSettings,
     useCallback(
       (zoom: am5map.ZoomControl) => {
-        if (!root || root.isDisposed()) return;
+        if (!root) return;
         const fixSVGPosition = {
           width: 25,
           height: 25,
@@ -179,7 +179,7 @@ export default function HeatMap({
   );
 
   // This effect is responsible for setting the selected area when the home button is clicked.
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!zoom || !root || root.isDisposed() || zoom.isDisposed()) return;
     zoom.homeButton.events.on('click', () => {
       setSelectedArea(defaultSelectedValue);
@@ -290,34 +290,52 @@ export default function HeatMap({
 
   // Highlight selected polygon and reset last selected polygon
   useEffect(() => {
-    if (!polygonSeries) return;
+    if (!polygonSeries || polygonSeries.isDisposed()) return;
     // Reset last selected polygon
-    if (lastSelectedPolygon.current) {
-      lastSelectedPolygon.current.states.create('default', {
-        stroke: am5.color(theme.palette.background.default),
-        strokeWidth: 1,
-        layer: 0,
-      });
-      lastSelectedPolygon.current.states.apply('default');
-    }
-    // Highlight selected polygon
-    polygonSeries.mapPolygons.each((mapPolygon) => {
-      if (mapPolygon.dataItem && mapPolygon.dataItem.dataContext) {
-        const areaData = mapPolygon.dataItem.dataContext as Feature;
-        const id: string | number = areaData[areaId as keyof Feature] as string | number;
-        if (id == selectedArea![areaId as keyof GeoJsonProperties]) {
-          mapPolygon.states.create('default', {
-            stroke: am5.color(theme.palette.primary.main),
-            strokeWidth: 2,
-            layer: 1,
-          });
-          if (!mapPolygon.isHover()) {
-            mapPolygon.states.apply('default');
+    const updatePolygons = () => {
+      if (lastSelectedPolygon.current) {
+        lastSelectedPolygon.current.states.create('default', {
+          stroke: am5.color(theme.palette.background.default),
+          strokeWidth: 1,
+          layer: 0,
+        });
+        lastSelectedPolygon.current.states.apply('default');
+      }
+      // Highlight selected polygon
+      polygonSeries.mapPolygons.each((mapPolygon) => {
+        if (mapPolygon.dataItem && mapPolygon.dataItem.dataContext) {
+          const areaData = mapPolygon.dataItem.dataContext as Feature;
+          const id: string | number = areaData[areaId as keyof Feature] as string | number;
+          if (id == selectedArea![areaId as keyof GeoJsonProperties]) {
+            mapPolygon.states.create('default', {
+              stroke: am5.color(theme.palette.primary.main),
+              strokeWidth: 2,
+              layer: 1,
+            });
+            if (!mapPolygon.isHover()) {
+              mapPolygon.states.apply('default');
+            }
+            lastSelectedPolygon.current = mapPolygon;
           }
-          lastSelectedPolygon.current = mapPolygon;
         }
+      });
+    };
+
+    const handleDataValidated = () => {
+      if (!polygonSeries.isDisposed()) {
+        updatePolygons();
       }
-    });
+    };
+
+    polygonSeries.events.on('datavalidated', handleDataValidated);
+    handleDataValidated();
+
+    // Cleanup event listeners on component unmount or when dependencies change
+    return () => {
+      if (!polygonSeries.isDisposed()) {
+        polygonSeries.events.off('datavalidated', handleDataValidated);
+      }
+    };
     // This effect should only re-run when the selectedArea or polygonSeries change
   }, [areaId, polygonSeries, selectedArea, theme.palette.background.default, theme.palette.primary.main]);
 
@@ -364,12 +382,12 @@ export default function HeatMap({
     };
 
     const handleDataValidated = () => {
-      updatePolygons();
+      if (!polygonSeries.isDisposed()) {
+        updatePolygons();
+      }
     };
 
-    polygonSeries.events.on('datavalidated', () => {
-      handleDataValidated;
-    });
+    polygonSeries.events.on('datavalidated', handleDataValidated);
     handleDataValidated();
 
     // Cleanup event listeners on component unmount or when dependencies change

diff --git a/frontend/src/components/shared/HeatMap/Map.ts b/frontend/src/components/shared/HeatMap/Map.ts
@@ -28,7 +28,6 @@ export default function useMapChart(
     }
 
     return () => {
-      root.container.children.removeValue(newChart);
       newChart.dispose();
     };
   }, [root, settings, initializer]);