example: add Genogram

[kumilingus]

Summary

• New examples/genogram-ts/ example: interactive genogram with automatic directed graph layout
• Dagre-based layout with couple containers and 5-phase crossing minimization
• Two link routing styles: fan (T-junction) and orthogonal (tree-like)
• Z-index based hover highlighting with lineage traversal
• Custom highlighters for deceased (X cross) and adopted (brackets) symbols
• Benchmark dataset (~1000 persons) for performance testing

Test plan

• yarn dev in examples/genogram-ts/ — verify all datasets render correctly
• Toggle between fan and orthogonal link styles
• Hover over persons to verify lineage highlighting
• Switch datasets via dropdown (including benchmark)
• yarn test-layout passes

[Copilot]

Pull request overview

Adds a new TypeScript/Vite example (examples/genogram-ts/) showcasing an interactive genogram (family tree) built on JointJS + @joint/layout-directed-graph, including custom dagre ordering, link routing styles, and symbol/lineage highlighting.

Changes:

• Introduces a full genogram demo app (custom shapes/links, layout pipeline, hover lineage highlighting, and symbol highlighters).
• Adds multiple datasets (including a large benchmark) plus a Node-based layout test script.
• Adds documentation (README + detailed tutorial) and wires the example into the workspace/yarn lockfile.

Reviewed changes

Copilot reviewed 19 out of 22 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
yarn.lock	Adds workspace entry for the new example and updates TS resolution entries.
examples/genogram-ts/package.json	Defines the example package, dev/build scripts, and dependencies.
examples/genogram-ts/tsconfig.json	TS compiler settings for the example source.
examples/genogram-ts/index.html	App shell with dataset dropdown, link-style toggle, and logo link.
examples/genogram-ts/src/main.ts	App bootstrap: loads datasets, runs layout, toggles link style, fits content.
examples/genogram-ts/src/data.ts	Defines the genogram data model and derives parent/child + mate links.
examples/genogram-ts/src/theme.ts	Centralizes sizes/colors/z-index defaults and link-style overrides.
examples/genogram-ts/src/shapes.ts	Custom person element shapes and link shapes used by the demo.
examples/genogram-ts/src/utils.ts	Person element creation, lineage highlighting, and a traversal graph builder.
examples/genogram-ts/src/highlighters.ts	Custom highlighters for deceased/adopted markers.
examples/genogram-ts/src/styles.css	Layout + hover highlighting/dimming styles.
examples/genogram-ts/src/layout/index.ts	Genogram layout pipeline (containers, dagre, routing, mate/identical links).
examples/genogram-ts/src/layout/minimize-crossings.ts	Multi-phase custom crossing minimization for dagre ordering.
examples/genogram-ts/src/families/thompson.json	Example dataset (multi-generational, includes twins/adoption/deceased).
examples/genogram-ts/src/families/british-royals.json	Example dataset (real-world family).
examples/genogram-ts/src/families/relationship-chart.json	Example dataset (role-labeled relationships).
examples/genogram-ts/scripts/test-layout.cts	Node script to run layout and detect crossings without a browser.
examples/genogram-ts/assets/jointjs-logo-black.svg	Adds the logo asset used in the example page.
examples/genogram-ts/README.md	Quickstart, structure, data format, and layout test instructions.
examples/genogram-ts/TUTORIAL.md	Deep-dive explanation of the layout approach and implementation.
examples/genogram-ts/.gitignore	Ignores build output (dist).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.