Root Cause Tree
A causal chain from symptom to candidate causes, each with a confidence band. Built on Tree, so it inherits the keyboard model rather than growing a second one.
src/components/ui/root-cause-tree.tsxAbout
From the component's own source, where it was written.
A causal chain: symptom at the root, candidate causes beneath it.
Built on Tree, so it inherits the keyboard model rather than growing a second one. What it adds is confidence — each branch carries a score, and the label renders it inline.
Confidence is shown as a band, never a bare percentage. These numbers come out of a correlation engine and are not calibrated probabilities; printing "87%" beside a guess lends it a precision it has not earned.
Install
npx astralyx-ui add root-cause-tree
Usage
import { RootCauseTree } from '@/components/ui/root-cause-tree'
<RootCauseTree causes={causes} />Composer
Change the props and the source below follows.
- Checkout error rate 4.2%
- Payment provider timeouts
- Provider status page reports degradation
- Retry budget exhausted after 3 attempts
- Connection pool saturation
- Recent deploy 4f2a1c9
<RootCauseTree causes={causes} />Examples
Analysis
<RootCauseTree causes={causes} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
RootCauseTree
A causal chain: symptom at the root, candidate causes beneath it.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| causes | CauseNode[] | required | { id, label, confidence?, detail?, children? }, recursive. |
| defaultExpanded | string[] | — | Defaults to the top level. |
| label | string | 'Root cause analysis' | Accessible name for the tree. |
Types
CauseNode
| Field | Type | Description |
|---|---|---|
| id | string | — |
| label | ReactNode | — |
| confidence? | number | 0 to 1, rendered as a band rather than a percentage — these come out of a correlation engine and are not calibrated probabilities. |
| detail? | ReactNode | — |
| children? | CauseNode[] | — |
Behaviour
| Topic | Detail | Description |
|---|---|---|
| keyboard | inherited from Tree | Arrow keys over visible rows, one tab stop for the whole tree. |