From 1476f559b7fdc307fa567f6a893fbf61513e87aa Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 14 Apr 2023 00:59:52 +0200
Subject: [PATCH] feat(frontend): cancellable inline script editor run

---
 .../src/lib/components/TestJobLoader.svelte   |  2 +-
 .../helpers/RunnableComponent.svelte          | 26 ++++++-
 .../apps/editor/AppEditorHeader.svelte        | 11 ++-
 .../InlineScriptEditor.svelte                 | 73 ++++++++++++-------
 frontend/src/lib/components/apps/types.ts     |  6 +-
 5 files changed, 85 insertions(+), 33 deletions(-)

diff --git a/frontend/src/lib/components/TestJobLoader.svelte b/frontend/src/lib/components/TestJobLoader.svelte
index 7e2f393cf9..d93bc7bf7f 100644
--- a/frontend/src/lib/components/TestJobLoader.svelte
+++ b/frontend/src/lib/components/TestJobLoader.svelte
@@ -146,7 +146,7 @@
 					if (previewJobUpdates.new_logs) {
 						job.logs = (job?.logs ?? '').concat(previewJobUpdates.new_logs)
 					}
-					if (previewJobUpdates.mem_peak) {
+					if (previewJobUpdates.mem_peak && job) {
 						job.mem_peak = previewJobUpdates.mem_peak
 					}
 					if ((previewJobUpdates.running ?? false) || (previewJobUpdates.completed ?? false)) {
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index f899bdb351..b4a095e2f9 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -11,7 +11,7 @@
 	import { createEventDispatcher, getContext, onDestroy } from 'svelte'
 	import type { AppInputs, Runnable } from '../../inputType'
 	import type { Output } from '../../rx'
-	import type { AppViewerContext, InlineScript } from '../../types'
+	import type { AppViewerContext, CancelablePromise, InlineScript } from '../../types'
 	import { computeGlobalContext, eval_like } from './eval'
 	import InputValue from './InputValue.svelte'
 	import RefreshButton from './RefreshButton.svelte'
@@ -58,12 +58,29 @@
 
 	const dispatch = createEventDispatcher()
 
+	let donePromise: (() => void) | undefined = undefined
+
+	const cancellableRun: (inlineScript?: InlineScript) => CancelablePromise<void> = (
+		inlineScript?: InlineScript
+	) => {
+		let rejectCb: (err: Error) => void
+		let p: Partial<CancelablePromise<void>> = new Promise<void>((resolve, reject) => {
+			rejectCb = reject
+			donePromise = resolve
+			executeComponent(true, inlineScript).catch(reject)
+		})
+		p.cancel = () => {
+			testJobLoader?.cancelJob()
+			loading = false
+			rejectCb(new Error('Canceled'))
+		}
+		return p as CancelablePromise<void>
+	}
+
 	$runnableComponents[id] = {
 		autoRefresh: autoRefresh && recomputableByRefreshButton,
 		refreshOnStart,
-		cb: async (inlineScript?: InlineScript) => {
-			await executeComponent(true, inlineScript)
-		}
+		cb: cancellableRun
 	}
 
 	if (!$initialized.initializedComponents.includes(id)) {
@@ -372,6 +389,7 @@
 			if (startedAt > lastStartedAt) {
 				lastStartedAt = startedAt
 				setResult(e.detail.result)
+				donePromise?.()
 			}
 		}
 		loading = false
diff --git a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
index ff2b779d24..57b6fc38ab 100644
--- a/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/AppEditorHeader.svelte
@@ -396,7 +396,7 @@
 								<Skeleton layout={[[40]]} />
 							{/if}
 						{:else}
-							<div class="flex flex-col h-full w-full gap-4 mb-4">
+							<div class="flex flex-col h-full w-full gap-4 p-2 mb-4">
 								{#if job?.['running']}
 									<div class="flex flex-row-reverse w-full">
 										<Button
@@ -404,6 +404,8 @@
 											variant="border"
 											on:click={() => testJobLoader?.cancelJob()}
 										>
+											<Loader2 size={14} class="animate-spin mr-2" />
+
 											Cancel
 										</Button>
 									</div>
@@ -633,7 +635,12 @@
 		</span>
 		<span class="hidden md:inline">
 			<Button
-				on:click={() => (jobsDrawerOpen = true)}
+				on:click={() => {
+					if (selectedJobId == undefined && $jobs.length > 0) {
+						selectedJobId = $jobs[0].job
+					}
+					jobsDrawerOpen = true
+				}}
 				color={hasErrors ? 'red' : 'light'}
 				size="xs"
 				variant="border"
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 6f47a29e68..877c6b77b6 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -2,8 +2,8 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import type { Preview } from '$lib/gen'
 	import { createEventDispatcher, getContext, onMount } from 'svelte'
-	import type { AppViewerContext, InlineScript } from '../../types'
-	import { CornerDownLeft, Maximize2, Trash2 } from 'lucide-svelte'
+	import type { AppViewerContext, CancelablePromise, InlineScript } from '../../types'
+	import { CornerDownLeft, Loader2, Maximize2, Trash2 } from 'lucide-svelte'
 	import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte'
 	import { inferArgs } from '$lib/infer'
 	import type { Schema } from '$lib/common'
@@ -87,6 +87,8 @@
 		inlineScript?.language == 'frontend' && worldStore
 			? buildExtraLib($worldStore?.outputsById ?? {}, id, false, $state, true)
 			: undefined
+
+	let cancelable: CancelablePromise<void> | undefined = undefined
 </script>
 
 {#if inlineScript}
@@ -166,31 +168,52 @@
 					</div>
 				</Button>
 				{#if $runnableComponents[id] != undefined}
-					<Button
-						loading={runLoading}
-						size="xs"
-						color="dark"
-						variant="border"
-						btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
-						on:click={async () => {
-							runLoading = true
-							await $runnableComponents[id]?.cb?.(!transformer ? inlineScript : undefined)
-							runLoading = false
-						}}
-					>
-						<div class="flex flex-row gap-1 items-center">
-							Run
+					{#if !runLoading}
+						<Button
+							loading={runLoading}
+							size="xs"
+							color="dark"
+							variant="border"
+							btnClasses="!px-2 !py-1 !bg-gray-700 !text-white hover:!bg-gray-900"
+							on:click={async () => {
+								runLoading = true
+								try {
+									cancelable = $runnableComponents[id]?.cb?.(
+										!transformer ? inlineScript : undefined
+									)
+									await cancelable
+								} catch {}
+								runLoading = false
+							}}
+						>
+							<div class="flex flex-row gap-1 items-center">
+								Run
 
-							<div class="flex flex-row items-center gap-1">
-								<Kbd>{getModifierKey()}</Kbd>
-								<Kbd>
-									<div class="h-4 flex items-center justify-center">
-										<CornerDownLeft size={10} />
-									</div>
-								</Kbd>
+								<div class="flex flex-row items-center gap-1">
+									<Kbd>{getModifierKey()}</Kbd>
+									<Kbd>
+										<div class="h-4 flex items-center justify-center">
+											<CornerDownLeft size={10} />
+										</div>
+									</Kbd>
+								</div>
 							</div>
-						</div>
-					</Button>
+						</Button>
+					{:else}
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							btnClasses="!px-2 !py-1.5"
+							on:click={async () => {
+								cancelable?.cancel()
+								runLoading = false
+							}}
+						>
+							<Loader2 size={14} class="animate-spin mr-2" />
+							Cancel
+						</Button>
+					{/if}
 				{/if}
 			</div>
 		</div>
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 01284e9646..8af9c8f3b5 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -130,6 +130,10 @@ export type ConnectingInput = {
 	hoveredComponent: string | undefined
 }
 
+export interface CancelablePromise<T> extends Promise<T> {
+	cancel: () => void
+}
+
 export type AppViewerContext = {
 	worldStore: Writable<World>
 	app: Writable<App>
@@ -148,7 +152,7 @@ export type AppViewerContext = {
 			{
 				autoRefresh: boolean
 				refreshOnStart?: boolean
-				cb: (inlineScript?: InlineScript) => Promise<void>
+				cb: (inlineScript?: InlineScript) => CancelablePromise<void>
 			}
 		>
 	>