mt-polygon-simplification/benchmarking/src/index.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'

import { data } from '../../data/large.js'

import { Form } from './components/form.js'
import { Chart } from './components/chart.js'
import { Progress } from './components/progress.js'

import { BenchmarkSuite } from './benchmarks/BenchmarkSuite.js'
import { generateCases } from './benchmarkCases/index.js'
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)
    this.handleformChange = this.handleformChange.bind(this)
    this.handleFormSubmit = this.handleFormSubmit.bind(this)

    this.state = {
      stats: {},
      formState: { tolRange: [] },
      totalCount: 0,
      finishedCount: 0,
      numNodes: []
    }

    this.suite = new BenchmarkSuite(new IterationsBenchmark(10))
    this.suite.onCycle = (i, count, stats) => {
      this.setState({
        finishedCount: i,
        totalCount: count,
        stats: stats
      })
    }
  }

  async handleFormSubmit() {
    this.runBenchmarks()
  }

  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 },
      numNodes: await simplifyMapper(tolRange, formState.highQual)
    })
  }

  async runBenchmarks() {
    this.suite.reset()
    let benchtype
    console.log(this.state.formState.benchMethod)
    switch (this.state.formState.benchMethod) {
      case 'benchmarkJS':
        benchtype = new BenchmarkJSBenchmark()
        break
      case 'iteration':
        benchtype = new IterationsBenchmark(this.state.formState.iterations)
        break
      case 'opsPerTime':
        benchtype = new OpsPerTimeBenchmark(this.state.formState.timeToRun)
        break
      default:
        console.warn('benchmark type "' + this.state.benchtype + '" not known')
        benchtype = new IterationsBenchmark(10)
    }
    this.suite.setBenchmarkType(benchtype)
    this.suite.setCases(generateCases(data, this.state.formState))
    updateStatus('Running')
    await this.suite.run()
    updateStatus('Finished')
  }

  render() {
    return (
      <>
        <Form
          onFormChange={this.handleformChange}
          onFormSubmit={this.handleFormSubmit}
        />
        <Progress
          totalCount={this.state.totalCount}
          finishedCount={this.state.finishedCount}
        />
        <Chart
          labels={this.state.formState.tolRange}
          highQual={this.state.formState.highQual}
          data={this.state.stats}
          numNodes={this.state.numNodes}
        />
      </>
    )
  }
}

ReactDOM.render(<App />, document.getElementsByTagName('main')[0])

const updateStatus = status => {
  console.log(status)
}