Fix image bounds when browser window resizes

[hannahker]

Resizing the browser window results in the image not fully able to occupy the available space on zooming: see the white space on the right in the screenshot below.

My guess is that this is because the get_container_size() clientside callback only triggers on initial page load, and should also be triggered when the user resizes the window.

[cleaaum]

Putting this issue on hold for now as we could not find an elegant solution yet. Approaches/ideas we tried:

• Dash Breakpoints: Not ideal as you set certain breakpoints, and the callback only gets triggered when a width/height threshold is crossed. For our use case, we would need a breakpoint for every pixel I believe, which is not very elegant
• Dash Extension (eventListener) : buggy and doesn't actually trigger the callback. This is because of the bubbling phenomenon of certain events
• RelayoutData Property: tried using this prop as a callback input. This only triggers a callback if the data inside a plot changes, but not the figure canvas itself. ie: callback is fired on image zoom, but not on window resizing
• Hidden Div: tried to add a hidden div to the app and see if I could capture the styling change when it gets resized with the browser resizing but didn't work.
• dcc.interval: version currently implemented, which periodically checks the width and height of the browser window, and triggers a callback if this window size changed. Problem: a few milliseconds delay between the resizing of the browser and the updated figure canvas parameters.

[hannahker]

Moving this back to "Needs refinement" for now.

[hannahker]

@danton267 assigning this over to you to implement the solution you've scoped using the dash_breakpoints component.

[cleaaum]

I can go over the formula to adjust the browser window if you'd like @danton267 as it took me awhile to figure out.

[hannahker]

After discussing internally, we're de-prioritizing this ticket for the time being. @danton267 was able to get the dash_breakpoints components to fire without manually setting breakpoints, but this results in poor performance as the callback is triggered far too many times on browser resize as the event fires continually throughout the resizing action (not just on mouse up). Further investigation is needed here to determine if there's some way to resolve this elegantly.

See these (now closed) PRs for relevant WIP:

• ✨ resize image window #116
• Window resize using dash_breakpoints #117