refactor(documents): extract TimelineBars from density filter (#385)
Splits the bar row + drag-window overlay + bar styling out of the
377-line orchestrator into a single-purpose component. The pointer
choreography (handle{PointerDown,DocumentMove,DocumentUp},
indexFromClientX, cleanupDragListeners) stays in the orchestrator
per Felix's note. Closes part 1 of Felix's component-split concern.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
131
frontend/src/lib/document/TimelineBars.svelte
Normal file
131
frontend/src/lib/document/TimelineBars.svelte
Normal file
@@ -0,0 +1,131 @@
|
||||
<script lang="ts">
|
||||
import * as m from '$lib/paraglide/messages.js';
|
||||
import { formatTickLabel } from '$lib/document/timeline';
|
||||
import { getLocale } from '$lib/paraglide/runtime';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type MonthBucket = components['schemas']['MonthBucket'];
|
||||
|
||||
const ZERO_COUNT_BAR_HEIGHT = 2; // px — minimum visible signal for empty months
|
||||
|
||||
let {
|
||||
filled,
|
||||
maxCount,
|
||||
barAreaHeight,
|
||||
isSelected,
|
||||
isInDragPreview,
|
||||
isDragging,
|
||||
dragWindowLeftPct,
|
||||
dragWindowRightPct,
|
||||
rowEl = $bindable(),
|
||||
onbarpointerdown,
|
||||
onbarpointerenter,
|
||||
onbarclick
|
||||
}: {
|
||||
filled: MonthBucket[];
|
||||
maxCount: number;
|
||||
barAreaHeight: number;
|
||||
isSelected: (label: string) => boolean;
|
||||
isInDragPreview: (index: number) => boolean;
|
||||
isDragging: boolean;
|
||||
dragWindowLeftPct: number;
|
||||
dragWindowRightPct: number;
|
||||
rowEl?: HTMLDivElement;
|
||||
onbarpointerdown: (event: PointerEvent, index: number) => void;
|
||||
onbarpointerenter: (index: number) => void;
|
||||
onbarclick: (index: number) => void;
|
||||
} = $props();
|
||||
|
||||
function barHeight(count: number): number {
|
||||
if (count === 0) return ZERO_COUNT_BAR_HEIGHT;
|
||||
return Math.max(ZERO_COUNT_BAR_HEIGHT, (count / maxCount) * barAreaHeight);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={rowEl}
|
||||
class="relative flex items-end border-b border-line"
|
||||
style="height: {barAreaHeight}px;"
|
||||
>
|
||||
{#each filled as bucket, i (bucket.month)}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="timeline-bar"
|
||||
aria-label={m.timeline_bar_aria({
|
||||
when: formatTickLabel(bucket.month, getLocale()),
|
||||
count: bucket.count
|
||||
})}
|
||||
aria-pressed={isSelected(bucket.month)}
|
||||
onpointerdown={(e) => onbarpointerdown(e, i)}
|
||||
onpointerenter={() => onbarpointerenter(i)}
|
||||
onclick={() => onbarclick(i)}
|
||||
class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors"
|
||||
class:selected={isSelected(bucket.month)}
|
||||
class:in-drag-preview={isInDragPreview(i)}
|
||||
>
|
||||
<span
|
||||
class="bar-fill block w-full rounded-t-[2px]"
|
||||
style="height: {barHeight(bucket.count)}px;"
|
||||
></span>
|
||||
</button>
|
||||
{/each}
|
||||
{#if isDragging}
|
||||
<div
|
||||
class="drag-window"
|
||||
data-testid="timeline-drag-window"
|
||||
style="left: {dragWindowLeftPct}%; right: {dragWindowRightPct}%;"
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--timeline-bar-idle: rgba(161, 220, 216, 0.35);
|
||||
--timeline-bar-outside: var(--c-line);
|
||||
}
|
||||
|
||||
:global(.dark) {
|
||||
/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
|
||||
for large UI elements; previous #0d3358 measured 1.44:1. */
|
||||
--timeline-bar-idle: #3a6e8c;
|
||||
--timeline-bar-outside: #1a2735;
|
||||
}
|
||||
|
||||
.bar .bar-fill {
|
||||
background-color: var(--timeline-bar-idle);
|
||||
transition: background-color 100ms ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bar .bar-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bar.selected .bar-fill,
|
||||
.bar.in-drag-preview .bar-fill {
|
||||
background-color: var(--palette-mint, #a1dcd8);
|
||||
}
|
||||
|
||||
.bar.in-drag-preview .bar-fill {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bar:hover .bar-fill {
|
||||
background-color: var(--palette-mint, #a1dcd8);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Graylog-style range selector window: left/right borders mark the dragged
|
||||
range, tinted body fills the area. pointer-events:none keeps the bars below
|
||||
reachable so pointermove still fires their pointerenter. */
|
||||
.drag-window {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(161, 220, 216, 0.22);
|
||||
border-left: 2px solid var(--palette-mint, #a1dcd8);
|
||||
border-right: 2px solid var(--palette-mint, #a1dcd8);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
formatTickLabel
|
||||
} from '$lib/document/timeline';
|
||||
import { getLocale } from '$lib/paraglide/runtime';
|
||||
import TimelineBars from '$lib/document/TimelineBars.svelte';
|
||||
import type { components } from '$lib/generated/api';
|
||||
|
||||
type MonthBucket = components['schemas']['MonthBucket'];
|
||||
@@ -24,7 +25,6 @@ type SelectionEvent = {
|
||||
type ZoomEvent = { zoomFrom: string; zoomTo: string };
|
||||
|
||||
const BAR_AREA_HEIGHT = 80; // px — Leonie spec h-20
|
||||
const ZERO_COUNT_BAR_HEIGHT = 2; // px — minimum visible signal for empty months
|
||||
// Above this threshold, month bars compress to sub-pixel widths in the flex
|
||||
// row; we collapse to year granularity so each bar stays clickable.
|
||||
const MONTH_GRANULARITY_LIMIT = 240;
|
||||
@@ -91,11 +91,6 @@ const dragHighIndex = $derived(
|
||||
: dragStartIndex
|
||||
);
|
||||
|
||||
function barHeight(count: number): number {
|
||||
if (count === 0) return ZERO_COUNT_BAR_HEIGHT;
|
||||
return Math.max(ZERO_COUNT_BAR_HEIGHT, (count / maxCount) * BAR_AREA_HEIGHT);
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
onchange({ from: '', to: '' });
|
||||
}
|
||||
@@ -264,41 +259,20 @@ const omitTickYear = $derived.by(() => {
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<div
|
||||
bind:this={rowEl}
|
||||
class="relative flex items-end border-b border-line"
|
||||
style="height: {BAR_AREA_HEIGHT}px;"
|
||||
>
|
||||
{#each filled as bucket, i (bucket.month)}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="timeline-bar"
|
||||
aria-label={m.timeline_bar_aria({
|
||||
when: formatTickLabel(bucket.month, getLocale()),
|
||||
count: bucket.count
|
||||
})}
|
||||
aria-pressed={isSelected(bucket.month)}
|
||||
onpointerdown={(e) => handlePointerDown(e, i)}
|
||||
onpointerenter={() => handlePointerEnter(i)}
|
||||
onclick={() => handleClick(i)}
|
||||
class="bar group flex h-full min-w-px flex-1 cursor-pointer items-end justify-center bg-transparent p-0 transition-colors"
|
||||
class:selected={isSelected(bucket.month)}
|
||||
class:in-drag-preview={isInDragPreview(i)}
|
||||
>
|
||||
<span
|
||||
class="bar-fill block w-full rounded-t-[2px]"
|
||||
style="height: {barHeight(bucket.count)}px;"
|
||||
></span>
|
||||
</button>
|
||||
{/each}
|
||||
{#if isDragging}
|
||||
<div
|
||||
class="drag-window"
|
||||
data-testid="timeline-drag-window"
|
||||
style="left: {dragWindowLeftPct}%; right: {dragWindowRightPct}%;"
|
||||
></div>
|
||||
{/if}
|
||||
</div>
|
||||
<TimelineBars
|
||||
filled={filled}
|
||||
maxCount={maxCount}
|
||||
barAreaHeight={BAR_AREA_HEIGHT}
|
||||
isSelected={isSelected}
|
||||
isInDragPreview={isInDragPreview}
|
||||
isDragging={isDragging}
|
||||
dragWindowLeftPct={dragWindowLeftPct}
|
||||
dragWindowRightPct={dragWindowRightPct}
|
||||
bind:rowEl={rowEl}
|
||||
onbarpointerdown={handlePointerDown}
|
||||
onbarpointerenter={handlePointerEnter}
|
||||
onbarclick={handleClick}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="relative mt-1 h-4 font-sans text-xs leading-none text-ink-3"
|
||||
@@ -350,55 +324,3 @@ const omitTickYear = $derived.by(() => {
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--timeline-bar-idle: rgba(161, 220, 216, 0.35);
|
||||
--timeline-bar-outside: var(--c-line);
|
||||
}
|
||||
|
||||
:global(.dark) {
|
||||
/* 3.33:1 against --c-surface (#011526) — clears WCAG 1.4.11 non-text contrast
|
||||
for large UI elements; previous #0d3358 measured 1.44:1. */
|
||||
--timeline-bar-idle: #3a6e8c;
|
||||
--timeline-bar-outside: #1a2735;
|
||||
}
|
||||
|
||||
.bar .bar-fill {
|
||||
background-color: var(--timeline-bar-idle);
|
||||
transition: background-color 100ms ease;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.bar .bar-fill {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bar.selected .bar-fill,
|
||||
.bar.in-drag-preview .bar-fill {
|
||||
background-color: var(--palette-mint, #a1dcd8);
|
||||
}
|
||||
|
||||
.bar.in-drag-preview .bar-fill {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bar:hover .bar-fill {
|
||||
background-color: var(--palette-mint, #a1dcd8);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Graylog-style range selector window: left/right borders mark the dragged
|
||||
range, tinted body fills the area. pointer-events:none keeps the bars below
|
||||
reachable so pointermove still fires their pointerenter. */
|
||||
.drag-window {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(161, 220, 216, 0.22);
|
||||
border-left: 2px solid var(--palette-mint, #a1dcd8);
|
||||
border-right: 2px solid var(--palette-mint, #a1dcd8);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user