From d7aa565ea816c926df15b40e5d85a2b9340de583 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Mon, 6 Mar 2023 16:04:32 +0100
Subject: [PATCH] fix z-index of inputransformform

---
 frontend/src/lib/assets/app.css               | 12 +++++++++++
 .../src/lib/components/FieldHeader.svelte     | 20 +++++++++++--------
 .../lib/components/InputTransformForm.svelte  | 16 +++++++++------
 .../InputTransformSchemaForm.svelte           |  2 +-
 frontend/src/lib/components/Popover.svelte    | 15 ++------------
 .../src/lib/components/SimpleEditor.svelte    |  2 +-
 .../src/lib/components/TemplateEditor.svelte  |  2 +-
 .../flows/map/FlowModuleSchemaItem.svelte     | 15 +++++++++++---
 .../flows/map/FlowModuleSchemaMap.svelte      |  2 +-
 .../components/flows/map/VirtualItem.svelte   |  2 +-
 .../src/lib/components/graph/FlowGraph.svelte |  4 ++++
 .../svelvet/container/views/GraphView.svelte  |  1 +
 12 files changed, 58 insertions(+), 35 deletions(-)

diff --git a/frontend/src/lib/assets/app.css b/frontend/src/lib/assets/app.css
index 66a91482bc..d11eab5860 100644
--- a/frontend/src/lib/assets/app.css
+++ b/frontend/src/lib/assets/app.css
@@ -50,6 +50,18 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
+
+	::-webkit-scrollbar {
+		width: 9px;
+		height: 9px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background-color: rgba(155, 155, 155, 0.5);
+		border: transparent;
+	}
 }
 
 @layer components {
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 03f4d1d690..a77cc4087d 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -11,17 +11,21 @@
 		| undefined = undefined
 </script>
 
-<div class="inline-flex flex-row items-center">
+<div class="inline-flex flex-row items-center truncated">
 	<span class="font-semibold">
 		{label}
 	</span>
 	<Required {required} class="!ml-0" />
 
-	<span class="text-sm italic ml-1 text-indigo-800">
-		({type ?? 'any'}{contentEncoding && contentEncoding != ''
-			? `, encoding: ${contentEncoding}`
-			: ''}{format && format != '' ? `, format: ${format}` : ''}{itemsType?.type
-			? ` of ${itemsType?.type}s`
-			: ''})</span
-	>
+	{#if format && format != ''}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({format})
+		</span>
+	{:else}
+		<span class="text-sm italic ml-1 text-indigo-800">
+			({type ?? 'any'}{contentEncoding && contentEncoding != ''
+				? `, encoding: ${contentEncoding}`
+				: ''})</span
+		>
+	{/if}
 </div>
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 9879f6d4f1..04e19f4230 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -148,7 +148,7 @@
 			{/if}
 		</div>
 		{#if !noDynamicToggle}
-			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap">
+			<div class="flex flex-row gap-x-4 gap-y-1 flex-wrap z-10">
 				<ToggleButtonGroup
 					bind:selected={propertyType}
 					on:selected={(e) => {
@@ -190,10 +190,10 @@
 				>
 					{#if isStaticTemplate(inputCat)}
 						<ToggleButton light position="left" value="static" size="xs">
-							{'${} '}Template &nbsp; <Tooltip
-								>Write javascript expressions between "{openBracket}" and "{closeBracket}". You may
-								refer to contextual objects like 'flow_input', or 'result' or functions like
-								'resource' and 'variable'
+							{'${} '}&nbsp;
+							<Tooltip
+								>Write text or surround javascript with "{openBracket}" and "{closeBracket}". Use
+								`result` to connect to another node's output.
 							</Tooltip></ToggleButton
 						>
 					{:else}
@@ -206,7 +206,11 @@
 						value="javascript"
 						startIcon={{ icon: faCode }}
 						size="xs"
-					/>
+						>&nbsp;<Tooltip
+							>Write javascript expressions directly, using 'flow_input' or 'result'. You can use
+							multiline javascript.
+						</Tooltip></ToggleButton
+					>
 				</ToggleButtonGroup>
 				<Button
 					variant="contained"
diff --git a/frontend/src/lib/components/InputTransformSchemaForm.svelte b/frontend/src/lib/components/InputTransformSchemaForm.svelte
index b3cf89152f..604991d186 100644
--- a/frontend/src/lib/components/InputTransformSchemaForm.svelte
+++ b/frontend/src/lib/components/InputTransformSchemaForm.svelte
@@ -57,7 +57,7 @@
 	{#if keys.length > 0}
 		{#each keys as argName, i (argName)}
 			{#if (!filter || filter.includes(argName)) && Object.keys(schema.properties ?? {}).includes(argName)}
-				<div>
+				<div class="z-10">
 					<InputTransformForm
 						{previousModuleId}
 						bind:arg={args[argName]}
diff --git a/frontend/src/lib/components/Popover.svelte b/frontend/src/lib/components/Popover.svelte
index ed62304941..a4f155f323 100644
--- a/frontend/src/lib/components/Popover.svelte
+++ b/frontend/src/lib/components/Popover.svelte
@@ -49,22 +49,11 @@
 </script>
 
 {#if notClickable}
-	<span
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		class={$$props.class}
-	>
+	<span use:popperRef on:mouseenter={open} on:mouseleave={close} class={$$props.class}>
 		<slot />
 	</span>
 {:else}
-	<button
-		use:popperRef
-		on:mouseenter={open}
-		on:mouseleave={close}
-		on:click
-		class={$$props.class}
-	>
+	<button use:popperRef on:mouseenter={open} on:mouseleave={close} on:click class={$$props.class}>
 		<slot />
 	</button>
 {/if}
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 8f05f2d594..e2688c534e 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -209,7 +209,7 @@
 	})
 </script>
 
-<div bind:this={divEl} class="{$$props.class} editor" bind:clientWidth={width} />
+<div bind:this={divEl} class="{$$props.class ?? ''} editor" bind:clientWidth={width} />
 
 <style>
 	.editor {
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index be77f01a18..18b7515627 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -596,7 +596,7 @@
 <div
 	bind:this={divEl}
 	style="height: 18px;"
-	class="{$$props.class} template rounded-lg min-h-4 mx-0.5"
+	class="{$$props.class ?? ''} template rounded-lg min-h-4 mx-0.5 overflow-clip"
 	bind:clientWidth={width}
 />
 
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 4781a7855c..2204d1d752 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -4,7 +4,7 @@
 	import { classNames } from '$lib/utils'
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
-	import { Bed, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte'
+	import { Bed, Move, PhoneIncoming, Repeat, Square, X } from 'lucide-svelte'
 
 	export let selected: boolean = false
 	export let deletable: boolean = false
@@ -95,13 +95,22 @@
 	{#if deletable}
 		<button
 			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center 
-			border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
-			hover:border-red-700 {selected ? '' : '!hidden'}"
+	border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-red-400 hover:text-white 
+	hover:border-red-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) =>
 				dispatch('delete', { event, id, type: modType })}
 		>
 			<X size={12} strokeWidth={2} />
 		</button>
+
+		<!-- <button
+			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center 
+border-[1.5px] border-gray-700 bg-white duration-150 hover:bg-blue-400 hover:text-white 
+hover:border-blue-700 {selected ? '' : '!hidden'}"
+			on:click|preventDefault|stopPropagation={(event) => dispatch('move', { module })}
+		>
+			<Move size={12} strokeWidth={2} />
+		</button> -->
 	{/if}
 </div>
 
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 96ba4f674d..375062a186 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -159,7 +159,7 @@
 	}
 </script>
 
-<div class="flex flex-col h-full relative">
+<div class="flex flex-col h-full relative -pt-1">
 	<div
 		class="z-10 sticky inline-flex flex-col gap-2 top-0 bg-gray-50 flex-initial p-2 items-center border-b border-gray-300"
 	>
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 52539e4f72..c134fbf35a 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -81,7 +81,7 @@
 	</div>
 </div>
 
-{#if insertable && modules && (label != 'Input' || modules.length > 0)}
+{#if insertable && modules && (label != 'Input' || modules.length == 0)}
 	<div
 		class="{openMenu ? 'z-10' : ''} w-7 absolute {whereInsert == 'after'
 			? 'top-12'
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 103a4c1152..15fe7da91b 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -262,6 +262,10 @@
 							dispatch('insert', detail)
 						} else if (e == 'newBranch') {
 							dispatch('newBranch', detail)
+						} else if (e == 'movefrom') {
+							dispatch('moveto', detail)
+						} else if (e == 'moveto') {
+							dispatch('movefrom', detail)
 						}
 					}
 				}
diff --git a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
index a2be922a3c..3f235b37ca 100644
--- a/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
+++ b/frontend/src/lib/components/graph/svelvet/container/views/GraphView.svelte
@@ -252,6 +252,7 @@
 							on:insert={(e) => node?.data?.custom?.cb?.('insert', e.detail)}
 							on:newBranch={(e) => node?.data?.custom?.cb?.('newBranch', e.detail)}
 							on:deleteBranch={(e) => node?.data?.custom?.cb?.('deleteBranch', e.detail)}
+							on:move={(e) => node?.data?.custom?.cb?.('move', e.detail)}
 							{...node.data.custom.props}
 						/>
 					</Node>