refactor: use arcs instead of bezier curves for cleaner connectors

erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js

@@ -277,15 +277,53 @@ erpnext.HierarchyChart = class {
 			y: child_node.offsetTop + child_node.offsetHeight / 2
 		};
 
-		let connector =
+		let connector = this.get_connector(pos_parent_right, pos_child_left);
-			"M" +
-			(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
-			"C" +
-			(pos_parent_right.x + 100) + "," + (pos_parent_right.y) + " " +
-			(pos_child_left.x - 100) + "," + (pos_child_left.y) + " " +
-			(pos_child_left.x) + "," + (pos_child_left.y);
 
 		path.setAttribute("d", connector);
+		this.set_path_attributes(path, parent_id, child_id);
+
+		$('#connectors').append(path);
+	}
+
+	get_connector(pos_parent_right, pos_child_left) {
+		if (pos_parent_right.y === pos_child_left.y) {
+			// don't add arcs if it's a straight line
+			return "M" +
+			(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+			"L"+
+			(pos_child_left.x) + "," + (pos_child_left.y);
+		} else {
+			let arc_1 = "";
+			let arc_2 = "";
+			let offset = 0;
+
+			if (pos_parent_right.y > pos_child_left.y) {
+				// if child is above parent on Y axis 1st arc is anticlocwise
+				// second arc is clockwise
+				arc_1 = "a10,10 1 0 0 10,-10 ";
+				arc_2 = "a10,10 0 0 1 10,-10 ";
+				offset = 10;
+			} else {
+				// if child is below parent on Y axis 1st arc is clockwise
+				// second arc is anticlockwise
+				arc_1 = "a10,10 0 0 1 10,10 ";
+				arc_2 = "a10,10 1 0 0 10,10 ";
+				offset = -10;
+			}
+
+			return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
+				"L" +
+				(pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
+				arc_1 +
+				"L" +
+				(pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
+				arc_2 +
+				"L"+
+				(pos_child_left.x) + "," + (pos_child_left.y);
+		}
+	}
+
+	set_path_attributes(path, parent_id, child_id) {
 		path.setAttribute("data-parent", parent_id);
 		path.setAttribute("data-child", child_id);
 
@@ -298,8 +336,6 @@ erpnext.HierarchyChart = class {
 			path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
 			path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
 		}
-
-		$('#connectors').append(path);
 	}
 
 	set_selected_node(node) {

erpnext/public/scss/hierarchy_chart.scss

@@ -48,7 +48,6 @@
 	border-radius: 0.5rem;
 	padding: 0.75rem;
 	width: 18rem;
-	height: 5rem;
 
 	.btn-edit-node {
 		display: flex;
@@ -195,6 +194,7 @@
 
 .level {
 	margin-right: 8px;
+	align-items: flex-start;
 }
 
 #arrows {