Automatically adjust plotly figure width

[raphaeltimbo]

Is your feature request related to a problem? Please describe.

When I change the browser width the plot for the current tab is adjusted, but when I change tabs the plots for the other tabs will not be automatically adjusted and I have to manually do that in the figure 'reset axes':

Describe the solution you'd like

Plot width is automatically adjusted when I change tabs.

Describe alternatives you've considered

-

Additional context

GIF showing the current behavior:

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[foster999]

Hi @raphaeltimbo, thanks for raising the issue.

I've had similar issues with ploty in dashboards before, so suspect that this is an issue at their end. But, I'm more than happy to take a look to make sure 😊

Do you have a live demo of this, or some code I can use to build one?

[raphaeltimbo]

Hi @foster999 ! I have added a jupyter book with the plotly figure here: https://github.com/raphaeltimbo/tabsbook Here it is using sphinx panels since it is the default for jupyter book and the behavior is the same (maybe I should have opened the issue there? I was actually a bit confused with sphinx-tabs/sphinx-panels/sphinx-inline-tabs, sorry about that.)

I have created the plots with the latest plotly version (4.14.3) calling the plotly fig.write_html() method with default arguments.

Let me know if you need more information and thanks for the response!

[foster999]

Hi @raphaeltimbo, thanks for putting the demo book up.

In both sphinx-tabs and sphinx-panel we hide the content on tabs which aren't selected. According to plotly/plotly.js#2769, plotly can't know what the size of it's parent element is when the element is hidden. Therefore, it can't resize until the element is no longer hidden. Even then, the chart doesn't refresh until you interact with it.

It seems like a rare issue and the plot does resize correctly if a user interacts with it in any way. But if this is likely to occur often in your use case, you could write some JavaScript that uses Plotly.Plots.resize() to trigger the plots to resize every time the tabs are changed.

I don't know if plotly could be adjusted to detect when a chart stops being hidden, but I'm afraid this probably wouldn't be fixed in either tabs package. Shall leave this open, in case someone suggests a workaround or others are interested!

[raphaeltimbo]

Thank you for the explanation @foster999 . I went through some related issues to the one that you linked here and found the following js code to trigger the resize when the user clicks the document:

document.addEventListener("click", function(){
    window.dispatchEvent(new Event('resize'));
  });

Feel free to close the issue and thank you again for looking into this.

[foster999]

Thanks very much for following up with the workaround, that's great to know 😊