Merge branch 'dev' -- release 1.0

CHANGELOG.md

+## RELEASE 1.0 - 28 April 2021
+
+
+* Support to display atom names
+* Use `pdbeccdutils=0.6` data
+* Minor bug fixes
+
 ## RELEASE 0.2 - 24 February 2020
 
-Component rembranded to `pdb-ligand-env`
+Component rebranded to `pdb-ligand-env`
 
 ### Features
 

README.md

 # 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 and binding site interactions.
+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)
 
@@ -133,6 +133,8 @@ let uiParams = {
     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);
@@ -144,8 +146,8 @@ this.display.initCarbohydratePolymerInteractions('5e98', 'bm1','3');
 // to display ligand interactions
 this.display.initLigandInteractions('1cbs', 200, 'A');
 
-// to display chemical component only
-this.display.initLigandDisplay('HEM');
+// to display chemical component with atom names only
+this.display.initLigandDisplay('HEM', true);
 ````
 
 ## Parameters
@@ -160,4 +162,5 @@ 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. |
+| 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`. |

demo/demo_component.html

@@ -14,7 +14,7 @@
   <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
     charset="utf-8"></script>
   <!--PDBe interactions component-->
-  <script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-0.3.0-min.js"></script>
+  <script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-1.0.0-min.js"></script>
 
 </head>
 
@@ -37,7 +37,7 @@
   <!--Mode C-->
   <div style="position: relative; float: left;">
     <div style="width: 500px; height: 500px; position: relative">
-      <pdb-ligand-env pdb-res-name="CLR" zoom-on></pdb-ligand-env>
+      <pdb-ligand-env pdb-res-name="CLR" zoom-on names-on></pdb-ligand-env>
     </div>
   </div>
 

dependencies/index.html

@@ -18,7 +18,7 @@
 <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
     charset="utf-8"></script>
 
-<script type="module" src="pdb-ligand-env-component-0.3.0-min.js"></script>
+<script type="module" src="pdb-ligand-env-component-1.0.0-min.js"></script>
 <script>
     var renderBmInteractions = function (id, bmId) {
         var int =
@@ -126,9 +126,9 @@
 
     <!--
         Further use in the app for bound molecule interactions:
-        
+
         <pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
-        
+
         for ligand interactions:
         <pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
     -->

package.json

 {
   "name": "pdb-ligand-env",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "",
   "main": "app.js",
   "dependencies": {

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' },
+      namesOn: { type: Boolean, attribute: 'names-on' },
       env: { type: String, attribute: 'environment' },
     };
   }
@@ -32,9 +33,9 @@ class pdbLigandEnv extends LitElement {
     uiParams.menu = this.pdbId !== undefined;
 
     let env = this.env === undefined ? "production" : this.env;
+    let names = this.namesOn === undefined ? false : this.namesOn;
 
     this.display = new Visualization(this, uiParams, env);
-
     if (this.pdbId) {
       if (this.entityId) {
         this.display.initCarbohydratePolymerInteractions(this.pdbId, this.bmId, this.entityId);
@@ -47,7 +48,7 @@ class pdbLigandEnv extends LitElement {
       }
     }
     else if (this.resName) {
-      this.display.initLigandDisplay(this.resName).then(() => this.display.centerScene());
+      this.display.initLigandDisplay(this.resName, names).then(() => this.display.centerScene());
     }
   }
 
@@ -84,7 +85,11 @@ class pdbLigandEnv extends LitElement {
   }
 
   set zoom(data) {
-    if (this.display !== undefined) this.display.toogleZoom(data);
+    if (this.display !== undefined) this.display.toggleZoom(data);
+  }
+
+  set atomNames(data) {
+    this.display.toggleDepiction(data);
   }
   //#endregion properties
 

src/plugin/config.ts

@@ -70,6 +70,7 @@ namespace Config {
         residueLabel: boolean;
         tooltip: boolean;
         menu: boolean;
+        names: boolean;
 
         constructor() {
             this.reinitialize = true;
@@ -82,6 +83,7 @@ namespace Config {
             this.residueLabel = true;
             this.tooltip = true;
             this.menu = true;
+            this.names = true;
         }
     }
 }
\ No newline at end of file

src/plugin/depiction.ts

@@ -8,10 +8,10 @@
  * @class Depiction
  * @param {string} ccdId PDB CCD id.
  * @param {Atom[]} atoms List of atoms.
- * @param {Bond[]} bonds Visual representation of bonds. 
+ * @param {Bond[]} bonds Visual representation of bonds.
  * They do not correlate 1:1 with a number of bonds!
  * @param {Vector2D} resolution x,y dimension of the image. Needs to be used
- * for a scene shift, so it is centered. 
+ * for a scene shift, so it is centered.
  */
 class Depiction {
     ccdId: string;
@@ -39,7 +39,7 @@ class Depiction {
         this.bonds = new Array<Bond>();
 
         let bds = new Set<string>();
-        
+
         data.bonds.forEach(x => {
             let atomA = this.atoms.find(e => e.name == x.bgn);
             let atomB = this.atoms.find(e => e.name == x.end);
@@ -58,14 +58,14 @@ class Depiction {
 
 
     /**
-     * Returns an initial position of Residue node bound to a list of 
+     * Returns an initial position of Residue node bound to a list of
      * atom.
-     * 
+     *
      * Present implementation sorts all the partners based on the atom
-     * degree and then gets the one with the lovest degree and places 
+     * degree and then gets the one with the lovest degree and places
      * the initial residue position along the vector pointing from it.
      *
-     * @param {string[]} atomNames list of atom names the bound residue 
+     * @param {string[]} atomNames list of atom names the bound residue
      * has a contact with.
      * @returns {Vector2D} Returns an initial placement of the residue in contact.
      * @memberof Depiction
@@ -90,11 +90,13 @@ class Depiction {
         return new Vector2D(x, y);
     }
 
-    public draw() {
+    public draw(atomNames: boolean = false) {
         this.structure.selectAll("*").remove();
 
         this.appendBondVisuals();
-        this.appendTexts();
+
+        if (atomNames) this.appendAtomNames();
+        else this.appendLabels();
     }
 
     public highlightSubgraph(atoms: Array<string>, color: string = undefined) {
@@ -145,39 +147,51 @@ class Depiction {
             .attr('d', (y: Bond) => y.coords);
     }
 
+    /**
+     * Append atom name labels to the visualization.
+     *
+     * @memberof Depiction
+     */
+    private appendAtomNames() {
+        this.structure.selectAll()
+            .data(this.atoms)
+            .enter()
+            .append('text')
+            .attr('filter', "url(#solid-background)")
+            .attr('style', 'font-size:21px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;fill:#000000')
+            .attr('x', x => x.position.x)
+            .attr('y', x => x.position.y)
+            .attr('dominant-baseline', 'central')
+            .attr('text-anchor', 'middle')
+            .text(x => x.name);
+    }
+
     /**
      * Append depiction labels to the visualization. Because RDKIt places
      * the labels slightly differently this information needs to be
      * consumed too, because we cannot use just atom position directly.
-     * Also there are all sorts of colorful subscripts and superscripts, 
+     * Also there are all sorts of colorful subscripts and superscripts,
      * so it is much easier to use it this way.
      *
      * @memberof Depiction
      */
-    private appendTexts(): void {
-        
+    private appendLabels() {
         let data = this.atoms
-            .filter(x => x.labels.length > 0)
-            ?.map(x => x.labels)
-            ?.reduce((a, b) => a.concat(b));
+            .filter(x => x.labels.length > 0);
 
         this.structure.selectAll()
             .data(data)
             .enter()
-            .append('text')
-            .attr('filter', "url(#solid-background)")
-            .attr('style', (x: any) => x.style)
-            .attr('x', (x: any) => x.x)
-            .attr('y', (x: any) => x.y)
-            .attr('dominant-baseline', (x: any) => x['dominant-baseline'])
-            .attr('text-anchor', (x: any) => x['text-anchor'])
+            .append('g')
+            .attr('filter', 'url(#solid-background)')
             .each(function (x: any) {
-                
-                for (var i = 0; i < x.tspans.length; i++) {
+                for (var i = 0; i < x.labels.length; i++) {
                     d3.select(this)
-                        .append('tspan')
-                        .attr('style', x.tspans[i].style)
-                        .text(x.tspans[i].value);
+                        .append('path')
+                        .attr('d', x.labels[i].d)
+                        .style("background-color", "white")
+                        .attr('fill', x.labels[i].fill)
+
                 }
             });
     }
@@ -243,7 +257,7 @@ class Atom {
     }
 
     /**
-     * 
+     *
      *
      * @param {Atom} other
      * @returns true if the atoms are equal
@@ -310,7 +324,7 @@ class Vector2D {
 
 
     /**
-     * Composes vectors to a single one. This is used in infering the 
+     * Composes vectors to a single one. This is used in infering the
      * original placement of the residue nodes.
      *
      * @static
@@ -359,7 +373,7 @@ class Bond {
     /**
      * Get the other atom for a given bond.
      *
-     * @param {Atom} other     
+     * @param {Atom} other
      * @returns {Atom} The other atom from the bond.
      * @throws {Error} if the atom is not part of that bond at all.
      * @memberof Bond

src/plugin/manager.ts

@@ -17,7 +17,7 @@ class Visualization {
     private links: any;
     // #endregion
 
-    // #region data properties    
+    // #region data properties
     private environment: Model.Environment;
     private pdbId: string;
     private bindingSites: Model.BindingSite[];
@@ -41,8 +41,9 @@ class Visualization {
 
         this.visualsMapper = new VisualsMapper(this.environment);
         this.rProvider = ResidueProvider.getInstance(this.environment);
-        this.fullScreen = false;
         this.bindingSites = new Array<Model.BindingSite>();
+
+        this.fullScreen = false;
         this.nodeDragged = false;
 
         if (uiParameters === undefined) uiParameters = new Config.UIParameters();
@@ -126,7 +127,6 @@ class Visualization {
         });
         this.links?.attr('opacity', 1);
         this.nodes?.attr('opacity', 1);
-
     }
 
     private linkMouseOverEventHandler(x: Model.Link, i: number, g: any) {
@@ -190,7 +190,7 @@ class Visualization {
     /**
      * Download bound molecule interactions data from PDBe Graph API end point
      * /pdb/bound_molecule_interactions
-     * 
+     *
      * Correct parameters can be obtained using API call:
      * /pdb/bound_molecules
      *
@@ -212,7 +212,7 @@ class Visualization {
     /**
      * 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
      *
@@ -235,40 +235,40 @@ class Visualization {
     /**
      * Download ligand interactions data from PDBe Graph API end point
      * /pdb/bound_ligand_interactions.
-     * 
+     *
      * Correct parameters can be obtained using API call:
      * /pdb/bound_molecules
-     * 
+     *
      * @param {string} pdbId pdb id
      * @param {number} resId residue number aka: auth_seq_id
      * @param {string} chainId chain id aka: auth_asym_id
      * @memberof Visualization
      */
-    public initLigandInteractions(pdbId: string, resId: number, chainId: string) {
+    public initLigandInteractions(pdbId: string, resId: number, chainId: string, withNames: boolean = false) {
         this.pdbId = pdbId;
         let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId, this.environment);
 
         d3.json(url)
             .catch(e => this.processError(e, 'No interactions data are available.'))
-            .then((data: any) => this.addLigandInteractions(data))
+            .then((data: any) => this.addLigandInteractions(data, withNames))
             .then(() => new Promise(resolve => setTimeout(resolve, 1500)))
             .then(() => this.centerScene());
     }
 
     /**
-     * Download ligand structure given the anotation generated by the 
+     * Download ligand structure given the anotation generated by the
      * PDBeChem process.
      *
      * @param {string} ligandId
      * @returns
      * @memberof Visualization
      */
-    public async initLigandDisplay(ligandId: string) {
+    public async initLigandDisplay(ligandId: string, withNames: boolean = false) {
         const ligandUrl = Resources.ligandAnnotationAPI(ligandId, this.environment);
 
         return d3.json(ligandUrl)
             .catch(e => this.processError(e, `Component ${ligandId} was not found.`))
-            .then((d: any) => this.addDepiction(d))
+            .then((d: any) => this.addDepiction(d, withNames))
             .then(() => this.centerScene());
     }
 
@@ -280,9 +280,26 @@ class Visualization {
      * the PDBeChem process.
      * @memberof Visualization
      */
-    public addDepiction(depiction: any) {
+    public addDepiction(depiction: any, withNames: boolean) {
         this.depiction = new Depiction(this.depictionRoot, depiction);
-        this.depiction.draw();
+        this.depiction.draw(withNames);
+    }
+
+
+    /**
+     * Show depiction with/without atom names
+     *
+     * @param {boolean} withNames Controls atom labels to be displayed
+     * @memberof Visualization
+     */
+    public toggleDepiction(withNames: boolean) {
+        if (!this.depiction) return;
+
+        this.depiction.draw(withNames);
+    }
+
+    public toggleZoom(active: boolean) {
+        this.zoomHandler = active ? this.getZoomHandler() : undefined;
     }
 
 
@@ -310,25 +327,20 @@ class Visualization {
     }
 
 
-    public toogleZoom(active: boolean) {
-        this.zoomHandler = active ? this.getZoomHandler() : undefined;
-    }
-
-
     /**
      * Add ligand interactions to the canvas
      *
-     * @param {*} data Data content of the API end point 
+     * @param {*} data Data content of the API end point
      * /pdb/bound_ligand_interactions
      * @memberof Visualization
      */
-    public addLigandInteractions(data: any) {
+    public addLigandInteractions(data: any, withNames: boolean = false) {
         let key = Object.keys(data)[0];
         let body = data[key][0];
         this.interactionsData = data;
 
         if (this.depiction === undefined || this.depiction.ccdId !== body.ligand.chem_comp_id) {
-            this.initLigandDisplay(body.ligand.chem_comp_id).then(() => {
+            this.initLigandDisplay(body.ligand.chem_comp_id, withNames).then(() => {
                 this.presentBindingSite = new Model.BindingSite().fromLigand(key, body, this.depiction);
                 this.bindingSites.push(this.presentBindingSite);
                 this.setupLigandScene();
@@ -344,7 +356,7 @@ class Visualization {
     /**
      * Add bound molecule interactions to the canvas.
      *
-     * @param {*} data Data content of the API end point 
+     * @param {*} data Data content of the API end point
      * /pdb/bound_molecule_interactions
      * @param {string} bmId Bound molecule id
      * @memberof Visualization
@@ -472,8 +484,8 @@ class Visualization {
 
     private computeBoundingBox(minX: number, maxX: number, minY: number, maxY: number) {
         // The width and the height of the graph
-        let molWidth = (maxX - minX) + 1; // +1 to avoid 0 division
-        let molHeight = (maxY - minY) + 1;
+        let molWidth = Math.max((maxX - minX), this.parent.offsetWidth);
+        let molHeight = Math.max((maxY - minY), this.parent.offsetHeight);
 
         // how much larger the drawing area is than the width and the height
         let widthRatio = this.parent.offsetWidth / molWidth;
@@ -495,8 +507,7 @@ class Visualization {
         this.canvas.attr('transform', `translate(${xTrans}, ${yTrans}) scale(${minRatio})`);
 
         // tell the zoomer what we did so that next we zoom, it uses the
-        // transformation we entered here        
-
+        // transformation we entered here
         let translation = d3.zoomIdentity.translate(xTrans, yTrans).scale(minRatio);
         this.zoomHandler?.transform(this.svg, translation);
     }
@@ -761,7 +772,7 @@ class Visualization {
 
         this.simulation = d3.forceSimulation(this.presentBindingSite.interactionNodes)
             .force('link', forceLink)
-            .force('charge', charge) //strength 
+            .force('charge', charge) //strength
             .force('collision', collision)
             .on('tick', () => this.simulationStep());
 
@@ -771,7 +782,7 @@ class Visualization {
 
 
     /**
-     * Setup display of interactions for bound molecule. 
+     * Setup display of interactions for bound molecule.
      * * This includes: setup of links, nodes, simulation and subscribing to relevant events.
      * No depiction is required for this step.
      *
@@ -818,7 +829,7 @@ class Visualization {
 
         this.simulation = d3.forceSimulation(this.presentBindingSite.interactionNodes)
             .force('link', forceLink)
-            .force('charge', charge) //strength 
+            .force('charge', charge) //strength
             .force('collision', collision)
             .force('center', center)
             .on('tick', () => this.simulationStep());

src/plugin/ui.ts

@@ -234,6 +234,15 @@ class UI {
                     .attr('class', 'icon icon-common icon-sync-alt')
                     .on('click', () => this.reinitialize());
             }
+
+            if (p.names) {
+                dynamicPanel.append('i')
+                    .attr('id', 'pdb-lig-env-names-btn')
+                    .attr('title', 'Show/hide atom names')
+                    .attr('class', 'icon icon-common icon-font')
+                    .classed('active', false)
+                    .on('click', () => this.showNames());
+            }
         }
 
         if (p.tooltip) {
@@ -299,6 +308,21 @@ class UI {
         }
     }
 
+    private showNames() {
+        let btn = d3.select(this.parent).select('#pdb-lig-env-names-btn');
+        let isActive = btn.classed('active');
+
+        if (isActive) {
+            this.display.toggleDepiction(false);
+            btn.style('color', '#637ca0');
+            btn.classed('active', false);
+        } else {
+            this.display.toggleDepiction(true);
+            btn.style('color', '');
+            btn.classed('active', true);
+        }
+    }
+
     private showHelp() {
         let el = d3.select(this.parent).select('#pdb-lig-env-help-container');
         let btn = d3.select(this.parent).select('#pdb-lig-env-help-btn');