swissbiopics-visualizer
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.
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. |
gos | List of comma-separated Gene Ontology (GO) cellular component IDs. These will be mapped to UniProtKB subcellular location IDs before showing. |
styleid | Optional template ID to use an alternative style (see Customize style). The default value is sibSwissBioPicsStyle . |
Installation
npm install --save-prod @swissprot/swissbiopics-visualizer
Import in your application
import '@swissprot/swissbiopics-visualizer';
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:
<script type="module" src="swissprot/swissbiopics.js"></script>
- the SwissBioPics website if you did not install the module:
<script type="module" src="https://www.swissbiopics.org/static/swissbiopics.js"></script>
Then add a template for the layout of the sidebar (see Customize sidebar for alternative layouts):
<!-- Display sidebar with list items -->
<template id="sibSwissBioPicsSlLiItem">
<li class="subcellular_location">
<a class="subcell_name"></a>
<span class="subcell_description"></span>
</li>
</template>
Now add a SwissBioPics custom element for your organism and the subcellular locations that you wish to highlight. You must provide the NCBI taxonomy identifier of the organism and a comma-separated list of the subcellular locations IDs with one of these two options:
- 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>
- Use the
gos
attribute for Gene Ontology (GO) cellular component IDs:
<sib-swissbiopics-sl taxid="NCBI taxonomy ID" gos="list of GO IDs"></sib-swissbiopics-sl>
Customize style
You can customize the style of the image and its sidebar by adding a template with your desired style before the custom element. Here is an example:
<!-- Override default style -->
<template id="sibSwissBioPicsStyle">
<style>
ul > li > a {
font-style:oblique;
}
ul.notpresent li > .subcell_description {
display:none;
}
</style>
</template>
You can also define different unique template IDs and use them with the styleid
attribute in the SwissBioPics custom element, e.g.:
<template id="myStyle">
...
</template>
<sib-swissbiopics-sl taxid="NCBI taxonomy ID" sls="list of SL IDs" styleid="myStyle"></sib-swissbiopics-sl>
This can be useful when you have several images in one page and want to style each differently.
Customize highlighting
The default style highlights all given subcellular locations in the same way. To highlight different locations with different colors/shades, for instance to make a heat map that reflects either quantitative or qualitative information about the locations, you must define the style for each location in the style template for the image. Defining a style for a given subcellular location works differently for UniProtKB subcellular locations (SL) and Gene Ontology (GO) cellular component IDs. In the SVG images, SL IDs are in an id
attribute and GO IDs in a class
name, as shown in this example:
<g class="subcellular_location subcell_present GO9507" id="SL0049">
If you use SL IDs, you must strip the dash from the ID to use it as a CSS ID ('#') selector. In this example the color of SL0049 (Chloroplast) is changed to be red:
<!-- Override default style of image -->
<template id="sibSwissBioPicsStyle">
<style>
svg #SL0049 *:not(text) {fill:red}
svg #SL0049 *:not(path, .coloured) {opacity:0.8}
svg #SL0049 .coloured {stroke:black}
svg .mp_SL0049 *:not(text) {fill:red}
svg .mp_SL0049 *:not(path, .coloured) {opacity:0.8}
svg .mp_SL0049 .coloured {stroke:black}
svg .part_SL0049 *:not(text) {fill:red}
svg .part_SL0049 *:not(path, .coloured) {opacity:0.8}
svg .part_SL0049 .coloured {stroke:black}
</style>
</template>
If you use GO IDs, you must strip the leading '0's from the ID to use it as a CSS class ('.') selector:
<template id="sibSwissBioPicsStyle">
<style>
svg .GO9507 *:not(text) {fill:red}
svg .GO9507 *:not(path, .coloured) {opacity:0.8}
svg .GO9507 .coloured {stroke:black}
svg .mp_GO9507 *:not(text) {fill:red}
svg .mp_GO9507 *:not(path, .coloured) {opacity:0.8}
svg .mp_GO9507 .coloured {stroke:black}
svg .part_GO9507 *:not(text) {fill:red}
svg .part_GO9507 *:not(path, .coloured) {opacity:0.8}
svg .part_GO9507 .coloured {stroke:black}
</style>
</template>
The .mp_
and .part_
are used to highlight membranes (.mp_
) or parts (.part_
) of locations that have no SVG elements of their own in the image. For membranes and parts that have their own SVG elements the standard id
/class
is used to select and highlight them.
Customize sidebar
The sidebar shows all subcellular locations that are present in the image. You can display them as list items:
<!-- Display sidebar with list items -->
<template id="sibSwissBioPicsSlLiItem">
<li class="subcellular_location">
<a class="subcell_name"></a>
<span class="subcell_description"></span>
</li>
</template>
or table rows:
<!-- Display sidebar with table rows -->
<template id="sibSwissBioPicsSlLiItem">
<tr class="subcellular_location">
<td><a class="subcell_name"></a></td>
<td class="subcell_description"></td>
</tr>
</template>
or any other structure that you provide. The classes subcell_name
and subcell_description
are mandatory and the content of these elements is filled in by the web component, which calls this template for each subcellular location that is present in the image.
Note that if you change the layout of the sidebar, you may have to adapt the style of the sibSwissBioPicsStyle
template accordingly (see Customize style).