From 3aaca4875ffe6eddbcdc6e81b37eb07522c7311d Mon Sep 17 00:00:00 2001
From: Samuel Nichols <Snic9004@gmail.com>
Date: Wed, 24 Aug 2022 18:13:20 -0600
Subject: [PATCH] Bootstrap 5 and partials changes

---
 templates/batchReport.html                 |  12 +-
 templates/layout.html                      |  25 +-
 templates/multiReport.html                 |  12 +-
 templates/pooledReport.html                |   4 +-
 templates/report.html                      | 934 ++++++++++-----------
 templates/shared/partials/fig_reports.html |  32 +-
 templates/wgsReport.html                   |   4 +-
 7 files changed, 508 insertions(+), 515 deletions(-)

diff --git a/templates/batchReport.html b/templates/batchReport.html
index d02c6269..581f8a92 100644
--- a/templates/batchReport.html
+++ b/templates/batchReport.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "CRISPRessoReports/templates/layout.html" %}
 {% block head %}
 <style>
 .nav-tabs.amp-header {
@@ -74,7 +74,7 @@ <h5>Nucleotide percentages around guides</h5>
               <div class='card-body'>
                 {% for plot_name in window_nuc_pct_quilts %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -88,7 +88,7 @@ <h5>Nucleotide percentages in the entire amplicon</h5>
               <div class='card-body'>
                 {% for plot_name in nuc_pct_quilts %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -102,7 +102,7 @@ <h5>Conversion of target bases around guides</h5>
               <div class='card-body'>
                 {% for plot_name in window_nuc_conv_plots %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -116,7 +116,7 @@ <h5>Conversion of target bases in the entire amplicon</h5>
               <div class='card-body'>
                 {% for plot_name in nuc_conv_plots %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -129,7 +129,7 @@ <h5>{{report_data['titles'][plot_name]}}</h5>
                 <h5>{{report_data['titles'][plot_name]}}</h5>
               </div>
               <div class='card-body'>
-		        {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		        {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
               </div>
             </div>
             {% endfor %}
diff --git a/templates/layout.html b/templates/layout.html
index 0efa21f7..30ced56a 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -7,8 +7,7 @@
 		<meta name="description" content="CRISPResso2: Analysis of genome editing outcomes from deep sequencing data">
 		<meta name="author" content="Kendell Clement and Luca Pinello">
 		<link href='https://fonts.googleapis.com/css?family=Montserrat|Ranga:700' rel='stylesheet' type='text/css'>
-		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w==" crossorigin="anonymous" referrerpolicy="no-referrer" />		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
 		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
 		<link rel="stylesheet" href="/static/css/main.css">
 
@@ -98,18 +97,14 @@
 		  {% if messages %}
 		    {% for category, message in messages %}
 					{% if category == "error" %}
-					<div class="alert alert-danger alert-dismissible fade show m-2" role="alert">
-					  {{ message }}
-					  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-					    <span aria-hidden="true">&times;</span>
-					  </button>
+					<div class="alert alert-danger alert-dismissible fade show" role="alert">
+						{{ message }}
+						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 					</div>
 					{% else %}
-					<div class="alert alert-warning alert-dismissible fade show m-2" role="alert">
-					  {{ message }}
-					  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
-					    <span aria-hidden="true">&times;</span>
-					  </button>
+					<div class="alert alert-warning alert-dismissible fade show" role="alert">
+						{{ message }}
+						<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 					</div>
 					{% endif %}
 		    {% endfor %}
@@ -124,7 +119,7 @@
 			<div class="row pb-2">
 				<div class="col-sm-1"></div>
 				{% if current_user is defined %}
-					<div class="col-sm-3 crispresso_cup"> <a href='/'><img class='img-fluid' src="/static/imgs/CRISPResso_justcup.png" width="80%"></a>
+					<div class="col-sm-3 crispresso_cup"> <a href='/'><img class='img-fluid' src="../../../static/imgs/CRISPResso_justcup.png" width="80%"></a>
 				{% else %}
 					<div class="col-sm-3 crispresso_cup"> <a href='https://crispresso2.pinellolab.org'><img class='img-fluid' src="https://crispresso.pinellolab.partners.org/static/imgs/CRISPResso_justcup.png" width="80%"></a>
 				{% endif %}
@@ -143,7 +138,7 @@ <h3 style="margin-top: -0.5em;padding-right: 2em;">Analysis of genome editing ou
 	<nav class="navbar fixed-top navbar-expand-md bg-light navbar-light">
   <!-- Brand -->
   <a class="navbar-brand" href="/">
-{#		<img src="/static/imgs/CRISPResso_justcup.png" width="30" height="30" class="d-inline-block align-top" alt=""> #}
+{#	<img src="../../../static/imgs/CRISPResso_justcup.png" width="30" height="30" class="d-inline-block align-top" alt="" style="margin-left: 1em;"> #}
 {#		<span style="font-family:'Ranga'">CRISPResso2</span></a> #}
 {{config['BANNER_TEXT']}}</a>
 
@@ -153,7 +148,7 @@ <h3 style="margin-top: -0.5em;padding-right: 2em;">Analysis of genome editing ou
   </button>
 	<!-- Navbar links -->
 	  <div class="collapse navbar-collapse" id="collapsibleNavbar">
-	    <ul class="navbar-nav ml-auto">
+	    <ul class="navbar-nav ms-auto">
 			{% if not current_user.is_anonymous %}
 				<li class="nav-item">
 					 <a class="nav-link" href="{{url_for('home')}}">
diff --git a/templates/multiReport.html b/templates/multiReport.html
index 8e8d83ca..cf86319e 100644
--- a/templates/multiReport.html
+++ b/templates/multiReport.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "CRISPRessoReports/templates/layout.html" %}
 {% block head %}
 <style>
 .nav-tabs.amp-header {
@@ -73,7 +73,7 @@ <h5>Nucleotide percentages around guides</h5>
               <div class='card-body'>
                 {% for plot_name in window_nuc_pct_quilts %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -87,7 +87,7 @@ <h5>Nucleotide percentages in the entire amplicon</h5>
               <div class='card-body'>
                 {% for plot_name in nuc_pct_quilts %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -101,7 +101,7 @@ <h5>Conversion of target bases around guides</h5>
               <div class='card-body'>
                 {% for plot_name in window_nuc_conv_plots %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -115,7 +115,7 @@ <h5>Conversion of target bases in the entire amplicon</h5>
               <div class='card-body'>
                 {% for plot_name in nuc_conv_plots %}
                     <h5>{{report_data['titles'][plot_name]}}</h5>
-		            {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		            {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
                 {% endfor %}
               </div>
             </div>
@@ -128,7 +128,7 @@ <h5>{{report_data['titles'][plot_name]}}</h5>
                 <h5>{{report_data['titles'][plot_name]}}</h5>
               </div>
               <div class='card-body' style='max-height:80vh;overflow-y:auto'>
-		        {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		        {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
               </div>
             </div>
             {% endfor %}
diff --git a/templates/pooledReport.html b/templates/pooledReport.html
index 5128785a..ceb40426 100644
--- a/templates/pooledReport.html
+++ b/templates/pooledReport.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "CRISPRessoReports/templates/layout.html" %}
 {% block head %}
 <style>
 .nav-tabs.amp-header {
@@ -73,7 +73,7 @@ <h5>{{report_name}}</h5>
                 <h5>{{report_data['titles'][plot_name]}}</h5>
               </div>
               <div class='card-body' style='max-height:80vh;overflow-y:auto'>
-                  {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+                  {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
               </div>
             </div>
             {% endfor %}
diff --git a/templates/report.html b/templates/report.html
index 84c849e9..0d30314d 100644
--- a/templates/report.html
+++ b/templates/report.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "CRISPRessoReports/templates/layout.html" %}
 {% block head %}
 <style>
 .nav-tabs.amp-header {
@@ -52,557 +52,547 @@
 
 {% block content %}
 <div class="col-sm-1"></div>
-<div class="col-sm-10">
-
-  <div class="jumbotron" style="background:rgba(0,0,0,0.0); padding:0px" >
-	<div id='jumbotron_content' >
-
-	  <div class='card text-center mb-2'>
-		<div class='card-header'>
-          {% if report_data['report_display_name'] != '' %}
-      	  <h5>{{report_data['report_display_name']}}</h5>
-          {% endif %}
-  		  <h5>CRISPResso2 run information</h5>
-		  <ul class="nav nav-tabs justify-content-center card-header-tabs" id="log-tab" role="tablist">
-			<li class="nav-item">
-			  <button class="nav-link active" id="log_aln-tab" data-bs-toggle="tab" data-bs-target="#log_aln" role="tab" aria-controls="log_aln" aria-selected="true">Alignment statistics</button>
-			</li>
-			<li class="nav-item">
-			  <button class="nav-link" id="log_params-tab" data-bs-toggle="tab" data-bs-target="#log_params" role="tab" aria-controls="log_params" aria-selected="false">Run Parameters</button>
-			</li>
-		  </ul>
-		</div>
-		<div class='card-body'>
-          <div class='tab-content'>
-  			<div class="tab-pane fade show active" id="log_aln" role="tabpanel">
-				{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1a')}}
-  			</div>
-            {{ render_partial('shared/partials/log_params.html', report_data=report_data) }}
-          </div>
-		</div>
-	  </div>
-
-				<div class='card text-center mb-2'>
-					<div class='card-header'>
-						<h5>Allele assignments</h5>
-						<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
-						  <li class="nav-item">
-						    <button class="nav-link active" id="aln_pie-tab" data-bs-toggle="tab" data-bs-target="#aln_pie" role="tab" aria-controls="aln_pie" aria-selected="true">Piechart</button>
-						  </li>
-						  <li class="nav-item">
-						    <button class="nav-link" id="aln_bar-tab" data-bs-toggle="tab" data-bs-target="#aln_bar" role="tab" aria-controls="aln_bar" aria-selected="false">Barplot</button>
-						  </li>
-    					{% if report_data['figures']['locs']['plot_1d'] %}
-						  <li class="nav-item">
-						    <button class="nav-link" id="aln_dsODN-tab" data-bs-toggle="tab" data-bs-target="#aln_dsODN" role="tab" aria-controls="aln_dsODN" aria-selected="false">dsODN</button>
-						  </li>
-              {% endif %}
-						</ul>
+<center><div class="col-sm-10">
+	<div class="jumbotron h-100 p-5 rounded-3" style="background:rgba(0,0,0,0.0); padding:0px" >
+		<div id='jumbotron_content' >
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+					{% if report_data['report_display_name'] != '' %}
+					<h5>{{report_data['report_display_name']}}</h5>
+					{% endif %}
+					<h5>CRISPResso2 run information</h5>
+					<ul class="nav nav-tabs justify-content-center card-header-tabs" id="log-tab" role="tablist">
+						<li class="nav-item">
+						<button class="nav-link active" id="log_aln-tab" data-bs-toggle="tab" data-bs-target="#log_aln" role="tab" aria-controls="log_aln" aria-selected="true">Alignment statistics</button>
+						</li>
+						<li class="nav-item">
+						<button class="nav-link" id="log_params-tab" data-bs-toggle="tab" data-bs-target="#log_params" role="tab" aria-controls="log_params" aria-selected="false">Run Parameters</button>
+						</li>
+					</ul>
+				</div>
+				<div class='card-body'>
+					<div class='tab-content'>
+						<div class="tab-pane fade show active" id="log_aln" role="tabpanel">
+							{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1a')}}
+						</div>
+						{{ render_partial('CRISPRessoReports/templates/shared/partials/log_params.html', report_data=report_data) }}
 					</div>
-					<div class='card-body'>
-						<div class="tab-content" id="tabContent">
-						  	<div class="tab-pane fade show active" id="aln_pie" role="tabpanel" aria-labelledby="aln_pie-tab">
-							  {{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1b')}}
-							</div>
-						  	<div class="tab-pane fade" id="aln_bar" role="tabpanel" aria-labelledby="aln_bar-tab">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1c')}}
-							</div>
-    					{% if report_data['figures']['locs']['plot_1d'] %}
-						  <div class="tab-pane fade" id="aln_dsODN" role="tabpanel" aria-labelledby="aln_dsODN-tab">
-							  {{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1d')}}
-						  </div>
+				</div>
+			</div>
+
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+					<h5>Allele assignments</h5>
+					<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
+						<li class="nav-item">
+							<button class="nav-link active" id="aln_pie-tab" data-bs-toggle="tab" data-bs-target="#aln_pie" role="tab" aria-controls="aln_pie" aria-selected="true">Piechart</button>
+						</li>
+						<li class="nav-item">
+							<button class="nav-link" id="aln_bar-tab" data-bs-toggle="tab" data-bs-target="#aln_bar" role="tab" aria-controls="aln_bar" aria-selected="false">Barplot</button>
+						</li>
+    						{% if report_data['figures']['locs']['plot_1d'] %}
+						<li class="nav-item">
+							<button class="nav-link" id="aln_dsODN-tab" data-bs-toggle="tab" data-bs-target="#aln_dsODN" role="tab" aria-controls="aln_dsODN" aria-selected="false">dsODN</button>
+						</li>
               			{% endif %}
+					</ul>
+				</div>
+				<div class='card-body'>
+					<div class="tab-content" id="tabContent">
+						<div class="tab-pane fade show active" id="aln_pie" role="tabpanel" aria-labelledby="aln_pie-tab">
+							{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1b')}}
 						</div>
-
+						<div class="tab-pane fade" id="aln_bar" role="tabpanel" aria-labelledby="aln_bar-tab">
+							{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1c')}}
+						</div>
+    						{% if report_data['figures']['locs']['plot_1d'] %}
+						<div class="tab-pane fade" id="aln_dsODN" role="tabpanel" aria-labelledby="aln_dsODN-tab">
+							{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_1d')}}
+						</div>
+              			{% endif %}
 					</div>
-				</div> {# end card #}
+				</div>
+			</div> {# end card #}
 
-        {# start global coding sequence report #}
+        		{# start global coding sequence report #}
 			{% if report_data['figures']['locs']['plot_5a'] %}
-				<div class='card text-center mb-2'>
-					<div class='card-header'>
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
 					<h5>Global frameshift analysis</h5>
 				</div>
 				<div class='card-body'>
-					{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_5a')}}
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_5a')}}
 				</div>
 			</div>
 			{% endif %}
 
 			{% if report_data['figures']['locs']['plot_6a'] %}
-				<div class='card text-center mb-2'>
-					<div class='card-header'>
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
 					<h5>Global frameshift mutagenesis profiles</h5>
 				</div>
 				<div class='card-body'>
-					{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_6a')}}
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_6a')}}
 				</div>
 			</div>
 			{% endif %}
 
 			{% if report_data['figures']['locs']['plot_8a'] %}
-				<div class='card text-center mb-2'>
-					<div class='card-header'>
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
 					<h5>Global splicing analysis</h5>
 				</div>
 				<div class='card-body'>
-					{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_8a')}}
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_8a')}}
+				</div>
+			</div>
+			{% endif %}
+			{# end of global coding sequence analysis #}
+			
+			{# start hdr summary #}
+			{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_4g'] %}
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+					{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+					<h5>HDR summary plot</h5>
+					{% else %}
+					<h5>HDR summary report (all reads aligned to {{report_data.amplicons[0]}})</h5>
+					{% endif %}
+				</div>
+				<div class='card-body'>
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4g', amplicon_name=report_data.amplicons[0])}}
+				</div>
+			</div>
+			{% endif %}
+            		{# end HDR summary #}
+
+			{# start prime editing report #}
+			{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_11a'] %}
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+					{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+					<h5>Prime editing report</h5>
+					{% else %}
+  					<h5>Prime editing report (all reads aligned to {{report_data.amplicons[0]}})</h5>
+					{% endif %}
+				</div>
+  				<div class='card-body'>
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_11a', amplicon_name=report_data.amplicons[0])}}
 				</div>
 			</div>
 			{% endif %}
-		{# end of global coding sequence analysis #}
-
-            {# start hdr summary #}
-				{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_4g'] %}
-					<div class='card text-center mb-2'>
-						<div class='card-header'>
-						{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-							<h5>HDR summary plot</h5>
-						{% else %}
-							<h5>HDR summary report (all reads aligned to {{report_data.amplicons[0]}})</h5>
-						{% endif %}
-						</div>
-						<div class='card-body'>
-							{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4g', amplicon_name=report_data.amplicons[0])}}
-						</div>
-					</div>
-				{% endif %}
-            {# end HDR summary #}
-
-            {# start prime editing report #}
-				{% if report_data['figures']['locs'][report_data.amplicons[0]]['plot_11a'] %}
-					<div class='card text-center mb-2'>
-						<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-							<h5>Prime editing report</h5>
-							{% else %}
-  							<h5>Prime editing report (all reads aligned to {{report_data.amplicons[0]}})</h5>
-							{% endif %}
-						</div>
-  						<div class='card-body'>
-							{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_11a', amplicon_name=report_data.amplicons[0])}}
-						</div>
-					</div>
-				{% endif %}
 
-				{% if report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]] and  report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]]['11b']%}
-					<div class='card text-center mb-2'>
-						<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-							<h5>Prime editing summary plots at analysis positions</h5>
-							{% else %}
-  							<h5>Prime editing summary plots at analysis positions (aligned to {{report_data.amplicons[0]}})</h5>
-							{% endif %}
-						</div>
-						<div class='card-body'>
-							{% for fig_name in report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]]['11b'] %}
-								<div class='mb-4'>
-									{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=report_data.amplicons[0])}}
-								</div>
-							{% endfor %}
-						</div>
+			{% if report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]] and  report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]]['11b']%}
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+					{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+					<h5>Prime editing summary plots at analysis positions</h5>
+					{% else %}
+  					<h5>Prime editing summary plots at analysis positions (aligned to {{report_data.amplicons[0]}})</h5>
+					{% endif %}
+				</div>
+				<div class='card-body'>
+					{% for fig_name in report_data['figures']['sgRNA_based_names'][report_data.amplicons[0]]['11b'] %}
+					<div class='mb-4'>
+						{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=report_data.amplicons[0])}}
 					</div>
-					{% endif %} {# end plot 11b for prime editing #}
-
-					{% if report_data['figures']['locs']['plot_11c'] %}
-						<div class='card text-center mb-2'>
-							<div class='card-header'>
-  								<h5>Scaffold insertions</h5>
-							</div>
-  							<div class='card-body'>
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_11c')}}
-							</div>
-						</div>
-						{% endif %}
-
-            {# end prime editing section #}
+					{% endfor %}
+				</div>
+			</div>
+			{% endif %} 
+			{# end plot 11b for prime editing #}
 
+			{% if report_data['figures']['locs']['plot_11c'] %}
+			<div class='card text-center mb-2'>
+				<div class='card-header'>
+  					<h5>Scaffold insertions</h5>
+				</div>
+  				<div class='card-body'>
+					{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_11c')}}
+				</div>
+			</div>
+			{% endif %}
+			{# end prime editing section #}
 
-					{% if report_data.amplicons|length == 1 %}
-          <div> {# if only one amplicon, just a normal div #}
-          {% else %}
+			{% if report_data.amplicons|length == 1 %}
+          	<div> {# if only one amplicon, just a normal div #}
+          	{% else %}
 	        {# If there is more than one amplicon, print a navigation to show each amplicon #}
-					<p>Reads are aligned to each amplicon sequence separately. Quantification and visualization of these reads are shown for each amplicon below:</p>
-				<div id='amplicons-card' class='card text-center mb-2'>
-					<div class='card-header amp-header'>
-						<h5>Amplicons</h5>
-						<ul class="nav nav-tabs amp-header card-header-tabs" id="nav-tab" role="tablist">
-							{% for amplicon_name in report_data.amplicons %}
-								{% if loop.index0 == 0 %}
-								  <li class="nav-item">
-								    <button class="nav-link active" id="pills_{{amplicon_name}}_tab" data-bs-toggle="tab" data-bs-target="#div_{{amplicon_name}}" role="tab" aria-controls="div_{{amplicon_name}}" aria-selected="true">{{amplicon_name}}</button>
-								  </li>
-								{% else %}
-								<li class="nav-item">
-									<button class="nav-link" id="pills_{{amplicon_name}}_tab" data-bs-toggle="tab" data-bs-target="#div_{{amplicon_name}}" role="tab" aria-controls="div_{{amplicon_name}}" aria-selected="false">{{amplicon_name}}</button>
-								</li>
-								{% endif%}
-							{% endfor %}
-						</ul>
+			<p>Reads are aligned to each amplicon sequence separately. Quantification and visualization of these reads are shown for each amplicon below:</p>
+			<div id='amplicons-card' class='card text-center mb-2'>
+				<div class='card-header amp-header'>
+					<h5>Amplicons</h5>
+					<ul class="nav nav-tabs amp-header card-header-tabs" id="nav-tab" role="tablist">
+					{% for amplicon_name in report_data.amplicons %}
+						{% if loop.index0 == 0 %}
+						<li class="nav-item">
+							<button class="nav-link active" id="pills_{{amplicon_name}}_tab" data-bs-toggle="tab" data-bs-target="#div_{{amplicon_name}}" role="tab" aria-controls="div_{{amplicon_name}}" aria-selected="true">{{amplicon_name}}</button>
+						</li>
+						{% else %}
+						<li class="nav-item">
+							<button class="nav-link" id="pills_{{amplicon_name}}_tab" data-bs-toggle="tab" data-bs-target="#div_{{amplicon_name}}" role="tab" aria-controls="div_{{amplicon_name}}" aria-selected="false">{{amplicon_name}}</button>
+						</li>
+						{% endif%}
+					{% endfor %}
+					</ul>
 				</div>
-					{% endif %} {# end if report contains more than one amplicon #}
+				{% endif %} {# end if report contains more than one amplicon #}
+
 
+				{% if report_data.amplicons|length == 1 %} {# if only one amplicon, just a normal div #}
+				<div>
+				{% else %}
+				<div class="tab-content pt-3 pr-3 pl-3 amp-body card-body" id="nav-tabContent">
+				{% endif %}
 
+				{% for amplicon_name in report_data.amplicons %}
 					{% if report_data.amplicons|length == 1 %} {# if only one amplicon, just a normal div #}
 					<div>
-					{% else %}
-					<div class="tab-content pt-3 pr-3 pl-3 amp-body card-body" id="nav-tabContent">
-					{% endif %}
-
-					{% for amplicon_name in report_data.amplicons %}
-						{% if report_data.amplicons|length == 1 %} {# if only one amplicon, just a normal div #}
-						<div>
-						{% elif loop.index0 == 0 %} {# if more than one amplicon, and the first, this is the active one #}
-						<div class="tab-pane fade show active" id="div_{{amplicon_name}}" role="tabpanel" aria-labelledby="pills_{{amplicon_name}}_tab">
-            <div class="d-none d-print-block"><h3>Reads aligning to {{amplicon_name}}</h3></div> {# this bit appears in print mode #}
-						{% else %} {# otherwise inactive tab #}
-						<div class="tab-pane fade" id="div_{{amplicon_name}}" role="tabpanel" aria-labelledby="pills_{{amplicon_name}}_tab">
-            <div class="d-none d-print-block"><h3>Reads aligning to {{amplicon_name}}</h3> </div>{# this bit appears in print mode #}
-						{% endif %}
+					{% elif loop.index0 == 0 %} {# if more than one amplicon, and the first, this is the active one #}
+					<div class="tab-pane fade show active" id="div_{{amplicon_name}}" role="tabpanel" aria-labelledby="pills_{{amplicon_name}}_tab">
+            			<div class="d-none d-print-block"><h3>Reads aligning to {{amplicon_name}}</h3></div> {# this bit appears in print mode #}
+					{% else %} {# otherwise inactive tab #}
+					<div class="tab-pane fade" id="div_{{amplicon_name}}" role="tabpanel" aria-labelledby="pills_{{amplicon_name}}_tab">
+            			<div class="d-none d-print-block"><h3>Reads aligning to {{amplicon_name}}</h3> </div>{# this bit appears in print mode #}
+							{% endif %}
 
-      				<div class='card text-center mb-2'>
-      					<div class='card-header'>
-									{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-      						<h5>Nucleotide composition</h5>
-									{% else %}
-      						<h5>Nucleotide composition for {{amplicon_name}}</h5>
-									{% endif %}
-      					</div>
-      					<div class='card-body'>
-						{% if report_data['figures']['locs'][amplicon_name]['plot_2a'] %}
-<div class='div_zoom_outer d-none d-md-block' style="height:100px;border:1px solid #DDDDDD;position:relative">
-	<div id="zoomview_nucs_{{amplicon_name}}" style="position:absolute;left:0;height:100%;width:100%;background-image: url({{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png);background-size:auto 100%;background-repeat:no-repeat;"></div>
-  <div class="d-lg-none" style="overflow-x:scroll;overflow-y:hidden;position:absolute;width:100%;height:100%">
-	  <img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png" style='height:100%'>
-  </div>
-</div>
-<div style='position:relative;display:inline-block;width:95%'>
-	<a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.pdf">
-    <div id='zoomlens_nucs_{{amplicon_name}}' class="d-none d-lg-block" style='float: left;position: absolute;left: 0px;top: 0px;z-index: 1000;border: 1px solid #DDDDDD;height:100%;width:10%'></div>
-    <img id='tozoom_nucs_{{amplicon_name}}' src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png" width='100%' style='position:relative'>
-  </a>
-</div>
-
-<label class="labelpadding">
-  <span class='d-none d-md-block'>Hover your mouse over the bottom image to zoom in on a specific region.</span><br>
-  {{report_data['figures']['captions'][amplicon_name]['plot_2a']}}
-</label>
-							  {% for (data_label,data_path) in report_data['figures']['datas'][amplicon_name]['plot_2a'] %}
-							  <p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
-                {% endfor %}
-						{% endif %}
+		      				<div class='card text-center mb-2'>
+      							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+      								<h5>Nucleotide composition</h5>
+								{% else %}
+      								<h5>Nucleotide composition for {{amplicon_name}}</h5>
+								{% endif %}
+      							</div>
+      							<div class='card-body'>
+								{% if report_data['figures']['locs'][amplicon_name]['plot_2a'] %}
+								<div class='div_zoom_outer d-none d-md-block' style="height:100px;border:1px solid #DDDDDD;position:relative">
+									<div id="zoomview_nucs_{{amplicon_name}}" style="position:absolute;left:0;height:100%;width:100%;background-image: url({{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png);background-size:auto 100%;background-repeat:no-repeat;"></div>
+  										<div class="d-lg-none" style="overflow-x:scroll;overflow-y:hidden;position:absolute;width:100%;height:100%">
+	  										<img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png" style='height:100%'>
+  										</div>
+									</div>
+									<div style='position:relative;display:inline-block;width:95%'>
+										<a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.pdf">
+    									<div id='zoomlens_nucs_{{amplicon_name}}' class="d-none d-lg-block" style='float: left;position: absolute;left: 0px;top: 0px;z-index: 1000;border: 1px solid #DDDDDD;height:100%;width:10%'></div>
+    										<img id='tozoom_nucs_{{amplicon_name}}' src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name]['plot_2a']}}.png" width='100%' style='position:relative'></a>
+										</div>
+										<label class="labelpadding">
+  										<span class='d-none d-md-block'>Hover your mouse over the bottom image to zoom in on a specific region.</span><br>
+  											{{report_data['figures']['captions'][amplicon_name]['plot_2a']}}
+										</label>
+							  			{% for (data_label,data_path) in report_data['figures']['datas'][amplicon_name]['plot_2a'] %}
+							  			<p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
+                						{% endfor %}
+									</div>
+								</div>
+								{% endif %}
 
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and  report_data['figures']['sgRNA_based_names'][amplicon_name]['2b']%}
-  							<div>
-  								{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['2b'] %}
-									{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
-  								{% endfor %}
+								{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and  report_data['figures']['sgRNA_based_names'][amplicon_name]['2b']%}
+  								<div>
+  									{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['2b'] %}
+									{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
+  									{% endfor %}
+  								</div>
+								{% endif %}
+            				</div>
+						</div> {# end card #}
+
+  						<div class='card text-center mb-2'>
+  							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+      							<h5>Modification lengths</h5>
+								{% else %}
+      							<h5>Modification lengths for {{amplicon_name}}</h5>
+								{% endif %}
+  								<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_3a'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_3a" role="tab" aria-controls="{{amplicon_name}}_3a" aria-selected="true">Summary</button>
+  						  			</li>
+            								{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_3b'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_3b" role="tab" aria-controls="{{amplicon_name}}_3b" aria-selected="false">Indels</button>
+  						  			</li>
+            						{% endif %}
+  								</ul>
   							</div>
-							{% endif %}
-            </div>
-          </div> {# end card #}
+  							<div class='card-body'>
+								<div class="tab-content" id="pills-tabContent">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_3a'] %}
+  						  			<div class="tab-pane fade show active" id="{{amplicon_name}}_3a" role="tabpanel">
+							  			{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_3a', amplicon_name=amplicon_name)}}
+						  			</div>
+									{% endif %}
 
-  				<div class='card text-center mb-2'>
-  					<div class='card-header'>
-									{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-      						<h5>Modification lengths</h5>
-									{% else %}
-      						<h5>Modification lengths for {{amplicon_name}}</h5>
+									{% if report_data['figures']['locs'][amplicon_name]['plot_3b'] %}
+  						  			<div class="tab-pane fade" id="{{amplicon_name}}_3b" role="tabpanel">
+							  			{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_3b', amplicon_name=amplicon_name)}}
+						  			</div>
 									{% endif %}
-  						<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_3a'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_3a" role="tab" aria-controls="{{amplicon_name}}_3a" aria-selected="true">Summary</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_3b'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_3b" role="tab" aria-controls="{{amplicon_name}}_3b" aria-selected="false">Indels</button>
-  						  </li>
-            {% endif %}
-  						</ul>
-  					</div>
-  					<div class='card-body'>
-  						<div class="tab-content" id="pills-tabContent">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_3a'] %}
-  						  <div class="tab-pane fade show active" id="{{amplicon_name}}_3a" role="tabpanel">
-							  {{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_3a', amplicon_name=amplicon_name)}}
-						  </div>
-						{% endif %}
+  								</div>
+  							</div> {# end card_body #}
+  						</div> {# end card #}
 
-						{% if report_data['figures']['locs'][amplicon_name]['plot_3b'] %}
-  						  <div class="tab-pane fade" id="{{amplicon_name}}_3b" role="tabpanel">
-							  {{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_3b', amplicon_name=amplicon_name)}}
-						  </div>
-						{% endif %}
-  							</div>
-  						</div> {# end card_body #}
-  				</div> {# end card #}
-
-  				<div class='card text-center mb-2'>
-  					<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-  						<h5>Indel characterization</h5>
-							{% else %}
-  						<h5>Indel characterization for {{amplicon_name}}</h5>
-							{% endif %}
-  						<ul class="nav nav-tabs justify-content-center card-header-tabs" id="indel-characterization-tabs" role="tablist">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4a'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4a" role="tab" aria-controls="{{amplicon_name}}_4a" aria-selected="true">All Modifications Combined</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4b'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4b" role="tab" aria-controls="{{amplicon_name}}_4b" aria-selected="false">All Modifications by Type</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4c'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4c" role="tab" aria-controls="{{amplicon_name}}_4c" aria-selected="false">Modifications in Quantification Window</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4d'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4d" role="tab" aria-controls="{{amplicon_name}}_4d" aria-selected="false">Indel Lengths</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4e'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4e" role="tab" aria-controls="{{amplicon_name}}_4e" aria-selected="false">All reads aligned to {{amplicon_name}}</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4f'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4f" role="tab" aria-controls="{{amplicon_name}}_4f" aria-selected="false">HDR reads aligned to {{amplicon_name}}</button>
-  						  </li>
-            {% endif %}
-  						</ul>
-  					</div> {# end card head #}
-  					<div class='card-body'>
-  						<div class="tab-content" id="pills-tabContent">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4a'] %}
-							<div class="tab-pane fade" id="{{amplicon_name}}_4a" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4a', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4b'] %}
-							<div class="tab-pane fade show active" id="{{amplicon_name}}_4b" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4b', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4c'] %}
-							<div class="tab-pane fade" id="{{amplicon_name}}_4c" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4c', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
+						<div class='card text-center mb-2'>
+  							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+  								<h5>Indel characterization</h5>
+								{% else %}
+  								<h5>Indel characterization for {{amplicon_name}}</h5>
+								{% endif %}
+  								<ul class="nav nav-tabs justify-content-center card-header-tabs" id="indel-characterization-tabs" role="tablist">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4a'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4a" role="tab" aria-controls="{{amplicon_name}}_4a" aria-selected="true">All Modifications Combined</button>
+  						  			</li>
+            								{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4b'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4b" role="tab" aria-controls="{{amplicon_name}}_4b" aria-selected="false">All Modifications by Type</button>
+  						  			</li>
+            								{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4c'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4c" role="tab" aria-controls="{{amplicon_name}}_4c" aria-selected="false">Modifications in Quantification Window</button>
+  						  			</li>
+            								{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4d'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4d" role="tab" aria-controls="{{amplicon_name}}_4d" aria-selected="false">Indel Lengths</button>
+  						  			</li>
+            								{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4e'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4e" role="tab" aria-controls="{{amplicon_name}}_4e" aria-selected="false">All reads aligned to {{amplicon_name}}</button>
+  						  			</li>
+								 	{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4f'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_4f" role="tab" aria-controls="{{amplicon_name}}_4f" aria-selected="false">HDR reads aligned to {{amplicon_name}}</button>
+  						  			</li>
+									{% endif %}
+  								</ul>
+  							</div> {# end card head #}
+  							<div class='card-body'>
+  								<div class="tab-content" id="pills-tabContent">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4a'] %}
+									<div class="tab-pane fade" id="{{amplicon_name}}_4a" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4a', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4b'] %}
+									<div class="tab-pane fade show active" id="{{amplicon_name}}_4b" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4b', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4c'] %}
+									<div class="tab-pane fade" id="{{amplicon_name}}_4c" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4c', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
 
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4d'] %}
-							<div class="tab-pane fade" id="{{amplicon_name}}_4d" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4d', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4d'] %}
+									<div class="tab-pane fade" id="{{amplicon_name}}_4d" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4d', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
 
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4e'] %}
-							<div class="tab-pane fade" id="{{amplicon_name}}_4e" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4e', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4e'] %}
+									<div class="tab-pane fade" id="{{amplicon_name}}_4e" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4e', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
 
-						{% if report_data['figures']['locs'][amplicon_name]['plot_4f'] %}
-							<div class="tab-pane fade" id="{{amplicon_name}}_4f" role="tabpanel">
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4f', amplicon_name=amplicon_name)}}
-							</div>
-						{% endif %}
-  							</div>
-  						</div> {# end card body #}
-  				</div> {# end card #}
+									{% if report_data['figures']['locs'][amplicon_name]['plot_4f'] %}
+									<div class="tab-pane fade" id="{{amplicon_name}}_4f" role="tabpanel">
+										{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_4f', amplicon_name=amplicon_name)}}
+									</div>
+									{% endif %}
+  								</div>
+  							</div> {# end card body #}
+  						</div> {# end card #}
 
 
 						{% if report_data['figures']['locs'][amplicon_name]['plot_5'] %}
-							<div class='card text-center mb-2'>
-								<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-									<h5>Frameshift analysis</h5>
-							{% else %}
-  						<h5>Frameshift analysis for {{amplicon_name}}</h5>
-							{% endif %}
-								</div>
-  					<div class='card-body'>
-						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_5', amplicon_name=amplicon_name)}}
+						<div class='card text-center mb-2'>
+							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Frameshift analysis</h5>
+								{% else %}
+  								<h5>Frameshift analysis for {{amplicon_name}}</h5>
+								{% endif %}
+							</div>
+  							<div class='card-body'>
+								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_5', amplicon_name=amplicon_name)}}
 							</div>
 						</div>
 						{% endif %}
 
 						{% if report_data['figures']['locs'][amplicon_name]['plot_6'] %}
-							<div class='card text-center mb-2'>
-								<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-									<h5>Frameshift mutagenesis profiles</h5>
-							{% else %}
-  						<h5>Frameshift mutagenesis profiles for {{amplicon_name}}</h5>
-							{% endif %}
-								</div>
-  					<div class='card-body'>
-						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_6', amplicon_name=amplicon_name)}}
+						<div class='card text-center mb-2'>
+							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Frameshift mutagenesis profiles</h5>
+								{% else %}
+  								<h5>Frameshift mutagenesis profiles for {{amplicon_name}}</h5>
+								{% endif %}
+							</div>
+  							<div class='card-body'>
+								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_6', amplicon_name=amplicon_name)}}
 							</div>
 						</div>
 						{% endif %}
 
 						{% if report_data['figures']['locs'][amplicon_name]['plot_7'] %}
-							<div class='card text-center mb-2'>
-								<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-									<h5>Non-coding mutations</h5>
-							{% else %}
-  						<h5>Coding mutations for {{amplicon_name}}</h5>
-							{% endif %}
-								</div>
-  					<div class='card-body'>
-						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_7', amplicon_name=amplicon_name)}}
+						<div class='card text-center mb-2'>
+							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Non-coding mutations</h5>
+								{% else %}
+  								<h5>Coding mutations for {{amplicon_name}}</h5>
+								{% endif %}
+							</div>
+  							<div class='card-body'>
+								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_7', amplicon_name=amplicon_name)}}
 							</div>
 						</div>
 						{% endif %}
 
 						{% if report_data['figures']['locs'][amplicon_name]['plot_8'] %}
-							<div class='card text-center mb-2'>
-								<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-									<h5>Splicing</h5>
-							{% else %}
-  						<h5>Splicing for {{amplicon_name}}</h5>
-							{% endif %}
-								</div>
-  					<div class='card-body'>
-						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_8', amplicon_name=amplicon_name)}}
+						<div class='card text-center mb-2'>
+							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Splicing</h5>
+								{% else %}
+  								<h5>Splicing for {{amplicon_name}}</h5>
+								{% endif %}
+							</div>
+  							<div class='card-body'>
+								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_8', amplicon_name=amplicon_name)}}
 							</div>
 						</div>
 						{% endif %}
 
-
-				{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and  report_data['figures']['sgRNA_based_names'][amplicon_name]['9']%}
-				<div class='card text-center mb-2'>
-					<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-						<h5>Allele plots</h5>
-							{% else %}
-  						<h5>Allele plots for {{amplicon_name}}</h5>
-							{% endif %}
-					</div>
-					<div class='card-body'>
+						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and  report_data['figures']['sgRNA_based_names'][amplicon_name]['9']%}
+						<div class='card text-center mb-2'>
+							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Allele plots</h5>
+								{% else %}
+  								<h5>Allele plots for {{amplicon_name}}</h5>
+								{% endif %}
+							</div>
+							<div class='card-body'>
 								{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['9'] %}
-                  	<div class='mb-4'>
-					  {{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
-                	</div>
-							{% endfor %}
-						</div>
-					</div>
-					{% endif %}
-
-					{% if report_data['figures']['locs'][amplicon_name]['plot_10a'] %}
-  				<div class='card text-center mb-2'>
-  					<div class='card-header'>
-							{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
-						<h5>Base editing</h5>
-							{% else %}
-  						<h5>Base editing for {{amplicon_name}}</h5>
-							{% endif %}
-  						<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_10a'] %}
-  						  <li class="nav-item">
-						  <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10a" role="tab" aria-controls="{{amplicon_name}}_10a" aria-selected="true">Substitution Frequencies</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10d']%}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10d" role="tab" aria-controls="{{amplicon_name}}_10d" aria-selected="false">Nucleotide Frequencies</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10e']%}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10e" role="tab" aria-controls="{{amplicon_name}}_10e" aria-selected="false">Base Proportions</button>
-  						  </li>
-            {% endif %}
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10f']%}
-  						  <li class="nav-item">
-						  <button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10f" role="tab" aria-controls="{{amplicon_name}}_10f" aria-selected="false">Non-reference Bases</button>
-  						  </li>
-            {% endif %}
-  						</ul>
-			</div>
-				<div class='card-body'>
-					<div class="tab-content" id="pills-tabContent">
-						{% if report_data['figures']['locs'][amplicon_name]['plot_10c'] %}
-					  	<div class="tab-pane fade show active" id="{{amplicon_name}}_10a" role="tabpanel">
-                			<div class='mb-3'>
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10a', amplicon_name=amplicon_name)}}
-                			</div>
-							<div>
-								<label class="labelpadding">Figures 10b,c: Substitution frequencies across the entire amplicon (left) and in the quantification window (right).</label>
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10b', amplicon_name=amplicon_name)}}
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10c', amplicon_name=amplicon_name)}}
+                  				<div class='mb-4'>
+					  				{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
+                				</div>
+								{% endfor %}
 							</div>
 						</div>
-						{% else %}
-						<div class="tab-pane fade show active" id="{{amplicon_name}}_10a" role="tabpanel">
-							<div class='mb-3'>
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10a', amplicon_name=amplicon_name)}}
-                			</div>
-                			<div>
-								{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10b', amplicon_name=amplicon_name)}}
-                			</div>
-  						</div>
-						{% endif %}
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10d']%}
-							<div class="tab-pane fade" id="{{amplicon_name}}_10d" role="tabpanel">
-							{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10d'] %}
-								<div class='mb-4'>
-									{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
-								</div>
-							{% endfor %}
-							</div>
-						{% endif %}
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10e']%}
-					  		<div class="tab-pane fade" id="{{amplicon_name}}_10e" role="tabpanel">
-						  	{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10e'] %}
-								<div class='mb-4'>
-			  						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
-  								</div>
-							{% endfor %}
-              				</div>
-						{% endif %}
-
-						{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10f']%}
-							<div class="tab-pane fade" id="{{amplicon_name}}_10f" role="tabpanel">
-							{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10f'] %}
-                  				<div class='mb-4'>
-			  						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10f', amplicon_name=amplicon_name)}}
-                  				</div>
-							{% endfor %}
-							{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10g'] %}
-                  				<div class='mb-4'>
-			  						{{ render_partial('shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10g', amplicon_name=amplicon_name)}}
-                    			</div>
-							{% endfor %}
-  							</div>
-              </div>
 						{% endif %}
 
+						{% if report_data['figures']['locs'][amplicon_name]['plot_10a'] %}
+  						<div class='card text-center mb-2'>
+  							<div class='card-header'>
+								{% if report_data.amplicons|length == 1 %} {# if only one amplicon #}
+								<h5>Base editing</h5>
+								{% else %}
+  								<h5>Base editing for {{amplicon_name}}</h5>
+								{% endif %}
+  								<ul class="nav nav-tabs justify-content-center card-header-tabs" id="aln-tab" role="tablist">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_10a'] %}
+  						  			<li class="nav-item">
+						  				<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10a" role="tab" aria-controls="{{amplicon_name}}_10a" aria-selected="true">Substitution Frequencies</button>
+  						  			</li>
+									{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10d']%}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10d" role="tab" aria-controls="{{amplicon_name}}_10d" aria-selected="false">Nucleotide Frequencies</button>
+  						  			</li>
+									{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10e']%}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10e" role="tab" aria-controls="{{amplicon_name}}_10e" aria-selected="false">Base Proportions</button>
+  						  			</li>
+            						{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10f']%}
+  						  			<li class="nav-item">
+						  				<button class="nav-link" data-bs-toggle="tab" data-bs-target="#{{amplicon_name}}_10f" role="tab" aria-controls="{{amplicon_name}}_10f" aria-selected="false">Non-reference Bases</button>
+  						  			</li>
+            						{% endif %}
+  								</ul>
+							</div>
+							<div class='card-body'>
+								<div class="tab-content" id="pills-tabContent">
+									{% if report_data['figures']['locs'][amplicon_name]['plot_10c'] %}
+					  				<div class="tab-pane fade show active" id="{{amplicon_name}}_10a" role="tabpanel">
+                						<div class='mb-3'>
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10a', amplicon_name=amplicon_name)}}
+                						</div>
+										<div>
+											<label class="labelpadding">Figures 10b,c: Substitution frequencies across the entire amplicon (left) and in the quantification window (right).</label>
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10b', amplicon_name=amplicon_name)}}
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10c', amplicon_name=amplicon_name)}}
+										</div>
+									</div>
+									{% else %}
+									<div class="tab-pane fade show active" id="{{amplicon_name}}_10a" role="tabpanel">
+										<div class='mb-3'>
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10a', amplicon_name=amplicon_name)}}
+                						</div>
+                						<div>
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10b', amplicon_name=amplicon_name)}}
+                						</div>
+  									</div>
+									{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10d']%}
+									<div class="tab-pane fade" id="{{amplicon_name}}_10d" role="tabpanel">
+										{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10d'] %}
+										<div class='mb-4'>
+											{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
+										</div>
+										{% endfor %}
+									</div>
+									{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10e']%}
+					  				<div class="tab-pane fade" id="{{amplicon_name}}_10e" role="tabpanel">
+						  				{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10e'] %}
+										<div class='mb-4'>
+			  								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name=fig_name, amplicon_name=amplicon_name)}}
+  										</div>
+										{% endfor %}
+              						</div>
+									{% endif %}
+									{% if report_data['figures']['sgRNA_based_names'][amplicon_name] and report_data['figures']['sgRNA_based_names'][amplicon_name]['10f']%}
+									<div class="tab-pane fade" id="{{amplicon_name}}_10f" role="tabpanel">
+										{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10f'] %}
+                  						<div class='mb-4'>
+			  								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10f', amplicon_name=amplicon_name)}}
+                  						</div>
+										{% endfor %}
+										{% for fig_name in report_data['figures']['sgRNA_based_names'][amplicon_name]['10g'] %}
+                  						<div class='mb-4'>
+			  								{{ render_partial('CRISPRessoReports/templates/shared/partials/fig_reports.html', report_data=report_data, fig_name='plot_10g', amplicon_name=amplicon_name)}}
+                    					</div>
+										{% endfor %}
+  									</div>
+              					</div>
+								{% endif %}
   							</div>
-  				</div> {# end card #}
-					{% endif %} {# end base editing card #}
-
-				</div> {# end this amplicon tab #} <!--end amp tab -->
+  						</div> {# end card #}
+						{% endif %} {# end base editing card #}
+					</div> {# end this amplicon tab #} <!--end amp tab -->
 
 					{% endfor %}
 				</div> {# tab content #} <!-- end tab content -->
-
 			</div> <!-- end card -->
-
-	</div> {# jumbotron_content #} <!-- end jumbotron_content -->
-</div> {# jumbrotron #} <!-- end jumbotron -->
-
+		</div> {# jumbotron_content #} <!-- end jumbotron_content -->
+	</div> {# jumbrotron #} <!-- end jumbotron -->
 </div> {# column #} <!-- end column -->
+</center>
 
 <div class="col-sm-1"></div>
 {% endblock %}
diff --git a/templates/shared/partials/fig_reports.html b/templates/shared/partials/fig_reports.html
index 4ee65aa2..6f7e448e 100644
--- a/templates/shared/partials/fig_reports.html
+++ b/templates/shared/partials/fig_reports.html
@@ -1,23 +1,31 @@
 <div id="fig_{{fig_name}}">
-    {% if amplicon_name %}
-        {% if report_data['figures']['htmls'][amplicon_name][fig_name] %}
+    {% if amplicon_name is defined %}
+        {% if 'htmls' in report_data['figures'] and fig_name in report_data['figures']['htmls'][amplicon_name] %}
             {{report_data['figures']['htmls'][amplicon_name][fig_name]|safe}}
         {% else %}
-            <a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.pdf"><img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.png" width='100%' height='100%'></a>
+        {% if fig_name in ['plot_1a', 'plot_1b', 'plot_1c', 'plot_3a', 'plot_4a', 'plot_4b', 'plot_4c'] %}
+            <a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.pdf"><img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.png" width='40%' height='40%' ></a>
+            {% else %}
+            <a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.pdf"><img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][amplicon_name][fig_name]}}.png" width='100%' height='100%' ></a>
+            {% endif %} 
         {% endif %}
-            <label class="labelpadding">{{report_data['figures']['captions'][amplicon_name][fig_name]}}</label>
-            {% for (data_label,data_path) in report_data['figures']['datas'][amplicon_name][fig_name] %}
-                <p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
-            {% endfor %}
+        <label class="labelpadding">{{report_data['figures']['captions'][amplicon_name][fig_name]}}</label>
+        {% for (data_label,data_path) in report_data['figures']['datas'][amplicon_name][fig_name] %}
+            <p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
+        {% endfor %}
     {% else %}
-        {% if report_data['figures']['htmls'][fig_name] %}
+        {% if 'htmls' in report_data['figures'] and fig_name in report_data['figures']['htmls'] %}
             {{report_data['figures']['htmls'][fig_name]|safe}}
         {% else %}
+            {% if fig_name in ['plot_1a', 'plot_1b', 'plot_1c', 'plot_3a', 'plot_4a', 'plot_4b', 'plot_4c'] %}
+            <a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][fig_name]}}.pdf"><img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][fig_name]}}.png" width='40%' height='40%' ></a>
+            {% else %}
             <a href="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][fig_name]}}.pdf"><img src="{{report_data['crispresso_data_path']}}{{report_data['figures']['locs'][fig_name]}}.png" width='100%' height='100%' ></a>
+            {% endif %}        
         {% endif %}
-            <label class="labelpadding">{{report_data['figures']['captions'][fig_name]}}</label>
-            {% for (data_label,data_path) in report_data['figures']['datas'][fig_name] %}
-                <p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
-            {% endfor %}
+        <label class="labelpadding">{{report_data['figures']['captions'][fig_name]}}</label>
+        {% for (data_label,data_path) in report_data['figures']['datas'][fig_name] %}
+            <p class="m-0"><small>Data: <a href="{{report_data['crispresso_data_path']}}{{data_path}}">{{data_label}}</a></small></p>
+        {% endfor %}
     {% endif %}
 </div>
\ No newline at end of file
diff --git a/templates/wgsReport.html b/templates/wgsReport.html
index 0a5a1277..aba5afc6 100644
--- a/templates/wgsReport.html
+++ b/templates/wgsReport.html
@@ -1,4 +1,4 @@
-{% extends "layout.html" %}
+{% extends "CRISPRessoReports/templates/layout.html" %}
 {% block head %}
 <style>
 .nav-tabs.amp-header {
@@ -71,7 +71,7 @@ <h5 id="{{report_name}}">{{report_name}}</h5>
                 <h5>{{report_data['titles'][plot_name]}}</h5>
               </div>
               <div class='card-body' style='max-height:80vh;overflow-y:auto'>
-		        {{ render_partial('shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
+		        {{ render_partial('CRISPRessoReports/templates/shared/partials/fig_summaries.html', report_data=report_data, plot_name=plot_name) }}
               </div>
             </div>
             {% endfor %}