Merge pull request #1690 from Kobzol/benchmark-detail-graph

Add history graph to benchmark detail

Author: Kobzol

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

site/frontend/src/pages/graphs/state.ts renamed to site/frontend/src/graph/data.ts

@@ -1,5 +1,5 @@
 import uPlot, {TypedArray} from "uplot";
-import {GraphData, GraphsSelector} from "./state";
+import {GraphData, GraphsSelector} from "./data";
 
 const commonCacheStateColors = {
   full: "#7cb5ec",
@@ -148,7 +148,6 @@ function tooltipPlugin({
 }
 
 function genPlotOpts({
-  title,
   width,
   height,
   yAxisLabel,
@@ -159,9 +158,9 @@ function genPlotOpts({
   alpha = 0.3,
   prox = 5,
   absoluteMode,
+  hooks,
 }) {
   return {
-    title,
     width,
     height,
     series,
@@ -239,6 +238,7 @@ function genPlotOpts({
               ctx.stroke();
             },
           ],
+          ...hooks,
         },
       },
       tooltipPlugin({
@@ -280,13 +280,22 @@ 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;
+  hooks?: {drawSeries: (uPlot, number) => void};
+};
+
+// Renders the plots data with the given parameters from the `selector` into
+// the passed DOM element.
 export function renderPlots(
   data: GraphData,
   selector: GraphsSelector,
-  elementSelector: string
+  plotElement: HTMLElement,
+  opts?: GraphRenderOpts
 ) {
+  const renderTitle = opts?.renderTitle ?? true;
+  const hooks = opts?.hooks ?? {};
+
   normalizeData(data);
 
   const names = Object.keys(data.benchmarks).sort();
@@ -364,7 +373,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,
@@ -375,13 +383,13 @@ export function renderPlots(
           return indices.has(dataIdx);
         },
         absoluteMode: selector.kind == "raw",
+        hooks,
       });
+      if (renderTitle) {
+        plotOpts["title"] = `${benchName}-${benchKind}`;
+      }
 
-      new uPlot(
-        plotOpts,
-        plotData as any as TypedArray[],
-        document.querySelector<HTMLElement>(elementSelector)
-      );
+      new uPlot(plotOpts, plotData as any as TypedArray[], plotElement);
 
       i++;
     }

site/frontend/src/pages/graphs/plots.ts renamed to site/frontend/src/graph/render.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();