datastake-daf 0.6.841 → 0.6.843

package/package.json

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

package/src/@daf/core/components/DynamicForm/hook.js

@@ -1,7 +1,7 @@
 import { useRef, useEffect } from "react";
 import { resolveCombinedPrefilledValue } from "../../../../helpers/Forms";
 
-export const useCombinedPrefilledValues = (combinedPrefilledValues, values, parentValues, setValues, MainForm) => {
+export const useCombinedPrefilledValues = (combinedPrefilledValues, values, parentValues, setValues, MainForm, form) => {
     const combinedValuesRef = useRef({});
   
     useEffect(() => {
@@ -14,7 +14,7 @@ export const useCombinedPrefilledValues = (combinedPrefilledValues, values, pare
       
       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;

package/src/@daf/core/components/DynamicForm/index.jsx

@@ -178,7 +178,7 @@ export default 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
     useEffect(() => {

package/src/@daf/core/components/Filters/selectFilters/index.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import { Button, Input, Tooltip } from 'antd';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import { CustomSelect } from './Select.jsx';
 import { Timeframe } from './Timeframe.jsx';
 import { AjaxSelect } from "./AjaxSelect.jsx";
@@ -26,6 +26,12 @@ const SelectFilters = ({
   const [filters, setFilters] = useState(selectedFilters || {});
   const [initFilters, setInitFilters] = useState(selectedFilters || {})
 
+  // Sync internal state with selectedFilters prop when it changes
+  useEffect(() => {
+    setFilters(selectedFilters || {});
+    setInitFilters(selectedFilters || {});
+  }, [selectedFilters]);
+
   const getClearLabel = () => {
     switch (type) {
       case 'small':

package/src/@daf/core/components/Graphs/TradeRelationship/index.jsx

@@ -21,7 +21,6 @@ function TradeRelationship({
   onFilterChange = () => {},
   renderTooltipItems = () => [],
   getTotal = () => 0,
-  onRenderComplete = () => {},
 }) {
   const reactFlowWrapper = useRef(null);
   const [nodes, setNodes] = useNodesState([]);
@@ -31,31 +30,6 @@ function TradeRelationship({
   // const [initCenter, setInitCenter] = useState(true);
   const [associatedNodes, setAssociatedNodes] = useState(null);
 
-  const isFullyRenderedRef = useRef(false);
-  const [isFullyRendered, setIsFullyRendered] = useState(false);
-
-  useEffect(() => {
-    isFullyRenderedRef.current = false;
-    setIsFullyRendered(false);
-    setActiveNode(null);
-  }, [data]);
-
-  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]);
-  
   useEffect(() => {
     setActiveNode(null);
   }, [data]);
@@ -274,7 +248,7 @@ function TradeRelationship({
     
     // Cleanup to prevent memory leaks if component unmounts quickly
     return () => clearTimeout(timeoutId);
-  }, [data, activeNode]);
+  }, [data]);
 
   useEffect(() => {
     if (activeNode) {

package/src/@daf/core/components/Graphs/components/BaseGraph.jsx

@@ -2,7 +2,7 @@ import { ReactFlow, Controls, ControlButton, useReactFlow } from "@xyflow/react"
 import { UpOutlined, DownOutlined, AimOutlined } from "@ant-design/icons";
 
 import ComponentWithFocus from "../../Dashboard/ComponentWithFocus/index.jsx";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
 import { PrimaryNode, IconNode, NameNode, ExpandedNode } from "./Nodes/index.jsx";
 import { ToolTipEdge, VerticalPathEdge, DefaultEdge } from "./Edges/index.jsx";
 import Filters from "../../Filters/FloatingFilters/index.js";
@@ -38,6 +38,7 @@ const BaseGraph = forwardRef(function BaseGraph(
 	ref,
 ) {
 	const { setViewport, getViewport, fitView } = useReactFlow();
+	const hasInitialFitRef = useRef(false);
 
 	const nodesToFit = useMemo(() => {
 		let result;
@@ -49,31 +50,34 @@ const BaseGraph = 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
 	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
+		// 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, nodesToFit.map(n => `${n.id}-${n.width}-${n.height}`).join(','), withDuration]);
+			return () => clearTimeout(timer);
+		}
+	}, [nodesToFit.length, withDuration]);
 
 	return (
 		<ComponentWithFocus>
-			<div style={{ height: "100%", width: "100%" }} ref={ref}>
-				{filtersConfig ? (
-					<Filters t={t} filtersConfig={filtersConfig} onFilterChange={onFilterChange} />
-				) : null}
+			<div style={{ height: "100%", width: "100%", position: "relative" }} ref={ref}>
+			{filtersConfig ? (
+				<Filters t={t} filtersConfig={filtersConfig} onFilterChange={onFilterChange} />
+			) : null}
 
-				<ReactFlow
+			<ReactFlow
 					nodes={nodes}
 					edges={edges}
 					zoomOnDoubleClick={false}

package/src/@daf/core/components/Select/MultiSelect/style.js

@@ -5,7 +5,7 @@ const MultiSelectStyled = styled(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;
     }

package/src/@daf/core/components/ViewForm/components/DataLink/flat.js

@@ -177,9 +177,13 @@ export default function DataLinkFlat({
   }, [entity, values.linking])
 
   const dataLinkFormData = useMemo(() => {
-    const _formData = isSingle ? formData && !Array.isArray(formData)
-      ? [{ ...form?.meta?.prefilledValues, ...formData }] : []
-      : (Array.isArray(formData) ? formData : []).map((f) => ({ ...form?.meta?.prefilledValues, ...f }));
+    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)
+    ? [{ ...filteredPrefilledValues, ...formData }] : []
+    : (Array.isArray(formData) ? formData : []).map((f) => ({ ...filteredPrefilledValues, ...f }));
 
     return (_formData || []).map((f, i) => {
       if (isAjaxModal && typeof f === 'string' && linkingData[f]) {

package/src/@daf/core/components/ViewForm/components/DataLink/index.js

@@ -111,9 +111,13 @@ export default function DataLink({
   })
 
   const data = 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, ...formData }] : []
-      : (Array.isArray(formData) ? formData : []).map((f) => ({ ...form?.meta?.prefilledValues, ...f }));
+      ? [{ ...filteredPrefilledValues, ...formData }] : []
+      : (Array.isArray(formData) ? formData : []).map((f) => ({ ...filteredPrefilledValues, ...f }));
 
     return (_formData || []).map((f, i) => {
       if (isAjaxModal && typeof f === 'string' && linkingData[f]) {

package/src/@daf/core/components/ViewForm/components/input.js

@@ -361,13 +361,13 @@ export const BasicInput = ({
       case 'phoneNumber':
       case 'textarea':
         return item
-          ? (propHasValue(item[inputName]) ? item[inputName] : placeholder(item, inputName, withPlaceholder))
-          : (propHasValue(data[inputName]) ? data[inputName] : placeholder(data, inputName, withPlaceholder));
+          ? (propHasValue(item[inputName]) && item[inputName] !== '' ? item[inputName] : placeholder(item, inputName, withPlaceholder))
+          : (propHasValue(data[inputName]) && data[inputName] !== '' ? data[inputName] : placeholder(data, inputName, withPlaceholder));
       case 'website':
       case 'link':
         const v = item
-          ? (propHasValue(item[inputName]) ? item[inputName] : placeholder(item, inputName, withPlaceholder))
-          : (propHasValue(data[inputName]) ? data[inputName] : placeholder(data, inputName, withPlaceholder))
+          ? (propHasValue(item[inputName]) && item[inputName] !== '' ? item[inputName] : placeholder(item, inputName, withPlaceholder))
+          : (propHasValue(data[inputName]) && data[inputName] !== '' ? data[inputName] : placeholder(data, inputName, withPlaceholder))
 
         if (isModal) {
           return (
@@ -1023,7 +1023,7 @@ const Input = ({
           >
           </BasicInput>
         })}
-        {isRepeatable && Array.isArray(modalData) && !modalData.length ? (
+        {isRepeatable && Array.isArray(modalData) && !modalData.length || modalData === "" ? (
           <span className="text-muted">{t('Not answered')}</span>
         ) : null}
       </React.Fragment>
@@ -1068,7 +1068,7 @@ const Input = ({
           })
         }
         {
-          (!modalData || (Array.isArray(modalData) && !modalData.length)) ? (
+          (!modalData || (Array.isArray(modalData) && !modalData.length) || modalData === "") ? (
             <span className="text-muted">{t('Not answered')}</span>
           ) : (
             (Array.isArray(modalData) ? modalData : [modalData]).map((item, itemId) => (
@@ -1174,7 +1174,7 @@ const Input = ({
         >
         </BasicInput>
       })}
-      {(!formData || (Array.isArray(formData) && !formData.length)) ? (
+      {(!formData || (Array.isArray(formData) && !formData.length) || formData === "") ? (
         <span className="text-muted">{t('Not answered')}</span>
       ) : (
         (Array.isArray(formData) ? formData : [formData])?.map((item, itemId) => (

package/src/@daf/hooks/useWidgetFetch.js

@@ -2,7 +2,6 @@ import { useState, useEffect, useRef } from "react";
 import DashboardService from "../services/DashboardService.js";
 import { isErrorResponse, getErrorMessage } from "../../helpers/errorHandling.js";
 import { message } from "antd";
-
 // config: {
 //     stop: boolean,
 //     defaultData: object,
@@ -10,56 +9,48 @@ import { message } from "antd";
 //     url: string
 //     basePath: string,
 // }
-
 export const useWidgetFetch = ({config, getData = DashboardService.getWidget, onFetch = () => {}}) => {
     const { stop, defaultData, ...rest} = config;
     const [ data, setData ] = useState(defaultData || {});
     const [ loading, setLoading ] = useState(false);
     const [ initFetchDone, setInitFetchDone ] = useState(false);
     const isMounted = useRef(true);
-
-	const fetchData = async () => {
-		if (stop) {
-			return;
-		}
-
-		setLoading(true);
-
-		try {
-			const { data } = await getData(rest);
-			if (!isMounted.current) return;
-			setData(data || defaultData);
-			if (isErrorResponse(data)) {
-				const errorMessage = getErrorMessage(data);
-				message.error(errorMessage);
-				return;
-			}
+	
+    const fetchData = async () => {
+        setLoading(true);
+        try {
+            const { data } = await getData(rest);
+            if (!isMounted.current) return;
+            setData(data || defaultData);
+            if (isErrorResponse(data)) {
+                const errorMessage = getErrorMessage(data);
+                message.error(errorMessage);
+                return;
+            }
             onFetch();
             setInitFetchDone(true);
-		} catch (err) {
-			console.log(err);
-		}
-
-		if (isMounted.current) {
-			setLoading(false);
-		}
-	};
-
+        } catch (err) {
+            console.log(err);
+        }
+        if (isMounted.current) {
+            setLoading(false);
+        }
+    };
     useEffect(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
         };
     }, []);
-
-	useEffect(() => {
-		fetchData();
-	}, [JSON.stringify(config)]);
-
+    useEffect(() => {
+        if(!stop) {
+			fetchData();
+		}
+    }, [JSON.stringify(config), stop]);
     return {
         data,
         loading,
-		setData,
+        setData,
         initFetchDone
     }
-} 
+}

package/src/@daf/pages/Dashboards/ConflictManagement/components/RisksWidget/components/IncidentsTime/index.js

@@ -92,6 +92,7 @@ export default 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 = useCallback(
     ({ item }) => {

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/components/Locations/index.js

@@ -6,28 +6,29 @@ import Widget from '../../../../../../../core/components/Dashboard/Widget/index.
 import Chart from '../../../../../../../core/components/Charts/PieChart/chart.jsx';
 import { getColors } from './config';
 
-function Locations({selectedSources = {}, data = [], loading = false, t = () => {}, options = {}, theme = {}}) {
+function Locations({selectedSources = {}, data = {}, loading = false, t = () => {}, options = {}, theme = {}}) {
     const { countries = [] } = options;
     const colors = getColors(theme);
-
     const pieData = useMemo(() => {
-        // eslint-disable-next-line no-shadow-restricted-names
-        const { undefined, ...rest } = data;
-        const total = Object.values(rest).reduce((all, val) => all + (val || 0), 0);
-    
-        return Object.keys(rest).map((key, index) => {
-          const color = colors[index % colors.length];
-        
-          return {
-            value: rest[key] || 0,
-            percent: (rest[key] || 0) / total,
-            color: color,
-            label: findOptions(key, countries),
-            key: key,
-          };
-        });
-    }, [data, countries]);
-
+      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,
+          percent: total ? value / total : 0,
+          color,
+          label: findOptions(key, countries) || key,
+          key,
+        };
+      });
+  }, [data, countries, colors]);
+  
+console.log({data});
     const isEmpty = useMemo(
         () => Object.keys(data).filter((k) => !!data[k]).length === 0,
         [data],

package/src/@daf/pages/Dashboards/SupplyChain/components/ChartsContainer/index.js

@@ -24,13 +24,15 @@ function ChartsContainer({selectedSources = {}, isTradeActions = false, t = () =
 				range: selectedRange,
 			},
 			stop: selectedSources?.loading,
-			defaultData: [],
+			defaultData: {},
 		}),
 		[isTradeActions, selectedSources, selectedRange],
 	);
 
     const { loading, data } = useWidgetFetch({config: defaultConfig, onFetch: () => setPreviousRange(selectedRange)});
 
+    console.log('ChartsContainer data:', data);
+
     return (
         <Widget
             title={isTradeActions ? t("Trade Actors") : t("Mining Sites")}
@@ -50,12 +52,13 @@ function ChartsContainer({selectedSources = {}, isTradeActions = false, t = () =
                     options={options}
                 />
                 <Locations 
-                    data={data?.locations} 
+                    data={data?.location} 
                     t={t} 
                     theme={theme} 
                     selectedSources={selectedSources} 
                     loading={loading} 
                     options={options} 
+
                 />
                 <GenderDistribution
                     selectedSources={selectedSources}

package/src/@daf/pages/Events/Activities/columns.js

@@ -79,14 +79,16 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div 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 ? <Tooltip title={region}>{region}</Tooltip> : '-';
       },
   },    
   {
       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) => {
@@ -94,7 +96,9 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div 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 ? <Tooltip title={district}>{district}</Tooltip> : '-';
       },

package/src/@daf/pages/Events/Incidents/columns.js

@@ -79,7 +79,9 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div 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 ? <Tooltip title={region}>{region}</Tooltip> : '-';
       },
@@ -94,11 +96,13 @@ export const getColumns = ({t, goTo, user, options, activeTab, getRedirectLink,
           return <div 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 ? <Tooltip title={district}>{district}</Tooltip> : '-';
       },
-  },  
+  },    
     {
         dataIndex: 'eventCategory',
         title: t('Category'),

package/src/@daf/pages/Summary/Operator/components/KeyInformation/config.js

@@ -43,7 +43,6 @@ export const getKeyIndicatorConfig = ({ t, data = {}, options = {} }) => [
 		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 <Tooltip title={subCategory}>

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/helper.js

@@ -2,6 +2,7 @@ import { leftIcons, leftBackgroundColorLocation, leftBackgroundColorStakeholder,
 import { findOptions } from '../../../../../../helpers/StringHelper.js';
 
 export const getFilterConfig = ({operatorData = {}, options = {}, filters = {}, t = () => {}, APP}) => {
+    console.log({operatorData})
     const productSet = new Set();
     const allTradeMineralOptions = [
         ...(operatorData?.suppliers || []),
@@ -33,17 +34,18 @@ const label = options?.[
         return option && index === self.findIndex((o) => o.value === option.value);
     });
 
-    const value = filters.products ? { value: filters.products } : {};
-    return [
-        {
+    const value = filters?.products ? { value: filters?.products } : {};
+    return {
+        products: {
             label: t("Products"),
             placeholder: t("Select"),
             key: "products",
             type: "select",
-            ...value,
+            // ...value,
+            style: { flex: 1 },
             options: combinedMineralOptions,
         },
-    ];
+    };
 }
 
 export const getLeft = (data = {}, mapChildren = () => {}, supplierLocations = []) => {

package/src/@daf/pages/Summary/Operator/components/TradeRelationships/hook.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo, useRef } from "react";
 import { useWidgetFetch } from "../../../../../hooks/useWidgetFetch.js";
 import { leftIcons, leftBackgroundColorLocation, leftBackgroundColorStakeholder, topIcons } from './config.js';
 import { findOptions } from '../../../../../../helpers/StringHelper.js';
@@ -8,6 +8,8 @@ import { getLeft, mapItem as _mapItem } from './helper.js';
 export const useTradeRelationship = ({
     id,
     selectedPartners,
+	isProductsFilterReady,
+	hasProducts,
     options,
     goTo,
     getRedirectLink,
@@ -19,26 +21,38 @@ export const useTradeRelationship = ({
     const [graphData, setGraphData] = useState({});
 	const [loading, setLoading] = useState(false);
 	const [fetchedProducts, setFetchedProducts] = useState(false);
-
-    const config = useMemo(() => ({
-        basepath: "analytics",
-        url: `/widgets/trade-relationship-map`,
-        filters: {
+	const initFetchDoneRef = useRef(false);
+
+	const product = 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 = useMemo(() => ({
+		basepath: "analytics",
+		url: `/widgets/trade-relationship-map`,
+		filters: {
 			datastakeId: id,
-            product: filters?.products,
-            sources: selectedPartners?.partners || [],
-        },
-		stop: !selectedPartners?.partners?.length || selectedPartners?.loading,
-    }), [id, filters?.products, selectedPartners?.partners, selectedPartners?.loading]);
-    
-    const { data } = useWidgetFetch({config: config});
+			...(product && {product: product}),
+			sources: selectedPartners?.partners || [],
+		},
+		stop: !selectedPartners?.partners?.length 
+			  || selectedPartners?.loading || !isProductsFilterReady  || (isProductsFilterReady && hasProducts && !product)
+	}), [id, product, selectedPartners?.partners, selectedPartners?.loading, isProductsFilterReady, hasProducts]);
+	
+    const { data, loading: dataLoading } = useWidgetFetch({config: config});
 
     const mapItem = (data) => {
         return _mapItem(data, options, goTo, getRedirectLink, operatorData, APP);
     }
 
     useEffect(() => {
-		if (id && selectedPartners?.partners?.length > 0 && fetchedProducts) {
+		if (id && selectedPartners?.partners?.length > 0) {
 			const _fetch = async () => {
 				setLoading(true);
 
@@ -156,5 +170,6 @@ export const useTradeRelationship = ({
         setGraphData,
         setLoading,
         data,
+		dataLoading
     }
 }