mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
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:
parent
535ca736d7
commit
ff2d5888d9
@ -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 && (
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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,
|
||||
|
@ -29,4 +29,5 @@ export interface FilterProps {
|
||||
icon?: React.ReactElement;
|
||||
directPathToChild?: string[];
|
||||
onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
|
||||
inView?: boolean;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user