mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

⚡ Improve data display for large amount of data

Browse source
This commit is contained in:
Jan Oberhauser 2020-05-24 00:53:06 +02:00
parent c6281f2b0e
commit 2cdfb69e0c
2 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/editor-ui/src/components/RunData.vue
View file

@ -19,7 +19,16 @@
<div class="header">
<div class="title-text">
<strong>Results: {{ dataCount }}</strong>&nbsp;
<strong v-if="dataCount < this.MAX_DISPLAY_ITEMS_AUTO_ALL && dataSize < MAX_DISPLAY_DATA_SIZE">
Results: {{ dataCount }}
</strong>
<strong v-else>Results:
<el-select v-model="maxDisplayItems" @click.stop>
<el-option v-for="option in maxDisplayItemsOptions" :label="option" :value="option" :key="option" />
</el-select>&nbsp;/
{{ dataCount }}
</strong>
&nbsp;
<el-popover
v-if="runMetadata"
placement="right"
@ -184,6 +193,11 @@ import {
ITableData,
} from '@/Interface';
import {
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
} from '@/constants';
import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
import { genericHelpers } from '@/components/mixins/genericHelpers';
@ -211,8 +225,12 @@ export default mixins(
runIndex: 0,
showData: false,
outputIndex: 0,
maxDisplayItems: 25 as number | null,
binaryDataDisplayVisible: false,
binaryDataDisplayData: null as IBinaryDisplayData | null,
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
};
},
computed: {
@ -229,6 +247,9 @@ export default mixins(
const executionData: IRunExecutionData = this.workflowExecution.data;
return executionData.resultData.runData;
},
maxDisplayItemsOptions (): number[] {
return [25, 50, 100, 250, 500, 1000, this.dataCount].filter(option => option <= this.dataCount);
},
node (): INodeUi | null {
return this.$store.getters.activeNode;
},
@ -323,19 +344,27 @@ export default mixins(
return 0;
},
jsonData (): IDataObject[] {
const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
if (inputData.length === 0 || !Array.isArray(inputData)) {
return [];
}
if (this.maxDisplayItems !== null) {
inputData = inputData.slice(0, this.maxDisplayItems);
}
return this.convertToJson(inputData);
},
tableData (): ITableData | undefined {
const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
let inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
if (inputData.length === 0) {
return undefined;
}
if (this.maxDisplayItems !== null) {
inputData = inputData.slice(0,this.maxDisplayItems);
}
return this.convertToTable(inputData);
},
binaryData (): IBinaryKeyData[] {
@ -451,11 +480,11 @@ export default mixins(
// Check how much data there is to display
const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex);
const jsonItems = inputData.map(item => item.json);
const jsonItems = inputData.slice(0, this.maxDisplayItems || inputData.length).map(item => item.json);
this.dataSize = JSON.stringify(jsonItems).length;
if (this.dataSize < 204800) {
if (this.dataSize < this.MAX_DISPLAY_DATA_SIZE) {
// Data is reasonable small (< 200kb) so display it directly
this.showData = true;
}
@ -469,6 +498,7 @@ export default mixins(
node (newNode, oldNode) {
// Reset the selected output index every time another node gets selected
this.outputIndex = 0;
this.maxDisplayItems = 25;
this.refreshDataSize();
},
jsonData () {

2
packages/editor-ui/src/constants.ts
View file

@ -1,2 +1,4 @@
export const MAX_DISPLAY_DATA_SIZE = 204800;
export const MAX_DISPLAY_ITEMS_AUTO_ALL = 250;
export const NODE_NAME_PREFIX = 'node-';
export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';