fix: display and resize plots when not in a lumino context

[mariobuikhuizen]

References

no issue for this yet

Code changes

Use a combination of IntersectionObserver and ResizeObserver instead of lumino-events to control relayouts, so this works when lumino-events are not available. This is the case when embedding bqplot in an ipyvuetify-template.

The typescript version was changed to have type support for ResizeObserver.

User-facing changes

before:

before.mp4

after:

after.mp4

To reproduce:

pip install ipyvuetify ipygoldenlayout

import ipyvuetify as v
import traitlets
from ipygoldenlayout import GoldenLayout
import ipywidgets

import numpy as np
import bqplot.pyplot as plt

size = 100
scale = 100.0
np.random.seed(0)
x_data = np.arange(size)
y_data = np.cumsum(np.random.randn(size) * scale)

GoldenLayout()

def make_plot(name):
    fig = plt.figure(title=name)
    plt.plot(y_data)
    fig.layout.min_height = '100%'
    fig.layout.height = '100%'
    fig.layout.max_height = '100%'
    return fig

figs = [make_plot(f"plot{i}") for i in range(3)]

class MultiPlot(v.VuetifyTemplate):
    
    plot1 = traitlets.Any().tag(sync=True, **ipywidgets.widget_serialization)
    plot2 = traitlets.Any().tag(sync=True, **ipywidgets.widget_serialization)
    plot3 = traitlets.Any().tag(sync=True, **ipywidgets.widget_serialization)

    @traitlets.default("template")
    def _template(self):
        return """
        <template>
            <div >
                <golden-layout style="height: 400px">
                  <gl-row>
                    <gl-component title="component1">
                      <jupyter-widget :widget="plot1"></jupyter-widget>
                    </gl-component>
                    <gl-stack>
                      <gl-component title="component2">
                        <jupyter-widget :widget="plot2"></jupyter-widget>
                      </gl-component>
                      <gl-component title="component3" >
                        <jupyter-widget :widget="plot3"></jupyter-widget>  
                      </gl-component>
                    </gl-stack>
                  </gl-row>
                </golden-layout>
            </div>
        </template>
        """
    
MultiPlot(plot1=figs[0], plot2=figs[1], plot3=figs[2])

A similar PR, but without resize support: #1029

[maartenbreddels]

See also jupyter-widgets/ipywidgets#3282

[maartenbreddels]

I guess we need to limit yarn, see #1588 (comment)

[martinRenou]

LGTM! Thanks

[martinRenou]

meeseeksdev please backport to 0.12.x

[lumberbot-app]

Owee, I'm MrMeeseeks, Look at me.

There seem to be a conflict, please backport manually. Here are approximate instructions:

1. Checkout backport branch and update it.

git checkout 0.12.x
git pull

2. Cherry pick the first parent branch of the this PR on top of the older branch:

git cherry-pick -x -m1 55d660d4f9bc93f48ad3e55253d6d0e3a15df65a

3. You will likely have some merge/cherry-pick conflict here, fix them and commit:

git commit -am 'Backport PR #1531: fix: display and resize plots when not in a lumino context'

4. Push to a named branch:

git push YOURFORK 0.12.x:auto-backport-of-pr-1531-on-0.12.x

5. Create a PR against branch 0.12.x, I would have named this PR:

"Backport PR #1531 on branch 0.12.x (fix: display and resize plots when not in a lumino context)"

And apply the correct labels and milestones.

Congratulations — you did some good work! Hopefully your backport PR will be tested by the continuous integration and merged soon!

Remember to remove the Still Needs Manual Backport label once the PR gets merged.

If these instructions are inaccurate, feel free to suggest an improvement.