refactor(web-ts-results): minor updates

Format the prettier files.

Add some a11y.

Improve directory structure

Change the React import.

Change the `moduleResolution` property from `Node` to `bundler` in tsconfig.json.

Move the component props to the `Props` interfaces

Remove `react-scripts` types.

Remove unnecessary `JSX.Element` types.

Remove unnecessary `<div>` types in DropDown.

Author: nakrovati

webdriver-ts-results/src/App.tsx

@@ -1,10 +1,28 @@
-import * as React from "react";
+import React from "react";
 import "./App.css";
 import { FrameworkType, knownIssues } from "./Common";
-import ResultTable from "./ResultTable";
-import { SelectionBar } from "./selection/SelectionBar";
+import ResultTable from "./components/ResultTable";
+import { SelectionBar } from "./components/selection/SelectionBar";
 
-const App = (): JSX.Element => {
+const KnownIssuesList = () => {
+  return (
+    <>
+      <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>
+      ))}
+    </>
+  );
+};
+
+const App = () => {
   // eslint-disable-next-line no-constant-condition
   const disclaimer = false ? (
     <div>
@@ -29,29 +47,23 @@ const App = (): JSX.Element => {
     </p>
   );
 
+  const testEnvironmentInfo = (
+    <p>
+      The benchmark was run on a MacBook Pro 14 (32 GB RAM, 8/14 Cores, OSX 13.5
+      (c)), Chrome 116.0.5845.82 (arm64) using the puppeteer benchmark driver
+      with reduced tracing.
+    </p>
+  );
+
   return (
     <div>
       {disclaimer}
-      <p>
-        The benchmark was run on a MacBook Pro 14 (32 GB RAM, 8/14 Cores, OSX
-        13.5 (c)), Chrome 116.0.5845.82 (arm64)) using the puppeteer benchmark
-        driver with reduced tracing.
-      </p>
+      {testEnvironmentInfo}
+
       <SelectionBar showDurationSelection={false} />
       <ResultTable type={FrameworkType.KEYED} />
       <ResultTable type={FrameworkType.NON_KEYED} />
-
-      <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>
-      ))}
+      <KnownIssuesList></KnownIssuesList>
     </div>
   );
 };

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

@@ -0,0 +1,44 @@
+import React, { useRef, useEffect } from "react";
+import Plotly from "plotly.js-cartesian-dist";
+
+interface BoxPlotData {
+  framework: string;
+  values: number[];
+}
+
+interface Props {
+  traces: Array<BoxPlotData>;
+}
+
+const BoxPlotTableChart = ({ traces }: Props) => {
+  const elemRef = useRef(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,
+      },
+    };
+    Plotly.newPlot(elemRef.current, plotlTtraces, layout, {
+      staticPlot: true,
+      editable: false,
+    });
+  }, [traces]);
+  return <div ref={elemRef} style={{ height: "100%", width: "100%" }}></div>;
+};
+
+export default BoxPlotTableChart;

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

@@ -0,0 +1,63 @@
+import React from "react";
+import {
+  Benchmark,
+  Framework,
+  ResultLookup,
+  CpuDurationMode,
+} from "../../Common";
+import BoxPlotTableChart from "./BoxPlotTableChart";
+
+interface Props {
+  frameworks: Array<Framework>;
+  benchmark: Benchmark;
+  results: ResultLookup;
+  currentSortKey: string;
+  sortBy: (name: string) => void;
+  cpuDurationMode: CpuDurationMode;
+}
+
+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();
+    sortBy(benchmark.id);
+  };
+
+  const traces = frameworks.map((framework) => ({
+    framework: framework.name,
+    values: resultsValues(framework),
+  }));
+
+  return (
+    <tr key={benchmark.id} style={{ height: 400 }}>
+      <th className="benchname">
+        <button
+          className={
+            currentSortKey === benchmark.id
+              ? "sortKey textButton"
+              : "textButton"
+          }
+          onClick={handleSortByBenchmarkResults}
+          aria-label="Sort by benchmark results (from best to worst)"
+        >
+          {benchmark.label}
+        </button>
+        <div className="rowCount">{benchmark.description}</div>
+      </th>
+      <td>
+        <BoxPlotTableChart traces={traces} />
+      </td>
+    </tr>
+  );
+};
+
+export default BoxPlotTableRow;

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

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+  Benchmark,
+  Framework,
+  ResultLookup,
+  CpuDurationMode,
+} from "../../Common";
+import BoxPlotTableRow from "./BoxPlotTableRow";
+
+interface Props {
+  frameworks: Array<Framework>;
+  benchmarks: Array<Benchmark>;
+  results: ResultLookup;
+  currentSortKey: string;
+  sortBy: (name: string) => void;
+  cpuDurationMode: CpuDurationMode;
+}
+
+const BoxPlotTableRows = ({
+  frameworks,
+  benchmarks,
+  results,
+  currentSortKey,
+  sortBy,
+  cpuDurationMode,
+}: Props) => {
+  return (
+    <>
+      {benchmarks.map((benchmark) => (
+        <BoxPlotTableRow
+          key={benchmark.id}
+          frameworks={frameworks}
+          benchmark={benchmark}
+          results={results}
+          currentSortKey={currentSortKey}
+          sortBy={sortBy}
+          cpuDurationMode={cpuDurationMode}
+        />
+      ))}
+    </>
+  );
+};
+
+export default BoxPlotTableRows;

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

@@ -0,0 +1,70 @@
+import React from "react";
+import {
+  SORT_BY_NAME,
+  Benchmark,
+  Framework,
+  ResultLookup,
+  CpuDurationMode,
+} from "../../Common";
+import BoxPlotTableRows from "./BoxPlotTableRows";
+
+interface Props {
+  frameworks: Array<Framework>;
+  benchmarks: Array<Benchmark>;
+  results: ResultLookup;
+  currentSortKey: string;
+  sortBy: (name: string) => void;
+  cpuDurationMode: CpuDurationMode;
+}
+
+const BoxPlotTable = ({
+  frameworks,
+  benchmarks,
+  results,
+  currentSortKey,
+  sortBy,
+  cpuDurationMode,
+}: Props) => {
+  const handleSortByName = (event: React.MouseEvent) => {
+    event.preventDefault();
+    sortBy(SORT_BY_NAME);
+  };
+
+  return (
+    <div>
+      <h3>Duration in milliseconds</h3>
+      <table className="results">
+        <thead>
+          <tr>
+            <th className="benchname">
+              <button
+                className={
+                  currentSortKey === SORT_BY_NAME
+                    ? "sortKey textButton"
+                    : "textButton"
+                }
+                aria-label="Sort frameworks in ascending order (asc)"
+                onClick={handleSortByName}
+              >
+                Name
+              </button>
+            </th>
+            <th style={{ width: frameworks.length * 70 + 100 }}></th>
+          </tr>
+        </thead>
+        <tbody>
+          <BoxPlotTableRows
+            results={results}
+            frameworks={frameworks}
+            benchmarks={benchmarks}
+            currentSortKey={currentSortKey}
+            sortBy={sortBy}
+            cpuDurationMode={cpuDurationMode}
+          />
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default BoxPlotTable;

webdriver-ts-results/src/components/DropDown/DropDownContents.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+interface Props {
+  children: Array<JSX.Element>;
+  selectNone: (event: React.SyntheticEvent) => void;
+  selectAll: (event: React.SyntheticEvent) => void;
+  isNoneSelected: boolean;
+  areAllSelected: boolean;
+  grid?: boolean;
+}
+
+const DropDownContents = ({
+  selectAll,
+  selectNone,
+  isNoneSelected,
+  areAllSelected,
+  children,
+  grid = false,
+}: Props) => {
+  const handleSelectNone = (event: React.MouseEvent) => {
+    !isNoneSelected && selectNone(event);
+  };
+
+  const handleSelectAll = (event: React.MouseEvent) => {
+    !areAllSelected && selectAll(event);
+  };
+
+  return (
+    <div className="section">
+      {children[0]}
+      <div className="float-rt">
+        <button
+          className="textButton"
+          onClick={handleSelectNone}
+          disabled={isNoneSelected}
+          aria-label="Select none"
+        >
+          None
+        </button>
+        &nbsp;
+        <button
+          className="textButton"
+          onClick={handleSelectAll}
+          disabled={areAllSelected}
+          aria-label="Select all"
+        >
+          All
+        </button>
+      </div>
+      <div className={grid ? "grid" : ""}>{children[1]}</div>
+    </div>
+  );
+};
+
+export default DropDownContents;

webdriver-ts-results/src/selection/DropDown.tsx renamed to webdriver-ts-results/src/components/DropDown/index.tsx

@@ -6,7 +6,7 @@ interface Props {
   width: string;
 }
 
-const DropDown = ({ label, children, width }: Props): JSX.Element => {
+const DropDown = ({ label, children, width }: Props) => {
   const [open, setOpen] = useState(false);
   const toggle = useCallback(
     (event: React.SyntheticEvent<HTMLElement>) => {