Forked from
IMP / IMP
917 commits behind the upstream repository.
-
Yohan Jarosz authoredYohan Jarosz authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
imp.html 12.83 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="d3.min.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<script src="data.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
body {
padding-top: 70px;
}
.bar {
fill: steelblue;
}
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.img-result-container {
width: 350px;
float: left;
}
.table-result {
float: left;
margin: 10px;
}
.table-result table,td {
border: 1px solid steelblue;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="block-stats" class="container-fluid">
<div id="tabs" role="tabpanel">
<ul id="tabnav" class="nav nav-tabs navbar-nav navbar-fixed-top navbar-inverse" role="tablist">
<a class="navbar-brand" href="#"> IMP <small>Integrated Metaomic Pipeline </small></a>
<li><a href="#raw" aria-controls="raw" role="tab" data-toggle="tab">Raw</a></li>
<li><a href="#preprocess" aria-controls="preprocess" role="tab" data-toggle="tab">Preprocess</a></li>
<li><a href="#assembly" aria-controls="assembly" role="tab" data-toggle="tab">Assembly</a></li>
<li><a href="#mapping" aria-controls="mapping" role="tab" data-toggle="tab">Mapping</a></li>
<li><a id="annottab" href="#annotation" aria-controls="annotation" role="tab" data-toggle="tab">Annotation</a></li>
<li><a href="#variants" aria-controls="variants" role="tab" data-toggle="tab">Variants</a></li>
<li><a href="#ratio" aria-controls="ratio" role="tab" data-toggle="tab">Ratio</a></li>
<li><a href="#overview" aria-controls="overview" role="tab" data-toggle="tab">Workflow overview</a></li>
<li><a href="#configurations" aria-controls="configurations" role="tab" data-toggle="tab">Configuration</a></li>
<li><a href="#references" aria-controls="references" role="tab" data-toggle="tab">References</a></li>
<p class="navbar-text navbar-right"></p>
</ul>
</div>
<div id="wholecontent" class="container">
<div class="tab-content">
<!-- RAW STATISTICS -->
<div role="tabpanel" class="tab-pane fade" id="raw">
<section id="raw-section" class="row">
<h2><small>Raw data statistics</small></h2>
<div id="but-raw" class="btn-group" data-toggle="buttons" name="raw-data">
<label class="btn btn-primary active">
<input id="but-raw-mgr1" type="radio" value="Analysis/stats/MG/MG.R1.fq_fastqc.html" class="btn btn-default" name="raw-data" checked>MG R1
</label>
<label class="btn btn-primary">
<input id="but-raw-mgr2" type="radio" value="Analysis/stats/MG/MG.R2.fq_fastqc.html" class="btn btn-default" name="raw-data">MG R2
</label>
<label class="btn btn-primary">
<input id="but-raw-mtr1" type="radio" value="Analysis/stats/MT/MT.R1.fq_fastqc.html" class="btn btn-default" name="raw-data">MT R1
</label>
<label class="btn btn-primary">
<input id="but-raw-mtr2" type="radio" value="Analysis/stats/MT/MT.R2.fq_fastqc.html" class="btn btn-default" name="raw-data">MT R2
</label>
</div>
<div class="row">
<iframe id="ifr-raw-stat" src="Analysis/stats/MG/MG.R1.fq_fastqc.html" style="position: absolute; width: 100%;height: 100%; border: none"></iframe>
</div>
</section>
</div>
<!-- PREPROCESS STATISTICS -->
<div role="tabpanel" class="tab-pane fade active" id="preprocess">
<section id="preprocess-section" class="row">
<h2><small>Preprocessed data statistics</small></h2>
<div id="but-preprocess" class="btn-group" data-toggle="buttons" name="preprocess-data">
<label class="btn btn-primary active">
<input id="but-preprocess-mgr1" type="radio" value="Analysis/stats/MG/MG.R1_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data" checked>MG R1
</label>
<label class="btn btn-primary">
<input id="but-preprocess-mgr2" type="radio" value="Analysis/stats/MG/MG.R2_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data">MG R2
</label>
<label class="btn btn-primary">
<input id="but-preprocess-mgse" type="radio" value="Analysis/stats/MG/MG.SE_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data">MG SE
</label>
<label class="btn btn-primary">
<input id="but-preprocess-mtr1" type="radio" value="Analysis/stats/MT/MT.R1_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data">MT R1
</label>
<label class="btn btn-primary">
<input id="but-preprocess-mtr2" type="radio" value="Analysis/stats/MT/MT.R2_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data">MT R2
</label>
<label class="btn btn-primary">
<input id="but-preprocess-mtse" type="radio" value="Analysis/stats/MT/MT.SE_preprocessed_fastqc.html" class="btn btn-default" name="preprocess-data">MT SE
</label>
</div>
<div class="row">
<iframe id="ifr-preprocess-stat" src="Analysis/stats/MG/MG.R1_preprocessed_fastqc.html" style="position: absolute; width: 100%;height: 100%; border: none"></iframe>
</div>
</section>
<!-- FILTERING -->
<section id="filtering-section" class="row">
<div class="row">
<div class="table-result" id="MG_read_stats"></div>
<div class="table-result" id="MT_read_stats"></div>
</div>
</section>
</div>
<!-- ASSEMBLY -->
<div role="tabpanel" class="tab-pane fade" id="assembly">
<section id="assembly-section" class="row">
<div id="but-assembly" class="row btn-group" data-toggle="buttons" name="assembly-data">
<label class="btn btn-primary">
<input id="but-assembly1" type="radio" value="Analysis/results/IMP-vizbin_length.png" class="btn btn-default" name="assembly-data">Vizbin length </label>
<label class="btn btn-primary">
<input id="but-assembly2" type="radio" value="Analysis/results/IMP-vizbin_length_GC.png" class="btn btn-default" name="assembly-data">Vizbin GC
</label>
<label class="btn btn-primary active">
<input id="but-assembly3" type="radio" value="Analysis/results/quast/summary/report.html" class="btn btn-default" name="assembly-data" checked>Quast
</label>
</div>
<div class="row">
<div id='assembly-wrapper' class='row'><img class='img-responsive' src='Analysis/results/IMP-vizbin_length.png'/></div>
</div>
<!-- <div role="tabpanel" class="tab-pane fade" id="assembly">
<h2><small>Assembly </small></h2>
<div class="row">
<div class="col-sm-3 col-md-3"></div>
<div class="col-sm-6 col-md-6 table-result" id="assembly_stats"></div>
<div class="col-sm-3 col-md-3"></div>
</div>
<div class="row">
<div id="carousel-assembly-wrapper"></div>
</div> -->
</section>
</div>
<!-- MAPPING -->
<div role="tabpanel" class="tab-pane fade" id="mapping">
<section id="mapping-section" class="row">
<div class="row">
<div class="col-sm-1 col-md-1"></div>
<div class="col-sm-5 col-md-5 table-result" id="MG_mapping_stats"></div>
<div class="col-sm-5 col-md-5 table-result" id="MT_mapping_stats"></div>
</div>
<div class="col-sm-1 col-md-1"></div>
<div class="row">
<div id="carousel-mapping-wrapper"></div>
</div>
</section>
</div>
<!-- ANNOTATION -->
<div role="tabpanel" class="tab-pane fade" id="annotation">
<section id="annotation-section" class="row">
<h1><small>Kronaplot</small></h1>
<div id="but-annot" class="btn-group" data-toggle="buttons" name="annot-data">
<label class="btn btn-primary active">
<input id="but-annot-mg" type="radio" value="Analysis/results/MG.gene_kegg_krona.html" class="btn btn-default" name="annot-data" checked>Metagenomics
</label>
<label class="btn btn-primary">
<input id="but-annot-mt" type="radio" value="Analysis/results/MT.gene_kegg_krona.html" class="btn btn-default" name="annot-data">Metatranscriptomics
</label>
</div>
<div class="row">
<iframe id="ifr-kronaplot" style="position: absolute; width: 80%;height: 80%; border: none"></iframe>
</div>
</section>
</div>
<!-- <div role="tabpanel" class="tab-pane fade" id="annotationmt">
<section id="annotation-section" class="row">
<h1>MT annotation <small>Kronaplot</small></h1>
<div class="row">
<iframe id="MT-kronaplot" src="Analysis/results/MT.gene_kegg_krona.html" style="position: absolute; width: 80%;height: 80%; border: none"></iframe>
</div>
</section>
</div> -->
<!-- RATIO -->
<div role="tabpanel" class="tab-pane fade" id="ratio">
<section id="ration-section" class="row">
<div class="row">
<div id="carousel-ration-wrapper"></div>
</div>
</section>
</div>
<!-- VARIANTS -->
<div role="tabpanel" class="tab-pane fade" id="variants">
<section id="variants-section" class="row">
<h2><small>Variants </small></h2>
<div class="row">
<div id="carousel-variant-wrapper"></div>
</div>
</section>
</div>
<!-- IMP STATS -->
<div role="tabpanel" class="tab-pane fade" id="overview">
<section class="row">
<section id="impstatistics-section">
<h2><small>Statistics </small></h2>
<div id="imp-stats" class="row">
<div id="basic-info"></div>
<div id="time-charts-mean"></div>
<div id="bar-chart"></div>
</div>
</section>
<!-- DIAGRAMS -->
<span id="diagrams"></span>
<section id="diagrams-section">
<h2><small>Workflow diagram </small></h2>
<div id="imp-diagram" class="row">
<p>The workflow is also available in <a href="workflow.pdf">PDF</a>.</p>
<img src="workflow.png"></img>
</div>
</section>
</section>
</div>
<!-- IMP CONFIG -->
<div role="tabpanel" class="tab-pane fade" id="configurations">
<section id="config-section" class="row">
<h2><small>Configuration </small></h2>
<div>
IMP has run with the configuration file saved at: <a href="config.json">config.json</a>.
<ul id="configuration" class="list-group">
</ul>
</div>
</section>
<!-- IMP LOG -->
<span id="log"></span>
<section id="log-section" class="row">
<h2><small>Log </small></h2>
<div>
<p>The log file register all commands that have been run by IMP.</p>
</div>
<div>
<p>The log is accessible here: <a href="imp.log">imp.log</a>.</p>
</div>
</section>
</div>
<!-- REFERENCES --> <div role="tabpanel" class="tab-pane fade" id="references">
<section id="references-section" class="row">
<h2><small>References </small></h2>
<div>
<p>We sould put some references here</p>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="imp.js"></script>
</body>
</html>