From 71f9b0ea3edd4826804f9ccbade8d4501919a97c Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Fri, 22 Dec 2023 13:25:12 +0100
Subject: [PATCH] fix(frontend): Fix debug condition + decision tree + add
 missing date to job preview + prevent header node from being selected in the
 flow editor (#2912)

---
 .../apps/editor/ComponentHeader.svelte         |  4 ++--
 .../components/apps/editor/TabsDebug.svelte    | 18 ++++++++++++++++++
 .../settingsPanel/DecisionTreeGraphNode.svelte |  4 ----
 .../decisionTree/DecisionTreePreview.svelte    |  4 ++++
 .../flows/content/FlowSettings.svelte          |  2 +-
 .../src/lib/components/graph/FlowGraph.svelte  |  2 +-
 .../src/lib/components/jobs/JobPreview.svelte  |  5 ++++-
 7 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 0a955f2845..34b7a44bac 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { classNames } from '$lib/utils'
 	import type { AppViewerContext } from '../types'
-	import { Anchor, Bug, Cog, Expand, Move, Pen, Plug2 } from 'lucide-svelte'
+	import { Anchor, Bug, Expand, Move, Network, Pen, Plug2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { Button, Popup } from '$lib/components/common'
@@ -110,7 +110,7 @@
 				}}
 				on:pointerdown|stopPropagation
 			>
-				<Cog size={14} />
+				<Network size={14} />
 			</button>
 			<DecisionTreeDebug id={component.id} nodes={component.nodes ?? []} />
 		{/if}
diff --git a/frontend/src/lib/components/apps/editor/TabsDebug.svelte b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
index 24b9d871f5..ddd2b41471 100644
--- a/frontend/src/lib/components/apps/editor/TabsDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
@@ -14,6 +14,7 @@
 	const dispatch = createEventDispatcher()
 
 	let isManuallySelected: boolean = false
+	let selected: number | null = null
 </script>
 
 <button
@@ -28,11 +29,27 @@
 	on:pointerdown|stopPropagation
 >
 	<ButtonDropdown hasPadding={false}>
+		<svelte:fragment slot="buttonReplacement">
+			<div class="px-1">
+				{#if isManuallySelected}
+					<div>
+						{#if selected === tabs.length - 1}
+							{isConditionalDebugMode ? `Debug default condition` : `Debug tab ${selected + 1}`}
+						{:else}
+							{`Debugging ${isConditionalDebugMode ? 'condition' : 'tab'} ${(selected ?? 0) + 1}`}
+						{/if}
+					</div>
+				{:else}
+					{isConditionalDebugMode ? `Debug conditions` : `Debug tabs`}
+				{/if}
+			</div>
+		</svelte:fragment>
 		<svelte:fragment slot="items">
 			{#each tabs ?? [] as { }, index}
 				<MenuItem
 					on:click={() => {
 						$componentControl?.[id]?.setTab?.(index)
+						selected = index
 						isManuallySelected = true
 					}}
 				>
@@ -52,6 +69,7 @@
 			<MenuItem
 				on:click={() => {
 					$componentControl?.[id]?.setTab?.(-1)
+					selected = null
 					isManuallySelected = false
 				}}
 			>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index 4b1ff2df65..12c74c38e8 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -5,7 +5,6 @@
 	import { twMerge } from 'tailwind-merge'
 	import InsertDecisionTreeNode from './decisionTree/InsertDecisionTreeNode.svelte'
 	import type { Writable } from 'svelte/store'
-	import { Badge } from '$lib/components/common'
 	import { X } from 'lucide-svelte'
 	import { getStateColor } from '$lib/components/graph'
 
@@ -46,9 +45,6 @@
 		<div class="ml-2 text-xs font-normal text-primary truncate">
 			{node.label === '' ? `Tab: ${node.id}` : node.label}
 		</div>
-		<Badge color="indigo">
-			{node.id}
-		</Badge>
 	</Button>
 
 	{#if canDelete}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
index 1cc3c5aa6b..d8fba5e73d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte
@@ -439,6 +439,10 @@
 		}, 10)
 		mounted = true
 	})
+
+	$: if (nodes.length > 0 && !$selectedNodeId) {
+		$selectedNodeId = nodes[0].id
+	}
 </script>
 
 {#if mounted}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 0554fd0936..f82464c1d8 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -69,7 +69,7 @@
 				<Tab value="settings-cache">Cache</Tab>
 
 				<svelte:fragment slot="content">
-					<TabContent value="settings-metadata" class="p-4 h-full">
+					<TabContent value="settings-metadata" class="p-4 h-full overflow-auto">
 						<div class="h-full gap-8 flex flex-col">
 							<Label label="Summary">
 								<input
diff --git a/frontend/src/lib/components/graph/FlowGraph.svelte b/frontend/src/lib/components/graph/FlowGraph.svelte
index 4cec2fa02d..6d64ff00b4 100644
--- a/frontend/src/lib/components/graph/FlowGraph.svelte
+++ b/frontend/src/lib/components/graph/FlowGraph.svelte
@@ -388,7 +388,7 @@
 				1000,
 				loopDepth + 1,
 				0,
-				true,
+				false,
 				undefined,
 				undefined,
 				undefined
diff --git a/frontend/src/lib/components/jobs/JobPreview.svelte b/frontend/src/lib/components/jobs/JobPreview.svelte
index 77faa69dfc..f71406cc7e 100644
--- a/frontend/src/lib/components/jobs/JobPreview.svelte
+++ b/frontend/src/lib/components/jobs/JobPreview.svelte
@@ -100,7 +100,10 @@
 			border shadow-xl flex justify-start items-start w-[600px] h-80
 			overflow-hidden"
 		>
-			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5">
+			<div class="absolute bottom-0 right-1 flex justify-end gap-2 pb-0.5 z-50 bg-surface-primary">
+				{#if job?.started_at}
+					<Badge>{new Date(job?.['started_at']).toLocaleString()}</Badge>
+				{/if}
 				<Badge>
 					Mem: {job?.['mem_peak'] ? `${(job['mem_peak'] / 1024).toPrecision(4)}MB` : 'N/A'}
 				</Badge>