@workflow/web-shared 4.0.1-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/LICENSE.md +21 -0
  2. package/README.md +76 -0
  3. package/dist/api/workflow-api-client.d.ts +303 -0
  4. package/dist/api/workflow-api-client.d.ts.map +1 -0
  5. package/dist/api/workflow-api-client.js +797 -0
  6. package/dist/api/workflow-api-client.js.map +1 -0
  7. package/dist/api/workflow-server-actions.d.ts +97 -0
  8. package/dist/api/workflow-server-actions.d.ts.map +1 -0
  9. package/dist/api/workflow-server-actions.js +329 -0
  10. package/dist/api/workflow-server-actions.js.map +1 -0
  11. package/dist/components/ui/alert.d.ts +9 -0
  12. package/dist/components/ui/alert.d.ts.map +1 -0
  13. package/dist/components/ui/alert.jsx +22 -0
  14. package/dist/components/ui/alert.jsx.map +1 -0
  15. package/dist/index.d.ts +7 -0
  16. package/dist/index.d.ts.map +1 -0
  17. package/dist/index.js +5 -0
  18. package/dist/index.js.map +1 -0
  19. package/dist/lib/utils.d.ts +11 -0
  20. package/dist/lib/utils.d.ts.map +1 -0
  21. package/dist/lib/utils.js +19 -0
  22. package/dist/lib/utils.js.map +1 -0
  23. package/dist/run-trace-view.d.ts +8 -0
  24. package/dist/run-trace-view.d.ts.map +1 -0
  25. package/dist/run-trace-view.jsx +25 -0
  26. package/dist/run-trace-view.jsx.map +1 -0
  27. package/dist/sidebar/attribute-panel.d.ts +11 -0
  28. package/dist/sidebar/attribute-panel.d.ts.map +1 -0
  29. package/dist/sidebar/attribute-panel.jsx +153 -0
  30. package/dist/sidebar/attribute-panel.jsx.map +1 -0
  31. package/dist/sidebar/detail-card.d.ts +6 -0
  32. package/dist/sidebar/detail-card.d.ts.map +1 -0
  33. package/dist/sidebar/detail-card.jsx +13 -0
  34. package/dist/sidebar/detail-card.jsx.map +1 -0
  35. package/dist/sidebar/events-list.d.ts +8 -0
  36. package/dist/sidebar/events-list.d.ts.map +1 -0
  37. package/dist/sidebar/events-list.jsx +67 -0
  38. package/dist/sidebar/events-list.jsx.map +1 -0
  39. package/dist/sidebar/workflow-detail-panel.d.ts +8 -0
  40. package/dist/sidebar/workflow-detail-panel.d.ts.map +1 -0
  41. package/dist/sidebar/workflow-detail-panel.jsx +59 -0
  42. package/dist/sidebar/workflow-detail-panel.jsx.map +1 -0
  43. package/dist/trace-viewer/components/map.d.ts +8 -0
  44. package/dist/trace-viewer/components/map.d.ts.map +1 -0
  45. package/dist/trace-viewer/components/map.jsx +164 -0
  46. package/dist/trace-viewer/components/map.jsx.map +1 -0
  47. package/dist/trace-viewer/components/markers.d.ts +22 -0
  48. package/dist/trace-viewer/components/markers.d.ts.map +1 -0
  49. package/dist/trace-viewer/components/markers.jsx +400 -0
  50. package/dist/trace-viewer/components/markers.jsx.map +1 -0
  51. package/dist/trace-viewer/components/node.d.ts +31 -0
  52. package/dist/trace-viewer/components/node.d.ts.map +1 -0
  53. package/dist/trace-viewer/components/node.jsx +116 -0
  54. package/dist/trace-viewer/components/node.jsx.map +1 -0
  55. package/dist/trace-viewer/components/search-input.d.ts +9 -0
  56. package/dist/trace-viewer/components/search-input.d.ts.map +1 -0
  57. package/dist/trace-viewer/components/search-input.jsx +16 -0
  58. package/dist/trace-viewer/components/search-input.jsx.map +1 -0
  59. package/dist/trace-viewer/components/search.d.ts +3 -0
  60. package/dist/trace-viewer/components/search.d.ts.map +1 -0
  61. package/dist/trace-viewer/components/search.jsx +27 -0
  62. package/dist/trace-viewer/components/search.jsx.map +1 -0
  63. package/dist/trace-viewer/components/span-detail-panel.d.ts +10 -0
  64. package/dist/trace-viewer/components/span-detail-panel.d.ts.map +1 -0
  65. package/dist/trace-viewer/components/span-detail-panel.jsx +388 -0
  66. package/dist/trace-viewer/components/span-detail-panel.jsx.map +1 -0
  67. package/dist/trace-viewer/components/ui.d.ts +28 -0
  68. package/dist/trace-viewer/components/ui.d.ts.map +1 -0
  69. package/dist/trace-viewer/components/ui.jsx +54 -0
  70. package/dist/trace-viewer/components/ui.jsx.map +1 -0
  71. package/dist/trace-viewer/components/zoom-button.d.ts +3 -0
  72. package/dist/trace-viewer/components/zoom-button.d.ts.map +1 -0
  73. package/dist/trace-viewer/components/zoom-button.jsx +40 -0
  74. package/dist/trace-viewer/components/zoom-button.jsx.map +1 -0
  75. package/dist/trace-viewer/components/zoom-icons.d.ts +11 -0
  76. package/dist/trace-viewer/components/zoom-icons.d.ts.map +1 -0
  77. package/dist/trace-viewer/components/zoom-icons.jsx +23 -0
  78. package/dist/trace-viewer/components/zoom-icons.jsx.map +1 -0
  79. package/dist/trace-viewer/context.d.ts +183 -0
  80. package/dist/trace-viewer/context.d.ts.map +1 -0
  81. package/dist/trace-viewer/context.jsx +326 -0
  82. package/dist/trace-viewer/context.jsx.map +1 -0
  83. package/dist/trace-viewer/index.d.ts +5 -0
  84. package/dist/trace-viewer/index.d.ts.map +1 -0
  85. package/dist/trace-viewer/index.jsx +4 -0
  86. package/dist/trace-viewer/index.jsx.map +1 -0
  87. package/dist/trace-viewer/trace-viewer.d.ts +22 -0
  88. package/dist/trace-viewer/trace-viewer.d.ts.map +1 -0
  89. package/dist/trace-viewer/trace-viewer.jsx +311 -0
  90. package/dist/trace-viewer/trace-viewer.jsx.map +1 -0
  91. package/dist/trace-viewer/trace-viewer.module.css +1275 -0
  92. package/dist/trace-viewer/types.d.ts +201 -0
  93. package/dist/trace-viewer/types.d.ts.map +1 -0
  94. package/dist/trace-viewer/types.js +2 -0
  95. package/dist/trace-viewer/types.js.map +1 -0
  96. package/dist/trace-viewer/util/constants.d.ts +9 -0
  97. package/dist/trace-viewer/util/constants.d.ts.map +1 -0
  98. package/dist/trace-viewer/util/constants.js +9 -0
  99. package/dist/trace-viewer/util/constants.js.map +1 -0
  100. package/dist/trace-viewer/util/scrollbar-width.d.ts +2 -0
  101. package/dist/trace-viewer/util/scrollbar-width.d.ts.map +1 -0
  102. package/dist/trace-viewer/util/scrollbar-width.js +14 -0
  103. package/dist/trace-viewer/util/scrollbar-width.js.map +1 -0
  104. package/dist/trace-viewer/util/timing.d.ts +8 -0
  105. package/dist/trace-viewer/util/timing.d.ts.map +1 -0
  106. package/dist/trace-viewer/util/timing.js +29 -0
  107. package/dist/trace-viewer/util/timing.js.map +1 -0
  108. package/dist/trace-viewer/util/tree.d.ts +13 -0
  109. package/dist/trace-viewer/util/tree.d.ts.map +1 -0
  110. package/dist/trace-viewer/util/tree.js +223 -0
  111. package/dist/trace-viewer/util/tree.js.map +1 -0
  112. package/dist/trace-viewer/util/use-immediate-style.d.ts +15 -0
  113. package/dist/trace-viewer/util/use-immediate-style.d.ts.map +1 -0
  114. package/dist/trace-viewer/util/use-immediate-style.js +22 -0
  115. package/dist/trace-viewer/util/use-immediate-style.js.map +1 -0
  116. package/dist/trace-viewer/util/use-streaming-spans.d.ts +8 -0
  117. package/dist/trace-viewer/util/use-streaming-spans.d.ts.map +1 -0
  118. package/dist/trace-viewer/util/use-streaming-spans.js +332 -0
  119. package/dist/trace-viewer/util/use-streaming-spans.js.map +1 -0
  120. package/dist/trace-viewer/util/use-trackpad-zoom.d.ts +6 -0
  121. package/dist/trace-viewer/util/use-trackpad-zoom.d.ts.map +1 -0
  122. package/dist/trace-viewer/util/use-trackpad-zoom.jsx +38 -0
  123. package/dist/trace-viewer/util/use-trackpad-zoom.jsx.map +1 -0
  124. package/dist/trace-viewer/worker.d.ts +2 -0
  125. package/dist/trace-viewer/worker.d.ts.map +1 -0
  126. package/dist/trace-viewer/worker.js +107 -0
  127. package/dist/trace-viewer/worker.js.map +1 -0
  128. package/dist/workflow-trace-view.d.ts +12 -0
  129. package/dist/workflow-trace-view.d.ts.map +1 -0
  130. package/dist/workflow-trace-view.jsx +129 -0
  131. package/dist/workflow-trace-view.jsx.map +1 -0
  132. package/dist/workflow-traces/event-colors.d.ts +31 -0
  133. package/dist/workflow-traces/event-colors.d.ts.map +1 -0
  134. package/dist/workflow-traces/event-colors.js +68 -0
  135. package/dist/workflow-traces/event-colors.js.map +1 -0
  136. package/dist/workflow-traces/trace-colors.d.ts +15 -0
  137. package/dist/workflow-traces/trace-colors.d.ts.map +1 -0
  138. package/dist/workflow-traces/trace-colors.js +89 -0
  139. package/dist/workflow-traces/trace-colors.js.map +1 -0
  140. package/dist/workflow-traces/trace-span-construction.d.ts +31 -0
  141. package/dist/workflow-traces/trace-span-construction.d.ts.map +1 -0
  142. package/dist/workflow-traces/trace-span-construction.js +173 -0
  143. package/dist/workflow-traces/trace-span-construction.js.map +1 -0
  144. package/dist/workflow-traces/trace-time-utils.d.ts +13 -0
  145. package/dist/workflow-traces/trace-time-utils.d.ts.map +1 -0
  146. package/dist/workflow-traces/trace-time-utils.js +34 -0
  147. package/dist/workflow-traces/trace-time-utils.js.map +1 -0
  148. package/package.json +59 -0
@@ -0,0 +1,400 @@
1
+ import { clsx } from 'clsx';
2
+ import { useEffect, useMemo, useRef } from 'react';
3
+ import { useTraceViewer } from '../context';
4
+ import styles from '../trace-viewer.module.css';
5
+ import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING, TIMELINE_PADDING, } from '../util/constants';
6
+ import { formatDuration, formatTimeSelection } from '../util/timing';
7
+ import { useImmediateStyle } from '../util/use-immediate-style';
8
+ import { useTrackpadZoom } from '../util/use-trackpad-zoom';
9
+ const DIVISORS = [1, 2, 4, 5, 8, 10];
10
+ export function Markers({ scale }) {
11
+ const { state: { root }, } = useTraceViewer();
12
+ const fullDuration = root.duration;
13
+ const logFull = Math.floor(Math.log10(fullDuration));
14
+ const logHalf = Math.floor(Math.log10(fullDuration * 0.5));
15
+ let markerDuration = Math.max(2, 10 ** logFull * (logHalf === logFull ? 1 : 0.5));
16
+ let markerWidth = markerDuration * scale;
17
+ let divisor = 1;
18
+ for (const d of DIVISORS) {
19
+ if (markerDuration / d < 24)
20
+ break;
21
+ divisor = d;
22
+ }
23
+ markerDuration /= divisor;
24
+ markerWidth /= divisor;
25
+ const markerCount = Math.ceil(fullDuration / markerDuration);
26
+ // How often labels should appear for markers, e.g. 3 === one label for every third marker
27
+ const labelSpacing = Math.ceil(100 / markerWidth) || 1;
28
+ return (<div className={styles.markersContainer}>
29
+ <div aria-hidden className={styles.markers} style={{
30
+ width: Math.floor(root.duration * scale + 15),
31
+ visibility: scale !== -1 ? 'visible' : 'hidden',
32
+ '--marker-width': `${markerWidth}px`,
33
+ }}>
34
+ {new Array(markerCount).fill(null).map((_, i) => {
35
+ const hasLabel = i % labelSpacing === 0;
36
+ return (<span className={clsx(styles.marker, !hasLabel && styles.notch)} key={String(i)}>
37
+ {hasLabel ? (<span className={styles.markerLabel}>
38
+ {formatDuration(markerDuration * i)}
39
+ </span>) : null}
40
+ </span>);
41
+ })}
42
+ </div>
43
+ </div>);
44
+ }
45
+ export function EventMarkers({ events, root, scale, }) {
46
+ // Filter out events that should not show vertical lines (workflow-specific feature)
47
+ const eventsWithVerticalLines = useMemo(() => events.filter((x) => x.event.showVerticalLine !== false), [events]);
48
+ return (<div className={styles.eventMarkersContainer}>
49
+ <div aria-hidden className={styles.eventMarkers} style={{
50
+ width: Math.floor(root.duration * scale),
51
+ }}>
52
+ {eventsWithVerticalLines.map((x) => {
53
+ return (<span className={clsx(styles.eventMarker)} key={x.key} style={{
54
+ left: Math.floor((x.timestamp - root.startTime) * scale),
55
+ ...(x.event.color && { borderLeftColor: x.event.color }),
56
+ }}/>);
57
+ })}
58
+ </div>
59
+ </div>);
60
+ }
61
+ const HOVER_OVERSCAN = 2;
62
+ export function CursorMarker({ memoCacheRef, timelineRef, root, spans, events, scale, dispatch, scrollSnapshotRef, }) {
63
+ const hasEnteredRef = useRef(false);
64
+ const spansRef = useRef(spans);
65
+ spansRef.current = spans;
66
+ const eventsRef = useRef(events);
67
+ eventsRef.current = events;
68
+ const labelRef = useRef(null);
69
+ const { style: labelStyle, setStyle: setLabelStyle } = useImmediateStyle(labelRef);
70
+ const labelTextRef = useRef(null);
71
+ const ref = useRef(null);
72
+ const { style, setStyle } = useImmediateStyle(ref);
73
+ const rectRef = useRef(undefined);
74
+ const selectionRef = useRef(null);
75
+ const { style: selectionStyle, setStyle: setSelectionStyle } = useImmediateStyle(selectionRef);
76
+ const xRef = useRef(0);
77
+ useEffect(() => {
78
+ const $timeline = timelineRef.current;
79
+ if (!$timeline)
80
+ return;
81
+ let x = xRef.current;
82
+ let xStart = 0;
83
+ let isDragging = false;
84
+ let isExternalDrag = false;
85
+ let hasMoved = false;
86
+ let isRightClick = false;
87
+ let scrollX = 0;
88
+ let scrollY = 0;
89
+ const hoverStartT = Date.now() + 500;
90
+ const updateRect = () => {
91
+ if (rectRef.current)
92
+ return;
93
+ rectRef.current = $timeline.getBoundingClientRect();
94
+ };
95
+ const getRowFromY = (y) => {
96
+ if (!rectRef.current)
97
+ return 0;
98
+ return ((y - MARKER_HEIGHT - TIMELINE_PADDING) / (ROW_HEIGHT + ROW_PADDING));
99
+ };
100
+ const removeHover = () => {
101
+ const cache = memoCacheRef.current;
102
+ // Remove hover styling from any elements that have it
103
+ for (const span of spansRef.current) {
104
+ if (!span.isHovered)
105
+ continue;
106
+ span.isHovered = false;
107
+ cache.set(span.span.spanId, {});
108
+ }
109
+ dispatch({
110
+ type: 'forceRender',
111
+ });
112
+ };
113
+ let nextFrame = 0;
114
+ const onFrame = () => {
115
+ if (!hasEnteredRef.current)
116
+ return;
117
+ if (!rectRef.current)
118
+ updateRect();
119
+ const rect = rectRef.current;
120
+ if (!rect)
121
+ return;
122
+ const { scrollLeft, scrollTop } = $timeline;
123
+ const left = Math.max(0, Math.min(x + scrollLeft - rect.left - TIMELINE_PADDING, root.duration * scale));
124
+ const leftStyle = `${left - scrollLeft + TIMELINE_PADDING}px`;
125
+ setStyle('left', leftStyle);
126
+ setLabelStyle('left', leftStyle);
127
+ const t = root.startTime + left / scale;
128
+ const labelT = t - root.startTime;
129
+ if (labelT < 0 || labelT > root.duration) {
130
+ labelTextRef.current?.removeAttribute('data-text');
131
+ }
132
+ else {
133
+ labelTextRef.current?.setAttribute('data-text', formatTimeSelection(labelT));
134
+ }
135
+ if (isDragging) {
136
+ const xDelta = x - xStart;
137
+ const width = Math.abs(xDelta);
138
+ if (!hasMoved) {
139
+ if (width < 4)
140
+ return;
141
+ hasMoved = true;
142
+ setSelectionStyle('display', 'flex');
143
+ removeHover();
144
+ }
145
+ if (xDelta > 0) {
146
+ setSelectionStyle('left', '');
147
+ setSelectionStyle('right', '0');
148
+ }
149
+ else {
150
+ setSelectionStyle('left', '0');
151
+ setSelectionStyle('right', '');
152
+ }
153
+ setSelectionStyle('width', `${width}px`);
154
+ const leftStart = Math.max(0, Math.min(xStart + scrollLeft - rect.left - TIMELINE_PADDING, root.duration * scale));
155
+ const labelTStart = leftStart / scale;
156
+ let t1;
157
+ let t2;
158
+ if (labelTStart < labelT) {
159
+ t1 = labelTStart;
160
+ t2 = labelT;
161
+ }
162
+ else {
163
+ t1 = labelT;
164
+ t2 = labelTStart;
165
+ }
166
+ selectionRef.current?.setAttribute('data-range', `${formatTimeSelection(t1)} — ${formatTimeSelection(t2)}`);
167
+ selectionRef.current?.setAttribute('data-duration', `${formatTimeSelection(t2 - t1)} selected`);
168
+ }
169
+ if (Date.now() < hoverStartT) {
170
+ nextFrame = requestAnimationFrame(onFrame);
171
+ return;
172
+ }
173
+ if (scrollLeft !== scrollX || scrollTop !== scrollY) {
174
+ scrollX = scrollLeft;
175
+ scrollY = scrollTop;
176
+ nextFrame = requestAnimationFrame(onFrame);
177
+ return;
178
+ }
179
+ if (x - rect.left < 128) {
180
+ labelTextRef.current?.setAttribute('data-align', 'left');
181
+ }
182
+ else if (x - rect.left > rect.width - 128) {
183
+ labelTextRef.current?.setAttribute('data-align', 'right');
184
+ }
185
+ else {
186
+ labelTextRef.current?.removeAttribute('data-align');
187
+ }
188
+ if (!hasMoved && !isExternalDrag) {
189
+ const cache = memoCacheRef.current;
190
+ // Span Hover
191
+ const rowMin = getRowFromY(scrollTop) - HOVER_OVERSCAN;
192
+ const rowMax = getRowFromY(scrollTop + rect.height) + HOVER_OVERSCAN;
193
+ for (const span of spansRef.current) {
194
+ const isHovered = span.row >= rowMin &&
195
+ span.row <= rowMax &&
196
+ t >= span.startTime &&
197
+ t <= span.endTime;
198
+ if (span.isHovered === isHovered)
199
+ continue;
200
+ span.isHovered = isHovered;
201
+ cache.set(span.span.spanId, {});
202
+ }
203
+ // Event Hover
204
+ const eventSpreadPx = 12;
205
+ const eventSpreadMs = eventSpreadPx / scale;
206
+ for (const event of eventsRef.current) {
207
+ const isHovered = t >= event.timestamp - eventSpreadMs &&
208
+ t <= event.timestamp + eventSpreadMs;
209
+ if (event.isHovered === isHovered)
210
+ continue;
211
+ event.isHovered = isHovered;
212
+ const $event = event.ref?.current;
213
+ if (!$event)
214
+ continue;
215
+ $event.setAttribute('data-hovered', String(isHovered));
216
+ }
217
+ dispatch({
218
+ type: 'forceRender',
219
+ });
220
+ }
221
+ };
222
+ nextFrame = requestAnimationFrame(onFrame);
223
+ const onPointerEnter = (event) => {
224
+ if (event.pointerType !== 'mouse')
225
+ return;
226
+ hasEnteredRef.current = true;
227
+ };
228
+ const onPointerLeave = () => {
229
+ if (!hasEnteredRef.current)
230
+ return;
231
+ hasEnteredRef.current = false;
232
+ removeHover();
233
+ };
234
+ const onMouseMove = ({ clientX }) => {
235
+ x = clientX;
236
+ xRef.current = x;
237
+ cancelAnimationFrame(nextFrame);
238
+ nextFrame = requestAnimationFrame(onFrame);
239
+ };
240
+ const onContextMenu = (event) => {
241
+ event.preventDefault();
242
+ };
243
+ const onMouseDown = (event) => {
244
+ if (event.button === 2) {
245
+ isRightClick = true;
246
+ event.preventDefault();
247
+ }
248
+ else if (event.button !== 0) {
249
+ return;
250
+ }
251
+ else {
252
+ isRightClick = false;
253
+ }
254
+ if (timelineRef.current?.contains(event.target)) {
255
+ xStart = x;
256
+ isDragging = true;
257
+ }
258
+ else {
259
+ isExternalDrag = true;
260
+ requestAnimationFrame(removeHover);
261
+ }
262
+ };
263
+ const onMouseUp = (event) => {
264
+ isExternalDrag = false;
265
+ if (!isDragging)
266
+ return;
267
+ isDragging = false;
268
+ if (!hasMoved)
269
+ return;
270
+ hasMoved = false;
271
+ setSelectionStyle('display', '');
272
+ setSelectionStyle('left', '');
273
+ setSelectionStyle('right', '');
274
+ setSelectionStyle('width', '');
275
+ event.preventDefault();
276
+ event.stopImmediatePropagation();
277
+ if (isRightClick) {
278
+ isRightClick = false;
279
+ return;
280
+ }
281
+ if (!rectRef.current)
282
+ updateRect();
283
+ const rect = rectRef.current;
284
+ if (!rect)
285
+ return;
286
+ const { scrollLeft } = $timeline;
287
+ const start = Math.max(0, Math.min((xStart + scrollLeft - rect.left - TIMELINE_PADDING) / scale, root.duration));
288
+ const end = Math.max(0, Math.min((x + scrollLeft - rect.left - TIMELINE_PADDING) / scale, root.duration));
289
+ dispatch({
290
+ type: 'scaleToRange',
291
+ t1: start + root.startTime,
292
+ t2: end + root.startTime,
293
+ });
294
+ };
295
+ const onKeyDown = (event) => {
296
+ if (!isDragging)
297
+ return;
298
+ if (event.key !== 'Escape')
299
+ return;
300
+ isRightClick = true;
301
+ onMouseUp(event);
302
+ };
303
+ const onWindowScroll = () => {
304
+ rectRef.current = undefined;
305
+ trackpadZoomRef.current = undefined;
306
+ cancelAnimationFrame(nextFrame);
307
+ nextFrame = requestAnimationFrame(onFrame);
308
+ };
309
+ const onScroll = () => {
310
+ cancelAnimationFrame(nextFrame);
311
+ nextFrame = requestAnimationFrame(onFrame);
312
+ };
313
+ const observer = new ResizeObserver(() => {
314
+ // NOTE: I tried to use the entry from this to immediately set the rect,
315
+ // but for some reason it has different dimensions than the one from
316
+ // .getBoundingClientRect()
317
+ rectRef.current = undefined;
318
+ });
319
+ observer.observe($timeline);
320
+ window.addEventListener('mousemove', onMouseMove);
321
+ $timeline.addEventListener('contextmenu', onContextMenu);
322
+ window.addEventListener('mousedown', onMouseDown);
323
+ window.addEventListener('mouseup', onMouseUp);
324
+ window.addEventListener('blur', onMouseUp);
325
+ window.addEventListener('keydown', onKeyDown, true);
326
+ window.addEventListener('scroll', onWindowScroll);
327
+ $timeline.addEventListener('scroll', onScroll);
328
+ $timeline.addEventListener('pointerenter', onPointerEnter);
329
+ $timeline.addEventListener('pointerleave', onPointerLeave);
330
+ return () => {
331
+ observer.disconnect();
332
+ window.removeEventListener('mousemove', onMouseMove);
333
+ $timeline.removeEventListener('contextmenu', onContextMenu);
334
+ window.removeEventListener('mousedown', onMouseDown);
335
+ window.removeEventListener('mouseup', onMouseUp);
336
+ window.removeEventListener('blur', onMouseUp);
337
+ window.removeEventListener('keydown', onKeyDown, true);
338
+ window.removeEventListener('scroll', onWindowScroll);
339
+ $timeline.removeEventListener('scroll', onScroll);
340
+ $timeline.removeEventListener('pointerenter', onPointerEnter);
341
+ $timeline.removeEventListener('pointerleave', onPointerLeave);
342
+ cancelAnimationFrame(nextFrame);
343
+ xRef.current = x;
344
+ removeHover();
345
+ };
346
+ }, [
347
+ dispatch,
348
+ root,
349
+ scale,
350
+ setStyle,
351
+ setLabelStyle,
352
+ setSelectionStyle,
353
+ memoCacheRef,
354
+ timelineRef,
355
+ scrollSnapshotRef,
356
+ ]);
357
+ const trackpadZoomRef = useRef(undefined);
358
+ useTrackpadZoom((delta) => {
359
+ const $timeline = timelineRef.current;
360
+ if (!$timeline)
361
+ return;
362
+ rectRef.current ??= $timeline.getBoundingClientRect();
363
+ const rect = rectRef.current;
364
+ const anchorX = Math.max(0, Math.min(xRef.current - rect.left - TIMELINE_PADDING, rect.width - 2 * TIMELINE_PADDING));
365
+ let anchorT = 0;
366
+ let existing = trackpadZoomRef.current;
367
+ if (existing?.anchorX === anchorX) {
368
+ anchorT = existing.anchorT;
369
+ }
370
+ else {
371
+ anchorT = ($timeline.scrollLeft + anchorX) / scale;
372
+ existing = {
373
+ anchorT,
374
+ anchorX,
375
+ };
376
+ trackpadZoomRef.current = existing;
377
+ }
378
+ dispatch({
379
+ type: 'trackpadScale',
380
+ delta: delta / 64,
381
+ anchorT,
382
+ anchorX,
383
+ });
384
+ });
385
+ return (<>
386
+ <div className={styles.cursorMarkerStickyParent}>
387
+ <div className={styles.cursorMarkerLabelContainer} ref={labelRef} style={labelStyle}>
388
+ <div className={styles.cursorMarkerLabel} ref={labelTextRef}/>
389
+ </div>
390
+ </div>
391
+ <div className={styles.cursorMarkerStickyParent}>
392
+ <div className={styles.cursorMarkerContainer} ref={ref} style={style}>
393
+ <div className={styles.cursorMarker}>
394
+ <div className={styles.cursorSelection} ref={selectionRef} style={selectionStyle}/>
395
+ </div>
396
+ </div>
397
+ </div>
398
+ </>);
399
+ }
400
+ //# sourceMappingURL=markers.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"markers.jsx","sourceRoot":"","sources":["../../../src/trace-viewer/components/markers.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,31 @@
1
+ import type { MutableRefObject } from 'react';
2
+ import type { MemoCache, MemoCacheKey, RootNode, ScrollSnapshot, SpanNode, VisibleSpan, VisibleSpanEvent } from '../types';
3
+ export declare const getSpanColorClassName: (node: SpanNode) => string;
4
+ export declare const getSpanClassName: (node: VisibleSpan, scale: number) => string;
5
+ export declare const SpanNodes: import("react").NamedExoticComponent<{
6
+ root: RootNode;
7
+ scale: number;
8
+ spans: VisibleSpan[];
9
+ scrollSnapshotRef: MutableRefObject<ScrollSnapshot | undefined>;
10
+ cacheKey?: MemoCacheKey;
11
+ cache: MemoCache;
12
+ customSpanClassNameFunc?: (span: SpanNode) => string;
13
+ customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;
14
+ }>;
15
+ export declare const SpanComponent: import("react").NamedExoticComponent<{
16
+ node: VisibleSpan;
17
+ root: RootNode;
18
+ scale: number;
19
+ scrollSnapshotRef: MutableRefObject<ScrollSnapshot | undefined>;
20
+ cacheKey?: MemoCacheKey;
21
+ customSpanClassNameFunc?: (span: SpanNode) => string;
22
+ customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;
23
+ }>;
24
+ export declare const SpanEventComponent: import("react").NamedExoticComponent<{
25
+ event: VisibleSpanEvent;
26
+ node: VisibleSpan;
27
+ root: RootNode;
28
+ scale: number;
29
+ customSpanEventClassNameFunc?: (event: VisibleSpanEvent) => string;
30
+ }>;
31
+ //# sourceMappingURL=node.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"node.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/node.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAGxE,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,WAAW,EACX,gBAAgB,EACjB,MAAM,UAAU,CAAC;AAUlB,eAAO,MAAM,qBAAqB,GAAI,MAAM,QAAQ,KAAG,MAGtD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,MAAM,WAAW,EAAE,OAAO,MAAM,KAAG,MAanE,CAAC;AAUF,eAAO,MAAM,SAAS;UASd,QAAQ;WACP,MAAM;WACN,WAAW,EAAE;uBACD,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC;eACpD,YAAY;WAChB,SAAS;8BACU,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM;mCACrB,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM;EAclE,CAAC;AAEH,eAAO,MAAM,aAAa;UAQlB,WAAW;UACX,QAAQ;WACP,MAAM;uBACM,gBAAgB,CAAC,cAAc,GAAG,SAAS,CAAC;eACpD,YAAY;8BACG,CAAC,IAAI,EAAE,QAAQ,KAAK,MAAM;mCACrB,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM;EA+FlE,CAAC;AAEH,eAAO,MAAM,kBAAkB;WAOtB,gBAAgB;UACjB,WAAW;UACX,QAAQ;WACP,MAAM;mCACkB,CAAC,KAAK,EAAE,gBAAgB,KAAK,MAAM;EAoDlE,CAAC"}
@@ -0,0 +1,116 @@
1
+ import { clsx } from 'clsx';
2
+ import { memo, useRef } from 'react';
3
+ import styles from '../trace-viewer.module.css';
4
+ import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';
5
+ import { formatDuration } from '../util/timing';
6
+ const isSpanSmall = (node, scale) => node.duration * scale < 64;
7
+ const isSpanHuge = (node, scale) => node.duration * scale >= 500;
8
+ export const getSpanColorClassName = (node) => {
9
+ if (node.isVercel)
10
+ return String(styles.colorVercel);
11
+ return String(styles[`color${node.resourceIndex % 5}`]);
12
+ };
13
+ export const getSpanClassName = (node, scale) => {
14
+ const isHuge = isSpanHuge(node, scale);
15
+ const isHovered = node.isHovered && !isHuge && node.isHighlighted !== false;
16
+ return clsx(styles.spanNode, isHuge && styles.huge, isSpanSmall(node, scale) && styles.small, node.isSelected && styles.selected, isHovered && styles.xHover, node.isHighlighted ? styles.colorHighlight : getSpanColorClassName(node), node.isHighlighted === false && styles.unlit);
17
+ };
18
+ const getDuration = (node) => {
19
+ if (node.isInstrumentationHint) {
20
+ return 'Get Started';
21
+ }
22
+ return formatDuration(node.duration);
23
+ };
24
+ export const SpanNodes = memo(function SpanNodes({ root, scale, spans, scrollSnapshotRef, cache, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
25
+ return spans.map((x) => (<SpanComponent cacheKey={cache.get(x.span.spanId)} customSpanEventClassNameFunc={customSpanEventClassNameFunc} customSpanClassNameFunc={customSpanClassNameFunc} key={x.span.spanId} node={x} root={root} scale={scale} scrollSnapshotRef={scrollSnapshotRef}/>));
26
+ });
27
+ export const SpanComponent = memo(function SpanComponent({ node, root, scale, scrollSnapshotRef, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
28
+ const ref = useRef(null);
29
+ node.ref = ref;
30
+ const { span } = node;
31
+ const duration = getDuration(node);
32
+ const left = (node.startTime - root.startTime) * scale;
33
+ let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
34
+ const actualWidth = node.duration * scale;
35
+ // Enforce minimum width so very short spans are always visible
36
+ const MIN_SPAN_WIDTH = 4;
37
+ const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
38
+ let height = ROW_HEIGHT;
39
+ const isHuge = isSpanHuge(node, scale);
40
+ // Check if span is small based on actual width, not minimum width
41
+ const isSmall = actualWidth < 64;
42
+ const isHovered = node.isHovered && !isHuge && node.isHighlighted !== false;
43
+ if (isSmall && !isHovered) {
44
+ height *= 0.4;
45
+ top += (ROW_HEIGHT - height) * 0.5;
46
+ }
47
+ let isNearRightSide = false;
48
+ if (isHovered) {
49
+ let { duration: visibleDuration, endTime: visibleEndTime } = root;
50
+ const snapshot = scrollSnapshotRef.current;
51
+ if (snapshot) {
52
+ visibleDuration = snapshot.endTime - snapshot.startTime;
53
+ visibleEndTime = snapshot.endTime;
54
+ }
55
+ isNearRightSide = visibleEndTime - node.startTime < 0.25 * visibleDuration;
56
+ }
57
+ // Get custom class name from callback if provided
58
+ const customClassName = customSpanClassNameFunc
59
+ ? customSpanClassNameFunc(node)
60
+ : '';
61
+ return (<>
62
+ <button aria-label={`${span.name} - ${duration}`} className={clsx(getSpanClassName(node, scale), customClassName)} data-span-id={span.spanId} data-start-time={node.startTime - root.startTime} data-right-side={isNearRightSide} ref={ref} style={{
63
+ // Use actualWidth for CSS variable so hover expansion is accurate
64
+ '--span-width': `${Math.max(actualWidth, 1)}px`,
65
+ minWidth: isHovered ? width : undefined,
66
+ width: isHovered ? undefined : width,
67
+ height,
68
+ maxWidth: isHovered && !isNearRightSide
69
+ ? (root.endTime - node.startTime) * scale
70
+ : undefined,
71
+ containIntrinsicWidth: isHovered ? undefined : width,
72
+ containIntrinsicHeight: height,
73
+ left: isNearRightSide ? undefined : left,
74
+ right: isNearRightSide
75
+ ? (root.endTime - node.endTime) * scale
76
+ : undefined,
77
+ top,
78
+ }} type="button">
79
+ {isSmall && !isHovered ? null : (<>
80
+ <span className={styles.spanName}>{node.label || span.name}</span>
81
+ {isHuge ? <span className={styles.spanSpacer}/> : null}
82
+ {isHovered || width > 128 ? (<span className={styles.spanDuration}>{duration}</span>) : null}
83
+ </>)}
84
+ </button>
85
+ {node.events && !isSmall
86
+ ? node.events.map((x) => (<SpanEventComponent customSpanEventClassNameFunc={customSpanEventClassNameFunc} event={x} key={x.key} node={node} root={root} scale={scale}/>))
87
+ : null}
88
+ </>);
89
+ });
90
+ export const SpanEventComponent = memo(function SpanEventComponent({ event, node, root, scale, customSpanEventClassNameFunc, }) {
91
+ const ref = useRef(null);
92
+ event.ref = ref;
93
+ const { event: { name }, } = event;
94
+ const timestamp = formatDuration(event.timestamp - root.startTime);
95
+ const left = (event.timestamp - root.startTime) * scale;
96
+ const top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
97
+ // Get custom class name from callback if provided
98
+ const customClassName = customSpanEventClassNameFunc
99
+ ? customSpanEventClassNameFunc(event)
100
+ : '';
101
+ return (<div title={`${name} at ${timestamp}`} className={clsx(styles.spanNodeEvent, customClassName, node.isHighlighted
102
+ ? styles.colorHighlight
103
+ : getSpanColorClassName(node), node.isHighlighted === false && styles.unlit)} data-hovered={event.isHovered} ref={ref} style={{
104
+ left,
105
+ top,
106
+ }}>
107
+ <div className={clsx(styles.hoverInfo, (event.timestamp - node.startTime) / node.duration < 0.5
108
+ ? styles.alignStart
109
+ : styles.alignEnd)}>
110
+ <span className={styles.eventName}>{name}</span>
111
+ <span className={styles.eventTimestamp}>{timestamp}</span>
112
+ </div>
113
+ <div className={styles.eventDiamond}/>
114
+ </div>);
115
+ });
116
+ //# sourceMappingURL=node.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"node.jsx","sourceRoot":"","sources":["../../../src/trace-viewer/components/node.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,9 @@
1
+ import type { ChangeEventHandler, ReactNode } from 'react';
2
+ export declare function SearchInput({ height, width, value, placeholder, onChange, }: {
3
+ height: number | string;
4
+ width?: number | string;
5
+ value: string;
6
+ placeholder?: string;
7
+ onChange: ChangeEventHandler<HTMLInputElement>;
8
+ }): ReactNode;
9
+ //# sourceMappingURL=search-input.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/search-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3D,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CAChD,GAAG,SAAS,CAeZ"}
@@ -0,0 +1,16 @@
1
+ import styles from '../trace-viewer.module.css';
2
+ export function SearchInput({ height, width, value, placeholder, onChange, }) {
3
+ return (<label className={styles.searchInputLabel}>
4
+ <div className={styles.searchInputPrefix}>
5
+ <MagnifyingGlassIcon />
6
+ </div>
7
+ <input type="search" value={value} placeholder={placeholder} onChange={onChange} style={{ height, width }}/>
8
+ </label>);
9
+ }
10
+ function MagnifyingGlassIcon() {
11
+ return (<svg width={16} height={16} viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
12
+ <circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.5"/>
13
+ <path d="M11.5 11.5L14 14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
14
+ </svg>);
15
+ }
16
+ //# sourceMappingURL=search-input.jsx.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search-input.jsx","sourceRoot":"","sources":["../../../src/trace-viewer/components/search-input.tsx"],"names":[],"mappings":"AACA,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAEhD,MAAM,UAAU,WAAW,CAAC,EAC1B,MAAM,EACN,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,GAOT;IACC,OAAO,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CACxC;MAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,iBAAiB,CAAC,CACvC;QAAA,CAAC,mBAAmB,CAAC,AAAD,EACtB;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,KAAK,CACJ,IAAI,CAAC,QAAQ,CACb,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAE7B;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,CACL,CAAC,GAAG,CACF,KAAK,CAAC,CAAC,EAAE,CAAC,CACV,MAAM,CAAC,CAAC,EAAE,CAAC,CACX,OAAO,CAAC,WAAW,CACnB,IAAI,CAAC,MAAM,CACX,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,OAAO,CAEjB;MAAA,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,EACrE;MAAA,CAAC,IAAI,CACH,CAAC,CAAC,kBAAkB,CACpB,MAAM,CAAC,cAAc,CACrB,WAAW,CAAC,KAAK,CACjB,aAAa,CAAC,OAAO,EAEzB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,3 @@
1
+ import { type ReactNode } from 'react';
2
+ export declare function SearchBar(): ReactNode;
3
+ //# sourceMappingURL=search.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAM5D,wBAAgB,SAAS,IAAI,SAAS,CAMrC"}