Update result view and fix bugs

app/fn.py

@@ -3,6 +3,7 @@ from email.mime.multipart import MIMEMultipart
 from email.mime.text import MIMEText
 from email.utils import formatdate, make_msgid
 from functools import cache
+import html
 import os
 from pathlib import Path
 import smtplib
@@ -11,13 +12,14 @@ import tempfile
 
 import pandas as pd
 from bokeh.models import NumberFormatter, BooleanFormatter, HTMLTemplateFormatter
+from bokeh.resources import INLINE
 import gradio as gr
 import pytz
 import panel as pn
 import seaborn as sns
 from markdown import markdown
 from rdkit import Chem, RDConfig
-from rdkit.Chem import PandasTools, Crippen, Descriptors, rdMolDescriptors, Lipinski, rdmolops
+from rdkit.Chem import Crippen, Descriptors, rdMolDescriptors, Lipinski, rdmolops, Draw
 import requests
 
 from app import static
@@ -153,7 +155,7 @@ def bms(mol):
 
 
 SCORE_MAP = {
-    'SAscore': sascorer.calculateScore,
+    'Synthetic Accessibility': sascorer.calculateScore,
     'LogP': Crippen.MolLogP,
     'Molecular Weight': Descriptors.MolWt,
     'Number of Atoms': rdMolDescriptors.CalcNumAtoms,
@@ -180,16 +182,6 @@ FILTER_MAP = {
 }
 
 
-def validate_columns(df, mandatory_cols):
-    missing_cols = [col for col in mandatory_cols if col not in df.columns]
-    if missing_cols:
-        error_message = (f"The following mandatory columns are missing "
-                         f"in the uploaded dataset: {str(mandatory_cols).strip('[]')}.")
-        raise ValueError(error_message)
-    else:
-        return
-
-
 def get_timezone_by_ip(ip, session):
     try:
         data = session.get(f'https://worldtimeapi.org/api/ip/{ip}').json()
@@ -289,20 +281,6 @@ def read_molecule_file(in_file, allowed_extentions):
     return content, extension, None
 
 
-def show_target(in_protein):
-    molecule, extension, html = read_molecule_file(in_protein, allowed_extentions=['pdb'])
-    if molecule is not None:
-        html = static.TARGET_RENDERING_TEMPLATE.format(molecule=molecule, fmt=extension)
-
-    return static.IFRAME_TEMPLATE.format(html=html)
-
-def show_complex(complex_path):
-    protein_complex, extension, html = read_molecule_file(complex_path, allowed_extentions=['pdb'])
-    if protein_complex is not None:
-        html = static.COMPLEX_RENDERING_TEMPLATE.format(complex=protein_complex, fmt=extension)
-
-    return static.IFRAME_TEMPLATE.format(html=html)
-
 # def create_complex_view_html(
 #         complex_path, pocket_path_dict=None,
 #         interactive_ligands=True, interactive_pockets=True
@@ -413,23 +391,24 @@ def show_complex(complex_path):
 #     html = static.COMPLEX_RENDERING_TEMPLATE.format(viewer_models=viewer_models)
 #     return static.IFRAME_TEMPLATE.format(html=html)
 
-def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqdm=True)):
-    html_df = summary_df.copy()
+def create_result_table_html(summary_df, result_info, opts=(), progress=gr.Progress(track_tqdm=True)):
+    html_df = summary_df.copy().drop(columns=['mol'])
     column_aliases = {
+        'out_path': 'Pose',
+        'ligand_conf_path': 'Pose',
         'ID1': 'Compound ID',
         'ID2': 'Target ID',
-        'X1': 'Compound SMILES',
-        'ligand_conf_path': 'Pose',
-        'output_path': 'Pose'
+        'X1': 'Fragment SMILES',
+        'X1^': 'Compound SMILES',
+        'name': 'Complex Name',
     }
-    # drop any columns ending with '_path'
-    hidden_cols = [col for col in html_df.columns if col.endswith('_path')]
-
+    output_dir = Path(result_info['output_dir'])
+    job_type = result_info['type']
     html_df.rename(columns=column_aliases, inplace=True)
-    if 'Compound' in html_df.columns and 'Exclude Molecular Graph' not in opts:
-        html_df['Compound'] = html_df['Compound'].apply(PandasTools.PrintAsImageString)
-    else:
-        html_df.drop(['Compound'], axis=1, inplace=True)
+    html_df['Pose'] = html_df['Pose'].apply(lambda x: str(output_dir / job_type / x))
+    # drop remaining columns ending with '_path'
+    hidden_cols = [col for col in html_df.columns if col.endswith('_path')]
+    html_df.index.name = 'Index'
 
     # if 'Scaffold' in html_df.columns and 'Exclude Scaffold Graph' not in opts:
     #     html_df['Scaffold'] = html_df['Scaffold'].parallel_apply(
@@ -437,13 +416,13 @@ def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqd
     # else:
     #     html_df.drop(['Scaffold'], axis=1, inplace=True)
 
-    # html_df.index.name = 'Index'
-
     num_cols = html_df.select_dtypes('number').columns
     num_col_colors = sns.color_palette('husl', len(num_cols))
     bool_cols = html_df.select_dtypes(bool).columns
 
-    image_zoom_formatter = HTMLTemplateFormatter(template='<div class="image-zoom-viewer"><%= value %></div>')
+    image_zoom_formatter = HTMLTemplateFormatter(
+        template='<img src="data:image/svg+xml,<%= value %>" alt="Molecule" class="zoom-img">'
+    )
     uniprot_id_formatter = HTMLTemplateFormatter(
         template='<% if (value == value) { '  # Check if value is not NaN
                  'if (/^[OPQ][0-9][A-Z0-9]{3}[0-9]|[A-NR-Z][0-9]([A-Z][A-Z0-9]{2}[0-9]){1,2}$/.test(value)) '
@@ -473,12 +452,27 @@ def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqd
 
     # html = df.to_html(file)
     # return html
+    static_url = "gradio_api/file=app/static/"
+    pn.extension(
+        design='material',
+        css_files=[
+            static_url + 'panel.css'
+        ],
+        js_files={
+            'panel_custom': static_url + 'panel.js',
+        },
+    )
 
     report_table = pn.widgets.Tabulator(
         html_df, formatters=formatters,
-        frozen_columns=['Compound ID', 'Compound'],
+        frozen_columns=['Pose', 'Compound ID', 'Compound'],
         hidden_columns=hidden_cols,
-        disabled=True, sizing_mode='stretch_both', pagination='local', page_size=10
+        sizing_mode='stretch_both',
+        disabled=True, selectable=False,
+        pagination='local',
+        configuration={
+            'rowHeight': 60,
+        },
     )
 
     for i, col in enumerate(num_cols):
@@ -488,7 +482,7 @@ def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqd
             subset=html_df.columns == col, cmap=cmap)
 
     # TODO change this to use commonn substructures
-    pie_charts = {}
+    # pie_charts = {}
     # for y in html_df.columns.intersection(['Interaction Probability', 'Binding Affinity (IC50 [nM])']):
     #     for category in categories:
     #         pie_charts[y][category] = []
@@ -505,68 +499,6 @@ def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqd
     #         pie_charts[y] = {k: v for k, v in pie_charts[y].items() if any(v)}
     #     pie_charts = {k: v for k, v in pie_charts.items() if any(v)}
 
-    panel_css = """
-        .tabulator {
-            font-family: Courier New !important;
-            font-weight: normal !important;
-            font-size: 12px !important;
-        }
-        
-        .tabulator-cell {
-            overflow: visible !important;
-            align-content: center !important;
-        }
-        
-        .tabulator-cell:hover {
-            z-index: 1000 !important;
-        }
-        
-        .image-zoom-viewer {
-            display: inline-block;
-            overflow: visible;
-            z-index: 1000;
-        }
-        
-        .image-zoom-viewer::after {
-            content: "";
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-        }
-        
-        .image-zoom-viewer:hover::after {
-            pointer-events: all;
-        }
-        
-        /* When hovering over the container, scale its child (the SVG) */
-        .tabulator-cell:hover .image-zoom-viewer svg {
-            padding: 3px;
-            position: absolute;
-            background-color: rgba(250, 250, 250, 0.854);
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.618);
-            border-radius: 3px;
-            transform: scale(3); /* Scale up the SVG */
-            transition: transform 0.3s ease;
-            pointer-events: none; /* Prevents the SVG from blocking mouse interactions */
-            z-index: 1000;
-        }
-    """
-
-    pn.extension(
-        raw_css=[panel_css],
-        js_files={'panel_custom': 'app/panel.js'},
-        # js_modules={'3Dmol': 'static/3Dmol-min.js'},
-        inline=True,
-    )
-
-    template = pn.template.VanillaTemplate(
-        sidebar=[],
-        header=False,
-        busy_indicator=None,
-    )
-
     # stats_pane = pn.Column()
     # if pie_charts:
     #     for score_name, figure_dict in pie_charts.items():
@@ -584,64 +516,34 @@ def create_result_table_html(summary_df, opts=(), progress=gr.Progress(track_tqd
     #     template.main.append(
     #         pn.Card(stats_pane, sizing_mode='stretch_width', title='Summary Statistics', margin=10)
     #     )
-
-    template.main.append(
-        pn.Card(report_table, title=f'GenFBDD Results',  # width=1200,
-                margin=10)
-    )
+    report = pn.Column(pn.Accordion(
+        (f'{job_type.title()} Results', report_table),
+        toggle=True, margin=5, active=[0]
+    ))
 
     with tempfile.TemporaryDirectory() as tmpdir:
         file = Path(tmpdir) / 'report.html'
-        template.save(file)
-        html_str = file.read_text()
-        iframe_html = static.IFRAME_TEMPLATE.format(html=html_str)
+        report.save(file)
+        # iframe_html = static.IFRAME_LINK_TEMPLATE.format(src="gradio_api/file=" + str(file))
+        html_str = file.read_text()  # .replace('\'', '\"')
+        iframe_html = static.IFRAME_TEMPLATE.format(srcdoc=html.escape(html_str), aspect_ratio='1.090 / 1')
         return iframe_html
 
 
-def pdb_query(query, method):
-    """Downloads protein structure data or searches FASTA sequence."""
-    gr.Info(f'Querying protein by {method}...')
-    try:
-        if method == 'PDB ID':
-            url = f"https://files.rcsb.org/download/{query}.pdb"
-            return download_file(url)
-        elif method == 'UniProt ID':
-            pdb_ids = uniprot_to_pdb(query)
-            if pdb_ids:
-                # Download the first associated PDB file
-                return download_file(f"https://files.rcsb.org/download/{pdb_ids[0]}.pdb")
-            else:
-                raise ValueError(f"No PDB IDs found for UniProt ID: {query}")
-        elif method == 'FASTA Sequence':
-            pdb_ids = fasta_to_pdb(query)
-            if pdb_ids:
-                # Download the first associated PDB file
-                return download_file(f"https://files.rcsb.org/download/{pdb_ids[0]}.pdb")
-            else:
-                raise ValueError("No PDB IDs found for the provided FASTA sequence.")
-        else:
-            raise ValueError(f"Unsupported method: {method}")
-    except Exception as e:
-        gr.Warning(f"Error downloading PDB file: {e}")
-        return None
-
-
 def download_file(url):
     """Downloads a small file to a temporary location, preserving its filename."""
-    try:
-        response = requests.get(url)
-        response.raise_for_status()
+    response = requests.get(url)
+    if response.status_code == 404:
+        raise ValueError('No record found for the provided PDB ID.')
+    response.raise_for_status()
 
-        filename = Path(url).name
-        temp_dir = Path(tempfile.gettempdir())
-        temp_path = temp_dir / filename
+    filename = Path(url).name
+    temp_dir = Path(tempfile.gettempdir()) / 'gradio'
+    temp_path = temp_dir / filename
 
-        temp_path.write_bytes(response.content)
+    temp_path.write_bytes(response.content)
 
-        return str(temp_path)
-    except Exception as e:
-        gr.Error(f"Download error: {e}")
-        return None
+    return str(temp_path)
 
 
 def uniprot_to_pdb(uniprot_id):
@@ -681,7 +583,6 @@ def uniprot_to_pdb(uniprot_id):
         data = response.json()
         return [entry["identifier"] for entry in data.get("result_set", [])]
     except Exception as e:
-        print(f"Error querying UniProt ID: {e}")
         return []
 
 
@@ -711,5 +612,4 @@ def fasta_to_pdb(fasta_sequence):
         data = response.json()
         return [entry["identifier"] for entry in data.get("result_set", [])]
     except Exception as e:
-        print(f"Error querying FASTA sequence: {e}")
         return []

app/main.py

@@ -3,6 +3,7 @@ import zipfile
 from datetime import datetime
 from pathlib import Path
 from time import sleep, time
+import urllib.parse
 
 import torch
 from email_validator import validate_email, EmailNotValidError
@@ -12,17 +13,17 @@ from gradio_rangeslider import RangeSlider
 from omegaconf import OmegaConf
 import pandas as pd
 from rdkit import Chem
-from rdkit.Chem import PandasTools
+from rdkit.Chem import PandasTools, Draw
 
 from inference import (read_fragment_library, process_fragment_library, extract_pockets,
                        dock_fragments, generate_linkers, select_fragment_pairs)
 from app import static, fn, db
 
 
-gr.set_static_paths(paths=["data/", "results/"])
+gr.set_static_paths(paths=["data/", "results/", "app/"])
 job_db = db.init_job_db()
 
-FRAG_LIBS = {
+FRAG_LIBS = {'': None} | {
     lib_path.stem.replace('_', ' '): str(lib_path) for lib_path in Path('data/fragment_libraries').glob('*')
 }
 
@@ -48,20 +49,14 @@ POCKET_EXTRACT_OPTS = {
 }
 
 
-# TODO import from inference
-def process_drug_library_upload(library_upload):
-    if library_upload.endswith('.csv'):
-        df = pd.read_csv(library_upload)
-    elif library_upload.endswith('.sdf'):
-        df = PandasTools.LoadSDF(
-            library_upload,
-            smilesName='X1', molColName='mol',
-        )
-    else:
-        raise gr.Error('Current supported fragment library formats only include CSV and SDF files.')
-    fn.validate_columns(df, ['X1'])
-    return df
+def gr_error_wrapper(func):
+    def wrapper(*args, **kwargs):
+        try:
+            return func(*args, **kwargs)
+        except Exception as e:
+            raise gr.Error(str(e))
 
+    return wrapper
 
 def query_job_status(job_id):
     gr.Info('Start querying the job database...')
@@ -69,10 +64,10 @@ def query_job_status(job_id):
     retry = 0
     while not stop:
         try:
-            sleep(5)
             job = job_db.job_lookup(job_id)
             if job:
                 if job['status'] == "RUNNING":
+                    sleep(5)
                     yield {
                         pred_lookup_status: f'''
 Your  job (ID: **{job['id']}**) started at **{job['start_time']}** and is **RUNNING...**
@@ -86,7 +81,7 @@ using the job id. You will also receive an email notification once the job is do
                     }
                 if job['status'] == "COMPLETED":
                     stop = True
-                    msg = f"Your GenFBDD job (ID: {job['id']}) has been **COMPLETED**"
+                    msg = f"Your GenFBDD job (ID: {job['id']}) has been COMPLETED"
                     msg += f" at {job['end_time']}" if job.get('end_time') else ""
                     msg += f" and the results will expire by {job['expiry_time']}." if job.get('expiry_time') else "."
                     msg += f' Redirecting to the Results page...'
@@ -112,13 +107,14 @@ using the job id. You will also receive an email notification once the job is do
                         tabs: gr.Tabs(selected='job'),
                     }
             else:
-                stop = (retry > 3)
+                stop = (retry > 2)
                 if not stop:
                     msg = f'Job ID {job_id} not found. Retrying... ({retry})'
                 else:
                     msg = f'Job ID {job_id} not found after {retry} retries. Please double-check the job ID.'
                 gr.Info(msg)
                 retry += 1
+                sleep(5)
                 yield {
                     pred_lookup_status: msg,
                     pred_lookup_btn: gr.Button(visible=True),
@@ -177,7 +173,7 @@ def job_validate(
     job_id = str(uuid.uuid4())
     job_info = {
         'id': job_id,
-        'status': 'RUNNING',
+        'status': 'QUEUED',
         'fragment_library_file': frag_file,
         'protein_structure_file': prot_file,
         'pocket_extraction_method': pocket_extraction_method,
@@ -200,10 +196,10 @@ def dock_link(
     linker_frag_dist, linker_strategy, linker_n_mols, linker_size, linker_steps,
     job_info
 ):
+    update_info = {}
     job_id = job_info['id']
     pocket_extract_method = job_info['pocket_extraction_method']
     pocket_path_dict = job_info['protein_pocket_files']
-    update_info = {}
 
     config = OmegaConf.load('configs/gen_fbdd_v1.yaml')
     device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
@@ -213,6 +209,11 @@ def dock_link(
     frag_lib['X2'] = prot
     frag_lib['ID2'] = Path(prot).stem
 
+    job_db.job_update(
+        job_id=job_id,
+        update_info={'status': 'RUNNING'},
+    )
+
     try:
         docking_df = dock_fragments(
             df=frag_lib, out_dir=out_dir,
@@ -230,7 +231,8 @@ def dock_link(
             temp_sigma_data_tr=config.temp_sigma_data_tr,
             temp_sigma_data_rot=config.temp_sigma_data_rot,
             temp_sigma_data_tor=config.temp_sigma_data_tor,
-            save_docking=pocket_extract_method == 'clustering', device=device,
+            save_docking=(pocket_extract_method == 'clustering'),
+            device=device,
         )
 
         linking_df = select_fragment_pairs(
@@ -290,7 +292,6 @@ def dock_link(
         )
 
 
-
 def get_session_state(request: gr.Request):
     return request
 
@@ -299,7 +300,7 @@ THEME = gr.themes.Base(
     spacing_size="sm", text_size='md', font=gr.themes.GoogleFont("Roboto"),
     primary_hue='emerald', secondary_hue='emerald', neutral_hue='slate',
 ).set(
-    body_background_fill='*primary_50'
+    # body_background_fill='*primary_50'
     # background_fill_primary='#eef3f9',
     # background_fill_secondary='white',
     # checkbox_label_background_fill='#eef3f9',
@@ -327,7 +328,7 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
 
     # script_init_frame = gr.HTML(static.PROTEIN_VIEW_IFRAME)
     with gr.Tabs() as tabs:
-        with gr.Tab(label='Home', id='home'):
+        with gr.Tab(label='Start', id='start'):
             gr.Markdown('''
                 # GenFBDD - A Fragment-Based Drug Design Protocol Based on SOTA Molecular Generative Models
                 
@@ -342,7 +343,7 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                     frag_lib_dropdown = gr.Dropdown(
                         label='Select a Preset Fragment Library',
                         choices=list(FRAG_LIBS.keys()),
-                        value=None,
+                        value='',
                     )
                     # with gr.Row():
                     #     gr.File(label='Example SDF fragment library',
@@ -350,18 +351,20 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                     #     gr.File(label='Example CSV fragment library',
                     #             value='data/examples/fragment_library.csv', interactive=False)
                     frag_lib_upload_btn = gr.UploadButton(
-                        label='OR Upload Your Own Library', variant='primary'
+                        label='OR Upload Your Own Library', variant='primary', interactive=True,
                     )
 
                     frag_lib_file = gr.File(
-                        label='Fragment Library File (Original)', file_count='single', interactive=False, visible=False
+                        value=None, label='Fragment Library File (Original)',
+                        file_count='single', file_types=['.sdf', '.csv'],
+                        interactive=False, visible=False
                     )
-                    frag_lib_orig_df = gr.State(value=pd.DataFrame())
-                    frag_lib_mod_df = gr.State(value=pd.DataFrame())
+                    frag_lib_orig_df = gr.State(value=pd.DataFrame(columns=['X1', 'ID1', 'mol']))
+                    frag_lib_mod_df = gr.State(value=pd.DataFrame(columns=['X1', 'ID1', 'mol']))
                     # TODO: Tabulator with gr.HTML() for fragment library preview
                     frag_lib_view = gr.DataFrame(
+                        value=pd.DataFrame(columns=['X1', 'ID1']), elem_id='frag_lib_view',
                         visible=True, interactive=False,
-                        elem_id='frag_lib_view',
                     )
 
                     with gr.Group():
@@ -375,7 +378,9 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                             value=['Dehalogenate Fragments', 'Discard Inorganic Fragments'],
                             interactive=True,
                         )
-                        frag_lib_process_btn = gr.Button(value='Process Fragments', variant='primary')
+                        frag_lib_process_btn = gr.Button(
+                            value='Process Fragments', variant='primary', interactive=True,
+                        )
                     # Fragment library preview
 
                 with gr.Column(variant='panel'):
@@ -394,22 +399,25 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                         )
                         prot_query_input = gr.Textbox(
                             show_label=False, placeholder='Enter the protein query here',
-                            scale=3,
+                            scale=3, interactive=True
                         )
 
                     with gr.Row():
-                        prot_query_btn = gr.Button(value='Query', variant='primary', scale=1)
+                        prot_query_btn = gr.Button(
+                            value='Query', variant='primary',
+                            scale=1, interactive=True
+                        )
                         prot_upload_btn = gr.UploadButton(
                             label='OR Upload Your PDB/FASTA File', variant='primary',
                             file_types=['.pdb', '.fasta'],
-                            scale=2
+                            scale=2,  interactive=True,
                         )
 
                     input_prot_file = gr.File(
-                        label='Protein Structure File (Original)', file_count='single',
-                        interactive=False, visible=False
+                        value=None, label='Protein Structure File (Original)',
+                        interactive=False, visible=False, file_count='single',
                     )
-                    input_prot_view = gr.HTML('<div id="input_protein_view" class="mol-container"></div>')
+                    input_prot_view = gr.HTML(value='<div id="input_protein_view" class="mol-container"></div>')
 
                     with gr.Group():
                         pocket_extract_dropdown = gr.Dropdown(
@@ -422,12 +430,14 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                         selected_pocket = gr.Textbox(visible=False)
                         selected_ligand = gr.Textbox(visible=False)
                         pocket_files = gr.Files(visible=False)
-                        pocket_extract_btn = gr.Button(value='Extract Pocket', variant='primary')
+                        pocket_extract_btn = gr.Button(
+                            value='Extract Pocket', variant='primary', interactive=True
+                        )
                         # Target protein preview
             with gr.Row():
                 with gr.Column(variant='panel'):
                     gr.Markdown('## Dock Phase Settings')
-                    n_confs_per_frag = gr.Slider(
+                    dock_n_poses = gr.Slider(
                         value=5, minimum=1, maximum=20, step=1,
                         label="Number of conformers to generate per fragment",
                         interactive=True
@@ -450,7 +460,7 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                         )
                 with gr.Column(variant='panel'):
                     gr.Markdown('## Link Phase Settings')
-                    frag_conf_combo_strategy = gr.Radio(
+                    link_frag_pose_strategy = gr.Radio(
                         label='Select a Fragment-Conformer Linking Strategy',
                         choices=[
                             'Link Pairs of Fragment-Conformers Contacting the Pocket',
@@ -458,12 +468,12 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                         ],
                         value='Link Pairs of Fragment-Conformers Contacting the Pocket',
                     )
-                    frag_dist_range_slider = RangeSlider(
+                    link_frag_dist_range = RangeSlider(
                         value=[2, 8], minimum=1, maximum=10, step=1,
                         label="Fragment-Conformer Distance Range (Å) Eligible for Linking",
                         interactive=True
                     )
-                    n_mols_per_combo_slider = gr.Slider(
+                    link_n_mols = gr.Slider(
                         value=10, minimum=1, maximum=20, step=1,
                         label="Number of molecules to generate per fragment conformer combination",
                         interactive=True
@@ -474,13 +484,13 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                             choices=['DiffLinker'],
                             interactive=True,
                         )
-                        linker_size_slider = gr.Slider(
+                        link_linker_size = gr.Slider(
                             minimum=0, maximum=20, step=1,
                             label="Linker Size",
                             info="0: automatically predicted; >=1: fixed size",
                             interactive=True
                         )
-                        linker_steps_slider = gr.Slider(
+                        link_steps = gr.Slider(
                             minimum=100, maximum=500, step=10,
                             label="Number of Denoising Steps for Generating Linkers",
                             interactive=True
@@ -489,14 +499,16 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                 email_input =gr.Textbox(
                     label='Email Address (Optional)',
                     info="Your email address will be used to notify you of the status of your job. "
-                         "If you cannot receive the email, please check your spam/junk folder."
+                         "If you cannot receive the email, please check your spam/junk folder.",
+                    type='email'
                 )
                 with gr.Column():
-                    clr_btn = gr.ClearButton(
-                        value='Reset Inputs',
-                        components=[]
+                    start_clr_btn = gr.ClearButton(
+                        value='Reset Inputs', interactive=True,
+                    )
+                    run_btn = gr.Button(
+                        value='Run GenFBDD', variant='primary', interactive=True,
                     )
-                    run_btn = gr.Button(value='Run GenFBDD', variant='primary')
         with gr.Tab(label='Results', id='result'):
             # Results
             result_state = gr.State(value={})
@@ -509,14 +521,14 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                     filters = gr.CheckboxGroup(list(fn.FILTER_MAP.keys()), label='Compound Filters')
                 with gr.Row():
                     prop_clr_btn = gr.ClearButton(value='Clear Properties', interactive=False)
-                    prop_calc_btn = gr.Button(value='Calculate Properties', interactive=False)
+                    prop_calc_btn = gr.Button(value='Calculate Properties', interactive=False, variant='primary')
 
-            with gr.Row():
-                result_table_view = gr.HTML('<div id="result_view" class="fancy-table"></div>')
-                with gr.Column():
-                    result_prot_view = gr.HTML('<div id="result_protein_view" class="mol-container"></div>')
-                    result_file_btn = gr.Button(value='Create Result File', visible=False)
-                    result_download_file = gr.File(label='Download Result File', visible=False)
+                with gr.Row():
+                    result_table_view = gr.HTML('<div id="result_view" class="fancy-table"></div>')
+                    with gr.Column():
+                        result_prot_view = gr.HTML('<div id="result_protein_view" class="mol-container"></div>')
+                        result_file_btn = gr.Button(value='Create Result File', visible=False, variant='primary')
+                        result_download_file = gr.File(label='Download Result File', visible=False)
 
         with gr.Tab(label='Job Status', id='job'):
             gr.Markdown('''            
@@ -540,10 +552,10 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
                     pred_lookup_status = gr.Markdown()
 
     # Event handlers
-    ## Home tab
+    ## Start tab
     ### Fragment Library
-    frag_lib_dropdown.change(
-        fn=lambda lib: gr.File(FRAG_LIBS[lib], visible=True),
+    frag_lib_dropdown_change = frag_lib_dropdown.change(
+        fn=lambda lib: gr.File(FRAG_LIBS[lib], visible=bool(lib)),
         inputs=[frag_lib_dropdown],
         outputs=[frag_lib_file],
     )
@@ -554,8 +566,8 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
     )
 
     # Changing the file updates the original df, the modified df, and the view
-    frag_lib_file.change(
-        fn=read_fragment_library,
+    frag_lib_file_change = frag_lib_file.change(
+        fn=gr_error_wrapper(read_fragment_library),
         inputs=[frag_lib_file],
         outputs=[frag_lib_orig_df],
     ).success(
@@ -586,7 +598,7 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
             }
         elif filepath.suffix == '.fasta':
             seq = next(SeqIO.parse(file, 'fasta')).seq
-            filepath = fn.pdb_query(seq, method='FASTA Sequence')
+            filepath = pdb_query(seq, method='FASTA Sequence')
             return {
                 input_prot_file: gr.File(str(filepath), visible=True),
                 prot_query_input: seq,
@@ -611,17 +623,45 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
         outputs=[input_prot_file, prot_query_dropdown, prot_query_input],
     )
 
+    def pdb_query(query, method):
+        """Downloads protein structure data or searches FASTA sequence."""
+        gr.Info(f'Querying protein by {method}...')
+        try:
+            if method == 'PDB ID':
+                url = f"https://files.rcsb.org/download/{query}.pdb"
+                file = fn.download_file(url)
+            elif method == 'UniProt ID':
+                pdb_ids = fn.uniprot_to_pdb(query)
+                if pdb_ids:
+                    # Download the first associated PDB file
+                    file = fn.download_file(f"https://files.rcsb.org/download/{pdb_ids[0]}.pdb")
+                else:
+                    raise ValueError(f"No PDB IDs found for UniProt ID: {query}")
+            elif method == 'FASTA Sequence':
+                pdb_ids = fn.fasta_to_pdb(query)
+                if pdb_ids:
+                    # Download the first associated PDB file
+                    file = fn.download_file(f"https://files.rcsb.org/download/{pdb_ids[0]}.pdb")
+                else:
+                    raise ValueError("No PDB IDs found for the provided FASTA sequence.")
+            else:
+                raise ValueError(f"Unsupported method: {method}")
+            return {input_prot_file: gr.File(str(file), visible=True)}
+        except Exception as e:
+            gr.Error(f"Query error: {str(e)}")
+
     prot_query_btn.click(
-        fn=fn.pdb_query,
+        fn=pdb_query,
         inputs=[prot_query_input, prot_query_dropdown],
         outputs=[input_prot_file],
     )
 
-    input_prot_file.change(
-        fn=lambda x, y: [gr.File(str(x), visible=True)],
+    input_prot_file_change = input_prot_file.change(
+        fn=lambda: gr.Info('Rendering 3DMol view...'),
+    ).then(
+        fn=lambda x, y: gr.Info('3DMol view rendered.'),
         inputs=[input_prot_file, input_prot_view],
-        outputs=[input_prot_file],
-        js=static.CREATE_MOL_VIEW,
+        js=static.CREATE_INPUT_MOL_VIEW,
     )
 
     #### Pocket Extraction
@@ -652,7 +692,7 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
         outputs=[pocket_files, selected_ligand, selected_pocket],
     ).success(
         fn=lambda x, y: gr.Info('Pocket extraction completed.'),
-        js=static.UPDATE_PROT_VIEW,
+        js=static.UPDATE_MOL_VIEW,
         inputs=[pocket_files, input_prot_view],
     )
 
@@ -676,18 +716,40 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
         fn=dock_link,
         inputs=[
             frag_lib_mod_df, input_prot_file,
-            dock_steps, n_confs_per_frag, dock_confidence_cutoff,
-            frag_dist_range_slider, frag_conf_combo_strategy,n_mols_per_combo_slider,
-            linker_size_slider, linker_steps_slider,
+            dock_steps, dock_n_poses, dock_confidence_cutoff,
+            link_frag_dist_range, link_frag_pose_strategy, link_n_mols,
+            link_linker_size, link_steps,
             run_state
         ],
         outputs=[result_state, run_state],
         concurrency_limit=1, concurrency_id="gpu_queue"
     )
 
+    start_reset_components=[
+        frag_lib_dropdown, frag_lib_process_opts,
+        prot_query_dropdown, prot_query_input, input_prot_file,
+        dock_n_poses, dock_confidence_cutoff, dock_model, dock_steps,
+        link_frag_pose_strategy, link_n_mols, link_frag_dist_range, link_model, link_linker_size, link_steps,
+        email_input
+    ]
+
+    def reset_components(components):
+        return [
+            type(component)(
+                value=component.value,
+                visible=component.visible,
+            ) for component in components
+        ]
+
+    start_clr_btn.click(
+        fn=lambda: reset_components(start_reset_components),
+        outputs=start_reset_components,
+        show_progress='hidden',
+    )
+
     ### Job Status
     user_job_lookup = pred_lookup_btn.click(
-        lambda: '<div class="loader"></ div>',
+        fn=lambda: '<div class="loader"></ div>',
         outputs=loader_html,
     ).success(
         fn=query_job_status,
@@ -734,29 +796,44 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
         protein_structure_file = Path(result_info['protein_structure_file'])
         if result_type == 'docking':
             result_df = pd.read_csv(result_dir / 'docking_summary.csv')
-            result_df['Compound'] = result_df['X1'].apply(Chem.MolFromSmiles)
+            result_df['mol'] = result_df['X1'].apply(Chem.MolFromSmiles)
         elif result_type == 'linking':
             result_df = pd.read_csv(result_dir / 'linking_summary.csv')
             result_df = result_df[~result_df['X1^'].str.contains('.', regex=False)]
-            result_df['Compound'] = result_df['X1^'].apply(Chem.MolFromSmiles)
-            result_df.dropna(subset=['Compound'], inplace=True)
+            result_df['mol'] = result_df['X1^'].apply(Chem.MolFromSmiles)
+            result_df.dropna(subset=['mol'], inplace=True)
         else:
             raise gr.Error('Invalid result type')
+
+        draw_opts = Draw.rdMolDraw2D.MolDrawOptions()
+        draw_opts.clearBackground = False
+        draw_opts.bondLineWidth = 0.5
+        draw_opts.explicitMethyl = True
+        draw_opts.singleColourWedgeBonds = True
+        draw_opts.useCDKAtomPalette()
+        PandasTools.drawOptions = draw_opts
+        PandasTools.molSize = (90, 56)
+        PandasTools.molRepresentation = 'svg'
+        # Convert to URI-formatted inline SVG
+        result_df['Compound'] = result_df['mol'].apply(PandasTools.PrintAsImageString).apply(urllib.parse.quote)
+
         return {
             result_table_orig_df: result_df,
             result_table_mod_df: result_df.copy(deep=True),
             result_protein_file: str(protein_structure_file),
+            result_download_file: gr.File('', visible=False),
         }
 
     def update_table(orig_df, score_list, filter_list, progress=gr.Progress(track_tqdm=True)):
+        gr.Info('Calculating properties...')
         mod_df = orig_df.copy()
         try:
             for filter_name in filter_list:
-                mod_df[filter_name] = mod_df['Compound'].parallel_apply(
+                mod_df[filter_name] = mod_df['mol'].apply(
                     lambda x: fn.FILTER_MAP[filter_name](x) if not pd.isna(x) else x)
 
             for score_name in score_list:
-                mod_df[score_name] = mod_df['Compound'].parallel_apply(
+                mod_df[score_name] = mod_df['mol'].apply(
                     lambda x: fn.SCORE_MAP[score_name](x) if not pd.isna(x) else x)
 
             return {result_table_mod_df: mod_df}
@@ -772,45 +849,47 @@ with gr.Blocks(theme=THEME, title='GenFBDD', css=static.CSS, delete_cache=(3600,
     )
 
     result_protein_file.change(
-        fn=lambda x, y: str(x),
-        js=static.CREATE_MOL_VIEW,
+        fn=lambda x, y: gr.Info('Rendering result table and 3DMol view...'),
+        js=static.CREATE_OUTPUT_MOL_VIEW,
         inputs=[result_protein_file, result_prot_view],
-        outputs=[result_protein_file],
     )
     result_table_mod_df.change(
         fn=fn.create_result_table_html,
-        inputs=[result_table_mod_df],
+        inputs=[result_table_mod_df, result_state],
         outputs=[result_table_view]
     ).success(
-        fn=lambda x: gr.Button(visible=True),
+        fn=lambda x: [gr.Button(visible=True), gr.Button(interactive=True), gr.Button(interactive=True)],
         inputs=[result_file_btn],
-        outputs=[result_file_btn],
+        outputs=[result_file_btn, prop_calc_btn, prop_clr_btn],
     )
     prop_calc_btn.click(
         fn=update_table,
         inputs=[result_table_orig_df, scores, filters],
         outputs=[result_table_mod_df],
-        show_progress='full',
     )
     prop_clr_btn.click(
-        fn=lambda orig_df: [orig_df, [], [], gr.Button(visible=False), gr.File(visible=False)],
+        fn=lambda orig_df: [orig_df, [], [], gr.File(visible=False)],
         inputs=[result_table_orig_df],
-        outputs=[result_table_mod_df, scores, filters, result_file_btn, result_download_file],
-        show_progress='full',
+        outputs=[result_table_mod_df, scores, filters, result_download_file],
     )
 
-
     def generate_result_zip(result_info, compound_mod_df, protein_file):
-        folder_path = Path(result_info['output_dir'])
-        zip_path = folder_path.with_suffix('.zip')
-        compound_mod_df.to_csv(folder_path / f'{result_info["type"]}_summary.csv', index=False)
+        result_path = Path(result_info['output_dir'])
+        zip_path = result_path.with_suffix('.zip')
+        cols_to_drop = ['mol', 'Compound', 'protein_path']
+        compound_mod_df.drop(columns=[col for col in cols_to_drop if col in compound_mod_df.columns], inplace=True)
+        compound_mod_df.to_csv(result_path / f'{result_info["type"]}_summary.csv', index=False)
+
         with zipfile.ZipFile(zip_path, 'w') as zip_file:
-            for file in folder_path.iterdir():
-                zip_file.write(file, arcname=file.name)
-            # Copy protein structure file to zip
+            for file in result_path.rglob('*'):
+                if file.is_file():  # Skip directories
+                    archive_path = file.relative_to(result_path)
+                    zip_file.write(file, arcname=archive_path)
             zip_file.write(Path(protein_file), arcname=Path(protein_file).name)
+
         return gr.File(str(zip_path), visible=True)
 
+
     result_file_btn.click(
         fn=generate_result_zip,
         inputs=[result_state, result_table_mod_df, result_protein_file],

app/static.py

@@ -143,640 +143,50 @@ footer {
 .mol-container {
     width: 100%;
     aspect-ratio: 1.618 / 1;
-    position: relative;
-    box-sizing: border-box;
 }
-"""
-
-IFRAME_TEMPLATE = """
-<iframe style="width: 100%; aspect-ratio: 1.618 / 1;" name="result" allow="display-capture; encrypted-media;" 
-sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups 
-allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" 
-allowpaymentrequest="" frameborder="0" srcdoc='{html}'></iframe>
-"""
-
-PROTEIN_VIEW_IFRAME = IFRAME_TEMPLATE.format(html="""
-<!DOCTYPE html>
-<html>
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
-    <script src="https://3Dmol.org/build/3Dmol.js"></script>
-    <style>
-        html, body {
-            height: 100%;
-            margin: 0;
-            overflow: hidden;
-        }
-        .mol-container {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            box-sizing: border-box;
-        }
-        .mol-container select {
-            background-image: none;
-        }
-    </style>
-</head>
-<body>
-<div id="container" class="mol-container"></div>
-<script>
-    var viewer = null;
-    $(document).ready(function() {
-        let element = $("#container");
-        let config = { backgroundColor: "white" };
-        viewer = $3Dmol.createViewer(element, config);
-        let ligandStyle = { stick: { colorscheme: "greenCarbon" } };
-        let proteinStyle = { cartoon: { colorscheme: "Jmol" } };
-        let pocketStyle = { sphere: { colorscheme: "blueCarbon", opacity: 0.618 } };
-    });
-</script>
-</body>
-</html>
-""")
-
-COMPLEX_RENDERING_TEMPLATE = """
-<!DOCTYPE html>
-<html>
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-    <script src="https://3Dmol.org/build/3Dmol.js"></script>
-    <style>
-        html, body {{
-            height: 100%;
-            margin: 0;
-            overflow: hidden;
-        }}
-        .mol-container {{
-            width: 100%;
-            height: 100%;
-            position: relative;
-            box-sizing: border-box;
-        }}
-        .mol-container select {{
-            background-image: none;
-        }}
-    </style>
-</head>
-<body>
-<div id="container" class="mol-container"></div>
-<script>
-    var viewer = null;
-    $(document).ready(function() {{
-        let element = $("#container");
-        let config = {{ backgroundColor: "white" }};
-        let viewer = $3Dmol.createViewer(element, config);
-        let ligandStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }};
-        let proteinStyle = {{ cartoon: {{ colorscheme: "Jmol" }} }};
-        let pocketStyle = {{ sphere: {{ colorscheme: "blueCarbon", opacity: 0.618 }} }};
-
-        {viewer_models}
-        
-        viewer.zoomTo({{ "model": 0 }});
-        viewer.render();
-    }});
-</script>
-</body>
-</html>
-"""
-
-
-FRAGMENTS_RENDERING_TEMPLATE = """<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select{{
-                background-image:None;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <script>
-        $(document).ready(function() {{
-            let element = $("#container");
-            let config = {{ backgroundColor: "white" }};
-            let viewer = $3Dmol.createViewer(element, config);
-            let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }};
-            viewer.addModel(`{molecule}`, "{fmt}");
-            viewer.getModel(0).setStyle(defaultStyle);
-            
-            viewer.getModel(0).setClickable(
-                {{}}, 
-                true,
-                function (_atom, _viewer, _event, _container) {{
-                    if (!_atom.isClicked) {{
-                        _atom.isClicked = true;
-                        _viewer.addStyle(
-                            {{"serial": _atom.serial, "model": 0}}, 
-                            {{"sphere": {{"color": "magenta", "radius": 0.4}} }}
-                        );
-                        window.parent.postMessage({{
-                            name: "atom_selection",
-                            data: {{"atom": _atom.serial, "add": true}} 
-                        }}, "*");
-                    }} else {{
-                        delete _atom.isClicked;
-                        _viewer.setStyle({{"serial": _atom.serial, "model": 0}}, defaultStyle);
-                        window.parent.postMessage({{
-                            name: "atom_selection",
-                            data: {{"atom": _atom.serial, "add": false}} 
-                        }}, "*");
-                    }}
-                    _viewer.render();
-                }}
-            );
-            
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-TARGET_RENDERING_TEMPLATE = """<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select {{
-                background-image: none;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <script>
-        $(document).ready(function() {{
-            let element = $("#container");
-            let config = {{ backgroundColor: "white" }};
-            let viewer = $3Dmol.createViewer(element, config);
-            let proteinStyle = {{ cartoon: {{ colorscheme: "ssPyMOL" }} }};
-            viewer.addModel(`{molecule}`, "{fmt}");
-            viewer.getModel(0).setStyle(proteinStyle);
-
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-COMPLEX_RENDERING_TEMPLATE_OLD = """<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select {{
-                background-image: none;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <script>
-        $(document).ready(function() {{
-            let element = $("#container");
-            let config = {{ backgroundColor: "white" }};
-            let viewer = $3Dmol.createViewer(element, config);
-            let ligandStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }};
-            let proteinStyle = {{ cartoon: {{ colorscheme: "Jmol" }} }};
-            let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }}; // Store default style
-            let selectedLigand = null; // Keep track of currently selected ligand
-
-            viewer.setStyle({{ hetflag: false }}, proteinStyle);
-            viewer.setStyle({{ hetflag: true }}, ligandStyle);
-            viewer.addModel(`{complex}`, "{fmt}");
-
-            viewer.getModel(0).setClickable(
-                {{ hetflag: true, byres: true }},
-                true,
-                function (_atom, _viewer, _event, _container) {{
-                    let currentLigand = {{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }};
-
-                    if (selectedLigand === currentLigand) {{
-                        // Deselect ligand
-                        selectedLigand = null;
-                        _viewer.setStyle({{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }}, defaultStyle);
-                        console.log("Deselected Residue:", currentLigand);
-                        window.parent.postMessage({{
-                            name: "ligand_selection",
-                            data: {{ residue: currentLigand, add: false }}
-                        }}, "*");
-                    }} else {{
-                        // Select ligand and deselect previous
-                        if (selectedLigand) {{
-                            _viewer.setStyle({{ resn: selectedLigand.resn, chain: selectedLigand.chain, resi: selectedLigand.resi }}, defaultStyle);
-                        }}
-                        selectedLigand = currentLigand;
-                        _viewer.setStyle({{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }}, {{ stick: {{ color: "red", radius: 0.4}} }});
-                        console.log("Selected Residue:", currentLigand);
-                        window.parent.postMessage({{
-                            name: "ligand_selection",
-                            data: {{ residue: currentLigand, add: true }}
-                        }}, "*");
-                    }}
-                    _viewer.render();
-                }}
-            );
-
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-COMPLEX_WITH_POCKETS_RENDERING_TEMPLATE = """<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select {{
-                background-image: none;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <script>
-        $(document).ready(function() {{
-            let element = $("#container");
-            let config = {{ backgroundColor: "white" }};
-            let viewer = $3Dmol.createViewer(element, config);
-            let ligandStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }};
-            let proteinStyle = {{ cartoon: {{ colorscheme: "Jmol" }} }};
-            let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }}; // Store default style
-            let selectedLigand = null; // Keep track of currently selected ligand
-
-            viewer.addModel(`{complex}`, "{fmt}");
-            viewer.setStyle({{ hetflag: false }}, proteinStyle);
-            viewer.setStyle({{ hetflag: true }}, ligandStyle);
-
-            viewer.getModel(0).setClickable(
-                {{ hetflag: true, byres: true }},
-                true,
-                function (_atom, _viewer, _event, _container) {{
-                    let currentLigand = {{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }};
-
-                    if (selectedLigand === currentLigand) {{
-                        // Deselect ligand
-                        selectedLigand = null;
-                        _viewer.setStyle({{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }}, defaultStyle);
-                        console.log("Deselected Residue:", currentLigand);
-                        window.parent.postMessage({{
-                            name: "ligand_selection",
-                            data: {{ residue: currentLigand, add: false }}
-                        }}, "*");
-                    }} else {{
-                        // Select ligand and deselect previous
-                        if (selectedLigand) {{
-                            _viewer.setStyle({{ resn: selectedLigand.resn, chain: selectedLigand.chain, resi: selectedLigand.resi }}, defaultStyle);
-                        }}
-                        selectedLigand = currentLigand;
-                        _viewer.setStyle({{ resn: _atom.resn, chain: _atom.chain, resi: _atom.resi }}, {{ stick: {{ color: "red", radius: 0.4}} }});
-                        console.log("Selected Residue:", currentLigand);
-                        window.parent.postMessage({{
-                            name: "ligand_selection",
-                            data: {{ residue: currentLigand, add: true }}
-                        }}, "*");
-                    }}
-                    _viewer.render();
-                }}
-            );
-            // Add pockets
-            viewer.addModel
-
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-
-FRAGMENTS_AND_TARGET_RENDERING_TEMPLATE = """
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select{{
-                background-image:None;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <script>
-        $(document).ready(function() {{
-            let element = $("#container");
-            let config = {{ backgroundColor: "white" }};
-            let viewer = $3Dmol.createViewer(element, config);
-            let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }};
-            let proteinStyle = {{ cartoon: {{ colorscheme: "ssPyMOL" }} }};
-            
-            viewer.addModel(`{molecule}`, "{fmt}");
-            viewer.getModel(0).setStyle(defaultStyle);
-            viewer.getModel(0).setClickable(
-                {{}}, 
-                true,
-                function (_atom, _viewer, _event, _container) {{
-                    if (!_atom.isClicked) {{
-                        _atom.isClicked = true;
-                        _viewer.addStyle(
-                            {{"serial": _atom.serial, "model": 0}}, 
-                            {{"sphere": {{"color": "magenta", "radius": 0.4}} }}
-                        );
-                        window.parent.postMessage({{
-                            name: "atom_selection",
-                            data: {{"atom": _atom.serial, "add": true}} 
-                        }}, "*");
-                    }} else {{
-                        delete _atom.isClicked;
-                        _viewer.setStyle({{"serial": _atom.serial, "model": 0}}, defaultStyle);
-                        window.parent.postMessage({{
-                            name: "atom_selection",
-                            data: {{"atom": _atom.serial, "add": false}} 
-                        }}, "*");
-                    }}
-                    _viewer.render();
-                }}
-            );
-            
-            viewer.addModel(`{target}`, "{target_fmt}");
-            viewer.getModel(1).setStyle(proteinStyle);
-
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-SAMPLES_RENDERING_TEMPLATE = """<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select{{
-                background-image:None;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <br>
-    <button id="fragments">Input Fragments</button>
-    <button id="molecule">Output Molecule</button> 
-    <script>
-        let element = $("#container");
-        let config = {{ backgroundColor: "white" }};
-        let viewer = $3Dmol.createViewer( element, config );
-        
-        $(document).ready(function() {{
-            viewer.addModel(`{fragments}`, "{fragments_fmt}")
-            viewer.getModel().setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }})
-            viewer.getModel().hide();
-            viewer.addModel(`{molecule}`, "{molecule_fmt}")
-            viewer.getModel().setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }})
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-        $("#fragments").click(function() {{
-            viewer.getModel(0).show();
-            viewer.getModel(1).hide();
-            viewer.render();
-        }});
-        $("#molecule").click(function() {{
-            viewer.getModel(1).show();
-            viewer.getModel(0).hide();
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
-
-SAMPLES_WITH_TARGET_RENDERING_TEMPLATE = """
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-        <script src="https://3Dmol.org/build/3Dmol.js"></script>
-        <style>
-            html, body {{
-                height: 100%;
-                margin: 0;
-                overflow: hidden;
-            }}
-            .mol-container {{
-                width: 100%;
-                height: 100%;
-                position: relative;
-                box-sizing: border-box;
-            }}
-            .mol-container select{{
-                background-image:None;
-            }}
-        </style>
-    </head>
-
-    <body>
-    <div id="container" class="mol-container"></div>
-    <br>
-    <button id="fragments">Input Fragments</button>
-    <button id="molecule">Output Molecule</button>
-    <button id="show-target">Show Target</button>
-    <button id="hide-target">Hide Target</button> 
-    <script>
-        let element = $("#container");
-        let config = {{ backgroundColor: "white" }};
-        let viewer = $3Dmol.createViewer( element, config );
-
-        $(document).ready(function() {{
-            viewer.addModel(`{fragments}`, "{fragments_fmt}")
-            viewer.getModel(0).setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }})
-            viewer.getModel(0).hide();
-            
-            viewer.addModel(`{molecule}`, "{molecule_fmt}")
-            viewer.getModel(1).setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }})
-            
-            viewer.addModel(`{target}`, "{target_fmt}")
-            viewer.getModel(2).setStyle({{ cartoon: {{ colorscheme: "ssPyMOL" }} }})
-            
-            viewer.zoomTo({{ "model": 0 }});
-            viewer.zoom(0.7);
-            viewer.render();
-        }});
-        $("#fragments").click(function() {{
-            viewer.getModel(0).show();
-            viewer.getModel(1).hide();
-            viewer.render();
-        }});
-        $("#molecule").click(function() {{
-            viewer.getModel(1).show();
-            viewer.getModel(0).hide();
-            viewer.render();
-        }});
-        $("#show-target").click(function() {{
-            viewer.getModel(2).show();
-            viewer.render();
-        }});
-        $("#hide-target").click(function() {{
-            viewer.getModel(2).hide();
-            viewer.render();
-        }});
-    </script>
-    </body>
-</html>
-"""
 
+.mol-container > canvas {
+    position: relative ! important;
+}
 
-INVALID_FORMAT_MSG = """
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <style>
-            body{{
-                font-family:sans-serif
-            }}
-        </style>
-    </head>
+.gr-btn-grp {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--layout-gap);
+    width: var(--size-full);
+    position: relative
+    border-radius: 0
+    border-radius: var(--container-radius);
+    background: var(--background-fill-secondary);
+    padding: var(--size-2)
+    align-items: stretch
+}
 
-    <body>
-        <h3>Invalid file format: {extension}</h3>
-        Allowed formats for the fragments file:
-        <ul>
-          <li>.pdb</li>
-          <li>.sdf</li>
-          <li>.mol</li>
-          <li>.mol2</li>
-        </ul>
-        
-        Allowed formats for the optional protein file:
-        <ul>
-          <li>.pdb</li>
-        </ul>
-    </body>
-</html>
+.gr-btn-grp > button {
+    flex: 1 1 0;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    transition: var(--button-transition);
+    padding: var(--size-0-5) var(--size-2);
+    text-align: center;
+    border: var(--button-border-width) solid var(--button-secondary-border-color);
+    background: var(--button-secondary-background-fill);
+    color: var(--button-secondary-text-color);
+    box-shadow: var(--button-secondary-shadow)
+    border-radius: var(--button-large-radius);
+    padding: calc(var(--button-large-padding) - 1px);
+    font-family: monospace;
+    font-weight: var(--button-large-text-weight);
+    font-size: calc(var(--button-large-text-size) - 1px);
+}
 """
 
-ERROR_FORMAT_MSG = """
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
-        <style>
-            body{{
-                font-family:sans-serif
-            }}
-        </style>
-    </head>
-
-    <body>
-        <h3>Error:</h3>
-        {message}
-    </body>
-</html>
+IFRAME_TEMPLATE = """
+<iframe style="width: 100%; aspect-ratio: {aspect_ratio}; overflow: visible; border: none;" scrolling="no"
+frameborder="0" allow="display-capture; encrypted-media;" 
+sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups 
+allow-top-navigation-by-user-activation allow-downloads" srcdoc='{srcdoc}'></iframe>
 """
 
 SETUP_JS = """
@@ -902,7 +312,7 @@ RETURN_ATOM_SELECTION_JS = """
 }
 """
 
-CREATE_MOL_VIEW = """
+CREATE_INPUT_MOL_VIEW = """
 (mol_file, view_html) => {
     try {
         let viewer;
@@ -915,20 +325,24 @@ CREATE_MOL_VIEW = """
         const element_id = idMatch[1];
         const element = document.getElementById(element_id);
 
-        // Get the file format
-        fmt = mol_file.path.split('.').pop();
-        $.get(mol_file.url, function(molContent) {
-            if (!element.querySelector('canvas')) {
-                viewer = $3Dmol.createViewer(element, viewerConfig);
-            } else {
-                viewer = element.querySelector('canvas')._3dmol_viewer;
-                viewer.clear();
-                selectedElements = {
-                    "atoms": [],
-                    "ligand": {name: null, resn: null, chain: null, resi: null},
-                    "pocket": {name: null, id: null}
-                }
+        if (!element.querySelector('canvas')) {
+            viewer = $3Dmol.createViewer(element, viewerConfig);
+        } else {
+            viewer = element.querySelector('canvas')._3dmol_viewer;
+            viewer.clear();
+            selectedElements = {
+                "atoms": [],
+                "ligand": {name: null, resn: null, chain: null, resi: null},
+                "pocket": {name: null, id: null}
             }
+        }
+
+        if (mol_file == null) {
+          return;
+        }
+
+        $.get(mol_file.url, function(molContent) {
+            fmt = mol_file.path.split('.').pop();
             model = viewer.addModel(molContent, fmt);
             model.setStyle({ hetflag: false }, proteinStyle);
             model.setStyle({ hetflag: true }, ligandStyle);
@@ -977,7 +391,7 @@ CREATE_MOL_VIEW = """
 }
 """
 
-UPDATE_PROT_VIEW = """
+UPDATE_MOL_VIEW = """
 (mol_files, view_html) => {
     try {
         let viewer;
@@ -1064,3 +478,80 @@ UPDATE_PROT_VIEW = """
 }
 """
 
+CREATE_OUTPUT_MOL_VIEW = """
+(mol_file, view_html) => {
+    try {
+        let viewer;
+        const idMatch = view_html.match(/id="(\w+)"/);
+        if (!idMatch || !idMatch[1]) {
+            console.error("Invalid view_html: No ID found.");
+            return;
+        }
+        const element_id = idMatch[1];
+        const element = document.getElementById(element_id);
+
+        fmt = mol_file.path.split('.').pop();
+        $.get(mol_file.url, function(molContent) {
+            if (!element.querySelector('canvas')) {
+                viewer = $3Dmol.createViewer(element, viewerConfig);
+            } else {
+                viewer = element.querySelector('canvas')._3dmol_viewer;
+                viewer.clear();
+            }
+            model = viewer.addModel(molContent, fmt);
+            model.setStyle({ hetflag: false }, proteinStyle);
+            model.setStyle({ hetflag: true }, ligandStyle);
+            viewer.zoomTo();
+            viewer.render();
+
+            const container = document.createElement("div");
+            container.classList.add("gr-btn-grp");
+
+            // Molecule Button
+            const toggleMoleculeButton = document.createElement("button");
+            toggleMoleculeButton.textContent = "Hide Generated Molecule";
+            let moleculeIsHidden = false;
+            toggleMoleculeButton.onclick = function() {
+                if (viewer.models.length === 2) {
+                    moleculeIsHidden = !moleculeIsHidden;
+                    viewer.addStyle({model: 1}, {stick: {hidden: moleculeIsHidden} });
+                    toggleMoleculeButton.textContent = moleculeIsHidden ? "Show Generated Molecule" : "Hide Generated Molecule";
+                    viewer.render();
+                }
+            };
+            container.appendChild(toggleMoleculeButton);
+
+            // Ligand Button
+            if (viewer.getAtomsFromSel({model: 0, hetflag : true}).length > 0) {
+                const toggleLigandButton = document.createElement("button");
+                toggleLigandButton.textContent = "Hide Co-Crystallized Ligand";
+                let ligandIsHidden = false;
+                toggleLigandButton.onclick = function() {
+                    ligandIsHidden = !ligandIsHidden;
+                    viewer.addStyle({model: 0, hetflag: true}, {stick: {hidden: ligandIsHidden} });
+                    toggleLigandButton.textContent = ligandIsHidden ? "Show Co-Crystallized Ligand" : "Hide Co-Crystallized Ligand";
+                    viewer.render();
+                };
+                container.appendChild(toggleLigandButton);
+            }
+
+            // Protein Button
+            const toggleProteinButton = document.createElement("button");
+            toggleProteinButton.textContent = "Hide Target Protein";
+            let proteinIsHidden = false;
+            toggleProteinButton.onclick = function() {
+                proteinIsHidden = !proteinIsHidden;
+                viewer.addStyle({model: 0, hetflag: false}, {cartoon: {hidden: proteinIsHidden} });
+                toggleProteinButton.textContent = proteinIsHidden ? "Show Target Protein" : "Hide Target Protein";
+                viewer.render();
+            };
+            container.appendChild(toggleProteinButton);
+            element.parentElement.appendChild(container);
+        }).fail(function(error) {
+            console.error("Error loading molecule:", error);
+        });
+    } catch (error) {
+        console.error("An error occurred:", error);
+    }
+}
+"""

app/static/medium-zoom.min.js

@@ -0,0 +1,2 @@
+/*! medium-zoom 1.1.0 | MIT License | https://github.com/francoischalifour/medium-zoom */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).mediumZoom=t()}(this,(function(){"use strict";var e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},t=function(e){return"IMG"===e.tagName},o=function(e){return e&&1===e.nodeType},n=function(e){return".svg"===(e.currentSrc||e.src).substr(-4).toLowerCase()},i=function(e){try{return Array.isArray(e)?e.filter(t):function(e){return NodeList.prototype.isPrototypeOf(e)}(e)?[].slice.call(e).filter(t):o(e)?[e].filter(t):"string"==typeof e?[].slice.call(document.querySelectorAll(e)).filter(t):[]}catch(e){throw new TypeError("The provided selector is invalid.\nExpects a CSS selector, a Node element, a NodeList or an array.\nSee: https://github.com/francoischalifour/medium-zoom")}},r=function(e){var t=document.createElement("div");return t.classList.add("medium-zoom-overlay"),t.style.background=e,t},d=function(e){var t=e.getBoundingClientRect(),o=t.top,n=t.left,i=t.width,r=t.height,d=e.cloneNode(),a=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,m=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0;return d.removeAttribute("id"),d.style.position="absolute",d.style.top=o+a+"px",d.style.left=n+m+"px",d.style.width=i+"px",d.style.height=r+"px",d.style.transform="",d},a=function(t,o){var n=e({bubbles:!1,cancelable:!1,detail:void 0},o);if("function"==typeof window.CustomEvent)return new CustomEvent(t,n);var i=document.createEvent("CustomEvent");return i.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),i};return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}(".medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--opened .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s cubic-bezier(.2,0,.2,1)!important}.medium-zoom-image--hidden{visibility:hidden}.medium-zoom-image--opened{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}"),function t(m){var l=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},c=window.Promise||function(e){function t(){}e(t,t)},u=function(e){var t=e.target;t!==N?-1!==x.indexOf(t)&&w({target:t}):E()},s=function(){if(!A&&k.original){var e=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0;Math.abs(S-e)>T.scrollOffset&&setTimeout(E,150)}},f=function(e){var t=e.key||e.keyCode;"Escape"!==t&&"Esc"!==t&&27!==t||E()},p=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t;if(t.background&&(N.style.background=t.background),t.container&&t.container instanceof Object&&(n.container=e({},T.container,t.container)),t.template){var i=o(t.template)?t.template:document.querySelector(t.template);n.template=i}return T=e({},T,n),x.forEach((function(e){e.dispatchEvent(a("medium-zoom:update",{detail:{zoom:j}}))})),j},g=function(){var o=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return t(e({},T,o))},v=function(){for(var e=arguments.length,t=Array(e),o=0;o<e;o++)t[o]=arguments[o];var n=t.reduce((function(e,t){return[].concat(e,i(t))}),[]);return n.filter((function(e){return-1===x.indexOf(e)})).forEach((function(e){x.push(e),e.classList.add("medium-zoom-image")})),O.forEach((function(e){var t=e.type,o=e.listener,i=e.options;n.forEach((function(e){e.addEventListener(t,o,i)}))})),j},h=function(){for(var e=arguments.length,t=Array(e),o=0;o<e;o++)t[o]=arguments[o];k.zoomed&&E();var n=t.length>0?t.reduce((function(e,t){return[].concat(e,i(t))}),[]):x;return n.forEach((function(e){e.classList.remove("medium-zoom-image"),e.dispatchEvent(a("medium-zoom:detach",{detail:{zoom:j}}))})),x=x.filter((function(e){return-1===n.indexOf(e)})),j},z=function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return x.forEach((function(n){n.addEventListener("medium-zoom:"+e,t,o)})),O.push({type:"medium-zoom:"+e,listener:t,options:o}),j},y=function(e,t){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return x.forEach((function(n){n.removeEventListener("medium-zoom:"+e,t,o)})),O=O.filter((function(o){return!(o.type==="medium-zoom:"+e&&o.listener.toString()===t.toString())})),j},b=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t.target,r=function(){var t={width:document.documentElement.clientWidth,height:document.documentElement.clientHeight,left:0,top:0,right:0,bottom:0},i=void 0,r=void 0;if(T.container)if(T.container instanceof Object)i=(t=e({},t,T.container)).width-t.left-t.right-2*T.margin,r=t.height-t.top-t.bottom-2*T.margin;else{var d=(o(T.container)?T.container:document.querySelector(T.container)).getBoundingClientRect(),a=d.width,m=d.height,l=d.left,c=d.top;t=e({},t,{width:a,height:m,left:l,top:c})}i=i||t.width-2*T.margin,r=r||t.height-2*T.margin;var u=k.zoomedHd||k.original,s=n(u)?i:u.naturalWidth||i,f=n(u)?r:u.naturalHeight||r,p=u.getBoundingClientRect(),g=p.top,v=p.left,h=p.width,z=p.height,y=Math.min(Math.max(h,s),i)/h,b=Math.min(Math.max(z,f),r)/z,E=Math.min(y,b),w="scale("+E+") translate3d("+((i-h)/2-v+T.margin+t.left)/E+"px, "+((r-z)/2-g+T.margin+t.top)/E+"px, 0)";k.zoomed.style.transform=w,k.zoomedHd&&(k.zoomedHd.style.transform=w)};return new c((function(e){if(i&&-1===x.indexOf(i))e(j);else{if(k.zoomed)e(j);else{if(i)k.original=i;else{if(!(x.length>0))return void e(j);var t=x;k.original=t[0]}if(k.original.dispatchEvent(a("medium-zoom:open",{detail:{zoom:j}})),S=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,A=!0,k.zoomed=d(k.original),document.body.appendChild(N),T.template){var n=o(T.template)?T.template:document.querySelector(T.template);k.template=document.createElement("div"),k.template.appendChild(n.content.cloneNode(!0)),document.body.appendChild(k.template)}if(k.original.parentElement&&"PICTURE"===k.original.parentElement.tagName&&k.original.currentSrc&&(k.zoomed.src=k.original.currentSrc),document.body.appendChild(k.zoomed),window.requestAnimationFrame((function(){document.body.classList.add("medium-zoom--opened")})),k.original.classList.add("medium-zoom-image--hidden"),k.zoomed.classList.add("medium-zoom-image--opened"),k.zoomed.addEventListener("click",E),k.zoomed.addEventListener("transitionend",(function t(){A=!1,k.zoomed.removeEventListener("transitionend",t),k.original.dispatchEvent(a("medium-zoom:opened",{detail:{zoom:j}})),e(j)})),k.original.getAttribute("data-zoom-src")){k.zoomedHd=k.zoomed.cloneNode(),k.zoomedHd.removeAttribute("srcset"),k.zoomedHd.removeAttribute("sizes"),k.zoomedHd.removeAttribute("loading"),k.zoomedHd.src=k.zoomed.getAttribute("data-zoom-src"),k.zoomedHd.onerror=function(){clearInterval(m),console.warn("Unable to reach the zoom image target "+k.zoomedHd.src),k.zoomedHd=null,r()};var m=setInterval((function(){k.zoomedHd.complete&&(clearInterval(m),k.zoomedHd.classList.add("medium-zoom-image--opened"),k.zoomedHd.addEventListener("click",E),document.body.appendChild(k.zoomedHd),r())}),10)}else if(k.original.hasAttribute("srcset")){k.zoomedHd=k.zoomed.cloneNode(),k.zoomedHd.removeAttribute("sizes"),k.zoomedHd.removeAttribute("loading");var l=k.zoomedHd.addEventListener("load",(function(){k.zoomedHd.removeEventListener("load",l),k.zoomedHd.classList.add("medium-zoom-image--opened"),k.zoomedHd.addEventListener("click",E),document.body.appendChild(k.zoomedHd),r()}))}else r()}}}))},E=function(){return new c((function(e){if(!A&&k.original){A=!0,document.body.classList.remove("medium-zoom--opened"),k.zoomed.style.transform="",k.zoomedHd&&(k.zoomedHd.style.transform=""),k.template&&(k.template.style.transition="opacity 150ms",k.template.style.opacity=0),k.original.dispatchEvent(a("medium-zoom:close",{detail:{zoom:j}})),k.zoomed.addEventListener("transitionend",(function t(){k.original.classList.remove("medium-zoom-image--hidden"),document.body.removeChild(k.zoomed),k.zoomedHd&&document.body.removeChild(k.zoomedHd),document.body.removeChild(N),k.zoomed.classList.remove("medium-zoom-image--opened"),k.template&&document.body.removeChild(k.template),A=!1,k.zoomed.removeEventListener("transitionend",t),k.original.dispatchEvent(a("medium-zoom:closed",{detail:{zoom:j}})),k.original=null,k.zoomed=null,k.zoomedHd=null,k.template=null,e(j)}))}else e(j)}))},w=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.target;return k.original?E():b({target:t})},L=function(){return T},H=function(){return x},C=function(){return k.original},x=[],O=[],A=!1,S=0,T=l,k={original:null,zoomed:null,zoomedHd:null,template:null};"[object Object]"===Object.prototype.toString.call(m)?T=m:(m||"string"==typeof m)&&v(m),T=e({margin:0,background:"#fff",scrollOffset:40,container:null,template:null},T);var N=r(T.background);document.addEventListener("click",u),document.addEventListener("keyup",f),document.addEventListener("scroll",s),window.addEventListener("resize",E);var j={open:b,close:E,toggle:w,update:p,clone:g,attach:v,detach:h,on:z,off:y,getOptions:L,getImages:H,getZoomedImage:C};return j}}));

app/{panel.css → static/panel.css}

@@ -4,39 +4,37 @@
     font-size: 12px !important;
 }
 
-.tabulator-cell {
+.tabulator:hover {
     overflow: visible !important;
 }
 
+.tabulator-cell:has(> img) {
+    padding: 2px !important;
+    height: 60px !important;
+}
 
-.image-zoom-viewer {
-    display: inline-block;
-    overflow: visible;
-    z-index: 1000;
+.tabulator-cell:hover {
+    overflow: visible !important;
 }
 
-.image-zoom-viewer::after {
-    content: "";
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
+.tabulator-row:hover {
+    z-index: 10000;
 }
 
-.image-zoom-viewer:hover::after {
-    pointer-events: all;
+.zoom-img {
+    position: relative;
+    transition: transform 0.3s ease;
 }
 
 /* When hovering over the container, scale its child (the SVG) */
-.tabulator-cell:hover .image-zoom-viewer svg {
+.tabulator-cell:hover .zoom-img {
     padding: 3px;
-    position: absolute;
+    position: fixed;
+    transform: translate(100%, 0%) scale(3); /* Center and scale */
     background-color: rgba(250, 250, 250, 0.854);
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.618);
     border-radius: 3px;
-    transform: scale(3); /* Scale up the SVG */
     transition: transform 0.3s ease;
-    pointer-events: none; /* Prevents the SVG from blocking mouse interactions */
-    z-index: 1000;
-}
+    pointer-events: none; /* Prevent the image from blocking interactions */
+    z-index: 10000; /* Ensure it appears above other elements */
+}

app/{panel.js → static/panel.js}

@@ -28,34 +28,31 @@ const molDisplayButtonFormatter = function (cell, formatterParams, onRendered) {
         try {
             let viewer;
             const elementId = 'result_protein_view'; // Ensure this element exists in your HTML
-            const element = document.getElementById(elementId);
+            const element = window.parent.document.getElementById(elementId);
 
             // Check if the element exists and contains a canvas
             if (element && element.querySelector('canvas')) {
                 viewer = element.querySelector('canvas')._3dmol_viewer;
-
-                // Remove all models except the first one
-                for (let i = 1; i < viewer.models.length; i++) {
-                    viewer.removeModel(i);
-                }
             } else {
                 console.error("Invalid element_id: No canvas found.");
                 return;
             }
 
             // Get the file format from the cell content (assumed to be a property of molFile)
-            const fmt = molFile.orig_name.split('.').pop();
-            const filename = molFile.orig_name;
-            console.log("File:", filename, "Format:", fmt); // Log file name and format
+            const fmt = molFile.split('.').pop();
+            molUrl = 'gradio_api/file=' + molFile;
 
             // Fetch the molecule content using the URL
-            $.get(molFile.url, function(molContent) {
+            window.parent.$.get(molUrl, function(molContent) {
                 // Add the model to the viewer and set the style
+                for (let i = viewer.models.length - 1; i > 0; i--) {
+                    viewer.removeModel(i); // Or viewer.models.splice(i, 1);
+                }
                 const model = viewer.addModel(molContent, fmt);
-                model.setStyle({}, { color: 'lightblue', opacity: 0.5 }); // Change style as needed
+                model.setStyle({}, { stick: {colorscheme: 'magentaCarbon' } }); // Change style as needed
 
                 console.log("Rendering protein view.");
-                viewer.zoomTo();
+                viewer.zoomTo({model: model});
                 viewer.render();
             });
         } catch (error) {
@@ -69,5 +66,5 @@ const molDisplayButtonFormatter = function (cell, formatterParams, onRendered) {
 
 Tabulator.extendModule("format", "formatters", {
     executeScriptFormatter: executeScriptFormatter,
-    buttonFormatter: buttonFormatter
+    molDisplayButtonFormatter: molDisplayButtonFormatter
 });

app/static/zooming.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Zooming=e()}(this,function(){"use strict";var t="auto",e="zoom-in",i="zoom-out",n="grab",s="move";function o(t,e,i){var n={passive:!1};!(arguments.length>3&&void 0!==arguments[3])||arguments[3]?t.addEventListener(e,i,n):t.removeEventListener(e,i,n)}function r(t,e){if(t){var i=new Image;i.onload=function(){e&&e(i)},i.src=t}}function a(t){return t.dataset.original?t.dataset.original:"A"===t.parentNode.tagName?t.parentNode.getAttribute("href"):null}function l(t,e,i){!function(t){var e=h.transitionProp,i=h.transformProp;if(t.transition){var n=t.transition;delete t.transition,t[e]=n}if(t.transform){var s=t.transform;delete t.transform,t[i]=s}}(e);var n=t.style,s={};for(var o in e)i&&(s[o]=n[o]||""),n[o]=e[o];return s}var h={transitionProp:"transition",transEndEvent:"transitionend",transformProp:"transform",transformCssProp:"transform"},c=h.transformCssProp,u=h.transEndEvent;var d=function(){},f={enableGrab:!0,preloadImage:!1,closeOnWindowResize:!0,transitionDuration:.4,transitionTimingFunction:"cubic-bezier(0.4, 0, 0, 1)",bgColor:"rgb(255, 255, 255)",bgOpacity:1,scaleBase:1,scaleExtra:.5,scrollThreshold:40,zIndex:998,customSize:null,onOpen:d,onClose:d,onGrab:d,onMove:d,onRelease:d,onBeforeOpen:d,onBeforeClose:d,onBeforeGrab:d,onBeforeRelease:d,onImageLoading:d,onImageLoaded:d},p={init:function(t){var e,i;e=this,i=t,Object.getOwnPropertyNames(Object.getPrototypeOf(e)).forEach(function(t){e[t]=e[t].bind(i)})},click:function(t){if(t.preventDefault(),m(t))return window.open(this.target.srcOriginal||t.currentTarget.src,"_blank");this.shown?this.released?this.close():this.release():this.open(t.currentTarget)},scroll:function(){var t=document.documentElement||document.body.parentNode||document.body,e=window.pageXOffset||t.scrollLeft,i=window.pageYOffset||t.scrollTop;null===this.lastScrollPosition&&(this.lastScrollPosition={x:e,y:i});var n=this.lastScrollPosition.x-e,s=this.lastScrollPosition.y-i,o=this.options.scrollThreshold;(Math.abs(s)>=o||Math.abs(n)>=o)&&(this.lastScrollPosition=null,this.close())},keydown:function(t){(function(t){return"Escape"===(t.key||t.code)||27===t.keyCode})(t)&&(this.released?this.close():this.release(this.close))},mousedown:function(t){if(y(t)&&!m(t)){t.preventDefault();var e=t.clientX,i=t.clientY;this.pressTimer=setTimeout(function(){this.grab(e,i)}.bind(this),200)}},mousemove:function(t){this.released||this.move(t.clientX,t.clientY)},mouseup:function(t){y(t)&&!m(t)&&(clearTimeout(this.pressTimer),this.released?this.close():this.release())},touchstart:function(t){t.preventDefault();var e=t.touches[0],i=e.clientX,n=e.clientY;this.pressTimer=setTimeout(function(){this.grab(i,n)}.bind(this),200)},touchmove:function(t){if(!this.released){var e=t.touches[0],i=e.clientX,n=e.clientY;this.move(i,n)}},touchend:function(t){(function(t){t.targetTouches.length})(t)||(clearTimeout(this.pressTimer),this.released?this.close():this.release())},clickOverlay:function(){this.close()},resizeWindow:function(){this.close()}};function y(t){return 0===t.button}function m(t){return t.metaKey||t.ctrlKey}var g={init:function(t){this.el=document.createElement("div"),this.instance=t,this.parent=document.body,l(this.el,{position:"fixed",top:0,left:0,right:0,bottom:0,opacity:0}),this.updateStyle(t.options),o(this.el,"click",t.handler.clickOverlay.bind(t))},updateStyle:function(t){l(this.el,{zIndex:t.zIndex,backgroundColor:t.bgColor,transition:"opacity\n        "+t.transitionDuration+"s\n        "+t.transitionTimingFunction})},insert:function(){this.parent.appendChild(this.el)},remove:function(){this.parent.removeChild(this.el)},fadeIn:function(){this.el.offsetWidth,this.el.style.opacity=this.instance.options.bgOpacity},fadeOut:function(){this.el.style.opacity=0}},v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},b=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},w=function(){function t(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,i,n){return i&&t(e.prototype,i),n&&t(e,n),e}}(),x=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(t[n]=i[n])}return t},O={init:function(t,e){this.el=t,this.instance=e,this.srcThumbnail=this.el.getAttribute("src"),this.srcset=this.el.getAttribute("srcset"),this.srcOriginal=a(this.el),this.rect=this.el.getBoundingClientRect(),this.translate=null,this.scale=null,this.styleOpen=null,this.styleClose=null},zoomIn:function(){var t=this.instance.options,e=t.zIndex,s=t.enableGrab,o=t.transitionDuration,r=t.transitionTimingFunction;this.translate=this.calculateTranslate(),this.scale=this.calculateScale(),this.styleOpen={position:"relative",zIndex:e+1,cursor:s?n:i,transition:c+"\n        "+o+"s\n        "+r,transform:"translate3d("+this.translate.x+"px, "+this.translate.y+"px, 0px)\n        scale("+this.scale.x+","+this.scale.y+")",height:this.rect.height+"px",width:this.rect.width+"px"},this.el.offsetWidth,this.styleClose=l(this.el,this.styleOpen,!0)},zoomOut:function(){this.el.offsetWidth,l(this.el,{transform:"none"})},grab:function(t,e,i){var n=k(),o=n.x-t,r=n.y-e;l(this.el,{cursor:s,transform:"translate3d(\n        "+(this.translate.x+o)+"px, "+(this.translate.y+r)+"px, 0px)\n        scale("+(this.scale.x+i)+","+(this.scale.y+i)+")"})},move:function(t,e,i){var n=k(),s=n.x-t,o=n.y-e;l(this.el,{transition:c,transform:"translate3d(\n        "+(this.translate.x+s)+"px, "+(this.translate.y+o)+"px, 0px)\n        scale("+(this.scale.x+i)+","+(this.scale.y+i)+")"})},restoreCloseStyle:function(){l(this.el,this.styleClose)},restoreOpenStyle:function(){l(this.el,this.styleOpen)},upgradeSource:function(){if(this.srcOriginal){var t=this.el.parentNode;this.srcset&&this.el.removeAttribute("srcset");var e=this.el.cloneNode(!1);e.setAttribute("src",this.srcOriginal),e.style.position="fixed",e.style.visibility="hidden",t.appendChild(e),setTimeout(function(){this.el.setAttribute("src",this.srcOriginal),t.removeChild(e)}.bind(this),50)}},downgradeSource:function(){this.srcOriginal&&(this.srcset&&this.el.setAttribute("srcset",this.srcset),this.el.setAttribute("src",this.srcThumbnail))},calculateTranslate:function(){var t=k(),e=this.rect.left+this.rect.width/2,i=this.rect.top+this.rect.height/2;return{x:t.x-e,y:t.y-i}},calculateScale:function(){var t=this.el.dataset,e=t.zoomingHeight,i=t.zoomingWidth,n=this.instance.options,s=n.customSize,o=n.scaleBase;if(!s&&e&&i)return{x:i/this.rect.width,y:e/this.rect.height};if(s&&"object"===(void 0===s?"undefined":v(s)))return{x:s.width/this.rect.width,y:s.height/this.rect.height};var r=this.rect.width/2,a=this.rect.height/2,l=k(),h={x:l.x-r,y:l.y-a},c=h.x/r,u=h.y/a,d=o+Math.min(c,u);if(s&&"string"==typeof s){var f=i||this.el.naturalWidth,p=e||this.el.naturalHeight,y=parseFloat(s)*f/(100*this.rect.width),m=parseFloat(s)*p/(100*this.rect.height);if(d>y||d>m)return{x:y,y:m}}return{x:d,y:d}}};function k(){var t=document.documentElement;return{x:Math.min(t.clientWidth,window.innerWidth)/2,y:Math.min(t.clientHeight,window.innerHeight)/2}}function S(t,e,i){["mousedown","mousemove","mouseup","touchstart","touchmove","touchend"].forEach(function(n){o(t,n,e[n],i)})}return function(){function i(t){b(this,i),this.target=Object.create(O),this.overlay=Object.create(g),this.handler=Object.create(p),this.body=document.body,this.shown=!1,this.lock=!1,this.released=!0,this.lastScrollPosition=null,this.pressTimer=null,this.options=x({},f,t),this.overlay.init(this),this.handler.init(this)}return w(i,[{key:"listen",value:function(t){if("string"==typeof t)for(var i=document.querySelectorAll(t),n=i.length;n--;)this.listen(i[n]);else"IMG"===t.tagName&&(t.style.cursor=e,o(t,"click",this.handler.click),this.options.preloadImage&&r(a(t)));return this}},{key:"config",value:function(t){return t?(x(this.options,t),this.overlay.updateStyle(this.options),this):this.options}},{key:"open",value:function(t){var e=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.options.onOpen;if(!this.shown&&!this.lock){var n="string"==typeof t?document.querySelector(t):t;if("IMG"===n.tagName){if(this.options.onBeforeOpen(n),this.target.init(n,this),!this.options.preloadImage){var s=this.target.srcOriginal;null!=s&&(this.options.onImageLoading(n),r(s,this.options.onImageLoaded))}this.shown=!0,this.lock=!0,this.target.zoomIn(),this.overlay.insert(),this.overlay.fadeIn(),o(document,"scroll",this.handler.scroll),o(document,"keydown",this.handler.keydown),this.options.closeOnWindowResize&&o(window,"resize",this.handler.resizeWindow);return o(n,u,function t(){o(n,u,t,!1),e.lock=!1,e.target.upgradeSource(),e.options.enableGrab&&S(document,e.handler,!0),i(n)}),this}}}},{key:"close",value:function(){var e=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.options.onClose;if(this.shown&&!this.lock){var n=this.target.el;this.options.onBeforeClose(n),this.lock=!0,this.body.style.cursor=t,this.overlay.fadeOut(),this.target.zoomOut(),o(document,"scroll",this.handler.scroll,!1),o(document,"keydown",this.handler.keydown,!1),this.options.closeOnWindowResize&&o(window,"resize",this.handler.resizeWindow,!1);return o(n,u,function t(){o(n,u,t,!1),e.shown=!1,e.lock=!1,e.target.downgradeSource(),e.options.enableGrab&&S(document,e.handler,!1),e.target.restoreCloseStyle(),e.overlay.remove(),i(n)}),this}}},{key:"grab",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.options.scaleExtra,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.options.onGrab;if(this.shown&&!this.lock){var s=this.target.el;this.options.onBeforeGrab(s),this.released=!1,this.target.grab(t,e,i);return o(s,u,function t(){o(s,u,t,!1),n(s)}),this}}},{key:"move",value:function(t,e){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.options.scaleExtra,n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:this.options.onMove;if(this.shown&&!this.lock){this.released=!1,this.body.style.cursor=s,this.target.move(t,e,i);var r=this.target.el;return o(r,u,function t(){o(r,u,t,!1),n(r)}),this}}},{key:"release",value:function(){var e=this,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.options.onRelease;if(this.shown&&!this.lock){var n=this.target.el;this.options.onBeforeRelease(n),this.lock=!0,this.body.style.cursor=t,this.target.restoreOpenStyle();return o(n,u,function t(){o(n,u,t,!1),e.lock=!1,e.released=!0,i(n)}),this}}}]),i}()});

configs/gen_fbdd_v1.yaml

@@ -0,0 +1,42 @@
+score_ckpt: resources/checkpoints/DiffDock/score_model/best_ema_inference_epoch_model.pt
+confidence_ckpt: resources/checkpoints/DiffDock/confidence_model/best_model_epoch75.pt
+docking_batch_size: 20
+#confidence_model_dir: ./workdir/v1.1/confidence_model
+different_schedules: false
+inf_sched_alpha: 1
+inf_sched_beta: 1
+inference_steps: 20
+initial_noise_std_proportion: 1.4601642460337794
+limit_failures: 5
+#model_dir: ./workdir/v1.1/score_model
+#comment
+no_final_step_noise: true
+no_model: false
+no_random: false
+no_random_pocket: false
+ode: false
+old_filtering_model: true
+old_score_model: false
+resample_rdkit: false
+samples_per_complex: 10
+sigma_schedule: expbeta
+temp_psi_rot: 0.9022615585677628
+temp_psi_tor: 0.5946212391366862
+temp_psi_tr: 0.727287304570729
+temp_sampling_rot: 2.06391612594481
+temp_sampling_tor: 7.044261621607846
+temp_sampling_tr: 1.170050527854316
+temp_sigma_data_rot: 0.7464326999906034
+temp_sigma_data_tor: 0.6943254174849822
+temp_sigma_data_tr: 0.9299802531572672
+
+rmsd_threshold: 1.5
+
+linker_ckpt:
+  pocket_full: resources/checkpoints/DiffLinker/pockets_difflinker_full_no_anchors_fc_pdb_excluded.ckpt
+  pocket_bb: resources/checkpoints/DiffLinker/pockets_difflinker_backbone.ckpt
+  geom: resources/checkpoints/DiffLinker/geom_difflinker.ckpt
+size_ckpt: resources/checkpoints/DiffLinker/geom_size_gnn.ckpt
+linker_condition: 'none'  # pocket
+linker_batch_size: 64
+linker_steps: 1000

inference.py

@@ -69,9 +69,15 @@ pandarallel.initialize(nb_workers=nb_workers, progress_bar=progress_bar)
 
 
 def read_fragment_library(file_path):
+    if file_path is None:
+        return pd.DataFrame(columns=['X1', 'ID1', 'mol'])
     file_path = Path(file_path)
     if file_path.suffix == '.csv':
         df = pd.read_csv(file_path)
+        # Validate columns
+        for col in ['X1', 'ID1']:
+            if col not in df.columns:
+                raise ValueError(f"Column '{col}' not found in CSV file.")
         PandasTools.AddMoleculeColumnToFrame(df, smilesCol='X1', molCol='mol')
     elif file_path.suffix == '.sdf':
         df = PandasTools.LoadSDF(file_path, smilesName='X1', molColName='mol')
@@ -606,7 +612,7 @@ def process_docking_results(
         linking_df.drop(columns=['fragment_mol']).to_csv(Path(args.out_dir, 'linking_summary.csv'), index=False)
         return linking_df
     else:
-        raise ValueError('No eligible fragment pairs found for linking.')
+        raise ValueError('No eligible fragment pose pairs found for linking.')
 
 
 def extract_pockets(protein_path, ligand_residue=None, top_pockets=None):
@@ -1340,7 +1346,8 @@ if __name__ == "__main__":
                 out_dir=args.out_dir,
             )
             if linking_df is None or len(linking_df) == 0:
-                raise ValueError('No eligible fragment-conformer pairs found for fragment linking.')
+                log.error('No eligible fragment pose pairs found for linking.')
+                sys.exit()
 
         generate_linkers(
             linking_df,