icn3d 3.33.0 → 3.33.2

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();
@@ -10397,8 +10400,8 @@ class ClickMenu {
            //if(!me.cfg.notebook) dialog.dialog( "close" );
            let sigma2fofc = parseFloat($("#" + me.pre + "sigma2fofc" ).val());
            let type = '2fofc';
-           await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigma2fofc);
-           //ic.densityCifParserCls.densityCifParser(ic.inputid, type, sigma2fofc);
+           //await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigma2fofc);
+           await ic.densityCifParserCls.densityCifParser(ic.inputid, type, sigma2fofc);
 
            //ic.setOptionCls.setOption('map', '2fofc');
            thisClass.setLogCmd('set map 2fofc sigma ' + sigma2fofc, true);
@@ -10410,7 +10413,8 @@ class ClickMenu {
            //if(!me.cfg.notebook) dialog.dialog( "close" );
            let sigmafofc = parseFloat($("#" + me.pre + "sigmafofc" ).val());
            let type = 'fofc';
-           await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigmafofc);
+           //await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigmafofc);
+           await ic.densityCifParserCls.densityCifParser(ic.inputid, type, sigma2fofc);
            //ic.setOptionCls.setOption('map', 'fofc');
            thisClass.setLogCmd('set map fofc sigma ' + sigmafofc, true);
         });
@@ -10670,13 +10674,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";
@@ -10761,6 +10773,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');
         });
@@ -10947,6 +10963,18 @@ class ClickMenu {
             me.htmlCls.dialogCls.openDlg('dl_contact', 'Set contact map');
         });
 
+        me.myEventCls.onIds(["#" + me.pre + "mn6_DSSP"], "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+         thisClass.setLogCmd('set dssp sse', true);
+         await ic.pdbParserCls.applyCommandDssp();
+         ic.bResetAnno = true;
+
+         if(ic.bAnnoShown) {
+             await ic.showAnnoCls.showAnnotations();
+ 
+             ic.annotationCls.resetAnnoTabAll();
+         }
+        });
+
 
         me.myEventCls.onIds("#" + me.pre + "mn6_hbondsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
            ic.showInterCls.hideHbondsContacts();
@@ -11681,7 +11709,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>";
@@ -12782,11 +12810,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);
@@ -12860,6 +12895,8 @@ class SetMenu {
             html += "</ul>";
             html += "</li>";
 
+            html += this.getLink('mn6_DSSP', 'DSSP Secondary', undefined, 1);
+
             let bOnePdb = me.cfg.mmtfid !== undefined || me.cfg.pdbid !== undefined || me.cfg.opmid !== undefined || me.cfg.mmcifid !== undefined || me.cfg.mmdbid !== undefined || me.cfg.mmdbafid !== undefined || me.cfg.gi !== undefined || me.cfg.blast_rep_id !== undefined;
 
             if(bOnePdb) {
@@ -14102,8 +14139,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>";
 
@@ -14160,14 +14197,14 @@ class SetDialog {
 
         html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at default threshold or at: " 
           + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigma2fofc' value='' size=8> &sigma;</span><br/>";
-        //html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'> " + me.htmlCls.buttonStr + "reload_dsn6file2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button><br><br><br/>";
-        html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6file2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4file2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfile2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfile2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
+        //html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6file2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4file2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfile2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfile2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
+        html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'><br>" + me.htmlCls.buttonStr + "reload_ccp4file2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfile2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfile2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
 
         html += "<span style='white-space:nowrap;font-weight:bold;'>fofc contour at default threshold or at: "
           + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmafofc' value='' size=8> &sigma;</span><br/>";
 
-        //html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'> " + me.htmlCls.buttonStr + "reload_dsn6filefofc' style='margin: 6px 20px 0 0;'>Load DSN6</button><br><br><br>";
-        html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6filefofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4filefofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfilefofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfilefofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
+        //html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6filefofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4filefofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfilefofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfilefofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
+        html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'><br>" + me.htmlCls.buttonStr + "reload_ccp4filefofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfilefofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfilefofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
 
 
         html += me.htmlCls.buttonStr + "elecmapNo4'>Remove Map</button><br>";
@@ -14181,12 +14218,16 @@ class SetDialog {
         html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at default threshold or at: "
           + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmaurl2fofc' value='' size=8> &sigma;</span><br/>";
 
-        html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurl2fofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurl2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurl2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurl2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurl2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
+        //html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurl2fofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurl2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurl2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurl2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurl2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
+
+        html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurl2fofc' size=20><br>" + me.htmlCls.buttonStr + "reload_ccp4fileurl2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurl2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurl2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
 
         html += "<span style='white-space:nowrap;font-weight:bold;'>fofc contour at default threshold or at: "
         + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmaurlfofc' value='' size=8> &sigma;</span><br/>";
 
-        html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurlfofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurlfofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurlfofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfileurlfofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfileurlfofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
+        //html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurlfofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurlfofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurlfofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfileurlfofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfileurlfofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
+
+        html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurlfofc' size=20><br>" + me.htmlCls.buttonStr + "reload_ccp4fileurlfofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>"  + me.htmlCls.buttonStr + "reload_mtzfileurlfofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>"  + me.htmlCls.buttonStr + "reload_rcsbmtzfileurlfofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
 
         html += me.htmlCls.buttonStr + "elecmapNo5'>Remove Map</button><br>";
 
@@ -14734,6 +14775,29 @@ 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 + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_anglemanysets', 'Measure angles among many sets');
+        html += me.htmlCls.spanNowrapStr + "Note: Each set is represented by a vector, which is the X-axis of the principle axes. The angles between the vectors are then calculated.<br/><br/>";
+        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()) {
@@ -15013,6 +15077,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> ";
@@ -15021,6 +15090,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><br><br>";
+        html += "The angle is: " + me.htmlCls.inputTextStr + "id='" + me.pre + "angle_value' value='' size=6> degree.<br><br>";
+        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> ";
@@ -15864,6 +15947,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" );
@@ -17520,6 +17624,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();
             
@@ -28109,18 +28227,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) {
@@ -28155,22 +28272,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;
 
@@ -28179,22 +28298,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;
@@ -28203,7 +28320,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;
@@ -28266,7 +28383,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();
@@ -28301,8 +28418,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);
@@ -28331,7 +28446,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 = [];
@@ -28388,7 +28505,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();
@@ -28477,7 +28594,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) {
 
@@ -28545,18 +28664,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;
@@ -28663,6 +28806,7 @@ class Strand {
 
         return atomsAdjust;
     }
+    */
 }
 
 /**
@@ -28682,7 +28826,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);
@@ -29010,7 +29155,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 = [];
@@ -29122,6 +29267,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);
@@ -29195,183 +29343,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();
+
+                            // 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_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
+                                if(nextAtom) {
+                                    pnts.push(nextAtom.coord);
+                                    colors.push(nextAtom.color);
 
-            let pnts = pnts_clrs[0];
-            colors = pnts_clrs[2];
+                                    let radiusFinal = this.getRadius(radius, atom);
+                                    radii.push(radiusFinal);
+                                }
+                            }
+                       
+                        }
 
-            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);
+                        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;
+    };
 
-            //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' ];
+    // 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;
 
-            // 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;
+        if (_pnts.length < 2) return;
 
-                    geoColors[vertexIndex] = color; // use this array for convenience
+        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;
 
-                    prevColor = color;
-                }
-            }
+        let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
 
-            // 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 pnts = pnts_clrs[0];
+        colors = pnts_clrs[2];
+
+        let constRadiius;
+        // a threshold to stop drawing the tube if it's less than this ratio of radius
+        let thresholdRatio = 1; //0.9;
+
+        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 }));
@@ -29954,7 +30166,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);
@@ -30035,6 +30247,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));
 
@@ -34253,6 +34470,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) ) {
@@ -34409,87 +34629,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);
+                    }
                 }
             }
         }
@@ -44326,7 +44546,7 @@ class AddTrack {
 
     }
 
-    showNewTrack(chnid, title, text, cssColorArray, inTarget2queryHash, type, color, bMsa, fromArray, toArray, seqStartLen, exonArray) {  let ic = this.icn3d, me = ic.icn3dui;
+    showNewTrack(chnid, title, text, cssColorArray, inTarget2queryHash, type, color, bMsa, fromArray, toArray, seqStartLen, exonArray, offsetArray) {  let ic = this.icn3d, me = ic.icn3dui;
         //if(ic.customTracks[chnid] === undefined) {
         //    ic.customTracks[chnid] = {}
         //}
@@ -44544,14 +44764,16 @@ class AddTrack {
 
         if(fromArray !== undefined) {
             htmlTmp2 = '';
-            let fromArray2 = [], toArray2 = [];
+            let fromArray2 = [], toArray2 = [], offsetArray2 = [];
             for(let i = 0, il = fromArray.length; i < il; ++i) {
                 fromArray2.push(fromArray[i]);
+                offsetArray2.push(offsetArray[i]);
 
                 for(let j = parseInt(fromArray[i]); j <= parseInt(toArray[i]); ++j) {
                     if(ic.targetGapHash !== undefined && ic.targetGapHash.hasOwnProperty(j)) {
                         toArray2.push(j - 1);
                         fromArray2.push(j);
+                        offsetArray2.push(offsetArray[i]);
                     }
                 }
 
@@ -44585,6 +44807,7 @@ class AddTrack {
                     // determine how this range sits in the exon ranges in exonArray
                     let startExon, endExon;
                     
+                    let offset = offsetArray2[i];
                     cnt = toArray[i] - fromArray[i] + 1;
                     let from = prevCntTotal, to = prevCntTotal + cnt - 1;
 
@@ -44613,26 +44836,26 @@ class AddTrack {
                         endColorStr = this.getExonColor(startExon.rangeStart, startExon.rangeEnd, to);
 
                         colorGradient = startColorStr + ' 0%, #FFF 50%, ' + endColorStr + ' 100%';
-                        htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, endExon.to, startExon.genomeRange, chnid, simpTitle);
+                        htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, endExon.to, startExon.genomeRange, chnid, simpTitle, offset);
                     }
                     else {
                         if(startExon) {
                             startColorStr = this.getExonColor(startExon.rangeStart, startExon.rangeEnd, from);
 
                             colorGradient = startColorStr + ' 0%, #FFF 50%, #00F 100%';
-                            htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, startExon.rangeEnd, startExon.genomeRange, chnid, simpTitle);
+                            htmlTmp2 += this.getExonHtml(startExon.exonIndex, colorGradient, startExon.from, startExon.rangeEnd, startExon.genomeRange, chnid, simpTitle, offset);
                         }
 
                         if(startExon && endExon) {
                             for(let j = startExon.exonIndex + 1; j < endExon.exonIndex; ++j) {
                                 colorGradient = '#F00 0%, #FFF 50%, #00F 100%';
-                                htmlTmp2 += this.getExonHtml(j, colorGradient, exonArray[j].resStart, exonArray[j].resEnd, exonArray[j].genomeRange, chnid, simpTitle);
+                                htmlTmp2 += this.getExonHtml(j, colorGradient, exonArray[j].resStart, exonArray[j].resEnd, exonArray[j].genomeRange, chnid, simpTitle, offset);
                             }
 
                             endColorStr = this.getExonColor(endExon.rangeStart, endExon.rangeEnd, to);
 
                             colorGradient = '#F00 0%, #FFF 50%, ' + endColorStr + ' 100%';
-                            htmlTmp2 += this.getExonHtml(endExon.exonIndex, colorGradient, endExon.rangeStart, endExon.to, endExon.genomeRange, chnid, simpTitle);
+                            htmlTmp2 += this.getExonHtml(endExon.exonIndex, colorGradient, endExon.rangeStart, endExon.to, endExon.genomeRange, chnid, simpTitle, offset);
                         }
                     }
 
@@ -44666,9 +44889,8 @@ 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>';
+    getExonHtml(exonIndex, colorGradient, from, to, genomeRange, chainid, simpTitle, offset) { 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 + offset) + '" to="' + (to + offset) + '" 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>';
     }
 
     getExonColor(start, end, pos) { let ic = this.icn3d; ic.icn3dui;
@@ -45409,7 +45631,7 @@ class AddTrack {
         let targetId = 'genomeRes';
 
         let acc2index = {};
-        
+
         for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
             let acc = accArray[index];
 
@@ -45494,22 +45716,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];
+                    }
                 }
             }
         }
@@ -45580,7 +45804,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;
@@ -45611,6 +45837,7 @@ class AddTrack {
             let fromArray = [], toArray = [];
             let bFound = false;
             let seqStartLen = 0;
+            let offset = 0, offsetArray = [];
             //    for(let k = seqStart; k <= seqEnd; ++k) {
             for(let k = 0; k < seqLength; ++k) {
                 //if(seqFirst[k] == '-') continue;
@@ -45619,19 +45846,29 @@ class AddTrack {
 
                 resn = trackSeqArray[j][k];
 
+                if(resn != '-') {
+                    if(!bFound) {
+                        seqStartLen = k;
+                        bFound = true;
+                        
+                        offset = ic.startposGiSeq - ic.seqStartLen[chainid] + seqStartLen;
+                    }
+                }
+
                 if(prevResn == '-' && resn != '-') {
                     fromArray.push(k);
+                    offsetArray.push(offset);
                 }
 
                 if(prevResn != '-' && resn == '-') {
                     toArray.push(k - 1);
                 }
 
-                if(resn != '-') {
-                    if(!bFound) {
-                        seqStartLen = k;
-                        bFound = true;
-                    }
+                // use "offset" to adjut the residue numbers, e.g., P20138
+                // some isoforms starts residues before the first residue in the template sequence
+                if(k >= ic.seqStartLen[chainid]) {
+                    if(seqFirst[k] == '-') offset--;
+                    if(resn == '-') offset++;
                 }
 
                 text += resn; //ic.giSeq[chainid][i];
@@ -45652,7 +45889,7 @@ class AddTrack {
             let title =(trackTitleArray[j].length < 20) ? trackTitleArray[j] : trackTitleArray[j].substr(0, 20) + '...';
             let bMsa = true;
             let exonArray = (acc2exons) ? acc2exons[trackTitleArray[j]] : undefined;
-            this.showNewTrack(chainid, title, text, undefined, undefined, type, undefined, bMsa, fromArray, toArray, seqStartLen, exonArray);
+            this.showNewTrack(chainid, title, text, undefined, undefined, type, undefined, bMsa, fromArray, toArray, seqStartLen, exonArray, offsetArray);
         }
 
         // update exon color
@@ -45747,7 +45984,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;
@@ -45782,13 +46019,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});
 
@@ -45842,7 +46078,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
@@ -52461,8 +52697,10 @@ class ChainalignParser {
             //$.when(ic.pdbParserCls.applyCommandDssp(true)).then(function() {
                 await ic.pdbParserCls.applyCommandDssp(true);
 
+                // original version =============
                 // align PDB chains
                 for(let index in ic.pdbChainIndexHash) {
+                    //ic.pdbChainIndexHash[index] = mmdbid_q_tmp + "_" + ic.chain_q + "_" + ic.mmdbid_t + "_" + ic.chain_t;
                     let idArray = ic.pdbChainIndexHash[index].split('_');
                     mmdbid_q = idArray[0];
                     idArray[1];
@@ -52477,25 +52715,49 @@ class ChainalignParser {
                 let urlalign = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi";
                 let urltmalign = me.htmlCls.baseUrl + "tmalign/tmalign.cgi";
 
+                let resRangeArray = (me.cfg.resrange) ? me.cfg.resrange.split(' | ') : [];
+
                 for(let index in ic.afChainIndexHash) {
                     let idArray = ic.afChainIndexHash[index].split('_');
                     mmdbid_q = idArray[0];
                     let chain_q = idArray[1];
+                    let chainid_q = mmdbid_q + '_' + chain_q;
+
                     mmdbid_t = idArray[2];
                     let chain_t = idArray[3];
+                    let chainid_t = mmdbid_t + '_' + chain_t;
+
+                    let atomSet_t = (me.cfg.resrange) ? ic.realignParserCls.getSeqCoorResid(resRangeArray[0].split(','), chainid_t).hAtoms : ic.chains[chainid_t];
+                    let atomSet_q = (me.cfg.resrange) ? ic.realignParserCls.getSeqCoorResid(resRangeArray[index].split(','), chainid_q).hAtoms : ic.chains[chainid_q];
+                // end of original version =============
+                
+/*
+                // new version to be done for VASTsrv ==============
+                // dynamically align pairs in all chainids
+                let ajaxArray = [], indexArray = [], struArray = [];
+                let urlalign = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi";
+                let urltmalign = me.htmlCls.baseUrl + "tmalign/tmalign.cgi";
+
+                let resRangeArray = (me.cfg.resrange) ? me.cfg.resrange.split(' | ') : [];
+
+                // dynamically align pairs in all chainids
+                let atomSet_t = (me.cfg.resrange) ? ic.realignParserCls.getSeqCoorResid(resRangeArray[0].split(','), chainidArray[0]).hAtoms : ic.chains[chainidArray[0]];
+                for(let index = 1, indexl = chainidArray.length; index < indexl; ++index) {
+                    let atomSet_q = (me.cfg.resrange) ? ic.realignParserCls.getSeqCoorResid(resRangeArray[index].split(','), chainidArray[index]).hAtoms : ic.chains[chainidArray[index]];
+                // end of new version to be done for VASTsrv ==============
+*/
 
                     let alignAjax;
                     if(me.cfg.aligntool != 'tmalign') {
-                        let jsonStr_q = ic.domain3dCls.getDomainJsonForAlign(ic.chains[mmdbid_q + '_' + chain_q]);
-                        let jsonStr_t = ic.domain3dCls.getDomainJsonForAlign(ic.chains[mmdbid_t + '_' + chain_t]);
+                        let jsonStr_q = ic.domain3dCls.getDomainJsonForAlign(atomSet_q);
+                        let jsonStr_t = ic.domain3dCls.getDomainJsonForAlign(atomSet_t);
                             
                         let dataObj = {'domains1': jsonStr_q, 'domains2': jsonStr_t};
                         alignAjax = me.getAjaxPostPromise(urlalign, dataObj);
                     }
                     else {
-                        let pdb_query = ic.saveFileCls.getAtomPDB(ic.chains[mmdbid_q + '_' + chain_q]);
-                
-                        let pdb_target= ic.saveFileCls.getAtomPDB(ic.chains[mmdbid_t + '_' + chain_t]);
+                        let pdb_query = ic.saveFileCls.getAtomPDB(atomSet_q);
+                        let pdb_target= ic.saveFileCls.getAtomPDB(atomSet_t);
 
                         let dataObj = {'pdb_query': pdb_query, 'pdb_target': pdb_target};
                         alignAjax = me.getAjaxPostPromise(urltmalign, dataObj);                
@@ -52898,7 +53160,7 @@ class ChainalignParser {
         return chainidArray;
     }
 
-    async downloadChainalignment(chainalign, resnum, resdef) { let ic = this.icn3d, me = ic.icn3dui;
+    async downloadChainalignment(chainalign) { let ic = this.icn3d, me = ic.icn3dui;
         let thisClass = this;
 
         ic.opts['proteins'] = 'c alpha trace';
@@ -53175,7 +53437,7 @@ class ChainalignParser {
     async loadOpmDataForChainalign(data1, data2, chainidArray, mmdbidArray) { let ic = this.icn3d, me = ic.icn3dui;
         let thisClass = this;
 
-        if(me.cfg.resnum || me.cfg.resdef) {
+        if(me.cfg.resnum || me.cfg.resdef || me.cfg.resrange) {
             if(!ic.bCommandLoad) ic.init(); // remove all previously loaded data
             await this.downloadChainalignmentPart2(data1, data2, undefined, chainidArray);
 
@@ -57651,13 +57913,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);  
@@ -57749,6 +58005,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
 
@@ -58056,6 +58314,7 @@ class DensityCifParser {
 
        //https://www.ebi.ac.uk/pdbe/densities/doc.html
        if(type == '2fofc' || type == 'fofc') {
+           detail = 0;
            url = "https://www.ebi.ac.uk/pdbe/densities/x-ray/" + pdbid.toLowerCase() + "/cell?detail=" + detail;
        }
        else if(type == 'em') {
@@ -58096,6 +58355,39 @@ class DensityCifParser {
         }
     }
 
+    async densityCifParserBase(url, type, sigma, location, bInputSigma) { let ic = this.icn3d, me = ic.icn3dui;
+        let thisClass = this;
+
+        //https://stackoverflow.com/questions/33902299/using-jquery-ajax-to-download-a-binary-file
+        if(type == '2fofc' && ic.bAjax2fofc) {
+            ic.mapData.sigma2 = sigma;
+            ic.setOptionCls.setOption('map', type);
+        }
+        else if(type == 'fofc' && ic.bAjaxfofc) {
+            ic.mapData.sigma = sigma;
+            ic.setOptionCls.setOption('map', type);
+        }
+        else {
+            let arrayBuffer = await me.getXMLHttpRqstPromise(url, 'GET', 'arraybuffer', type);
+            
+            thisClass.parseChannels(arrayBuffer, type, sigma);
+
+            if(type == '2fofc' || type == 'fofc') {
+                ic.bAjax2fofc = true;
+                ic.bAjaxfofc = true;
+
+                ic.setOptionCls.setOption('map', type);
+            }
+            else if(type == 'em') {
+                ic.bAjaxEm = true;
+
+                ic.setOptionCls.setOption('emmap', type);
+            }
+        }
+
+        // return sigma;
+    }
+
     parseChannels(densitydata, type, sigma) { let ic = this.icn3d; ic.icn3dui;
         let cif = this.BinaryParse(densitydata);
 
@@ -59946,9 +60238,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;
@@ -60941,7 +61235,9 @@ class SetSeqAlign {
 
         let resid = chainid + '_' + resi;
         let resn = ic.residueId2Name[resid];
-        if(!resn) resn = '?';
+        if(!resn) {
+            resn = '?';
+        }
 
         return resn;
     }
@@ -63084,7 +63380,7 @@ class LoadCIF {
         
         let bFirstAtom = true;
 
-        let cifArray = bcifData.split('ENDMDL\n');
+        let cifArray = (bText) ? bcifData.split('ENDMDL\n') : [bcifData];
 
         for(let index = 0, indexl = cifArray.length; index  < indexl; ++index) {
             ++moleculeNum;
@@ -65653,7 +65949,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');
             }
         }
       }
@@ -66061,6 +66371,16 @@ class ApplyCommand {
         ic.transformCls.rotateCoord(ic.hAtoms, mArrayFloat);
         ic.drawCls.draw();
       }
+      else if(command.indexOf('set dssp sse') == 0) {
+        await ic.pdbParserCls.applyCommandDssp();
+        ic.bResetAnno = true;
+
+        if(ic.bAnnoShown) {
+            await ic.showAnnoCls.showAnnotations();
+
+            ic.annotationCls.resetAnnoTabAll();
+        }
+      }
 
     // special, select ==========
 
@@ -67261,9 +67581,9 @@ class SelectCollections {
         'chemicals': {},
         'ions': {},
         'water': {},
-        'structures': {}, // getSSExpandedAtoms
+        'structures': {},
         'ssbondpnts': {},
-        'residues': {}, // getSSExpandedAtoms
+        'residues': {},
         'chains': {},
         'chainsSeq': {}, //Sequences and Annotation
         'defNames2Atoms': {},
@@ -67312,9 +67632,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,
@@ -67328,9 +67648,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),
@@ -68043,20 +68363,23 @@ class LoadScript {
           }
         }
         else if(command.indexOf('load chainalignment') !== -1) {
-          //load chainalignment [id] | resnum [resnum] | resdef [resnum] | aligntool [aligntool] | parameters [inpara]
+          //load chainalignment [id] | resnum [resnum] | resdef [resdef] | aligntool [aligntool] | parameters [inpara] | resrange [resrange] 
           let urlArray = command.split(" | ");
           if(urlArray.length > 1 && urlArray[1].indexOf('resnum') != -1) {
                 me.cfg.resnum = urlArray[1].substr(urlArray[1].indexOf('resnum') + 7);
           }
           if(urlArray.length > 2 && urlArray[2].indexOf('resdef') != -1) {
-                me.cfg.resdef = urlArray[2].substr(urlArray[1].indexOf('resdef') + 7);
+                me.cfg.resdef = urlArray[2].substr(urlArray[2].indexOf('resdef') + 7);
           }
           if(urlArray.length > 3 && urlArray[3].indexOf('aligntool') != -1) {
-                me.cfg.aligntool = urlArray[3].substr(urlArray[1].indexOf('aligntool') + 10);
+                me.cfg.aligntool = urlArray[3].substr(urlArray[3].indexOf('aligntool') + 10);
+          }
+          if(urlArray.length > 5 && urlArray[5].indexOf('resrange') != -1) {
+            me.cfg.resrange = urlArray[5].substr(urlArray[5].indexOf('resrange') + 9);
           }
 
           me.cfg.chainalign = id;
-          await ic.chainalignParserCls.downloadChainalignment(id, me.cfg.resnum, me.cfg.resdef);
+          await ic.chainalignParserCls.downloadChainalignment(id);
         }
         else if(command.indexOf('load url') !== -1) {
             let typeStr = load_parameters[1]; // type pdb
@@ -68105,7 +68428,8 @@ class LoadScript {
               if(urlArray.length == 2) {
                 let bInputSigma = true;
                 if(fileType == 'dsn6') {
-                  await ic.dsn6ParserCls.dsn6ParserBase(urlArray[1], type, sigma, 'url', bInputSigma);
+                  // await ic.dsn6ParserCls.dsn6ParserBase(urlArray[1], type, sigma, 'url', bInputSigma);
+                  await ic.densityCifParserCls.densityCifParserBase(urlArray[1], type, sigma, 'url', bInputSigma);
                 }
                 else if(fileType == 'ccp4') {
                   await ic.ccp4ParserCls.ccp4ParserBase(urlArray[1], type, sigma, 'url', bInputSigma);
@@ -68118,7 +68442,8 @@ class LoadScript {
                 }
               }
               else {
-                await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigma);
+                // await ic.dsn6ParserCls.dsn6Parser(ic.inputid, type, sigma);
+                await ic.densityCifParserCls.densityCifParser(ic.inputid, type, sigma);
               }
           }
     //   }); // end of me.deferred = $.Deferred(function() {
@@ -74145,7 +74470,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.
@@ -77988,7 +78379,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";
@@ -80853,7 +81245,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.33.0';
+    this.REVISION = '3.33.3';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -80997,7 +81389,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
@@ -81025,7 +81417,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) {
@@ -81036,9 +81428,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);
             }
@@ -81059,7 +81451,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) {
@@ -81070,7 +81462,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;
@@ -81147,7 +81539,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);
@@ -81155,7 +81547,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);
@@ -81164,7 +81556,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;
 
@@ -81188,7 +81580,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);
        }
@@ -81197,7 +81589,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;
@@ -81208,7 +81600,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];
@@ -81240,6 +81632,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";
@@ -81284,9 +81688,9 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
 
         ic.bChainAlign = true;
         ic.inputid = me.cfg.chainalign;
-        ic.loadCmd = 'load chainalignment ' + me.cfg.chainalign + ' | resnum ' + me.cfg.resnum + ' | resdef ' + me.cfg.resdef + ' | aligntool ' + me.cfg.aligntool + ' | parameters ' + me.cfg.inpara;
+        ic.loadCmd = 'load chainalignment ' + me.cfg.chainalign + ' | resnum ' + me.cfg.resnum + ' | resdef ' + me.cfg.resdef + ' | aligntool ' + me.cfg.aligntool + ' | parameters ' + me.cfg.inpara + ' | resrange ' + me.cfg.resrange;
         me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
-        await ic.chainalignParserCls.downloadChainalignment(me.cfg.chainalign, me.cfg.resnum, me.cfg.resdef);
+        await ic.chainalignParserCls.downloadChainalignment(me.cfg.chainalign);
     }
     else if(me.cfg.mmdbafid !== undefined) {
         // ic.bNCBI = true;
@@ -81304,7 +81708,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 !== '') {
@@ -81318,7 +81722,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
 
         return;
     }
-    
+
     await ic.loadScriptCls.loadScript(me.cfg.command, undefined, true);
 //   });
 //   return me.deferred.promise();
@@ -81386,7 +81790,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) {
@@ -81438,7 +81842,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');
                 }
             });
@@ -81481,7 +81885,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');