datastake-daf 0.6.286 → 0.6.287

package/dist/components/index.js

@@ -20938,301 +20938,6 @@ Globe.propTypes = {
   nameAsSiderTitle: PropTypes__default["default"].bool
 };
 
-const SimpleGlobe = _ref => {
-  let {
-    projects = [],
-    mapConfig = {},
-    showSider = false,
-    onProjectClick = () => {},
-    type = "default",
-    color = "var(--color-primary-60)",
-    renderTooltip: renderTooltip$1 = null
-  } = _ref;
-  const mapContainer = React.useRef(null);
-  const map = React.useRef(null);
-  const boundsRef = React.useRef(null);
-  React.useEffect(() => {
-    if (map.current) return; // Initialize map only once
-
-    console.log('🗺️ [SIMPLE GLOBE] Creating map...');
-
-    // Set Mapbox access token
-    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
-
-    // Create map with custom Straatos style
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
-      center: [0, 0],
-      zoom: mapConfig.maxZoom || 3,
-      projection: 'globe',
-      attributionControl: false
-    });
-
-    // Add markers when map loads
-    map.current.on('load', () => {
-      console.log('🗺️ [SIMPLE GLOBE] Map loaded, adding markers...');
-
-      // Hide Mapbox logo and attribution completely
-      map.current.getContainer();
-      const style = document.createElement('style');
-      style.textContent = "\n        .mapboxgl-ctrl-logo,\n        .mapboxgl-ctrl-attrib,\n        .mapboxgl-ctrl-bottom-left,\n        .mapboxgl-ctrl-bottom-right {\n          display: none !important;\n        }\n        .mapboxgl-canvas-container {\n          overflow: hidden !important;\n        }\n        .mapboxgl-canvas {\n          overflow: hidden !important;\n        }\n        /* CRITICAL: Override Leaflet CSS interference with Mapbox */\n        .daf-simple-globe-container .mapboxgl-canvas-container {\n          position: relative !important;\n          left: auto !important;\n          top: auto !important;\n        }\n        .daf-simple-globe-container .mapboxgl-canvas-container canvas {\n          position: relative !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n        /* Prevent Leaflet styles from affecting Mapbox markers */\n        .daf-simple-globe-container .daf-globe-marker {\n          position: relative !important;\n          left: auto !important;\n          top: auto !important;\n        }\n      ";
-      document.head.appendChild(style);
-
-      // Set the space background with stars
-      try {
-        map.current.setFog({
-          'color': 'rgb(0, 0, 0)',
-          'high-color': 'rgb(0, 0, 0)',
-          'horizon-blend': 0.1,
-          'space-color': 'rgb(0, 0, 0)',
-          'star-intensity': 0.6
-        });
-        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
-      } catch (e) {
-        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
-        // Fallback: try simpler fog configuration
-        try {
-          map.current.setFog({
-            'color': 'rgb(0, 0, 0)',
-            'high-color': 'rgb(0, 0, 0)',
-            'horizon-blend': 0.1
-          });
-          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
-        } catch (e2) {
-          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
-        }
-      }
-
-      // Calculate bounds to fit all markers
-      const bounds = new mapboxgl.LngLatBounds();
-      let hasValidCoordinates = false;
-      projects.forEach((project, index) => {
-        console.log("\uD83D\uDCCD [SIMPLE GLOBE] Adding marker ".concat(index, ":"), project);
-
-        // Create marker element based on type
-        const el = document.createElement('div');
-        // Use a scoped class to avoid picking up broad styles like `.map-marker { width:100% }`
-        el.className = 'daf-globe-marker';
-        el.style.cursor = 'pointer';
-        el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
-        el.style.display = 'flex';
-        el.style.alignItems = 'center';
-        el.style.justifyContent = 'center';
-        if (type === "location") {
-          // Location marker - SVG map pin style
-          el.style.width = '28px';
-          el.style.height = '33px';
-          el.innerHTML = "\n            <svg\n              width=\"28\"\n              height=\"33\"\n              viewBox=\"0 0 28 33\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M5.14346 4.87419C10.0688 -0.15896 18.0528 -0.162058 22.9757 4.86861C27.6563 9.65161 27.8841 17.2616 23.6622 22.3255H23.6608C23.427 22.6141 23.1808 22.894 22.9211 23.1623L14.0671 32.2101L5.44057 23.3948L5.13868 23.096C0.215857 18.0655 0.218422 9.90737 5.14346 4.87419Z\"\n                fill=\"".concat(color, "\"\n                stroke=\"white\"\n              />\n            </svg>\n          ");
-        } else {
-          // Default circular marker style
-          el.style.width = '30px';
-          el.style.height = '30px';
-          el.style.backgroundColor = color;
-          el.style.borderRadius = '50%';
-          el.style.border = '2px solid white';
-          el.style.color = 'white';
-          el.style.fontWeight = 'bold';
-          el.style.fontSize = '14px';
-          el.style.textAlign = 'center';
-          el.style.lineHeight = '1';
-          el.innerHTML = "<span style=\"display: block; line-height: 1;\">".concat(project.percentageCompletion || 0, "</span>");
-        }
-
-        // Create popup content using custom renderTooltip or default
-        let popupContent;
-        if (renderTooltip$1 && typeof renderTooltip$1 === 'function') {
-          // Use custom renderTooltip function (same as MineSiteMap)
-          const tooltipData = renderTooltip$1(project);
-          popupContent = renderTooltip({
-            title: project.name,
-            subTitle: project.sectoralScope || 'Project',
-            items: tooltipData,
-            link: false
-          });
-        } else {
-          // Use default tooltip structure
-          const tooltipData = [{
-            label: "Country",
-            value: project.country || 'N/A'
-          }, {
-            label: "Sectoral Scope",
-            value: project.sectoralScope || 'Project'
-          }];
-          popupContent = renderTooltip({
-            title: project.name,
-            subTitle: project.sectoralScope || 'Project',
-            items: tooltipData,
-            link: false
-          });
-        }
-
-        // Create popup
-        const popup = new mapboxgl.Popup({
-          offset: 25,
-          closeButton: true,
-          closeOnClick: false
-        }).setHTML(popupContent);
-
-        // Ensure coordinates are valid numbers
-        const lng = Number(project.longitude);
-        const lat = Number(project.latitude);
-        console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
-          lng,
-          lat,
-          project: project.name
-        });
-
-        // Validate coordinates
-        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error("\u274C [SIMPLE GLOBE] Invalid coordinates for project ".concat(index, ":"), {
-            lng,
-            lat,
-            project: project.name
-          });
-          return;
-        }
-
-        // Add coordinates to bounds
-        bounds.extend([lng, lat]);
-        hasValidCoordinates = true;
-
-        // Create marker with explicit positioning and anchor
-        const marker = new mapboxgl.Marker({
-          element: el,
-          anchor: 'center'
-        }).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
-
-        // Add click handler
-        el.addEventListener('click', () => {
-          console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
-          onProjectClick(project);
-        });
-
-        // Verify marker position after a short delay (like other Globe components)
-        setTimeout(() => {
-          const markerLngLat = marker.getLngLat();
-          console.log("\uD83D\uDD0D [SIMPLE GLOBE] Marker ".concat(index, " position verification:"), {
-            expected: [lng, lat],
-            actual: [markerLngLat.lng, markerLngLat.lat],
-            project: project.name,
-            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
-          });
-        }, 100);
-        console.log("\u2705 [SIMPLE GLOBE] Marker ".concat(index, " added at:"), [lng, lat]);
-      });
-
-      // Fit map to show all markers if we have valid coordinates
-      if (hasValidCoordinates && !bounds.isEmpty()) {
-        console.log('🗺️ [SIMPLE GLOBE] Fitting map to bounds:', bounds);
-        map.current.fitBounds(bounds, {
-          padding: {
-            top: 20,
-            bottom: 20,
-            left: 20,
-            right: 20
-          },
-          maxZoom: 6,
-          duration: 1000
-        });
-        boundsRef.current = bounds;
-      } else {
-        boundsRef.current = null;
-      }
-    });
-    return () => {
-      if (map.current) {
-        map.current.remove();
-        map.current = null;
-      }
-    };
-  }, [projects, onProjectClick, mapConfig]);
-  const zoomIn = () => map.current && map.current.zoomIn();
-  const zoomOut = () => map.current && map.current.zoomOut();
-  const recenter = () => {
-    if (!map.current) return;
-    if (boundsRef.current && !boundsRef.current.isEmpty()) {
-      map.current.fitBounds(boundsRef.current, {
-        padding: {
-          top: 20,
-          bottom: 20,
-          left: 20,
-          right: 20
-        },
-        maxZoom: 6,
-        duration: 800
-      });
-      return;
-    }
-    map.current.easeTo({
-      center: [0, 0],
-      zoom: 3,
-      duration: 800
-    });
-  };
-  const pitchUp = () => {
-    var _map$current$getPitch, _map$current;
-    if (!map.current) return;
-    const next = Math.min((((_map$current$getPitch = (_map$current = map.current).getPitch) === null || _map$current$getPitch === void 0 ? void 0 : _map$current$getPitch.call(_map$current)) || 0) + 10, 85);
-    map.current.setPitch(next);
-  };
-  const pitchDown = () => {
-    var _map$current$getPitch2, _map$current2;
-    if (!map.current) return;
-    const next = Math.max((((_map$current$getPitch2 = (_map$current2 = map.current).getPitch) === null || _map$current$getPitch2 === void 0 ? void 0 : _map$current$getPitch2.call(_map$current2)) || 0) - 10, 0);
-    map.current.setPitch(next);
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(Style$A, {
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "daf-simple-globe-container",
-      style: {
-        width: '100%',
-        height: '100%',
-        overflow: 'hidden',
-        position: 'relative'
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        ref: mapContainer,
-        className: "daf-globe-map-container",
-        style: {
-          width: '100%',
-          height: '100%',
-          overflow: 'hidden',
-          position: 'relative'
-        }
-      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "map-control-buttons",
-        children: [/*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          "aria-label": "Zoom in",
-          onClick: zoomIn,
-          children: "+"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          "aria-label": "Zoom out",
-          onClick: zoomOut,
-          children: "\u2212"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          "aria-label": "Recenter",
-          onClick: recenter,
-          children: "\u25CE"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          "aria-label": "Pitch up",
-          onClick: pitchUp,
-          children: "^"
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          "aria-label": "Pitch down",
-          onClick: pitchDown,
-          children: "\u02C5"
-        })]
-      })]
-    })
-  });
-};
-
 const IsolatedGlobe = _ref => {
   let {
     projects = [],
@@ -62443,7 +62148,6 @@ exports.SelectFiltersTimeFrame = Timeframe;
 exports.SettingsPopover = SettingsPopover;
 exports.Sidenav = Sidenav;
 exports.SidenavMenu = SidenavMenu;
-exports.SimpleGlobe = SimpleGlobe;
 exports.StackChart = StackChart;
 exports.StakeholderMappings = index$1;
 exports.Steps = DAFSteps;

package/package.json

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

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

@@ -47,16 +47,63 @@ const SimpleGlobe = ({
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create map with custom Straatos style
+    // Create map with custom Straatos style - 3D globe configuration
     map.current = new mapboxgl.Map({
       container: mapContainer.current,
       style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
       center: [0, 0],
       zoom: mapConfig.maxZoom || 3,
       projection: 'globe',
+      // 3D globe settings for proper rendering
+      pitch: 0,
+      bearing: 0,
+      antialias: true,
+      fadeDuration: 0,
       attributionControl: false
     });
 
+    // Configure 3D globe when style loads
+    map.current.on('style.load', () => {
+      console.log('🎨 [SIMPLE GLOBE] Style loaded, configuring 3D globe...');
+      
+      // Set fog for the space background effect with stars
+      try {
+        map.current.setFog({
+          'color': 'rgb(0, 0, 0)',
+          'high-color': 'rgb(0, 0, 0)',
+          'horizon-blend': 0.1,
+          'space-color': 'rgb(0, 0, 0)',
+          'star-intensity': 0.6
+        });
+        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
+      } catch (e) {
+        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
+        // Fallback: try simpler fog configuration
+        try {
+          map.current.setFog({
+            'color': 'rgb(0, 0, 0)',
+            'high-color': 'rgb(0, 0, 0)',
+            'horizon-blend': 0.1
+          });
+          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
+        } catch (e2) {
+          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
+        }
+      }
+      
+      // Set lighting for better 3D globe visibility
+      try {
+        map.current.setLight({
+          'anchor': 'viewport',
+          'color': 'white',
+          'intensity': 0.4
+        });
+        console.log('💡 [SIMPLE GLOBE] Lighting configured for 3D globe');
+      } catch (e) {
+        console.log('⚠️ [SIMPLE GLOBE] Could not set lighting');
+      }
+    });
+
     // Add markers when map loads
     map.current.on('load', () => {
       console.log('🗺️ [SIMPLE GLOBE] Map loaded, adding markers...');
@@ -98,31 +145,6 @@ const SimpleGlobe = ({
       `;
       document.head.appendChild(style);
       
-      // Set the space background with stars
-      try {
-        map.current.setFog({
-          'color': 'rgb(0, 0, 0)',
-          'high-color': 'rgb(0, 0, 0)',
-          'horizon-blend': 0.1,
-          'space-color': 'rgb(0, 0, 0)',
-          'star-intensity': 0.6
-        });
-        console.log('✨ [SIMPLE GLOBE] Space background with stars set');
-      } catch (e) {
-        console.log('⚠️ [SIMPLE GLOBE] Could not set fog, trying alternative...');
-        // Fallback: try simpler fog configuration
-        try {
-          map.current.setFog({
-            'color': 'rgb(0, 0, 0)',
-            'high-color': 'rgb(0, 0, 0)',
-            'horizon-blend': 0.1
-          });
-          console.log('✨ [SIMPLE GLOBE] Alternative space background set');
-        } catch (e2) {
-          console.log('⚠️ [SIMPLE GLOBE] Could not set any fog configuration');
-        }
-      }
-      
       // Calculate bounds to fit all markers
       const bounds = new mapboxgl.LngLatBounds();
       let hasValidCoordinates = false;
@@ -241,7 +263,7 @@ const SimpleGlobe = ({
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Create marker with explicit positioning and anchor
+        // Create marker with explicit positioning and anchor for 3D globe
         const marker = new mapboxgl.Marker({
           element: el,
           anchor: 'center'
@@ -282,6 +304,14 @@ const SimpleGlobe = ({
       } else {
         boundsRef.current = null;
       }
+      
+      // Force resize for 3D globe rendering
+      setTimeout(() => {
+        if (map.current && map.current.resize) {
+          map.current.resize();
+          console.log('🔄 [SIMPLE GLOBE] Map resized for 3D globe rendering');
+        }
+      }, 100);
     });
 
     return () => {

package/src/index.js

@@ -62,7 +62,6 @@ export { default as TooltipIcon } from "./@daf/core/components/Icon/TooltipIcon.
 export { default as MineSiteMap } from "./@daf/core/components/Dashboard/Map/index.jsx";
 export { default as InExpandableWidgetMap } from "./@daf/core/components/Dashboard/Map/InExpandableWidgetMap/index.jsx";
 export { default as Globe } from "./@daf/core/components/Dashboard/Globe/index.jsx";
-export { default as SimpleGlobe } from "./@daf/core/components/Dashboard/Globe/SimpleGlobe.jsx";
 export { default as IsolatedGlobe } from "./@daf/core/components/Dashboard/Globe/IsolatedGlobe.jsx";
 export { default as NoConflictGlobe } from "./@daf/core/components/Dashboard/Globe/NoConflictGlobe.jsx";
 export { default as WidgetPlaceholder } from "./@daf/core/components/Dashboard/Widget/WidgetPlaceholder/index.jsx";