diff --git a/benchmarking/package.json b/benchmarking/package.json index c38e5b0..f25c668 100644 --- a/benchmarking/package.json +++ b/benchmarking/package.json @@ -7,7 +7,7 @@ "lib": "lib" }, "scripts": { - "build": "webpack --mode development", + "build": "webpack --mode production", "serve": "webpack serve", "test": "echo \"Error: no test specified\" && exit 1", "lint": "prettier --check '**/*.js'", diff --git a/benchmarking/src/benchmarkCases/index.js b/benchmarking/src/benchmarkCases/index.js index e436daf..05f04fb 100644 --- a/benchmarking/src/benchmarkCases/index.js +++ b/benchmarking/src/benchmarkCases/index.js @@ -11,13 +11,13 @@ import { } from './simplifyWasm.js' export const chartDependencies = { - wasmStack: [StoreCoordsCase, LoadResultCase, SimplifyWASMCase], + wasmStack: [StoreCoordsCase, SimplifyWASMCase, LoadResultCase], simplifyJSStack: [ + TransformToObjectFormCase, OrigSimplifyWithTransformCase, - TransformToArrayFormCase, - TransformToObjectFormCase + TransformToArrayFormCase ], - wasmVsJs: [SimplifyJSCase, SimplifyWASMCase, SimplifyJSAltCase] + wasmVsJs: [SimplifyWASMCase, SimplifyJSCase, SimplifyJSAltCase] } const uniqueFilter = (val, idx, self) => self.indexOf(val) === idx diff --git a/benchmarking/src/components/chart.js b/benchmarking/src/components/chart.js index df196f9..94c81c0 100644 --- a/benchmarking/src/components/chart.js +++ b/benchmarking/src/components/chart.js @@ -1,22 +1,14 @@ -import React, { Component } from 'react' -import { Line } from 'react-chartjs-2' +import React from 'react' +import { Line, Bar } from 'react-chartjs-2' import debounceRender from 'react-debounce-render' import { datasetTemplates, genOptions } from './chartOptions.js' -export class Chart extends Component { - constructor(props) { - super(props) - this.state = { - scaleY: 'linear', - values: 'mean' - } - } +export class Chart extends React.Component { render() { let { formState, stats, nodeData } = this.props let { tolRange, chart } = formState tolRange = tolRange || [] - let { scaleY, values } = this.state let labels = tolRange // let labels = tolRange.map(x => Math.round(x * 1000) / 1000) @@ -24,20 +16,40 @@ export class Chart extends Component { ...datasetTemplates[name], data: stats[name] })) - if (values === 'hz') { - for (let dataset of datasets) { - dataset.data = dataset.data.map(mean => 1000 / mean) - } - } datasets.push({ ...datasetTemplates.numberOfNodes, data: nodeData }) let data = { datasets, labels } - let options = genOptions(chart, false, scaleY) - // console.log(JSON.stringify(data, null, 2)) return (

Chart

- + {chart === 'wasmVsJs' && } + {chart === 'wasmStack' && } + {chart === 'simplifyJSStack' && } +
+ ) + } +} +class WasmVsJsChart extends React.Component { + constructor(props) { + super(props) + this.state = { + scaleY: 'linear', + values: 'mean' + } + } + convertDataToHz() { + let datasets = this.props.data.datasets + for (let dataset of datasets.filter(d => d.label !== 'numberOfNodes')) { + dataset.data = dataset.data.map(mean => 1000 / mean) + } + } + render() { + let data = this.props.data + let options = genOptions('Wasm vs. JavaScript', false, this.state.scaleY) + if (this.state.values === 'hz') this.convertDataToHz() + return ( + <> + - + ) } } +/** + * Returns the dataset specified by label + */ +function getDataset(data, label) { + return data.datasets.filter(d => d.label === label)[0] +} + +/** + * Takes three data arrays. Subtracts the values of arr1 and arr2 from whole. + * This is used for calculating the time of execution in cases where the data + * transformation is part of the whole operation. + * Example: subtract storeCoords and loadResult from the whole simplifyWASM + * operation to get execution time of wasm code. + */ +function calculateTimeDelta(whole, arr1, arr2) { + const safeGet = (arr, idx) => (idx < arr.length ? arr[idx] : 0) + return whole.map((val, i) => val - (safeGet(arr1, i) + safeGet(arr2, i))) +} + +function modifyDataArrays(data, exec, pre, after) { + if (getDataset(data, exec)) { + getDataset(data, exec).data = calculateTimeDelta( + getDataset(data, exec).data, + getDataset(data, pre).data, + getDataset(data, after).data + ) + } +} + +const WasmStackChart = ({ data }) => { + modifyDataArrays(data, 'simplifyWASM', 'storeCoords', 'loadResult') + const options = genOptions('Wasm execution', true) + return +} + +const JsStackChart = ({ data }) => { + const options = genOptions('SimplifyJS execution', true) + modifyDataArrays( + data, + 'origSimplifyWithTransformCase', + 'transformToObjectFormCase', + 'transformToArrayFormCase' + ) + return +} export const DebouncedChart = debounceRender(Chart, 300) diff --git a/benchmarking/src/components/chartOptions.js b/benchmarking/src/components/chartOptions.js index df4c7be..6b0826c 100644 --- a/benchmarking/src/components/chartOptions.js +++ b/benchmarking/src/components/chartOptions.js @@ -1,7 +1,8 @@ import ChartJS from 'chart.js' -function genDataset(label, color, yAxisID = 'performance', type = 'line') { +function genDataset(label, color, yAxisID = 'performance', type) { return { + type, label, yAxisID, fill: false, @@ -11,12 +12,18 @@ function genDataset(label, color, yAxisID = 'performance', type = 'line') { } export const datasetTemplates = { - numberOfNodes: genDataset('numberOfNodes', 'grey', 'nodes'), + numberOfNodes: genDataset('numberOfNodes', 'grey', 'nodes', 'line'), simplifyWASM: genDataset('simplifyWASM', 'red'), simplifyJS: genDataset('simplifyJS', 'blue'), simplifyJSAlt: genDataset('simplifyJSAlt', 'green'), storeCoords: genDataset('storeCoords', 'blue'), - loadResult: genDataset('loadResult', 'green') + loadResult: genDataset('loadResult', 'green'), + origSimplifyWithTransformCase: genDataset( + 'origSimplifyWithTransformCase', + 'red' + ), + transformToArrayFormCase: genDataset('transformToArrayFormCase', 'blue'), + transformToObjectFormCase: genDataset('transformToObjectFormCase', 'green') } export function genOptions(title, stacked = false, scaleY = 'linear') { diff --git a/benchmarking/src/components/form.js b/benchmarking/src/components/form.js index 0cf8c49..0e22d2c 100644 --- a/benchmarking/src/components/form.js +++ b/benchmarking/src/components/form.js @@ -110,7 +110,7 @@ export class Form extends Component { > - +