restructure
This commit is contained in:
parent
7901e2c54c
commit
d0cfefa99c
@ -1,23 +1,18 @@
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Benchmarking</h1>
|
||||
<h1>Benchmarking</h1>
|
||||
</header>
|
||||
<main>
|
||||
<div id="root"></div>
|
||||
</main>
|
||||
|
||||
<main id="root"></main>
|
||||
|
||||
<script src="./bundle.js"></script>
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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))
|
||||
}
|
||||
|
||||
@ -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 (
|
||||
<div id="chart-component">
|
||||
<div className="component">
|
||||
<h2>Chart</h2>
|
||||
<Line
|
||||
height={400}
|
||||
|
||||
@ -37,7 +37,7 @@ export class Form extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="form-component">
|
||||
<div className="component">
|
||||
<h2>Settings</h2>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>Tolerance start: </label>
|
||||
@ -119,7 +119,7 @@ export class Form extends Component {
|
||||
max="100"
|
||||
step="1"
|
||||
value={this.state.iterations}
|
||||
onChange={this.handleInputChange}
|
||||
onInput={this.handleInputChange}
|
||||
></input>
|
||||
)}
|
||||
{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}
|
||||
></input>
|
||||
)}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@ export const Progress = props => {
|
||||
percentage = percentage.toFixed(2)
|
||||
let text = `${percentage}% of benchmarks completed (${finishedCount}/${totalCount})`
|
||||
return (
|
||||
<div id="progress-component">
|
||||
<div className="component">
|
||||
<h2>Status</h2>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
|
||||
@ -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 (
|
||||
<div id="app">
|
||||
<>
|
||||
<Form
|
||||
onFormChange={this.handleformChange}
|
||||
onFormSubmit={this.handleFormSubmit}
|
||||
@ -89,8 +105,9 @@ class App extends Component {
|
||||
labels={this.state.formState.tolRange}
|
||||
highQual={this.state.formState.highQual}
|
||||
data={this.state.stats}
|
||||
numNodes={this.state.numNodes}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user