Stuck: leaflet kaput + infinite redirect loop + filter change does no…

…t update line

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,16 +120,16 @@
 					options={choices.negativeEmissions.map((d) => Number(d))}
 					name="negEmis"
 				/>
-			</p>
-			<p>
+			</div>
+			<div>
 				The timing of early-century mitigation
 				<span
 					class="tooltip text-lg"
 					data-tip="Analogous to IPCC WGIII scenarios, we distinguish global emission pathways with delayed (i.e., near-similar emissions up to 2030) and immediate action. Delayed action is infeasible with a temperature target of 1.5, so identical data will be shown in that case."
 					>ⓘ</span
 				>
 				<CategoryPicker bind:value={timing} options={choices.timing} name="timing" />
-			</p>
+			</div>
 		</div>
 	</div>
 </div>

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 })}

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,14 +20,18 @@
 		y0?: string;
 		y1?: string;
 		color?: string;
+		mouseover: (e: any) => void;
+		mouseout: (e: any) => void;
 	}
 
 	let {
 		data,
 		x = 'x',
 		y0 = 'y0',
 		y1 = 'y1',
-		color = '#ab00d6'
+		color = '#ab00d6',
+		mouseover,
+		mouseout,
 	}: Props = $props();
 
 	let shade = $derived(area<Row>()
@@ -37,26 +41,25 @@
 		.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>
 
 <path
 	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"
 />
 

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"
 />
 

src/lib/charts/components/NdcRange.svelte

@@ -6,16 +6,14 @@
 	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<{
 		xScale: Readable<ScaleLinear<number, number, never>>;
 		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>