Skip to content

Commit

Permalink
To prevent issues down the line have one type of substitution badge f…
Browse files Browse the repository at this point in the history 
…or nucleotides and aminoacids, each can gave a sequence name appended to the front if required. (e.g. for a gene or a segment id).
  • Loading branch information
@anna-parker
anna-parker committed Apr 29, 2024
1 parent af49814 commit 8a4bf42
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 110 deletions.
106 changes: 35 additions & 71 deletions website/src/components/SequenceDetailsPage/MutationBadge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,89 +2,51 @@ import { type FC } from 'react';

import type { MutationProportionCount } from '../../types/lapis';

type NucSubProps = {
pos: number;
export type SubProps = {
position: number;
mutationTo: string;
mutationFrom: string;
sequenceName: string | null;
};

export type AaSub = {
pos: number;
mutationTo: string;
mutationFrom: string;
gene: string; // TODO: more generally, this might need to be CDS name or even a pair of (gene, CDS)
};

export const NucSubBadge: FC<NucSubProps> = ({ pos, mutationTo, mutationFrom }) => {
return (
<span className='whitespace-wrap'>
<span className='border-2 bg-transparent rounded-[3px] font-mono text-xs overflow-auto'>
<span className='px-[4px] py-[2px] rounded-s-[3px]' style={{ background: getNucColor(mutationFrom) }}>
{mutationFrom}
</span>
<span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
<span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getNucColor(mutationTo) }}>
{mutationTo}
</span>
</span>
<span> </span>
</span>
);
};

export const AaSubBadge: FC<AaSub> = ({ pos, mutationTo, mutationFrom, gene }) => {
export const SubBadge: FC<SubProps> = ({ position, mutationTo, mutationFrom, sequenceName }) => {
return (
<span className='whitespace-wrap'>
<span className='border-2 bg-transparent rounded-[3px] font-mono text-xs overflow-auto'>
<span className='px-[4px] py-[2px] rounded-s-[3px]'>{gene}:</span>
<span className='px-[4px] py-[2px]' style={{ background: getAaColor(mutationFrom) }}>
{mutationFrom}
</span>
<span className='px-[4px] py-[2px] bg-gray-200'>{pos + 1}</span>
<span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getAaColor(mutationTo) }}>
<li key={position} className='inline-block'>
<span className='rounded-[3px] font-mono text-xs overflow-auto'>
{sequenceName === null ? (
<span className='px-[4px] py-[2px] rounded-s-[3px]' style={{ background: getColor(mutationFrom) }}>
{mutationFrom}
</span>
) : (
<>
<span className='px-[4px] py-[2px] rounded-s-[3px] bg-gray-200'>{sequenceName}:</span>
<span className='px-[4px] py-[2px]' style={{ background: getColor(mutationFrom) }}>
{mutationFrom}
</span>
</>
)}
<span className='px-[4px] py-[2px] bg-gray-200'>{position + 1}</span>
<span className='px-[4px] py-[2px] rounded-e-[3px]' style={{ background: getColor(mutationTo) }}>
{mutationTo}
</span>
</span>
<span> </span>
</span>
</li>
);
};

export const NUCLEOTIDE_COLORS: Record<string, string> = {
// Based from http://ugene.net/forum/YaBB.pl?num=1337064665
export const COLORS: Record<string, string> = {
'A': '#db8070',
'C': '#859dfc',
'G': '#c2b553',
'T': '#7fbb81',
'N': '#7b7b7b',
'R': '#e3c1ae',
'K': '#c1c9ad',
'S': '#a9c7b4',
'Y': '#a5bfc4',
'M': '#bdbcbe',
'W': '#c9ccaf',
'B': '#a6d0e3',
'H': '#e7e9ff',
'D': '#fefdfb',
'V': '#dadada',
'-': '#9d9d9d',
} as const;

export function getNucColor(nuc: string) {
return NUCLEOTIDE_COLORS[nuc] ?? NUCLEOTIDE_COLORS.N;
}

// Borrowed from http://ugene.net/forum/YaBB.pl?num=1337064665
export const AMINOACID_COLORS: Record<string, string> = {
'A': '#e5e575',
'V': '#e5e57c',
'L': '#e5e550',
'I': '#e5e514',
'B': '#e54c4c',
'C': '#cee599',
'D': '#e5774e',
'E': '#e59c6c',
'F': '#e2e54d',
'G': '#e57474',
'H': '#9ddde5',
'K': '#b4a2e5',
'M': '#b7e525',
Expand All @@ -93,7 +55,6 @@ export const AMINOACID_COLORS: Record<string, string> = {
'Q': '#e5aacd',
'R': '#878fe5',
'S': '#e583d8',
'T': '#e5b3cc',
'W': '#4aa7e5',
'X': '#aaaaaa',
'Y': '#57cfe5',
Expand All @@ -102,16 +63,19 @@ export const AMINOACID_COLORS: Record<string, string> = {
'-': '#444444',
};

export function getAaColor(aa: string): string {
return AMINOACID_COLORS[aa] ?? AMINOACID_COLORS.X;
export function getColor(code: string): string {
return COLORS[code] ?? COLORS.X;
}

export const SubstitutionsContainer = ({ values }: { values: MutationProportionCount[] }) => {
return values.map(({ mutationFrom, mutationTo, position, sequenceName }) =>
sequenceName === null ? (
<NucSubBadge mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />
) : (
<AaSubBadge gene={sequenceName} mutationFrom={mutationFrom} pos={position} mutationTo={mutationTo} />
),
);
return values.map(({ mutationFrom, mutationTo, position, sequenceName }) => (
<span>
<SubBadge
sequenceName={sequenceName}
mutationFrom={mutationFrom}
position={position}
mutationTo={mutationTo}
/>{' '}
</span>
));
};
94 changes: 55 additions & 39 deletions website/src/components/SequenceDetailsPage/getTableData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,55 @@ export function toHeaderMap(listTableDataEntries: TableDataEntry[]): { [key: str
return groupedData;
}

function mutationDetails(
nucleotideMutations: MutationProportionCount[],
aminoAcidMutations: MutationProportionCount[],
nucleotideInsertions: InsertionCount[],
aminoAcidInsertions: InsertionCount[],
): TableDataEntry[] {
const data: TableDataEntry[] = [
{
label: 'Nucleotide substitutions',
name: 'nucleotideSubstitutions',
value: '',
header: 'Mutations, insertions, deletions',
customDisplay: { type: 'badge', value: substitutionsList(nucleotideMutations) },
},
{
label: 'Nucleotide deletions',
name: 'nucleotideDeletions',
value: deletionsToCommaSeparatedString(nucleotideMutations),
header: 'Mutations, insertions, deletions',
},
{
label: 'Nucleotide insertions',
name: 'nucleotideInsertions',
value: insertionsToCommaSeparatedString(nucleotideInsertions),
header: 'Mutations, insertions, deletions',
},
{
label: 'Amino acid substitutions',
name: 'aminoAcidSubstitutions',
value: '',
header: 'Mutations, insertions, deletions',
customDisplay: { type: 'badge', value: substitutionsList(aminoAcidMutations) },
},
{
label: 'Amino acid deletions',
name: 'aminoAcidDeletions',
value: deletionsToCommaSeparatedString(aminoAcidMutations),
header: 'Mutations, insertions, deletions',
},
{
label: 'Amino acid insertions',
name: 'aminoAcidInsertions',
value: insertionsToCommaSeparatedString(aminoAcidInsertions),
header: 'Mutations, insertions, deletions',
},
];
return data;
}

function toTableData(config: Schema) {
return ({
details,
Expand All @@ -122,46 +171,13 @@ function toTableData(config: Schema) {
value: mapValueToDisplayedValue(details[metadata.name], metadata),
header: metadata.header ?? '',
}));
data.push(
{
label: 'Nucleotide substitutions',
name: 'nucleotideSubstitutions',
value: '',
header: 'Mutations, insertions, deletions',
customDisplay: { type: 'badge', value: substitutionsList(nucleotideMutations) },
},
{
label: 'Nucleotide deletions',
name: 'nucleotideDeletions',
value: deletionsToCommaSeparatedString(nucleotideMutations),
header: 'Mutations, insertions, deletions',
},
{
label: 'Nucleotide insertions',
name: 'nucleotideInsertions',
value: insertionsToCommaSeparatedString(nucleotideInsertions),
header: 'Mutations, insertions, deletions',
},
{
label: 'Amino acid substitutions',
name: 'aminoAcidSubstitutions',
value: '',
header: 'Mutations, insertions, deletions',
customDisplay: { type: 'badge', value: substitutionsList(aminoAcidMutations) },
},
{
label: 'Amino acid deletions',
name: 'aminoAcidDeletions',
value: deletionsToCommaSeparatedString(aminoAcidMutations),
header: 'Mutations, insertions, deletions',
},
{
label: 'Amino acid insertions',
name: 'aminoAcidInsertions',
value: insertionsToCommaSeparatedString(aminoAcidInsertions),
header: 'Mutations, insertions, deletions',
},
const mutations = mutationDetails(
nucleotideMutations,
aminoAcidMutations,
nucleotideInsertions,
aminoAcidInsertions,
);
data.push(...mutations);

return data;
};
Expand Down

0 comments on commit 8a4bf42

Please sign in to comment.