From 2e83afbcd808712e07a9a0079a76801bf91f7f5a Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Thu, 8 Dec 2022 17:28:24 +0100
Subject: [PATCH] flow UX improvements

---
 frontend/src/lib/components/FlowBuilder.svelte      |  2 +-
 frontend/src/lib/components/FlowGraphViewer.svelte  | 11 ++++++++---
 frontend/src/lib/components/FlowStatusViewer.svelte |  4 ++--
 frontend/src/lib/components/graph/FlowGraph.svelte  |  4 ++--
 4 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/FlowBuilder.svelte b/frontend/src/lib/components/FlowBuilder.svelte
index b8c4908b0f..d87a9d09be 100644
--- a/frontend/src/lib/components/FlowBuilder.svelte
+++ b/frontend/src/lib/components/FlowBuilder.svelte
@@ -188,7 +188,7 @@
 
 <UnsavedConfirmationModal />
 
-<Drawer bind:this={flowViewer} size="1200px">
+<Drawer bind:this={flowViewer} size="75%">
 	<DrawerContent title="View Graph" on:close={flowViewer.closeDrawer} noPadding>
 		<div class="overflow-hidden h-full w-full">
 			<FlowGraphViewer flow={$flowStore} />
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index fc98e1c1d2..ef992f3314 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -11,6 +11,7 @@
 	import typescript from 'svelte-highlight/languages/typescript'
 	import { cleanExpr } from './flows/utils'
 	import FlowPathViewer from './flows/content/FlowPathViewer.svelte'
+	import SchemaViewer from './SchemaViewer.svelte'
 	export let flow: {
 		summary: string
 		description?: string
@@ -20,14 +21,14 @@
 	export let overflowAuto = false
 	export let noSide = false
 
-	let stepDetail: FlowModule | undefined = undefined
+	let stepDetail: FlowModule | string | undefined = undefined
 	let codeViewer: Drawer
 	let topHeight = 0
 </script>
 
 <Drawer bind:this={codeViewer} size="900px">
 	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
-		{#if stepDetail}
+		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
 					<a
@@ -95,7 +96,11 @@
 				<span class="font-black text-lg w-full my-4">
 					<span>Click on a step to see its details</span>
 				</span>
-			{:else}
+			{:else if stepDetail == 'Input'}
+				<SchemaViewer schema={flow?.schema} />
+			{:else if stepDetail == 'Result'}
+				End of the flow
+			{:else if typeof stepDetail != 'string' && stepDetail.value}
 				<div class="font-black text-lg w-full mb-6"
 					>Step {stepDetail.id ?? ''}<span class="ml-2 font-normal">{stepDetail.summary || ''}</span
 					></div
diff --git a/frontend/src/lib/components/FlowStatusViewer.svelte b/frontend/src/lib/components/FlowStatusViewer.svelte
index aad9989d73..368f61461c 100644
--- a/frontend/src/lib/components/FlowStatusViewer.svelte
+++ b/frontend/src/lib/components/FlowStatusViewer.svelte
@@ -355,9 +355,9 @@
 						on:click={(e) => {
 							if (e.detail.id) {
 								selectedNode = e.detail.id
-							} else if (e.detail == 'End') {
+							} else if (e.detail == 'Result') {
 								selectedNode = 'end'
-							} else if (e.detail == 'Start') {
+							} else if (e.detail == 'Input') {
 								selectedNode = 'start'
 							}
 						}}
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index fc10d8354d..172d3a086f 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -54,13 +54,13 @@
 		}
 		nestedNodes = nodes = []
 
-		nestedNodes.push(createVirtualNode(getParentIds(), 'Start'))
+		nestedNodes.push(createVirtualNode(getParentIds(), 'Input'))
 
 		modules.forEach((m) => {
 			const item = getConvertedFlowModule(m)
 			item && nestedNodes.push(item)
 		})
-		nestedNodes.push(createVirtualNode(getParentIds(), 'End'))
+		nestedNodes.push(createVirtualNode(getParentIds(), 'Result'))
 
 		if (!flowModuleStates) {
 			if (failureModule) nestedNodes.push(createErrorHandler(failureModule))