icn3d 3.32.0 → 3.33.1

package/icn3d.js

@@ -6893,7 +6893,10 @@ class UtilsCls {
           let nOtherAtoms = 0;
           for(let i in atomlist) {
             if(index < testLength) {
-              let atomName = atomlist[i].name.trim();        
+              let atomName = atomlist[i].name;   
+              if(!atomName) continue;
+              atomName = atomName.trim();
+
               if(atomName !== "CA" && atomName !== "P" && atomName !== "O3'" && atomName !== "O3*") {
                 //bOtherAtoms = true;
                 //break;
@@ -9046,7 +9049,7 @@ class ClickMenu {
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_cid", "click", function(e) { me.icn3d; //e.preventDefault();
-           me.htmlCls.dialogCls.openDlg('dl_cid', 'Please input PubChem CID');
+           me.htmlCls.dialogCls.openDlg('dl_cid', 'Please input PubChem Compound');
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn1_pngimage", "click", function(e) { me.icn3d; //e.preventDefault();
@@ -10588,6 +10591,13 @@ class ClickMenu {
          ic.drawCls.draw();
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelIg", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         ic.residueLabelsCls.addIgLabels(ic.hAtoms);
+         ic.selectionCls.saveSelectionIfSelected();
+         thisClass.setLogCmd('add ig labels', true);
+         ic.drawCls.draw();
+        });
+
         me.myEventCls.onIds("#" + me.pre + "mn6_addlabelChains", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
            ic.analysisCls.addChainLabels(ic.hAtoms);
            ic.selectionCls.saveSelectionIfSelected();
@@ -10663,13 +10673,21 @@ class ClickMenu {
         });
 
         me.myEventCls.onIds("#" + me.pre + "mn6_distManySets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
-            me.htmlCls.dialogCls.openDlg('dl_distmanysets', 'Measure the pairwise distance among many sets');
+            me.htmlCls.dialogCls.openDlg('dl_distmanysets', 'Measure the pairwise distances among many sets');
 
             thisClass.setSetsMenus('atomsCustomDistTable');
 
            ic.bMeasureDistance = true;
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn6_angleManySets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.htmlCls.dialogCls.openDlg('dl_anglemanysets', 'Measure the pairwise angles among many sets');
+
+         thisClass.setSetsMenus('atomsCustomAngleTable');
+
+        ic.bMeasureAngle = true;
+       });
+
         me.myEventCls.onIds("#" + me.pre + "mn6_distanceNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
            ic.pickpair = false;
            let select = "set lines off";
@@ -10754,6 +10772,10 @@ class ClickMenu {
            me.htmlCls.dialogCls.openDlg('dl_translate', 'Translate the X,Y,Z coordinates of the structure');
         });
 
+        $(document).on("click", "#" + me.pre + "mn6_angleTwoSets", function(e) { me.icn3d; //e.preventDefault();
+         me.htmlCls.dialogCls.openDlg('dl_angle', 'Measure the angle between two vectors');
+        });
+
         $(document).on("click", "#" + me.pre + "mn2_matrix", function(e) { me.icn3d; //e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_matrix', 'Apply matrix to the X,Y,Z coordinates of the structure');
         });
@@ -11674,7 +11696,7 @@ class SetMenu {
         html += this.getLink('mn1_mmcifid', 'RCSB mmCIF ID ' + me.htmlCls.wifiStr, undefined, 2);
         //html += this.getLink('mn1_gi', 'NCBI gi ' + me.htmlCls.wifiStr, undefined, 2);
 
-        html += this.getLink('mn1_cid', 'PubChem CID ' + me.htmlCls.wifiStr, 1, 2);
+        html += this.getLink('mn1_cid', 'PubChem CID/Name/InchI ' + me.htmlCls.wifiStr, 1, 2);
         
         html += "</ul>";
         html += "</li>";
@@ -11684,7 +11706,7 @@ class SetMenu {
 //        html += this.getLink('mn1_pdbfile', 'PDB File');
 //        html += this.getLink('mn1_pdbfile_app', 'PDB File (append)');
         html += this.getLink('mn1_pdbfile_app', 'PDB Files (appendable)', 1, 2);
-        html += this.getLink('mn1_mmciffile', 'mmCIF File (appendable)', undefined, 2);
+        html += this.getLink('mn1_mmciffile', 'mmCIF Files (appendable)', undefined, 2);
         html += this.getLink('mn1_mol2file', 'Mol2 File', undefined, 2);
         html += this.getLink('mn1_sdffile', 'SDF File', undefined, 2);
         html += this.getLink('mn1_xyzfile', 'XYZ File', undefined, 2);
@@ -11812,15 +11834,12 @@ class SetMenu {
             html += this.getLink('mn1_exportSecondary', 'Secondary Structure', undefined, 2);
         }
 
-        //!!!
-/*
         html += this.getMenuText('m1_exportrefnum', 'Reference Numbers', undefined, undefined, 2);
         html += "<ul>";
         html += this.getLink('mn1_exportIgstrand', 'Ig Strand', undefined, 3);
         html += this.getLink('mn1_exportKabat', 'Kabat', undefined, 3);
         html += this.getLink('mn1_exportImgt', 'IMGT', undefined, 3);
         html += "</ul>";
-*/
 
         html += "<li><br/></li>";
 
@@ -12663,9 +12682,8 @@ class SetMenu {
                 html += this.getRadio('mn4_clr', 'mn4_clrConfidence', 'pLDDT', undefined, 1, 1);
             //}
 
-            //!!!
-            // html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
-            // html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
+            html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
+            html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', 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>');
@@ -12779,11 +12797,18 @@ class SetMenu {
         html += "<ul>";
         html += this.getRadio('mn6_distance', 'mn6_distanceYes', 'between Two Atoms', undefined, 1, 2);
         html += this.getRadio('mn6_distance', 'mn6_distTwoSets', 'between Two Sets', undefined, undefined, 2);
-        html += this.getRadio('mn6_distance', 'mn6_distManySets', 'Among Many Sets', undefined, undefined, 2);
+        html += this.getRadio('mn6_distance', 'mn6_distManySets', 'among Many Sets', undefined, undefined, 2);
         html += this.getRadio('mn6_distance', 'mn6_distanceNo', 'Hide', true, 1, 2);
         html += "</ul>";
         html += "</li>";
 
+        html += this.getMenuText('mn6_anglewrap', 'Angle', undefined, 1, 1);
+        html += "<ul>";
+        html += this.getRadio('mn6_angle', 'mn6_angleManySets', 'among Many Sets', undefined, 1, 2);
+        html += this.getRadio('mn6_angle', 'mn6_angleTwoSets', 'b/w Two Vectors', undefined, undefined, 2);
+        html += "</ul>";
+        html += "</li>";
+
         html += this.getLink('mn6_area', 'Surface Area', 1, 1);
 
         html += this.getMenuText('mn6_addlabelwrap', 'Label', undefined, 1, 1);
@@ -12795,8 +12820,10 @@ class SetMenu {
         if(me.cfg.cid === undefined) {
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelResidues', 'per Residue', undefined, 1, 2);
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelResnum', 'per Residue & Number', undefined, 1, 2);
-            //!!!
-            // html += this.getRadio('mn6_addlabel', 'mn6_addlabelRefnum', 'per Reference Number', undefined, 1, 2);
+
+            html += this.getRadio('mn6_addlabel', 'mn6_addlabelRefnum', 'per Reference Number', undefined, 1, 2);
+            html += this.getRadio('mn6_addlabel', 'mn6_addlabelIg', 'per Ig Domain', undefined, 1, 2);
+
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelChains', 'per Chain', undefined, undefined, 2);
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelTermini', 'N- & C-Termini', undefined, 1, 2);
         }
@@ -12889,17 +12916,13 @@ class SetMenu {
             html += this.getMenuText('mn6_igrefwrap', 'Ref. Number', undefined, undefined, 1);
 
             html += "<ul>";
-//!!!
-/*
+
             html += this.getLink('mn6_igrefYes', 'Show Ig for Selection', undefined, 2);
             html += this.getLink('mn6_igrefTpl', 'Ig w/ Specified Template', undefined, 2);
             html += this.getLink('mn6_alignrefTpl', 'Align w/ Specified Template', undefined, 2);
             html += this.getLink('mn6_igrefNo', 'Reset Ig Ref. Number', undefined, 2);
 
             html += this.getMenuSep();
-*/
-
-
 
             html += this.getLink('mn6_customref', 'Custom Ref. Number', undefined, 2);
             html += "</ul>";
@@ -12989,6 +13012,7 @@ class SetMenu {
         html += this.getMenuUrl('faq_simialphapdb', me.htmlCls.baseUrl + "icn3d/icn3d.html#simifoldseek", "Similar AlphaFold/PDB", 1, 2);
         html += this.getMenuUrl('faq_alnstru', me.htmlCls.baseUrl + "icn3d/icn3d.html#alignmul", "Align Multiple Structures", 1, 2);
         html += this.getMenuUrl('faq_batchanal', me.htmlCls.baseUrl + "icn3d/icn3d.html#batchanalysis", "Batch Analysis", 1, 2);
+        html += this.getMenuUrl('faq_batchanal', me.htmlCls.baseUrl + "icn3d/icn3d.html#igrefnum", "Assign Ig Ref. Numbers", 1, 2);
         html += this.getMenuUrl('faq_embedicn3d', me.htmlCls.baseUrl + "icn3d/icn3d.html#embedicn3d", "Embed iCn3D", 1, 2);
         html += "</ul>";
         html += "</li>";
@@ -14100,8 +14124,8 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_cid' class='" + dialogClass + "'>";
-        html += this.addNotebookTitle('dl_cid', 'Please input a PubChem CID');
-        html += "PubChem CID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
+        html += this.addNotebookTitle('dl_cid', 'Please input a PubChem Compound');
+        html += "PubChem CID/Name/InchI: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
         html += me.htmlCls.buttonStr + "reload_cid'>Load</button>";
         html += "</div>";
 
@@ -14732,6 +14756,28 @@ class SetDialog {
         html += me.htmlCls.spanNowrapStr + "2. " + me.htmlCls.buttonStr + "applydisttable'>Distances in Table</button></span>";
         html += "</div>";
 
+
+        html += me.htmlCls.divStr + "dl_anglemanysets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_anglemanysets', 'Measure angles among many sets');
+        html += me.htmlCls.spanNowrapStr + "1. Select sets for pairwise angles</span><br/>";
+        html += "<table border=0 width=400 cellspacing=10><tr><td>";
+
+        html += me.htmlCls.divNowrapStr + "First sets:</div>";
+        html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "atomsCustomAngleTable2' multiple size='5' style='min-width:130px;'>";
+        html += "</select></div>";
+
+        html += "</td><td>";
+
+        html += me.htmlCls.divNowrapStr + "Second sets:</div>";
+        html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "atomsCustomAngleTable' multiple size='5' style='min-width:130px;'>";
+        html += "</select></div>";
+
+        html += "</td></tr></table>";
+
+        html += me.htmlCls.spanNowrapStr + "2. " + me.htmlCls.buttonStr + "applyangletable'>Angles in Table</button></span>";
+        html += "</div>";
+
+
         html += me.htmlCls.divStr + "dl_stabilizer_rm' class='" + dialogClass + "'>";
         html += this.addNotebookTitle('dl_stabilizer_rm', 'Remove a stabilizer');
         if(me.utilsCls.isMobile()) {
@@ -15011,6 +15057,11 @@ class SetDialog {
         html += this.addNotebookTitle('dl_disttable', 'Distance Table', true);
         html += "</div>";
 
+        
+        html += me.htmlCls.divStr + "dl_angletable' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_angletable', 'Angle Table', true);
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_translate' class='" + dialogClass + "'>";
         html += this.addNotebookTitle('dl_translate', 'Translate the X,Y,Z coordinates of the structure');
         html += "X: " + me.htmlCls.inputTextStr + "id='" + me.pre + "translateX' value='' size=4> ";
@@ -15019,6 +15070,20 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "translate_pdb'>Translate</button>";
         html += "</div>";
 
+        html += me.htmlCls.divStr + "dl_angle' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_angle', 'Measure the angle between two vectors');
+        html += "<b>Vector 1</b>, X: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v1X' value='' size=6> ";
+        html += "Y: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v1Y' value='' size=6> ";
+        html += "Z: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v1Z' value='' size=6><br>";
+        html += "<b>Vector 2</b>, X: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v2X' value='' size=6> ";
+        html += "Y: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v2Y' value='' size=6> ";
+        html += "Z: " + me.htmlCls.inputTextStr + "id='" + me.pre + "v2Z' value='' size=6><br>";
+        html += "<br>";
+        
+        html += me.htmlCls.buttonStr + "measure_angle'>Measure Angle</button>";
+        html += "The angle is: " + me.htmlCls.inputTextStr + "id='" + me.pre + "angle_value' value='' size=6> degree.";
+        html += "</div>";
+
         html += me.htmlCls.divStr + "dl_matrix' class='" + dialogClass + "'>";
         html += this.addNotebookTitle('dl_matrix', 'Apply matrix to the X,Y,Z coordinates of the structure');
         html += "0: " + me.htmlCls.inputTextStr + "id='" + me.pre + "matrix0' value='1' size=2> ";
@@ -15177,13 +15242,10 @@ class SetDialog {
         html += tmpStr1 + me.htmlCls.inputCheckStr + "id='" + me.pre + "anno_interact'>Interactions" + me.htmlCls.space2 + "</span></td>";
         html += tmpStr1 + me.htmlCls.inputCheckStr + "id='" + me.pre + "anno_crosslink'>Cross-Linkages" + me.htmlCls.space2 + "</span></td>";
         html += tmpStr1 + me.htmlCls.inputCheckStr + "id='" + me.pre + "anno_transmem'>Transmembrane" + me.htmlCls.space2 + "</span></td>";
-//!!!
-/*
+
         html += "<td></td>";
         html += "</tr><tr>";
         html += tmpStr1 + me.htmlCls.inputCheckStr + "id='" + me.pre + "anno_ig'>Ig Domains" + me.htmlCls.space2 + "</span></td>";
-*/
-
 
         html += "<td></td>";
         html += "</tr></table></div></div>";
@@ -15865,6 +15927,27 @@ class Events {
             thisClass.setLogCmd("translate pdb " + dx + " " + dy + " "  + dz, true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "measure_angle", "click", function(e) { me.icn3d;
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            let v1X = $("#" + me.pre + "v1X").val();
+            let v1Y = $("#" + me.pre + "v1Y").val();
+            let v1Z= $("#" + me.pre + "v1Z").val();
+
+            let v2X = $("#" + me.pre + "v2X").val();
+            let v2Y = $("#" + me.pre + "v2Y").val();
+            let v2Z = $("#" + me.pre + "v2Z").val();
+
+            let angleRad = new THREE.Vector3(parseFloat(v1X), parseFloat(v1Y), parseFloat(v1Z)).angleTo(new THREE.Vector3(parseFloat(v2X), parseFloat(v2Y), parseFloat(v2Z)));
+            let angle = angleRad / 3.1416 * 180;
+            angle = Math.abs(angle).toFixed(0);
+            if(angle > 180) angle -= 180;
+            if(angle > 90) angle = 180 - angle;
+
+            thisClass.setLogCmd("The angle is " + angle + " degree", false);
+            $("#" + me.pre + "angle_value").val(angle);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "matrix_pdb", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             if(!me.cfg.notebook) dialog.dialog( "close" );
@@ -17521,6 +17604,20 @@ class Events {
             thisClass.setLogCmd("disttable | " + nameArray2 + " " + nameArray, true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "applyangletable", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+            if(!me.cfg.notebook) dialog.dialog( "close" );
+            ic.bMeasureAngle = false;
+ 
+            let nameArray = $("#" + me.pre + "atomsCustomAngleTable").val();
+            let nameArray2 = $("#" + me.pre + "atomsCustomAngleTable2").val();
+ 
+            ic.analysisCls.measureAngleManySets(nameArray, nameArray2);
+            me.htmlCls.dialogCls.openDlg('dl_angletable', 'Angles among the sets');
+
+            thisClass.setLogCmd("angletable | " + nameArray2 + " " + nameArray, true);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "applylinebtwsets", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             
@@ -28110,18 +28207,17 @@ class Strand {
 
         let bRibbon = fill ? true: false;
 
-        // when highlight, the input atoms may only include part of sheet or helix
-        // include the whole sheet or helix when highlighting
+        // when highlight, the input atoms may only include one rediue.
+        // add one extra residue to show the strand
         let atomsAdjust = {};
 
-        // if( Object.keys(atoms).length < Object.keys(ic.atoms).length) {
-        //     atomsAdjust = this.getSSExpandedAtoms(atoms);
-        // }
-        // else {
-        //     atomsAdjust = atoms;
-        // }
-
-        atomsAdjust = atoms;
+        let residueHashTmp = ic.firstAtomObjCls.getResiduesFromAtoms(atoms);
+        if( Object.keys(residueHashTmp).length  == 1) {
+            atomsAdjust = this.getOneExtraResidue(residueHashTmp);
+        }
+        else {
+            atomsAdjust = atoms;
+        }
 
         if(bHighlight === 2) {
             if(fill) {
@@ -28156,22 +28252,24 @@ class Strand {
         let currentChain, currentResi, currentCA = null, currentO = null, currentColor = null, prevCoorCA = null, prevCoorO = null, prevColor = null;
         let prevCO = null, ss = null, ssend = false, atomid = null, prevAtomid = null, prevAtomSelected = null, prevResi = null, calphaid = null, prevCalphaid = null;
         let strandWidth, bSheetSegment = false, bHelixSegment = false;
-        let atom, tubeAtoms = {};
 
-        // test the first 30 atoms to see whether only C-alpha is available
-        ic.bCalphaOnly = me.utilsCls.isCalphaPhosOnly(atomsAdjust); //, 'CA');
+        // For each chain, test the first 30 atoms to see whether only C-alpha is available
+        let bCalphaOnlyHash = {};
+        for(let chainid in ic.chains) {
+            let atoms = me.hashUtilsCls.hash2Atoms(ic.chains[chainid], ic.atoms);
+            let bCalphaOnly = me.utilsCls.isCalphaPhosOnly(atoms); //, 'CA');
+            bCalphaOnlyHash[chainid] = bCalphaOnly;
+        }
 
         // when highlight, draw whole beta sheet and use bShowArray to show the highlight part
         let residueHash = {};
         for(let i in atomsAdjust) {
-            let atom = atomsAdjust[i];
+            let atom = ic.atoms[i];
 
             let residueid = atom.structure + '_' + atom.chain + '_' + atom.resi;
             residueHash[residueid] = 1;
         }
-        let totalResidueCount = Object.keys(residueHash).length;
-
-        let drawnResidueCount = 0;
+        Object.keys(residueHash).length;
 
         let bFullAtom = (Object.keys(ic.hAtoms).length == Object.keys(ic.atoms).length) ? true : false;
 
@@ -28180,22 +28278,20 @@ class Strand {
         let maxDist = 6.0;
 
         //get the last residue
-        let atomArray = Object.keys(atoms);
+        let atomArray = Object.keys(atomsAdjust);
         let lastAtomSerial = atomArray[atomArray.length - 1];
-        let lastAtom = atoms[lastAtomSerial];
+        let lastAtom = ic.atoms[lastAtomSerial];
         let lastResid = lastAtom.structure + '_' + lastAtom.chain + '_' + lastAtom.resi;
 
         for (let i in atomsAdjust) {
-          atom = atomsAdjust[i];
+          let atom = ic.atoms[i];
           let chainid = atom.structure + '_' + atom.chain;
           let resid = atom.structure + '_' + atom.chain + '_' + atom.resi;
           if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
             // "CA" has to appear before "O"
 
             if (atom.name === 'CA') {
-                if ( atoms.hasOwnProperty(i) && ((atom.ss !== 'helix' && atom.ss !== 'sheet') || atom.ssend || atom.ssbegin) ) {
-                    tubeAtoms[i] = atom;
-                }
+                if ( atoms.hasOwnProperty(i) && ((atom.ss !== 'helix' && atom.ss !== 'sheet') || atom.ssend || atom.ssbegin) ) ;
 
                 currentCA = atom.coord;
                 currentColor = atom.color;
@@ -28204,7 +28300,7 @@ class Strand {
                 caArray.push(atom.serial);
             }
 
-            if (atom.name === 'O' || (ic.bCalphaOnly && atom.name === 'CA')) {
+            if (atom.name === 'O' || (bCalphaOnlyHash[chainid] && atom.name === 'CA')) {
                 if(currentCA === null || currentCA === undefined) {
                     currentCA = atom.coord;
                     currentColor = atom.color;
@@ -28267,7 +28363,7 @@ class Strand {
                             }
                         }
                     }
-                    else if(ic.bCalphaOnly && atom.name === 'CA') {
+                    else if(bCalphaOnlyHash[chainid] && atom.name === 'CA') {
                         if(caArray.length > resSpan + 1) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
                             O = prevCoorCA.clone();
                             oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan - 1]].coord.clone();
@@ -28302,8 +28398,6 @@ class Strand {
                         bShowArray.push(0);
                         calphaIdArray.push(0);
                     }
-
-                    ++drawnResidueCount;
                 }
 
                 //let bBrokenSs =  ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 !== ic.ParserUtilsCls.getResiNCBI(chainid, atom.resi) || (prevCoorCA && Math.abs(currentCA.x - prevCoorCA.x) > maxDist) || (prevCoorCA && Math.abs(currentCA.y - prevCoorCA.y) > maxDist) || (prevCoorCA && Math.abs(currentCA.z - prevCoorCA.z) > maxDist);
@@ -28332,7 +28426,9 @@ class Strand {
                 // }
 
                 //if ((atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs) && pnts[0].length > 0 && bSameChain) {
-                if ((currentChain !== atom.chain || atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs || resid == lastResid) && pnts[0].length > 0) {
+                // if ((currentChain !== atom.chain || atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs || resid == lastResid) && pnts[0].length > 0) { // last coil was not drawn correctly, e.g., in 1TOP
+
+                if ((currentChain !== atom.chain || atom.ssbegin || atom.ssend || bBrokenSs || (resid == lastResid && atom.ss != 'coil')) && pnts[0].length > 0) {
                     let atomName = 'CA';
                 
                     let prevone = [], nexttwo = [];
@@ -28389,7 +28485,7 @@ class Strand {
                             O = currentO.clone();
                             O.sub(currentCA);
                         }
-                        else if(ic.bCalphaOnly && atom.name === 'CA') {
+                        else if(bCalphaOnlyHash[chainid] && atom.name === 'CA') {
                             if(caArray.length > resSpan) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
                                 O = currentCA.clone();
                                 oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan]].coord.clone();
@@ -28478,7 +28574,9 @@ class Strand {
                 // end of a chain, or end of selection
                 if ((currentChain !== atom.chain 
                     || ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 !== ic.ParserUtilsCls.getResiNCBI(chainid, atom.resi)
-                    || resid == lastResid
+                    // || (drawnResidueCount === totalResidueCount - 1) 
+                    // || bBrokenSs 
+                    || (resid == lastResid && atom.ss != 'coil')
                     ) && pnts[0].length > 0) {
                 //if ((currentChain !== atom.chain) && pnts[0].length > 0) {
 
@@ -28546,18 +28644,42 @@ class Strand {
                 prevCoorCA = currentCA;
                 prevCoorO = atom.coord;
                 prevColor = currentColor;
-            } // end if (atom.name === 'O' || (ic.bCalphaOnly && atom.name === 'CA') ) {
+            } // end if (atom.name === 'O' || (bCalphaOnlyHash[chainid] && atom.name === 'CA') ) {
           } // end if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
         } // end for
 
         caArray = [];
 
-        ic.tubeCls.createTube(tubeAtoms, 'CA', coilWidth, bHighlight);
-
-        tubeAtoms = {};
+        // ic.tubeCls.createTube(tubeAtoms, 'CA', coilWidth, bHighlight);
+        // draw all atoms in tubes and assign zero radius when the residue is not coil
+        ic.tubeCls.createTube(atomsAdjust, 'CA', coilWidth, bHighlight);
         pnts = {};
     }
 
+    getOneExtraResidue(residueHash) { let ic = this.icn3d, me = ic.icn3dui;
+        let atomsAdjust = {};
+        
+        for(let resid in residueHash) {
+            atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, ic.residues[resid]);
+
+            let residNcbi = ic.resid2ncbi[resid];
+            let resiNcbi = residNcbi.substr(residNcbi.lastIndexOf('_') + 1);
+
+            let nextResidNcbi = residNcbi.substr(0, residNcbi.lastIndexOf('_')) + '_' + (parseInt(resiNcbi) + 1);
+            let nextResid = ic.ncbi2resid[nextResidNcbi];
+
+            if(!nextResid) {
+                nextResidNcbi = residNcbi.substr(0, residNcbi.lastIndexOf('_')) + '_' + (parseInt(resiNcbi) - 1);
+                nextResid = ic.ncbi2resid[nextResidNcbi];
+            }
+
+            if(nextResid) atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, ic.residues[nextResid]);
+        }
+
+        return atomsAdjust;
+    }
+
+    /*
     getSSExpandedAtoms(atoms, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
         let currChain, currResi, currAtom, prevChain, prevResi, prevAtom;
         let firstAtom, lastAtom;
@@ -28664,6 +28786,7 @@ class Strand {
 
         return atomsAdjust;
     }
+    */
 }
 
 /**
@@ -28683,7 +28806,8 @@ class Strip {
         if (p0.length < 2) return;
         div = div || ic.axisDIV;
 
-        if(pntsCA && ic.bDoublecolor && !ic.bCalphaOnly) {
+        // if(pntsCA && ic.bDoublecolor && !ic.bCalphaOnly) {
+        if(pntsCA && ic.bDoublecolor) {
             let bExtendLastRes = false; //true;
 
             let pnts_clrs = me.subdivideCls.subdivide(pntsCA, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
@@ -29011,7 +29135,7 @@ class Tube {
     //Create tubes for "atoms" with certain "atomName". "radius" is the radius of the tubes.
     //"bHighlight" is an option to draw the highlight for these atoms. The highlight could be
     //outlines with bHighlight=1 and 3D objects with bHighlight=2.
-    createTube(atoms, atomName, radius, bHighlight, bCustom, bRadiusArray) { let ic = this.icn3d, me = ic.icn3dui;
+    createTube(atoms, atomName, radius, bHighlight, bCustom, bNonCoil) { let ic = this.icn3d, me = ic.icn3dui;
         if(me.bNode) return;
 
         let pnts = [], colors = [], radii = [], prevone = [], nexttwo = [];
@@ -29123,6 +29247,9 @@ class Tube {
                 else {
                     radiusFinal = this.getRadius(radius, atom);
                 }
+                
+                // draw all atoms in tubes and assign zero radius when the residue is not coil
+                if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
 
                 //radii.push(radius || (atom.b > 0 ? atom.b * 0.01 : ic.coilWidth));
                 radii.push(radiusFinal);
@@ -29196,183 +29323,247 @@ class Tube {
             let prevone = pnts_colors_radii_prevone_nexttwo[i].prevone;
             let nexttwo = pnts_colors_radii_prevone_nexttwo[i].nexttwo;
 
-            this.createTubeSub(pnts, colors, radii, bHighlight, prevone, nexttwo, bRadiusArray);
+            this.createTubeSub(pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil);
         }
 
-        pnts_colors_radii_prevone_nexttwo = [];    
+        pnts_colors_radii_prevone_nexttwo = [];
     }
 
-    getCustomtubesize(resid) { let ic = this.icn3d; ic.icn3dui;
-        let pos = resid.lastIndexOf('_');
-        let resi = resid.substr(pos + 1);
-        let chainid = resid.substr(0, pos);
+/*    
+    createTube(atoms, atomName, radius, bHighlight, bCustom, bNonCoil) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
 
-        let radiusFinal = (ic.queryresi2score[chainid] && ic.queryresi2score[chainid].hasOwnProperty(resi)) ? ic.queryresi2score[chainid][resi] * 0.01 : ic.coilWidth;
+        let pnts = [], colors = [], radii = [], prevone = [], nexttwo = [];
+        let currentChain, currentResi;
+        let index = 0;
+        let maxDist = 6.0;
+        let maxDist2 = 3.0; // avoid tube between the residues in 3 residue helix
 
-        return radiusFinal;
-    };
+        let pnts_colors_radii_prevone_nexttwo = [];
+        let firstAtom, atom, prevAtom;
 
-    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
-    createTubeSub(_pnts, colors, radii, bHighlight, prevone, nexttwo, bRadiusArray) { let ic = this.icn3d, me = ic.icn3dui;
-        if(me.bNode) return;
+        for (let i in atoms) {
+            atom = atoms[i];
+            if ((atom.name === atomName) && !atom.het) {
+                if(index == 0) {
+                    firstAtom = atom;
+                }
 
-        if (_pnts.length < 2) return;
+                if (index > 0 && (currentChain !== atom.chain || Math.abs(atom.coord.x - prevAtom.coord.x) > maxDist || Math.abs(atom.coord.y - prevAtom.coord.y) > maxDist || Math.abs(atom.coord.z - prevAtom.coord.z) > maxDist
+                  || (ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 < ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + atom.chain, atom.resi) && (Math.abs(atom.coord.x - prevAtom.coord.x) > maxDist2 || Math.abs(atom.coord.y - prevAtom.coord.y) > maxDist2 || Math.abs(atom.coord.z - prevAtom.coord.z) > maxDist2))
+                  ) ) {
+                    if(bHighlight !== 2) {
+                        if(!isNaN(firstAtom.resi) && !isNaN(prevAtom.resi)) {
+                            let prevoneResid = firstAtom.structure + '_' + firstAtom.chain + '_' + (parseInt(firstAtom.resi) - 1).toString();
+                            let prevoneCoord = ic.firstAtomObjCls.getAtomCoordFromResi(prevoneResid, atomName);
+                            prevone = (prevoneCoord !== undefined) ? [prevoneCoord] : [];
 
-//        if(bRadiusArray) {
-            let circleDiv = ic.tubeDIV, axisDiv = ic.axisDIV;
-            let circleDivInv = 1 / circleDiv, axisDivInv = 1 / axisDiv;
-            //var geo = new THREE.Geometry();
-            let geo = new THREE.BufferGeometry();
-            let verticeArray = [], colorArray = [],indexArray = [], color;
-            let offset = 0, offset2 = 0, offset3 = 0;
+                            let nextoneResid = prevAtom.structure + '_' + prevAtom.chain + '_' + (parseInt(prevAtom.resi) + 1).toString();
 
-            let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
+                            // add one more residue if only one residue is available
+                            if(pnts.length == 1 && ic.residues.hasOwnProperty(nextoneResid)) {
+                                let nextAtom = ic.firstAtomObjCls.getAtomFromResi(nextoneResid, atomName);
 
-            let pnts = pnts_clrs[0];
-            colors = pnts_clrs[2];
+                                if(nextAtom) {
+                                    pnts.push(nextAtom.coord);
+                                    colors.push(nextAtom.color);
 
-            let prevAxis1 = new THREE.Vector3(), prevAxis2;
-            for (let i = 0, lim = pnts.length; i < lim; ++i) {
-                let r, idx = (i - 1) * axisDivInv;
-                if (i === 0) r = radii[0];
-                else {
-                    if (idx % 1 === 0) r = radii[idx];
-                    else {
-                        let floored = Math.floor(idx);
-                        let tmp = idx - floored;
-                        r = radii[floored] * tmp + radii[floored + 1] * (1 - tmp);
+                                    let radiusFinal = this.getRadius(radius, atom);
+                                    radii.push(radiusFinal);
+                                }
+                            }
+                       
+                        }
+
+                        pnts_colors_radii_prevone_nexttwo.push({'pnts':pnts, 'colors':colors, 'radii':radii, 'prevone':prevone, 'nexttwo':nexttwo});
                     }
+                    pnts = []; colors = []; radii = []; prevone = []; nexttwo = [];
+                    firstAtom = atom;
+                    index = 0;
                 }
-                let delta, axis1, axis2;
-                if (i < lim - 1) {
-                    delta = pnts[i].clone().sub(pnts[i + 1]);
-                    axis1 = new THREE.Vector3(0, -delta.z, delta.y).normalize().multiplyScalar(r);
-                    axis2 = delta.clone().cross(axis1).normalize().multiplyScalar(r);
-                    //      let dir = 1, offset = 0;
-                    if (prevAxis1.dot(axis1) < 0) {
-                        axis1.negate(); axis2.negate();  //dir = -1;//offset = 2 * Math.PI / axisDiv;
-                    }
-                    prevAxis1 = axis1; prevAxis2 = axis2;
-                } else {
-                    axis1 = prevAxis1; axis2 = prevAxis2;
+
+                pnts.push(atom.coord);
+
+                let radiusFinal;
+                if(bCustom) {
+                    radiusFinal = this.getCustomtubesize(atom.structure + '_' + atom.chain + '_' + atom.resi);
+                }
+                else {
+                    radiusFinal = this.getRadius(radius, atom);
                 }
-                for (let j = 0; j < circleDiv; ++j) {
-                    let angle = 2 * Math.PI * circleDivInv * j; //* dir  + offset;
-                    let point = pnts[i].clone().add(axis1.clone().multiplyScalar(Math.cos(angle))).add(axis2.clone().multiplyScalar(Math.sin(angle)));
-                    verticeArray[offset++] = point.x;
-                    verticeArray[offset++] = point.y;
-                    verticeArray[offset++] = point.z;
 
-                    color = (i == colors.length - 1 && colors.length > 1) ? me.parasCls.thr(colors[colors.length - 2]) : me.parasCls.thr(colors[i]);
-                    colorArray[offset2++] = color.r;
-                    colorArray[offset2++] = color.g;
-                    colorArray[offset2++] = color.b;
+                // draw all atoms in tubes and assign zero radius when the residue is not coil
+                if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
+
+                //radii.push(radius || (atom.b > 0 ? atom.b * 0.01 : ic.coilWidth));
+                radii.push(radiusFinal);
+
+                colors.push(atom.color);
+                // the starting residue of a coil uses the color from the next residue to avoid using the color of the last helix/sheet residue
+                if(index === 1) colors[colors.length - 2] = atom.color;
+
+                currentChain = atom.chain;
+                currentResi = atom.resi;
+
+                let scale = 1.2;
+                if(bHighlight === 2 && !atom.ssbegin) {
+                    ic.boxCls.createBox(atom, undefined, undefined, scale, undefined, bHighlight);
                 }
+
+                ++index;
+
+                prevAtom = atom;
             }
-            let offsetTmp = 0, nComp = 3;
-            for (let i = 0, lim = pnts.length - 1; i < lim; ++i) {
-                let reg = 0;
-                //var r1 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv]).lengthSq();
-                //var r2 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv + 1]).lengthSq();
-                let pos = offsetTmp * nComp;
-                let point1 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
-                pos = (offsetTmp + circleDiv) * nComp;
-                let point2 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
-                pos = (offsetTmp + circleDiv + 1) * nComp;
-                let point3 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
-
-                let r1 = point1.clone().sub(point2).lengthSq();
-                let r2 = point1.clone().sub(point3).lengthSq();
-                if (r1 > r2) { r1 = r2; reg = 1; }                for (let j = 0; j < circleDiv; ++j) {
-                    //geo.faces.push(new THREE.Face3(offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv, undefined, c));
-                    //geo.faces.push(new THREE.Face3(offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv, undefined, c));
-                    //indexArray = indexArray.concat([offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv]);
-                    indexArray[offset3++] = offsetTmp + j;
-                    indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
-                    indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
-
-                    //indexArray = indexArray.concat([offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv]);
-                    indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
-                    indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
-                    indexArray[offset3++] = offsetTmp + (j + reg + 1) % circleDiv + circleDiv;
-                }
-                offsetTmp += circleDiv;
-            }
+        }
 
-            geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(verticeArray), nComp));
-            geo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), nComp));
+        if(bHighlight !== 2) {
+            pnts_colors_radii_prevone_nexttwo.push({'pnts':pnts, 'colors':colors, 'radii':radii, 'prevone':prevone, 'nexttwo':nexttwo});
+        }
 
-            geo.setIndex(new THREE.BufferAttribute(new Uint32Array(indexArray), 1));
-            //geo.setIndex(indexArray);
+        for(let i = 0, il = pnts_colors_radii_prevone_nexttwo.length; i < il; ++i) {
+            let pnts = pnts_colors_radii_prevone_nexttwo[i].pnts;
+            let colors = pnts_colors_radii_prevone_nexttwo[i].colors;
+            let radii = pnts_colors_radii_prevone_nexttwo[i].radii;
+            let prevone = []; // = pnts_colors_radii_prevone_nexttwo[i].prevone;
+            let nexttwo = []; // = pnts_colors_radii_prevone_nexttwo[i].nexttwo;
 
-            //geo.computeFaceNormals();
-            //geo.computeVertexNormals(false);
-            geo.computeVertexNormals();
-/*
+            this.createTubeSub(pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil);
         }
-        else {
-            let axisDiv = ic.axisDIV;
 
-            let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
-            // extend one residue
-            //var pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo, true);
+        pnts_colors_radii_prevone_nexttwo = [];    
+    }
+*/
 
-            _pnts = pnts_clrs[0];
-            colors = pnts_clrs[2];
+    getCustomtubesize(resid) { let ic = this.icn3d; ic.icn3dui;
+        let pos = resid.lastIndexOf('_');
+        let resi = resid.substr(pos + 1);
+        let chainid = resid.substr(0, pos);
 
-            let radius = ic.coilWidth;
-            segments = _pnts.length;
-            //radiusSegments = 8;
-            radiusSegments = 4; // save memory
-            let closed = false;
+        let radiusFinal = (ic.queryresi2score[chainid] && ic.queryresi2score[chainid].hasOwnProperty(resi)) ? ic.queryresi2score[chainid][resi] * 0.01 : ic.coilWidth;
 
-            // when using radiusArray with modified three.js, the tube didn't work in picking
-            let geo = new THREE.TubeGeometry(
-                new THREE.CatmullRomCurve3(_pnts), // path
-                segments,
-                radius, //radiusArray, //radius,
-                radiusSegments,
-                closed
-            );
+        return radiusFinal;
+    };
+
+    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
+    createTubeSub(_pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
+
+        if (_pnts.length < 2) return;
 
-            //https://stemkoski.github.io/Three.js/Graphulus-Curve.html
-            let color, face, numberOfSides, vertexIndex;
-            // faces are indexed using characters
-            let faceIndices = [ 'a', 'b', 'c', 'd' ];
+        let circleDiv = ic.tubeDIV, axisDiv = ic.axisDIV;
+        let circleDivInv = 1 / circleDiv, axisDivInv = 1 / axisDiv;
+        //var geo = new THREE.Geometry();
+        let geo = new THREE.BufferGeometry();
+        let verticeArray = [], colorArray = [],indexArray = [], color;
+        let offset = 0, offset2 = 0, offset3 = 0;
 
-            // first, assign colors to vertices as desired
-            let prevColor,  geoColors = {};
-            for ( let s = 0; s <= segments; s++ ) {
-                for ( let r = 0; r < radiusSegments; r++ )
-                {
-                    vertexIndex = r + s * radiusSegments;
-                    color = colors[s];
-                    if(!color) color = prevColor;
+        let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
 
-                    geoColors[vertexIndex] = color; // use this array for convenience
+        let pnts = pnts_clrs[0];
+        colors = pnts_clrs[2];
 
-                    prevColor = color;
-                }
-            }
+        let constRadiius;
+        // a threshold to stop drawing the tube if it's less than this ratio of radius
+        let thresholdRatio = 1; //0.9;
 
-            // copy the colors as necessary to the face's vertexColors array.
-            // after version r125, geo.faces is undefined for TubeGeometry
-            for ( let i = 0; geo.faces && i < geo.faces.length; i++ )
-            {
-                face = geo.faces[ i ];
+        let prevAxis1 = new THREE.Vector3(), prevAxis2;
+        for (let i = 0, lim = pnts.length; i < lim; ++i) {
+            let r, idx = (i - 1) * axisDivInv;
 
-                numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
-                for( let j = 0; j < numberOfSides; j++ )
-                {
-                    vertexIndex = face[ faceIndices[ j ] ];
-                    face.vertexColors[ j ] = geoColors[ vertexIndex ];
+            if (i === 0) {
+                r = radii[0];
+                if(r > 0) constRadiius = r;
+            }
+            else {
+                if (idx % 1 === 0) {
+                    r = radii[idx];
+                    if(r > 0) constRadiius = r;
+                }
+                else {
+                    let floored = Math.floor(idx);
+                    let tmp = idx - floored;
+                    // draw all atoms in tubes and assign zero radius when the residue is not coil
+                    // r = radii[floored] * tmp + radii[floored + 1] * (1 - tmp);
+                    r = radii[floored] * (1 - tmp) + radii[floored + 1] * tmp;
+
+                    // a threshold to stop drawing the tube if it's less than this ratio of radius.
+                    // The extra bit of tube connects coil with strands or helices
+                    if(!bNonCoil) {
+                        if(r < thresholdRatio * constRadiius) {
+                            r = 0;
+                        }
+                        // else if(r < constRadiius) {
+                        //     r *= 0.5; // use small radius for the connection between coild and sheets/helices 
+                        // }
+                    }
                 }
             }
-
-            geo.computeFaceNormals();
-            geo.computeVertexNormals(false);
+            let delta, axis1, axis2;
+            if (i < lim - 1) {
+                delta = pnts[i].clone().sub(pnts[i + 1]);
+                axis1 = new THREE.Vector3(0, -delta.z, delta.y).normalize().multiplyScalar(r);
+                axis2 = delta.clone().cross(axis1).normalize().multiplyScalar(r);
+                //      let dir = 1, offset = 0;
+                if (prevAxis1.dot(axis1) < 0) {
+                    axis1.negate(); axis2.negate();  //dir = -1;//offset = 2 * Math.PI / axisDiv;
+                }
+                prevAxis1 = axis1; prevAxis2 = axis2;
+            } else {
+                axis1 = prevAxis1; axis2 = prevAxis2;
+            }
+            for (let j = 0; j < circleDiv; ++j) {
+                let angle = 2 * Math.PI * circleDivInv * j; //* dir  + offset;
+                let point = pnts[i].clone().add(axis1.clone().multiplyScalar(Math.cos(angle))).add(axis2.clone().multiplyScalar(Math.sin(angle)));
+                verticeArray[offset++] = point.x;
+                verticeArray[offset++] = point.y;
+                verticeArray[offset++] = point.z;
+
+                color = (i == colors.length - 1 && colors.length > 1) ? me.parasCls.thr(colors[colors.length - 2]) : me.parasCls.thr(colors[i]);
+                colorArray[offset2++] = color.r;
+                colorArray[offset2++] = color.g;
+                colorArray[offset2++] = color.b;
+            }
+        }
+        let offsetTmp = 0, nComp = 3;
+        for (let i = 0, lim = pnts.length - 1; i < lim; ++i) {
+            let reg = 0;
+            //var r1 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv]).lengthSq();
+            //var r2 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv + 1]).lengthSq();
+            let pos = offsetTmp * nComp;
+            let point1 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+            pos = (offsetTmp + circleDiv) * nComp;
+            let point2 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+            pos = (offsetTmp + circleDiv + 1) * nComp;
+            let point3 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+
+            let r1 = point1.clone().sub(point2).lengthSq();
+            let r2 = point1.clone().sub(point3).lengthSq();
+            if (r1 > r2) { r1 = r2; reg = 1; }            for (let j = 0; j < circleDiv; ++j) {
+                //geo.faces.push(new THREE.Face3(offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv, undefined, c));
+                //geo.faces.push(new THREE.Face3(offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv, undefined, c));
+                //indexArray = indexArray.concat([offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv]);
+                indexArray[offset3++] = offsetTmp + j;
+                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
+
+                //indexArray = indexArray.concat([offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv]);
+                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + reg + 1) % circleDiv + circleDiv;
+            }
+            offsetTmp += circleDiv;
         }
-*/
+
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(verticeArray), nComp));
+        geo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), nComp));
+
+        geo.setIndex(new THREE.BufferAttribute(new Uint32Array(indexArray), 1));
+        //geo.setIndex(indexArray);
+
+        //geo.computeFaceNormals();
+        //geo.computeVertexNormals(false);
+        geo.computeVertexNormals();
+
         let mesh;
         if(bHighlight === 2) {
           //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
@@ -29955,7 +30146,7 @@ class Axes {
         return cone;
     }
 
-    setPc1Axes() { let ic = this.icn3d, me = ic.icn3dui;
+    setPc1Axes(bXAxis) { let ic = this.icn3d, me = ic.icn3dui;
        if(me.bNode) return;
 
        let atomHash = me.hashUtilsCls.intHash(ic.hAtoms, ic.dAtoms);
@@ -30036,6 +30227,11 @@ class Axes {
 
        let positionX = center.clone().add(vecX.normalize().multiplyScalar(maxD * 0.4));
 
+       let prinXaxis = vecX.normalize();
+       me.htmlCls.clickMenuCls.setLogCmd('Principle X-Axis: ' + prinXaxis.x.toFixed(3) + " " + prinXaxis.y.toFixed(3) + " " + prinXaxis.z.toFixed(3), false);
+
+       if(bXAxis) return prinXaxis;
+
        let vecY = new THREE.Vector3(eigenRet.h2[0], eigenRet.h2[1], eigenRet.h2[2]);
        let positionY = center.clone().add(vecY.normalize().multiplyScalar(maxD * 0.3));
 
@@ -34254,6 +34450,9 @@ class ApplySymd {
 
             ic.cylinderCls.createCylinder(start, end, axisRadius, colorAxis, 0);
 
+            let SymAxis = end.clone().sub(start).normalize();
+            me.htmlCls.clickMenuCls.setLogCmd('Symmetry Axis: ' + SymAxis.x.toFixed(3) + " " + SymAxis.y.toFixed(3) + " " + SymAxis.z.toFixed(3), false);     
+
             if(ic.bAxisOnly) continue;
 
             if(symmetryType == 'C' || (symmetryType == 'D' && order == nSide) ) {
@@ -34410,87 +34609,87 @@ class ApplySymd {
                 pointArray.push(end);
             }
             else ;
-        }
 
-        if(symmetryType == 'T') {
-            let pos1 = pointArray[0]; // pointArray: start, end, start, end, ...
-            ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
+            if(symmetryType == 'T') {
+                let pos1 = pointArray[0]; // pointArray: start, end, start, end, ...
+                ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
 
-            let dist2 = pos1.distanceTo(pointArray[2]);
-            let dist3 = pos1.distanceTo(pointArray[3]);
+                let dist2 = pos1.distanceTo(pointArray[2]);
+                let dist3 = pos1.distanceTo(pointArray[3]);
 
-            let distSmall, posSel;
-            if(dist2 < dist3) {
-                distSmall = dist2;
-                posSel = pointArray[3];
-            }
-            else {
-                distSmall = dist3;
-                posSel = pointArray[2];
-            }
+                let distSmall, posSel;
+                if(dist2 < dist3) {
+                    distSmall = dist2;
+                    posSel = pointArray[3];
+                }
+                else {
+                    distSmall = dist3;
+                    posSel = pointArray[2];
+                }
 
-            ic.sphereCls.createSphereBase(posSel, colorPolygon, polygonRadius, 1.0, 0);
-            ic.cylinderCls.createCylinder(pos1, posSel, polygonRadius, colorPolygon, 0);
+                ic.sphereCls.createSphereBase(posSel, colorPolygon, polygonRadius, 1.0, 0);
+                ic.cylinderCls.createCylinder(pos1, posSel, polygonRadius, colorPolygon, 0);
 
-            let iPrev;
-            for(let i = 4, il = pointArray.length; i < il; ++i) {
-                let pos2 = pointArray[i];
+                let iPrev;
+                for(let i = 4, il = pointArray.length; i < il; ++i) {
+                    let pos2 = pointArray[i];
 
-                let dist = pos1.distanceTo(pos2);
-                if(dist > distSmall) {
-                    ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
-                    ic.cylinderCls.createCylinder(pos1, pos2, polygonRadius, colorPolygon, 0);
+                    let dist = pos1.distanceTo(pos2);
+                    if(dist > distSmall) {
+                        ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
+                        ic.cylinderCls.createCylinder(pos1, pos2, polygonRadius, colorPolygon, 0);
 
-                    ic.cylinderCls.createCylinder(posSel, pos2, polygonRadius, colorPolygon, 0);
-                    if(iPrev !== undefined) {
-                        ic.cylinderCls.createCylinder(pointArray[iPrev], pos2, polygonRadius, colorPolygon, 0);
-                    }
+                        ic.cylinderCls.createCylinder(posSel, pos2, polygonRadius, colorPolygon, 0);
+                        if(iPrev !== undefined) {
+                            ic.cylinderCls.createCylinder(pointArray[iPrev], pos2, polygonRadius, colorPolygon, 0);
+                        }
 
-                    iPrev = i;
+                        iPrev = i;
+                    }
                 }
             }
-        }
-        else if(symmetryType == 'O') {
-            for(let i = 0, il = pointArray.length; i < il; i += 2) {
-                let pos1 = pointArray[i];
-                let pos2 = pointArray[i+1];
-                ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
-                ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
-                for(let j = i + 2, jl = pointArray.length; j < jl; ++j) {
-                    let pos3 = pointArray[j];
-                    ic.sphereCls.createSphereBase(pos3, colorPolygon, polygonRadius, 1.0, 0);
-                    ic.cylinderCls.createCylinder(pos1, pos3, polygonRadius, colorPolygon, 0);
-                    ic.cylinderCls.createCylinder(pos2, pos3, polygonRadius, colorPolygon, 0);
+            else if(symmetryType == 'O') {
+                for(let i = 0, il = pointArray.length; i < il; i += 2) {
+                    let pos1 = pointArray[i];
+                    let pos2 = pointArray[i+1];
+                    ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
+                    ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
+                    for(let j = i + 2, jl = pointArray.length; j < jl; ++j) {
+                        let pos3 = pointArray[j];
+                        ic.sphereCls.createSphereBase(pos3, colorPolygon, polygonRadius, 1.0, 0);
+                        ic.cylinderCls.createCylinder(pos1, pos3, polygonRadius, colorPolygon, 0);
+                        ic.cylinderCls.createCylinder(pos2, pos3, polygonRadius, colorPolygon, 0);
+                    }
                 }
             }
-        }
-        else if(symmetryType == 'I') {
-            for(let i = 0, il = pointArray.length; i < il; i += 2) {
-                let pos1 = pointArray[i];
-                let pos2 = pointArray[i+1];
-                ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
-                ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
-                for(let j = i + 2, jl = pointArray.length; j < jl; j += 2) {
-                    let pos3 = pointArray[j];
-                    let pos4 = pointArray[j+1];
+            else if(symmetryType == 'I') {
+                for(let i = 0, il = pointArray.length; i < il; i += 2) {
+                    let pos1 = pointArray[i];
+                    let pos2 = pointArray[i+1];
+                    ic.sphereCls.createSphereBase(pos1, colorPolygon, polygonRadius, 1.0, 0);
+                    ic.sphereCls.createSphereBase(pos2, colorPolygon, polygonRadius, 1.0, 0);
+                    for(let j = i + 2, jl = pointArray.length; j < jl; j += 2) {
+                        let pos3 = pointArray[j];
+                        let pos4 = pointArray[j+1];
 
-                    let dist3 = pos1.distanceTo(pos3);
-                    let dist4 = pos1.distanceTo(pos4);
+                        let dist3 = pos1.distanceTo(pos3);
+                        let dist4 = pos1.distanceTo(pos4);
 
-                    let pos1Sel, pos2Sel;
-                    if(dist3 < dist4) {
-                        pos1Sel = pos3;
-                        pos2Sel = pos4;
-                    }
-                    else {
-                        pos1Sel = pos4;
-                        pos2Sel = pos3;
-                    }
+                        let pos1Sel, pos2Sel;
+                        if(dist3 < dist4) {
+                            pos1Sel = pos3;
+                            pos2Sel = pos4;
+                        }
+                        else {
+                            pos1Sel = pos4;
+                            pos2Sel = pos3;
+                        }
 
-                    ic.sphereCls.createSphereBase(pos1Sel, colorPolygon, polygonRadius, 1.0, 0);
-                    ic.sphereCls.createSphereBase(pos2Sel, colorPolygon, polygonRadius, 1.0, 0);
-                    ic.cylinderCls.createCylinder(pos1, pos1Sel, polygonRadius, colorPolygon, 0);
-                    ic.cylinderCls.createCylinder(pos2, pos2Sel, polygonRadius, colorPolygon, 0);
+                        ic.sphereCls.createSphereBase(pos1Sel, colorPolygon, polygonRadius, 1.0, 0);
+                        ic.sphereCls.createSphereBase(pos2Sel, colorPolygon, polygonRadius, 1.0, 0);
+                        ic.cylinderCls.createCylinder(pos1, pos1Sel, polygonRadius, colorPolygon, 0);
+                        ic.cylinderCls.createCylinder(pos2, pos2Sel, polygonRadius, colorPolygon, 0);
+                    }
                 }
             }
         }
@@ -34854,6 +35053,33 @@ class ResidueLabels {
         ic.hlObjectsCls.removeHlObjects();
     }
 
+    //Add labels for each Ig domain
+    addIgLabels(atoms) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
+
+        let size = 60; //18;
+
+        ic.labels['ig'] = [];
+        let chainidHash = ic.firstAtomObjCls.getChainsFromAtoms(atoms);
+
+        for(let chainid in ic.igLabel2Pos) {
+            if(!chainidHash.hasOwnProperty(chainid)) continue;
+
+            for(let text in ic.igLabel2Pos[chainid]) {
+                let label = {}; // Each label contains 'position', 'text', 'color', 'background'
+                label.position = ic.igLabel2Pos[chainid][text];
+                label.text = text;
+
+                label.size = size;
+                label.color = '#00FFFF';
+
+                ic.labels['ig'].push(label);
+            }
+        }
+
+        ic.hlObjectsCls.removeHlObjects();
+    }
+
     addNonCarbonAtomLabels(atoms) { let ic = this.icn3d, me = ic.icn3dui;
         if(me.bNode) return;
 
@@ -41124,6 +41350,8 @@ class AnnoIg {
         let igCnt = ic.chain2igArray[chnid].length;
         let fromArray = [], toArray = [];
         let posindex2domainindex = {};
+        if(!ic.igLabel2Pos) ic.igLabel2Pos = {};
+        ic.igLabel2Pos[chnid] = {};
         for(let i = 0; i < igCnt; ++i) {
             let igElem = ic.chain2igArray[chnid][i];
             fromArray = fromArray.concat(igElem.startPosArray);
@@ -41133,6 +41361,18 @@ class AnnoIg {
                 let pos = igElem.startPosArray[j];
                 posindex2domainindex[pos] = i;
             }
+
+            let resi1 = ic.ParserUtilsCls.getResi(chnid, igElem.startPosArray[0]);
+            let resid1 = chnid + "_" + resi1;
+            let calpha1 = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid1]);
+
+            let resi2 = ic.ParserUtilsCls.getResi(chnid, igElem.endPosArray[igElem.endPosArray.length - 1]);
+            let resid2 = chnid + "_" + resi2;
+            let calpha2 = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid2]);
+
+            let label = chnid.substr(chnid.lastIndexOf('_') + 1) + '-Ig' + (i+1).toString();
+
+            ic.igLabel2Pos[chnid][label] = calpha1.coord.clone().add(calpha2.coord).multiplyScalar(0.5);
         }
 
         // let htmlCnt = '<span class="icn3d-residueNum" title="Ig domain count">' + igCnt.toString() + ' Igs</span>';
@@ -41183,6 +41423,7 @@ class AnnoIg {
         if(igArray.length == 0) return {html: html, html2: html2, html3: html3}
         let rangeArray = [], titleArray = [], fullTitleArray = [], domainArray = [];
 
+        let chain = chnid.substr(chnid.lastIndexOf('_') + 1);
         for(let i = 0, il = igArray.length; i < il; ++i) {
             let domainid = igArray[i].domainid;
             if(!ic.domainid2info) continue;
@@ -41194,7 +41435,7 @@ class AnnoIg {
 
             let igType = (parseFloat(tmscore) < ic.refnumCls.TMThresholdIgType ) ? 'Ig' : ic.ref2igtype[info.refpdbname];
             titleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + ')');
-            fullTitleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + '), template: ' + info.refpdbname + ', type: ' + ic.ref2igtype[info.refpdbname] + ', Seq. identity: ' + parseFloat(info.seqid).toFixed(2) + ', aligned residues: ' + info.nresAlign);
+            fullTitleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + '), template: ' + info.refpdbname + ', type: ' + ic.ref2igtype[info.refpdbname] + ', Seq. identity: ' + parseFloat(info.seqid).toFixed(2) + ', aligned residues: ' + info.nresAlign + ', label in 3D: ' + chain + '-Ig' + (i+1).toString());
 
             domainArray.push(igType);
 
@@ -44626,7 +44867,6 @@ class AddTrack {
     }
 
     getExonHtml(exonIndex, colorGradient, from, to, genomeRange, chainid, simpTitle) { let ic = this.icn3d; ic.icn3dui;
-        // return '<div style="display:inline-block; color:white!important; width:' + Math.round(ic.seqAnnWidth *(to - from + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" domain="' + (exonIndex + 1) + '" from="' + from + '" to="' + to + '" setname="' + simpTitle + ', Exon ' + (exonIndex + 1) + '" title="Exon ' + (exonIndex + 1) + ': ' + genomeRange + ' genomic interval" anno="sequence" chain="' + chainid + '"><div style="height: 12px; border: 1px solid #000; background: linear-gradient(to right, ' + colorGradient + ');"></div></div>';
         return '<div style="display:inline-block; color:white!important; width:' + Math.round(ic.seqAnnWidth *(to - from + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" domain="' + (exonIndex + 1) + '" from="' + from + '" to="' + to + '" setname="' + simpTitle + ', ' + (exonIndex + 1) + '" title="Exon: ' + genomeRange + ' genomic interval" anno="sequence" chain="' + chainid + '"><div style="height: 12px; border: 1px solid #000; background: linear-gradient(to right, ' + colorGradient + ');"></div></div>';
     }
 
@@ -45368,7 +45608,7 @@ class AddTrack {
         let targetId = 'genomeRes';
 
         let acc2index = {};
-        
+
         for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
             let acc = accArray[index];
 
@@ -45453,22 +45693,24 @@ class AddTrack {
             trackSeqArrayFinal[i] = '';
         }
 
-        for(let j = 0, jl = trackSeqArray[maxIndex].length; j < jl; ++j) {
-            let seq = trackSeqArray[maxIndex][j];
+        if(trackSeqArray[maxIndex]) {
+            for(let j = 0, jl = trackSeqArray[maxIndex].length; j < jl; ++j) {
+                let seq = trackSeqArray[maxIndex][j];
 
-            let bExon = (seq != '-') ? true : false;
-            if(!bExon) {
-                for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
-                    if(trackSeqArray[i][j] != '-') {
-                        bExon = true;
-                        break;
+                let bExon = (seq != '-') ? true : false;
+                if(!bExon) {
+                    for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
+                        if(trackSeqArray[i][j] != '-') {
+                            bExon = true;
+                            break;
+                        }
                     }
                 }
-            }
-            
-            if(bExon) {
-                for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
-                    trackSeqArrayFinal[i] += trackSeqArray[i][j];
+                
+                if(bExon) {
+                    for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
+                        trackSeqArrayFinal[i] += trackSeqArray[i][j];
+                    }
                 }
             }
         }
@@ -45539,7 +45781,9 @@ class AddTrack {
                 ic.maxAnnoLength = ic.maxAnnoLengthOri + ic.seqStartLen[chainid] + ic.seqEndLen[chainid];
         }
 
-        await ic.annotationCls.resetAnnoAll();
+        // do not remove other tracks
+        // await ic.annotationCls.resetAnnoAll();
+        await ic.showAnnoCls.processSeqData(ic.chainid_seq);
 
         let targetGapHashStr = '';
         let cntTmp = 0;
@@ -45706,7 +45950,7 @@ class AddTrack {
 
         let type = 'identity';
 
-        await thisClass.addExonTracks(chainid, geneid, startpos, type);
+        await this.addExonTracks(chainid, geneid, startpos, type);
     }
 
     async addExonTracks(chainid, geneid, startpos, type) { let ic = this.icn3d, me = ic.icn3dui;
@@ -45741,13 +45985,12 @@ class AddTrack {
                 let cnt = (j == jl - 1) ? itemArray[2] - 3 : itemArray[2]; // The last one is stop codeon
                 cntTotal += cnt;
 
-                let resStart = parseInt(prevCntTotal/3.0 + 0.5); // 0-based
-                let resEnd = parseInt(cntTotal/3.0 + 0.5) - 1; // 0-based
+                let resStart = parseInt((prevCntTotal+2)/3.0); // 0-based
+                let resEnd = parseInt((cntTotal+2)/3.0) - 1; // 0-based
 
-                let genResStart = parseInt(itemArray[0] / 3.0 + 0.5);
-                
-                //let genResEnd = parseInt(itemArray[1] / 3.0 + 0.5); // some difference due to round
-                let genResEnd = genResStart + ic.exonOrder * (resEnd - resStart);
+                let genResEnd = parseInt((itemArray[1]+2) / 3.0);
+                // let genResStart = parseInt((itemArray[0]+2) / 3.0); // some difference due to round
+                let genResStart = genResEnd - ic.exonOrder * (resEnd - resStart);
 
                 rangeArray.push({genomeRange: genomeRange, genResStart: genResStart, genResEnd: genResEnd, resStart: resStart, resEnd: resEnd});
 
@@ -45801,7 +46044,7 @@ class AddTrack {
 
         let ALen = trackSeqArray.length;
 
-        while (i < A.length && j < B.length) {
+        while (A && B && i < A.length && j < B.length) {
             if(A[i] != B[j]) {
                 if(A[i] == '-') { 
                     // insert "-" in B
@@ -48464,7 +48707,7 @@ class HlUpdate {
     }
 
     //Remove the highlight in the 2D interaction diagram.
-    removeHl2D() { let ic = this.icn3d; ic.icn3dui;
+    removeHl2D(bRemoveChainOnly) { let ic = this.icn3d; ic.icn3dui;
           // clear nodes in 2d dgm
           $("#" + ic.pre + "dl_2ddgm rect").attr('stroke', '#000000');
           $("#" + ic.pre + "dl_2ddgm circle").attr('stroke', '#000000');
@@ -48478,6 +48721,22 @@ class HlUpdate {
               $("#" + ic.pre + "dl_2ddgm svg line").attr('stroke', '#000000');
               $("#" + ic.pre + "dl_2ddgm line").attr('stroke-width', 1);
           }
+
+          if(!bRemoveChainOnly) {
+            // clear nodes in 2d interaction network
+            // $("#" + ic.pre + "dl_linegraph rect").attr('stroke', '#000000');
+            $("#" + ic.pre + "dl_linegraph circle").attr('stroke', '#000000');
+    
+            // $("#" + ic.pre + "dl_linegraph rect").attr('stroke-width', 1);
+            $("#" + ic.pre + "dl_linegraph circle").attr('stroke-width', 1);
+
+            // clear nodes in 2d interaction graph
+            $("#" + ic.pre + "dl_scatterplot rect").attr('stroke', '#000000');
+            $("#" + ic.pre + "dl_scatterplot circle").attr('stroke', '#000000');
+    
+            $("#" + ic.pre + "dl_scatterplot rect").attr('stroke-width', 1);
+            $("#" + ic.pre + "dl_scatterplot circle").attr('stroke-width', 1);
+          }
     }
 
     //Remove the selection in the menu of defined sets.
@@ -48575,7 +48834,7 @@ class HlUpdate {
     // update highlight in 2D window
     //Update the highlight of 2D interaction diagram according to the current highlighted atoms.
     updateHl2D(chainArray2d) { let ic = this.icn3d, me = ic.icn3dui;
-      this.removeHl2D();
+      this.removeHl2D(true);
 
       if(ic.hAtoms && ic.atoms && Object.keys(ic.hAtoms).length == Object.keys(ic.atoms).length) return;
 
@@ -49002,6 +49261,8 @@ class LineGraph {
                         && ic.chainsMapping[chainid2] && ic.chainsMapping[chainid2][resid2]) { 
                           mapping1 = (nodeA.s == "a") ? ic.chainsMapping[chainid1][resid1] : ic.chainsMapping[chainid2][resid2];
                           mapping2 = (nodeA.s == "a") ? ic.chainsMapping[chainid2][resid2] : ic.chainsMapping[chainid1][resid1];
+
+                          let bIgRef = (mapping1.length > 4 && !isNaN(parseInt(mapping1.substr(-4, 4)))) || (mapping2.length > 4 && !isNaN(parseInt(mapping2.substr(-4, 4))));
   
                           let mappingid = mapping1 + '_' + mapping2 + '_' + link.c; // link.c determines the interaction type
 
@@ -49013,7 +49274,7 @@ class LineGraph {
                           linkDiff.source += separatorDiff + ic.chainsMapping[chainid1][resid1];
                           linkDiff.target += separatorDiff + ic.chainsMapping[chainid2][resid2];
                       
-                          if(linkedNodeCnt[mappingid] == structureArray.length && linkedNodeInterDiffBool[mappingid] == 0) {
+                          if(linkedNodeCnt[mappingid] == structureArray.length && (bIgRef || linkedNodeInterDiffBool[mappingid] == 0)) {
                               linkArraySplitCommon[index].push(linkCommon);
                           }  
                           else {
@@ -57592,13 +57853,7 @@ class RealignParser {
 
         let allPromise = Promise.allSettled(ajaxArray);
         // try {
-            // let dataArray = await allPromise;
-
-            let startDate = new Date();
             let dataArray = await allPromise;
-            let endDate   = new Date();
-            let miliseconds = (endDate.getTime() - startDate.getTime());
-            console.log("vastdyn time: " + miliseconds + " miliseconds");
           
             ic.qt_start_end = []; // reset the alignment
             await ic.chainalignParserCls.downloadChainalignmentPart2bRealign(dataArray, chainidPairArray, bReverse);  
@@ -57690,6 +57945,8 @@ class RealignParser {
     async realignChainOnSeqAlign(chainresiCalphaHash2, chainidArray, bRealign, bPredefined) { let ic = this.icn3d, me = ic.icn3dui;
         let thisClass = this;
 
+        me.cfg.aligntool = 'seqalign';
+
         //bRealign: realign based on seq alignment
         //bPredefined: chain alignment with predefined matching residues
 
@@ -59887,9 +60144,11 @@ class LoadAtomData {
                   serial2structure[j] = pdbidTmp.toString();
                   mmdbid2pdbid[mmdbidTmp] = pdbidTmp;
               }
-
+              
               for(let j = 0, jl = structure.molecules.length; j < jl; ++j) {
                   let chain = structure.molecules[j].chain;
+                  chain = chain.replace(/_/g, ''); // change "A_1" to "A1"
+
                   let kind = structure.molecules[j].kind;
                   let title = structure.molecules[j].name;
                   //var seq = structure.molecules[j].sequence;
@@ -60882,7 +61141,9 @@ class SetSeqAlign {
 
         let resid = chainid + '_' + resi;
         let resn = ic.residueId2Name[resid];
-        if(!resn) resn = '?';
+        if(!resn) {
+            resn = '?';
+        }
 
         return resn;
     }
@@ -63936,7 +64197,7 @@ class Vastplus {
                 let chainid = chainidArray[i];
                 let atoms = me.hashUtilsCls.intHash(ic.hAtoms, ic.chains[chainid]);               
                 let firstAtom = ic.firstAtomObjCls.getFirstAtomObj(atoms);
-                structHash[firstAtom.structure] = 1;
+                if(firstAtom) structHash[firstAtom.structure] = 1;
             }
         }
 
@@ -64958,6 +65219,11 @@ class ApplyCommand {
 
         ic.drawCls.draw();
       }
+      else if(command == 'add ig labels') {
+        ic.residueLabelsCls.addIgLabels(ic.hAtoms);
+
+        ic.drawCls.draw();
+      }
       else if(command == 'add atom labels') {
         ic.residueLabelsCls.addAtomLabels(ic.hAtoms);
 
@@ -65589,7 +65855,21 @@ class ApplyCommand {
                 let nameArray2 = setNameArray[1].split(',');
 
                 ic.analysisCls.measureDistManySets(nameArray, nameArray2);
-                me.htmlCls.dialogCls.openDlg('dl_disttable', 'Distance among the sets');
+                me.htmlCls.dialogCls.openDlg('dl_disttable', 'Distances among the sets');
+            }
+        }
+      }
+      else if(commandOri.indexOf('angletable') == 0) {
+        let paraArray = commandOri.split(' | ');
+        if(paraArray.length == 2) {
+            let setNameArray = paraArray[1].split(' ');
+
+            if(setNameArray.length == 2) {
+                let nameArray = setNameArray[0].split(',');
+                let nameArray2 = setNameArray[1].split(',');
+
+                ic.analysisCls.measureAngleManySets(nameArray, nameArray2);
+                me.htmlCls.dialogCls.openDlg('dl_angletable', 'Angles among the sets');
             }
         }
       }
@@ -66284,6 +66564,7 @@ class ApplyCommand {
         else if(cmd.indexOf('hide annotation') == 0) return seqAnnoStr + ': checkboxes off';
         else if(cmd == 'add residue labels') return labelStr + 'per Residue';
         else if(cmd == 'add residue number labels') return labelStr + 'per Residue & Number';
+        else if(cmd == 'add Ig domain labels') return labelStr + 'per Ig Domain';
         else if(cmd == 'add atom labels') return labelStr + 'per Atom';
         else if(cmd == 'add chain labels') return labelStr + 'per Chain';
         else if(cmd == 'add terminal labels') return labelStr + 'N- & C- Termini';
@@ -67196,9 +67477,9 @@ class SelectCollections {
         'chemicals': {},
         'ions': {},
         'water': {},
-        'structures': {}, // getSSExpandedAtoms
+        'structures': {},
         'ssbondpnts': {},
-        'residues': {}, // getSSExpandedAtoms
+        'residues': {},
         'chains': {},
         'chainsSeq': {}, //Sequences and Annotation
         'defNames2Atoms': {},
@@ -67247,9 +67528,9 @@ class SelectCollections {
                 'chemicals': ic.chemicals,
                 'ions': ic.ions,
                 'water': ic.water,
-                'structures': ic.structures, // getSSExpandedAtoms
+                'structures': ic.structures,
                 'ssbondpnts': ic.ssbondpnts,
-                'residues': ic.residues, // getSSExpandedAtoms
+                'residues': ic.residues,
                 'chains': ic.chains,
                 'chainsSeq': ic.chainsSeq, //Sequences and Annotation
                 'defNames2Atoms': ic.defNames2Atoms,
@@ -67263,9 +67544,9 @@ class SelectCollections {
                 'chemicals': thisClass.dictionaryDifference(ic.allData['prev']['chemicals'], ic.chemicals),
                 'ions': thisClass.dictionaryDifference(ic.allData['prev']['ions'], ic.ions),
                 'water': thisClass.dictionaryDifference(ic.allData['prev']['water'], ic.water),
-                'structures': thisClass.dictionaryDifference(ic.allData['prev']['structures'], ic.structures), // getSSExpandedAtoms
+                'structures': thisClass.dictionaryDifference(ic.allData['prev']['structures'], ic.structures),
                 'ssbondpnts': thisClass.dictionaryDifference(ic.allData['prev']['ssbondpnts'], ic.ssbondpnts),
-                'residues': thisClass.dictionaryDifference(ic.allData['prev']['residues'], ic.residues), // getSSExpandedAtoms
+                'residues': thisClass.dictionaryDifference(ic.allData['prev']['residues'], ic.residues),
                 'chains': thisClass.dictionaryDifference(ic.allData['prev']['chains'], ic.chains),
                 'chainsSeq': thisClass.dictionaryDifference(ic.allData['prev']['chainsSeq'], ic.chainsSeq), //Sequences and Annotation
                 'defNames2Atoms': thisClass.dictionaryDifference(ic.allData['prev']['defNames2Atoms'], ic.defNames2Atoms),
@@ -74080,7 +74361,73 @@ class Analysis {
 
             $("#" + me.pre + "dl_disttable_html").html(tableHtml);
         }
-     }
+    }
+
+    measureAngleManySets(nameArray, nameArray2) {var ic = this.icn3d, me = ic.icn3dui;
+        if(nameArray.length == 0 || nameArray2.length == 0) {
+            var aaa = 1; //alert("Please select sets for angleance calculation...");
+        }
+        else {
+            let angleHash = {};
+
+            for(let i = 0, il = nameArray.length; i < il; ++i) {
+                let set1 = nameArray[i];
+                let array1 = [set1];
+                angleHash[set1] = {};
+
+                ic.hAtoms = ic.definedSetsCls.getAtomsFromNameArray(array1);
+                let axis1 = ic.axesCls.setPc1Axes(true);
+
+                for(let j = 0, jl = nameArray2.length; j < jl; ++j) {
+                    let set2 = nameArray2[j];
+                    let array2 = [set2];
+
+                    if(set1 == set2) continue;
+
+                    ic.hAtoms = ic.definedSetsCls.getAtomsFromNameArray(array2);
+                    let axis2 = ic.axesCls.setPc1Axes(true);
+
+                    let angleRad = new THREE.Vector3(parseFloat(axis1.x), parseFloat(axis1.y), parseFloat(axis1.z)).angleTo(new THREE.Vector3(parseFloat(axis2.x), parseFloat(axis2.y), parseFloat(axis2.z)));
+                    
+                    let angle = angleRad / 3.1416 * 180;
+                    angle = Math.abs(angle).toFixed(0);
+                    if(angle > 180) angle -= 180;
+                    if(angle > 90) angle = 180 - angle;
+
+                    angleHash[set1][set2] = angle;
+                }
+            }
+
+            let tableHtml = '<table align=center border=1 cellpadding=10 cellspacing=0><tr><th></th>';
+            for(let j = 0, jl = nameArray2.length; j < jl; ++j) {
+                let set2 = nameArray2[j];
+                tableHtml += '<th><b>' + set2 + '</b> (&deg;)</th>';
+            }
+            tableHtml += '</tr>';
+
+            for(let i = 0, il = nameArray.length; i < il; ++i) {
+                let set1 = nameArray[i];
+                tableHtml += '<tr><th><b>' + set1 + '</b> (&deg;)</th>';
+
+                for(let j = 0, jl = nameArray2.length; j < jl; ++j) {
+                    let set2 = nameArray2[j];
+
+                    if(angleHash[set1] && angleHash[set1][set2]) {
+                        tableHtml += '<td><span>' + angleHash[set1][set2] + '</span></td>';
+                    }
+                    else {
+                        tableHtml += '<td>0</td>';
+                    }
+                }
+
+                tableHtml += '</tr>';
+            }
+
+            tableHtml += '</table><br><br>';
+
+            $("#" + me.pre + "dl_angletable_html").html(tableHtml);
+        }
+    }
 
     //Add a line between the position (x1, y1, z1) and the position (x2, y2, z2) with the input "color".
     //The line can be dashed if "dashed" is set true.
@@ -77923,7 +78270,8 @@ class ShareLink {
             }
             else {
                 text += "\nStart of type file======\n";
-                text += ic.InputfileType + "\n";
+                // text += ic.InputfileType + "\n";
+                text += "pdb\n";
                 text += "End of type file======\n";
 
                 text += "Start of data file======\n";
@@ -80788,7 +81136,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.32.0';
+    this.REVISION = '3.33.2';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -80932,7 +81280,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     ic.setStyleCls.handleContextLost();
     ic.applyCenterCls.setWidthHeight(width, height);
     ic.ori_chemicalbinding = ic.opts['chemicalbinding'];
-    if(me.cfg.bCalphaOnly !== undefined) ic.bCalphaOnly = me.cfg.bCalphaOnly;
+    // if(me.cfg.bCalphaOnly !== undefined) ic.bCalphaOnly = me.cfg.bCalphaOnly;
     ic.opts = me.hashUtilsCls.cloneHash(ic.opts);
     ic.STATENUMBER = ic.commands.length;
     // If previously crashed, recover it
@@ -80960,7 +81308,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
         ic.bInputfile = true;
         ic.InputfileType = 'pdb';
         ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + pdbStr : pdbStr;
-        
+
         await ic.pdbParserCls.loadPdbData(pdbStr);
 
         if(me.cfg.resdef !== undefined && me.cfg.chains !== undefined) {
@@ -80971,9 +81319,9 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
                 for(let i = 0, il = structureArray.length; i  < il; ++i) {
                     chainidArray.push(structureArray[i] + '_' + chainArray[i]);
                 }
-                
+
                 chainidArray = ic.chainalignParserCls.addPostfixForChainids(chainidArray);
-                
+
                 let bRealign = true, bPredefined = true;
                 await ic.realignParserCls.realignChainOnSeqAlign(undefined, chainidArray, bRealign, bPredefined);
             }
@@ -80994,7 +81342,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
                     chainidArray.push(domainidArray[i]);
                 }
             }
-            
+
             // get the matched structures, do not include the template
             let mmdbafid = '';
             for(let i = 0, il = chainidArray.length; i < il; ++i) {
@@ -81005,7 +81353,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
             // realign, include the template
             ic.chainidArray = [chain_t].concat(chainidArray);
             ic.chainidArray = ic.chainalignParserCls.addPostfixForChainids(ic.chainidArray);
-            
+
             me.htmlCls.clickMenuCls.setLogCmd('resdef ' + me.cfg.resdef, true);
 
             ic.loadCmd = 'vast_search_chainid ' + ic.chainidArray;
@@ -81082,7 +81430,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     }
     else if(me.cfg.refseqid !== undefined) {
         ic.inputid = me.cfg.refseqid;
-        
+
         // ic.bNCBI = true;
         ic.loadCmd = 'load refseq ' + me.cfg.refseqid;
         me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
@@ -81090,7 +81438,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     }
     else if(me.cfg.protein !== undefined) {
         ic.inputid = me.cfg.protein;
-        
+
         // ic.bNCBI = true;
         ic.loadCmd = 'load protein ' + me.cfg.protein;
         me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
@@ -81099,7 +81447,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     else if(me.cfg.blast_rep_id !== undefined) {
        // ic.bNCBI = true;
        ic.inputid =  me.cfg.query_id + ',' + me.cfg.blast_rep_id;
-       
+
        me.cfg.oriQuery_id = me.cfg.query_id;
        me.cfg.oriBlast_rep_id = me.cfg.blast_rep_id;
 
@@ -81123,7 +81471,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
                 ic.bSmithwm = false;
                 ic.bLocalSmithwm = false;
             }
-            
+
             me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
             await ic.mmdbParserCls.downloadBlast_rep_id(me.cfg.query_id + ',' + me.cfg.blast_rep_id);
        }
@@ -81132,7 +81480,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
             let data = await me.getAjaxPromise(url, 'json', false, 'The RID ' + me.cfg.rid + ' may have expired...');
 
             for(let q = 0, ql = data.BlastOutput2.length; q < ql; ++q) {
-                
+
                 let hitArray;
                 if(data.BlastOutput2[q].report.results.iterations) { // psi-blast may have "iterations". Use the last iteration.
                     let nIterations = data.BlastOutput2[q].report.results.iterations.length;
@@ -81143,7 +81491,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
                     if(data.BlastOutput2[q].report.results.search.query_id != me.cfg.query_id) continue;
                     hitArray = data.BlastOutput2[q].report.results.search.hits;
                 }
-                
+
                 let qseq = undefined;
                 for(let i = 0, il = hitArray.length; i < il; ++i) {
                     let hit = hitArray[i];
@@ -81175,6 +81523,18 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
        }
     }
     else if(me.cfg.cid !== undefined) {
+        if(isNaN(me.cfg.cid)) {
+            let urlCid = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?compound2cid=" + me.cfg.cid;
+            let cidJson = await me.getAjaxPromise(urlCid, 'jsonp');
+            if(cidJson.cid && cidJson.cid[0]) {
+                me.cfg.cid = cidJson.cid[0];
+            }
+            else {
+                var aaa = 1; //alert("Please input an valid PubChem CID...");
+                return;
+            }
+        }
+
         ic.inputid = me.cfg.cid;
 
         let url = "https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/" + ic.inputid + "/description/jsonp";
@@ -81239,7 +81599,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
         }
         me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
 
-        await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);   
+        await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);
         //await ic.loadScriptCls.loadScript(me.cfg.command, undefined, true);
     }
     else if(me.cfg.command !== undefined && me.cfg.command !== '') {
@@ -81253,7 +81613,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
 
         return;
     }
-    
+
     await ic.loadScriptCls.loadScript(me.cfg.command, undefined, true);
 //   });
 //   return me.deferred.promise();
@@ -81321,7 +81681,7 @@ iCn3DUI.prototype.getXMLHttpRqstPromise = function(url, dataType, responseType,
         let oReq = new XMLHttpRequest();
         oReq.open(dataType, url, true);
         oReq.responseType = responseType;
-        
+
         oReq.onreadystatechange = function() {
             if (this.readyState == 4) {
                if(this.status == 200) {
@@ -81373,7 +81733,7 @@ iCn3DUI.prototype.getAjaxPromise = function(url, dataType, beforeSend, alertMess
                 error : function() {
                     if(alertMess) var aaa = 1; //alert(alertMess);
                     if(logMess) console.log(logMess);
-                    
+
                     reject('error');
                 }
             });
@@ -81416,7 +81776,7 @@ iCn3DUI.prototype.getAjaxPostPromise = async function(url, data, beforeSend, ale
                     //if(alertMess) var aaa = 1; //alert(alertMess);
                     if(!me.bNode && alertMess) console.log(alertMess);
                     if(!me.bNode && logMess) console.log(logMess);
-                    
+
                     // reject('error');
                     // keep running the program
                     resolve('error');