query error markers

packages/web/src/query/AceEditor.svelte

@@ -156,6 +156,7 @@
   export let splitterOptions = null;
   export let onKeyDown = null;
   export let onExecuteFragment = null;
+  export let errorMessages = null;
 
   const tabVisible: any = getContext('tabVisible');
 
@@ -184,16 +185,28 @@
     return editor;
   }
 
-  export function getCurrentCommandText(): string {
-    if (currentPart != null) return currentPart.text;
-    if (!editor) return '';
+  export function getCurrentCommandText(): { text: string; line?: number } {
+    if (currentPart != null) {
+      return {
+        text: currentPart.text,
+        line: currentPart.trimStart.line,
+      };
+    }
+    if (!editor) return { text: '' };
     const selectedText = editor.getSelectedText();
-    if (selectedText) return selectedText;
+    if (selectedText)
+      return {
+        text: selectedText,
+        line: editor.getSelectionRange().start.row,
+      };
     if (editor.getHighlightActiveLine()) {
       const line = editor.getSelectionRange().start.row;
-      return editor.session.getLine(line);
+      return {
+        text: editor.session.getLine(line),
+        line,
+      };
     }
-    return '';
+    return { text: '' };
   }
 
   export function getCodeCompletionCommandText() {
@@ -292,13 +305,25 @@
   }
 
   function updateAnnotations() {
-    editor.session.setAnnotations(
-      (queryParts || []).map(part => ({
-        row: part.trimStart.line,
-        text: part.text,
-        className: 'ace-gutter-sql-run',
-      }))
-    );
+    editor?.session?.setAnnotations([
+      ...(queryParts || [])
+        .filter(part => !(errorMessages || []).find(err => err.line == part.trimStart.line))
+        .map(part => ({
+          row: part.trimStart.line,
+          text: part.text,
+          className: 'ace-gutter-sql-run',
+        })),
+      ...(errorMessages || []).map(error => ({
+        row: error.line,
+        text: error.message,
+        type: 'error',
+      })),
+    ]);
+  }
+
+  $: {
+    errorMessages;
+    updateAnnotations();
   }
 
   const handleContextMenu = e => {
@@ -455,10 +480,10 @@
 
         const part = (queryParts || []).find(part => part.trimStart.line == row);
         if (part && onExecuteFragment) {
-          onExecuteFragment(part.text);
+          onExecuteFragment(part.text, part.trimStart.line);
           e.stop();
           editor.moveCursorTo(part.trimStart.line, 0);
-          editor.selection.clearSelection()
+          editor.selection.clearSelection();
         }
       },
       true

packages/web/src/query/MessageView.svelte

@@ -18,6 +18,7 @@
   export let items: any[];
   export let showProcedure = false;
   export let showLine = false;
+  export let startLine = 0;
 
   $: time0 = items[0] && new Date(items[0].time).getTime();
 
@@ -58,7 +59,7 @@
           <td>{row.procedure || ''}</td>
         {/if}
         {#if showLine}
-          <td>{row.line || ''}</td>
+          <td>{row.line == null ? '' : row.line + 1 + startLine}</td>
         {/if}
       </tr>
     {/each}

packages/web/src/query/SocketMessageView.svelte

@@ -13,8 +13,11 @@
   export let eventName;
   export let executeNumber;
   export let showNoMessagesAlert = false;
+  export let startLine = 0;
+  export let onChangeErrors = null;
 
   const cachedMessagesRef = createRef([]);
+  const lastErrorMessageCountRef = createRef(0);
 
   let displayedMessages = [];
 
@@ -44,11 +47,26 @@
     }
   }
 
+  $: {
+    if (onChangeErrors) {
+      const errors = displayedMessages.filter(x => x.severity == 'error');
+      if (lastErrorMessageCountRef.get() != errors.length) {
+        onChangeErrors(
+          errors.map(err => ({
+            ...err,
+            line: err.line == null ? null : err.line + startLine,
+          }))
+        );
+        lastErrorMessageCountRef.set(errors.length);
+      }
+    }
+  }
+
   $: $effect;
 </script>
 
 {#if showNoMessagesAlert && (!displayedMessages || displayedMessages.length == 0)}
   <ErrorInfo message="No messages" icon="img alert" />
 {:else}
-  <MessageView items={displayedMessages} on:messageclick {showProcedure} {showLine} />
+  <MessageView items={displayedMessages} on:messageclick {showProcedure} {showLine} {startLine} />
 {/if}

packages/web/src/query/SqlEditor.svelte

@@ -32,7 +32,7 @@
     return domEditor.getEditor();
   }
 
-  export function getCurrentCommandText(): string {
+  export function getCurrentCommandText(): { text: string; line?: number } {
     return domEditor.getCurrentCommandText();
   }