Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll bars for legend widgets won't move coherently with displayed data #10070

Closed
1 task done
ale-cristofori opened this issue Mar 14, 2024 · 5 comments · Fixed by #10329 or #10332
Closed
1 task done

Scroll bars for legend widgets won't move coherently with displayed data #10070

ale-cristofori opened this issue Mar 14, 2024 · 5 comments · Fixed by #10329 or #10332

Comments

@ale-cristofori
Copy link
Contributor

ale-cristofori commented Mar 14, 2024

Description

The scroll bar appearing on the right part of the legend widget, and potentially in all widgets, if moved with the mouse wheel will jump to the following results, skipping the display of some of the legend items. The scrolling is not 'smooth' enough to allow the display of all legend items and some of them are skipped from display.

How to reproduce

This issue is reproducible when there is a piece of data with a lot of unique values to be included in the legend of the widget, for example the pie chart.

  • Select a data that has the above characteristics and create a pie chart widget for it
  • Include a legend
  • Notice how, when the window that include the chart is under a certain size, the scroll bar that scrolls through the legend will 'jump' (using the mouse scroll wheel) without scrolling evenly. This hides some legend items in the legend through scrolling.
recording_1.mp4

Expected Result
The legend, scrolling with the mouse wheel, should scroll through evenly without jumping

Current Result
The legend, scrolling with the mouse wheel, the scroll bar that scrolls through the legend will 'jump' (using the mouse scroll wheel) without scrolling evenly. This hides some legend items in the legend through scrolling.

  • Not browser related
Browser info (use this site: https://www.whatsmybrowser.org/ for non expert users)
Browser Affected Version
Internet Explorer
Edge
Chrome
Firefox
Safari

Other useful information

The behaviour is something that has to do with plotly. As signalled in the below issues
plotly/plotly.js#6737
https://community.plotly.com/t/scrollbar-sensitivity-in-plot-legend-skips-curves/78866

@dsuren1
Copy link
Contributor

dsuren1 commented May 10, 2024

@ale-cristofori Thanks for this export of the test data but unfortunately, the services required by these layers are not accessible by me

@tdipisa Is it possible to add this layer to the existing csw?

or @ale-cristofori @tdipisa maybe point me to a map or a layer in MS which can produce many legends on a chart ?

@tdipisa
Copy link
Member

tdipisa commented May 10, 2024

@ale-cristofori Thanks for this export of the test data but unfortunately, the services required by these layers are not accessible by me

@tdipisa Is it possible to add this layer to the existing csw?

or @ale-cristofori @tdipisa maybe point me to a map or a layer in MS which can produce many legends on a chart ?

@dsuren1 use this map which contains the sample dataset you need.

@dsuren1
Copy link
Contributor

dsuren1 commented May 14, 2024

Investigation outcome

As reported in the description, this is an open issue in plotly.js and we do not have a set timeline for its resolution yet.

However, we can handle this case in MS on chart initialization by adding an event listener of the wheel event in capture mode and dispatch a modified event with new deltaY value, such that the sensitivity of the wheel event is exhibited in a controlled manner

Demo with a rudimentary fix applied

legend_mouse_wheel.mp4

Suggestion

Instead of adding a predefined sensitivity value, we can also expose this as a configurable property for the chart. ex: legendMouseWheelSensitivity. Your thoughts @tdipisa ?

@tdipisa tdipisa assigned dsuren1 and unassigned dsuren1 May 14, 2024
@tdipisa
Copy link
Member

tdipisa commented May 14, 2024

Thank you @dsuren1. I would like you to share the above with other core team members (like @allyoucanmap or @offtherailz) since I think it is something probably quick but that we should handle carefully if we have to implement a kind of workaround in MS.

@dsuren1
Copy link
Contributor

dsuren1 commented May 15, 2024

@allyoucanmap
As per our discussion,
I tested with multiple browsers (Chrome, Firefox, Opera), and found that normalizing the deltaY property results in consistent scrolling behavior across all of them. It appears that a fixed value of deltaY: ±0.30 can effectively normalize scrolling behavior, with negative and positive deltaY values corresponding to upward and downward scrolling, respectively.

Warning

During this I observed an existing behavior with Safari where the mouse wheel scroll doesn't work on legend in Chart.

dsuren1 added a commit to dsuren1/MapStore2 that referenced this issue May 16, 2024
allyoucanmap pushed a commit that referenced this issue May 16, 2024
@ElenaGallo ElenaGallo self-assigned this May 16, 2024
@ElenaGallo ElenaGallo added the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label May 16, 2024
dsuren1 added a commit to dsuren1/MapStore2 that referenced this issue May 16, 2024
…e coherently with displayed data (geosolutions-it#10329)

(cherry picked from commit 3234b9a)
dsuren1 added a commit that referenced this issue May 16, 2024
@tdipisa tdipisa removed the BackportNeeded Commits provided for an issue need to be backported to the milestone's stable branch label May 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment