<%
// Read the trace off the profile, not the collector snapshot (`data`): buildTrace() runs after
// collectAll() snapshotted this panel, so `data` is empty here — profile.trace is the source.
// One model, two lanes: the causal waterfall and the flat framework band above it.
const allSpans = profile.trace || [];
const spans = allSpans.filter((s) => s.lane !== 'lifecycle');
const lifecycle = allSpans
.filter((s) => s.lane === 'lifecycle')
.map((s) => ({ name: s.label, startedAt: s.startedAt, duration: s.duration }));
const startTime = profile.performance.startTime;
const totalDur = profile.performance.duration || 1;
// Colour + label per span kind. Inline (like the former phase map) so the single
// shipped stylesheet needs no per-kind utility classes.
const kindColors = {
entrypoint: 'var(--color-nest)',
phase: '#6366f1',
method: '#a78bfa',
http: '#06b6d4',
db: '#10b981',
'graphql-field': '#8b5cf6',
custom: '#64748b',
};
const kindLabels = {
entrypoint: 'Request',
phase: 'Phase',
method: 'Method',
http: 'HTTP',
db: 'Database',
'graphql-field': 'GraphQL',
custom: 'Custom',
};
// What each kind *is*, so the nesting reads unambiguously: containers group the work
// happening inside them, leaves are the actual I/O. Only leaves consume time on their
// own — a container's own cost is its self-time.
const kindHints = {
entrypoint: 'The profiled request, command or message — the whole time budget.',
phase: 'A section of your code, opened with tracer.span(). It groups the work it triggered; its own cost is its self-time.',
method: 'One provider method call, recorded by the automatic instrumentation — who called whom. Its own cost is its self-time.',
http: 'One outgoing HTTP call — a leaf, timed from send to response.',
db: 'One database statement — a leaf. A "transaction" row groups a BEGIN … COMMIT run.',
'graphql-field': 'One resolved GraphQL field; it groups the calls that resolving it issued.',
custom: 'A span contributed by a custom collector.',
};
function kindHint(kind) { return kindHints[kind] || ''; }
function kindColor(kind) { return kindColors[kind] || kindColors.custom; }
function kindLabel(kind) { return kindLabels[kind] || kind; }
// Rebuild the tree from the flat, parentId-linked array, then flatten it depth-first
// so rows render in causal order with an indentation level.
const byId = new Map(spans.map((s) => [s.id, s]));
const children = new Map();
const roots = [];
for (const s of spans) {
const parent = s.parentId && byId.has(s.parentId) ? s.parentId : null;
if (parent) {
if (!children.has(parent)) children.set(parent, []);
children.get(parent).push(s);
} else {
roots.push(s);
}
}
// buildTrace already emits spans chronologically (emission order breaking ties), so the
// flat array order is the causal order — re-sorting on duration would put a 0ms COMMIT
// ahead of the START TRANSACTION it closes.
// Wall-clock time the children actually cover, as the union of their intervals — not the sum
// of their durations. Children overlap all the time (calls fired together, a phase and the
// query it wraps reported side by side), and summing would count that overlap twice and
// collapse every self-time to 0.
function coveredBy(kids) {
const intervals = kids
.map((k) => [k.startedAt, k.startedAt + k.duration])
.sort((a, b) => a[0] - b[0]);
let covered = 0;
let [start, end] = [0, -Infinity];
for (const [from, to] of intervals) {
if (from > end) {
covered += Math.max(end - start, 0);
[start, end] = [from, to];
} else if (to > end) {
end = to;
}
}
return covered + Math.max(end - start, 0);
}
const rows = [];
function walk(node, depth) {
const kids = children.get(node.id) || [];
// Self-time: the stretch of this span no child accounts for — waiting, driver/ORM
// overhead, application code between two calls.
const selfTime = Math.max(node.duration - coveredBy(kids), 0);
rows.push({ span: node, depth, hasChildren: kids.length > 0, selfTime });
for (const kid of kids) walk(kid, depth + 1);
}
for (const root of roots) walk(root, 0);
// Critical path: from the root, at each level follow the child that finishes last. That chain is
// what decided the total — shortening anything off it moves nothing. Computed here, where the
// tree is already built, rather than client-side over the DOM.
const criticalIds = new Set();
(function walkCritical(node) {
if (!node) return;
criticalIds.add(node.id);
const kids = children.get(node.id) || [];
if (!kids.length) return;
let last = kids[0];
for (const kid of kids) {
if (kid.startedAt + kid.duration > last.startedAt + last.duration) last = kid;
}
walkCritical(last);
})(roots[0]);
const usedKinds = [...new Set(spans.map((s) => s.kind))];
// Automatic instrumentation records one span per provider method call, which is exactly the
// information you want when asking "who issued this query" — and exactly the noise you do not
// want when asking "which query is slow". A lens rather than a second panel: same tree, same
// ids, three readings. Rows are hidden by the client behaviour, so switching costs no round trip
// and a hidden row's children stay attached to their real parent.
const hasMethodSpans = usedKinds.includes('method');
// Flat request-lifecycle band (Symfony-style), rendered above the causal waterfall on the same
// time axis. Non-nested, so it never competes with the trace's containment nesting.
const lifecycleColors = { guards: '#f59e0b', validation: '#f97316', controller: '#8b5cf6' };
%>
<% if (lifecycle.length) { %>
Request Lifecycle
<% for (const ph of lifecycle) { %>
<%
const lOffset = Math.min(Math.max(((ph.startedAt - startTime) / totalDur) * 100, 0), 100);
const lWidth = Math.min(Math.max((ph.duration / totalDur) * 100, 0.5), 100 - lOffset);
const lColor = lifecycleColors[ph.name] || '#64748b';
%>
<%# Same column geometry as a trace row below (label / track / badges / duration), so both
bands really do read against one time axis. %>
<%= ph.name %>
<%= formatDuration(ph.duration) + 'ms' %>
<% } %>
<% } %>
Execution Trace
<%= formatDuration(totalDur) + 'ms' %> total
<% if (spans.length === 0) { %>
No spans recorded.
Outgoing HTTP calls and database queries appear here automatically; use tracer.span('name', work) to add your own.
<% } else { %>
<%# Hiding short spans is a *display* choice, so it lives here rather than at capture: a 0.04ms
parent can still contain 12ms of work, and dropping it at record time would lose that. %>
<% if (hasMethodSpans) { %>
Show
<% for (const lens of [
{ key: 'all', label: 'All', hint: 'Every span, code and I/O alike.' },
{ key: 'io', label: 'I/O only', hint: 'Hide provider method calls — what the request spent its time waiting on.' },
{ key: 'code', label: 'Code only', hint: 'Only your provider methods — who called whom.' },
]) { %>
<% } %>
<% } %>
<% if (usedKinds.length > 1) { %>
<% for (const kind of usedKinds) { %>
<%= kindLabel(kind) %>
<% } %>
<%# Fixed width, rendered even when empty: the track above is flex-1, so a badge appearing on
some rows only would shorten their time axis and shift their bar against the rows around it. %>
<% } %>
<% if (span.meta && Object.keys(span.meta).length) { %>
<% for (const [k, v] of Object.entries(span.meta)) { %>
<%= k %>: <%= v %>
<% } %>
<% } %>
<% if (tab) {
// Deep-link to the source panel: the grouped Database tab needs its sub-tab
// (typeorm/mongoose) selected, plus the query index so the client highlights the row.
const collector = source.collector;
let href = '?tab=' + encodeURIComponent(tab);
if (collector && collector !== tab) href += '&subtab=' + encodeURIComponent(collector);
if (source.index != null) href += '&q=' + source.index;
%>
Open in <%= kindLabel(span.kind) %> panel →
<% } %>
<% } %>
<% } %>
Span
Kind
Started at
Duration
% of total
<% for (const row of rows) { %>
<% const span = row.span; %>
<%# Tagged like the bar above it, and with the same span id: the table is the *same* trace read as
a list, so a lens or a fold that hides a bar must hide its row too — otherwise "I/O only" still
lists every method underneath, which is exactly the contradiction this pairing removes. %>