Merge pull request #205 from larseggert/hover-xy

Hover highlights rows and columns

web/index.html

@@ -77,10 +77,10 @@ <h3 class="mt-5">Results Filter</h3>
     </div>
 
     <h3 class="mt-5">Interop Status</h3>
-    <table id="interop" class="result table table-hover"></table>
+    <table id="interop" class="result table"></table>
 
     <h3 class="mt-5">Measurement Results</h3>
-    <table id="measurements" class="result table table-hover"></table>
+    <table id="measurements" class="result table"></table>
   </div>
 
   <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

web/script.js

@@ -34,6 +34,8 @@
   }
 
   function makeColumnHeaders(t, result) {
+    for(var i = 0; i < result.servers.length; i++)
+      t.appendChild(document.createElement("colgroup"));
     var thead = t.createTHead();
     var row = thead.insertRow(0);
     var cell = document.createElement("th");
@@ -236,6 +238,19 @@
       $("#test").append(tcases.map(e => makeButton("test", e[0], makeTooltip(e[1]))));
     }
     setButtonState();
+
+    $("table.result").delegate("td", "mouseover mouseleave", function(e) {
+        const t = $(this).closest("table.result");
+        if (e.type === "mouseover") {
+          $(this).parent().addClass("hover-xy");
+          t.children("colgroup").eq($(this).index()).addClass("hover-xy");
+          t.find("th").eq($(this).index()).addClass("hover-xy");
+        } else {
+          $(this).parent().removeClass("hover-xy");
+          t.children("colgroup").eq($(this).index()).removeClass("hover-xy");
+          t.find("th").eq($(this).index()).removeClass("hover-xy");
+        }
+    });
   }
 
   function load(dir) {

web/styles.css

@@ -18,3 +18,13 @@ body.loading .navbar-nav .end-time {
   background-color: yellow !important;
   color: black !important;
 }
+
+.hover-xy {
+  background-color: #ecf0f1;
+  color: #e74c3c;
+}
+
+tr.hover-xy > th, th.hover-xy {
+  background-color: #cfd9db;
+  color: #e74c3c;
+}