1622 data query tool should have a refresh button (#1635)

- Fixes env var naming
- Adds a refresh button
- adds new menu icon
  - Enable / Disable Cache (state / browser)
  - Set asc/desc order
  - make settings menu icon red when something is disabled (cache)
- Change table to desc by default
- Disable the auto complete default input box features to ensure they do
not get in the way of the smart input items (combobox items)

Various snippets:
<img width="1419" height="1055" alt="image"
src="https://github.com/user-attachments/assets/3dfe6a13-42c7-4ed4-a620-19293437783f"
/>
<img width="879" height="262" alt="image"
src="https://github.com/user-attachments/assets/d030e616-eb33-46c3-886b-b30b898802d7"
/>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: krowvin

cda-gui/.env.development

@@ -1 +1 @@
-CDA_API_ROOT=https://water.dev.cwbi.us/cwms-data
+VITE_CDA_API_ROOT=https://water.dev.cwbi.us/cwms-data

cda-gui/.env.production

@@ -1 +1 @@
-CDA_API_ROOT=https://cwms-data.usace.army.mil/cwms-data
+VITE_CDA_API_ROOT=https://cwms-data.usace.army.mil/cwms-data

cda-gui/.env.test

@@ -1 +1 @@
-CDA_API_ROOT=https://cwms-data-test.cwbi.us/cwms-data
+VITE_CDA_API_ROOT=https://cwms-data-test.cwbi.us/cwms-data

cda-gui/src/pages/data-query/components/DataTabs.jsx

@@ -13,6 +13,7 @@ export default function DataTabs({
   timeseriesParams,
   begin,
   end,
+  sortAscending,
 }) {
   if (!tsids || !tsids.length) return null;
   if (isLoading) return <Skeleton type="card" className="w-full h-[500px]" />;
@@ -38,7 +39,7 @@ export default function DataTabs({
                   dateFormat="YYYY-MM-DD HH:mm:ss"
                   interval="5"
                   missingString="---"
-                  sortAscending
+                  sortAscending={sortAscending}
                   trim
                   pageSize={1000000}
                   tableOptions={{
@@ -116,4 +117,5 @@ DataTabs.propTypes = {
   timeseriesParams: PropTypes.array,
   begin: PropTypes.object.isRequired,
   end: PropTypes.object.isRequired,
+  sortAscending: PropTypes.bool.isRequired,
 };

cda-gui/src/pages/data-query/components/SettingsGearButton.jsx

@@ -0,0 +1,32 @@
+import { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { FiSettings } from "react-icons/fi";
+
+const SettingsGearButton = forwardRef(function SettingsGearButton(
+  { active = false, className = "", ...props },
+  ref,
+) {
+  const activeClassName = active
+    ? "border-red-200 bg-red-50 text-red-600 hover:bg-red-100"
+    : "border-slate-300 bg-white text-slate-700 hover:bg-slate-50";
+
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type="button"
+      className={`inline-flex items-center justify-center gap-2 rounded border px-3 py-2 shadow-sm transition ${activeClassName} ${className}`.trim()}
+    >
+      <span className="text-sm font-medium">Query Settings</span>
+      <FiSettings className="h-5 w-5" aria-hidden="true" />
+      <span className="sr-only">Open query settings</span>
+    </button>
+  );
+});
+
+SettingsGearButton.propTypes = {
+  active: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+export default SettingsGearButton;

cda-gui/src/pages/data-query/components/SettingsMenu.jsx

@@ -0,0 +1,60 @@
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import PropTypes from "prop-types";
+import Toggle from "./Toggle";
+import SettingsGearButton from "./SettingsGearButton";
+
+export default function SettingsMenu({
+  cacheEnabled,
+  setCacheEnabled,
+  sortAscending,
+  setSortAscending,
+  active,
+}) {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <MenuButton as={SettingsGearButton} active={active} />
+      <MenuItems className="absolute right-0 z-10 mt-2 w-72 rounded-md border border-slate-200 bg-white p-4 shadow-lg focus:outline-none">
+        <MenuItem>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="text-sm font-semibold text-slate-900">Enable cache</div>
+              <p className="text-xs text-slate-600">
+                Use browser cache for repeated requests. Disable to force fresh fetches.
+              </p>
+            </div>
+            <Toggle
+              checked={cacheEnabled}
+              onChange={setCacheEnabled}
+              className="ml-0"
+            />
+          </div>
+        </MenuItem>
+        <MenuItem>
+          <div className="mt-4 flex items-start justify-between gap-4">
+            <div>
+              <div className="text-sm font-semibold text-slate-900">
+                Descending table order
+              </div>
+              <p className="text-xs text-slate-600">
+                Keep newest timestamps first. Disable to switch to oldest rows first.
+              </p>
+            </div>
+            <Toggle
+              checked={!sortAscending}
+              onChange={(checked) => setSortAscending(!checked)}
+              className="ml-0"
+            />
+          </div>
+        </MenuItem>
+      </MenuItems>
+    </Menu>
+  );
+}
+
+SettingsMenu.propTypes = {
+  active: PropTypes.bool,
+  cacheEnabled: PropTypes.bool.isRequired,
+  setCacheEnabled: PropTypes.func.isRequired,
+  setSortAscending: PropTypes.func.isRequired,
+  sortAscending: PropTypes.bool.isRequired,
+};

cda-gui/src/pages/data-query/components/TimeSeriesDropdown.jsx

@@ -14,7 +14,7 @@ import { useDebounce } from "use-debounce";
 // Catalog client
 const catalogApi = new CatalogApi(
   new Configuration({
-    basePath: import.meta.env.CDA_URL,
+    basePath: import.meta.env.VITE_CDA_API_ROOT,
     headers: { accept: "application/json;version=2" },
   }),
 );
@@ -76,6 +76,11 @@ export default function TimeSeriesDropdown({ office, tsids, setTsids }) {
             onChange={(event) => setSearchTerm(event.target.value)}
             className="px-3 py-2 border rounded w-full"
             placeholder="Search TSID (e.g. Location.Elev.Inst.1Hour.0.Version)"
+            autoComplete="off"
+            autoCorrect="off"
+            autoCapitalize="none"
+            spellCheck={false}
+            name="tsid-search"
           />
           <ComboboxOptions className="bg-white border mt-1 max-h-60 overflow-auto">
             {loading ? (

cda-gui/src/pages/data-query/hooks/useAliases.js

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { CatalogApi, Configuration } from "cwmsjs";
 
-const CDA_URL = import.meta.env.CDA_URL;
+const CDA_URL = import.meta.env.VITE_CDA_API_ROOT;
 const config = new Configuration({
   basePath: CDA_URL,
 });

cda-gui/src/pages/data-query/hooks/useConfigList.js

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { BlobApi, Configuration } from "cwmsjs";
 
-const CDA_URL = import.meta.env.CDA_URL;
+const CDA_URL = import.meta.env.VITE_CDA_API_ROOT;
 const config = new Configuration({
   basePath: CDA_URL,
 });

cda-gui/src/pages/data-query/hooks/useDescriptors.js

@@ -2,7 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Configuration, CatalogApi } from "cwmsjs";
 
 const config = new Configuration({
-  basePath: import.meta.env.CDA_URL,
+  basePath: import.meta.env.VITE_CDA_API_ROOT,
 });
 const cataApi = new CatalogApi(config);