@workflow/web-shared 5.0.0-beta.4 → 5.0.0-beta.41
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.
- package/README.md +5 -13
- package/dist/components/error-boundary.js +1 -1
- package/dist/components/event-list-view.d.ts +46 -1
- package/dist/components/event-list-view.d.ts.map +1 -1
- package/dist/components/event-list-view.js +235 -97
- package/dist/components/hook-actions.js +1 -1
- package/dist/components/index.d.ts +8 -5
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +6 -4
- package/dist/components/sidebar/attribute-panel.d.ts +4 -1
- package/dist/components/sidebar/attribute-panel.d.ts.map +1 -1
- package/dist/components/sidebar/attribute-panel.js +173 -119
- package/dist/components/sidebar/attributes-block.d.ts +40 -0
- package/dist/components/sidebar/attributes-block.d.ts.map +1 -0
- package/dist/components/sidebar/attributes-block.js +140 -0
- package/dist/components/sidebar/conversation-view.js +1 -1
- package/dist/components/sidebar/copyable-data-block.d.ts +2 -0
- package/dist/components/sidebar/copyable-data-block.d.ts.map +1 -1
- package/dist/components/sidebar/copyable-data-block.js +17 -16
- package/dist/components/sidebar/entity-detail-panel.d.ts +11 -11
- package/dist/components/sidebar/entity-detail-panel.d.ts.map +1 -1
- package/dist/components/sidebar/entity-detail-panel.js +37 -71
- package/dist/components/sidebar/events-list.d.ts +6 -2
- package/dist/components/sidebar/events-list.d.ts.map +1 -1
- package/dist/components/sidebar/events-list.js +77 -63
- package/dist/components/sidebar/resolve-hook-modal.js +1 -1
- package/dist/components/sidebar/sidebar-data-context.d.ts +10 -7
- package/dist/components/sidebar/sidebar-data-context.d.ts.map +1 -1
- package/dist/components/sidebar/sidebar-data-context.js +1 -1
- package/dist/components/sidebar/span-detail-merge.d.ts +31 -0
- package/dist/components/sidebar/span-detail-merge.d.ts.map +1 -0
- package/dist/components/sidebar/span-detail-merge.js +92 -0
- package/dist/components/sidebar/use-selected-span-detail.d.ts +16 -0
- package/dist/components/sidebar/use-selected-span-detail.d.ts.map +1 -0
- package/dist/components/sidebar/use-selected-span-detail.js +93 -0
- package/dist/components/stream-viewer-skeleton.d.ts +2 -0
- package/dist/components/stream-viewer-skeleton.d.ts.map +1 -0
- package/dist/components/stream-viewer-skeleton.js +12 -0
- package/dist/components/stream-viewer.d.ts +1 -1
- package/dist/components/stream-viewer.d.ts.map +1 -1
- package/dist/components/stream-viewer.js +9 -26
- package/dist/components/trace-viewer/components/copy-button.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/copy-button.js +27 -0
- package/dist/components/trace-viewer/components/detail-panel-width.d.ts +34 -0
- package/dist/components/trace-viewer/components/detail-panel-width.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/detail-panel-width.js +67 -0
- package/dist/components/trace-viewer/components/detail-panel.d.ts +14 -0
- package/dist/components/trace-viewer/components/detail-panel.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/detail-panel.js +122 -0
- package/dist/components/trace-viewer/components/draggable-border.d.ts +31 -0
- package/dist/components/trace-viewer/components/draggable-border.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/draggable-border.js +140 -0
- package/dist/components/trace-viewer/components/event-list.d.ts +10 -0
- package/dist/components/trace-viewer/components/event-list.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/event-list.js +47 -0
- package/dist/components/trace-viewer/components/middle-truncate/copy-selection.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/middle-truncate/copy-selection.js +54 -0
- package/dist/components/trace-viewer/components/middle-truncate/middle-truncate.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/middle-truncate/middle-truncate.js +81 -0
- package/dist/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/truncate.d.ts +1 -1
- package/dist/components/trace-viewer/components/middle-truncate/truncate.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/middle-truncate/truncate.js +101 -0
- package/dist/components/trace-viewer/components/middle-truncate/use-middle-truncate.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/middle-truncate/use-middle-truncate.js +114 -0
- package/dist/components/trace-viewer/components/minimap.d.ts +14 -0
- package/dist/components/trace-viewer/components/minimap.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/minimap.js +337 -0
- package/dist/components/trace-viewer/components/pane-constants.d.ts +14 -0
- package/dist/components/trace-viewer/components/pane-constants.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/pane-constants.js +16 -0
- package/dist/components/trace-viewer/components/span-markers.d.ts +46 -0
- package/dist/components/trace-viewer/components/span-markers.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/span-markers.js +85 -0
- package/dist/components/trace-viewer/components/split-pane.d.ts +10 -0
- package/dist/components/trace-viewer/components/split-pane.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/split-pane.js +41 -0
- package/dist/components/trace-viewer/components/timeline.d.ts +42 -0
- package/dist/components/trace-viewer/components/timeline.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/timeline.js +321 -0
- package/dist/components/trace-viewer/components/timeline.module.css +46 -0
- package/dist/components/trace-viewer/components/trace-shortcut-helper.d.ts +5 -0
- package/dist/components/trace-viewer/components/trace-shortcut-helper.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/trace-shortcut-helper.js +55 -0
- package/dist/components/trace-viewer/components/trace-shortcut-helper.module.css +20 -0
- package/dist/components/trace-viewer/components/trace-viewer-skeleton.d.ts +2 -0
- package/dist/components/trace-viewer/components/trace-viewer-skeleton.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/trace-viewer-skeleton.js +26 -0
- package/dist/components/trace-viewer/components/use-element-width.d.ts +8 -0
- package/dist/components/trace-viewer/components/use-element-width.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/use-element-width.js +25 -0
- package/dist/components/trace-viewer/components/use-row-window.d.ts +34 -0
- package/dist/components/trace-viewer/components/use-row-window.d.ts.map +1 -0
- package/dist/components/trace-viewer/components/use-row-window.js +107 -0
- package/dist/components/trace-viewer/context.d.ts +14 -182
- package/dist/components/trace-viewer/context.d.ts.map +1 -1
- package/dist/components/trace-viewer/context.js +44 -351
- package/dist/components/trace-viewer/icons.d.ts.map +1 -0
- package/dist/components/trace-viewer/icons.js +15 -0
- package/dist/components/trace-viewer/search.d.ts +19 -0
- package/dist/components/trace-viewer/search.d.ts.map +1 -0
- package/dist/components/trace-viewer/search.js +134 -0
- package/dist/components/trace-viewer/trace-viewer.d.ts +7 -28
- package/dist/components/trace-viewer/trace-viewer.d.ts.map +1 -1
- package/dist/components/trace-viewer/trace-viewer.js +306 -356
- package/dist/components/trace-viewer/types.d.ts +2 -211
- package/dist/components/trace-viewer/types.d.ts.map +1 -1
- package/dist/components/trace-viewer/types.js +1 -1
- package/dist/components/trace-viewer/util/timing.d.ts +2 -2
- package/dist/components/trace-viewer/util/timing.d.ts.map +1 -1
- package/dist/components/trace-viewer/util/timing.js +3 -3
- package/dist/components/trace-viewer/utils.d.ts +111 -0
- package/dist/components/trace-viewer/utils.d.ts.map +1 -0
- package/dist/components/trace-viewer/utils.js +430 -0
- package/dist/components/{trace-viewer-new.d.ts → trace-viewer.d.ts} +7 -3
- package/dist/components/trace-viewer.d.ts.map +1 -0
- package/dist/components/trace-viewer.js +21 -0
- package/dist/components/ui/alert.js +3 -3
- package/dist/components/ui/button.d.ts +10 -0
- package/dist/components/ui/button.d.ts.map +1 -0
- package/dist/components/ui/button.js +46 -0
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/card.js +4 -4
- package/dist/components/ui/collapsible.d.ts +46 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/collapsible.js +66 -0
- package/dist/components/ui/context-card.d.ts +47 -0
- package/dist/components/ui/context-card.d.ts.map +1 -0
- package/dist/components/ui/context-card.js +471 -0
- package/dist/components/ui/data-inspector.d.ts +7 -6
- package/dist/components/ui/data-inspector.d.ts.map +1 -1
- package/dist/components/ui/data-inspector.js +232 -99
- package/dist/components/ui/data-inspector.styles.d.ts +29 -0
- package/dist/components/ui/data-inspector.styles.d.ts.map +1 -0
- package/dist/components/ui/data-inspector.styles.js +95 -0
- package/dist/components/ui/decrypt-button.js +1 -1
- package/dist/components/ui/error-card.js +3 -3
- package/dist/components/ui/error-stack-block.d.ts +17 -10
- package/dist/components/ui/error-stack-block.d.ts.map +1 -1
- package/dist/components/ui/error-stack-block.js +49 -30
- package/dist/components/ui/icon-button.d.ts +19 -0
- package/dist/components/ui/icon-button.d.ts.map +1 -0
- package/dist/components/ui/icon-button.js +29 -0
- package/dist/components/ui/kbd.d.ts +10 -0
- package/dist/components/ui/kbd.d.ts.map +1 -0
- package/dist/components/ui/kbd.js +25 -0
- package/dist/components/ui/load-more-button.js +1 -1
- package/dist/components/ui/menu-dropdown.js +1 -1
- package/dist/components/ui/skeleton.js +2 -2
- package/dist/components/ui/spinner.js +1 -1
- package/dist/components/ui/timestamp-tooltip.d.ts +34 -1
- package/dist/components/ui/timestamp-tooltip.d.ts.map +1 -1
- package/dist/components/ui/timestamp-tooltip.js +80 -132
- package/dist/components/ui/tooltip.d.ts +10 -0
- package/dist/components/ui/tooltip.d.ts.map +1 -0
- package/dist/components/ui/tooltip.js +12 -0
- package/dist/components/workflow-traces/event-colors.d.ts +2 -1
- package/dist/components/workflow-traces/event-colors.d.ts.map +1 -1
- package/dist/components/workflow-traces/event-colors.js +15 -7
- package/dist/components/workflow-traces/trace-span-construction.d.ts +6 -3
- package/dist/components/workflow-traces/trace-span-construction.d.ts.map +1 -1
- package/dist/components/workflow-traces/trace-span-construction.js +71 -30
- package/dist/components/workflow-traces/trace-time-utils.js +1 -1
- package/dist/hooks/use-dark-mode.js +1 -1
- package/dist/hooks/use-intersection-observer.d.ts +17 -0
- package/dist/hooks/use-intersection-observer.d.ts.map +1 -0
- package/dist/hooks/use-intersection-observer.js +29 -0
- package/dist/hooks/use-load-more-on-scroll.d.ts +21 -0
- package/dist/hooks/use-load-more-on-scroll.d.ts.map +1 -0
- package/dist/hooks/use-load-more-on-scroll.js +28 -0
- package/dist/hooks/use-reduced-motion.d.ts +10 -0
- package/dist/hooks/use-reduced-motion.d.ts.map +1 -0
- package/dist/hooks/use-reduced-motion.js +29 -0
- package/dist/index.d.ts +4 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -3
- package/dist/lib/cn.d.ts +10 -0
- package/dist/lib/cn.d.ts.map +1 -0
- package/dist/lib/cn.js +83 -0
- package/dist/lib/event-analysis.d.ts +1 -1
- package/dist/lib/event-analysis.d.ts.map +1 -1
- package/dist/lib/event-analysis.js +3 -2
- package/dist/lib/event-materialization.d.ts +1 -1
- package/dist/lib/event-materialization.d.ts.map +1 -1
- package/dist/lib/event-materialization.js +29 -21
- package/dist/lib/exact-event-search-id.d.ts +25 -0
- package/dist/lib/exact-event-search-id.d.ts.map +1 -0
- package/dist/lib/exact-event-search-id.js +39 -0
- package/dist/lib/hydration.d.ts +17 -2
- package/dist/lib/hydration.d.ts.map +1 -1
- package/dist/lib/hydration.js +194 -23
- package/dist/lib/stream-display.js +1 -1
- package/dist/lib/toast.js +1 -1
- package/dist/lib/trace-builder.d.ts +17 -5
- package/dist/lib/trace-builder.d.ts.map +1 -1
- package/dist/lib/trace-builder.js +32 -14
- package/dist/lib/trace-types.d.ts +54 -0
- package/dist/lib/trace-types.d.ts.map +1 -0
- package/dist/lib/trace-types.js +2 -0
- package/dist/lib/utils.d.ts +14 -2
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +46 -6
- package/dist/lib/zstd-browser-decoder.d.ts +7 -0
- package/dist/lib/zstd-browser-decoder.d.ts.map +1 -0
- package/dist/lib/zstd-browser-decoder.js +41 -0
- package/dist/styles.css +210 -139
- package/package.json +11 -8
- package/src/components/event-list-view.tsx +385 -123
- package/src/components/index.ts +14 -8
- package/src/components/sidebar/attribute-panel.tsx +331 -282
- package/src/components/sidebar/attributes-block.tsx +326 -0
- package/src/components/sidebar/copyable-data-block.tsx +50 -28
- package/src/components/sidebar/entity-detail-panel.tsx +92 -126
- package/src/components/sidebar/events-list.tsx +197 -179
- package/src/components/sidebar/sidebar-data-context.tsx +11 -11
- package/src/components/sidebar/span-detail-merge.ts +134 -0
- package/src/components/sidebar/use-selected-span-detail.ts +146 -0
- package/src/components/stream-viewer-skeleton.tsx +34 -0
- package/src/components/stream-viewer.tsx +34 -106
- package/src/components/{new-trace-viewer → trace-viewer}/components/copy-button.tsx +2 -2
- package/src/components/trace-viewer/components/detail-panel-width.test.ts +123 -0
- package/src/components/trace-viewer/components/detail-panel-width.ts +76 -0
- package/src/components/trace-viewer/components/detail-panel.tsx +273 -0
- package/src/components/trace-viewer/components/draggable-border.tsx +216 -0
- package/src/components/trace-viewer/components/event-list.tsx +144 -0
- package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/middle-truncate.tsx +8 -8
- package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/truncate.ts +1 -1
- package/src/components/trace-viewer/components/minimap.tsx +556 -0
- package/src/components/trace-viewer/components/pane-constants.ts +19 -0
- package/src/components/trace-viewer/components/span-markers.tsx +173 -0
- package/src/components/trace-viewer/components/split-pane.tsx +141 -0
- package/src/components/trace-viewer/components/timeline.module.css +46 -0
- package/src/components/trace-viewer/components/timeline.tsx +850 -0
- package/src/components/trace-viewer/components/trace-shortcut-helper.module.css +20 -0
- package/src/components/trace-viewer/components/trace-shortcut-helper.tsx +116 -0
- package/src/components/trace-viewer/components/trace-viewer-skeleton.tsx +114 -0
- package/src/components/trace-viewer/components/use-element-width.ts +29 -0
- package/src/components/trace-viewer/components/use-row-window.ts +140 -0
- package/src/components/trace-viewer/context.tsx +63 -656
- package/src/components/{new-trace-viewer → trace-viewer}/icons.tsx +2 -2
- package/src/components/trace-viewer/search.ts +178 -0
- package/src/components/trace-viewer/trace-viewer.tsx +563 -531
- package/src/components/trace-viewer/types.ts +2 -234
- package/src/components/trace-viewer/util/timing.ts +2 -2
- package/src/components/trace-viewer/utils.test.ts +458 -0
- package/src/components/{new-trace-viewer → trace-viewer}/utils.ts +271 -50
- package/src/components/{trace-viewer-new.tsx → trace-viewer.tsx} +24 -18
- package/src/components/ui/alert.tsx +2 -2
- package/src/components/ui/button.tsx +68 -0
- package/src/components/ui/card.tsx +3 -10
- package/src/components/ui/collapsible.tsx +219 -0
- package/src/components/ui/context-card.tsx +784 -0
- package/src/components/ui/data-inspector.styles.ts +96 -0
- package/src/components/ui/data-inspector.tsx +501 -204
- package/src/components/ui/error-card.tsx +4 -4
- package/src/components/ui/error-stack-block.tsx +84 -55
- package/src/components/ui/icon-button.tsx +53 -0
- package/src/components/ui/kbd.tsx +43 -0
- package/src/components/ui/skeleton.tsx +1 -1
- package/src/components/ui/timestamp-tooltip.tsx +132 -194
- package/src/components/ui/tooltip.tsx +47 -0
- package/src/components/workflow-traces/event-colors.ts +15 -11
- package/src/components/workflow-traces/trace-span-construction.test.ts +85 -0
- package/src/components/workflow-traces/trace-span-construction.ts +97 -32
- package/src/hooks/use-intersection-observer.ts +57 -0
- package/src/hooks/use-load-more-on-scroll.ts +49 -0
- package/src/hooks/use-reduced-motion.ts +34 -0
- package/src/index.ts +10 -4
- package/src/lib/cn.ts +93 -0
- package/src/lib/event-analysis.ts +6 -4
- package/src/lib/event-materialization.ts +35 -21
- package/src/lib/exact-event-search-id.ts +67 -0
- package/src/lib/hydration.ts +210 -30
- package/src/lib/trace-builder.ts +43 -19
- package/src/lib/trace-types.ts +56 -0
- package/src/lib/utils.test.ts +33 -0
- package/src/lib/utils.ts +53 -6
- package/src/lib/zstd-browser-decoder.ts +42 -0
- package/src/styles.css +210 -139
- package/dist/components/error-boundary.js.map +0 -1
- package/dist/components/event-list-view.js.map +0 -1
- package/dist/components/hook-actions.js.map +0 -1
- package/dist/components/index.js.map +0 -1
- package/dist/components/new-trace-viewer/components/copy-button.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/copy-button.js +0 -27
- package/dist/components/new-trace-viewer/components/copy-button.js.map +0 -1
- package/dist/components/new-trace-viewer/components/event-list.d.ts +0 -8
- package/dist/components/new-trace-viewer/components/event-list.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/event-list.js +0 -38
- package/dist/components/new-trace-viewer/components/event-list.js.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/copy-selection.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/copy-selection.js +0 -54
- package/dist/components/new-trace-viewer/components/middle-truncate/copy-selection.js.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/middle-truncate.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/middle-truncate.js +0 -81
- package/dist/components/new-trace-viewer/components/middle-truncate/middle-truncate.js.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/truncate.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/truncate.js +0 -101
- package/dist/components/new-trace-viewer/components/middle-truncate/truncate.js.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.js +0 -114
- package/dist/components/new-trace-viewer/components/middle-truncate/use-middle-truncate.js.map +0 -1
- package/dist/components/new-trace-viewer/components/split-pane.d.ts +0 -14
- package/dist/components/new-trace-viewer/components/split-pane.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/split-pane.js +0 -99
- package/dist/components/new-trace-viewer/components/split-pane.js.map +0 -1
- package/dist/components/new-trace-viewer/components/timeline.d.ts +0 -31
- package/dist/components/new-trace-viewer/components/timeline.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/components/timeline.js +0 -138
- package/dist/components/new-trace-viewer/components/timeline.js.map +0 -1
- package/dist/components/new-trace-viewer/context.d.ts +0 -15
- package/dist/components/new-trace-viewer/context.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/context.js +0 -47
- package/dist/components/new-trace-viewer/context.js.map +0 -1
- package/dist/components/new-trace-viewer/detail-panel.d.ts +0 -10
- package/dist/components/new-trace-viewer/detail-panel.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/detail-panel.js +0 -12
- package/dist/components/new-trace-viewer/detail-panel.js.map +0 -1
- package/dist/components/new-trace-viewer/icons.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/icons.js +0 -15
- package/dist/components/new-trace-viewer/icons.js.map +0 -1
- package/dist/components/new-trace-viewer/trace-viewer.d.ts +0 -8
- package/dist/components/new-trace-viewer/trace-viewer.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/trace-viewer.js +0 -349
- package/dist/components/new-trace-viewer/trace-viewer.js.map +0 -1
- package/dist/components/new-trace-viewer/types.d.ts +0 -1
- package/dist/components/new-trace-viewer/types.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/types.js +0 -2
- package/dist/components/new-trace-viewer/types.js.map +0 -1
- package/dist/components/new-trace-viewer/util/constants.d.ts +0 -1
- package/dist/components/new-trace-viewer/util/constants.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/util/constants.js +0 -2
- package/dist/components/new-trace-viewer/util/constants.js.map +0 -1
- package/dist/components/new-trace-viewer/utils.d.ts +0 -42
- package/dist/components/new-trace-viewer/utils.d.ts.map +0 -1
- package/dist/components/new-trace-viewer/utils.js +0 -305
- package/dist/components/new-trace-viewer/utils.js.map +0 -1
- package/dist/components/run-trace-view.d.ts +0 -25
- package/dist/components/run-trace-view.d.ts.map +0 -1
- package/dist/components/run-trace-view.js +0 -11
- package/dist/components/run-trace-view.js.map +0 -1
- package/dist/components/sidebar/attribute-panel.js.map +0 -1
- package/dist/components/sidebar/conversation-view.js.map +0 -1
- package/dist/components/sidebar/copyable-data-block.js.map +0 -1
- package/dist/components/sidebar/detail-card.d.ts +0 -14
- package/dist/components/sidebar/detail-card.d.ts.map +0 -1
- package/dist/components/sidebar/detail-card.js +0 -20
- package/dist/components/sidebar/detail-card.js.map +0 -1
- package/dist/components/sidebar/entity-detail-panel.js.map +0 -1
- package/dist/components/sidebar/events-list.js.map +0 -1
- package/dist/components/sidebar/resolve-hook-modal.js.map +0 -1
- package/dist/components/sidebar/sidebar-data-context.js.map +0 -1
- package/dist/components/stream-viewer.js.map +0 -1
- package/dist/components/trace-viewer/components/map.d.ts +0 -8
- package/dist/components/trace-viewer/components/map.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/map.js +0 -162
- package/dist/components/trace-viewer/components/map.js.map +0 -1
- package/dist/components/trace-viewer/components/markers.d.ts +0 -23
- package/dist/components/trace-viewer/components/markers.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/markers.js +0 -416
- package/dist/components/trace-viewer/components/markers.js.map +0 -1
- package/dist/components/trace-viewer/components/node.d.ts +0 -35
- package/dist/components/trace-viewer/components/node.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/node.js +0 -285
- package/dist/components/trace-viewer/components/node.js.map +0 -1
- package/dist/components/trace-viewer/components/search-input.d.ts +0 -9
- package/dist/components/trace-viewer/components/search-input.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/search-input.js +0 -9
- package/dist/components/trace-viewer/components/search-input.js.map +0 -1
- package/dist/components/trace-viewer/components/search.d.ts +0 -3
- package/dist/components/trace-viewer/components/search.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/search.js +0 -25
- package/dist/components/trace-viewer/components/search.js.map +0 -1
- package/dist/components/trace-viewer/components/span-content.d.ts +0 -19
- package/dist/components/trace-viewer/components/span-content.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/span-content.js +0 -137
- package/dist/components/trace-viewer/components/span-content.js.map +0 -1
- package/dist/components/trace-viewer/components/span-detail-panel.d.ts +0 -10
- package/dist/components/trace-viewer/components/span-detail-panel.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/span-detail-panel.js +0 -285
- package/dist/components/trace-viewer/components/span-detail-panel.js.map +0 -1
- package/dist/components/trace-viewer/components/span-segments.d.ts +0 -50
- package/dist/components/trace-viewer/components/span-segments.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/span-segments.js +0 -445
- package/dist/components/trace-viewer/components/span-segments.js.map +0 -1
- package/dist/components/trace-viewer/components/span-strategies.d.ts +0 -46
- package/dist/components/trace-viewer/components/span-strategies.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/span-strategies.js +0 -108
- package/dist/components/trace-viewer/components/span-strategies.js.map +0 -1
- package/dist/components/trace-viewer/components/ui.d.ts +0 -28
- package/dist/components/trace-viewer/components/ui.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/ui.js +0 -39
- package/dist/components/trace-viewer/components/ui.js.map +0 -1
- package/dist/components/trace-viewer/components/zoom-button.d.ts +0 -3
- package/dist/components/trace-viewer/components/zoom-button.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/zoom-button.js +0 -29
- package/dist/components/trace-viewer/components/zoom-button.js.map +0 -1
- package/dist/components/trace-viewer/components/zoom-icons.d.ts +0 -11
- package/dist/components/trace-viewer/components/zoom-icons.d.ts.map +0 -1
- package/dist/components/trace-viewer/components/zoom-icons.js +0 -11
- package/dist/components/trace-viewer/components/zoom-icons.js.map +0 -1
- package/dist/components/trace-viewer/context.js.map +0 -1
- package/dist/components/trace-viewer/index.d.ts +0 -5
- package/dist/components/trace-viewer/index.d.ts.map +0 -1
- package/dist/components/trace-viewer/index.js +0 -4
- package/dist/components/trace-viewer/index.js.map +0 -1
- package/dist/components/trace-viewer/trace-viewer.js.map +0 -1
- package/dist/components/trace-viewer/trace-viewer.module.css +0 -1465
- package/dist/components/trace-viewer/types.js.map +0 -1
- package/dist/components/trace-viewer/util/constants.d.ts +0 -9
- package/dist/components/trace-viewer/util/constants.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/constants.js +0 -9
- package/dist/components/trace-viewer/util/constants.js.map +0 -1
- package/dist/components/trace-viewer/util/scrollbar-width.d.ts +0 -2
- package/dist/components/trace-viewer/util/scrollbar-width.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/scrollbar-width.js +0 -14
- package/dist/components/trace-viewer/util/scrollbar-width.js.map +0 -1
- package/dist/components/trace-viewer/util/timing.js.map +0 -1
- package/dist/components/trace-viewer/util/tree.d.ts +0 -13
- package/dist/components/trace-viewer/util/tree.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/tree.js +0 -227
- package/dist/components/trace-viewer/util/tree.js.map +0 -1
- package/dist/components/trace-viewer/util/use-immediate-style.d.ts +0 -15
- package/dist/components/trace-viewer/util/use-immediate-style.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/use-immediate-style.js +0 -23
- package/dist/components/trace-viewer/util/use-immediate-style.js.map +0 -1
- package/dist/components/trace-viewer/util/use-streaming-spans.d.ts +0 -8
- package/dist/components/trace-viewer/util/use-streaming-spans.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/use-streaming-spans.js +0 -345
- package/dist/components/trace-viewer/util/use-streaming-spans.js.map +0 -1
- package/dist/components/trace-viewer/util/use-trackpad-zoom.d.ts +0 -6
- package/dist/components/trace-viewer/util/use-trackpad-zoom.d.ts.map +0 -1
- package/dist/components/trace-viewer/util/use-trackpad-zoom.js +0 -39
- package/dist/components/trace-viewer/util/use-trackpad-zoom.js.map +0 -1
- package/dist/components/trace-viewer/worker.d.ts +0 -2
- package/dist/components/trace-viewer/worker.d.ts.map +0 -1
- package/dist/components/trace-viewer/worker.js +0 -109
- package/dist/components/trace-viewer/worker.js.map +0 -1
- package/dist/components/trace-viewer-new.d.ts.map +0 -1
- package/dist/components/trace-viewer-new.js +0 -23
- package/dist/components/trace-viewer-new.js.map +0 -1
- package/dist/components/ui/alert.js.map +0 -1
- package/dist/components/ui/card.js.map +0 -1
- package/dist/components/ui/data-inspector.js.map +0 -1
- package/dist/components/ui/decrypt-button.js.map +0 -1
- package/dist/components/ui/error-card.js.map +0 -1
- package/dist/components/ui/error-stack-block.js.map +0 -1
- package/dist/components/ui/inspector-theme.d.ts +0 -95
- package/dist/components/ui/inspector-theme.d.ts.map +0 -1
- package/dist/components/ui/inspector-theme.js +0 -82
- package/dist/components/ui/inspector-theme.js.map +0 -1
- package/dist/components/ui/load-more-button.js.map +0 -1
- package/dist/components/ui/menu-dropdown.js.map +0 -1
- package/dist/components/ui/skeleton.js.map +0 -1
- package/dist/components/ui/spinner.js.map +0 -1
- package/dist/components/ui/timestamp-tooltip.js.map +0 -1
- package/dist/components/workflow-trace-view.d.ts +0 -40
- package/dist/components/workflow-trace-view.d.ts.map +0 -1
- package/dist/components/workflow-trace-view.js +0 -695
- package/dist/components/workflow-trace-view.js.map +0 -1
- package/dist/components/workflow-traces/event-colors.js.map +0 -1
- package/dist/components/workflow-traces/trace-colors.d.ts +0 -15
- package/dist/components/workflow-traces/trace-colors.d.ts.map +0 -1
- package/dist/components/workflow-traces/trace-colors.js +0 -87
- package/dist/components/workflow-traces/trace-colors.js.map +0 -1
- package/dist/components/workflow-traces/trace-span-construction.js.map +0 -1
- package/dist/components/workflow-traces/trace-time-utils.js.map +0 -1
- package/dist/hooks/use-dark-mode.js.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/lib/event-analysis.js.map +0 -1
- package/dist/lib/event-materialization.js.map +0 -1
- package/dist/lib/hydration.js.map +0 -1
- package/dist/lib/stream-display.js.map +0 -1
- package/dist/lib/toast.js.map +0 -1
- package/dist/lib/trace-builder.js.map +0 -1
- package/dist/lib/utils.js.map +0 -1
- package/src/components/new-trace-viewer/components/event-list.tsx +0 -116
- package/src/components/new-trace-viewer/components/split-pane.tsx +0 -185
- package/src/components/new-trace-viewer/components/timeline.tsx +0 -382
- package/src/components/new-trace-viewer/context.tsx +0 -92
- package/src/components/new-trace-viewer/detail-panel.tsx +0 -58
- package/src/components/new-trace-viewer/trace-viewer.tsx +0 -645
- package/src/components/new-trace-viewer/types.ts +0 -0
- package/src/components/new-trace-viewer/util/constants.ts +0 -0
- package/src/components/run-trace-view.tsx +0 -84
- package/src/components/sidebar/detail-card.tsx +0 -65
- package/src/components/trace-viewer/components/map.tsx +0 -226
- package/src/components/trace-viewer/components/markers.tsx +0 -612
- package/src/components/trace-viewer/components/node.tsx +0 -505
- package/src/components/trace-viewer/components/search-input.tsx +0 -52
- package/src/components/trace-viewer/components/search.tsx +0 -47
- package/src/components/trace-viewer/components/span-content.tsx +0 -247
- package/src/components/trace-viewer/components/span-detail-panel.tsx +0 -655
- package/src/components/trace-viewer/components/span-segments.ts +0 -585
- package/src/components/trace-viewer/components/span-strategies.ts +0 -205
- package/src/components/trace-viewer/components/ui.tsx +0 -156
- package/src/components/trace-viewer/components/zoom-button.tsx +0 -61
- package/src/components/trace-viewer/components/zoom-icons.tsx +0 -65
- package/src/components/trace-viewer/index.tsx +0 -4
- package/src/components/trace-viewer/trace-viewer.module.css +0 -1465
- package/src/components/trace-viewer/util/constants.ts +0 -8
- package/src/components/trace-viewer/util/scrollbar-width.ts +0 -13
- package/src/components/trace-viewer/util/tree.ts +0 -277
- package/src/components/trace-viewer/util/use-immediate-style.ts +0 -38
- package/src/components/trace-viewer/util/use-streaming-spans.ts +0 -426
- package/src/components/trace-viewer/util/use-trackpad-zoom.tsx +0 -51
- package/src/components/trace-viewer/worker.ts +0 -131
- package/src/components/ui/inspector-theme.ts +0 -110
- package/src/components/workflow-trace-view.tsx +0 -1171
- package/src/components/workflow-traces/trace-colors.ts +0 -112
- /package/dist/components/{new-trace-viewer → trace-viewer}/components/copy-button.d.ts +0 -0
- /package/dist/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/copy-selection.d.ts +0 -0
- /package/dist/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/middle-truncate.d.ts +0 -0
- /package/dist/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/use-middle-truncate.d.ts +0 -0
- /package/dist/components/{new-trace-viewer → trace-viewer}/icons.d.ts +0 -0
- /package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/copy-selection.ts +0 -0
- /package/src/components/{new-trace-viewer → trace-viewer}/components/middle-truncate/use-middle-truncate.ts +0 -0
- /package/src/{components/trace-viewer/modules.d.ts → modules.d.ts} +0 -0
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import type { Span } from '../trace-viewer/types';
|
|
3
|
-
interface ActiveSpanContextValue {
|
|
4
|
-
activeSpanId: string | null;
|
|
5
|
-
activeSpan: Span | null;
|
|
6
|
-
setActiveSpan: (spanId: string) => void;
|
|
7
|
-
clearActiveSpan: () => void;
|
|
8
|
-
}
|
|
9
|
-
export declare function ActiveSpanProvider({ spans, children, }: {
|
|
10
|
-
spans: Span[];
|
|
11
|
-
children: ReactNode;
|
|
12
|
-
}): import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export declare const useActiveSpan: () => ActiveSpanContextValue;
|
|
14
|
-
export {};
|
|
15
|
-
//# sourceMappingURL=context.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
|
|
4
|
-
const ActiveSpanContext = createContext(null);
|
|
5
|
-
ActiveSpanContext.displayName = 'ActiveSpanContext';
|
|
6
|
-
export function ActiveSpanProvider({ spans, children, }) {
|
|
7
|
-
const [activeSpanId, setActiveSpanId] = useState(spans[0]?.spanId ?? null);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
setActiveSpanId((currentSpanId) => {
|
|
10
|
-
if (!currentSpanId) {
|
|
11
|
-
return null;
|
|
12
|
-
}
|
|
13
|
-
const hasCurrentSpan = spans.some((span) => span.spanId === currentSpanId);
|
|
14
|
-
if (hasCurrentSpan) {
|
|
15
|
-
return currentSpanId;
|
|
16
|
-
}
|
|
17
|
-
return null;
|
|
18
|
-
});
|
|
19
|
-
}, [spans]);
|
|
20
|
-
const activeSpan = useMemo(() => {
|
|
21
|
-
if (!activeSpanId) {
|
|
22
|
-
return null;
|
|
23
|
-
}
|
|
24
|
-
return spans.find((span) => span.spanId === activeSpanId) ?? null;
|
|
25
|
-
}, [activeSpanId, spans]);
|
|
26
|
-
const setActiveSpan = useCallback((spanId) => {
|
|
27
|
-
setActiveSpanId(spanId);
|
|
28
|
-
}, []);
|
|
29
|
-
const clearActiveSpan = useCallback(() => {
|
|
30
|
-
setActiveSpanId(null);
|
|
31
|
-
}, []);
|
|
32
|
-
const value = useMemo(() => ({
|
|
33
|
-
activeSpanId,
|
|
34
|
-
activeSpan,
|
|
35
|
-
setActiveSpan,
|
|
36
|
-
clearActiveSpan,
|
|
37
|
-
}), [activeSpanId, activeSpan, setActiveSpan, clearActiveSpan]);
|
|
38
|
-
return (_jsx(ActiveSpanContext.Provider, { value: value, children: children }));
|
|
39
|
-
}
|
|
40
|
-
export const useActiveSpan = () => {
|
|
41
|
-
const context = useContext(ActiveSpanContext);
|
|
42
|
-
if (!context) {
|
|
43
|
-
throw new Error('useActiveSpan must be used within ActiveSpanProvider');
|
|
44
|
-
}
|
|
45
|
-
return context;
|
|
46
|
-
};
|
|
47
|
-
//# sourceMappingURL=context.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ReactNode } from 'react';
|
|
2
|
-
import type { Span } from '../trace-viewer/types';
|
|
3
|
-
interface DetailPanelProps {
|
|
4
|
-
span: Span;
|
|
5
|
-
rootStart: number;
|
|
6
|
-
onClose: () => void;
|
|
7
|
-
}
|
|
8
|
-
export declare function DetailPanel({ span, rootStart, onClose, }: DetailPanelProps): ReactNode;
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=detail-panel.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { X } from 'lucide-react';
|
|
4
|
-
import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
|
|
5
|
-
import { getSpanDurationMs } from './utils';
|
|
6
|
-
export function DetailPanel({ span, rootStart, onClose, }) {
|
|
7
|
-
const startMs = getHighResInMs(span.startTime);
|
|
8
|
-
const durationMs = getSpanDurationMs(span);
|
|
9
|
-
const offsetMs = startMs - rootStart;
|
|
10
|
-
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' })] }) })] }));
|
|
11
|
-
}
|
|
12
|
-
//# sourceMappingURL=detail-panel.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/icons.tsx"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,+CAgBjB,CAAC;AAEF,QAAA,MAAM,WAAW,+CAkBhB,CAAC;AAEF,QAAA,MAAM,SAAS,+CAkBd,CAAC;AAEF,QAAA,MAAM,eAAe,+CAkBpB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
const WorkflowIcon = () => {
|
|
3
|
-
return (_jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", style: { color: 'currentColor' }, viewBox: "0 0 16 16", width: "16", children: _jsx("path", { d: "M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z", fill: "currentColor" }) }));
|
|
4
|
-
};
|
|
5
|
-
const WebhookIcon = () => {
|
|
6
|
-
return (_jsx("svg", { "data-testid": "geist-icon", height: "16", "stroke-linejoin": "round", viewBox: "0 0 16 16", width: "16", style: { color: 'currentColor' }, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z", fill: "currentColor" }) }));
|
|
7
|
-
};
|
|
8
|
-
const SleepIcon = () => {
|
|
9
|
-
return (_jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: 'currentColor' }, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z", fill: "currentColor" }) }));
|
|
10
|
-
};
|
|
11
|
-
const StepForwardIcon = () => {
|
|
12
|
-
return (_jsx("svg", { "data-testid": "geist-icon", height: "16", strokeLinejoin: "round", viewBox: "0 0 16 16", width: "16", style: { color: 'currentColor' }, children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z", fill: "currentColor" }) }));
|
|
13
|
-
};
|
|
14
|
-
export { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };
|
|
15
|
-
//# sourceMappingURL=icons.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"icons.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/icons.tsx"],"names":[],"mappings":";AAAA,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,CACL,6BACc,YAAY,EACxB,MAAM,EAAC,IAAI,qBACK,OAAO,EACvB,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,EAChC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,YAEV,eACE,CAAC,EAAC,skCAAskC,EACxkC,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,GAAG,EAAE;IACvB,OAAO,CACL,6BACc,YAAY,EACxB,MAAM,EAAC,IAAI,qBACK,OAAO,EACvB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,YAEhC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,06CAA06C,EAC56C,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,6BACc,YAAY,EACxB,MAAM,EAAC,IAAI,EACX,cAAc,EAAC,OAAO,EACtB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,YAEhC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,kmBAAkmB,EACpmB,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,OAAO,CACL,6BACc,YAAY,EACxB,MAAM,EAAC,IAAI,EACX,cAAc,EAAC,OAAO,EACtB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,KAAK,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,YAEhC,eACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,0bAA0b,EAC5b,IAAI,EAAC,cAAc,GACb,GACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC","sourcesContent":["const WorkflowIcon = () => {\n return (\n <svg\n data-testid=\"geist-icon\"\n height=\"16\"\n stroke-linejoin=\"round\"\n style={{ color: 'currentColor' }}\n viewBox=\"0 0 16 16\"\n width=\"16\"\n >\n <path\n d=\"M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n );\n};\n\nconst WebhookIcon = () => {\n return (\n <svg\n data-testid=\"geist-icon\"\n height=\"16\"\n stroke-linejoin=\"round\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n style={{ color: 'currentColor' }}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n );\n};\n\nconst SleepIcon = () => {\n return (\n <svg\n data-testid=\"geist-icon\"\n height=\"16\"\n strokeLinejoin=\"round\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n style={{ color: 'currentColor' }}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n );\n};\n\nconst StepForwardIcon = () => {\n return (\n <svg\n data-testid=\"geist-icon\"\n height=\"16\"\n strokeLinejoin=\"round\"\n viewBox=\"0 0 16 16\"\n width=\"16\"\n style={{ color: 'currentColor' }}\n >\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z\"\n fill=\"currentColor\"\n ></path>\n </svg>\n );\n};\n\nexport { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };\n"]}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import type { Trace } from '../trace-viewer/types';
|
|
3
|
-
interface NewTraceViewerProps {
|
|
4
|
-
trace: Trace;
|
|
5
|
-
}
|
|
6
|
-
export declare function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode;
|
|
7
|
-
export {};
|
|
8
|
-
//# sourceMappingURL=trace-viewer.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
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"}
|
|
@@ -1,349 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';
|
|
4
|
-
import { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';
|
|
5
|
-
import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
6
|
-
import { ErrorBoundary } from '../error-boundary';
|
|
7
|
-
import { EntityDetailPanel, } from '../sidebar/entity-detail-panel';
|
|
8
|
-
import { useSidebarDataOptional } from '../sidebar/sidebar-data-context';
|
|
9
|
-
import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
|
|
10
|
-
import { CopyButton } from './components/copy-button';
|
|
11
|
-
import EventList from './components/event-list';
|
|
12
|
-
import { SplitPane } from './components/split-pane';
|
|
13
|
-
import { Timeline, TimelineHeader, TIMELINE_PADDING_PX, } from './components/timeline';
|
|
14
|
-
import { ActiveSpanProvider, useActiveSpan } from './context';
|
|
15
|
-
import { DetailPanel } from './detail-panel';
|
|
16
|
-
import { computeRootBounds, computeTimeMarkers } from './utils';
|
|
17
|
-
const MIN_VIEWPORT_MS = 0.001;
|
|
18
|
-
function useAnimatedViewport(initial) {
|
|
19
|
-
const [viewport, setViewportState] = useState(initial);
|
|
20
|
-
const animRef = useRef(null);
|
|
21
|
-
const currentRef = useRef(initial);
|
|
22
|
-
currentRef.current = viewport;
|
|
23
|
-
const cancel = useCallback(() => {
|
|
24
|
-
if (animRef.current) {
|
|
25
|
-
cancelAnimationFrame(animRef.current.raf);
|
|
26
|
-
animRef.current = null;
|
|
27
|
-
}
|
|
28
|
-
}, []);
|
|
29
|
-
const animateTo = useCallback((target) => {
|
|
30
|
-
cancel();
|
|
31
|
-
const from = currentRef.current;
|
|
32
|
-
const anim = { raf: 0, from, to: target, start: performance.now() };
|
|
33
|
-
const tick = () => {
|
|
34
|
-
const t = Math.min((performance.now() - anim.start) / 150, 1);
|
|
35
|
-
const e = 1 - (1 - t) * (1 - t);
|
|
36
|
-
setViewportState({
|
|
37
|
-
start: anim.from.start + (anim.to.start - anim.from.start) * e,
|
|
38
|
-
end: anim.from.end + (anim.to.end - anim.from.end) * e,
|
|
39
|
-
});
|
|
40
|
-
if (t < 1)
|
|
41
|
-
anim.raf = requestAnimationFrame(tick);
|
|
42
|
-
else
|
|
43
|
-
animRef.current = null;
|
|
44
|
-
};
|
|
45
|
-
animRef.current = anim;
|
|
46
|
-
anim.raf = requestAnimationFrame(tick);
|
|
47
|
-
}, [cancel]);
|
|
48
|
-
const setViewport = useCallback((update) => {
|
|
49
|
-
cancel();
|
|
50
|
-
if (typeof update === 'function') {
|
|
51
|
-
setViewportState((prev) => {
|
|
52
|
-
const next = update(prev);
|
|
53
|
-
currentRef.current = next;
|
|
54
|
-
return next;
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
currentRef.current = update;
|
|
59
|
-
setViewportState(update);
|
|
60
|
-
}
|
|
61
|
-
}, [cancel]);
|
|
62
|
-
useEffect(() => cancel, [cancel]);
|
|
63
|
-
return { viewport, setViewport, animateTo };
|
|
64
|
-
}
|
|
65
|
-
// ---------------------------------------------------------------------------
|
|
66
|
-
// Hook: bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo
|
|
67
|
-
// ---------------------------------------------------------------------------
|
|
68
|
-
function useSelectedSpanInfo() {
|
|
69
|
-
const { activeSpan } = useActiveSpan();
|
|
70
|
-
const sidebar = useSidebarDataOptional();
|
|
71
|
-
return useMemo(() => {
|
|
72
|
-
if (!activeSpan || !sidebar)
|
|
73
|
-
return null;
|
|
74
|
-
const correlationId = activeSpan.spanId;
|
|
75
|
-
const rawEvents = correlationId
|
|
76
|
-
? sidebar.events.filter((e) => e.correlationId === correlationId)
|
|
77
|
-
: [];
|
|
78
|
-
return {
|
|
79
|
-
data: activeSpan.attributes?.data,
|
|
80
|
-
resource: activeSpan.attributes?.resource,
|
|
81
|
-
spanId: activeSpan.spanId,
|
|
82
|
-
rawEvents,
|
|
83
|
-
};
|
|
84
|
-
}, [activeSpan, sidebar?.events]);
|
|
85
|
-
}
|
|
86
|
-
// ---------------------------------------------------------------------------
|
|
87
|
-
// Root component
|
|
88
|
-
// ---------------------------------------------------------------------------
|
|
89
|
-
export function NewTraceViewer({ trace }) {
|
|
90
|
-
return (_jsx(ActiveSpanProvider, { spans: trace.spans, children: _jsx(NewTraceViewerContent, { trace: trace }) }));
|
|
91
|
-
}
|
|
92
|
-
function NewTraceViewerContent({ trace }) {
|
|
93
|
-
const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } = useActiveSpan();
|
|
94
|
-
const sidebar = useSidebarDataOptional();
|
|
95
|
-
const selectedSpan = useSelectedSpanInfo();
|
|
96
|
-
const [searchQuery, setSearchQuery] = useState('');
|
|
97
|
-
const filteredSpans = useMemo(() => {
|
|
98
|
-
const q = searchQuery.trim().toLowerCase();
|
|
99
|
-
if (!q)
|
|
100
|
-
return trace.spans;
|
|
101
|
-
return trace.spans.filter((s) => s.name.toLowerCase().includes(q) || s.resource.toLowerCase().includes(q));
|
|
102
|
-
}, [trace.spans, searchQuery]);
|
|
103
|
-
const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);
|
|
104
|
-
const { viewport, setViewport, animateTo } = useAnimatedViewport({
|
|
105
|
-
start: root.startTime,
|
|
106
|
-
end: root.startTime + root.duration,
|
|
107
|
-
});
|
|
108
|
-
const prevRootRef = useRef({
|
|
109
|
-
start: root.startTime,
|
|
110
|
-
end: root.startTime + root.duration,
|
|
111
|
-
});
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
const prevRoot = prevRootRef.current;
|
|
114
|
-
const newStart = root.startTime;
|
|
115
|
-
const newEnd = root.startTime + root.duration;
|
|
116
|
-
setViewport((prev) => {
|
|
117
|
-
const wasAtFullExtent = Math.abs(prev.start - prevRoot.start) < 0.01 &&
|
|
118
|
-
Math.abs(prev.end - prevRoot.end) < 0.01;
|
|
119
|
-
if (wasAtFullExtent) {
|
|
120
|
-
return { start: newStart, end: newEnd };
|
|
121
|
-
}
|
|
122
|
-
return prev;
|
|
123
|
-
});
|
|
124
|
-
prevRootRef.current = { start: newStart, end: newEnd };
|
|
125
|
-
}, [root.startTime, root.duration]);
|
|
126
|
-
const viewDuration = viewport.end - viewport.start;
|
|
127
|
-
const timeMarkers = useMemo(() => computeTimeMarkers(viewDuration, viewport.start - root.startTime), [viewDuration, viewport.start, root.startTime]);
|
|
128
|
-
const resetZoom = useCallback(() => {
|
|
129
|
-
animateTo({ start: root.startTime, end: root.startTime + root.duration });
|
|
130
|
-
}, [animateTo, root.startTime, root.duration]);
|
|
131
|
-
const ZOOM_FACTOR = 0.5;
|
|
132
|
-
const zoomBy = useCallback((factor) => {
|
|
133
|
-
const rootS = root.startTime;
|
|
134
|
-
const rootE = root.startTime + root.duration;
|
|
135
|
-
const rootD = root.duration;
|
|
136
|
-
setViewport((prev) => {
|
|
137
|
-
const prevDuration = prev.end - prev.start;
|
|
138
|
-
const center = (prev.start + prev.end) / 2;
|
|
139
|
-
const newDuration = Math.max(MIN_VIEWPORT_MS, Math.min(rootD, prevDuration * factor));
|
|
140
|
-
let newStart = center - newDuration / 2;
|
|
141
|
-
let newEnd = center + newDuration / 2;
|
|
142
|
-
if (newStart < rootS) {
|
|
143
|
-
newStart = rootS;
|
|
144
|
-
newEnd = rootS + newDuration;
|
|
145
|
-
}
|
|
146
|
-
if (newEnd > rootE) {
|
|
147
|
-
newEnd = rootE;
|
|
148
|
-
newStart = Math.max(rootS, rootE - newDuration);
|
|
149
|
-
}
|
|
150
|
-
return { start: newStart, end: newEnd };
|
|
151
|
-
});
|
|
152
|
-
}, [setViewport, root.startTime, root.duration]);
|
|
153
|
-
const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);
|
|
154
|
-
const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);
|
|
155
|
-
const handleSelectSpan = useCallback((spanId) => {
|
|
156
|
-
if (spanId === activeSpanId) {
|
|
157
|
-
clearActiveSpan();
|
|
158
|
-
return;
|
|
159
|
-
}
|
|
160
|
-
setActiveSpan(spanId);
|
|
161
|
-
const span = trace.spans.find((s) => s.spanId === spanId);
|
|
162
|
-
if (!span)
|
|
163
|
-
return;
|
|
164
|
-
const spanStart = getHighResInMs(span.startTime);
|
|
165
|
-
const spanEnd = getHighResInMs(span.endTime);
|
|
166
|
-
const spanDuration = spanEnd - spanStart;
|
|
167
|
-
const rootS = root.startTime;
|
|
168
|
-
const rootE = root.startTime + root.duration;
|
|
169
|
-
const rootD = root.duration;
|
|
170
|
-
if (spanDuration > rootD * 0.8) {
|
|
171
|
-
animateTo({ start: rootS, end: rootE });
|
|
172
|
-
return;
|
|
173
|
-
}
|
|
174
|
-
const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);
|
|
175
|
-
let newStart = spanStart - padding;
|
|
176
|
-
let newEnd = spanEnd + padding;
|
|
177
|
-
if (newEnd - newStart < MIN_VIEWPORT_MS) {
|
|
178
|
-
const center = (spanStart + spanEnd) / 2;
|
|
179
|
-
newStart = center - MIN_VIEWPORT_MS / 2;
|
|
180
|
-
newEnd = center + MIN_VIEWPORT_MS / 2;
|
|
181
|
-
}
|
|
182
|
-
if (newStart < rootS) {
|
|
183
|
-
const duration = newEnd - newStart;
|
|
184
|
-
newStart = rootS;
|
|
185
|
-
newEnd = Math.min(rootE, rootS + duration);
|
|
186
|
-
}
|
|
187
|
-
if (newEnd > rootE) {
|
|
188
|
-
const duration = newEnd - newStart;
|
|
189
|
-
newEnd = rootE;
|
|
190
|
-
newStart = Math.max(rootS, rootE - duration);
|
|
191
|
-
}
|
|
192
|
-
animateTo({ start: newStart, end: newEnd });
|
|
193
|
-
}, [
|
|
194
|
-
animateTo,
|
|
195
|
-
setActiveSpan,
|
|
196
|
-
clearActiveSpan,
|
|
197
|
-
activeSpanId,
|
|
198
|
-
trace.spans,
|
|
199
|
-
root.startTime,
|
|
200
|
-
root.duration,
|
|
201
|
-
]);
|
|
202
|
-
const [altHeld, setAltHeld] = useState(false);
|
|
203
|
-
useEffect(() => {
|
|
204
|
-
const onKeyDown = (e) => {
|
|
205
|
-
if (e.key === 'Escape') {
|
|
206
|
-
clearActiveSpan();
|
|
207
|
-
}
|
|
208
|
-
if (e.key === 'Alt') {
|
|
209
|
-
e.preventDefault();
|
|
210
|
-
setAltHeld(true);
|
|
211
|
-
}
|
|
212
|
-
};
|
|
213
|
-
const onKeyUp = (e) => {
|
|
214
|
-
if (e.key === 'Alt')
|
|
215
|
-
setAltHeld(false);
|
|
216
|
-
};
|
|
217
|
-
const onBlur = () => setAltHeld(false);
|
|
218
|
-
window.addEventListener('keydown', onKeyDown);
|
|
219
|
-
window.addEventListener('keyup', onKeyUp);
|
|
220
|
-
window.addEventListener('blur', onBlur);
|
|
221
|
-
return () => {
|
|
222
|
-
window.removeEventListener('keydown', onKeyDown);
|
|
223
|
-
window.removeEventListener('keyup', onKeyUp);
|
|
224
|
-
window.removeEventListener('blur', onBlur);
|
|
225
|
-
};
|
|
226
|
-
}, [clearActiveSpan]);
|
|
227
|
-
const timelineRef = useRef(null);
|
|
228
|
-
const [hoverFraction, setHoverFraction] = useState(null);
|
|
229
|
-
const hoverInfo = useMemo(() => {
|
|
230
|
-
if (hoverFraction == null)
|
|
231
|
-
return null;
|
|
232
|
-
const absTime = viewport.start + hoverFraction * viewDuration;
|
|
233
|
-
const offset = absTime - root.startTime;
|
|
234
|
-
return { fraction: hoverFraction, label: formatDuration(offset, true) };
|
|
235
|
-
}, [hoverFraction, viewport.start, viewDuration, root.startTime]);
|
|
236
|
-
const handleTimelineMouseMove = useCallback((e) => {
|
|
237
|
-
const el = timelineRef.current;
|
|
238
|
-
if (!el)
|
|
239
|
-
return;
|
|
240
|
-
const rect = el.getBoundingClientRect();
|
|
241
|
-
const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
|
|
242
|
-
if (contentWidth <= 0)
|
|
243
|
-
return;
|
|
244
|
-
const fraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
|
|
245
|
-
setHoverFraction(fraction);
|
|
246
|
-
}, []);
|
|
247
|
-
const handleTimelineMouseLeave = useCallback(() => {
|
|
248
|
-
setHoverFraction(null);
|
|
249
|
-
}, []);
|
|
250
|
-
useEffect(() => {
|
|
251
|
-
const el = timelineRef.current;
|
|
252
|
-
if (!el)
|
|
253
|
-
return;
|
|
254
|
-
const rootS = root.startTime;
|
|
255
|
-
const rootE = root.startTime + root.duration;
|
|
256
|
-
const rootD = root.duration;
|
|
257
|
-
if (rootD <= 0)
|
|
258
|
-
return;
|
|
259
|
-
const onWheel = (e) => {
|
|
260
|
-
const isZoomGesture = e.ctrlKey || e.metaKey;
|
|
261
|
-
const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
|
|
262
|
-
if (!isZoomGesture && !hasDeltaX)
|
|
263
|
-
return;
|
|
264
|
-
e.preventDefault();
|
|
265
|
-
const rect = el.getBoundingClientRect();
|
|
266
|
-
const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;
|
|
267
|
-
if (contentWidth <= 0)
|
|
268
|
-
return;
|
|
269
|
-
if (isZoomGesture) {
|
|
270
|
-
let dy = e.deltaY;
|
|
271
|
-
if (e.deltaMode === 1)
|
|
272
|
-
dy *= 16;
|
|
273
|
-
const cursorFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth));
|
|
274
|
-
const scaleFactor = Math.pow(2, dy / 200);
|
|
275
|
-
setViewport((prev) => {
|
|
276
|
-
const prevDuration = prev.end - prev.start;
|
|
277
|
-
const cursorTime = prev.start + cursorFraction * prevDuration;
|
|
278
|
-
const newDuration = Math.max(MIN_VIEWPORT_MS, Math.min(rootD, prevDuration * scaleFactor));
|
|
279
|
-
let newStart = cursorTime - cursorFraction * newDuration;
|
|
280
|
-
let newEnd = newStart + newDuration;
|
|
281
|
-
if (newStart < rootS) {
|
|
282
|
-
newStart = rootS;
|
|
283
|
-
newEnd = rootS + newDuration;
|
|
284
|
-
}
|
|
285
|
-
if (newEnd > rootE) {
|
|
286
|
-
newEnd = rootE;
|
|
287
|
-
newStart = Math.max(rootS, rootE - newDuration);
|
|
288
|
-
}
|
|
289
|
-
return { start: newStart, end: newEnd };
|
|
290
|
-
});
|
|
291
|
-
}
|
|
292
|
-
else {
|
|
293
|
-
let dx = e.deltaX;
|
|
294
|
-
if (e.deltaMode === 1)
|
|
295
|
-
dx *= 16;
|
|
296
|
-
setViewport((prev) => {
|
|
297
|
-
const prevDuration = prev.end - prev.start;
|
|
298
|
-
const panAmount = (dx / contentWidth) * prevDuration;
|
|
299
|
-
let newStart = prev.start + panAmount;
|
|
300
|
-
let newEnd = prev.end + panAmount;
|
|
301
|
-
if (newStart < rootS) {
|
|
302
|
-
newStart = rootS;
|
|
303
|
-
newEnd = rootS + prevDuration;
|
|
304
|
-
}
|
|
305
|
-
if (newEnd > rootE) {
|
|
306
|
-
newEnd = rootE;
|
|
307
|
-
newStart = Math.max(rootS, rootE - prevDuration);
|
|
308
|
-
}
|
|
309
|
-
return { start: newStart, end: newEnd };
|
|
310
|
-
});
|
|
311
|
-
}
|
|
312
|
-
};
|
|
313
|
-
el.addEventListener('wheel', onWheel, { passive: false });
|
|
314
|
-
return () => el.removeEventListener('wheel', onWheel);
|
|
315
|
-
}, [root.startTime, root.duration]);
|
|
316
|
-
// Derive the selected span name and metadata for the panel header
|
|
317
|
-
const selectedSpanName = useMemo(() => {
|
|
318
|
-
if (!selectedSpan?.data)
|
|
319
|
-
return 'Details';
|
|
320
|
-
const data = selectedSpan.data;
|
|
321
|
-
const stepName = data.stepName;
|
|
322
|
-
const workflowName = data.workflowName;
|
|
323
|
-
return ((stepName ? parseStepName(stepName)?.shortName : undefined) ??
|
|
324
|
-
(workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??
|
|
325
|
-
stepName ??
|
|
326
|
-
workflowName ??
|
|
327
|
-
data.hookId ??
|
|
328
|
-
'Details');
|
|
329
|
-
}, [selectedSpan?.data]);
|
|
330
|
-
const selectedResource = selectedSpan?.resource;
|
|
331
|
-
const selectedResourceId = useMemo(() => {
|
|
332
|
-
if (!selectedSpan?.data)
|
|
333
|
-
return undefined;
|
|
334
|
-
const data = selectedSpan.data;
|
|
335
|
-
return (data.stepId ??
|
|
336
|
-
data.runId ??
|
|
337
|
-
data.hookId ??
|
|
338
|
-
selectedSpan.spanId);
|
|
339
|
-
}, [selectedSpan?.data, selectedSpan?.spanId]);
|
|
340
|
-
return (_jsxs("div", { "data-pane": 'pane-root', "data-has-detail": activeSpan ? '' : undefined, className: 'grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]', children: [_jsxs("div", { id: 'trace-parent', className: 'grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100', children: [_jsxs(SplitPane, { startHeader: _jsxs("div", { className: 'bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5', children: [_jsx(Search, { className: 'w-3.5 h-3.5 shrink-0 text-gray-800' }), _jsx("input", { id: 'trace-viewer-search', name: 'trace-viewer-search', type: 'text', value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: 'Search spans...', "aria-label": 'Search spans', className: 'flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none' }), searchQuery && (_jsx("button", { type: 'button', onClick: () => setSearchQuery(''), className: 'shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors', children: _jsx(X, { className: 'w-3 h-3' }) }))] }), endHeader: _jsx(TimelineHeader, { markers: timeMarkers, hoverInfo: hoverInfo }), children: [_jsx("div", { className: 'block overflow-visible', children: _jsx(EventList, { spans: filteredSpans, activeSpanId: activeSpanId, onSelectSpan: handleSelectSpan }) }), _jsx("div", { ref: timelineRef, className: 'block min-h-0 overflow-visible relative', onDoubleClick: resetZoom, onMouseMove: handleTimelineMouseMove, onMouseLeave: handleTimelineMouseLeave, children: _jsx(Timeline, { spans: filteredSpans, viewStart: viewport.start, viewEnd: viewport.end, markers: timeMarkers, selectedId: activeSpanId, onSelect: handleSelectSpan, hoverFraction: hoverFraction, altHeld: altHeld }) })] }), _jsxs("div", { className: 'absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400', children: [_jsx("button", { type: 'button', className: 'flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100', onClick: zoomOut, "aria-label": 'Zoom out', children: _jsx(ZoomOut, { className: 'w-4 h-4' }) }), _jsx("button", { type: 'button', className: 'flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100', onClick: resetZoom, "aria-label": 'Reset zoom', children: _jsx(RotateCcw, { className: 'w-3.5 h-3.5' }) }), _jsx("button", { type: 'button', className: 'flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100', onClick: zoomIn, "aria-label": 'Zoom in', children: _jsx(ZoomIn, { className: 'w-4 h-4' }) })] })] }), activeSpan && sidebar ? (_jsxs("aside", { className: 'flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto', children: [_jsx("div", { className: 'flex-shrink-0 px-4 pt-4 pb-3', children: _jsxs("div", { className: 'flex items-start justify-between gap-2', children: [_jsxs("div", { className: 'min-w-0 flex-1', children: [_jsx("span", { className: 'text-[15px] font-semibold text-gray-1000 truncate block', children: selectedSpanName }), selectedResourceId && (_jsxs("div", { className: 'mt-1 flex items-center gap-2', children: [selectedResource && (_jsx("span", { className: `inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${selectedResource === 'step'
|
|
341
|
-
? 'bg-green-200 text-green-900'
|
|
342
|
-
: selectedResource === 'run'
|
|
343
|
-
? 'bg-blue-200 text-blue-900'
|
|
344
|
-
: selectedResource === 'hook'
|
|
345
|
-
? 'bg-yellow-200 text-yellow-900'
|
|
346
|
-
: 'bg-gray-200 text-gray-900'}`, children: selectedResource.charAt(0).toUpperCase() +
|
|
347
|
-
selectedResource.slice(1) })), _jsxs("div", { className: 'flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0', title: selectedResourceId, children: [_jsx("span", { className: 'truncate', children: selectedResourceId }), _jsx(CopyButton, { copyText: selectedResourceId, ariaLabel: 'Copy ID', className: 'shrink-0' })] })] }))] }), _jsx("button", { type: 'button', className: 'p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors shrink-0', onClick: clearActiveSpan, children: _jsx(X, { className: 'w-4 h-4' }) })] }) }), _jsx("div", { className: 'flex-1 overflow-y-auto', children: _jsx(ErrorBoundary, { children: _jsx(EntityDetailPanel, { run: sidebar.run, onStreamClick: sidebar.onStreamClick, onRunClick: sidebar.onRunClick, spanDetailData: sidebar.spanDetailData, spanDetailError: sidebar.spanDetailError, spanDetailLoading: sidebar.spanDetailLoading, onSpanSelect: sidebar.onSpanSelect, onWakeUpSleep: sidebar.onWakeUpSleep, onLoadEventData: sidebar.onLoadEventData, onResolveHook: sidebar.onResolveHook, encryptionKey: sidebar.encryptionKey, onDecrypt: sidebar.onDecrypt, isDecrypting: sidebar.isDecrypting, selectedSpan: selectedSpan }) }) })] })) : activeSpan ? (_jsx(DetailPanel, { span: activeSpan, rootStart: root.startTime, onClose: clearActiveSpan })) : null] }));
|
|
348
|
-
}
|
|
349
|
-
//# sourceMappingURL=trace-viewer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"trace-viewer.js","sourceRoot":"","sources":["../../../src/components/new-trace-viewer/trace-viewer.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAEL,WAAW,EACX,SAAS,EACT,OAAO,EACP,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EACL,iBAAiB,GAElB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,SAAS,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EACL,QAAQ,EACR,cAAc,EACd,mBAAmB,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAMhE,MAAM,eAAe,GAAG,KAAK,CAAC;AAO9B,SAAS,mBAAmB,CAAC,OAAiB;IAC5C,MAAM,CAAC,QAAQ,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAW,OAAO,CAAC,CAAC;IACjE,MAAM,OAAO,GAAG,MAAM,CAKZ,IAAI,CAAC,CAAC;IAChB,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,QAAQ,CAAC;IAE9B,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,IAAI,OAAO,CAAC,OAAO,EAAE,CAAC;YACpB,oBAAoB,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YAC1C,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,MAAgB,EAAE,EAAE;QACnB,MAAM,EAAE,CAAC;QACT,MAAM,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;QAChC,MAAM,IAAI,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,EAAE,EAAE,CAAC;QAEpE,MAAM,IAAI,GAAG,GAAG,EAAE;YAChB,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;YAC9D,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;YAChC,gBAAgB,CAAC;gBACf,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;gBAC9D,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;aACvD,CAAC,CAAC;YACH,IAAI,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;;gBAC7C,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QAC9B,CAAC,CAAC;QAEF,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,GAAG,GAAG,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,MAAiD,EAAE,EAAE;QACpD,MAAM,EAAE,CAAC;QACT,IAAI,OAAO,MAAM,KAAK,UAAU,EAAE,CAAC;YACjC,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE;gBACxB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBAC1B,UAAU,CAAC,OAAO,GAAG,IAAI,CAAC;gBAC1B,OAAO,IAAI,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,OAAO,GAAG,MAAM,CAAC;YAC5B,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAElC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;AAC9C,CAAC;AAED,8EAA8E;AAC9E,yEAAyE;AACzE,8EAA8E;AAE9E,SAAS,mBAAmB;IAC1B,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE,CAAC;IACvC,MAAM,OAAO,GAAG,sBAAsB,EAAE,CAAC;IAEzC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAEzC,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC;QACxC,MAAM,SAAS,GAAG,aAAa;YAC7B,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAa,KAAK,aAAa,CAAC;YACjE,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO;YACL,IAAI,EAAE,UAAU,CAAC,UAAU,EAAE,IAAI;YACjC,QAAQ,EAAE,UAAU,CAAC,UAAU,EAAE,QAA8B;YAC/D,MAAM,EAAE,UAAU,CAAC,MAAM;YACzB,SAAS;SACV,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,8EAA8E;AAC9E,iBAAiB;AACjB,8EAA8E;AAE9E,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAuB;IAC3D,OAAO,CACL,KAAC,kBAAkB,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,YACpC,KAAC,qBAAqB,IAAC,KAAK,EAAE,KAAK,GAAI,GACpB,CACtB,CAAC;AACJ,CAAC;AAED,SAAS,qBAAqB,CAAC,EAAE,KAAK,EAAuB;IAC3D,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,GAChE,aAAa,EAAE,CAAC;IAElB,MAAM,OAAO,GAAG,sBAAsB,EAAE,CAAC;IACzC,MAAM,YAAY,GAAG,mBAAmB,EAAE,CAAC;IAE3C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,MAAM,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAC3C,IAAI,CAAC,CAAC;YAAE,OAAO,KAAK,CAAC,KAAK,CAAC;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,CACvB,CAAC,CAAC,EAAE,EAAE,CACJ,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAC3E,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAE1E,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,mBAAmB,CAAC;QAC/D,KAAK,EAAE,IAAI,CAAC,SAAS;QACrB,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,MAAM,CAAW;QACnC,KAAK,EAAE,IAAI,CAAC,SAAS;QACrB,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;QACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,MAAM,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE9C,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,MAAM,eAAe,GACnB,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,IAAI;gBAC5C,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;YAE3C,IAAI,eAAe,EAAE,CAAC;gBACpB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;YAC1C,CAAC;YACD,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;IACzD,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEpC,MAAM,YAAY,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC;IAEnD,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,kBAAkB,CAAC,YAAY,EAAE,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,EACvE,CAAC,YAAY,EAAE,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAC/C,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC5E,CAAC,EAAE,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAE/C,MAAM,WAAW,GAAG,GAAG,CAAC;IAExB,MAAM,MAAM,GAAG,WAAW,CACxB,CAAC,MAAc,EAAE,EAAE;QACjB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE5B,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YACnB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;YAC3C,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,eAAe,EACf,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,CACvC,CAAC;YACF,IAAI,QAAQ,GAAG,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC;YACxC,IAAI,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,CAAC,CAAC;YAEtC,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;gBACrB,QAAQ,GAAG,KAAK,CAAC;gBACjB,MAAM,GAAG,KAAK,GAAG,WAAW,CAAC;YAC/B,CAAC;YACD,IAAI,MAAM,GAAG,KAAK,EAAE,CAAC;gBACnB,MAAM,GAAG,KAAK,CAAC;gBACf,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC;YAClD,CAAC;YAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAC7C,CAAC;IAEF,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,CAAC,GAAG,WAAW,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAErE,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,MAAc,EAAE,EAAE;QACjB,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;YAC5B,eAAe,EAAE,CAAC;YAClB,OAAO;QACT,CAAC;QACD,aAAa,CAAC,MAAM,CAAC,CAAC;QAEtB,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;QAC1D,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;QAEzC,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE5B,IAAI,YAAY,GAAG,KAAK,GAAG,GAAG,EAAE,CAAC;YAC/B,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,YAAY,GAAG,GAAG,EAAE,eAAe,GAAG,CAAC,CAAC,CAAC;QAClE,IAAI,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;QACnC,IAAI,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;QAE/B,IAAI,MAAM,GAAG,QAAQ,GAAG,eAAe,EAAE,CAAC;YACxC,MAAM,MAAM,GAAG,CAAC,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;YACzC,QAAQ,GAAG,MAAM,GAAG,eAAe,GAAG,CAAC,CAAC;YACxC,MAAM,GAAG,MAAM,GAAG,eAAe,GAAG,CAAC,CAAC;QACxC,CAAC;QAED,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;YACrB,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;YACnC,QAAQ,GAAG,KAAK,CAAC;YACjB,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;QAC7C,CAAC;QACD,IAAI,MAAM,GAAG,KAAK,EAAE,CAAC;YACnB,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;YACnC,MAAM,GAAG,KAAK,CAAC;YACf,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;QAC/C,CAAC;QAED,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC;IAC9C,CAAC,EACD;QACE,SAAS;QACT,aAAa;QACb,eAAe;QACf,YAAY;QACZ,KAAK,CAAC,KAAK;QACX,IAAI,CAAC,SAAS;QACd,IAAI,CAAC,QAAQ;KACd,CACF,CAAC;IAEF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,CAAgB,EAAQ,EAAE;YAC3C,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBACvB,eAAe,EAAE,CAAC;YACpB,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;gBACpB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,UAAU,CAAC,IAAI,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QACF,MAAM,OAAO,GAAG,CAAC,CAAgB,EAAQ,EAAE;YACzC,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK;gBAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC,CAAC;QACF,MAAM,MAAM,GAAG,GAAS,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAE7C,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAC9C,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1C,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACxC,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACjD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC7C,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAExE,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,IAAI,aAAa,IAAI,IAAI;YAAE,OAAO,IAAI,CAAC;QACvC,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,GAAG,aAAa,GAAG,YAAY,CAAC;QAC9D,MAAM,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC;QACxC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,CAAC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC;IAC1E,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IAElE,MAAM,uBAAuB,GAAG,WAAW,CACzC,CAAC,CAAmC,EAAE,EAAE;QACtC,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;QACxC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,mBAAmB,GAAG,CAAC,CAAC;QAC1D,IAAI,YAAY,IAAI,CAAC;YAAE,OAAO;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,CAAC,EACD,IAAI,CAAC,GAAG,CACN,CAAC,EACD,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,mBAAmB,CAAC,GAAG,YAAY,CAC7D,CACF,CAAC;QACF,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC7B,CAAC,EACD,EAAE,CACH,CAAC;IAEF,MAAM,wBAAwB,GAAG,WAAW,CAAC,GAAG,EAAE;QAChD,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,EAAE;YAAE,OAAO;QAEhB,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;QAC7B,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC7C,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC5B,IAAI,KAAK,IAAI,CAAC;YAAE,OAAO;QAEvB,MAAM,OAAO,GAAG,CAAC,CAAa,EAAQ,EAAE;YACtC,MAAM,aAAa,GAAG,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,OAAO,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YAE1D,IAAI,CAAC,aAAa,IAAI,CAAC,SAAS;gBAAE,OAAO;YACzC,CAAC,CAAC,cAAc,EAAE,CAAC;YAEnB,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC;YACxC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,GAAG,mBAAmB,GAAG,CAAC,CAAC;YAC1D,IAAI,YAAY,IAAI,CAAC;gBAAE,OAAO;YAE9B,IAAI,aAAa,EAAE,CAAC;gBAClB,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClB,IAAI,CAAC,CAAC,SAAS,KAAK,CAAC;oBAAE,EAAE,IAAI,EAAE,CAAC;gBAEhC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAC7B,CAAC,EACD,IAAI,CAAC,GAAG,CACN,CAAC,EACD,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,GAAG,mBAAmB,CAAC,GAAG,YAAY,CAC7D,CACF,CAAC;gBACF,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,GAAG,GAAG,CAAC,CAAC;gBAE1C,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;oBACnB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;oBAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,cAAc,GAAG,YAAY,CAAC;oBAC9D,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAC1B,eAAe,EACf,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,YAAY,GAAG,WAAW,CAAC,CAC5C,CAAC;oBAEF,IAAI,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,WAAW,CAAC;oBACzD,IAAI,MAAM,GAAG,QAAQ,GAAG,WAAW,CAAC;oBAEpC,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;wBACrB,QAAQ,GAAG,KAAK,CAAC;wBACjB,MAAM,GAAG,KAAK,GAAG,WAAW,CAAC;oBAC/B,CAAC;oBACD,IAAI,MAAM,GAAG,KAAK,EAAE,CAAC;wBACnB,MAAM,GAAG,KAAK,CAAC;wBACf,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,WAAW,CAAC,CAAC;oBAClD,CAAC;oBAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;gBAC1C,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClB,IAAI,CAAC,CAAC,SAAS,KAAK,CAAC;oBAAE,EAAE,IAAI,EAAE,CAAC;gBAEhC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;oBACnB,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC;oBAC3C,MAAM,SAAS,GAAG,CAAC,EAAE,GAAG,YAAY,CAAC,GAAG,YAAY,CAAC;oBAErD,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;oBACtC,IAAI,MAAM,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,CAAC;oBAElC,IAAI,QAAQ,GAAG,KAAK,EAAE,CAAC;wBACrB,QAAQ,GAAG,KAAK,CAAC;wBACjB,MAAM,GAAG,KAAK,GAAG,YAAY,CAAC;oBAChC,CAAC;oBACD,IAAI,MAAM,GAAG,KAAK,EAAE,CAAC;wBACnB,MAAM,GAAG,KAAK,CAAC;wBACf,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,KAAK,GAAG,YAAY,CAAC,CAAC;oBACnD,CAAC;oBAED,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;gBAC1C,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1D,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACxD,CAAC,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEpC,kEAAkE;IAClE,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE;QACpC,IAAI,CAAC,YAAY,EAAE,IAAI;YAAE,OAAO,SAAS,CAAC;QAC1C,MAAM,IAAI,GAAG,YAAY,CAAC,IAA+B,CAAC;QAC1D,MAAM,QAAQ,GAAG,IAAI,CAAC,QAA8B,CAAC;QACrD,MAAM,YAAY,GAAG,IAAI,CAAC,YAAkC,CAAC;QAC7D,OAAO,CACL,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YAC3D,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;YACvE,QAAQ;YACR,YAAY;YACX,IAAI,CAAC,MAAiB;YACvB,SAAS,CACV,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IAEzB,MAAM,gBAAgB,GAAG,YAAY,EAAE,QAA8B,CAAC;IACtE,MAAM,kBAAkB,GAAG,OAAO,CAAC,GAAG,EAAE;QACtC,IAAI,CAAC,YAAY,EAAE,IAAI;YAAE,OAAO,SAAS,CAAC;QAC1C,MAAM,IAAI,GAAG,YAAY,CAAC,IAA+B,CAAC;QAC1D,OAAO,CACJ,IAAI,CAAC,MAAiB;YACtB,IAAI,CAAC,KAAgB;YACrB,IAAI,CAAC,MAAiB;YACvB,YAAY,CAAC,MAAM,CACpB,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IAE/C,OAAO,CACL,4BACY,WAAW,qBACJ,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAC,qIAAqI,aAE/I,eACE,EAAE,EAAC,cAAc,EACjB,SAAS,EAAC,gFAAgF,aAE1F,MAAC,SAAS,IACR,WAAW,EACT,eAAK,SAAS,EAAC,+FAA+F,aAC5G,KAAC,MAAM,IAAC,SAAS,EAAC,oCAAoC,GAAG,EACzD,gBACE,EAAE,EAAC,qBAAqB,EACxB,IAAI,EAAC,qBAAqB,EAC1B,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC/C,WAAW,EAAC,iBAAiB,gBAClB,cAAc,EACzB,SAAS,EAAC,6FAA6F,GACvG,EACD,WAAW,IAAI,CACd,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,EACjC,SAAS,EAAC,kGAAkG,YAE5G,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,CACV,IACG,EAER,SAAS,EACP,KAAC,cAAc,IAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,GAAI,aAGhE,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,SAAS,IACR,KAAK,EAAE,aAAa,EACpB,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,gBAAgB,GAC9B,GACE,EACN,cACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAC,yCAAyC,EACnD,aAAa,EAAE,SAAS,EACxB,WAAW,EAAE,uBAAuB,EACpC,YAAY,EAAE,wBAAwB,YAEtC,KAAC,QAAQ,IACP,KAAK,EAAE,aAAa,EACpB,SAAS,EAAE,QAAQ,CAAC,KAAK,EACzB,OAAO,EAAE,QAAQ,CAAC,GAAG,EACrB,OAAO,EAAE,WAAW,EACpB,UAAU,EAAE,YAAY,EACxB,QAAQ,EAAE,gBAAgB,EAC1B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,GAChB,GACE,IACI,EACZ,eAAK,SAAS,EAAC,sKAAsK,aACnL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mKAAmK,EAC7K,OAAO,EAAE,OAAO,gBACL,UAAU,YAErB,KAAC,OAAO,IAAC,SAAS,EAAC,SAAS,GAAG,GACxB,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mKAAmK,EAC7K,OAAO,EAAE,SAAS,gBACP,YAAY,YAEvB,KAAC,SAAS,IAAC,SAAS,EAAC,aAAa,GAAG,GAC9B,EACT,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,mKAAmK,EAC7K,OAAO,EAAE,MAAM,gBACJ,SAAS,YAEpB,KAAC,MAAM,IAAC,SAAS,EAAC,SAAS,GAAG,GACvB,IACL,IACF,EAGL,UAAU,IAAI,OAAO,CAAC,CAAC,CAAC,CACvB,iBAAO,SAAS,EAAC,gGAAgG,aAE/G,cAAK,SAAS,EAAC,8BAA8B,YAC3C,eAAK,SAAS,EAAC,wCAAwC,aACrD,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAM,SAAS,EAAC,yDAAyD,YACtE,gBAAgB,GACZ,EACN,kBAAkB,IAAI,CACrB,eAAK,SAAS,EAAC,8BAA8B,aAC1C,gBAAgB,IAAI,CACnB,eACE,SAAS,EAAE,mGACT,gBAAgB,KAAK,MAAM;wDACzB,CAAC,CAAC,6BAA6B;wDAC/B,CAAC,CAAC,gBAAgB,KAAK,KAAK;4DAC1B,CAAC,CAAC,2BAA2B;4DAC7B,CAAC,CAAC,gBAAgB,KAAK,MAAM;gEAC3B,CAAC,CAAC,+BAA+B;gEACjC,CAAC,CAAC,2BACV,EAAE,YAED,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;wDACvC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,GACtB,CACR,EACD,eACE,SAAS,EAAC,qEAAqE,EAC/E,KAAK,EAAE,kBAAkB,aAEzB,eAAM,SAAS,EAAC,UAAU,YAAE,kBAAkB,GAAQ,EACtD,KAAC,UAAU,IACT,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,SAAS,EACnB,SAAS,EAAC,UAAU,GACpB,IACE,IACF,CACP,IACG,EACN,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,sGAAsG,EAChH,OAAO,EAAE,eAAe,YAExB,KAAC,CAAC,IAAC,SAAS,EAAC,SAAS,GAAG,GAClB,IACL,GACF,EAEN,cAAK,SAAS,EAAC,wBAAwB,YACrC,KAAC,aAAa,cACZ,KAAC,iBAAiB,IAChB,GAAG,EAAE,OAAO,CAAC,GAAG,EAChB,aAAa,EAAE,OAAO,CAAC,aAAa,EACpC,UAAU,EAAE,OAAO,CAAC,UAAU,EAC9B,cAAc,EAAE,OAAO,CAAC,cAAc,EACtC,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,iBAAiB,EAAE,OAAO,CAAC,iBAAiB,EAC5C,YAAY,EAAE,OAAO,CAAC,YAAY,EAClC,aAAa,EAAE,OAAO,CAAC,aAAa,EACpC,eAAe,EAAE,OAAO,CAAC,eAAe,EACxC,aAAa,EAAE,OAAO,CAAC,aAAa,EACpC,aAAa,EAAE,OAAO,CAAC,aAAa,EACpC,SAAS,EAAE,OAAO,CAAC,SAAS,EAC5B,YAAY,EAAE,OAAO,CAAC,YAAY,EAClC,YAAY,EAAE,YAAY,GAC1B,GACY,GACZ,IACA,CACT,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,KAAC,WAAW,IACV,IAAI,EAAE,UAAU,EAChB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,eAAe,GACxB,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["'use client';\n\nimport { parseStepName, parseWorkflowName } from '@workflow/utils/parse-name';\nimport { RotateCcw, Search, X, ZoomIn, ZoomOut } from 'lucide-react';\nimport {\n type ReactNode,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { ErrorBoundary } from '../error-boundary';\nimport {\n EntityDetailPanel,\n type SelectedSpanInfo,\n} from '../sidebar/entity-detail-panel';\nimport { useSidebarDataOptional } from '../sidebar/sidebar-data-context';\nimport type { Trace } from '../trace-viewer/types';\nimport { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';\nimport { CopyButton } from './components/copy-button';\nimport EventList from './components/event-list';\nimport { SplitPane } from './components/split-pane';\nimport {\n Timeline,\n TimelineHeader,\n TIMELINE_PADDING_PX,\n} from './components/timeline';\nimport { ActiveSpanProvider, useActiveSpan } from './context';\nimport { DetailPanel } from './detail-panel';\nimport { computeRootBounds, computeTimeMarkers } from './utils';\n\ninterface NewTraceViewerProps {\n trace: Trace;\n}\n\nconst MIN_VIEWPORT_MS = 0.001;\n\ninterface Viewport {\n start: number;\n end: number;\n}\n\nfunction useAnimatedViewport(initial: Viewport) {\n const [viewport, setViewportState] = useState<Viewport>(initial);\n const animRef = useRef<{\n raf: number;\n from: Viewport;\n to: Viewport;\n start: number;\n } | null>(null);\n const currentRef = useRef(initial);\n currentRef.current = viewport;\n\n const cancel = useCallback(() => {\n if (animRef.current) {\n cancelAnimationFrame(animRef.current.raf);\n animRef.current = null;\n }\n }, []);\n\n const animateTo = useCallback(\n (target: Viewport) => {\n cancel();\n const from = currentRef.current;\n const anim = { raf: 0, from, to: target, start: performance.now() };\n\n const tick = () => {\n const t = Math.min((performance.now() - anim.start) / 150, 1);\n const e = 1 - (1 - t) * (1 - t);\n setViewportState({\n start: anim.from.start + (anim.to.start - anim.from.start) * e,\n end: anim.from.end + (anim.to.end - anim.from.end) * e,\n });\n if (t < 1) anim.raf = requestAnimationFrame(tick);\n else animRef.current = null;\n };\n\n animRef.current = anim;\n anim.raf = requestAnimationFrame(tick);\n },\n [cancel]\n );\n\n const setViewport = useCallback(\n (update: Viewport | ((prev: Viewport) => Viewport)) => {\n cancel();\n if (typeof update === 'function') {\n setViewportState((prev) => {\n const next = update(prev);\n currentRef.current = next;\n return next;\n });\n } else {\n currentRef.current = update;\n setViewportState(update);\n }\n },\n [cancel]\n );\n\n useEffect(() => cancel, [cancel]);\n\n return { viewport, setViewport, animateTo };\n}\n\n// ---------------------------------------------------------------------------\n// Hook: bridge ActiveSpanContext + SidebarDataContext → SelectedSpanInfo\n// ---------------------------------------------------------------------------\n\nfunction useSelectedSpanInfo(): SelectedSpanInfo | null {\n const { activeSpan } = useActiveSpan();\n const sidebar = useSidebarDataOptional();\n\n return useMemo(() => {\n if (!activeSpan || !sidebar) return null;\n\n const correlationId = activeSpan.spanId;\n const rawEvents = correlationId\n ? sidebar.events.filter((e) => e.correlationId === correlationId)\n : [];\n\n return {\n data: activeSpan.attributes?.data,\n resource: activeSpan.attributes?.resource as string | undefined,\n spanId: activeSpan.spanId,\n rawEvents,\n };\n }, [activeSpan, sidebar?.events]);\n}\n\n// ---------------------------------------------------------------------------\n// Root component\n// ---------------------------------------------------------------------------\n\nexport function NewTraceViewer({ trace }: NewTraceViewerProps): ReactNode {\n return (\n <ActiveSpanProvider spans={trace.spans}>\n <NewTraceViewerContent trace={trace} />\n </ActiveSpanProvider>\n );\n}\n\nfunction NewTraceViewerContent({ trace }: NewTraceViewerProps): ReactNode {\n const { activeSpan, activeSpanId, setActiveSpan, clearActiveSpan } =\n useActiveSpan();\n\n const sidebar = useSidebarDataOptional();\n const selectedSpan = useSelectedSpanInfo();\n\n const [searchQuery, setSearchQuery] = useState('');\n\n const filteredSpans = useMemo(() => {\n const q = searchQuery.trim().toLowerCase();\n if (!q) return trace.spans;\n return trace.spans.filter(\n (s) =>\n s.name.toLowerCase().includes(q) || s.resource.toLowerCase().includes(q)\n );\n }, [trace.spans, searchQuery]);\n\n const root = useMemo(() => computeRootBounds(trace.spans), [trace.spans]);\n\n const { viewport, setViewport, animateTo } = useAnimatedViewport({\n start: root.startTime,\n end: root.startTime + root.duration,\n });\n\n const prevRootRef = useRef<Viewport>({\n start: root.startTime,\n end: root.startTime + root.duration,\n });\n\n useEffect(() => {\n const prevRoot = prevRootRef.current;\n const newStart = root.startTime;\n const newEnd = root.startTime + root.duration;\n\n setViewport((prev) => {\n const wasAtFullExtent =\n Math.abs(prev.start - prevRoot.start) < 0.01 &&\n Math.abs(prev.end - prevRoot.end) < 0.01;\n\n if (wasAtFullExtent) {\n return { start: newStart, end: newEnd };\n }\n return prev;\n });\n\n prevRootRef.current = { start: newStart, end: newEnd };\n }, [root.startTime, root.duration]);\n\n const viewDuration = viewport.end - viewport.start;\n\n const timeMarkers = useMemo(\n () => computeTimeMarkers(viewDuration, viewport.start - root.startTime),\n [viewDuration, viewport.start, root.startTime]\n );\n\n const resetZoom = useCallback(() => {\n animateTo({ start: root.startTime, end: root.startTime + root.duration });\n }, [animateTo, root.startTime, root.duration]);\n\n const ZOOM_FACTOR = 0.5;\n\n const zoomBy = useCallback(\n (factor: number) => {\n const rootS = root.startTime;\n const rootE = root.startTime + root.duration;\n const rootD = root.duration;\n\n setViewport((prev) => {\n const prevDuration = prev.end - prev.start;\n const center = (prev.start + prev.end) / 2;\n const newDuration = Math.max(\n MIN_VIEWPORT_MS,\n Math.min(rootD, prevDuration * factor)\n );\n let newStart = center - newDuration / 2;\n let newEnd = center + newDuration / 2;\n\n if (newStart < rootS) {\n newStart = rootS;\n newEnd = rootS + newDuration;\n }\n if (newEnd > rootE) {\n newEnd = rootE;\n newStart = Math.max(rootS, rootE - newDuration);\n }\n\n return { start: newStart, end: newEnd };\n });\n },\n [setViewport, root.startTime, root.duration]\n );\n\n const zoomIn = useCallback(() => zoomBy(ZOOM_FACTOR), [zoomBy]);\n const zoomOut = useCallback(() => zoomBy(1 / ZOOM_FACTOR), [zoomBy]);\n\n const handleSelectSpan = useCallback(\n (spanId: string) => {\n if (spanId === activeSpanId) {\n clearActiveSpan();\n return;\n }\n setActiveSpan(spanId);\n\n const span = trace.spans.find((s) => s.spanId === spanId);\n if (!span) return;\n\n const spanStart = getHighResInMs(span.startTime);\n const spanEnd = getHighResInMs(span.endTime);\n const spanDuration = spanEnd - spanStart;\n\n const rootS = root.startTime;\n const rootE = root.startTime + root.duration;\n const rootD = root.duration;\n\n if (spanDuration > rootD * 0.8) {\n animateTo({ start: rootS, end: rootE });\n return;\n }\n\n const padding = Math.max(spanDuration * 0.2, MIN_VIEWPORT_MS / 2);\n let newStart = spanStart - padding;\n let newEnd = spanEnd + padding;\n\n if (newEnd - newStart < MIN_VIEWPORT_MS) {\n const center = (spanStart + spanEnd) / 2;\n newStart = center - MIN_VIEWPORT_MS / 2;\n newEnd = center + MIN_VIEWPORT_MS / 2;\n }\n\n if (newStart < rootS) {\n const duration = newEnd - newStart;\n newStart = rootS;\n newEnd = Math.min(rootE, rootS + duration);\n }\n if (newEnd > rootE) {\n const duration = newEnd - newStart;\n newEnd = rootE;\n newStart = Math.max(rootS, rootE - duration);\n }\n\n animateTo({ start: newStart, end: newEnd });\n },\n [\n animateTo,\n setActiveSpan,\n clearActiveSpan,\n activeSpanId,\n trace.spans,\n root.startTime,\n root.duration,\n ]\n );\n\n const [altHeld, setAltHeld] = useState(false);\n\n useEffect(() => {\n const onKeyDown = (e: KeyboardEvent): void => {\n if (e.key === 'Escape') {\n clearActiveSpan();\n }\n if (e.key === 'Alt') {\n e.preventDefault();\n setAltHeld(true);\n }\n };\n const onKeyUp = (e: KeyboardEvent): void => {\n if (e.key === 'Alt') setAltHeld(false);\n };\n const onBlur = (): void => setAltHeld(false);\n\n window.addEventListener('keydown', onKeyDown);\n window.addEventListener('keyup', onKeyUp);\n window.addEventListener('blur', onBlur);\n return () => {\n window.removeEventListener('keydown', onKeyDown);\n window.removeEventListener('keyup', onKeyUp);\n window.removeEventListener('blur', onBlur);\n };\n }, [clearActiveSpan]);\n\n const timelineRef = useRef<HTMLDivElement>(null);\n const [hoverFraction, setHoverFraction] = useState<number | null>(null);\n\n const hoverInfo = useMemo(() => {\n if (hoverFraction == null) return null;\n const absTime = viewport.start + hoverFraction * viewDuration;\n const offset = absTime - root.startTime;\n return { fraction: hoverFraction, label: formatDuration(offset, true) };\n }, [hoverFraction, viewport.start, viewDuration, root.startTime]);\n\n const handleTimelineMouseMove = useCallback(\n (e: React.MouseEvent<HTMLDivElement>) => {\n const el = timelineRef.current;\n if (!el) return;\n const rect = el.getBoundingClientRect();\n const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;\n if (contentWidth <= 0) return;\n const fraction = Math.max(\n 0,\n Math.min(\n 1,\n (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth\n )\n );\n setHoverFraction(fraction);\n },\n []\n );\n\n const handleTimelineMouseLeave = useCallback(() => {\n setHoverFraction(null);\n }, []);\n\n useEffect(() => {\n const el = timelineRef.current;\n if (!el) return;\n\n const rootS = root.startTime;\n const rootE = root.startTime + root.duration;\n const rootD = root.duration;\n if (rootD <= 0) return;\n\n const onWheel = (e: WheelEvent): void => {\n const isZoomGesture = e.ctrlKey || e.metaKey;\n const hasDeltaX = Math.abs(e.deltaX) > Math.abs(e.deltaY);\n\n if (!isZoomGesture && !hasDeltaX) return;\n e.preventDefault();\n\n const rect = el.getBoundingClientRect();\n const contentWidth = rect.width - TIMELINE_PADDING_PX * 2;\n if (contentWidth <= 0) return;\n\n if (isZoomGesture) {\n let dy = e.deltaY;\n if (e.deltaMode === 1) dy *= 16;\n\n const cursorFraction = Math.max(\n 0,\n Math.min(\n 1,\n (e.clientX - rect.left - TIMELINE_PADDING_PX) / contentWidth\n )\n );\n const scaleFactor = Math.pow(2, dy / 200);\n\n setViewport((prev) => {\n const prevDuration = prev.end - prev.start;\n const cursorTime = prev.start + cursorFraction * prevDuration;\n const newDuration = Math.max(\n MIN_VIEWPORT_MS,\n Math.min(rootD, prevDuration * scaleFactor)\n );\n\n let newStart = cursorTime - cursorFraction * newDuration;\n let newEnd = newStart + newDuration;\n\n if (newStart < rootS) {\n newStart = rootS;\n newEnd = rootS + newDuration;\n }\n if (newEnd > rootE) {\n newEnd = rootE;\n newStart = Math.max(rootS, rootE - newDuration);\n }\n\n return { start: newStart, end: newEnd };\n });\n } else {\n let dx = e.deltaX;\n if (e.deltaMode === 1) dx *= 16;\n\n setViewport((prev) => {\n const prevDuration = prev.end - prev.start;\n const panAmount = (dx / contentWidth) * prevDuration;\n\n let newStart = prev.start + panAmount;\n let newEnd = prev.end + panAmount;\n\n if (newStart < rootS) {\n newStart = rootS;\n newEnd = rootS + prevDuration;\n }\n if (newEnd > rootE) {\n newEnd = rootE;\n newStart = Math.max(rootS, rootE - prevDuration);\n }\n\n return { start: newStart, end: newEnd };\n });\n }\n };\n\n el.addEventListener('wheel', onWheel, { passive: false });\n return () => el.removeEventListener('wheel', onWheel);\n }, [root.startTime, root.duration]);\n\n // Derive the selected span name and metadata for the panel header\n const selectedSpanName = useMemo(() => {\n if (!selectedSpan?.data) return 'Details';\n const data = selectedSpan.data as Record<string, unknown>;\n const stepName = data.stepName as string | undefined;\n const workflowName = data.workflowName as string | undefined;\n return (\n (stepName ? parseStepName(stepName)?.shortName : undefined) ??\n (workflowName ? parseWorkflowName(workflowName)?.shortName : undefined) ??\n stepName ??\n workflowName ??\n (data.hookId as string) ??\n 'Details'\n );\n }, [selectedSpan?.data]);\n\n const selectedResource = selectedSpan?.resource as string | undefined;\n const selectedResourceId = useMemo(() => {\n if (!selectedSpan?.data) return undefined;\n const data = selectedSpan.data as Record<string, unknown>;\n return (\n (data.stepId as string) ??\n (data.runId as string) ??\n (data.hookId as string) ??\n selectedSpan.spanId\n );\n }, [selectedSpan?.data, selectedSpan?.spanId]);\n\n return (\n <div\n data-pane='pane-root'\n data-has-detail={activeSpan ? '' : undefined}\n className='grid w-full h-full max-h-full grid-cols-[minmax(100px,1fr)] data-[has-detail]:grid-cols-[minmax(100px,1fr)_clamp(280px,420px,100%)]'\n >\n <div\n id='trace-parent'\n className='grid grid-rows-[1fr] h-full min-h-0 overflow-hidden relative bg-background-100'\n >\n <SplitPane\n startHeader={\n <div className='bg-background-100 border-b border-gray-alpha-400 h-10 min-h-10 flex items-center px-2 gap-1.5'>\n <Search className='w-3.5 h-3.5 shrink-0 text-gray-800' />\n <input\n id='trace-viewer-search'\n name='trace-viewer-search'\n type='text'\n value={searchQuery}\n onChange={(e) => setSearchQuery(e.target.value)}\n placeholder='Search spans...'\n aria-label='Search spans'\n className='flex-1 min-w-0 bg-transparent text-sm text-gray-1000 placeholder:text-gray-800 outline-none'\n />\n {searchQuery && (\n <button\n type='button'\n onClick={() => setSearchQuery('')}\n className='shrink-0 p-0.5 rounded-sm text-gray-800 hover:text-gray-1000 hover:bg-gray-200 transition-colors'\n >\n <X className='w-3 h-3' />\n </button>\n )}\n </div>\n }\n endHeader={\n <TimelineHeader markers={timeMarkers} hoverInfo={hoverInfo} />\n }\n >\n <div className='block overflow-visible'>\n <EventList\n spans={filteredSpans}\n activeSpanId={activeSpanId}\n onSelectSpan={handleSelectSpan}\n />\n </div>\n <div\n ref={timelineRef}\n className='block min-h-0 overflow-visible relative'\n onDoubleClick={resetZoom}\n onMouseMove={handleTimelineMouseMove}\n onMouseLeave={handleTimelineMouseLeave}\n >\n <Timeline\n spans={filteredSpans}\n viewStart={viewport.start}\n viewEnd={viewport.end}\n markers={timeMarkers}\n selectedId={activeSpanId}\n onSelect={handleSelectSpan}\n hoverFraction={hoverFraction}\n altHeld={altHeld}\n />\n </div>\n </SplitPane>\n <div className='absolute right-3 bottom-3 z-[5] flex items-center border border-gray-alpha-400 rounded-lg bg-background-100 shadow-sm overflow-hidden divide-x divide-gray-alpha-400'>\n <button\n type='button'\n className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'\n onClick={zoomOut}\n aria-label='Zoom out'\n >\n <ZoomOut className='w-4 h-4' />\n </button>\n <button\n type='button'\n className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'\n onClick={resetZoom}\n aria-label='Reset zoom'\n >\n <RotateCcw className='w-3.5 h-3.5' />\n </button>\n <button\n type='button'\n className='flex items-center justify-center w-8 h-8 text-gray-900 cursor-pointer transition-colors duration-[120ms] ease-in-out hover:text-gray-1000 hover:bg-gray-alpha-100'\n onClick={zoomIn}\n aria-label='Zoom in'\n >\n <ZoomIn className='w-4 h-4' />\n </button>\n </div>\n </div>\n\n {/* Detail panel */}\n {activeSpan && sidebar ? (\n <aside className='flex flex-col h-full max-h-full bg-background-100 border-l border-gray-alpha-400 overflow-auto'>\n {/* Panel header */}\n <div className='flex-shrink-0 px-4 pt-4 pb-3'>\n <div className='flex items-start justify-between gap-2'>\n <div className='min-w-0 flex-1'>\n <span className='text-[15px] font-semibold text-gray-1000 truncate block'>\n {selectedSpanName}\n </span>\n {selectedResourceId && (\n <div className='mt-1 flex items-center gap-2'>\n {selectedResource && (\n <span\n className={`inline-flex items-center rounded-md px-1.5 py-0.5 text-[11px] font-medium leading-none shrink-0 ${\n selectedResource === 'step'\n ? 'bg-green-200 text-green-900'\n : selectedResource === 'run'\n ? 'bg-blue-200 text-blue-900'\n : selectedResource === 'hook'\n ? 'bg-yellow-200 text-yellow-900'\n : 'bg-gray-200 text-gray-900'\n }`}\n >\n {selectedResource.charAt(0).toUpperCase() +\n selectedResource.slice(1)}\n </span>\n )}\n <div\n className='flex items-center gap-1 text-[13px] font-mono text-gray-700 min-w-0'\n title={selectedResourceId}\n >\n <span className='truncate'>{selectedResourceId}</span>\n <CopyButton\n copyText={selectedResourceId}\n ariaLabel='Copy ID'\n className='shrink-0'\n />\n </div>\n </div>\n )}\n </div>\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 shrink-0'\n onClick={clearActiveSpan}\n >\n <X className='w-4 h-4' />\n </button>\n </div>\n </div>\n {/* Panel body */}\n <div className='flex-1 overflow-y-auto'>\n <ErrorBoundary>\n <EntityDetailPanel\n run={sidebar.run}\n onStreamClick={sidebar.onStreamClick}\n onRunClick={sidebar.onRunClick}\n spanDetailData={sidebar.spanDetailData}\n spanDetailError={sidebar.spanDetailError}\n spanDetailLoading={sidebar.spanDetailLoading}\n onSpanSelect={sidebar.onSpanSelect}\n onWakeUpSleep={sidebar.onWakeUpSleep}\n onLoadEventData={sidebar.onLoadEventData}\n onResolveHook={sidebar.onResolveHook}\n encryptionKey={sidebar.encryptionKey}\n onDecrypt={sidebar.onDecrypt}\n isDecrypting={sidebar.isDecrypting}\n selectedSpan={selectedSpan}\n />\n </ErrorBoundary>\n </div>\n </aside>\n ) : activeSpan ? (\n <DetailPanel\n span={activeSpan}\n rootStart={root.startTime}\n onClose={clearActiveSpan}\n />\n ) : null}\n </div>\n );\n}\n"]}
|