diff --git a/src/lib/GlobalQueryCard.svelte b/src/lib/GlobalQueryCard.svelte
index 8757f45..85d2b00 100644
--- a/src/lib/GlobalQueryCard.svelte
+++ b/src/lib/GlobalQueryCard.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
-
 	import CustomRange from '$lib/CustomRange.svelte';
 	import type { PathWayQuery } from '$lib/api';
 	import CategoryPicker from './CategoryPicker.svelte';
@@ -27,19 +25,34 @@
 	let timing: string = $state(query.timing || defaults.timing);
 	let nonCO2red: string = $state(query.nonCO2red || defaults.nonCO2red);
 
-	run(() => {
+	$effect(() => {
+		if (query.temperature === temperature) {
+			return
+		}
 		onChange('temperature', temperature);
 	});
-	run(() => {
+	$effect(() => {
+		if (query.exceedanceRisk === exceedanceRisk) {
+			return
+		}
 		onChange('exceedanceRisk', exceedanceRisk);
 	});
-	run(() => {
+	$effect(() => {
+		if (query.negativeEmissions === negativeEmissions) {
+			return
+		}
 		onChange('negativeEmissions', negativeEmissions);
 	});
-	run(() => {
+	$effect(() => {
+		if (query.timing === timing) {
+			return
+		}
 		onChange('timing', timing);
 	});
-	run(() => {
+	$effect(() => {
+		if (query.nonCO2red === nonCO2red) {
+			return
+		}
 		onChange('nonCO2red', nonCO2red);
 	});
 </script>
@@ -49,7 +62,7 @@
 		<div>
 			<h2 class="not-prose card-title">Global budget</h2>
 			<p class="italic">How much do we have left?</p>
-			<p>
+			<div class="block">
 				Limit global warming to (&deg;C)
 				<span
 					class="tooltip text-lg"
@@ -62,8 +75,8 @@
 					options={choices.temperature.map((d) => Number(d))}
 					name="temperature"
 				/>
-			</p>
-			<p>
+			</div>
+			<div class="block">
 				Acceptable risk of exceeding global warming limit
 				<span
 					class="tooltip z-[750] text-lg"
@@ -76,8 +89,8 @@
 					options={choices.exceedanceRisk.map((d) => Number(d))}
 					name="risk"
 				/>
-			</p>
-			<p>
+			</div>
+			<div class="block">
 				Reduction of non-CO<sub>2</sub> emissions
 				<span
 					class="tooltip z-[750] text-lg"
@@ -91,10 +104,10 @@
 					options={choices.nonCO2red.map((d) => Number(d))}
 					name="nonCO2red"
 				/>
-			</p>
+			</div>
 			<h2 class="not-prose card-title">Global pathway</h2>
 			<p><i>How do we spend these emissions over time?</i></p>
-			<p>
+			<div class="block">
 				End-of-century negative emissions
 				<span
 					class="tooltip text-lg"
@@ -107,8 +120,8 @@
 					options={choices.negativeEmissions.map((d) => Number(d))}
 					name="negEmis"
 				/>
-			</p>
-			<p>
+			</div>
+			<div>
 				The timing of early-century mitigation
 				<span
 					class="tooltip text-lg"
@@ -116,7 +129,7 @@
 					>ⓘ</span
 				>
 				<CategoryPicker bind:value={timing} options={choices.timing} name="timing" />
-			</p>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/lib/charts/LeafletMap.svelte b/src/lib/charts/LeafletMap.svelte
index df26ec7..2fefd62 100644
--- a/src/lib/charts/LeafletMap.svelte
+++ b/src/lib/charts/LeafletMap.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { run } from 'svelte/legacy';
 
-	import { LeafletMap, GeoJSON, TileLayer } from 'svelte-leafletjs?client';
+	// import { LeafletMap, GeoJSON, TileLayer } from 'svelte-leafletjs?client';
 	// import {CRS} from 'leaflet?client'
 	import type { BordersCollection } from '$lib/server/db/borders';
 	import 'leaflet/dist/leaflet.css';
@@ -37,9 +37,6 @@
 
 	let tileLayer = $state();
 
-	const tweenOptions = { duration: 1000, easing: cubicOut };
-	const tweenedDomain = tweened(metrics.domain, tweenOptions);
-
 	const interpolator = interpolateYlGnBu;
 
 	function getColor(d: number) {
@@ -87,6 +84,9 @@
 		hoveredFeature = $bindable()
 	}: Props = $props();
 
+	const tweenOptions = { duration: 1000, easing: cubicOut };
+	const tweenedDomain = tweened(metrics.domain, tweenOptions);
+
 	function onClick(e: any) {
 		clickedFeature = e.detail.sourceTarget.feature;
 		// <GeoJSON> dts says e is a LeafletMouseEvent but it is not
@@ -101,8 +101,6 @@
 		hoveredFeature = undefined;
 	}
 
-	let leafletMap: LeafletMap = $state();
-
 	// @types/svelte-leafletjs is missing GeoJSON.data property
 	// use any to avoid type errors,
 	// see https://github.com/sveltejs/language-tools/issues/1026#issuecomment-1002839154
@@ -115,17 +113,17 @@
 
 <div class="h-full w-full" id="leaflet-wrapper">
 	{#if browser}
-		<LeafletMap bind:this={leafletMap} options={mapOptions}>
+		<!-- <LeafletMap options={mapOptions}>
 			<TileLayer bind:this={tileLayer} url={tileUrl} options={tileLayerOptions} />
 			<GeoJSON
 				{...notypecheck({ data: borders })}
 				options={geoJsonOptions}
 				events={['click', 'mouseover', 'mouseout']}
-				on:click={onClick}
-				on:mouseover={onMouseOver}
-				on:mouseout={onmouseout}
+				click={onClick}
+				mouseover={onMouseOver}
+				mouseout={onmouseout}
 			/>
-		</LeafletMap>
+		</LeafletMap> -->
 		<ColorLegend
 			title={'Emissions allocation per capita (t CO2e/pc)'}
 			{...notypecheck({ scale: scale })}
diff --git a/src/lib/charts/components/Area.svelte b/src/lib/charts/components/Area.svelte
index fffb607..fb3c4e1 100644
--- a/src/lib/charts/components/Area.svelte
+++ b/src/lib/charts/components/Area.svelte
@@ -5,7 +5,7 @@
 <script lang="ts">
 	import { bisector, type ScaleLinear } from 'd3';
 	import { area, curveLinear } from 'd3-shape';
-	import { createEventDispatcher, getContext, SvelteComponent, type ComponentEvents } from 'svelte';
+	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
 	const { xScale, yScale } = getContext<{
@@ -20,6 +20,8 @@
 		y0?: string;
 		y1?: string;
 		color?: string;
+		mouseover: (e: any) => void;
+		mouseout: (e: any) => void;
 	}
 
 	let {
@@ -27,7 +29,9 @@
 		x = 'x',
 		y0 = 'y0',
 		y1 = 'y1',
-		color = '#ab00d6'
+		color = '#ab00d6',
+		mouseover,
+		mouseout,
 	}: Props = $props();
 
 	let shade = $derived(area<Row>()
@@ -37,14 +41,13 @@
 		.curve(curveLinear));
 	let path = $derived(shade(data));
 
-	const dispatch = createEventDispatcher();
 	const finder = bisector((d: (typeof data)[number]) => d[x]);
 
-	function hover(e: ComponentEvents<SvelteComponent>) {
+	function hover(e: any) {
 		const ox = $xScale.invert(e.offsetX);
 		// find entry in data which is closest to ox
 		const i = finder.center(data, ox);
-		return dispatch('mouseover', { e, row: data[i] });
+		return mouseover({ e, row: data[i] });
 	}
 </script>
 
@@ -52,11 +55,11 @@
 	class="path-area"
 	d={path}
 	fill={color}
-	onmouseover={hover}
+	onmouseover={(hover)}
 	onmousemove={hover}
-	onfocus={(e) => dispatch('mouseover', { e })}
-	onmouseout={() => dispatch('mouseout')}
-	onblur={() => dispatch('mouseout')}
+	onfocus={(e) => mouseover({ e })}
+	onmouseout={mouseout}
+	onblur={mouseout}
 	role="tooltip"
 />
 
diff --git a/src/lib/charts/components/Line.svelte b/src/lib/charts/components/Line.svelte
index 2bff8cc..fff02b3 100644
--- a/src/lib/charts/components/Line.svelte
+++ b/src/lib/charts/components/Line.svelte
@@ -4,7 +4,7 @@
  -->
 <script lang="ts">
 	import { bisector, type ScaleLinear } from 'd3';
-	import { createEventDispatcher, getContext } from 'svelte';
+	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
 	const { xScale, yScale } = getContext<{
@@ -18,14 +18,18 @@
 		data: Record<string, number>[];
 		x?: string;
 		y?: string;
-		color?: String;
+		color?: string;
+		mouseout?: (e?: any) => void;
+		mouseover?: (e: any) => void;
 	}
 
 	let {
 		data,
 		x = 'x',
 		y = 'y',
-		color = '#ab00d6'
+		color = '#ab00d6',
+		mouseout = () => {},
+		mouseover = () => {},
 	}: Props = $props();
 
 	let path =
@@ -36,7 +40,6 @@
 			})
 			.join('L'));
 
-	const dispatch = createEventDispatcher();
 	const finder = bisector((d: (typeof data)[number]) => d[x]);
 </script>
 
@@ -48,11 +51,11 @@
 		const ox = $xScale.invert(e.offsetX);
 		// find entry in data which is closest to ox
 		const i = finder.center(data, ox);
-		return dispatch('mouseover', { e, row: data[i] });
+		return mouseover({ e, row: data[i] });
 	}}
-	onmouseout={(e) => dispatch('mouseout', { e })}
-	onfocus={(e) => dispatch('mouseover', { e })}
-	onblur={() => dispatch('mouseout')}
+	onmouseout={(e) => mouseout({ e })}
+	onfocus={(e) => mouseover({ e })}
+	onblur={() => mouseout()}
 	role="tooltip"
 />
 
diff --git a/src/lib/charts/components/NdcRange.svelte b/src/lib/charts/components/NdcRange.svelte
index 3b378ef..de86d6d 100644
--- a/src/lib/charts/components/NdcRange.svelte
+++ b/src/lib/charts/components/NdcRange.svelte
@@ -6,7 +6,7 @@
 	import { handlers } from 'svelte/legacy';
 
 	import type { ScaleLinear } from 'd3';
-	import { getContext, SvelteComponent, type ComponentEvents, createEventDispatcher } from 'svelte';
+	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
 
 	const { xScale, yScale } = getContext<{
@@ -14,8 +14,6 @@
 		yScale: Readable<ScaleLinear<number, number, never>>;
 	}>('LayerCake');
 
-
-	
 	interface Props {
 		x: number;
 		y0: number;
@@ -26,6 +24,8 @@
 		textNdc: string;
 		// TODO use color of ndc series on global page?
 		color?: string;
+		mouseover: (e?: any) => void;
+		mouseout: (e?: any) => void;
 	}
 
 	let {
@@ -36,12 +36,13 @@
 		textNdcMin,
 		textNdcMax,
 		textNdc,
-		color = 'black'
+		color = 'black',
+		mouseover,
+		mouseout,
 	}: Props = $props();
-	const dispatch = createEventDispatcher();
 
-	function hover(e: ComponentEvents<SvelteComponent>) {
-		return dispatch('mouseover', { e, row: { time: x, min: y0, max: y1 } });
+	function hover(e: any) {
+		return mouseover({ e, row: { time: x, min: y0, max: y1 } });
 	}
 </script>
 
@@ -53,9 +54,9 @@
 		y2={$yScale(y0)}
 		stroke={color}
 		onmouseover={hover}
-		onfocus={() => dispatch('mouseover')}
-		onmouseout={handlers(() => dispatch('mouseout'), () => dispatch('mouseout'))}
-		onblur={() => dispatch('mouseout')}
+		onfocus={() => mouseover()}
+		onmouseout={handlers(() => mouseout(), () => mouseout())}
+		onblur={() => mouseout()}
 		role="tooltip"
 	/>
 	<circle
@@ -65,9 +66,9 @@
 		stroke={color}
 		fill={color}
 		onmouseover={hover}
-		onfocus={() => dispatch('mouseover')}
-		onmouseout={handlers(() => dispatch('mouseout'), () => dispatch('mouseout'))}
-		onblur={(e) => dispatch('mouseout')}
+		onfocus={() => mouseover()}
+		onmouseout={handlers(() => mouseout(), () => mouseout())}
+		onblur={() => mouseout()}
 		role="tooltip"
 	/>
 	<text
@@ -108,9 +109,9 @@
 		stroke={color}
 		fill={color}
 		onmouseover={hover}
-		onfocus={() => dispatch('mouseover')}
-		onmouseout={handlers(() => dispatch('mouseout'), () => dispatch('mouseout'))}
-		onblur={() => dispatch('mouseout')}
+		onfocus={() => mouseover()}
+		onmouseout={handlers(() => mouseout(), () => mouseout())}
+		onblur={() => mouseout()}
 		role="tooltip"
 	/>
 </g>
diff --git a/src/routes/global/+page.svelte b/src/routes/global/+page.svelte
index ff0704e..b13aa05 100644
--- a/src/routes/global/+page.svelte
+++ b/src/routes/global/+page.svelte
@@ -5,7 +5,7 @@
 
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { tour } from '$lib/shared/stores';
@@ -18,7 +18,7 @@
 	import type { PageData } from '../global/$types';
 	import GlobalBudgetCard from '$lib/GlobalBudgetCard.svelte';
 	import GlobalQueryCard from '$lib/GlobalQueryCard.svelte';
-	import { onMount, type ComponentEvents, type SvelteComponent } from 'svelte';
+	import { onMount } from 'svelte';
 
 	import { driver } from 'driver.js';
 	import 'driver.js/dist/driver.css';
@@ -71,11 +71,15 @@
 	const ipcc_blue = '#5bb0c6';
 	const ipcc_purple = '#a67ab8';
 
-	function updateQueryParam(name: string, value: string) {
+	async function updateQueryParam(name: string, value: string) {
 		if (browser) {
-			const params = new URLSearchParams($page.url.search);
-			params.set(name, value);
-			goto(`?${params.toString()}`);
+			const current = page.url.search
+			const params = new URLSearchParams(current);
+			if (params.get(name) !== value) {
+				params.set(name, value);
+				console.log({current, goto: `?${params.toString()}`});
+				await goto(`?${params.toString()}`);
+			}
 		}
 	}
 
@@ -88,7 +92,7 @@
 
 	let evt = $state({});
 	function hoverBuilder(tmpl: (row: any) => string) {
-		return function (e: ComponentEvents<SvelteComponent>) {
+		return function (e: any) {
 			const row = e.detail.row;
 			if (row === undefined) {
 				return;
@@ -239,8 +243,8 @@
 					x={'time'}
 					y={'value'}
 					color="black"
-					on:mouseover={hoverHistoricalCarbon}
-					on:mouseout={(e) => (evt = e)}
+					mouseover={hoverHistoricalCarbon}
+					mouseout={(e) => (evt = e)}
 				/>
 				{#if policyPathwayToggles.current || emissionGapHover}
 					<Line data={data.result.currentPolicy} x={'time'} y={'mean'} color={ipcc_red} />
@@ -250,8 +254,8 @@
 						y0={'min'}
 						y1={'max'}
 						color={ipcc_red}
-						on:mouseover={hoverCurrentPolicy}
-						on:mouseout={(e) => (evt = e)}
+						mouseover={hoverCurrentPolicy}
+						mouseout={(e) => (evt = e)}
 					/>
 				{/if}
 				{#if policyPathwayToggles.ndc || ambitionGapHover}
@@ -262,8 +266,8 @@
 						y0={'min'}
 						y1={'max'}
 						color={ipcc_purple}
-						on:mouseover={hoverNdc}
-						on:mouseout={(e) => (evt = e)}
+						mouseover={hoverNdc}
+						mouseout={(e) => (evt = e)}
 					/>
 				{/if}
 				{#if policyPathwayToggles.netzero}
@@ -274,8 +278,8 @@
 						y0={'min'}
 						y1={'max'}
 						color={ipcc_blue}
-						on:mouseover={hoverNetzero}
-						on:mouseout={(e) => (evt = e)}
+						mouseover={hoverNetzero}
+						mouseout={(e) => (evt = e)}
 					/>
 				{/if}
 
@@ -299,8 +303,8 @@
 					x={'time'}
 					y={'value'}
 					color={ipcc_green}
-					on:mouseover={hoverPathway}
-					on:mouseout={(e) => (evt = e)}
+					mouseover={hoverPathway}
+					mouseout={(e) => (evt = e)}
 				/>
 			</Pathway>
 		</div>
diff --git a/src/routes/map/+page.svelte b/src/routes/map/+page.svelte
index 46bb0dd..958ee99 100644
--- a/src/routes/map/+page.svelte
+++ b/src/routes/map/+page.svelte
@@ -48,7 +48,8 @@
 			// TODO get called once instead of currently being called twice
 			if (params.get(name) !== value) {
 				params.set(name, value);
-				goto(`?${params.toString()}`);
+				console.log('goto', `?${params.toString()}`);
+				// goto(`?${params.toString()}`);
 			}
 		}
 	}
diff --git a/src/routes/regions/[iso]/+page.svelte b/src/routes/regions/[iso]/+page.svelte
index f816794..af2006f 100644
--- a/src/routes/regions/[iso]/+page.svelte
+++ b/src/routes/regions/[iso]/+page.svelte
@@ -32,8 +32,11 @@
 	function updateQueryParam(name: string, value: string) {
 		if (browser) {
 			const params = new URLSearchParams($page.url.search);
+			if (params.get(name) !== value) {
 			params.set(name, value);
-			goto(`?${params.toString()}`);
+			console.log('goto', `?${params.toString()}`);
+			// goto(`?${params.toString()}`);
+			}
 		}
 	}
 
@@ -177,8 +180,8 @@
 						x={'time'}
 						y={'value'}
 						color="black"
-						on:mouseover={hoverHistoricalCarbon}
-						on:mouseout={(e) => (evt = e)}
+						mouseover={hoverHistoricalCarbon}
+						mouseout={(e) => (evt = e)}
 					/>
 					{#each Object.entries(principles) as [id, { color, label }]}
 						{#if activeEffortSharings[id]}
@@ -190,8 +193,8 @@
 									y0={'min'}
 									y1={'max'}
 									{color}
-									on:mouseover={hoverEffortSharing(label)}
-									on:mouseout={(e) => (evt = e)}
+									mouseover={hoverEffortSharing(label)}
+									mouseout={(e) => (evt = e)}
 								/>
 							</g>
 						{/if}
@@ -206,8 +209,8 @@
 								textNdcMax={`Max: ${range[1].toFixed(0)}`}
 								textNdc={`NDC`}
 								color="black"
-								on:mouseover={hoverNdc}
-								on:mouseout={(e) => (evt = e)}
+								mouseover={hoverNdc}
+								mouseout={(e) => (evt = e)}
 							/>
 						{/each}
 						<!-- {#each Object.entries(data.indicators.ndc_jones) as [year, range]}
@@ -219,8 +222,8 @@
 								textNdcMax={` `}
 								textNdc={` `}
 								color="gray"
-								on:mouseover={hoverNdc}
-								on:mouseout={(e) => (evt = e)}
+								mouseover={hoverNdc}
+								mouseout={(e) => (evt = e)}
 							/>
 						{/each} -->
 					{/if}