From cef3dc0b02bf0e1610465c6db7f71a3dc0c9a7e6 Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Tue, 22 Jun 2021 14:38:16 +0300
Subject: [PATCH] fix(native-filters): improve time range filter performance
 (#15295)

* fix time range default value

* defer time filter rendering to inView event

* avoid double fetching of time ranges

* lint

* move set to resolved promise
---
 .../FilterBar/FilterControls/FilterValue.tsx  |  4 ++-
 .../components/nativeFilters/utils.ts         |  1 +
 .../DateFilterControl/DateFilterLabel.tsx     | 25 ++++++++++++-------
 .../components/Time/TimeFilterPlugin.tsx      |  8 +++---
 4 files changed, 24 insertions(+), 14 deletions(-)

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 20b18d453a..da66478f62 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -65,7 +65,9 @@ const FilterValue: React.FC<FilterProps> = ({
   const cascadingFilters = useCascadingFilters(id, dataMaskSelected);
   const [state, setState] = useState<ChartDataResponseResult[]>([]);
   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 [inViewFirstTime, setInViewFirstTime] = useState(inView);
   const inputRef = useRef<HTMLInputElement>(null);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index 729e376508..5dc81fd160 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -83,6 +83,7 @@ export const getFormData = ({
     time_range,
     time_range_endpoints: ['inclusive', 'exclusive'],
     url_params: extractUrlParams('regular'),
+    inView: true,
     viz_type: filterType,
     inputRef,
   };
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index 2674eca5f1..5f078c7449 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -187,6 +187,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
   const [show, setShow] = useState<boolean>(false);
   const guessedFrame = useMemo(() => guessFrame(value), [value]);
   const [frame, setFrame] = useState<FrameType>(guessedFrame);
+  const [lastFetchedTimeRange, setLastFetchedTimeRange] = useState(value);
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
@@ -223,20 +224,26 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
         }
         setValidTimeRange(true);
       }
+      setLastFetchedTimeRange(value);
     });
   }, [value]);
 
   useDebouncedEffect(
     () => {
-      fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
-        if (error) {
-          setEvalResponse(error || '');
-          setValidTimeRange(false);
-        } else {
-          setEvalResponse(value || '');
-          setValidTimeRange(true);
-        }
-      });
+      if (lastFetchedTimeRange !== timeRangeValue) {
+        fetchTimeRange(timeRangeValue, endpoints).then(
+          ({ value: actualRange, error }) => {
+            if (error) {
+              setEvalResponse(error || '');
+              setValidTimeRange(false);
+            } else {
+              setEvalResponse(actualRange || '');
+              setValidTimeRange(true);
+            }
+            setLastFetchedTimeRange(timeRangeValue);
+          },
+        );
+      }
     },
     SLOW_DEBOUNCE,
     [timeRangeValue],
diff --git a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
index 6f338a5258..a138779d6b 100644
--- a/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx
@@ -19,9 +19,9 @@
 import { styled } from '@superset-ui/core';
 import React, { useEffect } from 'react';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';
+import { NO_TIME_RANGE } from 'src/explore/constants';
 import { PluginFilterTimeProps } from './types';
 import { Styles } from '../common';
-import { NO_TIME_RANGE } from '../../../explore/constants';
 
 const TimeFilterStyles = styled(Styles)`
   overflow-x: auto;
@@ -79,7 +79,7 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
     handleTimeRangeChange(filterState.value);
   }, [filterState.value]);
 
-  return (
+  return props.formData?.inView ? (
     // @ts-ignore
     <TimeFilterStyles width={width} height={height}>
       <ControlContainer
@@ -92,11 +92,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
         onMouseLeave={unsetFocusedFilter}
       >
         <DateFilterControl
-          value={filterState.value}
+          value={filterState.value || NO_TIME_RANGE}
           name="time_range"
           onChange={handleTimeRangeChange}
         />
       </ControlContainer>
     </TimeFilterStyles>
-  );
+  ) : null;
 }