datastake-daf 0.6.280 → 0.6.281

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

@@ -0,0 +1,106 @@
+# 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

@@ -0,0 +1,331 @@
+import React, { useEffect, useRef } from 'react';
+import mapboxgl from 'mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import Style from './style';
+import { renderTooltip as renderTooltipHtml } from '../../../../utils/tooltip';
+
+/**
+ * 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)")
+ * @param {Function} renderTooltip - Custom tooltip renderer function (optional)
+ */
+const SimpleGlobe = ({ 
+  projects = [], 
+  mapConfig = {},
+  showSider = false,
+  onProjectClick = () => {},
+  type = "default",
+  color = "var(--color-primary-60)",
+  renderTooltip = null
+}) => {
+  const mapContainer = useRef(null);
+  const map = useRef(null);
+  const boundsRef = 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;
+        }
+        /* CRITICAL: Override Leaflet CSS interference with Mapbox */
+        .daf-simple-globe-container .mapboxgl-canvas-container {
+          position: relative !important;
+          left: auto !important;
+          top: auto !important;
+        }
+        .daf-simple-globe-container .mapboxgl-canvas-container canvas {
+          position: relative !important;
+          left: auto !important;
+          top: auto !important;
+          transform: none !important;
+        }
+        /* Prevent Leaflet styles from affecting Mapbox markers */
+        .daf-simple-globe-container .daf-globe-marker {
+          position: relative !important;
+          left: auto !important;
+          top: auto !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 custom renderTooltip or default
+        let popupContent;
+        
+        if (renderTooltip && typeof renderTooltip === 'function') {
+          // Use custom renderTooltip function (same as MineSiteMap)
+          const tooltipData = renderTooltip(project);
+          popupContent = renderTooltipHtml({
+            title: project.name,
+            subTitle: project.sectoralScope || 'Project',
+            items: tooltipData,
+            link: false
+          });
+        } else {
+          // Use default tooltip structure
+          const tooltipData = [
+   
+            {
+                label: "Country",
+                value: project.country || 'N/A'
+              },
+            {
+              label: "Sectoral Scope",
+              value: project.sectoralScope || 'Project'
+            },
+    
+
+          ];
+
+          popupContent = renderTooltipHtml({
+            title: project.name,
+            subTitle: project.sectoralScope || 'Project',
+            items: tooltipData,
+            link: false
+          });
+        }
+
+        // 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
+        });
+        boundsRef.current = bounds;
+      } else {
+        boundsRef.current = null;
+      }
+    });
+
+    return () => {
+      if (map.current) {
+        map.current.remove();
+        map.current = null;
+      }
+    };
+  }, [projects, onProjectClick, mapConfig]);
+
+  const zoomIn = () => map.current && map.current.zoomIn();
+  const zoomOut = () => map.current && map.current.zoomOut();
+  const recenter = () => {
+    if (!map.current) return;
+    if (boundsRef.current && !boundsRef.current.isEmpty()) {
+      map.current.fitBounds(boundsRef.current, {
+        padding: { top: 20, bottom: 20, left: 20, right: 20 },
+        maxZoom: 6,
+        duration: 800,
+      });
+      return;
+    }
+    map.current.easeTo({ center: [0, 0], zoom: 3, duration: 800 });
+  };
+  const pitchUp = () => {
+    if (!map.current) return;
+    const next = Math.min((map.current.getPitch?.() || 0) + 10, 85);
+    map.current.setPitch(next);
+  };
+  const pitchDown = () => {
+    if (!map.current) return;
+    const next = Math.max((map.current.getPitch?.() || 0) - 10, 0);
+    map.current.setPitch(next);
+  };
+
+  return (
+    <Style>
+        <div 
+          className="daf-simple-globe-container"
+          style={{ 
+            width: '100%', 
+            height: '100%',
+            overflow: 'hidden',
+            position: 'relative'
+          }}
+        >
+        <div 
+          ref={mapContainer} 
+          className="daf-globe-map-container"
+          style={{ 
+            width: '100%', 
+            height: '100%',
+            overflow: 'hidden',
+            position: 'relative'
+          }} 
+        />
+        <div className="map-control-buttons">
+          <button type="button" aria-label="Zoom in" onClick={zoomIn}>+</button>
+          <button type="button" aria-label="Zoom out" onClick={zoomOut}>−</button>
+          <button type="button" aria-label="Recenter" onClick={recenter}>◎</button>
+          <button type="button" aria-label="Pitch up" onClick={pitchUp}>^</button>
+          <button type="button" aria-label="Pitch down" onClick={pitchDown}>˅</button>
+        </div>
+      </div>
+    </Style>
+  );
+};
+
+export default SimpleGlobe;