justin
ed263cf9a7
On a large tree the duplicate's other copy is usually off-screen, so flashing in place wasn't enough. Clicking the ×N badge now pans/zooms the view to center the other copy and flashes it on arrival; clicking again cycles through the remaining copies (for a person drawn 3+ times). Uses family-chart's exported handlers: cardToMiddle centers a datum (read from the target card_cont's bound x/y, falling back to its transform attr), keeping the current zoom level via getCurrentZoom. Verified against the lib: the svg's parent (f3Canvas) holds the zoom object, and cards are positioned by datum x/y — same coordinate space cardToMiddle expects. Falls back to an in-place flash if the zoom object isn't ready. Frontend only; supersedes the flash-only behavior. Signed-off-by: Justin Paul <justin@jpaul.me>
530 lines
22 KiB
TypeScript
530 lines
22 KiB
TypeScript
"use client";
|
||
|
||
// Vendored from family-chart/dist/styles (the package blocks the CSS subpath export).
|
||
import "./chart.css";
|
||
|
||
import Link from "next/link";
|
||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||
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 { Input } from "@/components/ui/input";
|
||
import { FanChart } from "@/components/fan-chart";
|
||
import { DepthControl } from "@/components/depth-control";
|
||
|
||
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);
|
||
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 searchParams = useSearchParams();
|
||
const treeId = params.id;
|
||
// The focused person can arrive in the URL (?focus=…) — e.g. coming back from
|
||
// a person page. Captured once at mount so syncing focus→URL doesn't refetch.
|
||
const initialFocus = useRef<string | null>(searchParams.get("focus"));
|
||
const containerRef = useRef<HTMLDivElement>(null);
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const chartRef = useRef<any>(null);
|
||
// family-chart's pan/zoom helpers (cardToMiddle, getCurrentZoom), captured at
|
||
// render — used to fly to a duplicate's other copy.
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const handlersRef = useRef<any>(null);
|
||
// Per-person cursor so repeated clicks on a ×N badge cycle through the copies.
|
||
const dupCycle = useRef<Map<string, number>>(new Map());
|
||
const [query, setQuery] = useState("");
|
||
|
||
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);
|
||
// The tree's default/home person — lets us offer a "recenter on default" jump.
|
||
const [homeId, setHomeId] = useState<string | null>(null);
|
||
const [mode, setMode] = useState<Mode>("landscape");
|
||
const [renderNote, setRenderNote] = useState<string | null>(null);
|
||
// How many generations to show around the focus, each independently settable
|
||
// (or "all"). ALL_DEPTH is just a number bigger than any real lineage; the
|
||
// chart only renders people that exist, so a high cap costs nothing.
|
||
const [ancDepth, setAncDepth] = useState(3); // ancestors (backwards)
|
||
const [progDepth, setProgDepth] = useState(2); // descendants (forwards)
|
||
const [ancAll, setAncAll] = useState(false);
|
||
const [progAll, setProgAll] = useState(false);
|
||
const ALL_DEPTH = 100;
|
||
const effAnc = ancAll ? ALL_DEPTH : ancDepth;
|
||
const effProg = progAll ? ALL_DEPTH : progDepth;
|
||
|
||
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, t] = 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 } } }),
|
||
api.GET("/api/v1/trees/{tree_id}", { params: { path: { tree_id: treeId } } }),
|
||
]);
|
||
if (cancelled) return;
|
||
const ppl = p.data ?? [];
|
||
const home = t.data?.home_person_id ?? null;
|
||
const homeId = home && ppl.some((x) => x.id === home) ? home : null;
|
||
setPeople(ppl);
|
||
setRels(r.data ?? []);
|
||
setEvents(e.data ?? []);
|
||
setHomeId(homeId);
|
||
// Honor an explicit ?focus first (came from a person page / a shared
|
||
// link), then the tree's default/home person, then the first person.
|
||
const fromUrl = initialFocus.current && ppl.some((x) => x.id === initialFocus.current)
|
||
? initialFocus.current
|
||
: null;
|
||
setFocusId((cur) => cur ?? fromUrl ?? homeId ?? 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 () => {
|
||
// Sanitize the graph before handing it to family-chart, which recurses
|
||
// through parents and will blow the stack (blank tree) on a cycle — e.g. a
|
||
// person edited into being their own ancestor.
|
||
const alive = new Set(people.map((pp) => pp.id));
|
||
const ok = (ids: string[], self: string) =>
|
||
[...new Set(ids)].filter((id) => alive.has(id) && id !== self);
|
||
|
||
// Build an acyclic set of parent edges: skip any edge that would make a
|
||
// person their own ancestor. Children are derived from the kept edges so
|
||
// parent/child stays consistent.
|
||
const parentsMap = new Map<string, string[]>();
|
||
const childrenMap = new Map<string, string[]>();
|
||
let dropped = 0;
|
||
const isAncestorOf = (ancestor: string, of: string): boolean => {
|
||
const stack = [...(parentsMap.get(of) ?? [])];
|
||
const seen = new Set<string>();
|
||
while (stack.length) {
|
||
const n = stack.pop()!;
|
||
if (n === ancestor) return true;
|
||
if (seen.has(n)) continue;
|
||
seen.add(n);
|
||
for (const p of parentsMap.get(n) ?? []) stack.push(p);
|
||
}
|
||
return false;
|
||
};
|
||
for (const pp of people) {
|
||
const accepted: string[] = [];
|
||
for (const par of ok(parentsOf(pp.id), pp.id)) {
|
||
// Edge "pp has parent par" loops if pp is already an ancestor of par.
|
||
if (isAncestorOf(pp.id, par)) {
|
||
dropped++;
|
||
continue;
|
||
}
|
||
accepted.push(par);
|
||
parentsMap.set(pp.id, accepted);
|
||
childrenMap.set(par, [...(childrenMap.get(par) ?? []), pp.id]);
|
||
}
|
||
parentsMap.set(pp.id, accepted);
|
||
}
|
||
|
||
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: years.get(pp.id) ?? "",
|
||
gender: pp.gender === "female" ? "F" : "M",
|
||
},
|
||
rels: {
|
||
spouses: ok(partnersOf(pp.id), pp.id),
|
||
parents: parentsMap.get(pp.id) ?? [],
|
||
children: childrenMap.get(pp.id) ?? [],
|
||
},
|
||
};
|
||
});
|
||
const f3 = await import("family-chart");
|
||
handlersRef.current = f3.handlers;
|
||
if (cancelled || !containerRef.current) return;
|
||
try {
|
||
containerRef.current.innerHTML = "";
|
||
const chart = f3.createChart(containerRef.current, data);
|
||
chart.setCardHtml().setCardDisplay([["first name", "last name"], ["birthday"]]);
|
||
if (mode === "portrait") chart.setOrientationVertical();
|
||
else chart.setOrientationHorizontal();
|
||
// Generations to show around the focus (configurable; see depth controls).
|
||
chart.setAncestryDepth?.(effAnc);
|
||
chart.setProgenyDepth?.(effProg);
|
||
// Default card click recenters the whole hourglass; sync focus for the
|
||
// "Open profile" link after every (re)build.
|
||
chart.setAfterUpdate?.(() => {
|
||
const md = chart.getMainDatum?.();
|
||
const id = md?.id ?? md?.data?.id;
|
||
if (id) setFocusId(id);
|
||
});
|
||
chartRef.current = chart;
|
||
if (focusId) chart.updateMainId(focusId);
|
||
chart.updateTree({ initial: true });
|
||
setRenderNote(
|
||
dropped > 0
|
||
? `Skipped ${dropped} conflicting parent link${dropped === 1 ? "" : "s"} (a person can't be their own ancestor). Open the people involved to fix the relationship.`
|
||
: null,
|
||
);
|
||
} catch (err) {
|
||
// Never leave a blank canvas — show a message and let them fix via the
|
||
// Family view / person pages.
|
||
console.error("tree render failed", err);
|
||
if (containerRef.current) containerRef.current.innerHTML = "";
|
||
setRenderNote(
|
||
"The tree couldn't be drawn — a relationship may be conflicting. Use the Family view to open the affected people and check their parents/children.",
|
||
);
|
||
}
|
||
})();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [status, mode, people, rels, events]);
|
||
|
||
// Apply depth changes to the already-built chart without a full rebuild
|
||
// (landscape/portrait only; the fan reads its own `generations` prop).
|
||
useEffect(() => {
|
||
if (mode === "fan" || !chartRef.current) return;
|
||
chartRef.current.setAncestryDepth?.(effAnc);
|
||
chartRef.current.setProgenyDepth?.(effProg);
|
||
chartRef.current.updateTree?.();
|
||
}, [effAnc, effProg, mode]);
|
||
|
||
// Jump the tree (or fan) to a person and rebuild the hourglass around them.
|
||
const goTo = useCallback(
|
||
(id: string) => {
|
||
setFocusId(id);
|
||
setQuery("");
|
||
if (mode !== "fan" && chartRef.current) {
|
||
chartRef.current.updateMainId?.(id);
|
||
chartRef.current.updateTree?.();
|
||
}
|
||
},
|
||
[mode],
|
||
);
|
||
|
||
// Click the "×N" duplicate badge to FLY to the person's other copy in the
|
||
// view (cycling through them on repeat clicks) and flash it on arrival. The
|
||
// same record is drawn in two places (a shared ancestor, or an intermarriage),
|
||
// and on a big tree the other copy is usually off-screen. Delegated on the
|
||
// container so it survives chart rebuilds; capture-phase + stopPropagation so a
|
||
// badge click flies instead of recentering.
|
||
useEffect(() => {
|
||
const el = containerRef.current;
|
||
if (!el) return;
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const data = (n: Element | null) => (n as any)?.__data__;
|
||
const idOf = (n: Element | null) => data(n)?.data?.id as string | undefined;
|
||
const xyOf = (cont: Element): { x: number; y: number } | null => {
|
||
const d = data(cont);
|
||
if (d && typeof d.x === "number" && typeof d.y === "number") return { x: d.x, y: d.y };
|
||
const m = /translate\(\s*([-\d.]+)[ ,]+([-\d.]+)/.exec(cont.getAttribute("transform") ?? "");
|
||
return m ? { x: parseFloat(m[1]), y: parseFloat(m[2]) } : null;
|
||
};
|
||
const flash = (cont: Element | null) => {
|
||
const card = cont?.querySelector(".card") as HTMLElement | null;
|
||
if (!card) return;
|
||
card.classList.remove("f3-card-flash");
|
||
void card.offsetWidth; // restart the animation on repeat clicks
|
||
card.classList.add("f3-card-flash");
|
||
window.setTimeout(() => card.classList.remove("f3-card-flash"), 1900);
|
||
};
|
||
|
||
function onClick(e: MouseEvent) {
|
||
const tag = (e.target as HTMLElement).closest?.(".f3-card-duplicate-tag");
|
||
if (!tag) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
const clicked = tag.closest(".card_cont");
|
||
const id = idOf(clicked);
|
||
if (!id) return;
|
||
const copies = Array.from(el!.querySelectorAll(".card_cont")).filter((c) => idOf(c) === id);
|
||
if (copies.length < 2) {
|
||
flash(clicked);
|
||
return;
|
||
}
|
||
// Advance from wherever we last landed (or the clicked card), skipping the
|
||
// clicked copy, so each click moves to the next other location.
|
||
const start = dupCycle.current.get(id) ?? copies.indexOf(clicked as Element);
|
||
let next = (start + 1) % copies.length;
|
||
if (copies[next] === clicked) next = (next + 1) % copies.length;
|
||
dupCycle.current.set(id, next);
|
||
const target = copies[next];
|
||
|
||
const handlers = handlersRef.current;
|
||
const svg = el!.querySelector("svg.main_svg") as SVGSVGElement | null;
|
||
const xy = xyOf(target);
|
||
let flew = false;
|
||
if (handlers?.cardToMiddle && svg && xy) {
|
||
try {
|
||
const rect = svg.getBoundingClientRect();
|
||
const scale = handlers.getCurrentZoom ? handlers.getCurrentZoom(svg).k : 1;
|
||
handlers.cardToMiddle({
|
||
datum: xy,
|
||
svg,
|
||
svg_dim: { width: rect.width, height: rect.height },
|
||
scale,
|
||
transition_time: 750,
|
||
});
|
||
flew = true;
|
||
} catch {
|
||
/* zoom not ready — fall back to flashing in place */
|
||
}
|
||
}
|
||
// Flash on arrival (after the fly), or immediately if we couldn't fly.
|
||
window.setTimeout(() => flash(target), flew ? 900 : 0);
|
||
}
|
||
el.addEventListener("click", onClick, true);
|
||
return () => el.removeEventListener("click", onClick, true);
|
||
}, []);
|
||
|
||
// Mirror the focused person into the URL (?focus=…) so navigating away and
|
||
// back — or sharing the link — keeps the tree centered where you left it.
|
||
// `replace` (not push) so each recenter doesn't pile up in browser history.
|
||
useEffect(() => {
|
||
if (!focusId || searchParams.get("focus") === focusId) return;
|
||
const sp = new URLSearchParams(searchParams.toString());
|
||
sp.set("focus", focusId);
|
||
router.replace(`/trees/${treeId}/tree?${sp.toString()}`, { scroll: false });
|
||
}, [focusId, searchParams, router, treeId]);
|
||
|
||
const matches = useMemo(() => {
|
||
const q = query.trim().toLowerCase();
|
||
if (!q) return [];
|
||
return people
|
||
.filter((p) => (p.primary_name ?? "").toLowerCase().includes(q))
|
||
.slice(0, 8);
|
||
}, [query, people]);
|
||
|
||
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-3">
|
||
<div className="flex items-center gap-3">
|
||
<h1 className="text-2xl font-semibold">Tree</h1>
|
||
<div className="relative">
|
||
<Input
|
||
value={query}
|
||
onChange={(e) => setQuery(e.target.value)}
|
||
placeholder="Find a person…"
|
||
className="w-56"
|
||
/>
|
||
{matches.length > 0 && (
|
||
<ul className="absolute z-20 mt-1 w-72 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
|
||
{matches.map((p) => (
|
||
<li key={p.id}>
|
||
<button
|
||
onClick={() => goTo(p.id)}
|
||
className="flex w-full items-center justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))]"
|
||
>
|
||
<span>{p.primary_name ?? "Unnamed"}</span>
|
||
{yearOf(p.id) && (
|
||
<span className="text-xs text-[var(--muted)]">{yearOf(p.id)}</span>
|
||
)}
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
)}
|
||
</div>
|
||
{homeId && focusId !== homeId && (
|
||
<button
|
||
onClick={() => goTo(homeId)}
|
||
className="text-sm text-bronze hover:underline"
|
||
title={`Recenter on the tree's default person (${nameOf(homeId)})`}
|
||
>
|
||
↩ Back to default person
|
||
<span className="text-[var(--muted)]"> · {nameOf(homeId)}</span>
|
||
</button>
|
||
)}
|
||
</div>
|
||
<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}?from=tree`}
|
||
className="text-sm text-bronze hover:underline"
|
||
>
|
||
Open {nameOf(focusId)} →
|
||
</Link>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{status === "ready" && (
|
||
<div className="flex flex-wrap items-center gap-x-6 gap-y-2 rounded-lg border border-[var(--border)] bg-[var(--surface)] px-4 py-2.5">
|
||
<span className="text-sm font-medium">Generations</span>
|
||
<DepthControl
|
||
label="Ancestors"
|
||
icon="↑"
|
||
value={ancDepth}
|
||
all={ancAll}
|
||
onValue={(v) => {
|
||
setAncAll(false);
|
||
setAncDepth(v);
|
||
}}
|
||
onAll={setAncAll}
|
||
/>
|
||
<DepthControl
|
||
label="Descendants"
|
||
icon="↓"
|
||
value={progDepth}
|
||
all={progAll}
|
||
onValue={(v) => {
|
||
setProgAll(false);
|
||
setProgDepth(v);
|
||
}}
|
||
onAll={setProgAll}
|
||
disabled={mode === "fan"}
|
||
/>
|
||
{mode === "fan" && (
|
||
<span className="text-xs text-[var(--muted)]">Fan shows ancestors only.</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>}
|
||
|
||
{renderNote && mode !== "fan" && (
|
||
<p className="rounded-md border border-bronze/40 bg-bronze/[0.06] px-3 py-2 text-sm text-bronze">
|
||
{renderNote}
|
||
</p>
|
||
)}
|
||
|
||
{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}
|
||
generations={Math.min(effAnc, 8)}
|
||
/>
|
||
</div>
|
||
) : (
|
||
<div
|
||
ref={containerRef}
|
||
className="f3 rounded-xl border border-[var(--border)]"
|
||
style={{ width: "100%", height: "74vh", background: "var(--surface)" }}
|
||
/>
|
||
)}
|
||
|
||
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-[var(--muted)]">
|
||
<span>
|
||
{mode === "fan"
|
||
? "Click an ancestor to recenter the fan."
|
||
: "Drag to pan · scroll to zoom · click a person to recenter."}
|
||
</span>
|
||
{mode !== "fan" && (
|
||
<div className="group relative">
|
||
<button
|
||
type="button"
|
||
className="underline decoration-dotted underline-offset-2 hover:text-bronze focus-visible:text-bronze focus-visible:outline-none"
|
||
>
|
||
Legend
|
||
</button>
|
||
<div className="invisible absolute bottom-full left-0 z-30 mb-2 w-80 rounded-lg border border-[var(--border)] bg-[var(--surface)] p-3 text-xs text-[var(--foreground)] opacity-0 shadow-lg transition-opacity group-hover:visible group-hover:opacity-100 group-focus-within:visible group-focus-within:opacity-100">
|
||
<ul className="space-y-2">
|
||
<li>
|
||
<span className="font-semibold text-bronze">×N</span> on a card — this
|
||
person appears N times in the current view. The same record is drawn in
|
||
two places because they connect through more than one line (a shared
|
||
ancestor, or an intermarriage).{" "}
|
||
<span className="text-[var(--muted)]">Click the ×N to fly to the other copies (click again to cycle).</span>
|
||
</li>
|
||
<li className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: "rgb(120,159,172)" }} /> male
|
||
</span>
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: "rgb(196,138,146)" }} /> female
|
||
</span>
|
||
<span className="inline-flex items-center gap-1">
|
||
<span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: "lightgray" }} /> sex not set
|
||
</span>
|
||
</li>
|
||
<li>Drag to pan, scroll to zoom, and click any card to recenter the tree on that person.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|