Implement #206: Add "Show More" for Table with Changes in Benchmark S…

…et in Compare View (#208)

.gitignore

@@ -27,3 +27,7 @@ test.html
 /tests/data/expected-results/stats-data-prep/tsom/inline-[0-9][0-9].svg
 /tests/data/expected-results/stats-data-prep/tsom/inline-1[0-9][0-9].svg
 /tests/data/expected-results/stats-data-prep/tsom/inline-exe-*.svg
+
+# ignore developer-specific helper scripts
+/*.sh
+

resources/style.css

@@ -542,3 +542,20 @@ td.warmup-plot {
   z-index: 100;
   min-width: 250px;
 }
+
+/* Make "Changes in Benchmark Set" Table Expandable */
+.table-expander td {
+  cursor: pointer;
+  user-select: none;
+  text-align: center;
+}
+.table-expander a:after {
+  content: ' ▼';
+}
+.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">
+<table class="table table-sm" id="benchmark-set-change">
 <thead>
 <tr>
   <th scope="col">Commit</th>
@@ -117,9 +117,9 @@ <h3>Changes in Benchmark Set</h3>
   <th scope="col">Extra Arguments</th>
 </tr>
 </thead>
-<tbody>
+<tbody class="hide-most-rows">
 {% for (const m of it.stats.acrossVersions.missing) { %}
-  <tr>
+  <tr class="benchmark-row">
     <td>{%= m.commitId.substring(0, 6) %}</td>
     <td>{%= m.e %}</td>
     <td>{%= m.s %}</td>
@@ -130,6 +130,7 @@ <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>
 {% } %}

src/frontend/compare.ts

@@ -238,6 +238,19 @@ $(() => {
   $('.btn-profile').on('click', insertProfiles);
   $('.btn-timeline').on('click', insertTimeline);
 
+  $('.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)
+      .find('a')
+      .text(isActivated ? 'show less' : 'show more');
+  });
+
   const headlinesForTablesWithWarmupPlots = $('table:has(button.btn-warmup)')
     .prev()
     .prev();