Simplify implementation by using CSS

This simplifies the implementation by using the nth-child pseudo class. This way, we do not need to loop over rows.

It also removes unused CSS classes and changes the code style to fit more with the existing code.
 - CSS classes use “kebab-case”.
 - use JQuery to match existing code
 - remove the .showMore which was already unsued

Signed-off-by: Stefan Marr <git@stefan-marr.de>

resources/style.css

@@ -543,44 +543,19 @@ td.warmup-plot {
   min-width: 250px;
 }
 
-.hidden {
-  display: none;
-}
-
-.showMore {
-  background-color: #007bff; 
-  color: #fff; 
-  border: none; 
-  padding: 10px 20px; 
-  font-size: 16px;
-  font-weight: bold;
-  border-radius: 5px; 
-  cursor: pointer; 
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.showMore:hover {
-  background-color: #0056b3;
-  color: #e0e0e0;
-}
-
-.showMore:focus {
-  outline: none;
-  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-}
-
-.hidden {
-  display: none;
-}
-.collapsible {
+/* Make "Changes in Benchmark Set" Table Expandable */
+.table-expander td {
   cursor: pointer;
   user-select: none;
-  color: #007bff;
-  text-decoration: underline;
+  text-align: center;
 }
-.collapsible:after {
+.table-expander a:after {
   content: ' ▼';
 }
-.collapsible.active:after {
+.table-expander.active a:after {
   content: ' ▲';
-}
+}
+
+table#benchmark-set-change tbody.hide-most-rows tr.benchmark-row:nth-child(n+4) {
+  display: none;
+}

src/backend/compare/html/index.html

@@ -104,7 +104,7 @@ <h2>Version Details</h2>
 
 {% if (it.notInBoth) { %}
 <h3>Changes in Benchmark Set</h3>
-<table class="table table-sm" id="benchmarkTable">
+<table class="table table-sm" id="benchmark-set-change">
 <thead>
 <tr>
   <th scope="col">Commit</th>
@@ -117,7 +117,7 @@ <h3>Changes in Benchmark Set</h3>
   <th scope="col">Extra Arguments</th>
 </tr>
 </thead>
-<tbody id="benchmarkTableBody">
+<tbody class="hide-most-rows">
 {% for (const m of it.stats.acrossVersions.missing) { %}
   <tr class="benchmark-row">
     <td>{%= m.commitId.substring(0, 6) %}</td>
@@ -130,9 +130,9 @@ <h3>Changes in Benchmark Set</h3>
     <td>{%= m.ea %}</td>
   </tr>
 {% } %}
+  <tr class="table-expander"><td colspan="8"><a href>show more</a></td></tr>
 </tbody>
 </table>
-<p class="collapsible">Show More</p>
 {% } %}
 
 {%- include('compare-versions.html', {...it.stats, config: it.config}) %}

src/frontend/compare.ts

@@ -237,45 +237,18 @@ $(() => {
   $('.btn-warmup').on('click', insertWarmupPlot);
   $('.btn-profile').on('click', insertProfiles);
   $('.btn-timeline').on('click', insertTimeline);
-  $('.showMore').on('click', showAllResults);
 
-  $('.collapsible').click(function () {
-    $('.benchmark-row.hidden').toggleClass('hidden');
+  $('.table-expander').on('click', function (event) {
+    event.preventDefault();
+
+    $('table#benchmark-set-change tbody').toggleClass('hide-most-rows');
 
     $(this).toggleClass('active');
 
     const isActivated = $(this).hasClass('active');
-    $(this).text(isActivated ? 'Show Less' : 'Show More');
-
-    const table = document.getElementById('benchmarkTable');
-    const rows = table?.querySelectorAll('tr.benchmark-row');
-    const maxRows = 3;
-    let i = 0;
-    rows?.forEach((row) => {
-      const tableRow = row as HTMLTableRowElement;
-      if (isActivated || i < maxRows) {
-        tableRow.style.display = 'table-row';
-      } else {
-        tableRow.style.display = 'none';
-        window.scrollTo(0, 0);
-      }
-      i++;
-    });
-  });
-
-  const table = document.getElementById('benchmarkTable');
-  const rows = table?.querySelectorAll('tr.benchmark-row');
-  const maxRows = 3;
-  let i = 0;
-
-  rows?.forEach((row) => {
-    const tableRow = row as HTMLTableRowElement;
-    if (i < maxRows) {
-      tableRow.style.display = 'table-row';
-    } else {
-      tableRow.style.display = 'none';
-    }
-    i++;
+    $(this)
+      .find('a')
+      .text(isActivated ? 'show less' : 'show more');
   });
 
   const headlinesForTablesWithWarmupPlots = $('table:has(button.btn-warmup)')
@@ -298,19 +271,3 @@ $(() => {
 
   initializeFilters('.benchmark-details tbody th:nth-child(1)');
 });
-
-function showAllResults(event): void {
-  event.preventDefault();
-
-  const rows = document.querySelectorAll<HTMLTableRowElement>(
-    '#benchmarkTableBody .benchmark-row'
-  );
-  rows.forEach((row) => {
-    row.style.display = 'table-row';
-  });
-
-  const showMoreButton = document.getElementById('showMore');
-  if (showMoreButton) {
-    showMoreButton.style.display = 'none';
-  }
-}