README.md

# PDBe interactions component

This is a web-component to display ligand structure in 2D along with its interactions. Ligand can be perceived as a set of covalently linked pdb residues (refered to as bound molecule) or a single pdb residue. This depiction can be enriched with a substructure highlight and binding site interactions.

## Component modes

* Mode A: Display bound molecule and its interactions
* Mode B: Display ligand and its interactions
* Mode C: Display ligand (chemical component) only

| Mode A | Mode B | Mode C |
|-------------------- | --------- | -------- | 
| <img src="https://www.ebi.ac.uk/~lpravda/imgs/1cbs_REA_200_A.png"/>| <img src="https://www.ebi.ac.uk/~lpravda/imgs/3d12_bm1.png"/> | <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=VIA&size=400"/> |
| 1cbs REA 200 A | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| wwPDB CCD - VIA
 

## Usage: web-component

### A) Bound molecule interactions

```html
<pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
```

### B) Ligand interactions

```html
<ligand-display pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></ligand-display>
```

### C) Ligand/chemical component

```html
<ligand-display pdb-res-name="CLR" zoom-on ></ligand-display>
```

## Usage: Data injection

First you need to define a component on the page

```html
<ligand-display id='SIA-component'></ligand-display>
```

and then inject data you want to display.

```javascript
let chemUrl = `https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/SIA/annotation`;
let interactionsURL = "";
let component = document.getElementById('SIA-component');

const depiction = await (await fetch(chemUrl)).json();
const interactionsData = await (await fetch(interactionsURL)).json();
const atomsToHighlight = ['C10', 'C11', 'O10'];

component.depiction = depiction;
component.ligandHighlight = atomsToHighlight;
component.interactions = interactionsData;
```

## Parameters

| Parametr            | Type      | Required | Description |
|-------------------- | --------- | -------- | -------     |
| pdb-id              | string    | No       | PDB id of a protein to retrieve interactions from. `(mode A and B only)` |
| bound-molecule-id   | string    | No       | PDB bound molecule id `(mode A only)` |
| pdb-res-name        | string    | No       | PDB residue name aka: *auth_comp_id* `(mode C only)`
| pdb-res-id          | number    | No       | PDB residue id aka: *auth_seq_id* `(mode B only)`
| pdb-chain-id        | string    | No       | PDB residue chain aka: *auth_asym_id*  `(mode B only)`|
| substructure        | string[]  | No       | List of atom names to be highlighted on the ligand structure |
| color               | string    | No       | HEX representation of the color highlight. `(Default: #D3D3D3)` |
| zoom-on             | boolean   | No       | Allow zoom functionality on the component level. |