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

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 && (

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

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>

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,

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

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