Parcoords: ellipsize long labels; show full text in tooltip

[kernc]

Ellipsizes labels that are too long to prevent overlapping. But always show full label text in mouse hover tooltip.

Fixes #1703.

Before

After

[monfera]

Thanks again for your work! We just had a chat and while the ellipsis approach would solve this case and indeed it's a very compact diff, the other plotly.js plots do something different, eg. the Cartesian plots rotate the labels if there's not enough room. We were planning to add it at some point but it's a good bit of work as rotation of the long texts needs to result in a vertically and horizontally smaller plot (given the same overall layout.width and layout.height) so as the long, tilted labels fit. We were thinking of this text rotation for multiple reasons:

the ellipsis still leaves part of the text unreadable while rotation can show the full text
the ellipsis effect can be approximated by the developer setting a character limit and truncating text (yes it's approximate only)
there can be up to 60 dimensions, where the distance between axes is likely very small
the iterative text shortening is slightly expensive by its nature
The ellipsis would be an improvement on the current situation but maybe a cheaper way to achieve almost the same thing (without the ellipsis) is the use of where an invisible path is in the DOM and referenced by the element, with the result that the text is rendered only till it reaches the end of the line.

@etpinard what do you think, would a simple text truncation be a suggested improvement? It needs no iteration.

[etpinard]

what do you think, would a simple text truncation be a suggested improvement?

This PR would be an improvement for sure. But, implementing a better, more plotly-esque improvement (i.e. rotating the labels) down the road would then be a breaking change.

So, I'm afraid I'll have to vote 👎 on this PR.

[monfera]

@kernc I'll need to close this specific PR for the above reason and also due to the need for using plotly-style tooltips which are quite a bit more involved than the <title> option. For now, your truncation solution seems to be able to run as Plotly.newPlot(...).then(function() { ... add-on code ...}) where the add-on code invokes your d3.selectAll('parcoords text.axisTitle').each(function(d) {..your truncation code...}). Thanks again for your constructive PR, sometimes it's hard to meet all constraints with an otherwise effective solution.

[kernc]

Right, no problem. The add-on thing is what I'm doing now, but I just though this approach might be better than the currently overlapping labels. When you get to implementing the labels properly, please consider that the assumption:

while rotation can show the full text

is incorrect. The labels in various domains can ordinarily be of arbitrary/mixed length, so if precise look and feel is of importance, some truncation or (imho) ellipsization would still likely find its place place.

[monfera]

@kernc thanks, valid point - otherwise, even with fully vertical text, we'd run out of vertical space with no room for the actual parcoords. I'll need to check what the Cartesian does with very long labels.