Skip to content

Hide gridlines and ticks overlapping inside ticklabels - #5550

Merged
archmoj merged 23 commits into
masterfrom
hide-gridlines-inside-ticklabels
Apr 7, 2021
Merged

archmoj merged 23 commits into
masterfrom
hide-gridlines-inside-ticklabels

Conversation

@archmoj

@archmoj archmoj commented Mar 15, 2021

Copy link
Copy Markdown
Contributor

Addressing #5502.

@plotly/plotly_js

@archmoj archmoj added bug something broken status: reviewable labels Mar 15, 2021
@archmoj archmoj added this to the NEXT milestone Mar 15, 2021
Comment thread src/plots/cartesian/axes.js Resolved
@alexcjohnson

Copy link
Copy Markdown
Collaborator

As described in #5502 we should also be removing the ticks & tick labels at these positions, not just the gridlines. Perhaps that argues for a simpler solution where the range over which ticks are generated is reduced?

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Does this PR include the "addendum" scope from #5502 (comment) ? After speaking with the customer, it's OK for X ticklabels to slightly underhang Y inside-ticklabels, so we convened that the centerline was a better trip-point than either edge.

@archmoj

archmoj commented Mar 17, 2021

Copy link
Copy Markdown
Contributor Author

Does this PR include the "addendum" scope from #5502 (comment) ? After speaking with the customer, it's OK for X ticklabels to slightly underhang Y inside-ticklabels, so we convened that the centerline was a better trip-point than either edge.

Yes it does.

@archmoj archmoj changed the title Hide gridlines overlapping inside ticklabels Hide gridlines and ticks overlapping inside ticklabels Mar 17, 2021
@alexcjohnson

Copy link
Copy Markdown
Collaborator

I see 769c7b8 that indicates at one point we were removing zero lines that intersect these labels, but now we're not anymore... don't we want to? My understanding was that the goal here is that none of the counteraxis marks at a location beyond the beginning of these inside labels should be visible.

Also I see some labels (0 on the y axis in this example from axes_chain_scaleanchor_matches2_inside-ticklabels.png) appear on the other side of a removed label (0.5) - this seems distinct from the zero line question, as other 0 labels in the same plot are removed.
Screen Shot 2021-03-19 at 7 06 03 PM

@nicolaskruchten

Copy link
Copy Markdown
Contributor

We do want to remove the zero lines that intersect, yes

@nicolaskruchten

Copy link
Copy Markdown
Contributor

Can I get a Pen for this please?

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Two bits of behavior here look not quite right to me:

  • it's possible for a set of marks to disappear when the value goes behind the labels, but then to come back between the label and the edge of the plot. This can happen with no ticks or outside ticks, just due to the little gap between labels and the edge, but it's more prominent if you put long ticks inside.

Here the labels for -8 and 9 are hidden, as they should be:
hidden labels
But then they come back (note the labels rarely come back when they're inside, unless you have super long inside ticks, but the ticks and gridlines come back):
visible again
Seems to me the correct logic should be "past the beginning of the label bounding box" rather than "inside the label bounding box"

  • While I'm dragging, the gridlines and zerolines disappear at the right time but the ticks and tick labels behave incorrectly. Ticks that were hidden when I started dragging don't appear until I mouse up, whereas all tick labels (on both axes, the dragged and the static) appear when I start dragging, then on mouseup some are removed.

Here (while dragging) you see a label but no tick because it was hidden pre-drag:
no tick on 8
And here (still while dragging) you see both 8 and 9 labels on top of each other:
8 and 9
But then they disappear on mouse up:
correct on mouseup

Comment thread src/plots/cartesian/axes.js Resolved
@archmoj

archmoj commented Mar 30, 2021

Copy link
Copy Markdown
Contributor Author

Two bits of behavior here look not quite right to me:

  • it's possible for a set of marks to disappear when the value goes behind the labels, but then to come back between the label and the edge of the plot. This can happen with no ticks or outside ticks, just due to the little gap between labels and the edge, but it's more prominent if you put long ticks inside.

Here the labels for -8 and 9 are hidden, as they should be:
hidden labels
But then they come back (note the labels rarely come back when they're inside, unless you have super long inside ticks, but the ticks and gridlines come back):
visible again
Seems to me the correct logic should be "past the beginning of the label bounding box" rather than "inside the label bounding box"

The first bit is addressed in 1f146f5.

@archmoj

archmoj commented Mar 31, 2021

Copy link
Copy Markdown
Contributor Author
  • While I'm dragging, the gridlines and zerolines disappear at the right time but the ticks and tick labels behave incorrectly. Ticks that were hidden when I started dragging don't appear until I mouse up, whereas all tick labels (on both axes, the dragged and the static) appear when I start dragging, then on mouseup some are removed.

Good catch!
The second bit is addressed in caf3239.

@archmoj
archmoj requested a review from alexcjohnson March 31, 2021 14:12
@alexcjohnson

Copy link
Copy Markdown
Collaborator

The second bit is addressed in caf3239.

That seems to fix the ticks, but I'm still seeing some labels that should have been removed.
Screen Shot 2021-03-31 at 12 29 09 PM (2)

@archmoj

archmoj commented Apr 5, 2021

Copy link
Copy Markdown
Contributor Author

The second bit is addressed in caf3239.

That seems to fix the ticks, but I'm still seeing some labels that should have been removed.
Screen Shot 2021-03-31 at 12 29 09 PM (2)

I can't replicate this problem.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

Here's panning on one of the subplots of axes_chain_scaleanchor_matches_inside-ticklabels - the labels in the lower left corner appear (overlapping each other) as soon as I start to drag, and disappear only on mouseup
labels hide on mouseup

@archmoj

archmoj commented Apr 5, 2021

Copy link
Copy Markdown
Contributor Author

Here's panning on one of the subplots of axes_chain_scaleanchor_matches_inside-ticklabels - the labels in the lower left corner appear (overlapping each other) as soon as I start to drag, and disappear only on mouseup
labels hide on mouseup

I am not 100% sure if we could easily fix that at the moment considering complexity of displaying and hiding of inside ticklabels.
But we could certainly try it on a separate PR, IMHO.

@alexcjohnson

Copy link
Copy Markdown
Collaborator

@archmoj give it a try in this PR - it's an edge case but we really don't want to be introducing a known bug in one PR just to remove it in another.

@archmoj

archmoj commented Apr 6, 2021

Copy link
Copy Markdown
Contributor Author

@archmoj give it a try in this PR - it's an edge case but we really don't want to be introducing a known bug in one PR just to remove it in another.

Good call. Addressed in e683b07.

@alexcjohnson alexcjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it 💃

@archmoj
archmoj merged commit e182686 into master Apr 7, 2021
@archmoj
archmoj deleted the hide-gridlines-inside-ticklabels branch April 7, 2021 02:50
Comment thread src/plots/cartesian/axes.js Resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug something broken

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants