diff --git a/client/src/components/Workflow/Editor/modules/connector.js b/client/src/components/Workflow/Editor/modules/connector.js
index 1c6387afc0f..38a673d4e90 100644
--- a/client/src/components/Workflow/Editor/modules/connector.js
+++ b/client/src/components/Workflow/Editor/modules/connector.js
@@ -1,4 +1,3 @@
-import $ from "jquery";
 import * as d3 from "d3";
 import { Toast } from "ui/toast";
 
@@ -13,9 +12,17 @@ const ribbonOuterSingle = 6;
 const ribbonInnerMultiple = 1;
 const ribbonOuterMultiple = 3;
 
+function offset(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        top: rect.top + window.scrollY,
+        left: rect.left + window.scrollX,
+    };
+}
+
 class Connector {
-    constructor(manager = {}, outputHandle = null, inputHandle = null) {
-        this.manager = manager;
+    constructor(canvasManager = {}, outputHandle = null, inputHandle = null) {
+        this.manager = canvasManager;
         this.dragging = false;
         this.innerClass = "ribbon-inner";
         this.canvas = document.createElement("div");
@@ -64,26 +71,28 @@ class Connector {
         if (!outputHandle || !inputHandle) {
             return;
         }
-        const canvas_container = $("#canvas-container");
-        const canvasZoom = this.manager.canvasZoom;
         if (this.dragging) {
             this.canvas.style.zIndex = zIndex;
         }
-        const relativeLeft = (e) => ($(e).offset().left - canvas_container.offset().left) / canvasZoom;
-        const relativeTop = (e) => ($(e).offset().top - canvas_container.offset().top) / canvasZoom;
         if (!outputHandle || !inputHandle) {
             return;
         }
-
         // Set handle ids, used in test cases
         this.canvas.setAttribute("output-handle-id", outputHandle.element.getAttribute("id"));
         this.canvas.setAttribute("input-handle-id", inputHandle.element.getAttribute("id"));
 
         // Find the position of each handle
-        let start_x = relativeLeft(outputHandle.element) + handleMarginX;
-        let start_y = relativeTop(outputHandle.element) + 0.5 * $(outputHandle.element).height();
-        let end_x = relativeLeft(inputHandle.element) + handleMarginX;
-        let end_y = relativeTop(inputHandle.element) + 0.5 * $(inputHandle.element).height();
+        const canvasContainer = document.getElementById("canvas-container");
+        const canvasZoom = this.manager.canvasZoom;
+
+        const relativeLeft = (e) => (offset(e).left - offset(canvasContainer).left) / canvasZoom + handleMarginX;
+        const relativeTop = (e) =>
+            (offset(e).top - offset(canvasContainer).top) / canvasZoom + 0.5 * inputHandle.element.offsetHeight;
+
+        let start_x = relativeLeft(outputHandle.element);
+        let start_y = relativeTop(outputHandle.element);
+        let end_x = relativeLeft(inputHandle.element);
+        let end_y = relativeTop(inputHandle.element);
 
         // Calculate canvas area
         const canvas_min_x = Math.min(start_x, end_x);