Sticky effects with top row and first three columns on the left while…

… scrolling. (#590) Hi. I restructured the code to make sure the top row and left three columns be sticky while scrolling in x, y direction.
ShishirPatil · Aug 27, 2024 · 9035ac7 · 9035ac7
1 parent 83ab06d
commit 9035ac7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 22 deletions.
diff --git a/assets/css/leaderboard-form.css b/assets/css/leaderboard-form.css
@@ -0,0 +1,5 @@
+th, td { white-space: nowrap; }
+div.dataTables_wrapper {
+    width: 800px;
+    margin: 0 auto;
+}
diff --git a/assets/css/leaderboard.css b/assets/css/leaderboard.css
@@ -1,22 +1,14 @@
 #leaderboard {
     width: 100%;
-    border-collapse: collapse;
+    /* border-collapse: separate; */
 }
 
-#leaderboard th,
-#leaderboard td {
-    border: 1px solid #ddd;
-    padding: 8px;
-    text-align: center;
-}
-
-
 /* Ensure the table uses the full width of its container */
 table {
     table-layout: auto;
-    border-collapse: collapse; 
+    border-collapse: separate; 
+    border-spacing: 0px;
     width: auto; /* Allows the table to expand naturally based on content */
-    border-collapse: collapse;
     table-layout: auto; /* Default layout for the table */
     align-items: center;
     justify-content: center;
@@ -29,7 +21,8 @@ table {
     overflow-wrap: break-word; /* Ensures wrapping at break points */
     padding: 8px; /* Adjust padding as needed */
     text-align: center; /* Keeps text centered, adjust as needed */
-    border: 1px solid #ddd; 
+    border-right: 1.25px solid #ddd;
+    border-bottom: 1.25px solid #ddd; 
 }
 
 
@@ -47,7 +40,7 @@ th:not(.detail-header)  {
     max-width: 100%; /* Ensure the container does not exceed the width of the parent */
     max-height: 600px; /* Set the maximum height of the table to 8 rows */
     display: block;
-    border: 1px solid #ddd; /* Optional: Adds a border for better visibility */
+    border: 1.5px solid #ddd; /* Optional: Adds a border for better visibility */
     align-items: center;
     justify-content: center;
 }
@@ -146,3 +139,74 @@ th:not(.detail-header)  {
     background-color: #000000; /* Darker shade of blue on hover */
     transform: scale(1.05); /* Slightly increase size on hover */
 }
+
+thead {
+    position: sticky;
+    top: 0;
+    background-color: #f1f8ff; /* Background for better visibility */
+    background-clip: border-box;
+    z-index: 100; /* Ensure the header stays above other content */
+    margin: 0;
+}
+
+#leaderboard thead th{
+    z-index: 100; /* Ensure the header stays above other content */
+    /* border-bottom: 1px solid black;  */
+    background-color: #f1f8ff; /* Background for better visibility */
+}
+
+.sticky-rank-col {
+    position: sticky;
+    left: 0;
+    z-index: 30;
+    background-color: #f1f8ff;
+}
+
+#leaderboard tbody td:first-child,
+#leaderboard thead .sticky-second-column:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 30;
+    background-color: #f1f8ff;
+}
+
+@media only screen and (min-width: 769px) {
+
+/* Sticky left columns */
+
+  #leaderboard  thead .sticky-top-column,
+  #leaderboard thead .sticky-second-column:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 30;
+    background-color: #f1f8ff;
+  }
+
+  #leaderboard tbody td:nth-child(2),
+  #leaderboard thead .sticky-second-column:nth-child(2) {
+    position: sticky;
+    left: 51px;
+    z-index: 29;
+  }
+
+  tbody td:nth-child(3),
+  #leaderboard thead .sticky-second-column:nth-child(3) {
+    position: sticky;
+    left: 115px;
+    z-index: 28;
+    background-color: #f1f8ff;
+  }
+
+    tbody tr:nth-child(1) td:nth-child(3) {
+    background-color: #fff176;
+    }
+
+    tbody tr:nth-child(2) td:nth-child(3) {
+    background-color: #fff59d;
+    }
+
+    tbody tr:nth-child(3) td:nth-child(3) {
+    background-color: #fff9c4;
+    }
+
+}
diff --git a/index_live.js b/index_live.js
@@ -793,7 +793,9 @@ function generateChart(csvData) {
 // });
 
 var expand = false;
+
 function toggleExpand() {
+
     // Select all detail-row and detail-header elements
     var elements = document.querySelectorAll(
         ".summary-row, .summary-small-header"

diff --git a/leaderboard.html b/leaderboard.html
@@ -107,7 +107,7 @@ <h2>BFCL Leaderboard</h2>
                 <table id="leaderboard-table">
                     <thead>
                         <tr>
-                            <th class="detail-header" colspan="3"></th>
+                            <th class="detail-header sticky-top-column" colspan="3"></th>
                             <th class="detail-header" colspan="1"></th>
                             <th class="detail-header" colspan="3">Latency (s)</th>
                             <th class="detail-header" colspan="4">
@@ -120,9 +120,9 @@ <h2>BFCL Leaderboard</h2>
                             <th class="detail-header" colspan="2"></th>
                         </tr>
                         <tr>
-                            <th id="rank-col">Rank</th>
-                            <th>Overall Acc</th>
-                            <th>Model</th>
+                            <th id="rank-col" class="sticky-second-column">Rank</th>
+                            <th class="sticky-second-column">Overall Acc</th>
+                            <th class="sticky-second-column">Model</th>
                             <th class="summary-small-header">Cost ($)</th>
                             <th class="summary-small-header">Average Latency (s)</th>
                             <th class="summary-small-header">AST Summary</th>
@@ -323,4 +323,4 @@ <h2>Citation</h2>
 <script src="index_main.js"></script>
 <script type="text/javascript" src="treemap_main.js"></script>
 
-</html>
+</html>
diff --git a/leaderboard_live.html b/leaderboard_live.html
@@ -107,7 +107,7 @@ <h2>BFCL Live Leaderboard</h2>
                 <table id="leaderboard-table">
                     <thead>
                         <tr>
-                            <th class="detail-header" colspan="3"></th>
+                            <th class="detail-header sticky-top-column" colspan="3"></th>
                             <th class="detail-header" colspan="1"></th>
                             <th class="detail-header" colspan="3">Latency (s)</th>
                             <th class="detail-header" colspan="4">
@@ -117,9 +117,9 @@ <h2>BFCL Live Leaderboard</h2>
                             <th class="detail-header" colspan="2"></th>
                         </tr>
                         <tr>
-                            <th id="rank-col">Rank</th>
-                            <th>Overall Acc</th>
-                            <th>Model</th>
+                            <th id="rank-col" class="sticky-second-column">Rank</th>
+                            <th class="sticky-second-column">Overall Acc</th>
+                            <th class="sticky-second-column">Model</th>
                             <th class="summary-small-header">Cost ($)</th>
                             <th class="summary-small-header">Average Latency (s)</th>
                             <th class="summary-small-header">AST Summary</th>