-
Notifications
You must be signed in to change notification settings - Fork 112
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
replaced circles with flags #135
base: master
Are you sure you want to change the base?
Conversation
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/hodcroftlab/covariants/AQGE3jGZMDqn3jw1x1QudBTV8oZt |
Hi Jamie @jamietyger, This looks cool! To make it even more awesome, could you please:
I will let Emma @emmahodcroft to review the usability/looks. For Emma: the flow for adding a new country will be like this:
Thanks for your contribution! |
Thanks for the useful feedback 😄 |
@jamesscottbrown thanks! All green, LGTM. @emmahodcroft it's ready for reviewing and merging. |
@jamesscottbrown This is super awesome!! 🙌 Thank you so much! I really, really love the way this looks. |
@jamesscottbrown & @ivan-aksamentov 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? |
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... Note we'd need to add an appropriate attribution somewhere on CoVariants if we used them. |
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: Here is how we import React components: And then we just use it like this: And that's the CSS: 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? |
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 |
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 :) |
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