From df714b55f04142f0392ad90486b4a3f9e2230b7f Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Tue, 18 Nov 2025 15:28:46 +0000
Subject: [PATCH 01/16] latest

---
 .../GuidedControls/TimestampKey/index.tsx     | 24 -----------------
 .../Presto/GuidedControls/index.module.css    |  7 +----
 .../Presto/GuidedControls/index.tsx           |  2 --
 .../Presto/TimeRangeFooter.module.css         | 12 +++++++++
 .../TimeRangeInput/Presto/TimeRangeFooter.tsx | 26 +++++++++++++++++++
 .../TimestampKey/TimestampKeySelect.tsx       |  0
 .../Presto}/TimestampKey/sql.ts               |  0
 .../SearchControls/TimeRangeInput/index.tsx   | 22 ++++++++++++++++
 8 files changed, 61 insertions(+), 32 deletions(-)
 delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/index.tsx
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx
 rename components/webui/client/src/pages/SearchPage/SearchControls/{Presto/GuidedControls => TimeRangeInput/Presto}/TimestampKey/TimestampKeySelect.tsx (100%)
 rename components/webui/client/src/pages/SearchPage/SearchControls/{Presto/GuidedControls => TimeRangeInput/Presto}/TimestampKey/sql.ts (100%)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/index.tsx
deleted file mode 100644
index ec909eed41..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import InputLabel from "../../../../../../components/InputLabel";
-import guidedGrid from "../index.module.css";
-import TimestampKeySelect from "./TimestampKeySelect";
-
-
-/**
- * Renders the timestamp key selector component.
- *
- * @return
- */
-const TimestampKey = () => {
-    return (
-        <div className={guidedGrid["timestampKey"]}>
-            <InputLabel>TIME KEY</InputLabel>
-            <TimestampKeySelect
-                className={
-                    `${guidedGrid["noLeftBorderRadiusSelect"]} ${
-                        guidedGrid["widthSelect"]}`
-                }/>
-        </div>
-    );
-};
-
-export default TimestampKey;
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 7b248cba1f..596d8086cb 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
@@ -11,12 +11,7 @@
 }
 
 .from {
-    grid-column: span 1;
-    display: flex;
-}
-
-.timestampKey {
-    grid-column: span 1;
+    grid-column: span 2;
     display: flex;
 }
 
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
index fd08cf63c4..e8bd768dbc 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
@@ -7,7 +7,6 @@ import From from "./From";
 import guidedGrid from "./index.module.css";
 import OrderBy from "./OrderBy";
 import Select from "./Select";
-import TimestampKey from "./TimestampKey";
 import Where from "./Where";
 
 
@@ -21,7 +20,6 @@ const GuidedControls = () => (
         <div className={guidedGrid["gridContainer"]}>
             <Select/>
             <From/>
-            <TimestampKey/>
             <Where/>
             <OrderBy/>
         </div>
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css
new file mode 100644
index 0000000000..e4e245a7f5
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css
@@ -0,0 +1,12 @@
+.footerContainer {
+    display: flex;
+    align-items: center;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    gap: 8px;
+}
+
+.footerSelect {
+    flex: 1;
+    min-width: 0;
+}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx
new file mode 100644
index 0000000000..4950aa5fe5
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx
@@ -0,0 +1,26 @@
+import {Typography} from "antd";
+
+import styles from "./TimeRangeFooter.module.css";
+import TimestampKeySelect from "./TimestampKey/TimestampKeySelect";
+
+
+const {Text} = Typography;
+
+/**
+ * Renders the footer for the time range picker when in guided mode.
+ * Includes the timestamp key selector.
+ *
+ * @return
+ */
+const TimeRangeFooter = () => {
+    return (
+        <div className={styles["footerContainer"]}>
+            <Text>Timestamp key:</Text>
+            <TimestampKeySelect
+                className={styles["footerSelect"] || ""}
+                size={"small"}/>
+        </div>
+    );
+};
+
+export default TimeRangeFooter;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/TimestampKeySelect.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
similarity index 100%
rename from components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/TimestampKeySelect.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/sql.ts b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/sql.ts
similarity index 100%
rename from components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/TimestampKey/sql.ts
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/sql.ts
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 c14750a935..fe4c1b7424 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -1,12 +1,21 @@
+import {useCallback} from "react";
+
 import {
     DatePicker,
     Select,
 } from "antd";
 import dayjs from "dayjs";
 
+import {
+    CLP_QUERY_ENGINES,
+    SETTINGS_QUERY_ENGINE,
+} from "../../../../config";
 import useSearchStore from "../../SearchState/index";
+import usePrestoSearchState from "../../SearchState/Presto";
+import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
 import styles from "./index.module.css";
+import TimeRangeFooter from "./Presto/TimeRangeFooter";
 import {
     isValidDateRange,
     TIME_RANGE_OPTION,
@@ -30,6 +39,10 @@ const TimeRangeInput = () => {
         searchUiState,
     } = useSearchStore();
 
+    const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
+    const isPrestoGuided = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO &&
+                           sqlInterface === PRESTO_SQL_INTERFACE.GUIDED;
+
     const handleSelectChange = (newTimeRangeOption: TIME_RANGE_OPTION) => {
         updateTimeRangeOption(newTimeRangeOption);
     };
@@ -48,6 +61,14 @@ const TimeRangeInput = () => {
         ]);
     };
 
+    const renderFooter = useCallback(() => {
+        if (!isPrestoGuided) {
+            return null;
+        }
+
+        return <TimeRangeFooter/>;
+    }, [isPrestoGuided]);
+
     return (
         <div
             className={styles["timeRangeInputContainer"]}
@@ -69,6 +90,7 @@ const TimeRangeInput = () => {
                 <DatePicker.RangePicker
                     allowClear={true}
                     className={styles["rangePicker"] || ""}
+                    renderExtraFooter={renderFooter}
                     showTime={true}
                     size={"middle"}
                     value={timeRange}

From 595b655c8c8e333f8227498aad3450cc2ed53387 Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 10:58:11 -0500
Subject: [PATCH 02/16] latest

---
 .../Presto/GuidedControls/index.tsx           | 45 +++++-----
 .../TimestampKey/TimestampKeySelect.tsx       | 85 +++---------------
 .../SearchState/Presto/useTimestampKeyInit.ts | 89 +++++++++++++++++++
 3 files changed, 128 insertions(+), 91 deletions(-)
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts

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
index fbb542ba72..c77ff215ed 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
@@ -1,6 +1,7 @@
 import searchStyles from "../../index.module.css";
 import QueryStatus from "../../QueryStatus";
 import TimeRangeInput from "../../TimeRangeInput";
+import useTimestampKeyInit from "../../../SearchState/Presto/useTimestampKeyInit";
 import SqlInterfaceButton from "../SqlInterfaceButton";
 import SqlSearchButton from "../SqlSearchButton";
 import From from "./From";
@@ -15,28 +16,32 @@ import Where from "./Where";
  *
  * @return
  */
-const GuidedControls = () => (
-    <div className={searchStyles["searchControlsContainer"]}>
-        <div className={searchStyles["runRow"]}>
-            <div>
-                <SqlInterfaceButton/>
+const GuidedControls = () => {
+    const {contextHolder} = useTimestampKeyInit();
+
+    return (
+        <div className={searchStyles["searchControlsContainer"]}>
+            {contextHolder}
+            <div className={searchStyles["runRow"]}>
+                <div>
+                    <SqlInterfaceButton/>
+                </div>
+                <div className={searchStyles["buttons"]}>
+                    <TimeRangeInput/>
+                    <SqlSearchButton/>
+                </div>
             </div>
-            <div className={searchStyles["buttons"]}>
-                <TimestampKey/>
-                <TimeRangeInput/>
-                <SqlSearchButton/>
+            <div className={guidedGrid["gridContainer"]}>
+                <Select/>
+                <From/>
+                <Where/>
+                <OrderBy/>
+            </div>
+            <div className={searchStyles["status"]}>
+                <QueryStatus/>
             </div>
         </div>
-        <div className={guidedGrid["gridContainer"]}>
-            <Select/>
-            <From/>
-            <Where/>
-            <OrderBy/>
-        </div>
-        <div className={searchStyles["status"]}>
-            <QueryStatus/>
-        </div>
-    </div>
-);
+    );
+};
 
 export default GuidedControls;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
index 3184e4b018..dee7a384ee 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
@@ -1,11 +1,8 @@
-import {useEffect} from "react";
-
-import {useQuery} from "@tanstack/react-query";
 import {
-    message,
     Select,
     SelectProps,
 } from "antd";
+import {useQuery} from "@tanstack/react-query";
 
 import useSearchStore from "../../../../SearchState";
 import usePrestoSearchState from "../../../../SearchState/Presto";
@@ -14,7 +11,7 @@ import {fetchTimestampColumns} from "./sql";
 
 
 /**
- * Renders a timestamp key selector component
+ * Renders a timestamp key selector component.
  *
  * @param selectProps
  * @return
@@ -25,9 +22,8 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
     const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
     const searchUiState = useSearchStore((state) => state.searchUiState);
 
-    const [messageApi, contextHolder] = message.useMessage();
-
-    const {data: timestampKeys, isPending, isSuccess, isError} = useQuery({
+    // Access cached timestamp keys fetched by useTimestampKeyInit hook in GuidedControls.
+    const {data: timestampKeys} = useQuery({
         queryKey: [
             "timestampColumns",
             dataset,
@@ -38,74 +34,21 @@ const TimestampKeySelect = (selectProps: SelectProps<string>) => {
         enabled: null !== dataset,
     });
 
-    useEffect(() => {
-        if (isSuccess) {
-            if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
-                updateTimestampKey(timestampKeys[0]);
-            }
-        }
-    }, [
-        isSuccess,
-        timestampKeys,
-        timestampKey,
-        updateTimestampKey,
-    ]);
-
-    useEffect(() => {
-        if (isError) {
-            messageApi.error({
-                key: "fetchTimestampError",
-                content: "Error fetching timestamp columns.",
-            });
-        }
-    }, [
-        isError,
-        messageApi,
-    ]);
-
-    useEffect(() => {
-        if (isSuccess && 0 === timestampKeys.length) {
-            messageApi.warning({
-                key: "noTimestamps",
-                content: "No timestamp columns found for selected dataset. " +
-                         "Guided UI requires a timestamp column.",
-            });
-            updateTimestampKey(null);
-        }
-    }, [
-        timestampKeys,
-        isSuccess,
-        messageApi,
-        updateTimestampKey,
-    ]);
-
-    // Reset timestamp key when dataset changes
-    useEffect(() => {
-        updateTimestampKey(null);
-    }, [
-        dataset,
-        updateTimestampKey,
-    ]);
-
     const handleTimestampKeyChange = (value: string) => {
         updateTimestampKey(value);
     };
 
     return (
-        <>
-            {contextHolder}
-            <Select<string>
-                loading={isPending}
-                options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
-                value={timestampKey}
-                disabled={
-                    null === dataset ||
-                    searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                    searchUiState === SEARCH_UI_STATE.QUERYING
-                }
-                onChange={handleTimestampKeyChange}
-                {...selectProps}/>
-        </>
+        <Select<string>
+            options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
+            value={timestampKey}
+            disabled={
+                null === dataset ||
+                searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                searchUiState === SEARCH_UI_STATE.QUERYING
+            }
+            onChange={handleTimestampKeyChange}
+            {...selectProps}/>
     );
 };
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
new file mode 100644
index 0000000000..94da52649c
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
@@ -0,0 +1,89 @@
+import {useEffect} from "react";
+
+import {message} from "antd";
+import {useQuery} from "@tanstack/react-query";
+
+import {fetchTimestampColumns} from "../../SearchControls/TimeRangeInput/Presto/TimestampKey/sql";
+import useSearchStore from "..";
+import usePrestoSearchState from ".";
+
+
+/**
+ * Hook to initialize and manage timestamp key selection.
+ * Uses React Query to fetch timestamp columns and sets a default if none is selected.
+ * This should be called once at the GuidedControls level.
+ */
+const useTimestampKeyInit = () => {
+    const dataset = useSearchStore((state) => state.selectDataset);
+    const timestampKey = usePrestoSearchState((state) => state.timestampKey);
+    const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
+
+    const [messageApi, contextHolder] = message.useMessage();
+
+    const {data: timestampKeys, isSuccess, isError} = useQuery({
+        queryKey: [
+            "timestampColumns",
+            dataset,
+        ],
+        queryFn: () => (dataset ?
+            fetchTimestampColumns(dataset) :
+            []),
+        enabled: null !== dataset,
+    });
+
+    // Set default timestamp key when data is loaded
+    useEffect(() => {
+        if (isSuccess) {
+            if ("undefined" !== typeof timestampKeys?.[0] && null === timestampKey) {
+                updateTimestampKey(timestampKeys[0] ?? null);
+            }
+        }
+    }, [
+        isSuccess,
+        timestampKeys,
+        timestampKey,
+        updateTimestampKey,
+    ]);
+
+    // Show error message if fetch fails
+    useEffect(() => {
+        if (isError) {
+            messageApi.error({
+                key: "fetchTimestampError",
+                content: "Error fetching timestamp columns.",
+            });
+        }
+    }, [
+        isError,
+        messageApi,
+    ]);
+
+    // Show warning if no timestamp columns found
+    useEffect(() => {
+        if (isSuccess && 0 === (timestampKeys?.length ?? 0)) {
+            messageApi.warning({
+                key: "noTimestamps",
+                content: "No timestamp columns found for selected dataset. " +
+                         "Guided UI requires a timestamp column.",
+            });
+            updateTimestampKey(null);
+        }
+    }, [
+        timestampKeys,
+        isSuccess,
+        messageApi,
+        updateTimestampKey,
+    ]);
+
+    // Reset timestamp key when dataset changes
+    useEffect(() => {
+        updateTimestampKey(null);
+    }, [
+        dataset,
+        updateTimestampKey,
+    ]);
+
+    return {contextHolder};
+};
+
+export default useTimestampKeyInit;

From ccc1667d1c80b487467a4bd0a9e1770d9895e48d Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 16:12:32 +0000
Subject: [PATCH 03/16] latest

---
 .../TimestampKeySelect/index.tsx}                         | 6 +++---
 .../TimestampKeySelect}/sql.ts                            | 6 +++---
 .../index.module.css}                                     | 0
 .../{TimeRangeFooter.tsx => TimeRangeFooter/index.tsx}    | 8 ++++----
 .../SearchPage/SearchState/Presto/useTimestampKeyInit.ts  | 2 +-
 5 files changed, 11 insertions(+), 11 deletions(-)
 rename components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/{TimestampKey/TimestampKeySelect.tsx => TimeRangeFooter/TimestampKeySelect/index.tsx} (88%)
 rename components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/{TimestampKey => TimeRangeFooter/TimestampKeySelect}/sql.ts (86%)
 rename components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/{TimeRangeFooter.module.css => TimeRangeFooter/index.module.css} (100%)
 rename components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/{TimeRangeFooter.tsx => TimeRangeFooter/index.tsx} (74%)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
similarity index 88%
rename from components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
index dee7a384ee..342a34a884 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/TimestampKeySelect.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
@@ -4,9 +4,9 @@ import {
 } from "antd";
 import {useQuery} from "@tanstack/react-query";
 
-import useSearchStore from "../../../../SearchState";
-import usePrestoSearchState from "../../../../SearchState/Presto";
-import {SEARCH_UI_STATE} from "../../../../SearchState/typings";
+import useSearchStore from "../../../../../SearchState";
+import usePrestoSearchState from "../../../../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
 import {fetchTimestampColumns} from "./sql";
 
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/sql.ts b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql.ts
similarity index 86%
rename from components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/sql.ts
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql.ts
index cffc7137e4..02917e0c0f 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimestampKey/sql.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql.ts
@@ -1,6 +1,6 @@
-import {querySql} from "../../../../../../api/sql";
-import {SqlTableSuffix} from "../../../../../../config/sql-table-suffix";
-import {settings} from "../../../../../../settings";
+import {querySql} from "../../../../../../../api/sql";
+import {SqlTableSuffix} from "../../../../../../../config/sql-table-suffix";
+import {settings} from "../../../../../../../settings";
 
 
 /**
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.module.css
similarity index 100%
rename from components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.module.css
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.module.css
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.tsx
similarity index 74%
rename from components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx
rename to components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.tsx
index 4950aa5fe5..b7c9b08469 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/index.tsx
@@ -1,14 +1,14 @@
 import {Typography} from "antd";
 
-import styles from "./TimeRangeFooter.module.css";
-import TimestampKeySelect from "./TimestampKey/TimestampKeySelect";
+import styles from "./index.module.css";
+import TimestampKeySelect from "./TimestampKeySelect";
 
 
 const {Text} = Typography;
 
 /**
- * Renders the footer for the time range picker when in guided mode.
- * Includes the timestamp key selector.
+ * Renders the footer for the time range picker when in guided mode. Includes the timestamp key
+ * selector.
  *
  * @return
  */
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
index 94da52649c..e920e7575a 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
@@ -3,7 +3,7 @@ import {useEffect} from "react";
 import {message} from "antd";
 import {useQuery} from "@tanstack/react-query";
 
-import {fetchTimestampColumns} from "../../SearchControls/TimeRangeInput/Presto/TimestampKey/sql";
+import {fetchTimestampColumns} from "../../SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql";
 import useSearchStore from "..";
 import usePrestoSearchState from ".";
 

From 9a128a12ddd2a387037baa571de0b26dff00febc Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 16:20:00 +0000
Subject: [PATCH 04/16] latest

---
 .../SearchControls/TimeRangeInput/index.tsx   |  2 +-
 .../index.ts}                                 | 19 +++++++++----------
 .../Presto/useTimestampKeyInit}/sql.ts        |  0
 3 files changed, 10 insertions(+), 11 deletions(-)
 rename components/webui/client/src/pages/SearchPage/SearchState/Presto/{useTimestampKeyInit.ts => useTimestampKeyInit/index.ts} (74%)
 rename components/webui/client/src/pages/SearchPage/{SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect => SearchState/Presto/useTimestampKeyInit}/sql.ts (100%)

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 fe4c1b7424..12f486b577 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -62,7 +62,7 @@ const TimeRangeInput = () => {
     };
 
     const renderFooter = useCallback(() => {
-        if (!isPrestoGuided) {
+        if (false === isPrestoGuided) {
             return null;
         }
 
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts
similarity index 74%
rename from components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
rename to components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts
index e920e7575a..da913aaf36 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts
@@ -3,15 +3,14 @@ import {useEffect} from "react";
 import {message} from "antd";
 import {useQuery} from "@tanstack/react-query";
 
-import {fetchTimestampColumns} from "../../SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql";
-import useSearchStore from "..";
-import usePrestoSearchState from ".";
+import {fetchTimestampColumns} from "./sql";
+import useSearchStore from "../..";
+import usePrestoSearchState from "..";
 
 
 /**
- * Hook to initialize and manage timestamp key selection.
- * Uses React Query to fetch timestamp columns and sets a default if none is selected.
- * This should be called once at the GuidedControls level.
+ * Hook to initialize timestamp key. Fetches timestamp columns and sets a default if none is
+ * selected. Shows messages for errors or warnings with data fetching.
  */
 const useTimestampKeyInit = () => {
     const dataset = useSearchStore((state) => state.selectDataset);
@@ -34,8 +33,8 @@ const useTimestampKeyInit = () => {
     // Set default timestamp key when data is loaded
     useEffect(() => {
         if (isSuccess) {
-            if ("undefined" !== typeof timestampKeys?.[0] && null === timestampKey) {
-                updateTimestampKey(timestampKeys[0] ?? null);
+            if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
+                updateTimestampKey(timestampKeys[0]);
             }
         }
     }, [
@@ -60,7 +59,7 @@ const useTimestampKeyInit = () => {
 
     // Show warning if no timestamp columns found
     useEffect(() => {
-        if (isSuccess && 0 === (timestampKeys?.length ?? 0)) {
+        if (isSuccess && 0 === timestampKeys.length) {
             messageApi.warning({
                 key: "noTimestamps",
                 content: "No timestamp columns found for selected dataset. " +
@@ -75,7 +74,7 @@ const useTimestampKeyInit = () => {
         updateTimestampKey,
     ]);
 
-    // Reset timestamp key when dataset changes
+    // Reset timestamp key when dataset changes.
     useEffect(() => {
         updateTimestampKey(null);
     }, [
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts
similarity index 100%
rename from components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/sql.ts
rename to components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts

From f36e6653bcd6822851cc44634c8a175aee71c1a4 Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 16:23:14 +0000
Subject: [PATCH 05/16] latest

---
 .../TimestampKeySelect/TimestampKeySelect.tsx | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx
new file mode 100644
index 0000000000..2794151c5c
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx
@@ -0,0 +1,55 @@
+import {
+    Select,
+    SelectProps,
+} from "antd";
+import {useQuery} from "@tanstack/react-query";
+
+import useSearchStore from "../../../../../SearchState";
+import usePrestoSearchState from "../../../../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
+import {fetchTimestampColumns} from "../../../../../SearchState/Presto/useTimestampKeyInit/sql";
+
+
+/**
+ * Renders a timestamp key selector component.
+ *
+ * @param selectProps
+ * @return
+ */
+const TimestampKeySelect = (selectProps: SelectProps<string>) => {
+    const dataset = useSearchStore((state) => state.selectDataset);
+    const timestampKey = usePrestoSearchState((state) => state.timestampKey);
+    const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+
+    // Access cached timestamp keys fetched by useTimestampKeyInit hook.
+    const {data: timestampKeys} = useQuery({
+        queryKey: [
+            "timestampColumns",
+            dataset,
+        ],
+        queryFn: () => (dataset ?
+            fetchTimestampColumns(dataset) :
+            []),
+        enabled: null !== dataset,
+    });
+
+    const handleTimestampKeyChange = (value: string) => {
+        updateTimestampKey(value);
+    };
+
+    return (
+        <Select<string>
+            options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
+            value={timestampKey}
+            disabled={
+                null === dataset ||
+                searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                searchUiState === SEARCH_UI_STATE.QUERYING
+            }
+            onChange={handleTimestampKeyChange}
+            {...selectProps}/>
+    );
+};
+
+export default TimestampKeySelect;

From 6ae47c13ef6488d4c23a23a74fe4475740f6122a Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 17:15:04 +0000
Subject: [PATCH 06/16] latest

---
 .../TimestampKeySelect/TimestampKeySelect.tsx | 55 -------------------
 .../TimestampKeySelect/index.tsx              |  2 +-
 .../{index.ts => index.tsx}                   | 18 ++----
 .../Presto/useTimestampKeyInit/sql.ts         |  6 +-
 4 files changed, 9 insertions(+), 72 deletions(-)
 delete mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx
 rename components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/{index.ts => index.tsx} (83%)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx
deleted file mode 100644
index 2794151c5c..0000000000
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/TimestampKeySelect.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-    Select,
-    SelectProps,
-} from "antd";
-import {useQuery} from "@tanstack/react-query";
-
-import useSearchStore from "../../../../../SearchState";
-import usePrestoSearchState from "../../../../../SearchState/Presto";
-import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
-import {fetchTimestampColumns} from "../../../../../SearchState/Presto/useTimestampKeyInit/sql";
-
-
-/**
- * Renders a timestamp key selector component.
- *
- * @param selectProps
- * @return
- */
-const TimestampKeySelect = (selectProps: SelectProps<string>) => {
-    const dataset = useSearchStore((state) => state.selectDataset);
-    const timestampKey = usePrestoSearchState((state) => state.timestampKey);
-    const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
-    const searchUiState = useSearchStore((state) => state.searchUiState);
-
-    // Access cached timestamp keys fetched by useTimestampKeyInit hook.
-    const {data: timestampKeys} = useQuery({
-        queryKey: [
-            "timestampColumns",
-            dataset,
-        ],
-        queryFn: () => (dataset ?
-            fetchTimestampColumns(dataset) :
-            []),
-        enabled: null !== dataset,
-    });
-
-    const handleTimestampKeyChange = (value: string) => {
-        updateTimestampKey(value);
-    };
-
-    return (
-        <Select<string>
-            options={(timestampKeys || []).map((option) => ({label: option, value: option}))}
-            value={timestampKey}
-            disabled={
-                null === dataset ||
-                searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                searchUiState === SEARCH_UI_STATE.QUERYING
-            }
-            onChange={handleTimestampKeyChange}
-            {...selectProps}/>
-    );
-};
-
-export default TimestampKeySelect;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
index 342a34a884..206464723f 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
@@ -7,7 +7,7 @@ import {useQuery} from "@tanstack/react-query";
 import useSearchStore from "../../../../../SearchState";
 import usePrestoSearchState from "../../../../../SearchState/Presto";
 import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
-import {fetchTimestampColumns} from "./sql";
+import {fetchTimestampColumns} from "../../../../../SearchState/Presto/useTimestampKeyInit/sql";
 
 
 /**
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
similarity index 83%
rename from components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts
rename to components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
index da913aaf36..2717de9ff3 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
@@ -4,7 +4,7 @@ import {message} from "antd";
 import {useQuery} from "@tanstack/react-query";
 
 import {fetchTimestampColumns} from "./sql";
-import useSearchStore from "../..";
+import useSearchStore from "../../";
 import usePrestoSearchState from "..";
 
 
@@ -30,19 +30,11 @@ const useTimestampKeyInit = () => {
         enabled: null !== dataset,
     });
 
-    // Set default timestamp key when data is loaded
-    useEffect(() => {
-        if (isSuccess) {
-            if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
-                updateTimestampKey(timestampKeys[0]);
-            }
+    if (isSuccess) {
+        if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
+            updateTimestampKey(timestampKeys[0]);
         }
-    }, [
-        isSuccess,
-        timestampKeys,
-        timestampKey,
-        updateTimestampKey,
-    ]);
+    }
 
     // Show error message if fetch fails
     useEffect(() => {
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts
index 02917e0c0f..7cb7002a51 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/sql.ts
@@ -1,6 +1,6 @@
-import {querySql} from "../../../../../../../api/sql";
-import {SqlTableSuffix} from "../../../../../../../config/sql-table-suffix";
-import {settings} from "../../../../../../../settings";
+import {querySql} from "../../../../../api/sql";
+import {SqlTableSuffix} from "../../../../../config/sql-table-suffix";
+import {settings} from "../../../../../settings";
 
 
 /**

From 8bb7b7d2ccebbdfded508a923742b1097e31abd8 Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Wed, 19 Nov 2025 18:35:20 +0000
Subject: [PATCH 07/16] latest

---
 .../SearchControls/Presto/GuidedControls/index.tsx          | 2 +-
 .../Presto/TimeRangeFooter/TimestampKeySelect/index.tsx     | 4 ++--
 .../SearchState/Presto/useTimestampKeyInit/index.tsx        | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

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
index c77ff215ed..53c64bd7f1 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/index.tsx
@@ -1,7 +1,7 @@
+import useTimestampKeyInit from "../../../SearchState/Presto/useTimestampKeyInit";
 import searchStyles from "../../index.module.css";
 import QueryStatus from "../../QueryStatus";
 import TimeRangeInput from "../../TimeRangeInput";
-import useTimestampKeyInit from "../../../SearchState/Presto/useTimestampKeyInit";
 import SqlInterfaceButton from "../SqlInterfaceButton";
 import SqlSearchButton from "../SqlSearchButton";
 import From from "./From";
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
index 206464723f..dc150a46c4 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/Presto/TimeRangeFooter/TimestampKeySelect/index.tsx
@@ -1,13 +1,13 @@
+import {useQuery} from "@tanstack/react-query";
 import {
     Select,
     SelectProps,
 } from "antd";
-import {useQuery} from "@tanstack/react-query";
 
 import useSearchStore from "../../../../../SearchState";
 import usePrestoSearchState from "../../../../../SearchState/Presto";
-import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
 import {fetchTimestampColumns} from "../../../../../SearchState/Presto/useTimestampKeyInit/sql";
+import {SEARCH_UI_STATE} from "../../../../../SearchState/typings";
 
 
 /**
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
index 2717de9ff3..cca48825a5 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
@@ -1,16 +1,18 @@
 import {useEffect} from "react";
 
-import {message} from "antd";
 import {useQuery} from "@tanstack/react-query";
+import {message} from "antd";
 
-import {fetchTimestampColumns} from "./sql";
 import useSearchStore from "../../";
 import usePrestoSearchState from "..";
+import {fetchTimestampColumns} from "./sql";
 
 
 /**
  * Hook to initialize timestamp key. Fetches timestamp columns and sets a default if none is
  * selected. Shows messages for errors or warnings with data fetching.
+ *
+ * @return
  */
 const useTimestampKeyInit = () => {
     const dataset = useSearchStore((state) => state.selectDataset);

From 215904230383bdee90d848cff3849e42a0caa3df Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Thu, 20 Nov 2025 21:30:08 +0000
Subject: [PATCH 08/16] latest

---
 .../Presto/useTimestampKeyInit/index.tsx      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
index cca48825a5..39e402dc20 100644
--- a/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchState/Presto/useTimestampKeyInit/index.tsx
@@ -32,11 +32,26 @@ const useTimestampKeyInit = () => {
         enabled: null !== dataset,
     });
 
-    if (isSuccess) {
-        if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
-            updateTimestampKey(timestampKeys[0]);
+    // Reset timestamp key when dataset changes.
+    useEffect(() => {
+        updateTimestampKey(null);
+    }, [
+        dataset,
+        updateTimestampKey,
+    ]);
+
+    useEffect(() => {
+        if (isSuccess) {
+            if ("undefined" !== typeof timestampKeys[0] && null === timestampKey) {
+                updateTimestampKey(timestampKeys[0]);
+            }
         }
-    }
+    }, [
+        isSuccess,
+        timestampKeys,
+        timestampKey,
+        updateTimestampKey,
+    ]);
 
     // Show error message if fetch fails
     useEffect(() => {
@@ -68,14 +83,6 @@ const useTimestampKeyInit = () => {
         updateTimestampKey,
     ]);
 
-    // Reset timestamp key when dataset changes.
-    useEffect(() => {
-        updateTimestampKey(null);
-    }, [
-        dataset,
-        updateTimestampKey,
-    ]);
-
     return {contextHolder};
 };
 

From e2da61d319feeb93996d8e1f9c94bab83dfd8706 Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Mon, 24 Nov 2025 11:28:09 -0500
Subject: [PATCH 09/16] latest

---
 .../TimeRangeInput/index.module.css           | 18 +++-
 .../SearchControls/TimeRangeInput/index.tsx   | 90 +++++++++++++++----
 2 files changed, 91 insertions(+), 17 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
index 8fd5e425ec..8177e6114c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
@@ -2,6 +2,10 @@
     display: inline-flex;
 }
 
+.timeRangeInputContainer :global(.ant-select) {
+    width: 160px;
+}
+
 /* Makes border flush with range picker */
 .customSelected :global(.ant-select-selector) {
     border-top-right-radius: 0 !important;
@@ -11,6 +15,16 @@
 .rangePicker {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    min-width: 200px;
-    max-width: 220px;
+    width: 350px;
+}
+
+/* Improve visibility of disabled date picker */
+.rangePicker:global(.ant-picker-disabled) {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
+}
+
+.rangePicker:global(.ant-picker-disabled) input {
+    color: rgba(0, 0, 0, 0.65) !important;
+    cursor: not-allowed;
 }
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 12f486b577..5883790875 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -3,8 +3,10 @@ import {useCallback} from "react";
 import {
     DatePicker,
     Select,
+    GetProps,
+    GetProp
 } from "antd";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 
 import {
     CLP_QUERY_ENGINES,
@@ -22,6 +24,62 @@ import {
     TIME_RANGE_OPTION_NAMES,
 } from "./utils";
 
+interface CustomDateInputProps {
+    value: string;
+    'date-range': 'start' | 'end';
+}
+
+/**
+ * Gets display text for time range option
+ */
+const getTimeRangeDisplayText = (option: TIME_RANGE_OPTION, isStart: boolean): string => {
+    switch (option) {
+        case TIME_RANGE_OPTION.LAST_15_MINUTES:
+            return isStart ? "15 minutes ago" : "Now";
+        case TIME_RANGE_OPTION.LAST_HOUR:
+            return isStart ? "1 hour ago" : "Now";
+        case TIME_RANGE_OPTION.TODAY:
+            return isStart ? "Start of today" : "End of today";
+        case TIME_RANGE_OPTION.YESTERDAY:
+            return isStart ? "Start of yesterday" : "End of yesterday";
+        case TIME_RANGE_OPTION.LAST_7_DAYS:
+            return isStart ? "7 days ago" : "Now";
+        case TIME_RANGE_OPTION.LAST_30_DAYS:
+            return isStart ? "30 days ago" : "Now";
+        case TIME_RANGE_OPTION.LAST_12_MONTHS:
+            return isStart ? "12 months ago" : "Now";
+        case TIME_RANGE_OPTION.MONTH_TO_DATE:
+            return isStart ? "Start of month" : "Now";
+        case TIME_RANGE_OPTION.YEAR_TO_DATE:
+            return isStart ? "Start of year" : "Now";
+        case TIME_RANGE_OPTION.ALL_TIME:
+            return isStart ? "Earliest" : "Latest";
+        case TIME_RANGE_OPTION.CUSTOM:
+        default:
+            return isStart ? "Start date" : "End date";
+    }
+};
+
+/**
+ * Custom input component for DatePicker that displays custom text
+ */
+const CustomDateInput = (props: CustomDateInputProps) => {
+    const {value, 'date-range': dateRange} = props;
+    const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
+
+    const isStartInput = dateRange === 'start';
+    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM 
+        ? (value || (isStartInput ? 'Start date' : 'End date'))
+        : getTimeRangeDisplayText(timeRangeOption, isStartInput);
+
+    return (
+        <input
+            {...props}
+            value={displayText}
+            readOnly
+        />
+    );
+};
 
 /**
  * Renders controls for selecting a time range for queries. By default, the component is
@@ -86,20 +144,22 @@ const TimeRangeInput = () => {
                 disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                             searchUiState === SEARCH_UI_STATE.QUERYING}
                 onChange={handleSelectChange}/>
-            {timeRangeOption === TIME_RANGE_OPTION.CUSTOM && (
-                <DatePicker.RangePicker
-                    allowClear={true}
-                    className={styles["rangePicker"] || ""}
-                    renderExtraFooter={renderFooter}
-                    showTime={true}
-                    size={"middle"}
-                    value={timeRange}
-                    disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                                searchUiState === SEARCH_UI_STATE.QUERYING}
-                    onCalendarChange={(dates) => {
-                        handleRangePickerChange(dates);
-                    }}/>
-            )}
+            <DatePicker.RangePicker
+                allowClear={true}
+                className={styles["rangePicker"] || ""}
+                renderExtraFooter={renderFooter}
+                showTime={true}
+                components={{
+                    input: CustomDateInput,
+                }}
+                size={"middle"}
+                value={timeRange}
+                disabled={timeRangeOption !== TIME_RANGE_OPTION.CUSTOM ||
+                            searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                            searchUiState === SEARCH_UI_STATE.QUERYING}
+                onCalendarChange={(dates) => {
+                    handleRangePickerChange(dates);
+                }}/>
         </div>
     );
 };

From f59e33b9191ed731d3c9289ad245b603e15d942e Mon Sep 17 00:00:00 2001
From: marco <david.marcovitch@yscope.com>
Date: Mon, 24 Nov 2025 11:28:58 -0500
Subject: [PATCH 10/16] latest

---
 .../pages/SearchPage/SearchControls/TimeRangeInput/index.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 5883790875..63a0b8008f 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -68,7 +68,7 @@ const CustomDateInput = (props: CustomDateInputProps) => {
     const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
 
     const isStartInput = dateRange === 'start';
-    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM 
+    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
         ? (value || (isStartInput ? 'Start date' : 'End date'))
         : getTimeRangeDisplayText(timeRangeOption, isStartInput);
 

From d789c35ab63e391e389777f7eb766563e34ed30e Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 26 Nov 2025 18:43:29 +0000
Subject: [PATCH 11/16] latest

---
 .../TimeRangeInput/TimeDateInput.tsx          | 46 ++++++++++++++
 .../TimeRangeInput/index.module.css           | 11 ----
 .../SearchControls/TimeRangeInput/index.tsx   | 60 +------------------
 .../SearchControls/TimeRangeInput/utils.tsx   | 26 ++++++++
 4 files changed, 74 insertions(+), 69 deletions(-)
 create mode 100644 components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
new file mode 100644
index 0000000000..9e9f1be0a2
--- /dev/null
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -0,0 +1,46 @@
+import {theme} from "antd";
+
+import useSearchStore from "../../SearchState/index";
+import {
+    getTimeRangeDisplayText,
+    TIME_RANGE_OPTION,
+} from "./utils";
+
+
+interface TimeDateInputProps {
+    value: string;
+    'date-range': 'start' | 'end';
+    disabled?: boolean;
+}
+
+/**
+ * Custom input component for DatePicker that displays custom text
+ */
+const TimeDateInput = (props: TimeDateInputProps) => {
+    const {value, 'date-range': dateRange, disabled} = props;
+    const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
+    const {token} = theme.useToken();
+
+    const isStartInput = dateRange === 'start';
+    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
+        ? (value || (isStartInput ? 'Start date' : 'End date'))
+        : getTimeRangeDisplayText(timeRangeOption, isStartInput);
+
+    return (
+        <input
+            {...props}
+            value={displayText}
+            readOnly
+            style={{
+                ...(disabled && {
+                    backgroundColor: token.colorBgContainerDisabled,
+                    color: token.colorTextDisabled,
+                    cursor: "not-allowed",
+                }),
+            }}
+        />
+    );
+};
+
+
+export default TimeDateInput;
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
index 8177e6114c..8ccdd156ea 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
@@ -17,14 +17,3 @@
     border-bottom-left-radius: 0;
     width: 350px;
 }
-
-/* Improve visibility of disabled date picker */
-.rangePicker:global(.ant-picker-disabled) {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-}
-
-.rangePicker:global(.ant-picker-disabled) input {
-    color: rgba(0, 0, 0, 0.65) !important;
-    cursor: not-allowed;
-}
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 57a7334853..c8effff4a6 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -12,6 +12,7 @@ import useSearchStore from "../../SearchState/index";
 import usePrestoSearchState from "../../SearchState/Presto";
 import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
+import TimeDateInput from "./TimeDateInput";
 import styles from "./index.module.css";
 import TimeRangeFooter from "./Presto/TimeRangeFooter";
 import {
@@ -20,63 +21,6 @@ import {
     TIME_RANGE_OPTION_NAMES,
 } from "./utils";
 
-interface CustomDateInputProps {
-    value: string;
-    'date-range': 'start' | 'end';
-}
-
-/**
- * Gets display text for time range option
- */
-const getTimeRangeDisplayText = (option: TIME_RANGE_OPTION, isStart: boolean): string => {
-    switch (option) {
-        case TIME_RANGE_OPTION.LAST_15_MINUTES:
-            return isStart ? "15 minutes ago" : "Now";
-        case TIME_RANGE_OPTION.LAST_HOUR:
-            return isStart ? "1 hour ago" : "Now";
-        case TIME_RANGE_OPTION.TODAY:
-            return isStart ? "Start of today" : "End of today";
-        case TIME_RANGE_OPTION.YESTERDAY:
-            return isStart ? "Start of yesterday" : "End of yesterday";
-        case TIME_RANGE_OPTION.LAST_7_DAYS:
-            return isStart ? "7 days ago" : "Now";
-        case TIME_RANGE_OPTION.LAST_30_DAYS:
-            return isStart ? "30 days ago" : "Now";
-        case TIME_RANGE_OPTION.LAST_12_MONTHS:
-            return isStart ? "12 months ago" : "Now";
-        case TIME_RANGE_OPTION.MONTH_TO_DATE:
-            return isStart ? "Start of month" : "Now";
-        case TIME_RANGE_OPTION.YEAR_TO_DATE:
-            return isStart ? "Start of year" : "Now";
-        case TIME_RANGE_OPTION.ALL_TIME:
-            return isStart ? "Earliest" : "Latest";
-        case TIME_RANGE_OPTION.CUSTOM:
-        default:
-            return isStart ? "Start date" : "End date";
-    }
-};
-
-/**
- * Custom input component for DatePicker that displays custom text
- */
-const CustomDateInput = (props: CustomDateInputProps) => {
-    const {value, 'date-range': dateRange} = props;
-    const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
-
-    const isStartInput = dateRange === 'start';
-    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
-        ? (value || (isStartInput ? 'Start date' : 'End date'))
-        : getTimeRangeDisplayText(timeRangeOption, isStartInput);
-
-    return (
-        <input
-            {...props}
-            value={displayText}
-            readOnly
-        />
-    );
-};
-
 /**
  * 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",
@@ -146,7 +90,7 @@ const TimeRangeInput = () => {
                 renderExtraFooter={renderFooter}
                 showTime={true}
                 components={{
-                    input: CustomDateInput,
+                    input: TimeDateInput,
                 }}
                 size={"middle"}
                 value={timeRange}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
index 1fd6f92b90..ac573400fc 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
@@ -122,10 +122,36 @@ const isValidDateRange = (
     return null !== dates && null !== dates[0] && null !== dates[1];
 };
 
+/**
+ * Map of time range options to their display text
+ */
+const TIME_RANGE_DISPLAY_TEXT_MAP: Record<TIME_RANGE_OPTION, {start: string; end: string}> = {
+    [TIME_RANGE_OPTION.LAST_15_MINUTES]: {start: "15 minutes ago", end: "Now"},
+    [TIME_RANGE_OPTION.LAST_HOUR]: {start: "1 hour ago", end: "Now"},
+    [TIME_RANGE_OPTION.TODAY]: {start: "Start of today", end: "End of today"},
+    [TIME_RANGE_OPTION.YESTERDAY]: {start: "Start of yesterday", end: "End of yesterday"},
+    [TIME_RANGE_OPTION.LAST_7_DAYS]: {start: "7 days ago", end: "Now"},
+    [TIME_RANGE_OPTION.LAST_30_DAYS]: {start: "30 days ago", end: "Now"},
+    [TIME_RANGE_OPTION.LAST_12_MONTHS]: {start: "12 months ago", end: "Now"},
+    [TIME_RANGE_OPTION.MONTH_TO_DATE]: {start: "Start of month", end: "Now"},
+    [TIME_RANGE_OPTION.YEAR_TO_DATE]: {start: "Start of year", end: "Now"},
+    [TIME_RANGE_OPTION.ALL_TIME]: {start: "Earliest", end: "Latest"},
+    [TIME_RANGE_OPTION.CUSTOM]: {start: "Start date", end: "End date"},
+};
+
+/**
+ * Gets display text for time range option
+ */
+const getTimeRangeDisplayText = (option: TIME_RANGE_OPTION, isStart: boolean): string => {
+    const displayText = TIME_RANGE_DISPLAY_TEXT_MAP[option];
+    return isStart ? displayText.start : displayText.end;
+};
+
 
 export {
     DEFAULT_TIME_RANGE,
     DEFAULT_TIME_RANGE_OPTION,
+    getTimeRangeDisplayText,
     isValidDateRange,
     TIME_RANGE_OPTION,
     TIME_RANGE_OPTION_DAYJS_MAP,

From 06a194470d1b3103cc121e7910e423256a98cece Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 27 Nov 2025 15:14:15 +0000
Subject: [PATCH 12/16] latest

---
 .../TimeRangeInput/TimeDateInput.tsx          | 28 +++----
 .../TimeRangeInput/index.module.css           |  4 +-
 .../SearchControls/TimeRangeInput/index.tsx   | 43 ++++++----
 .../SearchControls/TimeRangeInput/utils.tsx   | 79 ++++++++++++++-----
 4 files changed, 100 insertions(+), 54 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
index 9e9f1be0a2..e3ec9b11ff 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -1,43 +1,35 @@
-import {theme} from "antd";
-
 import useSearchStore from "../../SearchState/index";
 import {
-    getTimeRangeDisplayText,
+    DATE_RANGE_POSITION,
+    TIME_RANGE_DISPLAY_TEXT_MAP,
     TIME_RANGE_OPTION,
 } from "./utils";
 
 
 interface TimeDateInputProps {
     value: string;
-    'date-range': 'start' | 'end';
-    disabled?: boolean;
+    'date-range': DATE_RANGE_POSITION;
 }
 
 /**
- * Custom input component for DatePicker that displays custom text
+ * Input component for DatePicker that displays custom text for preset time ranges.
+ *
+ * @param props
+ * @return
  */
 const TimeDateInput = (props: TimeDateInputProps) => {
-    const {value, 'date-range': dateRange, disabled} = props;
+    const {value, 'date-range': dateRange} = props;
     const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
-    const {token} = theme.useToken();
 
-    const isStartInput = dateRange === 'start';
     const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
-        ? (value || (isStartInput ? 'Start date' : 'End date'))
-        : getTimeRangeDisplayText(timeRangeOption, isStartInput);
+        ? value
+        : TIME_RANGE_DISPLAY_TEXT_MAP[timeRangeOption][dateRange];
 
     return (
         <input
             {...props}
             value={displayText}
             readOnly
-            style={{
-                ...(disabled && {
-                    backgroundColor: token.colorBgContainerDisabled,
-                    color: token.colorTextDisabled,
-                    cursor: "not-allowed",
-                }),
-            }}
         />
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
index 8ccdd156ea..27116fdc7d 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.module.css
@@ -3,7 +3,7 @@
 }
 
 .timeRangeInputContainer :global(.ant-select) {
-    width: 160px;
+    min-width: 150px;
 }
 
 /* Makes border flush with range picker */
@@ -15,5 +15,5 @@
 .rangePicker {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    width: 350px;
+    min-width: 350px;
 }
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 c8effff4a6..76a42eed00 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -2,8 +2,10 @@ import {useCallback} from "react";
 
 import {CLP_QUERY_ENGINES} from "@webui/common/config";
 import {
+    ConfigProvider,
     DatePicker,
     Select,
+    theme,
 } from "antd";
 import dayjs from "dayjs";
 
@@ -37,6 +39,8 @@ const TimeRangeInput = () => {
         searchUiState,
     } = useSearchStore();
 
+    const {token} = theme.useToken();
+
     const sqlInterface = usePrestoSearchState((state) => state.sqlInterface);
     const isPrestoGuided = SETTINGS_QUERY_ENGINE === CLP_QUERY_ENGINES.PRESTO &&
                            sqlInterface === PRESTO_SQL_INTERFACE.GUIDED;
@@ -84,22 +88,31 @@ const TimeRangeInput = () => {
                 disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                             searchUiState === SEARCH_UI_STATE.QUERYING}
                 onChange={handleSelectChange}/>
-            <DatePicker.RangePicker
-                allowClear={true}
-                className={styles["rangePicker"] || ""}
-                renderExtraFooter={renderFooter}
-                showTime={true}
-                components={{
-                    input: TimeDateInput,
+            <ConfigProvider
+                theme={{
+                    token: {
+                        colorBgContainerDisabled: token.colorBgLayout,
+                        colorTextDisabled: token.colorTextSecondary,
+                    },
                 }}
-                size={"middle"}
-                value={timeRange}
-                disabled={timeRangeOption !== TIME_RANGE_OPTION.CUSTOM ||
-                            searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
-                            searchUiState === SEARCH_UI_STATE.QUERYING}
-                onCalendarChange={(dates) => {
-                    handleRangePickerChange(dates);
-                }}/>
+            >
+                <DatePicker.RangePicker
+                    allowClear={true}
+                    className={styles["rangePicker"] || ""}
+                    renderExtraFooter={renderFooter}
+                    showTime={true}
+                    components={{
+                        input: TimeDateInput,
+                    }}
+                    size={"middle"}
+                    value={timeRange}
+                    disabled={timeRangeOption !== TIME_RANGE_OPTION.CUSTOM ||
+                                searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+                                searchUiState === SEARCH_UI_STATE.QUERYING}
+                    onCalendarChange={(dates) => {
+                        handleRangePickerChange(dates);
+                    }}/>
+            </ConfigProvider>
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
index ac573400fc..9c87a26ff1 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
@@ -32,6 +32,8 @@ enum TIME_RANGE_OPTION {
     CUSTOM = "Custom",
 }
 
+
+
 const DEFAULT_TIME_RANGE_OPTION = TIME_RANGE_OPTION.ALL_TIME;
 
 /* eslint-disable no-magic-numbers, @typescript-eslint/require-await */
@@ -123,36 +125,75 @@ const isValidDateRange = (
 };
 
 /**
- * Map of time range options to their display text
+ * AntD date range position.
  */
-const TIME_RANGE_DISPLAY_TEXT_MAP: Record<TIME_RANGE_OPTION, {start: string; end: string}> = {
-    [TIME_RANGE_OPTION.LAST_15_MINUTES]: {start: "15 minutes ago", end: "Now"},
-    [TIME_RANGE_OPTION.LAST_HOUR]: {start: "1 hour ago", end: "Now"},
-    [TIME_RANGE_OPTION.TODAY]: {start: "Start of today", end: "End of today"},
-    [TIME_RANGE_OPTION.YESTERDAY]: {start: "Start of yesterday", end: "End of yesterday"},
-    [TIME_RANGE_OPTION.LAST_7_DAYS]: {start: "7 days ago", end: "Now"},
-    [TIME_RANGE_OPTION.LAST_30_DAYS]: {start: "30 days ago", end: "Now"},
-    [TIME_RANGE_OPTION.LAST_12_MONTHS]: {start: "12 months ago", end: "Now"},
-    [TIME_RANGE_OPTION.MONTH_TO_DATE]: {start: "Start of month", end: "Now"},
-    [TIME_RANGE_OPTION.YEAR_TO_DATE]: {start: "Start of year", end: "Now"},
-    [TIME_RANGE_OPTION.ALL_TIME]: {start: "Earliest", end: "Latest"},
-    [TIME_RANGE_OPTION.CUSTOM]: {start: "Start date", end: "End date"},
-};
+enum DATE_RANGE_POSITION {
+    START = "start",
+    END = "end",
+}
 
 /**
- * Gets display text for time range option
+ * Map of time range options to their display text
  */
-const getTimeRangeDisplayText = (option: TIME_RANGE_OPTION, isStart: boolean): string => {
-    const displayText = TIME_RANGE_DISPLAY_TEXT_MAP[option];
-    return isStart ? displayText.start : displayText.end;
+const TIME_RANGE_DISPLAY_TEXT_MAP: Record<
+    TIME_RANGE_OPTION,
+    Record<DATE_RANGE_POSITION, string>
+> = {
+    [TIME_RANGE_OPTION.LAST_15_MINUTES]: {
+        [DATE_RANGE_POSITION.START]: "15 minutes ago",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.LAST_HOUR]: {
+        [DATE_RANGE_POSITION.START]: "1 hour ago",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.TODAY]: {
+        [DATE_RANGE_POSITION.START]: "Start of today",
+        [DATE_RANGE_POSITION.END]: "End of today",
+    },
+    [TIME_RANGE_OPTION.YESTERDAY]: {
+        [DATE_RANGE_POSITION.START]: "Start of yesterday",
+        [DATE_RANGE_POSITION.END]: "End of yesterday",
+    },
+    [TIME_RANGE_OPTION.LAST_7_DAYS]: {
+        [DATE_RANGE_POSITION.START]: "7 days ago",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.LAST_30_DAYS]: {
+        [DATE_RANGE_POSITION.START]: "30 days ago",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.LAST_12_MONTHS]: {
+        [DATE_RANGE_POSITION.START]: "12 months ago",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.MONTH_TO_DATE]: {
+        [DATE_RANGE_POSITION.START]: "Start of month",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.YEAR_TO_DATE]: {
+        [DATE_RANGE_POSITION.START]: "Start of year",
+        [DATE_RANGE_POSITION.END]: "Now",
+    },
+    [TIME_RANGE_OPTION.ALL_TIME]: {
+        [DATE_RANGE_POSITION.START]: "First timestamp",
+        [DATE_RANGE_POSITION.END]: "Last timestamp",
+    },
+    // Custom option is just a placeholder for typing purposes, its values should not
+    // be used.
+    [TIME_RANGE_OPTION.CUSTOM]: {
+        [DATE_RANGE_POSITION.START]: "Start date",
+        [DATE_RANGE_POSITION.END]: "End date",
+    },
 };
 
 
 export {
+    DATE_RANGE_POSITION,
     DEFAULT_TIME_RANGE,
     DEFAULT_TIME_RANGE_OPTION,
-    getTimeRangeDisplayText,
     isValidDateRange,
+    TIME_RANGE_DISPLAY_TEXT_MAP,
     TIME_RANGE_OPTION,
     TIME_RANGE_OPTION_DAYJS_MAP,
     TIME_RANGE_OPTION_NAMES,

From 2786aea3880a67f836f850217312f4809e091d7a Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 27 Nov 2025 15:20:33 +0000
Subject: [PATCH 13/16] latest

---
 .../SearchControls/TimeRangeInput/TimeDateInput.tsx       | 5 +++--
 .../SearchPage/SearchControls/TimeRangeInput/index.tsx    | 1 +
 .../SearchPage/SearchControls/TimeRangeInput/utils.tsx    | 8 ++++++--
 components/webui/server/.env                              | 4 ++--
 tools/yscope-dev-utils                                    | 2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
index e3ec9b11ff..bae6e62122 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -1,6 +1,7 @@
 import useSearchStore from "../../SearchState/index";
 import {
     DATE_RANGE_POSITION,
+    DATE_RANGE_PROP_KEY,
     TIME_RANGE_DISPLAY_TEXT_MAP,
     TIME_RANGE_OPTION,
 } from "./utils";
@@ -8,7 +9,7 @@ import {
 
 interface TimeDateInputProps {
     value: string;
-    'date-range': DATE_RANGE_POSITION;
+    [DATE_RANGE_PROP_KEY]: DATE_RANGE_POSITION;
 }
 
 /**
@@ -18,7 +19,7 @@ interface TimeDateInputProps {
  * @return
  */
 const TimeDateInput = (props: TimeDateInputProps) => {
-    const {value, 'date-range': dateRange} = props;
+    const {value, [DATE_RANGE_PROP_KEY]: dateRange} = props;
     const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
 
     const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
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 76a42eed00..c4df3ac286 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -23,6 +23,7 @@ import {
     TIME_RANGE_OPTION_NAMES,
 } from "./utils";
 
+
 /**
  * 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",
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
index 9c87a26ff1..a7ac81dfcc 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
@@ -32,8 +32,6 @@ enum TIME_RANGE_OPTION {
     CUSTOM = "Custom",
 }
 
-
-
 const DEFAULT_TIME_RANGE_OPTION = TIME_RANGE_OPTION.ALL_TIME;
 
 /* eslint-disable no-magic-numbers, @typescript-eslint/require-await */
@@ -132,6 +130,11 @@ enum DATE_RANGE_POSITION {
     END = "end",
 }
 
+/**
+ * AntD RangePicker prop key for date range position.
+ */
+const DATE_RANGE_PROP_KEY = "date-range";
+
 /**
  * Map of time range options to their display text
  */
@@ -190,6 +193,7 @@ const TIME_RANGE_DISPLAY_TEXT_MAP: Record<
 
 export {
     DATE_RANGE_POSITION,
+    DATE_RANGE_PROP_KEY,
     DEFAULT_TIME_RANGE,
     DEFAULT_TIME_RANGE_OPTION,
     isValidDateRange,
diff --git a/components/webui/server/.env b/components/webui/server/.env
index 823c31b2df..b51df3a791 100644
--- a/components/webui/server/.env
+++ b/components/webui/server/.env
@@ -5,11 +5,11 @@ NODE_ENV=production
 
 # Network
 HOST=localhost
-PORT=3005
+PORT=3000
 
 # Database
 CLP_DB_USER=clp-user
-CLP_DB_PASS=cSTpqglBCtY
+CLP_DB_PASS=
 
 #Presto
 PRESTO_CATALOG=clp
diff --git a/tools/yscope-dev-utils b/tools/yscope-dev-utils
index 49e0749179..6eb62e9f97 160000
--- a/tools/yscope-dev-utils
+++ b/tools/yscope-dev-utils
@@ -1 +1 @@
-Subproject commit 49e07491790bb9a0adae10b1a125e9fd9b9eb487
+Subproject commit 6eb62e9f97ab699ae6e6055749b933750947cc52

From 11c45e8eb2565c6f5650280522c3ab602c88c6fa Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 27 Nov 2025 15:22:13 +0000
Subject: [PATCH 14/16] latest

---
 .../SearchControls/TimeRangeInput/TimeDateInput.tsx   | 11 +++++------
 .../SearchControls/TimeRangeInput/index.tsx           |  6 +++---
 .../SearchControls/TimeRangeInput/utils.tsx           |  1 +
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
index bae6e62122..f90f1dd5e1 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -22,16 +22,15 @@ const TimeDateInput = (props: TimeDateInputProps) => {
     const {value, [DATE_RANGE_PROP_KEY]: dateRange} = props;
     const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
 
-    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM
-        ? value
-        : TIME_RANGE_DISPLAY_TEXT_MAP[timeRangeOption][dateRange];
+    const displayText = timeRangeOption === TIME_RANGE_OPTION.CUSTOM ?
+        value :
+        TIME_RANGE_DISPLAY_TEXT_MAP[timeRangeOption][dateRange];
 
     return (
         <input
             {...props}
-            value={displayText}
-            readOnly
-        />
+            readOnly={true}
+            value={displayText}/>
     );
 };
 
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 c4df3ac286..c4920f3b7c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -14,9 +14,9 @@ import useSearchStore from "../../SearchState/index";
 import usePrestoSearchState from "../../SearchState/Presto";
 import {PRESTO_SQL_INTERFACE} from "../../SearchState/Presto/typings";
 import {SEARCH_UI_STATE} from "../../SearchState/typings";
-import TimeDateInput from "./TimeDateInput";
 import styles from "./index.module.css";
 import TimeRangeFooter from "./Presto/TimeRangeFooter";
+import TimeDateInput from "./TimeDateInput";
 import {
     isValidDateRange,
     TIME_RANGE_OPTION,
@@ -102,11 +102,11 @@ const TimeRangeInput = () => {
                     className={styles["rangePicker"] || ""}
                     renderExtraFooter={renderFooter}
                     showTime={true}
+                    size={"middle"}
+                    value={timeRange}
                     components={{
                         input: TimeDateInput,
                     }}
-                    size={"middle"}
-                    value={timeRange}
                     disabled={timeRangeOption !== TIME_RANGE_OPTION.CUSTOM ||
                                 searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                                 searchUiState === SEARCH_UI_STATE.QUERYING}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
index a7ac81dfcc..016e64ee2c 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/utils.tsx
@@ -182,6 +182,7 @@ const TIME_RANGE_DISPLAY_TEXT_MAP: Record<
         [DATE_RANGE_POSITION.START]: "First timestamp",
         [DATE_RANGE_POSITION.END]: "Last timestamp",
     },
+
     // Custom option is just a placeholder for typing purposes, its values should not
     // be used.
     [TIME_RANGE_OPTION.CUSTOM]: {

From 6289b4787721b8522e19e9c0d8d7c3d00ba52363 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 27 Nov 2025 15:26:32 +0000
Subject: [PATCH 15/16] latest

---
 .../SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx | 3 ++-
 .../pages/SearchPage/SearchControls/TimeRangeInput/index.tsx   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
index f90f1dd5e1..44fe47c650 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -29,8 +29,9 @@ const TimeDateInput = (props: TimeDateInputProps) => {
     return (
         <input
             {...props}
+            value={displayText}
             readOnly={true}
-            value={displayText}/>
+        />
     );
 };
 
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 c4920f3b7c..d66bbebd52 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/index.tsx
@@ -89,6 +89,7 @@ const TimeRangeInput = () => {
                 disabled={searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
                             searchUiState === SEARCH_UI_STATE.QUERYING}
                 onChange={handleSelectChange}/>
+            {/* Customize disabled styling to make date strings easier to read */}
             <ConfigProvider
                 theme={{
                     token: {

From 16ccad15ffde87a7e068106f8d0ba22d6219e1cd Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 27 Nov 2025 15:31:44 +0000
Subject: [PATCH 16/16] latest

---
 .../SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
index 44fe47c650..f90f1dd5e1 100644
--- a/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
+++ b/components/webui/client/src/pages/SearchPage/SearchControls/TimeRangeInput/TimeDateInput.tsx
@@ -29,9 +29,8 @@ const TimeDateInput = (props: TimeDateInputProps) => {
     return (
         <input
             {...props}
-            value={displayText}
             readOnly={true}
-        />
+            value={displayText}/>
     );
 };