Skip to content
Snippets Groups Projects
Commit 257d0b22 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

readme improvements

parent 5605b2cd
No related branches found
No related tags found
1 merge request!1Dev
Pipeline #54970 passed with stages
in 57 seconds
......@@ -9,19 +9,17 @@ This is a web-component to display ligand structure in 2D along with its interac
* 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=500"/> |
| 1cbs REA 200 A | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| wwPDB CCD - VIA
| [1cbs REA 200 A](https://www.ebi.ac.uk/pdbe/entry/pdb/1cbs/bound/REA) | 3D12 bm1 (`2xGLC-2xBGC-LXZ-NGA-GL0`)| [wwPDB CCD - VIA](https://pdbe.org/chem/VIA)
## 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
### web-component
The component can be inserted into the pages by two different ways. Either as a `web-component` using html tag, or directly by using javascript as a `plugin`.
#### Prerequisities
### Web-component
These files need to be inserted in the page before the component is attempted to be loaded:
A few files needs to be imported in the page before the component is attempted to be loaded:
```html
......@@ -40,26 +38,24 @@ These files need to be inserted in the page before the component is attempted to
<script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
```
#### A) Bound molecule interactions
**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>
```
### data injection
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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment