@zenfg/inspector 0.1.0-beta.3 → 0.1.0

package/dist/panelWorkbenchView.js

@@ -6,7 +6,9 @@ import { MemoryView } from "./panelMemoryView.js";
 import { PassesView } from "./panelPassesView.js";
 import { ResourcesView } from "./panelResourcesView.js";
 import { renderGraphView, resizeGraph } from "./panelGraphView.js";
-import { formatEstimatedBytes } from "./panelWorkbenchHelpers.js";
+import { DetailLayout } from "./panelDetailLayout.js";
+import { GraphSearch } from "./panelGraphSearch.js";
+import { enableTabKeyboard, formatEstimatedBytes, formatEstimateCoverage, formatTimingCoverage } from "./panelWorkbenchHelpers.js";
 export class FrameGraphDebugWorkbench {
     graphView;
     callbacks;
@@ -17,6 +19,8 @@ export class FrameGraphDebugWorkbench {
     tabList = document.createElement('div');
     commandActions = document.createElement('div');
     commandStatus = document.createElement('span');
+    feedback = document.createElement('details');
+    feedbackTitle = document.createElement('summary');
     workspace = document.createElement('div');
     main = document.createElement('main');
     emptyHost = document.createElement('div');
@@ -27,6 +31,10 @@ export class FrameGraphDebugWorkbench {
     memory;
     diagnostics;
     inspector;
+    detailLayout;
+    graphSearch;
+    dirtyViews = new Set();
+    captureDetails = document.createElement('details');
     inspectorOpenButton = document.createElement('button');
     captureButton = document.createElement('button');
     importButton = document.createElement('button');
@@ -42,6 +50,7 @@ export class FrameGraphDebugWorkbench {
     snapshot;
     selected;
     hovered;
+    destroyed = false;
     constructor(graphView, callbacks, actions, options) {
         this.graphView = graphView;
         this.callbacks = callbacks;
@@ -62,7 +71,7 @@ export class FrameGraphDebugWorkbench {
         this.commandStatus.className = 'zenfg-inspector-command-status';
         this.commandStatus.setAttribute('role', 'status');
         this.commandStatus.setAttribute('aria-live', 'polite');
-        this.workspace.className = 'zenfg-inspector-workspace inspector-open';
+        this.workspace.className = 'zenfg-inspector-workspace';
         this.main.className = 'zenfg-inspector-main';
         this.emptyHost.className = 'zenfg-inspector-workbench-empty';
         this.emptyHost.setAttribute('role', 'status');
@@ -74,12 +83,25 @@ export class FrameGraphDebugWorkbench {
         this.graphRoot.className = 'zenfg-inspector-view zenfg-inspector-graph-view';
         this.graphRoot.id = `${options.idPrefix}-view-graph`;
         this.graphRoot.setAttribute('role', 'tabpanel');
-        this.graphRoot.append(this.graphView.toolbar, this.graphView.host);
+        const graphViewport = document.createElement('div');
+        graphViewport.className = 'zenfg-inspector-graph-viewport';
+        graphViewport.append(this.graphView.host, this.graphView.toolbar);
+        if (this.graphView.legend) {
+            const legend = document.createElement('details');
+            legend.className = 'zenfg-inspector-legend-details';
+            const title = document.createElement('summary');
+            title.textContent = 'Legend';
+            legend.append(title, this.graphView.legend);
+            graphViewport.append(legend);
+        }
+        this.graphRoot.append(graphViewport);
         this.passes = new PassesView(callbacks, options.idPrefix);
         this.resources = new ResourcesView(callbacks, options.idPrefix);
         this.memory = new MemoryView(callbacks, options.idPrefix);
         this.diagnostics = new DiagnosticsView(callbacks, options.idPrefix);
         this.inspector = new InspectorView(callbacks, (open) => this.handleInspectorOpenChange(open), options.idPrefix);
+        this.graphSearch = new GraphSearch((selection) => callbacks.onReveal?.(selection, 'graph'), `${options.idPrefix}-graph-search`);
+        this.graphView.toolbar.prepend(this.graphSearch.root);
         this.views.set('overview', this.overviewRoot);
         this.views.set('graph', this.graphRoot);
         this.views.set('passes', this.passes.root);
@@ -104,6 +126,7 @@ export class FrameGraphDebugWorkbench {
             this.tabButtons.set(tab, button);
             this.tabList.appendChild(button);
         }
+        enableTabKeyboard(this.tabList);
         this.inspectorOpenButton.type = 'button';
         this.inspectorOpenButton.hidden = true;
         this.inspectorOpenButton.className = 'zenfg-inspector-open-inspector';
@@ -154,7 +177,7 @@ export class FrameGraphDebugWorkbench {
             actions.onCopyJson();
         });
         this.exportMenu.append(this.downloadButton, this.copyButton);
-        this.commandActions.append(this.commandStatus, this.inspectorOpenButton, this.captureButton, this.importButton, this.exportButton, this.importInput);
+        this.commandActions.append(this.inspectorOpenButton, this.captureButton, this.importButton, this.exportButton, this.importInput);
         if (options.branding === false)
             this.commandBar.append(this.tabList, this.commandActions, this.exportMenu);
         else
@@ -167,15 +190,15 @@ export class FrameGraphDebugWorkbench {
             if (!this.exportButton.contains(targetNode) && !this.exportMenu.contains(targetNode))
                 this.setExportMenuOpen(false);
         });
-        this.root.addEventListener('keydown', (event) => {
-            if (event.key !== 'Escape' || this.exportMenu.hidden)
-                return;
-            this.setExportMenuOpen(false);
-            this.exportButton.focus();
-        });
+        this.root.addEventListener('keydown', (event) => this.handleMenuKey(event));
         this.main.append(this.emptyHost, ...this.views.values());
         this.workspace.append(this.main, this.inspector.root);
-        this.root.append(this.commandBar, this.workspace);
+        this.feedback.className = 'zenfg-inspector-feedback';
+        this.feedback.hidden = true;
+        this.feedback.append(this.feedbackTitle, this.commandStatus);
+        this.root.append(this.commandBar, this.feedback, this.workspace);
+        this.detailLayout = new DetailLayout(this.workspace, this.main, this.inspector.root, this.commandBar, () => this.inspector.setOpen(false));
+        this.workspace.addEventListener('detail-layout-change', () => this.resizeGraph());
         this.showEmptyState('empty', 'Drop a ZenFG Snapshot here or choose Import.', 'Files are processed locally in your browser.');
         this.setSnapshotActionState({
             providerAvailable: false,
@@ -191,18 +214,14 @@ export class FrameGraphDebugWorkbench {
         this.snapshot = snapshot;
         this.selected = selected;
         this.hovered = undefined;
-        this.renderSummary(snapshot);
-        this.passes.setSnapshot(snapshot);
-        this.resources.setSnapshot(snapshot);
-        this.memory.setSnapshot(snapshot);
-        this.diagnostics.setSnapshot(snapshot);
+        for (const tab of this.views.keys())
+            this.dirtyViews.add(tab);
+        this.renderDiagnosticBadge(snapshot);
+        this.graphSearch.setSnapshot(snapshot);
         this.inspector.setSnapshot(snapshot);
-        this.passes.setSelection(selected);
-        this.resources.setSelection(selected);
-        this.memory.setSelection(selected);
-        this.diagnostics.setSelection(selected);
         this.inspector.setSelection(selected, false);
         this.emptyHost.hidden = true;
+        this.ensureActiveView();
         this.updateActiveTab();
         this.updateWorkspaceState();
         if (this.activeTab === 'graph')
@@ -263,13 +282,13 @@ export class FrameGraphDebugWorkbench {
             this.commandStatus.title = state.message;
         else
             this.commandStatus.removeAttribute('title');
+        this.feedback.hidden = !state.message;
+        this.feedback.dataset.tone = state.messageTone ?? 'neutral';
+        this.feedbackTitle.textContent = state.message ? state.messageTone === 'error' ? 'Operation failed · show details' : 'Operation feedback · show details' : '';
     }
     setSelection(selected) {
         this.selected = selected;
-        this.passes.setSelection(selected);
-        this.resources.setSelection(selected);
-        this.memory.setSelection(selected);
-        this.diagnostics.setSelection(selected);
+        this.updateActiveSelection();
         this.inspector.setSelection(selected);
         if (this.activeTab === 'graph')
             this.renderGraph();
@@ -280,12 +299,22 @@ export class FrameGraphDebugWorkbench {
             this.renderGraph();
     }
     setActiveTab(tab) {
+        if (this.destroyed)
+            return;
         if (this.activeTab === tab)
             return;
+        if (this.activeTab === 'graph') {
+            this.graphView.revealOnNextRender = undefined;
+            this.graphView.renderer?.cancelReveal?.();
+        }
         this.activeTab = tab;
         this.updateActiveTab();
+        this.ensureActiveView();
+        this.updateWorkspaceState();
         if (tab === 'graph') {
             window.requestAnimationFrame(() => {
+                if (this.destroyed || this.activeTab !== 'graph')
+                    return;
                 resizeGraph(this.graphView);
                 this.renderGraph();
             });
@@ -294,7 +323,6 @@ export class FrameGraphDebugWorkbench {
     refreshGraphStructure() {
         if (!this.snapshot)
             return;
-        this.passes.setSnapshot(this.snapshot);
         if (this.activeTab === 'graph')
             this.renderGraph();
     }
@@ -302,6 +330,8 @@ export class FrameGraphDebugWorkbench {
         if (fit)
             this.graphView.fitOnNextRender = true;
         window.requestAnimationFrame(() => {
+            if (this.destroyed)
+                return;
             resizeGraph(this.graphView);
             if (this.activeTab === 'graph')
                 this.renderGraph();
@@ -313,6 +343,7 @@ export class FrameGraphDebugWorkbench {
             button.disabled = !this.hasSnapshot;
             button.classList.toggle('active', active);
             button.setAttribute('aria-selected', active ? 'true' : 'false');
+            button.tabIndex = active ? 0 : -1;
             const view = this.views.get(tab);
             view.hidden = !this.hasSnapshot || !active;
             view.setAttribute('aria-labelledby', button.id);
@@ -327,9 +358,7 @@ export class FrameGraphDebugWorkbench {
         const frameGraphSegments = snapshot.executionSegments.filter((segment) => segment.kind === 'frame-graph').length;
         const opaqueIntervals = snapshot.executionSegments.length - frameGraphSegments;
         const metrics = snapshot.metrics;
-        const coverage = metrics.timingEligibleNodeCount === 0
-            ? 'No eligible passes'
-            : `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} timed`;
+        const coverage = formatTimingCoverage(metrics.timedNodeCount, metrics.timingEligibleNodeCount);
         const slowest = metrics.slowestNode
             ? `${labelNode(metrics.slowestNode)} · ${(metrics.slowestNode.gpuDurationMicros / 1000).toFixed(3)} ms`
             : 'Unknown';
@@ -346,34 +375,47 @@ export class FrameGraphDebugWorkbench {
         const poolRetained = snapshot.resourcePool.status === 'available'
             ? `${snapshot.resourcePool.estimatedRetainedBytes === undefined ? 'Unknown' : formatBytes(snapshot.resourcePool.estimatedRetainedBytes)} · ${snapshot.resourcePool.retainedCount} allocations`
             : 'Unavailable';
-        this.summary.replaceChildren(this.createSummaryGroup('Capture', [
-            ['Source', snapshot.source.label],
-            ['Schema', `${protocol.format} v${protocol.version.major}.${protocol.version.minor}`],
-            ['Producer', producer],
-            ['Runtime', runtimeLabel],
-            ['Frame', String(snapshot.frameIndex)],
-            ...(snapshot.source.migratedFromLegacy ? [['Migration', 'Legacy V0 → V1']] : []),
-            ['Timing', snapshot.profiling.status === 'available' ? 'Available' : snapshot.profiling.reason],
-        ]), this.createSummaryGroup('GPU', [
-            ['GPU Span', snapshot.profiling.status === 'available' ? `${formatGpuFrameDuration(snapshot)} ms` : 'Unknown'],
-            ['Coverage', coverage],
-            ['Slowest', slowest],
-        ]), this.createSummaryGroup('Work', [
+        const counts = this.diagnosticCounts(snapshot);
+        this.summary.replaceChildren(this.createSummaryGroup('Diagnostics', [
+            ['Errors', String(counts.error)], ['Warnings', String(counts.warning)], ['Information', String(counts.info)],
+        ], () => this.setActiveTab('diagnostics')), this.createSummaryGroup('Execution timing', [
+            ['CPU execute', snapshot.cpuProfiling.status === 'available' ? (snapshot.cpuProfiling.executionDurationMicros / 1000).toFixed(3) + ' ms' : 'Not collected'],
+            ['CPU pass sum', snapshot.metrics.cpuTimedNodeCount ? (snapshot.metrics.cpuWorkDurationMicros / 1000).toFixed(3) + ' ms' : 'Not collected'],
+            ['CPU coverage', formatTimingCoverage(snapshot.metrics.cpuTimedNodeCount, snapshot.nodes.length)],
+            ['GPU span', snapshot.profiling.status === 'available' ? `${formatGpuFrameDuration(snapshot)} ms` : 'Not collected'],
+            ['GPU coverage', coverage],
+            ['Slowest GPU pass', slowest],
+        ], () => metrics.slowestNode ? this.callbacks.onReveal?.({ kind: 'node', id: metrics.slowestNode.id }, 'passes') : this.setActiveTab('passes')), this.createSummaryGroup('Work', [
             ['Nodes', `${snapshot.nodes.length} retained · ${snapshot.culledNodes.length} culled`],
             ['Segments', `${frameGraphSegments} FG · ${opaqueIntervals} opaque`],
             ['Groups', snapshot.availability.groups ? String(snapshot.debugGroups.length) : 'Unknown'],
             ['Recording order', snapshot.availability.recordingOrder ? 'Available' : 'Unknown'],
-        ]), this.createSummaryGroup('Resources', [
-            ['Logical / physical', `${snapshot.resources.length} / ${snapshot.physicalAllocations.length}`],
+        ], () => this.setActiveTab('passes')), this.createSummaryGroup('Resources', [
+            ['Logical / physical', `${snapshot.resources.length} / ${protocol.memory.allocationReport.status === 'available' ? snapshot.physicalAllocations.length : 'Unavailable'}`],
             ['Texture views', snapshot.availability.textureViews ? String(snapshot.textureViewById.size) : 'Unknown'],
             ['Access regions', snapshot.availability.accessRegions ? 'Available' : 'Unknown'],
-            ['Transient estimate', formatEstimatedBytes(metrics.transientEstimatedByteSize)],
-        ]), this.createSummaryGroup('Pool', [
+            ['Transient estimate', formatEstimateCoverage(metrics.transientEstimatedByteSize, metrics.estimatedCoverage.transient)],
+        ], () => this.setActiveTab('resources')), this.createSummaryGroup('Memory estimates', [
+            ['Physical allocations', protocol.memory.allocationReport.status === 'available' ? formatEstimateCoverage(metrics.physicalEstimatedBytes, metrics.estimatedCoverage.physical) : 'Unavailable'],
+            ['Alias reuse', protocol.memory.allocationReport.status === 'available' ? formatEstimatedBytes(metrics.aliasReuseBytes) : 'Unavailable'],
+        ], () => this.setActiveTab('memory')), this.createSummaryGroup('Pool', [
             ['Retained', poolRetained],
             ['Reuse', formatPoolHitRate(snapshot)],
+        ], () => this.setActiveTab('memory')));
+        const title = document.createElement('summary');
+        title.textContent = 'Capture information';
+        this.captureDetails.className = 'zenfg-inspector-capture-details';
+        this.captureDetails.replaceChildren(title, this.createSummaryGroup('Capture', [
+            ['Source', snapshot.source.label], ['Frame', String(snapshot.frameIndex)],
+            ['Captured at', protocol.capture.capturedAt ?? 'Unknown'],
+            ['Schema', `${protocol.format} v${protocol.version.major}.${protocol.version.minor}`],
+            ['Producer', producer], ['Runtime', runtimeLabel],
+            ...(protocol.capture.migration ? [['Migration', `${protocol.capture.migration.sourceFormat} → canonical v${protocol.version.major}.${protocol.version.minor}`]] : []),
+            ['Timing', snapshot.profiling.status === 'available' ? coverage : snapshot.profiling.reason],
         ]));
+        this.summary.append(this.captureDetails);
     }
-    createSummaryGroup(title, rows) {
+    createSummaryGroup(title, rows, onNavigate) {
         const group = document.createElement('section');
         const heading = document.createElement('h2');
         heading.textContent = title;
@@ -388,11 +430,21 @@ export class FrameGraphDebugWorkbench {
             row.append(term, description);
             group.appendChild(row);
         }
+        if (onNavigate) {
+            const action = document.createElement('button');
+            action.type = 'button';
+            action.className = 'zenfg-inspector-relation-button';
+            action.textContent = `Explore ${title.toLowerCase()}`;
+            action.addEventListener('click', onNavigate);
+            group.append(action);
+        }
         return group;
     }
     setExportMenuOpen(open) {
         this.exportMenu.hidden = !open;
         this.exportButton.setAttribute('aria-expanded', open ? 'true' : 'false');
+        if (open)
+            this.downloadButton.focus();
     }
     handleInspectorOpenChange(_open) {
         this.updateWorkspaceState();
@@ -400,11 +452,137 @@ export class FrameGraphDebugWorkbench {
             this.resizeGraph(false);
     }
     updateWorkspaceState() {
-        const inspectorOpen = this.hasSnapshot && this.inspector.isOpen;
+        const inspectorOpen = this.hasSnapshot && this.inspector.isOpen && this.activeTab !== 'overview';
         this.workspace.classList.toggle('has-capture', this.hasSnapshot);
-        this.workspace.classList.toggle('inspector-open', inspectorOpen);
-        this.inspector.root.classList.toggle('unavailable', !this.hasSnapshot);
-        this.inspectorOpenButton.hidden = !this.hasSnapshot || inspectorOpen;
+        this.inspector.root.classList.toggle('unavailable', !inspectorOpen);
+        this.inspectorOpenButton.hidden = !this.hasSnapshot || !this.selected || inspectorOpen || this.activeTab === 'overview';
+        this.detailLayout.update(inspectorOpen);
+    }
+    reveal(selection, tab) {
+        if (this.feedbackTitle.textContent === 'Graph location unavailable') {
+            this.feedback.hidden = true;
+            this.commandStatus.replaceChildren();
+            this.commandStatus.hidden = true;
+        }
+        this.setActiveTab(tab);
+        if (tab === 'passes')
+            this.passes.reveal(selection);
+        else if (tab === 'resources')
+            this.resources.reveal(selection);
+        else if (tab === 'memory')
+            this.memory.reveal(selection);
+        else if (tab === 'diagnostics')
+            this.diagnostics.reveal(selection);
+        if (this.detailLayout.isDrawer)
+            this.inspector.setOpen(false);
+        if (tab === 'graph')
+            this.renderGraph();
+    }
+    navigate(tab, filter) {
+        this.setActiveTab(tab);
+        if (tab === 'passes' && filter === 'culled')
+            this.passes.showCulled();
+        if (this.detailLayout.isDrawer)
+            this.inspector.setOpen(false);
+    }
+    showNavigationIssue(message, selection) {
+        if (this.detailLayout.isDrawer)
+            this.inspector.setOpen(false);
+        this.feedback.hidden = false;
+        this.feedback.open = true;
+        this.feedback.dataset.tone = 'neutral';
+        this.feedbackTitle.textContent = 'Graph location unavailable';
+        const action = document.createElement('button');
+        action.type = 'button';
+        action.className = 'zenfg-inspector-relation-button';
+        const tab = selection.kind === 'resource' ? 'resources' : selection.kind === 'allocation' ? 'memory'
+            : selection.kind === 'root' || selection.kind === 'segment' ? 'diagnostics' : 'passes';
+        action.textContent = `Show in ${tab}`;
+        action.addEventListener('click', () => this.callbacks.onReveal?.(selection, tab));
+        this.commandStatus.hidden = false;
+        this.commandStatus.replaceChildren(document.createTextNode(`${message} `), action);
+        action.focus();
+    }
+    destroy() { this.destroyed = true; this.detailLayout.destroy(); }
+    ensureActiveView() {
+        const snapshot = this.snapshot;
+        if (!snapshot)
+            return;
+        if (this.dirtyViews.has(this.activeTab)) {
+            switch (this.activeTab) {
+                case 'overview':
+                    this.renderSummary(snapshot);
+                    break;
+                case 'passes':
+                    this.passes.setSnapshot(snapshot);
+                    break;
+                case 'resources':
+                    this.resources.setSnapshot(snapshot);
+                    break;
+                case 'memory':
+                    this.memory.setSnapshot(snapshot);
+                    break;
+                case 'diagnostics':
+                    this.diagnostics.setSnapshot(snapshot);
+                    break;
+            }
+            this.dirtyViews.delete(this.activeTab);
+        }
+        this.updateActiveSelection();
+    }
+    updateActiveSelection() {
+        switch (this.activeTab) {
+            case 'passes':
+                this.passes.setSelection(this.selected);
+                break;
+            case 'resources':
+                this.resources.setSelection(this.selected);
+                break;
+            case 'memory':
+                this.memory.setSelection(this.selected);
+                break;
+            case 'diagnostics':
+                this.diagnostics.setSelection(this.selected);
+                break;
+        }
+    }
+    diagnosticCounts(snapshot) {
+        const counts = { error: 0, warning: 0, info: 0 };
+        for (const entry of snapshot.protocol.diagnostics)
+            counts[entry.severity]++;
+        return counts;
+    }
+    renderDiagnosticBadge(snapshot) {
+        const counts = this.diagnosticCounts(snapshot);
+        const tab = this.tabButtons.get('diagnostics');
+        const label = document.createElement('span');
+        label.textContent = 'Diagnostics';
+        const badge = document.createElement('span');
+        badge.className = 'zenfg-inspector-diagnostic-badge';
+        badge.textContent = `${counts.error} / ${counts.warning}`;
+        badge.title = `${counts.error} errors, ${counts.warning} warnings`;
+        badge.setAttribute('aria-hidden', 'true');
+        tab.replaceChildren(label, ...(counts.error + counts.warning ? [badge] : []));
+        tab.title = badge.title;
+    }
+    handleMenuKey(event) {
+        if (this.exportMenu.hidden || event.defaultPrevented)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.setExportMenuOpen(false);
+            this.exportButton.focus();
+        }
+        else if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            event.preventDefault();
+            event.stopPropagation();
+            const items = [this.downloadButton, this.copyButton].filter((button) => !button.disabled);
+            const index = items.indexOf(document.activeElement);
+            const next = event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1
+                : (index + (event.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+            items[next]?.focus();
+        }
     }
 }
 //# sourceMappingURL=panelWorkbenchView.js.map