@workflow/web-shared 4.0.1-beta.10
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/LICENSE.md +201 -0
- package/README.md +76 -0
- package/dist/api/workflow-api-client.d.ts +303 -0
- package/dist/api/workflow-api-client.d.ts.map +1 -0
- package/dist/api/workflow-api-client.js +797 -0
- package/dist/api/workflow-api-client.js.map +1 -0
- package/dist/api/workflow-server-actions.d.ts +97 -0
- package/dist/api/workflow-server-actions.d.ts.map +1 -0
- package/dist/api/workflow-server-actions.js +328 -0
- package/dist/api/workflow-server-actions.js.map +1 -0
- package/dist/components/ui/alert.d.ts +9 -0
- package/dist/components/ui/alert.d.ts.map +1 -0
- package/dist/components/ui/alert.js +23 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +11 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +19 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/run-trace-view.d.ts +8 -0
- package/dist/run-trace-view.d.ts.map +1 -0
- package/dist/run-trace-view.js +15 -0
- package/dist/run-trace-view.js.map +1 -0
- package/dist/sidebar/attribute-panel.d.ts +11 -0
- package/dist/sidebar/attribute-panel.d.ts.map +1 -0
- package/dist/sidebar/attribute-panel.js +129 -0
- package/dist/sidebar/attribute-panel.js.map +1 -0
- package/dist/sidebar/detail-card.d.ts +6 -0
- package/dist/sidebar/detail-card.d.ts.map +1 -0
- package/dist/sidebar/detail-card.js +9 -0
- package/dist/sidebar/detail-card.js.map +1 -0
- package/dist/sidebar/events-list.d.ts +8 -0
- package/dist/sidebar/events-list.d.ts.map +1 -0
- package/dist/sidebar/events-list.js +35 -0
- package/dist/sidebar/events-list.js.map +1 -0
- package/dist/sidebar/workflow-detail-panel.d.ts +8 -0
- package/dist/sidebar/workflow-detail-panel.d.ts.map +1 -0
- package/dist/sidebar/workflow-detail-panel.js +56 -0
- package/dist/sidebar/workflow-detail-panel.js.map +1 -0
- package/dist/trace-viewer/components/map.d.ts +8 -0
- package/dist/trace-viewer/components/map.d.ts.map +1 -0
- package/dist/trace-viewer/components/map.js +162 -0
- package/dist/trace-viewer/components/map.js.map +1 -0
- package/dist/trace-viewer/components/markers.d.ts +22 -0
- package/dist/trace-viewer/components/markers.d.ts.map +1 -0
- package/dist/trace-viewer/components/markers.js +376 -0
- package/dist/trace-viewer/components/markers.js.map +1 -0
- package/dist/trace-viewer/components/node.d.ts +31 -0
- package/dist/trace-viewer/components/node.d.ts.map +1 -0
- package/dist/trace-viewer/components/node.js +102 -0
- package/dist/trace-viewer/components/node.js.map +1 -0
- package/dist/trace-viewer/components/search-input.d.ts +9 -0
- package/dist/trace-viewer/components/search-input.d.ts.map +1 -0
- package/dist/trace-viewer/components/search-input.js +9 -0
- package/dist/trace-viewer/components/search-input.js.map +1 -0
- package/dist/trace-viewer/components/search.d.ts +3 -0
- package/dist/trace-viewer/components/search.d.ts.map +1 -0
- package/dist/trace-viewer/components/search.js +24 -0
- package/dist/trace-viewer/components/search.js.map +1 -0
- package/dist/trace-viewer/components/span-detail-panel.d.ts +10 -0
- package/dist/trace-viewer/components/span-detail-panel.d.ts.map +1 -0
- package/dist/trace-viewer/components/span-detail-panel.js +284 -0
- package/dist/trace-viewer/components/span-detail-panel.js.map +1 -0
- package/dist/trace-viewer/components/ui.d.ts +28 -0
- package/dist/trace-viewer/components/ui.d.ts.map +1 -0
- package/dist/trace-viewer/components/ui.js +39 -0
- package/dist/trace-viewer/components/ui.js.map +1 -0
- package/dist/trace-viewer/components/zoom-button.d.ts +3 -0
- package/dist/trace-viewer/components/zoom-button.d.ts.map +1 -0
- package/dist/trace-viewer/components/zoom-button.js +29 -0
- package/dist/trace-viewer/components/zoom-button.js.map +1 -0
- package/dist/trace-viewer/components/zoom-icons.d.ts +11 -0
- package/dist/trace-viewer/components/zoom-icons.d.ts.map +1 -0
- package/dist/trace-viewer/components/zoom-icons.js +11 -0
- package/dist/trace-viewer/components/zoom-icons.js.map +1 -0
- package/dist/trace-viewer/context.d.ts +183 -0
- package/dist/trace-viewer/context.d.ts.map +1 -0
- package/dist/trace-viewer/context.js +325 -0
- package/dist/trace-viewer/context.js.map +1 -0
- package/dist/trace-viewer/index.d.ts +5 -0
- package/dist/trace-viewer/index.d.ts.map +1 -0
- package/dist/trace-viewer/index.js +4 -0
- package/dist/trace-viewer/index.js.map +1 -0
- package/dist/trace-viewer/trace-viewer.d.ts +22 -0
- package/dist/trace-viewer/trace-viewer.d.ts.map +1 -0
- package/dist/trace-viewer/trace-viewer.js +285 -0
- package/dist/trace-viewer/trace-viewer.js.map +1 -0
- package/dist/trace-viewer/trace-viewer.module.css +1275 -0
- package/dist/trace-viewer/types.d.ts +201 -0
- package/dist/trace-viewer/types.d.ts.map +1 -0
- package/dist/trace-viewer/types.js +2 -0
- package/dist/trace-viewer/types.js.map +1 -0
- package/dist/trace-viewer/util/constants.d.ts +9 -0
- package/dist/trace-viewer/util/constants.d.ts.map +1 -0
- package/dist/trace-viewer/util/constants.js +9 -0
- package/dist/trace-viewer/util/constants.js.map +1 -0
- package/dist/trace-viewer/util/scrollbar-width.d.ts +2 -0
- package/dist/trace-viewer/util/scrollbar-width.d.ts.map +1 -0
- package/dist/trace-viewer/util/scrollbar-width.js +14 -0
- package/dist/trace-viewer/util/scrollbar-width.js.map +1 -0
- package/dist/trace-viewer/util/timing.d.ts +8 -0
- package/dist/trace-viewer/util/timing.d.ts.map +1 -0
- package/dist/trace-viewer/util/timing.js +29 -0
- package/dist/trace-viewer/util/timing.js.map +1 -0
- package/dist/trace-viewer/util/tree.d.ts +13 -0
- package/dist/trace-viewer/util/tree.d.ts.map +1 -0
- package/dist/trace-viewer/util/tree.js +223 -0
- package/dist/trace-viewer/util/tree.js.map +1 -0
- package/dist/trace-viewer/util/use-immediate-style.d.ts +15 -0
- package/dist/trace-viewer/util/use-immediate-style.d.ts.map +1 -0
- package/dist/trace-viewer/util/use-immediate-style.js +22 -0
- package/dist/trace-viewer/util/use-immediate-style.js.map +1 -0
- package/dist/trace-viewer/util/use-streaming-spans.d.ts +8 -0
- package/dist/trace-viewer/util/use-streaming-spans.d.ts.map +1 -0
- package/dist/trace-viewer/util/use-streaming-spans.js +332 -0
- package/dist/trace-viewer/util/use-streaming-spans.js.map +1 -0
- package/dist/trace-viewer/util/use-trackpad-zoom.d.ts +6 -0
- package/dist/trace-viewer/util/use-trackpad-zoom.d.ts.map +1 -0
- package/dist/trace-viewer/util/use-trackpad-zoom.js +38 -0
- package/dist/trace-viewer/util/use-trackpad-zoom.js.map +1 -0
- package/dist/trace-viewer/worker.d.ts +2 -0
- package/dist/trace-viewer/worker.d.ts.map +1 -0
- package/dist/trace-viewer/worker.js +107 -0
- package/dist/trace-viewer/worker.js.map +1 -0
- package/dist/workflow-trace-view.d.ts +13 -0
- package/dist/workflow-trace-view.d.ts.map +1 -0
- package/dist/workflow-trace-view.js +118 -0
- package/dist/workflow-trace-view.js.map +1 -0
- package/dist/workflow-traces/event-colors.d.ts +31 -0
- package/dist/workflow-traces/event-colors.d.ts.map +1 -0
- package/dist/workflow-traces/event-colors.js +68 -0
- package/dist/workflow-traces/event-colors.js.map +1 -0
- package/dist/workflow-traces/trace-colors.d.ts +15 -0
- package/dist/workflow-traces/trace-colors.d.ts.map +1 -0
- package/dist/workflow-traces/trace-colors.js +89 -0
- package/dist/workflow-traces/trace-colors.js.map +1 -0
- package/dist/workflow-traces/trace-span-construction.d.ts +31 -0
- package/dist/workflow-traces/trace-span-construction.d.ts.map +1 -0
- package/dist/workflow-traces/trace-span-construction.js +173 -0
- package/dist/workflow-traces/trace-span-construction.js.map +1 -0
- package/dist/workflow-traces/trace-time-utils.d.ts +13 -0
- package/dist/workflow-traces/trace-time-utils.d.ts.map +1 -0
- package/dist/workflow-traces/trace-time-utils.js +34 -0
- package/dist/workflow-traces/trace-time-utils.js.map +1 -0
- package/package.json +62 -0
- package/server/README.md +1 -0
- package/server/package.json +4 -0
|
@@ -0,0 +1,376 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { useEffect, useMemo, useRef } from 'react';
|
|
4
|
+
import { useTraceViewer } from '../context';
|
|
5
|
+
import styles from '../trace-viewer.module.css';
|
|
6
|
+
import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING, TIMELINE_PADDING, } from '../util/constants';
|
|
7
|
+
import { formatDuration, formatTimeSelection } from '../util/timing';
|
|
8
|
+
import { useImmediateStyle } from '../util/use-immediate-style';
|
|
9
|
+
import { useTrackpadZoom } from '../util/use-trackpad-zoom';
|
|
10
|
+
const DIVISORS = [1, 2, 4, 5, 8, 10];
|
|
11
|
+
export function Markers({ scale }) {
|
|
12
|
+
const { state: { root }, } = useTraceViewer();
|
|
13
|
+
const fullDuration = root.duration;
|
|
14
|
+
const logFull = Math.floor(Math.log10(fullDuration));
|
|
15
|
+
const logHalf = Math.floor(Math.log10(fullDuration * 0.5));
|
|
16
|
+
let markerDuration = Math.max(2, 10 ** logFull * (logHalf === logFull ? 1 : 0.5));
|
|
17
|
+
let markerWidth = markerDuration * scale;
|
|
18
|
+
let divisor = 1;
|
|
19
|
+
for (const d of DIVISORS) {
|
|
20
|
+
if (markerDuration / d < 24)
|
|
21
|
+
break;
|
|
22
|
+
divisor = d;
|
|
23
|
+
}
|
|
24
|
+
markerDuration /= divisor;
|
|
25
|
+
markerWidth /= divisor;
|
|
26
|
+
const markerCount = Math.ceil(fullDuration / markerDuration);
|
|
27
|
+
// How often labels should appear for markers, e.g. 3 === one label for every third marker
|
|
28
|
+
const labelSpacing = Math.ceil(100 / markerWidth) || 1;
|
|
29
|
+
return (_jsx("div", { className: styles.markersContainer, children: _jsx("div", { "aria-hidden": true, className: styles.markers, style: {
|
|
30
|
+
width: Math.floor(root.duration * scale + 15),
|
|
31
|
+
visibility: scale !== -1 ? 'visible' : 'hidden',
|
|
32
|
+
'--marker-width': `${markerWidth}px`,
|
|
33
|
+
}, children: new Array(markerCount).fill(null).map((_, i) => {
|
|
34
|
+
const hasLabel = i % labelSpacing === 0;
|
|
35
|
+
return (_jsx("span", { className: clsx(styles.marker, !hasLabel && styles.notch), children: hasLabel ? (_jsx("span", { className: styles.markerLabel, children: formatDuration(markerDuration * i) })) : null }, String(i)));
|
|
36
|
+
}) }) }));
|
|
37
|
+
}
|
|
38
|
+
export function EventMarkers({ events, root, scale, }) {
|
|
39
|
+
// Filter out events that should not show vertical lines (workflow-specific feature)
|
|
40
|
+
const eventsWithVerticalLines = useMemo(() => events.filter((x) => x.event.showVerticalLine !== false), [events]);
|
|
41
|
+
return (_jsx("div", { className: styles.eventMarkersContainer, children: _jsx("div", { "aria-hidden": true, className: styles.eventMarkers, style: {
|
|
42
|
+
width: Math.floor(root.duration * scale),
|
|
43
|
+
}, children: eventsWithVerticalLines.map((x) => {
|
|
44
|
+
return (_jsx("span", { className: clsx(styles.eventMarker), style: {
|
|
45
|
+
left: Math.floor((x.timestamp - root.startTime) * scale),
|
|
46
|
+
...(x.event.color && { borderLeftColor: x.event.color }),
|
|
47
|
+
} }, x.key));
|
|
48
|
+
}) }) }));
|
|
49
|
+
}
|
|
50
|
+
const HOVER_OVERSCAN = 2;
|
|
51
|
+
export function CursorMarker({ memoCacheRef, timelineRef, root, spans, events, scale, dispatch, scrollSnapshotRef, }) {
|
|
52
|
+
const hasEnteredRef = useRef(false);
|
|
53
|
+
const spansRef = useRef(spans);
|
|
54
|
+
spansRef.current = spans;
|
|
55
|
+
const eventsRef = useRef(events);
|
|
56
|
+
eventsRef.current = events;
|
|
57
|
+
const labelRef = useRef(null);
|
|
58
|
+
const { style: labelStyle, setStyle: setLabelStyle } = useImmediateStyle(labelRef);
|
|
59
|
+
const labelTextRef = useRef(null);
|
|
60
|
+
const ref = useRef(null);
|
|
61
|
+
const { style, setStyle } = useImmediateStyle(ref);
|
|
62
|
+
const rectRef = useRef(undefined);
|
|
63
|
+
const selectionRef = useRef(null);
|
|
64
|
+
const { style: selectionStyle, setStyle: setSelectionStyle } = useImmediateStyle(selectionRef);
|
|
65
|
+
const xRef = useRef(0);
|
|
66
|
+
useEffect(() => {
|
|
67
|
+
const $timeline = timelineRef.current;
|
|
68
|
+
if (!$timeline)
|
|
69
|
+
return;
|
|
70
|
+
let x = xRef.current;
|
|
71
|
+
let xStart = 0;
|
|
72
|
+
let isDragging = false;
|
|
73
|
+
let isExternalDrag = false;
|
|
74
|
+
let hasMoved = false;
|
|
75
|
+
let isRightClick = false;
|
|
76
|
+
let scrollX = 0;
|
|
77
|
+
let scrollY = 0;
|
|
78
|
+
const hoverStartT = Date.now() + 500;
|
|
79
|
+
const updateRect = () => {
|
|
80
|
+
if (rectRef.current)
|
|
81
|
+
return;
|
|
82
|
+
rectRef.current = $timeline.getBoundingClientRect();
|
|
83
|
+
};
|
|
84
|
+
const getRowFromY = (y) => {
|
|
85
|
+
if (!rectRef.current)
|
|
86
|
+
return 0;
|
|
87
|
+
return ((y - MARKER_HEIGHT - TIMELINE_PADDING) / (ROW_HEIGHT + ROW_PADDING));
|
|
88
|
+
};
|
|
89
|
+
const removeHover = () => {
|
|
90
|
+
const cache = memoCacheRef.current;
|
|
91
|
+
// Remove hover styling from any elements that have it
|
|
92
|
+
for (const span of spansRef.current) {
|
|
93
|
+
if (!span.isHovered)
|
|
94
|
+
continue;
|
|
95
|
+
span.isHovered = false;
|
|
96
|
+
cache.set(span.span.spanId, {});
|
|
97
|
+
}
|
|
98
|
+
dispatch({
|
|
99
|
+
type: 'forceRender',
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
let nextFrame = 0;
|
|
103
|
+
const onFrame = () => {
|
|
104
|
+
if (!hasEnteredRef.current)
|
|
105
|
+
return;
|
|
106
|
+
if (!rectRef.current)
|
|
107
|
+
updateRect();
|
|
108
|
+
const rect = rectRef.current;
|
|
109
|
+
if (!rect)
|
|
110
|
+
return;
|
|
111
|
+
const { scrollLeft, scrollTop } = $timeline;
|
|
112
|
+
const left = Math.max(0, Math.min(x + scrollLeft - rect.left - TIMELINE_PADDING, root.duration * scale));
|
|
113
|
+
const leftStyle = `${left - scrollLeft + TIMELINE_PADDING}px`;
|
|
114
|
+
setStyle('left', leftStyle);
|
|
115
|
+
setLabelStyle('left', leftStyle);
|
|
116
|
+
const t = root.startTime + left / scale;
|
|
117
|
+
const labelT = t - root.startTime;
|
|
118
|
+
if (labelT < 0 || labelT > root.duration) {
|
|
119
|
+
labelTextRef.current?.removeAttribute('data-text');
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
labelTextRef.current?.setAttribute('data-text', formatTimeSelection(labelT));
|
|
123
|
+
}
|
|
124
|
+
if (isDragging) {
|
|
125
|
+
const xDelta = x - xStart;
|
|
126
|
+
const width = Math.abs(xDelta);
|
|
127
|
+
if (!hasMoved) {
|
|
128
|
+
if (width < 4)
|
|
129
|
+
return;
|
|
130
|
+
hasMoved = true;
|
|
131
|
+
setSelectionStyle('display', 'flex');
|
|
132
|
+
removeHover();
|
|
133
|
+
}
|
|
134
|
+
if (xDelta > 0) {
|
|
135
|
+
setSelectionStyle('left', '');
|
|
136
|
+
setSelectionStyle('right', '0');
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
setSelectionStyle('left', '0');
|
|
140
|
+
setSelectionStyle('right', '');
|
|
141
|
+
}
|
|
142
|
+
setSelectionStyle('width', `${width}px`);
|
|
143
|
+
const leftStart = Math.max(0, Math.min(xStart + scrollLeft - rect.left - TIMELINE_PADDING, root.duration * scale));
|
|
144
|
+
const labelTStart = leftStart / scale;
|
|
145
|
+
let t1;
|
|
146
|
+
let t2;
|
|
147
|
+
if (labelTStart < labelT) {
|
|
148
|
+
t1 = labelTStart;
|
|
149
|
+
t2 = labelT;
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
t1 = labelT;
|
|
153
|
+
t2 = labelTStart;
|
|
154
|
+
}
|
|
155
|
+
selectionRef.current?.setAttribute('data-range', `${formatTimeSelection(t1)} — ${formatTimeSelection(t2)}`);
|
|
156
|
+
selectionRef.current?.setAttribute('data-duration', `${formatTimeSelection(t2 - t1)} selected`);
|
|
157
|
+
}
|
|
158
|
+
if (Date.now() < hoverStartT) {
|
|
159
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
160
|
+
return;
|
|
161
|
+
}
|
|
162
|
+
if (scrollLeft !== scrollX || scrollTop !== scrollY) {
|
|
163
|
+
scrollX = scrollLeft;
|
|
164
|
+
scrollY = scrollTop;
|
|
165
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
if (x - rect.left < 128) {
|
|
169
|
+
labelTextRef.current?.setAttribute('data-align', 'left');
|
|
170
|
+
}
|
|
171
|
+
else if (x - rect.left > rect.width - 128) {
|
|
172
|
+
labelTextRef.current?.setAttribute('data-align', 'right');
|
|
173
|
+
}
|
|
174
|
+
else {
|
|
175
|
+
labelTextRef.current?.removeAttribute('data-align');
|
|
176
|
+
}
|
|
177
|
+
if (!hasMoved && !isExternalDrag) {
|
|
178
|
+
const cache = memoCacheRef.current;
|
|
179
|
+
// Span Hover
|
|
180
|
+
const rowMin = getRowFromY(scrollTop) - HOVER_OVERSCAN;
|
|
181
|
+
const rowMax = getRowFromY(scrollTop + rect.height) + HOVER_OVERSCAN;
|
|
182
|
+
for (const span of spansRef.current) {
|
|
183
|
+
const isHovered = span.row >= rowMin &&
|
|
184
|
+
span.row <= rowMax &&
|
|
185
|
+
t >= span.startTime &&
|
|
186
|
+
t <= span.endTime;
|
|
187
|
+
if (span.isHovered === isHovered)
|
|
188
|
+
continue;
|
|
189
|
+
span.isHovered = isHovered;
|
|
190
|
+
cache.set(span.span.spanId, {});
|
|
191
|
+
}
|
|
192
|
+
// Event Hover
|
|
193
|
+
const eventSpreadPx = 12;
|
|
194
|
+
const eventSpreadMs = eventSpreadPx / scale;
|
|
195
|
+
for (const event of eventsRef.current) {
|
|
196
|
+
const isHovered = t >= event.timestamp - eventSpreadMs &&
|
|
197
|
+
t <= event.timestamp + eventSpreadMs;
|
|
198
|
+
if (event.isHovered === isHovered)
|
|
199
|
+
continue;
|
|
200
|
+
event.isHovered = isHovered;
|
|
201
|
+
const $event = event.ref?.current;
|
|
202
|
+
if (!$event)
|
|
203
|
+
continue;
|
|
204
|
+
$event.setAttribute('data-hovered', String(isHovered));
|
|
205
|
+
}
|
|
206
|
+
dispatch({
|
|
207
|
+
type: 'forceRender',
|
|
208
|
+
});
|
|
209
|
+
}
|
|
210
|
+
};
|
|
211
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
212
|
+
const onPointerEnter = (event) => {
|
|
213
|
+
if (event.pointerType !== 'mouse')
|
|
214
|
+
return;
|
|
215
|
+
hasEnteredRef.current = true;
|
|
216
|
+
};
|
|
217
|
+
const onPointerLeave = () => {
|
|
218
|
+
if (!hasEnteredRef.current)
|
|
219
|
+
return;
|
|
220
|
+
hasEnteredRef.current = false;
|
|
221
|
+
removeHover();
|
|
222
|
+
};
|
|
223
|
+
const onMouseMove = ({ clientX }) => {
|
|
224
|
+
x = clientX;
|
|
225
|
+
xRef.current = x;
|
|
226
|
+
cancelAnimationFrame(nextFrame);
|
|
227
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
228
|
+
};
|
|
229
|
+
const onContextMenu = (event) => {
|
|
230
|
+
event.preventDefault();
|
|
231
|
+
};
|
|
232
|
+
const onMouseDown = (event) => {
|
|
233
|
+
if (event.button === 2) {
|
|
234
|
+
isRightClick = true;
|
|
235
|
+
event.preventDefault();
|
|
236
|
+
}
|
|
237
|
+
else if (event.button !== 0) {
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
else {
|
|
241
|
+
isRightClick = false;
|
|
242
|
+
}
|
|
243
|
+
if (timelineRef.current?.contains(event.target)) {
|
|
244
|
+
xStart = x;
|
|
245
|
+
isDragging = true;
|
|
246
|
+
}
|
|
247
|
+
else {
|
|
248
|
+
isExternalDrag = true;
|
|
249
|
+
requestAnimationFrame(removeHover);
|
|
250
|
+
}
|
|
251
|
+
};
|
|
252
|
+
const onMouseUp = (event) => {
|
|
253
|
+
isExternalDrag = false;
|
|
254
|
+
if (!isDragging)
|
|
255
|
+
return;
|
|
256
|
+
isDragging = false;
|
|
257
|
+
if (!hasMoved)
|
|
258
|
+
return;
|
|
259
|
+
hasMoved = false;
|
|
260
|
+
setSelectionStyle('display', '');
|
|
261
|
+
setSelectionStyle('left', '');
|
|
262
|
+
setSelectionStyle('right', '');
|
|
263
|
+
setSelectionStyle('width', '');
|
|
264
|
+
event.preventDefault();
|
|
265
|
+
event.stopImmediatePropagation();
|
|
266
|
+
if (isRightClick) {
|
|
267
|
+
isRightClick = false;
|
|
268
|
+
return;
|
|
269
|
+
}
|
|
270
|
+
if (!rectRef.current)
|
|
271
|
+
updateRect();
|
|
272
|
+
const rect = rectRef.current;
|
|
273
|
+
if (!rect)
|
|
274
|
+
return;
|
|
275
|
+
const { scrollLeft } = $timeline;
|
|
276
|
+
const start = Math.max(0, Math.min((xStart + scrollLeft - rect.left - TIMELINE_PADDING) / scale, root.duration));
|
|
277
|
+
const end = Math.max(0, Math.min((x + scrollLeft - rect.left - TIMELINE_PADDING) / scale, root.duration));
|
|
278
|
+
dispatch({
|
|
279
|
+
type: 'scaleToRange',
|
|
280
|
+
t1: start + root.startTime,
|
|
281
|
+
t2: end + root.startTime,
|
|
282
|
+
});
|
|
283
|
+
};
|
|
284
|
+
const onKeyDown = (event) => {
|
|
285
|
+
if (!isDragging)
|
|
286
|
+
return;
|
|
287
|
+
if (event.key !== 'Escape')
|
|
288
|
+
return;
|
|
289
|
+
isRightClick = true;
|
|
290
|
+
onMouseUp(event);
|
|
291
|
+
};
|
|
292
|
+
const onWindowScroll = () => {
|
|
293
|
+
rectRef.current = undefined;
|
|
294
|
+
trackpadZoomRef.current = undefined;
|
|
295
|
+
cancelAnimationFrame(nextFrame);
|
|
296
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
297
|
+
};
|
|
298
|
+
const onScroll = () => {
|
|
299
|
+
cancelAnimationFrame(nextFrame);
|
|
300
|
+
nextFrame = requestAnimationFrame(onFrame);
|
|
301
|
+
};
|
|
302
|
+
const observer = new ResizeObserver(() => {
|
|
303
|
+
// NOTE: I tried to use the entry from this to immediately set the rect,
|
|
304
|
+
// but for some reason it has different dimensions than the one from
|
|
305
|
+
// .getBoundingClientRect()
|
|
306
|
+
rectRef.current = undefined;
|
|
307
|
+
});
|
|
308
|
+
observer.observe($timeline);
|
|
309
|
+
window.addEventListener('mousemove', onMouseMove);
|
|
310
|
+
$timeline.addEventListener('contextmenu', onContextMenu);
|
|
311
|
+
window.addEventListener('mousedown', onMouseDown);
|
|
312
|
+
window.addEventListener('mouseup', onMouseUp);
|
|
313
|
+
window.addEventListener('blur', onMouseUp);
|
|
314
|
+
window.addEventListener('keydown', onKeyDown, true);
|
|
315
|
+
window.addEventListener('scroll', onWindowScroll);
|
|
316
|
+
$timeline.addEventListener('scroll', onScroll);
|
|
317
|
+
$timeline.addEventListener('pointerenter', onPointerEnter);
|
|
318
|
+
$timeline.addEventListener('pointerleave', onPointerLeave);
|
|
319
|
+
return () => {
|
|
320
|
+
observer.disconnect();
|
|
321
|
+
window.removeEventListener('mousemove', onMouseMove);
|
|
322
|
+
$timeline.removeEventListener('contextmenu', onContextMenu);
|
|
323
|
+
window.removeEventListener('mousedown', onMouseDown);
|
|
324
|
+
window.removeEventListener('mouseup', onMouseUp);
|
|
325
|
+
window.removeEventListener('blur', onMouseUp);
|
|
326
|
+
window.removeEventListener('keydown', onKeyDown, true);
|
|
327
|
+
window.removeEventListener('scroll', onWindowScroll);
|
|
328
|
+
$timeline.removeEventListener('scroll', onScroll);
|
|
329
|
+
$timeline.removeEventListener('pointerenter', onPointerEnter);
|
|
330
|
+
$timeline.removeEventListener('pointerleave', onPointerLeave);
|
|
331
|
+
cancelAnimationFrame(nextFrame);
|
|
332
|
+
xRef.current = x;
|
|
333
|
+
removeHover();
|
|
334
|
+
};
|
|
335
|
+
}, [
|
|
336
|
+
dispatch,
|
|
337
|
+
root,
|
|
338
|
+
scale,
|
|
339
|
+
setStyle,
|
|
340
|
+
setLabelStyle,
|
|
341
|
+
setSelectionStyle,
|
|
342
|
+
memoCacheRef,
|
|
343
|
+
timelineRef,
|
|
344
|
+
scrollSnapshotRef,
|
|
345
|
+
]);
|
|
346
|
+
const trackpadZoomRef = useRef(undefined);
|
|
347
|
+
useTrackpadZoom((delta) => {
|
|
348
|
+
const $timeline = timelineRef.current;
|
|
349
|
+
if (!$timeline)
|
|
350
|
+
return;
|
|
351
|
+
rectRef.current ??= $timeline.getBoundingClientRect();
|
|
352
|
+
const rect = rectRef.current;
|
|
353
|
+
const anchorX = Math.max(0, Math.min(xRef.current - rect.left - TIMELINE_PADDING, rect.width - 2 * TIMELINE_PADDING));
|
|
354
|
+
let anchorT = 0;
|
|
355
|
+
let existing = trackpadZoomRef.current;
|
|
356
|
+
if (existing?.anchorX === anchorX) {
|
|
357
|
+
anchorT = existing.anchorT;
|
|
358
|
+
}
|
|
359
|
+
else {
|
|
360
|
+
anchorT = ($timeline.scrollLeft + anchorX) / scale;
|
|
361
|
+
existing = {
|
|
362
|
+
anchorT,
|
|
363
|
+
anchorX,
|
|
364
|
+
};
|
|
365
|
+
trackpadZoomRef.current = existing;
|
|
366
|
+
}
|
|
367
|
+
dispatch({
|
|
368
|
+
type: 'trackpadScale',
|
|
369
|
+
delta: delta / 64,
|
|
370
|
+
anchorT,
|
|
371
|
+
anchorX,
|
|
372
|
+
});
|
|
373
|
+
});
|
|
374
|
+
return (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.cursorMarkerStickyParent, children: _jsx("div", { className: styles.cursorMarkerLabelContainer, ref: labelRef, style: labelStyle, children: _jsx("div", { className: styles.cursorMarkerLabel, ref: labelTextRef }) }) }), _jsx("div", { className: styles.cursorMarkerStickyParent, children: _jsx("div", { className: styles.cursorMarkerContainer, ref: ref, style: style, children: _jsx("div", { className: styles.cursorMarker, children: _jsx("div", { className: styles.cursorSelection, ref: selectionRef, style: selectionStyle }) }) }) })] }));
|
|
375
|
+
}
|
|
376
|
+
//# sourceMappingURL=markers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"markers.js","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,102 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { memo, useRef } from 'react';
|
|
4
|
+
import styles from '../trace-viewer.module.css';
|
|
5
|
+
import { MARKER_HEIGHT, ROW_HEIGHT, ROW_PADDING } from '../util/constants';
|
|
6
|
+
import { formatDuration } from '../util/timing';
|
|
7
|
+
const isSpanSmall = (node, scale) => node.duration * scale < 64;
|
|
8
|
+
const isSpanHuge = (node, scale) => node.duration * scale >= 500;
|
|
9
|
+
export const getSpanColorClassName = (node) => {
|
|
10
|
+
if (node.isVercel)
|
|
11
|
+
return String(styles.colorVercel);
|
|
12
|
+
return String(styles[`color${node.resourceIndex % 5}`]);
|
|
13
|
+
};
|
|
14
|
+
export const getSpanClassName = (node, scale) => {
|
|
15
|
+
const isHuge = isSpanHuge(node, scale);
|
|
16
|
+
const isHovered = node.isHovered && !isHuge && node.isHighlighted !== false;
|
|
17
|
+
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);
|
|
18
|
+
};
|
|
19
|
+
const getDuration = (node) => {
|
|
20
|
+
if (node.isInstrumentationHint) {
|
|
21
|
+
return 'Get Started';
|
|
22
|
+
}
|
|
23
|
+
return formatDuration(node.duration);
|
|
24
|
+
};
|
|
25
|
+
export const SpanNodes = memo(function SpanNodes({ root, scale, spans, scrollSnapshotRef, cache, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
|
|
26
|
+
return spans.map((x) => (_jsx(SpanComponent, { cacheKey: cache.get(x.span.spanId), customSpanEventClassNameFunc: customSpanEventClassNameFunc, customSpanClassNameFunc: customSpanClassNameFunc, node: x, root: root, scale: scale, scrollSnapshotRef: scrollSnapshotRef }, x.span.spanId)));
|
|
27
|
+
});
|
|
28
|
+
export const SpanComponent = memo(function SpanComponent({ node, root, scale, scrollSnapshotRef, customSpanClassNameFunc, customSpanEventClassNameFunc, }) {
|
|
29
|
+
const ref = useRef(null);
|
|
30
|
+
node.ref = ref;
|
|
31
|
+
const { span } = node;
|
|
32
|
+
const duration = getDuration(node);
|
|
33
|
+
const left = (node.startTime - root.startTime) * scale;
|
|
34
|
+
let top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
|
|
35
|
+
const actualWidth = node.duration * scale;
|
|
36
|
+
// Enforce minimum width so very short spans are always visible
|
|
37
|
+
const MIN_SPAN_WIDTH = 4;
|
|
38
|
+
const width = Math.max(actualWidth, MIN_SPAN_WIDTH);
|
|
39
|
+
let height = ROW_HEIGHT;
|
|
40
|
+
const isHuge = isSpanHuge(node, scale);
|
|
41
|
+
// Check if span is small based on actual width, not minimum width
|
|
42
|
+
const isSmall = actualWidth < 64;
|
|
43
|
+
const isHovered = node.isHovered && !isHuge && node.isHighlighted !== false;
|
|
44
|
+
if (isSmall && !isHovered) {
|
|
45
|
+
height *= 0.4;
|
|
46
|
+
top += (ROW_HEIGHT - height) * 0.5;
|
|
47
|
+
}
|
|
48
|
+
let isNearRightSide = false;
|
|
49
|
+
if (isHovered) {
|
|
50
|
+
let { duration: visibleDuration, endTime: visibleEndTime } = root;
|
|
51
|
+
const snapshot = scrollSnapshotRef.current;
|
|
52
|
+
if (snapshot) {
|
|
53
|
+
visibleDuration = snapshot.endTime - snapshot.startTime;
|
|
54
|
+
visibleEndTime = snapshot.endTime;
|
|
55
|
+
}
|
|
56
|
+
isNearRightSide = visibleEndTime - node.startTime < 0.25 * visibleDuration;
|
|
57
|
+
}
|
|
58
|
+
// Get custom class name from callback if provided
|
|
59
|
+
const customClassName = customSpanClassNameFunc
|
|
60
|
+
? customSpanClassNameFunc(node)
|
|
61
|
+
: '';
|
|
62
|
+
return (_jsxs(_Fragment, { children: [_jsx("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", children: isSmall && !isHovered ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.spanName, children: node.label || span.name }), isHuge ? _jsx("span", { className: styles.spanSpacer }) : null, isHovered || width > 128 ? (_jsx("span", { className: styles.spanDuration, children: duration })) : null] })) }), node.events && !isSmall
|
|
79
|
+
? node.events.map((x) => (_jsx(SpanEventComponent, { customSpanEventClassNameFunc: customSpanEventClassNameFunc, event: x, node: node, root: root, scale: scale }, x.key)))
|
|
80
|
+
: null] }));
|
|
81
|
+
});
|
|
82
|
+
export const SpanEventComponent = memo(function SpanEventComponent({ event, node, root, scale, customSpanEventClassNameFunc, }) {
|
|
83
|
+
const ref = useRef(null);
|
|
84
|
+
event.ref = ref;
|
|
85
|
+
const { event: { name }, } = event;
|
|
86
|
+
const timestamp = formatDuration(event.timestamp - root.startTime);
|
|
87
|
+
const left = (event.timestamp - root.startTime) * scale;
|
|
88
|
+
const top = MARKER_HEIGHT + (ROW_HEIGHT + ROW_PADDING) * node.row;
|
|
89
|
+
// Get custom class name from callback if provided
|
|
90
|
+
const customClassName = customSpanEventClassNameFunc
|
|
91
|
+
? customSpanEventClassNameFunc(event)
|
|
92
|
+
: '';
|
|
93
|
+
return (_jsxs("div", { title: `${name} at ${timestamp}`, className: clsx(styles.spanNodeEvent, customClassName, node.isHighlighted
|
|
94
|
+
? styles.colorHighlight
|
|
95
|
+
: getSpanColorClassName(node), node.isHighlighted === false && styles.unlit), "data-hovered": event.isHovered, ref: ref, style: {
|
|
96
|
+
left,
|
|
97
|
+
top,
|
|
98
|
+
}, children: [_jsxs("div", { className: clsx(styles.hoverInfo, (event.timestamp - node.startTime) / node.duration < 0.5
|
|
99
|
+
? styles.alignStart
|
|
100
|
+
: styles.alignEnd), children: [_jsx("span", { className: styles.eventName, children: name }), _jsx("span", { className: styles.eventTimestamp, children: timestamp })] }), _jsx("div", { className: styles.eventDiamond })] }));
|
|
101
|
+
});
|
|
102
|
+
//# sourceMappingURL=node.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"node.js","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,9 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import styles from '../trace-viewer.module.css';
|
|
3
|
+
export function SearchInput({ height, width, value, placeholder, onChange, }) {
|
|
4
|
+
return (_jsxs("label", { className: styles.searchInputLabel, children: [_jsx("div", { className: styles.searchInputPrefix, children: _jsx(MagnifyingGlassIcon, {}) }), _jsx("input", { type: "search", value: value, placeholder: placeholder, onChange: onChange, style: { height, width } })] }));
|
|
5
|
+
}
|
|
6
|
+
function MagnifyingGlassIcon() {
|
|
7
|
+
return (_jsxs("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", focusable: "false", children: [_jsx("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("path", { d: "M11.5 11.5L14 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
|
|
8
|
+
}
|
|
9
|
+
//# sourceMappingURL=search-input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search-input.js","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,iBAAO,SAAS,EAAE,MAAM,CAAC,gBAAgB,aACvC,cAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,YACtC,KAAC,mBAAmB,KAAG,GACnB,EACN,gBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,GACxB,IACI,CACT,CAAC;AACJ,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,CACL,eACE,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,SAAS,EAAC,OAAO,aAEjB,iBAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,KAAK,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,KAAK,GAAG,EACxE,eACE,CAAC,EAAC,kBAAkB,EACpB,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,KAAK,EACjB,aAAa,EAAC,OAAO,GACrB,IACE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -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"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
import { useTraceViewer } from '../context';
|
|
4
|
+
import styles from '../trace-viewer.module.css';
|
|
5
|
+
import { SEARCH_HEIGHT } from '../util/constants';
|
|
6
|
+
import { SearchInput } from './search-input';
|
|
7
|
+
export function SearchBar() {
|
|
8
|
+
return (_jsx("nav", { className: styles.searchBar, children: _jsx(SearchInputWrapper, {}) }));
|
|
9
|
+
}
|
|
10
|
+
function SearchInputWrapper() {
|
|
11
|
+
const { dispatch } = useTraceViewer();
|
|
12
|
+
const [value, setValue] = useState('');
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const timeout = setTimeout(() => dispatch({
|
|
15
|
+
type: 'setFilter',
|
|
16
|
+
filter: value,
|
|
17
|
+
}), 100);
|
|
18
|
+
return () => {
|
|
19
|
+
clearTimeout(timeout);
|
|
20
|
+
};
|
|
21
|
+
}, [dispatch, value]);
|
|
22
|
+
return (_jsx("div", { className: styles.searchInput, children: _jsx(SearchInput, { height: SEARCH_HEIGHT, onChange: (e) => setValue(e.target.value), placeholder: "Search spans\u2026", value: value, width: "100%" }) }));
|
|
23
|
+
}
|
|
24
|
+
//# sourceMappingURL=search.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search.js","sourceRoot":"","sources":["../../../src/trace-viewer/components/search.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,SAAS,YAC9B,KAAC,kBAAkB,KAAG,GAClB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB;IACzB,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,OAAO,GAAG,UAAU,CACxB,GAAG,EAAE,CACH,QAAQ,CAAC;YACP,IAAI,EAAE,WAAW;YACjB,MAAM,EAAE,KAAK;SACd,CAAC,EACJ,GAAG,CACJ,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,CAAC,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAChC,KAAC,WAAW,IACV,MAAM,EAAE,aAAa,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,WAAW,EAAC,oBAAe,EAC3B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,MAAM,GACZ,GACE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export declare const SpanDetailPanelBody: () => import("react/jsx-runtime").JSX.Element | null;
|
|
3
|
+
export declare function SpanDetailPanel({ attached, }: {
|
|
4
|
+
attached?: boolean;
|
|
5
|
+
}): ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Resizer component for the trace viewer panel.
|
|
8
|
+
*/
|
|
9
|
+
export declare function PanelResizer(): ReactNode;
|
|
10
|
+
//# sourceMappingURL=span-detail-panel.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"span-detail-panel.d.ts","sourceRoot":"","sources":["../../../src/trace-viewer/components/span-detail-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AA4G5D,eAAO,MAAM,mBAAmB,sDAoI/B,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,QAAgB,GACjB,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,SAAS,CA+CZ;AAsRD;;GAEG;AACH,wBAAgB,YAAY,IAAI,SAAS,CAwExC"}
|