From c055b99513c293d7bf3d5e20f51640228493c91b Mon Sep 17 00:00:00 2001
From: Stefan Marr <git@stefan-marr.de>
Date: Thu, 11 Jul 2024 17:15:18 +0100
Subject: [PATCH] Simplify implementation by using CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                 | 45 +++++------------------
 src/backend/compare/html/index.html |  6 +--
 src/frontend/compare.ts             | 57 ++++-------------------------
 3 files changed, 20 insertions(+), 88 deletions(-)

diff --git a/resources/style.css b/resources/style.css
index 6fea3b8b..9c0f0340 100644
--- a/resources/style.css
+++ b/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: ' ▲';
-}
\ No newline at end of file
+}
+
+table#benchmark-set-change tbody.hide-most-rows tr.benchmark-row:nth-child(n+4) {
+  display: none;
+}
diff --git a/src/backend/compare/html/index.html b/src/backend/compare/html/index.html
index 3aab75fe..afced06f 100644
--- a/src/backend/compare/html/index.html
+++ b/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}) %}
diff --git a/src/frontend/compare.ts b/src/frontend/compare.ts
index e9896c82..50faa239 100644
--- a/src/frontend/compare.ts
+++ b/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';
-  }
-}