feat(6482): add smoothing to sql graphs (#6514)

* feat(6482): apply RDP data smoothing viewOption, per field column, in SQL query modifiers for graphing

* feat(6482): set default graph properties, based on state of smoothing

* chore: provide a shared component for DropdownList selector, and utilize in SqlQueryOptions

* feat(6482): refactor ViewResults context to make easier to understand. Set initial view.properties correctly based upon the data expected in childResults.

* feat(6482): Remove unsupported graph types.

Author: wiedld

src/dataExplorer/components/Results.tsx

@@ -1,11 +1,4 @@
-import React, {
-  FC,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react'
+import React, {FC, useContext, useEffect, useMemo, useState} from 'react'
 import {
   Button,
   ComponentColor,
@@ -206,10 +199,7 @@ const GraphResults: FC = () => {
 
 const WrappedOptions: FC = () => {
   const [showOverlay, setShowOverlay] = useState(false)
-
-  // use parent `results` so all metadata is present for the viz options
-  const {result} = useContext(ResultsContext)
-  const {queryModifers, setResult, setStatus} = useContext(ChildResultsContext)
+  const {result, queryModifers} = useContext(ChildResultsContext)
   const {view, setView, selectViewOptions, viewOptions, selectedViewOptions} =
     useContext(ResultsViewContext)
   const {resource, query: text, selection} = useContext(PersistanceContext)
@@ -221,18 +211,15 @@ const WrappedOptions: FC = () => {
   )
   const seeGraphSubquery = () => setShowOverlay(true)
 
-  const updateChildResults = useCallback(
-    update => {
-      setView({
-        ...view,
-        properties: {
-          ...view.properties,
-          ...update,
-        },
-      })
-    },
-    [setStatus, setResult]
-  )
+  const updateChildResults = update => {
+    setView({
+      ...view,
+      properties: {
+        ...view.properties,
+        ...update,
+      },
+    })
+  }
 
   if (!dataExists) {
     return null
@@ -267,6 +254,13 @@ const WrappedOptions: FC = () => {
   )
 }
 
+const NOT_SUPPORTED_GRAPH_TYPES = [
+  SUPPORTED_VISUALIZATIONS.check.type,
+  SUPPORTED_VISUALIZATIONS.gauge.type,
+  SUPPORTED_VISUALIZATIONS.geo.type,
+  SUPPORTED_VISUALIZATIONS.mosaic.type,
+  SUPPORTED_VISUALIZATIONS['single-stat'].type,
+]
 const GraphHeader: FC = () => {
   const {view, setView, viewOptions} = useContext(ResultsViewContext)
   const {result} = useContext(ResultsContext)
@@ -310,6 +304,7 @@ const GraphHeader: FC = () => {
       <ViewTypeDropdown
         viewType={view.properties.type}
         onUpdateType={updateType}
+        filter={NOT_SUPPORTED_GRAPH_TYPES}
       />
       <Button
         text="Customize"

src/dataExplorer/components/SqlViewOptions.scss

@@ -1,13 +1,19 @@
 @import '@influxdata/clockface/dist/variables.scss';
 
 .sql-view-options {
+  padding-bottom: calc($cf-form-xs-height * 0.5);
   .cf-list {
     flex: 1 0 !important;
 
     .selector-list--item {
       height: $cf-form-xs-height;
     }
   }
+  .view-options--smoothing-header {
+    padding-top: calc($cf-form-xs-height * 0.5);
+    height: $cf-form-lg-height;
+    justify-content: space-between;
+  }
   .sql-view-options--see-query {
     padding-top: $cf-form-xs-height;
     display: flex;

src/dataExplorer/components/SqlViewOptions.tsx

@@ -1,14 +1,22 @@
 import React, {FC} from 'react'
-import {Columns, Grid, Button, ComponentStatus} from '@influxdata/clockface'
+import {
+  Button,
+  Columns,
+  ComponentStatus,
+  FlexBox,
+  Grid,
+  SlideToggle,
+} from '@influxdata/clockface'
 
-import SelectorList from 'src/timeMachine/components/SelectorList'
+import {RecursivePartial} from 'src/types'
+import {DropdownList as SelectorList} from 'src/shared/components/DropdownList'
 import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
 import {ViewOptions} from 'src/dataExplorer/context/resultsView'
 
 import './SqlViewOptions.scss'
 
 interface SqlViewOptionsT {
-  selectViewOptions: (_: Partial<ViewOptions>) => void
+  selectViewOptions: (_: RecursivePartial<ViewOptions>) => void
   allViewOptions: ViewOptions
   selectedViewOptions: ViewOptions
   seeSubquery: () => void
@@ -50,6 +58,28 @@ export const SqlViewOptions: FC<SqlViewOptionsT> = ({
     </div>
   )
 
+  const smoothingTooltipContents = (
+    <div>
+      <span>Smoothing used for the graph subquery.</span>
+      <br />
+      <br />
+      <span>
+        Smoothing applies a{' '}
+        <a href="https://docs.influxdata.com/flux/v0.x/stdlib/experimental/polyline/rdp/">
+          RDP algorithm
+        </a>{' '}
+        to downsample your data, while maintaining the trends. Smoothing will be
+        applied to a single column of data, based upon your chosen 'Y column'.
+      </span>
+      <br />
+      <br />
+      <span>
+        Goal is to display a graph covering the entire time range, even if your
+        full returned results are truncated in the table view.
+      </span>
+    </div>
+  )
+
   return (
     <div className="view-options sql-view-options">
       <Grid>
@@ -71,6 +101,31 @@ export const SqlViewOptions: FC<SqlViewOptionsT> = ({
               onSelectItem={tagKey => handleSelectedListItem('groupby', tagKey)}
               multiSelect={true}
             />
+            <FlexBox className="view-options--smoothing-header">
+              <SelectorTitle
+                label="Graph smoothing"
+                tooltipContents={smoothingTooltipContents}
+              />
+              <SlideToggle
+                active={selectedViewOptions?.smoothing?.applied}
+                onChange={() =>
+                  selectViewOptions({
+                    smoothing: {
+                      applied: !selectedViewOptions?.smoothing?.applied,
+                    },
+                  })
+                }
+              />
+            </FlexBox>
+            <SelectorList
+              items={allViewOptions?.smoothing?.columns ?? []}
+              selectedItems={selectedViewOptions?.smoothing?.columns ?? []}
+              onSelectItem={column =>
+                selectViewOptions({smoothing: {columns: [column]}})
+              }
+              multiSelect={false}
+              disabled={!selectedViewOptions?.smoothing?.applied}
+            />
             <div className="sql-view-options--see-query">
               <Button
                 testID="sql-view-options--see-query"

src/dataExplorer/context/fields.tsx

@@ -11,6 +11,7 @@ import {DEFAULT_LIMIT} from 'src/shared/constants/queryBuilder'
 
 // Contexts
 import {QueryContext, QueryScope} from 'src/shared/contexts/query'
+import {ResultsViewContext} from 'src/dataExplorer/context/resultsView'
 
 // Utils
 import {
@@ -46,6 +47,7 @@ interface Prop {
 export const FieldsProvider: FC<Prop> = ({children, scope}) => {
   // Contexts
   const {query: queryAPI} = useContext(QueryContext)
+  const {setDefaultViewOptions} = useContext(ResultsViewContext)
 
   // States
   const [fields, setFields] = useState<Array<string>>(
@@ -105,6 +107,7 @@ export const FieldsProvider: FC<Prop> = ({children, scope}) => {
       )[0]?.data ?? []) as string[]
       setFields(values)
       setLoading(RemoteDataState.Done)
+      setDefaultViewOptions({smoothing: {columns: values}})
     } catch (e) {
       console.error(e.message)
       setLoading(RemoteDataState.Error)

src/dataExplorer/context/results/childResults.tsx

@@ -31,11 +31,13 @@ const modifiersToApply = (viewOptions: ViewOptions): SqlQueryModifiers => {
   }
 
   // 2. smoothing transformation next
-  // e.g. to smooth by selected column foo. Rough example.
-  const shouldSmooth = false
+  const shouldSmooth =
+    viewOptions.smoothing?.columns?.length > 0 && viewOptions.smoothing?.applied
   if (shouldSmooth) {
     prepend.push(`import "experimental/polyline"`)
-    // append.push(`|> polyline.rdp(valColumn: "foo", timeColumn: "time")`) // TODO
+    append.push(
+      `|> polyline.rdp(valColumn: "${viewOptions.smoothing.columns[0]}", timeColumn: "time")`
+    )
   }
 
   return Boolean(prepend.length + append.length)
@@ -136,7 +138,7 @@ export const ChildResultsProvider: FC = ({children}) => {
         })
         setStatus(RemoteDataState.Error)
       })
-  }, [resultFromParent, viewOptions, setStatus, setResult])
+  }, [resultFromParent, setStatus, setResult, viewOptions])
 
   return (
     <ChildResultsContext.Provider