From 7fe0a8f3666d6ba8d5a500f5ae57ffe7ce3a2741 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Thu, 15 Aug 2024 09:30:26 +0200
Subject: [PATCH] feat(frontend): Fix node position

---
 .../components/flows/map/FlowJobsMenu.svelte  | 50 +++++-----
 .../lib/components/graph/FlowGraphV2.svelte   |  1 +
 .../graph/renderers/nodes/InputNode.svelte    | 92 +++++++++----------
 .../graph/renderers/nodes/ModuleNode.svelte   | 27 +++---
 4 files changed, 84 insertions(+), 86 deletions(-)

diff --git a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
index 6e3f0ba6a2..92a9e2619c 100644
--- a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
+++ b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
@@ -2,6 +2,7 @@
 	import Menu from '$lib/components/common/menu/MenuV2.svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { ListFilter } from 'lucide-svelte'
+	import { MenuItem } from '@rgossiaux/svelte-headlessui'
 
 	const dispatch = createEventDispatcher()
 
@@ -42,29 +43,28 @@
 			<ListFilter size={15} />
 		</button>
 	</div>
-
-	<div id="flow-editor-insert-module">
-		<div class="font-mono divide-y text-xs w-full text-secondary max-h-[200px] overflow-auto">
-			<input autofocus type="number" bind:value={filter} on:keydown={onKeydown} />
-			{#each flowJobs ?? [] as id, idx (id)}
-				{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
-					<button
-						class="w-full text-left py-1 pl-2 min-w-20 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
-							idx
-						] == false
-							? 'text-red-400'
-							: ''}"
-						on:pointerdown={() => {
-							close()
-							dispatch('selectedIteration', { index: idx, id })
-						}}
-						role="menuitem"
-						tabindex="-1"
-					>
-						#{idx + 1}
-					</button>
-				{/if}
-			{/each}
-		</div>
-	</div>
+	<MenuItem disabled>
+		<input type="number" bind:value={filter} on:keydown={onKeydown} />
+	</MenuItem>
+	{#each flowJobs ?? [] as id, idx (id)}
+		{#if filter == undefined || (idx + 1).toString().includes(filter.toString())}
+			<MenuItem>
+				<button
+					class="text-primary text-xs w-full text-left py-1 pl-2 hover:bg-surface-hover whitespace-nowrap flex flex-row gap-2 items-center {flowJobsSuccess?.[
+						idx
+					] == false
+						? 'text-red-400'
+						: ''}"
+					on:pointerdown={() => {
+						//close()
+						dispatch('selectedIteration', { index: idx, id })
+					}}
+					role="menuitem"
+					tabindex="-1"
+				>
+					#{idx + 1}
+				</button>
+			</MenuItem>
+		{/if}
+	{/each}
 </Menu>
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index 5ebd6eab4e..6b869b13f1 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -252,6 +252,7 @@
 		connectionLineType={ConnectionLineType.SmoothStep}
 		defaultEdgeOptions={{ type: 'smoothstep' }}
 		preventScrolling={scroll}
+		zoomOnDoubleClick={false}
 		{proOptions}
 		nodesDraggable={false}
 		on:nodeclick={(e) => handleNodeClick(e)}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
index b690eb4638..0e7aa81e3f 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
-	import { NodeToolbar, Position } from '@xyflow/svelte'
 	import { ExternalLink, Wand2 } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import Popover from '$lib/components/Popover.svelte'
@@ -30,53 +29,52 @@
 	}>('FlowGraphContext')
 </script>
 
-{#if data.insertable && !data.disableAi}
-	<NodeToolbar isVisible position={Position.Top}>
-		<Popover>
-			<div class={openNoCopilot ? 'z-10' : ''}>
-				<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
-					<button
-						title="AI Flow Builder"
-						on:pointerdown={$copilotInfo.exists_openai_resource_path
-							? (ev) => {
-									ev.preventDefault()
-									ev.stopPropagation()
-									$copilotDrawerStore?.openDrawer()
-							  }
-							: undefined}
-						slot="trigger"
-						type="button"
-						class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
-					>
-						<Wand2 size={16} />
-					</button>
-					{#if !$copilotInfo.exists_openai_resource_path}
-						<div class="text-primary p-4">
-							<p class="text-sm w-80">
-								Enable Windmill AI in the
-								<a
-									href="{base}/workspace_settings?tab=openai"
-									target="_blank"
-									class="inline-flex flex-row items-center gap-1"
-									on:click={() => {
-										close()
-									}}
-								>
-									workspace settings
-									<ExternalLink size={16} />
-								</a>
-							</p>
-						</div>
-					{/if}
-				</Menu>
-			</div>
-
-			<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
-		</Popover>
-	</NodeToolbar>
-{/if}
-
 <NodeWrapper enableTargetHandle={false} let:darkMode>
+	{#if data.insertable && !data.disableAi}
+		<div class="absolute -top-10 left-1/2 transform -translate-x-1/2 z-10">
+			<Popover>
+				<div class={openNoCopilot ? 'z-10' : ''}>
+					<Menu pointerDown noMinW placement="bottom-center" let:close bind:show={openNoCopilot}>
+						<button
+							title="AI Flow Builder"
+							on:pointerdown={$copilotInfo.exists_openai_resource_path
+								? (ev) => {
+										ev.preventDefault()
+										ev.stopPropagation()
+										$copilotDrawerStore?.openDrawer()
+								  }
+								: undefined}
+							slot="trigger"
+							type="button"
+							class=" bg-surface text-violet-800 dark:text-violet-400 border mx-0.5 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-gray-200 font-medium rounded-full text-sm w-8 h-8 flex items-center justify-center"
+						>
+							<Wand2 size={16} />
+						</button>
+						{#if !$copilotInfo.exists_openai_resource_path}
+							<div class="text-primary p-4">
+								<p class="text-sm w-80">
+									Enable Windmill AI in the
+									<a
+										href="{base}/workspace_settings?tab=openai"
+										target="_blank"
+										class="inline-flex flex-row items-center gap-1"
+										on:click={() => {
+											close()
+										}}
+									>
+										workspace settings
+										<ExternalLink size={16} />
+									</a>
+								</p>
+							</div>
+						{/if}
+					</Menu>
+				</div>
+
+				<svelte:fragment slot="text">AI Flow builder</svelte:fragment>
+			</Popover>
+		</div>
+	{/if}
 	<VirtualItem
 		label="Input"
 		modules={data.modules}
diff --git a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
index 8bb575036d..5945a59ef5 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { NodeToolbar, Position } from '@xyflow/svelte'
 	import MapItem from '$lib/components/flows/map/MapItem.svelte'
 	import type { FlowModule, FlowModuleValue } from '$lib/gen'
 	import { GitBranchPlus } from 'lucide-svelte'
@@ -82,17 +81,17 @@
 			data.eventHandlers.selectedIteration(e.detail, data.module.id)
 		}}
 	/>
-</NodeWrapper>
 
-<NodeToolbar isVisible position={Position.Bottom} align="center">
-	{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
-		<button
-			class="rounded-full border hover:bg-surface-hover bg-surface p-1"
-			on:click={() => {
-				data?.eventHandlers?.newBranch(data.module)
-			}}
-		>
-			<GitBranchPlus size={16} />
-		</button>
-	{/if}
-</NodeToolbar>
+	<div class="absolute -bottom-10 left-1/2 transform -translate-x-1/2 z-10">
+		{#if (data.value.type === 'branchall' || data.value.type === 'branchone') && data.insertable}
+			<button
+				class="rounded-full border hover:bg-surface-hover bg-surface p-1"
+				on:click={() => {
+					data?.eventHandlers?.newBranch(data.module)
+				}}
+			>
+				<GitBranchPlus size={16} />
+			</button>
+		{/if}
+	</div>
+</NodeWrapper>