silx-kit / jupyterlab-h5web

A JupyterLab extension to explore and visualize HDF5 file contents. Based on https://github.com/silx-kit/h5web.
MIT License
65 stars 8 forks source link

Ordinate axis appears stretched out in Chrome #80

Closed Pepe-Marquez closed 2 years ago

Pepe-Marquez commented 2 years ago

Describe the bug

There seems to be a bug with the data displayed by h5web. The axis positions are not properly placed.

Running on jupyter lab 3.2.9 and jupyterlab-h5web 1.3.0.

The minimum and max values of the y axis (energy) are: −4.000e+0 to 1.000e+0 The minimum and max values of the x axis (delay) are: −2.000e+3 to 6.500e+3

To Reproduce

Expected behaviour

Screenshots

image

Context

Extension lists

jupyter labextension list
JupyterLab v3.2.9
/home/.../jupyter/.py37env/share/jupyter/labextensions
        jupyterlab-h5web v1.3.0 enabled OK (python, jupyterlab_h5web)
        @jupyter-widgets/jupyterlab-manager v3.0.1 enabled OK (python, jupyterlab_widgets)

jupyter serverextension list
config dir: /home/pepe_marquez/.jupyter
    jupyterlab_h5web  enabled
    - Validating...
      jupyterlab_h5web 1.3.0 OK
config dir: /home/pepe_marquez/jupyter/.py37env/etc/jupyter
    jupyterlab  enabled
    - Validating...
      jupyterlab 3.2.9 OK
    jupyterlab_h5web  enabled
    - Validating...
      jupyterlab_h5web 1.3.0 OK
loichuder commented 2 years ago

Thanks for the report !

Could you provide us with the file you were reading so that we can test it locally ourselves ?

Also, the Y axis label looks stretched. Did you zoom in the browser or have any kind of browser extension/tool that could mess up resolutions (remote desktop for example) ?

axelboc commented 2 years ago

I feel like we had a report of this exact issue a few months back, with the ordinate axis all stretched out, but couldn't reproduce. I've just tried on a fresh install of JupyterLab 3.2.9, in Chrome 98, on Ubuntu 20.04 and it seems to work fine.

@Pepe-Marquez could you please try to start Chrome with extensions disabled and locally, outside of any remote desktop environment, as Loïc suggested? If that doesn't work, please try a different browser just to confirm that the problem relates to Chrome.

loichuder commented 2 years ago

I could reproduce the problem by zooming in the Chrome browser with Ctrl+ Wheel. Enabling Large Text in the Universal Access settings of Ubuntu also triggers the problem in Chrome.

Oddly, Firefox is unaffected.

@Pepe-Marquez My guess is that you have an OS/browser option enabled that would change the size of elements in the browser. You can try to disable it to see if it fixes the issue.

In the meantime, we will investigate on why this happens on Chrome/Edge.

loichuder commented 2 years ago

Seems like Chromium does not scale well svg with width/height of 1px: https://bugs.chromium.org/p/chromium/issues/detail?id=848748 and https://bugs.chromium.org/p/chromium/issues/detail?id=1218478.

As we make use of such svg to render axes and grid, they get deformed when the elements are scaled up or down.

axelboc commented 2 years ago

Arf... With 0px, SVGs get hidden, with 1px they don't scale well... What's going to happen with 2px!? 😂 Nice find @loichuder!

loichuder commented 2 years ago

What's going to happen with 2px!?

Unfortunately the same. I think as long as the values are not high enough for the scaling to give integer numbers, it will behave oddly.

axelboc commented 2 years ago

@Pepe-Marquez the bug is now fixed and will go out in the next release 😉

Pepe-Marquez commented 2 years ago

Thanks a lot! We will keep on reporting things from the FAIRmat team. Cheers!

El El mar, 22 feb 2022 a las 15:30, Axel Bocciarelli < @.***> escribió:

@Pepe-Marquez https://github.com/Pepe-Marquez the bug is now fixed and will go out in the next release 😉

— Reply to this email directly, view it on GitHub https://github.com/silx-kit/jupyterlab-h5web/issues/80#issuecomment-1047854972, or unsubscribe https://github.com/notifications/unsubscribe-auth/API2NJYYOQ5GPKII62GDOY3U4OMZBANCNFSM5NSKAIFQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

You are receiving this because you were mentioned.Message ID: @.***>