@zenfg/inspector 0.1.0-beta.1

package/src/panelDiagnosticsView.ts

@@ -0,0 +1,160 @@
+import type { FrameGraphDebugViewModel } from './debugCaptureModel.ts';
+import { createCell, labelNode, labelResource } from './panelDomHelpers.ts';
+import type { Selection } from './panelTypes.ts';
+import {
+	createEmptyTableRow,
+	createKindCell,
+	createRelationButton,
+	createSelectionCell,
+	createTableScroller,
+	registerSelectable,
+	type WorkbenchCallbacks,
+	updateSelectedRows,
+} from './panelWorkbenchHelpers.ts';
+
+export class DiagnosticsView {
+	readonly root = document.createElement('section');
+	private readonly scroller = document.createElement('div');
+	private readonly content = document.createElement('div');
+	private readonly rows = new Map<string, HTMLElement[]>();
+	private snapshot: FrameGraphDebugViewModel | undefined;
+	private selected: Selection | undefined;
+
+	constructor(private readonly callbacks: WorkbenchCallbacks, idPrefix: string) {
+		this.root.className = 'zenfg-inspector-view zenfg-inspector-diagnostics-view';
+		this.root.id = `${idPrefix}-view-diagnostics`;
+		this.root.setAttribute('role', 'tabpanel');
+		this.scroller.className = 'zenfg-inspector-diagnostics-scroller';
+		this.content.className = 'zenfg-inspector-diagnostics-grid';
+		this.scroller.appendChild(this.content);
+		this.root.appendChild(this.scroller);
+	}
+
+	setSnapshot(snapshot: FrameGraphDebugViewModel): void {
+		this.snapshot = snapshot;
+		this.render();
+	}
+
+	setSelection(selected: Selection | undefined): void {
+		this.selected = selected;
+		updateSelectedRows(this.rows, selected);
+	}
+
+	private render(): void {
+		const snapshot = this.snapshot;
+		if (!snapshot) return;
+		this.rows.clear();
+		this.content.replaceChildren(
+			this.createRoots(snapshot),
+			this.createCulled(snapshot),
+			this.createSegments(snapshot),
+			this.createTiming(snapshot),
+		);
+		updateSelectedRows(this.rows, this.selected);
+	}
+
+	private createSection(title: string, description?: string): HTMLElement {
+		const section = document.createElement('section');
+		section.className = 'zenfg-inspector-diagnostic-card';
+		const heading = document.createElement('h2');
+		heading.textContent = title;
+		section.appendChild(heading);
+		if (description) {
+			const text = document.createElement('p');
+			text.textContent = description;
+			section.appendChild(text);
+		}
+		return section;
+	}
+
+	private createRoots(snapshot: FrameGraphDebugViewModel): HTMLElement {
+		const section = this.createSection('Retention roots', 'Roots explain why graph work survived dead-node elimination.');
+		const list = document.createElement('div');
+		list.className = 'zenfg-inspector-diagnostic-list';
+		snapshot.roots.forEach((root, index) => {
+			const selection: Selection = { kind: 'root', index };
+			const button = createRelationButton(
+				`${root.reason} · ${root.resource ? labelResource(root.resource) : root.nodeId === undefined ? '-' : `node-${root.nodeId}`}`,
+				selection,
+				this.callbacks.onSelect,
+			);
+			registerSelectable(this.rows, button, selection, this.callbacks);
+			list.appendChild(button);
+		});
+		if (snapshot.roots.length === 0) list.textContent = 'No retention roots.';
+		section.appendChild(list);
+		return section;
+	}
+
+	private createCulled(snapshot: FrameGraphDebugViewModel): HTMLElement {
+		const section = this.createSection('Culled nodes', 'Recorded nodes that were not reachable from a retention root.');
+		const table = createTableScroller([{ label: 'Node' }, { label: 'Kind', column: 'kind' }, { label: 'Reason' }]);
+		for (const [index, entry] of snapshot.culledNodes.entries()) {
+			const selection: Selection = { kind: 'culled', index };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			row.append(
+				createSelectionCell(labelNode(entry.node), selection, this.callbacks),
+				createKindCell(entry.node.kind),
+				createCell(entry.reason),
+			);
+			table.body.appendChild(row);
+		}
+		if (snapshot.culledNodes.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No culled nodes.'));
+		section.appendChild(table.scroller);
+		return section;
+	}
+
+	private createSegments(snapshot: FrameGraphDebugViewModel): HTMLElement {
+		const section = this.createSection(
+			'Execution segments',
+			'An opaque interval is a graph boundary around external work; it is not a count or timing of third-party GPU submissions.',
+		);
+		const table = createTableScroller([{ label: '#', column: 'numeric' }, { label: 'Kind', column: 'kind' }, { label: 'Nodes' }]);
+		for (const segment of snapshot.executionSegments) {
+			const selection: Selection = { kind: 'segment', index: segment.index };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			const labels = segment.nodeIds.map((id) => snapshot.nodeById.get(id))
+				.filter((node) => node !== undefined)
+				.map((node) => labelNode(node));
+			row.append(
+				createSelectionCell(String(segment.index), selection, this.callbacks, 'numeric'),
+				createKindCell(segment.kind, segment.kind === 'frame-graph' ? 'FrameGraph command segment' : 'Opaque interval'),
+				createCell(labels.join(', ') || '-'),
+			);
+			table.body.appendChild(row);
+		}
+		if (snapshot.executionSegments.length === 0) table.body.appendChild(createEmptyTableRow(3, 'No execution segments.'));
+		section.appendChild(table.scroller);
+		return section;
+	}
+
+	private createTiming(snapshot: FrameGraphDebugViewModel): HTMLElement {
+		const metrics = snapshot.metrics;
+		const coverage = metrics.timingEligibleNodeCount === 0
+			? 'No eligible render or compute passes'
+			: `${metrics.timedNodeCount}/${metrics.timingEligibleNodeCount} eligible passes timed (${((metrics.timedNodeCount / metrics.timingEligibleNodeCount) * 100).toFixed(0)}%)`;
+		const section = this.createSection('GPU timing coverage', coverage);
+		if (snapshot.profiling.status === 'unavailable') {
+			const status = document.createElement('p');
+			status.textContent = `Timing unavailable: ${snapshot.profiling.reason}.`;
+			section.appendChild(status);
+		}
+		const table = createTableScroller([{ label: 'Pass' }, { label: 'Status', column: 'kind' }, { label: 'GPU (ms)', column: 'numeric' }]);
+		for (const node of snapshot.nodes.filter((candidate) => candidate.kind === 'render' || candidate.kind === 'compute')) {
+			const selection: Selection = { kind: 'node', id: node.id };
+			const row = document.createElement('tr');
+			registerSelectable(this.rows, row, selection, this.callbacks);
+			row.append(
+				createSelectionCell(labelNode(node), selection, this.callbacks),
+				createKindCell(node.gpuDurationMicros === undefined ? 'not-timed' : 'timed', node.gpuDurationMicros === undefined ? 'Not timed' : 'Timed'),
+				createCell(node.gpuDurationMicros === undefined ? '-' : (node.gpuDurationMicros / 1000).toFixed(3), { column: 'numeric' }),
+			);
+			table.body.appendChild(row);
+		}
+		if (table.body.childElementCount === 0) table.body.appendChild(createEmptyTableRow(3, 'No timing-eligible passes.'));
+		section.appendChild(table.scroller);
+		return section;
+	}
+}

package/src/panelDomHelpers.ts

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

package/src/panelGraphLayout.ts

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

package/src/panelGraphRenderer.ts

@@ -0,0 +1,21 @@
+import type { GraphScene, GraphSceneElementId } from './panelGraphScene.ts';
+import type { Selection } from './panelTypes.ts';
+
+export type GraphRenderRequest = {
+    readonly scene: GraphScene;
+    readonly selected: Selection | undefined;
+    readonly hovered: Selection | undefined;
+    readonly fit: boolean;
+    readonly anchorElementId?: GraphSceneElementId;
+    readonly onSelect: (selection: Selection) => void;
+    readonly onHover: (selection: Selection | undefined) => void;
+    readonly onToggleGroup: (pathKey: string) => void;
+};
+
+export interface GraphRenderer {
+    render(request: GraphRenderRequest): void;
+    resize(): void;
+    fit(): void;
+    relayout(): void;
+    destroy(): void;
+}