@zenfg/inspector 0.1.0-beta.1

package/src/panelPassesView.ts

@@ -0,0 +1,222 @@
+import type { FrameGraphDebugNode, FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import { createCell, formatGpuDuration, labelNode } from './panelDomHelpers.ts';
+import type { PassesSubview, Selection } from './panelTypes.ts';
+import {
+	createEmptyTableRow,
+	createKindCell,
+	createFilterSelect,
+	createSearchInput,
+	createSelectionCell,
+	createTableScroller,
+	createViewToolbar,
+	groupPath,
+	registerSelectable,
+	type WorkbenchCallbacks,
+	updateSelectedRows,
+} from './panelWorkbenchHelpers.ts';
+
+type PassSort = 'order' | 'label' | 'kind' | 'gpu';
+
+export class PassesView {
+	readonly root = document.createElement('section');
+	private readonly toolbar = createViewToolbar('Pass filters and sorting');
+	private readonly tabList = document.createElement('div');
+	private readonly listButton = this.createSubviewButton('list', 'Pass List');
+	private readonly groupsButton = this.createSubviewButton('groups', 'Group Hierarchy');
+	private readonly listPane = document.createElement('div');
+	private readonly groupsPane = document.createElement('div');
+	private readonly listTable = createTableScroller([
+		{ label: 'Order', column: 'numeric' },
+		{ label: 'Segment', column: 'code' },
+		{ label: 'Label' },
+		{ label: 'Group' },
+		{ label: 'Kind', column: 'kind' },
+		{ label: 'GPU (ms)', column: 'numeric' },
+		{ label: 'Reads', column: 'numeric' },
+		{ label: 'Writes', column: 'numeric' },
+	]);
+	private readonly groupsTable = createTableScroller([
+		{ label: '' },
+		{ label: 'Group' },
+		{ label: 'Retained', column: 'numeric' },
+		{ label: 'Culled', column: 'numeric' },
+		{ label: 'GPU work', column: 'numeric' },
+		{ label: 'Inputs', column: 'numeric' },
+		{ label: 'Outputs', column: 'numeric' },
+	]);
+	private readonly rows = new Map<string, HTMLElement[]>();
+	private snapshot: FrameGraphDebugViewModel | undefined;
+	private selected: Selection | undefined;
+	private subview: PassesSubview = 'list';
+	private search = '';
+	private kind = 'all';
+	private sort: PassSort = 'order';
+
+	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
+		this.root.className = 'zenfg-inspector-view zenfg-inspector-passes-view';
+		this.root.id = `${idPrefix}-view-passes`;
+		this.root.setAttribute('role', 'tabpanel');
+		this.tabList.className = 'zenfg-inspector-subtabs';
+		this.tabList.setAttribute('role', 'tablist');
+		this.tabList.setAttribute('aria-label', 'Pass views');
+		this.tabList.append(this.listButton, this.groupsButton);
+
+		const search = createSearchInput('Search pass or group', this.search, (value) => {
+			this.search = value.trim().toLocaleLowerCase();
+			this.renderRows();
+		});
+		const kind = createFilterSelect('Pass kind', this.kind, [
+			['all', 'All kinds'],
+			['render', 'Render'],
+			['compute', 'Compute'],
+			['copy', 'Copy'],
+			['clear-buffer', 'Clear Buffer'],
+			['command', 'Command'],
+			['external-submission', 'External'],
+		], (value) => {
+			this.kind = value;
+			this.renderRows();
+		});
+		const sort = createFilterSelect('Sort passes', this.sort, [
+			['order', 'Order'],
+			['label', 'Label'],
+			['kind', 'Kind'],
+			['gpu', 'GPU'],
+		], (value) => {
+			this.sort = value as PassSort;
+			this.renderRows();
+		});
+		this.toolbar.append(search, kind, sort);
+
+		this.listButton.id = `${idPrefix}-list-subtab`;
+		this.listButton.setAttribute('aria-controls', `${idPrefix}-pass-list-panel`);
+		this.groupsButton.id = `${idPrefix}-groups-subtab`;
+		this.groupsButton.setAttribute('aria-controls', `${idPrefix}-group-list-panel`);
+		this.listPane.id = `${idPrefix}-pass-list-panel`;
+		this.listPane.className = 'zenfg-inspector-subview';
+		this.listPane.setAttribute('role', 'tabpanel');
+		this.listPane.setAttribute('aria-labelledby', this.listButton.id);
+		this.listPane.appendChild(this.listTable.scroller);
+		this.groupsPane.id = `${idPrefix}-group-list-panel`;
+		this.groupsPane.className = 'zenfg-inspector-subview';
+		this.groupsPane.setAttribute('role', 'tabpanel');
+		this.groupsPane.setAttribute('aria-labelledby', this.groupsButton.id);
+		this.groupsPane.appendChild(this.groupsTable.scroller);
+		this.root.append(this.tabList, this.toolbar, this.listPane, this.groupsPane);
+		this.updateSubview();
+	}
+
+	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
+		this.snapshot = snapshot;
+		if (snapshot.debugGroups.length === 0 && this.subview === 'groups') this.subview = 'list';
+		this.groupsButton.disabled = snapshot.debugGroups.length === 0;
+		this.renderRows();
+		this.updateSubview();
+	}
+
+	setSelection(selected: Selection | undefined): void {
+		this.selected = selected;
+		updateSelectedRows(this.rows, selected);
+	}
+
+	private createSubviewButton(subview: PassesSubview, label: string): HTMLButtonElement {
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.textContent = label;
+		button.setAttribute('role', 'tab');
+		button.addEventListener('click', () => {
+			this.subview = subview;
+			this.updateSubview();
+		});
+		return button;
+	}
+
+	private updateSubview(): void {
+		const listActive = this.subview === 'list';
+		this.listButton.setAttribute('aria-selected', listActive ? 'true' : 'false');
+		this.groupsButton.setAttribute('aria-selected', listActive ? 'false' : 'true');
+		this.listButton.classList.toggle('active', listActive);
+		this.groupsButton.classList.toggle('active', !listActive);
+		this.listPane.hidden = !listActive;
+		this.groupsPane.hidden = listActive;
+	}
+
+	private renderRows(): void {
+		const snapshot = this.snapshot;
+		if (!snapshot) return;
+		this.rows.clear();
+		this.listTable.body.replaceChildren();
+		this.groupsTable.body.replaceChildren();
+
+		const passes = snapshot.nodes.filter((node) => this.matchesNode(snapshot, node));
+		passes.sort((a, b) => this.compareNodes(a, b));
+		for (const node of passes) {
+			const selection: Selection = { kind: 'node', id: node.id };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			const segment = snapshot.segmentByNodeId.get(node.id);
+			row.append(
+				createCell(String(node.order), { column: 'numeric' }),
+				createCell(segment ? `${segment.index}:${segment.kind === 'frame-graph' ? 'FG' : 'opaque'}` : '-', { column: 'code' }),
+				createSelectionCell(labelNode(node), selection, this.callbacks),
+				createCell(groupPath(snapshot, node.debugGroupId), { column: 'code' }),
+				createKindCell(node.kind),
+				createCell(node.kind === 'external-submission' ? 'opaque' : formatGpuDuration(node), { column: 'numeric' }),
+				createCell(String(node.reads.length), { column: 'numeric' }),
+				createCell(String(node.writes.length), { column: 'numeric' }),
+			);
+			this.listTable.body.appendChild(row);
+		}
+		if (passes.length === 0) this.listTable.body.appendChild(createEmptyTableRow(8, 'No passes match the current filters.'));
+
+		const query = this.search;
+		for (const group of snapshot.debugGroups.filter((candidate) => (
+			query.length === 0 || candidate.path.join(' / ').toLocaleLowerCase().includes(query)
+		))) {
+			const selection: Selection = { kind: 'group', pathKey: group.pathKey };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			const toggleCell = document.createElement('td');
+			const toggle = document.createElement('button');
+			toggle.type = 'button';
+			toggle.className = 'zenfg-inspector-group-toggle';
+			const expanded = this.callbacks.isGroupExpanded(group.pathKey);
+			toggle.textContent = expanded ? '▾' : '▸';
+			toggle.title = 'Toggle group in Graph view';
+			toggle.setAttribute('aria-label', `${expanded ? 'Collapse' : 'Expand'} group ${group.path.join(' / ')}`);
+			toggle.addEventListener('click', () => this.callbacks.onGroupToggle(group.pathKey));
+			toggleCell.appendChild(toggle);
+			const labelCell = createSelectionCell(group.label, selection, this.callbacks);
+			labelCell.style.paddingLeft = `${8 + group.depth * 18}px`;
+			const summary = group.summary;
+			row.append(
+				toggleCell,
+				labelCell,
+				createCell(String(summary.retainedNodeCount), { column: 'numeric' }),
+				createCell(String(summary.culledNodeCount), { column: 'numeric' }),
+				createCell(summary.timedNodeCount === 0 ? '-' : (summary.gpuWorkDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
+				createCell(String(summary.inputResources.length), { column: 'numeric' }),
+				createCell(String(summary.outputResources.length), { column: 'numeric' }),
+			);
+			this.groupsTable.body.appendChild(row);
+		}
+		if (this.groupsTable.body.childElementCount === 0) this.groupsTable.body.appendChild(createEmptyTableRow(7, 'No diagnostic groups.'));
+		updateSelectedRows(this.rows, this.selected);
+	}
+
+	private matchesNode(snapshot: FrameGraphDebugViewModel, node: FrameGraphDebugNode): boolean {
+		if (this.kind !== 'all' && node.kind !== this.kind) return false;
+		if (this.search.length === 0) return true;
+		const haystack = `${labelNode(node)} ${groupPath(snapshot, node.debugGroupId)}`.toLocaleLowerCase();
+		return haystack.includes(this.search);
+	}
+
+	private compareNodes(a: FrameGraphDebugNode, b: FrameGraphDebugNode): number {
+		switch (this.sort) {
+			case 'label': return labelNode(a).localeCompare(labelNode(b)) || a.order - b.order;
+			case 'kind': return a.kind.localeCompare(b.kind) || a.order - b.order;
+			case 'gpu': return (b.gpuDurationMicros ?? -1) - (a.gpuDurationMicros ?? -1) || a.order - b.order;
+			case 'order': return a.order - b.order;
+		}
+	}
+}

package/src/panelResourcesView.ts

@@ -0,0 +1,115 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import { createCell, labelResource } from './panelDomHelpers.ts';
+import type { Selection } from './panelTypes.ts';
+import {
+	createEmptyTableRow,
+	createKindCell,
+	createFilterSelect,
+	createSearchInput,
+	createSelectionCell,
+	createTableScroller,
+	createViewToolbar,
+	formatEstimatedBytes,
+	formatResourceDescriptor,
+	groupPath,
+	registerSelectable,
+	resourceAccessCounts,
+	type WorkbenchCallbacks,
+	updateSelectedRows,
+} from './panelWorkbenchHelpers.ts';
+
+export class ResourcesView {
+	readonly root = document.createElement('section');
+	private readonly table = createTableScroller([
+		{ label: 'Resource / Group' },
+		{ label: 'Type / Origin', column: 'kind' },
+		{ label: 'Descriptor', column: 'code' },
+		{ label: 'Estimated', column: 'numeric' },
+		{ label: 'Lifetime', column: 'code' },
+		{ label: 'Physical', column: 'numeric' },
+		{ label: 'R / W', column: 'numeric' },
+	]);
+	private readonly rows = new Map<string, HTMLElement[]>();
+	private snapshot: FrameGraphDebugViewModel | undefined;
+	private selected: Selection | undefined;
+	private search = '';
+	private kind = 'all';
+	private origin = 'all';
+
+	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
+		this.root.className = 'zenfg-inspector-view zenfg-inspector-resources-view';
+		this.root.id = `${idPrefix}-view-resources`;
+		this.root.setAttribute('role', 'tabpanel');
+		const toolbar = createViewToolbar('Resource filters');
+		toolbar.append(
+			createSearchInput('Search resource or group', this.search, (value) => {
+				this.search = value.trim().toLocaleLowerCase();
+				this.renderRows();
+			}),
+			createFilterSelect('Resource kind', this.kind, [
+				['all', 'All kinds'],
+				['texture', 'Texture'],
+				['buffer', 'Buffer'],
+			], (value) => {
+				this.kind = value;
+				this.renderRows();
+			}),
+			createFilterSelect('Resource origin', this.origin, [
+				['all', 'All origins'],
+				['transient', 'Transient'],
+				['imported', 'Imported'],
+				['swapchain', 'Swapchain'],
+			], (value) => {
+				this.origin = value;
+				this.renderRows();
+			}),
+		);
+		this.root.append(toolbar, this.table.scroller);
+	}
+
+	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
+		this.snapshot = snapshot;
+		this.renderRows();
+	}
+
+	setSelection(selected: Selection | undefined): void {
+		this.selected = selected;
+		updateSelectedRows(this.rows, selected);
+	}
+
+	private renderRows(): void {
+		const snapshot = this.snapshot;
+		if (!snapshot) return;
+		this.rows.clear();
+		this.table.body.replaceChildren();
+		const resources = snapshot.resources.filter((resource) => {
+			if (this.kind !== 'all' && resource.kind !== this.kind) return false;
+			if (this.origin !== 'all' && resource.origin !== this.origin) return false;
+			if (this.search.length === 0) return true;
+			return `${labelResource(resource)} ${groupPath(snapshot, resource.debugGroupId)}`
+				.toLocaleLowerCase().includes(this.search);
+		});
+		for (const resource of resources) {
+			const selection: Selection = { kind: 'resource', id: resource.id };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			const [reads, writes] = resourceAccessCounts(snapshot, resource.id);
+			const resourceCell = createSelectionCell(labelResource(resource), selection, this.callbacks);
+			const group = document.createElement('small');
+			group.textContent = groupPath(snapshot, resource.debugGroupId);
+			resourceCell.appendChild(group);
+			row.append(
+				resourceCell,
+				createKindCell(resource.kind, `${resource.kind} · ${resource.origin}`),
+				createCell(formatResourceDescriptor(resource), { column: 'code' }),
+				createCell(formatEstimatedBytes(resource.estimatedByteSize), { column: 'numeric' }),
+				createCell(resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : '-', { column: 'code' }),
+				createCell(resource.physicalResourceId === undefined ? '-' : `#${resource.physicalResourceId}`, { column: 'numeric' }),
+				createCell(`${reads} / ${writes}`, { column: 'numeric' }),
+			);
+			this.table.body.appendChild(row);
+		}
+		if (resources.length === 0) this.table.body.appendChild(createEmptyTableRow(7, 'No resources match the current filters.'));
+		updateSelectedRows(this.rows, this.selected);
+	}
+}

package/src/panelSelection.ts

@@ -0,0 +1,99 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { Selection } from './panelTypes.ts';
+
+export function resolveSelectedDetail(
+	snapshot: FrameGraphDebugViewModel,
+	selected: Selection | undefined,
+): unknown {
+	if (!selected) return snapshot;
+
+	switch (selected.kind) {
+		case 'node': {
+			const node = snapshot.nodeById.get(selected.id);
+			const executionSegment = snapshot.segmentByNodeId.get(selected.id);
+			return node
+				? {
+					...node,
+					debugGroupPath: debugGroupPath(snapshot, node.debugGroupId),
+					executionSegment,
+					reads: node.reads.map((access) => resolveAccessDetail(snapshot, access)),
+					writes: node.writes.map((access) => resolveAccessDetail(snapshot, access)),
+				}
+				: undefined;
+		}
+		case 'resource':
+			return resolveResourceDetail(snapshot, selected.id);
+		case 'group':
+			return snapshot.groupByPathKey.get(selected.pathKey);
+		case 'root':
+			return snapshot.roots[selected.index];
+		case 'culled': {
+			const culled = snapshot.culledNodes[selected.index];
+			return culled ? {
+				...culled,
+				node: {
+					...culled.node,
+					reads: culled.node.reads.map((access) => resolveAccessDetail(snapshot, access)),
+					writes: culled.node.writes.map((access) => resolveAccessDetail(snapshot, access)),
+				},
+			} : undefined;
+		}
+		case 'allocation':
+			return snapshot.allocationById.get(selected.id);
+		case 'segment':
+			return snapshot.segmentByIndex.get(selected.index);
+	}
+}
+
+export function selectionExists(snapshot: FrameGraphDebugViewModel, selected: Selection): boolean {
+	switch (selected.kind) {
+		case 'node':
+			return snapshot.nodeById.has(selected.id);
+		case 'group':
+			return snapshot.groupByPathKey.has(selected.pathKey);
+		case 'resource':
+			return snapshot.resourceById.has(selected.id);
+		case 'root':
+			return isValidIndex(selected.index, snapshot.roots.length);
+		case 'culled':
+			return isValidIndex(selected.index, snapshot.culledNodes.length);
+		case 'allocation':
+			return snapshot.allocationById.has(selected.id);
+		case 'segment':
+			return snapshot.segmentByIndex.has(selected.index);
+	}
+}
+
+function resolveResourceDetail(snapshot: FrameGraphDebugViewModel, resourceId: string): unknown {
+	const resource = snapshot.resourceById.get(resourceId);
+	if (!resource) return undefined;
+	const accesses = (snapshot.accessesByResourceId.get(resourceId) ?? [])
+		.map((access) => resolveAccessDetail(snapshot, access));
+	return {
+		...resource,
+		debugGroupPath: debugGroupPath(snapshot, resource.debugGroupId),
+		writes: accesses.filter((access) => access.mode === 'write'),
+		reads: accesses.filter((access) => access.mode === 'read'),
+	};
+}
+
+function resolveAccessDetail<TAccess extends { readonly textureViewId?: string }>(
+	snapshot: FrameGraphDebugViewModel,
+	access: TAccess,
+): TAccess & { readonly textureView?: FrameGraphDebugViewModel['protocol']['graph']['textureViews'][number] } {
+	return access.textureViewId === undefined
+		? access
+		: {
+			...access,
+			textureView: snapshot.textureViewById.get(access.textureViewId),
+		};
+}
+
+function debugGroupPath(snapshot: FrameGraphDebugViewModel, groupId: string | undefined): string {
+	if (groupId === undefined) return '-';
+	return snapshot.groupById.get(groupId)?.path.join(' / ') ?? `#${groupId}`;
+}
+
+function isValidIndex(index: number, length: number): boolean {
+	return Number.isInteger(index) && index >= 0 && index < length;
+}

package/src/panelTypes.ts

@@ -0,0 +1,28 @@
+import type { GraphRenderer } from './panelGraphRenderer.ts';
+
+export type Selection =
+    | { kind: 'node'; id: string }
+    | { kind: 'group'; pathKey: string }
+    | { kind: 'resource'; id: string }
+    | { kind: 'root'; index: number }
+    | { kind: 'culled'; index: number }
+    | { kind: 'allocation'; id: string }
+    | { kind: 'segment'; index: number };
+
+export type WorkbenchTab = 'overview' | 'graph' | 'passes' | 'resources' | 'memory' | 'diagnostics';
+export type PassesSubview = 'list' | 'groups';
+export type InspectorTab = 'summary' | 'relations' | 'raw';
+export type GraphViewMode = 'passes' | 'resources';
+
+export type GraphViewState = {
+    readonly host: HTMLElement;
+    readonly toolbar: HTMLElement;
+    readonly legend?: HTMLElement;
+	readonly layoutElementBudget?: number;
+    graphMode: GraphViewMode;
+    groupsEnabled: boolean;
+    readonly expandedGroupPaths: Set<string>;
+    renderer?: GraphRenderer;
+    fitOnNextRender: boolean;
+    anchorElementIdOnNextRender?: string;
+};

package/src/panelVisualTheme.ts

@@ -0,0 +1,39 @@
+export const FRAME_GRAPH_DEBUG_VISUAL_THEME = {
+	canvas: '#0b0f14',
+	panel: '#0f151d',
+	surface: '#131b24',
+	surfaceRaised: '#18222d',
+	surfaceHover: '#1d2935',
+	border: '#263341',
+	text: '#e6edf3',
+	textSecondary: '#b4beca',
+	muted: '#8b98a5',
+	accent: '#38bdf8',
+	success: '#34d399',
+	warning: '#fbbf24',
+	danger: '#fb7185',
+	fontUi: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+	fontMono: 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace',
+} as const;
+
+export const GRAPH_VISUAL_THEME = {
+	canvas: FRAME_GRAPH_DEBUG_VISUAL_THEME.canvas,
+	surface: FRAME_GRAPH_DEBUG_VISUAL_THEME.surface,
+	surfaceRaised: FRAME_GRAPH_DEBUG_VISUAL_THEME.surfaceRaised,
+	text: FRAME_GRAPH_DEBUG_VISUAL_THEME.text,
+	muted: FRAME_GRAPH_DEBUG_VISUAL_THEME.muted,
+	render: { stroke: '#34d399', fill: '#12342b' },
+	compute: { stroke: '#60a5fa', fill: '#162c46' },
+	copy: { stroke: '#fbbf24', fill: '#3a2d12' },
+	clear: { stroke: '#94a3b8', fill: '#25303a' },
+	command: { stroke: '#c084fc', fill: '#322044' },
+	external: { stroke: '#fb923c', fill: '#402318' },
+	texture: { stroke: '#f472b6', fill: '#3c1f32' },
+	buffer: { stroke: '#2dd4bf', fill: '#123632' },
+	group: { stroke: '#64748b', fill: '#141c29', alternateFill: '#172033' },
+	dependency: { value: '#94a3b8', ordering: '#64748b' },
+	access: { read: '#2dd4bf', write: '#f59e0b' },
+	selected: FRAME_GRAPH_DEBUG_VISUAL_THEME.accent,
+	hover: '#cbd5e1',
+	culled: { stroke: '#64748b', fill: '#171d24' },
+} as const;