datastake-daf 0.6.815 → 0.6.816

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

@@ -1,5 +1,4 @@
 import { useMemo, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
 import {
 	isMineSite,
 	getStakeholderPosition,
@@ -11,6 +10,7 @@ import {
 import MineSiteMarker from "./Markers/SVG/MinesiteMarker.js";
 import VillageMarker from "./Markers/SVG/VillageMarker.js";
 import StakeholderIcon from "./Markers/StakeholderMarker.js";
+import { createRoot } from "react-dom/client";
 import * as L from "leaflet";
 import { Popover } from "antd";
 import { renderTooltipJsx } from "../../../../../utils/tooltip.js";
@@ -32,8 +32,8 @@ export default function LocationIcon({
 	activeMarker,
 	setActiveMarker,
 }) {
-	const markersRef = useRef([]);
-	const [portalContainers, setPortalContainers] = useState([]);
+	const rootsMapRef = useRef(new Map());
+	const markersRef = useRef([])
 	const isSelected = selectedMarkersId.includes(data.datastakeId);
 	const Marker = useMemo(() => {
 		if (isMineSite(data.type)) {
@@ -114,31 +114,25 @@ export default function LocationIcon({
 	}, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
 
 	const stakeholdersOfLocation = useMemo(() => {
-		return (data?.stakeholders || []).filter(stakeholder => {
-			if (!stakeholder.links || stakeholder.links.length === 0) {
-				return true;
-			}
-			
-			const locationsWithThisStakeholder = allData
-				.filter(loc => 
-					loc.stakeholders?.some(s => s.datastakeId === stakeholder.datastakeId)
-				)
-				.map(loc => loc.datastakeId);
-			
-			const primaryLocation = locationsWithThisStakeholder.sort()[0];
-			return data.datastakeId === primaryLocation;
-		});
-	}, [data.stakeholders, data.datastakeId, allData, zoom]);
+		return data?.stakeholders || [];
+	}, [data.stakeholders, zoom]);
 
 	useEffect(() => {
-		markersRef.current.forEach(marker => {
-			if (mapRef && mapRef.hasLayer(marker)) {
+		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 = [];
-		setPortalContainers([]);
 
+		// Only create stakeholder markers if this location or any of its stakeholders are selected
 		const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => 
 			selectedMarkersId.includes(stk.datastakeId)
 		);
@@ -147,11 +141,9 @@ export default function LocationIcon({
 			return;
 		}
 
-		// Create markers and store their container references
-		const containers = [];
-		
+		// Create new markers only when selected
 		stakeholdersOfLocation.forEach((stakeholder, index) => {
-			const markerId = `${data.datastakeId}-${stakeholder.datastakeId}`;
+			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
 				totalMarkers: stakeholdersOfLocation.length,
@@ -170,30 +162,46 @@ export default function LocationIcon({
 			const isForceOpen = activeMarker?.datastakeId === data.datastakeId;
 			const iconSize = isSmallMarker(zoom) || isExtraSmallMarker(zoom) ? [11, 11] : [25, 25];
 			
-			// Create container div
-			const containerDiv = document.createElement('div');
-			containerDiv.id = markerId;
-			
 			const marker = L.marker(stakeholderLatLng, {
 				icon: L.divIcon({
-					html: containerDiv.outerHTML,
+					html: `<div id="${markerId}"></div>`,
 					className: "marker-chain",
 					iconSize: iconSize,
 				}),
 			}).addTo(mapRef);
 
 			markersRef.current.push(marker);
-			
-			// Store container info for portal rendering
-			containers.push({
-				markerId,
-				stakeholder,
-				x,
-				y,
-				radius,
-				index,
-				isForceOpen,
-			});
+
+			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 = [
@@ -228,23 +236,21 @@ export default function LocationIcon({
 				isForceOpen,
 				listOfPolylines: polylinesRef.current,
 				stakeholderType: stakeholder.type,
-				animated: true,
+				animated: true,                     
 			});
 		});
 
-		// Update portal containers after markers are created
-		setTimeout(() => {
-			setPortalContainers(containers);
-		}, 0);
-
 		return () => {
 			markersRef.current.forEach(marker => {
-				if (mapRef && mapRef.hasLayer(marker)) {
+				if (mapRef.hasLayer(marker)) {
 					mapRef.removeLayer(marker);
 				}
 			});
+			rootsMapRef.current.forEach(root => {
+				root.unmount();
+			});
+			rootsMapRef.current.clear();
 			markersRef.current = [];
-			setPortalContainers([]);
 		};
 	}, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
@@ -338,81 +344,56 @@ useEffect(() => {
 }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
 
 	return (
-		<>
-			<Popover
-				content={renderTooltipJsx({
-					title: data.name,
-					subTitle: data.subTitle,
-					total: data.sources,
-					className: "pt-0 pb-0",
-					items: renderTooltip(data),
-					link,
-					onClickLink: () => onClickLink(data),
-					isNewTab: true,
-				})}
-				getPopupContainer={(triggerNode) => {
-					const mapElement = document.getElementById("map");
-					return mapElement || triggerNode.parentElement || document.body;
-				}}
-			>
-				<div style={{ position: "relative", display: "inline-block" }}>
-					{(isSelected || selectedMarkersId.length === 0) && (
-						<div
-							style={{
-								position: "absolute",
-								bottom: "0",
-								left: "50%",
-								transform: "translateX(-50%)",
-								width: "12px",
-								height: "6px",
-								background: "rgba(0,0,0,0.15)",
-								borderRadius: "50%",
-								filter: "blur(3px)",
-							}}
-						/>
-					)}
-					<Marker
-						isSelected={isSelected}
-						onClick={() => {
-							handleSelectMarker(data);
-							setActiveMarker(isSelected ? null : data);
+		<Popover
+			content={renderTooltipJsx({
+				title: data.name,
+				subTitle: data.subTitle,
+				total: data.sources,
+				className: "pt-0 pb-0",
+				items: renderTooltip(data),
+				link,
+				onClickLink: () => onClickLink(data),
+				isNewTab: true,
+			})}
+			// open={
+			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
+			// 	isHovering
+			// }
+			getPopupContainer={(triggerNode) => {
+				const mapElement = document.getElementById("map");
+				return mapElement || triggerNode.parentElement || document.body;
+			}}
+		>
+			<div style={{ position: "relative", display: "inline-block" }}>
+				{(isSelected || selectedMarkersId.length === 0) && (
+					<div
+						style={{
+							position: "absolute",
+							bottom: "0",
+							left: "50%",
+							transform: "translateX(-50%)",
+							width: "12px",
+							height: "6px",
+							background: "rgba(0,0,0,0.15)",
+							borderRadius: "50%",
+							filter: "blur(3px)",
 						}}
-						zoom={zoom}
-						selectedMarkersId={selectedMarkersId}
 					/>
-				</div>
-			</Popover>
-			
-			{/* Render stakeholder icons via portals */}
-			{portalContainers.map(({markerId, stakeholder, x, y, radius, index, isForceOpen}) => {
-				const container = document.getElementById(markerId);
-				if (!container) return null;
-				
-				return createPortal(
-					<StakeholderIcon
-						key={markerId}
-						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}
-					/>,
-					container
-				);
-			})}
-		</>
+				)}
+				<Marker
+					isSelected={isSelected}
+					onClick={() => {
+						handleSelectMarker(data);
+						setActiveMarker(isSelected ? null : data);
+					}}
+					zoom={zoom}
+					onMouseEnter={() => setIsHovering(true)}
+					onMouseLeave={() => {
+						setIsHovering(false);
+					}}
+					selectedMarkersId={selectedMarkersId}
+				/>
+			</div>
+		</Popover>
 	);
 }

package/src/@daf/core/components/Dashboard/Widget/VegetationWidget/index.jsx

@@ -16,16 +16,12 @@ export default function VegetationWidget({
 }) {
 	let vegetationConfig = getVegetationConfig();
 	
-	// Get all VEGETATION_KEYS values before filtering (needed for mapping check)
 	const allVegetationKeys = vegetationConfig.map(item => item.key);
 	
-	// Filter to show only specific keys if filterKeys is provided
 	if (filterKeys && Array.isArray(filterKeys)) {
 		vegetationConfig = vegetationConfig.filter(item => filterKeys.includes(item.key));
 	}
 
-	// Map growthObservations to VEGETATION_KEYS
-	// Handle both formats: growthObservations keys (e.g., "yellowing_leaves") and VEGETATION_KEYS (e.g., "yellowing")
 	const mappedGrowthObservations = Array.isArray(growthObservations)
 		? growthObservations
 			.map(obs => {

package/src/@daf/core/components/Table/index.jsx

@@ -36,12 +36,7 @@ export default function DAFTable({
   doEmptyRows,
   ...rest
 }) {
-  const source = useMemo(() => {
-    if (data && Array.isArray(data)) {
-      return data;
-    }
-    return [];
-  }, [data]);
+  const [source, setSource] = useState([]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = useState(!loading);
 
@@ -90,11 +85,11 @@ export default function DAFTable({
     } : filtersConfig;
   }, [sourcesKey, sources, filtersConfig, t]);
 
-  // useEffect(() => {
-  //   if (data && Array.isArray(data)) {
-  //     setSource(data);
-  //   }
-  // }, [data, data.length]);
+  useEffect(() => {
+    if (data && Array.isArray(data)) {
+      setSource(data);
+    }
+  }, [data, data.length]);
 
   const paginationPageSize = pagination?.pageSize;
   const dataSource = useMemo(() => {

package/src/@daf/pages/Events/Activities/columns.js

@@ -117,23 +117,19 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },              
     {
-      title: t("Sources"),
-      dataIndex: "sources",
-      key: "sources",
-      show: activeTab !== "own",
-      render: (val, all) => {
-          if (all.empty) {
-              return <div className="daf-default-cell" />;
-          }
-
-        if (!val || val?.length === 0) {
-          return "-";
-        }
+        title: t("Sources"),
+        dataIndex: "sources",
+        key: "sources",
+        show: activeTab !== "own",
+        render: (val, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
 
-        const sources = sourceAvatarConfig(val, user, applications);
+            const sources = sourceAvatarConfig(val, user, applications);
 
-        return <AvatarGroup items={sources} />;
-      },
+            return <AvatarGroup items={sources}></AvatarGroup>;
+        },
     },
     {
         title: t("Status"),

package/src/@daf/pages/Events/Incidents/columns.js

@@ -117,23 +117,19 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         },
     },              
     {
-      title: t("Sources"),
-      dataIndex: "sources",
-      key: "sources",
-      show: activeTab !== "own",
-      render: (val, all) => {
-          if (all.empty) {
-              return <div className="daf-default-cell" />;
-          }
-
-        if (!val || val?.length === 0) {
-          return "-";
-        }
+        title: t("Sources"),
+        dataIndex: "sources",
+        key: "sources",
+        show: activeTab !== "own",
+        render: (val, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
 
-        const sources = sourceAvatarConfig(val, user, applications);
+            const sources = sourceAvatarConfig(val, user, applications);
 
-        return <AvatarGroup items={sources} />;
-      },
+            return <AvatarGroup items={sources}></AvatarGroup>;
+        },
     },
     {
         title: t("Status"),

package/src/@daf/pages/Events/columns.js

@@ -147,17 +147,13 @@ export const getColumns = ({ t, goTo, user, options, activeTab, getRedirectLink,
     key: "sources",
     show: activeTab !== "own",
     render: (val, all) => {
-        if (all.empty) {
-            return <div className="daf-default-cell" />;
-        }
-
-      if (!val || val?.length === 0) {
-        return "-";
+      if (all.empty) {
+        return <div className="daf-default-cell" />;
       }
 
       const sources = sourceAvatarConfig(val, user, applications);
 
-      return <AvatarGroup items={sources} />;
+      return <AvatarGroup items={sources}></AvatarGroup>;
     },
   },
   {

package/src/@daf/pages/Locations/MineSite/columns.js

@@ -145,25 +145,20 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return renderStatusTag({ value: _val, t });
         },
     },
-    {
-      title: t("Sources"),
-      dataIndex: "sources",
-      key: "sources",
-      show: activeTab !== "own",
-      render: (val, all) => {
+    
+      {
+        title: t("Sources"),
+        dataIndex: 'sources',
+        ellipsis: true,
+        show: activeTab !== "own",
+        render: (v, all) => {
           if (all.empty) {
-              return <div className="daf-default-cell" />;
+            return <div className="daf-default-cell" />
           }
-
-        if (!val || val?.length === 0) {
-          return "-";
-        }
-
-        const sources = sourceAvatarConfig(val, user, applications);
-
-        return <AvatarGroup items={sources} />;
+          const sources = sourceAvatarConfig(v, user, applications);
+          return <AvatarGroup items={sources}></AvatarGroup>;
+        },
       },
-    },
       {
         id: 'actions',
         title: "",

package/src/@daf/pages/Locations/columns.js

@@ -105,15 +105,11 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
               return <div className="daf-default-cell" />;
           }
 
-        if (!val || val?.length === 0) {
-          return "-";
-        }
-
-        const sources = sourceAvatarConfig(val, user, applications);
+          const sources = sourceAvatarConfig(val, user, applications);
 
-        return <AvatarGroup items={sources} />;
+          return <AvatarGroup items={sources}></AvatarGroup>;
       },
-    },
+  },
     {
         title: t("Last Update"),
         dataIndex: "updatedAt",

package/src/@daf/pages/Stakeholders/Operators/columns.js

@@ -116,25 +116,21 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
       },
       ellipsis: true,
   }, 
-  {
-    title: t("Sources"),
-    dataIndex: "sources",
-    key: "sources",
-    show: activeTab !== "own",
-    render: (val, all) => {
-        if (all.empty) {
-            return <div className="daf-default-cell" />;
-        }
-
-      if (!val || val?.length === 0) {
-        return "-";
-      }
+    {
+        title: t("Sources"),
+        dataIndex: "sources",
+        key: "sources",
+        show: activeTab !== "own",
+        render: (val, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
 
-      const sources = sourceAvatarConfig(val, user, applications);
+            const sources = sourceAvatarConfig(val, user, applications);
 
-      return <AvatarGroup items={sources} />;
+            return <AvatarGroup items={sources}></AvatarGroup>;
+        },
     },
-  },
     {
         title: t("Status"),
         dataIndex: 'status',

package/src/@daf/pages/Stakeholders/Workers/columns.js

@@ -101,24 +101,20 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
         ellipsis: true,
     },   
     {
-      title: t("Sources"),
-      dataIndex: "sources",
-      key: "sources",
-      show: activeTab !== "own",
-      render: (val, all) => {
-          if (all.empty) {
-              return <div className="daf-default-cell" />;
-          }
-
-        if (!val || val?.length === 0) {
-          return "-";
-        }
+        title: t("Sources"),
+        dataIndex: "sources",
+        key: "sources",
+        show: activeTab !== "own",
+        render: (val, all) => {
+            if (all.empty) {
+                return <div className="daf-default-cell" />;
+            }
 
-        const sources = sourceAvatarConfig(val, user, applications);
+            const sources = sourceAvatarConfig(val, user, applications);
 
-        return <AvatarGroup items={sources} />;
-      },
-    },   
+          return <AvatarGroup items={sources}></AvatarGroup>;
+        },
+    },    
     {
         title: t("Status"),
         dataIndex: "status",

package/src/@daf/pages/Stakeholders/columns.js

@@ -43,9 +43,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const categoriesOptions = [...(options?.categoriesOptions || []), ...(options?.category || [])]
-
-          const category = findOptions(v, categoriesOptions);
+          const category = findOptions(v, options?.categoriesOptions);
     
           return category ? <Tooltip title={category}>{category}</Tooltip> : '-';
         },
@@ -60,9 +58,7 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
             return <div className="daf-default-cell" />
           }
 
-          const subCategoriesOptions = [...(options?.subCategoriesOptions || []), ...(options?.subCategory || [])];
-
-          const subCategory = findOptions(v, subCategoriesOptions);
+          const subCategory = findOptions(v, options?.subCategoriesOptions);
     
           return subCategory ? <Tooltip title={subCategory}>{subCategory}</Tooltip> : '-';
         },
@@ -93,12 +89,12 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
                 return <div className="daf-default-cell" />;
             }
             if (!val || val?.length === 0) {
-                return "-";
+                return "--";
             }
 
             const sources = sourceAvatarConfig(val, user, applications);
 
-            return <AvatarGroup items={sources} />;
+            return <AvatarGroup items={sources}></AvatarGroup>;
         },
     },
     {

package/src/@daf/pages/Summary/Activities/MonitoringCampaign/components/BiodiversityHabitat/ObservedFauna.jsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Widget, BarChart } from '../../../../../../../../src/index.js';
-import { calculateNiceAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
+import { calculateNaturalAxisConfig, mergeDefaultCategories } from '../chartHelpers.js';
 
 const ObservedFauna = ({
     observedFaunaChart,
@@ -32,16 +32,11 @@ const ObservedFauna = ({
     }, [observedFaunaChart, options]);
 
     const xAxisConfig = useMemo(() => {
-        return calculateNiceAxisConfig(
-            chartData,
-            'value',
-            1.2, // multiplier: 20% padding
-            {
-                min: 0,
-                max: 10,
-                tickMethod: () => [0, 2, 4, 6, 8, 10]
-            }
-        );
+        const maxValue = chartData && chartData.length > 0
+            ? Math.max(...chartData.map(item => Number(item?.value) || 0))
+            : 0;
+
+        return calculateNaturalAxisConfig(maxValue);
     }, [chartData]);
 
     return (