Commit 98ff660f authored by MARIJON Pierre's avatar MARIJON Pierre

Add floating navigation menu

parent 700105ed
......@@ -9,6 +9,7 @@
</head>
<body>
{% include 'navigation.jinja2.html' %}
<!-- INPUT REPORT -->
{% include 'input_report.jinja2.html' %}
......
......@@ -7,6 +7,7 @@
{% include 'javascript.jinja2.html' %}
</head>
<body>
{% include 'navigation.jinja2.html' %}
<!-- INPUT REPORT -->
{% include 'input_report.jinja2.html' %}
......
<!-- CANU VS. MINIMAP PAF -->
<h1>Canu contig on Minimap paf</h1>
<h1 id="header-canu-contig-on-minimap-paf">Canu contig on Minimap paf</h1>
<div class="explanation">
We assign a different color to each connected component of the Canu BOG (assimilate to Canu contig), and colored read of Minimap PAF with this.
......@@ -16,7 +16,7 @@ hide_unhide_button('hide_canu_contig_mini', 'canu_contig_mini', 'contig projecti
<img class="twenty_img" src="data:image/png;base64,{{canu_contig_mini_legend}}">
</div>
<h3>Path search between each contig </h3>
<h3 id="header-path-search-between-each-contig-mini">Path search between each contig</h3>
<div class="explanation">
For each free read contig extremity, we search path to other free read contig extermity.
......
......@@ -7,15 +7,16 @@
{% include 'javascript.jinja2.html' %}
</head>
<body>
{% include 'navigation.jinja2.html' %}
<!-- INPUT REPORT -->
{% include 'input_report.jinja2.html'%}
{% include 'input_report.jinja2.html' %}
{% include 'canu_report.jinja2.html' %}
<!-- CANU ANALYSIS -->
<h1>Canu contig on Canu paf</h1>
<h1 id="header-canu-contig-on-canu-paf">Canu contig on Canu paf</h1>
<div class="explanation">
We assign a different color to each connected component of the PAF according to the
......
<!-- CANU REPORT -->
<h1>Canu</h1>
<h1 id="header-canu">Canu</h1>
<h3>Statistics</h3>
<h3 id="header-canu-statistics">Statistics</h3>
<table>
{% for key, value in canu_stat.items() %}
<tr><td>{{key}}</td><td>{{value}}</td></tr>
{% endfor %}
</table>
<h3>BOG</h3>
<h3 id="header-canu-bog">BOG</h3>
<div class="explanation">
The BOG (Best Overlap Graph) is the main graph of Canu
......@@ -151,7 +151,7 @@ canvas.width = 1470; canvas.height = 1000;
</script>
</div>
<h3>PAF</h3>
<h3 id="header-canu-paf">PAF</h3>
<div class="explanation">
The PAF (Pairwise Alignment Format) file: all read overlaps seen by Canu.
......@@ -172,7 +172,7 @@ hide_unhide_button('hide_canu_paf', 'canu_paf', 'Canu PAF');
</div>
<h3>Contigs</h3>
<h3 id="header-canu-contigs">Contigs</h3>
<div>
<button id="hide_contig">Show Canu contigs</button>
......@@ -185,7 +185,7 @@ hide_unhide_button('hide_contig', 'canu_contig', 'Canu contigs');
<img src="data:image/png;base64,{{canu_contig}}"/>
</div>
<h3>Unitigs</h3>
<h3 id="header-canu-unitigs">Unitigs</h3>
<div>
<button id="hide_unitig">Show Canu unitigs</button>
......@@ -197,13 +197,13 @@ hide_unhide_button('hide_unitig', 'canu_unitig', 'Canu unitigs');
<img src="data:image/png;base64,{{canu_unitig}}"/>
</div>
<h3>Contig report</h3>
<h3 id="header-contig-report">Contig report</h3>
{{canu_contig_report_csv}}
<img src="data:image/png;base64,{{canu_contig_report_png}}"/>
<h3>Path search between each contig </h3>
<h3 id="header-path-search-between-each-contig">Path search between each contig </h3>
<div class="explanation">
For each free read contig extremity, we search path to other free read contig extermity.
......
......@@ -69,5 +69,31 @@
content: " \25B4\25BE"
}
.navigation {
top: 0px;
right: 0px;
width: 20%;
position: fixed;
list-style: none;
margin: 0;
padding: 0;
background: #fff;
border-color: black;
border-width: 2px;
border-style: solid;
}
.navigation ul {
}
.navigation li a {
text-align: center;
text-decoration: none;
}
.navigation li a:hover, .navigation li a:focus, .navigation li a:active {
background: #cccccc;
text-decoration: underline ;
}
</style>
<h1>Input</h1>
<h1 id="header-input">Input</h1>
<p>
{{list_input}}
......
......@@ -15,4 +15,49 @@ function hide_unhide_button(button_id, div_id, button_text)
}
}
}
function generate_navigation_menu()
{
var nav_list = document.getElementById("navigation_list");
var nav_list_keep = nav_list;
var h1_list = document.querySelectorAll("h1, h3");
var last_list_item;
var last_element = false;
for(var i = 0; i < h1_list.length; i++)
{
var actual_h1 = h1_list[i];
if(actual_h1.tagName == "H3" && last_element && last_element.tagName == "H1")
{
var sublist = document.createElement("ul");
last_list_item.appendChild(sublist)
nav_list = sublist;
}
if(actual_h1.tagName == "H1" && last_element && last_element.tagName == "H3")
{
nav_list = nav_list_keep;
}
var list_item = document.createElement("li");
var link_item = document.createElement("a");
link_item.href = "#" + actual_h1.getAttribute("id");
link_item.innerHTML = actual_h1.innerHTML;
list_item.appendChild(link_item);
nav_list.appendChild(list_item);
last_list_item = list_item;
last_element = actual_h1;
}
}
function onload_call_function()
{
generate_navigation_menu();
}
document.addEventListener('DOMContentLoaded', onload_call_function, false);
</script>
<h1>Miniasm</h1>
<h1 id="header-miniasm">Miniasm</h1>
<h3>Statistics</h3>
<h3 id="header-statistics">Statistics</h3>
<table class="dataframe">
{% for key, value in miniasm_stat.items() %}
<tr><th>{{key}}</th><td>{{value}}</td></tr>
{% endfor %}
</table>
<h3>Miniasm graph</h3>
<h3 id="header-miniasm-graph">Miniasm graph</h3>
<div>
<button id="hide_miniasm">Show Miniasm</button>
<script>
......
<nav id="navigation" class="navigation">
<ul id="navigation_list">
</ul>
</nav>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment