Add qc report generation into the workflow (#40)

- Provides an html page for each subject containing before and after flat-field correction, whole slice, and volume rendered images - All images and image data is stored locally within the qc directory - Can customize the number of slices and colour maps from config file - Additionally includes a script to create small test datasets from an existing dataset
khanlab · Jul 17, 2024 · dbefbf6 · dbefbf6
1 parent e54eb31
commit dbefbf6
Show file tree

Hide file tree

Showing 20 changed files with 1,148 additions and 3 deletions.
diff --git a/config/config.yml b/config/config.yml
@@ -126,8 +126,17 @@ bids:
   readme_md: resources/bids_template_files/README.md
   samples_json: resources/bids_template_files/samples.json
 
+report:
+  create_report: True
+  flatfield_corrected:
+    slice_start: 0
+    slice_step: 50 # Shows every nth slice
+    colour_map: viridis
+  whole_slice_viewer:
+    slice_start: 0
+    slice_step: 50
+    colour_map: viridis
 
-
 
 containers:
   spimprep: 'docker://khanlab/spimprep-deps:main'

diff --git a/poetry.lock b/poetry.lock
diff --git a/pyproject.toml b/pyproject.toml
@@ -16,6 +16,12 @@ snakefmt = "^0.10.0"
 mkdocs-material = "^9.5.20"
 mkdocs-include-markdown-plugin = "^6.0.6"
 
+
+[tool.poetry.group.dataset_creation.dependencies]
+typer = "^0.12.3"
+xmltodict = "^0.13.0"
+tifffile = "^2024.5.10"
+
 [build-system]
 requires = ["poetry-core"]
 build-backend = "poetry.core.masonry.api"
diff --git a/qc/README.md b/qc/README.md
@@ -0,0 +1,19 @@
+# How to view QC reports
+
+### 1: Run the workflow with personalized report generation configurations
+
+### 2: Navigate to qc directory:
+
+```bash
+cd ./qc
+```
+### 3: Create a Python web server:
+
+```bash
+python -m http.server
+```
+### 4: Open the link generated in a browser and open qc_report.html
+
+
+### Note:
+ Can view the whole slice images and the flatfield corrections without running the web server. However, to view the volume rendered brain, the web server is required.
diff --git a/qc/resources/ff_html_temp.html b/qc/resources/ff_html_temp.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<head>
+  <title>FlatField Correction Check</title>
+  <style>
+    img {
+        height: auto;
+        width:200px;
+        z-index: 0;
+        position: relative;
+    }
+
+    table {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .expand-options {
+        float: right;
+    }
+
+    #expand_scale {
+        display: none;
+    }  
+  </style>
+</head>
+<body>
+  <a href="./subject.html">Back</a>
+  <label class="expand-options">
+    Expand Images on Click
+    <input type="checkbox" id="expand">
+    <input type="number" id="expand_scale" value="2">
+  </label>
+  <table id="table">
+    <tbody>
+    {%- for chunk in chunks %}
+    {%- set chunk_num = loop.index0 %}
+    {%- for channel in chunk %}
+        <tr>
+            <td colspan={{ numColumns }}>
+                <h2>Chunk - {{ chunk_num }} Channel - {{ loop.index0 }}</h2>
+            </td>
+        </tr>
+        <tr>
+    {%- for image in channel %}
+            <td>
+                <img src="{{ image.img_corr }}"></img>
+                <h3>Corrected</h3>
+                <p>Slice-{{ image.slice }}</p>
+            </td>
+            <td>
+                <img src="{{ image.img_uncorr }}"></img>
+                <h3>Uncorrected</h3>
+                <p>Slice-{{ image.slice }}</p>
+            </td>
+    {%- endfor %}
+        </tr>
+    {%- endfor %}
+    {%- endfor %}
+    </tbody>
+    <script>
+        // get every image, expandButtonToggle and the expand factor
+        const images = document.querySelectorAll('img');
+        const expandButton = document.getElementById("expand")
+        const expand_factor = document.getElementById("expand_scale")
+        let expansion_scale = 1
+        let expanded = false;
+
+        // create a function to expand images when clicked on
+        function handleImageClick(event){
+            // get target image and the scaling factor
+            const image = event.target
+            expansion_scale = expand_factor.value;
+
+            // expand image by the scaling factor if not already expanded
+            if(!expanded){
+                image.style.transform = `scale(${expansion_scale})`
+                image.style.zIndex = 1
+
+                // if it is going to expand off screen shift to the right
+                const leftDistance = image.getBoundingClientRect().left;
+                if(leftDistance < 0){
+                    image.style.transform = `translateX(${Math.abs(leftDistance)+10}px) scale(${expansion_scale})`;
+                }
+
+                expanded=true
+
+            } else {
+                // scale images back to original size
+                image.style.transform = "scale(1)"
+                image.style.position = 'relative'
+                image.style.zIndex=0
+                expanded=false
+            }
+        }
+
+        // Enables or disables the ability to expand images on click
+        expandButton.addEventListener('change', ()=>{
+
+            // add listener to enable expansion
+            if(expandButton.checked){
+                images.forEach(image => {
+                    image.addEventListener('click', handleImageClick)
+                })
+
+                // ensure images expand properly
+                expand_factor.style.display='inline';
+
+            } else {
+
+                //remove listener to disable expansion
+                images.forEach(image => {
+                    image.removeEventListener('click', handleImageClick)
+                    image.style.transform = 'scale(1)'
+                })
+
+                expand_factor.style.display = 'none'
+            }
+        })
+    </script>
+</body>
diff --git a/qc/resources/qc_report_temp.html b/qc/resources/qc_report_temp.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>QC Reports</title>
+    </head>
+    <body>
diff --git a/qc/resources/subject_html_temp.html b/qc/resources/subject_html_temp.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>{{ subject }} - {{ sample }} - {{ acq }}</title>
+    </head>
+    <body>
+        <a href="{{ back_link }}">Back</a><br>
+        <a href="{{ ffhtml }}">Flatfield Correction QC</a><br>
+        <a href="{{ wshtml }}">Whole Slice QC</a>
+        <br>
+        <a href="{{ volhtml }}">Volume Rendered Image</a>
+    </body>
+</html>
diff --git a/qc/resources/volViewer/cm_gray.png b/qc/resources/volViewer/cm_gray.png
diff --git a/qc/resources/volViewer/cm_viridis.png b/qc/resources/volViewer/cm_viridis.png
diff --git a/qc/resources/volViewer/volRender.html b/qc/resources/volViewer/volRender.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>3D Brain</title>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+    <script type="importmap">
+        {
+          "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
+          }
+        }
+      </script>
+</head>
+
+<body>
+	<a href="./subject.html">Back</a>
+	<div id="inset"></div>
+	<script src="./volume_resources/volRenderScript.js" type="module"></script>
+</body>
+</html>