fix(editor): Improve large data warning in input/output panel (#9671)

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

@@ -605,6 +605,7 @@ import {
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_NDV_FLAG,
 	LOCAL_STORAGE_PIN_DATA_DISCOVERY_CANVAS_FLAG,
 	MAX_DISPLAY_DATA_SIZE,
+	MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
 	MAX_DISPLAY_ITEMS_AUTO_ALL,
 	TEST_PIN_DATA,
 	HTML_NODE_TYPE,
@@ -744,11 +745,13 @@ export default defineComponent({
 			binaryDataPreviewActive: false,
 			dataSize: 0,
 			showData: false,
+			userEnabledShowData: false,
 			outputIndex: 0,
 			binaryDataDisplayVisible: false,
 			binaryDataDisplayData: null as IBinaryData | null,
 
 			MAX_DISPLAY_DATA_SIZE,
+			MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW,
 			MAX_DISPLAY_ITEMS_AUTO_ALL,
 			currentPage: 1,
 			pageSize: 10,
@@ -898,7 +901,7 @@ export default defineComponent({
 				: this.rawInputData.length;
 		},
 		dataSizeInMB(): string {
-			return (this.dataSize / 1024 / 1000).toLocaleString();
+			return (this.dataSize / (1024 * 1024)).toFixed(1);
 		},
 		maxOutputIndex(): number {
 			if (this.node === null || this.runIndex === undefined) {
@@ -1385,6 +1388,7 @@ export default defineComponent({
 		},
 		showTooMuchData() {
 			this.showData = true;
+			this.userEnabledShowData = true;
 			this.$telemetry.track('User clicked ndv button', {
 				node_type: this.activeNode?.type,
 				workflow_id: this.workflowsStore.workflowId,
@@ -1439,6 +1443,8 @@ export default defineComponent({
 			const previous = this.displayMode;
 			this.ndvStore.setPanelDisplayMode({ pane: this.paneType, mode: displayMode });
 
+			if (!this.userEnabledShowData) this.updateShowData();
+
 			const dataContainerRef = this.$refs.dataContainer as Element | undefined;
 			if (dataContainerRef) {
 				const dataDisplay = dataContainerRef.children[0];
@@ -1636,11 +1642,15 @@ export default defineComponent({
 			// Hide by default the data from being displayed
 			this.showData = false;
 			const jsonItems = this.inputDataPage.map((item) => item.json);
-			this.dataSize = JSON.stringify(jsonItems).length;
+			const byteSize = new Blob([JSON.stringify(jsonItems)]).size;
-			if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
+			this.dataSize = byteSize;
-				// Data is reasonable small (< 200kb) so display it directly
+			this.updateShowData();
-				this.showData = true;
+		},
-			}
+		updateShowData() {
+			// Display data if it is reasonably small (< 1MB)
+			this.showData =
+				(this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) ||
+				this.dataSize < this.MAX_DISPLAY_DATA_SIZE;
 		},
 		onRunIndexChange(run: number) {
 			this.$emit('runChange', run);

packages/editor-ui/src/constants.ts

@@ -11,8 +11,9 @@ export const MAX_WORKFLOW_SIZE = 1024 * 1024 * 16; // Workflow size limit in byt
 export const MAX_EXPECTED_REQUEST_SIZE = 2048; // Expected maximum workflow request metadata (i.e. headers) size in bytes
 export const MAX_PINNED_DATA_SIZE = import.meta.env.VUE_APP_MAX_PINNED_DATA_SIZE
 	? parseInt(import.meta.env.VUE_APP_MAX_PINNED_DATA_SIZE, 10)
-	: 1024 * 1024 * 12; // Workflow pinned data size limit in bytes
+	: 1024 * 1024 * 12; // 12 MB; Workflow pinned data size limit in bytes
-export const MAX_DISPLAY_DATA_SIZE = 1024 * 200;
+export const MAX_DISPLAY_DATA_SIZE = 1024 * 1024; // 1 MB
+export const MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW = 1024 * 1024 * 4; // 4 MB
 export const MAX_DISPLAY_ITEMS_AUTO_ALL = 250;
 
 export const PLACEHOLDER_FILLED_AT_EXECUTION_TIME = '[filled at execution time]';

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

@@ -890,7 +890,7 @@
 	"ndv.input.mapping": "Mapping",
 	"ndv.input.debugging": "Debugging",
 	"ndv.input.parentNodes": "Parent nodes",
-	"ndv.input.tooMuchData.title": "Input data is huge",
+	"ndv.input.tooMuchData.title": "Display data?",
 	"ndv.input.noOutputDataInBranch": "No input data in this branch",
 	"ndv.input.noOutputDataInNode": "Node did not output any data. n8n stops executing the workflow when a node has no output data.",
 	"ndv.input.noOutputData": "No data",
@@ -925,9 +925,9 @@
 	"ndv.output.insertTestData": "set mock data",
 	"ndv.output.staleDataWarning.regular": "Node parameters have changed.<br>Test node again to refresh output.",
 	"ndv.output.staleDataWarning.pinData": "Node parameter changes will not affect pinned output data.",
-	"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may cause problems. <br /> If you do decide to display it, avoid the JSON view.",
+	"ndv.output.tooMuchData.message": "The node contains {size} MB of data. Displaying it may slow down your browser temporarily.",
-	"ndv.output.tooMuchData.showDataAnyway": "Show data anyway",
+	"ndv.output.tooMuchData.showDataAnyway": "Show data",
-	"ndv.output.tooMuchData.title": "Output data is large",
+	"ndv.output.tooMuchData.title": "Display data?",
 	"ndv.output.waitingToRun": "Waiting to execute...",
 	"ndv.title.cancel": "Cancel",
 	"ndv.title.rename": "Rename",