plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

layout.mapbox.layers.below attribute vs. Plotly.react performance

Open platinops opened this issue 3 years ago • 0 comments

I'm encountering issues with the performance of Plotly.react (or Plotly.addTraces) when used on a graph with multiple mapbox raster layers that are all plotted below a scattermapbox layer.

The following codepen illustrates the issue: https://codepen.io/platinops/pen/rNdxpOz

  • Case 1 adds 10 traces on a mapbox graph with 1 raster layer => no issues.
  • Case 2 adds 10 traces on a mapbox graph with 2 raster layers, both with mapbox.layers.below='traces'. Mapbox layers are properly ordered. When the 10 traces are added, browser devtools show that the tiles of both layers are downloaded several times for no apparent reason. This leads to increase CPU usage and decreased performance of my app.
  • Case 3 is the same as the previous one, but this time I referred the drawing order of one raster layer to the order. On the plus side, the tiles are not downloaded again upon adding new traces. The layers are however no longer plotted in the correct order. Plotly throws a warning "Trying to add layer with below value rail referencing a layer that does not exist or that does not yet exist.".

Are case 2 and/or case 3 a bug?

platinops avatar Jul 06 '22 18:07 platinops