Skip to content

Commit 3831c97

Browse files
sharkLocsharkLoc
committed
update html template
1 parent abdd9c1 commit 3831c97

File tree

4 files changed

+378
-190
lines changed

4 files changed

+378
-190
lines changed

‎example/report.html‎

Lines changed: 127 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,132 +1,166 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>report</title>
7+
<title>nemo report</title>
78

89
<script src="https://cdn.plot.ly/plotly-2.12.1.min.js" charset="utf-8"></script>
910
<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>
1011

1112
<style>
12-
header {
13-
height: 80px;
14-
border: #a479bf solid 2px;
13+
body {
14+
margin: 0;
15+
font-family: Arial, sans-serif;
1516
}
16-
header #left {
17-
font-size: 40px;
18-
display: inline;
17+
18+
.header,
19+
.footer {
20+
background-color: #f2f2f2;
21+
padding: 0px;
22+
width: 100%;
23+
text-align: center;
24+
display: inline-block;
1925
}
20-
header #right {
26+
27+
.header #info {
2128
float: right;
22-
color: grey;
23-
}
24-
h2 {
25-
text-align: left;
26-
margin-left: 10px;
27-
background-color: grey;
29+
padding-right: 10px;
2830
}
29-
aside {
30-
height: 100%;
31-
width: 20%;
32-
border: #a479bf solid 1px;
33-
float: left;
34-
position: relative;
31+
32+
.sidebar {
33+
position: fixed;
3534
left: 0;
36-
top: 20px;
35+
width: 200px;
36+
height: 80%;
37+
background-color: #333;
38+
overflow: auto;
3739
}
38-
.iterms {
39-
list-style: none;
40-
text-align: left;
41-
padding: 0;
40+
41+
.main-content {
42+
margin-left: 200px;
43+
/* Same as sidebar width */
44+
padding: 0px 10px;
45+
}
46+
.main-content .section {
47+
text-align: center;
4248
}
43-
.item a {
49+
50+
.sidebar a {
4451
display: block;
45-
margin: 5px;
46-
color: black;
52+
color: white;
53+
padding: 10px;
54+
text-decoration: none;
4755
}
48-
.item a:hover, .item a:focus {
49-
background: #a479bf;
50-
color: #FFF;
56+
57+
.sidebar a:hover {
58+
background-color: #555;
5159
}
52-
main {
53-
height: 100%;
54-
margin-left: 0;
55-
display: block;
56-
overflow: auto;
57-
/* background-color: rgb(220, 213, 207); */
60+
61+
.footer {
62+
position: relative;
63+
bottom: 0;
5864
text-align: center;
65+
width: 100%;
5966
}
60-
.MM {
61-
display: inline-block;
62-
margin: 1%;
67+
68+
.image-container {
69+
/* text-align: center; */
70+
margin: auto;
71+
margin-top: 20px;
6372
}
64-
footer {
65-
/* background-color: aqua; */
66-
height: 40px;
67-
border: #a479bf solid 2px;
68-
line-height: 40px;
73+
74+
h2 {
75+
text-align: left;
76+
margin-left: 10px;
77+
padding: 5px;
78+
background-color: gray;
79+
}
80+
81+
.section {
82+
margin-top: 60px;
83+
/* Adjust this value to prevent jumping effect */
6984
}
70-
7185
</style>
7286
</head>
87+
7388
<body>
74-
<header>
75-
<div id="left">Nemo Report Page</div>
76-
<div id="right">
89+
90+
<div class="header">
91+
<a href="https://github.com/sharkLoc/nemo" style="text-decoration: none;">
92+
<h1>Nemo Report Page</h1>
93+
</a>
94+
<div id="info">
7795
version: 0.1.0<br>
78-
report date: 2024-09-25 14:33:37<br>
96+
report date: 2024-09-27 11:27:39
7997
</div>
80-
</header>
81-
<div class="container"></div>
82-
<div class="side">
83-
<aside>
84-
<ul class="iterms">
85-
<li class="item"><a href="#Basic_Statistics">Basic Statistics</a></li>
86-
<li class="item"><a href="#Read_Length">Read Length Count</a></li>
87-
<li class="item"><a href="#Read_GC_Content">Read GC Content</a></li>
88-
<li class="item"><a href="#">todo</a></li>
89-
<li class="item"><a href="#">todo</a></li>
90-
<li class="item"><a href="#">todo</a></li>
91-
<li class="item"><a href="#">todo</a></li>
92-
<li class="item"><a href="#">todo</a></li>
93-
<li class="item"><a href="#">todo</a></li>
94-
<li class="item"><a href="#">todo</a></li>
95-
<li class="item"><a href="#">todo</a></li>
96-
97-
</ul>
98-
</aside>
98+
</div>
99+
100+
<div class="sidebar">
101+
<a href="#Basic_Statistics">Basic Statistics</a>
102+
<a href="#Read_Length">Read Length Count</a>
103+
<a href="#Read_GC_Content">Read GC Content</a>
104+
<a href="#Cumulative_Base">Cumulative Fraction Of Bases</a>
105+
<a href="#section5">todo 1</a>
106+
<a href="#section6">todo 2</a>
107+
<a href="#section7">todo 3</a>
108+
<a href="#section8">todo 4</a>
109+
<!-- Add more links as needed -->
110+
</div>
111+
112+
<div class="main-content">
113+
<h2>Basic Statistics</h2>
114+
<!-- <p>This is the content for section 1.</p> -->
115+
<div id="Basic_Statistics" class="section">
116+
<div class="image-container">
117+
<div id="Basic_Statistics" class="plotly-graph-div" style="height:100%; width:100%;"></div>
118+
<script type="text/javascript">
119+
Plotly.newPlot("Basic_Statistics", {"data":[{"type":"table","header":{"values":["Measure","Value"],"align":"left","fill":{"color":"skyblue"},"font":{"size":16}},"cells":{"values":[["File name","Total reads count","Total bases count","Min read length","Max read length","Average read length","GC Content(%)","Base A count","Base T count","Base G count","Base C count","Base N count","\u003c1kb read info","\u003c2kb read info","\u003c5kb read info","\u003c10kb read info","\u003c20kb read info","\u003c50kb read info"],["longRreads.fq.gz","90","998386","272","43042","11093.18","51.09","245094","243222","257027","253043","0","5:(5.56%)","12:(13.33%)","28:(31.11%)","43:(47.78%)","78:(86.67%)","90:(100.00%)"]],"align":"left","fill":{"color":"whitesmoke"}}}],"layout":{"title":{"text":"\u003cb\u003eSequencing summary\u003c/b\u003e"},"autosize":false,"width":600,"height":650},"config":{}});
120+
</script>
121+
</div>
99122
</div>
100-
101-
<div class="main">
102-
<main>
103-
<h2>Basic Statistics</h2>
104-
<div class="MM">
105-
<div id="Basic_Statistics" class="plotly-graph-div" style="height:100%; width:100%;"></div>
106-
<script type="text/javascript">
107-
Plotly.newPlot("Basic_Statistics", {"data":[{"type":"table","header":{"values":["Measure","Value"],"align":"left","fill":{"color":"skyblue"},"font":{"size":16}},"cells":{"values":[["File name","Total reads count","Total bases count","Min read length","Max read length","Average read length","GC Content(%)","Base A count","Base T count","Base G count","Base C count","Base N count","\u003c1kb read info","\u003c2kb read info","\u003c5kb read info","\u003c10kb read info","\u003c20kb read info","\u003c50kb read info"],["longRreads.fq.gz","90","998386","272","43042","11093.18","51.09","245094","243222","257027","253043","0","5:(5.56%)","12:(13.33%)","28:(31.11%)","43:(47.78%)","78:(86.67%)","90:(100.00%)"]],"align":"left","fill":{"color":"whitesmoke"}}}],"layout":{"title":{"text":"\u003cb\u003eSequencing summary\u003c/b\u003e"},"autosize":false,"width":600,"height":650},"config":{}});
123+
124+
<h2>Read Length Count</h2>
125+
<!-- <p>This is the content for section 2.</p> -->
126+
<div id="Read_Length" class="section">
127+
<div class="image-container">
128+
<div id="Read_Length" class="plotly-graph-div" style="height:100%; width:100%;"></div>
129+
<script type="text/javascript">
130+
Plotly.newPlot("Read_Length", {"data":[{"type":"histogram","x":[272,397,442,533,580,1001,1341,1644,1657,1717,1857,1928,2516,2994,3190,3705,3765,3892,4057,4066,4365,4388,4413,4659,4695,4715,4893,4904,5081,5286,5504,6548,7280,7927,8184,8628,9082,9390,9439,9518,9599,9664,9680,10154,10210,10257,10613,10790,10836,10837,11019,11513,11795,12181,12523,12974,13118,13297,13900,14174,14318,14383,14742,15035,15103,15177,15199,15294,15351,15856,16116,16946,17005,17475,17587,17604,18029,18408,20404,20450,21373,21397,21689,23910,24293,24575,25346,30504,32188,43042],"y":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}],"layout":{"title":{"text":"\u003cb\u003eRead length distribution\u003c/b\u003e"},"autosize":false,"width":800,"height":600,"xaxis":{"title":{"text":"Read length"}},"yaxis":{"title":{"text":"Read count"}}},"config":{}});
108131
</script>
109-
</div>
110-
<h2>Read Length Count</h2>
111-
<div class="MM">
112-
<div id="Read_Length" class="plotly-graph-div" style="height:100%; width:100%;"></div>
113-
<script type="text/javascript">
114-
Plotly.newPlot("Read_Length", {"data":[{"type":"histogram","x":[272,397,442,533,580,1001,1341,1644,1657,1717,1857,1928,2516,2994,3190,3705,3765,3892,4057,4066,4365,4388,4413,4659,4695,4715,4893,4904,5081,5286,5504,6548,7280,7927,8184,8628,9082,9390,9439,9518,9599,9664,9680,10154,10210,10257,10613,10790,10836,10837,11019,11513,11795,12181,12523,12974,13118,13297,13900,14174,14318,14383,14742,15035,15103,15177,15199,15294,15351,15856,16116,16946,17005,17475,17587,17604,18029,18408,20404,20450,21373,21397,21689,23910,24293,24575,25346,30504,32188,43042],"y":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]}],"layout":{"title":{"text":"\u003cb\u003eRead length distribution\u003c/b\u003e"},"autosize":false,"width":800,"height":600,"xaxis":{"title":{"text":"Read length"}},"yaxis":{"title":{"text":"Read count"}}},"config":{}});
132+
</div>
133+
</div>
134+
135+
<h2>Read GC Content</h2>
136+
<!-- <p>This is the content for section 3.</p> -->
137+
<div id="Read_GC_Content" class="section">
138+
<div class="image-container">
139+
<div id="Read_GC_Content" class="plotly-graph-div" style="height:100%; width:100%;"></div>
140+
<script type="text/javascript">
141+
Plotly.newPlot("Read_GC_Content", {"data":[{"type":"scatter","mode":"lines","x":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100],"y":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.11,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,3.33,0.0,1.11,3.33,5.56,6.67,13.33,21.11,15.56,14.44,6.67,3.33,2.22,0.0,1.11,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.11,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]}],"layout":{"title":{"text":"\u003cb\u003eRead GC content\u003c/b\u003e"},"autosize":false,"width":800,"height":600,"xaxis":{"title":{"text":"Per-Read gc content(%)"}},"yaxis":{"title":{"text":"Proportion(%)"}}},"config":{}});
115142
</script>
116-
</div>
117-
<h2>Read GC Content</h2>
118-
<div class="MM">
119-
<div id="Read_GC_Content" class="plotly-graph-div" style="height:100%; width:100%;"></div>
120-
<script type="text/javascript">
121-
Plotly.newPlot("Read_GC_Content", {"data":[{"type":"scatter","mode":"lines","x":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100],"y":[0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,1.11,0.0,0.0,0.0,3.33,3.33,4.44,10.0,14.44,32.22,17.78,7.78,3.33,1.11,0.0,0.0,0.0,1.11,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0]}],"layout":{"title":{"text":"\u003cb\u003eRead GC content\u003c/b\u003e"},"autosize":false,"width":800,"height":600,"xaxis":{"title":{"text":"Per-Read gc content"}},"yaxis":{"title":{"text":"Proportion"}}},"config":{}});
143+
</div>
144+
</div>
145+
146+
<h2>Cumulative fraction of bases</h2>
147+
<!-- <p>This is the content for section 3.</p> -->
148+
<div id="Cumulative_Base" class="section"></div>
149+
<div class="image-container">
150+
<div id="Cumulative_Base" class="plotly-graph-div" style="height:100%; width:100%;"></div>
151+
<script type="text/javascript">
152+
Plotly.newPlot("Cumulative_Base", {"data":[{"type":"scatter","mode":"lines","x":[0,272,397,442,533,580,1001,1341,1644,1657,1717,1857,1928,2516,2994,3190,3705,3765,3892,4057,4066,4365,4388,4413,4659,4695,4715,4893,4904,5081,5286,5504,6548,7280,7927,8184,8628,9082,9390,9439,9518,9599,9664,9680,10154,10210,10257,10613,10790,10836,10837,11019,11513,11795,12181,12523,12974,13118,13297,13900,14174,14318,14383,14742,15035,15103,15177,15199,15294,15351,15856,16116,16946,17005,17475,17587,17604,18029,18408,20404,20450,21373,21397,21689,23910,24293,24575,25346,30504,32188,43042],"y":[0.0,0.027243971770437483,0.06700815115596573,0.11127960528292664,0.16466577055367365,0.22275953388769476,0.32302135646934155,0.45733814376403514,0.6220039143177087,0.7879717864633519,0.9599493582642384,1.1459495625940266,1.3390612448491868,1.5910679837257333,1.8909519965223873,2.2104676948595032,2.581566648570793,2.9586753019373266,3.3485044862407927,3.754860344596178,4.16211765789985,4.599323307818819,5.0388326759389654,5.4808460855821295,5.9474992638117925,6.417758261834601,6.890020493075824,7.380111499960937,7.871304285116178,8.380225684254386,8.909680223881345,9.46097000558902,10.116828561297934,10.84600545280082,11.639986938919417,12.459709971894638,13.323904782318664,14.233572986800697,15.174090982846314,16.11951690027705,17.07285558892052,18.034307372098567,19.00226966323646,19.97183454094909,20.98887604593814,22.01152660393876,23.038884760002645,24.10190046735431,25.182644788688947,26.26799654642593,27.35344846582384,28.457129807509318,29.61029100968964,30.7916978002496,32.011766991924965,33.26609147163522,34.56558886042072,35.879509528378804,37.2113591336417,38.60360622043979,40.02329760233016,41.45741226339312,42.89803743241592,44.37462063770926,45.88055120965238,47.393292774538104,48.91344630233196,50.43580338666608,51.96767582878766,53.50525748558172,55.09342078114076,56.70762610853918,58.404965614501805,60.10821465845875,61.85853968304844,63.62008281366125,65.3833286925097,67.18914327724949,69.03291913147821,71.0766176609047,73.12492362673355,75.26567880559223,77.408837864313,79.58124412802263,81.97610944063719,84.40933666938439,86.87080948651122,89.40950694420795,92.46483824893377,95.68884179065012,100.0]}],"layout":{"title":{"text":"\u003cb\u003eCumulative fraction of bases\u003c/b\u003e"},"autosize":false,"width":800,"height":600,"xaxis":{"title":{"text":"Minimum read length(bp)"}},"yaxis":{"title":{"text":"Proportion(%)"}}},"config":{}});
122153
</script>
123-
</div>
124-
</main>
154+
</div>
125155
</div>
126156

157+
<!-- Add more sections as needed -->
158+
</div>
159+
160+
<div class="footer">
161+
<p>CMD: ./nemo --html report.html --json report.json example/longRreads.fq.gz -vvvv</p>
127162
</div>
128-
129163

130-
<footer>CMD: ./nemo --html report.html example/longRreads.fq.gz </footer>
131164
</body>
165+
132166
</html>

‎example/report.jpeg‎

52.8 KB
Loading

0 commit comments

Comments
 (0)