datastake-daf 0.6.283 → 0.6.284

package/dist/components/index.js

@@ -20959,29 +20959,15 @@ const SimpleGlobe = _ref => {
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // 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
-      });
-    }
+    // 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', () => {
@@ -20990,7 +20976,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        \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      ";
+      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
@@ -21033,12 +21019,6 @@ 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';
@@ -21094,31 +21074,19 @@ const SimpleGlobe = _ref => {
           closeOnClick: false
         }).setHTML(popupContent);
 
-        // Ensure coordinates are valid numbers and in correct order
+        // 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:"), {
-          original: {
-            longitude: project.longitude,
-            latitude: project.latitude
-          },
-          processed: {
-            lng,
-            lat
-          },
-          project: project.name
+          lng,
+          lat
         });
 
         // 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,
-            original: {
-              longitude: project.longitude,
-              latitude: project.latitude
-            },
-            project: project.name
+            lat
           });
           return;
         }
@@ -21127,28 +21095,14 @@ const SimpleGlobe = _ref => {
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Create marker with explicit positioning
-        const marker = new mapboxgl.Marker({
-          element: el,
-          anchor: 'center'
-        }).setLngLat([lng, lat]).setPopup(popup).addTo(map.current);
+        // Add marker to map with proper coordinate order [lng, lat]
+        new mapboxgl.Marker(el).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]);
       });
 
@@ -21263,48 +21217,108 @@ const SimpleGlobe = _ref => {
   });
 };
 
-const SimpleGlobeTestDebug = _ref => {
+const IsolatedGlobe = _ref => {
   let {
-    projects = []
+    projects = [],
+    mapConfig = {},
+    onProjectClick = () => {},
+    type = "default",
+    color = "#00809E"
   } = _ref;
   const mapContainer = React.useRef(null);
   const map = React.useRef(null);
+  const shadowRoot = React.useRef(null);
+  const boundsRef = React.useRef(null);
   React.useEffect(() => {
     if (map.current) return;
-    console.log('🧪 [DEBUG TEST] Creating minimal map...');
+    console.log('🗺️ [ISOLATED GLOBE] Creating isolated map...');
 
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create minimal map
+    // Create shadow DOM for complete isolation
+    const container = mapContainer.current;
+    shadowRoot.current = container.attachShadow({
+      mode: 'open'
+    });
+
+    // Create isolated styles
+    const style = document.createElement('style');
+    style.textContent = "\n      :host {\n        display: block;\n        width: 100%;\n        height: 100%;\n        position: relative;\n        overflow: hidden;\n      }\n      \n      .mapboxgl-map {\n        font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;\n        overflow: hidden;\n        position: relative;\n        width: 100%;\n        height: 100%;\n        -webkit-tap-highlight-color: rgb(0 0 0/0);\n      }\n      \n      .mapboxgl-canvas {\n        left: 0;\n        position: absolute;\n        top: 0;\n      }\n      \n      .mapboxgl-canvas-container {\n        position: relative;\n        width: 100%;\n        height: 100%;\n      }\n      \n      .mapboxgl-marker {\n        position: absolute;\n        z-index: 1;\n      }\n      \n      .mapboxgl-marker svg {\n        display: block;\n      }\n      \n      .mapboxgl-popup {\n        position: absolute;\n        text-align: center;\n        margin-bottom: 20px;\n      }\n      \n      .mapboxgl-popup-content-wrapper {\n        padding: 1px;\n        text-align: left;\n        border-radius: 12px;\n        background: white;\n        color: #333;\n        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);\n      }\n      \n      .mapboxgl-popup-content {\n        margin: 13px 24px 13px 20px;\n        line-height: 1.3;\n        font-size: 13px;\n        min-height: 1px;\n      }\n      \n      .mapboxgl-popup-tip-container {\n        width: 40px;\n        height: 20px;\n        position: absolute;\n        left: 50%;\n        margin-top: -1px;\n        margin-left: -20px;\n        overflow: hidden;\n        pointer-events: none;\n      }\n      \n      .mapboxgl-popup-tip {\n        width: 17px;\n        height: 17px;\n        padding: 1px;\n        margin: -10px auto 0;\n        pointer-events: auto;\n        transform: rotate(45deg);\n        background: white;\n        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);\n      }\n      \n      .mapboxgl-popup-close-button {\n        position: absolute;\n        top: 0;\n        right: 0;\n        border: none;\n        text-align: center;\n        width: 24px;\n        height: 24px;\n        font: 16px/24px Tahoma, Verdana, sans-serif;\n        color: #757575;\n        text-decoration: none;\n        background: transparent;\n        cursor: pointer;\n      }\n      \n      .mapboxgl-popup-close-button:hover {\n        color: #585858;\n      }\n      \n      .mapboxgl-ctrl-attribution,\n      .mapboxgl-ctrl-logo {\n        display: none !important;\n      }\n    ";
+    shadowRoot.current.appendChild(style);
+
+    // Create map container inside shadow DOM
+    const mapDiv = document.createElement('div');
+    mapDiv.style.width = '100%';
+    mapDiv.style.height = '100%';
+    shadowRoot.current.appendChild(mapDiv);
+
+    // Create map
     map.current = new mapboxgl.Map({
-      container: mapContainer.current,
+      container: mapDiv,
       style: 'mapbox://styles/mapbox/satellite-v9',
       center: [0, 0],
-      zoom: 2,
-      projection: 'globe'
+      zoom: mapConfig.maxZoom || 3,
+      projection: 'globe',
+      attributionControl: false
     });
 
     // Add markers when map loads
     map.current.on('load', () => {
-      console.log('🧪 [DEBUG TEST] Map loaded, adding test markers...');
+      console.log('🗺️ [ISOLATED GLOBE] Map loaded, adding markers...');
+
+      // Calculate bounds to fit all markers
+      const bounds = new mapboxgl.LngLatBounds();
+      let hasValidCoordinates = false;
       projects.forEach((project, index) => {
-        console.log("\uD83E\uDDEA [DEBUG TEST] Processing project ".concat(index, ":"), project);
+        console.log("\uD83D\uDCCD [ISOLATED GLOBE] Adding marker ".concat(index, ":"), project);
 
-        // Create simple marker
+        // Create marker element
         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)';
+        el.style.boxShadow = '0px 3.45px 3.45px 0px #00000029';
+        el.style.display = 'flex';
+        el.style.alignItems = 'center';
+        el.style.justifyContent = 'center';
+        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';
+          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
+        const popupContent = "\n          <div style=\"padding: 12px; min-width: 200px;\">\n            <h3 style=\"margin: 0 0 8px 0; font-size: 16px; color: #333;\">".concat(project.name, "</h3>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Country:</strong> ").concat(project.country || 'N/A', "\n            </p>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Sector:</strong> ").concat(project.sectoralScope || 'Project', "\n            </p>\n            <p style=\"margin: 0 0 4px 0; font-size: 12px; color: #666;\">\n              <strong>Completion:</strong> ").concat(project.percentageCompletion || 0, "%\n            </p>\n            <p style=\"margin: 4px 0 0 0; font-size: 12px; color: #666;\">\n              <strong>Coordinates:</strong> ").concat(Number(project.latitude).toFixed(4), ", ").concat(Number(project.longitude).toFixed(4), "\n            </p>\n          </div>\n        ");
+
+        // Create popup
+        const popup = new mapboxgl.Popup({
+          offset: 25,
+          closeButton: true,
+          closeOnClick: false
+        }).setHTML(popupContent);
 
-        // Get coordinates
+        // Ensure coordinates are valid numbers
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
-        console.log("\uD83E\uDDEA [DEBUG TEST] Coordinates for ".concat(project.name, ":"), {
+        console.log("\uD83D\uDCCD [ISOLATED GLOBE] Marker ".concat(index, " coordinates:"), {
           original: {
             longitude: project.longitude,
             latitude: project.latitude
@@ -21313,46 +21327,69 @@ const SimpleGlobeTestDebug = _ref => {
             lng,
             lat
           },
-          valid: !isNaN(lng) && !isNaN(lat) && lng >= -180 && lng <= 180 && lat >= -90 && lat <= 90
+          project: project.name
         });
+
+        // Validate coordinates
         if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error("\u274C [DEBUG TEST] Invalid coordinates for ".concat(project.name, ":"), {
+          console.error("\u274C [ISOLATED GLOBE] Invalid coordinates for project ".concat(index, ":"), {
             lng,
-            lat
+            lat,
+            original: {
+              longitude: project.longitude,
+              latitude: project.latitude
+            },
+            project: project.name
           });
           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 coordinates to bounds
+        bounds.extend([lng, lat]);
+        hasValidCoordinates = true;
 
-        // Add marker with explicit positioning
+        // Create 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
+        // Add click handler
+        el.addEventListener('click', () => {
+          console.log('📍 [ISOLATED GLOBE] Marker clicked:', project);
+          onProjectClick(project);
+        });
+
+        // Verify marker position after a short 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, ":"), {
+          console.log("\uD83D\uDD0D [ISOLATED GLOBE] Marker ".concat(index, " position verification:"), {
             expected: [lng, lat],
             actual: [markerLngLat.lng, markerLngLat.lat],
-            match: positionMatch,
-            difference: {
-              lng: Math.abs(markerLngLat.lng - lng),
-              lat: Math.abs(markerLngLat.lat - lat)
-            }
+            project: project.name,
+            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
           });
-          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]);
+        }, 100);
+        console.log("\u2705 [ISOLATED 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('🗺️ [ISOLATED 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) {
@@ -21360,36 +21397,14 @@ const SimpleGlobeTestDebug = _ref => {
         map.current = null;
       }
     };
-  }, [projects]);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  }, [projects, onProjectClick, mapConfig]);
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    ref: mapContainer,
     style: {
       width: '100%',
-      height: '600px',
-      border: '2px solid #ccc',
+      height: '100%',
       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"]
-    })]
+    }
   });
 };
 
@@ -62173,6 +62188,7 @@ exports.InformationChannelsDataPoint = DataPoint;
 exports.InformationChannelsSubject = Subject;
 exports.InformationChannelsView = InformationChannel;
 exports.InformationUnavailable = InformationUnavailable;
+exports.IsolatedGlobe = IsolatedGlobe;
 exports.KeyIndicators = KeyIndicatorsWidget$1;
 exports.KeyIndicatorsDetails = KeyIndicatorsDetails;
 exports.LineChart = LineChart;
@@ -62216,7 +62232,6 @@ 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;