client pages: improve styles and add concentric layout

ethpandaops · Sep 4, 2024 · 09495ea · 09495ea
1 parent 54d2a4c
commit 09495ea
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 25 deletions.
diff --git a/handlers/clients_cl.go b/handlers/clients_cl.go
@@ -116,9 +116,8 @@ func buildCLPeerMapData() *models.ClientCLPageDataPeerMap {
 			p2.Value++
 
 			if _, ok := edges[idx]; !ok {
-				edge := models.ClientCLDataMapPeerMapEdge{}
-				if nodes[peer.PeerID].Group == "external" {
-					edge.Dashes = true
+				edge := models.ClientCLDataMapPeerMapEdge{
+					Interaction: nodes[peer.PeerID].Group,
 				}
 				if peer.Direction == "inbound" {
 					edge.From = peer.PeerID

diff --git a/handlers/clients_el.go b/handlers/clients_el.go
@@ -140,9 +140,8 @@ func buildELPeerMapData() *models.ClientELPageDataPeerMap {
 			p2.Value++
 
 			if _, ok := edges[idx]; !ok {
-				edge := models.ClientELDataMapPeerMapEdge{}
-				if nodes[peerID].Group == "external" {
-					edge.Dashes = true
+				edge := models.ClientELDataMapPeerMapEdge{
+					Interaction: nodes[peerID].Group,
 				}
 				if peer.Network.Inbound {
 					edge.From = peerID

diff --git a/static/css/clients.css b/static/css/clients.css
@@ -89,10 +89,15 @@ Client peers table
 
 .peer-nodemap {
   background: #0f0f0f9f url(/images/stars.png) repeat top center;
+  background-blend-mode: multiply;
   height: 850px;
   padding: 0;
 }
 
+.peer-nodemap-menu{
+  height: 40px;
+}
+
 @media only screen and (max-width: 768px) {
   .peer-nodemap {
     height: 50vh;

diff --git a/static/js/cytoscape-network-aux.js b/static/js/cytoscape-network-aux.js
@@ -30,7 +30,7 @@ $_network.layouts = {
   fcose : function(nodeCount){
     return {
       name: 'fcose',
-      idealEdgeLength: 5 * nodeCount,
+      idealEdgeLength: 3 * nodeCount,
       nestingFactor: 1.2,
       animate: false,
       stop: function() {
@@ -50,6 +50,19 @@ $_network.layouts = {
       animate: false,
     }
   },
+  concentric : function() {
+    return {
+      name: 'concentric',
+      animate: false,
+      concentric: function( node ){
+        //return node.degree();
+        return node.data('group') == 'internal' ? 2 : 1;
+      },
+      levelWidth: function( nodes ){
+        return 1;
+      }
+    }
+  },
 }
 
 // Default layout
@@ -66,6 +79,7 @@ $_network.defaultStylesheet = cytoscape.stylesheet()
       'border-color': '#0077B6',
       'border-width': 1,
       'border-opacity': 1,
+      'shape': 'ellipse',
     })
   .selector('edge')
     .css({
@@ -87,6 +101,29 @@ $_network.defaultStylesheet = cytoscape.stylesheet()
       "color": "#ffffff",
       "font-size": 4,
     })
+  .selector('edge[interaction = "external"]')
+    .css({
+      'line-style': 'dashed',
+      'line-color': '#075e4d',
+      'target-arrow-color': '#075e4d',
+      'source-arrow-color': '#075e4d',
+    })
+  .selector('node[group = "internal"]')
+    .css({
+      'border-color': '#FFA500',
+      'background-color': '#FFA500',
+      'opacity': 1
+    })
+  .selector('node[group = "external"]')
+    .css({
+      'border-color': '#075e4d',
+      'background-color': '#075e4d',
+      'opacity': 0.5,
+      'height': 15,
+      'width': 15,
+      'border-style:': 'dashed',
+      'shape': 'round-octagon',
+    })
   .selector('node:selected, edge:selected')
     .css({
       'border-color': '#FFA500',
@@ -100,7 +137,7 @@ $_network.defaultStylesheet = cytoscape.stylesheet()
 
 $_network.fitAnimated = function (cy, layout) {
   cy.animate({
-    fit: { eles: cy.$() },
+    fit: { padding: 20 },
     duration: 500,
     complete: function () {
       setTimeout(function () {
@@ -132,7 +169,6 @@ $_network.create = function (container, data){
       svgIdenticon = jdenticon.toSvg(data.nodes[i].id, 80);
       // Add style to nodes
       stylesheet.selector('#' + data.nodes[i].id).css({
-          'shape': 'circle',
           'background-image': 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgIdenticon),
           'background-fit': 'cover',
           'background-opacity': 1,
@@ -146,7 +182,8 @@ $_network.create = function (container, data){
       data: {
         id: data.edges[i].from + "-" + data.edges[i].to,
         source: data.edges[i].from,
-        target: data.edges[i].to
+        target: data.edges[i].to,
+        interaction: data.edges[i].interaction,
       }
     });
   }
@@ -156,7 +193,6 @@ $_network.create = function (container, data){
       style: stylesheet,
       layout: $_network.defaultLayout(data.nodes.length),
       elements: cytoElements,
-      wheelSensitivity: 0.1,
     });
 
   cy.on('tap', 'node', function(evt){

diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -23,10 +23,14 @@ <h2 class="accordion-header">
                 <div id="nodemap-loading" class="spinner-border" role="status">
                   <span class="sr-only">Loading...</span>
                 </div>
-                <div class="btn-group btn-group-sm" role="group" aria-label="Network layouts" style="position: absolute; bottom: 10px; right: 10px; z-index: 10000;">
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.fcose(data.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.circle())'><i class="fa-solid fa-circle"></i></button>
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.grid())'><i class="fa-solid fa-th"></i></button>
+              </div>
+              <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; z-index: 10000;">
+                  <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(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>
                 </div>
               </div>
             </div>
@@ -261,6 +265,7 @@ <h2 class="accordion-header">
 <script src="/js/vendor/cytoscape-layout-base.js"></script>
 <script src="/js/vendor/cytoscape-cose-base.js"></script>
 <script src="/js/vendor/cytoscape-fcose.js"></script>
+<script src="https://cytoscape.org/cytoscape.js-cxtmenu/cytoscape-cxtmenu.js"></script>
 <script src="/js/cytoscape-network-aux.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");

diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
@@ -23,10 +23,14 @@ <h2 class="accordion-header">
                 <div id="nodemap-loading" class="spinner-border" role="status">
                   <span class="sr-only">Loading...</span>
                 </div>
-                <div class="btn-group btn-group-sm" role="group" aria-label="Network layouts" style="position: absolute; bottom: 10px; right: 10px; z-index: 10000;">
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.fcose(data.nodes.length))'><i class="fa-solid fa-share-alt"></i></button>
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.circle())'><i class="fa-solid fa-circle"></i></button>
-                  <button type="button" class="btn btn-outline-secondary" onclick='event.stopPropagation(); $_network.fitAnimated(cy,$_network.layouts.grid())'><i class="fa-solid fa-th"></i></button>
+              </div>
+              <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; z-index: 10000;">
+                  <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(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>
                 </div>
               </div>
             </div>

diff --git a/types/models/clients_cl.go b/types/models/clients_cl.go
@@ -58,7 +58,7 @@ type ClientCLPageDataPeerMapNode struct {
 }
 
 type ClientCLDataMapPeerMapEdge struct {
-	From   string `json:"from"`
-	To     string `json:"to"`
-	Dashes bool   `json:"dashes"`
+	From        string `json:"from"`
+	To          string `json:"to"`
+	Interaction string `json:"interaction"`
 }
diff --git a/types/models/clients_el.go b/types/models/clients_el.go
@@ -57,7 +57,7 @@ type ClientELPageDataPeerMapNode struct {
 }
 
 type ClientELDataMapPeerMapEdge struct {
-	From   string `json:"from"`
-	To     string `json:"to"`
-	Dashes bool   `json:"dashes"`
+	From        string `json:"from"`
+	To          string `json:"to"`
+	Interaction string `json:"interaction"`
 }