datastake-daf 0.6.281 → 0.6.283

package/dist/components/index.js

@@ -20959,15 +20959,29 @@ const SimpleGlobe = _ref => {
     // 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
-    });
+    // Create map with custom Straatos style (with fallback)
+    try {
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+      console.log('🗺️ [SIMPLE GLOBE] Custom style loaded successfully');
+    } catch (error) {
+      console.warn('⚠️ [SIMPLE GLOBE] Custom style failed, using fallback:', error);
+      // Fallback to standard style
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/mapbox/satellite-v9',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+    }
 
     // Add markers when map loads
     map.current.on('load', () => {
@@ -20976,7 +20990,7 @@ const SimpleGlobe = _ref => {
       // 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      ";
+      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        \n        /* AGGRESSIVE CSS ISOLATION: Override ALL Leaflet CSS interference */\n        .daf-simple-globe-container .mapboxgl-canvas-container {\n          position: relative !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !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        \n        /* CRITICAL: Override Leaflet marker positioning that affects Mapbox */\n        .daf-simple-globe-container .mapboxgl-marker {\n          position: absolute !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n          pointer-events: auto !important;\n        }\n        \n        /* Override Leaflet div icon styles */\n        .daf-simple-globe-container .mapboxgl-marker .daf-globe-marker {\n          position: relative !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n          width: auto !important;\n          height: auto !important;\n          background: none !important;\n          border: none !important;\n          pointer-events: auto !important;\n        }\n        \n        /* Override any Leaflet pane positioning */\n        .daf-simple-globe-container .mapboxgl-marker-pane {\n          position: absolute !important;\n          left: 0 !important;\n          top: 0 !important;\n          transform: none !important;\n        }\n        \n        /* Override Leaflet tile container interference */\n        .daf-simple-globe-container .mapboxgl-tile-container {\n          position: absolute !important;\n          left: 0 !important;\n          top: 0 !important;\n          transform: none !important;\n        }\n        \n        /* Override any Leaflet zoom animations */\n        .daf-simple-globe-container .mapboxgl-zoom-animated {\n          transform-origin: 0 0 !important;\n        }\n        \n        /* Override Leaflet interactive cursor styles */\n        .daf-simple-globe-container .mapboxgl-marker.leaflet-interactive {\n          cursor: pointer !important;\n        }\n        \n        /* Override Leaflet popup positioning */\n        .daf-simple-globe-container .mapboxgl-popup {\n          position: absolute !important;\n          left: auto !important;\n          top: auto !important;\n          transform: none !important;\n        }\n      ";
       document.head.appendChild(style);
 
       // Set the space background with stars
@@ -21019,6 +21033,12 @@ const SimpleGlobe = _ref => {
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
+        // Ensure proper positioning and prevent CSS interference
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
         if (type === "location") {
           // Location marker - SVG map pin style
           el.style.width = '28px';
@@ -21074,19 +21094,31 @@ const SimpleGlobe = _ref => {
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Ensure coordinates are valid numbers
+        // Ensure coordinates are valid numbers and in correct order
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         console.log("\uD83D\uDCCD [SIMPLE GLOBE] Marker ".concat(index, " coordinates:"), {
-          lng,
-          lat
+          original: {
+            longitude: project.longitude,
+            latitude: project.latitude
+          },
+          processed: {
+            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
+            lat,
+            original: {
+              longitude: project.longitude,
+              latitude: project.latitude
+            },
+            project: project.name
           });
           return;
         }
@@ -21095,14 +21127,28 @@ const SimpleGlobe = _ref => {
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Add marker to map with proper coordinate order [lng, lat]
-        new mapboxgl.Marker(el).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
+        // Create marker with explicit positioning
+        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
+        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]);
       });
 
@@ -21217,6 +21263,136 @@ const SimpleGlobe = _ref => {
   });
 };
 
+const SimpleGlobeTestDebug = _ref => {
+  let {
+    projects = []
+  } = _ref;
+  const mapContainer = React.useRef(null);
+  const map = React.useRef(null);
+  React.useEffect(() => {
+    if (map.current) return;
+    console.log('🧪 [DEBUG TEST] Creating minimal map...');
+
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    // Create minimal map
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/satellite-v9',
+      center: [0, 0],
+      zoom: 2,
+      projection: 'globe'
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🧪 [DEBUG TEST] Map loaded, adding test markers...');
+      projects.forEach((project, index) => {
+        console.log("\uD83E\uDDEA [DEBUG TEST] Processing project ".concat(index, ":"), project);
+
+        // Create simple marker
+        const el = document.createElement('div');
+        el.style.width = '20px';
+        el.style.height = '20px';
+        el.style.backgroundColor = '#FF0000';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        el.style.cursor = 'pointer';
+        el.style.boxShadow = '0px 3px 6px rgba(0,0,0,0.3)';
+
+        // Get coordinates
+        const lng = Number(project.longitude);
+        const lat = Number(project.latitude);
+        console.log("\uD83E\uDDEA [DEBUG TEST] Coordinates for ".concat(project.name, ":"), {
+          original: {
+            longitude: project.longitude,
+            latitude: project.latitude
+          },
+          processed: {
+            lng,
+            lat
+          },
+          valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+        });
+        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
+          console.error("\u274C [DEBUG TEST] Invalid coordinates for ".concat(project.name, ":"), {
+            lng,
+            lat
+          });
+          return;
+        }
+
+        // Create popup
+        const popup = new mapboxgl.Popup({
+          offset: 25
+        }).setHTML("\n            <div style=\"padding: 8px;\">\n              <h3 style=\"margin: 0 0 8px 0; font-size: 14px;\">".concat(project.name, "</h3>\n              <p style=\"margin: 0; font-size: 12px; color: #666;\">\n                Lat: ").concat(lat.toFixed(4), ", Lng: ").concat(lng.toFixed(4), "\n              </p>\n              <p style=\"margin: 4px 0 0 0; font-size: 12px;\">\n                ").concat(project.projectDescription || 'No description', "\n              </p>\n            </div>\n          "));
+
+        // Add marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        }).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
+
+        // Verify position after a delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          const positionMatch = Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001;
+          console.log("\uD83D\uDD0D [DEBUG TEST] Position verification for ".concat(project.name, ":"), {
+            expected: [lng, lat],
+            actual: [markerLngLat.lng, markerLngLat.lat],
+            match: positionMatch,
+            difference: {
+              lng: Math.abs(markerLngLat.lng - lng),
+              lat: Math.abs(markerLngLat.lat - lat)
+            }
+          });
+          if (!positionMatch) {
+            console.error("\u274C [DEBUG TEST] Position mismatch for ".concat(project.name, "!"));
+          }
+        }, 200);
+        console.log("\u2705 [DEBUG TEST] Marker added for ".concat(project.name, " at:"), [lng, lat]);
+      });
+    });
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      width: '100%',
+      height: '600px',
+      border: '2px solid #ccc',
+      position: 'relative'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: mapContainer,
+      style: {
+        width: '100%',
+        height: '100%',
+        position: 'relative'
+      }
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("strong", {
+        children: "Debug Test Map"
+      }), /*#__PURE__*/jsxRuntime.jsx("br", {}), "Projects: ", projects.length, /*#__PURE__*/jsxRuntime.jsx("br", {}), "Check console for position verification"]
+    })]
+  });
+};
+
 function WidgetPlaceholder(_ref) {
   let {
     icon = "",
@@ -62040,6 +62216,7 @@ exports.SettingsPopover = SettingsPopover;
 exports.Sidenav = Sidenav;
 exports.SidenavMenu = SidenavMenu;
 exports.SimpleGlobe = SimpleGlobe;
+exports.SimpleGlobeTestDebug = SimpleGlobeTestDebug;
 exports.StackChart = StackChart;
 exports.StakeholderMappings = index$1;
 exports.Steps = DAFSteps;

package/package.json

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

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

@@ -47,15 +47,29 @@ const SimpleGlobe = ({
     // 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
-    });
+    // Create map with custom Straatos style (with fallback)
+    try {
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/pietragottardo/cm9tt9zfi00d101pg1vdx26si',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+      console.log('🗺️ [SIMPLE GLOBE] Custom style loaded successfully');
+    } catch (error) {
+      console.warn('⚠️ [SIMPLE GLOBE] Custom style failed, using fallback:', error);
+      // Fallback to standard style
+      map.current = new mapboxgl.Map({
+        container: mapContainer.current,
+        style: 'mapbox://styles/mapbox/satellite-v9',
+        center: [0, 0],
+        zoom: mapConfig.maxZoom || 3,
+        projection: 'globe',
+        attributionControl: false
+      });
+    }
 
     // Add markers when map loads
     map.current.on('load', () => {
@@ -77,11 +91,13 @@ const SimpleGlobe = ({
         .mapboxgl-canvas {
           overflow: hidden !important;
         }
-        /* CRITICAL: Override Leaflet CSS interference with Mapbox */
+        
+        /* AGGRESSIVE CSS ISOLATION: Override ALL Leaflet CSS interference */
         .daf-simple-globe-container .mapboxgl-canvas-container {
           position: relative !important;
           left: auto !important;
           top: auto !important;
+          transform: none !important;
         }
         .daf-simple-globe-container .mapboxgl-canvas-container canvas {
           position: relative !important;
@@ -89,11 +105,61 @@ const SimpleGlobe = ({
           top: auto !important;
           transform: none !important;
         }
-        /* Prevent Leaflet styles from affecting Mapbox markers */
-        .daf-simple-globe-container .daf-globe-marker {
+        
+        /* CRITICAL: Override Leaflet marker positioning that affects Mapbox */
+        .daf-simple-globe-container .mapboxgl-marker {
+          position: absolute !important;
+          left: auto !important;
+          top: auto !important;
+          transform: none !important;
+          pointer-events: auto !important;
+        }
+        
+        /* Override Leaflet div icon styles */
+        .daf-simple-globe-container .mapboxgl-marker .daf-globe-marker {
           position: relative !important;
           left: auto !important;
           top: auto !important;
+          transform: none !important;
+          width: auto !important;
+          height: auto !important;
+          background: none !important;
+          border: none !important;
+          pointer-events: auto !important;
+        }
+        
+        /* Override any Leaflet pane positioning */
+        .daf-simple-globe-container .mapboxgl-marker-pane {
+          position: absolute !important;
+          left: 0 !important;
+          top: 0 !important;
+          transform: none !important;
+        }
+        
+        /* Override Leaflet tile container interference */
+        .daf-simple-globe-container .mapboxgl-tile-container {
+          position: absolute !important;
+          left: 0 !important;
+          top: 0 !important;
+          transform: none !important;
+        }
+        
+        /* Override any Leaflet zoom animations */
+        .daf-simple-globe-container .mapboxgl-zoom-animated {
+          transform-origin: 0 0 !important;
+        }
+        
+        /* Override Leaflet interactive cursor styles */
+        .daf-simple-globe-container .mapboxgl-marker.leaflet-interactive {
+          cursor: pointer !important;
+        }
+        
+        /* Override Leaflet popup positioning */
+        .daf-simple-globe-container .mapboxgl-popup {
+          position: absolute !important;
+          left: auto !important;
+          top: auto !important;
+          transform: none !important;
         }
       `;
       document.head.appendChild(style);
@@ -139,6 +205,12 @@ const SimpleGlobe = ({
         el.style.display = 'flex';
         el.style.alignItems = 'center';
         el.style.justifyContent = 'center';
+        // Ensure proper positioning and prevent CSS interference
+        el.style.position = 'relative';
+        el.style.left = 'auto';
+        el.style.top = 'auto';
+        el.style.transform = 'none';
+        el.style.zIndex = '1000';
         
         if (type === "location") {
           // Location marker - SVG map pin style
@@ -217,15 +289,23 @@ const SimpleGlobe = ({
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Ensure coordinates are valid numbers
+        // Ensure coordinates are valid numbers and in correct order
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         
-        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { lng, lat });
+        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { 
+          original: { longitude: project.longitude, latitude: project.latitude },
+          processed: { lng, lat },
+          project: project.name 
+        });
         
         // Validate coordinates
         if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { lng, lat });
+          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { 
+            lng, lat, 
+            original: { longitude: project.longitude, latitude: project.latitude },
+            project: project.name 
+          });
           return;
         }
 
@@ -233,8 +313,11 @@ const SimpleGlobe = ({
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Add marker to map with proper coordinate order [lng, lat]
-        const marker = new mapboxgl.Marker(el)
+        // Create marker with explicit positioning
+        const marker = new mapboxgl.Marker({
+          element: el,
+          anchor: 'center'
+        })
           .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
@@ -244,6 +327,17 @@ const SimpleGlobe = ({
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
+        
+        // Verify marker position after a short delay
+        setTimeout(() => {
+          const markerLngLat = marker.getLngLat();
+          console.log(`🔍 [SIMPLE GLOBE] Marker ${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(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [lng, lat]);
       });

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js

@@ -1,5 +1,7 @@
 import SimpleGlobe from "./SimpleGlobe";
 import SimpleGlobeDebug from "./SimpleGlobeDebug";
+import SimpleGlobeTestDebug from "./SimpleGlobeTestDebug";
+import SimpleGlobeStraatosDebug from "./SimpleGlobeStraatosDebug";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
@@ -282,3 +284,32 @@ export const DebugVersion = {
     </div>
   )
 };
+
+export const TestDebugVersion = {
+  name: "Test Debug Version (Minimal Setup)",
+  render: () => (
+    <div style={{ margin: "3em" }}>
+      <ThemeLayout>
+        <Widget title="Test Debug Globe (Minimal Mapbox)" className="no-px no-pb-body">
+          <SimpleGlobeTestDebug projects={SAMPLE_PROJECTS} />
+        </Widget>
+      </ThemeLayout>
+    </div>
+  )
+};
+
+export const StraatosDebugVersion = {
+  name: "Straatos Debug Version (Aggressive CSS Isolation)",
+  render: () => (
+    <div style={{ margin: "3em" }}>
+      <ThemeLayout>
+        <Widget title="Straatos Debug Globe (Aggressive CSS Isolation)" className="no-px no-pb-body">
+          <SimpleGlobeStraatosDebug projects={SAMPLE_PROJECTS} />
+        </Widget>
+      </ThemeLayout>
+    </div>
+  )
+};
+
+// Export the components for reuse in other projects
+export { SimpleGlobeTestDebug, SimpleGlobeStraatosDebug };