Skip to content

Commit 0eb7881

Browse files
krausestkrausest
committed
scroll whole table
1 parent cb9e66e commit 0eb7881

File tree

7 files changed

+2670
-2568
lines changed

7 files changed

+2670
-2568
lines changed

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

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,28 @@ input + label {
6767
margin-top: 5px;
6868
margin-bottom: 5px;
6969
}
70-
70+
thead.dummy th {
71+
padding: 0;
72+
border: 0;
73+
}
74+
.results__table td.description {
75+
text-align: left;
76+
overflow: visible;
77+
height: 42px;
78+
padding:0 !important;
79+
border:0;
80+
}
81+
td > h3 {
82+
position:absolute;
83+
font-size: 16px;
84+
margin: 0px;
85+
padding: 10px;
86+
top:0;
87+
left:0;
88+
width: 800px;
89+
height: 40px;
90+
background-color: #fff;
91+
}
7192
td {
7293
text-align: center;
7394
}

‎webdriver-ts-results/src/components/ResultTable.tsx

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import React from "react";
2-
import {
3-
DisplayMode,
4-
BenchmarkType,
5-
FrameworkType,
6-
CpuDurationMode,
7-
} from "../Common";
2+
import { DisplayMode, BenchmarkType, FrameworkType, CpuDurationMode } from "../Common";
83
import CpuResultsTable from "./tables/CpuResultsTable";
94
import MemResultsTable from "./tables/MemResultsTable";
105
import StartupResultsTable from "./tables/StartupResultsTable";
@@ -56,10 +51,7 @@ const ResultTable = ({ type }: Props) => {
5651
<p>{texts[type].description}</p>
5752

5853
{cpuDurationMode === CpuDurationMode.Script && (
59-
<h3>
60-
Warning: This is an experimental view. Don&apos;t rely on those
61-
values yet.
62-
</h3>
54+
<h3>Warning: This is an experimental view. Don&apos;t rely on those values yet.</h3>
6355
)}
6456
{displayMode === DisplayMode.BoxPlot ? (
6557
<>
@@ -77,23 +69,15 @@ const ResultTable = ({ type }: Props) => {
7769
)}
7870
</>
7971
) : (
80-
<>
81-
<CpuResultsTable
82-
currentSortKey={currentSortKey}
83-
sortBy={sortBy}
84-
data={data}
85-
/>
86-
<StartupResultsTable
87-
currentSortKey={currentSortKey}
88-
sortBy={sortBy}
89-
data={data}
90-
/>
91-
<MemResultsTable
92-
currentSortKey={currentSortKey}
93-
sortBy={sortBy}
94-
data={data}
95-
/>
96-
</>
72+
<div className="results">
73+
<div className="results__table-container">
74+
<table className="results__table">
75+
<CpuResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
76+
<StartupResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
77+
<MemResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
78+
</table>
79+
</div>
80+
</div>
9781
)}
9882
</div>
9983
</div>

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

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,23 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
2424
};
2525

2626
return resultsCPU.results.length === 0 ? null : (
27-
<div className="results">
28-
<h3>
29-
Duration in milliseconds ± 95% confidence interval (Slowdown = Duration
30-
/ Fastest)
31-
</h3>
32-
<div className="results__table-container">
33-
<table className="results__table">
27+
<>
28+
{/* Dummy row for fixed td width */}
29+
<thead className="dummy">
30+
<tr>
31+
<th></th>
32+
{data.frameworks.map((f, idx) => (
33+
<th key={idx}></th>
34+
))}
35+
</tr>
36+
</thead>
37+
<thead>
38+
<tr>
39+
<td className="description">
40+
<h3>Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)</h3>
41+
</td>
42+
</tr>
43+
</thead>
3444
<thead>
3545
<tr>
3646
<th className="benchname">
@@ -120,9 +130,7 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
120130
compareWith={data.compareWith}
121131
/>
122132
</tbody>
123-
</table>
124-
</div>
125-
</div>
133+
</>
126134
);
127135
};
128136

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

Lines changed: 35 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import React from "react";
2-
import {
3-
ResultTableData,
4-
SORT_BY_NAME,
5-
SORT_BY_GEOMMEAN_MEM,
6-
BenchmarkType,
7-
} from "../../Common";
2+
import { ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_MEM, BenchmarkType } from "../../Common";
83
import ValueResultRow from "./ValueResultRow";
94
import GeomMeanRow from "./GeomMeanRow";
105

@@ -23,49 +18,40 @@ const MemResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
2318
};
2419

2520
return resultsMEM.results.length === 0 ? null : (
26-
<div className="results">
27-
<h3>Memory allocation in MBs ± 95% confidence interval</h3>
28-
<div className="results__table-container">
29-
<table className="results__table">
30-
<thead>
31-
<tr>
32-
<th className="benchname">
33-
<button
34-
className={`button button__text ${
35-
currentSortKey === SORT_BY_NAME ? "sort-key" : ""
36-
}`}
37-
onClick={handleSortByName}
38-
>
39-
Name
40-
</button>
41-
</th>
42-
{data.frameworks.map((f) => (
43-
<th key={f.displayname}>{f.displayname}</th>
44-
))}
45-
</tr>
46-
</thead>
47-
<tbody>
48-
{resultsMEM.results.map((resultsForBenchmark, benchIdx) => (
49-
<ValueResultRow
50-
key={resultsMEM.benchmarks[benchIdx]?.id}
51-
benchIdx={benchIdx}
52-
resultsForBenchmark={resultsForBenchmark}
53-
benchmarks={resultsMEM.benchmarks}
54-
currentSortKey={currentSortKey}
55-
sortBy={sortBy}
56-
/>
57-
))}
58-
<GeomMeanRow
59-
weighted={false}
60-
currentSortKey={currentSortKey}
61-
sortBy={sortBy}
62-
geomMean={resultsMEM.geomMean}
63-
sortbyGeommeanEnum={SORT_BY_GEOMMEAN_MEM}
64-
/>
65-
</tbody>
66-
</table>
67-
</div>
68-
</div>
21+
<>
22+
<thead>
23+
<tr>
24+
<td className="description">
25+
<h3>Memory allocation in MBs ± 95% confidence interval</h3>
26+
</td>
27+
</tr>
28+
</thead>
29+
<thead>
30+
<tr>
31+
<th className="benchname">
32+
<button className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`} onClick={handleSortByName}>
33+
Name
34+
</button>
35+
</th>
36+
{data.frameworks.map((f) => (
37+
<th key={f.displayname}>{f.displayname}</th>
38+
))}
39+
</tr>
40+
</thead>
41+
<tbody>
42+
{resultsMEM.results.map((resultsForBenchmark, benchIdx) => (
43+
<ValueResultRow
44+
key={resultsMEM.benchmarks[benchIdx]?.id}
45+
benchIdx={benchIdx}
46+
resultsForBenchmark={resultsForBenchmark}
47+
benchmarks={resultsMEM.benchmarks}
48+
currentSortKey={currentSortKey}
49+
sortBy={sortBy}
50+
/>
51+
))}
52+
<GeomMeanRow weighted={false} currentSortKey={currentSortKey} sortBy={sortBy} geomMean={resultsMEM.geomMean} sortbyGeommeanEnum={SORT_BY_GEOMMEAN_MEM} />
53+
</tbody>
54+
</>
6955
);
7056
};
7157

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

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import React from "react";
2-
import {
3-
ResultTableData,
4-
SORT_BY_NAME,
5-
SORT_BY_GEOMMEAN_STARTUP,
6-
BenchmarkType,
7-
} from "../../Common";
2+
import { ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_STARTUP, BenchmarkType } from "../../Common";
83
import ValueResultRow from "./ValueResultRow";
94
import GeomMeanRow from "./GeomMeanRow";
105

@@ -23,49 +18,49 @@ const StartupResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
2318
};
2419

2520
return resultsStartup.results.length === 0 ? null : (
26-
<div className="results">
27-
<h3>Startup metrics (lighthouse with mobile simulation)</h3>
28-
<div className="results__table-container">
29-
<table className="results__table">
30-
<thead>
31-
<tr>
32-
<th className="benchname">
33-
<button
34-
className={`button button__text ${
35-
currentSortKey === SORT_BY_NAME ? "sort-key" : ""
36-
}`}
37-
onClick={handleSortByName}
38-
>
39-
Name
40-
</button>
41-
</th>
42-
{data.frameworks.map((f) => (
43-
<th key={f.displayname}>{f.displayname}</th>
44-
))}
45-
</tr>
46-
</thead>
47-
<tbody>
48-
{resultsStartup.results.map((resultsForBenchmark, benchIdx) => (
49-
<ValueResultRow
50-
key={resultsStartup.benchmarks[benchIdx]?.id}
51-
benchIdx={benchIdx}
52-
resultsForBenchmark={resultsForBenchmark}
53-
benchmarks={resultsStartup.benchmarks}
54-
currentSortKey={currentSortKey}
55-
sortBy={sortBy}
56-
/>
57-
))}
58-
<GeomMeanRow
59-
weighted={false}
60-
currentSortKey={currentSortKey}
61-
sortBy={sortBy}
62-
geomMean={resultsStartup.geomMean}
63-
sortbyGeommeanEnum={SORT_BY_GEOMMEAN_STARTUP}
64-
/>
65-
</tbody>
66-
</table>
67-
</div>
68-
</div>
21+
<>
22+
<thead>
23+
<tr>
24+
<td className="description">
25+
<h3>Startup metrics (lighthouse with mobile simulation)</h3>
26+
</td>
27+
</tr>
28+
</thead>
29+
<thead>
30+
<tr>
31+
<th className="benchname">
32+
<button
33+
className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
34+
onClick={handleSortByName}
35+
>
36+
Name
37+
</button>
38+
</th>
39+
{data.frameworks.map((f) => (
40+
<th key={f.displayname}>{f.displayname}</th>
41+
))}
42+
</tr>
43+
</thead>
44+
<tbody>
45+
{resultsStartup.results.map((resultsForBenchmark, benchIdx) => (
46+
<ValueResultRow
47+
key={resultsStartup.benchmarks[benchIdx]?.id}
48+
benchIdx={benchIdx}
49+
resultsForBenchmark={resultsForBenchmark}
50+
benchmarks={resultsStartup.benchmarks}
51+
currentSortKey={currentSortKey}
52+
sortBy={sortBy}
53+
/>
54+
))}
55+
<GeomMeanRow
56+
weighted={false}
57+
currentSortKey={currentSortKey}
58+
sortBy={sortBy}
59+
geomMean={resultsStartup.geomMean}
60+
sortbyGeommeanEnum={SORT_BY_GEOMMEAN_STARTUP}
61+
/>
62+
</tbody>
63+
</>
6964
);
7065
};
7166

0 commit comments

Comments
 (0)