https://github.com/pdbeurope/ligand-env
Public repository of the PDBe ligand environment component
https://github.com/pdbeurope/ligand-env
Last synced: 8 months ago
JSON representation
Public repository of the PDBe ligand environment component
- Host: GitHub
- URL: https://github.com/pdbeurope/ligand-env
- Owner: PDBeurope
- License: apache-2.0
- Created: 2022-02-08T13:36:48.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-09T15:54:38.000Z (over 3 years ago)
- Last Synced: 2024-12-28T03:42:10.695Z (10 months ago)
- Language: TypeScript
- Size: 235 KB
- Stars: 1
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# PDB ligand environment 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, atom names, and binding site interactions.
## Step after cloning (use local server to see demo pages)
```shell
npm run install
npm run build
npm run start
open any of the *.html pages in the demo directory
```
## 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 |
|:------------------: | :-------: | :-------: |
| 
| 
| 
|
| [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 directly by using javascript as a `plugin`.
Interactions data displayed by the component can come from three different environments `Production`, `Development`, `Internal`. If no environment is specified `Production` is used as default..
### Web-component
A few files needs to be imported in the page before the component is attempted to be loaded:
```html
```
#### A) Ligand interactions
```html
```
#### B) Bound molecule interactions
```html
```
#### C) Ligand/chemical component
```html
```
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
```
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 = "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();
const interactionsData = await (await fetch(interactionsURL)).json();
const atomsToHighlight = ['C10', 'C11', 'O10'];
component.depiction = depiction;
component.ligandHighlight = atomsToHighlight;
component.interactions = interactionsData;
```
### Plugin
The component can be also added to DOM directly from JavaScript. There are some requirements
```html
```
and then the component can be instantiated as simply as:
```javascript
let component = document.getElementById('SIA-component');
let environemnt = "development";
let uiParams = {
reinitialize: true, // allow reinitialize option in the component menu
zoom: true, // allow scene zoom
fullScreen: true, // allow allow full screen option in the component menu
downloadImage: true, // allow image download from the component menu
downloadData: true, // allow interactions data download from compoment menu
center: true, // allow scene centering option from the component menu
help: false, // allow help option from the component menu
residueLabel: true, // show residue label
tooltip: true // show residue tooltip on mouse hover
menu: true // allow menu to be (not) available
names: true // allow ligand depiction with atom names
};
this.display = new Visualization(this, uiParams, environment);
// to display bound molecule interactions
this.display.initBoundMoleculeInteractions('3d12', 'bm1');
// to display carbohydrate polymer interactions
this.display.initCarbohydratePolymerInteractions('5e98', 'bm1','3');
// to display ligand interactions
this.display.initLigandInteractions('1cbs', 200, 'A');
// to display chemical component with atom names only
this.display.initLigandDisplay('HEM', true);
````
## 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. |
| names-on | boolean | No | Allow ligand depiction to be displayed with atom names. |
| environment | string | No | What data should be used: one of `production`, `development`, `internal` or a shorthand `prod`, `dev`, `int`. |
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/PDBeurope/ligand-env/tags).
## Authors
* **Lukas Pravda** - *Initial work* - [lpravda](https://github.com/lpravda)
* **Mihaly Varadi** - *Migrating to GitHub* - [mvaradi](https://github.com/mvaradi)
See also the list of [contributors](https://github.com/PDBeurope/ligand-env/contributors) who participated in this project.
## License
This project is licensed under the EMBL-EBI License - see the [LICENSE](LICENSE) file for details
## Acknowledgements
We would like to thank the [PDBe team](https://www.pdbe.org) for their feedback and contributions.