feat: persist more info around the query builder (#4873)

Author: drdelambre

src/dataExplorer/components/Results.tsx

@@ -168,6 +168,20 @@ const Results: FC = () => {
       </>
     ) : null
 
+  const updateViewState = state => {
+    if (state === 'graph') {
+      setView({
+        state: 'graph',
+        properties: SUPPORTED_VISUALIZATIONS['xy'].initial,
+      })
+    } else {
+      setView({
+        state: 'table',
+        properties: SUPPORTED_VISUALIZATIONS['simple-table'].initial,
+      })
+    }
+  }
+
   return (
     <div className="data-explorer-results">
       <FlexBox direction={FlexDirection.Column} style={{height: '100%'}}>
@@ -183,7 +197,7 @@ const Results: FC = () => {
                   name="viz-setting"
                   value="table"
                   active={view.state === 'table'}
-                  onClick={state => setView({...view, state})}
+                  onClick={updateViewState}
                 >
                   Table
                 </SelectGroup.Option>
@@ -192,7 +206,7 @@ const Results: FC = () => {
                   name="viz-setting"
                   value="graph"
                   active={view.state === 'graph'}
-                  onClick={state => setView({...view, state})}
+                  onClick={updateViewState}
                 >
                   Graph
                 </SelectGroup.Option>

src/dataExplorer/components/ResultsContext.tsx

@@ -1,13 +1,30 @@
 import React, {FC, createContext, useState, useRef, useEffect} from 'react'
+import {createLocalStorageStateHook} from 'use-local-storage-state'
+
 import {FluxResult} from 'src/types/flows'
-import {RemoteDataState, ViewProperties} from 'src/types'
+import {
+  RemoteDataState,
+  ViewProperties,
+  SimpleTableViewProperties,
+} from 'src/types'
 import {SUPPORTED_VISUALIZATIONS} from 'src/visualization'
 
 interface View {
   state: 'table' | 'graph'
   properties: ViewProperties
 }
 
+const useLocalStorageState = createLocalStorageStateHook(
+  'dataExplorer.results',
+  {
+    state: 'table',
+    properties: {
+      type: 'simple-table',
+      showAll: false,
+    } as SimpleTableViewProperties,
+  } as View
+)
+
 interface ResultsContextType {
   status: RemoteDataState
   result: FluxResult
@@ -44,9 +61,7 @@ export const ResultsProvider: FC = ({children}) => {
   )
 
   // for display, should be moved
-  const [view, setView] = useState<View>(
-    JSON.parse(JSON.stringify(DEFAULT_STATE.view))
-  )
+  const [view, setView] = useLocalStorageState()
 
   useEffect(() => {
     let running = false

src/dataExplorer/components/ResultsPane.tsx

@@ -35,7 +35,7 @@ const FluxMonacoEditor = lazy(() =>
   import('src/shared/components/FluxMonacoEditor')
 )
 const useLocalStorageState = createLocalStorageStateHook(
-  'dataExplorerQuery',
+  'dataExplorer.query',
   ''
 )
 

src/dataExplorer/context/fluxQueryBuilder.tsx

@@ -6,6 +6,7 @@ import React, {
   useContext,
   useCallback,
 } from 'react'
+import {createLocalStorageStateHook} from 'use-local-storage-state'
 
 // Context
 import {MeasurementsContext} from 'src/dataExplorer/context/measurements'
@@ -15,6 +16,14 @@ import {TagsContext} from 'src/dataExplorer/context/tags'
 // Types
 import {Bucket} from 'src/types'
 
+const useLocalStorageState = createLocalStorageStateHook(
+  'dataExplorer.schema',
+  {
+    bucket: null,
+    measurement: null,
+  }
+)
+
 const DEBOUNCE_TIMEOUT = 500
 let timer
 type NOOP = () => void
@@ -57,15 +66,15 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   const {getTagKeys, resetTags} = useContext(TagsContext)
 
   // States
-  const [selectedBucket, setSelectedBucket] = useState(null)
-  const [selectedMeasurement, setSelectedMeasurement] = useState('')
+  const [selection, setSelection] = useLocalStorageState()
   const [searchTerm, setSearchTerm] = useState('')
 
   const handleSelectBucket = (bucket: Bucket): void => {
-    setSelectedBucket(bucket)
+    selection.bucket = bucket
+    selection.measurement = ''
+    setSelection({...selection})
 
     // Reset measurement, tags, and fields
-    setSelectedMeasurement('')
     resetFields()
     resetTags()
 
@@ -74,35 +83,36 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
   }
 
   const handleSelectMeasurement = (measurement: string): void => {
-    setSelectedMeasurement(measurement)
+    selection.measurement = measurement
+    setSelection({...selection})
 
     // Reset fields and tags
     resetFields()
     resetTags()
 
     // Get fields and tags
-    getFields(selectedBucket, measurement)
-    getTagKeys(selectedBucket, measurement)
+    getFields(selection.bucket, measurement)
+    getTagKeys(selection.bucket, measurement)
   }
 
   const handleSearchTerm = useCallback(
     (searchTerm: string): void => {
       setSearchTerm(searchTerm)
       debouncer(() => {
-        getFields(selectedBucket, selectedMeasurement, searchTerm)
-        getTagKeys(selectedBucket, selectedMeasurement, searchTerm)
+        getFields(selection.bucket, selection.measurement, searchTerm)
+        getTagKeys(selection.bucket, selection.measurement, searchTerm)
       })
     },
-    [getFields, getTagKeys, selectedBucket, selectedMeasurement]
+    [getFields, getTagKeys, selection.bucket, selection.measurement]
   )
 
   return useMemo(
     () => (
       <FluxQueryBuilderContext.Provider
         value={{
           // Schema
-          selectedBucket,
-          selectedMeasurement,
+          selectedBucket: selection.bucket,
+          selectedMeasurement: selection.measurement,
           searchTerm,
           selectBucket: handleSelectBucket,
           selectMeasurement: handleSelectMeasurement,
@@ -114,8 +124,8 @@ export const FluxQueryBuilderProvider: FC = ({children}) => {
     ),
     [
       // Schema
-      selectedBucket,
-      selectedMeasurement,
+      selection.bucket,
+      selection.measurement,
       searchTerm,
 
       children,