implement getSpan

Author: ericallam

apps/webapp/app/presenters/v3/RunPresenter.server.ts

@@ -256,6 +256,7 @@ export class RunPresenter {
         queuedDuration: run.startedAt
           ? millisecondsToNanoseconds(run.startedAt.getTime() - run.createdAt.getTime())
           : undefined,
+        overridesBySpanId: traceSummary.overridesBySpanId,
       },
     };
   }

apps/webapp/app/presenters/v3/SpanPresenter.server.ts

@@ -499,7 +499,6 @@ export class SpanPresenter extends BasePresenter {
       style: span.style,
       properties: span.properties ? JSON.stringify(span.properties, null, 2) : undefined,
       entity: span.entity,
-      originalRun: span.originalRun,
       metadata: span.metadata,
       triggeredRuns,
     };

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

@@ -97,6 +97,7 @@ import { useCurrentPlan } from "../_app.orgs.$organizationSlug/route";
 import { SpanView } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam.spans.$spanParam/route";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { CopyableText } from "~/components/primitives/CopyableText";
+import type { SpanOverride } from "~/v3/eventRepository/eventRepository.types";
 
 const resizableSettings = {
   parent: {
@@ -301,7 +302,8 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
     return <></>;
   }
 
-  const { events, duration, rootSpanStatus, rootStartedAt, queuedDuration } = trace;
+  const { events, duration, rootSpanStatus, rootStartedAt, queuedDuration, overridesBySpanId } =
+    trace;
   const shouldLiveReload = events.length <= maximumLiveReloadingSetting;
 
   const changeToSpan = useDebounce((selectedSpan: string) => {
@@ -323,6 +325,8 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
     // WARNING Don't put the revalidator in the useEffect deps array or bad things will happen
   }, [streamedEvents]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const spanOverrides = selectedSpanId ? overridesBySpanId?.[selectedSpanId] : undefined;
+
   return (
     <div className={cn("grid h-full max-h-full grid-cols-1 overflow-hidden")}>
       <ResizablePanelGroup
@@ -371,6 +375,7 @@ function TraceView({ run, trace, maximumLiveReloadingSetting, resizable }: Loade
             <SpanView
               runParam={run.friendlyId}
               spanId={selectedSpanId}
+              spanOverrides={spanOverrides as SpanOverride | undefined}
               closePanel={() => replaceSearchParam("span")}
             />
           </ResizablePanel>

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

@@ -79,6 +79,7 @@ import {
 import { createTimelineSpanEventsFromSpanEvents } from "~/utils/timelineSpanEvents";
 import { CompleteWaitpointForm } from "../resources.orgs.$organizationSlug.projects.$projectParam.env.$envParam.waitpoints.$waitpointFriendlyId.complete/route";
 import { requireUserId } from "~/services/session.server";
+import type { SpanOverride } from "~/v3/eventRepository/eventRepository.types";
 
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
@@ -120,10 +121,12 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
 export function SpanView({
   runParam,
   spanId,
+  spanOverrides,
   closePanel,
 }: {
   runParam: string;
   spanId: string | undefined;
+  spanOverrides?: SpanOverride;
   closePanel?: () => void;
 }) {
   const organization = useOrganization();
@@ -174,17 +177,26 @@ export function SpanView({
       );
     }
     case "span": {
-      return <SpanBody span={fetcher.data.span} runParam={runParam} closePanel={closePanel} />;
+      return (
+        <SpanBody
+          span={fetcher.data.span}
+          spanOverrides={spanOverrides}
+          runParam={runParam}
+          closePanel={closePanel}
+        />
+      );
     }
   }
 }
 
 function SpanBody({
   span,
+  spanOverrides,
   runParam,
   closePanel,
 }: {
   span: Span;
+  spanOverrides?: SpanOverride;
   runParam?: string;
   closePanel?: () => void;
 }) {
@@ -198,6 +210,8 @@ function SpanBody({
     tab = "overview";
   }
 
+  span = applySpanOverrides(span, spanOverrides);
+
   return (
     <div className="grid h-full max-h-full grid-rows-[2.5rem_2rem_1fr] overflow-hidden bg-background-bright">
       <div className="flex items-center justify-between gap-2 overflow-x-hidden px-3">
@@ -241,6 +255,38 @@ function SpanBody({
   );
 }
 
+function applySpanOverrides(span: Span, spanOverrides?: SpanOverride): Span {
+  if (!spanOverrides) {
+    return span;
+  }
+
+  const newSpan = { ...span };
+
+  if (spanOverrides.isCancelled) {
+    newSpan.isCancelled = true;
+    newSpan.isPartial = false;
+    newSpan.isError = false;
+  } else if (spanOverrides.isError) {
+    newSpan.isError = true;
+    newSpan.isPartial = false;
+    newSpan.isCancelled = false;
+  }
+
+  if (spanOverrides.duration) {
+    newSpan.duration = spanOverrides.duration;
+  }
+
+  if (spanOverrides.events) {
+    if (newSpan.events) {
+      newSpan.events = [...newSpan.events, ...spanOverrides.events];
+    } else {
+      newSpan.events = spanOverrides.events;
+    }
+  }
+
+  return newSpan;
+}
+
 function RunBody({
   run,
   runParam,