Merge pull request #1773 from Kobzol/binary-size-cmd-shortcut

Add binary size local command shortcut to benchmark detail

Author: Kobzol

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

@@ -12,7 +12,6 @@ import {daysBetweenDates, getFutureDate, getPastDate} from "./utils";
 import {GraphRenderOpts, renderPlots} from "../../../../graph/render";
 import {GraphData, GraphKind, GraphsSelector} from "../../../../graph/data";
 import uPlot from "uplot";
-import CachegrindCmd from "../../../../components/cachegrind-cmd.vue";
 import {
   COMPILE_DETAIL_GRAPHS_RESOLVER,
   COMPILE_DETAIL_SECTIONS_RESOLVER,
@@ -23,6 +22,8 @@ import {
 } from "./detail-resolver";
 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;
@@ -269,31 +272,6 @@ const relativeChartElement: Ref<HTMLElement | null> = ref(null);
 const absoluteChartElement: Ref<HTMLElement | null> = ref(null);
 const graphRange = computed(() => getGraphRange(props.artifact));
 
-enum ProfileCommand {
-  Before = "before",
-  After = "after",
-  Diff = "diff",
-}
-
-const profileCommand: Ref<ProfileCommand> = ref(ProfileCommand.Diff);
-const profileCommit = computed(() => {
-  if (profileCommand.value === ProfileCommand.Before) {
-    return props.baseArtifact.commit;
-  }
-  return props.artifact.commit;
-});
-const profileBaselineCommit = computed(() => {
-  if (profileCommand.value === ProfileCommand.Diff) {
-    return props.baseArtifact.commit;
-  }
-  return undefined;
-});
-
-function changeProfileCommand(event: Event) {
-  const target = event.target as HTMLSelectElement;
-  profileCommand.value = target.value as ProfileCommand;
-}
-
 const sectionsDetail: Ref<CompileDetailSections | null> = ref(null);
 onMounted(() => {
   loadGraphs().then((d) => {
@@ -373,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
@@ -455,40 +433,20 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="command">
-      <div class="title bold">
-        Local profiling command<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 generate a Cachegrind profile.
-        </Tooltip>
-      </div>
-
-      <select @change="changeProfileCommand">
-        <option
-          :value="ProfileCommand.Diff"
-          :selected="profileCommand === ProfileCommand.Diff"
-        >
-          Diff
-        </option>
-        <option
-          :value="ProfileCommand.Before"
-          :selected="profileCommand === ProfileCommand.Before"
-        >
-          Baseline commit
-        </option>
-        <option
-          :value="ProfileCommand.After"
-          :selected="profileCommand === ProfileCommand.After"
-        >
-          Benchmarked commit
-        </option>
-      </select>
-
-      <CachegrindCmd
-        :commit="profileCommit"
-        :baseline-commit="profileBaselineCommit"
-        :test-case="testCase"
+    <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"
       />
     </div>
   </div>
@@ -509,9 +467,11 @@ onMounted(() => {
     flex-wrap: nowrap;
   }
 }
+
 .graphs {
   margin-top: 15px;
 }
+
 .rows {
   display: flex;
   flex-direction: column;
@@ -521,7 +481,8 @@ onMounted(() => {
     align-items: center;
   }
 }
-.command {
+
+.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/components/cachegrind-cmd.vue renamed to site/frontend/src/pages/compare/compile/table/shortcuts/cachegrind-cmd.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import {CompileTestCase, Profile} from "../pages/compare/compile/common";
+/**
+ * This component displays a rustc-perf command for profiling a compile benchmark with Cachegrind.
+ **/
+
+import {CompileTestCase} from "../../common";
 import {computed} from "vue";
+import {normalizeProfile} from "./utils";
 
 const props = defineProps<{
   commit: string;
@@ -16,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";
@@ -55,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

@@ -0,0 +1,89 @@
+<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";
+import Tooltip from "../../../tooltip.vue";
+import CachegrindCmd from "./cachegrind-cmd.vue";
+
+const props = defineProps<{
+  artifact: ArtifactDescription;
+  baseArtifact: ArtifactDescription;
+  testCase: CompileTestCase;
+}>();
+
+enum ProfileCommand {
+  Before = "before",
+  After = "after",
+  Diff = "diff",
+}
+
+function changeProfileCommand(event: Event) {
+  const target = event.target as HTMLSelectElement;
+  profileCommand.value = target.value as ProfileCommand;
+}
+
+const profileCommand: Ref<ProfileCommand> = ref(ProfileCommand.Diff);
+const profileCommit = computed(() => {
+  if (profileCommand.value === ProfileCommand.Before) {
+    return props.baseArtifact.commit;
+  }
+  return props.artifact.commit;
+});
+const profileBaselineCommit = computed(() => {
+  if (profileCommand.value === ProfileCommand.Diff) {
+    return props.baseArtifact.commit;
+  }
+  return undefined;
+});
+</script>
+
+<template>
+  <div class="title">
+    Command for profiling 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 generate a Cachegrind profile.
+    </Tooltip>
+  </div>
+
+  <select @change="changeProfileCommand">
+    <option
+      :value="ProfileCommand.Diff"
+      :selected="profileCommand === ProfileCommand.Diff"
+    >
+      Diff
+    </option>
+    <option
+      :value="ProfileCommand.Before"
+      :selected="profileCommand === ProfileCommand.Before"
+    >
+      Baseline commit
+    </option>
+    <option
+      :value="ProfileCommand.After"
+      :selected="profileCommand === ProfileCommand.After"
+    >
+      Benchmarked commit
+    </option>
+  </select>
+
+  <CachegrindCmd
+    :commit="profileCommit"
+    :baseline-commit="profileBaselineCommit"
+    :test-case="props.testCase"
+  />
+</template>
+
+<style scoped lang="scss">
+.title {
+  font-weight: bold;
+}
+</style>

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