"
- f"| {html.escape(str(event['timestamp_ms']))} | "
- f"{html.escape(event['invoker'])} | "
- f"{html.escape(event['args'])} | "
- f"{html.escape(event['context'])} | "
- f"{html.escape(event['file'])}:{event['line']} | "
- "
"
- for event in events
- )
- title = html.escape(f"{summary['kind']} / {summary['hostname']} / {summary['tid']}")
- document = f"""
-
Call treeevent fast hot
No trace nodes match this search.
-
Event log0 events
| Time | Event | Details | Context | Source |
|---|
No events match this search.
-
-
Select a trace row to inspect its timing and source.
';
-}
-
-function createEventRow(column, event) {
- const row = document.createElement("tr");
- row.dataset.invoker = event.invoker;
- row.dataset.nodeId = event.id;
- [ms(event.timestamp_ms), event.invoker, event.args || "--", event.context, `${event.file}:${event.line}`].forEach((value, index) => {
- const cell = document.createElement("td"); cell.textContent = value;
- if (index === 0) cell.className = "event-time"; if (index === 1) cell.className = "event-name"; row.append(cell);
- });
- row.addEventListener("click", () => selectNode(column, event, row));
- attachRequestJumps(column, event, row);
- return row;
-}
-
-async function loadEvents(column, reset = false) {
- if (!column.trace) return;
- if (reset) { column.eventOffset = 0; $(".event-table tbody", column.root).replaceChildren(); }
- const version = ++column.searchVersion; const traceId = column.trace.summary.id;
- const query = $(".search input", column.root).value.trim();
- $(".event-count", column.root).textContent = "Loading...";
- const response = await fetch(`/api/events?trace=${traceId}&offset=${column.eventOffset}&limit=250&q=${encodeURIComponent(query)}`);
- if (version !== column.searchVersion || !column.trace || column.trace.summary.id !== traceId) return;
- const payload = await response.json(); const body = $(".event-table tbody", column.root);
- payload.events.forEach(event => body.append(createEventRow(column, event)));
- column.eventOffset += payload.events.length; column.eventTotal = payload.total;
- $(".event-count", column.root).textContent = `${column.eventOffset.toLocaleString()} of ${column.eventTotal.toLocaleString()}`;
- $(".events-empty", column.root).hidden = column.eventTotal > 0;
- $(".load-events", column.root).hidden = column.eventOffset >= column.eventTotal;
- $(".match-count", column.root).textContent = query ? `${column.eventTotal.toLocaleString()} found` : "";
-}
-
-function setView(column, view) {
- hideCorrelationArrow();
- column.view = view; const events = view === "events";
- $(".tree-panel", column.root).hidden = events; $(".events-panel", column.root).hidden = !events;
- $(".tree-actions", column.root).hidden = events; $(".previous-match", column.root).hidden = events; $(".next-match", column.root).hidden = events;
- $(".show-tree", column.root).classList.toggle("active", !events); $(".show-tree", column.root).setAttribute("aria-pressed", String(!events));
- $(".show-events", column.root).classList.toggle("active", events); $(".show-events", column.root).setAttribute("aria-pressed", String(events));
- $(".search input", column.root).placeholder = events ? "Filter events, details, or source" : "Invoker, arguments, or source";
- $(".match-count", column.root).textContent = "";
- if (events) loadEvents(column, true); else search(column);
-}
-
-async function revealNodeId(column, nodeId, behavior = "smooth") {
- setView(column, "tree");
- const parts = nodeId.split(".");
- for (let length = 1; length < parts.length; length += 1) {
- const ancestorId = parts.slice(0, length).join(".");
- const ancestor = column.nodes.get(ancestorId);
- const wrapper = column.root.querySelector(`[data-node-id="${ancestorId}"]`);
- if (!ancestor || !wrapper) return null;
- await expandNode(column, wrapper, ancestor);
- }
- const node = column.nodes.get(nodeId);
- const wrapper = column.root.querySelector(`[data-node-id="${nodeId}"]`);
- if (!node || !wrapper) return null;
- const row = $(":scope > .node-row", wrapper);
- selectNode(column, node, row);
- row.focus({ preventScroll: true });
- const tree = $(".tree", column.root);
- const viewport = tree.getBoundingClientRect();
- const bounds = row.getBoundingClientRect();
- const margin = 10;
- let delta = 0;
- if (bounds.top < viewport.top + margin) delta = bounds.top - viewport.top - margin;
- else if (bounds.bottom > viewport.bottom - margin) delta = bounds.bottom - viewport.bottom + margin;
- if (delta) tree.scrollTo({ top: tree.scrollTop + delta, behavior });
- return row;
-}
-
-async function revealMatch(column) {
- if (!column.matches.length) return;
- const match = column.matches[column.match]; const parts = match.id.split(".");
- for (let length = 1; length < parts.length; length += 1) {
- const ancestorId = parts.slice(0, length).join("."); const ancestor = column.nodes.get(ancestorId);
- const wrapper = column.root.querySelector(`[data-node-id="${ancestorId}"]`);
- if (!ancestor || !wrapper) return; await expandNode(column, wrapper, ancestor);
- }
- const node = column.nodes.get(match.id) || match;
- const wrapper = column.root.querySelector(`[data-node-id="${node.id}"]`); if (!wrapper) return;
- const row = $(":scope > .node-row", wrapper); selectNode(column, node, row); row.scrollIntoView({ block: "center", behavior: "smooth" });
- $(".match-count", column.root).textContent = `${column.match + 1}/${column.matches.length}`;
-}
-
-async function search(column) {
- if (!column.trace) return;
- if (column.view === "events") {
- const version = ++column.searchVersion; await new Promise(resolve => setTimeout(resolve, 180));
- if (version === column.searchVersion) loadEvents(column, true); return;
- }
- const query = $(".search input", column.root).value.trim(); const version = ++column.searchVersion;
- if (!query) { column.matches = []; column.match = -1; $(".match-count", column.root).textContent = ""; $(".tree-empty", column.root).hidden = true; return; }
- $(".match-count", column.root).textContent = "..."; await new Promise(resolve => setTimeout(resolve, 180));
- if (version !== column.searchVersion) return;
- const traceId = column.trace.summary.id; const response = await fetch(`/api/search?trace=${traceId}&q=${encodeURIComponent(query)}`);
- if (version !== column.searchVersion || column.trace.summary.id !== traceId) return;
- const payload = await response.json(); column.matches = payload.matches; column.match = column.matches.length ? 0 : -1;
- $(".match-count", column.root).textContent = `0/${column.matches.length}${payload.limited ? "+" : ""}`;
- $(".tree-empty", column.root).hidden = column.matches.length > 0;
- if (column.matches.length) await revealMatch(column);
-}
-
-async function stepMatch(column, direction) {
- if (!column.matches.length) return;
- column.match = (column.match + direction + column.matches.length) % column.matches.length; await revealMatch(column);
-}
-
-async function expandLoadedLevel(column) {
- const currentLevel = [...column.nodes.values()];
- await Promise.all(currentLevel.map(node => { const wrapper = column.root.querySelector(`[data-node-id="${node.id}"]`); return wrapper && node.child_count ? expandNode(column, wrapper, node) : null; }));
-}
-
-function appendTableRow(body, values, onClick = null) {
- const row = document.createElement("tr");
- values.forEach(value => { const cell = document.createElement("td"); cell.textContent = value; row.append(cell); });
- if (onClick) { row.classList.add("clickable"); row.addEventListener("click", onClick); }
- body.append(row);
-}
-
-function showInsights(column) {
- const analysis = column.trace.analysis;
- $("#insights-title").textContent = `${column.kind} / Thread ${column.trace.summary.tid}`;
- const percentiles = $("#percentiles"); percentiles.replaceChildren();
- Object.entries(analysis.percentiles).forEach(([label, value]) => percentiles.append(metric(label, ms(value))));
- const slowest = $("#slowest-body"); slowest.replaceChildren();
- analysis.slowest.forEach(item => appendTableRow(slowest, [item.invoker, item.path, ms(item.duration_ms)], () => { $("#insights-panel").hidden = true; revealNodeId(column, item.id); }));
- const frequent = $("#frequent-body"); frequent.replaceChildren();
- analysis.frequent.forEach(item => appendTableRow(frequent, [item.invoker, item.kind, item.count.toLocaleString()]));
- const paths = $("#paths-body"); paths.replaceChildren();
- analysis.call_paths.forEach(item => appendTableRow(paths, [item.path, item.count.toLocaleString(), ms(item.total_ms)]));
- const stats = $("#stats-body"); stats.replaceChildren();
- column.trace.stats.forEach(item => appendTableRow(stats, [item.invoker, item.count, ms(item.total_ms), ms(item.mean_ms.toFixed(1)), ms(item.median_ms.toFixed(1)), ms(item.max_ms), ms(item.min_ms), ms(item.std_ms.toFixed(1))]));
- $("#insights-panel").hidden = false;
-}
-
-function exportEvents(column, format) {
- const query = $(".search input", column.root).value.trim();
- window.location.href = `/api/export?trace=${column.trace.summary.id}&format=${format}&q=${encodeURIComponent(query)}`;
- $(".export-menu", column.root).open = false;
-}
-
-async function copyLink(column, button) {
- const url = new URL(window.location.href);
- url.search = "";
- url.searchParams.set("trace", column.trace.summary.id);
- if (column.selectedNode) url.searchParams.set("node", column.selectedNode.id);
- try {
- await navigator.clipboard.writeText(url.toString());
- const original = button.textContent; button.textContent = "Copied";
- setTimeout(() => { button.textContent = original; }, 1200);
- } catch (error) {
- window.prompt("Copy trace link", url.toString());
- }
-}
-
-async function openCorrelatedNode(target, traceId, nodeId) {
- if (!target.trace || target.trace.summary.id !== traceId) await loadTrace(target, traceId);
- return revealNodeId(target, nodeId, "auto");
-}
-
-function correlationTarget(source, traceId) {
- const tab = workspace.tabs.find(item => item.id === traceId);
- return workspace.columns.find(item => item !== source && item.kind === tab?.kind) || null;
-}
-
-async function openCorrelationTarget(source, traceId, nodeId) {
- const tab = workspace.tabs.find(item => item.id === traceId);
- if (!tab) return null;
- let target = correlationTarget(source, traceId);
- if (!target) {
- target = createColumn(tab.kind, traceId);
- await target.ready;
- }
- const row = await openCorrelatedNode(target, traceId, nodeId);
- return { target, row };
-}
-
-async function connectCorrelatedNodes(source, sourceNodeId, traceId, targetNodeId, sourceRow = null) {
- hideCorrelationArrow();
- const destinationPromise = openCorrelationTarget(source, traceId, targetNodeId);
- const sourcePromise = sourceRow?.isConnected
- ? Promise.resolve(sourceRow)
- : revealNodeId(source, sourceNodeId, "auto");
- const [destinationResult, sourceResult] = await Promise.allSettled([destinationPromise, sourcePromise]);
- if (destinationResult.status === "rejected") throw destinationResult.reason;
- const destination = destinationResult.value;
- const resolvedSourceRow = sourceResult.status === "fulfilled" ? sourceResult.value : null;
- if (resolvedSourceRow && destination?.row) {
- showCorrelationArrow(resolvedSourceRow, destination.row, source, destination.target, source.trace.summary.id, traceId);
- }
-}
-
-function addCorrelationJump(row, source, sourceNodeId, traceId, node, persistent = false) {
- if (!row) return;
- const host = row.matches("tr") ? row.lastElementChild : row;
- if (host.querySelector(`.correlation-jump[data-trace-id="${traceId}"]`)) return;
- const tab = workspace.tabs.find(item => item.id === traceId);
- const button = document.createElement("button");
- button.className = "correlation-jump";
- button.classList.toggle("persistent", persistent);
- button.dataset.traceId = traceId;
- button.textContent = `Open ${tab?.kind || "match"}`;
- button.title = `Open the associated request in ${tab?.kind || "another component"} / thread ${tab?.tid || "?"}`;
- button.addEventListener("click", async event => {
- event.stopPropagation();
- const label = button.textContent;
- button.textContent = "Opening..."; button.disabled = true;
- try {
- await connectCorrelatedNodes(source, sourceNodeId, traceId, node.id, row);
- } catch (error) {
- console.error(error);
- button.textContent = `Retry ${tab?.kind || "match"}`;
- button.disabled = false;
- return;
- }
- button.textContent = label; button.disabled = false;
- });
- host.append(button);
- if (activeConnection && (
- (source === activeConnection.source && traceId === activeConnection.targetTrace)
- || (source === activeConnection.target && traceId === activeConnection.sourceTrace)
- )) {
- button.hidden = true;
- activeConnection.hiddenButtons.push(button);
- }
-}
-
-function addSyncJump(row, column, request) {
- if (row.querySelector(`.sync-jump[data-node-id="${request.id}"]`)) return;
- const button = document.createElement("button");
- button.className = "sync-jump";
- button.dataset.nodeId = request.id;
- button.textContent = "Go to sync event";
- button.title = `Expand to request ${request.request}`;
- button.addEventListener("click", event => {
- event.preventDefault(); event.stopPropagation();
- revealNodeId(column, request.id, "auto");
- });
- row.append(button);
-}
-
-async function attachRequestJumps(column, node, row) {
- if (!node.request) return;
- const key = `${column.trace.summary.id}:${node.id}`;
- if (column.requestLinks.has(key)) return;
- column.requestLinks.add(key);
- const traceIds = workspace.tabs.map(tab => tab.id);
- const response = await fetch(`/api/correlate?source=${column.trace.summary.id}&node=${encodeURIComponent(node.id)}&traces=${traceIds.join(",")}`);
- const payload = await response.json();
- if (!row.isConnected || !column.trace || column.trace.summary.id !== Number(row.closest(".trace-column")?.querySelector(".thread-tabs .active")?.dataset.id)) return;
- payload.matches.forEach(match => addCorrelationJump(row, column, node.id, match.trace, match.node, true));
-}
-
-async function correlateSelection(column, node, inspector) {
- const version = ++column.correlationVersion;
- workspace.columns.forEach(item => {
- item.root.querySelectorAll(".correlation-jump:not(.persistent)").forEach(button => button.remove());
- item.root.querySelectorAll("[data-invoker]").forEach(row => {
- row.classList.toggle("correlated", item !== column && row.dataset.invoker === node.invoker);
- });
- });
- const traceIds = workspace.tabs.map(tab => tab.id);
- const response = await fetch(`/api/correlate?source=${column.trace.summary.id}&node=${encodeURIComponent(node.id)}&traces=${traceIds.join(",")}`);
- if (version !== column.correlationVersion || column.selectedNode !== node) return;
- const payload = await response.json();
- const matches = payload.matches;
- if (!matches.length) return;
- const section = document.createElement("div"); section.className = "correlations";
- const title = document.createElement("small");
- title.textContent = payload.mode === "request" ? `Request interaction: ${payload.request || payload.terms.join(" / ")}` : "Cross-column matches";
- section.append(title);
- const sourceRow = [...column.root.querySelectorAll(".node-row, .event-table tr")].find(row => row.dataset.nodeId === node.id);
- matches.forEach(match => {
- const targetTab = workspace.tabs.find(tab => tab.id === match.trace);
- const target = correlationTarget(column, match.trace);
- const loadedRow = target?.trace?.summary.id === match.trace
- ? [...target.root.querySelectorAll(".node-row, .event-table tr")].find(row => row.dataset.nodeId === match.node.id)
- : null;
- if (loadedRow) {
- loadedRow.classList.add("correlated");
- addCorrelationJump(loadedRow, target, match.node.id, column.trace.summary.id, node, true);
- }
- addCorrelationJump(sourceRow, column, node.id, match.trace, match.node, true);
- const button = document.createElement("button");
- const relation = payload.mode === "request" ? `${Math.round(match.score * 100)}% parameter match` : `${match.delta_ms >= 0 ? "+" : ""}${ms(match.delta_ms)}`;
- button.textContent = `${targetTab.kind} / thread ${targetTab.tid} ${relation}`;
- button.addEventListener("click", () => connectCorrelatedNodes(column, node.id, match.trace, match.node.id, sourceRow)); section.append(button);
- });
- inspector.append(section);
-}
-
-function addColumn() {
- const directories = [...new Set(workspace.tabs.map(tab => tab.kind))];
- const used = new Set(workspace.columns.map(column => column.kind));
- createColumn(directories.find(directory => !used.has(directory)) || directories[0]);
-}
-
-$("#add-column").addEventListener("click", addColumn);
-$("#close-insights").addEventListener("click", () => $("#insights-panel").hidden = true);
-let globalSearchTimer;
-$("#global-search").addEventListener("input", event => {
- clearTimeout(globalSearchTimer);
- globalSearchTimer = setTimeout(() => {
- workspace.columns.forEach(column => { $(".search input", column.root).value = event.target.value; search(column); });
- }, 120);
-});
-document.addEventListener("keydown", event => {
- if (event.key === "/" && !event.target.matches("input, select")) { event.preventDefault(); $("#global-search").focus(); }
- if (event.key === "Escape") $("#insights-panel").hidden = true;
-});
-window.addEventListener("resize", drawCorrelationArrow);
-document.addEventListener("scroll", () => {
- if (activeConnection) requestAnimationFrame(drawCorrelationArrow);
-}, true);
-
-fetch("/api/overview").then(response => response.json()).then(data => {
- workspace.tabs = data.tabs; $("#columns").replaceChildren();
- const params = new URLSearchParams(window.location.search);
- const linkedTrace = Number(params.get("trace"));
- const linkedTab = params.has("trace") ? workspace.tabs.find(tab => tab.id === linkedTrace) : null;
- if (linkedTab) createColumn(linkedTab.kind, linkedTab.id, params.get("node"));
- else if (workspace.tabs.length) createColumn(workspace.tabs[0].kind);
- else $("#columns").innerHTML = 'No trace logs found.
';
-});
diff --git a/profiler/web/calf.svg b/profiler/web/calf.svg
deleted file mode 100644
index b200c2d..0000000
--- a/profiler/web/calf.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
-