Compositional DAGs

Connect to a field inside a card. Keep each wire’s identity, even when two wires share the same endpoints. Then change the presentation without changing what the graph means.

RepresentationAllow row reorderingShow row graphics

11 routed crossings420 alignment error7 distinct wires

Seven illustrative wires and three declared identity transfers. Every connection is listed below.

100%

Teal: Customer · amber: Quantity · purple: Unit price. Circles mark the solved attachment points. Dashed wires in the collapsed view disclose proxy attachments. Drag to pan; use Fit to return to the whole graph.

Trace a connection upstream

3 wires · 1 declared transfer · complete within this illustrative graph

The two Customer input wires have distinct IDs. Following Customer through its declared copy transfer leaves Quantity and Unit price unhighlighted.

Navigate parts and ports with the keyboard

Inspect an interface ownerEnter an owner to navigate its interfaces; Escape returns to the owner.

Inspect all 7 connections

Illustrative wiring. All records have unknown evidence precision.
Select ID	Source port	Target port
	Order input / Customer / out	Copy fields / Customer / in
	Order input / Quantity / out	Copy fields / Quantity / in
	Order input / Unit price / out	Copy fields / Unit price / in
	Order input / Customer / out	Copy fields / Customer / in
	Copy fields / Customer / out	Invoice output / Customer / in
	Copy fields / Quantity / out	Invoice output / Quantity / in
	Copy fields / Unit price / out	Invoice output / Unit price / in

Layout diagnostics (2)

Some routes share undeclared segments. Every edge is retained; use the connection table to disambiguate.
Authored positions and order retained.

Keep the endpoints

Hide the row graphics or choose wire-only slots. The attachment coordinates stay fixed. Selecting, hovering, panning and zooming reuse the accepted solution.

Give the layout permission

The middle card starts in reverse order. Allow row reordering to optimize actual wire crossings and alignment. Rows, anchors and paths move together; fixed order is never silently relaxed.

Declare the dependency

A shared card creates no relationship between its fields. This fixture explicitly declares three identity transfers from input to output ports. It demonstrates graph semantics, not observed database provenance.

Use it in a chart

Prepare the semantic graph once. Solve when graph, view or measured geometry changes, then give the synchronous chart layout the accepted result.

TSX

import { NetworkCustomChart } from "semiotic/network" import { prepareCompositionalGraph, routeCompositionalGraph, compositionalLayoutOptions, compositionalDagLayout } from "semiotic/recipes/core" const prepared = prepareCompositionalGraph(graph) const solved = routeCompositionalGraph({ requestId: "layout-1", prepared, view, geometry, options: compositionalLayoutOptions({ mode: "optimize" }) }) // On an infeasible result, retain the last accepted solution. const layoutConfig = { prepared, solved, showParts: true } const chart = <NetworkCustomChart nodes={[...graph.nodes]} edges={[...graph.edges]} layout={compositionalDagLayout} layoutConfig={layoutConfig} frameProps={{ edgeIdentity: "id", edgeIdAccessor: "id" }} title="Field dependencies" accessibleTable />

The Full Code view includes this fixture’s complete graph, geometry, controls, paint and hit targets. The optimizer is a bounded heuristic. General compound optimization and flexible port permutations require another adapter.

See thecompositional API guidefor patches, workers and measurement, or thePipeline Explorer for a larger graph with HTML cards, notes and culling.