feat: handle multiple root / orphan nodes

Author: ruchamahabal

erpnext/hr/page/organizational_chart/organizational_chart.py

@@ -17,7 +17,7 @@ def get_children(parent=None, company=None, exclude_node=None, is_root=False, is
 	if exclude_node:
 		filters.append(['name', '!=', exclude_node])
 
-	if parent and company and parent!=company:
+	if parent and company and parent != company:
 		filters.append(['reports_to', '=', parent])
 	else:
 		filters.append(['reports_to', '=', ''])
@@ -32,6 +32,7 @@ def get_children(parent=None, company=None, exclude_node=None, is_root=False, is
 		employee.connections = get_connections(employee.id)
 		employee.expandable = 1 if is_expandable else 0
 
+	employees.sort(key=lambda x: x['connections'], reverse=True)
 	return employees
 
 

erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js

@@ -84,11 +84,13 @@ erpnext.HierarchyChart = class {
 					// setup hierarchy
 					me.$hierarchy = $(
 						`<ul class="hierarchy">
-							<li class="root-level level"></li>
+							<li class="root-level level">
+								<ul class="node-children"></ul>
+							</li>
 						</ul>`);
 
 					me.page.main.append(me.$hierarchy);
-					me.render_root_node();
+					me.render_root_nodes();
 				}
 			}
 		});
@@ -122,7 +124,7 @@ erpnext.HierarchyChart = class {
 			</svg>`);
 	}
 
-	render_root_node() {
+	render_root_nodes() {
 		let me = this;
 
 		frappe.call({
@@ -132,21 +134,28 @@ erpnext.HierarchyChart = class {
 			},
 			callback: function(r) {
 				if (r.message.length) {
-					let data = r.message[0];
-
-					let root_node = new me.Node({
-						id: data.id,
-						parent: me.$hierarchy.find('.root-level'),
-						parent_id: undefined,
-						image: data.image,
-						name: data.name,
-						title: data.title,
-						expandable: true,
-						connections: data.connections,
-						is_root: true,
+					let nodes = r.message;
+					let node = undefined;
+					let first_root = undefined;
+
+					$.each(nodes, (i, data) => {
+						node = new me.Node({
+							id: data.id,
+							parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
+							parent_id: undefined,
+							image: data.image,
+							name: data.name,
+							title: data.title,
+							expandable: true,
+							connections: data.connections,
+							is_root: true
+						});
+
+						if (i == 0)
+							first_root = node;
 					});
 
-					me.expand_node(root_node);
+					me.expand_node(first_root);
 				}
 			}
 		});
@@ -344,12 +353,7 @@ erpnext.HierarchyChart = class {
 
 	collapse_previous_level_nodes(node) {
 		let node_parent = $(`#${node.parent_id}`);
-
 		let previous_level_nodes = node_parent.parent().parent().children('li');
-		if (node_parent.parent().hasClass('root-level')) {
-			previous_level_nodes = node_parent.parent().children('li');
-		}
-
 		let node_card = undefined;
 
 		previous_level_nodes.each(function() {
@@ -409,10 +413,6 @@ erpnext.HierarchyChart = class {
 	remove_levels_after_node(node) {
 		let level = $(`#${node.id}`).parent().parent().parent();
 
-		if ($(`#${node.id}`).parent().hasClass('root-level')) {
-			level = $(`#${node.id}`).parent();
-		}
-
 		level = $('.hierarchy > li:eq('+ level.index() + ')');
 		level.nextAll('li').remove();
 

erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js

@@ -97,7 +97,7 @@ erpnext.HierarchyChartMobile = class {
 						</ul>`);
 
 					me.page.main.append(me.$hierarchy);
-					me.render_root_node();
+					me.render_root_nodes();
 				}
 			}
 		});
@@ -131,7 +131,7 @@ erpnext.HierarchyChartMobile = class {
 			</svg>`);
 	}
 
-	render_root_node() {
+	render_root_nodes() {
 		let me = this;
 
 		frappe.call({
@@ -141,21 +141,21 @@ erpnext.HierarchyChartMobile = class {
 			},
 			callback: function(r) {
 				if (r.message.length) {
-					let data = r.message[0];
-
-					let root_node = new me.Node({
-						id: data.id,
-						parent: me.$hierarchy.find('.root-level'),
-						parent_id: undefined,
-						image: data.image,
-						name: data.name,
-						title: data.title,
-						expandable: true,
-						connections: data.connections,
-						is_root: true,
+					let nodes = r.message;
+
+					$.each(nodes, (_i, data) => {
+						return new me.Node({
+							id: data.id,
+							parent: me.$hierarchy.find('.root-level'),
+							parent_id: undefined,
+							image: data.image,
+							name: data.name,
+							title: data.title,
+							expandable: true,
+							connections: data.connections,
+							is_root: true
+						});
 					});
-
-					me.expand_node(root_node);
 				}
 			}
 		});
@@ -375,7 +375,10 @@ erpnext.HierarchyChartMobile = class {
 		let node_element = $(`#${node.id}`);
 
 		node_element.click(function() {
-			if (node_element.is(':visible') && node_element.hasClass('active-path')) {
+			if (node.is_root) {
+				me.$hierarchy.empty();
+				me.add_node_to_hierarchy(node, true);
+			} else if (node_element.is(':visible') && node_element.hasClass('active-path')) {
 				me.remove_levels_after_node(node);
 				me.remove_orphaned_connectors();
 			} else {

erpnext/public/scss/hierarchy_chart.scss

@@ -246,6 +246,10 @@
 	margin-top: 16px;
 }
 
+.root-level .node-card {
+	margin: 0 0 16px;
+}
+
 // node group
 
 .collapsed-level {