windmill-components 1.352.9 → 1.362.0

package/package/components/apps/editor/componentsPanel/ComponentList.svelte

@@ -138,7 +138,7 @@ let ccDrawer;
 						<ListItem title={`${title}`} subtitle={`(${components.length})`}>
 							<div class="flex flex-wrap gap-3 py-2">
 								{#each components as item (item)}
-									<div class="w-20 relative">
+									<div class="w-[64px] relative">
 										{#if DEPRECATED_COMPONENTS[item]}
 											<div
 												class="absolute -top-2 -right-2 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100 rounded-md py-0.5 px-1 flex flex-row gap-1 items-center"
@@ -166,7 +166,7 @@ let ccDrawer;
 												})
 											}}
 											title={componentsRecord[item].name}
-											class="cursor-move transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+											class="cursor-move transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 											justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 										>
 											<svelte:component this={componentsRecord[item].icon} class="text-primary" />
@@ -178,11 +178,11 @@ let ccDrawer;
 								{/each}
 								{#if presets}
 									{#each presets as presetItem (presetItem)}
-										<div class="w-20">
+										<div class="w-[64px]">
 											<button
 												on:click={() => addPresetComponent(presetItem)}
 												title={presetsRecord[presetItem].name}
-												class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+												class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 											>
 												<svelte:component
@@ -205,13 +205,13 @@ let ccDrawer;
 				<div class="flex flex-wrap gap-3 py-2">
 					{#if groups}
 						{#each groups as group (group.path)}
-							<div class="w-20">
+							<div class="w-[64px]">
 								<button
 									on:click={() => {
 										addGroup(group)
 									}}
 									title={group.name}
-									class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+									class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 								>
 									<LayoutDashboard class="text-secondary" />
@@ -222,13 +222,13 @@ let ccDrawer;
 							</div>
 						{/each}
 					{/if}
-					<div class="w-20">
+					<div class="w-[64px]">
 						<button
 							on:click={() => {
 								addNewGroup()
 							}}
 							title=""
-							class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+							class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 								justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 						>
 							<Plus class="text-secondary" />
@@ -241,13 +241,13 @@ let ccDrawer;
 				<div class="flex flex-wrap gap-3 py-2">
 					{#if customComponents}
 						{#each customComponents as cc (cc.path)}
-							<div class="w-20">
+							<div class="w-[64px]">
 								<button
 									on:click={() => {
 										addCustomComponent(cc)
 									}}
 									title={cc.name}
-									class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+									class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 										justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 								>
 									<LayoutDashboard class="text-secondary" />
@@ -258,7 +258,7 @@ let ccDrawer;
 							</div>
 						{/each}
 					{/if}
-					<div class="w-20">
+					<div class="w-[64px]">
 						<button
 							on:click={() => {
 								if (!$enterpriseLicense) {
@@ -268,7 +268,7 @@ let ccDrawer;
 								}
 							}}
 							title=""
-							class="transition-all border w-20 shadow-sm h-16 p-2 flex flex-col gap-2 items-center
+							class="transition-all border w-[64px] shadow-sm h-16 p-2 flex flex-col gap-2 items-center
 								justify-center bg-surface rounded-md hover:bg-blue-50 dark:hover:bg-blue-900 duration-200 hover:border-blue-500"
 						>
 							<Plus class="text-secondary" />

package/package/components/apps/editor/componentsPanel/cssUtils.js

@@ -322,7 +322,13 @@ export const customisationByComponent = [
         variables: []
     },
     {
-        components: ['aggridcomponent', 'aggridcomponentee'],
+        components: [
+            'aggridcomponent',
+            'aggridcomponentee',
+            'aggridinfinitecomponent',
+            'aggridinfinitecomponentee',
+            'dbexplorercomponent'
+        ],
         selectors: [
             { selector: '.wm-aggrid-container', comment: 'Ag grid container', customCssKey: 'container' }
         ],
@@ -354,7 +360,7 @@ export const customisationByComponent = [
         variables: []
     },
     {
-        components: ['fileinputcomponent'],
+        components: ['fileinputcomponent', 's3fileinputcomponent'],
         selectors: [
             { selector: '.wm-file-input', comment: 'File input component', customCssKey: 'input' }
         ],
@@ -517,7 +523,7 @@ export const customisationByComponent = [
         variables: []
     },
     {
-        components: ['agchartscomponent'],
+        components: ['agchartscomponent', 'agchartscomponentee'],
         selectors: [{ selector: '.wm-agchart', comment: 'AgCharts', customCssKey: 'container' }],
         variables: []
     },
@@ -739,6 +745,36 @@ export const customisationByComponent = [
             }
         ],
         root: '.multiselect'
+    },
+    {
+        components: ['alertcomponent'],
+        selectors: [
+            {
+                selector: 'wm-alert-card-container',
+                comment: 'Alert container',
+                customCssKey: 'container'
+            }
+        ],
+        variables: []
+    },
+    {
+        components: ['decisiontreecomponent'],
+        selectors: [
+            {
+                selector: 'wm-decision-tree',
+                comment: 'Decision tree container',
+                customCssKey: 'container'
+            }
+        ],
+        variables: []
+    },
+    {
+        components: ['menucomponent'],
+        selectors: [
+            { selector: '.wm-menu-button', comment: 'Menu button', customCssKey: 'button' },
+            { selector: '.wm-menu-button-container', comment: 'Menu button container' }
+        ],
+        variables: []
     }
 ];
 export const allClasses = customisationByComponent

package/package/components/apps/editor/componentsPanel/quickStyleProperties.js

@@ -694,5 +694,11 @@ export const quickStyleProperties = {
         icon: containerDefaultProps,
         title: containerDefaultProps,
         description: containerDefaultProps
+    },
+    navbarcomponent: {
+        container: containerDefaultProps
+    },
+    dateselectcomponent: {
+        input: inputDefaultProps
     }
 };

package/package/components/apps/editor/contextPanel/ComponentOutput.svelte

@@ -15,7 +15,7 @@ export let expanded = false;
 const { connectingInput } = getContext('AppViewerContext');
 const name = getComponentNameById(gridItem.id);
 $: nameOverrides =
-    gridItem.data.type === 'decisiontreecomponent'
+    gridItem?.data?.type === 'decisiontreecomponent'
         ? gridItem.data.nodes.map((n, i) => `${n.label} (Tab index ${i})`)
         : undefined;
 function getComponentNameById(componentId) {
@@ -32,7 +32,7 @@ function getComponentNameById(componentId) {
         return 'Table action';
     }
 }
-$: subGrids = Array.from({ length: gridItem.data.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
+$: subGrids = Array.from({ length: gridItem.data?.numberOfSubgrids ?? 0 }).map((_, i) => `${gridItem.id}-${i}`);
 </script>
 
 <OutputHeader id={gridItem.id} name={getComponentNameById(gridItem.id)} {first} {nested}>

package/package/components/apps/editor/contextPanel/ContextPanel.svelte

@@ -7,12 +7,18 @@ import ComponentOutputViewer from './ComponentOutputViewer.svelte';
 import BackgroundScriptsOutput from './components/BackgroundScriptsOutput.svelte';
 import OutputHeader from './components/OutputHeader.svelte';
 import { ClearableInput } from '../../../common';
+import DocLink from '../settingsPanel/DocLink.svelte';
 const { connectingInput, app } = getContext('AppViewerContext');
 const { search } = getContext('ContextPanel');
 let hasState = false;
 </script>
 
 <PanelSection noPadding titlePadding="px-2 pt-2" title="Outputs">
+	<svelte:fragment slot="action">
+		<div class="p-0.5">
+			<DocLink docLink="https://www.windmill.dev/docs/apps/outputs" />
+		</div>
+	</svelte:fragment>
 	<div
 		class={classNames(
 			'bg-surface w-full h-full z-30 overflow-auto',

package/package/components/apps/editor/contextPanel/components/OutputHeader.svelte

@@ -4,6 +4,7 @@ import { ChevronDown, ChevronUp, Pointer } from 'lucide-svelte';
 import { getContext } from 'svelte';
 import { allsubIds, findGridItem } from '../../appUtils';
 import IdEditor from './IdEditor.svelte';
+import DocLink from '../../settingsPanel/DocLink.svelte';
 export let id;
 export let name;
 export let first = false;
@@ -227,6 +228,16 @@ function processRunnable(from, to, runnable) {
 			{/if}
 		</div>
 		<div class="text-2xs font-bold flex flex-row gap-2 items-center truncate">
+			{#if ['ctx', 'state'].includes(id)}
+				<DocLink
+					docLink={id === 'state'
+						? 'https://www.windmill.dev/docs/apps/outputs#state'
+						: id === 'ctx'
+						? 'https://www.windmill.dev/docs/apps/outputs#app-context'
+						: ''}
+					size="xs2"
+				/>
+			{/if}
 			{name}
 			<div class={classNames('bg-surface-secondary rounded-sm')}>
 				{#if !open}

package/package/components/apps/editor/inlineScriptsPanel/InlineScriptsPanelList.svelte

@@ -9,6 +9,7 @@ import AppTutorials from '../../../AppTutorials.svelte';
 import { tutorialsToDo } from '../../../../stores';
 import { ignoredTutorials } from '../../../tutorials/ignoredTutorials';
 import { tutorialInProgress } from '../../../../tutorialUtils';
+import DocLink from '../settingsPanel/DocLink.svelte';
 const PREFIX = 'script-selector-';
 const { app, selectedComponent } = getContext('AppViewerContext');
 const { selectedComponentInEditor } = getContext('AppEditorContext');
@@ -64,6 +65,9 @@ let appTutorials = undefined;
 </script>
 
 <PanelSection title="Runnables" id="app-editor-runnable-panel">
+	<svelte:fragment slot="action">
+		<DocLink docLink="https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable" />
+	</svelte:fragment>
 	<div class="w-full flex flex-col gap-6 py-1">
 		<div>
 			<div class="flex flex-col gap-2 w-full">

package/package/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte

@@ -6,6 +6,7 @@ import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
 import QuickAddColumn from './QuickAddColumn.svelte';
+import RefreshDatabaseStudioTable from './RefreshDatabaseStudioTable.svelte';
 export let componentInput;
 export let subFieldType = undefined;
 export let selectOptions = undefined;
@@ -191,11 +192,20 @@ function handleFinalize(e) {
     const reorderedValues = items.map((item) => item.value);
     componentInput.value = reorderedValues;
 }
-let items = (Array.isArray(componentInput.value) ? componentInput.value : [])
-    .filter((x) => x != undefined)
-    .map((item, index) => {
-    return { value: item, id: generateRandomString() };
-});
+let items = getItems(componentInput);
+function getItems(componentInput) {
+    return (Array.isArray(componentInput.value) ? componentInput.value : [])
+        .filter((x) => x != undefined)
+        .map((item) => {
+        return { value: item, id: generateRandomString() };
+    });
+}
+function clearTableOnComponentReset(value) {
+    if (Array.isArray(value) && value.length === 0 && items.length > 0) {
+        items = [];
+    }
+}
+$: subFieldType === 'db-explorer' && clearTableOnComponentReset(componentInput?.value);
 $: items != undefined && handleItemsChange();
 function handleItemsChange() {
     componentInput.value = items.map((item) => item.value).filter((item) => item != undefined);
@@ -280,11 +290,14 @@ let raw = false;
 	{/if}
 	{#if subFieldType === 'db-explorer'}
 		{#if componentInput.loading}
-			<div class="flex flex-row gap-2 w-full items-center text-xs">
-				<Loader2 class="animate-spin" size={14} />
-				Loading columns defintions...
+			<div class="flex flex-row gap-2 w-full items-center">
+				<div class="flex flex-row gap-2 w-full items-center text-xs">
+					<Loader2 class="animate-spin" size={14} />
+					Loading columns defintions...
+				</div>
 			</div>
 		{/if}
+		<RefreshDatabaseStudioTable {id} />
 	{/if}
 	{#if subFieldType !== 'db-explorer'}
 		<Button size="xs" color="light" startIcon={{ icon: Plus }} on:click={() => addElementByType()}>

package/package/components/apps/editor/settingsPanel/ComponentPanel.svelte

@@ -15,18 +15,19 @@ import TemplateEditor from '../../../TemplateEditor.svelte';
 import { ccomponents, components } from '../component';
 import CssProperty from '../componentsPanel/CssProperty.svelte';
 import GridTab from './GridTab.svelte';
-import { deleteGridItem } from '../appUtils';
+import { deleteGridItem, isTableAction } from '../appUtils';
 import GridPane from './GridPane.svelte';
 import { slide } from 'svelte/transition';
 import { push } from '../../../../history';
 import StylePanel from './StylePanel.svelte';
-import { ChevronLeft, ExternalLink, ArrowBigUp } from 'lucide-svelte';
+import { ChevronLeft, ArrowBigUp, ArrowLeft } from 'lucide-svelte';
 import GridCondition from './GridCondition.svelte';
 import { isTriggerable } from './script/utils';
 import { inferDeps } from '../appUtilsInfer';
 import EvalV2InputEditor from './inputEditor/EvalV2InputEditor.svelte';
 import GridGroup from './GridGroup.svelte';
 import { secondaryMenuLeft } from './secondaryMenu';
+import DocLink from './DocLink.svelte';
 import ComponentControl from './ComponentControl.svelte';
 import GridAgGridLicenseKey from './GridAgGridLicenseKey.svelte';
 import ComponentPanelDataSource from './ComponentPanelDataSource.svelte';
@@ -36,6 +37,10 @@ import GridAgChartsLicenseKe from './GridAgChartsLicenseKe.svelte';
 import Toggle from '../../../Toggle.svelte';
 import ContextVariables from './ContextVariables.svelte';
 import EventHandlers from './EventHandlers.svelte';
+import GridNavbar from './GridNavbar.svelte';
+import Badge from '../../../common/badge/Badge.svelte';
+import { twMerge } from 'tailwind-merge';
+import Popover from '../../../Popover.svelte';
 export let componentSettings = undefined;
 export let onDelete = undefined;
 export let noGrid = false;
@@ -133,22 +138,54 @@ function transformToFrontend() {
 
 <svelte:window on:keydown={keydown} />
 
+{#if componentSettings?.item?.id && isTableAction(componentSettings?.item?.id, $app)}
+	<div
+		class="flex items-center px-3 py-2 bg-surface border-b text-xs font-semibold gap-2 justify-between"
+	>
+		<div class="flex flex-row items-center gap-2">
+			<Popover>
+				<svelte:fragment slot="text">
+					<div class="flex flex-row gap-1"> Back to table component </div>
+				</svelte:fragment>
+				<Button
+					iconOnly
+					startIcon={{
+						icon: ArrowLeft
+					}}
+					size="xs"
+					btnClasses={twMerge(
+						'p-1 text-gray-300 hover:!text-gray-600 dark:text-gray-500 dark:hover:!text-gray-200 bg-transparent'
+					)}
+					on:click={() => {
+						const tableId = componentSettings?.item?.id?.split?.('_')?.[0]
+
+						if (tableId) {
+							$selectedComponent = [tableId]
+						}
+					}}
+					color="light"
+				/>
+			</Popover>
+
+			<div class="flex flex-row gap-2 items-center">
+				Table action of table
+				<Badge color="indigo">{componentSettings?.item?.id.split('_')[0]}</Badge>
+			</div>
+		</div>
+
+		<DocLink
+			docLink="https://www.windmill.dev/docs/apps/app_configuration_settings/aggrid_table#table-actions"
+		/>
+	</div>
+{/if}
+
 {#if componentSettings?.item?.data}
 	{@const component = componentSettings.item.data}
-	<div class="flex justify-between items-center px-3 py-2 bg-surface-secondary">
+	<div class="flex justify-between items-center px-3 py-1 bg-surface-secondary">
 		<div class="text-xs text-primary font-semibold"
 			>{components[componentSettings.item.data.type]?.name ?? 'Unknown'}</div
 		>
-		<a
-			href={components[componentSettings.item.data.type]?.documentationLink}
-			target="_blank"
-			class="text-frost-500 dark:text-frost-300 font-semibold text-xs"
-		>
-			<div class="flex flex-row gap-2">
-				See documentation
-				<ExternalLink size="16" />
-			</div>
-		</a>
+		<DocLink docLink={components[componentSettings.item.data.type]?.documentationLink} />
 	</div>
 
 	<div class="flex min-h-[calc(100%-32px)] flex-col min-w-[150px] w-full divide-y">
@@ -165,16 +202,19 @@ function transformToFrontend() {
 					id={'component-input'}
 				>
 					<svelte:fragment slot="action">
-						{#if componentSettings.item.data.type !== 'plotlycomponentv2'}
-							<span
+						<div class="flex flex-row gap-1 justify-center items-center">
+							<DocLink
+								docLink={'https://www.windmill.dev/docs/apps/app-runnable-panel#creating-a-runnable'}
+							/>
+							<div
 								class={classNames(
-									'text-white px-2 text-2xs py-0.5 font-bold rounded-sm w-fit',
+									'text-white px-2 text-2xs py-0.5 font-bold rounded-sm',
 									'bg-indigo-500'
 								)}
 							>
 								{`${component.id}`}
-							</span>
-						{/if}
+							</div>
+						</div>
 					</svelte:fragment>
 
 					{#if componentSettings.item.data.componentInput}
@@ -250,7 +290,8 @@ function transformToFrontend() {
 							{/if}
 						</div>
 					{/if}
-					<ContextVariables type={component.type} />
+
+					<ContextVariables type={component.type} id={component.id} />
 
 					{#key $stateId}
 						{#if componentSettings.item.data.componentInput?.type === 'runnable'}
@@ -293,6 +334,9 @@ function transformToFrontend() {
 
 		<ComponentControl type={component.type} />
 
+		{#if componentSettings.item.data.type === 'navbarcomponent'}
+			<GridNavbar bind:navbarItems={componentSettings.item.data.navbarItems} id={component.id} />
+		{/if}
 		{#if componentSettings.item.data.type === 'tabscomponent'}
 			<GridTab
 				bind:tabs={componentSettings.item.data.tabs}
@@ -375,7 +419,7 @@ function transformToFrontend() {
 						size="xs"
 						variant="border"
 						startIcon={{ icon: ChevronLeft }}
-						on:click={() => secondaryMenuLeft.toggle(StylePanel, {})}
+						on:click={() => secondaryMenuLeft.toggle(StylePanel, { type: 'style' })}
 					>
 						Show
 					</Button>

package/package/components/apps/editor/settingsPanel/ContextVariables.svelte

@@ -1,6 +1,10 @@
 <script>import Popover from '../../../Popover.svelte';
 import Tooltip from '../../../Tooltip.svelte';
+import { getContext } from 'svelte';
+import { dfs, findGridItem } from '../appUtils';
 export let type;
+export let id;
+const { app } = getContext('AppViewerContext');
 const tables = [
     'aggridcomponent',
     'aggridcomponentee',
@@ -9,30 +13,59 @@ const tables = [
     'aggridinfinitecomponentee'
 ];
 const contextVariables = [];
+function addContextVariable(label, description) {
+    if (!contextVariables.some((variable) => variable.label === label)) {
+        contextVariables.push({ label, description });
+    }
+}
 if (tables.includes(type)) {
-    contextVariables.push({
-        label: 'row',
-        description: 'The current row of a table. Row is an object with keys index and value.'
-    });
+    addContextVariable('row', 'The current row of a table. Row is an object with keys index and value.');
 }
 else if (type === 's3fileinputcomponent' || type === 'fileinputcomponent') {
-    contextVariables.push({
-        label: 'file',
-        description: 'The current file being processed.'
-    });
+    addContextVariable('file', 'The current file being processed.');
 }
 else if (type === 'containercomponent') {
-    contextVariables.push({
-        label: 'group',
-        description: 'The group name of the container.'
-    });
+    addContextVariable('group', 'The group name of the container.');
 }
 else if (type === 'listcomponent') {
-    contextVariables.push({
-        label: 'iter',
-        description: 'The current iteration of the list. Iter is an object with keys index and value.'
+    addContextVariable('iter', 'The current iteration of the list. Iter is an object with keys index and value.');
+}
+function addGridItemContext(parentId) {
+    if (!parentId)
+        return;
+    const gridItem = findGridItem($app, parentId);
+    addParentContextVariable(gridItem);
+}
+function processParents(parents) {
+    parents.forEach((parentId) => {
+        if (parentId) {
+            const parsedParentId = parentId?.includes('-') ? parentId.split('-')[0] : parentId;
+            addGridItemContext(parsedParentId);
+        }
     });
 }
+function findParentsContextVariables(id) {
+    if (!id)
+        return;
+    const allParents = dfs($app.grid, id, $app.subgrids ?? {});
+    if (!allParents)
+        return;
+    // Remove last element as it is the current component
+    allParents.pop();
+    processParents(allParents);
+}
+findParentsContextVariables(id);
+function addParentContextVariable(parent) {
+    if (parent?.data?.type === 'containercomponent') {
+        addContextVariable('group', 'The group name of the container.');
+    }
+    else if (parent?.data?.type === 'listcomponent') {
+        addContextVariable('iter', 'The current iteration of the list. Iter is an object with keys index and value.');
+    }
+    else if (parent?.data?.type && tables.includes(parent?.data?.type)) {
+        addContextVariable('row', 'The current row of a table. Row is an object with keys index and value.');
+    }
+}
 </script>
 
 {#if contextVariables.length > 0}

package/package/components/apps/editor/settingsPanel/ContextVariables.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         type: string;
+        id: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphEditor.svelte

@@ -1,7 +1,7 @@
-<script>import { Button, Drawer, DrawerContent } from '../../../common';
+<script>import { Alert, Button, Drawer, DrawerContent } from '../../../common';
 import { Network, Plus, Trash } from 'lucide-svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import { setContext } from 'svelte';
+import { getContext, setContext } from 'svelte';
 import InputsSpecEditor from './InputsSpecEditor.svelte';
 import Section from '../../../Section.svelte';
 import { writable } from 'svelte/store';
@@ -9,6 +9,7 @@ import DecisionTreePreview from './decisionTree/DecisionTreePreview.svelte';
 import { addNewBranch, removeNode } from './decisionTree/utils';
 import Label from '../../../Label.svelte';
 import { debounce } from '../../../../utils';
+import Badge from '../../../common/badge/Badge.svelte';
 export let component;
 export let nodes;
 export let rebuildOnChange = undefined;
@@ -16,6 +17,7 @@ let drawer = undefined;
 let paneWidth = 0;
 let paneHeight = 0;
 let renderCount = 0;
+const { debuggingComponents } = getContext('AppViewerContext');
 const selectedNodeId = writable(undefined);
 $: selectedNode = nodes?.find((node) => node.id == $selectedNodeId);
 setContext('DecisionTreeEditor', { selectedNodeId });
@@ -57,6 +59,11 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 									variant="border"
 									on:click={() => {
 										nodes = removeNode(nodes, selectedNode)
+
+										$debuggingComponents = Object.fromEntries(
+											Object.entries($debuggingComponents).filter(([key]) => key !== component.id)
+										)
+
 										renderCount++
 									}}
 									disabled={selectedNode?.next?.length > 1 || nodes.length == 1}
@@ -87,9 +94,9 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 											<div class="grow relative">
 												<InputsSpecEditor
 													key={`condition-${selectedNode.id}-${index}`}
-													customTitle={`${index > 0 ? 'Otherwise ' : ''}Goes to branch ${
-														index + 1
-													} (First node: ${nodes?.findIndex((node) => node.id == subNode.id)}) if:`}
+													customTitle={index === 0
+														? 'Goes to the default branch'
+														: `${index > 0 ? 'Otherwise ' : ''}Goes to branch ${index}`}
 													bind:componentInput={subNode.condition}
 													id={selectedNode.id}
 													userInputEnabled={false}
@@ -105,10 +112,23 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 													displayType={false}
 													fixedOverflowWidgets={false}
 												/>
+												<div class="flex flex-row gap-1 mt-2">
+													<Badge>
+														{`Next node id: ${subNode.id}`}
+													</Badge>
+													<Badge color="indigo">
+														{`Next tab index: ${nodes?.findIndex((node) => node.id == subNode.id)}`}
+													</Badge>
+												</div>
 											</div>
 										</div>
 									{/if}
 								{/each}
+
+								<Alert type="info" class="mt-4" title="Multiple branches" size="xs">
+									The conditions above are evaluated in order. The first condition that is met will
+									be the branch that is taken.
+								</Alert>
 							{/if}
 							{#key selectedNode.id}
 								{#if selectedNode.allowed}

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte

@@ -11,6 +11,7 @@ export let selected = false;
 export let canDelete = true;
 export let canAddBranch = true;
 export let index;
+export let darkMode;
 let open = false;
 const dispatch = createEventDispatcher();
 const { selectedNodeId } = getContext('DecisionTreeEditor');
@@ -24,7 +25,7 @@ $: selected = $selectedNodeId === node.id;
 			selected ? 'outline outline-2 outline-offset-2 outline-gray-600' : '',
 			'flex flex-row gap-2 items-center justify-between'
 		)}
-		style="width: 275px; height: 34px; background-color: {getStateColor(undefined)};"
+		style="width: 275px; height: 34px; background-color: {getStateColor(undefined, darkMode)};"
 		on:click={() => {
 			selected = true
 			dispatch('select', node.id)

package/package/components/apps/editor/settingsPanel/DecisionTreeGraphNode.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         canDelete?: boolean | undefined;
         canAddBranch?: boolean | undefined;
         index: number;
+        darkMode: boolean;
     };
     events: {
         select: CustomEvent<string>;