protvista-uniprot

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

📣 Monthly Office Hours

Have questions about using or contributing to ProtVista?

We host regular virtual office hours to help with setup, integration, and contributions. Everyone is welcome — no registration required.

See dates and joining details here: Office Hours

Contributing & Security

We welcome contributions!

• Please see CONTRIBUTING.md for development setup, pull request guidelines, and office hours.
• Community standards: Code of Conduct
• Security issues: please report privately via SECURITY.md

Compatibility

• protvista-uniprot v3 is compatible with nightingale v5
• protvista-uniprot v2 is compatible with nightingale v3

Usage

Use within an HTML file

Create an ES module import within a static HTML file:

<script type="module" src="./protvista-uniprot.mjs"></script>

Then display the component:

<protvista-uniprot accession="P05067"></protvista-uniprot>

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"></protvista-uniprot>

API

• accession: string
• config?: Array (see Configuration)
• nostructure?: boolean (default: false)

Development

Run:

yarn install
yarn start

to install dependencies and start the local development server.

Configuration

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

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

Events

A custom protvista-event is emitted:

• When at least one of the tracks returns data

Example event detail:

detail: {
  hasData: true;
}

Publishing

npm login
rm -rf node_modules dist
yarn
yarn build
yarn publish
git push

Licensing

ProtVista source code is licensed under the MIT License (see LICENSE).

Documentation and other written materials in this repository are licensed under the Creative Commons Attribution 4.0 International (CC BY 4.0), unless otherwise stated (see LICENSE-docs).

Funding

This work was supported by the Research Software Maintenance Fund, managed by the Software Sustainability Institute and funded by UKRI grant reference AH/Z000114/1.