datastake-daf 0.6.146 → 0.6.147

package/dist/components/index.js

@@ -19463,16 +19463,46 @@ const useGlobe = ({
       if (instance) {
         setMapRef(instance);
 
-        // Add window resize listener for Mapbox GL JS responsiveness
+        // Add comprehensive resize detection for Mapbox GL JS responsiveness
         const handleResize = () => {
           if (instance && instance.resize) {
-            instance.resize();
+            // Add a small delay to ensure DOM has updated
+            setTimeout(() => {
+              instance.resize();
+            }, 100);
           }
         };
+
+        // Listen to window resize
         window.addEventListener('resize', handleResize);
 
-        // Store the handler for cleanup
+        // Listen to container size changes using ResizeObserver
+        const resizeObserver = new ResizeObserver(() => {
+          handleResize();
+        });
+        if (container.current) {
+          resizeObserver.observe(container.current);
+        }
+
+        // Store handlers for cleanup
         instance._resizeHandler = handleResize;
+        instance._resizeObserver = resizeObserver;
+
+        // Add IntersectionObserver to detect when globe becomes visible (handles sidenav scenarios)
+        const intersectionObserver = new IntersectionObserver(entries => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting && instance && instance.resize) {
+              // Globe container is visible, force resize after a delay
+              setTimeout(() => {
+                instance.resize();
+              }, 200);
+            }
+          });
+        });
+        if (container.current) {
+          intersectionObserver.observe(container.current);
+        }
+        instance._intersectionObserver = intersectionObserver;
       } else {
         console.log('❌ [GLOBE HOOK] Failed to create map instance');
       }
@@ -19553,6 +19583,33 @@ const useGlobe = ({
       addAllDataToMap();
     }
   }, [data, mapRef, initialMarkerSetIsDone]);
+
+  // Add effect to handle layout changes (like sidenav opening/closing)
+  React.useEffect(() => {
+    if (mapRef) {
+      // Force resize when component becomes visible or layout changes
+      const handleLayoutChange = () => {
+        if (mapRef && mapRef.resize) {
+          setTimeout(() => {
+            mapRef.resize();
+          }, 150);
+        }
+      };
+
+      // Listen for visibility changes
+      document.addEventListener('visibilitychange', handleLayoutChange);
+
+      // Listen for focus events (when user returns to tab)
+      window.addEventListener('focus', handleLayoutChange);
+
+      // Store handlers for cleanup
+      mapRef._layoutChangeHandler = handleLayoutChange;
+      return () => {
+        document.removeEventListener('visibilitychange', handleLayoutChange);
+        window.removeEventListener('focus', handleLayoutChange);
+      };
+    }
+  }, [mapRef]);
   React.useEffect(() => {
     if (activeMarker && mapRef) {
       const marker = mapMarkers.find(m => m.data === activeMarker);
@@ -19568,10 +19625,20 @@ const useGlobe = ({
     return () => {
       isMounted.current = false;
 
-      // Cleanup window resize listener for Mapbox GL JS
+      // Cleanup window resize listener and ResizeObserver for Mapbox GL JS
       if (mapRef && mapRef._resizeHandler) {
         window.removeEventListener('resize', mapRef._resizeHandler);
       }
+      if (mapRef && mapRef._resizeObserver) {
+        mapRef._resizeObserver.disconnect();
+      }
+      if (mapRef && mapRef._layoutChangeHandler) {
+        document.removeEventListener('visibilitychange', mapRef._layoutChangeHandler);
+        window.removeEventListener('focus', mapRef._layoutChangeHandler);
+      }
+      if (mapRef && mapRef._intersectionObserver) {
+        mapRef._intersectionObserver.disconnect();
+      }
 
       // Defer unmounting to avoid race conditions
       const rootsToUnmount = [...roots.current];
@@ -19669,12 +19736,22 @@ const useGlobe = ({
     }),
     handler: moveDownHandler
   }], [zoomHandler, zoomOutHandler, recenterMap, moveUpHandler, moveDownHandler]);
+
+  // Expose a manual resize method for external triggers
+  const forceResize = React.useCallback(() => {
+    if (mapRef && mapRef.resize) {
+      setTimeout(() => {
+        mapRef.resize();
+      }, 100);
+    }
+  }, [mapRef]);
   return {
     container,
     activeMarker,
     mapOptionsButtonsConfig,
     emptyStateIsVisible,
-    setEmptyStateIsVisible
+    setEmptyStateIsVisible,
+    forceResize
   };
 };
 
@@ -19722,7 +19799,8 @@ function Globe(_ref) {
   const {
     container,
     activeMarker,
-    mapOptionsButtonsConfig
+    mapOptionsButtonsConfig,
+    forceResize
   } = useGlobe({
     data: mappedData,
     user,
@@ -19749,6 +19827,17 @@ function Globe(_ref) {
   React.useEffect(() => {
     onRender === null || onRender === void 0 || onRender();
   }, [onRender]);
+
+  // Force resize when component becomes visible (handles sidenav open/close scenarios)
+  React.useEffect(() => {
+    if (forceResize) {
+      // Trigger resize after component mounts
+      const timer = setTimeout(() => {
+        forceResize();
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [forceResize]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Style$z, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.146",
+	"version": "0.6.147",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/Globe/hook.js

@@ -466,17 +466,49 @@ export const useGlobe = ({
       if (instance) {
         setMapRef(instance);
         
-        // Add window resize listener for Mapbox GL JS responsiveness
+        // Add comprehensive resize detection for Mapbox GL JS responsiveness
         const handleResize = () => {
           if (instance && instance.resize) {
-            instance.resize();
+            // Add a small delay to ensure DOM has updated
+            setTimeout(() => {
+              instance.resize();
+            }, 100);
           }
         };
         
+        // Listen to window resize
         window.addEventListener('resize', handleResize);
         
-        // Store the handler for cleanup
+        // Listen to container size changes using ResizeObserver
+        const resizeObserver = new ResizeObserver(() => {
+          handleResize();
+        });
+        
+        if (container.current) {
+          resizeObserver.observe(container.current);
+        }
+        
+        // Store handlers for cleanup
         instance._resizeHandler = handleResize;
+        instance._resizeObserver = resizeObserver;
+        
+        // Add IntersectionObserver to detect when globe becomes visible (handles sidenav scenarios)
+        const intersectionObserver = new IntersectionObserver((entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting && instance && instance.resize) {
+              // Globe container is visible, force resize after a delay
+              setTimeout(() => {
+                instance.resize();
+              }, 200);
+            }
+          });
+        });
+
+        if (container.current) {
+          intersectionObserver.observe(container.current);
+        }
+        
+        instance._intersectionObserver = intersectionObserver;
       } else {
         console.log('❌ [GLOBE HOOK] Failed to create map instance');
       }
@@ -565,6 +597,34 @@ export const useGlobe = ({
     }
   }, [data, mapRef, initialMarkerSetIsDone]);
 
+  // Add effect to handle layout changes (like sidenav opening/closing)
+  useEffect(() => {
+    if (mapRef) {
+      // Force resize when component becomes visible or layout changes
+      const handleLayoutChange = () => {
+        if (mapRef && mapRef.resize) {
+          setTimeout(() => {
+            mapRef.resize();
+          }, 150);
+        }
+      };
+
+      // Listen for visibility changes
+      document.addEventListener('visibilitychange', handleLayoutChange);
+      
+      // Listen for focus events (when user returns to tab)
+      window.addEventListener('focus', handleLayoutChange);
+      
+      // Store handlers for cleanup
+      mapRef._layoutChangeHandler = handleLayoutChange;
+      
+      return () => {
+        document.removeEventListener('visibilitychange', handleLayoutChange);
+        window.removeEventListener('focus', handleLayoutChange);
+      };
+    }
+  }, [mapRef]);
+
   useEffect(() => {
     if (activeMarker && mapRef) {
       const marker = mapMarkers.find((m) => m.data === activeMarker);
@@ -580,11 +640,24 @@ export const useGlobe = ({
     return () => {
       isMounted.current = false;
       
-      // Cleanup window resize listener for Mapbox GL JS
+      // Cleanup window resize listener and ResizeObserver for Mapbox GL JS
       if (mapRef && mapRef._resizeHandler) {
         window.removeEventListener('resize', mapRef._resizeHandler);
       }
       
+      if (mapRef && mapRef._resizeObserver) {
+        mapRef._resizeObserver.disconnect();
+      }
+      
+      if (mapRef && mapRef._layoutChangeHandler) {
+        document.removeEventListener('visibilitychange', mapRef._layoutChangeHandler);
+        window.removeEventListener('focus', mapRef._layoutChangeHandler);
+      }
+      
+      if (mapRef && mapRef._intersectionObserver) {
+        mapRef._intersectionObserver.disconnect();
+      }
+      
       // Defer unmounting to avoid race conditions
       const rootsToUnmount = [...roots.current];
       roots.current = [];
@@ -669,11 +742,21 @@ export const useGlobe = ({
     [zoomHandler, zoomOutHandler, recenterMap, moveUpHandler, moveDownHandler],
   );
 
+  // Expose a manual resize method for external triggers
+  const forceResize = useCallback(() => {
+    if (mapRef && mapRef.resize) {
+      setTimeout(() => {
+        mapRef.resize();
+      }, 100);
+    }
+  }, [mapRef]);
+
   return {
     container,
     activeMarker,
     mapOptionsButtonsConfig,
     emptyStateIsVisible,
     setEmptyStateIsVisible,
+    forceResize,
   };
 };

package/src/@daf/core/components/Dashboard/Globe/index.jsx

@@ -130,7 +130,7 @@ function Globe({
 	);
 
 	// Use custom hook to configure globe functionality
-	const { container, activeMarker, mapOptionsButtonsConfig } = useGlobe({
+	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
 		user,
 		polygon,
@@ -159,6 +159,18 @@ function Globe({
 		onRender?.();
 	}, [onRender]);
 
+	// Force resize when component becomes visible (handles sidenav open/close scenarios)
+	useEffect(() => {
+		if (forceResize) {
+			// Trigger resize after component mounts
+			const timer = setTimeout(() => {
+				forceResize();
+			}, 300);
+
+			return () => clearTimeout(timer);
+		}
+	}, [forceResize]);
+
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>