datastake-daf 0.6.272 → 0.6.273

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

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+const SimpleGlobeDebug = ({ projects = [] }) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+
+  useEffect(() => {
+    if (map.current) return; // Initialize map only once
+
+    // Set Mapbox access token
+    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
+
+    console.log('🗺️ [DEBUG] Creating map...');
+    
+    // Create map
+    map.current = new mapboxgl.Map({
+      container: mapContainer.current,
+      style: 'mapbox://styles/mapbox/satellite-v9',
+      center: [0, 0],
+      zoom: 3,
+      projection: 'globe'
+    });
+
+    // Add markers when map loads
+    map.current.on('load', () => {
+      console.log('🗺️ [DEBUG] Map loaded, adding markers...');
+      
+      projects.forEach((project, index) => {
+        console.log(`📍 [DEBUG] Adding marker ${index}:`, project);
+        
+        // Create marker element
+        const el = document.createElement('div');
+        el.className = 'mapboxgl-marker';
+        el.style.width = '20px';
+        el.style.height = '20px';
+        el.style.backgroundColor = '#00809E';
+        el.style.borderRadius = '50%';
+        el.style.border = '2px solid white';
+        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';
+        el.style.color = 'white';
+        el.style.fontWeight = 'bold';
+        el.innerHTML = `<span>${project.percentageCompletion || 0}</span>`;
+
+        // Create popup
+        const popup = new mapboxgl.Popup({ offset: 25 })
+          .setHTML(`
+            <div>
+              <h3>${project.name}</h3>
+              <p>${project.projectDescription || 'No description'}</p>
+              <p>Completion: ${project.percentageCompletion || 0}%</p>
+            </div>
+          `);
+
+        // Add marker to map
+        new mapboxgl.Marker(el)
+          .setLngLat([project.longitude, project.latitude])
+          .setPopup(popup)
+          .addTo(map.current);
+          
+        console.log(`✅ [DEBUG] Marker ${index} added at:`, [project.longitude, project.latitude]);
+      });
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
+      <div ref={mapContainer} style={{ width: '100%', height: '100%' }} />
+    </div>
+  );
+};
+
+export default SimpleGlobeDebug;

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import SimpleGlobe from './SimpleGlobe';
+
+// Your sample project data
+const SAMPLE_PROJECTS = [
+  {
+    _id: "sample-1",
+    name: "Dakar Solar Initiative",
+    country: "SN",
+    datastakeId: "PRJ-SAMPLE-001",
+    sectoralScope: "energy",
+    percentageCompletion: 75,
+    projectDescription: "Large-scale solar energy project in Dakar region",
+    latitude: 14.7167,
+    longitude: -17.4677,
+    author: { name: "Dakar Energy Co." }
+  },
+  {
+    _id: "sample-2", 
+    name: "Saint-Louis Wind Farm",
+    country: "SN",
+    datastakeId: "PRJ-SAMPLE-002",
+    sectoralScope: "energy",
+    percentageCompletion: 45,
+    projectDescription: "Wind energy project in Saint-Louis region",
+    latitude: 16.0167,
+    longitude: -16.4833,
+    author: { name: "Wind Power Solutions" }
+  },
+  {
+    _id: "sample-3",
+    name: "Casamance Reforestation",
+    country: "SN", 
+    datastakeId: "PRJ-SAMPLE-003",
+    sectoralScope: "agricultureForestryAndOtherLandUse",
+    percentageCompletion: 60,
+    projectDescription: "Forest restoration project in Casamance region",
+    latitude: 12.5833,
+    longitude: -16.2667,
+    author: { name: "Green Casamance" }
+  }
+];
+
+/**
+ * SimpleGlobeExample - Example usage of the SimpleGlobe component
+ * 
+ * This shows how easy it is to display your project data as pins on a 3D globe.
+ * Just pass your project array to the SimpleGlobe component!
+ */
+const SimpleGlobeExample = () => {
+  const handleProjectClick = (projectData) => {
+    console.log('Project clicked:', projectData);
+    // You can add your custom logic here, like:
+    // - Navigate to project details page
+    // - Show project information in a modal
+    // - Update application state
+    alert(`Clicked on: ${projectData.name}\nCompletion: ${projectData.percentageCompletion}%`);
+  };
+
+  return (
+    <div style={{ width: '100%', height: '600px' }}>
+      <SimpleGlobe
+        projects={SAMPLE_PROJECTS}
+        showSider={true}
+        onProjectClick={handleProjectClick}
+        mapConfig={{
+          maxZoom: 8,
+          minZoom: 2
+        }}
+      />
+    </div>
+  );
+};
+
+export default SimpleGlobeExample;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import SimpleGlobe from './SimpleGlobe';
+
+// Test with a simple, known working dataset
+const TEST_PROJECTS = [
+  {
+    _id: "test-1",
+    name: "Test Project 1",
+    latitude: 14.7167,
+    longitude: -17.4677,
+    percentageCompletion: 75,
+    projectDescription: "Test project in Dakar"
+  },
+  {
+    _id: "test-2", 
+    name: "Test Project 2",
+    latitude: 16.0167,
+    longitude: -16.4833,
+    percentageCompletion: 45,
+    projectDescription: "Test project in Saint-Louis"
+  }
+];
+
+const SimpleGlobeTest = () => {
+  console.log('🧪 [SIMPLE GLOBE TEST] Test projects:', TEST_PROJECTS);
+
+  const handleProjectClick = (projectData) => {
+    console.log('🧪 [SIMPLE GLOBE TEST] Project clicked:', projectData);
+    alert(`Clicked: ${projectData.name} at ${projectData.gps?.latitude}, ${projectData.gps?.longitude}`);
+  };
+
+  return (
+    <div style={{ width: '100%', height: '600px', border: '2px solid #ccc' }}>
+      <h3>SimpleGlobe Test</h3>
+      <SimpleGlobe
+        projects={TEST_PROJECTS}
+        showSider={true}
+        onProjectClick={handleProjectClick}
+        mapConfig={{
+          maxZoom: 8,
+          minZoom: 2
+        }}
+      />
+    </div>
+  );
+};
+
+export default SimpleGlobeTest;

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

@@ -48,15 +48,30 @@ export const useGlobe = ({
   const isMounted = useRef(true);
 
   const addAllDataToMap = useCallback(() => {
-
-    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
+    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);
       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 => {
@@ -108,8 +123,14 @@ 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 = "";
@@ -212,6 +233,8 @@ 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
@@ -297,6 +320,8 @@ 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
@@ -330,6 +355,7 @@ 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,
@@ -348,9 +374,13 @@ 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({
@@ -445,9 +475,10 @@ 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('Error creating Mapbox GL JS globe:', error);
+      console.error('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -460,10 +491,13 @@ 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
@@ -552,15 +586,24 @@ 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);
       }
-      setData(filterValidGPS(allData));
+      
+      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);
     } else {
+      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -591,7 +634,20 @@ export const useGlobe = ({
   }, [user, mapRef, allData]);
 
   useEffect(() => {
-    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
+    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
       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 = true,
+	showSider = false,
 	filtersConfig,
 	onFilterChange = () => { },
 	isSatellite = false,
@@ -122,11 +122,29 @@ function Globe({
 }) {
 	// Map data to include marker coordinates
 	const mappedData = useMemo(
-		() =>
-			data.map((d) => ({
-				...d,
-				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-			})),
+		() => {
+			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],
 	);
 

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

@@ -0,0 +1,243 @@
+import { storyConfig as EventConfig } from "./storyConfig1.js";
+// Create default configs since the other files were deleted
+const DefaultGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 40.7128, longitude: -74.0060 },
+			name: "New York City",
+			description: "Major metropolitan area in the United States",
+			total: 15,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 51.5074, longitude: -0.1278 },
+			name: "London",
+			description: "Capital of the United Kingdom",
+			total: 12,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 35.6762, longitude: 139.6503 },
+			name: "Tokyo",
+			description: "Capital of Japan",
+			total: 8,
+			sources: 1,
+		},
+		{
+			gps: { latitude: -33.8688, longitude: 151.2093 },
+			name: "Sydney",
+			description: "Major city in Australia",
+			total: 6,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -22.9068, longitude: -43.1729 },
+			name: "Rio de Janeiro",
+			description: "Major city in Brazil",
+			total: 10,
+			sources: 1,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "City", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const TerritoryGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 39.9042, longitude: 116.4074 },
+			name: "Beijing Territory",
+			description: "Administrative region in China",
+			total: 25,
+			sources: 4,
+		},
+		{
+			gps: { latitude: 55.7558, longitude: 37.6176 },
+			name: "Moscow Region",
+			description: "Federal subject of Russia",
+			total: 18,
+			sources: 3,
+		},
+		{
+			gps: { latitude: -26.2041, longitude: 28.0473 },
+			name: "Gauteng Province",
+			description: "Province in South Africa",
+			total: 14,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 19.4326, longitude: -99.1332 },
+			name: "Mexico City Territory",
+			description: "Federal district in Mexico",
+			total: 20,
+			sources: 3,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Territory", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const StakeholderGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 48.8566, longitude: 2.3522 },
+			name: "Paris NGO",
+			description: "Environmental NGO in France",
+			total: 12,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 37.7749, longitude: -122.4194 },
+			name: "San Francisco Tech",
+			description: "Technology company in California",
+			total: 8,
+			sources: 1,
+		},
+		{
+			gps: { latitude: 1.3521, longitude: 103.8198 },
+			name: "Singapore Corp",
+			description: "Multinational corporation",
+			total: 15,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 52.5200, longitude: 13.4050 },
+			name: "Berlin Institute",
+			description: "Research institute in Germany",
+			total: 9,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -34.6037, longitude: -58.3816 },
+			name: "Buenos Aires Union",
+			description: "Labor union in Argentina",
+			total: 11,
+			sources: 1,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Stakeholder", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const ChainGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 23.1291, longitude: 113.2644 },
+			name: "Guangzhou Manufacturing",
+			description: "Electronics manufacturing hub in China",
+			total: 22,
+			sources: 4,
+		},
+		{
+			gps: { latitude: 12.9716, longitude: 77.5946 },
+			name: "Bangalore Tech Hub",
+			description: "Software development center in India",
+			total: 18,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 41.8781, longitude: -87.6298 },
+			name: "Chicago Logistics",
+			description: "Transportation and logistics hub in USA",
+			total: 16,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 25.2048, longitude: 55.2708 },
+			name: "Dubai Trade Center",
+			description: "International trade and commerce hub",
+			total: 14,
+			sources: 3,
+		},
+		{
+			gps: { latitude: -23.5505, longitude: -46.6333 },
+			name: "São Paulo Distribution",
+			description: "Distribution center in Brazil",
+			total: 12,
+			sources: 2,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Supply Chain Node", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const ProjectGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 6.5244, longitude: 3.3792 },
+			name: "Lagos Solar Project",
+			description: "Renewable energy project in Nigeria",
+			total: 8,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -1.2921, longitude: 36.8219 },
+			name: "Nairobi Water Initiative",
+			description: "Water management project in Kenya",
+			total: 12,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 13.7563, longitude: 100.5018 },
+			name: "Bangkok Green City",
+			description: "Urban sustainability project in Thailand",
+			total: 15,
+			sources: 4,
+		},
+		{
+			gps: { latitude: -12.0464, longitude: -77.0428 },
+			name: "Lima Education Hub",
+			description: "Educational development project in Peru",
+			total: 10,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 30.0444, longitude: 31.2357 },
+			name: "Cairo Infrastructure",
+			description: "Infrastructure development project in Egypt",
+			total: 14,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 55.7558, longitude: 37.6176 },
+			name: "Moscow Innovation Center",
+			description: "Technology innovation project in Russia",
+			total: 9,
+			sources: 2,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Project Name", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+export { DefaultGlobeConfig, TerritoryGlobeConfig, StakeholderGlobeConfig, EventConfig, ChainGlobeConfig, ProjectGlobeConfig };