Skip to content

[feature] Redesign JMH benchmark dashboards: grouping, search, dark mode #6654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
duncdrum wants to merge 1 commit into
base: gh-pages
Choose a base branch
from
+854 −572
Open

[feature] Redesign JMH benchmark dashboards: grouping, search, dark mode #6654

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
342 changes: 62 additions & 280 deletions dev/bench/core/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,281 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
<style>
html {
font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
background-color: #fff;
font-size: 16px;
}
body {
color: #4a4a4a;
margin: 8px;
font-size: 1em;
font-weight: 400;
}
header {
margin-bottom: 8px;
display: flex;
flex-direction: column;
}
main {
width: 100%;
display: flex;
flex-direction: column;
}
a {
color: #3273dc;
cursor: pointer;
text-decoration: none;
}
a:hover {
color: #000;
}
button {
color: #fff;
background-color: #3298dc;
border-color: transparent;
cursor: pointer;
text-align: center;
}
button:hover {
background-color: #2793da;
flex: none;
}
.spacer {
flex: auto;
}
.small {
font-size: 0.75rem;
}
footer {
margin-top: 16px;
display: flex;
align-items: center;
}
.header-label {
margin-right: 4px;
}
.benchmark-set {
margin: 8px 0;
width: 100%;
display: flex;
flex-direction: column;
}
.benchmark-title {
font-size: 3rem;
font-weight: 600;
word-break: break-word;
text-align: center;
}
.benchmark-graphs {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.benchmark-chart {
max-width: 1000px;
}
</style>
<title>Benchmarks</title>
</head>

<body>
<header id="header">
<div class="header-item">
<strong class="header-label">Last Update:</strong>
<span id="last-update"></span>
</div>
<div class="header-item">
<strong class="header-label">Repository:</strong>
<a id="repository-link" rel="noopener"></a>
</div>
</header>
<main id="main"></main>
<footer>
<button id="dl-button">Download data as JSON</button>
<div class="spacer"></div>
<div class="small">Powered by <a rel="noopener" href="https://github.com/marketplace/actions/continuous-benchmark">github-action-benchmark</a></div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.2/dist/Chart.min.js"></script>
<script src="data.js"></script>
<script id="main-script">
'use strict';
(function() {
// Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
const toolColors = {
cargo: '#dea584',
go: '#00add8',
benchmarkjs: '#f1e05a',
benchmarkluau: '#000080',
pytest: '#3572a5',
googlecpp: '#f34b7d',
catch2: '#f34b7d',
julia: '#a270ba',
jmh: '#b07219',
benchmarkdotnet: '#178600',
customBiggerIsBetter: '#38ff38',
customSmallerIsBetter: '#ff3838',
_: '#333333'
};

function init() {
function collectBenchesPerTestCase(entries) {
const map = new Map();
for (const entry of entries) {
const {commit, date, tool, benches} = entry;
for (const bench of benches) {
const result = { commit, date, tool, bench };
const arr = map.get(bench.name);
if (arr === undefined) {
map.set(bench.name, [result]);
} else {
arr.push(result);
}
}
}
return map;
}

const data = window.BENCHMARK_DATA;

// Render header
document.getElementById('last-update').textContent = new Date(data.lastUpdate).toString();
const repoLink = document.getElementById('repository-link');
repoLink.href = data.repoUrl;
repoLink.textContent = data.repoUrl;

// Render footer
document.getElementById('dl-button').onclick = () => {
const dataUrl = 'data:,' + JSON.stringify(data, null, 2);
const a = document.createElement('a');
a.href = dataUrl;
a.download = 'benchmark_data.json';
a.click();
};

// Prepare data points for charts
return Object.keys(data.entries).map(name => ({
name,
dataSet: collectBenchesPerTestCase(data.entries[name]),
}));
}

function renderAllChars(dataSets) {

function renderGraph(parent, name, dataset) {
const canvas = document.createElement('canvas');
canvas.className = 'benchmark-chart';
parent.appendChild(canvas);

const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
const data = {
labels: dataset.map(d => d.commit.id.slice(0, 7)),
datasets: [
{
label: name,
data: dataset.map(d => d.bench.value),
borderColor: color,
backgroundColor: color + '60', // Add alpha for #rrggbbaa
}
],
};
const options = {
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'commit',
},
}
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: dataset.length > 0 ? dataset[0].bench.unit : '',
},
ticks: {
beginAtZero: true,
}
}
],
},
tooltips: {
callbacks: {
afterTitle: items => {
const {index} = items[0];
const data = dataset[index];
return '\n' + data.commit.message + '\n\n' + data.commit.timestamp + ' committed by @' + data.commit.committer.username + '\n';
},
label: item => {
let label = item.value;
const { range, unit } = dataset[item.index].bench;
label += ' ' + unit;
if (range) {
label += ' (' + range + ')';
}
return label;
},
afterLabel: item => {
const { extra } = dataset[item.index].bench;
return extra ? '\n' + extra : '';
}
}
},
onClick: (_mouseEvent, activeElems) => {
if (activeElems.length === 0) {
return;
}
// XXX: Undocumented. How can we know the index?
const index = activeElems[0]._index;
const url = dataset[index].commit.url;
window.open(url, '_blank');
},
};

new Chart(canvas, {
type: 'line',
data,
options,
});
}

function renderBenchSet(name, benchSet, main) {
const setElem = document.createElement('div');
setElem.className = 'benchmark-set';
main.appendChild(setElem);

const nameElem = document.createElement('h1');
nameElem.className = 'benchmark-title';
nameElem.textContent = name;
setElem.appendChild(nameElem);

const graphsElem = document.createElement('div');
graphsElem.className = 'benchmark-graphs';
setElem.appendChild(graphsElem);

for (const [benchName, benches] of benchSet.entries()) {
renderGraph(graphsElem, benchName, benches)
}
}

const main = document.getElementById('main');
for (const {name, dataSet} of dataSets) {
renderBenchSet(name, dataSet, main);
}
}

renderAllChars(init()); // Start
})();
</script>
</body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
<title>exist-core-jmh Benchmarks — eXist-db</title>
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<div class="layout" style="flex-direction: column; width: 100%;">
<nav class="crumbs">
<a href="../../">eXist-db Benchmarks</a>
<span class="sep">/</span>
<span>exist-core-jmh</span>
<span class="sep">·</span>
<a href="../indexes/">exist-indexes-jmh</a>
<span class="sep">·</span>
<a href="https://github.com/eXist-db/exist" rel="noopener">GitHub</a>
</nav>
<div class="layout" style="flex: 1;">
<aside class="sidebar" id="sidebar"></aside>
<main class="main">
<div class="controlbar">
<h1>exist-core-jmh</h1>
<span class="meta" id="last-update"></span>
<div class="spacer"></div>
<input id="search" type="search" placeholder="Filter benchmarks…" aria-label="Filter benchmarks" />
<button class="btn" id="theme-toggle" type="button"></button>
<button class="btn" id="dl-button" type="button">Download JSON</button>
</div>
<div id="main"></div>
<footer class="page-footer">
<span>Data: <a id="repository-link" rel="noopener"></a></span>
<span>Powered by <a rel="noopener" href="https://github.com/marketplace/actions/continuous-benchmark">github-action-benchmark</a> · rendered by a custom dashboard, see <a href="https://github.com/eXist-db/exist/blob/develop/.github/workflows/ci-benchmarks.yml">ci-benchmarks.yml</a></span>
</footer>
</main>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script src="../dashboard.js"></script>
<script src="data.js"></script>
<script>
(function () {
const data = window.BENCHMARK_DATA;
document.getElementById('last-update').textContent = 'Last update: ' + new Date(data.lastUpdate).toLocaleString();
const repoLink = document.getElementById('repository-link');
repoLink.href = data.repoUrl;
repoLink.textContent = data.repoUrl;
document.getElementById('dl-button').onclick = () => {
const a = document.createElement('a');
a.href = 'data:,' + encodeURIComponent(JSON.stringify(data, null, 2));
a.download = 'exist-core-jmh_benchmark_data.json';
a.click();
};

BenchDashboard.wireTheme(document.getElementById('theme-toggle'));
BenchDashboard.render(document.getElementById('main'), document.getElementById('sidebar'), data, 'exist-core-jmh');
BenchDashboard.wireSearch(document.getElementById('search'));
})();
</script>
</body>
</html>
Loading