Unable to achieve interactive plot

p-i- commented 2 years ago

Environment data

VS Code version: 1.67.2 (current)
Jupyter Extension version (available under the Extensions sidebar): Jupyter v2022.4.1021342353
Python Extension version (available under the Extensions sidebar): Python v2022.6.3
OS (Windows | Mac | Linux distro) and version: macOS 12.4 (Monterey) (Current)
Python and/or Anaconda version: 3.10.0
Type of virtual environment used (N/A | venv | virtualenv | conda | ...): python -m venv .venv
Jupyter server running: Local

Expected behaviour

Running example from https://mplcursors.readthedocs.io/en/stable/ in a fresh .ipynb

Expecting to be able to click on the plot that is output, and for it to "interactively" respond to cursor location.

Actual behaviour

It doesn't.

Steps to reproduce:

Just create a fresh .ipynb and stick the first code example from the above link in a cell:

# https://mplcursors.readthedocs.io/en/stable/
import matplotlib.pyplot as plt
import numpy as np
import mplcursors

data = np.outer(range(10), range(1, 5))

fig, ax = plt.subplots()
lines = ax.plot(data)
ax.set_title("Click somewhere on a line.\nRight-click to deselect.\n"
             "Annotations can be dragged.")

mplcursors.cursor(lines)  # or just mplcursors.cursor()

plt.show()

Now this is likely an issue with backends. Prefixing %matplotlib outputs no plot, but instead:

Using matplotlib backend: <object object at 0x112c49f20>

Please could we have instruction how to achieve interactive-plots, or an explanation of why we can't. If cannot, is it in the pipeline? What is blocking it?

I can't find any clear definitive documentation on backends, and how they apply in VSCode's Notebook editor.

I would love to be able to transition 100% from Jupyter Notebooks (operating out of web browser).

jackthepanisher commented 2 years ago

I think you will need %matplotlib widget to enable support for mpl widgets. This might require to install the ipympl package as well. I haven't looked much into the details and also haven't found much further information on the mplcursors site but JupyterLab seems to require the same to display the interactive cursors.

rchiodo commented 2 years ago

As @jackthepanisher said, you can use %matplotlib widget if you want an interactive plot. The default backend for plots is to just generate a PNG. (same as %matplotlib inline)

We have some limited capability for opening pngs in a separate viewer that you can zoom in on.

That opens a new window like so:

But of course the interactivity is not the same as you'd get with %matplotlib widget or %matplotlib qt5.

For our list of supported backends, look here: https://github.com/microsoft/vscode-jupyter/wiki/Using-%25matplotlib-widget-instead-of-%25matplotlib-notebook,tk,etc

rchiodo commented 2 years ago

This is what you should get with %matplotlib widget

p-i- commented 2 years ago

Thanks for this. The only issue now is that:

from matplotlib import pyplot as plt
plt.style.use('dark_background')

... with widget I now lose my beautiful dark-background plots.

So either I have dark plots and my eyeballs can relax, or I get interactive + eyestrain.

Is that a VSCode issue? Is it fixable?

p-i- commented 2 years ago

inline:

widget:

p-i- commented 2 years ago

It seems that %matplotlib widget resets the theme.

If I do:

%matplotlib widget
plt.style.use('dark_background')

spectra12 = plot_spectrograms()

... now I get this:

Is there any way to recolor the white? A lot of my day is taken staring at these plots, so it would be wonderful if I can do it.

rchiodo commented 2 years ago

We don't control the colors for the matplotlib widget. That's entirely in matplotlib's code. I believe the docs for the ipympl backend (what it uses when you specify %matplotlib widget) are here:

https://matplotlib.org/ipympl/

microsoft / vscode-jupyter