datastake-daf 0.6.766 → 0.6.768

package/dist/components/index.js

@@ -9941,44 +9941,44 @@ function useAjaxModal$2({
 }
 
 const mergeObject = obj => {
-  return Object.entries(obj || {}).reduce((acc, _ref) => {
-    let [key, value] = _ref;
+  return Object.entries(obj || {}).reduce((acc, [key, value]) => {
     if (typeof value === "object" && !Array.isArray(value) && value !== null) {
-      return _objectSpread2(_objectSpread2({}, acc), value);
+      return {
+        ...acc,
+        ...value
+      };
     }
-    return _objectSpread2(_objectSpread2({}, acc), {}, {
+    return {
+      ...acc,
       [key]: value
-    });
+    };
   }, {});
 };
-const handleDataLinkGroupWithTableKeys = _ref2 => {
-  var _inputConfig$meta, _config$meta2, _inputConfig$meta3, _inputConfig$meta4, _inputConfig$meta5;
-  let {
-    config,
-    inputConfig,
-    inputKey,
-    value,
-    level,
-    t,
-    rootForm,
-    allData,
-    user,
-    getApiBaseUrl = () => {},
-    getAppHeader = () => {},
-    app,
-    TreeNodeComponent
-  } = _ref2;
+const handleDataLinkGroupWithTableKeys = ({
+  config,
+  inputConfig,
+  inputKey,
+  value,
+  level,
+  t,
+  rootForm,
+  allData,
+  user,
+  getApiBaseUrl = () => {},
+  getAppHeader = () => {},
+  app,
+  TreeNodeComponent
+}) => {
   if (!(config.type === 'dataLinkGroup' || config.type === 'dataLink')) {
     return null;
   }
-  if ((inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.type) !== 'dataLink' || !(inputConfig !== null && inputConfig !== void 0 && (_inputConfig$meta = inputConfig.meta) !== null && _inputConfig$meta !== void 0 && _inputConfig$meta.tableKeys)) {
+  if (inputConfig?.type !== 'dataLink' || !inputConfig?.meta?.tableKeys) {
     const parentInputKeys = Object.keys(config.inputs || {});
     const isHandledBySiblingDataLink = parentInputKeys.some(otherInputKey => {
       const otherConfig = config.inputs[otherInputKey];
-      if ((otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.type) === 'dataLink') {
-        var _otherConfig$meta, _config$meta;
-        const siblingTableKeys = (otherConfig === null || otherConfig === void 0 || (_otherConfig$meta = otherConfig.meta) === null || _otherConfig$meta === void 0 ? void 0 : _otherConfig$meta.tableKeys) || [];
-        const additionalTableKeys = ((_config$meta = config.meta) === null || _config$meta === void 0 ? void 0 : _config$meta.additionalTableKeys) || [];
+      if (otherConfig?.type === 'dataLink') {
+        const siblingTableKeys = otherConfig?.meta?.tableKeys || [];
+        const additionalTableKeys = config.meta?.additionalTableKeys || [];
         const allSiblingKeys = [...siblingTableKeys, ...additionalTableKeys];
         return allSiblingKeys.includes(inputKey) && otherInputKey !== inputKey;
       }
@@ -9992,26 +9992,23 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
     return null;
   }
   const tableKeys = inputConfig.meta.tableKeys;
-  const additionalTableKeys = ((_config$meta2 = config.meta) === null || _config$meta2 === void 0 ? void 0 : _config$meta2.additionalTableKeys) || [];
+  const additionalTableKeys = config.meta?.additionalTableKeys || [];
   const parentInputKeys = Object.keys(config.inputs || {});
   const siblingInputsMatchingTableKeys = parentInputKeys.filter(siblingKey => siblingKey !== inputKey).filter(siblingKey => tableKeys.includes(siblingKey) || additionalTableKeys.includes(siblingKey));
   [...new Set([...tableKeys, ...siblingInputsMatchingTableKeys])];
-  const isAjaxModal = React.useMemo(() => {
-    var _inputConfig$meta2;
-    return !!(inputConfig !== null && inputConfig !== void 0 && (_inputConfig$meta2 = inputConfig.meta) !== null && _inputConfig$meta2 !== void 0 && _inputConfig$meta2.namespace);
-  }, [inputConfig]);
+  const isAjaxModal = React.useMemo(() => !!inputConfig?.meta?.namespace, [inputConfig]);
   const ajaxModalValues = useAjaxModal$2({
     name: inputKey,
     user,
-    namespace: inputConfig === null || inputConfig === void 0 || (_inputConfig$meta3 = inputConfig.meta) === null || _inputConfig$meta3 === void 0 ? void 0 : _inputConfig$meta3.namespace,
-    skipFetch: inputConfig === null || inputConfig === void 0 || (_inputConfig$meta4 = inputConfig.meta) === null || _inputConfig$meta4 === void 0 ? void 0 : _inputConfig$meta4.skipFetch,
+    namespace: inputConfig?.meta?.namespace,
+    skipFetch: inputConfig?.meta?.skipFetch,
     isAjaxModal,
-    formScope: inputConfig === null || inputConfig === void 0 || (_inputConfig$meta5 = inputConfig.meta) === null || _inputConfig$meta5 === void 0 ? void 0 : _inputConfig$meta5.formScope,
+    formScope: inputConfig?.meta?.formScope,
     APP: app,
     apiBaseUrl: getApiBaseUrl(),
     _getAppHeader: getAppHeader
   });
-  const dataLinkForm = ajaxModalValues === null || ajaxModalValues === void 0 ? void 0 : ajaxModalValues.form;
+  const dataLinkForm = ajaxModalValues?.form;
   const createInputsAndValues = item => {
     const inputs = {};
     const values = {};
@@ -10023,12 +10020,12 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
       'videos': 'Video'
     };
     tableKeys.filter(tableKey => tableKey !== 'datastakeId').forEach(tableKey => {
-      var _dataLinkForm$identif;
-      const formInputConfig = (dataLinkForm === null || dataLinkForm === void 0 ? void 0 : dataLinkForm[tableKey]) || (dataLinkForm === null || dataLinkForm === void 0 || (_dataLinkForm$identif = dataLinkForm['identification']) === null || _dataLinkForm$identif === void 0 ? void 0 : _dataLinkForm$identif[tableKey]);
+      const formInputConfig = dataLinkForm?.[tableKey] || dataLinkForm?.['identification']?.[tableKey];
       if (formInputConfig) {
-        inputs[tableKey] = _objectSpread2(_objectSpread2({}, formInputConfig), {}, {
+        inputs[tableKey] = {
+          ...formInputConfig,
           label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : formInputConfig.label || formInputConfig.tableLabel || tableKey
-        });
+        };
         if (formInputConfig.label && typeof formInputConfig.label === 'object') {
           const dynamicLabelKeys = Object.keys(formInputConfig.label);
           let resolvedLabel = null;
@@ -10036,7 +10033,7 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
             const parts = labelKey.split(' is ');
             if (parts.length === 2) {
               const [conditionKey, conditionValue] = parts;
-              if ((item === null || item === void 0 ? void 0 : item[conditionKey]) === conditionValue) {
+              if (item?.[conditionKey] === conditionValue) {
                 resolvedLabel = formInputConfig.label[labelKey];
                 break;
               }
@@ -10044,37 +10041,37 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
           }
           inputs[tableKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || (uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey);
         }
-        values[tableKey] = item === null || item === void 0 ? void 0 : item[tableKey];
+        values[tableKey] = item?.[tableKey];
       } else {
-        var _item$linking;
         inputs[tableKey] = {
           label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey,
-          type: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.type
+          type: inputConfig?.type
         };
-        values[tableKey] = (item === null || item === void 0 || (_item$linking = item.linking) === null || _item$linking === void 0 || (_item$linking = _item$linking.SCL) === null || _item$linking === void 0 || (_item$linking = _item$linking[item === null || item === void 0 ? void 0 : item[tableKey]]) === null || _item$linking === void 0 ? void 0 : _item$linking.name) || (item === null || item === void 0 ? void 0 : item[tableKey]);
+        values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[tableKey];
       }
     });
     siblingInputsMatchingTableKeys.forEach(siblingKey => {
       const siblingConfig = config.inputs[siblingKey];
       if (siblingConfig) {
-        inputs[siblingKey] = _objectSpread2(_objectSpread2({}, siblingConfig), {}, {
+        inputs[siblingKey] = {
+          ...siblingConfig,
           label: siblingConfig.label || siblingKey
-        });
-        values[siblingKey] = item === null || item === void 0 ? void 0 : item[siblingKey];
+        };
+        values[siblingKey] = item?.[siblingKey];
       }
     });
-    if (dataLinkForm !== null && dataLinkForm !== void 0 && dataLinkForm.identification && typeof dataLinkForm.identification === 'object') {
+    if (dataLinkForm?.identification && typeof dataLinkForm.identification === 'object') {
       Object.keys(dataLinkForm.identification).filter(fieldKey => fieldKey !== 'datastakeId' && !tableKeys.includes(fieldKey)).filter(fieldKey => {
         const formInputConfig = dataLinkForm.identification[fieldKey];
         return formInputConfig && typeof formInputConfig === 'object' && !Array.isArray(formInputConfig);
       }).forEach(fieldKey => {
-        var _item$linking2;
         const formInputConfig = dataLinkForm.identification[fieldKey];
-        inputs[fieldKey] = _objectSpread2(_objectSpread2({}, formInputConfig), {}, {
+        inputs[fieldKey] = {
+          ...formInputConfig,
           label: uploadTypeFields.includes(fieldKey) ? uploadTypeLabels[fieldKey] : formInputConfig.label || formInputConfig.tableLabel || fieldKey
-        });
-        if (formInputConfig !== null && formInputConfig !== void 0 && formInputConfig.label && typeof (formInputConfig === null || formInputConfig === void 0 ? void 0 : formInputConfig.label) === 'object') {
-          const dynamicLabelKeys = Object.keys(formInputConfig === null || formInputConfig === void 0 ? void 0 : formInputConfig.label);
+        };
+        if (formInputConfig?.label && typeof formInputConfig?.label === 'object') {
+          const dynamicLabelKeys = Object.keys(formInputConfig?.label);
           let resolvedLabel = null;
           for (const labelKey of dynamicLabelKeys) {
             const parts = labelKey.split(' is ');
@@ -10083,7 +10080,7 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
               const flattenedItem = Object.assign({}, item.location, {
                 address: item.address
               });
-              if ((flattenedItem === null || flattenedItem === void 0 ? void 0 : flattenedItem[conditionKey]) === conditionValue) {
+              if (flattenedItem?.[conditionKey] === conditionValue) {
                 resolvedLabel = formInputConfig.label[labelKey];
                 break;
               }
@@ -10091,7 +10088,7 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
           }
           inputs[fieldKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || (uploadTypeFields.includes(fieldKey) ? uploadTypeLabels[fieldKey] : fieldKey);
         }
-        values[fieldKey] = (item === null || item === void 0 || (_item$linking2 = item.linking) === null || _item$linking2 === void 0 || (_item$linking2 = _item$linking2.SCL) === null || _item$linking2 === void 0 || (_item$linking2 = _item$linking2[item === null || item === void 0 ? void 0 : item[fieldKey]]) === null || _item$linking2 === void 0 ? void 0 : _item$linking2.name) || (item === null || item === void 0 ? void 0 : item[fieldKey]);
+        values[fieldKey] = item?.linking?.SCL?.[item?.[fieldKey]]?.name || item?.[fieldKey];
       });
     }
     return {
@@ -10101,17 +10098,16 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
   };
   if (Array.isArray(value)) {
     return value.map((item, itemIndex) => {
-      var _merged$inputKey;
       const merged = mergeObject(item);
-      const datastakeIdValue = (merged === null || merged === void 0 || (_merged$inputKey = merged[inputKey]) === null || _merged$inputKey === void 0 ? void 0 : _merged$inputKey.datastakeId) || (merged === null || merged === void 0 ? void 0 : merged.datastakeId);
+      const datastakeIdValue = merged?.[inputKey]?.datastakeId || merged?.datastakeId;
       const {
         inputs,
         values
       } = createInputsAndValues(merged);
       return /*#__PURE__*/jsxRuntime.jsx(TreeNodeComponent, {
-        nodeKey: datastakeIdValue || t("No ID ".concat(itemIndex + 1)),
+        nodeKey: datastakeIdValue || t(`No ID ${itemIndex + 1}`),
         config: {
-          label: datastakeIdValue || t("No ID ".concat(itemIndex + 1)),
+          label: datastakeIdValue || t(`No ID ${itemIndex + 1}`),
           type: 'custom-datalink-group',
           inputs: inputs
         },
@@ -10125,12 +10121,11 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
         getApiBaseUrl: getApiBaseUrl,
         getAppHeader: getAppHeader,
         app: app
-      }, "".concat(inputKey, "-").concat(itemIndex));
+      }, `${inputKey}-${itemIndex}`);
     });
   } else {
-    var _merged$inputKey2;
     const merged = mergeObject(value);
-    const datastakeIdValue = (merged === null || merged === void 0 || (_merged$inputKey2 = merged[inputKey]) === null || _merged$inputKey2 === void 0 ? void 0 : _merged$inputKey2.datastakeId) || (merged === null || merged === void 0 ? void 0 : merged.datastakeId);
+    const datastakeIdValue = merged?.[inputKey]?.datastakeId || merged?.datastakeId;
     const {
       inputs,
       values
@@ -10152,7 +10147,7 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
       getApiBaseUrl: getApiBaseUrl,
       getAppHeader: getAppHeader,
       app: app
-    }, "".concat(inputKey, "-group"));
+    }, `${inputKey}-group`);
   }
 };
 
@@ -12731,7 +12726,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
 };
 const filterValidGPS$1 = data => {
   const latCheck = lat => lat > -90 || lat < 90;
@@ -13513,7 +13513,7 @@ function StakeholderIcon$1({
   React.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;
@@ -13632,7 +13632,10 @@ function StakeholderIcon$1({
           onClickLink(data);
         }
       }),
-      getPopupContainer: () => document.getElementById(data.datastakeId),
+      getPopupContainer: triggerNode => {
+        const mapElement = document.getElementById("map");
+        return mapElement || triggerNode.parentElement || document.body;
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
         className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
@@ -13669,7 +13672,8 @@ function LocationIcon({
   activeMarker,
   setActiveMarker
 }) {
-  const root = React.useRef(null);
+  const rootsMapRef = React.useRef(new Map());
+  const markersRef = React.useRef([]);
   const isSelected = selectedMarkersId.includes(data.datastakeId);
   const Marker = React.useMemo(() => {
     if (isMineSite(data.type)) {
@@ -13706,7 +13710,21 @@ function LocationIcon({
     return data?.stakeholders || [];
   }, [data.stakeholders, zoom]);
   React.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,
@@ -13737,28 +13755,34 @@ function LocationIcon({
           iconSize: iconSize
         })
       }).addTo(mapRef);
-      const div = document.getElementById(markerId);
-      root.current = client.createRoot(div);
-      root.current.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
-      }));
+      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);
       setMapMarkers(prev => {
         const array = [...prev, {
           id: marker._leaflet_id,
@@ -13788,6 +13812,18 @@ 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 => {
     const id = `${data.datastakeId}-${node.datastakeId}`;
@@ -13835,8 +13871,10 @@ function LocationIcon({
     // 	isHovering
     // }
     ,
-
-    getPopupContainer: () => document.getElementById(i),
+    getPopupContainer: triggerNode => {
+      const mapElement = document.getElementById("map");
+      return mapElement || triggerNode.parentElement || document.body;
+    },
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -13937,6 +13975,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -13978,6 +14017,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -14013,6 +14053,7 @@ function StakeholderIcon({
         link,
         onClickLink: () => onClickLink(marker)
       }),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(Style$K
       // onClick={toggleOpen}
       , {
@@ -14576,34 +14617,28 @@ const useMap$1 = ({
     }
     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);
+      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) {
+            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;
   }, [data, type]);
@@ -14736,7 +14771,13 @@ const useMap$1 = ({
     if (mapRef) {
       L__namespace.control.scale().addTo(mapRef);
       L__namespace.tileLayer(TILE_LAYER_URL, {
-        access_token: MAP_TOKEN
+        access_token: MAP_TOKEN,
+        keepBuffer: 4,
+        updateWhenZooming: false,
+        updateInterval: 200,
+        maxNativeZoom: 18,
+        tileSize: 256,
+        fadeAnimation: true
       }).addTo(mapRef);
     }
   }, [mapRef]);
@@ -14800,6 +14841,23 @@ const useMap$1 = ({
       mapRef.setView([marker.coordinates[0], marker.coordinates[1]], getZoom(mapRef));
     }
   }, [activeMarker, mapRef]);
+  React.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,
@@ -49175,17 +49233,23 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
     }
     return result;
   }, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
+
+  // In BaseGraph.jsx, replace the useEffect with:
   React.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 /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
@@ -49214,8 +49278,9 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
         fitView: true // zoom out on default
         ,
         fitViewOptions: {
-          padding: 0.2 //zoom out on default
-          // ...(zoomOutTransition ? { duration: withDuration ? 300 : undefined } : {}),
+          padding: 0.2,
+          //zoom out on default
+          duration: withDuration ? 300 : undefined
         },
         ...props,
         children: !isPdf && /*#__PURE__*/jsxRuntime.jsxs(react.Controls, {
@@ -49418,7 +49483,8 @@ function TradeRelationship(_ref) {
     filtersConfig,
     onFilterChange = () => {},
     renderTooltipItems = () => [],
-    getTotal = () => 0
+    getTotal = () => 0,
+    onRenderComplete = () => {}
   } = _ref;
   const reactFlowWrapper = React.useRef(null);
   const [nodes, setNodes] = react.useNodesState([]);
@@ -49431,6 +49497,23 @@ function TradeRelationship(_ref) {
   const [activeNode, setActiveNode] = React.useState(null);
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = React.useState(null);
+  const isFullyRenderedRef = React.useRef(false);
+  const [isFullyRendered, setIsFullyRendered] = React.useState(false);
+  React.useEffect(() => {
+    isFullyRenderedRef.current = false;
+    setIsFullyRendered(false);
+    setActiveNode(null);
+  }, [data]);
+  React.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]);
   React.useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -49455,7 +49538,7 @@ function TradeRelationship(_ref) {
     })
   })), [edges, activeNode, associatedNodes]);
   React.useEffect(() => {
-    var _data$sources;
+    var _data$sources, _data$id;
     let yInit = 0;
     let xInit = 0;
     const isBilateral = (data === null || data === void 0 || (_data$sources = data.sources) === null || _data$sources === void 0 ? void 0 : _data$sources.length) >= 1;
@@ -49467,7 +49550,7 @@ function TradeRelationship(_ref) {
       return;
     }
     const _nodes = [{
-      id: data.id,
+      id: (_data$id = data.id) === null || _data$id === void 0 ? void 0 : _data$id.toString(),
       type: "expandedNode",
       position: {
         x: xInit,
@@ -49478,13 +49561,13 @@ function TradeRelationship(_ref) {
     const _edges = [];
     if (isBilateral) {
       (data.sources || []).forEach(source => {
-        var _data$id;
+        var _data$id2;
         const hasPrev = false;
-        _edges.push({
+        const edge = {
           id: "e-".concat(data.id, "-").concat(source),
-          source: source,
-          type: "default",
-          target: data === null || data === void 0 || (_data$id = data.id) === null || _data$id === void 0 ? void 0 : _data$id.toString(),
+          source: source === null || source === void 0 ? void 0 : source.toString(),
+          type: "defaultEdge",
+          target: data === null || data === void 0 || (_data$id2 = data.id) === null || _data$id2 === void 0 ? void 0 : _data$id2.toString(),
           sourceHandle: "left",
           targetHandle: "right",
           data: _objectSpread2(_objectSpread2({
@@ -49497,7 +49580,8 @@ function TradeRelationship(_ref) {
             tooltipTitle,
             moreLeft: false
           })
-        });
+        };
+        _edges.push(edge);
       });
     }
     const mapChildren = _ref2 => {
@@ -49541,7 +49625,7 @@ function TradeRelationship(_ref) {
           var _ch$id2, _ch$id3;
           const hasPrev = _prevNodes.find(p => p.id === source);
           const isCustom = !hasPrev ? true : prevChildren.includes(source) ? false : true;
-          _edges.push({
+          const edge = {
             id: "e-".concat(ch.id, "-").concat(source),
             source: hasPrev ? source : ch === null || ch === void 0 || (_ch$id2 = ch.id) === null || _ch$id2 === void 0 ? void 0 : _ch$id2.toString(),
             type: isCustom ? "verticalPath" : "defaultEdge",
@@ -49559,7 +49643,8 @@ function TradeRelationship(_ref) {
               tooltipTitle,
               moreLeft: prevChildren.length > children.length
             })
-          });
+          };
+          _edges.push(edge);
           if (isCustom) {
             customIndex += 1;
           }
@@ -49598,11 +49683,24 @@ function TradeRelationship(_ref) {
       prevChildren: !isBilateral ? [data.id] : [],
       maxHeight: 0
     });
+
+    // Check for potential ID mismatches
+    const nodeIds = _nodes.map(n => n.id);
+    _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);
-  }, [data, activeNode]);
+    const timeoutId = setTimeout(() => {
+      setEdges(_edges);
+    }, 100); // 100ms is imperceptible to users but ensures React Flow is ready
 
-  // Used to find associated nodes, when a node is selected
+    // Cleanup to prevent memory leaks if component unmounts quickly
+    return () => clearTimeout(timeoutId);
+  }, [data, activeNode]);
   React.useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -49669,7 +49767,7 @@ function TradeRelationship(_ref) {
       });
     },
     ref: reactFlowWrapper
-  });
+  }, JSON.stringify(nodes) + JSON.stringify(edges));
 }
 var index$1 = withProvider(TradeRelationship);
 
@@ -50100,6 +50198,7 @@ var index = withProvider(StakeholderMappings);
 
 const _excluded$1 = ["t", "checkboxConfig", "defaultTableFilters", "columns", "children", "data", "loading", "APP", "getApiBaseUrl", "selectOptions", "selectFilters", "showCreate", "location", "goTo", "getRedirectLink", "defaultUrlParams", "view", "module", "filtersConfig", "isMobile"];
 const BaseScreen = _ref => {
+  var _data$data;
   let {
       t,
       // newFiltersConfig,
@@ -50199,7 +50298,7 @@ const BaseScreen = _ref => {
         className: "daf-table-wrapper pagination-w-padding",
         children: [/*#__PURE__*/jsxRuntime.jsx(DAFTable, _objectSpread2({
           columns: columns,
-          data: data === null || data === void 0 ? void 0 : data.data,
+          data: Array.isArray(data === null || data === void 0 ? void 0 : data.data) ? data === null || data === void 0 ? void 0 : data.data : data === null || data === void 0 || (_data$data = data.data) === null || _data$data === void 0 ? void 0 : _data$data.data,
           loading: loading,
           hideOnLoading: false,
           pagination: pagination,
@@ -60461,6 +60560,35 @@ function KeyIndicatorNavigateLabel(_ref) {
   });
 }
 
+function MissingTagButton(_ref) {
+  let {
+    hasMissing,
+    setHighlightMandatory,
+    highlightMandatory,
+    t
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: hasMissing ? /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+      onClick: () => setHighlightMandatory(!highlightMandatory),
+      className: formatClassname(['ml-2 highlight-tag', highlightMandatory && 'highlighted']),
+      style: {
+        textAlign: "center"
+      },
+      children: t('missing-inputs')
+    }) : /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
+      title: t('all-inputs-fullfilled'),
+      children: /*#__PURE__*/jsxRuntime.jsx(antd.Tag, {
+        onClick: () => setHighlightMandatory(!highlightMandatory),
+        className: formatClassname(['ml-2 highlight-tag disabled']),
+        style: {
+          textAlign: "center"
+        },
+        children: t('missing-inputs')
+      })
+    })
+  });
+}
+
 var Style$5 = styled__default["default"].div`
   display: flex;
   flex-direction: column;
@@ -61811,6 +61939,7 @@ exports.LineChart = LineChart;
 exports.Loading = Loading;
 exports.LocationTable = LocationTable;
 exports.MineSiteMap = Map$3;
+exports.MissingTagButton = MissingTagButton;
 exports.Modal = Modal;
 exports.ModalHeader = ModalHeader;
 exports.MoreMenu = MoreMenu;