Skip to content

fix(interactions): stop axis line from cutting off cursor line on hover#1438

Closed
rshen91 wants to merge 11 commits intoelastic:masterfrom
rshen91:cursor-line
Closed

fix(interactions): stop axis line from cutting off cursor line on hover#1438
rshen91 wants to merge 11 commits intoelastic:masterfrom
rshen91:cursor-line

Conversation

@rshen91
Copy link
Contributor

@rshen91 rshen91 commented Oct 20, 2021

Summary

The crosshair does not compute the zIndex and will now render on top of the XYChart to avoid cases where the cursor is hidden over the canvas element of the chart.

Details

This PR removes calculating the zIndex for the crosshair component. I had some issues reproducing this bug like in https://codesandbox.io/s/upbeat-shirley-rjqtm?file=/src/App.tsx:0-1090 but created a story within Grids with a similar story showing the axis line does not overlap and cover the theme vertical line, the red line.

Issues

Closes #1283

Checklist

  • The proper chart type label has been added (e.g. :xy, :partition)
  • The proper feature labels have been added (e.g. :interactions, :axis)
  • All related issues have been linked (i.e. closes #123, fixes #123)

@rshen91 rshen91 added the kibana cross issue Has a Kibana issue counterpart label Oct 25, 2021
@rshen91 rshen91 marked this pull request as ready for review October 25, 2021 13:41
@rshen91 rshen91 marked this pull request as draft October 26, 2021 15:34
@rshen91
Copy link
Contributor Author

rshen91 commented Oct 27, 2021

@markov00 I think removing the zIndex computations from the crosshairs component was fine and is already done with this PR. However the issue I'm facing now is that the highlighter incorrectly works with bar charts if the crosshair component is rendered below the XYChart component:

 <XYChart forwardCanvasRef={forwardCanvasRef} />
 <Crosshair />
Oct-27-2021.09-02-00.mp4

However switching the ordering of the components is great in terms of the axis covering the crosshair:

Oct-27-2021.09-02-42.mp4

I was hoping to conditionally render the components based on the type of cartesian chart, does this logically make sense?

@markov00
Copy link
Collaborator

Hey Rachel, I saw the issue you have described, it probably need a different way of handling the problem, let me think about it and I will be back with a possible different solution

@markov00
Copy link
Collaborator

hey @rshen91 I've merged my PR this morning with the initial part of the fix.
There is still an open issue where the cursor is hidden behind the gridline in Kibana.

@markov00
Copy link
Collaborator

markov00 commented Nov 2, 2021

I think we can close this as the fix was implemented in the following PRs: #1447 #1453 and #1452
The zIndex change root cause still valid in Kibana: I really like to know why that value was correctly computed until 7.15

@rshen91 rshen91 closed this Nov 2, 2021
@rshen91
Copy link
Contributor Author

rshen91 commented Nov 2, 2021

Duplicate 1438

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

kibana cross issue Has a Kibana issue counterpart

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Axis line covers cursor line

2 participants