datastake-daf 0.6.283 → 0.6.284

package/src/styles/datastake/mapbox-gl.css

@@ -0,0 +1,330 @@
+/* Isolated Mapbox GL CSS - Scoped to prevent Leaflet conflicts */
+
+/* Mapbox GL Core Styles - Scoped with .mapbox-gl-scope */
+.mapbox-gl-scope .mapboxgl-map {
+  font: 12px/20px Helvetica Neue, Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0/0);
+}
+
+.mapbox-gl-scope .mapboxgl-canvas {
+  left: 0;
+  position: absolute;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-map:-webkit-full-screen {
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-canary {
+  background-color: salmon;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer {
+  cursor: pointer;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-interactive:active,
+.mapbox-gl-scope .mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: pinch-zoom;
+}
+
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
+.mapbox-gl-scope .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
+  touch-action: none;
+}
+
+/* Control positioning */
+.mapbox-gl-scope .mapboxgl-ctrl-bottom,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left,
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right,
+.mapbox-gl-scope .mapboxgl-ctrl-left,
+.mapbox-gl-scope .mapboxgl-ctrl-right,
+.mapbox-gl-scope .mapboxgl-ctrl-top,
+.mapbox-gl-scope .mapboxgl-ctrl-top-left,
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left {
+  left: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top {
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right {
+  right: 0;
+  top: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-right {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right {
+  bottom: 0;
+  right: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-left {
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl {
+  clear: both;
+  pointer-events: auto;
+  transform: translate(0);
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-left .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0 0 10px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+  float: right;
+  margin: 10px 10px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-right .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-right .mapboxgl-ctrl {
+  float: right;
+  margin: 0 10px 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom .mapboxgl-ctrl {
+  float: left;
+  margin: 10px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl,
+.mapbox-gl-scope .mapboxgl-ctrl-left .mapboxgl-ctrl {
+  float: left;
+  margin: 0 0 10px 10px;
+}
+
+/* Control group styling */
+.mapbox-gl-scope .mapboxgl-ctrl-group {
+  background: #fff;
+  border-radius: 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group:not(:empty) {
+  box-shadow: 0 0 0 2px #0000001a;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button {
+  background-color: initial;
+  border: 0;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: block;
+  height: 29px;
+  outline: none;
+  overflow: hidden;
+  padding: 0;
+  width: 29px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button+button {
+  border-top: 1px solid #ddd;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button .mapboxgl-ctrl-icon {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attrib-button:focus,
+.mapbox-gl-scope .mapboxgl-ctrl-group button:focus {
+  box-shadow: 0 0 2px 2px #0096ff;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled {
+  cursor: not-allowed;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon {
+  opacity: .25;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:first-child {
+  border-radius: 4px 4px 0 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:last-child {
+  border-radius: 0 0 4px 4px;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-group button:only-child {
+  border-radius: inherit;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl button:not(:disabled):hover {
+  background-color: #0000000d;
+}
+
+/* Marker styles */
+.mapbox-gl-scope .mapboxgl-marker {
+  position: absolute;
+  z-index: 1;
+}
+
+.mapbox-gl-scope .mapboxgl-marker svg {
+  display: block;
+}
+
+/* Popup styles */
+.mapbox-gl-scope .mapboxgl-popup {
+  position: absolute;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper {
+  padding: 1px;
+  text-align: left;
+  border-radius: 12px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content {
+  margin: 13px 24px 13px 20px;
+  line-height: 1.3;
+  font-size: 13px;
+  min-height: 1px;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content p {
+  margin: 17px 0;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip-container {
+  width: 40px;
+  height: 20px;
+  position: absolute;
+  left: 50%;
+  margin-top: -1px;
+  margin-left: -20px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  width: 17px;
+  height: 17px;
+  padding: 1px;
+  margin: -10px auto 0;
+  pointer-events: auto;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+}
+
+.mapbox-gl-scope .mapboxgl-popup-content-wrapper,
+.mapbox-gl-scope .mapboxgl-popup-tip {
+  background: white;
+  color: #333;
+  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
+}
+
+.mapbox-gl-scope .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;
+}
+
+.mapbox-gl-scope .mapboxgl-popup-close-button:hover,
+.mapbox-gl-scope .mapboxgl-popup-close-button:focus {
+  color: #585858;
+}
+
+/* Attribution */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  background: #fff;
+  background: rgba(255, 255, 255, 0.8);
+  margin: 0;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution,
+.mapbox-gl-scope .mapboxgl-ctrl-scale-line {
+  padding: 0 5px;
+  color: #333;
+  line-height: 1.4;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a {
+  text-decoration: none;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:hover,
+.mapbox-gl-scope .mapboxgl-ctrl-attribution a:focus {
+  text-decoration: underline;
+}
+
+/* Hide attribution by default */
+.mapbox-gl-scope .mapboxgl-ctrl-attribution {
+  display: none !important;
+}
+
+.mapbox-gl-scope .mapboxgl-ctrl-logo {
+  display: none !important;
+}

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

@@ -1,322 +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.
- * 
- * @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
-    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;