From 642016da33248e57d3e2852b598edb232e14f704 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 30 Mar 2023 13:14:39 +0200
Subject: [PATCH] fix(frontend): improve loading of big jobs in run form

---
 frontend/src/lib/components/ArgInput.svelte   | 63 +++++++++++--------
 .../propertyPicker/ObjectViewer.svelte        |  9 ++-
 .../(root)/(logged)/run/[...run]/+page.svelte |  9 +--
 3 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index e4d51f1d34..11bb3569f9 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -164,6 +164,8 @@
 
 	$: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding)
 	let redraw = 0
+
+	let itemsLimit = 50
 </script>
 
 <div class="flex flex-col w-full min-w-[250px]">
@@ -273,34 +275,41 @@
 						{#key redraw}
 							{#if Array.isArray(value)}
 								{#each value ?? [] as v, i}
-									<div class="flex max-w-md mt-1 w-full items-center">
-										{#if itemsType?.type == 'number'}
-											<input type="number" bind:value={v} />
-										{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
-											<input
-												type="file"
-												class="my-6"
-												on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
-												multiple={false}
-											/>
-										{:else if itemsType?.type == 'object'}
-											<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
-										{:else}
-											<input type="text" bind:value={v} />
-										{/if}
-										<button
-											transition:fade|local={{ duration: 100 }}
-											class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
-											aria-label="Clear"
-											on:click={() => {
-												value.splice(i, 1)
-												redraw += 1
-											}}
-										>
-											<X size={14} />
-										</button>
-									</div>
+									{#if i < itemsLimit}
+										<div class="flex max-w-md mt-1 w-full items-center">
+											{#if itemsType?.type == 'number'}
+												<input type="number" bind:value={v} />
+											{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
+												<input
+													type="file"
+													class="my-6"
+													on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
+													multiple={false}
+												/>
+											{:else if itemsType?.type == 'object'}
+												<JsonEditor code={JSON.stringify(v, null, 2)} bind:value={v} />
+											{:else}
+												<input type="text" bind:value={v} />
+											{/if}
+											<button
+												transition:fade|local={{ duration: 100 }}
+												class="rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200"
+												aria-label="Clear"
+												on:click={() => {
+													value.splice(i, 1)
+													redraw += 1
+												}}
+											>
+												<X size={14} />
+											</button>
+										</div>
+									{/if}
 								{/each}
+								{#if value.length > itemsLimit}
+									<button on:click={() => (itemsLimit += 50)} class="text-xs py-2 text-blue-600"
+										>{itemsLimit}/{value.length}: Load 50 more...</button
+									>
+								{/if}
 							{/if}
 						{/key}
 					</div>
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index b58881e303..bb42e4b8f8 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -44,6 +44,8 @@
 		}
 		dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath))
 	}
+
+	let keyLimit = 100
 </script>
 
 {#if keys.length > 0}
@@ -63,7 +65,7 @@
 				level === 0 ? 'border-none pl-2' : 'border-l border-dotted border-gray-200 pl-2'
 			}`}
 		>
-			{#each keys as key, index}
+			{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
 				<li class="pt-1">
 					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
 						{#if topLevelNode}
@@ -112,6 +114,11 @@
 					{/if}
 				</li>
 			{/each}
+			{#if keys.length > keyLimit}
+				<button on:click={() => (keyLimit += 100)} class="text-xs py-2 text-blue-600"
+					>{keyLimit}/{keys.length}: Load 100 more...</button
+				>
+			{/if}
 		</ul>
 		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
 	</span>
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index ca8065a3ef..5c5af67122 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -1,14 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores'
 	import { JobService, Job } from '$lib/gen'
-	import {
-		canWrite,
-		displayDate,
-		encodeState,
-		forLater,
-		sendUserToast,
-		truncateHash
-	} from '$lib/utils'
+	import { canWrite, displayDate, forLater, sendUserToast, truncateHash } from '$lib/utils'
 	import Icon from 'svelte-awesome'
 	import { check } from 'svelte-awesome/icons'
 	import {