From 2e60f9b254bb9543e20cfde8e66100e9dcf4ed3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 09:45:17 +0200
Subject: [PATCH 1/4] Move compile comparison table to a separate directory

---
 site/frontend/src/pages/compare/compile/benchmarks.vue |  2 +-
 .../compare/compile/{ => table}/comparisons-table.vue  | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)
 rename site/frontend/src/pages/compare/compile/{ => table}/comparisons-table.vue (97%)

diff --git a/site/frontend/src/pages/compare/compile/benchmarks.vue b/site/frontend/src/pages/compare/compile/benchmarks.vue
index 1413535df..fdc4e6dab 100644
--- a/site/frontend/src/pages/compare/compile/benchmarks.vue
+++ b/site/frontend/src/pages/compare/compile/benchmarks.vue
@@ -1,6 +1,6 @@
 <script setup lang="tsx">
 import {computed, h} from "vue";
-import ComparisonsTable from "./comparisons-table.vue";
+import ComparisonsTable from "./table/comparisons-table.vue";
 import {TestCaseComparison} from "../data";
 import {CompareResponse} from "../types";
 import {
diff --git a/site/frontend/src/pages/compare/compile/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
similarity index 97%
rename from site/frontend/src/pages/compare/compile/comparisons-table.vue
rename to site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index 0130b77da..943922e5c 100644
--- a/site/frontend/src/pages/compare/compile/comparisons-table.vue
+++ b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import {TestCaseComparison} from "../data";
-import Tooltip from "../tooltip.vue";
-import {ArtifactDescription} from "../types";
-import {percentClass} from "../shared";
-import {CompileBenchmarkMap, CompileTestCase} from "./common";
+import {TestCaseComparison} from "../../data";
+import Tooltip from "../../tooltip.vue";
+import {ArtifactDescription} from "../../types";
+import {percentClass} from "../../shared";
+import {CompileBenchmarkMap, CompileTestCase} from "../common";
 import {computed} from "vue";
 
 const props = defineProps<{

From 549e2983ae5fa970af50bab79ae1290c62eb8bf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 09:48:54 +0200
Subject: [PATCH 2/4] Show benchmark detail on comparison table row click

---
 .../compile/table/benchmark-detail.vue        | 10 ++++++++
 .../compile/table/comparisons-table.vue       | 19 ++++++++++++++
 .../pages/compare/compile/table/expansion.ts  | 25 +++++++++++++++++++
 3 files changed, 54 insertions(+)
 create mode 100644 site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
 create mode 100644 site/frontend/src/pages/compare/compile/table/expansion.ts

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
new file mode 100644
index 000000000..931ba4cc0
--- /dev/null
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import {CompileTestCase} from "../common";
+
+const props = defineProps<{
+  testCase: CompileTestCase;
+}>();
+</script>
+<template>
+  <div>Benchmark detail</div>
+</template>
diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index 943922e5c..a9fb73ea2 100644
--- a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
+++ b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -5,6 +5,8 @@ import {ArtifactDescription} from "../../types";
 import {percentClass} from "../../shared";
 import {CompileBenchmarkMap, CompileTestCase} from "../common";
 import {computed} from "vue";
+import {useExpandedStore} from "./expansion";
+import BenchmarkDetail from "./benchmark-detail.vue";
 
 const props = defineProps<{
   id: string;
@@ -94,6 +96,13 @@ Category: ${metadata.category}
   return tooltip;
 }
 
+const columnCount = computed(() => {
+  const base = 7;
+  if (props.showRawData) {
+    return base + 2;
+  }
+  return base;
+});
 const unit = computed(() => {
   // The DB stored wall-time data in seconds for compile benchmarks, so it is
   // hardcoded here
@@ -103,6 +112,7 @@ const unit = computed(() => {
     return null;
   }
 });
+const {toggleExpanded, isExpanded} = useExpandedStore();
 </script>
 
 <template>
@@ -114,6 +124,7 @@ const unit = computed(() => {
     <table v-else class="benches compare">
       <thead>
         <tr>
+          <th></th>
           <th>Benchmark</th>
           <th>Profile</th>
           <th>Scenario</th>
@@ -147,6 +158,9 @@ const unit = computed(() => {
       <tbody>
         <template v-for="comparison in comparisons">
           <tr>
+            <td @click="toggleExpanded(comparison.testCase)">
+              {{ isExpanded(comparison.testCase) ? "▼" : "▶" }}
+            </td>
             <td :title="generateBenchmarkTooltip(comparison.testCase)">
               <a
                 v-bind:href="benchmarkLink(comparison.testCase.benchmark)"
@@ -218,6 +232,11 @@ const unit = computed(() => {
               </a>
             </td>
           </tr>
+          <tr v-if="isExpanded(comparison.testCase)">
+            <td :colspan="columnCount">
+              <BenchmarkDetail :test-case="comparison.testCase" />
+            </td>
+          </tr>
         </template>
       </tbody>
     </table>
diff --git a/site/frontend/src/pages/compare/compile/table/expansion.ts b/site/frontend/src/pages/compare/compile/table/expansion.ts
new file mode 100644
index 000000000..a8907b275
--- /dev/null
+++ b/site/frontend/src/pages/compare/compile/table/expansion.ts
@@ -0,0 +1,25 @@
+import {ref} from "vue";
+import {CompileTestCase} from "../common";
+
+export function useExpandedStore() {
+  const expanded = ref(new Set());
+
+  function isExpanded(testCase: CompileTestCase) {
+    return expanded.value.has(testCaseKey(testCase));
+  }
+
+  function toggleExpanded(testCase: CompileTestCase) {
+    const key = testCaseKey(testCase);
+    if (isExpanded(testCase)) {
+      expanded.value.delete(key);
+    } else {
+      expanded.value.add(key);
+    }
+  }
+
+  return {toggleExpanded, isExpanded};
+}
+
+function testCaseKey(testCase: CompileTestCase): string {
+  return `${testCase.benchmark};${testCase.profile};${testCase.scenario};${testCase.category}`;
+}

From 463a8861036ec8e02b3626a6aec18000c99f0bcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:04:33 +0200
Subject: [PATCH 3/4] Move benchmark extended information to benchmark detail

---
 .../compile/table/benchmark-detail.vue        | 85 ++++++++++++++++++-
 .../compile/table/comparisons-table.vue       | 41 ++-------
 2 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index 931ba4cc0..b3539f36d 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -1,10 +1,91 @@
 <script setup lang="ts">
-import {CompileTestCase} from "../common";
+import {
+  CargoProfileMetadata,
+  CompileBenchmarkMap,
+  CompileBenchmarkMetadata,
+  CompileTestCase,
+} from "../common";
+import {computed} from "vue";
+import Tooltip from "../../tooltip.vue";
 
 const props = defineProps<{
   testCase: CompileTestCase;
+  benchmarkMap: CompileBenchmarkMap;
 }>();
+const metadata = computed(
+  (): CompileBenchmarkMetadata =>
+    props.benchmarkMap[props.testCase.benchmark] ?? null
+);
+const cargoProfile = computed((): CargoProfileMetadata => {
+  if (
+    props.testCase.profile === "opt" &&
+    metadata?.value.release_profile !== null
+  ) {
+    return metadata.value.release_profile;
+  } else if (
+    props.testCase.profile === "debug" &&
+    metadata?.value.dev_profile !== null
+  ) {
+    return metadata?.value.dev_profile;
+  }
+});
 </script>
 <template>
-  <div>Benchmark detail</div>
+  <table>
+    <tbody>
+      <tr>
+        <td>Benchmark</td>
+        <td>{{ testCase.benchmark }}</td>
+      </tr>
+      <tr>
+        <td>Profile</td>
+        <td>{{ testCase.profile }}</td>
+      </tr>
+      <tr>
+        <td>Scenario</td>
+        <td>{{ testCase.scenario }}</td>
+      </tr>
+      <tr>
+        <td>Category</td>
+        <td>{{ testCase.category }}</td>
+      </tr>
+      <tr v-if="(metadata?.binary ?? null) !== null">
+        <td>Artifact</td>
+        <td>{{ metadata.binary ? "binary" : "library" }}</td>
+      </tr>
+      <tr v-if="(metadata?.iterations ?? null) !== null">
+        <td>
+          Iterations<Tooltip>
+            How many times is the benchmark executed?
+          </Tooltip>
+        </td>
+        <td>{{ metadata.iterations }}</td>
+      </tr>
+      <tr v-if="(cargoProfile?.lto ?? null) !== null">
+        <td>LTO</td>
+        <td>{{ cargoProfile.lto }}</td>
+      </tr>
+      <tr v-if="(cargoProfile?.debug ?? null) !== null">
+        <td>Debuginfo</td>
+        <td>{{ cargoProfile.debug }}</td>
+      </tr>
+      <tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
+        <td>Codegen units</td>
+        <td>{{ cargoProfile.codegen_units }}</td>
+      </tr>
+    </tbody>
+  </table>
 </template>
+
+<style scoped lang="scss">
+table {
+  td {
+    text-align: left;
+
+    &:first-child {
+      font-weight: bold;
+      padding-right: 10px;
+    }
+  }
+}
+</style>
diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index a9fb73ea2..1a10b1854 100644
--- a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
+++ b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -62,40 +62,6 @@ function prettifyRawNumber(number: number): string {
   return number.toLocaleString();
 }
 
-function generateBenchmarkTooltip(testCase: CompileTestCase): string {
-  const metadata = props.benchmarkMap[testCase.benchmark] ?? null;
-  if (metadata === null) {
-    return "<No metadata found>";
-  }
-  let tooltip = `Benchmark: ${testCase.benchmark}
-Category: ${metadata.category}
-`;
-  if (metadata.binary !== null) {
-    tooltip += `Artifact: ${metadata.binary ? "binary" : "library"}\n`;
-  }
-  if (metadata.iterations !== null) {
-    tooltip += `Iterations: ${metadata.iterations}\n`;
-  }
-  const addMetadata = ({lto, debug, codegen_units}) => {
-    if (lto !== null) {
-      tooltip += `LTO: ${lto}\n`;
-    }
-    if (debug !== null) {
-      tooltip += `Debuginfo: ${debug}\n`;
-    }
-    if (codegen_units !== null) {
-      tooltip += `Codegen units: ${codegen_units}\n`;
-    }
-  };
-  if (testCase.profile === "opt" && metadata.release_profile !== null) {
-    addMetadata(metadata.release_profile);
-  } else if (testCase.profile === "debug" && metadata.dev_profile !== null) {
-    addMetadata(metadata.dev_profile);
-  }
-
-  return tooltip;
-}
-
 const columnCount = computed(() => {
   const base = 7;
   if (props.showRawData) {
@@ -161,7 +127,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
             <td @click="toggleExpanded(comparison.testCase)">
               {{ isExpanded(comparison.testCase) ? "▼" : "▶" }}
             </td>
-            <td :title="generateBenchmarkTooltip(comparison.testCase)">
+            <td>
               <a
                 v-bind:href="benchmarkLink(comparison.testCase.benchmark)"
                 class="silent-link"
@@ -234,7 +200,10 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
           </tr>
           <tr v-if="isExpanded(comparison.testCase)">
             <td :colspan="columnCount">
-              <BenchmarkDetail :test-case="comparison.testCase" />
+              <BenchmarkDetail
+                :test-case="comparison.testCase"
+                :benchmark-map="benchmarkMap"
+              />
             </td>
           </tr>
         </template>

From 7a0469bde9c2714624a3d95975d64bdd10f0fc96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:22:41 +0200
Subject: [PATCH 4/4] Change layout of comparison table

Remove fixed layout hacks and improve the layout w.r.t. the new expansion icon.
---
 .../compile/table/comparisons-table.vue       | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index 1a10b1854..980dbb771 100644
--- a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
+++ b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -90,12 +90,12 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
     <table v-else class="benches compare">
       <thead>
         <tr>
-          <th></th>
+          <th class="toggle"></th>
           <th>Benchmark</th>
           <th>Profile</th>
           <th>Scenario</th>
           <th>% Change</th>
-          <th>
+          <th class="narrow">
             Significance Threshold
             <Tooltip>
               The minimum % change that is considered significant. The higher
@@ -109,7 +109,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
               how the significance threshold is calculated.
             </Tooltip>
           </th>
-          <th>
+          <th class="narrow">
             Significance Factor
             <Tooltip>
               How much a particular result is over the significance threshold. A
@@ -124,7 +124,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
       <tbody>
         <template v-for="comparison in comparisons">
           <tr>
-            <td @click="toggleExpanded(comparison.testCase)">
+            <td @click="toggleExpanded(comparison.testCase)" class="toggle">
               {{ isExpanded(comparison.testCase) ? "▼" : "▶" }}
             </td>
             <td>
@@ -161,7 +161,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
                 </div>
               </div>
             </td>
-            <td>
+            <td class="narrow">
               <div class="numeric-aligned">
                 <div>
                   {{
@@ -172,7 +172,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
                 </div>
               </div>
             </td>
-            <td>
+            <td class="narrow">
               <div class="numeric-aligned">
                 <div>
                   {{
@@ -214,8 +214,9 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
 
 <style scoped lang="scss">
 .benches {
+  width: 100%;
+  table-layout: auto;
   font-size: medium;
-  table-layout: fixed;
 
   td,
   th {
@@ -237,15 +238,22 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
   border-right: dotted 1px;
 }
 
-.benches th {
-  text-align: center;
-  min-width: 50px;
+.benches {
+  td,
+  th {
+    text-align: center;
+
+    &.toggle {
+      padding-right: 5px;
+      cursor: pointer;
+    }
+    &.narrow {
+      max-width: 100px;
+    }
+  }
 }
 
 .benches td {
-  text-align: center;
-  width: 25%;
-
   & > .numeric-aligned {
     display: flex;
     flex-direction: column;