datastake-daf 0.6.280 → 0.6.282

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

@@ -0,0 +1,301 @@
+import SimpleGlobe from "./SimpleGlobe";
+import SimpleGlobeDebug from "./SimpleGlobeDebug";
+import SimpleGlobeTestDebug from "./SimpleGlobeTestDebug";
+import ThemeLayout from "../../ThemeLayout";
+import Widget from "../Widget";
+
+// 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" }
+  },
+  {
+    _id: "sample-4",
+    name: "Lagos Tech Hub",
+    country: "NG",
+    datastakeId: "PRJ-SAMPLE-004",
+    sectoralScope: "technology",
+    percentageCompletion: 30,
+    projectDescription: "Technology innovation center in Lagos",
+    latitude: 6.5244,
+    longitude: 3.3792,
+    author: { name: "Lagos Tech Foundation" }
+  },
+  {
+    _id: "sample-5",
+    name: "Cairo Water Management",
+    country: "EG",
+    datastakeId: "PRJ-SAMPLE-005",
+    sectoralScope: "water",
+    percentageCompletion: 85,
+    projectDescription: "Water conservation project in Cairo",
+    latitude: 30.0444,
+    longitude: 31.2357,
+    author: { name: "Cairo Water Authority" }
+  }
+];
+
+export default {
+  title: "Dashboard/Globe/SimpleGlobe",
+  component: SimpleGlobe,
+  tags: ["autodocs"],
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: false,
+    onProjectClick: (project) => console.log('Project clicked:', project)
+  },
+  decorators: [
+    (Story) => (
+        <ThemeLayout>
+          <Widget title="Simple Globe with Project Pins" className="no-px no-pb-body">
+            <div style={{ width: '100%', height: '600px' }}>
+              <Story />
+            </div>
+          </Widget>
+        </ThemeLayout>
+    ),
+  ],
+};
+
+export const Default = {
+  name: "Default Project Globe",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: false
+  }
+};
+
+export const TestSimple = {
+  name: "Test Simple Data",
+  args: {
+    projects: [
+      {
+        name: "Test Project 1",
+        latitude: 14.7167,
+        longitude: -17.4677,
+        percentageCompletion: 75,
+        projectDescription: "Test project in Dakar"
+      },
+      {
+        name: "Test Project 2",
+        latitude: 16.0167,
+        longitude: -16.4833,
+        percentageCompletion: 45,
+        projectDescription: "Test project in Saint-Louis"
+      }
+    ],
+    showSider: true
+  }
+};
+
+export const WithSidebar = {
+  name: "With Sidebar",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true
+  }
+};
+
+export const CustomMapConfig = {
+  name: "Custom Map Configuration",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    mapConfig: {
+      maxZoom: 6,
+      minZoom: 2
+    }
+  }
+};
+
+export const SingleProject = {
+  name: "Single Project",
+  args: {
+    projects: [SAMPLE_PROJECTS[0]],
+    showSider: true
+  }
+};
+
+export const EmptyState = {
+  name: "Empty State",
+  args: {
+    projects: [],
+    showSider: false
+  }
+};
+
+export const LocationMarkers = {
+  name: "Location Markers (Map Pin Style)",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location"
+  }
+};
+
+export const CustomColorMarkers = {
+  name: "Custom Color Markers",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    color: "#FF6B6B"
+  }
+};
+
+export const LocationCustomColor = {
+  name: "Location Markers with Custom Color",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location",
+    color: "#4ECDC4"
+  }
+};
+
+export const CustomTooltip = {
+  name: "Custom Tooltip Function",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location",
+    color: "#4ECDC4",
+    renderTooltip: (project) => [
+      {
+        label: "Project Name",
+        value: project.name || 'N/A'
+      },
+      {
+        label: "Completion",
+        value: `${project.percentageCompletion || 0}%`,
+        color: project.percentageCompletion > 50 ? "#12b76a" : "#FF7A45"
+      },
+      {
+        label: "Country",
+        value: project.country || 'N/A'
+      }
+    ]
+  }
+};
+
+export const AdvancedCustomTooltip = {
+  name: "Advanced Custom Tooltip with Colors",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location",
+    color: "#4ECDC4",
+    renderTooltip: (project) => [
+      {
+        label: "Project Name",
+        value: project.name || 'N/A'
+      },
+      {
+        label: "Sector",
+        value: project.sectoralScope || 'Project',
+        color: "#12b76a"
+      },
+      {
+        label: "Completion Status",
+        value: project.percentageCompletion > 75 ? "High" : project.percentageCompletion > 50 ? "Medium" : "Low",
+        color: project.percentageCompletion > 75 ? "#12b76a" : project.percentageCompletion > 50 ? "#FF7A45" : "#F04438"
+      },
+      {
+        label: "Completion %",
+        value: `${project.percentageCompletion || 0}%`
+      },
+      {
+        label: "Author",
+        value: project.author?.name || 'N/A'
+      },
+      {
+        label: "Project ID",
+        value: project.datastakeId || 'N/A'
+      }
+    ]
+  }
+};
+
+export const MinimalTooltip = {
+  name: "Minimal Custom Tooltip",
+  args: {
+    projects: SAMPLE_PROJECTS,
+    showSider: true,
+    type: "location",
+    color: "#4ECDC4",
+    renderTooltip: (project) => [
+      {
+        label: "Name",
+        value: project.name || 'N/A'
+      },
+      {
+        label: "Progress",
+        value: `${project.percentageCompletion || 0}%`
+      }
+    ]
+  }
+};
+
+export const DebugVersion = {
+  name: "Debug Version (Direct Mapbox)",
+  render: () => (
+    <div style={{ margin: "3em" }}>
+      <ThemeLayout>
+        
+        <Widget title="Debug Globe (Direct Mapbox)" className="no-px no-pb-body">
+          <div style={{ width: '100%', height: '600px' }}>
+            <SimpleGlobeDebug projects={SAMPLE_PROJECTS} />
+          </div>
+        </Widget>
+      </ThemeLayout>
+    </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 the component for reuse in other projects
+export { SimpleGlobeTestDebug };

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/SimpleGlobeTestDebug.jsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+/**
+ * SimpleGlobeTestDebug - A minimal test component to debug marker positioning issues
+ * This component uses the most basic Mapbox setup to isolate positioning problems
+ */
+const SimpleGlobeTestDebug = ({ projects = [] }) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+
+  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(`🧪 [DEBUG TEST] Processing project ${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(`🧪 [DEBUG TEST] Coordinates for ${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(`❌ [DEBUG TEST] Invalid coordinates for ${project.name}:`, { lng, lat });
+          return;
+        }
+
+        // Create popup
+        const popup = new mapboxgl.Popup({ offset: 25 })
+          .setHTML(`
+            <div style="padding: 8px;">
+              <h3 style="margin: 0 0 8px 0; font-size: 14px;">${project.name}</h3>
+              <p style="margin: 0; font-size: 12px; color: #666;">
+                Lat: ${lat.toFixed(4)}, Lng: ${lng.toFixed(4)}
+              </p>
+              <p style="margin: 4px 0 0 0; font-size: 12px;">
+                ${project.projectDescription || 'No description'}
+              </p>
+            </div>
+          `);
+
+        // 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(`🔍 [DEBUG TEST] Position verification for ${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(`❌ [DEBUG TEST] Position mismatch for ${project.name}!`);
+          }
+        }, 200);
+        
+        console.log(`✅ [DEBUG TEST] Marker added for ${project.name} at:`, [lng, lat]);
+      });
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects]);
+
+  return (
+    <div style={{ 
+      width: '100%', 
+      height: '600px', 
+      border: '2px solid #ccc',
+      position: 'relative'
+    }}>
+      <div 
+        ref={mapContainer} 
+        style={{ 
+          width: '100%', 
+          height: '100%',
+          position: 'relative'
+        }} 
+      />
+      <div style={{
+        position: 'absolute',
+        top: '10px',
+        left: '10px',
+        background: 'rgba(255,255,255,0.9)',
+        padding: '8px',
+        borderRadius: '4px',
+        fontSize: '12px',
+        zIndex: 1000
+      }}>
+        <strong>Debug Test Map</strong><br/>
+        Projects: {projects.length}<br/>
+        Check console for position verification
+      </div>
+    </div>
+  );
+};
+
+export default SimpleGlobeTestDebug;