fix(web-console): prevent next query to be run whne the first one is clicked

Author: emrberk

packages/browser-tests/cypress/commands.js

@@ -132,6 +132,12 @@ Cypress.Commands.add("runLineWithResponse", (response) => {
   cy.wait("@exec");
 });
 
+Cypress.Commands.add("clickLine", (n) => {
+  cy.get(".monaco-editor .view-line")
+    .eq(n - 1)
+    .click();
+});
+
 Cypress.Commands.add("clickRun", () => {
   cy.intercept("/exec*").as("exec");
   return cy.get("button").contains("Run").click().wait("@exec");

packages/browser-tests/cypress/integration/console/editor.spec.js

@@ -6,6 +6,21 @@ const baseUrl = `http://localhost:9999${contextPath}`;
 const getTabDragHandleByTitle = (title) =>
   `.chrome-tab[data-tab-title="${title}"] .chrome-tab-drag-handle`;
 
+describe.only("run query", () => {
+  beforeEach(() => {
+    cy.loadConsoleWithAuth();
+    cy.getEditorContent().should("be.visible");
+    cy.clearEditor();
+  });
+
+  it("should correctly run query in the first line", () => {
+    cy.typeQuery("select 1;\n\nselect 2;");
+    cy.clickLine(1);
+    cy.clickRun();
+    cy.getGridRow(0).should("contain", "1");
+  });
+});
+
 describe("appendQuery", () => {
   const consoleConfiguration = {
     savedQueries: [

packages/browser-tests/questdb

@@ -185,6 +185,13 @@ const MonacoEditor = () => {
     editor: editor.IStandaloneCodeEditor,
   ) => {
     const queryAtCursor = getQueryFromCursor(editor)
+    
+    // Clear decorations if queryAtCursor is undefined
+    if (!queryAtCursor) {
+      decorationsRef.current?.clear()
+      return
+    }
+    
     const model = editor.getModel()
     if (queryAtCursor && model !== null) {
       const activeBufferId = activeBufferRef.current.id as number

packages/web-console/src/scenes/Editor/Monaco/index.tsx

@@ -70,13 +70,13 @@ export const getQueryFromCursor = (
   let startRow = 0
   let startCol = 0
   let startPos = -1
-  let sql = null
+  let nextSql = null
   let inQuote = false
 
   if (!position) return
 
   for (let i = 0; i < text.length; i++) {
-    if (sql !== null) {
+    if (nextSql !== null) {
       break
     }
 
@@ -97,6 +97,8 @@ export const getQueryFromCursor = (
             row: startRow,
             col: startCol,
             position: startPos,
+            endRow: row,
+            endCol: column,
             limit: i,
           })
           startRow = row
@@ -105,7 +107,14 @@ export const getQueryFromCursor = (
           column++
         } else {
           // empty queries, aka ;; , make sql.length === 0
-          sql = text.substring(startPos === -1 ? 0 : startPos, i)
+          nextSql = {
+            row: startRow,
+            col: startCol,
+            position: startPos,
+            endRow: row,
+            endCol: column,
+            limit: i,
+          }
         }
         break
       }
@@ -130,7 +139,6 @@ export const getQueryFromCursor = (
           startRow = row
           startCol = column
           startPos = i + 1
-          column++
         }
         break
       }
@@ -148,28 +156,52 @@ export const getQueryFromCursor = (
     }
   }
 
-  if (sql === null) {
-    sql = startPos === -1 ? text : text.substring(startPos)
-  }
-
-  if (sql.length === 0) {
-    const prev = sqlTextStack.pop()
+  // lastStackItem is the last query that is completed before the current cursor position.
+  // nextSql is the next query that is not completed before the current cursor position, or started after the current cursor position.
+  const normalizedCurrentRow = position.lineNumber - 1
+  const lastStackItem = sqlTextStack.length > 0 ? sqlTextStack[sqlTextStack.length - 1] : null
 
-    if (prev) {
+  if (!lastStackItem && !nextSql) {
+    return
+  }
+  const lastStackItemRowRange = lastStackItem ? {
+    start: lastStackItem.row,
+    end: lastStackItem.endRow,
+  } : null
+  const nextSqlRowRange = nextSql ? {
+    start: nextSql.row,
+    end: nextSql.endRow,
+  } : null
+  const isInLastStackItemRowRange = lastStackItemRowRange && normalizedCurrentRow >= lastStackItemRowRange.start && normalizedCurrentRow <= lastStackItemRowRange.end
+  const isInNextSqlRowRange = nextSqlRowRange && normalizedCurrentRow >= nextSqlRowRange.start && normalizedCurrentRow <= nextSqlRowRange.end
+
+  if (isInLastStackItemRowRange && !isInNextSqlRowRange) {
+    return {
+      query: text.substring(lastStackItem!.position, lastStackItem!.limit),
+      row: lastStackItem!.row,
+      column: lastStackItem!.endCol,
+    }
+  } else if (isInNextSqlRowRange && !isInLastStackItemRowRange) {
+    return {
+      query: text.substring(nextSql!.position, nextSql!.limit),
+      row: nextSql!.row,
+      column: nextSql!.col,
+    }
+  } else if (isInLastStackItemRowRange && isInNextSqlRowRange) {
+    const lastStackItemEndCol = lastStackItem!.endCol
+    const normalizedCurrentCol = position.column - 1
+    if (normalizedCurrentCol > lastStackItemEndCol + 1) {
       return {
-        column: prev.col,
-        query: text.substring(prev.position, prev.limit),
-        row: prev.row,
+        query: text.substring(nextSql!.position, nextSql!.limit),
+        row: nextSql!.row,
+        column: nextSql!.col,
       }
     }
-
-    return
-  }
-
-  return {
-    column: startCol,
-    query: sql,
-    row: startRow,
+    return {
+      query: text.substring(lastStackItem!.position, lastStackItem!.limit),
+      row: lastStackItem!.row,
+      column: lastStackItem!.endCol,
+    }
   }
 }