datastake-daf 0.6.184 → 0.6.185

package/dist/components/index.js

@@ -18715,18 +18715,8 @@ const Style$A = dt.div`
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
+  height: 100%;
+  min-height: 400px;
 
   .filter-cont {
     position: absolute; 
@@ -18817,6 +18807,8 @@ const Style$A = dt.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
+    width: 100%;
+    height: 100%;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {
@@ -20014,6 +20006,22 @@ const useGlobe = ({
   };
 };
 
+typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
+typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
+const ResizeContext = /*#__PURE__*/React.createContext({
+  resizeLoading: false,
+  windowWidth: 0,
+  resizeDif: 0,
+  isCollapsed: false,
+  setIsCollapsed: () => {},
+  isNestedSidebarCollapsed: false,
+  setIsNestedSidebarCollapsed: () => {}
+});
+const useResizeContext = () => {
+  const values = React.useContext(ResizeContext);
+  return values;
+};
+
 function Globe(_ref) {
   var _activeMarker$data, _activeMarker$data2;
   let {
@@ -20054,6 +20062,11 @@ function Globe(_ref) {
     });
   }), [data]);
 
+  // Get resize context for sidebar state changes
+  const {
+    isCollapsed
+  } = useResizeContext();
+
   // Use custom hook to configure globe functionality
   const {
     container,
@@ -20097,6 +20110,33 @@ function Globe(_ref) {
       return () => clearTimeout(timer);
     }
   }, [forceResize]);
+
+  // Force resize when sidebar state changes (handles width changes)
+  React.useEffect(() => {
+    if (forceResize) {
+      // Trigger resize when sidebar collapses/expands
+      const timer = setTimeout(() => {
+        forceResize();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isCollapsed, forceResize]);
+
+  // Add window resize listener as backup
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      if (forceResize) {
+        // Small delay to ensure DOM has updated
+        setTimeout(() => {
+          forceResize();
+        }, 100);
+      }
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [forceResize]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs(Style$A, {
       className: formatClassname([showSider && activeMarker && "with-sider"]),
@@ -51495,22 +51535,6 @@ function useConfig(data) {
   return config;
 }
 
-typeof localStorage.getItem('is_collapsed') === 'string' ? localStorage.getItem('is_collapsed') === 'true' ? true : false : true;
-typeof localStorage.getItem('is_nested_sidebar_collapsed') === 'string' ? localStorage.getItem('is_nested_sidebar_collapsed') === 'true' : true;
-const ResizeContext = /*#__PURE__*/React.createContext({
-  resizeLoading: false,
-  windowWidth: 0,
-  resizeDif: 0,
-  isCollapsed: false,
-  setIsCollapsed: () => {},
-  isNestedSidebarCollapsed: false,
-  setIsNestedSidebarCollapsed: () => {}
-});
-const useResizeContext = () => {
-  const values = React.useContext(ResizeContext);
-  return values;
-};
-
 const DAYS = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
 function UserActivity({
   loading,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.184",
+	"version": "0.6.185",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,7 +15,7 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
-		"datastake-daf": "^0.5.780",
+		"datastake-daf": "0.6.184",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"dot-object": "^2.1.5",

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

@@ -8,6 +8,7 @@ import CustomIcon from "../../Icon/CustomIcon.jsx";
 import ComponentWithFocus from "../ComponentWithFocus/index.jsx";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 import Filters from "../../Filters/FloatingFilters/index.js";
+import { useResizeContext } from "../../../context/Resize/index.js";
 
 /**
  * Globe Component
@@ -129,6 +130,9 @@ function Globe({
 		[data],
 	);
 
+	// Get resize context for sidebar state changes
+	const { isCollapsed } = useResizeContext();
+
 	// Use custom hook to configure globe functionality
 	const { container, activeMarker, mapOptionsButtonsConfig, forceResize } = useGlobe({
 		data: mappedData,
@@ -171,6 +175,36 @@ function Globe({
 		}
 	}, [forceResize]);
 
+	// Force resize when sidebar state changes (handles width changes)
+	useEffect(() => {
+		if (forceResize) {
+			// Trigger resize when sidebar collapses/expands
+			const timer = setTimeout(() => {
+				forceResize();
+			}, 100);
+
+			return () => clearTimeout(timer);
+		}
+	}, [isCollapsed, forceResize]);
+
+	// Add window resize listener as backup
+	useEffect(() => {
+		const handleWindowResize = () => {
+			if (forceResize) {
+				// Small delay to ensure DOM has updated
+				setTimeout(() => {
+					forceResize();
+				}, 100);
+			}
+		};
+
+		window.addEventListener('resize', handleWindowResize);
+		
+		return () => {
+			window.removeEventListener('resize', handleWindowResize);
+		};
+	}, [forceResize]);
+
 	return (
 		<ComponentWithFocus>
 			<Style className={formatClassname([showSider && activeMarker && "with-sider"])}>

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

@@ -5,18 +5,8 @@ const Style = styled.div`
   flex-direction: row;
   position: relative;
   width: 100%;
-  height: 472px;
-  min-height: 300px;
-  
-  @media (max-width: 768px) {
-    height: 350px;
-    min-height: 250px;
-  }
-  
-  @media (max-width: 480px) {
-    height: 300px;
-    min-height: 200px;
-  }
+  height: 100%;
+  min-height: 400px;
 
   .filter-cont {
     position: absolute; 
@@ -107,6 +97,8 @@ const Style = styled.div`
     flex: 1;
     background: rgb(0, 0, 0);
     z-index: 1;
+    width: 100%;
+    height: 100%;
     
     /* Mapbox GL JS specific styles */
     .mapboxgl-ctrl-top-right {