Lineage tree
Which work builds on which: a tier per generation, elbow wires that draw in, one focal node.
Workshop
- 2024Workshop paperAccepted
Journal
- 2025Journal versionIn reviewBuilds on Workshop paper.
- 2026Follow-up studyDesignedBuilds on Workshop paper.
Thesis
- 2027Thesis chapterPlannedBuilds on Journal version and Follow-up study.
- Where it starts
- Built on
- Latest
Features
- Tiers by the longest path from a root, so a paper sits one tier below the deepest work it builds on.
- Elbow wires (down, along a shared bus, down) measured from the laid-out nodes; they draw in once the tree is seen.
- One focal node, branches and leaves told apart by fill, with an optional legend and tier names.
- Nodes stay ordinary links and text: the tree reads without the wires.
Use it for
- Paper lineages: conference to journal.
- Version or fork histories, course prerequisites.
On this site
- Research: how the work connectsEach paper sits one tier below the paper it builds on.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { LineageTree } from 'runets'
<LineageTree label="Paper lineage" tiers={['Conference', 'Journal']} nodes={[
{ id: 'c', title: 'Workshop paper', sub: 'Accepted', focal: true },
{ id: 'j', title: 'Journal version', sub: 'In review', parents: ['c'] },
]} legend={[['focal', 'Where it starts'], ['leaf', 'Builds on it']]} />API
| Prop | Type | What it does |
|---|---|---|
nodes | LineageNode[] | { id, title, tag?, sub?, href?, parents?, focal? }; parents are ids. |
label | string | The figure’s accessible name. |
tiers | string[] | A name per tier, top down. |
legend | ['focal' | 'branch' | 'leaf', string][] | Swatches under the tree. |
caption | ReactNode | A line under the legend. |
Accessibility
- The wires are aria-hidden; each node says which nodes it builds on, for screen readers.
- Tiers are ordered lists; linked nodes take focus in reading order.
- Reduced motion shows the wires at once.
Source
The code is in src/kit/lineage-tree.tsx in runets, MIT licensed.