refactor(editor): Simplify data count in NDV (no-changelog) (#7568)

packages/editor-ui/src/components/InputPanel.vue

@@ -190,6 +190,7 @@ export default defineComponent({
 		},
 		runIndex: {
 			type: Number,
+			required: true,
 		},
 		linkedRuns: {
 			type: Boolean,

packages/editor-ui/src/components/OutputPanel.vue

@@ -144,6 +144,7 @@ export default defineComponent({
 	props: {
 		runIndex: {
 			type: Number,
+			required: true,
 		},
 		isReadOnly: {
 			type: Boolean,

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 @@
 			<Suspense v-else-if="hasNodeRun && displayMode === 'table'">
 				<run-data-table
 					:node="node"
-					:inputData="inputData"
+					:inputData="inputDataPage"
 					:mappingEnabled="mappingEnabled"
 					:distanceFromActive="distanceFromActive"
 					:runIndex="runIndex"
@@ -338,7 +338,7 @@
 					:editMode="editMode"
 					:sessioId="sessionId"
 					:node="node"
-					:inputData="inputData"
+					:inputData="inputDataPage"
 					:mappingEnabled="mappingEnabled"
 					:distanceFromActive="distanceFromActive"
 					:runIndex="runIndex"
@@ -347,7 +347,7 @@
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isPaneTypeOutput && displayMode === 'html'">
-				<run-data-html :inputHtml="inputData[0].json.html" />
+				<run-data-html :inputHtml="inputDataPage[0].json.html" />
 			</Suspense>
 
 			<Suspense v-else-if="hasNodeRun && isSchemaView">
@@ -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[] = [];
+			return this.getRawInputData(this.runIndex, this.currentOutputIndex, this.connectionType);
-
-			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;
 		},
 		inputData(): INodeExecutionData[] {
-			let inputData = this.rawInputData;
+			return this.getPinDataOrLiveData(this.rawInputData);
-
-			if (this.node && this.pinData && !this.isProductionExecutionPreview) {
-				inputData = Array.isArray(this.pinData)
-					? this.pinData.map((value) => ({
-							json: value,
-					  }))
-					: [
-							{
-								json: this.pinData,
 		},
-					  ];
+		inputDataPage(): INodeExecutionData[] {
-			}
-
-			// We don't want to paginate the schema view
-			if (this.isSchemaView) {
-				return inputData;
-			}
-
 			const offset = this.pageSize * (this.currentPage - 1);
-			inputData = inputData.slice(offset, offset + this.pageSize);
+			return this.inputData.slice(offset, offset + this.pageSize);
-
-			return inputData;
 		},
 		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) {
+			if (!this.node) {
-				return this.pinData.length;
-			}
-
-			if (this.node === null) {
 				return 0;
 			}
 
-			const runData: IRunData | null = this.workflowRunData;
+			if (this.workflowRunData?.[this.node.name][runIndex].hasOwnProperty('error')) {
-
-			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')) {
 				return 1;
 			}
 
-			if (
+			const rawInputData = this.getRawInputData(runIndex, outputIndex, connectionType);
-				!runData[this.node.name][runIndex].hasOwnProperty('data') ||
+			return this.getPinDataOrLiveData(rawInputData).length;
-				runData[this.node.name][runIndex].data === undefined
-			) {
-				return 0;
-			}
-
-			const inputData = this.getInputData(
-				runData[this.node.name][runIndex].data!,
-				outputIndex,
-				connectionType,
-			);
-
-			return inputData.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;
-
+			const jsonItems = this.inputDataPage.map((item) => item.json);
-			// 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);
-
 			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({