Fix unit test and add changelog entry #70

Signed-off-by: tdruez <tdruez@nexb.com>

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

component_catalog/tests/test_views.py

@@ -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, "jsPlumb")
         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)

dje/templates/hierarchy_base.js.html

@@ -1,4 +1,6 @@
 <script>
+  const tabId = "{{ tab_name|default:"tab_hierarchy" }}"
+
   function isTabActive(id) {
     const activeTab = document.querySelector('.tab-pane.active');
     return activeTab ? activeTab.id === id : false;
@@ -39,7 +41,7 @@
     jsPlumbHierarchy.setSuspendDrawing(true);
 
     // Draw if the hierarchy tab is active
-    if (isTabActive("tab_hierarchy")) jsPlumbHierarchy.setSuspendDrawing(false, true);
+    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.
@@ -48,7 +50,7 @@
 
     // Repaint on resizing the browser window if the related tab is active
     window.addEventListener('resize', function(){
-      if (isTabActive("tab_hierarchy")) jsPlumbHierarchy.repaintEverything();
+      if (isTabActive(tabId)) jsPlumbHierarchy.repaintEverything();
     });
 
     {% block herarchy_js_content %}{% endblock %}

organization/templates/organization/includes/owner_hierarchy.js.html

@@ -1,10 +1,43 @@
-{% extends "hierarchy_base.js.html" %}
+<script>
+  function is_active_tab(id) {
+    var active_tab_id = $('.tab-pane.active')[0].id;
+    return (active_tab_id == id);
+  }
 
-{% block herarchy_js_content %}
-  {% for parent in parents %}
+  jsPlumb.ready(function() {
+    var jsPlumbHierarchy = jsPlumb.getInstance({
+        Connector: ['Straight'],
+        PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
+        EndpointStyle: {radius: 3, fillStyle: 'gray'},
+        Anchors: ['LeftMiddle', 'RightMiddle'],
+        Container: $("#{{ tab_name }}")
+    });
+
+    // Do not draw right away as the tab may be hidden
+    jsPlumbHierarchy.setSuspendDrawing(true);
+
+    {% for parent in parents %}
         jsPlumbHierarchy.connect({source: 'owner_{{ current_owner.pk }}', target: 'owner_{{ parent.pk }}'});
     {% endfor %}
     {% for child in children %}
         jsPlumbHierarchy.connect({source: 'owner_{{ child.pk }}', target: 'owner_{{ current_owner.pk }}'});
     {% endfor %}
-{% endblock %}
+
+    // Draw if the related tab is active
+    if (is_active_tab("{{ tab_name }}"))
+      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.
+        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 }}"))
+          jsPlumbHierarchy.repaintEverything();
+    });
+  });
+</script>