Only Render Histogram if you Can (#3094)

apps/zui/src/components/zed-editor-handler.ts

@@ -1,5 +1,14 @@
 export class ZedEditorHandler {
-  constructor(public monaco, public editor) {}
+  public monaco
+  public editor
+  public props
+
+  onMount(editor, monaco) {
+    this.editor = editor
+    this.monaco = monaco
+    if (this.props.autoFocus) editor.focus()
+    this.setErrors(this.props.markers)
+  }
 
   focus() {
     if (!this.mounted) return

apps/zui/src/components/zed-editor.tsx

@@ -1,5 +1,5 @@
-import {Editor, useMonaco} from "@monaco-editor/react"
-import {useEffect, useMemo, useRef} from "react"
+import {Editor} from "@monaco-editor/react"
+import {useEffect, useRef} from "react"
 import {useSelector} from "react-redux"
 import {cmdOrCtrl} from "src/app/core/utils/keyboard"
 import Config from "src/js/state/Config"
@@ -34,23 +34,19 @@ export function ZedEditor(props: {
   autoFocus?: boolean
   markers?: Marker[]
 }) {
-  const ref = useRef<any>()
   const {isDark} = useColorScheme()
-  const monaco = useMonaco()
-  const handler = useMemo(
-    () => new ZedEditorHandler(monaco, ref.current),
-    [monaco, ref.current]
-  )
+  const handler = useRef(new ZedEditorHandler()).current
+
+  handler.props = props
 
-  useEffect(() => handler.focus(), [props.path, props.value, handler])
-  useEffect(() => handler.setErrors(props.markers), [props.markers, handler])
+  useEffect(() => handler.setErrors(props.markers), [props.markers])
 
   return (
     <Editor
       height="100%"
       language="zed"
       onChange={props.onChange}
-      onMount={(editor) => (ref.current = editor)}
+      onMount={handler.onMount.bind(handler)}
       path={props.path}
       theme={isDark ? "vs-dark" : "vs-light"}
       value={props.value}

apps/zui/src/domain/session/handlers/navigation.ts

@@ -61,3 +61,8 @@ export const openVirusTotal = createHandler(
     }
   }
 )
+
+export const focusEditor = createHandler("session.focusEditor", () => {
+  // @ts-ignore If we split tabs, or have more than one editor, rethink this
+  document.querySelector("[data-testid=main-editor] textarea")?.focus()
+})

apps/zui/src/domain/session/messages.ts

@@ -20,4 +20,5 @@ export type SessionHandlers = {
   "session.showWhoIs": typeof handlers.showWhoIs
   "session.openVirusTotal": typeof handlers.openVirusTotal
   "session.showValueDetails": typeof handlers.showValueDetails
+  "session.focusEditor": typeof handlers.focusEditor
 }

apps/zui/src/electron/windows/search/app-menu.ts

@@ -201,9 +201,9 @@ export function compileTemplate(
         click: () => window.send("clearPins"),
       },
       {
-        label: "Focus Search Bar",
+        label: "Focus Editor",
         accelerator: "CmdOrCtrl+L",
-        click: () => window.send("focusSearchBar"),
+        click: () => sendToFocusedWindow("session.focusEditor"),
       },
       __,
       {

apps/zui/src/js/state/Histogram/reducer.ts

@@ -9,11 +9,13 @@ const slice = createSlice({
     range: null as null | DateTuple,
     nullXCount: 0,
     missingXCount: 0,
+    canRender: true,
   },
   reducers: {
     init(s) {
       s.nullXCount = 0
       s.missingXCount = 0
+      s.canRender = true
     },
     setRange(s, a: PayloadAction<DateTuple | null>) {
       s.range = a.payload
@@ -27,6 +29,9 @@ const slice = createSlice({
     setMissingXCount(s, a: PayloadAction<number>) {
       s.missingXCount = a.payload
     },
+    setCanRender(s, a: PayloadAction<boolean>) {
+      s.canRender = a.payload
+    },
   },
 })
 

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

@@ -8,7 +8,7 @@ export const getRange = activeTabSelect((t) => t.histogram.range)
 export const getInterval = activeTabSelect((t) => t.histogram.interval)
 
 export const getNullXCount = activeTabSelect((t) => t.histogram.nullXCount)
-
+export const getCanRender = activeTabSelect((t) => t.histogram.canRender)
 export const getMissingXCount = activeTabSelect(
   (t) => t.histogram.missingXCount
 )

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

@@ -4,6 +4,7 @@ import Layout from "src/js/state/Layout"
 import {SettingsButton} from "./settings-button"
 import {useParentSize} from "src/util/hooks/use-parent-size"
 import {Histogram} from "./histogram"
+import HistogramState from "src/js/state/Histogram"
 import {Toolbar} from "src/components/toolbar"
 import {Title} from "./title"
 import {Resizer} from "./resizer"
@@ -15,8 +16,9 @@ export function HistogramPane() {
   const show = useSelector(Layout.getShowHistogram)
   const chartHeight = useSelector(Layout.getChartHeight)
   const parseError = useSelector(QueryInfo.getParseError)
+  const canRender = useSelector(HistogramState.getCanRender)
   const ref = useRef<HTMLDivElement>()
-  if (!show || parseError) return null
+  if (!show || !canRender || parseError) return null
 
   return (
     <div

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

@@ -26,6 +26,7 @@ export const runHistogramQuery = createHandler(
       const {timeField, colorField} = select((s) =>
         PoolSettings.findWithDefaults(s, poolId)
       )
+
       function getPinRange() {
         const rangePin = version.pins.find(
           (pin: QueryPin) =>
@@ -77,6 +78,13 @@ export const runHistogramQuery = createHandler(
         //setup
         dispatch(Results.init({id, tabId, key, query: ""}))
         dispatch(Histogram.init())
+
+        // Check if there is a pool
+        if (!poolId) {
+          dispatch(Histogram.setCanRender(false))
+          return
+        }
+
         // run
         const range = getPinRange() || (await getPoolRange())
         if (!range)

apps/zui/src/views/session-page/editor.tsx

@@ -27,6 +27,7 @@ export function Editor() {
         path={tabId}
         testId="main-editor"
         markers={markers}
+        autoFocus
       />
       <EditorResizer container={container} />
     </div>