Recipes
Short patterns beyond the minimal GraphCanvas example: ghost layer, focus/dim, path highlighting, semantic styles, and fullscreen.
These recipes assume you already followed SvelteKit integration. Prop names match API reference / published GraphRendererProps.
Ghost layer (rejected / overlay)
Pass ghostNodes and ghostEdges alongside the main graph. Toggle visibility with showGhostLayer so users can show or hide rejected traversals without rebuilding data.
Focus and dim
Set focusNodeIds and optionally focusEdgeIds to define the “in scope” set. With dimOutOfScope=true, nodes and edges outside that set render de-emphasized. Combine with your own
filter UI to drive the id arrays.
Path highlighting
Use pathNodeIds and pathEdges (or pinnedNodeIds for persistent emphasis) to
highlight a reasoning path or search result. Edge entries should match the keys you would pass to graphCanvasEdgeKey for styling consistency.
Semantic style maps
Supply nodeSemanticStyles and edgeSemanticStyles keyed by node id and edge key to encode
status, phase, or evaluation results without mutating core GraphNode labels. Keeps adapters stable when
theming changes.
Fullscreen
Wire isFullscreen and onToggleFullscreen to your app’s fullscreen state (browser Fullscreen API
or layout wrapper). The canvas toolbar shows an entry when onToggleFullscreen is provided.
Reasoning → canvas
When results come from @restormel/graph-reasoning-extensions, map diff or evaluation output into the props above at your adapter boundary — the canvas stays unaware of contracts types.