From 4395b9da677c6cfa582d0c4e2d3a9e25173ade78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:30:20 +0200
Subject: [PATCH 01/12] Move graph data to a separate module

---
 site/frontend/src/{pages/graphs/state.ts => graph/data.ts} | 0
 site/frontend/src/pages/graphs/data-selector.vue           | 2 +-
 site/frontend/src/pages/graphs/page.vue                    | 2 +-
 site/frontend/src/pages/graphs/plots.ts                    | 2 +-
 4 files changed, 3 insertions(+), 3 deletions(-)
 rename site/frontend/src/{pages/graphs/state.ts => graph/data.ts} (100%)

diff --git a/site/frontend/src/pages/graphs/state.ts b/site/frontend/src/graph/data.ts
similarity index 100%
rename from site/frontend/src/pages/graphs/state.ts
rename to site/frontend/src/graph/data.ts
diff --git a/site/frontend/src/pages/graphs/data-selector.vue b/site/frontend/src/pages/graphs/data-selector.vue
index 9a11a8183..3f0032bb3 100644
--- a/site/frontend/src/pages/graphs/data-selector.vue
+++ b/site/frontend/src/pages/graphs/data-selector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {onMounted, ref} from "vue";
-import {GraphKind} from "./state";
+import {GraphKind} from "../../graph/data";
 import {BenchmarkInfo} from "../../api";
 
 export interface SelectionParams {
diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 8d0224a33..3d4a09838 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/site/frontend/src/pages/graphs/page.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {nextTick, Ref, ref} from "vue";
 import {withLoading} from "../../utils/loading";
-import {GraphData, GraphKind, GraphsSelector} from "./state";
+import {GraphData, GraphKind, GraphsSelector} from "../../graph/data";
 import {GRAPH_DATA_URL} from "../../urls";
 import DataSelector, {SelectionParams} from "./data-selector.vue";
 import {
diff --git a/site/frontend/src/pages/graphs/plots.ts b/site/frontend/src/pages/graphs/plots.ts
index 6ea87ce0b..4d9ddbde3 100644
--- a/site/frontend/src/pages/graphs/plots.ts
+++ b/site/frontend/src/pages/graphs/plots.ts
@@ -1,5 +1,5 @@
 import uPlot, {TypedArray} from "uplot";
-import {GraphData, GraphsSelector} from "./state";
+import {GraphData, GraphsSelector} from "../../graph/data";
 
 const commonCacheStateColors = {
   full: "#7cb5ec",

From 15d6a09fc6101113969e9c904099932f6be8dbd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:35:43 +0200
Subject: [PATCH 02/12] Move graph API call to a separate module

---
 site/frontend/src/graph/api.ts          | 16 ++++++++++++++++
 site/frontend/src/pages/graphs/page.vue | 19 +++++--------------
 2 files changed, 21 insertions(+), 14 deletions(-)
 create mode 100644 site/frontend/src/graph/api.ts

diff --git a/site/frontend/src/graph/api.ts b/site/frontend/src/graph/api.ts
new file mode 100644
index 000000000..eca11defc
--- /dev/null
+++ b/site/frontend/src/graph/api.ts
@@ -0,0 +1,16 @@
+import {GraphData, GraphsSelector} from "./data";
+import {getJson} from "../utils/requests";
+import {GRAPH_DATA_URL} from "../urls";
+
+export async function loadGraphs(selector: GraphsSelector): Promise<GraphData> {
+  const params = {
+    start: selector.start,
+    end: selector.end,
+    kind: selector.kind as string,
+    stat: selector.stat,
+    benchmark: selector.benchmark,
+    scenario: selector.scenario,
+    profile: selector.profile,
+  };
+  return await getJson<GraphData>(GRAPH_DATA_URL, params);
+}
diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 3d4a09838..6d5d14b7e 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/site/frontend/src/pages/graphs/page.vue
@@ -2,7 +2,6 @@
 import {nextTick, Ref, ref} from "vue";
 import {withLoading} from "../../utils/loading";
 import {GraphData, GraphKind, GraphsSelector} from "../../graph/data";
-import {GRAPH_DATA_URL} from "../../urls";
 import DataSelector, {SelectionParams} from "./data-selector.vue";
 import {
   createUrlWithAppendedParams,
@@ -10,9 +9,9 @@ import {
   navigateToUrlParams,
 } from "../../utils/navigation";
 import {renderPlots} from "./plots";
-import {getJson} from "../../utils/requests";
 import {BenchmarkInfo, loadBenchmarkInfo} from "../../api";
 import AsOf from "../../components/as-of.vue";
+import {loadGraphs} from "../../graph/api";
 
 function loadSelectorFromUrl(urlParams: Dict<string>): GraphsSelector {
   const start = urlParams["start"] ?? "";
@@ -60,18 +59,10 @@ function hasSpecificSelection(selector: GraphsSelector): boolean {
 }
 
 async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
-  const graphData: GraphData = await withLoading(loading, async () => {
-    const params = {
-      start: selector.start,
-      end: selector.end,
-      kind: selector.kind as string,
-      stat: selector.stat,
-      benchmark: selector.benchmark,
-      scenario: selector.scenario,
-      profile: selector.profile,
-    };
-    return await getJson<GraphData>(GRAPH_DATA_URL, params);
-  });
+  const graphData: GraphData = await withLoading(
+    loading,
+    async () => await loadGraphs(selector)
+  );
 
   // Wait for the UI to be updated, which also resets the plot HTML elements.
   // Then draw the plots.

From a050e66cea90f6b033b6ba3c4541e35b2683d3a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:41:09 +0200
Subject: [PATCH 03/12] Receive element instead of a selector in `renderPlots`

---
 site/frontend/src/pages/graphs/page.vue | 6 +++---
 site/frontend/src/pages/graphs/plots.ts | 8 ++------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 6d5d14b7e..45dd6c7a8 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/site/frontend/src/pages/graphs/page.vue
@@ -70,7 +70,7 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
 
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {
-    renderPlots(graphData, selector, "#charts");
+    renderPlots(graphData, selector, document.getElementById("charts"));
   } else {
     // If we select all of them, we expect that there will be a regular grid.
 
@@ -81,7 +81,7 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
       graphData,
       (benchName) => !benchName.endsWith("-tiny")
     );
-    renderPlots(withoutTiny, selector, "#charts");
+    renderPlots(withoutTiny, selector, document.getElementById("charts"));
 
     // Then, render only the size-related ones in their own dedicated section as they are less
     // important than having the better grouping. So, we only include the benchmarks ending in
@@ -89,7 +89,7 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
     const onlyTiny = filterBenchmarks(graphData, (benchName) =>
       benchName.endsWith("-tiny")
     );
-    renderPlots(onlyTiny, selector, "#size-charts");
+    renderPlots(onlyTiny, selector, document.getElementById("size-charts"));
   }
 }
 
diff --git a/site/frontend/src/pages/graphs/plots.ts b/site/frontend/src/pages/graphs/plots.ts
index 4d9ddbde3..de0bf0d54 100644
--- a/site/frontend/src/pages/graphs/plots.ts
+++ b/site/frontend/src/pages/graphs/plots.ts
@@ -285,7 +285,7 @@ function normalizeData(data: GraphData) {
 export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
-  elementSelector: string
+  plotElement: HTMLElement
 ) {
   normalizeData(data);
 
@@ -377,11 +377,7 @@ export function renderPlots(
         absoluteMode: selector.kind == "raw",
       });
 
-      new uPlot(
-        plotOpts,
-        plotData as any as TypedArray[],
-        document.querySelector<HTMLElement>(elementSelector)
-      );
+      new uPlot(plotOpts, plotData as any as TypedArray[], plotElement);
 
       i++;
     }

From b799885c5595651fb0a2944e35b2c01c557d5bfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 10:50:16 +0200
Subject: [PATCH 04/12] Move graph rendering to a separate module

---
 site/frontend/src/{pages/graphs/plots.ts => graph/render.ts} | 2 +-
 site/frontend/src/pages/graphs/page.vue                      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)
 rename site/frontend/src/{pages/graphs/plots.ts => graph/render.ts} (99%)

diff --git a/site/frontend/src/pages/graphs/plots.ts b/site/frontend/src/graph/render.ts
similarity index 99%
rename from site/frontend/src/pages/graphs/plots.ts
rename to site/frontend/src/graph/render.ts
index de0bf0d54..bcd83babb 100644
--- a/site/frontend/src/pages/graphs/plots.ts
+++ b/site/frontend/src/graph/render.ts
@@ -1,5 +1,5 @@
 import uPlot, {TypedArray} from "uplot";
-import {GraphData, GraphsSelector} from "../../graph/data";
+import {GraphData, GraphsSelector} from "./data";
 
 const commonCacheStateColors = {
   full: "#7cb5ec",
diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 45dd6c7a8..064b56c3f 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/site/frontend/src/pages/graphs/page.vue
@@ -8,7 +8,7 @@ import {
   getUrlParams,
   navigateToUrlParams,
 } from "../../utils/navigation";
-import {renderPlots} from "./plots";
+import {renderPlots} from "../../graph/render";
 import {BenchmarkInfo, loadBenchmarkInfo} from "../../api";
 import AsOf from "../../components/as-of.vue";
 import {loadGraphs} from "../../graph/api";

From 71c694ad570dac7ddc6b997c0895e09fef1e0de0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 11:23:08 +0200
Subject: [PATCH 05/12] Add historical 30 day graph to benchmark detail

---
 .../compile/table/benchmark-detail.vue        | 42 ++++++++++++++++++-
 .../compile/table/comparisons-table.vue       | 14 +++----
 .../src/pages/compare/compile/table/utils.ts  | 14 +++++++
 site/frontend/templates/pages/compare.html    |  2 +
 4 files changed, 62 insertions(+), 10 deletions(-)
 create mode 100644 site/frontend/src/pages/compare/compile/table/utils.ts

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index b3539f36d..d172bdd07 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/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>
diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index 980dbb771..02ee293db 100644
--- a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
+++ b/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>
diff --git a/site/frontend/src/pages/compare/compile/table/utils.ts b/site/frontend/src/pages/compare/compile/table/utils.ts
new file mode 100644
index 000000000..ca825b288
--- /dev/null
+++ b/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}`;
+}
diff --git a/site/frontend/templates/pages/compare.html b/site/frontend/templates/pages/compare.html
index 42238eace..1410d07c2 100644
--- a/site/frontend/templates/pages/compare.html
+++ b/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;

From 05799e89a87f1905542f24ecbb3a263685beb45d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 11:31:24 +0200
Subject: [PATCH 06/12] Do not render title in benchmark detail graph

---
 site/frontend/src/graph/render.ts             | 19 +++++++++++++------
 .../compile/table/benchmark-detail.vue        |  4 +++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/site/frontend/src/graph/render.ts b/site/frontend/src/graph/render.ts
index bcd83babb..b6daa36b7 100644
--- a/site/frontend/src/graph/render.ts
+++ b/site/frontend/src/graph/render.ts
@@ -148,7 +148,6 @@ function tooltipPlugin({
 }
 
 function genPlotOpts({
-  title,
   width,
   height,
   yAxisLabel,
@@ -161,7 +160,6 @@ function genPlotOpts({
   absoluteMode,
 }) {
   return {
-    title,
     width,
     height,
     series,
@@ -280,13 +278,20 @@ function normalizeData(data: GraphData) {
   }
 }
 
-// Renders the plots data with the given parameters from the `selector`, into a DOM node optionally
-// selected by the `elementSelector` query.
+export type GraphRenderOpts = {
+  renderTitle?: boolean;
+};
+
+// Renders the plots data with the given parameters from the `selector` into
+// the passed DOM element.
 export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
-  plotElement: HTMLElement
+  plotElement: HTMLElement,
+  opts?: GraphRenderOpts
 ) {
+  const renderTitle = opts?.renderTitle ?? true;
+
   normalizeData(data);
 
   const names = Object.keys(data.benchmarks).sort();
@@ -364,7 +369,6 @@ export function renderPlots(
         cacheStates[Object.keys(cacheStates)[0]].interpolated_indices;
 
       let plotOpts = genPlotOpts({
-        title: benchName + "-" + benchKind,
         width: Math.floor(window.innerWidth / 4) - 40,
         height: 300,
         yAxisLabel,
@@ -376,6 +380,9 @@ export function renderPlots(
         },
         absoluteMode: selector.kind == "raw",
       });
+      if (renderTitle) {
+        plotOpts["title"] = `${benchName}-${benchKind}`;
+      }
 
       new uPlot(plotOpts, plotData as any as TypedArray[], plotElement);
 
diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index d172bdd07..32143befb 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -30,7 +30,9 @@ async function renderGraph() {
     kind: "raw",
   };
   const graphData = await loadGraphs(selector);
-  renderPlots(graphData, selector, chartElement.value);
+  renderPlots(graphData, selector, chartElement.value, {
+    renderTitle: false,
+  });
 }
 
 const metadata = computed(

From 2ca6e69b25b08248f8096cfe7451c39cc92bf31c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 11:34:25 +0200
Subject: [PATCH 07/12] Change layout of benchmark detail

---
 .../compile/table/benchmark-detail.vue        | 100 ++++++++++--------
 1 file changed, 55 insertions(+), 45 deletions(-)

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index 32143befb..c0ca8c266 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -57,56 +57,65 @@ const chartElement: Ref<HTMLElement | null> = ref(null);
 
 onMounted(() => renderGraph());
 </script>
+
 <template>
-  <table>
-    <tbody>
-      <tr>
-        <td>Benchmark</td>
-        <td>{{ testCase.benchmark }}</td>
-      </tr>
-      <tr>
-        <td>Profile</td>
-        <td>{{ testCase.profile }}</td>
-      </tr>
-      <tr>
-        <td>Scenario</td>
-        <td>{{ testCase.scenario }}</td>
-      </tr>
-      <tr>
-        <td>Category</td>
-        <td>{{ testCase.category }}</td>
-      </tr>
-      <tr v-if="(metadata?.binary ?? null) !== null">
-        <td>Artifact</td>
-        <td>{{ metadata.binary ? "binary" : "library" }}</td>
-      </tr>
-      <tr v-if="(metadata?.iterations ?? null) !== null">
-        <td>
-          Iterations<Tooltip>
-            How many times is the benchmark executed?
-          </Tooltip>
-        </td>
-        <td>{{ metadata.iterations }}</td>
-      </tr>
-      <tr v-if="(cargoProfile?.lto ?? null) !== null">
-        <td>LTO</td>
-        <td>{{ cargoProfile.lto }}</td>
-      </tr>
-      <tr v-if="(cargoProfile?.debug ?? null) !== null">
-        <td>Debuginfo</td>
-        <td>{{ cargoProfile.debug }}</td>
-      </tr>
-      <tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
-        <td>Codegen units</td>
-        <td>{{ cargoProfile.codegen_units }}</td>
-      </tr>
-    </tbody>
-  </table>
-  <div ref="chartElement"></div>
+  <div class="wrapper">
+    <table>
+      <tbody>
+        <tr>
+          <td>Benchmark</td>
+          <td>{{ testCase.benchmark }}</td>
+        </tr>
+        <tr>
+          <td>Profile</td>
+          <td>{{ testCase.profile }}</td>
+        </tr>
+        <tr>
+          <td>Scenario</td>
+          <td>{{ testCase.scenario }}</td>
+        </tr>
+        <tr>
+          <td>Category</td>
+          <td>{{ testCase.category }}</td>
+        </tr>
+        <tr v-if="(metadata?.binary ?? null) !== null">
+          <td>Artifact</td>
+          <td>{{ metadata.binary ? "binary" : "library" }}</td>
+        </tr>
+        <tr v-if="(metadata?.iterations ?? null) !== null">
+          <td>
+            Iterations<Tooltip>
+              How many times is the benchmark executed?
+            </Tooltip>
+          </td>
+          <td>{{ metadata.iterations }}</td>
+        </tr>
+        <tr v-if="(cargoProfile?.lto ?? null) !== null">
+          <td>LTO</td>
+          <td>{{ cargoProfile.lto }}</td>
+        </tr>
+        <tr v-if="(cargoProfile?.debug ?? null) !== null">
+          <td>Debuginfo</td>
+          <td>{{ cargoProfile.debug }}</td>
+        </tr>
+        <tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
+          <td>Codegen units</td>
+          <td>{{ cargoProfile.codegen_units }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <div ref="chartElement"></div>
+  </div>
 </template>
 
 <style scoped lang="scss">
+.wrapper {
+  display: flex;
+}
 table {
+  align-self: center;
+  margin-right: 20px;
+
   td {
     text-align: left;
 
@@ -117,6 +126,7 @@ table {
   }
 }
 </style>
+
 <style>
 .u-tooltip {
   font-size: 10pt;

From b868080b866687c5f9e543867a9e5b55818d98a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 14:28:58 +0200
Subject: [PATCH 08/12] Add cache for downloading graphs on compare page

---
 site/frontend/src/graph/resolver.ts           | 29 +++++++++++++++++++
 .../compile/table/benchmark-detail.vue        |  7 +++--
 2 files changed, 33 insertions(+), 3 deletions(-)
 create mode 100644 site/frontend/src/graph/resolver.ts

diff --git a/site/frontend/src/graph/resolver.ts b/site/frontend/src/graph/resolver.ts
new file mode 100644
index 000000000..3f455e4ea
--- /dev/null
+++ b/site/frontend/src/graph/resolver.ts
@@ -0,0 +1,29 @@
+import {GraphData, GraphsSelector} from "./data";
+import {loadGraphs} from "./api";
+
+/**
+ * Graph API resolver that contains a cache of downloaded graphs.
+ * This is important for Vue components that download a graph on mount.
+ * Without a cache, they would download a graph each time they are destroyed
+ * and recreated.
+ */
+export class GraphResolver {
+  private cache: Dict<GraphData> = {};
+
+  public async loadGraph(selector: GraphsSelector): Promise<GraphData> {
+    const key = `${selector.benchmark};${selector.profile};${selector.scenario};${selector.start};${selector.end};${selector.stat};${selector.kind}`;
+    if (!this.cache.hasOwnProperty(key)) {
+      this.cache[key] = await loadGraphs(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 GRAPH_RESOLVER = new GraphResolver();
diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index c0ca8c266..d19230278 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -7,10 +7,11 @@ import {
 } from "../common";
 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";
+import {GRAPH_RESOLVER} from "../../../../graph/resolver";
+import {GraphKind} from "../../../../graph/data";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -27,9 +28,9 @@ async function renderGraph() {
     stat: props.metric,
     start: getDateInPast(props.artifact),
     end: props.artifact.commit,
-    kind: "raw",
+    kind: "raw" as GraphKind,
   };
-  const graphData = await loadGraphs(selector);
+  const graphData = await GRAPH_RESOLVER.loadGraph(selector);
   renderPlots(graphData, selector, chartElement.value, {
     renderTitle: false,
   });

From ffe4171436ffa4335f9ca24829b602aaa98390f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Sun, 6 Aug 2023 16:00:27 +0200
Subject: [PATCH 09/12] Add titles to benchmark detail sections

---
 .../compile/table/benchmark-detail.vue        | 113 +++++++++++-------
 1 file changed, 67 insertions(+), 46 deletions(-)

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index d19230278..9f4ead732 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -61,60 +61,81 @@ onMounted(() => renderGraph());
 
 <template>
   <div class="wrapper">
-    <table>
-      <tbody>
-        <tr>
-          <td>Benchmark</td>
-          <td>{{ testCase.benchmark }}</td>
-        </tr>
-        <tr>
-          <td>Profile</td>
-          <td>{{ testCase.profile }}</td>
-        </tr>
-        <tr>
-          <td>Scenario</td>
-          <td>{{ testCase.scenario }}</td>
-        </tr>
-        <tr>
-          <td>Category</td>
-          <td>{{ testCase.category }}</td>
-        </tr>
-        <tr v-if="(metadata?.binary ?? null) !== null">
-          <td>Artifact</td>
-          <td>{{ metadata.binary ? "binary" : "library" }}</td>
-        </tr>
-        <tr v-if="(metadata?.iterations ?? null) !== null">
-          <td>
-            Iterations<Tooltip>
-              How many times is the benchmark executed?
-            </Tooltip>
-          </td>
-          <td>{{ metadata.iterations }}</td>
-        </tr>
-        <tr v-if="(cargoProfile?.lto ?? null) !== null">
-          <td>LTO</td>
-          <td>{{ cargoProfile.lto }}</td>
-        </tr>
-        <tr v-if="(cargoProfile?.debug ?? null) !== null">
-          <td>Debuginfo</td>
-          <td>{{ cargoProfile.debug }}</td>
-        </tr>
-        <tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
-          <td>Codegen units</td>
-          <td>{{ cargoProfile.codegen_units }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <div ref="chartElement"></div>
+    <div>
+      <div class="title info bold">Benchmark info</div>
+      <table>
+        <tbody>
+          <tr>
+            <td>Benchmark</td>
+            <td>{{ testCase.benchmark }}</td>
+          </tr>
+          <tr>
+            <td>Profile</td>
+            <td>{{ testCase.profile }}</td>
+          </tr>
+          <tr>
+            <td>Scenario</td>
+            <td>{{ testCase.scenario }}</td>
+          </tr>
+          <tr>
+            <td>Category</td>
+            <td>{{ testCase.category }}</td>
+          </tr>
+          <tr v-if="(metadata?.binary ?? null) !== null">
+            <td>Artifact</td>
+            <td>{{ metadata.binary ? "binary" : "library" }}</td>
+          </tr>
+          <tr v-if="(metadata?.iterations ?? null) !== null">
+            <td>
+              Iterations<Tooltip>
+                How many times is the benchmark executed?
+              </Tooltip>
+            </td>
+            <td>{{ metadata.iterations }}</td>
+          </tr>
+          <tr v-if="(cargoProfile?.lto ?? null) !== null">
+            <td>LTO</td>
+            <td>{{ cargoProfile.lto }}</td>
+          </tr>
+          <tr v-if="(cargoProfile?.debug ?? null) !== null">
+            <td>Debuginfo</td>
+            <td>{{ cargoProfile.debug }}</td>
+          </tr>
+          <tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
+            <td>Codegen units</td>
+            <td>{{ cargoProfile.codegen_units }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <div class="title">
+        <div class="bold">30 day history (up to benchmarked commit)</div>
+        <div style="font-size: 0.8em">
+          Each plotted value is relative to its previous commit
+        </div>
+      </div>
+      <div ref="chartElement"></div>
+    </div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .wrapper {
   display: flex;
+  margin: 10px 0;
+}
+.title {
+  &.bold,
+  .bold {
+    font-weight: bold;
+  }
+  &.info {
+    margin-bottom: 15px;
+  }
 }
 table {
-  align-self: center;
+  align-self: flex-start;
   margin-right: 20px;
 
   td {

From 62f88a8436e13e92922fa6bb7179b46e74c41e5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Mon, 7 Aug 2023 11:24:14 +0200
Subject: [PATCH 10/12] Change the graph to the "percent relative from
 previous" kind

---
 .../src/pages/compare/compile/table/benchmark-detail.vue     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index 9f4ead732..b10bdb4ed 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -28,7 +28,10 @@ async function renderGraph() {
     stat: props.metric,
     start: getDateInPast(props.artifact),
     end: props.artifact.commit,
-    kind: "raw" as GraphKind,
+    // 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.
+    kind: "percentrelative" as GraphKind,
   };
   const graphData = await GRAPH_RESOLVER.loadGraph(selector);
   renderPlots(graphData, selector, chartElement.value, {

From 2fd03b9b1299cbb25968f4fcba131e2e8ffe87bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Tue, 8 Aug 2023 23:33:50 +0200
Subject: [PATCH 11/12] Expose commit type (try/master) from the server

---
 site/frontend/src/pages/compare/types.ts | 3 +++
 site/src/api.rs                          | 8 ++++++++
 site/src/comparison.rs                   | 7 +++++++
 3 files changed, 18 insertions(+)

diff --git a/site/frontend/src/pages/compare/types.ts b/site/frontend/src/pages/compare/types.ts
index c1b90f7ea..b0ec11a92 100644
--- a/site/frontend/src/pages/compare/types.ts
+++ b/site/frontend/src/pages/compare/types.ts
@@ -16,10 +16,13 @@ export interface CompareSelector {
   stat: string;
 }
 
+export type CommitType = "try" | "master";
+
 export interface ArtifactDescription {
   commit: string;
   date: string | null;
   pr: number | null;
+  type: CommitType;
   bootstrap: Dict<number>;
   bootstrap_total: number;
   component_sizes: Dict<number>;
diff --git a/site/src/api.rs b/site/src/api.rs
index 684a6e75a..ffa9d3057 100644
--- a/site/src/api.rs
+++ b/site/src/api.rs
@@ -183,11 +183,19 @@ pub mod comparison {
         pub compile_benchmark_metadata: Vec<CompileBenchmarkMetadata>,
     }
 
+    #[derive(Debug, Clone, Serialize)]
+    #[serde(rename_all = "lowercase")]
+    pub enum CommitType {
+        Master,
+        Try,
+    }
+
     #[derive(Debug, Clone, Serialize)]
     pub struct ArtifactDescription {
         pub commit: String,
         pub date: Option<Date>,
         pub pr: Option<u32>,
+        pub r#type: CommitType,
         pub bootstrap: HashMap<String, u64>,
         pub bootstrap_total: u64,
         pub component_sizes: HashMap<String, u64>,
diff --git a/site/src/comparison.rs b/site/src/comparison.rs
index ebad13ced..4a3a2e6fc 100644
--- a/site/src/comparison.rs
+++ b/site/src/comparison.rs
@@ -1038,6 +1038,13 @@ impl From<ArtifactDescription> for api::comparison::ArtifactDescription {
                 ArtifactId::Commit(c) => c.sha,
                 ArtifactId::Tag(t) => t,
             },
+            r#type: match &data.artifact {
+                ArtifactId::Commit(c) => match c.r#type {
+                    CommitType::Master => api::comparison::CommitType::Master,
+                    CommitType::Try => api::comparison::CommitType::Try,
+                },
+                ArtifactId::Tag(_) => api::comparison::CommitType::Master,
+            },
             date: if let ArtifactId::Commit(c) = &data.artifact {
                 Some(c.date)
             } else {

From f92b5474a7b2cab8bcbe56e088312141aec8582f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= <berykubik@gmail.com>
Date: Tue, 8 Aug 2023 23:43:36 +0200
Subject: [PATCH 12/12] Render up to 15 days of future in the benchmark detail
 graph

---
 site/frontend/src/graph/render.ts             |   5 +
 .../compile/table/benchmark-detail.vue        | 109 ++++++++++++++++--
 .../compile/table/comparisons-table.vue       |   5 +-
 .../src/pages/compare/compile/table/utils.ts  |  29 ++++-
 4 files changed, 133 insertions(+), 15 deletions(-)

diff --git a/site/frontend/src/graph/render.ts b/site/frontend/src/graph/render.ts
index b6daa36b7..cef018e0d 100644
--- a/site/frontend/src/graph/render.ts
+++ b/site/frontend/src/graph/render.ts
@@ -158,6 +158,7 @@ function genPlotOpts({
   alpha = 0.3,
   prox = 5,
   absoluteMode,
+  hooks,
 }) {
   return {
     width,
@@ -237,6 +238,7 @@ function genPlotOpts({
               ctx.stroke();
             },
           ],
+          ...hooks,
         },
       },
       tooltipPlugin({
@@ -280,6 +282,7 @@ function normalizeData(data: GraphData) {
 
 export type GraphRenderOpts = {
   renderTitle?: boolean;
+  hooks?: {drawSeries: (uPlot, number) => void};
 };
 
 // Renders the plots data with the given parameters from the `selector` into
@@ -291,6 +294,7 @@ export function renderPlots(
   opts?: GraphRenderOpts
 ) {
   const renderTitle = opts?.renderTitle ?? true;
+  const hooks = opts?.hooks ?? {};
 
   normalizeData(data);
 
@@ -379,6 +383,7 @@ export function renderPlots(
           return indices.has(dataIdx);
         },
         absoluteMode: selector.kind == "raw",
+        hooks,
       });
       if (renderTitle) {
         plotOpts["title"] = `${benchName}-${benchKind}`;
diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
index b10bdb4ed..ee85c5d38 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
+++ b/site/frontend/src/pages/compare/compile/table/benchmark-detail.vue
@@ -8,10 +8,11 @@ import {
 import {computed, onMounted, Ref, ref} from "vue";
 import Tooltip from "../../tooltip.vue";
 import {ArtifactDescription} from "../../types";
-import {getDateInPast} from "./utils";
-import {renderPlots} from "../../../../graph/render";
+import {daysBetweenDates, getFutureDate, getPastDate} from "./utils";
+import {GraphRenderOpts, renderPlots} from "../../../../graph/render";
 import {GRAPH_RESOLVER} from "../../../../graph/resolver";
 import {GraphKind} from "../../../../graph/data";
+import uPlot from "uplot";
 
 const props = defineProps<{
   testCase: CompileTestCase;
@@ -20,23 +21,116 @@ const props = defineProps<{
   benchmarkMap: CompileBenchmarkMap;
 }>();
 
+type GraphRange = {
+  start: string;
+  end: string;
+  date: Date | null;
+};
+
+// How many days are shown in the graph
+const DAY_RANGE = 30;
+
+/**
+ * Calculates the start and end range for a history graph for this benchmark
+ * and artifact.
+ */
+function getGraphRange(artifact: ArtifactDescription): GraphRange {
+  const date = new Date(artifact.date);
+
+  // If this is a try commit, we don't know its future, so always we just display
+  // the last `DAY_RANGE` days.
+  if (artifact.type === "try") {
+    return {
+      start: getPastDate(date, DAY_RANGE),
+      end: artifact.commit,
+      date: null,
+    };
+  } else {
+    // If this is a master commit, then we try to display `dayRange` days
+    // "centered" around the commit date.
+
+    // Calculate the end of the range, which is commit date + half of the
+    // amount of days we want to show. If this date is in the future,
+    // the server will clip the result at the current date.
+    const end = getFutureDate(date, DAY_RANGE / 2);
+
+    // Calculate how many days there have been from the commit date
+    const daysInFuture = Math.min(
+      DAY_RANGE / 2,
+      daysBetweenDates(date, new Date())
+    );
+
+    // Calculate how many days we should go into the past, taking into account
+    // the days that will be clipped by the server.
+    const daysInPast = DAY_RANGE - daysInFuture;
+
+    const start = getPastDate(date, daysInPast);
+    return {
+      start,
+      end,
+      date,
+    };
+  }
+}
+
+/**
+ * Hook into the uPlot drawing machinery to draw a vertical line at the
+ * position of the given `date`.
+ */
+function drawCurrentDate(opts: GraphRenderOpts, date: Date) {
+  opts.hooks = {
+    drawSeries: (u: uPlot) => {
+      let ctx = u.ctx;
+      ctx.save();
+
+      const y0 = u.bbox.top;
+      const y1 = y0 + u.bbox.height;
+      const x = u.valToPos(date.getTime() / 1000, "x", true);
+
+      ctx.beginPath();
+      ctx.moveTo(x, y0);
+      ctx.strokeStyle = "red";
+      ctx.setLineDash([5, 5]);
+      ctx.lineTo(x, y1);
+      ctx.stroke();
+
+      ctx.restore();
+    },
+  };
+}
+
 async function renderGraph() {
+  const {start, end, date} = graphRange.value;
   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,
+    start,
+    end,
     // 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.
     kind: "percentrelative" as GraphKind,
   };
   const graphData = await GRAPH_RESOLVER.loadGraph(selector);
-  renderPlots(graphData, selector, chartElement.value, {
+  const opts: GraphRenderOpts = {
     renderTitle: false,
-  });
+  };
+  if (date !== null) {
+    drawCurrentDate(opts, date);
+  }
+  renderPlots(graphData, selector, chartElement.value, opts);
+}
+
+function getGraphTitle() {
+  const {start, end, date} = graphRange.value;
+  const msg = `${DAY_RANGE} day history`;
+  if (date !== null) {
+    return `${msg} (${start} - ${end})`;
+  } else {
+    return `${msg} (up to benchmarked commit)`;
+  }
 }
 
 const metadata = computed(
@@ -58,6 +152,7 @@ const cargoProfile = computed((): CargoProfileMetadata => {
 });
 
 const chartElement: Ref<HTMLElement | null> = ref(null);
+const graphRange = computed(() => getGraphRange(props.artifact));
 
 onMounted(() => renderGraph());
 </script>
@@ -113,7 +208,7 @@ onMounted(() => renderGraph());
     </div>
     <div>
       <div class="title">
-        <div class="bold">30 day history (up to benchmarked commit)</div>
+        <div class="bold">{{ getGraphTitle() }}</div>
         <div style="font-size: 0.8em">
           Each plotted value is relative to its previous commit
         </div>
diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
index 02ee293db..9eaeb4ebd 100644
--- a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
+++ b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -7,7 +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";
+import {getPastDate} from "./utils";
 
 const props = defineProps<{
   id: string;
@@ -29,7 +29,8 @@ function graphLink(
   stat: string,
   comparison: TestCaseComparison<CompileTestCase>
 ): string {
-  const start = getDateInPast(commit);
+  // Move to `30 days ago` to display history of the test case
+  const start = getPastDate(new Date(commit.date), 30);
   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}`;
diff --git a/site/frontend/src/pages/compare/compile/table/utils.ts b/site/frontend/src/pages/compare/compile/table/utils.ts
index ca825b288..8f47b452f 100644
--- a/site/frontend/src/pages/compare/compile/table/utils.ts
+++ b/site/frontend/src/pages/compare/compile/table/utils.ts
@@ -1,14 +1,31 @@
-import {ArtifactDescription} from "../../types";
+/**
+ * Returns a date that is the given days in the past from the passed `date`.
+ */
+export function getPastDate(date: Date, days: number): string {
+  const past = new Date(date.getTime());
+  past.setUTCDate(date.getUTCDate() - days);
+  return format_ymd(past);
+}
 
 /**
- * Returns a date in the past for which we want to display a historical chart.
+ * Returns a date that is the given days in the future from the passed `date`.
  */
-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);
+export function getFutureDate(date: Date, days: number): string {
+  const future = new Date(date.getTime());
+  future.setUTCDate(date.getUTCDate() + days);
+  return format_ymd(future);
+}
+
+function format_ymd(date: Date): string {
   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}`;
 }
+
+/**
+ * Calculates the number of (whole) days between the two days.
+ */
+export function daysBetweenDates(a: Date, b: Date): number {
+  return Math.floor((b.getTime() - a.getTime()) / (1000 * 60 * 60 * 24));
+}