feat(frontend): Display the index by which a node can be selected with the setTab function + add tooltip (#2974)

frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte

@@ -8,11 +8,13 @@
 	import { Badge } from '$lib/components/common'
 	import { X } from 'lucide-svelte'
 	import { getStateColor } from '$lib/components/graph'
+	import Tooltip from '$lib/components/Tooltip.svelte'
 
 	export let node: DecisionTreeNode
 	export let selected = false
 	export let canDelete: boolean = true
 	export let canAddBranch: boolean = true
+	export let index: number
 
 	let open: boolean = false
 
@@ -46,8 +48,12 @@
 		<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 color="indigo" small>
+			{index}
+			<Tooltip>
+				You can manually select a node using the <b>setTab</b> function with this index in a frontend
+				runnable.
+			</Tooltip>
 		</Badge>
 	</Button>
 

frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/DecisionTreePreview.svelte

@@ -239,7 +239,7 @@
 	function buildGraphNodes() {
 		let branchCount = 1
 
-		nodes?.forEach((graphNode) => {
+		nodes?.forEach((graphNode, index) => {
 			const parentIds = getParents(nodes, graphNode.id)
 			const parentNext = nodes.find((node) => node.id == parentIds[0])?.next
 			const hasParentBranches = parentNext ? parentNext.length > 1 : false
@@ -282,7 +282,8 @@
 									node: graphNode,
 									canDelete:
 										graphNode.next.length === 1 && getParents(nodes, graphNode.id).length === 1,
-									canAddBranch: !cannotAddBranch
+									canAddBranch: !cannotAddBranch,
+									index
 								},
 								cb: (e: string, detail: any) => nodeCallbackHandler(e, detail, graphNode, parentIds)
 							}
@@ -338,7 +339,8 @@
 								props: {
 									node: graphNode,
 									canDelete: !cannotAddBranch,
-									canAddBranch: !cannotAddBranch
+									canAddBranch: !cannotAddBranch,
+									index
 								},
 								cb: (e: string, detail: any) => nodeCallbackHandler(e, detail, graphNode, parentIds)
 							}