Tree layout toggles (landscape/portrait/fan), card->profile, server search
Tree page gets Landscape/Portrait/Fan toggles: landscape & portrait via family-chart's orientation; a hand-rolled radial Fan chart of ancestors (rings per generation, click to recenter). Clicking a card recenters and updates an 'Open <name> →' link to that person's profile. The People directory search now hits the server-side pg_trgm fuzzy endpoint (debounced) so it spans the whole tree, not just the loaded page. 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:
@@ -34,6 +34,7 @@ export default function FamilyViewPage() {
|
||||
const [ready, setReady] = useState(false);
|
||||
const [focusId, setFocusId] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
const [results, setResults] = useState<Person[] | null>(null); // server fuzzy search
|
||||
const [firstName, setFirstName] = useState("");
|
||||
// Inline add-relative form: which anchor + kind is open, and the typed name.
|
||||
// `key` keeps each empty slot's inline form independent (a person has 2
|
||||
@@ -65,6 +66,22 @@ export default function FamilyViewPage() {
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
// Debounced server-side fuzzy search (pg_trgm) across the whole tree.
|
||||
useEffect(() => {
|
||||
const q = search.trim();
|
||||
if (!q) {
|
||||
setResults(null);
|
||||
return;
|
||||
}
|
||||
const t = setTimeout(async () => {
|
||||
const { data } = await api.GET("/api/v1/trees/{tree_id}/persons", {
|
||||
params: { path: { tree_id: treeId }, query: { q } },
|
||||
});
|
||||
setResults(data ?? []);
|
||||
}, 250);
|
||||
return () => clearTimeout(t);
|
||||
}, [search, treeId]);
|
||||
|
||||
const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
|
||||
const parentsOf = (id: string) =>
|
||||
rels.filter((r) => r.type === "parent_child" && r.person_to_id === id).map((r) => r.person_from_id);
|
||||
@@ -265,10 +282,9 @@ export default function FamilyViewPage() {
|
||||
const sorted = [...people].sort((a, b) =>
|
||||
(a.primary_name ?? "").localeCompare(b.primary_name ?? ""),
|
||||
);
|
||||
const matches = search
|
||||
? sorted.filter((p) => (p.primary_name ?? "").toLowerCase().includes(search.toLowerCase()))
|
||||
: sorted;
|
||||
const shown = matches.slice(0, 200); // cap DOM nodes; refine search to narrow
|
||||
// Server fuzzy results when searching; otherwise the loaded set.
|
||||
const directory = results ?? sorted;
|
||||
const shown = directory.slice(0, 200); // cap DOM nodes; refine search to narrow
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
@@ -358,9 +374,9 @@ export default function FamilyViewPage() {
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
{matches.length > shown.length && (
|
||||
{directory.length > shown.length && (
|
||||
<div className="border-t border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-xs text-[var(--muted)]">
|
||||
Showing {shown.length} of {matches.length} — refine your search to narrow.
|
||||
Showing {shown.length} of {directory.length} — refine your search to narrow.
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
@@ -3,14 +3,19 @@
|
||||
// Vendored from family-chart/dist/styles (the package blocks the CSS subpath export).
|
||||
import "./chart.css";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { api } from "@/lib/api/client";
|
||||
import type { components } from "@/lib/api/schema";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { FanChart } from "@/components/fan-chart";
|
||||
|
||||
type Person = components["schemas"]["PersonRead"];
|
||||
type Relationship = components["schemas"]["RelationshipRead"];
|
||||
type Event = components["schemas"]["EventRead"];
|
||||
type Mode = "landscape" | "portrait" | "fan";
|
||||
|
||||
function splitName(name: string | null | undefined): [string, string] {
|
||||
const t = (name ?? "").trim().split(/\s+/).filter(Boolean);
|
||||
@@ -23,11 +28,16 @@ export default function TreePage() {
|
||||
const params = useParams<{ id: string }>();
|
||||
const treeId = params.id;
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [rels, setRels] = useState<Relationship[]>([]);
|
||||
const [events, setEvents] = useState<Event[]>([]);
|
||||
const [status, setStatus] = useState<"loading" | "empty" | "ready" | "error">("loading");
|
||||
const [focusId, setFocusId] = useState<string | null>(null);
|
||||
const [mode, setMode] = useState<Mode>("landscape");
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
(async () => {
|
||||
const p = await api.GET("/api/v1/trees/{tree_id}/persons", {
|
||||
params: { path: { tree_id: treeId } },
|
||||
@@ -40,31 +50,56 @@ export default function TreePage() {
|
||||
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);
|
||||
}
|
||||
if (cancelled) return;
|
||||
const ppl = p.data ?? [];
|
||||
setPeople(ppl);
|
||||
setRels(r.data ?? []);
|
||||
setEvents(e.data ?? []);
|
||||
setFocusId((cur) => cur ?? ppl[0]?.id ?? null);
|
||||
setStatus(ppl.length ? "ready" : "empty");
|
||||
})().catch(() => !cancelled && setStatus("error"));
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router, treeId]);
|
||||
|
||||
const byId = useMemo(() => new Map(people.map((p) => [p.id, p])), [people]);
|
||||
const parentsOf = useCallback(
|
||||
(id: string) =>
|
||||
rels.filter((x) => x.type === "parent_child" && x.person_to_id === id).map((x) => x.person_from_id),
|
||||
[rels],
|
||||
);
|
||||
const childrenOf = useCallback(
|
||||
(id: string) =>
|
||||
rels.filter((x) => x.type === "parent_child" && x.person_from_id === id).map((x) => x.person_to_id),
|
||||
[rels],
|
||||
);
|
||||
const partnersOf = useCallback(
|
||||
(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)),
|
||||
[rels],
|
||||
);
|
||||
const years = useMemo(() => {
|
||||
const m = new Map<string, string>();
|
||||
for (const ev of events) {
|
||||
if (ev.person_id && ev.event_type === "birth" && !m.has(ev.person_id)) {
|
||||
const y = ev.date_start ? ev.date_start.slice(0, 4) : ev.date_value ?? "";
|
||||
if (y) m.set(ev.person_id, y);
|
||||
}
|
||||
}
|
||||
return m;
|
||||
}, [events]);
|
||||
const nameOf = useCallback((id: string) => byId.get(id)?.primary_name ?? "Unknown", [byId]);
|
||||
const yearOf = useCallback((id: string) => years.get(id) ?? "", [years]);
|
||||
|
||||
// family-chart for landscape/portrait. Intentionally not keyed on focusId —
|
||||
// card clicks recenter via updateMainId without rebuilding the chart.
|
||||
useEffect(() => {
|
||||
if (status !== "ready" || mode === "fan" || !containerRef.current) return;
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
const data = people.map((pp) => {
|
||||
const [fn, ln] = splitName(pp.primary_name);
|
||||
return {
|
||||
@@ -72,56 +107,98 @@ export default function TreePage() {
|
||||
data: {
|
||||
"first name": fn || "Unnamed",
|
||||
"last name": ln,
|
||||
birthday: birthYear.get(pp.id) ?? "",
|
||||
birthday: years.get(pp.id) ?? "",
|
||||
gender: pp.gender === "female" ? "F" : "M",
|
||||
},
|
||||
rels: {
|
||||
spouses: partnersOf(pp.id),
|
||||
parents: parentsOf(pp.id),
|
||||
children: childrenOf(pp.id),
|
||||
},
|
||||
rels: { spouses: partnersOf(pp.id), parents: parentsOf(pp.id), children: childrenOf(pp.id) },
|
||||
};
|
||||
});
|
||||
|
||||
const f3 = await import("family-chart");
|
||||
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");
|
||||
});
|
||||
|
||||
containerRef.current.innerHTML = "";
|
||||
const chart = f3.createChart(containerRef.current, data);
|
||||
chart
|
||||
.setCardHtml()
|
||||
.setCardDisplay([["first name", "last name"], ["birthday"]])
|
||||
.setOnCardClick((_e: unknown, d: { data?: { id?: string } }) => {
|
||||
const id = d?.data?.id;
|
||||
if (id) {
|
||||
setFocusId(id);
|
||||
chart.updateMainId(id);
|
||||
chart.updateTree();
|
||||
}
|
||||
});
|
||||
if (mode === "portrait") chart.setOrientationVertical();
|
||||
else chart.setOrientationHorizontal();
|
||||
if (focusId) chart.updateMainId(focusId);
|
||||
chart.updateTree({ initial: true });
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [router, treeId]);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [status, mode, people, rels, events]);
|
||||
|
||||
const ModeButton = ({ m, label }: { m: Mode; label: string }) => (
|
||||
<button
|
||||
onClick={() => setMode(m)}
|
||||
className={`rounded-md px-3 py-1.5 text-sm transition-colors ${
|
||||
mode === m ? "bg-bronze text-paper" : "text-[var(--muted)] hover:text-[var(--foreground)]"
|
||||
}`}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<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 className="flex items-center gap-3">
|
||||
<div className="flex items-center rounded-lg border border-[var(--border)] p-0.5">
|
||||
<ModeButton m="landscape" label="Landscape" />
|
||||
<ModeButton m="portrait" label="Portrait" />
|
||||
<ModeButton m="fan" label="Fan" />
|
||||
</div>
|
||||
{focusId && (
|
||||
<Link
|
||||
href={`/trees/${treeId}/persons/${focusId}`}
|
||||
className="text-sm text-bronze hover:underline"
|
||||
>
|
||||
Open {nameOf(focusId)} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{status === "empty" && (
|
||||
<p className="text-[var(--muted)]">
|
||||
No people yet — add some under People, or import a GEDCOM.
|
||||
</p>
|
||||
<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)" }}
|
||||
/>
|
||||
|
||||
{status === "ready" && mode === "fan" && focusId ? (
|
||||
<div className="rounded-xl border border-[var(--border)] bg-[var(--surface)] p-4">
|
||||
<FanChart
|
||||
focusId={focusId}
|
||||
parentsOf={parentsOf}
|
||||
nameOf={nameOf}
|
||||
yearOf={yearOf}
|
||||
onSelect={setFocusId}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="f3 rounded-xl border border-[var(--border)]"
|
||||
style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<p className="text-sm text-[var(--muted)]">
|
||||
{mode === "fan"
|
||||
? "Click an ancestor to recenter the fan."
|
||||
: "Drag to pan · scroll to zoom · click a person to recenter."}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user