matplotlib / matplotlib/ipympl

Getting back toolbar on left (if set to top position) in 0.8.4?

Open
#411 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

## Describe the issue

In an earlier version of ipympl (unfortunately, haven't recorded which), if I chose the positioning of the toolbar on top, it was automatically placed on the left; I have a partial record of that here - https://stackoverflow.com/questions/69106967/jupyter-matplotlib-widget-place-toolbar-horizontally-over-plot

However, I made an update recently, and it turns out, the hacks that I have documented previously, do not work anymore - also because now the default for `fig.canvas.toolbar_visible` seems to be `fade-in-fade-out` (apparently, when I documented above hacks, the default was `visible`).

So now, if you run the last code snippet in the answer of the linked SO post above (only thing I added was version printout):

```python
%matplotlib widget
import ipympl; print("ipympl version {}".format(ipympl.__version__))

import matplotlib.pyplot as plt
from ipywidgets import widgets, Layout
from IPython.display import display, HTML

out_widget_plot = widgets.Output()
with out_widget_plot:
with plt.style.context("default"): # ggplot
fig, (ax1) = plt.subplots(1, 1)

fig.suptitle('test title', fontsize=10)
tline = ax1.plot([0,1,2], [10,20,30])
fig.tight_layout()
#fig.canvas.toolbar.button_style = 'info' # test: ok, works (but don't need it here)
#fig.canvas.toolbar.orientation = 'horizontal' # no error, but no effect either
fig.canvas.toolbar_position = 'top' # this also switches the orientation to horizontal, too
fig.canvas.header_visible = False # Gets rid of "Figure 1" on top

# the below CSS style override in Jupyter, allows the div that hosts the Matplotlib toolbar, to be placed "on top" of the div that hosts the plot:
# widget-label does the same, but for the bottom "x/y" indicator (which is why its position needs to also be controlled with margin)
sthtml = """

.jupyter-matplotlib-toolbar {
overflow: visible;
position: absolute;
z-index: 1000;
}
.widget-label {
color: var(--jp-widgets-label-color);
font-size: var(--jp-widgets-font-size);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: var(--jp-widgets-inline-height);
z-index: 1000;
margin-top: -41px;
margin-left: 58px;
}

"""

the_ui = widgets.VBox([ widgets.HTML(sthtml), widgets.HTML("Hello"), out_widget_plot, widgets.HTML("World"),])
display(the_ui)
```

... you at first do not get any toolbar menu (because due to the `fade-in-fade-out`, the menu is not shown, if the mouse cursor is not over the plot widget), then when you mouseover, you get the toolbar to the right (and there is no "hamburger" icon at first, that used to collapse/expand the rest of the toolbar; and the plot figure rendered after the two HTML "labels", "Hello" and "World"):

![image](https://user-images.githubusercontent.com/48317456/146895571-1d900979-8cf6-40c6-b77e-ebe805962fcc.png)

... whereas the same code earlier showed a toolbar on the left (and there is "hamburger" icon at first, that used to collapse/expand the rest of the toolbar, shown; and the plot being rendered *between* the two HTML "labels") :

![](https://i.stack.imgur.com/0XksL.png)

Note also that now, the figure plot widget is not shown anymore between the "Hello" and the "World" labels - whereas previously it was (which was the intention).

Is there any way I can get the old behavior back, so I can place the toolbar on the top left, and have the figure shown between other widgets (and possibly get the "hamburger" expand/collapse button back)?

## Versions

```
3.8.10 (default, Sep 28 2021, 16:10:42)
[GCC 9.3.0]
ipympl version: 0.8.4
Selected Jupyter core packages...
IPython : 7.30.1
ipykernel : 6.6.0
ipywidgets : 7.6.5
jupyter_client : 7.1.0
jupyter_core : 4.9.1
jupyter_server : 1.13.1
jupyterlab : not installed
nbclient : 0.5.9
nbconvert : 6.3.0
nbformat : 5.1.3
notebook : 6.4.6
qtconsole : 5.2.2
traitlets : 5.1.1
Known nbextensions:
config dir: /usr/local/etc/jupyter/nbconfig
notebook section
bqplot/extension enabled
- Validating: OK
ipysheet/extension enabled
- Validating: OK
ipyvolume/extension enabled
- Validating: OK
jupyter-datawidgets/extension enabled
- Validating: OK
jupyter-leaflet/extension enabled
- Validating: OK
jupyter-matplotlib/extension enabled
- Validating: OK
jupyter-threejs/extension enabled
- Validating: OK
jupyter-webrtc/extension enabled
- Validating: OK
jupyter_bokeh/extension enabled
- Validating: OK
jupyter_resource_usage/main enabled
- Validating: OK
jupyterlab-plotly/extension enabled
- Validating: OK
voila/extension enabled
- Validating: OK
jupyter-js-widgets/extension enabled
- Validating: OK
nbextensions_configurator/config_menu/main enabled
- Validating: problems found:
- require? X nbextensions_configurator/config_menu/main
contrib_nbextensions_help_item/main enabled
- Validating: OK
tree section
nbextensions_configurator/tree_tab/main enabled
- Validating: problems found:
- require? X nbextensions_configurator/tree_tab/main
usage: jupyter [-h] [--version] [--config-dir] [--data-dir] [--runtime-dir]
[--paths] [--json] [--debug]
[subcommand]

Jupyter: Interactive Computing

positional arguments:
subcommand the subcommand to launch

optional arguments:
-h, --help show this help message and exit
--version show the versions of core jupyter packages and exit
--config-dir show Jupyter config dir
--data-dir show Jupyter data dir
--runtime-dir show Jupyter runtime dir
--paths show all Jupyter paths. Add --json for machine-readable
format.
--json output paths as machine-readable json
--debug output debug information about paths

Available subcommands: bundlerextension console contrib dejavu execute kernel
kernelspec migrate nbconvert nbextension nbextensions_configurator notebook
qtconsole run server serverextension troubleshoot trust

Jupyter command `jupyter-labextension` not found.
```

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 by running the supplied reproduction with ipympl 0.8.4 and the listed Jupyter and ipywidgets versions, then compare the toolbar and widget layout behavior with the earlier example. Done means restoring top-left toolbar placement, keeping the figure between the Hello and World widgets, and determining whether the hamburger control can return.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.