feat: use ResizeObserver for useResizeHandler

[Lexachoc]

ResizeObserver is now widely available.

This PR uses ResizeObserver to replace window.resize for useResizeHandler so that plots respond to changes in the rendered graph div's size, rather than only to document view (window).

Currently, layout changes such as toggling a sidebar can resize the plot container without triggering a window.resize event, requiring Plotly.Plots.resize() to be called manually.

With ResizeObserver, plots can respond automatically to these layout changes. The existing window.resize logic is removed since ResizeObserver is now widely available.

Closes #380

[camdecoster]

Could you please open an issue? I'd like to talk through the proposed solution before reviewing a PR to fix the issue.

[Lexachoc]

Could you please open an issue? I'd like to talk through the proposed solution before reviewing a PR to fix the issue.

Opened. Please see #380.

[Lexachoc]

In my use case, I have a collapsible sidebar with a transition animation. While the sidebar is opening or closing, the plot container changes size continuously, so ResizeObserver fires multiple times during the animation. This is expected behavior.

At the moment I haven't added any throttling, since the transition is relatively short and I haven't noticed it causing any significant issues in practice.

That said, if the performance impact of repeatedly calling Plotly.Plots.resize() is a concern, it might be worth considering some form of throttling or coalescing the resize calls (e.g., with requestAnimationFrame? So that multiple ResizeObserver callbacks within the same frame only result in a single resize).

---

Update: Throttling is not necessary because Plots.resize() has 100ms debounce by these lines.

[Lexachoc]

Based on the suggestion in #380 (comment), I removed the window.resize fallback logic.

[camdecoster]

Given the work in plotly.js, I'm calling this PR on hold.

[camdecoster]

Once your change in plotly.js is released, could you try installing that as a peer and seeing if we still need this change?

[Lexachoc]

Once your change in plotly.js is released, could you try installing that as a peer and seeing if we still need this change?

I actually already did that in my local project, and with my changes in plotly.js, I don't need to use useResizeHandler anymore.

[Lexachoc]

@camdecoster

Just to clarify my previous comment: when I said that useResizeHandler is no longer needed with my changes in plotly.js, in my local test, I had both layout.autosize and config.responsive enabled:

<Plot
  data={data}
  layout={{ autosize: true }}
  config={{ responsive: true }}
  style={{ width: '100%', height: '100%' }}
/>

However, it seems that explicitly setting layout={{ autosize: true }} is not actually necessary as long as layout.width and layout.height are left unset. plotly.js seems already defaults autosize to true in that case.

This is also true for the current useResizeHandler usage. For example, this works without explicitly setting autosize :

<Plot
  data={data}
  style={{ width: '100%', height: '100%' }}
  useResizeHandler
/>

With the new resize behavior in plotly.js changes, the minimal responsive example would be:

<Plot
  data={data}
  config={{ responsive: true }}
  style={{ width: '100%', height: '100%' }}
/>

So useResizeHandler is no longer needed here, since plotly.js will now observe changes to the graph container when config.responsive is enabled. layout={{ autosize: true }} alone does not make the plot responsive! config={{ responsive: true }} is needed for the new resize behavior.

And once my change in plotly.js is released, I think this PR can be closed.