diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 6cd8cc5658..171d74cabb 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1324,8 +1324,6 @@ export default mixins(
 
 					CanvasHelpers.showOrHideMidpointArrow(info.connection);
 
-					info.connection.removeOverlay(CanvasHelpers.OVERLAY_DROP_NODE_ID);
-
 					if (this.isReadOnly === false) {
 						let exitTimer: NodeJS.Timeout | undefined;
 						let enterTimer: NodeJS.Timeout | undefined;
@@ -1376,41 +1374,24 @@ export default mixins(
 							}, 500);
 						});
 
-						// @ts-ignore
-						info.connection.addOverlay([
-							'Label',
-							{
-								id: CanvasHelpers.OVERLAY_CONNECTION_ACTIONS_ID,
-								label: `<div class="add">${CanvasHelpers.getIcon('plus')}</div> <div class="delete">${CanvasHelpers.getIcon('trash')}</div>`,
-								cssClass: CanvasHelpers.OVERLAY_CONNECTION_ACTIONS_ID,
-								visible: false,
-								events: {
-									mousedown: (overlay: Overlay, event: MouseEvent) => {
-										const element = event.target as HTMLElement;
-										if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) {
-											activeConnection = null;
-											this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
-										}
-										else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) {
-											setTimeout(() => {
-												insertNodeAfterSelected({
-													sourceId: info.sourceId,
-													index: sourceInfo.index,
-													connection: info.connection,
-													eventSource: 'node_connection_action',
-												});
-											}, 150);
-										}
-									},
-								},
+						CanvasHelpers.addConnectionActionsOverlay(info.connection,
+							() => {
+								activeConnection = null;
+								this.instance.deleteConnection(info.connection); // store mutation applied by connectionDetached event
 							},
-						]);
+							() => {
+								setTimeout(() => {
+									insertNodeAfterSelected({
+										sourceId: info.sourceId,
+										index: sourceInfo.index,
+										connection: info.connection,
+										eventSource: 'node_connection_action',
+									});
+								}, 150);
+							});
 					}
 
-					const inputNameOverlay = info.targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL);
-					if (inputNameOverlay) {
-						inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED);
-					}
+					CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint);
 
 					this.$store.commit('addConnection', {
 						connection: [
@@ -1429,29 +1410,12 @@ export default mixins(
 					});
 				});
 
-				const updateConnectionDetach = (sourceEndpoint: Endpoint, targetEndpoint: Endpoint, maxConnections: number) => {
-					// If the source endpoint is not connected to anything else anymore
-					// display the output-name overlays on the endpoint if any exist
-					if (sourceEndpoint !== undefined && sourceEndpoint.connections!.length === maxConnections) {
-						const outputNameOverlay = sourceEndpoint.getOverlay(CanvasHelpers.OVERLAY_OUTPUT_NAME_LABEL);
-						if (![null, undefined].includes(outputNameOverlay)) {
-							outputNameOverlay.setVisible(true);
-						}
-					}
-					if (targetEndpoint !== undefined && targetEndpoint.connections!.length === maxConnections) {
-						const inputNameOverlay = targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL);
-						if (![null, undefined].includes(inputNameOverlay)) {
-							inputNameOverlay.setVisible(true);
-						}
-					}
-				};
-
 				this.instance.bind('connectionMoved', (info) => {
 					// When a connection gets moved from one node to another it for some reason
 					// calls the "connection" event but not the "connectionDetached" one. So we listen
 					// additionally to the "connectionMoved" event and then only delete the existing connection.
 
-					updateConnectionDetach(info.originalSourceEndpoint, info.originalTargetEndpoint, 0);
+					CanvasHelpers.resetInputLabelPosition(info.originalTargetEndpoint);
 
 					// @ts-ignore
 					const sourceInfo = info.originalSourceEndpoint.getParameters();
@@ -1479,12 +1443,7 @@ export default mixins(
 				});
 
 				this.instance.bind('connectionDetached', (info) => {
-					const inputNameOverlay = info.targetEndpoint.getOverlay(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL);
-					if (inputNameOverlay) {
-						inputNameOverlay.setLocation(CanvasHelpers.OVERLAY_INPUT_NAME_LABEL_POSITION);
-					}
-
-					updateConnectionDetach(info.sourceEndpoint, info.targetEndpoint, 1);
+					CanvasHelpers.resetInputLabelPosition(info.targetEndpoint);
 					info.connection.removeOverlays();
 					this.__removeConnectionByConnectionInfo(info, false);
 				});
diff --git a/packages/editor-ui/src/views/canvasHelpers.ts b/packages/editor-ui/src/views/canvasHelpers.ts
index a89379baa3..b5a9b0df59 100644
--- a/packages/editor-ui/src/views/canvasHelpers.ts
+++ b/packages/editor-ui/src/views/canvasHelpers.ts
@@ -1,7 +1,7 @@
 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 { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
 import {
 	IConnection,
 	ITaskData,
@@ -203,17 +203,17 @@ export const scaleReset = (config: IZoomConfig): IZoomConfig => {
 	return config;
 };
 
-export const showOverlay = (connection: Connection, overlayId: string) => {
-	const arrow = connection.getOverlay(overlayId);
-	if (arrow) {
-		arrow.setVisible(true);
+export const showOverlay = (item: Connection | Endpoint, overlayId: string) => {
+	const overlay = item.getOverlay(overlayId);
+	if (overlay) {
+		overlay.setVisible(true);
 	}
 };
 
-export const hideOverlay = (connection: Connection, overlayId: string) => {
-	const arrow = connection.getOverlay(overlayId);
-	if (arrow) {
-		arrow.setVisible(false);
+export const hideOverlay = (item: Connection | Endpoint, overlayId: string) => {
+	const overlay = item.getOverlay(overlayId);
+	if (overlay) {
+		overlay.setVisible(false);
 	}
 };
 
@@ -534,3 +534,41 @@ export const showPullConnectionState = (connection: Connection) => {
 	addOverlays(connection, CONNECTOR_ARROW_OVERLAYS);
 	showOverlay(connection, OVERLAY_DROP_NODE_ID);
 };
+
+export const resetInputLabelPosition = (targetEndpoint: Endpoint) => {
+	const inputNameOverlay = targetEndpoint.getOverlay(OVERLAY_INPUT_NAME_LABEL);
+	if (inputNameOverlay) {
+		inputNameOverlay.setLocation(OVERLAY_INPUT_NAME_LABEL_POSITION);
+	}
+};
+
+export const moveBackInputLabelPosition = (targetEndpoint: Endpoint) => {
+	const inputNameOverlay = targetEndpoint.getOverlay(OVERLAY_INPUT_NAME_LABEL);
+	if (inputNameOverlay) {
+		inputNameOverlay.setLocation(OVERLAY_INPUT_NAME_LABEL_POSITION_MOVED);
+	}
+};
+
+export const addConnectionActionsOverlay = (connection: Connection, onDelete: Function, onAdd: Function) => {
+	connection.addOverlay([
+		'Label',
+		{
+			id: OVERLAY_CONNECTION_ACTIONS_ID,
+			label: `<div class="add">${getIcon('plus')}</div> <div class="delete">${getIcon('trash')}</div>`,
+			cssClass: OVERLAY_CONNECTION_ACTIONS_ID,
+			visible: false,
+			events: {
+				mousedown: (overlay: Overlay, event: MouseEvent) => {
+					const element = event.target as HTMLElement;
+					if (element.classList.contains('delete') || (element.parentElement && element.parentElement.classList.contains('delete'))) {
+						onDelete();
+					}
+					else if (element.classList.contains('add') || (element.parentElement && element.parentElement.classList.contains('add'))) {
+						onAdd();
+					}
+				},
+			},
+		},
+	]);
+};
+