icn3d 3.12.3 → 3.12.7

package/icn3d.module.js

@@ -12662,7 +12662,7 @@ class ShareLink {
            if(bPngHtml) url += "&random=" + parseInt(Math.random() * 1000); // generate a new shorten URL and thus image name everytime
            //var inputid =(ic.inputid) ? ic.inputid : "custom";
            let inputid = Object.keys(ic.structures).join('_');
-           if(inputid == 'STRU') {
+           if(inputid == 'stru') {
                if(ic.filename) {
                    inputid = ic.filename;
                }
@@ -17711,7 +17711,7 @@ class ViewInterPairs {
            ic.bGraph = true;
            // show only displayed set in 2D graph
            if(Object.keys(atomSet2).length + Object.keys(atomSet1).length > Object.keys(ic.dAtoms).length) {
-               ic.graphStr = ic.getGraphCls.getGraphDataForDisplayed();
+               ic.graphStr = ic.selectionCls.getGraphDataForDisplayed();
            }
 
            if(ic.bD3 === undefined) {
@@ -20394,13 +20394,14 @@ class Scap {
         //snp: 6M0J_E_484_K,6M0J_E_501_Y,6M0J_E_417_N
         let snpStr = '';
         let snpArray = snp.split(','); //stru_chain_resi_snp
-        let atomHash = {}, snpResidArray = [];
+        let atomHash = {}, snpResidArray = [], chainResi2pdb = {};
         for(let i = 0, il = snpArray.length; i < il; ++i) {
             let idArray = snpArray[i].split('_'); //stru_chain_resi_snp
 
             let resid = idArray[0] + '_' + idArray[1] + '_' + idArray[2];
             atomHash = me.hashUtilsCls.unionHash(atomHash, ic.residues[resid]);
             snpResidArray.push(resid);
+            chainResi2pdb[idArray[1] + '_' + idArray[2]] = '';
 
             snpStr += idArray[1] + '_' + idArray[2] + '_' + idArray[3];
             if(i != il -1) snpStr += ',';
@@ -20434,7 +20435,7 @@ class Scap {
 ///        let pdbStr = ic.saveFileCls.getPDBHeader() + ic.saveFileCls.getAtomPDB(ic.hAtoms);
         let pdbStr = ic.saveFileCls.getAtomPDB(ic.hAtoms);
 
-        let url = "https://www.ncbi.nlm.nih.gov/Structure/scap/scap.cgi";
+        let url = me.htmlCls.baseUrl + "scap/scap.cgi";
 
         let pdbid = Object.keys(ic.structures)[0]; //Object.keys(ic.structures).toString();
         let dataObj = {'pdb': pdbStr, 'snp': snpStr, 'pdbid': pdbid, 'v': '2'};
@@ -20474,19 +20475,64 @@ class Scap {
                   ic.chainsMapping[chainid][resid] = me.utilsCls.residueName2Abbr(atom.resn) + atom.resi;
               }
 
+              //ic.hAtoms = {};
+              //ic.loadPDBCls.loadPDB(pdbData, pdbid, false, false, bAddition);
+              //let hAtom2 = me.hashUtilsCls.cloneHash(ic.hAtoms);
+
+              // get the mutant pdb
+              let lines = pdbData.split('\n');
+              let allChainResiHash = {};
+              for (let i in lines) {
+                  let  line = lines[i];
+                  let  record = line.substr(0, 6);
+                  
+                  if (record === 'ATOM  ' || record === 'HETATM') {
+                      let  chain = line.substr(20, 2).trim();
+                      if(chain === '') chain = 'A';
+      
+                      let  resi = line.substr(22, 5).trim();
+                      let chainResi = chain + '_' + resi;
+                      
+                      if(chainResi2pdb.hasOwnProperty(chainResi)) {
+                          chainResi2pdb[chainResi] += line + '\n';
+                      }  
+
+                      allChainResiHash[chainResi] = 1;
+                  }
+              }
+
+              // get the full mutatnt PDB
+              let pdbDataMutant = ic.saveFileCls.getAtomPDB(ic.atoms, false, false, false, chainResi2pdb);
               ic.hAtoms = {};
-              ic.loadPDBCls.loadPDB(pdbData, pdbid, false, false, bAddition);
-              let hAtom2 = me.hashUtilsCls.cloneHash(ic.hAtoms);
+              let bMutation = true;
+              ic.loadPDBCls.loadPDB(pdbDataMutant, pdbid, false, false, bMutation, bAddition);
+              //let allAtoms2 = me.hashUtilsCls.cloneHash(ic.hAtoms);
+              
+              ic.setStyleCls.setAtomStyleByOptions(ic.opts);
+              ic.setColorCls.setColorByOptions(ic.opts, ic.hAtoms);
+
+              // get the mutant residues in the sphere
+              let hAtom2 = {};
+              for(let serial in ic.hAtoms) {
+                let atom = ic.atoms[serial];
+                let chainResi = atom.chain + '_' + atom.resi;
+                if(allChainResiHash.hasOwnProperty(chainResi)) {
+                  hAtom2[serial] = 1;
+                }
+              }
 
-              ic.hAtoms = me.hashUtilsCls.unionHash(ic.hAtoms, hAtom1);
-              ic.dAtoms = ic.hAtoms;
+              ic.hAtoms = me.hashUtilsCls.unionHash(hAtom1, hAtom2);
+              //ic.hAtoms = me.hashUtilsCls.unionHash(hAtom1, allAtoms2);
+              ic.dAtoms = me.hashUtilsCls.cloneHash(ic.hAtoms);
+              //ic.dAtoms = ic.hAtoms;
 
               ic.transformCls.zoominSelection();
               ic.setOptionCls.setStyle('proteins', 'stick');
 
-              ic.opts['color'] = 'chain';
-              ic.setColorCls.setColorByOptions(ic.opts, ic.dAtoms);
+              //ic.opts['color'] = 'chain';
+              //ic.setColorCls.setColorByOptions(ic.opts, ic.dAtoms);
               for(let serial in hAtom2) {
+              //for(let serial in allAtoms2) {
                   let atom = ic.atoms[serial];
                   if(!atom.het) {
                       // use the same color as the wild type
@@ -20513,13 +20559,19 @@ class Scap {
                   }
               }
 
+              // ic.hAtoms = me.hashUtilsCls.unionHash(hAtom1, hAtoms2);
+              // ic.dAtoms = me.hashUtilsCls.cloneHash(ic.hAtoms);
+              // //ic.dAtoms = ic.hAtoms;
+
+              // ic.transformCls.zoominSelection();
+              // ic.setOptionCls.setStyle('proteins', 'stick');
+
               if(bPdb) {
-                 let pdbStr = '';
-///                 pdbStr += ic.saveFileCls.getPDBHeader();
-                 pdbStr += ic.saveFileCls.getAtomPDB(ic.hAtoms);
+                 //let pdbStr = '';
+                 //pdbStr += ic.saveFileCls.getAtomPDB(ic.hAtoms);
 
                  let file_pref =(ic.inputid) ? ic.inputid : "custom";
-                 ic.saveFileCls.saveFile(file_pref + '_' + snpStr + '.pdb', 'text', [pdbStr]);
+                 ic.saveFileCls.saveFile(file_pref + '_' + snpStr + '.pdb', 'text', [pdbDataMutant]);
 
                  ic.drawCls.draw();
               }
@@ -21220,23 +21272,23 @@ class LoadPDB {
         }
         else {
             // remove the last structure
-            if(ic.alertAlt) {
-                let  nStru = ic.oriNStru + 1; //Object.keys(ic.structures).length;
-                let   chainArray = ic.structures[nStru - 1];
-                for(let i = 0, il = (chainArray) ? chainArray.length : 0; i < il; ++i) {
-                    for(let j in ic.chains[chainArray[i]]) {
-                        delete ic.atoms[j];
-                        delete ic.hAtoms[j];
-                        delete ic.dAtoms[j];
-                    }
-                    delete ic.chains[chainArray[i]];
-                }
-
-                delete ic.structures[nStru - 1];
-            }
-            else {
+            // if(ic.alertAlt) {
+            //     let  nStru = ic.oriNStru + 1; //Object.keys(ic.structures).length;
+            //     let   chainArray = ic.structures[nStru - 1];
+            //     for(let i = 0, il = (chainArray) ? chainArray.length : 0; i < il; ++i) {
+            //         for(let j in ic.chains[chainArray[i]]) {
+            //             delete ic.atoms[j];
+            //             delete ic.hAtoms[j];
+            //             delete ic.dAtoms[j];
+            //         }
+            //         delete ic.chains[chainArray[i]];
+            //     }
+
+            //     delete ic.structures[nStru - 1];
+            // }
+            // else {
                 ic.oriNStru = (ic.structures) ? Object.keys(ic.structures).length : 0;
-            }
+            // }
 
             moleculeNum = ic.oriNStru + 1; //Object.keys(ic.structures).length + 1;
             // Concatenation of two pdbs will have several atoms for the same serial
@@ -21253,12 +21305,12 @@ class LoadPDB {
 
         //let  chainMissingResidueArray = {}
 
-        let  id = (pdbid) ? pdbid : 'STRU';
+        let  id = (pdbid) ? pdbid : 'stru';
 
         let prevMissingChain = '';
         let  CSerial, prevCSerial, OSerial, prevOSerial;
 
-        let  structure = "STRU";
+        let  structure = "stru";
 
         let bHeader = false;
 
@@ -21274,18 +21326,19 @@ class LoadPDB {
 
                 if(id == '') {
                     if(bAppend) {
-                        id = "STRU";
+                        id = "stru";
                     }
                     else {
-                        //if(!ic.inputid) ic.inputid = 'STRU';
-                        id = (ic.inputid && ic.inputid.indexOf('/') == -1) ? ic.inputid.substr(0, 10) : "STRU"; //ic.filename.substr(0, 4);
+                        //if(!ic.inputid) ic.inputid = 'stru';
+                        id = (ic.inputid && ic.inputid.indexOf('/') == -1) ? ic.inputid.substr(0, 10) : "stru"; //ic.filename.substr(0, 4);
                     }
                 }
 
                 structure = id;
 
-                //if(id == 'STRU' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
-                if(id == 'STRU' || bMutation) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation) { // bMutation: side chain prediction
+                if(id == 'stru') {
                         structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
                 }
 
@@ -21355,17 +21408,17 @@ class LoadPDB {
                 ic.ssbondpnts[id].push(resid1);
                 ic.ssbondpnts[id].push(resid2);
             } else if (record === 'REMARK') {
-                 let  type = parseInt(line.substr(7, 3));
+                 let  remarkType = parseInt(line.substr(7, 3));
 
                  if(line.indexOf('1/2 of bilayer thickness:') !== -1) { // OPM transmembrane protein
                     ic.halfBilayerSize = parseFloat(line.substr(line.indexOf(':') + 1).trim());
                  }
-                 else if (type == 210) {
+                 else if (remarkType == 210) {
                      if((line.substr(11, 32).trim() == 'EXPERIMENT TYPE') && line.substr(45).trim() == 'NMR') {
                         bNMR = true;
                      }
                  }
-                 else if (type == 350 && line.substr(13, 5) == 'BIOMT') {
+                 else if (remarkType == 350 && line.substr(13, 5) == 'BIOMT') {
                     let  n = parseInt(line[18]) - 1;
                     //var m = parseInt(line.substr(21, 2));
                     let  m = parseInt(line.substr(21, 2)) - 1; // start from 1
@@ -21377,7 +21430,7 @@ class LoadPDB {
                     ic.biomtMatrices[m].elements[n + 12] = parseFloat(line.substr(54, 14));
                  }
                  // missing residues
-                 else if (type == 465 && line.substr(18, 1) == ' ' && line.substr(20, 1) == ' ' && line.substr(21, 1) != 'S') {
+                 else if (remarkType == 465 && line.substr(18, 1) == ' ' && line.substr(20, 1) == ' ' && line.substr(21, 1) != 'S') {
                     let  resn = line.substr(15, 3);
                     //let  chain = line.substr(19, 1);
                     let  chain = line.substr(18, 2).trim();
@@ -21403,7 +21456,7 @@ class LoadPDB {
                     }
 
                  }
-                 else if (type == 900 && ic.emd === undefined && line.substr(34).trim() == 'RELATED DB: EMDB') {
+                 else if (remarkType == 900 && ic.emd === undefined && line.substr(34).trim() == 'RELATED DB: EMDB') {
                      //REMARK 900 RELATED ID: EMD-3906   RELATED DB: EMDB
                      ic.emd = line.substr(23, 11).trim();
                  }
@@ -21413,11 +21466,12 @@ class LoadPDB {
                 ic.organism = ic.organism.substr(0, ic.organism.length - 1);
             } else if (record === 'ENDMDL') {
                 ++moleculeNum;
-                id = 'STRU';
+                id = 'stru';
 
                 structure = id;
-                //if(id == 'STRU' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
-                if(id == 'STRU' || bMutation) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation) { // bMutation: side chain prediction
+                if(id == 'stru') {
                         structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
                 }
 
@@ -21439,8 +21493,9 @@ class LoadPDB {
                 }
             } else if (record === 'ATOM  ' || record === 'HETATM') {
                 structure = id;
-                //if(id == 'STRU' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
-                if(id == 'STRU' || bMutation) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation || (bAppend && id.length != 4)) { // bMutation: side chain prediction
+                //if(id == 'stru' || bMutation) { // bMutation: side chain prediction
+                if(id == 'stru') {
                         structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
                 }
 
@@ -21692,23 +21747,9 @@ class LoadPDB {
         // remove the reference
         lines = null;
 
-        let curChain, curResi, curResAtoms = [];
-        // refresh for atoms in each residue
-        let  refreshBonds = function(f) {
-            let  n = curResAtoms.length;
-            for (let j = 0; j < n; ++j) {
-                let  atom0 = curResAtoms[j];
-                for (let k = j + 1; k < n; ++k) {
-                    let  atom1 = curResAtoms[k];
-                    if (atom0.alt === atom1.alt && me.utilsCls.hasCovalentBond(atom0, atom1)) {
-                    //if (me.utilsCls.hasCovalentBond(atom0, atom1)) {
-                        atom0.bonds.push(atom1.serial);
-                        atom1.bonds.push(atom0.serial);
-                    }
-                }
-                f && f(atom0);
-            }
-        };
+        let firstAtom = ic.firstAtomObjCls.getFirstAtomObj(ic.hAtoms);
+        let curChain = firstAtom.chain, curResi = firstAtom.resi, curResAtoms = [];
+      
         let  pmin = new THREE.Vector3( 9999, 9999, 9999);
         let  pmax = new THREE.Vector3(-9999,-9999,-9999);
         let  psum = new THREE.Vector3();
@@ -21718,7 +21759,9 @@ class LoadPDB {
         let  lipidResidHash = {};
 
         // assign atoms
-        for (let i in ic.atoms) {
+        let prevCarbonArray = [firstAtom]; // add a dummy atom
+        //for (let i in ic.atoms) {
+        for (let i in ic.hAtoms) {    
             let  atom = ic.atoms[i];
             let  coord = atom.coord;
             psum.add(coord);
@@ -21767,22 +21810,28 @@ class LoadPDB {
               atom.color = me.parasCls.atomColors[atom.elem];
             }
 
-            if (!(curChain === atom.chain && curResi === atom.resi)) {
-                // a new residue, add the residue-residue bond beides the regular bonds
-                refreshBonds(function (atom0) {
-                    if (((atom0.name === 'C' && atom.name === 'N') || (atom0.name === 'O3\'' && atom.name === 'P')) && me.utilsCls.hasCovalentBond(atom0, atom)) {
-                        atom0.bonds.push(atom.serial);
-                        atom.bonds.push(atom0.serial);
-                    }
-                });
+            if(!(curChain === atom.chain && curResi === atom.resi)) {
+                // a new residue, add the residue-residue bond beides the regular bonds               
+                this.refreshBonds(curResAtoms, prevCarbonArray[0]);
+
+                prevCarbonArray.splice(0, 1); // remove the first carbon
+
                 curChain = atom.chain;
                 curResi = atom.resi;
                 //curInsc = atom.insc;
                 curResAtoms.length = 0;
             }
             curResAtoms.push(atom);
+
+            if(atom.name === 'C' || atom.name === 'O3\'') {
+                prevCarbonArray.push(atom);
+            }
         } // end of for
 
+        // last residue
+        //refreshBonds();
+        this.refreshBonds(curResAtoms, prevCarbonArray[0]);
+
         // reset lipid
         for(let resid in lipidResidHash) {
             let  atomHash = ic.residues[resid];
@@ -21799,9 +21848,6 @@ class LoadPDB {
             }
         }
 
-        // last residue
-        refreshBonds();
-
         ic.pmin = pmin;
         ic.pmax = pmax;
 
@@ -21837,6 +21883,28 @@ class LoadPDB {
         }
     }
 
+    // refresh for atoms in each residue
+    refreshBonds(curResAtoms, prevCarbon) { let  ic = this.icn3d, me = ic.icn3dui;
+        let  n = curResAtoms.length;
+        for (let j = 0; j < n; ++j) {
+            let  atom0 = curResAtoms[j];
+            for (let k = j + 1; k < n; ++k) {
+                let  atom1 = curResAtoms[k];
+                if (atom0.alt === atom1.alt && me.utilsCls.hasCovalentBond(atom0, atom1)) {
+                //if (me.utilsCls.hasCovalentBond(atom0, atom1)) {
+                    atom0.bonds.push(atom1.serial);
+                    atom1.bonds.push(atom0.serial);
+                }
+            }
+
+            //f && f(atom0);
+            if (prevCarbon && (prevCarbon.name === 'C' || prevCarbon.name === 'O3\'') && (atom0.name === 'N' || atom0.name === 'P') && me.utilsCls.hasCovalentBond(atom0, prevCarbon)) {
+                atom0.bonds.push(prevCarbon.serial);
+                prevCarbon.bonds.push(atom0.serial);
+            }
+        }
+    }
+
     adjustSeq(chainMissingResidueArray) { let ic = this.icn3d; ic.icn3dui;
         // adjust sequences
         for(let chainNum in ic.chainsSeq) {
@@ -22139,12 +22207,13 @@ class LoadAtomData {
         else { // mmdbid or mmcifid
             if(data.descr !== undefined) ic.molTitle += data.descr.name;
             if(type === 'mmdbid') {
-              let  pdbidTmp = data.pdbId;
+              let  pdbidTmp = (isNaN(id)) ? id : data.pdbId;
               let  chainHash = {};
 
               if(ic.alignmolid2color === undefined) ic.alignmolid2color = [];
 
               let  molidCnt = 1;
+           
               for(let molid in data.moleculeInfor) {
                   if(Object.keys(data.moleculeInfor[molid]).length === 0) continue;
 
@@ -22159,11 +22228,10 @@ class LoadAtomData {
                       chainHash[chain] = 1;
                   }
 
-                  if(((ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t)) && alignType === 'query') {
-                      //chainid += me.htmlCls.postfix;
-                      chainid = pdbidTmp + me.htmlCls.postfix + '_' + chain;
-                  }
+                  if(((ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t)) && alignType === 'query') ;
 
+                  //if(chainidInput && chainidInput.substr(chainidInput.indexOf('_') + 1) == chain) chainid = chainidInput;
+ 
                   let  kind = data.moleculeInfor[molid].kind;
                   let  color = data.moleculeInfor[molid].color;
                   let  sid = data.moleculeInfor[molid].sid;
@@ -22229,7 +22297,7 @@ class LoadAtomData {
             let  bSetResi = false;
 
             //if(mmdbId !== prevmmdbId) resiArray = [];
-            if(atm.chain === undefined &&(type === 'mmdbid' || type === 'align')) {
+            if(atm.chain === undefined && (type === 'mmdbid' || type === 'align')) {
                 if(type === 'mmdbid') {
                   molid = atm.ids.m;
 
@@ -22295,14 +22363,13 @@ class LoadAtomData {
                 atm.structure = mmdbId;
 
                 if(type === 'mmdbid' &&((ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t))
-                  && alignType === 'query') {
-                    atm.structure += me.htmlCls.postfix;
-                }
+                  && alignType === 'query') ;
             }
 
             structureNum = atm.structure;
 
             chainNum = structureNum + '_' + atm.chain;
+
             //if(ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t && alignType === 'query') chainNum += me.htmlCls.postfix;
 
             //var resiCorrection = 0;
@@ -22605,10 +22672,7 @@ class LoadAtomData {
                     let  seqArray = data.sequences[chain];
                     let  chainid = id + '_' + chain;
 
-                    if(((ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t)) && alignType === 'query') {
-                        //chainid += me.htmlCls.postfix;
-                        chainid = id + me.htmlCls.postfix + '_' + chain;
-                    }
+                    if(((ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t)) && alignType === 'query') ;
 
                     ic.ParserUtilsCls.getMissingResidues(seqArray, type, chainid); // assign ic.chainsSeq
                 }
@@ -22663,6 +22727,7 @@ class LoadAtomData {
 
             ic.loadPDBCls.setSsbond();
         }
+        
         if(type === 'mmdbid' && Object.keys(ic.structures).length == 1) {
             let  disulfideArray = data.disulfides;
 
@@ -24759,7 +24824,7 @@ class OpmParser {
         let  thisClass = this;
         let  url, dataType;
 
-        if(!pdbid) pdbid = 'STRU';
+        if(!pdbid) pdbid = 'stru';
 
         url = "https://www.ncbi.nlm.nih.gov/Structure/mmdb/mmdb_strview.cgi?v=2&program=icn3d&opm&uid=" + pdbid.toLowerCase();
         dataType = "jsonp";
@@ -24957,6 +25022,7 @@ class MmdbParser {
             this.parseMmdbDataPart1(data, type);
 
             let  id =(data.pdbId !== undefined) ? data.pdbId : data.mmdbId;
+            if(chainid) id = chainid.substr(0, chainid.indexOf('_'));
 
             let  hAtoms = ic.loadAtomDataCls.loadAtomDataIn(data, id, 'mmdbid', undefined, type, chainid, chainIndex, bLastQuery, bNoTransformNoSeqalign);
 
@@ -25380,12 +25446,19 @@ class RealignParser {
 
       ic.opts['color'] = 'grey';
       ic.setColorCls.setColorByOptions(ic.opts, ic.dAtoms);
-
-      for(let index = 0, indexl = chainidArray.length - 1; index < indexl; ++index) {
-          let chainpair = chainidArray[0] + ',' + chainidArray[index + 1];
+      
+      for(let index = 0, indexl = chainidArray.length - 1; index < indexl; ++index) {         
           let  fromStruct = chainidArray[index + 1].substr(0, chainidArray[index + 1].indexOf('_')); //.toUpperCase();
 
-          if(toStruct == fromStruct) fromStruct += me.htmlCls.postfix;
+          //if(toStruct == fromStruct) fromStruct += me.htmlCls.postfix;
+
+          let  chainTo = toStruct + chainidArray[0].substr(chainidArray[0].indexOf('_'));
+          let  chainFrom = fromStruct + chainidArray[index + 1].substr(chainidArray[index + 1].indexOf('_'));
+
+          chainidArray[0] = chainTo;
+          chainidArray[index + 1] = chainFrom;
+
+          let chainpair =  chainTo + ',' + chainFrom;
 
           if(!struct2SeqHash[chainpair]) continue;
 
@@ -25406,11 +25479,9 @@ class RealignParser {
               ic.realignResid[fromStruct].push({'resid':residArray2[i], 'resn':seq2[i]});
           }
 
-          let  chainTo = chainidArray[0];
-          let  chainFrom = chainidArray[index + 1];
-
           let  bChainAlign = true;
           // set ic.qt_start_end in alignCoords()
+
           let  hAtomsTmp = ic.ParserUtilsCls.alignCoords(coord2, coord1, fromStruct, undefined, chainTo, chainFrom, index + 1, bChainAlign);
           hAtoms = me.hashUtilsCls.unionHash(hAtoms, hAtomsTmp);
       }
@@ -25446,7 +25517,13 @@ class RealignParser {
           let  fromStruct = chainidArray[index + 1].substr(0, chainidArray[index + 1].indexOf('_')); //.toUpperCase();
           if(!bRealign) fromStruct = fromStruct.toUpperCase();
 
-          if(toStruct == fromStruct) fromStruct += me.htmlCls.postfix;
+          //if(toStruct == fromStruct) fromStruct += me.htmlCls.postfix;
+
+          let  chainTo = toStruct + chainidArray[0].substr(chainidArray[0].indexOf('_'));
+          let  chainFrom = fromStruct + chainidArray[index + 1].substr(chainidArray[index + 1].indexOf('_'));
+
+          chainidArray[0] = chainTo;
+          chainidArray[index + 1] = chainFrom;
 
           let  seq1 = struct2SeqHash[toStruct];
           let  seq2 = struct2SeqHash[fromStruct];
@@ -25504,8 +25581,8 @@ class RealignParser {
                   }
               }
 
-              let  chainTo = chainidArray[0];
-              let  chainFrom = chainidArray[index + 1];
+              //let  chainTo = chainidArray[0];
+              //let  chainFrom = chainidArray[index + 1];
 
               let  bChainAlign = true;
               let  hAtomsTmp = ic.ParserUtilsCls.alignCoords(coordsFrom, coordsTo, fromStruct, undefined, chainTo, chainFrom, index + 1, bChainAlign);
@@ -25539,7 +25616,7 @@ class RealignParser {
         // align seq
         //ic.hAtoms = ic.chainalignParserCls.setMsa(chainidArray, bRealign);
         ic.hAtoms = ic.chainalignParserCls.setMsa(chainidArray);
-        
+
         ic.transformCls.zoominSelection();
 
 
@@ -25549,12 +25626,13 @@ class RealignParser {
         ic.opts['color'] = 'identity';
         //ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
         ic.setColorCls.setColorByOptions(ic.opts, ic.hAtoms);
-
+        
         let name = 'protein_aligned';
         ic.selectionCls.saveSelection(name, name);
-
+        
         ic.drawCls.draw();
         ic.hlUpdateCls.updateHlAll();
+               
         if(ic.deferredRealign !== undefined) ic.deferredRealign.resolve();
       }
       else {
@@ -25691,9 +25769,6 @@ class RealignParser {
             if(i == 0) {
                 mmdbid_t = mmdbid;
             }
-            else if(mmdbid_t == mmdbid) {
-                mmdbid += me.htmlCls.postfix;
-            }
 
             let  chainid = mmdbid + chainidArray[i].substr(pos);
             if(i == 0) chainid_t = chainid;
@@ -25701,7 +25776,6 @@ class RealignParser {
             if(!ic.chainsSeq[chainid]) {
                 //alert("Please select one chain per structure and try it again...");
                 //return;
-
                 continue;
             }
 
@@ -25739,8 +25813,8 @@ class RealignParser {
 
                     // slave
                     resiArray = predefinedResPair[1].split(",");
-                    result = thisClass.getSeqCoorResid(resiArray, chainid, base);
-                    
+                    result = thisClass.getSeqCoorResid(resiArray, chainid, base); 
+
                     if(!struct2SeqHash[chainidpair][mmdbid]) struct2SeqHash[chainidpair][mmdbid] = '';
                     if(!struct2CoorHash[chainidpair][mmdbid]) struct2CoorHash[chainidpair][mmdbid] = [];
                     if(!struct2resid[chainidpair][mmdbid]) struct2resid[chainidpair][mmdbid] = [];
@@ -25905,8 +25979,11 @@ class RealignParser {
         let  bFound = false;
         for(let serial in ic.residues[resid]) {
             let  atom = ic.atoms[serial];
-            if((ic.proteins.hasOwnProperty(serial) && atom.name == "CA" && atom.elem == "C")
-              ||(ic.nucleotides.hasOwnProperty(serial) &&(atom.name == "O3'" || atom.name == "O3*") && atom.elem == "O") ) {
+
+            //if((ic.proteins.hasOwnProperty(serial) && atom.name == "CA" && atom.elem == "C")
+            //  ||(ic.nucleotides.hasOwnProperty(serial) &&(atom.name == "O3'" || atom.name == "O3*") && atom.elem == "O") ) {
+            if((atom.name == "CA" && atom.elem == "C")
+              ||((atom.name == "O3'" || atom.name == "O3*") && atom.elem == "O") ) {
                 struct2CoorArray.push(atom.coord.clone());
                 bFound = true;
                 break;
@@ -25934,7 +26011,7 @@ class ChainalignParser {
         let mmdbid_t, mmdbid_q;
         mmdbid_t = chainidArray[0].substr(0, chainidArray[0].indexOf('_'));
         let  bLastQuery = false;
-        if(mmdbid_t.length > 4) { 
+        if(mmdbid_t.length > 5) { 
             let bAppend = false, bNoDssp = true;
             hAtoms = ic.pdbParserCls.loadPdbData(data1, mmdbid_t, false, bAppend, 'target', bLastQuery, bNoDssp);
         }
@@ -25947,7 +26024,10 @@ class ChainalignParser {
             if(i == data2Array.length - 1) bLastQuery = true;
             // each alignment has a chainIndex i
             mmdbid_q = chainidArray[i + 1].substr(0, chainidArray[i + 1].indexOf('_'));
-            if(mmdbid_q.length > 4) {
+            //mmdbid_q = (mmdbid_q_tmp.length == 5) ? mmdbid_q_tmp.substr(0, 4) : mmdbid_q_tmp; // added postfixfor same PDB IDs
+
+            //if(mmdbid_q.length > 4) {
+            if(mmdbid_q.length > 5) {  // PDB ID plus postfix could be 5 
                 let bAppend = true, bNoDssp = true;
                 hAtomsTmp = ic.pdbParserCls.loadPdbData(data2Array[i], mmdbid_q, false, bAppend, 'query', bLastQuery, bNoDssp);
             }
@@ -26385,10 +26465,21 @@ class ChainalignParser {
         let domainArray = (me.cfg.domainids) ? me.cfg.domainids.split(',') : [];
         if(domainArray.length < alignArray.length) domainArray = [];
 
+        let struct2cnt = {};
         for(let i = 0, il = alignArray.length; i < il; ++i) {
             let  chainid = alignArray[i];
             let  pos = chainid.indexOf('_');
-            alignArray[i] = chainid.substr(0, pos).toUpperCase() + chainid.substr(pos);
+            let struct = chainid.substr(0, pos).toUpperCase();
+            if(!struct2cnt.hasOwnProperty(struct)) {
+                struct2cnt[struct] = 1;
+            }
+            else {
+                ++struct2cnt[struct];
+            }
+
+            struct = (struct2cnt[struct] == 1) ? struct : struct + struct2cnt[struct];
+
+            alignArray[i] = struct + chainid.substr(pos);
         }
 
         ic.chainidArray = alignArray;
@@ -26401,7 +26492,7 @@ class ChainalignParser {
         let  targetAjax;
 
         let  url_t;
-        if(ic.mmdbid_t.length > 4) {
+        if(ic.mmdbid_t.length > 5) {
             url_t = "https://alphafold.ebi.ac.uk/files/AF-" + ic.mmdbid_t + "-F1-model_v2.pdb";
 
             targetAjax = $.ajax({
@@ -26433,11 +26524,13 @@ class ChainalignParser {
         ic.pdbChainIndexHash = {};
         for(let index = 1, indexLen = alignArray.length; index < indexLen; ++index) {
             let  pos2 = alignArray[index].indexOf('_');
-            ic.mmdbid_q = alignArray[index].substr(0, pos2).toUpperCase();
+            let mmdbid_q_tmp = alignArray[index].substr(0, pos2).toUpperCase();
+            ic.mmdbid_q = (mmdbid_q_tmp.length == 5) ? mmdbid_q_tmp.substr(0, 4) : mmdbid_q_tmp; // added postfix for same PDB IDs
+
             ic.chain_q = alignArray[index].substr(pos2+1);
 
             let  url_q, queryAjax;
-            if(ic.mmdbid_q.length > 4) {
+            if(ic.mmdbid_q.length > 5) {
                 url_q = "https://alphafold.ebi.ac.uk/files/AF-" + ic.mmdbid_q + "-F1-model_v2.pdb";
 
                 queryAjax = $.ajax({
@@ -26462,7 +26555,9 @@ class ChainalignParser {
         
         for(let index = 1, indexLen = alignArray.length; index < indexLen; ++index) {
             let  pos2 = alignArray[index].indexOf('_');
-            ic.mmdbid_q = alignArray[index].substr(0, pos2).toUpperCase();
+            let mmdbid_q_tmp = alignArray[index].substr(0, pos2).toUpperCase();
+            ic.mmdbid_q = (mmdbid_q_tmp.length == 5) ? mmdbid_q_tmp.substr(0, 4) : mmdbid_q_tmp; // added postfix for same PDB IDs
+
             ic.chain_q = alignArray[index].substr(pos2+1);
 
             if(!me.cfg.resnum && !me.cfg.resdef) {
@@ -26487,7 +26582,7 @@ class ChainalignParser {
 
                     ajaxArray.push(alignAjax);
 
-                    ic.pdbChainIndexHash[index] = ic.mmdbid_q + "_" + ic.chain_q + "_" + ic.mmdbid_t + "_" + ic.chain_t;
+                    ic.pdbChainIndexHash[index] = mmdbid_q_tmp + "_" + ic.chain_q + "_" + ic.mmdbid_t + "_" + ic.chain_t;
                 }
                 else {
                     // get the dynamic alignment after loading the structures
@@ -26517,7 +26612,7 @@ class ChainalignParser {
         // index = 0: the mmdb data of target
         let  targetData = dataArray[0][0];
         let header = 'HEADER                                                        ' + mmdbid_t + '\n';
-        if(mmdbid_t.length > 4) targetData = header + targetData;
+        if(mmdbid_t.length > 5) targetData = header + targetData;
 
         ic.t_trans_add = [];
         ic.q_trans_sub = [];
@@ -26536,7 +26631,7 @@ class ChainalignParser {
             let  mmdbid_q = chainidArray[index].substr(0, pos).toUpperCase();
 
             let header = 'HEADER                                                        ' + mmdbid_q + '\n';
-            if(mmdbid_q.length > 4) queryData = header + queryData;
+            if(mmdbid_q.length > 5) queryData = header + queryData;
 
             if(queryData !== undefined && JSON.stringify(queryData).indexOf('Oops there was a problem') === -1
                 ) {
@@ -26711,9 +26806,9 @@ class ChainalignParser {
     }
 
     downloadMmdbAf(idlist, bQuery) { let  ic = this.icn3d, me = ic.icn3dui;
-      let  thisClass = this;
+        let  thisClass = this;
 
-      ic.deferredMmdbaf = $.Deferred(function() {
+        ic.deferredMmdbaf = $.Deferred(function() {
         ic.structArray = idlist.split(',');
 
         let  ajaxArray = [];
@@ -26722,7 +26817,7 @@ class ChainalignParser {
             let  url_t, targetAjax;
             let structure = ic.structArray[i];
 
-            if(isNaN(structure) && structure.length > 4) {
+            if(isNaN(structure) && structure.length > 5) {
                 url_t = "https://alphafold.ebi.ac.uk/files/AF-" + ic.structArray[i] + "-F1-model_v2.pdb";
 
                 targetAjax = $.ajax({
@@ -26771,7 +26866,7 @@ class ChainalignParser {
         for(let index = 0, indexl = structArray.length; index < indexl; ++index) {
             let  queryData = dataArray[index][0];
             let header = 'HEADER                                                        ' + structArray[index] + '\n';
-            if(structArray[index].length > 4) queryData = header + queryData;
+            if(structArray[index].length > 5) queryData = header + queryData;
 
             if(queryData !== undefined && JSON.stringify(queryData).indexOf('Oops there was a problem') === -1
                 ) {
@@ -26801,7 +26896,8 @@ class ChainalignParser {
                 bAppend = true; 
             }
 
-            if(structArray[i].length > 4) {
+            //if(structArray[i].length > 4) {
+            if(structArray[i].length > 5) {  // PDB ID plus postfix could be 5 
                 let bNoDssp = true;
                 hAtomsTmp = ic.pdbParserCls.loadPdbData(queryDataArray[i], structArray[i], false, bAppend, targetOrQuery, bLastQuery, bNoDssp);
             }
@@ -28772,7 +28868,7 @@ class LoadScript {
           me.cfg.mmcifid = id;
           ic.mmcifParserCls.downloadMmcif(id);
         }
-        else if(command.indexOf('load mmdb') !== -1 || command.indexOf('load mmdb1') !== -1) {
+        else if(command.indexOf('load mmdb ') !== -1 || command.indexOf('load mmdb1 ') !== -1) {
           me.cfg.mmdbid = id;
           me.cfg.bu = 1;
 
@@ -28788,13 +28884,13 @@ class LoadScript {
             me.cfg.mmdbafid = id;
             me.cfg.bu = 1;
   
-            ic.mmdbParserCls.downloadMmdbAf(id);
+            ic.chainalignParserCls.downloadMmdbAf(id);
         }
         else if(command.indexOf('load mmdbaf0') !== -1) {
             me.cfg.mmdbafid = id;
             me.cfg.bu = 0;
 
-            ic.mmdbParserCls.downloadMmdbAf(id);
+            ic.chainalignParserCls.downloadMmdbAf(id);
         }
         else if(command.indexOf('load gi') !== -1) {
           me.cfg.gi = id;
@@ -31439,7 +31535,7 @@ class AddTrack {
 
            //this.showNewTrack(chainid, title, text);
            //me.htmlCls.clickMenuCls.setLogCmd("add track | chainid " + chainid + " | title " + title + " | text " + this.simplifyText(text), true);
-           let result = this.getFullText(text);
+           let result = thisClass.getFullText(text);
 
            thisClass.showNewTrack(chainid, title,  result.text, undefined, undefined, 'custom', undefined, undefined, result.fromArray, result.toArray);
 
@@ -32529,7 +32625,19 @@ class AnnoCddSite {
                             }
                         }
                     }
-                    let htmlTmp2 = '<div class="icn3d-seqTitle icn3d-link icn3d-blue" site="site" posarray="' + adjustedResPosArray.toString() + '" shorttitle="' + title + '" setname="' + chnid + '_site_' + index + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
+
+                    let bCoordinates = false;
+                    for(let i = 0, il = adjustedResPosArray.length; i < il; ++i) {
+                        let resid = chnid + "_" + adjustedResPosArray[i];
+                        if(ic.residues.hasOwnProperty(resid)) {
+                            bCoordinates = true;
+                            break;
+                        }
+                    }
+    
+                    let linkStr = (bCoordinates) ? 'icn3d-link icn3d-blue' : '';
+
+                    let htmlTmp2 = '<div class="icn3d-seqTitle ' + linkStr + '" site="site" posarray="' + adjustedResPosArray.toString() + '" shorttitle="' + title + '" setname="' + chnid + '_site_' + index + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
                     let htmlTmp3 = '<span class="icn3d-residueNum" title="residue count">' + resCnt.toString() + ' Res</span>';
                     let htmlTmp = '<span class="icn3d-seqLine">';
                     html3 += htmlTmp2 + htmlTmp3 + '<br>';
@@ -32685,7 +32793,25 @@ class AnnoCddSite {
                 if(bDomain) pssmid2fromArray[pssmid] = fromArray;
                 if(bDomain) pssmid2toArray[pssmid] = toArray;
 
-                let htmlTmp2 = '<div class="icn3d-seqTitle icn3d-link icn3d-blue" ' + type + '="' + acc + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" setname="' + setname + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
+                let bCoordinates = false;
+                for(let i = 0, il = fromArray.length; i < il; ++i) {
+                    let from = fromArray[i], to = toArray[i];
+                    for(let j = from; j <= to; ++j) {
+                        let resid = chnid + "_" + j;
+                        if(ic.residues.hasOwnProperty(resid)) {
+                            bCoordinates = true;
+                            break;
+                        }
+                    }
+
+                    if(bCoordinates) {
+                        break;
+                    }
+                }
+
+                let linkStr = (bCoordinates) ? 'icn3d-link icn3d-blue' : '';
+
+                let htmlTmp2 = '<div class="icn3d-seqTitle ' + linkStr + '" ' + type + '="' + acc + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" setname="' + setname + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
                 let htmlTmp3 = '<span class="icn3d-residueNum" title="residue count">' + resCnt.toString() + ' Res</span>';
                 html3 += htmlTmp2 + htmlTmp3 + '<br>';
                 let htmlTmp = '<span class="icn3d-seqLine">';
@@ -32693,7 +32819,7 @@ class AnnoCddSite {
                 if(bDomain) {
                     html2 += '<div style="width:20px; display:inline-block;"><span id="' + ic.pre + chnid + '_' + acc + '_' + r + '_cddseq_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="' + ic.pre + chnid + '_' + acc + '_' + r + '_cddseq_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div>';
                 }
-                html2 += '<div style="width:' + titleSpace + 'px!important;" class="icn3d-seqTitle icn3d-link icn3d-blue" ' + type + '="' + acc + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + title + ' </div>';
+                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();
                 for(let i = 0, il = ic.giSeq[chnid].length; i < il; ++i) {
@@ -32719,7 +32845,7 @@ class AnnoCddSite {
                     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);
                         html2 += '<div style="display:inline-block; width:' + emptyWidth + 'px;">&nbsp;</div>';
-                        html2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray[i] - fromArray[i] + 1) / ic.maxAnnoLength) + 'px;" class="icn3d-seqTitle icn3d-link icn3d-blue" domain="' +(index+1).toString() + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" id="' + chnid + '_domain_' + index + '_' + r + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + domain + ' </div>';
+                        html2 += '<div style="display:inline-block; color:white!important; font-weight:bold; background-color:#' + color + '; width:' + Math.round(ic.seqAnnWidth *(toArray[i] - fromArray[i] + 1) / ic.maxAnnoLength) + 'px;" class="icn3d-seqTitle ' + linkStr + '" domain="' +(index+1).toString() + '" from="' + fromArray + '" to="' + toArray + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" id="' + chnid + '_domain_' + index + '_' + r + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + domain + ' </div>';
                     }
                 }
                 else { // with potential gaps
@@ -32738,7 +32864,7 @@ class AnnoCddSite {
                         html2 += 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));
                         html2 += '<div style="display:inline-block; width:' + emptyWidth + 'px;">&nbsp;</div>';
-                        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" domain="' +(index+1).toString() + '" from="' + fromArray2 + '" to="' + toArray2 + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" id="' + chnid + '_domain_' + index + '_' + r + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + domain + ' </div>';
+                        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 ' + linkStr + '" domain="' +(index+1).toString() + '" from="' + fromArray2 + '" to="' + toArray2 + '" shorttitle="' + title + '" index="' + index + '" setname="' + setname + '" id="' + chnid + '_domain_' + index + '_' + r + '" anno="sequence" chain="' + chnid + '" title="' + fulltitle + '">' + domain + ' </div>';
                     }
                 }
                 htmlTmp = '<span class="icn3d-residueNum" title="residue count">&nbsp;' + resCnt.toString() + ' Residues</span>';
@@ -35801,14 +35927,14 @@ class SetSeqAlign {
                   let  residueid2 = chainid2 + '_' + resi;
                   let  ss1 = ic.secondaries[residueid1];
                   let  ss2 = ic.secondaries[residueid2];
-                  if(ss2 !== undefined) {
+                  if(ss2) {
                       ic.alnChainsAnno[chainid1][0].push(ss2);
                   }
                   else {
                       ic.alnChainsAnno[chainid1][0].push('-');
                   }
 
-                  if(ss1 !== undefined) {
+                  if(ss1) {
                       ic.alnChainsAnno[chainid1][1].push(ss1);
                   }
                   else {
@@ -35825,7 +35951,7 @@ class SetSeqAlign {
                   ic.alnChainsAnno[chainid1][3].push(numberStr); // symbol: 10, 20, etc, empty for rest
 
                   ++alignIndex;
-              } // end for(let j
+              } // end for(let j           
           } // end for(let i
 
           seqalign = {};
@@ -35858,11 +35984,6 @@ class SetSeqAlign {
                 let  chainLen = ic.chainsSeq[mmdbid2 + '_' + chain2].length;
                 ic.qt_start_end[chainIndex] =  {"q_start":1, "q_end": chainLen, "t_start":1, "t_end": chainLen};
             }
-
-            if(mmdbid2 !== undefined && mmdbid2 === mmdbid1) {
-                //chainid1 += me.htmlCls.postfix;
-                chainid2 = mmdbid2 + me.htmlCls.postfix + "_" + chain2;
-            }
           }
           else {
             //var chainidArray = me.cfg.chainalign.split(',');
@@ -35883,10 +36004,7 @@ class SetSeqAlign {
             chainid1 = mmdbid1 + "_" + chain1;
             chainid2 = mmdbid2 + "_" + chain2;
 
-            if(mmdbid2 !== undefined && mmdbid2 === ic.mmdbid_t) {
-                //chainid1 += me.htmlCls.postfix;
-                chainid2 = mmdbid2 + me.htmlCls.postfix + "_" + chain2;
-            }
+            if(mmdbid2 !== undefined && mmdbid2 === ic.mmdbid_t) ;
          }
 
           ic.conservedName1 = chainid1 + '_cons';
@@ -36124,6 +36242,7 @@ class SetSeqAlign {
         let resi2range_t = {}; // aaccumulative aligned residues in the template chain
         // start and end of MSA
         let start_t = 9999, end_t = -1;
+
         for(let index = 1, indexl = chainidArray.length; index < indexl; ++index) { 
             let chainIndex = index - 1;
             for(let i = 0, il = ic.qt_start_end[chainIndex].length; i < il; ++i) {
@@ -36225,7 +36344,7 @@ class SetSeqAlign {
 
             hAtoms = me.hashUtilsCls.unionHash(hAtoms, hAtomsTmp);
         }      
-    
+          
         // 3. assign the varaible ic.alnChainsAnno
         for(let i = 0; i < 3 + 2*n; ++i) {
             if(ic.alnChainsAnno[chainid1][i] === undefined ) ic.alnChainsAnno[chainid1][i] = [];
@@ -36302,7 +36421,7 @@ class SetSeqAlign {
             resi = resiPos;
         }
         else {
-            if(ic.chainsSeq[chainid][resiPos] === undefined) {
+            if(!ic.chainsSeq[chainid] || !ic.chainsSeq[chainid][resiPos]) {
                 resi = '';
             }
             else {
@@ -36327,7 +36446,7 @@ class SetSeqAlign {
             }
         }
         else {
-            if(ic.chainsSeq[chainid][resiPos] === undefined) {
+            if(!ic.chainsSeq[chainid] || !ic.chainsSeq[chainid][resiPos]) {
                 resn = '';
             }
             else {
@@ -36343,18 +36462,21 @@ class SetSeqAlign {
         let nGap = 0;
 
         let pos_t; // position to add gap
-        for(let j = 0, jl = ic.alnChainsSeq[chainid1].length; j < jl; ++j) {
-            //add gap before the mapping region       
-            if(parseInt(ic.alnChainsSeq[chainid1][j].resi) == resi_t) {
-                pos_t = j;
-                break;
-            }
 
-            if(ic.alnChainsSeq[chainid1][j].resn == '-') {
-                ++nGap;
-            }
-            else {
-                nGap = 0;
+        if(ic.alnChainsSeq[chainid1]) {
+            for(let j = 0, jl = ic.alnChainsSeq[chainid1].length; j < jl; ++j) {
+                //add gap before the mapping region       
+                if(parseInt(ic.alnChainsSeq[chainid1][j].resi) == resi_t) {
+                    pos_t = j;
+                    break;
+                }
+
+                if(ic.alnChainsSeq[chainid1][j].resn == '-') {
+                    ++nGap;
+                }
+                else {
+                    nGap = 0;
+                }
             }
         }
 
@@ -36363,13 +36485,14 @@ class SetSeqAlign {
 
     addGapAllAlnChains(chainidArray, alignedChainIndice, chainid1, resi_t, len) { let ic = this.icn3d; ic.icn3dui;    
         let result = this.getResiPosInTemplate(chainid1, resi_t);
-        let nGap = result.ngap, pos_t = result.pos;
+        result.ngap; let pos_t = result.pos;
 
         // 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 = chainidArray[alignedChainIndice[j]];
             let gapResObject = this.getResObject(chainidTmp, true);
-            for(let k = 0, kl = len - nGap; k < kl; ++k) {
+            //for(let k = 0, kl = len - nGap; k < kl; ++k) {
+            for(let k = 0, kl = len; k < kl; ++k) {
                 ic.alnChainsSeq[chainidTmp].splice(pos_t, 0, gapResObject);
             }
         }
@@ -36413,8 +36536,8 @@ class SetSeqAlign {
         pos2 = chainid.indexOf('_');
 
         //mmdbid1 = ic.mmdbid_t; 
-        mmdbid1 = chainidArray[0].substr(0, pos1).toUpperCase();
-        mmdbid2 = chainid.substr(0, pos2).toUpperCase();
+        mmdbid1 = chainidArray[0].substr(0, pos1); //.toUpperCase();
+        mmdbid2 = chainid.substr(0, pos2); //.toUpperCase();
 
         chain1 = chainidArray[0].substr(pos1 + 1);
         chain2 = chainid.substr(pos2 + 1);
@@ -36427,9 +36550,7 @@ class SetSeqAlign {
         chainid1 = mmdbid1 + "_" + chain1;
         chainid2 = mmdbid2 + "_" + chain2;
 
-        if(mmdbid2 !== undefined && mmdbid2 === ic.mmdbid_t) {
-            chainid2 = mmdbid2 + me.htmlCls.postfix + "_" + chain2;
-        }
+        if(mmdbid2 !== undefined && mmdbid2 === ic.mmdbid_t) ;
 
         //ic.alnChainsSeq[chainid2] = [];
         ic.alnChains[chainid2] = {};
@@ -37267,7 +37388,7 @@ class ParserUtils {
 
       //var dxymax = npoint / 2.0 * step;
 
-      pdbid =(pdbid) ? pdbid.toUpperCase() : 'STRU';
+      pdbid =(pdbid) ? pdbid.toUpperCase() : 'stru';
 
       ic.structures[pdbid].push(pdbid + '_MEM');
       ic.chains[pdbid + '_MEM'] = {};
@@ -37418,7 +37539,7 @@ class ParserUtils {
                   $("#" + id + "_shrink").show();
 
                   if(me.cfg.align !== undefined) {
-                      let  bShowHighlight = false;
+                      let  bShowHighlight = false;                  
                       let  seqObj = me.htmlCls.alignSeqCls.getAlignSequencesAnnotations(Object.keys(ic.alnChains), undefined, undefined, bShowHighlight);
                       $("#" + ic.pre + "dl_sequence2").html(seqObj.sequencesHtml);
                       $("#" + ic.pre + "dl_sequence2").width(me.htmlCls.RESIDUE_WIDTH * seqObj.maxSeqCnt + 200);
@@ -37811,7 +37932,7 @@ class MmcifParser {
     //loadAtomDataIn. The deferred parameter was resolved after the parsing so that other javascript code can be executed.
     loadMmcifData(data, mmcifid) { let ic = this.icn3d; ic.icn3dui;
         if(!mmcifid) mmcifid = data.mmcif;
-        if(!mmcifid) mmcifid = 'STRU';
+        if(!mmcifid) mmcifid = 'stru';
 
         if(data.atoms !== undefined) {
             ic.init();
@@ -38189,7 +38310,7 @@ class HlSeq {
                                     if(ic.bNCBI && ($(that).attr('domain') !== undefined || $(that).attr('feat') !== undefined || $(that).attr('3ddomain') !== undefined) ) {
                                         let residNCBI = chainid + '_' + (j+1).toString();
                                         // AlphaFold domains calculated on-the-fly have no conversion
-                                        if(structure.length > 4) {
+                                        if(structure.length > 5) {
                                             residueid = residNCBI;
                                         }
                                         else if(ic.residNCBI2resid[residNCBI]) {
@@ -38236,7 +38357,7 @@ class HlSeq {
                                     if(ic.bNCBI) {
                                         let residNCBI = chainid + '_' +(parseInt(posArray[i])+1).toString();
                                         // AlphaFold domains calculated on-the-fly have no conversion
-                                        if(structure.length > 4) {
+                                        if(structure.length > 5) {
                                             residueid = residNCBI;
                                         }
                                         else if(ic.residNCBI2resid[residNCBI]) {
@@ -40831,10 +40952,7 @@ class Diagram2d {
 
               let chainNameFinal =(chainNameHash[chainName] === 1) ? chainName : chainName + chainNameHash[chainName].toString();
               let chainid = mmdbid + '_' + chainNameFinal;
-              if(ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t && structureIndex === 0) {
-                  //chainid += me.htmlCls.postfix;
-                  chainid = mmdbid + me.htmlCls.postfix + '_' + chainNameFinal;
-              }
+              if(ic.mmdbid_q !== undefined && ic.mmdbid_q === ic.mmdbid_t && structureIndex === 0) ;
 
               molid2chain[molid] = chainid;
               molid2color[molid] = color;
@@ -44949,6 +45067,8 @@ class ApplySsbonds {
     }
 }
 
+//https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_cubes.html
+
 class VRButton {
     constructor(icn3d) {
         this.icn3d = icn3d;
@@ -44984,10 +45104,12 @@ class VRButton {
             }
 
             function onSessionEnded( /*event*/ ) {
-                // the display is weird somehow
                 // reset orientation after VR
                 ic.transformCls.resetOrientation();
-                //ic.transformCls.zoominSelection();
+                
+                ic.bVr = false;
+                //ic.mdl.scale.copy(new THREE.Vector3( 1, 1, 1 )); 
+
                 ic.drawCls.draw();
 
                 currentSession.removeEventListener( 'end', onSessionEnded );
@@ -45025,8 +45147,10 @@ class VRButton {
                 ic.bImpo = false;
                 //ic.bInstanced = false;
                 
-                const bVr = true;
-                ic.drawCls.draw(bVr);
+                ic.bVr = true;
+                //ic.mdl.scale.copy(ic.mdl.scale.multiplyScalar(0.2));
+
+                ic.drawCls.draw(ic.bVr);
 
                 if ( currentSession === null ) {
 
@@ -45127,29 +45251,6 @@ class VRButton {
             return button;
 
         } else {
-/*
-            const message = document.createElement( 'a' );
-
-            if ( window.isSecureContext === false ) {
-
-                message.href = document.location.href.replace( /^http:/, 'https:' );
-                message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
-
-            } else {
-
-                message.href = 'https://immersiveweb.dev/';
-                message.innerHTML = 'WEBXR NOT AVAILABLE';
-
-            }
-
-            message.style.left = 'calc(50% - 90px)';
-            message.style.width = '180px';
-            message.style.textDecoration = 'none';
-
-            stylizeElement( message );
-
-            return message;
-*/
             const message = document.createElement( 'span' );
             return message;
         }
@@ -45176,6 +45277,8 @@ class VRButton {
 
 }
 
+//https://github.com/mrdoob/three.js/blob/master/examples/webxr_ar_cones.html
+
 class ARButton {
     constructor(icn3d) {
         this.icn3d = icn3d;
@@ -45247,6 +45350,13 @@ class ARButton {
 			}
 
 			function onSessionEnded( /*event*/ ) {
+				// reset orientation after VR
+				ic.transformCls.resetOrientation();
+
+				ic.bAr = false;
+				//ic.mdl.scale.copy(new THREE.Vector3( 1, 1, 1 ));
+
+				ic.drawCls.draw();
 
 				currentSession.removeEventListener( 'end', onSessionEnded );
 
@@ -45280,13 +45390,16 @@ class ARButton {
 			};
 
 			button.onclick = function () {
-                // imposter didn't work well in VR
-                //ic.bImpo = false;
+                // imposter didn't work well in AR
+                ic.bImpo = false;
 
-                ic.opts['background'] = 'transparent';
+                // important to keet the background transparent
+				ic.opts['background'] = 'transparent';
                 
-                const bVr = true;
-                ic.drawCls.draw(bVr);
+                ic.bAr = true;
+				//ic.mdl.scale.copy(ic.mdl.scale.multiplyScalar(0.2));
+
+                ic.drawCls.draw(ic.bAr);
 
 				if ( currentSession === null ) {
 
@@ -50507,6 +50620,220 @@ class XRControllerModelFactory {
 
 }
 
+//import * as THREE from './three/three.module.js';
+
+// copied from https://github.com/NikLever/Learn-WebXR/blob/master/libs/ControllerGestures.js
+// created by Nik Lever
+
+class ControllerGestures extends THREE.EventDispatcher{
+    constructor( renderer ){
+        super();
+        
+        if (renderer === undefined){
+            console.error('ControllerGestures must be passed a renderer');
+            return;
+        }
+        
+        const clock = new THREE.Clock();
+        
+        this.controller1 = renderer.xr.getController(0);
+        this.controller1.userData.gestures = { index: 0 };
+        this.controller1.userData.selectPressed = false;
+        this.controller1.addEventListener( 'selectstart', onSelectStart );
+        this.controller1.addEventListener( 'selectend', onSelectEnd );
+        
+        this.controller2 = renderer.xr.getController(1);
+        this.controller2.userData.gestures = { index: 1 };
+        this.controller2.userData.selectPressed = false;
+        this.controller2.addEventListener( 'selectstart', onSelectStart );
+        this.controller2.addEventListener( 'selectend', onSelectEnd );
+        
+        this.doubleClickLimit = 0.2;
+        this.pressMinimum = 0.4;
+        this.right = new THREE.Vector3(1,0,0);
+        this.up = new THREE.Vector3(0,1,0);
+        
+        this.type = 'unknown';
+        this.touchCount = 0;
+        
+        this.clock = clock;
+        
+        const self = this;
+        
+        function onSelectStart( ){
+            const data = this.userData.gestures;
+            
+            data.startPosition = undefined;
+            data.startTime = clock.getElapsedTime();
+            
+            if ( self.type.indexOf('tap') == -1) data.taps = 0;
+            
+            self.type = 'unknown';
+            this.userData.selectPressed = true;
+            
+            self.touchCount++;
+            
+            console.log( `onSelectStart touchCount: ${ self.touchCount }` );
+        }
+        
+        function onSelectEnd( ){
+            const data = this.userData.gestures;
+            
+            data.endTime = clock.getElapsedTime();
+            const startToEnd = data.endTime - data.startTime;
+            
+            //console.log(`ControllerGestures.onSelectEnd: startToEnd:${startToEnd.toFixed(2)} taps:${data.taps}`);
+            
+            if (self.type === 'swipe'){
+                const direction = ( self.controller1.position.y < data.startPosition.y) ? "DOWN" : "UP";
+                self.dispatchEvent( { type:'swipe', direction } );
+                self.type = 'unknown';
+            }else if (self.type !== "pinch" && self.type !== "rotate" && self.type !== 'pan'){
+                if ( startToEnd < self.doubleClickLimit ){
+                    self.type = "tap";
+                    data.taps++;
+                }else if ( startToEnd > self.pressMinimum ){
+                    self.dispatchEvent( { type: 'press', position: self.controller1.position, matrixWorld: self.controller1.matrixWorld }   );
+                    self.type = 'unknown';
+                }
+            }else {
+                self.type = 'unknown';
+            }
+            
+            this.userData.selectPressed = false;
+            data.startPosition = undefined;
+            
+            self.touchCount--;
+        }
+    }
+    
+    get multiTouch(){
+        let result;
+        if ( this.controller1 === undefined || this.controller2 === undefined ){   
+            result = false;
+        }else {
+            result = this.controller1.userData.selectPressed && this.controller2.userData.selectPressed;
+        }
+        const self = this;
+        console.log( `ControllerGestures multiTouch: ${result} touchCount:${self.touchCount}`);
+        return result;
+    }
+    
+    get touch(){
+        let result;
+        if ( this.controller1 === undefined || this.controller2 === undefined ){   
+            result = false;
+        }else {
+            result = this.controller1.userData.selectPressed || this.controller2.userData.selectPressed;
+        }
+        //console.log( `ControllerGestures touch: ${result}`);
+        return result;
+    }
+    
+    get debugMsg(){
+        return this.type;
+    }
+    
+    update(){
+        const data1 = this.controller1.userData.gestures;
+        const data2 = this.controller2.userData.gestures;
+        const currentTime = this.clock.getElapsedTime();
+        
+        let elapsedTime;
+        
+        if (this.controller1.userData.selectPressed && data1.startPosition === undefined){
+            elapsedTime = currentTime - data1.startTime;
+            if (elapsedTime > 0.05 ) data1.startPosition = this.controller1.position.clone();
+        }
+        
+        if (this.controller2.userData.selectPressed && data2.startPosition === undefined){
+            elapsedTime = currentTime - data2.startTime;
+            if (elapsedTime > 0.05 ) data2.startPosition = this.controller2.position.clone();
+        }
+        
+        if (!this.controller1.userData.selectPressed && this.type === 'tap' ){
+            //Only dispatch event after double click limit is passed
+            elapsedTime = this.clock.getElapsedTime() - data1.endTime;
+            if (elapsedTime > this.doubleClickLimit){
+                console.log( `ControllerGestures.update dispatchEvent taps:${data1.taps}` );
+                switch( data1.taps ){
+                    case 1:
+                        this.dispatchEvent( { type: 'tap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
+                        break;
+                    case 2:
+                        this.dispatchEvent( { type: 'doubletap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
+                        break;
+                    case 3:
+                        this.dispatchEvent( { type: 'tripletap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
+                        break;
+                    case 4:
+                        this.dispatchEvent( { type: 'quadtap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld }  );
+                        break;
+                }
+                this.type = "unknown";
+                data1.taps = 0;
+            }
+        }
+        
+        if (this.type === 'unknown' && this.touch){
+            if (data1.startPosition !== undefined){
+                if (this.multiTouch){
+                    if (data2.startPosition !== undefined){
+                        //startPosition is undefined for 1/20 sec
+                        //test for pinch or rotate
+                        const startDistance = data1.startPosition.distanceTo( data2.startPosition );
+                        const currentDistance = this.controller1.position.distanceTo( this.controller2.position );
+                        const delta = currentDistance - startDistance;
+                        if ( Math.abs(delta) > 0.01 ){
+                            this.type = 'pinch';
+                            this.startDistance = this.controller1.position.distanceTo( this.controller2.position );
+                            this.dispatchEvent( { type: 'pinch', delta: 0, scale: 1, initialise: true } );
+                        }else {
+                            const v1 = data2.startPosition.clone().sub( data1.startPosition ).normalize();
+                            const v2 = this.controller2.position.clone().sub( this.controller1.position ).normalize();
+                            const theta = v1.angleTo( v2 );
+                            if (Math.abs(theta) > 0.2){
+                                this.type = 'rotate';
+                                this.startVector = v2.clone();
+                                this.dispatchEvent( { type: 'rotate', theta: 0, initialise: true } );
+                            }
+                        }
+                    }
+                }else {
+                    //test for swipe or pan
+                    let dist = data1.startPosition.distanceTo( this.controller1.position );
+                    elapsedTime = this.clock.getElapsedTime() - data1.startTime;
+                    const velocity = dist/elapsedTime;
+                    //console.log(`dist:${dist.toFixed(3)} velocity:${velocity.toFixed(3)}`);
+                    if ( dist > 0.01 && velocity > 0.1 ){
+                        const v = this.controller1.position.clone().sub( data1.startPosition );
+                        let maxY = (Math.abs(v.y) > Math.abs(v.x)) && (Math.abs(v.y) > Math.abs(v.z));
+                        if ( maxY )this.type = "swipe";
+                    }else if (dist > 0.006 && velocity < 0.03){
+                        this.type = "pan";
+                        this.startPosition = this.controller1.position.clone();
+                        this.dispatchEvent( { type: 'pan', delta: new THREE.Vector3(), initialise: true } );
+                    }
+                }
+            }
+        }else if (this.type === 'pinch'){
+            const currentDistance = this.controller1.position.distanceTo( this.controller2.position );
+            const delta = currentDistance - this.startDistance;
+            const scale = currentDistance/this.startDistance;
+            this.dispatchEvent( { type: 'pinch', delta, scale });
+        }else if (this.type === 'rotate'){
+            const v = this.controller2.position.clone().sub( this.controller1.position ).normalize();
+            let theta = this.startVector.angleTo( v );
+            const cross = this.startVector.clone().cross( v );
+            if (this.up.dot(cross) > 0) theta = -theta;
+            this.dispatchEvent( { type: 'rotate', theta } );
+        }else if (this.type === 'pan'){
+            const delta = this.controller1.position.clone().sub( this.startPosition );
+            this.dispatchEvent( { type: 'pan', delta } );
+        }
+    }
+}
+
 /**
  * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
  */
@@ -50527,6 +50854,8 @@ class Scene {
 
         ic.cameraCls.setCamera();
 
+        this.setVrAr();
+
         if(ic.bSkipChemicalbinding === undefined || !ic.bSkipChemicalbinding) {
             ic.applyOtherCls.applyChemicalbindingOptions();
         }
@@ -50667,22 +50996,6 @@ class Scene {
         // highlight on impostors
         ic.mdl_ghost = new THREE.Object3D();  // Impostor display
         ic.scene_ghost.add(ic.mdl_ghost);
-        
-        // for VR view
-        let controller = ic.renderer.xr.getController( 0 ); 
-        ic.scene.add( controller );
-
-        let controllerModelFactory = new XRControllerModelFactory();
-        let controllerGrip = ic.renderer.xr.getControllerGrip( 0 );
-        controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
-        ic.scene.add( controllerGrip );
-
-        $("#" + me.pre + "VRButton").remove();
-        //document.body.appendChild( ic.VRButtonCls.createButton( ic.renderer ) );
-        $("#" + me.pre + "viewer").get(0).appendChild( ic.VRButtonCls.createButton( ic.renderer ) );
-   
-        $("#" + me.pre + "ARButton").remove();
-        $("#" + me.pre + "viewer").get(0).appendChild( ic.ARButtonCls.createButton( ic.renderer ) );
  
         // related to pk
         ic.objects = []; // define objects for pk, not all elements are used for pk
@@ -50714,8 +51027,196 @@ class Scene {
         ic.cams = {
             perspective: ic.perspectiveCamera,
             orthographic: ic.orthographicCamera,
-        };
+        };       
     };
+
+    setVrAr() { let ic = this.icn3d, me = ic.icn3dui;
+
+        // https://github.com/NikLever/Learn-WebXR/tree/master/start
+        // https://github.com/mrdoob/three.js/blob/master/examples/webxr_ar_cones.html
+        // https://github.com/mrdoob/three.js/blob/master/examples/webxr_vr_cubes.html
+
+        if(ic.bVr) {
+/*            
+            ic.raycasterVR = new THREE.Raycaster();
+            ic.workingMatrix = new THREE.Matrix4();
+            ic.workingVector = new THREE.Vector3();
+            ic.origin = new THREE.Vector3();
+
+            let radius = 0.08;
+            let geometry = new THREE.IcosahedronBufferGeometry( radius, 2 );
+            ic.highlightVR = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.BackSide } ) );
+            ic.highlightVR.scale.set(1.2, 1.2, 1.2);        
+*/
+            // modified from https://github.com/NikLever/Learn-WebXR/blob/master/complete/lecture3_7/app.js
+            // add dolly to move camera
+            ic.dolly = new THREE.Object3D();
+            ic.dolly.position.z = 5;
+            ic.dolly.add(ic.cam);
+            ic.scene.add(ic.dolly);
+
+            ic.dummyCam = new THREE.Object3D();
+            ic.cam.add(ic.dummyCam);
+
+            ic.clock = new THREE.Clock();
+
+            //controllers
+            ic.controllers = this.getControllers();
+
+            ic.getInputSources = true; // default
+
+            function onSelectStart() {
+//                this.children[0].scale.z = 10;
+                this.userData.selectPressed = true;
+            }
+    
+            function onSelectEnd() {
+//                this.children[0].scale.z = 0;
+//                ic.highlightVR.visible = false;
+                this.userData.selectPressed = false;
+            }
+/*
+            function buildController( data ) {
+                let geometry, material;
+            
+                switch ( data.targetRayMode ) {
+                    case 'tracked-pointer':
+                        geometry = new THREE.BufferGeometry();
+                        geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( [ 0, 0, 0, 0, 0, - 1 ], 3 ) );
+                        geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( [ 0.5, 0.5, 0.5, 0, 0, 0 ], 3 ) );
+            
+                        material = new THREE.LineBasicMaterial( { vertexColors: true, blending: THREE.AdditiveBlending } );
+            
+                        return new THREE.Line( geometry, material );
+            
+                    case 'gaze':
+                        geometry = new THREE.RingGeometry( 0.02, 0.04, 32 ).translate( 0, 0, - 1 );
+                        material = new THREE.MeshBasicMaterial( { opacity: 0.5, transparent: true } );
+                        return new THREE.Mesh( geometry, material );
+                }
+            }
+*/
+            ic.controllers.forEach( (controller) => {
+                controller.addEventListener( 'selectstart', onSelectStart );
+                controller.addEventListener( 'selectend', onSelectEnd );
+/*                
+                controller.addEventListener( 'connected', function ( event ) {
+                    const mesh = buildController(event.data);
+                    mesh.scale.z = 0;
+                    this.add( mesh );
+                } );
+                controller.addEventListener( 'disconnected', function () {
+                    this.remove( this.children[ 0 ] );
+                    ic.controllers.forEach( (controllerTmp) => {
+                        controllerTmp = null;
+                    });
+                    //self.controllerGrip = null;
+                } );
+*/                
+            });         
+        }      
+        else if(ic.bAr) {
+            //Add gestures here
+            ic.gestures = new ControllerGestures(ic.renderer);
+            ic.scene.add(ic.gestures.controller1);
+            ic.scene.add(ic.gestures.controller2);
+
+            ic.gestures.addEventListener('tap', (ev) => {
+                //if(!ic.mdl.visible) {
+                //    ic.mdl.visible = true;
+                //}
+
+                const controller = ic.gestures.controller1; 
+                //ic.mdl.position.set( 0, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
+                ic.mdl.position.set( -0.03, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
+                //ic.mdl.scale.copy(ic.mdl.scale.multiplyScalar(0.1));
+                ic.mdl.scale.copy(new THREE.Vector3( 0.001, 0.001, 0.001 ));  
+            });
+
+            ic.gestures.addEventListener('doubletap', (ev) => {
+                const controller = ic.gestures.controller1; 
+                //ic.mdl.position.set( 0, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
+                ic.mdl.position.set( -0.06, 0, - 0.6 ).applyMatrix4( controller.matrixWorld );
+                //ic.mdl.scale.copy(ic.mdl.scale.multiplyScalar(10));
+                ic.mdl.scale.copy(new THREE.Vector3( 0.005, 0.005, 0.005 )); 
+            });
+/*
+            ic.gestures.addEventListener('swipe', (ev) => {
+                // if(ic.mdl.visible) {
+                //     ic.mdl.visible = false;
+                // }
+            });
+  
+            ic.gestures.addEventListener('pan', (ev) => {
+                // if(ev.initialise !== undefined) {
+                //     thisClass.startPosition = ic.mdl.position.clone();
+                // }
+                // else {
+                //     const pos = thisClass.startPosition.clone().add(ev.delta.multiplyScalar(3));
+                //     ic.mdl.position.copy(pos);
+                // }
+            });
+
+            ic.gestures.addEventListener('pinch', (ev) => {
+                // if(ev.initialise !== undefined) {
+                //     thisClass.startScale = ic.mdl.scale.clone();                   
+                // }
+                // else {
+                //     const scale = thisClass.startScale.clone().multiplyScalar(ev.scale);                  
+                //     ic.mdl.scale.copy(scale);
+                // }
+            });
+ 
+            ic.gestures.addEventListener('rotate', (ev) => {
+                // if(ev.initialise !== undefined) {
+                //     thisClass.startQuaternion = ic.mdl.quaternion.clone();
+                // }
+                // else {
+                //     ic.mdl.quaternion.copy(thisClass.startQuaternion);
+                //     ic.mdl.rotateY(ev.theta);
+                // }
+            });  
+*/                            
+        }
+
+        $("#" + me.pre + "VRButton").remove();
+        $("#" + me.pre + "viewer").get(0).appendChild( ic.VRButtonCls.createButton( ic.renderer ) );
+
+        $("#" + me.pre + "ARButton").remove();
+        $("#" + me.pre + "viewer").get(0).appendChild( ic.ARButtonCls.createButton( ic.renderer ) );
+    }
+
+    getControllers() { let ic = this.icn3d; ic.icn3dui;
+        const controllerModelFactory = new XRControllerModelFactory();
+/*        
+        const geometry = new THREE.BufferGeometry().setFromPoints( [
+            new THREE.Vector3(0,0,0),
+            new THREE.Vector3(0,0,-1)
+        ]);
+        const line = new THREE.Line( geometry );
+        line.name = 'line';
+        line.scale.z = 0;
+*/
+
+        const controllers = [];
+        
+        for(let i=0; i<=1; i++){
+            const controller = ic.renderer.xr.getController( i );
+            ic.dolly.add( controller );
+
+//            controller.add( line.clone() );
+            controller.userData.selectPressed = false;
+            ic.scene.add(controller);
+            
+            controllers.push( controller );
+            
+            const grip = ic.renderer.xr.getControllerGrip( i );
+            grip.add( controllerModelFactory.createControllerModel( grip ));
+            ic.scene.add( grip );
+        }
+        
+        return controllers;
+    }
 }
 
 /**
@@ -51929,7 +52430,7 @@ class Draw {
     }
 
     //Draw the 3D structure. It rebuilds scene, applies previous color, applies the transformation, and renders the image.
-    draw(bVr) { let ic = this.icn3d, me = ic.icn3dui;
+    draw(bVrAr) { let ic = this.icn3d, me = ic.icn3dui;
         if(ic.bRender && (!ic.hAtoms || Object.keys(ic.hAtoms) == 0)) ic.hAtoms = me.hashUtilsCls.cloneHash(ic.atoms);
 
         ic.sceneCls.rebuildScene();
@@ -51967,7 +52468,7 @@ class Draw {
           }
 
           this.applyTransformation(ic._zoomFactor, ic.mouseChange, ic.quaternion);
-          this.render(bVr);
+          this.render(bVrAr);
         }
 
         ic.impostorCls.clearImpostors();
@@ -52000,10 +52501,10 @@ class Draw {
     }
 
     //Render the scene and objects into pixels.
-    render(bVr) { let ic = this.icn3d; ic.icn3dui;
+    render(bVrAr) { let ic = this.icn3d; ic.icn3dui;
         let thisClass = this;
         // setAnimationLoop is required for VR
-        if(bVr) {
+        if(bVrAr) {
             ic.renderer.setAnimationLoop( function() {
                 thisClass.render_base();
             });
@@ -52013,8 +52514,39 @@ class Draw {
         }
     }
 
+    handleController( controller, dt, selectPressed) { let ic = this.icn3d; ic.icn3dui;
+        // modified from https://github.com/NikLever/Learn-WebXR/blob/master/complete/lecture3_7/app.js
+        if ( selectPressed ){
+/*            
+            ic.workingMatrix.identity().extractRotation( controller.matrixWorld );
+
+            ic.raycasterVR.ray.origin.setFromMatrixPosition( controller.matrixWorld );
+            ic.raycasterVR.ray.direction.set( 0, 0, - 1 ).applyMatrix4( ic.workingMatrix );
+
+            const intersects = ic.raycasterVR.intersectObjects( ic.objects );
+
+            if (intersects.length>0){
+                intersects[0].object.add(ic.highlightVR);
+                ic.highlightVR.visible = true;
+            }else{
+                ic.highlightVR.visible = false;
+            }
+*/            
+            const speed = 5; //2;
+            const quaternion = ic.dolly.quaternion.clone();
+            //ic.dolly.quaternion.copy(ic.dummyCam.getWorldQuaternion());
+            ic.dummyCam.getWorldQuaternion(ic.dolly.quaternion);
+            ic.dolly.translateZ(-dt * speed);
+            //ic.dolly.position.y = 0; // limit to a plane
+            ic.dolly.quaternion.copy(quaternion); 
+                    
+        }
+    }
+
     //Render the scene and objects into pixels.
     render_base() { let ic = this.icn3d, me = ic.icn3dui;
+        let thisClass = this;
+
         if(me.bNode) return;
 
         let cam = (ic.bControlGl && !me.bNode) ? window.cam : ic.cam;
@@ -52029,10 +52561,88 @@ class Draw {
         }
 
         ic.renderer.setPixelRatio( window.devicePixelRatio ); // r71
+
+        if(ic.bVr) {
+            let dt = 0.04; // ic.clock.getDelta();
+
+            if (ic.controllers){
+                // let result = this.getThumbStickMove();
+                // let y = result.y * -1;
+                // let pressed = result.pressed;
+
+                for(let i = 0, il = ic.controllers.length; i < il; ++i) {
+                    let controller = ic.controllers[i];
+                    dt = (i % 2 == 0) ? dt : -dt; // dt * y; 
+                    thisClass.handleController( controller, dt, controller.userData.selectPressed );
+                    //thisClass.handleController( controller, dt, pressed );
+                }
+            }
+        }
+        else if(ic.bAr) {
+            if ( ic.renderer.xr.isPresenting ){    
+                ic.gestures.update();
+            }
+        }
+
         if(ic.scene) {
             ic.renderer.render(ic.scene, cam);
         }
     }
+
+    getThumbStickMove() { let ic = this.icn3d; ic.icn3dui;
+        let y = 0;
+        let btnPressed = false;
+
+        if ( ic.renderer.xr.isPresenting ){
+            const session = ic.renderer.xr.getSession();
+            const inputSources = session.inputSources;
+          
+            if ( ic.getInputSources ){    
+                //const info = [];
+                
+                inputSources.forEach( inputSource => {
+                    const gp = inputSource.gamepad;
+                    gp.axes;
+                    gp.buttons;
+                    const mapping = gp.mapping;
+                    ic.useStandard = (mapping == 'xr-standard');
+                    inputSource.handedness;
+                    const profiles = inputSource.profiles;
+                    ic.gamepadType = "";
+                    profiles.forEach( profile => {
+                        if (profile.indexOf('touchpad')!=-1) ic.gamepadType = 'touchpad';
+                        if (profile.indexOf('thumbstick')!=-1) ic.gamepadType = 'thumbstick';
+                    });
+                    inputSource.targetRayMode;
+                    //info.push({ gamepad, handedness, profiles, targetRayMode });
+                });
+                    
+                //console.log( JSON.stringify(info) );
+                 
+                ic.getInputSources = false;
+            }else if (ic.useStandard && ic.gamepadType != ""){
+                inputSources.forEach( inputSource => {
+                    const gp = inputSource.gamepad;
+                    const thumbstick = (ic.gamepadType=='thumbstick');
+                    //{"trigger":{"button":0},"touchpad":{"button":2,"xAxis":0,"yAxis":1}},
+                    //"squeeze":{"button":1},"thumbstick":{"button":3,"xAxis":2,"yAxis":3},"button":{"button":6}}}
+                    const xaxisOffset = (thumbstick) ? 2 : 0;
+                    const btnIndex = (thumbstick) ? 3 : 2;
+                    btnPressed = gp.buttons[btnIndex].pressed;
+                    // if ( inputSource.handedness == 'right') {
+                    // } else if ( inputSource.handedness == 'left') {
+                    // }
+
+                    //https://beej.us/blog/data/javascript-gamepad/
+                    // x,y-axis values are between -1 and 1
+                    gp.axes[xaxisOffset];
+                    y = gp.axes[xaxisOffset + 1]; 
+                });
+            }
+        }
+
+        return {'y': y, 'pressed': btnPressed};
+    }
 }
 
 /**
@@ -52639,7 +53249,7 @@ class SaveFile {
     }
 
     //getAtomPDB: function(atomHash, bPqr, bPdb, bNoChem) { let ic = this.icn3d, me = ic.icn3dui;
-    getAtomPDB(atomHash, bPqr, bNoChem, bNoHeader) { let ic = this.icn3d, me = ic.icn3dui;
+    getAtomPDB(atomHash, bPqr, bNoChem, bNoHeader, chainResi2pdb) { let ic = this.icn3d, me = ic.icn3dui;
         let pdbStr = '';
 
         // get all phosphate groups in lipids
@@ -52784,9 +53394,19 @@ class SaveFile {
         let molNum = 1, prevStru = '';
         //pdbStr += '\n';
 
+        let addedChainResiHash = {};
         for(let i in atomHash) {
             let atom = ic.atoms[i];
 
+            let chainResi = atom.chain + '_' + atom.resi;
+            if(chainResi2pdb && chainResi2pdb.hasOwnProperty(chainResi)) {
+                if(!addedChainResiHash.hasOwnProperty(chainResi)) {
+                    pdbStr += chainResi2pdb[chainResi];
+                    addedChainResiHash[chainResi] = 1;
+                }
+                continue;
+            }
+
             // remove chemicals
             if(bNoChem && atom.het) continue;
 
@@ -52799,8 +53419,9 @@ class SaveFile {
 
                 if(bMulStruc) pdbStr += 'MODEL        ' + molNum + '\n';
 
-                // add header
-                if(!bNoHeader) pdbStr += this.getPDBHeader(molNum - 1, stru2header);
+                // add header            
+                let mutantInfo = (chainResi2pdb) ? "Mutated chain_residue " + Object.keys(chainResi2pdb) + '; ' : '';
+                if(!bNoHeader) pdbStr += this.getPDBHeader(molNum - 1, stru2header, mutantInfo);
 
                 prevStru = atom.structure;
                 ++molNum;
@@ -53028,21 +53649,25 @@ class SaveFile {
 
        return pdbStr;
     }
-    getPDBHeader(struNum, stru2header) { let ic = this.icn3d; ic.icn3dui;
+    getPDBHeader(struNum, stru2header, mutantInfo) { let ic = this.icn3d; ic.icn3dui;
        if(struNum === undefined) struNum = 0;
 
        let pdbStr = '';
        let stru = Object.keys(ic.structures)[struNum];
-       pdbStr += 'HEADER    PDB From iCn3D'.padEnd(62, ' ') + stru + '\n';
+       let id = (mutantInfo) ? stru + '2' : stru;
+       pdbStr += 'HEADER    PDB From iCn3D'.padEnd(62, ' ') + id + '\n';
 
        if(struNum == 0) {
            let title =(ic.molTitle.length > 50) ? ic.molTitle.substr(0,47) + '...' : ic.molTitle;
            // remove quotes
            if(title.indexOf('"') != -1) title = '';
+           if(mutantInfo) {
+               title = mutantInfo + title;
+           }
            pdbStr += 'TITLE     ' + title + '\n';
        }
 
-       if(stru2header) {
+       if(stru2header && stru2header[stru]) {
            pdbStr += stru2header[stru];
        }
 
@@ -53105,6 +53730,9 @@ class SaveFile {
        if(me.cfg.cid !== undefined) {
            url = "https://www.ncbi.nlm.nih.gov/pccompound/?term=";
        }
+       else if(me.cfg.afid !== undefined) {
+           url = "https://alphafold.ebi.ac.uk/search/text/";
+       }
        else {
            //if(ic.inputid.indexOf(",") !== -1) {
            if(Object.keys(ic.structures).length > 1) {
@@ -53124,11 +53752,17 @@ class SaveFile {
 
            if(idArray.length === 1) {
                url += ic.inputid;
-               if(bLog) me.htmlCls.clickMenuCls.setLogCmd("link to Structure Summary " + ic.inputid + ": " + url, false);
+               if(bLog) me.htmlCls.clickMenuCls.setLogCmd("link to " + ic.inputid + ": " + url, false);
            }
            else if(idArray.length === 2) {
-               url += idArray[0] + " OR " + idArray[1];
-               if(bLog) me.htmlCls.clickMenuCls.setLogCmd("link to structures " + idArray[0] + " and " + idArray[1] + ": " + url, false);
+                if(me.cfg.afid) {
+                    url += idArray[0] + " " + idArray[1];
+                }
+                else {
+                    url += idArray[0] + " OR " + idArray[1];
+                }
+
+                if(bLog) me.htmlCls.clickMenuCls.setLogCmd("link to structures " + idArray[0] + " and " + idArray[1] + ": " + url, false);
            }
        }
 
@@ -55808,7 +56442,7 @@ class SetMenu {
         html += "<ul>";
         html += me.htmlCls.setHtmlCls.getLink('mn1_vastplus', 'NCBI VAST+ (PDB Assembly)' + me.htmlCls.wifiStr);
         html += me.htmlCls.setHtmlCls.getLink('mn1_vast', 'NCBI VAST (PDB)' + me.htmlCls.wifiStr);
-        html += me.htmlCls.setHtmlCls.getLink('mn1_foldseek', 'Foldseek (PDB & AalphaFold)' + me.htmlCls.wifiStr);
+        html += me.htmlCls.setHtmlCls.getLink('mn1_foldseek', 'Foldseek (PDB & AlphaFold)' + me.htmlCls.wifiStr);
         html += "</ul>";
 
         html += "<li><span>Retrieve by ID</span>";
@@ -56124,11 +56758,22 @@ class SetMenu {
 
         html += "<li>-</li>";
 
+        let liStr = "<li><a href='";
+
         html += "<li><span>VR & AR Hints</span>";
         html += "<ul>";
-        html += "<li><span>VR: VR Headsets</span>";
-        html += "<li><span>AR: Chrome in Android</span>";
+        html += liStr + me.htmlCls.baseUrl + "icn3d/icn3d.html#vr' target='_blank'>VR: VR Headsets</a></li>";
+        html += liStr + me.htmlCls.baseUrl + "icn3d/icn3d.html#ar' target='_blank'>AR: Chrome in Android</a></li>";
         html += "</ul>";
+/*
+        let liStr = "<li><a href='";
+
+        html += "<ul class='icn3d-mn-item'>";
+
+        html += liStr + me.htmlCls.baseUrl + "icn3d/icn3d.html#about' target='_blank'>About iCn3D<span style='font-size:0.9em'> " + me.REVISION + "</span></a></li>";
+
+        html += liStr + me.htmlCls.baseUrl + "icn3d/icn3d.html#gallery' target='_blank'>Live Gallery " + me.htmlCls.wifiStr + "</a></li>";
+*/
 
         html += me.htmlCls.setHtmlCls.getLink('mn6_sidebyside', 'Side by Side');
 
@@ -58652,7 +59297,7 @@ class SetDialog {
         html += "</div>";
         html += me.htmlCls.divStr + "tracktab4'>";
         html += "Track Title: " + me.htmlCls.inputTextStr + "id='" + me.pre + "track_title' placeholder='track title' size=16> <br><br>";
-        html += "Track Text(e.g., \"152 G, 155-156 RR\" defines a character \"G\" at the position 152 and two continuous characters \"RR\" at positions from 155 to 156. The starting position is 1): <br>";
+        html += "Track Text (e.g., \"2 G, 5-6 RR\" defines a character \"G\" at the position 2 and two continuous characters \"RR\" at positions from 5 to 6. The starting position is 1): <br>";
         html += "<textarea id='" + me.pre + "track_text' rows='5' style='width: 100%; height: " +(2*me.htmlCls.MENU_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
         html += me.htmlCls.buttonStr + "addtrack_button4'>Add Track</button>";
         html += "</div>";
@@ -58977,6 +59622,11 @@ class Events {
         let pos = hostUrl.indexOf("?");
         hostUrl = (pos == -1) ? hostUrl : hostUrl.substr(0, pos);
 
+        // some URLs from VAST search are like https://www.ncbi.nlm.nih.gov/Structure/vast/icn3d/
+        if(hostUrl == 'https://www.ncbi.nlm.nih.gov/Structure/vast/icn3d/') {
+            hostUrl = 'https://www.ncbi.nlm.nih.gov/Structure/icn3d/';
+        }
+
         ic.definedSetsCls.clickCustomAtoms();
         ic.definedSetsCls.clickCommand_apply();
         ic.definedSetsCls.clickModeswitch();
@@ -61148,6 +61798,7 @@ class AlignSeq {
         let index = 0,
             prevResCnt2nd = 0;
         let firstChainid, oriChainid;
+
         //  for(let i in ic.alnChains) {
         for (let m = 0, ml = alignChainArray.length; m < ml; ++m) {
             let i = alignChainArray[m];
@@ -61296,6 +61947,9 @@ class AlignSeq {
                                     resiHtmlArray[j] += '<span class="icn3d-sheet">&nbsp;</span>';
                                 }
                             }
+                            else {
+                                resiHtmlArray[j] += '<span class="icn3d-sheet">&nbsp;</span>';
+                            }
                         } else if (text == 'c') {
                             resiHtmlArray[j] += '<span class="icn3d-coil">&nbsp;</span>';
                         } else if (text == 'o') {
@@ -62352,17 +63006,20 @@ class Alternate {
         let viewSelectionAtomsCount = Object.keys(ic.viewSelectionAtoms).length;
         let allAtomsCount = Object.keys(ic.atoms).length;
 
-        ic.dAtoms = {};
+        //ic.dAtoms = {};
+
+        // 1. alternate all structures
+        //let moleculeArray = Object.keys(ic.structures);
 
-        // alternate all displayed structures
-        let moleculeArray = Object.keys(ic.structures);
-        // only alternate selected structures
-        // let structureHash = {};
-        // for(let i in ic.hAtoms) {
-        //     let structure = ic.atoms[i].structure;
-        //     structureHash[structure] = 1;
-        // }
-        // let moleculeArray = Object.keys(structureHash);
+        // 2. only alternate displayed structures
+        let structureHash = {};
+        for(let i in ic.viewSelectionAtoms) {
+            let structure = ic.atoms[i].structure;
+            structureHash[structure] = 1;
+        }
+        let moleculeArray = Object.keys(structureHash);
+
+        ic.dAtoms = {};
 
         for(let i = 0, il = moleculeArray.length; i < il; ++i) {
             let structure = moleculeArray[i];
@@ -63106,7 +63763,7 @@ class ContactMap {
 
         let graphStr = '{\n';
 
-        let struc1 = (ic.structures.length > 0) ? ic.structures[0] : 'STRU';
+        let struc1 = (ic.structures.length > 0) ? ic.structures[0] : 'stru';
         let len1 = nodeArray1.length,
             len2 = nodeArray2.length;
         let factor = 1;
@@ -65454,6 +66111,8 @@ class iCn3D {
     this.bNotLoadStructure = false;
 
     this.InputfileData = '';
+    this.bVr = false; // cflag to indicate whether in VR state
+    this.bAr = false; // cflag to indicate whether in VR state
 
     // default color range for Add Custom Color button in the Sequence & Annotation window
     this.startColor = 'blue';
@@ -65785,7 +66444,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.12.3';
+    this.REVISION = '3.12.5';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -65953,6 +66612,11 @@ iCn3DUI.prototype.show3DStructure = function(pdbStr) { let me = this;
 
     if(pdbStr) { // input pdbStr
         ic.init();
+
+        ic.bInputfile = true;
+        ic.InputfileType = 'pdb';
+        ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + pdbStr : pdbStr;
+        
         ic.pdbParserCls.loadPdbData(pdbStr);
 
         if(me.cfg.resdef !== undefined && me.cfg.chains !== undefined) {