fix(web-console): update query extracting logic from cursor

Author: emrberk

packages/browser-tests/cypress/commands.js

@@ -103,6 +103,10 @@ Cypress.Commands.add("getGridRow", (n) =>
   cy.get(".qg-r").filter(":visible").eq(n)
 );
 
+Cypress.Commands.add("getColumnName", (n) => {
+  cy.get(".qg-header-name").filter(":visible").eq(n);
+})
+
 Cypress.Commands.add("getGridCol", (n) =>
   cy.get(".qg-c").filter(":visible").eq(n)
 );
@@ -132,6 +136,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,71 @@ const baseUrl = `http://localhost:9999${contextPath}`;
 const getTabDragHandleByTitle = (title) =>
   `.chrome-tab[data-tab-title="${title}"] .chrome-tab-drag-handle`;
 
+describe("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");
+  });
+
+  it("should run the correct query when there are multiple queries in the same line", () => {
+    cy.typeQuery(
+      "with longseq as (\nselect * from long_sequence(100)\n-- comment"
+    );
+    cy.typeQuery(" select count(*) from longseq;select 1;");
+
+    // go to the end of second query
+    cy.clickLine(4);
+    cy.clickRun();
+    cy.getGridCol(0).should("contain", "1");
+    cy.getGridRow(0).should("contain", "1");
+
+    // go inside the second query
+    cy.clickLine(4);
+    cy.realPress("ArrowLeft");
+    cy.realPress("ArrowLeft");
+    cy.clickRun();
+    cy.getColumnName(0).should("contain", "1");
+    cy.getGridRow(0).should("contain", "1");
+
+    // go to the end of first query
+    cy.clickLine(4);
+    for (let i = 0; i < 9; i++) {
+      cy.realPress("ArrowLeft");
+    }
+    cy.clickRun();
+    cy.getColumnName(0).should("contain", "count");
+    cy.getGridRow(0).should("contain", "100");
+
+    // go inside the first query
+    cy.clickLine(4);
+    for (let i = 0; i < 11; i++) {
+      cy.realPress("ArrowLeft");
+    }
+    cy.clickRun();
+    cy.getColumnName(0).should("contain", "count");
+    cy.getGridRow(0).should("contain", "100");
+  });
+
+  it("should not suggest any query for running if the cursor is in an empty line between queries", () => {
+    cy.typeQuery("select 1;\n\nselect 2;");
+    cy.getCursorQueryGlyph().should("be.visible");
+
+    cy.realPress("ArrowUp");
+    cy.getCursorQueryGlyph().should("not.exist");
+
+    cy.realPress("ArrowUp");
+    cy.getCursorQueryGlyph().should("be.visible");
+  });
+});
+
 describe("appendQuery", () => {
   const consoleConfiguration = {
     savedQueries: [
@@ -158,6 +223,7 @@ describe("&query URL param", () => {
   it("should not append query if it already exists in editor", () => {
     const query = "select x\nfrom long_sequence(1);\n\n-- a\n-- b\n-- c";
     cy.typeQuery(query);
+    cy.clickLine(1);
     cy.clickRun();
     cy.visit(`${baseUrl}?query=${encodeURIComponent(query)}&executeQuery=true`);
     cy.getEditorContent().should("be.visible");
@@ -167,7 +233,6 @@ describe("&query URL param", () => {
   it("should append query and scroll to it", () => {
     cy.typeQuery("select x from long_sequence(1);");
     cy.typeQuery("\n".repeat(20));
-    cy.clickRun(); // take space so that query is not visible later, save by running
 
     const appendedQuery = "-- hello world";
     cy.visit(`${baseUrl}?query=${encodeURIComponent(appendedQuery)}`);
@@ -396,7 +461,7 @@ describe("running query with F9", () => {
       "select * from long_sequence(1); -- comment\nselect * from long_sequence(2);{upArrow}{rightArrow}{rightArrow}"
     );
     cy.F9();
-    cy.getGridRows().should("have.length", 2);
+    cy.getGridRows().should("have.length", 1);
     cy.getCursorQueryDecoration().should("have.length", 1);
   });
 });
@@ -487,7 +552,8 @@ describe("editor tabs", () => {
   });
 });
 
-describe("editor tabs history", () => {
+// TODO: This test is flaky because of the IndexedDB calls. Investigate the slow response time in test environment.
+describe.skip("editor tabs history", () => {
   before(() => {
     cy.loadConsoleWithAuth();
     cy.getEditorContent().should("be.visible");

packages/browser-tests/questdb

@@ -185,6 +185,12 @@ const MonacoEditor = () => {
     editor: editor.IStandaloneCodeEditor,
   ) => {
     const queryAtCursor = getQueryFromCursor(editor)
+    
+    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,15 @@ 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) {
+  let i = 0;
+
+  for (; i < text.length; i++) {
+    if (nextSql !== null) {
       break
     }
 
@@ -97,6 +99,8 @@ export const getQueryFromCursor = (
             row: startRow,
             col: startCol,
             position: startPos,
+            endRow: row,
+            endCol: column,
             limit: i,
           })
           startRow = row
@@ -105,7 +109,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 +141,6 @@ export const getQueryFromCursor = (
           startRow = row
           startCol = column
           startPos = i + 1
-          column++
         }
         break
       }
@@ -148,28 +158,63 @@ export const getQueryFromCursor = (
     }
   }
 
-  if (sql === null) {
-    sql = startPos === -1 ? text : text.substring(startPos)
+  // 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 (!nextSql) {
+    const sqlText = startPos === - 1 ? text : text.substring(startPos)
+    if (sqlText.length > 0) {
+      nextSql = {
+        row: startRow,
+        col: startCol,
+        position: startPos === -1 ? 0 : startPos,
+        endRow: row,
+        endCol: column,
+        limit: i,
+      }
+    }
   }
 
-  if (sql.length === 0) {
-    const prev = sqlTextStack.pop()
-
-    if (prev) {
+  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!.col,
+    }
+  } 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!.col,
+    }
   }
 }