Use sveltekit-search-params to simplify query string manipulation

Author: techniq

frontend/package-lock.json

@@ -48,6 +48,7 @@
 		"svelte-check": "^4.1.1",
 		"svelte-intersection-observer": "^1.0.0",
 		"svelte-radix": "^1.1.1",
+		"sveltekit-search-params": "^4.0.0-next.0",
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.18.1",

frontend/package.json

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { queryParameters } from 'sveltekit-search-params';
+
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 
@@ -7,14 +9,7 @@
 	import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
 	import IconXMark from '~icons/heroicons/x-mark-16-solid';
 
-	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
-	import {
-		getSortDirection,
-		updateContextSort,
-		type SortDirection,
-		type SortContext
-	} from '$lib/util/sort';
+	import { getSortParamKey, type SortContext, getSortParamConfig } from '$lib/util/sort';
 
 	let {
 		showCluster = false,
@@ -30,14 +25,16 @@
 
 	let activeCluster = showCluster ? 'GroupBys' : null;
 
-	let currentSort: SortDirection = $derived.by(() =>
-		getSortDirection($page.url.searchParams, context)
+	const sortKey = $derived(getSortParamKey(context));
+	const params = $derived(
+		queryParameters(
+			{ [sortKey]: getSortParamConfig() },
+			{ pushHistory: false, showDefaults: false }
+		)
 	);
 
-	function handleSort() {
-		const newSort: SortDirection = currentSort === 'asc' ? 'desc' : 'asc';
-		const url = updateContextSort($page.url, context, newSort);
-		goto(url, { replaceState: true });
+	function toggleSort() {
+		params[sortKey] = params[sortKey] === 'asc' ? 'desc' : 'asc';
 	}
 </script>
 
@@ -61,9 +58,9 @@
 	<!-- Action Buttons Section -->
 	<div class="flex gap-3">
 		{#if showSort}
-			<Button variant="secondary" size="sm" icon="leading" on:click={handleSort}>
+			<Button variant="secondary" size="sm" icon="leading" on:click={toggleSort}>
 				<IconArrowsUpDown />
-				Sort {currentSort === 'asc' ? 'A-Z' : 'Z-A'}
+				Sort {params[sortKey] === 'asc' ? 'A-Z' : 'Z-A'}
 			</Button>
 		{/if}
 		<Button variant="secondary" size="sm" icon="leading" disabled>

frontend/src/lib/components/ActionButtons/ActionButtons.svelte

@@ -1,29 +1,25 @@
 <script lang="ts">
+	import { queryParameters } from 'sveltekit-search-params';
+
 	import { Button } from '$lib/components/ui/button';
 	import {
 		METRIC_LABELS,
 		METRIC_TYPES,
-		type MetricType,
-		getMetricTypeFromParams
+		getMetricTypeParamConfig
 	} from '$lib/types/MetricType/MetricType';
-	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
-
-	let selected = $derived(getMetricTypeFromParams(new URL($page.url).searchParams));
 
-	function toggle(value: MetricType) {
-		const url = new URL($page.url);
-		url.searchParams.set('metric', value);
-		goto(url, { replaceState: true });
-	}
+	const params = queryParameters(
+		{ metric: getMetricTypeParamConfig() },
+		{ pushHistory: false, showDefaults: false }
+	);
 </script>
 
 <div class="flex space-x-[1px]">
 	{#each METRIC_TYPES as metricType}
 		<Button
-			variant={selected === metricType ? 'default' : 'secondary'}
+			variant={params.metric === metricType ? 'default' : 'secondary'}
 			size="sm"
-			on:click={() => toggle(metricType)}
+			on:click={() => (params.metric = metricType)}
 			class="first:rounded-r-none last:rounded-l-none [&:not(:first-child):not(:last-child)]:rounded-none"
 		>
 			{METRIC_LABELS[metricType]}

frontend/src/lib/components/MetricTypeToggle/MetricTypeToggle.svelte

@@ -1,3 +1,5 @@
+import type { EncodeAndDecodeOptions } from 'sveltekit-search-params/sveltekit-search-params';
+
 export const METRIC_TYPES = ['jsd', 'hellinger', 'psi'] as const;
 export type MetricType = (typeof METRIC_TYPES)[number];
 
@@ -15,6 +17,14 @@ export const METRIC_SCALES: Record<MetricType, { min: number; max: number }> = {
 	psi: { min: 0, max: 25 }
 };
 
+export function getMetricTypeParamConfig() {
+	return {
+		encode: (value) => value,
+		decode: (value) => (METRIC_TYPES.includes(value as MetricType) ? (value as MetricType) : null),
+		defaultValue: DEFAULT_METRIC_TYPE
+	} satisfies EncodeAndDecodeOptions<MetricType>;
+}
+
 export function getMetricTypeFromParams(searchParams: URLSearchParams): MetricType {
 	const metric = searchParams.get('metric');
 	return METRIC_TYPES.includes(metric as MetricType) ? (metric as MetricType) : DEFAULT_METRIC_TYPE;

frontend/src/lib/types/MetricType/MetricType.ts

@@ -1,12 +1,23 @@
 import type { FeatureResponse, JoinTimeSeriesResponse } from '$lib/types/Model/Model';
+import type { EncodeAndDecodeOptions } from 'sveltekit-search-params/sveltekit-search-params';
 
-export type SortDirection = 'asc' | 'desc';
+export const SORT_DIRECTIONS = ['asc', 'desc'] as const;
+export type SortDirection = (typeof SORT_DIRECTIONS)[number];
 export type SortContext = 'drift' | 'distributions';
 
 export function getSortParamKey(context: SortContext): string {
 	return `${context}Sort`;
 }
 
+export function getSortParamConfig() {
+	return {
+		encode: (value) => value,
+		decode: (value) =>
+			SORT_DIRECTIONS.includes(value as SortDirection) ? (value as SortDirection) : null,
+		defaultValue: 'asc'
+	} satisfies EncodeAndDecodeOptions<SortDirection>;
+}
+
 export function getSortDirection(
 	searchParams: URLSearchParams,
 	context: SortContext
@@ -15,12 +26,6 @@ export function getSortDirection(
 	return param === 'desc' ? 'desc' : 'asc';
 }
 
-export function updateContextSort(url: URL, context: SortContext, direction: SortDirection): URL {
-	const newUrl = new URL(url);
-	newUrl.searchParams.set(getSortParamKey(context), direction);
-	return newUrl;
-}
-
 export function sortDrift(
 	joinTimeseries: JoinTimeSeriesResponse,
 	direction: SortDirection

frontend/src/lib/util/sort.ts

@@ -1,20 +1,22 @@
 <script lang="ts">
+	import { untrack, onMount } from 'svelte';
 	import EChart from '$lib/components/EChart/EChart.svelte';
+	import { connect } from 'echarts';
 	import type { EChartOption, EChartsType, ECElementEvent } from 'echarts';
+	import { queryParameters } from 'sveltekit-search-params';
+	import IntersectionObserver from 'svelte-intersection-observer';
+	import { fade } from 'svelte/transition';
 
-	import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
 	import IconTableCells from '~icons/heroicons/table-cells-16-solid';
 	import IconChartLine from '~icons/zipline-ai/chart-line';
+
+	import { Tabs, TabsList, TabsTrigger, TabsContent } from '$lib/components/ui/tabs';
 	import CollapsibleSection from '$lib/components/CollapsibleSection/CollapsibleSection.svelte';
-	import { connect } from 'echarts';
 	import type { FeatureResponse, TimeSeriesItem } from '$lib/types/Model/Model';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
-	import { untrack } from 'svelte';
 	import PageHeader from '$lib/components/PageHeader/PageHeader.svelte';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
 	import ResetZoomButton from '$lib/components/ResetZoomButton/ResetZoomButton.svelte';
-	import IntersectionObserver from 'svelte-intersection-observer';
-	import { fade } from 'svelte/transition';
 	import { Button } from '$lib/components/ui/button';
 	import { Api } from '$lib/api/api';
 	import InfoTooltip from '$lib/components/InfoTooltip/InfoTooltip.svelte';
@@ -28,9 +30,12 @@
 	import { getSeriesColor } from '$lib/util/chart';
 	import { handleChartHighlight } from '$lib/util/chart';
 	import ChartControls from '$lib/components/ChartControls/ChartControls.svelte';
-	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
-	import { getSortDirection, sortDistributions, type SortContext } from '$lib/util/sort';
+	import {
+		getSortParamConfig,
+		getSortParamKey,
+		sortDistributions,
+		type SortContext
+	} from '$lib/util/sort';
 
 	const api = new Api();
 
@@ -447,10 +452,12 @@
 		loadDistributions();
 	});
 
-	const sortedDistributions = $derived.by(() => {
-		const distributionsSort = getSortDirection($page.url.searchParams, 'distributions');
-		return sortDistributions(distributions, distributionsSort);
-	});
+	const sortKey = getSortParamKey('distributions');
+	const params = queryParameters(
+		{ [sortKey]: getSortParamConfig() },
+		{ pushHistory: false, showDefaults: false }
+	);
+	const sortedDistributions = $derived(sortDistributions(distributions, params[sortKey]));
 
 	let selectedTab = $state<SortContext>('drift');