Skip to content

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

Merged
martinRenou merged 2 commits into
bqplot:masterfrom
mariobuikhuizen:fix_display_and_resize_outside_lumino_context
Mar 21, 2023
Merged

fix: display and resize plots when not in a lumino context#1531
martinRenou merged 2 commits into
bqplot:masterfrom
mariobuikhuizen:fix_display_and_resize_outside_lumino_context

Conversation

@mariobuikhuizen

@mariobuikhuizen mariobuikhuizen commented Oct 10, 2022

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Member

See also jupyter-widgets/ipywidgets#3282

@mariobuikhuizen mariobuikhuizen force-pushed the fix_display_and_resize_outside_lumino_context branch from 0f05a17 to 7d4ce2e Compare March 21, 2023 09:21
@maartenbreddels

Copy link
Copy Markdown
Member

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

@mariobuikhuizen mariobuikhuizen force-pushed the fix_display_and_resize_outside_lumino_context branch from c1825bb to c45826c Compare March 21, 2023 10:05

@martinRenou martinRenou left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Thanks

@martinRenou martinRenou merged commit 55d660d into bqplot:master Mar 21, 2023
@martinRenou

Copy link
Copy Markdown
Member

meeseeksdev please backport to 0.12.x

@lumberbot-app

lumberbot-app Bot commented Mar 21, 2023

Copy link
Copy Markdown

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
  1. Cherry pick the first parent branch of the this PR on top of the older branch:
git cherry-pick -x -m1 55d660d4f9bc93f48ad3e55253d6d0e3a15df65a
  1. 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'
  1. Push to a named branch:
git push YOURFORK 0.12.x:auto-backport-of-pr-1531-on-0.12.x
  1. 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.

martinRenou pushed a commit to martinRenou/bqplot that referenced this pull request Mar 21, 2023
* fix: display and resize plots when not in a lumino context

* chore: fix CI

(cherry picked from commit 55d660d)
martinRenou pushed a commit to martinRenou/bqplot that referenced this pull request Mar 21, 2023
* fix: display and resize plots when not in a lumino context

* chore: fix CI

(cherry picked from commit 55d660d)
martinRenou pushed a commit to martinRenou/bqplot that referenced this pull request Mar 21, 2023
* fix: display and resize plots when not in a lumino context

* chore: fix CI

(cherry picked from commit 55d660d)
martinRenou pushed a commit to martinRenou/bqplot that referenced this pull request Mar 21, 2023
* fix: display and resize plots when not in a lumino context

* chore: fix CI

(cherry picked from commit 55d660d)
martinRenou added a commit that referenced this pull request Mar 21, 2023
…1593)

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

* chore: fix CI

(cherry picked from commit 55d660d)

Co-authored-by: Mario Buikhuizen <mariobuikhuizen@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants