Refactor the hierarchy JS to remove duplication #70

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

component_catalog/templates/component_catalog/includes/component_hierarchy.js.html

@@ -1,10 +1,7 @@
 <script>
   function isTabActive(id) {
     const activeTab = document.querySelector('.tab-pane.active');
-    if (activeTab) {
-      return activeTab.id === id;
-    }
-    return false;
+    return activeTab ? activeTab.id === id : false;
   }
 
   function addEndpointWithLink(jsPlumbInstance, elementId, position, linkUrl) {
@@ -13,19 +10,20 @@
       anchors: [position]
     }
 
-    // Add the endpoint to the specified source element
     const endpoint = jsPlumbInstance.addEndpoint(elementId, endpointOptions);
+    wrapEndpointInLink(endpoint.canvas, linkUrl);
+    return endpoint;
+  }
 
-    // Wrap the endpoint's SVG element in an <a> tag
-    const svgElement = endpoint.canvas; // The canvas is the SVG element for the endpoint
+  function wrapEndpointInLink(svgElement, linkUrl) {
     const linkElement = document.createElement('a');
     linkElement.href = linkUrl;
-
-    // Insert the SVG element into the <a> tag and replace the SVG element with the <a> tag in the DOM
     svgElement.parentNode.insertBefore(linkElement, svgElement);
     linkElement.appendChild(svgElement);
+  }
 
-    return endpoint;
+  function connectNodes(jsPlumbHierarchy, connectionOptions) {
+    jsPlumbHierarchy.connect(connectionOptions);
   }
 
   jsPlumb.ready(function() {
@@ -34,50 +32,50 @@
       PaintStyle: {strokeStyle: 'gray', lineWidth: 1},
       EndpointStyle: {radius: 3, fillStyle: 'gray'},
       Anchors: ['LeftMiddle', 'RightMiddle'],
-      Container: $("#tab_hierarchy")
+      Container: document.querySelector("#tab_hierarchy")
     });
 
-    // Do not draw right away as the tab may be hidden
     jsPlumbHierarchy.setSuspendDrawing(true);
 
+    // Connect related_parents
     {% for related_parent in related_parents %}
       var source_id = 'component_{{ object.pk }}';
       var target_id = 'component_{{ related_parent.parent.pk }}';
-
-      var connection = {
+      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 }}';
-          connection['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
-          connection['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
+        connectionOptions['endpointStyle'] =  {fillStyle: fill_color, radius: 4};
+        connectionOptions['paintStyle'] =  {strokeStyle: fill_color, lineWidth: 2};
       {% endif %}
       {% if not related_parent.is_deployed %}
-        connection['paintStyle']['dashstyle'] = '2 2';
+        connectionOptions['paintStyle']['dashstyle'] = '2 2';
       {% endif %}
-      jsPlumbHierarchy.connect(connection);
+      connectNodes(jsPlumbHierarchy, connectionOptions);
 
-      // related_parent.parent.parents.exists
       {% if related_parent.parent.related_parents.exists %}
         var linkUrl = '{{ related_parent.parent.get_absolute_url }}#hierarchy';
         addEndpointWithLink(jsPlumbHierarchy, target_id, 'LeftMiddle', linkUrl);
       {% endif %}
     {% endfor %}
 
+    // Connect products (productcomponents)
     {% for productcomponent in productcomponents %}
-      var connection = {
+      var connectionOptions = {
         source: 'component_{{ object.pk }}',
         target: 'product_{{ productcomponent.product.pk }}',
         paintStyle: {strokeStyle: 'grey', lineWidth: 2}
       };
       {% if not productcomponent.is_deployed %}
-        connection['paintStyle']['dashstyle'] = '2 2';
+        connectionOptions['paintStyle']['dashstyle'] = '2 2';
       {% endif %}
-      jsPlumbHierarchy.connect(connection);
+      connectNodes(jsPlumbHierarchy, connectionOptions);
     {% endfor %}
 
+    // Connect related_children
     {% for related_child in related_children %}
       var source_id = 'component_{{ related_child.child.pk }}';
       var target_id = 'component_{{ object.pk }}';
@@ -94,29 +92,25 @@
       {% if not related_child.is_deployed %}
         connectionOptions['paintStyle']['dashstyle'] = '2 2';
       {% endif %}
-      jsPlumbHierarchy.connect(connectionOptions);
+      connectNodes(jsPlumbHierarchy, connectionOptions);
 
       {% if related_child.child.children.exists %}
         var linkUrl = '{{ related_child.child.get_absolute_url }}#hierarchy';
         addEndpointWithLink(jsPlumbHierarchy, source_id, 'RightMiddle', linkUrl);
       {% endif %}
     {% endfor %}
 
-    // Draw if the related tab is active
-    if (isTabActive("tab_hierarchy"))
-      jsPlumbHierarchy.setSuspendDrawing(false, true);
+    // Draw if the hierarchy tab is active
+    if (isTabActive("tab_hierarchy")) 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_hierarchy"]').on('shown.bs.tab', function (e) {
-        // Second argument instructs jsPlumb to perform a full repaint.
-        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).resize(function(){
-        if (isTabActive("tab_hierarchy"))
-          jsPlumbHierarchy.repaintEverything();
+    window.addEventListener('resize', function(){
+      if (isTabActive("tab_hierarchy")) jsPlumbHierarchy.repaintEverything();
     });
   });
 </script>