From 17f85b8f1adc101417ed93a4dc91c060472e67ca Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Fri, 3 Nov 2023 16:00:07 +0100
Subject: [PATCH] fix: make graph rendering uniform across all rem (#2553)

* graphfix

* fix graph rendering

* fix graph rendering
---
 .../flows/map/FlowModuleSchemaItem.svelte     |  9 ++++----
 .../flows/map/InsertModuleButton.svelte       |  4 ++--
 .../flows/map/InsertTriggerButton.svelte      |  2 +-
 .../lib/components/flows/map/MapItem.svelte   | 22 +++++++++++--------
 .../components/flows/map/VirtualItem.svelte   | 21 +++++++++---------
 .../src/lib/components/graph/FlowGraph.svelte |  9 --------
 6 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 6c8459bb36..bb7885dd79 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -39,6 +39,7 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	class={classNames(
 		'w-full module flex rounded-sm cursor-pointer',
@@ -145,22 +146,22 @@
 	</div>
 	{#if deletable}
 		<button
-			class="absolute -top-2 -right-2 rounded-full h-4 w-4 trash center-center text-primary
+			class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-primary
 	border-[1.5px] border-gray-700 bg-surface 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} />
+			<X class="mx-[3px]" size={14} strokeWidth={2} />
 		</button>
 
 		<button
-			class="absolute -top-2 right-10 rounded-full h-4 w-4 trash center-center text-primary
+			class="absolute -top-[10px] right-[35px] rounded-full h-[20px] w-[20px] trash center-center text-primary
 border-[1.5px] border-gray-700 bg-surface duration-150 hover:bg-blue-400 hover:text-white
 hover:border-blue-700 {selected ? '' : '!hidden'}"
 			on:click|preventDefault|stopPropagation={(event) => dispatch('move')}
 		>
-			<Move size={12} strokeWidth={2} />
+			<Move class="mx-[3px]" size={14} strokeWidth={2} />
 		</button>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
index ce47ba9675..275ce82980 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleButton.svelte
@@ -38,9 +38,9 @@
 		slot="trigger"
 		id={`flow-editor-add-step-${index}`}
 		type="button"
-		class="text-primary bg-surface border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 	>
-		<Cross size={12} />
+		<Cross class="mx-[5px]" size={15} />
 	</button>
 	<div id="flow-editor-insert-module ">
 		{#if !disableAi}
diff --git a/frontend/src/lib/components/flows/map/InsertTriggerButton.svelte b/frontend/src/lib/components/flows/map/InsertTriggerButton.svelte
index 5ff471f215..4e180c4e3a 100644
--- a/frontend/src/lib/components/flows/map/InsertTriggerButton.svelte
+++ b/frontend/src/lib/components/flows/map/InsertTriggerButton.svelte
@@ -28,7 +28,7 @@
 		title="Add a Trigger"
 		slot="trigger"
 		type="button"
-		class="text-primary bg-surface border mx-0.5 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+		class="text-primary bg-surface border-[1px] mx-[1px] border-gray-300 dark:border-gray-500 rotate-180 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 	>
 		<Icon data={faBolt} scale={0.8} />
 	</button>
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 041ed0a55e..e4ffd09cc2 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -61,7 +61,9 @@
 {#if mod}
 	{#if insertable}
 		<div
-			class="{openMenu ? 'z-20' : ''} w-7 absolute -top-9 left-[50%] right-[50%] -translate-x-1/2"
+			class="{openMenu
+				? 'z-20'
+				: ''} w-[27px] absolute -top-[35px] left-[50%] right-[50%] -translate-x-1/2"
 		>
 			{#if moving}
 				<button
@@ -70,9 +72,9 @@
 						dispatch('insert', { modules, index: idx, detail: 'move' })
 					}}
 					type="button"
-					class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 				>
-					<ClipboardCopy size={12} />
+					<ClipboardCopy class="m-[5px]" size={15} />
 				</button>
 			{:else}
 				<InsertModuleButton
@@ -203,7 +205,9 @@
 	</div>
 	{#if insertable && insertableEnd}
 		<div
-			class="{openMenu2 ? 'z-20' : ''} w-7 absolute top-11 left-[50%] right-[50%] -translate-x-1/2"
+			class="{openMenu2
+				? 'z-20'
+				: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
 		>
 			{#if moving}
 				<button
@@ -212,9 +216,9 @@
 						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
 					}}
 					type="button"
-					class=" text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+					class=" text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 				>
-					<ClipboardCopy size={12} />
+					<ClipboardCopy class="m-[5px]" size={15} />
 				</button>
 			{:else}
 				<InsertModuleButton
@@ -232,7 +236,7 @@
 	{/if}
 
 	{#if insertable && branchable}
-		<div class="w-7 absolute top-11 left-[60%] right-[40%] -translate-x-1/2">
+		<div class="w-[27px] absolute top-[45px] left-[60%] right-[40%] -translate-x-1/2">
 			<button
 				title="Add branch"
 				on:click={() => {
@@ -240,9 +244,9 @@
 				}}
 				type="button"
 				id="add-branch-button"
-				class=" text-primary bg-surface border mx-0.5 rotate-180 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class=" text-primary bg-surface border mx-[1px] rotate-180 dark:border-gray-500 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 			>
-				<GitBranchPlus size={12} />
+				<GitBranchPlus class="m-[5px]" size={15} />
 			</button>
 		</div>
 	{/if}
diff --git a/frontend/src/lib/components/flows/map/VirtualItem.svelte b/frontend/src/lib/components/flows/map/VirtualItem.svelte
index 7c349608c1..121034001d 100644
--- a/frontend/src/lib/components/flows/map/VirtualItem.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItem.svelte
@@ -19,7 +19,6 @@
 	export let bgColor: string = ''
 	export let selected: boolean
 	export let selectable: boolean
-	export let whereInsert: 'before' | 'after' = 'after'
 	export let deleteBranch: { module: FlowModule; index: number } | undefined = undefined
 	export let id: string | undefined = undefined
 	export let moving: string | undefined = undefined
@@ -44,7 +43,7 @@
 </script>
 
 {#if insertable && deleteBranch}
-	<div class="w-7 absolute -top-10 left-[50%] right-[50%] -translate-x-1/2">
+	<div class="w-[27px] absolute -top-[40px] left-[50%] right-[50%] -translate-x-1/2">
 		<button
 			title="Delete branch"
 			on:click|stopPropagation={() => {
@@ -53,9 +52,9 @@
 				}
 			}}
 			type="button"
-			class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+			class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 		>
-			<X size={14} />
+			<X class="m-[5px]" size={15} />
 		</button>
 	</div>
 {/if}
@@ -101,9 +100,9 @@
 
 {#if insertable && modules && (label != 'Input' || modules.length == 0)}
 	<div
-		class="{openMenu ? 'z-20' : ''} w-7 absolute {whereInsert == 'after'
-			? 'top-12'
-			: '-top-10'} left-[50%] right-[50%] -translate-x-1/2"
+		class="{openMenu
+			? 'z-20'
+			: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
 	>
 		{#if moving}
 			<button
@@ -118,7 +117,7 @@
 					}
 				}}
 				type="button"
-				class="text-primary bg-surface border mx-0.5 border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-6 h-6 flex items-center justify-center"
+				class="text-primary bg-surface border mx-[1px] border-gray-300 dark:border-gray-500 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
 			>
 				<ClipboardCopy size={12} />
 			</button>
@@ -131,12 +130,12 @@
 					if (modules) {
 						dispatch('insert', {
 							modules,
-							index: whereInsert == 'after' ? index : index - 1,
+							index: index,
 							detail: e.detail
 						})
 					}
 				}}
-				index={whereInsert == 'after' ? index : index - 1}
+				{index}
 				modules={modules ?? []}
 			/>
 		{/if}
@@ -188,7 +187,7 @@
 	<div
 		class="{triggerOpenMenu
 			? 'z-10'
-			: ''} w-7 absolute top-12 left-[65%] right-[35%] -translate-x-1/2"
+			: ''} w-[27px] absolute top-[50px] left-[65%] right-[35%] -translate-x-1/2"
 	>
 		<InsertTriggerButton
 			{disableAi}
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 29c6aebc99..62d4d2bdf0 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -106,7 +106,6 @@
 					getParentIds(),
 					'Input',
 					modules,
-					'after',
 					undefined,
 					undefined,
 					0,
@@ -134,7 +133,6 @@
 					getParentIds(),
 					'Result',
 					undefined,
-					'before',
 					undefined,
 					undefined,
 					0,
@@ -398,7 +396,6 @@
 				getParentIds(loop.items),
 				`Do one iteration`,
 				innerModules,
-				'after',
 				undefined,
 				1000,
 				loopDepth + 1,
@@ -425,7 +422,6 @@
 				getParentIds(loop.items),
 				`Collect result of each iteration`,
 				modules,
-				'after',
 				undefined,
 				1000,
 				loopDepth,
@@ -466,7 +462,6 @@
 					branchParent,
 					'No branches',
 					undefined,
-					'after',
 					undefined,
 					0,
 					loopDepth,
@@ -486,7 +481,6 @@
 					branchParent,
 					summary,
 					modules,
-					'after',
 					edgesLabel[i],
 					undefined,
 					loopDepth,
@@ -521,7 +515,6 @@
 				bitems.map((i) => getParentIds(i)).flat(),
 				branchall ? 'Collect result of each branch' : 'Result of the chosen branch',
 				modules,
-				'after',
 				undefined,
 				0,
 				loopDepth,
@@ -653,7 +646,6 @@
 		parentIds: string[],
 		label: string,
 		modules: FlowModule[] | undefined,
-		whereInsert: 'before' | 'after' | undefined,
 		edgeLabel: string | undefined,
 		offset: number | undefined,
 		loopDepth: number,
@@ -690,7 +682,6 @@
 						selected: $selectedId == label,
 						index,
 						selectable,
-						whereInsert,
 						deleteBranch,
 						id: mid,
 						moving,