Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



Custom HTMLELement for rendering SwissBiopics and representing which subcellular locations are available

Version published
Weekly downloads
increased by5.88%
Weekly downloads




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.


Attribute nameValue
taxidNCBI taxonomy identifier of the organism.
slsList of comma-separated UniProtKB subcellular locations (SL) IDs. The IDs can be given without the 'SL-' prefix and leading '0's.
gosList of comma-separated Gene Ontology (GO) cellular component IDs. These will be mapped to UniProtKB subcellular location IDs before showing.
styleidOptional template ID to use an alternative style (see Customize style). The default value is sibSwissBioPicsStyle.


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:

  1. your local dependency path if you installed and imported the module, e.g.:
<script type="module" src="swissprot/swissbiopics.js"></script>
  1. the SwissBioPics website if you did not install the module:
<script type="module" src=""></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>

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:

  1. 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>
  1. 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">
        ul > li > a {
        ul.notpresent li > .subcell_description {

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">
<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">
        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}

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">
        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}

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>

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>

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).



Last updated on 09 May 2022

Did you know?


Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap


Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc