80 lines
3.5 KiB
JavaScript
80 lines
3.5 KiB
JavaScript
import { Link } from 'react-router-dom'
|
|
import { GEN1, GEN2, GEN3, getAncestorAtPath, formatManualAncestorDisplay } from '../lib/pedigree'
|
|
|
|
function AncestorNodeView({ path, label, ancestors }) {
|
|
const node = getAncestorAtPath(ancestors, path)
|
|
|
|
if (!node) {
|
|
return (
|
|
<div className="flex h-16 w-full min-w-0 flex-col items-start justify-center gap-0.5 overflow-hidden rounded-md border border-border bg-surface-sunken px-3 py-2">
|
|
<span className="w-full truncate font-body text-xs text-text-secondary">{label}</span>
|
|
<span className="w-full truncate font-body text-sm text-text-secondary italic">Unknown</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (node.id != null) {
|
|
return (
|
|
<Link
|
|
to={`/herd/${node.id}`}
|
|
className="flex h-16 w-full min-w-0 flex-col items-start justify-center gap-0.5 overflow-hidden rounded-md border border-border bg-surface-raised px-3 py-2 hover:border-accent focus:outline-none focus:ring-2 focus:ring-accent"
|
|
>
|
|
<span className="w-full truncate font-body text-xs text-text-secondary">{label}</span>
|
|
<span className="w-full truncate font-body text-sm text-text-primary">
|
|
{node.name}
|
|
{node.farm ? ` (${node.farm})` : ''}
|
|
</span>
|
|
{node.ear_number ? (
|
|
<span className="w-full truncate font-body text-xs text-text-secondary">Ear #{node.ear_number}</span>
|
|
) : null}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="flex h-16 w-full min-w-0 flex-col items-start justify-center gap-0.5 overflow-hidden rounded-md border border-border bg-surface-sunken px-3 py-2">
|
|
<span className="w-full truncate font-body text-xs text-text-secondary">{label}</span>
|
|
<span className="w-full truncate font-body text-sm text-text-secondary italic">
|
|
{formatManualAncestorDisplay(node.name)}
|
|
</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Generation({ entries, ancestors }) {
|
|
return (
|
|
<div className="flex min-w-0 flex-1 flex-col justify-around gap-3">
|
|
{entries.map(({ path, slot, label }) => (
|
|
<AncestorNodeView key={slot} path={path} label={label} ancestors={ancestors} />
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// `generations` controls how many ancestor columns to render. The detail page
|
|
// uses 2 (parents + grandparents) to keep the inline tree compact; the full
|
|
// 3-generation tree lives on the dedicated print page.
|
|
function PedigreeTreeReadOnly({ subjectName, ancestors, generations = 3 }) {
|
|
// Each generation column is ~176px (incl. gap); narrower min-width for fewer
|
|
// generations lets the tree fit its column without horizontal scrolling.
|
|
const minWidth = generations >= 3 ? 720 : 544
|
|
|
|
return (
|
|
// The scroll container fills (and shrinks with) its column; the tree scrolls
|
|
// horizontally inside it rather than forcing the page wider and pushing the
|
|
// timeline column off-screen.
|
|
<div className="w-full overflow-x-auto p-4">
|
|
<div className="flex items-center gap-4" style={{ minWidth }}>
|
|
<div className="flex h-16 w-28 shrink-0 items-center justify-center rounded-md border-2 border-accent bg-surface px-3 text-center">
|
|
<span className="truncate font-body text-sm font-medium text-text-primary">{subjectName}</span>
|
|
</div>
|
|
<Generation entries={GEN1} ancestors={ancestors} />
|
|
{generations >= 2 && <Generation entries={GEN2} ancestors={ancestors} />}
|
|
{generations >= 3 && <Generation entries={GEN3} ancestors={ancestors} />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PedigreeTreeReadOnly
|