Add other charts

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'",

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

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 (
       <div className="component">
         <h2>Chart</h2>
-        <Line height={400} width={600} data={data} options={options} />
+        {chart === 'wasmVsJs' && <WasmVsJsChart data={data} />}
+        {chart === 'wasmStack' && <WasmStackChart data={data} />}
+        {chart === 'simplifyJSStack' && <JsStackChart data={data} />}
+      </div>
+    )
+  }
+}
 
+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 (
+      <>
+        <Line height={400} width={400} data={data} options={options} />
         <label>Scale Y-Axis</label>
         <select
           name="scaleY"
@@ -57,9 +69,54 @@ export class Chart extends Component {
           <option value="mean">ms per operation (mean)</option>
           <option value="hz">Operations per second (hz)</option>
         </select>
-      </div>
+      </>
     )
   }
 }
 
+/**
+ * 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 <Bar height={400} width={400} data={data} options={options} />
+}
+
+const JsStackChart = ({ data }) => {
+  const options = genOptions('SimplifyJS execution', true)
+  modifyDataArrays(
+    data,
+    'origSimplifyWithTransformCase',
+    'transformToObjectFormCase',
+    'transformToArrayFormCase'
+  )
+  return <Bar height={400} width={400} data={data} options={options} />
+}
 export const DebouncedChart = debounceRender(Chart, 300)

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') {

benchmarking/src/components/form.js

@@ -110,7 +110,7 @@ export class Form extends Component {
           >
             <option value="wasmVsJs">simplifyWasm vs. simplifyJS</option>
             <option value="wasmStack">wasmStack</option>
-            <option value="simplifyStack">simpslifyStack</option>
+            <option value="simplifyJSStack">simpslifyJSStack</option>
           </select>
 
           <label>Benchmarking method: </label>