@zenfg/inspector 0.1.0-beta.2 → 0.1.0-beta.4

package/src/panelDiagnosticsView.ts

@@ -1,33 +1,51 @@
 import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
-import { createCell, labelNode, labelResource } from './panelDomHelpers.ts';
-import type { Selection } from './panelTypes.ts';
+import { labelNode, labelResource } from './panelDomHelpers.ts';
+import { resolveNodeSelection } from './panelSelection.ts';
+import type { Selection, WorkbenchTab } from './panelTypes.ts';
 import {
-	createEmptyTableRow,
-	createKindCell,
-	createRelationButton,
-	createSelectionCell,
-	createTableScroller,
-	registerSelectable,
-	type WorkbenchCallbacks,
-	updateSelectedRows,
+	createFilterSelect, createRelationButton, createSearchInput, createViewToolbar,
+	registerSelectable, selectionKey, type WorkbenchCallbacks, updateSelectedRows,
 } from './panelWorkbenchHelpers.ts';
 
+const severityOrder = { error: 0, warning: 1, info: 2 } as const;
+
 export class DiagnosticsView {
 	readonly root = document.createElement('section');
 	private readonly scroller = document.createElement('div');
 	private readonly content = document.createElement('div');
 	private readonly rows = new Map<string, HTMLElement[]>();
+	private readonly openSections = new Set<string>();
+	private readonly count = document.createElement('span');
+	private readonly searchInput: HTMLInputElement;
+	private readonly severitySelect: HTMLSelectElement;
 	private snapshot: FrameGraphDebugViewModel | undefined;
 	private selected: Selection | undefined;
+	private severity = 'all';
+	private search = '';
 
 	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
 		this.root.className = 'zenfg-inspector-view zenfg-inspector-diagnostics-view';
 		this.root.id = `${idPrefix}-view-diagnostics`;
 		this.root.setAttribute('role', 'tabpanel');
+		const toolbar = createViewToolbar('Diagnostic filters');
+		this.searchInput = createSearchInput('Search diagnostic code or message', '', (value) => {
+			this.search = value.trim().toLocaleLowerCase();
+			this.render();
+		});
+		this.severitySelect = createFilterSelect('Diagnostic severity', this.severity, [
+			['all', 'All severities'], ['error', 'Error'], ['warning', 'Warning'], ['info', 'Info'],
+		], (value) => { this.severity = value; this.render(); });
+		const clear = document.createElement('button');
+		clear.type = 'button';
+		clear.textContent = 'Clear filters';
+		clear.addEventListener('click', () => { this.clearFilters(); this.render(); });
+		this.count.className = 'zenfg-inspector-result-count';
+		this.count.setAttribute('role', 'status');
+		toolbar.append(this.searchInput, this.severitySelect, clear, this.count);
 		this.scroller.className = 'zenfg-inspector-diagnostics-scroller';
-		this.content.className = 'zenfg-inspector-diagnostics-grid';
+		this.content.className = 'zenfg-inspector-diagnostics-sections';
 		this.scroller.appendChild(this.content);
-		this.root.appendChild(this.scroller);
+		this.root.append(toolbar, this.scroller);
 	}
 
 	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
@@ -40,23 +58,107 @@ export class DiagnosticsView {
 		updateSelectedRows(this.rows, selected);
 	}
 
+	reveal(selection: Selection): void {
+		this.clearFilters();
+		if (selection.kind === 'root') this.openSections.add('roots');
+		if (selection.kind === 'culled') this.openSections.add('culled');
+		if (selection.kind === 'segment') {
+			this.openSections.add('segments');
+			this.openSections.add(`segment:${selection.index}`);
+		}
+		this.render();
+		this.rows.get(selectionKey(selection))?.[0]?.scrollIntoView?.({ block: 'nearest' });
+	}
+
+	private clearFilters(): void {
+		this.search = '';
+		this.severity = 'all';
+		this.searchInput.value = '';
+		this.severitySelect.value = 'all';
+	}
+
 	private render(): void {
 		const snapshot = this.snapshot;
 		if (!snapshot) return;
 		this.rows.clear();
 		this.content.replaceChildren(
-			this.createRoots(snapshot),
-			this.createCulled(snapshot),
-			this.createSegments(snapshot),
-			this.createTiming(snapshot),
+			this.createMessages(snapshot), this.createRoots(snapshot), this.createCulled(snapshot), this.createSegments(snapshot),
 		);
 		updateSelectedRows(this.rows, this.selected);
 	}
 
-	private createSection(title: string, description?: string): HTMLElement {
+	private createMessages(snapshot: FrameGraphDebugViewModel): HTMLElement {
 		const section = document.createElement('section');
-		section.className = 'zenfg-inspector-diagnostic-card';
+		section.className = 'zenfg-inspector-diagnostic-messages';
 		const heading = document.createElement('h2');
+		heading.textContent = 'Diagnostics';
+		const summary = document.createElement('p');
+		const all = snapshot.protocol.diagnostics;
+		const errors = all.filter((entry) => entry.severity === 'error').length;
+		const warnings = all.filter((entry) => entry.severity === 'warning').length;
+		const infos = all.length - errors - warnings;
+		summary.textContent = `${errors} errors · ${warnings} warnings · ${infos} info`;
+		section.append(heading, summary);
+		// Sort a copy. Stable sort preserves capture order within each severity, including repeated codes.
+		const messages = all.filter((entry) => (this.severity === 'all' || entry.severity === this.severity)
+			&& (!this.search || `${entry.code} ${entry.message}`.toLocaleLowerCase().includes(this.search)))
+			.sort((a, b) => severityOrder[a.severity] - severityOrder[b.severity]);
+		this.count.textContent = `${messages.length} / ${all.length} diagnostics`;
+		for (const diagnostic of messages) {
+			const article = document.createElement('article');
+			article.className = 'zenfg-inspector-diagnostic-message';
+			article.dataset.severity = diagnostic.severity;
+			const title = document.createElement('h3');
+			const severity = document.createElement('span');
+			severity.className = 'zenfg-inspector-diagnostic-severity';
+			severity.textContent = diagnostic.severity;
+			const code = document.createElement('code');
+			code.textContent = diagnostic.code;
+			title.append(severity, code);
+			const message = document.createElement('p');
+			message.textContent = diagnostic.message;
+			article.append(title, message);
+			if (diagnostic.nodeId !== undefined) {
+				const selection = resolveNodeSelection(snapshot, diagnostic.nodeId);
+				const node = snapshot.canonicalNodeById.get(diagnostic.nodeId);
+				if (selection && node) article.appendChild(this.createObjectLink(labelNode(node), selection, 'passes'));
+			}
+			if (diagnostic.resourceId !== undefined) {
+				const resource = snapshot.resourceById.get(diagnostic.resourceId);
+				if (resource) article.appendChild(this.createObjectLink(labelResource(resource), { kind: 'resource', id: resource.id }, 'resources'));
+			}
+			section.appendChild(article);
+		}
+		if (messages.length === 0) {
+			const empty = document.createElement('p');
+			empty.className = 'zenfg-inspector-muted';
+			empty.textContent = all.length === 0 ? 'No diagnostic messages in this snapshot.' : 'No diagnostics match the current filters.';
+			section.appendChild(empty);
+		}
+		return section;
+	}
+
+	private createObjectLink(label: string, selection: Selection, tab: WorkbenchTab): HTMLElement {
+		const links = document.createElement('span');
+		links.className = 'zenfg-inspector-diagnostic-links';
+		const select = createRelationButton(label, selection, this.callbacks.onSelect);
+		registerSelectable(this.rows, select, selection, this.callbacks);
+		const reveal = document.createElement('button');
+		reveal.type = 'button';
+		reveal.className = 'zenfg-inspector-relation-button zenfg-inspector-diagnostic-reveal';
+		reveal.textContent = `Show in ${tab === 'passes' ? 'Passes' : 'Resources'}`;
+		reveal.setAttribute('aria-label', `${reveal.textContent}: ${label}`);
+		reveal.addEventListener('click', () => this.callbacks.onReveal?.(selection, tab));
+		links.append(select, reveal);
+		return links;
+	}
+
+	private createSection(key: string, title: string, description?: string): HTMLDetailsElement {
+		const section = document.createElement('details');
+		section.className = 'zenfg-inspector-diagnostic-section';
+		section.dataset.section = key;
+		section.open = this.openSections.has(key);
+		const heading = document.createElement('summary');
 		heading.textContent = title;
 		section.appendChild(heading);
 		if (description) {
@@ -64,97 +166,76 @@ export class DiagnosticsView {
 			text.textContent = description;
 			section.appendChild(text);
 		}
+		section.addEventListener('toggle', () => {
+			if (section.open) this.openSections.add(key);
+			else this.openSections.delete(key);
+		});
 		return section;
 	}
 
 	private createRoots(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection('Retention roots', 'Roots explain why graph work survived dead-node elimination.');
+		const section = this.createSection('roots', `Retention roots (${snapshot.roots.length})`, 'Roots explain why graph work survived dead-node elimination.');
 		const list = document.createElement('div');
 		list.className = 'zenfg-inspector-diagnostic-list';
-		snapshot.roots.forEach((root, index) => {
-			const selection: Selection = { kind: 'root', index };
-			const button = createRelationButton(
-				`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`,
-				selection,
-				this.callbacks.onSelect,
-			);
+		for (const root of snapshot.roots) {
+			const selection: Selection = { kind: 'root', key: root.key };
+			const node = root.nodeId === undefined ? undefined : snapshot.canonicalNodeById.get(root.nodeId);
+			const label = root.resource ? labelResource(root.resource) : node ? labelNode(node) : root.nodeId ?? 'Unknown';
+			const button = createRelationButton(`${root.reason} · ${label}`, selection, this.callbacks.onSelect);
 			registerSelectable(this.rows, button, selection, this.callbacks);
 			list.appendChild(button);
-		});
+		}
 		if (snapshot.roots.length === 0) list.textContent = 'No retention roots.';
 		section.appendChild(list);
 		return section;
 	}
 
 	private createCulled(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection('Culled nodes', 'Recorded nodes that were not reachable from a retention root.');
-		const table = createTableScroller([{ label: 'Node' }, { label: 'Kind', column: 'kind' }, { label: 'Reason' }]);
-		for (const [index, entry] of snapshot.culledNodes.entries()) {
-			const selection: Selection = { kind: 'culled', index };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			row.append(
-				createSelectionCell(labelNode(entry.node), selection, this.callbacks),
-				createKindCell(entry.node.kind),
-				createCell(entry.reason),
-			);
-			table.body.appendChild(row);
+		const section = this.createSection('culled', `Culled passes (${snapshot.culledNodes.length})`, 'Recorded passes removed during compilation. Inspect their reasons and accesses in Passes.');
+		const reasons = new Map<string, number>();
+		for (const entry of snapshot.culledNodes) reasons.set(entry.reason, (reasons.get(entry.reason) ?? 0) + 1);
+		const list = document.createElement('ul');
+		for (const [reason, count] of reasons) {
+			const item = document.createElement('li');
+			item.textContent = `${reason}: ${count}`;
+			list.appendChild(item);
+		}
+		section.appendChild(list);
+		if (snapshot.culledNodes.length > 0) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.className = 'zenfg-inspector-relation-button';
+			button.textContent = 'Show culled passes';
+			button.addEventListener('click', () => this.callbacks.onNavigate?.('passes', 'culled'));
+			section.appendChild(button);
 		}
-		if (snapshot.culledNodes.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No culled nodes.'));
-		section.appendChild(table.scroller);
 		return section;
 	}
 
 	private createSegments(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const section = this.createSection(
-			'Execution segments',
-			'An opaque interval is a graph boundary around external work; it is not a count or timing of third-party GPU submissions.',
-		);
-		const table = createTableScroller([{ label: '#', column: 'numeric' }, { label: 'Kind', column: 'kind' }, { label: 'Nodes' }]);
+		const section = this.createSection('segments', `Execution segments (${snapshot.executionSegments.length})`,
+			'An opaque interval marks external work. Its GPU submissions and duration are not measured here.');
 		for (const segment of snapshot.executionSegments) {
 			const selection: Selection = { kind: 'segment', index: segment.index };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			const labels = segment.nodeIds.map((id) => snapshot.nodeById.get(id))
-				.filter((node) => node !== undefined)
-				.map((node) => labelNode(node));
-			row.append(
-				createSelectionCell(String(segment.index), selection, this.callbacks, 'numeric'),
-				createKindCell(segment.kind, segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'),
-				createCell(labels.join(', ') || '-'),
-			);
-			table.body.appendChild(row);
-		}
-		if (snapshot.executionSegments.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No execution segments.'));
-		section.appendChild(table.scroller);
-		return section;
-	}
-
-	private createTiming(snapshot: FrameGraphDebugViewModel): HTMLElement {
-		const metrics = snapshot.metrics;
-		const coverage = metrics.timingEligibleNodeCount === 0
-			? 'No eligible render or compute passes'
-			: `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} eligible passes timed (${((metrics.timedNodeCount / metrics.timingEligibleNodeCount) * 100).toFixed(0)}%)`;
-		const section = this.createSection('GPU timing coverage', coverage);
-		if (snapshot.profiling.status === 'unavailable') {
-			const status = document.createElement('p');
-			status.textContent = `Timing unavailable: ${snapshot.profiling.reason}.`;
-			section.appendChild(status);
+			const members = this.createSection(`segment:${segment.index}`, `${segment.index} · ${segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'} · ${segment.nodeIds.length} passes`);
+			const button = createRelationButton('Inspect segment', selection, this.callbacks.onSelect);
+			registerSelectable(this.rows, button, selection, this.callbacks);
+			members.appendChild(button);
+			const list = document.createElement('div');
+			list.className = 'zenfg-inspector-diagnostic-list';
+			for (const id of segment.nodeIds) {
+				const node = snapshot.canonicalNodeById.get(id);
+				const nodeSelection = resolveNodeSelection(snapshot, id);
+				if (node && nodeSelection) list.appendChild(this.createObjectLink(labelNode(node), nodeSelection, 'passes'));
+			}
+			members.appendChild(list);
+			section.appendChild(members);
 		}
-		const table = createTableScroller([{ label: 'Pass' }, { label: 'Status', column: 'kind' }, { label: 'GPU (ms)', column: 'numeric' }]);
-		for (const node of snapshot.nodes.filter((candidate) => candidate.kind === 'render' || candidate.kind === 'compute')) {
-			const selection: Selection = { kind: 'node', id: node.id };
-			const row = document.createElement('tr');
-			registerSelectable(this.rows, row, selection, this.callbacks);
-			row.append(
-				createSelectionCell(labelNode(node), selection, this.callbacks),
-				createKindCell(node.gpuDurationMicros === undefined ? 'not-timed' : 'timed', node.gpuDurationMicros === undefined ? 'Not timed' : 'Timed'),
-				createCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
-			);
-			table.body.appendChild(row);
+		if (snapshot.executionSegments.length === 0) {
+			const empty = document.createElement('p');
+			empty.textContent = 'No execution segments.';
+			section.appendChild(empty);
 		}
-		if (table.body.childElementCount === 0) table.body.appendChild(createEmptyTableRow(3, 'No timing-eligible passes.'));
-		section.appendChild(table.scroller);
 		return section;
 	}
 }

package/src/panelDomHelpers.ts

@@ -126,9 +126,8 @@ export function formatGpuFrameDuration(snapshot: FrameGraphDebugViewModel): stri
 
 export function formatPoolHitRate(snapshot: FrameGraphDebugViewModel): string {
     const pool = snapshot.resourcePool;
-    if (!pool || pool.status !== 'available' || pool.acquireCount === 0) {
-        return '-';
-    }
+    if (!pool || pool.status !== 'available') return 'Unavailable';
+    if (pool.acquireCount === 0) return 'Not applicable · no acquisitions';
     return `${((pool.reuseCount / pool.acquireCount) * 100).toFixed(0)}%`;
 }
 
@@ -143,9 +142,9 @@ export function formatBytes(bytes: number): string {
 }
 
 export function labelNode(node: Pick<FrameGraphDebugNode, 'id' | 'label'>): string {
-    return node.label ?? `node-${node.id}`;
+    return node.label ?? node.id;
 }
 
 export function labelResource(resource: { readonly id: string; readonly kind: string; readonly label?: string }): string {
-    return resource.label ?? `${resource.kind}-${resource.id}`;
+    return resource.label ?? resource.id;
 }

package/src/panelGraphLayout.ts

@@ -1,3 +1,4 @@
+import { GRAPH_VISUAL_THEME, type GraphVisualTheme } from './panelVisualTheme.ts';
 import type cytoscape from 'cytoscape';
 import type { ELK, ElkExtendedEdge, ElkNode, ElkPort } from 'elkjs/lib/elk-api';
 
@@ -22,8 +23,8 @@ export type CytoscapeEdgeRouteData = {
     readonly segmentDistances: string;
 };
 
-export async function layoutGraphScene(elk: ELK, scene: GraphScene): Promise<GraphLayoutResult> {
-    const graph = createElkLayoutGraph(scene);
+export async function layoutGraphScene(elk: ELK, scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): Promise<GraphLayoutResult> {
+    const graph = createElkLayoutGraph(scene, theme);
     const layout = await elk.layout(graph);
     const positions = new Map<GraphSceneElementId, GraphPosition>();
     collectLayoutPositions(layout, 0, 0, positions);
@@ -34,20 +35,34 @@ export async function layoutGraphScene(elk: ELK, scene: GraphScene): Promise<Gra
     return { positions, routes };
 }
 
-export function createElkLayoutGraph(scene: GraphScene): ElkNode {
+function usesCenterPorts(node: GraphSceneNode): boolean {
+    return node.kind === 'resource' || node.kind === 'root'
+        || (node.kind === 'pass' && node.passKind === 'external-submission');
+}
+
+export function createElkLayoutGraph(scene: GraphScene, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): ElkNode {
     const childrenByParent = new Map<GraphSceneElementId | undefined, GraphSceneNode[]>();
     const portsByNode = new Map<GraphSceneElementId, ElkPort[]>();
+    const nodesById = new Map(scene.nodes.map((node) => [node.id, node]));
+    const boundaryPort = (id: string, source: boolean) => {
+        const node = nodesById.get(id)!;
+        if (!usesCenterPorts(node)) return {};
+        const dimensions = nodeDimensions(node, theme);
+        return { x: source ? dimensions.width : 0, y: dimensions.height / 2 };
+    };
     const elkEdges = scene.edges.map((edge): ElkExtendedEdge => {
         const sourcePortId = `${edge.id}:source`;
         const targetPortId = `${edge.id}:target`;
         appendPort(portsByNode, edge.from, {
             id: sourcePortId,
+            ...boundaryPort(edge.from, true),
             width: 1,
             height: 1,
             layoutOptions: { 'elk.port.side': 'EAST' },
         });
         appendPort(portsByNode, edge.to, {
             id: targetPortId,
+            ...boundaryPort(edge.to, false),
             width: 1,
             height: 1,
             layoutOptions: { 'elk.port.side': 'WEST' },
@@ -65,7 +80,7 @@ export function createElkLayoutGraph(scene: GraphScene): ElkNode {
     }
     const createNode = (node: GraphSceneNode): ElkNode => {
         const children = childrenByParent.get(node.id)?.map(createNode);
-        const dimensions = nodeDimensions(node);
+        const dimensions = nodeDimensions(node, theme);
         return {
             id: node.id,
             width: dimensions.width,
@@ -86,7 +101,7 @@ export function createElkLayoutGraph(scene: GraphScene): ElkNode {
                 'elk.spacing.edgeEdge': '10',
                 'elk.layered.spacing.edgeEdgeBetweenLayers': '10',
             } : {
-                'elk.portConstraints': 'FIXED_SIDE',
+                'elk.portConstraints': usesCenterPorts(node) ? 'FIXED_POS' : 'FIXED_SIDE',
             },
         };
     };

package/src/panelGraphRenderer.ts

@@ -1,12 +1,17 @@
+import type { GraphVisualTheme } from './panelVisualTheme.ts';
 import type { GraphScene, GraphSceneElementId } from './panelGraphScene.ts';
 import type { Selection } from './panelTypes.ts';
 
 export type GraphRenderRequest = {
+    readonly theme?: GraphVisualTheme;
+    readonly onVisible?: () => void;
     readonly scene: GraphScene;
     readonly selected: Selection | undefined;
     readonly hovered: Selection | undefined;
     readonly fit: boolean;
     readonly anchorElementId?: GraphSceneElementId;
+    readonly reveal?: { readonly selection: Selection; readonly revision: number };
+    readonly captureRevision?: number;
     readonly onSelect: (selection: Selection) => void;
     readonly onHover: (selection: Selection | undefined) => void;
     readonly onToggleGroup: (pathKey: string) => void;
@@ -14,8 +19,10 @@ export type GraphRenderRequest = {
 
 export interface GraphRenderer {
     render(request: GraphRenderRequest): void;
+    setTheme?(theme: GraphVisualTheme): void;
     resize(): void;
     fit(): void;
     relayout(): void;
+    cancelReveal?(): void;
     destroy(): void;
 }