Commit Graph

The branch graph beside a commit list. Lanes are held by the commit each one is waiting for, which is what keeps a branch on a single vertical line instead of drifting sideways at every merge.

src/components/ui/commit-graph.tsx

About

From the component's own source, where it was written.

The branch graph beside a commit list.

Lanes are assigned by walking the list newest-first and keeping a set of "open" lanes, each waiting for a specific commit. When a commit arrives it takes the lane that was waiting for it — that is what keeps a branch on one vertical line instead of drifting sideways every merge.

A commit with two parents keeps its lane for the first and opens a new one for the second, which is why a merge shows as a curve rejoining the trunk.

Rendered as one SVG per row rather than a single tall SVG, so rows can carry ordinary DOM content beside the graph and stay selectable.

Install

npx astralyx-ui add commit-graph

Usage

import { CommitGraph } from '@/components/ui/commit-graph'

<CommitGraph commits={commits} />

Composer

Change the props and the source below follows.

Merge pull request #412 from fix/input-padding

4f2a1c9· Ada Lovelace· last month

Derive field padding from control height

2c8d4e1· Ada Lovelace· last month

Add squircle corners to controls

9b1e77a· Grace Hopper· last month

Drop Radix, add own Slot primitive

7a0c1f3· Alan Turing· last month

Initial component scaffold

1d5b9e0· Ada Lovelace· last month

Props

commits

tsx

<CommitGraph commits={commits} />

Examples

History

tsx

<CommitGraph commits={commits} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`CommitGraph`

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
commits	GraphCommit[]	required	`{ sha, message, parents, author?, date?, refs? }`, newest first.
locale	string	'en-GB'	—

Types

`GraphCommit`

The branch graph beside a commit list.

Field	Type	Description
sha	string	—
message	ReactNode	—
parents	string[]	The first parent inherits the lane; each additional one opens a lane and draws the merge curve. A commit with two parents renders as a hollow node.
author?	string	—
date?	Date	—
refs?	ReactNode	Branch or tag heads to show as chips.

Behaviour

Topic	Detail	Description
layout	internal	One SVG per row rather than a single tall one, so rows keep ordinary DOM content beside the graph and stay selectable.