datastake-daf 0.6.814 → 0.6.815

package/dist/components/index.js

@@ -16,6 +16,7 @@ var L$1 = require('leaflet');
 var reactCollapsed = require('react-collapsed');
 var countryCityLocation = require('country-city-location');
 var client = require('react-dom/client');
+var reactDom = require('react-dom');
 require('@elfalem/leaflet-curve');
 var dot = require('dot-object');
 var ReactHtmlParser = require('react-html-parser');
@@ -6054,7 +6055,12 @@ function DAFTable(_ref) {
       doEmptyRows
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded$F);
-  const [source, setSource] = React.useState([]);
+  const source = React.useMemo(() => {
+    if (data && Array.isArray(data)) {
+      return data;
+    }
+    return [];
+  }, [data]);
   const projectData = (projects || []).find(p => p.id === selectedProject);
   const [filtersInit, setFiltersInit] = React.useState(!loading);
   React.useEffect(() => {
@@ -6098,11 +6104,13 @@ function DAFTable(_ref) {
       }
     }) : filtersConfig;
   }, [sourcesKey, sources, filtersConfig, t]);
-  React.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 === null || pagination === void 0 ? void 0 : pagination.pageSize;
   const dataSource = React.useMemo(() => {
     const pageSize = paginationPageSize ? paginationPageSize : source.length > 10 ? source.length : 10;
@@ -13924,8 +13932,8 @@ function LocationIcon({
   activeMarker,
   setActiveMarker
 }) {
-  const rootsMapRef = React.useRef(new Map());
   const markersRef = React.useRef([]);
+  const [portalContainers, setPortalContainers] = React.useState([]);
   const isSelected = selectedMarkersId.includes(data.datastakeId);
   const Marker = React.useMemo(() => {
     if (isMineSite(data.type)) {
@@ -13933,7 +13941,7 @@ function LocationIcon({
     }
     return VillageMarker;
   }, [data.type]);
-  const [isHovering, setIsHovering] = React.useState(false);
+  React.useState(false);
   const linkedNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
@@ -13998,31 +14006,32 @@ function LocationIcon({
     return nodes;
   }, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
   const stakeholdersOfLocation = React.useMemo(() => {
-    return data?.stakeholders || [];
-  }, [data.stakeholders, zoom]);
+    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]);
   React.useEffect(() => {
-    const currentRoots = rootsMapRef.current;
-    const currentMarkers = markersRef.current;
-    currentMarkers.forEach(marker => {
-      if (mapRef.hasLayer(marker)) {
+    markersRef.current.forEach(marker => {
+      if (mapRef && mapRef.hasLayer(marker)) {
         mapRef.removeLayer(marker);
       }
     });
-    currentRoots.forEach(root => {
-      root.unmount();
-    });
-    currentRoots.clear();
     markersRef.current = [];
-
-    // Only create stakeholder markers if this location or any of its stakeholders are selected
+    setPortalContainers([]);
     const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => selectedMarkersId.includes(stk.datastakeId));
     if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
       return;
     }
 
-    // Create new markers only when selected
+    // Create markers and store their container references
+    const containers = [];
     stakeholdersOfLocation.forEach((stakeholder, index) => {
-      const markerId = `${stakeholder.datastakeId}`;
+      const markerId = `${data.datastakeId}-${stakeholder.datastakeId}`;
       const {
         x,
         y,
@@ -14045,41 +14054,29 @@ function LocationIcon({
       const pathLocLatLng = mapRef.layerPointToLatLng(pathLocPoint);
       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__namespace.marker(stakeholderLatLng, {
         icon: L__namespace.divIcon({
-          html: `<div id="${markerId}"></div>`,
+          html: containerDiv.outerHTML,
           className: "marker-chain",
           iconSize: iconSize
         })
       }).addTo(mapRef);
       markersRef.current.push(marker);
-      setTimeout(() => {
-        const div = document.getElementById(markerId);
-        if (div && !rootsMapRef.current.has(markerId)) {
-          const root = client.createRoot(div);
-          rootsMapRef.current.set(markerId, root);
-          root.render( /*#__PURE__*/jsxRuntime.jsx(StakeholderIcon$1, {
-            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);
+
+      // Store container info for portal rendering
+      containers.push({
+        markerId,
+        stakeholder,
+        x,
+        y,
+        radius,
+        index,
+        isForceOpen
+      });
       setMapMarkers(prev => {
         const array = [...prev, {
           id: marker._leaflet_id,
@@ -14111,17 +14108,19 @@ function LocationIcon({
         animated: true
       });
     });
+
+    // Update portal containers after markers are created
+    setTimeout(() => {
+      setPortalContainers(containers);
+    }, 0);
     return () => {
       markersRef.current.forEach(marker => {
-        if (mapRef.hasLayer(marker)) {
+        if (mapRef && mapRef.hasLayer(marker)) {
           mapRef.removeLayer(marker);
         }
       });
-      rootsMapRef.current.forEach(root => {
-        root.unmount();
-      });
-      rootsMapRef.current.clear();
       markersRef.current = [];
+      setPortalContainers([]);
     };
   }, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
 
@@ -14205,57 +14204,81 @@ function LocationIcon({
       });
     });
   }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
-  return /*#__PURE__*/jsxRuntime.jsx(antd.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;
-    },
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      style: {
-        position: "relative",
-        display: "inline-block"
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(antd.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;
       },
-      children: [(isSelected || selectedMarkersId.length === 0) && /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsxs("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)"
-        }
-      }), /*#__PURE__*/jsxRuntime.jsx(Marker, {
-        isSelected: isSelected,
-        onClick: () => {
-          handleSelectMarker(data);
-          setActiveMarker(isSelected ? null : data);
+          position: "relative",
+          display: "inline-block"
         },
+        children: [(isSelected || selectedMarkersId.length === 0) && /*#__PURE__*/jsxRuntime.jsx("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)"
+          }
+        }), /*#__PURE__*/jsxRuntime.jsx(Marker, {
+          isSelected: isSelected,
+          onClick: () => {
+            handleSelectMarker(data);
+            setActiveMarker(isSelected ? null : data);
+          },
+          zoom: zoom,
+          selectedMarkersId: selectedMarkersId
+        })]
+      })
+    }), portalContainers.map(({
+      markerId,
+      stakeholder,
+      x,
+      y,
+      radius,
+      index,
+      isForceOpen
+    }) => {
+      const container = document.getElementById(markerId);
+      if (!container) return null;
+      return /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(StakeholderIcon$1, {
+        data: stakeholder,
         zoom: zoom,
-        onMouseEnter: () => setIsHovering(true),
-        onMouseLeave: () => {
-          setIsHovering(false);
-        },
-        selectedMarkersId: selectedMarkersId
-      })]
-    })
+        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
+      }, markerId), container);
+    })]
   });
 }