Commit 99ec0ce9 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

add option to use environments

should be one of production/prod; development/dev; or internal/int
parent a959db90
......@@ -26,6 +26,8 @@ python3 -m http.server
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:
......@@ -53,7 +55,7 @@ A few files needs to be imported in the page before the component is attempted t
#### A) Ligand interactions
```html
<pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
<pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A" environment="development"></pdb-ligand-env>
```
#### B) Bound molecule interactions
......@@ -116,6 +118,7 @@ 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
......@@ -128,7 +131,7 @@ let uiParams = {
tooltip: true // show residue tooltip on mouse hover
};
this.display = new Visualization(this, uiParams);
this.display = new Visualization(this, uiParams, environment);
// to display bound molecule interactions
this.display.initBoundMoleculeInteractions('3d12', 'bm1');
......@@ -153,3 +156,4 @@ this.display.initLigandDisplay('HEM');
| 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. |
| environment | string | No | What data should be used: one of `production`, `development`, `internal` or a shorthand `prod`, `dev`, `int`. |
......@@ -17,6 +17,7 @@ class pdbLigandEnv extends LitElement {
substructureHighlight: { type: Array, attribute: 'substructure' },
substructureColor: { type: String, attribute: 'color' },
zoomOn: { type: Boolean, attribute: 'zoom-on' },
env: { type: String, attribute: 'environment' },
};
}
......@@ -28,7 +29,9 @@ class pdbLigandEnv extends LitElement {
let uiParams = new Config.UIParameters();
uiParams.zoom = this.zoomOn;
this.display = new Visualization(this, uiParams);
let env = this.env === undefined ? "production" : this.env;
this.display = new Visualization(this, uiParams, env);
if (this.pdbId) {
if (this.entityId) {
......
......@@ -19,6 +19,7 @@ class Visualization {
// #endregion
// #region data properties
private environment: Model.Environment;
private pdbId: string;
private bindingSite: Model.BindingSite;
private depiction: Depiction;
......@@ -32,8 +33,9 @@ class Visualization {
public fullScreen: boolean;
// #endregion
constructor(element: HTMLElement, uiParameters: Config.UIParameters = undefined) {
constructor(element: HTMLElement, uiParameters: Config.UIParameters = undefined, env: string = "production") {
this.parent = element;
this.environment = this.parseEnvironment(env);
this.parent.style.cssText += "display: block; height: 100%; width: 100%; position: relative;";
this.visualsMapper = new VisualsMapper();
......@@ -156,7 +158,7 @@ class Visualization {
*/
public initBoundMoleculeInteractions(pdbid: string, bmId: string) {
this.pdbId = pdbid;
let url = Resources.boundMoleculeAPI(pdbid, bmId);
let url = Resources.boundMoleculeAPI(pdbid, bmId, this.environment);
d3.json(url)
.catch(e => this.processError(e, 'No interactions data are available.'))
......@@ -165,7 +167,6 @@ class Visualization {
.then(() => this.centerScene());
}
// #region public methods
/**
* Download carbohydrate interactions data from PDBe Graph API end point
* /pdb/carbohydrate_polymer_interactions
......@@ -180,7 +181,7 @@ class Visualization {
*/
public initCarbohydratePolymerInteractions(pdbid: string, bmId: string, entityId: string) {
this.pdbId = pdbid;
let url = Resources.carbohydratePolymerAPI(pdbid, bmId, entityId);
let url = Resources.carbohydratePolymerAPI(pdbid, bmId, entityId, this.environment);
d3.json(url)
.catch(e => this.processError(e, 'No interactions to display'))
......@@ -203,7 +204,7 @@ class Visualization {
*/
public initLigandInteractions(pdbId: string, resId: number, chainId: string) {
this.pdbId = pdbId;
let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId);
let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId, this.environment);
d3.json(url)
.catch(e => this.processError(e, 'No interactions data are available.'))
......@@ -869,5 +870,39 @@ class Visualization {
// .attr('fill', x)
// );
}
}
private parseEnvironment(env: string): Model.Environment {
let environment = undefined;
if (env === undefined) {
environment = Model.Environment.Production
}
else {
env = env.toLowerCase();
switch (env) {
case "production":
case "prod": {
environment = Model.Environment.Production;
break;
}
case "development":
case "dev":
{
environment = Model.Environment.Development;
break;
}
case "internal":
case "int": {
environment = Model.Environment.Internal;
break;
}
default: {
console.log(`Unknown environment ${env}. Using production instead.`);
environment = Model.Environment.Production;
}
}
}
return environment;
}
}
......@@ -2,7 +2,7 @@ namespace Model {
"use strict";
/**
*
* Interaction type
*
* @export
* @enum {number}
......@@ -15,6 +15,19 @@ namespace Model {
GroupGroup
}
/**
* What environment should be used
*
* @export
* @enum {number}
*/
export enum Environment {
Production,
Development,
Internal
}
export class InteractionTypeUtil {
public static parse(value: string) {
if (value === 'atom_atom') return InteractionType.AtomAtom;
......
namespace Resources {
export const apiServer: string = 'https://www.ebi.ac.uk/pdbe/graph-api';
namespace Resources {
export const productionAPI: string = 'https://www.ebi.ac.uk/pdbe/graph-api';
export const devAPI: string = 'https://wwwdev.ebi.ac.uk/pdbe/graph-api';
export const intAPI: string = 'https://wwwint.ebi.ac.uk/pdbe/graph-api';
export const glycanSymbols: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/pdb-snfg-visuals.xml';
export const glycanMapping: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/het_mapping.json';
export const componentSvgCss: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/pdb-ligand-env-svg.css';
export const residueTypeURL: string = "https://www.ebi.ac.uk/pdbe/api/pdb/compound/summary/";
export function ligandAnnotationAPI(ligandName: string): string {
export function ligandAnnotationAPI(ligandName: string): string {
return `https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/${ligandName}/annotation`;
}
export function boundMoleculeAPI(pdbId: string, bmId: string): string {
return `${apiServer}/pdb/bound_molecule_interactions/${pdbId}/${bmId}`;
export function boundMoleculeAPI(pdbId: string, bmId: string, env: Model.Environment): string {
let url = '';
switch (env) {
case Model.Environment.Production: {
url = `${productionAPI}/pdb/bound_molecule_interactions/${pdbId}/${bmId}`;
break;
}
case Model.Environment.Development: {
url = `${devAPI}/pdb/bound_molecule_interactions/${pdbId}/${bmId}`;
break;
}
case Model.Environment.Internal: {
url = `${intAPI}/pdb/bound_molecule_interactions/${pdbId}/${bmId}`;
break;
}
}
return url;
}
export function carbohydratePolymerAPI(pdbId: string, bmId: string, entityId: string): string {
return `${apiServer}/pdb/carbohydrate_polymer_interactions/${pdbId}/${bmId}/${entityId}`;
export function carbohydratePolymerAPI(pdbId: string, bmId: string, entityId: string, env: Model.Environment): string {
let url = '';
switch (env) {
case Model.Environment.Production: {
url = `${productionAPI}/pdb/carbohydrate_polymer_interactions/${pdbId}/${bmId}/${entityId}`;
break;
}
case Model.Environment.Development: {
url = `${devAPI}/pdb/carbohydrate_polymer_interactions/${pdbId}/${bmId}/${entityId}`;
break;
}
case Model.Environment.Internal: {
url = `${intAPI}/pdb/carbohydrate_polymer_interactions/${pdbId}/${bmId}/${entityId}`;
break;
}
}
return url;
}
export function ligandInteractionsAPI(pdbId: string, chainId: string, resId: number) {
return `${apiServer}/pdb/bound_ligand_interactions/${pdbId}/${chainId}/${resId}`;
export function ligandInteractionsAPI(pdbId: string, chainId: string, resId: number, env: Model.Environment) {
let url = '';
switch (env) {
case Model.Environment.Production: {
url = `${productionAPI}/pdb/bound_ligand_interactions/${pdbId}/${chainId}/${resId}`;
break;
}
case Model.Environment.Development: {
url = `${devAPI}/pdb/bound_ligand_interactions/${pdbId}/${chainId}/${resId}`;
break;
}
case Model.Environment.Internal: {
url = `${intAPI}/pdb/bound_ligand_interactions/${pdbId}/${chainId}/${resId}`;
break;
}
}
return url;
}
export function residueTypeAPI(chemCompId: string): string {
export function residueTypeAPI(chemCompId: string): string {
return `${residueTypeURL}${chemCompId}`;
}
}
\ No newline at end of file
}
Markdown is supported
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