@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/ui/Treemap.svelte

@@ -0,0 +1,278 @@
+<script>let { hierarchy } = $props();
+const H = 440;
+let canvas;
+// the zoom stack starts at the root it was given; clicks own it after
+// svelte-ignore state_referenced_locally
+let stack = $state([hierarchy]);
+let resizeTick = $state(0);
+let tip = $state(null);
+let rects = [];
+function squarify(items, x, y, w, h) {
+	const out = [];
+	let total = 0;
+	for (const it of items) total += it.value;
+	if (total <= 0 || w <= 0 || h <= 0) return out;
+	const scale = w * h / total;
+	let rest = items.map((it) => ({
+		it,
+		area: it.value * scale
+	}));
+	let rx = x, ry = y, rw = w, rh = h;
+	const worst = (row, side) => {
+		let sum = 0, mx = 0, mn = Infinity;
+		for (const r of row) {
+			sum += r.area;
+			if (r.area > mx) mx = r.area;
+			if (r.area < mn) mn = r.area;
+		}
+		const s2 = sum * sum;
+		return Math.max(side * side * mx / s2, s2 / (side * side * mn));
+	};
+	while (rest.length) {
+		const side = Math.min(rw, rh);
+		const row = [];
+		let idx = 0;
+		while (idx < rest.length) {
+			if (row.length === 0 || worst(row.concat([rest[idx]]), side) <= worst(row, side)) {
+				row.push(rest[idx]);
+				idx++;
+			} else break;
+		}
+		let rowSum = 0;
+		for (const r of row) rowSum += r.area;
+		if (rw <= rh) {
+			const sH = rowSum / rw;
+			let cx = rx;
+			for (const r of row) {
+				const iw = r.area / sH;
+				out.push({
+					it: r.it,
+					x: cx,
+					y: ry,
+					w: iw,
+					h: sH
+				});
+				cx += iw;
+			}
+			ry += sH;
+			rh -= sH;
+		} else {
+			const sW = rowSum / rh;
+			let cy = ry;
+			for (const r of row) {
+				const ih = r.area / sW;
+				out.push({
+					it: r.it,
+					x: rx,
+					y: cy,
+					w: sW,
+					h: ih
+				});
+				cy += ih;
+			}
+			rx += sW;
+			rw -= sW;
+		}
+		rest = rest.slice(row.length);
+	}
+	return out;
+}
+function draw() {
+	if (!canvas) return;
+	const ctx = canvas.getContext("2d");
+	const dpr = window.devicePixelRatio || 1;
+	const W = canvas.clientWidth || 900;
+	canvas.width = W * dpr;
+	canvas.height = H * dpr;
+	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	ctx.clearRect(0, 0, W, H);
+	rects = [];
+	const box = (x, y, w, h, color, alpha) => {
+		ctx.globalAlpha = alpha;
+		ctx.fillStyle = color;
+		ctx.fillRect(x, y, Math.max(0, w - 1), Math.max(0, h - 1));
+		ctx.globalAlpha = 1;
+	};
+	const label = (x, y, w, txt, sub) => {
+		if (w < 46) return;
+		ctx.fillStyle = "#0d1014";
+		ctx.font = "600 10px ui-monospace,monospace";
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(x + 2, y, w - 4, 20);
+		ctx.clip();
+		ctx.fillText(txt, x + 4, y + 11);
+		if (sub) {
+			ctx.font = "9px ui-monospace,monospace";
+			ctx.globalAlpha = .75;
+			ctx.fillText(sub, x + 4, y + 21);
+			ctx.globalAlpha = 1;
+		}
+		ctx.restore();
+	};
+	const cur = stack[stack.length - 1];
+	const atRoot = stack.length === 1;
+	const cells = squarify(cur.children ?? [], 0, 0, W, H);
+	for (const c of cells) {
+		const node = c.it;
+		if (node.children && atRoot) {
+			box(c.x, c.y, c.w, c.h, node.color, .16);
+			if (c.w > 60 && c.h > 22) {
+				ctx.fillStyle = node.color;
+				ctx.font = "700 11px ui-monospace,monospace";
+				ctx.save();
+				ctx.beginPath();
+				ctx.rect(c.x + 2, c.y, c.w - 4, 14);
+				ctx.clip();
+				ctx.fillText(node.label + " · " + node.value + " ms", c.x + 4, c.y + 11);
+				ctx.restore();
+			}
+			const inner = squarify(node.children, c.x + 2, c.y + 15, Math.max(0, c.w - 4), Math.max(0, c.h - 17));
+			for (const ic of inner) {
+				const leaf = ic.it;
+				const op = .55 + Math.min(.4, (leaf.pct ?? 0) / 40);
+				box(ic.x, ic.y, ic.w, ic.h, leaf.color, op);
+				if (ic.w > 46 && ic.h > 14) label(ic.x, ic.y, ic.w, leaf.label, ic.h > 26 ? leaf.value + " ms" : "");
+				rects.push({
+					x: ic.x,
+					y: ic.y,
+					w: ic.w,
+					h: ic.h,
+					node: leaf,
+					zoom: node
+				});
+			}
+			rects.push({
+				x: c.x,
+				y: c.y,
+				w: c.w,
+				h: 15,
+				node,
+				zoom: node
+			});
+		} else {
+			const op = .55 + Math.min(.4, (node.pct ?? 0) / 40);
+			box(c.x, c.y, c.w, c.h, node.color, op);
+			if (c.w > 46 && c.h > 16) {
+				ctx.fillStyle = "#0d1014";
+				ctx.font = "600 11px ui-monospace,monospace";
+				ctx.save();
+				ctx.beginPath();
+				ctx.rect(c.x + 3, c.y, c.w - 6, 30);
+				ctx.clip();
+				ctx.fillText(node.label, c.x + 4, c.y + 13);
+				if (c.h > 28) {
+					ctx.font = "9px ui-monospace,monospace";
+					ctx.globalAlpha = .8;
+					ctx.fillText(node.value + " ms", c.x + 4, c.y + 24);
+					ctx.globalAlpha = 1;
+				}
+				ctx.restore();
+			}
+			rects.push({
+				x: c.x,
+				y: c.y,
+				w: c.w,
+				h: c.h,
+				node,
+				zoom: node.children ? node : null
+			});
+		}
+	}
+}
+// redraw when the zoom stack changes or the window resizes; the effect reads both so it re-runs.
+$effect(() => {
+	void stack;
+	void resizeTick;
+	draw();
+});
+$effect(() => {
+	const on = () => resizeTick++;
+	window.addEventListener("resize", on);
+	return () => window.removeEventListener("resize", on);
+});
+function at(ev) {
+	const r = canvas.getBoundingClientRect();
+	const mx = ev.clientX - r.left, my = ev.clientY - r.top;
+	for (let i = rects.length - 1; i >= 0; i--) {
+		const q = rects[i];
+		if (mx >= q.x && mx <= q.x + q.w && my >= q.y && my <= q.y + q.h) return q;
+	}
+	return null;
+}
+function onMove(ev) {
+	const q = at(ev);
+	if (!q || !q.node.label) {
+		tip = null;
+		return;
+	}
+	tip = {
+		node: q.node,
+		x: Math.min(ev.clientX + 14, window.innerWidth - 430),
+		y: ev.clientY + 14
+	};
+}
+function onClick(ev) {
+	const q = at(ev);
+	if (q && q.zoom && q.zoom.children) stack = [...stack, q.zoom];
+}
+function zoomOut(ev) {
+	ev.preventDefault();
+	stack = stack.slice(0, -1);
+}
+</script>
+
+<div class="crumb">
+	{#if stack.length === 1}
+		<span style="color:var(--text-faint)">click a box to zoom in</span>
+	{:else}
+		{stack
+			.slice(1)
+			.map((n) => n.label)
+			.join(' › ')} —
+		<a href="#top" onclick={zoomOut}>zoom out</a>
+	{/if}
+</div>
+<canvas
+	class="tree"
+	bind:this={canvas}
+	onmousemove={onMove}
+	onmouseleave={() => (tip = null)}
+	onclick={onClick}
+></canvas>
+{#if tip}
+	<div class="tree-tip" style="display:block;left:{tip.x}px;top:{tip.y}px">
+		<b>{tip.node.label}</b>
+		{#if tip.node.sub}<br /><span style="color:var(--text-faint)">{tip.node.sub}</span>{/if}
+		<br />{tip.node.value} ms{#if tip.node.pct != null}
+			· {tip.node.pct}% of busy{/if}
+	</div>
+{/if}
+
+<style>
+	.tree {
+		width: 100%;
+		height: 440px;
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		background: var(--bg-sunken);
+		display: block;
+		cursor: pointer;
+	}
+	.tree-tip {
+		position: fixed;
+		pointer-events: none;
+		background: var(--bg-hover);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		padding: 6px 10px;
+		font-size: 12px;
+		display: none;
+		max-width: 420px;
+		z-index: 10;
+		box-shadow: 0 4px 16px #0008;
+	}
+	.tree-tip b {
+		font-family: ui-monospace, monospace;
+	}
+</style>

package/dist/profiler/ui/Treemap.svelte.d.ts

@@ -0,0 +1,20 @@
+/**
+ * CPU treemap — a `wake:'load'` canvas island (was TREE_JS). Squarified layout of self-time,
+ * root → category → leaf; click a box to drill in, the breadcrumb zooms back out; hover for detail.
+ * The zoom stack and tooltip are `$state`; the canvas redraws in an `$effect` when either the stack
+ * or a resize changes. `rects` (hit regions) is plain (non-reactive) — it's rebuilt each draw.
+ */
+interface Leaf {
+    label: string;
+    value: number;
+    color: string;
+    pct?: number;
+    sub?: string;
+    children?: Leaf[];
+}
+type $$ComponentProps = {
+    hierarchy: Leaf;
+};
+declare const Treemap: import("svelte").Component<$$ComponentProps, {}, "">;
+type Treemap = ReturnType<typeof Treemap>;
+export default Treemap;

package/dist/profiler/ui/Upload.svelte

@@ -0,0 +1,19 @@
+<script>/** Open a saved profile (the /view GET page). Shell + the reactive UploadForm island. Ports
+*  render_upload_page. */
+import Shell from "./Shell.svelte";
+import UploadForm from "./UploadForm.svelte" with { wake: "load" };
+let { data } = $props();
+const { base } = $derived(data);
+</script>
+
+<Shell {base}>
+	<h1>Open a saved profile</h1>
+	<p class="hint">
+		Recorded on a serverless host (Amplify, Vercel, Netlify) where the report can't be kept in
+		memory? Export the <code>.ogp</code> there, then open it here — it's decrypted and rendered by
+		this profiler. ANY <code>.ogp</code> opens in ANY profiler: enter the key it was exported with. Leave
+		it blank and this profiler tries its OWN secret — so a report this profiler made re-opens without
+		retyping the key.
+	</p>
+	<UploadForm {base} />
+</Shell>

package/dist/profiler/ui/Upload.svelte.d.ts

@@ -0,0 +1,10 @@
+declare const Upload: import("svelte").Component<{
+    data: {
+        base: string;
+    };
+    form: Response | null;
+    params: {};
+    search: {};
+}, {}, "">;
+type Upload = ReturnType<typeof Upload>;
+export default Upload;

package/dist/profiler/ui/UploadForm.svelte

@@ -0,0 +1,59 @@
+<script>/**
+* The .ogp upload — a `wake:'load'` island (was report.ts's inline upload script). Posts the file
+* bytes + key; the server decrypts and returns the rendered report, which replaces the document.
+*/
+let { base } = $props();
+let key = $state("");
+let error = $state("");
+let busy = $state(false);
+let fileInput;
+async function onFile() {
+	const f = fileInput.files?.[0];
+	if (!f) return;
+	error = "";
+	busy = true;
+	try {
+		const buf = await f.arrayBuffer();
+		const res = await fetch(location.pathname, {
+			method: "POST",
+			headers: {
+				"content-type": "application/octet-stream",
+				"x-ogp-key": key
+			},
+			body: buf
+		});
+		const d = await res.json();
+		// the report is an islands page, so navigate to it (it renders + hydrates on load)
+		if (d.url) location.href = d.url;
+		else error = d.error || "Could not open that file.";
+	} catch {
+		error = "Could not read that file.";
+	} finally {
+		busy = false;
+		if (fileInput) fileInput.value = "";
+	}
+}
+</script>
+
+<p>
+	<label>
+		key
+		<input
+			type="password"
+			bind:value={key}
+			placeholder="the .ogp's export key — blank tries this profiler's own secret"
+			size="44"
+		/>
+	</label>
+</p>
+<p>
+	<input
+		type="file"
+		bind:this={fileInput}
+		onchange={onFile}
+		accept=".ogp,application/octet-stream"
+		disabled={busy}
+	/>
+</p>
+{#if error}<p class="verdict">{error}</p>{/if}
+<p class="hint"><a href={base}>← dashboard</a></p>

package/dist/profiler/ui/UploadForm.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    base: string;
+};
+declare const UploadForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type UploadForm = ReturnType<typeof UploadForm>;
+export default UploadForm;

package/dist/profiler/ui/WaitingTable.svelte

@@ -0,0 +1,55 @@
+<script>/** Waiting-by-function table — a `wake:'load'` island with reactive sort (count / wait ms). Where
+*  the server WAITED (not computed), attributed to the function that started the I/O. */
+import { fmt_ms, kind_color } from "./format.js";
+import { sortable } from "./sort.svelte.js";
+import { pressable } from "./press.js";
+let { rows, maxMs } = $props();
+const s = sortable(() => rows, "ms");
+</script>
+
+<table>
+	<thead>
+		<tr>
+			<th>function</th>
+			<th>kind</th>
+			<th>wait</th>
+			<th
+				class="num sort"
+				class:active={s.key === 'count'}
+				onclick={() => s.click('count')}
+				{@attach pressable}
+				aria-sort={s.aria('count')}>count<span class="arr">{s.arrow('count')}</span></th
+			>
+			<th
+				class="num sort"
+				class:active={s.key === 'ms'}
+				onclick={() => s.click('ms')}
+				{@attach pressable}
+				aria-sort={s.aria('ms')}>wait ms<span class="arr">{s.arrow('ms')}</span></th
+			>
+		</tr>
+	</thead>
+	<tbody>
+		{#each s.sorted as r (r.caller + '|' + r.kind)}
+			<tr>
+				<td class="fn">{r.caller}</td>
+				<td>{r.kind}</td>
+				<td class="split">
+					<div
+						class="split-bar"
+						title="{fmt_ms(r.ms)} ms across {r.count} call{r.count > 1 ? 's' : ''}"
+					>
+						<div
+							class="slf"
+							style="width:{((r.ms / maxMs) * 100).toFixed(1)}%;background:{kind_color(r.kind)}"
+						></div>
+					</div>
+				</td>
+				<td class="num"
+					>{r.count}{#if r.open}<span class="warn"> ({r.open} open)</span>{/if}</td
+				>
+				<td class="num"><b>{fmt_ms(r.ms)}</b></td>
+			</tr>
+		{/each}
+	</tbody>
+</table>

package/dist/profiler/ui/WaitingTable.svelte.d.ts

@@ -0,0 +1,14 @@
+type Row = {
+    caller: string;
+    kind: string;
+    count: number;
+    ms: number;
+    open: number;
+};
+type $$ComponentProps = {
+    rows: Row[];
+    maxMs: number;
+};
+declare const WaitingTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type WaitingTable = ReturnType<typeof WaitingTable>;
+export default WaitingTable;