feat(webui): Integrate Monaco editor for future Presto SQL query input. (#1108)

Co-authored-by: hoophalab <[email protected]>

Author: davemarco

components/webui/client/package-lock.json

@@ -16,6 +16,7 @@
     "@ant-design/v5-patch-for-react-19": "^1.0.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@monaco-editor/react": "^4.7.0",
     "@mui/joy": "^5.0.0-beta.51",
     "@sinclair/typebox": "^0.34.25",
     "@tanstack/react-query": "^5.81.5",
@@ -26,6 +27,7 @@
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-zoom": "^2.2.0",
     "dayjs": "^1.11.13",
+    "monaco-editor": "^0.52.2",
     "react": "^19.0.0",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^19.0.0",

components/webui/client/package.json

@@ -1,5 +1,6 @@
 {
     "ClpStorageEngine": "clp",
+    "ClpQueryEngine": "native",
     "MongoDbSearchResultsMetadataCollectionName": "results-metadata",
     "SqlDbClpArchivesTableName": "clp_archives",
     "SqlDbClpDatasetsTableName": "clp_datasets",

components/webui/client/public/settings.json

@@ -0,0 +1,145 @@
+import {
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
+
+import {
+    Editor,
+    EditorProps,
+    useMonaco,
+} from "@monaco-editor/react";
+import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+
+import "./monaco-loader";
+
+
+const MAX_VISIBLE_LINES: number = 5;
+
+type SqlEditorProps = Omit<EditorProps, "language">;
+
+/**
+ * Monaco editor with highlighting and autocomplete for SQL syntax.
+ *
+ * @param props
+ * @return
+ */
+const SqlEditor = (props: SqlEditorProps) => {
+    const monacoEditor = useMonaco();
+
+    useEffect(() => {
+        if (null === monacoEditor) {
+            return () => {
+            };
+        }
+
+        // Adds autocomplete suggestions for SQL keywords on editor load
+        const provider = monacoEditor.languages.registerCompletionItemProvider("sql", {
+            provideCompletionItems: (model, position) => {
+                const word = model.getWordUntilPosition(position);
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endColumn: word.endColumn,
+                };
+                const suggestions = sqlLanguage.keywords.map((keyword: string) => ({
+                    detail: "Presto SQL (CLP)",
+                    insertText: `${keyword} `,
+                    kind: monacoEditor.languages.CompletionItemKind.Keyword,
+                    label: keyword,
+                    range: range,
+                }));
+
+                // When SQL keyword suggestions appear (e.g., after "SELECT a"), hitting Enter
+                // accepts the first suggestion. To prevent accidental auto-completion
+                // in multi-line queries and to allow users to dismiss suggestions more easily,
+                // we make the current input the first suggestion.
+                // Users can then use arrow keys to select a keyword if needed.
+                const typedWord = model.getValueInRange(range);
+                if (0 < typedWord.length) {
+                    suggestions.push({
+                        detail: "Current",
+                        insertText: `${typedWord}\n`,
+                        kind: monaco.languages.CompletionItemKind.Text,
+                        label: typedWord,
+                        range: range,
+                    });
+                }
+
+                return {
+                    suggestions: suggestions,
+                    incomplete: true,
+                };
+            },
+            triggerCharacters: [
+                " ",
+                "\n",
+            ],
+        });
+
+        return () => {
+            provider.dispose();
+        };
+    }, [monacoEditor]);
+
+    const [isContentMultiline, setIsContentMultiline] = useState<boolean>(false);
+
+    const handleMonacoMount = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => {
+        editor.onDidContentSizeChange((ev) => {
+            if (false === ev.contentHeightChanged) {
+                return;
+            }
+            if (null === monacoEditor) {
+                throw new Error("Unexpected null Monaco instance");
+            }
+            const domNode = editor.getDomNode();
+            if (null === domNode) {
+                throw new Error("Unexpected null editor DOM node");
+            }
+            const model = editor.getModel();
+            if (null === model) {
+                throw new Error("Unexpected null editor model");
+            }
+            const lineHeight = editor.getOption(monacoEditor.editor.EditorOption.lineHeight);
+            const contentHeight = editor.getContentHeight();
+            const approxWrappedLines = Math.round(contentHeight / lineHeight);
+            setIsContentMultiline(1 < approxWrappedLines);
+            if (MAX_VISIBLE_LINES >= approxWrappedLines) {
+                domNode.style.height = `${contentHeight}px`;
+            } else {
+                domNode.style.height = `${lineHeight * MAX_VISIBLE_LINES}px`;
+            }
+        });
+    }, [monacoEditor]);
+
+    return (
+        <Editor
+            language={"sql"}
+
+            // Use white background while loading (default is grey) so transition to editor with
+            // white background is less jarring.
+            loading={<div style={{backgroundColor: "white", height: "100%", width: "100%"}}/>}
+            options={{
+                automaticLayout: true,
+                folding: isContentMultiline,
+                fontSize: 20,
+                lineHeight: 30,
+                lineNumbers: isContentMultiline ?
+                    "on" :
+                    "off",
+                lineNumbersMinChars: 2,
+                minimap: {enabled: false},
+                overviewRulerBorder: false,
+                placeholder: "Enter your SQL query",
+                renderLineHighlightOnlyWhenFocus: true,
+                scrollBeyondLastLine: false,
+                wordWrap: "on",
+            }}
+            onMount={handleMonacoMount}
+            {...props}/>
+    );
+};
+
+export default SqlEditor;

components/webui/client/src/components/SqlEditor/index.tsx

@@ -0,0 +1,29 @@
+/* eslint-disable import/default, @stylistic/max-len */
+import {loader} from "@monaco-editor/react";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+
+import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution.js";
+import "monaco-editor/esm/vs/editor/contrib/clipboard/browser/clipboard.js";
+import "monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js";
+import "monaco-editor/esm/vs/editor/contrib/find/browser/findController.js";
+import "monaco-editor/esm/vs/editor/contrib/wordHighlighter/browser/wordHighlighter.js";
+import "monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js";
+import "monaco-editor/esm/vs/editor/contrib/placeholderText/browser/placeholderText.contribution.js";
+
+
+/* eslint-enable import/default, @stylistic/max-len */
+
+
+self.MonacoEnvironment = {
+    /**
+     * Creates a web worker for Monaco Editor.
+     *
+     * @return
+     */
+    getWorker () {
+        return new EditorWorker();
+    },
+};
+
+loader.config({monaco});

components/webui/client/src/components/SqlEditor/monaco-loader.ts

@@ -0,0 +1,10 @@
+declare module "monaco-editor/esm/vs/basic-languages/sql/sql.js" {
+    import {languages} from "monaco-editor/esm/vs/editor/editor.api";
+
+
+    interface SqlLanguageDefinition extends languages.IMonarchLanguage {
+        keywords: string[];
+    }
+
+    export const language: SqlLanguageDefinition;
+}

components/webui/client/src/components/SqlEditor/monaco-sql.d.ts

@@ -9,7 +9,16 @@ enum CLP_STORAGE_ENGINES {
     CLP_S = "clp-s",
 }
 
+/**
+ * Query engine options.
+ */
+enum CLP_QUERY_ENGINES {
+    NATIVE = "native",
+    PRESTO = "presto",
+}
+
 const SETTINGS_STORAGE_ENGINE = settings.ClpStorageEngine as CLP_STORAGE_ENGINES;
+const SETTINGS_QUERY_ENGINE = settings.ClpQueryEngine as CLP_QUERY_ENGINES;
 
 /**
  * Stream type based on the storage engine.
@@ -19,7 +28,9 @@ const STREAM_TYPE = CLP_STORAGE_ENGINES.CLP === SETTINGS_STORAGE_ENGINE ?
     "json";
 
 export {
+    CLP_QUERY_ENGINES,
     CLP_STORAGE_ENGINES,
+    SETTINGS_QUERY_ENGINE,
     SETTINGS_STORAGE_ENGINE,
     STREAM_TYPE,
 };

components/webui/client/src/config/index.ts

@@ -0,0 +1,38 @@
+import {CaretRightOutlined} from "@ant-design/icons";
+import {
+    Button,
+    Tooltip,
+} from "antd";
+
+import useSearchStore from "../../../SearchState/index";
+
+
+/**
+ * Renders a button to run the SQL query.
+ *
+ * @return
+ */
+const RunButton = () => {
+    const queryString = useSearchStore((state) => state.queryString);
+
+    const isQueryStringEmpty = "" === queryString;
+    const tooltipTitle = isQueryStringEmpty ?
+        "Enter SQL query to run" :
+        "";
+
+    return (
+        <Tooltip title={tooltipTitle}>
+            <Button
+                color={"green"}
+                disabled={isQueryStringEmpty}
+                icon={<CaretRightOutlined/>}
+                size={"large"}
+                variant={"solid"}
+            >
+                Run
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default RunButton;

components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx

@@ -0,0 +1,5 @@
+/* Allows the editor to shrink when page width decreases */
+.input {
+    width: 100%;
+    min-width: 0;
+}

components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css

@@ -0,0 +1,26 @@
+import {useCallback} from "react";
+
+import SqlEditor from "../../../../../components/SqlEditor";
+import useSearchStore from "../../../SearchState/index";
+import styles from "./index.module.css";
+
+
+/**
+ * Renders SQL query input.
+ *
+ * @return
+ */
+const SqlQueryInput = () => {
+    const handleChange = useCallback((value: string | undefined) => {
+        const {updateQueryString} = useSearchStore.getState();
+        updateQueryString(value || "");
+    }, []);
+
+    return (
+        <div className={styles["input"] || ""}>
+            <SqlEditor onChange={handleChange}/>
+        </div>
+    );
+};
+
+export default SqlQueryInput;