Optional "Three letter" Amino-Acid badges for beginners

[chatelao]

IS

• Mutations are shown with the one-letter AA abbreviation.
• As a "amateur" bio chemistry nerd, I'm not very fluent with this code (yet)
• The TLA (Three letter acronyms) are much more understandable

COULD

• Having a switch between "pro (one letter)" and "amateur (three letter) muatation badges would be very nice

https://github.com/hodcroftlab/covariants/blob/b253cd94e4dcf4f32b3f7667717304d086c16141/web/src/components/Common/MutationBadge.tsx

[emmahodcroft]

Hi @chatelao - Thanks for using CoVariants and thank you for this suggestion! I agree, this would be a very cool addition. Unfortunately at the moment we don't have the resources to implement this, as our project is pretty small. However, if someone else would like to work on this, I'd welcome PRs to add this feature!

[carlos-montano-hub]

Hi, I'm interested in this issue and project, I'll take a look at it and let you know of my advances

[emmahodcroft]

Thanks @carlos-montano-hub - that would be great! It would be fantastic to have some kind of toggle in the header or footer of pages that could switch this on/off across the site :)

[chatelao]

Whenever it helps @carlos-montano-hub - Here the full list as "csv"

"Abbreviation (1 Letter)" ,"Full Name"     ,"Abbreviation (3 Letter)"
"F"                       ,"Phenylalanine" ,"Phe"
"L"                       ,"Leucine"       ,"Leu"
"S"                       ,"Serine"        ,"Ser"
"Y"                       ,"Tyrosine"      ,"Tyr"
"C"                       ,"Cysteine"      ,"Cys"
"W"                       ,"Tryptophan"    ,"Trp"
"P"                       ,"Proline"       ,"Pro"
"H"                       ,"Histidine"     ,"His"
"Q"                       ,"Glutamine"     ,"Gln"
"R"                       ,"Arginine"      ,"Arg"
"I"                       ,"Isoleucine"    ,"Ile"
"M"                       ,"Methionine"    ,"Met"
"T"                       ,"Threonine"     ,"Thr"
"N"                       ,"Asparagine"    ,"Asn"
"K"                       ,"Lysine"        ,"Lys"
"V"                       ,"Valine"        ,"Val"
"A"                       ,"Alanine"       ,"Ala"
"D"                       ,"Aspartate"     ,"Asp"
"E"                       ,"Glutamate"     ,"Glu"
"G"                       ,"Glycine"       ,"Gly"

[chatelao]

If the PR will pass, a simple lookup table should be available @carlos-montano-hub in the codebase:
#325

[ivan-aksamentov]

In terms of implementation, one could:

• add a recoil atom with a boolean value
• use it in the Badge component to decide whether to display 1 or 3 letter AA codes
• use it in a checkbox component to toggle the boolean value

A good example of an existing toogleable recoil atom is the "tooltip sorting" (it's not boolean, but close):

covariants/web/src/state/TooltipSort.ts

Lines 8 to 14 in 55e9567

	export const tooltipSortAtom = atom({
	key: 'TooltipSort',
	default: {
	criterion: TooltipSortCriterion.frequency,
	reversed: false,
	},
	})

And the usage is here

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

Line 54 in b253cd9

const { criterion, reversed } = useRecoilValue(tooltipSortAtom)

and here:

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

Line 104 in 30085e0

const [tooltipSort, setTooltipSort] = useRecoilState(tooltipSortAtom)

It's not really feasible to pass a prop to every single badge component - there are too many. But with recoil, this value can be "global" and be queried or set by any badge component.

[ivan-aksamentov]

My concern is though that the badges with long AA names may become much bigger and they may not fit stylistically in certain places, like various lists, tables and sidebars. And this might be a much harder problem to solve, than passing a boolean or mapping 1-letter to 3-letter codes.

Neither I ever saw 3-letter codes used anywhere when describing mutations. But I'll reserve judgement to Emma here.

If I remember correctly, we already have tooltips for these badges. Perhaps all this beauty can just go into tooltips?

[chatelao]

Hi Ivan, as a "no so professional user" i.e. not knowing the one-letter-abbreviation all by heart, really helpful would be to see the "Three-Letters" direct in the badges.

But you are right: this will enlargen the badges and maybe more details in the tooltip would be a better idea.

[carlos-montano-hub]

This is how it looks on the chrome dev device mode

Vertical

Horizontal

[emmahodcroft]

Of course always a little hard to judge in static pictures, but so far this looks pretty good to me? It's a little more crowded but doesn't seem to be messing up the layout extremely, and as it'll be an option, people can toggle if seeing these is a real win compared to a slightly more tidy layout.

If you submit a PR when you're ready @carlos-montano-hub , it'll generate a preview that we can explore to see how it looks on a variety of resolutions & devices!

[emmahodcroft]

@ivan-aksamentov Does make a good point that the full amino-acid names are visible on mouseover with the tooltips, but if this would be genuinely useful for people to see more easily, and if we can do it without messing up the layout (which so far looks pretty ok to me) then I think it could be worth putting in. Let's see how a preview looks!