update readme

README.md

@@ -10,43 +10,67 @@ This is a web-component to display ligand structure in 2D along with its interac
 
 | 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"/> |
+| <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=500"/> |
 | 1cbs REA 200 A | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| wwPDB CCD - VIA
  
 
-## Usage: web-component
+## How to use it
+The component can be inserted into the pages by two different ways. Either as a web-component using html tag, or by using 
 
-### A) Bound molecule interactions
+### web-component
+
+#### Prerequisities
+
+These files need to be inserted in the page before the component is attempted to be loaded:
+
+```html
+
+<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
+<link rel="stylesheet" href="pdbe-interactions-svg.css" />
+
+<!-- UI icons -->
+<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" /> 
+
+<!-- Web component polyfill (only loads what it needs) -->
+<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8"></script>
+<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
+    charset="utf-8"></script>
+
+<!--PDBe interactions component-->
+<script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
+```
+
+#### A) Bound molecule interactions
 
 ```html
 <pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
 ```
 
-### B) Ligand interactions
+#### B) Ligand interactions
 
 ```html
 <ligand-display pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></ligand-display>
 ```
 
-### C) Ligand/chemical component
+#### C) Ligand/chemical component
 
 ```html
 <ligand-display pdb-res-name="CLR" zoom-on ></ligand-display>
 ```
 
-## Usage: Data injection
+### data injection
 
-First you need to define a component on the page
+The component contains a number of properties that can be set, in order to change data that are being displayed. 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.
+and then inject data you want to display e.g.:
 
 ```javascript
 let chemUrl = `https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/SIA/annotation`;
-let interactionsURL = "";
+let interactionsURL = "https://wwwdev.ebi.ac.uk/pdbe/graph-api/pdb/bound_ligand_interactions/4yy1/A/604";
 let component = document.getElementById('SIA-component');
 
 const depiction = await (await fetch(chemUrl)).json();
@@ -58,6 +82,36 @@ component.ligandHighlight = atomsToHighlight;
 component.interactions = interactionsData;
 ```
 
+### Plugin
+
+The component can be also added to DOM directly from JavaScript. There are some requirements
+
+```html
+<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
+<link rel="stylesheet" href="pdbe-interactions-svg.css" />
+
+<!-- UI icons -->
+<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
+
+<!--PDBe interactions component-->
+<script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
+```
+
+and then the component can be instantiated as simply as:
+
+```javascript
+let component = document.getElementById('SIA-component');
+this.display = new Visualization(this, uiParams);
+
+// to display bound molecule interactions
+this.display.initBoundMoleculeInteractions('3d12', 'bm1'
+// to display ligand interactions
+this.display.initLigandInteractions('1cbs', 200, 'A');
+
+// to display chemical component only
+this.display.initLigandDisplay('HEM').then(() => this.display.centerScene());
+````
+
 ## Parameters
 
 | Parametr            | Type      | Required | Description |