icn3d 3.23.0 → 3.23.1

package/icn3d.js

@@ -11764,7 +11764,7 @@ class Events {
         $("#" + me.pre + id).resizable();
     }
 
-    async launchMmdb(ids, bBiounit, hostUrl) { let me = this.icn3dui, ic = me.icn3d;
+    async launchMmdb(ids, bBiounit, hostUrl) { let me = this.icn3dui, ic = me.icn3d, thisClass = this;
         if(!me.cfg.notebook) dialog.dialog( "close" );
         
         let flag = bBiounit ? 1 : 0;
@@ -11777,9 +11777,9 @@ class Events {
             return;
         }
 
-        /*
         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';
@@ -11792,21 +11792,28 @@ class Events {
         }
         */
 
-        // remove space
-        me.cfg.mmdbafid = ids;
-        me.cfg.bu = flag;
-
-        ic.bMmdbafid = true;
-        ic.inputid = 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;
 
-        await ic.chainalignParserCls.downloadMmdbAf(me.cfg.mmdbafid);   
+            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);   
+        }
     }
 
     //Hold all functions related to click events.
@@ -20611,11 +20618,13 @@ class ControllerGestures extends THREE.EventDispatcher{
             
             //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 (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++;
@@ -20686,9 +20695,11 @@ class ControllerGestures extends THREE.EventDispatcher{
                 switch( data1.taps ){
                     case 1:
                         this.dispatchEvent( { type: 'tap', position: this.controller1.position, matrixWorld: this.controller1.matrixWorld } );
+                        data1.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 } );
@@ -20708,39 +20719,38 @@ class ControllerGestures extends THREE.EventDispatcher{
                     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 ){
+                        data1.startPosition.distanceTo( data2.startPosition );
+                        this.controller1.position.distanceTo( this.controller2.position );
+                        //if ( Math.abs(delta) > 0.01 ){
+                        if(data1.prevTap == 'tap') {
                             this.type = 'pinch';
                             this.startDistance = this.controller1.position.distanceTo( this.controller2.position );
                             this.dispatchEvent( { type: 'pinch', delta: 0, scale: 1, initialise: true } );
-                        }else {
+                        }else { // data1.prevTap == 'doubletap'
                             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){
+                            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 );
+                    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){
+                    // 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'){
@@ -21899,16 +21909,15 @@ class Scene {
         // 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.dolly) {       
         if(ic.bVr) {      
             ic.canvasUI = this.createUI();
+
             //ic.canvasUILog = this.createUILog();
-            // add canvasUI
-            //ic.cam.add( ic.canvasUI.mesh );
             //ic.cam.add( ic.canvasUILog.mesh );
 
-            //ic.cam.remove( ic.canvasUI.mesh );
-
             ic.raycasterVR = new THREE.Raycaster();
             ic.workingMatrix = new THREE.Matrix4();
             ic.workingVector = new THREE.Vector3();
@@ -21982,67 +21991,63 @@ class Scene {
             });        
         }      
         else if(ic.bAr) {
+            // the menu didn't work in AR
+            // ic.canvasUILog = this.createUILog();
+            // ic.cam.add( ic.canvasUILog.mesh );
+            
             //Add gestures here
             ic.gestures = new ControllerGestures(ic.renderer);
             ic.scene.add(ic.gestures.controller1);
             ic.scene.add(ic.gestures.controller2);
 
+            // firts "tap", then "pinch" event
             ic.gestures.addEventListener('tap', (ev) => {
-                //if(!ic.mdl.visible) {
-                //    ic.mdl.visible = true;
-                //}
+                // 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, 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.mdl.position.set( -0.06, 0, - 0.6 ).applyMatrix4( controller.matrixWorld );
+                ic.mdl.scale.copy(new THREE.Vector3( 0.005, 0.005, 0.005 )); 
             });
 
+            // first "doubletap", then "rotate" event
             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('pan', (ev) => { // touch across screen, move
+                if(ev.initialise !== undefined) {
+                    thisClass.startPosition = ic.mdl.position.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);
+                }
             });
 
-            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('pinch', (ev) => { // two fingers opening or closing
+                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);
-                // }
-            });  
-*/                            
+            ic.gestures.addEventListener('rotate', (ev) => { // two fingers rotating around
+                if(ev.initialise !== undefined) {
+                    thisClass.startQuaternion = ic.mdl.quaternion.clone();
+                }
+                else {
+                    ic.mdl.quaternion.copy(thisClass.startQuaternion);
+                    ic.mdl.rotateY(ev.theta);
+                }
+            });                             
         }
     }
 
@@ -22237,7 +22242,7 @@ class Scene {
                     ic.cam.remove( ic.canvasUI.mesh );
                  }
                  catch(err) {
-                    ic.canvasUILog.updateElement( "info", "ERROR: " + err );
+                    //ic.canvasUILog.updateElement( "info", "ERROR: " + err );
                  }
             } },
             // delphi: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 2*(btnWidth + margin)}, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
@@ -22319,14 +22324,13 @@ class Scene {
             renderer: ic.renderer
         };
         const content = {
-            info: ""
+            info: "Debug info"
         };
 
         const ui = new CanvasUI( content, config );
-        
-        //ui.mesh.position.set( 0, 1.5, -1.2 );
-        //ui.mesh.position.set( 0, 0, -1.2 );
-        ui.mesh.position.set( 0, -2, -3 );
+
+        //ui.mesh.position.set( 0, -2, -3 ); // VR
+        ui.mesh.position.set( 0, -1, -2 ); // AR
 
         return ui;
     }
@@ -32115,12 +32119,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();
             }
         }
 
@@ -41397,6 +41402,8 @@ class ShowSeq {
         let strand2len_start_stop = {};
         let prevRefnumStr, prevPostfix;
 
+        // sometimes one chain may have several Ig domains,set a index for each IgDomain
+        let index = 1;
         for(let i = 0, il = giSeq.length; i < il; ++i) {
             let currResi = ic.ParserUtilsCls.getResi(chnid, i);
             let residueid = chnid + '_' + currResi;
@@ -41409,7 +41416,7 @@ class ShowSeq {
 
                     refnumStr = refnumStr_ori;
                     refnum = parseInt(refnumStr);
-                    postfix = refnumStr.replace(refnum.toString(), '');
+                    postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
 
                     if(!bCustom && !kabat_or_imgt) {
                         if(currStrand != prevStrand) { // reset currCnt
@@ -41418,26 +41425,51 @@ 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);
                             }
 
                             currCnt = 1;
                         }
 
                         // #9##
-                        if(prevStrand && refnumStr.substr(1,1) == '9') { // loop region
+                        if(prevStrand && 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;
                             }
                             refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
                             refnumLabel = currStrand + refnumStr;
+                            
                             ++currCnt;
                         }
                     }
                 }
                 else {
                     if(prevStrand && !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;
+                                postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
+                                strand2len_start_stop[currStrand + postfix] = {};
+                            }
+                            else {
+                                strand2len_start_stop[currStrand + postfix] = {};
+                            }
+
+                            strand2len_start_stop[currStrand + postfix].start = prevRefnumStr;
+                            strand2len_start_stop[currStrand + postfix].chainid = chnid;
+                        }
+
                         // no ref num
                         refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
                         refnumLabel = currStrand + refnumStr;
@@ -41458,6 +41490,9 @@ class ShowSeq {
         }
 
         let refnumLabelNoPostfix;
+        // sometimes one chain may have several Ig domains,set a index for each IgDomain
+        index = 1;
+        let appearedStrands = {}, currStrand_ori;
         for(let i = 0, il = giSeq.length; i < il; ++i) {
             bLoop = false;
 
@@ -41471,9 +41506,13 @@ class ShowSeq {
             }
             else {
                 refnumLabel = ic.resid2refnum[residueid];
+                let bNotShow = false;
+
                 if(refnumLabel) {                        
                     refnumStr_ori = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
                     currStrand = refnumLabel.replace(new RegExp(refnumStr_ori,'g'), '');
+                    currStrand_ori = currStrand;
+
                     currFirstDigit = refnumStr_ori.substr(0, 1);
 
                     refnumLabelNoPostfix = currStrand + parseInt(refnumStr_ori);
@@ -41494,18 +41533,30 @@ class ShowSeq {
                     else {
                         refnumStr = refnumStr_ori;
                         refnum = parseInt(refnumStr);
-                        postfix = refnumStr.replace(refnum.toString(), '');
+                        postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
 
                         // #9##
-                        if(prevStrand && refnumStr.substr(1,1) == '9') { // loop region
+                        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
+                                    ++index;
+                                    postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
+                                }
+
+                                appearedStrands[currStrand + postfix] = 1;
+                            }
+
                             let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix);
                             
                             refnumStr = result.refnumStr;
                             refnumLabel = result.refnumLabel;
                             refnumLabelNoPostfix = result.refnumLabelNoPostfix;
 
+                            bNotShow = result.bNotShow;
+                            currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
+
                             ++currCnt;
                         }
                     }
@@ -41545,7 +41596,7 @@ class ShowSeq {
                         }
                     }
                     else {
-                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop);
+                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow);
                     }
                 }
                 else {
@@ -41556,16 +41607,29 @@ class ShowSeq {
                         // no ref num
                         bLoop = true;
 
+                        if(currCnt == 1) { // start of a loop
+                            if(appearedStrands.hasOwnProperty(currStrand + postfix)) { // the strand appeared in 2nd Id domain
+                                ++index;
+                            }
+                            
+                            postfix = refnumStr.replace(refnum.toString(), '') + '_' + index;
+
+                            appearedStrands[currStrand + postfix] = 1;
+                        }
+
                         // use previous postfix
                         let result = this.getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix);
                             
                         refnumStr = result.refnumStr;
                         refnumLabel = result.refnumLabel;
                         refnumLabelNoPostfix = result.refnumLabelNoPostfix;
+
+                        bNotShow = result.bNotShow;
+                        currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
                   
                         ++currCnt;
 
-                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop);
+                        html += this.getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow);
                     }
                     else {
                         html += '<span></span>';
@@ -41591,7 +41655,7 @@ class ShowSeq {
                 ic.chainsMapping[chnid][residueid] = refnumLabelNoPostfix;
             }
 
-            prevStrand = currStrand;
+            prevStrand = currStrand_ori; //currStrand;
         }
 
         html += '<span class="icn3d-residueNum"></span>';
@@ -41607,6 +41671,8 @@ class ShowSeq {
     getAdjustedRefnum(strand2len_start_stop, currStrand, currCnt, currFirstDigit, postfix) { let ic = this.icn3d; ic.icn3dui;
         let refnumStr, refnumLabel, refnumLabelNoPostfix;
 
+        let bNotShow = false; // do not show the label
+
         if(strand2len_start_stop[currStrand + postfix]) {
             let start = parseInt(strand2len_start_stop[currStrand + postfix].start);
             let end = parseInt(strand2len_start_stop[currStrand + postfix].end);
@@ -41626,10 +41692,15 @@ class ShowSeq {
             else {
                 refnum = end - (len + 1 - currCnt);
                 refnumStr = refnum + postfixEnd;
+                
                 refnumLabel = (strand2len_start_stop[currStrand + postfix].nextStrand !== undefined) ? strand2len_start_stop[currStrand + postfix].nextStrand + refnumStr : ' ' + refnumStr;
             }
 
             refnumLabelNoPostfix = currStrand + refnum;
+
+            if(currCnt == 0 || currCnt == halfLen || currCnt == halfLen + 1 || currCnt == end - 1) {
+                bNotShow = true;
+            }
         }
         else {
             // refnumStr = (parseInt(currFirstDigit) * 1000 + 900 + currCnt).toString();
@@ -41638,18 +41709,20 @@ class ShowSeq {
             refnumStr = '';
             refnumLabel = '';
             refnumLabelNoPostfix = '';
+
+            bNotShow = true;
         }
 
-        return {refnumStr: refnumStr, refnumLabel: refnumLabel, refnumLabelNoPostfix: refnumLabelNoPostfix};
+        return {refnumStr: refnumStr, refnumLabel: refnumLabel, refnumLabelNoPostfix: refnumLabelNoPostfix, bNotShow: bNotShow};
     }
 
-    getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop) { let ic = this.icn3d, me = ic.icn3dui;
+    getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bNotShow) { let ic = this.icn3d, me = ic.icn3dui;
         let refnum = parseInt(refnumStr).toString();
         let color = this.getRefnumColor(currStrand);
         let colorStr = 'style="color:' + color + '"';
 
         let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
-        let lastThree = parseInt(refnum.substr(refnum.length - 3, 3));
+        parseInt(refnum.substr(refnum.length - 3, 3));
 
         let html = '';
 
@@ -41659,7 +41732,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 && lastThree != 901) {
+        else if(lastTwo % 2 == 0 && lastTwo != 52 && !bNotShow) { // 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>';
@@ -61244,6 +61317,7 @@ class Dssp {
         else {
             //ic.refpdbArray = ['1bqu_fn3', '1cd8_igv', '1t6v_vnar', '1wio_c2', '1wio_igv', '2atp_a', '2atp_b', '2dm3_iset', '5esv_vh', '5esv_vl', '6al5_cd19', '7bz5_cl1', '7bz5_vh', '7bz5_vl'];
             //ic.refpdbArray = ['1bqu_fn3', '1cd8_igv', '1cdh_cd4', '1dr9_cd80', '1hnf_cd2', '1hxm_d', '1hxm_g', '1ifr_lamin', '1ncn_cd86', '1t6v_vnar', '1yjd_cd28', '2atp_a', '2atp_b', '2dm3_iset', '3kys_tead1', '3pv7_ncr', '4f9l_cd277', '4gos_vtc', '4i0k_cd276', '4jqi_b', '4z18_cd274', '4zqk_pd1', '4zt1_e', '5esv_vh', '5esv_vl', '6al5_cd19', '6jxr_a', '6jxr_b', '6jxr_d', '6jxr_e', '6jxr_g', '6oil_vista', '6rp8_at', '6rp8_t', '6umt_cd273', '6x4g_cd275', '6x4g_icos', '7xq8_a', '7xq8_b', 'q71h61_ild', 'q9um44_hhl', 'p42081_cd86', 'q7z7d3_vtc', '1bqu_x', '1cdh_x', '1hnf_x', '1hxm_dx', '1hxm_gx', '4jqi_x', '4zt1_x', '5esv_vhx', '5esv_vlx', '6jxr_ax', '6jxr_bx', '1dr9_x', '3pv7_x', '4f9l_x', '4iok_x', '4z18_x', '6x4g_cd275x', 'q9um44_x'];
+            
             ic.refpdbArray = ['1bqu_fn3', '1cd8_igv', '1cdh_cd4', '1dr9_cd80', '1hnf_cd2', '1hxm_d', '1hxm_g', '1ifr_lamin', '1ncn_cd86', '1t6v_vnar', '1yjd_cd28', '2atp_a', '2atp_b', '2dm3_iset', '3kys_tead1', '3pv7_ncr', '4f9l_cd277', '4gos_vtc', '4i0k_cd276', '4jqi_b', '4z18_cd274', '4zqk_pd1', '4zt1_e', '5esv_vh', '5esv_vl', '6al5_cd19', '6jxr_a', '6jxr_b', '6jxr_d', '6jxr_e', '6jxr_g', '6oil_vista', '6rp8_at', '6rp8_t', '6umt_cd273', '6x4g_cd275', '6x4g_icos', '7xq8_a', '7xq8_b', 'q71h61_ild', 'q9um44_hhl'];
 
             if(ic.pdbDataArray) {
@@ -61267,7 +61341,7 @@ class Dssp {
                         ic.pdbDataArray = await allPromise;
                         await thisClass.parseRefPdbData(ic.pdbDataArray);
                     // }
-                    // else {
+                    // else { 
                     //     ic.pdbDataArray = [];
                     //     for(let i = 0, il = pdbAjaxArray.length; i < il; ++i) {
                     //         try {
@@ -61450,7 +61524,8 @@ class Dssp {
 
             if(!domainid2score.hasOwnProperty(domainid) || queryData[0].score > domainid2score[domainid]) {
                 domainid2score[domainid] = queryData[0].score;
-if(!me.bNode) console.log(domainid + ' TM-score: ' + domainid2score[domainid] + ' matched ' + ic.refpdbArray[domainid_index[1]]);           
+if(!me.bNode) console.log(domainid + ' TM-score: ' + domainid2score[domainid] + ' matched ' + ic.refpdbArray[domainid_index[1]]);     
+
                 //ic.chainid2index[chainid] = domainid_index[1]; // could be several, just take the recent one for simplicity
                 ic.domainid2index[domainid] = domainid_index[1];
                 domainid2segs[domainid] = queryData[0].segs;
@@ -61487,9 +61562,11 @@ if(!me.bNode) {
     console.log("The reference PDB(s) for chain " + chainid + " are " + chainList);
 }
 
+            let prevStrand;
             for(let i = 0, il = segArray.length; i < il; ++i) {
                 let seg = segArray[i];
-                let qStartInt = parseInt(seg.q_start);
+                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);
 
@@ -61501,9 +61578,11 @@ if(!me.bNode) {
                     // let refnum = (j + qStartInt).toString() + postfix;
 
                     let resid = chainid + '_' + seg.t_start;
-                    let refnum = qStartInt.toString() + postfix;
+                    //let refnum = qStartInt.toString() + postfix;
+                    let refnum = qStart + postfix;
 
-                    let refnumLabel = thisClass.getLabelFromRefnum(refnum);
+                    let refnumLabel = thisClass.getLabelFromRefnum(refnum, prevStrand);
+                    prevStrand = refnumLabel.replace(new RegExp(refnum,'g'), '');
 
                     ic.resid2refnum[resid] = refnumLabel;
 
@@ -61537,7 +61616,7 @@ if(!me.bNode) {
         }
     }
 
-    getLabelFromRefnum(oriRefnum) { let ic = this.icn3d; ic.icn3dui;
+    getLabelFromRefnum(oriRefnum, prevStrand) { let ic = this.icn3d; ic.icn3dui;
         let refnum = parseInt(oriRefnum);
 
         // A^: 1xx or 2xx
@@ -61559,7 +61638,14 @@ if(!me.bNode) {
         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;
-        else if(refnum >= 1400 && refnum < 2000) return "A" + oriRefnum;
+        else if(refnum >= 1400 && refnum < 2000) {
+            if(prevStrand.substr(0, 1) == 'A') {
+                return prevStrand + oriRefnum;
+            }
+            else {
+                return "A" + oriRefnum;
+            }
+        }
         else if(refnum >= 2000 && refnum < 3000) return "B" + oriRefnum;
         else if(refnum >= 3000 && refnum < 4000) return "C" + oriRefnum;
         else if(refnum >= 4000 && refnum < 5000) return "C'" + oriRefnum;
@@ -66197,7 +66283,7 @@ class SaveFile {
                 $("#" + ic.pre + "title").html(title);
             }
             else if(me.cfg.mmdbafid !== undefined) {
-                let structureArray = me.cfg.mmdbafid.split(',');
+                let structureArray = Object.keys(ic.structures); //me.cfg.mmdbafid.split(',');
                 if(structureArray.length > 1) {
                     title = 'Multiple structures: ' + structureArray;
                     $("#" + ic.pre + "title").html(title);
@@ -68476,6 +68562,7 @@ class VRButton {
 }
 
 //https://github.com/mrdoob/three.js/blob/master/examples/webxr_ar_cones.html
+//https://github.com/NikLever/Learn-WebXR/blob/master/libs/ARButton.js
 
 class ARButton {
     constructor(icn3d) {
@@ -68486,11 +68573,11 @@ class ARButton {
     }
 
 	//static createButton( renderer, sessionInit = {} ) {
-    createButton( renderer, sessionInit = {} ) { let ic = this.icn3d, me = ic.icn3dui;
+	createButton( renderer, sessionInit = {} ) { let ic = this.icn3d, me = ic.icn3dui;
 
 		const button = document.createElement( 'button' );
 
-		function showStartAR( /*device*/ ) {
+		function showStartAR( ) {
 
 			if ( sessionInit.domOverlay === undefined ) {
 
@@ -68547,8 +68634,8 @@ class ARButton {
 
 			}
 
-			function onSessionEnded( /*event*/ ) {
-				// reset orientation after VR
+			function onSessionEnded( ) {
+				// reset orientation after AR
 				ic.transformCls.resetOrientation();
 
 				ic.bAr = false;
@@ -68701,29 +68788,29 @@ class ARButton {
 			return button;
 
 		} else {
-/*            
-			const message = document.createElement( 'a' );
+           
+			// const message = document.createElement( 'a' );
 
-			if ( window.isSecureContext === false ) {
+			// if ( window.isSecureContext === false ) {
 
-				message.href = document.location.href.replace( /^http:/, 'https:' );
-				message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
+			// 	message.href = document.location.href.replace( /^http:/, 'https:' );
+			// 	message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
 
-			} else {
+			// } else {
 
-				message.href = 'https://immersiveweb.dev/';
-				message.innerHTML = 'WEBXR NOT AVAILABLE';
+			// 	message.href = 'https://immersiveweb.dev/';
+			// 	message.innerHTML = 'WEBXR NOT AVAILABLE';
 
-			}
+			// }
 
-			message.style.left = 'calc(66% - 90px)'; //'calc(50% - 90px)';
-			message.style.width = '180px';
-			message.style.textDecoration = 'none';
+			// message.style.left = 'calc(66% - 90px)'; //'calc(50% - 90px)';
+			// message.style.width = '180px';
+			// message.style.textDecoration = 'none';
 
-			stylizeElement( message );
+			// stylizeElement( message );
+
+			// return message;
 
-			return message;
-*/
             const message = document.createElement( 'span' );
             return message;
 		}
@@ -68801,6 +68888,8 @@ class iCn3D {
                 });
                 // Enable VR
                 this.renderer.xr.enabled = true;
+                //https://www.udemy.com/course/learn-webxr/learn/lecture/20512848#questions/18941376
+                //this.renderer.getContext().makeXRCompatible();
             }
             else {
                 this.renderer = new THREE.WebGL1Renderer({