feat(website): simple mutation badges

[anna-parker]

resolves #1620

preview URL: https://feat-simple-mutation-badg.loculus.org/

Summary

This PR makes it easier to view lists of substitutions by creating a mutation badge for each mutation.

• It stops showing substitutions as a list of strings and now uses the processed substitution information from the backend (added to endpoint in feat(website): Update Lapis client endpoints #1662).
• It uses the SubBadge component first defined in feat(web): add mutation badges #1446 to turn each mutation into a badge object. This can be extended to multiple segment data.
• Badges are listed with spaces to enable search and copying of sequence lists.
• Badge colors have been desaturated to enable easier reading.

Screenshot

Future work

• Handle how large substitution lists are shown
• Tweak color scheme
• Decide how best to show genes

PR Checklist

• All necessary documentation has been adapted.
• The implemented feature is covered by an appropriate test.

[anna-parker]

The last commit causes issues with the formatting when running the e2e tests on docker:
.

This is exactly what I saw in the feat/mutation-badges2 PR - this indicates the issue is not linked to any package updates but potentially the direct access and modification of import { type CSSProperties, useMemo } from 'react';.

The odd thing is locally (and on argocd) the pages look fine:

[chaoran-chen]

When selecting and copying the list of mutations, I get:

A296CC357TG361AT370CT378CT379CG382AT386C

It would be nice if there would be a space in between.

[corneliusroemer]

Colors are maybe too saturated/dark (sorry for bikeshedding) - making them fairly light would help with a) readability of A/C/T/G and b) make it fit better into loculus' fairly light color scheme.

[corneliusroemer]

ChatGPT does this really well: https://chat.openai.com/share/1fdf940b-6410-421b-926f-3d9b2af64b87

Writes a Python script to convert hex to hsv, then adjusts saturation and brightness, then converts back to hex!

Here's the result (you can use the script to tweak manually, it provides the exact array you can just copy/paste:

[anna-parker]

ChatGPT does this really well: https://chat.openai.com/share/1fdf940b-6410-421b-926f-3d9b2af64b87

Writes a Python script to convert hex to hsv, then adjusts saturation and brightness, then converts back to hex!

Here's the result (you can use the script to tweak manually, it provides the exact array you can just copy/paste:

I have actually changed the colors to be more loculus like - was all manual so we can also not use ?

[anna-parker]

The last commit causes issues with the formatting when running the e2e tests on docker: .

This is exactly what I saw in the feat/mutation-badges2 PR - this indicates the issue is not linked to any package updates but potentially the direct access and modification of import { type CSSProperties, useMemo } from 'react';.

The odd thing is locally (and on argocd) the pages look fine:

I think this might be a timeout issue - I created a branch off this branch and only showed a single nucleotide mutation in badge form - there the tests succeeded, however I see there was a warning that they were slow:

[theosanderson]

(IMO some of those manual colours are oversaturated and of those two options my pref would maybe be Cornelius's)

[anna-parker]

Our e2e tests are very slow - the image we see is probably just the html preview:

we only start loading the page 24s seconds into the test and the time to render the page is almost 30s. The default for playwright is only 30s per test. We need to extend this (or run on faster machines).

[theosanderson]

Looks nice!

[chaoran-chen]

Looks great to me - thanks!