multi buffer support in editor

packages/web-console/package.json

@@ -30,6 +30,8 @@
     "compare-versions": "^5.0.1",
     "core-js": "^3.22.8",
     "date-fns": "2.14.0",
+    "dexie": "^3.2.2",
+    "dexie-react-hooks": "^1.1.1",
     "docsearch.js": "2.6.3",
     "dotenv": "^10.0.0",
     "echarts": "^5.2.2",
@@ -53,7 +55,8 @@
     "sql-formatter": "^4.0.2",
     "styled-components": "5.1.1",
     "styled-icons": "10.2.1",
-    "throttle-debounce": "2.2.1"
+    "throttle-debounce": "2.2.1",
+    "usehooks-ts": "^2.7.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",

packages/web-console/src/providers/EditorProvider/index.tsx

@@ -3,53 +3,179 @@ import React, {
   MutableRefObject,
   PropsWithChildren,
   useContext,
+  useEffect,
   useRef,
+  useState,
 } from "react"
 import { editor } from "monaco-editor"
 import { Monaco } from "@monaco-editor/react"
 import {
   insertTextAtCursor,
   appendQuery,
+  QuestDBLanguageName,
 } from "../../scenes/Editor/Monaco/utils"
+import { fallbackBuffer, makeBuffer, bufferStore } from "../../store/buffers"
+import { db } from "../../store/db"
+import type { Buffer } from "../../store/buffers"
+
+import { useLiveQuery } from "dexie-react-hooks"
 
 type IStandaloneCodeEditor = editor.IStandaloneCodeEditor
 
-type ContextProps = {
-  editorRef: MutableRefObject<IStandaloneCodeEditor | null> | null
-  monacoRef: MutableRefObject<Monaco | null> | null
+export type EditorContext = {
+  editorRef: MutableRefObject<IStandaloneCodeEditor | null>
+  monacoRef: MutableRefObject<Monaco | null>
   insertTextAtCursor: (text: string) => void
-  getValue: () => void
   appendQuery: (query: string) => void
+  buffers: Buffer[]
+  activeBuffer: Buffer
+  setActiveBuffer: (buffer: Buffer) => Promise<void>
+  addBuffer: (
+    buffer?: Partial<Buffer>,
+    options?: { shouldSelectAll?: boolean },
+  ) => Promise<Buffer>
+  deleteBuffer: (id: number) => Promise<void>
+  updateBuffer: (id: number, buffer?: Partial<Buffer>) => Promise<void>
+  editorReadyTrigger: (editor: IStandaloneCodeEditor) => void
 }
 
 const defaultValues = {
-  editorRef: null,
-  monacoRef: null,
-  insertTextAtCursor: (text: string) => undefined,
-  getValue: () => undefined,
-  appendQuery: (query: string) => undefined,
+  editorRef: { current: null },
+  monacoRef: { current: null },
+  insertTextAtCursor: () => undefined,
+  appendQuery: () => undefined,
+  buffers: [],
+  activeBuffer: fallbackBuffer,
+  setActiveBuffer: () => Promise.resolve(),
+  addBuffer: () => Promise.resolve(fallbackBuffer),
+  deleteBuffer: () => Promise.resolve(),
+  updateBuffer: () => Promise.resolve(),
+  editorReadyTrigger: () => undefined,
 }
 
-const EditorContext = createContext<ContextProps>(defaultValues)
+const EditorContext = createContext<EditorContext>(defaultValues)
 
 export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
-  const editorRef = useRef<IStandaloneCodeEditor | null>(null)
-  const monacoRef = useRef<Monaco | null>(null)
-
-  /*
-    To avoid re-rendering components that subscribe to this context
-    we don't set value via a useState hook
-   */
-  const getValue = () => {
-    return editorRef.current?.getValue()
+  const editorRef = useRef<IStandaloneCodeEditor>(null)
+  const monacoRef = useRef<Monaco>(null)
+  const buffers = useLiveQuery(bufferStore.getAll, [])
+  const activeBufferId = useLiveQuery(
+    () => bufferStore.getActiveId(),
+    [],
+  )?.value
+
+  const [activeBuffer, setActiveBufferState] = useState<Buffer>(fallbackBuffer)
+
+  const ranOnce = useRef(false)
+  // this effect should run only once, after mount and after `buffers` and `activeBufferId` are ready from the db
+  useEffect(() => {
+    if (!ranOnce.current && buffers && activeBufferId) {
+      const buffer =
+        buffers?.find((buffer) => buffer.id === activeBufferId) ?? buffers[0]
+      setActiveBufferState(buffer)
+      ranOnce.current = true
+    }
+  }, [buffers, activeBufferId])
+
+  if (!buffers || !activeBufferId || activeBuffer === fallbackBuffer) {
+    return null
+  }
+
+  const setActiveBuffer = async (buffer: Buffer) => {
+    if (await bufferStore.getById(activeBuffer.id as number)) {
+      // check if buffer with activeBuffer.id exists, otherwise we might save editor state of a
+      // buffer which is being deleted
+      await updateBuffer(activeBuffer.id as number)
+    }
+    await bufferStore.setActiveId(buffer.id as number)
+    setActiveBufferState(buffer)
+    editorRef.current?.focus()
+    if (editorRef.current && monacoRef.current) {
+      const model = monacoRef.current?.editor.createModel(
+        buffer.value,
+        QuestDBLanguageName,
+      )
+      editorRef.current.setModel(model)
+    }
+    if (buffer.editorViewState) {
+      editorRef.current?.restoreViewState(buffer.editorViewState)
+    }
+  }
+
+  const addBuffer: EditorContext["addBuffer"] = async (
+    newBuffer,
+    { shouldSelectAll = false } = {},
+  ) => {
+    const currentDefaultTabNumbers = (
+      await db.buffers
+        .filter((buffer) => buffer.label.startsWith(fallbackBuffer.label))
+        .toArray()
+    )
+      .map((buffer) =>
+        buffer.label.slice(fallbackBuffer.label.length + /* whitespace */ 1),
+      )
+      .filter(Boolean)
+      .map((n) => parseInt(n, 10))
+      .sort()
+
+    const nextNumber = () => {
+      for (let i = 0; i <= currentDefaultTabNumbers.length; i++) {
+        const nextNumber = i + 1
+        if (!currentDefaultTabNumbers.includes(nextNumber)) {
+          return nextNumber
+        }
+      }
+    }
+
+    const buffer = makeBuffer({
+      ...newBuffer,
+      label: newBuffer?.label ?? `${fallbackBuffer.label} ${nextNumber()}`,
+    })
+    const id = await db.buffers.add(buffer)
+    await setActiveBuffer(buffer)
+    if (
+      editorRef.current &&
+      monacoRef.current &&
+      typeof buffer.value === "string"
+    ) {
+      const model = monacoRef.current?.editor.createModel(
+        buffer.value,
+        QuestDBLanguageName,
+      )
+      editorRef.current.setModel(model)
+
+      if (shouldSelectAll) {
+        editorRef.current?.setSelection(model.getFullModelRange())
+      }
+    }
+
+    return { id, ...buffer }
+  }
+
+  const updateBuffer: EditorContext["updateBuffer"] = async (id, payload) => {
+    const editorViewState = editorRef.current?.saveViewState()
+    await bufferStore.update(id, {
+      ...payload,
+      ...(editorViewState ? { editorViewState } : {}),
+    })
+  }
+
+  const deleteBuffer: EditorContext["deleteBuffer"] = async (id) => {
+    await bufferStore.delete(id)
+
+    // set new active buffer only when removing currently active buffer
+    const activeBufferId = (await bufferStore.getActiveId())?.value
+    if (typeof activeBufferId !== "undefined" && activeBufferId === id) {
+      const nextActive = await db.buffers.toCollection().last()
+      await setActiveBuffer(nextActive ?? fallbackBuffer)
+    }
   }
 
   return (
     <EditorContext.Provider
       value={{
         editorRef,
         monacoRef,
-        getValue,
         insertTextAtCursor: (text) => {
           if (editorRef?.current) {
             insertTextAtCursor(editorRef.current, text)
@@ -60,13 +186,23 @@ export const EditorProvider = ({ children }: PropsWithChildren<{}>) => {
             appendQuery(editorRef.current, text)
           }
         },
+        buffers,
+        activeBuffer,
+        setActiveBuffer,
+        addBuffer,
+        deleteBuffer,
+        updateBuffer,
+        editorReadyTrigger: (editor) => {
+          editor.focus()
+          if (activeBuffer.editorViewState) {
+            editor.restoreViewState(activeBuffer.editorViewState)
+          }
+        },
       }}
     >
       {children}
     </EditorContext.Provider>
   )
 }
 
-export const useEditor = () => {
-  return useContext(EditorContext)
-}
+export const useEditor = () => useContext(EditorContext)

packages/web-console/src/providers/LocalStorageProvider/index.tsx

@@ -42,7 +42,6 @@ const defaultConfig: LocalConfig = {
   editorLine: 10,
   isNotificationEnabled: true,
   notificationDelay: 5,
-  queryText: "",
   editorSplitterBasis: 350,
   resultsSplitterBasis: 350,
   exampleQueriesVisited: false,
@@ -54,7 +53,6 @@ type ContextProps = {
   editorLine: number
   notificationDelay: number
   isNotificationEnabled: boolean
-  queryText: string
   editorSplitterBasis: number
   resultsSplitterBasis: number
   updateSettings: (key: StoreKey, value: SettingsType) => void
@@ -67,7 +65,6 @@ const defaultValues: ContextProps = {
   editorLine: 1,
   isNotificationEnabled: true,
   notificationDelay: 5,
-  queryText: "",
   editorSplitterBasis: 350,
   resultsSplitterBasis: 350,
   updateSettings: (key: StoreKey, value: SettingsType) => undefined,
@@ -100,9 +97,6 @@ export const LocalStorageProvider = ({
       defaultConfig.notificationDelay,
     ),
   )
-  const [queryText, setQueryText] = useState<string>(
-    getValue(StoreKey.QUERY_TEXT),
-  )
   const [editorSplitterBasis, seteditorSplitterBasis] = useState<number>(
     parseInteger(
       getValue(StoreKey.EDITOR_SPLITTER_BASIS),
@@ -150,9 +144,6 @@ export const LocalStorageProvider = ({
           parseInteger(value, defaultConfig.notificationDelay),
         )
         break
-      case StoreKey.QUERY_TEXT:
-        setQueryText(value)
-        break
       case StoreKey.EDITOR_SPLITTER_BASIS:
         seteditorSplitterBasis(
           parseInteger(value, defaultConfig.editorSplitterBasis),
@@ -174,7 +165,6 @@ export const LocalStorageProvider = ({
         editorLine,
         isNotificationEnabled,
         notificationDelay,
-        queryText,
         editorSplitterBasis,
         resultsSplitterBasis,
         updateSettings,

packages/web-console/src/providers/LocalStorageProvider/types.ts

@@ -30,7 +30,6 @@ export type LocalConfig = {
   editorLine: number
   notificationDelay: number
   isNotificationEnabled: boolean
-  queryText: string
   editorSplitterBasis: number
   resultsSplitterBasis: number
   exampleQueriesVisited: boolean