flow nits

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -209,6 +209,10 @@
 				{:else if stepDetail.value.type == 'flow'}
 					<FlowPathViewer noSide path={stepDetail.value.path} />
 				{/if}
+			{:else}
+				<p class="font-medium text-gray-600 text-center pt-4 pb-8">
+					Step {stepDetail} selected
+				</p>
 			{/if}
 		</div>
 	{/if}

frontend/src/lib/components/common/menu/Menu.svelte

@@ -11,7 +11,7 @@
 	export let show = false
 	export let wrapperClasses = ''
 	export let popupClasses = ''
-	export let transitionDuration = 100
+	export let transitionDuration = 25
 	let menu: HTMLDivElement
 
 	type Alignment = 'start' | 'end' | 'center'

frontend/src/lib/components/flows/content/BranchPredicateEditor.svelte

@@ -6,6 +6,8 @@
 
 	import { getStepPropPicker } from '../previousResults'
 	import type { FlowEditorContext } from '../types'
+	import Button from '$lib/components/common/button/Button.svelte'
+	import { faPen } from '@fortawesome/free-solid-svg-icons'
 
 	export let branch: {
 		summary?: string
@@ -19,7 +21,7 @@
 		getContext<FlowEditorContext>('FlowEditorContext')
 
 	let editor: SimpleEditor | undefined = undefined
-
+	let open = false
 	$: stepPropPicker = getStepPropPicker(
 		$flowStateStore,
 		parentModule,
@@ -31,22 +33,32 @@
 	)
 </script>
 
-<PropPickerWrapper
-	notSelectable
-	pickableProperties={stepPropPicker.pickableProperties}
-	on:select={({ detail }) => {
-		editor?.insertAtCursor(detail)
-		editor?.focus()
-	}}
->
-	<div class="border border-gray-400">
-		<SimpleEditor
-			bind:this={editor}
-			lang="javascript"
-			bind:code={branch.expr}
-			class="small-editor border "
-			shouldBindKey={false}
-			extraLib={stepPropPicker.extraLib}
-		/>
+{#if open}
+	<PropPickerWrapper
+		notSelectable
+		pickableProperties={stepPropPicker.pickableProperties}
+		on:select={({ detail }) => {
+			editor?.insertAtCursor(detail)
+			editor?.focus()
+		}}
+	>
+		<div class="border border-gray-400">
+			<SimpleEditor
+				bind:this={editor}
+				lang="javascript"
+				bind:code={branch.expr}
+				class="small-editor border "
+				shouldBindKey={false}
+				extraLib={stepPropPicker.extraLib}
+			/>
+		</div>
+	</PropPickerWrapper>
+{:else}
+	<div class="flex justify-between gap-4 p-2">
+		<div><pre class="text-sm">{branch.expr}</pre></div><div
+			><Button startIcon={{ icon: faPen }} variant="border" on:click={() => (open = !open)}
+				>Edit Predicate</Button
+			></div
+		>
 	</div>
-</PropPickerWrapper>
+{/if}

frontend/src/lib/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -44,7 +44,7 @@
 							</div>
 							{#each value.branches as branch, i}
 								<div class="flex flex-col gap-x-2 items-center">
-									<div class="w-full flex gap-2 px-2 pt-10 pb-2">
+									<div class="w-full flex gap-2 px-2 pt-4 pb-2">
 										<Badge large={true} color="blue">Branch {i + 1}</Badge>
 										<input
 											class="w-full"

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -129,7 +129,7 @@ export async function createBranchAll(id: string): Promise<[FlowModule, FlowModu
 		id,
 		value: {
 			type: 'branchall',
-			branches: []
+			branches: [{ modules: [] }]
 		},
 		summary: ''
 	}

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

@@ -65,7 +65,7 @@
 	}}
 >
 	<div
-		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm 
+		class="flex gap-1 justify-between items-center w-full overflow-hidden rounded-sm
 			border border-gray-400 p-2 text-2xs module"
 	>
 		{#if $$slots.icon}
@@ -101,7 +101,7 @@
 					}
 				}}
 				type="button"
-				class=" text-gray-900 bg-white 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-gray-900 bg-white 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"
 			>
 				<ClipboardCopy size={12} />
 			</button>

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

@@ -261,8 +261,8 @@
 							if (!notSelectable) {
 								if ($selectedId != mod.id) {
 									$selectedId = mod.id
-									dispatch('select', mod)
 								}
+								dispatch('select', mod)
 							}
 						} else if (e == 'insert') {
 							dispatch('insert', detail)
@@ -634,7 +634,6 @@
 						id: mod.id
 					},
 					cb: (e: string, detail: any) => {
-						console.log(detail)
 						if (e == 'select') {
 							$selectedId = detail
 							dispatch('select', detail)

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -274,7 +274,7 @@
 						size="xs"
 						startIcon={{ icon: faCalendar }}
 					>
-						Schedule
+						New Schedule
 					</Button>
 					<Button
 						on:click={() => moveDrawer.openDrawer(flow?.path ?? '', flow?.summary, 'flow')}

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -331,7 +331,7 @@
 						size="xs"
 						startIcon={{ icon: faCalendar }}
 					>
-						Schedule
+						New Schedule
 					</Button>
 				{/if}
 				<Button