icn3d 3.23.1 → 3.23.3

package/icn3d.js

@@ -10602,7 +10602,7 @@ class SetDialog {
 
         html += me.htmlCls.divStr + "dl_mutation' class='" + dialogClass + "'>";
         html += "<div style='width:500px'>";
-        html += 'Please specify the mutations with a comma separated mutation list. Each mutation can be specified as "[<b>uppercase</b> PDB ID or AlphaFold UniProt ID]_[Chain ID]_[Residue Number]_[One Letter Mutant Residue]". E.g., the mutation of N501Y in the E chain of PDB 6M0J can be specified as "6M0J_E_501_Y". For AlphaFold structures, the "Chain ID" is "A".<br/><br/>';
+        html += 'Please specify the mutations with a comma separated mutation list. Each mutation can be specified as "[<b>uppercase</b> PDB ID or AlphaFold UniProt ID]_[Chain Name]_[Residue Number]_[One Letter Mutant Residue]". E.g., the mutation of N501Y in the E chain of PDB 6M0J can be specified as "6M0J_E_501_Y". For AlphaFold structures, the "Chain ID" is "A".<br/>If you load a custom structure without PDB or UniProt ID, you can open "Seq. & Annotations" window and find the chain ID such as "stru_A". The part before the underscore is the structure ID, which can be used to specify the mutation such as "stru_A_...". Remember to choose "Show Mutation in: Current Page".<br/><br/>';
         html += "<div style='display:inline-block; width:110px'>Mutations: </div>" + me.htmlCls.inputTextStr + "id='" + me.pre + "mutationids' value='6M0J_E_484_K,6M0J_E_501_Y,6M0J_E_417_N' size=50><br/><br/>";
  
         html += '<b>ID Type</b>: ';
@@ -10675,8 +10675,9 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
-        html += "Append a list of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
-        html += me.htmlCls.buttonStr + "reload_mmdbaf'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px'>Append Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
+        html += "List of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
+        html += "<div style='display:inline-block; width:20px'></div>" + me.htmlCls.buttonStr + "reload_mmdbaf' style='width:150px'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px; width:250px'>Load Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
+        html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric ; Unit (All Chains)</button>" + "<br/><br/>";
 
         html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
         + me.pre + 'asu_bu2_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
@@ -11764,7 +11765,7 @@ class Events {
         $("#" + me.pre + id).resizable();
     }
 
-    async launchMmdb(ids, bBiounit, hostUrl) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
+    async launchMmdb(ids, bBiounit, hostUrl, bAppend) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
         if(!me.cfg.notebook) dialog.dialog( "close" );
         
         let flag = bBiounit ? 1 : 0;
@@ -11779,40 +11780,41 @@ class Events {
 
         let idArray = ids.split(',');
 
-        /*
-        if(idArray.length == 1 && (idArray[0].length == 4 || !isNaN(idArray[0])) ) {
-            thisClass.setLogCmd("load mmdb" + flag + " " + ids, false);
-            let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
-            window.open(hostUrl + '?mmdbid=' + ids + '&bu=' + flag, urlTarget);
-        }
-        else {
-            thisClass.setLogCmd("load mmdbaf" + flag + " " + ids, false);
-            let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
-            window.open(hostUrl + '?mmdbafid=' + ids + '&bu=' + flag, urlTarget);
-        }
-        */
-
-        // single MMDB ID could show memebranes
-        if(!ic.structures && idArray.length == 1 && (idArray[0].length == 4 || !isNaN(idArray[0])) ) {
-            thisClass.setLogCmd("load mmdb" + flag + " " + ids, false);
-            let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
-            window.open(hostUrl + '?mmdbid=' + ids + '&bu=' + flag, urlTarget);
+        if(!bAppend) {
+            if(idArray.length == 1 && (idArray[0].length == 4 || !isNaN(idArray[0])) ) {
+                thisClass.setLogCmd("load mmdb" + flag + " " + ids, false);
+                let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
+                window.open(hostUrl + '?mmdbid=' + ids + '&bu=' + flag, urlTarget);
+            }
+            else {
+                thisClass.setLogCmd("load mmdbaf" + flag + " " + ids, false);
+                let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
+                window.open(hostUrl + '?mmdbafid=' + ids + '&bu=' + flag, urlTarget);
+            }
         }
         else {
-            me.cfg.mmdbafid = ids;
-            me.cfg.bu = flag;
-
-            ic.bMmdbafid = true;
-            ic.inputid = (ic.inputid) ? ic.inputid + me.cfg.mmdbafid : me.cfg.mmdbafid;
-            if(me.cfg.bu == 1) {
-                ic.loadCmd = 'load mmdbaf1 ' + me.cfg.mmdbafid;
+            // single MMDB ID could show memebranes
+            if(!ic.structures && idArray.length == 1 && (idArray[0].length == 4 || !isNaN(idArray[0])) ) {
+                thisClass.setLogCmd("load mmdb" + flag + " " + ids, false);
+                let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
+                window.open(hostUrl + '?mmdbid=' + ids + '&bu=' + flag, urlTarget);
             }
             else {
-                ic.loadCmd = 'load mmdbaf0 ' + me.cfg.mmdbafid;
-            }
-            me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
+                me.cfg.mmdbafid = ids;
+                me.cfg.bu = flag;
+
+                ic.bMmdbafid = true;
+                ic.inputid = (ic.inputid) ? ic.inputid + me.cfg.mmdbafid : me.cfg.mmdbafid;
+                if(me.cfg.bu == 1) {
+                    ic.loadCmd = 'load mmdbaf1 ' + me.cfg.mmdbafid;
+                }
+                else {
+                    ic.loadCmd = 'load mmdbaf0 ' + me.cfg.mmdbafid;
+                }
+                me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
 
-            await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);   
+                await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);   
+            }
         }
     }
 
@@ -12554,21 +12556,28 @@ class Events {
 
          me.myEventCls.onIds("#" + me.pre + "reload_mmdbaf", "click", function(e) { me.icn3d;
             e.preventDefault();
-            
-            // remove space
             let ids = $("#" + me.pre + "mmdbafid").val();
-
             thisClass.launchMmdb(ids, 1, hostUrl);
         });
  
          me.myEventCls.onIds("#" + me.pre + "reload_mmdbaf_asym", "click", function(e) { me.icn3d;
             e.preventDefault();
-
-            // remove space
             let ids = $("#" + me.pre + "mmdbafid").val();
             thisClass.launchMmdb(ids, 0, hostUrl);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "reload_mmdbaf_append", "click", function(e) { me.icn3d;
+            e.preventDefault();
+            let ids = $("#" + me.pre + "mmdbafid").val();
+            thisClass.launchMmdb(ids, 1, hostUrl, true);
+        });
+ 
+         me.myEventCls.onIds("#" + me.pre + "reload_mmdbaf_asym_append", "click", function(e) { me.icn3d;
+            e.preventDefault();
+            let ids = $("#" + me.pre + "mmdbafid").val();
+            thisClass.launchMmdb(ids, 0, hostUrl, true);
+        });
+
         me.myEventCls.onIds("#" + me.pre + "mmdbid", "keyup", function(e) { let ic = me.icn3d;
            if (e.keyCode === 13) {
                e.preventDefault();
@@ -14497,11 +14506,11 @@ class SetHtml {
 
         html += me.htmlCls.divStr + "specguide" + indexStr + "' style='display:none; width:500px' class='icn3d-box'>";
 
-        html += "<b>Specification:</b> In the selection \"$1HHO,4N7N.A,B,C:5-10,LV,3AlaVal,chemicals@CA,C\":";
+        html += "<b>Specification:</b> In the selection \"$1HHO,4N7N.A,B,C:5-10,LV,3AlaVal,chemicals@CA,C,C*\":";
         html += "<ul><li>\"$1HHO,4N7N\" uses \"$\" to indicate structure selection.<br/>";
         html += "<li>\".A,B,C\" uses \".\" to indicate chain selection.<br/>";
         html += "<li>\":5-10,LV,3LeuVal,chemicals\" uses the colon \":\" to indicate residue selection. Residue selection could be residue number(5-10), one-letter IUPAC residue name abbreviations(LV), three-letter residue names(AlaVal, \"3\" indicates each residue name has three letters), or predefined names: \"proteins\", \"nucleotides\", \"chemicals\", \"ions\", and \"water\". IUPAC abbreviations can be written either as a contiguous string(e.g., \":LV\"), in order to find all instances of that sequence in the structure, or they can be separated by commas(e.g., \":L,V\") to select all residues of a given type in the structure(in the latter case, select all Leucine and Valine in the structure).<br/>";
-        html += "<li>\"@CA,C\" uses \"@\" to indicate atom selection.<br/>";
+        html += "<li>\"@CA,C,C*\" uses \"@\" to indicate atom name selection. \"C*\" selects any atom names starting with \"C\". <br/>";
         html += "<li>Partial definition is allowed, e.g., \":1-10\" selects all residue IDs 1-10 in all chains.<br/>";
         html += "<li>Different selections can be unioned(with \"<b>or</b>\", default), intersected(with \"<b>and</b>\"), or negated(with \"<b>not</b>\"). For example, \":1-10 or :K\" selects all residues 1-10 and all Lys residues. \":1-10 and :K\" selects all Lys residues in the range of residue number 1-10. \":1-10 or not :K\" selects all residues 1-10, which are not Lys residues.<br/>";
         html += "<li>The wild card character \"X\" or \"x\" can be used to represent any character.";
@@ -14510,9 +14519,9 @@ class SetHtml {
         html += "<ul><li>Users can select multiple sets in the menu \"Select > Defined Sets\".<br/>";
         html += "<li>Different sets can be unioned(with \"<b>or</b>\", default), intersected(with \"<b>and</b>\"), or negated(with \"<b>not</b>\"). For example, if the \"Defined Sets\" menu has four sets \":1-10\", \":11-20\", \":5-15\", and \":7-8\", the command \"saved atoms :1-10 or :11-20 and :5-15 not :7-8\" unions all residues 1-10 and 11-20 to get the residues 1-20, then intersects with the residues 5-15 to get the residues 5-15, then exclude the residues 7-8 to get the final residues 5-6 and 9-15.</ul>";
         html += "<b>Full commands in url or command window:</b>";
-        html += "<ul><li>Select without saving the set: select $1HHO,4N7N.A,B,C:5-10,LV,chemicals@CA,C<br/>";
+        html += "<ul><li>Select without saving the set: select $1HHO,4N7N.A,B,C:5-10,LV,chemicals@CA,C,C*<br/>";
         //html += "<li>Select and save: select $1HHO,4N7N.A,B,C:5-10,LV,chemicals@CA,C | name my_name | description my_description</ul>";
-        html += "<li>Select and save: select $1HHO,4N7N.A,B,C:5-10,LV,chemicals@CA,C | name my_name</ul>";
+        html += "<li>Select and save: select $1HHO,4N7N.A,B,C:5-10,LV,chemicals@CA,C,C* | name my_name</ul>";
 
         html += "</div>";
 
@@ -20588,7 +20597,9 @@ class ControllerGestures extends THREE.EventDispatcher{
         this.up = new THREE.Vector3(0,1,0);
         
         this.type = 'unknown';
-        this.touchCount = 0;
+        //this.touchCount = 0;
+
+        this.prevTap = 'none';
         
         this.clock = clock;
         
@@ -20605,9 +20616,9 @@ class ControllerGestures extends THREE.EventDispatcher{
             self.type = 'unknown';
             this.userData.selectPressed = true;
             
-            self.touchCount++;
+            //self.touchCount++;
             
-            console.log( `onSelectStart touchCount: ${ self.touchCount }` );
+            //console.log( `onSelectStart touchCount: ${ self.touchCount }` );
         }
         
         function onSelectEnd( ){
@@ -20617,29 +20628,36 @@ class ControllerGestures extends THREE.EventDispatcher{
             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 === '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 ){
+                // 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 {
+                    //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';
             }
-            
+*/
+
+            if ( startToEnd < self.doubleClickLimit ){
+                data.taps++;
+            }
+            self.type = 'tap';
+
             this.userData.selectPressed = false;
             data.startPosition = undefined;
             
-            self.touchCount--;
+            //self.touchCount--;
         }
     }
     
@@ -20650,8 +20668,7 @@ class ControllerGestures extends THREE.EventDispatcher{
         }else {
             result = this.controller1.userData.selectPressed && this.controller2.userData.selectPressed;
         }
-        const self = this;
-        console.log( `ControllerGestures multiTouch: ${result} touchCount:${self.touchCount}`);
+        //console.log( `ControllerGestures multiTouch: ${result} touchCount:${self.touchCount}`);
         return result;
     }
     
@@ -20686,61 +20703,62 @@ class ControllerGestures extends THREE.EventDispatcher{
             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}` );
+                //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 } );
-                        data1.prevTap = 'tap';
+                        //this.dispatchEvent( { type: 'tap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
+                        self.prevTap = 'tap';
                         break;
                     case 2:
                         this.dispatchEvent( { type: 'doubletap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
-                        data1.prevTap = 'doubletap';
-                        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 }  );
+                        self.prevTap = 'doubletap';
                         break;
                 }
                 this.type = "unknown";
                 data1.taps = 0;
             }
         }
-        
+
         if (this.type === 'unknown' && this.touch){
-            if (data1.startPosition !== undefined){
-                if (this.multiTouch){
-                    if (data2.startPosition !== undefined){
+            //if (data1.startPosition !== undefined){
+                //if (this.multiTouch){
+
+                if(self.prevTap == 'doubletap') {
+                    //if (data2.startPosition !== undefined){
                         //startPosition is undefined for 1/20 sec
                         //test for pinch or rotate
-                        data1.startPosition.distanceTo( data2.startPosition );
-                        this.controller1.position.distanceTo( this.controller2.position );
-                        //if ( Math.abs(delta) > 0.01 ){
-                        if(data1.prevTap == 'tap') {
+
+                        // 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 { // data1.prevTap == 'doubletap'
-                            const v1 = data2.startPosition.clone().sub( data1.startPosition ).normalize();
-                            const v2 = this.controller2.position.clone().sub( this.controller1.position ).normalize();
-                            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 {
+                            //this.dispatchEvent( { type: 'pinch', delta: 0, scale: 1, initialise: true } );
+                            this.dispatchEvent( { type: 'pinch', delta: new THREE.Vector3(0,0,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 { //if(self.prevTap == 'tap') {
                     //test for swipe or pan
-                    data1.startPosition.distanceTo( this.controller1.position );
-                    elapsedTime = this.clock.getElapsedTime() - data1.startTime;
+                    // 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 );
@@ -20749,24 +20767,40 @@ class ControllerGestures extends THREE.EventDispatcher{
                     // }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 } );
+                        this.dispatchEvent( { type: 'pan', delta: new THREE.Vector3(0,0,0), initialise: true } );
                     // }
                 }
+            //}
+        }else if (this.type === 'pinch' || this.type === 'pan'){
+            //if (this.type === 'pinch'){
+            //if (this.multiTouch){
+
+            if(self.prevTap == 'doubletap') {
+                if (this.controller2.position) {
+                    const currentDistance = this.controller1.position.distanceTo( this.controller2.position );
+                    // const delta = currentDistance - this.startDistance;
+                    const scale = currentDistance/this.startDistance;
+
+                    const delta = this.controller1.position.clone().sub( this.startPosition );
+                    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'){
+            } else { //if(self.prevTap == 'tap') {
+                // const delta = this.controller1.position.clone().sub( this.startPosition );
+                // this.dispatchEvent( { type: 'pan', delta } );
+
+                const position = this.controller1.position.clone();
+                this.dispatchEvent( { type: 'pan', position } );
+*/
             }
-        }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 } );
         }
     }
 }
@@ -22000,45 +22034,51 @@ class Scene {
             ic.scene.add(ic.gestures.controller1);
             ic.scene.add(ic.gestures.controller2);
 
-            // firts "tap", then "pinch" event
-            ic.gestures.addEventListener('tap', (ev) => {
-                // const controller = ic.gestures.controller1; 
-                // ic.mdl.position.set( -0.03, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
-                // ic.mdl.scale.copy(new THREE.Vector3( 0.001, 0.001, 0.001 ));  
-
-                const controller = ic.gestures.controller1; 
-                ic.mdl.position.set( -0.06, 0, - 0.6 ).applyMatrix4( controller.matrixWorld );
-                ic.mdl.scale.copy(new THREE.Vector3( 0.005, 0.005, 0.005 )); 
-            });
+            // ic.gestures.addEventListener('tap', (ev) => {
+            //     // const controller = ic.gestures.controller1; 
+            //     // ic.mdl.position.set( -0.03, 0, - 0.3 ).applyMatrix4( controller.matrixWorld );
+            //     // ic.mdl.scale.copy(new THREE.Vector3( 0.001, 0.001, 0.001 ));  
+            // });
 
-            // first "doubletap", then "rotate" event
             ic.gestures.addEventListener('doubletap', (ev) => {
-                const controller = ic.gestures.controller1; 
-                ic.mdl.position.set( -0.06, 0, - 0.6 ).applyMatrix4( controller.matrixWorld );
-                ic.mdl.scale.copy(new THREE.Vector3( 0.005, 0.005, 0.005 )); 
+                thisClass.positionCenter();
             });
- 
+/* 
             ic.gestures.addEventListener('pan', (ev) => { // touch across screen, move
                 if(ev.initialise !== undefined) {
                     thisClass.startPosition = ic.mdl.position.clone();
+                    thisClass.startQuaternion = ic.mdl.quaternion.clone();
                 }
                 else {
-                    const adjustMove = 2; // adjust to follow the finger
-                    const pos = thisClass.startPosition.clone().add(adjustMove * ev.delta.multiplyScalar(3));
-                    ic.mdl.position.copy(pos);
+                    const endPosition = ev.position;
+                    let angle = Math.acos( thisClass.startPosition.dot( endPosition ) / thisClass.startPosition.length() / endPosition.length() );
+
+                    let axis = new THREE.Vector3();
+                    axis.crossVectors( thisClass.startPosition, endPosition ).normalize();
+
+                    let rotateSpeed = 6.0;
+                    angle *= rotateSpeed;
+
+                    let quaternion = new THREE.Quaternion();
+                    quaternion.setFromAxisAngle( axis, -angle );
+
+                    ic.mdl.quaternion.copy(thisClass.startQuaternion);
+                    ic.mdl.quaternion.multiplyQuaternions(quaternion, ic.mdl.quaternion);
                 }
             });
-
+*/
             ic.gestures.addEventListener('pinch', (ev) => { // two fingers opening or closing
                 if(ev.initialise !== undefined) {
+                    thisClass.startPosition = ic.mdl.position.clone();
                     thisClass.startScale = ic.mdl.scale.clone();                   
                 }
                 else {
-                    const scale = thisClass.startScale.clone().multiplyScalar(ev.scale);                  
+                    let zoomSpeed = 1.0;
+                    const scale = thisClass.startScale.clone().multiplyScalar(ev.scale * zoomSpeed);                  
                     ic.mdl.scale.copy(scale);
                 }
             });
- 
+/* 
             ic.gestures.addEventListener('rotate', (ev) => { // two fingers rotating around
                 if(ev.initialise !== undefined) {
                     thisClass.startQuaternion = ic.mdl.quaternion.clone();
@@ -22047,10 +22087,17 @@ class Scene {
                     ic.mdl.quaternion.copy(thisClass.startQuaternion);
                     ic.mdl.rotateY(ev.theta);
                 }
-            });                             
+            });  
+*/                                       
         }
     }
 
+    positionCenter() { let ic = this.icn3d; ic.icn3dui;
+        const controller = ic.gestures.controller1; 
+        ic.mdl.position.set( -0.06, 0, - 0.6 ).applyMatrix4( controller.matrixWorld );
+        ic.mdl.scale.copy(new THREE.Vector3( 0.005, 0.005, 0.005 )); 
+    }
+
     setVrArButtons() { let ic = this.icn3d, me = ic.icn3dui;
         // call just once
         ic.bSetVrArButtons = true;
@@ -32119,13 +32166,13 @@ class Alternate {
 
             if ( ic.renderer.xr.isPresenting){    
                 if(ic.canvasUI) ic.canvasUI.update();
-                if(ic.canvasUILog) ic.canvasUILog.update();
+                //if(ic.canvasUILog) ic.canvasUILog.update();
             }
         }
         else if(ic.bAr) {
             if ( ic.renderer.xr.isPresenting ){    
                 ic.gestures.update();
-                if(ic.canvasUILog) ic.canvasUILog.update();
+                //if(ic.canvasUILog) ic.canvasUILog.update();
             }
         }
 
@@ -40601,11 +40648,12 @@ class ShowAnno {
             }
             else if(me.cfg.blast_rep_id == chnid && ic.seqStructAlignData === undefined && ic.seqStructAlignDataSmithwm === undefined) {
               let title;
-              if(me.cfg.query_id.length > 14) {
-                  title = 'Query: ' + me.cfg.query_id.substr(0, 6) + '...';
+              let query_id = (me.cfg.oriQuery_id) ? me.cfg.oriQuery_id : me.cfg.query_id;
+              if(query_id.length > 14) {
+                  title = 'Query: ' + query_id.substr(0, 6) + '...';
               }
               else {
-                  title =(isNaN(me.cfg.query_id)) ? 'Query: ' + me.cfg.query_id : 'Query: gi ' + me.cfg.query_id;
+                  title =(isNaN(me.cfg.query_id)) ? 'Query: ' + query_id : 'Query: gi ' + query_id;
               }
               let compTitle = undefined;
               let compText = undefined;
@@ -40618,11 +40666,12 @@ class ShowAnno {
             }
             else if(me.cfg.blast_rep_id == chnid && (ic.seqStructAlignData !== undefined || ic.seqStructAlignDataSmithwm !== undefined) ) { // align sequence to structure
               let title;
-              if(me.cfg.query_id.length > 14) {
-                  title = 'Query: ' + me.cfg.query_id.substr(0, 6) + '...';
+              let query_id = (me.cfg.oriQuery_id) ? me.cfg.oriQuery_id : me.cfg.query_id;
+              if(query_id.length > 14) {
+                  title = 'Query: ' + query_id.substr(0, 6) + '...';
               }
               else {
-                  title =(isNaN(me.cfg.query_id)) ? 'Query: ' + me.cfg.query_id : 'Query: gi ' + me.cfg.query_id;
+                  title =(isNaN(me.cfg.query_id)) ? 'Query: ' + query_id : 'Query: gi ' + query_id;
               }
             
               let evalue, targetSeq, querySeq, segArray;
@@ -41110,7 +41159,7 @@ class ShowSeq {
         }
         if(me.cfg.blast_rep_id == chnid) {
           // change color in 3D
-          ic.opts['color'] = 'conservation';
+          ic.opts['color'] = (ic.blastAcxn) ? 'confidence' : 'conservation';
           ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
           // remove highlight
           //ic.hlUpdateCls.removeHlSeq();
@@ -41400,14 +41449,14 @@ class ShowSeq {
 
         // set hash for the loops
         let strand2len_start_stop = {};
-        let prevRefnumStr, prevPostfix;
+        let prevRefnumStr, prevPostfix, prevRefnum;
 
         // sometimes one chain may have several Ig domains,set a index for each IgDomain
-        let index = 1;
+        let index = 1, prevStrandPostfix = '', bStart = false;
         for(let i = 0, il = giSeq.length; i < il; ++i) {
             let currResi = ic.ParserUtilsCls.getResi(chnid, i);
             let residueid = chnid + '_' + currResi;
-            if(ic.residues.hasOwnProperty(residueid)) {
+            //if(ic.residues.hasOwnProperty(residueid)) {
                 refnumLabel = ic.resid2refnum[residueid];
                 if(refnumLabel) {                        
                     refnumStr_ori = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
@@ -41425,27 +41474,37 @@ class ShowSeq {
                                 strand2len_start_stop[prevStrand + prevPostfix].len = currCnt - 1;
                                 strand2len_start_stop[prevStrand + prevPostfix].end = refnumStr;
                                 strand2len_start_stop[prevStrand + prevPostfix].nextStrand = currStrand;
-
-                                console.log("end: " + residueid);
                             }
 
+                            bStart = false;
+
                             currCnt = 1;
                         }
 
+                        // sometimes insertions may happen inside a strand. Reset currCnt
+                        if(currStrand == prevStrand && refnum > 1000 && refnumStr.substr(1,1) != '9') { // strand region
+                            currCnt = 1;
+                            
+                            if(bStart && prevStrandPostfix) {
+                                delete strand2len_start_stop[prevStrandPostfix];
+                                prevStrandPostfix = '';
+                            }
+                        }
+
                         // #9##
-                        if(prevStrand && refnum > 1000 && refnumStr.substr(1,1) == '9') { // loop region
+                        if(prevStrand && currStrand != ' ' && refnum > 1000 && refnumStr.substr(1,1) == '9') { // loop region
                             if(currCnt == 1) { // start of a loop
                                 if(strand2len_start_stop.hasOwnProperty(currStrand + postfix)) { // the strand appeared in 2nd Id domain
                                     ++index;
                                 }
-
-                                console.log("start: " + residueid + " refnumStr: " + refnumStr);
                                 
                                 postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
                                 strand2len_start_stop[currStrand + postfix] = {};
 
                                 strand2len_start_stop[currStrand + postfix].start = prevRefnumStr;
                                 strand2len_start_stop[currStrand + postfix].chainid = chnid;
+
+                                //prevStrandPostfix = currStrand + postfix;
                             }
                             refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
                             refnumLabel = currStrand + refnumStr;
@@ -41455,7 +41514,7 @@ class ShowSeq {
                     }
                 }
                 else {
-                    if(prevStrand && !bCustom && !kabat_or_imgt) {
+                    if(prevStrand && currStrand != ' ' && !bCustom && !kabat_or_imgt) {
                         if(currCnt == 1) { // start of a loop
                             if(strand2len_start_stop.hasOwnProperty(currStrand + postfix)) { // the strand appeared in 2nd Id domain
                                 ++index;
@@ -41468,8 +41527,11 @@ class ShowSeq {
 
                             strand2len_start_stop[currStrand + postfix].start = prevRefnumStr;
                             strand2len_start_stop[currStrand + postfix].chainid = chnid;
-                        }
 
+                            prevStrandPostfix = currStrand + postfix;
+                            bStart = true;
+                        }
+                        
                         // no ref num
                         refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
                         refnumLabel = currStrand + refnumStr;
@@ -41478,8 +41540,9 @@ class ShowSeq {
                 }
 
                 prevRefnumStr = refnumStr;
+                prevRefnum = refnum;
                 prevPostfix = postfix;
-            }
+            //}
 
             prevStrand = currStrand;
         }
@@ -41488,11 +41551,13 @@ class ShowSeq {
             strand2len_start_stop[prevStrand + prevPostfix].end = prevRefnumStr;
             //strand2len_start_stop[prevStrand].nextStrand = undefined;
         }
-
+        
         let refnumLabelNoPostfix;
         // sometimes one chain may have several Ig domains,set a index for each IgDomain
         index = 1;
-        let appearedStrands = {}, currStrand_ori;
+        prevStrandPostfix = '';
+        bStart = false;
+        let appearedStrands = {}, currStrand_ori, bShowRefnum = true;
         for(let i = 0, il = giSeq.length; i < il; ++i) {
             bLoop = false;
 
@@ -41501,12 +41566,12 @@ class ShowSeq {
             let currResi = ic.ParserUtilsCls.getResi(chnid, i);
             let residueid = chnid + '_' + currResi;
             let domainid = (bCustom) ? 0 : ic.resid2domainid[residueid];
-            if(!ic.residues.hasOwnProperty(residueid)) {
-                html += '<span></span>';
-            }
-            else {
+            //if(!ic.residues.hasOwnProperty(residueid)) {
+            //    html += '<span></span>';
+            //}
+            //else {
                 refnumLabel = ic.resid2refnum[residueid];
-                let bNotShow = false;
+                let bHidelabel = false;
 
                 if(refnumLabel) {                        
                     refnumStr_ori = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
@@ -41517,7 +41582,8 @@ class ShowSeq {
 
                     refnumLabelNoPostfix = currStrand + parseInt(refnumStr_ori);
 
-                    if(currStrand != prevStrand) { // reset currCnt
+                    if(currStrand_ori != prevStrand) { // reset currCnt
+                        bStart = false;
                         currCnt = 1;
                     }
 
@@ -41535,30 +41601,44 @@ class ShowSeq {
                         refnum = parseInt(refnumStr);
                         postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
 
+                        // sometimes insertions may happen inside a strand. Reset currCnt
+                        if(currStrand_ori == prevStrand && refnum > 1000 && refnumStr.substr(1,1) != '9') { // strand region
+                            currCnt = 1;
+                            
+                            if(bStart && prevStrandPostfix) {
+                                --index;
+                                prevStrandPostfix = '';
+                            }
+                        }
+
                         // #9##
                         if(prevStrand && refnum > 1000 && refnumStr.substr(1,1) == '9') { // loop region
                             bLoop = true;
 
                             if(currCnt == 1) { // start of a loop
-                                if(appearedStrands.hasOwnProperty(currStrand + postfix)) { // the strand appeared in 2nd Id domain
+                                if(appearedStrands.hasOwnProperty(currStrand_ori + postfix)) { // the strand appeared in 2nd Id domain
                                     ++index;
                                     postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
                                 }
 
-                                appearedStrands[currStrand + postfix] = 1;
+                                appearedStrands[currStrand_ori + postfix] = 1;
                             }
 
-                            let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix);
-                            
+                            let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand_ori, currCnt, currFirstDigit, postfix, prevRefnum);
+
+                            refnum = result.refnum;
+                            bShowRefnum = result.bShowRefnum;
                             refnumStr = result.refnumStr;
                             refnumLabel = result.refnumLabel;
                             refnumLabelNoPostfix = result.refnumLabelNoPostfix;
 
-                            bNotShow = result.bNotShow;
+                            bHidelabel = result.bHidelabel;
                             currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
 
                             ++currCnt;
                         }
+
+                        prevRefnum = refnum;
                     }
                 
                     if(bCustom) {
@@ -41596,40 +41676,59 @@ class ShowSeq {
                         }
                     }
                     else {
-                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow);
+                        if(bShowRefnum && currStrand != ' ') {
+                            html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel);
+                        }
+                        else {
+                            html += '<span></span>';
+                        }
                     }
                 }
                 else {
                     let atom = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[residueid]);
 
                     // skip non-protein residues
-                    if(ic.proteins.hasOwnProperty(atom.serial) && prevStrand && !bCustom && !kabat_or_imgt) {
+                    // after G strand and before A strand, just use the mapped reference number
+                    if((!atom || ic.proteins.hasOwnProperty(atom.serial)) && prevStrand && !bCustom && !kabat_or_imgt
+                      && currStrand_ori.substr(0,1) != 'G') {
                         // no ref num
                         bLoop = true;
 
                         if(currCnt == 1) { // start of a loop
-                            if(appearedStrands.hasOwnProperty(currStrand + postfix)) { // the strand appeared in 2nd Id domain
+                            if(appearedStrands.hasOwnProperty(currStrand_ori + postfix)) { // the strand appeared in 2nd Id domain
                                 ++index;
                             }
                             
                             postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
 
-                            appearedStrands[currStrand + postfix] = 1;
+                            appearedStrands[currStrand_ori + postfix] = 1;
+
+                            bStart = true;
+                            prevStrandPostfix = currStrand_ori + postfix;
                         }
 
                         // use previous postfix
-                        let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix);
-                            
+                        let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand_ori, currCnt, currFirstDigit, postfix, prevRefnum);
+
+                        refnum = result.refnum;
+                        bShowRefnum = result.bShowRefnum;                        
                         refnumStr = result.refnumStr;
                         refnumLabel = result.refnumLabel;
                         refnumLabelNoPostfix = result.refnumLabelNoPostfix;
 
-                        bNotShow = result.bNotShow;
+                        prevRefnum = refnum;
+
+                        bHidelabel = result.bHidelabel;
                         currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
                   
                         ++currCnt;
 
-                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow);
+                        if(bShowRefnum && currStrand != ' ') {
+                            html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel);
+                        }
+                        else {
+                            html += '<span></span>';
+                        }
                     }
                     else {
                         html += '<span></span>';
@@ -41653,7 +41752,7 @@ class ShowSeq {
                 // remove the postfix when comparing interactions
                 //ic.chainsMapping[chnid][residueid] = refnumLabel;
                 ic.chainsMapping[chnid][residueid] = refnumLabelNoPostfix;
-            }
+            //}
 
             prevStrand = currStrand_ori; //currStrand;
         }
@@ -41668,10 +41767,11 @@ class ShowSeq {
         return {html: html, html3: html3}
     }
 
-    getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix) { let ic = this.icn3d; ic.icn3dui;
-        let refnumStr, refnumLabel, refnumLabelNoPostfix;
+    getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix, prevRefnum) { let ic = this.icn3d; ic.icn3dui;
+        let refnum, refnumStr, refnumLabel, refnumLabelNoPostfix;
 
-        let bNotShow = false; // do not show the label
+        let bHidelabel = false; // do not show the label
+        let bShowRefnum = true;
 
         if(strand2len_start_stop[currStrand + postfix]) {
             let start = parseInt(strand2len_start_stop[currStrand + postfix].start);
@@ -41683,7 +41783,6 @@ class ShowSeq {
             let len = strand2len_start_stop[currStrand + postfix].len;
             let halfLen = (strand2len_start_stop[currStrand + postfix].nextStrand) ? parseInt(len / 2.0 + 0.5) : len;
 
-            let refnum;
             if(currCnt <= halfLen) {
                 refnum = start + currCnt;
                 refnumStr = refnum + postfixStart;
@@ -41698,25 +41797,36 @@ class ShowSeq {
 
             refnumLabelNoPostfix = currStrand + refnum;
 
-            if(currCnt == 0 || currCnt == halfLen || currCnt == halfLen + 1 || currCnt == end - 1) {
-                bNotShow = true;
+            //if(currCnt == 0 || currCnt == halfLen || currCnt == halfLen + 1 || currCnt == end - 1) {
+            if(currCnt == 1 || currCnt == halfLen || currCnt == halfLen + 1 || currCnt == end - 1) {
+                bHidelabel = true;
+            }
+
+            if(currCnt == 1 && start != prevRefnum) { // skip insertions
+                bShowRefnum = false;
+                
+                refnum = 0;
+                refnumStr = '';
+                refnumLabel = '';
+                refnumLabelNoPostfix = '';
             }
         }
         else {
             // refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
             // refnumLabel = currStrand + refnumStr;
 
+            refnum = 0;
             refnumStr = '';
             refnumLabel = '';
             refnumLabelNoPostfix = '';
 
-            bNotShow = true;
+            bHidelabel = true;
         }
 
-        return {refnumStr: refnumStr, refnumLabel: refnumLabel, refnumLabelNoPostfix: refnumLabelNoPostfix, bNotShow: bNotShow};
+        return {refnum: refnum, refnumStr: refnumStr, refnumLabel: refnumLabel, refnumLabelNoPostfix: refnumLabelNoPostfix, bHidelabel: bHidelabel, bShowRefnum: bShowRefnum};
     }
 
-    getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow) { let ic = this.icn3d, me = ic.icn3dui;
+    getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel) { let ic = this.icn3d, me = ic.icn3dui;
         let refnum = parseInt(refnumStr).toString();
         let color = this.getRefnumColor(currStrand);
         let colorStr = 'style="color:' + color + '"';
@@ -41732,7 +41842,7 @@ class ShowSeq {
 
             html += '<span ' + colorStr + ' title="' + refnumLabel + '"><b>' + refnumLabel.substr(0, 1) + '</b>' + refnumLabel.substr(1) + '</span>';
         }
-        else if(lastTwo % 2 == 0 && lastTwo != 52 && !bNotShow) { // don't show label for the first, middle, and last loop residues
+        else if(lastTwo % 2 == 0 && lastTwo != 52 && !bHidelabel) { // don't show label for the first, middle, and last loop residues
             // e.g., 2152a
             let lastTwoStr = isNaN(refnumStr) ? lastTwo + refnumStr.substr(refnumStr.length - 1, 1) : lastTwo;
             html += '<span ' + colorStr + ' title="' + refnumLabel + '">' + lastTwoStr + '</span>';
@@ -43147,6 +43257,8 @@ class LineGraph {
     drawGraphPerType(bCommonDiff, structureArray, bScatterplot, nodeArray1, nodeArray2, linkArray, name2node, heightFinal, height, textHeight, len1Split, r, gap, marginY) { let ic = this.icn3d; ic.icn3dui;
         let html = "";
 
+        let bMutation = structureArray.length == 2 && structureArray[1].replace(structureArray[0], '') == '2';
+
         // draw common interaction
         let label, postfix;
         if(bCommonDiff == 0) {
@@ -43163,11 +43275,21 @@ class LineGraph {
         }
 
         for(let i = 0, il = structureArray.length; i < il; ++i) {  
+            let labelFinal = label;
+            if(bMutation) {
+                if(i == 0) {
+                    labelFinal += "Wild Type ";
+                }
+                else if(i == 1) {
+                    labelFinal += "Mutant ";
+                }
+            }
+
             if(bScatterplot) {
-                html += this.drawScatterplot_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, undefined, label + structureArray[i], textHeight);
+                html += this.drawScatterplot_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, undefined, labelFinal + structureArray[i], textHeight);
                 height =(len1Split[i] + 1) *(r + gap) + 2 * marginY + textHeight;
             } else {
-                html += this.drawLineGraph_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, label + structureArray[i], textHeight);
+                html += this.drawLineGraph_base(nodeArray1[i], nodeArray2[i], linkArray[i], name2node, heightFinal, labelFinal + structureArray[i], textHeight);
             }
             heightFinal += height;
 
@@ -54015,6 +54137,16 @@ class LoadPDB {
         this.icn3d = icn3d;
     }
 
+    getStructureId(id, moleculeNum, bMutation) { let ic = this.icn3d; ic.icn3dui;
+        let structure = id;
+    
+        if(id == ic.defaultPdbId || bMutation) { // bMutation: side chain prediction
+            structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
+        }
+
+        return structure;
+    }
+
     // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
     //This PDB parser feeds the viewer with the content of a PDB file, pdbData.
     loadPDB(src, pdbid, bOpm, bVector, bMutation, bAppend, type, bLastQuery) { let ic = this.icn3d, me = ic.icn3dui;
@@ -54097,12 +54229,7 @@ class LoadPDB {
                     }
                 }
 
-                structure = id;
-
-                if(id == ic.defaultPdbId || bMutation) { // bMutation: side chain prediction
-                //if(id == ic.defaultPdbId) {
-                        structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
-                }
+                structure = this.getStructureId(id, moleculeNum, bMutation);
 
                 ic.molTitle = '';
 
@@ -54217,12 +54344,7 @@ class LoadPDB {
                 ++moleculeNum;
                 id = ic.defaultPdbId;
 
-                structure = id;
-                
-                if(id == ic.defaultPdbId || bMutation) { // bMutation: side chain prediction
-                //if(id == ic.defaultPdbId) {
-                        structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
-                }
+                structure = this.getStructureId(id, moleculeNum, bMutation);
 
                 //helices = [];
                 //sheets = [];
@@ -54241,12 +54363,7 @@ class LoadPDB {
                     ic.pmid = line.substr(19).trim();
                 }
             } else if (record === 'ATOM  ' || record === 'HETATM') {
-                structure = id;
-                
-                if(id == ic.defaultPdbId || bMutation) { // bMutation: side chain prediction
-                //if(id == ic.defaultPdbId) {
-                        structure = (moleculeNum === 1) ? id : id + moleculeNum.toString();
-                }
+                structure = this.getStructureId(id, moleculeNum, bMutation);
 
                 let alt = line.substr(16, 1);
                 //if (alt !== " " && alt !== "A") continue;
@@ -58995,7 +59112,7 @@ class SelectByCommand {
            // $1,2,3: Structure
            // .A,B,C: chain
            // :5-10,K,chemicals: residues, could be 'proteins', 'nucleotides', 'chemicals', 'ions', and 'water'
-           // @CA,C: atoms
+           // @CA,C,C*: atoms
            // wild card * can be used to select all
            //var currHighlightAtoms = {}
 
@@ -59045,7 +59162,7 @@ class SelectByCommand {
              testStr = testStr.substr(0, dollarPos);
            }
 
-           if(atomStrArray.length == 1 && atomStrArray[0] !== '*') {
+           if(atomStrArray.length > 1 || (atomStrArray.length == 1 && atomStrArray[0] !== '*')) {
              bSelectResidues = false; // selected atoms
            }
 
@@ -59140,7 +59257,7 @@ class SelectByCommand {
                      let residArray = [];
 
                      if(bRefnum) {
-                      let residArrayTmp = ic.refnum2residArray[k];
+                      let residArrayTmp = (ic.refnum2residArray[k]) ? ic.refnum2residArray[k] : [];
                       for(let m = 0, ml = residArrayTmp.length; m < ml; ++m) {
                         let residueId = residArrayTmp[m];
                         if(residueId.substr(0, residueId.lastIndexOf('_')) == molecule_chain) {
@@ -59168,17 +59285,16 @@ class SelectByCommand {
                         for(let m in ic.residues[residueId]) {
                           for(let n = 0, nl = atomStrArray.length; n < nl; ++n) {
                               let atomStr = atomStrArray[n];
-                              if(atomStr === '*' || atomStr === ic.atoms[m].name) {
-                                if(i === 0) {
-                                    //currHighlightAtoms[m] = 1;
-                                    atomHash[m] = 1;
-                                }
-                                else {
-                                    //if(!currHighlightAtoms.hasOwnProperty(m)) currHighlightAtoms[m] = undefined;
-                                    //if(!atomHash.hasOwnProperty(m)) atomHash[m] = undefined;
-                                    if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
-                                }
-                              }
+                              atomHash = this.processAtomStr(atomStr, atomHash, i, m);
+                              
+                              // if(atomStr === '*' || atomStr === ic.atoms[m].name) {
+                              //   if(i === 0) {
+                              //       atomHash[m] = 1;
+                              //   }
+                              //   else {
+                              //       if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
+                              //   }
+                              // }
                           }
                         }
                       } // end for(let l = 0, 
@@ -59211,17 +59327,16 @@ class SelectByCommand {
                          for(let n = 0, nl = atomStrArray.length; n < nl; ++n) {
                              let atomStr = atomStrArray[n];
 
-                             if(atomStr === '*' || atomStr === ic.atoms[m].name) {
-                                 if(i === 0) {
-                                     //currHighlightAtoms[m] = 1;
-                                     atomHash[m] = 1;
-                                 }
-                                 else {
-                                     //if(!currHighlightAtoms.hasOwnProperty(m)) currHighlightAtoms[m] = undefined;
-                                     //if(!atomHash.hasOwnProperty(m)) atomHash[m] = undefined;
-                                     if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
-                                 }
-                             }
+                             atomHash = this.processAtomStr(atomStr, atomHash, i, m);
+
+                            //  if(atomStr === '*' || atomStr === ic.atoms[m].name) {
+                            //      if(i === 0) {
+                            //          atomHash[m] = 1;
+                            //      }
+                            //      else {
+                            //          if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
+                            //      }
+                            //  }
                          }
 
                        }
@@ -59276,18 +59391,9 @@ class SelectByCommand {
 
                              for(let m in ic.residues[residueId]) {
                                for(let n = 0, nl = atomStrArray.length; n < nl; ++n) {
-                                   let atomStr = atomStrArray[n];
-                                   if(atomStr === '*' || atomStr === ic.atoms[m].name) {
-                                     if(i === 0) {
-                                         //currHighlightAtoms[m] = 1;
-                                         atomHash[m] = 1;
-                                     }
-                                     else {
-                                         //if(!currHighlightAtoms.hasOwnProperty(m)) currHighlightAtoms[m] = undefined;
-                                         //if(!atomHash.hasOwnProperty(m)) atomHash[m] = undefined;
-                                         if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
-                                     }
-                                   }
+                                  let atomStr = atomStrArray[n];
+
+                                  atomHash = this.processAtomStr(atomStr, atomHash, i, m);
                                }
                              }
                            } // for
@@ -59323,6 +59429,34 @@ class SelectByCommand {
            if(!bNoUpdateAll) ic.definedSetsCls.changeCustomAtoms(nameArray);
        }
     }
+
+    processAtomStr(atomStr, atomHash, i, m) {  let ic = this.icn3d; ic.icn3dui;                           
+        let atomStrLen = atomStr.length;
+        let lastChar = atomStr.substr(atomStrLen - 1, 1);
+
+        if(lastChar == '*' && atomStrLen > 1) { // wildcard to replace anything with *
+          if(atomStr.substr(0, atomStrLen - 1) === ic.atoms[m].name.substr(0, atomStrLen - 1)) {
+            if(i === 0) {
+                atomHash[m] = 1;
+            }
+            else {
+                if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
+            }
+          }
+        }
+        else {
+          if(atomStr === '*' || atomStr === ic.atoms[m].name) {
+            if(i === 0) {
+                atomHash[m] = 1;
+            }
+            else {
+                if(!atomHash.hasOwnProperty(m)) delete atomHash[m];
+            }
+          }
+        } 
+
+        return atomHash;
+    }
 }
 
 /**
@@ -61563,12 +61697,12 @@ if(!me.bNode) {
 }
 
             let prevStrand;
+            let bCd19 = ic.chainid2index[chainid].length == 1 && ic.refpdbArray[ic.chainid2index[chainid][0]] == '6al5_cd19';
             for(let i = 0, il = segArray.length; i < il; ++i) {
                 let seg = segArray[i];
                 let qStart = seg.q_start;
                 parseInt(seg.q_start);
-                let postfix = '';
-                if(isNaN(seg.q_start)) postfix = seg.q_start.substr(seg.q_start.length - 1, 1);
+                if(isNaN(seg.q_start)) seg.q_start.substr(seg.q_start.length - 1, 1);
 
                 // one item in "seq"
                 // q_start and q_end are numbers, but saved in string
@@ -61579,9 +61713,10 @@ if(!me.bNode) {
 
                     let resid = chainid + '_' + seg.t_start;
                     //let refnum = qStartInt.toString() + postfix;
-                    let refnum = qStart + postfix;
+                    //let refnum = qStart + postfix;
+                    let refnum = qStart;
 
-                    let refnumLabel = thisClass.getLabelFromRefnum(refnum, prevStrand);
+                    let refnumLabel = thisClass.getLabelFromRefnum(refnum, prevStrand, bCd19);
                     prevStrand = refnumLabel.replace(new RegExp(refnum,'g'), '');
 
                     ic.resid2refnum[resid] = refnumLabel;
@@ -61616,7 +61751,7 @@ if(!me.bNode) {
         }
     }
 
-    getLabelFromRefnum(oriRefnum, prevStrand) { let ic = this.icn3d; ic.icn3dui;
+    getLabelFromRefnum(oriRefnum, prevStrand, bCd19) { let ic = this.icn3d; ic.icn3dui;
         let refnum = parseInt(oriRefnum);
 
         // A^: 1xx or 2xx
@@ -61634,7 +61769,10 @@ if(!me.bNode) {
         // G*: 94xx
 
         if(refnum < 100) return " " + oriRefnum;
-        else if(refnum >= 100 && refnum < 1000) return "A^" + oriRefnum;
+        else if(refnum >= 100 && refnum < 1000) {
+            if(bCd19) return " " + oriRefnum;
+            else return "A^" + oriRefnum;
+        }
         else if(refnum >= 1000 && refnum < 1200) return "A" + oriRefnum;
         else if(refnum >= 1200 && refnum < 1300) return "A'" + oriRefnum;
         else if(refnum >= 1300 && refnum < 1400) return "A*" + oriRefnum;
@@ -61816,7 +61954,7 @@ class Scap {
 
         let data;
          
-        try {
+        // try {
           data = await me.getAjaxPostPromise(url, dataObj, true, undefined, undefined, undefined, 'text');
 
           let pos = data.indexOf('\n');
@@ -61906,8 +62044,10 @@ console.log("free energy: " + energy + " kcal/mol");
 
                   let atomWT = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid]);
 
-                  ic.atoms[serial].color = atomWT.color;
-                  ic.atomPrevColors[serial] = atomWT.color;
+                  if(atomWT) {
+                    ic.atoms[serial].color = atomWT.color;
+                    ic.atomPrevColors[serial] = atomWT.color;
+                  }
               }
 
               let chainid = atom.structure + '_' + atom.chain;
@@ -61973,6 +62113,7 @@ console.log("free energy: " + energy + " kcal/mol");
           // expand the toolbar
           let id = ic.pre + 'selection';
           $("#" + id).show();
+/*
         }
         catch(err) {
             var aaa = 1; //alert("There are some problems in predicting the side chain of the mutant...");
@@ -61982,6 +62123,7 @@ console.log("free energy: " + energy + " kcal/mol");
             /// if(ic.deferredScap !== undefined) ic.deferredScap.resolve();
             return;
         }
+        */
     }
 
     async exportPdbProfix(bHydrogen, pdb, snpStr) { let ic = this.icn3d, me = ic.icn3dui;
@@ -66321,7 +66463,11 @@ class SaveFile {
             $("#" + ic.pre + "title").html(title);
         }
         else if(me.cfg.blast_rep_id) {
-            text = 'Query: ' + me.cfg.query_id + '; target: ' + me.cfg.blast_rep_id;
+            let query_id = (me.cfg.oriQuery_id) ? me.cfg.oriQuery_id : me.cfg.query_id;
+            let blast_rep_id = (me.cfg.oriBlast_rep_id) ? me.cfg.oriBlast_rep_id : me.cfg.blast_rep_id;
+            if(query_id.length > 20) query_id = query_id.substr(0, 17) + '...';
+            
+            text = 'Query: ' + query_id + '; target: ' + blast_rep_id;
             $("#" + ic.pre + "title").html(text + ", " + title);
         }
         else {
@@ -68972,7 +69118,7 @@ class iCn3D {
             // }
             // else { // WebGL2 supports EXT_frag_depth and ANGLE_instanced_arrays
                 this.bExtFragDepth = true;
-                this.bImpo = false; //true; 
+                this.bImpo = true; 
 
                 //console.log('WebGL2 is supported. Thus EXT_frag_depth and ANGLE_instanced_arrays are supported. All spheres and cylinders are drawn using shaders. Assembly is drawn with one copy of the asymmetric unit using hardware instancing.');
             // }
@@ -69547,7 +69693,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.23.0';
+    this.REVISION = '3.23.1';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -69841,6 +69987,9 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     else if(me.cfg.blast_rep_id !== undefined) {
        // ic.bNCBI = true;
        ic.inputid =  me.cfg.query_id + ',' + me.cfg.blast_rep_id;
+       
+       me.cfg.oriQuery_id = me.cfg.query_id;
+       me.cfg.oriBlast_rep_id = me.cfg.blast_rep_id;
 
        // custom seqeunce has query_id such as "Query_78989" in BLAST
        if(me.cfg.query_id.substr(0,5) !== 'Query' && me.cfg.rid === undefined) {