review fixes

src/routes/weather/compare/[location]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import { SvelteSet } from 'svelte/reactivity';
 	import { get } from 'svelte/store';
 	import { fade } from 'svelte/transition';
 
@@ -93,7 +92,6 @@
 	let chartComponents: CanvasChart[] = $state([]);
 	let pictogramExporter: ExportableChart | null = $state(null);
 	let showLegend = $state(true);
-	const hiddenModels = new SvelteSet<string>();
 
 	let isMobile = $state(false);
 	let comparisonPlotInsetLeft = $derived(isMobile ? 92 : 116);
@@ -150,12 +148,14 @@
 
 	let variablesDirty = $derived(!hasSameVariables(params.hourly, appliedHourly));
 	let modelsDirty = $derived(!hasSameOrder(params.models, appliedModels));
-	let displayedVariablesStale = $derived(
-		fetchedData !== null && !hasSameVariables(fetchedData.selection.hourly, appliedHourly)
-	);
-	let displayedModelsStale = $derived(
-		fetchedData !== null && !hasSameOrder(fetchedData.selection.models, appliedModels)
-	);
+	let displayedVariablesStale = $derived.by(() => {
+		const current: FetchedData | null = fetchedData;
+		return current !== null && !hasSameVariables(current.selection.hourly, appliedHourly);
+	});
+	let displayedModelsStale = $derived.by(() => {
+		const current: FetchedData | null = fetchedData;
+		return current !== null && !hasSameOrder(current.selection.models, appliedModels);
+	});
 	let comparisonSelectionDirty = $derived(variablesDirty || modelsDirty);
 	let comparisonMuted = $derived(
 		comparisonSelectionDirty || displayedVariablesStale || displayedModelsStale
@@ -384,7 +384,6 @@
 					: (model.variables[variable] ?? []),
 				width: 2,
 				pointRadius: 3.25,
-				hidden: hiddenModels.has(model.modelId),
 				format: direction
 					? (value) => `${value.toFixed(0)}° ${cardinalDirection(value)}`
 					: undefined
@@ -422,7 +421,7 @@
 				variable === 'precipitation'
 					? {
 							points: precipitationAgreement(
-								result.models.filter((model) => !hiddenModels.has(model.modelId)),
+								result.models,
 								variable,
 								result.timestamps.length,
 								wetThreshold
@@ -488,7 +487,6 @@
 
 	let exportLegend = $derived.by((): ExportLegendItem[] => [
 		...displayedModels
-			.filter((model) => !hiddenModels.has(model.modelId))
 			.map((model) => ({
 				name: modelLabel(model.modelId),
 				color: modelColor(model.modelId, fetchedData?.selection.models),
@@ -501,11 +499,6 @@
 			: [])
 	]);
 
-	function toggleModel(modelId: string): void {
-		if (hiddenModels.has(modelId)) hiddenModels.delete(modelId);
-		else hiddenModels.add(modelId);
-	}
-
 	function toggleSelection(list: 'models' | 'hourly', value: string): void {
 		const values = params[list];
 		const nextValues = values.includes(value)
@@ -534,9 +527,6 @@
 		const variablesChanged = !hasSameVariables(params.hourly, appliedHourly);
 		const modelsChanged = !hasSameOrder(params.models, appliedModels);
 		if (modelsChanged) {
-			for (const modelId of params.models) {
-				if (!appliedModels.includes(modelId)) hiddenModels.delete(modelId);
-			}
 			appliedModels = [...params.models];
 		}
 		if (variablesChanged) appliedHourly = [...params.hourly];
@@ -795,22 +785,13 @@
 				transition:fade={{ duration: 150 }}
 			>
 				{#each displayedModels as model (model.modelId)}
-					<button
-						type="button"
-						class="flex min-h-8 shrink-0 items-center gap-1.5 text-xs {hiddenModels.has(
-							model.modelId
-						)
-							? 'opacity-40'
-							: ''}"
-						onclick={() => toggleModel(model.modelId)}
-						aria-pressed={!hiddenModels.has(model.modelId)}
-					>
+					<span class="flex min-h-8 shrink-0 items-center gap-1.5 text-xs">
 						<span
 							class="size-2.5 rounded-full"
 							style:background-color={modelColor(model.modelId, fetchedData.selection.models)}
 						></span>
 						{modelLabel(model.modelId)}
-					</button>
+					</span>
 				{/each}
 				{#if chartDefs.some( (def) => def.series.some((series) => series.name === m.compare_model_mean()) )}
 					<span class="flex shrink-0 items-center gap-1.5 text-xs">