add option change order of magnitude

benchmarking/public/style.css

@@ -11,7 +11,7 @@ main {
 #status {
   background-color: bisque;
 }
-form {
+.form {
   display: grid;
   grid-template-columns: auto auto;
   grid-gap: 10px;

benchmarking/src/components/form.js

@@ -47,11 +47,26 @@ export class Form extends Component {
     this.props.onFormChange({ ...this.state, tolRange })
   }
 
+  /** changes order of magnitude for all tolerance values */
+  changeOOM(mode) {
+    let maxPrecision = 6
+    let p = Math.pow(10, maxPrecision)
+    let mod = mode === 'increase' ? 10 : 0.1
+    let { tolStart, tolStep, tolEnd } = this.state
+    const round = val => Math.round(val * p) / p
+    const modify = val => (round(val * mod) === 0 ? val : round(val * mod))
+    this.setState({
+      tolStart: modify(tolStart),
+      tolStep: modify(tolStep),
+      tolEnd: modify(tolEnd)
+    })
+  }
+
   render() {
     return (
       <div className="component">
         <h2>Settings</h2>
-        <form>
+        <div className="form">
           <label>Dataset</label>
           <select
             name="dataset"
@@ -65,6 +80,12 @@ export class Form extends Component {
             ))}
           </select>
 
+          <label>Tolerance order of magnitude</label>
+          <div>
+            <button onClick={() => this.changeOOM('increase')}>+</button>
+            <button onClick={() => this.changeOOM('decrease')}>-</button>
+          </div>
+
           <label>Tolerance start: </label>
           <input
             name="tolStart"
@@ -169,7 +190,7 @@ export class Form extends Component {
             checked={this.state.debouncedChart}
             onChange={this.handleInputChange}
           />
-        </form>
+        </div>
       </div>
     )
   }