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

Plotly.react resets context and breaks autosize

Open nantunes opened this issue 5 years ago • 5 comments

When calling Plotly.react to update the chart it decides to completely reset the context if the config parameter is present (https://github.com/plotly/plotly.js/blob/master/src/plot_api/plot_api.js#L2698-L2706).

This breaks the autosize feature since the _hasZeroHeight state was moved to the context (in https://github.com/plotly/plotly.js/pull/3090/files#diff-2941ab69a12080c0633ff4ac8ea3aa83R493-R494).

The context._hasZeroHeight is always reset to undefined, but in the second render the gd.clientHeight is no longer zero. So the height of the svg-container div will set to 100%, causing all the plot container to have no height.

Then in the third render gd.clientHeight will be zero again, so the svg-container div gets its height properly defined.

And so on...

An workaround is to call Plotly.react without the config (if nothing in it changed), but when using react-plotly.js that isn't an option, as it always call Plotly.react using the full signature (https://github.com/plotly/react-plotly.js/blob/master/src/factory.js#L80-L85).

See https://codepen.io/nantunes/pen/abvXgbd to reproduce. Click the "Change data" button to toggle the data and call Plotly.react. Notice that the red container div shrinks (or expands) its height.

nantunes avatar May 22 '20 15:05 nantunes

The context reset is there from the very beginning of the Plotly.react function (https://github.com/plotly/plotly.js/commit/54b69696868cb04d65ae636d6e0b5475299c602a#diff-2941ab69a12080c0633ff4ac8ea3aa83R2250). Any idea why?

That only seems to cause setPlotContext to re-extend from dfltConfig and recalculate the _baseUrl (not config related).

nantunes avatar May 22 '20 15:05 nantunes

Is this repository watched? Is there a better place to open Plotly issues? It's been more than 5 months...

nantunes avatar Nov 03 '20 11:11 nantunes

Yes, we're watching, just haven't had a chance to look into this issue yet. Sounds like we may need to copy some of this internal state from the old context when there is one. The challenging part will be figuring out what tests to write to ensure this behaves correctly in all relevant cases, but @nantunes if you'd like to speed this along by opening a PR we can certainly help with that part!

alexcjohnson avatar Nov 03 '20 14:11 alexcjohnson

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for several years, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Thanks for your help - @gvwilson

gvwilson avatar Jun 24 '24 13:06 gvwilson

Thanks for the update, @gvwilson!

We are using plotly.js in our Python UI library NiceGUI and still need to workaround this issue by switching between Plotly.react and Plotly.newPlot to avoid layout problems: https://github.com/zauberzeug/nicegui/blob/4506b739b5d65a4ae7854ee998788880369eef4c/nicegui/elements/plotly.vue#L21-L27

Therefore we are still looking forward to a solution to this issue. 🤞🏻

falkoschindler avatar Jun 26 '24 09:06 falkoschindler