Skip to content

Commit 79aa3ce

Browse files
rylevrylev
authored
Merge pull request #946 from rylev/bigger-summary
Add more figures to the summary
2 parents 49c9f1a + 1dcf3df commit 79aa3ce

File tree

1 file changed

+74
-67
lines changed

1 file changed

+74
-67
lines changed

‎site/static/compare.html

+74-67
Original file line numberDiff line numberDiff line change
@@ -208,9 +208,17 @@
208208
text-align: center;
209209
}
210210

211+
#summary {
212+
border: 1px dashed;
213+
padding: 4px;
214+
border-radius: 6px;
215+
}
216+
211217
.summary {
212218
display: flex;
219+
justify-content: center;
213220
align-items: center;
221+
width: 20%;
214222
}
215223
</style>
216224
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
@@ -322,7 +330,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
322330
</li>
323331
<li>
324332
<label>
325-
<input type="checkbox" id="build-incremental-unchanged" v-model="filter.cache.incrUnchanged" />
333+
<input type="checkbox" id="build-incremental-unchanged"
334+
v-model="filter.cache.incrUnchanged" />
326335
<span class="cache-label">incr-unchanged</span>
327336
</label>
328337
<div class="tooltip">?
@@ -334,7 +343,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
334343
</li>
335344
<li>
336345
<label>
337-
<input type="checkbox" id="build-incremental-patched" v-model="filter.cache.incrPatched" />
346+
<input type="checkbox" id="build-incremental-patched"
347+
v-model="filter.cache.incrPatched" />
338348
<span class="cache-label">incr-patched</span>
339349
</label>
340350
<div class="tooltip">?
@@ -352,7 +362,8 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
352362
<span class="tooltip">?
353363
<span class="tooltiptext">
354364
Whether to filter out all benchmarks that do not show significant changes. A significant
355-
change is any change above 0.2% for non-noisy benchmarks and 1.0% for noisy ones.
365+
change is any change greater than or equal to 0.2% for non-noisy benchmarks and above
366+
1.0% for noisy ones.
356367
</span>
357368
</span>
358369
</div>
@@ -361,30 +372,35 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
361372
</div>
362373
</fieldset>
363374
<div v-if="data" id="content" style="margin-top: 15px">
364-
<div style="display: flex; justify-content: space-evenly;">
365-
<span style="font-weight: bold;">Summary:</span>
366-
<span class="summary positive">
367-
{{summary.numRegressed}}
368-
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
369-
<path
370-
d="M16,18L18.29,15.71L13.41,10.83L9.41,14.83L2,7.41L3.41,6L9.41,12L13.41,8L19.71,14.29L22,12V18H16Z">
371-
</path>
372-
</svg>
373-
</span>
374-
<span class="summary">
375-
{{summary.numUnchanged}}
376-
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
377-
<path d="M22,12L18,8V11H3V13H18V16L22,12Z"></path>
378-
</svg>
379-
</span>
380-
<span class="summary negative">
381-
{{summary.numImproved}}
382-
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
383-
<path
384-
d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z">
385-
</path>
386-
</svg>
387-
</span>
375+
<div id="summary">
376+
<div v-for="summaryPair in Object.entries(summary)" style="display: flex;">
377+
<span style="font-weight: bold; width: 30%; margin-left: 15%; text-transform: capitalize;">{{
378+
summaryPair[0] }}:</span>
379+
<div style="display: flex; justify-content: flex-end; width: 80%; margin-right: 15%;">
380+
<span class="summary positive">
381+
{{summaryPair[1].regressions.toString().padStart(3, "&nbsp;")}}
382+
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
383+
<path
384+
d="M16,18L18.29,15.71L13.41,10.83L9.41,14.83L2,7.41L3.41,6L9.41,12L13.41,8L19.71,14.29L22,12V18H16Z">
385+
</path>
386+
</svg>
387+
</span>
388+
<span class="summary">
389+
{{summaryPair[1].unchanged.toString().padStart(3, "&nbsp;")}}
390+
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
391+
<path d="M22,12L18,8V11H3V13H18V16L22,12Z"></path>
392+
</svg>
393+
</span>
394+
<span class="summary negative">
395+
{{summaryPair[1].improvements.toString().padStart(3, "&nbsp;")}}
396+
<svg style="width:18px;height:18px" viewBox="0 0 24 24">
397+
<path
398+
d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z">
399+
</path>
400+
</svg>
401+
</span>
402+
</div>
403+
</div>
388404
</div>
389405
<table id="benches" class="compare">
390406
<template v-for="bench in benches">
@@ -407,7 +423,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
407423
<a
408424
v-bind:href="percentLink(data.b.commit, data.a.commit, bench.name, run.casename)">
409425
<span v-bind:class="percentClass(run.percent)">
410-
{{ run.percent }}%{{run.isDodgy ? "?" : ""}}
426+
{{ run.percent.toFixed(2) }}%{{run.isDodgy ? "?" : ""}}
411427
</span>
412428
</a>
413429
</td>
@@ -520,11 +536,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
520536
if (!datumB) {
521537
continue;
522538
}
523-
let percent = (100 * (datumB - datumA) / datumA).toFixed(1);
524-
if (percent === "-0.0") {
525-
percent = "0.0";
526-
}
527-
539+
let percent = (100 * (datumB - datumA) / datumA);
528540
let isDodgy = false;
529541
if (data.variance) {
530542
let variance = data.variance[name + "-" + key];
@@ -548,11 +560,10 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
548560
Object.keys(data.a.data).
549561
filter(n => filter.name && filter.name.trim() ? n.includes(filter.name.trim()) : true).
550562
map(name => {
551-
const variants = toVariants(name).filter(v => filter.showOnlySignificant ? isSignificant(v) : true);
563+
const variants = toVariants(name).filter(v => filter.showOnlySignificant ? isSignificant(v.percent, v.isDodgy) : true);
552564
const pcts = variants.map(field => parseFloat(field.percent));
553565
const maxPct = Math.max(...pcts).toFixed(1);
554566
const minPct = Math.min(...pcts).toFixed(1);
555-
const maxCasenameLen = Math.max(...variants.map(f => f.casename.length));
556567
if (variants.length > 0) {
557568
variants[0].first = true;
558569
}
@@ -562,7 +573,6 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
562573
variants,
563574
maxPct,
564575
minPct,
565-
maxCasenameLen,
566576
};
567577
}).
568578
filter(b => b.variants.length > 0);
@@ -626,34 +636,32 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
626636
return findQueryParam("stat") || "instructions:u";
627637
},
628638
summary() {
629-
let numRegressed = 0;
630-
let numImproved = 0;
631-
let numUnchanged = 0;
632-
for (let name of Object.keys(this.data.a.data)) {
633-
for (let d of this.data.a.data[name]) {
634-
const run = d[0];
639+
const filtered = Object.fromEntries(this.benches.map(b => [b.name, Object.fromEntries(b.variants.map(v => [v.casename, true]))]));
640+
const newCount = { regressions: 0, improvements: 0, unchanged: 0 }
641+
let result = { all: { ...newCount }, filtered: { ...newCount } }
642+
for (let benchmarkAndProfile of Object.keys(this.data.a.data)) {
643+
for (let d of this.data.a.data[benchmarkAndProfile]) {
644+
const scenario = d[0];
635645
const datumA = d[1];
636-
const datumB = this.data.b.data[name]?.find(x => x[0] == run)?.[1];
646+
const datumB = this.data.b.data[benchmarkAndProfile]?.find(x => x[0] == scenario)?.[1];
637647
if (!datumB) {
638648
continue;
639649
}
640650
let percent = 100 * ((datumB - datumA) / datumA);
641-
const isDodgy = this.isDodgy(name, run);
642-
const threshold = isDodgy ? 1.0 : 0.2;
643-
if (percent > threshold) {
644-
numRegressed += 1;
645-
} else if (percent < -threshold) {
646-
numImproved += 1;
651+
const isDodgy = this.isDodgy(benchmarkAndProfile, scenario);
652+
if (percent > 0 && isSignificant(percent, isDodgy)) {
653+
result.all.regressions += 1;
654+
result.filtered.regressions += filtered[benchmarkAndProfile]?.[scenario] || 0;
655+
} else if (percent < 0 && isSignificant(percent, isDodgy)) {
656+
result.all.improvements += 1;
657+
result.filtered.improvements += filtered[benchmarkAndProfile]?.[scenario] || 0;
647658
} else {
648-
numUnchanged += 1
659+
result.all.unchanged += 1;
660+
result.filtered.unchanged += filtered[benchmarkAndProfile]?.[scenario] || 0;
649661
}
650662
}
651663
}
652-
return {
653-
numRegressed,
654-
numImproved,
655-
numUnchanged,
656-
}
664+
return result;
657665

658666
}
659667
},
@@ -668,11 +676,11 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
668676
let klass = "";
669677
if (pct > 1) {
670678
klass = 'positive';
671-
} else if (pct > 0.1) {
679+
} else if (pct >= 0.2) {
672680
klass = 'slightly-positive';
673681
} else if (pct < -1) {
674682
klass = 'negative';
675-
} else if (pct < -0.1) {
683+
} else if (pct <= -0.2) {
676684
klass = 'slightly-negative';
677685
}
678686
return klass;
@@ -713,25 +721,24 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
713721
}
714722
return result;
715723
},
716-
isDodgy(name, run) {
724+
isDodgy(benchmarkAndProfile, scenario) {
717725
let variance = this.data.variance;
718726
if (!variance) {
719727
return false;
720728
}
721-
variance = this.data.variance[name + "-" + run];
729+
variance = this.data.variance[benchmarkAndProfile + "-" + scenario];
722730
return (variance?.description?.type ?? "Normal") != "Normal";
723-
}
731+
},
724732
},
725733
});
726734

727-
function isSignificant(variant) {
728-
const percent = Math.abs(variant.percent);
729-
if (variant.isDodgy) {
730-
return percent > 1.0;
735+
function isSignificant(percent, isNoisy) {
736+
const perAbs = Math.abs(percent);
737+
if (isNoisy) {
738+
return perAbs > 1.0;
731739
} else {
732-
return percent > 0.2;
740+
return perAbs >= 0.2;
733741
}
734-
735742
}
736743

737744
function toggleFilters(id, toggle) {
@@ -790,4 +797,4 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
790797
</script>
791798
</body>
792799

793-
</html>
800+
</html>

0 commit comments

Comments
 (0)