When selecting spans, don’t add to the browser history

Author: matt-aitken

apps/webapp/app/hooks/useReplaceSearchParams.ts

@@ -1,19 +1,24 @@
 import { useSearchParams } from "@remix-run/react";
 import { useCallback } from "react";
 
+type NavigateOptions = {
+  replace?: boolean;
+  preventScrollReset?: boolean;
+};
+
 export function useReplaceSearchParams() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const replaceSearchParam = useCallback(
-    (key: string, value?: string) => {
+    (key: string, value?: string, navigateOpts?: NavigateOptions) => {
       setSearchParams((s) => {
         if (value) {
           s.set(key, value);
         } else {
           s.delete(key);
         }
         return s;
-      });
+      }, navigateOpts);
     },
     [searchParams]
   );

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx

@@ -306,7 +306,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
   const shouldLiveReload = events.length <= maximumLiveReloadingSetting;
 
   const changeToSpan = useDebounce((selectedSpan: string) => {
-    replaceSearchParam("span", selectedSpan);
+    replaceSearchParam("span", selectedSpan, { replace: true });
   }, 250);
 
   const revalidator = useRevalidator();