Add link to Perfetto UI trace visualization in benchmark detail

Author: Kobzol

site/frontend/src/components/perfetto-link.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import {computed} from "vue";
+import {openTraceInPerfetto} from "../perfetto";
+import {croxTraceUrl} from "../self-profile";
+import {CompileTestCase} from "../pages/compare/compile/common";
+import {ArtifactDescription} from "../pages/compare/types";
+
+const props = defineProps<{
+  label: string;
+  artifact: ArtifactDescription;
+  testCase: CompileTestCase;
+}>();
+
+const link = computed(() => {
+  return croxTraceUrl(
+    props.artifact.commit,
+    `${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
+    props.testCase.scenario
+  );
+});
+const traceTitle = computed(() => {
+  return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.artifact.commit})`;
+});
+</script>
+
+<template>
+  <a @click="openTraceInPerfetto(link, traceTitle)">{{ props.label }}</a>
+</template>
+
+<style scoped lang="scss">
+a {
+  cursor: pointer;
+}
+</style>

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

@@ -14,6 +14,9 @@ import {GraphData, GraphKind, GraphsSelector} from "../../../../graph/data";
 import uPlot from "uplot";
 import CachegrindCmd from "../../../../components/cachegrind-cmd.vue";
 import {COMPILE_DETAIL_RESOLVER} from "./detail-resolver";
+import {openTraceInPerfetto} from "../../../../perfetto";
+import {croxTraceUrl} from "../../../../self-profile";
+import PerfettoLink from "../../../../components/perfetto-link.vue";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -263,6 +266,27 @@ function changeProfileCommand(event: Event) {
   profileCommand.value = target.value as ProfileCommand;
 }
 
+const traceLinkBefore = computed(() => {
+  return croxTraceUrl(
+    props.artifact.commit,
+    `${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
+    props.testCase.scenario
+  );
+});
+const traceLinkAfter = computed(() => {
+  return croxTraceUrl(
+    props.baseArtifact.commit,
+    `${props.testCase.benchmark}-${props.testCase.profile.toLowerCase()}`,
+    props.testCase.scenario
+  );
+});
+const traceLinkTitleBefore = computed(() => {
+  return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.baseArtifact.commit})`;
+});
+const traceLinkTitleAfter = computed(() => {
+  return `${props.testCase.benchmark}-${props.testCase.profile}-${props.testCase.scenario} (${props.artifact.commit})`;
+});
+
 onMounted(() => renderGraphs());
 </script>
 
@@ -339,11 +363,25 @@ onMounted(() => renderGraphs());
               Self-profile (before)
             </a>
           </li>
+          <li>
+            <PerfettoLink
+              :artifact="props.baseArtifact"
+              label="Query trace (before)"
+              :test-case="props.testCase"
+            />
+          </li>
           <li>
             <a :href="detailedQueryLink(props.artifact)" target="_blank">
               Self-profile (after)
             </a>
           </li>
+          <li>
+            <PerfettoLink
+              :artifact="props.artifact"
+              label="Query trace (after)"
+              :test-case="props.testCase"
+            />
+          </li>
           <li>
             <a :href="benchmarkLink(testCase.benchmark)" target="_blank">
               Benchmark source code

site/frontend/src/pages/detailed-query.ts

@@ -1,6 +1,7 @@
 import {createUrlWithAppendedParams, getUrlParams} from "../utils/navigation";
 import {postMsgpack} from "../utils/requests";
 import {SELF_PROFILE_DATA_URL} from "../urls";
+import {processedSelfProfileUrl} from "../self-profile";
 
 function to_seconds(time) {
   return time / 1000000000;
@@ -59,20 +60,12 @@ function populate_data(data, state: Selector) {
     let url = `/perf/download-raw-self-profile?commit=${commit}&benchmark=${bench}&scenario=${run}`;
     return `<a href="${url}">raw</a>`;
   };
-  let processed_url = (commit, bench, run, ty) => {
-    return `/perf/processed-self-profile?commit=${commit}&benchmark=${bench}&scenario=${run}&type=${ty}`;
-  };
   let processed_link = (commit, {benchmark, scenario}, ty) => {
-    let url = processed_url(commit, benchmark, scenario, ty);
+    let url = processedSelfProfileUrl(commit, benchmark, scenario, ty);
     return `<a href="${url}">${ty}</a>`;
   };
-  let processed_crox_url = (commit, bench, run) => {
-    let crox_url =
-      window.location.origin + processed_url(commit, bench, run, "crox");
-    return encodeURIComponent(crox_url);
-  };
   let firefox_profiler_link = (commit, bench, run) => {
-    let crox_url = processed_crox_url(commit, bench, run);
+    let crox_url = encodeURIComponent(croxTraceUrl(commit, bench, run));
     let ff_url = `https://profiler.firefox.com/from-url/${crox_url}/marker-chart/?v=5`;
     return `<a href="${ff_url}">Firefox profiler</a>`;
   };

site/frontend/src/perfetto.ts

@@ -0,0 +1,41 @@
+// Code for displaying post-processed self-profile traces in perfetto.dev.
+// The process of linking to perfetto is explained at
+// https://perfetto.dev/docs/visualization/deep-linking-to-perfetto-ui.
+// This code is adapted from https://llvm-compile-time-tracker.com/compare.php
+const ORIGIN = "https://ui.perfetto.dev";
+
+export async function openTraceInPerfetto(traceUrl: string, title: string) {
+  const resp = await fetch(traceUrl);
+  const blob = await resp.blob();
+  const arrayBuffer = await blob.arrayBuffer();
+  openTrace(arrayBuffer, title);
+}
+
+function openTrace(arrayBuffer: ArrayBuffer, title: string) {
+  const win = window.open(ORIGIN);
+  if (win === null) {
+    return;
+  }
+
+  const timer = setInterval(() => win.postMessage("PING", ORIGIN), 50);
+
+  const onMessageHandler = (evt) => {
+    if (evt.data !== "PONG") return;
+
+    // We got a PONG, the UI is ready.
+    window.clearInterval(timer);
+    window.removeEventListener("message", onMessageHandler);
+
+    win.postMessage(
+      {
+        perfetto: {
+          buffer: arrayBuffer,
+          title,
+        },
+      },
+      ORIGIN
+    );
+  };
+
+  window.addEventListener("message", onMessageHandler);
+}

site/frontend/src/self-profile.ts

@@ -0,0 +1,23 @@
+// Returns the URL to a processed Crox format of a self-profile query.
+export function croxTraceUrl(
+  commit: string,
+  benchmarkAndProfile: string,
+  scenario: string
+): string {
+  const relativeUrl = processedSelfProfileUrl(
+    commit,
+    benchmarkAndProfile,
+    scenario,
+    "crox"
+  );
+  return window.location.origin + relativeUrl;
+}
+
+export function processedSelfProfileUrl(
+  commit: string,
+  benchmarkAndProfile: string,
+  scenario: string,
+  type: string
+): string {
+  return `/perf/processed-self-profile?commit=${commit}&benchmark=${benchmarkAndProfile}&scenario=${scenario}&type=${type}`;
+}