feat: requery with a tighter window period upon zoom-in (#4834)

Author: TCL735

src/variables/selectors/index.tsx

@@ -5,7 +5,10 @@ import {get} from 'lodash'
 import {getActiveQuery} from 'src/timeMachine/selectors'
 import {getRangeVariable} from 'src/variables/utils/getTimeRangeVars'
 import {getTimeRange, getTimeRangeWithTimezone} from 'src/dashboards/selectors'
-import {getWindowPeriodVariableFromVariables} from 'src/variables/utils/getWindowVars'
+import {
+  getWindowPeriodVariableForZoomRequery,
+  getWindowPeriodVariableFromVariables,
+} from 'src/variables/utils/getWindowVars'
 import {
   TIME_RANGE_START,
   TIME_RANGE_STOP,
@@ -134,6 +137,23 @@ export const getAllVariables = (
   return vars
 }
 
+export const getAllVariablesForZoomRequery = (
+  state: AppState,
+  contextID?: string
+): Variable[] => {
+  const vars = getUserVariableNames(state, contextID || currentContext(state))
+    .concat([TIME_RANGE_START, TIME_RANGE_STOP, WINDOW_PERIOD])
+    .map(variableID => {
+      if (variableID === WINDOW_PERIOD) {
+        return getWindowPeriodVariableForZoomRequery()
+      }
+      return getVariable(state, variableID)
+    })
+    .filter(v => !!v)
+
+  return vars
+}
+
 export const sortVariablesByName = (variables: Variable[]): Variable[] =>
   variables.sort((a, b) =>
     a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1

src/variables/utils/getWindowVars.ts

@@ -7,6 +7,7 @@ import {
   buildUsedVarsOption,
   buildVarsOption,
 } from 'src/variables/utils/buildVarsOption'
+
 // Constants
 import {WINDOW_PERIOD} from 'src/variables/constants'
 
@@ -17,6 +18,7 @@ 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.
@@ -190,3 +192,16 @@ 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: [],
+})

src/visualization/types/Graph/view.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, useMemo, useContext} from 'react'
+import React, {FC, useMemo, useContext, useState, useEffect} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {
   Config,
@@ -29,7 +29,13 @@ import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/visualization/constants'
 
 // Types
-import {AppState, ResourceType, View, XYViewProperties} from 'src/types'
+import {
+  AppState,
+  InternalFromFluxResult,
+  ResourceType,
+  View,
+  XYViewProperties,
+} from 'src/types'
 import {VisualizationProps} from 'src/visualization'
 
 // Utils
@@ -40,6 +46,8 @@ import {useStaticLegend} from 'src/visualization/utils/useStaticLegend'
 import {
   useVisXDomainSettings,
   useVisYDomainSettings,
+  useZoomRequeryXDomainSettings,
+  useZoomRequeryYDomainSettings,
 } from 'src/visualization/utils/useVisDomainSettings'
 import {
   geomToInterpolation,
@@ -70,6 +78,15 @@ const XYPlot: FC<Props> = ({
   annotations,
   cellID,
 }) => {
+  const [resultState, setResultState] = useState(result)
+  const [preZoomResult, setPreZoomResult] = useState<InternalFromFluxResult>(
+    null
+  )
+
+  useEffect(() => {
+    setResultState(result)
+  }, [result])
+
   const {theme, timeZone} = useContext(AppSettingContext)
   const axisTicksOptions = useAxisTicksGenerator(properties)
   const tooltipOpacity = useLegendOpacity(properties.legendOpacity)
@@ -98,11 +115,12 @@ const XYPlot: FC<Props> = ({
   const storedYDomain = useMemo(() => parseYBounds(properties.axes.y.bounds), [
     properties.axes.y.bounds,
   ])
-  const columnKeys = Object.keys(result.table.columns)
-  const xColumn = properties.xColumn || defaultXColumn(result.table, '_time')
+  const columnKeys = Object.keys(resultState.table.columns)
+  const xColumn =
+    properties.xColumn || defaultXColumn(resultState.table, '_time')
   const yColumn =
     (columnKeys.includes(properties.yColumn) && properties.yColumn) ||
-    defaultYColumn(result.table)
+    defaultYColumn(resultState.table)
 
   const isValidView =
     xColumn &&
@@ -119,44 +137,80 @@ const XYPlot: FC<Props> = ({
 
   const interpolation = geomToInterpolation(properties.geom)
 
-  const groupKey = useMemo(() => [...result.fluxGroupKeyUnion, 'result'], [
-    result,
+  const groupKey = useMemo(() => [...resultState.fluxGroupKeyUnion, 'result'], [
+    resultState,
   ])
 
-  const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
-    storedXDomain,
-    result.table.getColumn(xColumn, 'number'),
-    timeRange
-  )
-
   const memoizedYColumnData = useMemo(() => {
     if (properties.position === 'stacked') {
       const {lineData} = lineTransform(
-        result.table,
+        resultState.table,
         xColumn,
         yColumn,
         groupKey,
         colorHexes,
         properties.position
       )
-      const [fillColumn] = createGroupIDColumn(result.table, groupKey)
+      const [fillColumn] = createGroupIDColumn(resultState.table, groupKey)
       return getDomainDataFromLines(lineData, [...fillColumn], DomainLabel.Y)
     }
 
-    return result.table.getColumn(yColumn, 'number')
+    return resultState.table.getColumn(yColumn, 'number')
   }, [
-    result.table,
+    resultState.table,
     xColumn,
     yColumn,
     groupKey,
     colorHexes,
     properties.position,
   ])
 
-  const [yDomain, onSetYDomain, onResetYDomain] = useVisYDomainSettings(
-    storedYDomain,
-    memoizedYColumnData
-  )
+  let useXDomainSettings = ({storedDomain, parsedResult, timeRange}) =>
+    useVisXDomainSettings(
+      storedDomain,
+      parsedResult.table.getColumn(xColumn, 'number'),
+      timeRange
+    )
+  let useYDomainSettings = options => {
+    const {storedDomain} = options
+    return useVisYDomainSettings(storedDomain, memoizedYColumnData)
+  }
+
+  if (isFlagEnabled('zoomRequery')) {
+    useXDomainSettings = ({storedDomain, parsedResult, timeRange}) =>
+      useZoomRequeryXDomainSettings({
+        parsedResult,
+        setResult: setResultState,
+        preZoomResult,
+        setPreZoomResult,
+        query: properties?.queries?.[0]?.text ?? '',
+        storedDomain,
+        data: parsedResult.table.getColumn(xColumn, 'number'),
+        timeRange,
+      })
+    useYDomainSettings = ({storedDomain, parsedResult}) =>
+      useZoomRequeryYDomainSettings({
+        parsedResult,
+        setResult: setResultState,
+        preZoomResult,
+        setPreZoomResult,
+        query: properties?.queries?.[0]?.text ?? '',
+        storedDomain,
+        data: memoizedYColumnData,
+      })
+  }
+
+  const [xDomain, onSetXDomain, onResetXDomain] = useXDomainSettings({
+    storedDomain: storedXDomain,
+    parsedResult: resultState,
+    timeRange,
+  })
+
+  const [yDomain, onSetYDomain, onResetYDomain] = useYDomainSettings({
+    storedDomain: storedYDomain,
+    parsedResult: resultState,
+    timeRange,
+  })
 
   const legendColumns = filterNoisyColumns(
     properties.position === 'stacked'
@@ -168,18 +222,18 @@ const XYPlot: FC<Props> = ({
           `_${LINE_COUNT}`,
         ]
       : [...groupKey, xColumn, yColumn],
-    result.table
+    resultState.table
   )
 
-  const xFormatter = getFormatter(result.table.getColumnType(xColumn), {
+  const xFormatter = getFormatter(resultState.table.getColumnType(xColumn), {
     prefix: properties.axes.x.prefix,
     suffix: properties.axes.x.suffix,
     base: properties.axes.x.base,
     timeZone,
     timeFormat: properties.timeFormat,
   })
 
-  const yFormatter = getFormatter(result.table.getColumnType(yColumn), {
+  const yFormatter = getFormatter(resultState.table.getColumnType(yColumn), {
     prefix: properties.axes.y.prefix,
     suffix: properties.axes.y.suffix,
     base: properties.axes.y.base,
@@ -197,7 +251,7 @@ const XYPlot: FC<Props> = ({
 
   if (isFlagEnabled('graphColorMapping')) {
     const memoizedGetColorMappingObjects = memoizeOne(getColorMappingObjects)
-    const [, fillColumnMap] = createGroupIDColumn(result.table, groupKey)
+    const [, fillColumnMap] = createGroupIDColumn(resultState.table, groupKey)
     const {
       colorMappingForGiraffe,
       colorMappingForIDPE,
@@ -218,7 +272,7 @@ const XYPlot: FC<Props> = ({
 
   const config: Config = {
     ...currentTheme,
-    table: result.table,
+    table: resultState.table,
     xAxisLabel: properties.axes.x.label,
     yAxisLabel: properties.axes.y.label,
     xDomain,