feat(6483): Separate queries and results, for graph versus table. (#6484)

* chore: results context is a context, not a component.

* feat(6483): make a singular resultsView, whereas we have a separate results context (which we can then have multiple)

* feat(6483): disentangle the TableResults view from the GraphResults view

* feat(6483): have childResults view subscribe to parent results, such that an graph related subqueries are overwritten with changes to editor query.

* feat(6483): add viewOptions, and have childResults subscribe to viewOptions such that a subquery is issued if needed.

* fix(6483): ChildResultsContext subscribes to PersistanceContext, therefore need to nest correctly. Trigger graph subquery on change from parent, as noticed via results change (not queryText change -- as that will be triggered too often).

* feat(6483): modify sqlQuery based on SqlQueryModifiers, in the query context

* chore(6483): cleanup types, naming conventions, use of placeholder components. Reduce re-renders. Clarify conditional expression.

Author: wiedld

src/dataExplorer/components/DeleteScript.tsx

@@ -8,7 +8,7 @@ import {useSelector, useDispatch} from 'react-redux'
 import {getOrg} from 'src/organizations/selectors'
 import {notify} from 'src/shared/actions/notifications'
 import {deleteScriptFail} from 'src/shared/copy/notifications/categories/scripts'
-import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+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'

src/dataExplorer/components/FluxQueryBuilder.tsx

@@ -19,7 +19,9 @@ import {
 } 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 {ResultsProvider, ResultsContext} from 'src/dataExplorer/context/results'
+import {ChildResultsProvider} from 'src/dataExplorer/context/results/childResults'
+import {ResultsViewProvider} from 'src/dataExplorer/context/resultsView'
 import {SidebarProvider} from 'src/dataExplorer/context/sidebar'
 import {
   PersistanceProvider,
@@ -31,7 +33,6 @@ import Sidebar from 'src/dataExplorer/components/Sidebar'
 import Schema from 'src/dataExplorer/components/Schema'
 import SaveAsScript from 'src/dataExplorer/components/SaveAsScript'
 import {QueryContext} from 'src/shared/contexts/query'
-import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
 import {getOrg, isOrgIOx} from 'src/organizations/selectors'
 import {RemoteDataState} from 'src/types'
 import {SCRIPT_EDITOR_PARAMS} from 'src/dataExplorer/components/resources'
@@ -222,9 +223,13 @@ const FluxQueryBuilder: FC = () => {
 export default () => (
   <QueryProvider>
     <ResultsProvider>
-      <PersistanceProvider>
-        <FluxQueryBuilder />
-      </PersistanceProvider>
+      <ResultsViewProvider>
+        <PersistanceProvider>
+          <ChildResultsProvider>
+            <FluxQueryBuilder />
+          </ChildResultsProvider>
+        </PersistanceProvider>
+      </ResultsViewProvider>
     </ResultsProvider>
   </QueryProvider>
 )

src/dataExplorer/components/OpenScript.tsx

@@ -17,7 +17,7 @@ import {CLOUD} from 'src/shared/constants'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 import {getOrg} from 'src/organizations/selectors'
-import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {ResultsContext} from 'src/dataExplorer/context/results'
 import {QueryContext} from 'src/shared/contexts/query'
 import {debouncer} from 'src/dataExplorer/shared/utils'
 

src/dataExplorer/components/QueryTime.tsx

@@ -1,5 +1,5 @@
 import React, {FC, useContext} from 'react'
-import {ResultsContext} from 'src/dataExplorer/components/ResultsContext'
+import {ResultsContext} from 'src/dataExplorer/context/results'
 import {RemoteDataState} from 'src/types'
 
 import 'src/dataExplorer/components/QueryTime.scss'