try

lib/imp.html

@@ -55,8 +55,7 @@
             <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="annottabmg" href="#annotationmg" aria-controls="annotationmg" role="tab" data-toggle="tab">MG Annotation</a></li>
-            <li><a id="annottabmt" href="#annotationmt" aria-controls="annotationmt" role="tab" data-toggle="tab">MT Annotation</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>
@@ -165,23 +164,31 @@
         </div>
 
         <!-- ANNOTATION -->
-        <div role="tabpanel" class="tab-pane fade" id="annotationmg">
+        <div role="tabpanel" class="tab-pane fade" id="annotation">
           <section id="annotation-section" class="row">
-              <h1>MG annotation <small>Kronaplot</small></h1>
+              <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="MG-kronaplot" src="Analysis/results/MG.gene_kegg_krona.html" style="position: absolute; width: 80%;height: 80%; border: none"></iframe>
+                  <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">
+        <!-- <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>
+        </div> -->
 
 
         <!-- RATIO -->

lib/imp.js

@@ -263,6 +263,12 @@ $('#but-preprocess').on('change', function(){
     $("#ifr-preprocess-stat").attr('src', val);
 });
 
+$('#but-annot').on('change', function(){
+    var val = $('input[name="raw-data"]:checked').val();
+    $("#ifr-kronaplot").attr('src', val);
+});
+
+
 renderSimpleCarousel('carousel-assembly', 'Analysis/results', [
     'IMP-vizbin_length.png',
     'IMP-vizbin_length_GC.png'
@@ -309,6 +315,7 @@ $('.right.carousel-control').click(function(){
 // show first tab
 $('#tabs li:first > a').tab('show');
 
+
 //load html tables
 // $(".table-result").each(function(idx, node) {
 //   var ident = node.id;