From 9ca2d54c48b9fff142a0ba56208766cb89f81c98 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Tue, 15 Jul 2025 16:00:37 +0000
Subject: [PATCH 01/13] latest

---
 .../client/src/components/SqlEditor/index.ts  | 32 +++++++++++++++++++
 .../client/src/components/SqlEditor/index.tsx | 32 +++++++++++++++++++
 .../pages/SearchPage/SearchControls/index.tsx | 19 ++++++++---
 components/webui/client/src/settings.ts       |  1 +
 4 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 components/webui/client/src/components/SqlEditor/index.ts
 create mode 100644 components/webui/client/src/components/SqlEditor/index.tsx

diff --git a/components/webui/client/src/components/SqlEditor/index.ts b/components/webui/client/src/components/SqlEditor/index.ts
new file mode 100644
index 0000000000..835fe6f5d3
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/index.ts
@@ -0,0 +1,32 @@
+import {Editor} from "@monaco-editor/react";
+import {useState} from "react";
+
+/**
+ * Renders a Monaco editor for SQL query input.
+ *
+ * @return
+ */
+const SqlEditor = () => {
+    const [sqlQuery, setSqlQuery] = useState<string>("");
+
+    const handleSqlQueryChange = (value: string | undefined) => {
+        setSqlQuery(value || "");
+    };
+
+    return (
+        <Editor
+            height="200px"
+            language="sql"
+            value={sqlQuery}
+            onChange={handleSqlQueryChange}
+            options={{
+                minimap: {enabled: false},
+                lineNumbers: "on",
+                scrollBeyondLastLine: false,
+                wordWrap: "on",
+            }}
+        />
+    );
+};
+
+export default SqlEditor;
diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
new file mode 100644
index 0000000000..835fe6f5d3
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -0,0 +1,32 @@
+import {Editor} from "@monaco-editor/react";
+import {useState} from "react";
+
+/**
+ * Renders a Monaco editor for SQL query input.
+ *
+ * @return
+ */
+const SqlEditor = () => {
+    const [sqlQuery, setSqlQuery] = useState<string>("");
+
+    const handleSqlQueryChange = (value: string | undefined) => {
+        setSqlQuery(value || "");
+    };
+
+    return (
+        <Editor
+            height="200px"
+            language="sql"
+            value={sqlQuery}
+            onChange={handleSqlQueryChange}
+            options={{
+                minimap: {enabled: false},
+                lineNumbers: "on",
+                scrollBeyondLastLine: false,
+                wordWrap: "on",
+            }}
+        />
+    );
+};
+
+export default SqlEditor;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 0b8e767558..2320495bda 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -2,11 +2,14 @@ import {
     CLP_STORAGE_ENGINES,
     SETTINGS_STORAGE_ENGINE,
 } from "../../../config";
+import {settings} from "../../../settings";
+import SqlEditor from "../../../components/SqlEditor";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
 import QueryInput from "./QueryInput";
 import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
+import {useState} from "react";
 
 
 /**
@@ -24,13 +27,21 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  * @return
  */
 const SearchControls = () => {
+    const isPrestoEngine = settings.ClpQueryEngine === "presto";
+
     return (
         <form onSubmit={handleSubmit}>
             <div className={styles["searchControlsContainer"]}>
-                {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
-                <QueryInput/>
-                <TimeRangeInput/>
-                <SearchButton/>
+                {isPrestoEngine ? (
+                    <SqlEditor/>
+                ) : (
+                    <>
+                        {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
+                        <QueryInput/>
+                        <TimeRangeInput/>
+                        <SearchButton/>
+                    </>
+                )}
             </div>
         </form>
     );
diff --git a/components/webui/client/src/settings.ts b/components/webui/client/src/settings.ts
index 53ac0949e8..b20711e1d8 100644
--- a/components/webui/client/src/settings.ts
+++ b/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;

From b501260299fcde4b9e1f3ec1acd85f1c56a10631 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Wed, 16 Jul 2025 20:02:57 +0000
Subject: [PATCH 02/13] latest

---
 components/webui/client/package-lock.json     | 37 ++++++++++++
 components/webui/client/package.json          |  2 +
 components/webui/client/public/settings.json  |  1 +
 .../client/src/components/SqlEditor/index.ts  | 32 -----------
 .../client/src/components/SqlEditor/index.tsx | 57 ++++++++++++++-----
 .../src/components/SqlEditor/monaco-sql.d.ts  |  5 ++
 components/webui/client/src/config/index.ts   | 11 ++++
 .../SearchControls/Presto/RunButton/index.tsx | 39 +++++++++++++
 .../Presto/SqlQueryInput/index.tsx            | 22 +++++++
 .../pages/SearchPage/SearchControls/index.tsx | 18 +++---
 10 files changed, 170 insertions(+), 54 deletions(-)
 delete mode 100644 components/webui/client/src/components/SqlEditor/index.ts
 create mode 100644 components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx

diff --git a/components/webui/client/package-lock.json b/components/webui/client/package-lock.json
index 98a9e5a3a6..7db9f5c893 100644
--- a/components/webui/client/package-lock.json
+++ b/components/webui/client/package-lock.json
@@ -12,6 +12,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",
@@ -22,6 +23,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",
@@ -1462,6 +1464,29 @@
       "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
       "license": "MIT"
     },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.5.0.tgz",
+      "integrity": "sha512-hKoGSM+7aAc7eRTRjpqAZucPmoNOC4UUbknb/VNoTkEIkCPhqV8LfbsgM1webRM7S/z21eHEx9Fkwx8Z/C/+Xw==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.7.0.tgz",
+      "integrity": "sha512-cyzXQCtO47ydzxpQtCGSQGOC8Gk3ZUeBXFAxD+CWXYFo5OqZyZUonFl0DwUlTyAfRHntBfw2p3w4s9R6oe1eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.5.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@mui/base": {
       "version": "5.0.0-beta.40-0",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40-0.tgz",
@@ -6225,6 +6250,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -8006,6 +8037,12 @@
       "license": "MIT",
       "peer": true
     },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
     "node_modules/string-convert": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
diff --git a/components/webui/client/package.json b/components/webui/client/package.json
index 4fdef4c3f2..2d25ed742e 100644
--- a/components/webui/client/package.json
+++ b/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",
diff --git a/components/webui/client/public/settings.json b/components/webui/client/public/settings.json
index d2f7580d39..67f60e795b 100644
--- a/components/webui/client/public/settings.json
+++ b/components/webui/client/public/settings.json
@@ -1,5 +1,6 @@
 {
     "ClpStorageEngine": "clp",
+    "ClpQueryEngine": "native",
     "MongoDbSearchResultsMetadataCollectionName": "results-metadata",
     "SqlDbClpArchivesTableName": "clp_archives",
     "SqlDbClpDatasetsTableName": "clp_datasets",
diff --git a/components/webui/client/src/components/SqlEditor/index.ts b/components/webui/client/src/components/SqlEditor/index.ts
deleted file mode 100644
index 835fe6f5d3..0000000000
--- a/components/webui/client/src/components/SqlEditor/index.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import {Editor} from "@monaco-editor/react";
-import {useState} from "react";
-
-/**
- * Renders a Monaco editor for SQL query input.
- *
- * @return
- */
-const SqlEditor = () => {
-    const [sqlQuery, setSqlQuery] = useState<string>("");
-
-    const handleSqlQueryChange = (value: string | undefined) => {
-        setSqlQuery(value || "");
-    };
-
-    return (
-        <Editor
-            height="200px"
-            language="sql"
-            value={sqlQuery}
-            onChange={handleSqlQueryChange}
-            options={{
-                minimap: {enabled: false},
-                lineNumbers: "on",
-                scrollBeyondLastLine: false,
-                wordWrap: "on",
-            }}
-        />
-    );
-};
-
-export default SqlEditor;
diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index 835fe6f5d3..ecc4d546bf 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -1,30 +1,59 @@
-import {Editor} from "@monaco-editor/react";
-import {useState} from "react";
+import {Editor, useMonaco, EditorProps} from "@monaco-editor/react";
+import {useEffect} from "react";
+import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js';
+
+interface SqlEditorProps extends Omit<EditorProps, 'language'> {}
 
 /**
- * Renders a Monaco editor for SQL query input.
- *
- * @return
+ * Monaco editor with highlighting and autocomplete for SQL syntax.
  */
-const SqlEditor = () => {
-    const [sqlQuery, setSqlQuery] = useState<string>("");
+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: () => {
+                const suggestions = sqlLanguage[`keywords`].map((keyword: string) => ({
+                    label: keyword,
+                    kind: monaco.languages.CompletionItemKind.Keyword,
+                    insertText: keyword + ' ',
+                    detail: 'SQL Keyword'
+                }));
+
+                return { suggestions };
+            }
+        });
 
-    const handleSqlQueryChange = (value: string | undefined) => {
-        setSqlQuery(value || "");
-    };
+        return () => {
+            provider.dispose();
+        };
+    }, [monaco]);
 
     return (
         <Editor
-            height="200px"
             language="sql"
-            value={sqlQuery}
-            onChange={handleSqlQueryChange}
+            // 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={{
-                minimap: {enabled: false},
+                minimap: { enabled: false },
                 lineNumbers: "on",
+                lineNumbersMinChars: 2,
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
+                placeholder: "Enter your SQL query",
+                overviewRulerBorder: false,
+                fontSize: 14,
             }}
+            {...props}
         />
     );
 };
diff --git a/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts b/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
new file mode 100644
index 0000000000..ac02bc56fb
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
@@ -0,0 +1,5 @@
+declare module 'monaco-editor/esm/vs/basic-languages/sql/sql.js' {
+    import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
+    
+    export const language: languages.IMonarchLanguage;
+}
diff --git a/components/webui/client/src/config/index.ts b/components/webui/client/src/config/index.ts
index 64beca676f..b3cac7974a 100644
--- a/components/webui/client/src/config/index.ts
+++ b/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.
@@ -20,6 +29,8 @@ const STREAM_TYPE = CLP_STORAGE_ENGINES.CLP === SETTINGS_STORAGE_ENGINE ?
 
 export {
     CLP_STORAGE_ENGINES,
+    CLP_QUERY_ENGINES,
     SETTINGS_STORAGE_ENGINE,
+    SETTINGS_QUERY_ENGINE,
     STREAM_TYPE,
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
new file mode 100644
index 0000000000..6498a41998
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
@@ -0,0 +1,39 @@
+import {CaretRightOutlined} from "@ant-design/icons";
+import {
+    Button,
+    Tooltip,
+} from "antd";
+
+import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../../SearchState/index";
+import styles from "../../SearchButton/SubmitButton/index.module.css";
+
+/**
+ * Renders a button to run the SQL query.
+ *
+ * @return
+ */
+const RunButton = () => {
+    const queryString = useSearchStore((state) => state.queryString);
+
+    const isQueryStringEmpty = queryString === SEARCH_STATE_DEFAULT.queryString;
+
+    let tooltipTitle = "";
+    if (isQueryStringEmpty) {
+        tooltipTitle = "Enter SQL query to run";
+    }
+
+    return (
+        <Tooltip title={tooltipTitle}>
+            <Button
+                className={styles["gradientButton"] || ""}
+                icon={<CaretRightOutlined/>}
+                size={"large"}
+                type={"primary"}
+            >
+                Run
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default RunButton;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
new file mode 100644
index 0000000000..0da88a66d9
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import SqlEditor from "../../../../../components/SqlEditor";
+import useSearchStore from "../../../SearchState/index";
+
+/**
+ * Renders SQL query input.
+ */
+const SqlQueryInput = () => {
+    const handleChange = useCallback((value: string | undefined) => {
+        const {updateQueryString} = useSearchStore.getState();
+        updateQueryString(value || "");
+    }, []);
+
+    return (
+        <SqlEditor
+            height="150px"
+            onChange={handleChange}
+        />
+    );
+};
+
+export default SqlQueryInput;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 2320495bda..09e50fec68 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -1,15 +1,16 @@
 import {
     CLP_STORAGE_ENGINES,
+    CLP_QUERY_ENGINES,
     SETTINGS_STORAGE_ENGINE,
+    SETTINGS_QUERY_ENGINE,
 } from "../../../config";
-import {settings} from "../../../settings";
-import SqlEditor from "../../../components/SqlEditor";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
 import QueryInput from "./QueryInput";
+import RunButton from "./Presto/RunButton";
 import SearchButton from "./SearchButton";
+import SqlQueryInput from "./Presto/SqlQueryInput";
 import TimeRangeInput from "./TimeRangeInput";
-import {useState} from "react";
 
 
 /**
@@ -27,20 +28,21 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
  * @return
  */
 const SearchControls = () => {
-    const isPrestoEngine = settings.ClpQueryEngine === "presto";
-
     return (
         <form onSubmit={handleSubmit}>
             <div className={styles["searchControlsContainer"]}>
-                {isPrestoEngine ? (
-                    <SqlEditor/>
-                ) : (
+                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ? (
                     <>
                         {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
                         <QueryInput/>
                         <TimeRangeInput/>
                         <SearchButton/>
                     </>
+                ) : (
+                    <>
+                        <SqlQueryInput/>
+                        <RunButton/>
+                    </>
                 )}
             </div>
         </form>

From e27d62e40b806289097b693cf435489adb24cfd9 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Thu, 17 Jul 2025 15:50:59 +0000
Subject: [PATCH 03/13] fix lint

---
 .../client/src/components/SqlEditor/index.tsx | 62 ++++++++++++-------
 .../src/components/SqlEditor/monaco-sql.d.ts  | 13 ++--
 components/webui/client/src/config/index.ts   |  4 +-
 .../SearchControls/Presto/RunButton/index.tsx |  1 +
 .../Presto/SqlQueryInput/index.tsx            | 11 ++--
 .../pages/SearchPage/SearchControls/index.tsx | 36 ++++++-----
 6 files changed, 77 insertions(+), 50 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index ecc4d546bf..df7a7d053d 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -1,11 +1,20 @@
-import {Editor, useMonaco, EditorProps} from "@monaco-editor/react";
 import {useEffect} from "react";
-import { language as sqlLanguage } from 'monaco-editor/esm/vs/basic-languages/sql/sql.js';
 
-interface SqlEditorProps extends Omit<EditorProps, 'language'> {}
+import {
+    Editor,
+    EditorProps,
+    useMonaco,
+} from "@monaco-editor/react";
+import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql.js";
+
+
+type SqlEditorProps = Omit<EditorProps, "language">;
 
 /**
  * Monaco editor with highlighting and autocomplete for SQL syntax.
+ *
+ * @param props
+ * @return
  */
 const SqlEditor = (props: SqlEditorProps) => {
     const monaco = useMonaco();
@@ -13,21 +22,30 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     useEffect(() => {
         if (null === monaco) {
-            return;
+            return () => {
+            };
         }
-        
+
         // Adds autocomplete suggestions for SQL keywords on editor load
-        const provider = monaco.languages.registerCompletionItemProvider('sql', {
-            provideCompletionItems: () => {
-                const suggestions = sqlLanguage[`keywords`].map((keyword: string) => ({
-                    label: keyword,
+        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,
-                    insertText: keyword + ' ',
-                    detail: 'SQL Keyword'
+                    label: keyword,
+                    range: range,
                 }));
 
-                return { suggestions };
-            }
+                return {suggestions: suggestions};
+            },
         });
 
         return () => {
@@ -37,24 +55,22 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <Editor
-            language="sql"
+            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%' }}/>
-            }
+            loading={<div style={{backgroundColor: "white", height: "100%", width: "100%"}}/>}
             options={{
-                minimap: { enabled: false },
+                fontSize: 14,
                 lineNumbers: "on",
                 lineNumbersMinChars: 2,
+                minimap: {enabled: false},
+                overviewRulerBorder: false,
+                placeholder: "Enter your SQL query",
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
-                placeholder: "Enter your SQL query",
-                overviewRulerBorder: false,
-                fontSize: 14,
             }}
-            {...props}
-        />
+            {...props}/>
     );
 };
 
diff --git a/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts b/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
index ac02bc56fb..a1a88ea6f2 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-sql.d.ts
@@ -1,5 +1,10 @@
-declare module 'monaco-editor/esm/vs/basic-languages/sql/sql.js' {
-    import { languages } from 'monaco-editor/esm/vs/editor/editor.api';
-    
-    export const language: languages.IMonarchLanguage;
+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;
 }
diff --git a/components/webui/client/src/config/index.ts b/components/webui/client/src/config/index.ts
index b3cac7974a..0fed22bb9e 100644
--- a/components/webui/client/src/config/index.ts
+++ b/components/webui/client/src/config/index.ts
@@ -28,9 +28,9 @@ const STREAM_TYPE = CLP_STORAGE_ENGINES.CLP === SETTINGS_STORAGE_ENGINE ?
     "json";
 
 export {
-    CLP_STORAGE_ENGINES,
     CLP_QUERY_ENGINES,
-    SETTINGS_STORAGE_ENGINE,
+    CLP_STORAGE_ENGINES,
     SETTINGS_QUERY_ENGINE,
+    SETTINGS_STORAGE_ENGINE,
     STREAM_TYPE,
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
index 6498a41998..4a395e62d6 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
@@ -7,6 +7,7 @@ import {
 import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../../SearchState/index";
 import styles from "../../SearchButton/SubmitButton/index.module.css";
 
+
 /**
  * Renders a button to run the SQL query.
  *
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index 0da88a66d9..91b578488b 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -1,9 +1,13 @@
-import { useCallback } from "react";
+import {useCallback} from "react";
+
 import SqlEditor from "../../../../../components/SqlEditor";
 import useSearchStore from "../../../SearchState/index";
 
+
 /**
  * Renders SQL query input.
+ *
+ * @return
  */
 const SqlQueryInput = () => {
     const handleChange = useCallback((value: string | undefined) => {
@@ -13,9 +17,8 @@ const SqlQueryInput = () => {
 
     return (
         <SqlEditor
-            height="150px"
-            onChange={handleChange}
-        />
+            height={"150px"}
+            onChange={handleChange}/>
     );
 };
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
index 09e50fec68..b6e4c49f1c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
@@ -1,15 +1,15 @@
 import {
-    CLP_STORAGE_ENGINES,
     CLP_QUERY_ENGINES,
-    SETTINGS_STORAGE_ENGINE,
+    CLP_STORAGE_ENGINES,
     SETTINGS_QUERY_ENGINE,
+    SETTINGS_STORAGE_ENGINE,
 } from "../../../config";
 import Dataset from "./Dataset";
 import styles from "./index.module.css";
-import QueryInput from "./QueryInput";
 import RunButton from "./Presto/RunButton";
-import SearchButton from "./SearchButton";
 import SqlQueryInput from "./Presto/SqlQueryInput";
+import QueryInput from "./QueryInput";
+import SearchButton from "./SearchButton";
 import TimeRangeInput from "./TimeRangeInput";
 
 
@@ -31,19 +31,21 @@ const SearchControls = () => {
     return (
         <form onSubmit={handleSubmit}>
             <div className={styles["searchControlsContainer"]}>
-                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ? (
-                    <>
-                        {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
-                        <QueryInput/>
-                        <TimeRangeInput/>
-                        <SearchButton/>
-                    </>
-                ) : (
-                    <>
-                        <SqlQueryInput/>
-                        <RunButton/>
-                    </>
-                )}
+                {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.NATIVE ?
+                    (
+                        <>
+                            {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
+                            <QueryInput/>
+                            <TimeRangeInput/>
+                            <SearchButton/>
+                        </>
+                    ) :
+                    (
+                        <>
+                            <SqlQueryInput/>
+                            <RunButton/>
+                        </>
+                    )}
             </div>
         </form>
     );

From bdfe59dfe220703581497818af73a7e621f01e96 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 15:54:52 +0000
Subject: [PATCH 04/13] latest

---
 .../client/src/components/SqlEditor/index.tsx    |  2 ++
 .../SearchControls/Presto/RunButton/index.tsx    | 16 ++++++----------
 .../Presto/SqlQueryInput/index.module.css        |  4 ++++
 .../Presto/SqlQueryInput/index.tsx               |  9 ++++++---
 4 files changed, 18 insertions(+), 13 deletions(-)
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index df7a7d053d..ba4bc7eed5 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -69,7 +69,9 @@ const SqlEditor = (props: SqlEditorProps) => {
                 placeholder: "Enter your SQL query",
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
+                automaticLayout: true,
             }}
+            width="100%"
             {...props}/>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
index 4a395e62d6..e4fa8642f9 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
@@ -4,8 +4,7 @@ import {
     Tooltip,
 } from "antd";
 
-import useSearchStore, {SEARCH_STATE_DEFAULT} from "../../../SearchState/index";
-import styles from "../../SearchButton/SubmitButton/index.module.css";
+import useSearchStore from "../../../SearchState/index";
 
 
 /**
@@ -16,20 +15,17 @@ import styles from "../../SearchButton/SubmitButton/index.module.css";
 const RunButton = () => {
     const queryString = useSearchStore((state) => state.queryString);
 
-    const isQueryStringEmpty = queryString === SEARCH_STATE_DEFAULT.queryString;
-
-    let tooltipTitle = "";
-    if (isQueryStringEmpty) {
-        tooltipTitle = "Enter SQL query to run";
-    }
+    const isQueryStringEmpty = queryString === "";
+    const tooltipTitle = isQueryStringEmpty ? "Enter SQL query to run" : "";
 
     return (
         <Tooltip title={tooltipTitle}>
             <Button
-                className={styles["gradientButton"] || ""}
                 icon={<CaretRightOutlined/>}
+                color="green"
+                variant ="solid"
                 size={"large"}
-                type={"primary"}
+                disabled={isQueryStringEmpty}
             >
                 Run
             </Button>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css
new file mode 100644
index 0000000000..8f9f1c6990
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css
@@ -0,0 +1,4 @@
+.editorWrapper {
+    width: 100%;
+    min-width: 0;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index 91b578488b..65babff8f5 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -2,6 +2,7 @@ import {useCallback} from "react";
 
 import SqlEditor from "../../../../../components/SqlEditor";
 import useSearchStore from "../../../SearchState/index";
+import styles from "./index.module.css";
 
 
 /**
@@ -16,9 +17,11 @@ const SqlQueryInput = () => {
     }, []);
 
     return (
-        <SqlEditor
-            height={"150px"}
-            onChange={handleChange}/>
+        <div className={styles[`editorWrapper`] || "" }>
+            <SqlEditor
+                height={"150px"}
+                onChange={handleChange}/>
+        </div>
     );
 };
 

From bf9fae1d059f305ea8cc5557c21c7f9d30f31ba2 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 16:02:19 +0000
Subject: [PATCH 05/13] latest

---
 .../webui/client/src/components/SqlEditor/index.tsx  |  2 --
 .../SearchControls/Presto/RunButton/index.tsx        | 12 +++++++-----
 .../SearchControls/Presto/SqlQueryInput/index.tsx    |  2 +-
 .../SearchButton/SubmitButton/index.tsx              |  4 ++--
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index ba4bc7eed5..df7a7d053d 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -69,9 +69,7 @@ const SqlEditor = (props: SqlEditorProps) => {
                 placeholder: "Enter your SQL query",
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
-                automaticLayout: true,
             }}
-            width="100%"
             {...props}/>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
index e4fa8642f9..839d96209f 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/RunButton/index.tsx
@@ -15,17 +15,19 @@ import useSearchStore from "../../../SearchState/index";
 const RunButton = () => {
     const queryString = useSearchStore((state) => state.queryString);
 
-    const isQueryStringEmpty = queryString === "";
-    const tooltipTitle = isQueryStringEmpty ? "Enter SQL query to run" : "";
+    const isQueryStringEmpty = "" === queryString;
+    const tooltipTitle = isQueryStringEmpty ?
+        "Enter SQL query to run" :
+        "";
 
     return (
         <Tooltip title={tooltipTitle}>
             <Button
+                color={"green"}
+                disabled={isQueryStringEmpty}
                 icon={<CaretRightOutlined/>}
-                color="green"
-                variant ="solid"
                 size={"large"}
-                disabled={isQueryStringEmpty}
+                variant={"solid"}
             >
                 Run
             </Button>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index 65babff8f5..71fc83e692 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -17,7 +17,7 @@ const SqlQueryInput = () => {
     }, []);
 
     return (
-        <div className={styles[`editorWrapper`] || "" }>
+        <div className={styles["editorWrapper"] || ""}>
             <SqlEditor
                 height={"150px"}
                 onChange={handleChange}/>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx
index c416428c62..b325c28301 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/SearchButton/SubmitButton/index.tsx
+++ b/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.

From f4757af9fb7bd9f49fc583991c598c28cc29eb94 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 16:07:32 +0000
Subject: [PATCH 06/13] latest

---
 .../SearchControls/Presto/SqlQueryInput/index.module.css       | 3 ++-
 .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx   | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css
index 8f9f1c6990..e27abcd719 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.module.css
@@ -1,4 +1,5 @@
-.editorWrapper {
+/* Allows the editor to shrink when page width decreases */
+.input {
     width: 100%;
     min-width: 0;
 }
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index 71fc83e692..bdf12592cf 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -17,7 +17,7 @@ const SqlQueryInput = () => {
     }, []);
 
     return (
-        <div className={styles["editorWrapper"] || ""}>
+        <div className={styles["input"] || ""}>
             <SqlEditor
                 height={"150px"}
                 onChange={handleChange}/>

From 0d3eba379e02bd18a4518b2ff7763cf7ee87b817 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 21:20:48 +0000
Subject: [PATCH 07/13] latest

---
 .../webui/client/src/components/SqlEditor/index.tsx   |  2 ++
 .../client/src/components/SqlEditor/monaco-config.ts  | 11 +++++++++++
 components/webui/client/vite.config.ts                |  7 +++++++
 3 files changed, 20 insertions(+)
 create mode 100644 components/webui/client/src/components/SqlEditor/monaco-config.ts

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index df7a7d053d..0d69f47895 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -7,6 +7,8 @@ import {
 } 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">;
 
diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
new file mode 100644
index 0000000000..aacfa449ca
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/monaco-config.ts
@@ -0,0 +1,11 @@
+import { loader } from '@monaco-editor/react';
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+
+self.MonacoEnvironment = {
+    getWorker: () => {
+        return new EditorWorker();
+    },
+};
+
+loader.config({ monaco });
diff --git a/components/webui/client/vite.config.ts b/components/webui/client/vite.config.ts
index 76e70f3563..ec97467ce1 100644
--- a/components/webui/client/vite.config.ts
+++ b/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(),

From 57de1a1a44d4a5acb45d4d1752fefbf83aa49392 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 22:18:13 +0000
Subject: [PATCH 08/13] latest

---
 .../client/src/components/SqlEditor/monaco-config.ts   | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
index aacfa449ca..d1f0743ba3 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-config.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-config.ts
@@ -1,6 +1,8 @@
-import { loader } from '@monaco-editor/react';
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
-import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+/* 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";
+
 
 self.MonacoEnvironment = {
     getWorker: () => {
@@ -8,4 +10,4 @@ self.MonacoEnvironment = {
     },
 };
 
-loader.config({ monaco });
+loader.config({monaco});

From 89fe75e55fd8751fc0e6dc8ddc10f3320978f108 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 22:50:29 +0000
Subject: [PATCH 09/13] latest

---
 .../client/src/components/SqlEditor/monaco-config.ts     | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
index d1f0743ba3..98482ed602 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-config.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-config.ts
@@ -1,13 +1,12 @@
 /* eslint-disable import/default */
 import {loader} from "@monaco-editor/react";
-import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+import * as monaco from 'monaco-editor';
 import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
 
-
 self.MonacoEnvironment = {
-    getWorker: () => {
-        return new EditorWorker();
-    },
+  getWorker() {
+    return new EditorWorker();
+  },
 };
 
 loader.config({monaco});

From e3dc4a4780c72349ba54b3e2e4b3c60d26785d1b Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Fri, 18 Jul 2025 23:05:02 +0000
Subject: [PATCH 10/13] latest

---
 .../webui/client/src/components/SqlEditor/monaco-config.ts   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
index 98482ed602..8e00895771 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-config.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-config.ts
@@ -1,7 +1,10 @@
 /* eslint-disable import/default */
 import {loader} from "@monaco-editor/react";
-import * as monaco from 'monaco-editor';
+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 = {
   getWorker() {

From b6eb73a5d11e495da16e83fda33cdc468a3a9723 Mon Sep 17 00:00:00 2001
From: Marco <david.marcovitch@yscope.com>
Date: Mon, 21 Jul 2025 14:31:56 +0000
Subject: [PATCH 11/13] latest

---
 .../src/components/SqlEditor/monaco-config.ts    | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
index 8e00895771..c8c7beace6 100644
--- a/components/webui/client/src/components/SqlEditor/monaco-config.ts
+++ b/components/webui/client/src/components/SqlEditor/monaco-config.ts
@@ -1,15 +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"
+import "monaco-editor/esm/vs/editor/editor.all.js";
+
 
 self.MonacoEnvironment = {
-  getWorker() {
-    return new EditorWorker();
-  },
+    /**
+     * Creates a web worker for Monaco Editor.
+     *
+     * @return
+     */
+    getWorker () {
+        return new EditorWorker();
+    },
 };
 
 loader.config({monaco});

From 126782e152682ff167562163740467004adaea45 Mon Sep 17 00:00:00 2001
From: hoophalab <200652805+hoophalab@users.noreply.github.com>
Date: Tue, 22 Jul 2025 17:24:57 -0400
Subject: [PATCH 12/13] address comments

---
 .../client/src/components/SqlEditor/index.tsx | 83 ++++++++++++++++---
 .../Presto/SqlQueryInput/index.tsx            |  1 -
 2 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index 0d69f47895..722f136a74 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -1,4 +1,8 @@
-import {useEffect} from "react";
+import {
+    useCallback,
+    useEffect,
+    useState,
+} from "react";
 
 import {
     Editor,
@@ -6,10 +10,13 @@ import {
     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-config";
 
 
+const MAX_VISIBLE_LINES: number = 5;
+
 type SqlEditorProps = Omit<EditorProps, "language">;
 
 /**
@@ -19,17 +26,16 @@ type SqlEditorProps = Omit<EditorProps, "language">;
  * @return
  */
 const SqlEditor = (props: SqlEditorProps) => {
-    const monaco = useMonaco();
-
+    const monacoEditor = useMonaco();
 
     useEffect(() => {
-        if (null === monaco) {
+        if (null === monacoEditor) {
             return () => {
             };
         }
 
         // Adds autocomplete suggestions for SQL keywords on editor load
-        const provider = monaco.languages.registerCompletionItemProvider("sql", {
+        const provider = monacoEditor.languages.registerCompletionItemProvider("sql", {
             provideCompletionItems: (model, position) => {
                 const word = model.getWordUntilPosition(position);
                 const range = {
@@ -39,21 +45,74 @@ const SqlEditor = (props: SqlEditorProps) => {
                     endColumn: word.endColumn,
                 };
                 const suggestions = sqlLanguage.keywords.map((keyword: string) => ({
-                    detail: "SQL Keyword",
+                    detail: "Presto SQL (CLP)",
                     insertText: `${keyword} `,
-                    kind: monaco.languages.CompletionItemKind.Keyword,
+                    kind: monacoEditor.languages.CompletionItemKind.Keyword,
                     label: keyword,
                     range: range,
                 }));
 
-                return {suggestions: suggestions};
+                // 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();
         };
-    }, [monaco]);
+    }, [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
@@ -63,15 +122,19 @@ const SqlEditor = (props: SqlEditorProps) => {
             // white background is less jarring.
             loading={<div style={{backgroundColor: "white", height: "100%", width: "100%"}}/>}
             options={{
-                fontSize: 14,
+                automaticLayout: true,
+                folding: isContentMultiline,
+                fontSize: 18,
                 lineNumbers: "on",
                 lineNumbersMinChars: 2,
                 minimap: {enabled: false},
                 overviewRulerBorder: false,
                 placeholder: "Enter your SQL query",
+                renderLineHighlightOnlyWhenFocus: true,
                 scrollBeyondLastLine: false,
                 wordWrap: "on",
             }}
+            onMount={handleMonacoMount}
             {...props}/>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index bdf12592cf..e4063ef92d 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -19,7 +19,6 @@ const SqlQueryInput = () => {
     return (
         <div className={styles["input"] || ""}>
             <SqlEditor
-                height={"150px"}
                 onChange={handleChange}/>
         </div>
     );

From 4660e421f3686bd82cd43b3603332460ee7a9b10 Mon Sep 17 00:00:00 2001
From: hoophalab <200652805+hoophalab@users.noreply.github.com>
Date: Thu, 24 Jul 2025 17:10:51 -0400
Subject: [PATCH 13/13] address comments

---
 .../client/src/components/SqlEditor/index.tsx |  9 ++++--
 .../src/components/SqlEditor/monaco-config.ts | 21 --------------
 .../src/components/SqlEditor/monaco-loader.ts | 29 +++++++++++++++++++
 .../Presto/SqlQueryInput/index.tsx            |  3 +-
 4 files changed, 36 insertions(+), 26 deletions(-)
 delete mode 100644 components/webui/client/src/components/SqlEditor/monaco-config.ts
 create mode 100644 components/webui/client/src/components/SqlEditor/monaco-loader.ts

diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx
index 722f136a74..90eaf72794 100644
--- a/components/webui/client/src/components/SqlEditor/index.tsx
+++ b/components/webui/client/src/components/SqlEditor/index.tsx
@@ -12,7 +12,7 @@ import {
 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-config";
+import "./monaco-loader";
 
 
 const MAX_VISIBLE_LINES: number = 5;
@@ -124,8 +124,11 @@ const SqlEditor = (props: SqlEditorProps) => {
             options={{
                 automaticLayout: true,
                 folding: isContentMultiline,
-                fontSize: 18,
-                lineNumbers: "on",
+                fontSize: 20,
+                lineHeight: 30,
+                lineNumbers: isContentMultiline ?
+                    "on" :
+                    "off",
                 lineNumbersMinChars: 2,
                 minimap: {enabled: false},
                 overviewRulerBorder: false,
diff --git a/components/webui/client/src/components/SqlEditor/monaco-config.ts b/components/webui/client/src/components/SqlEditor/monaco-config.ts
deleted file mode 100644
index c8c7beace6..0000000000
--- a/components/webui/client/src/components/SqlEditor/monaco-config.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/* 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});
diff --git a/components/webui/client/src/components/SqlEditor/monaco-loader.ts b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
new file mode 100644
index 0000000000..8a7c7af83f
--- /dev/null
+++ b/components/webui/client/src/components/SqlEditor/monaco-loader.ts
@@ -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});
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
index e4063ef92d..c831a6c53c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx
@@ -18,8 +18,7 @@ const SqlQueryInput = () => {
 
     return (
         <div className={styles["input"] || ""}>
-            <SqlEditor
-                onChange={handleChange}/>
+            <SqlEditor onChange={handleChange}/>
         </div>
     );
 };