TypeScript icon, indicating that this package has built-in type declarations

3.8.13 • Public • Published


Published on NPM

The protvista-track component is used to display protein features. These features have start and end positions (these can be the same if the feature only spans one amino-acid), a specific shape (rectangle is the default) and a colour. Features are passed through the data property. You can specify shapes and colours at an instance level (through a property) or individually in the feature data (see data below). In order to establish the scale, it is necessary to set the length property (length of the protein sequence in amino-acids).

As protvista-track inherits from protvista-zoomable, it will respond to zooming changes, highlight events and emit events when interacting with features (helpful if you want to display tooltips).

Loading data can be done directly through the data property, or through the use of a load event emitted by one of protvista-track's children (e.g. a data adapter with data-loader).

There are two types of display available for protvista-track:

  • overlapping will display all the features on one single line. This means that if a feature overlaps another one, it will be indistinguishable. This layout can be useful to display an overview, or when the data is very dense.
  • non-overlapping will calculate the best vertical positions for each feature so that they don't overlap.



<protvista-track length="456" />

Setting the data through property

const track = document.querySelector('#my-track-id'); = myDataObject

Setting data through <data-loader>

<protvista-track length="770">
    <protvista-feature-adapter id="adapter1">
          <source src="" />

API Reference


length: number

The protein or nucleic acid sequence length.

data: Array

Array items take the following shape:

    accession: String,
    start: Number,
    end: Number,
    color?: String,
    shape?: rectangle|bridge|diamond|chevron|catFace|triangle|wave|hexagon|pentagon|circle|arrow|doubleBar,
    tooltipContent?: String
    locations: [
            fragments: [
                    start: Number,
                    end: Number

Note: locations is an alternative to start-stop attributes, that expresses that a feature can appear in several locations, and also supports the idea of discontinuous features, by allowing to have fragments.

So for example a single continuous feature, that only appears once can be represented in 2 ways. The classic {accession:'X', start:2, end:4} or a more verbose version: {accession:'X', locations: [{fragments: [{start:2, end:4}]}]} an both should generate a track like this:


If the same feature appears in 2 places in the sequence, it can be represented using locations:

    accession: 'Y',
    locations: [
        {fragments: [{start:2, end:4}]},
        {fragments: [{start:7, end:9}]}

To generate a track like


Finally a feature can also be discontinuous, to repesent this in our data we use fragments:

    accession: 'Z',
    locations: [
        {fragments: [
            {start:2, end:4},
            {start:7, end:9}]

This expresses that the same instance of the feature Z is split in 2 fragments, from 2 to 4 and from 7 to 9. Which could be represented as


layout?: overlapping(default)|non-overlapping(optional)

The track layout. Non-overlapping uses a bumping algorhithm to make sure none of the features overlapp.

shape?: see above

Shape of all features within the track

color?: see above

Colour of all features within the track

also see protvista-zoomable

Package Sidebar


npm i protvista-track

Weekly Downloads






Unpacked Size

324 kB

Total Files


Last publish


  • xwatkins
  • ljgarcia
  • mmahmoudy
  • 4ndr01d3
  • aurel-l
  • swaathik
  • dlrice2