Fixed time filtering and page reloading

matt-aitken · matt-aitken · commit ed0fd702fa08 · 2026-01-21T12:51:23.000Z
diff --git a/apps/webapp/app/components/runs/v3/SharedFilters.tsx b/apps/webapp/app/components/runs/v3/SharedFilters.tsx
@@ -265,8 +265,8 @@ export function timeFilterRenderValues({
     rangeType === "range" || rangeType === "period"
       ? labelName
       : rangeType === "from"
-      ? `${labelName} after`
-      : `${labelName} before`;
+        ? `${labelName} after`
+        : `${labelName} before`;
 
   return { label, valueLabel, rangeType };
 }
@@ -280,56 +280,37 @@ export interface TimeFilterApplyValues {
 
 export interface TimeFilterProps {
   defaultPeriod?: string;
+  period?: string;
+  from?: string;
+  to?: string;
   /** Label name used in the filter display, defaults to "Created" */
   labelName?: string;
   applyShortcut?: ShortcutDefinition | undefined;
   /** Callback when the user applies a time filter selection, receives the applied values */
-  onApply?: (values: TimeFilterApplyValues) => void;
+  onValueChange?: (values: TimeFilterApplyValues) => void;
 }
 
 export function TimeFilter({
   defaultPeriod,
+  period,
+  from,
+  to,
   labelName = "Created",
   applyShortcut,
-  onApply,
+  onValueChange,
 }: TimeFilterProps = {}) {
   const { value } = useSearchParams();
-  const periodValue = value("period");
-  const fromValue = value("from");
-  const toValue = value("to");
-
-  //non-optimistic location
-  const location = useLocation();
-  
-  const { period, from, to, label, valueLabel } = timeFilters({
+  const periodValue = period ?? value("period");
+  const fromValue = from ?? value("from");
+  const toValue = to ?? value("to");
+
+  const constrained = timeFilters({
     period: periodValue,
     from: fromValue,
     to: toValue,
     defaultPeriod,
     labelName,
   });
-  
-  // Track the search string, not individual values
-  const previousSearch = useRef<string | null>(null);
-
-  useEffect(() => {
-    // Skip first render - set initial value and return
-    if (previousSearch.current === null) {
-      previousSearch.current = location.search;
-      return;
-    }
-    
-    // Only call onApply if the URL actually changed
-    if (previousSearch.current !== location.search) {
-      const currentSearch = new URLSearchParams(location.search);
-      onApply?.({ 
-        period: currentSearch.get("period") ?? undefined, 
-        from: currentSearch.get("from") ?? undefined, 
-        to: currentSearch.get("to") ?? undefined 
-      });
-      previousSearch.current = location.search;
-    }
-  }, [location.search, onApply]);
 
   return (
     <FilterMenuProvider>
@@ -338,21 +319,21 @@ export function TimeFilter({
           trigger={
             <Ariakit.Select render={<div className="group cursor-pointer focus-custom" />}>
               <AppliedFilter
-                label={label}
+                label={constrained.label}
                 icon={filterIcon("period")}
-                value={valueLabel}
+                value={constrained.valueLabel}
                 removable={false}
                 variant="secondary/small"
               />
             </Ariakit.Select>
           }
-          period={period}
-          from={from}
-          to={to}
+          period={constrained.period}
+          from={constrained.from}
+          to={constrained.to}
           defaultPeriod={defaultPeriod}
           labelName={labelName}
           applyShortcut={applyShortcut}
-          onApply={onApply}
+          onValueChange={onValueChange}
         />
       )}
     </FilterMenuProvider>
@@ -379,6 +360,7 @@ export function TimeDropdown({
   labelName = "Created",
   applyShortcut,
   onApply,
+  onValueChange,
 }: {
   trigger: ReactNode;
   period?: string;
@@ -388,6 +370,8 @@ export function TimeDropdown({
   labelName?: string;
   applyShortcut?: ShortcutDefinition | undefined;
   onApply?: (values: TimeFilterApplyValues) => void;
+  /** When provided, the component operates in controlled mode and skips URL navigation */
+  onValueChange?: (values: TimeFilterApplyValues) => void;
 }) {
   const [open, setOpen] = useState<boolean | undefined>();
   const { replace } = useSearchParams();
@@ -444,18 +428,26 @@ export function TimeDropdown({
         periodToApply = `${customValue}${customUnit}`;
       }
 
-      replace({
-        period: periodToApply,
-        cursor: undefined,
-        direction: undefined,
-        from: undefined,
-        to: undefined,
-      });
+      const values: TimeFilterApplyValues = { period: periodToApply, from: undefined, to: undefined };
+
+      if (onValueChange) {
+        // Controlled mode - just call the handler
+        onValueChange(values);
+      } else {
+        // URL mode - navigate
+        replace({
+          period: periodToApply,
+          cursor: undefined,
+          direction: undefined,
+          from: undefined,
+          to: undefined,
+        });
+      }
 
       setFromValue(undefined);
       setToValue(undefined);
       setOpen(false);
-      onApply?.({ period: periodToApply, from: undefined, to: undefined });
+      onApply?.(values);
     } else {
       // Validate date range
       if (!fromValue && !toValue) {
@@ -471,16 +463,24 @@ export function TimeDropdown({
       const fromStr = fromValue?.getTime().toString();
       const toStr = toValue?.getTime().toString();
 
-      replace({
-        period: undefined,
-        cursor: undefined,
-        direction: undefined,
-        from: fromStr,
-        to: toStr,
-      });
+      const values: TimeFilterApplyValues = { period: undefined, from: fromStr, to: toStr };
+
+      if (onValueChange) {
+        // Controlled mode - just call the handler
+        onValueChange(values);
+      } else {
+        // URL mode - navigate
+        replace({
+          period: undefined,
+          cursor: undefined,
+          direction: undefined,
+          from: fromStr,
+          to: toStr,
+        });
+      }
 
       setOpen(false);
-      onApply?.({ period: undefined, from: fromStr, to: toStr });
+      onApply?.(values);
     }
   }, [
     activeSection,
@@ -492,6 +492,7 @@ export function TimeDropdown({
     toValue,
     replace,
     onApply,
+    onValueChange,
   ]);
 
   return (
@@ -532,9 +533,9 @@ export function TimeDropdown({
                       ? "border-indigo-500 "
                       : "border-charcoal-650 hover:border-charcoal-600",
                     validationError &&
-                      activeSection === "duration" &&
-                      selectedPeriod === "custom" &&
-                      "border-error"
+                    activeSection === "duration" &&
+                    selectedPeriod === "custom" &&
+                    "border-error"
                   )}
                   onClick={(e) => e.stopPropagation()}
                 >
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -1,13 +1,13 @@
 import { ArrowDownTrayIcon, ClipboardIcon } from "@heroicons/react/20/solid";
 import type { OutputColumnMetadata, WhereClauseFallback } from "@internal/clickhouse";
-import { Form, useNavigation, useSubmit } from "@remix-run/react";
 import {
   redirect,
   type ActionFunctionArgs,
   type LoaderFunctionArgs,
 } from "@remix-run/server-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { typedjson, useTypedActionData, useTypedLoaderData } from "remix-typedjson";
+import { flushSync } from "react-dom";
+import { typedjson, useTypedFetcher, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { AlphaTitle } from "~/components/AlphaBadge";
@@ -353,26 +353,24 @@ const QueryEditorForm = forwardRef<
     defaultQuery: string;
     defaultScope: QueryScope;
     history: QueryHistoryItem[];
-    isLoading: boolean;
+    fetcher: ReturnType<typeof useTypedFetcher<typeof action>>;
     isAdmin: boolean;
   }
->(function QueryEditorForm({ defaultQuery, defaultScope, history, isLoading, isAdmin }, ref) {
+>(function QueryEditorForm({ defaultQuery, defaultScope, history, fetcher, isAdmin }, ref) {
+  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
   const [query, setQuery] = useState(defaultQuery);
   const [scope, setScope] = useState<QueryScope>(defaultScope);
-  const { value: searchParamValue } = useSearchParams();
   const formRef = useRef<HTMLFormElement>(null);
 
   // Get time filter values from URL search params
-  const period = searchParamValue("period");
-  const from = searchParamValue("from");
-  const to = searchParamValue("to");
+  const [period, setPeriod] = useState<string | undefined>();
+  const [from, setFrom] = useState<string | undefined>();
+  const [to, setTo] = useState<string | undefined>();
 
   // Check if the query contains triggered_at in a WHERE clause
   // This disables the time filter UI since the user is filtering in their query
   const queryHasTriggeredAt = /\bWHERE\b[\s\S]*\btriggered_at\b/i.test(query);
 
-
-
   // Expose methods to parent for external query setting (history, AI, examples)
   useImperativeHandle(
     ref,
@@ -401,7 +399,7 @@ const QueryEditorForm = forwardRef<
         minHeight="200px"
         className="min-h-[200px]"
       />
-      <Form ref={formRef} method="post" className="flex items-center justify-between gap-2 px-2">
+      <fetcher.Form ref={formRef} method="post" className="flex items-center justify-between gap-2 px-2">
         <input type="hidden" name="query" value={query} />
         <input type="hidden" name="scope" value={scope} />
         {/* Pass time filter values to action */}
@@ -450,8 +448,20 @@ const QueryEditorForm = forwardRef<
             <TimeFilter
               defaultPeriod={DEFAULT_PERIOD}
               labelName="Triggered"
+              period={period}
+              from={from}
+              to={to}
               applyShortcut={{ key: "enter", enabledOnInputElements: true }}
-              onApply={() => formRef.current?.submit()}
+              onValueChange={(values) => {
+                flushSync(() => {
+                  setPeriod(values.period);
+                  setFrom(values.from);
+                  setTo(values.to);
+                });
+                if (formRef.current) {
+                  fetcher.submit(formRef.current);
+                }
+              }}
             />
           )}
           <Button
@@ -464,15 +474,15 @@ const QueryEditorForm = forwardRef<
             {isLoading ? "Querying..." : "Query"}
           </Button>
         </div>
-      </Form>
+      </fetcher.Form>
     </div>
   );
 });
 
 export default function Page() {
   const { defaultQuery, history, isAdmin } = useTypedLoaderData<typeof loader>();
-  const results = useTypedActionData<typeof action>();
-  const navigation = useNavigation();
+  const fetcher = useTypedFetcher<typeof action>();
+  const results = fetcher.data;
   const { replace: replaceSearchParams } = useSearchParams();
 
   // Use most recent history item if available, otherwise fall back to defaults
@@ -509,8 +519,7 @@ export default function Page() {
     [replaceSearchParams]
   );
 
-  const isLoading = (navigation.state === "submitting" || navigation.state === "loading") && navigation.formMethod === "POST";
-
+  const isLoading = fetcher.state === "submitting" || fetcher.state === "loading";
 
   // Create a stable key from columns to detect schema changes
   const columnsKey = results?.columns
@@ -544,7 +553,7 @@ export default function Page() {
                 defaultQuery={initialQuery}
                 defaultScope={initialScope}
                 history={history}
-                isLoading={isLoading}
+                fetcher={fetcher}
                 isAdmin={isAdmin}
               />
               {/* Results */}
