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

<nightingale-variation
  protein-api
  id="variationId"
  height="500"
  length="123"
></nightingale-variation>

Setting the data through property

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

API Reference

Atributes

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.

Properties

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:

   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.

   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:

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