Mercurial > repos > cpt > cpt_annotation_table
diff phageqc_report_annotation_table.html @ 1:32e011fa615c draft
planemo upload commit edc74553919d09dcbe27fcadf144612c1ad3a2a2
| author | cpt |
|---|---|
| date | Wed, 26 Apr 2023 03:42:32 +0000 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/phageqc_report_annotation_table.html Wed Apr 26 03:42:32 2023 +0000 @@ -0,0 +1,244 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> + <meta name="description" content=""> + <meta name="author" content=""> + <title>Annotation Table</title> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" crossorigin="anonymous"> + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> + + <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css"> + <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script> + <style type="text/css"> +/* + * Base structure + */ + +/* Move down content because we have a fixed navbar that is 50px tall */ +body { + padding-top: 50px; +} + +h3:before { + display: block; + content: " "; + margin-top: -50px; + height: 50px; + visibility: hidden; +} + +/* + * Global add-ons + */ + +.sub-header { + padding-bottom: 10px; + border-bottom: 1px solid #eee; +} + +/* + * Top navigation + * Hide default border to remove 1px line. + */ +.navbar-fixed-top { + border: 0; +} + +/* + * Sidebar + */ + +/* Hide for mobile, show later */ +.sidebar { + display: none; +} +@media (min-width: 768px) { + .sidebar { + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + display: block; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + background-color: #f5f5f5; + border-right: 1px solid #eee; + } +} + +/* Sidebar navigation */ +.nav-sidebar { + margin-right: -21px; /* 20px padding + 1px border */ + margin-bottom: 20px; + margin-left: -20px; +} +.nav-sidebar > li > a { + padding-right: 20px; + padding-left: 20px; +} +.nav-sidebar > .active > a, +.nav-sidebar > .active > a:hover, +.nav-sidebar > .active > a:focus { + color: #fff; + background-color: #428bca; +} + + +/* + * Main content + */ + +.main { + padding: 20px; +} +@media (min-width: 768px) { + .main { + padding-right: 40px; + padding-left: 40px; + } +} +.main .page-header { + margin-top: 0; +} + + +/* + * Placeholder dashboard ideas + */ + +.placeholders { + margin-bottom: 30px; + text-align: center; +} +.placeholders h4 { + margin-bottom: 0; +} +.placeholder { + margin-bottom: 20px; +} +.placeholder img { + display: inline-block; + border-radius: 50%; +} + +td.moron { + font-size: 150%; + padding: 0px; + color: gray; +} +.strand_emph { + text-decoration: underline; + color: black; +} + + </style> + <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> + <!--[if lt IE 9]> + <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> + <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> + <![endif]--> + </head> + <body> + + <nav class="navbar navbar-inverse navbar-fixed-top"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Annotation Table</a> + </div> + </div> + </nav> + + <div class="container-fluid"> + <div class="row"> + <div class="col-md-12 main" id="main"> + <ul class="nav nav-tabs" role="tablist" id="myTabs"> + <li role="presentation" class="active"><a href="#overview" role="tab" data-toggle="tab">Overview</a></li> + {% for (record, data) in annotation_table_data %} + <li role="presentation"><a href="#{{ record.id }}" role="tab" data-toggle="tab">{{ record.id }}</a></li> + {% endfor %} + </ul> + + <!-- Tab panes --> + <div class="tab-content"> + <div role="tabpanel" class="tab-pane active" id="overview"> + Data on each organism will be accessible from the tabs above. + </div> + {% for (record, data) in annotation_table_data %} + <div role="tabpanel" class="tab-pane" id="{{ record.id }}"> + <table class="table table-striped" id="data"> + <thead> + <tr> + {% for col in annotation_table_col_names %} + <th>{{ col[0] }}</th> + {% endfor %} + </tr> + </thead> + <tbody> + {% for row in data %} + <tr> + {% for col in row %} + <td>{% if col is not string %}<ul>{% for val in col %}<li>{{ val }}</li>{% endfor %}</ul>{% else %}{{ col }}{% endif %}</td> + {% endfor %} + </tr> + {% endfor %} + </tbody> + </table> + </div> + {% endfor %} + </div> + </div> + </div> + </div> + + <script type="text/javascript"> + $(document).ready( function () { + + + +$('#myTabs a').click(function (e) { + e.preventDefault() + $(this).tab('show') +}) + + + +jQuery.fn.dataTable.ext.type.detect.unshift( function ( data ) { + if ( typeof data !== 'string' ) { + return null; + } + + var matches = data.match(/^(\d+)\.\.(\d+)/); + return matches ? 'genomic' : null; +} ); + + + +jQuery.extend( jQuery.fn.dataTableExt.oSort, { + "genomic-pre": function ( a ) { + var matches = a.match(/^(\d+)\.\.(\d+)/); + console.log(a + " " + matches[1]); + return parseInt(matches[1]); + }, + + "genomic-asc": function ( a, b ) { + return ((a < b) ? -1 : ((a > b) ? 1 : 0)); + }, + + "genomic-desc": function ( a, b ) { + return ((a < b) ? 1 : ((a > b) ? -1 : 0)); + } +} ); + + $('table').DataTable(); + }); + </script> + </body> +</html>