benchmark: run benchmarks in worker

Author: stropitek

benchmark/worker.js

@@ -0,0 +1,8 @@
+onmessage = function(event) {
+    require(['./browser', `./${event.data.benchmark}-benchmark.js`], function(exec, benchmark) {
+        exec.default(benchmark, event.data.method, event.data.time).then(function(result) {
+            event.data.result = result;
+            postMessage(event.data);
+        });
+    });
+};

demos/components/Benchmark.js

@@ -1,38 +1,63 @@
 import React, {Component} from 'react';
-import runBenchmark from '../../benchmark/browser';
+import Loading from 'react-loading';
 
 export default class Benchmarks extends Component {
     constructor(props) {
         super(props);
-        this.state = {};
+        this.state = {
+            asmTime: '-',
+            wasmTime: '-'
+        };
     }
-    async onRun() {
-        const asmTime = await runBenchmark(this.props.benchmark, 'asm', 5);
-        this.setState({
-            asmTime
-        });
 
-        await wait();
+    componentDidMount() {
+        const Worker = require('worker-loader!../../benchmark/worker');
+        this.worker = new Worker;
+        this.worker.onmessage = event => {
+            this.setState({
+                [event.data.method === 'asm' ? 'asmTime' : 'wasmTime']: event.data.result
+            });
+        };
+    }
 
-        const wasmTime = await runBenchmark(this.props.benchmark, 'wasm', 5);
+    async onRun() {
+        this.worker.postMessage({
+            benchmark: this.props.benchmark,
+            method: 'asm',
+            time: 5
+        });
+        this.worker.postMessage({
+            benchmark: this.props.benchmark,
+            method: 'wasm',
+            time: 5
+        });
         this.setState({
-            wasmTime
+            asmTime: 'running',
+            wasmTime: 'running'
         });
     }
+
     render() {
+        const {asmTime, wasmTime} = this.state;
+        const disabled = asmTime === 'running' || wasmTime === 'running';
         return (
             <div>
                 <h3>{this.props.name}</h3>
-                asm: {this.state.asmTime} &nbsp;
-                wasm: {this.state.wasmTime} &nbsp;
-                <input type="button" value="Run" onClick={this.onRun.bind(this)} />
+                <div style={{lineHeight: '32px', display: 'flex'}}>
+                    asm: {asmTime === 'running' ? <MySpinner /> : asmTime} &nbsp;
+                    wasm: {wasmTime === 'running' ? <MySpinner /> : wasmTime } &nbsp;
+                    <input type="button" className="btn btn-info" value="Run" onClick={this.onRun.bind(this)} disabled={disabled}/>
+                </div>
             </div>
         )
     }
 }
 
-function wait() {
-    return new Promise(resolve => {
-        setTimeout(resolve, 0);
-    });
+
+function MySpinner() {
+    return (
+        <div style={{display: 'inline-block', height: 32, width: 32}}>
+            <Loading type="bubbles" width={32} height={32} color="black"/>
+        </div>
+    )
 }

demos/containers/App.js

@@ -9,6 +9,7 @@ import Navigation from '../components/Navigation';
 import {Route, HashRouter as Router} from 'react-router-dom';
 import Benchmarks from './Benchmarks';
 
+
 class App extends Component {
     componentWillMount() {
         const onResize = () => {

demos/containers/Benchmarks.js

@@ -1,13 +1,11 @@
 import React from 'react';
 import Benchmark from '../components/Benchmark';
-import irisCVBenchmark from '../../benchmark/iris/cross-validation-benchmark';
-import irisGSBenchmark from '../../benchmark/iris/grid-search-benchmark';
 
 export default function() {
     return (
         <div>
-            <Benchmark benchmark={irisCVBenchmark} name="Iris cross-validation"/>
-            <Benchmark benchmark={irisGSBenchmark} name="Iris grid-search"/>
+            <Benchmark benchmark="iris/cross-validation" name="Iris cross-validation"/>
+            <Benchmark benchmark="iris/grid-search" name="Iris grid-search"/>
         </div>
     );
 };

package.json

@@ -38,7 +38,9 @@
     "url": "https://github.com/mljs/libsvm/issues"
   },
   "homepage": "https://github.com/mljs/libsvm#readme",
-  "dependencies": {},
+  "dependencies": {
+    "react-loading": "^0.1.2"
+  },
   "devDependencies": {
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.2.1",
@@ -90,6 +92,7 @@
     "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1",
-    "webpack-visualizer-plugin": "^0.1.11"
+    "webpack-visualizer-plugin": "^0.1.11",
+    "worker-loader": "^0.8.0"
   }
 }

webpack.common.js

@@ -1,5 +1,6 @@
 'use strict';
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = {
     entry: [
@@ -58,7 +59,16 @@ module.exports = {
         ]
     },
     plugins: [
-
+        new webpack.LoaderOptionsPlugin({
+            options: {
+                worker: {
+                    output: {
+                        filename: "hash.worker.js",
+                        chunkFilename: "[id].hash.worker.js"
+                    }
+                }
+            }
+        })
     ],
     node: {
         fs: 'empty'

yarn.lock

@@ -3980,6 +3980,10 @@ react-hot-loader@beta:
     redbox-react "^1.2.5"
     source-map "^0.4.4"
 
+react-loading@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/react-loading/-/react-loading-0.1.2.tgz#4da95b3d4b55904fd8294c1eb40f8512a6ca04f6"
+
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -5032,6 +5036,12 @@ wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
+worker-loader@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-0.8.0.tgz#13582960dcd7d700dc829d3fd252a7561696167e"
+  dependencies:
+    loader-utils "^1.0.2"
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"