datastake-daf 0.6.293 → 0.6.295

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

@@ -47,63 +47,16 @@ const SimpleGlobe = ({
     // Set Mapbox access token
     mapboxgl.accessToken = 'pk.eyJ1IjoicmVkaXM5OTkiLCJhIjoiY2x4YWV5MzA5MmtuZzJpcXM5Y201Z2E2YiJ9.m5bwPg-Tj4Akesl1yQUa3w';
 
-    // Create map with custom Straatos style - 3D globe configuration
+    // 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',
-      // 3D globe settings for proper rendering
-      pitch: 0,
-      bearing: 0,
-      antialias: true,
-      fadeDuration: 0,
       attributionControl: false
     });
 
-    // Configure 3D globe when style loads
-    map.current.on('style.load', () => {
-      console.log('🎨 [SIMPLE GLOBE] Style loaded, configuring 3D globe...');
-      
-      // Set fog for the space background effect 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');
-        }
-      }
-      
-      // Set lighting for better 3D globe visibility
-      try {
-        map.current.setLight({
-          'anchor': 'viewport',
-          'color': 'white',
-          'intensity': 0.4
-        });
-        console.log('💡 [SIMPLE GLOBE] Lighting configured for 3D globe');
-      } catch (e) {
-        console.log('⚠️ [SIMPLE GLOBE] Could not set lighting');
-      }
-    });
-
     // Add markers when map loads
     map.current.on('load', () => {
       console.log('🗺️ [SIMPLE GLOBE] Map loaded, adding markers...');
@@ -124,42 +77,52 @@ const SimpleGlobe = ({
         .mapboxgl-canvas {
           overflow: hidden !important;
         }
-        
-        /* Namespace Mapbox styles to avoid Leaflet interference */
-        .daf-simple-globe-container .mapboxgl-marker {
-          position: absolute !important; /* let Mapbox control positioning */
-          transform: none !important; /* let Mapbox handle positioning for 3D globe */
-          left: auto !important;
-          top: auto !important;
-          z-index: 1000 !important; /* ensure markers are visible */
-        }
-        
-        .daf-simple-globe-container .mapboxgl-marker-pane {
-          position: absolute !important;
-          z-index: 1000 !important;
-        }
-        
-        .daf-simple-globe-container .mapboxgl-canvas {
-          position: absolute !important;
-          top: 0;
-          left: 0;
-        }
-        
+        /* 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: absolute !important;
-          top: 0;
-          left: 0;
+          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;
@@ -258,32 +221,20 @@ const SimpleGlobe = ({
         const lng = Number(project.longitude);
         const lat = Number(project.latitude);
         
-        console.log(`📍 [SIMPLE GLOBE] Marker ${index} coordinates:`, { 
-          lng, 
-          lat, 
-          project: project.name 
-        });
+        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, 
-            project: project.name 
-          });
+          console.error(`❌ [SIMPLE GLOBE] Invalid coordinates for project ${index}:`, { lng, lat });
           return;
         }
-        console.log(`📍 Marker ${index} coordinates:`, { lng, lat });
 
         // Add coordinates to bounds
         bounds.extend([lng, lat]);
         hasValidCoordinates = true;
 
-        // Create marker with explicit positioning and anchor for 3D globe
-        const marker = new mapboxgl.Marker({
-          element: el,
-          anchor: 'center' // Use center anchor for 3D globe positioning
-        })
+        // Add marker to map with proper coordinate order [lng, lat]
+        const marker = new mapboxgl.Marker(el)
           .setLngLat([lng, lat])
           .setPopup(popup)
           .addTo(map.current);
@@ -293,17 +244,6 @@ const SimpleGlobe = ({
           console.log('📍 [SIMPLE GLOBE] Marker clicked:', project);
           onProjectClick(project);
         });
-        
-        // Verify marker position after a short delay (like other Globe components)
-        setTimeout(() => {
-          const markerLngLat = marker.getLngLat();
-          console.log(`🔍 [SIMPLE 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(`✅ [SIMPLE GLOBE] Marker ${index} added at:`, [lng, lat]);
       });
@@ -320,14 +260,6 @@ const SimpleGlobe = ({
       } else {
         boundsRef.current = null;
       }
-      
-      // Force resize for 3D globe rendering
-      setTimeout(() => {
-        if (map.current && map.current.resize) {
-          map.current.resize();
-          console.log('🔄 [SIMPLE GLOBE] Map resized for 3D globe rendering');
-        }
-      }, 100);
     });
 
     return () => {

package/src/@daf/core/components/Dashboard/Globe/SimpleGlobe.stories.js

@@ -1,7 +1,5 @@
 import SimpleGlobe from "./SimpleGlobe";
 import SimpleGlobeDebug from "./SimpleGlobeDebug";
-import NoConflictGlobe from "./NoConflictGlobe";
-import CSSInJSGlobe from "./CSSInJSGlobe";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
@@ -284,33 +282,3 @@ export const DebugVersion = {
     </div>
   )
 };
-
-export const NoConflictVersion = {
-  name: "No Conflict Version (Aggressive CSS Isolation)",
-  render: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        <Widget title="No Conflict Globe (Aggressive CSS Isolation)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <NoConflictGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};
-
-export const CSSInJSVersion = {
-  name: "CSS-in-JS Version (No External CSS)",
-  render: () => (
-    <div style={{ margin: "3em" }}>
-      <ThemeLayout>
-        <Widget title="CSS-in-JS Globe (No External CSS)" className="no-px no-pb-body">
-          <div style={{ width: '100%', height: '600px' }}>
-            <CSSInJSGlobe projects={SAMPLE_PROJECTS} type="location" color="#4ECDC4" />
-          </div>
-        </Widget>
-      </ThemeLayout>
-    </div>
-  )
-};

package/src/@daf/core/components/EditForm/storyConfig.js

@@ -1,3 +1,3 @@
-import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig3";
+import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig2";
 
 export { getApiBaseUrl, getAppHeader, storyData };