CINXE.COM

<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" rel="stylesheet"> <script crossorigin="anonymous" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script crossorigin="anonymous" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> <html lang="en"> <head> <meta charset="UTF-8"> <title>OMArk</title> <script src="/static/js/d3.v6.js"></script> <script src="/static/js/omark_viewer.js"></script> <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script> <link href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css" rel="Stylesheet"></link> <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js" ></script> <style> .ui-autocomplete {z-index: 10000} .content_container{ height: calc(100vh - 56px); background-color: white!important; } body{ font-family: sans-serif; } </style>  <script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://matomo.sib.swiss/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '139']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <noscript><p><img src="https://matomo.sib.swiss/matomo.php?idsite=139&rec=1" style="border:0;" alt="" /></p></noscript>  </head> <body> <nav class=" navbar-expand-sm navbar navbar-dark bg-dark"> <a class="navbar-brand" href="/home/" ><img src="/static/img/logo-OMArk.png" alt="OMArk" style="width: 120px;"></a> <ul class="navbar-nav ml-auto" > <li><input class="form-control mr-sm-2 " style="margin-left:-8px" id="autocomplete" type="search" placeholder="Enter species name" aria-label="Search"></li> <li class="nav-item "> <a class="nav-link" href="/assess/">Submit Genome </a> </li> <li class="nav-item "> <a class="nav-link" data-toggle="modal" data-target="#exampleModal" style="cursor: pointer">Help </a> </li> <li class="nav-item " style="margin-left: 12px"> <a href="/accounts/login/" class="btn btn-outline-info " >Sign In</a> </li> <li class="nav-item" style="margin-left: 12px"> <a href="/accounts/signup/" class="btn btn-outline-info " >Sign Up</a> </li> </ul> </nav>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">OMArk help</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Interpreting OMArk results </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <img src="/static/img/FigureX_OMArk_help.png" class="img-fluid" alt="Plot legend legend plot plot legend title"> <br> <p> OMArk is based on the comparison of a <b>target proteome</b> to the expected gene repertoire of the common ancestor of a selected lineage to which it belongs, as reconstructed using extant species gene repertoire. OMArk results are divided in two sections: <b>Completeness</b> and <b>Whole proteome assessment</b>.</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Completeness </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <p> The completeness statistic is estimating what proportion of the actual gene content of the species is represented in the proteome. It does this by looking for representatives of conserved gene families (represented here as HOGs: Hierarchical Orthologous Groups) - gene families present in at least <b>80% </b> species of the selected lineage and expected to be present. </p> <p>The result represent what proportion of those HOGs are found or not in the genome, and are divided in three part:</p> <dl class="row"> <dt class="col-sm-3">Single</dt> <dd class="col-sm-9"> <p>The gene family is represented by one gene in the proteome.</p></dd> <dt class="col-sm-3">Duplicated</dt> <dd class="col-sm-9"> <p>The gene family is represent by multiple genes in the proteome.</p> </dd> <dt class="col-sm-3">Missing</dt> <dd class="col-sm-9"> <p>The gene family is not represented in the proteome.</p> </dd> </dl> A high-quality proteome typically has a low missing proportion and more single copy genes than duplicated unless there is a known Whole genome duplication. </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Whole proteome assessment </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <p>The Whole proteome assessment gives an estimate of the proportion of the proteomes made-up from gene models consistent with known homologs, and what proportion may be mistakes. It is based on comparison to the gene contents of all extant species of the same lineage from target species. </p> <p><b>Consistent: </b> Proportion of genes whose closest gene families are from the selected lineage.</p> <p><b>Contamination: </b> Proportion of genes whose closest gene families is from another lineage and likely come from contamination or horizontal gene transfer (Multiple genes are linked to representant of this lineage) </p> <p><b>Inconsistent: </b> Proportion of genes whose closest genes families is from another lineage, but likely result from noise (Likely dubious gene models/spurious annotation of non-coding region) </p> <p><b>Unknown: </b> Proportion of genes with no closest homologs found - could be spurious gene or orphan species specific genes</p> <p> Genes from the three first categories can also be labeled as: <dl class="row"> <dt class="col-sm-3">Partial mapping</dt> <dd class="col-sm-9"> <p>Genes that have less than 80% of the sequence with shared k-mer content from its closest gene family.</p></dd> <dt class="col-sm-3">Fragments</dt> <dd class="col-sm-9"> <p>Genes with a length less than half the median gene content of its closest gene family</p> </dd> <dt class="col-sm-3">Missing</dt> <dd class="col-sm-9"> <p>The gene family is not represented in the proteome.</p> </dd> </dl> High proportion of either of those can indicate dubious gene models or spurious genes. </p> <p>A high-quality proteome typically has a <b>high consistent proportion</b>, <b>no contamination</b>, and <b>low partial mapping</b> and <b>fragments</b>. </p> </div> </div> </div> <div class="card"> <div class="card-header" id="heading4"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse4" aria-expanded="false" aria-controls="collapse4"> Comparison </button> </h2> </div> <div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionExample"> <div class="card-body"> <p> OMArk statistics are computed using the species distribution from the OMA database, thus sampling and diversity of a lineage will vary. Because of this, it is not advised to compare the results to those of species from different lineage, and is preferable to compare it to other close species. </p> <p> The comparison view allows such comparison - as rules of thumb, a result would be considered as satisfying if it gets lower (or similar) missing proportion and higher (or similar) consistent proportion than species of the same range. </p> <p>All proteomes displayed there were downloaded from Uniprot in February 2022 </p> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="content_container"> <style> .lds-dual-ring { display: inline-block; width: 80px; height: 80px; } .lds-dual-ring:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid #17a2b8; border-color: #17a2b8 transparent #17a2b8 transparent; animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> <div class="container-fluid"> <div class="row" > <div class="col-md-4 flex my-auto mx-auto" style="padding: 24px"> <p class="" style="text-align: justify; padding: 12px"> OMArk is a software to assess the quality of gene repertoire annotated from a genomic sequence - also called proteome. It relies on comparisons to the predicted ancestral gene repertoire of the target species and to the extant gene repertoire of close species to: <ul> <li>Estimate the completeness of the gene-repertoire by comparison to conserved orthologous groups.</li> <li>Estimate the proportion of accurate and erroneous gene models in the proteome.</li> <li>Detect possible contamination from other species in the proteome.</li> </ul> The software is available as a command-line tool on <a href='https://github.com/DessimozLab/OMArk'>GitHub</a> or can be executed from this webserver. </p> <a href="/assess/" style="width:50%" class="btn btn-outline-info mx-auto d-block " role="button" >Submit genomes</a> </div> <div id='col_viewer' class="col-md-8 d-flex justify-content-center " style="height: calc(100vh - 84px); padding-top: 24px"> <div class="lds-dual-ring align-self-center " style="display: none"></div> <div id="viewer"> <div class="dropdown float-right" id='drop' style="position:relative;top:80px;right: 30px; display: none"> <button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Select Taxon </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <input class="form-control mr-sm-2 " style="" id="autocomplete_taxon_home" type="search" placeholder="Enter clade" aria-label="Search_taxon"> <button class="dropdown-item droplevel" id='taxon_All' type="button">All</button> <button class="dropdown-item droplevel" id='taxon_9443' type="button">Primates</button> <button class="dropdown-item droplevel" id='taxon_314147' type="button">Glires</button> <button class="dropdown-item droplevel active" id="taxon_314146" type="button">Euarchontoglires</button> <button class="dropdown-item droplevel" id='taxon_4890' type="button">Ascomycota</button> <button class="dropdown-item droplevel" id='taxon_5204' type="button">Basidiomycota</button> <button class="dropdown-item droplevel" id='taxon_1437183' type="button">Mesangiospermae</button> <button class="dropdown-item droplevel" id='taxon_7742' type="button">Vertebrata</button> <button class="dropdown-item droplevel" id='taxon_6656' type="button">Arthropoda</button> <button class="dropdown-item droplevel" id='taxon_6231' type="button">Nematoda</button> <button class="dropdown-item droplevel" id='taxon_6157' type="button">Lophotrochozoa</button> <button class="dropdown-item droplevel" id='taxon_7147' type="button">Diptera</button> <button class="dropdown-item droplevel" id='taxon_32443' type="button">Teleost</button> <button class="dropdown-item droplevel" id='taxon_2698737' type="button">SAR</button> </div> </div> <script> var elements = document.getElementsByClassName("droplevel"); const myFunction = function() { function removeURLParameter(url, parameter) { //prefer to use l.search if you have a location/link object var urlparts = url.split('?'); if (urlparts.length >= 2) { var prefix = encodeURIComponent(parameter) + '='; var pars = urlparts[1].split(/[&;]/g); //reverse iteration as may be destructive for (var i = pars.length; i-- > 0;) { //idiom for string.startsWith if (pars[i].lastIndexOf(prefix, 0) !== -1) { pars.splice(i, 1); } } return urlparts[0] + (pars.length > 0 ? '?' + pars.join('&') : ''); } return url; } var u = removeURLParameter(window.location.href, 'taxon' ) let t = this.id.replace('taxon_', '') if (t === 'All'){ history.pushState(null, 'OMARK', u); run('') } else { history.pushState(null, 'OMARK', u + '?taxon=' + t); run("&taxon_ids=" + t) } let n = this.parentNode.querySelectorAll(".droplevel"); for (let i=0; i<n.length; i++){ n[i].classList.remove("active"); } this.classList.add("active"); }; for (let i = 0; i < elements.length; i++) { elements[i].addEventListener('click', myFunction, false); } </script> </div> <script> function run(tax){ d3.select('#viewer').selectAll("svg").remove(); document.getElementsByClassName('lds-dual-ring')[0].style.display='block'; document.getElementById('drop').style.display = 'none'; (async () => { let source_params = ''; let d = JSON.parse(localStorage.getItem('datasets')); for (const sourceParamsKey in d ) { source_params += '&sources=' + d[sourceParamsKey]; } let releases_params = ''; let selected_releases = JSON.parse(localStorage.getItem("releases")); for (const rel_key in selected_releases){ releases_params += "&releases=" + selected_releases[rel_key]; } var [tree, results] = await Promise.all([ fetch("/api/results/speciestree/?format=json" + tax + source_params + releases_params).then(response => response.json()), fetch("/api/results/?format=json" + tax + source_params + releases_params).then(response => response.json()), ]); //console.log(results) document.getElementsByClassName('lds-dual-ring')[0].style.display = 'none'; document.getElementById('drop').style.display = 'block'; var viz_component = new OmarkViewer('viewer'); viz_component.single = false; viz_component.show_label = 'auto'; viz_component.query = ''; const height = document.querySelector('#col_viewer').offsetHeight; const width = document.querySelector('#col_viewer').offsetWidth; viz_component.settings.height = Math.max((height - 48) / 5, 100); viz_component.settings.width = width * 0.9; viz_component.render(results, tree); })(); } const searchParams = new URLSearchParams(window.location.search); var tt = searchParams.get('taxon'); if (tt) { run('&taxon_ids=' + tt); } else{ run('&taxon_ids=314146'); } </script> </div> </div> </div> </div> <button type="button" data-toggle="modal" data-target="#settingsModal" style="position: absolute; border-radius: 500px;z-index: 10; top: 80px; right: 24px" class="btn btn-outline-dark">Change datasets</button>  <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">OMArk settings</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <b>Dataset to show</b> <div style="margin-left:24px"> <div class="form-check"> <input class="form-check-input dataset_checkbox" type="checkbox" value="0" id="check_ds_0" > <label class="form-check-label" for="check_ds_0">UniProt Reference Proteomes</label> </div> <div class="form-check"> <input class="form-check-input dataset_checkbox" type="checkbox" value="1" id="check_ds_1" > <label class="form-check-label" for="check_ds_1">Ensembl</label> </div> <div class="form-check"> <input class="form-check-input dataset_checkbox" type="checkbox" value="2" id="check_ds_2" > <label class="form-check-label" for="check_ds_2">NCBI</label> </div> <div class="form-check"> <input class="form-check-input dataset_checkbox" type="checkbox" value="99" id="check_ds_99" > <label class="form-check-label" for="check_ds_99">Unverified (public user provided proteomes)</label> </div> </div> <hr> <b>Server Releases to show</b> <div style="margin-left:24px"> <div class="form-check"> <input class="form-check-input release_checkbox" type="checkbox" value="3" id="check_rel_3"> <label class="form-check-label" for="check_rel_3">2024.06</label> </div> <div class="form-check"> <input class="form-check-input release_checkbox" type="checkbox" value="2" id="check_rel_2"> <label class="form-check-label" for="check_rel_2">2023.10</label> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" id="save_settings" data-dismiss="modal" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <script> // SET CHECKBOX ACCORDING TO LOCAL STORAGE if (localStorage.getItem("datasets") === null) { localStorage.setItem('datasets', JSON.stringify([0, 1, 2])); } if (localStorage.getItem("releases") === null){ localStorage.setItem('releases', JSON.stringify(3)); } var d = localStorage.getItem('datasets'); var r = localStorage.getItem('releases'); document.querySelectorAll('.dataset_checkbox').forEach(div => { if (d.includes(div.value)){ div.checked = true; } }) document.querySelectorAll('.release_checkbox').forEach(div => { div.checked = (r.includes(div.value)); }) document.getElementById("save_settings").addEventListener("click", () => { let datasets = []; [...document.querySelectorAll('.dataset_checkbox:checked')].forEach(div => {datasets.push(div.value);}); localStorage.setItem('datasets', JSON.stringify(datasets)); let releases = []; [...document.querySelectorAll('.release_checkbox:checked')].forEach(div => {releases.push(div.value);}); localStorage.setItem('releases', JSON.stringify(releases)); location.reload(); }); </script> <script> var all_names = []; var all_names_taxon = []; function recursiveScan(json) { if (json.id){ all_names_taxon.push({label: json.name, value: json.id }) } if(json.children != null) { //here you have access to id and dataelements if(json.children.length > 0) { for(let t=0; t<json.children.length; t++){ var e = json.children[t]; if (e.children == null) {all_names.push({label: e.name, value: e.qs_id })} //here you have access to each child as json.children[t] //you could do the logic for the current child //then pass the current child to the recursive function recursiveScan(json.children[t]); } } } return true; } $.getJSON( "/api/results/speciestree/?format=json", function( jsonData ) { recursiveScan(jsonData) console.log(all_names) var species_auto_options = { source: all_names, select: function(event, ui){ var newUrl="/view/1234567/".replace(/1234567/, ui.item.value); window.location = newUrl; return false; }, }; $('#autocomplete').autocomplete(species_auto_options); $('#autocomplete').autocomplete("enable"); const element = document.getElementById("autocomplete_taxon_home"); if (element) { var species_auto_options = { source: all_names_taxon, select: function (event, ui) { run('&taxon_ids=' + ui.item.value); return false; }, }; $('#autocomplete_taxon_home').autocomplete(species_auto_options); $('#autocomplete_taxon_home').autocomplete("enable"); } const element_ = document.getElementById("autocomplete_taxon_run"); if (element_) { var species_auto_options = { source: all_names_taxon, select: function (event, ui) { load_multi('&taxon_ids=' + ui.item.value); return false; }, }; $('#autocomplete_taxon_run').autocomplete(species_auto_options); $('#autocomplete_taxon_run').autocomplete("enable"); } }) </script> </body> </html>