datastake-daf 0.6.294 → 0.6.296

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

@@ -1,415 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import mapboxgl from 'mapbox-gl';
-
-/**
- * CSSInJSGlobe - Mapbox component using CSS-in-JS for complete isolation
- * No external CSS dependencies, all styles injected via JavaScript
- */
-const CSSInJSGlobe = ({ 
-  projects = [], 
-  mapConfig = {},
-  onProjectClick = () => {},
-  type = "default",
-  color = "#00809E"
-}) => {
-  const mapContainer = useRef(null);
-  const map = useRef(null);
-  const boundsRef = useRef(null);
-
-  useEffect(() => {
-    if (map.current) return;
-
-    console.log('🗺️ [CSS-IN-JS GLOBE] Creating map with CSS-in-JS...');
-    
-    // Set Mapbox access token
-    mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
-
-    // Create map
-    map.current = new mapboxgl.Map({
-      container: mapContainer.current,
-      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('🗺️ [CSS-IN-JS GLOBE] Map loaded, adding markers...');
-      
-      // Inject isolated CSS via JavaScript
-      const styleId = 'css-in-js-globe-styles';
-      let existingStyle = document.getElementById(styleId);
-      if (!existingStyle) {
-        const style = document.createElement('style');
-        style.id = styleId;
-        style.textContent = `
-          /* CSS-in-JS Globe Styles - Completely Isolated */
-          .css-in-js-globe-container {
-            position: relative !important;
-            width: 100% !important;
-            height: 100% !important;
-            overflow: hidden !important;
-            font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif !important;
-            -webkit-tap-highlight-color: rgb(0 0 0/0) !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-canvas-container {
-            position: relative !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            width: 100% !important;
-            height: 100% !important;
-            overflow: hidden !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-canvas-container canvas {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            width: 100% !important;
-            height: 100% !important;
-          }
-          
-          /* Override ALL Leaflet CSS that might interfere */
-          .css-in-js-globe-container .mapboxgl-marker {
-            position: absolute !important;
-            left: auto !important;
-            top: auto !important;
-            transform: none !important;
-            pointer-events: auto !important;
-            z-index: 1000 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-marker .css-in-js-marker {
-            position: relative !important;
-            left: auto !important;
-            top: auto !important;
-            transform: none !important;
-            pointer-events: auto !important;
-            cursor: pointer !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-marker-pane {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            z-index: 600 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-tile-container {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-zoom-animated {
-            transform-origin: 0 0 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-marker.leaflet-interactive {
-            cursor: pointer !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup {
-            position: absolute !important;
-            left: auto !important;
-            top: auto !important;
-            transform: none !important;
-            z-index: 700 !important;
-            text-align: center !important;
-            margin-bottom: 20px !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-content-wrapper {
-            padding: 1px !important;
-            text-align: left !important;
-            border-radius: 12px !important;
-            background: white !important;
-            color: #333 !important;
-            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-content {
-            margin: 13px 24px 13px 20px !important;
-            line-height: 1.3 !important;
-            font-size: 13px !important;
-            min-height: 1px !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-content p {
-            margin: 17px 0 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-tip-container {
-            width: 40px !important;
-            height: 20px !important;
-            position: absolute !important;
-            left: 50% !important;
-            margin-top: -1px !important;
-            margin-left: -20px !important;
-            overflow: hidden !important;
-            pointer-events: none !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-tip {
-            width: 17px !important;
-            height: 17px !important;
-            padding: 1px !important;
-            margin: -10px auto 0 !important;
-            pointer-events: auto !important;
-            transform: rotate(45deg) !important;
-            background: white !important;
-            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-close-button {
-            position: absolute !important;
-            top: 0 !important;
-            right: 0 !important;
-            border: none !important;
-            text-align: center !important;
-            width: 24px !important;
-            height: 24px !important;
-            font: 16px/24px Tahoma, Verdana, sans-serif !important;
-            color: #757575 !important;
-            text-decoration: none !important;
-            background: transparent !important;
-            cursor: pointer !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-close-button:hover {
-            color: #585858 !important;
-          }
-          
-          /* Hide Mapbox attribution completely */
-          .css-in-js-globe-container .mapboxgl-ctrl-attribution {
-            display: none !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-ctrl-logo {
-            display: none !important;
-          }
-          
-          /* Override any Leaflet pane positioning */
-          .css-in-js-globe-container .mapboxgl-overlay-pane {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            z-index: 400 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-shadow-pane {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            z-index: 500 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-tooltip-pane {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            z-index: 650 !important;
-          }
-          
-          .css-in-js-globe-container .mapboxgl-popup-pane {
-            position: absolute !important;
-            left: 0 !important;
-            top: 0 !important;
-            transform: none !important;
-            z-index: 700 !important;
-          }
-        `;
-        document.head.appendChild(style);
-      }
-      
-      // Calculate bounds to fit all markers
-      const bounds = new mapboxgl.LngLatBounds();
-      let hasValidCoordinates = false;
-      
-      projects.forEach((project, index) => {
-        console.log(`📍 [CSS-IN-JS GLOBE] Adding marker ${index}:`, project);
-        
-        // Create marker element
-        const el = document.createElement('div');
-        el.className = 'css-in-js-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';
-        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(`📍 [CSS-IN-JS 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(`❌ [CSS-IN-JS 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('📍 [CSS-IN-JS GLOBE] Marker clicked:', project);
-          onProjectClick(project);
-        });
-        
-        // Verify marker position after a short delay
-        setTimeout(() => {
-          const markerLngLat = marker.getLngLat();
-          console.log(`🔍 [CSS-IN-JS 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(`✅ [CSS-IN-JS GLOBE] Marker ${index} added at:`, [lng, lat]);
-      });
-      
-      // Fit map to show all markers if we have valid coordinates
-      if (hasValidCoordinates && !bounds.isEmpty()) {
-        console.log('🗺️ [CSS-IN-JS 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]);
-
-  return (
-    <div 
-      className="css-in-js-globe-container"
-      style={{ 
-        width: '100%', 
-        height: '100%',
-        position: 'relative'
-      }}
-    >
-      <div 
-        ref={mapContainer} 
-        style={{ 
-          width: '100%', 
-          height: '100%',
-          position: 'relative'
-        }} 
-      />
-    </div>
-  );
-};
-
-export default CSSInJSGlobe;