expand when only one graph is selected

Author: s7tya

site/frontend/src/graph/render.ts

@@ -400,6 +400,8 @@ function normalizeData(data: CompileGraphData) {
 export type GraphRenderOpts = {
   // Width of the graph
   width: number;
+  // Height of the graph
+  height: number;
   // Render a title above the graph
   renderTitle?: boolean;
   // Function that can be used to hook into the rendering process
@@ -416,7 +418,7 @@ export function renderPlots(
 ) {
   const renderTitle = opts.renderTitle ?? true;
   const hooks = opts.hooks ?? {};
-  const width = opts.width;
+  const {width, height} = opts;
 
   normalizeData(data);
 
@@ -504,7 +506,7 @@ export function renderPlots(
 
       let plotOpts = genPlotOpts({
         width,
-        height: 300,
+        height,
         yAxisLabel,
         series: seriesOpts,
         commits: data.commits,
@@ -534,7 +536,7 @@ export function renderRuntimePlots(
 ) {
   const renderTitle = opts.renderTitle ?? true;
   const hooks = opts.hooks ?? {};
-  const width = opts.width;
+  const {width, height} = opts;
 
   const benchNames = Object.keys(data.benchmarks).sort();
 
@@ -610,7 +612,7 @@ export function renderRuntimePlots(
 
     let plotOpts = genPlotOpts({
       width,
-      height: 300,
+      height,
       yAxisLabel,
       series: seriesOpts,
       commits: data.commits,

site/frontend/src/pages/compare/compile/table/benchmark-detail-graph.vue

@@ -120,6 +120,7 @@ async function renderGraph(
 ) {
   const opts: GraphRenderOpts = {
     width: Math.min(window.innerWidth - 40, 465),
+    height: 300,
     renderTitle: false,
   };
   if (date !== null) {

site/frontend/src/pages/compare/runtime/benchmark-detail-graph.vue

@@ -109,6 +109,7 @@ async function renderGraph(
 ) {
   const opts: GraphRenderOpts = {
     width: Math.min(window.innerWidth - 40, 465),
+    height: 300,
     renderTitle: false,
   };
   if (date !== null) {

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

@@ -68,8 +68,26 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref<boolean>) {
   // Then draw the plots.
   await nextTick();
 
-  const width = Math.max(Math.floor(window.innerWidth / 4) - 40, 380);
-  const opts = {width};
+  const countGraphs = Object.keys(graphData.benchmarks)
+    .map((benchmark) => Object.keys(graphData.benchmarks[benchmark]).length)
+    .reduce((sum, item) => sum + item, 0);
+
+  const columns = countGraphs === 1 ? 1 : 4;
+
+  const root = document.getElementById("app")!;
+  const width = Math.max(Math.floor(root.clientWidth / columns), 380);
+
+  const bodyEl = document.querySelector("body.container")!;
+  const chartsEl = document.getElementById("charts")!;
+  const height =
+    countGraphs === 1
+      ? window.innerHeight - bodyEl.clientHeight + chartsEl.clientHeight - 60
+      : 300;
+
+  const opts = {
+    width,
+    height,
+  };
 
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {