@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/ui/ComponentsTable.svelte

@@ -0,0 +1,265 @@
+<script>import { fmt_ms, fmt_dur, fmt_pct, fmt_bytes, CATEGORY_COLOR } from "./format.js";
+import { sortable } from "./sort.svelte.js";
+import { pressable } from "./press.js";
+import FrameDetails from "./FrameDetails.svelte";
+import { row_id, follow_hash } from "./row-anchor.svelte.js";
+let { rows, busy, hasAlloc, maxTotal, base = "", dev = false } = $props();
+let query = $state("");
+const filtered = $derived.by(() => {
+	const q = query.trim().toLowerCase();
+	if (!q) return rows;
+	return rows.filter((r) => r.name.toLowerCase().includes(q) || r.url.toLowerCase().includes(q) || (r.path ?? "").toLowerCase().includes(q));
+});
+const s = sortable(() => filtered, "self_ms");
+let open = $state(null);
+const hasSplit = $derived(rows.some((r) => (r.markup_ms ?? 0) + (r.logic_ms ?? 0) > 0));
+const hasParent = $derived(rows.some((r) => !!r.parent));
+// page mode: the spread across runs (min / median / max), a cold first run marked
+const hasRuns = $derived(rows.some((r) => (r.runs_ms?.length ?? 0) > 1));
+const cols = $derived(7 + (hasAlloc ? 1 : 0) + (hasSplit ? 1 : 0) + (hasParent ? 1 : 0) + (hasRuns ? 1 : 0));
+const own = (r) => (r.markup_ms ?? 0) + (r.logic_ms ?? 0);
+const spread = (r) => {
+	const xs = r.runs_ms ?? [];
+	if (xs.length < 2) return null;
+	const s = [...xs].sort((a, b) => a - b);
+	const rest = xs.slice(1);
+	const rest_med = [...rest].sort((a, b) => a - b)[Math.floor(rest.length / 2)];
+	return {
+		min: s[0],
+		med: s[Math.floor(s.length / 2)],
+		max: s[s.length - 1],
+		cold: xs[0] >= 5 && xs[0] >= rest_med * 2.5 && xs[0] === s[s.length - 1],
+		flaky: s[s.length - 1] >= s[Math.floor(s.length / 2)] * 3 && s[s.length - 1] - s[Math.floor(s.length / 2)] >= 10
+	};
+};
+// a finding's `#comp=<name>` link opens + scrolls to its row
+$effect(() => follow_hash("comp", () => rows.map((r) => r.name), (k) => {
+	query = "";
+	open = k;
+}));
+</script>
+
+<div class="tools">
+	<input
+		type="search"
+		placeholder="filter components…"
+		bind:value={query}
+		aria-label="filter components"
+	/>
+	<span class="hint"
+		>{filtered.length} of {rows.length} · click a row for its location and call stacks</span
+	>
+</div>
+<table>
+	<thead>
+		<tr>
+			<th>component</th>
+			<th>file</th>
+			<th>self / total</th>
+			<th
+				class="num sort"
+				class:active={s.key === 'self_ms'}
+				onclick={() => s.click('self_ms')}
+				{@attach pressable}
+				aria-sort={s.aria('self_ms')}>self ms<span class="arr">{s.arrow('self_ms')}</span></th
+			>
+			<th
+				class="num sort"
+				class:active={s.key === 'total_ms'}
+				onclick={() => s.click('total_ms')}
+				{@attach pressable}
+				aria-sort={s.aria('total_ms')}>total ms<span class="arr">{s.arrow('total_ms')}</span></th
+			>
+			<th
+				class="num sort"
+				class:active={s.key === 'per'}
+				title="one render of it: its time per page render ÷ how many times it rendered in one"
+				onclick={() => s.click('per')}
+				{@attach pressable}
+				aria-sort={s.aria('per')}>per call<span class="arr">{s.arrow('per')}</span></th
+			>
+			<th class="num">% of busy</th>
+			{#if hasSplit}
+				<th
+					class="sort"
+					class:active={s.key === 'markup_ms'}
+					title="its own time split: Svelte writing the template (markup) vs its script and what it calls (logic); nested components in neither"
+					onclick={() => s.click('markup_ms')}
+					{@attach pressable}
+					aria-sort={s.aria('markup_ms')}
+					>markup / logic<span class="arr">{s.arrow('markup_ms')}</span></th
+				>
+			{/if}
+			{#if hasParent}<th
+					title="the component that rendered most of it — the {'{#each}'} owner of a row">under</th
+				>{/if}
+			{#if hasRuns}<th
+					title="its time in each render, min · median · max — a cold first run or a flaky one is marked"
+					>per run</th
+				>{/if}
+			{#if hasAlloc}
+				<th
+					class="num sort"
+					class:active={s.key === 'alloc'}
+					onclick={() => s.click('alloc')}
+					{@attach pressable}
+					aria-sort={s.aria('alloc')}>alloc<span class="arr">{s.arrow('alloc')}</span></th
+				>
+			{/if}
+		</tr>
+	</thead>
+	<tbody>
+		{#each s.sorted as f (f.name)}
+			<tr
+				class="row"
+				id={row_id('comp', f.name)}
+				class:open={open === f.name}
+				onclick={() => (open = open === f.name ? null : f.name)}
+				{@attach pressable}
+			>
+				<td class="fn">
+					<span class="caret">{open === f.name ? '▾' : '▸'}</span>
+					<b>{f.name}</b>
+					{#if f.count > 1}
+						<span class="hint" title="{f.count} renders in one page render, {fmt_ms(f.per)} ms each"
+							>×{f.count}</span
+						>
+					{/if}
+				</td>
+				<td class="file" title={f.path || ''}>
+					{#if f.url}{f.url}{#if f.line > 0}:{f.line}{/if}{:else}<span class="hint">native</span
+						>{/if}
+				</td>
+				<td class="split">
+					<div
+						class="split-bar"
+						title="self {fmt_ms(f.self_ms)} ms of total {fmt_ms(f.total_ms)} ms"
+					>
+						<div class="tot" style="width:{((f.total_ms / maxTotal) * 100).toFixed(1)}%"></div>
+						<div
+							class="slf"
+							style="width:{((f.self_ms / maxTotal) * 100).toFixed(1)}%;background:{CATEGORY_COLOR[
+								f.category
+							]}"
+						></div>
+					</div>
+				</td>
+				<td class="num"><b>{fmt_ms(f.self_ms)}</b></td>
+				<td class="num">{fmt_ms(f.total_ms)}</td>
+				<td class="num">{f.count > 0 ? fmt_dur(f.per) : '—'}</td>
+				<td class="num">{fmt_pct(f.total_ms, busy)}</td>
+				{#if hasSplit}
+					<td class="split2">
+						{#if own(f) > 0}
+							<div
+								class="ml"
+								title="markup {fmt_ms(f.markup_ms ?? 0)} ms · logic {fmt_ms(f.logic_ms ?? 0)} ms"
+							>
+								<div class="m" style="width:{((f.markup_ms ?? 0) / own(f)) * 100}%"></div>
+								<div class="l" style="width:{((f.logic_ms ?? 0) / own(f)) * 100}%"></div>
+							</div>
+							<span class="hint">{Math.round(((f.markup_ms ?? 0) / own(f)) * 100)}% markup</span>
+						{:else}—{/if}
+					</td>
+				{/if}
+				{#if hasParent}<td class="file">{f.parent ?? '—'}</td>{/if}
+				{#if hasRuns}
+					{@const sp = spread(f)}
+					<td
+						class="num runs"
+						title={(f.runs_ms ?? []).map((x, i) => `run ${i + 1}: ${fmt_ms(x)} ms`).join('\n')}
+					>
+						{#if sp}
+							{fmt_ms(sp.min)} · <b>{fmt_ms(sp.med)}</b> · {fmt_ms(sp.max)}
+							{#if sp.cold}<span class="tag cold">cold 1st</span>{:else if sp.flaky}<span
+									class="tag flaky">varies</span
+								>{/if}
+						{:else}—{/if}
+					</td>
+				{/if}
+				{#if hasAlloc}<td class="num">{f.alloc ? fmt_bytes(f.alloc) : '—'}</td>{/if}
+			</tr>
+			{#if open === f.name}
+				<FrameDetails {f} colspan={cols} {base} {dev} />
+			{/if}
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	.tools {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+		flex-wrap: wrap;
+		margin: 6px 0 8px;
+	}
+	.tools input {
+		font: inherit;
+		font-size: 13px;
+		background: var(--bg-raised);
+		color: var(--text);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		padding: 5px 10px;
+		min-width: 280px;
+	}
+	.tools .hint {
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+	tr.row {
+		cursor: pointer;
+	}
+	tr.row:hover td {
+		background: var(--bg-raised);
+	}
+	tr.row.open td {
+		border-bottom-color: transparent;
+	}
+	.caret {
+		color: var(--text-faint);
+		font-size: 10px;
+		margin-right: 4px;
+	}
+	.split2 {
+		min-width: 120px;
+	}
+	.ml {
+		display: flex;
+		height: 8px;
+		background: var(--bg-hover);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.ml .m {
+		background: #b48ead;
+	}
+	.ml .l {
+		background: #4a9d6e;
+	}
+	.split2 .hint {
+		color: var(--text-faint);
+		font-size: 11px;
+	}
+	.runs {
+		white-space: nowrap;
+		font-size: 12px;
+	}
+	.tag {
+		display: inline-block;
+		margin-left: 6px;
+		font-size: 10.5px;
+		border-radius: 999px;
+		padding: 0 6px;
+		line-height: 15px;
+	}
+	.tag.cold {
+		color: var(--c-blue);
+		border: 1px solid #2a3a5a;
+	}
+	.tag.flaky {
+		color: var(--warn);
+		border: 1px solid #5a4a20;
+	}
+</style>

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

@@ -0,0 +1,20 @@
+/** Components table — a `wake:'load'` island with reactive column sort (was TABLE_SORT_JS + the
+     *  string row builder). Sorts by self/total/per-call/alloc; a row expands to the component's
+     *  full location and the call stacks that rendered it. */
+import type { FrameStat } from '../analyze.js';
+type Row = FrameStat & {
+    per: number;
+    count: number;
+    alloc: number | null;
+};
+type $$ComponentProps = {
+    rows: Row[];
+    busy: number;
+    hasAlloc: boolean;
+    maxTotal: number;
+    base?: string;
+    dev?: boolean;
+};
+declare const ComponentsTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComponentsTable = ReturnType<typeof ComponentsTable>;
+export default ComponentsTable;