make scattermapbox first render faster

- by setting up paint and layout props during the 1st addLayer call
  and by setting up the source during the 1st addSource call,
  as opposed to having an blank 'init' and a generic 'update' step.

Author: etpinard

src/plots/mapbox/mapbox.js

@@ -458,38 +458,11 @@ proto.toImage = function() {
     return this.map.getCanvas().toDataURL();
 };
 
-// convenience wrapper to create blank GeoJSON sources
-// and avoid 'invalid GeoJSON' errors
-proto.initSource = function(idSource) {
-    var blank = {
-        type: 'geojson',
-        data: {
-            type: 'Feature',
-            geometry: {
-                type: 'Point',
-                coordinates: []
-            }
-        }
-    };
-
-    return this.map.addSource(idSource, blank);
-};
-
-// convenience wrapper to set data of GeoJSON sources
-proto.setSourceData = function(idSource, data) {
-    this.map.getSource(idSource).setData(data);
-};
-
 // convenience wrapper to create set multiple layer
 // 'layout' or 'paint options at once.
 proto.setOptions = function(id, methodName, opts) {
-    var map = this.map,
-        keys = Object.keys(opts);
-
-    for(var i = 0; i < keys.length; i++) {
-        var key = keys[i];
-
-        map[methodName](id, key, opts[key]);
+    for(var k in opts) {
+        this.map[methodName](id, k, opts[k]);
     }
 };
 

src/traces/scattermapbox/plot.js

@@ -6,56 +6,29 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-
 'use strict';
 
 var convert = require('./convert');
 
-
-function ScatterMapbox(mapbox, uid) {
-    this.mapbox = mapbox;
-    this.map = mapbox.map;
-
+function ScatterMapbox(subplot, uid) {
+    this.subplot = subplot;
     this.uid = uid;
 
-    this.idSourceFill = uid + '-source-fill';
-    this.idSourceLine = uid + '-source-line';
-    this.idSourceCircle = uid + '-source-circle';
-    this.idSourceSymbol = uid + '-source-symbol';
-
-    this.idLayerFill = uid + '-layer-fill';
-    this.idLayerLine = uid + '-layer-line';
-    this.idLayerCircle = uid + '-layer-circle';
-    this.idLayerSymbol = uid + '-layer-symbol';
-
-    this.mapbox.initSource(this.idSourceFill);
-    this.mapbox.initSource(this.idSourceLine);
-    this.mapbox.initSource(this.idSourceCircle);
-    this.mapbox.initSource(this.idSourceSymbol);
-
-    this.map.addLayer({
-        id: this.idLayerFill,
-        source: this.idSourceFill,
-        type: 'fill'
-    });
+    this.sourceIds = {
+        fill: uid + '-source-fill',
+        line: uid + '-source-line',
+        circle: uid + '-source-circle',
+        symbol: uid + '-source-symbol'
+    };
 
-    this.map.addLayer({
-        id: this.idLayerLine,
-        source: this.idSourceLine,
-        type: 'line'
-    });
-
-    this.map.addLayer({
-        id: this.idLayerCircle,
-        source: this.idSourceCircle,
-        type: 'circle'
-    });
+    this.layerIds = {
+        fill: uid + '-layer-fill',
+        line: uid + '-layer-line',
+        circle: uid + '-layer-circle',
+        symbol: uid + '-layer-symbol'
+    };
 
-    this.map.addLayer({
-        id: this.idLayerSymbol,
-        source: this.idSourceSymbol,
-        type: 'symbol'
-    });
+    this.order = ['fill', 'line', 'circle', 'symbol'];
 
     // We could merge the 'fill' source with the 'line' source and
     // the 'circle' source with the 'symbol' source if ever having
@@ -64,62 +37,74 @@ function ScatterMapbox(mapbox, uid) {
 
 var proto = ScatterMapbox.prototype;
 
-proto.update = function update(calcTrace) {
-    var mapbox = this.mapbox;
-    var opts = convert(calcTrace);
+proto.addSource = function(k, opts) {
+    this.subplot.map.addSource(this.sourceIds[k], {
+        type: 'geojson',
+        data: opts.geojson
+    });
+};
 
-    mapbox.setOptions(this.idLayerFill, 'setLayoutProperty', opts.fill.layout);
-    mapbox.setOptions(this.idLayerLine, 'setLayoutProperty', opts.line.layout);
-    mapbox.setOptions(this.idLayerCircle, 'setLayoutProperty', opts.circle.layout);
-    mapbox.setOptions(this.idLayerSymbol, 'setLayoutProperty', opts.symbol.layout);
+proto.setSourceData = function(k, opts) {
+    this.subplot.map
+        .getSource(this.sourceIds[k])
+        .setData(opts.geojson);
+};
 
-    if(isVisible(opts.fill)) {
-        mapbox.setSourceData(this.idSourceFill, opts.fill.geojson);
-        mapbox.setOptions(this.idLayerFill, 'setPaintProperty', opts.fill.paint);
-    }
+proto.addLayer = function(k, opts) {
+    this.subplot.map.addLayer({
+        type: k,
+        id: this.layerIds[k],
+        source: this.sourceIds[k],
+        layout: opts.layout,
+        paint: opts.paint
+    });
+};
 
-    if(isVisible(opts.line)) {
-        mapbox.setSourceData(this.idSourceLine, opts.line.geojson);
-        mapbox.setOptions(this.idLayerLine, 'setPaintProperty', opts.line.paint);
-    }
+proto.update = function update(calcTrace) {
+    var subplot = this.subplot;
+    var optsAll = convert(calcTrace);
 
-    if(isVisible(opts.circle)) {
-        mapbox.setSourceData(this.idSourceCircle, opts.circle.geojson);
-        mapbox.setOptions(this.idLayerCircle, 'setPaintProperty', opts.circle.paint);
-    }
+    for(var i = 0; i < this.order.length; i++) {
+        var k = this.order[i];
+        var opts = optsAll[k];
 
-    if(isVisible(opts.symbol)) {
-        mapbox.setSourceData(this.idSourceSymbol, opts.symbol.geojson);
-        mapbox.setOptions(this.idLayerSymbol, 'setPaintProperty', opts.symbol.paint);
+        subplot.setOptions(this.layerIds[k], 'setLayoutProperty', opts.layout);
+
+        if(opts.layout.visibility === 'visible') {
+            this.setSourceData(k, opts);
+            subplot.setOptions(this.layerIds[k], 'setPaintProperty', opts.paint);
+        }
     }
 
     // link ref for quick update during selections
     calcTrace[0].trace._glTrace = this;
 };
 
 proto.dispose = function dispose() {
-    var map = this.map;
-
-    map.removeLayer(this.idLayerFill);
-    map.removeLayer(this.idLayerLine);
-    map.removeLayer(this.idLayerCircle);
-    map.removeLayer(this.idLayerSymbol);
+    var map = this.subplot.map;
 
-    map.removeSource(this.idSourceFill);
-    map.removeSource(this.idSourceLine);
-    map.removeSource(this.idSourceCircle);
-    map.removeSource(this.idSourceSymbol);
+    for(var i = 0; i < this.order.length; i++) {
+        var k = this.order[i];
+        map.removeLayer(this.layerIds[k]);
+        map.removeSource(this.sourceIds[k]);
+    }
 };
 
-function isVisible(layerOpts) {
-    return layerOpts.layout.visibility === 'visible';
-}
-
-module.exports = function createScatterMapbox(mapbox, calcTrace) {
+module.exports = function createScatterMapbox(subplot, calcTrace) {
     var trace = calcTrace[0].trace;
+    var scatterMapbox = new ScatterMapbox(subplot, trace.uid);
+    var optsAll = convert(calcTrace);
+
+    for(var i = 0; i < scatterMapbox.order.length; i++) {
+        var k = scatterMapbox.order[i];
+        var opts = optsAll[k];
 
-    var scatterMapbox = new ScatterMapbox(mapbox, trace.uid);
-    scatterMapbox.update(calcTrace);
+        scatterMapbox.addSource(k, opts);
+        scatterMapbox.addLayer(k, opts);
+    }
+
+    // link ref for quick update during selections
+    calcTrace[0].trace._glTrace = scatterMapbox;
 
     return scatterMapbox;
 };