feat(6482): show graph subquery to user (#6506)

* feat(6482): show graph subquery to  user

* chore: make imports alphabetical.

Author: wiedld

src/dataExplorer/components/Results.tsx

@@ -7,15 +7,17 @@ import React, {
   useState,
 } from 'react'
 import {
+  Button,
+  ComponentColor,
+  ComponentStatus,
   FlexBox,
   FlexDirection,
-  SelectGroup,
-  Button,
   IconFont,
-  ComponentStatus,
-  ComponentColor,
+  Overlay,
+  SelectGroup,
   SpinnerContainer,
   TechnoSpinner,
+  TextArea,
 } from '@influxdata/clockface'
 
 // Components
@@ -44,6 +46,7 @@ import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
 
 // Utils
 import {bytesFormatter} from 'src/shared/copy/notifications'
+import {sqlAsFlux} from 'src/shared/contexts/query/preprocessing'
 
 import './Results.scss'
 import {LanguageType} from './resources'
@@ -165,6 +168,22 @@ const TableResults: FC<{search: string}> = ({search}) => {
   )
 }
 
+const GraphSubQueryOverlay: FC<{text: string; onClose: () => void}> = ({
+  text,
+  onClose,
+}) => (
+  <Overlay.Container maxWidth={600}>
+    <Overlay.Header title="Subquery for graph data:" onDismiss={onClose} />
+    <Overlay.Body>
+      <TextArea
+        testID="data-explorer-results--graph-subquery"
+        value={text}
+        readOnly
+      />
+    </Overlay.Body>
+  </Overlay.Container>
+)
+
 const GraphResults: FC = () => {
   const {view} = useContext(ResultsViewContext)
   const {result, status} = useContext(ChildResultsContext)
@@ -186,14 +205,22 @@ 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 {setResult, setStatus} = useContext(ChildResultsContext)
+  const {queryModifers, setResult, setStatus} = useContext(ChildResultsContext)
   const {view, setView, selectViewOptions, viewOptions, selectedViewOptions} =
     useContext(ResultsViewContext)
-  const {resource} = useContext(PersistanceContext)
+  const {resource, query: text, selection} = useContext(PersistanceContext)
   const dataExists = !!result?.parsed
 
+  const subquery = useMemo(
+    () => sqlAsFlux(text, selection?.bucket, queryModifers),
+    [text, selection?.bucket, queryModifers]
+  )
+  const seeGraphSubquery = () => setShowOverlay(true)
+
   const updateChildResults = useCallback(
     update => {
       setView({
@@ -218,11 +245,18 @@ const WrappedOptions: FC = () => {
         selectViewOptions={selectViewOptions}
         allViewOptions={viewOptions}
         selectedViewOptions={selectedViewOptions}
+        seeSubquery={selection?.bucket ? seeGraphSubquery : null}
       />
     ) : null
 
   return (
     <>
+      <Overlay visible={showOverlay}>
+        <GraphSubQueryOverlay
+          text={subquery}
+          onClose={() => setShowOverlay(false)}
+        />
+      </Overlay>
       {subQueryOptions}
       <ViewOptions
         properties={view.properties}

src/dataExplorer/components/SqlViewOptions.scss

@@ -8,4 +8,10 @@
       height: $cf-form-xs-height;
     }
   }
+  .sql-view-options--see-query {
+    padding-top: $cf-form-xs-height;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+  }
 }

src/dataExplorer/components/SqlViewOptions.tsx

@@ -1,5 +1,5 @@
 import React, {FC} from 'react'
-import {Columns, Grid} from '@influxdata/clockface'
+import {Columns, Grid, Button, ComponentStatus} from '@influxdata/clockface'
 
 import SelectorList from 'src/timeMachine/components/SelectorList'
 import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
@@ -11,12 +11,14 @@ interface SqlViewOptionsT {
   selectViewOptions: (_: Partial<ViewOptions>) => void
   allViewOptions: ViewOptions
   selectedViewOptions: ViewOptions
+  seeSubquery: () => void
 }
 
 export const SqlViewOptions: FC<SqlViewOptionsT> = ({
   selectViewOptions,
   allViewOptions,
   selectedViewOptions,
+  seeSubquery,
 }) => {
   const handleSelectedListItem = (propKey, value) => {
     if ((selectedViewOptions[propKey] ?? []).includes(value)) {
@@ -69,6 +71,18 @@ export const SqlViewOptions: FC<SqlViewOptionsT> = ({
               onSelectItem={tagKey => handleSelectedListItem('groupby', tagKey)}
               multiSelect={true}
             />
+            <div className="sql-view-options--see-query">
+              <Button
+                testID="sql-view-options--see-query"
+                text="View graph subquery"
+                status={
+                  !seeSubquery
+                    ? ComponentStatus.Disabled
+                    : ComponentStatus.Valid
+                }
+                onClick={seeSubquery}
+              />
+            </div>
           </Grid.Column>
         </Grid.Row>
       </Grid>

src/dataExplorer/context/results/childResults.tsx

@@ -49,6 +49,7 @@ const modifiersToApply = (viewOptions: ViewOptions): SqlQueryModifiers => {
 interface ChildResultsContextType {
   status: RemoteDataState
   result: FluxResult
+  readonly queryModifers: SqlQueryModifiers
 
   setStatus: (status: RemoteDataState) => void
   setResult: (result: FluxResult) => void
@@ -57,6 +58,7 @@ interface ChildResultsContextType {
 const DEFAULT_STATE: ChildResultsContextType = {
   status: RemoteDataState.NotStarted,
   result: {} as FluxResult,
+  queryModifers: {} as SqlQueryModifiers,
 
   setStatus: _ => {},
   setResult: _ => {},
@@ -141,6 +143,7 @@ export const ChildResultsProvider: FC = ({children}) => {
       value={{
         status,
         result,
+        queryModifers,
 
         setStatus,
         setResult,