feat: adds the adaptive zoom view option (#5542)

TCL735 · web-flow · commit 1d2db3bbdb28 · 2022-08-25T16:07:13.000-07:00
diff --git a/src/visualization/components/internal/AdaptiveZoomOption.tsx b/src/visualization/components/internal/AdaptiveZoomOption.tsx
@@ -0,0 +1,91 @@
+// Libraries
+import React, {CSSProperties, FC} from 'react'
+
+// Components
+import {
+  AlignItems,
+  ComponentSize,
+  FlexBox,
+  FlexDirection,
+  InfluxColors,
+  InputLabel,
+  QuestionMarkTooltip,
+  SlideToggle,
+} from '@influxdata/clockface'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
+
+// Metrics
+import {event} from 'src/cloud/utils/reporting'
+
+interface AdaptiveZoomToggleProps {
+  adaptiveZoomHide: boolean
+  update: (obj: any) => void
+  testID?: string
+  type: string
+}
+
+const getToggleColor = (toggle: boolean): CSSProperties => {
+  if (toggle) {
+    return {color: InfluxColors.Grey95}
+  }
+  return {color: InfluxColors.Grey65}
+}
+
+const adaptiveZoomTooltipStyle = {
+  maxWidth: '40%',
+  padding: '2px 18px',
+}
+
+const adaptiveZoomTooltip = (
+  <div>
+    <p>
+      When enabled, will re-query on the selected domain upon zooming in on the
+      graph. Requires window period set to Auto.
+    </p>
+    <p>
+      <SafeBlankLink href="https://docs.influxdata.com/influxdb/cloud/visualize-data/variables/#vwindowperiod">
+        Learn about window period
+      </SafeBlankLink>
+    </p>
+  </div>
+)
+
+export const AdaptiveZoomToggle: FC<AdaptiveZoomToggleProps> = ({
+  adaptiveZoomHide,
+  update,
+  type,
+}) => {
+  const handleSetAdaptiveZoom = () => {
+    update({
+      adaptiveZoomHide: !adaptiveZoomHide,
+    })
+    event(`visualization.customize.adaptiveZoom.${!adaptiveZoomHide}`, {
+      type,
+    })
+  }
+
+  return (
+    <FlexBox
+      direction={FlexDirection.Row}
+      alignItems={AlignItems.Center}
+      margin={ComponentSize.Medium}
+      stretchToFitWidth={true}
+      className="adaptive-zoom-toggle"
+      testID="adaptive-zoom-toggle"
+    >
+      <SlideToggle
+        active={!adaptiveZoomHide}
+        size={ComponentSize.ExtraSmall}
+        onChange={handleSetAdaptiveZoom}
+      />
+      <InputLabel style={getToggleColor(adaptiveZoomHide)}>
+        Adaptive Zoom
+      </InputLabel>
+      <QuestionMarkTooltip
+        diameter={16}
+        tooltipContents={adaptiveZoomTooltip}
+        tooltipStyle={adaptiveZoomTooltipStyle}
+      />
+    </FlexBox>
+  )
+}
diff --git a/src/visualization/types/Graph/options.tsx b/src/visualization/types/Graph/options.tsx
@@ -26,8 +26,10 @@ import {
   parseYBounds,
 } from 'src/shared/utils/vis'
 import {generateSeriesToColorHex} from 'src/visualization/utils/colorMappingUtils'
+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'
@@ -147,6 +149,20 @@ const GraphViewOptions: FC<Props> = ({properties, results, update}) => {
               }
             />
           </Form.Element>
+          {isFlagEnabled('zoomRequery') && (
+            <AdaptiveZoomToggle
+              adaptiveZoomHide={properties.adaptiveZoomHide}
+              type={properties.type}
+              update={update}
+            />
+          )}
+        </Grid.Column>
+        <Grid.Column
+          widthXS={Columns.Twelve}
+          widthMD={Columns.Six}
+          widthLG={Columns.Four}
+        >
+          <h5 className="view-options--header">Options</h5>
           <Form.Element label="Time Format">
             <SelectDropdown
               options={FORMAT_OPTIONS.map(option => option.text)}
@@ -156,13 +172,6 @@ const GraphViewOptions: FC<Props> = ({properties, results, update}) => {
               }}
             />
           </Form.Element>
-        </Grid.Column>
-        <Grid.Column
-          widthXS={Columns.Twelve}
-          widthMD={Columns.Six}
-          widthLG={Columns.Four}
-        >
-          <h5 className="view-options--header">Options</h5>
           {properties.geom && (
             <Form.Element label="Interpolation">
               <Dropdown
diff --git a/src/visualization/types/Graph/view.tsx b/src/visualization/types/Graph/view.tsx
@@ -47,8 +47,6 @@ 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'
@@ -60,11 +58,11 @@ import {
   defaultXColumn,
   defaultYColumn,
 } from 'src/shared/utils/vis'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Annotations
 import {addAnnotationLayer} from 'src/visualization/utils/annotationUtils'
 import {getColorMappingObjects} from 'src/visualization/utils/colorMappingUtils'
-import {isFlagEnabled} from '../../../shared/utils/featureFlag'
 
 // Selectors
 import {getByID} from 'src/resources/selectors'
@@ -171,55 +169,36 @@ const XYPlot: FC<Props> = ({
     properties.position,
   ])
 
-  let useXDomainSettings = ({storedDomain, parsedResult, timeRange}) =>
-    useVisXDomainSettings(
-      storedDomain,
-      parsedResult.table.getColumn(xColumn, 'number'),
-      timeRange
-    )
-  let useYDomainSettings = options => {
-    const {storedDomain} = options
-    return useVisYDomainSettings(storedDomain, memoizedYColumnData)
-  }
-
   const zoomQuery = useZoomQuery(properties)
-  if (isFlagEnabled('zoomRequery')) {
-    useXDomainSettings = ({storedDomain, parsedResult, timeRange}) =>
-      useZoomRequeryXDomainSettings({
-        data: parsedResult.table.getColumn(xColumn, 'number'),
-        parsedResult,
-        preZoomResult,
-        query: zoomQuery,
-        setPreZoomResult,
-        setRequeryStatus,
-        setResult: setResultState,
-        storedDomain,
-        timeRange,
-      })
-    useYDomainSettings = ({storedDomain, parsedResult}) =>
-      useZoomRequeryYDomainSettings({
-        data: memoizedYColumnData,
-        parsedResult,
-        preZoomResult,
-        query: zoomQuery,
-        setPreZoomResult,
-        setRequeryStatus,
-        setResult: setResultState,
-        storedDomain,
-      })
-  }
 
-  const [xDomain, onSetXDomain, onResetXDomain] = useXDomainSettings({
-    storedDomain: storedXDomain,
-    parsedResult: resultState,
-    timeRange,
-  })
+  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,
+    }
+  )
 
-  const [yDomain, onSetYDomain, onResetYDomain] = useYDomainSettings({
-    storedDomain: storedYDomain,
-    parsedResult: resultState,
-    timeRange,
-  })
+  const [yDomain, onSetYDomain, onResetYDomain] = useZoomRequeryYDomainSettings(
+    {
+      adaptiveZoomHide: properties.adaptiveZoomHide,
+      data: memoizedYColumnData,
+      parsedResult: resultState,
+      preZoomResult,
+      query: zoomQuery,
+      setPreZoomResult,
+      setRequeryStatus,
+      setResult: setResultState,
+      storedDomain: storedYDomain,
+    }
+  )
 
   const legendColumns = filterNoisyColumns(
     properties.position === 'stacked'
diff --git a/src/visualization/utils/useVisDomainSettings.ts b/src/visualization/utils/useVisDomainSettings.ts
@@ -23,6 +23,7 @@ import {
   normalizeWindowPeriodForZoomRequery,
   normalizeWindowPeriodVariableForZoomRequery,
 } from 'src/variables/utils/getWindowVars'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
 // Types
 import {AppState, InternalFromFluxResult, TimeRange} from 'src/types'
@@ -142,6 +143,7 @@ export const useVisYDomainSettings = (
 }
 
 interface ZoomRequeryArgs {
+  adaptiveZoomHide: boolean
   data: NumericColumnData | string[]
   parsedResult: InternalFromFluxResult
   preZoomResult: InternalFromFluxResult
@@ -158,6 +160,7 @@ const isNotEqual = (firstValue: any, secondValue: any): boolean =>
 
 export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
   const {
+    adaptiveZoomHide,
     data,
     parsedResult,
     preZoomResult,
@@ -185,7 +188,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
    *   - can be changed by the time range dropdown
    *   - uses one-way state to capture the very first set of values
    */
-  const [preZoomDomain] = useOneWayState(initialDomain)
+  const [preZoomDomain, setPreZoomDomain] = useOneWayState(initialDomain)
 
   /*
    * domain:
@@ -265,6 +268,20 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     }
   }, [preZoomDomain]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Suppresses adaptive zoom feature; must come after all hooks
+  if (!isFlagEnabled('zoomRequery') || adaptiveZoomHide) {
+    const setVisXDomain = (domain: NumericColumnData) => {
+      setPreZoomDomain(domain)
+      event('plot.zoom_in.xAxis', {zoomRequery: 'false'})
+    }
+
+    const resetDomain = () => {
+      setPreZoomDomain(initialDomain)
+      event('plot.zoom_restore.xAxis', {zoomRequery: 'false'})
+    }
+    return [preZoomDomain, setVisXDomain, resetDomain]
+  }
+
   const setZoomDomain = (updatedDomain: number[]) => {
     setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {
@@ -274,7 +291,7 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     event('plot.zoom_in.xAxis', {zoomRequery: 'true'}, {orgId})
   }
 
-  const resetDomain = () => {
+  const resetZoomDomain = () => {
     setRequeryStatus(RemoteDataState.NotStarted)
     if (preZoomResult) {
       setResult(preZoomResult)
@@ -284,11 +301,12 @@ export const useZoomRequeryXDomainSettings = (args: ZoomRequeryArgs) => {
     event('plot.zoom_restore.xAxis', {zoomRequery: 'true'}, {orgId})
   }
 
-  return [domain, setZoomDomain, resetDomain]
+  return [domain, setZoomDomain, resetZoomDomain]
 }
 
 export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
   const {
+    adaptiveZoomHide,
     data,
     parsedResult,
     preZoomResult,
@@ -321,7 +339,7 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
    *   - can be changed by the time range dropdown
    *   - uses one-way state to capture the very first set of values
    */
-  const [preZoomDomain] = useOneWayState(initialDomain)
+  const [preZoomDomain, setPreZoomDomain] = useOneWayState(initialDomain)
 
   /*
    * domain:
@@ -401,6 +419,20 @@ export const useZoomRequeryYDomainSettings = (args: ZoomRequeryArgs) => {
     }
   }, [preZoomDomain]) // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Suppresses adaptive zoom feature; must come after all hooks
+  if (!isFlagEnabled('zoomRequery') || adaptiveZoomHide) {
+    const setVisYDomain = (domain: NumericColumnData | string) => {
+      setPreZoomDomain(domain)
+      event('plot.zoom_in.yAxis', {zoomRequery: 'false'})
+    }
+
+    const resetDomain = () => {
+      setPreZoomDomain(initialDomain)
+      event('plot.zoom_restore.yAxis', {zoomRequery: 'false'})
+    }
+    return [preZoomDomain, setVisYDomain, resetDomain]
+  }
+
   const setZoomDomain = (updatedDomain: number[]) => {
     setRequeryStatus(RemoteDataState.NotStarted)
     if (!preZoomResult) {
