Show benchmark detail on comparison table row click

Author: Kobzol

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>

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>

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}`;
+}