RFDiffusion + ESMFold Structure Viewer

A self-contained HTML viewer for RFDiffusion loop designs with ESMFold predictions, built with Molstar 5.7.0. The output is a single .html file (~30–60 MB) with everything embedded — no build tools or backend required.

---

What the viewer shows

Button	Structure	Description
Loop row (click)	RFDiffusion designs	Multi-model PDB of up to 5 aligned designs per loop, auto-colored by Molstar presets
ESM button	ESMFold top-1	Best ESMFold prediction aligned to the docked reference, with the docked ligand placed at the approximate binding site

Loops that have only ESMFold data (no RFDiff designs) are shown in green and load ESMFold on click.

---

Folder layout expected

designs_root/
  <linker_A>/
    <loop_14>/
      aligned_outputs/
        aligned_combined.pdb      ← multi-MODEL PDB of aligned RFDiff designs
      docked.pdb                  ← best docked design: chain A = protein,
                                    extra chains = cofactors / small molecules
      ESMFOLD/
        top_1.pdb                 ← ESMFold best prediction
        esm_with_ligand.pdb       ← generated by align_esm_to_docked.py (step 2)
    <loop_16>/
      ...
  <linker_B>/
    ...

aligned_combined.pdb is a multi-MODEL PDB where each MODEL block is one RFDiffusion design, all aligned to design 1 via PyMOL. Molstar loads all models and applies its auto-preset (cartoon + ligand sticks).

docked.pdb is the docked RFDiffusion design used as the alignment reference for ESMFold. Chain A = designed protein. Any additional chains (e.g. Cu cofactor, small-molecule ligand) are automatically detected and transplanted into the ESMFold output.

---

Build steps

0. Prerequisites

• Python 3.8+
• PyMOL (open-source or licensed, headless -cq mode)
• Molstar bundle files (download once):

curl -L https://cdn.jsdelivr.net/npm/molstar@5.7.0/build/viewer/molstar.js  -o /tmp/molstar.js
curl -L https://cdn.jsdelivr.net/npm/molstar@5.7.0/build/viewer/molstar.css -o /tmp/molstar.css

---

1. Prepare aligned RFDiffusion PDBs

For each loop, align all RFDiffusion design PDBs to design 1 using PyMOL and export as a multi-MODEL file (aligned_combined.pdb):

# PyMOL pseudocode — adapt paths for your project
designs = ["design_1.pdb", "design_2.pdb", ...]
cmd.load(designs[0], "ref")
for i, d in enumerate(designs[1:], 2):
    cmd.load(d, f"des{i}")
    cmd.align(f"des{i} and chain A and name CA", "ref and chain A and name CA")

# Save all as multi-MODEL
cmd.save("aligned_outputs/aligned_combined.pdb", " or ".join(all_objects))

---

2. Align ESMFold top-1 to docked reference and add ligand

Run scripts/align_esm_to_docked.py after editing the settings at the top:

DESIGNS_ROOT = "/path/to/your/designs"
PYMOL        = "/path/to/pymol"
DOCKED_NAME  = "docked.pdb"          # adjust if your docked file has a different name

python3 scripts/align_esm_to_docked.py

What this does:

1. Loads ESMFOLD/top_1.pdb and docked.pdb for each loop.
2. Aligns ESMFold chain A onto the docked chain A using Cα atoms.
3. Detects non-protein chains in docked.pdb (HETATM-only chains — cofactors, ligands) and copies them into the aligned ESMFold structure.
4. Saves the result as ESMFOLD/esm_with_ligand.pdb.

This gives a rough but useful visual of where the ligand sits relative to the ESMFold prediction of the designed sequence.

---

3. Build the viewer HTML

Edit the settings block at the top of scripts/build_viewer.py:

DESIGNS_ROOT = "/path/to/your/designs"
OUTPUT_HTML  = "/path/to/output/viewer.html"

# One entry per linker folder:
# "folder_name": ("Sidebar label", "contig suffix", "contig prefix")
LINKER_INFO = {
    "linker_A_2_B": ("Linker A-2-B", "A151-A / 2aa / B-262", "A1-151"),
    "linker_none":  ("No Linker",    "A167-end",               "A1-150"),
    # add more...
}

LINKER_ORDER = ["linker_A_2_B", "linker_none"]   # controls sidebar order

Then run:

python3 scripts/build_viewer.py

---

4. Serve and open

The viewer must be served over HTTP (Molstar won't load from file://):

cd /path/to/output
python3 -m http.server 8080 --bind 127.0.0.1
# Open: http://127.0.0.1:8080/viewer.html

---

Viewer interaction

• Click a loop row → loads RFDiffusion multi-model designs (or ESMFold if no designs exist)
• Click ESM → loads ESMFold top-1 + docked ligand, secondary-structure coloring
• Loops with only ESMFold data appear in green and open ESMFold on click
• Molstar controls: scroll to zoom, left-drag to rotate, right-drag to pan

---

Dependencies

Tool	Version	Purpose
Molstar	5.7.0	Structure viewer (embedded inline)
PyMOL	any	Structural alignment, PDB preparation
Python	3.8+	Build scripts

---

File sizes (approximate)

Component	Size
Molstar JS	~4.6 MB
Molstar CSS	~71 KB
PDB data (per loop)	~200–600 KB
Final HTML (20 loops)	~25–40 MB
Final HTML (50+ loops)	~60–100 MB