React Lot Genealogy

When a unit fails in the field, the first question is "what else shares its history?" This walks a lot backward through every process step — each split, merge, tool, and parent lot — and highlights the full ancestry of whatever you select. It is the component a recall runs on.

Lot genealogy — device KLV-7000

ReleasedIn processOn holdScrapped
WF-8801Wafer start25 pc · —WF-8802Wafer start25 pc · —LOT-A11Litho25 pc · SCAN-2LOT-A12Litho25 pc · SCAN-2LOT-B07Etch48 pc · ETCH-1LOT-C03Implant24 pc · IMP-ALOT-C04Implant24 pc · IMP-BLOT-D01Final test22 pc · PROBE-3
Trace for LOT-D01:7 lots in lineageLOT-D01 ← LOT-C03 ← LOT-B07 ← LOT-A11 ← WF-8801 ← LOT-A12 ← WF-8802

Installation

npx shadcn@latest add "https://kelvinui.com/registry/lot-genealogy.json"

Props

PropTypeDescription
nodesLotNode[]{ id, label, step, status, parents?, qty?, tool?, date? }
titlestringHeading
defaultSelectedstringNode whose trace is highlighted on mount

Splits, merges, and the trace path

The lineage is a directed acyclic graph, not a simple tree — a lot can split into several children (two implant lots from one etch lot) or be formed by a merge of several parents (an etch lot fed by two litho lots). Each node declares its parents; the component computes each node's generation as its longest path from a root, lays the graph out in left-to-right columns, and draws curved edges between generations.

Selecting any node walks its parents transitively and highlights the entire ancestry — the edges light up, unrelated nodes dim, and the footer lists the traced lots as a chain. That is the recall answer: given a bad final lot, exactly which upstream material and tools it touched. status (released, wip, hold, scrapped) colours each node, so a scrapped branch or a lot still on hold is visible at a glance. A cycle guard keeps a malformed graph from hanging the layout.

New components every week

Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.