Fix for #7416: Hidden ticklabels with ticklabelposition "inside" take up plot space

[my-tien]

In this PR the text of hidden ticklabels is removed so that they don't take up space anymore.

Before the fix (in upper subplot an invisible label "100" takes up space):

After the fix (the vertical grid lines in the subplots are aligned with each other as expected):

Disclaimer

I am required to add that…

the software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and noninfringement. in no event shall the authors or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the software or the use or other dealings in the software.

[alexcjohnson]

Nice find and diagnosis @my-tien! I wonder though if there's a better way to do this - specifically, adding this whole extra loop at the end, in addition to being unnecessary vs. just doing the desired thing from the start, I worry it will cause those labels to be missing later like if you drag the axis around, either during or after the drag.

Instead, I wonder if we can avoid this extra step by instead of opacity: 0 | 1 use display: none | block here:

plotly.js/src/plots/cartesian/axes.js

Line 3654 in 8e2a5d7

thisText.style('opacity', 1); // visible

and here:

plotly.js/src/plots/cartesian/axes.js

Lines 3712 to 3714 in 8e2a5d7

	if(hideOverflow) t.style('opacity', 0); // hidden
	} else {
	t.style('opacity', 1); // visible

Because unlike opacity: 0, display: none causes getBoundingClientRect to give zero size.

[my-tien]

Hey Alex, thanks a lot for taking the time! 👍
You are absolutely right, in fact I tried to do this exact same change before, but did it incorrectly: I tried t.style('display', null), but of course it should be t.style('display', 'none'). Now I tried it correctly and it seems to work fine. I will push an update later today.

[my-tien]

@alexcjohnson Pushed new implementation with display: 'none' | null as is being done at several other locations in axes.js.