From 787017f53c8227e1246b09e412e92316977937ae Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Sat, 30 Dec 2023 11:06:37 +0900
Subject: [PATCH] fix: decision tree nits (#2936)

* fix(frontend): wip

* fix(frontend): wip

* fix(frontend): decision tree history

* fix(frontend): fix wording

---------

Co-authored-by: Faton Ramadani <faton.ramadani14@gmail.com>
---
 .../components/layout/AppDecisionTree.svelte     | 16 +++++++++-------
 .../apps/editor/DecisionTreeDebug.svelte         | 15 ++++++++++++++-
 .../settingsPanel/DecisionTreeGraphEditor.svelte |  4 +++-
 .../settingsPanel/DecisionTreeGraphNode.svelte   |  4 ++++
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
index 4c536880e2..0460b93ebf 100644
--- a/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
+++ b/frontend/src/lib/components/apps/components/layout/AppDecisionTree.svelte
@@ -41,6 +41,8 @@
 	$: lastNodeId = nodes?.find((node) => node.next.length === 0)?.id
 	$: isNextDisabled = resolvedNext?.[currentNodeId] === false
 
+	const history: string[] = []
+
 	function next() {
 		const resolvedNodeConditions = resolvedConditions[currentNodeId]
 
@@ -55,6 +57,8 @@
 				found = true
 				currentNodeId = node.next[index].id
 
+				history.push(node.id)
+
 				selectedConditionIndex = index + 1
 
 				$focusedGrid = {
@@ -66,12 +70,10 @@
 	}
 
 	function prev() {
-		const previousNode = nodes.find((node) => {
-			return node.next.find((next) => next.id == currentNodeId)
-		})
+		const previsouNodeId = history.pop()
 
-		if (previousNode) {
-			currentNodeId = previousNode.id
+		if (previsouNodeId) {
+			currentNodeId = previsouNodeId
 
 			selectedConditionIndex = nodes.findIndex((next) => next.id == currentNodeId)
 
@@ -175,8 +177,8 @@
 		size="xs2"
 		color="dark"
 		endIcon={{ icon: ArrowRight }}
-		disabled={isNextDisabled}
+		disabled={isNextDisabled || currentNodeId === lastNodeId}
 	>
-		{currentNodeId === lastNodeId ? 'Finish' : 'Next'}
+		Next
 	</Button>
 </div>
diff --git a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
index a9037f584c..11ad40fe9a 100644
--- a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
@@ -13,6 +13,7 @@
 	const dispatch = createEventDispatcher()
 
 	let isManuallySelected: boolean = false
+	let selected: number | null = null
 </script>
 
 <button
@@ -27,11 +28,23 @@
 	on:pointerdown|stopPropagation
 >
 	<ButtonDropdown hasPadding={false}>
+		<svelte:fragment slot="buttonReplacement">
+			<div class="px-1">
+				{#if isManuallySelected}
+					<div>
+						{`Debugging node ${nodes[selected ?? 0].id}`}
+					</div>
+				{:else}
+					{`Debug nodes`}
+				{/if}
+			</div>
+		</svelte:fragment>
 		<svelte:fragment slot="items">
 			{#each nodes ?? [] as node, index}
 				<MenuItem
 					on:click={() => {
 						$componentControl?.[id]?.setTab?.(index)
+						selected = index
 						isManuallySelected = true
 					}}
 				>
@@ -40,7 +53,7 @@
 							'!text-tertiary text-left px-4 py-2 gap-2 cursor-pointer hover:bg-gray-100 !text-xs font-semibold'
 						)}
 					>
-						{`Debug step ${node.label}`}
+						{`Debug node ${node.label}`}
 					</div>
 				</MenuItem>
 			{/each}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index e5b484b429..18b4e2c848 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -90,7 +90,9 @@
 											<div class="grow relative">
 												<InputsSpecEditor
 													key={`condition-${selectedNode.id}-${index}`}
-													customTitle={`${index > 0 ? 'Otherwise ' : ''}Goes to ${subNode.id} if:`}
+													customTitle={`${index > 0 ? 'Otherwise ' : ''}Goes to "${
+														nodes?.find((node) => node.id == subNode.id)?.label
+													}" if:`}
 													bind:componentInput={subNode.condition}
 													id={selectedNode.id}
 													userInputEnabled={false}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
index 12c74c38e8..4b1ff2df65 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte
@@ -5,6 +5,7 @@
 	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'
 
@@ -45,6 +46,9 @@
 		<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}