Skip to content

Commit 53282c1

Browse files
lqdlqd
authored
Merge pull request #1729 from lqd/double-graphs-all-the-way
Add absolute chart to benchmark details
2 parents 414230a + 5027828 commit 53282c1

File tree

1 file changed

+122
-92
lines changed

1 file changed

+122
-92
lines changed

‎site/frontend/src/pages/compare/compile/table/benchmark-detail.vue‎

Lines changed: 122 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,18 @@ function drawCurrentDate(opts: GraphRenderOpts, date: Date) {
9696
};
9797
}
9898
99-
async function renderGraph() {
99+
// Render both relative and absolute graphs
100+
async function renderGraphs() {
101+
// We want to be able to see noise "blips" vs. a previous artifact.
102+
// The "percent relative from previous commit" graph should be the best to
103+
// see these kinds of changes.
104+
renderGraph("percentrelative" as GraphKind, relativeChartElement);
105+
// We also want to see whether a change maintained its value or whether it was noise and has since
106+
// returned to steady state. Here, an absolute graph ("raw") is best.
107+
renderGraph("raw" as GraphKind, absoluteChartElement);
108+
}
109+
110+
async function renderGraph(kind: GraphKind, chartRef: Ref<HTMLElement | null>) {
100111
const {start, end, date} = graphRange.value;
101112
const selector = {
102113
benchmark: props.testCase.benchmark,
@@ -105,20 +116,17 @@ async function renderGraph() {
105116
stat: props.metric,
106117
start,
107118
end,
108-
// We want to be able to see noise "blips" vs. a previous artifact.
109-
// The "percent relative from previous commit" graph should be the best to
110-
// see these kinds of changes.
111-
kind: "percentrelative" as GraphKind,
119+
kind,
112120
};
113121
const graphData = await GRAPH_RESOLVER.loadGraph(selector);
114122
const opts: GraphRenderOpts = {
115-
width: Math.min(window.innerWidth - 40, 480),
123+
width: Math.min(window.innerWidth - 40, 465),
116124
renderTitle: false,
117125
};
118126
if (date !== null) {
119127
drawCurrentDate(opts, date);
120128
}
121-
renderPlots(graphData, selector, chartElement.value, opts);
129+
renderPlots(graphData, selector, chartRef.value, opts);
122130
}
123131
124132
function getGraphTitle() {
@@ -177,7 +185,8 @@ const cargoProfile = computed((): CargoProfileMetadata => {
177185
}
178186
});
179187
180-
const chartElement: Ref<HTMLElement | null> = ref(null);
188+
const relativeChartElement: Ref<HTMLElement | null> = ref(null);
189+
const absoluteChartElement: Ref<HTMLElement | null> = ref(null);
181190
const graphRange = computed(() => getGraphRange(props.artifact));
182191
183192
enum ProfileCommand {
@@ -205,95 +214,108 @@ function changeProfileCommand(event: Event) {
205214
profileCommand.value = target.value as ProfileCommand;
206215
}
207216
208-
onMounted(() => renderGraph());
217+
onMounted(() => renderGraphs());
209218
</script>
210219

211220
<template>
212221
<div>
213222
<div class="columns">
214223
<div class="rows grow">
215-
<div>
216-
<div class="title info bold">Benchmark info</div>
217-
<table>
218-
<tbody>
219-
<tr>
220-
<td>Benchmark</td>
221-
<td>{{ testCase.benchmark }}</td>
222-
</tr>
223-
<tr>
224-
<td>Profile</td>
225-
<td>{{ testCase.profile }}</td>
226-
</tr>
227-
<tr>
228-
<td>Scenario</td>
229-
<td>{{ testCase.scenario }}</td>
230-
</tr>
231-
<tr>
232-
<td>Category</td>
233-
<td>{{ testCase.category }}</td>
234-
</tr>
235-
<tr v-if="(metadata?.binary ?? null) !== null">
236-
<td>Artifact</td>
237-
<td>{{ metadata.binary ? "binary" : "library" }}</td>
238-
</tr>
239-
<tr v-if="(metadata?.iterations ?? null) !== null">
240-
<td>
241-
Iterations
242-
<Tooltip> How many times is the benchmark executed? </Tooltip>
243-
</td>
244-
<td>{{ metadata.iterations }}</td>
245-
</tr>
246-
<tr v-if="(cargoProfile?.lto ?? null) !== null">
247-
<td>LTO</td>
248-
<td>{{ cargoProfile.lto }}</td>
249-
</tr>
250-
<tr v-if="(cargoProfile?.debug ?? null) !== null">
251-
<td>Debuginfo</td>
252-
<td>{{ cargoProfile.debug }}</td>
253-
</tr>
254-
<tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
255-
<td>Codegen units</td>
256-
<td>{{ cargoProfile.codegen_units }}</td>
257-
</tr>
258-
</tbody>
259-
</table>
260-
</div>
261-
<div class="links">
262-
<div class="title bold">Links</div>
263-
<ul>
264-
<li>
265-
<a
266-
:href="detailedQueryLink(props.artifact, props.baseArtifact)"
267-
target="_blank"
268-
>
269-
Detailed results
270-
</a>
271-
</li>
272-
<li>
273-
<a
274-
:href="graphLink(props.artifact, props.metric, props.testCase)"
275-
target="_blank"
276-
>
277-
History graph
278-
</a>
279-
</li>
280-
<li>
281-
<a :href="detailedQueryLink(props.baseArtifact)" target="_blank">
282-
Rustc self-profile: baseline commit
283-
</a>
284-
</li>
285-
<li>
286-
<a :href="detailedQueryLink(props.artifact)" target="_blank">
287-
Rustc self-profile: benchmarked commit
288-
</a>
289-
</li>
290-
<li>
291-
<a :href="benchmarkLink(testCase.benchmark)" target="_blank">
292-
Benchmark source code
293-
</a>
294-
</li>
295-
</ul>
224+
<div class="title bold">Benchmark info</div>
225+
<table>
226+
<tbody>
227+
<tr>
228+
<td>Benchmark</td>
229+
<td>{{ testCase.benchmark }}</td>
230+
</tr>
231+
<tr>
232+
<td>Profile</td>
233+
<td>{{ testCase.profile }}</td>
234+
</tr>
235+
<tr>
236+
<td>Scenario</td>
237+
<td>{{ testCase.scenario }}</td>
238+
</tr>
239+
<tr>
240+
<td>Category</td>
241+
<td>{{ testCase.category }}</td>
242+
</tr>
243+
<tr v-if="(metadata?.binary ?? null) !== null">
244+
<td>Artifact</td>
245+
<td>{{ metadata.binary ? "binary" : "library" }}</td>
246+
</tr>
247+
<tr v-if="(metadata?.iterations ?? null) !== null">
248+
<td>
249+
Iterations
250+
<Tooltip> How many times is the benchmark executed? </Tooltip>
251+
</td>
252+
<td>{{ metadata.iterations }}</td>
253+
</tr>
254+
<tr v-if="(cargoProfile?.lto ?? null) !== null">
255+
<td>LTO</td>
256+
<td>{{ cargoProfile.lto }}</td>
257+
</tr>
258+
<tr v-if="(cargoProfile?.debug ?? null) !== null">
259+
<td>Debuginfo</td>
260+
<td>{{ cargoProfile.debug }}</td>
261+
</tr>
262+
<tr v-if="(cargoProfile?.codegen_units ?? null) !== null">
263+
<td>Codegen units</td>
264+
<td>{{ cargoProfile.codegen_units }}</td>
265+
</tr>
266+
</tbody>
267+
</table>
268+
</div>
269+
<div class="rows grow links">
270+
<div class="title bold">Links</div>
271+
<ul>
272+
<li>
273+
<a
274+
:href="detailedQueryLink(props.artifact, props.baseArtifact)"
275+
target="_blank"
276+
>
277+
Detailed results
278+
</a>
279+
</li>
280+
<li>
281+
<a
282+
:href="graphLink(props.artifact, props.metric, props.testCase)"
283+
target="_blank"
284+
>
285+
History graph
286+
</a>
287+
</li>
288+
<li>
289+
<a :href="detailedQueryLink(props.baseArtifact)" target="_blank">
290+
Rustc self-profile: baseline commit
291+
</a>
292+
</li>
293+
<li>
294+
<a :href="detailedQueryLink(props.artifact)" target="_blank">
295+
Rustc self-profile: benchmarked commit
296+
</a>
297+
</li>
298+
<li>
299+
<a :href="benchmarkLink(testCase.benchmark)" target="_blank">
300+
Benchmark source code
301+
</a>
302+
</li>
303+
</ul>
304+
</div>
305+
</div>
306+
<div class="columns graphs">
307+
<div class="rows center-items grow">
308+
<div class="title">
309+
<div class="bold">{{ getGraphTitle() }}</div>
310+
<div style="font-size: 0.8em">
311+
Plot of the absolute values of the current metric
312+
</div>
313+
<div style="font-size: 0.8em">
314+
The shaded region shows values that are more recent than the
315+
benchmarked commit
316+
</div>
296317
</div>
318+
<div ref="absoluteChartElement"></div>
297319
</div>
298320
<div class="rows center-items grow">
299321
<div class="title">
@@ -306,7 +328,7 @@ onMounted(() => renderGraph());
306328
benchmarked commit
307329
</div>
308330
</div>
309-
<div ref="chartElement"></div>
331+
<div ref="relativeChartElement"></div>
310332
</div>
311333
</div>
312334
<div class="command">
@@ -358,17 +380,25 @@ onMounted(() => renderGraph());
358380
.grow {
359381
flex-grow: 1;
360382
}
383+
384+
&.graphs {
385+
flex-wrap: nowrap;
386+
}
387+
}
388+
.graphs {
389+
margin-top: 15px;
361390
}
362391
.rows {
363392
display: flex;
364393
flex-direction: column;
365-
gap: 15px;
394+
gap: 10px;
366395
367396
&.center-items {
368397
align-items: center;
369398
}
370399
}
371400
.command {
401+
margin-top: 15px;
372402
text-align: left;
373403
}
374404

0 commit comments

Comments
 (0)