icn3d 3.39.0 → 3.40.0

package/icn3d.module.js

@@ -13693,6 +13693,10 @@ class SetMenu {
 
         html += "<ul class='icn3d-mn-item'>";
 
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.getLink('mn2_2ddepiction', '2D Depiction ' + me.htmlCls.wifiStr, 1, 1);
+        }
+
         if(me.cfg.cid === undefined) {
             html += this.getLink('mn6_selectannotations', 'Seq. & Annotations ' + me.htmlCls.wifiStr, 1, 1);
 
@@ -15517,24 +15521,30 @@ class SetDialog {
         html += "</div>";
 
 
-        html += me.htmlCls.divStr + "dl_ligplot' sty2D Interaction for One Ligand/Residule='background-color:white' class='" + dialogClass + "'>";
-        html += this.addNotebookTitle('dl_ligplot', 'e with Atom Details');
+        html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
+
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.addNotebookTitle('dl_ligplot', '2D Depiction for Chemicals');
+        }
+        else {
+            html += this.addNotebookTitle('dl_ligplot', '2D Interaction for One Ligand/Residue with Atom Details');
 
-        html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
+            html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
 
-        html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
-          + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
-          + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
+            html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+            + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
+            + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
 
-        html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
+            html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
 
-        // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
-        // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
-        html += "<b>Color legend</b> for interactions (dashed lines): <br>";
+            // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
+            // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
+            html += "<b>Color legend</b> for interactions (dashed lines): <br>";
 
-        html += me.htmlCls.setHtmlCls.setColorHints();
+            html += me.htmlCls.setHtmlCls.setColorHints();
 
-        html += "<br></div>";
+            html += "<br></div>";
+        }
 
         me.ligplotid = me.pre + 'ligplot';
         html += me.htmlCls.divNowrapStr + buttonStrTmp + me.ligplotid + '_svg">SVG</button>' + me.htmlCls.space2;
@@ -16920,6 +16930,11 @@ class Events {
              thisClass.setLogCmd("view interactions", true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn2_2ddepiction", "click", async function(e) { let ic = me.icn3d;
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
+            thisClass.setLogCmd("view 2d depiction", true);
+       });
+
         me.myEventCls.onIds("#" + me.pre + "search_seq_button", "click", async function(e) { me.icn3d;
            e.stopImmediatePropagation();
            await thisClass.searchSeq();
@@ -28123,6 +28138,8 @@ class Camera {
                 }
             }
 
+            // ic.cam.add(ic.directionalLight);
+
             ic.cam.updateProjectionMatrix();
     //    }
     }
@@ -38058,6 +38075,11 @@ class Alternate {
             ic.directionalLight.position.copy(ic.lightPos.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight2.position.copy(ic.lightPos2.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight3.position.copy(ic.lightPos3.clone().applyQuaternion( quaternion ).normalize());
+
+            // adjust the light according to the position of camera
+            ic.directionalLight.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight2.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight3.applyMatrix4(cam.matrixWorld);
         }
 
         if(!ic.bVr) ic.renderer.setPixelRatio( window.devicePixelRatio ); // r71
@@ -52952,7 +52974,10 @@ class ViewInterPairs {
             cntHbond += result.cnt;
             svgHtmlNode += result.svgHtmlNode;
             svgHtmlLine += result.svgHtmlLine;
-            if(result.cnt > 0) residname2List += residname2 + ":hbond_" + result.cnt + " ";
+            // if(result.cnt > 0) residname2List += residname2 + ":hbond_" + result.cnt + " ";
+            // add hydrogen bond between main or side chains. result.mainside has value such as main,side,side,side  
+            // for two hydrogens between main and side, and side and side chains
+            if(result.cnt > 0) residname2List += residname2 + ":hbond_" + result.cnt + ":type_" + result.mainside + " ";
 
             labels2dist = ic.resids2inter[resids]['ionic'];
             result = this.getInteractionPairDetails(labels2dist, type, 'ionic', index2xy, xlen, ylen, xcenter, ycenter);
@@ -52960,7 +52985,7 @@ class ViewInterPairs {
             cntIonic += result.cnt;
             svgHtmlNode += result.svgHtmlNode;
             svgHtmlLine += result.svgHtmlLine;
-            if(result.cnt > 0) residname2List += residname2 + ":ionic_" + result.cnt + " ";
+            if(result.cnt > 0) residname2List += residname2 + ":ionic_" + result.cnt + ":type_" + result.mainside + " ";
 
             labels2dist = ic.resids2inter[resids]['halogen'];
             result = this.getInteractionPairDetails(labels2dist, type, 'halogen', index2xy, xlen, ylen, xcenter, ycenter);
@@ -52968,7 +52993,7 @@ class ViewInterPairs {
             cntHalegen += result.cnt;
             svgHtmlNode += result.svgHtmlNode;
             svgHtmlLine += result.svgHtmlLine;
-            if(result.cnt > 0) residname2List += residname2 + ":halogen_" + result.cnt + " ";
+            if(result.cnt > 0) residname2List += residname2 + ":halogen_" + result.cnt + ":type_" + result.mainside + " ";
 
             labels2dist = ic.resids2inter[resids]['pi-cation'];
             result = this.getInteractionPairDetails(labels2dist, type, 'pi-cation', index2xy, xlen, ylen, xcenter, ycenter);
@@ -52976,7 +53001,7 @@ class ViewInterPairs {
             cntPication += result.cnt;
             svgHtmlNode += result.svgHtmlNode;
             svgHtmlLine += result.svgHtmlLine;
-            if(result.cnt > 0) residname2List += residname2 + ":pi-cation_" + result.cnt + " ";
+            if(result.cnt > 0) residname2List += residname2 + ":pi-cation_" + result.cnt + ":type_" + result.mainside + " ";
 
             labels2dist = ic.resids2inter[resids]['pi-stacking'];
             result = this.getInteractionPairDetails(labels2dist, type, 'pi-stacking', index2xy, xlen, ylen, xcenter, ycenter);
@@ -52984,7 +53009,7 @@ class ViewInterPairs {
             cntPistacking += result.cnt;
             svgHtmlNode += result.svgHtmlNode;
             svgHtmlLine += result.svgHtmlLine;
-            if(result.cnt > 0) residname2List += residname2 + ":pi-stacking_" + result.cnt + " ";
+            if(result.cnt > 0) residname2List += residname2 + ":pi-stacking_" + result.cnt + ":type_" + result.mainside + " ";
 
             // put contact as the last one since contact will use the same node as other interactions in ligand-protein interactoin
             labels2dist = ic.resids2inter[resids]['contact'];
@@ -53038,7 +53063,7 @@ class ViewInterPairs {
         return tmpText;
     }
     getInteractionPairDetails(labels2dist, type, interactionType, index2xy, xlen, ylen, xcenter, ycenter) { let ic = this.icn3d; ic.icn3dui;
-        let svgHtmlNode = '', svgHtmlLine = '', tmpText = '', cnt = 0;
+        let svgHtmlNode = '', svgHtmlLine = '', tmpText = '', cnt = 0, mainside= '';
         let colorText1 = ' <span style="background-color:#';
         let colorText2 = '">&nbsp;&nbsp;&nbsp;</span>';
         if(labels2dist !== undefined) {
@@ -53055,6 +53080,12 @@ class ViewInterPairs {
                 let resid1 = resid1Ori.substr(0, pos1);
                 let resid2 = resid2Ori.substr(0, pos2);
 
+                let atomName1 = resid1.substr(resid1.indexOf('@') + 1);
+                resid2.substr(resid2.indexOf('@') + 1);
+                let atomType1 = (atomName1 === "N" || atomName1 === "C" || atomName1 === "O" || atomName1 === "CA") ? 'main' : 'side';
+                if(mainside) mainside += ';';
+                mainside += atomType1 + ',' + atomType1;
+
                 let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
                 let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
                 let color1 = (atom1.color) ? atom1.color.getHexString() : '';
@@ -53076,7 +53107,7 @@ class ViewInterPairs {
                 }
             }
         }
-        return {html: tmpText, cnt: cnt, svgHtmlNode: svgHtmlNode, svgHtmlLine: svgHtmlLine}
+        return {html: tmpText, cnt: cnt, svgHtmlNode: svgHtmlNode, svgHtmlLine: svgHtmlLine, mainside: mainside}
     }
 
     getContactPairDetails(labels2dist, type, interactionType, index2xy, xlen, ylen, xcenter, ycenter) { let ic = this.icn3d; ic.icn3dui;
@@ -64482,6 +64513,9 @@ class LoadPDB {
 
                 ///id = line.substr(62, 4).trim();
                 id = line.substr(62).trim();
+                // remove "_" in the id
+                id = id.replace(/_/g, '-');
+                
                 oriId = id;
 
                 if(id == '') {
@@ -65392,6 +65426,8 @@ class LoadCIF {
             
             if(block.getCategory("_entry")) {
                 id = block.getCategory("_entry").getColumn("id").getString(0);
+                // remove "_" in the id
+                id = id.replace(/_/g, '-');
 
                 if(id == '') {
                     if(bAppend) {
@@ -69987,7 +70023,9 @@ class LoadScript {
           }
           else if(command.indexOf('view interactions') == 0 && me.cfg.align !== undefined) { // the command may have "|||{"factor"...
               await thisClass.applyCommandViewinteraction(strArray[0].trim());
-
+          }
+          else if(command.indexOf('view 2d depiction') == 0) { // the command may have "|||{"factor"...
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
           }
           else if(command.indexOf('symmetry') == 0) {
             ic.bAxisOnly = false;
@@ -70197,6 +70235,9 @@ class LoadScript {
                     else if(lastCommand.indexOf('view interactions') == 0 && me.cfg.align !== undefined) {
                         await thisClass.applyCommandViewinteraction(lastCommand);
                     }
+                    else if(lastCommand.indexOf('view 2d depiction') == 0) {
+                      await ic.ligplotCls.drawLigplot(ic.atoms, true);
+                    }
                     else if(lastCommand.indexOf('symmetry') == 0) {
                         let title = lastCommand.substr(lastCommand.indexOf(' ') + 1);
                         ic.symmetrytitle =(title === 'none') ? undefined : title;
@@ -73114,7 +73155,6 @@ class Dssp {
             if(ssHash !== undefined && JSON.stringify(ssHash).indexOf('Oops there was a problem') === -1) {
               for(let chainNum in ic.chainsSeq) {
                   let pos = chainNum.indexOf('_');
-
                   // one structure at a time
                   if(chainNum.substr(0, pos) != struArray[index]) continue;
 
@@ -78581,8 +78621,13 @@ class Ligplot {
         this.icn3d = icn3d;
     }
 
-    async drawLigplot(atomSet1) { let ic = this.icn3d, me = ic.icn3dui;
-        me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+    async drawLigplot(atomSet1, bDepiction) { let ic = this.icn3d, me = ic.icn3dui;
+        if(bDepiction) {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', '2D Depiction');
+        }
+        else {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+        }
 
         let widthOri, heightOri, width = 100, height = 100;
         ic.len4ang = 80;
@@ -78664,19 +78709,28 @@ class Ligplot {
         let offset = - ic.len4ang;
         let svgHtml = "<svg id='" + id + "' viewBox='" + offset + "," + offset + "," + width + "," + heightAll + "' width='" + graphWidth + "px' font-family='sans-serif' stroke='rgb(0,0,0)' stroke-width='2' stroke-linecap='round'>";
 
-        let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
-        let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
-        ic.bLigplot = true;
+        if(bDepiction) {
+            svgHtml += lineSvg + nodeSvg;
+        }
+        else {
+            let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
+            let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
+            // ic.bLigplot = true;
 
-        svgHtml += lineSvg + result.svgHtmlLine;
+            svgHtml += lineSvg + result.svgHtmlLine;
 
-        svgHtml += nodeSvg + result.svgHtmlNode;
+            svgHtml += nodeSvg + result.svgHtmlNode;
+        }
 
         svgHtml += "</svg>";
 
-        $("#" + ic.pre + "ligplotDiv").html(svgHtml);
-
-        this.setEventsForLigplot();
+        if(bDepiction) {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+        }
+        else {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+            this.setEventsForLigplot();
+        }  
     }
 
     
@@ -80326,6 +80380,11 @@ class SaveFile {
 
                 $("#" + ic.pre + "title").html("PubChem CID <a id='" + ic.pre + "titlelink' href='" + url + "' style='color:" + titlelinkColor + "' target='_blank'>" + ic.inputid.toUpperCase() + "</a>: " + title);
             }
+            else if(me.cfg.smiles !== undefined) {
+                let text = decodeURIComponent(me.cfg.smiles);
+                if(text.length > 60) text = text.substr(0, 60) + "...";
+                $("#" + ic.pre + "title").html("SMILES: " + text);
+            }
             else if(me.cfg.align !== undefined) {
                 title = 'VAST+ alignment of ' + Object.keys(ic.structures);
 
@@ -83745,7 +83804,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.39.0';
+    this.REVISION = '3.40.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "icn3d",
-  "version": "3.39.0",
+  "version": "3.40.0",
   "main": "./icn3d.js",
   "exports": {
     ".": {