Topology Map
A service dependency graph with health. Laid out in dependency layers, not by a force simulation — during an incident nobody wants to re-find the database because the layout moved.
src/components/ui/topology-map.tsxAbout
From the component's own source, where it was written.
A service dependency graph with health.
Laid out in layers by dependency depth rather than by a force simulation. A force layout puts the same architecture in a different place on every render, which makes it useless as a thing to learn — and during an incident nobody wants to re-find the database.
Depth is computed by walking edges, with a visited set: service graphs have cycles (an API that calls a worker that calls the API), and a naive recursion over one hangs the tab.
Edges carry the downstream node's health, so a red line means the thing it points at is unhealthy — you follow the colour to the cause.
Install
npx astralyx-ui add topology-map
Usage
import { TopologyMap } from '@/components/ui/topology-map'
<TopologyMap nodes={nodes} />Composer
Change the props and the source below follows.
- CheckoutDegraded
- PaymentsDown
<TopologyMap nodes={nodes} />Examples
Services
<TopologyMap nodes={nodes} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
TopologyMap
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | TopologyNode[] | required | { id, label, status, dependsOn?, meta? }. |
| healthyLabel | ReactNode | 'All services healthy' | Shown when nothing is degraded. |
Functions
| Function | Signature | Description |
|---|---|---|
| computeDepths | (nodes: TopologyNode[]) => Map<string, number> | Longest path to a root, guarded against cycles. |
Types
TopologyNode
A service dependency graph with health.
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| status | 'healthy' | 'degraded' | 'down' | 'unknown' | — |
| dependsOn? | string[] | Ids this depends on. |
| meta? | ReactNode | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| layout | dependency depth | Deterministic: the same architecture renders in the same place every time, so the picture is worth learning. |
| cycles | handled | Depth is computed with a visited set — service graphs have cycles, and a naive recursion over one hangs the tab. |
| edges | downstream health | An edge takes the colour of the node it points at, so you follow the red to the cause. |