Add historical 30 day graph to benchmark detail

Author: Kobzol

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

@@ -5,13 +5,34 @@ import {
   CompileBenchmarkMetadata,
   CompileTestCase,
 } from "../common";
-import {computed} from "vue";
+import {computed, onMounted, Ref, ref} from "vue";
 import Tooltip from "../../tooltip.vue";
+import {loadGraphs} from "../../../../graph/api";
+import {ArtifactDescription} from "../../types";
+import {getDateInPast} from "./utils";
+import {renderPlots} from "../../../../graph/render";
 
 const props = defineProps<{
   testCase: CompileTestCase;
+  metric: string;
+  artifact: ArtifactDescription;
   benchmarkMap: CompileBenchmarkMap;
 }>();
+
+async function renderGraph() {
+  const selector = {
+    benchmark: props.testCase.benchmark,
+    profile: props.testCase.profile,
+    scenario: props.testCase.scenario,
+    stat: props.metric,
+    start: getDateInPast(props.artifact),
+    end: props.artifact.commit,
+    kind: "raw",
+  };
+  const graphData = await loadGraphs(selector);
+  renderPlots(graphData, selector, chartElement.value);
+}
+
 const metadata = computed(
   (): CompileBenchmarkMetadata =>
     props.benchmarkMap[props.testCase.benchmark] ?? null
@@ -29,6 +50,10 @@ const cargoProfile = computed((): CargoProfileMetadata => {
     return metadata?.value.dev_profile;
   }
 });
+
+const chartElement: Ref<HTMLElement | null> = ref(null);
+
+onMounted(() => renderGraph());
 </script>
 <template>
   <table>
@@ -75,6 +100,7 @@ const cargoProfile = computed((): CargoProfileMetadata => {
       </tr>
     </tbody>
   </table>
+  <div ref="chartElement"></div>
 </template>
 
 <style scoped lang="scss">
@@ -89,3 +115,17 @@ table {
   }
 }
 </style>
+<style>
+.u-tooltip {
+  font-size: 10pt;
+  position: absolute;
+  background: #fff;
+  display: none;
+  border: 2px solid black;
+  padding: 4px;
+  pointer-events: none;
+  z-index: 100;
+  white-space: pre;
+  font-family: monospace;
+}
+</style>

site/frontend/src/pages/compare/compile/table/comparisons-table.vue

@@ -7,6 +7,7 @@ import {CompileBenchmarkMap, CompileTestCase} from "../common";
 import {computed} from "vue";
 import {useExpandedStore} from "./expansion";
 import BenchmarkDetail from "./benchmark-detail.vue";
+import {getDateInPast} from "./utils";
 
 const props = defineProps<{
   id: string;
@@ -28,15 +29,8 @@ function graphLink(
   stat: string,
   comparison: TestCaseComparison<CompileTestCase>
 ): string {
-  let date = new Date(commit.date);
-  // Move to `30 days ago` to display history of the test case
-  date.setUTCDate(date.getUTCDate() - 30);
-  let year = date.getUTCFullYear();
-  let month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
-  let day = date.getUTCDate().toString().padStart(2, "0");
-  let start = `${year}-${month}-${day}`;
-
-  let end = commit.commit;
+  const start = getDateInPast(commit);
+  const end = commit.commit;
   const {benchmark, profile, scenario} = comparison.testCase;
   return `/index.html?start=${start}&end=${end}&benchmark=${benchmark}&profile=${profile}&scenario=${scenario}&stat=${stat}`;
 }
@@ -202,6 +196,8 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
             <td :colspan="columnCount">
               <BenchmarkDetail
                 :test-case="comparison.testCase"
+                :artifact="commitB"
+                :metric="stat"
                 :benchmark-map="benchmarkMap"
               />
             </td>

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

@@ -0,0 +1,14 @@
+import {ArtifactDescription} from "../../types";
+
+/**
+ * Returns a date in the past for which we want to display a historical chart.
+ */
+export function getDateInPast(artifact: ArtifactDescription): string {
+  const date = new Date(artifact.date);
+  // Move to `30 days ago` to display history of the test case
+  date.setUTCDate(date.getUTCDate() - 30);
+  const year = date.getUTCFullYear();
+  const month = (date.getUTCMonth() + 1).toString().padStart(2, "0");
+  const day = date.getUTCDate().toString().padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}

site/frontend/templates/pages/compare.html

@@ -1,5 +1,7 @@
 {% extends "layout.html" %}
 {% block head %}
+<link rel="stylesheet" href="styles/uPlot.min.css">
+
 <style>
     body {
         max-width: 1000px;