Skip to content

Commit e235a5f

Browse files
krausestkrausest
committed
update dependencies
1 parent 9bb29f5 commit e235a5f

File tree

9 files changed

+189
-175
lines changed

9 files changed

+189
-175
lines changed

‎webdriver-ts-results/package.json

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,32 @@
1919
"url": "https://github.com/krausest/js-framework-benchmark.git"
2020
},
2121
"devDependencies": {
22-
"@types/node": "8.0.53",
23-
"@types/react": "16.0.25",
24-
"@types/react-dom": "16.0.3",
25-
"babel-core": "6.26.0",
26-
"babel-loader": "7.1.2",
22+
"@types/node": "10.11.2",
23+
"@types/react": "16.4.14",
24+
"@types/react-dom": "16.0.8",
25+
"babel-core": "6.26.3",
26+
"babel-loader": "8.0.4",
2727
"babel-preset-es2015": "6.24.1",
2828
"babel-preset-react": "6.24.1",
29-
"bootstrap": "3.3.7",
29+
"bootstrap": "4.1.3",
3030
"cpx": "1.5.0",
31-
"cross-env": "5.0.0",
32-
"css-loader": "0.28.3",
33-
"file-loader": "1.1.5",
34-
"html-webpack-inline-source-plugin": "0.0.9",
35-
"html-webpack-plugin": "2.28.0",
31+
"cross-env": "5.2.0",
32+
"css-loader": "1.0.0",
33+
"file-loader": "2.0.0",
34+
"html-webpack-inline-source-plugin": "0.0.10",
35+
"html-webpack-plugin": "3.2.0",
3636
"jsx-loader": "0.13.2",
37-
"style-loader": "0.19.0",
38-
"ts-loader": "3.1.1",
39-
"typescript": "2.6.1",
40-
"url-loader": "0.6.2",
41-
"webpack": "3.8.1"
37+
"style-loader": "0.23.0",
38+
"ts-loader": "5.2.1",
39+
"typescript": "3.1.1",
40+
"url-loader": "1.1.1",
41+
"webpack": "4.20.2",
42+
"webpack-cli": "^3.1.1"
4243
},
4344
"dependencies": {
44-
"babel-polyfill": "6.23.0",
45-
"jStat": "1.6.2",
46-
"react": "16.1.1",
47-
"react-dom": "16.1.1"
45+
"babel-polyfill": "6.26.0",
46+
"jStat": "1.7.1",
47+
"react": "16.5.2",
48+
"react-dom": "16.5.2"
4849
}
4950
}

‎webdriver-ts-results/src/App.css

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
1-
.dropdown-backdrop {
2-
display:none;
1+
html {
2+
font-size: 14px;
3+
}
4+
.shutter {
5+
position: fixed;
6+
top: 0;
7+
left: 0;
8+
right: 0;
9+
bottom: 0;
10+
z-index: 999;
11+
display:none;
312
}
413

5-
.open>.dropdown-backdrop {
14+
.open>.shutter {
615
display:block;
716
}
817

‎webdriver-ts-results/src/DropDown.tsx

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,35 @@
11
import * as React from 'react';
22

3-
const toggle = (event: React.SyntheticEvent<HTMLElement>) => {
4-
let elem = (event.nativeEvent.target as HTMLElement).parentElement;
5-
if (elem) elem.classList.toggle('open');
6-
}
7-
83
interface Props {
94
label: string;
105
children: JSX.Element | JSX.Element[];
116
width: string;
127
}
138

14-
export function DropDown(props: Props) {
15-
let {label, children, width} = props;
16-
return <div className="btn-group">
17-
<button type="button" onClick={toggle} className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
18-
{label} <span className="caret"></span>
19-
</button>
20-
<div className="dropdown-backdrop" onClick={toggle}></div>
21-
<div className="dropdown-menu" style={{width: width}}>
22-
<div className="panel-body" style={{paddingTop:'0px'}}>
23-
{children}
9+
export class DropDown extends React.Component<Props,{open: boolean}> {
10+
constructor(props: Props) {
11+
super(props);
12+
this.state = {open: false};
13+
}
14+
public toggle = (event: React.SyntheticEvent<HTMLElement>) => {
15+
console.log("this.toggle");
16+
event.stopPropagation();
17+
this.setState((state,props) => {
18+
return {open: !state.open}
19+
})
20+
}
21+
public render() {
22+
let {label, children, width} = this.props;
23+
return (<div className={(this.state.open ? 'open ' : '') +'btn-group'}>
24+
<button type="button" onClick={this.toggle} className="btn btn-outline-secondary btn-md dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
25+
{label} <span className="caret"></span>
26+
</button>
27+
<div className="shutter" onClick={this.toggle}></div>
28+
<div className={(this.state.open ? 'show ' : '') +'dropdown-menu'} style={{width: width}}>
29+
<div className="card-body" style={{paddingTop:'0px'}}>
30+
{children}
31+
</div>
2432
</div>
25-
</div>
26-
</div>
33+
</div>);
34+
}
2735
};

‎webdriver-ts-results/src/DropDownContents.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@ interface Props<T> extends DropdownCallback<T> {
77

88
export function DropDownContents<T>(props: Props<T>) {
99
let {selectNone, selectAll, isNoneSelected, areAllSelected, children} = props;
10-
return <div>
10+
return <div className="mb-4">
1111
<div className="row">
12-
<div className="text-left col-md-8">
12+
<div className="text-left col-md-8">
1313
{children[0]}
1414
</div>
15-
<div className="text-right col-md-4" style={{paddingTop: '25px'}}>
15+
<div className="text-right col-md-4" style={{paddingTop: '25px'}}>
1616
{!isNoneSelected() ? <a href='#' onClick={selectNone}>None</a> : <span>None</span>}
1717
&nbsp;
1818
{!areAllSelected() ? <a href='#' onClick={selectAll}>All</a> : <span>All</span>}
19-
</div>
20-
</div>
21-
<div className="row">
19+
</div>
20+
</div>
21+
<div className="row here1">
2222
{children[1]}
2323
</div>
2424
</div>;

‎webdriver-ts-results/src/SelectBar.tsx

Lines changed: 106 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,126 @@
11
import * as React from 'react';
22
import './App.css';
3-
import {DropDown} from './DropDown'
4-
import {DropDownContents} from './DropDownContents'
5-
import {Framework, Benchmark, DropdownCallback} from './Common';
6-
import {SelectBarFrameworks} from './SelectBarFrameworks';
7-
import {SelectBarBenchmarks} from './SelectBarBenchmarks';
3+
import { DropDown } from './DropDown'
4+
import { DropDownContents } from './DropDownContents'
5+
import { Framework, Benchmark, DropdownCallback } from './Common';
6+
import { SelectBarFrameworks } from './SelectBarFrameworks';
7+
import { SelectBarBenchmarks } from './SelectBarBenchmarks';
88

99
export interface Props {
10-
frameworkSelectKeyed: DropdownCallback<Framework>;
11-
frameworkSelectNonKeyed: DropdownCallback<Framework>;
12-
benchSelectCpu: DropdownCallback<Benchmark>;
13-
benchSelectStartup: DropdownCallback<Benchmark>;
14-
benchSelectMem: DropdownCallback<Benchmark>;
15-
selectFramework: (framework: Framework, value: boolean) => void;
16-
selectBenchmark: (benchmark: Benchmark, value: boolean) => void;
17-
selectSeparateKeyedAndNonKeyed: (value: boolean) => void;
18-
separateKeyedAndNonKeyed: boolean;
19-
frameworksKeyed: Array<Framework>;
20-
frameworksNonKeyed: Array<Framework>;
21-
benchmarksCPU: Array<Benchmark>;
22-
benchmarksStartup: Array<Benchmark>;
23-
benchmarksMEM: Array<Benchmark>;
24-
compareWith: Framework | undefined;
25-
selectComparison: (framework: string) => void;
26-
useMedian: boolean;
27-
selectMedian: (value: boolean) => void;
28-
highlightVariance: boolean;
29-
selectHighlightVariance: (value: boolean) => void;
10+
frameworkSelectKeyed: DropdownCallback<Framework>;
11+
frameworkSelectNonKeyed: DropdownCallback<Framework>;
12+
benchSelectCpu: DropdownCallback<Benchmark>;
13+
benchSelectStartup: DropdownCallback<Benchmark>;
14+
benchSelectMem: DropdownCallback<Benchmark>;
15+
selectFramework: (framework: Framework, value: boolean) => void;
16+
selectBenchmark: (benchmark: Benchmark, value: boolean) => void;
17+
selectSeparateKeyedAndNonKeyed: (value: boolean) => void;
18+
separateKeyedAndNonKeyed: boolean;
19+
frameworksKeyed: Array<Framework>;
20+
frameworksNonKeyed: Array<Framework>;
21+
benchmarksCPU: Array<Benchmark>;
22+
benchmarksStartup: Array<Benchmark>;
23+
benchmarksMEM: Array<Benchmark>;
24+
compareWith: Framework | undefined;
25+
selectComparison: (framework: string) => void;
26+
useMedian: boolean;
27+
selectMedian: (value: boolean) => void;
28+
highlightVariance: boolean;
29+
selectHighlightVariance: (value: boolean) => void;
3030
}
3131

32-
const SelectCategory = ({benchmarks, select, benchSelect, label} :
33-
{benchmarks: Array<Benchmark>, select: (benchmark: Benchmark, value: boolean) => void, benchSelect: DropdownCallback<Benchmark>, label: string} ) => {
34-
return (<DropDownContents {...benchSelect}>
35-
<h3>{label}</h3>
36-
<div>
32+
const SelectCategory = ({ benchmarks, select, benchSelect, label }:
33+
{ benchmarks: Array<Benchmark>, select: (benchmark: Benchmark, value: boolean) => void, benchSelect: DropdownCallback<Benchmark>, label: string }) => {
34+
return (<DropDownContents {...benchSelect}>
35+
<h3>{label}</h3>
36+
<div>
3737
<SelectBarBenchmarks isSelected={benchSelect.isSelected} select={select} benchmarks={benchmarks} />
38-
</div>
39-
</DropDownContents>);
38+
</div>
39+
</DropDownContents>);
4040
}
4141

4242

4343

4444
export class SelectBar extends React.Component<Props, {}> {
4545
render() {
46-
let {frameworkSelectKeyed,
47-
frameworkSelectNonKeyed,
48-
benchSelectCpu,
49-
benchSelectStartup,
50-
benchSelectMem,
51-
selectFramework,
52-
selectBenchmark,
53-
selectSeparateKeyedAndNonKeyed,
54-
separateKeyedAndNonKeyed,
55-
frameworksKeyed,
56-
frameworksNonKeyed,
57-
benchmarksCPU,
58-
benchmarksStartup,
59-
benchmarksMEM,
60-
compareWith,
61-
selectComparison,
62-
useMedian,
63-
selectMedian,
64-
highlightVariance,
65-
selectHighlightVariance
66-
} = this.props;
46+
let { frameworkSelectKeyed,
47+
frameworkSelectNonKeyed,
48+
benchSelectCpu,
49+
benchSelectStartup,
50+
benchSelectMem,
51+
selectFramework,
52+
selectBenchmark,
53+
selectSeparateKeyedAndNonKeyed,
54+
separateKeyedAndNonKeyed,
55+
frameworksKeyed,
56+
frameworksNonKeyed,
57+
benchmarksCPU,
58+
benchmarksStartup,
59+
benchmarksMEM,
60+
compareWith,
61+
selectComparison,
62+
useMedian,
63+
selectMedian,
64+
highlightVariance,
65+
selectHighlightVariance
66+
} = this.props;
6767
return (
68-
<div>
6968
<div>
70-
<DropDown label="Which frameworks?" width='1024px'>
71-
<DropDownContents {...frameworkSelectKeyed}>
72-
<h3>Keyed frameworks:</h3>
73-
<div>
74-
<SelectBarFrameworks isSelected={frameworkSelectKeyed.isSelected} select={selectFramework} frameworks={frameworksKeyed} />
75-
</div>
76-
</DropDownContents>
77-
<DropDownContents {...frameworkSelectNonKeyed}>
78-
<h3>Non-keyed frameworks:</h3>
79-
<div>
80-
<SelectBarFrameworks isSelected={frameworkSelectNonKeyed.isSelected} select={selectFramework} frameworks={frameworksNonKeyed}/>
81-
</div>
82-
</DropDownContents>
83-
</DropDown>
84-
<div className="hspan"/>
85-
<DropDown label="Which benchmarks?" width='300px'>
86-
<SelectCategory benchmarks={benchmarksCPU} select={selectBenchmark} benchSelect={benchSelectCpu} label="Duration"/>
87-
<SelectCategory benchmarks={benchmarksStartup} select={selectBenchmark} benchSelect={benchSelectStartup} label="Startup"/>
88-
<SelectCategory benchmarks={benchmarksMEM} select={selectBenchmark} benchSelect={benchSelectMem} label="Memory"/>
89-
</DropDown>
90-
<div className="hspan"/>
91-
<div className="checkbox" style={{display:"inline-block"}}>
92-
<label>
93-
<input type="checkbox" onChange={(evt) => selectSeparateKeyedAndNonKeyed(evt.target.checked)} checked={separateKeyedAndNonKeyed} />
94-
Separate keyed and non-keyed
95-
</label>
96-
</div>
97-
<div className="hspan"/>
98-
<form className="form-inline" style={{display:"inline-block"}}>
99-
<div className="form-group">
100-
<div className="hspan"/>
101-
<select className="form-control" value={compareWith ? compareWith.name : ''} onChange={(evt) => selectComparison(evt.target.value)}>
102-
<option value=''>Compare with ...</option>
103-
<optgroup label="Keyed">
104-
{ frameworksKeyed.map(f => <option key={f.name} value={f.name}>{f.name}</option>) }
105-
</optgroup>
106-
<optgroup label="Non-keyed">
107-
{ frameworksNonKeyed.map(f => <option key={f.name} value={f.name}>{f.name}</option>) }
108-
</optgroup>
109-
</select>
69+
<div>
70+
<DropDown label="Which frameworks?" width='1024px'>
71+
<DropDownContents {...frameworkSelectKeyed}>
72+
<h3>Keyed frameworks:</h3>
73+
<SelectBarFrameworks isSelected={frameworkSelectKeyed.isSelected} select={selectFramework} frameworks={frameworksKeyed} />
74+
</DropDownContents>
75+
<DropDownContents {...frameworkSelectNonKeyed}>
76+
<h3>Non-keyed frameworks:</h3>
77+
<SelectBarFrameworks isSelected={frameworkSelectNonKeyed.isSelected} select={selectFramework} frameworks={frameworksNonKeyed} />
78+
</DropDownContents>
79+
</DropDown>
80+
<div className="hspan" />
81+
<DropDown label="Which benchmarks?" width='300px'>
82+
<SelectCategory benchmarks={benchmarksCPU} select={selectBenchmark} benchSelect={benchSelectCpu} label="Duration" />
83+
<SelectCategory benchmarks={benchmarksStartup} select={selectBenchmark} benchSelect={benchSelectStartup} label="Startup" />
84+
<SelectCategory benchmarks={benchmarksMEM} select={selectBenchmark} benchSelect={benchSelectMem} label="Memory" />
85+
</DropDown>
86+
<div className="hspan" />
87+
<div className="form-check" style={{ display: "inline-block" }}>
88+
<input className="form-check-input" type="checkbox" onChange={(evt) => selectSeparateKeyedAndNonKeyed(evt.target.checked)} checked={separateKeyedAndNonKeyed} />
89+
<label className="form-check-label">
90+
Separate keyed and non-keyed
91+
</label>
92+
</div>
93+
<div className="hspan" />
94+
<form className="form-inline" style={{ display: "inline-block" }}>
95+
<div className="form-group">
96+
<div className="hspan" />
97+
<select className="form-control" value={compareWith ? compareWith.name : ''} onChange={(evt) => selectComparison(evt.target.value)}>
98+
<option value=''>Compare with ...</option>
99+
<optgroup label="Keyed">
100+
{frameworksKeyed.map(f => <option key={f.name} value={f.name}>{f.name}</option>)}
101+
</optgroup>
102+
<optgroup label="Non-keyed">
103+
{frameworksNonKeyed.map(f => <option key={f.name} value={f.name}>{f.name}</option>)}
104+
</optgroup>
105+
</select>
106+
</div>
107+
</form>
108+
<div className="hspan" />
109+
<div className="form-check" style={{ display: "inline-block" }}>
110+
<input className="form-check-input" type="checkbox" onChange={(evt) => selectMedian(evt.target.checked)} checked={useMedian} />
111+
<label className="form-check-label">
112+
Use median instead of mean
113+
</label>
114+
</div>
115+
<div className="hspan" />
116+
<div className="form-check" style={{ display: "inline-block" }}>
117+
<input className="form-check-input" type="checkbox" onChange={(evt) => selectHighlightVariance(evt.target.checked)} checked={highlightVariance} />
118+
<label className="form-check-label">
119+
Highlight variance
120+
</label>
121+
</div>
110122
</div>
111-
</form>
112-
<div className="hspan"/>
113-
<div className="checkbox" style={{display:"inline-block"}}>
114-
<label>
115-
<input type="checkbox" onChange={(evt) => selectMedian(evt.target.checked)} checked={useMedian} />
116-
Use median instead of mean
117-
</label>
118-
</div>
119-
<div className="hspan"/>
120-
<div className="checkbox" style={{display:"inline-block"}}>
121-
<label>
122-
<input type="checkbox" onChange={(evt) => selectHighlightVariance(evt.target.checked)} checked={highlightVariance} />
123-
Highlight variance
124-
</label>
125-
</div>
126123
</div>
127-
</div>
128124
);
129125
}
130126
}

0 commit comments

Comments
 (0)