datastake-daf 0.6.283 → 0.6.284

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeStraatosDebug.standalone.jsx

@@ -1,349 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-import 'mapbox-gl/dist/mapbox-gl.css';
-
-/**
- * SimpleGlobeStraatosDebug - Aggressive CSS isolation for straatos environment
- * This component is specifically designed to work in straatos where Leaflet CSS
- * is globally loaded and interferes with Mapbox markers.
- * 
- * USAGE:
- * 1. Copy this file to your straatos project
- * 2. Install mapbox-gl: npm install mapbox-gl
- * 3. Import and use: <SimpleGlobeStraatosDebug projects={yourProjects} />
- * 
- * @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[].projectDescription - Project description (optional)
- */
-const SimpleGlobeStraatosDebug = ({ projects = [] }) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-
-  useEffect(() => {
-    if (map.current) return;
-
-    console.log('🧪 [STRAATOS DEBUG] Creating map with aggressive CSS isolation...');
-    
-    // Set Mapbox access token - REPLACE WITH YOUR 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('🧪 [STRAATOS DEBUG] Map loaded, adding test markers...');
-      
-      // AGGRESSIVE CSS ISOLATION - Override ALL Leaflet CSS
-      const aggressiveStyle = document.createElement('style');
-      aggressiveStyle.textContent = `
-        /* AGGRESSIVE ISOLATION: Override ALL Leaflet CSS that affects Mapbox */
-        .straatos-globe-debug-container {
-          position: relative !important;
-          width: 100% !important;
-          height: 100% !important;
-          overflow: hidden !important;
-        }
-        
-        .straatos-globe-debug-container .mapboxgl-canvas-container {
-          position: relative !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          width: 100% !important;
-          height: 100% !important;
-        }
-        
-        .straatos-globe-debug-container .mapboxgl-canvas-container canvas {
-          position: relative !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          width: 100% !important;
-          height: 100% !important;
-        }
-        
-        /* Override Leaflet marker positioning */
-        .straatos-globe-debug-container .mapboxgl-marker {
-          position: absolute !important;
-          left: auto !important;
-          top: auto !important;
-          transform: none !important;
-          pointer-events: auto !important;
-          z-index: 1000 !important;
-        }
-        
-        /* Override Leaflet div icon styles */
-        .straatos-globe-debug-container .mapboxgl-marker .straatos-debug-marker {
-          position: relative !important;
-          left: auto !important;
-          top: auto !important;
-          transform: none !important;
-          width: 20px !important;
-          height: 20px !important;
-          background: #FF0000 !important;
-          border: 2px solid white !important;
-          border-radius: 50% !important;
-          pointer-events: auto !important;
-          cursor: pointer !important;
-          box-shadow: 0px 3px 6px rgba(0,0,0,0.3) !important;
-        }
-        
-        /* Override Leaflet pane positioning */
-        .straatos-globe-debug-container .mapboxgl-marker-pane {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          z-index: 600 !important;
-        }
-        
-        /* Override Leaflet tile container */
-        .straatos-globe-debug-container .mapboxgl-tile-container {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-        }
-        
-        /* Override Leaflet zoom animations */
-        .straatos-globe-debug-container .mapboxgl-zoom-animated {
-          transform-origin: 0 0 !important;
-        }
-        
-        /* Override Leaflet interactive styles */
-        .straatos-globe-debug-container .mapboxgl-marker.leaflet-interactive {
-          cursor: pointer !important;
-        }
-        
-        /* Override Leaflet popup positioning */
-        .straatos-globe-debug-container .mapboxgl-popup {
-          position: absolute !important;
-          left: auto !important;
-          top: auto !important;
-          transform: none !important;
-          z-index: 700 !important;
-        }
-        
-        /* Override any Leaflet control positioning */
-        .straatos-globe-debug-container .mapboxgl-ctrl-group {
-          position: absolute !important;
-          z-index: 1000 !important;
-        }
-        
-        /* Override Leaflet attribution */
-        .straatos-globe-debug-container .mapboxgl-ctrl-attrib {
-          position: absolute !important;
-          bottom: 0 !important;
-          right: 0 !important;
-        }
-        
-        /* Override any Leaflet tooltip positioning */
-        .straatos-globe-debug-container .mapboxgl-popup-content {
-          position: relative !important;
-          left: auto !important;
-          top: auto !important;
-          transform: none !important;
-        }
-        
-        /* Override Leaflet marker shadow */
-        .straatos-globe-debug-container .mapboxgl-marker .mapboxgl-marker-shadow {
-          display: none !important;
-        }
-        
-        /* Override any Leaflet image layer positioning */
-        .straatos-globe-debug-container .mapboxgl-image-layer {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-        }
-        
-        /* Override Leaflet overlay pane */
-        .straatos-globe-debug-container .mapboxgl-overlay-pane {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          z-index: 400 !important;
-        }
-        
-        /* Override Leaflet shadow pane */
-        .straatos-globe-debug-container .mapboxgl-shadow-pane {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          z-index: 500 !important;
-        }
-        
-        /* Override Leaflet tooltip pane */
-        .straatos-globe-debug-container .mapboxgl-tooltip-pane {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          z-index: 650 !important;
-        }
-        
-        /* Override Leaflet popup pane */
-        .straatos-globe-debug-container .mapboxgl-popup-pane {
-          position: absolute !important;
-          left: 0 !important;
-          top: 0 !important;
-          transform: none !important;
-          z-index: 700 !important;
-        }
-      `;
-      document.head.appendChild(aggressiveStyle);
-      
-      projects.forEach((project, index) => {
-        console.log(`🧪 [STRAATOS DEBUG] Processing project ${index}:`, project);
-        
-        // Create simple marker with unique class
-        const el = document.createElement('div');
-        el.className = 'straatos-debug-marker';
-        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(`🧪 [STRAATOS DEBUG] 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(`❌ [STRAATOS DEBUG] 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(`🔍 [STRAATOS DEBUG] 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(`❌ [STRAATOS DEBUG] Position mismatch for ${project.name}!`);
-          }
-        }, 200);
-        
-        console.log(`✅ [STRAATOS DEBUG] Marker added for ${project.name} at:`, [lng, lat]);
-      });
-    });
-
-    return () => {
-      if (map.current) {
-        map.current.remove();
-        map.current = null;
-      }
-    };
-  }, [projects]);
-
-  return (
-    <div className="straatos-globe-debug-container" 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>Straatos Debug Map</strong><br/>
-        Projects: {projects.length}<br/>
-        Aggressive CSS isolation applied<br/>
-        Check console for position verification
-      </div>
-    </div>
-  );
-};
-
-export default SimpleGlobeStraatosDebug;
-
-// Example usage:
-/*
-import SimpleGlobeStraatosDebug from './SimpleGlobeStraatosDebug';
-
-const MyStraatosComponent = () => {
-  const projects = [
-    {
-      name: "Your Project",
-      latitude: 14.7167,
-      longitude: -17.4677,
-      projectDescription: "Your project description"
-    }
-  ];
-
-  return (
-    <div style={{ width: '100%', height: '600px' }}>
-      <SimpleGlobeStraatosDebug projects={projects} />
-    </div>
-  );
-};
-*/

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

@@ -1,150 +0,0 @@
-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;

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobeTestDebug.standalone.jsx

@@ -1,183 +0,0 @@
-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
- * 
- * USAGE:
- * 1. Copy this file to your straatos project
- * 2. Install mapbox-gl: npm install mapbox-gl
- * 3. Import and use: <SimpleGlobeTestDebug projects={yourProjects} />
- * 
- * @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[].projectDescription - Project description (optional)
- */
-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 - REPLACE WITH YOUR 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;
-
-// Example usage:
-/*
-import SimpleGlobeTestDebug from './SimpleGlobeTestDebug';
-
-const MyComponent = () => {
-  const projects = [
-    {
-      name: "Test Project",
-      latitude: 14.7167,
-      longitude: -17.4677,
-      projectDescription: "Test project in Dakar"
-    }
-  ];
-
-  return (
-    <div style={{ width: '100%', height: '600px' }}>
-      <SimpleGlobeTestDebug projects={projects} />
-    </div>
-  );
-};
-*/