146 lines
4.0 KiB
JavaScript
146 lines
4.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
|
|
export class Form extends Component {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = {
|
|
tolStart: 0.1,
|
|
tolStep: 0.1,
|
|
tolEnd: 1,
|
|
highQual: true,
|
|
chart: 'wasmVsJs',
|
|
benchMethod: 'iteration',
|
|
iterations: 10,
|
|
timeToRun: 200
|
|
}
|
|
|
|
this.handleInputChange = this.handleInputChange.bind(this)
|
|
this.handleSubmit = this.handleSubmit.bind(this)
|
|
this.props.onFormChange(this.state)
|
|
}
|
|
|
|
handleSubmit(event) {
|
|
event.preventDefault()
|
|
this.props.onFormSubmit()
|
|
}
|
|
|
|
handleInputChange(event) {
|
|
let name, value
|
|
const target = event.target
|
|
value = target.type === 'checkbox' ? target.checked : target.value
|
|
value = target.type === 'number' ? Number(value) : value
|
|
value = target.type === 'range' ? Number(value) : value
|
|
name = target.name
|
|
this.setState({ [name]: value })
|
|
this.props.onFormChange({ ...this.state, [name]: value })
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div id="form-component">
|
|
<h2>Settings</h2>
|
|
<form onSubmit={this.handleSubmit}>
|
|
<label>Tolerance start: </label>
|
|
<input
|
|
name="tolStart"
|
|
type="number"
|
|
min="0.001"
|
|
max="1"
|
|
step="0.001"
|
|
value={this.state.tolStart}
|
|
onChange={this.handleInputChange}
|
|
/>
|
|
|
|
<label>Tolerance step: </label>
|
|
<input
|
|
name="tolStep"
|
|
type="number"
|
|
min="0.001"
|
|
max="1"
|
|
step="0.001"
|
|
value={this.state.tolStep}
|
|
onChange={this.handleInputChange}
|
|
/>
|
|
|
|
<label>Tolerance end: </label>
|
|
<input
|
|
name="tolEnd"
|
|
type="number"
|
|
min="0.01"
|
|
max="5"
|
|
step="0.01"
|
|
value={this.state.tolEnd}
|
|
onChange={this.handleInputChange}
|
|
/>
|
|
|
|
<label>high Quality: </label>
|
|
<input
|
|
name="highQual"
|
|
type="checkbox"
|
|
checked={this.state.highQual}
|
|
onChange={this.handleInputChange}
|
|
/>
|
|
|
|
<label>Chart: </label>
|
|
<select
|
|
name="chart"
|
|
value={this.state.chart}
|
|
onChange={this.handleInputChange}
|
|
>
|
|
<option value="wasmVsJs">simplifyWasm vs. simplifyJS</option>
|
|
<option value="wasmStack">wasmStack</option>
|
|
<option value="simplifyStack">simplifyStack</option>
|
|
</select>
|
|
|
|
<label>Benchmarking method: </label>
|
|
<select
|
|
name="benchMethod"
|
|
value={this.state.benchMethod}
|
|
onChange={this.handleInputChange}
|
|
>
|
|
<option value="iteration">
|
|
Iterations (fast - low significance)
|
|
</option>
|
|
<option value="benchmarkJS">
|
|
BenchmarkJS (slow - statistically significant)
|
|
</option>
|
|
<option value="opsPerTime">
|
|
OpsPerTime (slow - low significance)
|
|
</option>
|
|
</select>
|
|
{this.state.benchMethod === 'iteration' && (
|
|
<label>Iterations ({this.state.iterations})</label>
|
|
)}
|
|
{this.state.benchMethod === 'iteration' && (
|
|
<input
|
|
name="iterations"
|
|
type="range"
|
|
min="1"
|
|
max="100"
|
|
step="1"
|
|
value={this.state.iterations}
|
|
onChange={this.handleInputChange}
|
|
></input>
|
|
)}
|
|
{this.state.benchMethod === 'opsPerTime' && (
|
|
<label>Time to run ({this.state.timeToRun}ms)</label>
|
|
)}
|
|
{this.state.benchMethod === 'opsPerTime' && (
|
|
<input
|
|
name="timeToRun"
|
|
type="range"
|
|
min="100"
|
|
max="1000"
|
|
step="10"
|
|
value={this.state.timeToRun}
|
|
onChange={this.handleInputChange}
|
|
></input>
|
|
)}
|
|
|
|
<input type="submit" value="run" />
|
|
</form>
|
|
</div>
|
|
)
|
|
}
|
|
}
|