feat: multimodel improvements #9
@@ -39,7 +39,7 @@
|
|||||||
|
|
||||||
import { useHeroActions } from '../../hero.svelte';
|
import { useHeroActions } from '../../hero.svelte';
|
||||||
import { defaultParameters, hourly, modelGroups, models as modelOptions } from '../../options';
|
import { defaultParameters, hourly, modelGroups, models as modelOptions } from '../../options';
|
||||||
import ComparisonSelectionDrawer from './ComparisonSelectionDrawer.svelte';
|
import ComparisonSelectionPanel from './ComparisonSelectionPanel.svelte';
|
||||||
import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
|
import ModelPictogramTimeline from './ModelPictogramTimeline.svelte';
|
||||||
import {
|
import {
|
||||||
cardinalDirection,
|
cardinalDirection,
|
||||||
@@ -60,6 +60,10 @@
|
|||||||
const AUTOMATIC_SEAMLESS_MODEL_IDS = new Set(
|
const AUTOMATIC_SEAMLESS_MODEL_IDS = new Set(
|
||||||
modelGroups.find((group) => group.value === 'automatic_seamless')?.models.map((model) => model.value)
|
modelGroups.find((group) => group.value === 'automatic_seamless')?.models.map((model) => model.value)
|
||||||
);
|
);
|
||||||
|
const COMPARE_MODEL_GROUPS = [
|
||||||
|
...modelGroups.filter((group) => group.value !== 'automatic_seamless'),
|
||||||
|
...modelGroups.filter((group) => group.value === 'automatic_seamless')
|
||||||
|
];
|
||||||
// Weather code and total cloud cover form one comparison feature. Cloud cover
|
// Weather code and total cloud cover form one comparison feature. Cloud cover
|
||||||
// remains an auxiliary API field for pictogram shading, not a standalone chart.
|
// remains an auxiliary API field for pictogram shading, not a standalone chart.
|
||||||
const COMPARISON_HOURLY = hourly.map((group) =>
|
const COMPARISON_HOURLY = hourly.map((group) =>
|
||||||
@@ -96,8 +100,6 @@
|
|||||||
let isMobile = $state(false);
|
let isMobile = $state(false);
|
||||||
let comparisonPlotInsetLeft = $derived(isMobile ? 92 : 116);
|
let comparisonPlotInsetLeft = $derived(isMobile ? 92 : 116);
|
||||||
let comparisonPlotInsetRight = $derived(isMobile ? 8 : 20);
|
let comparisonPlotInsetRight = $derived(isMobile ? 8 : 20);
|
||||||
let selectionDrawerMode = $state<'models' | 'variables' | null>(null);
|
|
||||||
|
|
||||||
let params = $state({
|
let params = $state({
|
||||||
...defaultParameters,
|
...defaultParameters,
|
||||||
hourly: [...STANDARD_COMPARE_VARIABLES],
|
hourly: [...STANDARD_COMPARE_VARIABLES],
|
||||||
@@ -542,14 +544,8 @@
|
|||||||
m.compare_group_upper_air
|
m.compare_group_upper_air
|
||||||
];
|
];
|
||||||
const allHourlyVariables = COMPARISON_HOURLY.flat();
|
const allHourlyVariables = COMPARISON_HOURLY.flat();
|
||||||
let selectedModels = $derived(
|
let modelSelectionGroups = $derived(
|
||||||
params.models.flatMap((value) => {
|
COMPARE_MODEL_GROUPS.map((group) => ({
|
||||||
const model = modelOptions.find((candidate) => candidate.value === value);
|
|
||||||
return model ? [model] : [];
|
|
||||||
})
|
|
||||||
);
|
|
||||||
let modelDrawerGroups = $derived(
|
|
||||||
modelGroups.map((group) => ({
|
|
||||||
value: group.value,
|
value: group.value,
|
||||||
label: group.label,
|
label: group.label,
|
||||||
options: group.models.map((model) => ({
|
options: group.models.map((model) => ({
|
||||||
@@ -559,17 +555,7 @@
|
|||||||
}))
|
}))
|
||||||
}))
|
}))
|
||||||
);
|
);
|
||||||
let selectedVariables = $derived(
|
let variableSelectionGroups = $derived(
|
||||||
params.hourly.flatMap((value) => {
|
|
||||||
const variable = allHourlyVariables.find((candidate) => candidate.value === value);
|
|
||||||
return variable ? [variable] : [];
|
|
||||||
})
|
|
||||||
);
|
|
||||||
let standardVariablesActive = $derived(
|
|
||||||
params.hourly.length === STANDARD_COMPARE_VARIABLES.length &&
|
|
||||||
STANDARD_COMPARE_VARIABLES.every((variable) => params.hourly.includes(variable))
|
|
||||||
);
|
|
||||||
let variableDrawerGroups = $derived(
|
|
||||||
COMPARISON_HOURLY.map((variables, index) => ({
|
COMPARISON_HOURLY.map((variables, index) => ({
|
||||||
value: `variables_${index}`,
|
value: `variables_${index}`,
|
||||||
label: variableGroupLabels[index](),
|
label: variableGroupLabels[index](),
|
||||||
@@ -824,8 +810,31 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Compact summaries keep the page scannable; full editing happens in the shared drawer. -->
|
<section
|
||||||
<section class="mt-6 border-t border-border/60 pt-5 md:mt-10" aria-labelledby="models">
|
class="mt-6 border-t border-border/60 pt-5 md:mt-10"
|
||||||
|
aria-labelledby="hourly_weather_variables"
|
||||||
|
>
|
||||||
|
<div class="flex items-baseline justify-between gap-3">
|
||||||
|
<h2 id="hourly_weather_variables" class="text-2xl md:text-3xl">
|
||||||
|
{m.compare_variables_heading()}
|
||||||
|
</h2>
|
||||||
|
<span class="shrink-0 text-sm text-muted-foreground">
|
||||||
|
{params.hourly.length}/{allHourlyVariables.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ComparisonSelectionPanel
|
||||||
|
mode="variables"
|
||||||
|
groups={variableSelectionGroups}
|
||||||
|
selected={params.hourly}
|
||||||
|
dirty={variablesDirty}
|
||||||
|
onToggle={(value) => toggleSelection('hourly', value)}
|
||||||
|
onToggleGroup={(values, select) => toggleGroupSelection('hourly', values, select)}
|
||||||
|
onApply={applyComparisonSelection}
|
||||||
|
onRestoreDefaults={restoreStandardVariables}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="mt-5 border-t border-border/60 pt-5 md:mt-10" aria-labelledby="models">
|
||||||
<div class="flex items-baseline justify-between gap-3">
|
<div class="flex items-baseline justify-between gap-3">
|
||||||
<h2 id="models" class="text-2xl md:text-3xl">{m.compare_models_heading()}</h2>
|
<h2 id="models" class="text-2xl md:text-3xl">{m.compare_models_heading()}</h2>
|
||||||
<span class="shrink-0 text-sm text-muted-foreground">
|
<span class="shrink-0 text-sm text-muted-foreground">
|
||||||
@@ -840,177 +849,13 @@
|
|||||||
{m.compare_many_models_warning({ count: params.models.length })}
|
{m.compare_many_models_warning({ count: params.models.length })}
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="mt-3 rounded-xl border border-border/70 bg-card p-3 shadow-sm sm:p-4">
|
<ComparisonSelectionPanel
|
||||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
||||||
<div class="min-w-0 flex-1">
|
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
|
||||||
<h3 class="text-sm font-bold">{m.compare_selected_models()}</h3>
|
|
||||||
{#if modelsDirty}
|
|
||||||
<span
|
|
||||||
class="rounded-full bg-amber-500/15 px-2 py-0.5 text-[10px] font-bold tracking-wide text-amber-700 uppercase dark:text-amber-300"
|
|
||||||
>
|
|
||||||
{m.compare_selection_pending()}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{#if selectedModels.length > 0}
|
|
||||||
<div class="mt-2 flex flex-wrap gap-1.5">
|
|
||||||
{#each selectedModels as model, index (model.value)}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="inline-flex min-h-8 max-w-full items-center gap-1.5 rounded-full border border-border/70 bg-background px-2.5 py-1 text-xs hover:border-destructive/40 hover:bg-destructive/5"
|
|
||||||
onclick={() => toggleSelection('models', model.value)}
|
|
||||||
aria-label={m.compare_remove_model({ model: model.label })}
|
|
||||||
>
|
|
||||||
<span class="text-[10px] font-bold text-muted-foreground tabular-nums"
|
|
||||||
>{index + 1}</span
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="size-2.5 shrink-0 rounded-full"
|
|
||||||
style:background-color={modelColor(model.value, params.models)}
|
|
||||||
></span>
|
|
||||||
<span class="truncate">{model.label}</span>
|
|
||||||
<span aria-hidden="true" class="text-muted-foreground">×</span>
|
|
||||||
</button>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<p class="mt-1.5 text-xs text-muted-foreground">{m.compare_no_models_selected()}</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="flex shrink-0 flex-wrap gap-2 sm:justify-end">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg border border-border px-3 py-1.5 text-xs font-semibold hover:bg-muted"
|
|
||||||
onclick={() => (selectionDrawerMode = 'models')}
|
|
||||||
aria-haspopup="dialog"
|
|
||||||
>
|
|
||||||
{m.compare_customize_models()}
|
|
||||||
</button>
|
|
||||||
{#if modelsDirty}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg bg-primary px-3 py-1.5 text-xs font-bold text-primary-foreground hover:bg-primary/90"
|
|
||||||
onclick={applyComparisonSelection}
|
|
||||||
>
|
|
||||||
{m.compare_apply_selection()}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section
|
|
||||||
class="mt-5 border-t border-border/60 pt-5 md:mt-10"
|
|
||||||
aria-labelledby="hourly_weather_variables"
|
|
||||||
>
|
|
||||||
<div class="flex items-baseline justify-between gap-3">
|
|
||||||
<h2 id="hourly_weather_variables" class="text-2xl md:text-3xl">
|
|
||||||
{m.compare_variables_heading()}
|
|
||||||
</h2>
|
|
||||||
<span class="shrink-0 text-sm text-muted-foreground">
|
|
||||||
{params.hourly.length}/{allHourlyVariables.length}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="mt-3 rounded-xl border bg-card shadow-sm {standardVariablesActive
|
|
||||||
? 'border-primary/35'
|
|
||||||
: 'border-border/70'}"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col gap-3 p-3 sm:flex-row sm:items-start sm:justify-between sm:p-4">
|
|
||||||
<div class="flex min-w-0 gap-3">
|
|
||||||
<span
|
|
||||||
class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full border {standardVariablesActive
|
|
||||||
? 'border-primary bg-primary'
|
|
||||||
: 'border-muted-foreground/40 bg-muted'}"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
{#if standardVariablesActive}<span class="size-2 rounded-full bg-primary-foreground"></span>{/if}
|
|
||||||
</span>
|
|
||||||
<div class="min-w-0">
|
|
||||||
<div class="flex flex-wrap items-center gap-2">
|
|
||||||
<h3 class="font-bold">{m.compare_standard_preset()}</h3>
|
|
||||||
<span
|
|
||||||
class="rounded-full px-2 py-0.5 text-[10px] font-bold tracking-wide uppercase {variablesDirty
|
|
||||||
? 'bg-amber-500/15 text-amber-700 dark:text-amber-300'
|
|
||||||
: standardVariablesActive
|
|
||||||
? 'bg-primary/10 text-primary'
|
|
||||||
: 'bg-muted text-muted-foreground'}"
|
|
||||||
>
|
|
||||||
{variablesDirty
|
|
||||||
? m.compare_variables_pending()
|
|
||||||
: standardVariablesActive
|
|
||||||
? m.compare_preset_active()
|
|
||||||
: m.compare_custom_selection({ count: params.hourly.length })}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<p class="mt-0.5 text-sm text-muted-foreground">
|
|
||||||
{m.compare_standard_preset_description()}
|
|
||||||
</p>
|
|
||||||
{#if selectedVariables.length > 0}
|
|
||||||
<p class="mt-2 text-xs leading-relaxed text-foreground/80">
|
|
||||||
{selectedVariables.map((variable) => variableLabel(variable.value)).join(' · ')}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex shrink-0 flex-wrap gap-2 sm:justify-end">
|
|
||||||
{#if !standardVariablesActive}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg border border-border px-3 py-1.5 text-xs font-semibold hover:bg-muted"
|
|
||||||
onclick={restoreStandardVariables}
|
|
||||||
>
|
|
||||||
{m.compare_restore_defaults()}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg border border-border px-3 py-1.5 text-xs font-semibold hover:bg-muted"
|
|
||||||
onclick={() => (selectionDrawerMode = 'variables')}
|
|
||||||
aria-haspopup="dialog"
|
|
||||||
>
|
|
||||||
{m.compare_customize_variables()}
|
|
||||||
</button>
|
|
||||||
{#if variablesDirty}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg bg-primary px-3 py-1.5 text-xs font-bold text-primary-foreground hover:bg-primary/90"
|
|
||||||
onclick={applyComparisonSelection}
|
|
||||||
>
|
|
||||||
{m.compare_apply_selection()}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{#if selectionDrawerMode === 'models'}
|
|
||||||
<ComparisonSelectionDrawer
|
|
||||||
open
|
|
||||||
mode="models"
|
mode="models"
|
||||||
groups={modelDrawerGroups}
|
groups={modelSelectionGroups}
|
||||||
selected={params.models}
|
selected={params.models}
|
||||||
dirty={comparisonSelectionDirty}
|
dirty={modelsDirty}
|
||||||
onToggle={(value) => toggleSelection('models', value)}
|
onToggle={(value) => toggleSelection('models', value)}
|
||||||
onToggleGroup={(values, select) => toggleGroupSelection('models', values, select)}
|
onToggleGroup={(values, select) => toggleGroupSelection('models', values, select)}
|
||||||
onApply={applyComparisonSelection}
|
onApply={applyComparisonSelection}
|
||||||
onClose={() => (selectionDrawerMode = null)}
|
|
||||||
/>
|
/>
|
||||||
{:else if selectionDrawerMode === 'variables'}
|
</section>
|
||||||
<ComparisonSelectionDrawer
|
|
||||||
open
|
|
||||||
mode="variables"
|
|
||||||
groups={variableDrawerGroups}
|
|
||||||
selected={params.hourly}
|
|
||||||
dirty={comparisonSelectionDirty}
|
|
||||||
onToggle={(value) => toggleSelection('hourly', value)}
|
|
||||||
onToggleGroup={(values, select) => toggleGroupSelection('hourly', values, select)}
|
|
||||||
onApply={applyComparisonSelection}
|
|
||||||
onClose={() => (selectionDrawerMode = null)}
|
|
||||||
onRestoreDefaults={restoreStandardVariables}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@@ -1,233 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { Checkbox } from '$lib/components/ui/checkbox';
|
|
||||||
import * as Dialog from '$lib/components/ui/dialog';
|
|
||||||
import { Input } from '$lib/components/ui/input';
|
|
||||||
import { Label } from '$lib/components/ui/label';
|
|
||||||
import * as m from '$lib/paraglide/messages';
|
|
||||||
|
|
||||||
interface Option {
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
metadata?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OptionGroup {
|
|
||||||
value: string;
|
|
||||||
label: string;
|
|
||||||
options: Option[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
open: boolean;
|
|
||||||
mode: 'models' | 'variables';
|
|
||||||
groups: OptionGroup[];
|
|
||||||
selected: string[];
|
|
||||||
dirty: boolean;
|
|
||||||
onToggle: (value: string) => void;
|
|
||||||
onToggleGroup: (values: string[], select: boolean) => void;
|
|
||||||
onApply: () => void;
|
|
||||||
onClose: () => void;
|
|
||||||
onRestoreDefaults?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
open,
|
|
||||||
mode,
|
|
||||||
groups,
|
|
||||||
selected,
|
|
||||||
dirty,
|
|
||||||
onToggle,
|
|
||||||
onToggleGroup,
|
|
||||||
onApply,
|
|
||||||
onClose,
|
|
||||||
onRestoreDefaults
|
|
||||||
}: Props = $props();
|
|
||||||
|
|
||||||
let search = $state('');
|
|
||||||
let onlySelected = $state(false);
|
|
||||||
let normalizedSearch = $derived(search.trim().toLocaleLowerCase());
|
|
||||||
|
|
||||||
let visibleGroups = $derived.by(() =>
|
|
||||||
groups.flatMap((group) => {
|
|
||||||
const options = group.options.filter((option) => {
|
|
||||||
if (onlySelected && !selected.includes(option.value)) return false;
|
|
||||||
if (!normalizedSearch) return true;
|
|
||||||
return `${group.label} ${option.label} ${option.value} ${option.metadata ?? ''}`
|
|
||||||
.toLocaleLowerCase()
|
|
||||||
.includes(normalizedSearch);
|
|
||||||
});
|
|
||||||
return options.length > 0 ? [{ ...group, options }] : [];
|
|
||||||
})
|
|
||||||
);
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (open) return;
|
|
||||||
search = '';
|
|
||||||
onlySelected = false;
|
|
||||||
});
|
|
||||||
|
|
||||||
function groupSelection(group: OptionGroup): { count: number; all: boolean; partial: boolean } {
|
|
||||||
const count = group.options.filter((option) => selected.includes(option.value)).length;
|
|
||||||
return { count, all: count === group.options.length, partial: count > 0 && count < group.options.length };
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyAndClose(): void {
|
|
||||||
onApply();
|
|
||||||
onClose();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Dialog.Dialog {open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
|
|
||||||
<Dialog.DialogContent
|
|
||||||
showCloseButton={false}
|
|
||||||
class="top-0 right-0 bottom-0 left-auto flex h-dvh w-full max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none border-0 p-0 sm:w-[640px] sm:max-w-[90vw] sm:border-l"
|
|
||||||
>
|
|
||||||
<header class="shrink-0 border-b border-border bg-background px-4 py-4 sm:px-5">
|
|
||||||
<div class="flex items-start justify-between gap-4">
|
|
||||||
<div class="min-w-0">
|
|
||||||
<Dialog.DialogTitle class="text-lg font-bold">
|
|
||||||
{mode === 'models' ? m.compare_edit_models() : m.compare_edit_variables()}
|
|
||||||
</Dialog.DialogTitle>
|
|
||||||
<Dialog.DialogDescription class="mt-0.5 text-xs">
|
|
||||||
{mode === 'models'
|
|
||||||
? m.compare_edit_models_description()
|
|
||||||
: m.compare_edit_variables_description()}
|
|
||||||
</Dialog.DialogDescription>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="flex size-9 shrink-0 items-center justify-center rounded-lg text-xl text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
||||||
onclick={onClose}
|
|
||||||
aria-label={m.action_close()}
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">×</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 flex flex-col gap-2 sm:flex-row">
|
|
||||||
<Input
|
|
||||||
type="search"
|
|
||||||
bind:value={search}
|
|
||||||
placeholder={mode === 'models'
|
|
||||||
? m.compare_search_models()
|
|
||||||
: m.compare_search_variables()}
|
|
||||||
aria-label={mode === 'models'
|
|
||||||
? m.compare_search_models()
|
|
||||||
: m.compare_search_variables()}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="flex min-h-9 shrink-0 cursor-pointer items-center gap-2 rounded-lg border border-border px-3 text-xs font-semibold hover:bg-muted"
|
|
||||||
>
|
|
||||||
<Checkbox id="drawer_{mode}_only_selected" bind:checked={onlySelected} />
|
|
||||||
<Label for="drawer_{mode}_only_selected" class="cursor-pointer text-xs">
|
|
||||||
{m.compare_only_selected()}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-5">
|
|
||||||
{#if visibleGroups.length > 0}
|
|
||||||
<div class="grid items-start gap-3 sm:grid-cols-2">
|
|
||||||
{#each visibleGroups as visibleGroup (visibleGroup.value)}
|
|
||||||
{@const fullGroup = groups.find((group) => group.value === visibleGroup.value) ?? visibleGroup}
|
|
||||||
{@const selection = groupSelection(fullGroup)}
|
|
||||||
<section class="overflow-hidden rounded-xl border border-border/70 bg-card">
|
|
||||||
<div class="flex min-h-11 items-center gap-2 border-b border-border/60 bg-muted/30 px-3 py-2">
|
|
||||||
<Checkbox
|
|
||||||
id="drawer_{mode}_group_{fullGroup.value}"
|
|
||||||
checked={selection.all}
|
|
||||||
indeterminate={selection.partial}
|
|
||||||
onCheckedChange={() =>
|
|
||||||
onToggleGroup(
|
|
||||||
fullGroup.options.map((option) => option.value),
|
|
||||||
!selection.all
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
for="drawer_{mode}_group_{fullGroup.value}"
|
|
||||||
class="min-w-0 flex-1 cursor-pointer text-sm font-bold"
|
|
||||||
>
|
|
||||||
{fullGroup.label}
|
|
||||||
</Label>
|
|
||||||
<span class="shrink-0 text-[11px] text-muted-foreground tabular-nums">
|
|
||||||
{selection.count}/{fullGroup.options.length}
|
|
||||||
</span>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="shrink-0 rounded-md px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/10"
|
|
||||||
onclick={() =>
|
|
||||||
onToggleGroup(
|
|
||||||
fullGroup.options.map((option) => option.value),
|
|
||||||
!selection.all
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{selection.all ? m.compare_clear_group() : m.compare_select_group()}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="p-2">
|
|
||||||
{#each visibleGroup.options as option (option.value)}
|
|
||||||
<div class="flex min-h-10 items-center rounded-lg px-1.5 hover:bg-muted/60">
|
|
||||||
<Checkbox
|
|
||||||
id="drawer_{mode}_{option.value}"
|
|
||||||
checked={selected.includes(option.value)}
|
|
||||||
onCheckedChange={() => onToggle(option.value)}
|
|
||||||
/>
|
|
||||||
<Label
|
|
||||||
for="drawer_{mode}_{option.value}"
|
|
||||||
class="min-w-0 flex-1 cursor-pointer py-2 pl-2"
|
|
||||||
>
|
|
||||||
<span class="block text-sm font-medium">{option.label}</span>
|
|
||||||
{#if option.metadata}
|
|
||||||
<span class="block text-[10px] text-muted-foreground">
|
|
||||||
{option.metadata}
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
</Label>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground">
|
|
||||||
{m.compare_no_matching_options()}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<footer class="shrink-0 border-t border-border bg-background px-4 py-3 sm:px-5">
|
|
||||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
|
||||||
<div>
|
|
||||||
{#if mode === 'variables' && onRestoreDefaults}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-9 rounded-lg border border-border px-3 py-1.5 text-xs font-semibold hover:bg-muted"
|
|
||||||
onclick={onRestoreDefaults}
|
|
||||||
>
|
|
||||||
{m.compare_restore_defaults()}
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-10 rounded-lg border border-border px-4 py-2 text-sm font-semibold hover:bg-muted"
|
|
||||||
onclick={onClose}
|
|
||||||
>
|
|
||||||
{m.action_close()}
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="min-h-10 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
|
||||||
disabled={!dirty}
|
|
||||||
onclick={applyAndClose}
|
|
||||||
>
|
|
||||||
{m.compare_apply_selection()}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</Dialog.DialogContent>
|
|
||||||
</Dialog.Dialog>
|
|
||||||
@@ -0,0 +1,190 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Checkbox } from '$lib/components/ui/checkbox';
|
||||||
|
import { Input } from '$lib/components/ui/input';
|
||||||
|
import { Label } from '$lib/components/ui/label';
|
||||||
|
|
||||||
|
import * as m from '$lib/paraglide/messages';
|
||||||
|
|
||||||
|
interface Option {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
metadata?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface OptionGroup {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
options: Option[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
mode: 'models' | 'variables';
|
||||||
|
groups: OptionGroup[];
|
||||||
|
selected: string[];
|
||||||
|
dirty: boolean;
|
||||||
|
onToggle: (value: string) => void;
|
||||||
|
onToggleGroup: (values: string[], select: boolean) => void;
|
||||||
|
onApply: () => void;
|
||||||
|
onRestoreDefaults?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let {
|
||||||
|
mode,
|
||||||
|
groups,
|
||||||
|
selected,
|
||||||
|
dirty,
|
||||||
|
onToggle,
|
||||||
|
onToggleGroup,
|
||||||
|
onApply,
|
||||||
|
onRestoreDefaults
|
||||||
|
}: Props = $props();
|
||||||
|
|
||||||
|
let search = $state('');
|
||||||
|
let onlySelected = $state(false);
|
||||||
|
let normalizedSearch = $derived(search.trim().toLocaleLowerCase());
|
||||||
|
|
||||||
|
let visibleGroups = $derived.by(() =>
|
||||||
|
groups.flatMap((group) => {
|
||||||
|
const options = group.options.filter((option) => {
|
||||||
|
if (onlySelected && !selected.includes(option.value)) return false;
|
||||||
|
if (!normalizedSearch) return true;
|
||||||
|
return `${group.label} ${option.label} ${option.value} ${option.metadata ?? ''}`
|
||||||
|
.toLocaleLowerCase()
|
||||||
|
.includes(normalizedSearch);
|
||||||
|
});
|
||||||
|
return options.length > 0 ? [{ ...group, options }] : [];
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
function groupSelection(group: OptionGroup): { count: number; all: boolean; partial: boolean } {
|
||||||
|
const count = group.options.filter((option) => selected.includes(option.value)).length;
|
||||||
|
return {
|
||||||
|
count,
|
||||||
|
all: count === group.options.length,
|
||||||
|
partial: count > 0 && count < group.options.length
|
||||||
|
};
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mt-3 overflow-hidden rounded-xl border border-border/70 bg-card shadow-sm">
|
||||||
|
<div class="border-b border-border/70 bg-muted/20 p-3 sm:p-4">
|
||||||
|
<div class="flex flex-col gap-2 sm:flex-row">
|
||||||
|
<Input
|
||||||
|
type="search"
|
||||||
|
bind:value={search}
|
||||||
|
placeholder={mode === 'models' ? m.compare_search_models() : m.compare_search_variables()}
|
||||||
|
aria-label={mode === 'models' ? m.compare_search_models() : m.compare_search_variables()}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="flex min-h-9 shrink-0 cursor-pointer items-center gap-2 rounded-lg border border-border bg-background px-3 text-xs font-semibold hover:bg-muted"
|
||||||
|
>
|
||||||
|
<Checkbox id="panel_{mode}_only_selected" bind:checked={onlySelected} />
|
||||||
|
<Label for="panel_{mode}_only_selected" class="cursor-pointer text-xs">
|
||||||
|
{m.compare_only_selected()}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-3 sm:p-4">
|
||||||
|
{#if visibleGroups.length > 0}
|
||||||
|
<div class="columns-1 gap-3 md:columns-2">
|
||||||
|
{#each visibleGroups as visibleGroup (visibleGroup.value)}
|
||||||
|
{@const fullGroup =
|
||||||
|
groups.find((group) => group.value === visibleGroup.value) ?? visibleGroup}
|
||||||
|
{@const selection = groupSelection(fullGroup)}
|
||||||
|
<section
|
||||||
|
class="mb-3 inline-block w-full break-inside-avoid overflow-hidden rounded-xl border border-border/70 bg-background align-top"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex min-h-11 items-center gap-2 border-b border-border/60 bg-muted/30 px-3 py-2"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="panel_{mode}_group_{fullGroup.value}"
|
||||||
|
checked={selection.all}
|
||||||
|
indeterminate={selection.partial}
|
||||||
|
onCheckedChange={() =>
|
||||||
|
onToggleGroup(
|
||||||
|
fullGroup.options.map((option) => option.value),
|
||||||
|
!selection.all
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
for="panel_{mode}_group_{fullGroup.value}"
|
||||||
|
class="min-w-0 flex-1 cursor-pointer text-sm font-bold"
|
||||||
|
>
|
||||||
|
{fullGroup.label}
|
||||||
|
</Label>
|
||||||
|
<span class="shrink-0 text-[11px] text-muted-foreground tabular-nums">
|
||||||
|
{selection.count}/{fullGroup.options.length}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="shrink-0 rounded-md px-2 py-1 text-[11px] font-semibold text-primary hover:bg-primary/10"
|
||||||
|
onclick={() =>
|
||||||
|
onToggleGroup(
|
||||||
|
fullGroup.options.map((option) => option.value),
|
||||||
|
!selection.all
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{selection.all ? m.compare_clear_group() : m.compare_select_group()}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="p-2">
|
||||||
|
{#each visibleGroup.options as option (option.value)}
|
||||||
|
<div class="flex min-h-10 items-center rounded-lg px-1.5 hover:bg-muted/60">
|
||||||
|
<Checkbox
|
||||||
|
id="panel_{mode}_{option.value}"
|
||||||
|
checked={selected.includes(option.value)}
|
||||||
|
onCheckedChange={() => onToggle(option.value)}
|
||||||
|
/>
|
||||||
|
<Label
|
||||||
|
for="panel_{mode}_{option.value}"
|
||||||
|
class="min-w-0 flex-1 cursor-pointer py-2 pl-2"
|
||||||
|
>
|
||||||
|
<span class="block text-sm font-medium">{option.label}</span>
|
||||||
|
{#if option.metadata}
|
||||||
|
<span class="block text-[10px] text-muted-foreground">
|
||||||
|
{option.metadata}
|
||||||
|
</span>
|
||||||
|
{/if}
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div
|
||||||
|
class="rounded-xl border border-dashed border-border px-4 py-10 text-center text-sm text-muted-foreground"
|
||||||
|
>
|
||||||
|
{m.compare_no_matching_options()}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex flex-wrap items-center justify-between gap-2 border-t border-border bg-muted/20 px-3 py-3 sm:px-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
{#if mode === 'variables' && onRestoreDefaults}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="min-h-9 rounded-lg border border-border bg-background px-3 py-1.5 text-xs font-semibold hover:bg-muted"
|
||||||
|
onclick={onRestoreDefaults}
|
||||||
|
>
|
||||||
|
{m.compare_restore_defaults()}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="min-h-10 rounded-lg bg-primary px-4 py-2 text-sm font-bold text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
|
||||||
|
disabled={!dirty}
|
||||||
|
onclick={onApply}
|
||||||
|
>
|
||||||
|
{m.compare_apply_selection()}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
Reference in New Issue
Block a user