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

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

Closed
wants to merge 11 commits into from

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
Member

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
Member

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
Member

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