search

nextstrain / auspice

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

Upgrade `react-select` package #1467

Closed joverlee521 closed 2 years ago

joverlee521 commented 2 years ago

We are still using v1 of react-select which is no longer maintained. We should upgrade the package to use new features that have been added, such as option groups. The latest version is v5, but v2 was a complete rewrite so we should follow their v2 upgrade guide to make the necessary changes.

According to @jameshadfield:

Might be quite a bit of work as we use a lot of <Select> elements.

jameshadfield commented 2 years ago

From memory (I can't find the branch / stash anymore) getting styled components to work with react select was difficult. That was a long time ago, so things may have improved.

jameshadfield commented 2 years ago

This may also fix #1453 out of the box?

joverlee521 commented 2 years ago

Since we are upgrading, I thought we should just upgrade to the latest version (5.2.2). Starting with v5, they have converted to TypeScript and they explicitly state that they have dropped support for Internet Explorer 11. I don't think this is a deal breaker for us, but wanted to mention here in case anyone else thinks we should stick with v4.

joverlee521 commented 2 years ago

Turns out the the upgrade from v1 is pretty straightforward (see upgrade-react-select branch). The bigger hurdle is actually replacing react-virtualized-select since it is built on top of react-select v1 and also no longer maintained.

A few options forward:

  1. Use another package with virtualized react-select components, maybe react-select-virtualized?
  2. Use react-virtualized to build our own custom MenuList to use with Select. There are examples of this in https://github.com/JedWatson/react-select/issues/3128 (We can then use CellMeasurer from react-virtualized to make the options height dynamic.)
  3. We can explore other virtualization packages that come with built-in dynamic heights, such as react-virtual or react-virtuoso

Option 1 seems like the easiest change now, but options 2 & 3 would allow us to tackle #1453.

jameshadfield commented 2 years ago

P.S. f9944eb7eda30c5922d229fafe2752f21fa507b4 is the commit which introduced react-virtualized-select. I would suggest options 2 or 3, so that we can address #1453.