SmartNodeSelector: Use ellipsis to shorten (too) long node paths (tags)

[rubenthoms]

In case of a deep tree structure or nodes with long names, tags showing the whole node path might get wider than the SmartNodeSelector container. In this case, the node path should be shortened by using ellipsis in front and/or after the currently selected node.

Example:

I am a very long node name:I am an even longer child node name:I am the grandchild node
| = text cursor

Tag is not selected

...longer child node name:I am the grandchild node

First node is selected

I am a very |long node name:I am an even longer ...

Second node selected

...name:I am an even| longer child node name:I am ...

Last node selected

...longer child node name:I am the| grandchild node

In addition, the max width of input fields should be limited as well. This is a trade off but it guarantees that tags are not getting larger than the SmartNodeSelector container for very long node names.

Also setting a min width for the SmartNodeSelector could be useful.

In general, a good advice would be to limit the length of node names. If this should be up to the user or should be enforced is up to discussion.

[asnyv]

I think it is a good idea with some dynamics like this :)

I don't think we should limit the length of node names (at least not force). End users might then run into issues when they try to use data that they cannot control the length of (or have to do a lot of reformatting of input data). Especially because the limit might have to be quite low if we are not to hit these issues at all.

If it is a problem that they often get too long, I think the SNS user (read: the webviz plugin maker, not end user) should rather extend the allocated width for the SNS, a min_width could maybe be a good tool to have in that situation. Not sure how well it will fit with the flex boxes?