send alternatives on timeout toast

frontend/package.json

@@ -89,7 +89,7 @@
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@scalar/openapi-parser": "^0.15.0",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
-		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
+		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.16",
 		"@windmill-labs/svelte-dnd-action": "^0.9.44",
 		"@xterm/addon-fit": "^0.10.0",
 		"@xyflow/svelte": "^1.0.0",

frontend/src/lib/cancelable-promise-utils.ts

@@ -0,0 +1,84 @@
+import { CancelablePromise } from './gen'
+
+export namespace CancelablePromiseUtils {
+	export function then<T, U>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => CancelablePromise<U>
+	): CancelablePromise<U> {
+		let promiseToBeCanceled: CancelablePromise<any> = promise
+		let p = new CancelablePromise<U>((resolve, reject) => {
+			promise
+				.then((value1) => {
+					let promise2 = f(value1)
+					promiseToBeCanceled = promise2
+					promise2.then((value2) => resolve(value2)).catch((err) => reject(err))
+				})
+				.catch((err) => reject(err))
+		})
+		p.cancel = () => promiseToBeCanceled.cancel()
+		return p
+	}
+
+	export function pure<T>(value: T): CancelablePromise<T> {
+		return new CancelablePromise((resolve) => resolve(value))
+	}
+
+	export function err<T>(error: any): CancelablePromise<T> {
+		return new CancelablePromise((_, reject) => reject(error))
+	}
+
+	export function map<T, U>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => U
+	): CancelablePromise<U> {
+		return then(promise, (value) => pure(f(value)))
+	}
+
+	export function pipe<T>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => void
+	): CancelablePromise<T> {
+		promise.then((value) => {
+			f(value)
+		})
+		return promise
+	}
+
+	export function catchErr<T, U>(
+		promise: CancelablePromise<T>,
+		f: (error: any) => CancelablePromise<U>
+	): CancelablePromise<T | U> {
+		let promiseToBeCanceled: CancelablePromise<any> = promise
+		let p = new CancelablePromise<T | U>((resolve, reject) => {
+			promise
+				.then((value) => resolve(value))
+				.catch((err) => {
+					let promise2 = f(err)
+					promiseToBeCanceled = promise2
+					return promise2.then((value2) => resolve(value2)).catch((err2) => reject(err2))
+				})
+				.catch((err) => reject(err))
+		})
+		p.cancel = () => promiseToBeCanceled.cancel()
+		return p
+	}
+
+	export function finallyDo<T>(promise: CancelablePromise<T>, f: () => void): CancelablePromise<T> {
+		promise = map(promise, (value) => (f(), value))
+		promise = catchErr(promise, (e) => (f(), err(e)))
+		return promise
+	}
+
+	// Calls onTimeout if the promise does not settle within timeoutMs milliseconds
+	export function onTimeout<T>(
+		promise: CancelablePromise<T>,
+		timeoutMs: number,
+		onTimeout: () => void
+	): CancelablePromise<T> {
+		let timeoutId: number | undefined = setTimeout(onTimeout, timeoutMs)
+		promise = finallyDo(promise, () => {
+			if (timeoutId !== undefined) clearTimeout(timeoutId)
+		})
+		return promise
+	}
+}

frontend/src/lib/components/RunChart.svelte

@@ -28,6 +28,7 @@
 		selectedIds?: string[]
 		canSelect?: boolean
 		lastFetchWentToEnd?: boolean
+		totalRowsFetched: number
 		onPointClicked: (ids: string[]) => void
 		onLoadExtra: () => void
 		onZoom: (zoom: { min: Date; max: Date }) => void
@@ -41,6 +42,7 @@
 		selectedIds = $bindable([]),
 		canSelect = true,
 		lastFetchWentToEnd = false,
+		totalRowsFetched,
 		onPointClicked,
 		onLoadExtra,
 		onZoom
@@ -301,13 +303,14 @@
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-28px] left-[220px]"
-			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
-				>Load more <Tooltip2
-					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
-				></Button
-			></div
-		>
+		<div class="absolute top-[-28px] left-[220px]">
+			<Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}>
+				Load more
+				<Tooltip2>
+					There are more jobs to load but only the first {totalRowsFetched} were fetched
+				</Tooltip2>
+			</Button>
+		</div>
 	{/if}
 	<Scatter {data} options={scatterOptions} />
 </div>