Fix: Trace view improvements (#3702)

* fix: migration first pass

* fix: move migration

* chore: rm old idx from schema

* feat: remove status partitioning function + update call sites

* fix: add analyze

* fix: oops don't actually need analyze

* fix: timestamps, add link to note

* feat: start reworking migration

* fix: don't need to recreate or drop indexes in down migration

* fix: rm second migration for now

* feat: re add second migration for cutover

* refactor: improve naming and stuff

* fix: make sure we add indexes properly, migration cleanup

* feat: add back triggers post-cutover

* fix: use create or replace trigger instead

* fix: update insert functions to have correct on conflict spec

* fix: copy paste

* fix: rm separate statements

* fix: rm unused func

* fix: add case when logic to backfill

* feat: run backfills concurrently

* fix: copy paste issues

* fix: add if not exists to index create

* fix: create or replace trigger

* fix: update handling

* fix: rename migrations

* fix: func naming

* fix: remove a bunch of custom span naming to be more consistent with other otel tools

* fix: remove custom span name mapping in favor of just showing the plain span names

* fix: remove trace minimap view / filter since it doesn't work

* fix: show more spans by default

* fix: expand / collapse button

* feat: use the side panel for the expanded span view thingy

* fix: improve ux of side panel

* fix: date formatting

* fix: decimal precision

* fix: spacing

* chore: lint

* fix: overflow state

* fix: side panel overflow

* fix: copilot comments

* fix: add back minimap

* refactor: try to minimize diff

* fix: un-revert button changes

Author: mrkaye97

api-contracts/openapi/components/schemas/v1/feature_flags.yaml

@@ -13,3 +13,4 @@ FeatureFlagId:
   type: string
   enum:
     - "tenant-log-workflow-filter-enabled"
+    - "trace-minimap-enabled"

api/v1/server/oas/gen/openapi.gen.go

@@ -1,9 +1,16 @@
 import { useTheme } from '@/components/hooks/use-theme';
+import type { OtelSpanTree } from '@/components/v1/agent-prism/span-tree-type';
+import type { ParsedTraceQuery } from '@/components/v1/cloud/observability/trace-search';
 import { DocPage } from '@/components/v1/docs/docs-button';
 import { V1Event, V1Filter, ScheduledWorkflows } from '@/lib/api';
 import { ExpandedEventContent } from '@/pages/main/v1/events';
 import { FilterDetailView } from '@/pages/main/v1/filters/components/filter-detail-view';
 import { ExpandedScheduledRunContent } from '@/pages/main/v1/scheduled-runs/components/expanded-scheduled-run-content';
+import {
+  SpanDetail,
+  GroupDetail,
+} from '@/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/span-detail';
+import type { SpanGroupInfo } from '@/pages/main/v1/workflow-runs-v1/$run/v2components/step-run-detail/observability/timeline/trace-timeline-utils';
 import {
   TaskRunDetail,
   TabOption,
@@ -74,6 +81,24 @@ type UseSidePanelProps =
       content: {
         scheduledRun: ScheduledWorkflows;
       };
+    }
+  | {
+      type: 'span-details';
+      content: {
+        span: OtelSpanTree;
+        activeFilters?: ParsedTraceQuery;
+        onAddFilter?: (key: string, value: string) => void;
+        onRemoveFilter?: (key: string, value: string) => void;
+        onSpanSelect?: (span: OtelSpanTree) => void;
+        onClose?: () => void;
+      };
+    }
+  | {
+      type: 'group-details';
+      content: {
+        group: SpanGroupInfo;
+        onClose?: () => void;
+      };
     };
 
 function SidePanelTaskRunDetail(props: {
@@ -88,6 +113,23 @@ function SidePanelTaskRunDetail(props: {
   );
 }
 
+function SidePanelSpanDetail(
+  props: Omit<React.ComponentProps<typeof SpanDetail>, 'onOpenTaskRun'>,
+) {
+  const { open } = useSidePanel();
+  return (
+    <SpanDetail
+      {...props}
+      onOpenTaskRun={(taskRunId) =>
+        open({
+          type: 'task-run-details',
+          content: { taskRunId, showViewTaskRunButton: true },
+        })
+      }
+    />
+  );
+}
+
 function useSidePanelData(): SidePanelData {
   const [isOpen, setIsOpen] = useState(false);
   const [history, setHistory] = useState<UseSidePanelProps[]>([]);
@@ -141,6 +183,16 @@ function useSidePanelData(): SidePanelData {
             />
           ),
         };
+      case 'span-details':
+        return {
+          isDocs: false,
+          component: <SidePanelSpanDetail {...props.content} />,
+        };
+      case 'group-details':
+        return {
+          isDocs: false,
+          component: <GroupDetail {...props.content} />,
+        };
       case 'docs':
         const query = props.queryParams ?? {};
         query.theme = theme;

frontend/app/src/hooks/use-side-panel.tsx

@@ -41,6 +41,7 @@ export enum PullRequestState {
 
 export enum FeatureFlagId {
   TenantLogWorkflowFilterEnabled = "tenant-log-workflow-filter-enabled",
+  TraceMinimapEnabled = "trace-minimap-enabled",
 }
 
 export enum WebhookWorkerRequestMethod {

frontend/app/src/lib/api/generated/data-contracts.ts

@@ -1,5 +1,4 @@
 import {
-  getDisplayName,
   hasErrorInTree,
   isQueuedOnly,
   isQueuedOnlyRoot,
@@ -30,7 +29,7 @@ export function collectSpanMarkers(
       statusCode: node.statusCode,
       hasErrorInTree: hasErrorInTree(node),
       inProgress: !!node.inProgress,
-      spanName: getDisplayName(node),
+      spanName: node.spanName,
       durationMs: node.durationNs / 1_000_000,
       visible: parentVisible,
       span: node,