nih-gov/www.ncbi.nlm.nih.gov/mcgv/index.html

763 lines
No EOL
44 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.

<!DOCTYPE html>
<html lang="en" >
<head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Mobile properties -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/mcgv/static/django_uswds/uswds/css/uswds.css" />
<link rel="stylesheet" href="/mcgv/static/nwds/css/nwds.css" />
<link rel="stylesheet" href="/mcgv/static/nwds/css/header.css" />
<link rel="stylesheet" href="/mcgv/static/nwds/css/footer.css" />
<link rel="stylesheet" href="/mcgv/static/nwds/css/form.css" />
<link rel="stylesheet" href="/mcgv/static/uswds3/css/uswds-fix.css"/>
<link rel="stylesheet" href="/mcgv/static/main/css/styles.css"/>
<link rel="stylesheet" href="/mcgv/static/main/css/filter-dialog.css">
<title>Multiple Comparative Genome Viewer</title>
<!-- Favicons -->
<link rel="shortcut icon" type="image/ico" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.ico" />
<link rel="icon" type="image/png" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon.png" />
<!-- 192x192, as recommended for Android
http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android
-->
<link rel="icon" type="image/png" sizes="192x192" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-192.png" />
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
<link rel="apple-touch-icon-precomposed" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-57.png">
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-72.png">
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-114.png">
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://www.ncbi.nlm.nih.gov/coreutils/nwds/img/favicons/favicon-144.png">
<meta name="robots" content="index, follow"/>
<!-- Logging params: Pinger defaults -->
<meta name="ncbi_app" content="mcgv_browser" />
<meta name="ncbi_pdid" content="home" />
<meta name="ncbi_phid" content="322C300D9B30381500002E3E21F21D1D.1.m_1" />
<meta name="ncbi_page" content="home"/>
<meta name="ncbi_op" content="page_view"/>
<meta name="description" content="Multiple Comparative Genome Viewer"/>
<script src="/mcgv/static/js/d3.min.js"></script>
<script src="/mcgv/static/js/jquery.min.js"></script>
<script id="browse-location" type="application/json">{}</script>
<script>
const baseURL = '/mcgv';
const initial_align_set_id = 'epo33'
const browse_location = JSON.parse(document.getElementById('browse-location').textContent);
/** NWDS header */
const useOfficialGovtHeader = true;
</script>
<script src="/mcgv/static/main/js/mcgv.js"></script>
<script src="/mcgv/static/main/js/overview_widget.js"></script>
<script src="/mcgv/static/main/js/alignment_widget.js"></script>
<script src="/mcgv/static/main/js/conservation_widget.js"></script>
<script src="/mcgv/static/main/js/filter_dialog.js"></script>
</head>
<body >
<a class="usa-skipnav" href="#main_content">Skip to main page content</a>
<!-- ========== BEGIN HEADER ========== -->
<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="usa-accordion-button usa-banner-button"
aria-expanded="false"
aria-controls="gov-banner-top"
>
<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"
>
<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 its official.</strong>
<br />
Federal government websites often end in .gov or .mil. Before
sharing sensitive information, make sure youre 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="https://www.ncbi.nlm.nih.gov/" 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">
<span class="fa fa-user" aria-hidden="true"></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"><span class="fa fa-times"></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>
<!-- ========== END HEADER ========== -->
<nav class="ncbi-topnav">
<ul class="ncbi-topnav-list">
<li><div tabindex="0" role="link" aria-label="Current page">MCGV Home</div><div></div></li>
<li>
<a href="javascript:void(0)">
<div onclick="MCGV.toggleDDMenu(event)">Alignment Data
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" style="margin:-5px -3px;rotate:270deg;width: 1.3em;height: 1.3em;">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#chevron_left"></use>
</svg>
</div>
<div class="dropdown-menu" style="white-space:nowrap;">
<div id='epo33' onclick="MCGV.toggleDDMenu(event)">EPO eutherian mammals</div>
<div id='primates8' onclick="MCGV.toggleDDMenu(event)">NHGRI T2T primates</div>
</div>
</a>
</li>
<li><a href="/mcgv/cm/mcgv/help" target="_blank">Help</a></li>
<li><a href="/mcgv/cm/mcgv/release_notes" target="_blank">Release Notes</a></li>
</ul>
</nav>
<main id="main_content" accesskey="3">
<section class="usa-section">
<h1 style="line-height: 1.15; margin-top: 20px;">Multiple Comparative Genome Viewer</h1>
<div class="about">
MCGV is a graphical display for whole genome multiple sequence alignments.
<br>
Currently you are viewing
<span id="descr_epo33" class="about_details">a eutherian mammals EPO alignment from <a class="usa-link" target="_blank" href="https://mart.ensembl.org/info/genome/compara/mlss.html?mlss=2072">Ensembl</a>. </span>
<span id="descr_primates8" class="about_details">an eight-way primate alignment from <a class="usa-link" target="_blank" href="https://cglgenomics.ucsc.edu/february-2024-t2t-apes/">NHGRI</a>. </span>
<a class="usa-link" target="blank" onclick="console.log('feedback')"
href="https://nlmenterprise.co1.qualtrics.com/jfe/form/SV_5iL6W3r2A7vY52R?ncbi_app=mcgv_browser&Source=Content_Request_Link">Contact us</a> if you would like to view your own alignment data.
</div>
</section>
<section class="usa-section" style="margin-bottom:1.4em;margin-top:1.4em;max-width:100%;">
<div style="display: flex; justify-content:space-between; padding-right: 14px;font-size:15px; font-weight:400;line-height: 17.58px;font-family:'Roboto';">
<form spellcheck="false">
<label for="chroms">Navigate to a chromosome on anchor assembly human GRCh38.p14</label>
<select class="usa-select" name="chroms" id="chroms"></select>
</form>
<div style="display: inline-flex;justify-content: center; align-items: flex-end;">
<div style="display: inline-flex;align-items: center;margin-right: 50px;">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" style="width:24px;height:24px; margin-right:7px">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#filter_list"></use>
</svg>
<!-- hack to trigger the opening of the modal from a button, but display a link-->
<a href="#filter-modal" class="usa-button hidden-filter-btn" style="display:none;" aria-controls="filter-modal" data-open-modal>Placeholder</a>
<a href="#" class="usa-link" style="display: inline;cursor: pointer;" onclick="MCGV.showFilterDialog(event)">Filter assemblies</a>
</div>
<p style="margin-bottom: 3px;">Showing <span class="alnNumber"></span> assemblies <a class="usa-link cgv-navbtn" style="cursor:pointer;">Show all</a></p>
</div>
</div>
</section>
<section class="usa-section">
<div class="usa-accordion usa-accordion--multiselectable" data-allow-multiple>
<button type="button" class="usa-accordion__button" aria-expanded="true" aria-controls="accrdn0" onclick="MCGV.__.handleAccrdns(event)">
Chromosome overview of aligned assemblies
</button>
<div id="accrdn0" class="usa-accordion__content">
<div class="usa-grid usa-row" style="font-size: 14px;font-weight: 400; line-height:18.75px; margin: -6px 0 5px; padding: 0 12.5px;">
<span></span>
</div>
<svg id="oRuler" width="100%" height="17"></svg>
<span class="usa-tooltip__body usa-tooltip__body--bottom" id="rulerTT" role="tooltip" aria-hidden="true"
style="margin: -50px 0 0 0;min-width:fit-content;font-size:16px;">Zoom to a selected range<br>by dragging/drawing a box</span>
<svg id="overview" width="100%" height="80"></svg>
<div class="selector"><div></div></div>
</div>
</div>
<div class="usa-accordion usa-accordion--multiselectable" data-allow-multiple style="position:sticky;top:0;z-index:10;">
<button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="accrdn1" onclick="MCGV.__.handleAccrdns(event)">
Sequence conservation
</button>
<div id="accrdn1" class="usa-accordion__content">
<div class="usa-grid usa-row" style="font-size: 14px;font-weight: 400; line-height:19px; margin: -5px 0 0; padding: 0 12.5px;">
<div class="text-container" id="conserv-header" >
<div style="padding-bottom:1px;"><i>Not available at this zoom level. Zoom in below 1Mbp to view sequence conservation.</i></div>
<div style="display:contents;">
<span>Chromosome name</span>
<div class="text-container" id="hist-legend">
<b style="margin: 0;margin-right: 50px">Conservation Per Aligned Position</b>
<div class="legend-subcont">
<div class="legend-rect legend-match-color"></div>
<p class="legend-text">Matched</p>
</div>
<div class="legend-subcont">
<div class="legend-rect legend-mism-color"></div>
<p class="legend-text">Divergent</p>
</div>
<div class="legend-subcont">
<div class="legend-rect legend-unaligned-color"></div>
<p style="margin: 0;">Unaligned</p>
</div>
</div>
<div class="legend-subcont">
<img id="alert-icon" src="/mcgv/static/main/img/alert_icon.svg" width="20px" height="17px" style="margin-right: 7px">
<span id="aligned-status"></span>
<a id="hide-show-aln" class="usa-link" style="cursor:pointer;" onclick="MCGV.__.hideShowAlignments(event)"></a>
</div>
</div>
</div>
</div>
<div style="position:relative;overflow:hidden;padding-top:6px;">
<div class="aln-track">
<svg id="conservation" width="100%" height="120"></svg>
</div>
<div class="nr-align-text"><span id="nr-assm"></span></div>
</div>
<div class="selector"><div></div></div>
</div>
<div style="height:5px;width:100%;background-color:white;"></div>
<div class="usa-accordion" data-allow-multiple>
<button type="button" class="usa-accordion__button" aria-expanded="true" aria-controls="accrdn2" style="pointer-events:none;background-image:none;">
Assembly alignments
</button>
<div id="accrdn2" class="usa-accordion__content" style="overflow:hidden;padding-bottom:0;">
<div class="usa-row nav-buttons" style="font-size:16px;padding-left:12px;padding-right:14px;padding-bottom:10px;">
<ul class="usa-button-group cgv-navbtn">
<li class="usa-button-group__item" style="margin-right:0;">
<button class="zoomIn usa-button usa-button--outline mcgv-btn" title="Zoom in (control + mouse wheel)" disabled>
<svg viewBox="-3 -4 30 30" height="28">
<path fill="currentColor" d="M9.3,0c5.1,0,9.3,4.2,9.3,9.3c0,2.3-0.8,4.4-2.2,6l0.4,0.4h1.1l7.1,7.1L22.9,25l-7.1-7.1v-1.1l-0.4-0.4
c-1.6,1.4-3.7,2.2-6,2.2C4.2,18.6,0,14.4,0,9.3S4.2,0,9.3,0z M9.3,2.9c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4s6.4-2.9,6.4-6.4
S12.9,2.9,9.3,2.9z M10,5.7v2.9h2.9V10H10v2.9H8.6V10H5.7V8.6h2.9V5.7H10z"></path>
</svg>
</button>
</li>
<li class="usa-button-group__item" style="margin-left:0;">
<button class="zoomOut usa-button usa-button--outline mcgv-btn" title="Zoom out (control + mouse wheel)" disabled>
<svg viewBox="-3 -4 30 30" height="28">
<path fill="currentColor" d="M17.9,15.7h-1.1l-0.4-0.4c1.4-1.6,2.2-3.7,2.2-6c0-5.1-4.2-9.3-9.3-9.3S0,4.2,0,9.3s4.2,9.3,9.3,9.3
c2.3,0,4.4-0.8,6-2.2l0.4,0.4v1.1l7.1,7.1l2.1-2.1L17.9,15.7z M9.3,15.7c-3.6,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4
S12.9,15.7,9.3,15.7z M5.7,8.6h7.1V10H5.7V8.6z"></path>
</svg>
</button>
</li>
<li class="usa-button-group__item" style="margin-right:0;">
<button class="panLeft usa-button usa-button--outline mcgv-btn" title="Pan left" disabled>
<svg viewBox="-2 -4 30 30" height="28">
<path fill="currentColor" d="M0,12.5L13.5,0v7.1H25v10.7H13.5V25L0,12.5z"></path>
</svg>
</button>
</li>
<li class="usa-button-group__item" style="margin-left:0;">
<button class="panRight usa-button usa-button--outline mcgv-btn" title="Pan right" disabled>
<svg viewBox="-2 -4 30 30" height="28">
<path fill="currentColor" d="M25,12.5L11.5,25v-7.1H0V7.1h11.5V0L25,12.5z"></path>
</svg>
</button>
</li>
<li style="display:inline;margin-left:auto;margin-right:auto;margin-top:20px;">
<div class="usa-radio" style="display:inline;">
<input class="coloration usa-radio__input" type="radio" id="identityColor" name="coloration" value="0" checked="">
<label class="coloration usa-radio__label" for="identityColor">Color by Identity</label>
</div>
<div class="usa-radio" style="display:inline;">
<input class="coloration usa-radio__input" type="radio" id="orientationColor" name="coloration" value="1">
<label class="coloration usa-radio__label" for="orientationColor">Color by Orientation</label>
</div>
<div class="usa-checkbox" style="display:inline;">
<input class="showLegend usa-checkbox__input" type="checkbox" id="showLegend"/>
<label class="showLegend usa-checkbox__label" for="showLegend">Show legend</label>
</div>
</li>
<li style="display:inline;margin-top:20px;margin-right: 50px;font-size:15px; font-weight:400;line-height: 17.58px;font-family:'Roboto'">
<div class="legend-subcont">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img" style="width:24px;height:24px; margin-right:7px">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#filter_list"></use>
</svg>
<!-- hack to trigger the opening of the modal from a button, but display a link-->
<a href="#filter-modal" class="usa-button hidden-filter-btn" style="display:none;" aria-controls="filter-modal" data-open-modal>Placeholder</a>
<a href="#" class="usa-link" style="display: inline;cursor: pointer;" onclick="MCGV.showFilterDialog(event)">Filter assemblies</a>
</div>
</li>
<li style="display:inline-flex;justify-content: center; align-items: flex-end;margin-top:20px;font-size:15px; font-weight:400;line-height: 17.58px;font-family:'Roboto';">
<p style="margin-bottom: 3px;">Showing <span class="alnNumber"></span> assemblies <a class="usa-link cgv-navbtn" style="cursor:pointer;">Show all</a></p>
</li>
</ul>
</div>
<div id="colorLegend" class="usa-row usa-button-group" style="border-top:1px solid #D6D7D9;height:45px;display:none;">
<div class="coloration-legend">
<div style="display:inherit;">
<div class="legend-subcont" style="padding-right:40px;">
<p style="font-size:16px;margin: 0 15px;"><b>% Identity</b></p>
<div class="legend-rect-long" style="background-color:#112E51;"></div><div class="legend-tick"></div>
<div class="legend-ctext">95</div>
<div class="legend-rect-long" style="background-color:#205493;"></div><div class="legend-tick"></div>
<div class="legend-ctext">90</div>
<div class="legend-rect-long" style="background-color:#0071BC;"></div><div class="legend-tick"></div>
<div class="legend-ctext">75</div>
<div class="legend-rect-long" style="background-color:#00A6D2;"></div><div class="legend-tick"></div>
<div class="legend-ctext">50</div>
<div class="legend-rect-long" style="background-color:#02BFE7;"></div><div class="legend-tick"></div>
<div class="legend-ctext">25</div>
<div class="legend-rect-long" style="background-color:#9BDAF1;"></div>
</div>
</div>
<div style="display:inherit;">
<div class="legend-subcont">
<div class="legend-rect" style="background-color:#989898"></div>
<p class="legend-text">Forward orientation</p>
</div>
<div class="legend-subcont">
<div class="legend-rect" style="background-color:#54278F"></div>
<p class="legend-text">Reverse orientation</p>
</div>
</div>
<div class="legend-subcont">
<div class="legend-rect" style="background-color:#D6D7D9"></div>
<p style="margin: 0;">Unaligned anchor assembly region</p>
</div>
</div>
</div>
<table class="mcgv-aln" style="border-top: 4px solid #D6D7D9;border-bottom: 4px solid #D6D7D9;margin-bottom:0;font-family:'Roboto';">
<thead id="mcgv-anchor"></thead></table>
<div class="selector"><div></div></div>
<span id="uRegionTT" class="usa-tooltip__body arrow-bottom" role="tooltip" aria-hidden="true"
style="margin: -39px 11px 0 -40px;min-width:fit-content;font-size:16px;position:fixed;">Unaligned region</span>
</div>
</div>
</div>
<table class="usa-table usa-table--borderless mcgv-aln" style="width:100%;font-size:16px;margin-top:-2px;font-family:'Roboto';overflow:hidden;">
<tbody class="mcgv-aln"></tbody>
</table>
<div class="infobox ncbi-popup popup-arrow" id="chrInfo">
<div style="background-color:#D6D7D9;font-size:16px;font-weight:700;height:40px;padding:8px 1.7rem;">Alignment segment details
<button type="button" class="usa-button ncbi-close-button" onclick="MCGV.closeInfobox()"
aria-label="Close this window" style="background-color:inherit;margin:0;">&#10006;
</button>
</div>
<div style="padding-right:36px;" class="ncbi-popup-body">
<span></span><br>
<a class="usa-link" target="_blank" title="Follow link">View in GDV</a><br><br>
<span></span>
</div>
</div>
<div class="infobox ncbi-popup" id="geneInfo">
<div class="ncbi-popup-body" style="cursor:default;">
<a class="usa-link" target="blank"></a><br>
<span style="white-space: nowrap;">...</span>
</div>
</div>
<!--Modal dialog for filtering alignments-->
<div class="usa-modal" id="filter-modal" aria-labelledby="filter-heading" aria-describedby="filter-description"
style="min-width: min-content;">
<div class="usa-modal__content" style="width: 505px; min-width: fit-content;">
<div class="usa-modal__main" style="font-family:Roboto;">
<h3 class="usa-modal__heading" id="filter-heading">Filter assemblies</h3>
<p id="filter-subtitle" style="margin-bottom: 0;">
Assemblies in this alignment are displayed relative to <span id="anchor-assm"></span>, which cannot be hidden.
A minimum of two assemblies must be shown.
</p>
<div class="open-close-wrapper" onclick="MCGV.onFilterOpenCloseClicks(event)">
<a id="show-all-icon" href="#">
<span>
<svg class="usa-icon open-close-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#unfold_more"></use>
</svg>
</span>
</a>
<a id="close-all-icon" href="#">
<span>
<svg class="usa-icon open-close-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#unfold_less"></use>
</svg>
</span>
</a>
<a id="toggle-tree" href="#" class="usa-link open-close-text">Open all</a>
</div>
<fieldset class="usa-fieldset" style="height:40vh;overflow-y:auto">
<ul class="usa-list filter-tree" id="assm-tree"></ul>
</fieldset>
<div class="usa-modal__footer">
<ul class="usa-button-group">
<li class="usa-button-group__item">
<button type="button" class="usa-button filter-apply" onclick="MCGV.filterTracks(event)" data-close-modal>Apply</button>
</li>
<li class="usa-button-group__item">
<button type="button" class="usa-button usa-button--unstyled padding-105 text-center filter-cancel" data-close-modal>Cancel</button>
</li>
</ul>
</div>
</div>
<button type="button" class="usa-button usa-modal__close" aria-label="Close this window" data-close-modal>
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="/mcgv/static/django_uswds/uswds/img/sprite.svg#close"></use>
</svg>
</button>
</div>
</div>
<!-- End of Modal dialog -->
</section>
</main>
<!-- ========== BEGIN FOOTER ========== -->
<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 width="40" height="40" viewBox="0 0 40 37" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</g>
</svg>
</a>
<a class="footer-icon" id="footer_facebook" href="https://www.facebook.com/ncbi.nlm" aria-label="Facebook"><svg
data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 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 data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 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
data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" 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 id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><defs><style>.cls-1{fill:#737373;}</style></defs><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"/></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 width="35" height="35" viewBox="0 0 38 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Twitter</title>
<g id="twitterx1009" clip-path="url(#clip0_65276_3946)">
<path id="Vector" 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.2" 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="38" height="38" 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 version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 249 249" style="enable-background:new 0 0 249 249;" xml:space="preserve">
<style type="text/css">
.st10 {
fill: #FFFFFF;
}
.st110 {
fill: none;
stroke: #FFFFFF;
stroke-width: 8;
stroke-miterlimit: 10;
}
</style>
<title>SM-Facebook</title>
<g>
<g>
<path class="st10" d="M159,99.1h-24V88.4c0-5,3.3-6.2,5.7-6.2h16.8V60l-24.4-0.1c-22.1,0-26.2,16.5-26.2,27.1v12.1H90v22.5h16.9
v67.5H135v-67.5h21.7L159,99.1z"></path>
</g>
</g>
<circle class="st110" cx="123.6" cy="123.2" r="108.2"></circle>
</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 version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 249 249"
style="enable-background:new 0 0 249 249;" xml:space="preserve">
<title>SM-Youtube</title>
<style type="text/css">
.st4 {
fill: none;
stroke: #FFFFFF;
stroke-width: 8;
stroke-miterlimit: 10;
}
.st5 {
fill: #FFFFFF;
}
</style>
<circle class="st4" cx="124.2" cy="123.4" r="108.2"></circle>
<g transform="translate(0,-952.36218)">
<path class="st5"
d="M88.4,1037.4c-10.4,0-18.7,8.3-18.7,18.7v40.1c0,10.4,8.3,18.7,18.7,18.7h72.1c10.4,0,18.7-8.3,18.7-18.7
v-40.1c0-10.4-8.3-18.7-18.7-18.7H88.4z M115.2,1058.8l29.4,17.4l-29.4,17.4V1058.8z"></path>
</g>
</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>
</footer>
<!-- ========== END FOOTER ========== -->
<!-- javascript to inject NWDS meta tags. Note: value of nwds_version is updated by "npm version" command -->
<script type="text/javascript">
var nwds_version = "1.2.3";
var meta_nwds_ver = document.createElement('meta');
meta_nwds_ver.name = 'ncbi_nwds_ver';
meta_nwds_ver.content = nwds_version;
document.getElementsByTagName('head')[0].appendChild(meta_nwds_ver);
var meta_nwds = document.createElement('meta');
meta_nwds.name = 'ncbi_nwds';
meta_nwds.content = 'yes';
document.getElementsByTagName('head')[0].appendChild(meta_nwds);
var alertsUrl = "/core/alerts/alerts.js";
if (typeof ncbiBaseUrl !== 'undefined') {
alertsUrl = ncbiBaseUrl + alertsUrl;
}
</script>
<script src="/mcgv/static/django_uswds/uswds/js/uswds.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/nwds.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/header.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/ncbipopup.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/ncbiclearbutton.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/override-uswds.js" type="text/javascript"></script>
<script src="/mcgv/static/nwds/js/ncbifeedback.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.ncbi.nlm.nih.gov/core/pinger/pinger.js"> </script>
</body>
</html>