<!DOCTYPE html><!DOCTYPE html>

<html lang="en">
<head>

    <title>METdb: A GENOMIC REFERENCE DATABASE FOR MARINE SPECIES</title>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


    <!-- Datatables -->
   	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/b-1.5.2/b-flash-1.5.2/b-html5-1.5.2/sc-1.5.0/datatables.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css"/>

    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>


    <!-- Leaflet CSS and JS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
        integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
        crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
        integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
        crossorigin=""></script>

    <!-- Leaflet cluster Marker-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>

    <!-- Highcharts -->
    <script src="https://code.highcharts.com/stock/highstock.js"></script>
    <script src="https://code.highcharts.com/modules/data.js"></script>
    <script src="https://code.highcharts.com/modules/drilldown.js"></script>
    <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

    <!--Font awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- Add additional CSS in static file -->
    <link rel="stylesheet" type="text/css" href="/metdb/static/metdb/css/style.css">

    <!-- Download files-->
    <script src="https://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
    <script src="https://stuk.github.io/jszip/dist/jszip.js"></script>
    <script src="https://cdn.jsdelivr.net/g/filesaver.js"></script>

    <style>

        [data-toggle="collapse"] .fa:before {
    content: "\f139";
    }

    [data-toggle="collapse"].collapsed .fa:before {
    content: "\f13a";
    }



    </style>
</head>
<body>

    

<!-- Self contained CSS/JS/HTML to display a banner with contents is fetched from a URL -->

<div id="systemsmessagebanner">
</div>

<script type="application/javascript">

	$(document).ready(function() {

		var baseurl="https://abims.sb-roscoff.fr/sites/abims.sb-roscoff.fr/files/servicemessages/";

		var cssurl=baseurl+"svcmsg.css";
		var head = document.getElementsByTagName('head')[0];

		/*
			Start by loading the CSS style sheet dynamically.
		*/
 		var style = document.createElement('link');
 		style.href = cssurl;
 		style.type = 'text/css';
 		style.rel = 'stylesheet';
 		head.append(style);

		var messageurl=baseurl+"svcmsg.json";

		var systemsmessagebanner=$("#systemsmessagebanner");
		$.getJSON(messageurl,function (data) {
			var display=false;
			$.each(data, function(index,message) {
				var startdate=new Date(message.from);
				var enddate=new Date(message.to);
				var now=new Date();
				if (startdate <= now && now <= enddate) {
					var messagediv=$("<div/>").addClass("systemsmessagebanner"+message.level).appendTo(systemsmessagebanner);
					$("<div>").html(message.title).addClass("systemsmessagebannertitle").appendTo(messagediv);
					$("<div>").html(message.text).appendTo(messagediv);
					display=true;
				}
			});
			if (display == true) {
				systemsmessagebanner.css({"display":"block"});
			}
		})
	});

</script>





<nav class="navbar navbar-expand-lg navbar-light" >
    <a class="navbar-brand" href="/metdb/">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-item nav-link" href="#">Services <span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link" href="/metdb/documentation/">Documentation</a>
                <a class="nav-item nav-link" href="/metdb/statistics/">Statistics</a>
                <a class="nav-item nav-link" href="">Blast</a>
              <a class="nav-item nav-link" href="/metdb/help/">Help</a>
              <a class="nav-item nav-link" href="/metdb/about/">About</a>
                <a class="nav-item nav-link" href="/metdb/contact_us/">Contact</a>

            </div>
          </div>

        <div id="navbar-right"> <a href="/metdb/" > <img src="/metdb/static/metdb/images/metdb_logo_new.png" height="50" style="max-width: 150px"></a> </div>

    </nav>

    <br>
    <br>

    <div class="container-fluid">
        <div class="row justify-content-md-center">
            <div class="col-md-2"></div>
            <div class="col-md-8">

<h3 align="center">
    <a  href="/metdb/" style="color: #FF6347;" >
        <b> A GENOMIC REFERENCE DATABASE FOR MARINE SPECIES </b>
    </a>
</h3>
<br>
<br>

<h2>Introduction</h2>
    <p align="justify">
        <font size="+1">
            The marine environment is extremely diverse and by far the largest habitat on Earth. Unlike marine prokaryotes, very little genomic data from marine organisms are available so far.
            In this context, we tends to develop a genomic reference database dedicated to micro-eukaryotic marine species transcriptomes, namely <b>METdb</b>. METdb is a comprehensive
            resource for Marine Eukaryotes Transcriptomes. All data is processed following the same standardized de-novo assembly and annotation pipelines
            (<a href="https://github.com/mscheremetjew/workflow-is-cwl/tree/assembly/" target="metdb_external">https://github.com/mscheremetjew/workflow-is-cwl/tree/assembly/</a>), providing a useful
            reference for biologists.
        </font>
    </p>
<hr>


    <h2>The database has the following record counts</h2>

    <table id="t01">

        <tr>
            <th><strong>Organisms</strong></th>
            <th><strong>Strains </strong></th>
            <th><strong>Transcriptomes </strong></th>
            <th><strong><a href="https://www.marinespecies.org/" target="metdb_external"> WoRMS Taxonomy matches</a></strong></th>
            <th><strong><a href="https://www.ncbi.nlm.nih.gov/Taxonomy" target="metdb_external"> NCBI Taxonomy database matches</a></strong></th>
            <th><strong><a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3531120/" target="metdb_external">PR2 Taxonomy matches</a></strong></th>
        </tr>
        <tr>
            <td>348</td>

            <td>463</td>

            <td>464</td>

            <td>325</td>

            <td>346</td>

            <td>348</td>

        </tr>

    </table>



<hr>


<div class="row">
    <div class="col col-lg-5" id="container_taxo_pr2" data-url="/metdb/svc/taxonomy_chart_data"></div>
    <div class="col col-lg-7" style="color:#007bff;font-weight:bolder;font-size:18px;font-family:Lucida Grande, Lucida Sans Unicode, Arial, Helvetica, sans-serif;text-decoration: none;">
        Sample Locations
        <div id="map" style="width: 100%; height: 400px;"></div>
    </div>

</div>

<hr>

<div id="accordion">

    <div class="card">
        <div class="card-header">
            <a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
                <i class="fa fa-pull-right fa-lg" aria-hidden="true"></i>
                <h2>Global Search</h2>
            </a>
        </div>
        <div id="collapseTwo" class="collapse show" >
            <div class="card-body">
                    <form class="form-inline" name="search_form" action="/metdb/search/" method="post" enctype="multipart/form-data"><input type="hidden" name="csrfmiddlewaretoken" value="djDanBwzOY3y0lCQReO0ZzwaVCuagwxArvVwiw3tD6ks1ujNbgHrQH2vIEN0JilM">
                    <div class="input-group">
                        <label for="assembly"><b>Assembly Search:</b></label>
                        <input id="assembly" name="assembly_searchterm" type="search" class="form-control" placeholder="Enter strain, MMETSP, RCC, TaxID, WormsID...">
                        <label for="annotation"><b>Annotation Search:</b></label>
                         <input id="annotation" name="annotation_searchterm" type="search" class="form-control" placeholder="Enter Pfam ID, Interproscan ID, function...">
                        <button type="submit" class="btn">Search</button>
                    </div>
                    </form>
                <p align="right"><a href="/metdb/advanced_search/">Advanced search</a></p>

        <div class="card">
            <div class="card-header">
                <a class="collapsed card-link" data-toggle="collapse" href="#collapseOne">
                   <i class="fa fa-pull-right fa-lg" aria-hidden="true"></i>
                    <h3 style="border-bottom: 2px solid #FF6347;">Search results</h3>
                </a>
            </div>
            <div id="collapseOne" class="collapse">
                <div class="card-body">
                    
                    


                    
                </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
              <a class="collapsed card-link" data-toggle="collapse" href="#collapseFour">
                  <i class="fa fa-pull-right fa-lg" aria-hidden="true"></i>
                  <h2>Strain Descriptions</h2>
                <a class="browse"></a>
              </a>
        </div>
        <div id="collapseFour" class="collapse">
              <div class="card-body">
                    <table id="browsetable" class="table table-striped table-bordered" width="100%">
                        <thead>
                            <tr>
                                <th>Details</th>
                                <th>Phylum</th>
                                <th>Class</th>
                                <th>Order</th>
                                <th>Family</th>
                                <th>Genus</th>
                                <th>Species</th>
                                <th>Strain name</th>
                                <th>Strain name synonym</th>
                                <th>NCBI ID</th>
                                <th>WoRMS ID</th>
                                <th>Reads Type</th>
                            </tr>
                        </thead>
                    </table>
              </div>
        </div>
    </div>
<script>
  $('#collapseThree').collapse('hide');
  $(document).ready(function() {
    $('#example').DataTable({
     "paging":   false,
     "search": {
    "caseInsensitive": true
  },
    }
    );
} );
</script>

<script>

var baseAssemblyDetailUrl='/metdb/assembly/123456789/';

    var formatPieLabels=function() {
    var name=this.point.name;

    var fields=name.split("#");
    var label=fields[0];

    if (fields.length > 1) {
        iddata=fields[1].split(":");
        if (iddata[0] == 'assemblyid' && iddata.length == 2) {
            id=iddata[1];
            assemblyDetailUrl=baseAssemblyDetailUrl.replace("123456789",id);
            label='<a href="'+assemblyDetailUrl+'">'+label+'</a>';
        }
    }

    return label;
    };

    $.ajax({
    url: $("#container_taxo_pr2").attr("data-url"),
    dataType: 'json',
    success: function (data) {
        var chart=data;
        chart.plotOptions={pie : {dataLabels :{formatter : formatPieLabels}}};
        chart.credits={enabled:false};
        chart.title.text='<b><a href="https://github.com/pr2database/pr2database" target="metdb_external">The Protist Ribosomal Reference database (PR2) Taxonomy</a></b>';
        chart.title.align='center';
        chart.title.useHTML=true;
        $("#container_taxo_pr2").highcharts(chart);
    }});

    var formatColumnLabels=function() {
    var name=this.point.name;

    var fields=name.split("#");
    var label=fields[0];

    if (fields.length > 1) {
        iddata=fields[1].split(":");
        if (iddata[0] == 'assemblyid' && iddata.length == 2) {
            id=iddata[1];
            assemblyDetailUrl=baseAssemblyDetailUrl.replace("123456789",id);
            label='<a href="'+assemblyDetailUrl+'">'+label+'</a>';
        }
    }

    return label;
    };

    var formatXAxisLabels=function() {
    var name=this.value;

    var fields=name.split("#");
    var label=fields[0];

    if (fields.length > 1) {
        iddata=fields[1].split(":");
        if (iddata[0] == 'assemblyid' && iddata.length == 2) {
            id=iddata[1];
            assemblyDetailUrl=baseAssemblyDetailUrl.replace("123456789",id);
            label='<a href="'+assemblyDetailUrl+'">'+label+'</a>';
        }
    }

    return label;
    };

</script>

<script type="text/javascript" charset="utf8">

    var map = new L.map('map').setView([42.35, -71.08], 1);
    /*
    * Let Django build the URL to the readset detail view using a dummy readset identifier.
    */

    var baseReadSetDetailUrl='/metdb/readset/123456789/';
    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    function onEachFeature(feature, layer) {
        if (feature.properties && feature.properties.popupContent) {
            // Substitute the dummy readset identifier by an actual identifier.
            readSetDetailUrl=baseReadSetDetailUrl.replace("123456789",feature.properties.readsetid);
            layer.bindPopup('<p><b>Genus:</b> <i>'+feature.properties.genus+'</i> \
                            <p><b>Species:</b> <i>'+feature.properties.popupContent+'</i></p> \
                            <p><b>Strain:</b> <i>'+feature.properties.strain+'</i></p> \
                            <p><b>MetDB ID:</b> <i>'+feature.properties.metdbid+'</i></p> \
                            <p><b>Readset:</b> <i>'+feature.properties.sample_alias+'</i></p> \
                            <p><b>Localisation:</b> <i>'+feature.properties.site_me+'</i></p> \
                            <p><b>Longitude:</b> <i>'+feature.properties.longitude+'</i></p> \
                            <p><b>Latitude:</b> <i>'+feature.properties.latitude+'</i></p> \
                            <p><a href="'+readSetDetailUrl+'">View readset details</a></p>');
        }
    }

    // load GeoJSON from an external file
    $.getJSON("/metdb/svc/build_map", function(data) {
        var geojson = L.geoJson(data, {
            onEachFeature: onEachFeature
    });
    var markers = L.markerClusterGroup();
    markers.addLayer(geojson);
    map.fitBounds(geojson.getBounds());
    markers.addTo(map);

    });

</script>

<script type="text/javascript" charset="utf8">

 var baseAssemblyDetailUrl='/metdb/assembly/123456789/';
        $(document).ready(function() {
            $('#browsetable').DataTable( {
                "dom": 'Bfrtip',
                "buttons": ['copy','csv','excel','print'],
                "ajax": '/metdb/svc/build_table/',
                "scrollX": true,
                 "scrollY": "700px",
                 "scrollCollapse": true,
                "search": {
                        "caseInsensitive": true
                },
                "columns": [
                { "data": "id" ,
                     "mRender": function(data, type, full) {
                        return '<a href='+baseAssemblyDetailUrl.replace("123456789",data)+'><i class="fa fa-search"></i></a>';
                    }
                },
                { "data": "phylum" },
                { "data": "class" },
                { "data": "order" },
                { "data": "family" },
                { "data": "Genus" },
                { "data": "Species" },
                { "data": "Strain" ,
                  "defaultContent": "missing" },
                { "data": "culture"},
                { "data": "taxncbi",
                    "render": function(data, type, row, meta){
                        if(type === 'display'){
                            data = '<a href="https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id='+ data + '" target="metdb_external">' + data + '</a>';
                        }
                        return data;
                    }
                  },
                { "data": "taxworms",
                    "render": function(data, type, row, meta){
                        if(type === 'display'){
                            data = '<a href="https://www.marinespecies.org/aphia.php?p=taxdetails&id='+ data + '" target="metdb_external">' + data + '</a>';
                        }
                        return data;
                    }
                  },

                { "data": "type" },
        ]
    });
} );

</script>

<script>


function downloadFiles (filename,name) {
    var URLS = [];
	var path = "input:checkbox[name="+name+"]:checked"
	$(path).each(function(){
	URLS.push($(this).val());
});

saveToZip (filename, URLS);

}

function saveToZip (filename, urls) {

    const zip = new JSZip()
    urls.forEach((url)=> {
        const blobPromise = fetch(url).then(r => {
            if (r.status === 200) return r.blob()
            return Promise.reject(new Error(r.statusText))
        })
        const name = url.substring(url.lastIndexOf('/'))
        zip.file(name, blobPromise)
        var msg1 = "Fetch progression...";
        showMessage(msg1);
    })

    zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
        var msg = "Download progression : " + metadata.percent.toFixed(2) + " %";
        if(metadata.currentFile) {
            msg += ", current file = " + metadata.currentFile;
        }
        showMessage(msg);
        updatePercent(metadata.percent|0);
    })
        .then(blob => saveAs(blob, filename))
        .catch(e => console.log(e));

    return false;
}

/**
 * Reset the message.
 */
function resetMessage () {
    $("#result")
    .removeClass()
    .text("");
}
/**
 * show a successful message.
 * @param {String} text the text to show.
 */
function showMessage(text) {
    resetMessage();
    $("#result")
    .addClass("alert alert-success")
    .text(text);
}
/**
 * show an error message.
 * @param {String} text the text to show.
 */
function showError(text) {
    resetMessage();
    $("#result")
    .addClass("alert alert-danger")
    .text(text);
}
/**
 * Update the progress bar.
 * @param {Integer} percent the current percent
 */
function updatePercent(percent) {
    $("#progress_bar").removeClass("hide")
    .find(".progress-bar")
    .attr("aria-valuenow", percent)
    .css({
        width : percent + "%"
    });
}


</script>


<script type="text/javascript">
    function selectAll() {
        var items = document.getElementsByName('acs');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = true;
        }
    }

    function UnSelectAll() {
        var items = document.getElementsByName('acs');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = false;
        }
    }
</script>



<script type="text/javascript">
    function selectAllinterproscan() {
        var items = document.getElementsByClassName('ipr');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = true;
        }
    }

    function UnSelectAllinterproscan() {
        var items = document.getElementsByClassName('ipr');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = false;
        }
    }
</script>

<script type="text/javascript">
    function selectAllpep() {
        var items = document.getElementsByClassName('pep');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = true;
        }
    }

    function UnSelectAllpep() {
        var items = document.getElementsByClassName('pep');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = false;
        }
    }
</script>

<script type="text/javascript">
    function selectAllfasta() {
         var items = document.getElementsByClassName('fasta');
            for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = true;
        }
    }

    function UnSelectAllfasta() {
        var items = document.getElementsByClassName('fasta');
        for (var i = 0; i < items.length; i++) {
            if (items[i].type == 'checkbox')
                items[i].checked = false;
        }
    }
</script>

</div>
</div>



</div>
            <div class="col-md-2"></div>
        </div>
    </div>


<footer class="footer">
        <a href="https://abims.sb-roscoff.fr/" >
            <img class="footerimage" src="/metdb/static/metdb/images/abims.png">
        </a>
        <a href="https://www.sb-roscoff.fr/" >
            <img class="footerimage" src="/metdb/static/metdb/images/sbr.png">
        </a>
        <a href="https://www.sorbonne-universite.fr" >
            <img class="footerimage" src="/metdb/static/metdb/images/su.png">
        </a>
        <a href="https://www.cnrs.fr/" >
            <img class="footerimage" src="/metdb/static/metdb/images/cnrs.png">
        </a>
        <a href="https://www.cea.fr/" >
            <img class="footerimage" src="/metdb/static/metdb/images/CEA.png">
        </a>
        <a href="https://jacob.cea.fr/drf/ifrancoisjacob/Pages/Departements/Genoscope.aspx" >
            <img class="footerimage" src="/metdb/static/metdb/images/genoscope.png">
        </a>
        <a href="https://www.elixir-europe.org/" >
            <img class="footerimage" src="/metdb/static/metdb/images/elixir.png">
        </a>
        <a href="https://www.ebi.ac.uk/" >
            <img class="footerimage" src="/metdb/static/metdb/images/EMBL_EBI.png">
        </a>
        <a href="https://www.ebi.ac.uk/ena" >
            <img class="footerimage" src="/metdb/static/metdb/images/ENA.png">
        </a>
        <a href="https://www.france-bioinformatique.fr/" >
            <img class="footerimage" src="/metdb/static/metdb/images/ifb.png">
        </a>

</footer>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74893912-20"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-74893912-20');
</script>


</body>
</html>
