Skip to content

Commit 39bfe5c

Browse files
chengr4chengr4
authored
Tab component abstraction (#1882)
* abstract tab component * Refactor runtime tab * set class table-wrapper into SummaryTable * Refactor bootstrap tab * Refactor artifact tab * remove unused css (moved into tab.vue) * tooltip is more understandable * Fix nit If you don't use : before the name of the attribute, it will be evaluated as a string Ref: #1882 (comment)
1 parent f36f7a4 commit 39bfe5c

File tree

2 files changed

+123
-106
lines changed

2 files changed

+123
-106
lines changed

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
const props = defineProps<{
3+
tooltip: string;
4+
title: string;
5+
selected: boolean;
6+
}>();
7+
</script>
8+
9+
<template>
10+
<div class="tab" :title="props.tooltip" :class="{selected: props.selected}">
11+
<div class="title">{{ props.title }}</div>
12+
<div class="summary">
13+
<slot name="summary"></slot>
14+
</div>
15+
</div>
16+
</template>
17+
18+
<style scoped lang="scss">
19+
.tab {
20+
display: flex;
21+
flex-direction: column;
22+
position: relative;
23+
min-width: 200px;
24+
min-height: 60px;
25+
padding: 5px;
26+
text-align: center;
27+
border: 2px dotted #cccccc;
28+
border-radius: 5px;
29+
cursor: pointer;
30+
31+
&:hover {
32+
@extend .selected;
33+
}
34+
35+
@media (min-width: 600px) {
36+
&:not(:first-child) {
37+
margin-left: 30px;
38+
}
39+
40+
&:not(:last-child) {
41+
:after {
42+
content: "";
43+
position: absolute;
44+
right: -17px;
45+
border-right: 1px solid black;
46+
top: 20%;
47+
bottom: 20%;
48+
}
49+
}
50+
}
51+
}
52+
53+
.title {
54+
font-weight: bold;
55+
font-size: 1.1em;
56+
margin-bottom: 5px;
57+
}
58+
59+
.selected {
60+
border-style: solid;
61+
border-color: black;
62+
}
63+
64+
.summary {
65+
display: flex;
66+
flex-direction: column;
67+
justify-content: center;
68+
font-size: 0.9em;
69+
flex-grow: 1;
70+
}
71+
</style>

‎site/frontend/src/pages/compare/tabs.vue‎

Lines changed: 52 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import {SummaryGroup} from "./data";
1111
import SummaryPercentValue from "./summary/percent-value.vue";
1212
import SummaryRange from "./summary/range.vue";
13+
import TabComponent from "../../components/tab.vue";
1314
1415
const props = withDefaults(
1516
defineProps<{
@@ -42,27 +43,29 @@ function SummaryTable({summary}: {summary: SummaryGroup}) {
4243
const valid = summary.all.count > 0;
4344
if (valid) {
4445
return (
45-
<table>
46-
<thead>
47-
<tr>
48-
<th>Range</th>
49-
<th>Mean</th>
50-
</tr>
51-
</thead>
52-
<thead>
53-
<tr>
54-
<td>
55-
<SummaryRange range={summary.all.range} />
56-
</td>
57-
<td>
58-
<SummaryPercentValue
59-
class={percentClass(summary.all.average)}
60-
value={summary.all.average}
61-
/>
62-
</td>
63-
</tr>
64-
</thead>
65-
</table>
46+
<div class="table-wrapper">
47+
<table>
48+
<thead>
49+
<tr>
50+
<th>Range</th>
51+
<th>Mean</th>
52+
</tr>
53+
</thead>
54+
<thead>
55+
<tr>
56+
<td>
57+
<SummaryRange range={summary.all.range} />
58+
</td>
59+
<td>
60+
<SummaryPercentValue
61+
class={percentClass(summary.all.average)}
62+
value={summary.all.average}
63+
/>
64+
</td>
65+
</tr>
66+
</thead>
67+
</table>
68+
</div>
6669
);
6770
}
6871
return <div>No results</div>;
@@ -95,36 +98,33 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
9598

9699
<template>
97100
<div class="wrapper">
98-
<div
99-
class="tab"
100-
title="Compilation time benchmarks: measure how long does it take to compile various crates using the compared rustc."
101-
:class="{selected: activeTab === Tab.CompileTime}"
101+
<TabComponent
102+
tooltip="Compilation time benchmarks: measure how long does it take to compile various crates using the compared rustc."
103+
title="Compile-time"
104+
:selected="activeTab === Tab.CompileTime"
102105
@click="changeTab(Tab.CompileTime)"
103106
>
104-
<div class="title">Compile-time</div>
105-
<div class="summary table-wrapper">
107+
<template v-slot:summary>
106108
<SummaryTable :summary="compileTimeSummary" />
107-
</div>
108-
</div>
109-
<div
110-
class="tab"
111-
title="Runtime benchmarks: measure how long does it take to execute (i.e. how fast are) programs compiled by the compared rustc."
112-
:class="{selected: activeTab === Tab.Runtime}"
109+
</template>
110+
</TabComponent>
111+
<TabComponent
112+
tooltip="Runtime benchmarks: measure how long does it take to execute (i.e. how fast are) programs compiled by the compared rustc."
113+
title="Runtime"
114+
:selected="activeTab === Tab.Runtime"
113115
@click="changeTab(Tab.Runtime)"
114116
>
115-
<div class="title">Runtime</div>
116-
<div class="summary table-wrapper">
117+
<template v-slot:summary>
117118
<SummaryTable :summary="runtimeSummary" />
118-
</div>
119-
</div>
120-
<div
121-
class="tab"
122-
title="Bootstrap duration: measures how long does it take to compile rustc by itself."
123-
:class="{selected: activeTab === Tab.Bootstrap}"
119+
</template>
120+
</TabComponent>
121+
<TabComponent
122+
tooltip="Bootstrap duration: measures how long does it take to compile rustc by itself."
123+
title="Bootstrap"
124+
:selected="activeTab === Tab.Bootstrap"
124125
@click="changeTab(Tab.Bootstrap)"
125126
>
126-
<div class="title">Bootstrap</div>
127-
<div class="summary">
127+
<template v-slot:summary>
128128
<div>
129129
{{ formatBootstrap(bootstrapA) }} ->
130130
{{ formatBootstrap(bootstrapB) }}
@@ -137,17 +137,16 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
137137
(((bootstrapB - bootstrapA) / bootstrapA) * 100).toFixed(3)
138138
}}%)
139139
</div>
140-
</div>
141-
</div>
142-
<div
143-
class="tab"
144-
title="Artifact size: sizes of individual components of the two artifacts."
140+
</template>
141+
</TabComponent>
142+
<TabComponent
143+
tooltip="Artifact size: sizes of individual components of the two artifacts."
144+
title="Artifact size"
145145
v-if="sizesAvailable"
146-
:class="{selected: activeTab === Tab.ArtifactSize}"
146+
:selected="activeTab === Tab.ArtifactSize"
147147
@click="changeTab(Tab.ArtifactSize)"
148148
>
149-
<div class="title">Artifact size</div>
150-
<div class="summary">
149+
<template v-slot:summary>
151150
<div>
152151
{{ formatArtifactSize(totalSizeA) }} ->
153152
{{ formatArtifactSize(totalSizeB) }}
@@ -161,8 +160,8 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
161160
formatPercentChange(totalSizeA, totalSizeB)
162161
}})
163162
</div>
164-
</div>
165-
</div>
163+
</template>
164+
</TabComponent>
166165
</div>
167166
</template>
168167

@@ -180,51 +179,6 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
180179
}
181180
}
182181
183-
.tab {
184-
display: flex;
185-
flex-direction: column;
186-
position: relative;
187-
min-width: 200px;
188-
min-height: 60px;
189-
padding: 5px;
190-
text-align: center;
191-
border: 2px dotted #cccccc;
192-
border-radius: 5px;
193-
cursor: pointer;
194-
195-
&:hover {
196-
@extend .selected;
197-
}
198-
199-
@media (min-width: 600px) {
200-
&:not(:first-child) {
201-
margin-left: 30px;
202-
}
203-
204-
&:not(:last-child) {
205-
:after {
206-
content: "";
207-
position: absolute;
208-
right: -17px;
209-
border-right: 1px solid black;
210-
top: 20%;
211-
bottom: 20%;
212-
}
213-
}
214-
}
215-
}
216-
217-
.title {
218-
font-weight: bold;
219-
font-size: 1.1em;
220-
margin-bottom: 5px;
221-
}
222-
223-
.selected {
224-
border-style: solid;
225-
border-color: black;
226-
}
227-
228182
.table-wrapper {
229183
table {
230184
width: 100%;
@@ -235,12 +189,4 @@ const activeTab: Ref<Tab> = ref(props.initialTab);
235189
font-weight: normal;
236190
}
237191
}
238-
239-
.summary {
240-
display: flex;
241-
flex-direction: column;
242-
justify-content: center;
243-
font-size: 0.9em;
244-
flex-grow: 1;
245-
}
246192
</style>

0 commit comments

Comments
 (0)