Add a command shortcut for analyzing binary size to benchmark detail

Author: Kobzol

site/frontend/src/pages/compare/compile/table/benchmark-detail.vue

@@ -23,6 +23,7 @@ import {
 import CompileSectionsChart from "./sections-chart.vue";
 import PerfettoLink from "../../../../components/perfetto-link.vue";
 import ProfileShortcut from "./shortcuts/profile-shortcut.vue";
+import BinarySizeShortcut from "./shortcuts/binary-size-shortcut.vue";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -32,6 +33,8 @@ const props = defineProps<{
   benchmarkMap: CompileBenchmarkMap;
 }>();
 
+const BINARY_SIZE_METRIC: string = "size:linked_artifact";
+
 type GraphRange = {
   start: string;
   end: string;
@@ -348,17 +351,17 @@ onMounted(() => {
             <PerfettoLink
               :artifact="props.baseArtifact"
               :test-case="props.testCase"
-              >query trace</PerfettoLink
-            >
+              >query trace
+            </PerfettoLink>
           </li>
           <li>
             After:
             <a :href="detailedQueryLink(props.artifact)" target="_blank"
               >self-profile</a
             >,
             <PerfettoLink :artifact="props.artifact" :test-case="props.testCase"
-              >query trace</PerfettoLink
-            >
+              >query trace
+            </PerfettoLink>
           </li>
           <li>
             <a
@@ -431,7 +434,16 @@ onMounted(() => {
       </div>
     </div>
     <div class="shortcut">
+      <template v-if="props.metric === BINARY_SIZE_METRIC">
+        <BinarySizeShortcut
+          v-if="testCase.profile === 'debug' || testCase.profile === 'opt'"
+          :artifact="props.artifact"
+          :base-artifact="props.baseArtifact"
+          :test-case="props.testCase"
+        />
+      </template>
       <ProfileShortcut
+        v-else
         :artifact="props.artifact"
         :base-artifact="props.baseArtifact"
         :test-case="props.testCase"
@@ -455,9 +467,11 @@ onMounted(() => {
     flex-wrap: nowrap;
   }
 }
+
 .graphs {
   margin-top: 15px;
 }
+
 .rows {
   display: flex;
   flex-direction: column;
@@ -467,6 +481,7 @@ onMounted(() => {
     align-items: center;
   }
 }
+
 .shortcut {
   margin-top: 15px;
   text-align: left;

site/frontend/src/pages/compare/compile/table/shortcuts/binary-size-shortcut.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+/**
+ * This component displays a rustc-perf command for analyzing binary size diff between the baseline
+ * and the new commit.
+ **/
+
+import {CompileTestCase} from "../../common";
+import {ArtifactDescription} from "../../../types";
+import Tooltip from "../../../tooltip.vue";
+import {normalizeProfile} from "./utils";
+
+const props = defineProps<{
+  artifact: ArtifactDescription;
+  baseArtifact: ArtifactDescription;
+  testCase: CompileTestCase;
+}>();
+
+function normalizeBackend(backend: string): string {
+  if (backend === "llvm") {
+    return "Llvm";
+  } else if (backend == "cranelift") {
+    return "Cranelift";
+  }
+  return "<invalid backend>";
+}
+</script>
+
+<template>
+  <div class="title">
+    Command for analyzing binary size locally
+    <Tooltip>
+      Execute this command in a checkout of
+      <a href="https://github.com/rust-lang/rustc-perf">rustc-perf</a>, after a
+      `cargo build --release`, to compare binary sizes.
+    </Tooltip>
+  </div>
+
+  <pre><code>./target/release/collector binary_stats \
+    +{{ props.baseArtifact.commit }} \
+    --rustc2 +{{ props.artifact.commit }} \
+    --include {{ testCase.benchmark }} \
+    --profile {{ normalizeProfile(testCase.profile) }} \
+    --backend {{ normalizeBackend(testCase.backend) }}</code></pre>
+</template>
+
+<style scoped lang="scss">
+.title {
+  font-weight: bold;
+}
+
+pre {
+  background-color: #eeeeee;
+}
+
+code {
+  user-select: all;
+}
+</style>

site/frontend/src/pages/compare/compile/table/shortcuts/cachegrind-cmd.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 /**
  * This component displays a rustc-perf command for profiling a compile benchmark with Cachegrind.
- * */
-import {CompileTestCase, Profile} from "../../common";
+ **/
+
+import {CompileTestCase} from "../../common";
 import {computed} from "vue";
+import {normalizeProfile} from "./utils";
 
 const props = defineProps<{
   commit: string;
@@ -19,18 +21,6 @@ const firstCommit = computed(() => {
   }
 });
 
-function normalizeProfile(profile: Profile): string {
-  if (profile === "opt") {
-    return "Opt";
-  } else if (profile === "debug") {
-    return "Debug";
-  } else if (profile === "check") {
-    return "Check";
-  } else if (profile === "doc") {
-    return "Doc";
-  }
-  return "<invalid profile>";
-}
 function normalizeScenario(scenario: string): string {
   if (scenario === "full") {
     return "Full";
@@ -58,6 +48,7 @@ function normalizeScenario(scenario: string): string {
 pre {
   background-color: #eeeeee;
 }
+
 code {
   user-select: all;
 }

site/frontend/src/pages/compare/compile/table/shortcuts/profile-shortcut.vue

@@ -1,4 +1,11 @@
 <script setup lang="ts">
+/**
+ * This component displays a select box that allows users to choose between three variants
+ * of the `CachegrindCmd` component with a local `rustc-perf` profiling command.
+ * Users can choose either to profile the baseline commit, the new commit, or to profile both
+ * and display a diff.
+ **/
+
 import {computed, ref, Ref} from "vue";
 import {CompileTestCase} from "../../common";
 import {ArtifactDescription} from "../../../types";

site/frontend/src/pages/compare/compile/table/shortcuts/utils.ts

@@ -0,0 +1,15 @@
+import {Profile} from "../../common";
+
+// Normalize profile from a test case to a CLI value for collector.
+export function normalizeProfile(profile: Profile): string {
+  if (profile === "opt") {
+    return "Opt";
+  } else if (profile === "debug") {
+    return "Debug";
+  } else if (profile === "check") {
+    return "Check";
+  } else if (profile === "doc") {
+    return "Doc";
+  }
+  return "<invalid profile>";
+}