Merge pull request #9 from minh-biocommons/visualisation2

update report
Australian-Structural-Biology-Computing · Oct 21, 2024 · 0aff7aa · 0aff7aa
2 parents bee5176 + 08cbbf9
commit 0aff7aa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/assets/comparison_template.html b/assets/comparison_template.html
@@ -507,7 +507,7 @@
     // Representations ---------------------------------------------------------
 
     const toggleModel = (modelIndex) => {
-      const button = document.getElementById(`btn-${MODELS[modelIndex].split(".")[0]}`);
+      const button = document.getElementById(`btn-${MODELS[modelIndex].replace(".pdb", "")}`);
 
       if (state.models[modelIndex].reprList.length > 0) {
         removeModel(modelIndex);
@@ -672,8 +672,12 @@
     };
 
     const downloadPdb = () => {
-      const url = uri(state.selectedTab);
+      const blob = new Blob([uri(state.selectedTab)], {
+        type: "text/plain",
+      });
       const name = `${MODELS[state.selectedTab]}`;
+      const url = URL.createObjectURL(blob);
+
       makeDownload(url, name);
     };
 
@@ -700,8 +704,8 @@
       MODELS.forEach((model, index) => {
         const button = document.createElement("button");
         button.className =
-          "btn selected w-28 rounded-md bg-white border-2 border-gray-300 py-3 text-sm font-semibold text-gray-800 shadow-md hover:border-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800";
-        button.id = `btn-${model.split(".")[0]}`;
+          "btn selected w-48 truncate rounded-md bg-white border-2 border-gray-300 px-2 py-3 text-sm font-semibold text-gray-800 shadow-md hover:border-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-800";
+        button.id = `btn-${model.replace(".pdb", "")}`;
         button.onclick = () => toggleModel(index);
 
         const span = document.createElement("span");
@@ -710,7 +714,7 @@
         const icon = document.createElement("i");
         icon.className = "bi bi-check-circle-fill";
 
-        const text = document.createTextNode(`${model.split(".")[0]}`);
+        const text = document.createTextNode(`${model.replace(".pdb", "")}`);
 
         span.appendChild(icon);
         button.appendChild(span);
@@ -724,9 +728,9 @@
 
       MODELS.forEach((model, index) => {
         const div = document.createElement("div");
-        div.className = "flex gap-3 justify-between items-center leading-loose";
+        div.className = "flex gap-3 items-center leading-loose";
 
-        const text = `${model.split(".")[0]}`;
+        const text = `${model.replace(".pdb", "")}`;
         const color = document.createElement("div");
         color.className = `h-3 w-3 rounded-full bg-[${COLORS[index]}]`;
 
@@ -754,7 +758,7 @@
           button.classList.add("border-transparent", "hover:text-gray-600", "hover:border-gray-300");
         }
 
-        button.textContent = `${model.split(".")[0]}`;
+        button.textContent = `${model.replace(".pdb", "")}`;
 
         button.addEventListener("click", () => {
           state.selectedTab = index;

diff --git a/bin/generate_comparison_report.py b/bin/generate_comparison_report.py
@@ -3,6 +3,7 @@
 import os
 import argparse
 from collections import OrderedDict
+import base64
 import plotly.graph_objects as go
 from Bio import PDB
 
@@ -214,10 +215,16 @@ def pdb_to_lddt(pdb_files, generate_tsv):
     "const MODELS = [];", args_pdb_array_js
 )
 
-args_msa_array_js = "const SEQ_COV_IMGS = [" + ", ".join([f'"{item}"' for item in args.msa if item != "NO_FILE"]) + "];"
-alphafold_template = alphafold_template.replace(
-    "const SEQ_COV_IMGS = [];", args_msa_array_js
-)
+seq_cov_imgs = []
+for item in args.msa:
+    if item != "NO_FILE":
+        image_path = item
+        with open(image_path, "rb") as in_file:
+            encoded_image = base64.b64encode(in_file.read()).decode("utf-8")
+            seq_cov_imgs.append(f"data:image/png;base64,{encoded_image}")
+
+args_msa_array_js = f"""const SEQ_COV_IMGS = [{", ".join([f'"{img}"' for img in seq_cov_imgs])}];"""
+alphafold_template = alphafold_template.replace("const SEQ_COV_IMGS = [];", args_msa_array_js)
 
 averages_js_array = f"const LDDT_AVERAGES = {lddt_averages};"
 alphafold_template = alphafold_template.replace(