datastake-daf 0.6.841 → 0.6.843

package/dist/pages/index.js

@@ -5840,7 +5840,7 @@ const transformPayload = payload => {
  * @param {object} obj - Object to traverse
  * @returns {any} - Resolved value or undefined
  */
-const resolveValuePath = (path, obj) => {
+const resolveValuePath = (path, obj, form) => {
   if (!path || !obj) return undefined;
 
   // Split by / and traverse the object
@@ -5859,7 +5859,8 @@ const resolveValuePath = (path, obj) => {
       current = current[part];
     }
   }
-  return current;
+  const value = Object.keys(form || {})?.length > 0 ? findOptions(current, form?.options || []) : current;
+  return value;
 };
 
 /**
@@ -5927,7 +5928,7 @@ const getCombinedPrefilledValues = form => {
  * @param {object} parentValues - Parent form values
  * @returns {string|null} - Resolved string with placeholders replaced by actual values, or null if not ready
  */
-const resolveCombinedPrefilledValue = (template, values = {}, parentValues = {}) => {
+const resolveCombinedPrefilledValue = (template, values = {}, parentValues = {}, form) => {
   if (!template || typeof template !== 'string') return '';
 
   // Regular expression to match placeholders like {path} or {path^subpath}
@@ -5940,7 +5941,7 @@ const resolveCombinedPrefilledValue = (template, values = {}, parentValues = {})
   if (nonParentPaths.length > 0) {
     // Check if at least one non-parent value has actual data
     hasNonParentValue = nonParentPaths.some(path => {
-      const value = resolveValuePath(path, values);
+      const value = resolveValuePath(path, values, form?.inputs?.[path]);
       return value !== undefined && value !== null && value !== '';
     });
 
@@ -5960,7 +5961,7 @@ const resolveCombinedPrefilledValue = (template, values = {}, parentValues = {})
       return formatValue(resolved);
     } else {
       // Regular path in current values
-      const resolved = resolveValuePath(path, values);
+      const resolved = resolveValuePath(path, values, form?.inputs?.[path]);
       return formatValue(resolved);
     }
   });
@@ -6099,6 +6100,12 @@ const SelectFilters = ({
 }) => {
   const [filters, setFilters] = React.useState(selectedFilters || {});
   const [initFilters, setInitFilters] = React.useState(selectedFilters || {});
+
+  // Sync internal state with selectedFilters prop when it changes
+  React.useEffect(() => {
+    setFilters(selectedFilters || {});
+    setInitFilters(selectedFilters || {});
+  }, [selectedFilters]);
   const getClearLabel = () => {
     switch (type) {
       case 'small':
@@ -6656,7 +6663,7 @@ const MultiSelectStyled = styled__default["default"](antd.Select)`
   &.ant-select-single {
     .ant-select-selector {
         padding-inline-end: 24px !important;
-        padding: 0 !important;
+        padding: 3px !important;
         max-width: 56px !important;
         width: 56px !important;
     }
@@ -7493,7 +7500,6 @@ var DashboardService$1 = createLazyService(DashboardService);
 //     url: string
 //     basePath: string,
 // }
-
 const useWidgetFetch = ({
   config,
   getData = DashboardService$1.getWidget,
@@ -7509,9 +7515,6 @@ const useWidgetFetch = ({
   const [initFetchDone, setInitFetchDone] = React.useState(false);
   const isMounted = React.useRef(true);
   const fetchData = async () => {
-    if (stop) {
-      return;
-    }
     setLoading(true);
     try {
       const {
@@ -7540,8 +7543,10 @@ const useWidgetFetch = ({
     };
   }, []);
   React.useEffect(() => {
-    fetchData();
-  }, [JSON.stringify(config)]);
+    if (!stop) {
+      fetchData();
+    }
+  }, [JSON.stringify(config), stop]);
   return {
     data,
     loading,
@@ -12480,6 +12485,7 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
     getViewport,
     fitView
   } = react.useReactFlow();
+  const hasInitialFitRef = React.useRef(false);
   const nodesToFit = React.useMemo(() => {
     let result;
     if (mandatoryNodesToFit) {
@@ -12490,27 +12496,29 @@ const BaseGraph = /*#__PURE__*/React.forwardRef(function BaseGraph({
     return result;
   }, [nodes.length, mandatoryNodesToFit?.length, mandatoryNodesToFit]);
 
-  // In BaseGraph.jsx, replace the useEffect with:
+  // Only auto-fit on initial render or when node count changes, not on property changes
   React.useEffect(() => {
     if (nodesToFit.length === 0) return;
 
-    // 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
-      });
-    }, 100); // Small delay to ensure nodes are rendered
-
-    return () => clearTimeout(timer);
-  }, [nodesToFit.length, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
+    // Only auto-fit on initial render or when node count changes
+    if (!hasInitialFitRef.current) {
+      hasInitialFitRef.current = true;
+      const timer = setTimeout(() => {
+        fitView({
+          padding: 0.4,
+          nodes: [...nodesToFit],
+          maxZoom: 0.9
+        });
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [nodesToFit.length, withDuration]);
   return /*#__PURE__*/jsxRuntime.jsx(ComponentWithFocus, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       style: {
         height: "100%",
-        width: "100%"
+        width: "100%",
+        position: "relative"
       },
       ref: ref,
       children: [filtersConfig ? /*#__PURE__*/jsxRuntime.jsx(Filters, {
@@ -13677,7 +13685,7 @@ const getColors$1 = theme => {
 
 function Locations({
   selectedSources = {},
-  data = [],
+  data = {},
   loading = false,
   t = () => {},
   options = {},
@@ -13688,23 +13696,23 @@ function Locations({
   } = options;
   const colors = getColors$1(theme);
   const pieData = React.useMemo(() => {
-    // eslint-disable-next-line no-shadow-restricted-names
-    const {
-      undefined: undefined$1,
-      ...rest
-    } = data;
-    const total = Object.values(rest).reduce((all, val) => all + (val || 0), 0);
+    const rest = data || {};
+    const total = Object.values(rest).reduce((sum, val) => sum + (val || 0), 0);
     return Object.keys(rest).map((key, index) => {
       const color = colors[index % colors.length];
+      const value = rest[key] || 0;
       return {
-        value: rest[key] || 0,
-        percent: (rest[key] || 0) / total,
-        color: color,
-        label: findOptions(key, countries),
-        key: key
+        value,
+        percent: total ? value / total : 0,
+        color,
+        label: findOptions(key, countries) || key,
+        key
       };
     });
-  }, [data, countries]);
+  }, [data, countries, colors]);
+  console.log({
+    data
+  });
   const isEmpty = React.useMemo(() => Object.keys(data).filter(k => !!data[k]).length === 0, [data]);
   const getTooltipChildren = React.useCallback(item => {
     if (isEmpty) {
@@ -13904,7 +13912,7 @@ function ChartsContainer({
       range: selectedRange
     },
     stop: selectedSources?.loading,
-    defaultData: []
+    defaultData: {}
   }), [isTradeActions, selectedSources, selectedRange]);
   const {
     loading,
@@ -13913,6 +13921,7 @@ function ChartsContainer({
     config: defaultConfig,
     onFetch: () => setPreviousRange(selectedRange)
   });
+  console.log('ChartsContainer data:', data);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: isTradeActions ? t("Trade Actors") : t("Mining Sites"),
     className: "with-border-header",
@@ -13929,7 +13938,7 @@ function ChartsContainer({
         selectedRange: selectedRange,
         options: options
       }), /*#__PURE__*/jsxRuntime.jsx(Locations, {
-        data: data?.locations,
+        data: data?.location,
         t: t,
         theme: theme,
         selectedSources: selectedSources,
@@ -23203,11 +23212,15 @@ function DataLink$1({
     getToken
   });
   const data = React.useMemo(() => {
+    const filteredPrefilledValues = Object.entries(form?.meta?.prefilledValues || {}).filter(([_, value]) => !(value && typeof value === 'object' && 'combine' in value)).reduce((acc, [key, value]) => ({
+      ...acc,
+      [key]: value
+    }), {});
     const _formData = isSingle ? formData && !Array.isArray(formData) ? [{
-      ...form?.meta?.prefilledValues,
+      ...filteredPrefilledValues,
       ...formData
     }] : [] : (Array.isArray(formData) ? formData : []).map(f => ({
-      ...form?.meta?.prefilledValues,
+      ...filteredPrefilledValues,
       ...f
     }));
     return (_formData || []).map((f, i) => {
@@ -25601,11 +25614,15 @@ function DataLinkFlat$1({
     }
   }, [entity, values.linking]);
   const dataLinkFormData = React.useMemo(() => {
+    const filteredPrefilledValues = Object.entries(form?.meta?.prefilledValues || {}).filter(([_, value]) => !(value && typeof value === 'object' && 'combine' in value)).reduce((acc, [key, value]) => ({
+      ...acc,
+      [key]: value
+    }), {});
     const _formData = isSingle ? formData && !Array.isArray(formData) ? [{
-      ...form?.meta?.prefilledValues,
+      ...filteredPrefilledValues,
       ...formData
     }] : [] : (Array.isArray(formData) ? formData : []).map(f => ({
-      ...form?.meta?.prefilledValues,
+      ...filteredPrefilledValues,
       ...f
     }));
     return (_formData || []).map((f, i) => {
@@ -26501,10 +26518,10 @@ const BasicInput = ({
       case 'text':
       case 'phoneNumber':
       case 'textarea':
-        return item ? propHasValue$1(item[inputName]) ? item[inputName] : placeholder(item, inputName, withPlaceholder) : propHasValue$1(data[inputName]) ? data[inputName] : placeholder(data, inputName, withPlaceholder);
+        return item ? propHasValue$1(item[inputName]) && item[inputName] !== '' ? item[inputName] : placeholder(item, inputName, withPlaceholder) : propHasValue$1(data[inputName]) && data[inputName] !== '' ? data[inputName] : placeholder(data, inputName, withPlaceholder);
       case 'website':
       case 'link':
-        const v = item ? propHasValue$1(item[inputName]) ? item[inputName] : placeholder(item, inputName, withPlaceholder) : propHasValue$1(data[inputName]) ? data[inputName] : placeholder(data, inputName, withPlaceholder);
+        const v = item ? propHasValue$1(item[inputName]) && item[inputName] !== '' ? item[inputName] : placeholder(item, inputName, withPlaceholder) : propHasValue$1(data[inputName]) && data[inputName] !== '' ? data[inputName] : placeholder(data, inputName, withPlaceholder);
         if (isModal) {
           return /*#__PURE__*/jsxRuntime.jsx("div", {
             className: "flex flex-column ant-upload-list",
@@ -27132,7 +27149,7 @@ const Input = ({
           ajaxOptions: ajaxOptions,
           evaluationConfig: evaluationConfig
         }, key);
-      }), isRepeatable && Array.isArray(modalData) && !modalData.length ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      }), isRepeatable && Array.isArray(modalData) && !modalData.length || modalData === "" ? /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-muted",
         children: t('Not answered')
       }) : null]
@@ -27167,7 +27184,7 @@ const Input = ({
           linkingData: linkingData,
           evaluationConfig: evaluationConfig
         }, key);
-      }), !modalData || Array.isArray(modalData) && !modalData.length ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      }), !modalData || Array.isArray(modalData) && !modalData.length || modalData === "" ? /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-muted",
         children: t('Not answered')
       }) : (Array.isArray(modalData) ? modalData : [modalData]).map((item, itemId) => /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -27253,7 +27270,7 @@ const Input = ({
           linkingData: linkingData,
           evaluationConfig: evaluationConfig
         }, key);
-      }), !formData || Array.isArray(formData) && !formData.length ? /*#__PURE__*/jsxRuntime.jsx("span", {
+      }), !formData || Array.isArray(formData) && !formData.length || formData === "" ? /*#__PURE__*/jsxRuntime.jsx("span", {
         className: "text-muted",
         children: t('Not answered')
       }) : (Array.isArray(formData) ? formData : [formData])?.map((item, itemId) => /*#__PURE__*/jsxRuntime.jsxs(React__default["default"].Fragment, {
@@ -39740,7 +39757,7 @@ const getGrouContent = (form, values, i, formId, excludedKeys, getData, setValue
   });
 };
 
-const useCombinedPrefilledValues = (combinedPrefilledValues, values, parentValues, setValues, MainForm) => {
+const useCombinedPrefilledValues = (combinedPrefilledValues, values, parentValues, setValues, MainForm, form) => {
   const combinedValuesRef = React.useRef({});
   React.useEffect(() => {
     if (!combinedPrefilledValues || Object.keys(combinedPrefilledValues).length === 0) {
@@ -39750,7 +39767,7 @@ const useCombinedPrefilledValues = (combinedPrefilledValues, values, parentValue
     let hasChanges = false;
     Object.keys(combinedPrefilledValues).forEach(fieldKey => {
       const template = combinedPrefilledValues[fieldKey];
-      const resolvedValue = resolveCombinedPrefilledValue(template, values, parentValues);
+      const resolvedValue = resolveCombinedPrefilledValue(template, values, parentValues, form);
       if (resolvedValue === null) {
         return;
       }
@@ -39940,7 +39957,7 @@ function DynamicForm({
   }, [data, isCreate]);
 
   // Handle combined prefilled values (auto-fill based on templates)
-  useCombinedPrefilledValues(combinedPrefilledValues, values, parentValues, setValues, MainForm);
+  useCombinedPrefilledValues(combinedPrefilledValues, values, parentValues, setValues, MainForm, form);
 
   // Initialize default values for hidden and disabled fields
   React.useEffect(() => {
@@ -43309,7 +43326,7 @@ const getColumns$a = ({
         className: "daf-default-cell"
       });
     }
-    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
+    const region = all?.location ? getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL) : getLinkValue(all?.administrativeLevel1Name, all?.linking?.SCL) || all?.administrativeLevel1Name;
     return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: region,
       children: region
@@ -43317,7 +43334,7 @@ const getColumns$a = ({
   }
 }, {
   dataIndex: 'territory',
-  title: findOptions(user?.company?.country, options?.administrativeLevel2)?.length > 2 ? findOptions(user?.company?.country, options?.administrativeLevel2) : t("Territory"),
+  title: findOptions(user?.company?.country, options?.administrativeLevel2)?.length > 2 ? findOptions(user?.company?.country, options?.administrativeLevel2Name) : t("Territory"),
   ellipsis: true,
   show: true,
   render: (v, all) => {
@@ -43326,7 +43343,7 @@ const getColumns$a = ({
         className: "daf-default-cell"
       });
     }
-    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
+    const district = all?.location ? getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL) : getLinkValue(all?.administrativeLevel2, all?.linking?.SCL) || all?.administrativeLevel2;
     return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: district,
       children: district
@@ -43739,7 +43756,7 @@ const getColumns$9 = ({
         className: "daf-default-cell"
       });
     }
-    const region = getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL);
+    const region = all?.location ? getLinkValue(all?.location?.administrativeLevel1, all?.location?.linking?.SCL) : getLinkValue(all?.administrativeLevel1Name, all?.linking?.SCL) || all?.administrativeLevel1Name;
     return region ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: region,
       children: region
@@ -43756,7 +43773,7 @@ const getColumns$9 = ({
         className: "daf-default-cell"
       });
     }
-    const district = getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL);
+    const district = all?.location ? getLinkValue(all?.location?.administrativeLevel2, all?.location?.linking?.SCL) : getLinkValue(all?.administrativeLevel2, all?.linking?.SCL) || all?.administrativeLevel2;
     return district ? /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
       title: district,
       children: district
@@ -46035,11 +46052,6 @@ const getKeyIndicatorConfig = ({
   label: t("Legal Form"),
   render: () => {
     const subCategory = findOptions(data?.subCategory, options?.subCategoriesOptions || options?.subCategory);
-    console.log({
-      subCategory,
-      initialSub: data?.subCategory,
-      options: options?.subCategoriesOptions || options?.subCategory
-    });
     if (subCategory?.length > 22) {
       const _subCategory = truncateString(subCategory, 22);
       return /*#__PURE__*/jsxRuntime.jsx(antd.Tooltip, {
@@ -46550,6 +46562,9 @@ const getFilterConfig = ({
   t = () => {},
   APP
 }) => {
+  console.log({
+    operatorData
+  });
   const productSet = new Set();
   const allTradeMineralOptions = [...(operatorData?.suppliers || []), ...(operatorData?.clients || []), ...(operatorData?.locationSuppliers || [])].flatMap(trade => (trade?.products || []).filter(product => !!product?.typeOfProduct && !productSet.has(product.typeOfProduct)).map(product => {
     productSet.add(product.typeOfProduct);
@@ -46562,17 +46577,22 @@ const getFilterConfig = ({
   const combinedMineralOptions = [...allTradeMineralOptions].filter((option, index, self) => {
     return option && index === self.findIndex(o => o.value === option.value);
   });
-  const value = filters.products ? {
-    value: filters.products
+  filters?.products ? {
+    value: filters?.products
   } : {};
-  return [{
-    label: t("Products"),
-    placeholder: t("Select"),
-    key: "products",
-    type: "select",
-    ...value,
-    options: combinedMineralOptions
-  }];
+  return {
+    products: {
+      label: t("Products"),
+      placeholder: t("Select"),
+      key: "products",
+      type: "select",
+      // ...value,
+      style: {
+        flex: 1
+      },
+      options: combinedMineralOptions
+    }
+  };
 };
 const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {
   if (data?.suppliers?.length > 0) {
@@ -46617,6 +46637,8 @@ const mapItem = (data, options, goTo, getRedirectLink, operatorData = {}, APP) =
 const useTradeRelationship = ({
   id,
   selectedPartners,
+  isProductsFilterReady,
+  hasProducts,
   options,
   goTo,
   getRedirectLink,
@@ -46627,18 +46649,31 @@ const useTradeRelationship = ({
   const [graphData, setGraphData] = React.useState({});
   const [loading, setLoading] = React.useState(false);
   const [fetchedProducts, setFetchedProducts] = React.useState(false);
+  React.useRef(false);
+  const product = React.useMemo(() => {
+    return filters?.products;
+  }, [filters?.products]);
+  console.log({
+    hasProducts,
+    product,
+    isProductsFilterReady,
+    stop: !selectedPartners?.partners?.length || selectedPartners?.loading || !isProductsFilterReady || isProductsFilterReady && hasProducts && !product
+  }, !selectedPartners?.partners?.length, selectedPartners?.loading, !isProductsFilterReady, isProductsFilterReady && hasProducts && !product);
   const config = React.useMemo(() => ({
     basepath: "analytics",
     url: `/widgets/trade-relationship-map`,
     filters: {
       datastakeId: id,
-      product: filters?.products,
+      ...(product && {
+        product: product
+      }),
       sources: selectedPartners?.partners || []
     },
-    stop: !selectedPartners?.partners?.length || selectedPartners?.loading
-  }), [id, filters?.products, selectedPartners?.partners, selectedPartners?.loading]);
+    stop: !selectedPartners?.partners?.length || selectedPartners?.loading || !isProductsFilterReady || isProductsFilterReady && hasProducts && !product
+  }), [id, product, selectedPartners?.partners, selectedPartners?.loading, isProductsFilterReady, hasProducts]);
   const {
-    data
+    data,
+    loading: dataLoading
   } = useWidgetFetch({
     config: config
   });
@@ -46646,7 +46681,7 @@ const useTradeRelationship = ({
     return mapItem(data, options, goTo, getRedirectLink, operatorData, APP);
   };
   React.useEffect(() => {
-    if (id && selectedPartners?.partners?.length > 0 && fetchedProducts) {
+    if (id && selectedPartners?.partners?.length > 0) {
       const _fetch = async () => {
         setLoading(true);
         try {
@@ -46733,7 +46768,8 @@ const useTradeRelationship = ({
     setFetchedProducts,
     setGraphData,
     setLoading,
-    data
+    data,
+    dataLoading
   };
 };
 
@@ -46748,8 +46784,7 @@ function TradeRelationship({
   filtersConfig,
   onFilterChange = () => {},
   renderTooltipItems = () => [],
-  getTotal = () => 0,
-  onRenderComplete = () => {}
+  getTotal = () => 0
 }) {
   const reactFlowWrapper = React.useRef(null);
   const [nodes, setNodes] = react.useNodesState([]);
@@ -46762,27 +46797,6 @@ function TradeRelationship({
   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);
-    }
-    if (nodes.length === 0 || edges.length === 0) {
-      setIsFullyRendered(true);
-      onRenderComplete(true);
-    }
-  }, [nodes.length, edges.length, associatedNodes]);
   React.useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -46968,7 +46982,7 @@ function TradeRelationship({
 
     // Cleanup to prevent memory leaks if component unmounts quickly
     return () => clearTimeout(timeoutId);
-  }, [data, activeNode]);
+  }, [data]);
   React.useEffect(() => {
     if (activeNode) {
       let _associatedNodesRight = [activeNode];
@@ -47046,30 +47060,41 @@ const TradeRelationships = ({
   id,
   options = {},
   getRedirectLink = () => {},
-  APP
+  APP,
+  user = {}
 }) => {
   const [filters, setFilters] = React.useState({});
   const [isFullyRendered, setIsFullyRendered] = React.useState(true);
+  const [isProductsFilterReady, setIsProductsFilterReady] = React.useState(false);
+  const [hasProducts, setHasProducts] = React.useState(true);
+  const [delayedLoading, setDelayedLoading] = React.useState(false);
+  const [delayedDataLoading, setDelayedDataLoading] = React.useState(false);
   const onFilterChange = filters => {
-    setFilters(p => ({
-      ...p,
-      ...filters
-    }));
+    setFilters(filters);
   };
   const filterConfig = React.useMemo(() => {
-    return getFilterConfig({
+    const filterConfig = Object.keys(operatorData).length > 0 ? getFilterConfig({
       operatorData,
       options,
       filters,
       t,
       APP
-    });
+    }) : {};
+    return filterConfig;
   }, [filters.products, t, options?.mineralOptions, operatorData, options?.minerals, APP]);
+  React.useEffect(() => {
+    if (filterConfig?.products?.options?.length >= 0 && !isProductsFilterReady) {
+      console.log('setting has products', filterConfig?.products?.options?.length);
+      setHasProducts(filterConfig?.products?.options?.length > 0);
+      setIsProductsFilterReady(true);
+    }
+  }, [filterConfig, isProductsFilterReady]);
   const {
     graphData,
     loading,
     fetchedProducts,
-    setFetchedProducts
+    setFetchedProducts,
+    dataLoading
   } = useTradeRelationship({
     id,
     selectedPartners,
@@ -47078,30 +47103,57 @@ const TradeRelationships = ({
     getRedirectLink,
     filters,
     operatorData,
-    APP
-  });
-  console.log({
-    graphData
+    APP,
+    isProductsFilterReady,
+    hasProducts
   });
+  const defaultProduct = React.useMemo(() => {
+    if (filterConfig?.products?.options?.length) {
+      return filterConfig?.products?.options?.[0]?.value || null;
+    }
+  }, [filterConfig]);
   React.useEffect(() => {
-    const defaultProduct = filterConfig?.[0]?.options?.[0]?.value;
-    if (!filters.products && defaultProduct) {
-      setFilters(prev => {
-        const data = {
-          ...prev,
-          products: defaultProduct
-        };
-        return data;
+    if (defaultProduct) {
+      setFilters({
+        products: defaultProduct
       });
     }
-    if (!fetchedProducts) {
-      setFetchedProducts(true);
+  }, [defaultProduct]);
+  const _filtersConfig = React.useMemo(() => ({
+    filtersConfig: {
+      ...filterConfig
+    },
+    options: Object.fromEntries(Object.keys(filterConfig).map(key => [key, filterConfig[key].options])),
+    language: user?.language,
+    selectedFilters: filters,
+    onApply: onFilterChange,
+    t: t
+  }), [filterConfig, user?.language, filters, t]);
+  React.useEffect(() => {
+    if (loading) {
+      setDelayedLoading(true);
+    } else {
+      const timer = setTimeout(() => {
+        setDelayedLoading(false);
+      }, 500);
+      return () => clearTimeout(timer);
     }
-  }, [filterConfig]);
+  }, [loading]);
+  React.useEffect(() => {
+    if (dataLoading) {
+      setDelayedDataLoading(true);
+    } else {
+      const timer = setTimeout(() => {
+        setDelayedDataLoading(false);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [dataLoading]);
   return /*#__PURE__*/jsxRuntime.jsx(Widget, {
     title: t("Trade Relationships"),
     className: "flex flex-1 with-border-header no-p-body",
-    loading: loading || isFullyRendered,
+    loading: delayedLoading || delayedDataLoading,
+    filtersConfig: _filtersConfig,
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex flex-1 flex-column justify-content-center",
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -47126,12 +47178,10 @@ const TradeRelationships = ({
           maxZoom: 1.2,
           minZoom: 0.4,
           tooltipTitle: "Trade",
-          filtersConfig: filterConfig,
-          onFilterChange: onFilterChange,
           onRenderComplete: data => {
-            console.log("onRenderComplete");
             setIsFullyRendered(!data);
-          }
+          },
+          filters: filters
         })
       })
     })
@@ -47848,7 +47898,8 @@ const OperatorSummary = ({
         goTo: goTo,
         getRedirectLink: getRedirectLink,
         operatorData: singleItemData,
-        APP: APP
+        APP: APP,
+        user: user
       })
     }), /*#__PURE__*/jsxRuntime.jsx("section", {
       children: /*#__PURE__*/jsxRuntime.jsx(Governance, {
@@ -62962,7 +63013,7 @@ const View = ({
           children: /*#__PURE__*/jsxRuntime.jsx(Multiselect, {
             options: [...sourceOptions],
             isAvatarGroup: true,
-            selectionType: "checkbox",
+            selectionType: "radio",
             canUnselectLast: false,
             isSingle: true,
             onChange: selected => {
@@ -64225,6 +64276,9 @@ function IncidentsTimeline({
     if (selectedRange === "12") return baseMonths.map(m => m.label);
     return baseWeeks.map(w => w.label);
   }, [selectedRange, baseMonths, baseWeeks]);
+  console.log({
+    filtersConfig
+  });
   const getTooltipContent = React.useCallback(({
     item
   }) => {