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

package/src/panelGraphSearch.ts

@@ -0,0 +1,96 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import { labelNode, labelResource } from './panelDomHelpers.ts';
+import type { Selection } from './panelTypes.ts';
+
+type SearchEntry = { readonly label: string; readonly kind: string; readonly text: string; readonly selection: Selection };
+
+export class GraphSearch {
+	readonly root = document.createElement('div');
+	private readonly toggle = document.createElement('button');
+	private readonly popover = document.createElement('div');
+	private readonly input = document.createElement('input');
+	private readonly results = document.createElement('div');
+	private entries: SearchEntry[] = [];
+
+	constructor(private readonly onReveal: (selection: Selection) => void, id: string) {
+		this.root.className = 'zenfg-inspector-graph-search';
+		this.toggle.type = 'button';
+		this.toggle.textContent = 'Search';
+		this.toggle.setAttribute('aria-expanded', 'false');
+		this.toggle.setAttribute('aria-controls', id);
+		this.toggle.addEventListener('click', () => this.setOpen(this.popover.hidden !== false));
+		this.popover.className = 'zenfg-inspector-graph-search-popover';
+		this.popover.id = id;
+		this.popover.hidden = true;
+		this.input.type = 'search';
+		this.input.placeholder = 'Find pass, resource, group or output';
+		this.input.setAttribute('aria-label', 'Find in graph');
+		this.results.className = 'zenfg-inspector-graph-search-results';
+		this.results.setAttribute('aria-label', 'Graph search results');
+		this.results.hidden = true;
+		this.input.addEventListener('input', () => this.render());
+		this.root.addEventListener('keydown', (event) => {
+			if (event.key === 'Escape' && !this.popover.hidden) {
+				event.preventDefault();
+				event.stopPropagation();
+				this.setOpen(false);
+			} else if (event.key === 'ArrowDown' && event.target === this.input) {
+				event.preventDefault();
+				this.results.querySelector('button')?.focus();
+			}
+		});
+		this.popover.append(this.input, this.results);
+		this.root.append(this.toggle, this.popover);
+	}
+
+	private setOpen(open: boolean): void {
+		this.popover.hidden = !open;
+		this.toggle.setAttribute('aria-expanded', String(open));
+		if (open) this.input.focus();
+		else {
+			this.input.value = '';
+			this.results.hidden = true;
+			this.toggle.focus();
+		}
+	}
+
+	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
+		this.entries = [
+			...snapshot.nodes.map((node): SearchEntry => ({ label: labelNode(node), kind: 'Pass',
+				text: `${node.id} ${labelNode(node)} ${node.debugGroupId ? snapshot.groupById.get(node.debugGroupId)?.path.join(' / ') : ''}`,
+				selection: { kind: 'node', id: node.id } })),
+			...snapshot.resources.map((resource): SearchEntry => ({ label: labelResource(resource), kind: 'Resource',
+				text: `${resource.id} ${labelResource(resource)}`, selection: { kind: 'resource', id: resource.id } })),
+			...snapshot.debugGroups.map((group): SearchEntry => ({ label: group.path.join(' / '), kind: 'Group',
+				text: `${group.id} ${group.path.join(' / ')}`, selection: { kind: 'group', pathKey: group.pathKey } })),
+			...snapshot.roots.filter((root) => root.reason !== 'side-effect').map((root): SearchEntry => ({
+				label: `${root.reason} · ${root.resource ? labelResource(root.resource) : root.key}`, kind: 'Output',
+				text: `${root.reason} ${root.resource?.id} ${root.resource?.label}`, selection: { kind: 'root', key: root.key },
+			})),
+		];
+		this.render();
+	}
+
+	private render(): void {
+		const query = this.input.value.trim().toLocaleLowerCase();
+		this.results.replaceChildren();
+		this.results.hidden = !query;
+		if (!query) return;
+		const matches = this.entries.filter((entry) => entry.text.toLocaleLowerCase().includes(query));
+		const count = document.createElement('p');
+		count.setAttribute('role', 'status');
+		count.textContent = matches.length > 50 ? `Showing 50 of ${matches.length} results. Refine your search.` : `${matches.length} results`;
+		this.results.append(count);
+		for (const entry of matches.slice(0, 50)) {
+			const button = document.createElement('button');
+			button.type = 'button';
+			button.textContent = `${entry.kind} · ${entry.label}`;
+			button.title = `Show in Graph · ${entry.label}`;
+			button.addEventListener('click', () => {
+				this.setOpen(false);
+				this.onReveal(entry.selection);
+			});
+			this.results.append(button);
+		}
+	}
+}

package/src/panelGraphView.ts

@@ -1,3 +1,4 @@
+import { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
 import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 import { CytoscapeGraphRenderer } from './panelCytoscapeGraphRenderer.ts';
 import { createGraphScene, type GraphScene } from './panelGraphScene.ts';
@@ -22,7 +23,8 @@ export function renderGraphView(
     onToggleGroup: (pathKey: string) => void,
 ): void {
     const scene = resolveGraphScene(graphView, snapshot);
-    renderGraphLegend(graphView.legend, scene);
+    if (!graphView.theme) graphView.refreshTheme?.();
+    renderGraphLegend(graphView.legend, snapshot, graphView.theme, graphView.showResourceDeclarations);
 	const elementCount = scene.nodes.length + scene.edges.length;
 	const layoutElementBudget = graphView.layoutElementBudget ?? Number.MAX_SAFE_INTEGER;
 	if (elementCount > layoutElementBudget) {
@@ -39,16 +41,21 @@ export function renderGraphView(
 	graphView.renderer ??= new CytoscapeGraphRenderer(graphView.host);
     graphView.renderer.render({
         scene,
+        theme: graphView.theme,
+        onVisible: graphView.refreshTheme,
         selected,
         hovered,
         fit: graphView.fitOnNextRender,
         anchorElementId: graphView.anchorElementIdOnNextRender,
+        reveal: graphView.revealOnNextRender,
+        captureRevision: graphView.captureRevision,
         onSelect,
         onHover,
         onToggleGroup,
     });
     graphView.fitOnNextRender = false;
     graphView.anchorElementIdOnNextRender = undefined;
+    graphView.revealOnNextRender = undefined;
 }
 
 export function resolveGraphScene(
@@ -56,15 +63,15 @@ export function resolveGraphScene(
     snapshot: FrameGraphDebugViewModel,
 ): GraphScene {
     const optionsKey = JSON.stringify([
-        graphView.graphMode,
         graphView.groupsEnabled,
+        graphView.showResourceDeclarations ?? true,
         [...graphView.expandedGroupPaths].sort(),
     ]);
     const cached = graphSceneCache.get(graphView);
     if (cached?.snapshot === snapshot && cached.optionsKey === optionsKey) return cached.scene;
     const scene = createGraphScene(snapshot, {
-        mode: graphView.graphMode,
         groupsEnabled: graphView.groupsEnabled,
+        showResourceDeclarations: graphView.showResourceDeclarations,
         expandedGroupPaths: graphView.expandedGroupPaths,
     });
     graphSceneCache.set(graphView, { snapshot, optionsKey, scene });
@@ -76,6 +83,7 @@ export function fitGraph(graphView: GraphViewState): void {
 }
 
 export function resizeGraph(graphView: GraphViewState): void {
+    graphView.refreshTheme?.();
     graphView.renderer?.resize();
 }
 
@@ -85,13 +93,26 @@ export function destroyGraph(graphView: GraphViewState): void {
     graphSceneCache.delete(graphView);
 }
 
-function renderGraphLegend(host: HTMLElement | undefined, scene: GraphScene): void {
+export function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDebugViewModel, theme = GRAPH_VISUAL_THEME, showResourceDeclarations = true): void {
     if (!host) return;
-    const entries = createGraphLegend(scene);
-    const key = entries.map((entry) => entry.key).join('|');
+    const entries = createGraphLegend(snapshot, theme, showResourceDeclarations);
+    const key = JSON.stringify(entries);
     if (host.dataset.legendKey === key) return;
     host.dataset.legendKey = key;
-    host.replaceChildren(...entries.map((entry) => {
+    host.replaceChildren();
+    let group: HTMLElement | undefined;
+    for (const entry of entries) {
+        if (group?.getAttribute('aria-label') !== entry.group) {
+            group = document.createElement('span');
+            group.className = 'zenfg-inspector-legend-group';
+            group.setAttribute('role', 'group');
+            group.setAttribute('aria-label', entry.group);
+            const heading = document.createElement('span');
+            heading.className = 'zenfg-inspector-legend-heading';
+            heading.textContent = entry.group;
+            group.appendChild(heading);
+            host.appendChild(group);
+        }
         const item = document.createElement('span');
         item.className = 'zenfg-inspector-legend-item';
         const swatch = document.createElement('span');
@@ -100,9 +121,20 @@ function renderGraphLegend(host: HTMLElement | undefined, scene: GraphScene): vo
         if (entry.lineStyle) swatch.dataset.lineStyle = entry.lineStyle;
         if (entry.hollowArrow) swatch.dataset.hollowArrow = 'true';
         swatch.style.setProperty('--zenfg-inspector-legend-color', entry.color);
+        if (entry.shape === 'cut-rectangle' || entry.shape === 'tag') {
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('viewBox', '0 0 20 14');
+            svg.setAttribute('aria-hidden', 'true');
+            const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+            polygon.setAttribute('points', entry.shape === 'tag'
+                ? '1,1 16,1 19,7 16,13 1,13'
+                : '4,1 16,1 19,4 19,10 16,13 4,13 1,10 1,4');
+            svg.appendChild(polygon);
+            swatch.appendChild(svg);
+        }
         const label = document.createElement('span');
         label.textContent = entry.label;
         item.append(swatch, label);
-        return item;
-    }));
+        group!.appendChild(item);
+    }
 }