From 4918ac81dee2ad950ea0088c99b687a5e7e447b4 Mon Sep 17 00:00:00 2001 From: Elias Meire Date: Tue, 11 Jun 2024 12:08:55 +0200 Subject: [PATCH] fix(editor): Improve large data warning in input/output panel (#9671) --- packages/editor-ui/src/components/RunData.vue | 22 ++++++++++++++----- packages/editor-ui/src/constants.ts | 5 +++-- .../src/plugins/i18n/locales/en.json | 8 +++---- 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 2b02fdeab91c8..af9c6cd5f8357 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/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; - if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) { - // Data is reasonable small (< 200kb) so display it directly - this.showData = true; - } + const byteSize = new Blob([JSON.stringify(jsonItems)]).size; + this.dataSize = byteSize; + this.updateShowData(); + }, + updateShowData() { + // Display data if it is reasonably small (< 1MB) + this.showData = + (this.isSchemaView && this.dataSize < this.MAX_DISPLAY_DATA_SIZE_SCHEMA_VIEW) || + this.dataSize < this.MAX_DISPLAY_DATA_SIZE; }, onRunIndexChange(run: number) { this.$emit('runChange', run); diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts index c0a7c439064d0..75ca8d1da1cff 100644 --- a/packages/editor-ui/src/constants.ts +++ b/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 -export const MAX_DISPLAY_DATA_SIZE = 1024 * 200; + : 1024 * 1024 * 12; // 12 MB; Workflow pinned data size limit in bytes +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]'; diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json index 30e234d55c416..62ff3992173be 100644 --- a/packages/editor-ui/src/plugins/i18n/locales/en.json +++ b/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.
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.
If you do decide to display it, avoid the JSON view.", - "ndv.output.tooMuchData.showDataAnyway": "Show data anyway", - "ndv.output.tooMuchData.title": "Output data is large", + "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", + "ndv.output.tooMuchData.title": "Display data?", "ndv.output.waitingToRun": "Waiting to execute...", "ndv.title.cancel": "Cancel", "ndv.title.rename": "Rename",