import { ResolutionAtlasChart } from "semiotic/experimental/network-resolution/react"
Experimental Network Resolution reader.Resolution Atlas displays successive graph partitions in aligned panels. Rectangles represent groups of original nodes. Edges are drawn within each panel; gray lines between panels show group membership. Contiguous members share one rectangle across section boundaries. A component is drawn in separate parts only where other components interrupt its rows. The cycle strip reports cycle rank inside and between groups.
Boundary Loom displays the same prepared data as edge columns.Both readers retain original edge IDs, including parallel edges and self-loops.
Interactive example
This synthetic graph has 14 nodes and 18 edges, including a chain, a fan, a directed cycle, two parallel edges, and a self-loop. Each original edge is classified as internal to a group or crossing a group boundary. Select a representation to display its groups and edge annotations.
Page 3: 5 groups, 11 internal edges, and7 boundary edges. Total cycle rank: 5.
Hover a group to highlight the components in earlier and later generations that share its original nodes. Fill colors use the generation index; the tooltip reports node and edge counts. Click a group to list its members, show the grouping rule, and display its boundary path support.The source table provides the same inspection controls. Inspect e17 to see an alternative path for the direct r → z edge. On small screens, the drawing scrolls horizontally.
14 original nodes; 18 original edge records. Projected 18 of 18 edge columns/records, 33 of 33 page groups, 14 of 14 rails. Cycle rank uses the undirected multigraph retaining edge IDs. Pages are representations, not time. Stop: configured-end. Analysis coverage: complete. Source revision: fixture-v1.
14 original nodes; 18 original edge records. Projected 18 of 18 edge columns/records, 33 of 33 page groups, 14 of 14 rails. Cycle rank uses the undirected multigraph retaining edge IDs. Pages are representations, not time. Stop: configured-end. Analysis coverage: complete. Source revision: fixture-v1.
Page 0: 18 literal edges, 0 represented inside components, 0 omitted from this projection. Page 1: 12 literal edges, 6 represented inside components, 0 omitted from this projection. Page 2: 9 literal edges, 9 represented inside components, 0 omitted from this projection. Page 3: 8 literal edges, 10 represented inside components, 0 omitted from this projection.
Pan and zoom can clip projected marks; the table retains every projected edge record.
Contiguous member rows form one component rectangle, including across sections. Gaps occupied by other components split that rectangle into connected parts. Gray lines between pages indicate membership; directed graph edges remain inside each page.
Source ownership and edge history table
Displayed original edge records and their derived ownership history| Edge | Source | Target | First internal page | Owner history | Reading | Inspect |
|---|
| e18 | z | z | 0 | 0: internal; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e02 | a1 | a2 | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e03 | a2 | a3 | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e05 | f | l1 | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e06 | f | l2 | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e07 | f | l3 | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e15 | x | y | 1 | 0: boundary; 1: internal; 2: internal; 3: internal; 4: internal | Literal relation | |
| e10 | u | v | 2 | 0: boundary; 1: boundary; 2: internal; 3: internal; 4: internal | Literal relation | |
| e11 | v | w | 2 | 0: boundary; 1: boundary; 2: internal; 3: internal; 4: internal | Literal relation | |
| e12 | w | u | 2 | 0: boundary; 1: boundary; 2: internal; 3: internal; 4: internal | Literal relation | |
| e04 | a3 | f | 3 | 0: boundary; 1: boundary; 2: boundary; 3: internal; 4: internal | Literal relation | |
| e01 | r | a1 | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e08 | f | u | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e09 | f | u | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e13 | w | z | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e14 | r | x | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e16 | y | z | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
| e17 | r | z | Still boundary | 0: boundary; 1: boundary; 2: boundary; 3: boundary; 4: boundary | Literal relation | |
Displayed ownership blocks on page 3| Block | Original members | Internal edges | Boundary edges | Inspect |
|---|
| Left domain | 7 | 6 | 3 | |
| r | 1 | 0 | 3 | |
| Feedback component (3) | 3 | 3 | 3 | |
| Right domain | 2 | 1 | 2 | |
| z | 1 | 1 | 3 | |
Component Cutaway: directed path support
Select an entry–exit pair to highlight its endpoints and a supporting path in the original graph. Structural paths test what the connections allow. Observed journeys require one recorded journey through the component and both boundary connections.
Three of four pairs have a structural path. Only A → x1 → y1 → B and C → x2 → y2 → D were recorded. Switch to Observed journeys: x1 → y2 changes from yes to no.
Component Cutaway: Two entries, two exits
Directed paths inside the induced original component.Some supported pairs do not imply every boundary connection continues.
3 supported pairs / 4 queried / 4 total
The box encloses the original component. Arrows show actual edge direction. Selected entry and exit nodes have thick borders; thick paths show supporting evidence.
4 component nodes. 3supported / 4 queried /4 total pairs. Internal cycle rank:0.
Entry-to-exit support. A yes applies to at least one matching connection on each boundary.| Entry | Exit | Support | Evidence |
|---|
| x1 | y1 | yes | |
| x1 | y2 | yes | |
| x2 | y1 | no | |
| x2 | y2 | yes | |
Structural:yes.x1 → y1; edges x1y1
Export
The JSON export contains the source graph, group membership, edge histories, evidence, and view settings. The SVG export contains the current drawing, including its zoom and pan.
Preparation and rendering
Call prepareNetworkAtlas(spec, source) to validate and prepare the base atlas. Pass that atlas to prepareNetworkResolution and checkresult.ok before rendering. Both readers accept the resulting prepared data. Transitivity annotation requires compatible relation types with edge semantics that explicitly allow it. The annotation records an indirect path and retains the original edge.
JSX
import { prepareNetworkResolution } from "semiotic/experimental/network-resolution" import { ResolutionAtlasChart, resolutionChartProps } from "semiotic/experimental/network-resolution/react" import { renderChartWithEvidence } from "semiotic/server" // atlas is result.atlas from a successful prepareNetworkAtlas(atlasSpec, source) call. const result = prepareNetworkResolution(atlas, resolutionSpec, bindings) if (!result.ok) throw new Error(JSON.stringify(result.issues)) const props = { resolution: result.value, title: "Resolution Atlas" } <ResolutionAtlasChart {...props} /> const { svg, evidence } = renderChartWithEvidence("NetworkCustomChart", { ...resolutionChartProps(props, "resolution-atlas"), accessibleTable: true })
Theme and styles
All readers, Component Cutaway, NodeResolutionStrip, and EdgeWitnessGlyph use the active ThemeProvider for text, surfaces, edges, and semantic colors. Atlas hover fills use colors.sequential, which defaults to blues. Generation colors use the full analysis, so displaying fewer pages does not change a generation's color.
Pass the same appearance object to share styling across readers. Set generationColors to a scheme name, a color array indexed by generation, or a function of the generation number. Short arrays retain their last color for later generations. Style callbacks receive the mark's datum, role, generation, hover and selection state, and theme. Overrides apply after the theme and interaction defaults.
Internal edges use the theme's secondary color; boundary edges use its primary color. Override these with appearance.edgeColors.internal and appearance.edgeColors.boundary. Boundary Loom applies the colors to columns, endpoint markers, self-loops, collapsed-group caps, history cells, and its legend. Classification is recalculated for the selected page.
JSX
import { ThemeProvider } from "semiotic/themes/react" import type { ResolutionAppearance } from "semiotic/experimental/network-resolution/react" const appearance: ResolutionAppearance = { edgeColors: { internal: "#b07aa1", boundary: "#4e79a7" }, generationColors: ["#deebf7", "#9ecae1", "#4292c6", "#2171b5", "#084594"], styles: { component: ({ highlighted }) => ({ strokeWidth: highlighted ? 3 : 1 }), membership: { strokeDasharray: "3 2" }, supportNo: { strokeWidth: 2 } }, labelStyle: { fontWeight: 500 } } <ThemeProvider theme="dark"> <ResolutionAtlasChart resolution={result.value} appearance={appearance} /> </ThemeProvider> // Static exports receive the same theme and appearance. const { svg } = renderChartWithEvidence("NetworkCustomChart", { ...resolutionChartProps({ resolution: result.value, appearance }, "resolution-atlas"), theme: "dark" })
Props
| Prop | Type | Required | Default | Description |
|---|
resolution | PreparedNetworkResolution | — | — | Required prepared data, returned as result.value by prepareNetworkResolution(atlas, spec, bindings). |
pageId | string | — | — | Select the last representation in the default view. Omit to use the reader's page controls. |
view | ResolutionViewSpec | — | — | Displayed pages, row order, and limits on displayed groups and edges. These options do not modify the prepared analysis. |
width / height | number | — | — | Drawing dimensions in pixels. |
appearance | ResolutionAppearance | — | — | Shared generation palette, per-role mark styles, label styles, and selection opacity. Defaults follow ThemeProvider. |
hoverHighlight | boolean | — | — | Highlight Atlas components with overlapping original node membership across displayed generations. Enabled by default. |
onSelect | function | — | — | Receives a selection with source references and analysis revision, plus a target identifying the selected element. |
accessibleTable | boolean | — | — | Source ownership and original-edge history tables. Enabled by default. |
title / description / summary | string | — | — | Visible and accessible text describing the chart and its data. |
The view's maxGroups budget is shared across displayed pages. Each page receives a share; newer pages receive remainder slots. Display limits do not change the prepared groups, source counts, or query results.
Component Cutaway can also be rendered independently. It draws original nodes, directed internal edges, and outside neighbors. A neighbor with connections in both directions appears under both Incoming and Outgoing; both marks select the same original node. A single pair gets a compact verdict; multiple pairs get a bounded matrix. Select a cell or an Inspect button to highlight its entry, exit, and supporting path. The Path evidence control switches between structural reachability and observed contiguous journeys with boundary context. Thebasis prop sets the initial reading. Colors and styles use the active theme and appearance, including cutawayNode, cutawayEntry,cutawayExit, and cutawayWitness roles. A query returnsno only after searching its full declared scope. Missing evidence or an incomplete search returns unknown.