@zenfg/inspector 0.1.0-beta.3 → 0.1.0

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, snapshot);
+    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(
@@ -57,12 +64,14 @@ export function resolveGraphScene(
 ): GraphScene {
     const optionsKey = JSON.stringify([
         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, {
         groupsEnabled: graphView.groupsEnabled,
+        showResourceDeclarations: graphView.showResourceDeclarations,
         expandedGroupPaths: graphView.expandedGroupPaths,
     });
     graphSceneCache.set(graphView, { snapshot, optionsKey, scene });
@@ -74,6 +83,7 @@ export function fitGraph(graphView: GraphViewState): void {
 }
 
 export function resizeGraph(graphView: GraphViewState): void {
+    graphView.refreshTheme?.();
     graphView.renderer?.resize();
 }
 
@@ -83,9 +93,9 @@ export function destroyGraph(graphView: GraphViewState): void {
     graphSceneCache.delete(graphView);
 }
 
-function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDebugViewModel): void {
+export function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDebugViewModel, theme = GRAPH_VISUAL_THEME, showResourceDeclarations = true): void {
     if (!host) return;
-    const entries = createGraphLegend(snapshot);
+    const entries = createGraphLegend(snapshot, theme, showResourceDeclarations);
     const key = JSON.stringify(entries);
     if (host.dataset.legendKey === key) return;
     host.dataset.legendKey = key;
@@ -117,7 +127,7 @@ function renderGraphLegend(host: HTMLElement | undefined, snapshot: FrameGraphDe
             svg.setAttribute('aria-hidden', 'true');
             const polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
             polygon.setAttribute('points', entry.shape === 'tag'
-                ? '1,1 12,1 19,7 12,13 1,13'
+                ? '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);

package/src/panelGraphVisuals.ts

@@ -1,7 +1,7 @@
 import type cytoscape from 'cytoscape';
 
 import type { GraphScene, GraphSceneEdge, GraphSceneNode } from './panelGraphScene.ts';
-import { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
+import { GRAPH_VISUAL_THEME, type GraphVisualTheme } from './panelVisualTheme.ts';
 import { declarationEntrances, type FrameGraphDebugViewModel } from './debugCaptureModel.ts';
 
 export { GRAPH_VISUAL_THEME } from './panelVisualTheme.ts';
@@ -17,8 +17,9 @@ export const GRAPH_GEOMETRY = {
     groupPadding: 32,
     elkGroupPadding: { top: 46, right: 24, bottom: 24, left: 24 },
     edgeCornerRadius: 6,
-    outputWidth: 256,
-    outputLabelWidth: 144,
+    outputWidth: 208,
+    outputTipWidth: 24,
+    outputLabelWidth: 160,
 } as const;
 
 const ENDPOINT_EDGE_DISTANCES = 'endpoints' as unknown as cytoscape.Css.Edge['edge-distances'];
@@ -34,49 +35,57 @@ export type GraphLegendEntry = {
     readonly hollowArrow?: boolean;
 };
 
-const NODE_LEGEND_ENTRIES = {
-    render: nodeLegend('render', 'Render', GRAPH_VISUAL_THEME.render.stroke),
-    compute: nodeLegend('compute', 'Compute', GRAPH_VISUAL_THEME.compute.stroke),
-    copy: nodeLegend('copy', 'Copy', GRAPH_VISUAL_THEME.copy.stroke),
-    'clear-buffer': nodeLegend('clear', 'Clear', GRAPH_VISUAL_THEME.clear.stroke),
-    command: nodeLegend('command', 'Command', GRAPH_VISUAL_THEME.command.stroke),
-    'external-submission': { ...nodeLegend('external', 'External', GRAPH_VISUAL_THEME.external.stroke), shape: 'cut-rectangle' as const },
-} as const;
+export function createGraphLegend(snapshot: FrameGraphDebugViewModel, theme: GraphVisualTheme = GRAPH_VISUAL_THEME, showResourceDeclarations = true): readonly GraphLegendEntry[] {
+    const nodeEntries = {
+        render: nodeLegend('render', 'Render', theme.render.stroke),
+        compute: nodeLegend('compute', 'Compute', theme.compute.stroke),
+        copy: nodeLegend('copy', 'Copy', theme.copy.stroke),
+        'clear-buffer': nodeLegend('clear', 'Clear', theme.clear.stroke),
+        command: nodeLegend('command', 'Command', theme.command.stroke),
+        'external-submission': { ...nodeLegend('external', 'External', theme.external.stroke), shape: 'cut-rectangle' as const },
+    } as const;
 
-export function createGraphLegend(snapshot: FrameGraphDebugViewModel): readonly GraphLegendEntry[] {
     const entries: GraphLegendEntry[] = [];
     const passKinds = new Set(snapshot.nodes.map((node) => node.kind));
     for (const kind of ['render', 'compute', 'copy', 'clear-buffer', 'command', 'external-submission'] as const) {
-        if (passKinds.has(kind)) entries.push(NODE_LEGEND_ENTRIES[kind]);
+        if (passKinds.has(kind)) entries.push(nodeEntries[kind]);
     }
     const retained = new Set(snapshot.nodes.map((node) => node.id));
     const used = new Set([
         ...snapshot.accessEdges.filter((access) => retained.has(access.nodeId)).map((access) => access.resource.id),
         ...snapshot.roots.flatMap((root) => root.resource ? [root.resource.id] : []),
     ]);
-    const resources = snapshot.resources.filter((resource) => used.has(resource.id));
-    if (resources.length) entries.push({ group: 'Resources', key: 'declaration', label: 'Declaration', color: GRAPH_VISUAL_THEME.declaration.stroke, shape: 'ellipse' });
-    if (snapshot.roots.some((root) => root.resource)) entries.push({ group: 'Resources', key: 'output', label: 'Output', color: GRAPH_VISUAL_THEME.output.stroke, shape: 'tag' });
+    const resources = showResourceDeclarations ? snapshot.resources.filter((resource) => used.has(resource.id)) : [];
+    if (resources.length) entries.push({ group: 'Resources', key: 'declaration', label: 'Declaration', color: theme.declaration.stroke, shape: 'ellipse' });
+    if (snapshot.roots.some((root) => root.resource)) entries.push({ group: 'Resources', key: 'output', label: 'Output', color: theme.output.stroke, shape: 'tag' });
     if ([...snapshot.nodes, ...resources].some((item) => item.debugGroupId !== undefined)) {
-        entries.push({ group: 'Relationships', key: 'group', label: 'Group', color: GRAPH_VISUAL_THEME.group.stroke, shape: 'group' });
+        entries.push({ group: 'Relationships', key: 'group', label: 'Group', color: theme.group.stroke, shape: 'group' });
     }
     if (snapshot.edges.some((edge) => edge.kind === 'value')
-        || declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges).length
-        || snapshot.roots.some((root) => root.resource && root.resolution && (root.resolution.usesInitialContents || root.resolution.producerNodeIds.length))) {
-        entries.push(edgeLegend('flow', 'Resource Flow', GRAPH_VISUAL_THEME.dependency.value, 'solid'));
+        || (showResourceDeclarations && declarationEntrances(snapshot.nodes, snapshot.accessEdges, snapshot.edges).length)
+        || snapshot.roots.some((root) => root.resource && root.resolution && ((showResourceDeclarations && root.resolution.usesInitialContents) || root.resolution.producerNodeIds.length))) {
+        entries.push(edgeLegend('flow', 'Resource Flow', theme.dependency.value, 'solid'));
     }
     if (snapshot.edges.some((edge) => edge.kind === 'ordering')) {
         entries.push({
-            ...edgeLegend('ordering', 'Order', GRAPH_VISUAL_THEME.dependency.ordering, 'dotted'),
+            ...edgeLegend('ordering', 'Order', theme.dependency.ordering, 'dotted'),
             hollowArrow: true,
         });
     }
     return entries;
 }
 
-export function createGraphStyles(): cytoscape.StylesheetJson {
-    const theme = GRAPH_VISUAL_THEME;
+export function createGraphStyles(theme: GraphVisualTheme = GRAPH_VISUAL_THEME): cytoscape.StylesheetJson {
     return [
+        {
+            selector: 'core',
+            style: {
+                'active-bg-color': theme.activeBackground.color,
+                'active-bg-opacity': theme.activeBackground.opacity,
+                'active-bg-size': theme.activeBackground.size,
+            // Cytoscape accepts partial core styles; its Core type marks every property required.
+            } satisfies Partial<cytoscape.Css.Core> as cytoscape.Css.Core,
+        },
         {
             selector: 'node',
             style: {
@@ -85,14 +94,15 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'height': 'data(height)',
                 'label': 'data(displayLabel)',
                 'text-wrap': 'wrap',
-                'text-max-width': '160px',
-                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',
-                'font-size': GRAPH_GEOMETRY.baseFontSize,
+                'text-max-width': 'data(labelMaxWidth)',
+                'font-family': theme.fontFamily,
+                'font-size': (element: cytoscape.SingularElementArgument) => (element.data('labelFontSize') as number | undefined) ?? theme.fontSize,
+                'line-height': 1.2,
                 'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,
                 'color': theme.text,
                 'background-color': theme.surfaceRaised,
                 'border-color': theme.group.stroke,
-                'border-width': 1.25,
+                'border-width': theme.nodeBorderWidth,
                 'border-style': 'solid',
                 'text-valign': 'center',
                 'text-halign': 'center',
@@ -125,12 +135,13 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
         {
             selector: 'node[kind = "root"]',
             style: {
-                'shape': 'tag',
+                'shape': 'polygon',
+                'shape-polygon-points': `-1 -1 ${1 - 2 * GRAPH_GEOMETRY.outputTipWidth / GRAPH_GEOMETRY.outputWidth} -1 1 0 ${1 - 2 * GRAPH_GEOMETRY.outputTipWidth / GRAPH_GEOMETRY.outputWidth} 1 -1 1`,
                 'background-color': theme.output.fill,
                 'border-color': theme.output.stroke,
-                'text-max-width': `${GRAPH_GEOMETRY.outputLabelWidth}px`,
-                // Native tag shoulders sit at 5/8 of its width. Center text in the rectangular body.
-                'text-margin-x': -GRAPH_GEOMETRY.outputWidth * 3 / 16,
+                'text-max-width': 'data(labelMaxWidth)',
+                // Keep a short tip and center the label in the rectangular body.
+                'text-margin-x': -GRAPH_GEOMETRY.outputTipWidth / 2 * theme.fontSize / GRAPH_GEOMETRY.baseFontSize,
             },
         },
         {
@@ -144,13 +155,13 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             style: {
                 'background-color': theme.group.fill,
                 'border-color': theme.group.stroke,
-                'border-width': 2,
+                'border-width': theme.groupBorderWidth,
                 'color': theme.text,
             },
         },
         {
             selector: 'node[kind = "group"][collapsed = 0]',
-            style: expandedGroupStyle(theme.group.fill),
+            style: expandedGroupStyle(theme.group.fill, theme),
         },
         {
             selector: 'node[kind = "group"][collapsed = 0][depthBand = 1]',
@@ -159,16 +170,16 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
         {
             selector: 'edge',
             style: {
-                'width': 1.5,
+                'width': theme.edgeWidth,
                 'line-color': theme.dependency.value,
-                'line-opacity': 0.82,
+                'line-opacity': theme.edgeOpacity,
                 'target-arrow-color': theme.dependency.value,
                 'target-arrow-shape': 'triangle',
                 'target-arrow-fill': 'filled',
-                'arrow-scale': 0.8,
+                'arrow-scale': theme.arrowScale,
                 'curve-style': 'straight',
                 'label': 'data(displayLabel)',
-                'font-family': 'ui-monospace, SFMono-Regular, Consolas, Liberation Mono, monospace',
+                'font-family': theme.fontFamily,
                 'font-size': 10,
                 'min-zoomed-font-size': GRAPH_GEOMETRY.minimumZoomedFontSize,
                 'color': theme.text,
@@ -187,7 +198,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'target-arrow-color': theme.dependency.ordering,
                 'line-style': 'dotted',
                 'target-arrow-fill': 'hollow',
-                'line-opacity': 0.72,
+                'line-opacity': theme.orderingOpacity,
             },
         },
         {
@@ -211,7 +222,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             selector: 'node.semantic-hover',
             style: {
                 'border-color': theme.hover,
-                'border-width': 2,
+                'border-width': theme.hoverWidth,
                 'z-index': 15,
             },
         },
@@ -221,7 +232,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'line-color': theme.hover,
                 'target-arrow-color': theme.hover,
                 'line-opacity': 1,
-                'width': 2.5,
+                'width': theme.hoverWidth,
                 'z-index': 15,
             },
         },
@@ -229,7 +240,7 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
             selector: 'node.semantic-selected',
             style: {
                 'border-color': theme.selected,
-                'border-width': 3,
+                'border-width': theme.selectedWidth,
                 'opacity': 1,
                 'z-index': 20,
             },
@@ -240,14 +251,14 @@ export function createGraphStyles(): cytoscape.StylesheetJson {
                 'line-color': theme.selected,
                 'target-arrow-color': theme.selected,
                 'line-opacity': 1,
-                'width': 3,
+                'width': theme.selectedWidth,
                 'z-index': 20,
             },
         },
     ];
 }
 
-export function nodeDimensions(node: GraphSceneNode): { readonly width: number; readonly height: number } {
+function baseNodeDimensions(node: GraphSceneNode): { readonly width: number; readonly height: number } {
     switch (node.kind) {
         case 'pass':
             return { width: 184, height: node.label.includes('\n') ? 62 : 48 };
@@ -256,10 +267,68 @@ export function nodeDimensions(node: GraphSceneNode): { readonly width: number;
         case 'resource':
             return { width: 184, height: Math.max(58, node.label.split('\n').length * 17 + 24) };
         case 'group':
-            return node.collapsed ? { width: 224, height: 68 } : { width: 120, height: 80 };
+            return node.collapsed ? { width: 240, height: 80 } : { width: 120, height: 80 };
     }
 }
 
+export function nodeDimensions(node: GraphSceneNode, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): { readonly width: number; readonly height: number } {
+    const base = baseNodeDimensions(node);
+    const scale = theme.fontSize / GRAPH_GEOMETRY.baseFontSize;
+    return { width: base.width * scale, height: base.height * scale };
+}
+
+/** Enlarge short labels within the existing box; retain the theme size for dense text. */
+export function graphLabelFontSize(label: string, width: number, height: number, theme: GraphVisualTheme): number {
+    const context = graphTextContext();
+    if (context) context.font = theme.fontSize + 'px ' + theme.fontFamily;
+    const lines = label.split('\n');
+    const widest = Math.max(1, ...lines.map(line => context?.measureText(line).width ?? [...line].length * theme.fontSize * .62));
+    const widthScale = width / widest;
+    const heightScale = height / (lines.length * theme.fontSize * 1.2);
+    return Math.max(theme.fontSize, Math.floor(theme.fontSize * Math.min(1.25, widthScale, heightScale) * 4) / 4);
+}
+
+/** Wrap only the group name (up to two lines); keep the node-count row distinct. */
+export function fitCollapsedGroupLabel(label: string, width: number, theme: GraphVisualTheme): string {
+    const [name = '', ...summary] = label.split('\n');
+    const context = graphTextContext();
+    if (context) context.font = theme.fontSize + 'px ' + theme.fontFamily;
+    const measure = (text: string) => context?.measureText(text).width ?? [...text].length * theme.fontSize * .62;
+    const chars = [...name];
+    let split = 0;
+    while (split < chars.length && measure(chars.slice(0, split + 1).join('')) <= width) split++;
+    if (split === chars.length) return fitGraphLabel(label, width, theme);
+    // Prefer a word/path boundary without losing characters, including Unicode.
+    const prefix = chars.slice(0, split).join('');
+    const boundary = Math.max(prefix.lastIndexOf(' '), prefix.lastIndexOf('.'), prefix.lastIndexOf('/'));
+    if (boundary > prefix.length / 2) split = [...prefix.slice(0, boundary + 1)].length;
+    return fitGraphLabel([
+        chars.slice(0, split).join('').trimEnd(),
+        chars.slice(split).join('').trimStart(),
+        ...summary,
+    ].join('\n'), width, theme);
+}
+
+/** Fit the already semantic label to its available width after font changes. */
+export function fitGraphLabel(label: string, width: number, theme: GraphVisualTheme): string {
+    const context = graphTextContext();
+    if (context) context.font = theme.fontSize + 'px ' + theme.fontFamily;
+    const measure = (text: string) => context?.measureText(text).width ?? [...text].length * theme.fontSize * .62;
+    return label.split('\n').map(line => {
+        if (measure(line) <= width) return line;
+        const chars = [...line];
+        while (chars.length && measure(chars.join('') + '…') > width) chars.pop();
+        return chars.join('') + '…';
+    }).join('\n');
+}
+
+let textContext: CanvasRenderingContext2D | null | undefined;
+function graphTextContext(): CanvasRenderingContext2D | null {
+    if (typeof document === 'undefined') return null;
+    if (textContext === undefined) textContext = document.createElement('canvas').getContext('2d');
+    return textContext;
+}
+
 export function graphLayoutGeometryKey(scene: GraphScene): string {
     return JSON.stringify({
         topology: scene.topologyKey,
@@ -278,8 +347,8 @@ export function expandedGroupLabelMaxWidth(outerWidth: number): number {
     return Math.max(80, Math.floor(outerWidth - GRAPH_GEOMETRY.groupTitleInset * 2));
 }
 
-export function isOverviewGraphScale(zoom: number): boolean {
-    return GRAPH_GEOMETRY.baseFontSize * zoom < GRAPH_GEOMETRY.overviewFontThreshold;
+export function isOverviewGraphScale(zoom: number, theme: GraphVisualTheme = GRAPH_VISUAL_THEME): boolean {
+    return theme.fontSize * zoom < GRAPH_GEOMETRY.overviewFontThreshold;
 }
 
 function nodeLegend(key: string, label: string, color: string): GraphLegendEntry {
@@ -305,15 +374,16 @@ function passStyle(
     };
 }
 
-function expandedGroupStyle(backgroundColor: string): cytoscape.Css.Node {
+function expandedGroupStyle(backgroundColor: string, theme: GraphVisualTheme): cytoscape.Css.Node {
     const geometry = GRAPH_GEOMETRY;
     return {
         'background-color': backgroundColor,
-        'background-opacity': 0.34,
-        'border-color': GRAPH_VISUAL_THEME.group.stroke,
-        'border-width': 1.5,
+        'background-opacity': theme.groupOpacity,
+        'border-color': theme.group.stroke,
+        'border-width': theme.groupBorderWidth,
         'padding': `${geometry.groupPadding}px`,
-        'compound-sizing-wrt-labels': 'include',
+        'compound-sizing-wrt-labels': 'exclude',
+        'text-wrap': 'ellipsis',
         'min-width': '120px',
         'min-height': '80px',
         'text-valign': 'top-inside',
@@ -322,7 +392,7 @@ function expandedGroupStyle(backgroundColor: string): cytoscape.Css.Node {
         'text-margin-x': geometry.groupTitleInset - geometry.groupPadding * 2,
         'text-margin-y': geometry.groupTitleInset - geometry.groupPadding * 2,
         'line-height': geometry.groupTitleLineHeight,
-        'color': GRAPH_VISUAL_THEME.text,
+        'color': theme.text,
         'font-weight': 600,
     };
 }