melch/mt-polygon-simplification
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

restructure

Browse Source
This commit is contained in:
Alfred Melch 2019-07-19 15:15:05 +02:00
parent 7901e2c54c
commit d0cfefa99c
7 changed files with 66 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
benchmarking/public/index.html
View File

@ -1,23 +1,18 @@
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title> <title>Document</title>
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css" />
</head> </head>
<body> <body>
<header> <header>
<h1>Benchmarking</h1> <h1>Benchmarking</h1>
</header> </header>
<main> <main id="root"></main>
<div id="root"></div>
</main>
<script src="./bundle.js"></script> <script src="./bundle.js"></script>
</body> </body>
</html>
</html>

33
benchmarking/public/style.css
View File

@ -18,36 +18,35 @@ form {
align-items: center; align-items: center;
margin-top: 20px; margin-top: 20px;
} }
input[type="submit"] { input[type='submit'] {
grid-column: 1 / -1; grid-column: 1 / -1;
} }
#app { input,
select {
min-width: 150px;
width: 100%;
}
#root {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
border: 1px solid black; /* border: 1px solid black; */
justify-content: space-around; justify-content: space-around;
} }
#app > div { #root > div {
margin: 10px 6px; margin: 10px 6px;
border: 1px solid red; /* border: 1px solid red; */
} }
#form-component { .component {
white-space: normal; min-width: 300px;
} flex: 1;
#chart-component {
width: 600px;
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#app { main {
display: block; width: 100%;
}
#chart-component {
width: auto;
} }
} }

22
benchmarking/src/benchmarks/BenchmarkSuite.js
View File

@ -22,7 +22,7 @@ export class BenchmarkSuite {
onCycle(i, count, stats) {} onCycle(i, count, stats) {}
async run(callback) { async run() {
let mean let mean
let i = 0 let i = 0
const count = this.cases.length const count = this.cases.length
@ -33,16 +33,16 @@ export class BenchmarkSuite {
this.stats[benchCase.name] = [...this.stats[benchCase.name], mean] this.stats[benchCase.name] = [...this.stats[benchCase.name], mean]
i++ i++
this.onCycle(i, count, this.stats) 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. * Promise that uses setTimeout to resolve.
* Without this rendering blocks during benchmarks. * 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)) async function freeEventLoop() {
} return new Promise(resolve => setTimeout(resolve, 0))
} }

16
benchmarking/src/components/chart.js
View File

@ -1,15 +1,6 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Line } from 'react-chartjs-2' 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 { export class Chart extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -25,12 +16,9 @@ export class Chart extends Component {
data.datasets[0].data = this.props.data['simplifyWASM'] || [] data.datasets[0].data = this.props.data['simplifyWASM'] || []
data.datasets[1].data = this.props.data['simplifyJS'] || [] data.datasets[1].data = this.props.data['simplifyJS'] || []
data.datasets[2].data = this.props.data['origSimplifyJS'] || [] data.datasets[2].data = this.props.data['origSimplifyJS'] || []
data.datasets[3].data = simplifyMapper( data.datasets[3].data = this.props.numNodes
this.props.labels,
this.props.highQual
)
return ( return (
<div id="chart-component"> <div className="component">
<h2>Chart</h2> <h2>Chart</h2>
<Line <Line
height={400} height={400}

6
benchmarking/src/components/form.js
View File

@ -37,7 +37,7 @@ export class Form extends Component {
render() { render() {
return ( return (
<div id="form-component"> <div className="component">
<h2>Settings</h2> <h2>Settings</h2>
<form onSubmit={this.handleSubmit}> <form onSubmit={this.handleSubmit}>
<label>Tolerance start: </label> <label>Tolerance start: </label>
@ -119,7 +119,7 @@ export class Form extends Component {
max="100" max="100"
step="1" step="1"
value={this.state.iterations} value={this.state.iterations}
onChange={this.handleInputChange} onInput={this.handleInputChange}
></input> ></input>
)} )}
{this.state.benchMethod === 'opsPerTime' && ( {this.state.benchMethod === 'opsPerTime' && (
@ -133,7 +133,7 @@ export class Form extends Component {
max="1000" max="1000"
step="10" step="10"
value={this.state.timeToRun} value={this.state.timeToRun}
onChange={this.handleInputChange} onInput={this.handleInputChange}
></input> ></input>
)} )}

2
benchmarking/src/components/progress.js
View File

@ -6,7 +6,7 @@ export const Progress = props => {
percentage = percentage.toFixed(2) percentage = percentage.toFixed(2)
let text = `${percentage}% of benchmarks completed (${finishedCount}/${totalCount})` let text = `${percentage}% of benchmarks completed (${finishedCount}/${totalCount})`
return ( return (
<div id="progress-component"> <div className="component">
<h2>Status</h2> <h2>Status</h2>
<span>{text}</span> <span>{text}</span>
</div> </div>

27
benchmarking/src/index.js
View File

@ -13,6 +13,16 @@ import { IterationsBenchmark } from './benchmarks/IterationBenchmark.js'
import { BenchmarkJSBenchmark } from './benchmarks/BenchmarkJSBenchmark.js' import { BenchmarkJSBenchmark } from './benchmarks/BenchmarkJSBenchmark.js'
import { OpsPerTimeBenchmark } from './benchmarks/OpsPerTimeBenchmark.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 { class App extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -23,7 +33,8 @@ class App extends Component {
stats: {}, stats: {},
formState: { tolRange: [] }, formState: { tolRange: [] },
totalCount: 0, totalCount: 0,
finishedCount: 0 finishedCount: 0,
numNodes: []
} }
this.suite = new BenchmarkSuite(new IterationsBenchmark(10)) this.suite = new BenchmarkSuite(new IterationsBenchmark(10))
@ -40,13 +51,18 @@ class App extends Component {
this.runBenchmarks() this.runBenchmarks()
} }
handleformChange(formState) { async handleformChange(formState) {
const { tolStart, tolEnd, tolStep } = formState const { tolStart, tolEnd, tolStep } = formState
const tolRange = [] const tolRange = []
for (let i = tolStart; i < tolEnd; i += tolStep) { for (let i = tolStart; i < tolEnd; i += tolStep) {
tolRange.push(i) 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() { async runBenchmarks() {
@ -76,7 +92,7 @@ class App extends Component {
render() { render() {
return ( return (
<div id="app"> <>
<Form <Form
onFormChange={this.handleformChange} onFormChange={this.handleformChange}
onFormSubmit={this.handleFormSubmit} onFormSubmit={this.handleFormSubmit}
@ -89,8 +105,9 @@ class App extends Component {
labels={this.state.formState.tolRange} labels={this.state.formState.tolRange}
highQual={this.state.formState.highQual} highQual={this.state.formState.highQual}
data={this.state.stats} data={this.state.stats}
numNodes={this.state.numNodes}
/> />
</div> </>
) )
} }
} }