datastake-daf 0.6.273 → 0.6.274

package/dist/components/index.js

@@ -17106,13 +17106,13 @@ const renderTooltipJsx = ({
               }
             })
           }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-            title: item.label,
+            title: item.tooltipLabel || item.label,
             children: /*#__PURE__*/jsxRuntime.jsx("span", {
               className: "daf-tooltip-name",
               children: item.label
             })
           }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-            title: item.value,
+            title: item.tooltipValue || item.value,
             children: /*#__PURE__*/jsxRuntime.jsx("div", {
               style: {
                 height: "20px",
@@ -19363,22 +19363,38 @@ const Style$A = dt.div`
     height: 100%; 
   }
 
-  /* Narrow marker styling used by legacy components; avoid width/height overrides for SimpleGlobe */
   .map-marker {
     text-align: center;
+    width 100%;
+    height: 100%;
     border-radius: 50% 50% 50% 0;
 
     span {
       color: white;
     }
 
-    &.rounded { border-radius: 100%; }
-    &.incident { border-radius: 100%; }
-    &.marker { background: var(--color-primary-70); border: 1px solid white; box-shadow: 0px 3.45px 3.45px 0px #00000029; }
-  }
+    &.rounded {
+      border-radius: 100%;
+    }
 
-  /* Scoped class used by SimpleGlobe to avoid picking up broad .map-marker rules */
-  .daf-globe-marker { text-align: center; }
+    &.incident {
+      border-radius: 100%;
+
+      .main {
+        border-radius: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+    }
+
+    &.marker {
+      background: var(--color-primary-70);
+      border: 1px solid white;
+      box-shadow: 0px 3.45px 3.45px 0px #00000029;
+    }
+  }
 
   #globe {
     flex: 1;
@@ -19912,26 +19928,14 @@ const useGlobe = ({
   const addedSources = React.useRef(new Set());
   const isMounted = React.useRef(true);
   const addAllDataToMap = React.useCallback(() => {
-    console.log('🚀 [GLOBE HOOK] addAllDataToMap called');
-    console.log('🚀 [GLOBE HOOK] data:', data);
-    console.log('🚀 [GLOBE HOOK] mapRef exists:', !!mapRef);
-    console.log('🚀 [GLOBE HOOK] style loaded:', mapRef?.isStyleLoaded());
-    if (!data || !mapRef) {
-      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - missing data or mapRef');
-      return;
-    }
-    if (!mapRef.isStyleLoaded()) {
-      console.log('⏳ [GLOBE HOOK] Style not loaded yet, retrying in 100ms...');
-      setTimeout(() => {
-        addAllDataToMap();
-      }, 100);
+    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
       return;
     }
+
+    // Prevent multiple calls with empty data
     if (data.length === 0) {
-      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - no data');
       return;
     }
-    console.log('✅ [GLOBE HOOK] Starting to add markers to map...');
 
     // Clear existing markers using functional update to avoid dependency issues
     setMapMarkers(currentMarkers => {
@@ -19983,13 +19987,8 @@ const useGlobe = ({
     if (data && mapRef) {
       const newMarkers = [];
       const maxTotal = Math.max(...(data || []).map(d => d.total || 0));
-      console.log('🎯 [GLOBE HOOK] Processing data items:', data.length);
       data.forEach((d, i) => {
-        console.log(`🎯 [GLOBE HOOK] Processing item ${i}:`, d);
-        console.log(`🎯 [GLOBE HOOK] Item ${i} marker:`, d?.marker);
-        console.log(`🎯 [GLOBE HOOK] Item ${i} lat/lng:`, d?.marker?.lat, d?.marker?.lng);
         if (d?.marker?.lat && d?.marker?.lng) {
-          console.log(`✅ [GLOBE HOOK] Item ${i} has valid coordinates, creating marker...`);
           let marker;
           let iconClassName = "";
           let iconSize = [25, 25];
@@ -20069,7 +20068,6 @@ const useGlobe = ({
             el.style.fontWeight = 'bold';
             el.innerHTML = `<span>${d.total || 0}</span>`;
             marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
-            console.log(`🎉 [GLOBE HOOK] Marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           } else if (type === "territory") {
             // Handle territory polygons
             if (d.area && Array.isArray(d.area)) {
@@ -20139,7 +20137,6 @@ const useGlobe = ({
             }));
             roots.current.push(root);
             marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
-            console.log(`🎉 [GLOBE HOOK] Default marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           }
 
           // Add click handler
@@ -20173,7 +20170,6 @@ const useGlobe = ({
       mapboxgl.accessToken = MAP_TOKEN;
 
       // Create the map with Mapbox GL JS - 3D globe
-      console.log('🗺️ [GLOBE HOOK] Creating map with style:', STYLE_URL);
       const map = new mapboxgl.Map({
         container: container.current,
         style: STYLE_URL,
@@ -20192,13 +20188,8 @@ const useGlobe = ({
 
       // Configure the map when style loads
       map.on('style.load', () => {
-        console.log('🎨 [GLOBE HOOK] Style loaded event triggered');
-        console.log('🎨 [GLOBE HOOK] Map style loaded:', map.isStyleLoaded());
-
         // Wait a bit for the style to fully load
         setTimeout(() => {
-          console.log('🎨 [GLOBE HOOK] After timeout - Map style loaded:', map.isStyleLoaded());
-
           // Set fog for the space background effect with stars - simplified to avoid errors
           try {
             map.setFog({
@@ -20294,10 +20285,9 @@ const useGlobe = ({
 
       // Add navigation controls
       map.addControl(new mapboxgl.NavigationControl(), 'top-right');
-      console.log('🗺️ [GLOBE HOOK] Map created successfully');
       return map;
     } catch (error) {
-      console.error('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
+      console.error('Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -20310,12 +20300,9 @@ const useGlobe = ({
   // }, [initialMarkerSetIsDone]);
 
   React.useEffect(() => {
-    console.log('🔄 [GLOBE HOOK] useEffect for map creation - mapRef:', !!mapRef);
     if (!mapRef) {
-      console.log('🔄 [GLOBE HOOK] Creating map instance...');
       const instance = createInstance();
       if (instance) {
-        console.log('🔄 [GLOBE HOOK] Map instance created, setting mapRef');
         setMapRef(instance);
 
         // Add comprehensive resize detection for Mapbox GL JS responsiveness
@@ -20396,22 +20383,14 @@ const useGlobe = ({
     }
   }, [polygon, mapRef]);
   React.useEffect(() => {
-    console.log('📥 [GLOBE HOOK] allData received:', allData);
-    console.log('📥 [GLOBE HOOK] allData length:', allData?.length);
     if (allData) {
       if (allData.length === 0) {
-        console.log('⚠️ [GLOBE HOOK] Empty data array');
         setEmptyStateIsVisible(true);
       } else if (emptyStateIsVisible) {
         setEmptyStateIsVisible(false);
       }
-      console.log('🔍 [GLOBE HOOK] Filtering data with filterValidGPS...');
-      const filteredData = filterValidGPS(allData);
-      console.log('🔍 [GLOBE HOOK] filtered data result:', filteredData);
-      console.log('🔍 [GLOBE HOOK] filtered data length:', filteredData.length);
-      setData(filteredData);
+      setData(filterValidGPS(allData));
     } else {
-      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -20441,19 +20420,7 @@ const useGlobe = ({
     }
   }, [user, mapRef, allData]);
   React.useEffect(() => {
-    console.log('🔄 [GLOBE HOOK] useEffect triggered:', {
-      mapRef: !!mapRef,
-      data: !!data,
-      dataLength: data?.length,
-      initialMarkerSetIsDone,
-      styleLoaded: mapRef?.isStyleLoaded()
-    });
-    if (mapRef && data && !initialMarkerSetIsDone) {
-      console.log('🚀 [GLOBE HOOK] Attempting to add markers...');
-      console.log('🚀 [GLOBE HOOK] Style loaded check:', mapRef.isStyleLoaded());
-
-      // Try to add markers immediately, and if style isn't loaded, 
-      // the addAllDataToMap function will handle it
+    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
       setInitialMarkerSetIsDone(true);
       addAllDataToMap();
     }
@@ -20666,7 +20633,7 @@ function Globe(_ref) {
     renderSider = null,
     renderMarker = null,
     type = "default",
-    showSider = false,
+    showSider = true,
     filtersConfig,
     onFilterChange = () => {},
     isSatellite = false,
@@ -20676,29 +20643,15 @@ function Globe(_ref) {
     onUnmount
   } = _ref;
   // Map data to include marker coordinates
-  const mappedData = React.useMemo(() => {
-    console.log('📊 [GLOBE COMPONENT] Original data received:', data);
-    console.log('📊 [GLOBE COMPONENT] Data length:', data === null || data === void 0 ? void 0 : data.length);
-    if (!data || data.length === 0) {
-      console.log('❌ [GLOBE COMPONENT] No data to map');
-      return [];
-    }
-    const mapped = data.map((d, i) => {
-      var _d$gps, _d$gps2;
-      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Mapping item ".concat(i, ":"), d);
-      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " GPS:"), d === null || d === void 0 ? void 0 : d.gps);
-      const result = _objectSpread2(_objectSpread2({}, d), {}, {
-        marker: {
-          lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
-          lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
-        }
-      });
-      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " mapped result:"), result);
-      return result;
+  const mappedData = React.useMemo(() => data.map(d => {
+    var _d$gps, _d$gps2;
+    return _objectSpread2(_objectSpread2({}, d), {}, {
+      marker: {
+        lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
+        lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
+      }
     });
-    console.log('📊 [GLOBE COMPONENT] Final mapped data:', mapped);
-    return mapped;
-  }, [data]);
+  }), [data]);
 
   // Get resize context for sidebar state changes
   const {
@@ -20882,183 +20835,6 @@ Globe.propTypes = {
   nameAsSiderTitle: PropTypes__default["default"].bool
 };
 
-const SimpleGlobe = _ref => {
-  let {
-    projects = [],
-    mapConfig = {},
-    showSider = false,
-    onProjectClick = () => {},
-    type = "default",
-    color = "var(--color-primary-60)"
-  } = _ref;
-  const mapContainer = React.useRef(null);
-  const map = 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      ";
-      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) => {
-        var _project$author;
-        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 the same structure as minesitemap
-        const popupContent = "\n          <div class=\"daf-tooltip-cont\">\n            <div class=\"daf-tooltip-head\">\n              <div class=\"daf-tooltip-title\">\n                <div>\n                  <h4>".concat(project.name, "</h4>\n                  <h5>").concat(project.sectoralScope || 'Project', "</h5>\n                </div>\n              </div>\n            </div>\n            <div class=\"daf-tooltip-list\">\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Country</span>\n                <span class=\"daf-tooltip-value\">").concat(project.country || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Completion</span>\n                <span class=\"daf-tooltip-value\">").concat(project.percentageCompletion || 0, "%</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">Author</span>\n                <span class=\"daf-tooltip-value\">").concat(((_project$author = project.author) === null || _project$author === void 0 ? void 0 : _project$author.name) || 'N/A', "</span>\n              </div>\n              <div class=\"daf-tooltip-list-item\">\n                <span class=\"daf-tooltip-name\">ID</span>\n                <span class=\"daf-tooltip-value\">").concat(project.datastakeId || 'N/A', "</span>\n              </div>\n            </div>\n          </div>\n        ");
-
-        // 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
-        });
-
-        // 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
-          });
-          return;
-        }
-
-        // Add coordinates to bounds
-        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);
-
-        // Add click handler
-        el.addEventListener('click', () => {
-          console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
-          onProjectClick(project);
-        });
-        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
-        });
-      }
-    });
-    return () => {
-      if (map.current) {
-        map.current.remove();
-        map.current = null;
-      }
-    };
-  }, [projects, onProjectClick, mapConfig]);
-  return /*#__PURE__*/jsxRuntime.jsx(Style$A, {
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: mapContainer,
-      style: {
-        width: '100%',
-        height: '500px',
-        overflow: 'hidden',
-        position: 'relative'
-      }
-    })
-  });
-};
-
 function WidgetPlaceholder(_ref) {
   let {
     icon = "",
@@ -61832,7 +61608,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/dist/utils/index.js

@@ -3479,13 +3479,13 @@ const renderTooltipJsx = ({
               }
             })
           }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-            title: item.label,
+            title: item.tooltipLabel || item.label,
             children: /*#__PURE__*/jsxRuntime.jsx("span", {
               className: "daf-tooltip-name",
               children: item.label
             })
           }), /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
-            title: item.value,
+            title: item.tooltipValue || item.value,
             children: /*#__PURE__*/jsxRuntime.jsx("div", {
               style: {
                 height: "20px",

package/package.json

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

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

@@ -2,7 +2,7 @@ import Globe from "./index";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
-import * as configs from "./storyConfig";
+import * as configs from "../Map/storyConfig";
 
 export default {
 	title: "Dashboard/Globe",
@@ -29,14 +29,14 @@ export default {
 export const DefaultGlobe = {
 	name: "Default Globe",
 	args: {
-		...configs.DefaultGlobeConfig,
+		...configs.DefaultMapConfig,
 	},
 };
 
 export const SatelliteGlobe = {
 	name: "Satellite Globe",
 	args: {
-		...configs.DefaultGlobeConfig,
+		...configs.DefaultMapConfig,
 		isSatellite: true,
 	},
 };
@@ -44,19 +44,11 @@ export const SatelliteGlobe = {
 export const TerritoryGlobe = {
 	name: "Territory Globe",
 	args: {
-		...configs.TerritoryGlobeConfig,
+		...configs.TerritoryMapConfig,
 		type: "territory",
 	},
 };
 
-export const StakeholderGlobe = {
-	name: "Stakeholder Globe",
-	args: {
-		...configs.StakeholderGlobeConfig,
-		type: "stakeholder",
-	},
-};
-
 export const EventGlobe = {
 	name: "Event Globe",
 	args: {
@@ -65,27 +57,10 @@ export const EventGlobe = {
 	},
 };
 
-export const ChainGlobe = {
-	name: "Supply Chain Globe",
-	args: {
-		...configs.ChainGlobeConfig,
-		type: "chain",
-	},
-};
-
 export const LocationGlobe = {
 	name: "Location Globe",
 	args: {
-		...configs.DefaultGlobeConfig,
+		...configs.DefaultMapConfig,
 		type: "location",
 	},
 };
-
-export const ProjectGlobe = {
-	name: "Project Globe",
-	args: {
-		...configs.ProjectGlobeConfig,
-		type: "project",
-	},
-};
-