search

microsoft / vscode-jupyter

VS Code Jupyter extension
https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter
MIT License
1.27k stars 280 forks source link

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

Open alanyoungCN opened 2 years ago

alanyoungCN commented 2 years ago

Environment data

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. Mar-14-2022 11-10-02

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 commented 2 years ago

Please cc, @rchiodo @IanMatthewHuff @ericsnowcurrently đź‘€

alanyoungCN commented 2 years ago

I found that there is an issue in 2020 talking about that, which says using AutoSizer has been outdated. https://github.com/chrvadala/react-svg-pan-zoom/issues/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 commented 2 years ago

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 commented 2 years ago

@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: issue

which you can see in the vs code like this image

Then you can expand the image and it looks like: image

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

At this time, when you start dragging, the bug happens: Mar-15-2022 10-12-55

zjjxwhh commented 1 month ago

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

gif

Environment data: