Improve long completion UX

[mlucool]

Problem

Long autocomplete becomes unusable as users cannot tell the difference between options. For example see this screen shot:

Proposed Solution

1. Use a larger fraction of the browser width
2. If the string is still too long, elide up to the largest common prefix for example (maybe leave a few characters to make it clear):
   • ...ion/a_short
   • ...ion/b_very_very_very_long_name
   • ...ion/c_medium_name
3. If the string is still too long after 2, elide the end the end as well
   • ...ion/a_short
   • ...ion/b_very_very_very_l...
   • ...ion/c_medium_name

What do you think?

[peytondmurray]

@mlucool I've been looking into this today on the most recent commit on master to try to reproduce. It looks like the width of the floating completion widget is set to auto, and I'm not seeing the ellipsis even for completion widgets that take up the entire width of the browser window:

Is this some browser setting on my side of things? No matter how long the autocompletion field is, I've not been able to get it to show the behavior above.

[krassowski]

Could it be that you was using jupyterlab-lsp extension or something similar? I don't see icons on the initial screenshot which makes it kind of weird, as neither core lab completer nor lsp looks like this in notebooks by default.

jupyterlab-lsp does have a feature of trimming the width of completion item with an ellipsis, see https://github.com/jupyter-lsp/jupyterlab-lsp/pull/508/.

It indeed needs a fix for completions of paths (and there is already an issue about this: https://github.com/jupyter-lsp/jupyterlab-lsp/issues/787) as it trims at the end but for paths you want to see the end. This feature is however needed, as it solves the bigger problem of long completion labels occluding the view of the notebook (for lsp labels which include more details) - compare:

Before https://github.com/jupyter-lsp/jupyterlab-lsp/pull/508/:

After https://github.com/jupyter-lsp/jupyterlab-lsp/pull/508/:

It should be easily possible to conditionally change the CSS for trimming completion labels so that for completion items of type file or path, the label is trimmed at the beginning. It would however, require that kernel properly announces the type for path completions (I think there is an issue open in IPython or ipykernel about this).

[mlucool]

Ah you are right @krassowski it does seem to come from LSP (even with code completion disabled which I think controls this?). Maybe that's a separate bug and either way belongs on jupyterlab-lsp