scroll whole table

krausest · Oct 21, 2023 · 0eb7881 · 0eb7881
1 parent cb9e66e
commit 0eb7881
Show file tree

Hide file tree

Showing 7 changed files with 2,670 additions and 2,568 deletions.
diff --git a/webdriver-ts-results/src/App.css b/webdriver-ts-results/src/App.css
@@ -67,7 +67,28 @@ input + label {
   margin-top: 5px;
   margin-bottom: 5px;
 }
-
+thead.dummy th {
+  padding: 0;
+  border: 0;
+}
+.results__table td.description {
+  text-align: left;
+  overflow: visible;
+  height: 42px;
+  padding:0 !important;
+  border:0;
+}
+td > h3 {
+  position:absolute;
+  font-size: 16px;
+  margin: 0px;
+  padding: 10px;
+  top:0;
+  left:0;
+  width: 800px;
+  height: 40px;
+  background-color: #fff;
+}
 td {
   text-align: center;
 }

diff --git a/webdriver-ts-results/src/components/ResultTable.tsx b/webdriver-ts-results/src/components/ResultTable.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  DisplayMode,
-  BenchmarkType,
-  FrameworkType,
-  CpuDurationMode,
-} from "../Common";
+import { DisplayMode, BenchmarkType, FrameworkType, CpuDurationMode } from "../Common";
 import CpuResultsTable from "./tables/CpuResultsTable";
 import MemResultsTable from "./tables/MemResultsTable";
 import StartupResultsTable from "./tables/StartupResultsTable";
@@ -56,10 +51,7 @@ const ResultTable = ({ type }: Props) => {
         <p>{texts[type].description}</p>
 
         {cpuDurationMode === CpuDurationMode.Script && (
-          <h3>
-            Warning: This is an experimental view. Don&apos;t rely on those
-            values yet.
-          </h3>
+          <h3>Warning: This is an experimental view. Don&apos;t rely on those values yet.</h3>
         )}
         {displayMode === DisplayMode.BoxPlot ? (
           <>
@@ -77,23 +69,15 @@ const ResultTable = ({ type }: Props) => {
             )}
           </>
         ) : (
-          <>
-            <CpuResultsTable
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              data={data}
-            />
-            <StartupResultsTable
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              data={data}
-            />
-            <MemResultsTable
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              data={data}
-            />
-          </>
+          <div className="results">
+            <div className="results__table-container">
+              <table className="results__table">
+                <CpuResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
+                <StartupResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
+                <MemResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
+              </table>
+            </div>
+          </div>
         )}
       </div>
     </div>

diff --git a/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx b/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx
@@ -24,13 +24,23 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
   };
 
   return resultsCPU.results.length === 0 ? null : (
-    <div className="results">
-      <h3>
-        Duration in milliseconds ± 95% confidence interval (Slowdown = Duration
-        / Fastest)
-      </h3>
-      <div className="results__table-container">
-        <table className="results__table">
+    <>
+    {/* Dummy row for fixed td width */}
+      <thead className="dummy">
+        <tr>
+          <th></th>
+          {data.frameworks.map((f, idx) => (
+            <th key={idx}></th>
+          ))}
+        </tr>
+      </thead>
+      <thead>
+        <tr>
+          <td className="description">
+            <h3>Duration in milliseconds ± 95% confidence interval (Slowdown = Duration / Fastest)</h3>
+          </td>
+        </tr>
+      </thead>
           <thead>
             <tr>
               <th className="benchname">
@@ -120,9 +130,7 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
               compareWith={data.compareWith}
             />
           </tbody>
-        </table>
-      </div>
-    </div>
+    </>
   );
 };
 

diff --git a/webdriver-ts-results/src/components/tables/MemResultsTable.tsx b/webdriver-ts-results/src/components/tables/MemResultsTable.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  ResultTableData,
-  SORT_BY_NAME,
-  SORT_BY_GEOMMEAN_MEM,
-  BenchmarkType,
-} from "../../Common";
+import { ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_MEM, BenchmarkType } from "../../Common";
 import ValueResultRow from "./ValueResultRow";
 import GeomMeanRow from "./GeomMeanRow";
 
@@ -23,49 +18,40 @@ const MemResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
   };
 
   return resultsMEM.results.length === 0 ? null : (
-    <div className="results">
-      <h3>Memory allocation in MBs ± 95% confidence interval</h3>
-      <div className="results__table-container">
-        <table className="results__table">
-          <thead>
-            <tr>
-              <th className="benchname">
-                <button
-                  className={`button button__text ${
-                    currentSortKey === SORT_BY_NAME ? "sort-key" : ""
-                  }`}
-                  onClick={handleSortByName}
-                >
-                  Name
-                </button>
-              </th>
-              {data.frameworks.map((f) => (
-                <th key={f.displayname}>{f.displayname}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {resultsMEM.results.map((resultsForBenchmark, benchIdx) => (
-              <ValueResultRow
-                key={resultsMEM.benchmarks[benchIdx]?.id}
-                benchIdx={benchIdx}
-                resultsForBenchmark={resultsForBenchmark}
-                benchmarks={resultsMEM.benchmarks}
-                currentSortKey={currentSortKey}
-                sortBy={sortBy}
-              />
-            ))}
-            <GeomMeanRow
-              weighted={false}
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              geomMean={resultsMEM.geomMean}
-              sortbyGeommeanEnum={SORT_BY_GEOMMEAN_MEM}
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <>
+      <thead>
+        <tr>
+          <td className="description">
+            <h3>Memory allocation in MBs ± 95% confidence interval</h3>
+          </td>
+        </tr>
+      </thead>
+      <thead>
+        <tr>
+          <th className="benchname">
+            <button className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`} onClick={handleSortByName}>
+              Name
+            </button>
+          </th>
+          {data.frameworks.map((f) => (
+            <th key={f.displayname}>{f.displayname}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {resultsMEM.results.map((resultsForBenchmark, benchIdx) => (
+          <ValueResultRow
+            key={resultsMEM.benchmarks[benchIdx]?.id}
+            benchIdx={benchIdx}
+            resultsForBenchmark={resultsForBenchmark}
+            benchmarks={resultsMEM.benchmarks}
+            currentSortKey={currentSortKey}
+            sortBy={sortBy}
+          />
+        ))}
+        <GeomMeanRow weighted={false} currentSortKey={currentSortKey} sortBy={sortBy} geomMean={resultsMEM.geomMean} sortbyGeommeanEnum={SORT_BY_GEOMMEAN_MEM} />
+      </tbody>
+    </>
   );
 };
 

diff --git a/webdriver-ts-results/src/components/tables/StartupResultsTable.tsx b/webdriver-ts-results/src/components/tables/StartupResultsTable.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  ResultTableData,
-  SORT_BY_NAME,
-  SORT_BY_GEOMMEAN_STARTUP,
-  BenchmarkType,
-} from "../../Common";
+import { ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_STARTUP, BenchmarkType } from "../../Common";
 import ValueResultRow from "./ValueResultRow";
 import GeomMeanRow from "./GeomMeanRow";
 
@@ -23,49 +18,49 @@ const StartupResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
   };
 
   return resultsStartup.results.length === 0 ? null : (
-    <div className="results">
-      <h3>Startup metrics (lighthouse with mobile simulation)</h3>
-      <div className="results__table-container">
-        <table className="results__table">
-          <thead>
-            <tr>
-              <th className="benchname">
-                <button
-                  className={`button button__text ${
-                    currentSortKey === SORT_BY_NAME ? "sort-key" : ""
-                  }`}
-                  onClick={handleSortByName}
-                >
-                  Name
-                </button>
-              </th>
-              {data.frameworks.map((f) => (
-                <th key={f.displayname}>{f.displayname}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {resultsStartup.results.map((resultsForBenchmark, benchIdx) => (
-              <ValueResultRow
-                key={resultsStartup.benchmarks[benchIdx]?.id}
-                benchIdx={benchIdx}
-                resultsForBenchmark={resultsForBenchmark}
-                benchmarks={resultsStartup.benchmarks}
-                currentSortKey={currentSortKey}
-                sortBy={sortBy}
-              />
-            ))}
-            <GeomMeanRow
-              weighted={false}
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              geomMean={resultsStartup.geomMean}
-              sortbyGeommeanEnum={SORT_BY_GEOMMEAN_STARTUP}
-            />
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <>
+      <thead>
+        <tr>
+          <td className="description">
+            <h3>Startup metrics (lighthouse with mobile simulation)</h3>
+          </td>
+        </tr>
+      </thead>
+      <thead>
+        <tr>
+          <th className="benchname">
+            <button
+              className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
+              onClick={handleSortByName}
+            >
+              Name
+            </button>
+          </th>
+          {data.frameworks.map((f) => (
+            <th key={f.displayname}>{f.displayname}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {resultsStartup.results.map((resultsForBenchmark, benchIdx) => (
+          <ValueResultRow
+            key={resultsStartup.benchmarks[benchIdx]?.id}
+            benchIdx={benchIdx}
+            resultsForBenchmark={resultsForBenchmark}
+            benchmarks={resultsStartup.benchmarks}
+            currentSortKey={currentSortKey}
+            sortBy={sortBy}
+          />
+        ))}
+        <GeomMeanRow
+          weighted={false}
+          currentSortKey={currentSortKey}
+          sortBy={sortBy}
+          geomMean={resultsStartup.geomMean}
+          sortbyGeommeanEnum={SORT_BY_GEOMMEAN_STARTUP}
+        />
+      </tbody>
+    </>
   );
 };