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(