marcel/familienarchiv
1
0
Fork 0
Code Issues 109 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(stammbaum): pinned generation-label rail on all viewports (#692)

Browse Source 
Generation labels are no longer drawn in-SVG (where they panned/zoomed off
screen and were desktop-only). A new StammbaumGenerationRail overlays the canvas
left edge, mapping each generation row's centre through the SVG's live
getScreenCTM so chips stay pinned horizontally and track their row vertically at
any pan/zoom — on phones too. The desktop stripe underlay stays (gated on the
gutter breakpoint); the #689 label tests are rewritten against the rail.
Verified live: labels stay at left=4px while the canvas pans.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-29 18:39:22 +02:00
parent bb2a89da58
commit a458d3508b
4 changed files with 322 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/lib/person/genealogy/StammbaumGenerationRail.svelte Normal file
View File

@@ -0,0 +1,60 @@
<script lang="ts">
import type { PanZoomState } from '$lib/person/genealogy/panZoom';
interface RailRow {
rank: number;
label: number;
/** Row centre in SVG user coordinates. */
centerY: number;
}
interface Props {
/** The canvas SVG, read for its live screen transform. */
svg: SVGSVGElement | null;
rows: RailRow[];
/** Tracked so chip positions recompute on every pan/zoom. */
panZoom: PanZoomState;
}
let { svg, rows, panZoom }: Props = $props();
type Chip = { rank: number; label: number; top: number; visible: boolean };
let chips = $state<Chip[]>([]);
let height = $state(0);
// Map each generation-row centre from SVG user space to a screen-y via the
// live CTM (exact under preserveAspectRatio="xMidYMid meet" — no manual
// letterbox math). Runs in an effect so it reads the CTM after the viewBox DOM
// update is flushed. `panZoom` and `height` are the recompute triggers.
$effect(() => {
// reactKey makes the effect re-run on pan, zoom and resize; the CTM reflects
// the parent's viewBox, which Svelte cannot track on its own.
const reactKey = panZoom.x + panZoom.y + panZoom.z + height;
const ctm = svg && Number.isFinite(reactKey) ? svg.getScreenCTM() : null;
const top0 = svg ? svg.getBoundingClientRect().top : 0;
// Always emit one chip per labelled row so the labels exist regardless of
// transform availability; the CTM only positions them (fallback: stacked).
chips = rows.map((row, i) => {
const top = ctm ? new DOMPoint(0, row.centerY).matrixTransform(ctm).y - top0 : 24 + i * 28;
const visible = !ctm || height <= 0 || (top >= -16 && top <= height + 16);
return { rank: row.rank, label: row.label, top, visible };
});
});
</script>
<!-- Pinned to the canvas's left edge: chips stay put horizontally while the
tree pans, and track their generation row vertically at any zoom. -->
<div class="pointer-events-none absolute inset-y-0 left-0 z-10" bind:clientHeight={height}>
{#each chips as chip (chip.rank)}
{#if chip.visible}
<div
role="text"
aria-label={`Generation ${chip.label}`}
class="absolute left-1 -translate-y-1/2 rounded-sm border border-line bg-surface/85 px-1.5 py-0.5 font-serif text-xs text-ink-3 shadow-sm"
style="top: {chip.top}px"
>
G{chip.label}
</div>
{/if}
{/each}
</div>

32
frontend/src/lib/person/genealogy/StammbaumGenerationRail.svelte.test.ts Normal file
View File

@@ -0,0 +1,32 @@
import { describe, it, expect, vi } from 'vitest';
import { render } from 'vitest-browser-svelte';
import StammbaumGenerationRail from './StammbaumGenerationRail.svelte';
const rows = [
{ rank: 0, label: 0, centerY: 100 },
{ rank: 1, label: 1, centerY: 300 },
{ rank: 2, label: 3, centerY: 500 }
];
describe('StammbaumGenerationRail (#692)', () => {
it('renders one labelled chip per generation row', async () => {
render(StammbaumGenerationRail, { svg: null, rows, panZoom: { x: 0, y: 0, z: 1 } });
await vi.waitFor(() => {
const labels = Array.from(document.querySelectorAll('[role="text"]')).map((el) => ({
aria: el.getAttribute('aria-label'),
text: el.textContent?.trim()
}));
expect(labels).toEqual([
{ aria: 'Generation 0', text: 'G0' },
{ aria: 'Generation 1', text: 'G1' },
{ aria: 'Generation 3', text: 'G3' }
]);
});
});
it('renders nothing when there are no labelled rows', async () => {
render(StammbaumGenerationRail, { svg: null, rows: [], panZoom: { x: 0, y: 0, z: 1 } });
await vi.waitFor(() => expect(document.querySelectorAll('[role="text"]')).toHaveLength(0));
});
});

413
frontend/src/lib/person/genealogy/StammbaumTree.svelte
View File

@@ -16,6 +16,7 @@ import {
ZOOM_STEP_KB ZOOM_STEP_KB
} from '$lib/person/genealogy/panZoom'; } from '$lib/person/genealogy/panZoom';
import { panZoomGestures } from '$lib/person/genealogy/panZoomGestures'; import { panZoomGestures } from '$lib/person/genealogy/panZoomGestures';
import StammbaumGenerationRail from '$lib/person/genealogy/StammbaumGenerationRail.svelte';
type PersonNodeDTO = components['schemas']['PersonNodeDTO']; type PersonNodeDTO = components['schemas']['PersonNodeDTO'];
type RelationshipDTO = components['schemas']['RelationshipDTO']; type RelationshipDTO = components['schemas']['RelationshipDTO'];
@@ -97,8 +98,9 @@ $effect(() => {
}); });
type GutterRow = { rank: number; y: number; label: number | null }; type GutterRow = { rank: number; y: number; label: number | null };
// Computed on all viewports (not gated on the desktop gutter) so the pinned
// generation rail can show labels on phones too (#692).
const gutterRows = $derived.by<GutterRow[]>(() => { const gutterRows = $derived.by<GutterRow[]>(() => {
if (gutterWidth === 0) return [];
const byId = new SvelteMap(nodes.map((n) => [n.id, n])); const byId = new SvelteMap(nodes.map((n) => [n.id, n]));
const rows: GutterRow[] = []; const rows: GutterRow[] = [];
const sortedRanks = [...layout.generations.keys()].sort((a, b) => a - b); const sortedRanks = [...layout.generations.keys()].sort((a, b) => a - b);
@@ -128,6 +130,15 @@ const baseCentre = $derived({
y: layout.viewY + layout.viewH / 2 y: layout.viewY + layout.viewH / 2
}); });
// Labelled generation rows for the pinned rail, with each row's centre in SVG
// coordinates (the rail maps these through the live screen transform).
let svgEl = $state<SVGSVGElement | null>(null);
const railRows = $derived(
gutterRows
.filter((r): r is GutterRow & { label: number } => r.label != null)
.map((r) => ({ rank: r.rank, label: r.label, centerY: r.y + NODE_H / 2 }))
);
const viewBox = $derived.by(() => { const viewBox = $derived.by(() => {
const w = baseDims.w / panZoom.z; const w = baseDims.w / panZoom.z;
const h = baseDims.h / panZoom.z; const h = baseDims.h / panZoom.z;
@@ -278,243 +289,227 @@ const parentLinks = $derived.by<ParentLinks>(() => {
}); });
</script> </script>
<!-- The canvas is a custom interactive pan/zoom region: `tabindex` lets keyboard <!-- Relative wrapper so the pinned generation rail can overlay the canvas. -->
users focus it and the keydown handler is the keyboard-only alternative to <div class="relative h-full w-full">
touch/mouse gestures (NFR-A11Y-002). The visible focus outline is kept. --> <!-- The canvas is a custom interactive pan/zoom region: `tabindex` lets keyboard
<!-- svelte-ignore a11y_no_noninteractive_tabindex --> users focus it and the keydown handler is the keyboard-only alternative to
<!-- svelte-ignore a11y_no_noninteractive_element_interactions --> touch/mouse gestures (NFR-A11Y-002). The visible focus outline is kept. -->
<svg <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
viewBox={viewBox} <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
preserveAspectRatio="xMidYMid meet" <svg
role="img" bind:this={svgEl}
aria-label="Stammbaum" viewBox={viewBox}
tabindex="0" preserveAspectRatio="xMidYMid meet"
style={maskStyle} role="img"
onkeydown={handleCanvasKey} aria-label="Stammbaum"
use:panZoomGestures={{ tabindex="0"
state: panZoom, style={maskStyle}
baseW: baseDims.w, onkeydown={handleCanvasKey}
baseH: baseDims.h, use:panZoomGestures={{
baseCentreX: baseCentre.x, state: panZoom,
baseCentreY: baseCentre.y, baseW: baseDims.w,
reducedMotion, baseH: baseDims.h,
onPanZoom, baseCentreX: baseCentre.x,
onGestureStart: onActivity baseCentreY: baseCentre.y,
}} reducedMotion,
class="block h-full w-full" onPanZoom,
> onGestureStart: onActivity
<!-- Gutter stripe underlay (#689) — decorative full-row bands alternating }}
transparent / var(--c-gutter-stripe). aria-hidden because they carry class="block h-full w-full"
no meaning; the row's generation is announced by the label group below. --> >
{#each gutterRows as row, i (`stripe-${row.rank}`)} <!-- Gutter stripe underlay (#689) — decorative full-row bands alternating
<rect transparent / var(--c-gutter-stripe), desktop only. Generation labels
aria-hidden="true" are no longer drawn in-SVG; the pinned rail below carries them. -->
x={layout.viewX - gutterWidth} {#if gutterVisible}
y={row.y - ROW_GAP / 2} {#each gutterRows as row, i (`stripe-${row.rank}`)}
width={layout.viewW + gutterWidth} <rect
height={NODE_H + ROW_GAP} aria-hidden="true"
fill={i % 2 === 0 ? 'transparent' : 'var(--c-gutter-stripe)'} x={layout.viewX - gutterWidth}
/> y={row.y - ROW_GAP / 2}
{/each} width={layout.viewW + gutterWidth}
height={NODE_H + ROW_GAP}
<!-- Gutter labels (#689) — `G{node.generation}` per occupied row at the fill={i % 2 === 0 ? 'transparent' : 'var(--c-gutter-stripe)'}
un-shifted source-truth value. Wrapped in <g role="text"> so screen />
readers announce "Generation three" instead of "G three". --> {/each}
{#each gutterRows as row (`label-${row.rank}`)}
{#if row.label != null}
<g role="text" aria-label={`Generation ${row.label}`}>
<text
x={layout.viewX - gutterWidth + 12}
y={row.y + NODE_H / 2}
text-anchor="start"
dominant-baseline="middle"
font-family="var(--font-sans)"
font-size="12"
font-weight="700"
letter-spacing="0.08em"
fill="var(--c-ink-2)"
style:text-transform="uppercase"
>
G{row.label}
</text>
</g>
{/if} {/if}
{/each}
<!-- Shared parent-pair → children: drop from spouse midpoint to a sibling <!-- Shared parent-pair → children: drop from spouse midpoint to a sibling
bar, then short verticals from the bar to each child top. --> bar, then short verticals from the bar to each child top. -->
{#each parentLinks.shared as group (group.key)} {#each parentLinks.shared as group (group.key)}
{@const aCenter = nodeCenter(group.parentA)} {@const aCenter = nodeCenter(group.parentA)}
{@const bCenter = nodeCenter(group.parentB)} {@const bCenter = nodeCenter(group.parentB)}
{@const childCenters = group.childIds {@const childCenters = group.childIds
.map((id) => nodeCenter(id)) .map((id) => nodeCenter(id))
.filter((c): c is { x: number; y: number } => c !== null)} .filter((c): c is { x: number; y: number } => c !== null)}
{#if aCenter && bCenter && childCenters.length > 0} {#if aCenter && bCenter && childCenters.length > 0}
{@const midX = (aCenter.x + bCenter.x) / 2} {@const midX = (aCenter.x + bCenter.x) / 2}
{@const parentBottomY = aCenter.y + NODE_H / 2} {@const parentBottomY = aCenter.y + NODE_H / 2}
{@const childTopY = childCenters[0].y - NODE_H / 2} {@const childTopY = childCenters[0].y - NODE_H / 2}
{@const barY = (parentBottomY + childTopY) / 2} {@const barY = (parentBottomY + childTopY) / 2}
{@const xs = childCenters.map((c) => c.x)} {@const xs = childCenters.map((c) => c.x)}
{@const minX = Math.min(midX, ...xs)} {@const minX = Math.min(midX, ...xs)}
{@const maxX = Math.max(midX, ...xs)} {@const maxX = Math.max(midX, ...xs)}
<line
x1={midX}
y1={parentBottomY}
x2={midX}
y2={barY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{#if minX !== maxX}
<line <line
x1={minX} x1={midX}
y1={barY} y1={parentBottomY}
x2={maxX} x2={midX}
y2={barY} y2={barY}
stroke="var(--c-primary)" stroke="var(--c-primary)"
stroke-width="1.5" stroke-width="1.5"
/> />
{#if minX !== maxX}
<line
x1={minX}
y1={barY}
x2={maxX}
y2={barY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{/if}
{#each childCenters as cc, i (group.childIds[i])}
<line
x1={cc.x}
y1={barY}
x2={cc.x}
y2={childTopY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{/each}
{/if} {/if}
{#each childCenters as cc, i (group.childIds[i])} {/each}
<!-- Single-parent → child connectors: parent bottom → bar → child top. -->
{#each parentLinks.single as link (link.key)}
{@const parentCenter = nodeCenter(link.parentId)}
{@const childCenter = nodeCenter(link.childId)}
{#if parentCenter && childCenter}
{@const parentBottomY = parentCenter.y + NODE_H / 2}
{@const childTopY = childCenter.y - NODE_H / 2}
{@const barY = (parentBottomY + childTopY) / 2}
<line <line
x1={cc.x} x1={parentCenter.x}
y1={parentBottomY}
x2={parentCenter.x}
y2={barY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{#if parentCenter.x !== childCenter.x}
<line
x1={parentCenter.x}
y1={barY}
x2={childCenter.x}
y2={barY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{/if}
<line
x1={childCenter.x}
y1={barY} y1={barY}
x2={cc.x} x2={childCenter.x}
y2={childTopY} y2={childTopY}
stroke="var(--c-primary)" stroke="var(--c-primary)"
stroke-width="1.5" stroke-width="1.5"
/> />
{/each} {/if}
{/if} {/each}
{/each}
<!-- Single-parent → child connectors: parent bottom → bar → child top. --> <!-- Spouse connectors -->
{#each parentLinks.single as link (link.key)} {#each spouseEdges as e (e.id)}
{@const parentCenter = nodeCenter(link.parentId)} {@const aCenter = nodeCenter(e.personId)}
{@const childCenter = nodeCenter(link.childId)} {@const bCenter = nodeCenter(e.relatedPersonId)}
{#if parentCenter && childCenter} {#if aCenter && bCenter}
{@const parentBottomY = parentCenter.y + NODE_H / 2}
{@const childTopY = childCenter.y - NODE_H / 2}
{@const barY = (parentBottomY + childTopY) / 2}
<line
x1={parentCenter.x}
y1={parentBottomY}
x2={parentCenter.x}
y2={barY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{#if parentCenter.x !== childCenter.x}
<line <line
x1={parentCenter.x} x1={aCenter.x}
y1={barY} y1={aCenter.y}
x2={childCenter.x} x2={bCenter.x}
y2={barY} y2={bCenter.y}
stroke="var(--c-primary)" stroke="var(--c-primary)"
stroke-width="1.5" stroke-width="1.5"
stroke-dasharray={e.toYear ? '4 4' : undefined}
/>
<circle
cx={(aCenter.x + bCenter.x) / 2}
cy={(aCenter.y + bCenter.y) / 2}
r="6"
fill="var(--c-primary)"
/> />
{/if} {/if}
<line {/each}
x1={childCenter.x}
y1={barY}
x2={childCenter.x}
y2={childTopY}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{/if}
{/each}
<!-- Spouse connectors --> <!-- Nodes -->
{#each spouseEdges as e (e.id)} {#each nodes as node (node.id)}
{@const aCenter = nodeCenter(e.personId)} {@const pos = layout.positions.get(node.id)}
{@const bCenter = nodeCenter(e.relatedPersonId)} {#if pos}
{#if aCenter && bCenter} {@const isSelected = selectedId === node.id}
<line {@const isFocused = focusedId === node.id}
x1={aCenter.x} <g
y1={aCenter.y} role="button"
x2={bCenter.x} tabindex="0"
y2={bCenter.y} aria-label="{node.displayName}{node.birthYear || node.deathYear
stroke="var(--c-primary)"
stroke-width="1.5"
stroke-dasharray={e.toYear ? '4 4' : undefined}
/>
<circle
cx={(aCenter.x + bCenter.x) / 2}
cy={(aCenter.y + bCenter.y) / 2}
r="6"
fill="var(--c-primary)"
/>
{/if}
{/each}
<!-- Nodes -->
{#each nodes as node (node.id)}
{@const pos = layout.positions.get(node.id)}
{#if pos}
{@const isSelected = selectedId === node.id}
{@const isFocused = focusedId === node.id}
<g
role="button"
tabindex="0"
aria-label="{node.displayName}{node.birthYear || node.deathYear
? `, ${node.birthYear ?? '?'}–${node.deathYear ?? ''}` ? `, ${node.birthYear ?? '?'}–${node.deathYear ?? ''}`
: ''}" : ''}"
aria-expanded={isSelected} aria-expanded={isSelected}
transform="translate({pos.x}, {pos.y})" transform="translate({pos.x}, {pos.y})"
onclick={() => onSelect(node.id)} onclick={() => onSelect(node.id)}
onkeydown={(e) => handleNodeKey(e, node.id)} onkeydown={(e) => handleNodeKey(e, node.id)}
onfocus={() => (focusedId = node.id)} onfocus={() => (focusedId = node.id)}
onblur={() => (focusedId = null)} onblur={() => (focusedId = null)}
class="cursor-pointer focus:outline-none" class="cursor-pointer focus:outline-none"
>
{#if isFocused}
<rect
x="-3"
y="-3"
width={NODE_W + 6}
height={NODE_H + 6}
rx="6"
fill="none"
stroke="var(--c-focus-ring)"
stroke-width="2"
/>
{/if}
<rect
width={NODE_W}
height={NODE_H}
rx="4"
fill={isSelected ? 'var(--c-primary)' : 'var(--c-surface)'}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{#if isSelected}
<rect width="4" height={NODE_H} rx="2" fill="var(--c-accent)" />
{/if}
<text
x={NODE_W / 2}
y={NODE_H / 2 - 6}
text-anchor="middle"
font-family="serif"
font-size="16"
fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink)'}
> >
{node.displayName} {#if isFocused}
</text> <rect
{#if node.birthYear || node.deathYear} x="-3"
y="-3"
width={NODE_W + 6}
height={NODE_H + 6}
rx="6"
fill="none"
stroke="var(--c-focus-ring)"
stroke-width="2"
/>
{/if}
<rect
width={NODE_W}
height={NODE_H}
rx="4"
fill={isSelected ? 'var(--c-primary)' : 'var(--c-surface)'}
stroke="var(--c-primary)"
stroke-width="1.5"
/>
{#if isSelected}
<rect width="4" height={NODE_H} rx="2" fill="var(--c-accent)" />
{/if}
<text <text
x={NODE_W / 2} x={NODE_W / 2}
y={NODE_H / 2 + 12} y={NODE_H / 2 - 6}
text-anchor="middle" text-anchor="middle"
font-family="sans-serif" font-family="serif"
font-size="12" font-size="16"
fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'} fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink)'}
opacity={isSelected ? 0.75 : 1}
> >
{node.birthYear ?? '?'}–{node.deathYear ?? ''} {node.displayName}
</text> </text>
{/if} {#if node.birthYear || node.deathYear}
</g> <text
{/if} x={NODE_W / 2}
{/each} y={NODE_H / 2 + 12}
</svg> text-anchor="middle"
font-family="sans-serif"
font-size="12"
fill={isSelected ? 'var(--c-primary-fg)' : 'var(--c-ink-3)'}
opacity={isSelected ? 0.75 : 1}
>
{node.birthYear ?? '?'}–{node.deathYear ?? ''}
</text>
{/if}
</g>
{/if}
{/each}
</svg>
<StammbaumGenerationRail svg={svgEl} rows={railRows} panZoom={panZoom} />
</div>

48
frontend/src/lib/person/genealogy/StammbaumTree.svelte.test.ts
View File

@@ -831,10 +831,13 @@ describe('StammbaumTree keyboard pan/zoom (#692)', () => {
}); });
}); });
describe('StammbaumTree generation gutter (#689)', () => { describe('StammbaumTree generation rail (#689, #692)', () => {
it('renders a G{n} label per occupied generation row when at least one node carries generation', async () => { const railLabels = () =>
// showGutter overrides the matchMedia detection so the test never Array.from(document.querySelectorAll('[role="text"]')).map((el) =>
// depends on the vitest-browser iframe viewport width. el.getAttribute('aria-label')
);
it('renders a G{n} label per occupied generation row on the pinned rail', async () => {
render(StammbaumTree, { render(StammbaumTree, {
nodes: [ nodes: [
{ id: ID_A, displayName: 'Walter', familyMember: true, generation: 2 }, { id: ID_A, displayName: 'Walter', familyMember: true, generation: 2 },
@@ -843,35 +846,37 @@ describe('StammbaumTree generation gutter (#689)', () => {
edges: [], edges: [],
selectedId: null, selectedId: null,
panZoom: { x: 0, y: 0, z: 1 }, panZoom: { x: 0, y: 0, z: 1 },
onSelect: () => {}, onSelect: () => {}
showGutter: true
}); });
const labels = Array.from(document.querySelectorAll('g[role="text"]')).map((g) => await vi.waitFor(() => {
g.getAttribute('aria-label') const labels = railLabels();
); expect(labels).toContain('Generation 2');
expect(labels).toContain('Generation 2'); expect(labels).toContain('Generation 3');
expect(labels).toContain('Generation 3'); });
}); });
it('wraps the visible G3 text inside an aria-labelled group so screen readers announce "Generation"', async () => { it('labels the chip so screen readers announce "Generation" and shows the G{n} glyph', async () => {
render(StammbaumTree, { render(StammbaumTree, {
nodes: [{ id: ID_A, displayName: 'Herbert', familyMember: true, generation: 3 }], nodes: [{ id: ID_A, displayName: 'Herbert', familyMember: true, generation: 3 }],
edges: [], edges: [],
selectedId: null, selectedId: null,
panZoom: { x: 0, y: 0, z: 1 }, panZoom: { x: 0, y: 0, z: 1 },
onSelect: () => {}, onSelect: () => {}
showGutter: true
}); });
const g3 = Array.from(document.querySelectorAll('g[role="text"]')).find( await vi.waitFor(() => {
(g) => g.getAttribute('aria-label') === 'Generation 3' const g3 = Array.from(document.querySelectorAll('[role="text"]')).find(
); (el) => el.getAttribute('aria-label') === 'Generation 3'
expect(g3).toBeDefined(); );
expect(g3!.querySelector('text')!.textContent).toMatch(/G\s*3/); expect(g3).toBeDefined();
expect(g3!.textContent).toMatch(/G\s*3/);
});
}); });
it('omits the gutter when showGutter is false (mobile breakpoint case)', async () => { it('keeps showing generation labels on the pinned rail even on mobile (showGutter false)', async () => {
// The rail is viewport-independent (the #692 point); only the desktop
// stripe underlay is gated on the gutter breakpoint.
render(StammbaumTree, { render(StammbaumTree, {
nodes: [{ id: ID_A, displayName: 'Herbert', familyMember: true, generation: 3 }], nodes: [{ id: ID_A, displayName: 'Herbert', familyMember: true, generation: 3 }],
edges: [], edges: [],
@@ -881,7 +886,6 @@ describe('StammbaumTree generation gutter (#689)', () => {
showGutter: false showGutter: false
}); });
const labelGroups = Array.from(document.querySelectorAll('g[role="text"]')); await vi.waitFor(() => expect(railLabels()).toContain('Generation 3'));
expect(labelGroups).toHaveLength(0);
}); });
}); });