add option to use environments

should be one of production/prod; development/dev; or internal/int

README.md

@@ -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`. |

src/component/component.js

@@ -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) {

src/plugin/manager.ts

@@ -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;
+
+    }
+}

src/plugin/model.ts

@@ -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;

src/plugin/resources.ts

-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
+}