Plotly.js: smart defaults for funnel and image traces are not applied when restyling or reacting from trace with visible false

Created on 31 Oct 2019  路  5Comments  路  Source: plotly/plotly.js

Both pen are bare minimum for bug reproduction.

Funnel Defualt Behaviour:
Pen: https://codepen.io/mafar/pen/rNNYeLX?editors=0010
initialised with default options => Observe Funnel Direction

Funnel updated with Plotly.restyle:
Pen: https://codepen.io/mafar/pen/YzzEqqN?editors=0010
initialised with empty x,y options and then x,y are updated with Plotly.restyle => Observe Funnel Direction

Image:
funnel

bug

Most helpful comment

This bug is a side-effect of our input range and autorange mutations:

https://github.com/plotly/plotly.js/blob/1a3d38339dc7c9b5594f94a1b1f3625f3854d2ac/src/plots/cartesian/autorange.js#L255-L256

With this piece of logic:

https://github.com/plotly/plotly.js/blob/1a3d38339dc7c9b5594f94a1b1f3625f3854d2ac/src/plots/cartesian/axis_defaults.js#L56-L62

after the first plot call (the one with empty x and y coordinates), we have:

gd.layout.yaxis.autorange = true;
gd.layout.yaxis.range = [-1, 4];

On the second react/update call, we get

gd.layout.yaxis.autorange = true;
gd.layout.yaxis.range = [-0.5, 3.5]

That is, yaxis.autorange gets coerced to true (not 'reversed' as true got mutated in the user layout) leading a yaxis range of [3.5, 0.5].


So, adding

delete gd.layout.yaxis.autorange;
delete gd.layout.yaxis.range;

before the second react/update call is enough to work around this bug. Example: https://codepen.io/etpinard/pen/MWWxKLv?editors=0010

All 5 comments

@mafar thanks for reporting.
This is happening because the layout default was set in the newPlot call. Since the funnel had no data, it would be invisible. In the second call (i.e react) this change of data is not applied to the layout default.

FWIW Plotly.react shows the same problem as Plotly.restyle
https://codepen.io/alexcjohnson/pen/oNNodGr?editors=0010

A similar issue could be noticed with the image trace:
demo - bug
demo - correct

This bug is a side-effect of our input range and autorange mutations:

https://github.com/plotly/plotly.js/blob/1a3d38339dc7c9b5594f94a1b1f3625f3854d2ac/src/plots/cartesian/autorange.js#L255-L256

With this piece of logic:

https://github.com/plotly/plotly.js/blob/1a3d38339dc7c9b5594f94a1b1f3625f3854d2ac/src/plots/cartesian/axis_defaults.js#L56-L62

after the first plot call (the one with empty x and y coordinates), we have:

gd.layout.yaxis.autorange = true;
gd.layout.yaxis.range = [-1, 4];

On the second react/update call, we get

gd.layout.yaxis.autorange = true;
gd.layout.yaxis.range = [-0.5, 3.5]

That is, yaxis.autorange gets coerced to true (not 'reversed' as true got mutated in the user layout) leading a yaxis range of [3.5, 0.5].


So, adding

delete gd.layout.yaxis.autorange;
delete gd.layout.yaxis.range;

before the second react/update call is enough to work around this bug. Example: https://codepen.io/etpinard/pen/MWWxKLv?editors=0010

delete gd.layout.yaxis.autorange;
delete gd.layout.yaxis.range;

works . can we request an official fix please

Was this page helpful?
0 / 5 - 0 ratings