datastake-daf 0.6.766 → 0.6.768

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.768",
 	"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

@@ -90,7 +90,7 @@ export default function StakeholderIcon({
 	useEffect(() => {
 		linkNodesData.map((node) => {
 			const isConnectingToStakeholder = node.isStakeholder;
-			const id = `${data.datastakeId}-${node.stakeholderId}`;
+			const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
 			const targetsParentId = node.parentId;
 			const targetMarkerIndex = node.stakeholdersIndex;
 			const isSibling = targetsParentId === parentId;
@@ -234,7 +234,10 @@ export default function StakeholderIcon({
 						onClickLink(data);
 					},
 				})}
-				getPopupContainer={() => document.getElementById(data.datastakeId)}
+				getPopupContainer={(triggerNode) => {
+					const mapElement = document.getElementById("map");
+					return mapElement || triggerNode.parentElement || document.body;
+				}}
 			>
 				<StakeholderMarker
 					className={`${data.type} ${

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

@@ -32,7 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const root = useRef(null);
+	const rootsMapRef = useRef(new Map());
+	const markersRef = useRef([])
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -75,7 +76,22 @@ export default function LocationIcon({
 	}, [data.stakeholders, zoom]);
 
 	useEffect(() => {
-		stakeholdersOfLocation.map((stakeholder, index) => {
+		const currentRoots = rootsMapRef.current;
+		const currentMarkers = markersRef.current;
+
+		currentMarkers.forEach(marker => {
+			if (mapRef.hasLayer(marker)) {
+				mapRef.removeLayer(marker);
+			}
+		});
+		currentRoots.forEach(root => {
+			root.unmount();
+		});
+		currentRoots.clear();
+		markersRef.current = [];
+
+		// Create new markers
+		stakeholdersOfLocation.forEach((stakeholder, index) => {
 			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
@@ -94,6 +110,7 @@ export default function LocationIcon({
 			const pathLocLatLng = mapRef.layerPointToLatLng(pathLocPoint);
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
+			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
 					html: `<div id="${markerId}"></div>`,
@@ -102,31 +119,38 @@ export default function LocationIcon({
 				}),
 			}).addTo(mapRef);
 
-			const div = document.getElementById(markerId);
-			root.current = createRoot(div);
+			markersRef.current.push(marker);
 
-			root.current.render(
-				<StakeholderIcon
-					data={stakeholder}
-					zoom={zoom}
-					allData={allData}
-					link={link}
-					parentId={data.datastakeId}
-					renderTooltip={renderTooltip}
-					onClickLink={onClickLink}
-					selectedMarkersId={selectedMarkersId}
-					handleSelectMarker={handleSelectMarker}
-					mapRef={mapRef}
-					radius={radius}
-					index={index}
-					x={x}
-					y={y}
-					openPopupIdRef={openPopupIdRef}
-					polylinesRef={polylinesRef}
-					isForceOpen={isForceOpen}
-					activeMarker={activeMarker}
-				/>,
-			);
+			setTimeout(() => {
+				const div = document.getElementById(markerId);
+				if (div && !rootsMapRef.current.has(markerId)) {
+					const root = createRoot(div);
+					rootsMapRef.current.set(markerId, root);
+					
+					root.render(
+						<StakeholderIcon
+							data={stakeholder}
+							zoom={zoom}
+							allData={allData}
+							link={link}
+							parentId={data.datastakeId}
+							renderTooltip={renderTooltip}
+							onClickLink={onClickLink}
+							selectedMarkersId={selectedMarkersId}
+							handleSelectMarker={handleSelectMarker}
+							mapRef={mapRef}
+							radius={radius}
+							index={index}
+							x={x}
+							y={y}
+							openPopupIdRef={openPopupIdRef}
+							polylinesRef={polylinesRef}
+							isForceOpen={isForceOpen}
+							activeMarker={activeMarker}
+						/>,
+					);
+				}
+			}, 0);
 
 			setMapMarkers((prev) => {
 				const array = [
@@ -162,6 +186,19 @@ export default function LocationIcon({
 				listOfPolylines: polylinesRef.current,
 			});
 		});
+
+		return () => {
+			markersRef.current.forEach(marker => {
+				if (mapRef.hasLayer(marker)) {
+					mapRef.removeLayer(marker);
+				}
+			});
+			rootsMapRef.current.forEach(root => {
+				root.unmount();
+			});
+			rootsMapRef.current.clear();
+			markersRef.current = [];
+		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
 
 	linkedNodesData.map((node) => {
@@ -213,8 +250,10 @@ export default function LocationIcon({
 			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
 			// 	isHovering
 			// }
-
-			getPopupContainer={() => document.getElementById(i)}
+			getPopupContainer={(triggerNode) => {
+				const mapElement = document.getElementById("map");
+				return mapElement || triggerNode.parentElement || document.body;
+			}}
 		>
 			<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

@@ -82,43 +82,37 @@ export const useMap = ({
 		const highlightTable = {};
 
 		for (const [node] of graph) {
-			const visited = new Set();
-			const queue = [node];
-
-			while (queue.length) {
-				const current = queue.shift();
-				if (visited.has(current)) continue;
-
-				const currentType = nodeTypes.get(current);
-
-				if (current !== node && isLocation(currentType)) continue;
-
-				visited.add(current);
-
-				for (const neighbor of graph.get(current)) {
-					if (!visited.has(neighbor)) queue.push(neighbor);
-				}
-			}
-
-			if (!isLocation(nodeTypes.get(node)) && stakeToLoc.has(node)) {
-				visited.add(stakeToLoc.get(node));
+			const highlighted = new Set();
+			
+			highlighted.add(node);
+			
+			const nodeIsStakeholder = !isLocation(nodeTypes.get(node));
+			if (nodeIsStakeholder && stakeToLoc.has(node)) {
+				const parentLoc = stakeToLoc.get(node);
+				highlighted.add(parentLoc);
 			}
-
-			visited.add(node);
-
-			const extraLocs = new Set();
-			for (const n of visited) {
-				for (const neighbor of graph.get(n) || []) {
-					if (isLocation(nodeTypes.get(neighbor))) {
-						extraLocs.add(neighbor);
+			
+			for (const neighbor of graph.get(node) || []) {
+				const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+				
+				if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
+					const neighborParent = stakeToLoc.get(neighbor);
+					
+					if (
+						(isLocation(nodeTypes.get(node)) && neighborParent === node) ||
+						(nodeIsStakeholder && stakeToLoc.get(node) === neighborParent)
+					) {
+						highlighted.add(neighbor);
+					} else {
+						highlighted.add(neighbor);
+						highlighted.add(neighborParent);
 					}
+				} else {
+					highlighted.add(neighbor);
 				}
 			}
-			for (const loc of extraLocs) {
-				visited.add(loc);
-			}
 
-			highlightTable[node] = [...visited];
+			highlightTable[node] = [...highlighted];
 		}
 
 		return highlightTable;
@@ -283,7 +277,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 +364,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}
 				>

package/src/@daf/core/components/Screens/BaseScreen/index.jsx

@@ -134,7 +134,7 @@ const BaseScreen = ({
 				<div className="daf-table-wrapper pagination-w-padding">
 					<DAFTable
 						columns={columns}
-						data={data?.data}
+						data={Array.isArray(data?.data) ? data?.data : data?.data?.data}
 						loading={loading}
 						hideOnLoading={false}
 						pagination={pagination}

package/src/@daf/core/components/Screens/TableScreen/TablePageWithTabs/index.jsx

@@ -90,7 +90,7 @@ const TablePageWithTabs = ({
                 checkboxConfig={checkboxConfig}
                 defaultTableFilters={{}}
                 columns={columns}
-                data={data}
+                data={data?.data}
                 loading={loading}
                 location={location}
                 goTo={goTo}

package/src/@daf/core/components/UI/MissingTagButton/index.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { Tag, Tooltip } from 'antd'
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js'
+
+function MissingTagButton({
+    hasMissing,
+    setHighlightMandatory,
+    highlightMandatory,
+    t,
+}) {
+  return (
+    <>
+        {hasMissing ? (
+            <Tag
+                onClick={() => setHighlightMandatory(!highlightMandatory)}
+                className={formatClassname(['ml-2 highlight-tag', highlightMandatory && 'highlighted'])}
+                style={{textAlign: "center"}}
+            >
+                {t('missing-inputs')}
+            </Tag>
+        ) : (
+            <Tooltip title={t('all-inputs-fullfilled')}>
+                <Tag
+                    onClick={() => setHighlightMandatory(!highlightMandatory)}
+                    className={formatClassname(['ml-2 highlight-tag disabled'])}
+                    style={{textAlign: "center"}}
+                >
+                    {t('missing-inputs')}
+                </Tag>
+            </Tooltip>
+        )}
+    </>
+  )
+}
+
+export default MissingTagButton;

package/src/@daf/hooks/useMapHelper.js

@@ -9,6 +9,11 @@ export const defaultMapConfig = {
   preferCanvas: true,
   zoomControl: false,
   maxBounds: maxBounds,
+  zoomSnap: 0.5,
+  zoomDelta: 0.5, 
+  wheelPxPerZoomLevel: 150,
+  zoomAnimation: true, 
+  zoomAnimationThreshold: 10,
 };
 
 export const filterValidGPS = (data) => {

package/src/@daf/pages/Dashboards/SupplyChain/components/SupplyChainMap/index.js

@@ -4,6 +4,7 @@ import Widget from '../../../../../core/components/Dashboard/Widget/index.jsx';
 import Map from '../../../../../core/components/Dashboard/Map/index.jsx';
 import { getTagColor } from '../../../../../utils/productTag.js';
 import PropTypes from 'prop-types';
+import { findOptions } from '../../../../../../helpers/StringHelper.js';
 
 
 function SupplyChainMap({selectedSources = {}, t = () => {}, goTo = () => {}, options = {}, getRedirectLink = () => {} }) {
@@ -34,13 +35,13 @@ function SupplyChainMap({selectedSources = {}, t = () => {}, goTo = () => {}, op
 				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 ||
+								findOptions(productsText, minerals) ||
 								productsText ||
 								"-",
 							...(productsText && { tag: getTagColor(productsText) }),

package/src/@daf/pages/Documents/config.js

@@ -1,8 +1,3 @@
-export const checkboxConfig = {
-	name: 'Name',
-	datastakeId: 'ID'
-}
-
 export const getFiltersConfig = ({t}) => {
     return {
    timeframe: {
@@ -13,11 +8,6 @@ export const getFiltersConfig = ({t}) => {
     }
 }
 
-export const filtersConfig = {
-	name: '',
-	datastakeId: '',
-};
-
 export const getFilterOptions = (options, t) => {
 	const { timeframe = []	 } = options || {};
 	const _default  = {