perf(editor): SchemaView performance improvement by ≈90% 🚀 (#12180)

Author: r00gm

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()

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);
 		});
 	});
 

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();

packages/@n8n/api-types/src/frontend-settings.ts

@@ -172,6 +172,5 @@ export interface FrontendSettings {
 		blockFileAccessToN8nFiles: boolean;
 	};
 	betaFeatures: FrontendBetaFeatures[];
-	virtualSchemaView: boolean;
 	easyAIWorkflowOnboarded: boolean;
 }

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

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,
 		};
 	}

packages/editor-ui/src/__tests__/defaults.ts

@@ -126,6 +126,5 @@ export const defaultSettings: FrontendSettings = {
 		enabled: false,
 	},
 	betaFeatures: [],
-	virtualSchemaView: false,
 	easyAIWorkflowOnboarded: false,
 };

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>

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'),