How 1munzevi0/soy_agaci works
Soy Ağacı is a browser-based family-tree prototype. A visitor explores a pan-and-zoom tree, selects a person to view a profile, can make that person the new center, and can reset to the default focus. The primary App builds a generated family model into a viewport-aware graph and renders it; a separate FamilyTree component uses a fixed sample dataset. The sampled code supports these two branches, but does not establish that the fixed-data view is mounted by the app entry point.
Main entry points: App.tsx Tree canvas · FamilyTree.tsx Fixed tree view · layout.ts Graph layout · main.tsx React entry
Components 18
App and interaction
- React entry
src/main.tsx - Tree canvas
src/App.tsx
Family data
- Generated family
src/lib/family.ts - Sample family
src/data/familyData.ts
Graph construction
- Graph layout
src/lib/layout.ts
Tree rendering
- Fixed tree view
src/components/FamilyTree.tsx - Person cards
src/components/PersonNode.tsx - Distant nodes
src/components/DotNode.tsx - Junction nodes
src/components/JunctionNode.tsx - Region nodes
src/components/RegionNode.tsx - Family edges
src/components/FamilyEdge.tsx - Header and reset
src/components/Header.tsx - Usage hints
src/components/HintBar.tsx - Sample person cards
src/components/nodes/PersonCardNode.tsx - Sample distant nodes
src/components/nodes/DistantNode.tsx - Sample tree edges
src/components/edges/FamilyEdge.tsx - Dashed edge
src/components/edges/DashedEdge.tsx
Other components
- Visitor
Connections 17
- Visitor → React entry: opens app
src/main.tsx - React entry → Tree canvas: renders
src/main.tsx - Tree canvas → Generated family: reads family
src/App.tsx - Tree canvas → Graph layout: builds and decorates
src/App.tsx - Graph layout → Generated family: queries relations
src/lib/layout.ts - Tree canvas → Person cards: registers node
src/App.tsx - Tree canvas → Distant nodes: registers node
src/App.tsx - Tree canvas → Junction nodes: registers node
src/App.tsx - Tree canvas → Region nodes: registers node
src/App.tsx - Tree canvas → Family edges: registers edge
src/App.tsx - Tree canvas → Header and reset: renders
src/App.tsx - Tree canvas → Usage hints: renders
src/App.tsx - Distant nodes → Graph layout: uses layout types
src/components/DotNode.tsx - Fixed tree view → Sample family: reads records
src/components/FamilyTree.tsx - Fixed tree view → Sample person cards: registers node
src/components/FamilyTree.tsx - Fixed tree view → Sample distant nodes: registers node
src/components/FamilyTree.tsx - Fixed tree view → Sample tree edges: registers edge
src/components/FamilyTree.tsx