Merge pull request haohanyang#54 from haohanyang/code-editor-enhance

Add Hover and Codelense in code editor

Author: haohanyang

package-lock.json

@@ -2,8 +2,8 @@
   "name": "mongodb-datasource",
   "version": "0.3.1",
   "scripts": {
-    "build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
-    "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
+    "build": "webpack -c ./webpack.config.ts --env production",
+    "dev": "webpack -w -c ./webpack.config.ts --env development",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
@@ -68,6 +68,8 @@
     "@grafana/runtime": "^11.2.0",
     "@grafana/schema": "^10.4.0",
     "@grafana/ui": "^11.2.0",
+    "@mongodb-js/mongodb-constants": "^0.11.1",
+    "jsonc-parser": "^3.3.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "shadowrealm-api": "^0.8.3",

package.json

@@ -1,6 +1,9 @@
 import React, { useRef, useCallback } from 'react';
 import { CodeEditor, type MonacoEditor } from '@grafana/ui';
-import { useAutocomplete } from 'autocomplete';
+import { useAutocomplete } from '../editor/autocomplete';
+import { useValidation } from '../editor/validation';
+import { useHover } from '../editor/hover';
+import { useCodeLens } from '../editor/codelens';
 
 interface QueryEditorRawProps {
   query: string;
@@ -14,7 +17,11 @@ interface QueryEditorRawProps {
 
 export function QueryEditorRaw({ query, onBlur, language, width, height, fontSize, children }: QueryEditorRawProps) {
   const monacoRef = useRef<MonacoEditor | null>(null);
+
   const setupAutocompleteFn = useAutocomplete();
+  const setupHoverFn = useHover();
+  const setupValidationFn = useValidation();
+  const setupCodeLensFn = useCodeLens();
 
   const formatQuery = useCallback(() => {
     if (monacoRef.current) {
@@ -27,7 +34,16 @@ export function QueryEditorRaw({ query, onBlur, language, width, height, fontSiz
       <CodeEditor
         onEditorDidMount={(editor, monaco) => {
           monacoRef.current = editor;
+          setupValidationFn(editor, monaco);
           setupAutocompleteFn(editor, monaco);
+          setupHoverFn(editor, monaco);
+
+          const updateTextCommandId = editor.addCommand(0, (_ctx, ...args) => {
+            const text = args[0];
+            onBlur?.(text);
+          });
+
+          setupCodeLensFn(editor, monaco, updateTextCommandId!);
         }}
         height={height || '240px'}
         width={width ? `${width - 2}px` : undefined}
@@ -36,7 +52,7 @@ export function QueryEditorRaw({ query, onBlur, language, width, height, fontSiz
         value={query}
         showMiniMap={false}
         showLineNumbers={true}
-        monacoOptions={fontSize ? { fontSize: fontSize } : undefined}
+        monacoOptions={fontSize ? { fontSize: fontSize, codeLens: true } : undefined}
       />
       {children && children({ formatQuery })}
     </div>

src/aggregation.json

@@ -1,11 +1,11 @@
 import { useRef, useEffect } from 'react';
-import { type Monaco, type monacoTypes } from '@grafana/ui';
+import { type Monaco, type monacoTypes, type MonacoEditor } from '@grafana/ui';
 import { languages } from 'monaco-editor';
-import aggregationData from './aggregation.json';
+import { STAGE_OPERATORS, EXPRESSION_OPERATORS, ACCUMULATORS, CONVERSION_OPERATORS, QUERY_OPERATORS } from '@mongodb-js/mongodb-constants'
 
 // Supports JSON only right now
 class CompletionProvider implements monacoTypes.languages.CompletionItemProvider {
-  constructor(private readonly editor: monacoTypes.editor.IStandaloneCodeEditor) {}
+  constructor(private readonly editor: MonacoEditor) { }
 
   provideCompletionItems(
     model: monacoTypes.editor.ITextModel,
@@ -40,18 +40,30 @@ class CompletionProvider implements monacoTypes.languages.CompletionItemProvider
       endColumn: word.endColumn,
     };
 
-    const suggestions: languages.CompletionItem[] = aggregationData['stages'].map((s) => ({
-      label: `"${s['name']}"`,
+    const stageSuggestions: languages.CompletionItem[] = STAGE_OPERATORS.map((stage) => {
+      // Add double quotation marks
+      const snippet = stage.snippet.replace(/(\s*)([a-zA-Z]+)\s*: /g, '$1"$2": ');
+      return {
+        label: `"${stage.name}"`,
+        kind: languages.CompletionItemKind.Function,
+        insertText: `"\\${stage.name}": ${snippet}`,
+        range: range,
+        detail: stage.meta,
+        documentation: stage.description,
+        insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
+  }});
+
+    const expressionSuggestions: languages.CompletionItem[] = [...EXPRESSION_OPERATORS, ...ACCUMULATORS, ...CONVERSION_OPERATORS, ...QUERY_OPERATORS].map((expression) => ({
+      label: `"${expression.name}"`,
       kind: languages.CompletionItemKind.Function,
-      insertText: s['insertText'] ? s['insertText'] : `"\\${s['name']}": {\n\t$0\n}`,
+      insertText: `"\\${expression.name}": \${1:expression}`,
       range: range,
-      detail: 'stage',
-      documentation: s['description'],
+      detail: expression.meta,
       insertTextRules: languages.CompletionItemInsertTextRule.InsertAsSnippet,
     }));
 
     return {
-      suggestions: suggestions,
+      suggestions: [...stageSuggestions, ...expressionSuggestions],
     };
   }
 }
@@ -64,7 +76,7 @@ export function useAutocomplete() {
     };
   }, []);
 
-  return (editor: monacoTypes.editor.IStandaloneCodeEditor, monaco: Monaco) => {
+  return (editor: MonacoEditor, monaco: Monaco) => {
     const provider = new CompletionProvider(editor);
     const { dispose } = monaco.languages.registerCompletionItemProvider('json', provider);
     autocompleteDisposeFun.current = dispose;