@zenfg/inspector 0.1.0-beta.1

package/dist/panelMemoryView.js

@@ -0,0 +1,134 @@
+import { analyzeSnapshotAliases } from "./panelAliasAnalysis.js";
+import { createMutedText, labelResource } from "./panelDomHelpers.js";
+import { createRelationButton, formatEstimatedBytes, registerSelectable, updateSelectedRows, } from "./panelWorkbenchHelpers.js";
+export class MemoryView {
+    callbacks;
+    root = document.createElement('section');
+    metrics = document.createElement('div');
+    scroller = document.createElement('div');
+    timeline = document.createElement('div');
+    rows = new Map();
+    snapshot;
+    selected;
+    constructor(callbacks, idPrefix) {
+        this.callbacks = callbacks;
+        this.root.className = 'zenfg-inspector-view zenfg-inspector-memory-view';
+        this.root.id = `${idPrefix}-view-memory`;
+        this.root.setAttribute('role', 'tabpanel');
+        this.metrics.className = 'zenfg-inspector-memory-summary';
+        this.scroller.className = 'zenfg-inspector-memory-scroller';
+        this.timeline.className = 'zenfg-inspector-memory-timeline';
+        this.scroller.appendChild(this.timeline);
+        this.root.append(this.metrics, 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;
+        const metrics = snapshot.metrics;
+        this.metrics.replaceChildren(this.createMetric('Logical capacity', formatEstimatedBytes(metrics.logicalCapacityBytes)), this.createMetric('Physical estimate', formatEstimatedBytes(metrics.physicalEstimatedBytes)), this.createMetric('Alias reuse', formatEstimatedBytes(metrics.aliasReuseBytes)), this.createMetric('Allocations', `${snapshot.physicalAllocations.length} · ${metrics.aliasedAllocationCount} aliased`));
+        this.rows.clear();
+        this.timeline.replaceChildren();
+        const analysis = analyzeSnapshotAliases(snapshot);
+        this.timeline.appendChild(this.createAxis(analysis.minUse, analysis.maxUse));
+        for (const group of analysis.allocations) {
+            const selection = { kind: 'allocation', id: group.allocation.id };
+            const header = document.createElement('div');
+            header.className = 'zenfg-inspector-memory-allocation';
+            header.dataset.kind = group.allocation.kind;
+            registerSelectable(this.rows, header, selection, this.callbacks);
+            const name = createRelationButton(`Allocation #${group.allocation.id}`, selection, this.callbacks.onSelect);
+            const meta = document.createElement('span');
+            meta.textContent = `${group.allocation.kind} · class ${group.allocation.compatibilityClassId} · ${formatEstimatedBytes(group.allocation.estimatedByteSize)} · ${group.resources.length > 1 ? `alias ×${group.resources.length}` : 'single'}`;
+            header.append(name, meta);
+            this.timeline.appendChild(header);
+            for (const resource of group.resources) {
+                this.timeline.appendChild(this.createResourceRow(resource, analysis.minUse, analysis.maxUse));
+            }
+        }
+        const unallocated = snapshot.resources.filter((resource) => (resource.origin === 'transient' && resource.physicalResourceId === undefined));
+        if (unallocated.length > 0) {
+            const header = document.createElement('div');
+            header.className = 'zenfg-inspector-memory-allocation muted';
+            header.dataset.kind = 'unallocated';
+            header.textContent = 'Unallocated transient resources';
+            this.timeline.appendChild(header);
+            for (const resource of unallocated) {
+                this.timeline.appendChild(this.createResourceRow(resource, analysis.minUse, analysis.maxUse));
+            }
+        }
+        if (analysis.allocations.length === 0 && unallocated.length === 0) {
+            this.timeline.appendChild(createMutedText('No transient resource lifetimes.'));
+        }
+        updateSelectedRows(this.rows, this.selected);
+    }
+    createMetric(label, value) {
+        const item = document.createElement('div');
+        const term = document.createElement('span');
+        term.textContent = label;
+        const amount = document.createElement('strong');
+        amount.textContent = value;
+        item.append(term, amount);
+        return item;
+    }
+    createAxis(minUse, maxUse) {
+        const axis = document.createElement('div');
+        axis.className = 'zenfg-inspector-memory-axis';
+        const label = document.createElement('span');
+        label.textContent = 'Execution order';
+        const track = document.createElement('div');
+        track.className = 'zenfg-inspector-memory-axis-track';
+        const range = Math.max(1, maxUse - minUse);
+        const step = Math.max(1, Math.ceil(range / 5));
+        for (let value = minUse; value <= maxUse; value += step) {
+            const tick = document.createElement('span');
+            tick.style.left = `${((value - minUse) / range) * 100}%`;
+            tick.textContent = String(value);
+            track.appendChild(tick);
+        }
+        if (maxUse > minUse && (maxUse - minUse) % step !== 0) {
+            const tick = document.createElement('span');
+            tick.style.left = '100%';
+            tick.textContent = String(maxUse);
+            track.appendChild(tick);
+        }
+        axis.append(label, track);
+        return axis;
+    }
+    createResourceRow(resource, minUse, maxUse) {
+        const selection = { kind: 'resource', id: resource.id };
+        const row = document.createElement('div');
+        row.className = 'zenfg-inspector-memory-resource';
+        row.dataset.kind = resource.kind;
+        registerSelectable(this.rows, row, selection, this.callbacks);
+        const name = createRelationButton(labelResource(resource), selection, this.callbacks.onSelect);
+        const range = document.createElement('span');
+        range.textContent = resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : 'no lifetime';
+        const track = document.createElement('div');
+        track.className = 'zenfg-inspector-memory-track';
+        const bar = document.createElement('span');
+        bar.className = `zenfg-inspector-memory-bar ${resource.kind}`;
+        if (resource.lifetime) {
+            const slots = Math.max(1, maxUse - minUse + 1);
+            bar.style.left = `${((resource.lifetime.firstUse - minUse) / slots) * 100}%`;
+            bar.style.width = `${((resource.lifetime.lastUse - resource.lifetime.firstUse + 1) / slots) * 100}%`;
+        }
+        else {
+            bar.classList.add('empty');
+        }
+        track.appendChild(bar);
+        const size = document.createElement('span');
+        size.textContent = formatEstimatedBytes(resource.estimatedByteSize);
+        row.append(name, range, track, size);
+        return row;
+    }
+}
+//# sourceMappingURL=panelMemoryView.js.map

package/dist/panelMemoryView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelMemoryView.js","sourceRoot":"","sources":["../src/panelMemoryView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FrameGraphDebugResource, FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { analyzeSnapshotAliases } from './panelAliasAnalysis.ts';\nimport { createMutedText, labelResource } from './panelDomHelpers.ts';\nimport type { Selection } from './panelTypes.ts';\nimport {\n\tcreateRelationButton,\n\tformatEstimatedBytes,\n\tregisterSelectable,\n\ttype WorkbenchCallbacks,\n\tupdateSelectedRows,\n} from './panelWorkbenchHelpers.ts';\n\nexport class MemoryView {\n\treadonly root = document.createElement('section');\n\tprivate readonly metrics = document.createElement('div');\n\tprivate readonly scroller = document.createElement('div');\n\tprivate readonly timeline = 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-memory-view';\n\t\tthis.root.id = `${idPrefix}-view-memory`;\n\t\tthis.root.setAttribute('role', 'tabpanel');\n\t\tthis.metrics.className = 'zenfg-inspector-memory-summary';\n\t\tthis.scroller.className = 'zenfg-inspector-memory-scroller';\n\t\tthis.timeline.className = 'zenfg-inspector-memory-timeline';\n\t\tthis.scroller.appendChild(this.timeline);\n\t\tthis.root.append(this.metrics, 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\tconst metrics = snapshot.metrics;\n\t\tthis.metrics.replaceChildren(\n\t\t\tthis.createMetric('Logical capacity', formatEstimatedBytes(metrics.logicalCapacityBytes)),\n\t\t\tthis.createMetric('Physical estimate', formatEstimatedBytes(metrics.physicalEstimatedBytes)),\n\t\t\tthis.createMetric('Alias reuse', formatEstimatedBytes(metrics.aliasReuseBytes)),\n\t\t\tthis.createMetric('Allocations', `${snapshot.physicalAllocations.length} · ${metrics.aliasedAllocationCount} aliased`),\n\t\t);\n\t\tthis.rows.clear();\n\t\tthis.timeline.replaceChildren();\n\t\tconst analysis = analyzeSnapshotAliases(snapshot);\n\t\tthis.timeline.appendChild(this.createAxis(analysis.minUse, analysis.maxUse));\n\n\t\tfor (const group of analysis.allocations) {\n\t\t\tconst selection: Selection = { kind: 'allocation', id: group.allocation.id };\n\t\t\tconst header = document.createElement('div');\n\t\t\theader.className = 'zenfg-inspector-memory-allocation';\n\t\t\theader.dataset.kind = group.allocation.kind;\n\t\t\tregisterSelectable(this.rows, header, selection, this.callbacks);\n\t\t\tconst name = createRelationButton(`Allocation #${group.allocation.id}`, selection, this.callbacks.onSelect);\n\t\t\tconst meta = document.createElement('span');\n\t\t\tmeta.textContent = `${group.allocation.kind} · class ${group.allocation.compatibilityClassId} · ${formatEstimatedBytes(group.allocation.estimatedByteSize)} · ${group.resources.length > 1 ? `alias ×${group.resources.length}` : 'single'}`;\n\t\t\theader.append(name, meta);\n\t\t\tthis.timeline.appendChild(header);\n\t\t\tfor (const resource of group.resources) {\n\t\t\t\tthis.timeline.appendChild(this.createResourceRow(resource, analysis.minUse, analysis.maxUse));\n\t\t\t}\n\t\t}\n\n\t\tconst unallocated = snapshot.resources.filter((resource) => (\n\t\t\tresource.origin === 'transient' && resource.physicalResourceId === undefined\n\t\t));\n\t\tif (unallocated.length > 0) {\n\t\t\tconst header = document.createElement('div');\n\t\t\theader.className = 'zenfg-inspector-memory-allocation muted';\n\t\t\theader.dataset.kind = 'unallocated';\n\t\t\theader.textContent = 'Unallocated transient resources';\n\t\t\tthis.timeline.appendChild(header);\n\t\t\tfor (const resource of unallocated) {\n\t\t\t\tthis.timeline.appendChild(this.createResourceRow(resource, analysis.minUse, analysis.maxUse));\n\t\t\t}\n\t\t}\n\t\tif (analysis.allocations.length === 0 && unallocated.length === 0) {\n\t\t\tthis.timeline.appendChild(createMutedText('No transient resource lifetimes.'));\n\t\t}\n\t\tupdateSelectedRows(this.rows, this.selected);\n\t}\n\n\tprivate createMetric(label: string, value: string): HTMLElement {\n\t\tconst item = document.createElement('div');\n\t\tconst term = document.createElement('span');\n\t\tterm.textContent = label;\n\t\tconst amount = document.createElement('strong');\n\t\tamount.textContent = value;\n\t\titem.append(term, amount);\n\t\treturn item;\n\t}\n\n\tprivate createAxis(minUse: number, maxUse: number): HTMLElement {\n\t\tconst axis = document.createElement('div');\n\t\taxis.className = 'zenfg-inspector-memory-axis';\n\t\tconst label = document.createElement('span');\n\t\tlabel.textContent = 'Execution order';\n\t\tconst track = document.createElement('div');\n\t\ttrack.className = 'zenfg-inspector-memory-axis-track';\n\t\tconst range = Math.max(1, maxUse - minUse);\n\t\tconst step = Math.max(1, Math.ceil(range / 5));\n\t\tfor (let value = minUse; value <= maxUse; value += step) {\n\t\t\tconst tick = document.createElement('span');\n\t\t\ttick.style.left = `${((value - minUse) / range) * 100}%`;\n\t\t\ttick.textContent = String(value);\n\t\t\ttrack.appendChild(tick);\n\t\t}\n\t\tif (maxUse > minUse && (maxUse - minUse) % step !== 0) {\n\t\t\tconst tick = document.createElement('span');\n\t\t\ttick.style.left = '100%';\n\t\t\ttick.textContent = String(maxUse);\n\t\t\ttrack.appendChild(tick);\n\t\t}\n\t\taxis.append(label, track);\n\t\treturn axis;\n\t}\n\n\tprivate createResourceRow(resource: FrameGraphDebugResource, minUse: number, maxUse: number): HTMLElement {\n\t\tconst selection: Selection = { kind: 'resource', id: resource.id };\n\t\tconst row = document.createElement('div');\n\t\trow.className = 'zenfg-inspector-memory-resource';\n\t\trow.dataset.kind = resource.kind;\r\n\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\tconst name = createRelationButton(labelResource(resource), selection, this.callbacks.onSelect);\n\t\tconst range = document.createElement('span');\n\t\trange.textContent = resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : 'no lifetime';\n\t\tconst track = document.createElement('div');\n\t\ttrack.className = 'zenfg-inspector-memory-track';\n\t\tconst bar = document.createElement('span');\n\t\tbar.className = `zenfg-inspector-memory-bar ${resource.kind}`;\n\t\tif (resource.lifetime) {\n\t\t\tconst slots = Math.max(1, maxUse - minUse + 1);\n\t\t\tbar.style.left = `${((resource.lifetime.firstUse - minUse) / slots) * 100}%`;\n\t\t\tbar.style.width = `${((resource.lifetime.lastUse - resource.lifetime.firstUse + 1) / slots) * 100}%`;\n\t\t} else {\n\t\t\tbar.classList.add('empty');\n\t\t}\n\t\ttrack.appendChild(bar);\n\t\tconst size = document.createElement('span');\n\t\tsize.textContent = formatEstimatedBytes(resource.estimatedByteSize);\n\t\trow.append(name, range, track, size);\n\t\treturn row;\n\t}\n}\n"]}

package/dist/panelPassesView.d.ts

@@ -0,0 +1,31 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { Selection } from './panelTypes.ts';
+import { type WorkbenchCallbacks } from './panelWorkbenchHelpers.ts';
+export declare class PassesView {
+    private readonly callbacks;
+    readonly root: HTMLElement;
+    private readonly toolbar;
+    private readonly tabList;
+    private readonly listButton;
+    private readonly groupsButton;
+    private readonly listPane;
+    private readonly groupsPane;
+    private readonly listTable;
+    private readonly groupsTable;
+    private readonly rows;
+    private snapshot;
+    private selected;
+    private subview;
+    private search;
+    private kind;
+    private sort;
+    constructor(callbacks: WorkbenchCallbacks, idPrefix: string);
+    setSnapshot(snapshot: FrameGraphDebugViewModel): void;
+    setSelection(selected: Selection | undefined): void;
+    private createSubviewButton;
+    private updateSubview;
+    private renderRows;
+    private matchesNode;
+    private compareNodes;
+}
+//# sourceMappingURL=panelPassesView.d.ts.map

package/dist/panelPassesView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelPassesView.d.ts","sourceRoot":"","sources":["../src/panelPassesView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAuB,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAE5F,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAChE,OAAO,EAUN,KAAK,kBAAkB,EAEvB,MAAM,4BAA4B,CAAC;AAIpC,qBAAa,UAAU;IAmCV,OAAO,CAAC,QAAQ,CAAC,SAAS;IAlCtC,QAAQ,CAAC,IAAI,cAAqC;IAClD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiD;IACzE,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAiC;IACzD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiD;IAC5E,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAyD;IACtF,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiC;IAC1D,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAiC;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CASvB;IACH,OAAO,CAAC,QAAQ,CAAC,WAAW,CAQzB;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAoC;IACzD,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,IAAI,CAAqB;gBAEJ,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM;IAsD5E,WAAW,CAAC,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAQrD,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAKnD,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,UAAU;IA+DlB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;CAQpB"}

package/dist/panelPassesView.js

@@ -0,0 +1,183 @@
+import { createCell, formatGpuDuration, labelNode } from "./panelDomHelpers.js";
+import { createEmptyTableRow, createKindCell, createFilterSelect, createSearchInput, createSelectionCell, createTableScroller, createViewToolbar, groupPath, registerSelectable, updateSelectedRows, } from "./panelWorkbenchHelpers.js";
+export class PassesView {
+    callbacks;
+    root = document.createElement('section');
+    toolbar = createViewToolbar('Pass filters and sorting');
+    tabList = document.createElement('div');
+    listButton = this.createSubviewButton('list', 'Pass List');
+    groupsButton = this.createSubviewButton('groups', 'Group Hierarchy');
+    listPane = document.createElement('div');
+    groupsPane = document.createElement('div');
+    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' },
+    ]);
+    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' },
+    ]);
+    rows = new Map();
+    snapshot;
+    selected;
+    subview = 'list';
+    search = '';
+    kind = 'all';
+    sort = 'order';
+    constructor(callbacks, idPrefix) {
+        this.callbacks = callbacks;
+        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;
+            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) {
+        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) {
+        this.selected = selected;
+        updateSelectedRows(this.rows, selected);
+    }
+    createSubviewButton(subview, label) {
+        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;
+    }
+    updateSubview() {
+        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;
+    }
+    renderRows() {
+        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 = { 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 = { 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);
+    }
+    matchesNode(snapshot, node) {
+        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);
+    }
+    compareNodes(a, b) {
+        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;
+        }
+    }
+}
+//# sourceMappingURL=panelPassesView.js.map

package/dist/panelPassesView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelPassesView.js","sourceRoot":"","sources":["../src/panelPassesView.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEhF,OAAO,EACN,mBAAmB,EACnB,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,SAAS,EACT,kBAAkB,EAElB,kBAAkB,GAClB,MAAM,4BAA4B,CAAC;AAIpC,MAAM,OAAO,UAAU;IAmCO;IAlCpB,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IACjC,OAAO,GAAG,iBAAiB,CAAC,0BAA0B,CAAC,CAAC;IACxD,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAC3D,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC;IACrE,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACzC,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,SAAS,GAAG,mBAAmB,CAAC;QAChD,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE;QACrC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE;QACpC,EAAE,KAAK,EAAE,OAAO,EAAE;QAClB,EAAE,KAAK,EAAE,OAAO,EAAE;QAClB,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QACjC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE;QACxC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE;QACrC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;KACtC,CAAC,CAAC;IACc,WAAW,GAAG,mBAAmB,CAAC;QAClD,EAAE,KAAK,EAAE,EAAE,EAAE;QACb,EAAE,KAAK,EAAE,OAAO,EAAE;QAClB,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE;QACxC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE;QACxC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;KACvC,CAAC,CAAC;IACc,IAAI,GAAG,IAAI,GAAG,EAAyB,CAAC;IACjD,QAAQ,CAAuC;IAC/C,QAAQ,CAAwB;IAChC,OAAO,GAAkB,MAAM,CAAC;IAChC,MAAM,GAAG,EAAE,CAAC;IACZ,IAAI,GAAG,KAAK,CAAC;IACb,IAAI,GAAa,OAAO,CAAC;IAEjC,YAA6B,SAA6B,EAAE,QAAgB;QAA/C,cAAS,GAAT,SAAS,CAAoB;QACzD,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,kDAAkD,CAAC;QACzE,IAAI,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,QAAQ,cAAc,CAAC;QACzC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC3C,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,yBAAyB,CAAC;QACnD,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAC7C,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QACtD,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAExD,MAAM,MAAM,GAAG,iBAAiB,CAAC,sBAAsB,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE;YAC/E,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC,iBAAiB,EAAE,CAAC;YAC/C,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,kBAAkB,CAAC,WAAW,EAAE,IAAI,CAAC,IAAI,EAAE;YACvD,CAAC,KAAK,EAAE,WAAW,CAAC;YACpB,CAAC,QAAQ,EAAE,QAAQ,CAAC;YACpB,CAAC,SAAS,EAAE,SAAS,CAAC;YACtB,CAAC,MAAM,EAAE,MAAM,CAAC;YAChB,CAAC,cAAc,EAAE,cAAc,CAAC;YAChC,CAAC,SAAS,EAAE,SAAS,CAAC;YACtB,CAAC,qBAAqB,EAAE,UAAU,CAAC;SACnC,EAAE,CAAC,KAAK,EAAE,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,MAAM,IAAI,GAAG,kBAAkB,CAAC,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE;YACzD,CAAC,OAAO,EAAE,OAAO,CAAC;YAClB,CAAC,OAAO,EAAE,OAAO,CAAC;YAClB,CAAC,MAAM,EAAE,MAAM,CAAC;YAChB,CAAC,KAAK,EAAE,KAAK,CAAC;SACd,EAAE,CAAC,KAAK,EAAE,EAAE;YACZ,IAAI,CAAC,IAAI,GAAG,KAAiB,CAAC;YAC9B,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAExC,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,GAAG,QAAQ,cAAc,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,QAAQ,kBAAkB,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,CAAC,EAAE,GAAG,GAAG,QAAQ,gBAAgB,CAAC;QACnD,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,eAAe,EAAE,GAAG,QAAQ,mBAAmB,CAAC,CAAC;QAChF,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,GAAG,QAAQ,kBAAkB,CAAC;QACjD,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,yBAAyB,CAAC;QACpD,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAClE,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACnD,IAAI,CAAC,UAAU,CAAC,EAAE,GAAG,GAAG,QAAQ,mBAAmB,CAAC;QACpD,IAAI,CAAC,UAAU,CAAC,SAAS,GAAG,yBAAyB,CAAC;QACtD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACjD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACvD,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC7E,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,WAAW,CAAC,QAAkC;QAC7C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,QAAQ,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ;YAAE,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1F,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,QAAQ,CAAC,WAAW,CAAC,MAAM,KAAK,CAAC,CAAC;QAC/D,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,aAAa,EAAE,CAAC;IACtB,CAAC;IAED,YAAY,CAAC,QAA+B;QAC3C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IACzC,CAAC;IAEO,mBAAmB,CAAC,OAAsB,EAAE,KAAa;QAChE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;QACvB,MAAM,CAAC,WAAW,GAAG,KAAK,CAAC;QAC3B,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACnC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;YACvB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QACH,OAAO,MAAM,CAAC;IACf,CAAC;IAEO,aAAa;QACpB,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAC/E,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACvD,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC;IACrC,CAAC;IAEO,UAAU;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;QAExC,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC;QACjF,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC/C,KAAK,MAAM,IAAI,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,SAAS,GAAc,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC;YAC3D,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9D,MAAM,OAAO,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtD,GAAG,CAAC,MAAM,CACT,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACrD,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,IAAI,OAAO,CAAC,IAAI,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACtH,mBAAmB,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EAC/D,UAAU,CAAC,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EACtE,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,EACzB,UAAU,CAAC,IAAI,CAAC,IAAI,KAAK,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAC3G,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAC5D,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAC7D,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACtC,CAAC;QACD,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,EAAE,sCAAsC,CAAC,CAAC,CAAC;QAEzH,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;QAC1B,KAAK,MAAM,KAAK,IAAI,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAC9D,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,CACpF,CAAC,EAAE,CAAC;YACJ,MAAM,SAAS,GAAc,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC;YACvE,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACzC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9D,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YAChD,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAChD,MAAM,CAAC,IAAI,GAAG,QAAQ,CAAC;YACvB,MAAM,CAAC,SAAS,GAAG,8BAA8B,CAAC;YAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAC/D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC;YAC1C,MAAM,CAAC,KAAK,GAAG,4BAA4B,CAAC;YAC5C,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,UAAU,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACzG,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;YACpF,UAAU,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAC/B,MAAM,SAAS,GAAG,mBAAmB,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;YAC9E,SAAS,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC,GAAG,KAAK,CAAC,KAAK,GAAG,EAAE,IAAI,CAAC;YAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;YAC9B,GAAG,CAAC,MAAM,CACT,UAAU,EACV,SAAS,EACT,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACpE,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EAClE,UAAU,CAAC,OAAO,CAAC,cAAc,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,qBAAqB,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACzH,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,EACxE,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CACzE,CAAC;YACF,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACxC,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,iBAAiB,KAAK,CAAC;YAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,CAAC,EAAE,uBAAuB,CAAC,CAAC,CAAC;QACtI,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9C,CAAC;IAEO,WAAW,CAAC,QAAkC,EAAE,IAAyB;QAChF,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACjE,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAC;QAC1C,MAAM,QAAQ,GAAG,GAAG,SAAS,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,iBAAiB,EAAE,CAAC;QACpG,OAAO,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,CAAC;IAEO,YAAY,CAAC,CAAsB,EAAE,CAAsB;QAClE,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YACnB,KAAK,OAAO,CAAC,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;YACnF,KAAK,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;YACtE,KAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,iBAAiB,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;YAClG,KAAK,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACxC,CAAC;IACF,CAAC;CACD","sourcesContent":["import type { FrameGraphDebugNode, FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { createCell, formatGpuDuration, labelNode } from './panelDomHelpers.ts';\nimport type { PassesSubview, Selection } from './panelTypes.ts';\nimport {\n\tcreateEmptyTableRow,\n\tcreateKindCell,\n\tcreateFilterSelect,\n\tcreateSearchInput,\n\tcreateSelectionCell,\n\tcreateTableScroller,\n\tcreateViewToolbar,\n\tgroupPath,\n\tregisterSelectable,\n\ttype WorkbenchCallbacks,\n\tupdateSelectedRows,\n} from './panelWorkbenchHelpers.ts';\n\ntype PassSort = 'order' | 'label' | 'kind' | 'gpu';\n\nexport class PassesView {\n\treadonly root = document.createElement('section');\n\tprivate readonly toolbar = createViewToolbar('Pass filters and sorting');\n\tprivate readonly tabList = document.createElement('div');\n\tprivate readonly listButton = this.createSubviewButton('list', 'Pass List');\n\tprivate readonly groupsButton = this.createSubviewButton('groups', 'Group Hierarchy');\n\tprivate readonly listPane = document.createElement('div');\n\tprivate readonly groupsPane = document.createElement('div');\n\tprivate readonly listTable = createTableScroller([\n\t\t{ label: 'Order', column: 'numeric' },\n\t\t{ label: 'Segment', column: 'code' },\n\t\t{ label: 'Label' },\n\t\t{ label: 'Group' },\n\t\t{ label: 'Kind', column: 'kind' },\n\t\t{ label: 'GPU (ms)', column: 'numeric' },\n\t\t{ label: 'Reads', column: 'numeric' },\n\t\t{ label: 'Writes', column: 'numeric' },\n\t]);\n\tprivate readonly groupsTable = createTableScroller([\n\t\t{ label: '' },\n\t\t{ label: 'Group' },\n\t\t{ label: 'Retained', column: 'numeric' },\n\t\t{ label: 'Culled', column: 'numeric' },\n\t\t{ label: 'GPU work', column: 'numeric' },\n\t\t{ label: 'Inputs', column: 'numeric' },\n\t\t{ label: 'Outputs', column: 'numeric' },\n\t]);\n\tprivate readonly rows = new Map<string, HTMLElement[]>();\n\tprivate snapshot: FrameGraphDebugViewModel | undefined;\n\tprivate selected: Selection | undefined;\n\tprivate subview: PassesSubview = 'list';\n\tprivate search = '';\n\tprivate kind = 'all';\n\tprivate sort: PassSort = 'order';\n\n\tconstructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {\n\t\tthis.root.className = 'zenfg-inspector-view zenfg-inspector-passes-view';\n\t\tthis.root.id = `${idPrefix}-view-passes`;\n\t\tthis.root.setAttribute('role', 'tabpanel');\n\t\tthis.tabList.className = 'zenfg-inspector-subtabs';\n\t\tthis.tabList.setAttribute('role', 'tablist');\n\t\tthis.tabList.setAttribute('aria-label', 'Pass views');\n\t\tthis.tabList.append(this.listButton, this.groupsButton);\n\n\t\tconst search = createSearchInput('Search pass or group', this.search, (value) => {\n\t\t\tthis.search = value.trim().toLocaleLowerCase();\n\t\t\tthis.renderRows();\n\t\t});\n\t\tconst kind = createFilterSelect('Pass kind', this.kind, [\n\t\t\t['all', 'All kinds'],\n\t\t\t['render', 'Render'],\n\t\t\t['compute', 'Compute'],\n\t\t\t['copy', 'Copy'],\n\t\t\t['clear-buffer', 'Clear Buffer'],\n\t\t\t['command', 'Command'],\n\t\t\t['external-submission', 'External'],\n\t\t], (value) => {\n\t\t\tthis.kind = value;\n\t\t\tthis.renderRows();\n\t\t});\n\t\tconst sort = createFilterSelect('Sort passes', this.sort, [\n\t\t\t['order', 'Order'],\n\t\t\t['label', 'Label'],\n\t\t\t['kind', 'Kind'],\n\t\t\t['gpu', 'GPU'],\n\t\t], (value) => {\n\t\t\tthis.sort = value as PassSort;\n\t\t\tthis.renderRows();\n\t\t});\n\t\tthis.toolbar.append(search, kind, sort);\n\n\t\tthis.listButton.id = `${idPrefix}-list-subtab`;\n\t\tthis.listButton.setAttribute('aria-controls', `${idPrefix}-pass-list-panel`);\n\t\tthis.groupsButton.id = `${idPrefix}-groups-subtab`;\n\t\tthis.groupsButton.setAttribute('aria-controls', `${idPrefix}-group-list-panel`);\n\t\tthis.listPane.id = `${idPrefix}-pass-list-panel`;\n\t\tthis.listPane.className = 'zenfg-inspector-subview';\n\t\tthis.listPane.setAttribute('role', 'tabpanel');\n\t\tthis.listPane.setAttribute('aria-labelledby', this.listButton.id);\n\t\tthis.listPane.appendChild(this.listTable.scroller);\n\t\tthis.groupsPane.id = `${idPrefix}-group-list-panel`;\n\t\tthis.groupsPane.className = 'zenfg-inspector-subview';\n\t\tthis.groupsPane.setAttribute('role', 'tabpanel');\n\t\tthis.groupsPane.setAttribute('aria-labelledby', this.groupsButton.id);\n\t\tthis.groupsPane.appendChild(this.groupsTable.scroller);\n\t\tthis.root.append(this.tabList, this.toolbar, this.listPane, this.groupsPane);\n\t\tthis.updateSubview();\n\t}\n\n\tsetSnapshot(snapshot: FrameGraphDebugViewModel): void {\n\t\tthis.snapshot = snapshot;\n\t\tif (snapshot.debugGroups.length === 0 && this.subview === 'groups') this.subview = 'list';\n\t\tthis.groupsButton.disabled = snapshot.debugGroups.length === 0;\n\t\tthis.renderRows();\n\t\tthis.updateSubview();\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 createSubviewButton(subview: PassesSubview, label: string): HTMLButtonElement {\n\t\tconst button = document.createElement('button');\n\t\tbutton.type = 'button';\n\t\tbutton.textContent = label;\n\t\tbutton.setAttribute('role', 'tab');\n\t\tbutton.addEventListener('click', () => {\n\t\t\tthis.subview = subview;\n\t\t\tthis.updateSubview();\n\t\t});\n\t\treturn button;\n\t}\n\n\tprivate updateSubview(): void {\n\t\tconst listActive = this.subview === 'list';\n\t\tthis.listButton.setAttribute('aria-selected', listActive ? 'true' : 'false');\n\t\tthis.groupsButton.setAttribute('aria-selected', listActive ? 'false' : 'true');\n\t\tthis.listButton.classList.toggle('active', listActive);\n\t\tthis.groupsButton.classList.toggle('active', !listActive);\n\t\tthis.listPane.hidden = !listActive;\n\t\tthis.groupsPane.hidden = listActive;\n\t}\n\n\tprivate renderRows(): void {\n\t\tconst snapshot = this.snapshot;\n\t\tif (!snapshot) return;\n\t\tthis.rows.clear();\n\t\tthis.listTable.body.replaceChildren();\n\t\tthis.groupsTable.body.replaceChildren();\n\n\t\tconst passes = snapshot.nodes.filter((node) => this.matchesNode(snapshot, node));\n\t\tpasses.sort((a, b) => this.compareNodes(a, b));\n\t\tfor (const node of passes) {\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\tconst segment = snapshot.segmentByNodeId.get(node.id);\n\t\t\trow.append(\n\t\t\t\tcreateCell(String(node.order), { column: 'numeric' }),\n\t\t\t\tcreateCell(segment ? `${segment.index}:${segment.kind === 'frame-graph' ? 'FG' : 'opaque'}` : '-', { column: 'code' }),\n\t\t\t\tcreateSelectionCell(labelNode(node), selection, this.callbacks),\n\t\t\t\tcreateCell(groupPath(snapshot, node.debugGroupId), { column: 'code' }),\n\t\t\t\tcreateKindCell(node.kind),\n\t\t\t\tcreateCell(node.kind === 'external-submission' ? 'opaque' : formatGpuDuration(node), { column: 'numeric' }),\n\t\t\t\tcreateCell(String(node.reads.length), { column: 'numeric' }),\n\t\t\t\tcreateCell(String(node.writes.length), { column: 'numeric' }),\n\t\t\t);\n\t\t\tthis.listTable.body.appendChild(row);\n\t\t}\n\t\tif (passes.length === 0) this.listTable.body.appendChild(createEmptyTableRow(8, 'No passes match the current filters.'));\n\n\t\tconst query = this.search;\n\t\tfor (const group of snapshot.debugGroups.filter((candidate) => (\n\t\t\tquery.length === 0 || candidate.path.join(' / ').toLocaleLowerCase().includes(query)\n\t\t))) {\n\t\t\tconst selection: Selection = { kind: 'group', pathKey: group.pathKey };\n\t\t\tconst row = document.createElement('tr');\n\t\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\t\tconst toggleCell = document.createElement('td');\n\t\t\tconst toggle = document.createElement('button');\n\t\t\ttoggle.type = 'button';\n\t\t\ttoggle.className = 'zenfg-inspector-group-toggle';\n\t\t\tconst expanded = this.callbacks.isGroupExpanded(group.pathKey);\n\t\t\ttoggle.textContent = expanded ? '▾' : '▸';\n\t\t\ttoggle.title = 'Toggle group in Graph view';\n\t\t\ttoggle.setAttribute('aria-label', `${expanded ? 'Collapse' : 'Expand'} group ${group.path.join(' / ')}`);\n\t\t\ttoggle.addEventListener('click', () => this.callbacks.onGroupToggle(group.pathKey));\n\t\t\ttoggleCell.appendChild(toggle);\n\t\t\tconst labelCell = createSelectionCell(group.label, selection, this.callbacks);\n\t\t\tlabelCell.style.paddingLeft = `${8 + group.depth * 18}px`;\n\t\t\tconst summary = group.summary;\n\t\t\trow.append(\n\t\t\t\ttoggleCell,\n\t\t\t\tlabelCell,\n\t\t\t\tcreateCell(String(summary.retainedNodeCount), { column: 'numeric' }),\n\t\t\t\tcreateCell(String(summary.culledNodeCount), { column: 'numeric' }),\n\t\t\t\tcreateCell(summary.timedNodeCount === 0 ? '-' : (summary.gpuWorkDurationMicros / 1000).toFixed(3), { column: 'numeric' }),\n\t\t\t\tcreateCell(String(summary.inputResources.length), { column: 'numeric' }),\n\t\t\t\tcreateCell(String(summary.outputResources.length), { column: 'numeric' }),\r\n\t\t\t);\n\t\t\tthis.groupsTable.body.appendChild(row);\n\t\t}\n\t\tif (this.groupsTable.body.childElementCount === 0) this.groupsTable.body.appendChild(createEmptyTableRow(7, 'No diagnostic groups.'));\n\t\tupdateSelectedRows(this.rows, this.selected);\n\t}\n\n\tprivate matchesNode(snapshot: FrameGraphDebugViewModel, node: FrameGraphDebugNode): boolean {\n\t\tif (this.kind !== 'all' && node.kind !== this.kind) return false;\n\t\tif (this.search.length === 0) return true;\n\t\tconst haystack = `${labelNode(node)} ${groupPath(snapshot, node.debugGroupId)}`.toLocaleLowerCase();\n\t\treturn haystack.includes(this.search);\n\t}\n\n\tprivate compareNodes(a: FrameGraphDebugNode, b: FrameGraphDebugNode): number {\n\t\tswitch (this.sort) {\n\t\t\tcase 'label': return labelNode(a).localeCompare(labelNode(b)) || a.order - b.order;\n\t\t\tcase 'kind': return a.kind.localeCompare(b.kind) || a.order - b.order;\n\t\t\tcase 'gpu': return (b.gpuDurationMicros ?? -1) - (a.gpuDurationMicros ?? -1) || a.order - b.order;\n\t\t\tcase 'order': return a.order - b.order;\n\t\t}\n\t}\n}\n"]}

package/dist/panelResourcesView.d.ts

@@ -0,0 +1,19 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { Selection } from './panelTypes.ts';
+import { type WorkbenchCallbacks } from './panelWorkbenchHelpers.ts';
+export declare class ResourcesView {
+    private readonly callbacks;
+    readonly root: HTMLElement;
+    private readonly table;
+    private readonly rows;
+    private snapshot;
+    private selected;
+    private search;
+    private kind;
+    private origin;
+    constructor(callbacks: WorkbenchCallbacks, idPrefix: string);
+    setSnapshot(snapshot: FrameGraphDebugViewModel): void;
+    setSelection(selected: Selection | undefined): void;
+    private renderRows;
+}
+//# sourceMappingURL=panelResourcesView.d.ts.map

package/dist/panelResourcesView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelResourcesView.d.ts","sourceRoot":"","sources":["../src/panelResourcesView.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,EAaN,KAAK,kBAAkB,EAEvB,MAAM,4BAA4B,CAAC;AAEpC,qBAAa,aAAa;IAkBb,OAAO,CAAC,QAAQ,CAAC,SAAS;IAjBtC,QAAQ,CAAC,IAAI,cAAqC;IAClD,OAAO,CAAC,QAAQ,CAAC,KAAK,CAQnB;IACH,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAoC;IACzD,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,QAAQ,CAAwB;IACxC,OAAO,CAAC,MAAM,CAAM;IACpB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,MAAM,CAAS;gBAEM,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM;IA+B5E,WAAW,CAAC,QAAQ,EAAE,wBAAwB,GAAG,IAAI;IAKrD,YAAY,CAAC,QAAQ,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;IAKnD,OAAO,CAAC,UAAU;CAmClB"}

package/dist/panelResourcesView.js

@@ -0,0 +1,89 @@
+import { createCell, labelResource } from "./panelDomHelpers.js";
+import { createEmptyTableRow, createKindCell, createFilterSelect, createSearchInput, createSelectionCell, createTableScroller, createViewToolbar, formatEstimatedBytes, formatResourceDescriptor, groupPath, registerSelectable, resourceAccessCounts, updateSelectedRows, } from "./panelWorkbenchHelpers.js";
+export class ResourcesView {
+    callbacks;
+    root = document.createElement('section');
+    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' },
+    ]);
+    rows = new Map();
+    snapshot;
+    selected;
+    search = '';
+    kind = 'all';
+    origin = 'all';
+    constructor(callbacks, idPrefix) {
+        this.callbacks = callbacks;
+        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) {
+        this.snapshot = snapshot;
+        this.renderRows();
+    }
+    setSelection(selected) {
+        this.selected = selected;
+        updateSelectedRows(this.rows, selected);
+    }
+    renderRows() {
+        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 = { 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);
+    }
+}
+//# sourceMappingURL=panelResourcesView.js.map

package/dist/panelResourcesView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelResourcesView.js","sourceRoot":"","sources":["../src/panelResourcesView.ts"],"names":[],"mappings":"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","sourcesContent":["import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';\nimport { createCell, labelResource } from './panelDomHelpers.ts';\nimport type { Selection } from './panelTypes.ts';\nimport {\n\tcreateEmptyTableRow,\n\tcreateKindCell,\n\tcreateFilterSelect,\n\tcreateSearchInput,\n\tcreateSelectionCell,\n\tcreateTableScroller,\n\tcreateViewToolbar,\n\tformatEstimatedBytes,\n\tformatResourceDescriptor,\n\tgroupPath,\n\tregisterSelectable,\n\tresourceAccessCounts,\n\ttype WorkbenchCallbacks,\n\tupdateSelectedRows,\n} from './panelWorkbenchHelpers.ts';\n\nexport class ResourcesView {\n\treadonly root = document.createElement('section');\n\tprivate readonly table = createTableScroller([\n\t\t{ label: 'Resource / Group' },\n\t\t{ label: 'Type / Origin', column: 'kind' },\n\t\t{ label: 'Descriptor', column: 'code' },\n\t\t{ label: 'Estimated', column: 'numeric' },\n\t\t{ label: 'Lifetime', column: 'code' },\n\t\t{ label: 'Physical', column: 'numeric' },\n\t\t{ label: 'R / W', column: 'numeric' },\n\t]);\n\tprivate readonly rows = new Map<string, HTMLElement[]>();\n\tprivate snapshot: FrameGraphDebugViewModel | undefined;\n\tprivate selected: Selection | undefined;\n\tprivate search = '';\n\tprivate kind = 'all';\n\tprivate origin = 'all';\n\n\tconstructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {\n\t\tthis.root.className = 'zenfg-inspector-view zenfg-inspector-resources-view';\n\t\tthis.root.id = `${idPrefix}-view-resources`;\n\t\tthis.root.setAttribute('role', 'tabpanel');\n\t\tconst toolbar = createViewToolbar('Resource filters');\n\t\ttoolbar.append(\n\t\t\tcreateSearchInput('Search resource or group', this.search, (value) => {\n\t\t\t\tthis.search = value.trim().toLocaleLowerCase();\n\t\t\t\tthis.renderRows();\n\t\t\t}),\n\t\t\tcreateFilterSelect('Resource kind', this.kind, [\n\t\t\t\t['all', 'All kinds'],\n\t\t\t\t['texture', 'Texture'],\n\t\t\t\t['buffer', 'Buffer'],\n\t\t\t], (value) => {\n\t\t\t\tthis.kind = value;\n\t\t\t\tthis.renderRows();\n\t\t\t}),\n\t\t\tcreateFilterSelect('Resource origin', this.origin, [\n\t\t\t\t['all', 'All origins'],\n\t\t\t\t['transient', 'Transient'],\n\t\t\t\t['imported', 'Imported'],\n\t\t\t\t['swapchain', 'Swapchain'],\n\t\t\t], (value) => {\n\t\t\t\tthis.origin = value;\n\t\t\t\tthis.renderRows();\n\t\t\t}),\n\t\t);\n\t\tthis.root.append(toolbar, this.table.scroller);\n\t}\n\n\tsetSnapshot(snapshot: FrameGraphDebugViewModel): void {\n\t\tthis.snapshot = snapshot;\n\t\tthis.renderRows();\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 renderRows(): void {\n\t\tconst snapshot = this.snapshot;\n\t\tif (!snapshot) return;\n\t\tthis.rows.clear();\n\t\tthis.table.body.replaceChildren();\n\t\tconst resources = snapshot.resources.filter((resource) => {\n\t\t\tif (this.kind !== 'all' && resource.kind !== this.kind) return false;\n\t\t\tif (this.origin !== 'all' && resource.origin !== this.origin) return false;\n\t\t\tif (this.search.length === 0) return true;\n\t\t\treturn `${labelResource(resource)} ${groupPath(snapshot, resource.debugGroupId)}`\n\t\t\t\t.toLocaleLowerCase().includes(this.search);\n\t\t});\n\t\tfor (const resource of resources) {\n\t\t\tconst selection: Selection = { kind: 'resource', id: resource.id };\n\t\t\tconst row = document.createElement('tr');\n\t\t\tregisterSelectable(this.rows, row, selection, this.callbacks);\n\t\t\tconst [reads, writes] = resourceAccessCounts(snapshot, resource.id);\n\t\t\tconst resourceCell = createSelectionCell(labelResource(resource), selection, this.callbacks);\n\t\t\tconst group = document.createElement('small');\n\t\t\tgroup.textContent = groupPath(snapshot, resource.debugGroupId);\n\t\t\tresourceCell.appendChild(group);\n\t\t\trow.append(\n\t\t\t\tresourceCell,\n\t\t\t\tcreateKindCell(resource.kind, `${resource.kind} · ${resource.origin}`),\n\t\t\t\tcreateCell(formatResourceDescriptor(resource), { column: 'code' }),\n\t\t\t\tcreateCell(formatEstimatedBytes(resource.estimatedByteSize), { column: 'numeric' }),\n\t\t\t\tcreateCell(resource.lifetime ? `${resource.lifetime.firstUse}–${resource.lifetime.lastUse}` : '-', { column: 'code' }),\n\t\t\t\tcreateCell(resource.physicalResourceId === undefined ? '-' : `#${resource.physicalResourceId}`, { column: 'numeric' }),\n\t\t\t\tcreateCell(`${reads} / ${writes}`, { column: 'numeric' }),\r\n\t\t\t);\n\t\t\tthis.table.body.appendChild(row);\n\t\t}\n\t\tif (resources.length === 0) this.table.body.appendChild(createEmptyTableRow(7, 'No resources match the current filters.'));\n\t\tupdateSelectedRows(this.rows, this.selected);\n\t}\n}\n"]}

package/dist/panelSelection.d.ts

@@ -0,0 +1,5 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import type { Selection } from './panelTypes.ts';
+export declare function resolveSelectedDetail(snapshot: FrameGraphDebugViewModel, selected: Selection | undefined): unknown;
+export declare function selectionExists(snapshot: FrameGraphDebugViewModel, selected: Selection): boolean;
+//# sourceMappingURL=panelSelection.d.ts.map

package/dist/panelSelection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panelSelection.d.ts","sourceRoot":"","sources":["../src/panelSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAEjD,wBAAgB,qBAAqB,CACpC,QAAQ,EAAE,wBAAwB,EAClC,QAAQ,EAAE,SAAS,GAAG,SAAS,GAC7B,OAAO,CAuCT;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,wBAAwB,EAAE,QAAQ,EAAE,SAAS,GAAG,OAAO,CAiBhG"}