From 9aaeaf4ee05eb3dbe151c2e1edfc082a5ee2731f Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Wed, 29 Mar 2023 20:02:16 +0200
Subject: [PATCH] truncate file too big

---
 frontend/src/lib/components/DisplayResult.svelte    | 11 ++++++++++-
 frontend/src/lib/components/FlowJobResult.svelte    |  3 ++-
 frontend/src/lib/components/FlowStatusViewer.svelte |  1 +
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 9eea08b5f4..d1d87bd78a 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -10,6 +10,7 @@
 
 	export let result: any
 	export let requireHtmlApproval = false
+	export let filename: string | undefined = undefined
 
 	let resultKind:
 		| 'json'
@@ -231,7 +232,15 @@
 				>
 			</div>
 		{:else}
-			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
+			{#if jsonStr.length > 10000}
+				JSON too large. <a
+					download="{filename ?? 'result'}.json"
+					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+				>
+			{:else}
+				<Highlight language={json} code={jsonStr} />
+			{/if}
 		{/if}
 	{:else}
 		<div class="text-gray-500 text-sm">No result: {JSON.stringify(result)}</div>
diff --git a/frontend/src/lib/components/FlowJobResult.svelte b/frontend/src/lib/components/FlowJobResult.svelte
index 016aa8d48e..cc2d758d0d 100644
--- a/frontend/src/lib/components/FlowJobResult.svelte
+++ b/frontend/src/lib/components/FlowJobResult.svelte
@@ -8,6 +8,7 @@
 	export let col: boolean = false
 	export let noBorder = false
 	export let loading
+	export let filename: string | undefined = undefined
 </script>
 
 <div
@@ -17,7 +18,7 @@
 	<div class="bg-white {col ? '' : 'max-h-80'} h-full p-1 overflow-auto relative">
 		<span class="text-gray-500">Result</span>
 		{#if result}
-			<DisplayResult {result} />
+			<DisplayResult {filename} {result} />
 		{:else if loading}
 			<Loader2 class="animate-spin" />
 		{:else}
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index 95e9b0af87..fba39f0d6e 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -476,6 +476,7 @@
 						{@const node = localFlowModuleStates[selectedNode]}
 						{#if selectedNode == 'end'}
 							<FlowJobResult
+								filename={job.id}
 								loading={job['running']}
 								noBorder
 								col