Add cache for downloading graphs on compare page

Author: Kobzol

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();

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