Merge pull request #220 in STRUC/icn3d from release2115 to master

* commit 'f1dfad2ab4b768385a1970b91896be10edfc5188': Add colors to aligned sequence track based on Blosum62
ncbi · Feb 11, 2020 · b4dbd05 · b4dbd05
2 parents 6e47d91 + f1dfad2
commit b4dbd05
Show file tree

Hide file tree

Showing 12 changed files with 100 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,6 @@
 ## Change Log
+[icn3d-2.11.5](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.5.zip) was release on February 11, 2020. Add colors to aligned sequence track based on Blosum62.
+
 [icn3d-2.11.4](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.4.zip) was release on January 14, 2020. The compiling tool gulp was upgraded to version 4.
 
 [icn3d-2.11.3](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.3.zip) was release on January 7, 2020. A bug was fixed to have predefined sets available for hydrogen bonds/interations.

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 ## About iCn3D
 
-"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. <b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.4.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.4.zip). The "Download ZIP" link in this page does not include third-party libraries. 
+"I see in 3D" (iCn3D) Structure Viewer is a WebGL-based 3D viewer using Three.js and jQuery. iCn3D synchronizes the display of 3D structure, 2D interaction, and 1D sequences and annotations. Users' custom display can be saved in a short URL or a PNG image. <b>Complete package</b> of iCn3D including Three.js and jQuery can be downloaded from [https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.5.zip](https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.5.zip). The "Download ZIP" link in this page does not include third-party libraries. 
 * <b>View a 3D structure in iCn3D</b>: 
     Open the link https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html, input a PDB ID, and click "Load". You can also click "File" menu to "Open File" or input other IDs.
 

diff --git a/icn3d.html b/icn3d.html
@@ -2094,6 +2094,9 @@ <h3>Methods <a href="#Top"><span class="top">&nbsp;&nbsp;&nbsp;</span></a></h3>
 
 <a name="log"></a>
 <h2>Change Log:<img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/spacer.gif" width="25" height="1" border="0"><a href="#Top"><img src="https://www.ncbi.nlm.nih.gov/Structure/IMG/arrowup_blue.gif" width="12" height="12" border="0" alt="back to top"></a></h2>
+<a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.5.zip">icn3d-2.11.5</a> was release on February 11, 2020. Add colors to aligned sequence track based on Blosum62.
+<br><br>
+
 <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d-2.11.4.zip">icn3d-2.11.4</a> was release on January 14, 2020. The compiling tool gulp was upgraded to version 4.
 <br><br>
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "icn3d",
-  "version": "2.11.4",
+  "version": "2.11.5",
   "description": "iCn3D Structure Viewer",
   "main": "index.html",
   "scripts": {

diff --git a/src/icn3d/other_full.js b/src/icn3d/other_full.js
@@ -730,6 +730,8 @@ iCn3D.prototype.zoominSelection = function(atoms) { var me = this; //"use strict
 iCn3D.prototype.centerSelection = function(atoms) { var me = this; //"use strict";
    //this.resetOrientation();
 
+   this.opts['rotationcenter'] = 'highlight center';
+
    if(atoms === undefined) {
        atoms = this.hash2Atoms(this.hAtoms);
    }

diff --git a/src/icn3dui/annotations/addtrack.js b/src/icn3dui/annotations/addtrack.js
@@ -240,13 +240,18 @@ iCn3DUI.prototype.alignSequenceToStructure = function(chainid, data, title) { va
           }
       }
 
+      var cssColorArray = [];
       // the missing residuesatthe end ofthe seq will be filled up in the API showNewTrack()
       for(var i = 0, il = targetSeq.length; i < il; ++i) {
           if(target2queryHash.hasOwnProperty(i)) {
               text += querySeq[target2queryHash[i]];
+
+              var colorHexStr = me.getColorhexFromBlosum62(targetSeq[i], querySeq[target2queryHash[i]]);
+              cssColorArray.push("#" + colorHexStr);
           }
           else {
               text += '-';
+              cssColorArray.push("");
           }
       }
 
@@ -256,9 +261,9 @@ iCn3DUI.prototype.alignSequenceToStructure = function(chainid, data, title) { va
       text += "cannot be aligned";
   }
 
-  me.showNewTrack(chainid, title, text, undefined, target2queryHash);
+  me.showNewTrack(chainid, title, text, cssColorArray, target2queryHash, 'seq');
 
-  me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text), true);
+  me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text) + " | type seq", true);
 };
 
 iCn3DUI.prototype.clickAddTrackButton = function() { var me = this; //"use strict";
@@ -310,7 +315,8 @@ iCn3DUI.prototype.clickAddTrackButton = function() { var me = this; //"use stric
        var chainid = $("#" + me.pre + "track_chainid").val();
 
        var fasta = $("#" + me.pre + "track_fasta").val();
-       var title = 'fasta ' + fasta.substr(0, 5);
+       //var title = 'fasta ' + fasta.substr(0, 5);
+       var title = $("#" + me.pre + "fasta_title").val();
 
        //var text = $("#" + me.pre + "track_text").val();
        var url = 'https://www.ncbi.nlm.nih.gov/Structure/pwaln/pwaln.fcgi?from=track';
@@ -440,9 +446,9 @@ iCn3DUI.prototype.clickAddTrackButton = function() { var me = this; //"use stric
                        }
                    }
 
-                   me.showNewTrack(chainid, title, text, cssColorArray);
+                   me.showNewTrack(chainid, title, text, cssColorArray, undefined, undefined, rgbColor);
 
-                   me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text), true);
+                   me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text) + " | type bed | color " + rgbColor, true);
                }
            }
          };
@@ -464,8 +470,8 @@ iCn3DUI.prototype.clickAddTrackButton = function() { var me = this; //"use stric
        //me.showNewTrack(chainid, title, text);
        //me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text), true);
 
-       me.showNewTrack(chainid, title,  me.getFullText(text));
-       me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + text, true);
+       me.showNewTrack(chainid, title,  me.getFullText(text), undefined, undefined, 'custom');
+       me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + text + " | type custom", true);
     });
 
     // current selection
@@ -508,14 +514,14 @@ iCn3DUI.prototype.clickAddTrackButton = function() { var me = this; //"use stric
           }
        }
 
-       me.showNewTrack(chainid, title, text, cssColorArray);
+       me.showNewTrack(chainid, title, text, cssColorArray, undefined, undefined, 'selection');
 
-       me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text), true);
+       me.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + me.simplifyText(text) + " | type selection", true);
     });
 
 };
 
-iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, target2queryHash) {  var me = this; //"use strict";
+iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, target2queryHash, type, color) {  var me = this; //"use strict";
     //if(me.customTracks[chnid] === undefined) {
     //    me.customTracks[chnid] = {};
     //}
@@ -584,11 +590,15 @@ iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, tar
     var prevLineWidth = 0;
     var widthPerRes = 1;
 
+    var bAlignColor = (type === undefined || type === 'seq' || type === 'custom') && text.indexOf('cannot-be-aligned') == -1 && text.indexOf('cannot be aligned') == -1 ? true : false;
+
     for(var i = 0, il = text.length; i < il; ++i) {
       html += me.insertGap(chnid, i, '-');
 
       var c = text.charAt(i);
 
+      var colorHexStr = me.getColorhexFromBlosum62(c, me.icn3d.chainsSeq[chnid][i].name);
+
       if(c != ' ' && c != '-') {
           //var pos = me.icn3d.chainsSeq[chnid][i - me.matchedPos[chnid] ].resi;
           var pos = me.icn3d.chainsSeq[chnid][i].resi - me.matchedPos[chnid];
@@ -598,6 +608,12 @@ iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, tar
           if(cssColorArray !== undefined && cssColorArray[i] != '') {
               html += '<span id="' + pre + '_' + me.pre + chnid + '_' + pos + '" title="' + c + pos + '" class="icn3d-residue" style="color:' + cssColorArray[i] + '">' + c + '</span>';
           }
+          else if(color !== undefined) {
+              html += '<span id="' + pre + '_' + me.pre + chnid + '_' + pos + '" title="' + c + pos + '" class="icn3d-residue" style="color:rgb(' + rgbColor + ')">' + c + '</span>';
+          }
+          else if(bAlignColor) {
+              html += '<span id="' + pre + '_' + me.pre + chnid + '_' + pos + '" title="' + c + pos + '" class="icn3d-residue" style="color:#' + colorHexStr + '">' + c + '</span>';
+          }
           else {
               html += '<span id="' + pre + '_' + me.pre + chnid + '_' + pos + '" title="' + c + pos + '" class="icn3d-residue">' + c + '</span>';
           }
@@ -611,6 +627,12 @@ iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, tar
           if(cssColorArray !== undefined && cssColorArray[i] != '') {
               html2 += '<div style="display:inline-block; background-color:' + cssColorArray[i] + '; width:' + widthPerRes + 'px;" title="' + c + (i+1).toString() + '">&nbsp;</div>';
           }
+          else if(color !== undefined) {
+              html2 += '<div style="display:inline-block; background-color:rgb(' + rgbColor + '); width:' + widthPerRes + 'px;" title="' + c + (i+1).toString() + '">&nbsp;</div>';
+          }
+          else if(bAlignColor) {
+              html2 += '<div style="display:inline-block; background-color:#' + colorHexStr + '; width:' + widthPerRes + 'px;" title="' + c + (i+1).toString() + '">&nbsp;</div>';
+          }
           else {
               html2 += '<div style="display:inline-block; background-color:#333; width:' + widthPerRes + 'px;" title="' + c + (i+1).toString() + '">&nbsp;</div>';
           }
@@ -643,17 +665,17 @@ iCn3DUI.prototype.showNewTrack = function(chnid, title, text, cssColorArray, tar
     $("#" + me.pre + "tt_custom_" + chnid + "_" + simpTitle).html(html3);
 };
 
-iCn3DUI.prototype.checkGiSeq = function (chainid, title, text, index) { var me = this; //"use strict";
+iCn3DUI.prototype.checkGiSeq = function (chainid, title, text, type, color, index) { var me = this; //"use strict";
     if(index > 20) return false;
 
     if(me.giSeq !== undefined && me.giSeq[chainid] !== undefined) {
         text = me.getFullText(text);
-        me.showNewTrack(chainid, title, text);
+        me.showNewTrack(chainid, title, text, undefined, undefined, type, color);
         return false;
     }
 
     // wait for me.giSeq to be available
-    setTimeout(function(){ me.checkGiSeq(chainid, title, text, index + 1); }, 100);
+    setTimeout(function(){ me.checkGiSeq(chainid, title, text, type, color, index + 1); }, 100);
 };
 
 iCn3DUI.prototype.getFullText = function (text) { var me = this; //"use strict";

diff --git a/src/icn3dui/full_ui.js b/src/icn3dui/full_ui.js
@@ -1323,8 +1323,8 @@ iCn3DUI.prototype = {
         var firstAtom = me.icn3d.getFirstAtomObj(atomlistTarget);
 
         if(firstAtom !== undefined) {
-            commandname = "sphere." + firstAtom.chain + ":" + me.icn3d.residueName2Abbr(firstAtom.resn.substr(0, 3)) + firstAtom.resi + "-" + radius + "A";
-            if(bInteraction) commandname = "interactions." + firstAtom.chain + ":" + me.icn3d.residueName2Abbr(firstAtom.resn.substr(0, 3)) + firstAtom.resi + "-" + $("#" + me.pre + "contactthreshold").val() + "A";
+            commandname = "sphere." + firstAtom.chain + ":" + me.icn3d.residueName2Abbr(firstAtom.resn.substr(0, 3)).trim() + firstAtom.resi + "-" + radius + "A";
+            if(bInteraction) commandname = "interactions." + firstAtom.chain + ":" + me.icn3d.residueName2Abbr(firstAtom.resn.substr(0, 3)).trim() + firstAtom.resi + "-" + $("#" + me.pre + "contactthreshold").val() + "A";
             //commanddesc = "select a sphere around currently selected " + Object.keys(me.icn3d.hAtoms).length + " atoms with a radius of " + radius + " angstrom";
             commanddesc = commandname;
 
@@ -4387,7 +4387,7 @@ iCn3DUI.prototype = {
 
            me.icn3d.resetOrientation();
 
-           me.icn3d.applyOriginalColor();
+           //me.icn3d.applyOriginalColor();
 
            me.icn3d.draw();
            me.setLogCmd('reset orientation', true);
@@ -6371,6 +6371,7 @@ iCn3DUI.prototype = {
             me.icn3d.reinitAfterLoad();
 
             me.renderFinalStep(1);
+
             me.setMode('all');
 
             me.setLogCmd("reset", true);

diff --git a/src/icn3dui/html/set_html.js b/src/icn3dui/html/set_html.js
@@ -1651,6 +1651,7 @@ iCn3DUI.prototype.setDialogs = function() { var me = this; //"use strict";
     html += "<button id='" + me.pre + "addtrack_button1'>Add Track</button>";
     html += "      </div>";
     html += "      <div id='" + me.pre + "tracktab2'>";
+    html += "FASTA Title: <input type='text' id='" + me.pre + "fasta_title' placeholder='track title' size=16> <br><br>";
     html += "FASTA sequence: <br><textarea id='" + me.pre + "track_fasta' rows='5' style='width: 100%; height: " + (2*me.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
     html += "<button id='" + me.pre + "addtrack_button2'>Add Track</button>";
     html += "      </div>";

diff --git a/src/icn3dui/parsers/mmcif_mmdb_parser.js b/src/icn3dui/parsers/mmcif_mmdb_parser.js
@@ -232,7 +232,7 @@ iCn3DUI.prototype.loadMmcifSymmetry = function(data) { var me = this; //"use str
     me.icn3d.asuCnt = me.icn3d.biomtMatrices.length;
 };
 
-iCn3DUI.prototype.parseMmdbData = function (data, type) { var me = this; //"use strict";
+iCn3DUI.prototype.parseMmdbDataPart1 = function (data, type) { var me = this; //"use strict";
         // if type is defined, always process target before query
         if(data.atoms === undefined && data.molid2rescount === undefined) {
             alert('invalid MMDB data.');
@@ -327,15 +327,23 @@ iCn3DUI.prototype.parseMmdbData = function (data, type) { var me = this; //"use
         $("#" + me.pre + "accordion5").show();
 
         //me.loadAtomDataIn(data, id, 'mmdbid', undefined, type);
+};
 
+iCn3DUI.prototype.parseMmdbData = function (data, type) { var me = this; //"use strict";
         if(type === undefined) {
             me.deferredOpm = $.Deferred(function() {
+                  var id = (data.pdbId !== undefined) ? data.pdbId : data.mmdbId;
+
                   me.loadMmdbOpmData(data, id, type);
             });
 
             return me.deferredOpm.promise();
         }
         else {
+            me.parseMmdbDataPart1(data, type);
+
+            var id = (data.pdbId !== undefined) ? data.pdbId : data.mmdbId;
+
             me.loadAtomDataIn(data, id, 'mmdbid', undefined, type);
 
             me.loadMmdbOpmDataPart2(data, id, type);

diff --git a/src/icn3dui/parsers/pdb_parser.js b/src/icn3dui/parsers/pdb_parser.js
@@ -384,6 +384,12 @@ iCn3DUI.prototype.loadPdbDataBase = function(data, calphaonly, bOpm) { var me =
                 if(ssHash.hasOwnProperty(chain_resi)) {
                     ssOneLetter = ssHash[chain_resi];
                 }
+                else if(ssHash.hasOwnProperty(' _' + resi)) {
+                    ssOneLetter = ssHash[' _' + resi];
+                }
+                else if(ssHash.hasOwnProperty('_' + resi)) {
+                    ssOneLetter = ssHash['_' + resi];
+                }
 
                 var ss;
                 if(ssOneLetter === 'H') {
@@ -730,6 +736,7 @@ iCn3DUI.prototype.loadMmdbOpmData = function(data, pdbid, type) { var me = this;
           $("#" + me.pre + "intra_mem_z").val(-me.icn3d.halfBilayerSize);
 
           me.icn3d.init(); // remove all previously loaded data
+          me.parseMmdbDataPart1(data, type);
           me.loadAtomDataIn(data, pdbid, 'mmdbid', undefined, type, chainresiCalphaHash);
 
           me.loadMmdbOpmDataPart2(data, pdbid, type);
@@ -744,6 +751,7 @@ iCn3DUI.prototype.loadMmdbOpmData = function(data, pdbid, type) { var me = this;
             return;
         }
 
+        me.parseMmdbDataPart1(data, type);
         me.loadAtomDataIn(data, pdbid, 'mmdbid', undefined, type);
         me.loadMmdbOpmDataPart2(data, pdbid, type);
 

diff --git a/src/icn3dui/selection/commands.js b/src/icn3dui/selection/commands.js
@@ -1357,17 +1357,21 @@ iCn3DUI.prototype.applyCommand = function (commandStr) { var me = this; //"use s
     me.icn3d.draw();
   }
   else if(commandOri.indexOf('add track') == 0) {
-      //"add track | chainid " + chainid + " | title " + title + " | text " + text
+      //"add track | chainid " + chainid + " | title " + title + " | text " + text + " | type " + type + " | color " + color
       var paraArray = commandOri.split(' | ');
 
       var chainid = paraArray[1].substr(8);
       var title = paraArray[2].substr(6);
       var text = paraArray[3].substr(5);
+      var type;
+      if(paraArray.length >= 5) type = paraArray[4].substr(5);
+      var color;
+      if(paraArray.length >= 6) color = paraArray[5].substr(6);
 
       $("#" + me.pre + "anno_custom")[0].checked = true;
       $("[id^=" + me.pre + "custom]").show();
 
-      me.checkGiSeq(chainid, title, text, 0);
+      me.checkGiSeq(chainid, title, text, type, color, 0);
   }
   else if(command.indexOf('remove one stabilizer') == 0) {
     var paraArray = command.split(' | ');