Merge branch 'nakrovati-refactor-web'

eslint.config.js

@@ -3,6 +3,7 @@ import js from "@eslint/js";
 import ts from "@typescript-eslint/eslint-plugin";
 import tsParser from "@typescript-eslint/parser";
 import react from "eslint-plugin-react";
+import reactRefresh from "eslint-plugin-react-refresh";
 import reactHooks from "eslint-plugin-react-hooks";
 import unicorn from "eslint-plugin-unicorn";
 
@@ -84,11 +85,16 @@ export default [
     files: ["webdriver-ts-results/**/*.tsx"],
     plugins: {
       react,
+      "react-refresh": reactRefresh,
       "react-hooks": reactHooks,
     },
     rules: {
       ...react.configs.recommended.rules,
+      ...react.configs["jsx-runtime"].rules,
       ...reactHooks.configs.recommended.rules,
+
+      "react/jsx-no-useless-fragment": "warn",
+      "react-refresh/only-export-components": "warn",
     },
     settings: { react: { version: "detect" } },
     languageOptions: { globals: { ...globals.browser } },
@@ -98,7 +104,7 @@ export default [
     languageOptions: { globals: { ...globals.browser, ...globals.node } },
     rules: {
       "@typescript-eslint/no-loss-of-precision": "off",
-      "no-debugger":"off"
+      "no-debugger": "off",
     },
   },
 ];

package.json

@@ -47,7 +47,6 @@
     "commander": "^11.1.0",
     "cross-env": "^7.0.3",
     "es-main": "^1.3.0",
-    "eslint-plugin-unicorn": "^49.0.0",
     "json5": "^2.2.3",
     "rimraf": "^5.0.5",
     "yargs": "^17.7.2"
@@ -59,6 +58,8 @@
     "eslint": "^8.52.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-unicorn": "^49.0.0",
     "globals": "^13.23.0",
     "local-web-server": "^5.3.0",
     "prettier": "^3.0.3"

webdriver-ts-results/package.json

@@ -13,7 +13,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "build:prod": "tsc && SINGLEFILE=true vite build && mv dist/index.html table.html",
     "lint": "eslint src/",
     "preview": "vite preview"
   },
@@ -24,7 +23,6 @@
     "@vitejs/plugin-react": "^4.2.0",
     "typescript": "^5.2.2",
     "vite": "^5.0.2",
-    "vite-plugin-singlefile": "^0.13.5",
     "vite-tsconfig-paths": "^4.2.1"
   }
 }

webdriver-ts-results/src/App.css

@@ -25,32 +25,6 @@ select {
   font-size: 14px;
 }
 
-.select-bar {
-  background-color: #fafafa;
-  border-top: 1px solid var(--border-color);
-  border-bottom: 1px solid var(--border-color);
-  padding: 10px 0;
-  line-height: 0;
-}
-.select-bar__dropdowns {
-  padding: 5px 0;
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-}
-
-@media screen and (width>=640px) {
-  .select-bar {
-    flex-direction: unset;
-    align-items: center;
-  }
-}
-@media screen and (width>=768px) {
-  .select-bar {
-    align-items: center;
-  }
-}
-
 select {
   border: 1px solid var(--border-color);
   border-radius: 4px;
@@ -62,10 +36,6 @@ input + label {
   margin-left: 5px;
 }
 
-.panel-body .checkbox {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
 thead.dummy th {
   padding: 0;
   border: 0;

webdriver-ts-results/src/App.tsx

@@ -1,26 +1,23 @@
-import React from "react";
 import "./App.css";
 import { FrameworkType, knownIssues } from "./Common";
 import ResultTable from "./components/ResultTable";
-import { SelectionBar } from "./components/selection/SelectionBar";
+import SelectionBar from "./components/selection/SelectionBar";
 
 const KnownIssuesList = () => {
   return (
-    <>
-      <section>
-        <h3>Known issues and notes</h3>
-        {knownIssues.map((issue) => (
-          <dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
-            <dt>
-              <a target="_blank" rel="noopener noreferrer" href={issue.link}>
-                {issue.issue.toFixed()}
-              </a>
-            </dt>
-            <dd>{issue.text}</dd>
-          </dl>
-        ))}
-      </section>
-    </>
+    <section>
+      <h3>Known issues and notes</h3>
+      {knownIssues.map((issue) => (
+        <dl key={issue.issue.toFixed()} id={issue.issue.toFixed()}>
+          <dt>
+            <a target="_blank" rel="noopener noreferrer" href={issue.link}>
+              {issue.issue.toFixed()}
+            </a>
+          </dt>
+          <dd>{issue.text}</dd>
+        </dl>
+      ))}
+    </section>
   );
 };
 

webdriver-ts-results/src/Common.ts

@@ -504,7 +504,7 @@ export class ResultTableData {
   }
   computeComparison(
     framework: Framework,
-    benchmarksCPU: Array<Benchmark>, // Remove cause unused
+    _benchmarksCPU: Array<Benchmark>, // Remove cause unused
     resultsCPUForFramework: Array<TableResultValueEntry | null>,
   ): TableResultComparisonEntry {
     if (!this.compareWith) {

webdriver-ts-results/src/assets/icons/CopyIcon.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const CopyIcon = () => {
   return (
     <>

webdriver-ts-results/src/assets/icons/PasteIcon.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 const PasteIcon = () => {
   return (
     <>

webdriver-ts-results/src/assets/icons/index.ts

@@ -0,0 +1,4 @@
+import CopyIcon from "./CopyIcon.tsx";
+import PasteIcon from "./PasteIcon.tsx";
+
+export { CopyIcon, PasteIcon };

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableChart.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from "react";
+import { useRef, useEffect } from "react";
 import Plotly from "plotly.js-cartesian-dist";
 
 interface BoxPlotData {

webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Benchmark, Framework, ResultLookup, CpuDurationMode } from "@/Common";
 import BoxPlotTableRow from "./BoxPlotTableRow";
 

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

@@ -62,20 +62,18 @@ const ResultTable = ({ type }: Props) => {
           </h3>
         )}
         {displayMode === DisplayMode.BoxPlot ? (
-          <>
-            {benchmarks.length && (
-              <React.Suspense fallback={<div>Loading...</div>}>
-                <BoxPlotTable
-                  results={data.results}
-                  frameworks={data.frameworks}
-                  benchmarks={data.getResult(BenchmarkType.CPU).benchmarks}
-                  currentSortKey={currentSortKey}
-                  sortBy={sortBy}
-                  cpuDurationMode={cpuDurationMode}
-                />
-              </React.Suspense>
-            )}
-          </>
+          benchmarks.length && (
+            <React.Suspense fallback={<div>Loading...</div>}>
+              <BoxPlotTable
+                results={data.results}
+                frameworks={data.frameworks}
+                benchmarks={data.getResult(BenchmarkType.CPU).benchmarks}
+                currentSortKey={currentSortKey}
+                sortBy={sortBy}
+                cpuDurationMode={cpuDurationMode}
+              />
+            </React.Suspense>
+          )
         ) : (
           <div className="results">
             <div className="results__table-container">

webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorCategory.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BenchmarkType } from "@/Common";
 import { useRootStore } from "@/reducer";
 import SelectorContentContainer from "@components/selection/SelectorContentContainer";

webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorList.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { Benchmark } from "@/Common";
 
 interface Props {

webdriver-ts-results/src/components/selection/BenchmarkSelector/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { BenchmarkType } from "@/Common";
 import Dropdown from "@components/ui/Dropdown";
 import BenchmarkSelectorCategory from "./BenchmarkSelectorCategory";