feat: view options in flux builder (#4831)

Author: drdelambre

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -5,14 +5,15 @@ import {DraggableResizer, Orientation} from '@influxdata/clockface'
 import {QueryProvider} from 'src/shared/contexts/query'
 import {EditorProvider} from 'src/shared/contexts/editor'
 import {ResultsProvider} from 'src/dataExplorer/components/ResultsContext'
+import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
 import ResultsPane from 'src/dataExplorer/components/ResultsPane'
-import SidePane from 'src/dataExplorer/components/SidePane'
+import Sidebar from 'src/dataExplorer/components/Sidebar'
 import Schema from 'src/dataExplorer/components/Schema'
 
 // Styles
 import './FluxQueryBuilder.scss'
 
-const INITIAL_LEFT_VERT_RESIZER_HANDLE = 0.2
+const INITIAL_LEFT_VERT_RESIZER_HANDLE = 0.25
 const INITIAL_RIGHT_VERT_RESIZER_HANDLE = 0.8
 
 const FluxQueryBuilder: FC = () => {
@@ -23,28 +24,30 @@ const FluxQueryBuilder: FC = () => {
 
   return (
     <QueryProvider>
-      <EditorProvider>
-        <DraggableResizer
-          handleOrientation={Orientation.Vertical}
-          handlePositions={vertDragPosition}
-          onChangePositions={setVertDragPosition}
-        >
-          <DraggableResizer.Panel>
-            <Schema />
-          </DraggableResizer.Panel>
-          <DraggableResizer.Panel
-            testID="flux-query-builder-middle-panel"
-            className="new-data-explorer-rightside"
-          >
-            <ResultsProvider>
-              <ResultsPane />
-            </ResultsProvider>
-          </DraggableResizer.Panel>
-          <DraggableResizer.Panel>
-            <SidePane />
-          </DraggableResizer.Panel>
-        </DraggableResizer>
-      </EditorProvider>
+      <ResultsProvider>
+        <EditorProvider>
+          <SidebarProvider>
+            <DraggableResizer
+              handleOrientation={Orientation.Vertical}
+              handlePositions={vertDragPosition}
+              onChangePositions={setVertDragPosition}
+            >
+              <DraggableResizer.Panel>
+                <Schema />
+              </DraggableResizer.Panel>
+              <DraggableResizer.Panel
+                testID="flux-query-builder-middle-panel"
+                className="new-data-explorer-rightside"
+              >
+                <ResultsPane />
+              </DraggableResizer.Panel>
+              <DraggableResizer.Panel>
+                <Sidebar />
+              </DraggableResizer.Panel>
+            </DraggableResizer>
+          </SidebarProvider>
+        </EditorProvider>
+      </ResultsProvider>
     </QueryProvider>
   )
 }

src/dataExplorer/components/Results.tsx

@@ -11,12 +11,14 @@ import {
 
 import {RemoteDataState, SimpleTableViewProperties} from 'src/types'
 import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {SidebarContext} from 'src/dataExplorer/context/sidebar'
 
 import SearchWidget from 'src/shared/components/search_widget/SearchWidget'
 import TimeZoneDropdown from 'src/shared/components/TimeZoneDropdown'
 import {
   View,
   ViewTypeDropdown,
+  ViewOptions,
   SUPPORTED_VISUALIZATIONS,
 } from 'src/visualization'
 
@@ -60,20 +62,33 @@ const EmptyResults: FC = () => {
   )
 }
 
+const WrappedOptions: FC = () => {
+  const {result, view, setView} = useContext(ResultsContext)
+
+  return (
+    <ViewOptions
+      properties={view.properties}
+      results={result.parsed}
+      update={update => {
+        Object.keys(update).forEach(k => (view.properties[k] = update[k]))
+
+        setView({...view})
+      }}
+    />
+  )
+}
+
 const Results: FC = () => {
   const [search, setSearch] = useState('')
-  const {result, status} = useContext(ResultsContext)
-  const [vizState, setVizState] = useState('table')
-  const [viewProperties, setViewProperties] = useState(
-    SUPPORTED_VISUALIZATIONS['xy'].initial
-  )
+  const {result, status, view, setView} = useContext(ResultsContext)
+  const {launch} = useContext(SidebarContext)
 
   let resultView
 
   if (status === RemoteDataState.NotStarted) {
     resultView = <EmptyResults />
   } else {
-    if (vizState === 'table') {
+    if (view.state === 'table') {
       resultView = (
         <View
           loading={status}
@@ -91,7 +106,7 @@ const Results: FC = () => {
         <div style={{height: '100%', width: '100%', padding: 12}}>
           <View
             loading={status}
-            properties={viewProperties}
+            properties={view.properties}
             result={result.parsed}
           />
         </div>
@@ -101,12 +116,18 @@ const Results: FC = () => {
 
   const dataExists = result.parsed && Object.entries(result.parsed).length
   const updateType = viewType => {
-    setViewProperties(SUPPORTED_VISUALIZATIONS[viewType].initial)
+    setView({
+      state: 'graph',
+      properties: SUPPORTED_VISUALIZATIONS[viewType].initial,
+    })
+  }
+
+  const launcher = () => {
+    launch(<WrappedOptions />)
   }
-  const launcher = () => {}
 
   const tableHeader =
-    vizState === 'table' ? (
+    view.state === 'table' ? (
       <>
         <div style={{width: '300px'}}>
           <SearchWidget
@@ -125,10 +146,10 @@ const Results: FC = () => {
     ) : null
 
   const vizHeader =
-    vizState === 'graph' ? (
+    view.state === 'graph' ? (
       <>
         <ViewTypeDropdown
-          viewType={viewProperties.type}
+          viewType={view.properties.type}
           onUpdateType={updateType}
         />
         <Button
@@ -161,17 +182,17 @@ const Results: FC = () => {
                   id="table"
                   name="viz-setting"
                   value="table"
-                  active={vizState === 'table'}
-                  onClick={setVizState}
+                  active={view.state === 'table'}
+                  onClick={state => setView({...view, state})}
                 >
                   Table
                 </SelectGroup.Option>
                 <SelectGroup.Option
                   id="graph"
                   name="viz-setting"
                   value="graph"
-                  active={vizState === 'graph'}
-                  onClick={setVizState}
+                  active={view.state === 'graph'}
+                  onClick={state => setView({...view, state})}
                 >
                   Graph
                 </SelectGroup.Option>

src/dataExplorer/components/ResultsContext.tsx

@@ -1,24 +1,39 @@
 import React, {FC, createContext, useState, useRef, useEffect} from 'react'
 import {FluxResult} from 'src/types/flows'
-import {RemoteDataState} from 'src/types'
+import {RemoteDataState, ViewProperties} from 'src/types'
+import {SUPPORTED_VISUALIZATIONS} from 'src/visualization'
+
+interface View {
+  state: 'table' | 'graph'
+  properties: ViewProperties
+}
 
 interface ResultsContextType {
   status: RemoteDataState
   result: FluxResult
   time: number
+  view: View
 
   setStatus: (status: RemoteDataState) => void
   setResult: (result: FluxResult) => void
+  setView: (view: View) => void
 }
 
-export const ResultsContext = createContext<ResultsContextType>({
+const DEFAULT_STATE: ResultsContextType = {
   status: RemoteDataState.NotStarted,
   result: {} as FluxResult,
   time: null,
+  view: {
+    state: 'table',
+    properties: SUPPORTED_VISUALIZATIONS['xy'].initial,
+  },
 
   setStatus: _ => {},
   setResult: _ => {},
-})
+  setView: _ => {},
+}
+
+export const ResultsContext = createContext<ResultsContextType>(DEFAULT_STATE)
 
 export const ResultsProvider: FC = ({children}) => {
   const [result, setResult] = useState<FluxResult>({} as FluxResult)
@@ -28,6 +43,11 @@ export const ResultsProvider: FC = ({children}) => {
     RemoteDataState.NotStarted
   )
 
+  // for display, should be moved
+  const [view, setView] = useState<View>(
+    JSON.parse(JSON.stringify(DEFAULT_STATE.view))
+  )
+
   useEffect(() => {
     let running = false
     const check = () => {
@@ -66,9 +86,11 @@ export const ResultsProvider: FC = ({children}) => {
         status,
         result,
         time,
+        view,
 
         setStatus,
         setResult,
+        setView,
       }}
     >
       {children}

src/dataExplorer/components/SidePane.scss

@@ -0,0 +1,30 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.container-right-side-bar {
+  margin-left: $cf-space-s;
+  width: inherit;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .flux-toolbar {
+    flex-direction: column;
+  }
+}
+
+.flux-builder-sidebar--buttons {
+  text-align: right;
+}
+
+.flux-builder-sidebar--menu {
+  padding-top: $cf-space-2xs;
+  height: calc(
+    100% - 30px
+  ); // this is due to a scrollbar issue where the height of the button above it makes the 100% height unreachable: https://github.com/influxdata/ui/issues/2474
+}
+
+.flux-builder-sidebar--menu-wrapper {
+  width: calc(100% - 16px);
+  padding-bottom: 20px;
+}

src/dataExplorer/components/Sidebar.scss

@@ -1,25 +1,31 @@
 import React, {FC, useContext, useCallback} from 'react'
+import {DapperScrollbars} from '@influxdata/clockface'
 
 // Components
 import SelectorTitle from 'src/dataExplorer/components/SelectorTitle'
-import {EditorContext} from 'src/shared/contexts/editor'
 import Functions from 'src/shared/components/GroupedFunctionsList'
 import DynamicFunctions from 'src/shared/components/DynamicFunctionsList'
 
+// Contexts
+import {SidebarContext} from 'src/dataExplorer/context/sidebar'
+import {EditorContext} from 'src/shared/contexts/editor'
+
+// Types
 import {FluxFunction, FluxToolbarFunction} from 'src/types'
 
 // Utils
 import {event} from 'src/cloud/utils/reporting'
 import {CLOUD} from 'src/shared/constants'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 
-import './SidePane.scss'
+import './Sidebar.scss'
 
 const TOOLTIP = `The flux standard library contains several packages, \
 functions, and variables which may be useful when constructing your flux query.`
 
-const SidePane: FC = () => {
+const Sidebar: FC = () => {
   const {injectFunction} = useContext(EditorContext)
+  const {visible, menu, clear} = useContext(SidebarContext)
 
   const inject = useCallback(
     (fn: FluxFunction | FluxToolbarFunction) => {
@@ -39,6 +45,35 @@ const SidePane: FC = () => {
     browser = <DynamicFunctions onSelect={inject} />
   }
 
+  if (!visible && !menu) {
+    return null
+  }
+
+  if (menu) {
+    return (
+      <div className="container-right-side-bar">
+        <div className="flux-builder-sidebar--buttons">
+          <button
+            className="cf-overlay--dismiss"
+            type="button"
+            onClick={() => {
+              clear()
+            }}
+          />
+        </div>
+        <div className="flux-builder-sidebar--menu">
+          <DapperScrollbars
+            noScrollX={true}
+            thumbStopColor="gray"
+            thumbStartColor="gray"
+          >
+            <div className="flux-builder-sidebar--menu-wrapper">{menu}</div>
+          </DapperScrollbars>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="container-right-side-bar">
       <SelectorTitle title="Flux library" info={TOOLTIP} />
@@ -47,4 +82,4 @@ const SidePane: FC = () => {
   )
 }
 
-export default SidePane
+export default Sidebar