From 7c3704cad4f9e3aa198aaa34db60dfd659d0f935 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 4 Aug 2022 23:45:27 +0200
Subject: [PATCH] gif support + _value preview in object viewer

---
 .../src/lib/components/DisplayResult.svelte   | 10 ++++++-
 .../src/lib/components/FlowBuilder.svelte     |  4 +++
 frontend/src/lib/components/flows/utils.ts    | 27 +++++++++++--------
 .../OverlayPropertyPicker.svelte              |  2 +-
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 351e0792fa..e81c88206b 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -6,7 +6,7 @@
 
 	export let result: any
 
-	let resultKind: 'json' | 'table-col' | 'table-row' | 'png' | 'file' | 'jpeg' | undefined =
+	let resultKind: 'json' | 'table-col' | 'table-row' | 'png' | 'file' | 'jpeg' | 'gif' | undefined =
 		inferResultKind(result)
 
 	function isArray(obj: any) {
@@ -109,6 +109,14 @@
 				src="data:image/jpeg;base64,{result.jpeg}"
 			/>
 		</div>
+	{:else if resultKind == 'gif'}
+		<div class="h-full">
+			Result is an image: <img
+				alt="gif rendered"
+				class="w-auto h-full"
+				src="data:image/gif;base64,{result.gif}"
+			/>
+		</div>
 	{:else if resultKind == 'file'}
 		<div>
 			Result is a file: <a
diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index 61d31d120e..f8306ef3b7 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -7,6 +7,7 @@
 		encodeState,
 		formatCron,
 		loadHubScripts,
+		pathIsEmpty,
 		sendUserToast,
 		setQueryWithoutLoad
 	} from '$lib/utils'
@@ -201,12 +202,15 @@
 	</div>
 
 	<Button
+		disabled={pathIsEmpty($flowStore.path)}
 		size="lg"
 		pill
 		on:click={() => (previewOpen = !previewOpen)}
 		class={`blue-button fixed bottom-10 right-10 ${previewOpen ? 'hidden' : ''}`}
 	>
 		Preview flow
+		{pathIsEmpty($flowStore.path) ? '(pick a name first!)' : ''}
+
 		<Icon data={faPlay} class="ml-2" />
 	</Button>
 
diff --git a/frontend/src/lib/components/flows/utils.ts b/frontend/src/lib/components/flows/utils.ts
index b27bea5e72..9a51992d86 100644
--- a/frontend/src/lib/components/flows/utils.ts
+++ b/frontend/src/lib/components/flows/utils.ts
@@ -178,19 +178,11 @@ export function getPickableProperties(
 	mode: FlowMode,
 	i: number
 ) {
+	console.log(i, previewResults)
 	const flowInputAsObject = schemaToObject(schema, args)
 	const flowInput =
 		mode === 'pull' && i >= 1
-			? Object.assign(
-					Object.assign(
-						{
-							_value: 'The current value of the iteration as an object',
-							_index: 'The current index of the iteration as a number'
-						},
-						flowInputAsObject
-					),
-					previewResults[0]
-			  )
+			? computeFlowInputPull(previewResults[0], flowInputAsObject)
 			: flowInputAsObject
 
 	let previous_result
@@ -202,7 +194,7 @@ export function getPickableProperties(
 		previous_result = previewResults[i - 1]
 	}
 
-	let step
+	let step: any[]
 	if (i >= 1 && mode == 'push') {
 		step = Object.values(previewResults).slice(0, i)
 	} else if (i >= 2 && mode == 'pull') {
@@ -240,3 +232,16 @@ export async function runFlowPreview(args: Record<string, any>, flow: Flow) {
 		}
 	})
 }
+function computeFlowInputPull(previewResult: any | undefined, flowInputAsObject: any) {
+	const iteratorValues = (previewResult?.res1 && Array.isArray(previewResult.res1)) ?
+		{
+			_value: previewResult.res1[0],
+			_index: `The current index of the iteration as a number (here from 0 to ${previewResult.res1.length - 1})`
+		} : {
+			_value: 'The current value of the iteration as an object',
+			_index: 'The current index of the iteration as a number'
+		}
+	return Object.assign(Object.assign(flowInputAsObject, previewResult), iteratorValues)
+
+}
+
diff --git a/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte b/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
index 5a4e9349ff..fa39d6a029 100644
--- a/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <div class="w-full">
-	<div use:popperRef on:mouseleave={close}>
+	<div use:popperRef on:click={open} on:input={open} on:mouseleave={close}>
 		<slot />
 	</div>