optimize timeslider

Author: Vincent van der Wal

src/lib/components/time-slider.ts

@@ -2,6 +2,7 @@ export type TimeSliderOptions = {
 	container: HTMLElement;
 	initialDate: Date;
 	onChange: (date: Date) => void;
+	resolution?: number;
 };
 
 function pad2(n: number) {
@@ -22,26 +23,30 @@ function formatDateInputValue(date: Date) {
 	return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())}`;
 }
 
-export function createTimeSlider({ container, initialDate, onChange }: TimeSliderOptions) {
+export function createTimeSlider({
+	container,
+	initialDate,
+	onChange,
+	resolution = 1
+}: TimeSliderOptions) {
 	let currentDate = getLocalMidnight(initialDate);
 	let currentHour = initialDate.getHours();
 
 	container.innerHTML = `
-		<div>
+		<div style="display:flex; gap: 0.5em; justify-items: center; align-items: center;">
 			<button id="prev_hour" type="button">&lt;</button>
-			<span id="slider_time_label">${formatSliderLabel(currentDate, currentHour)}</span>
+			<span style="white-space:nowrap;" id="slider_time_label">${formatSliderLabel(currentDate, currentHour)}</span>
 			<button id="next_hour" type="button">&gt;</button>
 		</div>
 		<input
 			type="range"
 			id="time_slider"
 			min="0"
 			max="23"
-			step="1"
+			step="${resolution}"
 			value="${currentHour}"
 			style="width: 200px;"
 		/>
-		<br>
 		<input
 			type="date"
 			id="date_picker"
@@ -73,8 +78,8 @@ export function createTimeSlider({ container, initialDate, onChange }: TimeSlide
 	});
 
 	prevBtn.addEventListener('click', () => {
-		if (currentHour > 0) {
-			currentHour--;
+		if (currentHour > resolution - 1) {
+			currentHour -= resolution;
 		} else {
 			currentHour = 23;
 			currentDate.setDate(currentDate.getDate() - 1);
@@ -86,8 +91,8 @@ export function createTimeSlider({ container, initialDate, onChange }: TimeSlide
 	});
 
 	nextBtn.addEventListener('click', () => {
-		if (currentHour < 23) {
-			currentHour++;
+		if (currentHour < 23 - resolution) {
+			currentHour += resolution;
 		} else {
 			currentHour = 0;
 			currentDate.setDate(currentDate.getDate() + 1);

src/lib/utils/domains.ts

@@ -292,7 +292,7 @@ export const domains: Array<Domain> = [
 			}
 		},
 		time_interval: 1,
-		model_interval: 3,
+		model_interval: 6,
 		variables: [
 			'cape',
 			//'cloud_cover', <- only per hPa
@@ -326,7 +326,7 @@ export const domains: Array<Domain> = [
 			}
 		},
 		time_interval: 1,
-		model_interval: 3,
+		model_interval: 6,
 		variables: [
 			'cloud_cover',
 			'precipitation',
@@ -366,7 +366,7 @@ export const domains: Array<Domain> = [
 			}
 		},
 		time_interval: 1,
-		model_interval: 3,
+		model_interval: 1,
 		variables: [
 			'cape',
 			'cloud_cover',
@@ -408,7 +408,7 @@ export const domains: Array<Domain> = [
 			}
 		},
 		time_interval: 1,
-		model_interval: 3,
+		model_interval: 1,
 		variables: [
 			'cape',
 			'cloud_cover',
@@ -443,8 +443,8 @@ export const domains: Array<Domain> = [
 				return this;
 			}
 		},
-		time_interval: 1,
-		model_interval: 3,
+		time_interval: 3,
+		model_interval: 6,
 		variables: [
 			'cape',
 			'cloud_cover',
@@ -475,8 +475,8 @@ export const domains: Array<Domain> = [
 				return this;
 			}
 		},
-		time_interval: 1,
-		model_interval: 3,
+		time_interval: 6,
+		model_interval: 6,
 		variables: [
 			'cape',
 			'cloud_cover',

src/routes/+page.svelte

@@ -183,6 +183,8 @@
 
 			mapBounds = map.getBounds();
 
+			timeSliderApi.setDisabled(true);
+
 			omUrl = getOMUrl();
 			if (map.getLayer('omFileLayer')) {
 				map.removeLayer('omFileLayer');
@@ -217,6 +219,8 @@
 				checked++;
 				if (source.loaded() || checked >= 30) {
 					checked = 0;
+					timeSliderApi.setDisabled(false);
+
 					clearInterval(checkSourceLoadedInterval);
 				}
 			}, 100);
@@ -444,14 +448,18 @@
 					url.searchParams.set('time', newDate.toISOString().replace(/[:Z]/g, '').slice(0, 15));
 					history.pushState({}, '', url);
 					changeOMfileURL();
-				}
+				},
+				resolution: domain.time_interval
 			});
 		});
 	});
 	onDestroy(() => {
 		if (map) {
 			map.remove();
 		}
+		if (timeSliderContainer) {
+			timeSliderContainer.innerHTML = ``;
+		}
 	});
 
 	const getDomainData = async (latest = true) => {
@@ -531,33 +539,26 @@
 		{/if}
 	{/if}
 	<div
-		class=" bg-background/35 absolute bottom-0 left-8 w-[195px] rounded px-3 py-2 text-xs overflow-ellipsis"
+		class=" bg-background/35 absolute bottom-0 left-8 w-[165px] rounded px-2 py-2 text-xs overflow-ellipsis"
 	>
-		<div>Domain: <span class="ml-auto text-end">{domain.label}</span></div>
-		<div>
-			Local time: <span class="ml-auto text-end"
-				>{timeSelected.getFullYear() +
-					'-' +
-					pad(timeSelected.getMonth() + 1) +
-					'-' +
-					timeSelected.getDate() +
-					' ' +
-					timeSelected.getHours() +
-					':' +
-					pad(timeSelected.getMinutes())}</span
-			>
+		<div class=" overflow-hidden">
+			<p class="truncate">
+				Domain: {domain.label}
+			</p>
+			<p class="truncate">
+				Variable: {variable.label}
+			</p>
 		</div>
-		<div>Variable: <span class="ml-auto text-end">{variable.label}</span></div>
 	</div>
 </div>
 <div
-	class="bg-background/40 absolute bottom-18 left-[50%] mx-auto transform-[translate(-50%)] px-4 py-4 {!showTimeSelector
+	class="bg-background/40 absolute bottom-14.5 left-[50%] mx-auto transform-[translate(-50%)] rounded-lg px-4 py-4 {!showTimeSelector
 		? 'pointer-events-none opacity-0'
 		: 'opacity-100'}"
 >
 	<div
 		bind:this={timeSliderContainer}
-		class="time-slider-container flex flex-col items-center"
+		class="time-slider-container flex flex-col items-center gap-0"
 	></div>
 </div>
 <div class="absolute">

src/styles.css

@@ -169,80 +169,6 @@ body {
 	min-height: 100%;
 }
 
-.nav-logo {
-	color: white;
-	display: flex;
-	align-items: center;
-	text-decoration: none;
-	gap: 5px;
-	padding-top: 25px;
-	padding-left: 25px;
-}
-
-.nav-logo svg {
-	margin-top: -5px;
-}
-
-.nav-logo:hover {
-	text-decoration: underline;
-}
-
-.info-wrapper {
-	position: absolute;
-	bottom: 15px;
-	left: 50%;
-	transform: translate(-50%);
-}
-
-#info_box {
-	background: rgba(255, 255, 255, 0.8);
-	border-radius: 15px;
-	padding: 15px 20px;
-	color: black;
-	text-align: center;
-}
-
-.maplibregl-popup {
-	pointer-events: none;
-}
-
-#time_slider_container button {
-	border-width: 1px;
-	background-color: white;
-	color: black;
-	padding: 5px;
-	border-radius: 5px;
-	font-size: 15px;
-	padding: 0.5rem 0.75rem;
-	font-weight: bold;
-}
-
-#slider_time_label {
-	margin: 0 0.3rem;
-}
-
-.date-time-selection {
-	margin-top: 0.5rem;
-	border-width: 1px;
-}
-
-.dark .domain-selection,
-.dark .variable-selection,
-.dark .date-time-selection {
-	background-color: rgba(100, 100, 100, 0.8);
-	color: white;
-}
-
-.dark #time_slider_container button {
-	background-color: rgba(100, 100, 100, 0.8);
-	color: white;
-}
-
-.dark #darkmode_toggle {
-	background-color: rgba(100, 100, 100, 0.8);
-	color: white;
-}
-
 .dark .maplibregl-ctrl.maplibregl-ctrl-group {
 	background-color: rgba(40, 40, 40, 0.95);
 }
@@ -279,18 +205,21 @@ body {
 	font-weight: bold;
 }
 
-.time-slider-container button {
+.dark .time-slider-container button {
+	background: rgba(100, 100, 100, 0.8);
+	color: white;
+}
+
+.date-time-selection {
+	border-radius: 0.25em;
 	border-width: 1px;
-	background-color: white;
-	color: black;
-	padding: 5px;
-	border-radius: 5px;
-	font-size: 15px;
-	padding: 0.3rem 0.75rem;
-	font-weight: bold;
 }
 
-.dark .time-slider-container button {
-	background: rgba(100, 100, 100, 0.8);
+.dark .date-time-selection {
+	background-color: rgba(100, 100, 100, 0.8);
 	color: white;
 }
+
+#time_slider {
+	margin: 0.6em 0;
+}