feat: add adaptive zoom to Band (#5929)

* feat: add adaptive zoom to Band

* fix: move Time Format into Options in Band's view options

Author: TCL735

src/visualization/types/Band/options.tsx

@@ -1,5 +1,5 @@
+// Libraries
 import React, {FC, useEffect} from 'react'
-
 import {
   ButtonShape,
   Columns,
@@ -14,8 +14,7 @@ import {
   SelectGroup,
 } from '@influxdata/clockface'
 
-import AutoDomainInput from 'src/shared/components/AutoDomainInput'
-import {AXES_SCALE_OPTIONS} from 'src/visualization/constants'
+// Utils
 import {
   FORMAT_OPTIONS,
   resolveTimeFormat,
@@ -25,14 +24,23 @@ import {
   defaultYColumn,
   parseYBounds,
 } from 'src/shared/utils/vis'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Components
+import {AdaptiveZoomToggle} from 'src/visualization/components/internal/AdaptiveZoomOption'
+import AutoDomainInput from 'src/shared/components/AutoDomainInput'
 import ColorSchemeDropdown from 'src/visualization/components/internal/ColorSchemeDropdown'
 import HoverLegend from 'src/visualization/components/internal/HoverLegend'
 import StaticLegend from 'src/visualization/components/internal/StaticLegend'
 import AxisTicksGenerator from 'src/visualization/components/internal/AxisTicksGenerator'
 
+// Types
 import {BandViewProperties} from 'src/types'
 import {VisualizationOptionProps} from 'src/visualization'
 
+// Constants
+import {AXES_SCALE_OPTIONS} from 'src/visualization/constants'
+
 const {BASE_2, BASE_10} = AXES_SCALE_OPTIONS
 const REMOVE_COLUMN = '(none)'
 
@@ -206,15 +214,13 @@ const BandViewOptions: FC<Props> = ({properties, results, update}) => {
               }
             />
           </Form.Element>
-          <Form.Element label="Time Format">
-            <SelectDropdown
-              options={FORMAT_OPTIONS.map(option => option.text)}
-              selectedOption={resolveTimeFormat(properties.timeFormat)}
-              onSelect={(format: string) => {
-                update({timeFormat: format})
-              }}
+          {isFlagEnabled('zoomRequery') && (
+            <AdaptiveZoomToggle
+              adaptiveZoomHide={properties.adaptiveZoomHide}
+              type={properties.type}
+              update={update}
             />
-          </Form.Element>
+          )}
         </Grid.Column>
         <Grid.Column
           widthXS={Columns.Twelve}
@@ -328,6 +334,15 @@ const BandViewOptions: FC<Props> = ({properties, results, update}) => {
           widthLG={Columns.Four}
         >
           <h5 className="view-options--header">Options</h5>
+          <Form.Element label="Time Format">
+            <SelectDropdown
+              options={FORMAT_OPTIONS.map(option => option.text)}
+              selectedOption={resolveTimeFormat(properties.timeFormat)}
+              onSelect={(format: string) => {
+                update({timeFormat: format})
+              }}
+            />
+          </Form.Element>
           {properties.geom && (
             <Form.Element label="Interpolation">
               <Dropdown

src/visualization/types/Band/view.tsx

@@ -1,28 +1,29 @@
 // Libraries
-import React, {FC, useMemo, useContext} from 'react'
-
+import React, {FC, useContext, useEffect, useMemo, useState} from 'react'
 import {Config, Plot} from '@influxdata/giraffe'
+import {RemoteDataState} from '@influxdata/clockface'
 
 // Redux
 import {isAnnotationsModeEnabled} from 'src/annotations/selectors'
-
 import {useDispatch, useSelector} from 'react-redux'
 
 // Annotations
 import {addAnnotationLayer} from 'src/visualization/utils/annotationUtils'
 
 // Components
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
+import ViewLoadingSpinner from 'src/visualization/components/internal/ViewLoadingSpinner'
 
 // Utils
 import {useAxisTicksGenerator} from 'src/visualization/utils/useAxisTicksGenerator'
 import {getFormatter} from 'src/visualization/utils/getFormatter'
 import {useMainColumn} from 'src/visualization/utils/useBandColumns'
 import {useLegendOpacity} from 'src/visualization/utils/useLegendOpacity'
 import {useStaticLegend} from 'src/visualization/utils/useStaticLegend'
+import {useZoomQuery} from 'src/visualization/utils/useZoomQuery'
 import {
-  useVisXDomainSettings,
-  useVisYDomainSettings,
+  useZoomRequeryXDomainSettings,
+  useZoomRequeryYDomainSettings,
 } from 'src/visualization/utils/useVisDomainSettings'
 import {
   geomToInterpolation,
@@ -32,6 +33,11 @@ import {
   defaultXColumn,
   defaultYColumn,
 } from 'src/shared/utils/vis'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Types
+import {BandViewProperties, InternalFromFluxResult} from 'src/types'
+import {VisualizationProps} from 'src/visualization'
 
 // Constants
 import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
@@ -44,10 +50,6 @@ import {
 } from 'src/visualization/constants'
 import {AppSettingContext} from 'src/shared/contexts/app'
 
-// Types
-import {BandViewProperties} from 'src/types'
-import {VisualizationProps} from 'src/visualization'
-
 interface Props extends VisualizationProps {
   properties: BandViewProperties
 }
@@ -58,7 +60,19 @@ const BandPlot: FC<Props> = ({
   annotations,
   cellID,
   timeRange,
+  transmitWindowPeriod,
 }) => {
+  const [resultState, setResultState] = useState(result)
+  const [preZoomResult, setPreZoomResult] =
+    useState<InternalFromFluxResult>(null)
+  const [requeryStatus, setRequeryStatus] = useState<RemoteDataState>(
+    RemoteDataState.NotStarted
+  )
+
+  useEffect(() => {
+    setResultState(result)
+  }, [result])
+
   const mainColumnName = useMainColumn(
     properties.mainColumn,
     result.resultColumnNames
@@ -106,20 +120,42 @@ const BandPlot: FC<Props> = ({
 
   const groupKey = [...result.fluxGroupKeyUnion, 'result']
 
-  const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
-    storedXDomain,
-    result.table.getColumn(xColumn, 'number'),
-    timeRange
-  )
-
   const memoizedYColumnData = useMemo(
     () => result.table.getColumn(yColumn, 'number'),
     [result.table, yColumn]
   )
 
-  const [yDomain, onSetYDomain, onResetYDomain] = useVisYDomainSettings(
-    storedYDomain,
-    memoizedYColumnData
+  const zoomQuery = useZoomQuery(properties)
+
+  const [xDomain, onSetXDomain, onResetXDomain] = useZoomRequeryXDomainSettings(
+    {
+      adaptiveZoomHide: properties.adaptiveZoomHide,
+      data: resultState.table.getColumn(xColumn, 'number'),
+      parsedResult: resultState,
+      preZoomResult,
+      query: zoomQuery,
+      setPreZoomResult,
+      setRequeryStatus,
+      setResult: setResultState,
+      storedDomain: storedXDomain,
+      timeRange,
+      transmitWindowPeriod,
+    }
+  )
+
+  const [yDomain, onSetYDomain, onResetYDomain] = useZoomRequeryYDomainSettings(
+    {
+      adaptiveZoomHide: properties.adaptiveZoomHide,
+      data: memoizedYColumnData,
+      parsedResult: resultState,
+      preZoomResult,
+      query: zoomQuery,
+      setPreZoomResult,
+      setRequeryStatus,
+      setResult: setResultState,
+      storedDomain: storedYDomain,
+      transmitWindowPeriod,
+    }
   )
 
   const legendColumns = filterNoisyColumns(
@@ -208,7 +244,14 @@ const BandPlot: FC<Props> = ({
     'band'
   )
 
-  return <Plot config={config} />
+  return (
+    <>
+      {isFlagEnabled('zoomRequery') && (
+        <ViewLoadingSpinner loading={requeryStatus} />
+      )}
+      <Plot config={config} />
+    </>
+  )
 }
 
 export default BandPlot