From 3f7c19f267a9965f21cf8a08040a45e088d24918 Mon Sep 17 00:00:00 2001
From: Faton Ramadani <faton.ramadani14@gmail.com>
Date: Wed, 20 Dec 2023 17:21:59 +0100
Subject: [PATCH] feat(frontend): add a quick button to open decision tree
 graph (#2897)

---
 .../apps/editor/ComponentHeader.svelte         | 18 +++++++++++++++++-
 .../DecisionTreeGraphEditor.svelte             |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index 47f0d7d050..0a955f2845 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, Expand, Move, Pen, Plug2 } from 'lucide-svelte'
+	import { Anchor, Bug, Cog, Expand, Move, Pen, Plug2 } from 'lucide-svelte'
 	import { createEventDispatcher, getContext } from 'svelte'
 	import Popover from '$lib/components/Popover.svelte'
 	import { Button, Popup } from '$lib/components/common'
@@ -96,6 +96,22 @@
 		{:else if component.type === 'steppercomponent' || (component.type === 'tabscomponent' && component.configuration.tabsKind.type === 'static' && component.configuration.tabsKind.value === 'invisibleOnView')}
 			<TabsDebug id={component.id} tabs={component.tabs ?? []} />
 		{:else if component.type === 'decisiontreecomponent'}
+			<button
+				title={'Open Decision Tree Editor'}
+				class={classNames(
+					'text-2xs py-0.5 px-1 font-bold w-fit border cursor-pointer rounded-sm',
+					'bg-indigo-100 text-indigo-600 border-indigo-500 hover:bg-indigo-200 hover:text-indigo-800'
+				)}
+				on:click={() => {
+					const element = document.getElementById(`decision-tree-graph-editor`)
+					if (element) {
+						element.click()
+					}
+				}}
+				on:pointerdown|stopPropagation
+			>
+				<Cog size={14} />
+			</button>
 			<DecisionTreeDebug id={component.id} nodes={component.nodes ?? []} />
 		{/if}
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
index efbf8acaec..e5b484b429 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte
@@ -163,11 +163,12 @@
 <div class="p-2 flex flex-col gap-2">
 	<Button
 		tooltip="Decision tree graph editor"
+		id="decision-tree-graph-editor"
 		on:click={() => {
 			drawer?.openDrawer()
 		}}
 		size="xs"
-		color="light"
+		color="dark"
 		startIcon={{ icon: Network }}
 	>
 		Graph editor