diff options
Diffstat (limited to 'src/zen/frontend/html/csvstats.js')
| -rw-r--r-- | src/zen/frontend/html/csvstats.js | 383 |
1 files changed, 383 insertions, 0 deletions
diff --git a/src/zen/frontend/html/csvstats.js b/src/zen/frontend/html/csvstats.js new file mode 100644 index 000000000..a50b2f068 --- /dev/null +++ b/src/zen/frontend/html/csvstats.js @@ -0,0 +1,383 @@ +// Copyright Epic Games, Inc. All Rights Reserved. +// CSV Profiler stats viewer — category/stat tree with line-chart visualization. + +import { getCsvSeries } from "./api.js"; + +function escapeHtml(s) { + return String(s).replace(/[&<>"']/g, (c) => ({"&":"&","<":"<",">":">","\"":""","'":"'"}[c])); +} + +function formatTime(us) { + if (us < 1000) return `${us} \u00b5s`; + if (us < 1_000_000) return `${(us / 1000).toFixed(2)} ms`; + return `${(us / 1_000_000).toFixed(2)} s`; +} + +// Palette for chart lines — distinct hues. +const LINE_COLORS = [ + "#4fc3f7", "#81c784", "#ffb74d", "#e57373", "#ba68c8", + "#4db6ac", "#fff176", "#f06292", "#7986cb", "#a1887f", +]; + +export class CsvStatsView { + constructor(model, containerEl) { + this.model = model; + this.container = containerEl; + this.loaded = false; + + this.categories = model.csvCategories || []; + this.statDefs = model.csvStats || []; + + // Group stats by category index. + this.catMap = new Map(); + for (const cat of this.categories) { + this.catMap.set(cat.index, cat.name); + } + this.statsByCategory = new Map(); + for (const s of this.statDefs) { + const catIdx = s.category_index; + if (!this.statsByCategory.has(catIdx)) this.statsByCategory.set(catIdx, []); + this.statsByCategory.get(catIdx).push(s); + } + + // Selected series: Set of stat_id values to chart. + this.selectedStats = new Set(); + this.seriesData = new Map(); // stat_id → [{time_us, value}, ...] + this.colorIndex = 0; + this.statColors = new Map(); // stat_id → color + + this.buildLayout(); + } + + buildLayout() { + this.container.innerHTML = + `<div class="csv-layout">` + + `<div class="csv-tree-panel">` + + `<div class="sidebar-label">Stats</div>` + + `<div class="csv-tree"></div>` + + `</div>` + + `<div class="csv-chart-panel">` + + `<canvas class="csv-chart-canvas"></canvas>` + + `<div class="csv-chart-tooltip" hidden></div>` + + `</div>` + + `</div>`; + + this.treeEl = this.container.querySelector(".csv-tree"); + this.canvas = this.container.querySelector(".csv-chart-canvas"); + this.tooltipEl = this.container.querySelector(".csv-chart-tooltip"); + this.ctx = this.canvas.getContext("2d"); + this.dpr = Math.max(1, window.devicePixelRatio || 1); + + this.renderTree(); + + // Chart interaction + this.resizeObserver = new ResizeObserver(() => this.drawChart()); + this.resizeObserver.observe(this.canvas); + this.canvas.addEventListener("mousemove", (e) => this.onChartHover(e)); + this.canvas.addEventListener("mouseleave", () => { this.tooltipEl.hidden = true; }); + + // Pan + zoom state + this.viewStartUs = 0; + this.viewEndUs = this.model.session.trace_end_us || 1; + this.panning = false; + this.canvas.addEventListener("mousedown", (e) => this.onPanStart(e)); + window.addEventListener("mousemove", (e) => this.onPanMove(e)); + window.addEventListener("mouseup", () => this.onPanEnd()); + this.canvas.addEventListener("wheel", (e) => this.onWheel(e), { passive: false }); + } + + renderTree() { + const parts = []; + // Sort categories by index. + const catIndices = Array.from(this.statsByCategory.keys()).sort((a, b) => a - b); + for (const catIdx of catIndices) { + const catName = this.catMap.get(catIdx) || `Category ${catIdx}`; + const stats = this.statsByCategory.get(catIdx); + parts.push(`<div class="csv-cat-header">${escapeHtml(catName)}</div>`); + for (const s of stats) { + const id = s.stat_id; + parts.push( + `<label class="csv-stat-row">` + + `<input type="checkbox" data-stat-id="${id}">` + + `<span class="csv-stat-name"></span>` + + `</label>` + ); + } + } + if (parts.length === 0) { + parts.push(`<div class="csv-empty">No CSV profiler data in this trace.</div>`); + } + this.treeEl.innerHTML = parts.join(""); + + // Set names via DOM (XSS safe). + let statIdx = 0; + for (const catIdx of catIndices) { + const stats = this.statsByCategory.get(catIdx); + for (const s of stats) { + const rows = this.treeEl.querySelectorAll(".csv-stat-row"); + if (statIdx < rows.length) { + rows[statIdx].querySelector(".csv-stat-name").textContent = s.name; + } + statIdx++; + } + } + + // Wire checkboxes. + for (const cb of this.treeEl.querySelectorAll("input[type=checkbox]")) { + cb.addEventListener("change", () => { + const statId = Number(cb.dataset.statId); + if (cb.checked) { + this.selectedStats.add(statId); + if (!this.statColors.has(statId)) { + this.statColors.set(statId, LINE_COLORS[this.colorIndex++ % LINE_COLORS.length]); + } + this.fetchSeries(statId); + } else { + this.selectedStats.delete(statId); + this.drawChart(); + } + }); + } + } + + async ensureLoaded() { + // Tree is built in constructor; nothing extra to lazy-load. + this.loaded = true; + this.drawChart(); + } + + async fetchSeries(statId) { + if (this.seriesData.has(statId)) { + this.drawChart(); + return; + } + try { + const result = await getCsvSeries(statId); + // Merge all threads' samples for this stat into one combined array for now. + const allSamples = []; + for (const series of result) { + for (const [timeUs, value] of series.samples) { + allSamples.push({ timeUs, value }); + } + } + allSamples.sort((a, b) => a.timeUs - b.timeUs); + this.seriesData.set(statId, allSamples); + this.drawChart(); + } catch (e) { + console.error(`Failed to fetch CSV series for stat ${statId}: ${e.message}`); + } + } + + resizeCanvas() { + const rect = this.canvas.getBoundingClientRect(); + this.width = Math.floor(rect.width); + this.height = Math.floor(rect.height); + const bw = Math.floor(rect.width * this.dpr); + const bh = Math.floor(rect.height * this.dpr); + if (this.canvas.width !== bw || this.canvas.height !== bh) { + this.canvas.width = bw; + this.canvas.height = bh; + } + this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0); + } + + drawChart() { + this.resizeCanvas(); + const ctx = this.ctx; + const W = this.width; + const H = this.height; + + const bg = getComputedStyle(document.body).getPropertyValue("--bg0") || "#0d1117"; + const fg2 = getComputedStyle(document.body).getPropertyValue("--fg2") || "#8b949e"; + const border = getComputedStyle(document.body).getPropertyValue("--border") || "#30363d"; + ctx.fillStyle = bg; + ctx.fillRect(0, 0, W, H); + + if (this.selectedStats.size === 0) { + ctx.fillStyle = fg2; + ctx.font = "12px -apple-system, Segoe UI, sans-serif"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillText("Select stats from the tree to chart them", W / 2, H / 2); + return; + } + + const PAD_L = 60, PAD_R = 12, PAD_T = 12, PAD_B = 28; + const chartW = W - PAD_L - PAD_R; + const chartH = H - PAD_T - PAD_B; + if (chartW <= 0 || chartH <= 0) return; + + const startUs = this.viewStartUs; + const endUs = this.viewEndUs; + const rangeUs = Math.max(1, endUs - startUs); + + // Compute value range across all visible selected series. + let minVal = Infinity, maxVal = -Infinity; + for (const statId of this.selectedStats) { + const samples = this.seriesData.get(statId); + if (!samples) continue; + for (const s of samples) { + if (s.timeUs < startUs || s.timeUs > endUs) continue; + if (s.value < minVal) minVal = s.value; + if (s.value > maxVal) maxVal = s.value; + } + } + if (!isFinite(minVal)) { minVal = 0; maxVal = 1; } + if (minVal === maxVal) { minVal -= 0.5; maxVal += 0.5; } + const valRange = maxVal - minVal; + const valPad = valRange * 0.05; + minVal -= valPad; + maxVal += valPad; + + const xAt = (us) => PAD_L + (us - startUs) / rangeUs * chartW; + const yAt = (v) => PAD_T + (1 - (v - minVal) / (maxVal - minVal)) * chartH; + + // Grid lines. + ctx.strokeStyle = border; + ctx.lineWidth = 0.5; + for (let i = 0; i <= 4; i++) { + const y = PAD_T + chartH * i / 4; + ctx.beginPath(); ctx.moveTo(PAD_L, y); ctx.lineTo(PAD_L + chartW, y); ctx.stroke(); + } + + // Y axis labels. + ctx.fillStyle = fg2; + ctx.font = "10px -apple-system, Segoe UI, sans-serif"; + ctx.textAlign = "right"; + ctx.textBaseline = "middle"; + for (let i = 0; i <= 4; i++) { + const v = minVal + (maxVal - minVal) * (1 - i / 4); + const y = PAD_T + chartH * i / 4; + ctx.fillText(v.toFixed(2), PAD_L - 4, y); + } + + // X axis labels. + ctx.textAlign = "center"; + ctx.textBaseline = "top"; + const tickCount = Math.max(2, Math.min(8, Math.floor(chartW / 80))); + for (let i = 0; i <= tickCount; i++) { + const us = startUs + rangeUs * i / tickCount; + const x = xAt(us); + ctx.fillText(formatTime(us), x, PAD_T + chartH + 4); + } + + // Draw lines. + for (const statId of this.selectedStats) { + const samples = this.seriesData.get(statId); + if (!samples || samples.length === 0) continue; + const color = this.statColors.get(statId) || "#fff"; + + ctx.strokeStyle = color; + ctx.lineWidth = 1.5; + ctx.beginPath(); + let started = false; + for (const s of samples) { + if (s.timeUs < startUs || s.timeUs > endUs) continue; + const x = xAt(s.timeUs); + const y = yAt(s.value); + if (!started) { ctx.moveTo(x, y); started = true; } + else { ctx.lineTo(x, y); } + } + ctx.stroke(); + } + + // Chart border. + ctx.strokeStyle = border; + ctx.lineWidth = 1; + ctx.strokeRect(PAD_L, PAD_T, chartW, chartH); + + // Legend. + ctx.font = "10px -apple-system, Segoe UI, sans-serif"; + ctx.textAlign = "left"; + ctx.textBaseline = "top"; + let legendX = PAD_L + 6; + for (const statId of this.selectedStats) { + const def = this.statDefs.find(d => d.stat_id === statId); + const name = def ? def.name : `stat ${statId}`; + const color = this.statColors.get(statId) || "#fff"; + ctx.fillStyle = color; + ctx.fillRect(legendX, PAD_T + 4, 10, 10); + ctx.fillStyle = "#ccc"; + ctx.fillText(name, legendX + 14, PAD_T + 4); + legendX += ctx.measureText(name).width + 24; + } + + // Store layout for hover. + this._chartLayout = { PAD_L, PAD_R, PAD_T, PAD_B, chartW, chartH, startUs, endUs, rangeUs, minVal, maxVal, xAt, yAt }; + } + + onChartHover(e) { + if (!this._chartLayout || this.selectedStats.size === 0) { + this.tooltipEl.hidden = true; + return; + } + const rect = this.canvas.getBoundingClientRect(); + const mx = e.clientX - rect.left; + const my = e.clientY - rect.top; + const { PAD_L, PAD_T, chartW, chartH, startUs, rangeUs } = this._chartLayout; + + if (mx < PAD_L || mx > PAD_L + chartW || my < PAD_T || my > PAD_T + chartH) { + this.tooltipEl.hidden = true; + return; + } + + const cursorUs = startUs + (mx - PAD_L) / chartW * rangeUs; + const lines = []; + for (const statId of this.selectedStats) { + const samples = this.seriesData.get(statId); + if (!samples || samples.length === 0) continue; + // Find nearest sample. + let best = null, bestDist = Infinity; + for (const s of samples) { + const d = Math.abs(s.timeUs - cursorUs); + if (d < bestDist) { bestDist = d; best = s; } + } + if (best) { + const def = this.statDefs.find(d => d.stat_id === statId); + const name = def ? def.name : `stat ${statId}`; + const color = this.statColors.get(statId) || "#fff"; + lines.push(`<span style="color:${color}">${escapeHtml(name)}</span>: ${best.value.toFixed(3)}`); + } + } + if (lines.length === 0) { this.tooltipEl.hidden = true; return; } + this.tooltipEl.innerHTML = `<div style="margin-bottom:2px">${formatTime(cursorUs)}</div>` + lines.join("<br>"); + this.tooltipEl.style.left = `${mx + 12}px`; + this.tooltipEl.style.top = `${my + 12}px`; + this.tooltipEl.hidden = false; + } + + onPanStart(e) { + if (e.button !== 0) return; + this.panning = true; + this.panStartX = e.clientX; + this.panStartViewStart = this.viewStartUs; + this.panStartViewEnd = this.viewEndUs; + } + + onPanMove(e) { + if (!this.panning || !this._chartLayout) return; + const dx = e.clientX - this.panStartX; + const usPerPx = (this.panStartViewEnd - this.panStartViewStart) / this._chartLayout.chartW; + const shift = -dx * usPerPx; + this.viewStartUs = this.panStartViewStart + shift; + this.viewEndUs = this.panStartViewEnd + shift; + this.drawChart(); + } + + onPanEnd() { this.panning = false; } + + onWheel(e) { + e.preventDefault(); + if (!this._chartLayout) return; + const rect = this.canvas.getBoundingClientRect(); + const mx = e.clientX - rect.left; + const { PAD_L, chartW, startUs, rangeUs } = this._chartLayout; + const cursorUs = startUs + (mx - PAD_L) / chartW * rangeUs; + const factor = e.deltaY > 0 ? 1.25 : 0.8; + const newRange = Math.max(10, (this.viewEndUs - this.viewStartUs) * factor); + const ratio = (mx - PAD_L) / chartW; + this.viewStartUs = cursorUs - ratio * newRange; + this.viewEndUs = this.viewStartUs + newRange; + this.drawChart(); + } +} |