feat(6496): SQL graphing viewOptions: groupby tag keys (#6502)

* feat(6496): viewOptions to modify query by groupby tagKeys

* fix(6496): Cannot run subquery if no bucket is selected. Show spinner when graph subquery is loading.

* feat(6496): have groupby options be a based upon returned results, with the default groupby determined via the tagKeys in the schema

* feat(6482): when choosing graph --> auto-open the Customize options in right hand panel.

* chore(6496): use better naming conventions

* feat(6496): make explicit what is persisted, and determine when it's cleared

Author: wiedld

src/dataExplorer/components/DeleteScript.tsx

@@ -12,6 +12,7 @@ import {ResultsContext} from 'src/dataExplorer/context/results'
 import {RemoteDataState} from 'src/types'
 import {QueryContext} from 'src/shared/contexts/query'
 import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
+import {ResultsViewContext} from 'src/dataExplorer/context/resultsView'
 
 let deleteScript
 
@@ -28,6 +29,7 @@ const DeleteScript: FC<Props> = ({onBack, onClose}) => {
   const {resource} = useContext(PersistanceContext)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
+  const {clear: clearViewOptions} = useContext(ResultsViewContext)
   const history = useHistory()
   const dispatch = useDispatch()
   const org = useSelector(getOrg)
@@ -43,6 +45,7 @@ const DeleteScript: FC<Props> = ({onBack, onClose}) => {
 
         setStatus(RemoteDataState.NotStarted)
         setResult(null)
+        clearViewOptions()
         cancel()
         history.replace(
           `/orgs/${org.id}/data-explorer/from/script${SCRIPT_EDITOR_PARAMS}`

src/dataExplorer/components/Results.tsx

@@ -1,4 +1,11 @@
-import React, {FC, useState, useContext, useMemo, useCallback} from 'react'
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import {
   FlexBox,
   FlexDirection,
@@ -7,9 +14,21 @@ import {
   IconFont,
   ComponentStatus,
   ComponentColor,
+  SpinnerContainer,
+  TechnoSpinner,
 } from '@influxdata/clockface'
 
-import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
+// Components
+import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
+import {
+  View,
+  ViewTypeDropdown,
+  ViewOptions,
+  SUPPORTED_VISUALIZATIONS,
+} from 'src/visualization'
+import {SqlViewOptions} from 'src/dataExplorer/components/SqlViewOptions'
+
+// Contexts
 import {ResultsContext} from 'src/dataExplorer/context/results'
 import {
   ResultsViewContext,
@@ -18,18 +37,17 @@ import {
 import {ChildResultsContext} from 'src/dataExplorer/context/results/childResults'
 import {SidebarContext} from 'src/dataExplorer/context/sidebar'
 import {PersistanceContext} from 'src/dataExplorer/context/persistance'
-import {SearchWidget} from 'src/shared/components/search_widget/SearchWidget'
-import {
-  View,
-  ViewTypeDropdown,
-  ViewOptions,
-  SUPPORTED_VISUALIZATIONS,
-} from 'src/visualization'
+
+// Types
 import {FluxResult} from 'src/types/flows'
+import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
 
-import './Results.scss'
+// Utils
 import {bytesFormatter} from 'src/shared/copy/notifications'
 
+import './Results.scss'
+import {LanguageType} from './resources'
+
 const QueryStat: FC = () => {
   const {result} = useContext(ResultsContext)
 
@@ -154,13 +172,15 @@ const GraphResults: FC = () => {
 
   return (
     <div className="data-explorer-results--view">
-      <View
-        loading={status}
-        properties={view.properties}
-        result={result?.parsed}
-        timeRange={range}
-        hideTimer
-      />
+      <SpinnerContainer loading={status} spinnerComponent={<TechnoSpinner />}>
+        <View
+          loading={status}
+          properties={view.properties}
+          result={result?.parsed}
+          timeRange={range}
+          hideTimer
+        />
+      </SpinnerContainer>
     </div>
   )
 }
@@ -169,7 +189,10 @@ const WrappedOptions: FC = () => {
   // use parent `results` so all metadata is present for the viz options
   const {result} = useContext(ResultsContext)
   const {setResult, setStatus} = useContext(ChildResultsContext)
-  const {view, setView /* setViewOptions*/} = useContext(ResultsViewContext)
+  const {view, setView, selectViewOptions, viewOptions, selectedViewOptions} =
+    useContext(ResultsViewContext)
+  const {resource} = useContext(PersistanceContext)
+  const dataExists = !!result?.parsed
 
   const updateChildResults = useCallback(
     update => {
@@ -184,8 +207,19 @@ const WrappedOptions: FC = () => {
     [setStatus, setResult]
   )
 
-  // TODO: make component with `update={setViewOptions}`, for QxBuilder-specific graph subquery options
-  const subQueryOptions = null
+  if (!dataExists) {
+    return null
+  }
+
+  const subQueryOptions =
+    resource?.language === LanguageType.SQL &&
+    view.state == ViewStateType.Graph ? (
+      <SqlViewOptions
+        selectViewOptions={selectViewOptions}
+        allViewOptions={viewOptions}
+        selectedViewOptions={selectedViewOptions}
+      />
+    ) : null
 
   return (
     <>
@@ -200,14 +234,26 @@ const WrappedOptions: FC = () => {
 }
 
 const GraphHeader: FC = () => {
-  const {view, setView} = useContext(ResultsViewContext)
+  const {view, setView, viewOptions} = useContext(ResultsViewContext)
   const {result} = useContext(ResultsContext)
   const {result: subQueryResult} = useContext(ChildResultsContext)
-  const {launch} = useContext(SidebarContext)
+  const {launch, clear: closeSidebar} = useContext(SidebarContext)
+
+  const dataExists = !!result?.parsed
 
   const launcher = () => {
     launch(<WrappedOptions />)
   }
+  useEffect(() => {
+    if (dataExists) {
+      launcher()
+    }
+  }, [viewOptions])
+  useEffect(() => {
+    if (!dataExists) {
+      closeSidebar()
+    }
+  }, [dataExists])
 
   const updateType = viewType => {
     setView({
@@ -216,7 +262,6 @@ const GraphHeader: FC = () => {
     })
   }
 
-  const dataExists = !!result?.parsed
   const subqueryReturnsData = !!subQueryResult?.parsed
   let titleText = 'Configure Visualization'
   if (!dataExists) {

src/dataExplorer/components/SaveAsScript.tsx

@@ -37,6 +37,7 @@ import {
   copyToClipboardFailed,
   copyToClipboardSuccess,
 } from 'src/shared/copy/notifications'
+import {ResultsViewContext} from 'src/dataExplorer/context/resultsView'
 interface Props {
   language: LanguageType
   onClose: () => void
@@ -52,6 +53,7 @@ const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
   const isIoxOrg = useSelector(isOrgIOx)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
+  const {clear: clearViewOptions} = useContext(ResultsViewContext)
   const [error, setError] = useState<string>()
   // Setting the name to state rather than persisting it to session storage
   // so that we can cancel out of a name change if needed
@@ -96,6 +98,7 @@ const SaveAsScript: FC<Props> = ({language, onClose, setOverlayType, type}) => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
+    clearViewOptions()
 
     if (isIoxOrg) {
       history.replace(

src/dataExplorer/components/ScriptQueryBuilder.tsx

@@ -21,7 +21,10 @@ import {QueryProvider} from 'src/shared/contexts/query'
 import {EditorProvider} from 'src/shared/contexts/editor'
 import {ResultsProvider, ResultsContext} from 'src/dataExplorer/context/results'
 import {ChildResultsProvider} from 'src/dataExplorer/context/results/childResults'
-import {ResultsViewProvider} from 'src/dataExplorer/context/resultsView'
+import {
+  ResultsViewProvider,
+  ResultsViewContext,
+} from 'src/dataExplorer/context/resultsView'
 import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
 import {
   PersistanceProvider,
@@ -59,12 +62,14 @@ const ScriptQueryBuilder: FC = () => {
   const isIoxOrg = useSelector(isOrgIOx)
   const {cancel} = useContext(QueryContext)
   const {setStatus, setResult} = useContext(ResultsContext)
+  const {clear: clearViewOptions} = useContext(ResultsViewContext)
   const org = useSelector(getOrg)
 
   const handleClear = useCallback(() => {
     cancel()
     setStatus(RemoteDataState.NotStarted)
     setResult(null)
+    clearViewOptions()
 
     if (isIoxOrg) {
       history.replace(

src/dataExplorer/components/SqlViewOptions.scss

@@ -0,0 +1,11 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.sql-view-options {
+  .cf-list {
+    flex: 1 0 !important;
+
+    .selector-list--item {
+      height: $cf-form-xs-height;
+    }
+  }
+}

src/dataExplorer/components/SqlViewOptions.tsx

@@ -0,0 +1,77 @@
+import React, {FC} from 'react'
+import {Columns, Grid} from '@influxdata/clockface'
+
+import SelectorList from 'src/timeMachine/components/SelectorList'
+import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
+import {ViewOptions} from 'src/dataExplorer/context/resultsView'
+
+import './SqlViewOptions.scss'
+
+interface SqlViewOptionsT {
+  selectViewOptions: (_: Partial<ViewOptions>) => void
+  allViewOptions: ViewOptions
+  selectedViewOptions: ViewOptions
+}
+
+export const SqlViewOptions: FC<SqlViewOptionsT> = ({
+  selectViewOptions,
+  allViewOptions,
+  selectedViewOptions,
+}) => {
+  const handleSelectedListItem = (propKey, value) => {
+    if ((selectedViewOptions[propKey] ?? []).includes(value)) {
+      selectViewOptions({
+        [propKey]: selectedViewOptions[propKey].filter(v => v !== value),
+      })
+    } else {
+      selectViewOptions({
+        [propKey]: (selectedViewOptions[propKey] ?? []).concat([value]),
+      })
+    }
+  }
+
+  const groupbyTooltipContents = (
+    <div>
+      <span>Select the GROUPBY used for the graph subquery.</span>
+      <br />
+      <br />
+      <span>
+        Options are based on returned data results (refer to your table
+        columns).
+      </span>
+      <br />
+      <br />
+      <span>
+        By default, the GROUPBY is done on all tagKeys in order to produce a
+        dataseries.
+      </span>
+    </div>
+  )
+
+  return (
+    <div className="view-options sql-view-options">
+      <Grid>
+        <Grid.Row>
+          <Grid.Column
+            widthXS={Columns.Twelve}
+            widthMD={Columns.Six}
+            widthLG={Columns.Four}
+            className="view-options-container"
+          >
+            <h5 className="view-options--header">Query Modifier</h5>
+            <SelectorTitle
+              label="Grouping"
+              tooltipContents={groupbyTooltipContents}
+            />
+            <SelectorList
+              items={allViewOptions?.groupby ?? []}
+              selectedItems={selectedViewOptions?.groupby ?? []}
+              onSelectItem={tagKey => handleSelectedListItem('groupby', tagKey)}
+              multiSelect={true}
+            />
+          </Grid.Column>
+        </Grid.Row>
+      </Grid>
+    </div>
+  )
+}

src/dataExplorer/context/results/childResults.tsx

@@ -17,17 +17,33 @@ import {LanguageType} from 'src/dataExplorer/components/resources'
 // Utils
 import {rangeToParam} from 'src/dataExplorer/shared/utils'
 
-const modifiersToApply = (_viewOptions: ViewOptions): SqlQueryModifiers => {
+const modifiersToApply = (viewOptions: ViewOptions): SqlQueryModifiers => {
+  const prepend = []
+  const append = []
+
+  // 1. groupby first
+  if (viewOptions.groupby?.length) {
+    append.push(
+      `|> group(columns: [${viewOptions.groupby
+        .map(columnName => `"${columnName}"`)
+        .join(',')}])`
+    )
+  }
+
+  // 2. smoothing transformation next
   // e.g. to smooth by selected column foo. Rough example.
   const shouldSmooth = false
   if (shouldSmooth) {
-    return {
-      prepend: `import "experimental/polyline"`,
-      append: `|> polyline.rdp(valColumn: "foo", timeColumn: "time")`,
-    }
+    prepend.push(`import "experimental/polyline"`)
+    // append.push(`|> polyline.rdp(valColumn: "foo", timeColumn: "time")`) // TODO
   }
 
-  return null
+  return Boolean(prepend.length + append.length)
+    ? {
+        prepend: prepend.join('\n'),
+        append: append.join('\n'),
+      }
+    : null
 }
 
 interface ChildResultsContextType {
@@ -51,12 +67,13 @@ export const ChildResultsContext =
 
 export const ChildResultsProvider: FC = ({children}) => {
   const [result, setResult] = useState<FluxResult>({} as FluxResult)
+  const [queryModifers, setQueryModifiers] = useState(null)
   const [status, setStatus] = useState<RemoteDataState>(
     RemoteDataState.NotStarted
   )
   const {status: statusFromParent, result: resultFromParent} =
     useContext(ResultsContext)
-  const {viewOptions} = useContext(ResultsViewContext)
+  const {selectedViewOptions: viewOptions} = useContext(ResultsViewContext)
   const {
     query: queryText,
     selection,
@@ -78,10 +95,16 @@ export const ChildResultsProvider: FC = ({children}) => {
       return
     }
 
-    // TODO: tranform functions, based on viewOptions change
+    const cannotRunIoxSqlMethod = !selection?.bucket
+    if (cannotRunIoxSqlMethod) {
+      return
+    }
+
     const sqlQueryModifiers = modifiersToApply(viewOptions)
+    const previousQueryModifiers = queryModifers
+    setQueryModifiers(sqlQueryModifiers)
 
-    if (!sqlQueryModifiers) {
+    if (sqlQueryModifiers === previousQueryModifiers) {
       return
     }