Fix and refactor the benchmark suite (mapbox#8066)

* pin react-dom to 16.3.2 to fix benchmarks build

* fix benchmarks builds accidentally switching to dev mode

* remove broken share button from benchmarks

* make benchmarks production-built for real this time; make source maps external

* update gl and rollup w/ plugins to hopefully fix build

* simplify benchmark build configs

* move Axis to benchmarks_view

* shuffle things around in benchmarks code

* revert some breaking stuff

* disable minifying bench for now

* re-enable bench minification; explicitly name benchmarks

* cut out UI logic from benchmark builds, reintroduce benchmarks_view

* centralize benchmarks rollup configs

* fix lint

* fix typo

* add forgotted watch flag

Author: mourner

.circleci/config.yml

@@ -200,8 +200,11 @@ jobs:
           name: Build
           command: BENCHMARK_VERSION="${CIRCLE_TAG:-$CIRCLE_BRANCH} $(git rev-parse --short=7 HEAD)" yarn run build-benchmarks
       - run:
-          name: Upload
+          name: Upload benchmark
           command: aws s3 cp --acl public-read --content-type application/javascript bench/versions/benchmarks_generated.js s3://mapbox-gl-js/${CIRCLE_TAG:-$CIRCLE_BRANCH}/benchmarks.js
+      - run:
+          name: Upload source maps
+          command: aws s3 cp --acl public-read --content-type application/javascript bench/versions/benchmarks_generated.js.map s3://mapbox-gl-js/${CIRCLE_TAG:-$CIRCLE_BRANCH}/benchmarks.js.map
 
   deploy-release:
     <<: *defaults

.gitignore

@@ -11,12 +11,8 @@ coverage
 flow-coverage
 .DS_Store
 .nyc_output
-bench/versions/benchmarks_generated.js
-bench/versions/benchmarks_view_generated.js
-bench/styles/benchmarks_generated.js
-bench/styles/benchmarks_view_generated.js
-debug/access_token_generated.js
-debug/style_property_editor_generated.js
+*_generated.js
+*_generated.js.map
 test/integration/**/index*.html
 test/integration/**/actual.png
 test/integration/**/actual.json

bench/benchmarks/expressions.js

@@ -71,50 +71,42 @@ class ExpressionBenchmark extends Benchmark {
     }
 }
 
-class FunctionCreate extends ExpressionBenchmark {
+export class FunctionCreate extends ExpressionBenchmark {
     bench() {
         for (const {rawValue, propertySpec} of this.data) {
             createFunction(rawValue, propertySpec);
         }
     }
 }
 
-class FunctionEvaluate extends ExpressionBenchmark {
+export class FunctionEvaluate extends ExpressionBenchmark {
     bench() {
         for (const {compiledFunction} of this.data) {
             compiledFunction.evaluate({zoom: 0});
         }
     }
 }
 
-class FunctionConvert extends ExpressionBenchmark {
+export class FunctionConvert extends ExpressionBenchmark {
     bench() {
         for (const {rawValue, propertySpec} of this.data) {
             convertFunction(rawValue, propertySpec);
         }
     }
 }
 
-class ExpressionCreate extends ExpressionBenchmark {
+export class ExpressionCreate extends ExpressionBenchmark {
     bench() {
         for (const {rawExpression, propertySpec} of this.data) {
             createPropertyExpression(rawExpression, propertySpec);
         }
     }
 }
 
-class ExpressionEvaluate extends ExpressionBenchmark {
+export class ExpressionEvaluate extends ExpressionBenchmark {
     bench() {
         for (const {compiledExpression} of this.data) {
             compiledExpression.evaluate({zoom: 0});
         }
     }
 }
-
-export default [
-    FunctionCreate,
-    FunctionConvert,
-    FunctionEvaluate,
-    ExpressionCreate,
-    ExpressionEvaluate
-];

bench/benchmarks/layers.js

@@ -15,7 +15,7 @@ function generateLayers(layer) {
     return generated;
 }
 
-class LayerBenchmark extends Benchmark {
+export class LayerBenchmark extends Benchmark {
     setup() {
         return createMap({
             zoom: 16,
@@ -37,7 +37,7 @@ class LayerBenchmark extends Benchmark {
     }
 }
 
-class LayerBackground extends LayerBenchmark {
+export class LayerBackground extends LayerBenchmark {
     constructor() {
         super();
 
@@ -50,7 +50,7 @@ class LayerBackground extends LayerBenchmark {
     }
 }
 
-class LayerCircle extends LayerBenchmark {
+export class LayerCircle extends LayerBenchmark {
     constructor() {
         super();
 
@@ -65,7 +65,7 @@ class LayerCircle extends LayerBenchmark {
     }
 }
 
-class LayerFill extends LayerBenchmark {
+export class LayerFill extends LayerBenchmark {
     constructor() {
         super();
 
@@ -84,7 +84,7 @@ class LayerFill extends LayerBenchmark {
     }
 }
 
-class LayerFillExtrusion extends LayerBenchmark {
+export class LayerFillExtrusion extends LayerBenchmark {
     constructor() {
         super();
 
@@ -102,7 +102,7 @@ class LayerFillExtrusion extends LayerBenchmark {
     }
 }
 
-class LayerHeatmap extends LayerBenchmark {
+export class LayerHeatmap extends LayerBenchmark {
     setup() {
         return fetch('/bench/data/naturalearth-land.json')
             .then(response => response.json())
@@ -144,7 +144,7 @@ class LayerHeatmap extends LayerBenchmark {
     }
 }
 
-class LayerHillshade extends LayerBenchmark {
+export class LayerHillshade extends LayerBenchmark {
     constructor() {
         super();
 
@@ -164,7 +164,7 @@ class LayerHillshade extends LayerBenchmark {
     }
 }
 
-class LayerLine extends LayerBenchmark {
+export class LayerLine extends LayerBenchmark {
     constructor() {
         super();
 
@@ -179,7 +179,7 @@ class LayerLine extends LayerBenchmark {
     }
 }
 
-class LayerRaster extends LayerBenchmark {
+export class LayerRaster extends LayerBenchmark {
     constructor() {
         super();
 
@@ -200,7 +200,7 @@ class LayerRaster extends LayerBenchmark {
     }
 }
 
-class LayerSymbol extends LayerBenchmark {
+export class LayerSymbol extends LayerBenchmark {
     constructor() {
         super();
 
@@ -218,16 +218,3 @@ class LayerSymbol extends LayerBenchmark {
         });
     }
 }
-
-
-export default [
-    LayerBackground,
-    LayerCircle,
-    LayerFill,
-    LayerFillExtrusion,
-    LayerHeatmap,
-    LayerHillshade,
-    LayerLine,
-    LayerRaster,
-    LayerSymbol
-];

bench/benchmarks/layout.js

@@ -10,16 +10,12 @@ export default class Layout extends Benchmark {
     tiles: Array<{tileID: OverscaledTileID, buffer: ArrayBuffer}>;
     parser: TileParser;
     style: string | StyleSpecification;
-    locations: Array<OverscaledTileID>;
+    tileIDs: Array<OverscaledTileID>;
 
-    constructor(style: string | StyleSpecification, locations: ?Array<OverscaledTileID>) {
+    constructor(style: string | StyleSpecification, tileIDs: ?Array<OverscaledTileID>) {
         super();
         this.style = style;
-        this.locations = locations || this.tileIDs();
-    }
-
-    tileIDs(): Array<OverscaledTileID> {
-        return [
+        this.tileIDs = tileIDs || [
             new OverscaledTileID(12, 0, 12, 655, 1583),
             new OverscaledTileID(8, 0, 8, 40, 98),
             new OverscaledTileID(4, 0, 4, 3, 6),
@@ -34,7 +30,7 @@ export default class Layout extends Benchmark {
                 return this.parser.setup();
             })
             .then(() => {
-                return Promise.all(this.locations.map(tileID => this.parser.fetchTile(tileID)));
+                return Promise.all(this.tileIDs.map(tileID => this.parser.fetchTile(tileID)));
             })
             .then((tiles) => {
                 this.tiles = tiles;

bench/benchmarks/remove_paint_state.js

@@ -68,7 +68,7 @@ class RemovePaintState extends Benchmark {
     }
 }
 
-class PropertyLevelRemove extends RemovePaintState {
+export class PropertyLevelRemove extends RemovePaintState {
     bench() {
 
         for (let i = 0; i < this.numFeatures; i += 50) {
@@ -82,7 +82,7 @@ class PropertyLevelRemove extends RemovePaintState {
     }
 }
 
-class FeatureLevelRemove extends RemovePaintState {
+export class FeatureLevelRemove extends RemovePaintState {
     bench() {
 
         for (let i = 0; i < this.numFeatures; i += 50) {
@@ -96,7 +96,7 @@ class FeatureLevelRemove extends RemovePaintState {
     }
 }
 
-class SourceLevelRemove extends RemovePaintState {
+export class SourceLevelRemove extends RemovePaintState {
     bench() {
 
         for (let i = 0; i < this.numFeatures; i += 50) {
@@ -109,9 +109,3 @@ class SourceLevelRemove extends RemovePaintState {
 
     }
 }
-
-export default [
-    PropertyLevelRemove,
-    FeatureLevelRemove,
-    SourceLevelRemove
-];