replaced circles with flags

[jamietyger]

Idea: use country flags instead of colored circles in legends #88

Added emoji's to the build to replace the colored circles

web/data/countryStyles.json

Added flag emoji's for each country in dict

web/src/io/getCountryColor.ts

Added getCountryFlag function and updated default record

web/src/components/DistributionSidebar/CountryFilters.tsx

Added flag emoji to the sidebar filter

web/src/components/CountryDistribution/CountryDistributionPlotCard.tsx

Added flag emoji next to the country name on chart

Resolves #88

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/hodcroftlab/covariants/AQGE3jGZMDqn3jw1x1QudBTV8oZt
✅ Preview: https://covariants-git-fork-jamietyger-country-flags-fix-hodcroftlab.vercel.app

[ivan-aksamentov]

Hi Jamie @jamietyger,

This looks cool!

To make it even more awesome, could you please:

• extract the fallback icon into a global variable and silence the "ascii only" eslint error for this line
• fix remaining linter warnings and formatting problems (use yarn format and yarn lint commands locally, and/or see the results of DeepScan and TravisCI GitHub checks)
• revert unrelated changes to package.json and yarn.lock
• remove package-lock.json (we use yarn as a package manager)
  ?

I will let Emma @emmahodcroft to review the usability/looks.

For Emma: the flow for adding a new country will be like this:

• add an object to the array, as usual
• find the corresponding emoji flag, for example at https://emojipedia.org/search/?q=switzerland
• copy and paste the emoji into the object's f property
• if not added, the app will use the fallback "UN"/"Earth" emoji

Thanks for your contribution!

[jamietyger]

Hi @ivan-aksamentov

Thanks for the useful feedback 😄

[ivan-aksamentov]

@jamesscottbrown thanks!

All green, LGTM.

@emmahodcroft it's ready for reviewing and merging.

[emmahodcroft]

@jamesscottbrown This is super awesome!! 🙌 Thank you so much! I really, really love the way this looks.

[emmahodcroft]

@jamesscottbrown & @ivan-aksamentov
Unfortunately one small problem discovered (I previously was working off Ivan's screenshots he sent me) - it seems like Windows 10 may not actually be able to render flag emojis 😞 . This seems to be a long-standing issue, and would mean that anyone on Windows only sees letters instead:

I love the simplicity of the emoji Idea, but I'm wondering if we should switch to small icons instead, to ensure they show up across all platforms? ☹️ Alternatively if there's a way of detecting OS we could just use the picture-icons if Windows is detected ( don't know if that's easier or not).

[emmahodcroft]

For example, while it would be some work, I could go through and download the flag image files from OpenMoji: https://emojipedia.org/openmoji/. Or maybe it's possible to get them in a bulk download... I haven't looked too closely yet at options.

Edit: looks like you can download them all but only named by their weird emoji-codes 🙃 Having a look now to see if there's some kind of file that links them to a text description we could use. Seems there must be, somewhere...
Edit2: Looks like either of the openmoji files here (json or csv) would allow to link between the code and the name of the country: https://github.com/hfg-gmuend/openmoji/tree/master/data

Note we'd need to add an appropriate attribution somewhere on CoVariants if we used them.

[ivan-aksamentov]

Oh no! COME ON Windows!.. Is that in Edge?

We could use SVG icons then. No need to download images. There is a bunch of packages exist on NPM. For example, we use this package in Nextclade:
https://www.npmjs.com/package/flag-icon-css

Here is how we import React components:
https://github.com/nextstrain/nextclade/blob/f1de3c373f8b71cdc20b30e7785d57e5d8dae19b/packages/web/src/i18n/i18n.ts#L16-L25

And then we just use it like this:
https://github.com/nextstrain/nextclade/blob/f1de3c373f8b71cdc20b30e7785d57e5d8dae19b/packages/web/src/components/Layout/LanguageSwitcher.tsx#L56

And that's the CSS:
https://github.com/nextstrain/nextclade/blob/f1de3c373f8b71cdc20b30e7785d57e5d8dae19b/packages/web/src/styles/components/LanguageSwitcher.scss#L3-L19

In Nextclade the list of countries is hardcoded though. And in CoVariants it's dynamic - comes from the external source. Not sure how to organize it better, with regards to required country names. Maybe we could write a little script that generates a Typescript file with imports?

[emmahodcroft]

Yea I know, I'm pretty disappointed with Windows. Apparently Emojis are rendered by OS or something --- so these don't show up for me even in Chrome!

What you've posted above seems like it could be a good solution, though the implementation is a little beyond me. It looks like the image files use the country code for the name though - we have a list of countries already, and I'm sure I could add to this the country codes (to go into web/data/countryStyles.json) if that's what we need to figure out which icons to use. I guess once you implement it, it has flags for all countries available, it's just a matter of knowing how to call what you need?

[ivan-aksamentov]

There are also packages to resolve country codes from country names, in both python and javascript. So it we might not need to search country codes manually.

I'll let @jamietyger to experiment :)