Fix mapbox layout layer updates

[etpinard]

• when a new source is given, remove layer, update source and add new layer in that order to avoid mapbox-gl errors.

Some more info about how mapbox layout layers are updated:

These are the available update pathways:

plotly.js/src/plots/mapbox/layers.js

Lines 35 to 51 in 27c77c1

	proto.update = function update(opts) {
	if(!this.visible) {
	// IMPORTANT: must create source before layer to not cause errors
	this.updateSource(opts);
	this.updateLayer(opts);
	} else if(this.needsNewSource(opts)) {
	// IMPORTANT: must delete layer before source to not cause errors
	this.updateLayer(opts);
	this.updateSource(opts);
	} else if(this.needsNewLayer(opts)) {
	this.updateLayer(opts);
	} else {
	this.updateStyle(opts);
	}
	this.visible = isVisible(opts);
	};

where needsNewSource is fairly dumb (but fast):

plotly.js/src/plots/mapbox/layers.js

Lines 53 to 62 in 27c77c1

	proto.needsNewSource = function(opts) {
	// for some reason changing layer to 'fill' or 'symbol'
	// w/o changing the source throws an exception in mapbox-gl 0.18 ;
	// stay safe and make new source on type changes
	return (
	this.sourceType !== opts.sourcetype ||
	this.source !== opts.source ||
	this.layerType !== opts.type
	);
	};

which explains why

// new source object on each react
function makeFigure() {
  return {
    // ...
   layout: {
      mapbox: {
        layers: [{source: {/**/}}]
      }
   }
  }
}

Plotly.react(gd, makeFigure())
Plotly.react(gd, makeFigure())

can behave differently than

// same source object
var source = {/* */}

function makeFigure() {
  return {
    // ...
   layout: {
      mapbox: {
        layers: [{source: source}]
      }
   }
  }
}

Plotly.react(gd, makeFigure())
Plotly.react(gd, makeFigure())

So perhaps we could add uid attribute in each mapbox layer so that users that create a new source object on each react call can see their map update faster. Thoughts?

cc @alexcjohnson

[etpinard]

This PR may help with #2345 (comment) but not the original #2345 problem.

[alexcjohnson]

So perhaps we could add uid attribute in each mapbox layer so that users that create a new source object on each react call can see their map update faster. Thoughts?

Perhaps we should compare source as (JSON) strings if they fail strict equality (and use _compareAsJSON so Plotly.react does this too)?

plotly.js/src/plot_api/plot_api.js

Line 2495 in 27c77c1

if(valObject._compareAsJSON && JSON.stringify(oldVal) === JSON.stringify(newVal)) continue;

Could be a bit slow if source is large, but I feel like uid is asking users to get a bit too involved in our low-level optimizations.

[etpinard]

Could be a bit slow if source is large,

That was my main concern.

[alexcjohnson]

Anyway my comment ^^ is just a 🐎 question, could be addressed now or not, up to you. The bugfix here looks great, so if you want to leave it at that 💃 !

[etpinard]

Anyway my comment ^^ is just a question, could be addressed now or not, up to you.

Great. I'll defer it if you don't mind. I'd like to investigate _compareAsJSON on some real-life geojsons before implementing it.