iop
/
superset
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(native-filters): Defer loading filters data until filter is visible (#15120) 

* feat(native-filters): Defer running query until native filter is in view

* Fix default values not displaying
This commit is contained in:
Kamil Gabryjelski 2021-06-11 20:10:16 +02:00 committed by GitHub
parent 535ca736d7
commit ff2d5888d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 27 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
View File

@ -32,6 +32,7 @@ interface CascadePopoverProps {
filter: CascadeFilter;
visible: boolean;
directPathToChild?: string[];
inView?: boolean;
onVisibleChange: (visible: boolean) => void;
onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
}
@ -80,6 +81,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
onVisibleChange,
onFilterSelectionChange,
directPathToChild,
inView,
}) => {
const [currentPathToChild, setCurrentPathToChild] = useState<string[]>();
const dataMask = dataMaskSelected[filter.id];
@ -148,6 +150,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
filter={filter}
directPathToChild={directPathToChild}
onFilterSelectionChange={onFilterSelectionChange}
inView={inView}
/>
);
}
@ -192,6 +195,7 @@ const CascadePopover: React.FC<CascadePopoverProps> = ({
filter={activeFilter}
onFilterSelectionChange={onFilterSelectionChange}
directPathToChild={currentPathToChild}
inView={inView}
icon={
<>
{filter.cascadeChildren.length !== 0 && (

2
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
View File

@ -47,6 +47,7 @@ const FilterControl: React.FC<FilterProps> = ({
icon,
onFilterSelectionChange,
directPathToChild,
inView,
}) => {
const { name = '<undefined>' } = filter;
return (
@ -62,6 +63,7 @@ const FilterControl: React.FC<FilterProps> = ({
filter={filter}
directPathToChild={directPathToChild}
onFilterSelectionChange={onFilterSelectionChange}
inView={inView}
/>
</StyledFilterControlContainer>
);

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

@ -89,12 +89,13 @@ const FilterControls: FC<FilterControlsProps> = ({
filter={cascadeFilters[index]}
onFilterSelectionChange={onFilterSelectionChange}
directPathToChild={directPathToChild}
inView={false}
/>
</portals.InPortal>
))}
{filtersInScope.map(filter => {
const index = filterValues.findIndex(f => f.id === filter.id);
return <portals.OutPortal node={portalNodes[index]} />;
return <portals.OutPortal node={portalNodes[index]} inView />;
})}
{showCollapsePanel && (
<Collapse
@ -132,7 +133,7 @@ const FilterControls: FC<FilterControlsProps> = ({
>
{filtersOutOfScope.map(filter => {
const index = cascadeFilters.findIndex(f => f.id === filter.id);
return <portals.OutPortal node={portalNodes[index]} />;
return <portals.OutPortal node={portalNodes[index]} inView />;
})}
</Collapse.Panel>
</Collapse>

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

@ -57,6 +57,7 @@ const FilterValue: React.FC<FilterProps> = ({
filter,
directPathToChild,
onFilterSelectionChange,
inView = true,
}) => {
const { id, targets, filterType, adhoc_filters, time_range } = filter;
const metadata = getChartMetadataRegistry().get(filterType);
@ -65,6 +66,7 @@ const FilterValue: React.FC<FilterProps> = ({
const [error, setError] = useState<string>('');
const [formData, setFormData] = useState<Partial<QueryFormData>>({});
const [ownState, setOwnState] = useState<JsonObject>({});
const [inViewFirstTime, setInViewFirstTime] = useState(inView);
const inputRef = useRef<HTMLInputElement>(null);
const [target] = targets;
const {
@ -76,7 +78,17 @@ const FilterValue: React.FC<FilterProps> = ({
const [isLoading, setIsLoading] = useState<boolean>(hasDataSource);
const [isRefreshing, setIsRefreshing] = useState<boolean>(true);
const dispatch = useDispatch();
useEffect(() => {
if (!inViewFirstTime && inView) {
setInViewFirstTime(true);
}
}, [inView, inViewFirstTime, setInViewFirstTime]);
useEffect(() => {
if (!inViewFirstTime) {
return;
}
const newFormData = getFormData({
...filter,
datasetId,
@ -134,6 +146,7 @@ const FilterValue: React.FC<FilterProps> = ({
});
}
}, [
inViewFirstTime,
cascadingFilters,
datasetId,
groupby,

1
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
View File

@ -29,4 +29,5 @@ export interface FilterProps {
icon?: React.ReactElement;
directPathToChild?: string[];
onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
inView?: boolean;
}

5
superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
View File

@ -178,7 +178,10 @@ const FilterBar: React.FC<FiltersBarProps> = ({
useEffect(() => {
setDataMaskSelected(draft => {
Object.values(filters).forEach(filter => {
if (filter.filterType !== previousFilters?.[filter.id]?.filterType) {
if (
filter.filterType !== previousFilters?.[filter.id]?.filterType &&
previousFilters?.[filter.id]?.filterType !== undefined
) {
draft[filter.id] = getInitialDataMask(filter.id) as DataMaskWithId;
}
});