Separate size-related charts from regular charts

site/.gitignore

@@ -2,3 +2,4 @@
 /target
 frontend/node_modules
 frontend/dist/**/
+frontend/.parcel-cache

site/frontend/src/pages/graphs/content.vue

@@ -28,6 +28,28 @@ function loadSelectorFromUrl(urlParams: Dict<string>): GraphsSelector {
   };
 }
 
+function filterBenchmarks(data: GraphData, filter: (key: string) => boolean): GraphData {
+  const benchmarks = Object.fromEntries(Object.entries(data.benchmarks)
+    .filter(([key, _]) => filter(key)));
+  return {
+    ...data,
+    benchmarks
+  };
+}
+
+/*
+ * Returns true if a specific subset of charts is selected by benchmark
+ * name, profile or scenario. In that case, the regular aligned grid of charts
+ * will not be shown.
+ */
+function hasSpecificSelection(selector: GraphsSelector): boolean {
+  return (
+    selector.benchmark !== null ||
+    selector.profile !== null ||
+    selector.scenario !== null
+  );
+}
+
 async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
   const graphData: GraphData = await withLoading(loading, async () => {
     const params = {
@@ -45,7 +67,25 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
   // Wait for the UI to be updated, which also resets the plot HTML elements.
   // Then draw the plots.
   await nextTick();
-  renderPlots(graphData, selector);
+
+  // If we select a smaller subset of benchmarks, then just show them.
+  if (hasSpecificSelection(selector)) {
+    renderPlots(graphData, selector, "#charts");
+  } else {
+    // If we select all of them, we expect that there will be a regular grid.
+
+    // So, first render everything but the less important benchmarks about artifact sizes.
+    // This keeps the grouping and alignment of 4 charts per row where all 4 charts are about a
+    // given benchmark. So, we exclude the benchmarks ending in "-tiny".
+    const withoutTiny = filterBenchmarks(graphData, (benchName) => !benchName.endsWith("-tiny"));
+    renderPlots(withoutTiny, selector, "#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
+    // "-tiny" and render them in the appropriate section.
+    const onlyTiny = filterBenchmarks(graphData, (benchName) => benchName.endsWith("-tiny"));
+    renderPlots(onlyTiny, selector, "#size-charts");
+  }
 }
 
 function updateSelection(params: SelectionParams) {
@@ -59,7 +99,7 @@ function updateSelection(params: SelectionParams) {
 
 const info: BenchmarkInfo = await getRequest<BenchmarkInfo>(INFO_URL);
 
-let loading = ref(true);
+const loading = ref(true);
 
 const selector: GraphsSelector = loadSelectorFromUrl(getUrlParams());
 loadGraphData(selector, loading);
@@ -83,6 +123,10 @@ loadGraphData(selector, loading);
   </div>
   <div v-else>
     <div id="charts"></div>
+    <div v-if="!hasSpecificSelection(selector)" style="margin-top: 50px; border-top: 1px solid #ccc;">
+      <div style="padding: 20px 0"><strong>Benchmarks for artifact sizes</strong></div>
+      <div id="size-charts"></div>
+    </div>
     <div id="as-of">
       Updated as of: {{ new Date(info.as_of).toLocaleString() }}
     </div>

site/frontend/src/pages/graphs/plots.ts

@@ -242,7 +242,9 @@ function normalizeData(data: GraphData) {
     }
 }
 
-export function renderPlots(data: GraphData, selector: GraphsSelector) {
+// Renders the plots data with the given parameters from the `selector`, into a DOM node optionally
+// selected by the `elementSelector` query.
+export function renderPlots(data: GraphData, selector: GraphsSelector, elementSelector: string) {
     normalizeData(data);
 
     const names = Object.keys(data.benchmarks).sort();
@@ -330,7 +332,7 @@ export function renderPlots(data: GraphData, selector: GraphsSelector) {
                 absoluteMode: selector.kind == "raw",
             });
 
-            new uPlot(plotOpts, plotData as any as TypedArray[], document.querySelector<HTMLElement>("#charts"));
+            new uPlot(plotOpts, plotData as any as TypedArray[], document.querySelector<HTMLElement>(elementSelector));
 
             i++;
         }

site/frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "lib": ["es5", "es2015", "es2017", "dom"],
+    "lib": ["es2020", "dom"],
     "target": "es2017",
     "moduleResolution": "node",
     "rootDir": "src",