datastake-daf 0.6.142 → 0.6.144

package/dist/components/index.js

@@ -16857,7 +16857,7 @@ function StakeholderIcon$1({
   const isSmall = isSmallMarker(zoom) || isExtraSmallMarker(zoom);
   const isMedium = isMediumMarker(zoom);
   const isSelected = React.useMemo(() => selectedMarkersId.includes(data.datastakeId), [selectedMarkersId, data.datastakeId]);
-  const isOpen = React.useMemo(() => openPopupIdRef.current === data.datastakeId, [openPopupIdRef.current, data.datastakeId]);
+  React.useMemo(() => openPopupIdRef.current === data.datastakeId, [openPopupIdRef.current, data.datastakeId]);
   const linkNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
@@ -16999,39 +16999,44 @@ function StakeholderIcon$1({
       });
     });
   }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
-  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: () => {
-        const popovers = document.querySelectorAll(".ant-popover");
-        popovers.forEach(popover => {
-          if (popover && popover.parentNode) {
-            popover.parentNode.removeChild(popover);
-          }
-        });
-        onClickLink(data);
-      }
-    }),
-    trigger: "click",
-    open: isOpen,
-    children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
-      className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
+  return /*#__PURE__*/jsxRuntime.jsx(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: () => {
+          const popovers = document.querySelectorAll(".ant-popover");
+          popovers.forEach(popover => {
+            if (popover && popover.parentNode) {
+              popover.parentNode.removeChild(popover);
+            }
+          });
+          onClickLink(data);
+        }
+      })
+      // trigger="click"
+      // zIndex={1000}
+      // open={isOpen}
+      ,
+      getPopupContainer: () => document.getElementById(data.datastakeId),
+      children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
+        className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
 			${className}`,
-      onClick: () => handleSelectMarker(data),
-      style: {
-        opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
-        pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto"
-      },
-      children: !isSmall && /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
-        name: getStakeholderIcon(data?.type || ""),
-        size: isMedium ? 13 : 16,
-        color: !isSelected && selectedMarkersId.length > 0 ? "white" : "white"
+        onClick: () => handleSelectMarker(data),
+        style: {
+          opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
+          pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto"
+        },
+        children: !isSmall && /*#__PURE__*/jsxRuntime.jsx(CustomIcon, {
+          name: getStakeholderIcon(data?.type || ""),
+          size: isMedium ? 13 : 16,
+          color: !isSelected && selectedMarkersId.length > 0 ? "white" : "white"
+        })
       })
     })
   });
@@ -17091,7 +17096,7 @@ function LocationIcon({
   }, [data.stakeholders, zoom]);
   React.useEffect(() => {
     stakeholdersOfLocation.map((stakeholder, index) => {
-      const markerId = `${index}${stakeholder.datastakeId}`;
+      const markerId = `${stakeholder.datastakeId}`;
       const {
         x,
         y,
@@ -17213,8 +17218,14 @@ function LocationIcon({
       items: renderTooltip(data),
       link,
       onClickLink: () => onClickLink(data)
-    }),
-    open: (!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) && isHovering,
+    })
+    // open={
+    // 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
+    // 	isHovering
+    // }
+    ,
+
+    getPopupContainer: () => document.getElementById("map"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -17240,7 +17251,9 @@ function LocationIcon({
         },
         zoom: zoom,
         onMouseEnter: () => setIsHovering(true),
-        onMouseLeave: () => setIsHovering(false),
+        onMouseLeave: () => {
+          setIsHovering(false);
+        },
         selectedMarkersId: selectedMarkersId
       })]
     })
@@ -17945,7 +17958,6 @@ const useMap$1 = ({
     handleSelectMarker
   });
   function handleSelectMarker(clickedMarker) {
-    destroyAllPopovers();
     setSelectedMarkersId(prev => {
       if (prev.includes(clickedMarker.datastakeId)) {
         openPopupIdRef.current = null;
@@ -17967,14 +17979,14 @@ const useMap$1 = ({
     setMarkerWithPopup(null);
   }
   function destroyAllPopovers() {
-    if (isStakeholder(markerWithPopup?.type)) {
-      const popovers = document.querySelectorAll(".ant-popover");
-      popovers.forEach(popover => {
-        if (popover && popover.parentNode) {
-          popover.parentNode.removeChild(popover);
-        }
-      });
-    }
+    // if (isStakeholder(markerWithPopup?.type)) {
+    //   const popovers = document.querySelectorAll(".ant-popover");
+    //   popovers.forEach((popover) => {
+    //     if (popover && popover.parentNode) {
+    //       popover.parentNode.removeChild(popover);
+    //     }
+    //   });
+    // }
   }
   const addAllDataToMap = () => {
     if (type === "chain" && markerWithPopup && isStakeholder(markerWithPopup?.type)) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.142",
+	"version": "0.6.144",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

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

@@ -221,48 +221,53 @@ export default function StakeholderIcon({
 	}, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
 
 	return (
-		<Popover
-			content={renderTooltipJsx({
-				title: data.name,
-				subTitle: data.subTitle,
-				total: data.sources,
-				className: "pt-0 pb-0",
-				items: renderTooltip(data),
-				link,
-				onClickLink: () => {
-					const popovers = document.querySelectorAll(".ant-popover");
+		<>
+			<Popover
+				content={renderTooltipJsx({
+					title: data.name,
+					subTitle: data.subTitle,
+					total: data.sources,
+					className: "pt-0 pb-0",
+					items: renderTooltip(data),
+					link,
+					onClickLink: () => {
+						const popovers = document.querySelectorAll(".ant-popover");
 
-					popovers.forEach((popover) => {
-						if (popover && popover.parentNode) {
-							popover.parentNode.removeChild(popover);
-						}
-					});
-					onClickLink(data);
-				},
-			})}
-			trigger="click"
-			open={isOpen}
-		>
-			<StakeholderMarker
-				className={`${data.type} ${
-					isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""
-				} 
+						popovers.forEach((popover) => {
+							if (popover && popover.parentNode) {
+								popover.parentNode.removeChild(popover);
+							}
+						});
+						onClickLink(data);
+					},
+				})}
+				// trigger="click"
+				// zIndex={1000}
+				// open={isOpen}
+				getPopupContainer={() => document.getElementById(data.datastakeId)}
+			>
+				<StakeholderMarker
+					className={`${data.type} ${
+						isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""
+					} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
 			${className}`}
-				onClick={() => handleSelectMarker(data)}
-				style={{
-					opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
-					pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto",
-				}}
-			>
-				{!isSmall && (
-					<CustomIcon
-						name={getStakeholderIcon(data?.type || "")}
-						size={isMedium ? 13 : 16}
-						color={!isSelected && selectedMarkersId.length > 0 ? "white" : "white"}
-					/>
-				)}
-			</StakeholderMarker>
-		</Popover>
+					onClick={() => handleSelectMarker(data)}
+					style={{
+						opacity: isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1,
+						pointerEvents: isExtraSmallMarker(zoom) && !isForceOpen ? "none" : "auto",
+					}}
+				>
+					{!isSmall && (
+						<CustomIcon
+							name={getStakeholderIcon(data?.type || "")}
+							size={isMedium ? 13 : 16}
+							color={!isSelected && selectedMarkersId.length > 0 ? "white" : "white"}
+						/>
+					)}
+				</StakeholderMarker>
+			</Popover>
+			{/* <div id="ant-popover-container-custom" style={{ zIndex: 1000, position: "relative" }} /> */}
+		</>
 	);
 }

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

@@ -75,7 +75,7 @@ export default function LocationIcon({
 
 	useEffect(() => {
 		stakeholdersOfLocation.map((stakeholder, index) => {
-			const markerId = `${index}${stakeholder.datastakeId}`;
+			const markerId = `${stakeholder.datastakeId}`;
 			const { x, y, radius, center } = getStakeholderPosition({
 				zoom,
 				totalMarkers: stakeholdersOfLocation.length,
@@ -208,10 +208,12 @@ export default function LocationIcon({
 				link,
 				onClickLink: () => onClickLink(data),
 			})}
-			open={
-				(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
-				isHovering
-			}
+			// open={
+			// 	(!openPopupIdRef.current || openPopupIdRef.current === data.datastakeId) &&
+			// 	isHovering
+			// }
+
+			getPopupContainer={() => document.getElementById("map")}
 		>
 			<div style={{ position: "relative", display: "inline-block" }}>
 				{(isSelected || selectedMarkersId.length === 0) && (
@@ -237,7 +239,9 @@ export default function LocationIcon({
 					}}
 					zoom={zoom}
 					onMouseEnter={() => setIsHovering(true)}
-					onMouseLeave={() => setIsHovering(false)}
+					onMouseLeave={() => {
+						setIsHovering(false);
+					}}
 					selectedMarkersId={selectedMarkersId}
 				/>
 			</div>

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

@@ -2,371 +2,361 @@ import * as L from "leaflet";
 import { useEffect, useState, createRef, useMemo, useRef } from "react";
 
 import {
-  defaultMapConfig,
-  filterValidGPS,
-  findCoordinatesByCountry,
-  SET_VIEW_DEFAULT_ZOOM,
-  useMapConfig,
+	defaultMapConfig,
+	filterValidGPS,
+	findCoordinatesByCountry,
+	SET_VIEW_DEFAULT_ZOOM,
+	useMapConfig,
 } from "../../../../hooks/useMapHelper";
 import { useMapHelper } from "./helper";
 import { isLocation, isStakeholder } from "./ChainIcon/utils";
 
 export const useMap = ({
-  type,
-  data: allData = null,
-  user = null,
-  polygon,
-  app,
-  renderTooltip,
-  mapConfig,
-  tooltipAsText,
-  renderMarker,
-  onClickLink,
-  link,
-  isSatellite = false,
+	type,
+	data: allData = null,
+	user = null,
+	polygon,
+	app,
+	renderTooltip,
+	mapConfig,
+	tooltipAsText,
+	renderMarker,
+	onClickLink,
+	link,
+	isSatellite = false,
 }) => {
-  const container = createRef();
-  const [data, setData] = useState([]);
-  const [mapRef, setMapRef] = useState(null);
-  const { TILE_LAYER_URL, MAP_TOKEN } = useMapConfig({ app, isSatellite });
-  const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = useState(false);
-  const [mapCenter, setMapCenter] = useState([0, 0]);
-  const [emptyStateIsVisible, setEmptyStateIsVisible] = useState(false);
-  const [polygonLayer, setPolygonLayer] = useState();
-  const [zoom, setZoom] = useState(SET_VIEW_DEFAULT_ZOOM);
-  const [selectedMarkersId, setSelectedMarkersId] = useState([]);
-  const openPopupIdRef = useRef(null);
-  const [markerWithPopup, setMarkerWithPopup] = useState(null);
-
-  // USED TO GENERATE HIGHLIGHT TABLE
-  const highlightTable = useMemo(() => {
-    if (!data || type !== "chain") return {};
-    const graph = new Map();
-    const stakeToLoc = new Map();
-    const nodeTypes = new Map();
-
-    for (const loc of data) {
-      const locId = loc.datastakeId;
-      nodeTypes.set(locId, loc.type);
-
-      if (!graph.has(locId)) graph.set(locId, new Set());
-
-      for (const stk of loc.stakeholders || []) {
-        const stkId = stk.datastakeId;
-        nodeTypes.set(stkId, stk.type);
-
-        stakeToLoc.set(stkId, locId);
-
-        if (!graph.has(stkId)) graph.set(stkId, new Set());
-
-        graph.get(stkId).add(locId);
-        graph.get(locId).add(stkId);
-
-        for (const target of stk.links || []) {
-          if (!graph.has(target)) graph.set(target, new Set());
-          graph.get(stkId).add(target);
-          graph.get(target).add(stkId);
-        }
-      }
-
-      for (const target of loc.links || []) {
-        if (!graph.has(target)) graph.set(target, new Set());
-        graph.get(locId).add(target);
-        graph.get(target).add(locId);
-      }
-    }
-
-    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));
-      }
-
-      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 loc of extraLocs) {
-        visited.add(loc);
-      }
-
-      highlightTable[node] = [...visited];
-    }
-
-    return highlightTable;
-  }, [data, type]);
-
-  const {
-    addIconToMapInitialy,
-    activeMarker,
-    mapOptionsButtonsConfig,
-    mapMarkers,
-    clearMapMarkers,
-    getZoom,
-    polylinesRef,
-    activeStakeholder,
-    setActiveMarker,
-  } = useMapHelper({
-    mapRef,
-    allData,
-    mapCenter,
-    renderTooltip,
-    onClickLink,
-    link,
-    tooltipAsText,
-    renderMarker,
-    type,
-    zoom,
-    selectedMarkersId,
-    openPopupIdRef,
-    handleSelectMarker,
-  });
-
-  function handleSelectMarker(clickedMarker) {
-    destroyAllPopovers();
-    setSelectedMarkersId((prev) => {
-      if (prev.includes(clickedMarker.datastakeId)) {
-        openPopupIdRef.current = null;
-        setMarkerWithPopup(null);
-        return [];
-      } else {
-        setMarkerWithPopup(
-          isStakeholder(clickedMarker.type) ? clickedMarker : null
-        );
-        const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
-        openPopupIdRef.current = clickedMarker.datastakeId;
-        return newSelectedMarkersId;
-      }
-    });
-  }
-
-  function handleZoomChange() {
-    openPopupIdRef.current = null;
-    const zoom = mapRef.getZoom();
-    setZoom(zoom);
-    setActiveMarker(null);
-    setMarkerWithPopup(null);
-  }
-
-  function destroyAllPopovers() {
-    if (isStakeholder(markerWithPopup?.type)) {
-      const popovers = document.querySelectorAll(".ant-popover");
-
-      popovers.forEach((popover) => {
-        if (popover && popover.parentNode) {
-          popover.parentNode.removeChild(popover);
-        }
-      });
-    }
-  }
-
-  const addAllDataToMap = () => {
-    if (
-      type === "chain" &&
-      markerWithPopup &&
-      isStakeholder(markerWithPopup?.type)
-    ) {
-      // destroyAllPopovers();
-      if (polylinesRef.current.length) {
-        polylinesRef.current.forEach((polyline) => {
-          mapRef.removeLayer(polyline);
-        });
-      }
-    }
-    clearMapMarkers();
-    if (data) {
-      const maxTotal = Math.max(...(data || []).map((d) => d.total));
-      data.forEach((d, i) => {
-        addIconToMapInitialy(
-          [d?.marker?.lat, d?.marker?.lng],
-          "location",
-          d.category || "mineSite",
-          d,
-          maxTotal,
-          i
-        );
-      });
-
-      polylinesRef.current.forEach((polyline) => {
-        mapRef.addLayer(polyline);
-      });
-
-      mapRef.invalidateSize();
-      mapRef.fire("moveend");
-    }
-  };
-
-  const createInstance = () => {
-    const c = L.DomUtil.get(document.getElementById(container.current));
-    if (c != null) {
-      c._leaflet_id = null;
-    }
-
-    const map = L.map(container.current, {
-      ...defaultMapConfig,
-      ...(mapConfig || {}),
-    });
-    return map;
-  };
-
-  useEffect(() => {
-    if (initialMarkerSetIsDone) {
-      setInitialMarkerSetIsDone(undefined);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!mapRef) {
-      const instance = createInstance();
-      setMapRef(instance);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (mapRef) {
-      if (polygonLayer) {
-        mapRef.removeLayer(polygonLayer);
-      }
-
-      if (Array.isArray(polygon)) {
-        const layer = L.polygon(polygon, { color: "#00809E" }).addTo(mapRef);
-        setPolygonLayer(layer);
-      }
-    }
-  }, [polygon, mapRef]);
-
-  useEffect(() => {
-    if (allData) {
-      if (allData.length === 0) {
-        setEmptyStateIsVisible(true);
-      } else if (emptyStateIsVisible) {
-        setEmptyStateIsVisible(false);
-      }
-      setData(filterValidGPS(allData));
-    } else {
-      if (data) {
-        setData(null);
-      }
-    }
-  }, [allData]);
-
-  useEffect(() => {
-    if (allData) {
-      setData(filterValidGPS(allData));
-    }
-  }, [allData]);
-
-  useEffect(() => {
-    if (mapRef) {
-      L.control.scale().addTo(mapRef);
-      L.tileLayer(TILE_LAYER_URL, { access_token: MAP_TOKEN }).addTo(mapRef);
-    }
-  }, [mapRef]);
-
-  useEffect(() => {
-    if (mapRef) {
-      if (type === "chain") {
-        mapRef.on("zoomend", handleZoomChange);
-        mapRef.on("movestart", destroyAllPopovers);
-      }
-    }
-
-    return () => {
-      if (mapRef) {
-        if (type === "chain") {
-          mapRef.off("zoomend", handleZoomChange);
-          mapRef.off("movestart", destroyAllPopovers);
-        }
-      }
-    };
-  }, [mapRef, markerWithPopup]);
-
-  useEffect(() => {
-    if (mapRef) {
-      if (allData && allData.length) {
-        const pos = allData.map((m) =>
-          Array.isArray(m.area)
-            ? m.area
-            : [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)]
-        );
-        const bounds = new L.LatLngBounds(pos);
-        mapRef.fitBounds(bounds, { padding: [20, 20] });
-      }
-    }
-  }, [allData, mapRef]);
-
-  useEffect(() => {
-    if (mapRef) {
-      if (user && !(allData || []).length) {
-        const coordinates = findCoordinatesByCountry(user.country) || [0, 0];
-        mapRef.setView([coordinates[1], coordinates[0]], SET_VIEW_DEFAULT_ZOOM);
-        setMapCenter([coordinates[1], coordinates[0]]);
-      }
-    }
-  }, [user, mapRef]);
-
-  useEffect(() => {
-    if (mapRef && data) {
-      if (!initialMarkerSetIsDone) {
-        setInitialMarkerSetIsDone(true);
-      } else {
-        clearMapMarkers();
-      }
-      addAllDataToMap();
-    }
-  }, [
-    data,
-    mapRef,
-    zoom,
-    selectedMarkersId,
-    markerWithPopup,
-    openPopupIdRef.current,
-    polylinesRef.current.length,
-    activeStakeholder,
-  ]);
-
-  useEffect(() => {
-    const marker = mapMarkers.find((m) => m.id === activeMarker);
-    if (getZoom && marker && mapRef) {
-      mapRef.setView(
-        [marker.coordinates[0], marker.coordinates[1]],
-        getZoom(mapRef)
-      );
-    }
-  }, [activeMarker, mapRef]);
-
-  return {
-    container,
-    activeMarker,
-    mapOptionsButtonsConfig,
-    emptyStateIsVisible,
-    setEmptyStateIsVisible,
-    zoom,
-    setZoom,
-  };
+	const container = createRef();
+	const [data, setData] = useState([]);
+	const [mapRef, setMapRef] = useState(null);
+	const { TILE_LAYER_URL, MAP_TOKEN } = useMapConfig({ app, isSatellite });
+	const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = useState(false);
+	const [mapCenter, setMapCenter] = useState([0, 0]);
+	const [emptyStateIsVisible, setEmptyStateIsVisible] = useState(false);
+	const [polygonLayer, setPolygonLayer] = useState();
+	const [zoom, setZoom] = useState(SET_VIEW_DEFAULT_ZOOM);
+	const [selectedMarkersId, setSelectedMarkersId] = useState([]);
+	const openPopupIdRef = useRef(null);
+	const [markerWithPopup, setMarkerWithPopup] = useState(null);
+
+	// USED TO GENERATE HIGHLIGHT TABLE
+	const highlightTable = useMemo(() => {
+		if (!data || type !== "chain") return {};
+		const graph = new Map();
+		const stakeToLoc = new Map();
+		const nodeTypes = new Map();
+
+		for (const loc of data) {
+			const locId = loc.datastakeId;
+			nodeTypes.set(locId, loc.type);
+
+			if (!graph.has(locId)) graph.set(locId, new Set());
+
+			for (const stk of loc.stakeholders || []) {
+				const stkId = stk.datastakeId;
+				nodeTypes.set(stkId, stk.type);
+
+				stakeToLoc.set(stkId, locId);
+
+				if (!graph.has(stkId)) graph.set(stkId, new Set());
+
+				graph.get(stkId).add(locId);
+				graph.get(locId).add(stkId);
+
+				for (const target of stk.links || []) {
+					if (!graph.has(target)) graph.set(target, new Set());
+					graph.get(stkId).add(target);
+					graph.get(target).add(stkId);
+				}
+			}
+
+			for (const target of loc.links || []) {
+				if (!graph.has(target)) graph.set(target, new Set());
+				graph.get(locId).add(target);
+				graph.get(target).add(locId);
+			}
+		}
+
+		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));
+			}
+
+			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 loc of extraLocs) {
+				visited.add(loc);
+			}
+
+			highlightTable[node] = [...visited];
+		}
+
+		return highlightTable;
+	}, [data, type]);
+
+	const {
+		addIconToMapInitialy,
+		activeMarker,
+		mapOptionsButtonsConfig,
+		mapMarkers,
+		clearMapMarkers,
+		getZoom,
+		polylinesRef,
+		activeStakeholder,
+		setActiveMarker,
+	} = useMapHelper({
+		mapRef,
+		allData,
+		mapCenter,
+		renderTooltip,
+		onClickLink,
+		link,
+		tooltipAsText,
+		renderMarker,
+		type,
+		zoom,
+		selectedMarkersId,
+		openPopupIdRef,
+		handleSelectMarker,
+	});
+
+	function handleSelectMarker(clickedMarker) {
+		destroyAllPopovers();
+		setSelectedMarkersId((prev) => {
+			if (prev.includes(clickedMarker.datastakeId)) {
+				openPopupIdRef.current = null;
+				setMarkerWithPopup(null);
+				return [];
+			} else {
+				setMarkerWithPopup(isStakeholder(clickedMarker.type) ? clickedMarker : null);
+				const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
+				openPopupIdRef.current = clickedMarker.datastakeId;
+				return newSelectedMarkersId;
+			}
+		});
+	}
+
+	function handleZoomChange() {
+		openPopupIdRef.current = null;
+		const zoom = mapRef.getZoom();
+		setZoom(zoom);
+		setActiveMarker(null);
+		setMarkerWithPopup(null);
+	}
+
+	function destroyAllPopovers() {
+		// if (isStakeholder(markerWithPopup?.type)) {
+		//   const popovers = document.querySelectorAll(".ant-popover");
+		//   popovers.forEach((popover) => {
+		//     if (popover && popover.parentNode) {
+		//       popover.parentNode.removeChild(popover);
+		//     }
+		//   });
+		// }
+	}
+
+	const addAllDataToMap = () => {
+		if (type === "chain" && markerWithPopup && isStakeholder(markerWithPopup?.type)) {
+			// destroyAllPopovers();
+			if (polylinesRef.current.length) {
+				polylinesRef.current.forEach((polyline) => {
+					mapRef.removeLayer(polyline);
+				});
+			}
+		}
+		clearMapMarkers();
+		if (data) {
+			const maxTotal = Math.max(...(data || []).map((d) => d.total));
+			data.forEach((d, i) => {
+				addIconToMapInitialy(
+					[d?.marker?.lat, d?.marker?.lng],
+					"location",
+					d.category || "mineSite",
+					d,
+					maxTotal,
+					i,
+				);
+			});
+
+			polylinesRef.current.forEach((polyline) => {
+				mapRef.addLayer(polyline);
+			});
+
+			mapRef.invalidateSize();
+			mapRef.fire("moveend");
+		}
+	};
+
+	const createInstance = () => {
+		const c = L.DomUtil.get(document.getElementById(container.current));
+		if (c != null) {
+			c._leaflet_id = null;
+		}
+
+		const map = L.map(container.current, {
+			...defaultMapConfig,
+			...(mapConfig || {}),
+		});
+		return map;
+	};
+
+	useEffect(() => {
+		if (initialMarkerSetIsDone) {
+			setInitialMarkerSetIsDone(undefined);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (!mapRef) {
+			const instance = createInstance();
+			setMapRef(instance);
+		}
+	}, []);
+
+	useEffect(() => {
+		if (mapRef) {
+			if (polygonLayer) {
+				mapRef.removeLayer(polygonLayer);
+			}
+
+			if (Array.isArray(polygon)) {
+				const layer = L.polygon(polygon, { color: "#00809E" }).addTo(mapRef);
+				setPolygonLayer(layer);
+			}
+		}
+	}, [polygon, mapRef]);
+
+	useEffect(() => {
+		if (allData) {
+			if (allData.length === 0) {
+				setEmptyStateIsVisible(true);
+			} else if (emptyStateIsVisible) {
+				setEmptyStateIsVisible(false);
+			}
+			setData(filterValidGPS(allData));
+		} else {
+			if (data) {
+				setData(null);
+			}
+		}
+	}, [allData]);
+
+	useEffect(() => {
+		if (allData) {
+			setData(filterValidGPS(allData));
+		}
+	}, [allData]);
+
+	useEffect(() => {
+		if (mapRef) {
+			L.control.scale().addTo(mapRef);
+			L.tileLayer(TILE_LAYER_URL, { access_token: MAP_TOKEN }).addTo(mapRef);
+		}
+	}, [mapRef]);
+
+	useEffect(() => {
+		if (mapRef) {
+			if (type === "chain") {
+				mapRef.on("zoomend", handleZoomChange);
+				mapRef.on("movestart", destroyAllPopovers);
+			}
+		}
+
+		return () => {
+			if (mapRef) {
+				if (type === "chain") {
+					mapRef.off("zoomend", handleZoomChange);
+					mapRef.off("movestart", destroyAllPopovers);
+				}
+			}
+		};
+	}, [mapRef, markerWithPopup]);
+
+	useEffect(() => {
+		if (mapRef) {
+			if (allData && allData.length) {
+				const pos = allData.map((m) =>
+					Array.isArray(m.area)
+						? m.area
+						: [Number(m.marker?.lat ?? 0), Number(m.marker?.lng ?? 0)],
+				);
+				const bounds = new L.LatLngBounds(pos);
+				mapRef.fitBounds(bounds, { padding: [20, 20] });
+			}
+		}
+	}, [allData, mapRef]);
+
+	useEffect(() => {
+		if (mapRef) {
+			if (user && !(allData || []).length) {
+				const coordinates = findCoordinatesByCountry(user.country) || [0, 0];
+				mapRef.setView([coordinates[1], coordinates[0]], SET_VIEW_DEFAULT_ZOOM);
+				setMapCenter([coordinates[1], coordinates[0]]);
+			}
+		}
+	}, [user, mapRef]);
+
+	useEffect(() => {
+		if (mapRef && data) {
+			if (!initialMarkerSetIsDone) {
+				setInitialMarkerSetIsDone(true);
+			} else {
+				clearMapMarkers();
+			}
+			addAllDataToMap();
+		}
+	}, [
+		data,
+		mapRef,
+		zoom,
+		selectedMarkersId,
+		markerWithPopup,
+		openPopupIdRef.current,
+		polylinesRef.current.length,
+		activeStakeholder,
+	]);
+
+	useEffect(() => {
+		const marker = mapMarkers.find((m) => m.id === activeMarker);
+		if (getZoom && marker && mapRef) {
+			mapRef.setView([marker.coordinates[0], marker.coordinates[1]], getZoom(mapRef));
+		}
+	}, [activeMarker, mapRef]);
+
+	return {
+		container,
+		activeMarker,
+		mapOptionsButtonsConfig,
+		emptyStateIsVisible,
+		setEmptyStateIsVisible,
+		zoom,
+		setZoom,
+	};
 };