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/design-system/src/components/N8nButton/Button.stories.js

@@ -13,7 +13,7 @@ export default {
 		},
 		type: {
 			control: 'select',
-			options: ['primary', 'outline', 'light', 'text'],
+			options: ['primary', 'outline', 'light', 'text', 'tertiary'],
 		},
 		size: {
 			control: {
@@ -96,6 +96,12 @@ Outline.args = {
 	label: 'Button',
 };
 
+export const Tertiary = ManyTemplate.bind({});
+Tertiary.args = {
+	type: 'tertiary',
+	label: 'Button',
+};
+
 export const Light = ManyTemplate.bind({});
 Light.args = {
 	type: 'light',

packages/design-system/src/components/N8nButton/Button.vue

@@ -47,7 +47,7 @@ export default {
 			type: String,
 			default: 'primary',
 			validator: (value: string): boolean =>
-				['primary', 'outline', 'light', 'text'].includes(value),
+				['primary', 'outline', 'light', 'text', 'tertiary'].includes(value),
 		},
 		theme: {
 			type: String,
@@ -107,8 +107,8 @@ export default {
 		};
 	},
 	getClass(props: { type: string; theme?: string, transparentBackground: boolean }, $style: any): string {
-		const theme = props.type === 'text'
+		const theme = props.type === 'text' || props.type === 'tertiary'
-			? 'text'
+			? props.type
 			: `${props.type}-${props.theme || 'primary'}`;
 
 		if (props.transparentBackground) {
@@ -293,6 +293,20 @@ $color-danger-shade: lightness(
 	--button-active-border-color: transparent;
 }
 
+.tertiary {
+	composes: button;
+	font-weight: var(--font-weight-regular) !important;
+	--button-color: var(--color-text-dark);
+	--button-border-color: var(--color-foreground-base);
+	--button-background-color: var(--color-background-base);
+
+	--button-active-background-color: var(--color-primary-tint-2);
+	--button-active-color: var(--color-primary);
+	--button-active-border-color: var(--color-primary);
+
+	--button-disabled-border-color: var(--color-foreground-xdark);
+}
+
 .transparent {
 	--button-background-color: transparent;
 	--button-active-background-color: transparent;

packages/design-system/src/components/N8nInfoTip/InfoTip.vue

@@ -65,7 +65,7 @@ export default {
 
 .tooltip {
 	composes: base;
-	display: inline-block;
+	display: inline-flex;
 }
 
 .info-light {

packages/design-system/src/components/N8nRadioButtons/RadioButton.vue

@@ -47,7 +47,7 @@ export default {
 
 .button {
 	border-radius: 0;
-	padding: 0 var(--spacing-s);
+	padding: 0 var(--spacing-xs);
 	display: flex;
 	align-items: center;
 	height: 26px;

packages/design-system/src/components/N8nSelect/Select.vue

@@ -82,6 +82,9 @@ export default {
 		limitPopperWidth: {
 			type: Boolean,
 		},
+		noDataText: {
+			type: String,
+		},
 	},
 	methods: {
 		getSize(size: string): string | undefined {

packages/design-system/src/components/N8nSpinner/Spinner.stories.js

@@ -10,6 +10,12 @@ export default {
 				options: ['small', 'medium', 'large'],
 			},
 		},
+		type: {
+			control: {
+				type: 'select',
+				options: ['dots', 'ring'],
+			},
+		},
 	},
 };
 

packages/design-system/src/components/N8nSpinner/Spinner.vue

@@ -1,10 +1,14 @@
 <template functional>
-	<component
+	<span>
-		:is="$options.components.N8nIcon"
+		<div v-if="props.type === 'ring'" class="lds-ring"><div></div><div></div><div></div><div></div></div>
-		icon="spinner"
+		<component
-		:size="props.size"
+			v-else
-		spin
+			:is="$options.components.N8nIcon"
-	/>
+			icon="spinner"
+			:size="props.size"
+			spin
+		/>
+	</span>
 </template>
 
 <script lang="ts">
@@ -22,6 +26,51 @@ export default {
 				return ['small', 'medium', 'large'].includes(value);
 			},
 		},
+		type: {
+			type: String,
+			validator: function (value: string): boolean {
+				return ['dots', 'ring'].includes(value);
+			},
+			default: 'dots',
+		},
 	},
 };
 </script>
+
+<style lang="scss">
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 48px;
+  height: 48px;
+  border: 4px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: var(--color-primary) transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+</style>

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -13,7 +13,7 @@
 					target="_blank"
 					:href="option.href"
 					:class="[$style.link, $style.tab]"
-					@click="handleTabClick"
+					@click="() => handleTabClick(option.value)"
 				>
 					<div>
 						{{ option.label }}
@@ -168,7 +168,7 @@ export default Vue.extend({
 
 .button {
 	position: absolute;
-	background-color: var(--color-background-light);
+	background-color: var(--color-background-base);
 	z-index: 1;
 	height: 24px;
 	width: 10px;

packages/design-system/theme/src/common/var.scss

@@ -691,7 +691,7 @@ $button-disabled-background-color: var(
 	var(--color-foreground-base)
 );
 /// color||Color|0
-$button-disabled-border-color: var(--border-color-base);
+$button-disabled-border-color: var(--button-disabled-border-color, var(--border-color-base));
 
 /// color||Color|0
 $button-primary-border-color: var(--color-primary);

packages/editor-ui/src/Interface.ts

@@ -340,6 +340,7 @@ export interface IExecutionResponse extends IExecutionBase {
 	id: string;
 	data: IRunExecutionData;
 	workflowData: IWorkflowDb;
+	executedNode?: string;
 }
 
 export interface IExecutionShortResponse {
@@ -840,6 +841,8 @@ export interface IModalState {
 	activeId?: string | null;
 }
 
+export type IRunDataDisplayMode = 'table' | 'json' | 'binary';
+
 export interface IUiState {
 	sidebarMenuCollapsed: boolean;
 	modalStack: string[];
@@ -848,6 +851,16 @@ export interface IUiState {
 	};
 	isPageLoading: boolean;
 	currentView: string;
+	ndv: {
+		sessionId: string;
+		input: {
+			displayMode: IRunDataDisplayMode;
+		};
+		output: {
+			displayMode: IRunDataDisplayMode;
+		};
+	};
+	mainPanelPosition: number;
 }
 
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';

packages/editor-ui/src/components/BinaryDataDisplay.vue

@@ -101,7 +101,7 @@ export default mixins(
 	z-index: 10;
 	width: 100%;
 	height: calc(100% - 50px);
-	background-color: #f9f9f9;
+	background-color: var(--color-background-base);
 	overflow: hidden;
 	text-align: center;
 

packages/editor-ui/src/components/CollectionParameter.vue

@@ -10,6 +10,7 @@
 			<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
 				<n8n-button
 					v-if="parameter.options.length === 1"
+					type="tertiary"
 					fullWidth
 					@click="optionSelected(parameter.options[0].name)"
 					:label="getPlaceholderText"

packages/editor-ui/src/components/CredentialEdit/CredentialInputs.vue

@@ -7,6 +7,7 @@
 				:value="credentialData[parameter.name]"
 				:documentationUrl="documentationUrl"
 				:showValidationWarnings="showValidationWarnings"
+				eventSource="credentials"
 				@change="valueChanged"
 			/>
 		</form>

packages/editor-ui/src/components/DataDisplay.vue

@@ -1,184 +0,0 @@
-<template>
-	<el-dialog
-		:visible="(!!node || renaming) && !isActiveStickyNode"
-		:before-close="close"
-		:show-close="false"
-		custom-class="data-display-wrapper"
-		width="85%"
-		append-to-body
-	>
-		<n8n-tooltip placement="bottom-start" :value="showTriggerWaitingWarning" :disabled="!showTriggerWaitingWarning" :manual="true">
-			<div slot="content" :class="$style.triggerWarning">{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}</div>
-			<div :class="$style.backToCanvas" @click="close">
-				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
-				<n8n-text color="text-xlight" size="medium" :bold="true">{{ $locale.baseText('ndv.backToCanvas') }}</n8n-text>
-			</div>
-		</n8n-tooltip>
-
-		<div class="data-display" v-if="node" >
-			<NodeSettings :eventBus="settingsEventBus" @valueChanged="valueChanged" @execute="onNodeExecute" />
-			<RunData @openSettings="openSettings" />
-		</div>
-	</el-dialog>
-</template>
-
-<script lang="ts">
-import {
-	INodeTypeDescription,
-} from 'n8n-workflow';
-import {
-	INodeUi,
-	IUpdateInformation,
-} from '../Interface';
-
-import { externalHooks } from '@/components/mixins/externalHooks';
-import { nodeHelpers } from '@/components/mixins/nodeHelpers';
-import { workflowHelpers } from '@/components/mixins/workflowHelpers';
-
-import NodeSettings from '@/components/NodeSettings.vue';
-import RunData from '@/components/RunData.vue';
-
-import mixins from 'vue-typed-mixins';
-import Vue from 'vue';
-import { mapGetters } from 'vuex';
-import { STICKY_NODE_TYPE } from '@/constants';
-
-export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
-	name: 'DataDisplay',
-	components: {
-		NodeSettings,
-		RunData,
-	},
-	props: {
-		renaming: {
-			type: Boolean,
-		},
-	},
-	data () {
-		return {
-			settingsEventBus: new Vue(),
-			triggerWaitingWarningEnabled: false,
-		};
-	},
-	computed: {
-		...mapGetters(['executionWaitingForWebhook']),
-		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
-		},
-		showTriggerWaitingWarning(): boolean {
-			return this.triggerWaitingWarningEnabled && !!this.nodeType && !this.nodeType.group.includes('trigger') && this.workflowRunning && this.executionWaitingForWebhook;
-		},
-		node (): INodeUi {
-			return this.$store.getters.activeNode;
-		},
-		nodeType (): INodeTypeDescription | null {
-			if (this.node) {
-				return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
-			}
-			return null;
-		},
-		isActiveStickyNode(): boolean {
-			return !!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE;
-		},
-	},
-	watch: {
-		node (node, oldNode) {
-			if(node && !oldNode && !this.isActiveStickyNode) {
-				this.triggerWaitingWarningEnabled = false;
-				this.$externalHooks().run('dataDisplay.nodeTypeChanged', { nodeSubtitle: this.getNodeSubtitle(node, this.nodeType, this.getWorkflow()) });
-				this.$telemetry.track('User opened node modal', { node_type: this.nodeType ? this.nodeType.name : '', workflow_id: this.$store.getters.workflowId });
-			}
-			if (window.top && !this.isActiveStickyNode) {
-				window.top.postMessage(JSON.stringify({command: (node? 'openNDV': 'closeNDV')}), '*');
-			}
-		},
-	},
-	methods: {
-		onNodeExecute() {
-			setTimeout(() => {
-				if (!this.node || !this.workflowRunning) {
-					return;
-				}
-				this.triggerWaitingWarningEnabled = true;
-			}, 1000);
-		},
-		openSettings() {
-			this.settingsEventBus.$emit('openSettings');
-		},
-		valueChanged (parameterData: IUpdateInformation) {
-			this.$emit('valueChanged', parameterData);
-		},
-		nodeTypeSelected (nodeTypeName: string) {
-			this.$emit('nodeTypeSelected', nodeTypeName);
-		},
-		close () {
-			this.$externalHooks().run('dataDisplay.nodeEditingFinished');
-			this.triggerWaitingWarningEnabled = false;
-			this.$store.commit('setActiveNode', null);
-		},
-	},
-});
-
-</script>
-
-<style lang="scss">
-.data-display-wrapper {
-	height: 85%;
-	margin-top: 48px !important;
-
-	.el-dialog__header {
-		padding: 0 !important;
-	}
-
-	.el-dialog__body {
-		padding: 0 !important;
-		height: 100%;
-		min-height: 400px;
-		overflow: hidden;
-		border-radius: 8px;
-	}
-}
-
-.data-display {
-	background-color: #fff;
-	border-radius: 8px;
-	display: flex;
-	height: 100%;
-}
-
-.fade-enter-active, .fade-enter-to, .fade-leave-active {
-	transition: all .75s ease;
-	opacity: 1;
-}
-
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-	opacity: 0;
-}
-</style>
-
-<style lang="scss" module>
-.triggerWarning {
-	max-width: 180px;
-}
-
-.backToCanvas {
-	position: absolute;
-	top: -40px;
-
-	&:hover {
-		cursor: pointer;
-	}
-
-	> * {
-		margin-right: var(--spacing-3xs);
-	}
-}
-
-@media (min-width: $--breakpoint-lg) {
-	.backToCanvas {
-		position: fixed;
-		top: 10px;
-		left: 20px;
-	}
-}
-</style>

packages/editor-ui/src/components/Draggable.vue

@@ -0,0 +1,59 @@
+<template>
+	<div
+		:class="{[$style.dragging]: isDragging }"
+		@mousedown="onDragStart"
+	>
+		<slot :isDragging="isDragging"></slot>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	data() {
+		return {
+			isDragging: false,
+		};
+	},
+	methods: {
+		onDragStart(e: MouseEvent) {
+			e.preventDefault();
+			e.stopPropagation();
+			this.isDragging = true;
+
+			this.$emit('dragstart');
+			document.body.style.cursor = 'grabbing';
+
+			window.addEventListener('mousemove', this.onDrag);
+			window.addEventListener('mouseup', this.onDragEnd);
+		},
+		onDrag(e: MouseEvent) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			this.$emit('drag', {x: e.pageX, y: e.pageY});
+		},
+		onDragEnd(e: MouseEvent) {
+			e.preventDefault();
+			e.stopPropagation();
+
+			document.body.style.cursor = 'unset';
+			window.removeEventListener('mousemove', this.onDrag);
+			window.removeEventListener('mouseup', this.onDragEnd);
+
+			setTimeout(() => {
+				this.$emit('dragend');
+				this.isDragging = false;
+			}, 0);
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.dragging {
+	visibility: visible;
+	cursor: grabbing;
+}
+</style>

packages/editor-ui/src/components/ExpressionEdit.vue

@@ -51,6 +51,8 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 
 import mixins from 'vue-typed-mixins';
 
+const MAPPING_PARAMS = [`$evaluateExpression`, `$item`, `$jmespath`, `$node`, `$binary`, `$data`, `$env`, `$json`, `$now`, `$parameters`, `$position`, `$resumeWebhookUrl`, `$runIndex`, `$today`, `$workflow`];
+
 export default mixins(
 	externalHooks,
 	genericHelpers,
@@ -61,6 +63,7 @@ export default mixins(
 		'parameter',
 		'path',
 		'value',
+		'eventSource',
 	],
 	components: {
 		ExpressionInput,
@@ -110,7 +113,14 @@ export default mixins(
 			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
 
 			if (!newValue) {
-				this.$telemetry.track('User closed Expression Editor', { empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.track('User closed Expression Editor', {
+					empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
+					workflow_id: this.$store.getters.workflowId,
+					source: this.eventSource,
+					session_id: this.$store.getters['ui/ndvSessionId'],
+					has_parameter: this.value.includes('$parameter'),
+					has_mapping: !!MAPPING_PARAMS.find((param) => this.value.includes(param)),
+				});
 			}
 		},
 	},

packages/editor-ui/src/components/FixedCollectionParameter.vue

@@ -82,6 +82,7 @@
 		<div v-if="parameterOptions.length > 0 && !isReadOnly">
 			<n8n-button
 				v-if="parameter.options.length === 1"
+				type="tertiary"
 				fullWidth
 				@click="optionSelected(parameter.options[0].name)"
 				:label="getPlaceholderText"

packages/editor-ui/src/components/InputPanel.vue

@@ -0,0 +1,234 @@
+<template>
+	<RunData
+		:nodeUi="currentNode"
+		:runIndex="runIndex"
+		:linkedRuns="linkedRuns"
+		:canLinkRuns="canLinkRuns"
+		:tooMuchDataTitle="$locale.baseText('ndv.input.tooMuchData.title')"
+		:noDataInBranchMessage="$locale.baseText('ndv.input.noOutputDataInBranch')"
+		:isExecuting="isExecutingPrevious"
+		:executingMessage="$locale.baseText('ndv.input.executingPrevious')"
+		:sessionId="sessionId"
+		:overrideOutputs="connectedCurrentNodeOutputs"
+		paneType="input"
+		@linkRun="onLinkRun"
+		@unlinkRun="onUnlinkRun"
+		@runChange="onRunIndexChange">
+		<template v-slot:header>
+			<div :class="$style.titleSection">
+				<n8n-select v-if="parentNodes.length" :popper-append-to-body="true" size="small" :value="currentNodeName" @input="onSelect" :no-data-text="$locale.baseText('ndv.input.noNodesFound')" :placeholder="$locale.baseText('ndv.input.parentNodes')" filterable>
+					<template slot="prepend">
+						<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+					</template>
+					<n8n-option v-for="node in parentNodes" :value="node.name" :key="node.name" class="node-option">
+						{{ truncate(node.name) }}&nbsp;
+						<span >{{ $locale.baseText('ndv.input.nodeDistance', {adjustToNumber: node.depth}) }}</span>
+					</n8n-option>
+				</n8n-select>
+				<span v-else :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
+			</div>
+		</template>
+
+		<template v-slot:node-not-run>
+			<div :class="$style.noOutputData" v-if="parentNodes.length">
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData.title') }}</n8n-text>
+				<NodeExecuteButton type="outline" :transparent="true" :nodeName="currentNodeName" :label="$locale.baseText('ndv.input.noOutputData.executePrevious')" @execute="onNodeExecute" />
+				<n8n-text tag="div" size="small">
+					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
+				</n8n-text>
+			</div>
+			<div :class="$style.notConnected" v-else>
+				<div>
+					<WireMeUp />
+				</div>
+				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.notConnected.title') }}</n8n-text>
+				<n8n-text tag="div">
+					{{ $locale.baseText('ndv.input.notConnected.message') }}
+					<a href="https://docs.n8n.io/workflows/connections/" target="_blank" @click="onConnectionHelpClick">
+						{{$locale.baseText('ndv.input.notConnected.learnMore')}}
+					</a>
+				</n8n-text>
+			</div>
+		</template>
+
+		<template v-slot:no-output-data>
+			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.input.noOutputData') }}</n8n-text>
+		</template>
+	</RunData>
+</template>
+
+<script lang="ts">
+import { INodeUi } from '@/Interface';
+import { IConnectedNode, Workflow } from 'n8n-workflow';
+import RunData from './RunData.vue';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+import mixins from 'vue-typed-mixins';
+import NodeExecuteButton from './NodeExecuteButton.vue';
+import WireMeUp from './WireMeUp.vue';
+
+export default mixins(
+	workflowHelpers,
+).extend({
+	name: 'InputPanel',
+	components: { RunData, NodeExecuteButton, WireMeUp },
+	props: {
+		currentNodeName: {
+			type: String,
+		},
+		runIndex: {
+			type: Number,
+		},
+		linkedRuns: {
+			type: Boolean,
+		},
+		workflow: {
+		},
+		canLinkRuns: {
+			type: Boolean,
+		},
+		sessionId: {
+			type: String,
+		},
+	},
+	computed: {
+		isExecutingPrevious(): boolean {
+			const triggeredNode = this.$store.getters.executedNode;
+			const executingNode = this.$store.getters.executingNode;
+			if (this.activeNode && triggeredNode === this.activeNode.name && this.activeNode.name !== executingNode) {
+				return true;
+			}
+
+			if (executingNode || triggeredNode) {
+				return !!this.parentNodes.find((node) => node.name === executingNode || node.name === triggeredNode);
+			}
+			return false;
+		},
+		currentWorkflow(): Workflow {
+			return this.workflow as Workflow;
+		},
+		activeNode (): INodeUi | null {
+			return this.$store.getters.activeNode;
+		},
+		currentNode (): INodeUi {
+			return this.$store.getters.getNodeByName(this.currentNodeName);
+		},
+		connectedCurrentNodeOutputs(): number[] | undefined {
+			const search = this.parentNodes.find(({name}) => name === this.currentNodeName);
+			if (search) {
+				return search.indicies;
+			}
+			return undefined;
+		},
+		parentNodes (): IConnectedNode[] {
+			if (!this.activeNode) {
+				return [];
+			}
+			const nodes: IConnectedNode[] = (this.workflow as Workflow).getParentNodesByDepth(this.activeNode.name);
+
+			return nodes.filter(({name}, i) => (this.activeNode && (name !== this.activeNode.name)) && nodes.findIndex((node) => node.name === name) === i);
+		},
+	},
+	methods: {
+		onNodeExecute() {
+			this.$emit('execute');
+			if (this.activeNode) {
+				this.$telemetry.track('User clicked ndv button', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: 'input',
+					type: 'executePrevious',
+				});
+			}
+		},
+		onRunIndexChange(run: number) {
+			this.$emit('runChange', run);
+		},
+		onLinkRun() {
+			this.$emit('linkRun');
+		},
+		onUnlinkRun() {
+			this.$emit('unlinkRun');
+		},
+		onSelect(value: string) {
+			const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
+			this.$emit('select', value, index);
+		},
+		onConnectionHelpClick() {
+			if (this.activeNode) {
+				this.$telemetry.track('User clicked ndv link', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: 'input',
+					type: 'not-connected-help',
+				});
+			}
+		},
+		truncate(nodeName: string) {
+			const truncated = nodeName.substring(0, 30);
+			if (truncated.length < nodeName.length) {
+				return `${truncated}...`;
+			}
+			return truncated;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.titleSection {
+	display: flex;
+	max-width: 300px;
+
+	> * {
+		margin-right: var(--spacing-2xs);
+	}
+}
+
+.noOutputData {
+	max-width: 180px;
+
+	> *:first-child {
+		margin-bottom: var(--spacing-m);
+	}
+
+	> * {
+		margin-bottom: var(--spacing-2xs);
+	}
+}
+
+.notConnected {
+	max-width: 300px;
+
+	> *:first-child {
+		margin-bottom: var(--spacing-m);
+	}
+
+	> * {
+		margin-bottom: var(--spacing-2xs);
+	}
+}
+
+.title {
+	text-transform: uppercase;
+	color: var(--color-text-light);
+	letter-spacing: 3px;
+	font-size: var(--font-size-s);
+	font-weight: var(--font-weight-bold);
+}
+</style>
+
+<style lang="scss" scoped>
+.node-option {
+	font-weight: var(--font-weight-regular) !important;
+
+	span {
+		color: var(--color-text-light);
+	}
+
+	&.selected > span {
+		color: var(--color-primary);
+	}
+}
+</style>

packages/editor-ui/src/components/MultipleParameter.vue

@@ -28,7 +28,7 @@
 				<div v-if="values && Object.keys(values).length === 0 || isReadOnly" class="no-items-exist">
 					<n8n-text size="small">{{ $locale.baseText('multipleParameter.currentlyNoItemsExist') }}</n8n-text>
 				</div>
-				<n8n-button v-if="!isReadOnly" fullWidth @click="addItem()" :label="addButtonText" />
+				<n8n-button v-if="!isReadOnly" type="tertiary" fullWidth @click="addItem()" :label="addButtonText" />
 			</div>
 
 		</n8n-input-label>

packages/editor-ui/src/components/NDVDraggablePanels.vue

@@ -0,0 +1,215 @@
+<template>
+	<div>
+		<div :class="$style.inputPanel" v-if="!isTriggerNode" :style="inputPanelStyles">
+			<slot name="input"></slot>
+		</div>
+		<div :class="$style.outputPanel" :style="outputPanelStyles">
+			<slot name="output"></slot>
+		</div>
+		<div :class="$style.mainPanel" :style="mainPanelStyles">
+			<div :class="$style.dragButtonContainer" @click="close">
+				<PanelDragButton
+					:class="{ [$style.draggable]: true, [$style.visible]: isDragging }"
+					v-if="!isTriggerNode"
+					:canMoveLeft="canMoveLeft"
+					:canMoveRight="canMoveRight"
+					@dragstart="onDragStart"
+					@drag="onDrag"
+					@dragend="onDragEnd"
+				/>
+			</div>
+			<slot name="main"></slot>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import PanelDragButton from './PanelDragButton.vue';
+
+const MAIN_PANEL_WIDTH = 360;
+const SIDE_MARGIN = 24;
+
+export default Vue.extend({
+	name: 'NDVDraggablePanels',
+	components: {
+		PanelDragButton,
+	},
+	props: {
+		isTriggerNode: {
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			windowWidth: 0,
+			isDragging: false,
+		};
+	},
+	mounted() {
+		this.setTotalWidth();
+		window.addEventListener('resize', this.setTotalWidth);
+		this.$emit('init', { position: this.getRelativePosition() });
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.setTotalWidth);
+	},
+	computed: {
+		mainPanelPosition(): number {
+			if (this.isTriggerNode) {
+				return 0;
+			}
+
+			const relativePosition = this.$store.getters['ui/mainPanelPosition'] as number;
+
+			return relativePosition * this.windowWidth;
+		},
+		inputPanelMargin(): number {
+			return this.isTriggerNode ? 0 : 80;
+		},
+		minimumLeftPosition(): number {
+			return SIDE_MARGIN + this.inputPanelMargin;
+		},
+		maximumRightPosition(): number {
+			return this.windowWidth - MAIN_PANEL_WIDTH - this.minimumLeftPosition;
+		},
+		mainPanelFinalPositionPx(): number {
+			const padding = this.minimumLeftPosition;
+			let pos = this.mainPanelPosition + MAIN_PANEL_WIDTH / 2;
+			pos = Math.max(padding, pos - MAIN_PANEL_WIDTH);
+			pos = Math.min(pos, this.maximumRightPosition);
+
+			return pos;
+		},
+		canMoveLeft(): boolean {
+			return this.mainPanelFinalPositionPx > this.minimumLeftPosition;
+		},
+		canMoveRight(): boolean {
+			return this.mainPanelFinalPositionPx < this.maximumRightPosition;
+		},
+		mainPanelStyles(): { left: string } {
+			return {
+				left: `${this.mainPanelFinalPositionPx}px`,
+			};
+		},
+		inputPanelStyles(): { width: string } {
+			let width = this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
+			width = Math.min(
+				width,
+				this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
+			);
+			width = Math.max(320, width);
+			return {
+				width: `${width}px`,
+			};
+		},
+		outputPanelStyles(): { width: string } {
+			let width = this.windowWidth - this.mainPanelPosition - MAIN_PANEL_WIDTH / 2 - SIDE_MARGIN;
+			width = Math.min(
+				width,
+				this.windowWidth - SIDE_MARGIN * 2 - this.inputPanelMargin - MAIN_PANEL_WIDTH,
+			);
+			width = Math.max(320, width);
+			return {
+				width: `${width}px`,
+			};
+		},
+	},
+	methods: {
+		getRelativePosition() {
+			const current = this.mainPanelFinalPositionPx + MAIN_PANEL_WIDTH / 2 - this.windowWidth / 2;
+
+			const pos = Math.floor(
+				(current / ((this.maximumRightPosition - this.minimumLeftPosition) / 2)) * 100,
+			);
+			return pos;
+		},
+		onDragStart() {
+			this.isDragging = true;
+			this.$emit('dragstart', { position: this.getRelativePosition() });
+		},
+		onDrag(e: {x: number, y: number}) {
+			const relativePosition = e.x / this.windowWidth;
+			this.$store.commit('ui/setMainPanelRelativePosition', relativePosition);
+		},
+		onDragEnd() {
+			setTimeout(() => {
+				this.isDragging = false;
+				this.$emit('dragend', {
+					windowWidth: this.windowWidth,
+					position: this.getRelativePosition(),
+				});
+			}, 0);
+		},
+		setTotalWidth() {
+			this.windowWidth = window.innerWidth;
+		},
+		close() {
+			this.$emit('close');
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+$--main-panel-width: 360px;
+
+.dataPanel {
+	position: absolute;
+	height: calc(100% - 2 * var(--spacing-l));
+	position: absolute;
+	top: var(--spacing-l);
+	z-index: 0;
+}
+
+.inputPanel {
+	composes: dataPanel;
+	left: var(--spacing-l);
+
+	> * {
+		border-radius: var(--border-radius-large) 0 0 var(--border-radius-large);
+	}
+}
+
+.outputPanel {
+	composes: dataPanel;
+	right: var(--spacing-l);
+	width: $--main-panel-width;
+
+	> * {
+		border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0;
+	}
+}
+
+.mainPanel {
+	position: absolute;
+	height: 100%;
+
+	&:hover {
+		.draggable {
+			visibility: visible;
+		}
+	}
+}
+
+.draggable {
+	position: absolute;
+	left: 40%;
+	visibility: hidden;
+}
+
+.dragButtonContainer {
+	position: absolute;
+	top: -12px;
+	width: $--main-panel-width;
+	height: 12px;
+
+	&:hover .draggable {
+		visibility: visible;
+	}
+}
+
+.visible {
+	visibility: visible;
+}
+</style>

packages/editor-ui/src/components/Node.vue

@@ -323,7 +323,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 	mounted() {
 		this.setSubtitle();
 		setTimeout(() => {
-			this.$emit('run', {name: this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
+			this.$emit('run', {name: this.data && this.data.name, data: this.nodeRunData, waiting: !!this.waiting});
 		}, 0);
 	},
 	data () {

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -0,0 +1,524 @@
+<template>
+	<el-dialog
+		:visible="(!!activeNode || renaming) && !isActiveStickyNode"
+		:before-close="close"
+		:show-close="false"
+		custom-class="data-display-wrapper"
+		class="ndv-wrapper"
+		width="auto"
+		append-to-body
+	>
+		<n8n-tooltip
+			placement="bottom-start"
+			:value="showTriggerWaitingWarning"
+			:disabled="!showTriggerWaitingWarning"
+			:manual="true"
+		>
+			<div slot="content" :class="$style.triggerWarning">
+				{{ $locale.baseText('ndv.backToCanvas.waitingForTriggerWarning') }}
+			</div>
+			<div :class="$style.backToCanvas" @click="close">
+				<n8n-icon icon="arrow-left" color="text-xlight" size="medium" />
+				<n8n-text color="text-xlight" size="medium" :bold="true">
+					{{ $locale.baseText('ndv.backToCanvas') }}
+				</n8n-text>
+			</div>
+		</n8n-tooltip>
+
+		<div class="data-display" v-if="activeNode">
+			<div @click="close" :class="$style.modalBackground"></div>
+			<NDVDraggablePanels :isTriggerNode="isTriggerNode" @close="close" @init="onPanelsInit" @dragstart="onDragStart" @dragend="onDragEnd">
+				<template #input>
+					<InputPanel
+						:workflow="workflow"
+						:canLinkRuns="canLinkRuns"
+						:runIndex="inputRun"
+						:linkedRuns="linked"
+						:currentNodeName="inputNodeName"
+						:sessionId="sessionId"
+						@linkRun="onLinkRunToInput"
+						@unlinkRun="() => onUnlinkRun('input')"
+						@runChange="onRunInputIndexChange"
+						@openSettings="openSettings"
+						@select="onInputSelect"
+						@execute="onNodeExecute"
+					/>
+				</template>
+				<template #output>
+					<OutputPanel
+						:canLinkRuns="canLinkRuns"
+						:runIndex="outputRun"
+						:linkedRuns="linked"
+						:sessionId="sessionId"
+						@linkRun="onLinkRunToOutput"
+						@unlinkRun="() => onUnlinkRun('output')"
+						@runChange="onRunOutputIndexChange"
+						@openSettings="openSettings"
+					/>
+				</template>
+				<template #main>
+					<NodeSettings
+						:eventBus="settingsEventBus"
+						:dragging="isDragging"
+						:sessionId="sessionId"
+						@valueChanged="valueChanged"
+						@execute="onNodeExecute"
+					/>
+					<a
+						v-if="featureRequestUrl"
+						@click="onFeatureRequestClick"
+						:class="$style.featureRequest"
+						target="_blank"
+					>
+						<font-awesome-icon icon="lightbulb" />
+						{{ $locale.baseText('ndv.featureRequest') }}
+					</a>
+				</template>
+			</NDVDraggablePanels>
+		</div>
+	</el-dialog>
+</template>
+
+<script lang="ts">
+import {
+	INodeConnections,
+	INodeTypeDescription,
+	IRunData,
+	IRunExecutionData,
+	Workflow,
+} from 'n8n-workflow';
+import { IExecutionResponse, INodeUi, IUpdateInformation } from '../Interface';
+
+import { externalHooks } from '@/components/mixins/externalHooks';
+import { nodeHelpers } from '@/components/mixins/nodeHelpers';
+import { workflowHelpers } from '@/components/mixins/workflowHelpers';
+
+import NodeSettings from '@/components/NodeSettings.vue';
+import NDVDraggablePanels from './NDVDraggablePanels.vue';
+
+import mixins from 'vue-typed-mixins';
+import Vue from 'vue';
+import OutputPanel from './OutputPanel.vue';
+import InputPanel from './InputPanel.vue';
+import { mapGetters } from 'vuex';
+import { BASE_NODE_SURVEY_URL, START_NODE_TYPE, STICKY_NODE_TYPE } from '@/constants';
+import { editor } from 'monaco-editor';
+
+export default mixins(externalHooks, nodeHelpers, workflowHelpers).extend({
+	name: 'NodeDetailsView',
+	components: {
+		NodeSettings,
+		InputPanel,
+		OutputPanel,
+		NDVDraggablePanels,
+	},
+	props: {
+		renaming: {
+			type: Boolean,
+		},
+	},
+	data() {
+		return {
+			settingsEventBus: new Vue(),
+			runInputIndex: -1,
+			runOutputIndex: -1,
+			isLinkingEnabled: true,
+			selectedInput: undefined as string | undefined,
+			triggerWaitingWarningEnabled: false,
+			isDragging: false,
+			mainPanelPosition: 0,
+		};
+	},
+	mounted() {
+		this.$store.commit('ui/setNDVSessionId');
+	},
+	computed: {
+		...mapGetters(['executionWaitingForWebhook']),
+		sessionId(): string {
+			return this.$store.getters['ui/ndvSessionId'];
+		},
+		workflowRunning(): boolean {
+			return this.$store.getters.isActionActive('workflowRunning');
+		},
+		showTriggerWaitingWarning(): boolean {
+			return (
+				this.triggerWaitingWarningEnabled &&
+				!!this.activeNodeType &&
+				!this.activeNodeType.group.includes('trigger') &&
+				this.workflowRunning &&
+				this.executionWaitingForWebhook
+			);
+		},
+		activeNode(): INodeUi {
+			return this.$store.getters.activeNode;
+		},
+		inputNodeName(): string | undefined {
+			return this.selectedInput || this.parentNode;
+		},
+		inputNode(): INodeUi | null {
+			if (this.inputNodeName) {
+				return this.$store.getters.getNodeByName(this.inputNodeName);
+			}
+
+			return null;
+		},
+		activeNodeType(): INodeTypeDescription | null {
+			if (this.activeNode) {
+				return this.$store.getters.nodeType(this.activeNode.type, this.activeNode.typeVersion);
+			}
+			return null;
+		},
+		workflow(): Workflow {
+			return this.getWorkflow();
+		},
+		parentNodes(): string[] {
+			if (this.activeNode) {
+				return (
+					this.workflow.getParentNodesByDepth(this.activeNode.name, 1).map(({ name }) => name) || []
+				);
+			}
+
+			return [];
+		},
+		parentNode(): string | undefined {
+			return this.parentNodes[0];
+		},
+		isTriggerNode(): boolean {
+			return (
+				!!this.activeNodeType &&
+				(this.activeNodeType.group.includes('trigger') ||
+					this.activeNodeType.name === START_NODE_TYPE)
+			);
+		},
+		isActiveStickyNode(): boolean {
+			return (
+				!!this.$store.getters.activeNode && this.$store.getters.activeNode.type === STICKY_NODE_TYPE
+			);
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.$store.getters.getWorkflowExecution;
+		},
+		workflowRunData(): IRunData | null {
+			if (this.workflowExecution === null) {
+				return null;
+			}
+			const executionData: IRunExecutionData = this.workflowExecution.data;
+			if (executionData && executionData.resultData) {
+				return executionData.resultData.runData;
+			}
+			return null;
+		},
+		maxOutputRun(): number {
+			if (this.activeNode === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.activeNode.name)) {
+				return 0;
+			}
+
+			if (runData[this.activeNode.name].length) {
+				return runData[this.activeNode.name].length - 1;
+			}
+
+			return 0;
+		},
+		outputRun(): number {
+			if (this.runOutputIndex === -1) {
+				return this.maxOutputRun;
+			}
+
+			return Math.min(this.runOutputIndex, this.maxOutputRun);
+		},
+		maxInputRun(): number {
+			if (this.inputNode === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.inputNode.name)) {
+				return 0;
+			}
+
+			if (runData[this.inputNode.name].length) {
+				return runData[this.inputNode.name].length - 1;
+			}
+
+			return 0;
+		},
+		inputRun(): number {
+			if (this.isLinkingEnabled && this.maxOutputRun === this.maxInputRun) {
+				return this.outputRun;
+			}
+			if (this.runInputIndex === -1) {
+				return this.maxInputRun;
+			}
+
+			return Math.min(this.runInputIndex, this.maxInputRun);
+		},
+		canLinkRuns(): boolean {
+			return this.maxOutputRun > 0 && this.maxOutputRun === this.maxInputRun;
+		},
+		linked(): boolean {
+			return this.isLinkingEnabled && this.canLinkRuns;
+		},
+		inputPanelMargin(): number {
+			return this.isTriggerNode ? 0 : 80;
+		},
+		featureRequestUrl(): string {
+			if (!this.activeNodeType) {
+				return '';
+			}
+			return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
+		},
+	},
+	watch: {
+		activeNode(node, oldNode) {
+			if (node && !oldNode && !this.isActiveStickyNode) {
+				this.runInputIndex = -1;
+				this.runOutputIndex = -1;
+				this.isLinkingEnabled = true;
+				this.selectedInput = undefined;
+				this.triggerWaitingWarningEnabled = false;
+
+				this.$store.commit('ui/setNDVSessionId');
+				this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
+					nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getWorkflow()),
+				});
+
+				setTimeout(() => {
+					const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
+						this.activeNode.name,
+					) as INodeConnections;
+
+					this.$telemetry.track('User opened node modal', {
+						node_type: this.activeNodeType ? this.activeNodeType.name : '',
+						workflow_id: this.$store.getters.workflowId,
+						session_id: this.sessionId,
+						parameters_pane_position: this.mainPanelPosition,
+						input_first_connector_runs: this.maxInputRun,
+						output_first_connector_runs: this.maxOutputRun,
+						selected_view_inputs: this.isTriggerNode
+							? 'trigger'
+							: this.$store.getters['ui/inputPanelDispalyMode'],
+						selected_view_outputs: this.$store.getters['ui/outputPanelDispalyMode'],
+						input_connectors: this.parentNodes.length,
+						output_connectors:
+							outogingConnections && outogingConnections.main && outogingConnections.main.length,
+						input_displayed_run_index: this.inputRun,
+						output_displayed_run_index: this.outputRun,
+					});
+				}, 0); // wait for display mode to be set correctly
+			}
+			if (window.top && !this.isActiveStickyNode) {
+				window.top.postMessage(JSON.stringify({ command: node ? 'openNDV' : 'closeNDV' }), '*');
+			}
+		},
+		maxOutputRun() {
+			this.runOutputIndex = -1;
+		},
+		maxInputRun() {
+			this.runInputIndex = -1;
+		},
+	},
+	methods: {
+		onFeatureRequestClick() {
+			window.open(this.featureRequestUrl, '_blank');
+			this.$telemetry.track('User clicked ndv link', {
+				node_type: this.activeNode.type,
+				workflow_id: this.$store.getters.workflowId,
+				session_id: this.sessionId,
+				pane: 'main',
+				type: 'i-wish-this-node-would',
+			});
+		},
+		onPanelsInit(e: { position: number }) {
+			this.mainPanelPosition = e.position;
+		},
+		onDragStart(e: { position: number }) {
+			this.isDragging = true;
+			this.mainPanelPosition = e.position;
+		},
+		onDragEnd(e: { windowWidth: number, position: number }) {
+			this.isDragging = false;
+			this.$telemetry.track('User moved parameters pane', {
+				window_width: e.windowWidth,
+				start_position: this.mainPanelPosition,
+				end_position: e.position,
+				node_type: this.activeNodeType ? this.activeNodeType.name : '',
+				session_id: this.sessionId,
+				workflow_id: this.$store.getters.workflowId,
+			});
+			this.mainPanelPosition = e.position;
+		},
+		onLinkRunToInput() {
+			this.runOutputIndex = this.runInputIndex;
+			this.isLinkingEnabled = true;
+			this.trackLinking('input');
+		},
+		onLinkRunToOutput() {
+			this.isLinkingEnabled = true;
+			this.trackLinking('output');
+		},
+		onUnlinkRun(pane: string) {
+			this.runInputIndex = this.runOutputIndex;
+			this.isLinkingEnabled = false;
+			this.trackLinking(pane);
+		},
+		trackLinking(pane: string) {
+			this.$telemetry.track('User changed ndv run linking', {
+				node_type: this.activeNodeType ? this.activeNodeType.name : '',
+				session_id: this.sessionId,
+				linked: this.linked,
+				pane,
+			});
+		},
+		onNodeExecute() {
+			setTimeout(() => {
+				if (!this.activeNode || !this.workflowRunning) {
+					return;
+				}
+				this.triggerWaitingWarningEnabled = true;
+			}, 1000);
+		},
+		openSettings() {
+			this.settingsEventBus.$emit('openSettings');
+		},
+		valueChanged(parameterData: IUpdateInformation) {
+			this.$emit('valueChanged', parameterData);
+		},
+		nodeTypeSelected(nodeTypeName: string) {
+			this.$emit('nodeTypeSelected', nodeTypeName);
+		},
+		close() {
+			if (this.isDragging) {
+				return;
+			}
+			this.$externalHooks().run('dataDisplay.nodeEditingFinished');
+			this.$telemetry.track('User closed node modal', {
+				node_type: this.activeNodeType ? this.activeNodeType.name : '',
+				session_id: this.sessionId,
+				workflow_id: this.$store.getters.workflowId,
+			});
+			this.triggerWaitingWarningEnabled = false;
+			this.$store.commit('setActiveNode', null);
+			this.$store.commit('ui/resetNDVSessionId');
+		},
+		onRunOutputIndexChange(run: number) {
+			this.runOutputIndex = run;
+			this.trackRunChange(run, 'output');
+		},
+		onRunInputIndexChange(run: number) {
+			this.runInputIndex = run;
+			if (this.linked) {
+				this.runOutputIndex = run;
+			}
+			this.trackRunChange(run, 'input');
+		},
+		trackRunChange(run: number, pane: string) {
+			this.$telemetry.track('User changed ndv run dropdown', {
+				session_id: this.sessionId,
+				run_index: run,
+				node_type: this.activeNodeType ? this.activeNodeType.name : '',
+				pane,
+			});
+		},
+		onInputSelect(value: string, index: number) {
+			this.runInputIndex = -1;
+			this.isLinkingEnabled = true;
+			this.selectedInput = value;
+
+			this.$telemetry.track('User changed ndv input dropdown', {
+				node_type: this.activeNode ? this.activeNode.type : '',
+				session_id: this.sessionId,
+				workflow_id: this.$store.getters.workflowId,
+				selection_value: index,
+				input_node_type: this.inputNode ? this.inputNode.type : '',
+			});
+		},
+	},
+});
+</script>
+
+<style lang="scss">
+.ndv-wrapper {
+	overflow: hidden;
+}
+
+.data-display-wrapper {
+	height: 93%;
+	width: 100%;
+	margin-top: var(--spacing-xl) !important;
+	background: none;
+	border: none;
+
+	.el-dialog__header {
+		padding: 0 !important;
+	}
+
+	.el-dialog__body {
+		padding: 0 !important;
+		height: 100%;
+		min-height: 400px;
+		overflow: hidden;
+		border-radius: 8px;
+	}
+}
+
+.data-display {
+	height: 100%;
+	width: 100%;
+	display: flex;
+}
+
+</style>
+
+<style lang="scss" module>
+$--main-panel-width: 360px;
+
+.modalBackground {
+	height: 100%;
+	width: 100%;
+}
+
+.triggerWarning {
+	max-width: 180px;
+}
+
+.backToCanvas {
+	position: fixed;
+	top: var(--spacing-xs);
+	left: var(--spacing-l);
+
+	&:hover {
+		cursor: pointer;
+	}
+
+	> * {
+		margin-right: var(--spacing-3xs);
+	}
+}
+
+@media (min-width: $--breakpoint-lg) {
+	.backToCanvas {
+		top: var(--spacing-xs);
+		left: var(--spacing-m);
+	}
+}
+
+.featureRequest {
+	position: absolute;
+	bottom: var(--spacing-4xs);
+	left: calc(100% + var(--spacing-s));
+	color: var(--color-text-xlight);
+	font-size: var(--font-size-2xs);
+	white-space: nowrap;
+
+	* {
+		margin-right: var(--spacing-3xs);
+	}
+}
+</style>

packages/editor-ui/src/components/NodeExecuteButton.vue

@@ -1,8 +1,11 @@
 <template>
 	<n8n-button
-		:loading="workflowRunning"
+		:loading="nodeRunning"
-		:label="label"
+		:disabled="workflowRunning && !nodeRunning"
-		size="small"
+		:label="buttonLabel"
+		:type="type"
+		:size="size"
+		:transparentBackground="transparent"
 		@click="onClick"
 	/>
 </template>
@@ -20,6 +23,19 @@ export default mixins(
 		nodeName: {
 			type: String,
 		},
+		label: {
+			type: String,
+		},
+		type: {
+			type: String,
+		},
+		size: {
+			type: String,
+		},
+		transparent: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		node (): INodeUi {
@@ -31,6 +47,11 @@ export default mixins(
 			}
 			return null;
 		},
+		nodeRunning (): boolean {
+			const triggeredNode = this.$store.getters.executedNode;
+			const executingNode = this.$store.getters.executingNode;
+			return executingNode === this.node.name || triggeredNode === this.node.name;
+		},
 		workflowRunning (): boolean {
 			return this.$store.getters.isActionActive('workflowRunning');
 		},
@@ -43,7 +64,10 @@ export default mixins(
 		isScheduleTrigger (): boolean {
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
-		label(): string {
+		buttonLabel(): string {
+			if (this.label) {
+				return this.label;
+			}
 			if (this.isPollingTypeNode) {
 				return this.$locale.baseText('ndv.execute.fetchEvent');
 			}

packages/editor-ui/src/components/NodeSettings.vue

@@ -1,15 +1,15 @@
 <template>
-	<div class="node-settings" @keydown.stop>
+	<div :class="{'node-settings': true, 'dragging': dragging}" @keydown.stop>
 		<div :class="$style.header">
 			<div class="header-side-menu">
 				<NodeTitle class="node-name" :value="node.name" :nodeType="nodeType" @input="nameChanged" :readOnly="isReadOnly"></NodeTitle>
 				<div
 					v-if="!isReadOnly"
 				>
-					<NodeExecuteButton :nodeName="node.name" @execute="onNodeExecute" />
+					<NodeExecuteButton :nodeName="node.name" @execute="onNodeExecute" size="small" />
 				</div>
 			</div>
-			<NodeTabs v-model="openPanel" :nodeType="nodeType" />
+			<NodeSettingsTabs v-model="openPanel" :nodeType="nodeType" :sessionId="sessionId" />
 		</div>
 		<div class="node-is-not-valid" v-if="node && !nodeValid">
 			<n8n-text>
@@ -59,7 +59,7 @@ import NodeTitle from '@/components/NodeTitle.vue';
 import ParameterInputFull from '@/components/ParameterInputFull.vue';
 import ParameterInputList from '@/components/ParameterInputList.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
-import NodeTabs from '@/components/NodeTabs.vue';
+import NodeSettingsTabs from '@/components/NodeSettingsTabs.vue';
 import NodeWebhooks from '@/components/NodeWebhooks.vue';
 import { get, set, unset } from 'lodash';
 
@@ -82,7 +82,7 @@ export default mixins(
 			NodeCredentials,
 			ParameterInputFull,
 			ParameterInputList,
-			NodeTabs,
+			NodeSettingsTabs,
 			NodeWebhooks,
 			NodeExecuteButton,
 		},
@@ -151,6 +151,12 @@ export default mixins(
 		props: {
 			eventBus: {
 			},
+			dragging: {
+				type: Boolean,
+			},
+			sessionId: {
+				type: String,
+			},
 		},
 		data () {
 			return {
@@ -542,8 +548,13 @@ export default mixins(
 <style lang="scss">
 .node-settings {
 	overflow: hidden;
-	min-width: 350px;
+	min-width: 360px;
-	max-width: 350px;
+	max-width: 360px;
+	background-color: var(--color-background-xlight);
+	height: 100%;
+	border: var(--border-base);
+	border-radius: var(--border-radius-large);
+	box-shadow: 0 4px 16px rgb(50 61 85 / 10%);
 
 	.no-parameters {
 		margin-top: var(--spacing-xs);
@@ -569,6 +580,11 @@ export default mixins(
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
 	}
+
+	&.dragging {
+		border-color: var(--color-primary);
+		box-shadow: 0px 6px 16px rgba(255, 74, 51, 0.15);
+	}
 }
 
 .parameter-content {

packages/editor-ui/src/components/NodeSettingsTabs.vue

@@ -8,7 +8,7 @@
 
 <script lang="ts">
 import { externalHooks } from '@/components/mixins/externalHooks';
-import { ITab } from '@/Interface';
+import { INodeUi, ITab } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 
 import mixins from 'vue-typed-mixins';
@@ -16,15 +16,21 @@ import mixins from 'vue-typed-mixins';
 export default mixins(
 	externalHooks,
 ).extend({
-	name: 'NodeTabs',
+	name: 'NodeSettingsTabs',
 	props: {
 		value: {
 			type: String,
 		},
 		nodeType: {
 		},
+		sessionId: {
+			type: String,
+		},
 	},
 	computed: {
+		activeNode(): INodeUi {
+			return this.$store.getters.activeNode;
+		},
 		documentationUrl (): string {
 			const nodeType = this.nodeType as INodeTypeDescription | null;
 			if (!nodeType) {
@@ -70,6 +76,13 @@ export default mixins(
 		onTabSelect(tab: string) {
 			if (tab === 'docs' && this.nodeType) {
 				this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType as INodeTypeDescription, documentationUrl: this.documentationUrl });
+				this.$telemetry.track('User clicked ndv link', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: 'main',
+					type: 'docs',
+				});
 			}
 
 			if(tab === 'settings' && this.nodeType) {

packages/editor-ui/src/components/OutputPanel.vue

@@ -0,0 +1,209 @@
+<template>
+	<RunData
+		:nodeUi="node"
+		:runIndex="runIndex"
+		:linkedRuns="linkedRuns"
+		:canLinkRuns="canLinkRuns"
+		:tooMuchDataTitle="$locale.baseText('ndv.output.tooMuchData.title')"
+		:noDataInBranchMessage="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:isExecuting="isNodeRunning"
+		:executingMessage="$locale.baseText('ndv.output.executing')"
+		:sessionId="sessionId"
+		paneType="output"
+		@runChange="onRunIndexChange"
+		@linkRun="onLinkRun"
+		@unlinkRun="onUnlinkRun"
+	>
+		<template v-slot:header>
+			<div :class="$style.titleSection">
+				<span :class="$style.title">{{ $locale.baseText('ndv.output') }}</span>
+				<RunInfo v-if="runsCount === 1" :taskData="runTaskData" />
+
+				<n8n-info-tip
+					theme="warning"
+					type="tooltip"
+					tooltipPlacement="right"
+					v-if="hasNodeRun && staleData"
+				>
+					<template>
+						<span v-html="$locale.baseText('ndv.output.staleDataWarning')"></span>
+					</template>
+				</n8n-info-tip>
+			</div>
+		</template>
+
+		<template v-slot:node-not-run>
+			<n8n-text v-if="workflowRunning">{{ $locale.baseText('ndv.output.waitingToRun') }}</n8n-text>
+			<n8n-text v-else-if="isPollingTypeNode">{{ $locale.baseText('ndv.output.pollEventNodeHint') }}</n8n-text>
+			<n8n-text v-else-if="isTriggerNode && !isScheduleTrigger">{{ $locale.baseText('ndv.output.triggerEventNodeHint') }}</n8n-text>
+			<n8n-text v-else>{{ $locale.baseText('ndv.output.runNodeHint') }}</n8n-text>
+		</template>
+
+		<template v-slot:no-output-data>
+			<n8n-text :bold="true" color="text-dark" size="large">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
+			<n8n-text>
+				{{ $locale.baseText('ndv.output.noOutputData.message') }}
+				<a @click="openSettings">{{ $locale.baseText('ndv.output.noOutputData.message.settings') }}</a>
+				{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
+			</n8n-text>
+		</template>
+
+		<template #run-info v-if="runsCount > 1">
+			<RunInfo :taskData="runTaskData" />
+		</template>
+	</RunData>
+</template>
+
+<script lang="ts">
+import { IExecutionResponse, INodeUi } from '@/Interface';
+import { INodeTypeDescription, IRunData, IRunExecutionData, ITaskData } from 'n8n-workflow';
+import Vue from 'vue';
+import RunData from './RunData.vue';
+import RunInfo from './RunInfo.vue';
+
+export default Vue.extend({
+	name: 'OutputPanel',
+	components: { RunData, RunInfo },
+	props: {
+		runIndex: {
+			type: Number,
+		},
+		linkedRuns: {
+			type: Boolean,
+		},
+		canLinkRuns: {
+			type: Boolean,
+		},
+		sessionId: {
+			type: String,
+		},
+	},
+	computed: {
+		node(): INodeUi {
+			return this.$store.getters.activeNode;
+		},
+		nodeType (): INodeTypeDescription | null {
+			if (this.node) {
+				return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
+			}
+			return null;
+		},
+		isTriggerNode (): boolean {
+			return !!(this.nodeType && this.nodeType.group.includes('trigger'));
+		},
+		isPollingTypeNode (): boolean {
+			return !!(this.nodeType && this.nodeType.polling);
+		},
+		isScheduleTrigger (): boolean {
+			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
+		},
+		isNodeRunning(): boolean {
+			const executingNode = this.$store.getters.executingNode;
+			return executingNode === this.node.name;
+		},
+		workflowRunning (): boolean {
+			return this.$store.getters.isActionActive('workflowRunning');
+		},
+		workflowExecution(): IExecutionResponse | null {
+			return this.$store.getters.getWorkflowExecution;
+		},
+		workflowRunData(): IRunData | null {
+			if (this.workflowExecution === null) {
+				return null;
+			}
+			const executionData: IRunExecutionData = this.workflowExecution.data;
+			return executionData.resultData.runData;
+		},
+		hasNodeRun(): boolean {
+			return Boolean(
+				this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name),
+			);
+		},
+		runTaskData(): ITaskData | null {
+			if (!this.node || this.workflowExecution === null) {
+				return null;
+			}
+
+			const runData = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return null;
+			}
+
+			if (runData[this.node.name].length <= this.runIndex) {
+				return null;
+			}
+
+			return runData[this.node.name][this.runIndex];
+		},
+		runsCount(): number {
+			if (this.node === null) {
+				return 0;
+			}
+
+			const runData: IRunData | null = this.workflowRunData;
+
+			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
+				return 0;
+			}
+
+			if (runData[this.node.name].length) {
+				return runData[this.node.name].length;
+			}
+
+			return 0;
+		},
+		staleData(): boolean {
+			if (!this.node) {
+				return false;
+			}
+			const updatedAt = this.$store.getters.getParametersLastUpdated(this.node.name);
+			if (!updatedAt || !this.runTaskData) {
+				return false;
+			}
+			const runAt = this.runTaskData.startTime;
+			return updatedAt > runAt;
+		},
+	},
+	methods: {
+		onLinkRun() {
+			this.$emit('linkRun');
+		},
+		onUnlinkRun() {
+			this.$emit('unlinkRun');
+		},
+		openSettings() {
+			this.$emit('openSettings');
+			this.$telemetry.track('User clicked ndv link', {
+				node_type: this.node.type,
+				workflow_id: this.$store.getters.workflowId,
+				session_id: this.sessionId,
+				pane: 'output',
+				type: 'settings',
+			});
+		},
+		onRunIndexChange(run: number) {
+			this.$emit('runChange', run);
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.titleSection {
+	display: flex;
+
+	> * {
+		margin-right: var(--spacing-2xs);
+	}
+}
+
+.title {
+	text-transform: uppercase;
+	color: var(--color-text-light);
+	letter-spacing: 3px;
+	font-weight: var(--font-weight-bold);
+	font-size: var(--font-size-s);
+}
+
+</style>

packages/editor-ui/src/components/PanelDragButton.vue

@@ -0,0 +1,132 @@
+<template>
+	<Draggable @drag="onDrag" @dragstart="onDragStart" @dragend="onDragEnd">
+		<template v-slot="{ isDragging }">
+			<div
+				:class="{ [$style.dragButton]: true }"
+			>
+				<span v-if="canMoveLeft" :class="{ [$style.leftArrow]: true, [$style.visible]: isDragging }">
+					<font-awesome-icon icon="arrow-left" />
+				</span>
+				<span v-if="canMoveRight" :class="{ [$style.rightArrow]: true, [$style.visible]: isDragging }">
+					<font-awesome-icon icon="arrow-right" />
+				</span>
+				<div :class="$style.grid">
+					<div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+					<div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+						<div></div>
+					</div>
+				</div>
+			</div>
+		</template>
+	</Draggable>
+</template>
+
+<script lang="ts">
+import mixins from 'vue-typed-mixins';
+import Draggable from './Draggable.vue';
+import dragging from './Draggable.vue';
+
+export default mixins(dragging).extend({
+	components: {
+		Draggable,
+	},
+	props: {
+		canMoveRight: {
+			type: Boolean,
+		},
+		canMoveLeft: {
+			type: Boolean,
+		},
+	},
+	methods: {
+		onDrag(e: {x: number, y: number}) {
+			this.$emit('drag', e);
+		},
+		onDragStart() {
+			this.$emit('dragstart');
+		},
+		onDragEnd() {
+			this.$emit('dragend');
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.dragButton {
+	background-color: var(--color-background-base);
+	width: 64px;
+	height: 21px;
+	border-top-left-radius: var(--border-radius-base);
+	border-top-right-radius: var(--border-radius-base);
+	cursor: grab;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: visible;
+
+	&:hover {
+		.leftArrow, .rightArrow {
+			visibility: visible;
+		}
+	}
+}
+
+.visible {
+	visibility: visible !important;
+}
+
+.arrow {
+	position: absolute;
+	color: var(--color-background-xlight);
+	font-size: var(--font-size-3xs);
+	visibility: hidden;
+	top: 0;
+}
+
+.leftArrow {
+	composes: arrow;
+	left: -16px;
+}
+
+.rightArrow {
+	composes: arrow;
+	right: -16px;
+}
+
+.grid {
+	> div {
+		display: flex;
+
+		&:first-child {
+			> div {
+				margin-bottom: 2px;
+			}
+		}
+
+		> div {
+			height: 2px;
+			width: 2px;
+			border-radius: 50%;
+			background-color: var(--color-foreground-xdark);
+			margin-right: 4px;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+}
+
+
+</style>

packages/editor-ui/src/components/ParameterInput.vue

@@ -1,6 +1,6 @@
 <template>
 	<div @keydown.stop :class="parameterInputClasses">
-	<expression-edit :dialogVisible="expressionEditDialogVisible" :value="value" :parameter="parameter" :path="path" @closeDialog="closeExpressionEditDialog" @valueChanged="expressionUpdated"></expression-edit>
+	<expression-edit :dialogVisible="expressionEditDialogVisible" :value="value" :parameter="parameter" :path="path" :eventSource="eventSource || 'ndv'" @closeDialog="closeExpressionEditDialog" @valueChanged="expressionUpdated"></expression-edit>
 	<div class="parameter-input ignore-key-press" :style="parameterInputWrapperStyle" @click="openExpressionEdit">
 
 		<n8n-input
@@ -244,6 +244,7 @@ export default mixins(
 			'hideIssues', // boolean
 			'errorHighlight',
 			'isForCredential', // boolean
+			'eventSource', // string
 		],
 		data () {
 			return {
@@ -640,6 +641,8 @@ export default mixins(
 						parameter_field_type: this.parameter.type,
 						new_expression: !this.isValueExpression,
 						workflow_id: this.$store.getters.workflowId,
+						session_id: this.$store.getters['ui/ndvSessionId'],
+						source: this.eventSource || 'ndv',
 					});
 				}
 			},

packages/editor-ui/src/components/ParameterInputExpanded.vue

@@ -19,6 +19,7 @@
 			@textInput="valueChanged"
 			@valueChanged="valueChanged"
 			inputSize="large"
+			:eventSource="eventSource"
 		/>
 		<div :class="$style.errors" v-if="showRequiredErrors">
 			<n8n-text color="danger" size="small">
@@ -55,6 +56,9 @@ export default Vue.extend({
 		documentationUrl: {
 			type: String,
 		},
+		eventSource: {
+			type: String,
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/components/RunData.vue

@@ -3,21 +3,7 @@
 		<BinaryDataDisplay :windowVisible="binaryDataDisplayVisible" :displayData="binaryDataDisplayData" @close="closeBinaryDataDisplay"/>
 
 		<div :class="$style.header">
-			<div :class="$style.titleSection">
+			<slot name="header"></slot>
-				<span :class="$style.title">{{ $locale.baseText('ndv.output') }}</span>
-				<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
-					<div>
-						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.startTime') + ':' }}</n8n-text> {{runMetadata.startTime}}<br/>
-						<n8n-text :bold="true" size="small">{{ $locale.baseText('runData.executionTime') + ':' }}</n8n-text> {{runMetadata.executionTime}} {{ $locale.baseText('runData.ms') }}
-					</div>
-				</n8n-info-tip>
-
-				<n8n-info-tip theme="warning" type="tooltip" tooltipPlacement="right" v-if="hasNodeRun && staleData">
-					<template>
-						<span v-html="$locale.baseText('ndv.output.staleDataWarning')"></span>
-					</template>
-				</n8n-info-tip>
-			</div>
 
 			<div v-if="!hasRunError" @click.stop :class="$style.displayModes">
 				<n8n-radio-buttons
@@ -29,19 +15,27 @@
 		</div>
 
 		<div :class="$style.runSelector" v-if="maxRunIndex > 0" >
-			<n8n-select size="small" v-model="runIndex" @click.stop>
+			<n8n-select size="small" :value="runIndex" @input="onRunIndexChange" @click.stop>
 				<template slot="prepend">{{ $locale.baseText('ndv.output.run') }}</template>
 				<n8n-option v-for="option in (maxRunIndex + 1)" :label="getRunLabel(option)" :value="option - 1" :key="option"></n8n-option>
 			</n8n-select>
+
+
+			<n8n-tooltip placement="right" v-if="canLinkRuns" :content="$locale.baseText(linkedRuns ? 'runData.unlinking.hint': 'runData.linking.hint')">
+				<n8n-icon-button v-if="linkedRuns" icon="unlink" type="text" size="small" @click="unlinkRun" />
+				<n8n-icon-button v-else icon="link" type="text" size="small" @click="linkRun" />
+			</n8n-tooltip>
+
+			<slot name="run-info"></slot>
 		</div>
 
 		<div v-if="maxOutputIndex > 0" :class="{[$style.tabs]: displayMode === 'table'}">
-			<n8n-tabs v-model="outputIndex" :options="branches" />
+			<n8n-tabs :value="currentOutputIndex" @input="onBranchChange" :options="branches" />
 		</div>
 
 		<div v-else-if="hasNodeRun && dataCount > 0 && maxRunIndex === 0" :class="$style.itemsCount">
 			<n8n-text>
-				{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'ndv.output.item' : 'ndv.output.items') }}
+				{{ dataCount }} {{ $locale.baseText('ndv.output.items', {adjustToNumber: dataCount}) }}
 			</n8n-text>
 		</div>
 
@@ -65,46 +59,49 @@
 				</el-dropdown>
 			</div>
 
-			<div v-if="!hasNodeRun" :class="$style.center">
+			<div v-if="isExecuting" :class="$style.center">
-				<div v-if="workflowRunning">
+				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
-					<div :class="$style.spinner"><n8n-spinner /></div>
+				<n8n-text>{{ executingMessage }}</n8n-text>
-					<n8n-text>{{ $locale.baseText('ndv.output.executing') }}</n8n-text>
-				</div>
-				<n8n-text v-else-if="isPollingTypeNode">{{ $locale.baseText('ndv.output.pollEventNodeHint') }}</n8n-text>
-				<n8n-text v-else-if="isTriggerNode && !isScheduleTrigger">{{ $locale.baseText('ndv.output.triggerEventNodeHint') }}</n8n-text>
-				<n8n-text v-else>{{ $locale.baseText('ndv.output.runNodeHint') }}</n8n-text>
 			</div>
 
-			<div v-else-if="hasNodeRun && hasRunError" :class="$style.dataDisplay">
+			<div v-else-if="!hasNodeRun" :class="$style.center">
+				<slot name="node-not-run"></slot>
+			</div>
+
+			<div v-else-if="hasNodeRun && hasRunError" :class="$style.errorDisplay">
 				<NodeErrorView :error="workflowRunData[node.name][runIndex].error" />
 			</div>
 
 			<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0 && branches.length > 1" :class="$style.center">
 				<n8n-text>
-					{{ $locale.baseText('ndv.output.noOutputDataInBranch') }}
+					{{ noDataInBranchMessage }}
 				</n8n-text>
 			</div>
 
 			<div v-else-if="hasNodeRun && jsonData && jsonData.length === 0" :class="$style.center">
-				<n8n-text :bold="true" color="text-dark">{{ $locale.baseText('ndv.output.noOutputData.title') }}</n8n-text>
+				<slot name="no-output-data"></slot>
-				<n8n-text>
-					{{ $locale.baseText('ndv.output.noOutputData.message') }}
-					<a @click="openSettings">{{ $locale.baseText('ndv.output.noOutputData.message.settings') }}</a>
-					{{ $locale.baseText('ndv.output.noOutputData.message.settingsOption') }}
-				</n8n-text>
 			</div>
 
 			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
-				<n8n-text :bold="true" color="text-dark">{{ $locale.baseText('ndv.output.tooMuchData.title') }}</n8n-text>
+				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
 				<n8n-text align="center" tag="div"><span v-html="$locale.baseText('ndv.output.tooMuchData.message', { interpolate: {size: dataSizeInMB }})"></span></n8n-text>
 
 				<n8n-button
 					type="outline"
 					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
-					@click="showData = true"
+					@click="showTooMuchData"
 				/>
 			</div>
 
+			<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0 && binaryData.length > 0" :class="$style.center">
+				<n8n-text>
+					{{ $locale.baseText('runData.switchToBinary.info') }}
+					<a @click="switchToBinary">
+						{{ $locale.baseText('runData.switchToBinary.binary') }}
+					</a>
+				</n8n-text>
+			</div>
+
 			<div v-else-if="hasNodeRun && displayMode === 'table' && tableData && tableData.columns && tableData.columns.length === 0" :class="$style.dataDisplay">
 				<table :class="$style.table">
 					<tr>
@@ -112,7 +109,7 @@
 					</tr>
 					<tr v-for="(row, index1) in tableData.data" :key="index1">
 						<td>
-							<n8n-text>{{ $locale.baseText('ndv.output.emptyOutput') }}</n8n-text>
+							<n8n-text>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-text>
 						</td>
 					</tr>
 				</table>
@@ -198,6 +195,7 @@
 				:pager-count="5"
 				:page-size="pageSize"
 				layout="prev, pager, next"
+				@current-change="onCurrentPageChange"
 				:total="dataCount">
 			</el-pagination>
 
@@ -241,6 +239,7 @@ import {
 	IBinaryDisplayData,
 	IExecutionResponse,
 	INodeUi,
+	IRunDataDisplayMode,
 	ITab,
 	ITableData,
 } from '@/Interface';
@@ -260,7 +259,6 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
-import Vue from 'vue/types/umd';
 
 import { saveAs } from 'file-saver';
 
@@ -281,17 +279,49 @@ export default mixins(
 			VueJsonPretty,
 			WarningTooltip,
 		},
+		props: {
+			nodeUi: {
+			}, // INodeUi | null
+			runIndex: {
+				type: Number,
+			},
+			linkedRuns: {
+				type: Boolean,
+			},
+			canLinkRuns: {
+				type: Boolean,
+			},
+			tooMuchDataTitle: {
+				type: String,
+			},
+			noDataInBranchMessage: {
+				type: String,
+			},
+			isExecuting: {
+				type: Boolean,
+			},
+			executingMessage: {
+				type: String,
+			},
+			sessionId: {
+				type: String,
+			},
+			paneType: {
+				type: String,
+			},
+			overrideOutputs: {
+				type: Array,
+			},
+		},
 		data () {
 			return {
 				binaryDataPreviewActive: false,
 				dataSize: 0,
 				deselectedPlaceholder,
-				displayMode: 'table',
 				state: {
 					value: '' as object | number | string,
 					path: deselectedPlaceholder,
 				},
-				runIndex: 0,
 				showData: false,
 				outputIndex: 0,
 				binaryDataDisplayVisible: false,
@@ -308,21 +338,21 @@ export default mixins(
 			this.init();
 		},
 		computed: {
+			activeNode(): INodeUi {
+				return this.$store.getters.activeNode;
+			},
+			displayMode(): IRunDataDisplayMode {
+				return this.$store.getters['ui/getPanelDisplayMode'](this.paneType);
+			},
+			node(): INodeUi | null {
+				return (this.nodeUi as INodeUi | null) || null;
+			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
 				}
 				return null;
 			},
-			isTriggerNode (): boolean {
-				return !!(this.nodeType && this.nodeType.group.includes('trigger'));
-			},
-			isPollingTypeNode (): boolean {
-				return !!(this.nodeType && this.nodeType.polling);
-			},
-			isScheduleTrigger (): boolean {
-				return !!(this.nodeType && this.nodeType.group.includes('schedule'));
-			},
 			buttons(): Array<{label: string, value: string}> {
 				const defaults = [
 					{ label: this.$locale.baseText('runData.table'), value: 'table'},
@@ -337,14 +367,11 @@ export default mixins(
 				return defaults;
 			},
 			hasNodeRun(): boolean {
-				return Boolean(this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
+				return Boolean(!this.isExecuting && this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name));
 			},
 			hasRunError(): boolean {
 				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
 			},
-			workflowRunning (): boolean {
-				return this.$store.getters.isActionActive('workflowRunning');
-			},
 			workflowExecution (): IExecutionResponse | null {
 				return this.$store.getters.getWorkflowExecution;
 			},
@@ -358,48 +385,8 @@ export default mixins(
 				}
 				return null;
 			},
-			node (): INodeUi | null {
-				return this.$store.getters.activeNode;
-			},
-			runTaskData (): ITaskData | null {
-				if (!this.node || this.workflowExecution === null) {
-					return null;
-				}
-
-				const runData = this.workflowRunData;
-
-				if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-					return null;
-				}
-
-				if (runData[this.node.name].length <= this.runIndex) {
-					return null;
-				}
-
-				return runData[this.node.name][this.runIndex];
-			},
-			runMetadata (): {executionTime: number, startTime: string} | null {
-				if (!this.runTaskData) {
-					return null;
-				}
-				return {
-					executionTime: this.runTaskData.executionTime,
-					startTime: new Date(this.runTaskData.startTime).toLocaleString(),
-				};
-			},
-			staleData(): boolean {
-				if (!this.node) {
-					return false;
-				}
-				const updatedAt = this.$store.getters.getParametersLastUpdated(this.node.name);
-				if (!updatedAt || !this.runTaskData) {
-					return false;
-				}
-				const runAt = this.runTaskData.startTime;
-				return updatedAt > runAt;
-			},
 			dataCount (): number {
-				return this.getDataCount(this.runIndex, this.outputIndex);
+				return this.getDataCount(this.runIndex, this.currentOutputIndex);
 			},
 			dataSizeInMB(): string {
 				return (this.dataSize / 1024 / 1000).toLocaleString();
@@ -419,13 +406,14 @@ export default mixins(
 					return 0;
 				}
 
-				if (runData[this.node.name][this.runIndex].data === undefined ||
+				if (runData[this.node.name][this.runIndex]) {
-					runData[this.node.name][this.runIndex].data!.main === undefined
+					const taskData = runData[this.node.name][this.runIndex].data;
-				) {
+					if (taskData && taskData.main) {
-					return 0;
+						return taskData.main.length - 1;
+					}
 				}
 
-				return runData[this.node.name][this.runIndex].data!.main.length - 1;
+				return 0;
 			},
 			maxRunIndex (): number {
 				if (this.node === null) {
@@ -445,7 +433,7 @@ export default mixins(
 				return 0;
 			},
 			inputData (): INodeExecutionData[] {
-				let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
+				let inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
 				if (inputData.length === 0 || !Array.isArray(inputData)) {
 					return [];
 				}
@@ -462,11 +450,18 @@ export default mixins(
 				return this.convertToTable(this.inputData);
 			},
 			binaryData (): IBinaryKeyData[] {
-				if (this.node === null) {
+				if (!this.node) {
 					return [];
 				}
 
-				return this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.outputIndex);
+				return this.getBinaryData(this.workflowRunData, this.node.name, this.runIndex, this.currentOutputIndex);
+			},
+			currentOutputIndex(): number {
+				if (this.overrideOutputs && this.overrideOutputs.length && !this.overrideOutputs.includes(this.outputIndex)) {
+					return this.overrideOutputs[0] as number;
+				}
+
+				return this.outputIndex;
 			},
 			branches (): ITab[] {
 				function capitalize(name: string) {
@@ -474,8 +469,11 @@ export default mixins(
 				}
 				const branches: ITab[] = [];
 				for (let i = 0; i <= this.maxOutputIndex; i++) {
+					if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
+						continue;
+					}
 					const itemsCount = this.getDataCount(this.runIndex, i);
-					const items = this.$locale.baseText(itemsCount === 1 ? 'ndv.output.item': 'ndv.output.items');
+					const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
 					let outputName = this.getOutputName(i);
 					if (`${outputName}` === `${i}`) {
 						outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
@@ -492,16 +490,67 @@ export default mixins(
 			},
 		},
 		methods: {
+			switchToBinary() {
+				this.onDisplayModeChange('binary');
+			},
+			onBranchChange(value: number) {
+				this.outputIndex = value;
+
+				this.$telemetry.track('User changed ndv branch', {
+					session_id: this.sessionId,
+					branch_index: value,
+					node_type: this.activeNode.type,
+					node_type_input_selection: this.nodeType? this.nodeType.name: '',
+					pane: this.paneType,
+				});
+			},
+			showTooMuchData() {
+				this.showData = true;
+				this.$telemetry.track('User clicked ndv button', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: this.paneType,
+					type: 'showTooMuchData',
+				});
+			},
+			linkRun() {
+				this.$emit('linkRun');
+			},
+			unlinkRun() {
+				this.$emit('unlinkRun');
+			},
+			onCurrentPageChange() {
+				this.$telemetry.track('User changed ndv page', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: this.paneType,
+					page_selected: this.currentPage,
+					page_size: this.pageSize,
+					items_total: this.dataCount,
+				});
+			},
 			onPageSizeChange(pageSize: number) {
 				this.pageSize = pageSize;
 				const maxPage = Math.ceil(this.dataCount / this.pageSize);
 				if (maxPage < this.currentPage) {
 					this.currentPage = maxPage;
 				}
+
+				this.$telemetry.track('User changed ndv page size', {
+					node_type: this.activeNode.type,
+					workflow_id: this.$store.getters.workflowId,
+					session_id: this.sessionId,
+					pane: this.paneType,
+					page_selected: this.currentPage,
+					page_size: this.pageSize,
+					items_total: this.dataCount,
+				});
 			},
-			onDisplayModeChange(displayMode: string) {
+			onDisplayModeChange(displayMode: IRunDataDisplayMode) {
 				const previous = this.displayMode;
-				this.displayMode = displayMode;
+				this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
 
 				const dataContainer = this.$refs.dataContainer;
 				if (dataContainer) {
@@ -514,9 +563,15 @@ export default mixins(
 
 				this.closeBinaryDataDisplay();
 				this.$externalHooks().run('runData.displayModeChanged', { newValue: displayMode, oldValue: previous });
-				if(this.node) {
+				if(this.activeNode) {
-					const nodeType = this.node ? this.node.type : '';
+					this.$telemetry.track('User changed ndv item view', {
-					this.$telemetry.track('User changed node output view mode', { old_mode: previous, new_mode: displayMode, node_type: nodeType, workflow_id: this.$store.getters.workflowId });
+						previous_view: previous,
+						new_view: displayMode,
+						node_type: this.activeNode.type,
+						workflow_id: this.$store.getters.workflowId,
+						session_id: this.sessionId,
+						pane: this.paneType,
+					});
 				}
 			},
 			getRunLabel(option: number) {
@@ -524,7 +579,7 @@ export default mixins(
 				for (let i = 0; i <= this.maxOutputIndex; i++) {
 					itemsCount += this.getDataCount(option - 1, i);
 				}
-				const items = this.$locale.baseText(itemsCount === 1 ? 'ndv.output.item': 'ndv.output.items');
+				const items = this.$locale.baseText('ndv.output.items', {adjustToNumber: itemsCount});
 				const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : '';
 				return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex+1) + itemsLabel;
 			},
@@ -557,18 +612,16 @@ export default mixins(
 
 				return inputData.length;
 			},
-			openSettings() {
-				this.$emit('openSettings');
-			},
 			init() {
 				// Reset the selected output index every time another node gets selected
 				this.outputIndex = 0;
 				this.refreshDataSize();
-				if (this.displayMode === 'binary') {
+				this.closeBinaryDataDisplay();
-					this.closeBinaryDataDisplay();
+				if (this.binaryData.length > 0) {
-					if (this.binaryData.length === 0) {
+					this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
-						this.displayMode = 'table';
+				}
-					}
+				else if (this.displayMode === 'binary') {
+					this.$store.commit('ui/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
 				}
 			},
 			closeBinaryDataDisplay () {
@@ -671,7 +724,7 @@ export default mixins(
 				this.binaryDataDisplayData = {
 					node: this.node!.name,
 					runIndex: this.runIndex,
-					outputIndex: this.outputIndex,
+					outputIndex: this.currentOutputIndex,
 					index,
 					key,
 				};
@@ -760,7 +813,7 @@ export default mixins(
 				this.showData = false;
 
 				// Check how much data there is to display
-				const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
+				const inputData = this.getNodeInputData(this.node, this.runIndex, this.currentOutputIndex);
 
 				const offset = this.pageSize * (this.currentPage - 1);
 				const jsonItems = inputData.slice(offset, offset + this.pageSize).map(item => item.json);
@@ -772,6 +825,9 @@ export default mixins(
 					this.showData = true;
 				}
 			},
+			onRunIndexChange(run: number) {
+				this.$emit('runChange', run);
+			},
 		},
 		watch: {
 			node() {
@@ -780,8 +836,13 @@ export default mixins(
 			jsonData () {
 				this.refreshDataSize();
 			},
-			maxRunIndex () {
+			binaryData (newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
-				this.runIndex = Math.min(this.runIndex, this.maxRunIndex);
+				if (newData.length && !prevData.length && this.displayMode !== 'binary') {
+					this.switchToBinary();
+				}
+				else if (!newData.length && this.displayMode === 'binary') {
+					this.onDisplayModeChange('table');
+				}
 			},
 		},
 	});
@@ -798,7 +859,7 @@ export default mixins(
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: var(--spacing-s);
+	padding: var(--spacing-s) var(--spacing-s) var(--spacing-xl) var(--spacing-s);
 	text-align: center;
 
 	> * {
@@ -807,39 +868,11 @@ export default mixins(
 	}
 }
 
-.spinner {
-	* {
-		color: var(--color-primary);
-		min-height: 40px;
-		min-width: 40px;
-	}
-
-	display: flex;
-	justify-content: center;
-	margin-bottom: var(--spacing-s);
-}
-
-.title {
-	text-transform: uppercase;
-	color: var(--color-text-light);
-	letter-spacing: 3px;
-	font-weight: var(--font-weight-bold);
-	font-size: var(--font-size-s);
-}
-
-.titleSection {
-	display: flex;
-
-	> * {
-		margin-right: var(--spacing-2xs);
-	}
-}
-
 .container {
 	position: relative;
 	width: 100%;
 	height: 100%;
-	background-color: var(--color-background-light);
+	background-color: var(--color-background-base);
 	display: flex;
 	flex-direction: column;
 }
@@ -874,6 +907,11 @@ export default mixins(
 	padding-bottom: var(--spacing-3xl);
 }
 
+.errorDisplay {
+	composes: dataDisplay;
+	padding-right: var(--spacing-s);
+}
+
 .jsonDisplay {
 	composes: dataDisplay;
 	background-color: var(--color-background-base);
@@ -928,6 +966,11 @@ export default mixins(
 	max-width: 200px;
 	margin-left: var(--spacing-s);
 	margin-bottom: var(--spacing-s);
+	display: flex;
+
+	> * {
+		margin-right: var(--spacing-4xs);
+	}
 }
 
 .copyButton {
@@ -1015,8 +1058,21 @@ export default mixins(
 }
 
 .displayModes {
-	position: absolute;
+	display: flex;
-	right: var(--spacing-s);
+	justify-content: flex-end;
+	flex-grow: 1;
+}
+
+.spinner {
+	* {
+		color: var(--color-primary);
+		min-height: 40px;
+		min-width: 40px;
+	}
+
+	display: flex;
+	justify-content: center;
+	margin-bottom: var(--spacing-s);
 }
 
 </style>

packages/editor-ui/src/components/RunInfo.vue

@@ -0,0 +1,40 @@
+<template>
+	<n8n-info-tip type="tooltip" theme="info-light" tooltipPlacement="right" v-if="runMetadata">
+		<div>
+			<n8n-text :bold="true" size="small">{{
+				$locale.baseText('runData.startTime') + ':'
+			}}</n8n-text>
+			{{ runMetadata.startTime }}<br />
+			<n8n-text :bold="true" size="small">{{
+				$locale.baseText('runData.executionTime') + ':'
+			}}</n8n-text>
+			{{ runMetadata.executionTime }} {{ $locale.baseText('runData.ms') }}
+		</div>
+	</n8n-info-tip>
+</template>
+
+<script lang="ts">
+import { ITaskData } from 'n8n-workflow';
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		taskData: {}, // ITaskData
+	},
+
+	computed: {
+		runTaskData(): ITaskData {
+			return this.taskData as ITaskData;
+		},
+		runMetadata(): { executionTime: number; startTime: string } | null {
+			if (!this.runTaskData) {
+				return null;
+			}
+			return {
+				executionTime: this.runTaskData.executionTime,
+				startTime: new Date(this.runTaskData.startTime).toLocaleString(),
+			};
+		},
+	},
+});
+</script>

packages/editor-ui/src/components/mixins/nodeHelpers.ts

@@ -356,6 +356,10 @@ export const nodeHelpers = mixins(
 			},
 			// @ts-ignore
 			getNodeSubtitle (data, nodeType, workflow): string | undefined {
+				if (!data) {
+					return undefined;
+				}
+
 				if (data.notesInFlow) {
 					return data.notes;
 				}

packages/editor-ui/src/components/mixins/pushConnection.ts

@@ -263,10 +263,20 @@ export const pushConnection = mixins(
 					} else {
 						// Workflow did execute without a problem
 						this.$titleSet(workflow.name as string, 'IDLE');
-						this.$showMessage({
+
-							title: this.$locale.baseText('pushConnection.showMessage.title'),
+						const execution = this.$store.getters.getWorkflowExecution;
-							type: 'success',
+						if (execution && execution.executedNode) {
-						});
+							this.$showMessage({
+								title: this.$locale.baseText('pushConnection.nodeExecutedSuccessfully'),
+								type: 'success',
+							});
+						}
+						else {
+							this.$showMessage({
+								title: this.$locale.baseText('pushConnection.workflowExecutedSuccessfully'),
+								type: 'success',
+							});
+						}
 					}
 
 					// It does not push the runData as it got already pushed with each

packages/editor-ui/src/components/mixins/workflowRun.ts

@@ -176,6 +176,7 @@ export const workflowRun = mixins(
 					startedAt: new Date(),
 					stoppedAt: undefined,
 					workflowId: workflow.id,
+					executedNode: nodeName,
 					data: {
 						resultData: {
 							runData: newRunData || {},

packages/editor-ui/src/constants.ts

@@ -190,6 +190,7 @@ export const MODAL_CONFIRMED = 'confirmed';
 
 export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
 export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';
+export const BASE_NODE_SURVEY_URL = 'https://n8n-community.typeform.com/to/BvmzxqYv#nodename=';
 
 export const HIRING_BANNER = `
                                                                     //////

packages/editor-ui/src/modules/ui.ts

@@ -22,6 +22,7 @@ import Vue from 'vue';
 import { ActionContext, Module } from 'vuex';
 import {
 	IRootState,
+	IRunDataDisplayMode,
 	IUiState,
 } from '../Interface';
 
@@ -88,6 +89,16 @@ const module: Module<IUiState, IRootState> = {
 		sidebarMenuCollapsed: true,
 		isPageLoading: true,
 		currentView: '',
+		ndv: {
+			sessionId: '',
+			input: {
+				displayMode: 'table',
+			},
+			output: {
+				displayMode: 'table',
+			},
+		},
+		mainPanelPosition: 0.5,
 	},
 	getters: {
 		areExpressionsDisabled(state: IUiState) {
@@ -109,6 +120,13 @@ const module: Module<IUiState, IRootState> = {
 			return (name: string) => state.modals[name].mode;
 		},
 		sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
+		ndvSessionId: (state: IUiState): string => state.ndv.sessionId,
+		getPanelDisplayMode: (state: IUiState)  => {
+			return (panel: 'input' | 'output') => state.ndv[panel].displayMode;
+		},
+		inputPanelDispalyMode: (state: IUiState) => state.ndv.input.displayMode,
+		outputPanelDispalyMode: (state: IUiState) => state.ndv.output.displayMode,
+		mainPanelPosition: (state: IUiState) => state.mainPanelPosition,
 	},
 	mutations: {
 		setMode: (state: IUiState, params: {name: string, mode: string}) => {
@@ -143,6 +161,19 @@ const module: Module<IUiState, IRootState> = {
 		setCurrentView: (state: IUiState, currentView: string) => {
 			state.currentView = currentView;
 		},
+		setNDVSessionId: (state: IUiState) => {
+			Vue.set(state.ndv, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
+		},
+		resetNDVSessionId: (state: IUiState) => {
+			Vue.set(state.ndv, 'sessionId', '');
+		},
+		setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
+			Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
+		},
+		setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
+			state.mainPanelPosition = relativePosition;
+		},
+
 	},
 	actions: {
 		openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {

packages/editor-ui/src/n8n-theme.scss

@@ -189,22 +189,21 @@
 	}
 
 	i.el-select__caret {
-		color: var(--color-foreground-xlight);
+		color: var(--color-text-dark);
 	}
 	.el-input .el-input__inner {
 		&,
 		&:hover,
 		&:focus {
 			border-radius: 20px;
-			color: var(--color-foreground-xlight);
+			color: var(--color-text-dark);
-			font-weight: 600;
+			background-color: var(--color-background-base);
-			background-color: var(--color-primary);
+			border-color: var(--color-foreground-base);
-			border-color: var(--color-primary);
 			text-align: center;
 		}
 
 		&::placeholder {
-			color: var(--color-foreground-xlight);
+			color: var(--color-text-dark);
 			opacity: 1; /** Firefox */
 		}
 	}

packages/editor-ui/src/plugins/i18n/locales/en.json

@@ -298,14 +298,27 @@
 	"ndv.execute.executing": "Executing",
 	"ndv.execute.fetchEvent": "Fetch Event",
 	"ndv.execute.listenForEvent": "Listen For Event",
+	"ndv.featureRequest": "I wish this node would...",
+	"ndv.input": "Input",
+	"ndv.input.nodeDistance": "({count} node back) | ({count} nodes back)",
+	"ndv.input.noNodesFound": "No nodes found",
+	"ndv.input.parentNodes": "Parent nodes",
+	"ndv.input.tooMuchData.title": "Input data is huge",
+	"ndv.input.noOutputDataInBranch": "No input data in this branch",
+	"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
+	"ndv.input.noOutputData": "No data",
+	"ndv.input.noOutputData.executePrevious": "Execute previous nodes",
+	"ndv.input.noOutputData.title": "No input data yet",
+	"ndv.input.noOutputData.hint": "(From the earliest node that has no output data yet)",
+	"ndv.input.executingPrevious": "Executing previous nodes...",
+	"ndv.input.notConnected.title": "Wire me up",
+	"ndv.input.notConnected.message": "This node can only receive input data if you connect it to another node.",
+	"ndv.input.notConnected.learnMore": "Learn more",
 	"ndv.output": "Output",
 	"ndv.output.all": "all",
 	"ndv.output.branch": "Branch",
-	"ndv.output.emptyInput": "This input item is empty. {name} will still execute when it recieves an empty item.",
-	"ndv.output.emptyOutput": "This output item is empty.",
 	"ndv.output.executing": "Executing node...",
-	"ndv.output.item": "item",
+	"ndv.output.items": "item | items",
-	"ndv.output.items": "items",
 	"ndv.output.noOutputData.message": "n8n stops executing the workflow when a node has no output data. You can change this default behaviour via",
 	"ndv.output.noOutputData.message.settings": "Settings",
 	"ndv.output.noOutputData.message.settingsOption": "> “Always Output Data”.",
@@ -321,6 +334,7 @@
 	"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
 	"ndv.output.tooMuchData.title": "Output data is huge!",
 	"ndv.output.triggerEventNodeHint": "Listen for an event to output data",
+	"ndv.output.waitingToRun": "Waiting to execute...",
 	"ndv.title.cancel": "Cancel",
 	"ndv.title.rename": "Rename",
 	"ndv.title.renameNode": "Rename node",
@@ -576,9 +590,15 @@
 	"personalizationModal.whatDoesYourCompanyFocusOn": "Which services does your company focus on?",
 	"personalizationModal.whatKindOfCustomersDoYouServe": "What kind of customers do you serve?",
 	"personalizationModal.whichIndustriesIsYourCompanyIn": "Which industries is your company in?",
-	"pushConnection.showMessage.title": "Workflow executed successfully",
+	"pushConnection.nodeExecutedSuccessfully": "Node executed successfully",
+	"pushConnection.workflowExecutedSuccessfully": "Workflow executed successfully",
 	"pushConnectionTracker.cannotConnectToServer": "You have a connection issue or the server is down. <br />n8n should reconnect automatically once the issue is resolved.",
 	"pushConnectionTracker.connectionLost": "Connection lost",
+	"runData.emptyItemHint": "This is an item, but it's empty.",
+	"runData.switchToBinary.info": "This item only has",
+	"runData.switchToBinary.binary": "binary data",
+	"runData.linking.hint": "Link displayed input and output runs",
+	"runData.unlinking.hint": "Unlink displayed input and output runs",
 	"runData.binary": "Binary",
 	"runData.copyItemPath": "Copy Item Path",
 	"runData.copyParameterPath": "Copy Parameter Path",

packages/editor-ui/src/plugins/icons.ts

@@ -56,6 +56,8 @@ import {
 	faInfo,
 	faInfoCircle,
 	faKey,
+	faLink,
+	faLightbulb,
 	faMapSigns,
 	faNetworkWired,
 	faPause,
@@ -90,6 +92,7 @@ import {
 	faTimes,
 	faTrash,
 	faUndo,
+	faUnlink,
 	faUserCircle,
 	faUserFriends,
 	faUsers,
@@ -159,6 +162,8 @@ addIcon(faInbox);
 addIcon(faInfo);
 addIcon(faInfoCircle);
 addIcon(faKey);
+addIcon(faLink);
+addIcon(faLightbulb);
 addIcon(faMapSigns);
 addIcon(faNetworkWired);
 addIcon(faPause);
@@ -195,6 +200,7 @@ addIcon(faThLarge);
 addIcon(faTimes);
 addIcon(faTrash);
 addIcon(faUndo);
+addIcon(faUnlink);
 addIcon(faUserCircle);
 addIcon(faUserFriends);
 addIcon(faUsers);

packages/editor-ui/src/store.ts

@@ -437,6 +437,7 @@ export const store = new Vuex.Store({
 				state.stateIsDirty = true;
 			}
 			state.workflow.nodes.splice(0, state.workflow.nodes.length);
+			state.nodeMetadata = {};
 		},
 		updateNodeProperties (state, updateInformation: INodeUpdatePropertiesInformation) {
 			// Find the node that should be updated
@@ -657,6 +658,9 @@ export const store = new Vuex.Store({
 		},
 	},
 	getters: {
+		executedNode: (state): string | undefined => {
+			return state.workflowExecutionData? state.workflowExecutionData.executedNode: undefined;
+		},
 		activeCredentialType: (state): string | null => {
 			return state.activeCredentialType;
 		},

packages/editor-ui/src/views/NodeView.vue

@@ -58,7 +58,7 @@
 				</div>
 			</div>
 		</div>
-		<DataDisplay :renaming="renamingActive" @valueChanged="valueChanged"/>
+		<NodeDetailsView :renaming="renamingActive" @valueChanged="valueChanged"/>
 		<div
 			class="node-buttons-wrapper"
 			v-if="!createNodeActive && !isReadOnly"
@@ -161,11 +161,10 @@ import { newVersions } from '@/components/mixins/newVersions';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
-import DataDisplay from '@/components/DataDisplay.vue';
+import NodeDetailsView from '@/components/NodeDetailsView.vue';
 import Node from '@/components/Node.vue';
 import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
 import NodeSettings from '@/components/NodeSettings.vue';
-import RunData from '@/components/RunData.vue';
 import Sticky from '@/components/Sticky.vue';
 
 import * as CanvasHelpers from './canvasHelpers';
@@ -232,11 +231,10 @@ export default mixins(
 	.extend({
 		name: 'NodeView',
 		components: {
-			DataDisplay,
+			NodeDetailsView,
 			Node,
 			NodeCreator,
 			NodeSettings,
-			RunData,
 			Sticky,
 		},
 		errorCaptured: (err, vm, info) => {

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',
+				},
+			]);
+		});
+	});
 });