Display Cypher warnings on correct positions

src/browser/custom.d.ts

@@ -118,11 +118,20 @@ declare module 'cypher-editor-support' {
     setSchema(schema: EditorSupportSchema): void
     update(input: string): void
   }
+  interface CypherPosition {
+    column: number
+    line: number
+  }
+  export interface QueryOrCommand {
+    getText: () => string
+    start: CypherPosition
+    stop: CypherPosition
+  }
   export function parse(
     input: string
   ): {
     referencesListener: {
-      queriesAndCommands: { getText: () => string; start: { line: number } }[]
+      queriesAndCommands: QueryOrCommand[]
     }
   }
   export function extractStatements(

src/browser/modules/Editor/Monaco.tsx

@@ -19,7 +19,7 @@
  */
 
 import { QuickInputList } from 'monaco-editor/esm/vs/base/parts/quickinput/browser/quickInputList'
-import { parse } from 'cypher-editor-support'
+import { parse, QueryOrCommand } from 'cypher-editor-support'
 import { debounce } from 'lodash-es'
 import {
   editor,
@@ -40,6 +40,7 @@ import { Bus } from 'suber'
 
 import { NEO4J_BROWSER_USER_ACTION_QUERY } from 'services/bolt/txMetadata'
 import { CYPHER_REQUEST } from 'shared/modules/cypher/cypherDuck'
+import { NotificationPosition, QueryResult } from 'neo4j-driver'
 
 const shouldCheckForHints = (code: string) =>
   code.trim().length > 0 &&
@@ -89,6 +90,8 @@ interface MonacoProps {
   toggleFullscreen: () => void
 }
 
+const EXPLAIN_QUERY_PREFIX = 'EXPLAIN '
+const EXPLAIN_QUERY_PREFIX_LENGTH = EXPLAIN_QUERY_PREFIX.length
 const Monaco = forwardRef<MonacoHandles, MonacoProps>(
   (
     {
@@ -405,9 +408,7 @@ const Monaco = forwardRef<MonacoHandles, MonacoProps>(
       debouncedUpdateCode()
     }
 
-    const addWarnings = (
-      statements: { start: { line: number }; getText: () => string }[]
-    ) => {
+    const addWarnings = (statements: QueryOrCommand[]) => {
       if (!statements.length) return
 
       const model = editorRef.current?.getModel() as editor.ITextModel
@@ -446,33 +447,32 @@ const Monaco = forwardRef<MonacoHandles, MonacoProps>(
         bus.self(
           CYPHER_REQUEST,
           {
-            query: 'EXPLAIN ' + text,
+            query: EXPLAIN_QUERY_PREFIX + text,
             queryType: NEO4J_BROWSER_USER_ACTION_QUERY
           },
-          response => {
+          (response: { result: QueryResult; success?: boolean }) => {
             if (
               response.success === true &&
               response.result.summary.notifications.length > 0
             ) {
               editor.setModelMarkers(model, monacoId, [
                 ...editor.getModelMarkers({ owner: monacoId }),
                 ...response.result.summary.notifications.map(
-                  ({
-                    description,
-                    position: { line },
-                    title
-                  }: {
-                    description: string
-                    position: { line: number }
-                    title: string
-                  }) => ({
-                    startLineNumber: statementLineNumber + line,
-                    startColumn: 1,
-                    endLineNumber: statementLineNumber + line,
-                    endColumn: 1000,
-                    message: title + '\n\n' + description,
-                    severity: MarkerSeverity.Warning
-                  })
+                  ({ description, position, title }) => {
+                    const { line, column } = position as NotificationPosition
+                    return {
+                      startLineNumber: statementLineNumber + line,
+                      startColumn:
+                        statement.start.column +
+                        (line === 1
+                          ? column - EXPLAIN_QUERY_PREFIX_LENGTH
+                          : column),
+                      endLineNumber: statement.stop.line,
+                      endColumn: statement.stop.column + 2,
+                      message: title + '\n\n' + description,
+                      severity: MarkerSeverity.Warning
+                    }
+                  }
                 )
               ])
             }