Skip to content

Commit dc9830d

Browse files
s7tyas7tya
committed
move accordion to a separate component
1 parent 7ac9471 commit dc9830d

File tree

5 files changed

+137
-107
lines changed

5 files changed

+137
-107
lines changed

‎site/frontend/src/components/accordion.vue

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<script lang="ts">
2+
import {defineComponent} from "vue";
3+
import {useExpandedStore} from "./expansion";
4+
5+
export default defineComponent({
6+
props: {
7+
id: {
8+
type: String,
9+
required: true,
10+
},
11+
},
12+
setup() {
13+
const {toggleExpanded, isExpanded} = useExpandedStore();
14+
return {
15+
toggleExpanded,
16+
isExpanded,
17+
};
18+
},
19+
});
20+
</script>
21+
22+
<template>
23+
<tr
24+
@click="toggleExpanded(id)"
25+
:class="{toggle: true, toggled: isExpanded(id)}"
26+
>
27+
<td class="toggle-arrow">
28+
{{ isExpanded(id) ? "▼" : "▶" }}
29+
</td>
30+
<slot name="default" />
31+
</tr>
32+
<tr v-if="isExpanded(id)">
33+
<slot name="collapsed" />
34+
</tr>
35+
</template>
36+
37+
<style lang="scss" scoped>
38+
.toggle {
39+
cursor: pointer;
40+
41+
.toggle-arrow {
42+
padding-right: 5px;
43+
}
44+
45+
&:hover,
46+
&.toggled {
47+
background-color: #d6d3d35c;
48+
}
49+
}
50+
</style>

‎site/frontend/src/components/expansion.ts

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {ref} from "vue";
2+
3+
export function useExpandedStore() {
4+
const expanded = ref(new Set());
5+
6+
function isExpanded(key: String) {
7+
return expanded.value.has(key);
8+
}
9+
10+
function toggleExpanded(key: String) {
11+
if (isExpanded(key)) {
12+
expanded.value.delete(key);
13+
} else {
14+
expanded.value.add(key);
15+
}
16+
}
17+
18+
return {toggleExpanded, isExpanded};
19+
}

‎site/frontend/src/pages/compare/compile/common.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,3 +204,7 @@ export function createCompileBenchmarkMap(
204204
}
205205
return benchmarks;
206206
}
207+
208+
export function testCaseKey(testCase: CompileTestCase): string {
209+
return `${testCase.benchmark};${testCase.profile};${testCase.scenario};${testCase.category}`;
210+
}

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

Lines changed: 64 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import {ArtifactDescription} from "../../types";
55
import {percentClass} from "../../shared";
66
import {CompileBenchmarkMap, CompileTestCase} from "../common";
77
import {computed} from "vue";
8-
import {useExpandedStore} from "./expansion";
8+
import {testCaseKey} from "../common";
99
import BenchmarkDetail from "./benchmark-detail.vue";
10+
import Accordion from "../../../../components/accordion.vue";
1011
1112
const props = defineProps<{
1213
id: string;
@@ -40,7 +41,6 @@ const unit = computed(() => {
4041
return null;
4142
}
4243
});
43-
const {toggleExpanded, isExpanded} = useExpandedStore();
4444
</script>
4545

4646
<template>
@@ -86,72 +86,68 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
8686
</thead>
8787
<tbody>
8888
<template v-for="comparison in comparisons">
89-
<tr
90-
@click="toggleExpanded(comparison.testCase)"
91-
:class="{toggle: true, toggled: isExpanded(comparison.testCase)}"
92-
>
93-
<td class="toggle-arrow">
94-
{{ isExpanded(comparison.testCase) ? "▼" : "▶" }}
95-
</td>
96-
<td>
97-
{{ comparison.testCase.benchmark }}
98-
</td>
99-
<td>
100-
{{ comparison.testCase.profile }}
101-
</td>
102-
<td>{{ comparison.testCase.scenario }}</td>
103-
<td>{{ comparison.testCase.backend }}</td>
104-
<td>
105-
<div class="numeric-aligned">
106-
<span v-bind:class="percentClass(comparison.percent)">
107-
{{ comparison.percent.toFixed(2) }}%
108-
</span>
109-
</div>
110-
</td>
111-
<td class="narrow">
112-
<div class="numeric-aligned">
113-
<div>
114-
{{
115-
comparison.significanceThreshold
116-
? comparison.significanceThreshold.toFixed(2) + "%"
117-
: "-"
118-
}}
89+
<Accordion :id="testCaseKey(comparison.testCase)">
90+
<template v-slot:default>
91+
<td>
92+
{{ comparison.testCase.benchmark }}
93+
</td>
94+
<td>
95+
{{ comparison.testCase.profile }}
96+
</td>
97+
<td>{{ comparison.testCase.scenario }}</td>
98+
<td>{{ comparison.testCase.backend }}</td>
99+
<td>
100+
<div class="numeric-aligned">
101+
<span v-bind:class="percentClass(comparison.percent)">
102+
{{ comparison.percent.toFixed(2) }}%
103+
</span>
119104
</div>
120-
</div>
121-
</td>
122-
<td class="narrow">
123-
<div class="numeric-aligned">
124-
<div>
125-
{{
126-
comparison.significanceFactor
127-
? comparison.significanceFactor.toFixed(2) + "x"
128-
: "-"
129-
}}
105+
</td>
106+
<td class="narrow">
107+
<div class="numeric-aligned">
108+
<div>
109+
{{
110+
comparison.significanceThreshold
111+
? comparison.significanceThreshold.toFixed(2) + "%"
112+
: "-"
113+
}}
114+
</div>
130115
</div>
131-
</div>
132-
</td>
133-
<td v-if="showRawData" class="numeric">
134-
<abbr :title="comparison.datumA.toString()">
135-
{{ prettifyRawNumber(comparison.datumA) }}{{ unit }}
136-
</abbr>
137-
</td>
138-
<td v-if="showRawData" class="numeric">
139-
<abbr :title="comparison.datumB.toString()">
140-
{{ prettifyRawNumber(comparison.datumB) }}{{ unit }}
141-
</abbr>
142-
</td>
143-
</tr>
144-
<tr v-if="isExpanded(comparison.testCase)">
145-
<td :colspan="columnCount">
146-
<BenchmarkDetail
147-
:test-case="comparison.testCase"
148-
:base-artifact="commitA"
149-
:artifact="commitB"
150-
:metric="stat"
151-
:benchmark-map="benchmarkMap"
152-
/>
153-
</td>
154-
</tr>
116+
</td>
117+
<td class="narrow">
118+
<div class="numeric-aligned">
119+
<div>
120+
{{
121+
comparison.significanceFactor
122+
? comparison.significanceFactor.toFixed(2) + "x"
123+
: "-"
124+
}}
125+
</div>
126+
</div>
127+
</td>
128+
<td v-if="showRawData" class="numeric">
129+
<abbr :title="comparison.datumA.toString()">
130+
{{ prettifyRawNumber(comparison.datumA) }}{{ unit }}
131+
</abbr>
132+
</td>
133+
<td v-if="showRawData" class="numeric">
134+
<abbr :title="comparison.datumB.toString()">
135+
{{ prettifyRawNumber(comparison.datumB) }}{{ unit }}
136+
</abbr>
137+
</td>
138+
</template>
139+
<template v-slot:collapsed>
140+
<td :colspan="columnCount">
141+
<BenchmarkDetail
142+
:test-case="comparison.testCase"
143+
:base-artifact="commitA"
144+
:artifact="commitB"
145+
:metric="stat"
146+
:benchmark-map="benchmarkMap"
147+
/>
148+
</td>
149+
</template>
150+
</Accordion>
155151
</template>
156152
</tbody>
157153
</table>
@@ -171,10 +167,8 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
171167
}
172168
}
173169
174-
.benches tbody::before {
175-
content: "";
176-
display: block;
177-
height: 10px;
170+
.benches tbody {
171+
padding-top: 10px;
178172
}
179173
180174
.benches tbody:first-child th {
@@ -190,22 +184,10 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
190184
th {
191185
text-align: center;
192186
193-
&.toggle-arrow {
194-
padding-right: 5px;
195-
}
196187
&.narrow {
197188
max-width: 100px;
198189
}
199190
}
200-
201-
.toggle {
202-
cursor: pointer;
203-
204-
&:hover,
205-
&.toggled {
206-
background-color: #d6d3d35c;
207-
}
208-
}
209191
}
210192
211193
.benches td {

‎site/frontend/src/pages/compare/compile/table/expansion.ts

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)