feat: add adaptive zoom to Scatter (#5930)

Author: TCL735

src/shared/components/cells/Cell.tsx

@@ -130,7 +130,8 @@ class CellComponent extends Component<Props, State> {
     switch (type) {
       case 'xy':
       case 'line-plus-single-stat':
-      case 'band': {
+      case 'band':
+      case 'scatter': {
         if (this.props.windowPeriodFromQueryBuilder === AGG_WINDOW_AUTO) {
           return (
             <span className="cell--window-period">

src/visualization/types/Scatter/options.tsx

@@ -1,5 +1,5 @@
+// Libraries
 import React, {FC} from 'react'
-
 import {
   Input,
   Grid,
@@ -10,21 +10,28 @@ import {
   MultiSelectDropdown,
 } from '@influxdata/clockface'
 
+// Components
+import {AdaptiveZoomToggle} from 'src/visualization/components/internal/AdaptiveZoomOption'
 import AutoDomainInput from 'src/shared/components/AutoDomainInput'
 import HexColorSchemeDropdown from 'src/visualization/components/internal/HexColorSchemeDropdown'
 import HoverLegend from 'src/visualization/components/internal/HoverLegend'
 import AxisTicksGenerator from 'src/visualization/components/internal/AxisTicksGenerator'
-import {TimeDomainAutoToggle} from 'src/visualization/types/Scatter/TimeAutoToggle'
+
+// Utils
 import {
   FORMAT_OPTIONS,
   resolveTimeFormat,
 } from 'src/visualization/utils/timeFormat'
-import {GIRAFFE_COLOR_SCHEMES} from 'src/shared/constants'
-
 import {defaultXColumn, defaultYColumn} from 'src/shared/utils/vis'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Types
 import {ScatterViewProperties} from 'src/types'
+import {TimeDomainAutoToggle} from 'src/visualization/types/Scatter/TimeAutoToggle'
 import {VisualizationOptionProps} from 'src/visualization'
 
+// Constants
+import {GIRAFFE_COLOR_SCHEMES} from 'src/shared/constants'
 interface Props extends VisualizationOptionProps {
   properties: ScatterViewProperties
 }
@@ -167,6 +174,14 @@ const ScatterOptions: FC<Props> = ({properties, results, update}) => {
               }
             />
           </Form.Element>
+          {isFlagEnabled('zoomRequery') && (
+            <AdaptiveZoomToggle
+              adaptiveZoomHide={properties.adaptiveZoomHide}
+              type={properties.type}
+              update={update}
+            />
+          )}
+          <h5 className="view-options--header">Options</h5>
           <Form.Element label="Time Format">
             <SelectDropdown
               options={FORMAT_OPTIONS.map(option => option.text)}
@@ -185,7 +200,6 @@ const ScatterOptions: FC<Props> = ({properties, results, update}) => {
               />
             </Form.Element>
           )}
-          <h5 className="view-options--header">Options</h5>
           <Form.Element label="Color Scheme">
             <HexColorSchemeDropdown
               colorSchemes={GIRAFFE_COLOR_SCHEMES}

src/visualization/types/Scatter/view.tsx

@@ -1,30 +1,34 @@
 // Libraries
-import React, {FunctionComponent, useContext} from 'react'
+import React, {FunctionComponent, useContext, useEffect, useState} from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 import {Config, Plot} from '@influxdata/giraffe'
+import {RemoteDataState} from '@influxdata/clockface'
 
 // 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 {useLegendOpacity} from 'src/visualization/utils/useLegendOpacity'
+import {useZoomQuery} from 'src/visualization/utils/useZoomQuery'
 import {
-  useVisXDomainSettings,
-  useVisYDomainSettings,
+  useZoomRequeryXDomainSettings,
+  useZoomRequeryYDomainSettings,
 } from 'src/visualization/utils/useVisDomainSettings'
 import {defaultXColumn, defaultYColumn} from 'src/shared/utils/vis'
 import {AppSettingContext} from 'src/shared/contexts/app'
 import {handleUnsupportedGraphType} from 'src/visualization/utils/annotationUtils'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Constants
 import {VIS_THEME, VIS_THEME_LIGHT} from 'src/shared/constants'
 import {DEFAULT_LINE_COLORS} from 'src/shared/constants/graphColorPalettes'
 import {INVALID_DATA_COPY} from 'src/visualization/constants'
 
 // Types
-import {ScatterViewProperties} from 'src/types'
+import {ScatterViewProperties, InternalFromFluxResult} from 'src/types'
 import {VisualizationProps} from 'src/visualization'
 
 // Selectors
@@ -38,7 +42,19 @@ const ScatterPlot: FunctionComponent<Props> = ({
   properties,
   result,
   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 {theme, timeZone} = useContext(AppSettingContext)
   const fillColumns = properties.fillColumns || result.fluxGroupKeyUnion || []
   const symbolColumns =
@@ -54,21 +70,37 @@ const ScatterPlot: FunctionComponent<Props> = ({
   const tooltipColorize = properties.legendColorizeRows
   const tooltipOrientationThreshold = properties.legendOrientationThreshold
 
-  let timerange
-
-  if (xColumn === '_time') {
-    timerange = timeRange
-  }
-
-  const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
-    properties.xDomain,
-    result.table.getColumn(xColumn, 'number'),
-    timerange
+  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: properties.xDomain,
+      timeRange: xColumn === '_time' ? timeRange : null,
+      transmitWindowPeriod,
+    }
   )
 
-  const [yDomain, onSetYDomain, onResetYDomain] = useVisYDomainSettings(
-    properties.yDomain,
-    result.table.getColumn(yColumn, 'number')
+  const [yDomain, onSetYDomain, onResetYDomain] = useZoomRequeryYDomainSettings(
+    {
+      adaptiveZoomHide: properties.adaptiveZoomHide,
+      data: resultState.table.getColumn(yColumn, 'number'),
+      parsedResult: resultState,
+      preZoomResult,
+      query: zoomQuery,
+      setPreZoomResult,
+      setRequeryStatus,
+      setResult: setResultState,
+      storedDomain: properties.yDomain,
+      transmitWindowPeriod,
+    }
   )
 
   const dispatch = useDispatch()
@@ -146,7 +178,14 @@ const ScatterPlot: FunctionComponent<Props> = ({
     }
   }
 
-  return <Plot config={config} />
+  return (
+    <>
+      {isFlagEnabled('zoomRequery') && (
+        <ViewLoadingSpinner loading={requeryStatus} />
+      )}
+      <Plot config={config} />
+    </>
+  )
 }
 
 export default ScatterPlot