datastake-daf 0.6.766 → 0.6.767

package/dist/pages/index.js

@@ -7934,7 +7934,12 @@ const defaultMapConfig = {
   maxZoom: 18,
   preferCanvas: true,
   zoomControl: false,
-  maxBounds: maxBounds
+  maxBounds: maxBounds,
+  zoomSnap: 0.5,
+  zoomDelta: 0.5,
+  wheelPxPerZoomLevel: 150,
+  zoomAnimation: true,
+  zoomAnimationThreshold: 10
 };
 const filterValidGPS = data => {
   const latCheck = lat => lat > -90 || lat < 90;
@@ -8809,7 +8814,7 @@ function StakeholderIcon$1({
           onClickLink(data);
         }
       }),
-      getPopupContainer: () => document.getElementById(data.datastakeId),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
         className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
@@ -9012,8 +9017,7 @@ function LocationIcon({
     // 	isHovering
     // }
     ,
-
-    getPopupContainer: () => document.getElementById(i),
+    getPopupContainer: () => document.getElementById("map"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -9114,6 +9118,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -9155,6 +9160,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -9190,6 +9196,7 @@ function StakeholderIcon({
         link,
         onClickLink: () => onClickLink(marker)
       }),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(Style$c
       // onClick={toggleOpen}
       , {
@@ -9913,7 +9920,13 @@ const useMap = ({
     if (mapRef) {
       L__namespace.control.scale().addTo(mapRef);
       L__namespace.tileLayer(TILE_LAYER_URL, {
-        access_token: MAP_TOKEN
+        access_token: MAP_TOKEN,
+        keepBuffer: 4,
+        updateWhenZooming: false,
+        updateInterval: 200,
+        maxNativeZoom: 18,
+        tileSize: 256,
+        fadeAnimation: true
       }).addTo(mapRef);
     }
   }, [mapRef]);
@@ -9977,6 +9990,23 @@ const useMap = ({
       mapRef.setView([marker.coordinates[0], marker.coordinates[1]], getZoom(mapRef));
     }
   }, [activeMarker, mapRef]);
+  React.useEffect(() => {
+    if (mapRef && type === "chain") {
+      const handleMapClick = e => {
+        const clickedElement = e.originalEvent.target;
+        const isMarkerClick = clickedElement.closest('.marker-chain') || clickedElement.closest('.leaflet-marker-icon');
+        if (!isMarkerClick && selectedMarkersId.length > 0) {
+          setSelectedMarkersId([]);
+          openPopupIdRef.current = null;
+          setMarkerWithPopup(null);
+        }
+      };
+      mapRef.on('click', handleMapClick);
+      return () => {
+        mapRef.off('click', handleMapClick);
+      };
+    }
+  }, [mapRef, type, selectedMarkersId]);
   return {
     container,
     activeMarker,
@@ -10469,6 +10499,7 @@ function SupplyChainMap({
   } = useWidgetFetch({
     config: defaultConfig
   });
+  console.log('data', data);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Supply Chain Map"),
     loading: loading,
@@ -10478,11 +10509,11 @@ function SupplyChainMap({
       data: Array.isArray(data) && data.length > 0 ? data : [],
       renderTooltip: data => {
         const productsText = data?.products?.[0];
-        const minerals = options?.minerals || [];
+        const minerals = options?.mineralOptions || [];
         const participants = data?.stakeholders?.map(stakeholder => stakeholder.name);
         return [{
           label: t("Products"),
-          value: minerals.find(mineral => mineral.value === productsText)?.label || productsText || "-",
+          value: findOptions(productsText, minerals) || productsText || "-",
           ...(productsText && {
             tag: getTagColor(productsText)
           })
@@ -11639,17 +11670,23 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
     }
     return result;
   }, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
+
+  // In BaseGraph.jsx, replace the useEffect with:
   React.useEffect(() => {
     if (nodesToFit.length === 0) return;
-    requestAnimationFrame(() => {
+
+    // Use setTimeout instead of requestAnimationFrame to ensure nodes are rendered
+    const timer = setTimeout(() => {
       fitView({
         padding: 0.4,
         nodes: [...nodesToFit],
         // duration: withDuration ? 300 : undefined,
         maxZoom: 0.9
       });
-    });
-  }, [JSON.stringify(nodesToFit), withDuration]);
+    }, 100); // Small delay to ensure nodes are rendered
+
+    return () => clearTimeout(timer);
+  }, [nodesToFit.length, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
@@ -11678,8 +11715,9 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
         fitView: true // zoom out on default
         ,
         fitViewOptions: {
-          padding: 0.2 //zoom out on default
-          // ...(zoomOutTransition ? { duration: withDuration ? 300 : undefined } : {}),
+          padding: 0.2,
+          //zoom out on default
+          duration: withDuration ? 300 : undefined
         },
         ...props,
         children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
@@ -32912,10 +32950,6 @@ const WorkersTable = ({
 };
 
 const getEventCategoryBySubject = (eventCategoryObject, subject, isSingular = false) => {
-  console.log({
-    eventCategoryObject,
-    subject
-  });
   if (!eventCategoryObject || typeof eventCategoryObject !== 'object') {
     return null;
   }
@@ -34363,7 +34397,7 @@ const getColumns$2 = ({
         className: "daf-default-cell"
       });
     }
-    const operators = all?.operator?.map(operator => operator?.clientLocation?.name);
+    const operators = all?.operator?.map(operator => operator?.locationClient?.name)?.filter(Boolean);
     return operators && operators.length > 0 ? /*#__PURE__*/jsxRuntime.jsx(MoreOptions, {
       data: operators || [],
       toolTipPlacement: operators?.length < 2 ? "topLeft" : "top"
@@ -37557,7 +37591,8 @@ function TradeRelationship({
   filtersConfig,
   onFilterChange = () => {},
   renderTooltipItems = () => [],
-  getTotal = () => 0
+  getTotal = () => 0,
+  onRenderComplete = () => {}
 }) {
   const reactFlowWrapper = React.useRef(null);
   const [nodes, setNodes] = react.useNodesState([]);
@@ -37570,6 +37605,23 @@ function TradeRelationship({
   const [activeNode, setActiveNode] = React.useState(null);
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = React.useState(null);
+  const isFullyRenderedRef = React.useRef(false);
+  const [isFullyRendered, setIsFullyRendered] = React.useState(false);
+  React.useEffect(() => {
+    isFullyRenderedRef.current = false;
+    setIsFullyRendered(false);
+    setActiveNode(null);
+  }, [data]);
+  React.useEffect(() => {
+    if (nodes.length > 0 && edges.length > 0 && !isFullyRenderedRef.current) {
+      const timeoutId = setTimeout(() => {
+        isFullyRenderedRef.current = true;
+        setIsFullyRendered(true);
+        onRenderComplete(true);
+      }, 200);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [nodes.length, edges.length, associatedNodes]);
   React.useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -37609,7 +37661,7 @@ function TradeRelationship({
       return;
     }
     const _nodes = [{
-      id: data.id,
+      id: data.id?.toString(),
       type: "expandedNode",
       position: {
         x: xInit,
@@ -37621,10 +37673,10 @@ function TradeRelationship({
     if (isBilateral) {
       (data.sources || []).forEach(source => {
         const hasPrev = false;
-        _edges.push({
+        const edge = {
           id: `e-${data.id}-${source}`,
-          source: source,
-          type: "default",
+          source: source?.toString(),
+          type: "defaultEdge",
           target: data?.id?.toString(),
           sourceHandle: "left",
           targetHandle: "right",
@@ -37638,7 +37690,8 @@ function TradeRelationship({
             tooltipTitle,
             moreLeft: false
           }
-        });
+        };
+        _edges.push(edge);
       });
     }
     const mapChildren = ({
@@ -37679,7 +37732,7 @@ function TradeRelationship({
         (ch.sources || []).forEach(source => {
           const hasPrev = _prevNodes.find(p => p.id === source);
           const isCustom = !hasPrev ? true : prevChildren.includes(source) ? false : true;
-          _edges.push({
+          const edge = {
             id: `e-${ch.id}-${source}`,
             source: hasPrev ? source : ch?.id?.toString(),
             type: isCustom ? "verticalPath" : "defaultEdge",
@@ -37697,7 +37750,8 @@ function TradeRelationship({
               tooltipTitle,
               moreLeft: prevChildren.length > children.length
             }
-          });
+          };
+          _edges.push(edge);
           if (isCustom) {
             customIndex += 1;
           }
@@ -37736,11 +37790,24 @@ function TradeRelationship({
       prevChildren: !isBilateral ? [data.id] : [],
       maxHeight: 0
     });
+
+    // Check for potential ID mismatches
+    const nodeIds = _nodes.map(n => n.id);
+    _edges.filter(e => {
+      const sourceExists = nodeIds.includes(e.source);
+      const targetExists = nodeIds.includes(e.target);
+      return !sourceExists || !targetExists;
+    });
+
+    // Set nodes first
     setNodes(_nodes);
-    setEdges(_edges);
-  }, [data, activeNode]);
+    const timeoutId = setTimeout(() => {
+      setEdges(_edges);
+    }, 100); // 100ms is imperceptible to users but ensures React Flow is ready
 
-  // Used to find associated nodes, when a node is selected
+    // Cleanup to prevent memory leaks if component unmounts quickly
+    return () => clearTimeout(timeoutId);
+  }, [data, activeNode]);
   React.useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -37806,7 +37873,7 @@ function TradeRelationship({
       });
     },
     ref: reactFlowWrapper
-  });
+  }, JSON.stringify(nodes) + JSON.stringify(edges));
 }
 var TradeRelationship$1 = withProvider(TradeRelationship);
 
@@ -37821,6 +37888,7 @@ const TradeRelationships = ({
   APP
 }) => {
   const [filters, setFilters] = React.useState({});
+  const [isFullyRendered, setIsFullyRendered] = React.useState(true);
   const onFilterChange = filters => {
     setFilters(p => ({
       ...p,
@@ -37869,7 +37937,7 @@ const TradeRelationships = ({
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Trade Relationships"),
     className: "flex flex-1 with-border-header no-p-body",
-    loading: loading,
+    loading: loading || isFullyRendered,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-1 flex-column justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -37892,7 +37960,10 @@ const TradeRelationships = ({
           minZoom: 0.4,
           tooltipTitle: "Trade",
           filtersConfig: filterConfig,
-          onFilterChange: onFilterChange
+          onFilterChange: onFilterChange,
+          onRenderComplete: data => {
+            setIsFullyRendered(!data);
+          }
         })
       })
     })

package/dist/utils/index.js

@@ -7085,7 +7085,12 @@ const defaultMapConfig = {
   maxZoom: 18,
   preferCanvas: true,
   zoomControl: false,
-  maxBounds: maxBounds
+  maxBounds: maxBounds,
+  zoomSnap: 0.5,
+  zoomDelta: 0.5,
+  wheelPxPerZoomLevel: 150,
+  zoomAnimation: true,
+  zoomAnimationThreshold: 10
 };
 
 styled__default["default"].div`
@@ -7724,6 +7729,11 @@ function getRedirectPath(user, fallback = '', app, isDatastake) {
 }
 
 const en = {
+  "accounts": "Accounts",
+  "users": "Users",
+  "subjects": "Subjects",
+  "active-users": "Active Users",
+  "total-data-points": "Total Data Points",
   "Identified Customers": "Identified Customers",
   "Identified Suppliers": "Identified Suppliers",
   "Associated Mine Sites": "Associated Mine Sites",
@@ -9037,6 +9047,11 @@ const en = {
 };
 
 const fr = {
+  "accounts": "Comptes",
+  "users": "Utilisateurs",
+  "subjects": "Sujets",
+  "active-users": "Utilisateurs Actifs",
+  "total-data-points": "Total Points de Données",
   "Identified Customers": "Clients identifiés",
   "Identified Suppliers": "Fournisseurs identifiés",
   "Associated Mine Sites": "Sites miniers associés",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.766",
+	"version": "0.6.767",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",
@@ -15,6 +15,9 @@
 		"buffer": "^6.0.3",
 		"countries-list": "^2.6.1",
 		"country-city-location": "^1.0.13",
+		"d3-selection": "^3.0.0",
+		"d3-transition": "^3.0.1",
+		"d3-zoom": "^3.0.0",
 		"dayjs": "^1.11.12",
 		"deepmerge": "^4.3.1",
 		"docx": "^9.5.1",

package/src/@daf/core/components/Dashboard/Map/ChainIcon/Markers/StakeholderMarker.js

@@ -234,7 +234,7 @@ export default function StakeholderIcon({
 						onClickLink(data);
 					},
 				})}
-				getPopupContainer={() => document.getElementById(data.datastakeId)}
+				getPopupContainer={() => document.getElementById("map")}
 			>
 				<StakeholderMarker
 					className={`${data.type} ${

package/src/@daf/core/components/Dashboard/Map/ChainIcon/index.js

@@ -213,8 +213,7 @@ export default function LocationIcon({
 			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
 			// 	isHovering
 			// }
-
-			getPopupContainer={() => document.getElementById(i)}
+			getPopupContainer={() => document.getElementById("map")}
 		>
 			<div style={{ position: "relative", display: "inline-block" }}>
 				{(isSelected || selectedMarkersId.length === 0) && (

package/src/@daf/core/components/Dashboard/Map/StakeholderIcon/index.js

@@ -42,6 +42,7 @@ export default function StakeholderIcon({
               link,
               onClickLink: () => onClickLink(marker),
             })}
+            getPopupContainer={() => document.getElementById("map")}
           >
             <div
               key="single-marker"
@@ -91,6 +92,7 @@ export default function StakeholderIcon({
               link,
               onClickLink: () => onClickLink(marker),
             })}
+            getPopupContainer={() => document.getElementById("map")}
           >
             <div
               style={{
@@ -132,6 +134,7 @@ export default function StakeholderIcon({
           link,
           onClickLink: () => onClickLink(marker),
         })}
+        getPopupContainer={() => document.getElementById("map")}
       >
         <Style
           // onClick={toggleOpen}

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

@@ -283,7 +283,15 @@ export const useMap = ({
 	useEffect(() => {
 		if (mapRef) {
 			L.control.scale().addTo(mapRef);
-			L.tileLayer(TILE_LAYER_URL, { access_token: MAP_TOKEN }).addTo(mapRef);
+			L.tileLayer(TILE_LAYER_URL, { 
+				access_token: MAP_TOKEN,
+				keepBuffer: 4,
+				updateWhenZooming: false,
+				updateInterval: 200,  
+				maxNativeZoom: 18,
+				tileSize: 256,
+				fadeAnimation: true,      
+			}).addTo(mapRef);
 		}
 	}, [mapRef]);
 
@@ -362,6 +370,28 @@ export const useMap = ({
 		}
 	}, [activeMarker, mapRef]);
 
+	useEffect(() => {
+		if (mapRef && type === "chain") {
+			const handleMapClick = (e) => {
+				const clickedElement = e.originalEvent.target;
+				const isMarkerClick = clickedElement.closest('.marker-chain') || 
+									 clickedElement.closest('.leaflet-marker-icon');
+				
+				if (!isMarkerClick && selectedMarkersId.length > 0) {
+					setSelectedMarkersId([]);
+					openPopupIdRef.current = null;
+					setMarkerWithPopup(null);
+				}
+			};
+
+			mapRef.on('click', handleMapClick);
+
+			return () => {
+				mapRef.off('click', handleMapClick);
+			};
+		}
+	}, [mapRef, type, selectedMarkersId]);
+
 	return {
 		container,
 		activeMarker,

package/src/@daf/core/components/Graphs/TradeRelationship/index.jsx

@@ -21,6 +21,7 @@ function TradeRelationship({
   onFilterChange = () => {},
   renderTooltipItems = () => [],
   getTotal = () => 0,
+  onRenderComplete = () => {},
 }) {
   const reactFlowWrapper = useRef(null);
   const [nodes, setNodes] = useNodesState([]);
@@ -30,6 +31,27 @@ function TradeRelationship({
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = useState(null);
 
+  const isFullyRenderedRef = useRef(false);
+  const [isFullyRendered, setIsFullyRendered] = useState(false);
+
+  useEffect(() => {
+    isFullyRenderedRef.current = false;
+    setIsFullyRendered(false);
+    setActiveNode(null);
+  }, [data]);
+
+  useEffect(() => {
+    if (nodes.length > 0 && edges.length > 0 && !isFullyRenderedRef.current) {
+      const timeoutId = setTimeout(() => {
+        isFullyRenderedRef.current = true;
+        setIsFullyRendered(true);
+        onRenderComplete(true);
+      }, 200);
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, [nodes.length, edges.length, associatedNodes]);
+  
   useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -58,7 +80,7 @@ function TradeRelationship({
     [edges, activeNode, associatedNodes]
   );
 
-  useEffect(() => {
+  useEffect(() => {    
     let yInit = 0;
     let xInit = 0;
     const isBilateral = data?.sources?.length >= 1;
@@ -71,10 +93,9 @@ function TradeRelationship({
       setEdges([]);
       return;
     }
-
     const _nodes = [
       {
-        id: data.id,
+        id: data.id?.toString(),
         type: "expandedNode",
         position: {
           x: xInit,
@@ -89,10 +110,10 @@ function TradeRelationship({
     if (isBilateral) {
       (data.sources || []).forEach((source) => {
         const hasPrev = false;
-        _edges.push({
+        const edge = {
           id: `e-${data.id}-${source}`,
-          source: source,
-          type: "default",
+          source: source?.toString(),
+          type: "defaultEdge",
           target: data?.id?.toString(),
           sourceHandle: "left",
           targetHandle: "right",
@@ -106,7 +127,8 @@ function TradeRelationship({
             tooltipTitle,
             moreLeft: false,
           },
-        });
+        };
+        _edges.push(edge);
       });
     }
 
@@ -164,7 +186,7 @@ function TradeRelationship({
             ? false
             : true;
 
-          _edges.push({
+          const edge = {
             id: `e-${ch.id}-${source}`,
             source: hasPrev ? source : ch?.id?.toString(),
             type: isCustom ? "verticalPath" : "defaultEdge",
@@ -182,7 +204,8 @@ function TradeRelationship({
               tooltipTitle,
               moreLeft: prevChildren.length > children.length,
             },
-          });
+          };          
+          _edges.push(edge);
 
           if (isCustom) {
             customIndex += 1;
@@ -230,11 +253,25 @@ function TradeRelationship({
       maxHeight: 0,
     });
 
+        // Check for potential ID mismatches
+    const nodeIds = _nodes.map(n => n.id);
+    const edgeIssues = _edges.filter(e => {
+      const sourceExists = nodeIds.includes(e.source);
+      const targetExists = nodeIds.includes(e.target);
+      return !sourceExists || !targetExists;
+    });
+    
+    // Set nodes first
     setNodes(_nodes);
-    setEdges(_edges);
+    
+    const timeoutId = setTimeout(() => {
+      setEdges(_edges);
+    }, 100); // 100ms is imperceptible to users but ensures React Flow is ready
+    
+    // Cleanup to prevent memory leaks if component unmounts quickly
+    return () => clearTimeout(timeoutId);
   }, [data, activeNode]);
 
-  // Used to find associated nodes, when a node is selected
   useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -293,6 +330,7 @@ function TradeRelationship({
 
   return (
     <BaseGraph
+      key={JSON.stringify(nodes) + JSON.stringify(edges)}
       nodes={mappedNodes}
       edges={mappedEdges}
       maxZoom={maxZoom}

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -49,18 +49,22 @@ const BaseGraph = forwardRef(function BaseGraph(
 		return result;
 	}, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
 
+	// In BaseGraph.jsx, replace the useEffect with:
 	useEffect(() => {
 		if (nodesToFit.length === 0) return;
 
-		requestAnimationFrame(() => {
+		// Use setTimeout instead of requestAnimationFrame to ensure nodes are rendered
+		const timer = setTimeout(() => {
 			fitView({
 				padding: 0.4,
 				nodes: [...nodesToFit],
 				// duration: withDuration ? 300 : undefined,
 				maxZoom: 0.9,
 			});
-		});
-	}, [JSON.stringify(nodesToFit), withDuration]);
+		}, 100); // Small delay to ensure nodes are rendered
+
+		return () => clearTimeout(timer);
+	}, [nodesToFit.length, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
 
 	return (
 		<ComponentWithFocus>
@@ -86,7 +90,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 					fitView={true} // zoom out on default
 					fitViewOptions={{
 						padding: 0.2, //zoom out on default
-						// ...(zoomOutTransition ? { duration: withDuration ? 300 : undefined } : {}),
+						duration: withDuration ? 300 : undefined,
 					}}
 					{...props}
 				>