diff --git a/benchmarking/public/index.html b/benchmarking/public/index.html index 70e1074..2ea78b7 100644 --- a/benchmarking/public/index.html +++ b/benchmarking/public/index.html @@ -1,23 +1,18 @@ - - - - - + + + + Document - - + + - +
-

Benchmarking

+

Benchmarking

-
-
-
- +
- - - \ No newline at end of file + + diff --git a/benchmarking/public/style.css b/benchmarking/public/style.css index 8f1ac74..d1632b9 100644 --- a/benchmarking/public/style.css +++ b/benchmarking/public/style.css @@ -18,36 +18,35 @@ form { align-items: center; margin-top: 20px; } -input[type="submit"] { +input[type='submit'] { grid-column: 1 / -1; } -#app { +input, +select { + min-width: 150px; + width: 100%; +} + +#root { display: flex; flex-wrap: wrap; - border: 1px solid black; + /* border: 1px solid black; */ justify-content: space-around; } -#app > div { +#root > div { margin: 10px 6px; - border: 1px solid red; + /* border: 1px solid red; */ } -#form-component { - white-space: normal; -} - -#chart-component { - width: 600px; +.component { + min-width: 300px; + flex: 1; } @media screen and (max-width: 800px) { - #app { - display: block; - } - - #chart-component { - width: auto; + main { + width: 100%; } } diff --git a/benchmarking/src/benchmarks/BenchmarkSuite.js b/benchmarking/src/benchmarks/BenchmarkSuite.js index 89850ce..c73bf12 100644 --- a/benchmarking/src/benchmarks/BenchmarkSuite.js +++ b/benchmarking/src/benchmarks/BenchmarkSuite.js @@ -22,7 +22,7 @@ export class BenchmarkSuite { onCycle(i, count, stats) {} - async run(callback) { + async run() { let mean let i = 0 const count = this.cases.length @@ -33,16 +33,16 @@ export class BenchmarkSuite { this.stats[benchCase.name] = [...this.stats[benchCase.name], mean] i++ this.onCycle(i, count, this.stats) - await this.freeEventLoop() + await freeEventLoop() } } - - /** - * Promise that uses setTimeout to resolve. - * This is a hack to free the eventloop from microtasks. - * Without this rendering blocks during benchmarks. - */ - async freeEventLoop() { - return new Promise(resolve => setTimeout(resolve, 0)) - } +} + +/** + * Promise that uses setTimeout to resolve. + * This is a hack to free the eventloop from microtasks. + * Without this rendering blocks during benchmarks. + */ +async function freeEventLoop() { + return new Promise(resolve => setTimeout(resolve, 0)) } diff --git a/benchmarking/src/components/chart.js b/benchmarking/src/components/chart.js index f31d4e2..a1f3fdc 100644 --- a/benchmarking/src/components/chart.js +++ b/benchmarking/src/components/chart.js @@ -1,15 +1,6 @@ import React, { Component } from 'react' import { Line } from 'react-chartjs-2' -import { data } from '../../../data/large.js' -import simplifyJS from '../../../lib/simplify-js-alternative/simplify.js' - -export function simplifyMapper(labels, highQual) { - // console.log(labels, highQual) - // console.log(labels.map(tol => simplifyJS(data, tol, highQual))) - return labels.map(tol => simplifyJS(data, tol, highQual).length) -} - export class Chart extends Component { constructor(props) { super(props) @@ -25,12 +16,9 @@ export class Chart extends Component { data.datasets[0].data = this.props.data['simplifyWASM'] || [] data.datasets[1].data = this.props.data['simplifyJS'] || [] data.datasets[2].data = this.props.data['origSimplifyJS'] || [] - data.datasets[3].data = simplifyMapper( - this.props.labels, - this.props.highQual - ) + data.datasets[3].data = this.props.numNodes return ( -
+

Chart

+

Settings

@@ -119,7 +119,7 @@ export class Form extends Component { max="100" step="1" value={this.state.iterations} - onChange={this.handleInputChange} + onInput={this.handleInputChange} > )} {this.state.benchMethod === 'opsPerTime' && ( @@ -133,7 +133,7 @@ export class Form extends Component { max="1000" step="10" value={this.state.timeToRun} - onChange={this.handleInputChange} + onInput={this.handleInputChange} > )} diff --git a/benchmarking/src/components/progress.js b/benchmarking/src/components/progress.js index 081e9c5..5005d3c 100644 --- a/benchmarking/src/components/progress.js +++ b/benchmarking/src/components/progress.js @@ -6,7 +6,7 @@ export const Progress = props => { percentage = percentage.toFixed(2) let text = `${percentage}% of benchmarks completed (${finishedCount}/${totalCount})` return ( -
+

Status

{text}
diff --git a/benchmarking/src/index.js b/benchmarking/src/index.js index 3c2e199..d8ebd37 100644 --- a/benchmarking/src/index.js +++ b/benchmarking/src/index.js @@ -13,6 +13,16 @@ import { IterationsBenchmark } from './benchmarks/IterationBenchmark.js' import { BenchmarkJSBenchmark } from './benchmarks/BenchmarkJSBenchmark.js' import { OpsPerTimeBenchmark } from './benchmarks/OpsPerTimeBenchmark.js' +import simplifyJS from '../../lib/simplify-js-alternative/simplify.js' +import { simplifyWasm } from '../../lib/simplify-wasm/index.js' + +export async function simplifyMapper(labels, highQual) { + let items = labels.map(tol => + simplifyWasm(data, tol, highQual).then(arr => arr.length) + ) + return await Promise.all(items) +} + class App extends Component { constructor(props) { super(props) @@ -23,7 +33,8 @@ class App extends Component { stats: {}, formState: { tolRange: [] }, totalCount: 0, - finishedCount: 0 + finishedCount: 0, + numNodes: [] } this.suite = new BenchmarkSuite(new IterationsBenchmark(10)) @@ -40,13 +51,18 @@ class App extends Component { this.runBenchmarks() } - handleformChange(formState) { + async handleformChange(formState) { const { tolStart, tolEnd, tolStep } = formState const tolRange = [] for (let i = tolStart; i < tolEnd; i += tolStep) { tolRange.push(i) + if (tolStep === 0) break + if (tolRange.length > 200) break } - this.setState({ formState: { ...formState, tolRange } }) + this.setState({ + formState: { ...formState, tolRange }, + numNodes: await simplifyMapper(tolRange, formState.highQual) + }) } async runBenchmarks() { @@ -76,7 +92,7 @@ class App extends Component { render() { return ( -
+ <> -
+ ) } }