From e3f05d52c7fddc972c9fc72ea5b4e737241b5ae9 Mon Sep 17 00:00:00 2001
From: Shina <53410646+s7tya@users.noreply.github.com>
Date: Wed, 9 Oct 2024 01:13:43 +0900
Subject: [PATCH] expand when only one graph is selected

---
 site/frontend/src/graph/render.ts             | 10 +++++----
 .../compile/table/benchmark-detail-graph.vue  |  1 +
 .../runtime/benchmark-detail-graph.vue        |  1 +
 site/frontend/src/pages/graphs/page.vue       | 22 +++++++++++++++++--
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/site/frontend/src/graph/render.ts b/site/frontend/src/graph/render.ts
index 47f1375a2..61fda201f 100644
--- a/site/frontend/src/graph/render.ts
+++ b/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,
diff --git a/site/frontend/src/pages/compare/compile/table/benchmark-detail-graph.vue b/site/frontend/src/pages/compare/compile/table/benchmark-detail-graph.vue
index e0ba01ab1..1e7041cfa 100644
--- a/site/frontend/src/pages/compare/compile/table/benchmark-detail-graph.vue
+++ b/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) {
diff --git a/site/frontend/src/pages/compare/runtime/benchmark-detail-graph.vue b/site/frontend/src/pages/compare/runtime/benchmark-detail-graph.vue
index 1c4d34134..eb5ca25a3 100644
--- a/site/frontend/src/pages/compare/runtime/benchmark-detail-graph.vue
+++ b/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) {
diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue
index 5b5ce8ae9..7a503cc7c 100644
--- a/site/frontend/src/pages/graphs/page.vue
+++ b/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)) {