Skip to content

Upgrade to Vue3 #1255

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

Merged
merged 4 commits into from
Mar 29, 2022
Merged

Upgrade to Vue3 #1255

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f5d3cf6
Convert comparison page to Vue3
rylev Mar 28, 2022
7f6a9f0
Revert a previous hack added due to Vue2 not rendering properly
rylev Mar 28, 2022
39e9547
Add click handlers to after mounting
rylev Mar 29, 2022
42695ab
Move into mounted
rylev Mar 29, 2022
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
243 changes: 126 additions & 117 deletions site/static/compare.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@

}

#search-toggle-indicator {
cursor: pointer;
}

.section {
display: flex;
margin: 10px 0;
Expand Down Expand Up @@ -137,7 +141,7 @@
position: relative;
border-radius: 50%;
font-size: 12px;
margin: 0 -4px;
margin: 0 4px;
border: 1px solid #7d6969;
width: 16px;
text-align: center;
Expand Down Expand Up @@ -285,7 +289,7 @@
text-align: center;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
</head>

<body>
Expand Down Expand Up @@ -616,114 +620,39 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
}
}

Vue.mixin({
methods: {
percentClass(pct) {
let klass = "";
if (pct > 1) {
klass = 'positive';
} else if (pct > 0) {
klass = 'slightly-positive';
} else if (pct < -1) {
klass = 'negative';
} else if (pct < -0) {
klass = 'slightly-negative';
}
return klass;
},
}
});
Vue.component('test-cases-table', {
props: ['cases', 'showRawData', 'commitA', 'commitB', 'before', 'after', 'title'],
methods: {
detailedQueryLink(commit, testCase) {
return `/detailed-query.html?commit=${commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
},
percentLink(commit, baseCommit, testCase) {
return `/detailed-query.html?commit=${commit}&base_commit=${baseCommit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
},
const app = Vue.createApp({
mounted() {
const app = this;
loadState(state => makeData(state, app));

document.getElementById("filters-toggle").onclick = (e) => {
toggleFilters("filters-content", "filters-toggle-indicator");
};
document.getElementById("search-toggle").onclick = (e) => {
toggleFilters("search-content", "search-toggle-indicator");
};
},
template: `
<div class="bench-table">
<div class="category-title">{{ title }} benchmarks</div>
<div v-if="cases.length === 0" style="text-align: center;">
No results
</div>
<table v-else class="benches compare">
<thead>
<tr>
<th>Benchmark & Profile</th>
<th>Scenario</th>
<th>% Change</th>
<th>
Significance Factor
<span class="tooltip">?
<span class="tooltiptext">
How much a particular result is over the significance threshold. A factor of 2.50x
means
the result is 2.5 times over the significance threshold. You can see <a
href="https://github.com/rust-lang/rustc-perf/blob/master/docs/comparison-analysis.md#what-makes-a-test-result-significant">
here</a> how the significance threshold is calculated.
</span>
</span>
</th>
<th v-if="showRawData">{{ before }}</th>
<th v-if="showRawData">{{ after }}</th>
</tr>
</thead>
<tbody>
<template v-for="testCase in cases">
<tr>
<td>{{ testCase.benchmark }} {{ testCase.profile }}</td>
<td>{{ testCase.scenario }}</td>
<td>
<a v-bind:href="percentLink(commitB, commitA, testCase)">
<span v-bind:class="percentClass(testCase.percent)">
{{ testCase.percent.toFixed(2) }}%{{testCase.isDodgy ? "?" : ""}}
</span>
</a>
</td>
<td>
{{ testCase.significanceFactor ? testCase.significanceFactor.toFixed(2) + "x" : "-" }}
</td>
<td v-if="showRawData">
<a v-bind:href="detailedQueryLink(commitA, testCase)">
<abbr :title="testCase.datumA">{{ testCase.datumA.toFixed(2) }}</abbr>
</a>
</td>
<td v-if="showRawData">
<a v-bind:href="detailedQueryLink(commitB, testCase)">
<abbr :title="testCase.datumB">{{ testCase.datumB.toFixed(2) }}</abbr>
</a>
</td>
</tr>
</template>
</tbody>
</table>
</div>
`});

let app = new Vue({
el: '#app',
data: {
filter: {
name: null,
showOnlySignificant: true,
filterVerySmall: true,
scenario: {
full: true,
incrFull: true,
incrUnchanged: true,
incrPatched: true
data() {
return {
filter: {
name: null,
showOnlySignificant: true,
filterVerySmall: true,
scenario: {
full: true,
incrFull: true,
incrUnchanged: true,
incrPatched: true
},
category: {
primary: true,
secondary: true
}
},
category: {
primary: true,
secondary: true
}
},
showRawData: false,
data: null,
dataLoading: false
showRawData: false,
data: null,
dataLoading: false
}
},
computed: {
notContinuous() {
Expand Down Expand Up @@ -982,6 +911,93 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
},
});

app.component('test-cases-table', {
props: ['cases', 'showRawData', 'commitA', 'commitB', 'before', 'after', 'title'],
methods: {
detailedQueryLink(commit, testCase) {
return `/detailed-query.html?commit=${commit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
},
percentLink(commit, baseCommit, testCase) {
return `/detailed-query.html?commit=${commit}&base_commit=${baseCommit}&benchmark=${testCase.benchmark + "-" + testCase.profile}&scenario=${testCase.scenario}`;
},
},
template: `
<div class="bench-table">
<div class="category-title">{{ title }} benchmarks</div>
<div v-if="cases.length === 0" style="text-align: center;">
No results
</div>
<table v-else class="benches compare">
<thead>
<tr>
<th>Benchmark & Profile</th>
<th>Scenario</th>
<th>% Change</th>
<th>
Significance Factor<span class="tooltip">?
<span class="tooltiptext">
How much a particular result is over the significance threshold. A factor of 2.50x
means
the result is 2.5 times over the significance threshold. You can see <a
href="https://github.com/rust-lang/rustc-perf/blob/master/docs/comparison-analysis.md#what-makes-a-test-result-significant">
here</a> how the significance threshold is calculated.
</span>
</span>
</th>
<th v-if="showRawData">{{ before }}</th>
<th v-if="showRawData">{{ after }}</th>
</tr>
</thead>
<tbody>
<template v-for="testCase in cases">
<tr>
<td>{{ testCase.benchmark }} {{ testCase.profile }}</td>
<td>{{ testCase.scenario }}</td>
<td>
<a v-bind:href="percentLink(commitB, commitA, testCase)">
<span v-bind:class="percentClass(testCase.percent)">
{{ testCase.percent.toFixed(2) }}%{{testCase.isDodgy ? "?" : ""}}
</span>
</a>
</td>
<td>
{{ testCase.significanceFactor ? testCase.significanceFactor.toFixed(2) + "x" : "-" }}
</td>
<td v-if="showRawData">
<a v-bind:href="detailedQueryLink(commitA, testCase)">
<abbr :title="testCase.datumA">{{ testCase.datumA.toFixed(2) }}</abbr>
</a>
</td>
<td v-if="showRawData">
<a v-bind:href="detailedQueryLink(commitB, testCase)">
<abbr :title="testCase.datumB">{{ testCase.datumB.toFixed(2) }}</abbr>
</a>
</td>
</tr>
</template>
</tbody>
</table>
</div>
`});
app.mixin({
methods: {
percentClass(pct) {
let klass = "";
if (pct > 1) {
klass = 'positive';
} else if (pct > 0) {
klass = 'slightly-positive';
} else if (pct < -1) {
klass = 'negative';
} else if (pct < -0) {
klass = 'slightly-negative';
}
return klass;
},
}
});


function toggleFilters(id, toggle) {
let styles = document.getElementById(id).style;
let indicator = document.getElementById(toggle);
Expand All @@ -1000,13 +1016,6 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
return testCase.benchmark + "-" + testCase.profile + "-" + testCase.scenario;
}

document.getElementById("filters-toggle").onclick = (e) => {
toggleFilters("filters-content", "filters-toggle-indicator");
};
document.getElementById("search-toggle").onclick = (e) => {
toggleFilters("search-content", "search-toggle-indicator");
};

function unique(arr) {
return arr.filter((value, idx) => arr.indexOf(value) == idx);
}
Expand All @@ -1015,7 +1024,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
return commit.substring(0, 8);
}

function makeData(state) {
function makeData(state, app) {
app.dataLoading = true;
let values = Object.assign({}, {
start: "",
Expand All @@ -1040,7 +1049,7 @@ <h2>Comparing <span id="stat-header">{{stat}}</span> between <span id="before">{
window.location.search = params.toString();
}

loadState(makeData);
app.mount('#app');
</script>
</body>

Expand Down