From 6e2809b490a78a88128c0ad9b6b93f93e8227a46 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 7 Nov 2024 15:29:02 +0100
Subject: [PATCH] refactor(editor): RunData components to composition API
 (no-changelog) (#11545)

---
 .../N8nRadioButtons/RadioButtons.vue          |   10 +-
 .../src/components/N8nTabs/Tabs.vue           |   16 +-
 .../src/components/N8nTree/Tree.stories.ts    |    1 +
 .../src/components/N8nTree/Tree.vue           |   30 +-
 packages/editor-ui/src/Interface.ts           |    4 +-
 .../editor-ui/src/components/InputPanel.vue   |  676 +++--
 .../src/components/NodeDetailsView.test.ts    |    8 +
 .../src/components/NodeDetailsView.vue        |    2 +-
 .../editor-ui/src/components/OutputPanel.vue  |   83 +-
 .../editor-ui/src/components/RunData.test.ts  |   72 +-
 packages/editor-ui/src/components/RunData.vue | 2434 ++++++++---------
 .../src/components/RunDataPinButton.vue       |   15 +-
 .../editor-ui/src/components/RunDataTable.vue |  763 +++---
 13 files changed, 2044 insertions(+), 2070 deletions(-)

diff --git a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
index 837260722b..b9f9a41ce2 100644
--- a/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
+++ b/packages/design-system/src/components/N8nRadioButtons/RadioButtons.vue
@@ -1,14 +1,14 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends string">
 import RadioButton from './RadioButton.vue';
 
 interface RadioOption {
 	label: string;
-	value: string;
+	value: Value;
 	disabled?: boolean;
 }
 
 interface RadioButtonsProps {
-	modelValue?: string;
+	modelValue?: Value;
 	options?: RadioOption[];
 	/** @default medium */
 	size?: 'small' | 'medium';
@@ -22,11 +22,11 @@ const props = withDefaults(defineProps<RadioButtonsProps>(), {
 });
 
 const emit = defineEmits<{
-	'update:modelValue': [value: string, e: MouseEvent];
+	'update:modelValue': [value: Value, e: MouseEvent];
 }>();
 
 const onClick = (
-	option: { label: string; value: string; disabled?: boolean },
+	option: { label: string; value: Value; disabled?: boolean },
 	event: MouseEvent,
 ) => {
 	if (props.disabled || option.disabled) {
diff --git a/packages/design-system/src/components/N8nTabs/Tabs.vue b/packages/design-system/src/components/N8nTabs/Tabs.vue
index 9b56e0cfe5..53e2a7da56 100644
--- a/packages/design-system/src/components/N8nTabs/Tabs.vue
+++ b/packages/design-system/src/components/N8nTabs/Tabs.vue
@@ -1,11 +1,11 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends string | number">
 import { onMounted, onUnmounted, ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import N8nIcon from '../N8nIcon';
 
 interface TabOptions {
-	value: string;
+	value: Value;
 	label?: string;
 	icon?: string;
 	href?: string;
@@ -15,7 +15,7 @@ interface TabOptions {
 }
 
 interface TabsProps {
-	modelValue?: string;
+	modelValue?: Value;
 	options?: TabOptions[];
 }
 
@@ -56,12 +56,12 @@ onUnmounted(() => {
 });
 
 const emit = defineEmits<{
-	tooltipClick: [tab: string, e: MouseEvent];
-	'update:modelValue': [tab: string];
+	tooltipClick: [tab: Value, e: MouseEvent];
+	'update:modelValue': [tab: Value];
 }>();
 
-const handleTooltipClick = (tab: string, event: MouseEvent) => emit('tooltipClick', tab, event);
-const handleTabClick = (tab: string) => emit('update:modelValue', tab);
+const handleTooltipClick = (tab: Value, event: MouseEvent) => emit('tooltipClick', tab, event);
+const handleTabClick = (tab: Value) => emit('update:modelValue', tab);
 
 const scroll = (left: number) => {
 	const container = tabs.value;
@@ -84,7 +84,7 @@ const scrollRight = () => scroll(50);
 		<div ref="tabs" :class="$style.tabs">
 			<div
 				v-for="option in options"
-				:id="option.value"
+				:id="option.value.toString()"
 				:key="option.value"
 				:class="{ [$style.alignRight]: option.align === 'right' }"
 			>
diff --git a/packages/design-system/src/components/N8nTree/Tree.stories.ts b/packages/design-system/src/components/N8nTree/Tree.stories.ts
index e0f9713065..733cc8602d 100644
--- a/packages/design-system/src/components/N8nTree/Tree.stories.ts
+++ b/packages/design-system/src/components/N8nTree/Tree.stories.ts
@@ -7,6 +7,7 @@ export default {
 	component: N8nTree,
 };
 
+// @ts-expect-error Storybook incorrect slot types
 export const Default: StoryFn = (args, { argTypes }) => ({
 	setup: () => ({ args }),
 	props: Object.keys(argTypes),
diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index b78c2fee02..756fd627ff 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,19 +1,16 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="Value extends unknown = unknown">
 import { computed, useCssModule } from 'vue';
 
 interface TreeProps {
-	value?: Record<string, unknown>;
+	value?: Record<string, Value>;
 	path?: Array<string | number>;
 	depth?: number;
 	nodeClass?: string;
 }
 
 defineSlots<{
-	[key: string]: (props: {
-		label?: string;
-		path?: Array<string | number>;
-		value?: unknown;
-	}) => never;
+	label(props: { label: string; path: Array<string | number> }): never;
+	value(props: { value: Value }): never;
 }>();
 
 defineOptions({ name: 'N8nTree' });
@@ -29,11 +26,11 @@ const classes = computed((): Record<string, boolean> => {
 	return { [props.nodeClass]: !!props.nodeClass, [$style.indent]: props.depth > 0 };
 });
 
-const isObject = (data: unknown): data is Record<string, unknown> => {
+const isObject = (data: unknown): data is Record<string, Value> => {
 	return typeof data === 'object' && data !== null;
 };
 
-const isSimple = (data: unknown): boolean => {
+const isSimple = (data: Value): boolean => {
 	if (data === null || data === undefined) {
 		return true;
 	}
@@ -70,16 +67,21 @@ const getPath = (key: string): Array<string | number> => {
 			<div v-else>
 				<slot v-if="$slots.label" name="label" :label="label" :path="getPath(label)" />
 				<span v-else>{{ label }}</span>
-				<n8n-tree
+				<N8nTree
+					v-if="isObject(value[label])"
 					:path="getPath(label)"
 					:depth="depth + 1"
-					:value="value[label] as Record<string, unknown>"
+					:value="value[label]"
 					:node-class="nodeClass"
 				>
-					<template v-for="(_, name) in $slots" #[name]="data">
-						<slot :name="name" v-bind="data"></slot>
+					<template v-if="$slots.label" #label="data">
+						<slot name="label" v-bind="data" />
 					</template>
-				</n8n-tree>
+
+					<template v-if="$slots.value" #value="data">
+						<slot name="value" v-bind="data" />
+					</template>
+				</N8nTree>
 			</div>
 		</div>
 	</div>
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index aec2889070..b4e8f7cc4b 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1129,8 +1129,8 @@ export interface IInviteResponse {
 	error?: string;
 }
 
-export interface ITab {
-	value: string | number;
+export interface ITab<Value extends string | number = string | number> {
+	value: Value;
 	label?: string;
 	href?: string;
 	icon?: string;
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 36a191eaec..7f42af92f6 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -1,5 +1,5 @@
-<script lang="ts">
-import type { INodeUi } from '@/Interface';
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n';
 import {
 	CRON_NODE_TYPE,
 	INTERVAL_NODE_TYPE,
@@ -10,331 +10,326 @@ import { useNDVStore } from '@/stores/ndv.store';
 import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useUIStore } from '@/stores/ui.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import type {
-	IConnectedNode,
-	INodeInputConfiguration,
-	INodeOutputConfiguration,
-	INodeTypeDescription,
-	Workflow,
-} from 'n8n-workflow';
+import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { uniqBy } from 'lodash-es';
+import type { INodeInputConfiguration, INodeOutputConfiguration, Workflow } from 'n8n-workflow';
 import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
-import { mapStores } from 'pinia';
-import { defineComponent, type PropType } from 'vue';
+import { computed, ref, watch } from 'vue';
 import InputNodeSelect from './InputNodeSelect.vue';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import RunData from './RunData.vue';
 import WireMeUp from './WireMeUp.vue';
-import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { N8nRadioButtons, N8nTooltip, N8nText } from 'n8n-design-system';
+import { storeToRefs } from 'pinia';
 
 type MappingMode = 'debugging' | 'mapping';
 
-export default defineComponent({
-	name: 'InputPanel',
-	components: { RunData, NodeExecuteButton, WireMeUp, InputNodeSelect },
-	props: {
-		currentNodeName: {
-			type: String,
-		},
-		runIndex: {
-			type: Number,
-			required: true,
-		},
-		linkedRuns: {
-			type: Boolean,
-		},
-		workflow: {
-			type: Object as PropType<Workflow>,
-			required: true,
-		},
-		canLinkRuns: {
-			type: Boolean,
-		},
-		pushRef: {
-			type: String,
-			required: true,
-		},
-		readOnly: {
-			type: Boolean,
-		},
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-		isPaneActive: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [
-		'itemHover',
-		'tableMounted',
-		'linkRun',
-		'unlinkRun',
-		'runChange',
-		'search',
-		'changeInputNode',
-		'execute',
-		'activatePane',
-	],
-	data() {
-		return {
-			showDraggableHintWithDelay: false,
-			draggableHintShown: false,
-			inputMode: 'debugging' as MappingMode,
-			mappedNode: null as string | null,
-			inputModes: [
-				{ value: 'mapping', label: this.$locale.baseText('ndv.input.mapping') },
-				{ value: 'debugging', label: this.$locale.baseText('ndv.input.debugging') },
-			],
-		};
-	},
-	computed: {
-		...mapStores(useNodeTypesStore, useNDVStore, useWorkflowsStore, useUIStore),
-		focusedMappableInput(): string {
-			return this.ndvStore.focusedMappableInput;
-		},
-		isUserOnboarded(): boolean {
-			return this.ndvStore.isMappingOnboarded;
-		},
-		isMappingMode(): boolean {
-			return this.isActiveNodeConfig && this.inputMode === 'mapping';
-		},
-		showDraggableHint(): boolean {
-			const toIgnore = [
-				START_NODE_TYPE,
-				MANUAL_TRIGGER_NODE_TYPE,
-				CRON_NODE_TYPE,
-				INTERVAL_NODE_TYPE,
-			];
-			if (!this.currentNode || toIgnore.includes(this.currentNode.type)) {
-				return false;
-			}
+type Props = {
+	runIndex: number;
+	workflow: Workflow;
+	pushRef: string;
+	currentNodeName?: string;
+	canLinkRuns?: boolean;
+	linkedRuns?: boolean;
+	readOnly?: boolean;
+	isProductionExecutionPreview?: boolean;
+	isPaneActive?: boolean;
+};
 
-			return !!this.focusedMappableInput && !this.isUserOnboarded;
-		},
-		isActiveNodeConfig(): boolean {
-			let inputs = this.activeNodeType?.inputs ?? [];
-			let outputs = this.activeNodeType?.outputs ?? [];
-			if (this.activeNode !== null && this.workflow !== null) {
-				const node = this.workflow.getNode(this.activeNode.name);
-				inputs = NodeHelpers.getNodeInputs(this.workflow, node!, this.activeNodeType!);
-				outputs = NodeHelpers.getNodeOutputs(this.workflow, node!, this.activeNodeType!);
-			} else {
-				// If we can not figure out the node type we set no outputs
-				if (!Array.isArray(inputs)) {
-					inputs = [] as NodeConnectionType[];
-				}
-				if (!Array.isArray(outputs)) {
-					outputs = [] as NodeConnectionType[];
-				}
-			}
-
-			if (
-				inputs.length === 0 ||
-				(inputs.every((input) => this.filterOutConnectionType(input, NodeConnectionType.Main)) &&
-					outputs.find((output) => this.filterOutConnectionType(output, NodeConnectionType.Main)))
-			) {
-				return true;
-			}
-
-			return false;
-		},
-		isMappingEnabled(): boolean {
-			if (this.readOnly) return false;
-
-			// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
-			if (this.isActiveNodeConfig) return this.isMappingMode && this.mappedNode !== null;
-
-			return true;
-		},
-		isExecutingPrevious(): boolean {
-			if (!this.workflowRunning) {
-				return false;
-			}
-			const triggeredNode = this.workflowsStore.executedNode;
-			const executingNode = this.workflowsStore.executingNode;
-
-			if (
-				this.activeNode &&
-				triggeredNode === this.activeNode.name &&
-				!this.workflowsStore.isNodeExecuting(this.activeNode.name)
-			) {
-				return true;
-			}
-
-			if (executingNode.length || triggeredNode) {
-				return !!this.parentNodes.find(
-					(node) => this.workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
-				);
-			}
-			return false;
-		},
-		workflowRunning(): boolean {
-			return this.uiStore.isActionActive['workflowRunning'];
-		},
-
-		activeNode(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-
-		rootNode(): string {
-			const workflow = this.workflow;
-			const rootNodes = workflow.getChildNodes(this.activeNode?.name ?? '', 'ALL');
-
-			return rootNodes[0];
-		},
-		rootNodesParents() {
-			const workflow = this.workflow;
-			const parentNodes = [...workflow.getParentNodes(this.rootNode, NodeConnectionType.Main)]
-				.reverse()
-				.map((parent): IConnectedNode => ({ name: parent, depth: 1, indicies: [] }));
-
-			return parentNodes;
-		},
-		currentNode(): INodeUi | null {
-			if (this.isActiveNodeConfig) {
-				// if we're mapping node we want to show the output of the mapped node
-				if (this.mappedNode) {
-					return this.workflowsStore.getNodeByName(this.mappedNode);
-				}
-
-				// in debugging mode data does get set manually and is only for debugging
-				// so we want to force the node to be the active node to make sure we show the correct data
-				return this.activeNode;
-			}
-
-			return this.workflowsStore.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 = this.workflow.getParentNodesByDepth(this.activeNode.name);
-
-			return nodes.filter(
-				({ name }, i) =>
-					this.activeNode &&
-					name !== this.activeNode.name &&
-					nodes.findIndex((node) => node.name === name) === i,
-			);
-		},
-		currentNodeDepth(): number {
-			const node = this.parentNodes.find(
-				(parent) => this.currentNode && parent.name === this.currentNode.name,
-			);
-			return node ? node.depth : -1;
-		},
-		activeNodeType(): INodeTypeDescription | null {
-			if (!this.activeNode) return null;
-
-			return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
-		},
-		isMultiInputNode(): boolean {
-			return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
-		},
-		waitingMessage(): string {
-			return waitingNodeTooltip();
-		},
-	},
-	watch: {
-		inputMode: {
-			handler(val) {
-				this.onRunIndexChange(-1);
-				if (val === 'mapping') {
-					this.onUnlinkRun();
-					this.mappedNode = this.rootNodesParents[0]?.name ?? null;
-				} else {
-					this.mappedNode = null;
-				}
-			},
-			immediate: true,
-		},
-		showDraggableHint(curr: boolean, prev: boolean) {
-			if (curr && !prev) {
-				setTimeout(() => {
-					if (this.draggableHintShown) {
-						return;
-					}
-					this.showDraggableHintWithDelay = this.showDraggableHint;
-					if (this.showDraggableHintWithDelay) {
-						this.draggableHintShown = true;
-
-						this.$telemetry.track('User viewed data mapping tooltip', {
-							type: 'unexecuted input pane',
-						});
-					}
-				}, 1000);
-			} else if (!curr) {
-				this.showDraggableHintWithDelay = false;
-			}
-		},
-	},
-	methods: {
-		filterOutConnectionType(
-			item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
-			type: NodeConnectionType,
-		) {
-			if (!item) return false;
-
-			return typeof item === 'string' ? item !== type : item.type !== type;
-		},
-		onInputModeChange(val: MappingMode) {
-			this.inputMode = val;
-		},
-		onMappedNodeSelected(val: string) {
-			this.mappedNode = val;
-
-			this.onRunIndexChange(0);
-			this.onUnlinkRun();
-		},
-		onNodeExecute() {
-			this.$emit('execute');
-			if (this.activeNode) {
-				this.$telemetry.track('User clicked ndv button', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: 'input',
-					type: 'executePrevious',
-				});
-			}
-		},
-		onRunIndexChange(run: number) {
-			this.$emit('runChange', run);
-		},
-		onLinkRun() {
-			this.$emit('linkRun');
-		},
-		onUnlinkRun() {
-			this.$emit('unlinkRun');
-		},
-		onInputNodeChange(value: string) {
-			const index = this.parentNodes.findIndex((node) => node.name === value) + 1;
-			this.$emit('changeInputNode', value, index);
-		},
-		onConnectionHelpClick() {
-			if (this.activeNode) {
-				this.$telemetry.track('User clicked ndv link', {
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: 'input',
-					type: 'not-connected-help',
-				});
-			}
-		},
-		activatePane() {
-			this.$emit('activatePane');
-		},
-	},
+const props = withDefaults(defineProps<Props>(), {
+	currentNodeName: '',
+	canLinkRuns: false,
+	readOnly: false,
+	isProductionExecutionPreview: false,
+	isPaneActive: false,
 });
+
+const emit = defineEmits<{
+	itemHover: [
+		{
+			outputIndex: number;
+			itemIndex: number;
+		} | null,
+	];
+	tableMounted: [
+		{
+			avgRowHeight: number;
+		},
+	];
+	linkRun: [];
+	unlinkRun: [];
+	runChange: [runIndex: number];
+	search: [search: string];
+	changeInputNode: [nodeName: string, index: number];
+	execute: [];
+	activatePane: [];
+}>();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const showDraggableHintWithDelay = ref(false);
+const draggableHintShown = ref(false);
+const inputMode = ref<MappingMode>('debugging');
+const mappedNode = ref<string | null>(null);
+const inputModes = [
+	{ value: 'mapping', label: i18n.baseText('ndv.input.mapping') },
+	{ value: 'debugging', label: i18n.baseText('ndv.input.debugging') },
+];
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+const uiStore = useUIStore();
+
+const {
+	activeNode,
+	focusedMappableInput,
+	isMappingOnboarded: isUserOnboarded,
+} = storeToRefs(ndvStore);
+const isMappingMode = computed(() => isActiveNodeConfig.value && inputMode.value === 'mapping');
+const showDraggableHint = computed(() => {
+	const toIgnore = [START_NODE_TYPE, MANUAL_TRIGGER_NODE_TYPE, CRON_NODE_TYPE, INTERVAL_NODE_TYPE];
+	if (!currentNode.value || toIgnore.includes(currentNode.value.type)) {
+		return false;
+	}
+
+	return !!focusedMappableInput.value && !isUserOnboarded.value;
+});
+
+const isActiveNodeConfig = computed(() => {
+	let inputs = activeNodeType.value?.inputs ?? [];
+	let outputs = activeNodeType.value?.outputs ?? [];
+
+	if (props.workflow && activeNode.value) {
+		const node = props.workflow.getNode(activeNode.value.name);
+
+		if (node && activeNodeType.value) {
+			inputs = NodeHelpers.getNodeInputs(props.workflow, node, activeNodeType.value);
+			outputs = NodeHelpers.getNodeOutputs(props.workflow, node, activeNodeType.value);
+		}
+	}
+
+	// If we can not figure out the node type we set no outputs
+	if (!Array.isArray(inputs)) {
+		inputs = [];
+	}
+
+	if (!Array.isArray(outputs)) {
+		outputs = [];
+	}
+
+	return (
+		inputs.length === 0 ||
+		(inputs.every((input) => filterOutConnectionType(input, NodeConnectionType.Main)) &&
+			outputs.find((output) => filterOutConnectionType(output, NodeConnectionType.Main)))
+	);
+});
+
+const isMappingEnabled = computed(() => {
+	if (props.readOnly) return false;
+
+	// Mapping is only enabled in mapping mode for config nodes and if node to map is selected
+	if (isActiveNodeConfig.value) return isMappingMode.value && mappedNode.value !== null;
+
+	return true;
+});
+const isExecutingPrevious = computed(() => {
+	if (!workflowRunning.value) {
+		return false;
+	}
+	const triggeredNode = workflowsStore.executedNode;
+	const executingNode = workflowsStore.executingNode;
+
+	if (
+		activeNode.value &&
+		triggeredNode === activeNode.value.name &&
+		!workflowsStore.isNodeExecuting(activeNode.value.name)
+	) {
+		return true;
+	}
+
+	if (executingNode.length || triggeredNode) {
+		return !!parentNodes.value.find(
+			(node) => workflowsStore.isNodeExecuting(node.name) || node.name === triggeredNode,
+		);
+	}
+	return false;
+});
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
+
+const rootNode = computed(() => {
+	if (!activeNode.value) return null;
+
+	return props.workflow.getChildNodes(activeNode.value.name, 'ALL').at(0) ?? null;
+});
+
+const rootNodesParents = computed(() => {
+	if (!rootNode.value) return [];
+	return props.workflow.getParentNodesByDepth(rootNode.value);
+});
+
+const currentNode = computed(() => {
+	if (isActiveNodeConfig.value) {
+		// if we're mapping node we want to show the output of the mapped node
+		if (mappedNode.value) {
+			return workflowsStore.getNodeByName(mappedNode.value);
+		}
+
+		// in debugging mode data does get set manually and is only for debugging
+		// so we want to force the node to be the active node to make sure we show the correct data
+		return activeNode.value;
+	}
+
+	return workflowsStore.getNodeByName(props.currentNodeName ?? '');
+});
+
+const connectedCurrentNodeOutputs = computed(() => {
+	const search = parentNodes.value.find(({ name }) => name === props.currentNodeName);
+	return search?.indicies;
+});
+const parentNodes = computed(() => {
+	if (!activeNode.value) {
+		return [];
+	}
+
+	const parents = props.workflow
+		.getParentNodesByDepth(activeNode.value.name)
+		.filter((parent) => parent.name !== activeNode.value?.name);
+	return uniqBy(parents, (parent) => parent.name);
+});
+
+const currentNodeDepth = computed(() => {
+	const node = parentNodes.value.find(
+		(parent) => currentNode.value && parent.name === currentNode.value.name,
+	);
+	return node?.depth ?? -1;
+});
+
+const activeNodeType = computed(() => {
+	if (!activeNode.value) return null;
+	return nodeTypesStore.getNodeType(activeNode.value.type, activeNode.value.typeVersion);
+});
+
+const waitingMessage = computed(() => waitingNodeTooltip());
+
+watch(
+	inputMode,
+	(mode) => {
+		onRunIndexChange(-1);
+		if (mode === 'mapping') {
+			onUnlinkRun();
+			mappedNode.value = rootNodesParents.value[0]?.name ?? null;
+		} else {
+			mappedNode.value = null;
+		}
+	},
+	{ immediate: true },
+);
+
+watch(showDraggableHint, (curr, prev) => {
+	if (curr && !prev) {
+		setTimeout(() => {
+			if (draggableHintShown.value) {
+				return;
+			}
+			showDraggableHintWithDelay.value = showDraggableHint.value;
+			if (showDraggableHintWithDelay.value) {
+				draggableHintShown.value = true;
+
+				telemetry.track('User viewed data mapping tooltip', {
+					type: 'unexecuted input pane',
+				});
+			}
+		}, 1000);
+	} else if (!curr) {
+		showDraggableHintWithDelay.value = false;
+	}
+});
+
+function filterOutConnectionType(
+	item: NodeConnectionType | INodeOutputConfiguration | INodeInputConfiguration,
+	type: NodeConnectionType,
+) {
+	if (!item) return false;
+
+	return typeof item === 'string' ? item !== type : item.type !== type;
+}
+
+function onInputModeChange(val: string) {
+	inputMode.value = val as MappingMode;
+}
+
+function onMappedNodeSelected(val: string) {
+	mappedNode.value = val;
+
+	onRunIndexChange(0);
+	onUnlinkRun();
+}
+
+function onNodeExecute() {
+	emit('execute');
+	if (activeNode.value) {
+		telemetry.track('User clicked ndv button', {
+			node_type: activeNode.value.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: 'input',
+			type: 'executePrevious',
+		});
+	}
+}
+
+function onRunIndexChange(run: number) {
+	emit('runChange', run);
+}
+
+function onLinkRun() {
+	emit('linkRun');
+}
+
+function onUnlinkRun() {
+	emit('unlinkRun');
+}
+
+function onSearch(search: string) {
+	emit('search', search);
+}
+
+function onItemHover(
+	item: {
+		outputIndex: number;
+		itemIndex: number;
+	} | null,
+) {
+	emit('itemHover', item);
+}
+
+function onTableMounted(event: { avgRowHeight: number }) {
+	emit('tableMounted', event);
+}
+
+function onInputNodeChange(value: string) {
+	const index = parentNodes.value.findIndex((node) => node.name === value) + 1;
+	emit('changeInputNode', value, index);
+}
+
+function onConnectionHelpClick() {
+	if (activeNode.value) {
+		telemetry.track('User clicked ndv link', {
+			node_type: activeNode.value.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: 'input',
+			type: 'not-connected-help',
+		});
+	}
+}
+
+function activatePane() {
+	emit('activatePane');
+}
 </script>
 
 <template>
@@ -358,18 +353,19 @@ export default defineComponent({
 		pane-type="input"
 		data-test-id="ndv-input-panel"
 		@activate-pane="activatePane"
-		@item-hover="$emit('itemHover', $event)"
+		@item-hover="onItemHover"
 		@link-run="onLinkRun"
 		@unlink-run="onUnlinkRun"
 		@run-change="onRunIndexChange"
-		@table-mounted="$emit('tableMounted', $event)"
-		@search="$emit('search', $event)"
+		@table-mounted="onTableMounted"
+		@search="onSearch"
 	>
 		<template #header>
 			<div :class="$style.titleSection">
 				<span :class="$style.title">{{ $locale.baseText('ndv.input') }}</span>
-				<n8n-radio-buttons
+				<N8nRadioButtons
 					v-if="isActiveNodeConfig && !readOnly"
+					data-test-id="input-panel-mode"
 					:options="inputModes"
 					:model-value="inputMode"
 					@update:model-value="onInputModeChange"
@@ -405,10 +401,10 @@ export default defineComponent({
 				v-if="(isActiveNodeConfig && rootNode) || parentNodes.length"
 				:class="$style.noOutputData"
 			>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
-				}}</n8n-text>
-				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
+				}}</N8nText>
+				<N8nTooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
 					<template #content>
 						<div
 							v-n8n-html="
@@ -422,25 +418,25 @@ export default defineComponent({
 						type="secondary"
 						hide-icon
 						:transparent="true"
-						:node-name="isActiveNodeConfig ? rootNode : (currentNodeName ?? '')"
+						:node-name="(isActiveNodeConfig ? rootNode : currentNodeName) ?? ''"
 						:label="$locale.baseText('ndv.input.noOutputData.executePrevious')"
 						telemetry-source="inputs"
 						data-test-id="execute-previous-node"
 						@execute="onNodeExecute"
 					/>
-				</n8n-tooltip>
-				<n8n-text v-if="!readOnly" tag="div" size="small">
+				</N8nTooltip>
+				<N8nText v-if="!readOnly" tag="div" size="small">
 					{{ $locale.baseText('ndv.input.noOutputData.hint') }}
-				</n8n-text>
+				</N8nText>
 			</div>
 			<div v-else :class="$style.notConnected">
 				<div>
 					<WireMeUp />
 				</div>
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.notConnected.title')
-				}}</n8n-text>
-				<n8n-text tag="div">
+				}}</N8nText>
+				<N8nText tag="div">
 					{{ $locale.baseText('ndv.input.notConnected.message') }}
 					<a
 						href="https://docs.n8n.io/workflows/connections/"
@@ -449,29 +445,29 @@ export default defineComponent({
 					>
 						{{ $locale.baseText('ndv.input.notConnected.learnMore') }}
 					</a>
-				</n8n-text>
+				</N8nText>
 			</div>
 		</template>
 
 		<template #node-waiting>
-			<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text>
-			<n8n-text v-n8n-html="waitingMessage"></n8n-text>
+			<N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
+			<N8nText v-n8n-html="waitingMessage"></N8nText>
 		</template>
 
 		<template #no-output-data>
-			<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+			<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 				$locale.baseText('ndv.input.noOutputData')
-			}}</n8n-text>
+			}}</N8nText>
 		</template>
 
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
+				}}</N8nText>
+				<N8nText>
 					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
+				</N8nText>
 			</div>
 		</template>
 	</RunData>
diff --git a/packages/editor-ui/src/components/NodeDetailsView.test.ts b/packages/editor-ui/src/components/NodeDetailsView.test.ts
index 65caf45cc9..fe7ec2ce31 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.test.ts
+++ b/packages/editor-ui/src/components/NodeDetailsView.test.ts
@@ -16,6 +16,14 @@ import { setupServer } from '@/__tests__/server';
 import { defaultNodeDescriptions, mockNodes } from '@/__tests__/mocks';
 import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
 
+vi.mock('vue-router', () => {
+	return {
+		useRouter: () => ({}),
+		useRoute: () => ({ meta: {} }),
+		RouterLink: vi.fn(),
+	};
+});
+
 async function createPiniaWithActiveNode() {
 	const node = mockNodes[0];
 	const workflow = mock<IWorkflowDb>({
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 8deda08ccf..bf17d59b5f 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -387,7 +387,7 @@ const onWorkflowActivate = () => {
 	}, 1000);
 };
 
-const onOutputItemHover = (e: { itemIndex: number; outputIndex: number }) => {
+const onOutputItemHover = (e: { itemIndex: number; outputIndex: number } | null) => {
 	if (e === null || !activeNode.value || !isPairedItemHoveringEnabled.value) {
 		ndvStore.setHoveringItem(null);
 		return;
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index eb636c4132..10d87eb810 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -15,10 +15,11 @@ import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { useI18n } from '@/composables/useI18n';
 import { waitingNodeTooltip } from '@/utils/executionUtils';
+import { N8nRadioButtons, N8nText } from 'n8n-design-system';
 
 // Types
 
-type RunDataRef = InstanceType<typeof RunData> | null;
+type RunDataRef = InstanceType<typeof RunData>;
 
 const OUTPUT_TYPE = {
 	REGULAR: 'regular',
@@ -55,7 +56,7 @@ const emit = defineEmits<{
 	runChange: [number];
 	activatePane: [];
 	tableMounted: [{ avgRowHeight: number }];
-	itemHover: [{ itemIndex: number; outputIndex: number }];
+	itemHover: [item: { itemIndex: number; outputIndex: number } | null];
 	search: [string];
 	openSettings: [];
 }>();
@@ -87,7 +88,7 @@ const outputTypes = ref([
 	{ label: i18n.baseText('ndv.output.outType.regular'), value: OUTPUT_TYPE.REGULAR },
 	{ label: i18n.baseText('ndv.output.outType.logs'), value: OUTPUT_TYPE.LOGS },
 ]);
-const runDataRef = ref<RunDataRef>(null);
+const runDataRef = ref<RunDataRef>();
 
 // Computed
 
@@ -127,9 +128,7 @@ const isNodeRunning = computed(() => {
 	return workflowRunning.value && !!node.value && workflowsStore.isNodeExecuting(node.value.name);
 });
 
-const workflowRunning = computed(() => {
-	return uiStore.isActionActive['workflowRunning'];
-});
+const workflowRunning = computed(() => uiStore.isActionActive.workflowRunning);
 
 const workflowExecution = computed(() => {
 	return workflowsStore.getWorkflowExecution;
@@ -253,8 +252,8 @@ const onRunIndexChange = (run: number) => {
 	emit('runChange', run);
 };
 
-const onUpdateOutputMode = (outputMode: OutputType) => {
-	if (outputMode === OUTPUT_TYPE.LOGS) {
+const onUpdateOutputMode = (newOutputMode: OutputType) => {
+	if (newOutputMode === OUTPUT_TYPE.LOGS) {
 		ndvEventBus.emit('setPositionByName', 'minLeft');
 	} else {
 		ndvEventBus.emit('setPositionByName', 'initial');
@@ -288,10 +287,10 @@ const activatePane = () => {
 		:run-index="runIndex"
 		:linked-runs="linkedRuns"
 		:can-link-runs="canLinkRuns"
-		:too-much-data-title="$locale.baseText('ndv.output.tooMuchData.title')"
-		:no-data-in-branch-message="$locale.baseText('ndv.output.noOutputDataInBranch')"
+		:too-much-data-title="i18n.baseText('ndv.output.tooMuchData.title')"
+		:no-data-in-branch-message="i18n.baseText('ndv.output.noOutputDataInBranch')"
 		:is-executing="isNodeRunning"
-		:executing-message="$locale.baseText('ndv.output.executing')"
+		:executing-message="i18n.baseText('ndv.output.executing')"
 		:push-ref="pushRef"
 		:block-u-i="blockUI"
 		:is-production-execution-preview="isProductionExecutionPreview"
@@ -310,15 +309,15 @@ const activatePane = () => {
 		<template #header>
 			<div :class="$style.titleSection">
 				<template v-if="hasAiMetadata">
-					<n8n-radio-buttons
-						data-test-id="ai-output-mode-select"
+					<N8nRadioButtons
 						v-model="outputMode"
+						data-test-id="ai-output-mode-select"
 						:options="outputTypes"
 						@update:model-value="onUpdateOutputMode"
 					/>
 				</template>
 				<span v-else :class="$style.title">
-					{{ $locale.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
+					{{ i18n.baseText(outputPanelEditMode.enabled ? 'ndv.output.edit' : 'ndv.output') }}
 				</span>
 				<RunInfo
 					v-if="hasNodeRun && !pinnedData.hasData.value && runsCount === 1"
@@ -331,42 +330,40 @@ const activatePane = () => {
 		</template>
 
 		<template #node-not-run>
-			<n8n-text v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
-				$locale.baseText('ndv.output.waitingToRun')
-			}}</n8n-text>
-			<n8n-text v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
+			<N8nText v-if="workflowRunning && !isTriggerNode" data-test-id="ndv-output-waiting">{{
+				i18n.baseText('ndv.output.waitingToRun')
+			}}</N8nText>
+			<N8nText v-if="!workflowRunning" data-test-id="ndv-output-run-node-hint">
 				<template v-if="isSubNodeType">
-					{{ $locale.baseText('ndv.output.runNodeHintSubNode') }}
+					{{ i18n.baseText('ndv.output.runNodeHintSubNode') }}
 				</template>
 				<template v-else>
-					{{ $locale.baseText('ndv.output.runNodeHint') }}
+					{{ i18n.baseText('ndv.output.runNodeHint') }}
 					<span v-if="canPinData" @click="insertTestData">
 						<br />
-						{{ $locale.baseText('generic.or') }}
-						<n8n-text tag="a" size="medium" color="primary">
-							{{ $locale.baseText('ndv.output.insertTestData') }}
-						</n8n-text>
+						{{ i18n.baseText('generic.or') }}
+						<N8nText tag="a" size="medium" color="primary">
+							{{ i18n.baseText('ndv.output.insertTestData') }}
+						</N8nText>
 					</span>
 				</template>
-			</n8n-text>
+			</N8nText>
 		</template>
 
 		<template #node-waiting>
-			<n8n-text :bold="true" color="text-dark" size="large">Waiting for input</n8n-text>
-			<n8n-text v-n8n-html="waitingNodeTooltip()"></n8n-text>
+			<N8nText :bold="true" color="text-dark" size="large">Waiting for input</N8nText>
+			<N8nText v-n8n-html="waitingNodeTooltip()"></N8nText>
 		</template>
 
 		<template #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>
+			<N8nText :bold="true" color="text-dark" size="large">{{
+				i18n.baseText('ndv.output.noOutputData.title')
+			}}</N8nText>
+			<N8nText>
+				{{ i18n.baseText('ndv.output.noOutputData.message') }}
+				<a @click="openSettings">{{ i18n.baseText('ndv.output.noOutputData.message.settings') }}</a>
+				{{ i18n.baseText('ndv.output.noOutputData.message.settingsOption') }}
+			</N8nText>
 		</template>
 
 		<template v-if="outputMode === 'logs' && node" #content>
@@ -375,12 +372,12 @@ const activatePane = () => {
 
 		<template #recovered-artificial-output-data>
 			<div :class="$style.recoveredOutputData">
-				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
-					$locale.baseText('executionDetails.executionFailed.recoveredNodeTitle')
-				}}</n8n-text>
-				<n8n-text>
-					{{ $locale.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
-				</n8n-text>
+				<N8nText tag="div" :bold="true" color="text-dark" size="large">{{
+					i18n.baseText('executionDetails.executionFailed.recoveredNodeTitle')
+				}}</N8nText>
+				<N8nText>
+					{{ i18n.baseText('executionDetails.executionFailed.recoveredNodeMessage') }}
+				</N8nText>
 			</div>
 		</template>
 
diff --git a/packages/editor-ui/src/components/RunData.test.ts b/packages/editor-ui/src/components/RunData.test.ts
index 042062a9c1..d818159b57 100644
--- a/packages/editor-ui/src/components/RunData.test.ts
+++ b/packages/editor-ui/src/components/RunData.test.ts
@@ -1,16 +1,24 @@
-import { waitFor } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
-import { createTestingPinia } from '@pinia/testing';
-import { merge } from 'lodash-es';
-import RunData from '@/components/RunData.vue';
-import { SET_NODE_TYPE, STORES, VIEWS } from '@/constants';
-import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import { createTestWorkflowObject, defaultNodeDescriptions } from '@/__tests__/mocks';
 import { createComponentRenderer } from '@/__tests__/render';
+import { SETTINGS_STORE_DEFAULT_STATE } from '@/__tests__/utils';
+import RunData from '@/components/RunData.vue';
+import { SET_NODE_TYPE, STORES } from '@/constants';
 import type { INodeUi, IRunDataDisplayMode, NodePanelType } from '@/Interface';
 import { useWorkflowsStore } from '@/stores/workflows.store';
-import { setActivePinia } from 'pinia';
-import { defaultNodeTypes } from '@/__tests__/mocks';
+import { createTestingPinia } from '@pinia/testing';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
 import type { INodeExecutionData } from 'n8n-workflow';
+import { setActivePinia } from 'pinia';
+import { useNodeTypesStore } from '../stores/nodeTypes.store';
+
+vi.mock('vue-router', () => {
+	return {
+		useRouter: () => ({}),
+		useRoute: () => ({ meta: {} }),
+		RouterLink: vi.fn(),
+	};
+});
 
 const nodes = [
 	{
@@ -112,9 +120,12 @@ describe('RunData', () => {
 			],
 			'binary',
 		);
-		expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(getByTestId('ndv-view-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+		});
 	});
 
 	it('should not render a view button for unknown content-type', async () => {
@@ -132,9 +143,12 @@ describe('RunData', () => {
 			],
 			'binary',
 		);
-		expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
-		expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
-		expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(queryByTestId('ndv-view-binary-data')).not.toBeInTheDocument();
+			expect(getByTestId('ndv-download-binary-data')).toBeInTheDocument();
+			expect(getByTestId('ndv-binary-data_0')).toBeInTheDocument();
+		});
 	});
 
 	it('should not render pin data button when there is no output data', async () => {
@@ -201,10 +215,9 @@ describe('RunData', () => {
 		paneType: NodePanelType = 'output',
 	) => {
 		const pinia = createTestingPinia({
+			stubActions: false,
 			initialState: {
-				[STORES.SETTINGS]: {
-					settings: merge({}, SETTINGS_STORE_DEFAULT_STATE.settings),
-				},
+				[STORES.SETTINGS]: SETTINGS_STORE_DEFAULT_STATE,
 				[STORES.NDV]: {
 					output: {
 						displayMode,
@@ -248,16 +261,17 @@ describe('RunData', () => {
 						},
 					},
 				},
-				[STORES.NODE_TYPES]: {
-					nodeTypes: defaultNodeTypes,
-				},
 			},
 		});
 
 		setActivePinia(pinia);
 
 		const workflowsStore = useWorkflowsStore();
+		const nodeTypesStore = useNodeTypesStore();
+
+		nodeTypesStore.setNodeTypes(defaultNodeDescriptions);
 		vi.mocked(workflowsStore).getNodeByName.mockReturnValue(nodes[0]);
+
 		if (pinnedData) {
 			vi.mocked(workflowsStore).pinDataByNodeName.mockReturnValue(pinnedData);
 		}
@@ -267,31 +281,21 @@ describe('RunData', () => {
 				node: {
 					name: 'Test Node',
 				},
-				workflow: {
+				workflow: createTestWorkflowObject({
 					nodes,
-				},
-			},
-			data() {
-				return {
-					canPinData: true,
-					showData: true,
-				};
+				}),
 			},
 			global: {
 				stubs: {
 					RunDataPinButton: { template: '<button data-test-id="ndv-pin-data"></button>' },
 				},
-				mocks: {
-					$route: {
-						name: VIEWS.WORKFLOW,
-					},
-				},
 			},
 		})({
 			props: {
 				node: {
 					id: '1',
 					name: 'Test Node',
+					type: SET_NODE_TYPE,
 					position: [0, 0],
 				},
 				nodes: [{ name: 'Test Node', indicies: [], depth: 1 }],
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 71e92e5c7b..6a197d35e9 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1,27 +1,22 @@
-<script lang="ts">
-import { defineAsyncComponent, defineComponent, toRef } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
+<script setup lang="ts">
 import { useStorage } from '@/composables/useStorage';
 import { saveAs } from 'file-saver';
 import type {
 	IBinaryData,
-	IBinaryKeyData,
+	IConnectedNode,
 	IDataObject,
 	INodeExecutionData,
 	INodeOutputConfiguration,
-	INodeTypeDescription,
 	IRunData,
 	IRunExecutionData,
-	NodeHint,
 	NodeError,
+	NodeHint,
 	Workflow,
-	IConnectedNode,
 } from 'n8n-workflow';
-import { NodeHelpers, NodeConnectionType } from 'n8n-workflow';
+import { NodeConnectionType, NodeHelpers } from 'n8n-workflow';
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue';
 
 import type {
-	IExecutionResponse,
 	INodeUi,
 	INodeUpdatePropertiesInformation,
 	IRunDataDisplayMode,
@@ -30,40 +25,58 @@ import type {
 } from '@/Interface';
 
 import {
-	DATA_PINNING_DOCS_URL,
 	DATA_EDITING_DOCS_URL,
-	NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND,
-	LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
+	DATA_PINNING_DOCS_URL,
+	HTML_NODE_TYPE,
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
+	LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
 	MAX_DISPLAY_DATA_SIZE,
 	MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
-	MAX_DISPLAY_ITEMS_AUTO_ALL,
+	NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND,
 	TEST_PIN_DATA,
-	HTML_NODE_TYPE,
 } from '@/constants';
 
 import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
 import NodeErrorView from '@/components/Error/NodeErrorView.vue';
 import JsonEditor from '@/components/JsonEditor/JsonEditor.vue';
 
-import type { PinDataSource, UnpinDataSource } from '@/composables/usePinnedData';
-import { usePinnedData } from '@/composables/usePinnedData';
-import { dataPinningEventBus } from '@/event-bus';
-import { clearJsonKey, isEmpty } from '@/utils/typesUtils';
-import { executionDataToJson } from '@/utils/nodeTypesUtils';
-import { searchInObject } from '@/utils/objectUtils';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
+import RunDataPinButton from '@/components/RunDataPinButton.vue';
+import { useExternalHooks } from '@/composables/useExternalHooks';
+import { useI18n } from '@/composables/useI18n';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useNodeType } from '@/composables/useNodeType';
+import type { PinDataSource, UnpinDataSource } from '@/composables/usePinnedData';
+import { usePinnedData } from '@/composables/usePinnedData';
+import { useTelemetry } from '@/composables/useTelemetry';
 import { useToast } from '@/composables/useToast';
-import { isEqual, isObject } from 'lodash-es';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { dataPinningEventBus } from '@/event-bus';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useRootStore } from '@/stores/root.store';
-import RunDataPinButton from '@/components/RunDataPinButton.vue';
+import { useSourceControlStore } from '@/stores/sourceControl.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { executionDataToJson } from '@/utils/nodeTypesUtils';
 import { getGenericHints } from '@/utils/nodeViewUtils';
+import { searchInObject } from '@/utils/objectUtils';
+import { clearJsonKey, isEmpty } from '@/utils/typesUtils';
+import { isEqual, isObject } from 'lodash-es';
+import {
+	N8nBlockUi,
+	N8nButton,
+	N8nCallout,
+	N8nIconButton,
+	N8nInfoTip,
+	N8nLink,
+	N8nOption,
+	N8nRadioButtons,
+	N8nSelect,
+	N8nSpinner,
+	N8nTabs,
+	N8nText,
+	N8nTooltip,
+} from 'n8n-design-system';
+import { storeToRefs } from 'pinia';
+import { useRoute } from 'vue-router';
 
 const LazyRunDataTable = defineAsyncComponent(
 	async () => await import('@/components/RunDataTable.vue'),
@@ -85,1138 +98,1092 @@ export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink';
 };
 
-export default defineComponent({
-	name: 'RunData',
-	components: {
-		BinaryDataDisplay,
-		NodeErrorView,
-		JsonEditor,
-		LazyRunDataTable,
-		LazyRunDataJson,
-		LazyRunDataSchema,
-		LazyRunDataHtml,
-		LazyRunDataSearch,
-		RunDataPinButton,
-	},
-	props: {
-		node: {
-			type: Object as PropType<INodeUi | null>,
-			default: null,
-		},
-		nodes: {
-			type: Array as PropType<IConnectedNode[]>,
-			default: () => [],
-		},
-		workflow: {
-			type: Object as PropType<Workflow>,
-			required: true,
-		},
-		runIndex: {
-			type: Number,
-			required: true,
-		},
-		linkedRuns: {
-			type: Boolean,
-		},
-		canLinkRuns: {
-			type: Boolean,
-		},
-		tooMuchDataTitle: {
-			type: String,
-		},
-		noDataInBranchMessage: {
-			type: String,
-		},
-		isExecuting: {
-			type: Boolean,
-		},
-		executingMessage: {
-			type: String,
-		},
-		pushRef: {
-			type: String,
-			required: true,
-		},
-		paneType: {
-			type: String as PropType<NodePanelType>,
-			required: true,
-		},
-		overrideOutputs: {
-			type: Array as PropType<number[]>,
-		},
-		mappingEnabled: {
-			type: Boolean,
-		},
-		distanceFromActive: {
-			type: Number,
-			default: 0,
-		},
-		blockUI: {
-			type: Boolean,
-			default: false,
-		},
-		isProductionExecutionPreview: {
-			type: Boolean,
-			default: false,
-		},
-		isPaneActive: {
-			type: Boolean,
-			default: false,
-		},
-		hidePagination: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props) {
-		const ndvStore = useNDVStore();
-		const nodeHelpers = useNodeHelpers();
-		const externalHooks = useExternalHooks();
-		const node = toRef(props, 'node');
-		const pinnedData = usePinnedData(node, {
-			runIndex: props.runIndex,
-			displayMode: ndvStore.getPanelDisplayMode(props.paneType),
-		});
-		const { isSubNodeType } = useNodeType({
-			node,
-		});
-
-		return {
-			...useToast(),
-			externalHooks,
-			nodeHelpers,
-			pinnedData,
-			isSubNodeType,
-		};
-	},
-	data() {
-		return {
-			connectionType: NodeConnectionType.Main as NodeConnectionType,
-			binaryDataPreviewActive: false,
-			dataSize: 0,
-			showData: false,
-			userEnabledShowData: false,
-			outputIndex: 0,
-			binaryDataDisplayVisible: false,
-			binaryDataDisplayData: null as IBinaryData | null,
-
-			MAX_DISPLAY_DATA_SIZE,
-			MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
-			MAX_DISPLAY_ITEMS_AUTO_ALL,
-			currentPage: 1,
-			pageSize: 10,
-			pageSizes: [1, 10, 25, 50, 100],
-
-			pinDataDiscoveryTooltipVisible: false,
-			isControlledPinDataTooltip: false,
-			search: '',
-		};
-	},
-	computed: {
-		...mapStores(
-			useNodeTypesStore,
-			useNDVStore,
-			useWorkflowsStore,
-			useSourceControlStore,
-			useRootStore,
-		),
-		isReadOnlyRoute() {
-			return this.$route?.meta?.readOnlyCanvas === true;
-		},
-		isWaitNodeWaiting() {
-			return (
-				this.workflowExecution?.status === 'waiting' &&
-				this.workflowExecution.data?.waitTill &&
-				this.workflowExecution?.data?.resultData?.lastNodeExecuted === this.node?.name
-			);
-		},
-		activeNode(): INodeUi | null {
-			return this.ndvStore.activeNode;
-		},
-		dataPinningDocsUrl(): string {
-			return DATA_PINNING_DOCS_URL;
-		},
-		dataEditingDocsUrl(): string {
-			return DATA_EDITING_DOCS_URL;
-		},
-		displayMode(): IRunDataDisplayMode {
-			return this.ndvStore.getPanelDisplayMode(this.paneType);
-		},
-		nodeType(): INodeTypeDescription | null {
-			if (this.node) {
-				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
-			}
-			return null;
-		},
-		isSchemaView(): boolean {
-			return this.displayMode === 'schema';
-		},
-		isSearchInSchemaView(): boolean {
-			return this.displayMode === 'schema' && this.search.length > 0;
-		},
-		displaysMultipleNodes(): boolean {
-			return this.isSchemaView && this.paneType === 'input' && this.nodes.length > 0;
-		},
-		isTriggerNode(): boolean {
-			if (this.node === null) {
-				return false;
-			}
-			return this.nodeTypesStore.isTriggerNode(this.node.type);
-		},
-		showPinButton(): boolean {
-			if (!this.rawInputData.length && !this.pinnedData.hasData.value) {
-				return false;
-			}
-
-			if (this.editMode.enabled) {
-				return false;
-			}
-
-			if (this.binaryData?.length) {
-				return this.isPaneTypeOutput;
-			}
-
-			return this.canPinData;
-		},
-		pinButtonDisabled(): boolean {
-			return (
-				this.pinnedData.hasData.value ||
-				!this.rawInputData.length ||
-				!!this.binaryData?.length ||
-				this.isReadOnlyRoute ||
-				this.readOnlyEnv
-			);
-		},
-		canPinData(): boolean {
-			if (this.node === null) {
-				return false;
-			}
-
-			const canPinNode = usePinnedData(this.node).canPinNode(false, this.currentOutputIndex);
-
-			return (
-				canPinNode &&
-				!this.isPaneTypeInput &&
-				this.pinnedData.isValidNodeType.value &&
-				!(this.binaryData && this.binaryData.length > 0)
-			);
-		},
-		displayModes(): Array<{ label: string; value: string }> {
-			const defaults = [
-				{ label: this.$locale.baseText('runData.table'), value: 'table' },
-				{ label: this.$locale.baseText('runData.json'), value: 'json' },
-			];
-
-			if (this.binaryData.length) {
-				defaults.push({ label: this.$locale.baseText('runData.binary'), value: 'binary' });
-			}
-
-			const schemaView = { label: this.$locale.baseText('runData.schema'), value: 'schema' };
-			if (this.isPaneTypeInput) {
-				defaults.unshift(schemaView);
-			} else {
-				defaults.push(schemaView);
-			}
-
-			if (
-				this.isPaneTypeOutput &&
-				this.activeNode?.type === HTML_NODE_TYPE &&
-				this.activeNode.parameters.operation === 'generateHtmlTemplate'
-			) {
-				defaults.unshift({ label: 'HTML', value: 'html' });
-			}
-
-			return defaults;
-		},
-		hasNodeRun(): boolean {
-			return Boolean(
-				!this.isExecuting &&
-					this.node &&
-					((this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name)) ||
-						this.pinnedData.hasData.value),
-			);
-		},
-		isArtificialRecoveredEventItem(): boolean {
-			return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem;
-		},
-		subworkflowExecutionError(): NodeError {
-			return {
-				node: this.node,
-				messages: [this.workflowsStore.subWorkflowExecutionError?.message ?? ''],
-			} as NodeError;
-		},
-		hasSubworkflowExecutionError(): boolean {
-			return Boolean(this.workflowsStore.subWorkflowExecutionError);
-		},
-		workflowRunErrorAsNodeError(): NodeError | null {
-			if (!this.node) {
-				return null;
-			}
-
-			// If the node is a sub-node, we need to get the parent node error to check for input errors
-			if (this.isSubNodeType && this.paneType === 'input') {
-				const parentNode = this.workflow.getChildNodes(this.node?.name ?? '', 'ALL_NON_MAIN')[0];
-				return this.workflowRunData?.[parentNode]?.[this.runIndex]?.error as NodeError;
-			}
-			return this.workflowRunData?.[this.node?.name]?.[this.runIndex]?.error as NodeError;
-		},
-		hasRunError(): boolean {
-			return Boolean(this.node && this.workflowRunErrorAsNodeError);
-		},
-		executionHints(): NodeHint[] {
-			if (this.hasNodeRun) {
-				const hints = this.node && this.workflowRunData?.[this.node.name]?.[this.runIndex]?.hints;
-
-				if (hints) return hints;
-			}
-
-			return [];
-		},
-		workflowExecution(): IExecutionResponse | null {
-			return this.workflowsStore.getWorkflowExecution;
-		},
-		workflowRunData(): IRunData | null {
-			if (this.workflowExecution === null) {
-				return null;
-			}
-			const executionData: IRunExecutionData | undefined = this.workflowExecution.data;
-			if (executionData?.resultData) {
-				return executionData.resultData.runData;
-			}
-			return null;
-		},
-		dataCount(): number {
-			return this.getDataCount(this.runIndex, this.currentOutputIndex);
-		},
-		unfilteredDataCount(): number {
-			return this.pinnedData.data.value
-				? this.pinnedData.data.value.length
-				: this.rawInputData.length;
-		},
-		dataSizeInMB(): string {
-			return (this.dataSize / (1024 * 1024)).toFixed(1);
-		},
-		maxOutputIndex(): number {
-			if (this.node === null || this.runIndex === undefined) {
-				return 0;
-			}
-
-			const runData: IRunData | null = this.workflowRunData;
-
-			if (runData === null || !runData.hasOwnProperty(this.node.name)) {
-				return 0;
-			}
-
-			if (runData[this.node.name].length < this.runIndex) {
-				return 0;
-			}
-
-			if (runData[this.node.name][this.runIndex]) {
-				const taskData = runData[this.node.name][this.runIndex].data;
-				if (taskData?.main) {
-					return taskData.main.length - 1;
-				}
-			}
-
-			return 0;
-		},
-		currentPageOffset(): number {
-			return this.pageSize * (this.currentPage - 1);
-		},
-		maxRunIndex(): 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 - 1;
-			}
-
-			return 0;
-		},
-		rawInputData(): INodeExecutionData[] {
-			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
-		},
-		unfilteredInputData(): INodeExecutionData[] {
-			return this.getPinDataOrLiveData(this.rawInputData);
-		},
-		inputData(): INodeExecutionData[] {
-			return this.getFilteredData(this.unfilteredInputData);
-		},
-		inputDataPage(): INodeExecutionData[] {
-			const offset = this.pageSize * (this.currentPage - 1);
-			return this.inputData.slice(offset, offset + this.pageSize);
-		},
-		jsonData(): IDataObject[] {
-			return executionDataToJson(this.inputData);
-		},
-		binaryData(): IBinaryKeyData[] {
-			if (!this.node) {
-				return [];
-			}
-
-			const binaryData = this.nodeHelpers.getBinaryData(
-				this.workflowRunData,
-				this.node.name,
-				this.runIndex,
-				this.currentOutputIndex,
-			);
-			return binaryData.filter((data) => Boolean(data && Object.keys(data).length));
-		},
-		inputHtml(): string {
-			return String(this.inputData[0]?.json?.html ?? '');
-		},
-		currentOutputIndex(): number {
-			if (this.overrideOutputs?.length && !this.overrideOutputs.includes(this.outputIndex)) {
-				return this.overrideOutputs[0];
-			}
-
-			return this.outputIndex;
-		},
-		branches(): ITab[] {
-			const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
-
-			const branches: ITab[] = [];
-
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				if (this.overrideOutputs && !this.overrideOutputs.includes(i)) {
-					continue;
-				}
-				const totalItemsCount = this.getRawInputData(this.runIndex, i).length;
-				const itemsCount = this.getDataCount(this.runIndex, i);
-				const items = this.search
-					? this.$locale.baseText('ndv.search.items', {
-							adjustToNumber: totalItemsCount,
-							interpolate: { matched: itemsCount, total: totalItemsCount },
-						})
-					: this.$locale.baseText('ndv.output.items', {
-							adjustToNumber: itemsCount,
-							interpolate: { count: itemsCount },
-						});
-				let outputName = this.getOutputName(i);
-
-				if (`${outputName}` === `${i}`) {
-					outputName = `${this.$locale.baseText('ndv.output')} ${outputName}`;
-				} else {
-					const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
-						this.node?.type ?? '',
-					)
-						? ''
-						: ` ${this.$locale.baseText('ndv.output.branch')}`;
-					outputName = capitalize(`${this.getOutputName(i)}${appendBranchWord}`);
-				}
-				branches.push({
-					label:
-						(this.search && itemsCount) || totalItemsCount
-							? `${outputName} (${items})`
-							: outputName,
-					value: i,
-				});
-			}
-			return branches;
-		},
-		editMode(): { enabled: boolean; value: string } {
-			return this.isPaneTypeInput
-				? { enabled: false, value: '' }
-				: this.ndvStore.outputPanelEditMode;
-		},
-		isPaneTypeInput(): boolean {
-			return this.paneType === 'input';
-		},
-		isPaneTypeOutput(): boolean {
-			return this.paneType === 'output';
-		},
-		readOnlyEnv(): boolean {
-			return this.sourceControlStore.preferences.branchReadOnly;
-		},
-		showIOSearch(): boolean {
-			return this.hasNodeRun && !this.hasRunError && this.unfilteredInputData.length > 0;
-		},
-		inputSelectLocation() {
-			if (this.isSchemaView) return 'none';
-			if (!this.hasNodeRun) return 'header';
-			if (this.maxRunIndex > 0) return 'runs';
-			if (this.maxOutputIndex > 0 && this.branches.length > 1) {
-				return 'outputs';
-			}
-
-			return 'items';
-		},
-		showIoSearchNoMatchContent(): boolean {
-			return this.hasNodeRun && !this.inputData.length && !!this.search;
-		},
-		parentNodeOutputData(): INodeExecutionData[] {
-			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
-			let parentNodeData: INodeExecutionData[] = [];
-
-			if (parentNode?.name) {
-				parentNodeData = this.nodeHelpers.getNodeInputData(
-					this.workflow.getNode(parentNode?.name),
-					this.runIndex,
-					this.outputIndex,
-					'input',
-					this.connectionType,
-				);
-			}
-
-			return parentNodeData;
-		},
-		parentNodePinnedData(): INodeExecutionData[] {
-			const parentNode = this.workflow.getParentNodesByDepth(this.node?.name ?? '')[0];
-			return this.workflow.pinData?.[parentNode?.name || ''] || [];
-		},
-	},
-	watch: {
-		node(newNode: INodeUi, prevNode: INodeUi) {
-			if (newNode?.id === prevNode?.id) return;
-			this.init();
-		},
-		hasNodeRun() {
-			if (this.paneType === 'output') this.setDisplayMode();
-		},
-		inputDataPage: {
-			handler(data: INodeExecutionData[]) {
-				if (this.paneType && data) {
-					this.ndvStore.setNDVPanelDataIsEmpty({
-						panel: this.paneType as 'input' | 'output',
-						isEmpty: data.every((item) => isEmpty(item.json)),
-					});
-				}
-			},
-			immediate: true,
-			deep: true,
-		},
-		jsonData(data: IDataObject[], prevData: IDataObject[]) {
-			if (isEqual(data, prevData)) return;
-			this.refreshDataSize();
-			if (this.dataCount) {
-				this.resetCurrentPageIfTooFar();
-			}
-			this.showPinDataDiscoveryTooltip(data);
-		},
-		binaryData(newData: IBinaryKeyData[], prevData: IBinaryKeyData[]) {
-			if (newData.length && !prevData.length && this.displayMode !== 'binary') {
-				this.switchToBinary();
-			} else if (!newData.length && this.displayMode === 'binary') {
-				this.onDisplayModeChange('table');
-			}
-		},
-		currentOutputIndex(branchIndex: number) {
-			this.ndvStore.setNDVBranchIndex({
-				pane: this.paneType as 'input' | 'output',
-				branchIndex,
-			});
-		},
-		search(newSearch: string) {
-			this.$emit('search', newSearch);
-		},
-	},
-	mounted() {
-		this.init();
-
-		if (!this.isPaneTypeInput) {
-			this.showPinDataDiscoveryTooltip(this.jsonData);
-		}
-		this.ndvStore.setNDVBranchIndex({
-			pane: this.paneType as 'input' | 'output',
-			branchIndex: this.currentOutputIndex,
-		});
-
-		if (this.paneType === 'output') {
-			this.setDisplayMode();
-			this.activatePane();
-		}
-
-		if (this.hasRunError && this.node) {
-			const error = this.workflowRunData?.[this.node.name]?.[this.runIndex]?.error;
-			const errorsToTrack = ['unknown error'];
-
-			if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
-				this.$telemetry.track(
-					'User encountered an error',
-					{
-						node: this.node.type,
-						errorMessage: error.message,
-						nodeVersion: this.node.typeVersion,
-						n8nVersion: this.rootStore.versionCli,
-					},
-					{
-						withPostHog: true,
-					},
-				);
-			}
-		}
-	},
-	beforeUnmount() {
-		this.hidePinDataDiscoveryTooltip();
-	},
-	methods: {
-		getResolvedNodeOutputs() {
-			if (this.node && this.nodeType) {
-				const workflowNode = this.workflow.getNode(this.node.name);
-
-				if (workflowNode) {
-					const outputs = NodeHelpers.getNodeOutputs(this.workflow, workflowNode, this.nodeType);
-					return outputs;
-				}
-			}
-			return [];
-		},
-		shouldHintBeDisplayed(hint: NodeHint): boolean {
-			const { location, whenToDisplay } = hint;
-
-			if (location) {
-				if (location === 'ndv' && !['input', 'output'].includes(this.paneType)) {
-					return false;
-				}
-				if (location === 'inputPane' && this.paneType !== 'input') {
-					return false;
-				}
-
-				if (location === 'outputPane' && this.paneType !== 'output') {
-					return false;
-				}
-			}
-
-			if (whenToDisplay === 'afterExecution' && !this.hasNodeRun) {
-				return false;
-			}
-
-			if (whenToDisplay === 'beforeExecution' && this.hasNodeRun) {
-				return false;
-			}
-
-			return true;
-		},
-		getNodeHints(): NodeHint[] {
-			try {
-				if (this.node && this.nodeType) {
-					const workflowNode = this.workflow.getNode(this.node.name);
-
-					if (workflowNode) {
-						const executionHints = this.executionHints;
-
-						const nodeHints = NodeHelpers.getNodeHints(this.workflow, workflowNode, this.nodeType, {
-							runExecutionData: this.workflowExecution?.data ?? null,
-							runIndex: this.runIndex,
-							connectionInputData: this.parentNodeOutputData,
-						});
-
-						const hasMultipleInputItems =
-							this.parentNodeOutputData.length > 1 || this.parentNodePinnedData.length > 1;
-
-						const nodeOutputData =
-							this.workflowRunData?.[this.node.name]?.[this.runIndex]?.data?.main?.[0] || [];
-
-						const genericHints = getGenericHints({
-							workflowNode,
-							node: this.node,
-							nodeType: this.nodeType,
-							nodeOutputData,
-							workflow: this.workflow,
-							hasNodeRun: this.hasNodeRun,
-							hasMultipleInputItems,
-						});
-
-						return executionHints
-							.concat(nodeHints, genericHints)
-							.filter(this.shouldHintBeDisplayed);
-					}
-				}
-			} catch (error) {
-				console.error('Error while getting node hints', error);
-			}
-
-			return [];
-		},
-		onItemHover(itemIndex: number | null) {
-			if (itemIndex === null) {
-				this.$emit('itemHover', null);
-
-				return;
-			}
-			this.$emit('itemHover', {
-				outputIndex: this.currentOutputIndex,
-				itemIndex,
-			});
-		},
-		onClickDataPinningDocsLink() {
-			this.$telemetry.track('User clicked ndv link', {
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				node_type: this.activeNode?.type,
-				pane: 'output',
-				type: 'data-pinning-docs',
-			});
-		},
-		showPinDataDiscoveryTooltip(value: IDataObject[]) {
-			if (!this.isTriggerNode) {
-				return;
-			}
-
-			const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
-
-			if (value && value.length > 0 && !this.isReadOnlyRoute && !pinDataDiscoveryFlag) {
-				this.pinDataDiscoveryComplete();
-
-				setTimeout(() => {
-					this.isControlledPinDataTooltip = true;
-					this.pinDataDiscoveryTooltipVisible = true;
-					dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
-				}, 500); // Wait for NDV to open
-			}
-		},
-		hidePinDataDiscoveryTooltip() {
-			if (this.pinDataDiscoveryTooltipVisible) {
-				this.isControlledPinDataTooltip = false;
-				this.pinDataDiscoveryTooltipVisible = false;
-				dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
-			}
-		},
-		pinDataDiscoveryComplete() {
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
-			useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
-		},
-		enterEditMode({ origin }: EnterEditModeArgs) {
-			const inputData = this.pinnedData.data.value
-				? clearJsonKey(this.pinnedData.data.value)
-				: executionDataToJson(this.rawInputData);
-
-			const inputDataLength = Array.isArray(inputData)
-				? inputData.length
-				: Object.keys(inputData ?? {}).length;
-
-			const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
-
-			this.ndvStore.setOutputPanelEditModeEnabled(true);
-			this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
-
-			this.$telemetry.track('User opened ndv edit state', {
-				node_type: this.activeNode?.type,
-				click_type: origin === 'editIconButton' ? 'button' : 'link',
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				is_output_present: this.hasNodeRun || this.pinnedData.hasData.value,
-				view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'undefined' : this.displayMode,
-				is_data_pinned: this.pinnedData.hasData.value,
-			});
-		},
-		onClickCancelEdit() {
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
-			this.ndvStore.setOutputPanelEditModeValue('');
-			this.onExitEditMode({ type: 'cancel' });
-		},
-		onClickSaveEdit() {
-			if (!this.node) {
-				return;
-			}
-
-			const { value } = this.editMode;
-
-			this.clearAllStickyNotifications();
-
-			try {
-				const clearedValue = clearJsonKey(value) as INodeExecutionData[];
-				try {
-					this.pinnedData.setData(clearedValue, 'save-edit');
-				} catch (error) {
-					// setData function already shows toasts on error, so just return here
-					return;
-				}
-			} catch (error) {
-				this.showError(error, this.$locale.baseText('ndv.pinData.error.syntaxError.title'));
-				return;
-			}
-
-			this.ndvStore.setOutputPanelEditModeEnabled(false);
-
-			this.onExitEditMode({ type: 'save' });
-		},
-		onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
-			this.$telemetry.track('User closed ndv edit state', {
-				node_type: this.activeNode?.type,
-				push_ref: this.pushRef,
-				run_index: this.runIndex,
-				view: this.displayMode,
-				type,
-			});
-		},
-		async onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
-			if (!this.node) {
-				return;
-			}
-
-			if (source === 'pin-icon-click') {
-				const telemetryPayload = {
-					node_type: this.activeNode?.type,
-					push_ref: this.pushRef,
-					run_index: this.runIndex,
-					view: !this.hasNodeRun && !this.pinnedData.hasData.value ? 'none' : this.displayMode,
-				};
-
-				void this.externalHooks.run('runData.onTogglePinData', telemetryPayload);
-				this.$telemetry.track('User clicked pin data icon', telemetryPayload);
-			}
-
-			this.nodeHelpers.updateNodeParameterIssues(this.node);
-
-			if (this.pinnedData.hasData.value) {
-				this.pinnedData.unsetData(source);
-				return;
-			}
-
-			try {
-				this.pinnedData.setData(this.rawInputData, 'pin-icon-click');
-			} catch (error) {
-				console.error(error);
-				return;
-			}
-
-			if (this.maxRunIndex > 0) {
-				this.showToast({
-					title: this.$locale.baseText('ndv.pinData.pin.multipleRuns.title', {
-						interpolate: {
-							index: `${this.runIndex}`,
-						},
-					}),
-					message: this.$locale.baseText('ndv.pinData.pin.multipleRuns.description'),
-					type: 'success',
-					duration: 2000,
-				});
-			}
-
-			this.hidePinDataDiscoveryTooltip();
-			this.pinDataDiscoveryComplete();
-		},
-		switchToBinary() {
-			this.onDisplayModeChange('binary');
-		},
-		onBranchChange(value: number) {
-			this.outputIndex = value;
-
-			this.$telemetry.track('User changed ndv branch', {
-				push_ref: this.pushRef,
-				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.userEnabledShowData = true;
-			this.$telemetry.track('User clicked ndv button', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				type: 'showTooMuchData',
-			});
-		},
-		toggleLinkRuns() {
-			this.linkedRuns ? this.unlinkRun() : this.linkRun();
-		},
-		linkRun() {
-			this.$emit('linkRun');
-		},
-		unlinkRun() {
-			this.$emit('unlinkRun');
-		},
-		onCurrentPageChange(value: number) {
-			this.currentPage = value;
-			this.$telemetry.track('User changed ndv page', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		resetCurrentPageIfTooFar() {
-			const maxPage = Math.ceil(this.dataCount / this.pageSize);
-			if (maxPage < this.currentPage) {
-				this.currentPage = maxPage;
-			}
-		},
-		onPageSizeChange(pageSize: number) {
-			this.pageSize = pageSize;
-
-			this.resetCurrentPageIfTooFar();
-
-			this.$telemetry.track('User changed ndv page size', {
-				node_type: this.activeNode?.type,
-				workflow_id: this.workflowsStore.workflowId,
-				push_ref: this.pushRef,
-				pane: this.paneType,
-				page_selected: this.currentPage,
-				page_size: this.pageSize,
-				items_total: this.dataCount,
-			});
-		},
-		onDisplayModeChange(displayMode: IRunDataDisplayMode) {
-			const previous = this.displayMode;
-			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
-
-			if (!this.userEnabledShowData) this.updateShowData();
-
-			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
-			if (dataContainerRef) {
-				const dataDisplay = dataContainerRef.children[0];
-
-				if (dataDisplay) {
-					dataDisplay.scrollTo(0, 0);
-				}
-			}
-
-			this.closeBinaryDataDisplay();
-			void this.externalHooks.run('runData.displayModeChanged', {
-				newValue: displayMode,
-				oldValue: previous,
-			});
-			if (this.activeNode) {
-				this.$telemetry.track('User changed ndv item view', {
-					previous_view: previous,
-					new_view: displayMode,
-					node_type: this.activeNode.type,
-					workflow_id: this.workflowsStore.workflowId,
-					push_ref: this.pushRef,
-					pane: this.paneType,
-				});
-			}
-		},
-		getRunLabel(option: number) {
-			let itemsCount = 0;
-			for (let i = 0; i <= this.maxOutputIndex; i++) {
-				itemsCount += this.getPinDataOrLiveData(this.getRawInputData(option - 1, i)).length;
-			}
-			const items = this.$locale.baseText('ndv.output.items', {
-				adjustToNumber: itemsCount,
-				interpolate: { count: itemsCount },
-			});
-			const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
-			return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel;
-		},
-		getRawInputData(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: NodeConnectionType = NodeConnectionType.Main,
-		): INodeExecutionData[] {
-			let inputData: INodeExecutionData[] = [];
-
-			if (this.node) {
-				inputData = this.nodeHelpers.getNodeInputData(
-					this.node,
-					runIndex,
-					outputIndex,
-					this.paneType,
-					connectionType,
-				);
-			}
-
-			if (inputData.length === 0 || !Array.isArray(inputData)) {
-				return [];
-			}
-
-			return inputData;
-		},
-		getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (this.pinnedData.data.value && !this.isProductionExecutionPreview) {
-				return Array.isArray(this.pinnedData.data.value)
-					? this.pinnedData.data.value.map((value) => ({
-							json: value,
-						}))
-					: [
-							{
-								json: this.pinnedData.data.value,
-							},
-						];
-			}
-			return inputData;
-		},
-		getFilteredData(inputData: INodeExecutionData[]): INodeExecutionData[] {
-			if (!this.search || this.isSchemaView) {
-				return inputData;
-			}
-
-			this.currentPage = 1;
-			return inputData.filter(({ json }) => searchInObject(json, this.search));
-		},
-		getDataCount(
-			runIndex: number,
-			outputIndex: number,
-			connectionType: NodeConnectionType = NodeConnectionType.Main,
-		) {
-			if (!this.node) {
-				return 0;
-			}
-
-			if (this.workflowRunData?.[this.node.name]?.[runIndex]?.hasOwnProperty('error')) {
-				return 1;
-			}
-
-			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
-			const pinOrLiveData = this.getPinDataOrLiveData(rawInputData);
-			return this.getFilteredData(pinOrLiveData).length;
-		},
-		init() {
-			// Reset the selected output index every time another node gets selected
-			this.outputIndex = 0;
-			this.refreshDataSize();
-			this.closeBinaryDataDisplay();
-			let outputTypes: NodeConnectionType[] = [];
-			if (this.nodeType !== null && this.node !== null) {
-				const outputs = this.getResolvedNodeOutputs();
-				outputTypes = NodeHelpers.getConnectionTypes(outputs);
-			}
-			this.connectionType = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
-			if (this.binaryData.length > 0) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'binary',
-				});
-			} else if (this.displayMode === 'binary') {
-				this.ndvStore.setPanelDisplayMode({
-					pane: this.paneType as 'input' | 'output',
-					mode: 'table',
-				});
-			}
-		},
-		closeBinaryDataDisplay() {
-			this.binaryDataDisplayVisible = false;
-			this.binaryDataDisplayData = null;
-		},
-		clearExecutionData() {
-			this.workflowsStore.setWorkflowExecutionData(null);
-			this.nodeHelpers.updateNodesExecutionIssues();
-		},
-		isViewable(index: number, key: string | number): boolean {
-			const { fileType } = this.binaryData[index][key];
-			return (
-				!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
-			);
-		},
-		isDownloadable(index: number, key: string | number): boolean {
-			const { mimeType, fileName } = this.binaryData[index][key];
-			return !!(mimeType && fileName);
-		},
-		async downloadBinaryData(index: number, key: string | number) {
-			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
-
-			if (id) {
-				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
-				saveAs(url, [fileName, fileExtension].join('.'));
-				return;
-			} else {
-				const bufferString = 'data:' + mimeType + ';base64,' + data;
-				const blob = await fetch(bufferString).then(async (d) => await d.blob());
-				saveAs(blob, fileName);
-			}
-		},
-		async downloadJsonData() {
-			const fileName = (this.node?.name ?? '').replace(/[^\w\d]/g, '_');
-			const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], {
-				type: 'application/json',
-			});
-
-			saveAs(blob, `${fileName}.json`);
-		},
-		displayBinaryData(index: number, key: string | number) {
-			const { data, mimeType } = this.binaryData[index][key];
-			this.binaryDataDisplayVisible = true;
-
-			this.binaryDataDisplayData = {
-				node: this.node?.name,
-				runIndex: this.runIndex,
-				outputIndex: this.currentOutputIndex,
-				index,
-				key,
-				data,
-				mimeType,
-			};
-		},
-		getOutputName(outputIndex: number) {
-			if (this.node === null) {
-				return outputIndex + 1;
-			}
-
-			const nodeType = this.nodeType;
-			const outputs = this.getResolvedNodeOutputs();
-			const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
-
-			if (outputConfiguration && isObject(outputConfiguration)) {
-				return outputConfiguration?.displayName;
-			}
-			if (!nodeType?.outputNames || nodeType.outputNames.length <= outputIndex) {
-				return outputIndex + 1;
-			}
-
-			return nodeType.outputNames[outputIndex];
-		},
-		refreshDataSize() {
-			// Hide by default the data from being displayed
-			this.showData = false;
-			const jsonItems = this.inputDataPage.map((item) => item.json);
-			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
-			this.dataSize = byteSize;
-			this.updateShowData();
-		},
-		updateShowData() {
-			// Display data if it is reasonably small (< 1MB)
-			this.showData =
-				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
-				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
-		},
-		onRunIndexChange(run: number) {
-			this.$emit('runChange', run);
-		},
-		enableNode() {
-			if (this.node) {
-				const updateInformation = {
-					name: this.node.name,
-					properties: {
-						disabled: !this.node.disabled,
-					} as IDataObject,
-				} as INodeUpdatePropertiesInformation;
-
-				this.workflowsStore.updateNodeProperties(updateInformation);
-			}
-		},
-		setDisplayMode() {
-			if (!this.activeNode) return;
-
-			const shouldDisplayHtml =
-				this.activeNode.type === HTML_NODE_TYPE &&
-				this.activeNode.parameters.operation === 'generateHtmlTemplate';
-
-			if (shouldDisplayHtml) {
-				this.ndvStore.setPanelDisplayMode({
-					pane: 'output',
-					mode: 'html',
-				});
-			}
-		},
-		activatePane() {
-			this.$emit('activatePane');
-		},
-		onSearchClear() {
-			this.search = '';
-			document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
-		},
-	},
+type Props = {
+	workflow: Workflow;
+	runIndex: number;
+	tooMuchDataTitle: string;
+	executingMessage: string;
+	pushRef: string;
+	paneType: NodePanelType;
+	noDataInBranchMessage: string;
+	node?: INodeUi | null;
+	nodes?: IConnectedNode[];
+	linkedRuns?: boolean;
+	canLinkRuns?: boolean;
+	isExecuting?: boolean;
+	overrideOutputs?: number[];
+	mappingEnabled?: boolean;
+	distanceFromActive?: number;
+	blockUI?: boolean;
+	isProductionExecutionPreview?: boolean;
+	isPaneActive?: boolean;
+	hidePagination?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	node: null,
+	nodes: () => [],
+	overrideOutputs: undefined,
+	distanceFromActive: 0,
+	blockUI: false,
+	isPaneActive: false,
+	isProductionExecutionPreview: false,
+	mappingEnabled: false,
+	isExecuting: false,
+	hidePagination: false,
 });
+const emit = defineEmits<{
+	search: [search: string];
+	runChange: [runIndex: number];
+	itemHover: [
+		item: {
+			outputIndex: number;
+			itemIndex: number;
+		} | null,
+	];
+	linkRun: [];
+	unlinkRun: [];
+	activatePane: [];
+	tableMounted: [
+		{
+			avgRowHeight: number;
+		},
+	];
+}>();
+
+const connectionType = ref<NodeConnectionType>(NodeConnectionType.Main);
+const dataSize = ref(0);
+const showData = ref(false);
+const userEnabledShowData = ref(false);
+const outputIndex = ref(0);
+const binaryDataDisplayVisible = ref(false);
+const binaryDataDisplayData = ref<IBinaryData | null>(null);
+const currentPage = ref(1);
+const pageSize = ref(10);
+const pageSizes = [1, 10, 25, 50, 100];
+
+const pinDataDiscoveryTooltipVisible = ref(false);
+const isControlledPinDataTooltip = ref(false);
+const search = ref('');
+
+const dataContainerRef = ref<HTMLDivElement>();
+
+const nodeTypesStore = useNodeTypesStore();
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+const sourceControlStore = useSourceControlStore();
+const rootStore = useRootStore();
+
+const toast = useToast();
+const route = useRoute();
+const nodeHelpers = useNodeHelpers();
+const externalHooks = useExternalHooks();
+const telemetry = useTelemetry();
+const i18n = useI18n();
+
+const node = toRef(props, 'node');
+
+const pinnedData = usePinnedData(node, {
+	runIndex: props.runIndex,
+	displayMode: ndvStore.getPanelDisplayMode(props.paneType),
+});
+const { isSubNodeType } = useNodeType({
+	node,
+});
+
+const isReadOnlyRoute = computed(() => route.meta.readOnlyCanvas === true);
+const isWaitNodeWaiting = computed(
+	() =>
+		workflowExecution.value?.status === 'waiting' &&
+		workflowExecution.value.data?.waitTill &&
+		workflowExecution.value?.data?.resultData?.lastNodeExecuted === node.value?.name,
+);
+
+const { activeNode } = storeToRefs(ndvStore);
+const displayMode = computed(() => ndvStore.getPanelDisplayMode(props.paneType));
+const nodeType = computed(() => {
+	if (!node.value) return null;
+
+	return nodeTypesStore.getNodeType(node.value.type, node.value.typeVersion);
+});
+
+const isSchemaView = computed(() => displayMode.value === 'schema');
+const isSearchInSchemaView = computed(() => isSchemaView.value && !!search.value);
+const displaysMultipleNodes = computed(
+	() => isSchemaView.value && props.paneType === 'input' && props.nodes.length > 0,
+);
+
+const isTriggerNode = computed(() => !!node.value && nodeTypesStore.isTriggerNode(node.value.type));
+
+const canPinData = computed(
+	() =>
+		!!node.value &&
+		pinnedData.canPinNode(false, currentOutputIndex.value) &&
+		!isPaneTypeInput.value &&
+		pinnedData.isValidNodeType.value &&
+		!(binaryData.value && binaryData.value.length > 0),
+);
+const displayModes = computed(() => {
+	const defaults: Array<{ label: string; value: IRunDataDisplayMode }> = [
+		{ label: i18n.baseText('runData.table'), value: 'table' },
+		{ label: i18n.baseText('runData.json'), value: 'json' },
+	];
+
+	if (binaryData.value.length) {
+		defaults.push({ label: i18n.baseText('runData.binary'), value: 'binary' });
+	}
+
+	const schemaView = { label: i18n.baseText('runData.schema'), value: 'schema' } as const;
+	if (isPaneTypeInput.value) {
+		defaults.unshift(schemaView);
+	} else {
+		defaults.push(schemaView);
+	}
+
+	if (
+		isPaneTypeOutput.value &&
+		activeNode.value?.type === HTML_NODE_TYPE &&
+		activeNode.value.parameters.operation === 'generateHtmlTemplate'
+	) {
+		defaults.unshift({ label: 'HTML', value: 'html' });
+	}
+
+	return defaults;
+});
+
+const hasNodeRun = computed(() =>
+	Boolean(
+		!props.isExecuting &&
+			node.value &&
+			((workflowRunData.value && workflowRunData.value.hasOwnProperty(node.value.name)) ||
+				pinnedData.hasData.value),
+	),
+);
+
+const isArtificialRecoveredEventItem = computed(
+	() => rawInputData.value?.[0]?.json?.isArtificialRecoveredEventItem,
+);
+
+const subworkflowExecutionError = computed(() => {
+	if (!node.value) return null;
+	return {
+		node: node.value,
+		messages: [workflowsStore.subWorkflowExecutionError?.message ?? ''],
+	} as NodeError;
+});
+
+const hasSubworkflowExecutionError = computed(() =>
+	Boolean(workflowsStore.subWorkflowExecutionError),
+);
+const workflowRunErrorAsNodeError = computed(() => {
+	if (!node.value) {
+		return null;
+	}
+
+	// If the node is a sub-node, we need to get the parent node error to check for input errors
+	if (isSubNodeType.value && props.paneType === 'input') {
+		const parentNode = props.workflow.getChildNodes(node.value?.name ?? '', 'ALL_NON_MAIN')[0];
+		return workflowRunData.value?.[parentNode]?.[props.runIndex]?.error as NodeError;
+	}
+	return workflowRunData.value?.[node.value?.name]?.[props.runIndex]?.error as NodeError;
+});
+
+const hasRunError = computed(() => Boolean(node.value && workflowRunErrorAsNodeError.value));
+
+const executionHints = computed(() => {
+	if (hasNodeRun.value) {
+		const hints = node.value && workflowRunData.value?.[node.value.name]?.[props.runIndex]?.hints;
+
+		if (hints) return hints;
+	}
+
+	return [];
+});
+
+const workflowExecution = computed(() => workflowsStore.getWorkflowExecution);
+const workflowRunData = computed(() => {
+	if (workflowExecution.value === null) {
+		return null;
+	}
+	const executionData: IRunExecutionData | undefined = workflowExecution.value.data;
+	if (executionData?.resultData) {
+		return executionData.resultData.runData;
+	}
+	return null;
+});
+const dataCount = computed(() => getDataCount(props.runIndex, currentOutputIndex.value));
+
+const unfilteredDataCount = computed(() =>
+	pinnedData.data.value ? pinnedData.data.value.length : rawInputData.value.length,
+);
+const dataSizeInMB = computed(() => (dataSize.value / (1024 * 1024)).toFixed(1));
+const maxOutputIndex = computed(() => {
+	if (node.value === null || props.runIndex === undefined) {
+		return 0;
+	}
+
+	const runData: IRunData | null = workflowRunData.value;
+
+	if (runData === null || !runData.hasOwnProperty(node.value.name)) {
+		return 0;
+	}
+
+	if (runData[node.value.name].length < props.runIndex) {
+		return 0;
+	}
+
+	if (runData[node.value.name][props.runIndex]) {
+		const taskData = runData[node.value.name][props.runIndex].data;
+		if (taskData?.main) {
+			return taskData.main.length - 1;
+		}
+	}
+
+	return 0;
+});
+const currentPageOffset = computed(() => pageSize.value * (currentPage.value - 1));
+const maxRunIndex = computed(() => {
+	if (!node.value) {
+		return 0;
+	}
+
+	const runData: IRunData | null = workflowRunData.value;
+
+	if (runData === null || !runData.hasOwnProperty(node.value.name)) {
+		return 0;
+	}
+
+	if (runData[node.value.name].length) {
+		return runData[node.value.name].length - 1;
+	}
+
+	return 0;
+});
+
+const rawInputData = computed(() =>
+	getRawInputData(props.runIndex, currentOutputIndex.value, connectionType.value),
+);
+
+const unfilteredInputData = computed(() => getPinDataOrLiveData(rawInputData.value));
+const inputData = computed(() => getFilteredData(unfilteredInputData.value));
+const inputDataPage = computed(() => {
+	const offset = pageSize.value * (currentPage.value - 1);
+	return inputData.value.slice(offset, offset + pageSize.value);
+});
+const jsonData = computed(() => executionDataToJson(inputData.value));
+const binaryData = computed(() => {
+	if (!node.value) {
+		return [];
+	}
+
+	return nodeHelpers
+		.getBinaryData(workflowRunData.value, node.value.name, props.runIndex, currentOutputIndex.value)
+		.filter((data) => Boolean(data && Object.keys(data).length));
+});
+const inputHtml = computed(() => String(inputData.value[0]?.json?.html ?? ''));
+const currentOutputIndex = computed(() => {
+	if (props.overrideOutputs?.length && !props.overrideOutputs.includes(outputIndex.value)) {
+		return props.overrideOutputs[0];
+	}
+
+	return outputIndex.value;
+});
+const branches = computed(() => {
+	const capitalize = (name: string) => name.charAt(0).toLocaleUpperCase() + name.slice(1);
+
+	const result: Array<ITab<number>> = [];
+
+	for (let i = 0; i <= maxOutputIndex.value; i++) {
+		if (props.overrideOutputs && !props.overrideOutputs.includes(i)) {
+			continue;
+		}
+		const totalItemsCount = getRawInputData(props.runIndex, i).length;
+		const itemsCount = getDataCount(props.runIndex, i);
+		const items = search.value
+			? i18n.baseText('ndv.search.items', {
+					adjustToNumber: totalItemsCount,
+					interpolate: { matched: itemsCount, total: totalItemsCount },
+				})
+			: i18n.baseText('ndv.output.items', {
+					adjustToNumber: itemsCount,
+					interpolate: { count: itemsCount },
+				});
+		let outputName = getOutputName(i);
+
+		if (`${outputName}` === `${i}`) {
+			outputName = `${i18n.baseText('ndv.output')} ${outputName}`;
+		} else {
+			const appendBranchWord = NODE_TYPES_EXCLUDED_FROM_OUTPUT_NAME_APPEND.includes(
+				node.value?.type ?? '',
+			)
+				? ''
+				: ` ${i18n.baseText('ndv.output.branch')}`;
+			outputName = capitalize(`${getOutputName(i)}${appendBranchWord}`);
+		}
+		result.push({
+			label:
+				(search.value && itemsCount) || totalItemsCount ? `${outputName} (${items})` : outputName,
+			value: i,
+		});
+	}
+	return result;
+});
+
+const editMode = computed(() => {
+	return isPaneTypeInput.value ? { enabled: false, value: '' } : ndvStore.outputPanelEditMode;
+});
+
+const isPaneTypeInput = computed(() => props.paneType === 'input');
+const isPaneTypeOutput = computed(() => props.paneType === 'output');
+
+const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
+const showIOSearch = computed(
+	() => hasNodeRun.value && !hasRunError.value && unfilteredInputData.value.length > 0,
+);
+const inputSelectLocation = computed(() => {
+	if (isSchemaView.value) return 'none';
+	if (!hasNodeRun.value) return 'header';
+	if (maxRunIndex.value > 0) return 'runs';
+	if (maxOutputIndex.value > 0 && branches.value.length > 1) {
+		return 'outputs';
+	}
+
+	return 'items';
+});
+
+const showIoSearchNoMatchContent = computed(
+	() => hasNodeRun.value && !inputData.value.length && !!search.value,
+);
+
+const parentNodeOutputData = computed(() => {
+	const parentNode = props.workflow.getParentNodesByDepth(node.value?.name ?? '')[0];
+	let parentNodeData: INodeExecutionData[] = [];
+
+	if (parentNode?.name) {
+		parentNodeData = nodeHelpers.getNodeInputData(
+			props.workflow.getNode(parentNode?.name),
+			props.runIndex,
+			outputIndex.value,
+			'input',
+			connectionType.value,
+		);
+	}
+
+	return parentNodeData;
+});
+
+const parentNodePinnedData = computed(() => {
+	const parentNode = props.workflow.getParentNodesByDepth(node.value?.name ?? '')[0];
+	return props.workflow.pinData?.[parentNode?.name || ''] ?? [];
+});
+
+const showPinButton = computed(() => {
+	if (!rawInputData.value.length && !pinnedData.hasData.value) {
+		return false;
+	}
+	if (editMode.value.enabled) {
+		return false;
+	}
+	if (binaryData.value?.length) {
+		return isPaneTypeOutput.value;
+	}
+	return canPinData.value;
+});
+
+const pinButtonDisabled = computed(
+	() =>
+		pinnedData.hasData.value ||
+		!rawInputData.value.length ||
+		!!binaryData.value?.length ||
+		isReadOnlyRoute.value ||
+		readOnlyEnv.value,
+);
+
+watch(node, (newNode, prevNode) => {
+	if (newNode?.id === prevNode?.id) return;
+	init();
+});
+
+watch(hasNodeRun, () => {
+	if (props.paneType === 'output') setDisplayMode();
+});
+
+watch(
+	inputDataPage,
+	(data: INodeExecutionData[]) => {
+		if (props.paneType && data) {
+			ndvStore.setNDVPanelDataIsEmpty({
+				panel: props.paneType,
+				isEmpty: data.every((item) => isEmpty(item.json)),
+			});
+		}
+	},
+	{ immediate: true, deep: true },
+);
+
+watch(jsonData, (data: IDataObject[], prevData: IDataObject[]) => {
+	if (isEqual(data, prevData)) return;
+	refreshDataSize();
+	if (dataCount.value) {
+		resetCurrentPageIfTooFar();
+	}
+	showPinDataDiscoveryTooltip(data);
+});
+
+watch(binaryData, (newData, prevData) => {
+	if (newData.length && !prevData.length && displayMode.value !== 'binary') {
+		switchToBinary();
+	} else if (!newData.length && displayMode.value === 'binary') {
+		onDisplayModeChange('table');
+	}
+});
+
+watch(currentOutputIndex, (branchIndex: number) => {
+	ndvStore.setNDVBranchIndex({
+		pane: props.paneType,
+		branchIndex,
+	});
+});
+
+watch(search, (newSearch) => {
+	emit('search', newSearch);
+});
+
+onMounted(() => {
+	init();
+
+	if (!isPaneTypeInput.value) {
+		showPinDataDiscoveryTooltip(jsonData.value);
+	}
+	ndvStore.setNDVBranchIndex({
+		pane: props.paneType,
+		branchIndex: currentOutputIndex.value,
+	});
+
+	if (props.paneType === 'output') {
+		setDisplayMode();
+		activatePane();
+	}
+
+	if (hasRunError.value && node.value) {
+		const error = workflowRunData.value?.[node.value.name]?.[props.runIndex]?.error;
+		const errorsToTrack = ['unknown error'];
+
+		if (error && errorsToTrack.some((e) => error.message?.toLowerCase().includes(e))) {
+			telemetry.track(
+				'User encountered an error',
+				{
+					node: node.value.type,
+					errorMessage: error.message,
+					nodeVersion: node.value.typeVersion,
+					n8nVersion: rootStore.versionCli,
+				},
+				{
+					withPostHog: true,
+				},
+			);
+		}
+	}
+});
+
+onBeforeUnmount(() => {
+	hidePinDataDiscoveryTooltip();
+});
+
+function getResolvedNodeOutputs() {
+	if (node.value && nodeType.value) {
+		const workflowNode = props.workflow.getNode(node.value.name);
+
+		if (workflowNode) {
+			const outputs = NodeHelpers.getNodeOutputs(props.workflow, workflowNode, nodeType.value);
+			return outputs;
+		}
+	}
+	return [];
+}
+function shouldHintBeDisplayed(hint: NodeHint): boolean {
+	const { location, whenToDisplay } = hint;
+
+	if (location) {
+		if (location === 'ndv' && !['input', 'output'].includes(props.paneType)) {
+			return false;
+		}
+		if (location === 'inputPane' && props.paneType !== 'input') {
+			return false;
+		}
+
+		if (location === 'outputPane' && props.paneType !== 'output') {
+			return false;
+		}
+	}
+
+	if (whenToDisplay === 'afterExecution' && !hasNodeRun.value) {
+		return false;
+	}
+
+	if (whenToDisplay === 'beforeExecution' && hasNodeRun.value) {
+		return false;
+	}
+
+	return true;
+}
+function getNodeHints(): NodeHint[] {
+	try {
+		if (node.value && nodeType.value) {
+			const workflowNode = props.workflow.getNode(node.value.name);
+
+			if (workflowNode) {
+				const nodeHints = NodeHelpers.getNodeHints(props.workflow, workflowNode, nodeType.value, {
+					runExecutionData: workflowExecution.value?.data ?? null,
+					runIndex: props.runIndex,
+					connectionInputData: parentNodeOutputData.value,
+				});
+
+				const hasMultipleInputItems =
+					parentNodeOutputData.value.length > 1 || parentNodePinnedData.value.length > 1;
+
+				const nodeOutputData =
+					workflowRunData.value?.[node.value.name]?.[props.runIndex]?.data?.main?.[0] ?? [];
+
+				const genericHints = getGenericHints({
+					workflowNode,
+					node: node.value,
+					nodeType: nodeType.value,
+					nodeOutputData,
+					workflow: props.workflow,
+					hasNodeRun: hasNodeRun.value,
+					hasMultipleInputItems,
+				});
+
+				return executionHints.value.concat(nodeHints, genericHints).filter(shouldHintBeDisplayed);
+			}
+		}
+	} catch (error) {
+		console.error('Error while getting node hints', error);
+	}
+
+	return [];
+}
+
+function onItemHover(itemIndex: number | null) {
+	if (itemIndex === null) {
+		emit('itemHover', null);
+
+		return;
+	}
+	emit('itemHover', {
+		outputIndex: currentOutputIndex.value,
+		itemIndex,
+	});
+}
+
+function onClickDataPinningDocsLink() {
+	telemetry.track('User clicked ndv link', {
+		workflow_id: workflowsStore.workflowId,
+		push_ref: props.pushRef,
+		node_type: activeNode.value?.type,
+		pane: 'output',
+		type: 'data-pinning-docs',
+	});
+}
+
+function showPinDataDiscoveryTooltip(value: IDataObject[]) {
+	if (!isTriggerNode.value) {
+		return;
+	}
+
+	const pinDataDiscoveryFlag = useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value;
+
+	if (value && value.length > 0 && !isReadOnlyRoute.value && !pinDataDiscoveryFlag) {
+		pinDataDiscoveryComplete();
+
+		setTimeout(() => {
+			isControlledPinDataTooltip.value = true;
+			pinDataDiscoveryTooltipVisible.value = true;
+			dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: true });
+		}, 500); // Wait for NDV to open
+	}
+}
+
+function hidePinDataDiscoveryTooltip() {
+	if (pinDataDiscoveryTooltipVisible.value) {
+		isControlledPinDataTooltip.value = false;
+		pinDataDiscoveryTooltipVisible.value = false;
+		dataPinningEventBus.emit('data-pinning-discovery', { isTooltipVisible: false });
+	}
+}
+
+function pinDataDiscoveryComplete() {
+	useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG).value = 'true';
+	useStorage(LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG).value = 'true';
+}
+
+function enterEditMode({ origin }: EnterEditModeArgs) {
+	const inputData = pinnedData.data.value
+		? clearJsonKey(pinnedData.data.value)
+		: executionDataToJson(rawInputData.value);
+
+	const inputDataLength = Array.isArray(inputData)
+		? inputData.length
+		: Object.keys(inputData ?? {}).length;
+
+	const data = inputDataLength > 0 ? inputData : TEST_PIN_DATA;
+
+	ndvStore.setOutputPanelEditModeEnabled(true);
+	ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
+
+	telemetry.track('User opened ndv edit state', {
+		node_type: activeNode.value?.type,
+		click_type: origin === 'editIconButton' ? 'button' : 'link',
+		push_ref: props.pushRef,
+		run_index: props.runIndex,
+		is_output_present: hasNodeRun.value || pinnedData.hasData.value,
+		view: !hasNodeRun.value && !pinnedData.hasData.value ? 'undefined' : displayMode.value,
+		is_data_pinned: pinnedData.hasData.value,
+	});
+}
+
+function onClickCancelEdit() {
+	ndvStore.setOutputPanelEditModeEnabled(false);
+	ndvStore.setOutputPanelEditModeValue('');
+	onExitEditMode({ type: 'cancel' });
+}
+
+function onClickSaveEdit() {
+	if (!node.value) {
+		return;
+	}
+
+	const { value } = editMode.value;
+
+	toast.clearAllStickyNotifications();
+
+	try {
+		const clearedValue = clearJsonKey(value) as INodeExecutionData[];
+		try {
+			pinnedData.setData(clearedValue, 'save-edit');
+		} catch (error) {
+			// setData function already shows toasts on error, so just return here
+			return;
+		}
+	} catch (error) {
+		toast.showError(error, i18n.baseText('ndv.pinData.error.syntaxError.title'));
+		return;
+	}
+
+	ndvStore.setOutputPanelEditModeEnabled(false);
+
+	onExitEditMode({ type: 'save' });
+}
+
+function onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
+	telemetry.track('User closed ndv edit state', {
+		node_type: activeNode.value?.type,
+		push_ref: props.pushRef,
+		run_index: props.runIndex,
+		view: displayMode.value,
+		type,
+	});
+}
+
+async function onTogglePinData({ source }: { source: PinDataSource | UnpinDataSource }) {
+	if (!node.value) {
+		return;
+	}
+
+	if (source === 'pin-icon-click') {
+		const telemetryPayload = {
+			node_type: activeNode.value?.type,
+			push_ref: props.pushRef,
+			run_index: props.runIndex,
+			view: !hasNodeRun.value && !pinnedData.hasData.value ? 'none' : displayMode.value,
+		};
+
+		void externalHooks.run('runData.onTogglePinData', telemetryPayload);
+		telemetry.track('User clicked pin data icon', telemetryPayload);
+	}
+
+	nodeHelpers.updateNodeParameterIssues(node.value);
+
+	if (pinnedData.hasData.value) {
+		pinnedData.unsetData(source);
+		return;
+	}
+
+	try {
+		pinnedData.setData(rawInputData.value, 'pin-icon-click');
+	} catch (error) {
+		console.error(error);
+		return;
+	}
+
+	if (maxRunIndex.value > 0) {
+		toast.showToast({
+			title: i18n.baseText('ndv.pinData.pin.multipleRuns.title', {
+				interpolate: {
+					index: `${props.runIndex}`,
+				},
+			}),
+			message: i18n.baseText('ndv.pinData.pin.multipleRuns.description'),
+			type: 'success',
+			duration: 2000,
+		});
+	}
+
+	hidePinDataDiscoveryTooltip();
+	pinDataDiscoveryComplete();
+}
+
+function switchToBinary() {
+	onDisplayModeChange('binary');
+}
+
+function onBranchChange(value: number) {
+	outputIndex.value = value;
+
+	telemetry.track('User changed ndv branch', {
+		push_ref: props.pushRef,
+		branch_index: value,
+		node_type: activeNode.value?.type,
+		node_type_input_selection: nodeType.value ? nodeType.value.name : '',
+		pane: props.paneType,
+	});
+}
+
+function showTooMuchData() {
+	showData.value = true;
+	userEnabledShowData.value = true;
+	telemetry.track('User clicked ndv button', {
+		node_type: activeNode.value?.type,
+		workflow_id: workflowsStore.workflowId,
+		push_ref: props.pushRef,
+		pane: props.paneType,
+		type: 'showTooMuchData',
+	});
+}
+
+function toggleLinkRuns() {
+	if (props.linkedRuns) {
+		unlinkRun();
+	} else {
+		linkRun();
+	}
+}
+
+function linkRun() {
+	emit('linkRun');
+}
+
+function unlinkRun() {
+	emit('unlinkRun');
+}
+
+function onCurrentPageChange(value: number) {
+	currentPage.value = value;
+	telemetry.track('User changed ndv page', {
+		node_type: activeNode.value?.type,
+		workflow_id: workflowsStore.workflowId,
+		push_ref: props.pushRef,
+		pane: props.paneType,
+		page_selected: currentPage.value,
+		page_size: pageSize.value,
+		items_total: dataCount.value,
+	});
+}
+
+function resetCurrentPageIfTooFar() {
+	const maxPage = Math.ceil(dataCount.value / pageSize.value);
+	if (maxPage < currentPage.value) {
+		currentPage.value = maxPage;
+	}
+}
+
+function onPageSizeChange(newPageSize: number) {
+	pageSize.value = newPageSize;
+
+	resetCurrentPageIfTooFar();
+
+	telemetry.track('User changed ndv page size', {
+		node_type: activeNode.value?.type,
+		workflow_id: workflowsStore.workflowId,
+		push_ref: props.pushRef,
+		pane: props.paneType,
+		page_selected: currentPage.value,
+		page_size: pageSize.value,
+		items_total: dataCount.value,
+	});
+}
+
+function onDisplayModeChange(newDisplayMode: IRunDataDisplayMode) {
+	const previous = displayMode.value;
+	ndvStore.setPanelDisplayMode({ pane: props.paneType, mode: newDisplayMode });
+
+	if (!userEnabledShowData.value) updateShowData();
+
+	if (dataContainerRef.value) {
+		const dataDisplay = dataContainerRef.value.children[0];
+
+		if (dataDisplay) {
+			dataDisplay.scrollTo(0, 0);
+		}
+	}
+
+	closeBinaryDataDisplay();
+	void externalHooks.run('runData.displayModeChanged', {
+		newValue: newDisplayMode,
+		oldValue: previous,
+	});
+	if (activeNode.value) {
+		telemetry.track('User changed ndv item view', {
+			previous_view: previous,
+			new_view: newDisplayMode,
+			node_type: activeNode.value.type,
+			workflow_id: workflowsStore.workflowId,
+			push_ref: props.pushRef,
+			pane: props.paneType,
+		});
+	}
+}
+
+function getRunLabel(option: number) {
+	let itemsCount = 0;
+	for (let i = 0; i <= maxOutputIndex.value; i++) {
+		itemsCount += getPinDataOrLiveData(getRawInputData(option - 1, i)).length;
+	}
+	const items = i18n.baseText('ndv.output.items', {
+		adjustToNumber: itemsCount,
+		interpolate: { count: itemsCount },
+	});
+	const itemsLabel = itemsCount > 0 ? ` (${items})` : '';
+	return option + i18n.baseText('ndv.output.of') + (maxRunIndex.value + 1) + itemsLabel;
+}
+
+function getRawInputData(
+	runIndex: number,
+	outputIndex: number,
+	connectionType: NodeConnectionType = NodeConnectionType.Main,
+): INodeExecutionData[] {
+	let inputData: INodeExecutionData[] = [];
+
+	if (node.value) {
+		inputData = nodeHelpers.getNodeInputData(
+			node.value,
+			runIndex,
+			outputIndex,
+			props.paneType,
+			connectionType,
+		);
+	}
+
+	if (inputData.length === 0 || !Array.isArray(inputData)) {
+		return [];
+	}
+
+	return inputData;
+}
+
+function getPinDataOrLiveData(data: INodeExecutionData[]): INodeExecutionData[] {
+	if (pinnedData.data.value && !props.isProductionExecutionPreview) {
+		return Array.isArray(pinnedData.data.value)
+			? pinnedData.data.value.map((value) => ({
+					json: value,
+				}))
+			: [
+					{
+						json: pinnedData.data.value,
+					},
+				];
+	}
+	return data;
+}
+
+function getFilteredData(data: INodeExecutionData[]): INodeExecutionData[] {
+	if (!search.value || isSchemaView.value) {
+		return data;
+	}
+
+	currentPage.value = 1;
+	return data.filter(({ json }) => searchInObject(json, search.value));
+}
+
+function getDataCount(
+	runIndex: number,
+	outputIndex: number,
+	connectionType: NodeConnectionType = NodeConnectionType.Main,
+) {
+	if (!node.value) {
+		return 0;
+	}
+
+	if (workflowRunData.value?.[node.value.name]?.[runIndex]?.hasOwnProperty('error')) {
+		return 1;
+	}
+
+	const rawInputData = getRawInputData(runIndex, outputIndex, connectionType);
+	const pinOrLiveData = getPinDataOrLiveData(rawInputData);
+	return getFilteredData(pinOrLiveData).length;
+}
+
+function init() {
+	// Reset the selected output index every time another node gets selected
+	outputIndex.value = 0;
+	refreshDataSize();
+	closeBinaryDataDisplay();
+	let outputTypes: NodeConnectionType[] = [];
+	if (node.value && nodeType.value) {
+		const outputs = getResolvedNodeOutputs();
+		outputTypes = NodeHelpers.getConnectionTypes(outputs);
+	}
+	connectionType.value = outputTypes.length === 0 ? NodeConnectionType.Main : outputTypes[0];
+	if (binaryData.value.length > 0) {
+		ndvStore.setPanelDisplayMode({
+			pane: props.paneType,
+			mode: 'binary',
+		});
+	} else if (displayMode.value === 'binary') {
+		ndvStore.setPanelDisplayMode({
+			pane: props.paneType,
+			mode: 'table',
+		});
+	}
+}
+
+function closeBinaryDataDisplay() {
+	binaryDataDisplayVisible.value = false;
+	binaryDataDisplayData.value = null;
+}
+
+function isViewable(index: number, key: string | number): boolean {
+	const { fileType } = binaryData.value[index][key];
+	return (
+		!!fileType && ['image', 'audio', 'video', 'text', 'json', 'pdf', 'html'].includes(fileType)
+	);
+}
+
+function isDownloadable(index: number, key: string | number): boolean {
+	const { mimeType, fileName } = binaryData.value[index][key];
+	return !!(mimeType && fileName);
+}
+
+async function downloadBinaryData(index: number, key: string | number) {
+	const { id, data, fileName, fileExtension, mimeType } = binaryData.value[index][key];
+
+	if (id) {
+		const url = workflowsStore.getBinaryUrl(id, 'download', fileName ?? '', mimeType);
+		saveAs(url, [fileName, fileExtension].join('.'));
+		return;
+	} else {
+		const bufferString = 'data:' + mimeType + ';base64,' + data;
+		const blob = await fetch(bufferString).then(async (d) => await d.blob());
+		saveAs(blob, fileName);
+	}
+}
+
+async function downloadJsonData() {
+	const fileName = (node.value?.name ?? '').replace(/[^\w\d]/g, '_');
+	const blob = new Blob([JSON.stringify(rawInputData.value, null, 2)], {
+		type: 'application/json',
+	});
+
+	saveAs(blob, `${fileName}.json`);
+}
+
+function displayBinaryData(index: number, key: string | number) {
+	const { data, mimeType } = binaryData.value[index][key];
+	binaryDataDisplayVisible.value = true;
+
+	binaryDataDisplayData.value = {
+		node: node.value?.name,
+		runIndex: props.runIndex,
+		outputIndex: currentOutputIndex.value,
+		index,
+		key,
+		data,
+		mimeType,
+	};
+}
+
+function getOutputName(outputIndex: number) {
+	if (node.value === null) {
+		return outputIndex + 1;
+	}
+
+	const outputs = getResolvedNodeOutputs();
+	const outputConfiguration = outputs?.[outputIndex] as INodeOutputConfiguration;
+
+	if (outputConfiguration && isObject(outputConfiguration)) {
+		return outputConfiguration?.displayName;
+	}
+	if (!nodeType.value?.outputNames || nodeType.value.outputNames.length <= outputIndex) {
+		return outputIndex + 1;
+	}
+
+	return nodeType.value.outputNames[outputIndex];
+}
+
+function refreshDataSize() {
+	// Hide by default the data from being displayed
+	showData.value = false;
+	const jsonItems = inputDataPage.value.map((item) => item.json);
+	const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
+	dataSize.value = byteSize;
+	updateShowData();
+}
+
+function updateShowData() {
+	// Display data if it is reasonably small (< 1MB)
+	showData.value =
+		(isSchemaView.value && dataSize.value < MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
+		dataSize.value < MAX_DISPLAY_DATA_SIZE;
+}
+
+function onRunIndexChange(run: number) {
+	emit('runChange', run);
+}
+
+function enableNode() {
+	if (node.value) {
+		const updateInformation = {
+			name: node.value.name,
+			properties: {
+				disabled: !node.value.disabled,
+			} as IDataObject,
+		} as INodeUpdatePropertiesInformation;
+
+		workflowsStore.updateNodeProperties(updateInformation);
+	}
+}
+
+function setDisplayMode() {
+	if (!activeNode.value) return;
+
+	const shouldDisplayHtml =
+		activeNode.value.type === HTML_NODE_TYPE &&
+		activeNode.value.parameters.operation === 'generateHtmlTemplate';
+
+	if (shouldDisplayHtml) {
+		ndvStore.setPanelDisplayMode({
+			pane: 'output',
+			mode: 'html',
+		});
+	}
+}
+
+function activatePane() {
+	emit('activatePane');
+}
+
+function onSearchClear() {
+	search.value = '';
+	document.dispatchEvent(new KeyboardEvent('keyup', { key: '/' }));
+}
+
+defineExpose({ enterEditMode });
 </script>
 
 <template>
 	<div :class="['run-data', $style.container]" @mouseover="activatePane">
-		<n8n-callout
+		<N8nCallout
 			v-if="pinnedData.hasData.value && !editMode.enabled && !isProductionExecutionPreview"
 			theme="secondary"
 			icon="thumbtack"
@@ -1224,7 +1191,7 @@ export default defineComponent({
 		>
 			{{ $locale.baseText('runData.pindata.thisDataIsPinned') }}
 			<span v-if="!isReadOnlyRoute && !readOnlyEnv" class="ml-4xs">
-				<n8n-link
+				<N8nLink
 					theme="secondary"
 					size="small"
 					underline
@@ -1233,11 +1200,11 @@ export default defineComponent({
 					@click.stop="onTogglePinData({ source: 'banner-link' })"
 				>
 					{{ $locale.baseText('runData.pindata.unpin') }}
-				</n8n-link>
+				</N8nLink>
 			</span>
 			<template #trailingContent>
-				<n8n-link
-					:to="dataPinningDocsUrl"
+				<N8nLink
+					:to="DATA_PINNING_DOCS_URL"
 					size="small"
 					theme="secondary"
 					bold
@@ -1245,9 +1212,9 @@ export default defineComponent({
 					@click="onClickDataPinningDocsLink"
 				>
 					{{ $locale.baseText('runData.pindata.learnMore') }}
-				</n8n-link>
+				</N8nLink>
 			</template>
-		</n8n-callout>
+		</N8nCallout>
 
 		<BinaryDataDisplay
 			v-if="binaryDataDisplayData"
@@ -1277,7 +1244,7 @@ export default defineComponent({
 					/>
 				</Suspense>
 
-				<n8n-radio-buttons
+				<N8nRadioButtons
 					v-show="
 						hasNodeRun && (inputData.length || binaryData.length || search) && !editMode.enabled
 					"
@@ -1287,7 +1254,7 @@ export default defineComponent({
 					@update:model-value="onDisplayModeChange"
 				/>
 
-				<n8n-icon-button
+				<N8nIconButton
 					v-if="canPinData && !isReadOnlyRoute && !readOnlyEnv"
 					v-show="!editMode.enabled"
 					:title="$locale.baseText('runData.editOutput')"
@@ -1307,18 +1274,18 @@ export default defineComponent({
 						pinDataDiscoveryTooltipContent:
 							isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible,
 					}"
-					:data-pinning-docs-url="dataPinningDocsUrl"
+					:data-pinning-docs-url="DATA_PINNING_DOCS_URL"
 					:pinned-data="pinnedData"
 					@toggle-pin-data="onTogglePinData({ source: 'pin-icon-click' })"
 				/>
 
 				<div v-show="editMode.enabled" :class="$style.editModeActions">
-					<n8n-button
+					<N8nButton
 						type="tertiary"
 						:label="$locale.baseText('runData.editor.cancel')"
 						@click="onClickCancelEdit"
 					/>
-					<n8n-button
+					<N8nButton
 						class="ml-2xs"
 						type="primary"
 						:label="$locale.baseText('runData.editor.save')"
@@ -1339,7 +1306,7 @@ export default defineComponent({
 		>
 			<slot v-if="inputSelectLocation === 'runs'" name="input-select"></slot>
 
-			<n8n-select
+			<N8nSelect
 				:model-value="runIndex"
 				:class="$style.runSelectorInner"
 				size="small"
@@ -1349,19 +1316,19 @@ export default defineComponent({
 				@click.stop
 			>
 				<template #prepend>{{ $locale.baseText('ndv.output.run') }}</template>
-				<n8n-option
+				<N8nOption
 					v-for="option in maxRunIndex + 1"
 					:key="option"
 					:label="getRunLabel(option)"
 					:value="option - 1"
-				></n8n-option>
-			</n8n-select>
+				></N8nOption>
+			</N8nSelect>
 
-			<n8n-tooltip v-if="canLinkRuns" placement="right">
+			<N8nTooltip v-if="canLinkRuns" placement="right">
 				<template #content>
 					{{ $locale.baseText(linkedRuns ? 'runData.unlinking.hint' : 'runData.linking.hint') }}
 				</template>
-				<n8n-icon-button
+				<N8nIconButton
 					:icon="linkedRuns ? 'unlink' : 'link'"
 					class="linkRun"
 					text
@@ -1370,21 +1337,21 @@ export default defineComponent({
 					data-test-id="link-run"
 					@click="toggleLinkRuns"
 				/>
-			</n8n-tooltip>
+			</N8nTooltip>
 
 			<slot name="run-info"></slot>
 		</div>
 
 		<slot v-if="!displaysMultipleNodes" name="before-data" />
 
-		<n8n-callout
+		<N8nCallout
 			v-for="hint in getNodeHints()"
 			:key="hint.message"
 			:class="$style.hintCallout"
 			:theme="hint.type || 'info'"
 		>
-			<n8n-text size="small" v-n8n-html="hint.message"></n8n-text>
-		</n8n-callout>
+			<N8nText v-n8n-html="hint.message" size="small"></N8nText>
+		</N8nCallout>
 
 		<div
 			v-if="maxOutputIndex > 0 && branches.length > 1 && !displaysMultipleNodes"
@@ -1394,7 +1361,7 @@ export default defineComponent({
 			<slot v-if="inputSelectLocation === 'outputs'" name="input-select"></slot>
 
 			<div :class="$style.tabs">
-				<n8n-tabs
+				<N8nTabs
 					:model-value="currentOutputIndex"
 					:options="branches"
 					@update:model-value="onBranchChange"
@@ -1417,28 +1384,28 @@ export default defineComponent({
 		>
 			<slot v-if="inputSelectLocation === 'items'" name="input-select"></slot>
 
-			<n8n-text v-if="search" :class="$style.itemsText">
+			<N8nText v-if="search" :class="$style.itemsText">
 				{{
 					$locale.baseText('ndv.search.items', {
 						adjustToNumber: unfilteredDataCount,
 						interpolate: { matched: dataCount, total: unfilteredDataCount },
 					})
 				}}
-			</n8n-text>
-			<n8n-text v-else :class="$style.itemsText">
+			</N8nText>
+			<N8nText v-else :class="$style.itemsText">
 				{{
 					$locale.baseText('ndv.output.items', {
 						adjustToNumber: dataCount,
 						interpolate: { count: dataCount },
 					})
 				}}
-			</n8n-text>
+			</N8nText>
 		</div>
 
-		<div ref="dataContainer" :class="$style.dataContainer" data-test-id="ndv-data-container">
+		<div ref="dataContainerRef" :class="$style.dataContainer" data-test-id="ndv-data-container">
 			<div v-if="isExecuting" :class="$style.center" data-test-id="ndv-executing">
-				<div :class="$style.spinner"><n8n-spinner type="ring" /></div>
-				<n8n-text>{{ executingMessage }}</n8n-text>
+				<div :class="$style.spinner"><N8nSpinner type="ring" /></div>
+				<N8nText>{{ executingMessage }}</N8nText>
 			</div>
 
 			<div v-else-if="editMode.enabled" :class="$style.editMode">
@@ -1450,17 +1417,19 @@ export default defineComponent({
 					/>
 				</div>
 				<div :class="$style.editModeFooter">
-					<n8n-info-tip :bold="false" :class="$style.editModeFooterInfotip">
+					<N8nInfoTip :bold="false" :class="$style.editModeFooterInfotip">
 						{{ $locale.baseText('runData.editor.copyDataInfo') }}
-						<n8n-link :to="dataEditingDocsUrl" size="small">
+						<N8nLink :to="DATA_EDITING_DOCS_URL" size="small">
 							{{ $locale.baseText('generic.learnMore') }}
-						</n8n-link>
-					</n8n-info-tip>
+						</N8nLink>
+					</N8nInfoTip>
 				</div>
 			</div>
 
 			<div
-				v-else-if="paneType === 'output' && hasSubworkflowExecutionError"
+				v-else-if="
+					paneType === 'output' && hasSubworkflowExecutionError && subworkflowExecutionError
+				"
 				:class="$style.stretchVertically"
 			>
 				<NodeErrorView :error="subworkflowExecutionError" :class="$style.errorDisplay" />
@@ -1481,12 +1450,12 @@ export default defineComponent({
 				v-else-if="paneType === 'input' && !displaysMultipleNodes && node?.disabled"
 				:class="$style.center"
 			>
-				<n8n-text>
+				<N8nText>
 					{{ $locale.baseText('ndv.input.disabled', { interpolate: { nodeName: node.name } }) }}
-					<n8n-link @click="enableNode">
+					<N8nLink @click="enableNode">
 						{{ $locale.baseText('ndv.input.disabled.cta') }}
-					</n8n-link>
-				</n8n-text>
+					</N8nLink>
+				</N8nText>
 			</div>
 
 			<div v-else-if="hasNodeRun && isArtificialRecoveredEventItem" :class="$style.center">
@@ -1494,13 +1463,13 @@ export default defineComponent({
 			</div>
 
 			<div v-else-if="hasNodeRun && hasRunError" :class="$style.stretchVertically">
-				<n8n-text v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
+				<N8nText v-if="isPaneTypeInput" :class="$style.center" size="large" tag="p" bold>
 					{{
 						$locale.baseText('nodeErrorView.inputPanel.previousNodeError.title', {
 							interpolate: { nodeName: node?.name ?? '' },
 						})
 					}}
-				</n8n-text>
+				</N8nText>
 				<div v-else-if="$slots['content']">
 					<NodeErrorView
 						v-if="workflowRunErrorAsNodeError"
@@ -1524,10 +1493,10 @@ export default defineComponent({
 				:class="$style.center"
 			>
 				<div v-if="search">
-					<n8n-text tag="h3" size="large">{{
+					<N8nText tag="h3" size="large">{{
 						$locale.baseText('ndv.search.noMatch.title')
-					}}</n8n-text>
-					<n8n-text>
+					}}</N8nText>
+					<N8nText>
 						<i18n-t keypath="ndv.search.noMatch.description" tag="span">
 							<template #link>
 								<a href="#" @click="onSearchClear">
@@ -1535,11 +1504,11 @@ export default defineComponent({
 								</a>
 							</template>
 						</i18n-t>
-					</n8n-text>
+					</N8nText>
 				</div>
-				<n8n-text v-else>
+				<N8nText v-else>
 					{{ noDataInBranchMessage }}
-				</n8n-text>
+				</N8nText>
 			</div>
 
 			<div v-else-if="hasNodeRun && !inputData.length && !search" :class="$style.center">
@@ -1547,8 +1516,8 @@ export default defineComponent({
 			</div>
 
 			<div v-else-if="hasNodeRun && !showData" :class="$style.center">
-				<n8n-text :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</n8n-text>
-				<n8n-text align="center" tag="div"
+				<N8nText :bold="true" color="text-dark" size="large">{{ tooMuchDataTitle }}</N8nText>
+				<N8nText align="center" tag="div"
 					><span
 						v-n8n-html="
 							$locale.baseText('ndv.output.tooMuchData.message', {
@@ -1556,15 +1525,15 @@ export default defineComponent({
 							})
 						"
 					></span
-				></n8n-text>
+				></N8nText>
 
-				<n8n-button
+				<N8nButton
 					outline
 					:label="$locale.baseText('ndv.output.tooMuchData.showDataAnyway')"
 					@click="showTooMuchData"
 				/>
 
-				<n8n-button
+				<N8nButton
 					size="small"
 					:label="$locale.baseText('runData.downloadBinaryData')"
 					@click="downloadJsonData()"
@@ -1584,19 +1553,17 @@ export default defineComponent({
 				"
 				:class="$style.center"
 			>
-				<n8n-text>
+				<N8nText>
 					{{ $locale.baseText('runData.switchToBinary.info') }}
 					<a @click="switchToBinary">
 						{{ $locale.baseText('runData.switchToBinary.binary') }}
 					</a>
-				</n8n-text>
+				</N8nText>
 			</div>
 
 			<div v-else-if="showIoSearchNoMatchContent" :class="$style.center">
-				<n8n-text tag="h3" size="large">{{
-					$locale.baseText('ndv.search.noMatch.title')
-				}}</n8n-text>
-				<n8n-text>
+				<N8nText tag="h3" size="large">{{ $locale.baseText('ndv.search.noMatch.title') }}</N8nText>
+				<N8nText>
 					<i18n-t keypath="ndv.search.noMatch.description" tag="span">
 						<template #link>
 							<a href="#" @click="onSearchClear">
@@ -1604,7 +1571,7 @@ export default defineComponent({
 							</a>
 						</template>
 					</i18n-t>
-				</n8n-text>
+				</N8nText>
 			</div>
 
 			<Suspense v-else-if="hasNodeRun && displayMode === 'table' && node">
@@ -1618,7 +1585,7 @@ export default defineComponent({
 					:total-runs="maxRunIndex"
 					:has-default-hover-state="paneType === 'input' && !search"
 					:search="search"
-					@mounted="$emit('tableMounted', $event)"
+					@mounted="emit('tableMounted', $event)"
 					@active-row-changed="onItemHover"
 					@display-mode-change="onDisplayModeChange"
 				/>
@@ -1661,9 +1628,9 @@ export default defineComponent({
 			</Suspense>
 
 			<div v-else-if="displayMode === 'binary' && binaryData.length === 0" :class="$style.center">
-				<n8n-text align="center" tag="div">{{
+				<N8nText align="center" tag="div">{{
 					$locale.baseText('runData.noBinaryDataFound')
-				}}</n8n-text>
+				}}</N8nText>
 			</div>
 
 			<div v-else-if="displayMode === 'binary'" :class="$style.dataDisplay">
@@ -1686,54 +1653,54 @@ export default defineComponent({
 								</div>
 								<div v-if="binaryData.fileName">
 									<div>
-										<n8n-text size="small" :bold="true"
+										<N8nText size="small" :bold="true"
 											>{{ $locale.baseText('runData.fileName') }}:
-										</n8n-text>
+										</N8nText>
 									</div>
 									<div :class="$style.binaryValue">{{ binaryData.fileName }}</div>
 								</div>
 								<div v-if="binaryData.directory">
 									<div>
-										<n8n-text size="small" :bold="true"
+										<N8nText size="small" :bold="true"
 											>{{ $locale.baseText('runData.directory') }}:
-										</n8n-text>
+										</N8nText>
 									</div>
 									<div :class="$style.binaryValue">{{ binaryData.directory }}</div>
 								</div>
 								<div v-if="binaryData.fileExtension">
 									<div>
-										<n8n-text size="small" :bold="true"
-											>{{ $locale.baseText('runData.fileExtension') }}:</n8n-text
+										<N8nText size="small" :bold="true"
+											>{{ $locale.baseText('runData.fileExtension') }}:</N8nText
 										>
 									</div>
 									<div :class="$style.binaryValue">{{ binaryData.fileExtension }}</div>
 								</div>
 								<div v-if="binaryData.mimeType">
 									<div>
-										<n8n-text size="small" :bold="true"
+										<N8nText size="small" :bold="true"
 											>{{ $locale.baseText('runData.mimeType') }}:
-										</n8n-text>
+										</N8nText>
 									</div>
 									<div :class="$style.binaryValue">{{ binaryData.mimeType }}</div>
 								</div>
 								<div v-if="binaryData.fileSize">
 									<div>
-										<n8n-text size="small" :bold="true"
+										<N8nText size="small" :bold="true"
 											>{{ $locale.baseText('runData.fileSize') }}:
-										</n8n-text>
+										</N8nText>
 									</div>
 									<div :class="$style.binaryValue">{{ binaryData.fileSize }}</div>
 								</div>
 
 								<div :class="$style.binaryButtonContainer">
-									<n8n-button
+									<N8nButton
 										v-if="isViewable(index, key)"
 										size="small"
 										:label="$locale.baseText('runData.showBinaryData')"
 										data-test-id="ndv-view-binary-data"
 										@click="displayBinaryData(index, key)"
 									/>
-									<n8n-button
+									<N8nButton
 										v-if="isDownloadable(index, key)"
 										size="small"
 										type="secondary"
@@ -1775,20 +1742,19 @@ export default defineComponent({
 			</el-pagination>
 
 			<div :class="$style.pageSizeSelector">
-				<n8n-select
+				<N8nSelect
 					size="mini"
 					:model-value="pageSize"
 					teleported
 					@update:model-value="onPageSizeChange"
 				>
 					<template #prepend>{{ $locale.baseText('ndv.output.pageSize') }}</template>
-					<n8n-option v-for="size in pageSizes" :key="size" :label="size" :value="size">
-					</n8n-option>
-					<n8n-option :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </n8n-option>
-				</n8n-select>
+					<N8nOption v-for="size in pageSizes" :key="size" :label="size" :value="size"> </N8nOption>
+					<N8nOption :label="$locale.baseText('ndv.output.all')" :value="dataCount"> </N8nOption>
+				</N8nSelect>
 			</div>
 		</div>
-		<n8n-block-ui :show="blockUI" :class="$style.uiBlocker" />
+		<N8nBlockUi :show="blockUI" :class="$style.uiBlocker" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/RunDataPinButton.vue b/packages/editor-ui/src/components/RunDataPinButton.vue
index 8eadc720e6..ff01e78645 100644
--- a/packages/editor-ui/src/components/RunDataPinButton.vue
+++ b/packages/editor-ui/src/components/RunDataPinButton.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from '@/composables/useI18n';
 import type { usePinnedData } from '@/composables/usePinnedData';
+import { N8nIconButton, N8nLink, N8nText, N8nTooltip } from 'n8n-design-system';
 
 const locale = useI18n();
 
@@ -27,7 +28,7 @@ const visible = computed(() =>
 </script>
 
 <template>
-	<n8n-tooltip placement="bottom-end" :visible="visible">
+	<N8nTooltip placement="bottom-end" :visible="visible">
 		<template #content>
 			<div v-if="props.tooltipContentsVisibility.binaryDataTooltipContent">
 				{{ locale.baseText('ndv.pinData.pin.binary') }}
@@ -37,16 +38,16 @@ const visible = computed(() =>
 			</div>
 			<div v-else>
 				<strong>{{ locale.baseText('ndv.pinData.pin.title') }}</strong>
-				<n8n-text size="small" tag="p">
+				<N8nText size="small" tag="p">
 					{{ locale.baseText('ndv.pinData.pin.description') }}
 
-					<n8n-link :to="props.dataPinningDocsUrl" size="small">
+					<N8nLink :to="props.dataPinningDocsUrl" size="small">
 						{{ locale.baseText('ndv.pinData.pin.link') }}
-					</n8n-link>
-				</n8n-text>
+					</N8nLink>
+				</N8nText>
 			</div>
 		</template>
-		<n8n-icon-button
+		<N8nIconButton
 			:class="$style.pinDataButton"
 			type="tertiary"
 			:active="props.pinnedData.hasData.value"
@@ -55,7 +56,7 @@ const visible = computed(() =>
 			data-test-id="ndv-pin-data"
 			@click="emit('togglePinData')"
 		/>
-	</n8n-tooltip>
+	</N8nTooltip>
 </template>
 
 <style lang="scss" module>
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index 59c0879224..f27bd74129 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -1,389 +1,387 @@
-<script lang="ts">
-import { defineComponent } from 'vue';
-import type { PropType } from 'vue';
-import { mapStores } from 'pinia';
-import type { INodeUi, ITableData, NDVState } from '@/Interface';
-import { shorten } from '@/utils/typesUtils';
-import { getPairedItemId } from '@/utils/pairedItemUtils';
-import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
-import Draggable from './Draggable.vue';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { useNDVStore } from '@/stores/ndv.store';
-import MappingPill from './MappingPill.vue';
-import { getMappedExpression } from '@/utils/mappingUtils';
+<script setup lang="ts">
 import { useExternalHooks } from '@/composables/useExternalHooks';
+import type { INodeUi, IRunDataDisplayMode, ITableData } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv.store';
+import { useWorkflowsStore } from '@/stores/workflows.store';
+import { getMappedExpression } from '@/utils/mappingUtils';
+import { getPairedItemId } from '@/utils/pairedItemUtils';
+import { shorten } from '@/utils/typesUtils';
+import type { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
+import { computed, onMounted, ref, watch } from 'vue';
+import Draggable from './Draggable.vue';
+import MappingPill from './MappingPill.vue';
 import TextWithHighlights from './TextWithHighlights.vue';
+import { useI18n } from '@/composables/useI18n';
+import { useTelemetry } from '@/composables/useTelemetry';
+import { N8nInfoTip, N8nTooltip, N8nTree } from 'n8n-design-system';
+import { storeToRefs } from 'pinia';
 
 const MAX_COLUMNS_LIMIT = 40;
 
 type DraggableRef = InstanceType<typeof Draggable>;
 
-export default defineComponent({
-	name: 'RunDataTable',
-	components: { Draggable, MappingPill, TextWithHighlights },
-	props: {
-		node: {
-			type: Object as PropType<INodeUi>,
-			required: true,
-		},
-		inputData: {
-			type: Array as PropType<INodeExecutionData[]>,
-			required: true,
-		},
-		mappingEnabled: {
-			type: Boolean,
-		},
-		distanceFromActive: {
-			type: Number,
-			required: true,
-		},
-		runIndex: {
-			type: Number,
-		},
-		outputIndex: {
-			type: Number,
-		},
-		totalRuns: {
-			type: Number,
-		},
-		pageOffset: {
-			type: Number,
-			required: true,
-		},
-		hasDefaultHoverState: {
-			type: Boolean,
-		},
-		search: {
-			type: String,
-		},
-	},
-	setup() {
-		const externalHooks = useExternalHooks();
-		return {
-			externalHooks,
-		};
-	},
-	data() {
-		return {
-			activeColumn: -1,
-			forceShowGrip: false,
-			draggedColumn: false,
-			draggingPath: null as null | string,
-			hoveringPath: null as null | string,
-			mappingHintVisible: false,
-			activeRow: null as number | null,
-			columnLimit: MAX_COLUMNS_LIMIT,
-			columnLimitExceeded: false,
-		};
-	},
-	mounted() {
-		if (this.tableData && this.tableData.columns && this.$refs.draggable) {
-			const tbody = (this.$refs.draggable as DraggableRef).$refs.wrapper as HTMLElement;
-			if (tbody) {
-				this.$emit('mounted', {
-					avgRowHeight: tbody.offsetHeight / this.tableData.data.length,
-				});
-			}
+type Props = {
+	node: INodeUi;
+	inputData: INodeExecutionData[];
+	distanceFromActive: number;
+	pageOffset: number;
+	runIndex?: number;
+	outputIndex?: number;
+	totalRuns?: number;
+	mappingEnabled?: boolean;
+	hasDefaultHoverState?: boolean;
+	search?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+	runIndex: 0,
+	outputIndex: 0,
+	totalRuns: 0,
+	mappingEnabled: false,
+	hasDefaultHoverState: false,
+	search: '',
+});
+const emit = defineEmits<{
+	activeRowChanged: [row: number | null];
+	displayModeChange: [mode: IRunDataDisplayMode];
+	mounted: [data: { avgRowHeight: number }];
+}>();
+
+const externalHooks = useExternalHooks();
+const activeColumn = ref(-1);
+const forceShowGrip = ref(false);
+const draggedColumn = ref(false);
+const draggingPath = ref<string | null>(null);
+const hoveringPath = ref<string | null>(null);
+const activeRow = ref<number | null>(null);
+const columnLimit = ref(MAX_COLUMNS_LIMIT);
+const columnLimitExceeded = ref(false);
+const draggableRef = ref<DraggableRef>();
+
+const ndvStore = useNDVStore();
+const workflowsStore = useWorkflowsStore();
+
+const i18n = useI18n();
+const telemetry = useTelemetry();
+
+const {
+	hoveringItem,
+	focusedMappableInput,
+	highlightDraggables: highlight,
+} = storeToRefs(ndvStore);
+const pairedItemMappings = computed(() => workflowsStore.workflowExecutionPairedItemMappings);
+const tableData = computed(() => convertToTable(props.inputData));
+
+onMounted(() => {
+	if (tableData.value?.columns && draggableRef.value) {
+		const tbody = draggableRef.value.$refs.wrapper as HTMLElement;
+		if (tbody) {
+			emit('mounted', {
+				avgRowHeight: tbody.offsetHeight / tableData.value.data.length,
+			});
 		}
-	},
-	computed: {
-		...mapStores(useNDVStore, useWorkflowsStore),
-		hoveringItem(): NDVState['hoveringItem'] {
-			return this.ndvStore.hoveringItem;
-		},
-		pairedItemMappings(): { [itemId: string]: Set<string> } {
-			return this.workflowsStore.workflowExecutionPairedItemMappings;
-		},
-		tableData(): ITableData {
-			return this.convertToTable(this.inputData);
-		},
-		focusedMappableInput(): string {
-			return this.ndvStore.focusedMappableInput;
-		},
-		highlight(): boolean {
-			return this.ndvStore.highlightDraggables;
-		},
-	},
-	methods: {
-		shorten,
-		isHoveringRow(row: number): boolean {
-			if (row === this.activeRow) {
-				return true;
-			}
+	}
+});
 
-			const itemIndex = this.pageOffset + row;
-			if (
-				itemIndex === 0 &&
-				!this.hoveringItem &&
-				this.hasDefaultHoverState &&
-				this.distanceFromActive === 1
-			) {
-				return true;
-			}
-			const itemNodeId = getPairedItemId(
-				this.node?.name ?? '',
-				this.runIndex || 0,
-				this.outputIndex || 0,
-				itemIndex,
-			);
-			if (!this.hoveringItem || !this.pairedItemMappings[itemNodeId]) {
-				return false;
-			}
+function isHoveringRow(row: number): boolean {
+	if (row === activeRow.value) {
+		return true;
+	}
 
-			const hoveringItemId = getPairedItemId(
-				this.hoveringItem.nodeName,
-				this.hoveringItem.runIndex,
-				this.hoveringItem.outputIndex,
-				this.hoveringItem.itemIndex,
-			);
-			return this.pairedItemMappings[itemNodeId].has(hoveringItemId);
-		},
-		onMouseEnterCell(e: MouseEvent) {
-			const target = e.target;
-			if (target && this.mappingEnabled) {
-				const col = (target as HTMLElement).dataset.col;
-				if (col && !isNaN(parseInt(col, 10))) {
-					this.activeColumn = parseInt(col, 10);
-				}
+	const itemIndex = props.pageOffset + row;
+	if (
+		itemIndex === 0 &&
+		!hoveringItem.value &&
+		props.hasDefaultHoverState &&
+		props.distanceFromActive === 1
+	) {
+		return true;
+	}
+	const itemNodeId = getPairedItemId(
+		props.node?.name ?? '',
+		props.runIndex || 0,
+		props.outputIndex || 0,
+		itemIndex,
+	);
+	if (!hoveringItem.value || !pairedItemMappings.value[itemNodeId]) {
+		return false;
+	}
+
+	const hoveringItemId = getPairedItemId(
+		hoveringItem.value.nodeName,
+		hoveringItem.value.runIndex,
+		hoveringItem.value.outputIndex,
+		hoveringItem.value.itemIndex,
+	);
+	return pairedItemMappings.value[itemNodeId].has(hoveringItemId);
+}
+
+function onMouseEnterCell(e: MouseEvent) {
+	const target = e.target;
+	if (target && props.mappingEnabled) {
+		const col = (target as HTMLElement).dataset.col;
+		if (col && !isNaN(parseInt(col, 10))) {
+			activeColumn.value = parseInt(col, 10);
+		}
+	}
+
+	if (target) {
+		const row = (target as HTMLElement).dataset.row;
+		if (row && !isNaN(parseInt(row, 10))) {
+			activeRow.value = parseInt(row, 10);
+			emit('activeRowChanged', props.pageOffset + activeRow.value);
+		}
+	}
+}
+
+function onMouseLeaveCell() {
+	activeColumn.value = -1;
+	activeRow.value = null;
+	emit('activeRowChanged', null);
+}
+
+function onMouseEnterKey(path: Array<string | number>, colIndex: number) {
+	hoveringPath.value = getCellExpression(path, colIndex);
+}
+
+function onMouseLeaveKey() {
+	hoveringPath.value = null;
+}
+
+function isHovering(path: Array<string | number>, colIndex: number) {
+	const expr = getCellExpression(path, colIndex);
+
+	return hoveringPath.value === expr;
+}
+
+function getExpression(column: string) {
+	if (!props.node) {
+		return '';
+	}
+
+	return getMappedExpression({
+		nodeName: props.node.name,
+		distanceFromActive: props.distanceFromActive,
+		path: [column],
+	});
+}
+
+function getPathNameFromTarget(el?: HTMLElement) {
+	if (!el) {
+		return '';
+	}
+	return el.dataset.name;
+}
+
+function getCellPathName(path: Array<string | number>, colIndex: number) {
+	const lastKey = path[path.length - 1];
+	if (typeof lastKey === 'string') {
+		return lastKey;
+	}
+	if (path.length > 1) {
+		const prevKey = path[path.length - 2];
+		return `${prevKey}[${lastKey}]`;
+	}
+	const column = tableData.value.columns[colIndex];
+	return `${column}[${lastKey}]`;
+}
+
+function getCellExpression(path: Array<string | number>, colIndex: number) {
+	if (!props.node) {
+		return '';
+	}
+	const column = tableData.value.columns[colIndex];
+	return getMappedExpression({
+		nodeName: props.node.name,
+		distanceFromActive: props.distanceFromActive,
+		path: [column, ...path],
+	});
+}
+
+function isEmpty(value: unknown): boolean {
+	return (
+		value === '' ||
+		(Array.isArray(value) && value.length === 0) ||
+		(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
+		value === null ||
+		value === undefined
+	);
+}
+
+function getValueToRender(value: unknown): string {
+	if (value === '') {
+		return i18n.baseText('runData.emptyString');
+	}
+	if (typeof value === 'string') {
+		return value;
+	}
+	if (Array.isArray(value) && value.length === 0) {
+		return i18n.baseText('runData.emptyArray');
+	}
+	if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
+		return i18n.baseText('runData.emptyObject');
+	}
+	if (value === null || value === undefined) {
+		return `[${value}]`;
+	}
+	if (value === true || value === false || typeof value === 'number') {
+		return value.toString();
+	}
+	return JSON.stringify(value);
+}
+
+function onDragStart() {
+	draggedColumn.value = true;
+	ndvStore.resetMappingTelemetry();
+}
+
+function onCellDragStart(el: HTMLElement) {
+	if (el?.dataset.value) {
+		draggingPath.value = el.dataset.value;
+	}
+
+	onDragStart();
+}
+
+function onCellDragEnd(el: HTMLElement) {
+	draggingPath.value = null;
+
+	onDragEnd(el.dataset.name ?? '', 'tree', el.dataset.depth ?? '0');
+}
+
+function isDraggingKey(path: Array<string | number>, colIndex: number) {
+	if (!draggingPath.value) {
+		return;
+	}
+
+	return draggingPath.value === getCellExpression(path, colIndex);
+}
+
+function onDragEnd(column: string, src: string, depth = '0') {
+	setTimeout(() => {
+		const mappingTelemetry = ndvStore.mappingTelemetry;
+		const telemetryPayload = {
+			src_node_type: props.node.type,
+			src_field_name: column,
+			src_nodes_back: props.distanceFromActive,
+			src_run_index: props.runIndex,
+			src_runs_total: props.totalRuns,
+			src_field_nest_level: parseInt(depth, 10),
+			src_view: 'table',
+			src_element: src,
+			success: false,
+			...mappingTelemetry,
+		};
+
+		void externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
+
+		telemetry.track('User dragged data for mapping', telemetryPayload, {
+			withPostHog: true,
+		});
+	}, 1000); // ensure dest data gets set if drop
+}
+
+function isSimple(data: GenericValue): data is string | number | boolean | null | undefined {
+	return (
+		typeof data !== 'object' ||
+		data === null ||
+		(Array.isArray(data) && data.length === 0) ||
+		(typeof data === 'object' && Object.keys(data).length === 0)
+	);
+}
+
+function isObject(data: GenericValue): data is Record<string, unknown> {
+	return !isSimple(data);
+}
+
+function hasJsonInColumn(colIndex: number): boolean {
+	return tableData.value.hasJson[tableData.value.columns[colIndex]];
+}
+
+function convertToTable(inputData: INodeExecutionData[]): ITableData {
+	const resultTableData: GenericValue[][] = [];
+	const tableColumns: string[] = [];
+	let leftEntryColumns: string[], entryRows: GenericValue[];
+	// Go over all entries
+	let entry: IDataObject;
+	const hasJson: { [key: string]: boolean } = {};
+	inputData.forEach((data) => {
+		if (!data.hasOwnProperty('json')) {
+			return;
+		}
+		entry = data.json;
+
+		// Go over all keys of entry
+		entryRows = [];
+		const entryColumns = Object.keys(entry || {});
+
+		if (entryColumns.length > MAX_COLUMNS_LIMIT) {
+			columnLimitExceeded.value = true;
+			leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
+		} else {
+			leftEntryColumns = entryColumns;
+		}
+
+		// Go over all the already existing column-keys
+		tableColumns.forEach((key) => {
+			if (entry.hasOwnProperty(key)) {
+				// Entry does have key so add its value
+				entryRows.push(entry[key]);
+				// Remove key so that we know that it got added
+				leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
+
+				hasJson[key] =
+					hasJson[key] ||
+					(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
+					false;
+			} else {
+				// Entry does not have key so add undefined
+				entryRows.push(undefined);
 			}
+		});
 
-			if (target) {
-				const row = (target as HTMLElement).dataset.row;
-				if (row && !isNaN(parseInt(row, 10))) {
-					this.activeRow = parseInt(row, 10);
-					this.$emit('activeRowChanged', this.pageOffset + this.activeRow);
-				}
-			}
-		},
-		onMouseLeaveCell() {
-			this.activeColumn = -1;
-			this.activeRow = null;
-			this.$emit('activeRowChanged', null);
-		},
-		onMouseEnterKey(path: string[], colIndex: number) {
-			this.hoveringPath = this.getCellExpression(path, colIndex);
-		},
-		onMouseLeaveKey() {
-			this.hoveringPath = null;
-		},
-		isHovering(path: string[], colIndex: number) {
-			const expr = this.getCellExpression(path, colIndex);
+		// Go over all the columns the entry has but did not exist yet
+		leftEntryColumns.forEach((key) => {
+			// Add the key for all runs in the future
+			tableColumns.push(key);
+			// Add the value
+			entryRows.push(entry[key]);
+			hasJson[key] =
+				hasJson[key] ||
+				(typeof entry[key] === 'object' && Object.keys(entry[key] ?? {}).length > 0) ||
+				false;
+		});
 
-			return this.hoveringPath === expr;
-		},
-		getExpression(column: string) {
-			if (!this.node) {
-				return '';
-			}
+		// Add the data of the entry
+		resultTableData.push(entryRows);
+	});
 
-			return getMappedExpression({
-				nodeName: this.node.name,
-				distanceFromActive: this.distanceFromActive,
-				path: [column],
-			});
-		},
-		getPathNameFromTarget(el?: HTMLElement) {
-			if (!el) {
-				return '';
-			}
-			return el.dataset.name;
-		},
-		getCellPathName(path: Array<string | number>, colIndex: number) {
-			const lastKey = path[path.length - 1];
-			if (typeof lastKey === 'string') {
-				return lastKey;
-			}
-			if (path.length > 1) {
-				const prevKey = path[path.length - 2];
-				return `${prevKey}[${lastKey}]`;
-			}
-			const column = this.tableData.columns[colIndex];
-			return `${column}[${lastKey}]`;
-		},
-		getCellExpression(path: Array<string | number>, colIndex: number) {
-			if (!this.node) {
-				return '';
-			}
-			const column = this.tableData.columns[colIndex];
-			return getMappedExpression({
-				nodeName: this.node.name,
-				distanceFromActive: this.distanceFromActive,
-				path: [column, ...path],
-			});
-		},
-		isEmpty(value: unknown): boolean {
-			return (
-				value === '' ||
-				(Array.isArray(value) && value.length === 0) ||
-				(typeof value === 'object' && value !== null && Object.keys(value).length === 0) ||
-				value === null ||
-				value === undefined
-			);
-		},
-		getValueToRender(value: unknown): string {
-			if (value === '') {
-				return this.$locale.baseText('runData.emptyString');
-			}
-			if (typeof value === 'string') {
-				return value;
-			}
-			if (Array.isArray(value) && value.length === 0) {
-				return this.$locale.baseText('runData.emptyArray');
-			}
-			if (typeof value === 'object' && value !== null && Object.keys(value).length === 0) {
-				return this.$locale.baseText('runData.emptyObject');
-			}
-			if (value === null || value === undefined) {
-				return `[${value}]`;
-			}
-			if (value === true || value === false || typeof value === 'number') {
-				return value.toString();
-			}
-			return JSON.stringify(value);
-		},
-		onDragStart() {
-			this.draggedColumn = true;
-			this.ndvStore.resetMappingTelemetry();
-		},
-		onCellDragStart(el: HTMLElement) {
-			if (el?.dataset.value) {
-				this.draggingPath = el.dataset.value;
-			}
+	// Make sure that all entry-rows have the same length
+	resultTableData.forEach((rows) => {
+		if (tableColumns.length > rows.length) {
+			// Has fewer entries so add the missing ones
+			rows.push(...new Array(tableColumns.length - rows.length));
+		}
+	});
 
-			this.onDragStart();
+	return {
+		hasJson,
+		columns: tableColumns,
+		data: resultTableData,
+	};
+}
+
+function switchToJsonView() {
+	emit('displayModeChange', 'json');
+}
+
+watch(focusedMappableInput, (curr) => {
+	setTimeout(
+		() => {
+			forceShowGrip.value = !!focusedMappableInput.value;
 		},
-		onCellDragEnd(el: HTMLElement) {
-			this.draggingPath = null;
-
-			this.onDragEnd(el.dataset.name || '', 'tree', el.dataset.depth || '0');
-		},
-		isDraggingKey(path: Array<string | number>, colIndex: number) {
-			if (!this.draggingPath) {
-				return;
-			}
-
-			return this.draggingPath === this.getCellExpression(path, colIndex);
-		},
-		onDragEnd(column: string, src: string, depth = '0') {
-			setTimeout(() => {
-				const mappingTelemetry = this.ndvStore.mappingTelemetry;
-				const telemetryPayload = {
-					src_node_type: this.node.type,
-					src_field_name: column,
-					src_nodes_back: this.distanceFromActive,
-					src_run_index: this.runIndex,
-					src_runs_total: this.totalRuns,
-					src_field_nest_level: parseInt(depth, 10),
-					src_view: 'table',
-					src_element: src,
-					success: false,
-					...mappingTelemetry,
-				};
-
-				void this.externalHooks.run('runDataTable.onDragEnd', telemetryPayload);
-
-				this.$telemetry.track('User dragged data for mapping', telemetryPayload, {
-					withPostHog: true,
-				});
-			}, 1000); // ensure dest data gets set if drop
-		},
-		isSimple(data: unknown): boolean {
-			return (
-				typeof data !== 'object' ||
-				data === null ||
-				(Array.isArray(data) && data.length === 0) ||
-				(typeof data === 'object' && Object.keys(data).length === 0)
-			);
-		},
-		hasJsonInColumn(colIndex: number): boolean {
-			return this.tableData.hasJson[this.tableData.columns[colIndex]];
-		},
-		convertToTable(inputData: INodeExecutionData[]): ITableData {
-			const tableData: GenericValue[][] = [];
-			const tableColumns: string[] = [];
-			let leftEntryColumns: string[], entryRows: GenericValue[];
-			// Go over all entries
-			let entry: IDataObject;
-			const hasJson: { [key: string]: boolean } = {};
-			inputData.forEach((data) => {
-				if (!data.hasOwnProperty('json')) {
-					return;
-				}
-				entry = data.json;
-
-				// Go over all keys of entry
-				entryRows = [];
-				const entryColumns = Object.keys(entry || {});
-
-				if (entryColumns.length > MAX_COLUMNS_LIMIT) {
-					this.columnLimitExceeded = true;
-					leftEntryColumns = entryColumns.slice(0, MAX_COLUMNS_LIMIT);
-				} else {
-					leftEntryColumns = entryColumns;
-				}
-
-				// Go over all the already existing column-keys
-				tableColumns.forEach((key) => {
-					if (entry.hasOwnProperty(key)) {
-						// Entry does have key so add its value
-						entryRows.push(entry[key]);
-						// Remove key so that we know that it got added
-						leftEntryColumns.splice(leftEntryColumns.indexOf(key), 1);
-
-						hasJson[key] =
-							hasJson[key] ||
-							(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
-							false;
-					} else {
-						// Entry does not have key so add undefined
-						entryRows.push(undefined);
-					}
-				});
-
-				// Go over all the columns the entry has but did not exist yet
-				leftEntryColumns.forEach((key) => {
-					// Add the key for all runs in the future
-					tableColumns.push(key);
-					// Add the value
-					entryRows.push(entry[key]);
-					hasJson[key] =
-						hasJson[key] ||
-						(typeof entry[key] === 'object' && Object.keys(entry[key] || {}).length > 0) ||
-						false;
-				});
-
-				// Add the data of the entry
-				tableData.push(entryRows);
-			});
-
-			// Make sure that all entry-rows have the same length
-			tableData.forEach((entryRows) => {
-				if (tableColumns.length > entryRows.length) {
-					// Has fewer entries so add the missing ones
-					entryRows.push(...new Array(tableColumns.length - entryRows.length));
-				}
-			});
-
-			return {
-				hasJson,
-				columns: tableColumns,
-				data: tableData,
-			};
-		},
-		switchToJsonView() {
-			this.$emit('displayModeChange', 'json');
-		},
-	},
-	watch: {
-		focusedMappableInput(curr: boolean) {
-			setTimeout(
-				() => {
-					this.forceShowGrip = !!this.focusedMappableInput;
-				},
-				curr ? 300 : 150,
-			);
-		},
-	},
+		curr ? 300 : 150,
+	);
 });
 </script>
 
@@ -408,7 +406,7 @@ export default defineComponent({
 						@mouseenter="onMouseEnterCell"
 						@mouseleave="onMouseLeaveCell"
 					>
-						<n8n-info-tip>{{ $locale.baseText('runData.emptyItemHint') }}</n8n-info-tip>
+						<N8nInfoTip>{{ i18n.baseText('runData.emptyItemHint') }}</N8nInfoTip>
 					</td>
 					<td :class="$style.tableRightMargin"></td>
 				</tr>
@@ -418,11 +416,11 @@ export default defineComponent({
 			<thead>
 				<tr>
 					<th v-for="(column, i) in tableData.columns || []" :key="column">
-						<n8n-tooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
+						<N8nTooltip placement="bottom-start" :disabled="!mappingEnabled" :show-after="1000">
 							<template #content>
 								<div>
 									<img src="/static/data-mapping-gif.gif" />
-									{{ $locale.baseText('dataMapping.dragColumnToFieldHint') }}
+									{{ i18n.baseText('dataMapping.dragColumnToFieldHint') }}
 								</div>
 							</template>
 							<Draggable
@@ -455,17 +453,17 @@ export default defineComponent({
 									</div>
 								</template>
 							</Draggable>
-						</n8n-tooltip>
+						</N8nTooltip>
 					</th>
 					<th v-if="columnLimitExceeded" :class="$style.header">
-						<n8n-tooltip placement="bottom-end">
+						<N8nTooltip placement="bottom-end">
 							<template #content>
 								<div>
 									<i18n-t tag="span" keypath="dataMapping.tableView.tableColumnsExceeded.tooltip">
 										<template #columnLimit>{{ columnLimit }}</template>
 										<template #link>
 											<a @click="switchToJsonView">{{
-												$locale.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
+												i18n.baseText('dataMapping.tableView.tableColumnsExceeded.tooltip.link')
 											}}</a>
 										</template>
 									</i18n-t>
@@ -476,15 +474,15 @@ export default defineComponent({
 									:class="$style['warningTooltip']"
 									icon="exclamation-triangle"
 								></font-awesome-icon>
-								{{ $locale.baseText('dataMapping.tableView.tableColumnsExceeded') }}
+								{{ i18n.baseText('dataMapping.tableView.tableColumnsExceeded') }}
 							</span>
-						</n8n-tooltip>
+						</N8nTooltip>
 					</th>
 					<th :class="$style.tableRightMargin"></th>
 				</tr>
 			</thead>
 			<Draggable
-				ref="draggable"
+				ref="draggableRef"
 				tag="tbody"
 				type="mapping"
 				target-data-key="mappable"
@@ -519,7 +517,7 @@ export default defineComponent({
 							:search="search"
 							:class="{ [$style.value]: true, [$style.empty]: isEmpty(data) }"
 						/>
-						<n8n-tree v-else :node-class="$style.nodeClass" :value="data">
+						<N8nTree v-else-if="isObject(data)" :node-class="$style.nodeClass" :value="data">
 							<template #label="{ label, path }">
 								<span
 									:class="{
@@ -534,9 +532,10 @@ export default defineComponent({
 									:data-depth="path.length"
 									@mouseenter="() => onMouseEnterKey(path, index2)"
 									@mouseleave="onMouseLeaveKey"
-									>{{ label || $locale.baseText('runData.unnamedField') }}</span
+									>{{ label || i18n.baseText('runData.unnamedField') }}</span
 								>
 							</template>
+
 							<template #value="{ value }">
 								<TextWithHighlights
 									:content="getValueToRender(value)"
@@ -544,7 +543,7 @@ export default defineComponent({
 									:class="{ [$style.nestedValue]: true, [$style.empty]: isEmpty(value) }"
 								/>
 							</template>
-						</n8n-tree>
+						</N8nTree>
 					</td>
 					<td v-if="columnLimitExceeded"></td>
 					<td :class="$style.tableRightMargin"></td>