feat: add adaptive zoom to Graph + Single Stat (#5978)

Author: TCL735

package.json

@@ -166,7 +166,7 @@
     "@docsearch/react": "^3.0.0-alpha.37",
     "@influxdata/clockface": "^6.3.7",
     "@influxdata/flux-lsp-browser": "0.8.35",
-    "@influxdata/giraffe": "^2.36.0",
+    "@influxdata/giraffe": "^2.37.0",
     "@influxdata/influxdb-templates": "0.9.0",
     "@influxdata/react-custom-scrollbars": "4.3.8",
     "abortcontroller-polyfill": "^1.3.0",

src/visualization/types/SingleStatWithLine/options.tsx

@@ -1,5 +1,5 @@
+// Libraries
 import React, {FC, useCallback} from 'react'
-
 import {
   Input,
   InputType,
@@ -19,12 +19,7 @@ import {
   InputLabel,
 } from '@influxdata/clockface'
 
-import AutoDomainInput from 'src/shared/components/AutoDomainInput'
-import {
-  AXES_SCALE_OPTIONS,
-  MIN_DECIMAL_PLACES,
-  MAX_DECIMAL_PLACES,
-} from 'src/visualization/constants'
+// Utils
 import {convertUserInputToNumOrNaN} from 'src/shared/utils/convertUserInput'
 import {
   FORMAT_OPTIONS,
@@ -35,10 +30,10 @@ import {
   defaultYColumn,
   parseYBounds,
 } from 'src/shared/utils/vis'
-import {
-  THRESHOLD_TYPE_TEXT,
-  THRESHOLD_TYPE_BG,
-} from 'src/shared/constants/thresholds'
+import {isFlagEnabled} from 'src/shared/utils/featureFlag'
+
+// Components
+import {AdaptiveZoomToggle} from 'src/visualization/components/internal/AdaptiveZoomOption'
 import ColorSchemeDropdown from 'src/visualization/components/internal/ColorSchemeDropdown'
 import AxisTicksGenerator from 'src/visualization/components/internal/AxisTicksGenerator'
 import ThresholdsSettings from 'src/visualization/components/internal/ThresholdsSettings'
@@ -47,6 +42,18 @@ import StaticLegend from 'src/visualization/components/internal/StaticLegend'
 import {LinePlusSingleStatProperties, Color} from 'src/types'
 import {VisualizationOptionProps} from 'src/visualization'
 
+// Constants
+import AutoDomainInput from 'src/shared/components/AutoDomainInput'
+import {
+  AXES_SCALE_OPTIONS,
+  MIN_DECIMAL_PLACES,
+  MAX_DECIMAL_PLACES,
+} from 'src/visualization/constants'
+import {
+  THRESHOLD_TYPE_TEXT,
+  THRESHOLD_TYPE_BG,
+} from 'src/shared/constants/thresholds'
+
 const {BASE_2, BASE_10} = AXES_SCALE_OPTIONS
 
 interface Props extends VisualizationOptionProps {
@@ -200,6 +207,20 @@ const SingleStatWithLineOptions: FC<Props> = ({
               }
             />
           </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)}
@@ -209,13 +230,6 @@ const SingleStatWithLineOptions: FC<Props> = ({
               }}
             />
           </Form.Element>
-        </Grid.Column>
-        <Grid.Column
-          widthXS={Columns.Twelve}
-          widthMD={Columns.Six}
-          widthLG={Columns.Four}
-        >
-          <h5 className="view-options--header">Options</h5>
           <Form.Element label="Line Colors">
             <ColorSchemeDropdown
               value={properties.colors.filter(c => c.type === 'scale')}

src/visualization/types/SingleStatWithLine/view.tsx

@@ -1,32 +1,39 @@
 // Libraries
-import React, {FC, useMemo, useContext} from 'react'
+import React, {FC, useContext, useEffect, useMemo, useState} from 'react'
 import {
   Config,
   DomainLabel,
   LINE_COUNT,
   Plot,
+  SINGLE_STAT_SVG_NO_USER_SELECT,
   STACKED_LINE_CUMULATIVE,
   SingleStatLayerConfig,
   createGroupIDColumn,
   getDomainDataFromLines,
   getLatestValues,
   lineTransform,
 } from '@influxdata/giraffe'
+import {RemoteDataState} from '@influxdata/clockface'
 
 // Redux
 import {isAnnotationsModeEnabled} from 'src/annotations/selectors'
 
 // Component
 import EmptyGraphMessage from 'src/shared/components/EmptyGraphMessage'
+import ViewLoadingSpinner from 'src/visualization/components/internal/ViewLoadingSpinner'
+
+// Context
+import {AppSettingContext} from 'src/shared/contexts/app'
 
 // Utils
 import {useAxisTicksGenerator} from 'src/visualization/utils/useAxisTicksGenerator'
 import {getFormatter} from 'src/visualization/utils/getFormatter'
 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,
@@ -36,16 +43,16 @@ import {
   defaultXColumn,
   defaultYColumn,
 } from 'src/shared/utils/vis'
-import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
-import {AppSettingContext} from 'src/shared/contexts/app'
+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'
+import {generateThresholdsListHexs} from 'src/shared/constants/colorOperations'
 
 // Types
-import {LinePlusSingleStatProperties} from 'src/types'
+import {LinePlusSingleStatProperties, InternalFromFluxResult} from 'src/types'
 import {VisualizationProps} from 'src/visualization'
 
 // Annotations
@@ -63,7 +70,19 @@ const SingleStatWithLine: FC<Props> = ({
   timeRange,
   annotations,
   cellID,
+  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 axisTicksOptions = useAxisTicksGenerator(properties)
   const tooltipOpacity = useLegendOpacity(properties.legendOpacity)
@@ -116,12 +135,6 @@ const SingleStatWithLine: FC<Props> = ({
     [result]
   )
 
-  const [xDomain, onSetXDomain, onResetXDomain] = useVisXDomainSettings(
-    storedXDomain,
-    result.table.getColumn(xColumn, 'number'),
-    timeRange
-  )
-
   const memoizedYColumnData = useMemo(() => {
     if (properties.position === 'stacked') {
       const {lineData} = lineTransform(
@@ -145,9 +158,37 @@ const SingleStatWithLine: FC<Props> = ({
     properties.position,
   ])
 
-  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(
@@ -250,6 +291,7 @@ const SingleStatWithLine: FC<Props> = ({
     svgTextAttributes: {
       'data-testid': 'single-stat--text',
     },
+    svgStyle: SINGLE_STAT_SVG_NO_USER_SELECT,
   }
 
   config.layers.push(statLayer)
@@ -270,7 +312,14 @@ const SingleStatWithLine: FC<Props> = ({
     'singleStatWline'
   )
 
-  return <Plot config={config} />
+  return (
+    <>
+      {isFlagEnabled('zoomRequery') && (
+        <ViewLoadingSpinner loading={requeryStatus} />
+      )}
+      <Plot config={config} />
+    </>
+  )
 }
 
 export default SingleStatWithLine

yarn.lock

@@ -1449,10 +1449,10 @@
   resolved "https://registry.yarnpkg.com/@influxdata/flux-lsp-browser/-/flux-lsp-browser-0.8.35.tgz#ed92117d46f297bacf6aec7e7ace451d55bdff79"
   integrity sha512-d/zlUAx+O67aTBVNIr0XznuDl2jkGELlahRL2OIPOawfnAkNNREuC8iMhov8dq+Bw9d5w+mT041UKzhxZXl1Kg==
 
-"@influxdata/giraffe@^2.36.0":
-  version "2.36.0"
-  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.36.0.tgz#8dcffa66a8cc497c3bc5d0c9e001d745244cb899"
-  integrity sha512-AMBtb9lOc9VXiTc8JBlbFe+PwyRBX8X+SvS9NRMSzrttWB6Anddy6H2mL34swbpCGreNhuElNT5GPj5ePwDFqw==
+"@influxdata/giraffe@^2.37.0":
+  version "2.37.0"
+  resolved "https://registry.yarnpkg.com/@influxdata/giraffe/-/giraffe-2.37.0.tgz#a4e06aed4d10dc85067feb79830ff31037175161"
+  integrity sha512-XTGC9fo6g70pbwgD9XV0Yvi1JHMGypI8CR3UAg7nJGq5MgbCgo9nzLaxvilKdcvngrQGCzARvw+ixawfIUHrJg==
   dependencies:
     merge-images "^2.0.0"