search

nextstrain / auspice

Web app for visualizing pathogen evolution
https://docs.nextstrain.org/projects/auspice/
GNU Affero General Public License v3.0
291 stars 162 forks source link

Overlapping filter dropdown options #1453

Closed joverlee521 closed 2 years ago

joverlee521 commented 2 years ago

The options within the Filter Data dropdown overlap when the strings are too long making it impossible to read the values. The current work-around would be to use the options listed in the collapsed filters at the bottom of the page instead of the dropdown menu.

Screen Shot 2022-02-09 at 5 27 05 PM

How to reproduce
First noticed when checking the trial build for ncov that added originating & submitting labs to the filter.

Possible solution
We can add a custom styles to the dropdown menu to either

  1. Make the option height fit the content and display the full string (makes the dropdown options less uniform)
  2. Hide the overflowing text (maybe add hover to display the full string?)
jameshadfield commented 2 years ago

This has been bothering me for ages, it would be great to fix! I would go for (1), if it's easy? (as noted in your measurements panel, upgrading react-select would also be nice)

corneliusroemer commented 2 years ago

I've also noticed this and found it limiting. I didn't know or think about the workaround.

I bumped both priority and likelihood from 1 to 2 since everyone using filter will encounter this and it is quite limiting, not just messed up layout but hindering ability to use filters.

The presence of this issue also stops us from adding more useful color-bys (see https://github.com/nextstrain/ncov/pull/861#issuecomment-1034169442), because we don't want to exacerbate the bug.

There's a third option that could work in combination with 1: making the text overflow to the right. The width is quite limited at the moment. When one searches/filters, I'd think it's acceptable to make the dropdown wider than the side panel.

joverlee521 commented 2 years ago

Resolved by #1482