measure transferred size

Author: krausest

eslint.config.js

@@ -56,6 +56,7 @@ export default [
       "unicorn/prefer-ternary": "off",
       "unicorn/require-number-to-fixed-digits-argument": "off",
       "unicorn/prefer-set-has": "off",
+      "unicorn/unicorn/no-array-reduce": "off",
       // maybe not:
       "unicorn/consistent-function-scoping": "off",
       "unicorn/no-array-for-each": "off",

webdriver-ts-results/src/Common.ts

@@ -94,10 +94,17 @@ export function findIssue(issueNumber: number): Issue | undefined {
 export enum BenchmarkType {
   CPU,
   MEM,
-  DUMMY,
-  STARTUP,
+  STARTUP=3,
+  SIZE=5,
 }
 
+const benchmarkTypes = [
+  BenchmarkType.CPU,
+  BenchmarkType.MEM,
+  BenchmarkType.STARTUP,
+  BenchmarkType.SIZE,
+];
+
 export interface Benchmark {
   id: string;
   type: BenchmarkType;
@@ -133,10 +140,12 @@ interface ResultData {
 export const SORT_BY_NAME = "SORT_BY_NAME";
 export const SORT_BY_GEOMMEAN_CPU = "SORT_BY_GEOMMEAN_CPU";
 export const SORT_BY_GEOMMEAN_MEM = "SORT_BY_GEOMMEAN_MEM";
+export const SORT_BY_GEOMMEAN_SIZE = "SORT_BY_GEOMMEAN_SIZE";
 export const SORT_BY_GEOMMEAN_STARTUP = "SORT_BY_GEOMMEAN_STARTUP";
 export type T_SORT_BY_GEOMMEAN =
   | typeof SORT_BY_GEOMMEAN_CPU
   | typeof SORT_BY_GEOMMEAN_MEM
+  | typeof SORT_BY_GEOMMEAN_SIZE
   | typeof SORT_BY_GEOMMEAN_STARTUP;
 
 const computeColor = function (factor: number): string {
@@ -270,21 +279,9 @@ const formatEn = new Intl.NumberFormat("en-US", {
 
 export class ResultTableData {
   resultsMap = new Map<BenchmarkType, ResultData>();
-  // // Rows
-  // benchmarksCPU: Array<Benchmark>;
-  // benchmarksStartup: Array<Benchmark>;
-  // benchmarksMEM: Array<Benchmark>;
-  // Columns
   frameworks: Array<Framework>;
   frameworksForFactors: Array<Framework>;
   selectedFameworks: Set<Framework>;
-  // Cell data
-  // resultsCPU: Array<Array<TableResultValueEntry|null>>;   // [benchmark][framework]
-  // geomMeanCPU: Array<TableResultGeommeanEntry|null>;
-  // geomMeanStartup: Array<TableResultGeommeanEntry|null>;
-  // geomMeanMEM: Array<TableResultGeommeanEntry|null>;
-  // resultsStartup: Array<Array<TableResultValueEntry|null>>;
-  // resultsMEM: Array<Array<TableResultValueEntry|null>>;
 
   constructor(
     public allFrameworks: Array<Framework>,
@@ -378,11 +375,6 @@ export class ResultTableData {
       return { benchmarks, results, geomMean, comparison };
     };
 
-    const benchmarkTypes = [
-      BenchmarkType.CPU,
-      BenchmarkType.MEM,
-      BenchmarkType.STARTUP,
-    ];
     for (const type of benchmarkTypes) {
       this.resultsMap.set(type, createResult(type));
     }
@@ -405,6 +397,10 @@ export class ResultTableData {
         sortValue =
           this.getResult(BenchmarkType.MEM).geomMean[frameworkIndex]!.mean ||
           Number.POSITIVE_INFINITY;
+      else if (sortKey === SORT_BY_GEOMMEAN_SIZE)
+        sortValue =
+          this.getResult(BenchmarkType.SIZE).geomMean[frameworkIndex]!.mean ||
+          Number.POSITIVE_INFINITY;
       else if (sortKey === SORT_BY_GEOMMEAN_STARTUP)
         sortValue =
           this.getResult(BenchmarkType.STARTUP).geomMean[frameworkIndex]!
@@ -416,6 +412,9 @@ export class ResultTableData {
         const memIdx = this.getResult(BenchmarkType.MEM).benchmarks.findIndex(
           (b) => b.id === sortKey,
         );
+        const sizeIdx = this.getResult(BenchmarkType.SIZE).benchmarks.findIndex(
+          (b) => b.id === sortKey,
+        );
         const startupIdx = this.getResult(
           BenchmarkType.STARTUP,
         ).benchmarks.findIndex((b) => b.id === sortKey);
@@ -432,6 +431,10 @@ export class ResultTableData {
           sortValue =
             this.getResult(BenchmarkType.MEM).results[memIdx][frameworkIndex]
               ?.value ?? Number.POSITIVE_INFINITY;
+        else if (sizeIdx > -1)
+          sortValue =
+            this.getResult(BenchmarkType.SIZE).results[sizeIdx][frameworkIndex]
+              ?.value ?? Number.POSITIVE_INFINITY;
         else throw Error(`sortKey ${sortKey} not found`);
       }
       return {
@@ -447,12 +450,6 @@ export class ResultTableData {
 
     this.frameworks = this.remap(remappedIdx, this.frameworks);
 
-    const benchmarkTypes = [
-      BenchmarkType.CPU,
-      BenchmarkType.MEM,
-      BenchmarkType.STARTUP,
-    ];
-
     for (const type of benchmarkTypes) {
       const result = this.getResult(type);
 
@@ -588,9 +585,9 @@ export class ResultTableData {
         (1.959964 * (resultValues.standardDeviation || 0)) /
         Math.sqrt(resultValues.values.length);
       const conficenceIntervalStr =
-        benchmark.type === BenchmarkType.MEM
-          ? null
-          : conficenceInterval.toFixed(1);
+        benchmark.type === BenchmarkType.CPU
+          ? conficenceInterval.toFixed(1)
+          : null;
       const formattedValue = formatEn.format(value);
 
       if (!this.compareWith) {

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

@@ -5,6 +5,7 @@ import MemResultsTable from "./tables/MemResultsTable";
 import StartupResultsTable from "./tables/StartupResultsTable";
 import { benchmarks } from "../results";
 import { useRootStore } from "../reducer";
+import SizeResultsTable from "./tables/SizeResultsTable";
 
 const BoxPlotTable = React.lazy(() => import("./BoxPlotTable/BoxPlotTable"));
 
@@ -75,6 +76,7 @@ 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} />
+                <SizeResultsTable currentSortKey={currentSortKey} sortBy={sortBy} data={data} />
               </table>
             </div>
           </div>

webdriver-ts-results/src/components/tables/SizeResultsTable.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { ResultTableData, SORT_BY_NAME, BenchmarkType, SORT_BY_GEOMMEAN_SIZE } from "../../Common";
+import ValueResultRow from "./ValueResultRow";
+import GeomMeanRow from "./GeomMeanRow";
+
+interface Props {
+  data: ResultTableData;
+  currentSortKey: string;
+  sortBy: (name: string) => void;
+}
+
+const SizeResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
+  const resultsSize = data.getResult(BenchmarkType.SIZE);
+
+  const handleSortByName = (event: React.MouseEvent) => {
+    event.preventDefault();
+    sortBy(SORT_BY_NAME);
+  };
+
+  return resultsSize.results.length === 0 ? null : (
+    <>
+      <thead>
+        <tr>
+          <td className="description">
+            <h3>Transferred Size</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>
+        {resultsSize.results.map((resultsForBenchmark, benchIdx) => (
+          <ValueResultRow
+            key={resultsSize.benchmarks[benchIdx]?.id}
+            benchIdx={benchIdx}
+            resultsForBenchmark={resultsForBenchmark}
+            benchmarks={resultsSize.benchmarks}
+            currentSortKey={currentSortKey}
+            sortBy={sortBy}
+          />
+        ))}
+        <GeomMeanRow weighted={false} currentSortKey={currentSortKey} sortBy={sortBy} geomMean={resultsSize.geomMean} sortbyGeommeanEnum={SORT_BY_GEOMMEAN_SIZE} />
+      </tbody>
+    </>
+  );
+};
+
+export default SizeResultsTable;