Use benchmark detail endpoint in the UI

Author: Kobzol

site/frontend/src/graph/data.ts

@@ -18,6 +18,7 @@ export interface Series {
 
 // Graph data received from the server
 export interface GraphData {
-  commits: [[number, string]];
+  commits: Array<[number, string]>;
+  // benchmark -> profile -> scenario -> series
   benchmarks: Dict<Dict<Dict<Series>>>;
 }

site/frontend/src/graph/resolver.ts

@@ -5,15 +5,15 @@ import {
   CompileBenchmarkMetadata,
   CompileTestCase,
 } from "../common";
-import {computed, onMounted, Ref, ref} from "vue";
+import {capitalize, computed, onMounted, Ref, ref} from "vue";
 import Tooltip from "../../tooltip.vue";
 import {ArtifactDescription} from "../../types";
 import {daysBetweenDates, getFutureDate, getPastDate} from "./utils";
 import {GraphRenderOpts, renderPlots} from "../../../../graph/render";
-import {GRAPH_RESOLVER} from "../../../../graph/resolver";
-import {GraphKind} from "../../../../graph/data";
+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";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -98,16 +98,6 @@ function drawCurrentDate(opts: GraphRenderOpts, date: Date) {
 
 // Render both relative and absolute graphs
 async function renderGraphs() {
-  // We want to be able to see noise "blips" vs. a previous artifact.
-  // The "percent relative from previous commit" graph should be the best to
-  // see these kinds of changes.
-  renderGraph("percentrelative" as GraphKind, relativeChartElement);
-  // We also want to see whether a change maintained its value or whether it was noise and has since
-  // returned to steady state. Here, an absolute graph ("raw") is best.
-  renderGraph("raw" as GraphKind, absoluteChartElement);
-}
-
-async function renderGraph(kind: GraphKind, chartRef: Ref<HTMLElement | null>) {
   const {start, end, date} = graphRange.value;
   const selector = {
     benchmark: props.testCase.benchmark,
@@ -116,9 +106,68 @@ async function renderGraph(kind: GraphKind, chartRef: Ref<HTMLElement | null>) {
     stat: props.metric,
     start,
     end,
-    kind,
+    kinds: ["percentrelative", "raw"] as GraphKind[],
   };
-  const graphData = await GRAPH_RESOLVER.loadGraph(selector);
+  const detail = await COMPILE_DETAIL_RESOLVER.loadDetail(selector);
+  if (detail.commits.length === 0) {
+    return;
+  }
+
+  function buildGraph(
+    index: number,
+    kind: GraphKind
+  ): [GraphData, GraphsSelector] {
+    const data = {
+      commits: detail.commits,
+      benchmarks: {
+        [selector.benchmark]: {
+          // The server returns profiles capitalized, so we need to match that
+          // here, so that the graph code can find the expected profile.
+          [capitalize(selector.profile)]: {
+            [selector.scenario]: detail.graphs[index],
+          },
+        },
+      },
+    };
+    const graphSelector = {
+      benchmark: selector.benchmark,
+      profile: selector.profile,
+      scenario: selector.scenario,
+      stat: selector.stat,
+      start: selector.start,
+      end: selector.end,
+      kind,
+    };
+
+    return [data, graphSelector];
+  }
+
+  const [percentRelativeData, percentRelativeSelector] = buildGraph(
+    0,
+    "percentrelative"
+  );
+  const [rawData, rawSelector] = buildGraph(1, "raw");
+
+  // We want to be able to see noise "blips" vs. a previous artifact.
+  // The "percent relative from previous commit" graph should be the best to
+  // see these kinds of changes.
+  renderGraph(
+    percentRelativeData,
+    percentRelativeSelector,
+    date,
+    relativeChartElement
+  );
+  // We also want to see whether a change maintained its value or whether it was noise and has since
+  // returned to steady state. Here, an absolute graph ("raw") is best.
+  renderGraph(rawData, rawSelector, date, absoluteChartElement);
+}
+
+async function renderGraph(
+  graphData: GraphData,
+  selector: GraphsSelector,
+  date: Date | null,
+  chartRef: Ref<HTMLElement | null>
+) {
   const opts: GraphRenderOpts = {
     width: Math.min(window.innerWidth - 40, 465),
     renderTitle: false,

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

@@ -0,0 +1,64 @@
+import {GraphKind, Series} from "../../../../graph/data";
+import {getJson} from "../../../../utils/requests";
+import {COMPARE_COMPILE_DETAIL_DATA_URL} from "../../../../urls";
+
+export interface CompileDetailSelector {
+  start: string;
+  end: string;
+  stat: string;
+  benchmark: string;
+  scenario: string;
+  profile: string;
+  kinds: GraphKind[];
+}
+
+// Compile benchmark detail received from the server
+export interface CompileDetail {
+  commits: Array<[number, string]>;
+  // One Series for each GraphKind in the CompileDetailSelector
+  graphs: Series[];
+}
+
+/**
+ * Compile benchmark detail resolver that contains a cache of downloaded details.
+ * This is important for Vue components that download the benchmark detail on mount.
+ * Without a cache, they would download the detail each time they are destroyed
+ * and recreated.
+ */
+export class CompileBenchmarkDetailResolver {
+  private cache: Dict<CompileDetail> = {};
+
+  public async loadDetail(
+    selector: CompileDetailSelector
+  ): Promise<CompileDetail> {
+    const key = `${selector.benchmark};${selector.profile};${selector.scenario};${selector.start};${selector.end};${selector.stat};${selector.kinds}`;
+    if (!this.cache.hasOwnProperty(key)) {
+      this.cache[key] = await loadDetail(selector);
+    }
+
+    return this.cache[key];
+  }
+}
+
+/**
+ * This is essentially a global variable, but it makes the code simpler and
+ * since we currently don't have any unit tests, we don't really need to avoid
+ * global variables that much. If needed, it could be provided to Vue components
+ * from a parent via props or context.
+ */
+export const COMPILE_DETAIL_RESOLVER = new CompileBenchmarkDetailResolver();
+
+async function loadDetail(
+  selector: CompileDetailSelector
+): Promise<CompileDetail> {
+  const params = {
+    start: selector.start,
+    end: selector.end,
+    stat: selector.stat,
+    benchmark: selector.benchmark,
+    scenario: selector.scenario,
+    profile: selector.profile,
+    kinds: selector.kinds.join(","),
+  };
+  return await getJson<CompileDetail>(COMPARE_COMPILE_DETAIL_DATA_URL, params);
+}

site/frontend/src/pages/compare/compile/table/detail-resolver.ts

@@ -7,4 +7,5 @@ export const STATUS_DATA_URL = `${BASE_URL}/status_page`;
 export const BOOTSTRAP_DATA_URL = `${BASE_URL}/bootstrap`;
 export const GRAPH_DATA_URL = `${BASE_URL}/graphs`;
 export const COMPARE_DATA_URL = `${BASE_URL}/get`;
+export const COMPARE_COMPILE_DETAIL_DATA_URL = `${BASE_URL}/compare-compile-detail`;
 export const SELF_PROFILE_DATA_URL = `${BASE_URL}/self-profile`;