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>
acalcutt · Oct 14, 2021 · cb3a420 · cb3a420
1 parent 483063a
commit cb3a420
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 188 deletions.
diff --git a/.github/workflows/upload-benchmarks.yml b/.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 }}
diff --git a/bench/benchmarks/filter_evaluate.js b/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');
                     }
                 }

diff --git a/bench/benchmarks/hillshade_load.js b/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": {}
                 }

diff --git a/bench/benchmarks/layers.js b/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',

diff --git a/bench/benchmarks/layout.js b/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(() => {

diff --git a/bench/benchmarks/layout_dds.js b/bench/benchmarks/layout_dds.js
diff --git a/bench/benchmarks/symbol_layout.js b/bench/benchmarks/symbol_layout.js
@@ -38,7 +38,7 @@ export default class SymbolLayout extends Layout {
                                             tileResult.iconMap,
                                             tileResult.imageAtlas.iconPositions,
                                             false,
-                                            tileResult.tileID.canonical);
+                                            tileResult.featureIndex.tileID.canonical);
                     }
                 }
             });

diff --git a/bench/benchmarks/worker_transfer.js b/bench/benchmarks/worker_transfer.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(() => {

diff --git a/bench/benchmarks_view.js b/bench/benchmarks_view.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>

diff --git a/bench/data/empty.json b/bench/data/empty.json
@@ -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": "&lt;a href=\"https://www.maptiler.com/copyright/\"; target=\"_blank\"&gt;&amp;copy; MapTiler&lt;/a&gt; &lt;a href=\"https://www.openstreetmap.org/copyright\"; target=\"_blank\"&gt;&amp;copy; OpenStreetMap contributors&lt;/a&gt;"
     }
   },
-  "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": []
 }
diff --git a/bench/lib/access_token.js b/bench/lib/access_token.js
diff --git a/bench/lib/create_map.js b/bench/lib/create_map.js
@@ -22,7 +22,7 @@ export default function (options: any): Promise<Map> {
 
         const map = new Map(Object.assign({
             container,
-            style: 'mapbox://styles/mapbox/streets-v10'
+            style: 'https://api.maptiler.com/maps/streets/style.json?key=get_your_own_OpIi9ZULNHzrESv6T2vL'
         }, options));
 
         map