2DPPI-Viewer

---

Summary

---

2DPPI-Viewer (2D Protein–Protein Interaction Viewer) is a Python-based converter that transforms DIMPLOT (LigPlot+) .drw files into standalone interactive HTML visualizations with embedded SVG graphics.

The tool extends the usability of residue-level protein–protein interaction (PPI) diagrams generated by DIMPLOT by embedding interactive inspection capabilities directly within the exported file. The resulting HTML output can be opened locally in any modern web browser without requiring additional software or server-side components.

In addition to the Python-based converter, 2DPPI-Viewer also provides a browser-based web interface that allows users to open .drw files directly in the browser and export interactive HTML visualizations without running Python.

---

Key features

---

• Single-file HTML output (fully self-contained)

• Residue-level interaction visualization

  • Residue-to-residue contact graph
  • Atom-level hydrogen bond depiction with distance labels

• Structured layout control

  • Chain A and Chain B separated by a boundary line
  • Optional chain-side lock (Split Y-lock)
  • Adjustable layout spreading parameters
  • Anti-overlap relaxation engine

• Semantic rendering

  • Residue coloring by physicochemical class
  • Consistent visual encoding of interaction types

• Interactive inspection

  • Drag residues to reposition nodes
  • Pan and zoom directly in the browser
  • Fit and Reset layout controls
  • Alt + drag rotation for atom-level focus residues

---

Requirements

---

• Python 3.8 or newer
• No external Python dependencies (standard library only)
• Any modern web browser for viewing output (Chrome, Edge, Firefox, Safari)

---

Installation

---

Clone the repository:

git clone https://github.com/Yongjin0207/2DPPI-Viewer.git cd 2DPPI-Viewer

---

Quick start

---

Convert a .drw file to an interactive HTML file:

python3 2DPPIViewer.py INPUT.drw --out OUTPUT.html

Open the HTML file in a browser:

Windows: start OUTPUT.html macOS: open OUTPUT.html Linux: xdg-open OUTPUT.html

---

Usage

---

Basic usage:

python3 2DPPIViewer.py INPUT.drw --out OUTPUT.html

Common options:

--out OUTPUT.html Output HTML file name (default: 2DPPIViewer.html)

--width N, --height N Output canvas size (default: 1600 x 900)

--margin N Margin in pixels around the layout (default: 80)

--atom_scale X Atom-level diagram scale factor (default: 3.0)

--split_extra X Extra chain separation in DRW units (default: 35.0)

--x_expand X, --y_expand X Global layout spreading factors (default: 1.50, 1.00)

--relax_iters N Anti-overlap relaxation iterations (default: 320)

--relax_gap_px X Minimum gap between nodes in pixels (default: 14.0)

--relax_step X Relaxation step size (default: 0.38)

--relax_on_pointerup Run relaxation after pointer release (disabled by default)

--simple_r X, --focus_r X Node radii for simple and focus residues (default: 20.0, 44.0)

--boundary_extend_px X Extend the boundary line width (default: 500.0)

--atom_label_mode element | atomname Atom label display mode (default: atomname)

--show_atom_labels_for_all Show labels for all atoms (disabled by default)

--chain_label_offset_px X Distance from boundary for chain labels (default: 26.0)

---

Example

---

python3 2DPPIViewer.py example.drw --out example.html --x_expand 1.6 --relax_iters 400 --relax_gap_px 16 --focus_r 50

---

Interaction guide (browser)

---

• Drag residues to move nodes
• Mouse wheel to zoom
• Shift + drag (or middle mouse drag) to pan
• Use Fit and Reset to re-center the layout
• Alt + drag on focus residues to rotate atom-level diagrams

---

Input format

---

• Input must be a DIMPLOT .drw file
• Residue blocks and interaction records are parsed directly
• Interaction annotations are preserved without modification

---

Output

---

• A single self-contained HTML file with embedded SVG, CSS, and JavaScript
• Fully portable across operating systems
• No installation required for viewing

---

Web interface (browser viewer)

---

2DPPI-Viewer also provides a browser-based interface that allows users to explore interaction diagrams without running Python.

The web viewer is provided as:

2DPPI-Viewer_Web.html

This interface enables users to:

• Open .drw files directly in the browser
• Load previously generated viewer HTML files
• Export interactive HTML visualizations

To use the web viewer:

1. Open 2DPPI-Viewer_Web.html in any modern web browser.
2. Load a .drw file or an existing viewer HTML file.
3. Explore the interaction diagram interactively.

No installation or server environment is required.

---

Dependency notice

---

2DPPIViewer requires DIMPLOT (LigPlot+) to generate .drw files. DIMPLOT is distributed separately under its own license.

---

License

---

MIT License

---

Citation

---

If you use 2DPPIViewer in your research, please cite the associated publication or Zenodo record. See CITATION.cff for details.

---

Contact

---

Email: jaayoutony@khu.ac.kr