Add legend information

benchmarking/package.json

@@ -24,6 +24,7 @@
     "chart.js": "^2.8.0",
     "file-drop-element": "^0.2.0",
     "lodash": "^4.17.11",
+    "platform": "^1.3.5",
     "react": "^16.8.6",
     "react-chartjs-2": "^2.7.6",
     "react-debounce-render": "^5.0.0",

benchmarking/public/style.css

@@ -43,6 +43,11 @@ select {
 .component {
   min-width: 300px;
   flex: 1;
+  padding: 10px;
+}
+
+.chartComponent {
+  min-width: 500px;
 }
 
 @media screen and (max-width: 800px) {

benchmarking/src/components/chart.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Line, Bar } from 'react-chartjs-2'
 import debounceRender from 'react-debounce-render'
+import platform from 'platform'
 
 import { downloadAsJson } from '../../../lib/json-download/index.js'
 import { datasetTemplates, genOptions, beautifyLabels } from './chartOptions.js'
@@ -18,9 +19,17 @@ export class Chart extends React.Component {
       data: stats[name]
     }))
     datasets.push({ ...datasetTemplates.numberOfNodes, data: nodeData })
+    datasets.push({
+      label: `High quality mode: ${formState.highQual}`,
+      data: []
+    })
+    datasets.push({
+      label: `Platform: ${platform.description}`,
+      data: []
+    })
     let data = { datasets, labels }
     return (
-      <div className="component">
+      <div className="component chartComponent">
         <h2>Chart</h2>
         {chart === 'wasmVsJs' && <WasmVsJsChart data={data} />}
         {chart === 'wasmStack' && <WasmStackChart data={data} />}
@@ -48,7 +57,7 @@ class WasmVsJsChart extends React.Component {
   render() {
     let data = JSON.parse(JSON.stringify(this.props.data)) // deep copy
     let options = genOptions(
-      'Wasm vs. JavaScript',
+      'Simplify.wasm vs. Simplify.js',
       false,
       this.state.scaleY,
       this.state.values
@@ -121,7 +130,7 @@ class WasmStackChart extends React.Component {
   render() {
     const data = this.props.data
     modifyDataArrays(data, 'simplifyWASM', 'storeCoords', 'loadResult')
-    const options = genOptions('Wasm execution', true)
+    const options = genOptions('Simplify.wasm runtime insights', true)
     return (
       <>
         <Bar
@@ -140,7 +149,10 @@ class WasmStackChart extends React.Component {
 class JsStackChart extends React.Component {
   render() {
     const data = this.props.data
-    const options = genOptions('SimplifyJS execution', true)
+    const options = genOptions(
+      'Simplify.js with coordinates transformation',
+      true
+    )
     modifyDataArrays(
       data,
       'origSimplifyWithTransformCase',

benchmarking/src/components/chartOptions.js

@@ -7,23 +7,30 @@ function genDataset(label, color, yAxisID = 'performance', type) {
     yAxisID,
     fill: false,
     backgroundColor: color,
-    borderColor: color
+    borderColor: color,
+    data: []
   }
 }
 
 export const datasetTemplates = {
-  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'),
+  numberOfNodes: genDataset('# of positions', 'grey', 'nodes', 'line'),
+  simplifyWASM: genDataset('Simplify.wasm', 'red'),
+  simplifyJS: genDataset('Simplify.js', 'blue'),
+  simplifyJSAlt: genDataset('Simplify.js Alternative', 'green'),
+  storeCoords: genDataset('Store coordinates', 'blue'),
+  loadResult: genDataset('Load result', 'green'),
   origSimplifyWithTransformCase: genDataset(
-    'origSimplifyWithTransformCase',
+    'Simplify.js with data transformation',
     'red'
   ),
-  transformToArrayFormCase: genDataset('transformToArrayFormCase', 'blue'),
-  transformToObjectFormCase: genDataset('transformToObjectFormCase', 'green')
+  transformToArrayFormCase: genDataset(
+    'Transform result to array format',
+    'green'
+  ),
+  transformToObjectFormCase: genDataset(
+    'Transform coordinates to object format',
+    'blue'
+  )
 }
 
 function genScaleLabel(label) {