litefold-ligand-env

v1.0.1

Published

10 months ago

LiteFold Ligand Environment - A web component for visualizing protein-ligand interactions with fallback example data

0High
0Medium
0Low

anindya_litefold

protein ligand molecular-visualization bioinformatics pdb web-component d3 litefold

LiteFold Ligand Environment

A web component for visualizing protein-ligand interactions with automatic fallback to example data when APIs are unavailable.

Features

🧬 Protein-Ligand Visualization: Interactive 2D visualization of molecular interactions
🔄 Automatic Fallback: Loads example data when PDBe API is unavailable
🎨 Rich Interactions: Displays hydrogen bonds, hydrophobic interactions, π-stacking, metal coordination
📱 Web Component: Easy integration into any web application
🎯 Multiple Modes: Ligand interactions, bound molecules, and chemical components

Installation

npm install litefold-ligand-env

Usage

As a Web Component

<!DOCTYPE html>
<html>
<head>
    <!-- Required dependencies -->
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="node_modules/litefold-ligand-env/build/pdb-ligand-env.css" />
    <script src="node_modules/litefold-ligand-env/build/pdb-ligand-env-component-1.0.0-min.js"></script>
</head>
<body>
    <!-- Ligand interactions -->
    <pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
    
    <!-- Bound molecule interactions -->
    <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
    
    <!-- Chemical component only -->
    <pdb-ligand-env pdb-res-name="HEM" zoom-on></pdb-ligand-env>
</body>
</html>

As a JavaScript Plugin

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link rel="stylesheet" href="node_modules/litefold-ligand-env/build/pdb-ligand-env.css" />
    <script src="node_modules/litefold-ligand-env/build/pdb-ligand-env-plugin.js"></script>
</head>
<body>
    <div id="ligand-container" style="width: 600px; height: 500px;"></div>
    
    <script>
        const container = document.getElementById('ligand-container');
        const visualization = new Visualization(container);
        
        // Will automatically fallback to example data if API fails
        visualization.initLigandInteractions('1cbs', 200, 'A');
    </script>
</body>
</html>

With Module Bundlers

// Import the component
import 'litefold-ligand-env/build/pdb-ligand-env-component-1.0.0-min.js';
import 'litefold-ligand-env/build/pdb-ligand-env.css';

// Use in your HTML
// <pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>

API Reference

Web Component Attributes

| Attribute | Type | Description | |-----------|------|-------------| | pdb-id | string | PDB identifier (e.g., "1cbs") | | pdb-res-id | number | Residue number | | pdb-chain-id | string | Chain identifier | | bound-molecule-id | string | Bound molecule ID (e.g., "bm1") | | pdb-res-name | string | Chemical component name (e.g., "HEM") | | zoom-on | boolean | Enable zoom functionality | | names-on | boolean | Show atom names | | environment | string | API environment: "production", "development", "internal" |

JavaScript API

const visualization = new Visualization(element, uiParameters, environment);

// Methods
visualization.initLigandInteractions(pdbId, resId, chainId);
visualization.initBoundMoleculeInteractions(pdbId, bmId);
visualization.initLigandDisplay(ligandId);
visualization.centerScene();
visualization.saveSvg();

Fallback Data

When the PDBe API is unavailable, the component automatically loads example data:

HEM (Heme): Shows metal coordination, hydrophobic interactions, hydrogen bonds, and π-stacking
ADP: Displays nucleotide interactions with various amino acids
Realistic Examples: All fallback data represents scientifically accurate molecular interactions

Interaction Types

The visualization supports various interaction types with distinct visual styling:

🔗 Hydrogen Bonds: Dashed lines
🌊 Hydrophobic: Solid lines
⚡ Electrostatic: Blue dashed lines
🔥 Aromatic/π-stacking: Purple dashed lines
⚙️ Metal Coordination: Teal solid lines
💥 Van der Waals: Brown dashed lines
⚠️ Clashes: Red dashed lines with clash markers

Browser Support

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+

Dependencies

D3.js v5.x
LitElement 2.x
Modern browser with Web Components support

License

Apache-2.0

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Changelog

See CHANGELOG.md for details.

Issues

Report issues at: https://github.com/your-username/litefold-ligand-env/issues