Parse Error UI Improvement (#3085)

* Handle Error Case Differently
* Handle missing properties in query info
* Do not show the histogram if there is a parse error
* Loosen missing pool error detection
* Improve histogram error message

apps/zui/src/js/state/QueryInfo/selectors.ts

@@ -9,12 +9,17 @@ export const get = activeTabSelect((tab) => {
 export const getParseError = createSelector(get, (info) => info.error)
 export const getIsParsed = createSelector(get, (info) => info.isParsed)
 export const getPoolName = createSelector(get, (info) => {
-  let source = find(info.sources, {kind: "Pool"})
+  let source = find(info.sources || [], {kind: "Pool"})
   return source ? source.name : null
 })
 export const getGroupByKeys = createSelector(get, (info) => {
-  return info.channels[0].aggregation_keys
+  const {channels} = info
+  if (channels) {
+    return channels[0].aggregation_keys || []
+  } else {
+    return []
+  }
 })
-export const hasAggregation = createSelector(get, (info) => {
-  return !!info.channels[0].aggregation_keys
+export const hasAggregation = createSelector(getGroupByKeys, (keys) => {
+  return keys.length > 0
 })

apps/zui/src/models/browser-tab.ts

@@ -49,7 +49,6 @@ export class BrowserTab extends DomainModel<Attrs> {
         this.history.index = -1
       }
       this.history.push(pathname)
-      console.log(this.history)
     }
   }
 

apps/zui/src/views/histogram-pane/index.tsx

@@ -8,13 +8,15 @@ import {Toolbar} from "src/components/toolbar"
 import {Title} from "./title"
 import {Resizer} from "./resizer"
 import {useRef} from "react"
+import QueryInfo from "src/js/state/QueryInfo"
 
 export function HistogramPane() {
   const {Parent, width = 0, height = 0} = useParentSize()
   const show = useSelector(Layout.getShowHistogram)
   const chartHeight = useSelector(Layout.getChartHeight)
+  const parseError = useSelector(QueryInfo.getParseError)
   const ref = useRef<HTMLDivElement>()
-  if (!show) return null
+  if (!show || parseError) return null
 
   return (
     <div

apps/zui/src/views/histogram-pane/run-query.ts

@@ -40,7 +40,9 @@ export const runHistogramQuery = createHandler(
       async function getPoolRange() {
         const queryText = `from ${poolId} | min(${timeField}), max(${timeField})`
         const resp = await query(queryText, {signal})
-        const [{min, max}] = await resp.js()
+        const data = await resp.js()
+        if (data.length == 0) return null
+        const [{min, max}] = data
         if (!(min instanceof Date && max instanceof Date)) return null
         return [min, max] as [Date, Date]
       }

apps/zui/src/views/results-pane/errors/missing-pool-error.tsx

@@ -44,7 +44,7 @@ const Card = styled.section`
 `
 
 export function isMissingPoolError(e: unknown) {
-  return e === "no pool name given"
+  return typeof e === "string" && /no pool name given/.test(e)
 }
 
 function PoolsList({pools}: {pools: Pool[]}) {

apps/zui/src/views/session-page/handler.ts

@@ -66,18 +66,16 @@ export class SessionPageHandler extends ViewHandler {
     const history = this.select(Current.getHistory)
 
     fetchQueryInfo(program).then((info) => {
-      if (info.error) {
-        return
-      }
       this.dispatch(QueryInfo.set({isParsed: true, ...info}))
       const poolName = this.select(QueryInfo.getPoolName)
       this.invoke("updatePluginSessionOp", {poolName, program})
       const pool = this.select(Pools.getByName(lakeId, poolName))
+
       if (pool && !pool.hasSpan()) {
         this.dispatch(syncPool(pool.id, lakeId))
       }
 
-      if (history.action === "PUSH") {
+      if (!info.error && history.action === "PUSH") {
         session.pushHistory()
       }
     })