datastake-daf 0.6.273 → 0.6.274

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

@@ -48,30 +48,15 @@ export const useGlobe = ({
   const isMounted = useRef(true);
 
   const addAllDataToMap = 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 => {
@@ -123,14 +108,8 @@ export const useGlobe = ({
       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 innerHtml = "";
@@ -233,8 +212,6 @@ export const useGlobe = ({
               .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
@@ -320,8 +297,6 @@ export const useGlobe = ({
               .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
@@ -355,7 +330,6 @@ export 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,
@@ -374,13 +348,9 @@ export 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({
@@ -475,10 +445,9 @@ export 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;
     }
   }, []);
@@ -491,13 +460,10 @@ export const useGlobe = ({
   // }, [initialMarkerSetIsDone]);
 
   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
@@ -586,24 +552,15 @@ export const useGlobe = ({
   }, [polygon, mapRef]);
 
   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]);
@@ -634,20 +591,7 @@ export const useGlobe = ({
   }, [user, mapRef, allData]);
 
   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();
     }

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

@@ -111,7 +111,7 @@ function Globe({
 	renderSider = null,
 	renderMarker = null,
 	type = "default",
-	showSider = false,
+	showSider = true,
 	filtersConfig,
 	onFilterChange = () => { },
 	isSatellite = false,
@@ -122,29 +122,11 @@ function Globe({
 }) {
 	// Map data to include marker coordinates
 	const mappedData = useMemo(
-		() => {
-			console.log('📊 [GLOBE COMPONENT] Original data received:', data);
-			console.log('📊 [GLOBE COMPONENT] Data length:', data?.length);
-			
-			if (!data || data.length === 0) {
-				console.log('❌ [GLOBE COMPONENT] No data to map');
-				return [];
-			}
-			
-			const mapped = data.map((d, i) => {
-				console.log(`📊 [GLOBE COMPONENT] Mapping item ${i}:`, d);
-				console.log(`📊 [GLOBE COMPONENT] Item ${i} GPS:`, d?.gps);
-				const result = {
-					...d,
-					marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-				};
-				console.log(`📊 [GLOBE COMPONENT] Item ${i} mapped result:`, result);
-				return result;
-			});
-			
-			console.log('📊 [GLOBE COMPONENT] Final mapped data:', mapped);
-			return mapped;
-		},
+		() =>
+			data.map((d) => ({
+				...d,
+				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+			})),
 		[data],
 	);
 

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

@@ -59,22 +59,38 @@ const Style = styled.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%;
+    }
+
+    &.incident {
+      border-radius: 100%;
 
-  /* Scoped class used by SimpleGlobe to avoid picking up broad .map-marker rules */
-  .daf-globe-marker { text-align: center; }
+      .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;

package/src/@daf/utils/tooltip.js

@@ -154,11 +154,11 @@ export const renderTooltipJsx = ({
                     />
                   </div>
                 )}
-                <Tooltip title={item.label}>
+                <Tooltip title={item.tooltipLabel || item.label}>
                   <span className="daf-tooltip-name">{item.label}</span>
                 </Tooltip>
 
-                <Tooltip title={item.value}>
+                <Tooltip title={item.tooltipValue || item.value}>
                   <div
                     style={{
                       height: "20px",

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 WidgetPlaceholder } from "./@daf/core/components/Dashboard/Widget/WidgetPlaceholder/index.jsx";
 export { default as Steps } from "./@daf/core/components/Dashboard/Steps/index.jsx";
 export { default as DashboardLayout } from "./@daf/core/components/Dashboard/DashboardLayout/index.jsx";

package/src/@daf/core/components/Dashboard/Globe/README.md

@@ -1,106 +0,0 @@
-# SimpleGlobe Component
-
-A simplified wrapper for the Globe component that makes it easy to display project data as pins on a 3D globe.
-
-## Features
-
-- 🗺️ **3D Globe Visualization**: Interactive 3D globe using Mapbox GL JS
-- 📍 **Pin-based Display**: Projects are displayed as clickable pins on the globe
-- 🎯 **Simple Integration**: Just pass your project data and it works
-- 📊 **Rich Tooltips**: Hover over pins to see project details
-- 🎨 **Customizable**: Support for custom map configurations
-
-## Quick Start
-
-```jsx
-import SimpleGlobe from './SimpleGlobe';
-
-const MyComponent = () => {
-  const projects = [
-    {
-      name: "Solar Project",
-      latitude: 14.7167,
-      longitude: -17.4677,
-      percentageCompletion: 75,
-      projectDescription: "Large-scale solar energy project"
-    }
-  ];
-
-  return (
-    <div style={{ width: '100%', height: '600px' }}>
-      <SimpleGlobe 
-        projects={projects}
-        onProjectClick={(project) => console.log('Clicked:', project)}
-      />
-    </div>
-  );
-};
-```
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `projects` | `Array` | `[]` | Array of project objects |
-| `mapConfig` | `Object` | `{}` | Map configuration options |
-| `showSider` | `boolean` | `false` | Whether to show the sidebar |
-| `onProjectClick` | `Function` | `() => {}` | Callback when a project pin is clicked |
-
-## Project Data Format
-
-Your project objects should have the following structure:
-
-```javascript
-{
-  _id: "unique-id",                    // Optional: Unique identifier
-  name: "Project Name",                // Required: Project name
-  latitude: 14.7167,                  // Required: Latitude coordinate
-  longitude: -17.4677,                 // Required: Longitude coordinate
-  projectDescription: "Description",   // Optional: Project description
-  country: "SN",                       // Optional: Country code
-  sectoralScope: "energy",            // Optional: Project sector
-  percentageCompletion: 75,             // Optional: Completion percentage
-  author: { name: "Author Name" }      // Optional: Author information
-}
-```
-
-## Examples
-
-### Basic Usage
-```jsx
-<SimpleGlobe projects={myProjects} />
-```
-
-### With Sidebar
-```jsx
-<SimpleGlobe 
-  projects={myProjects} 
-  showSider={true} 
-/>
-```
-
-### With Custom Configuration
-```jsx
-<SimpleGlobe 
-  projects={myProjects}
-  mapConfig={{
-    maxZoom: 8,
-    minZoom: 2
-  }}
-  onProjectClick={(project) => {
-    // Handle project click
-    console.log('Project clicked:', project);
-  }}
-/>
-```
-
-## Storybook
-
-You can see all examples in Storybook under "Dashboard/Globe/SimpleGlobe".
-
-## Notes
-
-- The component automatically transforms your project data to the format expected by the underlying Globe component
-- Pins are displayed as circular markers with project completion percentage
-- Tooltips show project details when hovering over pins
-- The globe is fully interactive - you can zoom, pan, and rotate

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

@@ -1,259 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import Style from './style';
-
-/**
- * SimpleGlobe - A simplified wrapper for the Globe component
- * 
- * This component makes it easy to display project data as pins on a 3D globe.
- * Just pass your project data and it will automatically create pins at the specified locations.
- * 
- * @param {Array} projects - Array of project objects with location data
- * @param {string} projects[].name - Project name
- * @param {number} projects[].latitude - Latitude coordinate
- * @param {number} projects[].longitude - Longitude coordinate
- * @param {string} projects[].description - Project description (optional)
- * @param {string} projects[].country - Country code (optional)
- * @param {string} projects[].sectoralScope - Project sector (optional)
- * @param {number} projects[].percentageCompletion - Completion percentage (optional)
- * @param {Object} projects[].author - Author information (optional)
- * @param {Object} mapConfig - Map configuration options (optional)
- * @param {boolean} showSider - Whether to show the sidebar (default: false)
- * @param {Function} onProjectClick - Callback when a project pin is clicked
- * @param {string} type - Marker type: "default" for circular markers, "location" for map pin markers
- * @param {string} color - Marker color (default: "var(--color-primary-60)")
- */
-const SimpleGlobe = ({ 
-  projects = [], 
-  mapConfig = {},
-  showSider = false,
-  onProjectClick = () => {},
-  type = "default",
-  color = "var(--color-primary-60)"
-}) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-
-  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
-      const mapContainer = map.current.getContainer();
-      const style = document.createElement('style');
-      style.textContent = `
-        .mapboxgl-ctrl-logo,
-        .mapboxgl-ctrl-attrib,
-        .mapboxgl-ctrl-bottom-left,
-        .mapboxgl-ctrl-bottom-right {
-          display: none !important;
-        }
-        .mapboxgl-canvas-container {
-          overflow: hidden !important;
-        }
-        .mapboxgl-canvas {
-          overflow: hidden !important;
-        }
-      `;
-      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(`📍 [SIMPLE GLOBE] Adding marker ${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 = `
-            <svg
-              width="28"
-              height="33"
-              viewBox="0 0 28 33"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                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"
-                fill="${color}"
-                stroke="white"
-              />
-            </svg>
-          `;
-        } 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;">${project.percentageCompletion || 0}</span>`;
-        }
-
-        // Create popup content using the same structure as minesitemap
-        const popupContent = `
-          <div class="daf-tooltip-cont">
-            <div class="daf-tooltip-head">
-              <div class="daf-tooltip-title">
-                <div>
-                  <h4>${project.name}</h4>
-                  <h5>${project.sectoralScope || 'Project'}</h5>
-                </div>
-              </div>
-            </div>
-            <div class="daf-tooltip-list">
-              <div class="daf-tooltip-list-item">
-                <span class="daf-tooltip-name">Country</span>
-                <span class="daf-tooltip-value">${project.country || 'N/A'}</span>
-              </div>
-              <div class="daf-tooltip-list-item">
-                <span class="daf-tooltip-name">Completion</span>
-                <span class="daf-tooltip-value">${project.percentageCompletion || 0}%</span>
-              </div>
-              <div class="daf-tooltip-list-item">
-                <span class="daf-tooltip-name">Author</span>
-                <span class="daf-tooltip-value">${project.author?.name || 'N/A'}</span>
-              </div>
-              <div class="daf-tooltip-list-item">
-                <span class="daf-tooltip-name">ID</span>
-                <span class="daf-tooltip-value">${project.datastakeId || 'N/A'}</span>
-              </div>
-            </div>
-          </div>
-        `;
-
-        // 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(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { lng, lat });
-        
-        // 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 });
-          return;
-        }
-
-        // Add coordinates to bounds
-        bounds.extend([lng, lat]);
-        hasValidCoordinates = true;
-
-        // Add marker to map with proper coordinate order [lng, lat]
-        const marker = 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(`✅ [SIMPLE GLOBE] Marker ${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 (
-    <Style>
-      <div 
-        ref={mapContainer} 
-        style={{ 
-          width: '100%', 
-          height: '500px',
-          overflow: 'hidden',
-          position: 'relative'
-        }} 
-      />
-    </Style>
-  );
-};
-
-export default SimpleGlobe;