icn3d 3.23.4 → 3.23.5

package/icn3d.js

@@ -7039,6 +7039,12 @@ class ClickMenu {
             thisClass.setLogCmd('color confidence', true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrIgstrand", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+            //ic.legendClick = 6;
+            ic.setOptionCls.setOption('color', 'ig strand');
+            thisClass.setLogCmd('color ig strand', true);
+        });
+
 
         me.myEventCls.onIds("#" + me.pre + "mn4_clrArea", "click", function(e) { me.icn3d; //e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_colorbyarea', "Color based on residue's solvent accessibility");
@@ -9354,6 +9360,8 @@ class SetMenu {
             //if(!me.cfg.mmtfid && !me.cfg.pdbid && !me.cfg.opmid && !me.cfg.mmdbid && !me.cfg.gi && !me.cfg.uniprotid && !me.cfg.blast_rep_id && !me.cfg.cid && !me.cfg.mmcifid && !me.cfg.align && !me.cfg.chainalign) {
                 html += this.getRadio('mn4_clr', 'mn4_clrConfidence', 'AlphaFold<br><span style="padding-left:1.5em;">Confidence</span>', undefined, 1, 1);
             //}
+
+            html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
         }
         else {
             //if(!me.cfg.hidelicense) html += this.getRadio('mn4_clr', 'mn1_delphi2', 'DelPhi<br><span style="padding-left:1.5em;">Potential ' + me.htmlCls.licenseStr + '</span>');
@@ -9572,12 +9580,12 @@ class SetMenu {
             html += this.getMenuText('mn6_igrefwrap', 'Ref. Number', undefined, undefined, 1);
 
             html += "<ul>";
-/*
+
             html += this.getLink('mn6_igrefYes', 'Show Ig Ref. Number', undefined, 2);
             html += this.getLink('mn6_igrefNo', 'Hide Ig Ref. Number', undefined, 2);
 
             html += this.getMenuSep();
-*/
+
             html += this.getLink('mn6_customref', 'Custom Ref. Number', undefined, 2);
             html += "</ul>";
             html += "</li>";
@@ -10677,7 +10685,7 @@ class SetDialog {
         html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
         html += "List of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
         html += "<div style='display:inline-block; width:20px'></div>" + me.htmlCls.buttonStr + "reload_mmdbaf' style='width:150px'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px; width:250px'>Load Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
-        html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric ; Unit (All Chains)</button>" + "<br/><br/>";
+        html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
 
         html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
         + me.pre + 'asu_bu2_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
@@ -11811,9 +11819,16 @@ class Events {
                 else {
                     ic.loadCmd = 'load mmdbaf0 ' + me.cfg.mmdbafid;
                 }
-                me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
+                me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);  
+
+                let bStructures = (ic.structures && Object.keys(ic.structures).length > 0) ? true : false;
 
                 await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);   
+
+                if(bStructures) {
+                    if(ic.bSetChainsAdvancedMenu) ic.definedSetsCls.showSets();
+                    if(ic.bAnnoShown) await ic.showAnnoCls.showAnnotations();
+                }
             }
         }
     }
@@ -34366,6 +34381,35 @@ class SetColor {
 
                 break;
 
+            case 'ig strand':
+                if(ic.bShowRefnum) {
+                    for(let resid in ic.resid2refnum) {
+                        let refnumLabel = ic.resid2refnum[resid];
+                        let color;
+                        if(!refnumLabel) {
+                            color = me.parasCls.thr(me.htmlCls.GREYB);
+                        }
+                        else {
+                            let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
+                            let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
+                            color = ic.showSeqCls.getRefnumColor(currStrand);
+
+                            if(ic.residIgLoop.hasOwnProperty(resid)) {
+                                color = me.parasCls.thr(me.htmlCls.GREYB);
+                            }
+                        }
+                        
+                        for (let i in ic.residues[resid]) {
+                            let atom = ic.atoms[i];
+                            atom.color = me.parasCls.thr(color);
+        
+                            ic.atomPrevColors[i] = atom.color;
+                        }
+                    }
+                }
+
+                break;
+
             case 'residue custom':
                 for (let i in atoms) {
                     let atom = ic.atoms[i];
@@ -35027,6 +35071,9 @@ class SetOption {
         else if(colorType == 'hydrophobic') {
             colorLabel = 'Hydrophobicity';
         }
+        else if(colorType == 'ig strand') {
+            colorLabel = 'Ig Strand';
+        }
 
         let html = "Color by <b>" + colorLabel + "</b><br><br>";
  
@@ -35047,6 +35094,9 @@ class SetOption {
         else if (colorType == 'charge'){
             html += this.getColorLegendForCharge(ic.hAtoms);
         }
+        else if (colorType == 'ig strand'){
+            html += this.getColorLegendForIgstrand(ic.hAtoms);
+        }
         //else if (ic.legendClick == 4){
         else if (colorType == 'normalized hydrophobic' || colorType == 'hydrophobic') {
             let bOriResn = true;
@@ -35270,6 +35320,40 @@ class SetOption {
 
         return html;
      }
+
+     getColorLegendForIgstrand(atomHash) { let ic = this.icn3d; ic.icn3dui;
+        let html = '';
+
+        const name2color = {
+            "A^ Strand": "FF00FF", 
+            "A Strand": "663399",
+            "A* Strand": "FFC0CB",
+            "A Strand": "9370db",
+            "B Strand": "ba55d3",
+            "C Strand": "0000FF",
+            "C' Strand": "6495ED",
+            "C'' Strand": "006400",
+            "D Strand": "00FF00",
+            "E Strand": "FFFF00",
+            "F Strand": "FFA500",
+            "G Strand": "FF0000",
+            "G* Strand": "8B0000",
+            "Loop": "CCCCCC"
+        };
+ 
+        html += "<div>";
+        for (let name in name2color) {
+            let color = name2color[name];
+            html += "<span>";
+            html += "<div style='width: 10px; height: 10px; background-color:#" + color + "; border: 0px;display:inline-block;' ></div> ";
+            html += name;
+            html +=  "</span><br>";
+        }
+
+        html += "</div>";
+
+        return html;
+     }
  }
 
 /**
@@ -40388,6 +40472,14 @@ class ShowAnno {
              } // align seq to structure
         }
         ic.bAnnoShown = true;
+
+        if(ic.bShowRefnum) {
+            ic.opts.color = 'ig strand';
+            ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
+
+            ic.selectionCls.selectAll_base();
+            ic.hlUpdateCls.updateHlAll();
+        }
     }
 
     async showAnnoSeqData(nucleotide_chainid, chemical_chainid, chemical_set) { let ic = this.icn3d, me = ic.icn3dui;
@@ -41678,6 +41770,7 @@ class ShowSeq {
                     else {
                         if(bShowRefnum && currStrand != ' ') {
                             html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel);
+                            if(bLoop) ic.residIgLoop[residueid] = 1;
                         }
                         else {
                             html += '<span></span>';
@@ -41725,6 +41818,7 @@ class ShowSeq {
 
                         if(bShowRefnum && currStrand != ' ') {
                             html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel);
+                            if(bLoop) ic.residIgLoop[residueid] = 1;
                         }
                         else {
                             html += '<span></span>';
@@ -41857,48 +41951,48 @@ class ShowSeq {
         return html;
     }
 
-    getRefnumColor(currStrand) {  let ic = this.icn3d; ic.icn3dui;
-        if(currStrand == "A^") { // deep sky blue
-            return '#9900ff'; //'#00BFFF';
+    getRefnumColor(currStrand) {  let ic = this.icn3d, me = ic.icn3dui;
+        if(currStrand == "A^") { //magenta // deep sky blue
+            return '#FF00FF'; //'#9900ff'; //'#00BFFF';
         }
-        else if(currStrand == "A") { // blue
-            return '#9900ff'; //'#0000FF';
+        else if(currStrand == "A") { //rebecca purple // blue
+            return '#663399'; //'#9900ff'; //'#0000FF';
         }
-        else if(currStrand == "A*") { // sky blue
-            return '#9900ff'; //'#87CEEB';
+        else if(currStrand == "A*") { //pink  // sky blue
+            return '#FFC0CB'; //'#9900ff'; //'#87CEEB';
         }
-        else if(currStrand == "A'") { // steel blue
-            return '#9900ff'; //'#4682B4';
+        else if(currStrand == "A'") { //medium purple // steel blue
+            return '#9370db'; //'#9900ff'; //'#4682B4';
         }
-        else if(currStrand == "B") { // cyan
-            return '#4a86e8'; //'#00FFFF';
+        else if(currStrand == "B") { //medium orchid // cyan
+            return '#ba55d3'; //'#0000FF'; //'#4a86e8'; //'#00FFFF';
         }
-        else if(currStrand == "C") { // green
-            return '#76d6ff'; //'#00FF00';
+        else if(currStrand == "C") { //blue // green
+            return '#0000FF'; //'#76d6ff'; //'#00FF00';
         }
-        else if(currStrand == "C'") { // yellow
-            return '#00b050'; //'#FFFF00';
+        else if(currStrand == "C'") { //corn blue // yellow
+            return '#6495ED'; //'#006400'; //'#00b050'; //'#FFFF00';
         }
-        else if(currStrand == "C''") { // orange
-            return '#00ff00'; //'#FFA500';
+        else if(currStrand == "C''") { //dark green // orange
+            return '#006400'; //'#00ff00'; //'#FFA500';
         }
-        else if(currStrand == "D") { // brown
-            return '#fffb00'; //'#A52A2A';
+        else if(currStrand == "D") { //green // brown
+            return '#00FF00'; //'#fffb00'; //'#A52A2A';
         }
-        else if(currStrand == "E") { // pink
-            return '#ffd966'; //'#FFC0CB';
+        else if(currStrand == "E") { //yellow // pink
+            return '#F0E68C'; //'#ff9900'; //'#ffd966'; //'#FFC0CB';
         }
-        else if(currStrand == "F") { // magenta
-            return '#ff9900'; //'#FF00FF';
+        else if(currStrand == "F") { //orange // magenta
+            return '#FFA500'; //'#FF00FF'; //'#ff9900'; //'#FF00FF';
         }
-        else if(currStrand == "G") { // red
-            return '#ff2600'; //'#FF0000';
+        else if(currStrand == "G") { //red // red
+            return '#FF0000'; //'#ff2600'; //'#FF0000';
         }
-        else if(currStrand == "G*") { // salmon
-            return '#ff2600'; //'#FA8072';
+        else if(currStrand == "G*") { //dark red // salmon
+            return '#8B0000'; //'#ff2600'; //'#FA8072';
         }
         else {
-            return '#000';
+            return me.htmlCls.GREYB;
         }
     }
 
@@ -47140,7 +47234,18 @@ class ChainalignParser {
         }
 
         // ic.deferredMmdbaf = $.Deferred(function() {
-        let structArray = idlist.split(',');
+        let structArrayTmp = idlist.split(',');
+
+        let structArray = [];
+        // remove redundant structures
+        for(let i = 0, il = structArrayTmp.length; i < il; ++i) {
+            if(!ic.structures.hasOwnProperty(structArrayTmp[i].toUpperCase())) {
+                structArray.push(structArrayTmp[i]);
+            }
+        }
+        
+        if(structArray.length == 0) return;
+        
         ic.structArray = ic.structArray.concat(structArray);
 
         let ajaxArray = [];
@@ -58627,6 +58732,10 @@ class LoadScript {
 
         // load pdb, mmcif, mmdb, cid
         let id = loadStr.substr(loadStr.lastIndexOf(' ') + 1);
+
+        // skip loading the structure if it was loaded before
+        if(ic.structures.hasOwnProperty(id)) return;
+
         ic.inputid = id;
         if(command.indexOf('load mmtf') !== -1) {
           me.cfg.mmtfid = id;
@@ -58701,7 +58810,7 @@ class LoadScript {
         else if(command.indexOf('load alignment') !== -1) {
           me.cfg.align = id;
 
-          if(me.cfg.inpara.indexOf('atype=2') == -1) {
+          if(me.cfg.inpara || me.cfg.inpara.indexOf('atype=2') == -1) {
             await ic.alignParserCls.downloadAlignment(me.cfg.align);
           }
           else {
@@ -69257,7 +69366,7 @@ class iCn3D {
     this.optsOri = {};
     this.optsOri['camera']             = 'perspective';        //perspective, orthographic
     this.optsOri['background']         = 'black';              //transparent, black, grey, white
-    this.optsOri['color']              = 'chain';              //spectrum, secondary structure, charge, hydrophobic, conserved, chain, residue, atom, b factor, red, green, blue, magenta, yellow, cyan, white, grey, custom
+    this.optsOri['color']              = 'chain';              //spectrum, secondary structure, charge, hydrophobic, conserved, chain, residue, atom, b factor, red, green, blue, magenta, yellow, cyan, white, grey, custom, ig strand
     this.optsOri['proteins']           = 'ribbon';             //ribbon, strand, cylinder and plate, schematic, c alpha trace, backbone, b factor tube, lines, stick, ball and stick, sphere, nothing
     this.optsOri['sidec']              = 'nothing';            //lines2, stick2, ball and stick2, sphere2, nothing
     this.optsOri['nucleotides']        = 'nucleotide cartoon'; //nucleotide cartoon, o3 trace, backbone, schematic, lines, stick,
@@ -69524,6 +69633,7 @@ iCn3D.prototype.init_base = function (bKeepCmd) {
 
     this.chainsMapping = {}; // structure_chain name -> residue id hash such as {'structure_chain_resi1': 'reference residue such as K10', ...}
     this.resid2refnum = {}; // residue id -> reference number, e.g.,  {'1WIO_A_16': '2150', ...}
+    this.residIgLoop = {}; // residue ids in the loop regions of ig domain
     this.refnum2residArray = {}; // reference number -> array of residue id, e.g.,  {'2150': ['1WIO_A_16', ...], ...}
     this.bShowRefnum = false;
     
@@ -69696,7 +69806,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.23.1';
+    this.REVISION = '3.23.2';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;