Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Jun 11, 2024
+23 −12
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
264f0b2
Improve copy of large data warning in input/output panel
elsmr Jun 7, 2024
5150f8a
Merge branch 'master' into node-1397-improve-large-data-warning-in-in…
elsmr Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions packages/editor-ui/src/components/RunData.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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];
Expand Down Expand Up @@ -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);
Expand Down
5 changes: 3 additions & 2 deletions packages/editor-ui/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]';
Expand Down
8 changes: 4 additions & 4 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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.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",
Expand Down
Loading