add some padding when there's a low node count in the graph

ethpandaops · Sep 9, 2024 · b2cba61 · b2cba61
1 parent 1435128
commit b2cba61
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/static/js/cytoscape-network-aux.js b/static/js/cytoscape-network-aux.js
@@ -35,7 +35,8 @@ $_network.layouts = {
       animate: false,
       stop: function() {
         $("#nodemap-loading").hide();
-      }
+      },
+      padding: nodeCount < 20 ? 200 : 0,
     }
   },
   circle : function() {
@@ -50,10 +51,11 @@ $_network.layouts = {
       animate: false,
     }
   },
-  concentric : function() {
+  concentric : function(nodeCount) {
     return {
       name: 'concentric',
       animate: false,
+      padding: nodeCount < 20 ? 200 : 0,
       concentric: function( node ){
         return node.data('group') == 'internal' ? 2 : 1;
       },

diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -30,7 +30,7 @@ <h2 class="accordion-header">
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="CoSE" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.fcose(data.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Circle" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.circle())'><i class="fa-solid fa-circle"></i></button>
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Grid" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.grid())'><i class="fa-solid fa-th"></i></button>
-                  <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.concentric())'><i class="fa-solid fa-sun"></i></button>
+                  <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.concentric(data.nodes.length))'><i class="fa-solid fa-sun"></i></button>
                 </div>
               </div>
             </div>

diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
@@ -30,7 +30,7 @@ <h2 class="accordion-header">
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Cose" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.fcose(data.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Circle" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.circle())'><i class="fa-solid fa-circle"></i></button>
                   <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Grid" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.grid())'><i class="fa-solid fa-th"></i></button>
-                  <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.concentric())'><i class="fa-solid fa-sun"></i></button>
+                  <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(cy,$_network.layouts.concentric(data.nodes.length))'><i class="fa-solid fa-sun"></i></button>
                 </div>
               </div>
             </div>