feat: possible solution to description display in combobox

[Sembauke]

There are two solutions for displaying descriptions in the combo-box. Solution one is the more straightforward approach. Solution two is more comprehensive, but would require disabling the tooltip to avoid redundancy, since by the time a user clicks the information button, the tooltip has already appeared.

The code currently provides the second solution, I can apply my stash any-time.

Below the two different options:

ref #10613

[tyrasd]

Thanks! I think the "solution one" might actually be better: I tried out the branch (solution two) and it happened to me regularly that i slightly misclicked the small ℹ️ icon, thus accidentally selecting the wrong option. For touch devices it might be even more tricky to press the icon. Sure, the icon could be enlarged, but I think that the benefit of having the descriptions collapsible is not really worth the added UI complexity and visual noise.

The only downside for "solution one" would be that there are significantly fewer options visible at once when there are many values available (the parking field is with 13 options currently the one with the most tags that have a description). Maybe this could be counteracted a little by making the maximum height of the dropdown a little larger when the options have descriptions to fit roughly the same number of tags at once (e.g. assuming a single line description for each option).

PS: I also checked how it looks like when the options also have individual icons, and it looks great:

[tyrasd]

PS: Two minor nit-picks:

• Normally we simple use enter as the variable name for a d3 enter() selection.
• Consider using const (or let) instead of var in new or refactored code.

[Sembauke]

Seems like we are on an impasse.

One other idea would be to display the description outside of the combo-box itself. (I believe that is what you call it.)

So, make the information button which is displayed on the top-right toggle-able, so descriptions are updated on hover or on focus.

It will make more sense to display this particular widget (shown in the image below), above the combo-box.

At last, I think it's hard to improve any of the user experience with these three suggested solutions.

A reach would be to add an extra panel which the user can enable in the settings. Something like 'Tag Guide' or 'Extra Info'.

Let me know what you think, if it's worth continuing or we should abandon this idea completely.

[tyrasd]

Seems like we are on an impasse.
Let me know what you think, if it's worth continuing or we should abandon this idea completely.

Why do you think so? In my opinion "Solution one" should work quite well, with the minor tweak that the combobox has a slightly larger max-height CSS¹ value when there are descriptions to be displayed.

Can you try this out in the PR? 😊

Footnotes

1. should be relatively easy to implement in CSS by just adding a dedicated class to the combobox dropdown for this case ↩

[Sembauke]

Hey @tyrasd,
Sure we can try this out. I hope you like it.

I have applied my stash and updated the max combo-box height.