PubChem Classification Widget


What is the Classification Widget?back to top

The Classification Widget is a tool that enables you to display the classification of a PubChem Compound, Substance, or BioAssay of interest within your own web page.

It is one of several available PubChem Widgets, which are tools that provide a rapid way to display some commonly requested PubChem data views, including patents, bioactivity outcomes, literature, and classification terms associated with PubChem Compounds, Substances, and BioAssays.

This document describes the classification widget, and the main PubChem Widgets help document describes the other data views.

How are PubChem records classified?back to top

Many PubChem records (Compound, Substance, Assay) have been annotated with terms from available classification hierarchies such as MeSH, ChEBI, KEGG, LIPID MAPS, and Gene Ontology (GO), using the methods described in the main help document for the Classification Browser.

PubChem Compound, Substance, and Assay Summary pages display classification information applicable to the chemical structure or bioassay that you are viewing. For instance, take a look at these examples:

In each case all the available hierarchies are shown for the particular UID (CID, SID, or AID, respectively), only showing nodes that are relevant for that particular PubChem UID.

Display classifications for a PubChem record of interestback to top

Now we are making PubChem Classification Widget available to be inserted into any page by using an HTML div. Alternatively, one can link directly to the PubChem Classification Browser tool with the UID of interest preloaded (examples are provided below).


How to use the PubChem Classification Widget in your html page:back to top

To embed PubChem Classification Widget in your own HTML page, simply follow these 2 steps:

  1. Include the PubChem Classification javascript wrapper/loader script in the <head> or <body> of your html page:

        <script type="text/javascript" src="//pubchem.ncbi.nlm.nih.gov/classification/js/classification_widget_wrapper_dynamic_lib.js"></script>
        

    Note that this script will load all the libraries required by PubChem Classification Widgets: jQuery, jQuery UI, our scripts and style sheets.

    In case you are already using jQuery and jQuery UI in your page:

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
        

    We are also providing a script that does not load these libraries, but only loads the javascript and css files required by the Classification Widget:

        <script type="text/javascript" src="//pubchem.ncbi.nlm.nih.gov/classification/js/classification_widget_wrapper.js"></script>
        

    We are generally using the latest versions of jQuery and jQuery UI, but relatively recent versions of these libraries should be compatible with our code.

    The reason we are providing the wrapper that loads the latest version of the code required to render the Classification Widget is because it is still in Beta stage, and things are still expected to change. Hence, this way your page will always get the latest version.

  2. Position the widget with an html div

    For CID (see example of classification widget for CID 2244 (Aspirin)):

        <div class="pubchem-classification-widget-nav" data-config='{ "uid": "2244", "uid_type": "cid" }'></div>
        

    For SID (see example of classification widget for SID 160806895 (2-Methylbenzylamine)):

        <div class="pubchem-classification-widget-nav" data-config='{ "uid": "160806895", "uid_type": "sid" }'></div>
        

    For AID (see example of classification widget for AID 450 (GR-GFP Redistribution)):

        <div class="pubchem-classification-widget-nav" data-config='{ "uid": "450", "uid_type": "aid" }'></div>
        

    The widget will render itself within this div, which can be styled with desired padding, margins, border, width or other parameters just like any html div.

    Note that the widget will render itself when the page (and the libraries) are loaded. In case you are dynamically creating the div after the page has been loaded, you will need to run the following script to make sure that the widget gets rendered:

        <script type="text/javascript">
           ClassificationReady();
        </script>
        

How to link directly to the Classification Browser for a UID of interestback to top

As an alternative to embedding a PubChem Classification Widget within your own web page, you can link directly to the Classification Browser with a UID of interest preloaded, if desired. For example:

Log of Changes to PubChem Autocomplete Widgetback to top

08 APR 2012 Initial release of PubChem Classification Widget

Revised 12 April 2013