matplotlib / matplotlib/ipympl

automatic widget resizing for reactive design

Open
#297 3 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
Jupyter Notebook
Stars
1.7k
Forks
234
PR merge metrics
No merged PRs in 30d

Description

Describe the issue

The matplotlib widget (matplotlib widgets - ipywidgets.Output()) cannot be made reactive to browser window resizing in jupyter notebooks.

Setting the canvas style properties as recomended, i.e.
fig.canvas.layout.min_width = '400px'
fig.canvas.layout.flex='1 1 auto'
fig.canvas.layout.width = 'auto'

makes the parent widget-vbox reactive, but the actual canvas jupyter-matplotlib-canvas-container and jupyter-matplotlib-canvas-div are set to a fixed width. This width seems to only be controllably by explicitly setting a width at the time of figure creation or by manually dragging the resizing handle.
The code to resize the canvas is there in mpl_widgets.js ; It just seems not to be possible to make the canvas container react to a window size change.

Paloha describes the issue more comprehensively:
https://stackoverflow.com/questions/61272384/how-to-resize-matplotlib-figure-to-match-ipywidgets-output-size-automatically

Versions

 3.8.6 | packaged by conda-forge | (default, Dec 26 2020, 05:05:16) 
[GCC 9.3.0]
ipympl version: 0.6.3
jupyter core     : 4.7.0
jupyter-notebook : 6.2.0
qtconsole        : not installed
ipython          : 7.19.0
ipykernel        : 5.4.2
jupyter client   : 6.1.11
jupyter lab      : 2.2.9
nbconvert        : 6.0.7
ipywidgets       : 7.6.3
nbformat         : 5.1.2
traitlets        : 5.0.5
Known nbextensions:
  config dir: /opt/conda/etc/jupyter/nbconfig
    notebook section
      jupyter-datawidgets/extension  enabled 
      - Validating: OK
      jupyter-matplotlib/extension  enabled 
      - Validating: OK
      jupyter-threejs/extension  enabled 
      - Validating: OK
      jupyter_dash/main  enabled 
      - Validating: OK
      nbdime/index  enabled 
      - Validating: OK
      plotlywidget/extension  enabled 
      - Validating: OK
      voila/extension  enabled 
      - Validating: OK
      jupyter-js-widgets/extension  enabled 
      - Validating: OK
      appmode/main  enabled 
      - Validating: OK
      nbextensions_configurator/config_menu/main  enabled 
      - Validating: problems found:
        - require?  X nbextensions_configurator/config_menu/main
    tree section
      jupyter_server_proxy/tree  enabled 
      - Validating: OK
      nbextensions_configurator/tree_tab/main  enabled 
      - Validating: problems found:
        - require?  X nbextensions_configurator/tree_tab/main
JupyterLab v2.2.9
Known labextensions:
   app dir: /opt/conda/share/jupyter/lab
        @bokeh/jupyter_bokeh v2.0.4  enabled  OK
        @jupyter-voila/jupyterlab-preview v1.1.0  enabled  OK
        @jupyter-widgets/jupyterlab-manager v2.0.0  enabled  OK
        @jupyterlab/git v0.23.3  enabled  OK
        @jupyterlab/latex v2.0.1  enabled  OK
        @jupyterlab/plotly-extension v1.0.0  enabled   X
        @jupyterlab/toc v4.0.0  enabled  OK
        @jupyterlab/vega3-extension v2.0.0  enabled  OK
        jupyter-threejs v2.2.0  enabled  OK
        jupyterlab-dash v0.4.0  enabled  OK
        jupyterlab-datawidgets v7.0.0  enabled  OK
        jupyterlab-kernelspy v2.2.0  enabled  OK
        jupyterlab_variableinspector v0.1.0  enabled   X
        nbdime-jupyterlab v2.0.1  enabled  OK
        plotlywidget v4.14.3  enabled  OK

   The following extension are outdated:
        @jupyterlab/plotly-extension
        jupyterlab_variableinspector
        
   Consider running "jupyter labextension update --all" to check for updates.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in mpl_widgets.js and reproduce the issue with a matplotlib widget in an ipywidgets.Output inside a Jupyter notebook. Inspect how jupyter-matplotlib-canvas-container and jupyter-matplotlib-canvas-div receive their width during browser resizing. Done means the canvas follows its parent widget when the window changes size without manually dragging the resize handle.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, jupyter, jupyter-notebook
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.