datastake-daf 0.6.294 → 0.6.296

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

@@ -1,345 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-
-/**
- * IsolatedGlobe - Completely isolated Mapbox component
- * Uses scoped CSS and shadow DOM to prevent any conflicts
- */
-const IsolatedGlobe = ({ 
-  projects = [], 
-  mapConfig = {},
-  onProjectClick = () => {},
-  type = "default",
-  color = "#00809E"
-}) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-  const shadowRoot = useRef(null);
-  const boundsRef = useRef(null);
-
-  useEffect(() => {
-    if (map.current) return;
-
-    console.log('🗺️ [ISOLATED GLOBE] Creating isolated map...');
-    
-    // Set Mapbox access token
-    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
-
-    // Create shadow DOM for complete isolation
-    const container = mapContainer.current;
-    shadowRoot.current = container.attachShadow({ mode: 'open' });
-    
-    // Create isolated styles
-    const style = document.createElement('style');
-    style.textContent = `
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-      }
-      
-      .mapboxgl-map {
-        font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
-        overflow: hidden;
-        position: relative;
-        width: 100%;
-        height: 100%;
-        -webkit-tap-highlight-color: rgb(0 0 0/0);
-      }
-      
-      .mapboxgl-canvas {
-        left: 0;
-        position: absolute;
-        top: 0;
-      }
-      
-      .mapboxgl-canvas-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
-      
-      .mapboxgl-marker {
-        position: absolute;
-        z-index: 1;
-      }
-      
-      .mapboxgl-marker svg {
-        display: block;
-      }
-      
-      .mapboxgl-popup {
-        position: absolute;
-        text-align: center;
-        margin-bottom: 20px;
-      }
-      
-      .mapboxgl-popup-content-wrapper {
-        padding: 1px;
-        text-align: left;
-        border-radius: 12px;
-        background: white;
-        color: #333;
-        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-      }
-      
-      .mapboxgl-popup-content {
-        margin: 13px 24px 13px 20px;
-        line-height: 1.3;
-        font-size: 13px;
-        min-height: 1px;
-      }
-      
-      .mapboxgl-popup-tip-container {
-        width: 40px;
-        height: 20px;
-        position: absolute;
-        left: 50%;
-        margin-top: -1px;
-        margin-left: -20px;
-        overflow: hidden;
-        pointer-events: none;
-      }
-      
-      .mapboxgl-popup-tip {
-        width: 17px;
-        height: 17px;
-        padding: 1px;
-        margin: -10px auto 0;
-        pointer-events: auto;
-        transform: rotate(45deg);
-        background: white;
-        box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
-      }
-      
-      .mapboxgl-popup-close-button {
-        position: absolute;
-        top: 0;
-        right: 0;
-        border: none;
-        text-align: center;
-        width: 24px;
-        height: 24px;
-        font: 16px/24px Tahoma, Verdana, sans-serif;
-        color: #757575;
-        text-decoration: none;
-        background: transparent;
-        cursor: pointer;
-      }
-      
-      .mapboxgl-popup-close-button:hover {
-        color: #585858;
-      }
-      
-      .mapboxgl-ctrl-attribution,
-      .mapboxgl-ctrl-logo {
-        display: none !important;
-      }
-    `;
-    shadowRoot.current.appendChild(style);
-    
-    // Create map container inside shadow DOM
-    const mapDiv = document.createElement('div');
-    mapDiv.style.width = '100%';
-    mapDiv.style.height = '100%';
-    shadowRoot.current.appendChild(mapDiv);
-
-    // Create map
-    map.current = new mapboxgl.Map({
-      container: mapDiv,
-      style: 'mapbox://styles/mapbox/satellite-v9',
-      center: [0, 0],
-      zoom: mapConfig.maxZoom || 3,
-      projection: 'globe',
-      attributionControl: false
-    });
-
-    // Add markers when map loads
-    map.current.on('load', () => {
-      console.log('🗺️ [ISOLATED GLOBE] Map loaded, adding markers...');
-      
-      // Calculate bounds to fit all markers
-      const bounds = new mapboxgl.LngLatBounds();
-      let hasValidCoordinates = false;
-      
-      projects.forEach((project, index) => {
-        console.log(`📍 [ISOLATED GLOBE] Adding marker ${index}:`, project);
-        
-        // Create marker element
-        const el = document.createElement('div');
-        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.position = 'relative';
-        el.style.left = 'auto';
-        el.style.top = 'auto';
-        el.style.transform = 'none';
-        el.style.zIndex = '1000';
-        
-        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
-        const popupContent = `
-          <div style="padding: 12px; min-width: 200px;">
-            <h3 style="margin: 0 0 8px 0; font-size: 16px; color: #333;">${project.name}</h3>
-            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
-              <strong>Country:</strong> ${project.country || 'N/A'}
-            </p>
-            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
-              <strong>Sector:</strong> ${project.sectoralScope || 'Project'}
-            </p>
-            <p style="margin: 0 0 4px 0; font-size: 12px; color: #666;">
-              <strong>Completion:</strong> ${project.percentageCompletion || 0}%
-            </p>
-            <p style="margin: 4px 0 0 0; font-size: 12px; color: #666;">
-              <strong>Coordinates:</strong> ${Number(project.latitude).toFixed(4)}, ${Number(project.longitude).toFixed(4)}
-            </p>
-          </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(`📍 [ISOLATED GLOBE] Marker ${index} coordinates:`, { 
-          original: { longitude: project.longitude, latitude: project.latitude },
-          processed: { lng, lat },
-          project: project.name 
-        });
-        
-        // Validate coordinates
-        if (isNaN(lng) || isNaN(lat) || lng < -180 || lng > 180 || lat < -90 || lat > 90) {
-          console.error(`❌ [ISOLATED GLOBE] Invalid coordinates for project ${index}:`, { 
-            lng, lat, 
-            original: { longitude: project.longitude, latitude: project.latitude },
-            project: project.name 
-          });
-          return;
-        }
-
-        // Add coordinates to bounds
-        bounds.extend([lng, lat]);
-        hasValidCoordinates = true;
-
-        // Create marker with explicit positioning
-        const marker = new mapboxgl.Marker({
-          element: el,
-          anchor: 'center'
-        })
-          .setLngLat([lng, lat])
-          .setPopup(popup)
-          .addTo(map.current);
-
-        // Add click handler
-        el.addEventListener('click', () => {
-          console.log('📍 [ISOLATED GLOBE] Marker clicked:', project);
-          onProjectClick(project);
-        });
-        
-        // Verify marker position after a short delay
-        setTimeout(() => {
-          const markerLngLat = marker.getLngLat();
-          console.log(`🔍 [ISOLATED GLOBE] Marker ${index} position verification:`, {
-            expected: [lng, lat],
-            actual: [markerLngLat.lng, markerLngLat.lat],
-            project: project.name,
-            match: Math.abs(markerLngLat.lng - lng) < 0.0001 && Math.abs(markerLngLat.lat - lat) < 0.0001
-          });
-        }, 100);
-          
-        console.log(`✅ [ISOLATED GLOBE] Marker ${index} added at:`, [lng, lat]);
-      });
-      
-      // Fit map to show all markers if we have valid coordinates
-      if (hasValidCoordinates && !bounds.isEmpty()) {
-        console.log('🗺️ [ISOLATED 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 });
-  };
-
-  return (
-    <div 
-      ref={mapContainer}
-      style={{ 
-        width: '100%', 
-        height: '100%',
-        position: 'relative'
-      }}
-    />
-  );
-};
-
-export default IsolatedGlobe;