hodcroftlab/covariants

Real-time updates and information about key SARS-CoV-2 variants, plus the scripts that generate this information.

CoVariants

SARS-CoV-2 Mutations and Variants of Interest

by Emma B. Hodcroft

Institute of Social and Preventive Medicine University of Bern, Bern, Switzerland & SIB Swiss Insitute of Bioinformatics, Switzerland

---

---

📜️ Citation

Emma B. Hodcroft. 2021. "CoVariants: SARS-CoV-2 Mutations and Variants of Interest." https://covariants.org/

---

---

🤝 Contributing

The code used to generate data seen on CoVariants.org can be found in this repository, mostly in the scripts/ folder, and the code for the web application is in web/.

See Contributors Guide for more details.

📎 Terms of use

If you use this resource, or its derivatives, including data, code, screenshots an other, please do ensure you add credit in form of citation and/or link back to https://covariants.org

This work is enabled by data made available on GISAID. See the GISAID Terms of Use for more information about how this data can be used. Note that under the terms of use, data on GISAID cannot be redistributed.

This works is closely related to the Nextstrain project and uses Nexstrain builds and resulting data.

⚖️ License

Code and work: GNU AFFERO GENERAL PUBLIC LICENSE

CoVariants
Copyright 2020-2021 Emma Hodcroft

Screenshots: CC-BY-4.0

---

✨ Contributors

CoVariants is maintained by

Emma B. Hodcroft

Institute of Social and Preventive Medicine
University of Bern, Bern, Switzerland
& SIB Swiss Insitute of Bioinformatics, Switzerland

We are thankful to all our contributors, no matter how they contribute: in ideas, science, code, documentation or otherwise. Thanks goes to these wonderful people (emoji key):

Ivan Aksamentov 💻 🚇 📖 🎨	Richard Neher 💻 🔣 🖋 🤔	Trevor Bedford 🤔	james hadfield 💻 🎨 📖 🤔	Moira Zuber 💻 🔣	James Scott-Brown 🤔 💻 🎨
Theo Sanderson 🖋 💻 📖	babarlelephant 🖋	Jesse Bloom 🖋	Cornelius Roemer 🖋	acx01b 🖋	rasenschachmatt 🖋
Richard Goater 💻 🎨	Rajiv Shah 🖋

This project follows the all-contributors specification. Contributions of any kind welcome!

---

🎁 Sponsors

We are grateful to Vercel for sponsoring our web application builds

covariants's Issues

Sampling bias (S dropout and others)

Hi, there are some chances that this website will be analyzed by a lot of non-experts, so maybe add a disclaimer about identified biases:

• S dropout targeted sequencing causing a huge increase in 69- variants in January (501Y, 439K, 484).

Optional:

• The large Y453F peak in Denmark this summer was (partly?) caused by sampling targeted on mink farms.
• Inside a country some regions are more sampled than others at different times and this is not always correlated to the number of cases in each region (as an exception UK and Denmark are providing some data on their sampling method)
• ?

The Europe biased analysis is mentioned in Home.md.

Add sharing buttons (Twitter etc.) to share the current page

To facilitate the discussion of variants on social media, we might add sharing buttons, such that it's easier to post on Twitter and other platforms with a link to a specific page.

Organize "Defining mutations" section

The "Defining mutations" section on variants' pages does not use space very efficiently, especially on mobile. The user experience is suboptimal, due to very long scrolls.

We might reorganize this section in a few different ways:

• by grouping mutations per gene (only works for aminoacid mutations, and not nucleotide mutations)
• by moving this section after content text (might not reflect the importance of this information)
• by making this section collapsible (might not reflect the importance of this information)
• by making mutation badges to scale in response to screen size
• by removing the badges and use normal text instead

Needs some discussion.

Current looks on iPhone X:

Current looks on 1080p:

minor: "Propose changes to this section" for Variants: githubUrl needs ':' --> '.'

First, beautiful work on this, Emma and Ivan! I just noticed a minor thing. On variant pages like https://covariants.org/variants/S.N501 , the "Propose changes to this section" link is broken because it uses the variant name with a colon (S:501, 404 not found) instead of a dot (S.501).

A quick look at the nice clean code implicates this line (and here my knowledge of your system ends so I have no suggestion for how to fix it, but I know you will!).

Wish list for near future

Wish list:

• (Emma & Ivan) Display table counts of sequences (information currently in TSV files) on each variant page
  • Related to ^ Figure out how to track the changes in table from run to run to show what changed
• (Ivan) Embed Nextstrain builds if possible on each variant page
• (Emma, consult with Ivan) Break down variants in plotting to show more exact variants (ex: 501Y.V1 and 501Y.V2 rather than S:N501)
• (Ivan) URL remembering
• (Ivan & Emma for data format?) Switch between Smooth & Unsmoothed for per Cluster graphs
• (Emma) CoVariants logo
• Mutations in tables by coloring (see https://neherlab.slack.com/archives/C01H7P3TY1M/p1610501457071700)
• (Emma) Add all mutations, not just defining ones (if possible - and up to cluster base)?
• (Emma) Better refine how many countries plot by default on 'Per Variant' page
• (Emma & Ivan) Emma: Split out all mutation information into separate pages & port into appropriate variant pages. Ivan: Figure out if we can link to this info in NextClade so people can learn about a mutation their sequence has! (idea link: https://neherlab.slack.com/archives/C01H7P3TY1M/p1611650548018600)

Improve user experience of tooltip sorting

Followup of #28 #77 #99

Currently per-variant page contains a dropdown and a checkbox which both control the sorting options of the plot tooltips.

This is a cumbersome design choice from my side. I now think that a better user experience would be to have only dropdown with 4 options: {freq, coutry} x {ascending, descending}, similar to what many shopping websites have for example.

Related: #105

Toggle smoothed/original data

Add a flip toggle for switching plots between smoothed and original data.

Consider making `others` area grey not white in per-country plots

Small suggestion. In my view the per-country area plots are a bit hard to read visually because it's not clear that the white space represents also represents SARS-CoV2 cases (which makes it seem like it's not a plot of proportions). I think making the "other" slice appear in grey so it is clearly a defined proportion might help with this.

Render tables

Originally, repo had markdown tables.

We may want to render these tables in the app. The tsv files are in the cluster_tables/

We need top figure out where to put these tables.

Make Similar 'Badges' for builds as we have for mutations

There are currently very cool badges to allow mutations to be shown in colour:

It would be nice to have way of making a 'variant badge' that lets us distinguish between referring to a mutation and referring to a Variant (etc) on the site. For example, S:H69- is both a mutation and the name of a Variant button. When we want to refer to it with a link to the Variant page, it might be nice to have some visual distinction that it's clickable and that it's referring to the page, rather than just a one-off mutation.

(Might be superseded if we come up with a better way to name some of the variants)

Add more values (columns) to tooltips

We might want to add more helpful information to tooltips.

For example, we currently only show frequencies in country plots. But we can also show current and totals, by adding 2 more columns.

Should be approved by a scientist

S.N501 custom build: mask S.N501 just when building tree?

Thank you for producing this totally awesome resource. I know you're insanely busy so I don't expect a response, but just in case this is easily addressed -- in the custom build for S.N501 tree, the S:N501Y/A23063T mutation appears to date to 2020-01-28, before the split between 20B and 20C, which would not be a good thing to take literally. I imagine that's due to the sampling (mostly samples with S:N501 variants, although the actual frequency of those variants is <1% globally).

Is there an easy way (or at least straightforward, or delegatable :) ) to mask S:N501 variants just when building the tree, and then to add them back in after the tree is built, to avoid 'warping' the tree like that? If not, nm, better things to do. :)

Detection of E484K mutation in B.1.1.7 VOC 202012/01

Extract:

The COG-UK dataset (total sequences 214,159) was analysed on 26/01/2021. The spike
protein mutation E484K (found in VOC 202012/02 B1.351 and VOC 202101/02 P1) has
been detected in 11 B1.1.7 sequences. Preliminary information suggests more than one
acquisition event

(The 11 cases are split in two different cities quite far away from each other - Liverpool and Bristol).

Link to paper: https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/957504/Variant_of_Concern_VOC_202012_01_Technical_Briefing_5_England.pdf

Wanted to suggest adding the UK variant to the https://covariants.org/variants/S.E484

Add sorting controls to per-country page too

Followup of #28 #77 #99

Currently, the "per-variant" page contains a dropdown and a checkbox which both control the sorting options of the plot tooltips.

We might also add the same functionality to the "per-country" page, for symmetry.

Related: #104

Add Makefile targets for data curation

We might want to simplify running data scripts in order to facilitate the contributions.

One way will be to add more targets to the Makefile:
https://github.com/hodcroftlab/covariants/blob/master/Makefile

There are targets already for updating the web app, but the prior data generation steps are missing.

We might consider a possibility of a single-command step (make update) for daily updates and further automation of it (#21)

We would also describe these in the contributor's guide:
#19

Idea: toggle tooltip sort: by name, by value

Currently plot tooltips show tables and rows are always sorted by values of their numeric columns.

This might also not be convenient if there are more values (columns) added later.

We might add to the plot pages a toggle or a dropdown to chose sorting criteria: by country or variant name, or by (one of the) value(s).

Approval needed

Add page-specific social media images

Add specific social media images to specific pages.

See the instructions in PR #41 for how to do this!

Remember country/variant filter state in the URL params

We might synchronize the filter checkboxes on the sidebar of plot pages with URL query params.

This would allow:

• sharing filtered views of these pages
• bookmarking

which might facilitate sharing, discussion and tracking the information of interest for users.

For example, we might have a countries and variants params as follows

/per-country?countries=France,Germany,Italy&variants=20A.EU1,20A.EU2

Navigating to this URL would render the "Per country" page with only France, Germany and Italy and 20A.EU1 and 20A.EU2 variants enabled in filters.

and if user further unchecks 20A.EU1 and Italy and adds Latvia, then the URL in their address bar will become:

/per-country?countries=France,Germany,Latvia&variants=20A.EU2

Allow clusters.py to take mutations in 'mutation badge' format

Currently clusters.py takes mutations like so:

            "mutations":{
                "nonsynonymous": [
                    {'gene': 'S', 'left': 'S', 'pos': 98, 'right': 'F'},
                    {'gene': 'N', 'left': 'P', 'pos': 199, 'right': 'L'},
                    {'gene': 'ORF3a', 'left': 'Q', 'pos': 38, 'right': 'R'},
                    {'gene': 'ORF3a', 'left': 'G', 'pos': 172, 'right': 'R'},
                    {'gene': 'ORF3a', 'left': 'V', 'pos': 202, 'right': 'L'}
                ],
                "synonymous": [
                    {'left': 'C', 'pos': 28651, 'right': 'T'}
                ]
                }
            },

The idea is we would like it to also take mutations like this:

            "S452": {'snps': [21599,22017,22916], 'cluster_data': [], #'CA' variant
            "country_info": [], 'build_name': "S.L452R", "display_name": "S:L452R",
            'col': "#b30000", 'url_params': "c=gt-S_13,152,452", # color, no europe filter
            "mutations":{
                "nonsynonymous": [
                    'S:S13I',
                    'S:W152C',
                    'S:L452R',
                    'ORF1a:I4205V',
                    'ORF1b:D1183Y'
                ],
                "synonymous": [
                    '28651T'
                ]
                }

            },

However, if you swap the above code in to clusters.py (in place of mutation S452) it will do the make web-data just fine, and also build the website just fine.
But when you click on the 452 button, it will give the following error:

ERROR in src/io/getClusters.ts:24:3
TS2322: Type '({ build_name: string; build_url: string; cluster_data: never[]; col: string; country_info: never[]; display_name: string; display_name2: string; mutations: { nonsynonymous: { gene: string; left: string; pos: number; right: string; }[]; synonymous: { ...; }[]; }; snps: number[]; snps2?: undefined; url_params?: undef...' is not assignable to type 'ClusterDatum[]'.
  Type '{ build_name: string; build_url: string; cluster_data: never[]; col: string; country_info: never[]; display_name: string; display_name2: string; mutations: { nonsynonymous: { gene: string; left: string; pos: number; right: string; }[]; synonymous: { ...; }[]; }; snps: number[]; snps2?: undefined; url_params?: undefi...' is not assignable to type 'ClusterDatum'.
    Type '{ build_name: string; build_url: string; cluster_data: never[]; col: string; country_info: never[]; display_name: string; mutations: { nonsynonymous: string[]; synonymous: { left: string; pos: number; right: string; }[]; }; ... 4 more ...; gaps?: undefined; }' is not assignable to type 'ClusterDatum'.
      The types of 'mutations.nonsynonymous' are incompatible between these types.
        Type 'string[]' is not assignable to type 'Mutation[]'.
          Type 'string' is not assignable to type 'Mutation'.
    22 |
    23 | export function getClusters(): ClusterDatum[] {
  > 24 |   return clustersJson.clusters
       |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    25 | }
    26 |
    27 | export function getDefaultCluster(): ClusterDatum {

@ivan-aksamentov Says:

you changed objects to strings, but Typescript types still say objects (type Mutation) (

Add 'Other' Count to Tooltip in 'Per Country' graphs.

When mousing over 'Per Country' graphs, the tool tip shows the sequence count for each cluster - this is very useful! However, it does not show the 'other' (the white space which doesn't fall into any cluster).

Adding a column to the tooltip called 'other' and having a count would be useful for users to estimate how many sequences did not have a cluster assigned, and how many sequences there were in total (adding up all those with a cluster + those without). This would be particularly helpful if only one cluster is visible (through changing the check-boxes on the left):

This needs to be dynamic as changing the clusters that are visible will impact how much 'white'/'other' there is - so needs to be calculated 'on-the-fly'.

In the file used to generate these charts we do already know the 'total' for each time point and the number of sequence in each cluster, so the 'other' is simply (total - number of sequences in visible clusters).

Add custom "Not found" and "Error" pages

Currently the default Next.js pages are used. We want to customize those.

Pages should at least contain the navigation bar, footer, a more friendly error message and a reload button, which hard-reloads the app.

variable time-intervals in "per country" plot

Hi,

When looking at the Danish frequency plot of variants here https://covariants.org/per-country I noticed that the intervals varies in size? so for instance 2020-12-21 to 2020-12-28 is one week and 2020-12-07 to 2020-12-21 is two weeks? I hope it's a mistake! :)

On that note, could the dates be more informative? So for example indicate which ISO-standard week they cover instead of showing a specific date?

Best,
Thomas

Idea: use country flags instead of colored circles in legends

Related: #81 #87

The idea is to use country flag icons instead of colored circles on "Per country" page for plot headings and filtering sidebar.

Originally, the country colors were meant for line plots in "Per variant" page, and they have no significance for the "Per country" page. But it was making sense to also use the same colors in country icons to connect the two pages together.

Now that there are more countries added, some colors started to be duplicated. On "Per variant" page the logical solution was to reuse the line styles to make the countries visually distinct #87. However, it might be confusing to use the same kind of line icons on "Per country" page, which does not have line plots.

This should solve the problem of duplicated colors on "Per country" page.

Remember filter state on page navigation

Currently filters on sidebar of plot pages are reset on every navigation, This is dues to state being stored locally.

Moving the state upstream, or better, to redux store would make it persist.

Tweak mutations colors for better readability

Some of the colors on badges in "Defining mutations" section have insufficient contrast ratio against text and/or background. Simply put, it's hard to read the text.

We want to change the colors, for better readability.

The colors are here
https://github.com/hodcroftlab/covariants/blob/master/web/src/colors.ts

Originally, the Nuc and AA colors are taken from bioSyntax project:
https://github.com/bioSyntax/bioSyntax
more specifically, their spreadsheet
https://github.com/bioSyntax/bioSyntax/blob/429671cfbf6d7355e1db25dc8116687dd8683029/dev/theme/bioSyntax_theme.xls

The gene colors in the same file are taken from Nextclade, which are taken from Auspice. These are the same as in the Auspice entropy panel.

That is, there are less colors in auspice than we need and auspice reuses the same colors in cycle. I ran this cycle for SARS-CoV-2 genes and made a harcoded dictionary. I also made gene S to be red and gene N to be blue, don't remember exactly, so that they are not of the same color.
https://github.com/nextstrain/nextclade/blob/1fbc1e924bd3f58e0681f0430d033e5dee83e776/packages/web/src/constants.ts#L31-L44

Additional points for making the colors colorbindness-friendly, but given how many colors there are, it's a tough task.

Show mobile users an alert suggesting larger screen

On smaller screens we want to show once (!) a non-intrusive alert dialog, something like:

For best experience we recommend viewing this page on a larger screen [x]

Once dismissed it should never be shown again.

Incomplete implementation:

if(hasBeenShown) {
  return null
}

return (
  <Row noGutters className="d-sm-none d-block">
    <Col>
      <UncontrolledAlert color="warning">
        {'For best experience we recommend viewing this page on a larger screen'}
      </UncontrolledAlert>
    </Col>
  </Row>
)

This is relevant for plot pages and page(s) with table(s), possibly other pages that don't feel nice on mobile.

We might also suggest user sharing a link to the app with themselves to see on another device (using existing react-share functionality for example)

Display variant names table at /variants

The covariants.org/variants page currently shows details for the first variant - covariants.org/variants/20A.EU1 is the same as covariants.org/variants.

It might be more helpful for this page to instead show the table of variant names (which is currently on the homepage).

One possible change would be to move the current homepage to covariants.org/variants, make covariants.org/ redirect to covariants.org/variants, delete the Home link from the navigation bar, and make the logo a link to covariants.org/variants.

I'm raising this an Issue rather than making a PR as I'm not sure what you will think of this suggestion.

toggle date text displayed in "per country" plots

Hi team,
As suggested in #109, making a toggle switch that controls how dates are displayed when hovering above each time interval would be nice. I'd personally prefer ISO week standards, but as suggested by @emmahodcroft in #109 the date range is still useful.
Best,
Thomas

Avoid duplicated legend hints across countries

The issue is raised in this comment: #77 (comment)

If two countries have the same color they are indistiguishable in tooltips and filtering sidebar. They can be distinguished in plots, because the lines have different styles (e.g. solid vs dashed).

We could solve this by drawing short pieces of lines instead of circles in tooltips and filtering panel.

Add toggle to 'Shared Mutations' to display either 'Spike-only' or 'All'

At the moment the Shared Mutations page pulls anything put in mutation_comparison.py and displays it. At the moment to keep this useful but simple, only Spike mutations are put into the mutations_comparison.py file.

However, it would be incredibly useful to extend this to other genes! However, to keep things usable, it might be nice to have a toggle so users can select - show just Spike, or 'All genes'.

Or, a more advanced version could offer a drop-down of each gene available (or all genes). Even more advanced, you could select a couple of genes (but UI might get bulky!)

This would mean we could add mutations from all the genes to mutations_comparison.py, but the web interface would be able to show and hide different genes on demand.

If anyone is interested in working on this & having some other gene-mutatoin-info in there would help testing, please tag me and I can prioritise getting this data!

Embed Nextstrain builds if possible on each variant page

We want to try embed Nextstrain page for a specific URL (the same URL as for "Dedicated Nextstrain build" link) on Variant pages.

I've played with <iframe/> wrapped into a collapsible card initially, but it was too slow, probably due to iframe running in sandox, and unreliable, perhaps because of the collapsible component had 0 height when collapsed.

The iframe would randomly blank out and there was no way to get it to render again.

It was also unbearably slow to load the page in dev mode.

We might play with this idea a bit more, because it would be a very useful feature.

Perhaps, there are adjustments can be made to nextstrain for it to behave better when embedded in in iframe? cc @jameshadfield

The old code is available on branch abandoned/nextstrain-iframe. Commit 4b845a9 is the last commit. The next commit removes this functionality.

This was roughly the idea:

Reconsider country sort order in ‚Per country‘

The sort order of the countries looks a little arbitrary to me - or I have just not figured out the logic yet.

Suggestions:

• Alphabetical
• By number of sequences (descending)

Add data/content contributors guide

In order to crowdsource the data and content, we might create a short data/content contributors guide, which clearly describes the steps of adding data and content.

The document should:

• make no assumptions about contributor's familiarity with the project
• reproducibly help to add a piece of content (a variant, a country etc.) to the app , from beginning to end
• be in a form of a list of actions (do this, do that)
• be easily discoverable (might add it to the readme and to the FAQ in the app)

Add `VUI202102/01` and `VOC202102/02` variants

Hi,

Today in uk two variants of concern have been reported, below are some details:

VUI202102/01 is characterised by the presence of the E484K spike protein mutation and a small number of other mutations. It is derived from lineage A.23, which is seen internationally, but the E484K additional mutation on this lineage has only been seen within the UK. It was first identified by Public Health England (PHE) on 10 January, while investigating a cluster of 5 cases linked to members of staff from a hospital in Liverpool. So far, 55 cases of this variant have been found.

VOC202102/02 is a specific cluster characterised by the presence of the E484K spike protein mutation on the VOC202012/01 SARS-CoV-2 B1.1.7 variant that was first detected in the UK at the end of 2020. Through genomic sequencing and enhanced contact tracing, PHE have so far identified 21 cases of VOC202102/02 across the UK, predominantly centred upon an outbreak in the South West of England.

Both have the E484K, so wondered if you wanted to add it to the E484K page?

Link to article: https://www.gov.uk/government/news/phe-statement-on-variant-of-concern-and-new-variant-under-investigation

Hope it helps.

Layout plots in an adjustable grid

We might want to improve user experience around the plot positioning in plot pages.

Currently plots are in rigid bootstrap grid and cannot be moved or resized.

We could use something like react-grid-layout

Users then might:

• move plots of interest towards the top of the page
• the plots side by side for easier comparison
• resize the plots to meet their needs (also reduces requirements for grid to be responsive to screen sizes)

We might also allow to hide the plots with a button on each plot card (instead of searching for an entry in filters)

Nucleotide positions for reported variants

As there are several names for each variant and associated strain, often MSA done on nucleotide data will result in nucleotide position variants which have to be annotated to mutations reported as "D614G" which is tied to the gene start position and trinucleotide codons, which makes it hard to annotate synonymous variants. Would it be possible to report those in nucleotide position(s) with specific variant ID, i.e. "A23403G"?

[refactoring] Variant URL generation logic needs deduplication

We need to identify places that generate /variants/{clusterBuildName} strings to be used as URLs and deduplicate this logic until something bad happened.

We should always use the same logic and always build_name. It makes sense to add cluster.url field on Python side and to move this logic there or to even add these properties to https://github.com/hodcroftlab/covariants/blob/master/scripts/clusters.py declaratively.

This workaround should be removed as well:

covariants/web/src/components/ClusterDistribution/ClusterDistributionPage.tsx

Line 42 in 8ffd693

const CLUSTER_BUILD_NAMES: Map<string, string> = new Map(getClusters().map((c) => [c.display_name, c.build_name]))

Might requre modifying the filtering logic in the component to operate on the whole cluster objects instead of display name strings.

Setup SEO component to override social media preview image and tags

We want to override the default social media preview image and tags for every page.

Turn on/off different lineages/variants shown in 'Shared Mutations'

At the moment only the 3 main Variants of Concern, plus 20B/S.484K are shown in the 'Shared Mutations' page. However, it would be nice to be able to add any variant that's currently of interest, so that people can see what mutations are shared. Particularly since the variants on this page are source separately from how 'buttons' are generated, this can be much more flexible to what's of interest at any given time.

Ideally, we could add multiple variants to mutation_comparison.py, but then there would be some series of check-boxes to the top or side, where users could turn on and off which ones they'd like to display. We could update mutations_comparison.py to indicate the ones that should be shown by default.

If anyone is interested in working on this and would like a list of more variants/lineages to play with, see thread below (add to mutation_comparison.py).

Investigate and reduce unnecessary rerendering of React components

Lots of things is getting rerendered on unrelated actions. For example, when clicking a checkbox on the side panel, the whole page rerenders. This reduces feasibility of some cool features from being implemented, like #102. Needs an investigation.

Additionally, many parts of the filtering state being passed around should probably go upper in the components tree, or, like in the olden days, into redux state. If we go with hooks, many things should probably be memoized.

However, a global state storage in Redux will ensure that the state is not reset on page navigation, which I find mildly infuriating, and, as a side effect (get it? :)), might reduce rerendering and will also unlock some of the features such as #27 #30, which are probably cumbersome to implement with hooks.

Below is a screen capture of a feature from #102, but it is not only related to the PR. Similar things happen on live site.

Related: #27 #30 #102

⚠️ EPILEPSY WARNING: blinking content below

Rerendering when hovering country name (click to open)

Automate country color generation

We could make a variety of colors by generating them automatically, given country names. There are packages which allow to "hash" strings into colors, producing an (almost) unique color given a string, for example
https://pypi.org/project/colorhash/

Color hashes are stable, that is, they produce the same color if given the same string.

This can produce broader variety. But also does not guarantee that colors will be easily distinguishable from each other. We might tweak them individually, by adding a "tint" to a given country, or by adding a common "salt" or an individual "pepper" to the hashed string, or by combining all.

Individual tint:

color = ColorHash('France')
color = add_tint(color, countries['France].tint)

Common salt:

color_fr = ColorHash('France' + salt)
color_de = ColorHash('Germany' + salt)

Individual pepper:

color_fr = ColorHash('France' + countries['France].pepper)
color_de = ColorHash('Germany' + countries['Germany].pepper)

Related: #80

Add image for social platforms

Add RshSTT200, RaTG13 and Pangolin/GD closely related viruses

Just a thought it would be nice if you added the RshSTT200, RaTG13 and Pangolin/GD closely related viruses (above 95% match).

See picture as example:

I know these aren't exactly variants - but the genome is very similar and I think it would add value to your website. Also I think the evolution of the virus is equally as important.

For more info see link: https://www.biorxiv.org/content/10.1101/2021.01.26.428212v1.full.pdf

Collapse navbar on mobile

The top navigation bar on mobile is truncated. It's scrollable (swiping with show the rest of items), but that fact might not be abvious.

A better UX would be to use a collapse menu with a sandwich menu butto which expands the menu. The simlest is to probably use reactstrap navbar capabilities or something else.

Current looks on iPhone X:

Allow pages to not have a Nextstrain link

To finish breaking out the 'mutations' from the variants, I'd like to move the last of the mutation information out of the variant pages and into their own mutation pages (then import it to the variant pages).

However, I probably won't have a build for every mutation that has a page. It would be nice to have an option that if there's no Nextstrain URL (or perhaps, if it's got the value False) then instead of showing the Nextstrain build link at the top, it will just say 'No dedicated Nextstrain build is available' or similar.

Consider automation of mundane tasks

We might consider a possibility of automating day-to-day tasks, such as daily data updates.

If we can come up with a sufficiently autonomous script or a set of scripts which can be executed without supervision, we could:

• run these scripts in CI environment
• make a bot to submit a PR upon successful completion
• optionally emit Slack notifications or similar
• the PR would then be reviewed and viewed in the context of the web application (through Vercel previews) by maintainers and either merged, amended with more changes or deleted

Related: #20

Use build_name for filenames for consistency

We transited to cluster.build_name (as in scripts/clusters.py) for content (.md) filenames (see f76f6aa), but other places might still use display_name.

Notably .gif images and .jpg stulls created from them are using display_name.

We might change that for:

• consistency (confusing and error prone when adding new content)
• better compat with Windows (which apparently still has problems with colons in filenames in 2021)
  by using build_name instead.

Indian samples in the B1.1.7 clade

Sorry to bother you, I suppose this isn't how you prefer to be contacted. But what's the story with the two samples from India in your B1.1.7 tree at https://nextstrain.org/groups/neherlab/ncov/S.N501?c=gt-S_501,69

I mean specifically these ones:

By the colours, they don't have the 69/70 deletion [edit: I see they do have N501Y however], so their position there doesn't make sense to me. Are they there because the rest of their genome is similar to B1.1.7?

If yes, what would cause this? Coincidence? Lab mistake? Recombination?

Button to show and hide all countries at once

It would be nice to be able to diasable and enble all countries at once. That way you can select just one or two countries to compare them side by side.

Setup CI and infrastructure for production app