measure memory via performance.measureUserAgentSpecificMemory()

push_results.sh

@@ -1,5 +1,5 @@
-/usr/bin/cp webdriver-ts-results/table.html ../krausest.github.io/js-framework-benchmark/current.html
-/usr/bin/cp webdriver-ts-results/BoxPlotTable*.js ../krausest.github.io/js-framework-benchmark/
+cp webdriver-ts-results/table.html ../krausest.github.io/js-framework-benchmark/current.html
+cp webdriver-ts-results/BoxPlotTable*.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

webdriver-ts-results/.eslintrc.json

@@ -19,6 +19,7 @@
   "rules": {
     "@typescript-eslint/explicit-function-return-type": 0,
     "react-hooks/rules-of-hooks": "error", 
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    "no-debugger": "warn"
   }
 }

webdriver-ts-results/src/App.css

@@ -31,9 +31,6 @@ select {
 .header-row {
     margin: 20px 0;
 }
-.dropdown-container {
-    display: inline-block;
-}
 .dropdown-container > .shutter, .dropdown-container > .dropdown-menu {
     display: none;
 }
@@ -200,6 +197,25 @@ dd {
     cursor: pointer;
 }
 
+.iconbutton {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 2px 2px;
+    outline: none;
+    box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 0%);    
+    width: 26px;
+}
+.iconbutton:active {
+    border: 1px solid #888;
+}
+.header-row {
+    display: flex;
+}
+.header-row > * {
+    align-self:center;
+}
+
+
 
 button:disabled.textButton {
     color: #666;

webdriver-ts-results/src/App.tsx

@@ -16,7 +16,7 @@ const App = () => {
       <div>
         {disclaimer}
         <p>The benchmark was run on a MaBook Air M1 (16 GB RAM, OSX 12.4), Chrome 103.0.5060.53 (arm64))
-            using the puppeteer benchmark driver with full tracing.
+            using the playwright benchmark driver with reduced tracing.
         </p>
          <SelectionBar/>
          <ResultTable type={FrameworkType.KEYED}/>

webdriver-ts-results/src/Common.ts

@@ -10,33 +10,35 @@ export enum FrameworkType { KEYED, NON_KEYED }
 
 export interface Framework {
     name: string;
+    dir: string;
     type: FrameworkType;
     issues: number[];
     displayname: string;
 }
 
-export enum Severity {Error, Categorization}
+export enum Severity {Note, Error}
 
 interface Category {
   id: number;
   text: string;
   issues: Array<number>;
+  severity: Severity;
 }
 
 export const categories: Category[] = [
-  {id:1, text:"[Note]: Manual DOM manipulations", issues: [772]},
-  {id:2, text:"[Note]:View state on the model", issues: [800]},
-  {id:3, text:"[Note]: Explicit requestAnimationFrame calls", issues: [796]},
-  {id:4, text:"[Note]: Manual event delegation", issues: [801]},
-  {id:5, text:"[Issue]: Errors in the implementation", issues: [634]},
+  {id:1, text:"[Note]: Manual DOM manipulations", issues: [772], severity: Severity.Note},
+  {id:2, text:"[Note]:View state on the model", issues: [800], severity: Severity.Note},
+  {id:3, text:"[Note]: Explicit requestAnimationFrame calls", issues: [796], severity: Severity.Note},
+  {id:4, text:"[Note]: Manual event delegation", issues: [801], severity: Severity.Note},
+  {id:5, text:"[Issue]: Errors in the implementation", issues: [634], severity: Severity.Error},
 ]
 
 export const knownIssues = [
     {issue: 634, severity: Severity.Error, text:"[Issue]: The HTML structure for the implementation is not fully correct.", link: "https://github.com/krausest/js-framework-benchmark/issues/634"},
-    {issue: 772, severity: Severity.Categorization, text:"[Note]: Implementation uses manual DOM manipulations", link: "https://github.com/krausest/js-framework-benchmark/issues/772"},
-    {issue: 796, severity: Severity.Categorization, text:"[Note]: Implementation uses explicit requestAnimationFrame calls", link: "https://github.com/krausest/js-framework-benchmark/issues/796"},
-    {issue: 800, severity: Severity.Categorization, text:"[Note]: View state on the model", link: "https://github.com/krausest/js-framework-benchmark/issues/800"},
-    {issue: 801, severity: Severity.Categorization, text:"[Note]: Implementation uses manual event delegation", link: "https://github.com/krausest/js-framework-benchmark/issues/801"},
+    {issue: 772, severity: Severity.Note, text:"[Note]: Implementation uses manual DOM manipulations", link: "https://github.com/krausest/js-framework-benchmark/issues/772"},
+    {issue: 796, severity: Severity.Note, text:"[Note]: Implementation uses explicit requestAnimationFrame calls", link: "https://github.com/krausest/js-framework-benchmark/issues/796"},
+    {issue: 800, severity: Severity.Note, text:"[Note]: View state on the model", link: "https://github.com/krausest/js-framework-benchmark/issues/800"},
+    {issue: 801, severity: Severity.Note, text:"[Note]: Implementation uses manual event delegation", link: "https://github.com/krausest/js-framework-benchmark/issues/801"},
   ];
 
 export function findIssue(issueNumber: number) {

webdriver-ts-results/src/reducer.ts

@@ -1,4 +1,4 @@
-import { Benchmark, BenchmarkType, convertToMap, DisplayMode, Framework, FrameworkType, RawResult, Result, ResultTableData, SORT_BY_GEOMMEAN_CPU, categories } from "./Common"
+import { Benchmark, BenchmarkType, convertToMap, DisplayMode, Framework, FrameworkType, RawResult, Result, ResultTableData, SORT_BY_GEOMMEAN_CPU, categories, Severity } from "./Common"
 import {benchmarks as benchmark_orig, frameworks, results as rawResults} from './results';
 
 // Temporarily disable script bootup time
@@ -18,7 +18,7 @@ const removeKeyedSuffix = (value: string) => {
     else if (value.endsWith('-keyed')) return value.substring(0,value.length-6)
     return value;
 }
-const mappedFrameworks = frameworks.map(f => ({name: f.name, displayname: removeKeyedSuffix(f.name), issues: f.issues ?? [], type:f.keyed ? FrameworkType.KEYED : FrameworkType.NON_KEYED}));
+const mappedFrameworks = frameworks.map(f => ({name: f.name, dir: f.dir, displayname: removeKeyedSuffix(f.name), issues: f.issues ?? [], type:f.keyed ? FrameworkType.KEYED : FrameworkType.NON_KEYED}));
 
 const allBenchmarks = benchmarks.reduce((set, b) => set.add(b), new Set<Benchmark>() );
 const allFrameworks = mappedFrameworks.reduce((set, f) => set.add(f), new Set<Framework>() );
@@ -84,7 +84,7 @@ const preInitialState: State = {
         [FrameworkType.KEYED]: undefined,
         [FrameworkType.NON_KEYED]: undefined
     },
-    categories: new Set([1,2,3,4])
+    categories: new Set(categories.filter(c => c.severity != Severity.Error).map(c => c.id))
 }
 
 function updateResultTable({frameworks, benchmarks, selectedFrameworksDropDown: selectedFrameworks, selectedBenchmarks, sortKey, displayMode, compareWith, categories}: State) {
@@ -147,14 +147,55 @@ interface SortAction { type: 'SORT'; data: {sortKey: string}}
 export const sort = (sortKey: string): SortAction => {
   return {type: 'SORT', data: {sortKey}}
 }
+
+interface SetStateFromClipboardAction { type: 'SET_STATE_FROM_CLIPBOARD'; data: any}
+export const setStateFromClipboard = (state: any): SetStateFromClipboardAction => {
+  return {type: 'SET_STATE_FROM_CLIPBOARD', data: {state}}
+}
+
 type Action = SelectFrameworkAction | SelectAllFrameworksAction | SelectBenchmarkAction | SelectAllBenchmarksAction 
   | SelectDisplayModeAction | CompareAction |StopCompareAction | SortAction
-  | SelectCategoryAction | SelectAllCategoriesAction;
+  | SelectCategoryAction | SelectAllCategoriesAction | SetStateFromClipboardAction;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const reducer = (state = initialState, action: Action): State => {
     console.log("reducer", action)
     switch (action.type) {
+        case 'SET_STATE_FROM_CLIPBOARD': {
+          let t = {...state};
+          debugger;
+          if (action.data.state?.benchmarks) {
+            const newSelectedBenchmarks = new Set<Benchmark>();
+            for (const b of action.data.state.benchmarks) {
+              for (const sb of benchmarks) {
+                if (b === sb.id) newSelectedBenchmarks.add(sb);
+              }
+            }
+            t = {...t, selectedBenchmarks: newSelectedBenchmarks};
+          }
+          if (action.data.state?.frameworks) {
+            const newSelectedFramework = new Set<Framework>();
+            for (const f of action.data.state.frameworks) {
+              for (const sf of mappedFrameworks) {
+                if (f === sf.dir) newSelectedFramework.add(sf);
+              }
+            }
+            t = {...t, selectedFrameworksDropDown: newSelectedFramework};
+          }
+          if (action.data.state?.displayMode) {
+            t = {...t, displayMode: action.data.state.displayMode};
+          }
+          if (action.data.state?.categories) {
+            const newSelectedCategories = new Set<number>();
+            for (const f of action.data.state?.categories) {
+              for (const sc of categories) {
+                if (f === sc.id) newSelectedCategories.add(sc.id);
+              }
+            }
+            t = {...t, categories: newSelectedCategories};
+          }
+          return {...t, resultTables: updateResultTable(t)}
+        }
         case 'SELECT_FRAMEWORK': {
             const newSelectedFramework = new Set(state.selectedFrameworksDropDown);
             if (action.data.add) newSelectedFramework.add(action.data.framework);