feat(editor): Add input panel to NDV (#3204)

* refactor tabs out

* refactor execute button

* refactor header

* add more views

* fix error view

* fix workflow rename bug

* rename component

* fix small screen bug

* move items, fix positions

* add hover state

* show selector on empty state

* add empty run state

* fix binary view

* 1 item

* add vjs styles

* show empty row for every item

* refactor tabs

* add branch names

* fix spacing

* fix up spacing

* add run selector

* fix positioning

* clean up

* increase width of selector

* fix up spacing

* fix copy button

* fix branch naming; type issues

* fix docs in custom nodes

* add type

* hide items when run selector is shown

* increase selector size

* add select prepend

* clean up a bit

* Add pagination

* add stale icon

* enable stale data in execution run

* Revert "enable stale data in execution run"

8edb68dbffa0aa0d8189117e1a53381cb2c27608

* move metadata to its own state

* fix smaller size

* add scroll buttons

* update tabs on resize

* update stale data on rename

* remove metadata on delete

* hide x

* change title colors

* binary data classes

* remove duplicate css

* add colors

* delete unused keys

* use event bus

* refactor header out

* support different nodes

* update selector

* add immediate input

* add branch overrides

* split output input run index

* clean up unnessary data

* add missing keys

* update key names

* remove unnessary css/js

* fix outputs panel

* set max width on input selector

* fix selector to show parent nodes

* fix bug when switching between nodes

* add linking and refactor

* add linking

* fix minor issues

* hide linking when cannot link

* fix type

* fix error state

* clean up import

* fix linking edge cases

* hide input panel for triggers

* disable for start node

* format file

* refactor output panel

* add empty input hint

* update too much data view

* update slot, message under branch

* no input data view

* add node not run/no output data views

* add tooltip support on execute prev

* fix spacing in view

* address output views

* fix run node hint view

* fix spinner

* center button

* update message to use node name

* update title of no output data message

* implement loading states

* fix sizes

* fix sizes

* update spinner

* add wire me up image

* update link

* update panels design

* fix unclickable area bug

* revert change

* fix clickable bg

* fix up positioning

* ensure bg is clickable

* fix up borders

* fix height

* move border to wrapper

* set box shadow

* set box shadow

* add drag button

* add dragging for main panel

* set max width of panels

* set min width in js

* keep showing drag while dragging

* fix dragging leaving modal

* update trigger position of main panel

* move main panel position into store

* clear metadata after changing workflow

* center grid correctly

* add drag arrows

* add dragging hover

* fix cursor behavior

* update no output state

* show last run on open

* always set to latest run

* fix padding

* add I wish this node would

* clean up unsued data

* inject run info into run

* refactor out drag button

* fix dragging issue

* fix arrow bug

* increase width of panel

* change run logic

* set label font sizes

* update radiobutton pos

* address header issues

* fix prev spacing bug

* fix input order

* set package lock

* add close modal event

* complete close modal event

* add input change event

* add dragging event

* add event on view change

* add page size event

* rename event

* add event on page change

* add link click event

* add linking event

* rename var

* add run change event

* add button events

* add branch event

* add structure for open event

* add input type

* set session id

* set sessionid/source for expression events

* add params to expression events

* make display modes global

* add display mode to tracking

* add more event tracking

* add has_mapping param

* make main panel position global

* dedupe list

* fix cursor while dragging

* address feedback

* reduce bottom scrim

* remove empty option hint

* add hint tooltip

* add tritary button

* update param names

* update parameter buttons

* center empty states

* move feature request message

* increase max width for inputs selector

* fix error dispaly padding

* remove immediate

* refactor search logic to return object

* fix console errors

* fix console errors

* add node distance

* refactor how input nodes listed

* remove console log

* set package lock

* refactor recursive logic

* handle overrides

* handle default case without inputs

* fix bug width link

* fix tabs arrow bug

* handle binary data case

* update node execution

* fix merge logic

* remove console log

* delete func

* update package lock

* add hover area

* switch first input node

* keep recursive order

* make breadth first traversal

* fix overflow bug, add pluralization

* update docs url

* update drop shadow

* set background color for button

* update input

* fix truncation

* update index of input dropdown

* fix binary background

* update telemetry

* fix binary data switching

* check all parent connections for executed node

* check current state for executing node

* fix executing states

* update loading states

* use pluralization for items

* rename modal

* update pluralization

* update package lock

* update empty messagE

* format file

* refactor out dragging logic

* refactor out dragging

* add back panel position

* add telemetry params

* add survey url as const

* remove extra space, add dot

* rename tabs, update telemetery, fix telemetry bug

* update execute prev button

* rename workflow func

* rename workflow func

* delete unnessary component

* fix build issue

* add tests for workflow search

* format + add tests

* remove todo comment

* update iconnection type to match workflows

* Revert "update iconnection type to match workflows"

3772487d985f226acab7144c7672b5696deabb55

* update func comment

* fix formatting issues

* add tertiary story

* add spinner story

* remove todo comment

* remove eslint check

* update empty messagE

packages/workflow/src/Interfaces.ts

@@ -1457,3 +1457,9 @@ export interface ITelemetrySettings {
 	enabled: boolean;
 	config?: ITelemetryClientConfig;
 }
+
+export interface IConnectedNode {
+	name: string;
+	indicies: number[];
+	depth: number;
+}

packages/workflow/src/Workflow.ts

@@ -46,7 +46,11 @@ import {
 	WorkflowExecuteMode,
 } from '.';
 
-import { IConnection, IDataObject, IObservableObject } from './Interfaces';
+import { IConnection, IDataObject, IConnectedNode, IObservableObject } from './Interfaces';
+
+function dedupe<T>(arr: T[]): T[] {
+	return [...new Set(arr)];
+}
 
 export class Workflow {
 	id: string | undefined;
@@ -713,6 +717,86 @@ export class Workflow {
 		return returnNodes;
 	}
 
+	/**
+	 * Returns all the nodes before the given one
+	 *
+	 * @param {string} nodeName
+	 * @param {*} [maxDepth=-1]
+	 * @returns {string[]}
+	 * @memberof Workflow
+	 */
+	getParentNodesByDepth(nodeName: string, maxDepth = -1): IConnectedNode[] {
+		return this.searchNodesBFS(this.connectionsByDestinationNode, nodeName, maxDepth);
+	}
+
+	/**
+	 * Gets all the nodes which are connected nodes starting from
+	 * the given one
+	 * Uses BFS traversal
+	 *
+	 * @param {IConnections} connections
+	 * @param {string} sourceNode
+	 * @param {*} [maxDepth=-1]
+	 * @returns {IConnectedNode[]}
+	 * @memberof Workflow
+	 */
+	searchNodesBFS(connections: IConnections, sourceNode: string, maxDepth = -1): IConnectedNode[] {
+		const returnConns: IConnectedNode[] = [];
+
+		const type = 'main';
+		let queue: IConnectedNode[] = [];
+		queue.push({
+			name: sourceNode,
+			depth: 0,
+			indicies: [],
+		});
+
+		const visited: { [key: string]: IConnectedNode } = {};
+
+		let depth = 0;
+		while (queue.length > 0) {
+			if (maxDepth !== -1 && depth > maxDepth) {
+				break;
+			}
+			depth++;
+
+			const toAdd = [...queue];
+			queue = [];
+
+			// eslint-disable-next-line @typescript-eslint/no-loop-func
+			toAdd.forEach((curr) => {
+				if (visited[curr.name]) {
+					visited[curr.name].indicies = dedupe(visited[curr.name].indicies.concat(curr.indicies));
+					return;
+				}
+
+				visited[curr.name] = curr;
+				if (curr.name !== sourceNode) {
+					returnConns.push(curr);
+				}
+
+				if (
+					!connections.hasOwnProperty(curr.name) ||
+					!connections[curr.name].hasOwnProperty(type)
+				) {
+					return;
+				}
+
+				connections[curr.name][type].forEach((connectionsByIndex) => {
+					connectionsByIndex.forEach((connection) => {
+						queue.push({
+							name: connection.node,
+							indicies: [connection.index],
+							depth,
+						});
+					});
+				});
+			});
+		}
+
+		return returnConns;
+	}
+
 	/**
 	 * Returns via which output of the parent-node the node
 	 * is connected to.

packages/workflow/test/Helpers.ts

@@ -613,6 +613,39 @@ class NodeTypesClass implements INodeTypes {
 				},
 			},
 		},
+		'test.switch': {
+			sourcePath: '',
+			type: {
+				description: {
+					displayName: 'Set',
+					name: 'set',
+					group: ['input'],
+					version: 1,
+					description: 'Switches',
+					defaults: {
+						name: 'Switch',
+						color: '#0000FF',
+					},
+					inputs: ['main'],
+					outputs: ['main', 'main', 'main', 'main'],
+					outputNames: ['0', '1', '2', '3'],
+					properties: [
+						{
+							displayName: 'Value1',
+							name: 'value1',
+							type: 'string',
+							default: 'default-value1',
+						},
+						{
+							displayName: 'Value2',
+							name: 'value2',
+							type: 'string',
+							default: 'default-value2',
+						},
+					],
+				},
+			},
+		},
 	};
 
 	async init(nodeTypes: INodeTypeData): Promise<void> {}

packages/workflow/test/Workflow.test.ts

@@ -1284,4 +1284,398 @@ describe('Workflow', () => {
 			});
 		});
 	});
+
+	describe('getParentNodesByDepth', () => {
+		const nodeTypes = Helpers.NodeTypes();
+		const SIMPLE_WORKFLOW = new Workflow({
+			nodeTypes,
+			nodes: [
+				{
+					parameters: {},
+					name: 'Start',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [240, 300],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [460, 300],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set1',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [680, 300],
+				},
+			],
+			connections: {
+				Start: {
+					main: [
+						[
+							{
+								node: 'Set',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Set: {
+					main: [
+						[
+							{
+								node: 'Set1',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+			},
+			active: false,
+		});
+
+		const WORKFLOW_WITH_SWITCH = new Workflow({
+			active: false,
+			nodeTypes,
+			nodes: [
+				{
+					parameters: {},
+					name: 'Switch',
+					type: 'test.switch',
+					typeVersion: 1,
+					position: [460, 300],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [740, 300],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set1',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [780, 100],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set2',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [1040, 260],
+				},
+			],
+			connections: {
+				Switch: {
+					main: [
+						[
+							{
+								node: 'Set1',
+								type: 'main',
+								index: 0,
+							},
+						],
+						[
+							{
+								node: 'Set',
+								type: 'main',
+								index: 0,
+							},
+						],
+						[
+							{
+								node: 'Set',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Set: {
+					main: [
+						[
+							{
+								node: 'Set2',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Set1: {
+					main: [
+						[
+							{
+								node: 'Set2',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+			},
+		});
+
+		const WORKFLOW_WITH_LOOPS = new Workflow({
+			nodeTypes,
+			active: false,
+			nodes: [
+				{
+					parameters: {},
+					name: 'Switch',
+					type: 'test.switch',
+					typeVersion: 1,
+					position: [920, 340],
+				},
+				{
+					parameters: {},
+					name: 'Start',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [240, 300],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set1',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [700, 340],
+				},
+				{
+					parameters: {
+						options: {},
+					},
+					name: 'Set',
+					type: 'test.set',
+					typeVersion: 1,
+					position: [1220, 300],
+				},
+				{
+					parameters: {},
+					name: 'Switch',
+					type: 'test.switch',
+					typeVersion: 1,
+					position: [920, 340],
+				},
+			],
+			connections: {
+				Switch: {
+					main: [
+						[
+							{
+								node: 'Set',
+								type: 'main',
+								index: 0,
+							},
+						],
+						[], // todo why is null not accepted
+						[
+							{
+								node: 'Switch',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Start: {
+					main: [
+						[
+							{
+								node: 'Set1',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Set1: {
+					main: [
+						[
+							{
+								node: 'Set1',
+								type: 'main',
+								index: 0,
+							},
+							{
+								node: 'Switch',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+				Set: {
+					main: [
+						[
+							{
+								node: 'Set1',
+								type: 'main',
+								index: 0,
+							},
+						],
+					],
+				},
+			},
+		});
+
+		test('Should return parent nodes of nodes', () => {
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Start')).toEqual([]);
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Start',
+				},
+			]);
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set',
+				},
+				{
+					depth: 2,
+					indicies: [0],
+					name: 'Start',
+				},
+			]);
+		});
+
+		test('Should return parent up to depth', () => {
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', 0)).toEqual([]);
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', 1)).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set',
+				},
+			]);
+		});
+
+		test('Should return all parents with depth of -1', () => {
+			expect(SIMPLE_WORKFLOW.getParentNodesByDepth('Set1', -1)).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set',
+				},
+				{
+					depth: 2,
+					indicies: [0],
+					name: 'Start',
+				},
+			]);
+		});
+
+		test('Should return parents of nodes with all connected output indicies', () => {
+			expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Switch')).toEqual([]);
+			expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set1')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Switch',
+				},
+			]);
+			expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set')).toEqual([
+				{
+					depth: 1,
+					indicies: [1, 2],
+					name: 'Switch',
+				},
+			]);
+
+			expect(WORKFLOW_WITH_SWITCH.getParentNodesByDepth('Set2')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set',
+				},
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set1',
+				},
+				{
+					depth: 2,
+					indicies: [1, 2, 0],
+					name: 'Switch',
+				},
+			]);
+		});
+
+		test('Should handle loops within workflows', () => {
+			expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Start')).toEqual([]);
+			expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Set')).toEqual([
+				{
+					depth: 1,
+					indicies: [0, 2],
+					name: 'Switch',
+				},
+				{
+					depth: 2,
+					indicies: [0],
+					name: 'Set1',
+				},
+				{
+					depth: 3,
+					indicies: [0],
+					name: 'Start',
+				},
+			]);
+			expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Switch')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set1',
+				},
+				{
+					depth: 2,
+					indicies: [0],
+					name: 'Start',
+				},
+				{
+					depth: 2,
+					indicies: [0],
+					name: 'Set',
+				},
+			]);
+			expect(WORKFLOW_WITH_LOOPS.getParentNodesByDepth('Set1')).toEqual([
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Start',
+				},
+				{
+					depth: 1,
+					indicies: [0],
+					name: 'Set',
+				},
+				{
+					depth: 2,
+					indicies: [0, 2],
+					name: 'Switch',
+				},
+			]);
+		});
+	});
 });