feat(timeline): add TimelineView orchestrator
Renders year bands in DTO order with interior empty-year runs folded into one
GapSpan (REQ-015), a single <ol> in chronological DOM order (REQ-006), the undated
bucket via {#if} (REQ-016), and a calm empty state (REQ-017). personId is a
declared seam (issue #10), undefined here, never passed to leaf cards (REQ-025).
Centered desktop spine / left phone spine via scoped CSS. Owns no <main>.
Refs #779
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
90
frontend/src/lib/timeline/TimelineView.svelte
Normal file
90
frontend/src/lib/timeline/TimelineView.svelte
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import * as m from '$lib/paraglide/messages.js';
|
||||||
|
import YearBand from './YearBand.svelte';
|
||||||
|
import GapSpan from './GapSpan.svelte';
|
||||||
|
import LetterCard from './LetterCard.svelte';
|
||||||
|
import type { components } from '$lib/generated/api';
|
||||||
|
|
||||||
|
type TimelineDTO = components['schemas']['TimelineDTO'];
|
||||||
|
type TimelineYearDTO = components['schemas']['TimelineYearDTO'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Orchestrates the global timeline (REQ-001/003). Renders the year bands the DTO
|
||||||
|
* delivers in order — never re-sorting — interleaving a folded GapSpan for each
|
||||||
|
* interior run of empty years (REQ-015), then the undated bucket (REQ-016). An
|
||||||
|
* empty timeline shows a calm message (REQ-017). `personId` is a declared seam
|
||||||
|
* for the per-person rail (issue #10) and is undefined here; it is not passed to
|
||||||
|
* leaf cards (REQ-025). Owns no <main> — the layout does.
|
||||||
|
*/
|
||||||
|
let { timeline, personId = undefined }: { timeline: TimelineDTO; personId?: string } = $props();
|
||||||
|
|
||||||
|
type Row = { t: 'band'; year: TimelineYearDTO } | { t: 'gap'; from: number; to: number };
|
||||||
|
|
||||||
|
const rows = $derived.by<Row[]>(() => {
|
||||||
|
const out: Row[] = [];
|
||||||
|
const years = timeline.years;
|
||||||
|
for (let i = 0; i < years.length; i++) {
|
||||||
|
if (i > 0) {
|
||||||
|
const prev = years[i - 1].year;
|
||||||
|
const cur = years[i].year;
|
||||||
|
if (cur - prev > 1) out.push({ t: 'gap', from: prev + 1, to: cur - 1 });
|
||||||
|
}
|
||||||
|
out.push({ t: 'band', year: years[i] });
|
||||||
|
}
|
||||||
|
return out;
|
||||||
|
});
|
||||||
|
|
||||||
|
const isEmpty = $derived(timeline.years.length === 0 && timeline.undated.length === 0);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isEmpty}
|
||||||
|
<p class="py-12 text-center font-serif text-base text-ink-2">{m.timeline_empty_state()}</p>
|
||||||
|
{:else}
|
||||||
|
<!-- personId is a declared seam for the per-person Lebensweg rail (issue #10);
|
||||||
|
undefined in the global view, surfaced only on the root, never passed to
|
||||||
|
leaf cards (REQ-025). -->
|
||||||
|
<ol class="timeline-axis relative mx-auto max-w-3xl" data-person-id={personId}>
|
||||||
|
{#each rows as row (row.t === 'band' ? `band-${row.year.year}` : `gap-${row.from}`)}
|
||||||
|
<li>
|
||||||
|
{#if row.t === 'band'}
|
||||||
|
<YearBand year={row.year} />
|
||||||
|
{:else}
|
||||||
|
<GapSpan from={row.from} to={row.to} />
|
||||||
|
{/if}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
{#if timeline.undated.length > 0}
|
||||||
|
<section data-testid="undated-section" class="mx-auto mt-8 max-w-3xl">
|
||||||
|
<h2 class="mb-3 font-serif text-sm font-bold text-ink-2">{m.timeline_undated_section()}</h2>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
{#each timeline.undated as entry (entry.documentId ?? entry.title)}
|
||||||
|
<li><LetterCard entry={entry} /></li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Phone (< 1024px): a single left-anchored spine. Desktop (≥ 1024px): a
|
||||||
|
centered spine the bands' alternating cards sit on either side of. The
|
||||||
|
spine is decorative — the chronology lives in the <ol> DOM order. */
|
||||||
|
.timeline-axis::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0.5rem;
|
||||||
|
width: 2px;
|
||||||
|
background: linear-gradient(var(--palette-mint), var(--palette-navy));
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
.timeline-axis::before {
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
173
frontend/src/lib/timeline/TimelineView.svelte.spec.ts
Normal file
173
frontend/src/lib/timeline/TimelineView.svelte.spec.ts
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import { describe, it, expect, afterEach } from 'vitest';
|
||||||
|
import { cleanup, render } from 'vitest-browser-svelte';
|
||||||
|
import TimelineView from './TimelineView.svelte';
|
||||||
|
import { makeEntry, makeYear, makeTimelineDTO } from './test-factories';
|
||||||
|
|
||||||
|
afterEach(() => cleanup());
|
||||||
|
|
||||||
|
describe('TimelineView', () => {
|
||||||
|
it('shows the empty state and no ol when there are no years and no undated (REQ-017)', () => {
|
||||||
|
render(TimelineView, { timeline: makeTimelineDTO() });
|
||||||
|
expect(document.body.textContent).toContain('Noch keine Ereignisse.');
|
||||||
|
expect(document.querySelector('ol')).toBeNull();
|
||||||
|
expect(document.querySelector('section')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders the timeline as a single <ol> with each band a <section>, ascending (REQ-006)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [
|
||||||
|
makeYear(1914, [makeEntry({ documentId: 'a' })]),
|
||||||
|
makeYear(1916, [makeEntry({ documentId: 'b' })])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
expect(document.querySelectorAll('ol')).toHaveLength(1);
|
||||||
|
const headings = Array.from(document.querySelectorAll('section h2')).map((h) => h.textContent);
|
||||||
|
expect(headings.some((t) => t?.includes('1914'))).toBe(true);
|
||||||
|
const order = headings.map((t) => t?.trim());
|
||||||
|
expect(order.indexOf('1914')).toBeLessThan(order.indexOf('1916'));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('folds an interior run of empty years into one GapSpan (REQ-015)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [
|
||||||
|
makeYear(1909, [makeEntry({ documentId: 'a' })]),
|
||||||
|
makeYear(1915, [makeEntry({ documentId: 'b' })])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
expect(document.body.textContent).toContain('1910–1914');
|
||||||
|
expect(document.body.textContent).toContain('keine Einträge');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('folds a single empty interior year as a single year (REQ-015)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [
|
||||||
|
makeYear(1911, [makeEntry({ documentId: 'a' })]),
|
||||||
|
makeYear(1913, [makeEntry({ documentId: 'b' })])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
expect(document.body.textContent).toContain('1912');
|
||||||
|
expect(document.body.textContent).not.toContain('1912–1912');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders an "Ohne Datum" section when undated is non-empty (REQ-016)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [makeYear(1914, [makeEntry({ documentId: 'a' })])],
|
||||||
|
undated: [makeEntry({ precision: 'UNKNOWN', eventDate: undefined, documentId: 'u1' })]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
expect(document.querySelector('[data-testid="undated-section"]')).not.toBeNull();
|
||||||
|
expect(document.body.textContent).toContain('Ohne Datum');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('omits the "Ohne Datum" section from the DOM when undated is empty (REQ-016)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({ years: [makeYear(1914, [makeEntry({ documentId: 'a' })])] })
|
||||||
|
});
|
||||||
|
expect(document.querySelector('[data-testid="undated-section"]')).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders all years and undated entries with personId undefined, no filtering (REQ-025)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [
|
||||||
|
makeYear(1914, [makeEntry({ documentId: 'a' })]),
|
||||||
|
makeYear(1915, [makeEntry({ documentId: 'b' })])
|
||||||
|
],
|
||||||
|
undated: [makeEntry({ precision: 'UNKNOWN', eventDate: undefined, documentId: 'u1' })]
|
||||||
|
}),
|
||||||
|
personId: undefined
|
||||||
|
});
|
||||||
|
// Two year bands inside the <ol>, plus the separate undated section.
|
||||||
|
expect(document.querySelectorAll('ol section h2')).toHaveLength(2);
|
||||||
|
expect(document.querySelector('[data-testid="undated-section"]')).not.toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders two derived events in one band without key collision (no-double-null-key)', () => {
|
||||||
|
const a = makeEntry({
|
||||||
|
kind: 'EVENT',
|
||||||
|
derived: true,
|
||||||
|
derivedType: 'BIRTH',
|
||||||
|
title: 'Geburt: Anna',
|
||||||
|
senderName: '',
|
||||||
|
receiverName: '',
|
||||||
|
documentId: undefined,
|
||||||
|
eventId: undefined,
|
||||||
|
linkedPersonIds: ['p1']
|
||||||
|
});
|
||||||
|
const b = makeEntry({
|
||||||
|
kind: 'EVENT',
|
||||||
|
derived: true,
|
||||||
|
derivedType: 'BIRTH',
|
||||||
|
title: 'Geburt: Bertha',
|
||||||
|
senderName: '',
|
||||||
|
receiverName: '',
|
||||||
|
documentId: undefined,
|
||||||
|
eventId: undefined,
|
||||||
|
linkedPersonIds: ['p2']
|
||||||
|
});
|
||||||
|
render(TimelineView, { timeline: makeTimelineDTO({ years: [makeYear(1915, [a, b])] }) });
|
||||||
|
expect(document.body.textContent).toContain('Geburt: Anna');
|
||||||
|
expect(document.body.textContent).toContain('Geburt: Bertha');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('shows the redundant non-color cue label for each layer (REQ-018)', () => {
|
||||||
|
render(TimelineView, {
|
||||||
|
timeline: makeTimelineDTO({
|
||||||
|
years: [
|
||||||
|
makeYear(1914, [
|
||||||
|
makeEntry({
|
||||||
|
kind: 'EVENT',
|
||||||
|
derived: true,
|
||||||
|
derivedType: 'BIRTH',
|
||||||
|
title: 'Geburt: Hans',
|
||||||
|
senderName: '',
|
||||||
|
receiverName: '',
|
||||||
|
documentId: undefined
|
||||||
|
}),
|
||||||
|
makeEntry({
|
||||||
|
kind: 'EVENT',
|
||||||
|
derived: false,
|
||||||
|
type: 'PERSONAL',
|
||||||
|
eventId: 'e1',
|
||||||
|
title: 'Auswanderung',
|
||||||
|
senderName: '',
|
||||||
|
receiverName: '',
|
||||||
|
documentId: undefined
|
||||||
|
}),
|
||||||
|
makeEntry({
|
||||||
|
kind: 'EVENT',
|
||||||
|
derived: false,
|
||||||
|
type: 'HISTORICAL',
|
||||||
|
precision: 'RANGE',
|
||||||
|
eventDate: '1914-01-01',
|
||||||
|
eventDateEnd: '1918-12-31',
|
||||||
|
title: 'Erster Weltkrieg',
|
||||||
|
senderName: '',
|
||||||
|
receiverName: '',
|
||||||
|
documentId: undefined
|
||||||
|
})
|
||||||
|
])
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
expect(document.body.textContent).toContain('Weltgeschehen');
|
||||||
|
expect(document.body.textContent).toContain('Familie');
|
||||||
|
expect(document.body.textContent).toContain('Geburt');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('places consecutive letter cards on alternating sides (REQ-004 surrogate)', () => {
|
||||||
|
const letters = Array.from({ length: 4 }, (_, i) => makeEntry({ documentId: `d${i}` }));
|
||||||
|
render(TimelineView, { timeline: makeTimelineDTO({ years: [makeYear(1909, letters)] }) });
|
||||||
|
const sides = Array.from(document.querySelectorAll('.letter-row')).map((el) =>
|
||||||
|
el.getAttribute('data-side')
|
||||||
|
);
|
||||||
|
expect(sides).toEqual(['left', 'right', 'left', 'right']);
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user