feat(search): add InterpretationChipRow component (#739)
Renders type-prefixed chips (Absender/Zeitraum/Stichwort), a single directional chip for 2-name queries, gates keyword chips on keywordsApplied, and emits onRemoveChip(type, value?). Truncating name spans keep the 44px × button visible; chip wrappers show a focus ring. 9 vitest-browser-svelte specs (red/green). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
133
frontend/src/routes/search/InterpretationChipRow.svelte
Normal file
133
frontend/src/routes/search/InterpretationChipRow.svelte
Normal file
@@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import { SvelteSet } from 'svelte/reactivity';
|
||||
import { m } from '$lib/paraglide/messages.js';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type NlQueryInterpretation = components['schemas']['NlQueryInterpretation'];
|
||||
type ChipType = 'sender' | 'directional' | 'date' | 'keyword';
|
||||
|
||||
let {
|
||||
interpretation,
|
||||
onRemoveChip
|
||||
}: {
|
||||
interpretation: NlQueryInterpretation;
|
||||
onRemoveChip: (type: ChipType, value?: string) => void;
|
||||
} = $props();
|
||||
|
||||
type Chip =
|
||||
| { key: string; type: 'sender'; label: string }
|
||||
| { key: string; type: 'directional'; from: string; to: string }
|
||||
| { key: string; type: 'date'; label: string }
|
||||
| { key: string; type: 'keyword'; value: string; label: string };
|
||||
|
||||
// Locally removed chips. The parent remounts this component (via {#key}) on every
|
||||
// new NL search, so this set never needs an explicit reset.
|
||||
const removed = new SvelteSet<string>();
|
||||
|
||||
function yearOf(iso: string | undefined): string | undefined {
|
||||
return iso?.slice(0, 4);
|
||||
}
|
||||
|
||||
function dateRangeLabel(from: string | undefined, to: string | undefined): string {
|
||||
const fromYear = yearOf(from);
|
||||
const toYear = yearOf(to);
|
||||
if (fromYear && toYear) return fromYear === toYear ? fromYear : `${fromYear}–${toYear}`;
|
||||
return fromYear ?? toYear ?? '';
|
||||
}
|
||||
|
||||
const chips = $derived.by(() => {
|
||||
const list: Chip[] = [];
|
||||
const { resolvedPersons, dateFrom, dateTo, keywords, keywordsApplied } = interpretation;
|
||||
|
||||
if (resolvedPersons.length >= 2) {
|
||||
list.push({
|
||||
key: 'directional',
|
||||
type: 'directional',
|
||||
from: resolvedPersons[0].displayName,
|
||||
to: resolvedPersons[1].displayName
|
||||
});
|
||||
} else if (resolvedPersons.length === 1) {
|
||||
list.push({
|
||||
key: 'sender:' + resolvedPersons[0].id,
|
||||
type: 'sender',
|
||||
label: `${m.search_chip_sender()}: ${resolvedPersons[0].displayName}`
|
||||
});
|
||||
}
|
||||
|
||||
if (dateFrom || dateTo) {
|
||||
list.push({
|
||||
key: 'date',
|
||||
type: 'date',
|
||||
label: `${m.search_chip_date()}: ${dateRangeLabel(dateFrom, dateTo)}`
|
||||
});
|
||||
}
|
||||
|
||||
if (keywordsApplied) {
|
||||
for (const keyword of keywords) {
|
||||
list.push({
|
||||
key: 'keyword:' + keyword,
|
||||
type: 'keyword',
|
||||
value: keyword,
|
||||
label: `${m.search_chip_keyword()}: ${keyword}`
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return list.filter((chip) => !removed.has(chip.key));
|
||||
});
|
||||
|
||||
const showKeywordsNotApplied = $derived(
|
||||
!interpretation.keywordsApplied && interpretation.keywords.length > 0
|
||||
);
|
||||
|
||||
function remove(chip: Chip) {
|
||||
removed.add(chip.key);
|
||||
onRemoveChip(chip.type, chip.type === 'keyword' ? chip.value : undefined);
|
||||
}
|
||||
|
||||
const nameSpan = 'sm:max-w-[12rem] max-w-[8rem] truncate';
|
||||
const chipWrapper =
|
||||
'inline-flex items-center gap-1.5 rounded-full border border-line bg-muted px-3 text-sm text-ink-2 focus-within:ring-2 focus-within:ring-brand-navy';
|
||||
const removeButton =
|
||||
'flex min-h-[44px] w-6 shrink-0 items-center justify-center text-ink-3 outline-none hover:text-red-500 focus-visible:ring-2 focus-visible:ring-brand-navy';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each chips as chip (chip.key)}
|
||||
{#if chip.type === 'directional'}
|
||||
<span
|
||||
data-chip-type="directional"
|
||||
class={chipWrapper}
|
||||
aria-label={m.search_chip_directional_label({ from: chip.from, to: chip.to })}
|
||||
>
|
||||
<span class={nameSpan}>{chip.from}</span>
|
||||
<span aria-hidden="true">→</span>
|
||||
<span class={nameSpan}>{chip.to}</span>
|
||||
<button
|
||||
type="button"
|
||||
class={removeButton}
|
||||
aria-label={m.search_filter_remove_label({ label: `${chip.from} → ${chip.to}` })}
|
||||
onclick={() => remove(chip)}
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
{:else}
|
||||
<span data-chip-type={chip.type} class={chipWrapper}>
|
||||
<span class={nameSpan}>{chip.label}</span>
|
||||
<button
|
||||
type="button"
|
||||
class={removeButton}
|
||||
aria-label={m.search_filter_remove_label({ label: chip.label })}
|
||||
onclick={() => remove(chip)}
|
||||
>
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if showKeywordsNotApplied}
|
||||
<p class="mt-2 text-xs text-ink-3">{m.smart_search_keywords_not_applied()}</p>
|
||||
{/if}
|
||||
133
frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts
Normal file
133
frontend/src/routes/search/InterpretationChipRow.svelte.spec.ts
Normal file
@@ -0,0 +1,133 @@
|
||||
import { describe, expect, it, vi, afterEach } from 'vitest';
|
||||
import { cleanup, render } from 'vitest-browser-svelte';
|
||||
import { page } from 'vitest/browser';
|
||||
import InterpretationChipRow from './InterpretationChipRow.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type NlQueryInterpretation = components['schemas']['NlQueryInterpretation'];
|
||||
type PersonHint = components['schemas']['PersonHint'];
|
||||
|
||||
afterEach(() => cleanup());
|
||||
|
||||
const makePerson = (id: string, displayName: string): PersonHint => ({ id, displayName });
|
||||
|
||||
const makeInterpretation = (
|
||||
overrides: Partial<NlQueryInterpretation> = {}
|
||||
): NlQueryInterpretation => ({
|
||||
resolvedPersons: [],
|
||||
ambiguousPersons: [],
|
||||
keywords: [],
|
||||
rawQuery: 'test',
|
||||
keywordsApplied: true,
|
||||
...overrides
|
||||
});
|
||||
|
||||
describe('InterpretationChipRow', () => {
|
||||
it('renders type-prefixed labels for sender, date and keyword chips', async () => {
|
||||
render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
|
||||
dateFrom: '1914-01-01',
|
||||
dateTo: '1918-12-31',
|
||||
keywords: ['krieg']
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
await expect.element(page.getByText('Absender: Walter Raddatz')).toBeInTheDocument();
|
||||
await expect.element(page.getByText('Zeitraum: 1914–1918')).toBeInTheDocument();
|
||||
await expect.element(page.getByText('Stichwort: krieg')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onRemoveChip with "sender" when the sender chip × is clicked', async () => {
|
||||
const onRemoveChip = vi.fn();
|
||||
render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', 'Walter Raddatz')]
|
||||
}),
|
||||
onRemoveChip
|
||||
});
|
||||
await page.getByRole('button', { name: /Absender: Walter Raddatz/ }).click();
|
||||
expect(onRemoveChip).toHaveBeenCalledWith('sender', undefined);
|
||||
});
|
||||
|
||||
it('removes a chip from the DOM but keeps the rest when one × is clicked', async () => {
|
||||
const { container } = render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', 'Walter Raddatz')],
|
||||
dateFrom: '1914-01-01',
|
||||
dateTo: '1918-12-31',
|
||||
keywords: ['krieg']
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(3);
|
||||
await page.getByRole('button', { name: /Absender/ }).click();
|
||||
await vi.waitFor(() => expect(container.querySelectorAll('[data-chip-type]')).toHaveLength(2));
|
||||
});
|
||||
|
||||
it('renders a single directional chip with an arrow for a 2-name query', async () => {
|
||||
const { container } = render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
expect(container.querySelectorAll('[data-chip-type="directional"]')).toHaveLength(1);
|
||||
await expect.element(page.getByText(/→/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onRemoveChip with "directional" when the directional chip × is clicked', async () => {
|
||||
const onRemoveChip = vi.fn();
|
||||
render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', 'Walter Raddatz'), makePerson('p2', 'Emma Raddatz')]
|
||||
}),
|
||||
onRemoveChip
|
||||
});
|
||||
await page.getByRole('button', { name: /Walter Raddatz/ }).click();
|
||||
expect(onRemoveChip).toHaveBeenCalledWith('directional', undefined);
|
||||
});
|
||||
|
||||
it('does not render keyword chips when keywordsApplied is false', async () => {
|
||||
const { container } = render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
keywordsApplied: false,
|
||||
keywords: ['krieg', 'brief']
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('renders no keyword chips when keywords is empty', async () => {
|
||||
const { container } = render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({ keywordsApplied: true, keywords: [] }),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(0);
|
||||
});
|
||||
|
||||
it('renders exactly one keyword chip per keyword', async () => {
|
||||
const { container } = render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
keywordsApplied: true,
|
||||
keywords: ['krieg', 'brief', 'front']
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
expect(container.querySelectorAll('[data-chip-type="keyword"]')).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('keeps the × button in the DOM when a display name is 100 characters', async () => {
|
||||
const longName = 'W'.repeat(100);
|
||||
render(InterpretationChipRow, {
|
||||
interpretation: makeInterpretation({
|
||||
resolvedPersons: [makePerson('p1', longName)]
|
||||
}),
|
||||
onRemoveChip: vi.fn()
|
||||
});
|
||||
await expect
|
||||
.element(page.getByRole('button', { name: new RegExp('Absender') }))
|
||||
.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user