Add an interactive Tree view (pan/zoom genealogy chart)
Researched how FamilySearch/Geni/MyHeritage lay out trees (switchable pedigree/portrait/fan, an interactive canvas with pan/zoom + click-to-recenter, gender colors, birth-death years) and built a real Tree page on the MIT d3 library family-chart instead of a flat list. Ancestors + descendants around a focus person, click any card to recenter, drag to pan, scroll to zoom — scales to large imported trees. Tree is now the first per-tree sidebar item and the default when opening a tree; People keeps the searchable directory + add/edit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
This commit is contained in:
@@ -77,7 +77,7 @@ export default function TreesPage() {
|
||||
<li key={tree.id}>
|
||||
<Card className="transition-colors hover:border-bronze/50">
|
||||
<CardContent className="flex items-center justify-between p-4">
|
||||
<Link href={`/trees/${tree.id}`} className="min-w-0 flex-1">
|
||||
<Link href={`/trees/${tree.id}/tree`} className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium">{tree.name}</div>
|
||||
<div className="text-xs uppercase tracking-wide text-bronze">
|
||||
{tree.visibility}
|
||||
|
||||
Reference in New Issue
Block a user