vscode-jupyter Cannot pan zoomed image in plots viewer

Applies To

[X] Notebooks (.ipynb files)
[X] Interactive Window and/or Cell Scripts (.py files with #%% markers)

What happened?

When I render an image in the interactive window, expand the image, and attempt to pan after zooming in, the image snaps to the left. It's impossible to analyze an image up close because of this. I'm not sure if the origin of the image makes a difference, but here's the code I used to draw the image:

fig, axes = plt.subplots(1, 3, figsize=(28, 23), sharex=True, sharey=True)
ax = axes.ravel()

ax[0].imshow(cimg, cmap=plt.cm.gray, interpolation='nearest')
ax[0].autoscale(False)
ax[0].axis('off')
ax[0].set_title('Original')

ax[1].imshow(color1, cmap=plt.cm.gray)
ax[1].axis('off')
ax[1].set_title('Connected Components')

ax[2].imshow(color2, cmap=plt.cm.gray)
ax[2].axis('off')
ax[2].set_title('Clean Connected Components')


fig.tight_layout()

Here is a recording of the issue:

https://user-images.githubusercontent.com/8629347/149631780-ac29e179-71db-414d-b098-dba2035c8864.mp4

VS Code Version

Version: 1.63.2 (user setup) Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3 Date: 2021-12-15T09:40:02.816Z Electron: 13.5.2 Chromium: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Windows_NT x64 10.0.19044

Jupyter Extension Version

v2021.11.1001550889

Jupyter logs

No response

Coding Language and Runtime Version

Python 3.8.11

Language Extension Version (if applicable)

v2021.12.1559732655

Anaconda Version (if applicable)

conda 4.10.3

Running Jupyter locally or remotely?

Local

Jan 15 '22 17:01 carlsc2

Update: this issue seems to only occur when the image is rectangular - square images pan and zoom correctly.

Jan 17 '22 20:01 carlsc2

thanks for the bug, I can repro and it also opens the plotviewer off center for me.

full simple repro for reference:

import numpy as np
import matplotlib.pyplot as plt
fig, axes = plt.subplots(1, 3, figsize=(28, 23), sharex=True, sharey=True)
ax = axes.ravel()

img_rgb = np.array([[[255, 0, 0], [0, 255, 0], [0, 0, 255]],
                    [[0, 255, 0], [0, 0, 255], [255, 0, 0]]
                   ], dtype=np.uint8)

ax[0].imshow(img_rgb, cmap=plt.cm.gray, interpolation='nearest')
ax[1].imshow(img_rgb, cmap=plt.cm.gray)
ax[2].imshow(img_rgb, cmap=plt.cm.gray)

fig.tight_layout()