mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-09-20 23:07:32 -07:00
Code Issues Actions 2 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="header">
<div class="title-text"> <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 <el-popover
v-if="runMetadata" v-if="runMetadata"
placement="right" placement="right"
@ -184,6 +193,11 @@ import {
ITableData, ITableData,
} from '@/Interface'; } from '@/Interface';
import {
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
} from '@/constants';
import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue'; import BinaryDataDisplay from '@/components/BinaryDataDisplay.vue';
import { genericHelpers } from '@/components/mixins/genericHelpers'; import { genericHelpers } from '@/components/mixins/genericHelpers';
@ -211,8 +225,12 @@ export default mixins(
runIndex: 0, runIndex: 0,
showData: false, showData: false,
outputIndex: 0, outputIndex: 0,
maxDisplayItems: 25 as number | null,
binaryDataDisplayVisible: false, binaryDataDisplayVisible: false,
binaryDataDisplayData: null as IBinaryDisplayData | null, binaryDataDisplayData: null as IBinaryDisplayData | null,
MAX_DISPLAY_DATA_SIZE,
MAX_DISPLAY_ITEMS_AUTO_ALL,
}; };
}, },
computed: { computed: {
@ -229,6 +247,9 @@ export default mixins(
const executionData: IRunExecutionData = this.workflowExecution.data; const executionData: IRunExecutionData = this.workflowExecution.data;
return executionData.resultData.runData; return executionData.resultData.runData;
}, },
maxDisplayItemsOptions (): number[] {
return [25, 50, 100, 250, 500, 1000, this.dataCount].filter(option => option <= this.dataCount);
},
node (): INodeUi | null { node (): INodeUi | null {
return this.$store.getters.activeNode; return this.$store.getters.activeNode;
}, },
@ -323,19 +344,27 @@ export default mixins(
return 0; return 0;
}, },
jsonData (): IDataObject[] { 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)) { if (inputData.length === 0 || !Array.isArray(inputData)) {
return []; return [];
} }
if (this.maxDisplayItems !== null) {
inputData = inputData.slice(0, this.maxDisplayItems);
}
return this.convertToJson(inputData); return this.convertToJson(inputData);
}, },
tableData (): ITableData | undefined { 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) { if (inputData.length === 0) {
return undefined; return undefined;
} }
if (this.maxDisplayItems !== null) {
inputData = inputData.slice(0,this.maxDisplayItems);
}
return this.convertToTable(inputData); return this.convertToTable(inputData);
}, },
binaryData (): IBinaryKeyData[] { binaryData (): IBinaryKeyData[] {
@ -451,11 +480,11 @@ export default mixins(
// Check how much data there is to display // Check how much data there is to display
const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex); 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; 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 // Data is reasonable small (< 200kb) so display it directly
this.showData = true; this.showData = true;
} }
@ -469,6 +498,7 @@ export default mixins(
node (newNode, oldNode) { node (newNode, oldNode) {
// Reset the selected output index every time another node gets selected // Reset the selected output index every time another node gets selected
this.outputIndex = 0; this.outputIndex = 0;
this.maxDisplayItems = 25;
this.refreshDataSize(); this.refreshDataSize();
}, },
jsonData () { 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 NODE_NAME_PREFIX = 'node-';
export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__'; export const PLACEHOLDER_EMPTY_WORKFLOW_ID = '__EMPTY__';