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 20b18d453ac4..da66478f62e5 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx @@ -65,7 +65,9 @@ const FilterValue: React.FC = ({ const cascadingFilters = useCascadingFilters(id, dataMaskSelected); const [state, setState] = useState([]); const [error, setError] = useState(''); - const [formData, setFormData] = useState>({}); + const [formData, setFormData] = useState>({ + inView: false, + }); const [ownState, setOwnState] = useState({}); const [inViewFirstTime, setInViewFirstTime] = useState(inView); const inputRef = useRef(null); diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts index 729e3765083e..5dc81fd160a3 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts +++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts @@ -83,6 +83,7 @@ export const getFormData = ({ time_range, time_range_endpoints: ['inclusive', 'exclusive'], url_params: extractUrlParams('regular'), + inView: true, viz_type: filterType, inputRef, }; diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index 2674eca5f1d1..5f078c744970 100644 --- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx +++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx @@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) { const [show, setShow] = useState(false); const guessedFrame = useMemo(() => guessFrame(value), [value]); const [frame, setFrame] = useState(guessedFrame); + const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value); const [timeRangeValue, setTimeRangeValue] = useState(value); const [validTimeRange, setValidTimeRange] = useState(false); const [evalResponse, setEvalResponse] = useState(value); @@ -223,20 +224,26 @@ export default function DateFilterLabel(props: DateFilterControlProps) { } setValidTimeRange(true); } + setLastFetchedTimeRange(value); }); }, [value]); useDebouncedEffect( () => { - fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => { - if (error) { - setEvalResponse(error || ''); - setValidTimeRange(false); - } else { - setEvalResponse(value || ''); - setValidTimeRange(true); - } - }); + if (lastFetchedTimeRange !== timeRangeValue) { + fetchTimeRange(timeRangeValue, endpoints).then( + ({ value: actualRange, error }) => { + if (error) { + setEvalResponse(error || ''); + setValidTimeRange(false); + } else { + setEvalResponse(actualRange || ''); + setValidTimeRange(true); + } + setLastFetchedTimeRange(timeRangeValue); + }, + ); + } }, SLOW_DEBOUNCE, [timeRangeValue], diff --git a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx index 6f338a5258a8..a138779d6b9a 100644 --- a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx +++ b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx @@ -19,9 +19,9 @@ import { styled } from '@superset-ui/core'; import React, { useEffect } from 'react'; import DateFilterControl from 'src/explore/components/controls/DateFilterControl'; +import { NO_TIME_RANGE } from 'src/explore/constants'; import { PluginFilterTimeProps } from './types'; import { Styles } from '../common'; -import { NO_TIME_RANGE } from '../../../explore/constants'; const TimeFilterStyles = styled(Styles)` overflow-x: auto; @@ -79,7 +79,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) { handleTimeRangeChange(filterState.value); }, [filterState.value]); - return ( + return props.formData?.inView ? ( // @ts-ignore - ); + ) : null; }