Merge PR #1906: Update Crank framework

Author: krausest

frameworks/keyed/crank/src/main.jsx

@@ -34,7 +34,6 @@ function Button({id, title}) {
   );
 }
 
-
 function Jumbotron() {
   this.addEventListener("click", (ev) => {
     if (ev.target.tagName === "BUTTON") {
@@ -175,15 +174,15 @@ function *Main() {
     this.refresh();
   });
 
-  while (true) {
+  for ({} of this) {
     yield (
       <div class="container">
         <Jumbotron />
         <table class="table table-hover table-striped test-data">
           <tbody>
             {data.map((item) => (
               <Row
-                crank-key={item.id}
+                key={item.id}
                 item={item}
                 selected={item.id === selected}
               />

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

@@ -39,7 +39,7 @@ const ResultTable = ({ type }: Props) => {
     !data ||
     data.frameworks.length === 0 ||
     (data.getResult(BenchmarkType.CPU).benchmarks.length === 0 &&
-      data.getResult(BenchmarkType.STARTUP).benchmarks.length === 0 &&
+      data.getResult(BenchmarkType.SIZE).benchmarks.length === 0 &&
       data.getResult(BenchmarkType.MEM).benchmarks.length === 0)
   ) {
     return null;

webdriver-ts-results/src/components/SelectionToolbar/BenchmarkSelector/BenchmarkSelector.tsx

@@ -6,7 +6,7 @@ import { useState, useEffect } from "react";
 const content = (
   <>
     <BenchmarkSelectorCategory benchmarkType={BenchmarkType.CPU} label="Duration" />
-    <BenchmarkSelectorCategory benchmarkType={BenchmarkType.STARTUP} label="Startup" />
+    <BenchmarkSelectorCategory benchmarkType={BenchmarkType.SIZE} label="Transferred size" />
     <BenchmarkSelectorCategory benchmarkType={BenchmarkType.MEM} label="Memory" />
   </>
 );

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

@@ -1,4 +1,4 @@
-import { BenchmarkType } from "@/Common";
+import { BenchmarkType, FrameworkType } from "@/Common";
 import { useRootStore } from "@/store";
 import SelectorContentContainer from "@/components/SelectionToolbar/SelectorContentContainer";
 import BenchmarkSelectorList from "./BenchmarkSelectorList";

webdriver-ts-results/src/components/SelectionToolbar/FrameworkSelector/FrameworkSelectorCategory.tsx

@@ -14,18 +14,22 @@ const FrameworkSelectorCategory = ({ label, frameworkType }: Props) => {
   const selectedFrameworks = useRootStore((state) => state.selectedFrameworks);
   const frameworks = useRootStore((state) => state.frameworkLists[frameworkType]);
   const isNoneSelected = useRootStore((state) => state.isNoneFrameworkSelected);
+  const isUnflaggedSelected = useRootStore((state) => state.isUnflaggedFrameworkSelected);
   const areAllSelected = useRootStore((state) => state.areAllFrameworksSelected);
 
   const selectFramework = useRootStore((state) => state.selectFramework);
   const selectAllFrameworks = useRootStore((state) => state.selectAllFrameworks);
+  const selectUnflaggedFrameworks = useRootStore((state) => state.selectUnflaggedFrameworks);
 
   return (
     <SelectorContentContainer
       grid
       isNoneSelected={isNoneSelected(frameworkType)}
+      isUnflaggedSelected={isUnflaggedSelected(frameworkType)}
       areAllSelected={areAllSelected(frameworkType)}
       selectNone={() => selectAllFrameworks(frameworkType, false)}
       selectAll={() => selectAllFrameworks(frameworkType, true)}
+      selectUnflagged={() => selectUnflaggedFrameworks(frameworkType)}
       label={label}
     >
       <FrameworkSelectorList

webdriver-ts-results/src/components/SelectionToolbar/SelectorContentContainer/SelectionContentContainer.tsx

@@ -5,8 +5,10 @@ import { Button, Flex } from "antd";
 interface Props {
   children: React.ReactElement;
   selectNone: (event: React.SyntheticEvent) => void;
+  selectUnflagged?: (event: React.SyntheticEvent) => void;
   selectAll: (event: React.SyntheticEvent) => void;
   isNoneSelected: boolean;
+  isUnflaggedSelected?: boolean;
   areAllSelected: boolean;
   grid?: boolean;
   label: string;
@@ -15,7 +17,9 @@ interface Props {
 const SelectorContentContainer = ({
   selectAll,
   selectNone,
+  selectUnflagged,
   isNoneSelected,
+  isUnflaggedSelected,
   areAllSelected,
   children,
   grid = false,
@@ -25,6 +29,10 @@ const SelectorContentContainer = ({
     !isNoneSelected && selectNone(event);
   };
 
+  const handleSelectUnflagged = (event: React.MouseEvent) => {
+    !isUnflaggedSelected && selectUnflagged && selectUnflagged(event);
+  };
+
   const handleSelectAll = (event: React.MouseEvent) => {
     !areAllSelected && selectAll(event);
   };
@@ -40,6 +48,10 @@ const SelectorContentContainer = ({
           <Button type="text" onClick={handleSelectAll} disabled={areAllSelected} aria-label="Select all">
             All
           </Button>
+          {selectUnflagged &&
+          (<Button type="text" onClick={handleSelectUnflagged} disabled={isUnflaggedSelected} aria-label="Select unflagged">
+            Unflagged
+          </Button>)}
         </div>
       </Flex>
       <div className={`selector-content-container__content ${grid ? "grid" : ""}`}>

webdriver-ts-results/src/results.ts

@@ -91,8 +91,10 @@ interface Actions {
   isNoneBenchmarkSelected: (type: BenchmarkType) => boolean;
   areAllFrameworksSelected: (type: FrameworkType) => boolean;
   isNoneFrameworkSelected: (type: FrameworkType) => boolean;
+  isUnflaggedFrameworkSelected: (type: FrameworkType) => boolean;
   selectFramework: (framework: Framework, add: boolean) => void;
   selectAllFrameworks: (frameworkType: FrameworkType, add: boolean) => void;
+  selectUnflaggedFrameworks: (frameworkType: FrameworkType) => void;
   selectCategory: (categoryId: number, add: boolean) => void;
   selectBenchmark: (benchmark: Benchmark, add: boolean) => void;
   selectAllBenchmarks: (benchmarkType: BenchmarkType, add: boolean) => void;
@@ -188,7 +190,7 @@ const preInitialState: State = {
   benchmarkLists: {
     [BenchmarkType.CPU]: rawBenchmarks.filter((b) => b.type === BenchmarkType.CPU),
     [BenchmarkType.MEM]: rawBenchmarks.filter((b) => b.type === BenchmarkType.MEM),
-    [BenchmarkType.STARTUP]: rawBenchmarks.filter((b) => b.type === BenchmarkType.STARTUP),
+    [BenchmarkType.SIZE]: rawBenchmarks.filter((b) => b.type === BenchmarkType.SIZE),
   },
   frameworks: mappedFrameworks,
   frameworkLists: {
@@ -232,6 +234,9 @@ export const useRootStore = create<State & Actions>((set, get) => ({
   isNoneFrameworkSelected: (type) => {
     return get().frameworkLists[type].every((framework) => !get().selectedFrameworks.has(framework));
   },
+  isUnflaggedFrameworkSelected: (type) => {
+    return get().frameworkLists[type].every((framework) => framework.issues.length ? !get().selectedFrameworks.has(framework) : get().selectedFrameworks.has(framework));
+  },
   // Actions
   selectFramework: (framework: Framework, add: boolean) => {
     const newSelectedFramework = new Set(get().selectedFrameworks);
@@ -241,6 +246,23 @@ export const useRootStore = create<State & Actions>((set, get) => ({
     const t = { ...get(), selectedFrameworks: newSelectedFramework };
     return set(() => ({ ...t, resultTables: updateResultTable(t) }));
   },
+  selectUnflaggedFrameworks: (frameworkType: FrameworkType) => {
+    const newSelectedFramework = new Set(get().selectedFrameworks);
+    const frameworks =
+      frameworkType === FrameworkType.KEYED
+        ? get().frameworkLists[FrameworkType.KEYED]
+        : get().frameworkLists[FrameworkType.NON_KEYED];
+
+    for (const framework of frameworks) {
+      framework.issues.length ? newSelectedFramework.delete(framework) : newSelectedFramework.add(framework);
+    }
+
+    const t = { ...get(), selectedFrameworks: newSelectedFramework };
+    return set(() => ({
+      ...t,
+      resultTables: updateResultTable(t),
+    }));
+  },
   selectAllFrameworks: (frameworkType: FrameworkType, add: boolean) => {
     const newSelectedFramework = new Set(get().selectedFrameworks);
     const frameworks =