add README

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
+
+### A) Display bound molecule and its interactions
+
+### B) Display ligand and its interactions
+
+### C) Display ligand (chemical component) only
+
+<div style="text-align:center;">
+ <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=CLR&size=400"/>
+ <img src="https://www.ebi.ac.uk/pdbe-srv/pdbechem/image/showNew?code=Y01&size=400"/>
+</div>
+
+## Usage: web-component
+
+### A) Bound molecule interactions
+
+```html
+<pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
+```
+
+### Ligand interactions
+
+```html
+<ligand-display pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></ligand-display>
+```
+
+### Ligand/chemical component
+
+```html
+<ligand-display pdb-res-name="CLR" zoom ></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. |