Fix bqplot layout issues - #131

Congrats @SylvainCorlay ! This one is a very good improvement as it allows for more many interesting layouts.

I immediately tried to play with it and have two remarks:

• there are still fig.width and fig.heigth attributes but they don't seem to be doing anything that I can see
• apparently the fig_margin property still uses absolute measures. One needs to manually tune them when the size of he graphs is increased/reduced (also axes ticks are drawn in the margin)

Thanks for the quick feedback!

there are still fig.width and fig.heigth attributes but they don't seem to be doing anything that I can see

These are deprecated attributes in the base DOMWidget class. I need to find the right way to change this.

@sccolbert I am using the unefficient resize detector based on the scroll hack here.

I recompute the viewbox of the svg based on the natural size after every resize.

When we move to jupyter-lab and phosphor only, I guess that I could get the resize event of the container from phosphor instead (assuming we use phosphor all the way down).

However, even in that case we will need to handle the css-based layouts for ipywidget's HBox and VBox. A solution would be to manually trigger the re-layout every time something that may trigger the css machinery to resize something.

Any chance we can get this merged in? Putting plots in an HBox is a step forward then the bugs one encounters now.

@SylvainCorlay be advised that the scroll hack is really expensive, and (IIRC) causes two synchronous reflows on each resize, independent of whatever work you do in addition.

@sccolbert What's the alternative?

There is not much of an alternative. Although when we switch to the phosphor layout, there is some hope that we will have resize events from phosphor.

Which was the point of my question to Chris above.

For the regular notebook, do you even need this resize hack? The notebook only has a few set responsive sizes, so you could get away only a window resize listener, and knowledge of when the notebook will resize.

Another option is doing what code mirror does, listen for window resize events (which is all you need for the notebook), and expose an API which can be called when a resize occurs independent of a window resize. It's then the responsibility of the user to call that API if the resize the bqplot div independent of a window resize.

In the case of Jupyterlab, we will want the notebook container resize.

What I was thinking of is try to have a comprehensive set of things (including notebook resize) that trigger relayout of the widget css layouts.

Okay, so I'm all for doing things better, and making use of Phosphor as soon as it is ready. In the meantime, what about merging this as is? It greatly improves the functionality of BQPlot.

It's probably more flexible to have a specific API which can be called in response to a resize, rather than rely on the resize scroll hack. On classic notebook, you know that resize can only occur in conjunction with a window resize. So, whatever puts bqplot output onto the page can detect classic notebook and setup a window resize listener. Likewise, in JLab we can do something similar, but use the Phosphor resize messages instead of the window resize event.

On classic notebook, you know that resize can only occur in conjunction with a window resize.

Resize also occurs on change of attributes of the layout trait, or change of the whole layout trait, or the ones of the siblings, parents.

So I updated the PR. Now figures have two attributes: min_aspect_ratio and max_aspect_ratio.

The ratios stand for width / height.

• If the available space is within bounds in terms of min and max aspect ratio, use the whole available space.
• If the available space is too oblong horizontally, use the client height and the width that corresponds max_aspect_ratio (maximize width under the constraints).
• If the available space is too oblong vertically, use the client width and the height that corresponds to
  min_aspect_ratio (maximize height under the constraint).

This corresponds to maximizing the area under the constraints.

Default min and max aspect ratio are both equal to 16 / 9.

@sccolbert do you think we should create a "resize" event in ipywidgets views that would

be triggered by

• resize of the notebook (window.resize in the legacy notebook)
• changes of or in the layout trait of the model.
• change in the layout attribute or parent FlexBox widget when there is one

and in the case of the Flexbox widgets, any resize event of a child triggers a resize event of the flexbox widget itself.