fix: sql graph optimizations, handling various edge cases with data returned (#6558)

* fix: have flux language components be behind own flag, and do not hide the sidebar for sql (because we use it for graphOptions).

* fix: keep graph options sidebar often under various edge cases, and provide meaningful feedback.

fix: surface graph subquery errors to the user

Author: wiedld

cypress/e2e/shared/editor.test.ts

@@ -127,6 +127,7 @@ describe('Editor+LSP communication', () => {
         newDataExplorer: true,
         schemaComposition: false,
         saveAsScript: true,
+        enableFluxInScriptBuilder: true,
       })
       cy.get('@org').then(({id}: Organization) => {
         cy.visit(`/orgs/${id}/data-explorer`)

cypress/e2e/shared/scriptQueryBuilder.flux.test.ts

@@ -171,6 +171,7 @@ describe('Script Builder', () => {
       loginWithFlags({
         schemaComposition: false,
         newDataExplorer: true,
+        enableFluxInScriptBuilder: true,
       }).then(() => {
         cy.getByTestID('editor-sync--toggle').should('not.exist')
         cy.getByTestID('script-query-builder--menu').contains('New Script')
@@ -325,6 +326,7 @@ describe('Script Builder', () => {
         schemaComposition: true,
         newDataExplorer: true,
         saveAsScript: true,
+        enableFluxInScriptBuilder: true,
       }).then(() => {
         clearSession()
         cy.getByTestID('editor-sync--toggle')

cypress/e2e/shared/scriptQueryBuilder.results.test.ts

@@ -170,6 +170,7 @@ describe('Script Builder', () => {
         schemaComposition: true,
         newDataExplorer: true,
         saveAsScript: true,
+        enableFluxInScriptBuilder: true,
       }).then(() => {
         cy.get('@org').then(({id: orgID}: Organization) => {
           route = `/orgs/${orgID}/data-explorer`

src/dataExplorer/components/Results.tsx

@@ -158,11 +158,26 @@ const TableResults: FC<{search: string}> = ({search}) => {
   )
 }
 
+const ErrorResults: FC<{error: string}> = ({error}) => {
+  return (
+    <div className="data-explorer-results--empty">
+      <div className="data-explorer-results--empty-header">
+        <h3>Graph Query Results</h3>
+        <p>{error}</p>
+      </div>
+    </div>
+  )
+}
+
 const GraphResults: FC = () => {
   const {view} = useContext(ResultsViewContext)
   const {result, status} = useContext(ChildResultsContext)
   const {range} = useContext(PersistanceContext)
 
+  if (result.error) {
+    return <ErrorResults error={result.error} />
+  }
+
   return (
     <div className="data-explorer-results--view">
       <SpinnerContainer loading={status} spinnerComponent={<TechnoSpinner />}>
@@ -179,11 +194,13 @@ const GraphResults: FC = () => {
 }
 
 const WrappedOptions: FC = () => {
+  const {result: parentResult} = useContext(ResultsContext)
   const {result} = useContext(ChildResultsContext)
   const {view, setView, selectViewOptions, viewOptions, selectedViewOptions} =
     useContext(ResultsViewContext)
   const {resource} = useContext(PersistanceContext)
-  const dataExists = !!result?.parsed
+  const graphDataExists = !!result?.parsed
+  const parentDataExists = !!parentResult?.parsed
 
   const updateChildResults = update => {
     setView({
@@ -195,10 +212,6 @@ const WrappedOptions: FC = () => {
     })
   }
 
-  if (!dataExists) {
-    return null
-  }
-
   const subQueryOptions =
     resource?.language === LanguageType.SQL &&
     view.state == ViewStateType.Graph ? (
@@ -212,11 +225,23 @@ const WrappedOptions: FC = () => {
   return (
     <>
       {subQueryOptions}
-      <ViewOptions
-        properties={view.properties}
-        results={result.parsed}
-        update={updateChildResults}
-      />
+      {graphDataExists ? (
+        <ViewOptions
+          properties={view.properties}
+          results={result.parsed}
+          update={updateChildResults}
+        />
+      ) : (
+        <div className="view-options">
+          <p>Data cannot be graphed. Requires 2+ data points.</p>
+          {parentDataExists && viewOptions.smoothing.applied && (
+            <p>
+              If you are using Graph Smooth, please increase the percentage
+              retained or turn it off.
+            </p>
+          )}
+        </div>
+      )}
     </>
   )
 }
@@ -229,26 +254,25 @@ const NOT_SUPPORTED_GRAPH_TYPES = [
   SUPPORTED_VISUALIZATIONS['single-stat'].type,
 ]
 const GraphHeader: FC = () => {
-  const {view, setView, viewOptions} = useContext(ResultsViewContext)
+  const {view, setView} = useContext(ResultsViewContext)
   const {result} = useContext(ResultsContext)
   const {result: subQueryResult} = useContext(ChildResultsContext)
   const {launch, clear: closeSidebar} = useContext(SidebarContext)
 
-  const dataExists = !!result?.parsed
+  const dataExists =
+    !!result?.parsed && result.parsed.resultColumnNames.length > 0
 
   const launcher = () => {
     launch(<WrappedOptions />)
   }
+
   useEffect(() => {
     if (dataExists) {
       launcher()
-    }
-  }, [viewOptions])
-  useEffect(() => {
-    if (!dataExists) {
+    } else {
       closeSidebar()
     }
-  }, [dataExists])
+  }, [result])
 
   const updateType = viewType => {
     setView({

src/dataExplorer/components/ScriptQueryBuilder.tsx

@@ -68,7 +68,8 @@ const ScriptQueryBuilder: FC = () => {
   const org = useSelector(getOrg)
   const isNewIOxOrg =
     useSelector(selectIsNewIOxOrg) &&
-    !isFlagEnabled('showOldDataExplorerInNewIOx')
+    !isFlagEnabled('showOldDataExplorerInNewIOx') &&
+    !isFlagEnabled('enableFluxInScriptBuilder')
 
   const handleClear = useCallback(() => {
     cancel()
@@ -226,7 +227,7 @@ const ScriptQueryBuilder: FC = () => {
               <ResultsPane />
             </DraggableResizer.Panel>
             <DraggableResizer.Panel isCollapsible={true}>
-              {!isNewIOxOrg && <Sidebar />}
+              <Sidebar />
             </DraggableResizer.Panel>
           </DraggableResizer>
         </FlexBox>