diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx index 5a71656a958..f2ee5fc5acf 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -46,7 +46,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { isEqual, isEqualWith } from 'lodash'; import { getChartDataRequest } from 'src/components/Chart/chartAction'; import { ErrorAlert, ErrorMessageWithStackTrace } from 'src/components'; -import { Loading, Constants } from '@superset-ui/core/components'; +import { Loading, Constants, Flex } from '@superset-ui/core/components'; import { waitForAsyncData } from 'src/middleware/asyncEvent'; import { FilterBarOrientation, RootState } from 'src/dashboard/types'; import { @@ -128,6 +128,8 @@ const FilterValue: FC = ({ [isCustomization], ); const [state, setState] = useState([]); + const hasDeps = Boolean(filter.cascadeParentIds?.length); + const [hasDepsFilterValue, setHasDepsFilterValue] = useState(hasDeps); const dashboardId = useSelector( state => state.dashboardInfo.id, ); @@ -160,6 +162,10 @@ const FilterValue: FC = ({ } }, [dispatch, shouldRefresh]); + useEffect(() => { + setHasDepsFilterValue(hasDeps); + }, [hasDeps]); + useEffect(() => { if (!inViewFirstTime && inView) { setInViewFirstTime(true); @@ -185,28 +191,31 @@ const FilterValue: FC = ({ // Prevent unnecessary backend requests by validating parent filter selections first let selectedParentFilterValueCounts = 0; - + let isTimeRangeSelected = false; (filter.cascadeParentIds ?? []).forEach(pId => { const extraFormData = dataMaskSelected?.[pId]?.extraFormData; if (extraFormData?.filters?.length) { selectedParentFilterValueCounts += extraFormData.filters.length; - } else if (extraFormData?.time_range) { - selectedParentFilterValueCounts += 1; + } + if (extraFormData?.time_range) { + isTimeRangeSelected = true; } }); // check if all parent filters with defaults have a value selected - let depsCount = dependencies.filters?.length ?? 0; + const depsCount = dependencies.filters?.length ?? 0; + const hasTimeRangeDeps = Boolean(dependencies?.time_range); - if (dependencies?.time_range) { - depsCount += 1; - } - if (selectedParentFilterValueCounts !== depsCount) { + if ( + selectedParentFilterValueCounts !== depsCount || + (hasTimeRangeDeps && !isTimeRangeSelected) + ) { // child filter should not request backend until it // has all the required information from parent filters return; } + setHasDepsFilterValue(false); } // TODO: We should try to improve our useEffect hooks to depend more on @@ -281,6 +290,7 @@ const FilterValue: FC = ({ isRefreshing, shouldRefresh, dataMaskSelected, + setHasDepsFilterValue, ]); useEffect(() => { @@ -397,7 +407,12 @@ const FilterValue: FC = ({ overflow={overflow} > {isLoading ? ( - + + + {hasDepsFilterValue + ? t('Awaiting filter selection') + : t('Loading filter values')} + ) : (