y-scope · davemarco · Sep 22, 2025 · Sep 2, 2025 · Sep 4, 2025 · Sep 4, 2025
@@ -0,0 +1,11 @@
+.label {
+    height: 100%;
+    display: flex;
+    padding-left: 10px;
+    padding-right: 10px;
+    align-items: center;
+    justify-content: center;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    white-space: nowrap;
-    white-space: nowrap;
+.label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
-    white-space: nowrap;
+.label {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+}
@@ -9,27 +9,28 @@ import styles from "./index.module.css";
 const {Text} = Typography;
 
 /**
- * Renders a label for the dataset selector.
+ * Renders a label for an input field.
  *
+ * @param props
+ * @param props.children The label text to display.
  * @return
-/**
- * Renders a label for the dataset selector.
- * Renders a label for an input field.
- *
- * @param props
- * @param props.children The label text to display.
- * @return
+/**
+ * Renders a label for an input field.
+ *
+ * @param props
+ * @param props.children The label text to display.
+ * @param props.as Render as a native "label" or as a "span" (Typography.Text). Default: "span".
+ * @param props.htmlFor When as="label", associates the label to a control id.
+ * @return
+ */
-/**
- * Renders a label for the dataset selector.
- * Renders a label for an input field.
- *
- * @param props
- * @param props.children The label text to display.
- * @return
+/**
+ * Renders a label for an input field.
+ *
+ * @param props
+ * @param props.children The label text to display.
+ * @param props.as Render as a native "label" or as a "span" (Typography.Text). Default: "span".
+ * @param props.htmlFor When as="label", associates the label to a control id.
+ * @return
+ */
  */
-const DatasetLabel = () => {
+const InputLabel = ({children}: {children: React.ReactNode}) => {
     const {token} = theme.useToken();
 
     return (
         <Text
-            className={styles["datasetLabel"] || ""}
+            className={styles["label"] || ""}
-            className={styles["label"] || ""}
+            className={styles.label}
-            className={styles["label"] || ""}
+            className={styles.label}
             style={{
-                backgroundColor: token.colorFillTertiary,
+                backgroundColor: token.colorBorder,
                 borderBottomLeftRadius: `${token.borderRadius}px`,
-                borderColor: token.colorBorder,
                 borderTopLeftRadius: `${token.borderRadius}px`,
-                fontSize: token.fontSizeLG,
+                fontSize: token.fontSize,
             }}
         >
-            Dataset
+            {children}
         </Text>
     );
 };
 
-export default DatasetLabel;
+export default InputLabel;
@@ -6,6 +6,8 @@ import {
     Tooltip,
 } from "antd";
 
+import styles from "./index.module.css";
+
 
 interface CaseSensitiveToggleProps {
     disabled: boolean;
@@ -51,6 +53,7 @@ const CaseSensitiveToggle = ({
             title={"Match case"}
         >
             <Button
+                className={styles["customButton"] || ""}
                 disabled={disabled}
                 size={"small"}
                 variant={buttonVariant}

@@ -0,0 +1,3 @@
+.customButton {
+  height: 22px;
+}
-.customButton {
-  height: 22px;
-}
+.customButton {
+  height: 22px;
+  line-height: 22px;
+}
-.customButton {
-  height: 22px;
-}
+.customButton {
+  height: var(--ant-control-height-sm);
+  line-height: var(--ant-control-height-sm);
+}
-}
+}
+
-.customButton {
-  height: 22px;
-}
+.customButton {
+  height: 22px;
+  line-height: 22px;
+}
-.customButton {
-  height: 22px;
-}
+.customButton {
+  height: var(--ant-control-height-sm);
+  line-height: var(--ant-control-height-sm);
+}
-}
+}
+
@@ -0,0 +1,6 @@
+.editor {
+    height: 100%;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+}
@@ -12,13 +12,16 @@ import {theme} from "antd";
 import color from "color";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
+import styles from "./index.module.css";
+
 import "./monaco-loader";
 
 
 type SqlEditorType = monaco.editor.IStandaloneCodeEditor;
 
 type SqlEditorProps = Omit<EditorProps, "language"> & {
     disabled: boolean;
+    className?: string;
 
     /** Callback when the editor is mounted and ref is ready to use. */
     onEditorReady?: (editor: SqlEditorType) => void;
@@ -31,7 +34,7 @@ type SqlEditorProps = Omit<EditorProps, "language"> & {
  * @return
  */
 const SqlEditor = (props: SqlEditorProps) => {
-    const {disabled, onEditorReady, ...editorProps} = props;
+    const {disabled, onEditorReady, className, ...editorProps} = props;
     const monacoEditor = useMonaco();
     const {token} = theme.useToken();
 
@@ -75,6 +78,8 @@ const SqlEditor = (props: SqlEditorProps) => {
 
     return (
         <div
+            className={[styles["editor"],
+                className].filter(Boolean).join(" ")}
             style={{
                 border: `1px solid ${token.colorBorder}`,
                 borderRadius: token.borderRadius,

@@ -30,8 +30,8 @@ const SqlInput = (props: SqlEditorProps) => {
 
     return (
         <SqlEditor
-            height={30}
             options={{
+                automaticLayout: true,
                 find: {
                     addExtraSpaceOnTop: false,
                     autoFindInSelection: "never",

diff --git a/components/webui/client/src/components/TimeRangeInput/index.tsx b/components/webui/client/src/components/TimeRangeInput/index.tsx
@@ -6,9 +6,9 @@ import {
     Select,
 } from "antd";
 
+import InputLabel from "../../../../components/InputLabel";
 import useSearchStore from "../../SearchState/index";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
-import DatasetLabel from "./DatasetLabel";
 import styles from "./index.module.css";
 import {fetchDatasetNames} from "./sql";
 
@@ -79,14 +79,14 @@ const Dataset = () => {
     return (
         <div className={styles["datasetContainer"]}>
             {contextHolder}
-            <DatasetLabel/>
+            <InputLabel>Dataset</InputLabel>
             <Select
-            <InputLabel>Dataset</InputLabel>
-            <Select
+            <InputLabel id="dataset-label">Dataset</InputLabel>
+            <Select
+                aria-labelledby="dataset-label"
-            <InputLabel>Dataset</InputLabel>
-            <Select
+            <InputLabel id="dataset-label">Dataset</InputLabel>
+            <Select
+                aria-labelledby="dataset-label"
                 className={styles["select"] || ""}
-                className={styles["select"] || ""}
+                className={styles["select"]}
-                className={styles["select"] || ""}
+                className={styles.select}
-                className={styles["select"] || ""}
+                className={styles["select"]}
-                className={styles["select"] || ""}
+                className={styles.select}
                 loading={isPending}
                 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 ||

@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the FROM SQL input field.
+ *
+ * @return
+ */
-/**
- * Renders the FROM SQL input field.
- *
- * @return
- */
+/**
+ * Renders the FROM SQL input field.
+ *
+ * @return JSX.Element
+ */
-/**
- * Renders the FROM SQL input field.
- *
- * @return
- */
+/**
+ * Renders the FROM SQL input field.
+ *
+ * @return JSX.Element
+ */
+const From = () => (
+    <div className={guidedGrid["from"]}>
+        <InputLabel>FROM</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default From;
@@ -0,0 +1,33 @@
+import {Select} from "antd";
+
+import InputLabel from "../../../../../components/InputLabel";
+import guidedGrid from "./index.module.css";
+
+
+const LIMIT_OPTIONS = [
+    {value: 10, label: "10"},
+    {value: 50, label: "50"},
+    {value: 100, label: "100"},
+    {value: 500, label: "500"},
+    {value: 1000, label: "1000"},
+];
+
+/**
+ * Renders the LIMIT SQL input field.
+ *
+ * @return
+ */
+const Limit = () => (
+    <div className={guidedGrid["limit"]}>
+        <InputLabel>LIMIT</InputLabel>
+        <Select
+            defaultValue={LIMIT_OPTIONS[0]?.value}
+            options={LIMIT_OPTIONS}
+            className={
+                `${guidedGrid["noLeftBorderRadiusSelect"]} ${
+                    guidedGrid["widthSelect"]}`
+            }/>
+    </div>
+);
+
+export default Limit;
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the ORDER BY SQL input field.
+ *
+ * @return
+ */
-/**
- * Renders the ORDER BY SQL input field.
- *
- * @return
- */
+/**
+ * Renders the ORDER BY SQL input field.
+ *
+ * @returns JSX.Element
+ */
-/**
- * Renders the ORDER BY SQL input field.
- *
- * @return
- */
+/**
+ * Renders the ORDER BY SQL input field.
+ *
+ * @returns JSX.Element
+ */
+const OrderBy = () => (
+    <div className={guidedGrid["order"]}>
+        <InputLabel>ORDER BY</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default OrderBy;
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the SELECT SQL input field.
+ *
+ * @return
+ */
+const Select = () => (
+    <div className={guidedGrid["select"]}>
+        <InputLabel>SELECT</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
+);
+
+export default Select;
@@ -0,0 +1,20 @@
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+
+
+/**
+ * Renders the WHERE SQL input field.
+ *
+ * @return
+ */
+const Where = () => (
+    <div className={guidedGrid["where"]}>
+        <InputLabel>WHERE</InputLabel>
+        <SqlInput
+            className={guidedGrid["noLeftBorderRadius"] || ""}
+            disabled={false}/>
+    </div>
-const Where = () => (
-    <div className={guidedGrid["where"]}>
-        <InputLabel>WHERE</InputLabel>
-        <SqlInput
-            className={guidedGrid["noLeftBorderRadius"] || ""}
-            disabled={false}/>
-    </div>
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+import useSearchStore from "../../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
+
+const Where = () => {
+    const searchUiState = useSearchStore((s) => s.searchUiState);
+    const disabled =
+        searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
+    return (
+        <div className={guidedGrid.where}>
+            <InputLabel id="where-label">WHERE</InputLabel>
+            <SqlInput
+                aria-labelledby="where-label"
+                className={guidedGrid.noLeftBorderRadius}
+                disabled={disabled}
+            />
+        </div>
+    );
+};
-const Where = () => (
-    <div className={guidedGrid["where"]}>
-        <InputLabel>WHERE</InputLabel>
-        <SqlInput
-            className={guidedGrid["noLeftBorderRadius"] || ""}
-            disabled={false}/>
-    </div>
+import InputLabel from "../../../../../components/InputLabel";
+import SqlInput from "../../../../../components/SqlInput";
+import guidedGrid from "./index.module.css";
+import useSearchStore from "../../../SearchState/index";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
+
+const Where = () => {
+    const searchUiState = useSearchStore((s) => s.searchUiState);
+    const disabled =
+        searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
+    return (
+        <div className={guidedGrid.where}>
+            <InputLabel id="where-label">WHERE</InputLabel>
+            <SqlInput
+                aria-labelledby="where-label"
+                className={guidedGrid.noLeftBorderRadius}
+                disabled={disabled}
+            />
+        </div>
+    );
+};
+);
+
+export default Where;
@@ -0,0 +1,45 @@
+.gridContainer {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-rows: 32px;
+    gap: 5px;
+}
+
+.select {
+    grid-column: span 3;
+    display: flex;
+}
+
+.from {
+    grid-column: span 1;
+    display: flex;
+}
+
+.where {
+    grid-column: span 2;
+    display: flex;
+}
+
+.order {
+    grid-column: span 1;
+    display: flex;
+}
+
+.limit {
+    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;
+}
@@ -0,0 +1,39 @@
+import searchStyles from "../../index.module.css";
+import QueryStatus from "../../QueryStatus";
+import SqlInterfaceButton from "../SqlInterfaceButton";
+import SqlSearchButton from "../SqlSearchButton";
+import From from "./From";
+import guidedGrid from "./index.module.css";
+import Limit from "./Limit";
+import OrderBy from "./OrderBy";
+import Select from "./Select";
+import Where from "./Where";
+
+
+/**
+ * Renders controls and status for guided sql.
+ *
+ * @return
+ */
+const GuidedControls = () => (
+    <div className={searchStyles["searchControlsContainer"]}>
+        <div className={guidedGrid["gridContainer"]}>
+            <Select/>
+            <From/>
+            <Where/>
+            <OrderBy/>
+            <Limit/>
+        </div>
+        <div className={searchStyles["statusAndButtonsRow"]}>
+            <div className={searchStyles["status"]}>
+                <QueryStatus/>
+            </div>
+            <div className={searchStyles["buttons"]}>
+                <SqlInterfaceButton/>
+                <SqlSearchButton/>
+            </div>
+        </div>
+    </div>
+);
+
+export default GuidedControls;