Merge branch 'nakrovati-improve-design'

Author: krausest

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",

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"

webdriver-ts-results/package-lock.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"

webdriver-ts-results/package.json

@@ -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;

webdriver-ts-results/src/Common.ts

@@ -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}
                 >

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.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,57 @@ 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: {
+        animation: false,
+        scales: {
+          x: {
+            type: "category",
+            grid: {
+              display: false,
+            },
+          },
+          y: {
+            type: "linear",
+            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;

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.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)"
         >

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.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) => (

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.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;
@@ -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}