path: root/src/zen/frontend/html/csvstats.js

// Copyright Epic Games, Inc. All Rights Reserved.
// CSV Profiler stats viewer — category/stat tree with line-chart visualization.

import { getCsvSeries } from "./api.js";
import { escapeHtml } from "./util.js";

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();
	}
}