GlChart: cursor styles overridden when dragging another element
Use case
A <gl-chart>
element inside a dashboard panel. Panels can be moved around by drag'n'drop. When dragging, the panel sets cursor style from grab
to grabbing
to indicate the action
The problem
When dragging a panel over the top of another panel which contains a GlChart, the cursor is forced back from grabbing
to default
while over the GlChart:
Screen_Recording_2023-04-21_at_11.31.35
I would expect the cursor styles defined on the parent panel component via gl-cursor-grabbing!
to be respected.
It seems the echarts component is setting an inline style which is forcing the cursor to be default
. This seems to be the way echarts sets its cursor style when hovering over chart elements.
I initially wrote some custom css to tweak this behaviour in my MR, but this was removed before merging: https://gitlab.com/gitlab-org/gitlab/-/blob/b2602570e8560a4200244213249ec388c4df1f00/ee/app/assets/stylesheets/page_bundles/analytics_dashboards.scss
Original MR discussion
@elwyn-gitlab started a discussion: (+4 comments)
Unfortunately the echarts element inside some panels has inline CSS which forces the cursor to
pointer
. Highlighted area does not getgl-cursor-grab
styles (but is still draggable):So I've overridden those inline echarts styles here when editing / dragging. Other solution not involving custom CSS might be to have a dummy element inside the panel that sits over the top of the echarts content, and style the cursor on that