Improve bugfix for map flashing issue

openclimatefix · Feb 23, 2024 · a8189d1 · a8189d1
1 parent 56b4d57
commit a8189d1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 9 deletions.
diff --git a/apps/nowcasting-app/components/helpers/mapUtils.ts b/apps/nowcasting-app/components/helpers/mapUtils.ts
@@ -12,30 +12,36 @@ export const safelyUpdateMapData = (
     !map.isStyleLoaded()
   ) {
     if (!map.isStyleLoaded()) {
-      // Check if we've already set a timeout for this map
+      console.warn("📍map style not loaded yet, skipping update");
+      // -- Check if we've already set a timeout for this map and therefore a check is already pending
       const existingTimeout = localStorage.getItem(
         `MapTimeoutId-${map.getContainer().dataset.title}`
       );
-      // If we have, clear it
+      // -- If we have, skip the update and return
       if (existingTimeout) {
-        // console.log(`clearing existing map timeout for ${map.getContainer().dataset.title}`);
-        clearTimeout(Number(existingTimeout));
+        console.debug("existing timeout running, skipping");
+        return;
       }
-      // Set a new timeout to check if the map is ready and update the data
-      // console.log(`setting new map timeout for ${map.getContainer().dataset.title}`, newTimeout);
+      // -- Set a new timeout to check whether the map is ready and update the data
+      console.debug(`setting new map timeout for ${map.getContainer().dataset.title}`);
       const newTimeout = setTimeout(() => {
-        // console.warn("map is not style loaded, trying again");
         safelyUpdateMapData(map, updateMapData);
+        // console.log(`clearing new map timeout for ${map.getContainer().dataset.title}`);
+        localStorage.removeItem(`MapTimeoutId-${map.getContainer().dataset.title}`);
       }, 500);
-      // Save the timeout id to local storage
+      // -- Save the timeout id to local storage
+      console.debug(
+        `saving new map timeout id for ${map.getContainer().dataset.title}`,
+        newTimeout
+      );
       localStorage.setItem(
         `MapTimeoutId-${map.getContainer().dataset.title}`,
         newTimeout.toString()
       );
     }
     return;
   } else {
-    console.warn("🎉 map is ready, updating data");
+    console.debug("🎉 map is ready, updating data");
     updateMapData(map);
   }
 };
diff --git a/apps/nowcasting-app/pages/index.tsx b/apps/nowcasting-app/pages/index.tsx
@@ -129,6 +129,16 @@ export default function Home({ dashboardModeServer }: { dashboardModeServer: str
     });
   }, [view, maps]);
 
+  useEffect(() => {
+    // Clear any previous map timeouts on initial page load
+    for (const map of maps) {
+      localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`) &&
+        clearTimeout(
+          Number(localStorage.getItem(`MapTimeoutId-${map.getContainer().dataset.title}`))
+        );
+    }
+  }, [maps]);
+
   useEffect(() => {
     maps.forEach((map) => {
       console.log("-- -- -- resizing map");