add carbohydrate interactions mode

README.md

@@ -132,6 +132,8 @@ this.display = new Visualization(this, uiParams);
 
 // 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');
 

dependencies/index.html

@@ -120,12 +120,12 @@
     </div>
     <div style="position: relative; float: left;">
         <div id="rt 1" style="width: 500px; height: 500px; position: relative">
-            <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
+            <pdb-ligand-env pdb-id="5e98" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
         </div>
     </div>
     <div style="position: relative; float: left;">
         <div id="rt 1" style="width: 500px; height: 500px; position: relative">
-            <pdb-ligand-env pdb-id="2aw3" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
+            <pdb-ligand-env pdb-id="5e98" bound-molecule-id="bm1" entity-id="3" zoom-on></pdb-ligand-env>
         </div>
     </div>
 

src/component/component.js

@@ -10,6 +10,7 @@ class pdbLigandEnv extends LitElement {
     return {
       pdbId: { type: String, attribute: 'pdb-id' },
       bmId: { type: String, attribute: 'bound-molecule-id' },
+      entityId: { type: String, attribute: 'entity-id' },
       resName: { type: String, attribute: 'pdb-res-name' },
       resId: { type: Number, attribute: 'pdb-res-id' },
       chainId: { type: String, attribute: 'pdb-chain-id' },
@@ -30,7 +31,10 @@ class pdbLigandEnv extends LitElement {
     this.display = new Visualization(this, uiParams);
 
     if (this.pdbId) {
-      if (this.bmId) {
+      if (this.entityId) {
+        this.display.initCarbohydratePolymerInteractions(this.pdbId, this.bmId, this.entityId);
+      }
+      else if (this.bmId) {
         this.display.initBoundMoleculeInteractions(this.pdbId, this.bmId);
       }
       else {

src/plugin/manager.ts

@@ -159,6 +159,30 @@ class Visualization {
             .then(() => this.centerScene());
     }
 
+    // #region public methods
+    /**
+     * Download carbohydrate interactions data from PDBe Graph API end point
+     * /pdb/carbohydrate_polymer_interactions
+     * 
+     * Correct parameters can be obtained using API call:
+     * /pdb/bound_molecules
+     *
+     * @param {string} pdbid
+     * @param {string} bmId bound molecule identifier: e.g. bm1, bm2, ...
+     * @param {string} entityId
+     * @memberof Visualization
+     */
+    public initCarbohydratePolymerInteractions(pdbid: string, bmId: string, entityId: string) {
+        this.pdbId = pdbid;
+        let url = Resources.carbohydratePolymerAPI(pdbid, bmId, entityId);
+
+        d3.json(url)
+            .catch(e => this.processError(e, 'No interactions to display'))
+            .then((data: any) => this.addBoundMoleculeInteractions(data, bmId))
+            .then(() => new Promise(resolve => setTimeout(resolve, 1500)))
+            .then(() => this.centerScene());
+    }
+
     /**
      * Download ligand interactions data from PDBe Graph API end point
      * /pdb/bound_ligand_interactions.

src/plugin/resources.ts

@@ -14,6 +14,10 @@ namespace Resources {
         return `${apiServer}/pdb/bound_molecule_interactions/${pdbId}/${bmId}`;
     }
 
+    export function carbohydratePolymerAPI(pdbId: string, bmId: string, entityId: string): string { 
+        return `${apiServer}/pdb/carbohydrate_polymer_interactions/${pdbId}/${bmId}/${entityId}`;
+    }
+
     export function ligandInteractionsAPI(pdbId: string, chainId: string, resId: number) { 
         return `${apiServer}/pdb/bound_ligand_interactions/${pdbId}/${chainId}/${resId}`;
     }