From 0a49a79c62b5dd99e87662427e4c2a76250804e3 Mon Sep 17 00:00:00 2001
From: Rafael Matias <rafael@skyle.net>
Date: Tue, 16 Jul 2024 16:09:52 +0200
Subject: [PATCH 1/5] automatically fit node graph to container

---
 static/js/vis-network-aux.js      | 127 ++++++++++++++++++++++++++++++
 templates/clients/clients_cl.html | 116 ++-------------------------
 templates/clients/clients_el.html | 120 ++--------------------------
 3 files changed, 140 insertions(+), 223 deletions(-)
 create mode 100644 static/js/vis-network-aux.js

diff --git a/static/js/vis-network-aux.js b/static/js/vis-network-aux.js
new file mode 100644
index 0000000..b1c2b73
--- /dev/null
+++ b/static/js/vis-network-aux.js
@@ -0,0 +1,127 @@
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+$_network = {};
+
+// Auxiliar function to fit a network to the screen
+$_network.fitToScreen = function (network) {
+  var options = {
+    offset: { x: 0, y: 0 },
+    duration: 1000,
+    easingFunction: "easeInOutQuad",
+  };
+  network.fit({ animation: options });
+}
+
+// Default options for a network
+$_network.defaultOptions = {
+  layout: {
+    randomSeed: 1
+  },
+  interaction: {
+    hover: true
+  },
+  manipulation: {
+    enabled: false,
+  },
+  groups: {
+    internal: {
+      shape: "dot",
+      size: 30,
+      font: {
+        size: 16,
+        face: "Tahoma",
+        color: "#ffffff",
+      },
+      borderWidth: 3,
+      shadow: true,
+      color:{
+        border: "#0077B6",
+        background: "#fafafa",
+        highlight: {
+          border: "#E77D22",
+          background: "#fafafa",
+        },
+        hover: {
+          border: "#0077B6",
+          background: "#fefefe",
+        },
+      }
+    },
+    external: {
+      shape: "dot",
+      shapeProperties: {
+        borderDashes: [5, 5],
+      },
+      size: 20,
+      font: {
+        size: 14,
+        face: "Tahoma",
+        color: "#ffffff",
+      },
+      borderWidth: 2,
+      shadow: true,
+      color:{
+        border: "#809FFF",
+        background: "#fafafa",
+        highlight: {
+          border: "#E77D22",
+          background: "#fafafa",
+        },
+        hover: {
+          border: "#809FFF",
+          background: "#fefefe",
+        },
+      }
+    },
+  },
+  nodes: {
+    shape: "dot",
+    size: 30,
+    font: {
+      size: 16,
+      face: "Tahoma",
+      color: "#ffffff",
+    },
+    borderWidth: 2,
+    shadow: true,
+    color:{
+      border: "#222222",
+      background: "#666666",
+      highlight: {
+        border: "#E77D22",
+        background: "#E77D22",
+      },
+      hover: {
+        border: "#222222",
+        background: "#666666",
+      },
+    }
+  },
+  edges: {
+    arrows: {
+      to: { enabled: true, scaleFactor: 1, type: "arrow" },
+    },
+    width: 2,
+    shadow: true,
+    color: {
+      color: "#0077B6",
+      highlight: "#E77D22",
+      hover: "#0077B6",
+      opacity: 0.7,
+    },
+    smooth: {
+      type: "dynamic", // might need to change to "continuous" when there are too many nodes
+      //type: "continuous",
+    },
+  },
+  physics: {
+    stabilization: false,
+    barnesHut: {
+      gravitationalConstant: -5000,
+      springConstant: 0.001,
+      springLength: 200,
+    },
+  },
+};
diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
index d6d42e4..fda9f83 100644
--- a/templates/clients/clients_cl.html
+++ b/templates/clients/clients_cl.html
@@ -158,6 +158,7 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
 
 {{ define "js" }}
 <script src="/js/vis-network.min.js"></script>
+<script src="/js/vis-network-aux.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");
 
@@ -165,118 +166,13 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
   for (var i = 0; i < data.nodes.length; i++) {
     data.nodes[i].title = data.nodes[i].id;
   }
-  var options = {
-    layout: {
-      randomSeed: 1
-    },
-    interaction: {
-      hover: true
-    },
-    manipulation: {
-      enabled: false,
-    },
-    groups: {
-      internal: {
-        shape: "dot",
-        size: 30,
-        font: {
-          size: 16,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 3,
-        shadow: true,
-        color:{
-          border: "#0077B6",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#0077B6",
-            background: "#fefefe",
-          },
-        }
-      },
-      external: {
-        shape: "dot",
-        shapeProperties: {
-          borderDashes: [5, 5],
-        },
-        size: 20,
-        font: {
-          size: 14,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 2,
-        shadow: true,
-        color:{
-          border: "#809FFF",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#809FFF",
-            background: "#fefefe",
-          },
-        }
-      },
-    },
-    nodes: {
-      shape: "dot",
-      size: 30,
-      font: {
-        size: 16,
-        face: "Tahoma",
-        color: "#ffffff",
-      },
-      borderWidth: 2,
-      shadow: true,
-      color:{
-        border: "#222222",
-        background: "#666666",
-        highlight: {
-          border: "#E77D22",
-          background: "#E77D22",
-        },
-        hover: {
-          border: "#222222",
-          background: "#666666",
-        },
-      }
-    },
-    edges: {
-      arrows: {
-        to: { enabled: true, scaleFactor: 1, type: "arrow" },
-      },
-      width: 2,
-      shadow: true,
-      color: {
-        color: "#0077B6",
-        highlight: "#E77D22",
-        hover: "#0077B6",
-        opacity: 0.7,
-      },
-      smooth: {
-        type: "dynamic", // might need to change to "continuous" when there are too many nodes
-        //type: "continuous",
-      },
-    },
-    physics: {
-      stabilization: false,
-      barnesHut: {
-        gravitationalConstant: -5000,
-        springConstant: 0.001,
-        springLength: 200,
-      },
-    },
-  };
+  var options = $_network.defaultOptions;
   var network = new vis.Network(container, data, options);
 
+  sleep(1000).then(() => {
+    $_network.fitToScreen(network);
+  });
+
   // Handle events
   network.on("hoverNode", function (params) {
     console.log("hoverNode Event:", params);
diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
index 0d8bc0e..fa19195 100644
--- a/templates/clients/clients_el.html
+++ b/templates/clients/clients_el.html
@@ -188,132 +188,26 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Execution clients<
 
 {{ define "js" }}
 <script src="/js/vis-network.min.js"></script>
+<script src="/js/vis-network-aux.js"></script>
 <script type="text/javascript">
   var container = document.getElementById("nodemap");
 
   var data = {{ .PeerMap }}
-  console.log(data)
-  var clients = {{ .Clients}}
-  console.log(clients)
   for (var i = 0; i < data.nodes.length; i++) {
     data.nodes[i].title = data.nodes[i].id;
   }
-  var options = {
-    layout: {
-      randomSeed: 1
-    },
-    interaction: {
-      hover: true
-    },
-    manipulation: {
-      enabled: false,
-    },
-    groups: {
-      internal: {
-        shape: "dot",
-        size: 30,
-        font: {
-          size: 16,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 3,
-        shadow: true,
-        color:{
-          border: "#0077B6",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#0077B6",
-            background: "#fefefe",
-          },
-        }
-      },
-      external: {
-        shape: "dot",
-        shapeProperties: {
-          borderDashes: [5, 5],
-        },
-        size: 20,
-        font: {
-          size: 14,
-          face: "Tahoma",
-          color: "#ffffff",
-        },
-        borderWidth: 2,
-        shadow: true,
-        color:{
-          border: "#809FFF",
-          background: "#fafafa",
-          highlight: {
-            border: "#E77D22",
-            background: "#fafafa",
-          },
-          hover: {
-            border: "#809FFF",
-            background: "#fefefe",
-          },
-        }
-      },
-    },
-    nodes: {
-      shape: "dot",
-      size: 30,
-      font: {
-        size: 16,
-        face: "Tahoma",
-        color: "#ffffff",
-      },
-      borderWidth: 2,
-      shadow: true,
-      color:{
-        border: "#222222",
-        background: "#666666",
-        highlight: {
-          border: "#E77D22",
-          background: "#E77D22",
-        },
-        hover: {
-          border: "#222222",
-          background: "#666666",
-        },
-      }
-    },
-    edges: {
-      arrows: {
-        to: { enabled: true, scaleFactor: 1, type: "arrow" },
-      },
-      width: 2,
-      shadow: true,
-      color: {
-        color: "#0077B6",
-        highlight: "#E77D22",
-        hover: "#0077B6",
-        opacity: 0.7,
-      },
-      smooth: {
-        type: "dynamic", // might need to change to "continuous" when there are too many nodes
-        //type: "continuous",
-      },
-    },
-    physics: {
-      stabilization: false,
-      barnesHut: {
-        gravitationalConstant: -5000,
-        springConstant: 0.001,
-        springLength: 200,
-      },
-    },
-  };
+  var options = $_network.defaultOptions;
   var network = new vis.Network(container, data, options);
 
+  sleep(1000).then(() => {
+    $_network.fitToScreen(network);
+  });
+
   // Handle events
   network.on("hoverNode", function (params) {
     console.log("hoverNode Event:", params);
   });
+
   network.on("selectNode", function (params) {
     console.log("selectNode Event:", params);
     $(".collapse.peerInfo").collapse("hide");

From 2ed413d3264e4e779b88c46d6bd431d16b3dc704 Mon Sep 17 00:00:00 2001
From: Rafael Matias <rafael@skyle.net>
Date: Tue, 16 Jul 2024 17:22:12 +0200
Subject: [PATCH 2/5] put graph in an accordion so that we can collapse it if
 needed

---
 static/css/clients.css            |  1 +
 templates/clients/clients_cl.html | 17 +++++++++++++++--
 templates/clients/clients_el.html | 17 +++++++++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/static/css/clients.css b/static/css/clients.css
index 56fba31..c8e16d4 100644
--- a/static/css/clients.css
+++ b/static/css/clients.css
@@ -54,6 +54,7 @@ Client peers table
 }
 
 .peer-nodemap-wrapper {
+  padding: 0;
   background: #4b79a1;
   background: -webkit-linear-gradient(
     to top,
diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
index fda9f83..dbef36f 100644
--- a/templates/clients/clients_cl.html
+++ b/templates/clients/clients_cl.html
@@ -9,8 +9,21 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Consensus clients<
         </ol>
       </nav>
     </div>
-    <div class="card mt-2 peer-nodemap-wrapper">
-      <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+    <div class="card mt-2">
+      <div class="accordion" id="network-accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button class="accordion-button btn-secondary" style="box-shadow: none;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              <i class="fa-solid fa-circle-nodes" style="margin-right:5px"></i> Client graph
+            </button>
+          </h2>
+          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#network-accordion">
+            <div class="accordion-body peer-nodemap-wrapper">
+              <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="card mt-2">
       <div class="card-body px-0 py-3">
diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
index fa19195..8862914 100644
--- a/templates/clients/clients_el.html
+++ b/templates/clients/clients_el.html
@@ -9,8 +9,21 @@ <h1 class="h4 mb-1 mb-md-0"><i class="fas fa-server mx-2"></i>Execution clients<
         </ol>
       </nav>
     </div>
-    <div class="card mt-2 peer-nodemap-wrapper">
-      <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+    <div class="card mt-2">
+      <div class="accordion" id="network-accordion">
+        <div class="accordion-item">
+          <h2 class="accordion-header">
+            <button class="accordion-button btn-secondary" style="box-shadow: none;" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+              <i class="fa-solid fa-circle-nodes" style="margin-right:5px"></i> Client graph
+            </button>
+          </h2>
+          <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#network-accordion">
+            <div class="accordion-body peer-nodemap-wrapper">
+              <div class="card-body px-0 peer-nodemap" id="nodemap"></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div class="card mt-2">
       <div class="card-body px-0 py-3">

From db3bfcd81f8f7356a89062d21eb760b7bb6304af Mon Sep 17 00:00:00 2001
From: Rafael Matias <rafael@skyle.net>
Date: Tue, 16 Jul 2024 21:10:14 +0200
Subject: [PATCH 3/5] make graph more mobile friendly

---
 static/css/clients.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/static/css/clients.css b/static/css/clients.css
index c8e16d4..deda005 100644
--- a/static/css/clients.css
+++ b/static/css/clients.css
@@ -53,6 +53,12 @@ Client peers table
   padding: 0;
 }
 
+@media only screen and (max-width: 768px) {
+  .peer-nodemap {
+    height: 50vh;
+  }
+}
+
 .peer-nodemap-wrapper {
   padding: 0;
   background: #4b79a1;

From bf076fc10b11455efb12b516e86c7a527b1597de Mon Sep 17 00:00:00 2001
From: Rafael Matias <rafael@skyle.net>
Date: Tue, 16 Jul 2024 21:29:01 +0200
Subject: [PATCH 4/5] fix column overflow when client names are big

---
 static/js/vis-network-aux.js      | 3 +++
 templates/clients/clients_cl.html | 2 +-
 templates/clients/clients_el.html | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/static/js/vis-network-aux.js b/static/js/vis-network-aux.js
index b1c2b73..d47b29b 100644
--- a/static/js/vis-network-aux.js
+++ b/static/js/vis-network-aux.js
@@ -77,6 +77,9 @@ $_network.defaultOptions = {
     },
   },
   nodes: {
+    shapeProperties: {
+      interpolation: false    // 'true' for intensive zooming
+    },
     shape: "dot",
     size: 30,
     font: {
diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
index dbef36f..66d8cec 100644
--- a/templates/clients/clients_cl.html
+++ b/templates/clients/clients_cl.html
@@ -51,7 +51,7 @@ <h2 class="accordion-header">
                 {{ range $i, $client := .Clients }}
                   <tr>
                     <td>{{ $client.Index }}</td>
-                    <td style="max-width: 270px;">
+                    <td>
                       <img src="/identicon?key={{ $client.PeerID }}"
                         alt="{{ $client.PeerID }}"
                         class="client-node-icon"/>
diff --git a/templates/clients/clients_el.html b/templates/clients/clients_el.html
index 8862914..c58ab60 100644
--- a/templates/clients/clients_el.html
+++ b/templates/clients/clients_el.html
@@ -51,7 +51,7 @@ <h2 class="accordion-header">
                 {{ range $i, $client := .Clients }}
                   <tr>
                     <td>{{ $client.Index }}</td>
-                    <td style="max-width: 270px;">
+                    <td>
                       <img src="/identicon?key={{ $client.PeerID }}"
                         alt="{{ $client.PeerID }}"
                         class="client-node-icon"/>

From aa31bf4576044a3276f7905c3e24921643f8224b Mon Sep 17 00:00:00 2001
From: Rafael Matias <rafael@skyle.net>
Date: Wed, 17 Jul 2024 10:14:17 +0200
Subject: [PATCH 5/5] fix typo

---
 .hack/devnet/run.sh | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/.hack/devnet/run.sh b/.hack/devnet/run.sh
index 2a69e71..bd2adee 100755
--- a/.hack/devnet/run.sh
+++ b/.hack/devnet/run.sh
@@ -6,7 +6,10 @@ ENCLAVE_NAME="${ENCLAVE_NAME:-dora}"
 if kurtosis enclave inspect "$ENCLAVE_NAME" > /dev/null; then
   echo "Kurtosis enclave '$ENCLAVE_NAME' is already up."
 else
-  kurtosis run github.com/ethpandaops/ethereum-package --enclave "$ENCLAVE_NAME" --args-file "${__dir}/kurtosis.devnet.config.yaml"
+  kurtosis run github.com/ethpandaops/ethereum-package \
+  --image-download always \
+  --enclave "$ENCLAVE_NAME" \
+  --args-file "${__dir}/kurtosis.devnet.config.yaml"
 fi
 
 # Get chain config
@@ -15,7 +18,7 @@ kurtosis files inspect "$ENCLAVE_NAME" el_cl_genesis_data ./config.yaml | tail -
 ## Generate Dora config
 ENCLAVE_UUID=$(kurtosis enclave inspect "$ENCLAVE_NAME" --full-uuids | grep 'UUID:' | awk '{print $2}')
 
-BEACON_NODDES=$(docker ps -aq -f "label=enclave_uuid=$ENCLAVE_UUID" \
+BEACON_NODES=$(docker ps -aq -f "label=enclave_uuid=$ENCLAVE_UUID" \
               -f "label=com.kurtosistech.app-id=kurtosis" \
               -f "label=com.kurtosistech.custom.ethereum-package.client-type=beacon" | tac)
 
@@ -45,7 +48,7 @@ beaconapi:
   redisCacheAddr: ""
   redisCachePrefix: ""
   endpoints:
-$(docker inspect -f "    - { name: {{ with index .Config.Labels \"com.kurtosistech.id\"}}{{.}}{{end}}, url: http://{{ with index .NetworkSettings.Networks \"kt-$ENCLAVE_NAME\"}}{{.IPAddress }}:4000{{end}} }" $BEACON_NODDES)
+$(docker inspect -f "    - { name: {{ with index .Config.Labels \"com.kurtosistech.id\"}}{{.}}{{end}}, url: http://{{ with index .NetworkSettings.Networks \"kt-$ENCLAVE_NAME\"}}{{.IPAddress }}:4000{{end}} }" $BEACON_NODES)
 executionapi:
   depositLogBatchSize: 1000
   endpoints: