lazy loading of datasets

benchmarking/src/components/chart.js

@@ -4,6 +4,8 @@ import debounceRender from 'react-debounce-render'
 import platform from 'platform'
 
 import { downloadAsJson } from '../../../lib/json-download/index.js'
+
+import { datasetNames } from '../data/index.js'
 import { datasetTemplates, genOptions, beautifyLabels } from './chartOptions.js'
 
 export class Chart extends React.Component {
@@ -11,7 +13,6 @@ export class Chart extends React.Component {
     let { formState, stats, nodeData } = this.props
     let { tolRange, chart } = formState
     tolRange = tolRange || []
-
     let labels = beautifyLabels(tolRange)
     // let labels = tolRange.map(x => Math.round(x * 1000) / 1000)
     let datasets = Object.keys(stats).map(name => ({
@@ -19,15 +20,9 @@ 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 }
+    addLegendEntry(data, `High quality mode: ${formState.highQual}`)
+    addLegendEntry(data, `Platform: ${platform.description}`)
     return (
       <div className="component chartComponent">
         <h2>Chart</h2>
@@ -117,7 +112,7 @@ function calculateTimeDelta(whole, arr1, arr2) {
 }
 
 function modifyDataArrays(data, exec, pre, after, newDatasetLabel) {
-  if (getDataset(data, exec)) {
+  if (getDataset(data, exec) && getDataset(data, pre)) {
     data.datasets.splice(1, 0, {
       id: 'execution',
       backgroundColor: 'red',
@@ -208,3 +203,12 @@ function saveChart(chartRef) {
   )
   downloadAsJson(config, 'config.json')
 }
+
+/**
+ * Adds an empty dataset to attach info to legend
+ * @param {} data
+ * @param {*} label
+ */
+function addLegendEntry(data, label) {
+  data.datasets.push({ label, data: [] })
+}

benchmarking/src/components/form.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react'
 
+import { datasetNames } from '../data/index.js'
+
 export class Form extends Component {
   constructor(props) {
     super(props)
@@ -12,7 +14,7 @@ export class Form extends Component {
       benchMethod: 'iteration',
       iterations: 10,
       timeToRun: 200,
-      dataset: 'large',
+      dataset: Object.keys(datasetNames)[0],
       debouncedChart: false
     }
 
@@ -56,9 +58,11 @@ export class Form extends Component {
             value={this.state.dataset}
             onChange={this.handleInputChange}
           >
-            <option value="large">Simplify.js (73.752 points)</option>
-            <option value="bavaria">Bavaria (116.829 points)</option>
-            <option value="small">small (8 points)</option>
+            {Object.keys(datasetNames).map((key, idx) => (
+              <option value={key} key={idx}>
+                {datasetNames[key]}
+              </option>
+            ))}
           </select>
 
           <label>Tolerance start: </label>

benchmarking/src/components/runner.js

@@ -33,18 +33,20 @@ export class BenchmarkRunner extends Component {
     this.props.onStatsChange(this.suite.stats)
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  async componentDidUpdate(prevProps, prevState) {
     if (prevState !== this.state) {
+      // state changed -> internal update
       this.props.onStatsChange(this.suite.stats)
     }
     if (prevProps.formState !== this.props.formState) {
-      this.initializeSuite()
+      // props changed -> update from parent
+      await this.initializeSuite()
       this.suite.stop()
     }
   }
 
-  initializeSuite() {
-    let data = dataSelector[this.props.formState.dataset]
+  async initializeSuite() {
+    let data = await dataSelector(this.props.formState.dataset)
     this.suite.setBenchmarkType(benchmarkTypeSelector(this.props.formState))
     this.suite.setCases(generateCases(data, this.props.formState))
   }
@@ -87,8 +89,8 @@ export class BenchmarkRunner extends Component {
 
           {this.startButtonShown() && (
             <button
-              onClick={() => {
-                this.initializeSuite()
+              onClick={async () => {
+                await this.initializeSuite()
                 this.suite.start()
               }}
             >

benchmarking/src/data/index.js

@@ -1,5 +1,18 @@
-import { data as large } from './large.js'
-import { data as small } from './small.js'
-import { data as bavaria } from './bavaria.js'
+export const dataSelector = async name => {
+  switch (name) {
+    case 'large':
+      return await import('./large.js').then(x => x.data)
+    case 'bavaria':
+      return await import('./bavaria.js').then(x => x.data)
+    case 'small':
+      return await import('./small.js').then(x => x.data)
+    default:
+      throw Error(`Data named "${name}" is not defined`)
+  }
+}
 
-export const dataSelector = { large, small, bavaria }
+export const datasetNames = {
+  small: 'Simple (8 points)',
+  large: 'Simplify.js example (73.752 points)',
+  bavaria: 'Bavaria (116.829 points)'
+}

benchmarking/src/simplifyMapper.js

@@ -4,7 +4,7 @@ import { simplifyWasm } from '../../lib/simplify-wasm/index.js'
 import { dataSelector } from './data/index.js'
 
 async function numberOfNodes(dataset, tol, highQual) {
-  let data = dataSelector[dataset]
+  let data = await dataSelector(dataset)
   return await simplifyWasm(data, tol, highQual).then(arr => arr.length)
 }