icn3d 3.27.0 → 3.28.0

package/icn3d.module.js

@@ -9735,9 +9735,9 @@ class SetMenu {
 
         html += this.getMenuText('mn2_rotate90', 'Rotate 90°', undefined, undefined, 2);
         html += "<ul>";
-        html += this.getRadio('mn6_rotate90', 'mn6_rotatex', 'X-axis(Shift + Key M)', undefined, undefined, 2);
-        html += this.getRadio('mn6_rotate90', 'mn6_rotatey', 'Y-axis(Shift + Key J)', undefined, undefined, 2);
-        html += this.getRadio('mn6_rotate90', 'mn6_rotatez', 'Z-axis', undefined, undefined, 2);
+        html += this.getRadio('mn6_rotate90', 'mn6_rotatex', 'rotate x', undefined, undefined, 2);
+        html += this.getRadio('mn6_rotate90', 'mn6_rotatey', 'rotate y', undefined, undefined, 2);
+        html += this.getRadio('mn6_rotate90', 'mn6_rotatez', 'rotate z', undefined, undefined, 2);
         html += "</ul>";
         html += "</li>";
         html += this.getMenuText('mn2_rotateauto', 'Auto Rotation', undefined, 1, 2);
@@ -12468,9 +12468,10 @@ class SetDialog {
 
         html += me.htmlCls.divStr + "dl_addtrack_tabs' style='border:0px;'>";
         html += "<ul>";
+        html += "<li><a href='#" + me.pre + "tracktab2c'>Isoforms & Exons</a></li>";
+        html += "<li><a href='#" + me.pre + "tracktab2b'>MSA</a></li>";
         html += "<li><a href='#" + me.pre + "tracktab1'>NCBI gi/Accession</a></li>";
         html += "<li><a href='#" + me.pre + "tracktab2'>FASTA</a></li>";
-        html += "<li><a href='#" + me.pre + "tracktab2b'>FASTA Alignment</a></li>";
         html += "<li><a href='#" + me.pre + "tracktab3'>BED File</a></li>";
         html += "<li><a href='#" + me.pre + "tracktab4'>Custom</a></li>";
         html += "<li><a href='#" + me.pre + "tracktab5'>Current Selection</a></li>";
@@ -12486,10 +12487,16 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "tracktab2b'>";
-        html += "<div style='width:600px'>The full protein sequences with gaps are listed one by one. The sequence of the structure is listed at the top. If there are non-gap residues(e.g., from RefSeq) outside of the sequence of the structure, please remove them. Each sequence has a title line starting with \">\".</div><br>";
-        html += "<b>FASTA alignment sequences</b>:<br>";
+        // html += "<div style='width:600px'>The full protein sequences with gaps are listed one by one. The sequence of the structure is listed at the top. If there are non-gap residues(e.g., from RefSeq) outside of the sequence of the structure, please remove them. Each sequence has a title line starting with \">\".</div><br>";
+        html += "<div style='width:600px'>Note: The full protein sequences with gaps in MSA are listed one by one. The sequence of the structure is listed at the top. Each sequence has a title line starting with \">\".</div><br>";
+
+        html += "<b>Precalculated Multiple Sequence Alignment (MSA)</b>:<br>";
         html += "<textarea id='" + me.pre + "track_fastaalign' rows='5' style='width: 100%; height: " +(2*me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
-        html += "Position of the first residue in Sequences & Annotations window: " + me.htmlCls.inputTextStr + "id='" + me.pre + "fasta_startpos' value='1' size=2> <br><br>";
+
+        // html += "<b>Opion 1. Precalculated Multiple Sequence Alignment (MSA)</b>:<br>";
+        // html += "<textarea id='" + me.pre + "track_fastaalign' rows='5' style='width: 100%; height: " +(2*me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
+        // html += "<b>Opion 2. NCBI Protein Accessions</b>: "+ me.htmlCls.inputTextStr + "id='" + me.pre + "track_acclist' size=60> <br><br>";
+        html += "<b>Position of the first residue in Sequences & Annotations window</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "fasta_startpos' value='1' size=2> <br><br>";
 
         html += "Color Sequence by: <select id='" + me.pre + "colorseqby'>";
         html += me.htmlCls.optionStr + "'identity' selected>Identity</option>";
@@ -12499,6 +12506,22 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "addtrack_button2b'>Add Track(s)</button>";
         html += "</div>";
 
+        html += me.htmlCls.divStr + "tracktab2c'>";
+        html += "<div style='width:500px'>Note: Show exons for all isoforms of the protein in the same gene as specified below.</div><br>";
+
+        html += "<b><a href='https://www.ncbi.nlm.nih.gov/gene' target='_blank'>NCBI Gene</a> ID</b>: "+ me.htmlCls.inputTextStr + "id='" + me.pre + "track_geneid' size=20>" + me.htmlCls.space3 + me.htmlCls.buttonStr + "exons_table'>Exons & Introns in Gene Table</button><br><br>";
+
+        html += "<b>Position of the first residue in Sequences & Annotations window</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "fasta_startpos2' value='1' size=2> <br><br>";
+
+        html += "Color Sequence by: <select id='" + me.pre + "colorseqby2'>";
+        html += me.htmlCls.optionStr + "'identity' selected>Identity</option>";
+        html += me.htmlCls.optionStr + "'conservation'>Conservation</option>";
+        html += "</select> <br><br>";
+
+        html += me.htmlCls.buttonStr + "addtrack_button2c'>Show Isoforms & Exons</button>";
+        html += "</div>";
+
+
         html += me.htmlCls.divStr + "tracktab3'>";
         html += "BED file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "track_bed' size=16> <br><br>";
         html += me.htmlCls.buttonStr + "addtrack_button3'>Add Track</button>";
@@ -13820,6 +13843,8 @@ class Events {
 
             let esmData = await me.getAjaxPostPromise(esmUrl, esmfold_fasta, true, alertMess, undefined, true, 'text');
             
+            ic.bResetAnno = true;
+            
             ic.bInputfile = true;
             ic.InputfileType = 'pdb';
             ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + esmData : esmData;
@@ -15228,13 +15253,15 @@ class Events {
         });
 
 
-        $(document).on("click", ".icn3d-addtrack", function(e) { me.icn3d;
+        $(document).on("click", ".icn3d-addtrack", function(e) { let ic = me.icn3d;
           e.stopImmediatePropagation();
           $("#" + me.pre + "anno_custom")[0].checked = true;
           $("[id^=" + me.pre + "custom]").show();
           //e.preventDefault();
           let chainid = $(this).attr('chainid');
+          let geneid = ic.chainsGene[chainid].geneId;
           $("#" + me.pre + "track_chainid").val(chainid);
+          $("#" + me.pre + "track_geneid").val(geneid);
           me.htmlCls.dialogCls.openDlg('dl_addtrack', 'Add track for Chain: ' + chainid);
           $( "#" + me.pre + "track_gi" ).focus();
         });
@@ -15474,7 +15501,7 @@ class AlignSeq {
         let bHighlightChain;
         let index = 0, prevResCnt2nd = 0;
         let firstChainid, oriChainid;
-console.log("alignChainArray.length: " + alignChainArray.length);
+
         //  for(let i in ic.alnChains) {
         for (let m = 0, ml = alignChainArray.length; m < ml; ++m) {
             let i = alignChainArray[m];
@@ -33190,6 +33217,8 @@ class Alternate {
     // change the display atom when alternating
     //Show structures one by one.
     alternateStructures() { let ic = this.icn3d, me = ic.icn3dui;
+        ic.bAlernate = true;
+
         //ic.transformCls.zoominSelection();
         
         // default ic.ALTERNATE_STRUCTURE = -1
@@ -33304,11 +33333,11 @@ class Alternate {
 
         //ic.glycanCls.showGlycans();
 
+        ic.opts['rotationcenter'] = 'highlight center';
+        
         ic.drawCls.draw();
 
         ic.bShowHighlight = true;
-        //ic.opts['rotationcenter'] = 'molecule center';
-        ic.opts['rotationcenter'] = 'highlight center';
     }
 
     alternateWrapper() { let ic = this.icn3d; ic.icn3dui;
@@ -36934,6 +36963,10 @@ class AnnoCddSite {
                     let prevEmptyWidth = 0;
                     let prevLineWidth = 0;
                     let widthPerRes = 1;
+
+                    if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+                    if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
                     for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
                         html += ic.showSeqCls.insertGap(chnid, i, '-');
                         if(resPosArray.indexOf(i) != -1) {
@@ -36966,6 +36999,9 @@ class AnnoCddSite {
                             html += '<span>-</span>'; //'<span>-</span>';
                         }
                     }
+
+                    if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
                     htmlTmp = '<span class="icn3d-residueNum" title="residue count">&nbsp;' + resCnt.toString() + ' Residues</span>';
                     htmlTmp += '</span>';
                     htmlTmp += '<br>';
@@ -37123,6 +37159,9 @@ class AnnoCddSite {
                 html2 += '<div style="width:' + titleSpace + 'px!important;" class="icn3d-seqTitle ' + linkStr + '" ' + type + '="' + acc + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
                 html2 += htmlTmp3 + htmlTmp;
                 let pre = type + index.toString();
+
+                if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
                 for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
                   html += ic.showSeqCls.insertGap(chnid, i, '-');
 
@@ -37150,9 +37189,15 @@ class AnnoCddSite {
                       html += '<span>-</span>'; //'<span>-</span>';
                   }
                 }
+
+                if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
                 let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.chains[chnid]);
                 let colorStr =(atom.color === undefined || atom.color.getHexString() === 'FFFFFF') ? 'DDDDDD' : atom.color.getHexString();
                 let color =(atom.color !== undefined) ? colorStr : "CCCCCC";
+
+                if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+
                 if(me.cfg.blast_rep_id != chnid) { // regular
                     for(let i = 0, il = fromArray.length; i < il; ++i) {
                         let emptyWidth =(i == 0) ? Math.round(ic.seqAnnWidth *(fromArray[i] - ic.baseResi[chnid] - 1) / ic.maxAnnoLength) : Math.round(ic.seqAnnWidth *(fromArray[i] - toArray[i-1] - 1) / ic.maxAnnoLength);
@@ -37229,6 +37274,10 @@ class AnnoCddSite {
         let prevEmptyWidth = 0;
         let prevLineWidth = 0;
         let widthPerRes = 1;
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
         for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
           html += ic.showSeqCls.insertGap(chnid, i, '-');
           let resi = ic.ParserUtilsCls.getResi(chnid, i);
@@ -37304,6 +37353,9 @@ class AnnoCddSite {
             html += '<span>-</span>'; //'<span>-</span>';
           }
         }
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
         htmlTmp = '<span class="icn3d-residueNum" title="residue count">&nbsp;' + resCnt.toString() + ' Residues</span>';
         htmlTmp += '</span>';
         htmlTmp += '<br>';
@@ -37468,6 +37520,9 @@ class AnnoContact {
             let prevLineWidth = 0;
             let widthPerRes = 1;
 
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
             for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
               html += ic.showSeqCls.insertGap(chnid, i, '-');
               let resi = ic.ParserUtilsCls.getResi(chnid, i);           
@@ -37503,6 +37558,9 @@ class AnnoContact {
                 html += '<span>-</span>'; //'<span>-</span>';
               }
             }
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
             htmlTmp = '<span class="icn3d-residueNum" title="residue count">&nbsp;' + resCnt.toString() + ' Residues</span>';
             htmlTmp += '</span>';
             htmlTmp += '<br>';
@@ -37755,6 +37813,10 @@ class AnnoPTM {
             let prevEmptyWidth = 0;
             let prevLineWidth = 0;
             let widthPerRes = 1;
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
             for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
                 html += ic.showSeqCls.insertGap(chnid, i, '-');
                 if(resPosArray.indexOf(i) != -1) {
@@ -37787,6 +37849,9 @@ class AnnoPTM {
                     html += '<span>-</span>'; //'<span>-</span>';
                 }
             }
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
             htmlTmp = '<span class="icn3d-residueNum" title="residue count">&nbsp;' + resCnt.toString() + ' Residues</span>';
             htmlTmp += '</span>';
             htmlTmp += '<br>';
@@ -38066,6 +38131,9 @@ class AnnoDomain {
             html += htmlTmp2 + htmlTmp3 + htmlTmp;
             html2 += htmlTmp2 + htmlTmp3 + htmlTmp;
             let pre = 'domain3d' + index.toString();
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
             for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
               html += ic.showSeqCls.insertGap(chnid, i, '-');
               //if(i >= domainFrom && i <= domainTo) {
@@ -38085,9 +38153,15 @@ class AnnoDomain {
                 html += '<span>-</span>'; //'<span>-</span>';
               }
             }
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
             let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.chains[chnid]);
             let colorStr =(atom.color === undefined || atom.color.getHexString() === 'FFFFFF') ? 'DDDDDD' : atom.color.getHexString();
             let color =(atom.color !== undefined) ? colorStr : "CCCCCC";
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+
             if(me.cfg.blast_rep_id != chnid) { // regular
                 for(let i = 0, il = fromArray.length; i < il; ++i) {
                     let emptyWidth =(i == 0) ? Math.round(ic.seqAnnWidth *(fromArray[i] - ic.baseResi[chnid] - 1) / ic.maxAnnoLength) : Math.round(ic.seqAnnWidth *(fromArray[i] - toArray[i-1] - 1) / ic.maxAnnoLength);
@@ -38355,9 +38429,18 @@ class AnnoSnpClinVar {
         let prevEmptyWidth = 0;
         let prevLineWidth = 0;
         let widthPerRes = 1;
+
+        if(bOverview) {
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+        }
+        else {
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+        }
+
         for(let i = 1, il = ic.giSeq[chnid].length; i <= il; ++i) {
             if(bOverview) {
                 if(resi2index[i] !== undefined) {
+                    
                     // get the mouse over text
                     let cFull = ic.giSeq[chnid][i-1];
                     let c = cFull;
@@ -38382,7 +38465,8 @@ class AnnoSnpClinVar {
                         }
                     }
                     html += ic.showSeqCls.insertGapOverview(chnid, i-1);
-                    let emptyWidth =(me.cfg.blast_rep_id == chnid) ? Math.round(ic.seqAnnWidth *(i-1) /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth) : Math.round(ic.seqAnnWidth *(i-1) / ic.maxAnnoLength - prevEmptyWidth - prevLineWidth);
+                    let emptyWidth = Math.round(ic.seqAnnWidth *(i-1) /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth);
+                    //let emptyWidth =(me.cfg.blast_rep_id == chnid) ? Math.round(ic.seqAnnWidth *(i-1) /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth) : Math.round(ic.seqAnnWidth *(i-1) / ic.maxAnnoLength - prevEmptyWidth - prevLineWidth);
                     //if(emptyWidth < 0) emptyWidth = 0;
                     if(bClinvar) {
                         if(snpTypeHash[i] == 'icn3d-clinvar' || snpTypeHash[i] == 'icn3d-clinvar-path') {
@@ -38611,6 +38695,10 @@ class AnnoSnpClinVar {
               }
             } // if(bOverview) {
         } // for
+
+        if(!bOverview) {
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+        }
         
         //var end = bStartEndRes ? ic.chainsSeq[chnid][ic.giSeq[chnid].length - 1 - ic.matchedPos[chnid] ].resi : '';
         if(line == 1) {
@@ -40224,7 +40312,7 @@ class AddTrack {
            thisClass.alignSequenceToStructure(chainid, data, title);
         });
 
-        // FASTA Alignment
+        // MSA 
         me.myEventCls.onIds("#" + ic.pre + "addtrack_button2b", "click", async function(e) { let ic = thisClass.icn3d;
            e.stopImmediatePropagation();
            //e.preventDefault();
@@ -40232,159 +40320,47 @@ class AddTrack {
 
            let chainid = $("#" + ic.pre + "track_chainid").val();
            let startpos = $("#" + ic.pre + "fasta_startpos").val();
+           if(!startpos) startpos = 1;
+
            let colorseqby = $("#" + ic.pre + "colorseqby").val();
            let type =(colorseqby == 'identity') ? 'identity' : 'custom';
 
            let fastaList = $("#" + ic.pre + "track_fastaalign").val();
-           let fastaArray = fastaList.split('>');
-
-           // the first array item is empty
-           // the second array item is the sequence of the structure, start with i = 2
-           let posFirst = fastaArray[1].indexOf('\n');
-           fastaArray[1].substr(0, posFirst);
-           let seqFirst = fastaArray[1].substr(posFirst + 1).replace(/\n/g, '');
-
-           let trackTitleArray = [];
-           let trackSeqArray = [];
-           for(let i = 2, il = fastaArray.length; i < il; ++i) {
-               let pos = fastaArray[i].indexOf('\n');
-               let title = fastaArray[i].substr(0, pos);
-               trackTitleArray.push(title);
-               let seq = fastaArray[i].substr(pos + 1).replace(/\n/g, '');
-               trackSeqArray.push(seq);
-           }
-
-           let startposGiSeq = undefined;
-           for(let i = 0, il = ic.giSeq[chainid].length; i < il; ++i) {
-               //let pos =(i >= ic.matchedPos[chainid] && i - ic.matchedPos[chainid] < ic.chainsSeq[chainid].length) ? ic.chainsSeq[chainid][i - ic.matchedPos[chainid]].resi : ic.baseResi[chainid] + 1 + i;
-               let pos = ic.ParserUtilsCls.getResi(chainid, i);
-
-               if(pos != startpos) {
-                   continue;
-               }
-               else {
-                   startposGiSeq = i;
-               }
-           }
-
-           if(startposGiSeq === undefined) alert("Please double check the start position before clicking \"Add Track\"");
-
-
-           // set up gap for the master seq
-           // don't count gaps in both ends
-           ic.targetGapHash = {};
-           let prevSeq = '-', prevPos = 0, from, to, cnt = 0, dashCnt = 0;
-           let bFound = false, seqStart = 0, seqEnd = 0;
-           for(let i = 0, il = seqFirst.length; i < il; ++i) {
-              if(seqFirst[i] == '-' && seqFirst[i] != prevSeq) { // start of gap
-                  from = cnt;
-                  dashCnt = 0;
-              }
-
-              if(prevSeq == '-' && seqFirst[i] != prevSeq && cnt > 0) { // end of gap
-                  to = prevPos;
-                  ic.targetGapHash[from + startposGiSeq] = {'from': from + startposGiSeq, 'to': to + dashCnt - 1 + startposGiSeq};
-              }
-
-              prevSeq = seqFirst[i];
-              prevPos = cnt;
-
-              if(seqFirst[i] != '-') {
-                  ++cnt;
-                  seqEnd = i;
-
-                  if(!bFound) {
-                      seqStart = i;
-                      bFound = true;
-                  }
-              }
-              else {
-                  ++dashCnt;
-              }
-           }
-
-           await ic.annotationCls.resetAnnoAll();
-
-           let targetGapHashStr = '';
-           let cntTmp = 0;
-           for(let i in ic.targetGapHash) {
-               if(cntTmp > 0) targetGapHashStr += ' ';
-               targetGapHashStr += i + '_' + ic.targetGapHash[i].from + '_' + ic.targetGapHash[i].to;
-               ++cntTmp;
-           }
-
-           me.htmlCls.clickMenuCls.setLogCmd("msa | " + targetGapHashStr, true);
-
-           // add tracks
-           let resi2cntSameRes = {}; // count of same residue at each position
-           for(let j = 0, jl = trackSeqArray.length; j < jl; ++j) {
-               let resi = startpos; //startposGiSeq + 1;
-               let text = '';
-               for(let k = 0; k < startposGiSeq; ++k) {
-                   if(ic.targetGapHash.hasOwnProperty(k)) {
-                       for(let m = 0; m < ic.targetGapHash[k].to - ic.targetGapHash[k].from + 1; ++m) {
-                           text += '-';
-                       }
-                   }
-
-                   text += '-';
-               }
-
-               for(let k = seqStart; k <= seqEnd; ++k) {
-                  //if(seqFirst[k] == '-') continue;
-
-                  if(j == 0) resi2cntSameRes[resi] = 0;
-
-                  text += trackSeqArray[j][k]; //ic.giSeq[chainid][i];
-
-                  if(seqFirst[k] != '-') {
-                      if(seqFirst[k] == trackSeqArray[j][k]) ++resi2cntSameRes[resi];
-                      ++resi;
-                  }
-               }
-
-               let title =(trackTitleArray[j].length < 20) ? trackTitleArray[j] : trackTitleArray[j].substr(0, 20) + '...';
-               let bMsa = true;
-               thisClass.showNewTrack(chainid, title, text, undefined, undefined, type, undefined, bMsa);
-
-               me.htmlCls.clickMenuCls.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + thisClass.simplifyText(text)
-                + " | type " + type + " | color 0 | msa 1", true);
-           }
-
-           // set colot for the master seq
-           if(trackSeqArray.length > 0) {
-                if(ic.queryresi2score === undefined) ic.queryresi2score = {};
-                if(ic.queryresi2score[chainid] === undefined) ic.queryresi2score[chainid] = {};
 
-                let nSeq = trackSeqArray.length;
-                for(let resi in resi2cntSameRes) {
-                    let score = parseInt(resi2cntSameRes[resi] / nSeq * 100);
-                    ic.queryresi2score[chainid][resi] = score;
-                }
+           if(fastaList) {
+                await thisClass.addMsaTracks(chainid, startpos, type, fastaList);
+            }
+        });
 
-                let resiArray = Object.keys(resi2cntSameRes);
-                let start = Math.min.apply(null, resiArray);
-                let end = Math.max.apply(null, resiArray);
+        // Gene table
+        me.myEventCls.onIds("#" + ic.pre + "exons_table", "click", async function(e) { let ic = thisClass.icn3d;
+            e.stopImmediatePropagation();
+            //dialog.dialog( "close" );
 
-                let resiScoreStr = '';
-                for(let resi = start; resi <= end; ++resi) {
-                    if(resi2cntSameRes.hasOwnProperty(resi)) {
-                        resiScoreStr += Math.round(resi2cntSameRes[resi] / nSeq * 9); // max 9
-                    }
-                    else {
-                        resiScoreStr += '_';
-                    }
-                }
+            let geneid = $("#" + ic.pre + "track_geneid").val().trim();
+            window.open('https://www.ncbi.nlm.nih.gov/gene/' + geneid + '?report=gene_table', '_blank');
+        });
 
-                ic.opts['color'] = 'align custom';
-                ic.setColorCls.setColorByOptions(ic.opts, ic.hAtoms);
+        // Isoform Alignment
+        me.myEventCls.onIds("#" + ic.pre + "addtrack_button2c", "click", async function(e) { let ic = thisClass.icn3d;
+            e.stopImmediatePropagation();
+            //e.preventDefault();
+            dialog.dialog( "close" );
 
-                ic.hlUpdateCls.updateHlAll();
+            let chainid = $("#" + ic.pre + "track_chainid").val();    
+            let geneid = $("#" + ic.pre + "track_geneid").val();
+            if(!geneid) {
+                alert("Please fill in the Gene ID...");
+                return;
+            }
 
-                ic.drawCls.draw();
+            let startpos = $("#" + ic.pre + "fasta_startpos2").val();
+            if(!startpos) startpos = 1;
 
-                me.htmlCls.clickMenuCls.setLogCmd('color align custom | ' + chainid + ' | range ' + start + '_' + end + ' | ' + resiScoreStr, true);
-           }
+            let colorseqby = $("#" + ic.pre + "colorseqby2").val();
+            let type =(colorseqby == 'identity') ? 'identity' : 'custom';
+    
+            await thisClass.addExonTracks(chainid, geneid, startpos, type);
         });
 
         // BED file
@@ -40570,7 +40546,7 @@ class AddTrack {
 
     }
 
-    showNewTrack(chnid, title, text, cssColorArray, inTarget2queryHash, type, color, bMsa, fromArray, toArray) {  let ic = this.icn3d, me = ic.icn3dui;
+    showNewTrack(chnid, title, text, cssColorArray, inTarget2queryHash, type, color, bMsa, fromArray, toArray, seqStartLen, exonArray) {  let ic = this.icn3d, me = ic.icn3dui;
         //if(ic.customTracks[chnid] === undefined) {
         //    ic.customTracks[chnid] = {}
         //}
@@ -40619,22 +40595,28 @@ class AddTrack {
         $("#" + ic.pre + "tt_custom_" + chnid + "_" + simpTitle).width(divLength);
 
         let html = '<div id="' + ic.pre + 'giseq_sequence" class="icn3d-dl_sequence">';
+        let htmlExon = html;
         let html2 = html;
         let html3 = html;
+        let html3Exon = html;
 
         //var htmlTmp2 = '<div class="icn3d-seqTitle icn3d-link icn3d-blue" gi="' + chnid + '" anno="sequence" chain="' + chnid + '"><span style="white-space:nowrap;">' + title + '</span></div>';
         //var htmlTmp2 = '<div class="icn3d-seqTitle" gi="' + chnid + '" anno="sequence" chain="' + chnid + '"><span style="white-space:nowrap;">' + title + '</span></div>';
         let index = parseInt(Math.random()*10);
         let htmlTmp2 = '<div class="icn3d-seqTitle icn3d-link icn3d-blue" custom="' +(index+1).toString() + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + simpTitle + '" index="' + index + '" setname="' + chnid + '_custom_' +(index+1).toString() + '" anno="sequence" chain="' + chnid + '" title="' + title + '">' + simpTitle + ' </div>';
+        let htmlTmp2Exon = '<div class="icn3d-seqTitle" chain="' + chnid + '" title="Exons of ' + title + '">Exons </div>';
+
         let htmlTmp3 = '<span class="icn3d-residueNum" title="residue count">' + resCnt.toString() + ' Pos</span>';
 
         html3 += htmlTmp2 + htmlTmp3 + '<br>';
+        html3Exon += htmlTmp2Exon + htmlTmp3 + '<br>';
 
         let htmlTmp = '<span class="icn3d-seqLine">';
 
         html += htmlTmp2 + htmlTmp3 + htmlTmp;
+        htmlExon += htmlTmp2Exon + htmlTmp3 + htmlTmp;
         html2 += htmlTmp2 + htmlTmp3 + htmlTmp;
-
+        
         //var pre ='cst' + ic.customTracks[chnid].length;
         let posTmp = chnid.indexOf('_');
         //var pre ='cst' + chnid.substr(posTmp);
@@ -40649,10 +40631,34 @@ class AddTrack {
         let bIdentityColor =(type === 'identity') && text.indexOf('cannot-be-aligned') == -1 && text.indexOf('cannot be aligned') == -1 ? true : false;
 
         let parsedResn = {};
-        let gapCnt = 0, currResi = 1;
+        let gapCnt = 0;
         htmlTmp2 = '';
+
+        // if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += ic.showSeqCls.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+        // if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqStartLen[chnid], '-');
+
+        let pos2exonColor = {}, pos2genome = {}, pos2exonIndex = {};
+        let cnt = 0;
+        if(exonArray) {
+            for(let j = 0, jl = exonArray.length; j < jl; ++j) {
+                let start = exonArray[j].resStart, end = exonArray[j].resEnd;
+                let genStart = exonArray[j].genomeRange.split('-')[0];
+
+                for(let k = 0, kl = end - start + 1; k < kl; ++k) {
+                    let colorStr = this.getExonColor(start, end, cnt);
+
+                    pos2exonColor[cnt] = colorStr;
+                    pos2genome[cnt] = (genStart + ic.exonOrder * k*3) + '-' + (genStart + ic.exonOrder * k*3 + ic.exonOrder * 2); // reverse order from large to small
+                    pos2exonIndex[cnt] = j;
+
+                    ++cnt;
+                }
+            }
+        }
+
+        cnt = 0;
         for(let i = 0, il = text.length; i < il; ++i) {
-          let resNum = i-gapCnt;
+          let resNum = i - gapCnt - ((ic.seqStartLen && ic.seqStartLen[chnid]) ? ic.seqStartLen[chnid] : 0);
 
           if(!bMsa) {
               html += ic.showSeqCls.insertGap(chnid, i, '-');
@@ -40673,7 +40679,8 @@ class AddTrack {
               let identityColorStr =(c == resName) ? 'FF0000' : '0000FF';
 
               //var pos =(resNum >= ic.matchedPos[chnid] && resNum - ic.matchedPos[chnid] < ic.chainsSeq[chnid].length) ? ic.chainsSeq[chnid][resNum - ic.matchedPos[chnid]].resi : ic.baseResi[chnid] + 1 + resNum;
-              let pos = ic.baseResi[chnid] + currResi;
+              //   let pos = ic.baseResi[chnid] + currResi;
+              let pos = ic.baseResi[chnid] + (i+1) - ((ic.seqStartLen && ic.seqStartLen[chnid]) ? ic.seqStartLen[chnid] : 0);
 
               if(inTarget2queryHash !== undefined) pos = ic.baseResi[chnid] + inTarget2queryHash[i] + 1; // 0-based
 
@@ -40704,9 +40711,13 @@ class AddTrack {
 
               html += '<span id="' + pre + '_' + ic.pre + chnid + '_' + pos + '" title="' + c + pos + '" class="icn3d-residue" ' + tmpStr + '>' + c + '</span>';
 
+              let tmpStrExon = 'style="background-color:' + pos2exonColor[cnt] + '"';
+              htmlExon += '<span id="' + pre + '_' + ic.pre + chnid + '_' + pos + '" title="' + c + pos + ', Exon ' + (pos2exonIndex[cnt] + 1) + ': ' + pos2genome[cnt] + '" class="icn3d-residue" ' + tmpStrExon + '>&nbsp;</span>';
+
               htmlTmp2 += ic.showSeqCls.insertGapOverview(chnid, i);
 
-              let emptyWidth =(me.cfg.blast_rep_id == chnid) ? Math.round(ic.seqAnnWidth * i /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth) : Math.round(ic.seqAnnWidth * i / ic.maxAnnoLength - prevEmptyWidth - prevLineWidth);
+            //   let emptyWidth =(me.cfg.blast_rep_id == chnid) ? Math.round(ic.seqAnnWidth * i /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth) : Math.round(ic.seqAnnWidth * i / ic.maxAnnoLength - prevEmptyWidth - prevLineWidth);
+              let emptyWidth = Math.round(ic.seqAnnWidth * i /(ic.maxAnnoLength + ic.nTotalGap) - prevEmptyWidth - prevLineWidth);
               if(emptyWidth < 0) emptyWidth = 0;
 
               htmlTmp2 += '<div style="display:inline-block; width:' + emptyWidth + 'px;">&nbsp;</div>';
@@ -40727,19 +40738,21 @@ class AddTrack {
 
               prevEmptyWidth += emptyWidth;
               prevLineWidth += widthPerRes;
-
-              ++currResi;
+              ++cnt;
           }
           else {
               if(bErrorMess) {
-                  html += '<span>' + c + '</span>';
+                html += '<span>' + c + '</span>';
               }
               else {
                 html += '<span>-</span>';
+                htmlExon += '<span></span>';
               }
           }
         }
 
+        // if(ic.seqStartLen && ic.seqStartLen[chnid]) html += ic.showSeqCls.insertMulGap(ic.seqEndLen[chnid], '-');
+
         if(fromArray !== undefined) {
             htmlTmp2 = '';
             let fromArray2 = [], toArray2 = [];
@@ -40765,13 +40778,77 @@ class AddTrack {
             let colorStr =(atom.color === undefined || atom.color.getHexString() === 'FFFFFF') ? 'DDDDDD' : atom.color.getHexString();
             let color =(atom.color !== undefined) ? colorStr : "CCCCCC";
 
+            let cnt, prevCntTotal = 0;
             for(let i = 0, il = fromArray2.length; i < il; ++i) {
                 htmlTmp2 += ic.showSeqCls.insertGapOverview(chnid, fromArray2[i]);
 
-                let emptyWidth =(i == 0) ? Math.round(ic.seqAnnWidth *(fromArray2[i] - ic.baseResi[chnid] - 1) /(ic.maxAnnoLength + ic.nTotalGap)) : Math.round(ic.seqAnnWidth *(fromArray2[i] - toArray2[i-1] - 1) /(ic.maxAnnoLength + ic.nTotalGap));
+                let initialPos = (seqStartLen) ? fromArray2[i] : fromArray2[i] - ic.baseResi[chnid] - 1;
+
+                let emptyWidth =(i == 0) ? Math.round(ic.seqAnnWidth * initialPos /(ic.maxAnnoLength + ic.nTotalGap)) : Math.round(ic.seqAnnWidth *(fromArray2[i] - toArray2[i-1] - 1) /(ic.maxAnnoLength + ic.nTotalGap));
+                if(emptyWidth < 0) emptyWidth = 0;
+
                 htmlTmp2 += '<div style="display:inline-block; width:' + emptyWidth + 'px;">&nbsp;</div>';
 
-                htmlTmp2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray2[i] - fromArray2[i] + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" custom="' +(index+1).toString() + '" from="' + fromArray2 + '" to="' + toArray2 + '" shorttitle="' + simpTitle + '" index="' + index + '" setname="' + chnid + '_custom_' +(index+1).toString() + '" id="' + chnid + '_custom_' + index + '" anno="sequence" chain="' + chnid + '" title="' + title + '">' + title + '</div>';
+                if(!exonArray) {
+                    htmlTmp2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray2[i] - fromArray2[i] + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" custom="' +(index+1).toString() + '" from="' + fromArray2 + '" to="' + toArray2 + '" shorttitle="' + simpTitle + '" index="' + index + '" setname="' + chnid + '_custom_' +(index+1).toString() + '" id="' + chnid + '_custom_' + index + '" anno="sequence" chain="' + chnid + '" title="' + title + '">' + title + '</div>';
+                }
+                else {
+                    // determine how this range sits in the exon ranges in exonArray
+                    let startExon, endExon;
+                    
+                    cnt = toArray[i] - fromArray[i] + 1;
+                    let from = prevCntTotal, to = prevCntTotal + cnt - 1;
+
+                    prevCntTotal += cnt;
+
+                    // fromArray2 was adjusted with gaps, no gaps in this case
+                    // let offset = fromArray2[i] - fromArray[i];
+                    // let emptyWidth = Math.round(ic.seqAnnWidth * offset /(ic.maxAnnoLength + ic.nTotalGap));
+                    // htmlTmp2 += '<div style="display:inline-block; width:' + emptyWidth + 'px;">&nbsp;</div>';
+
+                    for(let j = 0, jl = exonArray.length; j < jl; ++j) {
+                        let start = exonArray[j].resStart, end = exonArray[j].resEnd;
+
+                        if(from >= start && from <= end) {
+                            startExon = {exonIndex: j, rangeStart: start, rangeEnd: end, from: from, genomeRange: exonArray[j].genomeRange};
+                        }
+
+                        if(to >= start && to <= end) {
+                            endExon = {exonIndex: j, rangeStart: start, rangeEnd: end, to: to, genomeRange: exonArray[j].genomeRange};
+                        }
+                    }
+
+                    let startColorStr, endColorStr, colorGradient;
+                    if(startExon && endExon && startExon.exonIndex == endExon.exonIndex) { // 
+                        startColorStr = this.getExonColor(startExon.rangeStart, startExon.rangeEnd, from);
+                        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);
+                    }
+                    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);
+                        }
+
+                        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);
+                            }
+
+                            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);
+                        }
+                    }
+
+                    //htmlTmp2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray2[i] - fromArray2[i] + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" custom="' +(index+1).toString() + '" from="' + fromArray2 + '" to="' + toArray2 + '" shorttitle="' + simpTitle + '" index="' + index + '" setname="' + chnid + '_custom_' +(index+1).toString() + '" id="' + chnid + '_custom_' + index + '" anno="sequence" chain="' + chnid + '" title="' + title + '">' + title + '</div>';
+                }
             }
         }
 
@@ -40783,12 +40860,37 @@ class AddTrack {
 
         html += htmlTmp;
         html2 += htmlTmp2 + htmlTmp;
+        htmlExon += htmlTmp;
 
         html3 += '</div>';
+        html3Exon += '</div>';
+
+        if(!exonArray) {
+            $("#" + ic.pre + "dt_custom_" + chnid + "_" + simpTitle).html(html);
+            $("#" + ic.pre + "ov_custom_" + chnid + "_" + simpTitle).html(html2);
+            $("#" + ic.pre + "tt_custom_" + chnid + "_" + simpTitle).html(html3);
+        }
+        else {
+            $("#" + ic.pre + "dt_custom_" + chnid + "_" + simpTitle).html(htmlExon + html);
+            $("#" + ic.pre + "ov_custom_" + chnid + "_" + simpTitle).html(html2);
+            $("#" + ic.pre + "tt_custom_" + chnid + "_" + simpTitle).html(html3Exon + html3);      
+        }
+    }
+
+    getExonHtml(exonIndex, colorGradient, from, to, genomeRange) { 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" title="Exon ' + (exonIndex + 1) + ': ' + genomeRange + ' genomic interval" anno="sequence" title="' + (exonIndex + 1) + '"><div style="height: 12px; border: 1px solid #000; background: linear-gradient(to right, ' + colorGradient + ');"></div></div>';
+    }
 
-        $("#" + ic.pre + "dt_custom_" + chnid + "_" + simpTitle).html(html);
-        $("#" + ic.pre + "ov_custom_" + chnid + "_" + simpTitle).html(html2);
-        $("#" + ic.pre + "tt_custom_" + chnid + "_" + simpTitle).html(html3);
+    getExonColor(start, end, pos) { let ic = this.icn3d; ic.icn3dui;
+        let middle = ( start + end) * 0.5;
+        if(pos < middle) {
+            let gb = parseInt((pos - start) / (middle - start) * 255);
+            return "rgb(255, " + gb + ", " + gb + ")";
+        }
+        else {
+            let rg = parseInt((end - pos) / (end - middle) * 255);
+            return "rgb(" + rg + ", " + rg + ", 255)";
+        }
     }
 
     alignSequenceToStructure(chainid, data, title) { let ic = this.icn3d, me = ic.icn3dui;
@@ -41096,6 +41198,7 @@ class AddTrack {
             let result = this.getFullText(text);
             text = result.text;
             this.showNewTrack(chainid, title, text, undefined, undefined, type, color, bMsa);
+
             return false;
         }
 
@@ -41218,6 +41321,722 @@ class AddTrack {
        }
     }
 
+    async getMsa(acclist, firstAcc, chainSeq) { let ic = this.icn3d, me = ic.icn3dui;
+        let trackTitleArray = [firstAcc], trackSeqArray = [];
+        // get all seq
+        let url = me.htmlCls.baseUrl + "/vastdyn/vastdyn.cgi?chainlist=" + acclist;
+        let data = await me.getAjaxPromise(url, 'jsonp');
+        let maxLen = 0, maxIndex = 0, index = 0;
+        //let seqArray = [];
+        for(let acc in data) {
+            let seq = data[acc];
+            //seqArray.push(seq);
+
+            let pos = acc.indexOf('.');
+            if(pos != -1) {
+                acc = acc.substr(0, pos);
+            }
+            trackTitleArray.push(acc);
+
+            if(seq.length > maxLen) {
+                maxLen = seq.length;
+                maxIndex = index;
+            }
+            ++index;
+        }
+        
+        // pairwise align each seq to the one with maxIndex
+        url = me.htmlCls.baseUrl + 'pwaln/pwaln.fcgi?from=msa';
+
+        let accArray = acclist.split(',');
+        // oroginal index, chain as the first one
+        let acc2index = {};
+        acc2index[firstAcc] = 0;
+        for(let i = 0, il = accArray.length; i < il; ++i) {
+            acc2index[accArray[i]] = i + 1;
+        }
+        let targetId = accArray[maxIndex];
+        accArray.splice(maxIndex, 1);
+
+        let queries = (chainSeq) ? chainSeq : firstAcc;
+        if(accArray.length > 0) queries += ',' + accArray.join(',');
+
+        let dataObj = {'targets': targetId, 'queries': queries};
+        let alignData = await me.getAjaxPostPromise(url, dataObj);
+
+        if(!alignData.data) {
+            console.log("The protein accessions " + targetId + "," + queries + " can not be aligned...");
+            return;
+        }
+
+        // get aligned length for each pair
+        let index_alignLen = [];
+        ic.qt_start_end = {};
+        // target: targetId
+        // queries: accArray
+        let accArrayFound = [], querySeqArray = [];
+        let firstKey = Object.keys(alignData.targets)[0];
+        let targetSeq = alignData.targets[firstKey].seqdata;
+
+        //add firstAcc to accArray
+        accArray.splice(0, 0, firstAcc);
+        
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
+            let query, target;
+
+            if(!alignData.data[index]) {
+                continue;
+            }
+        
+            query = alignData.data[index].query;
+            let acc;
+            if(query.acc.length <= 5) { // PDB
+                acc = query.acc.substr(0, 4) + '_' + query.acc.substr(4, 1);
+            }
+            else {
+                acc = query.acc;
+            }
+
+            if(index == 0) acc = firstAcc;
+
+            accArrayFound.push(acc);
+
+            firstKey = Object.keys(alignData.data[index].targets)[0];
+            target = alignData.data[index].targets[firstKey];
+
+            target = target.hsps[0];
+
+            querySeqArray.push(query.seqdata);
+            let alignLen = target.scores.num_ident * 100 + query.sz; // order by aligned seq length, then seq length
+
+            ic.qt_start_end[index] = [];
+
+            let segArray = target.segs;
+            for(let i = 0, il = segArray.length; i < il; ++i) {
+                let seg = segArray[i];
+                let qt_start_end = {t_start: seg.orifrom, t_end: seg.orito, q_start: seg.from, q_end: seg.to};
+                ic.qt_start_end[index].push(qt_start_end);
+            }
+
+            index_alignLen.push({index: index, alignLen: alignLen});
+        }
+
+        accArray = accArrayFound;
+
+        index_alignLen.sort(function(a,b){
+            return b.alignLen - a.alignLen;
+        });
+
+        // start and end of MSA
+        let start_t = 9999, end_t = -1;
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) { 
+            if(!ic.qt_start_end[index]) continue;
+
+            for(let i = 0, il = ic.qt_start_end[index].length; i < il; ++i) {
+                let start1, end1;
+                
+                start1 = ic.qt_start_end[index][i].t_start;
+                end1 = ic.qt_start_end[index][i].t_end;
+
+                for(let j = start1; j <= end1; ++j) {
+                    if(j < start_t) start_t = j;
+                    if(j > end_t) end_t = j;
+                }
+            }
+        }
+
+        // N- and C-terminal residues
+        let maxNtermLen = start_t, maxCtermLen = targetSeq.length - (end_t + 1);
+        let startArray = [], endArray = [];
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) { 
+            if(!ic.qt_start_end[index]) continue;
+
+            let qPos = ic.qt_start_end[index][0].q_start;
+            startArray.push(qPos);
+            if(maxNtermLen < qPos) maxNtermLen = qPos;
+
+            let lastIndex = ic.qt_start_end[index].length - 1;
+            qPos = ic.qt_start_end[index][lastIndex].q_end;
+            endArray.push(qPos);
+            let dist = querySeqArray[index].length - (qPos + 1);
+            if(maxCtermLen < dist) maxCtermLen = dist;
+        }
+
+        ic.msaSeq = {};
+        // assign the template
+        ic.msaSeq[targetId] = '';
+        
+        for(let i = start_t; i <= end_t; ++i) {
+            ic.msaSeq[targetId] += targetSeq[i];           
+        }    
+
+        // progressively merge sequences, starting from most similar to least similar
+        let alignedChainIndice = [0];
+        for(let arrayIndex = 0, arrayIndexl = index_alignLen.length; arrayIndex < arrayIndexl; ++arrayIndex) { 
+            let index = index_alignLen[arrayIndex].index;
+            alignedChainIndice.push(index);
+
+            ic.msaSeq[accArray[index]] = '';
+
+            // some proteins may not be aligned
+            if(!querySeqArray[index]) continue;
+
+            ic.setSeqAlignCls.mergeTwoSeqForAllSimple(targetId, accArray, index, alignedChainIndice, start_t, end_t, querySeqArray);
+        }  
+
+        // add N-terminal seq
+        let seqN = '', cnt;
+        for(let i = 0; i < maxNtermLen - start_t; ++i) {
+            seqN += '-';
+        }
+        for(let i = 0; i < start_t; ++i) {
+            seqN += targetSeq[i];
+        }
+        ic.msaSeq[targetId] = seqN + ic.msaSeq[targetId];
+
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) { 
+            seqN = '';
+            for(let i = 0; i < maxNtermLen - startArray[index]; ++i) {
+                seqN += '-';
+            }
+            for(let i = 0; i < startArray[index]; ++i) {
+                seqN += querySeqArray[index][i];
+            }
+
+            ic.msaSeq[accArray[index]] = seqN + ic.msaSeq[accArray[index]];
+        }
+
+        // add C-terminal seq
+        for(let i = end_t + 1; i < targetSeq.length; ++i) {
+            ic.msaSeq[targetId] += targetSeq[i];
+        }
+
+        cnt = targetSeq.length - (end_t + 1);
+        for(let i = 0; i < maxCtermLen - cnt; ++i) {
+            ic.msaSeq[targetId] += '-';
+        }
+
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
+            for(let i = endArray[index] + 1; i < querySeqArray[index].length; ++i) {
+                ic.msaSeq[accArray[index]] += querySeqArray[index][i];
+            }
+
+            cnt = querySeqArray[index].length - (endArray[index] + 1);
+            for(let i = 0; i < maxCtermLen - cnt; ++i) {
+                ic.msaSeq[accArray[index]] += '-';
+            }
+        }
+
+        for(let acc in ic.msaSeq) {
+            let index = acc2index[acc];
+            trackSeqArray[index] = ic.msaSeq[acc];
+            trackTitleArray[index] = acc;
+        }
+
+        // some of the protein may not be aligned
+        let trackTitleArrayFinal = [], trackSeqArrayFinal = [];
+        for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
+            if(trackSeqArray[i]) {
+                trackSeqArrayFinal.push(trackSeqArray[i]);
+                trackTitleArrayFinal.push(trackTitleArray[i]);
+            }
+        }
+
+        let seqFirst = trackSeqArrayFinal[0];
+
+        trackSeqArrayFinal.splice(0, 1);
+        trackTitleArrayFinal.splice(0, 1);
+
+        return {trackTitleArray: trackTitleArrayFinal, trackSeqArray: trackSeqArrayFinal, seqFirst: seqFirst};
+    }
+
+    async getIsoformMsa(acclist, acc2exons) { let ic = this.icn3d, me = ic.icn3dui;
+        let trackTitleArray = [], trackSeqArray = [];
+        // get all seq
+        let url = me.htmlCls.baseUrl + "/vastdyn/vastdyn.cgi?chainlist=" + acclist;
+        let data = await me.getAjaxPromise(url, 'jsonp');
+        let maxLen = 0, maxIndex = 0, index = 0;
+        let accArray = [], querySeqArray = [];
+        for(let acc in data) {
+            let seq = data[acc];
+            querySeqArray.push(seq);
+
+            let pos = acc.indexOf('.');
+            if(pos != -1) {
+                acc = acc.substr(0, pos);
+            }
+            accArray.push(acc);
+
+            if(seq.length > maxLen) {
+                maxLen = seq.length;
+                maxIndex = index;
+            }
+            ++index;
+        }
+
+        // get aligned length for each pair
+        ic.qt_start_end = {};
+
+        // use the genomic interval as the alignment template
+        let targetId = 'genomeRes';
+
+        let acc2index = {};
+        
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
+            let acc = accArray[index];
+
+            acc2index[acc] = index;
+
+            ic.qt_start_end[index] = [];
+
+            let segArray = acc2exons[acc];     
+
+            for(let i = 0, il = segArray.length; i < il; ++i) {
+                let seg = segArray[i];
+                
+                // mRNA has the reverse order, use negative to make the order right, then minus the offset
+                let qt_start_end = {t_start: ic.exonOrder * seg.genResStart, t_end: ic.exonOrder * seg.genResEnd, q_start: seg.resStart, q_end: seg.resEnd};
+                ic.qt_start_end[index].push(qt_start_end);
+            }
+        }
+
+        // start and end of MSA
+        let start_t = 999999999, end_t = -999999999;
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) { 
+            if(!ic.qt_start_end[index]) continue;
+
+            for(let i = 0, il = ic.qt_start_end[index].length; i < il; ++i) {
+                let start1, end1;
+                
+                start1 = ic.qt_start_end[index][i].t_start;
+                end1 = ic.qt_start_end[index][i].t_end;
+
+                for(let j = start1; j <= end1; ++j) {
+                    if(j < start_t) start_t = j;
+                    if(j > end_t) end_t = j;
+                }
+            }
+        }
+
+        // minus the offset start_t
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) {
+            let segArray = ic.qt_start_end[index];
+            for(let i = 0, il = segArray.length; i < il; ++i) {
+                let seg = segArray[i];
+                seg.t_start -= start_t;
+                seg.t_end -= start_t;
+            }
+        }
+
+        ic.msaSeq = {};
+        // assign the template
+        ic.msaSeq[targetId] = '';
+
+        let start_tFinal = 0;
+        let end_tFinal = end_t - start_t;
+
+        for(let i = start_tFinal; i <= end_tFinal; ++i) {
+            ic.msaSeq[targetId] += 'X';   // fake seq        
+        }    
+
+        // progressively merge sequences, starting from most similar to least similar
+        let alignedChainIndice = [0];
+        for(let index = 0, indexl = accArray.length; index < indexl; ++index) { 
+            alignedChainIndice.push(index);
+
+            ic.msaSeq[accArray[index]] = '';
+
+            // some proteins may not be aligned
+            if(!querySeqArray[index]) continue;
+            ic.setSeqAlignCls.mergeTwoSeqForAllSimple(targetId, accArray, index, alignedChainIndice, start_tFinal, end_tFinal, querySeqArray);
+        }  
+
+        for(let acc in ic.msaSeq) {
+            let index = acc2index[acc];
+
+            if(index !== undefined) {
+                trackSeqArray[index] = ic.msaSeq[acc];
+                trackTitleArray[index] = acc;
+            }
+        }
+
+        // remove introns in trackSeqArray
+        let trackSeqArrayFinal = [];
+        for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
+            trackSeqArrayFinal[i] = '';
+        }
+
+        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;
+                    }
+                }
+            }
+            
+            if(bExon) {
+                for(let i = 0, il = trackSeqArray.length; i < il; ++i) {
+                    trackSeqArrayFinal[i] += trackSeqArray[i][j];
+                }
+            }
+        }
+
+        return {trackTitleArray: trackTitleArray, trackSeqArray: trackSeqArrayFinal, maxIndex: maxIndex};
+    }
+
+    async showMsaTracks(chainid, seqFirst, trackTitleArray, trackSeqArray, startpos, type, acc2exons) { let ic = this.icn3d; ic.icn3dui;
+        //ic.startposGiSeq = undefined;
+        for(let i = 0, il = ic.giSeq[chainid].length; i < il; ++i) {
+            //let pos =(i >= ic.matchedPos[chainid] && i - ic.matchedPos[chainid] < ic.chainsSeq, [chainid].length) ? ic.chainsSeq[chainid][i - ic.matchedPos[chainid]].resi : ic.baseResi[chainid] + 1 + i;
+            let pos = ic.ParserUtilsCls.getResi(chainid, i);
+
+            if(pos != startpos) {
+                continue;
+            }
+            else {
+                ic.startposGiSeq = i;
+            }
+        }
+
+        if(ic.startposGiSeq === undefined) {
+            alert("Please double check the start position before clicking \"Add Track\"");
+            return;
+        }
+
+        // set up gap for the master seq
+        // don't count gaps in both ends
+        ic.targetGapHash = {};
+        let prevSeq = '-', prevPos = 0, from, to, cnt = 0, dashCnt = 0;
+        let bFound = false, seqStart = 0, seqEnd = 0, seqLength = seqFirst.length;
+        // add gaps to the N- and C-terminal
+        if(!ic.seqStartLen) ic.seqStartLen = {};
+        if(!ic.seqEndLen) ic.seqEndLen = {};
+        for(let i = 0, il = seqFirst.length; i < il; ++i) {
+            if(seqFirst[i] == '-' && seqFirst[i] != prevSeq) { // start of gap
+                from = cnt;
+                dashCnt = 0;
+            }
+
+            if(prevSeq == '-' && seqFirst[i] != prevSeq && cnt > 0) { // end of gap
+                to = prevPos;
+                ic.targetGapHash[from + ic.startposGiSeq] = {'from': from + ic.startposGiSeq, 'to': to + dashCnt - 1 + ic.startposGiSeq};
+            }
+
+            prevSeq = seqFirst[i];
+            prevPos = cnt;
+
+            if(seqFirst[i] != '-') {
+                ++cnt;
+                seqEnd = i;
+                ic.seqEndLen[chainid] = seqLength - 1 - seqEnd;
+
+                if(!bFound) {
+                    seqStart = i;
+                    ic.seqStartLen[chainid] = seqStart;
+
+                    bFound = true;
+                }
+            }
+            else {
+                ++dashCnt;
+            }
+        }
+
+        // adjust the total length
+        if(ic.maxAnnoLength < ic.maxAnnoLengthOri + ic.seqStartLen[chainid] + ic.seqEndLen[chainid]) {
+                ic.maxAnnoLength = ic.maxAnnoLengthOri + ic.seqStartLen[chainid] + ic.seqEndLen[chainid];
+        }
+
+        await ic.annotationCls.resetAnnoAll();
+
+        let targetGapHashStr = '';
+        let cntTmp = 0;
+        for(let i in ic.targetGapHash) {
+            if(cntTmp > 0) targetGapHashStr += ' ';
+            targetGapHashStr += i + '_' + ic.targetGapHash[i].from + '_' + ic.targetGapHash[i].to;
+            ++cntTmp;
+        }
+
+        //me.htmlCls.clickMenuCls.setLogCmd("msa | " + targetGapHashStr, true);
+
+        // add tracks
+        let resi2cntSameRes = {}; // count of same residue at each position
+        for(let j = 0, jl = trackSeqArray.length; j < jl; ++j) {
+            let resi = startpos;
+            let text = '';
+            for(let k = 0; k < ic.startposGiSeq; ++k) {
+                if(ic.targetGapHash.hasOwnProperty(k)) {
+                    for(let m = 0; m < ic.targetGapHash[k].to - ic.targetGapHash[k].from + 1; ++m) {
+                        text += '-';
+                    }
+                }
+
+                text += '-';
+            }
+
+            let resn, prevResn = '-';
+            let fromArray = [], toArray = [];
+            let bFound = false;
+            let seqStartLen = 0;
+            //    for(let k = seqStart; k <= seqEnd; ++k) {
+            for(let k = 0; k < seqLength; ++k) {
+                //if(seqFirst[k] == '-') continue;
+
+                if(j == 0) resi2cntSameRes[resi] = 0;
+
+                resn = trackSeqArray[j][k];
+
+                if(prevResn == '-' && resn != '-') {
+                    fromArray.push(k);
+                }
+
+                if(prevResn != '-' && resn == '-') {
+                    toArray.push(k - 1);
+                }
+
+                if(resn != '-') {
+                    if(!bFound) {
+                        seqStartLen = k;
+                        bFound = true;
+                    }
+                }
+
+                text += resn; //ic.giSeq[chainid][i];
+
+                if(seqFirst[k] != '-') {
+                    if(seqFirst[k] == trackSeqArray[j][k]) ++resi2cntSameRes[resi];
+                    ++resi;
+                }
+
+                prevResn = resn;
+            }
+
+            // last one
+            if(prevResn != '-') {
+                toArray.push(seqLength - 1);
+            }
+
+            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);
+        }
+
+        // set color for the master seq
+        if(trackSeqArray.length > 0) {
+            if(ic.queryresi2score === undefined) ic.queryresi2score = {};
+            if(ic.queryresi2score[chainid] === undefined) ic.queryresi2score[chainid] = {};
+
+            let nSeq = trackSeqArray.length;
+            for(let resi in resi2cntSameRes) {
+                let score = parseInt(resi2cntSameRes[resi] / nSeq * 100);
+                ic.queryresi2score[chainid][resi] = score;
+            }
+
+            let resiArray = Object.keys(resi2cntSameRes);
+            let start = Math.min.apply(null, resiArray);
+            let end = Math.max.apply(null, resiArray);
+
+            let resiScoreStr = '';
+            for(let resi = start; resi <= end; ++resi) {
+                if(resi2cntSameRes.hasOwnProperty(resi)) {
+                    resiScoreStr += Math.round(resi2cntSameRes[resi] / nSeq * 9); // max 9
+                }
+                else {
+                    resiScoreStr += '_';
+                }
+            }
+
+            ic.opts['color'] = 'align custom';
+            ic.setColorCls.setColorByOptions(ic.opts, ic.hAtoms);
+
+            ic.hlUpdateCls.updateHlAll();
+
+            ic.drawCls.draw();
+
+            //me.htmlCls.clickMenuCls.setLogCmd('color align custom | ' + chainid + ' | range ' + start + '_' + end + ' | ' + resiScoreStr, true);
+        }
+    }
+
+    processAccList(acclist) { let ic = this.icn3d; ic.icn3dui;
+        // remove version from acc
+        let accArray = acclist.split(',');
+        let accHash = {};
+        let acclistTmp = '';
+        for(let i = 0, il = accArray.length; i < il; ++i) {
+            let acc = accArray[i];
+
+            if(accHash.hasOwnProperty(acc)) {
+                continue;
+            }
+            else {
+                accHash[acc] = 1;
+            }
+            
+            let pos = acc.indexOf('.');
+            if(pos != -1) {
+                acclistTmp += acc.substr(0, pos);
+            }
+            else {
+                acclistTmp += acc;
+            }
+
+            if(i < accArray.length - 1) {
+                acclistTmp += ',';
+            }
+        }
+
+        return acclistTmp;
+    }
+
+    async addExonTracks(chainid, geneid, startpos, type) { let ic = this.icn3d, me = ic.icn3dui;
+        let seqFirst, trackTitleArray = [], trackSeqArray = [];
+
+        // get acclist from geneid
+        let url = me.htmlCls.baseUrl + "/vastdyn/vastdyn.cgi?geneid2isoforms=" + geneid;
+        let data = await me.getAjaxPromise(url, 'jsonp');
+        let accArray = data.acclist;
+        let exons = data.exons;
+        let acc2exons = {};
+
+        let acclist = '';
+        ic.exonOrder = 1; // 1: increasing bp order; -1 decreasing bp order
+        for(let i = 0, il = accArray.length; i < il; ++i) {
+            let accOri = accArray[i];
+            let pos = accOri.indexOf('.');
+            let acc = (pos != -1) ? accOri.substr(0, pos) : accOri;
+
+            let cntTotal = 0, prevCntTotal = 0, rangeArray = [];
+            for(let j = 0, jl = exons[accOri].length; j < jl; ++j) {
+                let itemArray = exons[accOri][j].split('-');
+                itemArray[0] = parseInt(itemArray[0]);
+                itemArray[1] = parseInt(itemArray[1]);
+                itemArray[2] = parseInt(itemArray[2]);
+
+                ic.exonOrder = (itemArray[0] < itemArray[1]) ? 1 : -1;
+
+                let genomeRange = itemArray[0] + '-' + itemArray[1];
+                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 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);
+
+                rangeArray.push({genomeRange: genomeRange, genResStart: genResStart, genResEnd: genResEnd, resStart: resStart, resEnd: resEnd});
+
+                prevCntTotal = cntTotal;
+            }
+            acc2exons[acc] = rangeArray;
+
+            acclist += acc;
+            if(i < il - 1) {
+                acclist += ',';
+            }
+        }
+
+        let result = await this.getIsoformMsa(acclist, acc2exons);
+        trackTitleArray = result.trackTitleArray;
+        trackSeqArray = result.trackSeqArray;
+        //seqFirst = result.seqFirst;
+        let maxIndex = result.maxIndex;
+
+        let acclist2 = trackTitleArray[maxIndex];
+        let structure = chainid.substr(0, chainid.indexOf('_'));
+        let firstAcc;
+        if(structure.length > 5) {
+            if(ic.uniprot2acc && ic.uniprot2acc[structure]) structure = ic.uniprot2acc[structure];
+            firstAcc = structure;
+        }
+        else {
+            firstAcc = chainid;
+        }
+
+        // get the sequence from iCn3D because a uniProt ID can not be retrieved in pwaln.fcgi
+        if(structure.length > 5) {
+            let chainSeq = '';
+            for(let i = 0, il = ic.chainsSeq.length; i < il; ++i) {
+                chainSeq += ic.chainsSeq[i].resn;
+            }
+
+            result = await this.getMsa(acclist2, firstAcc, chainSeq);
+        }
+        else {
+            result = await this.getMsa(acclist2, firstAcc);
+        }
+
+        result.trackTitleArray;
+        let trackSeqArray2 = result.trackSeqArray;
+        seqFirst = result.seqFirst;
+
+        // merge trackTitleArray2[0] with trackSeqArray[maxIndex]
+        let A = trackSeqArray[maxIndex], B = trackSeqArray2[0];
+        let i = 0, j = 0;
+
+        let ALen = trackSeqArray.length;
+
+        while (i < A.length && j < B.length) {
+            if(A[i] != B[j]) {
+                if(A[i] == '-') { 
+                    // inser "-" in B
+                    B = B.substr(0, j) + '-' + B.substr(j);
+                    seqFirst = seqFirst.substr(0, j) + '-' + seqFirst.substr(j);
+                }
+                else { //if(B[j] == '-') { 
+                    // inser "-" in A
+                    for(let k = 0; k < ALen; ++k) {
+                        trackSeqArray[k] = trackSeqArray[k].substr(0, i) + '-' + trackSeqArray[k].substr(i);
+                    }
+                }
+            }
+
+            ++i;
+            ++j;
+        }
+
+        await this.showMsaTracks(chainid, seqFirst, trackTitleArray, trackSeqArray, startpos, type, acc2exons);
+
+        me.htmlCls.clickMenuCls.setLogCmd("add exon track | chainid " + chainid + " | geneid " + geneid + " | startpos " + startpos + " | type " + type, true);
+    }
+
+    async addMsaTracks(chainid, startpos, type, fastaList) { let ic = this.icn3d, me = ic.icn3dui;
+        let seqFirst, trackTitleArray = [], trackSeqArray = [];
+
+        let fastaArray = fastaList.split('>');
+
+        // the first array item is empty
+        // the second array item is the sequence of the structure, start with i = 2
+        let posFirst = fastaArray[1].indexOf('\n');
+        //let titleFirst = fastaArray[1].substr(0, posFirst);
+        seqFirst = fastaArray[1].substr(posFirst + 1).replace(/\n/g, '');
+
+        for(let i = 2, il = fastaArray.length; i < il; ++i) {
+            let pos = fastaArray[i].indexOf('\n');
+            let title = fastaArray[i].substr(0, pos);
+            if(title.indexOf('|') != -1) {
+                title = title.split('|')[1];
+                //   if(title.indexOf('.') != -1) {
+                //     title = title.split('.')[0];
+                //   }
+            }
+            trackTitleArray.push(title);
+            let seq = fastaArray[i].substr(pos + 1).replace(/\n/g, '');
+            trackSeqArray.push(seq);
+        }
+
+        await this.showMsaTracks(chainid, seqFirst, trackTitleArray, trackSeqArray, startpos, type);
+
+        me.htmlCls.clickMenuCls.setLogCmd("add msa track | chainid " + chainid + " | startpos " + startpos + " | type " + type + " | fastaList " + fastaList , true);
+    }
 }
 
 /**
@@ -41868,13 +42687,14 @@ class ShowAnno {
                 } // if(me.cfg.mmdbid
             } // for(let i = 0
 
-            ic.maxAnnoLength = 1;
+            ic.maxAnnoLengthOri = 1;
             for(let chainid in ic.chainsSeq) {
                 // use protein or nucleotide as the max length
-                if(ic.chainsSeq[chainid].length > ic.maxAnnoLength && (ic.protein_chainid.hasOwnProperty(chainid) || nucleotide_chainid.hasOwnProperty(chainid)) ) {
-                    ic.maxAnnoLength = ic.chainsSeq[chainid].length;
+                if(ic.chainsSeq[chainid].length > ic.maxAnnoLengthOri && (ic.protein_chainid.hasOwnProperty(chainid) || nucleotide_chainid.hasOwnProperty(chainid)) ) {
+                    ic.maxAnnoLengthOri = ic.chainsSeq[chainid].length;
                 }
             }
+            ic.maxAnnoLength = ic.maxAnnoLengthOri;
         }
 
         return {'nucleotide_chainid': nucleotide_chainid, 'chemical_chainid': chemical_chainid, 'chemical_set': chemical_set};
@@ -41889,7 +42709,7 @@ class ShowAnno {
         let chemical_chainid = result.chemical_chainid;
         let chemical_set = result.chemical_set;
 
-        if(ic.bAnnoShown === undefined || !ic.bAnnoShown || ic.bResetAnno) { // ic.bResetAnno when loading another structure
+        if(!ic.bAnnoShown || ic.bResetAnno) { // ic.bResetAnno when loading another structure
             // assign early to avoid load annotations twice
             ic.bAnnoShown = true;
 
@@ -42030,13 +42850,52 @@ class ShowAnno {
         let thisClass = this;
         let chnidBaseArray = $.map(ic.protein_chainid, function(v) { return v; });
         let index = 0;
+
+        // get geneid
+        if(!ic.chainsGene) ic.chainsGene = {};
+        for(let chnid in ic.protein_chainid) {
+            let structure = chnid.substr(0, chnid.indexOf('_'));
+            // UniProt or NCBI protein accession
+            if(structure.length > 5) {
+                let refseqid, url;
+                if(ic.uniprot2acc && ic.uniprot2acc[structure]) {
+                    refseqid = ic.uniprot2acc[structure];
+                }
+                else {
+                    try {
+                        if(!ic.uniprot2acc) ic.uniprot2acc = {};
+                        url = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?uniprot2refseq=" + structure;
+                        let result = await me.getAjaxPromise(url, 'jsonp');
+                        refseqid = (result && result.refseq) ? result.refseq : structure;
+
+                        ic.uniprot2acc[structure] = refseqid;
+                    }
+                    catch {
+                        console.log("Problem in getting protein accession from UniProt ID...");
+                        refseqid = structure;
+                    }
+                }
+
+                // get Gene info from protein name
+                // url = me.htmlCls.baseUrl + "vastdyn/vastdyn.cgi?protein2gene=" + refseqid;
+                // ic.chainsGene[chnid] = await me.getAjaxPromise(url, 'jsonp');
+
+                // get Gene info from uniprot
+                url = "https://rest.uniprot.org/uniprotkb/search?format=json&fields=xref_geneid,gene_names&query=" + structure;
+                let geneData = await me.getAjaxPromise(url, 'json');
+                let geneId = (geneData.results[0] && geneData.results[0].uniProtKBCrossReferences[0]) ? geneData.results[0].uniProtKBCrossReferences[0].id : undefined;
+                let geneSymbol = (geneData.results[0] && geneData.results[0].genes[0] && geneData.results[0].genes[0].geneName) ? geneData.results[0].genes[0].geneName.value : undefined;
+                ic.chainsGene[chnid] = {geneId: geneId, geneSymbol: geneSymbol};
+            }
+        }
+
         for(let chnid in ic.protein_chainid) {
             let buttonStyle = me.utilsCls.isMobile() ? 'none' : 'button';
             let fullProteinName = ic.showSeqCls.getProteinName(chnid);
             let proteinName = fullProteinName;
             //if(proteinName.length > 40) proteinName = proteinName.substr(0, 40) + "...";
             let categoryStr =(index == 0) ? "<span class='icn3d-annoLargeTitle'><b>Proteins</b>: </span><br><br>" : "";
-            let geneLink =(ic.chainsGene[chnid] && ic.chainsGene[chnid].geneId) ? "(Gene: <a href='https://www.ncbi.nlm.nih.gov/gene/" + ic.chainsGene[chnid].geneId + "' target='_blank' title='" + ic.chainsGene[chnid].geneDesc + "'>" + ic.chainsGene[chnid].geneSymbol + "</a>)" : '';
+            let geneLink =(ic.chainsGene[chnid] && ic.chainsGene[chnid].geneId) ? "(Gene: <a href='https://www.ncbi.nlm.nih.gov/gene/" + ic.chainsGene[chnid].geneId + "?report=gene_table' target='_blank' title='" + ic.chainsGene[chnid].geneDesc + "'>" + ic.chainsGene[chnid].geneSymbol + "</a>)" : '';
             let structure = chnid.substr(0, chnid.indexOf('_'));
             let chainLink = (structure.length > 5) ? '<a href="https://alphafold.ebi.ac.uk/entry/' + structure + '" target="_blank">' + chnid + '</a>' : chnid;
             let chainHtml = "<div id='" + ic.pre + "anno_" + chnid + "' class='icn3d-annotation'>" + categoryStr
@@ -42587,6 +43446,9 @@ class ShowSeq {
             html += htmlTmp + '<span class="icn3d-seqLine">';
             let helixCnt = 0, sheetCnt = 0;
             let savedSsName = '';
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqStartLen[chnid], ' ');
+
             for(let i = 0, il = giSeq.length; i < il; ++i) {
               html += this.insertGap(chnid, i, '-');
               let currResi;
@@ -42644,18 +43506,25 @@ class ShowSeq {
               }
               html += '</span>';
             }
+
+            if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqEndLen[chnid], ' ');
+
             html += '<span class="icn3d-residueNum"></span>';
             html += '</span>';
             html += '<br>';
             html += '</div>';
             html3 += '</div>';
         }
+
         // html to display secondary structures
         htmlTmp = '<div class="icn3d-residueLine" style="white-space:nowrap;">';
         htmlTmp += '<div class="icn3d-annoTitle" anno="0"></div>';
         htmlTmp += '<span class="icn3d-residueNum"></span>';
         html3 += htmlTmp + '<br>';
         html += htmlTmp + '<span class="icn3d-seqLine">';
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqStartLen[chnid], '-');
+
         for(let i = 0, il = giSeq.length; i < il; ++i) {
           html += this.insertGap(chnid, i, '-');
         //   let resi =(i >= ic.matchedPos[chnid] && i - ic.matchedPos[chnid] < ic.chainsSeq[chnid].length) ? ic.chainsSeq[chnid][i - ic.matchedPos[chnid]].resi : ic.baseResi[chnid] + 1 + i;
@@ -42703,6 +43572,9 @@ class ShowSeq {
             html += '<span>-</span>'; //'<span>-</span>';
           }
         }
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqEndLen[chnid], '-');
+
         html += '<span class="icn3d-residueNum"></span>';
         html += '</span>';
         html += '<br>';
@@ -42734,6 +43606,9 @@ class ShowSeq {
         html += htmlTmp + htmlTmp2;
         html2 += htmlTmp + htmlTmp2;
         let pos, nGap = 0;
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqStartLen[chnid], '-');
+
         for(let i = 0, il = giSeq.length; i < il; ++i) {
           html += this.insertGap(chnid, i, '-');
           if(ic.targetGapHash !== undefined && ic.targetGapHash.hasOwnProperty(i)) nGap += ic.targetGapHash[i].to - ic.targetGapHash[i].from + 1;
@@ -42763,6 +43638,9 @@ class ShowSeq {
               html += '<span id="giseq_' + ic.pre + chnid + '_' + pos + '" title="' + cFull + pos + '" class="icn3d-residue" style="color:#' + color + '">' + c + '</span>';
           }
         }
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqEndLen[chnid], '-');
+
         if(me.cfg.blast_rep_id == chnid) {
           // change color in 3D
           ic.opts['color'] = (ic.blastAcxn) ? 'confidence' : 'conservation';
@@ -42773,8 +43651,11 @@ class ShowSeq {
         // sequence, overview
         let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.chains[chnid]);
         let color =(atom.color) ? atom.color.getHexString() : "CCCCCC";
-        let width = Math.round(ic.seqAnnWidth * giSeq.length / ic.maxAnnoLength);
+        let width = Math.round(ic.seqAnnWidth * giSeq.length / (ic.maxAnnoLength + ic.nTotalGap));
         if(width < 1) width = 1;
+
+        if(ic.seqStartLen && ic.seqStartLen[chnid]) html2 += this.insertMulGapOverview(chnid, ic.seqStartLen[chnid]);
+
         if(me.cfg.blast_rep_id != chnid) { // regular
             html2 += '<div id="giseq_summary_' + ic.pre + chnid + '" class="icn3d-seqTitle icn3d-link" gi chain="' + chnid + '" style="display:inline-block; color:white; font-weight:bold; background-color:#' + color + '; width:' + width + 'px;">' + chnid + '</div>';
         }
@@ -42788,7 +43669,9 @@ class ShowSeq {
                 }
             }
             toArray2.push(giSeq.length - 1);
+
             html2 += '<div id="giseq_summary_' + ic.pre + chnid + '" class="icn3d-seqTitle icn3d-link" gi chain="' + chnid + '" style="width:' + width + 'px;">';
+            
             for(let i = 0, il = fromArray2.length; i < il; ++i) {
                 html2 += this.insertGapOverview(chnid, fromArray2[i]);
                 html2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray2[i] - fromArray2[i] + 1) /(ic.maxAnnoLength + ic.nTotalGap)) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" anno="sequence" gi chain="' + chnid + '" title="' + chnid + '">' + chnid + '</div>';
@@ -42920,6 +43803,9 @@ class ShowSeq {
                 htmlTmp += '<span class="icn3d-residueNum"></span>';
                 html3 += htmlTmp + '<br>';
                 html += htmlTmp + '<span class="icn3d-seqLine">';
+
+                if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqStartLen[chnid], '-');
+
                 for(let i = 0, il = giSeq.length; i < il; ++i) {
                     html += this.insertGap(chnid, i, '-');
                     //if(i >= ic.matchedPos[chnid] && i - ic.matchedPos[chnid] < ic.chainsSeq[chnid].length) {
@@ -42943,6 +43829,9 @@ class ShowSeq {
                     //   html += '<span></span>';
                     // }
                 }
+
+                if(ic.seqStartLen && ic.seqStartLen[chnid]) html += this.insertMulGap(ic.seqEndLen[chnid], '-');
+
                 html += '<span class="icn3d-residueNum"></span>';
                 html += '</span>';
                 html += '<br>';
@@ -43590,26 +44479,43 @@ class ShowSeq {
       let html = '';
       //if(me.cfg.blast_rep_id == chnid && ic.targetGapHash!== undefined && ic.targetGapHash.hasOwnProperty(seqIndex)) {
       if(ic.targetGapHash!== undefined && ic.targetGapHash.hasOwnProperty(seqIndex)) {
-          for(let j = 0; j <(ic.targetGapHash[seqIndex].to - ic.targetGapHash[seqIndex].from + 1); ++j) {
-              if(bNohtml) {
-                 html += text;
-              }
-              else {
-                 html += '<span>' + text + '</span>';
-              }
-          }
+        html += this.insertMulGap(ic.targetGapHash[seqIndex].to - ic.targetGapHash[seqIndex].from + 1, text, bNohtml);
       }
       return html;
     }
-    insertGapOverview(chnid, seqIndex) {  let ic = this.icn3d, me = ic.icn3dui;
+
+    insertMulGap(n, text, bNohtml) {  let ic = this.icn3d; ic.icn3dui;
+        let html = '';
+        for(let j = 0; j < n; ++j) {
+            if(bNohtml) {
+                html += text;
+            }
+            else {
+                html += '<span>' + text + '</span>';
+            }
+        }
+        return html;
+    }
+
+    insertGapOverview(chnid, seqIndex) {  let ic = this.icn3d; ic.icn3dui;
       let html2 = '';
-      if(me.cfg.blast_rep_id == chnid && ic.targetGapHash!== undefined && ic.targetGapHash.hasOwnProperty(seqIndex)) {
-          let width = ic.seqAnnWidth *(ic.targetGapHash[seqIndex].to - ic.targetGapHash[seqIndex].from + 1) /(ic.maxAnnoLength + ic.nTotalGap);
-          html2 += '<div style="display:inline-block; background-color:#333; width:' + width + 'px; height:3px;">&nbsp;</div>';
+    //   if(me.cfg.blast_rep_id == chnid && ic.targetGapHash !== undefined && ic.targetGapHash.hasOwnProperty(seqIndex)) {
+      if(ic.targetGapHash !== undefined && ic.targetGapHash.hasOwnProperty(seqIndex)) {
+        html2 += this.insertMulGapOverview(chnid, ic.targetGapHash[seqIndex].to - ic.targetGapHash[seqIndex].from + 1);
       }
       return html2;
     }
 
+    insertMulGapOverview(chnid, n) {  let ic = this.icn3d; ic.icn3dui;
+        let html2 = '';
+        let width = ic.seqAnnWidth * n /(ic.maxAnnoLength + ic.nTotalGap);
+        width = parseInt(width);
+        
+        // html2 += '<div style="display:inline-block; background-color:#333; width:' + width + 'px; height:3px;">&nbsp;</div>';
+        html2 += '<div style="display:inline-block; width:' + width + 'px;">&nbsp;</div>';
+        return html2;
+    }
+
     setAlternativeSeq(chnid, chnidBase) { let ic = this.icn3d; ic.icn3dui;
         //if(ic.chainsSeq[chnid] !== undefined) {
         let resArray = ic.chainsSeq[chnid];
@@ -50410,6 +51316,8 @@ class MmdbParser {
 
         if(data && data.uniprot) {
             me.cfg.afid = data.uniprot;
+            if(!ic.uniprot2acc) ic.uniprot2acc = {};
+            ic.uniprot2acc[data.uniprot] = refseqid;
         }
         else {
             alert('The accession ' + refseqid + ' can not be mapped to AlphaFold UniProt ID. It will be treated as a UniProt ID instead.');
@@ -56692,14 +57600,121 @@ class SetSeqAlign {
         result = this.getTemplatePosFromOriPos(chainid1, prevIndex1, end_t, bRealign);
         pos1 = result.pos1;
         pos2 = result.pos2;
-        //for(let i = pos1; i < pos2; ++i) {
-        for(let i = pos1; i <= pos2; ++i) {
+        for(let i = pos1; i < pos2; ++i) {
+        //for(let i = pos1; i <= pos2; ++i) {
             ic.alnChainsSeq[chainid2].push(gapResObject2);           
         }     
 
         return hAtoms;
     }
 
+    // used for seq MSA
+    mergeTwoSeqForAllSimple(targetId, chainidArray, index, alignedChainIndice, start_t, end_t, querySeqArray) { let ic = this.icn3d; ic.icn3dui;
+        let chainid1 = targetId;
+        let chainid2 = chainidArray[index];
+
+        let pos1, pos2, prevIndex1, prevIndex2;
+
+        for(let i = 0, il = ic.qt_start_end[index].length; i < il; ++i) {
+            let start1, start2, end1, end2, resiStart1, start1Pos, end1Pos;
+            
+            start1 = ic.qt_start_end[index][i].t_start;
+            start2 = ic.qt_start_end[index][i].q_start;
+            end1 = ic.qt_start_end[index][i].t_end;
+            end2 = ic.qt_start_end[index][i].q_end;  
+
+            // 1. before the mapped residues
+            //resiStart1 = ic.ParserUtilsCls.getResi(chainid1, start1);
+            resiStart1 = start1;
+            start1Pos = start1;
+            end1Pos = end1;
+
+            // if the mapping does not start from start_t, add gaps to the query seq
+            if(i == 0) {
+                pos1 = start_t;
+                pos2 = start1Pos;
+                
+                if(start1Pos > start_t) {
+                    for(let j = 0, jl = pos2 - pos1; j < jl; ++j) {
+                        ic.msaSeq[chainid2] += '-';
+                    }
+                }
+            }
+            else {
+                pos1 = prevIndex1;
+                pos2 = start1;
+                let notAlnLen1 = pos2 - (pos1 + 1);
+                let notAlnLen2 = start2 - (prevIndex2 + 1);
+                
+                // insert non-aligned residues in query seq
+                // this.insertNotAlignRes(chainid2, prevIndex2+1, notAlnLen2, bRealign);
+
+                for(let j = 0, jl = notAlnLen2; j < jl; ++j) {
+                    let resn = querySeqArray[index][prevIndex2+1 + j];
+                    ic.msaSeq[chainid2] += resn;
+                }
+
+                if(notAlnLen1 >= notAlnLen2) {
+                    // add gaps before the query sequence
+                    for(let j = 0, jl = notAlnLen1 - notAlnLen2; j < jl; ++j) {
+                        ic.msaSeq[chainid2] += '-';
+                    }                       
+                }
+                else {
+                    // check the number of gaps before resiStart1 (n), and insert 'notAlnLen2 - notAlnLen1 - n' gaps
+                    // this.addGapAllAlnChains(chainidArray, alignedChainIndice, chainid1, resiStart1, notAlnLen2 - notAlnLen1);
+
+                    // let result = this.getResiPosInTemplate(chainid1, resi_t);
+                    // let nGap = result.ngap, pos_t = result.pos;
+
+                    let pos_t = resiStart1; // position to add gap
+            
+                    // add gaps for all previously aligned sequences, not the current sequence, which is the last one
+                    for(let j = 0, jl = alignedChainIndice.length - 1; j < jl; ++j) {
+                        let chainidTmp = (j == 0) ? chainid1 : chainidArray[alignedChainIndice[j]];
+
+                        for(let k = 0, kl = notAlnLen2 - notAlnLen1; k < kl; ++k) {
+                            //ic.msaSeq[chainidTmp].splice(pos_t, 0, '-');
+                            ic.msaSeq[chainidTmp] = ic.msaSeq[chainidTmp].substr(0, pos_t) + '-' + ic.msaSeq[chainidTmp].substr(pos_t);
+                        }
+                    }
+                }                           
+            }
+
+            // 2. In the mapped residues
+            pos1 = start1Pos;
+            pos2 = end1Pos;
+            
+            let k = 0;    
+            for(let j = pos1; j <= pos2; ++j) {
+                // inherit the gaps from the template
+                if(ic.msaSeq[chainid1][j] == '-') {
+                    ic.msaSeq[chainid2] += '-';
+                }
+                else {
+                    //let resn1 = targetSeq[start1 + k];
+                    let resn2 = querySeqArray[index][start2 + k];
+                    //let resn2 = (querySeqArray[index]) ? querySeqArray[index][start2 + k] : '?';
+                    
+                    ic.msaSeq[chainid2] += resn2;
+
+                    ++k;
+                }
+            }
+            
+            prevIndex1 = end1;
+            prevIndex2 = end2;  
+        } 
+
+        // add gaps at the end
+        pos1 = prevIndex1;
+        pos2 = end_t;
+        for(let i = pos1; i < pos2; ++i) {
+        //for(let i = pos1; i <= pos2; ++i) {
+            ic.msaSeq[chainid2] += '-';           
+        }
+    }
+
     setSeqAlignForRealign(chainid_t, chainid, chainIndex) { let ic = this.icn3d, me = ic.icn3dui;
           //var chainid_t = ic.chainidArray[0];
 
@@ -61277,6 +62292,38 @@ class LoadScript {
     
             await ic.cartoon2dCls.draw2Dcartoon(type);
           }
+          else if(command.indexOf('add msa track') == 0) {
+            //add msa track | chainid " + chainid + " | startpos " + startpos + " | type " + type + " | fastaList " + fastaList 
+            let paraArray = command.split(' | ');
+    
+            let chainid = paraArray[1].substr(8);
+            let startpos = paraArray[2].substr(9);
+            let type = paraArray[3].substr(5);
+            let fastaList = paraArray[4].substr(10);
+
+            if($("#" + ic.pre + "anno_custom")[0]) {
+                $("#" + ic.pre + "anno_custom")[0].checked = true;
+            }
+            $("[id^=" + ic.pre + "custom]").show();
+
+            await ic.addTrackCls.addMsaTracks(chainid, startpos, type, fastaList);
+          }
+          else if(command.indexOf('add exon track') == 0) {
+            //add exon track | chainid " + chainid + " | geneid " + geneid + " | startpos " + startpos + " | type " + type
+            let paraArray = command.split(' | ');
+
+            let chainid = paraArray[1].substr(8);
+            let geneid = paraArray[2].substr(7);
+            let startpos = paraArray[3].substr(9);
+            let type = paraArray[4].substr(5);
+
+            if($("#" + ic.pre + "anno_custom")[0]) {
+                $("#" + ic.pre + "anno_custom")[0].checked = true;
+            }
+            $("[id^=" + ic.pre + "custom]").show();
+
+            await ic.addTrackCls.addExonTracks(chainid, geneid, startpos, type);
+          }
           else {
             await ic.applyCommandCls.applyCommand(ic.commands[i]);
           }
@@ -61989,12 +63036,18 @@ class SelectByCommand {
              residueStr = "*";
            }
            else if(colonPos2 != -1) {
-            refResStr = testStr.substr(colonPos2 + 5);
-            testStr = testStr.substr(0, colonPos2);
+              refResStr = testStr.substr(colonPos2 + 5);
+              testStr = testStr.substr(0, colonPos2);
+
+              // somehow sometimes refResStr or residueStr is rmpty
+              if(!refResStr) continue;
            }
            else if(colonPos != -1) {
-             residueStr = testStr.substr(colonPos + 1);
-             testStr = testStr.substr(0, colonPos);
+              residueStr = testStr.substr(colonPos + 1);
+              testStr = testStr.substr(0, colonPos);
+
+              // somehow sometimes refResStr or residueStr is rmpty
+              if(!residueStr) continue;
            }
 
            if(periodPos === -1) {
@@ -72383,7 +73436,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.27.0';
+    this.REVISION = '3.28.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;