diff --git a/assets/comparison_template.html b/assets/comparison_template.html
index 342b4d67..1d07aae6 100644
--- 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
index 0471a8fb..b86294d7 100755
--- 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(