From 251c4d2d8a73149282f4466084c2aa8ef770b5c4 Mon Sep 17 00:00:00 2001
From: Daniil Zhuravlev <nakrovati@outlook.com>
Date: Thu, 7 Mar 2024 01:24:14 +0400
Subject: [PATCH 1/5] refactor(web): replace plotly with chart.js

---
 push_results.sh                               |  4 +-
 webdriver-ts-results/package-lock.json        | 40 +++++++--
 webdriver-ts-results/package.json             |  3 +-
 .../BoxPlotTable/BoxPlotTableChart.tsx        | 83 +++++++++++++------
 .../components/ResultTable/ResultTable.tsx    |  2 +-
 webdriver-ts-results/vite.config.ts           |  2 +-
 6 files changed, 99 insertions(+), 35 deletions(-)

diff --git a/push_results.sh b/push_results.sh
index 75873a1f1..b27dc1a7d 100755
--- a/push_results.sh
+++ b/push_results.sh
@@ -1,12 +1,12 @@
 cp webdriver-ts-results/dist/index.html ../krausest.github.io/js-framework-benchmark/current.html
 cp webdriver-ts-results/dist/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
-cp webdriver-ts-results/dist/plotly*.js ../krausest.github.io/js-framework-benchmark/
+cp webdriver-ts-results/dist/chartjs*.js ../krausest.github.io/js-framework-benchmark/
 cp webdriver-ts-results/dist/index*.css ../krausest.github.io/js-framework-benchmark/
 cp webdriver-ts-results/dist/index*.js ../krausest.github.io/js-framework-benchmark/
 cd ../krausest.github.io
 git add js-framework-benchmark/current.html
 git add js-framework-benchmark/BoxPlotTable*.js
-git add js-framework-benchmark/plotly*.js
+git add js-framework-benchmark/chartjs*.js
 git add js-framework-benchmark/index*.css
 git add js-framework-benchmark/index*.js
 git commit -m "update results"
diff --git a/webdriver-ts-results/package-lock.json b/webdriver-ts-results/package-lock.json
index 082536692..d0b84d682 100644
--- a/webdriver-ts-results/package-lock.json
+++ b/webdriver-ts-results/package-lock.json
@@ -8,10 +8,11 @@
       "name": "webdriver-ts-results",
       "version": "0.1.0",
       "dependencies": {
+        "@sgratzl/chartjs-chart-boxplot": "^4.2.8",
         "antd": "^5.14.2",
+        "chart.js": "^4.4.2",
         "jstat": "^1.9.6",
         "lucide-react": "^0.344.0",
-        "plotly.js-cartesian-dist": "2.18.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "zustand": "^4.4.1"
@@ -860,6 +861,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
+      "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
+    },
     "node_modules/@rc-component/color-picker": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-1.5.2.tgz",
@@ -1128,6 +1134,22 @@
         "win32"
       ]
     },
+    "node_modules/@sgratzl/boxplots": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz",
+      "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA=="
+    },
+    "node_modules/@sgratzl/chartjs-chart-boxplot": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-4.2.8.tgz",
+      "integrity": "sha512-D4GNB4H1WVqJuvVgATj6GZzDbAKLNIaRGzUNa16+a0QjhiATBm05OfaQM1m9kRUuXs2Hmufi2v8IbHKhAQFALg==",
+      "dependencies": {
+        "@sgratzl/boxplots": "^1.3.0"
+      },
+      "peerDependencies": {
+        "chart.js": "^4.1.1"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1376,6 +1398,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz",
+      "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -1656,11 +1689,6 @@
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
-    "node_modules/plotly.js-cartesian-dist": {
-      "version": "2.18.2",
-      "resolved": "https://registry.npmjs.org/plotly.js-cartesian-dist/-/plotly.js-cartesian-dist-2.18.2.tgz",
-      "integrity": "sha512-cKdcEoDbqgAAFI0k7MdbaS2Gmp+301RhOqO6yxptYgwrhcqDRxB0x81TLPUmmUewo5d0UTF+JNg+BL+JZVs6pQ=="
-    },
     "node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
diff --git a/webdriver-ts-results/package.json b/webdriver-ts-results/package.json
index 6417ccf9b..660608ff8 100644
--- a/webdriver-ts-results/package.json
+++ b/webdriver-ts-results/package.json
@@ -4,10 +4,11 @@
   "private": true,
   "type": "module",
   "dependencies": {
+    "@sgratzl/chartjs-chart-boxplot": "^4.2.8",
     "antd": "^5.14.2",
+    "chart.js": "^4.4.2",
     "jstat": "^1.9.6",
     "lucide-react": "^0.344.0",
-    "plotly.js-cartesian-dist": "2.18.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "zustand": "^4.4.1"
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
index 318ec1159..148442fe5 100644
--- a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
+++ b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
@@ -1,5 +1,20 @@
 import { useRef, useEffect } from "react";
-import Plotly from "plotly.js-cartesian-dist";
+import { BoxPlotChart } from "@sgratzl/chartjs-chart-boxplot";
+import { Chart, ChartConfiguration } from "chart.js";
+
+Chart.register(BoxPlotChart);
+
+const backgroundColor = [
+  "hsl(0 80% 50%)", // Red
+  "hsl(40 80% 50%)", // Orange
+  "hsl(80 80% 50%)", // Yellow
+  "hsl(120 80% 50%)", // Green
+  "hsl(160 80% 50%)", // Cyan
+  "hsl(200 80% 50%)", // Blue
+  "hsl(240 80% 50%)", // Purple
+  "hsl(280 80% 50%)", // Magenta
+  "hsl(320 80% 50%)", // Pink
+];
 
 interface BoxPlotData {
   framework: string;
@@ -11,34 +26,54 @@ interface Props {
 }
 
 const BoxPlotTableChart = ({ traces }: Props) => {
-  const elemRef = useRef(null);
+  const chartRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
-    const plotlTtraces = traces.map((t) => ({
-      type: "box",
-      y: t.values,
-      boxpoints: false,
-      jitter: 0.5,
-      name: t.framework,
-      boxmean: "sd",
-    }));
-
-    const layout = {
-      showlegend: false,
-      margin: {
-        l: 40,
-        r: 0,
-        b: 120,
-        t: 0,
-        pad: 0,
+    const labels: string[] = [];
+    const data: number[][] = [];
+
+    for (const trace of traces) {
+      labels.push(trace.framework);
+      data.push(trace.values);
+    }
+
+    const config: ChartConfiguration<"boxplot"> = {
+      type: "boxplot",
+      data: {
+        labels,
+        datasets: [
+          {
+            backgroundColor,
+            data,
+          },
+        ],
+      },
+      options: {
+        scales: {
+          x: {
+            grid: {
+              display: false,
+            },
+          },
+          y: {
+            beginAtZero: false,
+          },
+        },
       },
     };
-    Plotly.newPlot(elemRef.current, plotlTtraces, layout, {
-      staticPlot: true,
-      editable: false,
-    });
+
+    const chart = new BoxPlotChart(chartRef.current!, config);
+
+    return () => {
+      chart.destroy();
+    };
   }, [traces]);
-  return <div ref={elemRef} style={{ height: "100%", width: "100%" }}></div>;
+
+  return (
+    <div style={{ height: "28rem" }}>
+      <canvas style={{ maxHeight: "100%" }} ref={chartRef}></canvas>
+    </div>
+  );
 };
 
 export default BoxPlotTableChart;
diff --git a/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx b/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
index 15c2514c8..d6b068959 100644
--- a/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
+++ b/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
@@ -7,7 +7,7 @@ import { benchmarks } from "@/results";
 import { useRootStore } from "@/reducer";
 import SizeResultsTable from "@/components/tables/SizeResultsTable";
 
-const BoxPlotTable = React.lazy(() => import("@/components/BoxPlotTable"));
+const BoxPlotTable = React.lazy(() => import("@/components/BoxPlotTable/BoxPlotTable"));
 
 interface Props {
   type: FrameworkType;
diff --git a/webdriver-ts-results/vite.config.ts b/webdriver-ts-results/vite.config.ts
index 7c63c564c..1e65bad8f 100644
--- a/webdriver-ts-results/vite.config.ts
+++ b/webdriver-ts-results/vite.config.ts
@@ -10,7 +10,7 @@ export default defineConfig({
     rollupOptions: {
       output: {
         manualChunks: {
-          plotly: ["plotly.js-cartesian-dist"],
+          chartjs: ["chart.js", "@sgratzl/chartjs-chart-boxplot"],
         },
       },
     },

From 1e2680fc8b042b5539470deb878546c0cc115786 Mon Sep 17 00:00:00 2001
From: Daniil Zhuravlev <nakrovati@outlook.com>
Date: Thu, 7 Mar 2024 01:29:31 +0400
Subject: [PATCH 2/5] style: format code

---
 .../components/BoxPlotTable/BoxPlotTable.tsx  |  21 +--
 .../BoxPlotTable/BoxPlotTableRow.tsx          |  16 +-
 .../BoxPlotTable/BoxPlotTableRows.tsx         |   9 +-
 .../src/components/tables/CompareRow.tsx      |  13 +-
 .../src/components/tables/CpuResultsTable.tsx | 175 ++++++++----------
 .../src/components/tables/GeomMeanRow.tsx     |  21 +--
 .../src/components/tables/MemResultsTable.tsx |  13 +-
 .../components/tables/SizeResultsTable.tsx    |  13 +-
 .../src/components/tables/ValueResultRow.tsx  |  18 +-
 9 files changed, 119 insertions(+), 180 deletions(-)

diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx
index 39152b880..c51bf8185 100644
--- a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx
+++ b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  SORT_BY_NAME,
-  Benchmark,
-  Framework,
-  ResultLookup,
-  CpuDurationMode,
-} from "@/Common";
+import { SORT_BY_NAME, Benchmark, Framework, ResultLookup, CpuDurationMode } from "@/Common";
 import BoxPlotTableRows from "./BoxPlotTableRows";
 
 interface Props {
@@ -17,14 +11,7 @@ interface Props {
   cpuDurationMode: CpuDurationMode;
 }
 
-const BoxPlotTable = ({
-  frameworks,
-  benchmarks,
-  results,
-  currentSortKey,
-  sortBy,
-  cpuDurationMode,
-}: Props) => {
+const BoxPlotTable = ({ frameworks, benchmarks, results, currentSortKey, sortBy, cpuDurationMode }: Props) => {
   const handleSortByName = (event: React.MouseEvent) => {
     event.preventDefault();
     sortBy(SORT_BY_NAME);
@@ -39,9 +26,7 @@ const BoxPlotTable = ({
             <tr>
               <th className="benchname">
                 <button
-                  className={`button button__text ${
-                    currentSortKey === SORT_BY_NAME ? "sort-key" : ""
-                  }`}
+                  className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
                   aria-label="Sort frameworks in ascending order (asc)"
                   onClick={handleSortByName}
                 >
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx
index 17e825ed8..c2832edd8 100644
--- a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx
+++ b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx
@@ -11,16 +11,8 @@ interface Props {
   cpuDurationMode: CpuDurationMode;
 }
 
-const BoxPlotTableRow = ({
-  frameworks,
-  benchmark,
-  results,
-  currentSortKey,
-  sortBy,
-  cpuDurationMode,
-}: Props) => {
-  const resultsValues = (framework: Framework) =>
-    results(benchmark, framework)?.results[cpuDurationMode].values ?? [];
+const BoxPlotTableRow = ({ frameworks, benchmark, results, currentSortKey, sortBy, cpuDurationMode }: Props) => {
+  const resultsValues = (framework: Framework) => results(benchmark, framework)?.results[cpuDurationMode].values ?? [];
 
   const handleSortByBenchmarkResults = (event: React.MouseEvent) => {
     event.preventDefault();
@@ -36,9 +28,7 @@ const BoxPlotTableRow = ({
     <tr key={benchmark.id} style={{ height: 400 }}>
       <th className="benchname">
         <button
-          className={`button button__text ${
-            currentSortKey === benchmark.id ? "sort-key" : ""
-          }`}
+          className={`button button__text ${currentSortKey === benchmark.id ? "sort-key" : ""}`}
           onClick={handleSortByBenchmarkResults}
           aria-label="Sort by benchmark results (from best to worst)"
         >
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx
index 1a809fc83..9ec2c9d33 100644
--- a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx
+++ b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx
@@ -10,14 +10,7 @@ interface Props {
   cpuDurationMode: CpuDurationMode;
 }
 
-const BoxPlotTableRows = ({
-  frameworks,
-  benchmarks,
-  results,
-  currentSortKey,
-  sortBy,
-  cpuDurationMode,
-}: Props) => {
+const BoxPlotTableRows = ({ frameworks, benchmarks, results, currentSortKey, sortBy, cpuDurationMode }: Props) => {
   return (
     <>
       {benchmarks.map((benchmark) => (
diff --git a/webdriver-ts-results/src/components/tables/CompareRow.tsx b/webdriver-ts-results/src/components/tables/CompareRow.tsx
index 6c4b50aac..5ef612e7a 100644
--- a/webdriver-ts-results/src/components/tables/CompareRow.tsx
+++ b/webdriver-ts-results/src/components/tables/CompareRow.tsx
@@ -10,10 +10,7 @@ const CompareRow = ({ comparison, compareWith }: Props) => {
   const compare = useRootStore((state) => state.compare);
   const stopCompare = useRootStore((state) => state.stopCompare);
 
-  const renderComparisonCell = (
-    result: TableResultComparisonEntry | null,
-    idx: number,
-  ) => {
+  const renderComparisonCell = (result: TableResultComparisonEntry | null, idx: number) => {
     if (!result) {
       return <th key={idx}></th>;
     }
@@ -37,9 +34,7 @@ const CompareRow = ({ comparison, compareWith }: Props) => {
         <button
           className="button button__text sortKey"
           onClick={handleToggleComparing}
-          aria-label={
-            isComparing ? "Stop comparing" : "Compare with other frameworks"
-          }
+          aria-label={isComparing ? "Stop comparing" : "Compare with other frameworks"}
         >
           {isComparing ? "stop compare" : "compare"}
         </button>
@@ -49,9 +44,7 @@ const CompareRow = ({ comparison, compareWith }: Props) => {
 
   return (
     <tr>
-      <th>
-        compare: Green means significantly faster, red significantly slower
-      </th>
+      <th>compare: Green means significantly faster, red significantly slower</th>
       {comparison.map((result, idx) => renderComparisonCell(result, idx))}
     </tr>
   );
diff --git a/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx b/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx
index 529a9648b..260e6d3c8 100644
--- a/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx
+++ b/webdriver-ts-results/src/components/tables/CpuResultsTable.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  ResultTableData,
-  SORT_BY_NAME,
-  SORT_BY_GEOMMEAN_CPU,
-  BenchmarkType,
-} from "@/Common";
+import { ResultTableData, SORT_BY_NAME, SORT_BY_GEOMMEAN_CPU, BenchmarkType } from "@/Common";
 import GeomMeanRow from "./GeomMeanRow";
 import CompareRow from "./CompareRow";
 import ValueResultRow from "./ValueResultRow";
@@ -25,7 +20,7 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
 
   return resultsCPU.results.length === 0 ? null : (
     <>
-    {/* Dummy row for fixed td width */}
+      {/* Dummy row for fixed td width */}
       <thead className="dummy">
         <tr>
           <th></th>
@@ -41,95 +36,83 @@ const CpuResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
           </td>
         </tr>
       </thead>
-          <thead>
-            <tr>
-              <th className="benchname">
-                <button
-                  className={`button button__text ${
-                    currentSortKey === SORT_BY_NAME ? "sort-key" : ""
-                  }`}
-                  onClick={handleSortByName}
-                >
-                  Name
-                </button>
-                <br />
-                Duration for...
-              </th>
-              {data.frameworks.map((f, idx) => (
-                <th key={idx}>
-                  {f.frameworkHomeURL ? (
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      href={f.frameworkHomeURL}
-                    >
-                      {f.displayname}
-                    </a>
-                  ) : (
-                    f.displayname
-                  )}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <thead>
-            <tr>
-              <th>Implementation notes</th>
-              {data.frameworks.map((f) => (
-                <th key={f.name}>
-                  {f.issues &&
-                    f.issues.map((i) => (
-                      <React.Fragment key={i.toFixed()}>
-                        <a href={"#" + i.toFixed()}>{i.toFixed()}</a>
-                        <span> </span>
-                      </React.Fragment>
-                    ))}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <thead>
-            <tr>
-              <th>Implementation link</th>
-              {data.frameworks.map((f) => (
-                <th key={f.name}>
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    href={
-                      "https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/" +
-                      f.dir
-                    }
-                  >
-                    code
-                  </a>
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {resultsCPU.results.map((resultsForBenchmark, benchIdx) => (
-              <ValueResultRow
-                key={resultsCPU.benchmarks[benchIdx]?.id}
-                benchIdx={benchIdx}
-                resultsForBenchmark={resultsForBenchmark}
-                benchmarks={resultsCPU.benchmarks}
-                currentSortKey={currentSortKey}
-                sortBy={sortBy}
-              />
-            ))}
-            <GeomMeanRow
-              weighted={true}
-              currentSortKey={currentSortKey}
-              sortBy={sortBy}
-              geomMean={resultsCPU.geomMean}
-              sortbyGeommeanEnum={SORT_BY_GEOMMEAN_CPU}
-            />
-            <CompareRow
-              comparison={resultsCPU.comparison}
-              compareWith={data.compareWith}
-            />
-          </tbody>
+      <thead>
+        <tr>
+          <th className="benchname">
+            <button
+              className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
+              onClick={handleSortByName}
+            >
+              Name
+            </button>
+            <br />
+            Duration for...
+          </th>
+          {data.frameworks.map((f, idx) => (
+            <th key={idx}>
+              {f.frameworkHomeURL ? (
+                <a target="_blank" rel="noreferrer" href={f.frameworkHomeURL}>
+                  {f.displayname}
+                </a>
+              ) : (
+                f.displayname
+              )}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <thead>
+        <tr>
+          <th>Implementation notes</th>
+          {data.frameworks.map((f) => (
+            <th key={f.name}>
+              {f.issues &&
+                f.issues.map((i) => (
+                  <React.Fragment key={i.toFixed()}>
+                    <a href={"#" + i.toFixed()}>{i.toFixed()}</a>
+                    <span> </span>
+                  </React.Fragment>
+                ))}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <thead>
+        <tr>
+          <th>Implementation link</th>
+          {data.frameworks.map((f) => (
+            <th key={f.name}>
+              <a
+                target="_blank"
+                rel="noreferrer"
+                href={"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/" + f.dir}
+              >
+                code
+              </a>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {resultsCPU.results.map((resultsForBenchmark, benchIdx) => (
+          <ValueResultRow
+            key={resultsCPU.benchmarks[benchIdx]?.id}
+            benchIdx={benchIdx}
+            resultsForBenchmark={resultsForBenchmark}
+            benchmarks={resultsCPU.benchmarks}
+            currentSortKey={currentSortKey}
+            sortBy={sortBy}
+          />
+        ))}
+        <GeomMeanRow
+          weighted={true}
+          currentSortKey={currentSortKey}
+          sortBy={sortBy}
+          geomMean={resultsCPU.geomMean}
+          sortbyGeommeanEnum={SORT_BY_GEOMMEAN_CPU}
+        />
+        <CompareRow comparison={resultsCPU.comparison} compareWith={data.compareWith} />
+      </tbody>
     </>
   );
 };
diff --git a/webdriver-ts-results/src/components/tables/GeomMeanRow.tsx b/webdriver-ts-results/src/components/tables/GeomMeanRow.tsx
index f9508733f..b7e0e685b 100644
--- a/webdriver-ts-results/src/components/tables/GeomMeanRow.tsx
+++ b/webdriver-ts-results/src/components/tables/GeomMeanRow.tsx
@@ -9,13 +9,7 @@ interface Props {
   sortbyGeommeanEnum: T_SORT_BY_GEOMMEAN;
 }
 
-const GeomMeanRow = ({
-  weighted,
-  geomMean,
-  currentSortKey,
-  sortBy,
-  sortbyGeommeanEnum,
-}: Props) => {
+const GeomMeanRow = ({ weighted, geomMean, currentSortKey, sortBy, sortbyGeommeanEnum }: Props) => {
   const handleSort = (sortValue: string) => (event: React.SyntheticEvent) => {
     event.preventDefault();
     sortBy(sortValue);
@@ -25,12 +19,10 @@ const GeomMeanRow = ({
     <tr>
       <th>
         <button
-          className={`button button__text ${
-            currentSortKey === sortbyGeommeanEnum ? "sort-key" : ""
-          }`}
+          className={`button button__text ${currentSortKey === sortbyGeommeanEnum ? "sort-key" : ""}`}
           onClick={handleSort(sortbyGeommeanEnum)}
         >
-          {weighted ? 'weighted ' : ''} geometric mean
+          {weighted ? "weighted " : ""} geometric mean
         </button>
         of all factors in the table
       </th>
@@ -38,13 +30,10 @@ const GeomMeanRow = ({
         result == null ? (
           <th key={idx}></th>
         ) : (
-          <th
-            key={result.key}
-            style={{ backgroundColor: result.bgColor, color: result.textColor }}
-          >
+          <th key={result.key} style={{ backgroundColor: result.bgColor, color: result.textColor }}>
             {result.mean.toFixed(2)}
           </th>
-        ),
+        )
       )}
     </tr>
   );
diff --git a/webdriver-ts-results/src/components/tables/MemResultsTable.tsx b/webdriver-ts-results/src/components/tables/MemResultsTable.tsx
index ea2f4c001..34d6441bb 100644
--- a/webdriver-ts-results/src/components/tables/MemResultsTable.tsx
+++ b/webdriver-ts-results/src/components/tables/MemResultsTable.tsx
@@ -29,7 +29,10 @@ const MemResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
       <thead>
         <tr>
           <th className="benchname">
-            <button className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`} onClick={handleSortByName}>
+            <button
+              className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
+              onClick={handleSortByName}
+            >
               Name
             </button>
           </th>
@@ -49,7 +52,13 @@ const MemResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
             sortBy={sortBy}
           />
         ))}
-        <GeomMeanRow weighted={false} currentSortKey={currentSortKey} sortBy={sortBy} geomMean={resultsMEM.geomMean} sortbyGeommeanEnum={SORT_BY_GEOMMEAN_MEM} />
+        <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/SizeResultsTable.tsx b/webdriver-ts-results/src/components/tables/SizeResultsTable.tsx
index cfafb42b0..1cb853eeb 100644
--- a/webdriver-ts-results/src/components/tables/SizeResultsTable.tsx
+++ b/webdriver-ts-results/src/components/tables/SizeResultsTable.tsx
@@ -29,7 +29,10 @@ const SizeResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
       <thead>
         <tr>
           <th className="benchname">
-            <button className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`} onClick={handleSortByName}>
+            <button
+              className={`button button__text ${currentSortKey === SORT_BY_NAME ? "sort-key" : ""}`}
+              onClick={handleSortByName}
+            >
               Name
             </button>
           </th>
@@ -49,7 +52,13 @@ const SizeResultsTable = ({ data, currentSortKey, sortBy }: Props) => {
             sortBy={sortBy}
           />
         ))}
-        <GeomMeanRow weighted={false} currentSortKey={currentSortKey} sortBy={sortBy} geomMean={resultsSize.geomMean} sortbyGeommeanEnum={SORT_BY_GEOMMEAN_SIZE} />
+        <GeomMeanRow
+          weighted={false}
+          currentSortKey={currentSortKey}
+          sortBy={sortBy}
+          geomMean={resultsSize.geomMean}
+          sortbyGeommeanEnum={SORT_BY_GEOMMEAN_SIZE}
+        />
       </tbody>
     </>
   );
diff --git a/webdriver-ts-results/src/components/tables/ValueResultRow.tsx b/webdriver-ts-results/src/components/tables/ValueResultRow.tsx
index 8d7db3151..6523dd994 100644
--- a/webdriver-ts-results/src/components/tables/ValueResultRow.tsx
+++ b/webdriver-ts-results/src/components/tables/ValueResultRow.tsx
@@ -10,13 +10,7 @@ interface Props {
   sortBy: (name: string) => void;
 }
 
-const ValueResultRow = ({
-  benchIdx,
-  resultsForBenchmark,
-  benchmarks,
-  currentSortKey,
-  sortBy,
-}: Props) => {
+const ValueResultRow = ({ benchIdx, resultsForBenchmark, benchmarks, currentSortKey, sortBy }: Props) => {
   const handleSort = (sortValue: string) => (event: React.SyntheticEvent) => {
     event.preventDefault();
     sortBy(sortValue);
@@ -26,9 +20,7 @@ const ValueResultRow = ({
     <tr>
       <th className="benchname">
         <button
-          className={`button button__text ${
-            currentSortKey === benchmarks[benchIdx].id ? "sort-key" : ""
-          }`}
+          className={`button button__text ${currentSortKey === benchmarks[benchIdx].id ? "sort-key" : ""}`}
           onClick={handleSort(benchmarks[benchIdx].id)}
         >
           {benchmarks[benchIdx].label}
@@ -37,11 +29,7 @@ const ValueResultRow = ({
       </th>
       {resultsForBenchmark &&
         resultsForBenchmark.map((result, idx) =>
-          result == null ? (
-            <td key={idx}></td>
-          ) : (
-            <ValueCell {...result} key={result.key} />
-          ),
+          result == null ? <td key={idx}></td> : <ValueCell {...result} key={result.key} />
         )}
     </tr>
   );

From 72eb138c0847954abbc1cc5bf76d9e7bf5394d89 Mon Sep 17 00:00:00 2001
From: Daniil Zhuravlev <nakrovati@outlook.com>
Date: Thu, 7 Mar 2024 01:55:24 +0400
Subject: [PATCH 3/5] fix: eslint errors

---
 eslint.config.js                                    |  2 +-
 webdriver-ts-results/src/Common.ts                  | 13 ++++++++-----
 .../src/components/ResultTable/ResultTable.tsx      | 10 +++++-----
 webdriver-ts-results/src/index.tsx                  |  2 +-
 webdriver-ts-results/src/reducer.ts                 |  4 ++--
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/eslint.config.js b/eslint.config.js
index 194c3230d..c2c62beac 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -26,7 +26,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",
+      "unicorn/no-array-reduce": "off",
       // maybe not:
       "unicorn/consistent-function-scoping": "off",
       "unicorn/no-array-for-each": "off",
diff --git a/webdriver-ts-results/src/Common.ts b/webdriver-ts-results/src/Common.ts
index d14627c2c..8ecab1eb5 100644
--- a/webdriver-ts-results/src/Common.ts
+++ b/webdriver-ts-results/src/Common.ts
@@ -171,6 +171,7 @@ export class TableResultValueEntry {
     public bgColor: string,
     public textColor: string,
     public statisticResult: StatisticResult,
+    // eslint-disable-next-line unicorn/no-useless-undefined
     public statisticallySignificantFactor: string | number | undefined = undefined
   ) {}
 }
@@ -331,6 +332,7 @@ export class ResultTableData {
   sortBy(sortKey: string): void {
     const zipped = this.frameworks.map((f, frameworkIndex) => {
       let sortValue;
+      // eslint-disable-next-line unicorn/prefer-switch
       if (sortKey === SORT_BY_NAME) sortValue = f.name;
       else if (sortKey === SORT_BY_GEOMMEAN_CPU)
         sortValue = this.getResult(BenchmarkType.CPU).geomMean[frameworkIndex]!.mean || Number.POSITIVE_INFINITY;
@@ -358,7 +360,7 @@ export class ResultTableData {
         else if (sizeIdx > -1)
           sortValue =
             this.getResult(BenchmarkType.SIZE).results[sizeIdx][frameworkIndex]?.value ?? Number.POSITIVE_INFINITY;
-        else throw Error(`sortKey ${sortKey} not found`);
+        else throw new Error(`sortKey ${sortKey} not found`);
       }
       return {
         framework: f,
@@ -396,12 +398,12 @@ export class ResultTableData {
         0.5277091212292658, 0.5644449600965534, 0.5508359820582848, 0.4225836631419211,
       ];
     } else {
-      benchmarkWeights = new Array(benchmarks.length).fill(1);
+      benchmarkWeights = Array.from<number>({ length: benchmarks.length }).fill(1);
     }
 
     let gMean = 0.0;
     resultsForFramework.forEach((r, idx) => {
-      if (r !== null && !isNaN(r.factor)) {
+      if (r !== null && !Number.isNaN(r.factor)) {
         gMean += benchmarkWeights[idx] * Math.log(r.factor);
       }
     });
@@ -460,6 +462,7 @@ export class ResultTableData {
         return result.results[resultsKey].mean;
       }
     };
+
     const min = Math.max(
       benchmarkResults.reduce(
         (min, result) => (result === null ? min : Math.min(min, selectFn(result))),
@@ -504,8 +507,8 @@ export class ResultTableData {
 
       // X1,..,Xn: this Framework, Y1, ..., Ym: selected Framework
       // https://de.wikipedia.org/wiki/Zweistichproben-t-Test
-      let statisticalResult = undefined;
-      let statisticalCol = undefined;
+      let statisticalResult;
+      let statisticalCol;
       const compareWithMean = compareWithResultsValues.mean;
       const stdDev = resultValues.standardDeviation || 0;
       const compareWithResultsStdDev = compareWithResultsValues.standardDeviation || 0;
diff --git a/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx b/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
index d6b068959..996f2d7a3 100644
--- a/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
+++ b/webdriver-ts-results/src/components/ResultTable/ResultTable.tsx
@@ -37,10 +37,10 @@ const ResultTable = ({ type }: Props) => {
 
   if (
     !data ||
-    !data.frameworks.length ||
-    (!data.getResult(BenchmarkType.CPU).benchmarks.length &&
-      !data.getResult(BenchmarkType.STARTUP).benchmarks.length &&
-      !data.getResult(BenchmarkType.MEM).benchmarks.length)
+    data.frameworks.length === 0 ||
+    (data.getResult(BenchmarkType.CPU).benchmarks.length === 0 &&
+      data.getResult(BenchmarkType.STARTUP).benchmarks.length === 0 &&
+      data.getResult(BenchmarkType.MEM).benchmarks.length === 0)
   ) {
     return null;
   }
@@ -66,7 +66,7 @@ const ResultTable = ({ type }: Props) => {
           </h3>
         )}
         {displayMode === DisplayMode.BoxPlot ? (
-          benchmarks.length && (
+          benchmarks.length > 0 && (
             <React.Suspense fallback={<div>Loading...</div>}>
               <BoxPlotTable
                 results={data.results}
diff --git a/webdriver-ts-results/src/index.tsx b/webdriver-ts-results/src/index.tsx
index fd245f361..59419d20c 100644
--- a/webdriver-ts-results/src/index.tsx
+++ b/webdriver-ts-results/src/index.tsx
@@ -5,7 +5,7 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import "./assets/styles/global.css";
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.querySelector("#root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
diff --git a/webdriver-ts-results/src/reducer.ts b/webdriver-ts-results/src/reducer.ts
index 89184b469..4ea451d89 100644
--- a/webdriver-ts-results/src/reducer.ts
+++ b/webdriver-ts-results/src/reducer.ts
@@ -35,8 +35,8 @@ const results: Result[] = rawResults.map((result) => {
 });
 
 const removeKeyedSuffix = (value: string) => {
-  if (value.endsWith("-non-keyed")) return value.substring(0, value.length - 10);
-  else if (value.endsWith("-keyed")) return value.substring(0, value.length - 6);
+  if (value.endsWith("-non-keyed")) return value.slice(0, -10);
+  else if (value.endsWith("-keyed")) return value.slice(0, -6);
   return value;
 };
 

From 8fd0c4e6f00386828997e631f0497c445db06ce3 Mon Sep 17 00:00:00 2001
From: Daniil Zhuravlev <nakrovati@outlook.com>
Date: Thu, 7 Mar 2024 02:13:28 +0400
Subject: [PATCH 4/5] chore: remove plotly types

---
 webdriver-ts-results/src/types/plotly.d.ts | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 webdriver-ts-results/src/types/plotly.d.ts

diff --git a/webdriver-ts-results/src/types/plotly.d.ts b/webdriver-ts-results/src/types/plotly.d.ts
deleted file mode 100644
index f8ee46291..000000000
--- a/webdriver-ts-results/src/types/plotly.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare module "plotly.js-cartesian-dist" {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const Plotly: any;
-  export = Plotly;
-}

From 472f3e0a1e13489485d06a04e48130532d4f3d56 Mon Sep 17 00:00:00 2001
From: Daniil Zhuravlev <nakrovati@outlook.com>
Date: Thu, 7 Mar 2024 14:14:12 +0400
Subject: [PATCH 5/5] perf(web): disable animation and add types for axes for
 the diagram

---
 .../src/components/BoxPlotTable/BoxPlotTableChart.tsx          | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
index 148442fe5..2679bcc5e 100644
--- a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
+++ b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx
@@ -49,13 +49,16 @@ const BoxPlotTableChart = ({ traces }: Props) => {
         ],
       },
       options: {
+        animation: false,
         scales: {
           x: {
+            type: "category",
             grid: {
               display: false,
             },
           },
           y: {
+            type: "linear",
             beginAtZero: false,
           },
         },