datastake-daf 0.6.766 → 0.6.767

package/dist/components/index.js

@@ -9522,29 +9522,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(', ');
@@ -9559,7 +9554,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) || {};
@@ -9573,7 +9568,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:
@@ -9581,27 +9576,25 @@ const renderFieldData = function (type, value, user, config) {
   }
 };
 
-const renderValue = _ref => {
-  let {
-    value,
-    hasChildren,
-    config,
-    user,
-    getApiBaseUrl = () => {},
-    getAppHeader = () => {},
-    app,
-    allData = {}
-  } = _ref;
-  if ((config === null || config === void 0 ? void 0 : config.type) === 'groupInputs') {
-    if (!(config !== null && config !== void 0 && config.inputs)) return null;
+const renderValue = ({
+  value,
+  hasChildren,
+  config,
+  user,
+  getApiBaseUrl = () => {},
+  getAppHeader = () => {},
+  app,
+  allData = {}
+}) => {
+  if (config?.type === 'groupInputs') {
+    if (!config?.inputs) return null;
     const inputKeys = Object.keys(config.inputs).sort((a, b) => {
-      var _config$inputs$a, _config$inputs$b;
-      const positionA = ((_config$inputs$a = config.inputs[a]) === null || _config$inputs$a === void 0 ? void 0 : _config$inputs$a.position) || 0;
-      const positionB = ((_config$inputs$b = config.inputs[b]) === null || _config$inputs$b === void 0 ? void 0 : _config$inputs$b.position) || 0;
+      const positionA = config.inputs[a]?.position || 0;
+      const positionB = config.inputs[b]?.position || 0;
       return positionA - positionB;
     });
     const values = inputKeys.map(inputKey => {
-      let inputValue = value === null || value === void 0 ? void 0 : value[inputKey];
+      let inputValue = value?.[inputKey];
       if (inputValue === null || inputValue === undefined || inputValue === '') {
         return '';
       } else if (typeof inputValue === 'object' && inputValue !== null) {
@@ -9642,8 +9635,8 @@ const renderValue = _ref => {
   } else {
     displayValue = String(value);
   }
-  const fieldType = (config === null || config === void 0 ? void 0 : config.type) || 'text';
-  let cssClass = "tree-value ".concat(fieldType, "-type");
+  const fieldType = config?.type || 'text';
+  let cssClass = `tree-value ${fieldType}-type`;
   if (displayValue === '-') {
     cssClass += ' empty';
   }
@@ -9653,21 +9646,19 @@ const renderValue = _ref => {
     children: displayValue
   });
 };
-const determineHasChildren = _ref2 => {
-  var _config$meta;
-  let {
-    config,
-    level
-  } = _ref2;
-  if ((config === null || config === void 0 ? void 0 : config.type) === 'groupInputs') {
+const determineHasChildren = ({
+  config,
+  level
+}) => {
+  if (config?.type === 'groupInputs') {
     return false;
   }
-  if ((config === null || config === void 0 ? void 0 : config.type) === 'header' && config !== null && config !== void 0 && config.inputs && Object.keys(config.inputs).length > 0) {
+  if (config?.type === 'header' && config?.inputs && Object.keys(config.inputs).length > 0) {
     return true;
   }
-  return (config === null || config === void 0 ? void 0 : config.inputs) || (config === null || config === void 0 ? void 0 : config.type) === 'group' || (config === null || config === void 0 ? void 0 : config.type) === 'dataLinkGroup' || (config === null || config === void 0 ? void 0 : config.type) === 'section' || (config === null || config === void 0 ? void 0 : config.type) === 'ajaxSubGroup' ||
+  return config?.inputs || config?.type === 'group' || config?.type === 'dataLinkGroup' || config?.type === 'section' || config?.type === 'ajaxSubGroup' ||
   // Add this line
-  (config === null || config === void 0 ? void 0 : config.type) === 'dataLink' && (config === null || config === void 0 || (_config$meta = config.meta) === null || _config$meta === void 0 ? void 0 : _config$meta.tableKeys) || level === 0 && config && typeof config === 'object' && Object.keys(config).some(key => key !== 'id' && key !== 'label' && key !== 'position' && key !== 'subTitle' && typeof config[key] === 'object' && config[key] !== null);
+  config?.type === 'dataLink' && config?.meta?.tableKeys || level === 0 && config && typeof config === 'object' && Object.keys(config).some(key => key !== 'id' && key !== 'label' && key !== 'position' && key !== 'subTitle' && typeof config[key] === 'object' && config[key] !== null);
 };
 
 const sortByPosition = (items, getConfig) => {
@@ -10156,37 +10147,42 @@ const handleDataLinkGroupWithTableKeys = _ref2 => {
   }
 };
 
-const handleDataLinkWithTableKeys = ({
-  inputConfig,
-  inputKey,
-  value,
-  level,
-  t,
-  rootForm,
-  allData,
-  user,
-  getApiBaseUrl = () => {},
-  getAppHeader = () => {},
-  app,
-  TreeNodeComponent
-}) => {
-  if (inputConfig?.type !== 'dataLink' || !inputConfig?.meta?.tableKeys) {
+const handleDataLinkWithTableKeys = _ref => {
+  var _inputConfig$meta, _inputConfig$meta3, _inputConfig$meta4, _inputConfig$meta5;
+  let {
+    inputConfig,
+    inputKey,
+    value,
+    level,
+    t,
+    rootForm,
+    allData,
+    user,
+    getApiBaseUrl = () => {},
+    getAppHeader = () => {},
+    app,
+    TreeNodeComponent
+  } = _ref;
+  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)) {
     return null;
   }
   const tableKeys = inputConfig.meta.tableKeys;
-  const isAjaxModal = React.useMemo(() => !!inputConfig?.meta?.namespace, [inputConfig]);
+  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 ajaxModalValues = useAjaxModal$2({
     name: inputKey,
     user,
-    namespace: inputConfig?.meta?.namespace,
-    skipFetch: inputConfig?.meta?.skipFetch,
+    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,
     isAjaxModal,
-    formScope: inputConfig?.meta?.formScope,
+    formScope: inputConfig === null || inputConfig === void 0 || (_inputConfig$meta5 = inputConfig.meta) === null || _inputConfig$meta5 === void 0 ? void 0 : _inputConfig$meta5.formScope,
     APP: app,
     apiBaseUrl: getApiBaseUrl(),
     _getAppHeader: getAppHeader
   });
-  const dataLinkForm = ajaxModalValues?.form;
+  const dataLinkForm = ajaxModalValues === null || ajaxModalValues === void 0 ? void 0 : ajaxModalValues.form;
   const createInputsAndValues = item => {
     const inputs = {};
     const values = {};
@@ -10199,19 +10195,20 @@ const handleDataLinkWithTableKeys = ({
     };
     const isUploadFieldEmpty = (fieldKey, itemToCheck) => {
       if (uploadTypeFields.includes(fieldKey)) {
-        const itemValue = itemToCheck?.[fieldKey];
+        const itemValue = itemToCheck === null || itemToCheck === void 0 ? void 0 : itemToCheck[fieldKey];
         return itemValue === undefined || itemValue === null || Array.isArray(itemValue) && itemValue.length === 0;
       }
       return false;
     };
     const processedTableKeys = processConditionalTableKeys(tableKeys, item);
     processedTableKeys.filter(tableKey => tableKey !== 'datastakeId').filter(tableKey => !isUploadFieldEmpty(tableKey, item)).forEach(tableKey => {
-      const formInputConfig = dataLinkForm?.[tableKey] || dataLinkForm?.['identification']?.[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]);
       if (formInputConfig) {
-        inputs[tableKey] = {
-          ...formInputConfig,
+        var _item$linking, _formInputConfig$meta, _formInputConfig$tabl;
+        inputs[tableKey] = _objectSpread2(_objectSpread2({}, 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;
@@ -10219,7 +10216,7 @@ const handleDataLinkWithTableKeys = ({
             const parts = labelKey.split(' is ');
             if (parts.length === 2) {
               const [conditionKey, conditionValue] = parts;
-              if (item?.[conditionKey] === conditionValue) {
+              if ((item === null || item === void 0 ? void 0 : item[conditionKey]) === conditionValue) {
                 resolvedLabel = formInputConfig.label[labelKey];
                 break;
               }
@@ -10227,16 +10224,17 @@ const handleDataLinkWithTableKeys = ({
           }
           inputs[tableKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || (uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey);
         }
-        values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item[formInputConfig?.meta?.onNewSetValueKey] || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[tableKey];
+        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[formInputConfig === null || formInputConfig === void 0 || (_formInputConfig$meta = formInputConfig.meta) === null || _formInputConfig$meta === void 0 ? void 0 : _formInputConfig$meta.onNewSetValueKey] || (item === null || item === void 0 ? void 0 : item[formInputConfig === null || formInputConfig === void 0 || (_formInputConfig$tabl = formInputConfig.tableLabel) === null || _formInputConfig$tabl === void 0 ? void 0 : _formInputConfig$tabl.toLowerCase()]) || (item === null || item === void 0 ? void 0 : item[tableKey]);
       } else {
+        var _item$linking2;
         inputs[tableKey] = {
           label: uploadTypeFields.includes(tableKey) ? uploadTypeLabels[tableKey] : tableKey,
-          type: inputConfig?.type
+          type: inputConfig === null || inputConfig === void 0 ? void 0 : inputConfig.type
         };
-        values[tableKey] = item?.linking?.SCL?.[item?.[tableKey]]?.name || item?.[tableKey];
+        values[tableKey] = (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[tableKey]]) === null || _item$linking2 === void 0 ? void 0 : _item$linking2.name) || (item === null || item === void 0 ? void 0 : item[tableKey]);
       }
     });
-    if (dataLinkForm?.identification && typeof dataLinkForm.identification === 'object') {
+    if (dataLinkForm !== null && dataLinkForm !== void 0 && dataLinkForm.identification && typeof dataLinkForm.identification === 'object') {
       Object.keys(dataLinkForm.identification).filter(fieldKey => {
         if (uploadTypeFields.includes(fieldKey)) {
           return !isUploadFieldEmpty(fieldKey, item);
@@ -10246,11 +10244,11 @@ const handleDataLinkWithTableKeys = ({
         const formInputConfig = dataLinkForm.identification[fieldKey];
         return formInputConfig && typeof formInputConfig === 'object' && !Array.isArray(formInputConfig);
       }).forEach(fieldKey => {
+        var _item$linking3, _formInputConfig$tabl2;
         const formInputConfig = dataLinkForm.identification[fieldKey];
-        inputs[fieldKey] = {
-          ...formInputConfig,
+        inputs[fieldKey] = _objectSpread2(_objectSpread2({}, formInputConfig), {}, {
           label: uploadTypeFields.includes(fieldKey) ? uploadTypeLabels[fieldKey] : formInputConfig.label || formInputConfig.tableLabel || fieldKey
-        };
+        });
         if (formInputConfig.label && typeof formInputConfig.label === 'object') {
           const dynamicLabelKeys = Object.keys(formInputConfig.label);
           let resolvedLabel = null;
@@ -10258,7 +10256,7 @@ const handleDataLinkWithTableKeys = ({
             const parts = labelKey.split(' is ');
             if (parts.length === 2) {
               const [conditionKey, conditionValue] = parts;
-              if (item?.[conditionKey] === conditionValue) {
+              if ((item === null || item === void 0 ? void 0 : item[conditionKey]) === conditionValue) {
                 resolvedLabel = formInputConfig.label[labelKey];
                 break;
               }
@@ -10266,7 +10264,7 @@ const handleDataLinkWithTableKeys = ({
           }
           inputs[fieldKey].label = resolvedLabel || Object.values(formInputConfig.label)[0] || (uploadTypeFields.includes(fieldKey) ? uploadTypeLabels[fieldKey] : fieldKey);
         }
-        values[fieldKey] = item?.linking?.SCL?.[item?.[fieldKey]]?.name || item?.[formInputConfig?.tableLabel?.toLowerCase()] || item?.[fieldKey];
+        values[fieldKey] = (item === null || item === void 0 || (_item$linking3 = item.linking) === null || _item$linking3 === void 0 || (_item$linking3 = _item$linking3.SCL) === null || _item$linking3 === void 0 || (_item$linking3 = _item$linking3[item === null || item === void 0 ? void 0 : item[fieldKey]]) === null || _item$linking3 === void 0 ? void 0 : _item$linking3.name) || (item === null || item === void 0 ? void 0 : item[formInputConfig === null || formInputConfig === void 0 || (_formInputConfig$tabl2 = formInputConfig.tableLabel) === null || _formInputConfig$tabl2 === void 0 ? void 0 : _formInputConfig$tabl2.toLowerCase()]) || (item === null || item === void 0 ? void 0 : item[fieldKey]);
       });
     }
     return {
@@ -10276,7 +10274,7 @@ const handleDataLinkWithTableKeys = ({
   };
   if (Array.isArray(value)) {
     return value.map((item, itemIndex) => {
-      const datastakeIdValue = item?.datastakeId;
+      const datastakeIdValue = item === null || item === void 0 ? void 0 : item.datastakeId;
       const {
         inputs,
         values
@@ -10285,9 +10283,9 @@ const handleDataLinkWithTableKeys = ({
         return null;
       }
       return /*#__PURE__*/jsxRuntime.jsx(TreeNodeComponent, {
-        nodeKey: datastakeIdValue || t(`No ID ${itemIndex + 1}`),
+        nodeKey: datastakeIdValue || t("No ID ".concat(itemIndex + 1)),
         config: {
-          label: datastakeIdValue || t(`No ID ${itemIndex + 1}`),
+          label: datastakeIdValue || t("No ID ".concat(itemIndex + 1)),
           type: 'custom-datalink',
           inputs: inputs
         },
@@ -10301,10 +10299,10 @@ const handleDataLinkWithTableKeys = ({
         getApiBaseUrl: getApiBaseUrl,
         getAppHeader: getAppHeader,
         app: app
-      }, `${inputKey}-${itemIndex}`);
+      }, "".concat(inputKey, "-").concat(itemIndex));
     });
   } else {
-    const datastakeIdValue = value?.datastakeId;
+    const datastakeIdValue = value === null || value === void 0 ? void 0 : value.datastakeId;
     const {
       inputs,
       values
@@ -10329,7 +10327,7 @@ const handleDataLinkWithTableKeys = ({
       getApiBaseUrl: getApiBaseUrl,
       getAppHeader: getAppHeader,
       app: app
-    }, `${inputKey}-single`);
+    }, "".concat(inputKey, "-single"));
   }
 };
 
@@ -12731,7 +12729,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;
@@ -13632,7 +13635,7 @@ function StakeholderIcon$1({
           onClickLink(data);
         }
       }),
-      getPopupContainer: () => document.getElementById(data.datastakeId),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(StakeholderMarker, {
         className: `${data.type} ${isSelected ? "selected" : selectedMarkersId.length > 0 ? "unselected" : ""} 
 			${isSmall ? "small" : isMedium ? "medium" : "large"}
@@ -13835,8 +13838,7 @@ function LocationIcon({
     // 	isHovering
     // }
     ,
-
-    getPopupContainer: () => document.getElementById(i),
+    getPopupContainer: () => document.getElementById("map"),
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         position: "relative",
@@ -13937,6 +13939,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -13978,6 +13981,7 @@ function StakeholderIcon({
             link,
             onClickLink: () => onClickLink(marker)
           }),
+          getPopupContainer: () => document.getElementById("map"),
           children: /*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
               position: "absolute",
@@ -14013,6 +14017,7 @@ function StakeholderIcon({
         link,
         onClickLink: () => onClickLink(marker)
       }),
+      getPopupContainer: () => document.getElementById("map"),
       children: /*#__PURE__*/jsxRuntime.jsx(Style$K
       // onClick={toggleOpen}
       , {
@@ -14736,7 +14741,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 +14811,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 +49203,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 +49248,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 +49453,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 +49467,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 +49508,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 +49520,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 +49531,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 +49550,8 @@ function TradeRelationship(_ref) {
             tooltipTitle,
             moreLeft: false
           })
-        });
+        };
+        _edges.push(edge);
       });
     }
     const mapChildren = _ref2 => {
@@ -49541,7 +49595,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 +49613,8 @@ function TradeRelationship(_ref) {
               tooltipTitle,
               moreLeft: prevChildren.length > children.length
             })
-          });
+          };
+          _edges.push(edge);
           if (isCustom) {
             customIndex += 1;
           }
@@ -49598,11 +49653,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 +49737,7 @@ function TradeRelationship(_ref) {
       });
     },
     ref: reactFlowWrapper
-  });
+  }, JSON.stringify(nodes) + JSON.stringify(edges));
 }
 var index$1 = withProvider(TradeRelationship);