icn3d 3.40.5 → 3.41.0

package/icn3d.module.js

@@ -9728,9 +9728,9 @@ class ClickMenu {
     }
 
     getHiddenMenusFromCache() { let me = this.icn3dui; me.icn3d;
-      // me.htmlCls.shownMenus = {};
+      me.htmlCls.shownMenus = {};
 
-      // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+      let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
 
       let idArrayStr = (localStorage) ? localStorage.getItem('hiddenmenus') : '';
       
@@ -9739,31 +9739,23 @@ class ClickMenu {
 
          let idArray = JSON.parse(idArrayStr);
 
-         // for(let i = 0, il = idArray.length; i < il; ++i) {
-         //     me.htmlCls.shownMenus[idArray[i]] = 1;
-         // }
          for(let menu in me.htmlCls.allMenus) {
             if(idArray.indexOf(menu) == -1) {
                me.htmlCls.shownMenus[menu] = 1;
             }
          }
       }
-      //###
       else {
-         me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+         if(mode == 'all') {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+         }
+         else if(!mode || mode == 'simple') {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+         }
+         else {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+         }
       }
-
-      // else {
-      //    if(mode == 'all') {
-      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
-      //    }
-      //    else if(!mode || mode == 'simple') {
-      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
-      //    }
-      //    else {
-      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
-      //    }
-      // }
     }
     
     displayShownMenus() { let me = this.icn3dui; me.icn3d;
@@ -12242,7 +12234,7 @@ class SetMenu {
 
         let tdStr = '<td valign="top">';
 
-        // html += tdStr + this.setMenuMode() + '</td>';
+        html += tdStr + this.setMenuMode() + '</td>';
 
         html += tdStr + this.setMenu1() + '</td>';
 
@@ -12253,12 +12245,11 @@ class SetMenu {
         html += tdStr + this.setMenu4() + '</td>';
 
         html += tdStr + this.setMenu5() + '</td>';
-        //html += tdStr + this.setMenu5b() + '</td>';
         html += tdStr + this.setMenu6() + '</td>';
 
         // reset the menus at the end of the menus
-        // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
-        // this.resetMenu(mode);
+        let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+        this.resetMenu(mode);
 
         // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
 
@@ -12366,7 +12357,7 @@ class SetMenu {
         }
         html += "<div>";
 
-        // html += '<li>' + this.setMenuMode(true);
+        html += '<li>' + this.setMenuMode(true);
 
         let liStr = "<li><span class='icn3d-menu-color'";
 
@@ -12387,8 +12378,8 @@ class SetMenu {
         html += this.setMenu6_base();
 
         // reset the menus at the end of the menus
-        // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
-        // this.resetMenu(mode);
+        let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+        this.resetMenu(mode);
 
         // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
 
@@ -12478,7 +12469,7 @@ class SetMenu {
 
         html += me.htmlCls.divStr + "selection' style='display:none;'><div style='position:absolute; z-index:555; float:left; display:table-row; margin: 32px 0px 0px 0px;'>";
         //html += "<table style='margin-top: 3px; width:100px;'>";
-        html += "<table style='margin-top: 3px; width:770px; background-color:#EEE;'>";
+        html += "<table style='margin: 3px 0px 0px 76px; width:770px; background-color:#EEE;'>";
 
         html += this.setTools_base();
 
@@ -12794,9 +12785,9 @@ class SetMenu {
         html += "</ul>";
         html += "</li>";
 
-        html += this.getMenuText('mn1_aligntwostru', 'Protein Complexes', undefined, undefined, 2);
+        html += this.getMenuText('mn1_aligntwostru', 'Protein Complexes', undefined, 1, 2);
         html += "<ul>";
-        html += this.getLink('mn1_align', 'Two PDB Structures ' + me.htmlCls.wifiStr, undefined, 3);
+        html += this.getLink('mn1_align', 'Two PDB Structures ' + me.htmlCls.wifiStr, 1, 3);
         html += this.getLink('mn1_alignaf', 'Two AlphaFold Structures ' + me.htmlCls.wifiStr, undefined, 3);
         html += "</ul>";
 
@@ -12850,8 +12841,8 @@ class SetMenu {
         html += "<ul>";
         html += this.getMenuText('mn1_savepngimage', 'iCn3D PNG Image', undefined, 1, 2);
         html += "<ul>";
-        html += this.getLink('mn1_exportCanvas', 'Original Size & HTML', 1, 3);
-        html += this.getLink('mn1_exportCanvas1', 'Original Size', undefined, 3);
+        html += this.getLink('mn1_exportCanvas', 'Original Size & HTML', undefined, 3);
+        html += this.getLink('mn1_exportCanvas1', 'Original Size', 1, 3);
 
         html += this.getLink('mn1_exportCanvas2', '2X Large', undefined, 3);
         html += this.getLink('mn1_exportCanvas4', '4X Large', undefined, 3);
@@ -12938,7 +12929,7 @@ class SetMenu {
         html += "<ul class='icn3d-mn-item'>";
 
         html += this.getLink('mn2_definedsets', 'Defined Sets', 1, 1);
-        html += this.getLink('mn2_selectall', 'All', undefined, 1);
+        html += this.getLink('mn2_selectall', 'All', 1, 1);
         html += this.getLink('mn2_selectdisplayed', 'Displayed Set', undefined, 1);
         html += this.getLink('mn2_aroundsphere', 'by Distance', 1, 1);
 
@@ -12954,10 +12945,10 @@ class SetMenu {
         html += "</li>";
 
         html += this.getLink('mn2_selectcomplement', 'Inverse', undefined, 1);
-        html += this.getLink('mn2_selectmainchains', 'Main Chains', undefined, 1);
-        html += this.getLink('mn2_selectsidechains', 'Side Chains', undefined, 1);
+        html += this.getLink('mn2_selectmainchains', 'Main Chains', 1, 1);
+        html += this.getLink('mn2_selectsidechains', 'Side Chains', 1, 1);
         html += this.getLink('mn2_selectmainsidechains', 'Main & Side Chains', undefined, 1);
-        html += this.getLink('mn2_command', 'Advanced', undefined, 1);
+        html += this.getLink('mn2_command', 'Advanced', 1, 1);
 
         if(me.cfg.cid === undefined) {
             html += this.getMenuText('mn2_selon3d', 'Select on 3D', undefined, 1, 1);
@@ -12990,7 +12981,7 @@ class SetMenu {
         html += this.getMenuSep();
 
         html += this.getLink('mn2_saveselection', 'Save Selection', 1, 1);
-        html += this.getLink('clearall', 'Clear Selection', undefined, 1);
+        html += this.getLink('clearall', 'Clear Selection', 1, 1);
         html += this.getLink('mn2_saveresidue', 'Save Res. in Sel.', 1, 1);
 
         html += this.getMenuSep();
@@ -13055,7 +13046,7 @@ class SetMenu {
         html += this.getLinkWrapper('mn2_alternate', 'Alternate(Key "a")', 'mn2_alternateWrap', undefined, 1);
 
         if(me.cfg.opmid !== undefined) {
-            html += this.getLinkWrapper('togglemem', 'Toggle Membrane', 'togglememli', undefined, 1);
+            html += this.getLinkWrapper('togglemem', 'Toggle Membrane', 'togglememli', 1, 1);
         }
         //else if(me.cfg.mmdbafid !== undefined || me.cfg.afid !== undefined) {
         else if(me.cfg.cid === undefined) {
@@ -13070,14 +13061,14 @@ class SetMenu {
 
         html += this.getMenuSep();
 
-        html += this.getMenuText('mn2_vrarhints', 'VR & AR Hints', undefined, 1, 1);
+        html += this.getMenuText('mn2_vrarhints', 'VR & AR Hints', undefined, undefined, 1);
         html += "<ul>";
-        html += this.getMenuUrl("vrhint", me.htmlCls.baseUrl + "icn3d/icn3d.html#vr", "VR: VR Headsets", 1, 2);
-        html += this.getMenuUrl("arhint", me.htmlCls.baseUrl + "icn3d/icn3d.html#ar", "AR: Chrome in Android", 1, 2);
+        html += this.getMenuUrl("vrhint", me.htmlCls.baseUrl + "icn3d/icn3d.html#vr", "VR: VR Headsets", undefined, 2);
+        html += this.getMenuUrl("arhint", me.htmlCls.baseUrl + "icn3d/icn3d.html#ar", "AR: Chrome in Android", undefined, 2);
         html += "</ul>";
         html += "</li>";
 
-        html += this.getLink('mn6_sidebyside', 'Side by Side', 1, 1);
+        html += this.getLink('mn6_sidebyside', 'Side by Side', undefined, 1);
 
         html += this.getMenuText('mn2_rotate', 'Rotate', undefined, 1, 1);
         html += "<ul>";
@@ -13189,7 +13180,7 @@ class SetMenu {
                 html += this.getRadio('mn3_proteins', 'mn3_proteinsRibbon', 'Ribbon', true, 1, 2);
             }
 
-            html += this.getRadio('mn3_proteins', 'mn3_proteinsStrand', 'Strand', undefined, undefined, 2);
+            html += this.getRadio('mn3_proteins', 'mn3_proteinsStrand', 'Strand', undefined, 1, 2);
             html += this.getRadio('mn3_proteins', 'mn3_proteinsCylinder', 'Cylinder and Plate', undefined, undefined, 2);
             html += this.getRadio('mn3_proteins', 'mn3_proteinsSchematic', 'Schematic', undefined, 1, 2);
 
@@ -13201,7 +13192,7 @@ class SetMenu {
             }
 
             html += this.getRadio('mn3_proteins', 'mn3_proteinsBackbone', 'Backbone', undefined, undefined, 2);
-            html += this.getRadio('mn3_proteins', 'mn3_proteinsBfactor', 'B-factor Tube', undefined, 1, 2);
+            html += this.getRadio('mn3_proteins', 'mn3_proteinsBfactor', 'B-factor Tube', undefined, undefined, 2);
             html += this.getRadio('mn3_proteins', 'mn3_proteinsLines', 'Lines', undefined, 1, 2);
             html += this.getRadio('mn3_proteins', 'mn3_proteinsStick', 'Stick', undefined, 1, 2);
             html += this.getRadio('mn3_proteins', 'mn3_proteinsBallstick', 'Ball and Stick', undefined, 1, 2);
@@ -13265,10 +13256,10 @@ class SetMenu {
         html += "</li>";
 
         //if(me.cfg.cid !== undefined) {
-            html += this.getMenuText('mn3_hydrogenswrap', 'Hydrogens', undefined, 1, 1);
+            html += this.getMenuText('mn3_hydrogenswrap', 'Hydrogens', undefined, undefined, 1);
             html += "<ul>";
-            html += this.getRadio('mn3_hydrogens', 'mn3_hydrogensYes', 'Show', true, 1, 2);
-            html += this.getRadio('mn3_hydrogens', 'mn3_hydrogensNo', 'Hide', undefined, 1, 2);
+            html += this.getRadio('mn3_hydrogens', 'mn3_hydrogensYes', 'Show', true, undefined, 2);
+            html += this.getRadio('mn3_hydrogens', 'mn3_hydrogensNo', 'Hide', undefined, undefined, 2);
             html += "</ul>";
             html += "</li>";
         //}
@@ -13643,7 +13634,7 @@ class SetMenu {
 
         html += "</ul>";
 
-        html += this.getRadio('mn4_clr', 'mn4_clrCustom', 'Color Picker', undefined, undefined, 1);
+        html += this.getRadio('mn4_clr', 'mn4_clrCustom', 'Color Picker', undefined, 1, 1);
         html += this.getMenuSep();
 
         if(me.cfg.cid === undefined) {
@@ -13684,7 +13675,7 @@ class SetMenu {
             html += this.getRadio('mn4_clr', 'mn4_clrBfactorNorm', 'Percentile', undefined, 1, 2);
             html += "</ul>";
 
-            html += this.getRadio('mn4_clr', 'mn4_clrArea', 'Solvent<br><span style="padding-left:1.5em;">Accessibility</span>', undefined, undefined, 1);
+            html += this.getRadio('mn4_clr', 'mn4_clrArea', 'Solvent<br><span style="padding-left:1.5em;">Accessibility</span>', undefined, 1, 1);
 
             html += this.getRadio('mn4_clr', 'mn4_clrStructure', 'Structure', undefined, 1, 1);
 
@@ -13696,7 +13687,7 @@ class SetMenu {
             }
 
             //if(me.cfg.mmdbid !== undefined || me.cfg.gi !== undefined) {
-              html += this.getRadio('mn4_clr', 'mn4_clrdomain', '3D Domain', undefined, undefined, 1);
+              html += this.getRadio('mn4_clr', 'mn4_clrdomain', '3D Domain', undefined, 1, 1);
             //}
 
             if(me.cfg.cid === undefined) {
@@ -13716,16 +13707,16 @@ class SetMenu {
             html += this.getRadio('mn4_clr', 'mn4_clrAtom', 'Atom', undefined, 1, 1);
 
             if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined) {
-              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', true, undefined, 2);
-              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', undefined, undefined, 2);
+              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', true, undefined, 1);
+              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', undefined, undefined, 1);
             }
             else if(me.cfg.blast_rep_id !== undefined) {
-              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', undefined, undefined, 2);
-              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', true, undefined, 2);
+              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', undefined, undefined, 1);
+              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', true, undefined, 1);
             }
             else {
-              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', undefined, undefined, 2);
-              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', undefined, undefined, 2);
+              html += this.getRadio('mn4_clr', 'mn4_clrIdentity', 'Identity', undefined, undefined, 1);
+              html += this.getRadio('mn4_clr', 'mn4_clrConserved', 'Conservation', undefined, undefined, 1);
             }
 
             //if(me.cfg.afid) html += this.getRadio('mn4_clr', 'mn4_clrConfidence', 'AF Confidence');
@@ -13733,8 +13724,8 @@ class SetMenu {
                 html += this.getRadio('mn4_clr', 'mn4_clrConfidence', 'pLDDT', undefined, 1, 1);
             //}
 
-            html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
-            html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
+            html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 1);
+            html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 1);
         }
         else {
             //if(!me.cfg.hidelicense) html += this.getRadio('mn4_clr', 'mn1_delphi2', 'DelPhi<br><span style="padding-left:1.5em;">Potential ' + me.htmlCls.licenseStr + '</span>');
@@ -13787,7 +13778,7 @@ class SetMenu {
             html += this.getLink('mn6_selectannotations', 'Seq. & Annotations ' + me.htmlCls.wifiStr, 1, 1);
 
             //if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined) { // || ic.bRealign || ic.bSymd || ic.bInputfile) {
-                html += this.getLink('mn2_alignment', 'Aligned Seq. ' + me.htmlCls.wifiStr, undefined, 1);
+                html += this.getLink('mn2_alignment', 'Aligned Seq. ' + me.htmlCls.wifiStr, 1, 1);
             //}
 
             if(me.cfg.mmdbid !== undefined || me.cfg.gi !== undefined || me.cfg.blast_rep_id !== undefined || me.cfg.align !== undefined || me.cfg.chainalign !== undefined) {
@@ -13857,27 +13848,27 @@ class SetMenu {
         html += "</ul>";
         html += "</li>";
 
-        html += this.getMenuText('mn6_anglewrap', 'Angle', undefined, 1, 1);
+        html += this.getMenuText('mn6_anglewrap', 'Angle', undefined, undefined, 1);
         html += "<ul>";
-        html += this.getRadio('mn6_angle', 'mn6_angleManySets', 'among Many Sets', undefined, 1, 2);
+        html += this.getRadio('mn6_angle', 'mn6_angleManySets', 'among Many Sets', undefined, undefined, 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.getLink('mn6_area', 'Surface Area', undefined, 1);
 
         html += this.getMenuText('mn6_addlabelwrap', 'Label', undefined, 1, 1);
         html += "<ul>";
         html += this.getRadio('mn6_addlabel', 'mn6_addlabelYes', 'by Picking Atoms', undefined, undefined, 2);
         html += this.getRadio('mn6_addlabel', 'mn6_addlabelSelection', 'per Selection', undefined, undefined, 2);
         html += this.getRadio('mn6_addlabel', 'mn6_addlabelAtoms', 'per Atom', undefined, undefined, 2);
-        html += this.getRadio('mn6_addlabel', 'mn6_addlabelElements', 'per Atom Element', undefined, 1, 2);
+        html += this.getRadio('mn6_addlabel', 'mn6_addlabelElements', 'per Atom Element', undefined, undefined, 2);
         if(me.cfg.cid === undefined) {
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelResidues', 'per Residue', undefined, 1, 2);
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelResnum', 'per Residue & Number', undefined, 1, 2);
 
-            html += this.getRadio('mn6_addlabel', 'mn6_addlabelRefnum', 'per Reference Number', undefined, 1, 2);
-            html += this.getRadio('mn6_addlabel', 'mn6_addlabelIg', 'per Ig Domain', undefined, 1, 2);
+            html += this.getRadio('mn6_addlabel', 'mn6_addlabelRefnum', 'per Reference Number', undefined, undefined, 2);
+            html += this.getRadio('mn6_addlabel', 'mn6_addlabelIg', 'per Ig Domain', undefined, undefined, 2);
 
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelChains', 'per Chain', undefined, undefined, 2);
             html += this.getRadio('mn6_addlabel', 'mn6_addlabelTermini', 'N- & C-Termini', undefined, 1, 2);
@@ -13914,10 +13905,10 @@ class SetMenu {
         html += this.getMenuSep();
 
         if(me.cfg.cid === undefined) {
-            html += this.getMenuText('mn6_chemicalbindingwrap', 'Chem. Binding', undefined, undefined, 1);
+            html += this.getMenuText('mn6_chemicalbindingwrap', 'Chem. Binding', undefined, 1, 1);
             html += "<ul>";
-            html += this.getRadio('mn6_chemicalbinding', 'mn6_chemicalbindingshow', 'Show', undefined, undefined, 2);
-            html += this.getRadio('mn6_chemicalbinding', 'mn6_chemicalbindinghide', 'Hide', true, undefined, 2);
+            html += this.getRadio('mn6_chemicalbinding', 'mn6_chemicalbindingshow', 'Show', undefined, 1, 2);
+            html += this.getRadio('mn6_chemicalbinding', 'mn6_chemicalbindinghide', 'Hide', true, 1, 2);
             html += "</ul>";
             html += "</li>";
 
@@ -14076,7 +14067,7 @@ class SetMenu {
 
         //html += liStr + "https://www.ncbi.nlm.nih.gov/structure' target='_blank'>Search Structure " + me.htmlCls.wifiStr + "</a></li>";
         //html += liStr + me.htmlCls.baseUrl + "icn3d/icn3d.html#citing' target='_blank'>Citing iCn3D</a></li>";
-        html += this.getMenuUrl('citing', me.htmlCls.baseUrl + "icn3d/icn3d.html#citing", "Citing iCn3D", undefined, 1);
+        html += this.getMenuUrl('citing', me.htmlCls.baseUrl + "icn3d/icn3d.html#citing", "Citing iCn3D", 1, 1);
 
         html += this.getMenuText('mn6_source', 'Source Code', undefined, 1, 1);
         html += "<ul>";
@@ -16638,6 +16629,13 @@ class Events {
         $("#" + me.pre + id).resizable();
     }
 
+    exportMsa(type) { let me = this.icn3dui, ic = me.icn3d;
+        let text = ic.msa[type].join('\n\n');
+        let fileType = (type == 'fasta') ? '.fasta' : (type == 'clustal') ? '.aln' : '.txt';
+
+        ic.saveFileCls.saveFile(ic.inputid + '_align' + fileType, 'text', [text]);
+    }
+
     async launchMmdb(ids, bBiounit, hostUrl, bAppend) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
         if(!me.cfg.notebook) dialog.dialog( "close" );
         
@@ -19388,6 +19386,24 @@ class Events {
            ic.selectionCls.saveSelection(name, name);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "saveFasta", "click", function(e) { me.icn3d;
+            e.stopImmediatePropagation();
+            thisClass.exportMsa('fasta');
+            thisClass.setLogCmd('Save alignment in FASTA format', false);
+         });
+
+        me.myEventCls.onIds("#" + me.pre + "saveClustal", "click", function(e) { me.icn3d;
+            e.stopImmediatePropagation();
+            thisClass.exportMsa('clustal');
+            thisClass.setLogCmd('Save alignment in CLUSTALW format', false);
+        });
+
+        me.myEventCls.onIds("#" + me.pre + "saveResbyres", "click", function(e) { me.icn3d;
+            e.stopImmediatePropagation();
+            thisClass.exportMsa('resbyres');
+            thisClass.setLogCmd('Save alignment in Residue by Residue format to be used in File > Align (or Realign) > Multiple Chain > Residue by Residue', false);
+        });
+
         $(document).on("click", "." + me.pre + "outputselection", function(e) { let ic = me.icn3d;
               e.stopImmediatePropagation();
             ic.bSelectResidue = false;
@@ -20247,7 +20263,9 @@ class SetHtml {
 
       sequencesHtml += '<div style="width:20px; margin-left:3px; display:inline-block;"><span id="' + me.pre + 'alignseqguide' + suffix + '_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="' + me.pre + 'alignseqguide' + suffix + '_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div> ';
 
-      sequencesHtml += "<div style='min-width:200px; display:inline-block;''><b>Selection:</b> Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignseq_command_name' value='alseq_" + index + "' size='10'> " + me.htmlCls.space2 + "<button style='white-space:nowrap;' id='" + me.pre + "alignseq_saveselection'>Save</button> <button style='white-space:nowrap; margin-left:20px;' id='" + me.pre + "alignseq_clearselection'>Clear</button></div><br/>";
+      sequencesHtml += "<div style='min-width:200px; display:inline-block;'><b>Selection:</b> Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignseq_command_name' value='alseq_" + index + "' size='10'> " + me.htmlCls.space2 + "<button style='white-space:nowrap;' id='" + me.pre + "alignseq_saveselection'>Save</button> <button style='white-space:nowrap; margin-left:20px;' id='" + me.pre + "alignseq_clearselection'>Clear</button></div><br/>";
+
+      sequencesHtml += "<div style='min-width:200px; display:inline-block; margin-top:3px'><b>Save Alignment</b>: " + "<button style='white-space:nowrap;' id='" + me.pre + "saveFasta'>FASTA</button> <button style='white-space:nowrap; margin-left:20px;' id='" + me.pre + "saveClustal'>CLUSTAL</button> <button style='white-space:nowrap; margin-left:20px;' id='" + me.pre + "saveResbyres'>Residue by Residue</button></div><br/>";
 
       sequencesHtml += me.htmlCls.divStr + "alignseqguide" + suffix + "' style='display:none; white-space:normal;' class='icn3d-box'>";
 
@@ -20256,7 +20274,9 @@ class SetHtml {
       let resCategories = "<b>Residue labeling:</b> aligned residue with coordinates: UPPER case letter; non-aligned residue with coordinates: lower case letter which can be highlighted; residue missing coordinates: lower case letter which can NOT be highlighted.";
       let scroll =(me.utilsCls.isMac() && !me.utilsCls.isMobile()) ? "<br/><br/><b>Turn on scroll bar:</b> System preferences -> General -> show scroll bars -> check Always" : "";
 
-      sequencesHtml += resCategories + scroll + "<br/></div>";
+      sequencesHtml += resCategories + scroll + "<br/>";
+
+      sequencesHtml += "</div>";
 
       return sequencesHtml;
     }
@@ -63171,6 +63191,7 @@ class SetSeqAlign {
     setSeqAlign(seqalign, alignedStructures) { let ic = this.icn3d, me = ic.icn3dui;
           let mmdbid1 = alignedStructures[0][0].pdbId;
           let mmdbid2 = alignedStructures[0][1].pdbId;
+          let chainid1, chainid2;
 
           ic.conservedName1 = mmdbid1 + '_cons';
           ic.nonConservedName1 = mmdbid1 + '_ncons';
@@ -63194,7 +63215,7 @@ class SetSeqAlign {
               let molid1 = alignData.moleculeId;
 
               let chain1 = ic.pdbid_molid2chain[mmdbid1 + '_' + molid1];
-              let chainid1 = mmdbid1 + '_' + chain1;
+              chainid1 = mmdbid1 + '_' + chain1;
 
               let id2aligninfo = {};
               let start = alignData.sequence.length, end = -1;
@@ -63226,7 +63247,7 @@ class SetSeqAlign {
               let molid2 = alignData.moleculeId;
 
               let chain2 = ic.pdbid_molid2chain[mmdbid2 + '_' + molid2];
-              let chainid2 = mmdbid2 + '_' + chain2;
+              chainid2 = mmdbid2 + '_' + chain2;
 
               // annotation title for the master seq only
               if(ic.alnChainsAnTtl[chainid1] === undefined ) ic.alnChainsAnTtl[chainid1] = [];
@@ -63394,7 +63415,9 @@ class SetSeqAlign {
                   ic.alnChainsAnno[chainid1][3].push(numberStr); // symbol: 10, 20, etc, empty for rest
 
                   ++alignIndex;
-              } // end for(let j           
+              } // end for(let j
+              
+              this.setMsaFormat([chainid1, chainid2]);
           } // end for(let i
 
           seqalign = {};
@@ -63474,7 +63497,7 @@ class SetSeqAlign {
     }
 
     setSeqAlignChain(chainid, chainIndex, chainidArray) { let ic = this.icn3d, me = ic.icn3dui;
-        let hAtoms = {};
+          let hAtoms = {};
 
           let bRealign = (chainidArray) ? true : false;
           let mmdbid1, mmdbid2, chain1, chain2, chainid1, chainid2, pos1, pos2;
@@ -63695,23 +63718,6 @@ class SetSeqAlign {
                   ///if(ic.chainsSeq[chainid1] === undefined || ic.chainsSeq[chainid2] === undefined) break;
 
                   let resi1, resi2, resn1, resn2;
-/*                 
-                  if(bRealign) { // tmalign: just one residue in this for loop
-                    if(me.cfg.aligntool == 'tmalign') {
-                        resi1 = ic.qt_start_end[chainIndex][i].t_start;
-                        resi2 = ic.qt_start_end[chainIndex][i].q_start;
-                    }
-                    else {
-                        resi1 = j + start1;
-                        resi2 = j + start2;
-                    }
-
-                    resn1 = this.getResnFromResi(chainid1, resi1).toUpperCase();
-                    resn2 = this.getResnFromResi(chainid2, resi2).toUpperCase();
-
-                    if(resn1 == '?' || resn2 == '?') continue;
-                  }
-*/
                   if(bRealign && me.cfg.aligntool == 'tmalign') { // tmalign: just one residue in this for loop
                     resi1 = ic.qt_start_end[chainIndex][i].t_start;
                     resi2 = ic.qt_start_end[chainIndex][i].q_start;
@@ -63722,15 +63728,6 @@ class SetSeqAlign {
                     if(resn1 == '?' || resn2 == '?') continue;
                   }
                   else {
-                    ///if(ic.chainsSeq[chainid1][j + start1] === undefined || ic.chainsSeq[chainid2][j + start2] === undefined) continue;
-
-                    // resi1 = ic.chainsSeq[chainid1][j + start1].resi;
-                    // resi2 = ic.chainsSeq[chainid2][j + start2].resi;
-                    // resn1 = ic.chainsSeq[chainid1][j + start1].name.toUpperCase();
-                    // resn2 = ic.chainsSeq[chainid2][j + start2].name.toUpperCase();
-
-                    // resi1 =  this.getResiAferAlign(chainid1, bRealign, j + start1 + 1);
-                    // resi2 =  this.getResiAferAlign(chainid2, bRealign, j + start2 + 1);
                     resi1 =  this.getResiAferAlign(chainid1, bRealign, j + start1);
                     resi2 =  this.getResiAferAlign(chainid2, bRealign, j + start2);
                     resn1 = this.getResnFromResi(chainid1, resi1).toUpperCase();
@@ -63770,14 +63767,15 @@ class SetSeqAlign {
 
               prevIndex1 = end1;
               prevIndex2 = end2;
-          } // end for(let i
+          } // end for(let i 
+
+          this.setMsaFormat([chainid1, chainid2]);
 
           return hAtoms;
     }
 
     setSeqAlignChainForAll(chainidArray, index_alignLen, bRealign) { let ic = this.icn3d, me = ic.icn3dui;
         let hAtoms = {};
-
         let chainid1 = chainidArray[0];
 
         ic.alnChainsAnno[chainid1] = [];
@@ -63931,7 +63929,8 @@ class SetSeqAlign {
             resObject.aligned = (resid2range_t[resid]) ? true : false;
             resObject.color = (resid2range_t[resid]) ? '#FF0000' : me.htmlCls.GREYC; // color by identity
             resObject.color2 = (resid2range_t[resid]) ? '#FF0000' : me.htmlCls.GREYC; // color by conservation
-            resObject.class = (resid2range_t[resid]) ? 'icn3d-align' : 'icn3d-nalign';
+            // resObject.class = (resid2range_t[resid]) ? 'icn3d-align' : 'icn3d-nalign';
+            resObject.class = (resid2range_t[resid]) ? 'icn3d-cons' : 'icn3d-nalign';
     
             ic.alnChainsSeq[chainid1].push(resObject);
 
@@ -63950,7 +63949,9 @@ class SetSeqAlign {
             let hAtomsTmp = this.mergeTwoSeqForAll(chainidArray, index, alignedChainIndice, resid2range_t, start_t, end_t, bRealign);
 
             hAtoms = me.hashUtilsCls.unionHash(hAtoms, hAtomsTmp);
-        }      
+        }   
+
+        this.setMsaFormat(chainidArray);
           
         // 3. assign the variable ic.alnChainsAnno
         for(let i = 0; i < 3 + 2*n; ++i) {
@@ -64021,7 +64022,7 @@ class SetSeqAlign {
         resObject.aligned = (bGap) ? false : bAligned;
         resObject.color = (bGap || !bAligned) ? me.htmlCls.GREYC : ((resn == resn_t) ? "#FF0000" : "#0000FF"); // color by identity
         resObject.color2 = (bGap || !bAligned) ? me.htmlCls.GREYC : '#' + ic.showAnnoCls.getColorhexFromBlosum62(resn, resn_t); // color by conservation
-        resObject.class = (bGap || !bAligned) ? 'icn3d-nalign' : 'icn3d-align';
+        resObject.class = (bGap || !bAligned) ? 'icn3d-nalign' :  ((resn == resn_t) ? "icn3d-cons" : "icn3d-ncons");
 
         return resObject;
     }
@@ -64295,7 +64296,7 @@ class SetSeqAlign {
         pos2 = result.pos2;
         for(let i = pos1; i < pos2; ++i) {
         //for(let i = pos1; i <= pos2; ++i) {
-            ic.alnChainsSeq[chainid2].push(gapResObject2);           
+            ic.alnChainsSeq[chainid2].push(gapResObject2);      
         }     
 
         return hAtoms;
@@ -64622,6 +64623,107 @@ class SetSeqAlign {
             }
         }
     }   
+
+    setMsaFormat(chainidArray) { let ic = this.icn3d; ic.icn3dui;
+        //set MSA
+        let fastaFormat = '', clustalFormat = 'CLUSTALW\n\n', resbyresFormat = '';
+        let chainArrayClustal = [];
+        
+        let consArray = [], resiArrayTemplate = [];
+        let chainidTemplate = chainidArray[0];
+        for(let i = 0, il = chainidArray.length; i < il; ++i) { 
+            let chainid = chainidArray[i];
+            fastaFormat += '>' + chainid + '\n';
+
+            let clustalArray = [];
+            let clustalLine = chainid.padEnd(20, ' ');
+            let consLine = ''.padEnd(20, ' ');
+
+            let resiArrayTarget = [], resiArrayQuery = [];
+
+            let cnt = 0;
+            for(let j = 0, jl = ic.alnChainsSeq[chainid].length; j < jl; ++j) {
+                let resn = ic.alnChainsSeq[chainid][j].resn;
+                fastaFormat += resn;
+                clustalLine += resn;
+                if(i == il - 1) {
+                    let alignedClass = ic.alnChainsSeq[chainid][j].class;
+                    if(alignedClass == 'icn3d-cons') {
+                        consLine += '*';
+                    }
+                    else if(alignedClass == 'icn3d-ncons') {
+                        consLine += '.';
+                    }
+                    else {
+                        consLine += ' ';
+                    }
+                }
+
+                // residue by residue 
+                if(i == 0) {
+                    resiArrayTemplate.push(ic.alnChainsSeq[chainid][j].resi);
+                }
+                else {
+                    if(ic.alnChainsSeq[chainid][j].aligned) {
+                        resiArrayTarget.push(ic.alnChainsSeq[chainidTemplate][j].resi);
+                        resiArrayQuery.push(ic.alnChainsSeq[chainid][j].resi);
+                    }
+                }
+
+                ++cnt;
+
+                if(cnt % 60 == 0) {
+                    fastaFormat += '\n';
+                    clustalLine += ' ' + String(parseInt(cnt / 60) * 60);
+                    clustalArray.push(clustalLine);
+                    clustalLine = chainid.padEnd(20, ' ');
+
+                    if(i == il - 1) {
+                        consArray.push(consLine);
+                        consLine = ''.padEnd(20, ' ');
+                    }
+                }
+            }
+
+            // add last line
+            if(cnt % 60 != 0) {
+                clustalArray.push(clustalLine);
+                if(i == il - 1) {
+                    consArray.push(consLine);
+                }
+            }
+
+            fastaFormat += '\n';
+
+            chainArrayClustal.push(clustalArray);
+            if(i == il - 1) chainArrayClustal.push(consArray);
+
+            // residue by residue
+            let resiRangeStr1 = ic.resid2specCls.resi2range(resiArrayTarget, true);
+            let resiRangeStr2 = ic.resid2specCls.resi2range(resiArrayQuery, true);
+
+            if(i > 0) resbyresFormat += resiRangeStr1 + ' | ' + resiRangeStr2 + '\n';
+        }
+
+        // CLUSTALW
+        for(let j = 0, jl = chainArrayClustal[0].length; j < jl; ++j) {
+            for(let i = 0, il = chainArrayClustal.length; i < il; ++i) {
+                clustalFormat += chainArrayClustal[i][j] + '\n';
+            }
+            clustalFormat += '\n';
+        }
+        
+        // seq MSA
+        if(!ic.msa) ic.msa = {};
+
+        if(!ic.msa['fasta']) ic.msa['fasta'] = [];
+        if(!ic.msa['clustal']) ic.msa['clustal'] = [];
+        if(!ic.msa['resbyres']) ic.msa['resbyres'] = [];
+
+        ic.msa['fasta'].push(fastaFormat);
+        ic.msa['clustal'].push(clustalFormat);
+        ic.msa['resbyres'].push(resbyresFormat);
+    }
 }
 
 /**
@@ -72246,8 +72348,8 @@ class Resid2spec {
          return spec;
     }
 
-    resi2range(resiArray) {var ic = this.icn3d; ic.icn3dui;
-        let range = [];
+    resi2range(resiArray, bString) {var ic = this.icn3d; ic.icn3dui;
+        let range = [], rangeStr = '';
     
         let resiArraySorted = resiArray.sort(function(a, b) {
            return parseInt(a) - parseInt(b);
@@ -72258,9 +72360,14 @@ class Resid2spec {
         for(let j = 0, jl = resiArraySorted.length; j < jl; ++j) {
             resi = resiArraySorted[j];
     
-            if(j != 0 && resi != prevResi + 1) {
+            if(j != 0 && parseInt(resi) != parseInt(prevResi) + 1) {
                 range.push(startResi);
                 range.push(prevResi);
+
+                if(rangeStr) rangeStr += ',';
+                if(startResi == prevResi) rangeStr += startResi;
+                else rangeStr += startResi + '-' + prevResi;
+
                 startResi = resi;
             }
     
@@ -72270,8 +72377,13 @@ class Resid2spec {
         // last residue
         range.push(startResi);
         range.push(prevResi);
-    
-        return range;
+
+        if(rangeStr) rangeStr += ',';
+        if(startResi == prevResi) rangeStr += startResi;
+        else rangeStr += startResi + '-' + prevResi;
+
+        if(bString) return rangeStr;
+        else return range;
     }
 
     atoms2spec(atomHash) {var ic = this.icn3d; ic.icn3dui;
@@ -83866,7 +83978,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.40.5';
+    this.REVISION = '3.41.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;