From 85e1a1002145cceccd59ed1d8a2f970ccb4133ff Mon Sep 17 00:00:00 2001 From: Csaba Tuncsik Date: Fri, 3 Nov 2023 12:07:04 +0100 Subject: [PATCH] refactor(editor): Simplify data count in NDV (no-changelog) (#7568) --- .../editor-ui/src/components/InputPanel.vue | 1 + .../editor-ui/src/components/OutputPanel.vue | 1 + packages/editor-ui/src/components/RunData.vue | 158 +++++++----------- 3 files changed, 61 insertions(+), 99 deletions(-) diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue index 8ba5d93e1a..b718c3fc5f 100644 --- a/packages/editor-ui/src/components/InputPanel.vue +++ b/packages/editor-ui/src/components/InputPanel.vue @@ -190,6 +190,7 @@ export default defineComponent({ }, runIndex: { type: Number, + required: true, }, linkedRuns: { type: Boolean, diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue index f6d9966dd6..627653cc07 100644 --- a/packages/editor-ui/src/components/OutputPanel.vue +++ b/packages/editor-ui/src/components/OutputPanel.vue @@ -144,6 +144,7 @@ export default defineComponent({ props: { runIndex: { type: Number, + required: true, }, isReadOnly: { type: Boolean, diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index bcdeb8132b..e659474b20 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -104,7 +104,7 @@ icon="thumbtack" :disabled=" editMode.enabled || - (inputData.length === 0 && !hasPinData) || + (rawInputData.length === 0 && !hasPinData) || isReadOnlyRoute || readOnlyEnv " @@ -319,7 +319,7 @@ - + @@ -457,7 +457,8 @@ !hasRunError && binaryData.length === 0 && dataCount > pageSize && - !isSchemaView + !isSchemaView && + !isArtificialRecoveredEventItem " v-show="!editMode.enabled" > @@ -575,6 +576,7 @@ export default defineComponent({ }, runIndex: { type: Number, + required: true, }, linkedRuns: { type: Boolean, @@ -748,7 +750,7 @@ export default defineComponent({ ); }, isArtificialRecoveredEventItem(): boolean { - return this.inputData?.[0]?.json?.isArtificialRecoveredEventItem !== undefined ?? false; + return !!this.rawInputData?.[0]?.json?.isArtificialRecoveredEventItem; }, subworkflowExecutionError(): Error | null { return this.workflowsStore.subWorkflowExecutionError; @@ -823,48 +825,14 @@ export default defineComponent({ return 0; }, rawInputData(): INodeExecutionData[] { - let inputData: INodeExecutionData[] = []; - - if (this.node) { - inputData = this.getNodeInputData( - this.node, - this.runIndex, - this.currentOutputIndex, - this.paneType, - this.connectionType, - ); - } - - if (inputData.length === 0 || !Array.isArray(inputData)) { - return []; - } - - return inputData; + return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType); }, inputData(): INodeExecutionData[] { - let inputData = this.rawInputData; - - if (this.node && this.pinData && !this.isProductionExecutionPreview) { - inputData = Array.isArray(this.pinData) - ? this.pinData.map((value) => ({ - json: value, - })) - : [ - { - json: this.pinData, - }, - ]; - } - - // We don't want to paginate the schema view - if (this.isSchemaView) { - return inputData; - } - + return this.getPinDataOrLiveData(this.rawInputData); + }, + inputDataPage(): INodeExecutionData[] { const offset = this.pageSize * (this.currentPage - 1); - inputData = inputData.slice(offset, offset + this.pageSize); - - return inputData; + return this.inputData.slice(offset, offset + this.pageSize); }, jsonData(): IDataObject[] { return executionDataToJson(this.inputData); @@ -1199,47 +1167,58 @@ export default defineComponent({ const itemsLabel = itemsCount > 0 ? ` (${itemsCount} ${items})` : ''; return option + this.$locale.baseText('ndv.output.of') + (this.maxRunIndex + 1) + itemsLabel; }, + getRawInputData( + runIndex: number, + outputIndex: number, + connectionType: ConnectionTypes = NodeConnectionType.Main, + ): INodeExecutionData[] { + let inputData: INodeExecutionData[] = []; + + if (this.node) { + inputData = this.getNodeInputData( + this.node, + runIndex, + outputIndex, + this.paneType, + connectionType, + ); + } + + if (inputData.length === 0 || !Array.isArray(inputData)) { + return []; + } + + return inputData; + }, + getPinDataOrLiveData(inputData: INodeExecutionData[]): INodeExecutionData[] { + if (this.pinData && !this.isProductionExecutionPreview) { + return Array.isArray(this.pinData) + ? this.pinData.map((value) => ({ + json: value, + })) + : [ + { + json: this.pinData, + }, + ]; + } + return inputData; + }, getDataCount( runIndex: number, outputIndex: number, connectionType: ConnectionTypes = NodeConnectionType.Main, ) { - if (this.pinData) { - return this.pinData.length; - } - - if (this.node === null) { + if (!this.node) { return 0; } - const runData: IRunData | null = this.workflowRunData; - - if (runData === null || !runData.hasOwnProperty(this.node.name)) { - return 0; - } - - if (runData[this.node.name].length <= runIndex) { - return 0; - } - - if (runData[this.node.name][runIndex].hasOwnProperty('error')) { + if (this.workflowRunData?.[this.node.name][runIndex].hasOwnProperty('error')) { return 1; } - if ( - !runData[this.node.name][runIndex].hasOwnProperty('data') || - runData[this.node.name][runIndex].data === undefined - ) { - return 0; - } - - const inputData = this.getInputData( - runData[this.node.name][runIndex].data!, - outputIndex, - connectionType, - ); - - return inputData.length; + const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType); + return this.getPinDataOrLiveData(rawInputData).length; }, init() { // Reset the selected output index every time another node gets selected @@ -1296,16 +1275,10 @@ export default defineComponent({ } }, async downloadJsonData() { - const inputData = this.getNodeInputData( - this.node, - this.runIndex, - this.currentOutputIndex, - this.paneType, - this.connectionType, - ); - const fileName = this.node!.name.replace(/[^\w\d]/g, '_'); - const blob = new Blob([JSON.stringify(inputData, null, 2)], { type: 'application/json' }); + const blob = new Blob([JSON.stringify(this.rawInputData, null, 2)], { + type: 'application/json', + }); saveAs(blob, `${fileName}.json`); }, @@ -1341,21 +1314,8 @@ export default defineComponent({ refreshDataSize() { // Hide by default the data from being displayed this.showData = false; - - // Check how much data there is to display - const inputData = this.getNodeInputData( - this.node, - this.runIndex, - this.currentOutputIndex, - this.paneType, - this.connectionType, - ); - - const offset = this.pageSize * (this.currentPage - 1); - const jsonItems = inputData.slice(offset, offset + this.pageSize).map((item) => item.json); - + 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; @@ -1398,7 +1358,7 @@ export default defineComponent({ hasNodeRun() { if (this.paneType === 'output') this.setDisplayMode(); }, - inputData: { + inputDataPage: { handler(data: INodeExecutionData[]) { if (this.paneType && data) { this.ndvStore.setNDVPanelDataIsEmpty({