datastake-daf 0.6.262 → 0.6.264

package/dist/components/index.js

@@ -19919,14 +19919,26 @@ const useGlobe = ({
   const addedSources = React.useRef(new Set());
   const isMounted = React.useRef(true);
   const addAllDataToMap = React.useCallback(() => {
-    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
+    console.log('🚀 [GLOBE HOOK] addAllDataToMap called');
+    console.log('🚀 [GLOBE HOOK] data:', data);
+    console.log('🚀 [GLOBE HOOK] mapRef exists:', !!mapRef);
+    console.log('🚀 [GLOBE HOOK] style loaded:', mapRef?.isStyleLoaded());
+    if (!data || !mapRef) {
+      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - missing data or mapRef');
+      return;
+    }
+    if (!mapRef.isStyleLoaded()) {
+      console.log('⏳ [GLOBE HOOK] Style not loaded yet, retrying in 100ms...');
+      setTimeout(() => {
+        addAllDataToMap();
+      }, 100);
       return;
     }
-
-    // Prevent multiple calls with empty data
     if (data.length === 0) {
+      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - no data');
       return;
     }
+    console.log('✅ [GLOBE HOOK] Starting to add markers to map...');
 
     // Clear existing markers using functional update to avoid dependency issues
     setMapMarkers(currentMarkers => {
@@ -19978,8 +19990,13 @@ const useGlobe = ({
     if (data && mapRef) {
       const newMarkers = [];
       const maxTotal = Math.max(...(data || []).map(d => d.total || 0));
+      console.log('🎯 [GLOBE HOOK] Processing data items:', data.length);
       data.forEach((d, i) => {
+        console.log(`🎯 [GLOBE HOOK] Processing item ${i}:`, d);
+        console.log(`🎯 [GLOBE HOOK] Item ${i} marker:`, d?.marker);
+        console.log(`🎯 [GLOBE HOOK] Item ${i} lat/lng:`, d?.marker?.lat, d?.marker?.lng);
         if (d?.marker?.lat && d?.marker?.lng) {
+          console.log(`✅ [GLOBE HOOK] Item ${i} has valid coordinates, creating marker...`);
           let marker;
           let iconClassName = "";
           let iconSize = [25, 25];
@@ -20059,6 +20076,7 @@ const useGlobe = ({
             el.style.fontWeight = 'bold';
             el.innerHTML = `<span>${d.total || 0}</span>`;
             marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
+            console.log(`🎉 [GLOBE HOOK] Marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           } else if (type === "territory") {
             // Handle territory polygons
             if (d.area && Array.isArray(d.area)) {
@@ -20128,6 +20146,7 @@ const useGlobe = ({
             }));
             roots.current.push(root);
             marker = new mapboxgl.Marker(el).setLngLat([d.marker.lng, d.marker.lat]).setPopup(new mapboxgl.Popup().setDOMContent(div)).addTo(mapRef);
+            console.log(`🎉 [GLOBE HOOK] Default marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           }
 
           // Add click handler
@@ -20161,6 +20180,7 @@ const useGlobe = ({
       mapboxgl.accessToken = MAP_TOKEN;
 
       // Create the map with Mapbox GL JS - 3D globe
+      console.log('🗺️ [GLOBE HOOK] Creating map with style:', STYLE_URL);
       const map = new mapboxgl.Map({
         container: container.current,
         style: STYLE_URL,
@@ -20179,8 +20199,13 @@ const useGlobe = ({
 
       // Configure the map when style loads
       map.on('style.load', () => {
+        console.log('🎨 [GLOBE HOOK] Style loaded event triggered');
+        console.log('🎨 [GLOBE HOOK] Map style loaded:', map.isStyleLoaded());
+
         // Wait a bit for the style to fully load
         setTimeout(() => {
+          console.log('🎨 [GLOBE HOOK] After timeout - Map style loaded:', map.isStyleLoaded());
+
           // Set fog for the space background effect with stars - simplified to avoid errors
           try {
             map.setFog({
@@ -20276,9 +20301,10 @@ const useGlobe = ({
 
       // Add navigation controls
       map.addControl(new mapboxgl.NavigationControl(), 'top-right');
+      console.log('🗺️ [GLOBE HOOK] Map created successfully');
       return map;
     } catch (error) {
-      console.error('Error creating Mapbox GL JS globe:', error);
+      console.error('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -20291,9 +20317,12 @@ const useGlobe = ({
   // }, [initialMarkerSetIsDone]);
 
   React.useEffect(() => {
+    console.log('🔄 [GLOBE HOOK] useEffect for map creation - mapRef:', !!mapRef);
     if (!mapRef) {
+      console.log('🔄 [GLOBE HOOK] Creating map instance...');
       const instance = createInstance();
       if (instance) {
+        console.log('🔄 [GLOBE HOOK] Map instance created, setting mapRef');
         setMapRef(instance);
 
         // Add comprehensive resize detection for Mapbox GL JS responsiveness
@@ -20374,14 +20403,22 @@ const useGlobe = ({
     }
   }, [polygon, mapRef]);
   React.useEffect(() => {
+    console.log('📥 [GLOBE HOOK] allData received:', allData);
+    console.log('📥 [GLOBE HOOK] allData length:', allData?.length);
     if (allData) {
       if (allData.length === 0) {
+        console.log('⚠️ [GLOBE HOOK] Empty data array');
         setEmptyStateIsVisible(true);
       } else if (emptyStateIsVisible) {
         setEmptyStateIsVisible(false);
       }
-      setData(filterValidGPS(allData));
+      console.log('🔍 [GLOBE HOOK] Filtering data with filterValidGPS...');
+      const filteredData = filterValidGPS(allData);
+      console.log('🔍 [GLOBE HOOK] filtered data result:', filteredData);
+      console.log('🔍 [GLOBE HOOK] filtered data length:', filteredData.length);
+      setData(filteredData);
     } else {
+      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -20411,7 +20448,19 @@ const useGlobe = ({
     }
   }, [user, mapRef, allData]);
   React.useEffect(() => {
-    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
+    console.log('🔄 [GLOBE HOOK] useEffect triggered:', {
+      mapRef: !!mapRef,
+      data: !!data,
+      dataLength: data?.length,
+      initialMarkerSetIsDone,
+      styleLoaded: mapRef?.isStyleLoaded()
+    });
+    if (mapRef && data && !initialMarkerSetIsDone) {
+      console.log('🚀 [GLOBE HOOK] Attempting to add markers...');
+      console.log('🚀 [GLOBE HOOK] Style loaded check:', mapRef.isStyleLoaded());
+
+      // Try to add markers immediately, and if style isn't loaded, 
+      // the addAllDataToMap function will handle it
       setInitialMarkerSetIsDone(true);
       addAllDataToMap();
     }
@@ -20624,7 +20673,7 @@ function Globe(_ref) {
     renderSider = null,
     renderMarker = null,
     type = "default",
-    showSider = true,
+    showSider = false,
     filtersConfig,
     onFilterChange = () => {},
     isSatellite = false,
@@ -20634,15 +20683,29 @@ function Globe(_ref) {
     onUnmount
   } = _ref;
   // Map data to include marker coordinates
-  const mappedData = React.useMemo(() => data.map(d => {
-    var _d$gps, _d$gps2;
-    return _objectSpread2(_objectSpread2({}, d), {}, {
-      marker: {
-        lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
-        lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
-      }
+  const mappedData = React.useMemo(() => {
+    console.log('📊 [GLOBE COMPONENT] Original data received:', data);
+    console.log('📊 [GLOBE COMPONENT] Data length:', data === null || data === void 0 ? void 0 : data.length);
+    if (!data || data.length === 0) {
+      console.log('❌ [GLOBE COMPONENT] No data to map');
+      return [];
+    }
+    const mapped = data.map((d, i) => {
+      var _d$gps, _d$gps2;
+      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Mapping item ".concat(i, ":"), d);
+      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " GPS:"), d === null || d === void 0 ? void 0 : d.gps);
+      const result = _objectSpread2(_objectSpread2({}, d), {}, {
+        marker: {
+          lat: d === null || d === void 0 || (_d$gps = d.gps) === null || _d$gps === void 0 ? void 0 : _d$gps.latitude,
+          lng: d === null || d === void 0 || (_d$gps2 = d.gps) === null || _d$gps2 === void 0 ? void 0 : _d$gps2.longitude
+        }
+      });
+      console.log("\uD83D\uDCCA [GLOBE COMPONENT] Item ".concat(i, " mapped result:"), result);
+      return result;
     });
-  }), [data]);
+    console.log('📊 [GLOBE COMPONENT] Final mapped data:', mapped);
+    return mapped;
+  }, [data]);
 
   // Get resize context for sidebar state changes
   const {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.262",
+	"version": "0.6.264",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -2,7 +2,7 @@ import Globe from "./index";
 import ThemeLayout from "../../ThemeLayout";
 import Widget from "../Widget";
 
-import * as configs from "../Map/storyConfig";
+import * as configs from "./storyConfig";
 
 export default {
 	title: "Dashboard/Globe",
@@ -29,14 +29,14 @@ export default {
 export const DefaultGlobe = {
 	name: "Default Globe",
 	args: {
-		...configs.DefaultMapConfig,
+		...configs.DefaultGlobeConfig,
 	},
 };
 
 export const SatelliteGlobe = {
 	name: "Satellite Globe",
 	args: {
-		...configs.DefaultMapConfig,
+		...configs.DefaultGlobeConfig,
 		isSatellite: true,
 	},
 };
@@ -44,11 +44,19 @@ export const SatelliteGlobe = {
 export const TerritoryGlobe = {
 	name: "Territory Globe",
 	args: {
-		...configs.TerritoryMapConfig,
+		...configs.TerritoryGlobeConfig,
 		type: "territory",
 	},
 };
 
+export const StakeholderGlobe = {
+	name: "Stakeholder Globe",
+	args: {
+		...configs.StakeholderGlobeConfig,
+		type: "stakeholder",
+	},
+};
+
 export const EventGlobe = {
 	name: "Event Globe",
 	args: {
@@ -57,10 +65,27 @@ export const EventGlobe = {
 	},
 };
 
+export const ChainGlobe = {
+	name: "Supply Chain Globe",
+	args: {
+		...configs.ChainGlobeConfig,
+		type: "chain",
+	},
+};
+
 export const LocationGlobe = {
 	name: "Location Globe",
 	args: {
-		...configs.DefaultMapConfig,
+		...configs.DefaultGlobeConfig,
 		type: "location",
 	},
 };
+
+export const ProjectGlobe = {
+	name: "Project Globe",
+	args: {
+		...configs.ProjectGlobeConfig,
+		type: "project",
+	},
+};
+

package/src/@daf/core/components/Dashboard/Globe/hook.js

@@ -48,15 +48,30 @@ export const useGlobe = ({
   const isMounted = useRef(true);
 
   const addAllDataToMap = useCallback(() => {
-
-    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
+    console.log('🚀 [GLOBE HOOK] addAllDataToMap called');
+    console.log('🚀 [GLOBE HOOK] data:', data);
+    console.log('🚀 [GLOBE HOOK] mapRef exists:', !!mapRef);
+    console.log('🚀 [GLOBE HOOK] style loaded:', mapRef?.isStyleLoaded());
+    
+    if (!data || !mapRef) {
+      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - missing data or mapRef');
+      return;
+    }
+    
+    if (!mapRef.isStyleLoaded()) {
+      console.log('⏳ [GLOBE HOOK] Style not loaded yet, retrying in 100ms...');
+      setTimeout(() => {
+        addAllDataToMap();
+      }, 100);
       return;
     }
     
-    // Prevent multiple calls with empty data
     if (data.length === 0) {
+      console.log('❌ [GLOBE HOOK] addAllDataToMap early return - no data');
       return;
     }
+    
+    console.log('✅ [GLOBE HOOK] Starting to add markers to map...');
 
     // Clear existing markers using functional update to avoid dependency issues
     setMapMarkers(currentMarkers => {
@@ -108,8 +123,14 @@ export const useGlobe = ({
       const newMarkers = [];
       const maxTotal = Math.max(...(data || []).map((d) => d.total || 0));
       
+      console.log('🎯 [GLOBE HOOK] Processing data items:', data.length);
       data.forEach((d, i) => {
+        console.log(`🎯 [GLOBE HOOK] Processing item ${i}:`, d);
+        console.log(`🎯 [GLOBE HOOK] Item ${i} marker:`, d?.marker);
+        console.log(`🎯 [GLOBE HOOK] Item ${i} lat/lng:`, d?.marker?.lat, d?.marker?.lng);
+        
         if (d?.marker?.lat && d?.marker?.lng) {
+          console.log(`✅ [GLOBE HOOK] Item ${i} has valid coordinates, creating marker...`);
           let marker;
           let iconClassName = "";
           let innerHtml = "";
@@ -212,6 +233,8 @@ export const useGlobe = ({
               .setLngLat([d.marker.lng, d.marker.lat])
               .setPopup(new mapboxgl.Popup().setDOMContent(div))
               .addTo(mapRef);
+              
+            console.log(`🎉 [GLOBE HOOK] Marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
 
           } else if (type === "territory") {
             // Handle territory polygons
@@ -297,6 +320,8 @@ export const useGlobe = ({
               .setLngLat([d.marker.lng, d.marker.lat])
               .setPopup(new mapboxgl.Popup().setDOMContent(div))
               .addTo(mapRef);
+              
+            console.log(`🎉 [GLOBE HOOK] Default marker ${i} added to map at:`, [d.marker.lng, d.marker.lat]);
           }
 
           // Add click handler
@@ -330,6 +355,7 @@ export const useGlobe = ({
       mapboxgl.accessToken = MAP_TOKEN;
 
       // Create the map with Mapbox GL JS - 3D globe
+      console.log('🗺️ [GLOBE HOOK] Creating map with style:', STYLE_URL);
       const map = new mapboxgl.Map({
         container: container.current,
         style: STYLE_URL,
@@ -348,9 +374,13 @@ export const useGlobe = ({
 
       // Configure the map when style loads
       map.on('style.load', () => {
+        console.log('🎨 [GLOBE HOOK] Style loaded event triggered');
+        console.log('🎨 [GLOBE HOOK] Map style loaded:', map.isStyleLoaded());
         
         // Wait a bit for the style to fully load
         setTimeout(() => {
+          console.log('🎨 [GLOBE HOOK] After timeout - Map style loaded:', map.isStyleLoaded());
+          
           // Set fog for the space background effect with stars - simplified to avoid errors
           try {
             map.setFog({
@@ -445,9 +475,10 @@ export const useGlobe = ({
       // Add navigation controls
       map.addControl(new mapboxgl.NavigationControl(), 'top-right');
 
+      console.log('🗺️ [GLOBE HOOK] Map created successfully');
       return map;
     } catch (error) {
-      console.error('Error creating Mapbox GL JS globe:', error);
+      console.error('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -460,10 +491,13 @@ export const useGlobe = ({
   // }, [initialMarkerSetIsDone]);
 
   useEffect(() => {
+    console.log('🔄 [GLOBE HOOK] useEffect for map creation - mapRef:', !!mapRef);
 
     if (!mapRef) {
+      console.log('🔄 [GLOBE HOOK] Creating map instance...');
       const instance = createInstance();
       if (instance) {
+        console.log('🔄 [GLOBE HOOK] Map instance created, setting mapRef');
         setMapRef(instance);
         
         // Add comprehensive resize detection for Mapbox GL JS responsiveness
@@ -552,15 +586,24 @@ export const useGlobe = ({
   }, [polygon, mapRef]);
 
   useEffect(() => {
-
+    console.log('📥 [GLOBE HOOK] allData received:', allData);
+    console.log('📥 [GLOBE HOOK] allData length:', allData?.length);
+    
     if (allData) {
       if (allData.length === 0) {
+        console.log('⚠️ [GLOBE HOOK] Empty data array');
         setEmptyStateIsVisible(true);
       } else if (emptyStateIsVisible) {
         setEmptyStateIsVisible(false);
       }
-      setData(filterValidGPS(allData));
+      
+      console.log('🔍 [GLOBE HOOK] Filtering data with filterValidGPS...');
+      const filteredData = filterValidGPS(allData);
+      console.log('🔍 [GLOBE HOOK] filtered data result:', filteredData);
+      console.log('🔍 [GLOBE HOOK] filtered data length:', filteredData.length);
+      setData(filteredData);
     } else {
+      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -591,7 +634,20 @@ export const useGlobe = ({
   }, [user, mapRef, allData]);
 
   useEffect(() => {
-    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
+    console.log('🔄 [GLOBE HOOK] useEffect triggered:', { 
+      mapRef: !!mapRef, 
+      data: !!data, 
+      dataLength: data?.length, 
+      initialMarkerSetIsDone, 
+      styleLoaded: mapRef?.isStyleLoaded() 
+    });
+    
+    if (mapRef && data && !initialMarkerSetIsDone) {
+      console.log('🚀 [GLOBE HOOK] Attempting to add markers...');
+      console.log('🚀 [GLOBE HOOK] Style loaded check:', mapRef.isStyleLoaded());
+      
+      // Try to add markers immediately, and if style isn't loaded, 
+      // the addAllDataToMap function will handle it
       setInitialMarkerSetIsDone(true);
       addAllDataToMap();
     }

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

@@ -111,7 +111,7 @@ function Globe({
 	renderSider = null,
 	renderMarker = null,
 	type = "default",
-	showSider = true,
+	showSider = false,
 	filtersConfig,
 	onFilterChange = () => { },
 	isSatellite = false,
@@ -122,11 +122,29 @@ function Globe({
 }) {
 	// Map data to include marker coordinates
 	const mappedData = useMemo(
-		() =>
-			data.map((d) => ({
-				...d,
-				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
-			})),
+		() => {
+			console.log('📊 [GLOBE COMPONENT] Original data received:', data);
+			console.log('📊 [GLOBE COMPONENT] Data length:', data?.length);
+			
+			if (!data || data.length === 0) {
+				console.log('❌ [GLOBE COMPONENT] No data to map');
+				return [];
+			}
+			
+			const mapped = data.map((d, i) => {
+				console.log(`📊 [GLOBE COMPONENT] Mapping item ${i}:`, d);
+				console.log(`📊 [GLOBE COMPONENT] Item ${i} GPS:`, d?.gps);
+				const result = {
+					...d,
+					marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+				};
+				console.log(`📊 [GLOBE COMPONENT] Item ${i} mapped result:`, result);
+				return result;
+			});
+			
+			console.log('📊 [GLOBE COMPONENT] Final mapped data:', mapped);
+			return mapped;
+		},
 		[data],
 	);
 

package/src/@daf/core/components/Dashboard/Globe/storyConfig.js

@@ -0,0 +1,243 @@
+import { storyConfig as EventConfig } from "./storyConfig1.js";
+// Create default configs since the other files were deleted
+const DefaultGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 40.7128, longitude: -74.0060 },
+			name: "New York City",
+			description: "Major metropolitan area in the United States",
+			total: 15,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 51.5074, longitude: -0.1278 },
+			name: "London",
+			description: "Capital of the United Kingdom",
+			total: 12,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 35.6762, longitude: 139.6503 },
+			name: "Tokyo",
+			description: "Capital of Japan",
+			total: 8,
+			sources: 1,
+		},
+		{
+			gps: { latitude: -33.8688, longitude: 151.2093 },
+			name: "Sydney",
+			description: "Major city in Australia",
+			total: 6,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -22.9068, longitude: -43.1729 },
+			name: "Rio de Janeiro",
+			description: "Major city in Brazil",
+			total: 10,
+			sources: 1,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "City", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const TerritoryGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 39.9042, longitude: 116.4074 },
+			name: "Beijing Territory",
+			description: "Administrative region in China",
+			total: 25,
+			sources: 4,
+		},
+		{
+			gps: { latitude: 55.7558, longitude: 37.6176 },
+			name: "Moscow Region",
+			description: "Federal subject of Russia",
+			total: 18,
+			sources: 3,
+		},
+		{
+			gps: { latitude: -26.2041, longitude: 28.0473 },
+			name: "Gauteng Province",
+			description: "Province in South Africa",
+			total: 14,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 19.4326, longitude: -99.1332 },
+			name: "Mexico City Territory",
+			description: "Federal district in Mexico",
+			total: 20,
+			sources: 3,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Territory", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const StakeholderGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 48.8566, longitude: 2.3522 },
+			name: "Paris NGO",
+			description: "Environmental NGO in France",
+			total: 12,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 37.7749, longitude: -122.4194 },
+			name: "San Francisco Tech",
+			description: "Technology company in California",
+			total: 8,
+			sources: 1,
+		},
+		{
+			gps: { latitude: 1.3521, longitude: 103.8198 },
+			name: "Singapore Corp",
+			description: "Multinational corporation",
+			total: 15,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 52.5200, longitude: 13.4050 },
+			name: "Berlin Institute",
+			description: "Research institute in Germany",
+			total: 9,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -34.6037, longitude: -58.3816 },
+			name: "Buenos Aires Union",
+			description: "Labor union in Argentina",
+			total: 11,
+			sources: 1,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Stakeholder", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const ChainGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 23.1291, longitude: 113.2644 },
+			name: "Guangzhou Manufacturing",
+			description: "Electronics manufacturing hub in China",
+			total: 22,
+			sources: 4,
+		},
+		{
+			gps: { latitude: 12.9716, longitude: 77.5946 },
+			name: "Bangalore Tech Hub",
+			description: "Software development center in India",
+			total: 18,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 41.8781, longitude: -87.6298 },
+			name: "Chicago Logistics",
+			description: "Transportation and logistics hub in USA",
+			total: 16,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 25.2048, longitude: 55.2708 },
+			name: "Dubai Trade Center",
+			description: "International trade and commerce hub",
+			total: 14,
+			sources: 3,
+		},
+		{
+			gps: { latitude: -23.5505, longitude: -46.6333 },
+			name: "São Paulo Distribution",
+			description: "Distribution center in Brazil",
+			total: 12,
+			sources: 2,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Supply Chain Node", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+const ProjectGlobeConfig = {
+	data: [
+		{
+			gps: { latitude: 6.5244, longitude: 3.3792 },
+			name: "Lagos Solar Project",
+			description: "Renewable energy project in Nigeria",
+			total: 8,
+			sources: 2,
+		},
+		{
+			gps: { latitude: -1.2921, longitude: 36.8219 },
+			name: "Nairobi Water Initiative",
+			description: "Water management project in Kenya",
+			total: 12,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 13.7563, longitude: 100.5018 },
+			name: "Bangkok Green City",
+			description: "Urban sustainability project in Thailand",
+			total: 15,
+			sources: 4,
+		},
+		{
+			gps: { latitude: -12.0464, longitude: -77.0428 },
+			name: "Lima Education Hub",
+			description: "Educational development project in Peru",
+			total: 10,
+			sources: 2,
+		},
+		{
+			gps: { latitude: 30.0444, longitude: 31.2357 },
+			name: "Cairo Infrastructure",
+			description: "Infrastructure development project in Egypt",
+			total: 14,
+			sources: 3,
+		},
+		{
+			gps: { latitude: 55.7558, longitude: 37.6176 },
+			name: "Moscow Innovation Center",
+			description: "Technology innovation project in Russia",
+			total: 9,
+			sources: 2,
+		},
+	],
+	renderTooltip: (data) => [
+		{ label: "Project Name", value: data.name || "-" },
+		{ label: "Total Events", value: data.total || 0 },
+		{ label: "Sources", value: data.sources || 0 },
+		{ label: "Description", value: data.description || "-" },
+	],
+	primaryLink: true,
+	showSider: false,
+};
+
+export { DefaultGlobeConfig, TerritoryGlobeConfig, StakeholderGlobeConfig, EventConfig, ChainGlobeConfig, ProjectGlobeConfig };

package/src/@daf/core/components/Dashboard/Globe/storyConfig1.js

@@ -0,0 +1,354 @@
+import CustomIcon from "../../Icon/CustomIcon";
+import DAFTable from "../../Table";
+import MoreTags from "../../Table/MoreTags";
+
+const isMineSite = true;
+
+export const storyConfig = {
+	data: [
+		{
+			gps: {
+				latitude: -1.5457261,
+				longitude: 28.8756306,
+			},
+			name: "Rubaya Mining Site",
+			datastakeId: "LOC-00000000241",
+			description: "A major mining site with multiple operational areas and significant mineral extraction activities. This location has experienced various incidents and events over time.",
+			data: [
+				{
+					_id: "68af116e2cb57a4e3dd2e056",
+					createdBy: "4274fdb4-2798-46ea-a0a6-b4af5d92566e",
+					form: "event",
+					id: "91c3176a-d312-4259-9ddf-9d286ff6df87",
+					datastakeId: "EV-000000000150",
+					name: "Mining Collapse Incident",
+					authorId: "7e17f076-09e7-4668-927c-11c12ccd1346",
+					collectId: "d78271301d04f76dfe0f70ce3c9e114ffe4dc4e0",
+					country: "CD",
+					date: "2025-08-25",
+					typeOfEvent: "incident",
+					implementers: [],
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: ["NAS-00000000105"],
+					published: true,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T14:12:21.395Z",
+					__v: 0,
+					percentageCompletion: 40,
+					eventCategory: "conflict",
+					incindentType: null,
+					initiative: null,
+					meta: null,
+					namespace: "incident",
+					primarySource: null,
+					severity: "moderate",
+					sources: ["7e17f076-09e7-4668-927c-11c12ccd1346"],
+					type: "minor_incident",
+					description: "A minor mining collapse incident that occurred during routine operations. No injuries were reported, but equipment was damaged.",
+				},
+				{
+					_id: "68af1fb6b52f86d82f57e945",
+					createdBy: "b1e3f288-01a2-4cea-95d2-03f65dfede99",
+					form: "event",
+					id: "5bee0d0f-39da-4bd1-85a4-e66276c82303",
+					datastakeId: "EV-000000000153",
+					name: "Security Equipment Request",
+					authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					collectId: "2142bd9f3306c9ec3c823f63bbbbb8fe3ebad7fa",
+					country: "CD",
+					date: "2025-08-11",
+					typeOfEvent: "testimonials",
+					implementers: [],
+					typeOfTestimonials: "request",
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: [],
+					published: true,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T15:10:00.619Z",
+					__v: 0,
+					percentageCompletion: 50,
+					meta: null,
+					namespace: "testimonials",
+					sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
+					type: "correctiveActions",
+					description: "A request for additional security equipment to improve safety measures at the mining site.",
+				},
+				{
+					_id: "68af5d45b52f86d82f580fc8",
+					createdBy: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					form: "event",
+					id: "97348b4c-f7cf-4124-9b70-0f6891a40a15",
+					datastakeId: "EV-000000000161",
+					name: "Major Safety Incident",
+					authorId: "fc4ca5c6-f46d-424f-a948-d66b031a82c3",
+					collectId: "33b9aea707761a7a735aee81ebd29d5656f049fa",
+					country: "CD",
+					date: "2025-08-11",
+					typeOfEvent: "incident",
+					implementers: [],
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: [],
+					published: false,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-27T00:00:00.000Z",
+					updatedAt: "2025-08-27T00:00:00.000Z",
+					__v: 0,
+					percentageCompletion: 40,
+					eventCategory: null,
+					initiative: null,
+					meta: null,
+					namespace: "incident",
+					primarySource: null,
+					severity: "major",
+					sources: ["fc4ca5c6-f46d-424f-a948-d66b031a82c3"],
+					type: "major_incident",
+					description: "A major safety incident that required immediate attention and investigation. This event is currently under review.",
+				},
+			],
+			type: "Mine site",
+			total: 5,
+			sources: 2,
+		},
+		{
+			gps: {
+				latitude: -2.3456789,
+				longitude: 29.1234567,
+			},
+			name: "Kivu Processing Plant",
+			datastakeId: "LOC-00000000242",
+			description: "A mineral processing facility that handles various types of minerals extracted from nearby mining sites.",
+			data: [
+				{
+					_id: "68af116e2cb57a4e3dd2e057",
+					createdBy: "4274fdb4-2798-46ea-a0a6-b4af5d92566e",
+					form: "event",
+					id: "91c3176a-d312-4259-9ddf-9d286ff6df88",
+					datastakeId: "EV-000000000151",
+					name: "Processing Efficiency Improvement",
+					authorId: "7e17f076-09e7-4668-927c-11c12ccd1346",
+					collectId: "d78271301d04f76dfe0f70ce3c9e114ffe4dc4e0",
+					country: "CD",
+					date: "2025-08-20",
+					typeOfEvent: "initiative",
+					implementers: [],
+					associatedSubjects: [],
+					testimonialsSource: [],
+					pictures: [],
+					documents: [],
+					channels: ["NAS-00000000106"],
+					published: true,
+					version: 1,
+					identifiedPerpetrators: [],
+					identifiedVictims: [],
+					assistedVictims: [],
+					mitigationMeasures: [],
+					createdAt: "2025-08-20T00:00:00.000Z",
+					updatedAt: "2025-08-20T14:12:21.395Z",
+					__v: 0,
+					percentageCompletion: 75,
+					eventCategory: "improvement",
+					incindentType: null,
+					initiative: "efficiency",
+					meta: null,
+					namespace: "initiative",
+					primarySource: null,
+					severity: "low",
+					sources: ["7e17f076-09e7-4668-927c-11c12ccd1346"],
+					type: "improvement_initiative",
+					description: "An initiative to improve processing efficiency through new technology implementation.",
+				},
+			],
+			type: "Processing Plant",
+			total: 1,
+			sources: 1,
+		},
+	],
+	filtersConfig: [
+		{
+			label: "Event Type",
+			placeholder: "Select",
+			key: "type",
+			type: "select",
+			value: "A",
+			options: [
+				{ label: "All Events", value: "A" },
+				{ label: "Incidents", value: "incident" },
+				{ label: "Initiatives", value: "initiative" },
+				{ label: "Testimonials", value: "testimonials" },
+			],
+		},
+		{
+			label: "Severity",
+			placeholder: "Select",
+			key: "severity",
+			type: "select",
+			value: undefined,
+			options: [
+				{ label: "All", value: "all" },
+				{ label: "Low", value: "low" },
+				{ label: "Moderate", value: "moderate" },
+				{ label: "Major", value: "major" },
+			],
+		},
+		{
+			type: "slider",
+			label: "Completion Percentage",
+			key: "completion",
+		},
+	],
+	onFilterChange: (v) => {
+		console.log(v);
+	},
+	// tooltipAsText: true,
+	primaryLink: true,
+	renderSider: () =>
+		isMineSite ? (
+			<div className="body-list">
+				<div className="body-row">
+					<span className="label">Event Type</span>
+					<span>Mixed</span>
+				</div>
+
+				<div className="body-row">
+					<span className="label">Total Events</span>
+					<span>4</span>
+				</div>
+
+				<div className="body-row">
+					<span className="label">Severity</span>
+					<span>Mixed</span>
+				</div>
+			</div>
+		) : (
+			<div className="daf-table-wrapper extra-small">
+				<DAFTable
+					loading={false}
+					scroll={{ y: 300 }}
+					className="no-padding no-margin"
+					data={[
+						{ event: "Mining Collapse", type: "Incident", severity: "Moderate", key: 0 },
+						{ event: "Security Request", type: "Testimonial", severity: "Low", key: 1 },
+						{ event: "Safety Incident", type: "Incident", severity: "Major", key: 2 },
+						{ event: "Efficiency Improvement", type: "Initiative", severity: "Low", key: 3 },
+					]}
+					pagination={false}
+					columns={[
+						{
+							title: "Event",
+							dataIndex: "event",
+							key: "event",
+							ellipsis: true,
+							width: 120,
+						},
+						{
+							title: "Type",
+							dataIndex: "type",
+							key: "type",
+							width: 80,
+							render: (_, all) => {
+								return (
+									<MoreTags values={[{ label: all.type }]} maxTextCont={40} />
+								);
+							},
+						},
+						{
+							title: "Severity",
+							dataIndex: "severity",
+							key: "severity",
+							width: 80,
+							render: (_, all) => {
+								return (
+									<MoreTags values={[{ label: all.severity }]} maxTextCont={40} />
+								);
+							},
+						},
+						{
+							title: "",
+							dataIndex: "action",
+							key: "action",
+							width: 34,
+							render: (_, all) => {
+								return <CustomIcon name="LinkNewTab" width={12} height={12} />;
+							},
+						},
+					]}
+					rowKey="key"
+				/>
+			</div>
+		),
+	renderTooltip: (data) => {
+		const correctiveActionsCount = data?.data?.filter(
+			(d) => d.type === "correctiveActions",
+		).length;
+
+		const majorIncidents = data?.data?.filter(
+			(d) => d.type === "major_incident",
+		).length;
+
+		const minorIncidents = data?.data?.filter(
+			(d) => d.type === "minor_incident",
+		).length;
+
+		const moderateIncidents = data?.data?.filter(
+			(d) => d.type === "moderate_incident",
+		).length;
+
+		return [
+			{
+				label: "Major Incidents",
+				color: "#F04438",
+				value: majorIncidents || 0,
+			},
+			{
+				label: "Moderate Incidents", 
+				color: "#FF7A45",
+				value: moderateIncidents || 0,
+			},
+			{
+				label: "Minor Incidents",
+				color: "#FFC069", 
+				value: minorIncidents || 0,
+			},
+			{
+				label: "Corrective Actions",
+				color: "#12b76a",
+				value: correctiveActionsCount || 0,
+			},
+			{
+				label: "Total Events",
+				value: data?.total || 0,
+			},
+			{
+				label: "Sources",
+				value: data?.sources || 0,
+			},
+		];
+	},
+	link: true,
+	onClickLink: (data) => {
+		console.log(data);
+	},
+};

package/.env

@@ -1,8 +0,0 @@
-REACT_APP_API_KEY=
-REACT_APP_AUTH_DOMAIN=
-REACT_APP_PROJECT_ID=
-REACT_APP_STORAGE_BUCKED=
-REACT_APP_SENDER_ID=
-REACT_APP_APP_ID=
-REACT_APP_MEASUREMENT_ID=
-REACT_APP_VAPID_KEY=

package/.vscode/settings.json

@@ -1,13 +0,0 @@
-{
-	"cSpell.words": ["cukura"],
-	"files.autoSave": "afterDelay",
-	"editor.wordWrap": "on",
-	"editor.autoClosingBrackets": "always",
-	"editor.autoClosingComments": "always",
-	"editor.autoClosingQuotes": "always",
-	"editor.defaultFormatter": "esbenp.prettier-vscode",
-	"editor.formatOnPaste": true,
-	"editor.formatOnSave": true,
-	"notebook.defaultFormatter": "esbenp.prettier-vscode",
-	"javascript.format.semicolons": "insert"
-}