icn3d 3.47.2 → 3.47.3

package/icn3d.js

@@ -54315,6 +54315,11 @@ class UtilsCls {
     // from iview (http://istar.cse.cuhk.edu.hk/iview/)
     //Determine whether atom1 and atom2 have covalent bond.
     hasCovalentBond(atom0, atom1) { let me = this.icn3dui;
+        // no bonds between metals
+        if($.inArray(atom0.elem, me.parasCls.ionsArray) !== -1 && $.inArray(atom1.elem, me.parasCls.ionsArray) !== -1) {
+            return false;
+        }
+
         let r = me.parasCls.covalentRadii[atom0.elem.toUpperCase()] + me.parasCls.covalentRadii[atom1.elem.toUpperCase()];
 
         //return atom0.coord.distanceToSquared(atom1.coord) < 1.3 * r * r;
@@ -54881,6 +54886,7 @@ class ParasCls {
         this.backgroundColors = {
             'black': this.thr(0x000000),
              'grey': this.thr(0xCCCCCC),
+             'gray': this.thr(0xCCCCCC),
             'white': this.thr(0xFFFFFF),
             'transparent': this.thr(0xFFFFFF) //this.thr(0x000000)
         };
@@ -60915,6 +60921,7 @@ class Dialog {
         let bLineGraph = $('#' + me.pre + 'dl_linegraph').hasClass('ui-dialog-content'); // initialized
         let bScatterplot = $('#' + me.pre + 'dl_scatterplot').hasClass('ui-dialog-content'); // initialized
         let bRmsdplot = $('#' + me.pre + 'dl_rmsdplot').hasClass('ui-dialog-content'); // initialized
+        let bHbondplot = $('#' + me.pre + 'dl_hbondplot').hasClass('ui-dialog-content'); // initialized
         let bLigplot = $('#' + me.pre + 'dl_ligplot').hasClass('ui-dialog-content'); // initialized
         let bContactmap = $('#' + me.pre + 'dl_contactmap').hasClass('ui-dialog-content'); // initialized
         let bAlignerrormap = $('#' + me.pre + 'dl_alignerrormap').hasClass('ui-dialog-content'); // initialized
@@ -60926,13 +60933,14 @@ class Dialog {
 
         status.bSelectannotationsInit2 = false, status.bGraph2 = false, status.bLineGraph2 = false;
         status.bScatterplot2 = false, status.bLigplot2 = false, status.bTable2 = false, status.bAlignmentInit2 = false;
-        status.bTwoddgmInit2 = false, status.bTwodctnInit2 = false, status.bSetsInit2 = false;
+        status.bTwoddgmInit2 = false, status.bTwodctnInit2 = false, status.bSetsInit2 = false, status.bHbondplot2 = false;
 
         id2flag.dl_selectannotations = 'bSelectannotationsInit2';
         id2flag.dl_graph = 'bGraph2';
         id2flag.dl_linegraph = 'bLineGraph2';
         id2flag.dl_scatterplot = 'bScatterplot2';
         id2flag.dl_rmsdplot = 'bRmsdplot2';
+        id2flag.dl_hbondplot = 'bHbondplot2';
         id2flag.dl_ligplot = 'bLigplot2';	
         id2flag.dl_contactmap = 'bContactmap2';
         id2flag.dl_alignerrormap = 'bAlignerrormap2';
@@ -60947,6 +60955,7 @@ class Dialog {
         if(bLineGraph) status.bLineGraph2 = $('#' + me.pre + 'dl_linegraph').dialog( 'isOpen' );
         if(bScatterplot) status.bScatterplot2 = $('#' + me.pre + 'dl_scatterplot').dialog( 'isOpen' );
         if(bRmsdplot) status.bRmsdplot2 = $('#' + me.pre + 'dl_rmsdplot').dialog( 'isOpen' );
+        if(bHbondplot) status.bHbondplot2 = $('#' + me.pre + 'dl_hbondplot').dialog( 'isOpen' );
         if(bLigplot) status.bLigplot2 = $('#' + me.pre + 'dl_ligplot').dialog( 'isOpen' );
         if(bContactmap) status.bContactmap2 = $('#' + me.pre + 'dl_contactmap').dialog( 'isOpen' );
         if(bAlignerrormap) status.bAlignerror2 = $('#' + me.pre + 'dl_alignerrormap').dialog( 'isOpen' );
@@ -61107,7 +61116,7 @@ class Dialog {
           close: function(e) {
               let status = thisClass.getDialogStatus().status;
 
-              if((!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bTable2) &&(!status.bAlignmentInit2) ) {
+              if((!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bHbondplot2) &&(!status.bLigplot2) &&(!status.bTable2) &&(!status.bAlignmentInit2) ) {
                     //ic.resizeCanvasCls.resizeCanvas(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH, me.htmlCls.HEIGHT - me.htmlCls.LESSHEIGHT - me.htmlCls.EXTRAHEIGHT, true);
                     ic.resizeCanvasCls.resizeCanvas(me.htmlCls.WIDTH, me.htmlCls.HEIGHT, true);
               }
@@ -61136,7 +61145,7 @@ class Dialog {
 
         let status = this.getDialogStatus().status;
 
-        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_rmsdplot' || id === me.pre + 'dl_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
+        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_rmsdplot' || id === me.pre + 'dl_hbondplot' || id === me.pre + 'dl_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
             //var dialogWidth = 0.5 *(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH) - twoddgmWidth * 0.5;
             let dialogWidth = 0.5 *(me.htmlCls.WIDTH) - twoddgmWidth * 0.5;
 
@@ -61172,15 +61181,16 @@ class Dialog {
                   modal: false,
                   position: position,
                   close: function(e) {
-                      if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_ligplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bAlignerrormap2))
-                        ||(id === me.pre + 'dl_alignerrormap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2))
+                      if((id === me.pre + 'dl_selectannotations' &&(!status.bAlignmentInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_graph' &&(!status.bSelectannotationsInit2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_alignment' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_interactionsorted' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_linegraph' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_scatterplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_ligplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_contactmap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bAlignerrormap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_alignerrormap' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bHbondplot2))
+                        ||(id === me.pre + 'dl_hbondplot' &&(!status.bSelectannotationsInit2) &&(!status.bGraph2) &&(!status.bAlignmentInit2) &&(!status.bTable2) &&(!status.bLineGraph2) &&(!status.bScatterplot2) &&(!status.bLigplot2) &&(!status.bContactmap2) &&(!status.bAlignerrormap2))
                         ) {
                           if(status.bTwoddgmInit2 || status.bTwodctnInit2 || status.bSetsInit2) {
                               let canvasWidth = me.utilsCls.isMobile() ? me.htmlCls.WIDTH : me.htmlCls.WIDTH - twoddgmWidth;
@@ -61243,7 +61253,7 @@ class Dialog {
 
             //if(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH >= me.htmlCls.HEIGHT - me.htmlCls.LESSHEIGHT - me.htmlCls.EXTRAHEIGHT) {
             if(me.htmlCls.WIDTH >= me.htmlCls.HEIGHT) {
-                if(status.bSelectannotationsInit2 || status.bGraph2 || status.bLineGraph2 || status.bScatterplot2 || status.bLigplot2 || status.bTable2 || status.bAlignmentInit2) {
+                if(status.bSelectannotationsInit2 || status.bGraph2 || status.bLineGraph2 || status.bScatterplot2 || status.bHbondplot2 || status.bLigplot2 || status.bTable2 || status.bAlignmentInit2) {
                     //tmpWidth = 0.5 *(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH) - twoddgmWidth * 0.5;
                     tmpWidth = 0.5 *(me.htmlCls.WIDTH) - twoddgmWidth * 0.5;
                 }
@@ -61282,7 +61292,7 @@ class Dialog {
 
                 //if(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH >= me.htmlCls.HEIGHT - me.htmlCls.LESSHEIGHT - me.htmlCls.EXTRAHEIGHT) {
                 if(me.htmlCls.WIDTH >= me.htmlCls.HEIGHT) {
-                    if(status.bSelectannotationsInit2 || status.bGraph2 || status.bLineGraph2 || status.bScatterplot2 || status.bLigplot2 || status.bTable2 || status.bAlignmentInit2) {
+                    if(status.bSelectannotationsInit2 || status.bGraph2 || status.bLineGraph2 || status.bScatterplot2 || status.bHbondplot2 || status.bLigplot2 || status.bTable2 || status.bAlignmentInit2) {
                         //tmpWidth = 0.5 *(me.htmlCls.WIDTH - me.htmlCls.LESSWIDTH) - twoddgmWidth * 0.5;
                         tmpWidth = 0.5 *(me.htmlCls.WIDTH) - twoddgmWidth * 0.5;
                     }
@@ -61362,7 +61372,7 @@ class Dialog {
         let width = 400, height = 150;
         let twoddgmWidth = me.htmlCls.width2d + 20;
 
-        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_rmsdplot' || id === me.pre + 'dl_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
+        if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_rmsdplot'  || id === me.pre + 'dl_hbondplot' || id === me.pre + 'dl_ligplot' || id === me.pre + 'dl_contactmap'  || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
             $( "#" + id ).show();
             $( "#" + id + "_nb").show();
             $( "#" + id + "_title").html(title);
@@ -61798,7 +61808,7 @@ class SetDialog {
         html += "Step 1. <b>PDB File</b>: " + me.htmlCls.inputFileStr + "id='" + me.pre + "dcdpdbfile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_dcdpdbfile'>Load PDB File</button><br><br>";
 
-        html += "Step 2. <b>Stride</b>: Load one frame per every " + me.htmlCls.inputTextStr + "id='" + me.pre + "md_stride' value='1' size=2>frame(s)<br><br>";
+        html += "Step 2. <b>Stride</b>: Load one frame per every " + me.htmlCls.inputTextStr + "id='" + me.pre + "md_stride' value='1' size=2> frame(s)<br><br>";
 
         html += "Step 3. <b>DCD File</b>: " + me.htmlCls.inputFileStr + "id='" + me.pre + "dcdfile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_dcdfile'>Load DCD File</button><br>";
@@ -61807,9 +61817,9 @@ class SetDialog {
         html += me.htmlCls.buttonStr + "reload_xtcfile' style='margin-left:28px'>Load XTC File</button><br><br>";
 
         html += "<hr><br>";
-        html += "<b>Analysis</b>: " + me.htmlCls.buttonStr + "rmsd_plot'>RMSD Plot</button><br><br>";
+        html += "<b>Analysis</b>: " + me.htmlCls.buttonStr + "rmsd_plot'>RMSD Plot</button>" +  me.htmlCls.buttonStr + "hbond_plot' style='margin-left:12px'>H-bond Plot</button><br><br>";
 
-        html += "<b>Playback</b>: " + me.htmlCls.buttonStr + "md_playback'>Play</button> every " + me.htmlCls.inputTextStr + "id='" + me.pre + "play_step' value='1' size=2> step with " + me.htmlCls.inputTextStr + "id='" + me.pre + "play_fps' value='24' size=2> FPS (Frame per Sec)<br><br>";
+        html += "<b>Playback</b>: " + me.htmlCls.buttonStr + "md_playback'>Play</button> every " + me.htmlCls.inputTextStr + "id='" + me.pre + "play_step' value='1' size=2> step(s) with " + me.htmlCls.inputTextStr + "id='" + me.pre + "play_fps' value='24' size=2> FPS (Frame per Sec)<br><br>";
 
         html += "<b>Video from Frames</b>: " + me.htmlCls.buttonStr + "video_frame'>Make Video</button> with " + me.htmlCls.inputTextStr + "id='" + me.pre + "videofps' value='24' size=2> FPS (Frame per Sec)<br><br>";
 
@@ -62355,6 +62365,17 @@ class SetDialog {
 
         html += "</div>";
 
+
+        html += me.htmlCls.divStr + "dl_hbondplot' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_hbondplot', 'H-bond Plot');
+
+        me.hbondplotid = me.pre + 'hbondplot';
+        html += me.htmlCls.divNowrapStr + buttonStrTmp + me.hbondplotid + '_json">JSON</button>' + me.htmlCls.space2 + " The image below can be saved via right click.<br></div>";
+        html += '<canvas id="' + me.hbondplotid + '"></canvas>';
+
+        html += "</div>";
+
+
         html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
 
         if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
@@ -65706,7 +65727,13 @@ class Events {
         me.myEventCls.onIds("#" + me.pre + "rmsd_plot", "click", async function(e) { let ic = me.icn3d;
            e.preventDefault();
            
-           await ic.dcdParserCls.showRmsdPlot();
+           await ic.dcdParserCls.showRmsdHbondPlot();
+        });
+        me.myEventCls.onIds("#" + me.pre + "hbond_plot", "click", async function(e) { let ic = me.icn3d;
+           e.preventDefault();
+           let bHbondPlot = true;
+           
+           await ic.dcdParserCls.showRmsdHbondPlot(bHbondPlot);
         });
         me.myEventCls.onIds("#" + me.pre + "hbondLineGraph", "click", async function(e) { let ic = me.icn3d;
            e.preventDefault();
@@ -65859,6 +65886,12 @@ class Events {
             ic.saveFileCls.saveFile(ic.inputid + "_rmsdplot.json", "text", [JSON.stringify(ic.mdDataSet)]);
         });
 
+        me.myEventCls.onIds("#" + me.hbondplotid + "_json", "click", function(e) { let ic = me.icn3d;
+            e.preventDefault();
+
+            ic.saveFileCls.saveFile(ic.inputid + "_hbondplot.json", "text", [JSON.stringify(ic.mdDataSet)]);
+        });
+
         me.myEventCls.onIds("#" + me.ligplotid + "_svg", "click", function(e) { let ic = me.icn3d;
             e.preventDefault();
             
@@ -67245,6 +67278,7 @@ class SetHtml {
         let prtribbonwidth =(type == '3dprint') ? '2' : '1.3';
         let nucleotideribbonwidth =(type == '3dprint') ? '1.4' : '0.8';
 
+        let bkgdcolor = 'black';
         let shininess = 40;
         let light1 = 2;
         let light2 = 1;
@@ -67255,6 +67289,13 @@ class SetHtml {
 
         // retrieve from cache
         if(type == 'style') {
+            if(this.getCookie('bkgdcolor') != '') {
+                bkgdcolor = this.getCookie('bkgdcolor').toLowerCase();
+                if(bkgdcolor != 'transparent' && bkgdcolor != 'white' && bkgdcolor != 'black' && bkgdcolor != 'gray' && bkgdcolor != 'grey') {
+                    bkgdcolor = 'black';
+                }
+            }
+
             if(this.getCookie('shininess') != '') {
                 shininess = parseFloat(this.getCookie('shininess'));
             }
@@ -67292,12 +67333,13 @@ class SetHtml {
 
             html += "<b>Note</b>: The following parameters will be saved in cache. You just need to set them once. <br><br>";
 
-            html += "<b>1. Shininess</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "shininess' value='" + shininess + "' size=4>" + me.htmlCls.space3 + "(for the shininess of the 3D objects, default 40)<br/><br/>";
-            html += "<b>2. Three directional lights</b>: <br>";
+            html += "<b>1. Background Color</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "bkgdcolor' value='" + bkgdcolor + "' size=4>" + me.htmlCls.space3 + "(for canvas background, either transparent/white, black, or gray/grey, default black)<br/><br/>";
+            html += "<b>2. Shininess</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "shininess' value='" + shininess + "' size=4>" + me.htmlCls.space3 + "(for the shininess of the 3D objects, default 40)<br/><br/>";
+            html += "<b>3. Three directional lights</b>: <br>";
             html += "<b>Key Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light1' value='" + light1 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the key light, default 2)<br/>";
             html += "<b>Fill Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light2' value='" + light2 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the fill light, default 1)<br/>";
             html += "<b>Back Light</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "light3' value='" + light3 + "' size=4>" + me.htmlCls.space3 + "(for the light strength of the back light, default 1)<br/><br/>";
-            html += "<b>3. Thickness</b>: <br>";
+            html += "<b>4. Thickness</b>: <br>";
         }
 
         html += "<b>Line Radius</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "linerad_" + type + "' value='" + linerad + "' size=4>" + me.htmlCls.space3 + "(for stabilizers, hydrogen bonds, distance lines, default 0.1)<br/>";
@@ -67313,11 +67355,11 @@ class SetHtml {
         html += "<b>Ball Scale</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "ballscale_" + type + "' value='" + ballscale + "' size=4>" + me.htmlCls.space3 + "(for styles 'Ball and Stick' and 'Dot', default 0.3)<br/>";
 
         if(type == 'style') {
-            html += "<br><b>4. Show Glycan Cartoon</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "glycan' value='" + bGlycansCartoon + "' size=4>" + me.htmlCls.space3 + "(0: hide, 1: show, default 0)<br/>";
+            html += "<br><b>5. Show Glycan Cartoon</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "glycan' value='" + bGlycansCartoon + "' size=4>" + me.htmlCls.space3 + "(0: hide, 1: show, default 0)<br/>";
 
-            html += "<br><b>5. Show Membrane</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "membrane' value='" + bMembrane + "' size=4>" + me.htmlCls.space3 + "(0: hide, 1: show, default 1)<br/>";
+            html += "<br><b>7. Show Membrane</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "membrane' value='" + bMembrane + "' size=4>" + me.htmlCls.space3 + "(0: hide, 1: show, default 1)<br/>";
 
-            html += "<br><b>6. Enlarge Command Window</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cmdwindow' value='" + bCmdWindow + "' size=4>" + me.htmlCls.space3 + "(0: Regular, 1: Large, default 0)<br/><br/>";
+            html += "<br><b>7. Enlarge Command Window</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cmdwindow' value='" + bCmdWindow + "' size=4>" + me.htmlCls.space3 + "(0: Regular, 1: Large, default 0)<br/><br/>";
         }
 
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_thickness_" + type + "'>Apply</button></span>&nbsp;&nbsp;&nbsp;";
@@ -67933,6 +67975,7 @@ class SetHtml {
 
         if(postfix == 'style') {
             if(bReset) {
+                $("#" + me.pre + "bkgdcolor").val('black');
                 $("#" + me.pre + "shininess").val('40');
                 $("#" + me.pre + "light1").val('2');
                 $("#" + me.pre + "light2").val('1');
@@ -67942,6 +67985,12 @@ class SetHtml {
                 $("#" + me.pre + "cmdwindow").val('0');
             }
 
+            ic.bkgdcolor = $("#" + me.pre + "bkgdcolor").val(); //black
+            if(ic.bkgdcolor != 'transparent' && ic.bkgdcolor != 'white' && ic.bkgdcolor != 'black' && ic.bkgdcolor != 'gray' && ic.bkgdcolor != 'grey') {
+                ic.bkgdcolor = 'black';
+            }
+            ic.opts['background'] = ic.bkgdcolor;
+
             ic.shininess = parseFloat($("#" + me.pre + "shininess").val()); //40;
             ic.light1 = parseFloat($("#" + me.pre + "light1").val()); //0.6;
             ic.light2 = parseFloat($("#" + me.pre + "light2").val()); //0.4;
@@ -67976,6 +68025,7 @@ class SetHtml {
         // save to cache
         if(!me.bNode) { // && postfix == 'style') {
             let exdays = 3650; // 10 years
+            this.setCookie('bkgdcolor', ic.bkgdcolor, exdays);
             this.setCookie('shininess', ic.shininess, exdays);
             this.setCookie('light1', ic.light1, exdays);
             this.setCookie('light2', ic.light2, exdays);
@@ -74540,6 +74590,17 @@ class Scene {
         }
 
         // get parameters from cookies
+        if(me.htmlCls.setHtmlCls.getCookie('bkgdcolor') != '') {
+            let bkgdcolor = me.htmlCls.setHtmlCls.getCookie('bkgdcolor');
+
+            if(ic.bkgdcolor != bkgdcolor) {
+                me.htmlCls.clickMenuCls.setLogCmd('set background ' + bkgdcolor, true);
+            }
+
+            ic.bkgdcolor = bkgdcolor;
+            ic.opts['background'] = ic.bkgdcolor;
+        }
+
         if(me.htmlCls.setHtmlCls.getCookie('shininess') != '') {
             let shininess = parseFloat(me.htmlCls.setHtmlCls.getCookie('shininess'));
 
@@ -85611,7 +85672,7 @@ class Impostor {
 
     setParametersForShader (opacity) { let ic = this.icn3d, me = ic.icn3dui;
         let background = me.parasCls.backgroundColors[ic.opts.background.toLowerCase()];
-        //if(!background) background = me.parasCls.thr(0x000000);      
+        if(!background) background = me.parasCls.thr(0x000000);      
 
         let near = 2.5*ic.maxD;
         let far = 4*ic.maxD;
@@ -91858,10 +91919,29 @@ class AnnoIg {
             if(!info) continue;
 
             let tmscore = info.score;
+            info.score2;
 
             let igType = (parseFloat(tmscore) < ic.refnumCls.TMThresholdIgType ) ? 'Ig' : ic.ref2igtype[info.refpdbname];
+            let deltaTmscoreStr = ''; 
+/*
+            // check how many sheets are matched to decide if it is a jelly roll
+            let matchedSheetCnt = 0, totalSheetCnt = 0;
+            for(let resid in ic.domainid2sheetEnds[domainid]) {
+                if(ic.resid2refnum[resid] && !ic.residIgLoop.hasOwnProperty(resid)) { // assigned and not loop
+                    ++matchedSheetCnt;
+                }
+                ++totalSheetCnt;
+            }
+            let notMatchedSheetCnt = totalSheetCnt - matchedSheetCnt;
+
+            if(tmscore - tmscore2 > 0.1 && notMatchedSheetCnt >= 4) {
+                igType = 'Jelly roll';
+                deltaTmscoreStr = ', ' + notMatchedSheetCnt + ' sheets not assigned';
+            }
+*/
+
             titleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + ')');
-            fullTitleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + '), template: ' + info.refpdbname + ', type: ' + ic.ref2igtype[info.refpdbname] + ', Seq. identity: ' + parseFloat(info.seqid).toFixed(2) + ', aligned residues: ' + info.nresAlign + ', label in 3D: ' + chain + '-Ig' + (i+1).toString());
+            fullTitleArray.push(igType + ' (TM:' + parseFloat(tmscore).toFixed(2) + deltaTmscoreStr + '), template: ' + info.refpdbname + ', type: ' + ic.ref2igtype[info.refpdbname] + ', Seq. identity: ' + parseFloat(info.seqid).toFixed(2) + ', aligned residues: ' + info.nresAlign + ', label in 3D: ' + chain + '-Ig' + (i+1).toString());
 
             domainArray.push(igType);
 
@@ -99634,6 +99714,8 @@ class HlUpdate {
     }
 
     hlSeqInChain(chainid) { let ic = this.icn3d; ic.icn3dui;
+       if(!ic.chainsSeq[chainid]) return;
+       
        // update annotation windows and alignment sequences
        for(let i = 0, il = ic.chainsSeq[chainid].length; i < il; ++i) {
            let resi = ic.chainsSeq[chainid][i].resi;
@@ -101108,7 +101190,7 @@ class ShowInter {
     // between the highlighted and atoms in nameArray
     //Show the hydrogen bonds between chemicals and proteins/nucleotides with dashed-lines.
     //"threshold" defines the distance of hydrogen bonds.
-    showHbonds(threshold, nameArray2, nameArray, bHbondCalc, bSaltbridge, type) { let ic = this.icn3d, me = ic.icn3dui;
+    showHbonds(threshold, nameArray2, nameArray, bHbondCalc, bSaltbridge, type, bHbondPlot) { let ic = this.icn3d, me = ic.icn3dui;
         if(bHbondCalc) return;
         let hbonds_saltbridge, select;
         if(bSaltbridge) {
@@ -101119,8 +101201,7 @@ class ShowInter {
             hbonds_saltbridge = 'hbonds';
             select = 'hbonds ' + threshold + ' | sets ' + nameArray2 + " " + nameArray + " | " + bHbondCalc;
         }
-        ic.opts[hbonds_saltbridge] = "yes";
-        ic.opts["water"] = "dot";
+
         let firstSetAtoms, complement;
         firstSetAtoms = ic.definedSetsCls.getAtomsFromNameArray(nameArray2);
         complement = ic.definedSetsCls.getAtomsFromNameArray(nameArray);
@@ -101130,34 +101211,39 @@ class ShowInter {
             // let selectedAtoms = ic.hBondCls.calculateChemicalHbonds(me.hashUtilsCls.intHash2Atoms(ic.dAtoms, complement, ic.atoms), me.hashUtilsCls.intHash2Atoms(ic.dAtoms, firstSetAtoms, ic.atoms), parseFloat(threshold), bSaltbridge );
             let selectedAtoms = ic.hBondCls.calculateChemicalHbonds(me.hashUtilsCls.hash2Atoms(complement, ic.atoms), me.hashUtilsCls.hash2Atoms(firstSetAtoms, ic.atoms), parseFloat(threshold), bSaltbridge );
 
-            let commanddesc;
-            if(bSaltbridge) {
-                ic.resid2ResidhashSaltbridge = me.hashUtilsCls.cloneHash(ic.resid2Residhash);
-                commanddesc = 'all atoms that have salt bridges with the selected atoms';
-            }
-            else {
-                ic.resid2ResidhashHbond = me.hashUtilsCls.cloneHash(ic.resid2Residhash);
-                commanddesc = 'all atoms that are hydrogen-bonded with the selected atoms';
-            }
-            let residues = {};
-            for(let i in selectedAtoms) {
-                let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
-                residues[residueid] = 1;
-            }
-            ic.hAtoms = {};
-            for(let resid in residues) {
-                for(let i in ic.residues[resid]) {
-                    ic.hAtoms[i] = 1;
-                    ic.atoms[i].style2 = 'stick';
-                    //ic.atoms[i].style2 = 'lines';
+            if(!bHbondPlot) {
+                let commanddesc;
+                if(bSaltbridge) {
+                    ic.resid2ResidhashSaltbridge = me.hashUtilsCls.cloneHash(ic.resid2Residhash);
+                    commanddesc = 'all atoms that have salt bridges with the selected atoms';
+                }
+                else {
+                    ic.resid2ResidhashHbond = me.hashUtilsCls.cloneHash(ic.resid2Residhash);
+                    commanddesc = 'all atoms that are hydrogen-bonded with the selected atoms';
+                }
+                let residues = {};
+                for(let i in selectedAtoms) {
+                    let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
+                    residues[residueid] = 1;
+                }
+                ic.hAtoms = {};
+                for(let resid in residues) {
+                    for(let i in ic.residues[resid]) {
+                        ic.hAtoms[i] = 1;
+                        ic.atoms[i].style2 = 'stick';
+                        //ic.atoms[i].style2 = 'lines';
+                    }
                 }
-            }
 
-            //let commandname = hbonds_saltbridge + '_' + firstAtom.serial;
-            let commandname = hbonds_saltbridge + '_auto';
-            ic.selectionCls.addCustomSelection(Object.keys(residues), commandname, commanddesc, select, true);
-            ic.selectionCls.saveSelectionIfSelected();
-            ic.drawCls.draw();
+                ic.opts[hbonds_saltbridge] = "yes";
+                ic.opts["water"] = "dot";
+
+                //let commandname = hbonds_saltbridge + '_' + firstAtom.serial;
+                let commandname = hbonds_saltbridge + '_auto';
+                ic.selectionCls.addCustomSelection(Object.keys(residues), commandname, commanddesc, select, true);
+                ic.selectionCls.saveSelectionIfSelected();
+                ic.drawCls.draw();
+            }
         }
     }
 
@@ -101478,7 +101564,7 @@ class ViewInterPairs {
     }
 
     async viewInteractionPairs(nameArray2, nameArray, bHbondCalc, type,
-      bHbond, bSaltbridge, bInteraction, bHalogen, bPication, bPistacking, contactDist) { let ic = this.icn3d, me = ic.icn3dui;
+      bHbond, bSaltbridge, bInteraction, bHalogen, bPication, bPistacking, contactDist, bHbondPlot) { let ic = this.icn3d, me = ic.icn3dui;
        let bondCnt;
 
        // reset
@@ -101578,13 +101664,13 @@ class ViewInterPairs {
            if(!bHbondCalc) {
                ic.hAtoms = me.hashUtilsCls.cloneHash(prevHatoms);
 
-               ic.showInterCls.showHbonds(threshold, nameArray2, nameArray, bHbondCalc, undefined, type);
+               ic.showInterCls.showHbonds(threshold, nameArray2, nameArray, bHbondCalc, undefined, type, bHbondPlot);
            }
            hAtoms = me.hashUtilsCls.unionHash(hAtoms, ic.hAtoms);
        }
        // switch display order, show hydrogen first
        let tableHtml = '';
-       if(bHbond) {
+       if(bHbond && !bHbondPlot) {
            tableHtml += this.exportHbondPairs(type, labelType);
        }
        if(bSaltbridge) {
@@ -101710,46 +101796,51 @@ class ViewInterPairs {
        ic.hAtoms = me.hashUtilsCls.cloneHash(hAtoms);
        ic.bRender = true;
        //ic.hlUpdateCls.updateHlAll();
-       ic.drawCls.draw();
-       let residHash, select, commandname, commanddesc;
-       residHash = ic.firstAtomObjCls.getResiduesFromAtoms(hAtoms);
-       select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
-       commandname = 'interface_all';
-       commanddesc = commandname;
-       ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
-       let interface1 = me.hashUtilsCls.intHash(hAtoms, atomSet1);
-       residHash = ic.firstAtomObjCls.getResiduesFromAtoms(interface1);
-       select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
-       commandname = 'interface_1';
-       commanddesc = commandname;
-       ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
-       let interface2 = me.hashUtilsCls.intHash(hAtoms, atomSet2);
-       residHash = ic.firstAtomObjCls.getResiduesFromAtoms(interface2);
-       select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
-       commandname = 'interface_2';
-       commanddesc = commandname;
-       ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
-       //var html = '<div style="text-align:center"><b>Hydrogen Bonds, Salt Bridges, Contacts, Halogen Bonds, &pi;-cation, &pi;-stacking between Two Sets:</b><br>';
-       let html = '<div style="text-align:center"><b>' + interactionTypes.join(', ') + ' between Two Sets:</b><br>';
-       let residueArray1 = ic.resid2specCls.atoms2residues(Object.keys(atomSet1));
-       let residueArray2 = ic.resid2specCls.atoms2residues(Object.keys(atomSet2));
-       let cmd1 = 'select ' + ic.resid2specCls.residueids2spec(residueArray1);
-       let cmd2 = 'select ' + ic.resid2specCls.residueids2spec(residueArray2);
-       html += 'Set 1: ' + nameArray2 + ' <button class="' + ic.pre + 'selset" cmd="' + cmd1 + '">Highlight in 3D</button><br>';
-       html += 'Set 2: ' + nameArray + ' <button class="' + ic.pre + 'selset" cmd="' + cmd2 + '">Highlight in 3D</button><br><br></div>';
-       html += '<div style="text-align:center"><b>The interfaces are:</b><br>';
-       let residueArray3 = ic.resid2specCls.atoms2residues(Object.keys(interface1));
-       let residueArray4 = ic.resid2specCls.atoms2residues(Object.keys(interface2));
-       let cmd3 = 'select ' + ic.resid2specCls.residueids2spec(residueArray3);
-       let cmd4 = 'select ' + ic.resid2specCls.residueids2spec(residueArray4);
-       html += 'interface_1 <button class="' + ic.pre + 'selset" cmd="' + cmd3 + '">Highlight in 3D</button><br>';
-       html += 'interface_2 <button class="' + ic.pre + 'selset" cmd="' + cmd4 + '">Highlight in 3D</button><br><br></div>';
-       html += '<div><b>Note</b>: Each checkbox below selects the corresponding residue. '
-         + 'You can click "Save Selection" in the "Select" menu to save the selection '
-         + 'and click on "Highlight" button to clear the checkboxes.</div><br>';
-       let header = html;
-       if(type == 'graph' || type == 'linegraph' || type == 'scatterplot' || bContactMapLocal) html = '';
-       html += tableHtml;
+       let html = '';
+       if(!bHbondPlot) {
+            ic.drawCls.draw();
+            let residHash, select, commandname, commanddesc;
+            residHash = ic.firstAtomObjCls.getResiduesFromAtoms(hAtoms);
+            select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
+            commandname = 'interface_all';
+            commanddesc = commandname;
+            ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
+            let interface1 = me.hashUtilsCls.intHash(hAtoms, atomSet1);
+            residHash = ic.firstAtomObjCls.getResiduesFromAtoms(interface1);
+            select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
+            commandname = 'interface_1';
+            commanddesc = commandname;
+            ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
+            let interface2 = me.hashUtilsCls.intHash(hAtoms, atomSet2);
+            residHash = ic.firstAtomObjCls.getResiduesFromAtoms(interface2);
+            select = "select " + ic.resid2specCls.residueids2spec(Object.keys(residHash));
+            commandname = 'interface_2';
+            commanddesc = commandname;
+            ic.selectionCls.addCustomSelection(Object.keys(residHash), commandname, commanddesc, select, true);
+
+            //var html = '<div style="text-align:center"><b>Hydrogen Bonds, Salt Bridges, Contacts, Halogen Bonds, &pi;-cation, &pi;-stacking between Two Sets:</b><br>';
+            html = '<div style="text-align:center"><b>' + interactionTypes.join(', ') + ' between Two Sets:</b><br>';
+            let residueArray1 = ic.resid2specCls.atoms2residues(Object.keys(atomSet1));
+            let residueArray2 = ic.resid2specCls.atoms2residues(Object.keys(atomSet2));
+            let cmd1 = 'select ' + ic.resid2specCls.residueids2spec(residueArray1);
+            let cmd2 = 'select ' + ic.resid2specCls.residueids2spec(residueArray2);
+            html += 'Set 1: ' + nameArray2 + ' <button class="' + ic.pre + 'selset" cmd="' + cmd1 + '">Highlight in 3D</button><br>';
+            html += 'Set 2: ' + nameArray + ' <button class="' + ic.pre + 'selset" cmd="' + cmd2 + '">Highlight in 3D</button><br><br></div>';
+            html += '<div style="text-align:center"><b>The interfaces are:</b><br>';
+            let residueArray3 = ic.resid2specCls.atoms2residues(Object.keys(interface1));
+            let residueArray4 = ic.resid2specCls.atoms2residues(Object.keys(interface2));
+            let cmd3 = 'select ' + ic.resid2specCls.residueids2spec(residueArray3);
+            let cmd4 = 'select ' + ic.resid2specCls.residueids2spec(residueArray4);
+            html += 'interface_1 <button class="' + ic.pre + 'selset" cmd="' + cmd3 + '">Highlight in 3D</button><br>';
+            html += 'interface_2 <button class="' + ic.pre + 'selset" cmd="' + cmd4 + '">Highlight in 3D</button><br><br></div>';
+            html += '<div><b>Note</b>: Each checkbox below selects the corresponding residue. '
+                + 'You can click "Save Selection" in the "Select" menu to save the selection '
+                + 'and click on "Highlight" button to clear the checkboxes.</div><br>';
+            
+            if(type == 'graph' || type == 'linegraph' || type == 'scatterplot' || bContactMapLocal) html = '';
+            html += tableHtml;
+        }
+        let header = html;
 
        if(type == 'save1' || type == 'save2') {
            html = header;
@@ -101765,8 +101856,10 @@ class ViewInterPairs {
            html += result.html;
            bondCnt = result.bondCnt;
 
-           $("#" + ic.pre + "dl_interactionsorted_html").html(html);
-           me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
+           if(!bHbondPlot) {
+            $("#" + ic.pre + "dl_interactionsorted_html").html(html);
+            me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
+           }
 
            if(me.bNode) {
             console.log(html);
@@ -102060,10 +102153,10 @@ class ViewInterPairs {
 
                 let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
                 let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-                let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+                let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist = Math.sqrt(labels2dist[labels]).toFixed(1);
                 tmpText += '<tr><td><span style="white-space:nowrap"><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + interactionType + '2_' +  cnt + 'a" resid="' + resid1 + '"/> ' + resid1 + colorText1 + color1 + colorText2 + '</span></td><td><span style="white-space:nowrap"><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + interactionType + '2_' +  cnt + 'b" resid="' + resid2 + '"/> ' + resid2 + colorText1 + color2 + colorText2 + '</span></td><td align="center">' + dist + '</td>';
                 tmpText += '<td align="center"><button class="' + ic.pre + 'selres" resid="' + resid1 + '|' + resid2 + '">Highlight</button></td>';
@@ -102149,10 +102242,10 @@ class ViewInterPairs {
 
                 let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
                 let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-                let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+                let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist1_dist2_atom1_atom2 = resids2distCnt[resids].dist1_dist2_atom1_atom2;
                 let dist1 = dist1_dist2_atom1_atom2[0];
                 let dist2 = dist1_dist2_atom1_atom2[1];
@@ -102265,11 +102358,11 @@ class ViewInterPairs {
         for(let resid1 in ic.resid2ResidhashHbond) {
             let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
             let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-            let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+            let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
             for(let resid2 in ic.resid2ResidhashHbond[resid1]) {
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist = Math.sqrt(ic.resid2ResidhashHbond[resid1][resid2]).toFixed(1);
                 tmpText += '<tr><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + 'hbond_' +  cnt + 'a" resid="' + resid1 + '"/> ' + resid1 + colorText1 + color1 + colorText2 + '</td><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + 'hbond_' +  cnt + 'b" resid="' + resid2 + '"/> ' + resid2 + colorText1 + color2 + colorText2 + '</td><td align="center">' + dist + '</td>';
                 if(type == 'view') tmpText += '<td align="center"><button class="' + ic.pre + 'selres" resid="' + resid1 + '|' + resid2 + '">Highlight</button></td>';
@@ -102303,11 +102396,11 @@ class ViewInterPairs {
         for(let resid1 in ic.resid2ResidhashSaltbridge) {
             let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
             let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-            let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+            let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
             for(let resid2 in ic.resid2ResidhashSaltbridge[resid1]) {
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist = Math.sqrt(ic.resid2ResidhashSaltbridge[resid1][resid2]).toFixed(1);
                 tmpText += '<tr><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + 'saltb_' +  cnt + 'a" resid="' + resid1 + '"/> ' + resid1 + colorText1 + color1 + colorText2 + '</td><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + 'saltb_' +  cnt + 'b" resid="' + resid2 + '"/> ' + resid2 + colorText1 + color2 + colorText2 + '</td><td align="center">' + dist + '</td>';
                 if(type == 'view') tmpText += '<td align="center"><button class="' + ic.pre + 'selres" resid="' + resid1 + '|' + resid2 + '">Highlight</button></td>';
@@ -102357,11 +102450,11 @@ class ViewInterPairs {
         for(let resid1 in resid2Residhash) {
             let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
             let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-            let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+            let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
             for(let resid2 in resid2Residhash[resid1]) {
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist = Math.sqrt(resid2Residhash[resid1][resid2]).toFixed(1);
                 tmpText += '<tr><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + interactionType + '_' +  cnt + 'a" resid="' + resid1 + '"/> ' + resid1 + colorText1 + color1 + colorText2 + '</td><td><input type="checkbox" class="' + ic.pre + 'seloneres" id="' + ic.pre + interactionType + '_' +  cnt + 'b" resid="' + resid2 + '"/> ' + resid2 + colorText1 + color2 + colorText2 + '</td><td align="center">' + dist + '</td>';
                 if(type == 'view') tmpText += '<td align="center"><button class="' + ic.pre + 'selres" resid="' + resid1 + '|' + resid2 + '">Highlight</button></td>';
@@ -102396,11 +102489,11 @@ class ViewInterPairs {
         for(let resid1 in residHash) { // e.g., resid1: TYR $1KQ2.A:42
             let resid1Real = ic.getGraphCls.convertLabel2Resid(resid1);
             let atom1 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid1Real]);
-            let color1 = (atom1.color) ? atom1.color.getHexString() : '';
+            let color1 = (atom1 && atom1.color) ? atom1.color.getHexString() : '';
             for(let resid2 in residHash[resid1]) {
                 let resid2Real = ic.getGraphCls.convertLabel2Resid(resid2);
                 let atom2 = ic.firstAtomObjCls.getFirstAtomObj(ic.residues[resid2Real]);
-                let color2 = (atom2.color) ? atom2.color.getHexString() : '';
+                let color2 = (atom2 && atom2.color) ? atom2.color.getHexString() : '';
                 let dist1_dist2_atom1_atom2 = residHash[resid1][resid2].split('_');
                 let dist1 = dist1_dist2_atom1_atom2[0];
                 let dist2 = dist1_dist2_atom1_atom2[1];
@@ -106714,7 +106807,7 @@ class BcifParser {
 
         if(block.getCategory("_struct")) {
             title = block.getCategory("_struct").getColumn("title").getString(0);
-            title = title.replace(/"/, "'");
+            title = title.replace(/"/g, "'");
         }
 
         if(block.getCategory("_struct_keywords")) {
@@ -108795,7 +108888,7 @@ class DcdParser {
         return true;
     }
 
-    async showRmsdPlot() { let ic = this.icn3d, me = ic.icn3dui;
+    async showRmsdHbondPlot(bHbondPlot) { let ic = this.icn3d, me = ic.icn3dui;
         if(ic.bChartjs === undefined) {
             let url = "https://cdn.jsdelivr.net/npm/chart.js";
             await me.getAjaxPromise(url, 'script');
@@ -108803,42 +108896,87 @@ class DcdParser {
             ic.bChartjs = true;
         }
 
-        $("#" + me.rmsdplotid).empty();
-        me.htmlCls.dialogCls.openDlg('dl_rmsdplot', 'RMSD Plot');
+        if(bHbondPlot) {
+            $("#" + me.hbondplotid).empty();
+            me.htmlCls.dialogCls.openDlg('dl_hbondplot', 'H-bond Plot');
+        }
+        else {
+            $("#" + me.rmsdplotid).empty();
+            me.htmlCls.dialogCls.openDlg('dl_rmsdplot', 'RMSD Plot');
+        }
 
         let dataSet = [];
         let structureArray = Object.keys(ic.structures);
-        let coord1 = [], coord2 = [];
-        for(let i = 0, il = structureArray.length; i < il; ++i) {
-            let chainArray = ic.structures[structureArray[i]];
+        if(bHbondPlot) {
+            for(let i = 0, il = structureArray.length; i < il; ++i) {
+                if(i > 0) {
+                    let type = 'save1';
+                    let stru = structureArray[i];
+                    let atomSet = {};
+                    for(let j = 0, jl = ic.structures[stru].length; j < jl; ++j) {
+                        let chainid = ic.structures[stru][j];
+                        for(let k in ic.chains[chainid]) {
+                            let atom = ic.atoms[k];
+                            if(!ic.water.hasOwnProperty(atom.serial) && !ic.ions.hasOwnProperty(atom.serial)) atomSet[k] = 1;
+                        }
+                    }
 
-            let coord = [];
-            let nAtoms = 0;
-            for(let j = 0, jl = chainArray.length; j < jl; ++j) {
-                let chainid = chainArray[j];
-                for(let k in ic.chains[chainid]) {
-                    let atom = ic.atoms[k];
-                    // only align proteins, nucleotides, or chemicals
-                    if(ic.proteins.hasOwnProperty(atom.serial) || ic.nucleotides.hasOwnProperty(atom.serial) || ic.chemicals.hasOwnProperty(atom.serial)) {
-                        coord.push(atom.coord);
-                        ++nAtoms;
+                    let residueHash = ic.firstAtomObjCls.getResiduesFromAtoms(atomSet);
+                    let command = structureArray[i] + '_nonSol'; // exclude solvent and ions 
+                    let residArray = Object.keys(residueHash);
+                    ic.selectionCls.addCustomSelection(residArray, command, command, 'select ' + command, true);
+                    let nameArray = [command];
+                    let nameArray2 = [command];
+
+                    let result = await ic.viewInterPairsCls.viewInteractionPairs(nameArray2, nameArray, false, type,
+                        true, false, false, false, false, false, undefined, bHbondPlot);
+                    let bondCnt = result.bondCnt;
+
+                    let hBondCnt = 0;
+                    for(let j = 0, jl = bondCnt.length; j < jl; ++j) {
+                        hBondCnt += bondCnt[j].cntHbond; // + bondCnt[j].cntIonic + bondCnt[j].cntHalegen + bondCnt[j].cntPication + bondCnt[j].cntPistacking;
                     }
+
+                    let time = ic.TIMEOFFSET + (i * ic.DELTA).toPrecision(4);
+                    dataSet.push({x: time, y: hBondCnt});
                 }
             }
 
-            if(i == 0) {
-                coord1 = [].concat(coord);
-            }
-            else {
-                coord2 = coord;
-            }
+            ic.viewInterPairsCls.resetInteractionPairs();
+        }
+        else {
+            let coord1 = [], coord2 = [];
+            for(let i = 0, il = structureArray.length; i < il; ++i) {
+                let chainArray = ic.structures[structureArray[i]];
+
+                let coord = [];
+                let nAtoms = 0;
+                for(let j = 0, jl = chainArray.length; j < jl; ++j) {
+                    let chainid = chainArray[j];
+                    for(let k in ic.chains[chainid]) {
+                        let atom = ic.atoms[k];
+                        // only align proteins, nucleotides, or chemicals
+                        if(ic.proteins.hasOwnProperty(atom.serial) || ic.nucleotides.hasOwnProperty(atom.serial) || ic.chemicals.hasOwnProperty(atom.serial)) {
+                            coord.push(atom.coord);
+                            ++nAtoms;
+                        }
+                    }
+                }
 
-            if(i > 0) {
-                let result = me.rmsdSuprCls.getRmsdSuprCls(coord1, coord2, nAtoms);
-                let rmsd = (result.rmsd * 0.1).toPrecision(4); // convert from Å to nm
+                if(i == 0) {
+                    coord1 = [].concat(coord);
+                }
+                else {
+                    coord2 = coord;
+                }
+
+                if(i > 0) {
+                    let result = me.rmsdSuprCls.getRmsdSuprCls(coord1, coord2, nAtoms);
+                    let rmsd = (result.rmsd * 0.1).toPrecision(4); // convert from Å to nm
 
-                let time = ic.TIMEOFFSET + (i * ic.DELTA).toPrecision(4);
-                dataSet.push({x: time, y: rmsd});
+                    let time = ic.TIMEOFFSET + (i * ic.DELTA).toPrecision(4);
+                    dataSet.push({x: time, y: rmsd});
+                }
             }
         }
 
@@ -108849,13 +108987,13 @@ class DcdParser {
 
         // https://www.chartjs.org/docs/latest/samples/line/line.html
         // const ctx = $("#" + me.rmsdplotid)[0].getContext('2d');
-        const ctx = $("#" + me.rmsdplotid)[0];
+        const ctx = (bHbondPlot) ? $("#" + me.hbondplotid)[0] : $("#" + me.rmsdplotid)[0];
 
         new Chart(ctx, {
             type: 'line',
             data: {
                 datasets: [{
-                    label: 'RMSD',
+                    label: (bHbondPlot) ? 'H-bonds' : 'RMSD',
                     data: dataSet
                 }]
             },
@@ -108876,7 +109014,7 @@ class DcdParser {
                     y: { // Y-axis configuration (defaults to numeric scale)
                         title: {
                             display: true, // Show the Y-axis label
-                            text: 'RMSD (nm)'  // Text for the Y-axis label
+                            text: (bHbondPlot) ? 'Number of H-bonds' : 'RMSD (nm)'  // Text for the Y-axis label
                         }
                     }
                 }
@@ -112352,7 +112490,7 @@ class ParserUtils {
             let data = await me.getAjaxPromise(url, 'jsonp');
 
             if(data && data.pdbid) {
-              let question = "This is a single-spanning (bitopic) transmembrane protein according to the Membranome database. Do you want to align the protein with the model from Membranome? If you click \"OK\", you can press the letter \"a\" to alternate the structures.";
+              let question = "This is a single-spanning (bitopic) transmembrane protein according to the Membranome database. Do you want to align the protein with the model from Membranome? If you click \"OK\", you can press the letter \"a\" or SHIFT + \"a\" to alternate the structures.";
 
               if (me.bNode) return;
 
@@ -113013,6 +113151,16 @@ class LoadAtomData {
                     }
                 }
             }
+
+            // no bonds between metals, e.g., in PDB 4HEA
+            if($.inArray(atom.elem, me.parasCls.ionsArray) !== -1) {
+                for(let j = atom.bonds.length - 1; j >= 0; --j) {
+                    let atom2 = ic.atoms[atom.bonds[j]];
+                    if(atom2 && $.inArray(atom2.elem, me.parasCls.ionsArray) !== -1) {
+                        atom.bonds.splice(j, 1);
+                    }
+                }
+            }
         }
 
         // adjust biopolymer type
@@ -115482,6 +115630,7 @@ class LoadPDB {
     // refresh for atoms in each residue
     refreshBonds(curResAtoms, prevCarbon) { let ic = this.icn3d, me = ic.icn3dui;
         let n = curResAtoms.length;
+
         for (let j = 0; j < n; ++j) {
             let atom0 = curResAtoms[j];
             for (let k = j + 1; k < n; ++k) {
@@ -115825,7 +115974,7 @@ class LoadCIF {
             
             if(block.getCategory("_struct")) {
                 let title = block.getCategory("_struct").getColumn("title").getString(0);
-                title = title.replace(/"/, "'");
+                title = title.replace(/"/g, "'");
                 let name = title.replace(/ALPHAFOLD MONOMER V2.0 PREDICTION FOR /gi, '');
                 ic.molTitle += name.trim() + " ";
                 // if(bEsmfold && ic.esmTitle) ic.molTitle = ic.esmTitle;
@@ -123821,6 +123970,7 @@ class Dssp {
         if(!ic.resid2domainid) ic.resid2domainid = {};
         //ic.resid2domainid = {};
         ic.domainid2pdb = {};
+        if(!ic.domainid2sheetEnds) ic.domainid2sheetEnds = {}; // record the end of sheets to check for jellyRoll
 
         let bNoMoreIg = true;
         let bFoundDomain = false;
@@ -123860,6 +124010,15 @@ class Dssp {
 
                     ic.domainid2pdb[domainid] = pdb_target;
 
+                    ic.domainid2sheetEnds[domainid] = {};
+                    for(let m in domainAtomsArray[k]) {
+                        let atom = ic.atoms[m];
+                        if(atom.ss == 'sheet' && atom.ssend) {
+                            let resid = atom.structure + '_' + atom.chain + '_' + atom.resi;
+                            ic.domainid2sheetEnds[domainid][resid] = 1;
+                        }
+                    }
+
                     if(!template) {
                         for(let index = 0, indexl = dataArray.length; index < indexl; ++index) {
                             let struct2 = ic.defaultPdbId + index;
@@ -124047,7 +124206,7 @@ class Dssp {
     }
 
     getTemplateList(domainid) { let ic = this.icn3d; ic.icn3dui;
-        let refpdbname = '', score = '', seqid = '', nresAlign = '';
+        let refpdbname = '', score = '', score2 = '', seqid = '', nresAlign = '';
 
         refpdbname = ic.domainid2refpdbname[domainid][0]; // one template in round 2
 
@@ -124057,9 +124216,10 @@ class Dssp {
             score = itemArray[0];
             seqid = itemArray[1];
             nresAlign = itemArray[2];
+            score2 = itemArray[3];
         }
 
-        return {'refpdbname': refpdbname, 'score': score, 'seqid': seqid, 'nresAlign': nresAlign};
+        return {'refpdbname': refpdbname, 'score': score, 'score2': score2, 'seqid': seqid, 'nresAlign': nresAlign};
     }
 
     parseAlignData_part1(dataArray, domainidpairArray, bRound1) { let ic = this.icn3d, me = ic.icn3dui;
@@ -124204,7 +124364,7 @@ class Dssp {
 
             // use TM-score alone
             if(!domainid2segs.hasOwnProperty(domainid) || score >= parseFloat(ic.domainid2score[domainid].split('_')[0])) {      
-                ic.domainid2score[domainid] = queryData[0].score + '_' + queryData[0].frac_identical + '_' + queryData[0].num_res ;
+                ic.domainid2score[domainid] = queryData[0].score + '_' + queryData[0].frac_identical + '_' + queryData[0].num_res + '_' + queryData[0].score2;
 
                 if(bRound1) {
                     ic.domainid2refpdbname[domainid] = score >= this.TMThresholdIgType ? [refpdbname] : ['all_templates'];
@@ -124384,6 +124544,7 @@ class Dssp {
             let result = this.getTemplateList(domainid);
             let refpdbname = result.refpdbname;
             let score = result.score;
+            let score2 = result.score2;
             let seqid = result.seqid;
             let nresAlign = result.nresAlign;
 
@@ -124396,7 +124557,7 @@ class Dssp {
                 }
 
                 // ic.refPdbList.push(message);
-                ic.domainid2info[domainid] = {'refpdbname': refpdbname, 'score': score, 'seqid': seqid, 'nresAlign': nresAlign};
+                ic.domainid2info[domainid] = {'refpdbname': refpdbname, 'score': score, 'score2': score2, 'seqid': seqid, 'nresAlign': nresAlign};
             }
 
             // adjust C' and D strands ======start
@@ -125746,7 +125907,7 @@ console.log("free energy: " + energy + " kcal/mol");
                 me.alertAlt = true;
 
                 //if(ic.bRender) var aaa = 1; //alert('Please press the letter "a" to alternate between wild type and mutant.');
-                var aaa = 1; //alert('Please press the letter "a" to alternate between wild type and mutant.');
+                var aaa = 1; //alert('Please press the letter "a" or SHIFT + "a" to alternate between wild type and mutant.');
               }
           }
 
@@ -134298,7 +134459,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.47.0';
+    this.REVISION = '3.47.1';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}", and added window = {navigator: {}, "__THREE__":"177"}
     this.bNode = (Object.keys(window).length < 3) ? true : false;