feat: Stammbaum — Mode B social network view (D3-Force, all persons) #359

New Issue

marcel · 2026-04-27T10:16:57+02:00

marcel commented

2026-04-27 10:16:57 +02:00

Follow-up to #358 (Stammbaum initial release). Mode A (family tree) must be shipped and stable before this is started.

What

Add a toggle pill to the Stammbaum top bar that switches from the generational family tree (Mode A) to a force-directed graph showing all ~180 persons and their relationships (Mode B).

Why

The family tree (Mode A) shows only the 30 family members in a clean hierarchy. The network view gives a richer picture — you can see how non-family contacts (colleagues, doctors, friends) cluster around family members, which adds social context to the letters.

Behaviour

Toggle: [Stammbaum | Alle Verbindungen] pill in the top bar. Toggle state is not persisted — always opens in Mode A on page load.

Mode B layout:

Uses d3-force only (not full D3, ~8 kb gzipped). Svelte handles all SVG rendering; D3 provides position simulation only.
Family member nodes: large circles, navy fill/stroke
Contact/institution nodes: small circles, grey fill, grey stroke
Family edges (PARENT_OF, SPOUSE_OF, SIBLING_OF): solid navy lines
Social edges (FRIEND, COLLEAGUE, DOCTOR, etc.): dashed mint lines
Force parameters: high attraction strength between family members so they cluster in the centre naturally

Interactions (same as Mode A):

Click a node → side panel opens with person info, document count, relationships, "Zur Personenseite →" button
Pan: drag on the canvas
Zoom: scroll wheel or ± buttons

Performance target: D3-Force simulation with ~180 nodes reaches a stable layout in < 2 s on a mid-range laptop.

Data

No backend changes required. Mode B uses the existing GET /api/network endpoint (without ?family=true) which already returns all nodes and edges.

Accessibility

SVG nodes: role="button", aria-label="{displayName}"
Side panel keyboard-reachable (same as Mode A)

Out of scope

Drag-to-create relationships on the graph canvas
Filtering by relationship type within Mode B (future enhancement)
Export / print of the network view

Acceptance criteria

Given I am on /stammbaum, when I click "Alle Verbindungen", then all persons (family + contacts) appear as a force-directed graph
Given family member nodes, they are visually larger and navy-coloured compared to contact nodes
Given I click any node in Mode B, the same side panel as Mode A opens
Given I click "Stammbaum", the view returns to the generational family tree
Given I navigate away and back to /stammbaum, the view opens in Mode A (not persisted)

Follow-up to #358 (Stammbaum initial release). Mode A (family tree) must be shipped and stable before this is started. ## What Add a toggle pill to the Stammbaum top bar that switches from the generational family tree (Mode A) to a force-directed graph showing all ~180 persons and their relationships (Mode B). ## Why The family tree (Mode A) shows only the 30 family members in a clean hierarchy. The network view gives a richer picture — you can see how non-family contacts (colleagues, doctors, friends) cluster around family members, which adds social context to the letters. ## Behaviour **Toggle:** `[Stammbaum | Alle Verbindungen]` pill in the top bar. Toggle state is not persisted — always opens in Mode A on page load. **Mode B layout:** - Uses `d3-force` only (not full D3, ~8 kb gzipped). Svelte handles all SVG rendering; D3 provides position simulation only. - **Family member nodes:** large circles, navy fill/stroke - **Contact/institution nodes:** small circles, grey fill, grey stroke - **Family edges** (PARENT_OF, SPOUSE_OF, SIBLING_OF): solid navy lines - **Social edges** (FRIEND, COLLEAGUE, DOCTOR, etc.): dashed mint lines - Force parameters: high attraction strength between family members so they cluster in the centre naturally **Interactions (same as Mode A):** - Click a node → side panel opens with person info, document count, relationships, "Zur Personenseite →" button - Pan: drag on the canvas - Zoom: scroll wheel or ± buttons **Performance target:** D3-Force simulation with ~180 nodes reaches a stable layout in < 2 s on a mid-range laptop. ## Data No backend changes required. Mode B uses the existing `GET /api/network` endpoint (without `?family=true`) which already returns all nodes and edges. ## Accessibility - SVG nodes: `role="button"`, `aria-label="{displayName}"` - Side panel keyboard-reachable (same as Mode A) ## Out of scope - Drag-to-create relationships on the graph canvas - Filtering by relationship type within Mode B (future enhancement) - Export / print of the network view ## Acceptance criteria - Given I am on `/stammbaum`, when I click "Alle Verbindungen", then all persons (family + contacts) appear as a force-directed graph - Given family member nodes, they are visually larger and navy-coloured compared to contact nodes - Given I click any node in Mode B, the same side panel as Mode A opens - Given I click "Stammbaum", the view returns to the generational family tree - Given I navigate away and back to `/stammbaum`, the view opens in Mode A (not persisted)

marcel added the P3-later feature ui labels 2026-04-27 10:17:03 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: marcel/familienarchiv#359