Merge branch 'dev'

dependencies/index.html

@@ -22,7 +22,7 @@
 <script>
     var renderBmInteractions = function (id, bmId) {
         var int =
-            `<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" bound-molecule-id="${bmId}" environment="dev"></pdb-ligand-env>`
+            `<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" bound-molecule-id="${bmId}" zoom-on environment="dev"></pdb-ligand-env>`
         document.getElementById('rt').innerHTML = int;
     };
 

src/plugin/manager.ts

@@ -67,9 +67,9 @@ class Visualization {
 
         if (uiParameters.zoom) this.zoomHandler = this.getZoomHandler();
 
-        document.addEventListener(Config.molstarClickEvent, e => this.nodeMouseEnterEventHandler(e));
-        document.addEventListener(Config.molstarMouseoverEvent, e => this.nodeMouseEnterEventHandler(e));
-        document.addEventListener(Config.molstarMouseoutEvent, () => this.nodeMouseLeaveEventHandler());
+        document.addEventListener(Config.molstarClickEvent, e => this.molstarClickEventHandler(e));
+        document.addEventListener(Config.molstarMouseoverEvent, e => this.molstarClickEventHandler(e));
+        document.addEventListener(Config.molstarMouseoutEvent, () => this.molstarMouseoutEventHandler());
 
         d3.select(this.parent).on('resize', () => this.resize());
         this.addMarkers();
@@ -84,7 +84,14 @@ class Visualization {
     }
 
 
-    private nodeMouseEnterEventHandler(e: any) {
+    /**
+     * Handle molstar click event. Makes interaction node highlight
+     *
+     * @private
+     * @param {*} e Data pased by molstar component
+     * @memberof Visualization
+     */
+    private molstarClickEventHandler(e: any) {
         if (this.fullScreen) return;
 
         let hash = `${e.eventData.auth_asym_id}${e.eventData.auth_seq_id}${e.eventData.ins_code}`;
@@ -101,7 +108,14 @@ class Visualization {
 
     }
 
-    private nodeMouseLeaveEventHandler() {
+
+    /**
+     * Handles mouse leave molstar event. Removes interaction node highlight
+     *
+     * @private
+     * @memberof Visualization
+     */
+    private molstarMouseoutEventHandler() {
         if (this.fullScreen) return;
 
         this.nodes?.each((node: Model.InteractionNode, index: number, group: any) => {
@@ -110,9 +124,8 @@ class Visualization {
                 return;
             }
         });
-
-        this.links.attr('opacity', 1);
-        this.nodes.attr('opacity', 1);
+        this.links?.attr('opacity', 1);
+        this.nodes?.attr('opacity', 1);
 
     }
 
@@ -145,8 +158,8 @@ class Visualization {
             this.fireExternalNullEvent(Config.interactionMouseoutEvent);
         }
 
-        this.links.attr('opacity', 1);
-        this.nodes.attr('opacity', 1);
+        this.links?.attr('opacity', 1);
+        this.nodes?.attr('opacity', 1);
     }
 
     private dragHandler = d3.drag()
@@ -213,7 +226,7 @@ class Visualization {
         let url = Resources.carbohydratePolymerAPI(pdbid, bmId, entityId, this.environment);
 
         d3.json(url)
-            .catch(e => this.processError(e, 'No interactions to display'))
+            .catch(e => this.processError(e, 'No interactions data are available.'))
             .then((data: any) => this.addBoundMoleculeInteractions(data, bmId))
             .then(() => new Promise(resolve => setTimeout(resolve, 1500)))
             .then(() => this.centerScene());
@@ -351,6 +364,12 @@ class Visualization {
 
 
     // #region menu functions
+    /**
+     * Export scene into an SVG components. It relies on the availability
+     * of the external CSS for SVG styling. Otherwise it does not work.
+     *
+     * @memberof Visualization
+     */
     public saveSvg() {
         d3.text(Resources.ligEnvCSSAPI(this.environment))
             .then(x => {
@@ -386,7 +405,7 @@ class Visualization {
         let dataBlob = new Blob([JSON.stringify(this.interactionsData, null, 4)], { type: 'application/json' });
 
         downloadLink.href = URL.createObjectURL(dataBlob);
-        downloadLink.download = this.interactionsData === undefined ? 'no name.json' : `${this.pdbId}_${this.presentBindingSite.bmId}_interactions.json`;
+        downloadLink.download = this.interactionsData === undefined ? 'no_name.json' : `${this.pdbId}_${this.presentBindingSite.bmId}_interactions.json`;
         document.body.appendChild(downloadLink);
         downloadLink.click();
         document.body.removeChild(downloadLink);
@@ -453,8 +472,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;
-        let molHeight = maxY - minY;
+        let molWidth = (maxX - minX) + 1; // +1 to avoid 0 division
+        let molHeight = (maxY - minY) + 1;
 
         // how much larger the drawing area is than the width and the height
         let widthRatio = this.parent.offsetWidth / molWidth;
@@ -480,8 +499,7 @@ class Visualization {
 
         let translation = d3.zoomIdentity.translate(xTrans, yTrans).scale(minRatio);
         this.zoomHandler?.transform(this.svg, translation);
-
-    };
+    }
 
     // #endregion menu functions
 
@@ -806,8 +824,7 @@ class Visualization {
             .on('tick', () => this.simulationStep());
 
         this.dragHandler(this.nodes);
-
-        if (this.zoomHandler) this.zoomHandler(this.svg);
+        if (this.zoomHandler !== undefined) this.zoomHandler(this.svg, d3.zoomIdentity);
     }
 
 
@@ -854,7 +871,7 @@ class Visualization {
 
 
     private nodeDim(x: Model.InteractionNode, i: number, g: any) {
-        if (!x.residue.isLigand) x.scale = 1.0;
+        if (!x.static) x.scale = 1.0;
 
         if (x.residue.isLigand) d3.select(g[i]).style('cursor', 'default');
         d3.select(g[i])

src/plugin/model.ts

@@ -370,8 +370,7 @@ namespace Model {
                 let bgnNode = this.processResidueInteractionPartner(x.begin);
                 let endNode = this.processResidueInteractionPartner(x.end);
 
-                let link = new ResidueResidueLink(bgnNode, endNode, x.interactions)
-
+                let link = new ResidueResidueLink(bgnNode, endNode, x.interactions);
                 this.links.push(link);
             });
 
@@ -388,7 +387,8 @@ namespace Model {
                 }
             });
 
-            this.interactionNodes = Array.from(this.tmpNodesSet.values());
+            this.residues = Array.from(this.tmpResidueSet)
+            this.interactionNodes = Array.from(this.tmpNodesSet);
 
             return this;
         }

src/styles/pdb-ligand-env-svg.css

@@ -97,13 +97,13 @@
 .pdb-lig-env-svg-node text tspan:first-child {
     cursor: inherit;
     font-weight: 100;
-    font-size: 23px;
+    font-size: 21px;
 }
 
 .pdb-lig-env-svg-node text tspan:nth-child(2) {
     cursor: inherit;
     font-weight: lighter;
-    font-size: 21px;
+    font-size: 18px;
 }
 
 .pdb-lig-env-svg-ligand-res {