pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 08:39:45 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(native-filters): improve time range filter performance (#15295)

Browse Source 
* 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:
Ville Brofeldt 2021-06-22 14:38:16 +03:00 committed by GitHub
parent 048609d120
commit cef3dc0b02
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
View File

@ -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);

1
superset-frontend/src/dashboard/components/nativeFilters/utils.ts
View File

@ -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,
}; };

25
superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
View File

@ -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],

8
superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
View File

@ -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;
} }