feat: use dynamic window period for zoom re-query (#4876)

Author: TCL735

src/variables/selectors/index.tsx

@@ -6,7 +6,7 @@ import {getActiveQuery} from 'src/timeMachine/selectors'
 import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
 import {getTimeRange, getTimeRangeWithTimezone} from 'src/dashboards/selectors'
 import {
-  getWindowPeriodVariableForZoomRequery,
+  getVariableForZoomRequery,
   getWindowPeriodVariableFromVariables,
 } from 'src/variables/utils/getWindowVars'
 import {
@@ -139,13 +139,14 @@ export const getAllVariables = (
 
 export const getAllVariablesForZoomRequery = (
   state: AppState,
+  domain: number[],
   contextID?: string
 ): Variable[] => {
   const vars = getUserVariableNames(state, contextID || currentContext(state))
-    .concat([TIME_RANGE_START, TIME_RANGE_STOP, WINDOW_PERIOD])
+    .concat([TIME_RANGE_START, TIME_RANGE_STOP])
     .map(variableID => {
-      if (variableID === WINDOW_PERIOD) {
-        return getWindowPeriodVariableForZoomRequery()
+      if (domain?.length) {
+        return getVariableForZoomRequery(variableID, domain)
       }
       return getVariable(state, variableID)
     })

src/variables/utils/getWindowVars.ts

@@ -9,7 +9,11 @@ import {
 } from 'src/variables/utils/buildVarsOption'
 
 // Constants
-import {WINDOW_PERIOD} from 'src/variables/constants'
+import {
+  TIME_RANGE_START,
+  TIME_RANGE_STOP,
+  WINDOW_PERIOD,
+} from 'src/variables/constants'
 
 // Types
 import {VariableAssignment, Package} from 'src/types/ast'
@@ -18,7 +22,6 @@ import {SELECTABLE_TIME_RANGES} from 'src/shared/constants/timeRanges'
 
 const DESIRED_POINTS_PER_GRAPH = 360
 const FALLBACK_WINDOW_PERIOD = 15000
-const FINEST_WINDOW_PERIOD_PRECISION = 1000
 
 /*
   Compute the `v.windowPeriod` variable assignment for a query.
@@ -193,15 +196,34 @@ export const getWindowPeriodVariableFromVariables = (
   return [windowPeriodVariable]
 }
 
-export const getWindowPeriodVariableForZoomRequery = (): Variable => ({
-  orgID: '',
-  id: WINDOW_PERIOD,
-  name: WINDOW_PERIOD,
-  arguments: {
-    type: 'system',
-    values: [FINEST_WINDOW_PERIOD_PRECISION],
-  },
-  status: RemoteDataState.Done,
-  labels: [],
-  selected: [],
-})
+export const getVariableForZoomRequery = (
+  variableID: string,
+  domain: number[]
+): Variable => {
+  const variable: Variable = {
+    orgID: '',
+    id: variableID,
+    name: variableID,
+    arguments: {
+      type: 'system',
+    },
+    status: RemoteDataState.Done,
+    labels: [],
+    selected: [],
+  }
+
+  const startTime = new Date(domain?.[0] ?? '')
+  const stopTime = new Date(domain?.[1] ?? '')
+  switch (variableID) {
+    case TIME_RANGE_START:
+      variable.arguments.values = [startTime.toISOString()]
+      return variable
+
+    case TIME_RANGE_STOP:
+      variable.arguments.values = [stopTime.toISOString()]
+      return variable
+
+    default:
+      return variable
+  }
+}

src/visualization/utils/useVisDomainSettings.ts

@@ -1,7 +1,8 @@
 // Libraries
-import {useMemo, useState} from 'react'
+import {useEffect, useMemo, useState} from 'react'
 import {useSelector} from 'react-redux'
 import {NumericColumnData, fromFlux} from '@influxdata/giraffe'
+import {isEqual} from 'lodash'
 
 // API
 import {runQuery, RunQueryResult} from 'src/shared/apis/query'
@@ -11,11 +12,19 @@ import {useOneWayState} from 'src/shared/utils/useOneWayState'
 import {extent} from 'src/shared/utils/vis'
 import {getStartTime, getEndTime} from 'src/timeMachine/selectors/index'
 import {getOrg} from 'src/organizations/selectors'
-import {getAllVariablesForZoomRequery} from 'src/variables/selectors'
+import {
+  // getAllVariables,
+  getAllVariablesForZoomRequery,
+} from 'src/variables/selectors'
 import {buildUsedVarsOption} from 'src/variables/utils/buildVarsOption'
 
+import {
+  getWindowPeriodFromVariables,
+  getWindowVarsFromVariables,
+} from 'src/variables/utils/getWindowVars'
+
 // Types
-import {InternalFromFluxResult, TimeRange} from 'src/types'
+import {AppState, InternalFromFluxResult, TimeRange} from 'src/types'
 /*
   This hook helps map the domain setting stored for line graph to the
   appropriate settings on a @influxdata/giraffe `Config` object.
@@ -121,6 +130,9 @@ interface ZoomRequeryArgs {
   timeRange?: TimeRange
 }
 
+const isNotEqual = (firstValue: any, secondValue: any): boolean =>
+  isEqual(firstValue, secondValue) === false
+
 export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   const {
     parsedResult,
@@ -133,10 +145,6 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     timeRange = null,
   } = args
 
-  const orgId = useSelector(getOrg)?.id
-  const variables = useSelector(getAllVariablesForZoomRequery)
-  const extern = buildUsedVarsOption(query, variables)
-
   const initialDomain = useMemo(() => {
     if (storedDomain) {
       return storedDomain
@@ -148,20 +156,57 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   const [domain, setDomain] = useState(initialDomain)
   const [preZoomDomain, setPreZoomDomain] = useState<Array<number>>(null)
 
+  const getAllVariablesWithTimeDomain = (state: AppState) =>
+    getAllVariablesForZoomRequery(state, timeRange ? domain : [])
+  const orgId = useSelector(getOrg)?.id
+  const variables = useSelector(getAllVariablesWithTimeDomain)
+
+  const [windowPeriod, setWindowPeriod] = useState<number>(
+    getWindowPeriodFromVariables(query, variables)
+  )
+
+  /*
+   * When the user zooms in, re-run the query
+   * When the user un-zooms, do not re-run but revert back to old data
+   * Hence re-run the query only when both conditions are met:
+   * - the window period changes from the domain changing (zooming in)
+   * - the domain does not equal the original pre-zoom domain (unzooming)
+   */
+  useEffect(() => {
+    const updatedWindowPeriod = getWindowPeriodFromVariables(query, variables)
+    if (isNotEqual(windowPeriod, updatedWindowPeriod)) {
+      setWindowPeriod(getWindowPeriodFromVariables(query, variables))
+
+      if (isNotEqual(preZoomDomain, domain)) {
+        const zoomQueryWindowVariable = getWindowVarsFromVariables(
+          query,
+          variables
+        )
+        const extern = buildUsedVarsOption(
+          query,
+          variables,
+          zoomQueryWindowVariable
+        )
+        runQuery(orgId, query, extern).promise.then(
+          (result: RunQueryResult) => {
+            if (result.type === 'SUCCESS') {
+              const parsed = fromFlux(result.csv)
+              setResult(parsed)
+            }
+          }
+        )
+      }
+    }
+  }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const setZoomDomain = (updatedDomain: number[]) => {
     if (!preZoomResult) {
       setPreZoomDomain(initialDomain)
       setPreZoomResult(parsedResult)
     }
-
-    runQuery(orgId, query, extern).promise.then((result: RunQueryResult) => {
-      if (result.type === 'SUCCESS') {
-        const parsed = fromFlux(result.csv)
-        setResult(parsed)
-        setDomain(updatedDomain)
-      }
-    })
+    setDomain(updatedDomain)
   }
+
   const resetDomain = () => {
     if (preZoomResult) {
       setResult(preZoomResult)
@@ -184,9 +229,6 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     data,
     timeRange = null,
   } = args
-  const orgId = useSelector(getOrg)?.id
-  const variables = useSelector(getAllVariablesForZoomRequery)
-  const extern = buildUsedVarsOption(query, variables)
 
   const initialDomain = useMemo(() => {
     if (
@@ -204,20 +246,57 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   const [domain, setDomain] = useState(initialDomain)
   const [preZoomDomain, setPreZoomDomain] = useState<Array<number>>(null)
 
+  const getAllVariablesWithTimeDomain = (state: AppState) =>
+    getAllVariablesForZoomRequery(state, timeRange ? domain : [])
+  const orgId = useSelector(getOrg)?.id
+  const variables = useSelector(getAllVariablesWithTimeDomain)
+
+  const [windowPeriod, setWindowPeriod] = useState<number>(
+    getWindowPeriodFromVariables(query, variables)
+  )
+
+  /*
+   * When the user zooms in, re-run the query
+   * When the user un-zooms, do not re-run but revert back to old data
+   * Hence re-run the query only when both conditions are met:
+   * - the window period changes from the domain changing (zooming in)
+   * - the domain does not equal the original pre-zoom domain (unzooming)
+   */
+  useEffect(() => {
+    const updatedWindowPeriod = getWindowPeriodFromVariables(query, variables)
+    if (isNotEqual(windowPeriod, updatedWindowPeriod)) {
+      setWindowPeriod(getWindowPeriodFromVariables(query, variables))
+
+      if (isNotEqual(preZoomDomain, domain)) {
+        const zoomQueryWindowVariable = getWindowVarsFromVariables(
+          query,
+          variables
+        )
+        const extern = buildUsedVarsOption(
+          query,
+          variables,
+          zoomQueryWindowVariable
+        )
+        runQuery(orgId, query, extern).promise.then(
+          (result: RunQueryResult) => {
+            if (result.type === 'SUCCESS') {
+              const parsed = fromFlux(result.csv)
+              setResult(parsed)
+            }
+          }
+        )
+      }
+    }
+  }, [domain]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const setZoomDomain = (updatedDomain: number[]) => {
     if (!preZoomResult) {
       setPreZoomDomain(initialDomain)
       setPreZoomResult(parsedResult)
     }
-
-    runQuery(orgId, query, extern).promise.then((result: RunQueryResult) => {
-      if (result.type === 'SUCCESS') {
-        const parsed = fromFlux(result.csv)
-        setResult(parsed)
-        setDomain(updatedDomain)
-      }
-    })
+    setDomain(updatedDomain)
   }
+
   const resetDomain = () => {
     if (preZoomResult) {
       setResult(preZoomResult)