Update all query param configs utils to manage keys as well. Set date range preset default to fix condition (and align with existing utils)

Author: techniq

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

@@ -9,7 +9,7 @@
 	import IconSquare3Stack3d from '~icons/heroicons/square-3-stack-3d-16-solid';
 	import IconXMark from '~icons/heroicons/x-mark-16-solid';
 
-	import { getSortParamKey, type SortContext, getSortParamConfig } from '$lib/util/sort';
+	import { getSortParamKey, type SortContext, getSortParamsConfig } from '$lib/util/sort';
 
 	let {
 		showCluster = false,
@@ -27,10 +27,7 @@
 
 	const sortKey = $derived(getSortParamKey(context));
 	const params = $derived(
-		queryParameters(
-			{ [sortKey]: getSortParamConfig() },
-			{ pushHistory: false, showDefaults: false }
-		)
+		queryParameters(getSortParamsConfig(context), { pushHistory: false, showDefaults: false })
 	);
 
 	function toggleSort() {

frontend/src/lib/components/DateRangeSelector/DateRangeSelector.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import { queryParameters, ssp } from 'sveltekit-search-params';
+	import { queryParameters } from 'sveltekit-search-params';
 	import type { DateRange } from 'bits-ui';
 	import { DateFormatter, getLocalTimeZone, fromAbsolute } from '@internationalized/date';
 
@@ -18,15 +18,12 @@
 
 	import { cn } from '$lib/utils';
 	import { RangeCalendar } from '$lib/components/ui/range-calendar/index';
+	import { getDateRangeParamsConfig } from '$lib/util/date-ranges';
 
-	const params = queryParameters(
-		{
-			[DATE_RANGE_PARAM]: ssp.string(),
-			[DATE_RANGE_START_PARAM]: ssp.number(),
-			[DATE_RANGE_END_PARAM]: ssp.number()
-		},
-		{ pushHistory: false, showDefaults: false }
-	);
+	const params = queryParameters(getDateRangeParamsConfig(), {
+		pushHistory: false,
+		showDefaults: false
+	});
 
 	const df = new DateFormatter('en-US', {
 		dateStyle: 'medium'

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

@@ -5,13 +5,13 @@
 	import {
 		METRIC_LABELS,
 		METRIC_TYPES,
-		getMetricTypeParamConfig
+		getMetricTypeParamsConfig
 	} from '$lib/types/MetricType/MetricType';
 
-	const params = queryParameters(
-		{ metric: getMetricTypeParamConfig() },
-		{ pushHistory: false, showDefaults: false }
-	);
+	const params = queryParameters(getMetricTypeParamsConfig(), {
+		pushHistory: false,
+		showDefaults: false
+	});
 </script>
 
 <div class="flex space-x-[1px]">

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

@@ -17,15 +17,20 @@ export const METRIC_SCALES: Record<MetricType, { min: number; max: number }> = {
 	psi: { min: 0, max: 25 }
 };
 
-export function getMetricTypeParamConfig() {
+export function getMetricTypeParamsConfig() {
 	return {
-		encode: (value) => value,
-		decode: (value) => (METRIC_TYPES.includes(value as MetricType) ? (value as MetricType) : null),
-		defaultValue: DEFAULT_METRIC_TYPE
-	} satisfies EncodeAndDecodeOptions<MetricType>;
+		metric: {
+			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;
+	const paramsConfig = getMetricTypeParamsConfig();
+	const [paramName, paramConfig] = Object.entries(paramsConfig)[0]; // single `metric` config
+	const value = searchParams.get(paramName);
+	return paramConfig.decode(value) ?? paramConfig.defaultValue;
 }

frontend/src/lib/util/date-ranges.ts

@@ -5,6 +5,7 @@ import {
 	PAST_1_WEEK,
 	getDateRangeByValue
 } from '$lib/constants/date-ranges';
+import { ssp } from 'sveltekit-search-params';
 
 export function getDateRange(range: string): [number, number] {
 	const dateRange = getDateRangeByValue(range);
@@ -32,3 +33,11 @@ export function parseDateRangeParams(searchParams: URLSearchParams) {
 		endTimestamp
 	};
 }
+
+export function getDateRangeParamsConfig() {
+	return {
+		[DATE_RANGE_PARAM]: ssp.string(PAST_1_WEEK),
+		[DATE_RANGE_START_PARAM]: ssp.number(),
+		[DATE_RANGE_END_PARAM]: ssp.number()
+	};
+}

frontend/src/lib/util/sort.ts

@@ -9,13 +9,16 @@ export function getSortParamKey(context: SortContext): string {
 	return `${context}Sort`;
 }
 
-export function getSortParamConfig() {
+export function getSortParamsConfig(context: SortContext) {
+	const sortKey = getSortParamKey(context);
 	return {
-		encode: (value) => value,
-		decode: (value) =>
-			SORT_DIRECTIONS.includes(value as SortDirection) ? (value as SortDirection) : null,
-		defaultValue: 'asc'
-	} satisfies EncodeAndDecodeOptions<SortDirection>;
+		[sortKey]: {
+			encode: (value) => value,
+			decode: (value) =>
+				SORT_DIRECTIONS.includes(value as SortDirection) ? (value as SortDirection) : null,
+			defaultValue: 'asc'
+		} satisfies EncodeAndDecodeOptions<SortDirection>
+	};
 }
 
 export function getSortDirection(

frontend/src/routes/joins/[slug]/+page.svelte

@@ -31,7 +31,7 @@
 	import { handleChartHighlight } from '$lib/util/chart';
 	import ChartControls from '$lib/components/ChartControls/ChartControls.svelte';
 	import {
-		getSortParamConfig,
+		getSortParamsConfig,
 		getSortParamKey,
 		sortDistributions,
 		type SortContext
@@ -452,11 +452,12 @@
 		loadDistributions();
 	});
 
-	const sortKey = getSortParamKey('distributions');
-	const params = queryParameters(
-		{ [sortKey]: getSortParamConfig() },
-		{ pushHistory: false, showDefaults: false }
-	);
+	const sortContext = 'distributions';
+	const sortKey = getSortParamKey(sortContext);
+	const params = queryParameters(getSortParamsConfig(sortContext), {
+		pushHistory: false,
+		showDefaults: false
+	});
 	const sortedDistributions = $derived(sortDistributions(distributions, params[sortKey]));
 
 	let selectedTab = $state<SortContext>('drift');