ipympl icon indicating copy to clipboard operation
ipympl copied to clipboard

(Auto-)Resize plots that start too large

Open mueslo opened this issue 3 years ago • 7 comments

Describe the issue

Plots by default are sometimes too large, and the right side is cut off (e.g. when using the sexy Jupyter Lab side-by-side rendering or just using a small screen. Obviously you then want to resize them. However, since the resize handle is at the bottom right, it is also not visible. So the only current solution is to manually change the figure size in the code and re-run until it is visible. Not an ideal solution; sometimes you may not have direct access to the code creating the figure.

Some possible solutions:

  • add a horizontal scrollbar (probably would need to be done on the JupyterLab side)
  • introduce an auto-resize feature in the ipympl figure toolbar that will automatically resize the figure to the available width when pressed
  • auto resize all newly created figures, maybe activatable by an "%ipympl autoresize" magic method
  • make the handle location configurable
  • scale the entire figure such that all of it is always visible (probably doesn't work too well with manual resizing), just like for inline plots

The current state is rather frustrating.

Example: image

Versions

jupyterlab==3.2.8 jupyterlab-widgets==1.0.2 ipympl==0.8.7 ipywidgets==7.6.5

mueslo avatar Feb 16 '22 12:02 mueslo

One quick temporary (Jupyter Lab side) workaround is the following;

in CSS (widget.css) add

.p-Widget, .lm-Widget {
  overflow-x: auto;
}

or alternatively:

.jupyter-matplotlib {
  overflow-x: visible; /* or auto; was hidden */
}
.jupyter-widgets {
  overflow-x: hidden; /* or auto; was visible*/
}

or

.jp-OutputArea-child {
  overflow-x: auto;
}

This gives you back the horizontal scrollbar when the figure overflows the cell horizontally.

mueslo avatar Feb 16 '22 14:02 mueslo

Thanks for reporting and suggesting a fix @mueslo !

I think this has the same core cause as https://github.com/matplotlib/ipympl/issues/242

one point of clarification: does the scroll bar only show up when the widget is partially clipped, or is it always present? If the former then I like the solution of modifying the jupyter-matplolitb class - we should not be messing with jupyterlab or lumino css as that will have broad sideeffects. Do you also need to change the .jupyter-widgets class?

ianhi avatar Feb 16 '22 18:02 ianhi

With my solutions it only shows up when necessary, i.e. when the output exceeds the jupyter lab output cell size. But I have noticed that JupyterLab never displays horizontal scroll bars, so maybe it should be fixed there instead of here (and all of these fixes would require changes outside of ipympl also)

mueslo avatar Feb 16 '22 18:02 mueslo

But I have noticed that JupyterLab never displays horizontal scroll bars, so maybe it should be fixed there instead of here.

I think both are an option. It's much easier to push a new release here than in jlab so we can do a fix here and you can also open an issue there. Would you be willing to make a PR with your fix?

ianhi avatar Feb 16 '22 18:02 ianhi

If the former then I like the solution of modifying the jupyter-matplolitb class - we should not be messing with jupyterlab or lumino css as that will have broad sideeffects. Do you also need to change the .jupyter-widgets class?

Sadly it seems like modifying .jupyter-widgets is also necessary in that case, I havent found any way to make the horizontal scrollbar appear in just .jupyter-matplotlib without setting .jupyter-widgets overflow-x to hidden.

mueslo avatar Feb 17 '22 11:02 mueslo

Hello, @mueslo! Could you tell me, please, where can I find widget.css file?

VladimirIvonin avatar Aug 29 '23 14:08 VladimirIvonin