datastake-daf 0.6.271 → 0.6.272

package/package.json

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

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

@@ -48,30 +48,15 @@ export const useGlobe = ({
   const isMounted = useRef(true);
 
   const addAllDataToMap = useCallback(() => {
-    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);
+
+    if (!data || !mapRef || !mapRef.isStyleLoaded()) {
       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 => {
@@ -123,14 +108,8 @@ 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 = "";
@@ -233,8 +212,6 @@ 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
@@ -320,8 +297,6 @@ 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
@@ -355,7 +330,6 @@ 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,
@@ -374,13 +348,9 @@ 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({
@@ -475,10 +445,9 @@ 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('❌ [GLOBE HOOK] Error creating Mapbox GL JS globe:', error);
+      console.error('Error creating Mapbox GL JS globe:', error);
       return null;
     }
   }, []);
@@ -491,13 +460,10 @@ 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
@@ -586,24 +552,15 @@ 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);
       }
-      
-      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);
+      setData(filterValidGPS(allData));
     } else {
-      console.log('❌ [GLOBE HOOK] No allData provided');
       setData(null);
     }
   }, [allData, emptyStateIsVisible]);
@@ -634,20 +591,7 @@ export const useGlobe = ({
   }, [user, mapRef, allData]);
 
   useEffect(() => {
-    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
+    if (mapRef && data && !initialMarkerSetIsDone && mapRef.isStyleLoaded()) {
       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 = false,
+	showSider = true,
 	filtersConfig,
 	onFilterChange = () => { },
 	isSatellite = false,
@@ -122,29 +122,11 @@ function Globe({
 }) {
 	// Map data to include marker coordinates
 	const mappedData = useMemo(
-		() => {
-			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.map((d) => ({
+				...d,
+				marker: { lat: d?.gps?.latitude, lng: d?.gps?.longitude },
+			})),
 		[data],
 	);
 

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

@@ -93,6 +93,7 @@ const EForm = () => {
 						data={editValues}
 						getAppHeader={storyData.getAppHeader}
 						getApiBaseUrl={storyData.getApiBaseUrl}
+						fullWidth={true}
 						evaluationConfig={
 							[
 								// {

package/src/@daf/core/components/EditForm/_index.scss

@@ -53,6 +53,7 @@
     line-height: 20px !important;
     color: #001529;
   }
+
   .ant-page-header {
     .ant-page-header-heading-left {
       overflow: initial;
@@ -355,6 +356,7 @@
       overflow: auto;
       flex-direction: column;
       padding: 20px 100px 0 100px;
+
       &.has-section {
         width: calc(100% - 200px);
       }
@@ -366,6 +368,10 @@
         min-height: 100%;
         margin: auto;
 
+        &.full-width-form {
+          max-width: unset;
+        }
+
         @media screen and (max-width: 1200px) {
           min-width: 700px;
         }
@@ -375,16 +381,16 @@
         }
 
         .with-comment {
-          & > .ant-form-item-label > label {
+          &>.ant-form-item-label>label {
             width: 100%;
 
-            & > span {
+            &>span {
               display: flex;
               justify-content: space-between;
               width: 100%;
 
-              & > span {
-                & > button {
+              &>span {
+                &>button {
                   line-height: 1;
                   height: inherit;
                   font-size: 14px;
@@ -394,7 +400,7 @@
             }
           }
 
-          &.i-radioGroup > .ant-form-item-label > label > span {
+          &.i-radioGroup>.ant-form-item-label>label>span {
             font-style: normal;
             font-weight: bold;
             font-size: 18px;
@@ -473,20 +479,25 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
             .ant-transfer-list {
               height: 300px;
+
               .ant-transfer-list-body {
                 overflow-y: auto;
+
                 .ant-transfer-list-body-customize-wrapper {
                   padding: 0;
                 }
               }
+
               .ant-transfer-list-header {
                 .ant-transfer-list-header-selected {
                   display: flex;
                   flex-direction: row-reverse;
                   width: 100%;
                   justify-content: space-between;
+
                   .ant-transfer-list-header-title {
                     position: inherit;
                     font-size: var(--font-size-lg);
@@ -496,13 +507,16 @@
                 }
               }
             }
+
             .ant-transfer-operation {
               display: flex;
               justify-content: space-around;
               width: 100px;
               margin: 10px;
+
               button {
                 transform: rotate(90deg);
+
                 .anticon {
                   position: absolute;
                   top: 4px;
@@ -513,6 +527,7 @@
             }
           }
         }
+
         .ant-row.ant-form-item.comment-textarea {
           margin-top: -12px;
 
@@ -556,7 +571,8 @@
           align-self: stretch;
           flex-grow: 0;
         }
-        .i-transfer > .ant-form-item-label > label {
+
+        .i-transfer>.ant-form-item-label>label {
           padding: 14px 0;
         }
 
@@ -568,7 +584,7 @@
         }
 
         .i-modal {
-          & > .ant-col.ant-form-item-label label {
+          &>.ant-col.ant-form-item-label label {
             margin-top: 1.5rem !important;
             font-size: 18px;
             font-weight: 700;
@@ -576,7 +592,7 @@
             line-height: 22px;
             color: #001529;
 
-            span > span {
+            span>span {
               font-size: 18px;
               font-weight: 700;
               font-style: normal;
@@ -600,6 +616,7 @@
             line-height: var(--size);
             min-height: 32px;
             padding: 5px 0;
+
             &.even {
               background: #f9fafc;
             }
@@ -701,20 +718,25 @@
       }
     }
   }
+
   .total100 {
     display: flex;
     flex-direction: column;
     width: 100%;
+
     .ant-space-item:nth-of-type(3n) {
       flex-grow: initial;
     }
+
     .ant-space-item:not(:last-of-type) {
       width: calc(50% - 4px);
     }
+
     .ant-space {
       margin-top: 8px;
     }
   }
+
   .risk-plan {
     display: flex;
     flex-direction: row;
@@ -725,10 +747,12 @@
     border-radius: 2px;
     color: #001529;
     flex-wrap: wrap;
+
     .subScore {
       display: flex;
       min-width: 100px;
       padding-top: 3.5px;
+
       p {
         margin: 0;
         margin-bottom: 4px;
@@ -752,10 +776,12 @@
       }
     }
   }
+
   .risk-name {
     color: #001529;
     font-style: italic;
   }
+
   .i-imageUpload {
     margin-top: 22px;
   }
@@ -908,9 +934,11 @@
     line-height: 20px !important;
     color: #001529;
   }
+
   .ant-page-header {
     .ant-space {
       width: 100%;
+
       .ant-space-item {
         width: 100%;
       }
@@ -1238,6 +1266,10 @@
         min-height: 100%;
         margin: auto;
 
+        &.full-width-form {
+          max-width: unset;
+        }
+
         .ant-input-number-group-wrapper {
           width: 100%;
         }
@@ -1258,13 +1290,13 @@
           .ant-form-item-label label {
             width: 100%;
 
-            & > span {
+            &>span {
               display: flex;
               justify-content: space-between;
               width: 100%;
 
-              & > span {
-                & > button {
+              &>span {
+                &>button {
                   line-height: 1;
                   height: inherit;
                   font-size: 14px;
@@ -1274,7 +1306,7 @@
             }
           }
 
-          &.i-radioGroup > .ant-form-item-label > label > span {
+          &.i-radioGroup>.ant-form-item-label>label>span {
             font-style: normal;
             font-weight: bold;
             font-size: 18px;
@@ -1353,20 +1385,25 @@
             width: 100%;
             display: flex;
             flex-direction: column;
+
             .ant-transfer-list {
               height: 300px;
+
               .ant-transfer-list-body {
                 overflow-y: auto;
+
                 .ant-transfer-list-body-customize-wrapper {
                   padding: 0;
                 }
               }
+
               .ant-transfer-list-header {
                 .ant-transfer-list-header-selected {
                   display: flex;
                   flex-direction: row-reverse;
                   width: 100%;
                   justify-content: space-between;
+
                   .ant-transfer-list-header-title {
                     position: inherit;
                     font-size: var(--font-size-lg);
@@ -1376,13 +1413,16 @@
                 }
               }
             }
+
             .ant-transfer-operation {
               display: flex;
               justify-content: space-around;
               width: 100px;
               margin: 10px;
+
               button {
                 transform: rotate(90deg);
+
                 .anticon {
                   position: absolute;
                   top: 4px;
@@ -1410,6 +1450,7 @@
               display: none;
             }
           }
+
           .ant-form-item-control-input {
             max-width: 100%;
           }
@@ -1456,7 +1497,7 @@
           flex: 1;
         }
 
-        .i-transfer > .ant-form-item-label > label {
+        .i-transfer>.ant-form-item-label>label {
           padding: 14px 0;
         }
 
@@ -1499,7 +1540,7 @@
         }
 
         .i-modal {
-          & > .ant-col.ant-form-item-label label {
+          &>.ant-col.ant-form-item-label label {
             margin-top: 1.5rem !important;
             font-size: 18px;
             font-weight: 700;
@@ -1507,7 +1548,7 @@
             line-height: 22px;
             color: #001529;
 
-            span > span {
+            span>span {
               font-size: 18px;
               font-weight: 700;
               font-style: normal;
@@ -1563,6 +1604,7 @@
           .ajax-modal-view {
             padding-top: 0px;
           }
+
           .total-inputs-1 {
             .ajax-modal-view {
               .remove-button-row {
@@ -1827,16 +1869,20 @@
     display: flex;
     flex-direction: column;
     width: 100%;
+
     .ant-space-item:nth-of-type(3n) {
       flex-grow: initial;
     }
+
     .ant-space-item:not(:last-of-type) {
       width: calc(50% - 4px);
     }
+
     .ant-space {
       margin-top: 8px;
     }
   }
+
   .risk-plan {
     padding: var(--size-lg);
     border-radius: 4px;
@@ -1908,11 +1954,11 @@
   }
 
   .ant-upload-list {
-    width: var(--static-width, 614px) !important;  
+    width: var(--static-width, 614px) !important;
   }
 
   .ant-select-selector {
-    width: var(--static-width) !important;    
+    width: var(--static-width) !important;
   }
 
   .ant-upload-list-item-container {
@@ -2082,4 +2128,4 @@
       flex: 1;
     }
   }
-}
+}

package/src/@daf/core/components/EditForm/form.jsx

@@ -54,6 +54,7 @@ export const EditForm = ({
 	changeErrors = () => {},
 	evaluationConfig = [],
 	staticWidth = "614px",
+	fullWidth = false,
 }) => {
 	const [isSubmitting] = useState(false);
 	const formData = JSON.parse(JSON.stringify(convertUndefinedToNull(data) || {}));
@@ -342,8 +343,8 @@ export const EditForm = ({
 						key={id}
 						name={id}
 						layout="vertical"
-						style={{ maxWidth: 700 }}
-						className={`main-form${formClass ? ` ${formClass}` : ""}`}
+						style={{ maxWidth: fullWidth ? "unset" : 700 }}
+						className={`main-form${formClass ? ` ${formClass}` : ""} `}
 						onValuesChange={(_changedValue, _allValues) => {
 							const changedValue = { ..._changedValue };
 							const allValues = { ..._allValues };

package/src/@daf/core/components/ViewForm/ViewForm.stories.js

@@ -35,6 +35,7 @@ const ViewForm = ({ evalConfig }) => {
 			user={{ language: "en" }}
 			getApiBaseUrl={storyData.getApiBaseUrl}
 			evaluationConfig={evalConfig}
+			fullWidth={true}
 		/>
 	);
 };