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>
2026-06-06 23:07:02 -04:00
parent 2f21e767f3
commit bfa6c0782a
7 changed files with 1457 additions and 11 deletions
@@ -0,0 +1,127 @@
+"use client";
+
+// Vendored from family-chart/dist/styles (the package blocks the CSS subpath export).
+import "./chart.css";
+
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+
+import { api } from "@/lib/api/client";
+import type { components } from "@/lib/api/schema";
+
+type Relationship = components["schemas"]["RelationshipRead"];
+type Event = components["schemas"]["EventRead"];
+
+function splitName(name: string | null | undefined): [string, string] {
+  const t = (name ?? "").trim().split(/\s+/).filter(Boolean);
+  if (t.length <= 1) return [name ?? "", ""];
+  return [t.slice(0, -1).join(" "), t[t.length - 1]];
+}
+
+export default function TreePage() {
+  const router = useRouter();
+  const params = useParams<{ id: string }>();
+  const treeId = params.id;
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [status, setStatus] = useState<"loading" | "empty" | "ready" | "error">("loading");
+
+  useEffect(() => {
+    let cancelled = false;
+
+    (async () => {
+      const p = await api.GET("/api/v1/trees/{tree_id}/persons", {
+        params: { path: { tree_id: treeId } },
+      });
+      if (p.response.status === 401) {
+        router.push("/login");
+        return;
+      }
+      const [r, e] = await Promise.all([
+        api.GET("/api/v1/trees/{tree_id}/relationships", { params: { path: { tree_id: treeId } } }),
+        api.GET("/api/v1/trees/{tree_id}/events", { params: { path: { tree_id: treeId } } }),
+      ]);
+      const people = p.data ?? [];
+      const rels: Relationship[] = r.data ?? [];
+      const events: Event[] = e.data ?? [];
+      if (people.length === 0) {
+        if (!cancelled) setStatus("empty");
+        return;
+      }
+
+      const parentsOf = (id: string) =>
+        rels.filter((x) => x.type === "parent_child" && x.person_to_id === id).map((x) => x.person_from_id);
+      const childrenOf = (id: string) =>
+        rels.filter((x) => x.type === "parent_child" && x.person_from_id === id).map((x) => x.person_to_id);
+      const partnersOf = (id: string) =>
+        rels
+          .filter((x) => x.type === "partnership" && (x.person_from_id === id || x.person_to_id === id))
+          .map((x) => (x.person_from_id === id ? x.person_to_id : x.person_from_id));
+
+      const birthYear = new Map<string, string>();
+      for (const ev of events) {
+        if (ev.person_id && ev.event_type === "birth" && !birthYear.has(ev.person_id)) {
+          const y = ev.date_start ? ev.date_start.slice(0, 4) : ev.date_value ?? "";
+          if (y) birthYear.set(ev.person_id, y);
+        }
+      }
+
+      const data = people.map((pp) => {
+        const [fn, ln] = splitName(pp.primary_name);
+        return {
+          id: pp.id,
+          data: {
+            "first name": fn || "Unnamed",
+            "last name": ln,
+            birthday: birthYear.get(pp.id) ?? "",
+            gender: pp.gender === "female" ? "F" : "M",
+          },
+          rels: {
+            spouses: partnersOf(pp.id),
+            parents: parentsOf(pp.id),
+            children: childrenOf(pp.id),
+          },
+        };
+      });
+
+      if (cancelled || !containerRef.current) return;
+      try {
+        const f3 = await import("family-chart");
+        containerRef.current.innerHTML = "";
+        const chart = f3.createChart(containerRef.current, data);
+        chart.setCardHtml().setCardDisplay([["first name", "last name"], ["birthday"]]);
+        chart.updateTree({ initial: true });
+        if (!cancelled) setStatus("ready");
+      } catch {
+        if (!cancelled) setStatus("error");
+      }
+    })().catch(() => {
+      if (!cancelled) setStatus("error");
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [router, treeId]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <h1 className="text-2xl font-semibold">Tree</h1>
+        <span className="text-sm text-[var(--muted)]">
+          Drag to pan · scroll to zoom · click a person to recenter
+        </span>
+      </div>
+      {status === "empty" && (
+        <p className="text-[var(--muted)]">
+          No people yet — add some under People, or import a GEDCOM.
+        </p>
+      )}
+      {status === "error" && <p className="text-[var(--muted)]">Could not render the tree.</p>}
+      <div
+        ref={containerRef}
+        className="f3 rounded-xl border border-[var(--border)]"
+        style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
+      />
+    </div>
+  );
+}