Merge pull request #249 from ethpandaops/skylenet/fix-p2p-graph

fix: improve fcose layout and make layout switcher buttons work again
ethpandaops · Feb 17, 2025 · 935a6ff · 935a6ff
2 parents e49f6b5 + 39bc0db
commit 935a6ff
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .vscode
+.DS_Store
 bin
 temp
 config.yaml

diff --git a/static/js/cytoscape-network-aux.js b/static/js/cytoscape-network-aux.js
@@ -30,13 +30,22 @@ $_network.layouts = {
   fcose : function(nodeCount){
     return {
       name: 'fcose',
-      idealEdgeLength: 3 * nodeCount,
-      nestingFactor: 1.2,
+      idealEdgeLength: nodeCount < 50 ? nodeCount * 5 : nodeCount * 3,
+      nestingFactor: 1.4,
+      nodeRepulsion: nodeCount * 1000,
+      edgeElasticity: 0.45,
+      gravity: 0.25,
+      numIter: 2500,
+      tile: true,
+      tilingPaddingVertical: 10,
+      tilingPaddingHorizontal: 10,
       animate: false,
+      fit: true,
+      padding: nodeCount < 20 ? 100 : 30,
+      randomize: true,
       stop: function() {
         $("#nodemap-loading").hide();
       },
-      padding: nodeCount < 20 ? 200 : 0,
     }
   },
   circle : function() {

diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -29,10 +29,10 @@ <h2 class="accordion-header">
               <div class="card-body px-0 peer-nodemap-menu">
                 <div class="btn-group btn-group-sm" role="group" aria-label="Network layouts" style="position: absolute; bottom: 5px; right: 10px;">
                   <button type="button" class="btn btn-secondary" disabled>Layouts</button>
-                  <button type="button" data-toggle="tooltip" data-placement="top" title="CoSE" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.fcose(data.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
+                  <button type="button" data-toggle="tooltip" data-placement="top" title="CoSE" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.fcose(peerGraphData.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
                   <button type="button" data-toggle="tooltip" data-placement="top" title="Circle" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.circle())'><i class="fa-solid fa-circle"></i></button>
                   <button type="button" data-toggle="tooltip" data-placement="top" title="Grid" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.grid())'><i class="fa-solid fa-th"></i></button>
-                  <button type="button" data-toggle="tooltip" data-placement="top" title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.concentric(data.nodes.length))'><i class="fa-solid fa-sun"></i></button>
+                  <button type="button" data-toggle="tooltip" data-placement="top" title="Concentric" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.concentric(peerGraphData.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
@@ -27,10 +27,10 @@ <h2 class="accordion-header">
               <div class="card-body px-0 peer-nodemap-menu">
                 <div class="btn-group btn-group-sm" role="group" aria-label="Network layouts" style="position: absolute; bottom: 5px; right: 10px;">
                   <button type="button" class="btn btn-secondary" disabled>Layouts</button>
-                  <button type="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="CoSE" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_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="CoSE" class="btn btn-secondary" onclick='$_network.fitAnimated(peerGraph,$_network.layouts.fcose(peerGraphData.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(peerGraph,$_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(peerGraph,$_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(peerGraph,$_network.layouts.concentric(data.nodes.length))'><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(peerGraph,$_network.layouts.concentric(peerGraphData.nodes.length))'><i class="fa-solid fa-sun"></i></button>
                 </div>
               </div>
             </div>
@@ -119,7 +119,7 @@ <h2 class="accordion-header">
                   </tr>
                   <tr class="collapse peerInfo" style="transition:0s" id="peerInfo-{{ $client.PeerID }}">
                     <td colspan="7" style="padding: 10px 0;" class="peer-details-container" data-peerid="{{ $client.PeerID }}">
-                      
+
                     </td>
                   </tr>
                 {{ end }}