icn3d 3.23.6 → 3.24.1

package/icn3d.module.js

@@ -5269,10 +5269,10 @@ class ParasCls {
         ];
 
         this.backgroundColors = {
-            black: this.thr(0x000000),
-             grey: this.thr(0xCCCCCC),
-            white: this.thr(0xFFFFFF),
-            transparent: this.thr(0xFFFFFF) //this.thr(0x000000)
+            'black': this.thr(0x000000),
+             'grey': this.thr(0xCCCCCC),
+            'white': this.thr(0xFFFFFF),
+            'transparent': this.thr(0xFFFFFF) //this.thr(0x000000)
         };
 
         this.residueColors = {
@@ -6586,7 +6586,7 @@ class ClickMenu {
         if(!bOneset) $("#" + me.pre + id2).resizable();
     }
 
-    applyShownMenus() { let me = this.icn3dui; me.icn3d;
+    applyShownMenus(bNoSave) { let me = this.icn3dui; me.icn3d;
         let idArray = [];
         for(let id in me.htmlCls.allMenus) {
             if(me.htmlCls.shownMenus.hasOwnProperty(id)) {
@@ -6606,7 +6606,7 @@ class ClickMenu {
         }
 
         // save to localStorage
-        if(localStorage) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
+        if(localStorage && !bNoSave) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
     }
 
     getHiddenMenusFromCache() { let me = this.icn3dui; me.icn3d;
@@ -6686,96 +6686,96 @@ class ClickMenu {
         let thisClass = this;
     //mn 1
     //    clkMn1_mmtfid: function() {
-        me.myEventCls.onIds("#" + me.pre + "mn1_vastplus", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_vastplus", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_vastplus', 'Please input PDB ID for VAST+');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_vast", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_vast", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_vast', 'Please input chain or PDB file for VAST');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_foldseek", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_foldseek", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_foldseek', 'Submit your selection to Foldseek');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mmtfid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mmtfid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mmtfid', 'Please input MMTF ID');
         });
 
     //    clkMn1_pdbid: function() {
-        me.myEventCls.onIds("#" + me.pre + "mn1_pdbid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_pdbid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_pdbid', 'Please input PDB ID');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_afid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_afid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_afid', 'Please input AlphaFold UniProt ID');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_refseqid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_refseqid", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_refseqid', 'Please input NCBI Protein Accession');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_opmid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_opmid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_opmid', 'Please input OPM PDB ID');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_align", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_align", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_align', 'Align two PDB structures');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_alignaf", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_alignaf", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_alignaf', 'Align two AlphaFold structures');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_chainalign', 'Align multiple chains by structure alignment');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign2", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign2", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_chainalign2', 'Align multiple chains by sequence alignment');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign3", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_chainalign3", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_chainalign3', 'Align multiple chains residue by residue');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mutation", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mutation", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mutation', 'Show the mutations in 3D');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_pdbfile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_pdbfile", "click", function(e) { me.icn3d; e.preventDefault();
            //me = me.setIcn3dui($(this).attr('id'));
            me.htmlCls.dialogCls.openDlg('dl_pdbfile', 'Please input PDB File');
         });
-        me.myEventCls.onIds(["#" + me.pre + "mn1_pdbfile_app", "#" + me.pre + "tool_pdbfile"], "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_pdbfile_app", "#" + me.pre + "tool_pdbfile"], "click", function(e) { me.icn3d; e.preventDefault();
            //me = me.setIcn3dui($(this).attr('id'));
            me.htmlCls.dialogCls.openDlg('dl_pdbfile_app', 'Please append PDB Files');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mol2file", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mol2file", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mol2file', 'Please input Mol2 File');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_sdffile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_sdffile", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_sdffile', 'Please input SDF File');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_xyzfile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_xyzfile", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_xyzfile', 'Please input XYZ File');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_afmapfile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_afmapfile", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_afmapfile', 'Please input AlphaFold PAE File');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_urlfile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_urlfile", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_urlfile', 'Load data by URL');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_fixedversion", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_fixedversion", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_fixedversion', 'Open Share Link URL in the archived version of iCn3D');
         });
-        me.myEventCls.onIds("#" + me.pre + "reload_fixedversion", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "reload_fixedversion", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let url = $("#" + me.pre + "sharelinkurl").val();
            thisClass.setLogCmd("open " + url, false);
            localStorage.setItem('fixedversion', '1');
@@ -6783,65 +6783,65 @@ class ClickMenu {
            window.open(url, urlTarget);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mmciffile", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mmciffile", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mmciffile', 'Please input mmCIF File');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mmcifid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mmcifid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mmcifid', 'Please input mmCIF ID');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_mmdbid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_mmdbid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_mmdbid', 'Please input MMDB or PDB ID');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn1_mmdbafid", , "#" + me.pre + "tool_mmdbafid"], "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_mmdbafid", , "#" + me.pre + "tool_mmdbafid"], "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_mmdbafid', 'Please input PDB/MMDB/AlphaFold UniProt IDs');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_blast_rep_id", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_blast_rep_id", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_blast_rep_id', 'Align sequence to structure');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_gi", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_gi", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_gi', 'Please input protein gi');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_cid", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_cid", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_cid', 'Please input PubChem CID');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_pngimage", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_pngimage", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_pngimage', 'Please input the PNG image');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_state", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_state", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_state', 'Please input the state file');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_selection", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_selection", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_selection', 'Please input the selection file');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_dsn6", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_dsn6", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_dsn6', 'Please input the DSN6 file to display electron density map');
         });
 
 
-        me.myEventCls.onIds(["#" + me.pre + "mn1_delphi", "#" + me.pre + "mn1_delphi2", "#" + me.pre + "tool_delphi"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_delphi", "#" + me.pre + "mn1_delphi2", "#" + me.pre + "tool_delphi"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.loadPhiFrom = 'delphi';
            $("#" + me.pre + "dl_delphi_tabs").tabs();
            me.htmlCls.dialogCls.openDlg('dl_delphi', 'Please set parameters to display DelPhi potential map');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_phi", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_phi", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.loadPhiFrom = 'phi';
            $("#" + me.pre + "dl_phi_tabs").tabs();
            $("#" + me.pre + "phitab1_tabs").tabs();
            $("#" + me.pre + "phitab2_tabs").tabs();
            me.htmlCls.dialogCls.openDlg('dl_phi', 'Please input local phi or cube file to display DelPhi potential map');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_phiurl", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_phiurl", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.loadPhiFrom = 'phiurl';
            $("#" + me.pre + "dl_phiurl_tabs").tabs();
            $("#" + me.pre + "phiurltab1_tabs").tabs();
@@ -6850,11 +6850,11 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_dsn6url", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_dsn6url", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_dsn6url', 'Please input the DSN6 file to display electron density map');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportState", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportState", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export state file", false);
            let file_pref =(ic.inputid) ? ic.inputid : "custom";
 
@@ -6862,19 +6862,19 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportPdbRes", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportPdbRes", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.setHtmlCls.exportPdb();
 
            thisClass.setLogCmd("export pdb", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportSecondary", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportSecondary", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.setHtmlCls.exportSecondary();
 
            thisClass.setLogCmd("export secondary structure", true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "delphipdb", "#" + me.pre + "phipdb"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "delphipdb", "#" + me.pre + "phipdb"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let pdbStr = ic.saveFileCls.getSelectedResiduePDB();
 
            thisClass.setLogCmd("export PDB of selected residues", false);
@@ -6882,42 +6882,42 @@ class ClickMenu {
            ic.saveFileCls.saveFile(file_pref + '_icn3d_residues.pdb', 'text', [pdbStr]);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "delphipqr", "#" + me.pre + "phipqr", "#" + me.pre + "phiurlpqr"], "click", async function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "delphipqr", "#" + me.pre + "phipqr", "#" + me.pre + "phiurlpqr"], "click", async function(e) { me.icn3d; e.preventDefault();
            await me.htmlCls.setHtmlCls.exportPqr();
            thisClass.setLogCmd("export pqr", true);
         });
 
-      //   me.myEventCls.onIds("#" + me.pre + "delphipqbh", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+      //   me.myEventCls.onIds("#" + me.pre + "delphipqbh", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
       //       let bPdb = true;
       //       await me.htmlCls.setHtmlCls.exportPqr(bPdb);
       //       thisClass.setLogCmd("export pdbh", false);
       //    });
 
-        me.myEventCls.onIds("#" + me.pre + "profixpdb", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "profixpdb", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
          let bHydrogen = false;
          await ic.scapCls.exportPdbProfix(bHydrogen);
          thisClass.setLogCmd("export pdb missing atoms", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "profixpdbh", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "profixpdbh", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
         let bHydrogen = true;
         await ic.scapCls.exportPdbProfix(bHydrogen);
         thisClass.setLogCmd("export pdb hydrogen", true);
        });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportStl", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportStl", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export stl file", false);
            //ic.threeDPrintCls.hideStabilizer();
            ic.export3DCls.exportStlFile('');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportVrml", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportVrml", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export vrml file", false);
            //ic.threeDPrintCls.hideStabilizer();
            ic.export3DCls.exportVrmlFile('');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportStlStab", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportStlStab", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export stl stabilizer file", false);
            //ic.bRender = false;
            ic.threeDPrintCls.hideStabilizer();
@@ -6926,7 +6926,7 @@ class ClickMenu {
            ic.export3DCls.exportStlFile('_stab');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportVrmlStab", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportVrmlStab", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export vrml stabilizer file", false);
            //ic.bRender = false;
            ic.threeDPrintCls.hideStabilizer();
@@ -6935,13 +6935,13 @@ class ClickMenu {
            ic.export3DCls.exportVrmlFile('_stab');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_exportInteraction", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_exportInteraction", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export interactions", false);
            if(me.cfg.mmdbid !== undefined) await ic.viewInterPairsCls.retrieveInteractionData();
            ic.viewInterPairsCls.exportInteractions();
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn1_exportCanvas", "#" + me.pre + "saveimage"], "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_exportCanvas", "#" + me.pre + "saveimage"], "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            // do not record the export command
            //thisClass.setLogCmd("export canvas", true);
            thisClass.setLogCmd("export canvas", false);
@@ -6950,28 +6950,28 @@ class ClickMenu {
            let bPngHtml = true;
            await ic.shareLinkCls.shareLink(bPngHtml);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas1", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas1", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export canvas 1", true);
            ic.scaleFactor = 1;
            await ic.shareLinkCls.shareLink(true, true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas2", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas2", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export canvas 2", true);
            ic.scaleFactor = 2;
            await ic.shareLinkCls.shareLink(true, true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas4", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas4", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export canvas 4", true);
            ic.scaleFactor = 4;
            await ic.shareLinkCls.shareLink(true, true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas8", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportCanvas8", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export canvas 8", true);
            ic.scaleFactor = 8;
            await ic.shareLinkCls.shareLink(true, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportCounts", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportCounts", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export counts", false);
            let text = '<html><body><div style="text-align:center"><br><b>Total Count for atoms with coordinates</b>:<br/><table align=center border=1 cellpadding=10 cellspacing=0><tr><th>Structure Count</th><th>Chain Count</th><th>Residue Count</th><th>Atom Count</th></tr>';
            text += '<tr><td>' + Object.keys(ic.structures).length + '</td><td>' + Object.keys(ic.chains).length + '</td><td>' + Object.keys(ic.residues).length + '</td><td>' + Object.keys(ic.atoms).length + '</td></tr>';
@@ -6998,7 +6998,7 @@ class ClickMenu {
            ic.saveFileCls.saveFile(file_pref + '_counts.html', 'html', text);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportSelections", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportSelections", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export all selections", false);
           
            thisClass.SetChainsAdvancedMenu();
@@ -7008,7 +7008,7 @@ class ClickMenu {
            ic.saveFileCls.saveFile(file_pref + '_selections.txt', 'text', [text]);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_exportSelDetails", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_exportSelDetails", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("export all selections with details", false);
           
            thisClass.SetChainsAdvancedMenu();
@@ -7019,32 +7019,32 @@ class ClickMenu {
            ic.saveFileCls.saveFile(file_pref + '_sel_details.txt', 'text', [text]);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn1_sharelink", "#" + me.pre + "tool_sharelink"], "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_sharelink", "#" + me.pre + "tool_sharelink"], "click", async function(e) { let ic = me.icn3d; e.preventDefault();
             await ic.shareLinkCls.shareLink();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_replayon", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_replayon", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
           await ic.resizeCanvasCls.replayon();
           thisClass.setLogCmd("replay on", true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_replayoff", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_replayoff", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
             await ic.resizeCanvasCls.replayoff();
             thisClass.setLogCmd("replay off", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_menuall", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_menuall", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
 
             thisClass.applyShownMenus();    
           });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_menusimple", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_menusimple", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
 
             thisClass.applyShownMenus();
           });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_menupref", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_menupref", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_menupref', 'Select Menus');
 
             thisClass.getHiddenMenusFromCache();
@@ -7052,7 +7052,7 @@ class ClickMenu {
             thisClass.displayShownMenus();
          });
 
-         me.myEventCls.onIds(["#" + me.pre + "apply_menupref", "#" + me.pre + "apply_menupref2"], "click", function(e) { me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds(["#" + me.pre + "apply_menupref", "#" + me.pre + "apply_menupref2"], "click", function(e) { me.icn3d; e.preventDefault();
             var checkboxes = document.querySelectorAll('form[name="' + me.pre + 'selmenu"] input:checked');
             me.htmlCls.shownMenus = {};
             for (var checkbox of checkboxes) {
@@ -7062,21 +7062,21 @@ class ClickMenu {
             thisClass.applyShownMenus();
          });
 
-         me.myEventCls.onIds(["#" + me.pre + "reset_menupref", "#" + me.pre + "reset_menupref2"], "click", function(e) { me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds(["#" + me.pre + "reset_menupref", "#" + me.pre + "reset_menupref2"], "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
 
             thisClass.applyShownMenus();
             thisClass.displayShownMenus();
          });
 
-         me.myEventCls.onIds(["#" + me.pre + "reset_menupref_all", "#" + me.pre + "reset_menupref_all2"], "click", function(e) { me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds(["#" + me.pre + "reset_menupref_all", "#" + me.pre + "reset_menupref_all2"], "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
 
             thisClass.applyShownMenus();
             thisClass.displayShownMenus();
          });
 
-         me.myEventCls.onIds(["#" + me.pre + "savepref", "#" + me.pre + "savepref2"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds(["#" + me.pre + "savepref", "#" + me.pre + "savepref2"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
             let menuStr = '[';
 
             //var checkboxes = document.querySelectorAll('form[name="' + me.pre + 'selmenu"] input:checked');
@@ -7093,7 +7093,7 @@ class ClickMenu {
             ic.saveFileCls.saveFile('icn3d_menus_pref.txt', 'text', [menuStr]);
          });
 
-         me.myEventCls.onIds("#" + me.pre + "reload_menupreffile", "click", function(e) { me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "reload_menupreffile", "click", function(e) { me.icn3d; e.preventDefault();
  
             if(!me.cfg.notebook) dialog.dialog( "close" );
             let file = $("#" + me.pre + "menupreffile")[0].files[0];
@@ -7124,25 +7124,25 @@ class ClickMenu {
             }
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_menuloadpref", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_menuloadpref", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_menuloadpref', 'Please input the menu preference file');
         });
          
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_link_structure", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_link_structure", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let url = ic.saveFileCls.getLinkToStructureSummary(true);
            let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
            window.open(url, urlTarget);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_link_bind", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_link_bind", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            url = "https://www.ncbi.nlm.nih.gov/pccompound?LinkName=pccompound_structure&from_uid=" + ic.inputid;
            thisClass.setLogCmd("link to 3D protein structures bound to CID " + ic.inputid + ": " + url, false);
            let urlTarget = (ic.structures && Object.keys(ic.structures).length > 0) ? '_blank' : '_self';
            window.open(url, urlTarget);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_link_vast", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_link_vast", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            if(ic.inputid === undefined) {
                    url = "https://www.ncbi.nlm.nih.gov/pccompound?term=" + ic.molTitle;
                    thisClass.setLogCmd("link to compounds " + ic.molTitle + ": " + url, false);
@@ -7171,7 +7171,7 @@ class ClickMenu {
            window.open(url, urlTarget);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_link_pubmed", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_link_pubmed", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            if(ic.inputid === undefined) {
                let url;
                url = "https://www.ncbi.nlm.nih.gov/pubmed/?term=" + ic.molTitle;
@@ -7217,7 +7217,7 @@ class ClickMenu {
            }
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_link_protein", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_link_protein", "click", function(e) { let ic = me.icn3d; e.preventDefault();
           //ic.saveFileCls.setEntrezLinks('protein');
           let structArray = Object.keys(ic.structures);
           let chainArray = Object.keys(ic.chains);
@@ -7242,19 +7242,19 @@ class ClickMenu {
 
         let thisClass = this;
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_selectannotations", "#" + me.pre + "tool_selectannotations"], "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_selectannotations", "#" + me.pre + "tool_selectannotations"], "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            await ic.showAnnoCls.showAnnotations();
            thisClass.setLogCmd("view annotations", true);
            //thisClass.setLogCmd("window annotations", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectall", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectall", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select all", true);
            ic.selectionCls.selectAll();
            ic.hlUpdateCls.removeHlAll();
            ic.drawCls.draw();
         });
-        me.myEventCls.onIds("#" + me.pre + "clearall", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "clearall", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("clear all", true);
            ic.bSelectResidue = false;
            ic.selectionCls.selectAll();
@@ -7262,7 +7262,7 @@ class ClickMenu {
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectdisplayed", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectdisplayed", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select displayed set", true);
            //ic.hAtoms = me.hashUtilsCls.cloneHash(ic.dAtoms);
            ic.hAtoms = me.hashUtilsCls.cloneHash(ic.viewSelectionAtoms);
@@ -7270,106 +7270,106 @@ class ClickMenu {
            //ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_fullstru", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_fullstru", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("show all", true);
            ic.selectionCls.showAll();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectcomplement", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectcomplement", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            if(Object.keys(ic.hAtoms).length < Object.keys(ic.atoms).length) {
                thisClass.setLogCmd("select complement", true);
                ic.resid2specCls.selectComplement();
            }
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectmainchains", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectmainchains", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select main chains", true);
            ic.selectionCls.selectMainChains();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectsidechains", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectsidechains", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select side chains", true);
            ic.selectionCls.selectSideChains();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_selectmainsidechains", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_selectmainsidechains", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select main side chains", true);
            ic.selectionCls.selectMainSideChains();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_propPos", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propPos", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select prop positive", true);
            ic.resid2specCls.selectProperty('positive');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn2_propNeg", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propNeg", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select prop negative", true);
            ic.resid2specCls.selectProperty('negative');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn2_propHydro", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propHydro", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select prop hydrophobic", true);
            ic.resid2specCls.selectProperty('hydrophobic');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn2_propPolar", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propPolar", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            thisClass.setLogCmd("select prop polar", true);
            ic.resid2specCls.selectProperty('polar');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn2_propBfactor", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propBfactor", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_propbybfactor', 'Select residue based on B-factor');
         });
-        me.myEventCls.onIds("#" + me.pre + "mn2_propSolAcc", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_propSolAcc", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_propbypercentout', 'Select residue based on the percentage of solvent accessilbe surface area');
         });
-        me.myEventCls.onIds("#" + me.pre + "applypropbybfactor", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applypropbybfactor", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let from = $("#" + me.pre + "minbfactor").val();
            let to = $("#" + me.pre + "maxbfactor").val();
            thisClass.setLogCmd("select prop b factor | " + from + '_' + to, true);
            ic.resid2specCls.selectProperty('b factor', from, to);
         });
-        me.myEventCls.onIds("#" + me.pre + "applypropbypercentout", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applypropbypercentout", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let from = $("#" + me.pre + "minpercentout").val();
            let to = $("#" + me.pre + "maxpercentout").val();
            thisClass.setLogCmd("select prop percent out | " + from + '_' + to, true);
            ic.resid2specCls.selectProperty('percent out', from, to);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_alignment", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_alignment", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_alignment', 'Select residues in aligned sequences');
            thisClass.setLogCmd("window aligned sequences", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_window_table", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_window_table", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_allinteraction', 'Show interactions');
            thisClass.setLogCmd("window interaction table", true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_window_linegraph", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_window_linegraph", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_linegraph', 'Show interactions between two lines of residue nodes');
            thisClass.setLogCmd("window interaction graph", true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_window_scatterplot", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_window_scatterplot", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_scatterplot', 'Show interactions as map');
            thisClass.setLogCmd("window interaction scatterplot", true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn1_window_graph", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_window_graph", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_graph', 'Force-directed graph');
            thisClass.setLogCmd("window force-directed graph", true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_yournote", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_yournote", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_yournote', 'Your note about the current display');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "applyyournote", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applyyournote", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.yournote = $("#" + me.pre + "yournote").val();
            if(me.cfg.shownote) document.title = ic.yournote;
            if(!me.cfg.notebook) dialog.dialog( "close" );
            thisClass.setLogCmd('your note | ' + ic.yournote, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_command", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_command", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_advanced2', 'Select by specification');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn2_definedsets", "#" + me.pre + "definedsets", "#" + me.pre + "definedsets2", "#" + me.pre + "tool_definedsets"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn2_definedsets", "#" + me.pre + "definedsets", "#" + me.pre + "definedsets2", "#" + me.pre + "tool_definedsets"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.definedSetsCls.showSets();
            thisClass.setLogCmd('defined sets', true);
            //thisClass.setLogCmd('window defined sets', true);
@@ -7388,7 +7388,7 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 0;
            ic.opts['pk'] = 'no';
            thisClass.setLogCmd('set pk off', true);
@@ -7396,50 +7396,50 @@ class ClickMenu {
            ic.hlObjectsCls.removeHlObjects();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 1;
            ic.opts['pk'] = 'atom';
            thisClass.setLogCmd('set pk atom', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkResidue", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkResidue", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 2;
            ic.opts['pk'] = 'residue';
            thisClass.setLogCmd('set pk residue', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkStrand", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkStrand", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 3;
            ic.opts['pk'] = 'strand';
            thisClass.setLogCmd('set pk strand', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkDomain", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkDomain", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 4;
            ic.opts['pk'] = 'domain';
            thisClass.setLogCmd('set pk domain', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn2_pkChain", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn2_pkChain", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pk = 5;
            ic.opts['pk'] = 'chain';
            thisClass.setLogCmd('set pk chain', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "adjustmem", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "adjustmem", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_adjustmem', 'Adjust the Z-axis positions of the membrane');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "togglemem", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "togglemem", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.selectionCls.toggleMembrane();
            thisClass.setLogCmd('toggle membrane', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "selectplane", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "selectplane", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_selectplane', 'Select a region between two planes');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn2_aroundsphere", "#" + me.pre + "tool_aroundsphere"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn2_aroundsphere", "#" + me.pre + "tool_aroundsphere"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
             thisClass.SetChainsAdvancedMenu();
 
             let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
@@ -7456,7 +7456,7 @@ class ClickMenu {
             $("#" + me.pre + "atomsCustomSphere2").resizable();
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn2_select_chain", "#" + me.pre + "definedSets"], "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn2_select_chain", "#" + me.pre + "definedSets"], "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_select_chain', 'Select Structure/Chain/Custom Selection');
         });
 
@@ -7467,242 +7467,242 @@ class ClickMenu {
 
         let thisClass = this;
     // mn 3
-        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsRibbon","#" + me.pre + "tool_proteinsRibbon"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsRibbon","#" + me.pre + "tool_proteinsRibbon"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'ribbon');
            thisClass.setLogCmd('style proteins ribbon', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsStrand", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsStrand", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'strand');
            thisClass.setLogCmd('style proteins strand', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsCylinder", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsCylinder", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'cylinder and plate');
            thisClass.setLogCmd('style proteins cylinder and plate', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsSchematic", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsSchematic", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'schematic');
            thisClass.setLogCmd('style proteins schematic', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsCalpha", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsCalpha", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'c alpha trace');
            thisClass.setLogCmd('style proteins c alpha trace', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsBackbone", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsBackbone", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'backbone');
            thisClass.setLogCmd('style proteins backbone', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsBfactor", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsBfactor", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'b factor tube');
            thisClass.setLogCmd('style proteins b factor tube', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsLines", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsLines", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'lines');
            thisClass.setLogCmd('style proteins lines', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsStick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsStick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'stick');
            thisClass.setLogCmd('style proteins stick', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsBallstick", "#" + me.pre + "tool_proteinsBallstick"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsBallstick", "#" + me.pre + "tool_proteinsBallstick"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'ball and stick');
            thisClass.setLogCmd('style proteins ball and stick', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsSphere", "#" + me.pre + "tool_proteinsSphere"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn3_proteinsSphere", "#" + me.pre + "tool_proteinsSphere"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'sphere');
            thisClass.setLogCmd('style proteins sphere', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_proteinsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('proteins', 'nothing');
            thisClass.setLogCmd('style proteins nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_sidecLines", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_sidecLines", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('sidec', 'lines2');
            thisClass.setLogCmd('style sidec lines2', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_sidecStick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_sidecStick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('sidec', 'stick2');
            thisClass.setLogCmd('style sidec stick2', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_sidecBallstick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_sidecBallstick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('sidec', 'ball and stick2');
            thisClass.setLogCmd('style sidec ball and stick2', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_sidecSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_sidecSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('sidec', 'sphere2');
            thisClass.setLogCmd('style sidec sphere2', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_sidecNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_sidecNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('sidec', 'nothing');
            thisClass.setLogCmd('style sidec nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseLines", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseLines", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setStyle('ntbase', 'lines2');
             thisClass.setLogCmd('style ntbase lines2', true);
          });
  
-         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseStick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseStick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setStyle('ntbase', 'stick2');
             thisClass.setLogCmd('style ntbase stick2', true);
          });
  
-         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseBallstick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseBallstick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setStyle('ntbase', 'ball and stick2');
             thisClass.setLogCmd('style ntbase ball and stick2', true);
          });
  
-         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setStyle('ntbase', 'sphere2');
             thisClass.setLogCmd('style ntbase sphere2', true);
          });
  
-         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn3_ntbaseNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setStyle('ntbase', 'nothing');
             thisClass.setLogCmd('style ntbase nothing', true);
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclCartoon", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclCartoon", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'nucleotide cartoon');
            thisClass.setLogCmd('style nucleotides nucleotide cartoon', true);
        });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclBackbone", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclBackbone", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'backbone');
            thisClass.setLogCmd('style nucleotides backbone', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclSchematic", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclSchematic", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'schematic');
            thisClass.setLogCmd('style nucleotides schematic', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclPhos", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclPhos", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'o3 trace');
            thisClass.setLogCmd('style nucleotides o3 trace', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclLines", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclLines", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'lines');
            thisClass.setLogCmd('style nucleotides lines', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclStick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclStick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'stick');
            thisClass.setLogCmd('style nucleotides stick', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclBallstick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclBallstick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'ball and stick');
            thisClass.setLogCmd('style nucleotides ball and stick', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'sphere');
            thisClass.setLogCmd('style nucleotides sphere', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_nuclNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_nuclNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('nucleotides', 'nothing');
            thisClass.setLogCmd('style nucleotides nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligLines", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligLines", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'lines');
            thisClass.setLogCmd('style chemicals lines', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligStick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligStick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'stick');
            thisClass.setLogCmd('style chemicals stick', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligBallstick", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligBallstick", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'ball and stick');
            thisClass.setLogCmd('style chemicals ball and stick', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligSchematic", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligSchematic", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'schematic');
            thisClass.setLogCmd('style chemicals schematic', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'sphere');
            thisClass.setLogCmd('style chemicals sphere', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ligNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ligNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('chemicals', 'nothing');
            thisClass.setLogCmd('style chemicals nothing', true);
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_glycansCartYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_glycansCartYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bGlycansCartoon = true;
            ic.drawCls.draw();
            thisClass.setLogCmd('glycans cartoon yes', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn3_glycansCartNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_glycansCartNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bGlycansCartoon = false;
            ic.drawCls.draw();
            thisClass.setLogCmd('glycans cartoon no', true);
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_hydrogensYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_hydrogensYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.showInterCls.showHydrogens();
            ic.drawCls.draw();
            thisClass.setLogCmd('hydrogens', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_hydrogensNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_hydrogensNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.showInterCls.hideHydrogens();
            ic.drawCls.draw();
            thisClass.setLogCmd('set hydrogens off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ionsSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ionsSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('ions', 'sphere');
            thisClass.setLogCmd('style ions sphere', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ionsDot", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ionsDot", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('ions', 'dot');
            thisClass.setLogCmd('style ions dot', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_ionsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_ionsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('ions', 'nothing');
            thisClass.setLogCmd('style ions nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_waterSphere", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_waterSphere", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('water', 'sphere');
            thisClass.setLogCmd('style water sphere', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_waterDot", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_waterDot", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('water', 'dot');
            thisClass.setLogCmd('style water dot', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_waterNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_waterNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setStyle('water', 'nothing');
            thisClass.setLogCmd('style water nothing', true);
         });
@@ -7714,16 +7714,16 @@ class ClickMenu {
 
         let thisClass = this;
     // mn 4
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrum", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrum", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'spectrum');
            thisClass.setLogCmd('color spectrum', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumChain", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumChain", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'spectrum for chains');
            thisClass.setLogCmd('color spectrum for chains', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumAcrossSets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumAcrossSets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
              thisClass.SetChainsAdvancedMenu();
              let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
              if($("#" + me.pre + "atomsCustomColorSpectrumAcross").length) {
@@ -7734,7 +7734,7 @@ class ClickMenu {
              $("#" + me.pre + "atomsCustomColorSpectrumAcross").resizable();
          });
 
-         me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumSets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn4_clrSpectrumSets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
              thisClass.SetChainsAdvancedMenu();
              let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
              if($("#" + me.pre + "atomsCustomColorSpectrum").length) {
@@ -7745,7 +7745,7 @@ class ClickMenu {
              $("#" + me.pre + "atomsCustomColorSpectrum").resizable();
          });
 
-         me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbowAcrossSets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbowAcrossSets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
              thisClass.SetChainsAdvancedMenu();
              let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
              if($("#" + me.pre + "atomsCustomColorRainbowAcross").length) {
@@ -7756,7 +7756,7 @@ class ClickMenu {
              $("#" + me.pre + "atomsCustomColorRainbowAcross").resizable();
          });
 
-         me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbowSets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbowSets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
              thisClass.SetChainsAdvancedMenu();
              let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
              if($("#" + me.pre + "atomsCustomColorRainbow").length) {
@@ -7767,64 +7767,64 @@ class ClickMenu {
              $("#" + me.pre + "atomsCustomColorRainbow").resizable();
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbow", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrRainbow", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'rainbow');
            thisClass.setLogCmd('color rainbow', true);
         });
-        me.myEventCls.onIds(["#" + me.pre + "mn4_clrRainbowChain", "#" + me.pre + "tool_clrRainbowChain"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn4_clrRainbowChain", "#" + me.pre + "tool_clrRainbowChain"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'rainbow for chains');
            thisClass.setLogCmd('color rainbow for chains', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn4_clrChain", "#" + me.pre + "tool_clrChain"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn4_clrChain", "#" + me.pre + "tool_clrChain"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'chain');
            thisClass.setLogCmd('color chain', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrStructure", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrStructure", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.setOptionCls.setOption('color', 'structure');
             thisClass.setLogCmd('color structure', true);
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrdomain", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrdomain", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'domain');
            thisClass.setLogCmd('color domain', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrsets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrsets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'defined sets');
            thisClass.setLogCmd('color defined sets', true);
         });
 
 
-        me.myEventCls.onIds(["#" + me.pre + "mn4_clrSSGreen", "#" + me.pre + "tool_clrSSGreen"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn4_clrSSGreen", "#" + me.pre + "tool_clrSSGreen"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.sheetcolor = 'green';
            ic.setOptionCls.setOption('color', 'secondary structure green');
            thisClass.setLogCmd('color secondary structure green', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSSYellow", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSSYellow", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.sheetcolor = 'yellow';
            ic.setOptionCls.setOption('color', 'secondary structure yellow');
            thisClass.setLogCmd('color secondary structure yellow', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSSSpectrum", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSSSpectrum", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'secondary structure spectrum');
            thisClass.setLogCmd('color secondary structure spectrum', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrResidue", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrResidue", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 2;
             ic.setOptionCls.setOption('color', 'residue');
             thisClass.setLogCmd('color residue', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrResidueCustom", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrResidueCustom", "click", function(e) { me.icn3d; e.preventDefault();
             //ic.legendClick = 2;
             me.htmlCls.dialogCls.openDlg('dl_rescolorfile', 'Please input the file on residue colors');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "reload_rescolorfile", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "reload_rescolorfile", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            if(!me.cfg.notebook) dialog.dialog( "close" );
            let file = $("#" + me.pre + "rescolorfile")[0].files[0];
@@ -7848,7 +7848,7 @@ class ClickMenu {
            }
         });
 
-        me.myEventCls.onIds("#" + me.pre + "reload_customcolorfile", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "reload_customcolorfile", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            if(!me.cfg.notebook) dialog.dialog( "close" );
            ic.startColor = $("#" + me.pre + "startColor").val();
@@ -7857,18 +7857,18 @@ class ClickMenu {
 
            let legendHtml = thisClass.setLegendHtml();
            //$("#" + me.pre + "legend").html(legendHtml).show();
-           $("#" + me.pre + "dl_legend").html(legendHtml);
+           $("#" + me.pre + "dl_legend_html").html(legendHtml);
            me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
 
            ic.addTrackCls.setCustomFile('color', ic.startColor, ic.midColor, ic.endColor);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_customref", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_customref", "click", function(e) { me.icn3d; e.preventDefault();
  
             me.htmlCls.dialogCls.openDlg('dl_customref', 'Set custom reference numbers');
          });
 
-        me.myEventCls.onIds("#" + me.pre + "reload_customreffile", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "reload_customreffile", "click", function(e) { let ic = me.icn3d; e.preventDefault();
  
             if(!me.cfg.notebook) dialog.dialog( "close" );
             
@@ -7891,98 +7891,98 @@ class ClickMenu {
             }
         }); 
 
-        me.myEventCls.onIds("#" + me.pre + "remove_legend", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "remove_legend", "click", function(e) { me.icn3d; e.preventDefault();
 
            $("#" + me.pre + "legend").hide();
 
            thisClass.setLogCmd('remove legend', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "reload_customtubefile", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "reload_customtubefile", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            if(!me.cfg.notebook) dialog.dialog( "close" );
            ic.addTrackCls.setCustomFile('tube');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrCharge", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrCharge", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 3;
             ic.setOptionCls.setOption('color', 'charge');
             thisClass.setLogCmd('color charge', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrHydrophobic", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrHydrophobic", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 4; 
             ic.setOptionCls.setOption('color', 'hydrophobic');
             thisClass.setLogCmd('color hydrophobic', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrNormalizedHP", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrNormalizedHP", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 4;
             ic.setOptionCls.setOption('color', 'normalized hydrophobic');
             thisClass.setLogCmd('color normalized hydrophobic', true);
         });
 
 
-        me.myEventCls.onIds(["#" + me.pre + "mn4_clrAtom", "#" + me.pre + "tool_clrAtom"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn4_clrAtom", "#" + me.pre + "tool_clrAtom"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 1;
             ic.setOptionCls.setOption('color', 'atom');
             thisClass.setLogCmd('color atom', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrBfactor", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrBfactor", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 5;
             ic.setOptionCls.setOption('color', 'b factor');
             thisClass.setLogCmd('color b factor', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrConfidence", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrConfidence", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 6;
             ic.setOptionCls.setOption('color', 'confidence');
             thisClass.setLogCmd('color confidence', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrIgstrand", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrIgstrand", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 6;
             ic.setOptionCls.setOption('color', 'ig strand');
             thisClass.setLogCmd('color ig strand', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrIgproto", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrIgproto", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             //ic.legendClick = 6;
             ic.setOptionCls.setOption('color', 'ig protodomain');
             thisClass.setLogCmd('color ig protodomain', true);
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrArea", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrArea", "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_colorbyarea', "Color based on residue's solvent accessibility");
         });
-        me.myEventCls.onIds("#" + me.pre + "applycolorbyarea", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applycolorbyarea", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.midpercent = $("#" + me.pre + 'midpercent').val();
             ic.setOptionCls.setOption('color', 'area');
             thisClass.setLogCmd('color area | ' + ic.midpercent, true);
 
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrBfactorNorm", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrBfactorNorm", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'b factor percentile');
            thisClass.setLogCmd('color b factor percentile', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrIdentity", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrIdentity", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'identity');
            thisClass.setLogCmd('color identity', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrConserved", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrConserved", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('color', 'conservation');
            thisClass.setLogCmd('color conservation', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrCustom", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrCustom", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_clr', 'Color picker');
         });
 
-        $(document).on("click", ".icn3d-color-rad-text", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", ".icn3d-color-rad-text", function(e) { let ic = me.icn3d; e.preventDefault();
           e.stopImmediatePropagation();
           e.preventDefault();
           let color = $(this).attr('color');
@@ -7990,22 +7990,22 @@ class ClickMenu {
           thisClass.setLogCmd("color " + color, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrSave", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrSave", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.saveColor();
            thisClass.setLogCmd('save color', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn4_clrApplySave", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn4_clrApplySave", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.applySavedColor();
            thisClass.setLogCmd('apply saved color', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_styleSave", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_styleSave", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.saveStyle();
            thisClass.setLogCmd('save style', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_styleApplySave", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_styleApplySave", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.applySavedStyle();
            thisClass.setLogCmd('apply saved style', true);
         });
@@ -8017,7 +8017,7 @@ class ClickMenu {
 
         let thisClass = this;
     // mn 5
-        me.myEventCls.onIds("#" + me.pre + "mn5_neighborsYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_neighborsYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = true;
            ic.applyMapCls.removeLastSurface();
            ic.applyMapCls.applySurfaceOptions();
@@ -8025,7 +8025,7 @@ class ClickMenu {
            thisClass.setLogCmd('set surface neighbors on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_neighborsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_neighborsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = false;
            ic.applyMapCls.removeLastSurface();
            ic.applyMapCls.applySurfaceOptions();
@@ -8033,48 +8033,48 @@ class ClickMenu {
            thisClass.setLogCmd('set surface neighbors off', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn5_surfaceVDW", "#" + me.pre + "tool_surfaceVDW"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn5_surfaceVDW", "#" + me.pre + "tool_surfaceVDW"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = false;
            ic.setOptionCls.setOption('surface', 'Van der Waals surface');
            thisClass.setLogCmd('set surface Van der Waals surface', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceSAS", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceSAS", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = false;
            ic.setOptionCls.setOption('surface', 'solvent accessible surface');
            thisClass.setLogCmd('set surface solvent accessible surface', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceMolecular", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceMolecular", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = false;
            ic.setOptionCls.setOption('surface', 'molecular surface');
            thisClass.setLogCmd('set surface molecular surface', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceVDWContext", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceVDWContext", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = true;
            ic.setOptionCls.setOption('surface', 'Van der Waals surface with context');
            thisClass.setLogCmd('set surface Van der Waals surface with context', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceSASContext", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceSASContext", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = true;
            ic.setOptionCls.setOption('surface', 'solvent accessible surface with context');
            thisClass.setLogCmd('set surface solvent accessible surface with context', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceMolecularContext", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceMolecularContext", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bConsiderNeighbors = true;
            ic.setOptionCls.setOption('surface', 'molecular surface with context');
            thisClass.setLogCmd('set surface molecular surface with context', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_surfaceNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('surface', 'nothing');
            thisClass.setLogCmd('set surface nothing', true);
         });
 
-        $(document).on("click", "." + me.pre + "mn5_opacity", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", "." + me.pre + "mn5_opacity", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.transparentRenderOrder = false;
 
             let value = $(this).attr('v');
@@ -8082,7 +8082,7 @@ class ClickMenu {
            thisClass.setLogCmd('set surface opacity ' + value, true);
         });
 
-        $(document).on("click", "." + me.pre + "mn5_opacityslow", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", "." + me.pre + "mn5_opacityslow", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.transparentRenderOrder = true;
 
             let value = $(this).attr('v');
@@ -8090,42 +8090,42 @@ class ClickMenu {
             thisClass.setLogCmd('set surface2 opacity ' + value, true);
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_wireframeYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_wireframeYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('wireframe', 'yes');
            thisClass.setLogCmd('set surface wireframe on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_wireframeNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_wireframeNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('wireframe', 'no');
            thisClass.setLogCmd('set surface wireframe off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_elecmap2fofc", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_elecmap2fofc", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_elecmap2fofc', '2Fo-Fc Electron Density Map');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_elecmapfofc", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_elecmapfofc", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_elecmapfofc', 'Fo-Fc Electron Density Map');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn5_elecmapNo", "#" + me.pre + "elecmapNo2", "#" + me.pre + "elecmapNo3", "#" + me.pre + "elecmapNo4", "#" + me.pre + "elecmapNo5"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn5_elecmapNo", "#" + me.pre + "elecmapNo2", "#" + me.pre + "elecmapNo3", "#" + me.pre + "elecmapNo4", "#" + me.pre + "elecmapNo5"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('map', 'nothing');
            thisClass.setLogCmd('setoption map nothing', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "delphimapNo", "#" + me.pre + "phimapNo", "#" + me.pre + "phiurlmapNo", "#" + me.pre + "mn1_phimapNo"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "delphimapNo", "#" + me.pre + "phimapNo", "#" + me.pre + "phiurlmapNo", "#" + me.pre + "mn1_phimapNo"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('phimap', 'nothing');
            thisClass.setLogCmd('setoption phimap nothing', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "delphimapNo2", "#" + me.pre + "phimapNo2", "#" + me.pre + "phiurlmapNo2"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "delphimapNo2", "#" + me.pre + "phimapNo2", "#" + me.pre + "phiurlmapNo2"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //ic.setOptionCls.setOption('surface', 'nothing');
            //thisClass.setLogCmd('set surface nothing', true);
            ic.setOptionCls.setOption('phisurface', 'nothing');
            thisClass.setLogCmd('setoption phisurface nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "applymap2fofc", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applymap2fofc", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            //if(!me.cfg.notebook) dialog.dialog( "close" );
            let sigma2fofc = parseFloat($("#" + me.pre + "sigma2fofc" ).val());
@@ -8135,7 +8135,7 @@ class ClickMenu {
            thisClass.setLogCmd('set map 2fofc sigma ' + sigma2fofc, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "applymapfofc", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applymapfofc", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            //if(!me.cfg.notebook) dialog.dialog( "close" );
            let sigmafofc = parseFloat($("#" + me.pre + "sigmafofc" ).val());
@@ -8145,27 +8145,27 @@ class ClickMenu {
            thisClass.setLogCmd('set map fofc sigma ' + sigmafofc, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_mapwireframeYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_mapwireframeYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //ic.dsn6ParserCls.dsn6Parser(ic.inputid);
            ic.setOptionCls.setOption('mapwireframe', 'yes');
            thisClass.setLogCmd('set map wireframe on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_mapwireframeNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_mapwireframeNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('mapwireframe', 'no');
            thisClass.setLogCmd('set map wireframe off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_emmap", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_emmap", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_emmap', 'EM Density Map');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn5_emmapNo", "#" + me.pre + "emmapNo2"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn5_emmapNo", "#" + me.pre + "emmapNo2"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('emmap', 'nothing');
            thisClass.setLogCmd('setoption emmap nothing', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "applyemmap", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applyemmap", "click", function(e) { let ic = me.icn3d; e.preventDefault();
 
            //if(!me.cfg.notebook) dialog.dialog( "close" );
            let empercentage = parseFloat($("#" + me.pre + "empercentage" ).val());
@@ -8176,13 +8176,13 @@ class ClickMenu {
            thisClass.setLogCmd('set emmap percentage ' + empercentage, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_emmapwireframeYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_emmapwireframeYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //ic.dsn6ParserCls.dsn6Parser(ic.inputid);
            ic.setOptionCls.setOption('emmapwireframe', 'yes');
            thisClass.setLogCmd('set emmap wireframe on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_emmapwireframeNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_emmapwireframeNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('emmapwireframe', 'no');
            thisClass.setLogCmd('set emmap wireframe off', true);
         });
@@ -8194,37 +8194,53 @@ class ClickMenu {
 
         let thisClass = this;
     // mn 6
-        me.myEventCls.onIds("#" + me.pre + "mn6_assemblyYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_assemblyYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAssembly = true;
            thisClass.setLogCmd('set assembly on', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_assemblyNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_assemblyNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAssembly = false;
            thisClass.setLogCmd('set assembly off', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_igrefYes", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_igrefYes", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
             thisClass.setLogCmd('ig refnum on', true);
             await ic.refnumCls.showIgRefNum();
+
+            if(ic.bShowRefnum) {
+               ic.opts.color = 'ig strand';
+               ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
+   
+               ic.selectionCls.selectAll_base();
+               ic.hlUpdateCls.updateHlAll();
+               ic.drawCls.draw();
+            }
          });
 
-         me.myEventCls.onIds("#" + me.pre + "mn6_igrefNo", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn6_igrefNo", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
             thisClass.setLogCmd('ig refnum off', true);
             await ic.refnumCls.hideIgRefNum();
+
+            ic.opts.color = 'chain';
+            ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
+
+            ic.selectionCls.selectAll_base();
+            ic.hlUpdateCls.updateHlAll();
+            ic.drawCls.draw();
          });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelAtoms", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelAtoms", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.residueLabelsCls.addAtomLabels(ic.hAtoms);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add atom labels', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelElements", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelElements", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.residueLabelsCls.addAtomLabels(ic.hAtoms, true);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add element labels', true);
@@ -8232,35 +8248,35 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelResidues", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelResidues", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.residueLabelsCls.addResidueLabels(ic.hAtoms);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add residue labels', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelResnum", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelResnum", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.residueLabelsCls.addResidueLabels(ic.hAtoms, undefined, undefined, true);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add residue number labels', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelChains", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelChains", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.analysisCls.addChainLabels(ic.hAtoms);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add chain labels', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelTermini", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelTermini", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.analysisCls.addTerminiLabels(ic.hAtoms);
            ic.selectionCls.saveSelectionIfSelected();
            thisClass.setLogCmd('add terminal labels', true);
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_addlabel', 'Add custom labels by selection');
            ic.pk = 1;
            ic.opts['pk'] = 'atom';
@@ -8268,19 +8284,19 @@ class ClickMenu {
            ic.pAtomNum = 0;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelSelection", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_addlabelSelection", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_addlabelselection', 'Add custom labels by the selected');
         });
 
-         me.myEventCls.onIds("#" + me.pre + "mn6_labelColor", "click", function(e) { me.icn3d; //e.preventDefault();
+         me.myEventCls.onIds("#" + me.pre + "mn6_labelColor", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_labelColor', 'Change color for all labels');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn2_saveselection","#" + me.pre + "tool_saveselection"], "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn2_saveselection","#" + me.pre + "tool_saveselection"], "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_saveselection', 'Save the selected');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_addlabelNo", "#" + me.pre + "removeLabels"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_addlabelNo", "#" + me.pre + "removeLabels"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.labelcolor = undefined;
             ic.pickpair = false;
            //ic.labels['residue'] = [];
@@ -8295,14 +8311,14 @@ class ClickMenu {
            ic.drawCls.draw();
         });
 
-        $(document).on("click", "." + me.pre + "mn6_labelscale", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", "." + me.pre + "mn6_labelscale", function(e) { let ic = me.icn3d; e.preventDefault();
            let value = $(this).attr('v');
            ic.labelScale = value;
            ic.drawCls.draw();
            thisClass.setLogCmd('set label scale ' + value, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_distanceYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_distanceYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_distance', 'Measure the distance of atoms');
            ic.pk = 1;
            ic.opts['pk'] = 'atom';
@@ -8312,7 +8328,7 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_distTwoSets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_distTwoSets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_disttwosets', 'Measure the distance between two sets');
 
             thisClass.setSetsMenus('atomsCustomDist');
@@ -8320,7 +8336,7 @@ class ClickMenu {
            ic.bMeasureDistance = true;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_distManySets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_distManySets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_distmanysets', 'Measure the pairwise distance among many sets');
 
             thisClass.setSetsMenus('atomsCustomDistTable');
@@ -8328,7 +8344,7 @@ class ClickMenu {
            ic.bMeasureDistance = true;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_distanceNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_distanceNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pickpair = false;
            let select = "set lines off";
            thisClass.setLogCmd(select, true);
@@ -8339,7 +8355,7 @@ class ClickMenu {
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_cartoonshape", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_cartoonshape", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_cartoonshape', 'Draw cartoon for a set');
 
             let bOneset = true;
@@ -8348,7 +8364,7 @@ class ClickMenu {
            ic.bCartoonshape = true;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn5_linebtwsets", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn5_linebtwsets", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_linebtwsets', 'Draw a line between two sets');
 
             thisClass.setSetsMenus('linebtwsets');
@@ -8357,21 +8373,21 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds(["#" + me.pre + "mn2_selectedcenter", "#" + me.pre + "zoomin_selection", "#" + me.pre + "tool_selectedcenter"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn2_selectedcenter", "#" + me.pre + "zoomin_selection", "#" + me.pre + "tool_selectedcenter"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //thisClass.setLogCmd('zoom selection', true);
            ic.transformCls.zoominSelection();
            ic.drawCls.draw();
            thisClass.setLogCmd('zoom selection', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_center", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_center", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //thisClass.setLogCmd('center selection', true);
            ic.applyCenterCls.centerSelection();
            ic.drawCls.draw();
            thisClass.setLogCmd('center selection', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_resetOrientation", "#" + me.pre + "resetOrientation", "#" + me.pre + "tool_resetOrientation"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_resetOrientation", "#" + me.pre + "resetOrientation", "#" + me.pre + "tool_resetOrientation"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //thisClass.setLogCmd('reset orientation', true);
            ic.transformCls.resetOrientation();
            //ic.setColorCls.applyOriginalColor();
@@ -8379,17 +8395,17 @@ class ClickMenu {
            thisClass.setLogCmd('reset orientation', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_chemicalbindingshow", "#" + me.pre + "chemicalbindingshow"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_chemicalbindingshow", "#" + me.pre + "chemicalbindingshow"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('chemicalbinding', 'show');
            thisClass.setLogCmd('set chemicalbinding show', true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_chemicalbindinghide", "#" + me.pre + "chemicalbindinghide"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_chemicalbindinghide", "#" + me.pre + "chemicalbindinghide"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('chemicalbinding', 'hide');
            thisClass.setLogCmd('set chemicalbinding hide', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_sidebyside", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_sidebyside", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            if(ic.bInputfile) {
                 alert("Side-by-Side does NOT work when the input is from a local file.");
                 return;
@@ -8408,7 +8424,7 @@ class ClickMenu {
         });
 
 
-        $(document).on("click", "." + me.pre + "mn6_rotate", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", "." + me.pre + "mn6_rotate", function(e) { let ic = me.icn3d; e.preventDefault();
            let value = $(this).attr('v').toLowerCase();
            let direction = value.split(' ')[1];
 
@@ -8420,7 +8436,7 @@ class ClickMenu {
            ic.resizeCanvasCls.rotStruc(direction);
         });
 
-        $(document).on("click", "." + me.pre + "mn6_rotate90", function(e) { let ic = me.icn3d; //e.preventDefault();
+        $(document).on("click", "." + me.pre + "mn6_rotate90", function(e) { let ic = me.icn3d; e.preventDefault();
           let value = $(this).attr('v').toLowerCase();
           let direction = value.split('-')[0];
 
@@ -8439,21 +8455,21 @@ class ClickMenu {
           ic.transformCls.setRotation(axis, angle);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_cameraPers", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_cameraPers", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('camera', 'perspective');
            thisClass.setLogCmd('set camera perspective', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_cameraOrth", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_cameraOrth", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('camera', 'orthographic');
            thisClass.setLogCmd('set camera orthographic', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdBlack", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdBlack", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setStyleCls.setBackground('black');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "tool_bkgd", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "tool_bkgd", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             if(ic.opts['background'] == 'black') {
                 ic.setStyleCls.setBackground('white');
             }
@@ -8462,19 +8478,19 @@ class ClickMenu {
             }
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdGrey", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdGrey", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setStyleCls.setBackground('grey');
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_bkgdWhite", "#" + me.pre + "tool_bkgdWhite"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_bkgdWhite", "#" + me.pre + "tool_bkgdWhite"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setStyleCls.setBackground('white');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdTransparent", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_bkgdTransparent", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setStyleCls.setBackground('transparent');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showfogYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showfogYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //ic.setOptionCls.setOption('fog', 'yes');
            ic.opts['fog'] = 'yes';
            ic.fogCls.setFog(true);
@@ -8482,7 +8498,7 @@ class ClickMenu {
            thisClass.setLogCmd('set fog on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showfogNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showfogNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            //ic.setOptionCls.setOption('fog', 'no');
            ic.opts['fog'] = 'no';
            ic.fogCls.setFog(true);
@@ -8490,22 +8506,22 @@ class ClickMenu {
            thisClass.setLogCmd('set fog off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showslabYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showslabYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('slab', 'yes');
            thisClass.setLogCmd('set slab on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showslabNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showslabNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('slab', 'no');
            thisClass.setLogCmd('set slab off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.setOptionCls.setOption('axis', 'yes');
            thisClass.setLogCmd('set axis on', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisSel", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisSel", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pc1 = true;
 
            ic.axesCls.setPc1Axes();
@@ -8513,7 +8529,7 @@ class ClickMenu {
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_showaxisNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.pc1 = false;
            ic.axes = [];
 
@@ -8522,37 +8538,37 @@ class ClickMenu {
            thisClass.setLogCmd('set axis off', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_symmetry", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_symmetry", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAxisOnly = false;
            await ic.symdCls.retrieveSymmetry(Object.keys(ic.structures)[0]);
            //me.htmlCls.dialogCls.openDlg('dl_symmetry', 'Symmetry');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_symd", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_symd", "click", async function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAxisOnly = false;
            await ic.symdCls.retrieveSymd();
            ic.bSymd = true;
 
            thisClass.setLogCmd('symd symmetry', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn6_clear_sym", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_clear_sym", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.symdArray = [];
            ic.drawCls.draw();
            thisClass.setLogCmd('clear symd symmetry', true);
         });
-        me.myEventCls.onIds("#" + me.pre + "mn6_axes_only", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_axes_only", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAxisOnly = true;
            ic.drawCls.draw();
            thisClass.setLogCmd('show axis', true);
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_area", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_area", "click", function(e) { let ic = me.icn3d; e.preventDefault();
             ic.analysisCls.calculateArea();
             thisClass.setLogCmd('area', true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "applysymmetry", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "applysymmetry", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.bAxisOnly = false;
 
            let title = $("#" + me.pre + "selectSymmetry" ).val();
@@ -8562,14 +8578,14 @@ class ClickMenu {
            ic.drawCls.draw();
            thisClass.setLogCmd('symmetry ' + title, true);
         });
-        me.myEventCls.onIds("#" + me.pre + "clearsymmetry", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "clearsymmetry", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let title = 'none';
            ic.symmetrytitle = undefined;
            ic.drawCls.draw();
            thisClass.setLogCmd('symmetry ' + title, true);
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_hbondsYes", "#" + me.pre + "hbondsYes"], "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_hbondsYes", "#" + me.pre + "hbondsYes"], "click", function(e) { let ic = me.icn3d; e.preventDefault();
             thisClass.SetChainsAdvancedMenu();
 
             let definedAtomsHtml = ic.definedSetsCls.setAtomMenu(['protein']);
@@ -8586,17 +8602,17 @@ class ClickMenu {
            $("#" + me.pre + "atomsCustomHbond2").resizable();
         });
 
-        me.myEventCls.onIds(["#" + me.pre + "mn6_contactmap"], "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn6_contactmap"], "click", function(e) { me.icn3d; e.preventDefault();
             me.htmlCls.dialogCls.openDlg('dl_contact', 'Set contact map');
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_hbondsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_hbondsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.showInterCls.hideHbondsContacts();
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let select = "stabilizer";
            ic.threeDPrintCls.addStabilizer();
            ic.threeDPrintCls.prepareFor3Dprint();
@@ -8604,14 +8620,14 @@ class ClickMenu {
            thisClass.setLogCmd(select, true);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let select = "set stabilizer off";
            thisClass.setLogCmd(select, true);
            ic.threeDPrintCls.hideStabilizer();
            ic.drawCls.draw();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerOne", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerOne", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_stabilizer', 'Add One Stabilizer');
            ic.pk = 1;
            ic.opts['pk'] = 'atom';
@@ -8619,7 +8635,7 @@ class ClickMenu {
            ic.pAtomNum = 0;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerRmOne", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_stabilizerRmOne", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_stabilizer_rm', 'Remove One Stabilizer');
            ic.pk = 1;
            ic.opts['pk'] = 'atom';
@@ -8627,27 +8643,27 @@ class ClickMenu {
            ic.pAtomNum = 0;
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_thicknessSet", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn1_thicknessSet", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_thickness', 'Set Thickness for 3D Printing');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn3_setThickness", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn3_setThickness", "click", function(e) { me.icn3d; e.preventDefault();
            me.htmlCls.dialogCls.openDlg('dl_thickness2', 'Style Preferences');
         });
 
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let select = "disulfide bonds";
            thisClass.setLogCmd(select, true);
            ic.showInterCls.showSsbonds();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsExport", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsExport", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.viewInterPairsCls.exportSsbondPairs();
            thisClass.setLogCmd("export disulfide bond pairs", false);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_ssbondsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.opts["ssbonds"] = "no";
            let select = "set disulfide bonds off";
            thisClass.setLogCmd(select, true);
@@ -8655,7 +8671,7 @@ class ClickMenu {
            ic.setOptionCls.setStyle('sidec', 'nothing');
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsYes", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsYes", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            let select = "cross linkage";
            thisClass.setLogCmd(select, true);
            //ic.bShowCrossResidueBond = true;
@@ -8663,12 +8679,12 @@ class ClickMenu {
            ic.showInterCls.showClbonds();
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsExport", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsExport", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.viewInterPairsCls.exportClbondPairs();
            thisClass.setLogCmd("export cross linkage pairs", false);
         });
 
-        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsNo", "click", function(e) { let ic = me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds("#" + me.pre + "mn6_clbondsNo", "click", function(e) { let ic = me.icn3d; e.preventDefault();
            ic.opts["clbonds"] = "no";
            let select = "set cross linkage off";
            thisClass.setLogCmd(select, true);
@@ -8715,6 +8731,11 @@ class ClickMenu {
                 }
             });
         });
+
+        me.myEventCls.onIds("#" + me.pre + "jn_copy", "click", function(e) { me.icn3d; e.preventDefault();
+            let text = $("#" + me.pre + "jn_commands").val();
+            navigator.clipboard.writeText(text);
+        });
     } 
 
     //Show the input command in log. If "bSetCommand" is true, the command will be saved in the state file as well.
@@ -10269,8 +10290,8 @@ class SetMenu {
             //}
 
             //!!!
-            //html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
-            //html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
+            //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
+            //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
         }
         else {
             //if(!me.cfg.hidelicense) html += this.getRadio('mn4_clr', 'mn1_delphi2', 'DelPhi<br><span style="padding-left:1.5em;">Potential ' + me.htmlCls.licenseStr + '</span>');
@@ -10351,14 +10372,15 @@ class SetMenu {
 
             html += this.getLink('mn6_contactmap', 'Contact Map', undefined, 1);
 
-            if(!me.cfg.notebook) {
+            //if(!me.cfg.notebook) {
                 html += this.getLink('mn1_mutation', 'Mutation ' + me.htmlCls.wifiStr, 1, 1);
-            }
+            //}
 
             //html += this.getMenuSep();
         }
 
-        if(!me.cfg.notebook && !me.cfg.hidelicense) {
+        //if(!me.cfg.notebook && !me.cfg.hidelicense) {
+        if(!me.cfg.hidelicense) {
             html += this.getMenuText('mn1_delphiwrap', 'DelPhi Potential', undefined, 1, 1);
 
             html += "<ul>";       
@@ -11172,6 +11194,8 @@ class Dialog {
 
         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_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);
 
             height =(me.htmlCls.HEIGHT) * 0.5;
 
@@ -11216,7 +11240,11 @@ class Dialog {
             });
         }
         else {
-            if(ic.bRender) $( "#" + id ).show();
+            if(ic.bRender) {
+                $( "#" + id ).show();
+                $( "#" + id + "_nb").show();
+                $( "#" + id + "_title").html(title);
+            }
 
             height = 'auto';
             width = 'auto';
@@ -11266,6 +11294,18 @@ class SetDialog {
         return html;
     }
 
+    addNotebookTitle(id, title, bAddExtraDiv) { let me = this.icn3dui; me.icn3d;
+        //return '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#1c94c4; width:100%"><span style="color:white; font-weight:bold">' + title + '</span>&nbsp;&nbsp;&nbsp;<span onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose" title="Close">x</span></div>';
+
+        let html = '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#5C9CCC; width:100%"><span id="' + me.pre + id + '_title" style="color:white; font-weight:bold">' + title + '</span>&nbsp;&nbsp;&nbsp;<div onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose ui-icon ui-icon-close" title="Close"></div></div>';
+
+        if(bAddExtraDiv) {
+            html += '<div id="' + me.pre + id + '_html"></div>';
+        }
+
+        return html;
+    }
+
     //Set the html for all popup dialogs.
     setDialogs() { let me = this.icn3dui, ic = me.icn3d;
         if(me.bNode) return '';
@@ -11280,12 +11320,15 @@ class SetDialog {
 
         let divClass =(me.cfg.notebook) ? '' : 'icn3d-hidden';
         let dialogClass =(me.cfg.notebook) ? 'icn3d-hidden' : '';
-        html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog'>";
+        //html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:" + me.htmlCls.CMD_HEIGHT + "px'>";
+        html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:12px'>";
 
         html += me.htmlCls.divStr + "dl_2ddgm' class='" + dialogClass + " icn3d-dl_2ddgm' style='background-color:white'>";
+        html += this.addNotebookTitle('dl_2ddgm', '2D Diagram', true);
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_2dctn' class='" + dialogClass + " icn3d-dl_2dctn' style='background-color:white'>";
+        html += this.addNotebookTitle('dl_2dctn', '2D Cartoon');
 
         me.svgid_ct = me.pre + "icn3d_cartoon";
 
@@ -11313,14 +11356,17 @@ class SetDialog {
 
     //    if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign || ic.bSymd) {
           html += me.htmlCls.divStr + "dl_alignment' class='" + dialogClass + "' style='background-color:white;'>";
+          html += this.addNotebookTitle('dl_alignment', 'Dynamically Calculated Symmetry using SymD');
           html += me.htmlCls.divStr + "symd_info'></div>";
           html += me.htmlCls.divStr + "alignseqguide_wrapper'><br>" + me.htmlCls.setHtmlCls.setAlignSequenceGuide() + "</div>";
           html += me.htmlCls.divStr + "dl_sequence2' class='icn3d-dl_sequence'>";
+          html += this.addNotebookTitle('dl_sequence2', 'Select Residues in Aligned Sequences');
           html += "</div>";
           html += "</div>";
     //    }
 
         html += me.htmlCls.divStr + "dl_definedsets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_definedsets', 'Defined Sets');
         html += me.htmlCls.divStr + "dl_setsmenu'>";
         html += "<b>Defined Sets:</b> <br/>";
         html += "<select id='" + me.pre + "atomsCustom' multiple size='6' style='min-width:130px;'>";
@@ -11344,12 +11390,14 @@ class SetDialog {
         html += me.htmlCls.setHtmlCls.setAdvanced(2);
 
         html += me.htmlCls.divStr + "dl_vastplus' class='" + dialogClass + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_vastplus', 'Please input PDB ID for VAST+');
         html += "Note: <b>VAST+</b> finds other macromolecular structures that have a similar biological unit. To do this, VAST+ takes into consideration the complete set of 3D domains that VAST identified within a query structure, throughout all of its component protein molecules, and finds other macromolecular structures that have a similar set of proteins/3D domains.<br><br>"; 
         html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastpluspdbid' value='6VXX' size=8><br>";
         html += me.htmlCls.buttonStr + "reload_vastplus'>VAST+</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_vast' class='" + dialogClass + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_vast', 'Pleaes input chain or PDB file for VAST');
         html += 'Note: <b>VAST</b> identifies 3D domains (substructures) within each protein structure in the Molecular Modeling Database (MMDB), and then finds other protein structures that have one or more similar 3D domains, using purely geometric criteria. You have two ways to do a VAST search.<br><br>'; 
 
         html += '<b>Optione 1</b>, search with your selection (all residues are selected by default) in the loaded structures:<br>'; 
@@ -11378,6 +11426,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_foldseek' class='" + dialogClass + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_foldseek', 'Submit your selection to Foldseek');
         html += '1. <input type="submit" id="' + me.pre + 'fssubmit" name="fssubmit" value="Submit"></input> your selection (all residues are selected by default) in the loaded structures to <a href="https://search.foldseek.com/search" target="_blank">Foldseek</a> web server.<br><br>';
         html += '2 (Optional). Once you see the structure neighbors, you can view the alignment in iCn3D by inputing a list of PDB chain IDs or AlphaFold UniProt IDs below. <br><br>The PDB chain IDs are the same as the record names such as "1HHO_A". The UniProt ID is the text between "AF-" and "-F1". For example, the UniProt ID for the record name "AF-P69905-F1-model_v4" is "P69905".<br><br>'; 
 
@@ -11386,16 +11435,19 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmtfid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_mmtfid', 'Please input an MMTF ID');
         html += "MMTF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmtfid' value='1TUP' size=8> ";
         html += me.htmlCls.buttonStr + "reload_mmtf'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_pdbid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_pdbid', 'Please input a PDB ID');
         html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "pdbid' value='1TUP' size=8> ";
         html += me.htmlCls.buttonStr + "reload_pdb'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_afid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_afid', 'Please input an AlphaFold UniProt ID');
         html += "Note: AlphaFold produces a per-residue confidence score (pLDDT) between 0 and 100:<br>";
         html += me.htmlCls.clickMenuCls.setAlphaFoldLegend() + "<br>";
 
@@ -11408,27 +11460,32 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_refseqid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_refseqid', 'Please input an NCBI protein accession');
         html += "NCBI Protein Accession: " + me.htmlCls.inputTextStr + "id='" + me.pre + "refseqid' value='NP_001743.1' size=8> ";
         html += me.htmlCls.buttonStr + "reload_refseq'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_opmid', 'Please input an OPM PDB ID');
         html += "<a href='https://opm.phar.umich.edu' target='_blank'>Orientations of Proteins in Membranes(OPM)</a> PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "opmid' value='6JXR' size=8> ";
         html += me.htmlCls.buttonStr + "reload_opm'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_pdbfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_pdbfile', 'Please input a PDB file');
         html += "Note: Several PDB files could be concatenated into a single PDB file. Use the line \"ENDMDL\" to separate PDB files.<br><br>";
         html += "PDB File: " + me.htmlCls.inputFileStr + " id='" + me.pre + "pdbfile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_pdbfile'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_pdbfile_app' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_pdbfile_app', 'Please append PDB files');
         html += "Multiple PDB Files: <input type='file' multiple id='" + me.pre + "pdbfile_app' size=8> ";
         html += me.htmlCls.buttonStr + "reload_pdbfile_app'>Append</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_rescolorfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_rescolorfile', 'Please input a residue color file');
         html += '<div style="width:450px;">The custom JSON file on residue colors has the following format for proteins("ALA" and "ARG") and nucleotides("G" and "A"):<br>';
         html += '{"ALA":"#C8C8C8", "ARG":"#145AFF", ..., "G":"#008000", "A":"#6080FF", ...}</div><br>';
         html += "Residue Color File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "rescolorfile' size=8> ";
@@ -11436,6 +11493,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_customcolor' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_customcolor', 'Please input a custom color file');
         html += " <input type='hidden' id='" + me.pre + "customcolor_chainid' value=''>";
         html += '<div style="width:450px;">The custom file for the structure has two columns separated by space or tab: ';
         html += 'residue number, and score in the range of 0-100. If you click "Apply Custom Color" button, ';
@@ -11463,6 +11521,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_customref' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_customref', 'Please input a reference number file');
         html += '<div style="width:550px;">You can define your own reference numbers in a custom file using Excel, and then export it as a CSV file. An example file is shown below with cells separated by commas.<br>';
         html += '<pre>refnum,11,12,,21,22,,10C,11C,20C<br>';
         html += '1TUP_A,100,101,,,132,,,,<br>';
@@ -11476,17 +11535,20 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_align' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_align', 'Please select residues in aligned sequences');
         html += "Enter the PDB IDs or MMDB IDs of the structures: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid1' value='2DN3' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid2' value='4N7N' size=8><br/><br/>";
         html += "<b>VAST+ based on VAST</b>: " + me.htmlCls.buttonStr + "reload_align_ori'>All Matching Molecules Superposed</button>" + me.htmlCls.space3 + me.htmlCls.buttonStr + "reload_align_refined'>Invariant Substructure Superposed</button><br><br>";
         html += "<b>VAST+ based on TM-align</b>: " + me.htmlCls.buttonStr + "reload_align_tmalign'>All Matching Molecules Superposed</button><br><br>";
         html += "</div>";
         
         html += me.htmlCls.divStr + "dl_alignaf' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_alignaf', 'Align AlphaFold structures');
         html += "Enter two <a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> IDs: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid1' value='P41327' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid2' value='P41331' size=8><br/><br/>";
         html += me.htmlCls.buttonStr + "reload_alignaf_tmalign'>Align with TM-align</button>" + me.htmlCls.buttonStr + "reload_alignaf' style='margin-left:30px'>Align with VAST</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_chainalign' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_chainalign', 'Align chains');
         html += "<div style='width:550px'>";
         html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
         html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -11496,6 +11558,7 @@ class SetDialog {
         html += "</div></div>";
 
         html += me.htmlCls.divStr + "dl_chainalign2' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_chainalign2', 'Align chains');
         html += "<div style='width:550px'>";
         html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
         html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids2' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -11507,11 +11570,13 @@ class SetDialog {
         html += "</div></div>";
 
         html += me.htmlCls.divStr + "dl_chainalign3' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_chainalign3', 'Align chains');
         html += "<div style='width:550px'>";
         html += this.getHtmlAlignResidueByResidue('chainalignids3', 'predefinedres', 'reload_chainalign_asym3');
         html += "</div></div>";
 
         html += me.htmlCls.divStr + "dl_realignresbyres' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_realignresbyres', 'Realign residue by residue');
         html += "<div style='width:550px'>";
         html += "<b>Option 1</b>: " + me.htmlCls.buttonStr + "realignSelection'><b>Realign Current Selection Residue by Residue</b></button><br/><br/>";
         html += "<b>Option 2</b>: <br>";
@@ -11519,6 +11584,7 @@ class SetDialog {
         html += "</div></div>";
 
         html += me.htmlCls.divStr + "dl_mutation' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_mutation', 'Mutation analysis');
         html += "<div style='width:500px'>";
         html += 'Please specify the mutations with a comma separated mutation list. Each mutation can be specified as "[<b>uppercase</b> PDB ID or AlphaFold UniProt ID]_[Chain Name]_[Residue Number]_[One Letter Mutant Residue]". E.g., the mutation of N501Y in the E chain of PDB 6M0J can be specified as "6M0J_E_501_Y". For AlphaFold structures, the "Chain ID" is "A".<br/>If you load a custom structure without PDB or UniProt ID, you can open "Seq. & Annotations" window and find the chain ID such as "stru_A". The part before the underscore is the structure ID, which can be used to specify the mutation such as "stru_A_...". Remember to choose "Show Mutation in: Current Page".<br/><br/>';
         html += "<div style='display:inline-block; width:110px'>Mutations: </div>" + me.htmlCls.inputTextStr + "id='" + me.pre + "mutationids' value='6M0J_E_484_K,6M0J_E_501_Y,6M0J_E_417_N' size=50><br/><br/>";
@@ -11537,25 +11603,30 @@ class SetDialog {
         html += "<br/><br/></div></div>";
 
         html += me.htmlCls.divStr + "dl_mol2file' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_mol2file', 'Please input a Mol2 file');
         html += "Mol2 File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mol2file' size=8> ";
         html += me.htmlCls.buttonStr + "reload_mol2file'>Load</button>";
         html += "</div>";
         html += me.htmlCls.divStr + "dl_sdffile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_sdffile', 'Please input an SDF file');
         html += "SDF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "sdffile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_sdffile'>Load</button>";
         html += "</div>";
         html += me.htmlCls.divStr + "dl_xyzfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_xyzfile', 'Please input an XYZ file');
         html += "XYZ File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xyzfile' size=8> ";
         html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_afmapfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_afmapfile', 'Please input an AlphaFold PAE file');
         html += "AlphaFold PAE File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> <br><br>";
         html += me.htmlCls.buttonStr + "reload_afmapfile'>Load Half PAE Map</button>" 
           + me.htmlCls.buttonStr + "reload_afmapfilefull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_urlfile', 'Please input a file via URL');
         html += "File type: ";
         html += "<select id='" + me.pre + "filetype'>";
         html += me.htmlCls.optionStr + "'pdb' selected>PDB</option>";
@@ -11571,16 +11642,19 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmciffile' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_mmciffile', 'Please input an mmCIF file');
         html += "mmCIF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mmciffile' value='1TUP' size=8> ";
         html += me.htmlCls.buttonStr + "reload_mmciffile'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmcifid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_mmcifid', 'Please input an mmCIF ID');
         html += "mmCIF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmcifid' value='1TUP' size=8> ";
         html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_mmdbid', 'Please input an MMDB ID');
         html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> <br><br>";
         html += me.htmlCls.buttonStr + "reload_mmdb_asym'>Load Asymmetric Unit (All Chains)</button>" + me.htmlCls.buttonStr + "reload_mmdb' style='margin-left:30px'>Load Biological Unit</button><br/><br/><br>";
         html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
@@ -11593,6 +11667,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
+        html += this.addNotebookTitle('dl_mmdbafid', 'Please input a list of PDB/AlphaFold IDs');
         html += "List of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
         html += "<div style='display:inline-block; width:20px'></div>" + me.htmlCls.buttonStr + "reload_mmdbaf' style='width:150px'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px; width:250px'>Load Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
         html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
@@ -11607,6 +11682,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_blast_rep_id' style='max-width:600px;' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_blast_rep_id', 'Align sequence to structure');
         html += "Enter a Sequence ID (or FASTA sequence) and the aligned protein accession, which can be found using the <a href='https://blast.ncbi.nlm.nih.gov/Blast.cgi?PROGRAM=blastp&PAGE_TYPE=BlastSearch' target='_blank'>BLAST</a> search with the Sequence ID or FASTA sequence as input. If the protein accession is not a PDB chain, the corresponding AlphaFold UniProt structure is used.<br><br> ";
         html += "<b>Sequence ID</b>(NCBI protein accession of a sequence): " + me.htmlCls.inputTextStr + "id='" + me.pre + "query_id' value='NP_001108451.1' size=8><br> ";
         html += "or FASTA sequence: <br><textarea id='" + me.pre + "query_fasta' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
@@ -11618,32 +11694,38 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_yournote' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_yournote', 'Your Note');
         html += "Your note will be saved in the HTML file when you click \"File > Save File > iCn3D PNG Image\".<br><br>";
         html += "<textarea id='" + me.pre + "yournote' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;' placeholder='Enter your note here'></textarea><br>";
         html += me.htmlCls.buttonStr + "applyyournote'>Save</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_gi' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_gi', 'Please input an NCBI gi');
         html += "Protein gi: " + me.htmlCls.inputTextStr + "id='" + me.pre + "gi' value='1310960' size=8> ";
         html += me.htmlCls.buttonStr + "reload_gi'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_cid' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_cid', 'Please input a PubChem CID');
         html += "PubChem CID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
         html += me.htmlCls.buttonStr + "reload_cid'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_pngimage' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_pngimage', 'Please input an iCn3D PNG Image file');
         html += "iCn3D PNG image: " + me.htmlCls.inputFileStr + "id='" + me.pre + "pngimage'><br/>";
         html += me.htmlCls.buttonStr + "reload_pngimage' style='margin-top: 6px;'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_state' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_state', 'Please input a state file');
         html += "State file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "state'><br/>";
         html += me.htmlCls.buttonStr + "reload_state' style='margin-top: 6px;'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_fixedversion' style='max-width:500px' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_fixedversion', 'Use fixed version of iCn3D');
         html += "Since January 6, 2021, you can show the original view with the archived version of iCn3D by pasting your URL below and click \"Show Originial View\". Note the version in the parameter \"v\" was used to replace \"full.html\" with \"full_[v].html\" in the URL.<br><br>";
         html += "Share Link URL: " + me.htmlCls.inputTextStr + "id='" + me.pre + "sharelinkurl' size=60><br>";
         html += me.htmlCls.buttonStr + "reload_fixedversion'>Show Original View</button><br><br>";
@@ -11651,16 +11733,19 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_selection' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_selection', 'Load a selection file');
         html += "Selection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "selectionfile'><br/>";
         html += me.htmlCls.buttonStr + "reload_selectionfile' style='margin-top: 6px;'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_menuloadpref' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_menuloadpref', 'Load a preference file');
         html += "Preference file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "menupreffile'><br/>";
         html += me.htmlCls.buttonStr + "reload_menupreffile' style='margin-top: 6px;'>Load</button>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_dsn6' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_dsn6', 'Load a DSN6 file');
         html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
 
         html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigma2fofc'>";
@@ -11683,6 +11768,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_dsn6url' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_dsn6url', 'Load a selection file via a URL');
         html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
 
         html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigmaurl2fofc'>";
@@ -11704,6 +11790,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_clr' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_clr', 'Pick a color');
         html += "Click in the input box to use the color picker:<br><br> ";
         html += "Custom Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "colorcustom' value='FF0000' size=8> ";
         html += me.htmlCls.buttonStr + "applycustomcolor'>Apply</button>";
@@ -11715,6 +11802,7 @@ class SetDialog {
         html += me.htmlCls.setHtmlCls.getPotentialHtml('url', dialogClass);
 
         html += me.htmlCls.divStr + "dl_symmetry' class='" + dialogClass + "'><br>";
+        html += this.addNotebookTitle('dl_symmetry', 'Symmetry');
         html += me.htmlCls.divNowrapStr + "Symmetry: <select id='" + me.pre + "selectSymmetry'>";
         html += "</select>" + me.htmlCls.space3;
         html += me.htmlCls.buttonStr + "applysymmetry'>Apply</button>" + me.htmlCls.space3;
@@ -11722,10 +11810,12 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_symd' style='max-width:400px' class='" + dialogClass + "'><br>";
+        html += this.addNotebookTitle('dl_symd', 'Dynamically symmetry calculation using SymD');
 
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_contact' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_contact', 'Contact Map');
         html += "<span style='white-space:nowrap;font-weight:bold;'>Distance: <select id='" + me.pre + "contactdist'>";
         html += me.htmlCls.setHtmlCls.getOptionHtml(['4', '5', '6', '7', '8', '9', '10'], 4);
         html += "</select></span>";
@@ -11738,6 +11828,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_hbonds' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_hbonds', 'Interaction Analysis');
         html += "1. Choose interaction types and their thresholds:<br>";
         html += "<div class='icn3d-box'><table border=0 width=450><tr>";
         html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_hbond' checked>Hydrogen Bonds <span style='background-color:#" + me.htmlCls.hbondColor + "'>" + me.htmlCls.space3 + "</span></td>";
@@ -11836,6 +11927,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_realign' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_realign', 'Realign by sequence');
 
         html += me.htmlCls.divNowrapStr + "1. Select sets below <br>or use your current selection:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealign' multiple size='5' style='min-width:130px;'>";
@@ -11845,6 +11937,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_realignbystruct' class='" + dialogClass + "' style='max-width:500px'>";
+        html += this.addNotebookTitle('dl_realignbystruct', 'Realign by structure');
 
         //html += "<div><b>1</b>. There are two options to align chains. Option \"a\" is to select a list of chains below, and align all chains to the first chain. Option \"b\" is to select sets below or use your current selection, and align all chains pairwise.</div><br>";
         html += "<div><b>1</b>. Select sets below or use your current selection.</div><br>";
@@ -11860,6 +11953,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_realigntwostru' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_realigntwostru', 'Realign two structure complexes');
 
         html += me.htmlCls.divNowrapStr + "1. Select sets below or use your current selection:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealignByStruct2' multiple size='5' style='min-width:130px;'>";
@@ -11872,6 +11966,7 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_colorspectrumacrosssets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_colorspectrumacrosssets', 'Set color spectrum across sets');
 
         html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrumAcross' multiple size='5' style='min-width:130px;'>";
@@ -11882,7 +11977,7 @@ class SetDialog {
 
         
         html += me.htmlCls.divStr + "dl_colorspectrumbysets' class='" + dialogClass + "'>";
-
+        html += this.addNotebookTitle('dl_colorspectrumbysets', 'Set color spectrum for residues in sets');
         html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrum' multiple size='5' style='min-width:130px;'>";
         html += "</select></div>";
@@ -11892,7 +11987,7 @@ class SetDialog {
 
         
         html += me.htmlCls.divStr + "dl_colorrainbowacrosssets' class='" + dialogClass + "'>";
-
+        html += this.addNotebookTitle('dl_colorrainbowacrosssets', 'Set color rainbow across sets');
         html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbowAcross' multiple size='5' style='min-width:130px;'>";
         html += "</select></div>";
@@ -11902,7 +11997,7 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_colorrainbowbysets' class='" + dialogClass + "'>";
-
+        html += this.addNotebookTitle('dl_colorrainbowbysets', 'Set color rainbow for residues in sets');
         html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbow' multiple size='5' style='min-width:130px;'>";
         html += "</select></div>";
@@ -11912,12 +12007,15 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_allinteraction' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_allinteraction', 'All interactions', true);
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_interactionsorted' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_interactionsorted', 'Sorted interactions', true);
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_linegraph' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_linegraph', '2D Interaction Network');
 
         html += me.htmlCls.divNowrapStr + '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
           + me.pre + 'dl_linegraphcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
@@ -11948,6 +12046,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_scatterplot' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_scatterplot', '2D Interaction Map');
 
         html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3;
 
@@ -11974,6 +12073,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_contactmap' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_contactmap', 'Contact Map');
 
         html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
 
@@ -11992,6 +12092,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_alignerrormap' style='background-color:white' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_alignerrormap', 'PAE Map');
 
         html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
       
@@ -12019,6 +12120,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_elecmap2fofc' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_elecmap2fofc', 'Electron Density 2F0-Fc Map');
         html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigma2fofc'>";
 
         html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 3);
@@ -12027,6 +12129,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_elecmapfofc' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_elecmapfofc', 'Electron Density F0-Fc Map');
         html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigmafofc'>";
 
         html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 5);
@@ -12035,6 +12138,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_emmap' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_emmap', 'EM Density Map');
         html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "empercentage'>";
 
         html += me.htmlCls.setHtmlCls.getOptionHtml(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'], 3);
@@ -12043,6 +12147,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_aroundsphere' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_aroundsphere', 'Select a sphere around a set of residues');
         html += me.htmlCls.divNowrapStr + "1. Select the first set:</div>";
         html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomSphere2' multiple size='3' style='min-width:130px;'>";
         html += "</select></div><br>";
@@ -12057,6 +12162,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_adjustmem' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_adjustmem', 'Adjust membranes');
         html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
         html += me.htmlCls.divNowrapStr + "1. Extracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "extra_mem_z' value='' size='3'> &#197;</div><br/>";
         html += me.htmlCls.divNowrapStr + "2. intracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "intra_mem_z' value='' size='3'> &#197;</div><br/>";
@@ -12064,6 +12170,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_selectplane' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_selectplane', 'Select a plane');
         html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
         html += me.htmlCls.divNowrapStr + "1. Z-axis position of the first X-Y plane: " + me.htmlCls.inputTextStr + "id='" + me.pre + "selectplane_z1' value='15' size='3'> &#197;</div><br/>";
         html += me.htmlCls.divNowrapStr + "2. Z-axis position of the second X-Y plane: " + me.htmlCls.inputTextStr + "id='" + me.pre + "selectplane_z2' value='-15' size='3'> &#197;</div><br/>";
@@ -12071,6 +12178,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_addlabel' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_addlabel', 'Add labels between two atoms');
         html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext' value='Text' size=4><br/>";
         html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize' value='18' size=4 maxlength=2><br/>";
         html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor' value='" + defaultColor + "' size=4><br/>";
@@ -12085,6 +12193,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_addlabelselection' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_addlabelselection', 'Add labels for your selection');
         html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext2' value='Text' size=4><br/>";
         html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize2' value='18' size=4 maxlength=2><br/>";
         html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor2' value='" + defaultColor + "' size=4><br/>";
@@ -12093,11 +12202,13 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_labelColor' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_labelColor', 'Change label color');
         html += "Color for all labels: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolorall' value='" + defaultColor + "' size=4><br/><br/>";
         html += me.htmlCls.spanNowrapStr + me.htmlCls.buttonStr + "applylabelcolor'>Display</button></span>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_distance' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_distance', 'Measure distance');
         if(me.utilsCls.isMobile()) {
             html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
         }
@@ -12109,6 +12220,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_stabilizer' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_stabilizer', 'Add a stabilizer');
         if(me.utilsCls.isMobile()) {
             html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
         }
@@ -12120,6 +12232,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_disttwosets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_disttwosets', 'Measure the distance between two sets');
         html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
         html += "<table border=0 width=400 cellspacing=10><tr><td>";
 
@@ -12141,6 +12254,7 @@ class SetDialog {
 
         
         html += me.htmlCls.divStr + "dl_linebtwsets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_linebtwsets', 'Add a line between  two sets');
         html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
         html += "<table border=0 width=400 cellspacing=10><tr><td>";
 
@@ -12174,6 +12288,7 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_cartoonshape' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_cartoonshape', 'Cartoon Shape');
         html += me.htmlCls.spanNowrapStr + "1. Select a set:</span><br/>";
         html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "cartoonshape' multiple size='5' style='min-width:130px;'>";
         html += "</select></div><br>";
@@ -12196,6 +12311,7 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_distmanysets' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_distmanysets', 'Measure distances among many sets');
         html += me.htmlCls.spanNowrapStr + "1. Select sets for pairwise distances</span><br/>";
         html += "<table border=0 width=400 cellspacing=10><tr><td>";
 
@@ -12215,6 +12331,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_stabilizer_rm' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_stabilizer_rm', 'Remove a stabilizer');
         if(me.utilsCls.isMobile()) {
             html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
         }
@@ -12225,14 +12342,17 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_thickness' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_thickness', 'Set thickness');
         html += me.htmlCls.setHtmlCls.setThicknessHtml('3dprint');
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_thickness2' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_thickness2', 'Set thickness');
         html += me.htmlCls.setHtmlCls.setThicknessHtml('style');
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_menupref' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_menupref', 'Preferences for menus');
         html += "<b>Note</b>: The following parameters will be saved in cache. You just need to set them once. <br><br>";
 
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_menupref'>Apply</button></span>";
@@ -12248,6 +12368,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_addtrack' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_addtrack', 'Add a track');
         html += " <input type='hidden' id='" + me.pre + "track_chainid' value=''>";
 
         html += me.htmlCls.divStr + "dl_addtrack_tabs' style='border:0px;'>";
@@ -12303,6 +12424,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_saveselection' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_saveselection', 'Save Selection');
         let index =(ic && ic.defNames2Atoms) ? Object.keys(ic.defNames2Atoms).length : 1;
         let suffix = '';
         html += "Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "seq_command_name" + suffix + "' value='seq_" + index + "' size='5'> <br>";
@@ -12312,13 +12434,29 @@ class SetDialog {
 
 
         html += me.htmlCls.divStr + "dl_copyurl' style='width:520px;' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_copyurl', 'Share Link');
+
+        html += "1. <b>URLs Used in Browsers</b><br><br>";
+
         html += "Please copy one of the URLs below. They show the same result.<br>(To add a title to share link, click \"Windows > Your Note\" and click \"File > Share Link\" again.)<br><br>";
         html += "Original URL with commands: <br><textarea id='" + me.pre + "ori_url' rows='4' style='width:100%'></textarea><br><br>";
-        html += "Lifelong Short URL:(To replace this URL, send a pull request to update share.html at <a href='https://github.com/ncbi/icn3d' target='_blank'>iCn3D GitHub</a>)<br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "short_url' value='' style='width:100%'><br><br>";
-        html += "Lifelong Short URL + Window Title:(To update the window title, click \"Analysis > Your Note/Window Title\".)<br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "short_url_title' value='' style='width:100%'><br><br>";
+        if(!me.cfg.notebook) {
+            html += "Lifelong Short URL:(To replace this URL, send a pull request to update share.html at <a href='https://github.com/ncbi/icn3d' target='_blank'>iCn3D GitHub</a>)<br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "short_url' value='' style='width:100%'><br><br>";
+            html += "Lifelong Short URL + Window Title:(To update the window title, click \"Analysis > Your Note/Window Title\".)<br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "short_url_title' value='' style='width:100%'><br><br>";
+        }
+        html += "<br>";
+
+        html += "2. <b>Commands Used in Jupyter Noteboook</b><br><br>";
+        html += "Please copy the following commands into a cell in Jupyter Notebook to show the same result.<br><br>";
+
+        html += '<textarea id="' + me.pre + 'jn_commands" rows="4" style="width:100%"></textarea><br>';
+
+        html += buttonStrTmp + me.pre + 'jn_copy">Copy Commands</button><br>';
+
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_selectannotations' class='" + dialogClass + " icn3d-annotation' style='background-color:white;'>";
+        html += this.addNotebookTitle('dl_selectannotations', 'Sequences & Annotations');
 
         html += me.htmlCls.divStr + "dl_annotations_tabs'>";
 
@@ -12347,6 +12485,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_graph' style='background-color:white;' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_graph', 'Interactions');
         me.svgid = me.pre + 'icn3d_viz';
         html += '<style>';
         html += '#' + me.svgid + ' svg { border: 1px solid; font: 13px sans-serif; text-anchor: end; }';
@@ -12401,6 +12540,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_area' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_area', 'Surface Area');
         html += "Solvent Accessible Surface Area(SASA) calculated using the <a href='https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0008140' target='_blank'>EDTSurf algorithm</a>: <br>";
         html += '(0-20% out is considered "in". 50-100% out is considered "out".)<br><br>';
         html += "<b>Toal</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "areavalue' value='' size='10'> &#8491;<sup>2</sup><br><br>";
@@ -12408,19 +12548,23 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_colorbyarea' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_colorbyarea', 'Color by surface area');
         html += "<div style='width:500px'>Color each residue based on the percentage of solvent accessilbe surface area. The color ranges from blue, to white, to red for a percentage of 0, 35(variable), and 100, respectively.</div><br>";
         html += "<b>Middle Percentage(White)</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "midpercent' value='35' size='10'>% <br><br>";
         html += "<button style='white-space:nowrap;' id='" + me.pre + "applycolorbyarea'>Color</button><br/><br/>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_rmsd' class='" + dialogClass + "' style='max-width:300px'>";
+        html += this.addNotebookTitle('dl_rmsd', 'RMSD', true);
         
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_buriedarea' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_buriedarea', 'Buried surface area', true);
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_propbypercentout' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_propbypercentout', 'Select residues basen on solvent accessilbe surface area');
         html += "<div style='width:400px'>Select residue based on the percentage of solvent accessilbe surface area. The values are in the range of 0-100.</div><br>";
         html += "<b>Min Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minpercentout' value='0' size='10'>% <br>";
         html += "<b>Max Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxpercentout' value='100' size='10'>% <br>";
@@ -12428,6 +12572,7 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_propbybfactor' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_propbybfactor', 'Select residues basen on B-factor');
         html += "<div style='width:400px'>Select residue based on B-factor. The values are in the range of 0-100.</div><br>";
         html += "<b>Min B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minbfactor' value='0' size='10'>% <br>";
         html += "<b>Max B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxbfactor' value='100' size='10'>% <br>";
@@ -12435,9 +12580,11 @@ class SetDialog {
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_legend' class='" + dialogClass + "' style='max-width:500px; background-color:white'>";
+        html += this.addNotebookTitle('dl_legend', 'Legend', true);
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_disttable' class='" + dialogClass + "'>";
+        html += this.addNotebookTitle('dl_disttable', 'Distance Table', true);
         html += "</div>";
 
         html += "</div>";
@@ -15753,6 +15900,8 @@ class SetHtml {
         }
 
         html += me.htmlCls.divStr + "dl_" + name1 + "' class='" + dialogClass + "'>";
+        html += me.htmlCls.setDialogCls.addNotebookTitle("dl_" + name1, 'DelPhi Potential');
+        
         html += me.htmlCls.divStr + "dl_" + name1 + "_tabs' style='border:0px;'>";
         html += "<ul>";
         html += "<li><a href='#" + me.pre + name1 + "tab1'>" + tab1 + "</a></li>";
@@ -16066,7 +16215,7 @@ class SetHtml {
                statefile = imageStr.substr(posState + matchedStrState.length, posStateEnd - posState- matchedStrState.length);
                //statefile = decodeURIComponent(statefile);
                statefile = decodeURIComponent(statefile + "\n" + commandStr);
-
+               
                 if(type === 'pdb') {
                     await ic.pdbParserCls.loadPdbData(data);
 
@@ -23068,7 +23217,7 @@ class Scene {
             ic.cam.remove( ic.canvasUI.mesh );
         }
 
-        if (controllerInfo !== undefined){
+        if (controller && controllerInfo !== undefined){
             // "trigger":{"button":0},
             // "squeeze":{"button":1},
             // "thumbstick":{"button":3,"xAxis":2,"yAxis":3},   "touchpad":{"button":2,"xAxis":0,"yAxis":1},
@@ -23150,8 +23299,11 @@ class Scene {
                 ic.cam.remove( ic.canvasUI.mesh );
             } },
             sphere: { type: "button", position:{ top: margin + (btnHeight + margin), left: margin + 4*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
-                ic.setOptionCls.setStyle("proteins", "sphere");
-                ic.setOptionCls.setStyle("nucleotides", "sphere");
+                // ic.setOptionCls.setStyle("proteins", "sphere");
+                // ic.setOptionCls.setStyle("nucleotides", "sphere");
+                ic.opts['surface'] = 'molecular surface';
+                ic.applyMapCls.applySurfaceOptions();
+
                 ic.cam.remove( ic.canvasUI.mesh );
             } },
 
@@ -23217,14 +23369,17 @@ class Scene {
                     //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() {
-            //     ic.debugStr = '###ic.hAtoms: ' + Object.keys(ic.hAtoms).length  + ' ic.dAtoms: ' + Object.keys(ic.dAtoms).length;
-            //     let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
-            //     ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
-            //     ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
-            //     ic.cam.remove( ic.canvasUI.mesh );
-            // } },
-            removeLabel: { 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() {
+            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: async function() {
+                let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
+                ic.phisurftype = 22; // molecular surface
+                ic.phisurfop = 1.0; // opacity
+                ic.phisurfwf = 'no'; // wireframe
+                await ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
+                
+                //ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
+                ic.cam.remove( ic.canvasUI.mesh );
+            } },
+            removeLabel: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 3*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
                 for(let name in ic.labels) {
                     //if(name === 'residue' || name === 'custom') {
                         ic.labels[name] = [];
@@ -23234,7 +23389,7 @@ class Scene {
                 ic.drawCls.draw();
                 ic.cam.remove( ic.canvasUI.mesh );
             } },
-            reset: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 3*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
+            reset: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 4*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
                 ic.selectionCls.resetAll();
                 
                 ic.cam.remove( ic.canvasUI.mesh );
@@ -23254,7 +23409,8 @@ class Scene {
             ribbon: "Ribbon",
             schematic: "Schem.",
             stick: "Stick",
-            sphere: "Sphere",
+            //sphere: "Sphere",
+            sphere: "Surface",
 
             color: "Color",
             rainbow: "Rainbow",
@@ -23274,7 +23430,7 @@ class Scene {
 
             analysis: "Analysis",
             interaction: "Interact",
-            //delphi: "DelPhi",
+            delphi: "DelPhi",
             removeLabel: "No Label",
             reset: "Reset"
         };
@@ -23325,6 +23481,8 @@ class Scene {
         
         for(let i=0; i<=1; i++){
             const controller = ic.renderer.xr.getController( i );
+            if(!controller) continue;
+
             ic.dolly.add( controller );
 
             controller.add( line.clone() );
@@ -26634,6 +26792,8 @@ class TextSprite {
             sprite.scale.set(expandWidthFactor * factor, factor, 1.0);
         }
 
+        sprite.renderOrder = 1; // larger than the default 0
+
         return sprite;
     }
 
@@ -29423,11 +29583,12 @@ class Surface {
             cfg.isovalue = ic.mapData.contourPhi;
             cfg.type = 'phi';
             cfg.loadPhiFrom = ic.loadPhiFrom;
-
+            
             ps = this.SetupMap(cfg);
         }
         else {
              //1: van der waals surface, 2: molecular surface, 3: solvent accessible surface
+             
 
             //exclude water
             let atomsToShow = me.hashUtilsCls.exclHash(atoms, ic.water);
@@ -29461,7 +29622,7 @@ class Surface {
 
             ps = this.SetupSurface(cfg);
         }
-
+        
         if(ic.bCalcArea) {
             ic.areavalue = ps.area.toFixed(2);
             let serial2area = ps.serial2area;
@@ -29540,7 +29701,7 @@ class Surface {
         //geo = new THREE.Geometry();
         geo = new THREE.BufferGeometry();
         let verticeArray = [], colorArray = [], indexArray = [], color;
-
+        
         //var geoVertices = verts.map(function (v) {
         let offset = 0;
         for(let i = 0, il = verts.length; i < il; ++i, offset += 3) {
@@ -29615,9 +29776,8 @@ class Surface {
         //geo.normalsNeedUpdate = true;
 
         geo.computeVertexNormals();
-
+        
         geo.type = 'Surface'; // to be recognized in vrml.js for 3D printing
-
         // use the regular way to show transparency for type == 15 (surface with potential)
     //    if(ic.transparentRenderOrder && (type == 1 || type == 2 || type == 3)) { // WebGL has some ordering problem when dealing with transparency
         if(ic.transparentRenderOrder) { // WebGL has some ordering problem when dealing with transparency
@@ -29805,7 +29965,7 @@ class Surface {
             mesh.renderOrder = -2; // default: 0, picking: -1
 
             ic.mdl.add(mesh);
-
+            
             if(type == 11 || type == 12) {
                 ic.prevMaps.push(mesh);
             }
@@ -29888,7 +30048,7 @@ class Surface {
 
     SetupMap(data) { let ic = this.icn3d; ic.icn3dui;
         let ps = new ElectronMap(ic);
-
+        
         ps.initparm(data.header, data.data, data.matrix, data.isovalue, data.center, data.maxdist,
           data.pmin, data.pmax, data.water, data.type, data.rmsd_supr, data.loadPhiFrom, data.icn3d);
 
@@ -29897,7 +30057,7 @@ class Surface {
         if(!data.header.bSurface) ps.buildboundary();
 
         if(!data.header.bSurface) ps.marchingcube();
-
+        
         ps.vpBits = null; // uint8 array of bitmasks
         //ps.vpDistance = null; // floatarray of _squared_ distances
         ps.vpAtomID = null; // intarray
@@ -31735,6 +31895,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);      
 
         let near = 2.5*ic.maxD;
         let far = 4*ic.maxD;
@@ -32921,10 +33082,10 @@ class Alternate {
 
         // show membranes
         if(ic.bOpm) {
-            //if(window.dialog) window.dialog.dialog( "close" );
+            //if(window.dialog && window.dialog.hasClass('ui-dialog-content')) window.dialog.dialog( "close" );
             
             let html = me.utilsCls.getMemDesc();
-            $("#" + ic.pre + "dl_rmsd").html(html);
+            $("#" + ic.pre + "dl_rmsd_html").html(html);
             if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Membranes');
         }
     }
@@ -33095,6 +33256,8 @@ class Alternate {
 
                 for(let i = 0, il = ic.controllers.length; i < il; ++i) {
                     let controller = ic.controllers[i];
+                    if(!controller) continue;
+                    
                     dt = (i % 2 == 0) ? dt : -dt; // dt * y; 
                     thisClass.handleController( controller, dt, controller.userData.selectPressed, controller.userData.squeezePressed, result.xArray, result.yArray );
                     //thisClass.handleController( controller, dt, pressed );
@@ -33103,13 +33266,13 @@ class Alternate {
 
             if ( ic.renderer.xr.isPresenting){    
                 if(ic.canvasUI) ic.canvasUI.update();
-                //if(ic.canvasUILog) ic.canvasUILog.update();
+                if(ic.canvasUILog) ic.canvasUILog.update();
             }
         }
         else if(ic.bAr) {
             if ( ic.renderer.xr.isPresenting ){    
                 ic.gestures.update();
-                //if(ic.canvasUILog) ic.canvasUILog.update();
+                if(ic.canvasUILog) ic.canvasUILog.update();
             }
         }
 
@@ -35305,22 +35468,28 @@ class SetColor {
 
             case 'ig strand':
                 if(ic.bShowRefnum) {
-                    for(let resid in ic.resid2refnum) {
-                        let refnumLabel = ic.resid2refnum[resid];
-                        let color;
-                        if(!refnumLabel) {
-                            color = me.parasCls.thr(me.htmlCls.GREYB);
+                    let color;
+                    for(let resid in ic.residues) {
+                        if(!ic.resid2refnum[resid]) {
+                            color = me.parasCls.thr('#FFFFFF');
                         }
                         else {
-                            let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
-                            let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
-                            color = ic.showSeqCls.getRefnumColor(currStrand);
-
-                            if(ic.residIgLoop.hasOwnProperty(resid)) {
+                            let refnumLabel = ic.resid2refnum[resid];
+                            
+                            if(!refnumLabel) {
                                 color = me.parasCls.thr(me.htmlCls.GREYB);
                             }
+                            else {
+                                let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
+                                let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
+                                color = ic.showSeqCls.getRefnumColor(currStrand);
+
+                                if(ic.residIgLoop.hasOwnProperty(resid)) {
+                                    color = me.parasCls.thr(me.htmlCls.GREYB);
+                                }
+                            }
                         }
-                        
+                            
                         for (let i in ic.residues[resid]) {
                             let atom = ic.atoms[i];
                             atom.color = me.parasCls.thr(color);
@@ -35334,20 +35503,26 @@ class SetColor {
 
             case 'ig protodomain':
                 if(ic.bShowRefnum) {
-                    for(let resid in ic.resid2refnum) {
-                        let refnumLabel = ic.resid2refnum[resid];
-                        let color;
-                        if(!refnumLabel) {
-                            color = me.parasCls.thr(me.htmlCls.GREYB);
+                    let color;
+                    for(let resid in ic.residues) {
+                        if(!ic.resid2refnum[resid]) {
+                            color = me.parasCls.thr('#FFFFFF');
                         }
                         else {
-                            let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
-                            let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
-                            color = ic.showSeqCls.getProtodomainColor(currStrand);
+                            let refnumLabel = ic.resid2refnum[resid];
 
-                            if(ic.residIgLoop.hasOwnProperty(resid)) {
+                            if(!refnumLabel) {
                                 color = me.parasCls.thr(me.htmlCls.GREYB);
                             }
+                            else {
+                                let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
+                                let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
+                                color = ic.showSeqCls.getProtodomainColor(currStrand);
+
+                                if(ic.residIgLoop.hasOwnProperty(resid)) {
+                                    color = me.parasCls.thr(me.htmlCls.GREYB);
+                                }
+                            }
                         }
                         
                         for (let i in ic.residues[resid]) {
@@ -36125,11 +36300,13 @@ class SetOption {
             bClose = true;
         }
 
-        $("#" + me.pre + "dl_legend").html(html);
-        me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Legend');
+        if(html) {
+            $("#" + me.pre + "dl_legend_html").html(html);
+            me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Legend');
+        }
 
         if(bClose) {
-            if(window.dialog) window.dialog.dialog( "close" );
+            if(window.dialog && window.dialog.hasClass('ui-dialog-content')) window.dialog.dialog( "close" );
         }
      }
 
@@ -36291,7 +36468,7 @@ class SetOption {
             "C' Strand": "6495ED",
             "C'' Strand": "006400",
             "D Strand": "00FF00",
-            "E Strand": "F7DC6F", //"F0E68C",
+            "E Strand": "FFFF00", //"F0E68C",
             "F Strand": "FFA500",
             "G Strand": "FF0000",
             "G* Strand": "8B0000",
@@ -36318,12 +36495,12 @@ class SetOption {
         const name2color = {
             "A Strand": "0000FF",
             "B Strand": "006400",
-            "C Strand": "F7DC6F", //"F0E68C",
+            "C Strand": "FFFF00", //"F0E68C",
             "C' Strand": "FFA500",
             "C'' Strand": "FF0000",
             "D Strand": "0000FF",
             "E Strand": "006400",
-            "F Strand": "F7DC6F", //"F0E68C",
+            "F Strand": "FFFF00", //"F0E68C",
             "G Strand": "FFA500",
             "Loop": "CCCCCC"
         };
@@ -38543,6 +38720,7 @@ class Domain3d {
 		this.icn3d = icn3d;
 
         //this.dcut = 8; // threshold for C-alpha interactions
+
 		// It seemed the threshold 7 angstrom works better
 		this.dcut = 7; // threshold for C-alpha interactions
 
@@ -38578,6 +38756,9 @@ class Domain3d {
         this.c_delta = 3;				// cut set parameter
         this.nc_fact = 0.0;				// size factor for internal contacts
 
+		// added by Jiyao
+		this.min_contacts = 10;			// minimum number of contacts to be considered as neighbors
+
         //let this.elements[2*this.MAX_SSE];			// sets of this.elements to be split
         this.elements = [];
         this.elements.length = 2*this.MAX_SSE;
@@ -39126,6 +39307,7 @@ class Domain3d {
 	//https://www.geeksforgeeks.org/number-groups-formed-graph-friends/
 	countUtil(ss1, sheetNeighbor, existing_groups) {
 		this.visited[ss1] = true;
+
 		if(!this.groupnum2sheet[existing_groups]) this.groupnum2sheet[existing_groups] = [];
 		this.groupnum2sheet[existing_groups].push(parseInt(ss1));
 
@@ -39169,6 +39351,7 @@ class Domain3d {
 		let chnid = residueArray[0].substr(0, residueArray[0].lastIndexOf('_'));
 
 		let substructItem = {};
+		let pos2resi = {};
 		for(let i = 0; i < residueArray.length; ++i) {
 			let resid = residueArray[i];
 
@@ -39206,22 +39389,26 @@ class Domain3d {
 			x0.push(atom.coord.x);
 			y0.push(atom.coord.y);
 			z0.push(atom.coord.z);
-			resiArray.push(resi);
+			//resiArray.push(resi);
+			resiArray.push(i+1);
+			pos2resi[i+1] = resi;
 
 			if(atom.ssend) {
-				substructItem.To = parseInt(resi);
+				//substructItem.To = parseInt(resi);
+				substructItem.To = i + 1;
 				substructItem.x2 = atom.coord.x;
 				substructItem.y2 = atom.coord.y;
 				substructItem.z2 = atom.coord.z;
 
 				substructItem.Sheet = (atom.ss == 'sheet') ? true : false;
 				substruct.push(substructItem);
-				substructItem = {};				
+				substructItem = {};		
 			}
 
 			// a residue could be both start and end. check ssend first, then check ssbegin 
 			if(atom.ssbegin) {
-				substructItem.From = parseInt(resi);
+				//substructItem.From = parseInt(resi);
+				substructItem.From = i + 1;
 				substructItem.x1 = atom.coord.x;
 				substructItem.y1 = atom.coord.y;
 				substructItem.z1 = atom.coord.z;
@@ -39241,7 +39428,8 @@ class Domain3d {
 		}
 
 		let seqLen = residueArray.length; // + resiOffset;
-		let lastResi = resiArray[seqLen - 1];
+		//let lastResi = resiArray[seqLen - 1];
+		let lastResi = seqLen;
 
 		// get a list of Calpha-Calpha contacts
 		///list< pair< pair< int, let >, let > >
@@ -39320,7 +39508,8 @@ class Domain3d {
 			let ss2 = parseInt(ssPair[1]);
 
 			// both are sheets
-			if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet) {
+			// min number of contacts: this.min_contacts
+			if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet && ctable[pair] >= this.min_contacts ) {
 				if(!sheetNeighbor[ss1]) sheetNeighbor[ss1] = {};
 				if(!sheetNeighbor[ss2]) sheetNeighbor[ss2] = {};
 
@@ -39343,13 +39532,13 @@ class Domain3d {
 			// If not in any group.
 			if (this.visited[ss1] == false) {
 				existing_groups++;
-				 
+					
 				this.countUtil(ss1, sheetNeighbor, existing_groups);
 			}
 		}
 
 		// get sheet2sheetnum
-		// each neighboring sheet willbe represented by the sheet with the smallest sse 
+		// each neighboring sheet will be represented by the sheet with the smallest sse 
 		for(let groupnum in this.groupnum2sheet) {
 			let ssArray = this.groupnum2sheet[groupnum].sort();
 			for(let i = 0, il = ssArray.length; i < il; ++i) {
@@ -39452,7 +39641,7 @@ class Domain3d {
 			this.parts[2*i] = this.parts[2*i + 1] = 0;
 			ratios[i] = 0.0;
 		}
-
+		
 		n_saved = this.new_split_chain(nsse, sratio, minSize, minSSE, maxCsz, avgCts, cDelta, ncFact, this.parts, n_saved, ratios);
 
 		// save domain data
@@ -39493,14 +39682,14 @@ class Domain3d {
 			//resflags.clear();
 
 			//let resflags = [];
-			let resflags = {};
+			let resflags = {}; // keys are 1-based positions
 
 			// a domain must have at least 3 SSEs...
 			if (prts.length <= 2) continue;
 
 			for (let i = 0; i < seqLen; i++) {
 				//resflags.push(0);
-				resflags[resiArray[i]] = 0;
+				resflags[i + 1] = 0;
 			}
 
 			for (let i = 0; i < prts.length; i++) {
@@ -39516,17 +39705,14 @@ class Domain3d {
 				let To = sserec.To;
 
 				for (let j = From; j <= To; j++) {
-					//resflags[j - 1] = 1;
 					resflags[j] = 1;
 				}
 
 				if ((k == 0) && (From > 1)) {
 					// residues with negative residue numbers will not be included
 					for (let j = 1; j < From; j++) {
-						//resflags[j - 1] = 1;
 						// include at most 10 residues
 						if(From - j <= 10) {
-							//resflags[j - 1] = 1;
 							resflags[j] = 1;
 						}
 					}
@@ -39536,10 +39722,8 @@ class Domain3d {
 				if ((k == substruct.length - 1) && (To < parseInt(lastResi))) {
 					//for (let j = To + 1; j <= seqLen; j++) {
 					for (let j = To + 1; j <= parseInt(lastResi); j++) {
-						//resflags[j - 1] = 1;
 						// include at most 10 residues
 						if(j - To <= 10) {
-							//resflags[j - 1] = 1;
 							resflags[j] = 1;
 						}
 					}
@@ -39555,7 +39739,6 @@ class Domain3d {
 
 					if (ll > 0) {
 						for (let j = From - ll; j <= From - 1; j++) {
-							//resflags[j - 1] = 1;
 							resflags[j] = 1;
 						}
 					}
@@ -39574,7 +39757,6 @@ class Domain3d {
 
 					if (ll > 0) {
 						for (let j = To + 1; j <= To + ll; j++) {
-							//resflags[j - 1] = 1;
 							resflags[j] = 1;
 						}
 					}
@@ -39586,16 +39768,15 @@ class Domain3d {
 			let startseg;
 			//vector<int> segments;
 			//segments.clear();
-			let segments = [];
+			let segments = []; //use position instead of residue number
 
 			for (let i = 0; i < seqLen; i++) {
 				//let rf = resflags[i];
-				let rf = resflags[resiArray[i]];
+				let rf = resflags[i + 1];
 
 				if (!inseg && (rf == 1)) {
 					// new segment starts here
-					//startseg = i + 1;
-					startseg = resiArray[i];
+					startseg = i + 1;
 					inseg = true;
 					continue;
 				}
@@ -39603,8 +39784,7 @@ class Domain3d {
 				if (inseg && (rf == 0)) {
 					// segment ends
 					segments.push(startseg);
-					//segments.push(i);
-					segments.push(resiArray[i]);
+					segments.push(i);
 					inseg = false;
 				}
 			}
@@ -39612,7 +39792,6 @@ class Domain3d {
 			// check for the last segment
 			if (inseg) {
 				segments.push(startseg);
-				//segments.push(seqLen);
 				segments.push(lastResi);
 			}
 
@@ -39633,8 +39812,8 @@ class Domain3d {
 				}
 			}
 		}
-
-		return {subdomains: subdomains, substruct: substruct};
+		
+		return {subdomains: subdomains, substruct: substruct, pos2resi:pos2resi };
 	} // end c2b_NewSplitChain
 
 	getDomainJsonForAlign(atoms) { let ic = this.icn3d, me = ic.icn3dui;
@@ -39642,6 +39821,7 @@ class Domain3d {
 
 		let subdomains = result.subdomains;
 		let substruct = result.substruct;
+		let pos2resi = result.pos2resi;
 
 		let residueHash = ic.firstAtomObjCls.getResiduesFromAtoms(atoms);
 		let residueArray = Object.keys(residueHash);
@@ -39669,8 +39849,8 @@ class Domain3d {
 					//ss: sstype	ss_start	ss_end	x1	y1	z1	x2	y2	z2
 						//sstype: 1 (helix), 2 (sheet)
 					let sstype = (substruct[k].Sheet) ? 2 : 1;
-					let from = substruct[k].From;
-					let to = substruct[k].To;
+					let from = pos2resi[substruct[k].From];
+					let to = pos2resi[substruct[k].To];
 
 					let residFrom = chnid + "_" + from;
 					let atomFrom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residFrom]);
@@ -40687,7 +40867,7 @@ class AddTrack {
                 let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
 
                 //$("#" + me.pre + "legend").html(legendHtml);
-                $("#" + me.pre + "dl_legend").html(legendHtml);
+                $("#" + me.pre + "dl_legend_html").html(legendHtml);
                 me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
             }
             else if(type == 'tube') {
@@ -42532,7 +42712,7 @@ class ShowSeq {
         let strand2len_start_stop = {};
         let prevRefnumStr, prevPostfix, prevRefnum;
 
-        // sometimes one chain may have several Ig domains,set a index for each IgDomain
+        // sometimes one chain may have several Ig domains,set an index for each IgDomain
         let index = 1, prevStrandPostfix = '', bStart = false;
         for(let i = 0, il = giSeq.length; i < il; ++i) {
             let currResi = ic.ParserUtilsCls.getResi(chnid, i);
@@ -42743,7 +42923,7 @@ class ShowSeq {
                         }
                         else {
                             let refnum = parseInt(refnumStr).toString();
-                            let color = this.getRefnumColor(currStrand);
+                            let color = this.getRefnumColor(currStrand, true);
                             let colorStr = 'style="color:' + color + '"';
 
                             let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42914,7 +43094,7 @@ class ShowSeq {
 
     getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel) { let ic = this.icn3d, me = ic.icn3dui;
         let refnum = parseInt(refnumStr).toString();
-        let color = this.getRefnumColor(currStrand);
+        let color = this.getRefnumColor(currStrand, true);
         let colorStr = (!bLoop) ? 'style="color:' + color + '; text-decoration: underline overline;"' : 'style="color:' + color + '"';
 
         let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42940,45 +43120,45 @@ class ShowSeq {
         return html;
     }
 
-    getRefnumColor(currStrand) {  let ic = this.icn3d, me = ic.icn3dui;
-        if(currStrand == "A^") { //magenta // deep sky blue
-            return '#FF00FF'; //'#9900ff'; //'#00BFFF';
+    getRefnumColor(currStrand, bText) {  let ic = this.icn3d, me = ic.icn3dui;
+        if(currStrand == "A^") { 
+            return '#FF00FF'; 
         }
-        else if(currStrand == "A") { //rebecca purple // blue
-            return '#663399'; //'#9900ff'; //'#0000FF';
+        else if(currStrand == "A") { 
+            return '#663399'; 
         }
-        else if(currStrand == "A*") { //pink  // sky blue
-            return '#FFC0CB'; //'#9900ff'; //'#87CEEB';
+        else if(currStrand == "A*") { 
+            return '#FFC0CB'; 
         }
-        else if(currStrand == "A'") { //medium purple // steel blue
-            return '#663399'; //'#9370db'; //'#9900ff'; //'#4682B4';
+        else if(currStrand == "A'") { 
+            return '#663399'; 
         }
-        else if(currStrand == "B") { //medium orchid // cyan
-            return '#ba55d3'; //'#0000FF'; //'#4a86e8'; //'#00FFFF';
+        else if(currStrand == "B") { 
+            return '#ba55d3'; 
         }
-        else if(currStrand == "C") { //blue // green
-            return '#0000FF'; //'#76d6ff'; //'#00FF00';
+        else if(currStrand == "C") { 
+            return '#0000FF'; 
         }
-        else if(currStrand == "C'") { //corn blue // yellow
-            return '#6495ED'; //'#006400'; //'#00b050'; //'#FFFF00';
+        else if(currStrand == "C'") { 
+            return '#6495ED'; 
         }
-        else if(currStrand == "C''") { //dark green // orange
-            return '#006400'; //'#00ff00'; //'#FFA500';
+        else if(currStrand == "C''") { 
+            return '#006400'; 
         }
-        else if(currStrand == "D") { //green // brown
-            return '#00FF00'; //'#fffb00'; //'#A52A2A';
+        else if(currStrand == "D") { 
+            return '#00FF00'; 
         }
-        else if(currStrand == "E") { //yellow // pink
-            return "#F7DC6F"; //'#F0E68C'; //'#ff9900'; //'#ffd966'; //'#FFC0CB';
+        else if(currStrand == "E") { 
+            return (bText) ? "#F7DC6F" : "#FFFF00"; 
         }
-        else if(currStrand == "F") { //orange // magenta
-            return '#FFA500'; //'#FF00FF'; //'#ff9900'; //'#FF00FF';
+        else if(currStrand == "F") { 
+            return '#FFA500'; 
         }
-        else if(currStrand == "G") { //red // red
-            return '#FF0000'; //'#ff2600'; //'#FF0000';
+        else if(currStrand == "G") { 
+            return '#FF0000'; 
         }
-        else if(currStrand == "G*") { //dark red // salmon
-            return '#8B0000'; //'#ff2600'; //'#FA8072';
+        else if(currStrand == "G*") { 
+            return '#8B0000'; 
         }
         else {
             return me.htmlCls.GREYB;
@@ -42993,7 +43173,7 @@ class ShowSeq {
             return '#006400';
         }
         else if(currStrand == "C" || currStrand == "F") {
-            return "#F7DC6F"; //'#F0E68C'; 
+            return "#FFFF00"; //'#F0E68C'; 
         }
         else if(currStrand == "C'" || (currStrand && currStrand.substr(0, 1) == "G")) {
             return '#FFA500'; 
@@ -43577,7 +43757,7 @@ class HlUpdate {
           html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData, ic.inputid, undefined, true);
           html2ddgm += ic.diagram2dCls.set2DdgmNote();
 
-          $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
+          $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
        }
        else if(ic.mmdbidArray &&(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign)) {
           html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData1, ic.mmdbidArray[0].toUpperCase(), 0, true);
@@ -43589,7 +43769,7 @@ class HlUpdate {
           }
           html2ddgm += ic.diagram2dCls.set2DdgmNote(true);
 
-          $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
+          $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
        }
     }
 
@@ -44126,8 +44306,8 @@ class LineGraph {
                             linkedNodeCnt[mappingid] = 1;
                             linkedNodeInterDiff[mappingid] = link.n;
                           }
-                          else {
-                            ++linkedNodeCnt[mappingid];
+                          else {                           
+                            ++linkedNodeCnt[mappingid];                            
                             linkedNodeInterDiff[mappingid] -= link.n; // show difference
                           }
                       }
@@ -44477,9 +44657,9 @@ class LineGraph {
             if(pos1 === undefined || pos2 === undefined) continue;
             let linestrokewidth;
             if(link.v == me.htmlCls.contactValue) {
-                linestrokewidth = 1;
+                linestrokewidth = (link.n == 1) ? 1 : 3;
             } else {
-                linestrokewidth = 2;
+                linestrokewidth = (link.n == 1) ? 2 : 4;
             }
             let strokecolor;
             if(link.v == me.htmlCls.hbondValue) {
@@ -44496,8 +44676,9 @@ class LineGraph {
                 strokecolor = "#" + me.htmlCls.contactColor;
             }
             html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
-            html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
-            html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "' /></g>";
+            let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
+            if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
+            html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "'/></g>";
         }
         // show nodes later
         html += nodeHtml;
@@ -44590,9 +44771,9 @@ class LineGraph {
 
         let linestrokewidth;
         if(link.v == me.htmlCls.contactValue) {
-            linestrokewidth = 1;
+            linestrokewidth = (link.n == 1) ? 1 : 3;
         } else {
-            linestrokewidth = 2;
+            linestrokewidth = (link.n == 1) ? 2 : 4;
         }
         
         if(bAfMap && ic.hex2skip[link.c]) ;
@@ -44607,7 +44788,8 @@ class LineGraph {
         }
         else {
             html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
-            html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
+            let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
+            if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
             if(bContactMap) {
                 html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
             }
@@ -45123,11 +45305,9 @@ class GetGraph {
 
                     if(!linkstr2cnt.hasOwnProperty(linkStr)) {
                         linkstr2cnt[linkStr] = 1;
-                        linkstr2cnt[linkStr] = 1;
                     }
                     else {
-                        linkstr2cnt[linkStr] += 1;
-                        linkstr2cnt[linkStr] += 1;
+                        ++linkstr2cnt[linkStr];
                     }
                 }
             }
@@ -45851,11 +46031,11 @@ class ViewInterPairs {
            html += result.html;
            bondCnt = result.bondCnt;
 
-           $("#" + ic.pre + "dl_interactionsorted").html(html);
+           $("#" + ic.pre + "dl_interactionsorted_html").html(html);
            me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
        }
        else if(type == 'view') {
-           $("#" + ic.pre + "dl_allinteraction").html(html);
+           $("#" + ic.pre + "dl_allinteraction_html").html(html);
            me.htmlCls.dialogCls.openDlg('dl_allinteraction', 'Show interactions');
        }
        else if(type == 'linegraph') {
@@ -48183,7 +48363,7 @@ class ChainalignParser {
                 me.htmlCls.clickMenuCls.setLogCmd(logStr, false);
                 let html = "<br><b>Alignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br>";
                 if(me.cfg.aligntool == 'tmalign') html += "<b>TM-score</b>: " + align[0].score.toPrecision(4) + "<br><br>";
-                $("#" + ic.pre + "dl_rmsd").html(html);
+                $("#" + ic.pre + "dl_rmsd_html").html(html);
                 if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment');
 
                 bAligned = true;
@@ -52446,10 +52626,10 @@ class ParserUtils {
                   me.htmlCls.clickMenuCls.setLogCmd("realignment RMSD: " + rmsd.toPrecision(4), false);
                   let html = "<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>";
                   if(ic.bAfMem) {
-                    //if(window.dialog) window.dialog.dialog( "close" );
+                    //if(window.dialog && window.dialog.hasClass('ui-dialog-content')) window.dialog.dialog( "close" );
                     html += me.utilsCls.getMemDesc();
                   }
-                  $("#" + ic.pre + "dl_rmsd").html(html);
+                  $("#" + ic.pre + "dl_rmsd_html").html(html);
                   if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
               }
 
@@ -52630,7 +52810,7 @@ class ParserUtils {
         ic.diagram2dCls.draw2Ddgm(ic.interactionData2, mmdbid2, 1);
 
         ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
-        $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
+        $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
 
         ic.b2DShown = true;
 
@@ -52683,7 +52863,7 @@ class ParserUtils {
         ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
 
         ic.b2DShown = true;
-        $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
+        $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
         if(me.cfg.show2d) me.htmlCls.dialogCls.openDlg('dl_2ddgm', 'Interactions');
 
         /// if(ic.deferredViewinteraction !== undefined) ic.deferredViewinteraction.resolve();
@@ -52701,7 +52881,7 @@ class ParserUtils {
             ic.diagram2dCls.draw2Ddgm(ic.interactionData, mmdbid);
 
             ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote();
-            $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
+            $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
         }
 
         ic.b2DShown = true;
@@ -52804,7 +52984,7 @@ class ParserUtils {
                   let rmsd = ic.rmsd_supr.rmsd;
 
                   me.htmlCls.clickMenuCls.setLogCmd("RMSD of alignment to OPM: " + rmsd.toPrecision(4), false);
-                  //$("#" + ic.pre + "dl_rmsd").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
+                  //$("#" + ic.pre + "dl_rmsd_html").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
                   //if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment to OPM');
 
                   let dxymaxsq = 0;
@@ -53010,6 +53190,16 @@ class ParserUtils {
       
       // set defined sets before loadScript
       if(ic.bInitial) {
+        if(me.cfg.mobilemenu) {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+            let bNoSave = true;
+            me.htmlCls.clickMenuCls.applyShownMenus(bNoSave);
+        }
+        // else {
+        //     me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+        //     me.htmlCls.clickMenuCls.applyShownMenus();
+        // }
+        
         if(me.cfg.showsets) {
              ic.definedSetsCls.showSets();
         }
@@ -56450,7 +56640,7 @@ class Vastplus {
                         bAligned = true;
 
                         me.htmlCls.clickMenuCls.setLogCmd("realignment RMSD: " + rmsd.toPrecision(4), false);
-                        $("#" + ic.pre + "dl_rmsd").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
+                        $("#" + ic.pre + "dl_rmsd_html").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
                         if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
 
                         // apply matrix for each atom                       
@@ -58396,7 +58586,7 @@ class ApplyCommand {
 
             let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
             //$("#" + me.pre + "legend").html(legendHtml).show();
-            $("#" + me.pre + "dl_legend").html(legendHtml);
+            $("#" + me.pre + "dl_legend_html").html(legendHtml);
             me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Range');
         }
     }
@@ -61912,7 +62102,7 @@ class Delphi {
         let phidata = await this.CalcPhiPrms(gsize, salt, contour, bSurface, data);
 
         this.loadPhiData(phidata, contour, bSurface);
-    
+
         ic.bAjaxPhi = true;
 
         if(bSurface) {
@@ -62676,8 +62866,8 @@ class Dssp {
 
                 // align each 3D domain with reference structure
                 let result = ic.domain3dCls.c2b_NewSplitChain(ic.chains[chainid]);
-                let subdomains = result.subdomains;
-                
+                let subdomains = result.subdomains;  
+
                 let domainAtomsArray = [];
                 if(subdomains.length <= 1) {
                     domainAtomsArray.push(ic.chains[chainid]);
@@ -62696,7 +62886,8 @@ class Dssp {
                             let startResi = segArray[m];
                             let endResi = segArray[m+1];
                             for(let n = parseInt(startResi); n <= parseInt(endResi); ++n) {
-                                let resid = chainid + '_' + n;
+                                let residNCBI = chainid + '_' + n;
+                                let resid = ic.ncbi2resid[residNCBI];
                                 domainAtoms = me.hashUtilsCls.unionHash(domainAtoms, ic.residues[resid]);
                                 ic.resid2domainid[resid] = chainid + '-' + k;
                             }
@@ -62707,9 +62898,9 @@ class Dssp {
                 }
        
                 for(let k = 0, kl = domainAtomsArray.length; k < kl; ++k) {
-
                     let pdb_target = ic.saveFileCls.getAtomPDB(domainAtomsArray[k], undefined, undefined, undefined, undefined, struct);
                     let domainid = chainid + '-' + k;
+
                     for(let index = 0, indexl = dataArray.length; index < indexl; ++index) {
                         let struct2 = ic.defaultPdbId + index;
                         let pdb_query = dataArray[index].value; //[0];
@@ -62930,7 +63121,7 @@ if(!me.bNode) {
         else if(refnum >= 1200 && refnum < 1300) return "A'" + oriRefnum;
         else if(refnum >= 1300 && refnum < 1400) return "A*" + oriRefnum;
         else if(refnum >= 1400 && refnum < 2000) {
-            if(prevStrand.substr(0, 1) == 'A') {
+            if(prevStrand  && prevStrand.substr(0, 1) == 'A') {
                 return prevStrand + oriRefnum;
             }
             else {
@@ -64299,7 +64490,7 @@ class Analysis {
            //html += '<b>Buried Surface for both Sets</b>: ' +  buriedArea + ' &#8491;<sup>2</sup><br>';
            html += '<b>Buried Surface for Set 1</b>: ' +  buriedArea2 + ' &#8491;<sup>2</sup><br>';
            html += '<b>Buried Surface for Set 2</b>: ' +  buriedArea1 + ' &#8491;<sup>2</sup><br><br>';
-           $("#" + ic.pre + "dl_buriedarea").html(html);
+           $("#" + ic.pre + "dl_buriedarea_html").html(html);
            me.htmlCls.dialogCls.openDlg('dl_buriedarea', 'Buried solvent accessible surface area in the interface');
            me.htmlCls.clickMenuCls.setLogCmd('buried surface ' + buriedArea, false);
        }
@@ -64405,7 +64596,7 @@ class Analysis {
 
             tableHtml += '</table><br><br>';
 
-            $("#" + me.pre + "dl_disttable").html(tableHtml);
+            $("#" + me.pre + "dl_disttable_html").html(tableHtml);
         }
      }
 
@@ -64962,7 +65153,7 @@ class Diagram2d {
 
         ic.html2ddgm += html;
 
-        $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
+        $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
 
         return html;
     }
@@ -67707,6 +67898,7 @@ class ShareLink {
     //file (the comand history) is concatenated in the URL to show the current state.
     async shareLink(bPngHtml, bPngOnly) { let ic = this.icn3d, me = ic.icn3dui;
         let url = this.shareLinkUrl();
+
         let bTooLong =(url.length > 4000 || url.indexOf('http') !== 0) ? true : false;
         if(bPngHtml) url += "&random=" + parseInt(Math.random() * 1000); // generate a new shorten URL and thus image name everytime
         //var inputid =(ic.inputid) ? ic.inputid : "custom";
@@ -67738,40 +67930,53 @@ class ShareLink {
             }
         }
 
-        let data = await this.getShareLinkPrms(url, bPngHtml);
-
         let shorturl = 'Problem in getting shortened URL';
-        if(data.shortLink !== undefined) {
-            shorturl = data.shortLink;
-            if(bPngHtml) { // save png and corresponding html
-                let strArray = shorturl.split("/");
-                let shortName = strArray[strArray.length - 1];
-                ic.saveFileCls.saveFile(inputid + '-' + shortName + '.png', 'png');
-                let text = '<div style="float:left; border: solid 1px #0000ff; padding: 5px; margin: 10px; text-align:center;">';
-                text += '<a href="https://structure.ncbi.nlm.nih.gov/icn3d/share.html?' + shortName + '" target="_blank">';
-                text += '<img style="height:300px" src ="' + inputid + '-' + shortName + '.png"><br>\n';
-                text += '<!--Start of your comments==================-->\n';
-                let yournote =(ic.yournote) ? ': ' + ic.yournote.replace(/\n/g, "<br>").replace(/; /g, ", ") : '';
-                text += 'PDB ' + inputid.toUpperCase() + yournote + '\n';
-                text += '<!--End of your comments====================-->\n';
-                text += '</a>';
-                text += '</div>\n\n';
-                ic.saveFileCls.saveFile(inputid + '-' + shortName + '.html', 'html', text);
-            }
-        }
-        if(bPngHtml && data.shortLink === undefined) {
-            ic.saveFileCls.saveFile(inputid + '_icn3d_loadable.png', 'png');
-        }
-        //shorturl: https://icn3d.page.link/NvbAh1Vmiwc4bgX87
-        let urlArray = shorturl.split('page.link/');
-        //if(urlArray.length == 2) shorturl = me.htmlCls.baseUrl + 'icn3d/share.html?' + urlArray[1];
-        // When the baseURL is structure.ncbi.nlm.nih.gov, mmcifparser.cgi has a problem to past posted data in Mac/iphone
-        // So the base URL is still www.ncbi.nlm.nih.gov/Structure,just use short URL here
-        if(urlArray.length == 2) shorturl = 'https://structure.ncbi.nlm.nih.gov/icn3d/share.html?' + urlArray[1];
+
+        if(!me.cfg.notebook) {
+            let data = await this.getShareLinkPrms(url, bPngHtml);
+
+            if(data.shortLink !== undefined) {
+                shorturl = data.shortLink;
+                if(bPngHtml) { // save png and corresponding html
+                    let strArray = shorturl.split("/");
+                    let shortName = strArray[strArray.length - 1];
+                    ic.saveFileCls.saveFile(inputid + '-' + shortName + '.png', 'png');
+                    let text = '<div style="float:left; border: solid 1px #0000ff; padding: 5px; margin: 10px; text-align:center;">';
+                    text += '<a href="https://structure.ncbi.nlm.nih.gov/icn3d/share.html?' + shortName + '" target="_blank">';
+                    text += '<img style="height:300px" src ="' + inputid + '-' + shortName + '.png"><br>\n';
+                    text += '<!--Start of your comments==================-->\n';
+                    let yournote =(ic.yournote) ? ': ' + ic.yournote.replace(/\n/g, "<br>").replace(/; /g, ", ") : '';
+                    text += 'PDB ' + inputid.toUpperCase() + yournote + '\n';
+                    text += '<!--End of your comments====================-->\n';
+                    text += '</a>';
+                    text += '</div>\n\n';
+                    ic.saveFileCls.saveFile(inputid + '-' + shortName + '.html', 'html', text);
+                }
+            }
+
+            if(bPngHtml && data.shortLink === undefined) {
+                ic.saveFileCls.saveFile(inputid + '_icn3d_loadable.png', 'png');
+            }
+
+            //shorturl: https://icn3d.page.link/NvbAh1Vmiwc4bgX87
+            let urlArray = shorturl.split('page.link/');
+            //if(urlArray.length == 2) shorturl = me.htmlCls.baseUrl + 'icn3d/share.html?' + urlArray[1];
+            // When the baseURL is structure.ncbi.nlm.nih.gov, mmcifparser.cgi has a problem to past posted data in Mac/iphone
+            // So the base URL is still www.ncbi.nlm.nih.gov/Structure,just use short URL here
+            if(urlArray.length == 2) shorturl = 'https://structure.ncbi.nlm.nih.gov/icn3d/share.html?' + urlArray[1];
+
+            $("#" + ic.pre + "short_url").val(shorturl);
+            $("#" + ic.pre + "short_url_title").val(shorturl + '&t=' + ic.yournote);
+        }
+
+        let outputCmd = this.shareLinkUrl(undefined, true);
+        let idStr = (me.cfg.url) ? "url=" + me.cfg.url : "mmdbafid=" + ic.inputid;
+        let jnCmd = "view = icn3dpy.view(q='" + idStr + "',command='" + outputCmd + "')\nview";
+        $("#" + ic.pre + "jn_commands").val(jnCmd);
+
         $("#" + ic.pre + "ori_url").val(url);
-        $("#" + ic.pre + "short_url").val(shorturl);
-        $("#" + ic.pre + "short_url_title").val(shorturl + '&t=' + ic.yournote);
-        if(!bPngHtml) me.htmlCls.dialogCls.openDlg('dl_copyurl', 'Copy a Share Link URL');
+
+        if(!bPngHtml) me.htmlCls.dialogCls.openDlg('dl_copyurl', 'Copy a Share Link URL or Jupyter Notebook Commands');
     }
 
     getShareLinkPrms(url, bPngHtml) { let ic = this.icn3d, me = ic.icn3dui;
@@ -67800,8 +68005,9 @@ class ShareLink {
         });
     }
 
-    shareLinkUrl(bAllCommands) { let ic = this.icn3d, me = ic.icn3dui;
+    shareLinkUrl(bAllCommands, bOutputCmd) { let ic = this.icn3d, me = ic.icn3dui;
            let url = me.htmlCls.baseUrl + "icn3d/full.html?";
+           let outputCmd = '';
            if(me.cfg.bSidebyside) url = me.htmlCls.baseUrl + "icn3d/full2.html?";
 
            if(ic.bInputUrlfile) {
@@ -67904,8 +68110,13 @@ class ShareLink {
 
            url += 'command=';
 
-           //let start =(inparaWithoutCommand !== undefined) ? 1 : 0;
-           let start = 0;
+           let start;
+           if(me.cfg.notebook) {
+                start =(inparaWithoutCommand !== undefined) ? 1 : 0;
+           }
+           else {
+                start = 0;
+           }
 
            if(bAllCommands || ic.bInputUrlfile) start = 0;
 
@@ -67971,17 +68182,18 @@ class ShareLink {
                prevCommandStr = commandStr;
            }
 
-           url += tmpUrl;
-
            // last command
            if(prevCommandStr) {
-               if(tmpUrl) url += '; ';
-               if(cntToggle > 0 && cntToggle %2 == 0 && prevCommandStr !== toggleStr) url += toggleStr + '; ';
+               if(tmpUrl) tmpUrl += '; ';
+               if(cntToggle > 0 && cntToggle %2 == 0 && prevCommandStr !== toggleStr) tmpUrl += toggleStr + '; ';
 
-               url += prevCommandStr + '|||' + ic.transformCls.getTransformationStr(transformation);
+               tmpUrl += prevCommandStr + '|||' + ic.transformCls.getTransformationStr(transformation);
                statefile += prevCommandStr + '|||' + ic.transformCls.getTransformationStr(transformation) + '\n';
            }
 
+           url += tmpUrl;
+           outputCmd = tmpUrl;
+
            statefile = statefile.replace(/!/g, Object.keys(ic.structures)[0] + '_');
            if((ic.bInputfile && !ic.bInputUrlfile) || (ic.bInputUrlfile && ic.bAppend) || url.length > 4000) url = statefile;
            let id;
@@ -67994,7 +68206,7 @@ class ShareLink {
                url = url.replace(new RegExp('blast_rep_id=!','g'), 'blast_rep_id=' + id + '_');
            }
 
-           return url;
+           return (bOutputCmd) ? outputCmd : url;
     }
 
     getPngText() { let ic = this.icn3d; ic.icn3dui;
@@ -70847,7 +71059,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.23.2';
+    this.REVISION = '3.24.0';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -71238,7 +71450,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
 
         ic.loadCmd = 'load alignment ' + me.cfg.align + ' | parameters ' + me.cfg.inpara;
         me.htmlCls.clickMenuCls.setLogCmd(ic.loadCmd, true);
-        if(me.cfg.inpara.indexOf('atype=2') == -1) {
+        if(me.cfg.inpara && me.cfg.inpara.indexOf('atype=2') == -1) {
             await ic.alignParserCls.downloadAlignment(me.cfg.align);
         }
         else {