windmill-components 1.46.3 → 1.52.0

package/components/flows/pickers/FlowScriptPicker.svelte.d.ts

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
-import type { IconDefinition } from '@fortawesome/free-brands-svg-icons';
+import type { SupportedLanguage } from '../../../common';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 declare const __propDef: {
     props: {
         disabled?: boolean | undefined;
-        icon: IconDefinition;
         label: string;
-        iconColor: string;
+        lang?: SupportedLanguage | 'pgsql' | undefined;
+        icon?: IconDefinition | undefined;
+        iconColor?: string | undefined;
     };
     events: {
         click: CustomEvent<any>;
@@ -14,9 +16,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type FlowScriptPickerProps = typeof __propDef.props;
-export declare type FlowScriptPickerEvents = typeof __propDef.events;
-export declare type FlowScriptPickerSlots = typeof __propDef.slots;
+export type FlowScriptPickerProps = typeof __propDef.props;
+export type FlowScriptPickerEvents = typeof __propDef.events;
+export type FlowScriptPickerSlots = typeof __propDef.slots;
 export default class FlowScriptPicker extends SvelteComponentTyped<FlowScriptPickerProps, FlowScriptPickerEvents, FlowScriptPickerSlots> {
 }
 export {};

package/components/flows/pickers/PickHubScript.svelte

@@ -1,33 +1,78 @@
-<script>import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
-import FlowScriptPicker from './FlowScriptPicker.svelte';
-import ItemPicker from '../../ItemPicker.svelte';
-import { hubScripts } from '../../../stores';
-import { createEventDispatcher } from 'svelte';
-import { Script } from '../../../gen';
-export let kind;
-export let customText = undefined;
-let items;
-$: items = $hubScripts?.filter((x) => x.kind == kind) ?? [];
-let itemPicker;
+<script>import { hubScripts } from '../../../stores';
+import { createEventDispatcher, onMount } from 'svelte';
+import IconedResourceType from '../../IconedResourceType.svelte';
+import { Badge, Skeleton } from '../../common';
+import SearchItems from '../../SearchItems.svelte';
+import { loadHubScripts } from '../../../utils';
+export let kind = 'script';
+export let filter = '';
+$: items = ($hubScripts ?? []).filter((i) => i.kind === kind);
+let filteredItems = [];
+let appFilter = undefined;
+$: prefilteredItems = appFilter ? (items ?? []).filter((i) => i.app == appFilter) : items ?? [];
+$: apps = Array.from(new Set(filteredItems?.map((x) => x.app) ?? [])).sort();
 const dispatch = createEventDispatcher();
+onMount(() => {
+    if (!$hubScripts) {
+        loadHubScripts();
+    }
+});
 </script>
 
-<ItemPicker
-	bind:this={itemPicker}
-	pickCallback={(path, summary) => {
-		dispatch('pick', { path, summary, kind })
-	}}
-	itemName={'Script'}
-	extraField="summary"
-	loadItems={async () => {
-		return items
-	}}
-	noItemMessage="Hub not reachable. If your environment is air gapped, contact sales@windmill.dev to setup a local mirror."
-/>
+<SearchItems {filter} items={prefilteredItems} bind:filteredItems f={(x) => x.summary} />
 
-<FlowScriptPicker
-	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from the Hub`}
-	icon={faUserGroup}
-	iconColor="text-blue-500"
-	on:click={() => itemPicker.openDrawer()}
-/>
+<div class="flex flex-col min-h-0">
+	<div class="w-12/12 pb-2 flex flex-row my-1 gap-1">
+		<input type="text" placeholder="Search Hub Scripts" bind:value={filter} class="text-2xl grow" />
+	</div>
+
+	<div class="gap-2 w-full flex flex-wrap pb-2">
+		{#each apps as app}
+			<Badge
+				class="cursor-pointer hover:bg-gray-200"
+				on:click={() => {
+					appFilter = appFilter == app ? undefined : app
+				}}
+				capitalize
+				color={app === appFilter ? 'blue' : 'gray'}
+			>
+				{app}
+				{#if app === appFilter}&cross;{/if}
+			</Badge>
+		{/each}
+	</div>
+	<div class="overflow-auto">
+		<ul class="divide-y divide-gray-200">
+			{#if $hubScripts}
+				{#if filter.length > 0 && filteredItems.length == 0}
+					<p>No items found</p>
+				{/if}
+				{#each filteredItems as obj}
+					<li class="flex flex-row w-full">
+						<button
+							class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all"
+							on:click={() => {
+								dispatch('pick', obj)
+							}}
+						>
+							<div class="mr-2 text-sm text-left truncate w-32 shrink-0">
+								<IconedResourceType after={true} silent={false} name={obj['app']} />
+							</div>
+							<div class="mr-2 text-left">
+								{#if obj.marked}
+									{@html obj.marked ?? ''}
+								{:else}
+									{obj.summary ?? ''}
+								{/if}
+							</div>
+						</button>
+					</li>
+				{/each}
+			{:else}
+				{#each Array(10).fill(0) as sk}
+					<Skeleton layout={[[4], 0.5]} />
+				{/each}
+			{/if}
+		</ul>
+	</div>
+</div>

package/components/flows/pickers/PickHubScript.svelte.d.ts

@@ -1,9 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
-import { Script } from '../../../gen';
 declare const __propDef: {
     props: {
-        kind: Script.kind;
-        customText?: string | undefined;
+        kind?: "script" | "failure" | "trigger" | "approval" | undefined;
+        filter?: string | undefined;
     };
     events: {
         pick: CustomEvent<any>;
@@ -12,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PickHubScriptProps = typeof __propDef.props;
-export declare type PickHubScriptEvents = typeof __propDef.events;
-export declare type PickHubScriptSlots = typeof __propDef.slots;
+export type PickHubScriptProps = typeof __propDef.props;
+export type PickHubScriptEvents = typeof __propDef.events;
+export type PickHubScriptSlots = typeof __propDef.slots;
 export default class PickHubScript extends SvelteComponentTyped<PickHubScriptProps, PickHubScriptEvents, PickHubScriptSlots> {
 }
 export {};

package/components/flows/pickers/PickScript.svelte

@@ -1,11 +1,10 @@
 <script>import ItemPicker from '../../ItemPicker.svelte';
-import { faUserGroup } from '@fortawesome/free-solid-svg-icons';
-import { Script, ScriptService } from '../../../gen';
+import { ScriptService } from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { createEventDispatcher } from 'svelte';
-import FlowScriptPicker from './FlowScriptPicker.svelte';
+import Button from '../../common/button/Button.svelte';
+import { Code } from 'svelte-lucide';
 export let kind;
-export let customText = undefined;
 let itemPicker;
 const dispatch = createEventDispatcher();
 async function loadItems() {
@@ -23,9 +22,17 @@ async function loadItems() {
 	{loadItems}
 />
 
-<FlowScriptPicker
-	label={customText ?? `${kind == Script.kind.SCRIPT ? 'Script' : `${kind} script`} from workspace`}
-	icon={faUserGroup}
-	iconColor="text-blue-500"
+<Button
 	on:click={() => itemPicker.openDrawer()}
-/>
+	btnClasses="w-24 truncate"
+	size="sm"
+	spacingSize="md"
+	variant="border"
+	color="light"
+>
+	<div class="flex justify-center flex-col items-center gap-2">
+		<Code size="18px" />
+
+		<span class="text-xs">Script</span>
+	</div>
+</Button>

package/components/flows/pickers/PickScript.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         kind: string;
-        customText?: string | undefined;
     };
     events: {
         pick: CustomEvent<any>;
@@ -11,9 +10,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type PickScriptProps = typeof __propDef.props;
-export declare type PickScriptEvents = typeof __propDef.events;
-export declare type PickScriptSlots = typeof __propDef.slots;
+export type PickScriptProps = typeof __propDef.props;
+export type PickScriptEvents = typeof __propDef.events;
+export type PickScriptSlots = typeof __propDef.slots;
 export default class PickScript extends SvelteComponentTyped<PickScriptProps, PickScriptEvents, PickScriptSlots> {
 }
 export {};

package/components/flows/pickers/WorkspaceScriptPicker.svelte

@@ -0,0 +1,53 @@
+<script>import { workspaceStore } from '../../../stores';
+import { createEventDispatcher } from 'svelte';
+import Fuse from 'fuse.js';
+import { ScriptService } from '../../../gen';
+export let kind = 'script';
+let items = [];
+let filteredItems = [];
+export let filter = '';
+const fuseOptions = {
+    includeScore: false,
+    keys: ['path', 'summay']
+};
+const fuse = new Fuse(items, fuseOptions);
+$: $workspaceStore && kind && loadItems();
+$: filteredItems =
+    filter.length > 0 && items ? fuse.search(filter).map((value) => value.item) : items;
+async function loadItems() {
+    items = await ScriptService.listScripts({ workspace: $workspaceStore, kind });
+    fuse.setCollection(items);
+}
+const dispatch = createEventDispatcher();
+</script>
+
+<div class="flex flex-col min-h-0">
+	<div class="w-12/12 pb-4 mt-1">
+		<input type="text" placeholder="Search script" bind:value={filter} class="text-2xl grow" />
+	</div>
+
+	{#if filteredItems}
+		<ul class="divide-y divide-gray-200 overflow-auto">
+			{#each filteredItems as obj}
+				<li class="flex flex-row w-full">
+					<button
+						class="py-4 px-1 gap-1 flex flex-row grow hover:bg-blue-50 bg-white transition-all text-black"
+						on:click={() => {
+							dispatch('pick', obj)
+						}}
+					>
+						<div class="flex flex-col">
+							<div class="text-sm font-semibold flex flex-col">
+								<span class="mr-2 text-left">{obj['summary'] ?? ''}</span>
+								<span class="font-normal text-xs text-left italic overflow-hidden"
+									>{obj['path'] ?? ''}</span
+								>
+							</div>
+							<div class="text-xs font-light italic text-left">{obj['description'] ?? ''}</div>
+						</div>
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>

package/components/flows/pickers/WorkspaceScriptPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        kind?: "script" | "failure" | "trigger" | "approval" | undefined;
+        filter?: string | undefined;
+    };
+    events: {
+        pick: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type WorkspaceScriptPickerProps = typeof __propDef.props;
+export type WorkspaceScriptPickerEvents = typeof __propDef.events;
+export type WorkspaceScriptPickerSlots = typeof __propDef.slots;
+export default class WorkspaceScriptPicker extends SvelteComponentTyped<WorkspaceScriptPickerProps, WorkspaceScriptPickerEvents, WorkspaceScriptPickerSlots> {
+}
+export {};

package/components/flows/pickers/model.d.ts

@@ -1,5 +1,7 @@
 export interface HubItem {
-    summary: String;
-    path: String;
-    version?: String;
+    app: string;
+    summary: string;
+    path: string;
+    version?: string;
+    ask_id: number;
 }

package/components/flows/previousResults.d.ts

@@ -1,11 +1,11 @@
 import type { Flow, FlowModule } from '../../gen';
 import type { FlowState } from './flowState';
-export declare type PickableProperties = {
+export type PickableProperties = {
     flow_input: Object;
     priorIds: Record<string, any>;
     previousId: string | undefined;
 };
-declare type StepPropPicker = {
+type StepPropPicker = {
     pickableProperties: PickableProperties;
     extraLib: string;
 };

package/components/flows/previousResults.js

@@ -92,27 +92,27 @@ export function buildExtraLib(flowInput, results) {
 * get variable (including secret) at path
 * @param {string} path - path of the variable (e.g: g/all/pretty_secret)
 */
-export function variable(path: string): string;
+declare function variable(path: string): string;
 
 /**
 * get resource at path
 * @param {string} path - path of the resource (e.g: g/all/my_resource)
 */
-export function resource(path: string): any;
+declare function resource(path: string): any;
 
 /**
 * flow input as an object
 */
-export const flow_input = ${JSON.stringify(flowInput)};
+declare const flow_input = ${JSON.stringify(flowInput)};
 
 /**
 * static params of this same step
 */
-export const params: any;
+declare const params: any;
 
 /**
  * result by id
  */
-export const results = ${JSON.stringify(results)};
+declare const results = ${JSON.stringify(results)};
 `;
 }

package/components/flows/propPicker/PropPickerWrapper.svelte

@@ -29,10 +29,10 @@ setContext('PropPickerWrapper', {
 </script>
 
 <Splitpanes>
-	<Pane minSize={20} size={66} class="relative p-4 !transition-none">
+	<Pane minSize={20} size={60} class="relative p-4 !transition-none">
 		<slot />
 	</Pane>
-	<Pane minSize={20} size={34} class="px-2 py-2 h-full !transition-none">
+	<Pane minSize={20} size={40} class="py-2 relative !transition-none">
 		{#if result}
 			<PropPickerResult {result} />
 		{:else if pickableProperties}

package/components/flows/propPicker/PropPickerWrapper.svelte.d.ts

@@ -1,12 +1,12 @@
 import { SvelteComponentTyped } from "svelte";
-declare type InsertionMode = 'append' | 'connect' | 'insert';
-declare type SelectCallback = (path: string) => boolean;
-declare type PropPickerConfig = {
+type InsertionMode = 'append' | 'connect' | 'insert';
+type SelectCallback = (path: string) => boolean;
+type PropPickerConfig = {
     insertionMode: InsertionMode;
     propName: string;
     onSelect: SelectCallback;
 };
-export declare type PropPickerWrapperContext = {
+export type PropPickerWrapperContext = {
     propPickerConfig: Writable<PropPickerConfig | undefined>;
     focusProp: (propName: string, insertionMode: InsertionMode, onSelect: SelectCallback) => void;
     clearFocus: () => void;
@@ -30,9 +30,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type PropPickerWrapperProps = typeof __propDef.props;
-export declare type PropPickerWrapperEvents = typeof __propDef.events;
-export declare type PropPickerWrapperSlots = typeof __propDef.slots;
+export type PropPickerWrapperProps = typeof __propDef.props;
+export type PropPickerWrapperEvents = typeof __propDef.events;
+export type PropPickerWrapperSlots = typeof __propDef.slots;
 export default class PropPickerWrapper extends SvelteComponentTyped<PropPickerWrapperProps, PropPickerWrapperEvents, PropPickerWrapperSlots> {
 }
 export {};

package/components/flows/scheduleUtils.d.ts

@@ -1,4 +1,4 @@
-export declare type Schedule = {
+export type Schedule = {
     args: Record<string, any>;
     cron: string;
     enabled: boolean;

package/components/flows/scheduleUtils.js

@@ -6,7 +6,7 @@ export async function loadFlowSchedule(path, workspace = '') {
         path
     });
     if (!existsSchedule) {
-        throw new Error(`Flow at path: ${path} doesn't exit`);
+        throw new Error(`Flow at path: ${path} doesn't exist`);
     }
     const schedule = await ScheduleService.getSchedule({
         workspace,

package/components/flows/types.d.ts

@@ -1,6 +1,6 @@
 import type { Writable } from 'svelte/store';
 import type { Schedule } from './scheduleUtils';
-export declare type FlowEditorContext = {
+export type FlowEditorContext = {
     selectedId: Writable<string>;
     select: (id: string) => void;
     schedule: Writable<Schedule>;

package/components/flows/utils.d.ts

@@ -9,7 +9,7 @@ export declare function loadSchemaFromModule(module: FlowModule): Promise<{
     schema: Schema;
 }>;
 export declare function isCodeInjection(expr: string | undefined): boolean;
-export declare function getDefaultExpr(importPath?: string | undefined, key?: string, previousExpr?: string): string;
+export declare function getDefaultExpr(key: string | undefined, previousModuleId: string | undefined, previousExpr?: string): string;
 export declare function jobsToResults(jobs: Job[]): any;
 export declare function runFlowPreview(args: Record<string, any>, flow: Flow): Promise<string>;
 export declare function codeToStaticTemplate(code?: string): string | undefined;

package/components/flows/utils.js

@@ -93,11 +93,8 @@ export function isCodeInjection(expr) {
     }
     return dynamicTemplateRegex.test(expr);
 }
-export function getDefaultExpr(importPath = undefined, key = 'myfield', previousExpr) {
-    const expr = previousExpr ?? `results.${key}`;
-    return `import { results, flow_input, variable, resource, params } from 'windmill${importPath ? `@${importPath}` : ''}'
-
-${expr}`;
+export function getDefaultExpr(key = 'myfield', previousModuleId, previousExpr) {
+    return previousExpr ?? (previousModuleId ? `results.${previousModuleId}.${key}` : `flow_input.${key}`);
 }
 export function jobsToResults(jobs) {
     return jobs.map((job) => {
@@ -121,12 +118,10 @@ export async function runFlowPreview(args, flow) {
     });
 }
 export function codeToStaticTemplate(code) {
-    if (!code)
+    if (!code || typeof code != 'string')
         return undefined;
     const lines = code
-        .split('\n')
-        .slice(1)
-        .filter((x) => x != '');
+        .split('\n');
     if (lines.length == 1) {
         const line = lines[0].trim();
         if (line[0] == '`' && line.charAt(line.length - 1) == '`') {

package/components/graph/FlowGraph.svelte

@@ -1,12 +1,16 @@
 <script>import Svelvet, {} from 'svelvet';
-import { sugiyama, dagStratify, decrossOpt, coordGreedy, coordCenter } from 'd3-dag';
+import { sugiyama, dagStratify, decrossOpt, coordCenter } from 'd3-dag';
+import { FlowStatusModule, RawScript } from '../../gen';
 import { NODE, createIdGenerator, isNode, isLoop, isBranch } from '.';
-import { truncate, truncateRev } from '../../utils';
+import { defaultIfEmptyString, truncateRev } from '../../utils';
 import { createEventDispatcher } from 'svelte';
 import { numberToChars } from '../flows/utils';
 export let modules = [];
 export let failureModule = undefined;
 export let minHeight = 0;
+export let notSelectable = false;
+export let flowModuleStates = undefined;
+let selectedNode = undefined;
 const idGenerator = createIdGenerator();
 let nestedNodes;
 let nodes = [];
@@ -14,8 +18,8 @@ let edges = [];
 let width, height;
 let dispatch = createEventDispatcher();
 $: {
-    width && height && minHeight;
-    if (modules?.length) {
+    width && height && minHeight && selectedNode && flowModuleStates;
+    if (modules) {
         createGraph(modules, failureModule);
     }
     else {
@@ -53,20 +57,22 @@ function getConvertedFlowModule(module, parent = undefined, edgeLabel = undefine
         return flowModuleToNode(parentIds, module.id, module.summary || module.value.path, isHub ? 'hub' : 'workspace', module, undefined, edgeLabel);
     }
     else if (type === 'forloopflow') {
-        const expr = module.value.iterator['expr'];
-        return flowModuleToLoop(module.value.modules, `For loop: ${truncate(expr, 10)}`, parent);
+        return flowModuleToLoop(module.value.modules, module, parent);
     }
     else if (type === 'branchone') {
         const branches = [module.value.default, ...module.value.branches.map((b) => b.modules)];
-        return flowModuleToBranch(branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent);
+        return flowModuleToBranch(module, branches, ['Default', ...module.value.branches.map((x) => `If ${truncateRev(x.expr, 20)}`)], parent);
     }
     else if (type === 'branchall') {
         const branches = module.value.branches.map((b) => b.modules);
-        return flowModuleToBranch(branches, [], parent);
+        return flowModuleToBranch(module, branches, [], parent);
     }
-    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity script', 'inline', module, undefined, edgeLabel);
+    return flowModuleToNode(parentIds, module.id, module.summary || 'Identity step', 'inline', module, undefined, edgeLabel);
 }
 function getParentIds(items = undefined) {
+    if (typeof items == 'string') {
+        return [items];
+    }
     const item = items?.at(-1) || nestedNodes.at(-1);
     if (!item)
         return [];
@@ -81,6 +87,18 @@ function getParentIds(items = undefined) {
     }
     return [];
 }
+function getStateColor(state) {
+    switch (state) {
+        case FlowStatusModule.type.SUCCESS:
+            return 'rgb(34 197 94)';
+        case FlowStatusModule.type.FAILURE:
+            return 'rgb(248 113 113)';
+        case FlowStatusModule.type.IN_PROGRESS:
+            return 'rgb(253 224 71)';
+        default:
+            return '#fff';
+    }
+}
 function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeLabel) {
     const langImg = {
         deno: '/icons/ts-lang.svg',
@@ -117,39 +135,56 @@ function flowModuleToNode(parentIds, id, title, host, onClickDetail, lang, edgeL
         host,
         width: NODE.width,
         height: NODE.height,
-        bgColor: 'white',
+        borderColor: selectedNode == onClickDetail.id ? 'black' : '#999',
+        bgColor: selectedNode == onClickDetail.id
+            ? '#f5f5f5'
+            : getStateColor(flowModuleStates?.[onClickDetail.id]),
         parentIds,
         clickCallback: (node) => {
+            if (!notSelectable) {
+                selectedNode = onClickDetail.id;
+            }
             dispatch('click', onClickDetail);
         },
         edgeLabel
     };
 }
-function flowModuleToLoop(modules, startLabel, parent = undefined) {
+function flowModuleToLoop(modules, module, parent = undefined) {
+    const value = module.value;
+    const expr = value.iterator.type == 'static' ? value.iterator.value : value.iterator.expr;
     const loop = {
         type: 'loop',
-        items: [createVirtualNode(getParentIds(parent), startLabel)]
+        items: [
+            flowModuleToNode(getParentIds(parent), module.id, module.summary || `For Loop: ${defaultIfEmptyString(expr ?? '', 'TBD')}`, 'inline', module, undefined)
+        ]
     };
     modules.forEach((module) => {
         const item = getConvertedFlowModule(module, loop.items);
         item && loop.items.push(item);
     });
-    loop.items.push(createVirtualNode(getParentIds(loop.items), "Collect iterations' results"));
+    loop.items.push(createVirtualNode(getParentIds(loop.items), `Collect iterations' results of For Loop ${module.id}`));
     return loop;
 }
-function flowModuleToBranch(branches, edgesLabel, parent = undefined) {
+function flowModuleToBranch(module, branches, edgesLabel, parent = undefined) {
     const branch = {
         type: 'branch',
+        node: flowModuleToNode(getParentIds(parent), module.id, module.summary || module.value.type == 'branchall'
+            ? 'Run all branches'
+            : 'Run one branch given predicate', 'inline', module, undefined),
         items: []
     };
+    const branchParent = [branch.node.id.toString()];
+    if (branches.length == 0) {
+        branch.items.push([createVirtualNode(branchParent, 'No branches')]);
+    }
     branches.forEach((modules, i) => {
         const items = [];
         if (!modules.length) {
-            items.push(createVirtualNode(getParentIds(parent), 'Empty branch', edgesLabel[i]));
+            items.push(createVirtualNode(branchParent, 'Empty branch', edgesLabel[i]));
         }
         else {
             modules.forEach((module) => {
-                const item = getConvertedFlowModule(module, items.length ? items : parent, edgesLabel[i]);
+                const item = getConvertedFlowModule(module, items.length ? items : branch.node.id.toString(), edgesLabel[i]);
                 item && items.push(item);
             });
         }
@@ -167,6 +202,7 @@ function flattenNestedNodes(nestedNodes, nodes = []) {
             flattenNestedNodes(node.items, array);
         }
         else if (isBranch(node)) {
+            array.push(node.node);
             node.items.forEach((item) => {
                 flattenNestedNodes(item, array);
             });
@@ -175,8 +211,6 @@ function flattenNestedNodes(nestedNodes, nodes = []) {
     return array;
 }
 function layoutNodes(nodes) {
-    if (!nodes.length)
-        return { nodes: [], height: 0 };
     const stratify = dagStratify().id(({ id }) => '' + id);
     const dag = stratify(nodes);
     const layout = sugiyama()
@@ -228,6 +262,7 @@ function createVirtualNode(parentIds, label, edgesLabel) {
         },
         width: NODE.width,
         height: NODE.height,
+        borderColor: '#999',
         bgColor: '#d4e4ff',
         parentIds
     };
@@ -246,8 +281,12 @@ function createErrorHandler(parentIds, module) {
         width: NODE.width,
         height: NODE.height,
         bgColor: 'rgb(248 113 113)',
+        borderColor: '#999',
         parentIds,
         clickCallback: (node) => {
+            if (!notSelectable) {
+                selectedNode = module.id;
+            }
             dispatch('click', module);
         }
     };