Change formatting and summary page layout

DavidsonGroup · Nov 27, 2024 · eabb75d · eabb75d
1 parent 94fefb9
commit eabb75d
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/src/summary.rs b/src/summary.rs
@@ -9,11 +9,14 @@ const TEMPLATE_HTML: &str = include_str!("summary_template.html");
 pub fn summarize(index: &str, output: &str) -> Result<()> {
     info!("Summarising index at {index}");
     let (_, statistics, info) = duplicates::get_duplicates(index)?;
+    let gb = info.gb;
 
     let mut data = serde_json::to_value(info).context("Could not serialize info")?;
 
     println!("{}", serde_json::to_string(&statistics)?);
-    data["stats"] = serde_json::Value::String(serde_json::to_string(&statistics)?);
+    // round "gb" stat to 3dp
+    data["gb"] = json!(format!("{:.3}", gb));
+    data["stats"] = json!(serde_json::to_string(&statistics)?);
 
     println!(
         "{}",

diff --git a/src/summary_template.html b/src/summary_template.html
@@ -41,6 +41,7 @@
     <script>
         let stats = {{{ stats }}};
         let data = stats.distribution;
+        let max_x = Math.max(...Object.keys(stats.distribution).map((x) => Number(x)));
     </script>
 </head>
 <body>
@@ -69,7 +70,7 @@ <h2>Summary table</h2>
             dataset size
         </td>
         <td>
-            {{ gb }}
+            {{ gb }} GB
         </td>
     </tr>
     <tr>
@@ -129,15 +130,24 @@ <h2>
 
 A 'UMI group' is a group of reads which all share the same barcode and UMI.
 
-<canvas id="byUmi"></canvas>
+<div class="bar-chart-container">
+    <div>
+        <canvas id="byUmi"></canvas>
+    </div>
+</div>
 
 <h2>
     By read
 </h2>
 
 Each read is classified by the number of reads in its corresponding UMI group.
 
-<canvas id="byRead"></canvas>
+<div class="bar-chart-container">
+    <div>
+        <canvas id="byRead"></canvas>
+    </div>
+</div>
+
 
 <script>
     const umi_dup_data = {
@@ -152,10 +162,16 @@ <h2>
     };
 
     const ctxUmi = document.getElementById('byUmi').getContext('2d');
-    new Chart(ctxUmi, {
+    let umiChart = new Chart(ctxUmi, {
         type: 'bar',
         data: umi_dup_data,
         options: {
+            maintainAspectRatio: false,
+            interaction: {
+                intersect: false,
+                mode: 'nearest',
+                axis: 'x'
+            },
             plugins: {
                 legend: {
                     display: false
@@ -167,7 +183,11 @@ <h2>
                     beginAtZero: true
                 },
                 x: {
-                    title: "Duplicate count"
+                    grace: 0,
+                    offset: false,
+                    beginAtZero: true,
+                    title: "Duplicate count",
+                    type: "linear"
                 }
             }
         }
@@ -187,10 +207,16 @@ <h2>
     };
 
     const ctxRead = document.getElementById('byRead').getContext('2d');
-    new Chart(ctxRead, {
+    let readChart = new Chart(ctxRead, {
         type: 'bar',
         data: read_dup_data,
         options: {
+            maintainAspectRatio: false,
+            interaction: {
+                intersect: false,
+                mode: 'nearest',
+                axis: 'x'
+            },
             plugins: {
                 legend: {
                     display: false
@@ -202,11 +228,23 @@ <h2>
                     beginAtZero: true
                 },
                 x: {
-                    title: "duplicate count"
+                    grace: 0,
+                    offset: false,
+                    beginAtZero: true,
+                    title: "Duplicate count",
+                    type: "linear"
                 }
             }
         }
     });
+
+
+    umiChart.canvas.parentNode.style.height = '400px';
+    umiChart.canvas.parentNode.style.width = 15 * max_x + "px";
+
+
+    readChart.canvas.parentNode.style.height = '400px';
+    readChart.canvas.parentNode.style.width = 15 * max_x + "px";
 </script>
 </body>
 </html>