UX improvements for flows

frontend/src/app.css

@@ -10,4 +10,10 @@
 		font-weight: 100 900;
 		font-display: swap;
 	}
-}
+	.splitpanes--vertical > .splitpanes__pane {
+		transition: none !important;
+	}
+	.splitpanes--horizontal > .splitpanes__pane {
+		transition: none !important;
+	}
+}

frontend/src/lib/components/EditorBar.svelte

@@ -211,7 +211,7 @@
 
 <div class="flex flex-row justify-between items-center overflow-hidden w-full">
 	<div class="flex flex-row divide-x items-center">
-		<div class="ml-2">
+		<div class="mx-2">
 			<span
 				title={validCode
 					? 'last signature parsing was sucessful'

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

@@ -1,20 +1,41 @@
 <script lang="ts">
-	import { Alert, Tab } from '$lib/components/common'
+	import { Alert, Badge, Button, Tab } from '$lib/components/common'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 	import Tabs from '$lib/components/common/tabs/Tabs.svelte'
+	import HighlightCode from '$lib/components/HighlightCode.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 
 	import type { FlowModule } from '$lib/gen'
+	import { language } from '$lib/sql'
+	import { getContext } from 'svelte'
 	import FlowCard from '../common/FlowCard.svelte'
+	import type { FlowEditorContext } from '../types'
 	import FlowModuleEarlyStop from './FlowModuleEarlyStop.svelte'
 	import FlowModuleSuspend from './FlowModuleSuspend.svelte'
 	// import FlowRetries from './FlowRetries.svelte'
 
+	const { selectedId } = getContext<FlowEditorContext>('FlowEditorContext')
+
 	export let flowModule: FlowModule
 	export let parentModule: FlowModule | undefined
 	export let previousModule: FlowModule | undefined
 
 	let selected: string = 'early-stop'
+	type Branch = { id: string; summary?: string; expr?: string }
+	let branches: Branch[] = []
+	$: if (flowModule.value.type === 'branchone') {
+		branches = flowModule.value.branches.map((branch, i) => ({
+			id: `${flowModule.id}-branch-${i}`,
+			summary: branch.summary,
+			expr: branch.expr
+		}))
+	} else if (flowModule.value.type === 'branchall') {
+		branches = flowModule.value.branches.map((branch, i) => ({
+			id: `${flowModule.id}-branch-${i}`,
+			summary: branch.summary,
+			expr: undefined
+		}))
+	}
 </script>
 
 <div class="h-full flex flex-col">
@@ -22,18 +43,11 @@
 		<div class="flex flex-col h-full">
 			<div class="border">
 				{#if flowModule.value.type == 'branchall'}
-					<Alert type="info" title="All branches will be run in order">
-						Branches run in sequence, every branch is run to the end one after the other.
-						<br />
-						<br />
+					<Alert type="info" title="All branches will be run">
 						Configure branches to skip errors and to not result in that step itself failing.
 						<br />
 						<br />
 						The result of this step is the list of the result of each branch.
-						<br />
-						<br />
-						Since this is a step containing all branches as embedded flows, this step can be retried,
-						stopped early, can be made to sleep or to suspend after execution.
 					</Alert>
 				{:else}
 					<Alert type="info" title="Only one branch will be run">
@@ -42,15 +56,45 @@
 						<br />
 						<br />
 						The result of this step is the result of the branch.
-						<br />
-						<br />
-						Since this is a step containing all branches as embedded flows, this step can be retried,
-						stopped early, can be made to sleep or to suspend after execution.
 					</Alert>
 				{/if}
 
-				{#if flowModule.value.type == 'branchall'}
-					<div class="p-2">
+				<div class="p-2">
+					<h3
+						>{branches.length + (flowModule.value.type === 'branchone' ? 1 : 0)} branch{branches.length +
+							(flowModule.value.type === 'branchone' ? 1 : 0) >
+						1
+							? 'es'
+							: ''}</h3
+					>
+					<div class="flex flex-col gap-y-4 py-2">
+						{#if flowModule.value.type === 'branchone'}
+							<div class="flex flex-row">
+								<Badge large={true} color="blue">Default branch</Badge>
+							</div>
+						{/if}
+						{#each branches as branch, i}
+							{#if flowModule.value.type === 'branchone'}
+								<div class="flex flex-row gap-x-2 items-center">
+									<Button on:click={() => ($selectedId = branch.id)}>
+										Set branch {i} '{branch.summary && branch.summary != ''
+											? branch.summary
+											: 'No summary'}' predicate</Button
+									>
+									<HighlightCode language="deno" code={branch.expr} />
+								</div>
+							{:else}
+								<div>
+									<Badge large={true} color="blue">
+										branch {i}: {branch.summary && branch.summary != ''
+											? branch.summary
+											: 'No summary'}
+									</Badge>
+								</div>
+							{/if}
+						{/each}
+					</div>
+					{#if flowModule.value.type == 'branchall'}
 						<div class="mt-6 mb-2 text-sm font-bold">Run in parallel</div>
 						<Toggle
 							bind:checked={flowModule.value.parallel}
@@ -58,8 +102,8 @@
 								right: 'All branches run in parallel'
 							}}
 						/>
-					</div>
-				{/if}
+					{/if}
+				</div>
 			</div>
 			{#if flowModule}
 				<Tabs bind:selected>

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

@@ -38,7 +38,7 @@
 					? 'bg-blue-200 text-blue-800'
 					: color === 'orange'
 					? 'bg-orange-200 text-orange-800'
-					: 'bg-teal-200 text-teal-800',
+					: 'bg-blue-100 text-blue-600',
 				''
 			)}
 		>

frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte

@@ -45,10 +45,10 @@
 </script>
 
 <Splitpanes>
-	<Pane minSize={20} size={66} class="relative p-4 !duration-[0ms]">
+	<Pane minSize={20} size={66} class="relative p-4 !transition-none">
 		<slot />
 	</Pane>
-	<Pane minSize={20} class="px-2 py-2 h-full !duration-[0ms]">
+	<Pane minSize={20} size={34} class="px-2 py-2 h-full !transition-none">
 		<PropPicker
 			{priorId}
 			{displayContext}