Expand when only one graph is selected

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,30 @@ 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 parentWidth = wrapperRef.value.clientWidth;
+  let columns = countGraphs === 1 ? 1 : 4;
+
+  // Small display, reduce column count to 1
+  if (parentWidth < 1000) {
+    columns = 1;
+  }
+
+  // Calculate the width of each column.
+  // Provide a 10px buffer to avoid wrapping if the size is just at the limit
+  // of the parent.
+  const width = Math.floor(wrapperRef.value.clientWidth / columns) - 10;
+
+  const top = wrapperRef.value.getBoundingClientRect().top;
+  const height = countGraphs === 1 ? window.innerHeight - top - 100 : 300;
+
+  const opts = {
+    width,
+    height,
+  };
 
   // If we select a smaller subset of benchmarks, then just show them.
   if (hasSpecificSelection(selector)) {
@@ -115,8 +137,10 @@ function updateSelection(params: SelectionParams) {
 const info: BenchmarkInfo = await loadBenchmarkInfo();
 
 const loading = ref(true);
+const wrapperRef = ref(null);
 
 const selector: GraphsSelector = loadSelectorFromUrl(getUrlParams());
+
 loadGraphData(selector, loading);
 </script>
 
@@ -138,21 +162,29 @@ loadGraphData(selector, loading);
     interpolated due to missing data. Interpolated data is simply the last known
     data point repeated until another known data point is found.
   </div>
-  <div v-if="loading">
-    <h2>Loading &amp; rendering data..</h2>
-    <h3>This may take a while!</h3>
-  </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 optimized for small binary size</strong>
+  <div class="wrapper" ref="wrapperRef">
+    <div v-if="loading">
+      <h2>Loading &amp; rendering data..</h2>
+      <h3>This may take a while!</h3>
+    </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 optimized for small binary size</strong>
+        </div>
+        <div id="size-charts"></div>
       </div>
-      <div id="size-charts"></div>
+      <AsOf :info="info" />
     </div>
-    <AsOf :info="info" />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.wrapper {
+  width: 100%;
+}
+</style>

site/frontend/templates/pages/graphs.html

@@ -43,6 +43,7 @@
         margin: 0;
     }
 </style>
+<link rel="stylesheet" type="text/css" href="scripts/graphs.css">
 {% endblock %}
 {% block content %}
 <div id="app"></div>