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

components/webui/client/package.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/public/settings.json

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

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

@@ -0,0 +1,79 @@
+import {useEffect} 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 "./monaco-config";
+
+
+type SqlEditorProps = Omit<EditorProps, "language">;
+
+/**
+ * Monaco editor with highlighting and autocomplete for SQL syntax.
+ *
+ * @param props
+ * @return
+ */
+const SqlEditor = (props: SqlEditorProps) => {
+    const monaco = useMonaco();
+
+
+    useEffect(() => {
+        if (null === monaco) {
+            return () => {
+            };
+        }
+
+        // Adds autocomplete suggestions for SQL keywords on editor load
+        const provider = monaco.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: "SQL Keyword",
+                    insertText: `${keyword} `,
+                    kind: monaco.languages.CompletionItemKind.Keyword,
+                    label: keyword,
+                    range: range,
+                }));
+
+                return {suggestions: suggestions};
+            },
+        });
+
+        return () => {
+            provider.dispose();
+        };
+    }, [monaco]);
+
+    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={{
+                fontSize: 14,
+                lineNumbers: "on",
+                lineNumbersMinChars: 2,
+                minimap: {enabled: false},
+                overviewRulerBorder: false,
+                placeholder: "Enter your SQL query",
+                scrollBeyondLastLine: false,
+                wordWrap: "on",
+            }}
+            {...props}/>
+    );
+};
+
+export default SqlEditor;

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

@@ -0,0 +1,21 @@
+/* eslint-disable import/default */
+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/editor.all.js";
+
+
+self.MonacoEnvironment = {
+    /**
+     * Creates a web worker for Monaco Editor.
+     *
+     * @return
+     */
+    getWorker () {
+        return new EditorWorker();
+    },
+};
+
+loader.config({monaco});

components/webui/client/src/components/SqlEditor/monaco-sql.d.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/config/index.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/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx

@@ -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/SqlQueryInput/index.module.css

@@ -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.tsx

@@ -0,0 +1,28 @@
+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
+                height={"150px"}
+                onChange={handleChange}/>
+        </div>
+    );
+};
+
+export default SqlQueryInput;

components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx

@@ -11,7 +11,7 @@ import {
     SETTINGS_STORAGE_ENGINE,
 } from "../../../../../config";
 import {computeTimelineConfig} from "../../../SearchResults/SearchResultsTimeline/utils";
-import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../../SearchState/index";
+import useSearchStore from "../../../SearchState/index";
 import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import {handleQuerySubmit} from "../../search-requests";
 import styles from "./index.module.css";
@@ -63,7 +63,7 @@ const SubmitButton = () => {
         selectDataset,
         updateCachedDataset]);
 
-    const isQueryStringEmpty = queryString === SEARCH_STATE_DEFAULT.queryString;
+    const isQueryStringEmpty = "" === queryString;
 
     // Submit button must be disabled if there are no datasets since clp-s requires dataset option
     // for queries.

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

@@ -1,9 +1,13 @@
 import {
+    CLP_QUERY_ENGINES,
     CLP_STORAGE_ENGINES,
+    SETTINGS_QUERY_ENGINE,
     SETTINGS_STORAGE_ENGINE,
 } from "../../../config";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
+import RunButton from "./Presto/RunButton";
+import SqlQueryInput from "./Presto/SqlQueryInput";
 import QueryInput from "./QueryInput";
 import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
@@ -27,10 +31,21 @@ const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
             <div className={styles["searchControlsContainer"]}>
-                {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
-                <QueryInput/>
-                <TimeRangeInput/>
-                <SearchButton/>
+                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ?
+                    (
+                        <>
+                            {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
+                            <QueryInput/>
+                            <TimeRangeInput/>
+                            <SearchButton/>
+                        </>
+                    ) :
+                    (
+                        <>
+                            <SqlQueryInput/>
+                            <RunButton/>
+                        </>
+                    )}
             </div>
         </form>
     );

components/webui/client/src/settings.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 
 type Settings = {
     ClpStorageEngine: string;
+    ClpQueryEngine: string;
     MongoDbSearchResultsMetadataCollectionName: string;
     SqlDbClpArchivesTableName: string;
     SqlDbClpDatasetsTableName: string;

components/webui/client/vite.config.ts

@@ -9,6 +9,13 @@ export default defineConfig({
     base: "./",
     build: {
         target: "esnext",
+        rollupOptions: {
+            output: {
+                manualChunks: {
+                    "monaco-editor": ["monaco-editor"],
+                },
+            },
+        },
     },
     plugins: [
         react(),