mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
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 cascadingFilters = useCascadingFilters(id, dataMaskSelected);
|
||||||
const [state, setState] = useState<ChartDataResponseResult[]>([]);
|
const [state, setState] = useState<ChartDataResponseResult[]>([]);
|
||||||
const [error, setError] = useState<string>('');
|
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 [ownState, setOwnState] = useState<JsonObject>({});
|
||||||
const [inViewFirstTime, setInViewFirstTime] = useState(inView);
|
const [inViewFirstTime, setInViewFirstTime] = useState(inView);
|
||||||
const inputRef = useRef<HTMLInputElement>(null);
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
@ -83,6 +83,7 @@ export const getFormData = ({
|
|||||||
time_range,
|
time_range,
|
||||||
time_range_endpoints: ['inclusive', 'exclusive'],
|
time_range_endpoints: ['inclusive', 'exclusive'],
|
||||||
url_params: extractUrlParams('regular'),
|
url_params: extractUrlParams('regular'),
|
||||||
|
inView: true,
|
||||||
viz_type: filterType,
|
viz_type: filterType,
|
||||||
inputRef,
|
inputRef,
|
||||||
};
|
};
|
||||||
|
@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
const [show, setShow] = useState<boolean>(false);
|
const [show, setShow] = useState<boolean>(false);
|
||||||
const guessedFrame = useMemo(() => guessFrame(value), [value]);
|
const guessedFrame = useMemo(() => guessFrame(value), [value]);
|
||||||
const [frame, setFrame] = useState<FrameType>(guessedFrame);
|
const [frame, setFrame] = useState<FrameType>(guessedFrame);
|
||||||
|
const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value);
|
||||||
const [timeRangeValue, setTimeRangeValue] = useState(value);
|
const [timeRangeValue, setTimeRangeValue] = useState(value);
|
||||||
const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
|
const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
|
||||||
const [evalResponse, setEvalResponse] = useState<string>(value);
|
const [evalResponse, setEvalResponse] = useState<string>(value);
|
||||||
@ -223,20 +224,26 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
|
|||||||
}
|
}
|
||||||
setValidTimeRange(true);
|
setValidTimeRange(true);
|
||||||
}
|
}
|
||||||
|
setLastFetchedTimeRange(value);
|
||||||
});
|
});
|
||||||
}, [value]);
|
}, [value]);
|
||||||
|
|
||||||
useDebouncedEffect(
|
useDebouncedEffect(
|
||||||
() => {
|
() => {
|
||||||
fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
|
if (lastFetchedTimeRange !== timeRangeValue) {
|
||||||
if (error) {
|
fetchTimeRange(timeRangeValue, endpoints).then(
|
||||||
setEvalResponse(error || '');
|
({ value: actualRange, error }) => {
|
||||||
setValidTimeRange(false);
|
if (error) {
|
||||||
} else {
|
setEvalResponse(error || '');
|
||||||
setEvalResponse(value || '');
|
setValidTimeRange(false);
|
||||||
setValidTimeRange(true);
|
} else {
|
||||||
}
|
setEvalResponse(actualRange || '');
|
||||||
});
|
setValidTimeRange(true);
|
||||||
|
}
|
||||||
|
setLastFetchedTimeRange(timeRangeValue);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
SLOW_DEBOUNCE,
|
SLOW_DEBOUNCE,
|
||||||
[timeRangeValue],
|
[timeRangeValue],
|
||||||
|
@ -19,9 +19,9 @@
|
|||||||
import { styled } from '@superset-ui/core';
|
import { styled } from '@superset-ui/core';
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
|
||||||
|
import { NO_TIME_RANGE } from 'src/explore/constants';
|
||||||
import { PluginFilterTimeProps } from './types';
|
import { PluginFilterTimeProps } from './types';
|
||||||
import { Styles } from '../common';
|
import { Styles } from '../common';
|
||||||
import { NO_TIME_RANGE } from '../../../explore/constants';
|
|
||||||
|
|
||||||
const TimeFilterStyles = styled(Styles)`
|
const TimeFilterStyles = styled(Styles)`
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
@ -79,7 +79,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
|
|||||||
handleTimeRangeChange(filterState.value);
|
handleTimeRangeChange(filterState.value);
|
||||||
}, [filterState.value]);
|
}, [filterState.value]);
|
||||||
|
|
||||||
return (
|
return props.formData?.inView ? (
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
<TimeFilterStyles width={width} height={height}>
|
<TimeFilterStyles width={width} height={height}>
|
||||||
<ControlContainer
|
<ControlContainer
|
||||||
@ -92,11 +92,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
|
|||||||
onMouseLeave={unsetFocusedFilter}
|
onMouseLeave={unsetFocusedFilter}
|
||||||
>
|
>
|
||||||
<DateFilterControl
|
<DateFilterControl
|
||||||
value={filterState.value}
|
value={filterState.value || NO_TIME_RANGE}
|
||||||
name="time_range"
|
name="time_range"
|
||||||
onChange={handleTimeRangeChange}
|
onChange={handleTimeRangeChange}
|
||||||
/>
|
/>
|
||||||
</ControlContainer>
|
</ControlContainer>
|
||||||
</TimeFilterStyles>
|
</TimeFilterStyles>
|
||||||
);
|
) : null;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user