From 004a12daac02c822d4cda8c4d86f0a350a8f9a80 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 2 Sep 2025 19:30:39 +0000 Subject: [PATCH 01/22] latest --- .../client/src/components/SqlEditor/index.tsx | 4 +- .../client/src/components/SqlInput/index.ts | 0 .../client/src/components/SqlInput/index.tsx | 119 ++++++++++++++++++ .../client/src/pages/SearchPage/index.tsx | 12 ++ 4 files changed, 133 insertions(+), 2 deletions(-) create mode 100644 components/webui/client/src/components/SqlInput/index.ts create mode 100644 components/webui/client/src/components/SqlInput/index.tsx diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 98a9c3259a..394cf90e99 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -25,7 +25,7 @@ type SqlEditorProps = Omit & React.RefAttributes void; + onEditorReady?: (editor: monaco.editor.IStandaloneCodeEditor) => void; }; /** @@ -50,7 +50,7 @@ const SqlEditor = (props: SqlEditorProps) => { editor: monaco.editor.IStandaloneCodeEditor, ) => { editorRef.current = editor; - onEditorReady?.(); + onEditorReady?.(editor); }, [onEditorReady]); // Define default and disabled themes for monaco editor diff --git a/components/webui/client/src/components/SqlInput/index.ts b/components/webui/client/src/components/SqlInput/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/webui/client/src/components/SqlInput/index.tsx b/components/webui/client/src/components/SqlInput/index.tsx new file mode 100644 index 0000000000..fcfc2d5e85 --- /dev/null +++ b/components/webui/client/src/components/SqlInput/index.tsx @@ -0,0 +1,119 @@ +import {forwardRef, useCallback} from "react"; +import SqlEditor, {SqlEditorRef} from "../SqlEditor"; +import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; + +type SqlInputProps = Omit, "height" | "options" | "language" | "onKeyDown" | "onPaste" | "onEditorReady"> & { + /** Placeholder text for the input. */ + placeholder?: string; +}; + +/** + * SqlInput: Monaco-based single-line SQL input. + * Follows: https://farzadyz.me/blog/single-line-monaco-editor + */ +const SqlInput = forwardRef((props, ref) => { + const {placeholder, ...rest} = props; + + // Prevent newlines in the editor + const handleKeyDown = useCallback((e: any) => { + if (e.key === "Enter" || e.key === "Return") { + e.preventDefault(); + e.stopPropagation(); + } + }, []); + + // Prevent pasting newlines + const handlePaste = useCallback((e: any) => { + if (e.clipboardData) { + const text = e.clipboardData.getData("text/plain"); + if (text.includes("\n")) { + e.preventDefault(); + // Only paste the first line + const firstLine = text.split("\n")[0]; + document.execCommand("insertText", false, firstLine); + } + } + }, []); + + // Enforce single line and add custom Enter action + const handleEditorReady = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => { + // Prevent multi-line input by repositioning cursor and trimming value + editor.onDidChangeCursorPosition((e) => { + if (e.position.lineNumber > 1) { + // Trim editor value + editor.setValue(editor.getValue().replace(/\r?\n/g, " ")); + // Bring back the cursor to the end of the first line + editor.setPosition({ + lineNumber: 1, + column: Infinity, + }); + } + }); + + // Add custom action for Enter key (form submission, currently a no-op) + editor.addAction({ + id: "submitInSingleMode", + label: "Submit in single mode", + keybindings: [monaco.KeyCode.Enter], + run: () => { + // You can trigger form submit here if needed + }, + }); + }, []); + + return ( + + ); +}); + +export default SqlInput; diff --git a/components/webui/client/src/pages/SearchPage/index.tsx b/components/webui/client/src/pages/SearchPage/index.tsx index 9345164175..d4c70d75b1 100644 --- a/components/webui/client/src/pages/SearchPage/index.tsx +++ b/components/webui/client/src/pages/SearchPage/index.tsx @@ -8,6 +8,7 @@ import SearchControls from "./SearchControls"; import SearchResultsTable from "./SearchResults/SearchResultsTable"; import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline"; import {useUpdateStateWithMetadata} from "./SearchState/useUpdateStateWithMetadata"; +import SqlInput from "../../components/SqlInput"; /** @@ -22,10 +23,21 @@ const SearchPage = () => { <> {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && }
+ + + + + + + + + + {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && }
+ ); }; From 7194d783ebb34d4c967c2ff627359dcd1ad885f4 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 4 Sep 2025 15:34:55 +0000 Subject: [PATCH 02/22] latest --- .../client/src/components/SqlEditor/index.tsx | 35 ++---- .../client/src/components/SqlInput/index.ts | 0 .../client/src/components/SqlInput/index.tsx | 102 +++++------------- .../Presto/SqlQueryInput/index.tsx | 25 +++-- 4 files changed, 50 insertions(+), 112 deletions(-) delete mode 100644 components/webui/client/src/components/SqlInput/index.ts diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 394cf90e99..3bd9e54569 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, - useImperativeHandle, useRef, } from "react"; @@ -16,12 +15,9 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import "./monaco-loader"; +type SqlEditorType = monaco.editor.IStandaloneCodeEditor; -type SqlEditorRef = { - focus: () => void; -}; - -type SqlEditorProps = Omit & React.RefAttributes & { +type SqlEditorProps = Omit & { disabled: boolean; /** Callback when the editor is mounted and ref is ready to use. */ @@ -35,17 +31,11 @@ type SqlEditorProps = Omit & React.RefAttributes { - const {ref, disabled, onEditorReady, ...editorProps} = props; + const {disabled, onEditorReady, ...editorProps} = props; const editorRef = useRef(null); const monacoEditor = useMonaco(); const {token} = theme.useToken(); - useImperativeHandle(ref, () => ({ - focus: () => { - editorRef.current?.focus(); - }, - }), []); - const handleEditorDidMount = useCallback(( editor: monaco.editor.IStandaloneCodeEditor, ) => { @@ -105,21 +95,6 @@ const SqlEditor = (props: SqlEditorProps) => { width: "100%", }}/> } - options={{ - automaticLayout: true, - folding: false, - lineNumbers: "off", - minimap: {enabled: false}, - overviewRulerBorder: false, - padding: { - top: token.paddingXS, - bottom: token.paddingXS, - }, - placeholder: "Enter your SQL query", - renderLineHighlight: "none", - scrollBeyondLastLine: false, - wordWrap: "on", - }} theme={disabled ? "disabled-theme" : "default-theme"} @@ -130,4 +105,6 @@ const SqlEditor = (props: SqlEditorProps) => { }; export default SqlEditor; -export type {SqlEditorRef}; +export type { + SqlEditorType, +}; diff --git a/components/webui/client/src/components/SqlInput/index.ts b/components/webui/client/src/components/SqlInput/index.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/webui/client/src/components/SqlInput/index.tsx b/components/webui/client/src/components/SqlInput/index.tsx index fcfc2d5e85..d519d5062c 100644 --- a/components/webui/client/src/components/SqlInput/index.tsx +++ b/components/webui/client/src/components/SqlInput/index.tsx @@ -1,100 +1,42 @@ -import {forwardRef, useCallback} from "react"; -import SqlEditor, {SqlEditorRef} from "../SqlEditor"; -import * as monaco from "monaco-editor/esm/vs/editor/editor.api"; +// Reference: https://github.com/vikyd/vue-monaco-singleline/tree/master +import {useCallback} from "react"; +import SqlEditor, {SqlEditorType} from "../SqlEditor"; -type SqlInputProps = Omit, "height" | "options" | "language" | "onKeyDown" | "onPaste" | "onEditorReady"> & { - /** Placeholder text for the input. */ - placeholder?: string; +type SqlInputProps = { + disabled: boolean; + onChange?: (value: string | undefined) => void; }; /** - * SqlInput: Monaco-based single-line SQL input. - * Follows: https://farzadyz.me/blog/single-line-monaco-editor + * Single-line SQL input. */ -const SqlInput = forwardRef((props, ref) => { - const {placeholder, ...rest} = props; +const SqlInput = (props: SqlInputProps) => { - // Prevent newlines in the editor - const handleKeyDown = useCallback((e: any) => { - if (e.key === "Enter" || e.key === "Return") { - e.preventDefault(); - e.stopPropagation(); - } - }, []); - - // Prevent pasting newlines - const handlePaste = useCallback((e: any) => { - if (e.clipboardData) { - const text = e.clipboardData.getData("text/plain"); - if (text.includes("\n")) { - e.preventDefault(); - // Only paste the first line - const firstLine = text.split("\n")[0]; - document.execCommand("insertText", false, firstLine); - } - } - }, []); - - // Enforce single line and add custom Enter action - const handleEditorReady = useCallback((editor: monaco.editor.IStandaloneCodeEditor) => { - // Prevent multi-line input by repositioning cursor and trimming value + const handleEditorReady = useCallback((editor: SqlEditorType) => { + // Prevent multi-line input by repositioning cursor and replacing newlines with empty string. editor.onDidChangeCursorPosition((e) => { if (e.position.lineNumber > 1) { - // Trim editor value - editor.setValue(editor.getValue().replace(/\r?\n/g, " ")); - // Bring back the cursor to the end of the first line + editor.setValue(editor.getValue().replace(/\r?\n/g, "")); editor.setPosition({ lineNumber: 1, column: Infinity, }); } }); - - // Add custom action for Enter key (form submission, currently a no-op) - editor.addAction({ - id: "submitInSingleMode", - label: "Submit in single mode", - keybindings: [monaco.KeyCode.Enter], - run: () => { - // You can trigger form submit here if needed - }, - }); }, []); return ( ((props, ref) => { top: 4, bottom: 4, }, - placeholder: placeholder ?? "Enter SQL", scrollBeyondLastLine: false, - lineHeight: 24, + roundedSelection: false, + find: { + addExtraSpaceOnTop: false, + autoFindInSelection: "never", + seedSearchStringFromSelection: "never", + }, + fixedOverflowWidgets: true, + scrollBeyondLastColumn: 0, + lineNumbersMinChars: 0, + overviewRulerLanes: 0, }} - onKeyDown={handleKeyDown} - onPaste={handlePaste} onEditorReady={handleEditorReady} - {...rest} + {...props} /> ); -}); +}; export default SqlInput; 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 8fe9412578..572e5fac29 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 @@ -5,9 +5,7 @@ import { useState, } from "react"; -import {Nullable} from "src/typings/common"; - -import SqlEditor, {SqlEditorRef} from "../../../../../components/SqlEditor"; +import SqlEditor, {SqlEditorType} from "../../../../../components/SqlEditor"; import useSearchStore from "../../../SearchState/index"; import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; @@ -20,7 +18,7 @@ import styles from "./index.module.css"; */ const SqlQueryInput = () => { const searchUiState = useSearchStore((state) => state.searchUiState); - const editorRef = useRef>(null); + const editorRef = useRef(null); const [isEditorReady, setIsEditorReady] = useState(false); const handleChange = useCallback((value: string | undefined) => { @@ -28,7 +26,8 @@ const SqlQueryInput = () => { updateQueryString(value || ""); }, []); - const handleEditorReady = useCallback(() => { + const handleEditorReady = useCallback((editor: SqlEditorType) => { + editorRef.current = editor setIsEditorReady(true); }, []); @@ -50,11 +49,25 @@ const SqlQueryInput = () => {
From dc7916919b4316aae7d00f4ba21faad7669241a7 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 4 Sep 2025 16:15:05 +0000 Subject: [PATCH 03/22] latest --- .../client/src/components/SqlEditor/index.tsx | 9 ++- .../client/src/components/SqlInput/index.tsx | 64 ++++++++++--------- .../SearchControls/NativeControls.tsx | 32 ++++++++++ .../Presto/FreeformControls.tsx | 32 ++++++++++ .../SearchControls/Presto/GuidedControls.tsx | 28 ++++++++ .../Presto/GuidedModeButton/index.ts | 0 .../ModeButton/FreeformButton/index.tsx | 0 .../Presto/ModeButton/GuidedButton/index.tsx | 0 .../Presto/ModeButton/index.tsx | 0 .../Presto/SqlQueryInput/index.tsx | 2 +- .../pages/SearchPage/SearchControls/index.tsx | 60 +++++------------ .../client/src/pages/SearchPage/index.tsx | 11 ---- 12 files changed, 147 insertions(+), 91 deletions(-) create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/NativeControls.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/FreeformControls.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index 3bd9e54569..df43a211b6 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -1,7 +1,6 @@ import { useCallback, useEffect, - useRef, } from "react"; import { @@ -15,13 +14,14 @@ import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; import "./monaco-loader"; + type SqlEditorType = monaco.editor.IStandaloneCodeEditor; type SqlEditorProps = Omit & { disabled: boolean; /** Callback when the editor is mounted and ref is ready to use. */ - onEditorReady?: (editor: monaco.editor.IStandaloneCodeEditor) => void; + onEditorReady?: (editor: SqlEditorType) => void; }; /** @@ -32,14 +32,12 @@ type SqlEditorProps = Omit & { */ const SqlEditor = (props: SqlEditorProps) => { const {disabled, onEditorReady, ...editorProps} = props; - const editorRef = useRef(null); const monacoEditor = useMonaco(); const {token} = theme.useToken(); const handleEditorDidMount = useCallback(( - editor: monaco.editor.IStandaloneCodeEditor, + editor: SqlEditorType, ) => { - editorRef.current = editor; onEditorReady?.(editor); }, [onEditorReady]); @@ -106,5 +104,6 @@ const SqlEditor = (props: SqlEditorProps) => { export default SqlEditor; export type { + SqlEditorProps, SqlEditorType, }; diff --git a/components/webui/client/src/components/SqlInput/index.tsx b/components/webui/client/src/components/SqlInput/index.tsx index d519d5062c..7ed5e7596d 100644 --- a/components/webui/client/src/components/SqlInput/index.tsx +++ b/components/webui/client/src/components/SqlInput/index.tsx @@ -1,21 +1,24 @@ -// Reference: https://github.com/vikyd/vue-monaco-singleline/tree/master +// Reference: https://github.com/vikyd/vue-monaco-singleline import {useCallback} from "react"; -import SqlEditor, {SqlEditorType} from "../SqlEditor"; -type SqlInputProps = { - disabled: boolean; - onChange?: (value: string | undefined) => void; -}; +import SqlEditor, { + SqlEditorProps, + SqlEditorType, +} from "../SqlEditor"; + /** * Single-line SQL input. + * + * @param props + * @return */ -const SqlInput = (props: SqlInputProps) => { - +const SqlInput = (props: SqlEditorProps) => { const handleEditorReady = useCallback((editor: SqlEditorType) => { - // Prevent multi-line input by repositioning cursor and replacing newlines with empty string. + // Prevent multi-line input by repositioning cursor and replacing newlines with empty + // string. editor.onDidChangeCursorPosition((e) => { - if (e.position.lineNumber > 1) { + if (1 < e.position.lineNumber) { editor.setValue(editor.getValue().replace(/\r?\n/g, "")); editor.setPosition({ lineNumber: 1, @@ -29,38 +32,37 @@ const SqlInput = (props: SqlInputProps) => { + {...props}/> ); }; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/NativeControls.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/NativeControls.tsx new file mode 100644 index 0000000000..ae7b4c7d56 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/NativeControls.tsx @@ -0,0 +1,32 @@ +import { + CLP_STORAGE_ENGINES, + SETTINGS_STORAGE_ENGINE, +} from "../../../config"; +import Dataset from "./Dataset"; +import styles from "./index.module.css"; +import QueryInput from "./QueryInput"; +import QueryStatus from "./QueryStatus"; +import SearchButton from "./SearchButton"; +import TimeRangeInput from "./TimeRangeInput"; + + +/** + * Renders controls and status for clp & clp-s. + * + * @return + */ +const NativeControls = () => ( +
+
+ {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && } + + + +
+
+ +
+
+); + +export default NativeControls; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/FreeformControls.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/FreeformControls.tsx new file mode 100644 index 0000000000..ca38943e32 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/FreeformControls.tsx @@ -0,0 +1,32 @@ +import styles from "../index.module.css"; +import QueryStatus from "../QueryStatus"; +import SqlInterfaceButton from "./SqlInterfaceButton"; +import SqlQueryInput from "./SqlQueryInput"; +import SqlSearchButton from "./SqlSearchButton"; + + +// eslint-disable-next-line no-warning-comments +// TODO: Remove flag and related logic when the new guide UI is fully implemented. +const isGuidedEnabled = "true" === import.meta.env["VITE_GUIDED_DEV"]; + +/** + * Renders controls and status for freeform sql. + * + * @return + */ +const FreeformControls = () => ( +
+ +
+
+ +
+
+ {isGuidedEnabled && } + +
+
+
+); + +export default FreeformControls; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx new file mode 100644 index 0000000000..b069a18cec --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx @@ -0,0 +1,28 @@ +import SqlInput from "../../../../components/SqlInput"; +import styles from "../index.module.css"; +import QueryStatus from "../QueryStatus"; +import SqlInterfaceButton from "./SqlInterfaceButton"; +import SqlSearchButton from "./SqlSearchButton"; + + +/** + * Renders controls and status for guided sql. + * + * @return + */ +const GuidedControls = () => ( +
+ +
+
+ +
+
+ + +
+
+
+); + +export default GuidedControls; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx new file mode 100644 index 0000000000..e69de29bb2 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 572e5fac29..7f897ef034 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 @@ -27,7 +27,7 @@ const SqlQueryInput = () => { }, []); const handleEditorReady = useCallback((editor: SqlEditorType) => { - editorRef.current = editor + editorRef.current = editor; setIsEditorReady(true); }, []); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx index 79413c3f77..abb6d8f5ca 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/index.tsx @@ -1,18 +1,12 @@ 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 SqlInterfaceButton from "./Presto/SqlInterfaceButton"; -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"; +import usePrestoSearchState from "../SearchState/Presto"; +import {PRESTO_SQL_INTERFACE} from "../SearchState/Presto/typings"; +import NativeControls from "./NativeControls"; +import FreeformControls from "./Presto/FreeformControls"; +import GuidedControls from "./Presto/GuidedControls"; /** @@ -30,43 +24,23 @@ const handleSubmit = (ev: React.FormEvent) => { * @return */ const SearchControls = () => { - /* eslint-disable-next-line no-warning-comments */ - // TODO: Remove flag and related logic when the new guide UI is fully implemented. - const isGuidedEnabled = "true" === import.meta.env[`VITE_GUIDED_DEV`]; + const sqlInterface = usePrestoSearchState((state) => state.sqlInterface); + const isPrestoGuided = sqlInterface === PRESTO_SQL_INTERFACE.GUIDED; + + let controls; + if (SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO) { + controls = ; + } else if (isPrestoGuided) { + controls = ; + } else { + controls = ; + } return (
- {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO ? - ( -
-
- {CLP_STORAGE_ENGINES.CLP_S === SETTINGS_STORAGE_ENGINE && } - - - -
-
- -
-
- ) : - ( -
- -
-
- -
-
- {isGuidedEnabled && } - -
-
-
- )} + {controls}
); }; - export default SearchControls; diff --git a/components/webui/client/src/pages/SearchPage/index.tsx b/components/webui/client/src/pages/SearchPage/index.tsx index d4c70d75b1..2697081870 100644 --- a/components/webui/client/src/pages/SearchPage/index.tsx +++ b/components/webui/client/src/pages/SearchPage/index.tsx @@ -8,7 +8,6 @@ import SearchControls from "./SearchControls"; import SearchResultsTable from "./SearchResults/SearchResultsTable"; import SearchResultsTimeline from "./SearchResults/SearchResultsTimeline"; import {useUpdateStateWithMetadata} from "./SearchState/useUpdateStateWithMetadata"; -import SqlInput from "../../components/SqlInput"; /** @@ -23,16 +22,6 @@ const SearchPage = () => { <> {SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO && }
- - - - - - - - - - {SETTINGS_QUERY_ENGINE !== CLP_QUERY_ENGINES.PRESTO && } From 52e83a3673e9cf25ec1b0620f96871ccf0b6e0da Mon Sep 17 00:00:00 2001 From: Marco Date: Mon, 8 Sep 2025 13:51:45 +0000 Subject: [PATCH 04/22] latest --- .../SearchPage/SearchControls/Presto/GuidedModeButton/index.ts | 0 .../SearchControls/Presto/ModeButton/FreeformButton/index.tsx | 0 .../SearchControls/Presto/ModeButton/GuidedButton/index.tsx | 0 .../pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedModeButton/index.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/FreeformButton/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/GuidedButton/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/ModeButton/index.tsx deleted file mode 100644 index e69de29bb2..0000000000 From aa3968cb2240c257802f71eed3f9e2e20623c247 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 9 Sep 2025 15:13:11 +0000 Subject: [PATCH 05/22] latest --- .../components/InputLabel/index.module.css | 9 +++ .../src/components/InputLabel/index.tsx | 35 ++++++++++++ .../client/src/components/SqlEditor/index.tsx | 2 + .../client/src/components/SqlInput/index.tsx | 2 +- .../Presto/GuidedControls.module.css | 49 ++++++++++++++++ .../SearchControls/Presto/GuidedControls.tsx | 57 ++++++++++++++++--- .../SearchControls/Presto/Label.module.css | 22 +++++++ .../SearchControls/Presto/Label.tsx | 39 +++++++++++++ 8 files changed, 205 insertions(+), 10 deletions(-) create mode 100644 components/webui/client/src/components/InputLabel/index.module.css create mode 100644 components/webui/client/src/components/InputLabel/index.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.module.css create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/Label.module.css create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/Label.tsx diff --git a/components/webui/client/src/components/InputLabel/index.module.css b/components/webui/client/src/components/InputLabel/index.module.css new file mode 100644 index 0000000000..6b066d6971 --- /dev/null +++ b/components/webui/client/src/components/InputLabel/index.module.css @@ -0,0 +1,9 @@ +.label { + min-width: 80px; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} diff --git a/components/webui/client/src/components/InputLabel/index.tsx b/components/webui/client/src/components/InputLabel/index.tsx new file mode 100644 index 0000000000..8c3299680e --- /dev/null +++ b/components/webui/client/src/components/InputLabel/index.tsx @@ -0,0 +1,35 @@ +import { + theme, + Typography, +} from "antd"; + +import styles from "./index.module.css"; + +const {Text} = Typography; + +/** + * Renders a label for an input field. + * + * @param children - The label text to display. + * @return + */ +const InputLabel = ({ children }: { children: React.ReactNode }) => { + const {token} = theme.useToken(); + + return ( + + {children} + + ); +}; + +export default InputLabel; diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index df43a211b6..93c8e48504 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -81,6 +81,8 @@ const SqlEditor = (props: SqlEditorProps) => { pointerEvents: disabled ? "none" : "auto", + width: "100%", + height: "100%", }} > { return ( ( -
- -
-
- +
+ +
+ SELECT + +
+
+ FROM + +
+
+ WHERE + +
+
+ +
+
-
- - +
+ +
+ +
+ +
+ FROM + +
+
+ WHERE + +
+
+ ORDER BY + +
+
+ LIMIT +
- -
- -
-
- - +
+
+ +
+
+ + +
); 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 7f897ef034..edda1ed509 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 @@ -49,7 +49,7 @@ const SqlQueryInput = () => {
{
+ +
@@ -58,6 +61,11 @@ const GuidedControls = () => (
+
+ timestamp key + +
+
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx index 4da54e1af9..b377d23d3e 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx @@ -61,7 +61,7 @@ const TimeRangeInput = () => { listHeight={400} options={TIME_RANGE_OPTION_NAMES.map((option) => ({label: option, value: option}))} popupMatchSelectWidth={false} - size={"large"} + size={"middle"} value={timeRangeOption} variant={"filled"} className={timeRangeOption === TIME_RANGE_OPTION.CUSTOM ? @@ -75,7 +75,7 @@ const TimeRangeInput = () => { allowClear={true} className={styles["rangePicker"] || ""} showTime={true} - size={"large"} + size={"middle"} value={timeRange} disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING || searchUiState === SEARCH_UI_STATE.QUERYING} From 202d00296f3b2a9170c6bb3bd74775d100a98913 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 11 Sep 2025 15:55:52 +0000 Subject: [PATCH 08/22] latest --- .../SearchPage/SearchControls/Presto/GuidedControls.tsx | 2 +- .../SearchPage/SearchControls/TimeRangeInput/index.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx index 055e9c7ff9..a0a8317f8f 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx @@ -65,7 +65,7 @@ const GuidedControls = () => ( timestamp key
- +
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx index b377d23d3e..b6a91bfdb6 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx @@ -13,16 +13,19 @@ import { TIME_RANGE_OPTION_DAYJS_MAP, TIME_RANGE_OPTION_NAMES, } from "./utils"; +import type { SelectProps } from 'antd'; +type TimeRangeInputSize = SelectProps['size']; /** * Renders controls for selecting a time range for queries. By default, the component is * a select dropdown with a list of preset time ranges. If the user selects "Custom", * a date range picker is also displayed. * + * @param size The size of the input controls. * @return */ -const TimeRangeInput = () => { +const TimeRangeInput = ({ size = "large" }: { size?: TimeRangeInputSize }) => { const { timeRange, updateTimeRange, @@ -61,7 +64,7 @@ const TimeRangeInput = () => { listHeight={400} options={TIME_RANGE_OPTION_NAMES.map((option) => ({label: option, value: option}))} popupMatchSelectWidth={false} - size={"middle"} + size={size} value={timeRangeOption} variant={"filled"} className={timeRangeOption === TIME_RANGE_OPTION.CUSTOM ? @@ -75,7 +78,7 @@ const TimeRangeInput = () => { allowClear={true} className={styles["rangePicker"] || ""} showTime={true} - size={"middle"} + size={size} value={timeRange} disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING || searchUiState === SEARCH_UI_STATE.QUERYING} From 6aa31be78fe20ed01df5c42c9fc7582057e195a3 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 11 Sep 2025 16:24:00 +0000 Subject: [PATCH 09/22] latest --- .../src/components/InputLabel/index.tsx | 6 +- .../src/components/TimeRangeInput/index.tsx | 0 .../Dataset/DatasetLabel/index.module.css | 9 --- .../Dataset/DatasetLabel/index.tsx | 35 --------- .../SearchControls/Dataset/index.tsx | 6 +- .../SearchControls/Presto/GuidedControls.tsx | 75 ------------------- .../Presto/GuidedControls/From.tsx | 12 +++ .../Presto/GuidedControls/Limit.tsx | 24 ++++++ .../Presto/GuidedControls/OrderBy.tsx | 12 +++ .../Presto/GuidedControls/Select.tsx | 12 +++ .../Presto/GuidedControls/Where.tsx | 12 +++ .../index.module.css} | 0 .../Presto/GuidedControls/index.tsx | 39 ++++++++++ 13 files changed, 119 insertions(+), 123 deletions(-) create mode 100644 components/webui/client/src/components/TimeRangeInput/index.tsx delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx rename components/webui/client/src/pages/SearchPage/SearchControls/Presto/{GuidedControls.module.css => GuidedControls/index.module.css} (100%) create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx diff --git a/components/webui/client/src/components/InputLabel/index.tsx b/components/webui/client/src/components/InputLabel/index.tsx index d9134141f7..1e83abf705 100644 --- a/components/webui/client/src/components/InputLabel/index.tsx +++ b/components/webui/client/src/components/InputLabel/index.tsx @@ -11,10 +11,12 @@ const {Text} = Typography; * Renders a label for an input field. * * @param children The label text to display. + * @param [fontSize] Font size for the label. * @return */ -const InputLabel = ({ children }: { children: React.ReactNode }) => { +const InputLabel = ({ children, fontSize }: { children: React.ReactNode, fontSize?: number | string }) => { const {token} = theme.useToken(); + const resolvedFontSize = fontSize || token.fontSize; return ( { borderBottomLeftRadius: `${token.borderRadius}px`, borderColor: token.colorBorder, borderTopLeftRadius: `${token.borderRadius}px`, - fontSize: token.fontSize, + fontSize: resolvedFontSize, }} > {children} diff --git a/components/webui/client/src/components/TimeRangeInput/index.tsx b/components/webui/client/src/components/TimeRangeInput/index.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css deleted file mode 100644 index 3c494a3fa6..0000000000 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.module.css +++ /dev/null @@ -1,9 +0,0 @@ -.datasetLabel { - min-width: 80px; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; -} diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx deleted file mode 100644 index 0893fe5265..0000000000 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/DatasetLabel/index.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { - theme, - Typography, -} from "antd"; - -import styles from "./index.module.css"; - - -const {Text} = Typography; - -/** - * Renders a label for the dataset selector. - * - * @return - */ -const DatasetLabel = () => { - const {token} = theme.useToken(); - - return ( - - Dataset - - ); -}; - -export default DatasetLabel; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx index 54c7e5a36c..9975c73ff8 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx @@ -8,7 +8,8 @@ import { import useSearchStore from "../../SearchState/index"; import {SEARCH_UI_STATE} from "../../SearchState/typings"; -import DatasetLabel from "./DatasetLabel"; +import InputLabel from "../../../../components/InputLabel"; +import { theme } from "antd"; import styles from "./index.module.css"; import {fetchDatasetNames} from "./sql"; @@ -22,6 +23,7 @@ const Dataset = () => { const dataset = useSearchStore((state) => state.selectDataset); const updateDataset = useSearchStore((state) => state.updateSelectDataset); const searchUiState = useSearchStore((state) => state.searchUiState); + const { token } = theme.useToken(); const [messageApi, contextHolder] = message.useMessage(); @@ -79,7 +81,7 @@ const Dataset = () => { return (
{contextHolder} - + Dataset - -
- - -
-
-
- -
-
- -
- timestamp key - -
- - -
-
-
-); - -export default GuidedControls; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx new file mode 100644 index 0000000000..2c31bfd721 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx @@ -0,0 +1,12 @@ +import InputLabel from "../../../../../components/InputLabel"; +import SqlInput from "../../../../../components/SqlInput"; +import guidedGridStyles from "./index.module.css"; + +const From = () => ( +
+ FROM + +
+); + +export default From; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx new file mode 100644 index 0000000000..59fbb00355 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx @@ -0,0 +1,24 @@ +import InputLabel from "../../../../../components/InputLabel"; +import { Select as AntdSelect } from "antd"; +import guidedGridStyles from "./index.module.css"; + +const limitOptions = [ + { value: 10, label: "10" }, + { value: 50, label: "50" }, + { value: 100, label: "100" }, + { value: 500, label: "500" }, + { value: 1000, label: "1000" }, +]; + +const Limit = () => ( +
+ LIMIT + +
+); + +export default Limit; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx new file mode 100644 index 0000000000..912aaf2f6f --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx @@ -0,0 +1,12 @@ +import InputLabel from "../../../../../components/InputLabel"; +import SqlInput from "../../../../../components/SqlInput"; +import guidedGrid from "./index.module.css"; + +const OrderBy = () => ( +
+ ORDER BY + +
+); + +export default OrderBy; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx new file mode 100644 index 0000000000..4ecec2b762 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx @@ -0,0 +1,12 @@ +import InputLabel from "../../../../../components/InputLabel"; +import SqlInput from "../../../../../components/SqlInput"; +import guidedGridStyles from "./index.module.css"; + +const Select = () => ( +
+ SELECT + +
+); + +export default Select; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx new file mode 100644 index 0000000000..9508d38219 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx @@ -0,0 +1,12 @@ +import InputLabel from "../../../../../components/InputLabel"; +import SqlInput from "../../../../../components/SqlInput"; +import guidedGridStyles from "./index.module.css"; + +const Where = () => ( +
+ WHERE + +
+); + +export default Where; diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css similarity index 100% rename from components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls.module.css rename to components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx new file mode 100644 index 0000000000..fc96f89cf1 --- /dev/null +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx @@ -0,0 +1,39 @@ +import QueryStatus from "../../QueryStatus"; +import SqlInterfaceButton from "../SqlInterfaceButton"; +import SqlSearchButton from "../SqlSearchButton"; +import guidedGrid from "./index.module.css"; +import searchStyles from "../../index.module.css"; +import Select from "./Select"; +import From from "./From"; +import Where from "./Where"; +import OrderBy from "./OrderBy"; +import Limit from "./Limit"; + + +/** + * Renders controls and status for guided sql. + * + * @return + */ +const GuidedControls = () => ( +
+
+ - - - - + Date: Fri, 12 Sep 2025 15:36:38 +0000 Subject: [PATCH 15/22] lint --- .../client/src/pages/SearchPage/SearchControls/Dataset/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx index ac96aecafb..0fbd02ce93 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx @@ -23,7 +23,6 @@ const Dataset = () => { const dataset = useSearchStore((state) => state.selectDataset); const updateDataset = useSearchStore((state) => state.updateSelectDataset); const searchUiState = useSearchStore((state) => state.searchUiState); - const {token} = theme.useToken(); const [messageApi, contextHolder] = message.useMessage(); From 7a3b7f99a9bfaa149d91afbfce56ba10861a8c5d Mon Sep 17 00:00:00 2001 From: Marco Date: Fri, 12 Sep 2025 15:38:35 +0000 Subject: [PATCH 16/22] latest --- .../client/src/pages/SearchPage/SearchControls/Dataset/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx index 0fbd02ce93..d51be205b2 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Dataset/index.tsx @@ -4,7 +4,6 @@ import {useQuery} from "@tanstack/react-query"; import { message, Select, - theme, } from "antd"; import InputLabel from "../../../../components/InputLabel"; From 8d41f91e9a4047e68f5f74700a8dfc6f79f90001 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 17 Sep 2025 13:56:41 +0000 Subject: [PATCH 17/22] latest --- .../src/components/InputLabel/index.tsx | 3 +-- .../src/components/SqlEditor/index.module.css | 6 ++++++ .../client/src/components/SqlEditor/index.tsx | 11 ++++------- .../Presto/GuidedControls/From.tsx | 4 +++- .../Presto/GuidedControls/Limit.tsx | 10 +++++++--- .../Presto/GuidedControls/OrderBy.tsx | 4 +++- .../Presto/GuidedControls/Select.tsx | 4 +++- .../Presto/GuidedControls/Where.tsx | 4 +++- .../Presto/GuidedControls/index.module.css | 19 +++++++++++++++---- 9 files changed, 45 insertions(+), 20 deletions(-) create mode 100644 components/webui/client/src/components/SqlEditor/index.module.css diff --git a/components/webui/client/src/components/InputLabel/index.tsx b/components/webui/client/src/components/InputLabel/index.tsx index 2026693190..3c65678ef5 100644 --- a/components/webui/client/src/components/InputLabel/index.tsx +++ b/components/webui/client/src/components/InputLabel/index.tsx @@ -22,9 +22,8 @@ const InputLabel = ({children}: {children: React.ReactNode}) => { & { disabled: boolean; + className?: string; /** Callback when the editor is mounted and ref is ready to use. */ onEditorReady?: (editor: SqlEditorType) => void; @@ -75,16 +77,11 @@ const SqlEditor = (props: SqlEditorProps) => { return (
(
FROM - +
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx index c75797efaa..049c5a4ca8 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx @@ -1,4 +1,4 @@ -import {Select as AntdSelect} from "antd"; +import {Select} from "antd"; import InputLabel from "../../../../../components/InputLabel"; import guidedGrid from "./index.module.css"; @@ -20,10 +20,14 @@ const LIMIT_OPTIONS = [ const Limit = () => (
LIMIT - + className={ + guidedGrid["noLeftBorderRadiusSelect"] + " " + + guidedGrid["widthSelect"] + } + />
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx index 8d2db7fa10..16480122d0 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx @@ -11,7 +11,9 @@ import guidedGrid from "./index.module.css"; const OrderBy = () => (
ORDER BY - +
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx index 1e6518c3d2..16fad965e7 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx @@ -11,7 +11,9 @@ import guidedGrid from "./index.module.css"; const Select = () => (
SELECT - +
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx index a604b64280..4b1d228f7c 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx @@ -11,7 +11,9 @@ import guidedGrid from "./index.module.css"; const Where = () => (
WHERE - +
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css index 75a75c3c4e..c113b67464 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.module.css @@ -1,21 +1,18 @@ .gridContainer { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); - grid-template-rows: repeat(auto-fit, 30px); - max-width: 1250px; + grid-template-rows: 32px; gap: 5px; } .select { grid-column: span 3; display: flex; - min-width: 200px; } .from { grid-column: span 1; display: flex; - min-width: 200px; } .where { @@ -32,3 +29,17 @@ grid-column: span 1; display: flex; } + +.widthSelect { + width: 100%; +} + +.noLeftBorderRadiusSelect :global(.ant-select-selector) { + border-top-left-radius: 0!important; + border-bottom-left-radius: 0!important; +} + +.noLeftBorderRadius { + border-top-left-radius: 0!important; + border-bottom-left-radius: 0!important; +} From 10f9a2d27bdc4929dc4f4677dd2f69031de889ef Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 17 Sep 2025 18:15:41 +0000 Subject: [PATCH 18/22] latest --- .../webui/client/src/components/SqlEditor/index.tsx | 10 +++++++--- .../SearchControls/Presto/GuidedControls/From.tsx | 2 +- .../SearchControls/Presto/GuidedControls/Limit.tsx | 7 +++---- .../SearchControls/Presto/GuidedControls/OrderBy.tsx | 2 +- .../SearchControls/Presto/GuidedControls/Select.tsx | 2 +- .../SearchControls/Presto/GuidedControls/Where.tsx | 2 +- .../SearchControls/Presto/SqlQueryInput/index.tsx | 2 +- 7 files changed, 15 insertions(+), 12 deletions(-) diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index e14f64f8fc..e784dba88a 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -12,9 +12,10 @@ import {theme} from "antd"; import color from "color"; import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js"; -import "./monaco-loader"; import styles from "./index.module.css"; +import "./monaco-loader"; + type SqlEditorType = monaco.editor.IStandaloneCodeEditor; @@ -77,11 +78,14 @@ const SqlEditor = (props: SqlEditorProps) => { return (
(
FROM
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx index 049c5a4ca8..0e625be254 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx @@ -24,10 +24,9 @@ const Limit = () => ( defaultValue={LIMIT_OPTIONS[0]?.value} options={LIMIT_OPTIONS} className={ - guidedGrid["noLeftBorderRadiusSelect"] + " " + - guidedGrid["widthSelect"] - } - /> + `${guidedGrid["noLeftBorderRadiusSelect"]} ${ + guidedGrid["widthSelect"]}` + }/>
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx index 16480122d0..6d72112f8e 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx @@ -12,7 +12,7 @@ const OrderBy = () => (
ORDER BY
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx index 16fad965e7..1c45238d88 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx @@ -12,7 +12,7 @@ const Select = () => (
SELECT
); diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx index 4b1d228f7c..d5a044e336 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx @@ -12,7 +12,7 @@ const Where = () => (
WHERE
); 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 282c4e9132..4a142ddc5f 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 @@ -6,7 +6,7 @@ import { } from "react"; import SqlEditor, {SqlEditorType} from "../../../../../components/SqlEditor"; -import {Nullable} from "../../../../../typings/common"; +import {Nullable} from "@webui/common/utility-types"; import useSearchStore from "../../../SearchState/index"; import {SEARCH_UI_STATE} from "../../../SearchState/typings"; import styles from "./index.module.css"; From 96b46a1e15255a983d3ce030845e9b5287a69622 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 17 Sep 2025 18:30:19 +0000 Subject: [PATCH 19/22] latest --- .../webui/client/src/components/InputLabel/index.module.css | 4 ++-- components/webui/client/src/components/SqlEditor/index.tsx | 4 ++-- .../src/pages/SearchPage/SearchControls/Dataset/index.tsx | 2 +- .../SearchPage/SearchControls/Presto/GuidedControls/From.tsx | 2 +- .../SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx | 2 +- .../SearchControls/Presto/GuidedControls/OrderBy.tsx | 2 +- .../SearchControls/Presto/GuidedControls/Select.tsx | 2 +- .../SearchPage/SearchControls/Presto/GuidedControls/Where.tsx | 2 +- .../SearchPage/SearchControls/Presto/SqlQueryInput/index.tsx | 1 - 9 files changed, 10 insertions(+), 11 deletions(-) diff --git a/components/webui/client/src/components/InputLabel/index.module.css b/components/webui/client/src/components/InputLabel/index.module.css index da15d3e034..0df437c7ed 100644 --- a/components/webui/client/src/components/InputLabel/index.module.css +++ b/components/webui/client/src/components/InputLabel/index.module.css @@ -5,7 +5,7 @@ padding-right: 10px; align-items: center; justify-content: center; - border-top-right-radius: 0px; - border-bottom-right-radius: 0px; + border-top-right-radius: 0; + border-bottom-right-radius: 0; white-space: nowrap; } diff --git a/components/webui/client/src/components/SqlEditor/index.tsx b/components/webui/client/src/components/SqlEditor/index.tsx index e784dba88a..d0a39dd3a9 100644 --- a/components/webui/client/src/components/SqlEditor/index.tsx +++ b/components/webui/client/src/components/SqlEditor/index.tsx @@ -34,7 +34,7 @@ type SqlEditorProps = Omit & { * @return */ const SqlEditor = (props: SqlEditorProps) => { - const {disabled, onEditorReady, ...editorProps} = props; + const {disabled, onEditorReady, className, ...editorProps} = props; const monacoEditor = useMonaco(); const {token} = theme.useToken(); @@ -79,7 +79,7 @@ const SqlEditor = (props: SqlEditorProps) => { return (
{ options={(data || []).map((option) => ({label: option, value: option}))} placeholder={"None"} showSearch={true} - size={"large"} + size={"middle"} value={dataset} disabled={ searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING || diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx index 2b76e29f4d..d1e0eb7be6 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx @@ -10,7 +10,7 @@ import guidedGrid from "./index.module.css"; */ const From = () => (
- FROM + FROM diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx index 0e625be254..5194119590 100644 --- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx +++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Limit.tsx @@ -19,7 +19,7 @@ const LIMIT_OPTIONS = [ */ const Limit = () => (
- LIMIT + LIMIT