swissbiopics-visualizer-easy-usage

Custom HTMLElement for visualizing subcellular locations using SwissBioPics, an expert curated library of interactive cell images.

This web component uses the SwissBioPics API to automatically select the most appropriate image for a given organism and a list of subcellular locations and highlight those locations on the image.

It is built and packaged as an update based on the @swissprot/swissbiopics-visualizer package. For more detailed information, refer to the @swissprot/swissbiopics-visualizer package.

Attributes

| Attribute name | Value | | ---------------|----------| | taxid | NCBI taxonomy identifier of the organism. | | sls | List of comma-separated UniProtKB subcellular locations (SL) IDs. The IDs can be given without the 'SL-' prefix and leading '0's. |

Installation

npm install swissbiopics-visualizer-easy-usage

Import in your application

import 'swissbiopics-visualizer-easy-usage';

Basic usage

In the web page where you want to display a SwissBioPics image, add the location of the SwissBioPics Java Script module with one of these two options:

your local dependency path if you installed and imported the module, e.g.:

<script type="module" src="swissbiopics-visualizer-easy-usage/swissbiopics-visualizer-easy-usage.js"></script>

Now add a SwissBioPics custom element for your organism and the subcellular locations that you wish to highlight.

Use the sls attribute for UniProtKB subcellular locations (SL) IDs:

<sib-swissbiopics-sl taxid="NCBI taxonomy ID" sls="list of SL IDs"></sib-swissbiopics-sl>