From 6a5830959f5fb493a4119869b8298d8ed702c84a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ra=C3=BAl=20G=C3=B3mez=20Morales?= <raul00gm@gmail.com>
Date: Thu, 12 Dec 2024 14:03:59 +0100
Subject: [PATCH] =?UTF-8?q?perf(editor):=20SchemaView=20performance=20impr?=
 =?UTF-8?q?ovement=20by=20=E2=89=8890%=20=F0=9F=9A=80=20=20(#12180)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/e2e/14-mapping.cy.ts                  |    1 -
 cypress/e2e/5-ndv.cy.ts                       |    8 +-
 cypress/pages/ndv.ts                          |    3 -
 .../@n8n/api-types/src/frontend-settings.ts   |    1 -
 packages/cli/src/config/schema.ts             |    7 -
 packages/cli/src/services/frontend.service.ts |    1 -
 packages/editor-ui/src/__tests__/defaults.ts  |    1 -
 .../src/components/ExpressionEditModal.vue    |    5 +-
 packages/editor-ui/src/components/RunData.vue |    7 +-
 .../src/components/RunDataSchema.test.ts      |  304 --
 .../src/components/RunDataSchema.vue          |  643 -----
 .../src/components/RunDataSchemaItem.vue      |  333 ---
 .../src/components/VirtualSchema.test.ts      |    2 +-
 .../__snapshots__/RunDataSchema.test.ts.snap  | 2453 -----------------
 .../__snapshots__/VirtualSchema.test.ts.snap  |    8 +-
 15 files changed, 13 insertions(+), 3764 deletions(-)
 delete mode 100644 packages/editor-ui/src/components/RunDataSchema.test.ts
 delete mode 100644 packages/editor-ui/src/components/RunDataSchema.vue
 delete mode 100644 packages/editor-ui/src/components/RunDataSchemaItem.vue
 delete mode 100644 packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap

diff --git a/cypress/e2e/14-mapping.cy.ts b/cypress/e2e/14-mapping.cy.ts
index 3bbbd0b293459..e19959453f847 100644
--- a/cypress/e2e/14-mapping.cy.ts
+++ b/cypress/e2e/14-mapping.cy.ts
@@ -185,7 +185,6 @@ describe('Data mapping', () => {
 		workflowPage.actions.openNode('Set1');
 
 		ndv.actions.executePrevious();
-		ndv.actions.expandSchemaViewNode(SCHEDULE_TRIGGER_NODE_NAME);
 
 		const dataPill = ndv.getters
 			.inputDataContainer()
diff --git a/cypress/e2e/5-ndv.cy.ts b/cypress/e2e/5-ndv.cy.ts
index 96b917d4c3d47..9da1338233dbe 100644
--- a/cypress/e2e/5-ndv.cy.ts
+++ b/cypress/e2e/5-ndv.cy.ts
@@ -77,7 +77,7 @@ describe('NDV', () => {
 
 		workflowPage.actions.openNode('Switch');
 		cy.get('.cm-line').realMouseMove(100, 100);
-		cy.get('.fa-angle-down').click();
+		cy.get('.fa-angle-down').first().click();
 		ndv.getters.backToCanvas().click();
 		workflowPage.actions.executeWorkflow();
 		workflowPage.actions.openNode('Merge');
@@ -204,7 +204,7 @@ describe('NDV', () => {
 					.contains(key)
 					.should('be.visible');
 			});
-			getObjectValueItem().find('label').click({ force: true });
+			getObjectValueItem().find('.toggle').click({ force: true });
 			expandedObjectProps.forEach((key) => {
 				ndv.getters
 					.outputPanel()
@@ -245,8 +245,8 @@ describe('NDV', () => {
 			ndv.getters.outputPanel().find('[class*=_pagination]').should('not.exist');
 			ndv.getters
 				.outputPanel()
-				.find('[data-test-id=run-data-schema-item] [data-test-id=run-data-schema-item]')
-				.should('have.length', 20);
+				.find('[data-test-id=run-data-schema-item]')
+				.should('have.length.above', 10);
 		});
 	});
 
diff --git a/cypress/pages/ndv.ts b/cypress/pages/ndv.ts
index 516a0a1ea862c..4550da8e2a328 100644
--- a/cypress/pages/ndv.ts
+++ b/cypress/pages/ndv.ts
@@ -227,9 +227,6 @@ export class NDV extends BasePage {
 			this.getters.inputSelect().find('.el-select').click();
 			this.getters.inputOption().contains(nodeName).click();
 		},
-		expandSchemaViewNode: (nodeName: string) => {
-			this.getters.schemaViewNodeName().contains(nodeName).click();
-		},
 		addDefaultPinnedData: () => {
 			this.actions.editPinnedData();
 			this.actions.savePinnedData();
diff --git a/packages/@n8n/api-types/src/frontend-settings.ts b/packages/@n8n/api-types/src/frontend-settings.ts
index 00b87b968eeb9..1fe0fcd85798c 100644
--- a/packages/@n8n/api-types/src/frontend-settings.ts
+++ b/packages/@n8n/api-types/src/frontend-settings.ts
@@ -172,6 +172,5 @@ export interface FrontendSettings {
 		blockFileAccessToN8nFiles: boolean;
 	};
 	betaFeatures: FrontendBetaFeatures[];
-	virtualSchemaView: boolean;
 	easyAIWorkflowOnboarded: boolean;
 }
diff --git a/packages/cli/src/config/schema.ts b/packages/cli/src/config/schema.ts
index 1891d8193d7f0..54fa07e7f5dcb 100644
--- a/packages/cli/src/config/schema.ts
+++ b/packages/cli/src/config/schema.ts
@@ -405,11 +405,4 @@ export const schema = {
 			doc: 'Set this to 1 to enable the new partial execution logic by default.',
 		},
 	},
-
-	virtualSchemaView: {
-		doc: 'Whether to display the virtualized schema view',
-		format: Boolean,
-		default: false,
-		env: 'N8N_VIRTUAL_SCHEMA_VIEW',
-	},
 };
diff --git a/packages/cli/src/services/frontend.service.ts b/packages/cli/src/services/frontend.service.ts
index 535239d5a46bc..0e1a64e0e7d9f 100644
--- a/packages/cli/src/services/frontend.service.ts
+++ b/packages/cli/src/services/frontend.service.ts
@@ -231,7 +231,6 @@ export class FrontendService {
 				blockFileAccessToN8nFiles: this.securityConfig.blockFileAccessToN8nFiles,
 			},
 			betaFeatures: this.frontendConfig.betaFeatures,
-			virtualSchemaView: config.getEnv('virtualSchemaView'),
 			easyAIWorkflowOnboarded: false,
 		};
 	}
diff --git a/packages/editor-ui/src/__tests__/defaults.ts b/packages/editor-ui/src/__tests__/defaults.ts
index 61c8213232c05..3771840d6a2dc 100644
--- a/packages/editor-ui/src/__tests__/defaults.ts
+++ b/packages/editor-ui/src/__tests__/defaults.ts
@@ -126,6 +126,5 @@ export const defaultSettings: FrontendSettings = {
 		enabled: false,
 	},
 	betaFeatures: [],
-	virtualSchemaView: false,
 	easyAIWorkflowOnboarded: false,
 };
diff --git a/packages/editor-ui/src/components/ExpressionEditModal.vue b/packages/editor-ui/src/components/ExpressionEditModal.vue
index e1f7309a7165a..07dcee3c3a938 100644
--- a/packages/editor-ui/src/components/ExpressionEditModal.vue
+++ b/packages/editor-ui/src/components/ExpressionEditModal.vue
@@ -14,7 +14,7 @@ import type { INodeProperties } from 'n8n-workflow';
 import { NodeConnectionType } from 'n8n-workflow';
 import { outputTheme } from './ExpressionEditorModal/theme';
 import ExpressionOutput from './InlineExpressionEditor/ExpressionOutput.vue';
-import RunDataSchema from './RunDataSchema.vue';
+import VirtualSchema from '@/components/VirtualSchema.vue';
 import OutputItemSelect from './InlineExpressionEditor/OutputItemSelect.vue';
 import { useI18n } from '@/composables/useI18n';
 import { useDebounce } from '@/composables/useDebounce';
@@ -167,14 +167,13 @@ const onResizeThrottle = useThrottleFn(onResize, 10);
 						</template>
 					</N8nInput>
 
-					<RunDataSchema
+					<VirtualSchema
 						:class="$style.schema"
 						:search="appliedSearch"
 						:nodes="parentNodes"
 						:mapping-enabled="!isReadOnly"
 						:connection-type="NodeConnectionType.Main"
 						pane-type="input"
-						context="modal"
 					/>
 				</div>
 			</N8nResizeWrapper>
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 803bc86a0e6ad..a0d859ec5c13c 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -46,7 +46,6 @@ import { useExternalHooks } from '@/composables/useExternalHooks';
 import { useI18n } from '@/composables/useI18n';
 import { useNodeHelpers } from '@/composables/useNodeHelpers';
 import { useNodeType } from '@/composables/useNodeType';
-import { useSettingsStore } from '@/stores/settings.store';
 import type { PinDataSource, UnpinDataSource } from '@/composables/usePinnedData';
 import { usePinnedData } from '@/composables/usePinnedData';
 import { useTelemetry } from '@/composables/useTelemetry';
@@ -88,10 +87,8 @@ const LazyRunDataJson = defineAsyncComponent(
 	async () => await import('@/components/RunDataJson.vue'),
 );
 
-const LazyRunDataSchema = defineAsyncComponent(async () =>
-	useSettingsStore().settings.virtualSchemaView
-		? await import('@/components/VirtualSchema.vue')
-		: await import('@/components/RunDataSchema.vue'),
+const LazyRunDataSchema = defineAsyncComponent(
+	async () => await import('@/components/VirtualSchema.vue'),
 );
 const LazyRunDataHtml = defineAsyncComponent(
 	async () => await import('@/components/RunDataHtml.vue'),
diff --git a/packages/editor-ui/src/components/RunDataSchema.test.ts b/packages/editor-ui/src/components/RunDataSchema.test.ts
deleted file mode 100644
index 3cbe68836ff22..0000000000000
--- a/packages/editor-ui/src/components/RunDataSchema.test.ts
+++ /dev/null
@@ -1,304 +0,0 @@
-import { createComponentRenderer } from '@/__tests__/render';
-import RunDataJsonSchema from '@/components/RunDataSchema.vue';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { userEvent } from '@testing-library/user-event';
-import { cleanup, within, waitFor } from '@testing-library/vue';
-import { createPinia, setActivePinia } from 'pinia';
-import {
-	createTestNode,
-	defaultNodeDescriptions,
-	mockNodeTypeDescription,
-} from '@/__tests__/mocks';
-import { IF_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { mock } from 'vitest-mock-extended';
-import type { IWorkflowDb } from '@/Interface';
-import { NodeConnectionType, type IDataObject } from 'n8n-workflow';
-import * as nodeHelpers from '@/composables/useNodeHelpers';
-
-const mockNode1 = createTestNode({
-	name: 'Set1',
-	type: SET_NODE_TYPE,
-	typeVersion: 1,
-	disabled: false,
-});
-
-const mockNode2 = createTestNode({
-	name: 'Set2',
-	type: SET_NODE_TYPE,
-	typeVersion: 1,
-	disabled: false,
-});
-
-const disabledNode = createTestNode({
-	name: 'Disabled Node',
-	type: SET_NODE_TYPE,
-	typeVersion: 1,
-	disabled: true,
-});
-
-const ifNode = createTestNode({
-	name: 'If',
-	type: IF_NODE_TYPE,
-	typeVersion: 1,
-	disabled: false,
-});
-
-const aiTool = createTestNode({
-	name: 'AI Tool',
-	type: '@n8n/n8n-nodes-langchain.memoryBufferWindow',
-	typeVersion: 1,
-	disabled: false,
-});
-
-async function setupStore() {
-	const workflow = mock<IWorkflowDb>({
-		id: '123',
-		name: 'Test Workflow',
-		connections: {},
-		active: true,
-		nodes: [mockNode1, mockNode2, disabledNode, ifNode, aiTool],
-	});
-
-	const pinia = createPinia();
-	setActivePinia(pinia);
-
-	const workflowsStore = useWorkflowsStore();
-	const nodeTypesStore = useNodeTypesStore();
-
-	nodeTypesStore.setNodeTypes([
-		...defaultNodeDescriptions,
-		mockNodeTypeDescription({
-			name: IF_NODE_TYPE,
-			outputs: [NodeConnectionType.Main, NodeConnectionType.Main],
-		}),
-	]);
-	workflowsStore.workflow = workflow;
-
-	return pinia;
-}
-
-function mockNodeOutputData(nodeName: string, data: IDataObject[], outputIndex = 0) {
-	const originalNodeHelpers = nodeHelpers.useNodeHelpers();
-	vi.spyOn(nodeHelpers, 'useNodeHelpers').mockImplementation(() => {
-		return {
-			...originalNodeHelpers,
-			getNodeInputData: vi.fn((node, _, output) => {
-				if (node.name === nodeName && output === outputIndex) {
-					return data.map((json) => ({ json }));
-				}
-				return [];
-			}),
-		};
-	});
-}
-
-describe('RunDataSchema.vue', () => {
-	let renderComponent: ReturnType<typeof createComponentRenderer>;
-
-	beforeEach(async () => {
-		cleanup();
-		renderComponent = createComponentRenderer(RunDataJsonSchema, {
-			global: {
-				stubs: ['font-awesome-icon'],
-			},
-			pinia: await setupStore(),
-			props: {
-				mappingEnabled: true,
-				runIndex: 1,
-				outputIndex: 0,
-				totalRuns: 2,
-				paneType: 'input',
-				connectionType: 'main',
-				search: '',
-				nodes: [
-					{ name: 'Set1', indicies: [], depth: 1 },
-					{ name: 'Set2', indicies: [], depth: 2 },
-				],
-			},
-		});
-	});
-
-	it('renders schema for empty data', async () => {
-		const { getAllByTestId } = renderComponent();
-		expect(getAllByTestId('run-data-schema-empty').length).toBe(1);
-
-		// Expand second node
-		await userEvent.click(getAllByTestId('run-data-schema-node-name')[1]);
-		expect(getAllByTestId('run-data-schema-empty').length).toBe(2);
-	});
-
-	it('renders schema for data', async () => {
-		useWorkflowsStore().pinData({
-			node: mockNode1,
-			data: [
-				{ json: { name: 'John', age: 22, hobbies: ['surfing', 'traveling'] } },
-				{ json: { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] } },
-			],
-		});
-		useWorkflowsStore().pinData({
-			node: mockNode2,
-			data: [
-				{ json: { name: 'John', age: 22, hobbies: ['surfing', 'traveling'] } },
-				{ json: { name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] } },
-			],
-		});
-
-		const { getAllByTestId } = renderComponent();
-		const nodes = getAllByTestId('run-data-schema-node');
-		expect(nodes.length).toBe(2);
-		const firstNodeName = await within(nodes[0]).findByTestId('run-data-schema-node-name');
-		const firstNodeItemCount = await within(nodes[0]).findByTestId(
-			'run-data-schema-node-item-count',
-		);
-		expect(firstNodeName).toHaveTextContent('Set1');
-		expect(firstNodeItemCount).toHaveTextContent('2 items');
-		expect(within(nodes[0]).getByTestId('run-data-schema-node-schema')).toMatchSnapshot();
-
-		const secondNodeName = await within(nodes[1]).findByTestId('run-data-schema-node-name');
-		expect(secondNodeName).toHaveTextContent('Set2');
-
-		// Expand second node
-		await userEvent.click(secondNodeName);
-		expect(within(nodes[1]).getByTestId('run-data-schema-node-schema')).toMatchSnapshot();
-	});
-
-	it('renders schema in output pane', async () => {
-		const { container } = renderComponent({
-			props: {
-				nodes: [],
-				paneType: 'output',
-				node: mockNode1,
-				data: [
-					{ name: 'John', age: 22, hobbies: ['surfing', 'traveling'] },
-					{ name: 'Joe', age: 33, hobbies: ['skateboarding', 'gaming'] },
-				],
-			},
-		});
-
-		expect(container).toMatchSnapshot();
-	});
-
-	it('renders schema with spaces and dots', () => {
-		useWorkflowsStore().pinData({
-			node: mockNode1,
-			data: [
-				{
-					json: {
-						'hello world': [
-							{
-								test: {
-									'more to think about': 1,
-								},
-								'test.how': 'ignore',
-							},
-						],
-					},
-				},
-			],
-		});
-
-		const { container } = renderComponent();
-		expect(container).toMatchSnapshot();
-	});
-
-	it('renders no data to show for data empty objects', () => {
-		useWorkflowsStore().pinData({
-			node: mockNode1,
-			data: [{ json: {} }, { json: {} }],
-		});
-
-		const { getAllByTestId } = renderComponent();
-		expect(getAllByTestId('run-data-schema-empty').length).toBe(1);
-	});
-
-	it('renders disabled nodes correctly', () => {
-		const { getByTestId } = renderComponent({
-			props: {
-				nodes: [{ name: disabledNode.name, indicies: [], depth: 1 }],
-			},
-		});
-		expect(getByTestId('run-data-schema-disabled')).toBeInTheDocument();
-		expect(getByTestId('run-data-schema-node-name')).toHaveTextContent(
-			`${disabledNode.name} (Deactivated)`,
-		);
-	});
-
-	it('renders schema for correct output branch', async () => {
-		mockNodeOutputData(
-			'If',
-			[
-				{ id: 1, name: 'John' },
-				{ id: 2, name: 'Jane' },
-			],
-			1,
-		);
-		const { getByTestId } = renderComponent({
-			props: {
-				nodes: [{ name: 'If', indicies: [1], depth: 2 }],
-			},
-		});
-
-		await waitFor(() => {
-			expect(getByTestId('run-data-schema-node-name')).toHaveTextContent('If');
-			expect(getByTestId('run-data-schema-node-item-count')).toHaveTextContent('2 items');
-			expect(getByTestId('run-data-schema-node-schema')).toMatchSnapshot();
-		});
-	});
-
-	it('renders previous nodes schema for AI tools', async () => {
-		mockNodeOutputData(
-			'If',
-			[
-				{ id: 1, name: 'John' },
-				{ id: 2, name: 'Jane' },
-			],
-			0,
-		);
-		const { getByTestId } = renderComponent({
-			props: {
-				nodes: [
-					{
-						name: 'If',
-						indicies: [], // indicies are not set for AI tools
-						depth: 2,
-					},
-				],
-				node: aiTool,
-			},
-		});
-
-		await waitFor(() => {
-			expect(getByTestId('run-data-schema-node-name')).toHaveTextContent('If');
-			expect(getByTestId('run-data-schema-node-item-count')).toHaveTextContent('2 items');
-			expect(getByTestId('run-data-schema-node-schema')).toMatchSnapshot();
-		});
-	});
-
-	it('renders its own data for AI tools in debug mode', async () => {
-		const { getByTestId } = renderComponent({
-			props: {
-				nodes: [], // in debug mode nodes are empty
-				node: aiTool,
-				data: [{ output: 'AI tool output' }],
-			},
-		});
-
-		await waitFor(() => {
-			expect(getByTestId('run-data-schema-node-schema')).toMatchSnapshot();
-		});
-	});
-
-	test.each([[[{ tx: false }, { tx: false }]], [[{ tx: '' }, { tx: '' }]], [[{ tx: [] }]]])(
-		'renders schema instead of showing no data for %o',
-		(data) => {
-			useWorkflowsStore().pinData({
-				node: mockNode1,
-				data: data.map((item) => ({ json: item })),
-			});
-
-			const { queryByTestId } = renderComponent();
-			expect(queryByTestId('run-data-schema-empty')).not.toBeInTheDocument();
-		},
-	);
-});
diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
deleted file mode 100644
index aa1e821de1067..0000000000000
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ /dev/null
@@ -1,643 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-import { snakeCase } from 'lodash-es';
-import type { INodeUi, Schema } from '@/Interface';
-import RunDataSchemaItem from '@/components/RunDataSchemaItem.vue';
-import NodeIcon from '@/components/NodeIcon.vue';
-import Draggable from '@/components/Draggable.vue';
-import { useNDVStore } from '@/stores/ndv.store';
-import { telemetry } from '@/plugins/telemetry';
-import {
-	NodeConnectionType,
-	type IConnectedNode,
-	type IDataObject,
-	type INodeTypeDescription,
-} from 'n8n-workflow';
-import { useExternalHooks } from '@/composables/useExternalHooks';
-import { i18n } from '@/plugins/i18n';
-import MappingPill from './MappingPill.vue';
-import { useDataSchema } from '@/composables/useDataSchema';
-import { useNodeTypesStore } from '@/stores/nodeTypes.store';
-import { useWorkflowsStore } from '@/stores/workflows.store';
-import { executionDataToJson } from '@/utils/nodeTypesUtils';
-import { useNodeHelpers } from '@/composables/useNodeHelpers';
-import { useDebounce } from '@/composables/useDebounce';
-
-type Props = {
-	nodes?: IConnectedNode[];
-	node?: INodeUi | null;
-	data?: IDataObject[];
-	mappingEnabled?: boolean;
-	runIndex?: number;
-	outputIndex?: number;
-	totalRuns?: number;
-	paneType: 'input' | 'output';
-	connectionType?: NodeConnectionType;
-	search?: string;
-	context?: 'ndv' | 'modal';
-};
-
-type SchemaNode = {
-	node: INodeUi;
-	nodeType: INodeTypeDescription;
-	depth: number;
-	loading: boolean;
-	open: boolean;
-	connectedOutputIndexes: number[];
-	itemsCount: number | null;
-	schema: Schema | null;
-};
-
-const props = withDefaults(defineProps<Props>(), {
-	nodes: () => [],
-	distanceFromActive: 1,
-	node: null,
-	data: undefined,
-	runIndex: 0,
-	outputIndex: 0,
-	totalRuns: 1,
-	connectionType: NodeConnectionType.Main,
-	search: '',
-	mappingEnabled: false,
-	context: 'ndv',
-});
-
-const draggingPath = ref<string>('');
-const nodesOpen = ref<Partial<Record<string, boolean>>>({});
-const nodesData = ref<Partial<Record<string, { schema: Schema; itemsCount: number }>>>({});
-const nodesLoading = ref<Partial<Record<string, boolean>>>({});
-const disableScrollInView = ref(false);
-
-const ndvStore = useNDVStore();
-const nodeTypesStore = useNodeTypesStore();
-const workflowsStore = useWorkflowsStore();
-const { getSchemaForExecutionData, filterSchema } = useDataSchema();
-const { getNodeInputData } = useNodeHelpers();
-const { debounce } = useDebounce();
-
-const emit = defineEmits<{
-	'clear:search': [];
-}>();
-
-const nodeSchema = computed(() =>
-	filterSchema(getSchemaForExecutionData(props.data ?? []), props.search),
-);
-const nodes = computed(() => {
-	return props.nodes
-		.map((node) => {
-			const fullNode = workflowsStore.getNodeByName(node.name);
-
-			if (!fullNode) return null;
-
-			const nodeType = nodeTypesStore.getNodeType(fullNode.type, fullNode.typeVersion);
-			const { itemsCount, schema } = nodesData.value[node.name] ?? {
-				itemsCount: null,
-				schema: null,
-			};
-
-			return {
-				node: fullNode,
-				connectedOutputIndexes: node.indicies.length > 0 ? node.indicies : [0],
-				depth: node.depth,
-				itemsCount,
-				nodeType,
-				schema: schema ? filterSchema(schema, props.search) : null,
-				loading: nodesLoading.value[node.name],
-				open: nodesOpen.value[node.name],
-			};
-		})
-		.filter((node): node is SchemaNode => !!(node?.node && node.nodeType));
-});
-
-const filteredNodes = computed(() =>
-	nodes.value.filter((node) => !props.search || !isDataEmpty(node.schema)),
-);
-
-const nodeAdditionalInfo = (node: INodeUi) => {
-	const returnData: string[] = [];
-	if (node.disabled) {
-		returnData.push(i18n.baseText('node.disabled'));
-	}
-
-	const connections = ndvStore.ndvNodeInputNumber[node.name];
-	if (connections) {
-		if (connections.length === 1) {
-			returnData.push(`Input ${connections}`);
-		} else {
-			returnData.push(`Inputs ${connections.join(', ')}`);
-		}
-	}
-
-	return returnData.length ? `(${returnData.join(' | ')})` : '';
-};
-
-const isDataEmpty = (schema: Schema | null) => {
-	if (!schema) return true;
-	// Utilize the generated schema instead of looping over the entire data again
-	// The schema for empty data is { type: 'object' | 'array', value: [] }
-	const isObjectOrArray = schema.type === 'object' || schema.type === 'array';
-	const isEmpty = Array.isArray(schema.value) && schema.value.length === 0;
-
-	return isObjectOrArray && isEmpty;
-};
-
-const highlight = computed(() => ndvStore.highlightDraggables);
-const allNodesOpen = computed(() => nodes.value.every((node) => node.open));
-const noNodesOpen = computed(() => nodes.value.every((node) => !node.open));
-
-const loadNodeData = async ({ node, connectedOutputIndexes }: SchemaNode) => {
-	const pinData = workflowsStore.pinDataByNodeName(node.name);
-	const data =
-		pinData ??
-		connectedOutputIndexes
-			.map((outputIndex) =>
-				executionDataToJson(
-					getNodeInputData(node, props.runIndex, outputIndex, props.paneType, props.connectionType),
-				),
-			)
-			.flat();
-
-	nodesData.value[node.name] = {
-		schema: getSchemaForExecutionData(data),
-		itemsCount: data.length,
-	};
-};
-
-const toggleOpenNode = async (schemaNode: SchemaNode, exclusive = false) => {
-	const { node, schema, open } = schemaNode;
-	disableScrollInView.value = false;
-	if (open) {
-		nodesOpen.value[node.name] = false;
-		return;
-	}
-
-	if (!schema) {
-		nodesLoading.value[node.name] = true;
-		await loadNodeData(schemaNode);
-		nodesLoading.value[node.name] = false;
-	}
-
-	if (exclusive) {
-		nodesOpen.value = { [node.name]: true };
-	} else {
-		nodesOpen.value[node.name] = true;
-	}
-};
-
-const openAllNodes = async () => {
-	const nodesToLoad = nodes.value.filter((node) => !node.schema);
-	await Promise.all(nodesToLoad.map(loadNodeData));
-	nodesOpen.value = Object.fromEntries(nodes.value.map(({ node }) => [node.name, true]));
-};
-
-const onDragStart = (el: HTMLElement) => {
-	if (el?.dataset?.path) {
-		draggingPath.value = el.dataset.path;
-	}
-
-	ndvStore.resetMappingTelemetry();
-};
-
-const onDragEnd = (el: HTMLElement, node: INodeUi, depth: number) => {
-	draggingPath.value = '';
-
-	setTimeout(() => {
-		const mappingTelemetry = ndvStore.mappingTelemetry;
-		const telemetryPayload = {
-			src_node_type: node.type,
-			src_field_name: el.dataset.name ?? '',
-			src_nodes_back: depth,
-			src_run_index: props.runIndex,
-			src_runs_total: props.totalRuns,
-			src_field_nest_level: el.dataset.depth ?? 0,
-			src_view: 'schema',
-			src_element: el,
-			success: false,
-			...mappingTelemetry,
-		};
-
-		void useExternalHooks().run('runDataJson.onDragEnd', telemetryPayload);
-
-		telemetry.track('User dragged data for mapping', telemetryPayload, { withPostHog: true });
-	}, 1000); // ensure dest data gets set if drop
-};
-
-const onTransitionStart = debounce(
-	(event: TransitionEvent, nodeName: string) => {
-		if (
-			nodesOpen.value[nodeName] &&
-			event.target instanceof HTMLElement &&
-			!disableScrollInView.value
-		) {
-			event.target.scrollIntoView({
-				behavior: 'smooth',
-				block: 'nearest',
-				inline: 'nearest',
-			});
-		}
-	},
-	{ debounceTime: 100, trailing: true },
-);
-
-watch(
-	() => props.nodes,
-	() => {
-		if (noNodesOpen.value && nodes.value.length > 0) {
-			void toggleOpenNode(nodes.value[0]);
-		}
-	},
-	{ immediate: true },
-);
-
-watch(
-	() => props.search,
-	(search, prevSearch) => {
-		if (!prevSearch?.trim() && search.trim() && !allNodesOpen.value) {
-			disableScrollInView.value = true;
-			void openAllNodes();
-		}
-
-		if (prevSearch?.trim() && !search.trim() && allNodesOpen.value && nodes.value.length > 0) {
-			nodesOpen.value = { [nodes.value[0].node.name]: true };
-		}
-	},
-	{ immediate: true },
-);
-</script>
-
-<template>
-	<div
-		v-if="paneType === 'input' && nodes.length > 0"
-		:class="[$style.schemaWrapper, { highlightSchema: highlight }]"
-	>
-		<div v-if="search && nodes.length > 0 && filteredNodes.length === 0" :class="$style.noMatch">
-			<n8n-text tag="h3" size="large">{{ i18n.baseText('ndv.search.noNodeMatch.title') }}</n8n-text>
-			<n8n-text>
-				<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-					<template #link>
-						<a href="#" @click="emit('clear:search')">
-							{{ i18n.baseText('ndv.search.noMatch.description.link') }}
-						</a>
-					</template>
-				</i18n-t>
-			</n8n-text>
-		</div>
-
-		<div
-			v-for="currentNode in filteredNodes"
-			:key="currentNode.node.id"
-			data-test-id="run-data-schema-node"
-			:class="[$style.node, { [$style.open]: currentNode.open }]"
-		>
-			<div
-				:class="[
-					$style.header,
-					{
-						[$style.trigger]: currentNode.nodeType.group.includes('trigger'),
-					},
-				]"
-				data-test-id="run-data-schema-node-header"
-			>
-				<div :class="$style.expand" @click="toggleOpenNode(currentNode)">
-					<font-awesome-icon icon="angle-right" :class="$style.expandIcon" />
-				</div>
-
-				<div
-					:class="$style.titleContainer"
-					data-test-id="run-data-schema-node-name"
-					@click="toggleOpenNode(currentNode, true)"
-				>
-					<div :class="$style.nodeIcon">
-						<NodeIcon :node-type="currentNode.nodeType" :size="12" />
-					</div>
-
-					<div :class="$style.title">
-						{{ currentNode.node.name }}
-						<span v-if="nodeAdditionalInfo(currentNode.node)" :class="$style.subtitle">{{
-							nodeAdditionalInfo(currentNode.node)
-						}}</span>
-					</div>
-					<font-awesome-icon
-						v-if="currentNode.nodeType.group.includes('trigger')"
-						:class="$style.triggerIcon"
-						icon="bolt"
-						size="xs"
-					/>
-				</div>
-
-				<Transition name="items">
-					<div
-						v-if="currentNode.itemsCount && currentNode.open"
-						:class="$style.items"
-						data-test-id="run-data-schema-node-item-count"
-					>
-						{{
-							i18n.baseText('ndv.output.items', {
-								interpolate: { count: currentNode.itemsCount },
-							})
-						}}
-					</div>
-				</Transition>
-			</div>
-
-			<Draggable
-				type="mapping"
-				target-data-key="mappable"
-				:disabled="!mappingEnabled"
-				@dragstart="onDragStart"
-				@dragend="(el: HTMLElement) => onDragEnd(el, currentNode.node, currentNode.depth)"
-			>
-				<template #preview="{ canDrop, el }">
-					<MappingPill v-if="el" :html="el.outerHTML" :can-drop="canDrop" />
-				</template>
-
-				<Transition name="schema">
-					<div
-						v-if="currentNode.schema || search"
-						:class="[$style.schema, $style.animated]"
-						data-test-id="run-data-schema-node-schema"
-						@transitionstart="(event) => onTransitionStart(event, currentNode.node.name)"
-					>
-						<div :class="$style.innerSchema" @transitionstart.stop>
-							<div
-								v-if="currentNode.node.disabled"
-								:class="$style.notice"
-								data-test-id="run-data-schema-disabled"
-							>
-								{{ i18n.baseText('dataMapping.schemaView.disabled') }}
-							</div>
-
-							<div
-								v-else-if="isDataEmpty(currentNode.schema)"
-								:class="$style.notice"
-								data-test-id="run-data-schema-empty"
-							>
-								{{ i18n.baseText('dataMapping.schemaView.emptyData') }}
-							</div>
-
-							<RunDataSchemaItem
-								v-else-if="currentNode.schema"
-								:schema="currentNode.schema"
-								:level="0"
-								:parent="null"
-								:pane-type="paneType"
-								:sub-key="`${props.context}_${snakeCase(currentNode.node.name)}`"
-								:mapping-enabled="mappingEnabled"
-								:dragging-path="draggingPath"
-								:distance-from-active="currentNode.depth"
-								:node="currentNode.node"
-								:search="search"
-							/>
-						</div>
-					</div>
-				</Transition>
-			</Draggable>
-		</div>
-	</div>
-
-	<div v-else :class="[$style.schemaWrapper, { highlightSchema: highlight }]">
-		<div v-if="isDataEmpty(nodeSchema) && search" :class="$style.noMatch">
-			<n8n-text tag="h3" size="large">{{ i18n.baseText('ndv.search.noNodeMatch.title') }}</n8n-text>
-			<n8n-text>
-				<i18n-t keypath="ndv.search.noMatch.description" tag="span">
-					<template #link>
-						<a href="#" @click="emit('clear:search')">
-							{{ i18n.baseText('ndv.search.noMatch.description.link') }}
-						</a>
-					</template>
-				</i18n-t>
-			</n8n-text>
-			<n8n-text>{{ i18n.baseText('ndv.search.noMatchSchema.description') }}</n8n-text>
-		</div>
-
-		<div v-else :class="$style.schema" data-test-id="run-data-schema-node-schema">
-			<n8n-info-tip
-				v-if="isDataEmpty(nodeSchema)"
-				:class="$style.tip"
-				data-test-id="run-data-schema-empty"
-			>
-				{{ i18n.baseText('dataMapping.schemaView.emptyData') }}
-			</n8n-info-tip>
-
-			<RunDataSchemaItem
-				v-else-if="nodeSchema"
-				:schema="nodeSchema"
-				:level="0"
-				:parent="null"
-				:pane-type="paneType"
-				:sub-key="`${props.context}_output_${nodeSchema.type}-0-0`"
-				:mapping-enabled="mappingEnabled"
-				:dragging-path="draggingPath"
-				:node="node"
-				:search="search"
-			/>
-		</div>
-	</div>
-</template>
-
-<style lang="scss" module>
-@import '@/styles/variables';
-
-.schemaWrapper {
-	--header-height: 38px;
-	--title-spacing-left: 38px;
-	display: flex;
-	flex-direction: column;
-	container: schema / inline-size;
-
-	&.animating {
-		overflow: hidden;
-		height: 100%;
-	}
-}
-
-.node {
-	.schema {
-		padding-left: var(--title-spacing-left);
-		scroll-margin-top: var(--header-height);
-	}
-
-	.notice {
-		padding-left: var(--spacing-l);
-	}
-}
-
-.schema {
-	display: grid;
-	grid-template-rows: 1fr;
-
-	&.animated {
-		grid-template-rows: 0fr;
-		transform: translateX(-8px);
-		opacity: 0;
-
-		transition:
-			grid-template-rows 0.2s $ease-out-expo,
-			opacity 0.2s $ease-out-expo 0s,
-			transform 0.2s $ease-out-expo 0s;
-	}
-}
-
-.notice {
-	font-size: var(--font-size-2xs);
-	color: var(--color-text-light);
-}
-
-.innerSchema {
-	min-height: 0;
-	min-width: 0;
-
-	> div {
-		margin-bottom: var(--spacing-xs);
-	}
-}
-
-.titleContainer {
-	display: flex;
-	align-items: center;
-	gap: var(--spacing-2xs);
-	flex-basis: 100%;
-	cursor: pointer;
-}
-
-.subtitle {
-	margin-left: auto;
-	padding-left: var(--spacing-2xs);
-	color: var(--color-text-light);
-	font-weight: var(--font-weight-regular);
-}
-
-.header {
-	display: flex;
-	align-items: center;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	padding-bottom: var(--spacing-2xs);
-	background: var(--color-run-data-background);
-}
-
-.expand {
-	--expand-toggle-size: 30px;
-	width: var(--expand-toggle-size);
-	height: var(--expand-toggle-size);
-	flex-shrink: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-
-	&:hover,
-	&:active {
-		color: var(--color-text-dark);
-	}
-}
-
-.expandIcon {
-	transition: transform 0.2s $ease-out-expo;
-}
-
-.open {
-	.expandIcon {
-		transform: rotate(90deg);
-	}
-
-	.schema {
-		transition:
-			grid-template-rows 0.2s $ease-out-expo,
-			opacity 0.2s $ease-out-expo,
-			transform 0.2s $ease-out-expo;
-		grid-template-rows: 1fr;
-		opacity: 1;
-		transform: translateX(0);
-	}
-}
-
-.nodeIcon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: var(--spacing-3xs);
-	border: 1px solid var(--color-foreground-light);
-	border-radius: var(--border-radius-base);
-	background-color: var(--color-background-xlight);
-}
-
-.noMatch {
-	display: flex;
-	flex-grow: 1;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: var(--spacing-s) var(--spacing-s) var(--spacing-xl) var(--spacing-s);
-	text-align: center;
-
-	> * {
-		max-width: 316px;
-		margin-bottom: var(--spacing-2xs);
-	}
-}
-
-.title {
-	font-size: var(--font-size-2xs);
-	color: var(--color-text-dark);
-}
-
-.items {
-	flex-shrink: 0;
-	font-size: var(--font-size-2xs);
-	color: var(--color-text-light);
-	margin-left: var(--spacing-2xs);
-
-	transition:
-		opacity 0.2s $ease-out-expo,
-		transform 0.2s $ease-out-expo;
-}
-
-.triggerIcon {
-	margin-left: var(--spacing-2xs);
-	color: var(--color-primary);
-}
-
-.trigger {
-	.nodeIcon {
-		border-radius: 16px 4px 4px 16px;
-	}
-}
-
-@container schema (max-width: 24em) {
-	.depth {
-		display: none;
-	}
-}
-</style>
-
-<style lang="scss" scoped>
-@import '@/styles/variables';
-
-.items-enter-from,
-.items-leave-to {
-	transform: translateX(-4px);
-	opacity: 0;
-}
-
-.items-enter-to,
-.items-leave-from {
-	transform: translateX(0);
-	opacity: 1;
-}
-
-.schema-enter-from,
-.schema-leave-to {
-	grid-template-rows: 0fr;
-	transform: translateX(-8px);
-	opacity: 0;
-}
-
-.schema-enter-to,
-.schema-leave-from {
-	transform: translateX(0);
-	grid-template-rows: 1fr;
-	opacity: 1;
-}
-</style>
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
deleted file mode 100644
index 43751ccb9d580..0000000000000
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ /dev/null
@@ -1,333 +0,0 @@
-<script lang="ts" setup>
-import { computed } from 'vue';
-import type { INodeUi, Schema } from '@/Interface';
-import { checkExhaustive } from '@/utils/typeGuards';
-import { shorten } from '@/utils/typesUtils';
-import { getMappedExpression } from '@/utils/mappingUtils';
-import TextWithHighlights from './TextWithHighlights.vue';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-
-type Props = {
-	schema: Schema;
-	level: number;
-	parent: Schema | null;
-	subKey: string;
-	paneType: 'input' | 'output';
-	mappingEnabled: boolean;
-	draggingPath: string;
-	distanceFromActive?: number;
-	node: INodeUi | null;
-	search: string;
-};
-
-const props = defineProps<Props>();
-
-const isSchemaValueArray = computed(() => Array.isArray(props.schema.value));
-const schemaArray = computed(
-	() => (isSchemaValueArray.value ? props.schema.value : []) as Schema[],
-);
-const isSchemaParentTypeArray = computed(() => props.parent?.type === 'array');
-
-const key = computed((): string | undefined => {
-	return isSchemaParentTypeArray.value ? `[${props.schema.key}]` : props.schema.key;
-});
-const schemaName = computed(() =>
-	isSchemaParentTypeArray.value ? `${props.schema.type}[${props.schema.key}]` : props.schema.key,
-);
-
-const text = computed(() =>
-	Array.isArray(props.schema.value) ? '' : shorten(props.schema.value, 600, 0),
-);
-
-const dragged = computed(() => props.draggingPath === props.schema.path);
-
-const getJsonParameterPath = (path: string): string =>
-	getMappedExpression({
-		nodeName: props.node!.name,
-		distanceFromActive: props.distanceFromActive ?? 1,
-		path,
-	});
-
-const getIconBySchemaType = (type: Schema['type']): string => {
-	switch (type) {
-		case 'object':
-			return 'cube';
-		case 'array':
-			return 'list';
-		case 'string':
-		case 'null':
-			return 'font';
-		case 'number':
-			return 'hashtag';
-		case 'boolean':
-			return 'check-square';
-		case 'function':
-			return 'code';
-		case 'bigint':
-			return 'calculator';
-		case 'symbol':
-			return 'sun';
-		case 'undefined':
-			return 'ban';
-		default:
-			checkExhaustive(type);
-			return '';
-	}
-};
-</script>
-
-<template>
-	<div :class="$style.item" data-test-id="run-data-schema-item">
-		<div :class="$style.itemContent">
-			<div
-				v-if="level > 0 || (level === 0 && !isSchemaValueArray)"
-				:title="schema.type"
-				:class="{
-					[$style.pill]: true,
-					[$style.mappable]: mappingEnabled,
-					[$style.highlight]: dragged,
-				}"
-			>
-				<span
-					:class="$style.label"
-					:data-value="getJsonParameterPath(schema.path)"
-					:data-name="schemaName"
-					:data-path="schema.path"
-					:data-depth="level"
-					data-target="mappable"
-				>
-					<FontAwesomeIcon :icon="getIconBySchemaType(schema.type)" size="sm" />
-					<TextWithHighlights
-						v-if="isSchemaParentTypeArray"
-						:content="props.parent?.key"
-						:search="props.search"
-					/>
-					<TextWithHighlights
-						v-if="key"
-						:class="{ [$style.arrayIndex]: isSchemaParentTypeArray }"
-						:content="key"
-						:search="props.search"
-					/>
-				</span>
-			</div>
-
-			<span v-if="text" :class="$style.text" data-test-id="run-data-schema-item-value">
-				<template v-for="(line, index) in text.split('\n')" :key="`line-${index}`">
-					<span v-if="index > 0" :class="$style.newLine">\n</span>
-					<TextWithHighlights :content="line" :search="props.search" />
-				</template>
-			</span>
-		</div>
-
-		<input v-if="level > 0 && isSchemaValueArray" :id="subKey" type="checkbox" inert checked />
-		<label v-if="level > 0 && isSchemaValueArray" :class="$style.toggle" :for="subKey">
-			<FontAwesomeIcon icon="angle-right" />
-		</label>
-
-		<div v-if="isSchemaValueArray" :class="$style.sub">
-			<div :class="$style.innerSub">
-				<RunDataSchemaItem
-					v-for="s in schemaArray"
-					:key="s.key ?? s.type"
-					:schema="s"
-					:level="level + 1"
-					:parent="schema"
-					:pane-type="paneType"
-					:sub-key="`${subKey}-${s.key ?? s.type}`"
-					:mapping-enabled="mappingEnabled"
-					:dragging-path="draggingPath"
-					:distance-from-active="distanceFromActive"
-					:node="node"
-					:search="search"
-				/>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style lang="scss" module>
-@import '@/styles/variables';
-
-.item {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	line-height: var(--font-line-height-loose);
-	position: relative;
-	column-gap: var(--spacing-2xs);
-
-	+ .item {
-		margin-top: var(--spacing-2xs);
-	}
-
-	.item {
-		padding-left: var(--spacing-l);
-	}
-
-	input {
-		display: none;
-
-		~ .sub {
-			transition:
-				grid-template-rows 0.2s $ease-out-expo,
-				opacity 0.2s $ease-out-expo,
-				transform 0.2s $ease-out-expo;
-			transform: translateX(-8px);
-			opacity: 0;
-			margin-bottom: 0;
-
-			.innerSub {
-				min-height: 0;
-			}
-		}
-
-		&:checked {
-			~ .toggle svg {
-				transform: rotate(90deg);
-			}
-
-			~ .sub {
-				transform: translateX(0);
-				opacity: 1;
-				grid-template-rows: 1fr;
-			}
-		}
-	}
-}
-
-.itemContent {
-	display: flex;
-	gap: var(--spacing-2xs);
-	align-items: baseline;
-	flex-grow: 1;
-	min-width: 0;
-}
-
-.sub {
-	display: grid;
-	grid-template-rows: 0fr;
-	overflow: hidden;
-	flex-basis: 100%;
-	scroll-margin: 64px;
-}
-
-.innerSub {
-	display: inline-flex;
-	flex-direction: column;
-	order: -1;
-	min-width: 0;
-
-	.innerSub > div:first-child {
-		margin-top: var(--spacing-2xs);
-	}
-}
-
-:global(.highlightSchema) {
-	.pill.mappable {
-		&,
-		&:hover,
-		span,
-		&:hover span span {
-			color: var(--color-primary);
-			border-color: var(--color-primary-tint-1);
-			background-color: var(--color-primary-tint-3);
-
-			svg {
-				path {
-					fill: var(--color-primary);
-				}
-			}
-		}
-	}
-}
-
-.pill {
-	display: inline-flex;
-	height: 24px;
-	padding: 0 var(--spacing-3xs);
-	border: 1px solid var(--color-foreground-light);
-	border-radius: var(--border-radius-base);
-	background-color: var(--color-background-xlight);
-	font-size: var(--font-size-2xs);
-	color: var(--color-text-dark);
-	max-width: 50%;
-
-	path {
-		fill: var(--color-text-light);
-	}
-
-	&.mappable {
-		cursor: grab;
-
-		&:hover {
-			&,
-			span span {
-				background-color: var(--color-background-light);
-				border-color: var(--color-foreground-base);
-			}
-		}
-	}
-}
-
-.label {
-	display: flex;
-	min-width: 0;
-	align-items: center;
-
-	> span {
-		display: flex;
-		align-items: center;
-
-		margin-left: var(--spacing-3xs);
-		padding-left: var(--spacing-3xs);
-		border-left: 1px solid var(--color-foreground-light);
-
-		overflow: hidden;
-
-		span {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
-
-		&.arrayIndex {
-			border: 0;
-			padding-left: 0;
-			margin-left: 0;
-		}
-	}
-}
-
-.text {
-	display: block;
-	font-weight: var(--font-weight-normal);
-	font-size: var(--font-size-2xs);
-	overflow: hidden;
-	word-break: break-word;
-
-	.newLine {
-		font-family: var(--font-family-monospace);
-		color: var(--color-line-break);
-		padding-right: 2px;
-	}
-}
-
-.toggle {
-	display: flex;
-	position: absolute;
-	padding: var(--spacing-4xs) var(--spacing-2xs);
-	left: 0;
-	top: 0;
-	justify-content: center;
-	align-items: center;
-	cursor: pointer;
-	user-select: none;
-	font-weight: normal;
-	font-size: var(--font-size-s);
-	overflow: hidden;
-
-	svg {
-		transition: transform 0.2s $ease-out-expo;
-	}
-}
-</style>
diff --git a/packages/editor-ui/src/components/VirtualSchema.test.ts b/packages/editor-ui/src/components/VirtualSchema.test.ts
index 0a000ea24e1a6..f648b1de3c3be 100644
--- a/packages/editor-ui/src/components/VirtualSchema.test.ts
+++ b/packages/editor-ui/src/components/VirtualSchema.test.ts
@@ -110,7 +110,7 @@ function mockNodeOutputData(nodeName: string, data: IDataObject[], outputIndex =
 	});
 }
 
-describe('RunDataSchema.vue', () => {
+describe('VirtualSchema.vue', () => {
 	let renderComponent: ReturnType<typeof createComponentRenderer>;
 
 	const DynamicScrollerStub = {
diff --git a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
deleted file mode 100644
index 5d4d5c4e4dea9..0000000000000
--- a/packages/editor-ui/src/components/__snapshots__/RunDataSchema.test.ts.snap
+++ /dev/null
@@ -1,2453 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`RunDataSchema.vue > renders its own data for AI tools in debug mode 1`] = `
-<div
-  class="schema"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="item"
-    data-test-id="run-data-schema-item"
-    data-v-46dade00=""
-  >
-    <div
-      class="itemContent"
-    >
-      <!--v-if-->
-      <!--v-if-->
-    </div>
-    <!--v-if-->
-    <!--v-if-->
-    <div
-      class="sub"
-    >
-      <div
-        class="innerSub"
-      >
-        
-        <div
-          class="item"
-          data-test-id="run-data-schema-item"
-        >
-          <div
-            class="itemContent"
-          >
-            <div
-              class="pill mappable"
-              title="string"
-            >
-              <span
-                class="label"
-                data-depth="1"
-                data-name="output"
-                data-path=".output"
-                data-target="mappable"
-                data-value="{{ $json.output }}"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                  data-icon="font"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 448 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                    fill="currentColor"
-                  />
-                </svg>
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    output
-                  </span>
-                  
-                </span>
-              </span>
-            </div>
-            <span
-              class="text"
-              data-test-id="run-data-schema-item-value"
-            >
-              
-              
-              <!--v-if-->
-              <span
-                class="content"
-              >
-                
-                <span>
-                  <!--v-if-->
-                  AI tool output
-                </span>
-                
-              </span>
-              
-              
-            </span>
-          </div>
-          <!--v-if-->
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders previous nodes schema for AI tools 1`] = `
-<div
-  class="schema animated"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="innerSchema"
-    data-v-46dade00=""
-  >
-    <div
-      class="item"
-      data-test-id="run-data-schema-item"
-      data-v-46dade00=""
-    >
-      <div
-        class="itemContent"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-      <!--v-if-->
-      <div
-        class="sub"
-      >
-        <div
-          class="innerSub"
-        >
-          
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="number"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="id"
-                  data-path=".id"
-                  data-target="mappable"
-                  data-value="{{ $('If').item.json.id }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                    data-icon="hashtag"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      id
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    1
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="string"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="name"
-                  data-path=".name"
-                  data-target="mappable"
-                  data-value="{{ $('If').item.json.name }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                    data-icon="font"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      name
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    John
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema for correct output branch 1`] = `
-<div
-  class="schema animated"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="innerSchema"
-    data-v-46dade00=""
-  >
-    <div
-      class="item"
-      data-test-id="run-data-schema-item"
-      data-v-46dade00=""
-    >
-      <div
-        class="itemContent"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-      <!--v-if-->
-      <div
-        class="sub"
-      >
-        <div
-          class="innerSub"
-        >
-          
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="number"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="id"
-                  data-path=".id"
-                  data-target="mappable"
-                  data-value="{{ $('If').item.json.id }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                    data-icon="hashtag"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      id
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    1
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="string"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="name"
-                  data-path=".name"
-                  data-target="mappable"
-                  data-value="{{ $('If').item.json.name }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                    data-icon="font"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      name
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    John
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema for data 1`] = `
-<div
-  class="schema animated"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="innerSchema"
-    data-v-46dade00=""
-  >
-    <div
-      class="item"
-      data-test-id="run-data-schema-item"
-      data-v-46dade00=""
-    >
-      <div
-        class="itemContent"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-      <!--v-if-->
-      <div
-        class="sub"
-      >
-        <div
-          class="innerSub"
-        >
-          
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="string"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="name"
-                  data-path=".name"
-                  data-target="mappable"
-                  data-value="{{ $json.name }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                    data-icon="font"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      name
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    John
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="number"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="age"
-                  data-path=".age"
-                  data-target="mappable"
-                  data-value="{{ $json.age }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                    data-icon="hashtag"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      age
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    22
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="array"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="hobbies"
-                  data-path=".hobbies"
-                  data-target="mappable"
-                  data-value="{{ $json.hobbies }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                    data-icon="list"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      hobbies
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <!--v-if-->
-            </div>
-            <input
-              checked=""
-              id="ndv_set_1-hobbies"
-              inert=""
-              type="checkbox"
-            />
-            <label
-              class="toggle"
-              for="ndv_set_1-hobbies"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-angle-right fa-w-8"
-                data-icon="angle-right"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 256 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class=""
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  fill="currentColor"
-                />
-              </svg>
-            </label>
-            <div
-              class="sub"
-            >
-              <div
-                class="innerSub"
-              >
-                
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="itemContent"
-                  >
-                    <div
-                      class="pill mappable"
-                      title="string"
-                    >
-                      <span
-                        class="label"
-                        data-depth="2"
-                        data-name="string[0]"
-                        data-path=".hobbies[0]"
-                        data-target="mappable"
-                        data-value="{{ $json.hobbies[0] }}"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                          data-icon="font"
-                          data-prefix="fas"
-                          focusable="false"
-                          role="img"
-                          viewBox="0 0 448 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            class=""
-                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            hobbies
-                          </span>
-                          
-                        </span>
-                        <span
-                          class="content arrayIndex"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            [0]
-                          </span>
-                          
-                        </span>
-                      </span>
-                    </div>
-                    <span
-                      class="text"
-                      data-test-id="run-data-schema-item-value"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          surfing
-                        </span>
-                        
-                      </span>
-                      
-                      
-                    </span>
-                  </div>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="itemContent"
-                  >
-                    <div
-                      class="pill mappable"
-                      title="string"
-                    >
-                      <span
-                        class="label"
-                        data-depth="2"
-                        data-name="string[1]"
-                        data-path=".hobbies[1]"
-                        data-target="mappable"
-                        data-value="{{ $json.hobbies[1] }}"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                          data-icon="font"
-                          data-prefix="fas"
-                          focusable="false"
-                          role="img"
-                          viewBox="0 0 448 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            class=""
-                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            hobbies
-                          </span>
-                          
-                        </span>
-                        <span
-                          class="content arrayIndex"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            [1]
-                          </span>
-                          
-                        </span>
-                      </span>
-                    </div>
-                    <span
-                      class="text"
-                      data-test-id="run-data-schema-item-value"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          traveling
-                        </span>
-                        
-                      </span>
-                      
-                      
-                    </span>
-                  </div>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema for data 2`] = `
-<div
-  class="schema animated"
-  data-test-id="run-data-schema-node-schema"
-  data-v-46dade00=""
->
-  <div
-    class="innerSchema"
-    data-v-46dade00=""
-  >
-    <div
-      class="item"
-      data-test-id="run-data-schema-item"
-      data-v-46dade00=""
-    >
-      <div
-        class="itemContent"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <!--v-if-->
-      <!--v-if-->
-      <div
-        class="sub"
-      >
-        <div
-          class="innerSub"
-        >
-          
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="string"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="name"
-                  data-path=".name"
-                  data-target="mappable"
-                  data-value="{{ $('Set2').item.json.name }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                    data-icon="font"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      name
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    John
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="number"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="age"
-                  data-path=".age"
-                  data-target="mappable"
-                  data-value="{{ $('Set2').item.json.age }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                    data-icon="hashtag"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 448 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      age
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <span
-                class="text"
-                data-test-id="run-data-schema-item-value"
-              >
-                
-                
-                <!--v-if-->
-                <span
-                  class="content"
-                >
-                  
-                  <span>
-                    <!--v-if-->
-                    22
-                  </span>
-                  
-                </span>
-                
-                
-              </span>
-            </div>
-            <!--v-if-->
-            <!--v-if-->
-            <!--v-if-->
-          </div>
-          <div
-            class="item"
-            data-test-id="run-data-schema-item"
-          >
-            <div
-              class="itemContent"
-            >
-              <div
-                class="pill mappable"
-                title="array"
-              >
-                <span
-                  class="label"
-                  data-depth="1"
-                  data-name="hobbies"
-                  data-path=".hobbies"
-                  data-target="mappable"
-                  data-value="{{ $('Set2').item.json.hobbies }}"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                    data-icon="list"
-                    data-prefix="fas"
-                    focusable="false"
-                    role="img"
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      hobbies
-                    </span>
-                    
-                  </span>
-                </span>
-              </div>
-              <!--v-if-->
-            </div>
-            <input
-              checked=""
-              id="ndv_set_2-hobbies"
-              inert=""
-              type="checkbox"
-            />
-            <label
-              class="toggle"
-              for="ndv_set_2-hobbies"
-            >
-              <svg
-                aria-hidden="true"
-                class="svg-inline--fa fa-angle-right fa-w-8"
-                data-icon="angle-right"
-                data-prefix="fas"
-                focusable="false"
-                role="img"
-                viewBox="0 0 256 512"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  class=""
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                  fill="currentColor"
-                />
-              </svg>
-            </label>
-            <div
-              class="sub"
-            >
-              <div
-                class="innerSub"
-              >
-                
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="itemContent"
-                  >
-                    <div
-                      class="pill mappable"
-                      title="string"
-                    >
-                      <span
-                        class="label"
-                        data-depth="2"
-                        data-name="string[0]"
-                        data-path=".hobbies[0]"
-                        data-target="mappable"
-                        data-value="{{ $('Set2').item.json.hobbies[0] }}"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                          data-icon="font"
-                          data-prefix="fas"
-                          focusable="false"
-                          role="img"
-                          viewBox="0 0 448 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            class=""
-                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            hobbies
-                          </span>
-                          
-                        </span>
-                        <span
-                          class="content arrayIndex"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            [0]
-                          </span>
-                          
-                        </span>
-                      </span>
-                    </div>
-                    <span
-                      class="text"
-                      data-test-id="run-data-schema-item-value"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          surfing
-                        </span>
-                        
-                      </span>
-                      
-                      
-                    </span>
-                  </div>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                <div
-                  class="item"
-                  data-test-id="run-data-schema-item"
-                >
-                  <div
-                    class="itemContent"
-                  >
-                    <div
-                      class="pill mappable"
-                      title="string"
-                    >
-                      <span
-                        class="label"
-                        data-depth="2"
-                        data-name="string[1]"
-                        data-path=".hobbies[1]"
-                        data-target="mappable"
-                        data-value="{{ $('Set2').item.json.hobbies[1] }}"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                          data-icon="font"
-                          data-prefix="fas"
-                          focusable="false"
-                          role="img"
-                          viewBox="0 0 448 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            class=""
-                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            hobbies
-                          </span>
-                          
-                        </span>
-                        <span
-                          class="content arrayIndex"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            [1]
-                          </span>
-                          
-                        </span>
-                      </span>
-                    </div>
-                    <span
-                      class="text"
-                      data-test-id="run-data-schema-item-value"
-                    >
-                      
-                      
-                      <!--v-if-->
-                      <span
-                        class="content"
-                      >
-                        
-                        <span>
-                          <!--v-if-->
-                          traveling
-                        </span>
-                        
-                      </span>
-                      
-                      
-                    </span>
-                  </div>
-                  <!--v-if-->
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
-<div>
-  <div
-    class="schemaWrapper"
-    data-v-46dade00=""
-  >
-    <div
-      class="schema"
-      data-test-id="run-data-schema-node-schema"
-      data-v-46dade00=""
-    >
-      <div
-        class="item"
-        data-test-id="run-data-schema-item"
-        data-v-46dade00=""
-      >
-        <div
-          class="itemContent"
-        >
-          <!--v-if-->
-          <!--v-if-->
-        </div>
-        <!--v-if-->
-        <!--v-if-->
-        <div
-          class="sub"
-        >
-          <div
-            class="innerSub"
-          >
-            
-            <div
-              class="item"
-              data-test-id="run-data-schema-item"
-            >
-              <div
-                class="itemContent"
-              >
-                <div
-                  class="pill mappable"
-                  title="string"
-                >
-                  <span
-                    class="label"
-                    data-depth="1"
-                    data-name="name"
-                    data-path=".name"
-                    data-target="mappable"
-                    data-value="{{ $json.name }}"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                      data-icon="font"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class=""
-                        d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        name
-                      </span>
-                      
-                    </span>
-                  </span>
-                </div>
-                <span
-                  class="text"
-                  data-test-id="run-data-schema-item-value"
-                >
-                  
-                  
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      John
-                    </span>
-                    
-                  </span>
-                  
-                  
-                </span>
-              </div>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="item"
-              data-test-id="run-data-schema-item"
-            >
-              <div
-                class="itemContent"
-              >
-                <div
-                  class="pill mappable"
-                  title="number"
-                >
-                  <span
-                    class="label"
-                    data-depth="1"
-                    data-name="age"
-                    data-path=".age"
-                    data-target="mappable"
-                    data-value="{{ $json.age }}"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                      data-icon="hashtag"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 448 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class=""
-                        d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        age
-                      </span>
-                      
-                    </span>
-                  </span>
-                </div>
-                <span
-                  class="text"
-                  data-test-id="run-data-schema-item-value"
-                >
-                  
-                  
-                  <!--v-if-->
-                  <span
-                    class="content"
-                  >
-                    
-                    <span>
-                      <!--v-if-->
-                      22
-                    </span>
-                    
-                  </span>
-                  
-                  
-                </span>
-              </div>
-              <!--v-if-->
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="item"
-              data-test-id="run-data-schema-item"
-            >
-              <div
-                class="itemContent"
-              >
-                <div
-                  class="pill mappable"
-                  title="array"
-                >
-                  <span
-                    class="label"
-                    data-depth="1"
-                    data-name="hobbies"
-                    data-path=".hobbies"
-                    data-target="mappable"
-                    data-value="{{ $json.hobbies }}"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                      data-icon="list"
-                      data-prefix="fas"
-                      focusable="false"
-                      role="img"
-                      viewBox="0 0 512 512"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        class=""
-                        d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                        fill="currentColor"
-                      />
-                    </svg>
-                    <!--v-if-->
-                    <span
-                      class="content"
-                    >
-                      
-                      <span>
-                        <!--v-if-->
-                        hobbies
-                      </span>
-                      
-                    </span>
-                  </span>
-                </div>
-                <!--v-if-->
-              </div>
-              <input
-                checked=""
-                id="ndv_output_object-0-0-hobbies"
-                inert=""
-                type="checkbox"
-              />
-              <label
-                class="toggle"
-                for="ndv_output_object-0-0-hobbies"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="svg-inline--fa fa-angle-right fa-w-8"
-                  data-icon="angle-right"
-                  data-prefix="fas"
-                  focusable="false"
-                  role="img"
-                  viewBox="0 0 256 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class=""
-                    d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </label>
-              <div
-                class="sub"
-              >
-                <div
-                  class="innerSub"
-                >
-                  
-                  <div
-                    class="item"
-                    data-test-id="run-data-schema-item"
-                  >
-                    <div
-                      class="itemContent"
-                    >
-                      <div
-                        class="pill mappable"
-                        title="string"
-                      >
-                        <span
-                          class="label"
-                          data-depth="2"
-                          data-name="string[0]"
-                          data-path=".hobbies[0]"
-                          data-target="mappable"
-                          data-value="{{ $json.hobbies[0] }}"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                            data-icon="font"
-                            data-prefix="fas"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 448 512"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              class=""
-                              d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                              fill="currentColor"
-                            />
-                          </svg>
-                          <span
-                            class="content"
-                          >
-                            
-                            <span>
-                              <!--v-if-->
-                              hobbies
-                            </span>
-                            
-                          </span>
-                          <span
-                            class="content arrayIndex"
-                          >
-                            
-                            <span>
-                              <!--v-if-->
-                              [0]
-                            </span>
-                            
-                          </span>
-                        </span>
-                      </div>
-                      <span
-                        class="text"
-                        data-test-id="run-data-schema-item-value"
-                      >
-                        
-                        
-                        <!--v-if-->
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            surfing
-                          </span>
-                          
-                        </span>
-                        
-                        
-                      </span>
-                    </div>
-                    <!--v-if-->
-                    <!--v-if-->
-                    <!--v-if-->
-                  </div>
-                  <div
-                    class="item"
-                    data-test-id="run-data-schema-item"
-                  >
-                    <div
-                      class="itemContent"
-                    >
-                      <div
-                        class="pill mappable"
-                        title="string"
-                      >
-                        <span
-                          class="label"
-                          data-depth="2"
-                          data-name="string[1]"
-                          data-path=".hobbies[1]"
-                          data-target="mappable"
-                          data-value="{{ $json.hobbies[1] }}"
-                        >
-                          <svg
-                            aria-hidden="true"
-                            class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                            data-icon="font"
-                            data-prefix="fas"
-                            focusable="false"
-                            role="img"
-                            viewBox="0 0 448 512"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              class=""
-                              d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                              fill="currentColor"
-                            />
-                          </svg>
-                          <span
-                            class="content"
-                          >
-                            
-                            <span>
-                              <!--v-if-->
-                              hobbies
-                            </span>
-                            
-                          </span>
-                          <span
-                            class="content arrayIndex"
-                          >
-                            
-                            <span>
-                              <!--v-if-->
-                              [1]
-                            </span>
-                            
-                          </span>
-                        </span>
-                      </div>
-                      <span
-                        class="text"
-                        data-test-id="run-data-schema-item-value"
-                      >
-                        
-                        
-                        <!--v-if-->
-                        <span
-                          class="content"
-                        >
-                          
-                          <span>
-                            <!--v-if-->
-                            traveling
-                          </span>
-                          
-                        </span>
-                        
-                        
-                      </span>
-                    </div>
-                    <!--v-if-->
-                    <!--v-if-->
-                    <!--v-if-->
-                  </div>
-                  
-                </div>
-              </div>
-            </div>
-            
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
-<div>
-  <div
-    class="schemaWrapper"
-    data-v-46dade00=""
-  >
-    <!--v-if-->
-    
-    <div
-      class="node"
-      data-test-id="run-data-schema-node"
-      data-v-46dade00=""
-    >
-      <div
-        class="header"
-        data-test-id="run-data-schema-node-header"
-        data-v-46dade00=""
-      >
-        <div
-          class="expand"
-          data-v-46dade00=""
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-angle-right fa-w-8 expandIcon"
-            data-icon="angle-right"
-            data-prefix="fas"
-            data-v-46dade00=""
-            focusable="false"
-            role="img"
-            viewBox="0 0 256 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              class=""
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <div
-          class="titleContainer"
-          data-test-id="run-data-schema-node-name"
-          data-v-46dade00=""
-        >
-          <div
-            class="nodeIcon"
-            data-v-46dade00=""
-          >
-            <div
-              class="n8n-node-icon"
-              data-v-46dade00=""
-            >
-              <div
-                class="nodeIconWrapper"
-                style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
-              >
-                <!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
-                
-                <div
-                  class="icon"
-                >
-                  <img
-                    class="nodeIconImage"
-                  />
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          <div
-            class="title"
-            data-v-46dade00=""
-          >
-            Set1 
-            <!--v-if-->
-          </div>
-          <!--v-if-->
-        </div>
-        <transition-stub
-          appear="false"
-          css="true"
-          data-v-46dade00=""
-          name="items"
-          persisted="false"
-        >
-          <!--v-if-->
-        </transition-stub>
-      </div>
-      <div
-        class=""
-        data-v-46dade00=""
-      >
-        
-        <transition-stub
-          appear="false"
-          css="true"
-          data-v-46dade00=""
-          name="schema"
-          persisted="false"
-        >
-          <div
-            class="schema animated"
-            data-test-id="run-data-schema-node-schema"
-            data-v-46dade00=""
-          >
-            <div
-              class="innerSchema"
-              data-v-46dade00=""
-            >
-              <div
-                class="item"
-                data-test-id="run-data-schema-item"
-                data-v-46dade00=""
-              >
-                <div
-                  class="itemContent"
-                >
-                  <!--v-if-->
-                  <!--v-if-->
-                </div>
-                <!--v-if-->
-                <!--v-if-->
-                <div
-                  class="sub"
-                >
-                  <div
-                    class="innerSub"
-                  >
-                    
-                    <div
-                      class="item"
-                      data-test-id="run-data-schema-item"
-                    >
-                      <div
-                        class="itemContent"
-                      >
-                        <div
-                          class="pill mappable"
-                          title="array"
-                        >
-                          <span
-                            class="label"
-                            data-depth="1"
-                            data-name="hello world"
-                            data-path="['hello world']"
-                            data-target="mappable"
-                            data-value="{{ $json['hello world'] }}"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="svg-inline--fa fa-list fa-w-16 fa-sm"
-                              data-icon="list"
-                              data-prefix="fas"
-                              focusable="false"
-                              role="img"
-                              viewBox="0 0 512 512"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                class=""
-                                d="M80 368H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm0-320H16A16 16 0 0 0 0 64v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16V64a16 16 0 0 0-16-16zm0 160H16a16 16 0 0 0-16 16v64a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16zm416 176H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H176a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h320a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"
-                                fill="currentColor"
-                              />
-                            </svg>
-                            <!--v-if-->
-                            <span
-                              class="content"
-                            >
-                              
-                              <span>
-                                <!--v-if-->
-                                hello world
-                              </span>
-                              
-                            </span>
-                          </span>
-                        </div>
-                        <!--v-if-->
-                      </div>
-                      <input
-                        checked=""
-                        id="ndv_set_1-hello world"
-                        inert=""
-                        type="checkbox"
-                      />
-                      <label
-                        class="toggle"
-                        for="ndv_set_1-hello world"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="svg-inline--fa fa-angle-right fa-w-8"
-                          data-icon="angle-right"
-                          data-prefix="fas"
-                          focusable="false"
-                          role="img"
-                          viewBox="0 0 256 512"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            class=""
-                            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                            fill="currentColor"
-                          />
-                        </svg>
-                      </label>
-                      <div
-                        class="sub"
-                      >
-                        <div
-                          class="innerSub"
-                        >
-                          
-                          <div
-                            class="item"
-                            data-test-id="run-data-schema-item"
-                          >
-                            <div
-                              class="itemContent"
-                            >
-                              <div
-                                class="pill mappable"
-                                title="object"
-                              >
-                                <span
-                                  class="label"
-                                  data-depth="2"
-                                  data-name="object[0]"
-                                  data-path="['hello world'][0]"
-                                  data-target="mappable"
-                                  data-value="{{ $json['hello world'][0] }}"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    class="svg-inline--fa fa-cube fa-w-16 fa-sm"
-                                    data-icon="cube"
-                                    data-prefix="fas"
-                                    focusable="false"
-                                    role="img"
-                                    viewBox="0 0 512 512"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      class=""
-                                      d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
-                                      fill="currentColor"
-                                    />
-                                  </svg>
-                                  <span
-                                    class="content"
-                                  >
-                                    
-                                    <span>
-                                      <!--v-if-->
-                                      hello world
-                                    </span>
-                                    
-                                  </span>
-                                  <span
-                                    class="content arrayIndex"
-                                  >
-                                    
-                                    <span>
-                                      <!--v-if-->
-                                      [0]
-                                    </span>
-                                    
-                                  </span>
-                                </span>
-                              </div>
-                              <!--v-if-->
-                            </div>
-                            <input
-                              checked=""
-                              id="ndv_set_1-hello world-0"
-                              inert=""
-                              type="checkbox"
-                            />
-                            <label
-                              class="toggle"
-                              for="ndv_set_1-hello world-0"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                class="svg-inline--fa fa-angle-right fa-w-8"
-                                data-icon="angle-right"
-                                data-prefix="fas"
-                                focusable="false"
-                                role="img"
-                                viewBox="0 0 256 512"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  class=""
-                                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                                  fill="currentColor"
-                                />
-                              </svg>
-                            </label>
-                            <div
-                              class="sub"
-                            >
-                              <div
-                                class="innerSub"
-                              >
-                                
-                                <div
-                                  class="item"
-                                  data-test-id="run-data-schema-item"
-                                >
-                                  <div
-                                    class="itemContent"
-                                  >
-                                    <div
-                                      class="pill mappable"
-                                      title="object"
-                                    >
-                                      <span
-                                        class="label"
-                                        data-depth="3"
-                                        data-name="test"
-                                        data-path="['hello world'][0].test"
-                                        data-target="mappable"
-                                        data-value="{{ $json['hello world'][0].test }}"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          class="svg-inline--fa fa-cube fa-w-16 fa-sm"
-                                          data-icon="cube"
-                                          data-prefix="fas"
-                                          focusable="false"
-                                          role="img"
-                                          viewBox="0 0 512 512"
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            class=""
-                                            d="M239.1 6.3l-208 78c-18.7 7-31.1 25-31.1 45v225.1c0 18.2 10.3 34.8 26.5 42.9l208 104c13.5 6.8 29.4 6.8 42.9 0l208-104c16.3-8.1 26.5-24.8 26.5-42.9V129.3c0-20-12.4-37.9-31.1-44.9l-208-78C262 2.2 250 2.2 239.1 6.3zM256 68.4l192 72v1.1l-192 78-192-78v-1.1l192-72zm32 356V275.5l160-65v133.9l-160 80z"
-                                            fill="currentColor"
-                                          />
-                                        </svg>
-                                        <!--v-if-->
-                                        <span
-                                          class="content"
-                                        >
-                                          
-                                          <span>
-                                            <!--v-if-->
-                                            test
-                                          </span>
-                                          
-                                        </span>
-                                      </span>
-                                    </div>
-                                    <!--v-if-->
-                                  </div>
-                                  <input
-                                    checked=""
-                                    id="ndv_set_1-hello world-0-test"
-                                    inert=""
-                                    type="checkbox"
-                                  />
-                                  <label
-                                    class="toggle"
-                                    for="ndv_set_1-hello world-0-test"
-                                  >
-                                    <svg
-                                      aria-hidden="true"
-                                      class="svg-inline--fa fa-angle-right fa-w-8"
-                                      data-icon="angle-right"
-                                      data-prefix="fas"
-                                      focusable="false"
-                                      role="img"
-                                      viewBox="0 0 256 512"
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        class=""
-                                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-                                        fill="currentColor"
-                                      />
-                                    </svg>
-                                  </label>
-                                  <div
-                                    class="sub"
-                                  >
-                                    <div
-                                      class="innerSub"
-                                    >
-                                      
-                                      <div
-                                        class="item"
-                                        data-test-id="run-data-schema-item"
-                                      >
-                                        <div
-                                          class="itemContent"
-                                        >
-                                          <div
-                                            class="pill mappable"
-                                            title="number"
-                                          >
-                                            <span
-                                              class="label"
-                                              data-depth="4"
-                                              data-name="more to think about"
-                                              data-path="['hello world'][0].test['more to think about']"
-                                              data-target="mappable"
-                                              data-value="{{ $json['hello world'][0].test['more to think about'] }}"
-                                            >
-                                              <svg
-                                                aria-hidden="true"
-                                                class="svg-inline--fa fa-hashtag fa-w-14 fa-sm"
-                                                data-icon="hashtag"
-                                                data-prefix="fas"
-                                                focusable="false"
-                                                role="img"
-                                                viewBox="0 0 448 512"
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  class=""
-                                                  d="M440.667 182.109l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l14.623-81.891C377.123 38.754 371.468 32 363.997 32h-40.632a12 12 0 0 0-11.813 9.891L296.175 128H197.54l14.623-81.891C213.477 38.754 207.822 32 200.35 32h-40.632a12 12 0 0 0-11.813 9.891L132.528 128H53.432a12 12 0 0 0-11.813 9.891l-7.143 40C33.163 185.246 38.818 192 46.289 192h74.81L98.242 320H19.146a12 12 0 0 0-11.813 9.891l-7.143 40C-1.123 377.246 4.532 384 12.003 384h74.81L72.19 465.891C70.877 473.246 76.532 480 84.003 480h40.632a12 12 0 0 0 11.813-9.891L151.826 384h98.634l-14.623 81.891C234.523 473.246 240.178 480 247.65 480h40.632a12 12 0 0 0 11.813-9.891L315.472 384h79.096a12 12 0 0 0 11.813-9.891l7.143-40c1.313-7.355-4.342-14.109-11.813-14.109h-74.81l22.857-128h79.096a12 12 0 0 0 11.813-9.891zM261.889 320h-98.634l22.857-128h98.634l-22.857 128z"
-                                                  fill="currentColor"
-                                                />
-                                              </svg>
-                                              <!--v-if-->
-                                              <span
-                                                class="content"
-                                              >
-                                                
-                                                <span>
-                                                  <!--v-if-->
-                                                  more to think about
-                                                </span>
-                                                
-                                              </span>
-                                            </span>
-                                          </div>
-                                          <span
-                                            class="text"
-                                            data-test-id="run-data-schema-item-value"
-                                          >
-                                            
-                                            
-                                            <!--v-if-->
-                                            <span
-                                              class="content"
-                                            >
-                                              
-                                              <span>
-                                                <!--v-if-->
-                                                1
-                                              </span>
-                                              
-                                            </span>
-                                            
-                                            
-                                          </span>
-                                        </div>
-                                        <!--v-if-->
-                                        <!--v-if-->
-                                        <!--v-if-->
-                                      </div>
-                                      
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="item"
-                                  data-test-id="run-data-schema-item"
-                                >
-                                  <div
-                                    class="itemContent"
-                                  >
-                                    <div
-                                      class="pill mappable"
-                                      title="string"
-                                    >
-                                      <span
-                                        class="label"
-                                        data-depth="3"
-                                        data-name="test.how"
-                                        data-path="['hello world'][0]['test.how']"
-                                        data-target="mappable"
-                                        data-value="{{ $json['hello world'][0]['test.how'] }}"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          class="svg-inline--fa fa-font fa-w-14 fa-sm"
-                                          data-icon="font"
-                                          data-prefix="fas"
-                                          focusable="false"
-                                          role="img"
-                                          viewBox="0 0 448 512"
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            class=""
-                                            d="M432 416h-23.41L277.88 53.69A32 32 0 0 0 247.58 32h-47.16a32 32 0 0 0-30.3 21.69L39.41 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16h-19.58l23.3-64h152.56l23.3 64H304a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM176.85 272L224 142.51 271.15 272z"
-                                            fill="currentColor"
-                                          />
-                                        </svg>
-                                        <!--v-if-->
-                                        <span
-                                          class="content"
-                                        >
-                                          
-                                          <span>
-                                            <!--v-if-->
-                                            test.how
-                                          </span>
-                                          
-                                        </span>
-                                      </span>
-                                    </div>
-                                    <span
-                                      class="text"
-                                      data-test-id="run-data-schema-item-value"
-                                    >
-                                      
-                                      
-                                      <!--v-if-->
-                                      <span
-                                        class="content"
-                                      >
-                                        
-                                        <span>
-                                          <!--v-if-->
-                                          ignore
-                                        </span>
-                                        
-                                      </span>
-                                      
-                                      
-                                    </span>
-                                  </div>
-                                  <!--v-if-->
-                                  <!--v-if-->
-                                  <!--v-if-->
-                                </div>
-                                
-                              </div>
-                            </div>
-                          </div>
-                          
-                        </div>
-                      </div>
-                    </div>
-                    
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </transition-stub>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-      </div>
-    </div>
-    <div
-      class="node"
-      data-test-id="run-data-schema-node"
-      data-v-46dade00=""
-    >
-      <div
-        class="header"
-        data-test-id="run-data-schema-node-header"
-        data-v-46dade00=""
-      >
-        <div
-          class="expand"
-          data-v-46dade00=""
-        >
-          <svg
-            aria-hidden="true"
-            class="svg-inline--fa fa-angle-right fa-w-8 expandIcon"
-            data-icon="angle-right"
-            data-prefix="fas"
-            data-v-46dade00=""
-            focusable="false"
-            role="img"
-            viewBox="0 0 256 512"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              class=""
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-        <div
-          class="titleContainer"
-          data-test-id="run-data-schema-node-name"
-          data-v-46dade00=""
-        >
-          <div
-            class="nodeIcon"
-            data-v-46dade00=""
-          >
-            <div
-              class="n8n-node-icon"
-              data-v-46dade00=""
-            >
-              <div
-                class="nodeIconWrapper"
-                style="width: 12px; height: 12px; font-size: 12px; line-height: 12px;"
-              >
-                <!-- ElementUI tooltip is prone to memory-leaking so we only render it if we really need it -->
-                
-                <div
-                  class="icon"
-                >
-                  <img
-                    class="nodeIconImage"
-                  />
-                  <!--v-if-->
-                </div>
-                
-              </div>
-            </div>
-          </div>
-          <div
-            class="title"
-            data-v-46dade00=""
-          >
-            Set2 
-            <!--v-if-->
-          </div>
-          <!--v-if-->
-        </div>
-        <transition-stub
-          appear="false"
-          css="true"
-          data-v-46dade00=""
-          name="items"
-          persisted="false"
-        >
-          <!--v-if-->
-        </transition-stub>
-      </div>
-      <div
-        class=""
-        data-v-46dade00=""
-      >
-        
-        <transition-stub
-          appear="false"
-          css="true"
-          data-v-46dade00=""
-          name="schema"
-          persisted="false"
-        >
-          <!--v-if-->
-        </transition-stub>
-        
-        <!--teleport start-->
-        <!--teleport end-->
-      </div>
-    </div>
-    
-  </div>
-</div>
-`;
diff --git a/packages/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap b/packages/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
index 7c1fa631396af..d7d666d2bbbf8 100644
--- a/packages/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
+++ b/packages/editor-ui/src/components/__snapshots__/VirtualSchema.test.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RunDataSchema.vue > renders previous nodes schema for AI tools 1`] = `
+exports[`VirtualSchema.vue > renders previous nodes schema for AI tools 1`] = `
 <div
   class="schema-header"
   data-test-id="run-data-schema-header"
@@ -75,7 +75,7 @@ exports[`RunDataSchema.vue > renders previous nodes schema for AI tools 1`] = `
 </div>
 `;
 
-exports[`RunDataSchema.vue > renders schema for correct output branch 1`] = `
+exports[`VirtualSchema.vue > renders schema for correct output branch 1`] = `
 <div
   class="schema-header"
   data-test-id="run-data-schema-header"
@@ -150,7 +150,7 @@ exports[`RunDataSchema.vue > renders schema for correct output branch 1`] = `
 </div>
 `;
 
-exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
+exports[`VirtualSchema.vue > renders schema in output pane 1`] = `
 <div>
   <div
     class="run-data-schema full-height"
@@ -584,7 +584,7 @@ exports[`RunDataSchema.vue > renders schema in output pane 1`] = `
 </div>
 `;
 
-exports[`RunDataSchema.vue > renders schema with spaces and dots 1`] = `
+exports[`VirtualSchema.vue > renders schema with spaces and dots 1`] = `
 <div>
   <div
     class="run-data-schema full-height"