datastake-daf 0.6.779 → 0.6.780

package/dist/components/index.js

@@ -9546,29 +9546,24 @@ const processConditionalTableKeys = (tableKeys, item) => {
   });
   return processedKeys;
 };
-const renderFieldData = function (type, value, user, config) {
-  let getApiBaseUrl = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : () => {};
-  let getAppHeader = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : () => {};
-  let app = arguments.length > 6 ? arguments[6] : undefined;
-  let allValues = arguments.length > 7 ? arguments[7] : undefined;
-  let formValues = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : {};
+const renderFieldData = (type, value, user, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, allValues, formValues = {}) => {
   switch (type) {
     case 'year':
       return value !== '-' ? renderDateFormatted(value, 'YYYY', 'en') : '-';
     case 'date':
       {
-        const language = user !== null && user !== void 0 && user.language && (user === null || user === void 0 ? void 0 : user.language) === 'sp' ? 'es' : user === null || user === void 0 ? void 0 : user.language;
+        const language = user?.language && user?.language === 'sp' ? 'es' : user?.language;
         return value !== '-' ? renderDateFormatted(value, 'DD MMM YYYY', language || 'en') : '-';
       }
     case 'select':
       {
-        const options = (config === null || config === void 0 ? void 0 : config.options) || [];
+        const options = config?.options || [];
         const option = findOptions(value, options);
         return option;
       }
     case 'multiselect':
       {
-        const options = (config === null || config === void 0 ? void 0 : config.options) || [];
+        const options = config?.options || [];
         const _val = typeof value === 'string' ? value.split(',').map(v => v.trim()) : value;
         const option = findOptions(_val, options);
         return option.join(', ');
@@ -9583,7 +9578,7 @@ const renderFieldData = function (type, value, user, config) {
         formValues: formValues
       });
     case 'percentage':
-      return value === '-' || value === null || value === undefined ? '-' : "".concat(value, " %");
+      return value === '-' || value === null || value === undefined ? '-' : `${value} %`;
     case 'geolocation':
       {
         const val = JSON.parse(value) || {};
@@ -9597,7 +9592,7 @@ const renderFieldData = function (type, value, user, config) {
     case 'upload':
     case 'videoUpload':
       {
-        const documentName = allValues === null || allValues === void 0 ? void 0 : allValues.map(item => item === null || item === void 0 ? void 0 : item.name).join(', ');
+        const documentName = allValues?.map(item => item?.name).join(', ');
         return documentName;
       }
     default:
@@ -9721,18 +9716,19 @@ const resolveDynamicLabel = (labelConfig, item, defaultLabel) => {
   return labelConfig || defaultLabel;
 };
 
-const handleSectionChildren = ({
-  config,
-  allData,
-  level,
-  t,
-  rootForm,
-  user,
-  getApiBaseUrl = () => {},
-  getAppHeader = () => {},
-  app,
-  TreeNodeComponent
-}) => {
+const handleSectionChildren = _ref => {
+  let {
+    config,
+    allData,
+    level,
+    t,
+    rootForm,
+    user,
+    getApiBaseUrl = () => {},
+    getAppHeader = () => {},
+    app,
+    TreeNodeComponent
+  } = _ref;
   if (!(level === 0 && config && typeof config === 'object')) {
     return null;
   }
@@ -9746,14 +9742,14 @@ const handleSectionChildren = ({
     let fieldValue;
 
     // Determine field value based on type
-    if (fieldConfig.type === 'dataLinkGroup' && Array.isArray(allData?.[fieldKey])) {
+    if (fieldConfig.type === 'dataLinkGroup' && Array.isArray(allData === null || allData === void 0 ? void 0 : allData[fieldKey])) {
       fieldValue = allData[fieldKey];
-    } else if (fieldConfig.type === 'dataLinkGroup' && allData?.[fieldKey]) {
+    } else if (fieldConfig.type === 'dataLinkGroup' && allData !== null && allData !== void 0 && allData[fieldKey]) {
       fieldValue = allData[fieldKey];
     } else if (fieldConfig.type === 'group') {
       fieldValue = {};
     } else {
-      fieldValue = allData?.[fieldKey];
+      fieldValue = allData === null || allData === void 0 ? void 0 : allData[fieldKey];
     }
     return /*#__PURE__*/jsxRuntime.jsx(TreeNodeComponent, {
       nodeKey: fieldKey,
@@ -12463,6 +12459,8 @@ const Style$M = styled__default["default"].div`
   width: 100%;
   height: 472px;
 
+  
+
   .filter-cont {
     position: absolute; 
     top: 24px;
@@ -12565,11 +12563,24 @@ const Style$M = styled__default["default"].div`
       align-items: center;
     }
 
-	.marker-chain {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
+    .marker-chain {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .animated-polyline {
+      stroke-dasharray: 10 10;
+      animation: dash-flow 1.5s linear infinite;
+      stroke-linecap: round;
+    }
+
+    @keyframes dash-flow {
+      to {
+        stroke-dashoffset: -20;
+      }
+    }
+
     
   }
 
@@ -13015,18 +13026,15 @@ const VILLAGE = "village";
 const EXPORTER = "exporter";
 const PROCESSOR = "mineralProcessor";
 const DEPOT = "depot";
+const OPERATOR = "miningOperator";
 const MAX_EXTRA_SMALL_ZOOM_THRESHOLD = 2;
 const MAX_SMALL_ZOOM_THRESHOLD = 3;
 const MAX_MEDIUM_ZOOM_THRESHOLD = 6;
 const LOCATION_TYPES = [MINE_SITE, VILLAGE];
-const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT];
+const STAKEHOLDER_TYPES = [EXPORTER, PROCESSOR, DEPOT, OPERATOR];
 const RADIUS_SMALL = 15;
 const RADIUS_MEDIUM = 35;
 const RADIUS_LARGE = 60;
-const RADIUS_CURVE_SMALL = 10;
-const RADIUS_CURVE_MEDIUM = 15;
-const RADIUS_CURVE_LARGE = 20;
-const TENSION = 0.2;
 function isLocation(type) {
   return LOCATION_TYPES.includes(type);
 }
@@ -13083,7 +13091,6 @@ function getStakeholderPosition({
   const isLarge = isLargeMarker(zoom);
   let radius;
   let center = {
-    // NOT BEING USED FOR NOW AND MAYBE NEVER
     left: 0,
     top: 0
   };
@@ -13107,6 +13114,25 @@ function getStakeholderPosition({
     angleDeg
   };
 }
+function applyAnimationDirect(el, isShortLink) {
+  if (!(el instanceof SVGElement) || isShortLink) return;
+  el.style.strokeDasharray = "10, 10";
+  el.style.strokeDashoffset = "0";
+  el.style.animation = "dash-flow 1.2s linear infinite";
+  el.classList.add('animated-polyline');
+}
+function removeAnimationFromElement(element) {
+  if (!element) return;
+  element.classList.remove('animated-polyline');
+  element.style.animation = '';
+  element.style.strokeDasharray = '';
+}
+function applyAnimationToPolyline(polyline, isShortLink) {
+  const element = polyline.getElement();
+  if (element) {
+    applyAnimationDirect(element, isShortLink);
+  }
+}
 function createPolyline({
   L,
   startLatLng,
@@ -13116,109 +13142,47 @@ function createPolyline({
   zoom,
   listOfPolylines = [],
   isFromStakeholder = false,
-  isForceOpen = false
+  isForceOpen = false,
+  stakeholderType = null,
+  animated = false,
+  mapRef
 }) {
-  const width = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
-  const coordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
-  const style = {
+  const lineWidth = isFromStakeholder && isExtraSmallMarker(zoom) && !isForceOpen ? 0 : 1.2;
+  const isShortLink = stakeholderType === OPERATOR || isFromStakeholder;
+  const shouldAnimate = animated;
+  const lineCoordinates = [[startLatLng.lat, startLatLng.lng], [endLatLng.lat, endLatLng.lng]];
+  const polylineStyle = {
     color: "var(--base-gray-70)",
-    weight: width,
-    opacity: 0.5,
-    smoothFactor: 1,
+    weight: lineWidth,
+    opacity: isSelected ? 1 : 0.5,
+    smoothFactor: 0,
     id,
-    dashArray: !isSelected ? "5, 5" : "0, 0"
+    dashArray: isShortLink ? "0, 0" : shouldAnimate ? "10, 10" : !isSelected ? "5, 5" : "10, 10",
+    renderer: L.svg()
   };
-  const newPolyline = L.polyline(coordinates, style);
-  if (listOfPolylines.find(p => p.options.id === id)) {
-    const polylineToUpdateCoordinates = listOfPolylines.find(p => p.options.id === id);
-    polylineToUpdateCoordinates.setLatLngs(coordinates);
-    polylineToUpdateCoordinates.setStyle(style);
-  } else {
-    listOfPolylines.push(newPolyline);
-  }
-  return newPolyline;
-}
-function createCurvePath({
-  zoom,
-  totalMarkers,
-  markerIndex
-}) {
-  const radius = getCurvePointRadius(zoom);
-  const {
-    x,
-    y,
-    angleDeg
-  } = getAngleDeg(totalMarkers, markerIndex, radius);
-  return {
-    x,
-    y,
-    angleDeg
-  };
-}
-function getCurvePointRadius(zoom) {
-  const isSmall = isSmallMarker(zoom) || isExtraSmallMarker(zoom);
-  const isMedium = isMediumMarker(zoom);
-  if (isSmall) {
-    return RADIUS_SMALL + RADIUS_CURVE_SMALL;
-  } else if (isMedium) {
-    return RADIUS_MEDIUM + RADIUS_CURVE_MEDIUM;
-  } else {
-    return RADIUS_LARGE + RADIUS_CURVE_LARGE;
-  }
-}
-function buildSmoothCurve(layerPoints, mapRef) {
-  const path = [];
-  for (let i = 0; i < layerPoints.length - 1; i++) {
-    const p0 = layerPoints[i];
-    const p1 = layerPoints[i + 1];
-    const pPrev = layerPoints[i - 1] || p0;
-    const pNext = layerPoints[i + 2] || p1;
-    const cp1 = L__namespace.point(p0.x + (p1.x - pPrev.x) * TENSION, p0.y + (p1.y - pPrev.y) * TENSION);
-    const cp2 = L__namespace.point(p1.x - (pNext.x - p0.x) * TENSION, p1.y - (pNext.y - p0.y) * TENSION);
-    if (i === 0) {
-      path.push("M", [mapRef.layerPointToLatLng(p0).lat, mapRef.layerPointToLatLng(p0).lng]);
+  const existingPolyline = listOfPolylines.find(p => p.options.id === id);
+  if (existingPolyline) {
+    removeAnimationFromElement(existingPolyline.getElement());
+    existingPolyline.setLatLngs(lineCoordinates);
+    existingPolyline.setStyle(polylineStyle);
+    if (shouldAnimate && isSelected) {
+      existingPolyline.once('add', () => {
+        applyAnimationToPolyline(existingPolyline, isShortLink);
+      });
+      applyAnimationToPolyline(existingPolyline, isShortLink);
     }
-    path.push("C", [mapRef.layerPointToLatLng(cp1).lat, mapRef.layerPointToLatLng(cp1).lng], [mapRef.layerPointToLatLng(cp2).lat, mapRef.layerPointToLatLng(cp2).lng], [mapRef.layerPointToLatLng(p1).lat, mapRef.layerPointToLatLng(p1).lng]);
+    return existingPolyline;
   }
-  return path;
-}
-function getSiblingCurveStrength(zoom) {
-  if (isExtraSmallMarker(zoom)) return RADIUS_CURVE_SMALL / 2;
-  if (isSmallMarker(zoom)) return RADIUS_CURVE_MEDIUM;
-  if (isMediumMarker(zoom)) return RADIUS_CURVE_LARGE;
-  return RADIUS_CURVE_LARGE;
-}
-function buildCurveWIthTwoSiblings({
-  mapRef,
-  startLatLng,
-  endLatLng,
-  zoom,
-  isSelected,
-  id
-}) {
-  const fromPoint = mapRef.latLngToLayerPoint(startLatLng);
-  const toPoint = mapRef.latLngToLayerPoint(endLatLng);
-  const midX = (fromPoint.x + toPoint.x) / 2;
-  const midY = (fromPoint.y + toPoint.y) / 2 + (isSmallMarker(zoom) ? RADIUS_CURVE_SMALL / 2 : 0);
-  const dx = toPoint.x - fromPoint.x;
-  const dy = toPoint.y - fromPoint.y;
-  const normal = L__namespace.point(-dy, dx);
-  const length = Math.sqrt(normal.x ** 2 + normal.y ** 2) || 1;
-  const normalized = normal.multiplyBy(1 / length);
-  const curveStrength = getSiblingCurveStrength(zoom);
-  const controlPoint = L__namespace.point(midX, midY).add(normalized.multiplyBy(curveStrength));
-  const latlngs = [startLatLng, mapRef.layerPointToLatLng(controlPoint), endLatLng];
-  const layerPoints = latlngs.map(latlng => mapRef.latLngToLayerPoint(latlng));
-  const path = buildSmoothCurve(layerPoints, mapRef);
-  const curve = L__namespace.curve(path, {
-    color: "var(--base-gray-70)",
-    weight: isExtraSmallMarker(zoom) ? 0 : 1.2,
-    opacity: 0.5,
-    smoothFactor: 1,
-    id,
-    dashArray: !isSelected ? "5, 5" : "0, 0"
-  });
-  mapRef.addLayer(curve);
+  const newPolyline = L.polyline(lineCoordinates, polylineStyle);
+  newPolyline.addTo(mapRef);
+  listOfPolylines.push(newPolyline);
+  if (shouldAnimate && isSelected) {
+    newPolyline.once('add', () => {
+      applyAnimationToPolyline(newPolyline, isShortLink);
+    });
+    applyAnimationToPolyline(newPolyline, isShortLink);
+  }
+  return newPolyline;
 }
 
 const StakeholderMarker = styled__default["default"].div`
@@ -13520,6 +13484,9 @@ function StakeholderIcon$1({
     return null;
   }, [parentId, allData]);
   React.useEffect(() => {
+    if (selectedMarkersId.length === 0 || !isSelected) {
+      return;
+    }
     linkNodesData.map(node => {
       const isConnectingToStakeholder = node.isStakeholder;
       const id = `${data.datastakeId}-${node.stakeholderId || node.datastakeId}`;
@@ -13531,8 +13498,6 @@ function StakeholderIcon$1({
       const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
       const stakeholderLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
       let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
-      const areNextToEachOther = targetMarkerIndex === index + 1 || targetMarkerIndex === index - 1 || index === 0 && targetMarkerIndex === node.totalStakeholders - 1 || targetMarkerIndex === 0 && index === node.totalStakeholders - 1;
-      const areOnlyTwoSiblings = node.totalStakeholders === 2;
       if (isExtraSmallMarker(zoom) && !isForceOpen) {
         createPolyline({
           L: L__namespace,
@@ -13542,7 +13507,8 @@ function StakeholderIcon$1({
           zoom,
           isSelected,
           id,
-          listOfPolylines: polylinesRef.current
+          listOfPolylines: polylinesRef.current,
+          animated: true
         });
         return;
       }
@@ -13560,61 +13526,8 @@ function StakeholderIcon$1({
         const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
         const endPoint = L__namespace.point(x + nodePoint.x + center.left, y + nodePoint.y + center.top);
         endLatLng = mapRef.layerPointToLatLng(endPoint);
-        if (isSibling && (!areNextToEachOther || areOnlyTwoSiblings)) {
-          if (areOnlyTwoSiblings) {
-            buildCurveWIthTwoSiblings({
-              mapRef,
-              startLatLng: stakeholderLatLng,
-              endLatLng,
-              zoom,
-              isSelected,
-              id
-            });
-            return;
-          }
-          const total = node.totalStakeholders;
-          let from = index;
-          let to = targetMarkerIndex;
-          let flip = false;
-          const forwardDistance = (to - from + total) % total;
-          const backwardDistance = (from - to + total) % total;
-          if (backwardDistance < forwardDistance) {
-            [from, to] = [to, from];
-            flip = true;
-          }
-          const intermediateIndices = [];
-          for (let i = 1; i < (to - from + total) % total; i++) {
-            intermediateIndices.push((from + i) % total);
-          }
-          const indices = [from, ...intermediateIndices, to];
-          const intermediatePoints = [];
-          for (const i of indices) {
-            const {
-              x,
-              y
-            } = createCurvePath({
-              zoom,
-              totalMarkers: node.totalStakeholders,
-              markerIndex: i
-            });
-            const point = centerPoint.add(L__namespace.point(x, y));
-            const latlng = mapRef.layerPointToLatLng(point);
-            intermediatePoints.push(latlng);
-          }
-          const latlngs = flip ? [endLatLng, ...intermediatePoints, stakeholderLatLng] : [stakeholderLatLng, ...intermediatePoints, endLatLng];
-          const layerPoints = latlngs.map(latlng => mapRef.latLngToLayerPoint(latlng));
-          const path = buildSmoothCurve(layerPoints, mapRef);
-          const curve = L__namespace?.curve?.(path, {
-            color: "var(--base-gray-70)",
-            weight: isExtraSmallMarker(zoom) ? 0 : 1,
-            opacity: isSelected ? 1 : 0.5,
-            smoothFactor: 1,
-            id
-          });
-          mapRef.addLayer(curve);
-          return;
-        }
       }
+      // Always use straight lines
       createPolyline({
         L: L__namespace,
         mapRef,
@@ -13624,10 +13537,11 @@ function StakeholderIcon$1({
         isFromStakeholder: false,
         isSelected,
         id,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        animated: true
       });
     });
-  }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen]);
+  }, [mapRef, x, y, parentData, linkNodesData, isSelected, zoom, isForceOpen, selectedMarkersId]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
       content: renderTooltipJsx({
@@ -13639,7 +13553,8 @@ function StakeholderIcon$1({
         link,
         onClickLink: () => {
           onClickLink(data);
-        }
+        },
+        isNewTab: true
       }),
       getPopupContainer: triggerNode => {
         const mapElement = document.getElementById("map");
@@ -13694,6 +13609,8 @@ function LocationIcon({
   const linkedNodesData = React.useMemo(() => {
     const nodes = [];
     const links = data.links || [];
+
+    // Add links from the location itself
     links.forEach(link => {
       allData.forEach(d => {
         if (d.datastakeId === link) {
@@ -13713,8 +13630,45 @@ function LocationIcon({
         }
       });
     });
+
+    // ADD: Also include links from this location's stakeholders
+    const stakeholders = data.stakeholders || [];
+    stakeholders.forEach(stakeholder => {
+      const stakeholderLinks = stakeholder.links || [];
+      stakeholderLinks.forEach(link => {
+        allData.forEach(d => {
+          // Check if it's a direct location link
+          if (d.datastakeId === link) {
+            // Avoid duplicates
+            if (!nodes.find(n => n.datastakeId === link && !n.isStakeholder)) {
+              nodes.push({
+                ...d,
+                fromStakeholderId: stakeholder.datastakeId
+              });
+            }
+          }
+          // Check if it's a stakeholder link
+          if (d.stakeholders && d.stakeholders.length > 0) {
+            d.stakeholders.forEach(targetStakeholder => {
+              if (targetStakeholder.datastakeId === link) {
+                // Avoid duplicates
+                if (!nodes.find(n => n.isStakeholder && n.datastakeId === d.datastakeId && n.stakeholdersIndex === d.stakeholders.indexOf(targetStakeholder))) {
+                  nodes.push({
+                    ...d,
+                    isStakeholder: true,
+                    totalStakeholders: d.stakeholders.length,
+                    stakeholdersIndex: d.stakeholders.indexOf(targetStakeholder),
+                    fromStakeholderId: stakeholder.datastakeId
+                  });
+                }
+              }
+            });
+          }
+        });
+      });
+    });
     return nodes;
-  }, [JSON.stringify(allData), JSON.stringify(data.links), zoom]);
+  }, [JSON.stringify(allData), JSON.stringify(data.links), JSON.stringify(data.stakeholders), zoom]);
   const stakeholdersOfLocation = React.useMemo(() => {
     return data?.stakeholders || [];
   }, [data.stakeholders, zoom]);
@@ -13732,7 +13686,13 @@ function LocationIcon({
     currentRoots.clear();
     markersRef.current = [];
 
-    // Create new markers
+    // Only create stakeholder markers if this location or any of its stakeholders are selected
+    const shouldShowStakeholders = isSelected || stakeholdersOfLocation.some(stk => selectedMarkersId.includes(stk.datastakeId));
+    if (!shouldShowStakeholders || selectedMarkersId.length === 0) {
+      return;
+    }
+
+    // Create new markers only when selected
     stakeholdersOfLocation.forEach((stakeholder, index) => {
       const markerId = `${stakeholder.datastakeId}`;
       const {
@@ -13818,7 +13778,9 @@ function LocationIcon({
         zoom,
         isFromStakeholder: true,
         isForceOpen,
-        listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current,
+        stakeholderType: stakeholder.type,
+        animated: true
       });
     });
     return () => {
@@ -13833,38 +13795,88 @@ function LocationIcon({
       rootsMapRef.current.clear();
       markersRef.current = [];
     };
-  }, [stakeholdersOfLocation, selectedMarkersId, activeMarker]);
-  linkedNodesData.map(node => {
-    const id = `${data.datastakeId}-${node.datastakeId}`;
-    const isConnectingToStakeholder = node.isStakeholder;
-    const centerLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
-    let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
-    const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
-    if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
-      const {
-        x,
-        y
-      } = getStakeholderPosition({
+  }, [stakeholdersOfLocation, selectedMarkersId, activeMarker, zoom]);
+
+  // Only create polylines for linked nodes when something is selected
+  React.useEffect(() => {
+    if (selectedMarkersId.length === 0) {
+      return;
+    }
+
+    // IMPORTANT: Only draw links if this location is actually selected
+    // Not just highlighted as part of the chain
+    if (!isSelected) {
+      return;
+    }
+
+    // Filter linkedNodesData to only include nodes that are in the selected chain
+    const relevantLinks = linkedNodesData.filter(node => {
+      // Check if the target node (location) is in the selected markers
+      const targetLocationInSelection = selectedMarkersId.includes(node.datastakeId);
+
+      // If connecting to a stakeholder, check if that stakeholder is selected
+      if (node.isStakeholder) {
+        const stakeholderInSelection = node.stakeholdersIndex !== undefined && selectedMarkersId.includes(node.datastakeId);
+        return stakeholderInSelection;
+      }
+      return targetLocationInSelection;
+    });
+    relevantLinks.forEach(node => {
+      const id = node.fromStakeholderId ? `${node.fromStakeholderId}-${node.datastakeId}` : `${data.datastakeId}-${node.datastakeId}`;
+      const isConnectingToStakeholder = node.isStakeholder;
+
+      // If the link is from a stakeholder, start from the stakeholder position
+      let startLatLng;
+      if (node.fromStakeholderId) {
+        // Find the stakeholder index in this location's stakeholders
+        const stakeholderIndex = stakeholdersOfLocation.findIndex(s => s.datastakeId === node.fromStakeholderId);
+        if (stakeholderIndex !== -1) {
+          const {
+            x,
+            y
+          } = getStakeholderPosition({
+            zoom,
+            totalMarkers: stakeholdersOfLocation.length,
+            markerIndex: stakeholderIndex
+          });
+          const centerLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
+          const centerPoint = mapRef.latLngToLayerPoint(centerLatLng);
+          const stakeholderPoint = centerPoint.add(L__namespace.point(x, y));
+          startLatLng = mapRef.layerPointToLatLng(stakeholderPoint);
+        } else {
+          startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
+        }
+      } else {
+        startLatLng = L__namespace.latLng(data.gps.latitude, data.gps.longitude);
+      }
+      let endLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
+      const isConnectingToStakeholderSelected = selectedMarkersId.includes(node.datastakeId);
+      if (isConnectingToStakeholder && !isExtraSmallMarker(zoom)) {
+        const {
+          x,
+          y
+        } = getStakeholderPosition({
+          zoom,
+          totalMarkers: node.totalStakeholders,
+          markerIndex: node.stakeholdersIndex
+        });
+        const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
+        const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
+        const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
+        endLatLng = mapRef.layerPointToLatLng(endPoint);
+      }
+      createPolyline({
+        L: L__namespace,
+        mapRef,
+        startLatLng,
+        endLatLng,
+        isSelected: isConnectingToStakeholderSelected,
+        id,
         zoom,
-        totalMarkers: node.totalStakeholders,
-        markerIndex: node.stakeholdersIndex
-      });
-      const nodeLatLng = L__namespace.latLng(node.gps.latitude, node.gps.longitude);
-      const nodePoint = mapRef.latLngToLayerPoint(nodeLatLng);
-      const endPoint = L__namespace.point(x + nodePoint.x, y + nodePoint.y);
-      endLatLng = mapRef.layerPointToLatLng(endPoint);
-    }
-    createPolyline({
-      L: L__namespace,
-      mapRef,
-      startLatLng: centerLatLng,
-      endLatLng,
-      isSelected: isConnectingToStakeholderSelected,
-      id,
-      zoom,
-      listOfPolylines: polylinesRef.current
+        listOfPolylines: polylinesRef.current
+      });
     });
-  });
+  }, [linkedNodesData, selectedMarkersId, zoom, stakeholdersOfLocation, isSelected]);
   return /*#__PURE__*/jsxRuntime.jsx(antd.Popover, {
     content: renderTooltipJsx({
       title: data.name,
@@ -14380,7 +14392,8 @@ function useMapHelper$1({
           link: link,
           onClickLink: onClickLink,
           activeStakeholder: activeStakeholder,
-          setActiveStakeholder: setActiveStakeholder
+          setActiveStakeholder: setActiveStakeholder,
+          mapRef: mapRef
         }));
         roots.current.push(root);
       } else if (type === "location") {
@@ -14585,7 +14598,8 @@ const useMap$1 = ({
     MAP_TOKEN
   } = useMapConfig({
     app,
-    isSatellite
+    isSatellite,
+    mapRef: container
   });
   const [initialMarkerSetIsDone, setInitialMarkerSetIsDone] = React.useState(false);
   const [mapCenter, setMapCenter] = React.useState([0, 0]);
@@ -14602,6 +14616,8 @@ const useMap$1 = ({
     const graph = new Map();
     const stakeToLoc = new Map();
     const nodeTypes = new Map();
+
+    // Build the graph
     for (const loc of data) {
       const locId = loc.datastakeId;
       nodeTypes.set(locId, loc.type);
@@ -14626,26 +14642,45 @@ const useMap$1 = ({
       }
     }
     const highlightTable = {};
+
+    // Perform BFS/DFS to find all connected nodes in the entire chain
     for (const [node] of graph) {
       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);
-      }
-      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) {
+      const queue = [node];
+      const visited = new Set([node]);
+      while (queue.length > 0) {
+        const current = queue.shift();
+        highlighted.add(current);
+
+        // Add parent location if current is stakeholder
+        const currentIsStakeholder = !isLocation(nodeTypes.get(current));
+        if (currentIsStakeholder && stakeToLoc.has(current)) {
+          const parentLoc = stakeToLoc.get(current);
+          if (!visited.has(parentLoc)) {
+            highlighted.add(parentLoc);
+            visited.add(parentLoc);
+            queue.push(parentLoc);
+          }
+        }
+
+        // Traverse all neighbors
+        for (const neighbor of graph.get(current) || []) {
+          if (!visited.has(neighbor)) {
+            visited.add(neighbor);
+            queue.push(neighbor);
             highlighted.add(neighbor);
-          } else {
-            highlighted.add(neighbor);
-            highlighted.add(neighborParent);
+
+            // If neighbor is stakeholder, add its parent location
+            const neighborIsStakeholder = !isLocation(nodeTypes.get(neighbor));
+            if (neighborIsStakeholder && stakeToLoc.has(neighbor)) {
+              const neighborParent = stakeToLoc.get(neighbor);
+              if (!visited.has(neighborParent)) {
+                highlighted.add(neighborParent);
+                visited.add(neighborParent);
+                queue.push(neighborParent);
+              }
+            }
           }
-        } else {
-          highlighted.add(neighbor);
         }
       }
       highlightTable[node] = [...highlighted];
@@ -14683,10 +14718,20 @@ const useMap$1 = ({
   function handleSelectMarker(clickedMarker) {
     setSelectedMarkersId(prev => {
       if (prev.includes(clickedMarker.datastakeId)) {
+        // Deselecting - clear polylines
         openPopupIdRef.current = null;
         setMarkerWithPopup(null);
         return [];
       } else {
+        // CLEAR OLD POLYLINES BEFORE SELECTING NEW MARKER
+        if (polylinesRef.current.length > 0) {
+          polylinesRef.current.forEach(polyline => {
+            if (mapRef.hasLayer(polyline)) {
+              mapRef.removeLayer(polyline);
+            }
+          });
+          polylinesRef.current = [];
+        }
         setMarkerWithPopup(isStakeholder(clickedMarker.type) ? clickedMarker : null);
         const newSelectedMarkersId = highlightTable[clickedMarker.datastakeId];
         openPopupIdRef.current = clickedMarker.datastakeId;
@@ -14710,19 +14755,29 @@ const useMap$1 = ({
         });
       }
     }
+    if (type === "chain" && selectedMarkersId.length === 0) {
+      if (polylinesRef.current.length) {
+        polylinesRef.current.forEach(polyline => {
+          if (mapRef.hasLayer(polyline)) {
+            mapRef.removeLayer(polyline);
+          }
+        });
+        polylinesRef.current = [];
+      }
+    }
     clearMapMarkers();
     if (data) {
-      // Filters out locations that are not connected to any stakeholders
-      const excludedType = ['village', 'town', 'area', 'territory'];
-      const filteredData = data?.filter(obj => !excludedType.includes(obj?.type) && (obj?.stakeholders?.length > 0 || data.some(other => other.datastakeId !== obj.datastakeId && (other.stakeholders || []).some(stk => (stk.links || []).includes(obj.datastakeId)))));
+      const filteredData = data?.filter(obj => obj.type === 'mineSite' || obj?.stakeholders?.length > 0 || data.some(other => other.datastakeId !== obj.datastakeId && (other.stakeholders || []).some(stk => (stk.links || []).includes(obj.datastakeId))));
       const maxTotal = Math.max(...(data || []).map(d => d.total));
       const dataToRender = type === "chain" ? filteredData : data;
       dataToRender.forEach((d, i) => {
         addIconToMapInitialy([d?.marker?.lat, d?.marker?.lng], "location", d.category || "mineSite", d, maxTotal, i);
       });
-      polylinesRef.current.forEach(polyline => {
-        mapRef.addLayer(polyline);
-      });
+      if (selectedMarkersId.length > 0) {
+        polylinesRef.current.forEach(polyline => {
+          mapRef.addLayer(polyline);
+        });
+      }
       mapRef.invalidateSize();
       mapRef.fire("moveend");
     }