Skip to content

Commit 72f2801

Browse files
nakrovatinakrovati
committed
feat(web-ts-results): make tables scrollable
1 parent c196be8 commit 72f2801

File tree

6 files changed

+212
-189
lines changed

6 files changed

+212
-189
lines changed

‎webdriver-ts-results/src/App.css

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
:root {
22
--border-color: #ccc;
33
}
4+
45
*,
56
::before,
67
::after {
@@ -45,37 +46,47 @@ input + label {
4546
margin-bottom: 5px;
4647
}
4748

48-
table.results {
49+
td {
50+
text-align: center;
51+
}
52+
.results {
53+
width: 100%;
54+
max-width: 100%;
55+
}
56+
.results__table-container {
57+
overflow-x: scroll;
58+
}
59+
.results__table {
4960
font-size: 11px;
61+
width: 100%;
5062
table-layout: fixed;
51-
width: 1px;
52-
overflow: visible;
53-
display: table;
54-
border-spacing: 0 0;
63+
border-spacing: 0;
5564
border-collapse: collapse;
5665
}
57-
table.results th {
66+
.results__table th {
5867
width: 60px;
5968
font-weight: normal;
6069
font-size: 11px;
70+
z-index: 9;
6171
text-align: center;
6272
word-break: normal;
6373
hyphens: auto;
6474
-webkit-hyphens: auto;
6575
}
66-
table.results th.benchname {
76+
.results__table th.benchname {
6777
width: 120px;
6878
}
69-
table.results td {
70-
padding: 3px;
71-
border: 1px solid #ddd;
72-
}
73-
table.results th {
79+
.results__table th,
80+
.results__table td {
7481
padding: 3px;
7582
border: 1px solid #ddd;
7683
}
77-
td {
78-
text-align: center;
84+
.results__table th:first-child,
85+
.results__table td:first-child {
86+
position: sticky;
87+
left: 0;
88+
width: 120px;
89+
background-color: white;
7990
}
8091

8192
.rowCount {

‎webdriver-ts-results/src/components/BoxPlotTable/index.tsx

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -31,36 +31,38 @@ const BoxPlotTable = ({
3131
};
3232

3333
return (
34-
<div>
34+
<div className="results">
3535
<h3>Duration in milliseconds</h3>
36-
<table className="results">
37-
<thead>
38-
<tr>
39-
<th className="benchname">
40-
<button
41-
className={`button button__text ${
36+
<div className="results__table-container">
37+
<table className="results__table">
38+
<thead>
39+
<tr>
40+
<th className="benchname">
41+
<button
42+
className={`button button__text ${
4243
currentSortKey === SORT_BY_NAME ? "sort-key" : ""
43-
}`}
44-
aria-label="Sort frameworks in ascending order (asc)"
45-
onClick={handleSortByName}
46-
>
47-
Name
48-
</button>
49-
</th>
50-
<th style={{ width: frameworks.length * 70 + 100 }}></th>
51-
</tr>
52-
</thead>
53-
<tbody>
54-
<BoxPlotTableRows
55-
results={results}
56-
frameworks={frameworks}
57-
benchmarks={benchmarks}
58-
currentSortKey={currentSortKey}
59-
sortBy={sortBy}
60-
cpuDurationMode={cpuDurationMode}
61-
/>
62-
</tbody>
63-
</table>
44+
}`}
45+
aria-label="Sort frameworks in ascending order (asc)"
46+
onClick={handleSortByName}
47+
>
48+
Name
49+
</button>
50+
</th>
51+
<th style={{ width: frameworks.length * 70 + 100 }}></th>
52+
</tr>
53+
</thead>
54+
<tbody>
55+
<BoxPlotTableRows
56+
results={results}
57+
frameworks={frameworks}
58+
benchmarks={benchmarks}
59+
currentSortKey={currentSortKey}
60+
sortBy={sortBy}
61+
cpuDurationMode={cpuDurationMode}
62+
/>
63+
</tbody>
64+
</table>
65+
</div>
6466
</div>
6567
);
6668
};

‎webdriver-ts-results/src/components/tables/CpuResultsTable.tsx

Lines changed: 86 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -24,97 +24,103 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
2424
};
2525

2626
return resultsCPU.results.length === 0 ? null : (
27-
<div>
27+
<div className="results">
2828
<h3>
2929
Duration in milliseconds ± 95% confidence interval (Slowdown = Duration
3030
/ Fastest)
3131
</h3>
32-
<table className="results">
33-
<thead>
34-
<tr>
35-
<th className="benchname">
36-
<button
37-
className={`button button__text ${
32+
<div className="results__table-container">
33+
<table className="results__table">
34+
<thead>
35+
<tr>
36+
<th className="benchname">
37+
<button
38+
className={`button button__text ${
3839
currentSortKey === SORT_BY_NAME ? "sort-key" : ""
39-
}`}
40-
onClick={handleSortByName}
41-
>
42-
Name
43-
</button>
44-
<br />
45-
Duration for...
46-
</th>
47-
{data.frameworks.map((f, idx) => (
48-
<th key={idx}>
49-
{f.frameworkHomeURL ? (
50-
<a target="_blank" rel="noreferrer" href={f.frameworkHomeURL}>
51-
{f.displayname}
52-
</a>
53-
) : (
54-
f.displayname
55-
)}
56-
</th>
57-
))}
58-
</tr>
59-
</thead>
60-
<thead>
61-
<tr>
62-
<th>Implementation notes</th>
63-
{data.frameworks.map((f) => (
64-
<th key={f.name}>
65-
{f.issues &&
66-
f.issues.map((i) => (
67-
<React.Fragment key={i.toFixed()}>
68-
<a href={"#" + i.toFixed()}>{i.toFixed()}</a>
69-
<span> </span>
70-
</React.Fragment>
71-
))}
72-
</th>
73-
))}
74-
</tr>
75-
</thead>
76-
<thead>
77-
<tr>
78-
<th>Implementation link</th>
79-
{data.frameworks.map((f) => (
80-
<th key={f.name}>
81-
<a
82-
target="_blank"
83-
rel="noreferrer"
84-
href={
85-
"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/" +
86-
f.dir
87-
}
40+
}`}
41+
onClick={handleSortByName}
8842
>
89-
code
90-
</a>
43+
Name
44+
</button>
45+
<br />
46+
Duration for...
9147
</th>
48+
{data.frameworks.map((f, idx) => (
49+
<th key={idx}>
50+
{f.frameworkHomeURL ? (
51+
<a
52+
target="_blank"
53+
rel="noreferrer"
54+
href={f.frameworkHomeURL}
55+
>
56+
{f.displayname}
57+
</a>
58+
) : (
59+
f.displayname
60+
)}
61+
</th>
62+
))}
63+
</tr>
64+
</thead>
65+
<thead>
66+
<tr>
67+
<th>Implementation notes</th>
68+
{data.frameworks.map((f) => (
69+
<th key={f.name}>
70+
{f.issues &&
71+
f.issues.map((i) => (
72+
<React.Fragment key={i.toFixed()}>
73+
<a href={"#" + i.toFixed()}>{i.toFixed()}</a>
74+
<span> </span>
75+
</React.Fragment>
76+
))}
77+
</th>
78+
))}
79+
</tr>
80+
</thead>
81+
<thead>
82+
<tr>
83+
<th>Implementation link</th>
84+
{data.frameworks.map((f) => (
85+
<th key={f.name}>
86+
<a
87+
target="_blank"
88+
rel="noreferrer"
89+
href={
90+
"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/" +
91+
f.dir
92+
}
93+
>
94+
code
95+
</a>
96+
</th>
97+
))}
98+
</tr>
99+
</thead>
100+
<tbody>
101+
{resultsCPU.results.map((resultsForBenchmark, benchIdx) => (
102+
<ValueResultRow
103+
key={resultsCPU.benchmarks[benchIdx]?.id}
104+
benchIdx={benchIdx}
105+
resultsForBenchmark={resultsForBenchmark}
106+
benchmarks={resultsCPU.benchmarks}
107+
currentSortKey={currentSortKey}
108+
sortBy={sortBy}
109+
/>
92110
))}
93-
</tr>
94-
</thead>
95-
<tbody>
96-
{resultsCPU.results.map((resultsForBenchmark, benchIdx) => (
97-
<ValueResultRow
98-
key={resultsCPU.benchmarks[benchIdx]?.id}
99-
benchIdx={benchIdx}
100-
resultsForBenchmark={resultsForBenchmark}
101-
benchmarks={resultsCPU.benchmarks}
111+
<GeomMeanRow
102112
currentSortKey={currentSortKey}
103113
sortBy={sortBy}
114+
geomMean={resultsCPU.geomMean}
115+
sortbyGeommeanEnum={SORT_BY_GEOMMEAN_CPU}
116+
/>
117+
<CompareRow
118+
comparison={resultsCPU.comparison}
119+
compareWith={data.compareWith}
104120
/>
105-
))}
106-
<GeomMeanRow
107-
currentSortKey={currentSortKey}
108-
sortBy={sortBy}
109-
geomMean={resultsCPU.geomMean}
110-
sortbyGeommeanEnum={SORT_BY_GEOMMEAN_CPU}
111-
/>
112-
<CompareRow
113-
comparison={resultsCPU.comparison}
114-
compareWith={data.compareWith}
115-
/>
116-
</tbody>
117-
</table>
121+
</tbody>
122+
</table>
123+
</div>
118124
</div>
119125
);
120126
};

0 commit comments

Comments
 (0)