Run page improvements (#1874)

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

* Only non-debug events can extend the total duration of the run timeline

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/presenters/v3/RunPresenter.server.ts

@@ -159,7 +159,10 @@ export class RunPresenter {
           const offset = millisecondsToNanoseconds(
             n.data.startTime.getTime() - treeRootStartTimeMs
           );
-          totalDuration = Math.max(totalDuration, offset + n.data.duration);
+          //only let non-debug events extend the total duration
+          if (!n.data.isDebug) {
+            totalDuration = Math.max(totalDuration, offset + n.data.duration);
+          }
           return {
             ...n,
             data: {

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();