Skip to content

Commit 6bf97c8

Browse files
rylevrylev
committed
Start vue conversion
1 parent 18d6728 commit 6bf97c8

File tree

1 file changed

+81
-28
lines changed

1 file changed

+81
-28
lines changed

‎site/static/compare.html

Lines changed: 81 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,7 @@
150150
opacity: 1;
151151
}
152152
</style>
153+
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
153154
</head>
154155

155156
<body class="container" style="max-width:800px">
@@ -236,7 +237,24 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
236237
</div>
237238
</div>
238239
</fieldset>
239-
<div id="content" style="display: none; margin-top: 15px"></div>
240+
<div id="content" style="margin-top: 15px">
241+
<div v-if="data">
242+
<div v-if="notContinuous">Warning: The start and end are not adjacent!</div>
243+
<a v-bind:href="compareLink">compare</a>
244+
<a v-if="data.prev" v-bind:href="prevLink">&larr;</a>
245+
<div>
246+
<span>{{data.a.date}}</span>
247+
<span>({{short(data.a)}})</span>
248+
</div>
249+
<div>
250+
<span>{{data.b.date}}</span>
251+
<span>({{short(data.b)}})</span>
252+
</div>
253+
</div>
254+
<a v-if="data.next" v-bind:href="nextLink">&rarr;</a>
255+
<a v-if="data.a.pr" v-bind:href="prLink(data.a.pr)">#{{data.a.pr}}</a>
256+
<a v-if="data.b.pr" v-bind:href="prLink(data.b.pr)">#{{data.b.pr}}</a>
257+
</div>
240258
<br>
241259
<div id="as-of"></div>
242260
<a href="https://github.com/rust-lang-nursery/rustc-perf">
@@ -248,6 +266,34 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
248266
<script src="https://cdnjs.cloudflare.com/ajax/libs/msgpack-lite/0.1.26/msgpack.min.js"></script>
249267
<script src="shared.js"></script>
250268
<script>
269+
let app = new Vue({
270+
el: '#content',
271+
data: {
272+
data: null
273+
},
274+
computed: {
275+
notContinuous: function () {
276+
return !this.data.is_contiguous;
277+
},
278+
prevLink: function () {
279+
return `/compare.html?start=${this.data.prev}&end=${this.data.a.commit}`;
280+
},
281+
nextLink: function () {
282+
return `/compare.html?start=${this.data.b.commit}&end=${this.data.next}`;
283+
},
284+
compareLink: function () {
285+
return `https://github.com/rust-lang/rust/compare/${this.data.a.commit}...${this.data.b.commit}`;
286+
}
287+
},
288+
methods: {
289+
short: function (comparison) {
290+
return shortCommit(comparison.commit);
291+
},
292+
prLink: function (pr) {
293+
return `https://github.com/rust-lang/rust/pull/${pr}`;
294+
}
295+
}
296+
})
251297
function toggleFilters(id, toggle) {
252298
let styles = document.getElementById(id).style;
253299
let indicator = document.getElementById(toggle);
@@ -275,7 +321,7 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
275321
return (i < 10) ? "0" + i : "" + i;
276322
}
277323

278-
return `${date.getUTCFullYear()}-${pad_str(date.getUTCMonth() + 1)}-${pad_str(date.getUTCDate())}`;
324+
return `${date.getUTCFullYear()} -${pad_str(date.getUTCMonth() + 1)} -${pad_str(date.getUTCDate())} `;
279325
}
280326

281327
function unique(arr) {
@@ -293,7 +339,7 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
293339
txt = datum.toLocaleString('en-US', { minimumFractionDigits: 3, maximumFractionDigits: 3 });
294340
}
295341
if (selfProfileAvailable) {
296-
html += `<a href="/detailed-query.html?commit=${sha}&benchmark=${bench}&run_name=${run}">${txt}</a>`;
342+
html += `< a href = "/detailed-query.html?commit=${sha}&benchmark=${bench}&run_name=${run}" > ${txt}</a > `;
297343
} else {
298344
html += txt;
299345
}
@@ -327,16 +373,21 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
327373
let title = "";
328374
let marker = "";
329375
if (dodgy) {
330-
title = `title="${dodgy}"`;
376+
title = `title = "${dodgy}"`;
331377
marker = dodgy_marker;
332378
}
333-
return `<span ${klass} ${title}>${pct.toFixed(1)}%${marker}</span>`;
379+
return `< span ${klass} ${title}> ${pct.toFixed(1)}% ${marker}</span > `;
334380
} else {
335381
return "<span>-</span>"
336382
}
337383
}
338384

385+
function shortCommit(commit) {
386+
return commit.substring(0, 8);
387+
}
388+
339389
function populate_data(data) {
390+
app.data = data;
340391
{
341392
let filter = document.querySelector("#filter").value;
342393
let test_names = unique([
@@ -380,13 +431,13 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
380431

381432
let html = "";
382433

383-
html += `<table class="compare" style="font-size: medium !important;">`;
434+
html += `< table class="compare" style = "font-size: medium !important;" > `;
384435
html += "<thead>";
385436

386437
if (!data.is_contiguous) {
387-
html += `<tr><td colspan=4 style="text-align:center;">`;
388-
html += `<b>Warning</b>: The start and end are not adjacent!`;
389-
html += `</td></tr>`;
438+
html += `< tr > <td colspan=4 style = "text-align:center;" > `;
439+
html += `< b > Warning</b >: The start and end are not adjacent!`;
440+
html += `</td ></tr > `;
390441
}
391442

392443
// Heading: the two dates, and the time and rss percent changes.
@@ -402,23 +453,23 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
402453
let params = new URLSearchParams(window.location.search);
403454
params.set("end", params.get("start"));
404455
params.set("start", data.prev);
405-
prev_link = `<a href="/compare.html?${params.toString()}">&larr;</a> `;
456+
prev_link = `< a href = "/compare.html?${params.toString()}" >& larr;</a > `;
406457
}
407458
let next_link = "";
408459
if (data.next) {
409460
let params = new URLSearchParams(window.location.search);
410461
params.set("start", params.get("end"));
411462
params.set("end", data.next);
412-
next_link = ` <a href="/compare.html?${params.toString()}">&rarr;</a>`;
463+
next_link = ` < a href = "/compare.html?${params.toString()}" >& rarr;</a > `;
413464
}
414465
html += "<th>"
415466
+ prev_link + ""
416467
+ print_date(new Date(data.a.date))
417468
+ ` (<a href="https://github.com/rust-lang/rust/commit/${data.a.commit}"
418-
>${data.a.commit.substring(0, 8)}</a>)` + "</th>";
469+
>${data.a.commit.substring(0, 8)}</a>)` + "</th>";
419470
html += "<th>" + print_date(new Date(data.b.date))
420471
+ ` (<a href="https://github.com/rust-lang/rust/commit/${data.b.commit}"
421-
>${data.b.commit.substring(0, 8)}</a>)`
472+
>${data.b.commit.substring(0, 8)}</a>)`
422473
+ next_link
423474
+ "</th>";
424475

@@ -427,10 +478,12 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
427478

428479
html += "<tr>";
429480
html += "<th></th>";
430-
html += `<th style="text-align:left;">${data.a.pr ? `<a
431-
href="https://github.com/rust-lang/rust/pull/${data.a.pr}">#${data.a.pr}</a>` : ""}</th>`;
432-
html += `<th style="text-align:left;">${data.b.pr ? `<a
433-
href="https://github.com/rust-lang/rust/pull/${data.b.pr}">#${data.b.pr}</a>` : ""}</th>`;
481+
html += `< th style = "text-align:left;" > ${data.a.pr ? `<a
482+
href="https://github.com/rust-lang/rust/pull/${data.a.pr}">#${data.a.pr}</a>` : ""
483+
}</th > `;
484+
html += `< th style = "text-align:left;" > ${data.b.pr ? `<a
485+
href="https://github.com/rust-lang/rust/pull/${data.b.pr}">#${data.b.pr}</a>` : ""
486+
}</th > `;
434487
html += "</tr>";
435488

436489
html += "</thead>";
@@ -564,10 +617,10 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
564617
}
565618

566619
if (variance.type == "HighlyVariable") {
567-
return `This measurement varies a lot. Do not trust it!`
620+
return `This measurement varies a lot.Do not trust it!`
568621
}
569622
if (variance.type == "Noisy") {
570-
return `This measurement is noisy. Do not trust it!`
623+
return `This measurement is noisy.Do not trust it!`
571624
}
572625
return "";
573626
}
@@ -586,32 +639,32 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
586639
is_first_bootstrap = false;
587640

588641
html += "<tr data-field-start=true>";
589-
html += `<th style="width: ${max_name_width / 2}em;" data-js-name=Total>` + truncate_name("total") + "</th>";
642+
html += `< th style = "width: ${max_name_width / 2}em;" data - js - name=Total > ` + truncate_name("total") + "</th>";
590643
let sum = (acc, value) => acc + value;
591644
let a_total = fields.filter(f => f.is_bootstrap).map(f => f.fields[0].datum_a).reduce(sum);
592645
let b_total = fields.filter(f => f.is_bootstrap).map(f => f.fields[0].datum_b).reduce(sum);
593646
html += add_datum_fields(a_total, data.a.commit, "Total", "", false);
594647
html += add_datum_fields(b_total, data.b.commit, "Total", "", false);
595648
let pct = add_percent(percent_chg(a_total, b_total), dodgy, "??");
596-
html += `<td>${pct}</td>`;
649+
html += `< td > ${pct}</td > `;
597650
html += "</tr>";
598651
}
599652
html += "<tr data-field-start=true>";
600-
html += `<th style="width: ${max_name_width / 2}em;" data-js-name=${field.name}>` + truncate_name(field.name) + "</th>";
653+
html += `< th style = "width: ${max_name_width / 2}em;" data - js - name=${field.name}> ` + truncate_name(field.name) + "</th>";
601654
let entry = field.fields[0];
602655
html += add_datum_fields(entry.datum_a, data.a.commit,
603656
field.name, entry.casename, false);
604657
html += add_datum_fields(entry.datum_b, data.b.commit,
605658
field.name, entry.casename, false);
606659
let pct = add_percent(entry.percent, dodgy, "??");
607-
html += `<td>${pct}</td>`;
660+
html += `< td > ${pct}</td > `;
608661
html += "</tr>";
609662
} else {
610663
html += "<tr><td>&nbsp;</td></tr>";
611664
html += "<tr data-field-start=true>";
612-
html += `<th style="width: ${max_name_width / 2}em;" data-js-name=${field.name}>` +
613-
`<details class=toggle-table><summary>` +
614-
truncate_name(field.name) + "</summary></details></th>";
665+
html += `< th style = "width: ${max_name_width / 2}em;" data - js - name=${field.name}> ` +
666+
`< details class=toggle - table > <summary>` +
667+
truncate_name(field.name) + "</summary></details ></th > ";
615668
html += "<td> avg: " + add_percent(field.avg_pct, dodgy, "?") + "</td>";
616669
html += "<td text-align=center> min: " + add_percent(field.min_pct, dodgy, "?") +
617670
"</td>";
@@ -640,8 +693,8 @@ <h1>Comparing <span id="stat-header">instructions:u</span> between <span id="bef
640693

641694
html += "</table>";
642695

643-
document.getElementById("content").innerHTML = html;
644-
document.getElementById("content").style.display = "block";
696+
// document.getElementById("content").innerHTML = html;
697+
// document.getElementById("content").style.display = "block";
645698
for (let element of document.querySelectorAll(".toggle-table")) {
646699
let name = element.parentElement.getAttribute("data-js-name");
647700
let in_body = [];

0 commit comments

Comments
 (0)