From b74d174419cfb835d17810ae6d881fb629a00c1d Mon Sep 17 00:00:00 2001
From: tdruez <489057+tdruez@users.noreply.github.com>
Date: Thu, 30 May 2024 08:33:50 +0400
Subject: [PATCH] Add visual indicator when an object also have tree in
 hierarchy view #70 (#126)

Signed-off-by: tdruez <tdruez@nexb.com>
---
 CHANGELOG.rst                                 |   4 +
 .../component_catalog/component_details.html  |   2 +-
 .../includes/component_hierarchy.js.html      | 140 ++++++++----------
 .../tabs/tab_subcomponents.html               |   4 +-
 component_catalog/tests/test_views.py         |   6 +-
 component_catalog/views.py                    |  41 +++--
 dje/templates/hierarchy_base.js.html          |  58 ++++++++
 license_library/tests/test_views.py           |   2 +-
 .../includes/owner_hierarchy.js.html          |  15 +-
 .../templates/organization/owner_details.html |   2 +-
 .../includes/product_hierarchy.js.html        |  69 +++------
 .../product_portfolio/product_details.html    |   2 +-
 product_portfolio/tests/test_views.py         |   6 +-
 product_portfolio/views.py                    |   3 +
 14 files changed, 197 insertions(+), 157 deletions(-)
 create mode 100644 dje/templates/hierarchy_base.js.html

diff --git a/CHANGELOG.rst b/CHANGELOG.rst
index 2be142b..173519d 100644
--- a/CHANGELOG.rst
+++ b/CHANGELOG.rst
@@ -3,6 +3,10 @@ Release notes
 
 ### Version 5.1.1-dev
 
+- Add visual indicator in hierarchy views, when an object on the far left or far right
+  also belong or have a hierarchy (relathionship tree).
+  https://github.com/nexB/dejacode/issues/70
+
 ### Version 5.1.0
 
 - Upgrade Python version to 3.12 and Django to 5.0.x
diff --git a/component_catalog/templates/component_catalog/component_details.html b/component_catalog/templates/component_catalog/component_details.html
index 092b918..9464026 100644
--- a/component_catalog/templates/component_catalog/component_details.html
+++ b/component_catalog/templates/component_catalog/component_details.html
@@ -58,7 +58,7 @@
 
 {% block javascripts %}
   {{ block.super }}
-  <script src="{% static "js/jquery.jsPlumb-1.7.2-min.js" %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
+  <script src="{% static 'js/jquery.jsPlumb-1.7.2-min.js' %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
   {% include 'component_catalog/includes/component_hierarchy.js.html' with related_parents=tabsets.Hierarchy.fields.0.1.related_parents related_children=tabsets.Hierarchy.fields.0.1.related_children  productcomponents=tabsets.Hierarchy.fields.0.1.productcomponents %}
   {% if tabsets.Owner.extra %}
     {% include 'organization/includes/owner_hierarchy.js.html' with current_owner=object.owner parents=tabsets.Owner.extra.context.owner_parents children=tabsets.Owner.extra.context.owner_children tab_name="tab_owner" %}
diff --git a/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html b/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
index 4947825..c37e010 100644
--- a/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
+++ b/component_catalog/templates/component_catalog/includes/component_hierarchy.js.html
@@ -1,84 +1,66 @@
-<script>
-  function isTabActive(id) {
-    const activeTab = document.querySelector('.tab-pane.active');
-    if (activeTab) {
-      return activeTab.id === id;
-    }
-    return false;
-  }
+{% extends "hierarchy_base.js.html" %}
 
-  jsPlumb.ready(function() {
-    var jsPlumbComponentHierarchy = jsPlumb.getInstance({
-      Connector: ['Straight'],
-      PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
-      EndpointStyle: {radius: 3, fillStyle: 'gray'},
-      Anchors: ['LeftMiddle', 'RightMiddle'],
-      Container: $("#tab_hierarchy")
-    });
+{% block herarchy_js_content %}
+  // Connect related_parents
+  {% for related_parent in related_parents %}
+    var source_id = 'component_{{ object.pk }}';
+    var target_id = 'component_{{ related_parent.parent.pk }}';
+    var connectionOptions = {
+      source: source_id,
+      target: target_id,
+      paintStyle: {strokeStyle: 'gray', lineWidth: 2}
+    };
+    {% if object.dataspace.show_usage_policy_in_user_views and related_parent.usage_policy %}
+      var fill_color = '{{ related_parent.get_usage_policy_color }}';
+      connectionOptions['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
+      connectionOptions['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
+    {% endif %}
+    {% if not related_parent.is_deployed %}
+      connectionOptions['paintStyle']['dashstyle'] = '2 2';
+    {% endif %}
+    connectNodes(jsPlumbHierarchy, connectionOptions);
 
-    // Do not draw right away as the tab may be hidden
-    jsPlumbComponentHierarchy.setSuspendDrawing(true);
-    {% for related_parent in related_parents %}
-      var connection = {
-        source: 'component_{{ object.pk }}',
-        target: 'component_{{ related_parent.parent.pk }}',
-        paintStyle: {strokeStyle: 'gray', lineWidth: 2}
-      };
-      {% if object.dataspace.show_usage_policy_in_user_views and related_parent.usage_policy %}
-        var fill_color = '{{ related_parent.get_usage_policy_color }}';
-          connection['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
-          connection['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
-      {% endif %}
-      {% if not related_parent.is_deployed %}
-        connection['paintStyle']['dashstyle'] = '2 2';
-      {% endif %}
-      jsPlumbComponentHierarchy.connect(connection);
-    {% endfor %}
+    {% if related_parent.parent_count > 0 %}
+      var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy';
+      addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl);
+    {% endif %}
+  {% endfor %}
 
-    {% for productcomponent in productcomponents %}
-      var connection = {
-        source: 'component_{{ object.pk }}',
-        target: 'product_{{ productcomponent.product.pk }}',
-        paintStyle: {strokeStyle: 'grey', lineWidth: 2}
-      };
-      {% if not productcomponent.is_deployed %}
-        connection['paintStyle']['dashstyle'] = '2 2';
-      {% endif %}
-      jsPlumbComponentHierarchy.connect(connection);
-    {% endfor %}
+  // Connect products (productcomponents)
+  {% for productcomponent in productcomponents %}
+    var connectionOptions = {
+      source: 'component_{{ object.pk }}',
+      target: 'product_{{ productcomponent.product.pk }}',
+      paintStyle: {strokeStyle: 'grey', lineWidth: 2}
+    };
+    {% if not productcomponent.is_deployed %}
+      connectionOptions['paintStyle']['dashstyle'] = '2 2';
+    {% endif %}
+    connectNodes(jsPlumbHierarchy, connectionOptions);
+  {% endfor %}
 
-    {% for related_child in related_children %}
-      var connection = {
-        source: 'component_{{ related_child.child.pk }}',
-        target: 'component_{{ object.pk }}',
-        paintStyle: {strokeStyle: 'gray', lineWidth: 2}
-      };
-      {% if object.dataspace.show_usage_policy_in_user_views and related_child.usage_policy %}
-        var fill_color = '{{ related_child.get_usage_policy_color }}';
-        connection['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
-        connection['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
-      {% endif %}
-      {% if not related_parent.is_deployed %}
-        connection['paintStyle']['dashstyle'] = '2 2';
-      {% endif %}
-      jsPlumbComponentHierarchy.connect(connection);
-    {% endfor %}
+  // Connect related_children
+  {% for related_child in related_children %}
+    var source_id = 'component_{{ related_child.child.pk }}';
+    var target_id = 'component_{{ object.pk }}';
+    var connectionOptions = {
+      source: source_id,
+      target: target_id,
+      paintStyle: {strokeStyle: 'gray', lineWidth: 2}
+    };
+    {% if object.dataspace.show_usage_policy_in_user_views and related_child.usage_policy %}
+      var fill_color = '{{ related_child.get_usage_policy_color }}';
+      connectionOptions['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
+      connectionOptions['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
+    {% endif %}
+    {% if not related_child.is_deployed %}
+      connectionOptions['paintStyle']['dashstyle'] = '2 2';
+    {% endif %}
+    connectNodes(jsPlumbHierarchy, connectionOptions);
 
-    // Draw if the related tab is active
-    if (isTabActive("tab_hierarchy"))
-      jsPlumbComponentHierarchy.setSuspendDrawing(false, true);
-
-    // Repaint on opening the tab, as when the tab content is hidden
-    // the connectors are not painted properly
-    $('button[data-bs-target="#tab_hierarchy"]').on('shown.bs.tab', function (e) {
-        // Second argument instructs jsPlumb to perform a full repaint.
-        jsPlumbComponentHierarchy.setSuspendDrawing(false, true);
-    });
-
-    // Repaint on resizing the browser window if the related tab is active
-    $(window).resize(function(){
-        if (isTabActive("tab_hierarchy"))
-          jsPlumbComponentHierarchy.repaintEverything();
-    });
-  });
-</script>
\ No newline at end of file
+    {% if related_child.child_count > 0 %}
+      var linkUrl = '{{ related_child.child.get_absolute_url }}#hierarchy';
+      addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl);
+    {% endif %}
+  {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/component_catalog/templates/component_catalog/tabs/tab_subcomponents.html b/component_catalog/templates/component_catalog/tabs/tab_subcomponents.html
index dc97a86..d98f485 100644
--- a/component_catalog/templates/component_catalog/tabs/tab_subcomponents.html
+++ b/component_catalog/templates/component_catalog/tabs/tab_subcomponents.html
@@ -34,7 +34,7 @@
                     {% endif %}
                 </td>
                 <td>{{ data.child.version }}</td>
-                <td>{{ data.child.owner }}</td>
+                <td>{{ data.child.owner|default_if_none:"" }}</td>
                 <td>{{ data.subcomponent.purpose }}</td>
                 <td>
                     {% if data.subcomponent.license_expression %}
@@ -50,7 +50,7 @@
                 <td class="text-center">{{ data.subcomponent.is_modified|as_icon }}</td>
                 <td>
                     {% if component.is_active %}
-                        <ul class="list-inline">
+                        <ul class="list-inline mb-0">
                             <li class="list-inline-item">
                                 <a href="{{ data.child.get_absolute_url }}#hierarchy" target="_blank" title="{% trans 'Hierarchy' %}"><i class="fas fa-sitemap"></i></a>
                             </li>
diff --git a/component_catalog/tests/test_views.py b/component_catalog/tests/test_views.py
index fbd77d4..351f875 100644
--- a/component_catalog/tests/test_views.py
+++ b/component_catalog/tests/test_views.py
@@ -444,8 +444,8 @@ def test_component_catalog_hierarchy_tab(self):
 
         expected1 = f'<div id="component_{self.component1.id}" class="card bg-body-tertiary mb-2">'
         expected2 = f'<div id="component_{self.component2.id}" class="card bg-body-tertiary mb-2">'
-        expected3 = f"source: 'component_{self.component1.id}'"
-        expected4 = f"target: 'component_{self.component2.id}'"
+        expected3 = f"var source_id = 'component_{self.component1.id}'"
+        expected4 = f"var target_id = 'component_{self.component2.id}'"
 
         self.assertContains(response, expected1)
         self.assertContains(response, expected2)
@@ -598,7 +598,6 @@ def test_component_catalog_detail_view_owner_tab_hierarchy_availability(self):
         self.client.login(username="nexb_user", password="t3st")
         url = self.component1.get_absolute_url()
         response = self.client.get(url)
-        self.assertNotContains(response, "jsPlumbOwnerHierarchy")
         self.assertNotContains(response, "Selected Owner")
         self.assertNotContains(response, "Child Owners")
 
@@ -608,7 +607,6 @@ def test_component_catalog_detail_view_owner_tab_hierarchy_availability(self):
         )
 
         response = self.client.get(url)
-        self.assertContains(response, "jsPlumb")
         self.assertContains(response, "Selected Owner")
         self.assertContains(response, "Child Owners")
         self.assertContains(response, child_owner.name)
diff --git a/component_catalog/views.py b/component_catalog/views.py
index abb89fe..943eb8c 100644
--- a/component_catalog/views.py
+++ b/component_catalog/views.py
@@ -21,6 +21,7 @@
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.core import signing
 from django.core.validators import EMPTY_VALUES
+from django.db.models import Count
 from django.db.models import Prefetch
 from django.http import FileResponse
 from django.http import Http404
@@ -630,18 +631,38 @@ def get_queryset(self):
             "licenses",
         )
 
-        related_children_qs = Subcomponent.objects.select_related(
-            "usage_policy",
-        ).prefetch_related(
-            "licenses",
-            Prefetch("child", queryset=component_prefetch_qs),
+        related_children_qs = (
+            Subcomponent.objects.select_related(
+                "usage_policy",
+            )
+            .prefetch_related(
+                "licenses",
+                Prefetch("child", queryset=component_prefetch_qs),
+            )
+            .annotate(
+                child_count=Count("child__children"),
+            )
+            .order_by(
+                "child__name",
+                "child__version",
+            )
         )
 
-        related_parents_qs = Subcomponent.objects.select_related(
-            "usage_policy",
-        ).prefetch_related(
-            "licenses",
-            Prefetch("parent", queryset=component_prefetch_qs),
+        related_parents_qs = (
+            Subcomponent.objects.select_related(
+                "usage_policy",
+            )
+            .prefetch_related(
+                "licenses",
+                Prefetch("parent", queryset=component_prefetch_qs),
+            )
+            .annotate(
+                parent_count=Count("parent__related_parents"),
+            )
+            .order_by(
+                "parent__name",
+                "parent__version",
+            )
         )
 
         return (
diff --git a/dje/templates/hierarchy_base.js.html b/dje/templates/hierarchy_base.js.html
new file mode 100644
index 0000000..c74e979
--- /dev/null
+++ b/dje/templates/hierarchy_base.js.html
@@ -0,0 +1,58 @@
+<script>
+  const tabId = "{{ tab_name|default:"tab_hierarchy" }}"
+
+  function isTabActive(id) {
+    const activeTab = document.querySelector('.tab-pane.active');
+    return activeTab ? activeTab.id === id : false;
+  }
+
+  function addEndpointWithLink(jsPlumbInstance, elementId, position, linkUrl) {
+    const endpointOptions = {
+      paintStyle: {fillStyle: '#2e73d0', radius: 5},
+      anchors: [position]
+    }
+
+    const endpoint = jsPlumbInstance.addEndpoint(elementId, endpointOptions);
+    wrapEndpointInLink(endpoint.canvas, linkUrl);
+    return endpoint;
+  }
+
+  function wrapEndpointInLink(svgElement, linkUrl) {
+    const linkElement = document.createElement('a');
+    linkElement.href = linkUrl;
+    svgElement.parentNode.insertBefore(linkElement, svgElement);
+    linkElement.appendChild(svgElement);
+  }
+
+  function connectNodes(jsPlumbHierarchy, connectionOptions) {
+    jsPlumbHierarchy.connect(connectionOptions);
+  }
+
+  jsPlumb.ready(function() {
+    const jsPlumbHierarchy = jsPlumb.getInstance({
+      Connector: ['Straight'],
+      PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
+      EndpointStyle: {radius: 3, fillStyle: 'gray'},
+      Anchors: ['LeftMiddle', 'RightMiddle'],
+      Container: document.querySelector("#tab_hierarchy")
+    });
+
+    // Do not draw right away as the tab may be hidden
+    jsPlumbHierarchy.setSuspendDrawing(true);
+
+    // Draw if the hierarchy tab is active
+    if (isTabActive(tabId)) jsPlumbHierarchy.setSuspendDrawing(false, true);
+
+    document.querySelector('button[data-bs-target="#tab_hierarchy"]').addEventListener('shown.bs.tab', function (e) {
+      // Second argument instructs jsPlumb to perform a full repaint.
+      jsPlumbHierarchy.setSuspendDrawing(false, true);
+    });
+
+    // Repaint on resizing the browser window if the related tab is active
+    window.addEventListener('resize', function(){
+      if (isTabActive(tabId)) jsPlumbHierarchy.repaintEverything();
+    });
+
+    {% block herarchy_js_content %}{% endblock %}
+  });
+</script>
\ No newline at end of file
diff --git a/license_library/tests/test_views.py b/license_library/tests/test_views.py
index b6d0155..00b6725 100644
--- a/license_library/tests/test_views.py
+++ b/license_library/tests/test_views.py
@@ -598,7 +598,7 @@ def test_license_library_detail_view_owner_tab_hierarchy_availability(self):
         )
 
         response = self.client.get(url)
-        self.assertContains(response, "jsPlumbOwnerHierarchy")
+        self.assertContains(response, "jsPlumbHierarchy")
         self.assertContains(response, "Selected Owner")
         self.assertContains(response, "Child Owners")
         self.assertContains(response, child_owner.name)
diff --git a/organization/templates/organization/includes/owner_hierarchy.js.html b/organization/templates/organization/includes/owner_hierarchy.js.html
index 7c24e2c..a376c00 100644
--- a/organization/templates/organization/includes/owner_hierarchy.js.html
+++ b/organization/templates/organization/includes/owner_hierarchy.js.html
@@ -5,7 +5,7 @@
   }
 
   jsPlumb.ready(function() {
-    var jsPlumbOwnerHierarchy = jsPlumb.getInstance({
+    var jsPlumbHierarchy = jsPlumb.getInstance({
         Connector: ['Straight'],
         PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
         EndpointStyle: {radius: 3, fillStyle: 'gray'},
@@ -14,29 +14,30 @@
     });
 
     // Do not draw right away as the tab may be hidden
-    jsPlumbOwnerHierarchy.setSuspendDrawing(true);
+    jsPlumbHierarchy.setSuspendDrawing(true);
+
     {% for parent in parents %}
-        jsPlumbOwnerHierarchy.connect({source: 'owner_{{ current_owner.pk }}', target: 'owner_{{ parent.pk }}'});
+        jsPlumbHierarchy.connect({source: 'owner_{{ current_owner.pk }}', target: 'owner_{{ parent.pk }}'});
     {% endfor %}
     {% for child in children %}
-        jsPlumbOwnerHierarchy.connect({source: 'owner_{{ child.pk }}', target: 'owner_{{ current_owner.pk }}'});
+        jsPlumbHierarchy.connect({source: 'owner_{{ child.pk }}', target: 'owner_{{ current_owner.pk }}'});
     {% endfor %}
 
     // Draw if the related tab is active
     if (is_active_tab("{{ tab_name }}"))
-      jsPlumbOwnerHierarchy.setSuspendDrawing(false, true);
+      jsPlumbHierarchy.setSuspendDrawing(false, true);
 
     // Repaint on opening the tab, as when the tab content is hidden
     // the connectors are not painted properly
     $('button[data-bs-target="#{{ tab_name }}"]').on('shown.bs.tab', function (e) {
         // Second argument instructs jsPlumb to perform a full repaint.
-        jsPlumbOwnerHierarchy.setSuspendDrawing(false, true);
+        jsPlumbHierarchy.setSuspendDrawing(false, true);
     });
 
     // Repaint on resizing the browser window if the related tab is active
     $(window).resize(function(){
         if (is_active_tab("{{ tab_name }}"))
-          jsPlumbOwnerHierarchy.repaintEverything();
+          jsPlumbHierarchy.repaintEverything();
     });
   });
 </script>
\ No newline at end of file
diff --git a/organization/templates/organization/owner_details.html b/organization/templates/organization/owner_details.html
index 550d437..87bb109 100644
--- a/organization/templates/organization/owner_details.html
+++ b/organization/templates/organization/owner_details.html
@@ -2,7 +2,7 @@
 {% load static %}
 {% block javascripts %}
   {{ block.super }}
-  <script src="{% static "js/jquery.jsPlumb-1.7.2-min.js" %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
+  <script src="{% static 'js/jquery.jsPlumb-1.7.2-min.js' %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
   {% if tabsets.Hierarchy.extra %}
     {% include 'organization/includes/owner_hierarchy.js.html' with current_owner=tabsets.Hierarchy.extra.context.owner parents=tabsets.Hierarchy.extra.context.owner_parents children=tabsets.Hierarchy.extra.context.owner_children tab_name="tab_hierarchy" %}
   {% endif %}
diff --git a/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html b/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
index eeba994..31e6926 100644
--- a/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
+++ b/product_portfolio/templates/product_portfolio/includes/product_hierarchy.js.html
@@ -1,51 +1,24 @@
-<script>
-  function is_active_tab(id) {
-    let active_tab_id = $('.tab-pane.active')[0].id;
-    return (active_tab_id === id);
-  }
+{% extends "hierarchy_base.js.html" %}
 
-  jsPlumb.ready(function() {
-    let jsPlumbProductHierarchy = jsPlumb.getInstance({
-      Connector: ['Straight'],
-      PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
-      EndpointStyle: {radius: 3, fillStyle: 'gray'},
-      Anchors: ['LeftMiddle', 'RightMiddle'],
-      Container: $('#tab_hierarchy')
-    });
+{% block herarchy_js_content %}
+  {% for feature, relationships in relations_feature_grouped.items %}
+    {% for relation in relationships %}
+      var source_id = '{% if relation.package_id %}package{% else %}component{% endif %}_{{ relation.pk }}';
+      var target_id = 'product_{{ object.pk }}';
+      var connectionOptions = {
+        source: source_id,
+        target: target_id,
+        paintStyle: {strokeStyle: 'gray', lineWidth: 2}
+      };
+      {% if not relation.is_deployed %}
+        connectionOptions.paintStyle.dashstyle = '2 2';
+      {% endif %}
+      connectNodes(jsPlumbHierarchy, connectionOptions);
 
-    // Do not draw right away as the tab may be hidden
-    jsPlumbProductHierarchy.setSuspendDrawing(true);
-
-    let connection;
-
-    {% for feature, relationships in relations_feature_grouped.items %}
-      {% for relation in relationships %}
-        connection = {
-          source: '{% if relation.package_id %}package{% else %}component{% endif %}_{{ relation.pk }}',
-          target: 'product_{{ object.pk }}',
-          paintStyle: {strokeStyle: 'gray', lineWidth: 2}
-        };
-        {% if not relation.is_deployed %}
-          connection['paintStyle']['dashstyle'] = '2 2';
-        {% endif %}
-        jsPlumbProductHierarchy.connect(connection);
-      {% endfor %}
+      {% if relation.children_count > 0 %}
+        var linkUrl = '{{ relation.component.get_absolute_url }}#hierarchy';
+        addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl);
+      {% endif %}
     {% endfor %}
-
-    // Draw if the related tab is active
-    if (is_active_tab('tab_hierarchy'))
-      jsPlumbProductHierarchy.setSuspendDrawing(false, true);
-
-    // Repaint on opening the tab, as when the tab content is hidden
-    // the connectors are not painted properly
-    $('button[data-bs-target="#tab_hierarchy"]').on('shown.bs.tab', function () {
-        // Second argument instructs jsPlumb to perform a full repaint.
-        jsPlumbProductHierarchy.setSuspendDrawing(false, true);
-    });
-
-    // Repaint on resizing the browser window if the related tab is active
-    $(window).resize(function(){
-      if (is_active_tab('tab_hierarchy')) jsPlumbProductHierarchy.repaintEverything();
-    });
-  });
-</script>
\ No newline at end of file
+  {% endfor %}
+{% endblock %}
\ No newline at end of file
diff --git a/product_portfolio/templates/product_portfolio/product_details.html b/product_portfolio/templates/product_portfolio/product_details.html
index bf37593..585e1f4 100644
--- a/product_portfolio/templates/product_portfolio/product_details.html
+++ b/product_portfolio/templates/product_portfolio/product_details.html
@@ -111,7 +111,7 @@
   {% if has_edit_productpackage or has_edit_productcomponent %}
     <script src="{% static 'js/csrf_header.js' %}" integrity="sha384-H61e46QMjASwnZFb/rwCl9PANtdqt1dbKU8gnGOh9lIGQEoi1B6qkWROHnrktD3R" crossorigin="anonymous"></script>
   {% endif %}
-  <script src="{% static "js/jquery.jsPlumb-1.7.2-min.js" %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
+  <script src="{% static 'js/jquery.jsPlumb-1.7.2-min.js' %}" integrity="sha384-ITD4LUuh8ImLrJ5g55OIlG2QoiYVUuXLN9CStlO1e2SQZm0SyGfNkMiwPboMOv8D" crossorigin="anonymous"></script>
   {% include 'product_portfolio/includes/product_hierarchy.js.html' with relations_feature_grouped=tabsets.Hierarchy.fields.0.1.relations_feature_grouped %}
   {% if tabsets.Owner.extra %}
     {% include 'organization/includes/owner_hierarchy.js.html' with current_owner=object.owner parents=tabsets.Owner.extra.context.owner_parents children=tabsets.Owner.extra.context.owner_children tab_name="tab_owner" %}
diff --git a/product_portfolio/tests/test_views.py b/product_portfolio/tests/test_views.py
index 26e9a05..4d0aa84 100644
--- a/product_portfolio/tests/test_views.py
+++ b/product_portfolio/tests/test_views.py
@@ -713,9 +713,9 @@ def test_product_portfolio_detail_view_hierarchy_tab(self):
             f'<div id="product_{self.product1.id}" class="card bg-body-tertiary mb-2">',
             f'<div id="component_{pc1.id}" class="card bg-body-tertiary mb-2">',
             f'<div id="package_{pp1.id}" class="card bg-body-tertiary mb-2">',
-            f"target: 'product_{self.product1.id}'",
-            f"source: 'component_{pc1.id}'",
-            f"source: 'package_{pp1.id}'",
+            f"var target_id = 'product_{self.product1.id}'",
+            f"var source_id = 'component_{pc1.id}'",
+            f"var source_id = 'package_{pp1.id}'",
             f'<h4 class="feature-title text-center">{pc1.feature}</h4>',
             f'<h4 class="feature-title text-center">{pp1.feature}</h4>',
             '<i class="fa fa-briefcase cursor-help"></i>',
diff --git a/product_portfolio/views.py b/product_portfolio/views.py
index 54e945e..f4e5d74 100644
--- a/product_portfolio/views.py
+++ b/product_portfolio/views.py
@@ -389,6 +389,9 @@ def tab_hierarchy(self):
             .prefetch_related(
                 "component__licenses",
             )
+            .annotate(
+                children_count=Count("component__children"),
+            )
             .order_by(
                 "feature",
                 "component",