matplotlib / matplotlib/ipympl

automatic widget resizing for reactive design

オープン
#297 コメント 3 件 リアクション 10 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

enhancement
主要言語
Jupyter Notebook
スター
1.7k
フォーク
234
PR マージ指標
30日以内にマージされた PR はありません

説明

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.

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

mpl_widgets.js から始め、Jupyter notebook 内の ipywidgets.Output にある matplotlib ウィジェットで問題を再現します。ブラウザーのリサイズ中に jupyter-matplotlib-canvas-container と jupyter-matplotlib-canvas-div がどのように width を受け取るかを調べます。ウィンドウのサイズが変わったときに、リサイズハンドルを手動でドラッグしなくても canvas が親ウィジェットに追従すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, jupyter, jupyter-notebook
領域
data-visualization, frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
42/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。