@zenfg/inspector 0.1.0-beta.1

package/dist/panelDiagnosticsView.d.ts

@@ -0,0 +1,22 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { Selection } from './panelTypes.ts';
+import { type WorkbenchCallbacks } from './panelWorkbenchHelpers.ts';
+export declare class DiagnosticsView {
+    private readonly callbacks;
+    readonly root: HTMLElement;
+    private readonly scroller;
+    private readonly content;
+    private readonly rows;
+    private snapshot;
+    private selected;
+    constructor(callbacks: WorkbenchCallbacks, idPrefix: string);
+    setSnapshot(snapshot: FrameGraphDebugViewModel): void;
+    setSelection(selected: Selection | undefined): void;
+    private render;
+    private createSection;
+    private createRoots;
+    private createCulled;
+    private createSegments;
+    private createTiming;
+}
+//# sourceMappingURL=panelDiagnosticsView.d.ts.map

package/dist/panelDiagnosticsView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelDiagnosticsView.d.ts","sourceRoot":"","sources":["../src/panelDiagnosticsView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAON,KAAK,kBAAkB,EAEvB,MAAM,4BAA4B,CAAC;AAEpC,qBAAa,eAAe;IAQf,OAAO,CAAC,QAAQ,CAAC,SAAS;IAPtC,QAAQ,CAAC,IAAI,cAAqC;IAClD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiC;IAC1D,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAoC;IACzD,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAAwB;gBAEX,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM;IAU5E,WAAW,CAAC,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAKrD,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAKnD,OAAO,CAAC,MAAM;IAad,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,WAAW;IAmBnB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,cAAc;IAyBtB,OAAO,CAAC,YAAY;CA2BpB"}

package/dist/panelDiagnosticsView.js

@@ -0,0 +1,123 @@
+import { createCell, labelNode, labelResource } from "./panelDomHelpers.js";
+import { createEmptyTableRow, createKindCell, createRelationButton, createSelectionCell, createTableScroller, registerSelectable, updateSelectedRows, } from "./panelWorkbenchHelpers.js";
+export class DiagnosticsView {
+    callbacks;
+    root = document.createElement('section');
+    scroller = document.createElement('div');
+    content = document.createElement('div');
+    rows = new Map();
+    snapshot;
+    selected;
+    constructor(callbacks, idPrefix) {
+        this.callbacks = callbacks;
+        this.root.className = 'zenfg-inspector-view zenfg-inspector-diagnostics-view';
+        this.root.id = `${idPrefix}-view-diagnostics`;
+        this.root.setAttribute('role', 'tabpanel');
+        this.scroller.className = 'zenfg-inspector-diagnostics-scroller';
+        this.content.className = 'zenfg-inspector-diagnostics-grid';
+        this.scroller.appendChild(this.content);
+        this.root.appendChild(this.scroller);
+    }
+    setSnapshot(snapshot) {
+        this.snapshot = snapshot;
+        this.render();
+    }
+    setSelection(selected) {
+        this.selected = selected;
+        updateSelectedRows(this.rows, selected);
+    }
+    render() {
+        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));
+        updateSelectedRows(this.rows, this.selected);
+    }
+    createSection(title, description) {
+        const section = document.createElement('section');
+        section.className = 'zenfg-inspector-diagnostic-card';
+        const heading = document.createElement('h2');
+        heading.textContent = title;
+        section.appendChild(heading);
+        if (description) {
+            const text = document.createElement('p');
+            text.textContent = description;
+            section.appendChild(text);
+        }
+        return section;
+    }
+    createRoots(snapshot) {
+        const section = this.createSection('Retention roots', '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 = { kind: 'root', index };
+            const button = createRelationButton(`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`, 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;
+    }
+    createCulled(snapshot) {
+        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 = { 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);
+        }
+        if (snapshot.culledNodes.length === 0)
+            table.body.appendChild(createEmptyTableRow(3, 'No culled nodes.'));
+        section.appendChild(table.scroller);
+        return section;
+    }
+    createSegments(snapshot) {
+        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' }]);
+        for (const segment of snapshot.executionSegments) {
+            const 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;
+    }
+    createTiming(snapshot) {
+        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 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 = { 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 (table.body.childElementCount === 0)
+            table.body.appendChild(createEmptyTableRow(3, 'No timing-eligible passes.'));
+        section.appendChild(table.scroller);
+        return section;
+    }
+}
+//# sourceMappingURL=panelDiagnosticsView.js.map

package/dist/panelDiagnosticsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelDiagnosticsView.js","sourceRoot":"","sources":["../src/panelDiagnosticsView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { createCell, labelNode, labelResource } from './panelDomHelpers.ts';\nimport type { Selection } from './panelTypes.ts';\nimport {\n\tcreateEmptyTableRow,\n\tcreateKindCell,\n\tcreateRelationButton,\n\tcreateSelectionCell,\n\tcreateTableScroller,\n\tregisterSelectable,\n\ttype WorkbenchCallbacks,\n\tupdateSelectedRows,\n} from './panelWorkbenchHelpers.ts';\n\nexport class DiagnosticsView {\n\treadonly root = document.createElement('section');\n\tprivate readonly scroller = document.createElement('div');\n\tprivate readonly content = document.createElement('div');\n\tprivate readonly rows = new Map<string, HTMLElement[]>();\n\tprivate snapshot: FrameGraphDebugViewModel | undefined;\n\tprivate selected: Selection | undefined;\n\n\tconstructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {\n\t\tthis.root.className = 'zenfg-inspector-view zenfg-inspector-diagnostics-view';\n\t\tthis.root.id = `${idPrefix}-view-diagnostics`;\n\t\tthis.root.setAttribute('role', 'tabpanel');\n\t\tthis.scroller.className = 'zenfg-inspector-diagnostics-scroller';\n\t\tthis.content.className = 'zenfg-inspector-diagnostics-grid';\n\t\tthis.scroller.appendChild(this.content);\n\t\tthis.root.appendChild(this.scroller);\n\t}\n\n\tsetSnapshot(snapshot: FrameGraphDebugViewModel): void {\n\t\tthis.snapshot = snapshot;\n\t\tthis.render();\n\t}\n\n\tsetSelection(selected: Selection | undefined): void {\n\t\tthis.selected = selected;\n\t\tupdateSelectedRows(this.rows, selected);\n\t}\n\n\tprivate render(): void {\n\t\tconst snapshot = this.snapshot;\n\t\tif (!snapshot) return;\n\t\tthis.rows.clear();\n\t\tthis.content.replaceChildren(\n\t\t\tthis.createRoots(snapshot),\n\t\t\tthis.createCulled(snapshot),\n\t\t\tthis.createSegments(snapshot),\n\t\t\tthis.createTiming(snapshot),\n\t\t);\n\t\tupdateSelectedRows(this.rows, this.selected);\n\t}\n\n\tprivate createSection(title: string, description?: string): HTMLElement {\n\t\tconst section = document.createElement('section');\n\t\tsection.className = 'zenfg-inspector-diagnostic-card';\n\t\tconst heading = document.createElement('h2');\n\t\theading.textContent = title;\n\t\tsection.appendChild(heading);\n\t\tif (description) {\n\t\t\tconst text = document.createElement('p');\n\t\t\ttext.textContent = description;\n\t\t\tsection.appendChild(text);\n\t\t}\n\t\treturn section;\n\t}\n\n\tprivate createRoots(snapshot: FrameGraphDebugViewModel): HTMLElement {\n\t\tconst section = this.createSection('Retention roots', 'Roots explain why graph work survived dead-node elimination.');\n\t\tconst list = document.createElement('div');\n\t\tlist.className = 'zenfg-inspector-diagnostic-list';\n\t\tsnapshot.roots.forEach((root, index) => {\n\t\t\tconst selection: Selection = { kind: 'root', index };\n\t\t\tconst button = createRelationButton(\n\t\t\t\t`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`,\n\t\t\t\tselection,\n\t\t\t\tthis.callbacks.onSelect,\n\t\t\t);\n\t\t\tregisterSelectable(this.rows, button, selection, this.callbacks);\n\t\t\tlist.appendChild(button);\n\t\t});\n\t\tif (snapshot.roots.length === 0) list.textContent = 'No retention roots.';\n\t\tsection.appendChild(list);\n\t\treturn section;\n\t}\n\n\tprivate createCulled(snapshot: FrameGraphDebugViewModel): HTMLElement {\n\t\tconst section = this.createSection('Culled nodes', 'Recorded nodes that were not reachable from a retention root.');\n\t\tconst table = createTableScroller([{ label: 'Node' }, { label: 'Kind', column: 'kind' }, { label: 'Reason' }]);\n\t\tfor (const [index, entry] of snapshot.culledNodes.entries()) {\n\t\t\tconst selection: Selection = { kind: 'culled', index };\n\t\t\tconst row = document.createElement('tr');\n\t\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\t\trow.append(\n\t\t\t\tcreateSelectionCell(labelNode(entry.node), selection, this.callbacks),\n\t\t\t\tcreateKindCell(entry.node.kind),\n\t\t\t\tcreateCell(entry.reason),\n\t\t\t);\n\t\t\ttable.body.appendChild(row);\n\t\t}\n\t\tif (snapshot.culledNodes.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No culled nodes.'));\n\t\tsection.appendChild(table.scroller);\n\t\treturn section;\n\t}\n\n\tprivate createSegments(snapshot: FrameGraphDebugViewModel): HTMLElement {\n\t\tconst section = this.createSection(\n\t\t\t'Execution segments',\n\t\t\t'An opaque interval is a graph boundary around external work; it is not a count or timing of third-party GPU submissions.',\n\t\t);\n\t\tconst table = createTableScroller([{ label: '#', column: 'numeric' }, { label: 'Kind', column: 'kind' }, { label: 'Nodes' }]);\n\t\tfor (const segment of snapshot.executionSegments) {\n\t\t\tconst selection: Selection = { kind: 'segment', index: segment.index };\n\t\t\tconst row = document.createElement('tr');\n\t\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\t\tconst labels = segment.nodeIds.map((id) => snapshot.nodeById.get(id))\n\t\t\t\t.filter((node) => node !== undefined)\n\t\t\t\t.map((node) => labelNode(node));\n\t\t\trow.append(\n\t\t\t\tcreateSelectionCell(String(segment.index), selection, this.callbacks, 'numeric'),\n\t\t\t\tcreateKindCell(segment.kind, segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'),\n\t\t\t\tcreateCell(labels.join(', ') || '-'),\n\t\t\t);\n\t\t\ttable.body.appendChild(row);\n\t\t}\n\t\tif (snapshot.executionSegments.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No execution segments.'));\n\t\tsection.appendChild(table.scroller);\n\t\treturn section;\n\t}\n\n\tprivate createTiming(snapshot: FrameGraphDebugViewModel): HTMLElement {\n\t\tconst metrics = snapshot.metrics;\n\t\tconst coverage = metrics.timingEligibleNodeCount === 0\n\t\t\t? 'No eligible render or compute passes'\n\t\t\t: `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} eligible passes timed (${((metrics.timedNodeCount / metrics.timingEligibleNodeCount) * 100).toFixed(0)}%)`;\n\t\tconst section = this.createSection('GPU timing coverage', coverage);\n\t\tif (snapshot.profiling.status === 'unavailable') {\n\t\t\tconst status = document.createElement('p');\n\t\t\tstatus.textContent = `Timing unavailable: ${snapshot.profiling.reason}.`;\n\t\t\tsection.appendChild(status);\n\t\t}\n\t\tconst table = createTableScroller([{ label: 'Pass' }, { label: 'Status', column: 'kind' }, { label: 'GPU (ms)', column: 'numeric' }]);\n\t\tfor (const node of snapshot.nodes.filter((candidate) => candidate.kind === 'render' || candidate.kind === 'compute')) {\n\t\t\tconst selection: Selection = { kind: 'node', id: node.id };\n\t\t\tconst row = document.createElement('tr');\n\t\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\t\trow.append(\n\t\t\t\tcreateSelectionCell(labelNode(node), selection, this.callbacks),\n\t\t\t\tcreateKindCell(node.gpuDurationMicros === undefined ? 'not-timed' : 'timed', node.gpuDurationMicros === undefined ? 'Not timed' : 'Timed'),\n\t\t\t\tcreateCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),\r\n\t\t\t);\n\t\t\ttable.body.appendChild(row);\n\t\t}\n\t\tif (table.body.childElementCount === 0) table.body.appendChild(createEmptyTableRow(3, 'No timing-eligible passes.'));\n\t\tsection.appendChild(table.scroller);\n\t\treturn section;\n\t}\n}\n"]}

package/dist/panelDomHelpers.d.ts

@@ -0,0 +1,26 @@
+import type { FrameGraphDebugNode, FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+export declare function createSection(title: string): HTMLElement;
+export declare function createTable(headers: readonly string[]): HTMLTableElement;
+export declare function createStat(label: string, value: string): HTMLElement;
+export type FrameGraphDebugCellOptions = {
+    readonly column?: 'code' | 'kind' | 'numeric';
+    readonly kind?: string;
+};
+export declare function createCell(text: string, options?: FrameGraphDebugCellOptions): HTMLTableCellElement;
+export declare function createButtonCell(text: string, onClick: () => void): HTMLTableCellElement;
+export declare function createToolbarButton(text: string, title: string, onClick: () => void): HTMLButtonElement;
+export declare function createListButton(text: string, selected: boolean, onClick: () => void): HTMLButtonElement;
+export declare function createMutedText(text: string): HTMLElement;
+export declare function createMutedActionText(prefix: string, actionText: string, suffix: string, onAction: () => void): HTMLElement;
+export declare function formatProfilingStatus(snapshot: FrameGraphDebugViewModel): string;
+export declare function formatGpuDuration(node: FrameGraphDebugNode): string;
+export declare function formatGpuFrameDuration(snapshot: FrameGraphDebugViewModel): string;
+export declare function formatPoolHitRate(snapshot: FrameGraphDebugViewModel): string;
+export declare function formatBytes(bytes: number): string;
+export declare function labelNode(node: Pick<FrameGraphDebugNode, 'id' | 'label'>): string;
+export declare function labelResource(resource: {
+    readonly id: string;
+    readonly kind: string;
+    readonly label?: string;
+}): string;
+//# sourceMappingURL=panelDomHelpers.d.ts.map

package/dist/panelDomHelpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelDomHelpers.d.ts","sourceRoot":"","sources":["../src/panelDomHelpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,mBAAmB,EACnB,wBAAwB,EAC3B,MAAM,wBAAwB,CAAC;AAEhC,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,WAAW,CAOxD;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,GAAG,gBAAgB,CAYxE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,WAAW,CAQpE;AAED,MAAM,MAAM,0BAA0B,GAAG;IACxC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9C,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,0BAA0B,GAAG,oBAAoB,CAMnG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,oBAAoB,CAQxF;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,iBAAiB,CAQvG;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,IAAI,GAAG,iBAAiB,CASxG;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,CAKzD;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,IAAI,GAAG,WAAW,CAU3H;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,CAShF;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,mBAAmB,GAAG,MAAM,CAKnE;AAED,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,CAKjF;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,wBAAwB,GAAG,MAAM,CAM5E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAQjD;AAED,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,OAAO,CAAC,GAAG,MAAM,CAEjF;AAED,wBAAgB,aAAa,CAAC,QAAQ,EAAE;IAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAEvH"}

package/dist/panelDomHelpers.js

@@ -0,0 +1,129 @@
+export function createSection(title) {
+    const section = document.createElement('section');
+    section.className = 'zenfg-inspector-section';
+    const heading = document.createElement('h2');
+    heading.textContent = title;
+    section.appendChild(heading);
+    return section;
+}
+export function createTable(headers) {
+    const table = document.createElement('table');
+    const head = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const header of headers) {
+        const cell = document.createElement('th');
+        cell.textContent = header;
+        headRow.appendChild(cell);
+    }
+    head.appendChild(headRow);
+    table.append(head, document.createElement('tbody'));
+    return table;
+}
+export function createStat(label, value) {
+    const item = document.createElement('div');
+    const name = document.createElement('span');
+    name.textContent = label;
+    const count = document.createElement('strong');
+    count.textContent = value;
+    item.append(name, count);
+    return item;
+}
+export function createCell(text, options) {
+    const cell = document.createElement('td');
+    cell.textContent = text;
+    if (options?.column)
+        cell.dataset.column = options.column;
+    if (options?.kind)
+        cell.dataset.kind = options.kind;
+    return cell;
+}
+export function createButtonCell(text, onClick) {
+    const cell = document.createElement('td');
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = text;
+    button.addEventListener('click', onClick);
+    cell.appendChild(button);
+    return cell;
+}
+export function createToolbarButton(text, title, onClick) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = text;
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    button.addEventListener('click', onClick);
+    return button;
+}
+export function createListButton(text, selected, onClick) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = text;
+    if (selected) {
+        button.className = 'selected';
+    }
+    button.addEventListener('click', onClick);
+    return button;
+}
+export function createMutedText(text) {
+    const element = document.createElement('p');
+    element.className = 'zenfg-inspector-muted';
+    element.textContent = text;
+    return element;
+}
+export function createMutedActionText(prefix, actionText, suffix, onAction) {
+    const element = document.createElement('p');
+    element.className = 'zenfg-inspector-muted';
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'zenfg-inspector-inline-action';
+    button.textContent = actionText;
+    button.addEventListener('click', onAction);
+    element.append(document.createTextNode(prefix), button, document.createTextNode(suffix));
+    return element;
+}
+export function formatProfilingStatus(snapshot) {
+    const profiling = snapshot.profiling;
+    if (!profiling) {
+        return 'off';
+    }
+    if (profiling.status === 'available') {
+        return `frame ${profiling.frameIndex}`;
+    }
+    return profiling.reason;
+}
+export function formatGpuDuration(node) {
+    if (node.gpuDurationMicros === undefined) {
+        return '-';
+    }
+    return (node.gpuDurationMicros / 1000).toFixed(3);
+}
+export function formatGpuFrameDuration(snapshot) {
+    if (snapshot.profiling.status !== 'available') {
+        return '-';
+    }
+    return (snapshot.profiling.gpuFrameDurationMicros / 1000).toFixed(3);
+}
+export function formatPoolHitRate(snapshot) {
+    const pool = snapshot.resourcePool;
+    if (!pool || pool.status !== 'available' || pool.acquireCount === 0) {
+        return '-';
+    }
+    return `${((pool.reuseCount / pool.acquireCount) * 100).toFixed(0)}%`;
+}
+export function formatBytes(bytes) {
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    if (bytes < 1024 * 1024) {
+        return `${(bytes / 1024).toFixed(1)} KiB`;
+    }
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;
+}
+export function labelNode(node) {
+    return node.label ?? `node-${node.id}`;
+}
+export function labelResource(resource) {
+    return resource.label ?? `${resource.kind}-${resource.id}`;
+}
+//# sourceMappingURL=panelDomHelpers.js.map

package/dist/panelDomHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelDomHelpers.js","sourceRoot":"","sources":["../src/panelDomHelpers.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n    FrameGraphDebugNode,\n    FrameGraphDebugViewModel,\n} from './debugCaptureModel.ts';\n\nexport function createSection(title: string): HTMLElement {\n    const section = document.createElement('section');\n    section.className = 'zenfg-inspector-section';\n    const heading = document.createElement('h2');\n    heading.textContent = title;\n    section.appendChild(heading);\n    return section;\n}\n\nexport function createTable(headers: readonly string[]): HTMLTableElement {\n    const table = document.createElement('table');\n    const head = document.createElement('thead');\n    const headRow = document.createElement('tr');\n    for (const header of headers) {\n        const cell = document.createElement('th');\n        cell.textContent = header;\n        headRow.appendChild(cell);\n    }\n    head.appendChild(headRow);\n    table.append(head, document.createElement('tbody'));\n    return table;\n}\n\nexport function createStat(label: string, value: string): HTMLElement {\n    const item = document.createElement('div');\n    const name = document.createElement('span');\n    name.textContent = label;\n    const count = document.createElement('strong');\n    count.textContent = value;\n    item.append(name, count);\n    return item;\n}\n\nexport type FrameGraphDebugCellOptions = {\n\treadonly column?: 'code' | 'kind' | 'numeric';\n\treadonly kind?: string;\n};\n\nexport function createCell(text: string, options?: FrameGraphDebugCellOptions): HTMLTableCellElement {\n    const cell = document.createElement('td');\n    cell.textContent = text;\n    if (options?.column) cell.dataset.column = options.column;\n    if (options?.kind) cell.dataset.kind = options.kind;\n    return cell;\n}\n\nexport function createButtonCell(text: string, onClick: () => void): HTMLTableCellElement {\n    const cell = document.createElement('td');\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.textContent = text;\n    button.addEventListener('click', onClick);\n    cell.appendChild(button);\n    return cell;\n}\n\nexport function createToolbarButton(text: string, title: string, onClick: () => void): HTMLButtonElement {\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.textContent = text;\n    button.title = title;\n    button.setAttribute('aria-label', title);\n    button.addEventListener('click', onClick);\n    return button;\n}\n\nexport function createListButton(text: string, selected: boolean, onClick: () => void): HTMLButtonElement {\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.textContent = text;\n    if (selected) {\n        button.className = 'selected';\n    }\n    button.addEventListener('click', onClick);\n    return button;\n}\n\nexport function createMutedText(text: string): HTMLElement {\n    const element = document.createElement('p');\n    element.className = 'zenfg-inspector-muted';\n    element.textContent = text;\n    return element;\n}\n\nexport function createMutedActionText(prefix: string, actionText: string, suffix: string, onAction: () => void): HTMLElement {\n    const element = document.createElement('p');\n    element.className = 'zenfg-inspector-muted';\n    const button = document.createElement('button');\n    button.type = 'button';\n    button.className = 'zenfg-inspector-inline-action';\n    button.textContent = actionText;\n    button.addEventListener('click', onAction);\n    element.append(document.createTextNode(prefix), button, document.createTextNode(suffix));\n    return element;\n}\n\nexport function formatProfilingStatus(snapshot: FrameGraphDebugViewModel): string {\n    const profiling = snapshot.profiling;\n    if (!profiling) {\n        return 'off';\n    }\n    if (profiling.status === 'available') {\n        return `frame ${profiling.frameIndex}`;\n    }\n    return profiling.reason;\n}\n\nexport function formatGpuDuration(node: FrameGraphDebugNode): string {\n    if (node.gpuDurationMicros === undefined) {\n        return '-';\n    }\n    return (node.gpuDurationMicros / 1000).toFixed(3);\n}\n\nexport function formatGpuFrameDuration(snapshot: FrameGraphDebugViewModel): string {\n    if (snapshot.profiling.status !== 'available') {\n        return '-';\n    }\n    return (snapshot.profiling.gpuFrameDurationMicros / 1000).toFixed(3);\n}\n\nexport function formatPoolHitRate(snapshot: FrameGraphDebugViewModel): string {\n    const pool = snapshot.resourcePool;\n    if (!pool || pool.status !== 'available' || pool.acquireCount === 0) {\n        return '-';\n    }\n    return `${((pool.reuseCount / pool.acquireCount) * 100).toFixed(0)}%`;\n}\n\nexport function formatBytes(bytes: number): string {\n    if (bytes < 1024) {\n        return `${bytes} B`;\n    }\n    if (bytes < 1024 * 1024) {\n        return `${(bytes / 1024).toFixed(1)} KiB`;\n    }\n    return `${(bytes / (1024 * 1024)).toFixed(1)} MiB`;\n}\n\nexport function labelNode(node: Pick<FrameGraphDebugNode, 'id' | 'label'>): string {\n    return node.label ?? `node-${node.id}`;\n}\n\nexport function labelResource(resource: { readonly id: string; readonly kind: string; readonly label?: string }): string {\n    return resource.label ?? `${resource.kind}-${resource.id}`;\n}\n"]}

package/dist/panelGraphLayout.d.ts

@@ -0,0 +1,28 @@
+import type cytoscape from 'cytoscape';
+import type { ELK, ElkNode } from 'elkjs/lib/elk-api';
+import type { GraphScene, GraphSceneElementId } from './panelGraphScene.ts';
+export type GraphPosition = {
+    readonly x: number;
+    readonly y: number;
+};
+export type GraphEdgeRoute = {
+    readonly startPoint: GraphPosition;
+    readonly bendPoints: readonly GraphPosition[];
+    readonly endPoint: GraphPosition;
+};
+export type GraphLayoutResult = {
+    readonly positions: ReadonlyMap<GraphSceneElementId, GraphPosition>;
+    readonly routes: ReadonlyMap<GraphSceneElementId, GraphEdgeRoute>;
+};
+export type CytoscapeEdgeRouteData = {
+    readonly sourceEndpoint: string;
+    readonly targetEndpoint: string;
+    readonly segmentWeights: string;
+    readonly segmentDistances: string;
+};
+export declare function layoutGraphScene(elk: ELK, scene: GraphScene): Promise<GraphLayoutResult>;
+export declare function createElkLayoutGraph(scene: GraphScene): ElkNode;
+export declare function applyGraphLayout(core: cytoscape.Core, scene: GraphScene, layout: GraphLayoutResult): void;
+export declare function syncExpandedGroupLabelGeometry(core: cytoscape.Core): void;
+export declare function createCytoscapeEdgeRouteData(route: GraphEdgeRoute | undefined, sourceCenter: GraphPosition, targetCenter: GraphPosition): CytoscapeEdgeRouteData | undefined;
+//# sourceMappingURL=panelGraphLayout.d.ts.map

package/dist/panelGraphLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelGraphLayout.d.ts","sourceRoot":"","sources":["../src/panelGraphLayout.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,GAAG,EAAmB,OAAO,EAAW,MAAM,mBAAmB,CAAC;AAEhF,OAAO,KAAK,EAAE,UAAU,EAAE,mBAAmB,EAAkB,MAAM,sBAAsB,CAAC;AAG5F,MAAM,MAAM,aAAa,GAAG;IAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACvE,MAAM,MAAM,cAAc,GAAG;IACzB,QAAQ,CAAC,UAAU,EAAE,aAAa,CAAC;IACnC,QAAQ,CAAC,UAAU,EAAE,SAAS,aAAa,EAAE,CAAC;IAC9C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;CACpC,CAAC;AACF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC,mBAAmB,EAAE,aAAa,CAAC,CAAC;IACpE,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACjC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;IAChC,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;CACrC,CAAC;AAEF,wBAAsB,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAU9F;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CA2E/D;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAoBzG;AAED,wBAAgB,8BAA8B,CAAC,IAAI,EAAE,SAAS,CAAC,IAAI,GAAG,IAAI,CAWzE;AAED,wBAAgB,4BAA4B,CACxC,KAAK,EAAE,cAAc,GAAG,SAAS,EACjC,YAAY,EAAE,aAAa,EAC3B,YAAY,EAAE,aAAa,GAC5B,sBAAsB,GAAG,SAAS,CASpC"}

package/dist/panelGraphLayout.js

@@ -0,0 +1,223 @@
+import { expandedGroupLabelMaxWidth, GRAPH_GEOMETRY, nodeDimensions } from "./panelGraphVisuals.js";
+export async function layoutGraphScene(elk, scene) {
+    const graph = createElkLayoutGraph(scene);
+    const layout = await elk.layout(graph);
+    const positions = new Map();
+    collectLayoutPositions(layout, 0, 0, positions);
+    const nodeOffsets = new Map();
+    collectLayoutOffsets(layout, 0, 0, nodeOffsets);
+    const routes = new Map();
+    collectEdgeRoutes(layout, 0, 0, nodeOffsets, routes);
+    return { positions, routes };
+}
+export function createElkLayoutGraph(scene) {
+    const childrenByParent = new Map();
+    const portsByNode = new Map();
+    const elkEdges = scene.edges.map((edge) => {
+        const sourcePortId = `${edge.id}:source`;
+        const targetPortId = `${edge.id}:target`;
+        appendPort(portsByNode, edge.from, {
+            id: sourcePortId,
+            width: 1,
+            height: 1,
+            layoutOptions: { 'elk.port.side': 'EAST' },
+        });
+        appendPort(portsByNode, edge.to, {
+            id: targetPortId,
+            width: 1,
+            height: 1,
+            layoutOptions: { 'elk.port.side': 'WEST' },
+        });
+        return {
+            id: edge.id,
+            sources: [sourcePortId],
+            targets: [targetPortId],
+        };
+    });
+    for (const node of scene.nodes) {
+        const children = childrenByParent.get(node.parentId) ?? [];
+        children.push(node);
+        childrenByParent.set(node.parentId, children);
+    }
+    const createNode = (node) => {
+        const children = childrenByParent.get(node.id)?.map(createNode);
+        const dimensions = nodeDimensions(node);
+        return {
+            id: node.id,
+            width: dimensions.width,
+            height: dimensions.height,
+            children,
+            ports: portsByNode.get(node.id),
+            layoutOptions: children?.length ? {
+                'elk.algorithm': 'layered',
+                'elk.direction': 'RIGHT',
+                'elk.edgeRouting': 'ORTHOGONAL',
+                'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+                'elk.portConstraints': 'FIXED_SIDE',
+                'elk.layered.mergeEdges': 'false',
+                'elk.layered.mergeHierarchyEdges': 'false',
+                'elk.padding': elkPadding(),
+                'elk.spacing.nodeNode': '36',
+                'elk.layered.spacing.nodeNodeBetweenLayers': '72',
+                'elk.spacing.edgeEdge': '10',
+                'elk.layered.spacing.edgeEdgeBetweenLayers': '10',
+            } : {
+                'elk.portConstraints': 'FIXED_SIDE',
+            },
+        };
+    };
+    return {
+        id: 'root',
+        children: (childrenByParent.get(undefined) ?? []).map(createNode),
+        edges: elkEdges,
+        layoutOptions: {
+            'elk.algorithm': 'layered',
+            'elk.direction': 'RIGHT',
+            'elk.edgeRouting': 'ORTHOGONAL',
+            'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+            'elk.layered.mergeEdges': 'false',
+            'elk.layered.mergeHierarchyEdges': 'false',
+            'elk.spacing.nodeNode': '42',
+            'elk.layered.spacing.nodeNodeBetweenLayers': '88',
+            'elk.spacing.edgeNode': '20',
+            'elk.spacing.edgeEdge': '10',
+            'elk.layered.spacing.edgeEdgeBetweenLayers': '10',
+            'elk.layered.considerModelOrder.strategy': 'NODES_AND_EDGES',
+        },
+    };
+}
+export function applyGraphLayout(core, scene, layout) {
+    applyPositions(core, layout.positions);
+    core.batch(() => {
+        for (const edge of scene.edges) {
+            const route = layout.routes.get(edge.id);
+            const cytoscapeEdge = core.getElementById(edge.id);
+            if (cytoscapeEdge.empty())
+                continue;
+            const sourceNode = core.getElementById(edge.from);
+            const targetNode = core.getElementById(edge.to);
+            const routeData = sourceNode.nonempty() && targetNode.nonempty()
+                ? createCytoscapeEdgeRouteData(route, sourceNode.position(), targetNode.position())
+                : undefined;
+            cytoscapeEdge
+                .removeClass('elk-route elk-segments')
+                .removeData('sourceEndpoint', 'targetEndpoint', 'segmentWeights', 'segmentDistances');
+            if (!routeData)
+                continue;
+            cytoscapeEdge.data(routeData).addClass('elk-route');
+            if (route.bendPoints.length > 0)
+                cytoscapeEdge.addClass('elk-segments');
+        }
+    });
+}
+export function syncExpandedGroupLabelGeometry(core) {
+    const groups = core.nodes('node[kind = "group"][collapsed = 0]');
+    for (let iteration = 0; iteration < 2; iteration++) {
+        const updates = groups.map((node) => ({
+            node,
+            labelMaxWidth: expandedGroupLabelMaxWidth(node.outerWidth()),
+        }));
+        core.batch(() => {
+            for (const update of updates)
+                update.node.data('labelMaxWidth', update.labelMaxWidth);
+        });
+    }
+}
+export function createCytoscapeEdgeRouteData(route, sourceCenter, targetCenter) {
+    if (!route || !isValidRoute(route))
+        return undefined;
+    const segments = route.bendPoints.map((point) => segmentFromPoint(route.startPoint, route.endPoint, point));
+    return {
+        sourceEndpoint: endpointOffset(route.startPoint, sourceCenter),
+        targetEndpoint: endpointOffset(route.endPoint, targetCenter),
+        segmentWeights: segments.map((segment) => segment.weight).join(' '),
+        segmentDistances: segments.map((segment) => segment.distance).join(' '),
+    };
+}
+function elkPadding() {
+    const padding = GRAPH_GEOMETRY.elkGroupPadding;
+    return `[top=${padding.top},left=${padding.left},bottom=${padding.bottom},right=${padding.right}]`;
+}
+function appendPort(portsByNode, nodeId, port) {
+    const ports = portsByNode.get(nodeId) ?? [];
+    ports.push(port);
+    portsByNode.set(nodeId, ports);
+}
+function collectLayoutPositions(node, offsetX, offsetY, positions) {
+    for (const child of node.children ?? []) {
+        const x = offsetX + (child.x ?? 0);
+        const y = offsetY + (child.y ?? 0);
+        positions.set(child.id, {
+            x: x + (child.width ?? 0) / 2,
+            y: y + (child.height ?? 0) / 2,
+        });
+        collectLayoutPositions(child, x, y, positions);
+    }
+}
+function collectLayoutOffsets(node, offsetX, offsetY, offsets) {
+    offsets.set(node.id, { x: offsetX, y: offsetY });
+    for (const child of node.children ?? []) {
+        collectLayoutOffsets(child, offsetX + (child.x ?? 0), offsetY + (child.y ?? 0), offsets);
+    }
+}
+function collectEdgeRoutes(node, offsetX, offsetY, nodeOffsets, routes) {
+    for (const edge of node.edges ?? []) {
+        if (edge.sections?.length !== 1)
+            continue;
+        const section = edge.sections[0];
+        if (!section)
+            continue;
+        // ELK may keep hierarchy edges on an ancestor while expressing their sections in container-local coordinates.
+        const containerOffset = edge.container === undefined ? undefined : nodeOffsets.get(edge.container);
+        const routeOffsetX = containerOffset?.x ?? offsetX;
+        const routeOffsetY = containerOffset?.y ?? offsetY;
+        routes.set(edge.id, {
+            startPoint: offsetPoint(section.startPoint, routeOffsetX, routeOffsetY),
+            bendPoints: (section.bendPoints ?? []).map((point) => offsetPoint(point, routeOffsetX, routeOffsetY)),
+            endPoint: offsetPoint(section.endPoint, routeOffsetX, routeOffsetY),
+        });
+    }
+    for (const child of node.children ?? []) {
+        collectEdgeRoutes(child, offsetX + (child.x ?? 0), offsetY + (child.y ?? 0), nodeOffsets, routes);
+    }
+}
+function offsetPoint(point, offsetX, offsetY) {
+    return { x: point.x + offsetX, y: point.y + offsetY };
+}
+function isValidRoute(route) {
+    const dx = route.endPoint.x - route.startPoint.x;
+    const dy = route.endPoint.y - route.startPoint.y;
+    return isFinitePoint(route.startPoint)
+        && isFinitePoint(route.endPoint)
+        && dx * dx + dy * dy > Number.EPSILON
+        && route.bendPoints.every(isFinitePoint);
+}
+function isFinitePoint(point) {
+    return Number.isFinite(point.x) && Number.isFinite(point.y);
+}
+function endpointOffset(point, center) {
+    return `${point.x - center.x}px ${point.y - center.y}px`;
+}
+function applyPositions(core, positions) {
+    core.batch(() => {
+        for (const [id, position] of positions) {
+            const node = core.getElementById(id);
+            if (node.nonempty() && node.isNode() && !node.isParent())
+                node.position(position);
+        }
+    });
+}
+function segmentFromPoint(source, target, point) {
+    const dx = target.x - source.x;
+    const dy = target.y - source.y;
+    const lengthSquared = dx * dx + dy * dy;
+    if (lengthSquared === 0)
+        return { weight: 0.5, distance: 0 };
+    const weight = ((point.x - source.x) * dx + (point.y - source.y) * dy) / lengthSquared;
+    const projectedX = source.x + weight * dx;
+    const projectedY = source.y + weight * dy;
+    const length = Math.sqrt(lengthSquared);
+    const distance = ((point.x - projectedX) * -dy + (point.y - projectedY) * dx) / length;
+    return { weight, distance };
+}
+//# sourceMappingURL=panelGraphLayout.js.map