934 lines
47 KiB
XML
934 lines
47 KiB
XML
<?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>
|
||
<!-- 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="treeviewer" /><meta xmlns:ncbi-portal="http://ncbi.gov/portal/XSLT/namespace" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" name="ncbi_pdid" content="static" />
|
||
<!-- Logger end -->
|
||
|
||
<title>NCBI Tree Viewer Embedding API</title>
|
||
|
||
<!-- PageFixtures headcontent begin -->
|
||
|
||
<meta name="cms-local-nav-url" content="https://cms.ncbi.nlm.nih.gov//treeviewer/_nav" />
|
||
|
||
<!-- PageFixtures headcontent end -->
|
||
|
||
<!-- AppResources external_resources begin -->
|
||
<script type="text/javascript" src="/core/jig/1.14.8/js/jig.min.js"></script>
|
||
|
||
<!-- AppResources external_resources end -->
|
||
|
||
<!-- Page headcontent begin -->
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta name="created" content="2014-09-23T16:03:55-04:00" />
|
||
<meta name="modified" content="2017-05-31T12:14:47-04:00" />
|
||
<meta name="publication-date" content="2014-09-23T15:59:00-04:00" />
|
||
<meta name="subsite" content="treeviewer" />
|
||
<meta name="path" content="treeviewer/embeddingapi" />
|
||
<meta name="node-type" content="page" />
|
||
<meta name="jira-ticket" content="" />
|
||
<link type="text/css" rel="stylesheet" href="/core/assets/treeviewer/css/gbench-docs.css" />
|
||
<link type="text/css" rel="stylesheet" href="/core/assets/treeviewer/css/tvparams.css" />
|
||
<link type="text/css" rel="stylesheet" href="/core/assets/treeviewer/css/codesample.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/3562/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="CE8C9D4F7C8000E10000000000680058.m_6" />
|
||
<meta name='referrer' content='origin-when-cross-origin'/><link type="text/css" rel="stylesheet" href="//static.pubmed.gov/portal/portal3rc.fcgi/4148854/css/4121862/3974050/3917732/251717/3990648/14534/45193/3534283/4128070/3894326/4005757/4062871.css" /><link type="text/css" rel="stylesheet" href="//static.pubmed.gov/portal/portal3rc.fcgi/4148854/css/3529741/3529739.css" media="print" /></head>
|
||
<body class=" col2 static">
|
||
<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/treeviewer/" title="NCBI Tree Viewer home">NCBI Tree Viewer</a></h1><h2 class="res_tagline"></h2></div>
|
||
<div class="search"><form method="get" action="/gquery/"><div class="search_form"><label for="database" class="offscreen_noflow">Search database</label><select id="database"><optgroup label="Recent"><option value="gquery" selected="selected">All Databases</option><option value="refseq">RefSeq</option><option value="nuccore">Nucleotide</option><option value="gene" class="last">Gene</option></optgroup><optgroup label="All"><option value="gquery">All Databases</option><option value="assembly">Assembly</option><option value="biocollections">Biocollections</option><option value="bioproject">BioProject</option><option value="biosample">BioSample</option><option value="books">Books</option><option value="clinvar">ClinVar</option><option value="cdd">Conserved Domains</option><option value="gap">dbGaP</option><option value="dbvar">dbVar</option><option value="gene">Gene</option><option value="genome">Genome</option><option value="gds">GEO DataSets</option><option value="geoprofiles">GEO Profiles</option><option value="gtr">GTR</option><option value="ipg">Identical Protein Groups</option><option value="medgen">MedGen</option><option value="mesh">MeSH</option><option value="nlmcatalog">NLM Catalog</option><option value="nuccore">Nucleotide</option><option value="omim">OMIM</option><option value="pmc">PMC</option><option value="protein">Protein</option><option value="proteinclusters">Protein Clusters</option><option value="protfam">Protein Family Models</option><option value="pcassay">PubChem BioAssay</option><option value="pccompound">PubChem Compound</option><option value="pcsubstance">PubChem Substance</option><option value="pubmed">PubMed</option><option value="snp">SNP</option><option value="sra">SRA</option><option value="structure">Structure</option><option value="taxonomy">Taxonomy</option><option value="toolkit">ToolKit</option><option value="toolkitall">ToolKitAll</option><option value="toolkitbookgh">ToolKitBookgh</option></optgroup></select><div class="nowrap"><label for="term" class="offscreen_noflow" accesskey="/">Search term</label><div class="nowrap"><input type="text" name="term" id="term" title="Search All Databases" value="" class="jig-ncbiclearbutton jig-ncbiautocomplete" data-jigconfig="isEnabled:false,disableUrl:'NcbiSearchBarAutoComplCtrl'" autocomplete="off" data-sbconfig="ds:'no',pjs:'no',afs:'yes'" /></div><button id="search" type="submit" class="button_search nowrap" cmd="go">Search</button></div></div></form></div>
|
||
|
||
</div>
|
||
<div class="nav_and_browser">
|
||
<div class="localnav"><ul class="jig-ncbilocalnav">
|
||
<li>
|
||
<a href="#">NCBI Tree Viewer</a>
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/">Tree Viewer documentation home</a></li>
|
||
<li>
|
||
<a href="/projects/treeview/">Tree Viewer application home</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">For Users</a>
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/releasenotes">Release notes</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/faq">Frequently Asked Questions</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/videos">Videos</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">User Tutorials</a>
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-uud">User uploaded data</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-editlabels">Edit Labels Dialog</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-search">Tree View Search</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">For Developers</a>
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/embeddingapi">Embedding API manual</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/macros">Tree Viewer Macros manual</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/developerresources">Other Developer Resources</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Related Resources</a>
|
||
<ul>
|
||
<li>
|
||
<a href="/projects/sviewer/">Sequence Viewer</a></li>
|
||
<li>
|
||
<a href="/projects/msaviewer/">Multiple Sequence Alignment 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>
|
||
NCBI Tree Viewer Embedding API</h1>
|
||
|
||
|
||
<p>
|
||
The NCBI Tree Viewer (TV) is a tool for viewing phylogenetic tree data. It can be embedded in a wide variety of web pages and with a large number of options. This document serves as a starting point to understand how to embed the Tree Viewer in any context. For purposes of standardization in this document, all links presented have the common root <a href="/">http://www.ncbi.nlm.nih.gov</a>.</p>
|
||
|
||
|
||
<p>
|
||
Additional documentation can be found at: <a href="/tools/treeviewer/">http://www.ncbi.nlm.nih.gov/tools/treeviewer/</a></p>
|
||
|
||
|
||
<h2>
|
||
Including Tree Viewer into a web page</h2>
|
||
|
||
|
||
<p>
|
||
The Tree Viewer is implemented using the ExtJS JavaScript library. Please do the following to include the tree viewer as a component on any page:</p>
|
||
|
||
|
||
<ol>
|
||
<li>
|
||
Include the main TreeViewer JavaScript file. When script is loaded it loads Ext.js dynamically.
|
||
<ul>
|
||
<li>
|
||
<pre>
|
||
<script type="text/javascript" src="http://www.ncbi.nlm.nih.gov/projects/treeview/js/treeviewer.js"></script>
|
||
</pre>
|
||
</li>
|
||
<li>
|
||
Tree Viewer will search for all <div> tags with class='TreeViewerApp' and one <a> tag with an href attribute containing viewer parameters, and create TV instances automatically. An example is:
|
||
<pre>
|
||
<div id='some-id' class='TreeViewerApp'>
|
||
<a href='?embedded=true&btc_id=…'>,/a>
|
||
</div>
|
||
</pre>
|
||
</li>
|
||
</ul>
|
||
<p>
|
||
Do not use this method if the Tree Viewer div is initially hidden - it breaks all the logic as Tree Viewer needs to have real coordinates for proper rendering.</p>
|
||
</li>
|
||
<li>
|
||
If you do not have Tree View parameters at the time of initializing your application (so you cannot put them into div of TreeViewerApp class in html file) please do the following:
|
||
<ul>
|
||
<li>
|
||
Include Tree Viewer JavaScript file:
|
||
<pre>
|
||
<script type="text/javascript" src="http://www.ncbi.nlm.nih.gov/projects/treeview/js/treeviewer.js"></script>
|
||
</pre>
|
||
</li>
|
||
<li>
|
||
Create a div of TreeViewerApp class with no btc id and no url in parameters:
|
||
<pre>
|
||
<div id='some-id' class='TreeViewerApp'>
|
||
<a href='?embedded=true'></a>
|
||
</div>
|
||
</pre>
|
||
</li>
|
||
<li>
|
||
Wait until TreeViewer is loaded:<br />
|
||
<br />
|
||
if (typeof TreeView === 'undefined') should be false<br />
|
||
</li>
|
||
<li>
|
||
Wait until your instance of tree is ready:<br />
|
||
<br />
|
||
if (TreeView.findAppByIndex(0) === null) should be false<br />
|
||
</li>
|
||
<li>
|
||
Access your tree and set parameters using reloadTree function:<br />
|
||
<br />
|
||
var tviewer = TreeView.findAppByIndex(0);<br />
|
||
if (tviewer) tviewer.reloadTree(par);</li>
|
||
</ul>
|
||
</li>
|
||
</ol>
|
||
|
||
|
||
<h2 id="zooming">
|
||
Sizing and Zooming</h2>
|
||
|
||
|
||
<p>
|
||
Tree viewer lets user zoom in and zoom out using zooming controls on toolbar and mouse wheel to have better visual representation of whole picture or details. TV calculates and controls maximum and minimum size for tree provided based on nodes amount, tree layout and geometry, labels sizes and spacing, and size of div, which contains Tree Viewer.</p>
|
||
|
||
|
||
<p>
|
||
Embedder has control over first zoom level appearance of a tree by passing corresponding parameter, which represents zoom level. 0 will be minimum zoom, 100 will be maximum zoom. 50 percent will be optimal zoom (minimum level of zoom t which all nodes labels are readable).</p>
|
||
|
||
|
||
<h2>
|
||
Tree Viewer parameters</h2>
|
||
|
||
|
||
<p>
|
||
Parameters may be passed to Tree Viewer by putting them in the included <a href=''> _cke_saved_href=''> link tag within the Tree Viewer <div> tag.</p>
|
||
|
||
|
||
<h3 id="baseparameters">
|
||
Base parameters:</h3>
|
||
|
||
|
||
<ol>
|
||
<li>
|
||
<strong>embedded={false, true}</strong> – default is false. This is a required parameter for an embedded version of Tree Viewer.</li>
|
||
<li>
|
||
<strong>btc_id</strong> – mandatory. One of the following:
|
||
<ul>
|
||
<li>
|
||
NetCache ID of a serialized BioTreeContainer ASN.1 structure from which the tree image will be generated;</li>
|
||
<li>
|
||
File with a serialized BioTreeContainer ASN.1 structure; for security only files under a directory defined in the .ini file will be read;</li>
|
||
<li>
|
||
URL (HTTP/FTP) of a serialized BioTreeContainer ASN.1 structure from which the tree image will be generated.</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>url</strong> - ftp or http based file containing tree, which will be uploaded and shown in TreeViewer. Parameter url uploads the target file once.</li>
|
||
<li>
|
||
<strong>urlreload</strong> - parameter url_reload always tries to re-upload the file to check the content, which can introduce a processing delay. If you use this parameter you don't have to create a file name versioning but this mode will be slower as it needs to download the file every time</li>
|
||
<li>
|
||
<strong>attriburl</strong> - (optional) URL that should return phylogenetic-tree-compatible attributes file. Returned file is used to update node features.</li>
|
||
<li>
|
||
<strong>attribupdate</strong> - (optional) If true, the updated tree is saved. It only works if the tree was read from NetStorage.</li>
|
||
<li>
|
||
<strong>featnames</strong> – list of feature names to display in node tooltip. Default is ‘*’. List of names should be comma-separated.</li>
|
||
<li>
|
||
<strong>toolbar = <abpztsohmcurl></strong> Specifies which options are present on the toolbar. This parameter is optional and if omitted, all options are shown. If any options are specified, all other options must be opted in.
|
||
<ul>
|
||
<li>
|
||
a - Standalone button</li>
|
||
<li>
|
||
b - History button (not implemented yet)</li>
|
||
<li>
|
||
p - Panning buttons</li>
|
||
<li>
|
||
z - Zoom slider & buttons</li>
|
||
<li>
|
||
t - Tools menu</li>
|
||
<li>
|
||
s - Search field</li>
|
||
<li>
|
||
o - Overview button</li>
|
||
<li>
|
||
h - Help button</li>
|
||
<li>
|
||
m - Selection mode</li>
|
||
<li>
|
||
c - Clear selection</li>
|
||
<li>
|
||
u - Upload user data</li>
|
||
<li>
|
||
r - Refresh tree</li>
|
||
<li>
|
||
l - Labels edit dialog</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>statusbar = <npsm></strong> Specifies which options are present on the statusbar. This parameter is optional and if omitted, all options are shown. If any options are specified, all other options must be opted in.
|
||
<ul>
|
||
<li>
|
||
n – Information about nodes amount and selected nodes amount</li>
|
||
<li>
|
||
p – Viewport position</li>
|
||
<li>
|
||
s – Image size</li>
|
||
<li>
|
||
m – Scale. Overrides scaleposition parameter</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>nostatusbar</strong> - if true, no statusbar will be displayed. Default value is false.</li>
|
||
<li>
|
||
<strong>renderer</strong> - layout of the rendered tree, one of: rect, slanted, radial, or circular. Default value is circular</li>
|
||
<li>
|
||
<strong>notoolbar</strong> - if true, no toolbar will be displayed. Default value is false</li>
|
||
<li>
|
||
<strong>panX</strong> - number of pixels to move horizontally when user clicks on corresponding pan button. Default value is 50.</li>
|
||
<li>
|
||
<strong>panY</strong> - number of pixels to move vertically when user clicks on corresponding pan button. Default value is 50.</li>
|
||
<li>
|
||
<strong>scaleposition</strong> - position of scale in TreeViewer. Values: bottomleft, bottomright, topleft, topright. Defaulyt bottomleft.</li>
|
||
<li>
|
||
<strong>rotatedlabels</strong> - if true and renderer=circular, render labels at an angle. Default value is false.</li>
|
||
<li>
|
||
<strong>appname=<string></strong> - Defines the name of the client calling the application. This is an optional parameter used in storing a user’s configuration settings; we recommend that all developers supply an application name. The name chosen should be unique; this name will appear in a cookie set in the user’s browser to indicate storage of configuration information. We strongly recommend that callers avoid using generic phrases like “tree” or “viewer”, and prepend a namespace (i.e., “NcbiPortalTree” or “XYZViewer”).</li>
|
||
<li>
|
||
<strong>pctmaxzoom</strong> - number between 0 and 100 that represents zoom level. 9 will be minimum zoom, 100 will be maximum zoom. 50 percent will be optimal zoom (minimal level of zoom zt which all labels are readable). Default 0.</li>
|
||
<li>
|
||
<strong>nodetooltips</strong> - Specifies if nodes will have tooltips, default - true.</li>
|
||
<li id="labelformat">
|
||
<strong>labelformat</strong> - format string for generating node label from node features, default $(label).</li>
|
||
<li>
|
||
<strong>maxlabellen</strong> - Truncate all labels with length greater than <strong>maxlabellen</strong>, default - 1 (no max).</li>
|
||
<li>
|
||
<strong>centerpointX</strong> - if present, X coordinate of the center of displayed part of tree.</li>
|
||
<li>
|
||
<strong>centerpointY</strong> - if present, Y coordinate of the center of displayed part of tree.</li>
|
||
<li>
|
||
<strong>vertzoom - (true,false)</strong> - if true, zoom is in vertical direction only</li>
|
||
<li>
|
||
<strong>zoom_on_wheel</strong> - If true, user can zoom Tree using mouse wheel. Default false and we strongly recommend to keep it this way, when embedding.</li>
|
||
<li>
|
||
<strong>showpercentage</strong> - if True, current zoom level will be displayed in tooltip for zooming slider. Default true.</li>
|
||
<li>
|
||
<strong>solidleaves</strong> - If true, all leaf nodes will be drawn in a uniform solid color, otherwise leaves will have highlights like other nodes. Default false.</li>
|
||
<li>
|
||
<strong>multipleselectionmode</strong> -if true selection mode for nodes will be set to multiple. Default – false (single selection mode).</li>
|
||
<li>
|
||
<strong>rootnoteid</strong> - if set, re-compute the tree with this node as the root and show the resulting tree</li>
|
||
<li>
|
||
<strong>selectednodeIDs</strong> - comma-separated list of ids of the nodes to be shown as selected</li>
|
||
<li>
|
||
<strong>collapsednodeIDs</strong> - IDs of nodes to collapse. A collapsed node becomes a leaf node, hiding all child nodes underneath.</li>
|
||
<li>
|
||
<strong>subtreenodeID</strong> - only the subtree starting from this node will be shown</li>
|
||
<li>
|
||
<strong>configpreset</strong> - Preset setup of configuration. Values – static. It will make TV appear like a static picture with no toolbar, node tooltips, no zooming and no scrolling.</li>
|
||
<li>
|
||
<strong>nodesize</strong> - size of the node circle. Default value is 3.</li>
|
||
<li>
|
||
<strong>linewidth</strong> - width of the tree branch line. Default value is 1.</li>
|
||
<li>
|
||
<strong>select_on_click</strong> - shows if selection action should be performed when user clicks on node. Default value is true.</li>
|
||
<li>
|
||
<strong>fontace</strong> - font name to be used in labels. Default value is Helvetica.</li>
|
||
<li>
|
||
<strong>fontsize</strong> - size of font to be used in labels. Default value is 10.</li>
|
||
<li>
|
||
<strong>labelspacing</strong> - scale dynamic viewport to adjust label spacing, 1.0=>minimum, 2.0=>doublespaced. Default – 2.0</li>
|
||
<li>
|
||
<strong>horizspacing</strong> - scale horizontal spacing between branches as a factor of node size. Default – 7.0</li>
|
||
<li>
|
||
<strong>clickablelabels</strong> - size of font to be used in labels. Default value is 10.</li>
|
||
<li>
|
||
<strong>nodeaction = <bsrc></strong> - Specifies which options are present on the toolbar. This parameter is optional and if omitted, all options are shown. If any options are specified, all other options must be opted in.
|
||
<ul>
|
||
<li>
|
||
b - Show subtree</li>
|
||
<li>
|
||
s - Select</li>
|
||
<li>
|
||
r - Reroute to node</li>
|
||
<li>
|
||
c - Toggle collapse/expand</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<strong>setmidpointroot={false, true}</strong> - Default value: false. Optional. If true, tree is re-rooted using the <a href="http://cabbagesofdoom.blogspot.com/2012/06/how-to-root-phylogenetic-tree.html">midpoint algorithm</a>.</li>
|
||
<li>
|
||
<strong>collapsetoviewport={false, true}</strong> - Default value: false. If true it collapses enough nodes (by distance) to get the tree to fit (with labels visible) in the client viewport. It requires that the client viewport be provided and works with dynamic viewport. If the tree has a <a href="/tools/treeviewer/biotreecontainer/#featurenameswithspecialmeaning"> $PRIORITY</a> field, it will automatically use that to avoid collapsing any nodes with $PRIORITY >= 1000.</li>
|
||
<li>
|
||
<strong>leafnodesize=<num></strong> - parameter supporting size of terminal, leaf nodes, num can be any floating point number including 0 for no leaf node</li>
|
||
</ol>
|
||
|
||
|
||
<h2>
|
||
API functions</h2>
|
||
|
||
|
||
<h3>
|
||
Getting application</h3>
|
||
|
||
|
||
<p>
|
||
TreeView.findAppByIndex</p>
|
||
|
||
|
||
<p>
|
||
TreeView.findAppByDivId</p>
|
||
|
||
|
||
<p>
|
||
Result: Returns instance of TreeViewApp.</p>
|
||
|
||
|
||
<h3>
|
||
Application functions</h3>
|
||
|
||
|
||
<h3>
|
||
<span>Events</span></h3>
|
||
|
||
|
||
<h3>
|
||
<span>Node Object Format Updates</span></h3>
|
||
|
||
|
||
<p>
|
||
<span>nodeid -> id<br />
|
||
depth -> d<br />
|
||
parented -> pid<br />
|
||
color -> clr<br />
|
||
label -> l<br />
|
||
seq_id -> seq_id // no change<br />
|
||
seq_title -> seq_title // no change<br />
|
||
accession_number -> acc_nbr<br />
|
||
is-collapsed -> is_collapsed // no change<br />
|
||
is_leaf -> il<br />
|
||
is_selected -> is_sel<br />
|
||
is_parent_selected -> is_psel<br />
|
||
features -> feat<br />
|
||
// And in features:<br />
|
||
feat_name -> n<br />
|
||
feat_value -> v<br />
|
||
bounds -> bds<br />
|
||
// and in bounds:<br />
|
||
width -> w<br />
|
||
height-> h<br />
|
||
labelx -> lx<br />
|
||
labely -> ly<br />
|
||
label_angle -> la<br />
|
||
tilex -> tx<br />
|
||
tiley -> ty</span></p>
|
||
|
||
|
||
<h3>
|
||
<span>Examples</span></h3>
|
||
|
||
|
||
<pre>
|
||
<span>{
|
||
"id": 7,
|
||
"d": 4,
|
||
"pid": 6,
|
||
"l": "YP_383193.1",
|
||
"seq_id": "YP_383193.1",
|
||
"seq_title": "bifunctional methionine sulfoxide reductase B/A protein [Geobacter metallireducens GS-15]",
|
||
"il": true,
|
||
"is_sel": true,
|
||
"feats": [
|
||
{ "n": "label", "v": "YP_383193.1" },
|
||
{ "n": "dist", "v": "0.249507" },
|
||
{ "n": "seq-id", "v": "YP_383193.1" },
|
||
{ "n": "organism", "v": "Geobacter metallireducens GS-15" },
|
||
{ "n": "seq-title", "v": "bifunctional methionine sulfoxide reductase B/A protein [Geobacter metallireducens GS-15]" }
|
||
],
|
||
"bds": { "x": 244, "y": 56, "w": 6, "h": 6, "lx": 249, "ly": 52, "lw": 56, "lh": 8, "la": 0, "tx": 0, "ty": 0 }
|
||
},
|
||
</span></pre>
|
||
|
||
|
||
<h2 id="custom_trees">
|
||
<span>Loading Custom Trees</span></h2>
|
||
|
||
|
||
<p>
|
||
<span>It is possible to display your own tree file in Tree Viewer. This file should be in asn (text or binary format) or in Newick format. This file should be stored at an ftp or http location. If you use “url” parameter for Tree Viewer (instead of btc_id parameter) and pass <span>ftp or http URL </span><span>as a value to a file containing tree - it will be uploaded and shown in Tree Viewer.</span></span></p>
|
||
|
||
|
||
<ul>
|
||
<li>
|
||
<strong>getVisibleNodes</strong> - returns list of nodes currently visible on a screen</li>
|
||
<li>
|
||
<strong>showNode(node_id)</strong> - highlights node for several seconds</li>
|
||
<li>
|
||
<strong>getSelectedNodes</strong> - returns a list of selected node ids</li>
|
||
<li>
|
||
<strong>getSelectedNodesObjects</strong> - returns a array of selected node objects</li>
|
||
<li>
|
||
<strong>selectNode(node_id)</strong> - toggles selection of node with given node ID</li>
|
||
<li>
|
||
<strong>selectNodeByFeature (feature_name,feature_value,callback,no_signal,scroll_to_node)</strong> - toggles selection of nodes which have specified value for provided feature name (callback - function which will return you result in parameter in case something was selected, and no parameter if selection was not changed; if no_signal is not set to false appropriate API events will be fired in corresponding cases - see Events section below)</li>
|
||
<li>
|
||
<strong>selectNodesByFeature (feature_name,feature_values,callback,no_signal,zoom_to_selection)</strong> - <span> </span></li>
|
||
<li>
|
||
<span><strong>toggleExpandNode (node_id)</strong> - Expands or collapses node</span></li>
|
||
<li>
|
||
<span><strong>reloadTree (params)</strong> - Reloads tree with new set of parameters</span></li>
|
||
<li>
|
||
<span><strong>getChildrenNodes (node_id)</strong> - Get list of all node which are children for node with provided node ID</span></li>
|
||
<li>
|
||
<span><strong>customnodeactions</strong> - List of custom action for a node shown on tooltips. Empty by default. See sample usage below: </span>
|
||
<pre>
|
||
<span>var tviewer = TreeView.findAppByIndex( 0 );
|
||
if(tviewer)
|
||
{
|
||
tviewer.customnodeactions = [
|
||
{
|
||
name : "Custom Action 1",
|
||
action : customAction
|
||
},
|
||
{
|
||
name : "Custom Action 2",
|
||
action : customAction2,
|
||
condition: "branch"
|
||
}
|
||
]
|
||
};
|
||
</span></pre>
|
||
<ul>
|
||
<li>
|
||
<span><strong>'node_label_mouseover': function(nd)</strong> - mouse cursor entered node label area</span></li>
|
||
<li>
|
||
<span><strong>'node_label_mouseout': function(nd)</strong> - Mouse cursor exited node label area</span></li>
|
||
<li>
|
||
<span><strong>'node_label_click': function(nd)</strong> - User clicked on node label</span></li>
|
||
<li>
|
||
<span><strong>'node_mouseover': function(nd)</strong> - Mouse cursor entered node area</span></li>
|
||
<li>
|
||
<span><strong>'node_mouseout': function(nd)</strong> - Mouse cursor exited node area</span></li>
|
||
<li>
|
||
<span><strong>'nodes_changed'</strong> - Any change in nodes on screen</span></li>
|
||
<li>
|
||
<span><strong>'node_selection_changed'</strong> - Change in nodes selection</span></li>
|
||
<li>
|
||
<span><strong>'selection_not_changed_API'</strong> - no change in nodes selection triggered by API</span></li>
|
||
<li>
|
||
<span><strong>'node_selection_changed_API'</strong> - change in nodes selection triggered by API</span></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
<!--/.col1-->
|
||
<div class="col2">
|
||
<h2>
|
||
Table of Contents</h2><ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/">Tree Viewer documentation home</a></li>
|
||
<li>
|
||
<a href="/projects/treeview/">Tree Viewer application home</a></li>
|
||
<li>
|
||
For Users
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/releasenotes">Release notes</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/faq">Frequently Asked Questions</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/videos">Videos</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
User Tutorials
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-uud">User uploaded data</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-editlabels">Edit Labels Dialog</a></li>
|
||
|
||
|
||
<li>
|
||
<a href="/tools/treeviewer/tutorial-search">Tree View Search</a></li>
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
For Developers
|
||
<ul>
|
||
<li>
|
||
<a href="/tools/treeviewer/embeddingapi">Embedding API manual</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/macros">Tree Viewer Macros manual</a></li>
|
||
<li>
|
||
<a href="/tools/treeviewer/developerresources">Other Developer Resources</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
Related Resources
|
||
<ul>
|
||
<li>
|
||
<a href="/projects/sviewer/">Sequence Viewer</a></li>
|
||
<li>
|
||
<a href="/projects/msaviewer/">Multiple Sequence Alignment 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:10:45-05:00&Snapshot=%2Fprojects%2Fstaticsites%2Ftreeview%2Ftreeview@1.5&Host=portal105&ncbi_phid=CE8C9D4F7C8000E10000000000680058&ncbi_session=CE8B5AF87C7FFCB1_0191SID&from=https%3A%2F%2Fwww.ncbi.nlm.nih.gov%2Ftools%2Ftreeviewer%2Fembeddingapi%2F&Ncbi_App=treeviewer&Page=static&style=classic&deptID=28049">Support Center</a>
|
||
<noscript><img alt="" src="/stat?jsdisabled=true&ncbi_app=treeviewer&ncbi_db=&ncbi_pdid=static&ncbi_phid=CE8C9D4F7C8000E10000000000680058" /></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: 2017-05-31T12:14:47-04:00</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/treeview/treeview@1.5 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="//static.pubmed.gov/portal/portal3rc.fcgi/4148854/js/3879255/4121861/3989973/4087685.js" snapshot="tools"></script></body>
|
||
</html>
|
||
|