fix boxplot

webdriver-ts-results/.eslintignore

@@ -1,2 +1,3 @@
 webpack.config.js
-.eslintrc.js
+.eslintrc.js
+src/results.ts

webdriver-ts-results/src/Common.ts

@@ -349,7 +349,7 @@ export class ResultTableData {
 
     computeFactors(benchmark: Benchmark): Array<TableResultValueEntry|null> {
 
-        let resultsKey = benchmark.type == BenchmarkType.CPU ? this.cpuDurationMode : DEFAULT_RESULTS_KEY;
+        const resultsKey = benchmark.type == BenchmarkType.CPU ? this.cpuDurationMode : DEFAULT_RESULTS_KEY;
 
         const benchmarkResults = this.frameworksForFactors.map(f => this.results(benchmark, f));
         const selectFn = (result: Result|null) => {

webdriver-ts-results/src/reducer.ts

@@ -10,10 +10,10 @@ const benchmarks = benchmark_orig.filter(b => b.id !== '32_startup-bt'
 const jStat = require('jstat').jStat;
 
 const results: Result[] = (rawResults as RawResult[]).map(res => {
-  let values: {[k: string]: ResultValues} = {};
-  for (let key of Object.keys(res.v)) {
-    let r = res.v[key];
-    let vals = {
+  const values: {[k: string]: ResultValues} = {};
+  for (const key of Object.keys(res.v)) {
+    const r = res.v[key];
+    const vals = {
       mean: r ? jStat.mean(r) : Number.NaN,
       median: r ? jStat.median(r) : Number.NaN,
       standardDeviation: r ? jStat.stdev(r, true) : Number.NaN,
@@ -133,7 +133,7 @@ function extractState(state: any): Partial<State> {
   }
   if (state.categories!==undefined) {
     const newSelectedCategories = new Set<number>();
-    for (const f of state?.categories) {
+    for (const f of state?.categories ?? []) {
       for (const sc of categories) {
         if (f === sc.id) newSelectedCategories.add(sc.id);
       }

webdriver-ts-results/src/tables/BoxPlotTable.tsx

@@ -37,7 +37,7 @@ const BoxPlot = ({traces}: {traces: Array<BoxPlotData>}): JSX.Element =>
 }
 
 const RenderBoxPlotsRow = ({frameworks, benchmark, results, currentSortKey, sortBy, cpuDurationMode}: {frameworks: Array<Framework>; benchmark: Benchmark; results: ResultLookup; currentSortKey: string; sortBy: (name: string) => void, cpuDurationMode: CpuDurationMode}) => {
-  let resultsValues = (framework: Framework) => results(benchmark, framework)?.results[cpuDurationMode] ?? [];
+  const resultsValues = (framework: Framework) => results(benchmark, framework)?.results[cpuDurationMode].values ?? [];
   return <tr key={benchmark.id} style={{height: 400}}>
       <th className='benchname'><button className={currentSortKey===benchmark.id ? 'sortKey textButton' : 'textButton'}
       onClick={(event) => {event.preventDefault(); sortBy(benchmark.id)}}>{benchmark.label}</button>
@@ -51,7 +51,7 @@ const RenderBoxPlotsRow = ({frameworks, benchmark, results, currentSortKey, sort
 
 const RenderBoxPlotsRows = ({frameworks, benchmarks, results, currentSortKey, sortBy, cpuDurationMode}: {frameworks: Array<Framework>; benchmarks: Array<Benchmark>; results: ResultLookup; currentSortKey: string; sortBy: (name: string) => void, cpuDurationMode: CpuDurationMode}) => {
   return <>{benchmarks.map((benchmark) =>
-      <RenderBoxPlotsRow frameworks={frameworks} benchmark={benchmark} results={results} currentSortKey={currentSortKey} sortBy={sortBy} cpuDurationMode={cpuDurationMode}/>
+      <RenderBoxPlotsRow key={benchmark.id} frameworks={frameworks} benchmark={benchmark} results={results} currentSortKey={currentSortKey} sortBy={sortBy} cpuDurationMode={cpuDurationMode}/>
   )}</>
 }
 // {data.frameworks.map(f => <th key={f.name}>{f.name}</th>)}

webdriver-ts-results/src/tables/CompareRow.tsx

@@ -9,7 +9,7 @@ const CompareRow = ({comparison, compareWith}: {comparison: Array<TableResultCom
     if (!compareWith) {
         return (<tr>
         <th>compare: Green means significantly faster, red significantly slower</th>
-        {comparison.map(result => result == null ? <th></th> : 
+        {comparison.map((result,idx) => result == null ? <th key={idx}></th> : 
             <th key={result.key} style={{backgroundColor:result.bgColor, color:result.textColor}}>
                 <button className={'sortKey textButton'} onClick={() => dispatch(compare(result.framework))}>compare</button>
             </th>    
@@ -19,7 +19,7 @@ const CompareRow = ({comparison, compareWith}: {comparison: Array<TableResultCom
         return (
             <tr>
         <th>compare: Green means significantly faster, red significantly slower</th>
-        {comparison.map(result => result == null ? <th></th> : 
+        {comparison.map((result,idx) => result == null ? <th key={idx}></th> : 
             <th key={result.key} style={{backgroundColor:result.bgColor, color:result.textColor}}>
                 {result.label}
                 {  (compareWith === result.framework) ? <button className={'sortKey textButton'} onClick={() => dispatch(stopCompare(result.framework))}>stop compare</button>

webdriver-ts-results/src/tables/CpuResultsTable.tsx

@@ -16,7 +16,7 @@ const CpuResultsTable = ({data, currentSortKey, sortBy}: {data: ResultTableData;
                 <tr>                  
                   <th className='benchname'><button className={currentSortKey===SORT_BY_NAME ? 'sortKey textButton' : 'textButton'} onClick={(event) => {event.preventDefault(); sortBy(SORT_BY_NAME)}}>Name</button><br/>Duration for...</th>
                   {data.frameworks.map((f,idx) => <th key={idx}>{
-                      f.frameworkHomeURL ? <a target="_blank" href={f.frameworkHomeURL}>{f.displayname}</a> : f.displayname
+                      f.frameworkHomeURL ? <a target="_blank" rel="noreferrer" href={f.frameworkHomeURL}>{f.displayname}</a> : f.displayname
                     }
                   </th>)}
                 </tr>
@@ -37,7 +37,7 @@ const CpuResultsTable = ({data, currentSortKey, sortBy}: {data: ResultTableData;
                     <th>Implementation link</th>
                     {data.frameworks.map(f => 
                       <th key={f.name} >
-                        <a target="_blank" href={"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/"+f.dir}>code</a>
+                        <a target="_blank" rel="noreferrer" href={"https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/"+f.dir}>code</a>
                       </th>)}
                 </tr>
               </thead>

webdriver-ts-results/src/tables/GeomMeanRow.tsx

@@ -10,7 +10,7 @@ const GeomMeanRow = ({geomMean, currentSortKey, sortBy, sortbyGeommeanEnum}: {ge
     return (
     <tr>
         <th><button className={currentSortKey === sortbyGeommeanEnum ? 'sortKey textButton' : 'textButton'} onClick={sort(sortbyGeommeanEnum)}>geometric mean</button>of all factors in the table</th>
-        {geomMean.map(result => result == null ? <th></th> : 
+        {geomMean.map((result,idx) => result == null ? <th key={idx}></th> : 
             <th key={result.key} style={{backgroundColor:result.bgColor, color:result.textColor}}>{result.mean.toFixed(2)}
             </th>    
         )}

webdriver-ts-results/src/tables/ValueResultRow.tsx

@@ -19,7 +19,7 @@ const ValueResultRow = ({benchIdx, resultsForBenchmark, benchmarks, currentSortK
           <div className="rowCount">{benchmarks[benchIdx].description}</div>
         </th>
         {resultsForBenchmark && resultsForBenchmark.map((result,idx) => result == null ? <td key={idx}></td> : 
-            <ValueCell {...result}/>)}
+            <ValueCell {...result} key={result.key}/>)}
     </tr>
 };