feat(webui): Disable guided inputs while query running; Replace redundant "from" state with "dataset" state from native UI. (#1465)

davemarco · web-flow · commit cb71d3b8b907 · 2025-10-23T14:56:42.000-04:00
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/From.tsx
@@ -1,5 +1,4 @@
 import InputLabel from "../../../../../components/InputLabel";
-import usePrestoSearchState from "../../../SearchState/Presto";
 import DatasetSelect from "../../Dataset/DatasetSelect";
 import guidedGrid from "./index.module.css";
 
@@ -10,19 +9,14 @@ import guidedGrid from "./index.module.css";
  * @return
  */
 const From = () => {
-    const from = usePrestoSearchState((state) => state.from);
-    const updateFrom = usePrestoSearchState((state) => state.updateFrom);
-
     return (
         <div className={guidedGrid["from"]}>
             <InputLabel>FROM</InputLabel>
             <DatasetSelect
-                value={from}
                 className={
                     `${guidedGrid["noLeftBorderRadiusSelect"]} ${
                         guidedGrid["widthSelect"]}`
-                }
-                onChange={updateFrom}/>
+                }/>
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/OrderBy.tsx
@@ -1,6 +1,8 @@
 import InputLabel from "../../../../../components/InputLabel";
 import SqlInput from "../../../../../components/SqlInput";
+import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
 
 
@@ -12,13 +14,16 @@ import guidedGrid from "./index.module.css";
 const OrderBy = () => {
     const orderBy = usePrestoSearchState((state) => state.orderBy);
     const updateOrderBy = usePrestoSearchState((state) => state.updateOrderBy);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
 
     return (
         <div className={guidedGrid["order"]}>
             <InputLabel>ORDER BY</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
-                disabled={false}
+                disabled={disabled}
                 value={orderBy}
                 onChange={(value) => {
                     updateOrderBy(value || "");
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Select.tsx
@@ -1,6 +1,8 @@
 import InputLabel from "../../../../../components/InputLabel";
 import SqlInput from "../../../../../components/SqlInput";
+import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
 
 
@@ -12,13 +14,16 @@ import guidedGrid from "./index.module.css";
 const Select = () => {
     const select = usePrestoSearchState((state) => state.select);
     const updateSelect = usePrestoSearchState((state) => state.updateSelect);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
 
     return (
         <div className={guidedGrid["select"]}>
             <InputLabel>SELECT</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
-                disabled={false}
+                disabled={disabled}
                 value={select}
                 onChange={(value) => {
                     updateSelect(value || "");
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
@@ -1,5 +1,4 @@
 import InputLabel from "../../../../../../components/InputLabel";
-import usePrestoSearchState from "../../../../SearchState/Presto";
 import guidedGrid from "../index.module.css";
 import TimestampKeySelect from "./TimestampKeySelect";
 
@@ -10,19 +9,14 @@ import TimestampKeySelect from "./TimestampKeySelect";
  * @return
  */
 const TimestampKey = () => {
-    const timestampKey = usePrestoSearchState((state) => state.timestampKey);
-    const updateTimestampKey = usePrestoSearchState((state) => state.updateTimestampKey);
-
     return (
         <div className={guidedGrid["timestampKey"]}>
             <InputLabel>TIME KEY</InputLabel>
             <TimestampKeySelect
-                value={timestampKey}
                 className={
                     `${guidedGrid["noLeftBorderRadiusSelect"]} ${
                         guidedGrid["widthSelect"]}`
-                }
-                onChange={updateTimestampKey}/>
+                }/>
         </div>
     );
 };
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/GuidedControls/Where.tsx
@@ -1,6 +1,8 @@
 import InputLabel from "../../../../../components/InputLabel";
 import SqlInput from "../../../../../components/SqlInput";
+import useSearchStore from "../../../SearchState/index";
 import usePrestoSearchState from "../../../SearchState/Presto";
+import {SEARCH_UI_STATE} from "../../../SearchState/typings";
 import guidedGrid from "./index.module.css";
 
 
@@ -12,13 +14,16 @@ import guidedGrid from "./index.module.css";
 const Where = () => {
     const where = usePrestoSearchState((state) => state.where);
     const updateWhere = usePrestoSearchState((state) => state.updateWhere);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
 
     return (
         <div className={guidedGrid["where"]}>
             <InputLabel>WHERE</InputLabel>
             <SqlInput
                 className={guidedGrid["noLeftBorderRadius"] || ""}
-                disabled={false}
+                disabled={disabled}
                 value={where}
                 onChange={(value) => {
                     updateWhere(value || "");
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
@@ -31,7 +31,8 @@
 }
 
 .widthSelect {
-    width: 100%;
+    width: 0;
+    flex-grow: 1;
 }
 
 .noLeftBorderRadiusSelect :global(.ant-select-selector) {
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/FreeformButton/index.tsx
@@ -1,8 +1,10 @@
 import {EditOutlined} from "@ant-design/icons";
 import {Button} from "antd";
 
+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";
 
 
 /**
@@ -12,6 +14,9 @@ import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
  */
 const FreeformButton = () => {
     const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
 
     const handleClick = () => {
         setSqlInterface(PRESTO_SQL_INTERFACE.FREEFORM);
@@ -21,6 +26,7 @@ const FreeformButton = () => {
         <Button
             block={true}
             color={"default"}
+            disabled={disabled}
             icon={<EditOutlined/>}
             size={"middle"}
             variant={"filled"}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlInterfaceButton/GuidedButton/index.tsx
@@ -1,8 +1,10 @@
 import {AppstoreOutlined} from "@ant-design/icons";
 import {Button} from "antd";
 
+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";
 
 
 /**
@@ -12,6 +14,9 @@ import {PRESTO_SQL_INTERFACE} from "../../../../SearchState/Presto/typings";
  */
 const GuidedButton = () => {
     const setSqlInterface = usePrestoSearchState((state) => state.setSqlInterface);
+    const searchUiState = useSearchStore((state) => state.searchUiState);
+    const disabled = searchUiState === SEARCH_UI_STATE.QUERY_ID_PENDING ||
+        searchUiState === SEARCH_UI_STATE.QUERYING;
 
     const handleClick = () => {
         setSqlInterface(PRESTO_SQL_INTERFACE.GUIDED);
@@ -21,6 +26,7 @@ const GuidedButton = () => {
         <Button
             block={true}
             color={"default"}
+            disabled={disabled}
             icon={<AppstoreOutlined/>}
             size={"middle"}
             variant={"filled"}
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/SqlSearchButton/RunButton/GuidedRunButton.tsx
@@ -34,9 +34,9 @@ const GuidedRunButton = () => {
     const updateTimelineConfig = useSearchStore((state) => state.updateTimelineConfig);
     const timeRangeOption = useSearchStore((state) => state.timeRangeOption);
     const timeRange = useSearchStore((state) => state.timeRange);
+    const {selectDataset: from} = useSearchStore.getState();
 
     const select = usePrestoSearchState((state) => state.select);
-    const from = usePrestoSearchState((state) => state.from);
     const timestampKey = usePrestoSearchState((state) => state.timestampKey);
     const updateCachedGuidedSearchQueryString =
         usePrestoSearchState((state) => state.updateCachedGuidedSearchQueryString);
diff --git a/components/webui/client/src/pages/SearchPage/SearchControls/Presto/presto-guided-search-requests.ts b/components/webui/client/src/pages/SearchPage/SearchControls/Presto/presto-guided-search-requests.ts
@@ -66,7 +66,8 @@ const handlePrestoGuidedClearResults = () => {
  */
 const buildPrestoGuidedQueries = (timeRange: [Dayjs, Dayjs]) => {
     const [startTimestamp, endTimestamp] = timeRange;
-    const {select, from, where, orderBy, timestampKey} = usePrestoSearchState.getState();
+    const {select, where, orderBy, timestampKey} = usePrestoSearchState.getState();
+    const {selectDataset: from} = useSearchStore.getState();
 
     if (null === from) {
         throw new Error("Cannot build guided query: from input is missing");
diff --git a/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx b/components/webui/client/src/pages/SearchPage/SearchState/Presto/index.tsx
@@ -11,7 +11,6 @@ const PRESTO_SEARCH_STATE_DEFAULT = Object.freeze({
     cachedGuidedSearchQueryString: "",
     errorMsg: null,
     errorName: null,
-    from: null,
     orderBy: "",
     queryDrawerOpen: false,
     select: "*",
@@ -36,11 +35,6 @@ interface PrestoSearchState {
      */
     errorName: Nullable<string>;
 
-    /**
-     * FROM input.
-     */
-    from: Nullable<string>;
-
     /**
      * ORDER BY input.
      */
@@ -75,7 +69,6 @@ interface PrestoSearchState {
     updateCachedGuidedSearchQueryString: (query: string) => void;
     updateErrorMsg: (msg: Nullable<string>) => void;
     updateErrorName: (name: Nullable<string>) => void;
-    updateFrom: (database: Nullable<string>) => void;
     updateOrderBy: (items: string) => void;
     updateQueryDrawerOpen: (open: boolean) => void;
     updateSelect: (items: string) => void;
@@ -97,9 +90,6 @@ const usePrestoSearchState = create<PrestoSearchState>((set) => ({
     updateErrorName: (name) => {
         set({errorName: name});
     },
-    updateFrom: (database) => {
-        set({from: database});
-    },
     updateOrderBy: (items) => {
         set({orderBy: items});
     },

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,8 @@`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.widthSelect {`
`34`		`- width: 100%;`
	`34`	`+ width: 0;`
	`35`	`+ flex-grow: 1;`
`35`	`36`	`}`
`36`	`37`
`37`	`38`	`.noLeftBorderRadiusSelect :global(.ant-select-selector) {`