matplotlib / matplotlib/ipympl

automatic widget resizing for reactive design

Offen
#297 3 Kommentare 10 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

enhancement
Vorherrschende Sprache
Jupyter Notebook
Sterne
1.7k
Forks
234
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne in mpl_widgets.js und reproduziere das Problem mit einem matplotlib-Widget in einem ipywidgets.Output innerhalb eines Jupyter-Notebooks. Untersuche, wie jupyter-matplotlib-canvas-container und jupyter-matplotlib-canvas-div während der Größenänderung des Browsers ihre Breite erhalten. Als erledigt gilt die Aufgabe, wenn der canvas seinem übergeordneten Widget folgt, sobald sich die Fenstergröße ändert, ohne den Resize-Handle manuell zu ziehen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, jupyter, jupyter-notebook
Bereich
data-visualization, frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
42/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.