diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index e2e9696235..733ec79937 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -109,8 +109,6 @@ import Vue from 'vue';
 import {
 	Connection,
 	Overlay,
-	OverlaySpec,
-	PaintStyle,
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, Endpoint, OnConnectionBindInfo } from 'jsplumb';
@@ -153,7 +151,6 @@ import {
 	IRun,
 	ITaskData,
 	INodeCredentialsDetails,
-	INodeExecutionData,
 } from 'n8n-workflow';
 import {
 	ICredentialsResponse,
@@ -1813,17 +1810,6 @@ export default mixins(
 				const sourceIndex = this.$store.getters.getNodeIndex(sourceNodeName);
 				const sourceId = `${NODE_NAME_PREFIX}${sourceIndex}`;
 
-				const resetConnection = (connection: Connection) => {
-					connection.removeOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID);
-					connection.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_DEFAULT);
-					CanvasHelpers.showOrHideMidpointArrow(connection);
-					// @ts-ignore
-					if (connection.canvas) {
-						// @ts-ignore
-						(connection.canvas as Element).classList.remove('success');
-					}
-				};
-
 				if (data === null || data.length === 0) {
 					// @ts-ignore
 					const outgoing = this.instance.getConnections({
@@ -1831,7 +1817,7 @@ export default mixins(
 					}) as Connection[];
 
 					outgoing.forEach((connection: Connection) => {
-						resetConnection(connection);
+						CanvasHelpers.resetConnection(connection);
 					});
 
 					return;
@@ -1842,87 +1828,24 @@ export default mixins(
 					return;
 				}
 
-				const outputMap: {[sourceOutputIndex: string]: {[targetNodeName: string]: {[targetInputIndex: string]: {total: number, iterations: number}}}} = {};
-
-				data.forEach((run: ITaskData) => {
-					if (!run.data || !run.data.main) {
-						return;
-					}
-
-					run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
-						if (!nodeConnections[i]) {
-							return;
-						}
-
-						nodeConnections[i]
-							.map((conn: IConnection) => {
-								const sourceOutputIndex = i;
-								const targetNodeName = conn.node;
-								const targetInputIndex = conn.index;
-
-								if (!outputMap[sourceOutputIndex]) {
-									outputMap[sourceOutputIndex] = {};
-								}
-
-								if (!outputMap[sourceOutputIndex][targetNodeName]) {
-									outputMap[sourceOutputIndex][targetNodeName] = {};
-								}
-
-								if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
-									outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
-										total: 0,
-										iterations: 0,
-									};
-								}
-
-								outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output ? output.length : 0;
-								outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
-							});
-					});
-				});
+				const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections);
 
 				Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
 					Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
 						Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach((targetInputIndex: string) => {
-							const conn = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
+							const connection = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
 
-							if (!conn) {
+							if (!connection) {
 								return;
 							}
 
 							const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
 							if (!output || !output.total) {
-								resetConnection(conn);
+								CanvasHelpers.resetConnection(connection);
 								return;
 							}
 
-							conn.setPaintStyle(CanvasHelpers.CONNECTOR_PAINT_STYLE_SUCCESS);
-							// @ts-ignore
-							if (conn.canvas) {
-								// @ts-ignore
-								(conn.canvas as Element).classList.add('success');
-							}
-
-							if (conn.getOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID)) {
-								conn.removeOverlay(CanvasHelpers.OVERLAY_RUN_ITEMS_ID);
-							}
-
-							let label = `${output.total}`;
-							label = output.total > 1 ? `${label} items` : `${label} item`;
-							label = output.iterations > 1 ? `${label} total` : label;
-
-							conn.addOverlay([
-								'Label',
-								{
-									id: CanvasHelpers.OVERLAY_RUN_ITEMS_ID,
-									label,
-									cssClass: 'connection-output-items-label',
-									location: .5,
-								},
-							]);
-
-							CanvasHelpers.showOrHideItemsLabel(conn);
-							CanvasHelpers.showOrHideMidpointArrow(conn);
+							CanvasHelpers.addConnectionOutputSuccess(connection, output);
 						});
 					});
 				});
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index 6ff0dc69d4..b03a482789 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -2,6 +2,12 @@ import { getStyleTokenValue } from "@/components/helpers";
 import { START_NODE_TYPE } from "@/constants";
 import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface";
 import { Connection, OverlaySpec, PaintStyle } from "jsplumb";
+import {
+	IConnection,
+	ITaskData,
+	INodeExecutionData,
+	NodeInputConnections,
+} from 'n8n-workflow';
 
 export const OVERLAY_DROP_NODE_ID = 'drop-add-node';
 export const OVERLAY_MIDPOINT_ARROW_ID = 'midpoint-arrow';
@@ -362,3 +368,87 @@ export const showConectionActions = (connection: Connection | null) => {
 	}
 };
 
+export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputConnections) => {
+	const outputMap: {[sourceOutputIndex: string]: {[targetNodeName: string]: {[targetInputIndex: string]: {total: number, iterations: number}}}} = {};
+
+	data.forEach((run: ITaskData) => {
+		if (!run.data || !run.data.main) {
+			return;
+		}
+
+		run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
+			if (!nodeConnections[i]) {
+				return;
+			}
+
+			nodeConnections[i]
+				.map((connection: IConnection) => {
+					const sourceOutputIndex = i;
+					const targetNodeName = connection.node;
+					const targetInputIndex = connection.index;
+
+					if (!outputMap[sourceOutputIndex]) {
+						outputMap[sourceOutputIndex] = {};
+					}
+
+					if (!outputMap[sourceOutputIndex][targetNodeName]) {
+						outputMap[sourceOutputIndex][targetNodeName] = {};
+					}
+
+					if (!outputMap[sourceOutputIndex][targetNodeName][targetInputIndex]) {
+						outputMap[sourceOutputIndex][targetNodeName][targetInputIndex] = {
+							total: 0,
+							iterations: 0,
+						};
+					}
+
+					outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].total += output ? output.length : 0;
+					outputMap[sourceOutputIndex][targetNodeName][targetInputIndex].iterations += output ? 1 : 0;
+				});
+		});
+	});
+
+	return outputMap;
+};
+
+export const resetConnection = (connection: Connection) => {
+	connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
+	connection.setPaintStyle(CONNECTOR_PAINT_STYLE_DEFAULT);
+	showOrHideMidpointArrow(connection);
+	// @ts-ignore
+	if (connection.canvas) {
+		// @ts-ignore
+		(connection.canvas as Element).classList.remove('success');
+	}
+};
+
+export const addConnectionOutputSuccess = (connection: Connection, output: {total: number, iterations: number}) => {
+	connection.setPaintStyle(CONNECTOR_PAINT_STYLE_SUCCESS);
+	// @ts-ignore
+	if (connection.canvas) {
+		// @ts-ignore
+		(connection.canvas as Element).classList.add('success');
+	}
+
+	if (connection.getOverlay(OVERLAY_RUN_ITEMS_ID)) {
+		connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
+	}
+
+	let label = `${output.total}`;
+	label = output.total > 1 ? `${label} items` : `${label} item`;
+	label = output.iterations > 1 ? `${label} total` : label;
+
+	connection.addOverlay([
+		'Label',
+		{
+			id: OVERLAY_RUN_ITEMS_ID,
+			label,
+			cssClass: 'connection-output-items-label',
+			location: .5,
+		},
+	]);
+
+	showOrHideItemsLabel(connection);
+	showOrHideMidpointArrow(connection);
+};
+