small performance improvements

ethpandaops · Sep 24, 2024 · 2cadefe · 2cadefe
1 parent cddeabe
commit 2cadefe
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/static/css/clients.css b/static/css/clients.css
@@ -139,11 +139,6 @@ Client peers table
   margin-top: -50px;
 }
 
-.dastablenode:hover {
-  cursor: pointer;
-  margin: 0 auto;
-}
-
 .dastablepeercount {
   font-weight:300;
   font-size: 0.6rem;
@@ -152,29 +147,29 @@ Client peers table
 }
 
 .dastablenode {
+  cursor: pointer;
   max-width: 25px;
   margin: 0 auto;
   border: 1px solid #cacaca;
-  -webkit-transition: opacity 0.5s ease;
-  -moz-transition: opacity 0.5s ease;
-  -o-transition: opacity 0.5s ease;
-  transition: opacity 0.5s ease;
-  margin-top: 1px;
-  margin-bottom: 1px;
+  -webkit-transition: opacity 0.3s ease;
+  -moz-transition: opacity 0.3s ease;
+  -o-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease;
   width: 17px;
   height: 17px;
+
+  border-radius: 0;
 }
 
 .dastablenode.internal {
-  border-color: #FFA500
+  border-color: #ffa500ab
 }
 
 .dastablenode.external {
   border-color: #075e4d
 }
 
 .dastablenode.supernode {
-  /*border-width: 1px;*/
   background-color: rgb(0 246 255 / 20%);
   border-radius: 0;
 }
@@ -183,10 +178,6 @@ Client peers table
   border-width: 1px !important;
 }
 
-.dastablenode:not(.supernode) {
-  margin-bottom: 2px;
-}
-
 .dastablenode.highlight {
   opacity: 1 !important;
   border: 1px solid yellow !important;

diff --git a/templates/clients/clients_cl.html b/templates/clients/clients_cl.html
@@ -3,7 +3,7 @@
 {{ $root := . }}
 
   <!-- Peer details modal -->
-  <div class="modal fade" id="peerDetailsModal" tabindex="-1" role="dialog" aria-labelledby="peerDetailsModalTitle" aria-hidden="true">
+  <div class="modal" id="peerDetailsModal" tabindex="-1" role="dialog" aria-labelledby="peerDetailsModalTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
       <div class="modal-content">
         <div class="modal-header">
@@ -95,7 +95,10 @@ <h2 class="accordion-header">
                     <input class="form-check-input" type="checkbox" role="switch" id="showSupernodePeersDAS" checked>
                     <label class="form-check-label" for="showSupernodePeersDAS">Supernode peers</label>
                   </div>
-                  <input style="margin-top:10px" class="form-control" list="datalistOptions" id="searchDASTablePeers" placeholder="Type to search...">
+                  <div class="input-group" style="margin-top:10px;">
+                    <input class="form-control" list="datalistOptions" id="searchDASTablePeers" placeholder="Type to search...">
+                    <button class="btn btn-outline-secondary" type="button" id="clearSearchButton">Clear</button>
+                  </div>
                   <datalist id="datalistOptions">
                     {{ range $k, $p := $root.Nodes }}
                       <option value="{{ $p.PeerID }}">
@@ -209,7 +212,10 @@ <h5 class="modal-title" id="peerDasWarningsModal">👀 PeerDAS: Some problems we
                             <svg class="peer-table-icon dastablenode node-{{ $p }} {{ $peerData.Type}} {{ if $peerData.PeerDAS.IsSuperNode }}supernode{{end}}"
                                  data-jdenticon-value="{{ $p }}"
                                  data-peerid="{{ $p }}" data-alias="{{ $peerData.Alias }}"
-                                 data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ $peerData.Alias }}">
+                                 data-bs-toggle="tooltip"
+                                 data-bs-placement="top"
+                                 data-bs-title="{{ $peerData.Alias }}"
+                                 data-bs-animation=false>
                             </svg>
                           {{ end }}
                         {{ end }}
@@ -535,23 +541,27 @@ <h5 class="modal-title" id="peerDasWarningsModal">👀 PeerDAS: Some problems we
   });
 
   // PeerDASTable Hover
+  let hoverTimeout;
   $('.dastablenode').hover(
     function() {
-      const searchText = $('#searchDASTablePeers').val().trim().toLowerCase();
-
-      if (!searchText && lastClickedNode == null) {
-        const $target = $(this);
-        const selector = $target.attr('class').split(/\s+/).map(cls => '.' + cls).join('');
-        $(selector).addClass('highlight');
-        $('.dastablenode').addClass('blur');
-      }
+      hoverTimeout = setTimeout(() => {
+        const searchText = $('#searchDASTablePeers').val().trim().toLowerCase();
+
+        if (!searchText && lastClickedNode == null) {
+          const $target = $(this);
+          const selector = $target.attr('class').split(/\s+/).map(cls => cls!=""?'.' + cls:"").join('');
+          $(selector).addClass('highlight');
+          $('.dastablenode').addClass('blur');
+        }
+      }, 500); //500ms delay before highlighting
     },
     function() {
+      clearTimeout(hoverTimeout); // Clear the timeout if the mouse leaves before 2 seconds
       const searchText = $('#searchDASTablePeers').val().trim().toLowerCase();
 
       if (!searchText && lastClickedNode == null) {
         const $target = $(this);
-        const selector = $target.attr('class').split(/\s+/).map(cls => '.' + cls).join('');
+        const selector = $target.attr('class').split(/\s+/).map(cls => cls!=""?'.' + cls:"").join('');
         $(selector).removeClass('highlight');
         $('.dastablenode').removeClass('blur');
       }
@@ -585,8 +595,8 @@ <h5 class="modal-title" id="peerDasWarningsModal">👀 PeerDAS: Some problems we
     // Store the clicked node
     lastClickedNode = selector;
 
-    // Remove searchtext
-    $('#searchDASTablePeers').val('');
+    // Add node to searchtext
+    $('#searchDASTablePeers').val(nodes[peerID].alias).trigger("input");
 
   });
 
@@ -620,6 +630,11 @@ <h5 class="modal-title" id="peerDasWarningsModal">👀 PeerDAS: Some problems we
     }
   });
 
+  // Clear search input
+  $('#clearSearchButton').click(function(){
+    $('#searchDASTablePeers').val(''); // Clear the input
+  });
+
 </script>
 {{ end }}
 {{ define "css" }}