Skip to content

feat(webui): Move run button under SQL query input; Modify SQL editor theming to look like AntD input. #1248

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 27, 2025
Merged

feat(webui): Move run button under SQL query input; Modify SQL editor theming to look like AntD input. #1248

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3188d90
latest
Aug 21, 2025
d9f2b74
latest
Aug 21, 2025
c5f23d5
latest
Aug 21, 2025
a810e09
latest
Aug 26, 2025
9dca18f
latest
Aug 27, 2025
8cf4126
latest
Aug 27, 2025
b09c0ca
latest
Aug 27, 2025
4e3e12b
latest
Aug 27, 2025
a1f3f44
latest
Aug 27, 2025
b7d6f9e
Merge branch 'main' into moveQuery
hoophalab Aug 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 28 additions & 13 deletions components/webui/client/src/components/SqlEditor/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,21 +53,31 @@ const SqlEditor = (props: SqlEditorProps) => {
onEditorReady?.();
}, [onEditorReady]);

// Define disabled theme for monaco editor
// Define default and disabled themes for monaco editor
useEffect(() => {
if (null === monacoEditor) {
return;
}

monacoEditor.editor.defineTheme("default-theme", {
base: "vs",
inherit: true,
rules: [],
colors: {
"editor.background": color(token.colorBgContainer).hexa(),
"editor.foreground": color(token.colorText).hexa(),
"focusBorder": "#0000",
},
});

monacoEditor.editor.defineTheme("disabled-theme", {
base: "vs",
inherit: true,
rules: [],
colors: {
"editor.background": color(token.colorBgContainerDisabled).hexa(),
"editor.foreground": color(token.colorTextDisabled).hexa(),

// transparent
"focusBorder": "#00000000",
"focusBorder": "#0000",
},
});
}, [
Expand All @@ -77,37 +87,42 @@ const SqlEditor = (props: SqlEditorProps) => {

return (
<div
style={
disabled ?
{pointerEvents: "none"} :
{}
}
style={{
border: `1px solid ${token.colorBorder}`,
borderRadius: token.borderRadius,
pointerEvents: disabled ?
"none" :
"auto",
}}
>
<Editor
language={"sql"}
loading={
<div
style={{
backgroundColor: "white",
backgroundColor: token.colorBgContainer,
height: "100%",
width: "100%",
}}/>
}
options={{
automaticLayout: true,
folding: false,
fontSize: 16,
lineNumbers: "off",
minimap: {enabled: false},
overviewRulerBorder: false,
padding: {
top: token.paddingXS,
bottom: token.paddingXS,
},
placeholder: "Enter your SQL query",
renderLineHighlightOnlyWhenFocus: true,
renderLineHighlight: "none",
scrollBeyondLastLine: false,
wordWrap: "on",
}}
theme={disabled ?
"disabled-theme" :
"light"}
"default-theme"}
onMount={handleEditorDidMount}
{...editorProps}/>
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/webui/client/src/components/SqlEditor/monaco-loader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
/* eslint-disable import/default, @stylistic/max-len */
/* 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";


/* eslint-enable import/default, @stylistic/max-len */
/* eslint-enable import/default */


self.MonacoEnvironment = {
Expand Down
2 changes: 1 addition & 1 deletion .../client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/CancelButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const CancelButton = () => {
className={styles["cancelButton"] || ""}
color={"red"}
icon={<CloseOutlined/>}
size={"large"}
size={"middle"}
variant={"solid"}
onClick={handleClick}
>
Expand Down
2 changes: 1 addition & 1 deletion ...bui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const RunButton = () => {
className={styles["runButton"] || ""}
color={"green"}
icon={<CaretRightOutlined/>}
size={"large"}
size={"middle"}
variant={"solid"}
disabled={isQueryStringEmpty ||
searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING}
Expand Down
2 changes: 1 addition & 1 deletion .../webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.runButtonContainer {
width: 130px;
width: 100px;
}
4 changes: 2 additions & 2 deletions .../SearchPage/SearchQueryStatus/Results.tsx → ...ge/SearchControls/QueryStatus/Results.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import {
Typography,
} from "antd";

import useSearchStore from "../SearchState/index";
import {SEARCH_UI_STATE} from "../SearchState/typings";
import useSearchStore from "../../SearchState/index";
import {SEARCH_UI_STATE} from "../../SearchState/typings";


const {Text} = Typography;
Expand Down
11 changes: 5 additions & 6 deletions ...es/SearchPage/SearchQueryStatus/index.tsx → ...Page/SearchControls/QueryStatus/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import {Typography} from "antd";

import useSearchStore from "../SearchState/index";
import {SEARCH_UI_STATE} from "../SearchState/typings";
import styles from "./index.module.css";
import useSearchStore from "../../SearchState/index";
import {SEARCH_UI_STATE} from "../../SearchState/typings";
import Results from "./Results";


Expand All @@ -13,14 +12,14 @@ const {Text} = Typography;
*
* @return
*/
const SearchQueryStatus = () => {
const QueryStatus = () => {
const {
searchJobId,
searchUiState,
} = useSearchStore();

return (
<div className={styles["status"]}>
<div>
{(searchUiState === SEARCH_UI_STATE.QUERYING ||
searchUiState === SEARCH_UI_STATE.DONE) && (
<Text type={"secondary"}>
Expand All @@ -39,4 +38,4 @@ const SearchQueryStatus = () => {
};


export default SearchQueryStatus;
export default QueryStatus;
17 changes: 17 additions & 0 deletions components/webui/client/src/pages/SearchPage/SearchControls/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,21 @@
.searchControlsContainer {
display: flex;
flex-direction: column;
gap: 5px;
}

.inputsAndButtonRow {
display: flex;
gap: 10px;
}

.buttonAndStatusRow {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}

.status {
margin-left: 2px;
}
35 changes: 22 additions & 13 deletions components/webui/client/src/pages/SearchPage/SearchControls/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import styles from "./index.module.css";
import SqlQueryInput from "./Presto/SqlQueryInput";
import SqlSearchButton from "./Presto/SqlSearchButton";
import QueryInput from "./QueryInput";
import QueryStatus from "./QueryStatus";
import SearchButton from "./SearchButton";
import TimeRangeInput from "./TimeRangeInput";

Expand All @@ -23,30 +24,38 @@ const handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
};

/**
* Renders controls for submitting queries.
* Renders controls for submitting queries and the query status.
*
* @return
*/
const SearchControls = () => {
return (
<form onSubmit={handleSubmit}>
<div className={styles["searchControlsContainer"]}>
{SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
(
<>
{SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ?
(
<div className={styles["searchControlsContainer"]}>
<div className={styles["inputsAndButtonRow"]}>
{CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && <Dataset/>}
<QueryInput/>
<TimeRangeInput/>
<SearchButton/>
</>
) :
(
<>
<SqlQueryInput/>
</div>
<div className={styles["status"]}>
<QueryStatus/>
</div>
</div>
) :
(
<div className={styles["searchControlsContainer"]}>
<SqlQueryInput/>
<div className={styles["buttonAndStatusRow"]}>
<div className={styles["status"]}>
<QueryStatus/>
</div>
<SqlSearchButton/>
</>
)}
</div>
</div>
</div>
)}
</form>
);
};
Expand Down
8 changes: 0 additions & 8 deletions components/webui/client/src/pages/SearchPage/SearchQueryStatus/index.module.css
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions components/webui/client/src/pages/SearchPage/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.searchPageContainer {
display: flex;
flex-direction: column;
gap: 16px;
padding: 24px 16px 16px;
gap: 16px;
padding: 16px 16px 16px;
Comment on lines +4 to +5
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Use padding shorthand for clarity

Equivalent and shorter.

-    gap: 16px;
-    padding: 16px 16px 16px;
+    gap: 16px;
+    padding: 16px;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
gap: 16px;
padding: 16px 16px 16px;
gap: 16px;
padding: 16px;
🤖 Prompt for AI Agents 
In components/webui/client/src/pages/SearchPage/index.module.css around lines
4-5, the padding is written as "padding: 16px 16px 16px;" which is redundant;
replace it with the concise equivalent "padding: 16px;" to use the shorthand and
keep the behavior identical.

}
6 changes: 1 addition & 5 deletions components/webui/client/src/pages/SearchPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
import styles from "./index.module.css";
import {ProgressBar} from "./Presto/ProgressBar";
import SearchControls from "./SearchControls";
import SearchQueryStatus from "./SearchQueryStatus";
import SearchResultsTable from "./SearchResults/SearchResultsTable";
import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline";
import {useUpdateStateWithMetadata} from "./SearchState/useUpdateStateWithMetadata";
Expand All @@ -23,10 +22,7 @@ const SearchPage = () => {
<>
{SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
<div className={styles["searchPageContainer"]}>
<div>
<SearchControls/>
<SearchQueryStatus/>
</div>
<SearchControls/>
{SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && <SearchResultsTimeline/>}
<SearchResultsTable/>
Comment on lines 23 to 27
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Minor readability: factor out the engine check to avoid repetition.

Extracting a local isPresto flag improves readability and keeps the engine condition consistent across the component.

   useUpdateStateWithMetadata();

-  return (
+  const isPresto = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO;
+  return (
     <>
-      {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
+      {isPresto && <ProgressBar/>}
       <div className={styles["searchPageContainer"]}>
         <SearchControls/>
-        {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && <SearchResultsTimeline/>}
+        {false == isPresto && <SearchResultsTimeline/>}
         <SearchResultsTable/>
       </div>
     </>
   );
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
{SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && <ProgressBar/>}
<div className={styles["searchPageContainer"]}>
<div>
<SearchControls/>
<SearchQueryStatus/>
</div>
<SearchControls/>
{SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && <SearchResultsTimeline/>}
<SearchResultsTable/>
useUpdateStateWithMetadata();
const isPresto = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO;
return (
<>
{isPresto && <ProgressBar/>}
<div className={styles["searchPageContainer"]}>
<SearchControls/>
{false == isPresto && <SearchResultsTimeline/>}
<SearchResultsTable/>
</div>
</>
);
🤖 Prompt for AI Agents 
In components/webui/client/src/pages/SearchPage/index.tsx around lines 23 to 27,
the code repeats the engine check SETTINGS_QUERY_ENGINE ===
CLP_QUERY_ENGINES.PRESTO in multiple JSX spots; introduce a local boolean const
(e.g. isPresto) at the top of the component by evaluating that expression once,
then replace the repeated checks with the isPresto variable so the JSX reads
{isPresto && <ProgressBar/>} and {!isPresto && <SearchResultsTimeline/>},
improving readability and ensuring a single source of truth for the engine
condition.

</div>
Expand Down