From 767c0a9acf4efbbc481ec57badc675237f2669a0 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Tue, 26 Jul 2022 17:28:36 +0200
Subject: [PATCH] fix: multiple UI fixes

---
 frontend/src/lib/components/ArgInput.svelte   |  6 +--
 frontend/src/lib/components/FlowEditor.svelte |  9 ++--
 .../src/lib/components/FlowPreview.svelte     | 22 ++++-----
 frontend/src/lib/components/ModuleStep.svelte | 10 ++--
 frontend/src/lib/components/RunForm.svelte    |  2 +-
 frontend/src/lib/components/SchemaForm.svelte | 11 +++++
 .../propertyPicker/ObjectViewer.svelte        |  3 --
 .../OverlayPropertyPicker.svelte              | 46 ++++++++++---------
 .../propertyPicker/PropPicker.svelte          |  6 +--
 9 files changed, 65 insertions(+), 50 deletions(-)

diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 08a20fda0a..46e3185c36 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -184,7 +184,7 @@
 				{error === '' ? '...' : error}
 			</div>
 		</div>
-		<div class="container">
+		<div class="flex flex-row gap-1">
 			{#if inputCat == 'number' && !numberAsString}
 				<input
 					{disabled}
@@ -279,6 +279,7 @@
 				/>
 			{:else if inputCat == 'string' || (inputCat == 'number' && numberAsString)}
 				<textarea
+					on:focus={() => dispatch('focus')}
 					{disabled}
 					style="height: {minHeight}; max-height: {maxHeight}"
 					class="col-span-10 {valid
@@ -302,6 +303,3 @@
 		</div>
 	</div>
 </div>
-
-<style>
-</style>
diff --git a/frontend/src/lib/components/FlowEditor.svelte b/frontend/src/lib/components/FlowEditor.svelte
index 21f803988e..5d19c93a08 100644
--- a/frontend/src/lib/components/FlowEditor.svelte
+++ b/frontend/src/lib/components/FlowEditor.svelte
@@ -36,8 +36,6 @@
 
 	let open = 0
 	let args: Record<string, any> = {}
-
-	$: numberOfSteps = $flowStore?.value.modules.length - 1
 </script>
 
 <Modal bind:this={jsonSetter}>
@@ -197,7 +195,12 @@
 						<div class="p-4">
 							<SchemaEditor schema={$flowStore.schema} />
 							<div class="my-4" />
-							<FlowPreview {mode} flow={$flowStore} i={numberOfSteps} bind:args />
+							<FlowPreview
+								{mode}
+								flow={$flowStore}
+								i={$flowStore?.value.modules.length}
+								bind:args
+							/>
 						</div>
 					</div>
 				</li>
diff --git a/frontend/src/lib/components/FlowPreview.svelte b/frontend/src/lib/components/FlowPreview.svelte
index d79f4d565e..864e7379af 100644
--- a/frontend/src/lib/components/FlowPreview.svelte
+++ b/frontend/src/lib/components/FlowPreview.svelte
@@ -28,7 +28,7 @@
 	let intervalId: NodeJS.Timer
 
 	let uptoText =
-		i == flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step'
+		i >= flow.value.modules.length - 1 ? 'Preview whole flow' : 'Preview up to this step'
 	let job: Job | undefined
 	let jobs = []
 	let jobId: string
@@ -89,21 +89,21 @@
 	})
 </script>
 
-<h2 class="flex justify-center">
-	<button
-		class="default-button	"
-		on:click={() => {
-			viewPreview = !viewPreview
-		}}
-	>
+<button
+	class="w-full bg-blue-200"
+	on:click={() => {
+		viewPreview = !viewPreview
+	}}
+>
+	<h2 class="flex justify-center">
 		<div>
 			Preview mode<Icon class="ml-1" data={viewPreview ? faChevronUp : faChevronDown} scale={1} />
 		</div>
-	</button>
-</h2>
+	</h2>
+</button>
 
 {#if viewPreview}
-	{#if i != flow.value.modules.length - 1}
+	{#if i != flow.value.modules.length}
 		<Tabs
 			tabs={[
 				['upto', uptoText],
diff --git a/frontend/src/lib/components/ModuleStep.svelte b/frontend/src/lib/components/ModuleStep.svelte
index 6e33b7c45d..1a542e7911 100644
--- a/frontend/src/lib/components/ModuleStep.svelte
+++ b/frontend/src/lib/components/ModuleStep.svelte
@@ -2,7 +2,7 @@
 	import { FlowModuleValue, type FlowModule } from '$lib/gen'
 	import { previewResults } from '$lib/stores'
 	import { buildExtraLib, objectToTsType, schemaToTsType } from '$lib/utils'
-	import { faRobot } from '@fortawesome/free-solid-svg-icons'
+	import { faChevronDown, faChevronUp, faRobot } from '@fortawesome/free-solid-svg-icons'
 	import Icon from 'svelte-awesome'
 	import Editor from './Editor.svelte'
 	import EditorBar from './EditorBar.svelte'
@@ -143,11 +143,15 @@
 		{/if}
 		{#if open == i}
 			<div>
-				<button class="w-full h-full" on:click={() => (open = -1)}>(-)</button>
+				<button class="w-full h-full" on:click={() => (open = -1)}
+					><Icon data={faChevronUp} scale={1.0} /></button
+				>
 			</div>
 		{:else}
 			<div>
-				<button class="w-full h-full" on:click={() => (open = i)}>(+)</button>
+				<button class="w-full h-full" on:click={() => (open = i)}
+					><Icon data={faChevronDown} scale={1.0} /></button
+				>
 			</div>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte
index 1aa8bab50a..6f3d750505 100644
--- a/frontend/src/lib/components/RunForm.svelte
+++ b/frontend/src/lib/components/RunForm.svelte
@@ -66,7 +66,7 @@
 			</h2>
 		{/if}
 		{#if !runnable.schema.properties || Object.keys(runnable.schema.properties).length === 0}
-			<div class="text-sm">No arguments</div>
+			<div class="text-sm p-6">No arguments</div>
 		{:else}
 			<div
 				class="bg-gray-50 border border shadow-md shadow-blue-100 shadow-inner rounded border-gray-300 p-6"
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index 7a7bdcd771..3b5a6a9b2b 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -21,6 +21,7 @@
 	export let pickableProperties: Object | undefined = undefined
 
 	let inputCheck: { [id: string]: boolean } = {}
+	let overlays: { [id: string]: OverlayPropertyPicker } = {}
 	$: isValid = allTrue(inputCheck) ?? false
 
 	let propertiesTypes: { [id: string]: InputTransform.type } = {}
@@ -103,6 +104,7 @@
 
 				{#if propertiesTypes[argName] === undefined || propertiesTypes[argName] === InputTransform.type.STATIC}
 					<OverlayPropertyPicker
+						bind:this={overlays[argName]}
 						bind:pickableProperties
 						disabled={!hasOverlay(inputCats[argName])}
 						on:select={(event) => {
@@ -112,6 +114,15 @@
 						}}
 					>
 						<ArgInput
+							on:focus={() => {
+								Object.keys(overlays).forEach((k) => {
+									if (k == argName) {
+										overlays[k].focus()
+									} else {
+										overlays[k].unfocus()
+									}
+								})
+							}}
 							label={argName}
 							bind:description={schema.properties[argName].description}
 							bind:value={args[argName].value}
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 332ec83c93..dea4632097 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -102,9 +102,6 @@
 		@apply text-black;
 	}
 
-	.hidden {
-		display: none;
-	}
 	.val {
 		@apply text-black;
 	}
diff --git a/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte b/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
index 61832bc181..dc309571af 100644
--- a/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/OverlayPropertyPicker.svelte
@@ -11,38 +11,40 @@
 	export let pickableProperties: Object | undefined
 	export let disabled = false
 	let isOpen = false
+	let isFocused = true
+
+	let timeout: NodeJS.Timeout
+
+	export function unfocus() {
+		isFocused = false
+		close()
+	}
+	export function focus() {
+		isFocused = true
+		open()
+	}
+
+	function open() {
+		if (isFocused) {
+			clearTimeout(timeout)
+			!isOpen && (isOpen = true)
+		}
+	}
+	function close() {
+		timeout = setTimeout(() => (isOpen = false), 200)
+	}
 
 	const dispatch = createEventDispatcher()
-
-	function toggle() {
-		isOpen = !isOpen
-	}
-
-	function onMouseLeave(mouseEvent: MouseEvent) {
-		const { offsetY } = mouseEvent
-		const target = mouseEvent.target as HTMLInputElement
-
-		const down = offsetY >= target.clientHeight
-		const up = offsetY <= 0
-
-		const content = document.getElementsByClassName('content')
-		const overlayBottom = content.item(0)?.getAttribute('data-popper-placement') === 'bottom'
-
-		if ((down && overlayBottom) || (up && !overlayBottom)) {
-			return
-		}
-		toggle()
-	}
 </script>
 
 {#if !disabled}
 	<div class="w-full">
-		<div use:popperRef on:mousemove={() => !isOpen && toggle()} on:mouseleave={onMouseLeave}>
+		<div use:popperRef on:mouseenter={open} on:mouseleave={close}>
 			<slot />
 		</div>
 
 		{#if isOpen}
-			<div class="content" use:popperContent on:mouseleave={toggle}>
+			<div class="content" use:popperContent on:mouseenter={open} on:mouseleave={close}>
 				<PropPicker
 					bind:pickableProperties
 					on:select={(event) => {
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 6f5d3bf3f7..e729c8e7e5 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -11,14 +11,14 @@
 		search === EMPTY_STRING ? pickableProperties : keepByKey(pickableProperties, search)
 </script>
 
-<!-- {JSON.stringify(propsFiltered)} -->
 <div
-	class="relative p-3 bg-white rounded-lg border border-gray-200 shadow-md max-h-max overflow-y-scroll w-full"
+	class="relative p-3 bg-white rounded-lg border border-gray-200 shadow-md max-h-max overflow-y-scroll"
 >
 	<div class="overflow-y-auto max-h-96">
 		<input
+			type="text"
 			bind:value={search}
-			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2 mb-2"
+			class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block p-2 mb-2"
 			placeholder="Search prop..."
 		/>
 		<ObjectViewer json={propsFiltered} on:select />