Render up to 15 days of future in the benchmark detail graph

Author: Kobzol

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}`;

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>

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}`;

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