windmill-components 1.269.3 → 1.291.4

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

@@ -604,6 +604,12 @@ export const quickStyleProperties = {
     dateinputcomponent: {
         input: inputDefaultProps
     },
+    timeinputcomponent: {
+        input: inputDefaultProps
+    },
+    datetimeinputcomponent: {
+        container: inputDefaultProps
+    },
     fileinputcomponent: {
         container: containerDefaultProps
     },

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

@@ -0,0 +1,178 @@
+<script>import { getContext } from 'svelte';
+import { allItems } from '../../utils';
+import Section from '../../../Section.svelte';
+import Badge from '../../../common/badge/Badge.svelte';
+import { deleteGridItem, findGridItem, findGridItemParentGrid } from '../appUtils';
+import { pluralize } from '../../../../utils';
+import Button from '../../../common/button/Button.svelte';
+import { Trash } from 'lucide-svelte';
+import Alert from '../../../common/alert/Alert.svelte';
+const { app, initialized } = getContext('AppViewerContext');
+$: unintitializedComponents = allItems($app.grid, $app.subgrids)
+    .map((x) => x.id)
+    .filter((x) => !$initialized.initializedComponents?.includes(x))
+    .sort();
+$: subgridsErrors = Object.keys($app.subgrids ?? {})
+    .map((x) => {
+    const parentId = x.split('-')[0];
+    const parent = findGridItem($app, parentId);
+    const subgrid = x.replace(`${parentId}-`, '');
+    if (subgrid == '-1') {
+        return {
+            subGridId: x,
+            error: 'Invalid subgrid index -1 '
+        };
+    }
+    else if (parent === undefined) {
+        return {
+            subGridId: x,
+            error: 'Parent not found'
+        };
+    }
+    else if (parent?.data?.numberOfSubgrids === undefined) {
+        return {
+            subGridId: x,
+            error: 'Parent is not a container'
+        };
+    }
+})
+    .filter(Boolean);
+</script>
+
+<div class="flex flex-col gap-8" style="all:none;">
+	{#if unintitializedComponents?.length === 0 && subgridsErrors?.length === 0}
+		<Alert type="success" title="No issues found">
+			The app has no subgrid errors or uninitialized components.
+		</Alert>
+	{:else}
+		<Alert type="error" title="Issues found">
+			The app has {unintitializedComponents.length} uninitialized components and {subgridsErrors.length}
+			subgrid errors.
+			<br />
+			Please contact Windmill support for assistance.
+		</Alert>
+	{/if}
+	{#if unintitializedComponents.length > 0}
+		<Section label="Uninitialized components">
+			<div class="max-w-xl">
+				<div class="text-sm mb-4">
+					There are {pluralize(unintitializedComponents.length, 'uninitialized component')} in the app.
+				</div>
+
+				<div class="grid grid-cols-4 border rounded-md overflow-hidden">
+					<!-- Header -->
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Component Id</div
+					>
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Type</div
+					>
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Status</div
+					>
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Action</div>
+
+					<!-- Iterate over uninitializedComponents to display each component in the grid -->
+					{#each unintitializedComponents as c}
+						{@const item = findGridItem($app, c)}
+						{#if !item}
+							<div>Item {c} not found</div>
+						{:else}
+						<!-- Component Id -->
+						<div class="text-xs flex items-center px-2 py-2">
+							<Badge>
+								{c}
+							</Badge>
+						</div>
+
+						<div class="text-xs flex items-center px-2 py-2">
+							<Badge color="blue">
+								{item?.data?.type || 'Unknown'}
+							</Badge>
+						</div>
+
+						<div class="text-xs flex items-center px-2 py-2">
+							<Badge color="red">Uninitialized</Badge>
+						</div>
+						<div class="text-xs flex items-center px-2 py-2">
+
+							<Button
+								color="light"
+								startIcon={{
+									icon: Trash
+								}}
+								size="xs2"
+								on:click={() => {
+									let parent = findGridItemParentGrid($app, c)
+									deleteGridItem($app, item.data, parent)
+									$app = $app
+								}}
+							>
+								Remove
+							</Button>
+						</div>
+						{/if}
+
+					{/each}
+				</div>
+			</div>
+		</Section>{/if}
+	{#if subgridsErrors.length > 0}
+		<Section label="Subgrids errors">
+			<div class="max-w-xl">
+				<div class="text-sm mb-4">
+					There are
+					{pluralize(subgridsErrors.length, 'subgrid')} with errors in the app.
+				</div>
+
+				<div class="grid grid-cols-3 border rounded-md overflow-hidden">
+					<!-- Header -->
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Subgrid Id</div
+					>
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Error</div
+					>
+					<div class="font-semibold bg-gray-100 dark:bg-gray-900 px-2 py-1 text-xs border-b"
+						>Action</div
+					>
+
+					<!-- Iterate over uninitializedComponents to display each component in the grid -->
+					{#each subgridsErrors as s}
+						<!-- Component Id -->
+						<div class="text-xs flex items-center px-2 py-2">
+							<Badge>
+								{s?.subGridId}
+							</Badge>
+						</div>
+
+						<div class="text-xs flex items-center px-2 py-2">
+							<Badge color="red">
+								{s?.error}
+							</Badge>
+						</div>
+
+						<div class="text-xs flex items-center px-2 py-2">
+							<Button
+								color="light"
+								startIcon={{
+									icon: Trash
+								}}
+								size="xs2"
+								on:click={() => {
+									if ($app.subgrids && s) {
+										delete $app.subgrids[s.subGridId]
+										$app = { ...$app }
+									}
+								}}
+							>
+								Remove
+							</Button>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</Section>
+	{/if}
+</div>

package/package/components/apps/editor/contextPanel/DebugPanel.svelte.d.ts

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DebugPanelProps = typeof __propDef.props;
+export type DebugPanelEvents = typeof __propDef.events;
+export type DebugPanelSlots = typeof __propDef.slots;
+export default class DebugPanel extends SvelteComponent<DebugPanelProps, DebugPanelEvents, DebugPanelSlots> {
+}
+export {};

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

@@ -21,8 +21,10 @@ export let cache_ttl;
 				: 'bg-surface text-primay hover:bg-hover'}
 			color="light"
 			variant="border"
-			size="xs">Cache</Button
+			size="xs2"
 		>
+			Cache
+		</Button>
 	</svelte:fragment>
 	<div class="block text-primary">
 		<Toggle

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

@@ -6,7 +6,7 @@ import { Script } from '../../../../gen';
 import { inferArgs } from '../../../../infer';
 import { initialCode } from '../../../../script_helpers';
 import { emptySchema } from '../../../../utils';
-import { getScriptByPath } from '../../../../scripts';
+import { defaultScriptLanguages, getScriptByPath } from '../../../../scripts';
 import { Building, GitFork, Globe2 } from 'lucide-svelte';
 import { createEventDispatcher, getContext } from 'svelte';
 import { fly } from 'svelte/transition';
@@ -14,6 +14,8 @@ import { defaultCode } from '../component';
 import InlineScriptList from '../settingsPanel/mainInput/InlineScriptList.svelte';
 import WorkspaceScriptList from '../settingsPanel/mainInput/WorkspaceScriptList.svelte';
 import RunnableSelector from '../settingsPanel/mainInput/RunnableSelector.svelte';
+import { defaultScripts } from '../../../../stores';
+import DefaultScripts from '../../../DefaultScripts.svelte';
 export let name;
 export let componentType = undefined;
 export let showScriptPicker = false;
@@ -63,21 +65,10 @@ function pickInlineScript(name) {
     $app = $app;
     dispatch('new', unusedInlineScript.inlineScript);
 }
-const langs = [
-    ['deno', 'TypeScript (Deno)'],
-    ['python3', 'Python'],
-    ['bun', 'TypeScript (Bun)'],
-    ['go', 'Go'],
-    ['bash', 'Bash'],
-    ['powershell', 'PowerShell'],
-    ['nativets', 'REST'],
-    ['postgresql', 'PostgreSQL'],
-    ['mysql', 'MySQL'],
-    ['bigquery', 'BigQuery'],
-    ['snowflake', 'Snowflake'],
-    ['mssql', 'MS SQL Server'],
-    ['graphql', 'GraphQL']
-];
+$: langs = ($defaultScripts?.order ?? Object.keys(defaultScriptLanguages))
+    .map((l) => [defaultScriptLanguages[l], l])
+    .filter((x) => x[1] != 'docker' &&
+    ($defaultScripts?.hidden == undefined || !$defaultScripts.hidden.includes(x[1])));
 </script>
 
 <Drawer bind:this={picker} size="1000px">
@@ -163,10 +154,10 @@ const langs = [
 
 	<div class="flex flex-row w-full gap-8">
 		<div id="app-editor-backend-runnables">
-			<div class="mb-1 text-sm font-semibold">Backend</div>
+			<div class="mb-1 text-sm font-semibold flex gap-4">Backend <DefaultScripts /> </div>
 
 			<div class="flex flex-row flex-wrap gap-2">
-				{#each langs as [lang, label]}
+				{#each langs as [label, lang] (lang)}
 					<FlowScriptPicker
 						{label}
 						{lang}

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

@@ -4,10 +4,9 @@ import { Maximize2, Trash2 } from 'lucide-svelte';
 import InlineScriptEditorDrawer from './InlineScriptEditorDrawer.svelte';
 import { inferArgs, parseOutputs } from '../../../../infer';
 import Editor from '../../../Editor.svelte';
-import { defaultIfEmptyString, emptySchema, getModifierKey, itemsExists } from '../../../../utils';
+import { defaultIfEmptyString, emptySchema, itemsExists } from '../../../../utils';
 import { computeFields } from './utils';
 import { deepEqual } from 'fast-equals';
-import Kbd from '../../../common/kbd/Kbd.svelte';
 import SimpleEditor from '../../../SimpleEditor.svelte';
 import { buildExtraLib } from '../../utils';
 import RunButton from './RunButton.svelte';
@@ -172,45 +171,41 @@ async function inferSuggestions(code) {
 
 				<Button
 					title="Delete"
-					size="xs"
+					size="xs2"
 					color="red"
 					variant="border"
-					btnClasses="!px-2"
 					aria-label="Delete"
 					on:click={() => dispatch('delete')}
 					endIcon={{ icon: Trash2 }}
+					iconOnly
 				/>
 				{#if inlineScript.language != 'frontend'}
 					<Button
-						size="xs"
+						size="xs2"
 						color="light"
 						title="Full Editor"
-						btnClasses="!px-2  !bg-surface-secondary hover:!bg-surface-hover"
+						variant="border"
 						on:click={() => {
 							inlineScriptEditorDrawer?.openDrawer()
 						}}
 						endIcon={{ icon: Maximize2 }}
+						iconOnly
 					/>
 				{/if}
 
 				<Button
 					variant="border"
-					size="xs"
+					size="xs2"
 					color="light"
-					btnClasses="!px-2 !py-1"
 					on:click={async () => {
 						editor?.format()
 						simpleEditor?.format()
 					}}
+					shortCut={{
+						key: 'S'
+					}}
 				>
-					<div class="flex flex-row gap-1 items-center">
-						Format
-
-						<div class="flex flex-row items-center">
-							<Kbd small isModifier>{getModifierKey()}</Kbd>
-							<Kbd small>S</Kbd>
-						</div>
-					</div>
+					Format
 				</Button>
 				<RunButton bind:runLoading {id} inlineScript={!transformer ? inlineScript : undefined} />
 			</div>

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

@@ -40,9 +40,9 @@ const dispatch = createEventDispatcher();
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-tertiary">
+		<div class="px-2 pt-4 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
-		</span>
+		</div>
 	{/if}
 {:else if componentInput?.type == 'runnable'}
 	{#if componentInput?.runnable?.type === 'runnableByName' && componentInput?.runnable?.name !== undefined}

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

@@ -37,9 +37,9 @@ const dispatch = createEventDispatcher();
 			}}
 		/>
 	{:else}
-		<span class="px-2 text-tertiary">
+		<div class="px-2 pt-4 text-tertiary">
 			Selected editor component is a transformer but component has no transformer
-		</span>
+		</div>
 	{/if}
 {:else if runnable?.type === 'runnableByName' && runnable.inlineScript}
 	<InlineScriptEditor

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

@@ -1,7 +1,6 @@
 <script>import { getContext } from 'svelte';
-import { Button, Kbd } from '../../../common';
-import { getModifierKey } from '../../../../utils';
-import { Loader2 } from 'lucide-svelte';
+import { Button } from '../../../common';
+import { CornerDownLeft, Loader2 } from 'lucide-svelte';
 export let id;
 export let inlineScript = undefined;
 export let runLoading = false;
@@ -27,16 +26,9 @@ let cancelable = undefined;
 				} catch {}
 				runLoading = false
 			}}
+			shortCut={{ Icon: CornerDownLeft, hide: hideShortcut }}
 		>
-			<div class="flex flex-row gap-1 items-center">
-				Run
-				{#if !hideShortcut}
-					<div class="flex flex-row items-center">
-						<Kbd small isModifier>{getModifierKey()}</Kbd>
-						<Kbd small><span class="text-lg font-bold">⏎</span></Kbd>
-					</div>
-				{/if}
-			</div>
+			Run
 		</Button>
 	{:else}
 		<Button

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

@@ -1,8 +1,7 @@
 <script>import { Button } from '../../../common';
-import { GripVertical, Plus, X } from 'lucide-svelte';
+import { GripVertical, Loader2, Plus, X } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import SubTypeEditor from './SubTypeEditor.svelte';
-import { flip } from 'svelte/animate';
 import { dndzone, SOURCES, TRIGGERS } from 'svelte-dnd-action';
 import { generateRandomString, pluralize } from '../../../../utils';
 import Toggle from '../../../Toggle.svelte';
@@ -220,6 +219,22 @@ function handleItemsChange() {
     componentInput.value = items.map((item) => item.value).filter((item) => item != undefined);
 }
 let raw = false;
+// let mounted = false
+// $: if (componentInput.value && mounted) {
+// 	const newItems = (Array.isArray(componentInput.value) ? componentInput.value : [])
+// 		.filter((x) => x != undefined)
+// 		.map((item, index) => {
+// 			return { value: item, id: generateRandomString() }
+// 		})
+// 	if (
+// 		JSON.stringify(newItems.map((i) => i.value)) !== JSON.stringify(items.map((i) => i.value))
+// 	) {
+// 		items = newItems
+// 	}
+// }
+// onMount(() => {
+// 	mounted = true
+// })
 </script>
 
 <div class="flex gap-2 flex-col mt-2 w-full">
@@ -248,7 +263,7 @@ let raw = false;
 			on:finalize={handleFinalize}
 		>
 			{#each items as item, index (item.id)}
-				<div animate:flip={{ duration: flipDurationMs }} class="border-0 outline-none w-full">
+				<div class="border-0 outline-none w-full">
 					<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 
 					<div class="flex flex-row gap-2 items-center relative my-1 w-full">
@@ -275,7 +290,7 @@ let raw = false;
 							</div>
 							{#if subFieldType !== 'db-explorer'}
 								<button
-									class="z-10 rounded-full p-1 duration-200 hover:bg-gray-200"
+									class="z-10 rounded-full p-1 duration-200 hover:bg-surface-hover"
 									aria-label="Remove item"
 									on:click|preventDefault|stopPropagation={() => deleteElementByType(index)}
 								>
@@ -288,6 +303,14 @@ let raw = false;
 			{/each}
 		</section>
 	{/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>
+		{/if}
+	{/if}
 	{#if subFieldType !== 'db-explorer'}
 		<Button size="xs" color="light" startIcon={{ icon: Plus }} on:click={() => addElementByType()}>
 			Add

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

@@ -2,7 +2,9 @@ import { SvelteComponent } from "svelte";
 import type { InputType, StaticInput, StaticOptions } from '../../inputType';
 declare const __propDef: {
     props: {
-        componentInput: StaticInput<any[]>;
+        componentInput: StaticInput<any[]> & {
+            loading?: boolean;
+        };
         subFieldType?: InputType | undefined;
         selectOptions?: StaticOptions['selectOptions'] | undefined;
         id: string | undefined;

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

@@ -5,7 +5,7 @@ import InputsSpecsEditor from './InputsSpecsEditor.svelte';
 import TableActions from './TableActions.svelte';
 import StaticInputEditor from './inputEditor/StaticInputEditor.svelte';
 import ConnectedInputEditor from './inputEditor/ConnectedInputEditor.svelte';
-import { classNames, getModifierKey, isMac } from '../../../../utils';
+import { classNames, getModifierKey } from '../../../../utils';
 import { buildExtraLib } from '../../utils';
 import Recompute from './Recompute.svelte';
 import Tooltip from '../../../Tooltip.svelte';
@@ -20,9 +20,8 @@ import { deleteGridItem } from '../appUtils';
 import GridPane from './GridPane.svelte';
 import { slide } from 'svelte/transition';
 import { push } from '../../../../history';
-import Kbd from '../../../common/kbd/Kbd.svelte';
 import StylePanel from './StylePanel.svelte';
-import { ChevronLeft, Delete, ExternalLink } from 'lucide-svelte';
+import { ChevronLeft, ExternalLink, ArrowBigUp } from 'lucide-svelte';
 import GridCondition from './GridCondition.svelte';
 import { isTriggerable } from './script/utils';
 import { inferDeps } from '../appUtilsInfer';
@@ -128,6 +127,9 @@ function transformToFrontend() {
         componentSettings.item.data.componentInput = appInput;
     }
 }
+function isMac() {
+    return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+}
 </script>
 
 <svelte:window on:keydown={keydown} />
@@ -236,7 +238,7 @@ function transformToFrontend() {
 									id={component.id}
 									bind:componentInput={componentSettings.item.data.componentInput}
 								/>
-								<a class="text-2xs" on:click={transformToFrontend} href="#">
+								<a class="text-2xs" on:click={transformToFrontend} href={undefined}>
 									transform to a frontend script
 								</a>
 							{:else if componentSettings.item.data.componentInput?.type === 'runnable' && component.componentInput !== undefined}
@@ -269,6 +271,9 @@ function transformToFrontend() {
 										bind:inputSpecs={componentSettings.item.data.componentInput.fields}
 										userInputEnabled={component.type === 'formcomponent' ||
 											component.type === 'formbuttoncomponent'}
+										recomputeOnInputChanged={componentSettings.item.data.componentInput
+											.recomputeOnInputChanged}
+										showOnDemandOnlyToggle
 									/>
 								</div>
 							{/if}
@@ -345,6 +350,24 @@ function transformToFrontend() {
 				ownId={component.id}
 			/>
 		{/if}
+		{#if componentSettings.item.data.type === 'checkboxcomponent'}
+			<Recompute
+				title="Recompute on toggle"
+				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human toggle the change, not if it set by a default value or by setValue'}
+				documentationLink={undefined}
+				bind:recomputeIds={componentSettings.item.data.onToggle}
+				ownId={component.id}
+			/>
+		{/if}
+		{#if componentSettings.item.data.type === 'resourceselectcomponent' || componentSettings.item.data.type === 'selectcomponent'}
+			<Recompute
+				title="Recompute on select"
+				tooltip={'Contrary to onSuccess, this will only trigger recompute when a human select an item, not if it set by a default value or by setValue'}
+				documentationLink={undefined}
+				bind:recomputeIds={componentSettings.item.data.onSelect}
+				ownId={component.id}
+			/>
+		{/if}
 
 		<div class="grow shrink" />
 
@@ -385,39 +408,56 @@ function transformToFrontend() {
 		{#if duplicateMoveAllowed}
 			<PanelSection title="Copy/Move">
 				<div slot="action">
-					<Button size="xs" color="red" variant="border" on:click={removeGridElement}>
-						Delete&nbsp;&nbsp;
-						{#if isMac()}
-							<Kbd kbdClass="center-center">
-								<span class="text-lg leading-none">⌘</span>
-								<span class="px-0.5">+</span>
-								<Delete size={16} />
-							</Kbd>
-						{:else}
-							<Kbd>Del</Kbd>
-						{/if}
+					<Button
+						size="xs"
+						color="red"
+						variant="border"
+						on:click={removeGridElement}
+						shortCut={{
+							key: isMac() ? getModifierKey() + 'Del' : 'Del',
+							withoutModifier: true
+						}}
+					>
+						Delete
 					</Button>
 				</div>
-				<div class="flex flex-col gap-1">
+
+				<div class="grid grid-cols-2 gap-1 text-tertiary">
 					<div>
-						<span class="text-secondary text-xs mr-2"> Copy:</span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>C</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+						<span class="text-secondary text-xs">Copy:</span>
+					</div>
+					<div class="flex items-center gap-1">
+						<div class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'C'}</div>
+						<span class="text-xs">&rightarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'V'}</span>
 					</div>
+
 					<div>
-						<span class="text-secondary text-xs mr-2">Move: </span>
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>X</Kbd>,
-						<Kbd>{getModifierKey()}</Kbd>+<Kbd>V</Kbd>
+						<span class="text-secondary text-xs">Move: </span>
 					</div>
+					<div class="flex items-center gap-1">
+						<div class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'X'}</div>
+						<span class="text-xs">&rightarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">{getModifierKey() + 'V'}</span>
+					</div>
+
 					<div>
-						<span class="text-secondary text-xs mr-2">Navigate:</span>
-						<Kbd>&leftarrow;</Kbd>
-						<Kbd>&uparrow;</Kbd><Kbd>&rightarrow;</Kbd>
-						<Kbd>ESC</Kbd>
+						<span class="text-secondary text-xs">Navigate:</span>
+					</div>
+					<div class="flex items-center gap-1">
+						<span class="text-xs border py-1 px-1.5 rounded-md">&leftarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">&uparrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">&rightarrow;</span>
+						<span class="text-xs border py-1 px-1.5 rounded-md">ESC</span>
 					</div>
+
 					<div>
-						<span class="text-secondary text-xs mr-2">Add to selection:</span>
-						<Kbd>&DoubleUpArrow;</Kbd>+<Kbd>click</Kbd>
+						<span class="text-secondary text-xs whitespace-nowrap">Add to selection:</span>
+					</div>
+					<div class="flex items-center gap-1">
+						<span class="text-xs border py-1 px-1.5 rounded-md">
+							<ArrowBigUp size="14" />
+						</span>+<span class="text-xs border py-1 px-1.5 rounded-md">Click</span>
 					</div>
 				</div>
 			</PanelSection>

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

@@ -57,7 +57,7 @@ setContext('DecisionTreeEditor', { selectedNodeId });
 										nodes = removeNode(nodes, selectedNode)
 										renderCount++
 									}}
-									disabled={selectedNode?.next?.length > 1}
+									disabled={selectedNode?.next?.length > 1 || nodes.length == 1}
 								>
 									Delete node
 								</Button>