From 725ca0251b3c9dfc263a17ffb9afacb652d54f7a 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 1/3] 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 1b5a45a8b..7690e0750 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 a7fddf1cd..6536b4011 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) { // 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)) { From 58c92b5c8108746a007857d9cc7556908454d24a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Thu, 10 Oct 2024 00:49:05 +0200 Subject: [PATCH 2/3] Make width calculation a little bit more robust --- site/frontend/src/pages/graphs/page.vue | 52 +++++++++++++++-------- site/frontend/templates/pages/graphs.html | 1 + 2 files changed, 36 insertions(+), 17 deletions(-) diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue index 7a503cc7c..5c10e8e4e 100644 --- a/site/frontend/src/pages/graphs/page.vue +++ b/site/frontend/src/pages/graphs/page.vue @@ -72,10 +72,18 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref) { .map((benchmark) => Object.keys(graphData.benchmarks[benchmark]).length) .reduce((sum, item) => sum + item, 0); - const columns = countGraphs === 1 ? 1 : 4; + const parentWidth = wrapperRef.value.clientWidth; + let columns = countGraphs === 1 ? 1 : 4; - const root = document.getElementById("app")!; - const width = Math.max(Math.floor(root.clientWidth / columns), 380); + // 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 bodyEl = document.querySelector("body.container")!; const chartsEl = document.getElementById("charts")!; @@ -133,8 +141,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); @@ -156,21 +166,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. -
-

Loading & rendering data..

-

This may take a while!

-
-
-
-
-
- Benchmarks optimized for small binary size +
+
+

Loading & rendering data..

+

This may take a while!

+
+
+
+
+
+ Benchmarks optimized for small binary size +
+
-
+
-
+ + diff --git a/site/frontend/templates/pages/graphs.html b/site/frontend/templates/pages/graphs.html index c1b20f59b..cd738a6c9 100644 --- a/site/frontend/templates/pages/graphs.html +++ b/site/frontend/templates/pages/graphs.html @@ -43,6 +43,7 @@ margin: 0; } + {% endblock %} {% block content %}
From 56613af1c48275bfab4fdf5cd1198fb7d67ff838 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jakub=20Ber=C3=A1nek?= Date: Thu, 10 Oct 2024 00:59:32 +0200 Subject: [PATCH 3/3] Make height calculation simpler --- site/frontend/src/pages/graphs/page.vue | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/site/frontend/src/pages/graphs/page.vue b/site/frontend/src/pages/graphs/page.vue index 5c10e8e4e..9eff6a047 100644 --- a/site/frontend/src/pages/graphs/page.vue +++ b/site/frontend/src/pages/graphs/page.vue @@ -85,12 +85,8 @@ async function loadGraphData(selector: GraphsSelector, loading: Ref) { // of the parent. const width = Math.floor(wrapperRef.value.clientWidth / columns) - 10; - const bodyEl = document.querySelector("body.container")!; - const chartsEl = document.getElementById("charts")!; - const height = - countGraphs === 1 - ? window.innerHeight - bodyEl.clientHeight + chartsEl.clientHeight - 60 - : 300; + const top = wrapperRef.value.getBoundingClientRect().top; + const height = countGraphs === 1 ? window.innerHeight - top - 100 : 300; const opts = { width,