Move benchmark extended information to benchmark detail

Author: Kobzol

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>

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>