mirror of https://github.com/apache/superset.git
fix(native-filters): improve time range filter performance (#15295)
* fix time range default value * defer time filter rendering to inView event * avoid double fetching of time ranges * lint * move set to resolved promise
This commit is contained in:
parent
048609d120
commit
cef3dc0b02
|
@ -65,7 +65,9 @@ const FilterValue: React.FC<FilterProps> = ({
|
|||
const cascadingFilters = useCascadingFilters(id, dataMaskSelected);
|
||||
const [state, setState] = useState<ChartDataResponseResult[]>([]);
|
||||
const [error, setError] = useState<string>('');
|
||||
const [formData, setFormData] = useState<Partial<QueryFormData>>({});
|
||||
const [formData, setFormData] = useState<Partial<QueryFormData>>({
|
||||
inView: false,
|
||||
});
|
||||
const [ownState, setOwnState] = useState<JsonObject>({});
|
||||
const [inViewFirstTime, setInViewFirstTime] = useState(inView);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
|
|
@ -83,6 +83,7 @@ export const getFormData = ({
|
|||
time_range,
|
||||
time_range_endpoints: ['inclusive', 'exclusive'],
|
||||
url_params: extractUrlParams('regular'),
|
||||
inView: true,
|
||||
viz_type: filterType,
|
||||
inputRef,
|
||||
};
|
||||
|
|
|
@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||
const [show, setShow] = useState<boolean>(false);
|
||||
const guessedFrame = useMemo(() => guessFrame(value), [value]);
|
||||
const [frame, setFrame] = useState<FrameType>(guessedFrame);
|
||||
const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value);
|
||||
const [timeRangeValue, setTimeRangeValue] = useState(value);
|
||||
const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
|
||||
const [evalResponse, setEvalResponse] = useState<string>(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],
|
||||
|
|
|
@ -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
|
||||
<TimeFilterStyles width={width} height={height}>
|
||||
<ControlContainer
|
||||
|
@ -92,11 +92,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
|
|||
onMouseLeave={unsetFocusedFilter}
|
||||
>
|
||||
<DateFilterControl
|
||||
value={filterState.value}
|
||||
value={filterState.value || NO_TIME_RANGE}
|
||||
name="time_range"
|
||||
onChange={handleTimeRangeChange}
|
||||
/>
|
||||
</ControlContainer>
|
||||
</TimeFilterStyles>
|
||||
);
|
||||
) : null;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue