Expand Image gets stuck when showing a wide but short image.

[alanyoungCN]

Environment data

• VS Code version: 1.65.2 (Universal)
• Jupyter Extension version: v2022.2.1030672458
• Python Extension version: v2022.2.1924087327
• OS: MacOS
• Python version: 3.9
• Type of virtual environment used: virtualenv
• Jupyter server running: Local

Expected behaviour

The expand image can zoom and drag smoothly.

Actual behaviour / Steps to reproduce:

After I draw a very wide but short image to show a time series and click the Expand Image button, the preview will get stuck when I enlarge it and drag from right to left.
This is the full image and I can drag it well.

But when I enlarge the image, I can't see the right part anyway.

The screenshot above is the rightest I can drag.

However, the left blank becomes more.

I record a gif to show this issue.

the possible solution

I find that there is a <autosizer> outside the <ReactSVGPanZoom> in svgViewer.tsx(https://github.com/microsoft/vscode-jupyter/blob/main/src/datascience-ui/react-common/svgViewer.tsx), I think it's useless or at least the key, maybe we can remove it?

[alanyoungCN]

Please cc, @rchiodo @IanMatthewHuff @ericsnowcurrently 👀

[alanyoungCN]

I found that there is an issue in 2020 talking about that, which says using AutoSizer has been outdated.
chrvadala/react-svg-pan-zoom#188

Then the author update the doc(https://github.com/chrvadala/react-svg-pan-zoom/blob/main/docs/autosizer-viewer.md) to tell how to use autosizer-viewer in a new way.

I have tried editing the svgViewer.tsx, but failed due to my poor TypeScript.

[DonJayamanne]

Thanks for filing this issue, I've been unable to repro this issue at my end, however I can see the issue from the recording. thanks.
Is it possible to save the image you have and upload that here, so we can use that to replicate this issue. thanks

[alanyoungCN]

@DonJayamanne
I generate a normal distribution data for show. You can use the code to repro it.

import numpy as np
import matplotlib.pyplot as plt

data = np.random.normal(0, 1, (900, 1))

fig, ax = plt.subplots(1, 1)
fig.dpi = 500
fig.set_size_inches(20, 1)

ax.plot(data)

This code will plot the following figure:

which you can see in the vs code like this

Then you can expand the image and it looks like:

Then you zoom it with wheel to the righter part, e.g. 800 around:

At this time, when you start dragging, the bug happens:

[zjjxwhh]

I encountered the same issue, which can be reproduced with the code provided by the original poster. Is it possible to fix it in the future? Thanks! @DonJayamanne

Environment data:

• VS Code version: 1.91.0 (system setup)
• Jupyter Extension version: v2024.6.0
• Jupyter Notebook Renderers Extension version: v1.0.18
• Python Extension version: v2024.10.0
• OS: Windows 10 Enterprise 22H2 (19045.4239)
• Python version: 3.11.9
• Type of virtual environment used: system
• Jupyter server running: Local