ncats / protvista-viewer Goto Github PK

View Code? Open in Web Editor NEW

A Web Component containing various Nightingale and custom elements to show protein sequence annotations.

License: MIT License

HTML 2.04% Shell 0.44% TypeScript 74.21% JavaScript 23.31%

protvista-viewer's Introduction

protvista-uniprot

A Web Component which uses Nightingale components to display protein sequence information.

Usage

Importing as a module

import ProtvistaUniprot from 'protvista-uniprot';
...
window.customElements.define('protvista-uniprot', ProtvistaUniprot);

You can then use it like this:

<protvista-uniprot accession="P05067" />

Dependencies

The component relies on d3 which is set as a global variable and needs to be added to your project.

<script src="https://d3js.org/d3.v4.min.js" charset="utf-8" defer></script>

or via CDN

See here

API

accession: String
config?: Array see below
notooltip?: Boolean(false)
nostructure?: Boolean(false)

Development

Run yarn install to install dependencies and yarn start to start the local server.

Configuration

You can pass your own configuration to the component using the config attribute/property.

{
  "categories": [
    {
      "name": string,
      "label": string,
      "trackType": protvista-track|protvista-variation-graph|protvista-variation,
      "adapter": protvista-feature-adapter|protvista-structure-adapter|protvista-proteomics-adapter|protvista-variation-adapter,
      "url": string,
      "tracks": [
        {
          "name": string,
          "label": string,
          "filter": string,
          "trackType": "protvista-track|protvista-variation-graph|protvista-variation",
          "tooltip": string
        }
      ]
    }
  ]
}