npm - @workflow/web-shared - Versions diffs - 5.0.0-beta.3 → 5.0.0-beta.4 - Mend

@workflow/web-shared 5.0.0-beta.3 → 5.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/components/new-trace-viewer/components/split-pane.js CHANGED Viewed

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useCallback, useEffect, useRef, useState, } from 'react';
 import { cn } from '../../../lib/utils';
-/** Wide enough for comfortable dragging; visual line stays 1px centered. */
-const GUTTER_PX = 9;
+const GUTTER_PX = 1;
 const MIN_PX = 50;
 const DEFAULT_START_PX = 340;
 export function Divider() {
@@ -93,7 +92,7 @@ export function SplitPane({ children, className, defaultStartWidth = DEFAULT_STA
     const hasHeaders = startHeader != null || endHeader != null;
     const gutter = (_jsx("div", { ref: gutterRef, className: "relative z-20 isolate flex shrink-0 cursor-col-resize justify-center", onPointerDown: handlePointerDown, onLostPointerCapture: handleLostPointerCapture, children: _jsx("span", { className: "pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400", "aria-hidden": true }) }));
     if (hasHeaders) {
-        return (_jsxs("div", { className: cn('flex flex-col h-full min-h-0', className), children: [_jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [_jsx("div", { children: startHeader }), _jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), _jsx("div", { children: endHeader })] }), _jsxs("div", { ref: containerRef, className: cn('grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto', isDragging && 'select-none'), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] }));
+        return (_jsxs("div", { className: cn('flex flex-col h-full min-h-0', className), children: [_jsxs("div", { className: "shrink-0 grid", style: { gridTemplateColumns: colTemplate }, children: [_jsx("div", { children: startHeader }), _jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "h-full w-px bg-gray-alpha-400", "aria-hidden": true }) }), _jsx("div", { children: endHeader })] }), _jsxs("div", { ref: containerRef, className: cn('grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto', isDragging && 'select-none'), style: { gridTemplateColumns: colTemplate }, children: [start, gutter, end] })] }));
     }
     return (_jsxs("div", { ref: containerRef, className: cn('grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto', isDragging && 'select-none', className), style: { gridTemplateColumns: colTemplate, height: '100%' }, children: [start, gutter, end] }));
 }

package/dist/components/new-trace-viewer/components/split-pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {\n Children,\n type ReactNode,\n type PointerEvent as ReactPointerEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../../lib/utils';\n\n/** Wide enough for comfortable dragging; visual line stays 1px centered. /\nconst GUTTER_PX = 9;\nconst MIN_PX = 50;\nconst DEFAULT_START_PX = 340;\n\nexport function Divider() {\n return <div aria-hidden className=\"h-full w-px shrink-0 bg-gray-alpha-400\" />;\n}\n\nexport interface SplitPaneProps {\n children: ReactNode;\n className?: string;\n /* Fixed pixel width for the start (left) pane. Default 220. /\n defaultStartWidth?: number;\n /* Fixed (non-scrolling) header rendered above the start pane. /\n startHeader?: ReactNode;\n /* Fixed (non-scrolling) header rendered above the end pane. */\n endHeader?: ReactNode;\n}\n\nexport function SplitPane({\n children,\n className,\n defaultStartWidth = DEFAULT_START_PX,\n startHeader,\n endHeader,\n}: SplitPaneProps) {\n const parts = Children.toArray(children);\n if (parts.length !== 2) {\n throw new Error('SplitPane expects exactly two children');\n }\n const [start, end] = parts;\n\n const [startPx, setStartPx] = useState(defaultStartWidth);\n const [isDragging, setIsDragging] = useState(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const gutterRef = useRef<HTMLDivElement>(null);\n const rafRef = useRef<number \| null>(null);\n const pendingPx = useRef(defaultStartWidth);\n const pointerIdRef = useRef<number \| null>(null);\n\n useEffect(() => {\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n };\n }, []);\n\n const clampPx = useCallback((px: number) => {\n const el = containerRef.current;\n if (!el) return px;\n const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;\n return Math.min(maxPx, Math.max(MIN_PX, px));\n }, []);\n\n useEffect(() => {\n if (!isDragging) return;\n\n const onPointerMove = (e: globalThis.PointerEvent) => {\n if (e.pointerId !== pointerIdRef.current) return;\n const container = containerRef.current;\n if (!container) return;\n const rect = container.getBoundingClientRect();\n pendingPx.current = clampPx(e.clientX - rect.left);\n if (!rafRef.current) {\n rafRef.current = requestAnimationFrame(() => {\n rafRef.current = null;\n setStartPx(pendingPx.current);\n });\n }\n };\n\n const onPointerUp = (e: globalThis.PointerEvent) => {\n if (e.pointerId !== pointerIdRef.current) return;\n const gutter = gutterRef.current;\n if (gutter?.hasPointerCapture(e.pointerId)) {\n gutter.releasePointerCapture(e.pointerId);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n pointerIdRef.current = null;\n setIsDragging(false);\n };\n\n document.addEventListener('pointermove', onPointerMove);\n document.addEventListener('pointerup', onPointerUp);\n document.addEventListener('pointercancel', onPointerUp);\n\n return () => {\n document.removeEventListener('pointermove', onPointerMove);\n document.removeEventListener('pointerup', onPointerUp);\n document.removeEventListener('pointercancel', onPointerUp);\n };\n }, [isDragging, clampPx]);\n\n const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n e.currentTarget.setPointerCapture(e.pointerId);\n pointerIdRef.current = e.pointerId;\n setIsDragging(true);\n };\n\n const handleLostPointerCapture = () => {\n pointerIdRef.current = null;\n setIsDragging(false);\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n };\n\n const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;\n const hasHeaders = startHeader != null \|\| endHeader != null;\n\n const gutter = (\n <div\n ref={gutterRef}\n className=\"relative z-20 isolate flex shrink-0 cursor-col-resize justify-center\"\n onPointerDown={handlePointerDown}\n onLostPointerCapture={handleLostPointerCapture}\n >\n <span\n className=\"pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400\"\n aria-hidden\n />\n </div>\n );\n\n if (hasHeaders) {\n return (\n <div className={cn('flex flex-col h-full min-h-0', className)}>\n <div\n className=\"shrink-0 grid\"\n style={{ gridTemplateColumns: colTemplate }}\n >\n <div>{startHeader}</div>\n <div className=\"flex justify-center\">\n <span className=\"h-full w-px bg-gray-alpha-400\" aria-hidden />\n </div>\n <div>{endHeader}</div>\n </div>\n <div\n ref={containerRef}\n className={cn(\n 'grid flex-1 min-h-0 content-start overflow-x-hidden overflow-y-auto',\n isDragging && 'select-none'\n )}\n style={{ gridTemplateColumns: colTemplate }}\n >\n {start}\n {gutter}\n {end}\n </div>\n </div>\n );\n }\n\n return (\n <div\n ref={containerRef}\n className={cn(\n 'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',\n isDragging && 'select-none',\n className\n )}\n style={{ gridTemplateColumns: colTemplate, height: '100%' }}\n >\n {start}\n {gutter}\n {end}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"split-pane.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/split-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport {\n Children,\n type ReactNode,\n type PointerEvent as ReactPointerEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../../lib/utils';\n\nconst GUTTER_PX = 1;\nconst MIN_PX = 50;\nconst DEFAULT_START_PX = 340;\n\nexport function Divider() {\n return <div aria-hidden className=\"h-full w-px shrink-0 bg-gray-alpha-400\" />;\n}\n\nexport interface SplitPaneProps {\n children: ReactNode;\n className?: string;\n /** Fixed pixel width for the start (left) pane. Default 220. /\n defaultStartWidth?: number;\n /* Fixed (non-scrolling) header rendered above the start pane. /\n startHeader?: ReactNode;\n /* Fixed (non-scrolling) header rendered above the end pane. */\n endHeader?: ReactNode;\n}\n\nexport function SplitPane({\n children,\n className,\n defaultStartWidth = DEFAULT_START_PX,\n startHeader,\n endHeader,\n}: SplitPaneProps) {\n const parts = Children.toArray(children);\n if (parts.length !== 2) {\n throw new Error('SplitPane expects exactly two children');\n }\n const [start, end] = parts;\n\n const [startPx, setStartPx] = useState(defaultStartWidth);\n const [isDragging, setIsDragging] = useState(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const gutterRef = useRef<HTMLDivElement>(null);\n const rafRef = useRef<number \| null>(null);\n const pendingPx = useRef(defaultStartWidth);\n const pointerIdRef = useRef<number \| null>(null);\n\n useEffect(() => {\n return () => {\n if (rafRef.current) cancelAnimationFrame(rafRef.current);\n };\n }, []);\n\n const clampPx = useCallback((px: number) => {\n const el = containerRef.current;\n if (!el) return px;\n const maxPx = el.getBoundingClientRect().width - MIN_PX - GUTTER_PX;\n return Math.min(maxPx, Math.max(MIN_PX, px));\n }, []);\n\n useEffect(() => {\n if (!isDragging) return;\n\n const onPointerMove = (e: globalThis.PointerEvent) => {\n if (e.pointerId !== pointerIdRef.current) return;\n const container = containerRef.current;\n if (!container) return;\n const rect = container.getBoundingClientRect();\n pendingPx.current = clampPx(e.clientX - rect.left);\n if (!rafRef.current) {\n rafRef.current = requestAnimationFrame(() => {\n rafRef.current = null;\n setStartPx(pendingPx.current);\n });\n }\n };\n\n const onPointerUp = (e: globalThis.PointerEvent) => {\n if (e.pointerId !== pointerIdRef.current) return;\n const gutter = gutterRef.current;\n if (gutter?.hasPointerCapture(e.pointerId)) {\n gutter.releasePointerCapture(e.pointerId);\n }\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n pointerIdRef.current = null;\n setIsDragging(false);\n };\n\n document.addEventListener('pointermove', onPointerMove);\n document.addEventListener('pointerup', onPointerUp);\n document.addEventListener('pointercancel', onPointerUp);\n\n return () => {\n document.removeEventListener('pointermove', onPointerMove);\n document.removeEventListener('pointerup', onPointerUp);\n document.removeEventListener('pointercancel', onPointerUp);\n };\n }, [isDragging, clampPx]);\n\n const handlePointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n e.currentTarget.setPointerCapture(e.pointerId);\n pointerIdRef.current = e.pointerId;\n setIsDragging(true);\n };\n\n const handleLostPointerCapture = () => {\n pointerIdRef.current = null;\n setIsDragging(false);\n if (rafRef.current) {\n cancelAnimationFrame(rafRef.current);\n rafRef.current = null;\n }\n };\n\n const colTemplate = `${startPx}px ${GUTTER_PX}px minmax(${MIN_PX}px, 1fr)`;\n const hasHeaders = startHeader != null \|\| endHeader != null;\n\n const gutter = (\n <div\n ref={gutterRef}\n className=\"relative z-20 isolate flex shrink-0 cursor-col-resize justify-center\"\n onPointerDown={handlePointerDown}\n onLostPointerCapture={handleLostPointerCapture}\n >\n <span\n className=\"pointer-events-none relative z-10 h-full w-px shrink-0 bg-gray-alpha-400\"\n aria-hidden\n />\n </div>\n );\n\n if (hasHeaders) {\n return (\n <div className={cn('flex flex-col h-full min-h-0', className)}>\n <div\n className=\"shrink-0 grid\"\n style={{ gridTemplateColumns: colTemplate }}\n >\n <div>{startHeader}</div>\n <div className=\"flex justify-center\">\n <span className=\"h-full w-px bg-gray-alpha-400\" aria-hidden />\n </div>\n <div>{endHeader}</div>\n </div>\n <div\n ref={containerRef}\n className={cn(\n 'grid flex-1 min-h-0 overflow-x-hidden overflow-y-auto',\n isDragging && 'select-none'\n )}\n style={{ gridTemplateColumns: colTemplate }}\n >\n {start}\n {gutter}\n {end}\n </div>\n </div>\n );\n }\n\n return (\n <div\n ref={containerRef}\n className={cn(\n 'grid h-full min-h-0 content-start overflow-x-hidden overflow-y-auto',\n isDragging && 'select-none',\n className\n )}\n style={{ gridTemplateColumns: colTemplate, height: '100%' }}\n >\n {start}\n {gutter}\n {end}\n </div>\n );\n}\n"]}

package/dist/components/new-trace-viewer/components/timeline.d.ts CHANGED Viewed

@@ -1,29 +1,28 @@
 import type { ReactNode } from 'react';
 import type { Span } from '../../trace-viewer/types';
-import type { TimeCompression } from '../utils';
+import type { TimeMarker } from '../utils';
+export declare const TIMELINE_PADDING_PX = 16;
 declare const TimelineBar: import("react").NamedExoticComponent<{
     span: Span;
-    compression: TimeCompression;
+    viewStart: number;
+    viewDuration: number;
     containerWidth: number;
     isSelected: boolean;
     onClick: () => void;
 }>;
 export { TimelineBar };
-export declare function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo, }: {
-    viewStart: number;
-    viewDuration: number;
-    rootStart: number;
-    compression: TimeCompression;
-    isZoomed: boolean;
-    onResetZoom: () => void;
+export declare function TimelineHeader({ markers, hoverInfo, }: {
+    markers: TimeMarker[];
     hoverInfo?: {
         fraction: number;
         label: string;
     } | null;
 }): ReactNode;
-export declare function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld, }: {
+export declare function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSelect, hoverFraction, altHeld, }: {
     spans: Span[];
-    compression: TimeCompression;
+    viewStart: number;
+    viewEnd: number;
+    markers: TimeMarker[];
     selectedId: string | null;
     onSelect: (spanId: string) => void;
     hoverFraction?: number | null;

package/dist/components/new-trace-viewer/components/timeline.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,~~eAAe~~,EAAE,MAAM,UAAU,CAAC;~~AAuE/D~~,QAAA,MAAM,WAAW;~~UAOT~~,IAAI;~~iBACG~~,~~eAAe~~;~~oBACZ~~,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;~~EAwJnB~~,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,~~SAAS~~,~~EACT~~,~~YAAY,EACZ,~~SAAS,~~EACT,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,~~GACV,EAAE;IACD,~~SAAS~~,EAAE,~~MAAM~~,~~CAAC;IAClB,YAAY,~~EAAE,~~MAAM,~~CAAC;~~IACrB~~,SAAS,~~EAAE,MAAM,~~CAAC~~;IAClB~~,~~WAAW,~~EAAE~~,eAAe,CAAC~~;~~IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE;~~QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,~~CAgDZ~~;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,~~WAAW~~,~~EACX~~,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,~~WAAW~~,EAAE,~~eAAe~~,CAAC;~~IAC7B~~,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,~~CAoDZ~~"}
1	+ {"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAErD,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,UAAU,CAAC;AAgC1D,eAAO,MAAM,mBAAmB,KAAK,CAAC;AAoCtC,QAAA,MAAM,WAAW;UAQT,IAAI;eACC,MAAM;kBACH,MAAM;oBACJ,MAAM;gBACV,OAAO;aACV,MAAM,IAAI;EAsJnB,CAAC;AAEH,OAAO,EAAE,WAAW,EAAE,CAAC;AAEvB,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CACxD,GAAG,SAAS,CAwBZ;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,SAAS,EACT,OAAO,EACP,OAAO,EACP,UAAU,EACV,QAAQ,EACR,aAAa,EACb,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,UAAU,EAAE,CAAC;IACtB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,SAAS,CAwFZ"}

package/dist/components/new-trace-viewer/components/timeline.js CHANGED Viewed

@@ -1,29 +1,32 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft, ArrowRight } from 'lucide-react';
 import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { cn } from '../../../lib/utils';
 import { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';
-import { computeCompressedTimeMarkers, computeSpanGaps, computeSpanSegments, computeTimeMarkers, getResourceColor, } from '../utils';
-const QUEUED_BACKGROUND = 'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';
-const HATCHED_BACKGROUND = 'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';
+import { computeSpanGaps, computeSpanSegments, getSpanDurationMs, getResourceColor, } from '../utils';
 const SEGMENT_CONFIG = {
-    queued: { style: { background: QUEUED_BACKGROUND } },
+    queued: { className: 'bg-gray-500' },
     retrying: {
         className: 'box-border bg-gray-500',
     },
-    waiting: { style: { background: HATCHED_BACKGROUND } },
+    waiting: { className: 'bg-gray-500' },
     running: { className: 'bg-blue-700' },
     failed: { className: 'bg-red-700' },
     succeeded: { className: 'bg-green-700' },
-    sleeping: { className: 'bg-amber-700' },
+    sleeping: { className: 'bg-gray-500' },
     received: { className: 'bg-blue-700' },
 };
-const FIXED_BAR_WIDTH_PX = 4;
+const BAR_HEIGHT_PX = 24;
+const TINY_BAR_BOX_SIZE_PX = 24;
+const TINY_BAR_WIDTH_PX = 4;
 const SEGMENT_GAP_PX = 1;
 // Keep this in sync with the rendered row height in the timeline/event list.
-const ROW_HEIGHT = 34;
+const ROW_HEIGHT = 40;
 const CONTAINER_PAD_Y = 8;
 const END_CAP_HEIGHT = 8;
+export const TIMELINE_PADDING_PX = 16;
+const ORIGIN_MARKER_EPSILON = 0.000001;
 const DeltaIndicator = memo(function DeltaIndicator({ leftFrac, rightFrac, label, rowIndex, }) {
     const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;
     return (_jsxs("div", { className: "absolute pointer-events-none", style: {
@@ -33,20 +36,22 @@ const DeltaIndicator = memo(function DeltaIndicator({ leftFrac, rightFrac, label
             height: END_CAP_HEIGHT,
         }, children: [_jsx("div", { className: "absolute left-0 top-0 w-px h-full bg-amber-800" }), _jsx("div", { className: "absolute left-0 right-0 top-1/2 h-px bg-amber-800" }), _jsx("div", { className: "absolute right-0 top-0 w-px h-full bg-amber-800" }), _jsx("span", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800", children: label })] }));
 });
-const TimelineBar = memo(function TimelineBar({ span, compression, containerWidth, isSelected, onClick, }) {
+const TimelineBar = memo(function TimelineBar({ span, viewStart, viewDuration, containerWidth, isSelected, onClick, }) {
     const startTime = getHighResInMs(span.startTime);
     const endTime = getHighResInMs(span.endTime);
-    const totalDurationMs = endTime - startTime;
-    const leftFrac = compression.toVisual(startTime);
-    const rightFrac = compression.toVisual(endTime);
-    const widthFrac = rightFrac - leftFrac;
-    const leftPct = leftFrac * 100;
+    const totalDurationMs = getSpanDurationMs(span);
+    const leftFracRaw = viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;
+    const rightFracRaw = viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;
+    const widthFrac = rightFracRaw - leftFracRaw;
+    const leftPct = leftFracRaw * 100;
     const widthPct = widthFrac * 100;
     const pixelWidth = widthFrac * containerWidth;
-    const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;
+    const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));
+    const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));
+    const visiblePixelWidth = Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;
+    const isTinyBar = containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;
     const [isRowHovered, setIsRowHovered] = useState(false);
     const segments = useMemo(() => computeSpanSegments(span), [span]);
-    const finalSegment = segments[segments.length - 1];
     const workflowStatus = span.attributes.data
         ?.status;
     const isErrored = span.status.code === 2 || workflowStatus === 'failed';
@@ -54,30 +59,14 @@ const TimelineBar = memo(function TimelineBar({ span, compression, containerWidt
     const fallbackColor = isErrored
         ? (colors.errorBar ?? 'var(--ds-red-700)')
         : colors.bar;
-    const compressedSegmentStatus = isErrored
-        ? 'failed'
-        : span.resource === 'hook'
-            ? 'received'
-            : finalSegment?.status;
-    const compressedSegmentStyle = compressedSegmentStatus === 'queued'
-        ? { background: 'var(--ds-gray-500)' }
-        : compressedSegmentStatus
-            ? SEGMENT_CONFIG[compressedSegmentStatus].style
-            : undefined;
-    const compressedSegmentClassName = compressedSegmentStatus
-        ? SEGMENT_CONFIG[compressedSegmentStatus].className
-        : undefined;
-    const hasCompressedStatus = Boolean(compressedSegmentClassName || compressedSegmentStyle);
     const renderDurationLabel = (label) => (_jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums", style: { textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }, children: label }));
     const getMinDurationLabelWidthPx = (label) => Math.max(40, label.length * 6 + 12);
     const totalDurationLabel = formatDuration(totalDurationMs);
     const showBarDurationLabel = isRowHovered &&
         pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);
-    const barContent = isCompressed ? (_jsx("div", { className: cn('relative h-4 rounded-[0.25rem] top-[3px]', compressedSegmentClassName), style: {
-            width: '100%',
-            background: hasCompressedStatus ? undefined : fallbackColor,
-            ...compressedSegmentStyle,
-        }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null })) : segments.length > 0 ? (_jsx("div", { className: "relative w-full h-4 top-[3px]", children: segments.map((seg, i) => {
+    const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 || rightFracRaw > 1);
+    const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;
+    const barContent = showBoundaryArrow ? (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-[0.25rem]", children: _jsx(BoundaryArrow, { className: "size-3 text-gray-900" }) })) : isTinyBar ? (_jsx("div", { className: "h-6 rounded-[0.25rem]", style: { background: fallbackColor } })) : segments.length > 0 ? (_jsx("div", { className: "relative h-6 w-full", children: segments.map((seg, i) => {
             const segPixelWidth = (seg.endFraction - seg.startFraction) * pixelWidth;
             const segDurationLabel = formatDuration((seg.endFraction - seg.startFraction) * totalDurationMs);
             const showSegmentDurationLabel = isRowHovered &&
@@ -93,31 +82,37 @@ const TimelineBar = memo(function TimelineBar({ span, compression, containerWidt
                 }, children: showSegmentDurationLabel
                     ? renderDurationLabel(segDurationLabel)
                     : null }, `${seg.status}-${i}`));
-        }) })) : (_jsx("div", { className: "relative h-4 rounded-[0.25rem] top-[3px]", style: {
+        }) })) : (_jsx("div", { className: "relative h-6 rounded-[0.25rem]", style: {
             width: '100%',
             minWidth: 4,
             background: fallbackColor,
         }, children: showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null }));
-    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn('h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick: onClick, children: _jsx("div", { className: "absolute top-1.5 h-[22px] rounded-sm", style: {
-                left: isCompressed
-                    ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`
-                    : `${leftPct}%`,
-                width: isCompressed
-                    ? `${FIXED_BAR_WIDTH_PX}px`
-                    : `max(${widthPct}%, 4px)`,
-            }, children: barContent }) }));
+    return (_jsx("div", { role: "treeitem", "aria-selected": isSelected, "aria-expanded": isSelected, "aria-level": 1, className: cn('h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'), onMouseEnter: () => setIsRowHovered(true), onMouseLeave: () => setIsRowHovered(false), onClick: onClick, children: _jsx("div", { className: "absolute inset-y-0", style: {
+                left: TIMELINE_PADDING_PX,
+                right: TIMELINE_PADDING_PX,
+            }, children: _jsx("div", { className: "absolute top-1/2 -translate-y-1/2", style: {
+                    left: showBoundaryArrow
+                        ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`
+                        : isTinyBar
+                            ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`
+                            : `${leftPct}%`,
+                    width: showBoundaryArrow
+                        ? `${TINY_BAR_BOX_SIZE_PX}px`
+                        : isTinyBar
+                            ? `${TINY_BAR_WIDTH_PX}px`
+                            : `max(${widthPct}%, 4px)`,
+                    height: BAR_HEIGHT_PX,
+                }, children: barContent }) }) }));
 });
 export { TimelineBar };
-export function TimelineHeader({ viewStart, viewDuration, rootStart, compression, isZoomed, onResetZoom, hoverInfo, }) {
-    const viewEnd = viewStart + viewDuration;
-    const markers = useMemo(() => compression.isCompressed
-        ? computeCompressedTimeMarkers(compression, viewStart, viewEnd, rootStart)
-        : computeTimeMarkers(viewDuration, viewStart - rootStart), [compression, viewStart, viewEnd, viewDuration, rootStart]);
-    return (_jsxs("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1", children: [_jsxs("div", { className: "relative h-full flex-1", children: [markers.map((m, i) => (_jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m.position * 100}%` }, children: m.label }, i))), hoverInfo && (_jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo.fraction * 100}%` }, children: hoverInfo.label }))] }), isZoomed && (_jsx("button", { type: "button", className: "absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600", onClick: onResetZoom, children: "Reset zoom" }))] }));
+export function TimelineHeader({ markers, hoverInfo, }) {
+    return (_jsx("div", { className: "relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1", children: _jsxs("div", { className: "relative h-full flex-1", children: [markers.map((m) => (_jsx("span", { className: "absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap", style: { left: `${m.position * 100}%` }, children: m.label }, `${m.position}-${m.label}`))), hoverInfo && (_jsx("span", { className: "absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2", style: { left: `${hoverInfo.fraction * 100}%` }, children: hoverInfo.label }))] }) }));
 }
-export function Timeline({ spans, compression, selectedId, onSelect, hoverFraction, altHeld = false, }) {
+export function Timeline({ spans, viewStart, viewEnd, markers, selectedId, onSelect, hoverFraction, altHeld = false, }) {
     const containerRef = useRef(null);
     const [containerWidth, setContainerWidth] = useState(0);
+    const viewDuration = viewEnd - viewStart;
+    const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);
     useEffect(() => {
         const el = containerRef.current;
         if (!el)
@@ -128,7 +123,16 @@ export function Timeline({ spans, compression, selectedId, onSelect, hoverFracti
         ro.observe(el);
         return () => ro.disconnect();
     }, []);
-    const gaps = useMemo(() => computeSpanGaps(spans, compression), [spans, compression]);
-    return (_jsxs("div", { ref: containerRef, className: "relative py-2", children: [hoverFraction != null && (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10", style: { left: `${hoverFraction * 100}%` } })), spans.map((span) => (_jsx(TimelineBar, { span: span, compression: compression, containerWidth: containerWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-0 pointer-events-none", children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
+    const gaps = useMemo(() => computeSpanGaps(spans, viewStart, viewEnd), [spans, viewStart, viewEnd]);
+    return (_jsxs("div", { ref: containerRef, className: "relative h-full overflow-hidden", children: [_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: markers.map((marker) => Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (_jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-300", style: { left: `${marker.position * 100}%` } }, `${marker.position}-${marker.label}`)) : null) }), hoverFraction != null && (_jsx("div", { className: "absolute inset-y-0 pointer-events-none z-10", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: _jsx("div", { className: "absolute top-0 bottom-0 w-px bg-gray-alpha-400", style: { left: `${hoverFraction * 100}%` } }) })), spans.map((span) => (_jsx(TimelineBar, { span: span, viewStart: viewStart, viewDuration: viewDuration, containerWidth: timelineWidth, isSelected: selectedId === span.spanId, onClick: () => onSelect(span.spanId) }, span.spanId))), altHeld && (_jsx("div", { "aria-hidden": true, className: "absolute inset-y-0 pointer-events-none", style: {
+                    left: TIMELINE_PADDING_PX,
+                    right: TIMELINE_PADDING_PX,
+                }, children: gaps.map((gap) => (_jsx(DeltaIndicator, { leftFrac: gap.leftFrac, rightFrac: gap.rightFrac, label: formatDuration(gap.gapMs, true), rowIndex: gap.rowIndex }, gap.rowIndex))) }))] }));
 }
 //# sourceMappingURL=timeline.js.map

package/dist/components/new-trace-viewer/components/timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { SegmentStatus, TimeCompression } from '../utils';\nimport {\n computeCompressedTimeMarkers,\n computeSpanGaps,\n computeSpanSegments,\n computeTimeMarkers,\n getResourceColor,\n} from '../utils';\n\nconst QUEUED_BACKGROUND =\n 'radial-gradient(circle, var(--ds-gray-400) 2px, transparent 2px) center / 20px 20px space no-repeat, var(--ds-gray-500)';\n\nconst HATCHED_BACKGROUND =\n 'repeating-linear-gradient(-45deg, var(--ds-gray-400) 0px, var(--ds-gray-400) 3px, var(--ds-gray-500) 3px, var(--ds-gray-500) 6px)';\n\nconst SEGMENT_CONFIG: Record<\n SegmentStatus,\n { className?: string; style?: React.CSSProperties }\n> = {\n queued: { style: { background: QUEUED_BACKGROUND } },\n retrying: {\n className: 'box-border bg-gray-500',\n },\n waiting: { style: { background: HATCHED_BACKGROUND } },\n running: { className: 'bg-blue-700' },\n failed: { className: 'bg-red-700' },\n succeeded: { className: 'bg-green-700' },\n sleeping: { className: 'bg-amber-700' },\n received: { className: 'bg-blue-700' },\n};\n\nconst FIXED_BAR_WIDTH_PX = 4;\nconst SEGMENT_GAP_PX = 1;\n// Keep this in sync with the rendered row height in the timeline/event list.\nconst ROW_HEIGHT = 34;\nconst CONTAINER_PAD_Y = 8;\nconst END_CAP_HEIGHT = 8;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n leftFrac,\n rightFrac,\n label,\n rowIndex,\n}: {\n leftFrac: number;\n rightFrac: number;\n label: string;\n rowIndex: number;\n}) {\n const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;\n\n return (\n <div\n className=\"absolute pointer-events-none\"\n style={{\n left: `${leftFrac * 100}%`,\n width: `${(rightFrac - leftFrac) * 100}%`,\n top: centerY - END_CAP_HEIGHT / 2,\n height: END_CAP_HEIGHT,\n }}\n >\n <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n {label}\n </span>\n </div>\n );\n});\n\nconst TimelineBar = memo(function TimelineBar({\n span,\n compression,\n containerWidth,\n isSelected,\n onClick,\n}: {\n span: Span;\n compression: TimeCompression;\n containerWidth: number;\n isSelected: boolean;\n onClick: () => void;\n}): ReactNode {\n const startTime = getHighResInMs(span.startTime);\n const endTime = getHighResInMs(span.endTime);\n const totalDurationMs = endTime - startTime;\n\n const leftFrac = compression.toVisual(startTime);\n const rightFrac = compression.toVisual(endTime);\n const widthFrac = rightFrac - leftFrac;\n\n const leftPct = leftFrac * 100;\n const widthPct = widthFrac * 100;\n\n const pixelWidth = widthFrac * containerWidth;\n const isCompressed = containerWidth > 0 && pixelWidth < FIXED_BAR_WIDTH_PX;\n const [isRowHovered, setIsRowHovered] = useState(false);\n\n const segments = useMemo(() => computeSpanSegments(span), [span]);\n const finalSegment = segments[segments.length - 1];\n\n const workflowStatus = (span.attributes.data as Record<string, unknown>)\n ?.status as string \| undefined;\n const isErrored = span.status.code === 2 \|\| workflowStatus === 'failed';\n const colors = getResourceColor(span.resource);\n const fallbackColor = isErrored\n ? (colors.errorBar ?? 'var(--ds-red-700)')\n : colors.bar;\n const compressedSegmentStatus = isErrored\n ? 'failed'\n : span.resource === 'hook'\n ? 'received'\n : finalSegment?.status;\n const compressedSegmentStyle =\n compressedSegmentStatus === 'queued'\n ? { background: 'var(--ds-gray-500)' }\n : compressedSegmentStatus\n ? SEGMENT_CONFIG[compressedSegmentStatus].style\n : undefined;\n const compressedSegmentClassName = compressedSegmentStatus\n ? SEGMENT_CONFIG[compressedSegmentStatus].className\n : undefined;\n\n const hasCompressedStatus = Boolean(\n compressedSegmentClassName \|\| compressedSegmentStyle\n );\n const renderDurationLabel = (label: string) => (\n <span\n className=\"pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums\"\n style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}\n >\n {label}\n </span>\n );\n const getMinDurationLabelWidthPx = (label: string) =>\n Math.max(40, label.length * 6 + 12);\n const totalDurationLabel = formatDuration(totalDurationMs);\n const showBarDurationLabel =\n isRowHovered &&\n pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);\n\n const barContent = isCompressed ? (\n <div\n className={cn(\n 'relative h-4 rounded-[0.25rem] top-[3px]',\n compressedSegmentClassName\n )}\n style={{\n width: '100%',\n background: hasCompressedStatus ? undefined : fallbackColor,\n ...compressedSegmentStyle,\n }}\n >\n {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n </div>\n ) : segments.length > 0 ? (\n <div className=\"relative w-full h-4 top-[3px]\">\n {segments.map((seg, i) => {\n const segPixelWidth =\n (seg.endFraction - seg.startFraction) * pixelWidth;\n const segDurationLabel = formatDuration(\n (seg.endFraction - seg.startFraction) * totalDurationMs\n );\n const showSegmentDurationLabel =\n isRowHovered &&\n segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);\n const segStyle =\n seg.status === 'queued' && segPixelWidth < 20\n ? { background: 'var(--ds-gray-500)' }\n : SEGMENT_CONFIG[seg.status].style;\n\n return (\n <div\n key={`${seg.status}-${i}`}\n className={cn(\n 'absolute h-full rounded-[0.25rem]',\n SEGMENT_CONFIG[seg.status].className\n )}\n style={{\n left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,\n width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,\n minWidth: 1,\n ...segStyle,\n }}\n >\n {showSegmentDurationLabel\n ? renderDurationLabel(segDurationLabel)\n : null}\n </div>\n );\n })}\n </div>\n ) : (\n <div\n className=\"relative h-4 rounded-[0.25rem] top-[3px]\"\n style={{\n width: '100%',\n minWidth: 4,\n background: fallbackColor,\n }}\n >\n {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n </div>\n );\n\n return (\n <div\n role=\"treeitem\"\n aria-selected={isSelected}\n aria-expanded={isSelected}\n aria-level={1}\n className={cn(\n 'h-[34px] relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 rounded-sm aria-selected:hover:bg-gray-200'\n )}\n onMouseEnter={() => setIsRowHovered(true)}\n onMouseLeave={() => setIsRowHovered(false)}\n onClick={onClick}\n >\n <div\n className=\"absolute top-1.5 h-[22px] rounded-sm\"\n style={{\n left: isCompressed\n ? `min(${leftPct}%, calc(100% - ${FIXED_BAR_WIDTH_PX}px))`\n : `${leftPct}%`,\n width: isCompressed\n ? `${FIXED_BAR_WIDTH_PX}px`\n : `max(${widthPct}%, 4px)`,\n }}\n >\n {barContent}\n </div>\n </div>\n );\n});\n\nexport { TimelineBar };\n\nexport function TimelineHeader({\n viewStart,\n viewDuration,\n rootStart,\n compression,\n isZoomed,\n onResetZoom,\n hoverInfo,\n}: {\n viewStart: number;\n viewDuration: number;\n rootStart: number;\n compression: TimeCompression;\n isZoomed: boolean;\n onResetZoom: () => void;\n hoverInfo?: { fraction: number; label: string } \| null;\n}): ReactNode {\n const viewEnd = viewStart + viewDuration;\n\n const markers = useMemo(\n () =>\n compression.isCompressed\n ? computeCompressedTimeMarkers(\n compression,\n viewStart,\n viewEnd,\n rootStart\n )\n : computeTimeMarkers(viewDuration, viewStart - rootStart),\n [compression, viewStart, viewEnd, viewDuration, rootStart]\n );\n\n return (\n <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-2 pb-1\">\n <div className=\"relative h-full flex-1\">\n {markers.map((m, i) => (\n <span\n key={i}\n className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n style={{ left: `${m.position * 100}%` }}\n >\n {m.label}\n </span>\n ))}\n {hoverInfo && (\n <span\n className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n style={{ left: `${hoverInfo.fraction * 100}%` }}\n >\n {hoverInfo.label}\n </span>\n )}\n </div>\n {isZoomed && (\n <button\n type=\"button\"\n className=\"absolute right-2 top-1/2 -translate-y-1/2 z-[5] flex items-center py-0.5 px-2 border border-gray-alpha-400 rounded-md bg-background-100 font-sans text-[11px] font-medium text-gray-900 cursor-pointer whitespace-nowrap transition-[color,border-color] duration-[120ms] ease-in-out hover:text-gray-1000 hover:border-gray-600\"\n onClick={onResetZoom}\n >\n Reset zoom\n </button>\n )}\n </div>\n );\n}\n\nexport function Timeline({\n spans,\n compression,\n selectedId,\n onSelect,\n hoverFraction,\n altHeld = false,\n}: {\n spans: Span[];\n compression: TimeCompression;\n selectedId: string \| null;\n onSelect: (spanId: string) => void;\n hoverFraction?: number \| null;\n altHeld?: boolean;\n}): ReactNode {\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(0);\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n const ro = new ResizeObserver(([entry]) => {\n setContainerWidth(entry.contentRect.width);\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n const gaps = useMemo(\n () => computeSpanGaps(spans, compression),\n [spans, compression]\n );\n\n return (\n <div ref={containerRef} className=\"relative py-2\">\n {hoverFraction != null && (\n <div\n className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-400 pointer-events-none z-10\"\n style={{ left: `${hoverFraction * 100}%` }}\n />\n )}\n {spans.map((span) => (\n <TimelineBar\n key={span.spanId}\n span={span}\n compression={compression}\n containerWidth={containerWidth}\n isSelected={selectedId === span.spanId}\n onClick={() => onSelect(span.spanId)}\n />\n ))}\n {altHeld && (\n <div aria-hidden className=\"absolute inset-0 pointer-events-none\">\n {gaps.map((gap) => (\n <DeltaIndicator\n key={gap.rowIndex}\n leftFrac={gap.leftFrac}\n rightFrac={gap.rightFrac}\n label={formatDuration(gap.gapMs, true)}\n rowIndex={gap.rowIndex}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../../../src/components/new-trace-viewer/components/timeline.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport { ArrowLeft, ArrowRight } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../../lib/utils';\nimport type { Span } from '../../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../../trace-viewer/util/timing';\nimport type { SegmentStatus, TimeMarker } from '../utils';\nimport {\n computeSpanGaps,\n computeSpanSegments,\n getSpanDurationMs,\n getResourceColor,\n} from '../utils';\n\nconst SEGMENT_CONFIG: Record<\n SegmentStatus,\n { className?: string; style?: React.CSSProperties }\n> = {\n queued: { className: 'bg-gray-500' },\n retrying: {\n className: 'box-border bg-gray-500',\n },\n waiting: { className: 'bg-gray-500' },\n running: { className: 'bg-blue-700' },\n failed: { className: 'bg-red-700' },\n succeeded: { className: 'bg-green-700' },\n sleeping: { className: 'bg-gray-500' },\n received: { className: 'bg-blue-700' },\n};\n\nconst BAR_HEIGHT_PX = 24;\nconst TINY_BAR_BOX_SIZE_PX = 24;\nconst TINY_BAR_WIDTH_PX = 4;\nconst SEGMENT_GAP_PX = 1;\n// Keep this in sync with the rendered row height in the timeline/event list.\nconst ROW_HEIGHT = 40;\nconst CONTAINER_PAD_Y = 8;\nconst END_CAP_HEIGHT = 8;\nexport const TIMELINE_PADDING_PX = 16;\nconst ORIGIN_MARKER_EPSILON = 0.000001;\n\nconst DeltaIndicator = memo(function DeltaIndicator({\n leftFrac,\n rightFrac,\n label,\n rowIndex,\n}: {\n leftFrac: number;\n rightFrac: number;\n label: string;\n rowIndex: number;\n}) {\n const centerY = CONTAINER_PAD_Y + (rowIndex + 1) * ROW_HEIGHT;\n\n return (\n <div\n className=\"absolute pointer-events-none\"\n style={{\n left: `${leftFrac * 100}%`,\n width: `${(rightFrac - leftFrac) * 100}%`,\n top: centerY - END_CAP_HEIGHT / 2,\n height: END_CAP_HEIGHT,\n }}\n >\n <div className=\"absolute left-0 top-0 w-px h-full bg-amber-800\" />\n <div className=\"absolute left-0 right-0 top-1/2 h-px bg-amber-800\" />\n <div className=\"absolute right-0 top-0 w-px h-full bg-amber-800\" />\n <span className=\"absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-label-12 leading-none whitespace-nowrap rounded-xs px-1 py-0.5 text-gray-100 bg-amber-800\">\n {label}\n </span>\n </div>\n );\n});\n\nconst TimelineBar = memo(function TimelineBar({\n span,\n viewStart,\n viewDuration,\n containerWidth,\n isSelected,\n onClick,\n}: {\n span: Span;\n viewStart: number;\n viewDuration: number;\n containerWidth: number;\n isSelected: boolean;\n onClick: () => void;\n}): ReactNode {\n const startTime = getHighResInMs(span.startTime);\n const endTime = getHighResInMs(span.endTime);\n const totalDurationMs = getSpanDurationMs(span);\n\n const leftFracRaw =\n viewDuration > 0 ? (startTime - viewStart) / viewDuration : 0;\n const rightFracRaw =\n viewDuration > 0 ? (endTime - viewStart) / viewDuration : 0;\n const widthFrac = rightFracRaw - leftFracRaw;\n\n const leftPct = leftFracRaw * 100;\n const widthPct = widthFrac * 100;\n\n const pixelWidth = widthFrac * containerWidth;\n const visibleLeftFrac = Math.max(0, Math.min(1, leftFracRaw));\n const visibleRightFrac = Math.max(0, Math.min(1, rightFracRaw));\n const visiblePixelWidth =\n Math.max(0, visibleRightFrac - visibleLeftFrac) * containerWidth;\n const isTinyBar =\n containerWidth > 0 && visiblePixelWidth < TINY_BAR_BOX_SIZE_PX;\n const [isRowHovered, setIsRowHovered] = useState(false);\n\n const segments = useMemo(() => computeSpanSegments(span), [span]);\n\n const workflowStatus = (span.attributes.data as Record<string, unknown>)\n ?.status as string \| undefined;\n const isErrored = span.status.code === 2 \|\| workflowStatus === 'failed';\n const colors = getResourceColor(span.resource);\n const fallbackColor = isErrored\n ? (colors.errorBar ?? 'var(--ds-red-700)')\n : colors.bar;\n const renderDurationLabel = (label: string) => (\n <span\n className=\"pointer-events-none absolute inset-0 flex items-center justify-start overflow-hidden px-1 text-[10px] font-mono font-medium leading-none whitespace-nowrap text-left text-white tabular-nums\"\n style={{ textShadow: '0 1px 1px rgba(0, 0, 0, 0.45)' }}\n >\n {label}\n </span>\n );\n const getMinDurationLabelWidthPx = (label: string) =>\n Math.max(40, label.length * 6 + 12);\n const totalDurationLabel = formatDuration(totalDurationMs);\n const showBarDurationLabel =\n isRowHovered &&\n pixelWidth >= getMinDurationLabelWidthPx(totalDurationLabel);\n\n const showBoundaryArrow = isTinyBar && (leftFracRaw < 0 \|\| rightFracRaw > 1);\n const BoundaryArrow = leftFracRaw < 0.5 ? ArrowLeft : ArrowRight;\n const barContent = showBoundaryArrow ? (\n <div className=\"flex h-6 w-6 items-center justify-center rounded-[0.25rem]\">\n <BoundaryArrow className=\"size-3 text-gray-900\" />\n </div>\n ) : isTinyBar ? (\n <div\n className=\"h-6 rounded-[0.25rem]\"\n style={{ background: fallbackColor }}\n />\n ) : segments.length > 0 ? (\n <div className=\"relative h-6 w-full\">\n {segments.map((seg, i) => {\n const segPixelWidth =\n (seg.endFraction - seg.startFraction) * pixelWidth;\n const segDurationLabel = formatDuration(\n (seg.endFraction - seg.startFraction) * totalDurationMs\n );\n const showSegmentDurationLabel =\n isRowHovered &&\n segPixelWidth >= getMinDurationLabelWidthPx(segDurationLabel);\n const segStyle =\n seg.status === 'queued' && segPixelWidth < 20\n ? { background: 'var(--ds-gray-500)' }\n : SEGMENT_CONFIG[seg.status].style;\n\n return (\n <div\n key={`${seg.status}-${i}`}\n className={cn(\n 'absolute h-full rounded-[0.25rem]',\n SEGMENT_CONFIG[seg.status].className\n )}\n style={{\n left: `calc(${seg.startFraction * 100}% + ${SEGMENT_GAP_PX / 2}px)`,\n width: `calc(${(seg.endFraction - seg.startFraction) * 100}% - ${SEGMENT_GAP_PX}px)`,\n minWidth: 1,\n ...segStyle,\n }}\n >\n {showSegmentDurationLabel\n ? renderDurationLabel(segDurationLabel)\n : null}\n </div>\n );\n })}\n </div>\n ) : (\n <div\n className=\"relative h-6 rounded-[0.25rem]\"\n style={{\n width: '100%',\n minWidth: 4,\n background: fallbackColor,\n }}\n >\n {showBarDurationLabel ? renderDurationLabel(totalDurationLabel) : null}\n </div>\n );\n\n return (\n <div\n role=\"treeitem\"\n aria-selected={isSelected}\n aria-expanded={isSelected}\n aria-level={1}\n className={cn(\n 'h-10 relative flex items-center hover:bg-gray-100 aria-selected:bg-gray-100 aria-selected:hover:bg-gray-200'\n )}\n onMouseEnter={() => setIsRowHovered(true)}\n onMouseLeave={() => setIsRowHovered(false)}\n onClick={onClick}\n >\n <div\n className=\"absolute inset-y-0\"\n style={{\n left: TIMELINE_PADDING_PX,\n right: TIMELINE_PADDING_PX,\n }}\n >\n <div\n className=\"absolute top-1/2 -translate-y-1/2\"\n style={{\n left: showBoundaryArrow\n ? `min(max(${leftPct}%, 0px), calc(100% - ${TINY_BAR_BOX_SIZE_PX}px))`\n : isTinyBar\n ? `min(${leftPct}%, calc(100% - ${TINY_BAR_WIDTH_PX}px))`\n : `${leftPct}%`,\n width: showBoundaryArrow\n ? `${TINY_BAR_BOX_SIZE_PX}px`\n : isTinyBar\n ? `${TINY_BAR_WIDTH_PX}px`\n : `max(${widthPct}%, 4px)`,\n height: BAR_HEIGHT_PX,\n }}\n >\n {barContent}\n </div>\n </div>\n </div>\n );\n});\n\nexport { TimelineBar };\n\nexport function TimelineHeader({\n markers,\n hoverInfo,\n}: {\n markers: TimeMarker[];\n hoverInfo?: { fraction: number; label: string } \| null;\n}): ReactNode {\n return (\n <div className=\"relative bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-end px-4 pb-1\">\n <div className=\"relative h-full flex-1\">\n {markers.map((m) => (\n <span\n key={`${m.position}-${m.label}`}\n className=\"absolute bottom-1 font-mono text-xs font-normal leading-4 text-gray-900 whitespace-nowrap\"\n style={{ left: `${m.position * 100}%` }}\n >\n {m.label}\n </span>\n ))}\n {hoverInfo && (\n <span\n className=\"absolute top-1 pointer-events-none z-10 font-mono text-[11px] leading-4 text-gray-1000 whitespace-nowrap bg-background-100 border border-gray-alpha-400 rounded px-1 -translate-x-1/2\"\n style={{ left: `${hoverInfo.fraction * 100}%` }}\n >\n {hoverInfo.label}\n </span>\n )}\n </div>\n </div>\n );\n}\n\nexport function Timeline({\n spans,\n viewStart,\n viewEnd,\n markers,\n selectedId,\n onSelect,\n hoverFraction,\n altHeld = false,\n}: {\n spans: Span[];\n viewStart: number;\n viewEnd: number;\n markers: TimeMarker[];\n selectedId: string \| null;\n onSelect: (spanId: string) => void;\n hoverFraction?: number \| null;\n altHeld?: boolean;\n}): ReactNode {\n const containerRef = useRef<HTMLDivElement>(null);\n const [containerWidth, setContainerWidth] = useState(0);\n const viewDuration = viewEnd - viewStart;\n const timelineWidth = Math.max(0, containerWidth - TIMELINE_PADDING_PX * 2);\n\n useEffect(() => {\n const el = containerRef.current;\n if (!el) return;\n const ro = new ResizeObserver(([entry]) => {\n setContainerWidth(entry.contentRect.width);\n });\n ro.observe(el);\n return () => ro.disconnect();\n }, []);\n\n const gaps = useMemo(\n () => computeSpanGaps(spans, viewStart, viewEnd),\n [spans, viewStart, viewEnd]\n );\n\n return (\n <div ref={containerRef} className=\"relative h-full overflow-hidden\">\n <div\n aria-hidden\n className=\"absolute inset-y-0 pointer-events-none\"\n style={{\n left: TIMELINE_PADDING_PX,\n right: TIMELINE_PADDING_PX,\n }}\n >\n {markers.map((marker) =>\n Math.abs(marker.value) > ORIGIN_MARKER_EPSILON ? (\n <div\n key={`${marker.position}-${marker.label}`}\n className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-300\"\n style={{ left: `${marker.position * 100}%` }}\n />\n ) : null\n )}\n </div>\n {hoverFraction != null && (\n <div\n className=\"absolute inset-y-0 pointer-events-none z-10\"\n style={{\n left: TIMELINE_PADDING_PX,\n right: TIMELINE_PADDING_PX,\n }}\n >\n <div\n className=\"absolute top-0 bottom-0 w-px bg-gray-alpha-400\"\n style={{ left: `${hoverFraction * 100}%` }}\n />\n </div>\n )}\n {spans.map((span) => (\n <TimelineBar\n key={span.spanId}\n span={span}\n viewStart={viewStart}\n viewDuration={viewDuration}\n containerWidth={timelineWidth}\n isSelected={selectedId === span.spanId}\n onClick={() => onSelect(span.spanId)}\n />\n ))}\n {altHeld && (\n <div\n aria-hidden\n className=\"absolute inset-y-0 pointer-events-none\"\n style={{\n left: TIMELINE_PADDING_PX,\n right: TIMELINE_PADDING_PX,\n }}\n >\n {gaps.map((gap) => (\n <DeltaIndicator\n key={gap.rowIndex}\n leftFrac={gap.leftFrac}\n rightFrac={gap.rightFrac}\n label={formatDuration(gap.gapMs, true)}\n rowIndex={gap.rowIndex}\n />\n ))}\n </div>\n )}\n </div>\n );\n}\n"]}

package/dist/components/new-trace-viewer/context.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,~~2CAuDA~~;AAED,eAAO,MAAM,aAAa,QAAO,sBAOhC,CAAC"}
1	+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,UAAU,sBAAsB;IAC9B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAC;IACxB,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,MAAM,IAAI,CAAC;CAC7B;AAKD,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;CACrB,2CAqDA;AAED,eAAO,MAAM,aAAa,QAAO,sBAOhC,CAAC"}

package/dist/components/new-trace-viewer/context.js CHANGED Viewed

@@ -7,16 +7,14 @@ export function ActiveSpanProvider({ spans, children, }) {
     const [activeSpanId, setActiveSpanId] = useState(spans[0]?.spanId ?? null);
     useEffect(() => {
         setActiveSpanId((currentSpanId) => {
-            if (spans.length === 0) {
+            if (!currentSpanId) {
                 return null;
             }
-            if (currentSpanId) {
-                const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
-                if (hasCurrentSpan) {
-                    return currentSpanId;
-                }
+            const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
+            if (hasCurrentSpan) {
+                return currentSpanId;
             }
-            return spans[0].spanId;
+            return null;
         });
     }, [spans]);
     const activeSpan = useMemo(() => {

package/dist/components/new-trace-viewer/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,aAAa,EAEb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAUf,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAC7E,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,IAAI,CACzB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,CAAC,aAAa,EAAE,EAAE;YAChC,IAAI,~~KAAK,~~CAAC,~~MAAM~~,~~KAAK,CAAC,~~EAAE,CAAC;~~gBACvB~~,OAAO,IAAI,CAAC;YACd,CAAC;YAED,~~IAAI,aAAa,EAAE,CAAC;gBAClB,~~MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,CACxC,CAAC;~~gBACF~~,IAAI,cAAc,EAAE,CAAC;~~oBACnB~~,OAAO,aAAa,CAAC;~~gBACvB~~,CAAC;~~YACH,CAAC;~~YAED,OAAO,~~KAAK~~,CAAC~~,CAAC,CAAC,CAAC,MAAM,CAAC~~;~~QACzB~~,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC,IAAI,IAAI,CAAC;IACpE,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACnD,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,UAAU;QACV,aAAa;QACb,eAAe;KAChB,CAAC,EACF,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,CAC3D,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACrC,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,GAA2B,EAAE;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;IAC1E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["'use client';\n\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport type { Span } from '../trace-viewer/types';\n\ninterface ActiveSpanContextValue {\n activeSpanId: string \| null;\n activeSpan: Span \| null;\n setActiveSpan: (spanId: string) => void;\n clearActiveSpan: () => void;\n}\n\nconst ActiveSpanContext = createContext<ActiveSpanContextValue \| null>(null);\nActiveSpanContext.displayName = 'ActiveSpanContext';\n\nexport function ActiveSpanProvider({\n spans,\n children,\n}: {\n spans: Span[];\n children: ReactNode;\n}) {\n const [activeSpanId, setActiveSpanId] = useState<string \| null>(\n spans[0]?.spanId ?? null\n );\n\n useEffect(() => {\n setActiveSpanId((currentSpanId) => {\n if (~~spans.length === 0~~) {\n return null;\n }\n\n ~~if (currentSpanId) {\n~~ const hasCurrentSpan = spans.some(\n (span) => span.spanId === currentSpanId\n );\n if (hasCurrentSpan) {\n return currentSpanId;\n ~~}\n~~ }\n\n return ~~spans[0].spanId~~;\n });\n }, [spans]);\n\n const activeSpan = useMemo(() => {\n if (!activeSpanId) {\n return null;\n }\n\n return spans.find((span) => span.spanId === activeSpanId) ?? null;\n }, [activeSpanId, spans]);\n\n const setActiveSpan = useCallback((spanId: string) => {\n setActiveSpanId(spanId);\n }, []);\n\n const clearActiveSpan = useCallback(() => {\n setActiveSpanId(null);\n }, []);\n\n const value = useMemo<ActiveSpanContextValue>(\n () => ({\n activeSpanId,\n activeSpan,\n setActiveSpan,\n clearActiveSpan,\n }),\n [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]\n );\n\n return (\n <ActiveSpanContext.Provider value={value}>\n {children}\n </ActiveSpanContext.Provider>\n );\n}\n\nexport const useActiveSpan = (): ActiveSpanContextValue => {\n const context = useContext(ActiveSpanContext);\n if (!context) {\n throw new Error('useActiveSpan must be used within ActiveSpanProvider');\n }\n\n return context;\n};\n"]}
1	+ {"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/context.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,aAAa,EAEb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAUf,MAAM,iBAAiB,GAAG,aAAa,CAAgC,IAAI,CAAC,CAAC;AAC7E,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,QAAQ,GAIT;IACC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAC9C,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,IAAI,CACzB,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,CAAC,aAAa,EAAE,EAAE;YAChC,IAAI,CAAC,aAAa,EAAE,CAAC;gBACnB,OAAO,IAAI,CAAC;YACd,CAAC;YAED,MAAM,cAAc,GAAG,KAAK,CAAC,IAAI,CAC/B,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,aAAa,CACxC,CAAC;YACF,IAAI,cAAc,EAAE,CAAC;gBACnB,OAAO,aAAa,CAAC;YACvB,CAAC;YAED,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC,IAAI,IAAI,CAAC;IACpE,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,EAAE;QACnD,eAAe,CAAC,MAAM,CAAC,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,WAAW,CAAC,GAAG,EAAE;QACvC,eAAe,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,UAAU;QACV,aAAa;QACb,eAAe;KAChB,CAAC,EACF,CAAC,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,CAC3D,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACrC,QAAQ,GACkB,CAC9B,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,GAA2B,EAAE;IACxD,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IAC9C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAC;IAC1E,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC","sourcesContent":["'use client';\n\nimport {\n createContext,\n type ReactNode,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useState,\n} from 'react';\nimport type { Span } from '../trace-viewer/types';\n\ninterface ActiveSpanContextValue {\n activeSpanId: string \| null;\n activeSpan: Span \| null;\n setActiveSpan: (spanId: string) => void;\n clearActiveSpan: () => void;\n}\n\nconst ActiveSpanContext = createContext<ActiveSpanContextValue \| null>(null);\nActiveSpanContext.displayName = 'ActiveSpanContext';\n\nexport function ActiveSpanProvider({\n spans,\n children,\n}: {\n spans: Span[];\n children: ReactNode;\n}) {\n const [activeSpanId, setActiveSpanId] = useState<string \| null>(\n spans[0]?.spanId ?? null\n );\n\n useEffect(() => {\n setActiveSpanId((currentSpanId) => {\n if (!currentSpanId) {\n return null;\n }\n\n const hasCurrentSpan = spans.some(\n (span) => span.spanId === currentSpanId\n );\n if (hasCurrentSpan) {\n return currentSpanId;\n }\n\n return null;\n });\n }, [spans]);\n\n const activeSpan = useMemo(() => {\n if (!activeSpanId) {\n return null;\n }\n\n return spans.find((span) => span.spanId === activeSpanId) ?? null;\n }, [activeSpanId, spans]);\n\n const setActiveSpan = useCallback((spanId: string) => {\n setActiveSpanId(spanId);\n }, []);\n\n const clearActiveSpan = useCallback(() => {\n setActiveSpanId(null);\n }, []);\n\n const value = useMemo<ActiveSpanContextValue>(\n () => ({\n activeSpanId,\n activeSpan,\n setActiveSpan,\n clearActiveSpan,\n }),\n [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]\n );\n\n return (\n <ActiveSpanContext.Provider value={value}>\n {children}\n </ActiveSpanContext.Provider>\n );\n}\n\nexport const useActiveSpan = (): ActiveSpanContextValue => {\n const context = useContext(ActiveSpanContext);\n if (!context) {\n throw new Error('useActiveSpan must be used within ActiveSpanProvider');\n }\n\n return context;\n};\n"]}

package/dist/components/new-trace-viewer/detail-panel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;~~AAGlD~~,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,SAAS,CAuC9B"}
1	+ {"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAIlD,UAAU,gBAAgB;IACxB,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACR,EAAE,gBAAgB,GAAG,SAAS,CAuC9B"}

package/dist/components/new-trace-viewer/detail-panel.js CHANGED Viewed

@@ -2,9 +2,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { X } from 'lucide-react';
 import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { getSpanDurationMs } from './utils';
 export function DetailPanel({ span, rootStart, onClose, }) {
     const startMs = getHighResInMs(span.startTime);
-    const durationMs = getHighResInMs(span.duration);
+    const durationMs = getSpanDurationMs(span);
     const offsetMs = startMs - rootStart;
     return (_jsxs("aside", { className: "grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200", children: [_jsxs("div", { className: "flex items-center justify-between px-3 border-b border-gray-alpha-400", children: [_jsx("span", { className: "text-sm font-medium text-gray-1000 truncate", children: span.name }), _jsx("button", { type: "button", className: "p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors", onClick: onClose, children: _jsx(X, { className: "w-4 h-4" }) })] }), _jsx("div", { className: "overflow-y-auto p-3 space-y-3", children: _jsxs("dl", { className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm", children: [_jsx("dt", { className: "text-gray-900", children: "Resource" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.resource }), _jsx("dt", { className: "text-gray-900", children: "Duration" }), _jsx("dd", { className: "text-gray-1000 tabular-nums font-mono", children: formatDuration(durationMs) }), _jsx("dt", { className: "text-gray-900", children: "Offset" }), _jsxs("dd", { className: "text-gray-1000 tabular-nums font-mono", children: ["+", formatDuration(offsetMs)] }), _jsx("dt", { className: "text-gray-900", children: "Status" }), _jsx("dd", { className: "text-gray-1000 font-mono", children: span.status.code === 2 ? 'Error' : 'OK' })] }) })] }));
 }

package/dist/components/new-trace-viewer/detail-panel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"detail-panel.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;~~AAQ7E~~,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACU;IACjB,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,~~cAAc~~,CAAC,IAAI,CAAC,~~QAAQ,~~CAAC~~,CAAC~~;~~IACjD~~,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAErC,OAAO,CACL,iBAAO,SAAS,EAAC,iEAAiE,aAChF,eAAK,SAAS,EAAC,uEAAuE,aACpF,eAAM,SAAS,EAAC,6CAA6C,YAC1D,IAAI,CAAC,IAAI,GACL,EACP,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6FAA6F,EACvG,OAAO,EAAE,OAAO,YAEhB,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,IACL,EACN,cAAK,SAAS,EAAC,+BAA+B,YAC5C,cAAI,SAAS,EAAC,qDAAqD,aACjE,aAAI,SAAS,EAAC,eAAe,yBAAc,EAC3C,aAAI,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,QAAQ,GAAM,EAC7D,aAAI,SAAS,EAAC,eAAe,yBAAc,EAC3C,aAAI,SAAS,EAAC,uCAAuC,YAClD,cAAc,CAAC,UAAU,CAAC,GACxB,EACL,aAAI,SAAS,EAAC,eAAe,uBAAY,EACzC,cAAI,SAAS,EAAC,uCAAuC,kBACjD,cAAc,CAAC,QAAQ,CAAC,IACvB,EACL,aAAI,SAAS,EAAC,eAAe,uBAAY,EACzC,aAAI,SAAS,EAAC,0BAA0B,YACrC,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GACrC,IACF,GACD,IACA,CACT,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { Span } from '../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';\n\ninterface DetailPanelProps {\n span: Span;\n rootStart: number;\n onClose: () => void;\n}\n\nexport function DetailPanel({\n span,\n rootStart,\n onClose,\n}: DetailPanelProps): ReactNode {\n const startMs = getHighResInMs(span.startTime);\n const durationMs = ~~getHighResInMs~~(span~~.duration~~);\n const offsetMs = startMs - rootStart;\n\n return (\n <aside className=\"grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200\">\n <div className=\"flex items-center justify-between px-3 border-b border-gray-alpha-400\">\n <span className=\"text-sm font-medium text-gray-1000 truncate\">\n {span.name}\n </span>\n <button\n type=\"button\"\n className=\"p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors\"\n onClick={onClose}\n >\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n <div className=\"overflow-y-auto p-3 space-y-3\">\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm\">\n <dt className=\"text-gray-900\">Resource</dt>\n <dd className=\"text-gray-1000 font-mono\">{span.resource}</dd>\n <dt className=\"text-gray-900\">Duration</dt>\n <dd className=\"text-gray-1000 tabular-nums font-mono\">\n {formatDuration(durationMs)}\n </dd>\n <dt className=\"text-gray-900\">Offset</dt>\n <dd className=\"text-gray-1000 tabular-nums font-mono\">\n +{formatDuration(offsetMs)}\n </dd>\n <dt className=\"text-gray-900\">Status</dt>\n <dd className=\"text-gray-1000 font-mono\">\n {span.status.code === 2 ? 'Error' : 'OK'}\n </dd>\n </dl>\n </div>\n </aside>\n );\n}\n"]}
1	+ {"version":3,"file":"detail-panel.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/detail-panel.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,CAAC,EAAE,MAAM,cAAc,CAAC;AAGjC,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,GACU;IACjB,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/C,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAErC,OAAO,CACL,iBAAO,SAAS,EAAC,iEAAiE,aAChF,eAAK,SAAS,EAAC,uEAAuE,aACpF,eAAM,SAAS,EAAC,6CAA6C,YAC1D,IAAI,CAAC,IAAI,GACL,EACP,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,6FAA6F,EACvG,OAAO,EAAE,OAAO,YAEhB,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,IACL,EACN,cAAK,SAAS,EAAC,+BAA+B,YAC5C,cAAI,SAAS,EAAC,qDAAqD,aACjE,aAAI,SAAS,EAAC,eAAe,yBAAc,EAC3C,aAAI,SAAS,EAAC,0BAA0B,YAAE,IAAI,CAAC,QAAQ,GAAM,EAC7D,aAAI,SAAS,EAAC,eAAe,yBAAc,EAC3C,aAAI,SAAS,EAAC,uCAAuC,YAClD,cAAc,CAAC,UAAU,CAAC,GACxB,EACL,aAAI,SAAS,EAAC,eAAe,uBAAY,EACzC,cAAI,SAAS,EAAC,uCAAuC,kBACjD,cAAc,CAAC,QAAQ,CAAC,IACvB,EACL,aAAI,SAAS,EAAC,eAAe,uBAAY,EACzC,aAAI,SAAS,EAAC,0BAA0B,YACrC,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,GACrC,IACF,GACD,IACA,CACT,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { X } from 'lucide-react';\nimport type { ReactNode } from 'react';\nimport type { Span } from '../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';\nimport { getSpanDurationMs } from './utils';\n\ninterface DetailPanelProps {\n span: Span;\n rootStart: number;\n onClose: () => void;\n}\n\nexport function DetailPanel({\n span,\n rootStart,\n onClose,\n}: DetailPanelProps): ReactNode {\n const startMs = getHighResInMs(span.startTime);\n const durationMs = getSpanDurationMs(span);\n const offsetMs = startMs - rootStart;\n\n return (\n <aside className=\"grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200\">\n <div className=\"flex items-center justify-between px-3 border-b border-gray-alpha-400\">\n <span className=\"text-sm font-medium text-gray-1000 truncate\">\n {span.name}\n </span>\n <button\n type=\"button\"\n className=\"p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors\"\n onClick={onClose}\n >\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n <div className=\"overflow-y-auto p-3 space-y-3\">\n <dl className=\"grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm\">\n <dt className=\"text-gray-900\">Resource</dt>\n <dd className=\"text-gray-1000 font-mono\">{span.resource}</dd>\n <dt className=\"text-gray-900\">Duration</dt>\n <dd className=\"text-gray-1000 tabular-nums font-mono\">\n {formatDuration(durationMs)}\n </dd>\n <dt className=\"text-gray-900\">Offset</dt>\n <dd className=\"text-gray-1000 tabular-nums font-mono\">\n +{formatDuration(offsetMs)}\n </dd>\n <dt className=\"text-gray-900\">Status</dt>\n <dd className=\"text-gray-1000 font-mono\">\n {span.status.code === 2 ? 'Error' : 'OK'}\n </dd>\n </dl>\n </div>\n </aside>\n );\n}\n"]}

package/dist/components/new-trace-viewer/trace-viewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"trace-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/trace-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;~~AAUnD~~,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd;~~AAsGD~~,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAMxE"}
1	+ {"version":3,"file":"trace-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/trace-viewer.tsx"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAcnD,UAAU,mBAAmB;IAC3B,KAAK,EAAE,KAAK,CAAC;CACd;AAqGD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAMxE"}