feat(frontend): clean up

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -289,6 +289,8 @@
 				}
 			}}
 			on:insert={async ({ detail }) => {
+				console.log('insert', detail)
+
 				if (shouldRunTutorial('forloop', detail.detail, 1)) {
 					flowTutorials?.runTutorialById('forloop', detail.index)
 				} else if (shouldRunTutorial('branchone', detail.detail, 2)) {
@@ -338,6 +340,8 @@
 				}
 			}}
 			on:move={async ({ detail }) => {
+				console.log('move', detail, $moving)
+
 				if (!$moving || $moving.module.id !== detail.module.id) {
 					if (detail.module && detail.modules) {
 						$moving = { module: detail.module, modules: detail.modules }

frontend/src/lib/components/flows/map/MapItem.svelte

@@ -3,36 +3,23 @@
 	import LanguageIcon from '$lib/components/common/languageIcons/LanguageIcon.svelte'
 	import IconedResourceType from '$lib/components/IconedResourceType.svelte'
 	import type { FlowModule } from '$lib/gen'
-	import {
-		Building,
-		ClipboardCopy,
-		GitBranchPlus,
-		Repeat,
-		Square,
-		ArrowDown,
-		GitBranch
-	} from 'lucide-svelte'
+	import { Building, Repeat, Square, ArrowDown, GitBranch } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 	import FlowModuleSchemaItem from './FlowModuleSchemaItem.svelte'
-	import InsertModuleButton from './InsertModuleButton.svelte'
 	import { prettyLanguage } from '$lib/common'
 	import { msToSec } from '$lib/utils'
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import FlowJobsMenu from './FlowJobsMenu.svelte'
 
 	export let mod: FlowModule
-	export let trigger: boolean
 	export let insertable: boolean
-	export let insertableEnd = false
 	export let annotation: string | undefined = undefined
-	export let branchable: boolean = false
 	export let bgColor: string = ''
 	export let modules: FlowModule[]
 	export let moving: string | undefined = undefined
 	export let duration_ms: number | undefined = undefined
-	export let disableAi: boolean = false
-	export let wrapperId: string | undefined = undefined
+
 	export let retries: number | undefined = undefined
 	export let flowJobs:
 		| { flowJobs: string[]; selected: number; flowJobsSuccess: (boolean | undefined)[] }
@@ -69,30 +56,9 @@
 	function onDelete(event: CustomEvent<MouseEvent>) {
 		dispatch('delete', event)
 	}
-	let openMenu: boolean | undefined = undefined
-	let openMenu2: boolean | undefined = undefined
 </script>
 
 {#if mod}
-	<div
-		class="{openMenu
-			? 'z-20'
-			: ''} w-[27px] absolute -top-[35px] left-[50%] right-[50%] -translate-x-1/2"
-	>
-		{#if moving}
-			<button
-				title="Add branch"
-				on:click={() => {
-					dispatch('insert', { modules, index: idx, detail: 'move' })
-				}}
-				type="button"
-				disabled={wrapperId === moving}
-				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 class="m-[5px]" size={15} />
-			</button>
-		{/if}
-	</div>
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
@@ -226,55 +192,4 @@
 			{/if}
 		</div>
 	</div>
-	{#if insertable && insertableEnd}
-		<div
-			class="{openMenu2
-				? 'z-20'
-				: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
-		>
-			{#if moving}
-				<button
-					title="Add branch"
-					on:click={() => {
-						dispatch('insert', { modules, index: idx + 1, detail: 'move' })
-					}}
-					type="button"
-					disabled={wrapperId === moving}
-					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 class="m-[5px]" size={15} />
-				</button>
-			{:else}
-				<InsertModuleButton
-					{disableAi}
-					bind:open={openMenu2}
-					{trigger}
-					on:insert={(e) => {
-						dispatch('insert', { modules, index: idx + 1, detail: 'script', script: e.detail })
-					}}
-					on:new={(e) => {
-						dispatch('insert', { modules, index: idx + 1, detail: e.detail })
-					}}
-					index={idx + 1}
-					{modules}
-				/>
-			{/if}
-		</div>
-	{/if}
-
-	{#if insertable && branchable}
-		<div class="w-[27px] absolute top-[45px] left-[60%] right-[40%] -translate-x-1/2">
-			<button
-				title="Add branch"
-				on:click={() => {
-					dispatch('newBranch', { module: mod })
-				}}
-				type="button"
-				id="add-branch-button"
-				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 class="m-[5px]" size={15} />
-			</button>
-		</div>
-	{/if}
 {/if}

frontend/src/lib/components/flows/map/VirtualItem.svelte

@@ -3,7 +3,7 @@
 	import { Badge } from '$lib/components/common'
 	import type { FlowModule } from '$lib/gen'
 	import { classNames } from '$lib/utils'
-	import { ClipboardCopy, ExternalLink, Wand2, X } from 'lucide-svelte'
+	import { ExternalLink, Wand2, X } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import type { FlowCopilotContext } from '$lib/components/copilot/flow'
 	import { copilotInfo } from '$lib/stores'
@@ -12,17 +12,14 @@
 
 	export let label: string
 	export let modules: FlowModule[] | undefined
-	export let index: number
 	export let insertable: boolean
 	export let bgColor: string = ''
 	export let selected: boolean
 	export let selectable: boolean
 	export let deleteBranch: { module: FlowModule; index: number } | undefined = undefined
 	export let id: string | undefined = undefined
-	export let moving: string | undefined = undefined
 	export let center = true
 	export let disableAi: boolean = false
-	export let wrapperNode: FlowModule | undefined = undefined
 	export let borderColor: string | undefined = undefined
 	export let hideId: boolean = false
 
@@ -36,7 +33,6 @@
 		select: string
 		deleteBranch: { module: FlowModule; index: number }
 	}>()
-	let openMenu = false
 	let triggerOpenMenu = false
 	let openNoCopilot = false
 
@@ -102,34 +98,6 @@
 	</div>
 </div>
 
-{#if modules && (label != 'Input' || modules.length == 0)}
-	<div
-		class="{openMenu
-			? 'z-20'
-			: ''} w-[27px] absolute top-[49px] left-[50%] right-[50%] -translate-x-1/2"
-	>
-		{#if moving}
-			<button
-				title="Add branch"
-				on:click={() => {
-					if (modules) {
-						dispatch('insert', {
-							modules,
-							index,
-							detail: 'move'
-						})
-					}
-				}}
-				type="button"
-				disabled={wrapperNode?.id === moving}
-				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>
-		{/if}
-	</div>
-{/if}
-
 {#if insertable && modules && label == 'Input'}
 	{#if !disableAi}
 		<div

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -162,7 +162,8 @@
 		},
 		success,
 		$useDataflow,
-		$selectedId
+		$selectedId,
+		moving
 	)
 
 	const nodes = writable<Node[]>([])
@@ -220,13 +221,12 @@
 		{edges}
 		{edgeTypes}
 		{nodeTypes}
-		minZoom={1}
+		minZoom={0.5}
 		connectionLineType={ConnectionLineType.SmoothStep}
 		defaultEdgeOptions={{ type: 'smoothstep' }}
 		fitView
 		{proOptions}
 		nodesDraggable={false}
-		preventScrolling={!scroll}
 		on:nodeclick={(e) => handleNodeClick(e)}
 		on:delete={(e) => {
 			console.log('delete', e.detail)

frontend/src/lib/components/graph/graphBuilder.ts

@@ -20,7 +20,8 @@ export default function graphBuilder(
 	eventHandlers: GraphEventHandlers,
 	success: boolean | undefined,
 	useDataflow: boolean | undefined,
-	selectedId: string | undefined
+	selectedId: string | undefined,
+	moving: string | undefined
 ): {
 	nodes: Node[]
 	edges: Edge[]
@@ -42,6 +43,7 @@ export default function graphBuilder(
 				modules: modules,
 				parentIds: [],
 				eventHandlers: eventHandlers,
+				moving: moving,
 				...extra
 			},
 			position: { x: -1, y: -1 },
@@ -72,7 +74,8 @@ export default function graphBuilder(
 				modules,
 				sourceId,
 				targetId,
-				offset
+				offset,
+				moving
 			}
 		})
 	}

frontend/src/lib/components/graph/renderers/edges/BaseEdge.svelte

@@ -2,6 +2,7 @@
 	import InsertModuleButton from '$lib/components/flows/map/InsertModuleButton.svelte'
 	import type { FlowModule } from '$lib/gen/models/FlowModule'
 	import { getBezierPath, BaseEdge, type Position, EdgeLabelRenderer } from '@xyflow/svelte'
+	import { ClipboardCopy } from 'lucide-svelte'
 	import { getContext } from 'svelte'
 	import type { Writable } from 'svelte/store'
 
@@ -16,6 +17,7 @@
 	export let data: {
 		insertable: boolean
 		modules: FlowModule[]
+		moving: string | undefined
 	}
 
 	$: [edgePath, labelX, labelY] = getBezierPath({
@@ -43,7 +45,7 @@
 </script>
 
 <EdgeLabelRenderer>
-	{#if data?.insertable && !$useDataflow}
+	{#if data?.insertable && !$useDataflow && !data?.moving}
 		<div
 			class="edgeButtonContainer nodrag nopan"
 			style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
@@ -51,6 +53,24 @@
 			<InsertModuleButton index={0} modules={data?.modules ?? []} funcDesc="" />
 		</div>
 	{/if}
+
+	{#if data?.moving}
+		<div
+			class="edgeButtonContainer nodrag nopan"
+			style:transform="translate(-50%, -50%) translate({labelX}px,{labelY}px)"
+		>
+			{#if data.moving}
+				<button
+					title="Paste module"
+					on:click={() => {}}
+					type="button"
+					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"
+				>
+					<ClipboardCopy class="m-[5px]" size={15} />
+				</button>
+			{/if}
+		</div>
+	{/if}
 </EdgeLabelRenderer>
 
 <BaseEdge path={completeEdge} {markerEnd} class={$useDataflow ? 'hidden' : ''} />

frontend/src/lib/components/graph/renderers/nodes/BranchAllStart.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
-	// @ts-ignore
-	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
+	import { NodeToolbar, Position } from '@xyflow/svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import { X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
@@ -61,7 +60,6 @@
 	<VirtualItem
 		label={data.label}
 		modules={data.modules}
-		index={data.branchIndex}
 		selectable
 		selected={data.selected}
 		insertable={data.insertable}

frontend/src/lib/components/graph/renderers/nodes/ForLoopEndNode.svelte

@@ -29,7 +29,6 @@
 	<VirtualItem
 		label={'Collect result of each iteration'}
 		modules={data.modules}
-		index={data.modules.findIndex((m) => m.id == data.id) + 1}
 		selectable={true}
 		selected={false}
 		insertable={data.insertable}

frontend/src/lib/components/graph/renderers/nodes/ForLoopStartNode.svelte

@@ -21,7 +21,6 @@
 	<VirtualItem
 		label={'Do one iteration'}
 		modules={data.modules}
-		index={0}
 		selectable={false}
 		insertable={false}
 		selected={false}

frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte

@@ -81,7 +81,6 @@
 	<VirtualItem
 		label="Input"
 		modules={data.modules}
-		index={0}
 		selectable
 		selected={$selectedId === 'Input'}
 		insertable={false}

frontend/src/lib/components/graph/renderers/nodes/ModuleNode.svelte

@@ -3,8 +3,7 @@
 	import { NodeToolbar, Position } from '@xyflow/svelte'
 	import MapItem from '$lib/components/flows/map/MapItem.svelte'
 	import type { FlowModule, FlowModuleValue } from '$lib/gen/types.gen'
-	import { ClipboardCopy, GitBranchPlus } from 'lucide-svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { GitBranchPlus } from 'lucide-svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { GraphEventHandlers } from '../../graphBuilder'
 	import type { GraphModuleState } from '../../model'
@@ -14,7 +13,6 @@
 		offset: number
 		value: FlowModuleValue
 		module: FlowModule
-		trigger: boolean
 		insertable: boolean
 		insertableEnd: boolean
 		branchable: boolean
@@ -33,11 +31,6 @@
 		selected: boolean
 	}
 
-	$: idx = data.modules?.findIndex((m) => m.id === data.module.id)
-
-	const dispatch = createEventDispatcher()
-	let openMenu: boolean | undefined = undefined
-
 	$: type = data.flowModuleStates?.[data.module.id]?.type
 	if (!type && data.flowJobs) {
 		type = 'InProgress'
@@ -56,19 +49,14 @@
 <NodeWrapper offset={data.offset} let:darkMode>
 	<MapItem
 		mod={data.module}
-		trigger={data.trigger}
 		insertable={data.insertable}
-		insertableEnd={data.insertableEnd}
 		annotation={state?.flow_jobs
 			? 'ierations ' + state?.flow_jobs?.length + '/' + (state?.iteration_total ?? '?')
 			: ''}
-		branchable={data.branchable}
 		bgColor={getStateColor(type, darkMode)}
 		modules={data.modules ?? []}
 		moving={data.moving}
 		duration_ms={data.duration_ms}
-		disableAi={data.disableAi}
-		wrapperId={data.wrapperId}
 		retries={data.retries}
 		{flowJobs}
 		on:delete={(e) => {
@@ -92,31 +80,6 @@
 	/>
 </NodeWrapper>
 
-<NodeToolbar isVisible position={Position.Top} align="end">
-	{#if data.insertable}
-		<div
-			class="{openMenu
-				? 'z-20'
-				: ''} w-[27px] absolute -top-[35px] left-[50%] right-[50%] -translate-x-1/2"
-		>
-			{#if data.moving}
-				<button
-					title="Add branch"
-					on:click={() => {
-						dispatch('insert', { modules: data.modules, index: idx, detail: 'move' })
-						//data?.eventHandlers?.insert()
-					}}
-					type="button"
-					disabled={data.wrapperId === data.moving}
-					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 class="m-[5px]" size={15} />
-				</button>
-			{/if}
-		</div>
-	{/if}
-</NodeToolbar>
-
 <NodeToolbar isVisible position={Position.Bottom} align="center">
 	{#if data.value.type === 'branchall' && data.insertable}
 		<button

frontend/src/lib/components/graph/renderers/nodes/ResultNode.svelte

@@ -25,7 +25,6 @@
 		id={'Result'}
 		label={'Result'}
 		modules={undefined}
-		index={data.modules.length}
 		selectable={true}
 		selected={$selectedId === 'Result'}
 		insertable={false}

frontend/src/lib/components/graph/renderers/nodes/branchAllEndNode.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import VirtualItem from '$lib/components/flows/map/VirtualItem.svelte'
-	// @ts-ignore
-	import { Handle, NodeToolbar, Position, type NodeProps } from '@xyflow/svelte'
 	import NodeWrapper from './NodeWrapper.svelte'
 	import type { FlowModule } from '$lib/gen/models/FlowModule'
 	import type { GraphEventHandlers } from '../../graphBuilder'
@@ -19,7 +17,6 @@
 	<VirtualItem
 		label={'Collect result from all branches'}
 		modules={data.modules}
-		index={data.modules.findIndex((m) => m.id == data.id) + 1}
 		id={data.id}
 		selectable={true}
 		selected={false}