From ff2d5888d9c40f31c5ea3f2b4d7f793b2ffea232 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Fri, 11 Jun 2021 20:10:16 +0200
Subject: [PATCH] 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
---
 .../CascadeFilters/CascadePopover/index.tsx         |  4 ++++
 .../FilterBar/FilterControls/FilterControl.tsx      |  2 ++
 .../FilterBar/FilterControls/FilterControls.tsx     |  5 +++--
 .../FilterBar/FilterControls/FilterValue.tsx        | 13 +++++++++++++
 .../nativeFilters/FilterBar/FilterControls/types.ts |  1 +
 .../components/nativeFilters/FilterBar/index.tsx    |  5 ++++-
 6 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
index 2bd5c6fa4de9..6ec878005577 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover/index.tsx
@@ -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 && (
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 14dc65b90655..480bde31a36c 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -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>
   );
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index bd88461a966c..81cb01fa7717 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -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>
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
index bb071315c628..d7a57f077067 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -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,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
index 93bf76d8c294..f28620bb349a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/types.ts
@@ -29,4 +29,5 @@ export interface FilterProps {
   icon?: React.ReactElement;
   directPathToChild?: string[];
   onFilterSelectionChange: (filter: Filter, dataMask: DataMask) => void;
+  inView?: boolean;
 }
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 79b104bd7cd4..3a5f9188acff 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -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;
         }
       });