feat(6482): Message separately if graph subquery hits limit (#6507)

* feat(6482): Message separately if graph subquery hits limit

* feat(6482): add percentage slider to smoothing

* fix(6482): move anonymous handler declaration outside of component

Author: wiedld

src/dataExplorer/components/Results.tsx

@@ -299,6 +299,16 @@ const GraphHeader: FC = () => {
     titleText = 'Graph customization options returned no data'
   }
 
+  const GraphQueryStat = () => (
+    <div className="query-stat" data-testid="query-stat">
+      {subQueryResult?.truncated ? (
+        <span className="query-stat--bold">{`Max. display limit exceeded. Result truncated to ${bytesFormatter(
+          subQueryResult.bytes
+        )}.`}</span>
+      ) : null}
+    </div>
+  )
+
   return (
     <>
       <ViewTypeDropdown
@@ -315,6 +325,7 @@ const GraphHeader: FC = () => {
         titleText={titleText}
         className="de-config-visualization-button"
       />
+      <GraphQueryStat />
     </>
   )
 }

src/dataExplorer/components/SqlViewOptions.tsx

@@ -5,6 +5,7 @@ import {
   ComponentStatus,
   FlexBox,
   Grid,
+  RangeSlider,
   SlideToggle,
 } from '@influxdata/clockface'
 
@@ -40,6 +41,11 @@ export const SqlViewOptions: FC<SqlViewOptionsT> = ({
     }
   }
 
+  const handleSmoothingRangeSlider = event =>
+    selectViewOptions({
+      smoothing: {percentageRetained: parseInt(event.target.value)},
+    })
+
   const groupbyTooltipContents = (
     <div>
       <span>Select the GROUPBY used for the graph subquery.</span>
@@ -126,6 +132,15 @@ export const SqlViewOptions: FC<SqlViewOptionsT> = ({
               multiSelect={false}
               disabled={!selectedViewOptions?.smoothing?.applied}
             />
+            <RangeSlider
+              value={selectedViewOptions?.smoothing?.percentageRetained}
+              min={5}
+              max={100}
+              step={5}
+              onChange={handleSmoothingRangeSlider}
+              labelPrefix="retained "
+              labelSuffix="%"
+            />
             <div className="sql-view-options--see-query">
               <Button
                 testID="sql-view-options--see-query"

src/dataExplorer/context/results/childResults.tsx

@@ -35,8 +35,16 @@ const modifiersToApply = (viewOptions: ViewOptions): SqlQueryModifiers => {
     viewOptions.smoothing?.columns?.length > 0 && viewOptions.smoothing?.applied
   if (shouldSmooth) {
     prepend.push(`import "experimental/polyline"`)
+    // will error if give 100.0 --> so instead do 99.9
+    const percentage = Number(
+      viewOptions.smoothing.percentageRetained ?? 50
+    ).toFixed(1)
     append.push(
-      `|> polyline.rdp(valColumn: "${viewOptions.smoothing.columns[0]}", timeColumn: "time")`
+      `|> polyline.rdp(
+        valColumn: "${viewOptions.smoothing.columns[0]}",
+        timeColumn: "${viewOptions.smoothing.timeColumn ?? 'time'}",
+        retention: ${percentage === '100.0' ? '99.9' : percentage}
+      )`
     )
   }
 

src/dataExplorer/context/resultsView.tsx

@@ -8,16 +8,21 @@ import React, {
 } from 'react'
 import {useDispatch} from 'react-redux'
 
-import {useSessionStorage} from 'src/dataExplorer/shared/utils'
+// Components & Contexts
+import {SUPPORTED_VISUALIZATIONS} from 'src/visualization'
+import {ResultsContext} from 'src/dataExplorer/context/results'
+
+// Types & Constants
 import {
   RecursivePartial,
   SimpleTableViewProperties,
   ViewProperties,
 } from 'src/types'
-import {SUPPORTED_VISUALIZATIONS} from 'src/visualization'
-import {ResultsContext} from 'src/dataExplorer/context/results'
+
+// Utils
 import {notify} from 'src/shared/actions/notifications'
 import {trySmoothingData} from 'src/shared/copy/notifications'
+import {useSessionStorage} from 'src/dataExplorer/shared/utils'
 
 const DEFAULT_TIME_COLUMN = '_time' // unpivoted data
 const DEFAULT_DATA_COLUMN = '_value' // unpivoted data
@@ -48,6 +53,8 @@ export interface ViewOptions {
   smoothing: {
     columns: string[] // currently `|> polyling.rdp()` is applied to a single column, but is not a fundamental requirement
     applied: boolean
+    percentageRetained: number
+    timeColumn: string
   }
 }
 
@@ -76,7 +83,12 @@ interface ResultsViewContextType {
 
 const DEFAULT_VIEW_OPTIONS: ViewOptions = {
   groupby: [],
-  smoothing: {columns: [], applied: true},
+  smoothing: {
+    columns: [],
+    applied: true,
+    percentageRetained: 50,
+    timeColumn: 'time',
+  },
 }
 
 const DEFAULT_STATE: ResultsViewContextType = {
@@ -274,11 +286,12 @@ export const ResultsViewProvider: FC = ({children}) => {
     const numericColumns = getNumericSelectorColumns()
     // initial selection
     const defaultSmoothingColumn = defineDefaultUnpivotedColumn(numericColumns)
+    const timeColumn = defineTimeColumn()
 
     return {
       all: {smoothing: {columns: numericColumns}},
       selected: {
-        smoothing: {columns: [defaultSmoothingColumn]},
+        smoothing: {columns: [defaultSmoothingColumn], timeColumn},
       },
     }
   }