feat(frontend): Catch flow errors in the UI (#4429)

* feat(frontend): Catch flow errors in the UI * feat(frontend): typo
windmill-labs · Sep 25, 2024 · 84eefad · 84eefad
1 parent a1ac583
commit 84eefad
Show file tree

Hide file tree

Showing 3 changed files with 500 additions and 426 deletions.
diff --git a/frontend/src/lib/components/flows/content/FlowConstants.svelte b/frontend/src/lib/components/flows/content/FlowConstants.svelte
@@ -121,7 +121,7 @@
 					</Alert>
 				{/if}
 			{/if}
-			{#each steps as [args, filter, m] (m.id)}
+			{#each steps as [args, filter, m], index (m.id + index)}
 				{#if filter.length > 0}
 					<div class="relative h-full border-t p-4">
 						<h2 class="sticky w-full top-0 z-10 inline-flex items-center py-2">

diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -32,6 +32,9 @@
 	import { encodeState } from '$lib/utils'
 	import BranchOneStart from './renderers/nodes/BranchOneStart.svelte'
 	import NoBranchNode from './renderers/nodes/NoBranchNode.svelte'
+	import { Alert, Drawer } from '../common'
+	import Button from '../common/button/Button.svelte'
+	import FlowYamlEditor from '../flows/header/FlowYamlEditor.svelte'
 
 	export let success: boolean | undefined = undefined
 	export let modules: FlowModule[] | undefined = []
@@ -178,6 +181,10 @@
 	let height = 0
 
 	function updateStores() {
+		if (graph.error) {
+			return
+		}
+
 		$nodes = layoutNodes(graph?.nodes)
 		$edges = graph.edges
 
@@ -236,69 +243,87 @@
 	onMount(() => {
 		centerViewport(width)
 	})
+	let yamlEditorDrawer: Drawer | undefined = undefined
 </script>
 
+<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
+
 <div style={`height: ${height}px; max-height: ${maxHeight}px;`} bind:clientWidth={width}>
-	<SvelteFlow
-		{nodes}
-		{edges}
-		{edgeTypes}
-		{nodeTypes}
-		{viewport}
-		{height}
-		minZoom={0.5}
-		connectionLineType={ConnectionLineType.SmoothStep}
-		defaultEdgeOptions={{ type: 'smoothstep' }}
-		preventScrolling={scroll}
-		zoomOnDoubleClick={false}
-		elementsSelectable={false}
-		{proOptions}
-		nodesDraggable={false}
-	>
-		<div class="absolute inset-0 !bg-surface-secondary" />
-		<Controls position="top-right" orientation="horizontal" showLock={false}>
-			{#if download}
-				<ControlButton
-					on:click={() => {
-						try {
-							localStorage.setItem(
-								'svelvet',
-								encodeState({ modules, failureModule, preprocessorModule })
-							)
-						} catch (e) {
-							console.error('error interacting with local storage', e)
-						}
-						window.open('/view_graph', '_blank')
-					}}
-					class="!bg-surface"
+	{#if graph?.error}
+		<div class="center-center">
+			<Alert title="Error parsing the flow" type="error" class="max-w-1/2">
+				{graph.error}
+
+				<Button
+					color="red"
+					size="xs"
+					btnClasses="mt-2 w-min"
+					on:click={() => yamlEditorDrawer?.openDrawer()}>Open YAML editor</Button
 				>
-					<Expand size="14" />
-				</ControlButton>
-			{/if}
-		</Controls>
-
-		<Controls
-			position="top-left"
-			orientation="horizontal"
-			showLock={false}
-			showZoom={false}
-			showFitView={false}
-			class="!shadow-none"
+			</Alert>
+		</div>
+	{:else}
+		<SvelteFlow
+			{nodes}
+			{edges}
+			{edgeTypes}
+			{nodeTypes}
+			{viewport}
+			{height}
+			minZoom={0.5}
+			connectionLineType={ConnectionLineType.SmoothStep}
+			defaultEdgeOptions={{ type: 'smoothstep' }}
+			preventScrolling={scroll}
+			zoomOnDoubleClick={false}
+			elementsSelectable={false}
+			{proOptions}
+			nodesDraggable={false}
 		>
-			{#if showDataflow}
-				<Toggle
-					value={$useDataflow}
-					on:change={() => {
-						$useDataflow = !$useDataflow
-					}}
-					size="xs"
-					options={{
-						right: 'Dataflow'
-					}}
-				/>
-			{/if}
-		</Controls>
-	</SvelteFlow>
+			<div class="absolute inset-0 !bg-surface-secondary" />
+			<Controls position="top-right" orientation="horizontal" showLock={false}>
+				{#if download}
+					<ControlButton
+						on:click={() => {
+							try {
+								localStorage.setItem(
+									'svelvet',
+									encodeState({ modules, failureModule, preprocessorModule })
+								)
+							} catch (e) {
+								console.error('error interacting with local storage', e)
+							}
+							window.open('/view_graph', '_blank')
+						}}
+						class="!bg-surface"
+					>
+						<Expand size="14" />
+					</ControlButton>
+				{/if}
+			</Controls>
+
+			<Controls
+				position="top-left"
+				orientation="horizontal"
+				showLock={false}
+				showZoom={false}
+				showFitView={false}
+				class="!shadow-none"
+			>
+				{#if showDataflow}
+					<Toggle
+						value={$useDataflow}
+						on:change={() => {
+							$useDataflow = !$useDataflow
+						}}
+						size="xs"
+						options={{
+							right: 'Dataflow'
+						}}
+					/>
+				{/if}
+			</Controls>
+		</SvelteFlow>
+	{/if}
 </div>
 
 <style lang="postcss">