Merge branch 'renderDuration'

Author: krausest

eslint.config.js

@@ -74,6 +74,7 @@ export default [
       "@typescript-eslint/no-explicit-any": "off",
       "require-await": "error",
       "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-unused-vars": "off",
     },
   },
   /**
@@ -97,6 +98,7 @@ export default [
     languageOptions: { globals: { ...globals.browser, ...globals.node } },
     rules: {
       "@typescript-eslint/no-loss-of-precision": "off",
+      "no-debugger":"off"
     },
   },
 ];

webdriver-ts-results/src/App.css

@@ -29,12 +29,11 @@ select {
   background-color: #fafafa;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
-  padding: 20px 0;
-  flex-direction: column;
-  display: flex;
-  gap: 10px;
+  padding: 10px 0;
+  line-height: 0;
 }
 .select-bar__dropdowns {
+  padding: 5px 0;
   display: flex;
   flex-direction: row;
   gap: 1rem;

webdriver-ts-results/src/App.tsx

@@ -62,7 +62,7 @@ const App = () => {
       </p>
 
       <main>
-        <SelectionBar showDurationSelection={false} />
+        <SelectionBar showDurationSelection={true} />
         <ResultTable type={FrameworkType.KEYED} />
         <ResultTable type={FrameworkType.NON_KEYED} />
         <KnownIssuesList></KnownIssuesList>

webdriver-ts-results/src/Common.ts

@@ -13,6 +13,8 @@ export enum DisplayMode {
 export enum CpuDurationMode {
   Total = "total",
   Script = "script",
+  Render = "paint",
+  BrowserOnly = "browser only",
 }
 
 export enum FrameworkType {

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

@@ -52,7 +52,19 @@ const ResultTable = ({ type }: Props) => {
         <p>{texts[type].description}</p>
 
         {cpuDurationMode === CpuDurationMode.Script && (
-          <h3>Warning: This is an experimental view. Don&apos;t rely on those values yet.</h3>
+          <h3>Warning: This is an experimental view that includes script duration only. Don&apos;t rely on those values yet and don&apos;t report them until they are official.
+            Report bugs in issue <a href="https://github.com/krausest/js-framework-benchmark/issues/1233">1233</a>.
+          </h3>
+        )}
+        {cpuDurationMode === CpuDurationMode.BrowserOnly && (
+          <h3>Warning: This is an experimental view that shows the difference between total duration and script duration. Don&apos;t rely on those values yet and don&apos;t report them until they are official.
+            I guess this view mode just makes no sense.
+          </h3>
+        )}
+        {cpuDurationMode === CpuDurationMode.Render && (
+          <h3>Warning: This is an experimental view that shows the difference between total duration and script duration. Don&apos;t rely on those values yet and don&apos;t report them until they are official.
+            Report bugs in issue <a href="https://github.com/krausest/js-framework-benchmark/issues/1233">1233</a>.
+          </h3>
         )}
         {displayMode === DisplayMode.BoxPlot ? (
           <>

webdriver-ts-results/src/components/selection/ModeSelectionPanel/DurationModeSelector.tsx

@@ -22,6 +22,8 @@ const DurationModeSelector = ({ cpuDurationMode, onChange }: Props) => {
         >
           <option value={CpuDurationMode.Total}>total duration</option>
           <option value={CpuDurationMode.Script}>only JS duration</option>
+          <option value={CpuDurationMode.Render}>only render duration</option>
+          <option value={CpuDurationMode.BrowserOnly}>Browser only duration</option>
         </select>
       </div>
     </>

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

@@ -26,13 +26,13 @@ const ModeSelecionPanel = ({ showDurationSelection }: Props) => {
           onChange={(value) => selectDisplayMode(value)}
         />
 
+    </div>
         {showDurationSelection ? (
           <DurationModeSelector
             cpuDurationMode={cpuDurationMode}
             onChange={(value) => selectCpuDurationMode(value)}
           />
         ) : null}
-      </div>
     </>
   );
 };

webdriver-ts-results/src/components/selection/SelectionBar.tsx

@@ -12,13 +12,17 @@ export const SelectionBar = ({ showDurationSelection }: Props) => {
   console.log("SelectionBar");
 
   return (
-    <div className="select-bar">
-      <div className="select-bar__dropdowns">
-        <FrameworkSelector />
-        <BenchmarkSelector />
+    <>
+      <div className="select-bar">
+        <div className="select-bar__dropdowns">
+          <FrameworkSelector />
+          <BenchmarkSelector />
+          <CopyPasteSelection />
+        </div>
+        <div className="select-bar__dropdowns">
+          <ModeSelecionPanel showDurationSelection={showDurationSelection} />
+        </div>
       </div>
-      <ModeSelecionPanel showDurationSelection={showDurationSelection} />
-      <CopyPasteSelection />
-    </div>
+    </>
   );
 };

webdriver-ts-results/src/reducer.ts

@@ -20,14 +20,12 @@ import {
   knownIssues,
 } from "./Common";
 
-// OK
 const benchmarks = rawBenchmarks.filter(
   (benchmark) =>
     benchmark.id !== "32_startup-bt" &&
     benchmark.id !== "33_startup-mainthreadcost",
 );
 
-// OK
 const results: Result[] = rawResults.map((result) => {
   const values: { [k: string]: ResultValues } = {};
   for (const key of Object.keys(result.v)) {
@@ -40,10 +38,26 @@ const results: Result[] = rawResults.map((result) => {
     };
     values[key] = vals;
   }
+  if (result.v[CpuDurationMode.Total] && result.v[CpuDurationMode.Script] && result.v[CpuDurationMode.Render]) {
+    if (result.v[CpuDurationMode.Total].length !== result.v[CpuDurationMode.Script].length)
+      throw "Lengths must match";
+    let r = [];
+    for (let i = 0; i < result.v[CpuDurationMode.Total].length; i++) {
+      r.push(result.v[CpuDurationMode.Total][i] - result.v[CpuDurationMode.Script][i]);
+    }
+    const vals = {
+      mean: jStat.mean(r),
+      median: jStat.median(r),
+      standardDeviation: jStat.stdev(r, true),
+      values: r,
+    };
+    // if (result.f==='miso-v1.4.0-keyed' || result.f==='vanillajs-keyed') debugger;
+    values[CpuDurationMode.BrowserOnly] = vals;
+  }
+
   return { framework: result.f, benchmark: result.b, results: values };
 });
 
-// OK
 const removeKeyedSuffix = (value: string) => {
   if (value.endsWith("-non-keyed"))
     return value.substring(0, value.length - 10);
@@ -52,7 +66,6 @@ const removeKeyedSuffix = (value: string) => {
   return value;
 };
 
-// OK
 const mappedFrameworks = frameworks.map((f) => ({
   name: f.name,
   dir: f.dir,