Backport of Migrate Benchmarks to 1.x (#444)

* remove mapbox specific access token code, rename MAPBOX_STYLES to MAPLIBRE_STYLES

* fetch maplibre-gl-js releases, adapt to existing changes in bench/versions/benchmarks.js

* use a style and tiles from maptiler instead of mapbox

* comment out broken benchmarks

* remove base.css from mapbox

* handle errored status for benchmarks

* adapt to maptiler style

* also replace mapbox raster sources with suitable replacements from maptiler

* replace another mapbox source by maptiler, no idea if this is even used as all benchmarks worked before

* fix SymbolLayout benchmark

* fix benchmark FilterEvaluate

* adapt icon-image to maptiler sprite, revert wrong text-field change

* also handle benchmarks from old mapbox releases (#420)

* Remove LayoutDDS

* Fix page title

* enable Validate and Layout benchmarks for styles

* Upload `benchmarks_generated.js` to GitHub Pages

* Copy only `benchmarks_generated.js`

* Copy `benchmarks_generated.js.map`

* Update urls for `benchmarks_generated.js`

* Adapt upload-benchmarks workflow to 1.x branch

* Compare to 1.x head instead of main

* Fix test for v1

Co-authored-by: Oliver Wipfli <oliver.wipfli@leichteralsluft.ch>

Author: xabbu42

.github/workflows/upload-benchmarks.yml

@@ -0,0 +1,52 @@
+name: Upload Benchmarks
+
+on:
+  push:
+    branches:
+      - 1.x
+    tags:
+      - v1.*
+
+jobs:
+  upload_benchmarks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 10 x64
+        uses: actions/setup-node@v2
+        with:
+          node-version: 10
+          architecture: x64
+
+      - name: Install
+        run: yarn install --frozen-lockfile
+
+      - name: Build benchmarks
+        run: yarn run build-benchmarks
+
+      - name: Copy benchmarks_generated.js
+        run: |
+          mkdir tmp
+          cp bench/versions/benchmarks_generated.js tmp
+          cp bench/versions/benchmarks_generated.js.map tmp
+
+      - name: Upload to GitHub Pages (main)
+        if: startsWith(github.ref, 'refs/heads/1.x')
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: tmp
+          destination_dir: benchmarks/1.x
+
+      - name: Get tag
+        if: startsWith(github.ref, 'refs/tags/v')
+        run: echo "TAG=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+      - name: Upload to GitHub Pages (tag)
+        if: startsWith(github.ref, 'refs/tags/v1.')
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: tmp
+          destination_dir: benchmarks/${{ env.TAG }}

bench/benchmarks/filter_evaluate.js

@@ -39,7 +39,7 @@ export default class FilterEvaluate extends Benchmark {
         for (const layer of this.layers) {
             for (const filter of layer.filters) {
                 for (const feature of layer.features) {
-                    if (typeof filter({zoom: 0}, feature) !== 'boolean') {
+                    if (typeof filter.filter({zoom: 0}, feature) !== 'boolean') {
                         assert(false, 'Expected boolean result from filter');
                     }
                 }

bench/benchmarks/hillshade_load.js

@@ -17,17 +17,17 @@ export default class HillshadeLoad extends Benchmark {
             "bearing": 0,
             "pitch": 0,
             "sources": {
-                "mapbox://mapbox.terrain-rgb": {
-                    "url": "mapbox://mapbox.terrain-rgb",
-                    "type": "raster-dem",
+                'terrain-rgb': {
+                    'url': 'https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
+                    'type': 'raster-dem',
                     "tileSize": 256
                 }
             },
             "layers": [
                 {
-                    "id": "mapbox-terrain-rgb",
+                    "id": "maplibre-terrain-rgb",
                     "type": "hillshade",
-                    "source": "mapbox://mapbox.terrain-rgb",
+                    "source": "terrain-rgb",
                     "layout": {},
                     "paint": {}
                 }

bench/benchmarks/layers.js

@@ -61,8 +61,8 @@ export class LayerCircle extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'circlelayer',
                 'type': 'circle',
-                'source': 'composite',
-                'source-layer': 'poi_label'
+                'source': 'openmaptiles',
+                'source-layer': 'poi'
             })
         });
     }
@@ -76,7 +76,7 @@ export class LayerFill extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'filllayer',
                 'type': 'fill',
-                'source': 'composite',
+                'source': 'openmaptiles',
                 'source-layer': 'building',
                 'paint': {
                     'fill-color': 'black',
@@ -95,7 +95,7 @@ export class LayerFillExtrusion extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'fillextrusionlayer',
                 'type': 'fill-extrusion',
-                'source': 'composite',
+                'source': 'openmaptiles',
                 'source-layer': 'building',
                 'paint': {
                     'fill-extrusion-height': 30
@@ -155,7 +155,7 @@ export class LayerHillshade extends LayerBenchmark {
             sources: {
                 'terrain-rgb': {
                     'type': 'raster-dem',
-                    'url': 'mapbox://mapbox.terrain-rgb'
+                    'url': 'https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
                 }
             },
             layers: generateLayers({
@@ -175,8 +175,8 @@ export class LayerLine extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'linelayer',
                 'type': 'line',
-                'source': 'composite',
-                'source-layer': 'road'
+                'source': 'openmaptiles',
+                'source-layer': 'transportation'
             })
         });
     }
@@ -189,7 +189,7 @@ export class LayerRaster extends LayerBenchmark {
         this.layerStyle = Object.assign({}, style, {
             sources: {
                 'satellite': {
-                    'url': 'mapbox://mapbox.satellite',
+                    'url': 'https://api.maptiler.com/tiles/satellite/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL',
                     'type': 'raster',
                     'tileSize': 256
                 }
@@ -211,10 +211,10 @@ export class LayerSymbol extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'symbollayer',
                 'type': 'symbol',
-                'source': 'composite',
-                'source-layer': 'poi_label',
+                'source': 'openmaptiles',
+                'source-layer': 'poi',
                 'layout': {
-                    'icon-image': 'dot-11',
+                    'icon-image': 'dot_11',
                     'text-field': '{name_en}'
                 }
             })
@@ -230,11 +230,11 @@ export class LayerSymbolWithIcons extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'symbollayer',
                 'type': 'symbol',
-                'source': 'composite',
-                'source-layer': 'poi_label',
+                'source': 'openmaptiles',
+                'source-layer': 'poi',
                 'layout': {
-                    'icon-image': 'dot-11',
-                    'text-field': ['format', ['get', 'name_en'], ['image', 'dot-11']]
+                    'icon-image': 'dot_11',
+                    'text-field': ['format', ['get', 'name_en'], ['image', 'dot_11']]
                 }
             })
         });
@@ -256,8 +256,8 @@ export class LayerSymbolWithSortKey extends LayerBenchmark {
             generated.push({
                 'id': `symbollayer${i}`,
                 'type': 'symbol',
-                'source': 'composite',
-                'source-layer': 'poi_label',
+                'source': 'openmaptiles',
+                'source-layer': 'poi',
                 'layout': {
                     'symbol-sort-key': i,
                     'text-field': '{name_en}'
@@ -276,8 +276,8 @@ export class LayerTextWithVariableAnchor extends LayerBenchmark {
             layers: generateLayers({
                 'id': 'symbollayer',
                 'type': 'symbol',
-                'source': 'composite',
-                'source-layer': 'poi_label',
+                'source': 'openmaptiles',
+                'source-layer': 'poi',
                 'layout': {
                     'text-field': 'Test Test Test',
                     'text-justify': 'auto',

bench/benchmarks/layout.js

@@ -26,7 +26,7 @@ export default class Layout extends Benchmark {
     setup(): Promise<void> {
         return fetchStyle(this.style)
             .then((styleJSON) => {
-                this.parser = new TileParser(styleJSON, 'composite');
+                this.parser = new TileParser(styleJSON, 'openmaptiles');
                 return this.parser.setup();
             })
             .then(() => {

bench/benchmarks/layout_dds.js

@@ -38,7 +38,7 @@ export default class SymbolLayout extends Layout {
                                             tileResult.iconMap,
                                             tileResult.imageAtlas.iconPositions,
                                             false,
-                                            tileResult.tileID.canonical);
+                                            tileResult.featureIndex.tileID.canonical);
                     }
                 }
             });

bench/benchmarks/symbol_layout.js

@@ -38,7 +38,7 @@ export default class WorkerTransfer extends Benchmark {
 
         return fetchStyle(this.style)
             .then((styleJSON) => {
-                this.parser = new TileParser(styleJSON, 'composite');
+                this.parser = new TileParser(styleJSON, 'openmaptiles');
                 return this.parser.setup();
             })
             .then(() => {

bench/benchmarks/worker_transfer.js

@@ -354,6 +354,7 @@ class BenchmarkStatistic extends React.Component {
         case 'running':
             return <p>Running...</p>;
         case 'error':
+        case 'errored':
             return <p>{this.props.error.message}</p>;
         default:
             return this.props.statistic(this.props);
@@ -457,7 +458,7 @@ class BenchmarksTable extends React.Component {
     render() {
         return (
             <div style={{width: 960, margin: '2em auto'}}>
-                <h1 className="space-bottom1">Mapbox GL JS Benchmarks – {
+                <h1 className="space-bottom1">MapLibre GL JS Benchmarks – {
                     this.props.finished ?
                         <span>Finished</span> :
                         <span>Running</span>}</h1>

bench/benchmarks_view.js

@@ -2,12 +2,16 @@
   "version": 8,
   "name": "Empty",
   "sources": {
-    "composite": {
-      "url": "mapbox://mapbox.mapbox-streets-v7",
+    "openmaptiles": {
+      "url": "https://api.maptiler.com/tiles/v3/tiles.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
       "type": "vector"
+    },
+    "maptiler_attribution": {
+      "type": "vector",
+      "attribution": "<a href=\"https://www.maptiler.com/copyright/\"; target=\"_blank\">© MapTiler</a> <a href=\"https://www.openstreetmap.org/copyright\"; target=\"_blank\">© OpenStreetMap contributors</a>"
     }
   },
-  "sprite": "mapbox://sprites/mapbox/light-v9",
-  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
+  "sprite": "https://api.maptiler.com/maps/streets/sprite",
+  "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=get_your_own_OpIi9ZULNHzrESv6T2vL",
   "layers": []
 }