nih-gov/www.ncbi.nlm.nih.gov/tools/msaviewer/embedding-api/index.html

971 lines
53 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- AppResources meta begin -->
<meta name="paf-app-resources" content="" />
<!-- AppResources meta end -->
<!-- TemplateResources meta begin -->
<meta name="paf_template" content="StdNCol" />
<!-- TemplateResources meta end -->
<!-- Page meta begin -->
<!-- Page meta end -->
<!-- Logger begin -->
<meta xmlns:ncbi-portal="http://ncbi.gov/portal/XSLT/namespace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="ncbi_app" content="sviewerdocs" /><meta xmlns:ncbi-portal="http://ncbi.gov/portal/XSLT/namespace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="ncbi_pdid" content="sviewerdocs" />
<!-- Logger end -->
<title>NCBI Multiple Sequence Alignment Viewer Embedding API</title>
<!-- PageFixtures headcontent begin -->
<meta name="cms-local-nav-url" content="https://cms.ncbi.nlm.nih.gov//msaviewer/_nav" />
<!-- PageFixtures headcontent end -->
<!-- AppResources external_resources begin -->
<script type="text/javascript" src="/core/jig/1.15.6/js/jig.min.js"></script>
<!-- AppResources external_resources end -->
<!-- Page headcontent begin -->
<meta name="subsite" content="msaviewer" />
<meta name="path" content="msaviewer/embedding-api" />
<meta name="modified" content="2021-11-02T17:38:35Z" />
<link type="text/css" rel="stylesheet" href="/core/assets/msaviewer/css/msaviewerdocs.css" /><meta xmlns:ncbi-portal="http://ncbi.gov/portal/XSLT/namespace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="cms-edit-aux-url" content="http://cms.ncbi.nlm.nih.gov/node//edit" />
<!-- Page headcontent end -->
<!-- PageFixtures resources begin -->
<link xmlns="http://www.w3.org/1999/xhtml" type="text/css" rel="stylesheet" href="//static.pubmed.gov/portal/portal3rc.fcgi/4218191/css/4207974/4206132.css" xml:base="http://127.0.0.1/sites/static/header_footer" />
<!-- PageFixtures resources end -->
<link rel="shortcut icon" href="//www.ncbi.nlm.nih.gov/favicon.ico" /><meta name="ncbi_phid" content="CE8CBC357C80260100000000003B0031.m_5" /><script type="text/javascript"><!--
var ScriptPath = '/portal/';
var objHierarchy = {"name":"PAFAppLayout","type":"Layout","realname":"PAFAppLayout",
"children":[{"name":"PAFAppLayout.AppController","type":"Cluster","realname":"PAFAppLayout.AppController",
"children":[{"name":"PAFAppLayout.AppController.AppResources","type":"Portlet","realname":"PAFAppLayout.AppController.AppResources","shortname":"AppResources"},
{"name":"PAFAppLayout.AppController.RequestProcessor","type":"Portlet","realname":"PAFAppLayout.AppController.RequestProcessor","shortname":"RequestProcessor"},
{"name":"PAFAppLayout.AppController.Controller","type":"Cluster","realname":"PAFAppLayout.AppController.Controller",
"children":[{"name":"PAFAppLayout.AppController.Controller.CustomController","type":"Portlet","realname":"PAFAppLayout.AppController.Controller.CustomController","shortname":"CustomController"}]},
{"name":"PAFAppLayout.AppController.Page","type":"Cluster","realname":"PAFAppLayout.AppController.Page",
"children":[{"name":"PAFAppLayout.AppController.Page.PAFPageSelectorData","type":"Portlet","realname":"PAFAppLayout.AppController.Page.PAFPageSelector.PAFPageSelectorData","shortname":"PAFPageSelectorData"},
{"name":"PAFAppLayout.AppController.Page.StaticPage","type":"Cluster","realname":"PAFAppLayout.AppController.Page.StaticPage",
"children":[{"name":"PAFAppLayout.AppController.Page.StaticPage.MainPortlet","type":"Portlet","realname":"PAFAppLayout.AppController.Page.StaticPage.MainPortlet","shortname":"MainPortlet"}]}]},
{"name":"PAFAppLayout.AppController.PageFixtures","type":"Cluster","realname":"PAFAppLayout.AppController.PageFixtures",
"children":[{"name":"PAFAppLayout.AppController.PageFixtures.PageFixturesP","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.PageFixturesP","shortname":"PageFixturesP"},
{"name":"PAFAppLayout.AppController.PageFixtures.SearchBar","type":"Cluster","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.SearchBar",
"children":[{"name":"PAFAppLayout.AppController.PageFixtures.SearchBar.SearchBarChooser","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.SearchBar.SearchBarChooser","shortname":"SearchBarChooser"},
{"name":"PAFAppLayout.AppController.PageFixtures.SearchBar.NCBISearchBarLite","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.SearchBar.NCBISearchBarLite","shortname":"NCBISearchBarLite"}]},
{"name":"PAFAppLayout.AppController.PageFixtures.HeaderFooter","type":"Cluster","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.HeaderFooter",
"children":[{"name":"PAFAppLayout.AppController.PageFixtures.HeaderFooter.NCBIBreadcrumbs","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.HeaderFooter.NCBIBreadcrumbs","shortname":"NCBIBreadcrumbs"},
{"name":"PAFAppLayout.AppController.PageFixtures.HeaderFooter.NCBIHelpDesk","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.HeaderFooter.NCBIHelpDesk","shortname":"NCBIHelpDesk"},
{"name":"PAFAppLayout.AppController.PageFixtures.HeaderFooter.NCBIApplog_NoScript_Ping","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.HeaderFooter.NCBIApplog_NoScript_Ping","shortname":"NCBIApplog_NoScript_Ping"}]},
{"name":"PAFAppLayout.AppController.PageFixtures.LocalNavPortlet","type":"Portlet","realname":"PAFAppLayout.AppController.PageFixtures.PAFPageFixtures.LocalNavPortlet","shortname":"LocalNavPortlet"}]},
{"name":"PAFAppLayout.AppController.TemplateResources","type":"Cluster","realname":"PAFAppLayout.AppController.TemplateResources",
"children":[{"name":"PAFAppLayout.AppController.TemplateResources.StdNColResources","type":"Portlet","realname":"PAFAppLayout.AppController.TemplateResources.PAFTemplateResources.StdNColResources","shortname":"StdNColResources"}]},
{"name":"PAFAppLayout.AppController.Logger","type":"Portlet","realname":"PAFAppLayout.AppController.Logger","shortname":"Logger"},
{"name":"PAFAppLayout.AppController.DebugConsole","type":"Portlet","realname":"PAFAppLayout.AppController.DebugConsole","shortname":"DebugConsole"}]}]};
--></script>
<meta name='referrer' content='origin-when-cross-origin'/><link type="text/css" rel="stylesheet" href="//static.pubmed.gov/portal/portal3rc.fcgi/4201177/css/4121862/3974050/3917732/251717/4092826/3428953/14534/45193/3534283/4128070/3894326/4005757/2867781/3621797.css" /><link type="text/css" rel="stylesheet" href="//static.pubmed.gov/portal/portal3rc.fcgi/4201177/css/3529741/3529739.css" media="print" /><script type="text/javascript">
var ObjectLinks=[{i:0, ename: "p$ExL", esid:"*", sname: "p$ExL", ssid:"*", dname:"p$el", dsid:"0",m:"CopyValue",p:[],f: function(src, dst) {fn_CopyValue(src, dst);}}]
var ActiveNames = {"p$ExL":1};
</script></head>
<body class=" col2 sviewerdocs">
<div class="grid">
<div class="col twelve_col nomargin shadow">
<!-- System messages like service outage or JS required; this is handled by the TemplateResources portlet -->
<div class="sysmessages">
<noscript>
<p class="nojs">
<strong>Warning:</strong>
The NCBI web site requires JavaScript to function.
<a href="/guide/browsers/#enablejs" title="Learn how to enable JavaScript" target="_blank">more...</a>
</p>
</noscript>
</div>
<!--/.sysmessage-->
<div class="wrap">
<div class="page">
<div xmlns:xi="http://www.w3.org/2001/XInclude">
<div xmlns="http://www.w3.org/1999/xhtml" id="universal_header" xml:base="http://127.0.0.1/sites/static/header_footer">
<section class="usa-banner">
<div class="usa-accordion">
<header class="usa-banner-header">
<div class="usa-grid usa-banner-inner">
<img src="https://www.ncbi.nlm.nih.gov/coreutils/uswds/img/favicons/favicon-57.png" alt="U.S. flag" />
<p>An official website of the United States government</p>
<button class="non-usa-accordion-button usa-banner-button" aria-expanded="false" aria-controls="gov-banner-top" type="button">
<span class="usa-banner-button-text">Here's how you know</span>
</button>
</div>
</header>
<div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner-top" aria-hidden="true">
<div class="usa-banner-guidance-gov usa-width-one-half">
<img class="usa-banner-icon usa-media_block-img" src="https://www.ncbi.nlm.nih.gov/coreutils/uswds/img/icon-dot-gov.svg" alt="Dot gov" />
<div class="usa-media_block-body">
<p>
<strong>The .gov means it's official.</strong>
<br />
Federal government websites often end in .gov or .mil. Before
sharing sensitive information, make sure you're on a federal
government site.
</p>
</div>
</div>
<div class="usa-banner-guidance-ssl usa-width-one-half">
<img class="usa-banner-icon usa-media_block-img" src="https://www.ncbi.nlm.nih.gov/coreutils/uswds/img/icon-https.svg" alt="Https" />
<div class="usa-media_block-body">
<p>
<strong>The site is secure.</strong>
<br />
The <strong>https://</strong> ensures that you are connecting to the
official website and that any information you provide is encrypted
and transmitted securely.
</p>
</div>
</div>
</div>
</div>
</section>
<div class="usa-overlay"></div>
<header class="ncbi-header" role="banner" data-section="Header">
<div class="usa-grid">
<div class="usa-width-one-whole">
<div class="ncbi-header__logo">
<a href="/" class="logo" aria-label="NCBI Logo" data-ga-action="click_image" data-ga-label="NIH NLM Logo">
<img src="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/logos/AgencyLogo.svg" alt="NIH NLM Logo" />
</a>
</div>
<div class="ncbi-header__account">
<a id="account_login" href="https://account.ncbi.nlm.nih.gov" class="usa-button header-button" style="display:none" data-ga-action="open_menu" data-ga-label="account_menu">Log in</a>
<button id="account_info" class="header-button" style="display:none" aria-controls="account_popup" type="button">
<span class="fa fa-user" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20px" height="20px">
<g style="fill: #fff">
<ellipse cx="12" cy="8" rx="5" ry="6"></ellipse>
<path d="M21.8,19.1c-0.9-1.8-2.6-3.3-4.8-4.2c-0.6-0.2-1.3-0.2-1.8,0.1c-1,0.6-2,0.9-3.2,0.9s-2.2-0.3-3.2-0.9 C8.3,14.8,7.6,14.7,7,15c-2.2,0.9-3.9,2.4-4.8,4.2C1.5,20.5,2.6,22,4.1,22h15.8C21.4,22,22.5,20.5,21.8,19.1z"></path>
</g>
</svg>
</span>
<span class="username desktop-only" aria-hidden="true" id="uname_short"></span>
<span class="sr-only">Show account info</span>
</button>
</div>
<div class="ncbi-popup-anchor">
<div class="ncbi-popup account-popup" id="account_popup" aria-hidden="true">
<div class="ncbi-popup-head">
<button class="ncbi-close-button" data-ga-action="close_menu" data-ga-label="account_menu" type="button">
<span class="fa fa-times">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="24px" height="24px">
<path d="M38 12.83l-2.83-2.83-11.17 11.17-11.17-11.17-2.83 2.83 11.17 11.17-11.17 11.17 2.83 2.83 11.17-11.17 11.17 11.17 2.83-2.83-11.17-11.17z"></path>
</svg>
</span>
<span class="usa-sr-only">Close</span></button>
<h4>Account</h4>
</div>
<div class="account-user-info">
Logged in as:<br />
<b><span class="username" id="uname_long">username</span></b>
</div>
<div class="account-links">
<ul class="usa-unstyled-list">
<li><a id="account_myncbi" href="/myncbi/" class="set-base-url" data-ga-action="click_menu_item" data-ga-label="account_myncbi">Dashboard</a></li>
<li><a id="account_pubs" href="/myncbi/collections/bibliography/" class="set-base-url" data-ga-action="click_menu_item" data-ga-label="account_pubs">Publications</a></li>
<li><a id="account_settings" href="/account/settings/" class="set-base-url" data-ga-action="click_menu_item" data-ga-label="account_settings">Account settings</a></li>
<li><a id="account_logout" href="/account/signout/" class="set-base-url" data-ga-action="click_menu_item" data-ga-label="account_logout">Log out</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div role="navigation" aria-label="access keys">
<a id="nws_header_accesskey_0" href="https://www.ncbi.nlm.nih.gov/guide/browsers/#ncbi_accesskeys" class="usa-sr-only" accesskey="0" tabindex="-1">Access keys</a>
<a id="nws_header_accesskey_1" href="https://www.ncbi.nlm.nih.gov" class="usa-sr-only" accesskey="1" tabindex="-1">NCBI Homepage</a>
<a id="nws_header_accesskey_2" href="/myncbi/" class="set-base-url usa-sr-only" accesskey="2" tabindex="-1">MyNCBI Homepage</a>
<a id="nws_header_accesskey_3" href="#maincontent" class="usa-sr-only" accesskey="3" tabindex="-1">Main Content</a>
<a id="nws_header_accesskey_4" href="#" class="usa-sr-only" accesskey="4" tabindex="-1">Main Navigation</a>
</div>
<section data-section="Alerts">
<div class="ncbi-alerts-placeholder"></div>
</section>
</div>
</div>
<!--/.header-->
<div class="header">
<div class="res_logo"><h1 class="res_name"><a href="/tools/msaviewer/" title="Multiple Sequence Alignment Viewer home">Multiple Sequence Alignment Viewer</a></h1><h2 class="res_tagline"></h2></div>
<form class="search_form" action="/gquery/" method="get">
<label for="searchbarlite">Search NCBI </label>
<input class="jig-ncbiclearbutton" type="text" size="40" id="searchbarlite" name="term" />
<button type="submit" id="search" class="button_search">Search</button>
<style type="text/css"></style>
<input type="hidden" name="p$a" id="p$a" /><input type="hidden" name="p$l" id="p$l" value="PAFAppLayout" /><input type="hidden" name="p$st" id="p$st" value="tools" /><input name="SessionId" id="SessionId" value="CE8B5AF87C7FFCB1_0191SID" disabled="disabled" type="hidden" /><input name="Snapshot" id="Snapshot" value="/projects/staticsites/sviewer/sviewerdoc@1.22" disabled="disabled" type="hidden" /></form>
</div>
<div class="nav_and_browser">
<div class="localnav"><ul class="jig-ncbilocalnav">
<li><a href="#">MSA Viewer</a><ul>
<li><a href="/projects/msaviewer/">Multiple Sequence Alignment Viewer application</a></li>
</ul>
</li>
<li><a href="#">General</a><ul>
<li><a href="/tools/msaviewer/about/">About</a></li>
<li><a href="/tools/msaviewer/embedding-api/">MSA Viewer Embedding API</a></li>
<li><a href="/tools/msaviewer/release-notes/">Release Notes</a></li>
</ul>
</li>
<li><a href="#">Help</a><ul>
<li><a href="/tools/msaviewer/tutorial1">Guide to Using the MSA Viewer</a></li>
<li><a href="/tools/msaviewer/video/">Video Tutorials</a></li>
<li><a href="/tools/msaviewer/legend/">Legend</a></li>
</ul>
</li>
<li><a href="#">Demo Pages</a><ul>
<li><a href="/projects/msaviewer/demo/demo_static.html">Static embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_dynamic.html">Dynamic embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_sort.html">Sorting parameters embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_consensus.html">Consensus parameters embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_events.html">Event Handling</a></li>
<li><a href="/projects/msaviewer/demo/demo_coloring.html">Coloring</a></li>
<li><a href="/projects/msaviewer/demo/demo_columns.html">Customizing Columns</a></li>
<li><a href="/projects/msaviewer/demo/demo_mapping.html">Alignment Coordinate Transformation</a> </li>
</ul>
</li>
<li><a href="#">Related Resources</a><ul>
<li><a href="/projects/sviewer/">Sequence Viewer</a></li>
<li><a href="/projects/treeview/">Tree Viewer</a></li>
</ul>
</li>
</ul></div>
</div>
<!-- was itemctrl -->
<div class="container">
<div id="maincontent" class="content col twelve_col last">
<div class="col1">
<h1 id="ncbi-multiple-sequence-alignment">NCBI Multiple Sequence Alignment Viewer Embedding API</h1>
<ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#simple">Simple Steps to Getting the Embed Code</a></li>
<li><a href="#including">Including MSA Viewer on a web page</a></li>
<li><a href="#dataformats">Data Formats Supported</a></li>
<li><a href="#parameters">MSA Viewer Parameters</a></li>
<li><a href="#events">Events Sent by MSA Viewer</a><ul>
<li><a href="#functions">Functions</a></li>
<li><a href="#methods">App methods</a></li>
</ul>
</li>
<li><a href="#size">Size and position parameters</a><ul>
<li><a href="#fixedHeight">Fixed height</a></li>
<li><a href="#adjustHeight">Adjustable height</a></li>
<li><a href="#margin">Max margin to the bottom of the page</a></li>
</ul>
</li>
<li><a href="#demos">Embedding Demos</a></li>
</ul>
<p><span id="introduction"></span></p>
<h2 id="introduction">Introduction</h2>
<p>The NCBI Multiple Sequence (MSA) Alignment Viewer is a general purpose tool for viewing multiple alignments of biological sequences. It can be embedded in a wide variety of web pages and with a large number of options. This document serves as a launching point to understand how to embed the Multiple Sequence Alignment Viewer in any context. For purposes of standardization in this document, all links presented include the common refrain <a href="https://www.ncbi.nlm.nih.gov">https://www.ncbi.nlm.nih.gov</a>.</p>
<p>For questions please contact the <a href="https://support.nlm.nih.gov/support/create-case/">NCBI Help Desk</a>. </p>
<p>Additional documentation can be found at: <a href="https://www.ncbi.nlm.nih.gov/tools/msaviewer">http://www.ncbi.nlm.nih.gov/tools/msaviewer</a></p>
<p><span id="simple"></span></p>
<h2 id="simple-steps-to-getting-the-embe">Simple Steps to Getting the Embed Code</h2>
<p>This embedding workflow requires almost no JavaScript programming experience.</p>
<ol>
<li>Pick an alignment of interest and view it on the web version of MSA Viewer (https://www.ncbi.nlm.nih.gov/projects/msaviewer/). </li>
<li>Set an anchor sequence/consensus if desired and adjust the coloring scheme. </li>
<li>Use the "Link to View" option to show the URL, short-link URL, and embedding code. </li>
</ol>
<p><a href="/core/assets/msaviewer/images/Link-To-View-MSA.png"><img src="/core/assets/msaviewer/images/Link-To-View-MSA.png" alt="Link-To-View-MSA" class="sshot" /></a></p>
<p>There are two types of embedding code. The first option, Embed code for IFRAME, can be used as is to embed the MSA Viewer by itself as an IFRAME. The second option,Whole page example, can be used to embed the MSA Viewer as a part of your page. This option has both the script in the HEAD element and DIV element with parameters.</p>
<p><span id="including"></span></p>
<h2 id="including-msa-viewer-on-a-web-pa">Including MSA Viewer on a web page</h2>
<p>The Multiple Sequence Viewer is a component which can be embedded on internal NCBI as well as external Web page.</p>
<p>The Viewer is implemented using ExtJS JavaScript library version 5.0.1. There are some rules to follow when including the Viewer as a component on a page.</p>
<ol>
<li>
<p>There is no need to declare or load ExtJS css files or js scripts. MSAV dynamically loads everything it needs from www.ncbi.nlm.nin.com website. On the other hand if ExtJS scripts are declared/loaded before multialign.js declaration MSAV omits their loading so this allows an embedding application to use a specific edition of the library (compatible to version 5.0.1). The following example demonstrate how to declare MSAV script:
<div><pre>
&lt;script type="text/javascript"
src="https://www.ncbi.nlm.nih.gov/projects/msaviewer/js/multialign.js"&gt;&lt;/script&gt;
</pre></div></p>
</li>
<li>
<p>If an embedding application does not create MSAV instances dynamically MSAV application finds appropriate MultiAlignViewerApp declarations and create instances automatically (with data loading). For this the div element should have class='MultiAlignViewerApp' and extra attribute data-autoload, and a element inside div with href attribute containing MSA Viewer parameters. An example is:
<div><pre>
&lt;div id='some-id' class='MultiAlignViewerApp' data-autoload&gt;
&lt;a href='?embedded=true&amp;id=…'&gt;&lt;a&gt;
&lt;/div&gt;
</pre></div></p>
<p>Please pay attention to the question mark at the beginning of href argument. It is a syntax dictated by Web browsers and is obligatory.</p>
<p>Do not use this method if the Multiple Sequence Alignment Viewer div is initially hidden - it breaks all the logic as the Viewer needs to have real coordinate for proper rendering. Use method from point 3 to instantiate Multiple Sequence Alignment Viewer dynamically.</p>
</li>
<li>
<p>If an embedding application needs to create MSAV instances dynamically the following example demonstrates how to declare them and initiate MSAV instances creation and loading:
<div><pre>
&lt;div id=msav1&gt;&lt;/div&gt;
...
&lt;script type='text/javascript'&gt;
MultiAlignViewOnReady(function()
{ var app = new MultiAlignView.App(msav1); app.load(embedded=true&amp;id=…’); }
);
&lt;/script&gt;
</pre></div></p>
</li>
<li>
<p>Function MultiAlignViewOnReady(callback, [scope]) is designed to prevent MSAV usage before MultiAlignView class is initialized.</p>
<p>Parameters:
<strong>callback</strong> - user callback function
<strong>scope</strong> - callback function scope (if necessary)</p>
</li>
</ol>
<p><span id="dataformats"></span></p>
<h2 id="data-formats-supported">Data Formats Supported</h2>
<p>NCBI ASN.1 data containing alignment objects.</p>
<p>BLAST RID request id of submission of a sequence to NCBI BLAST service.</p>
<p>MUSCLE external format (to be implemented), result of run of MUSCLE tool ( <a href="https://www.drive5.com/muscle/">https://www.drive5.com/muscle/</a> ).</p>
<p><span id="parameters"></span></p>
<h2 id="msa-viewer-parameters">MSA Viewer Parameters</h2>
<p>Parameters may be passed to Multiple Sequence Alignment Viewer by putting them in the included &lt;a href=''&gt; link tag within the MSA Viewer &lt;div&gt; tag.</p>
<p><strong>appname</strong> its a way to identify who is using the component. Its a mandatory parameter which should be unique for your application. If you plan to embed MSA Viewer on your page please email us at sviewer-service AT ncbi.nlm.nih.gov with suggested load so that we can plan our resource allocation.</p>
<p><strong>embedded</strong> - defines the mode of MSA Viewer. Value 'true' does not include panorama view, value 'full' includes it. It is highly recommended to use this parameter as it changes processing of environment (e.g. it does not interpret URL string as a set of parameters) and provides better isolation of MSA Viewer component.</p>
<p>One of the following parameters MUST be present as a source of alignment data:</p>
<p><strong>id</strong> id of the sequence which has alignment data, can be gi or accession<br /></p>
<p><strong>rid</strong> BLAST RID for already finished job<br /></p>
<p><strong>url</strong> URL pointing to the data file<br /></p>
<p><strong>key</strong> key for the data stored at NCBI after user data upload. Usually visible in URL produced by applications<br /></p>
<p>There are two alternative ways to set a visible range for the view:</p>
<blockquote>
<blockquote>
<p><strong>f</strong> from, 1-based position of the beginning of the view<br />
<strong>t</strong> to, 1-based position of the end of the view<br />
or<br />
<strong>v</strong> view range, 1-based range in the format from:to</p>
</blockquote>
</blockquote>
<p><strong>master</strong> the id of a row to be selected as anchor<br /></p>
<p><strong>collapse_pan</strong> adding this parameter (without values) hides annotated features under MSA Panorama View<br /></p>
<p><strong>coloring</strong> coloring method, abbreviated value, see setColoring below<br /></p>
<p><span id="conservation"></span>
<strong>coloring_opt</strong> options for coloring methods (currently implemented only for "cons" method).
Conservation method uses two colors red and blue to designate highly conserved or less conserved regions.
The threshold between these colors is defined by this options and is expressed as bit score.
To set this option strings one_bit, two_bits, three_bits, four_bits, five_bits, identity are used.
The value defines the “information content” of the column threshold. It is calculated by the formula \sum_{i} (f(i) * log_2 (f(i)/q(i)),
where i is over all residue types, f(i) is observed residue frequency, and q(i) is background/relative residue frequency which is defined by BLOSUM62 matrix.
The <strong>Identity</strong> setting uses <strong>red</strong> font <strong>only in columns that contain the same residue</strong> in all of the sequence rows displayed.
All other aligned columns are colored in <strong>blue</strong> and unaligned columns are shown in <strong>grey</strong> .</p>
<p><strong>datasource</strong> - multiple values, 'id', 'local' separated by comma. E.g. datasource=local,id - first look for sequences/annotations in the provided ASN.1 file, if not available check ID. datasource=id,local - try to get data from ID, if not available use the local file. datasource=local - use the alignment ASN.1 file as the only datasource.</p>
<p><strong>identical</strong> - true/false value defining should we show bases/AAs identical to consensus or anchor as letters. Default - false, meaning we show bases/AAs identical to consensus as dots.</p>
<p><strong>consensus</strong> - true/false value defining whether we show consensus when anchor is not set. Default - true.</p>
<p><strong>cds_alignment</strong> - true/false value, provides viewer with additional info about alignment and that we should color non-synonymous changes. Default - false.</p>
<p><strong>columns</strong> - allows to re-arrange columns including adjusting column width, disabling some default columns, enabling optional ones and changing columns order.</p>
<p>Format examples:</p>
<ul>
<li><strong>columns=d:80,b:30,e:30,o:100</strong> - adjusting widths of default columns</li>
<li><strong>columns=e:0,b:0,is,cntr:80</strong> - disables default columns “Start” and “End”, enables optional columns “Isolation Source” with default width and “Country”</li>
<li><strong>columns=d,o:100,cd,aln,h</strong> - adding “aln” column to the list allows to change columns order</li>
</ul>
<p>The letters corresponding to the default columns as follows: <strong>d</strong> - Sequence ID, <strong>b</strong> - Start, <strong>e</strong> - End, <strong>o</strong> Organism.
Optional columns can be designated by the following acronyms/letters: <strong>cd</strong> Collection Date, <strong>h</strong> Host, <strong>is</strong> Isolation Source, <strong>cntr</strong> Country, <strong>pi</strong> - Identity, <strong>c</strong> - Coverage, <strong>mm</strong> - Mismatches, <strong>gs</strong> - Gene symbol.
Special column <strong>aln</strong> stands for the graphical section of alignments.</p>
<p><strong>sort</strong> - allows to sort data by column in ascending or descending order. Format: sort=column_name:sort_order, where column_name is one of the following: <strong>d</strong> - Sequence ID, <strong>b</strong> - Start, <strong>e</strong> - End, <strong>o</strong> - Organism;
sort_order: <strong>a</strong> - ascending, <strong>d</strong> - descending, sort_order may be omitted with default = a.
Examples:
<strong><em>sort=o:d</em></strong> descending sort by organism
<strong><em>sort=b</em></strong> ascending sort by Start</p>
<p><span id="events"></span></p>
<h2 id="events-sent-by-msav">Events Sent by MSAV</h2>
<p>An application that uses MSAV can subscribe to events that MSAV will send in case of a user interaction with MSAV. Here is the list of supported events with parameters passed in each event.</p>
<p><strong>'graphical_image_loaded'</strong> - fired when graphical image is loaded to view
view view object of the just loaded image</p>
<p><strong>'visible_range_changed'</strong> - fired when visible range is changed (for example, zoom or shift)
range array with [from, to, len] of the sequence or alignment visible</p>
<p><strong>'selection_changed'</strong> - fired when the selection is changed
rows array of row ids selected</p>
<p><strong>'master_changed'</strong> - fired when the anchor is set/unset
row_id row id of new anchor or null if anchor is unset</p>
<p><strong>'coloring_changed'</strong> - fired when coloring of the alignment is changed
coloring what specific coloring is applied</p>
<p><span id="functions"></span></p>
<h3 id="functions">Functions</h3>
<p><strong>MultiAlignView.App.getApps()</strong> get array with all app objects</p>
<p><strong>MultiAlignView.App.findAppByIndex(num)</strong> find an app by its ordinal number</p>
<p><strong>MultiAlignView.App.findAppByDivId(id)</strong> find an app instantiated in div with given id</p>
<p><span id="methods"></span></p>
<h3 id="app-methods">App Methods</h3>
<p><strong>reload(params)</strong> - reloads the application with <a href="#parameters">MSA Viewer Parameters</a></p>
<p><strong>getRows(fSelected)</strong> get array of all or only selected rows</p>
<p><strong>selectRow(row_id, fSelect)</strong> select or unselect row with row_id</p>
<p><strong>mapCoords(coords, source, target, callback)</strong> - translates an array of coordinates from a source alignment to a target alignment, where:
<strong>coords</strong> - array of translated coordinates,
<strong>source</strong> - current anchor ID or string "alignment" if no anchor is set,
<strong>target</strong> - target alignment row ID,
<strong>callback(response)</strong> - a callback function processing results of mapping, where <strong>response</strong> is an array of translated coordinates.</p>
<p><strong>getMaster</strong> get currently set anchor or null if unset</p>
<p><strong>setMaster(row_id)</strong> set anchor</p>
<p><strong>getRowInfo(row_id)</strong> returns object with following fields (can be extended in the future):
<strong>id</strong> sequence id for the row,
<strong>start</strong> start of the sequence in the alignment,
<strong>end</strong> end of the sequence in the alignment</p>
<p><strong>setColoring(coloring)</strong> set coloring, one of the following:</p>
<blockquote>
<blockquote>
<p><em>Value Description:</em><br />
<strong>disable</strong> - Disable alignment score coloration<br />
<strong>fbd</strong> DNA/Protein: Score residues based on their frequency in the column<br />
<strong>diff</strong> DNA/Protein: Score residues based on match/mismatch to a master/anchor row<br />
<strong>na</strong> DNA: Assign color based on residue (A Red, G Blue, C Yellow, T Green)<br />
<strong>cq_na</strong> DNA: Score residues based on how well a particular residue agrees with the others in a column<br />
<strong>cq_aa</strong> Protein: Score residues based on how well a particular residue agrees with the others in a column.<br />
<strong>rasmol</strong> Protein: Used by the application RasMol to group amino acids with similar properties<br />
<strong>shapely</strong> Protein: Used by the application RasMol to group amino acids with similar shapes using a standard color table<br />
<strong>blosum45</strong> Protein: Matrix made by matblas from blosum45.iij BLOSUM Clustered Scoring Matrix in 1/3 Bit Units<br />
<strong>blosum62</strong> Protein: Matrix made by matblas from blosum62.iij BLOSUM Clustered Scoring Matrix in 1/2 Bit Units<br />
<strong>blosum80</strong> Protein: Matrix made by matblas from blosum80.iij BLOSUM Clustered Scoring Matrix in 1/2 Bit Units<br />
<strong>hydropathy</strong> Protein: Side chain hydropathy, corrected for solvation<br />
<strong>membrane</strong> Protein: Membrane-buried preference parameters<br />
<strong>signal</strong> Protein: Signal sequence helical potential<br />
<strong>size</strong> Protein: Amino acid size<br />
<strong>cons</strong> Displays degrees of conservation among aligned residues<br />
<strong>nss</strong> - nonsynonymous substitution. Colors triplets of nucleotides which translate into different amino-acid than consensus or anchor sequence. For this coloring method to work sequences participating in an alignment should be complete CDSs starting with start codon, and consensus should be coded unambiguously. When this parameter present, menu item 'Nonsynonymous substitutions' is added to 'Coloring' menu.</p>
</blockquote>
</blockquote>
<p><strong>getColoring()</strong> returns current coloring</p>
<p><strong>getColoringMethods()</strong> - returns an available list the coloring methods</p>
<p><strong>setColumns(params)</strong> - re-arranges columns with params described in <a href="#parameters">MSA Viewer Parameters</a>.</p>
<p><span id="size"></span></p>
<h2 id="size-and-position-parameters">Size and position parameters</h2>
<p>You can specify the height of the MSAV view.</p>
<p><span id="fixedHeight"></span></p>
<h3 id="fixed-height">Fixed height</h3>
<p>Define CSS value <strong>height</strong> either directly in the MSAV div element:</p>
<div><pre>
&lt;div id='some-id' class='MultiAlignViewerApp' data-autoload style='height:400px'&gt;
&lt;a href='?embedded=true&amp;...'&gt;&lt;/a&gt;
&lt;/div&gt;
</pre></div>
<p>or in a CSS class</p>
<div><pre>
&lt;style type='text/css'&gt;
.my-msa-view {height: 400px;}
&lt;/style&gt;
...
&lt;div id='some-id' class='MultiAlignViewerApp my-msa-view' data-autoload&gt;
&lt;a href='?embedded=true&amp;...'&gt;&lt;/a&gt;
&lt;/div&gt;
</pre></div>
<p><span id="adjustHeight"></span></p>
<h3 id="adjustable-height">Adjustable height</h3>
<p>Specify CSS values <strong>max-height</strong> and <strong>min-height</strong> directly</p>
<div><pre>
&lt;div id='some-id' class='MultiAlignViewerApp' data-autoload style='min-height:200px;max-height:500px'&gt;
&lt;a href='?embedded=true&amp;...'&gt;&lt;/a&gt;
&lt;/div&gt;
</pre></div>
<p>or via a class:</p>
<div><pre>
&lt;style type='text/css'&gt;
.my-msa-view {min-height: 200px;max-height:500px}
&lt;/style&gt;
...
&lt;div id='some-id' class='MultiAlignViewerApp my-msa-view' data-autoload&gt;
&lt;a href='?embedded=true&amp;...'&gt;&lt;/a&gt;
&lt;/div&gt;
</pre></div>
<p><span id="margin"></span></p>
<h3 id="max-margin-to-the-bottom-of-the-">Max margin to the bottom of the page</h3>
<p>Add <strong>data-bottom</strong> attribute as the margin in pixels (you can, optionally, specify <strong>min-height</strong> as well):</p>
<div><pre>
&lt;div id='some-id' class='MultiAlignViewerApp' data-autoload data-bottom=80 style='min-height:200px'&gt;
&lt;a href='?embedded=true&amp;...'&gt;&lt;/a&gt;
&lt;/div&gt;
</pre></div>
<p><span id="demos"></span></p>
<h2 id="embedding-demos">Embedding Demos</h2>
<p><a href="/projects/msaviewer/demo/demo_static.html">Static Embedding Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_dynamic.html">Dynamic Embedding Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_sv.html">Interaction with Sequence Viewer Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_events.html">Event Handling Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_coloring.html">Coloring Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_mapping.html">Alignment Coordinate Transformation Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_consensus.html">Consensus Parameters Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_sort.html">Sorting Parameters Demo</a></p>
<p><a href="/projects/msaviewer/demo/demo_columns.html">Columns Re-arranging Demo</a></p>
</div>
<!--/.col1-->
<div class="col2">
<h2 id="table-of-contents">Table of Contents</h2><ul>
<li><a href="/projects/msaviewer/">Multiple Sequence Alignment Viewer application</a></li>
<li><a href="/tools/msaviewer/">Documentation home</a></li>
<li>General<ul>
<li><a href="/tools/msaviewer/about/">About</a></li>
<li><a href="/tools/msaviewer/embedding-api/">MSA Viewer Embedding API</a></li>
<li><a href="/tools/msaviewer/release-notes/">Release Notes</a></li>
</ul>
</li>
<li>Help<ul>
<li><a href="/tools/msaviewer/tutorial1">Guide to Using the MSA Viewer</a></li>
<li><a href="/tools/msaviewer/video/">Video Tutorials</a></li>
<li><a href="/tools/msaviewer/legend/">Legend</a></li>
</ul>
</li>
<li>Demo Pages<ul>
<li><a href="/projects/msaviewer/demo/demo_static.html">Static embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_dynamic.html">Dynamic embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_sort.html">Sorting parameters embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_consensus.html">Consensus parameters embedding</a></li>
<li><a href="/projects/msaviewer/demo/demo_events.html">Event Handling</a></li>
<li><a href="/projects/msaviewer/demo/demo_coloring.html">Coloring</a></li>
<li><a href="/projects/msaviewer/demo/demo_columns.html">Customizing Columns</a></li>
<li><a href="/projects/msaviewer/demo/demo_mapping.html">Alignment Coordinate Transformation</a></li>
</ul>
</li>
<li>Related Resources<ul>
<li><a href="/projects/sviewer/">Sequence Viewer</a></li>
<li><a href="/projects/treeview/">Tree Viewer</a></li>
</ul>
</li>
</ul>
</div>
<!--/.col2-->
<div class="col3">
</div>
<!--/.col3-->
<div class="col4">
</div>
<!--/.col4-->
<div class="col5">
</div>
<div class="col6">
</div>
<div class="col7">
</div>
<div class="col8">
</div>
<div class="col9">
</div>
</div><!--/.content-->
</div><!--/.container-->
<div id="NCBIFooter_dynamic">
<div class="breadcrumbs">You are here:
<span id="breadcrumb_text"><a href="/guide/">NCBI</a></span></div>
<a id="help-desk-link" class="help_desk" href="https://support.ncbi.nlm.nih.gov/ics/support/default.asp?Time=2025-03-05T03:07:56-05:00&amp;Snapshot=%2Fprojects%2Fstaticsites%2Fsviewer%2Fsviewerdoc@1.22&amp;Host=portal105&amp;ncbi_phid=CE8CBC357C80260100000000003B0031&amp;ncbi_session=CE8B5AF87C7FFCB1_0191SID&amp;from=https%3A%2F%2Fwww.ncbi.nlm.nih.gov%2Ftools%2Fmsaviewer%2Fembedding-api%2F&amp;Ncbi_App=sviewerdocs&amp;Page=sviewerdocs&amp;style=classic&amp;deptID=28049" target="_blank">Support Center</a>
<noscript><img alt="" src="/stat?jsdisabled=true&amp;ncbi_app=sviewerdocs&amp;ncbi_db=&amp;ncbi_pdid=sviewerdocs&amp;ncbi_phid=CE8CBC357C80260100000000003B0031" /></noscript>
</div>
<div xmlns:xi="http://www.w3.org/2001/XInclude">
<div xmlns="http://www.w3.org/1999/xhtml" class="footer" id="footer" xml:base="http://127.0.0.1/sites/static/header_footer">
<section class="icon-section">
<div id="icon-section-header" class="icon-section_header">Follow NCBI</div>
<div class="grid-container container">
<div class="icon-section_container">
<a class="footer-icon" id="footer_twitter" href="https://twitter.com/ncbi" aria-label="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
<title>Twitter</title>
<g id="twitterx1008">
<path id="path1008" d="M6.06736 7L16.8778 20.8991L6.00001 32.2H10.2L18.6 23.1L25.668 32.2H34L22.8 17.5L31.9 7H28.4L20.7 15.4L14.401 7H6.06898H6.06736ZM9.66753 8.73423H12.9327L29.7327 30.4658H26.5697L9.66753 8.73423Z" fill="#5B616B"></path>
</g>
</svg>
</a>
<a class="footer-icon" id="footer_facebook" href="https://www.facebook.com/ncbi.nlm" aria-label="Facebook"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 300 300">
<title>Facebook</title>
<path class="cls-11" d="M210.5,115.12H171.74V97.82c0-8.14,5.39-10,9.19-10h27.14V52l-39.32-.12c-35.66,0-42.42,26.68-42.42,43.77v19.48H99.09v36.32h27.24v109h45.41v-109h35Z">
</path>
</svg></a>
<a class="footer-icon" id="footer_linkedin" href="https://www.linkedin.com/company/ncbinlm" aria-label="LinkedIn"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 300 300">
<title>LinkedIn</title>
<path class="cls-11" d="M101.64,243.37H57.79v-114h43.85Zm-22-131.54h-.26c-13.25,0-21.82-10.36-21.82-21.76,0-11.65,8.84-21.15,22.33-21.15S101.7,78.72,102,90.38C102,101.77,93.4,111.83,79.63,111.83Zm100.93,52.61A17.54,17.54,0,0,0,163,182v61.39H119.18s.51-105.23,0-114H163v13a54.33,54.33,0,0,1,34.54-12.66c26,0,44.39,18.8,44.39,55.29v58.35H198.1V182A17.54,17.54,0,0,0,180.56,164.44Z">
</path>
</svg></a>
<a class="footer-icon" id="footer_github" href="https://github.com/ncbi" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 300 300">
<defs>
<style>
.cls-11,
.cls-12 {
fill: #737373;
}
.cls-11 {
fill-rule: evenodd;
}
</style>
</defs>
<title>GitHub</title>
<path class="cls-11" d="M151.36,47.28a105.76,105.76,0,0,0-33.43,206.1c5.28,1,7.22-2.3,7.22-5.09,0-2.52-.09-10.85-.14-19.69-29.42,6.4-35.63-12.48-35.63-12.48-4.81-12.22-11.74-15.47-11.74-15.47-9.59-6.56.73-6.43.73-6.43,10.61.75,16.21,10.9,16.21,10.9,9.43,16.17,24.73,11.49,30.77,8.79,1-6.83,3.69-11.5,6.71-14.14C108.57,197.1,83.88,188,83.88,147.51a40.92,40.92,0,0,1,10.9-28.39c-1.1-2.66-4.72-13.42,1-28,0,0,8.88-2.84,29.09,10.84a100.26,100.26,0,0,1,53,0C198,88.3,206.9,91.14,206.9,91.14c5.76,14.56,2.14,25.32,1,28a40.87,40.87,0,0,1,10.89,28.39c0,40.62-24.74,49.56-48.29,52.18,3.79,3.28,7.17,9.71,7.17,19.58,0,14.15-.12,25.54-.12,29,0,2.82,1.9,6.11,7.26,5.07A105.76,105.76,0,0,0,151.36,47.28Z">
</path>
<path class="cls-12" d="M85.66,199.12c-.23.52-1.06.68-1.81.32s-1.2-1.06-.95-1.59,1.06-.69,1.82-.33,1.21,1.07.94,1.6Zm-1.3-1">
</path>
<path class="cls-12" d="M90,203.89c-.51.47-1.49.25-2.16-.49a1.61,1.61,0,0,1-.31-2.19c.52-.47,1.47-.25,2.17.49s.82,1.72.3,2.19Zm-1-1.08">
</path>
<path class="cls-12" d="M94.12,210c-.65.46-1.71,0-2.37-.91s-.64-2.07,0-2.52,1.7,0,2.36.89.65,2.08,0,2.54Zm0,0"></path>
<path class="cls-12" d="M99.83,215.87c-.58.64-1.82.47-2.72-.41s-1.18-2.06-.6-2.7,1.83-.46,2.74.41,1.2,2.07.58,2.7Zm0,0">
</path>
<path class="cls-12" d="M107.71,219.29c-.26.82-1.45,1.2-2.64.85s-2-1.34-1.74-2.17,1.44-1.23,2.65-.85,2,1.32,1.73,2.17Zm0,0">
</path>
<path class="cls-12" d="M116.36,219.92c0,.87-1,1.59-2.24,1.61s-2.29-.68-2.3-1.54,1-1.59,2.26-1.61,2.28.67,2.28,1.54Zm0,0">
</path>
<path class="cls-12" d="M124.42,218.55c.15.85-.73,1.72-2,1.95s-2.37-.3-2.52-1.14.73-1.75,2-2,2.37.29,2.53,1.16Zm0,0"></path>
</svg></a>
<a class="footer-icon" id="footer_blog" href="https://ncbiinsights.ncbi.nlm.nih.gov/" aria-label="Blog">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 40 40">
<defs><style>.cls-1{fill:#737373;}</style></defs>
<title>NCBI Insights Blog</title>
<path class="cls-1" d="M14,30a4,4,0,1,1-4-4,4,4,0,0,1,4,4Zm11,3A19,19,0,0,0,7.05,15a1,1,0,0,0-1,1v3a1,1,0,0,0,.93,1A14,14,0,0,1,20,33.07,1,1,0,0,0,21,34h3a1,1,0,0,0,1-1Zm9,0A28,28,0,0,0,7,6,1,1,0,0,0,6,7v3a1,1,0,0,0,1,1A23,23,0,0,1,29,33a1,1,0,0,0,1,1h3A1,1,0,0,0,34,33Z"></path>
</svg>
</a>
</div>
</div>
</section>
<section class="container-fluid bg-primary">
<div class="container pt-5">
<div class="row mt-3">
<div class="col-lg-3 col-12">
<p><a class="text-white" href="https://www.nlm.nih.gov/socialmedia/index.html">Connect with NLM</a></p>
<ul class="list-inline social_media">
<li class="list-inline-item"><a href="https://twitter.com/NLM_NIH" aria-label="Twitter" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 36 35" fill="none">
<title>Twitter</title>
<g id="twitterx1009" clip-path="url(#clip0_65276_3946)">
<path id="Vector_Twitter" d="M17.5006 34.6565C26.9761 34.6565 34.6575 26.9751 34.6575 17.4996C34.6575 8.02416 26.9761 0.342773 17.5006 0.342773C8.02514 0.342773 0.34375 8.02416 0.34375 17.4996C0.34375 26.9751 8.02514 34.6565 17.5006 34.6565Z" fill="#205493" stroke="white" stroke-width="1.0" stroke-miterlimit="10"></path>
<path id="path1009" d="M8.54811 8.5L16.2698 18.4279L8.50001 26.5H11.5L17.5 20L22.5486 26.5H28.5L20.5 16L27 8.5H24.5L19 14.5L14.5007 8.5H8.54927H8.54811ZM11.1197 9.73873H13.4519L25.4519 25.2613H23.1926L11.1197 9.73873Z" fill="white"></path>
</g>
<defs>
<clipPath id="clip0_65276_3946">
<rect width="35" height="35" fill="white"></rect>
</clipPath>
</defs>
</svg>
</a></li>
<li class="list-inline-item"><a href="https://www.facebook.com/nationallibraryofmedicine" aria-label="Facebook" rel="noopener noreferrer" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 36 35" fill="none">
<title>Facebook</title>
<g id="Facebook" clip-path="url(#clip0_1717_1086)">
<path id="Vector_Facebook" d="M15.1147 29.1371C15.1147 29.0822 15.1147 29.0296 15.1147 28.9747V18.9414H11.8183C11.6719 18.9414 11.6719 18.9414 11.6719 18.8018C11.6719 17.5642 11.6719 16.3289 11.6719 15.0937C11.6719 14.9793 11.7062 14.9518 11.816 14.9518C12.8683 14.9518 13.9206 14.9518 14.9751 14.9518H15.1215V14.8329C15.1215 13.8057 15.1215 12.774 15.1215 11.7492C15.1274 10.9262 15.3148 10.1146 15.6706 9.37241C16.1301 8.38271 16.9475 7.60378 17.9582 7.19235C18.6492 6.90525 19.3923 6.76428 20.1405 6.7783C21.0029 6.79202 21.8653 6.83091 22.7278 6.86065C22.8879 6.86065 23.048 6.89496 23.2082 6.90182C23.2974 6.90182 23.3271 6.94071 23.3271 7.02993C23.3271 7.54235 23.3271 8.05477 23.3271 8.5649C23.3271 9.16882 23.3271 9.77274 23.3271 10.3767C23.3271 10.4819 23.2974 10.5139 23.1921 10.5116C22.5379 10.5116 21.8814 10.5116 21.2271 10.5116C20.9287 10.5184 20.6316 10.5528 20.3395 10.6146C20.0822 10.6619 19.8463 10.7891 19.6653 10.9779C19.4842 11.1668 19.3672 11.4078 19.3307 11.6669C19.2857 11.893 19.2612 12.1226 19.2575 12.3531C19.2575 13.1904 19.2575 14.0299 19.2575 14.8695C19.2575 14.8946 19.2575 14.9198 19.2575 14.9564H23.0229C23.1807 14.9564 23.183 14.9564 23.1624 15.1074C23.0778 15.7662 22.9885 16.425 22.9039 17.0816C22.8322 17.6321 22.7636 18.1827 22.698 18.7332C22.6729 18.9437 22.6797 18.9437 22.4693 18.9437H19.2644V28.8992C19.2644 28.9793 19.2644 29.0593 19.2644 29.1394L15.1147 29.1371Z" fill="white"></path>
<path id="Vector_2_Facebook" d="M17.5006 34.657C26.9761 34.657 34.6575 26.9756 34.6575 17.5001C34.6575 8.02465 26.9761 0.343262 17.5006 0.343262C8.02514 0.343262 0.34375 8.02465 0.34375 17.5001C0.34375 26.9756 8.02514 34.657 17.5006 34.657Z" stroke="white" stroke-width="1.0" stroke-miterlimit="10"></path>
</g>
<defs>
<clipPath id="clip0_1717_1086">
<rect width="35" height="35" fill="white"></rect>
</clipPath>
</defs>
</svg>
</a></li>
<li class="list-inline-item"><a href="https://www.youtube.com/user/NLMNIH" aria-label="Youtube" target="_blank" rel="noopener noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 36 35" fill="none">
<title>Youtube</title>
<g id="YouTube" clip-path="url(#clip0_1717_1101)">
<path id="Vector_Youtube" d="M26.2571 11.4791C25.9025 11.1589 25.5709 10.9576 24.228 10.834C22.5512 10.6785 20.2797 10.6556 18.564 10.6533H16.4365C14.7208 10.6533 12.4493 10.6785 10.7725 10.834C9.43196 10.9576 9.09798 11.1589 8.7434 11.4791C7.81464 12.321 7.6202 14.6268 7.59961 16.8938C7.59961 17.3178 7.59961 17.741 7.59961 18.1635C7.62706 20.4121 7.82837 22.686 8.7434 23.521C9.09798 23.8412 9.42967 24.0425 10.7725 24.1661C12.4493 24.3216 14.7208 24.3445 16.4365 24.3468H18.564C20.2797 24.3468 22.5512 24.3216 24.228 24.1661C25.5686 24.0425 25.9025 23.8412 26.2571 23.521C27.1722 22.6929 27.3735 20.451 27.4009 18.2206C27.4009 17.7402 27.4009 17.2599 27.4009 16.7795C27.3735 14.5491 27.1699 12.3072 26.2571 11.4791ZM15.5604 20.5311V14.652L20.561 17.5001L15.5604 20.5311Z" fill="white"></path>
<path id="Vector_2_Youtube" d="M17.5006 34.657C26.9761 34.657 34.6575 26.9756 34.6575 17.5001C34.6575 8.02465 26.9761 0.343262 17.5006 0.343262C8.02514 0.343262 0.34375 8.02465 0.34375 17.5001C0.34375 26.9756 8.02514 34.657 17.5006 34.657Z" stroke="white" stroke-width="1.0" stroke-miterlimit="10"></path>
</g>
<defs>
<clipPath id="clip0_1717_1101">
<rect width="35" height="35" fill="white"></rect>
</clipPath>
</defs>
</svg>
</a></li>
</ul>
</div>
<div class="col-lg-3 col-12">
<p class="address_footer text-white">National Library of Medicine<br />
<a href="https://www.google.com/maps/place/8600+Rockville+Pike,+Bethesda,+MD+20894/@38.9959508,-77.101021,17z/data=!3m1!4b1!4m5!3m4!1s0x89b7c95e25765ddb:0x19156f88b27635b8!8m2!3d38.9959508!4d-77.0988323" class="text-white" target="_blank" rel="noopener noreferrer">8600 Rockville Pike<br />
Bethesda, MD 20894</a></p>
</div>
<div class="col-lg-3 col-12 centered-lg">
<p><a href="https://www.nlm.nih.gov/web_policies.html" class="text-white">Web Policies</a><br />
<a href="https://www.nih.gov/institutes-nih/nih-office-director/office-communications-public-liaison/freedom-information-act-office" class="text-white">FOIA</a><br />
<a href="https://www.hhs.gov/vulnerability-disclosure-policy/index.html" class="text-white" id="vdp">HHS Vulnerability Disclosure</a></p>
</div>
<div class="col-lg-3 col-12 centered-lg">
<p><a class="supportLink text-white" href="https://support.nlm.nih.gov/">Help</a><br />
<a href="https://www.nlm.nih.gov/accessibility.html" class="text-white">Accessibility</a><br />
<a href="https://www.nlm.nih.gov/careers/careers.html" class="text-white">Careers</a></p>
</div>
</div>
<div class="row">
<div class="col-lg-12 centered-lg">
<nav class="bottom-links">
<ul class="mt-3">
<li>
<a class="text-white" href="//www.nlm.nih.gov/">NLM</a>
</li>
<li>
<a class="text-white" href="https://www.nih.gov/">NIH</a>
</li>
<li>
<a class="text-white" href="https://www.hhs.gov/">HHS</a>
</li>
<li>
<a class="text-white" href="https://www.usa.gov/">USA.gov</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="/portal/portal3rc.fcgi/rlib/js/InstrumentOmnitureBaseJS/InstrumentNCBIConfigJS/InstrumentNCBIBaseJS/InstrumentPageStarterJS.js?v=1"> </script>
<script type="text/javascript" src="/portal/portal3rc.fcgi/static/js/hfjs2.js"> </script>
</div>
</div>
<!--/.footer-->
<p class="last-updated small">Last updated: 2021-11-02T17:38:35Z</p>
</div>
<!--/.page-->
</div>
<!--/.wrap-->
<span class="PAFAppResources"></span>
</div><!-- /.twelve_col -->
</div>
<!-- /.grid -->
<!-- usually for JS scripts at page bottom -->
<span class="pagefixtures"></span>
<!-- CE8B5AF87C7FFCB1_0191SID /projects/staticsites/sviewer/sviewerdoc@1.22 portal105 v4.1.r689238 Tue, Oct 22 2024 16:10:51 -->
<span id="portal-csrf-token" style="display:none" data-token="CE8B5AF87C7FFCB1_0191SID"></span>
<script type='text/javascript' src='/portal/js/portal.js'></script><script type="text/javascript" src="//static.pubmed.gov/portal/portal3rc.fcgi/4201177/js/3879255/4121861/4187890/2950819.js" snapshot="tools"></script></body>
</html>