nightingale-variation


This custom element displays a matrix of amino acid changes at a given position on the protein sequence. The advantage of a matrix-based approach is that even with a large number of variants (every single amino acid change per location) the space taken by the visualisation on the screen doesn't change.

Usage

``html
protein-api
id="variationId"
height="500"
length="123"
>
`

#### Setting the data through property

`javascript
const track = document.querySelector("#variationId");
track.data = myDataObject;
`

API Reference

$3

#### protein-api?: boolean (default: false)

Indicates that the data provided follows the format of the UniProt Protein API.

See more details in the typescript definition on this file.

#### row-height?: number (default: undefined)

The height per row of amino acids. If this value is undefined it will be calculated spliting the value given in height among the aminoacids to display. Notice the number of amino acids might vary if the condensed-view is enabled.

Note: If neither row-height nor height is set, it will used the track default height wich is likely set to 10 and probably not how you want to display this moponent as it will overlap rows.

#### condensed-view?: boolean (default: false)

If enabled, only displays a row for amino acids with at least one variant.

$3

#### data: VariationData|ProteinsAPIVariation

Data to be loaded in the component. It uses one of two formats:

1. If the protein-api attribute is present, it uses the format defined in the UniProt Protein API, described in Typescript as:

`typescript
type ProteinsAPIVariation = {
accession: string;
entryName: string;
proteinName: string;
geneName: string;
organismName: string;
proteinExistence: string;
sequence: string;
sequenceChecksum: string;
sequenceVersion: number;
taxid: number;
features: Variant[];
};
`

2. The format used internally in the component.

`typescript
export type VariationDatum = {
accession: string;
variant: string;
start: number;
size?: number;
xrefNames: string[];
hasPredictions: boolean;
tooltipContent?: string;
alternativeSequence?: string;
internalId?: string;
wildType?: string;
color?: string;
};

export type VariationData = {
sequence: string;
variants: VariationDatum[];
};
`

#### colorConfig: (v: VariationDatum) => string;

A function that receives a variation datapoint and returns an HTML valid color. For example:

`typescript
const track = document.querySelector("#variationId");
track.colorConfig = (v: VariationDatum) => {
if (v.hasPredictions) return "green";
return "#DD2121";
};
``