icn3d 3.39.1 → 3.40.1

package/icn3d.js

@@ -8827,25 +8827,42 @@ class ClickMenu {
     }
 
     getHiddenMenusFromCache() { let me = this.icn3dui; me.icn3d;
-        me.htmlCls.shownMenus = {};
+      // me.htmlCls.shownMenus = {};
 
-        let idArrayStr = (localStorage) ? localStorage.getItem('hiddenmenus') : '';
-        
-        if(idArrayStr && idArrayStr != '[]') {
-            let idArray = JSON.parse(idArrayStr);
+      // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
 
-            // for(let i = 0, il = idArray.length; i < il; ++i) {
-            //     me.htmlCls.shownMenus[idArray[i]] = 1;
-            // }
-            for(let menu in me.htmlCls.allMenus) {
-                if(idArray.indexOf(menu) == -1) {
-                    me.htmlCls.shownMenus[menu] = 1;
-                }
+      let idArrayStr = (localStorage) ? localStorage.getItem('hiddenmenus') : '';
+      
+      if(idArrayStr && idArrayStr != '[]') {
+         me.htmlCls.shownMenus = {};
+
+         let idArray = JSON.parse(idArrayStr);
+
+         // for(let i = 0, il = idArray.length; i < il; ++i) {
+         //     me.htmlCls.shownMenus[idArray[i]] = 1;
+         // }
+         for(let menu in me.htmlCls.allMenus) {
+            if(idArray.indexOf(menu) == -1) {
+               me.htmlCls.shownMenus[menu] = 1;
             }
-        }
-        else {
-            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
-        }
+         }
+      }
+      //###
+      else {
+         me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+      }
+
+      // else {
+      //    if(mode == 'all') {
+      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+      //    }
+      //    else if(!mode || mode == 'simple') {
+      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+      //    }
+      //    else {
+      //       me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+      //    }
+      // }
     }
     
     displayShownMenus() { let me = this.icn3dui; me.icn3d;
@@ -9341,11 +9358,14 @@ class ClickMenu {
                 me.htmlCls.shownMenus[checkbox.value] = 1;
             }
 
+            me.htmlCls.setHtmlCls.setCookie('menumode', 'custom');
+
             thisClass.applyShownMenus();
          });
 
          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);
+            me.htmlCls.setHtmlCls.setCookie('menumode', 'simple');
 
             thisClass.applyShownMenus();
             thisClass.displayShownMenus();
@@ -9353,6 +9373,7 @@ class ClickMenu {
 
          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);
+            me.htmlCls.setHtmlCls.setCookie('menumode', 'all');
 
             thisClass.applyShownMenus();
             thisClass.displayShownMenus();
@@ -9402,15 +9423,16 @@ class ClickMenu {
 
                 thisClass.applyShownMenus();
                 thisClass.displayShownMenus();
+
+                me.htmlCls.setHtmlCls.setCookie('menumode', 'custom');
               };
               reader.readAsText(file);
             }
          });
 
-        me.myEventCls.onIds("#" + me.pre + "mn1_menuloadpref", "click", function(e) { me.icn3d; //e.preventDefault();
+        me.myEventCls.onIds(["#" + me.pre + "mn1_menuloadpref", "#" + me.pre + "loadpref", "#" + me.pre + "loadpref2"], "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();
            let url = ic.saveFileCls.getLinkToStructureSummary(true);
@@ -11249,6 +11271,51 @@ class SetMenu {
         return me.htmlCls.setHtmlCls.getRadioColor(radioid, id, text, color, bChecked, bSimpleMenu, selType);
     }
 
+    resetMenu(mode) { let me = this.icn3dui;
+        if(!mode || mode == 'simple') {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
+
+            me.htmlCls.clickMenuCls.applyShownMenus(); 
+        }
+        else if(mode == 'all') {
+            me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
+
+            me.htmlCls.clickMenuCls.applyShownMenus(); 
+        }
+        else if(mode == 'custom') {
+            me.htmlCls.dialogCls.openDlg('dl_menupref', 'Select Menus');
+
+            me.htmlCls.clickMenuCls.getHiddenMenusFromCache();
+
+            me.htmlCls.clickMenuCls.displayShownMenus();
+        }
+    }
+
+    setMenuMode(bMobile) { let me = this.icn3dui;
+        let spaceCss = (bMobile) ? "; padding-left:6px; background-color:#eee" : "; margin:3px; background-color:white";
+        let spaceCss2 = (bMobile) ? "; font-size:14px!important" : ""; 
+
+        let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+
+        let html = '<div class="icn3d-text" style="color:#f8b84e; font-weight:bold' + spaceCss + '">';
+        html += '<select name="menumode" id="' + me.pre + 'menumode" class="icn3d-text" style="color:#f8b84e; font-weight:bold; border:0px' + spaceCss2 + '">';
+        html += (mode == 'simple' || !mode) ? '<option value="simple" selected>Simple</option>' : '<option value="simple">Simple</option>';
+        html += (mode == 'all') ? '<option value="all" selected>All</option>' : '<option value="all">All</option>';
+        html += (mode == 'custom') ? '<option value="custom" selected>Custom</option>' : '<option value="custom">Custom</option>';
+        html += '</select>';
+
+        if(bMobile) {
+            html += '<br><span style="font-size:12px">&nbsp;Menus</span>';
+        }
+        else {
+            html += '&nbsp;Menus';
+        }
+
+        html += '</div>';
+
+        return html;
+    }
+
     //Set the HTML code for the menus shown at the top of the viewer.
     setTopMenusHtml(id, str1, str2) { let me = this.icn3dui;
         if(me.bNode) return '';
@@ -11268,6 +11335,9 @@ class SetMenu {
         html += "<table border='0' cellpadding='0' cellspacing='0' width='100'><tr>";
 
         let tdStr = '<td valign="top">';
+
+        // html += tdStr + this.setMenuMode() + '</td>';
+
         html += tdStr + this.setMenu1() + '</td>';
 
         html += tdStr + this.setMenu2() + '</td>';
@@ -11280,7 +11350,11 @@ class SetMenu {
         //html += tdStr + this.setMenu5b() + '</td>';
         html += tdStr + this.setMenu6() + '</td>';
 
-        me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
+        // reset the menus at the end of the menus
+        // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+        // this.resetMenu(mode);
+
+        // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
 
         html += tdStr + "<div style='position:relative; margin-left:6px;'>" + str1;
         html += "<div class='icn3d-commandTitle' style='min-width:40px; margin-top: 3px; white-space: nowrap;'>" + str2;
@@ -11376,6 +11450,7 @@ class SetMenu {
 
         //html += "<div class='icn3d-menu'>";
         html += "<div>";
+
         html += "<accordion id='" + me.pre + "accordion0' class='icn3d-accordion'>";
         if(me.cfg.notebook) {
             html += "<h3 style='width:20px; height:24px; position:relative; padding: 0'><span style='position:absolute; left:3px; top:4px;'>&#9776;</span></h3>";
@@ -11385,6 +11460,8 @@ class SetMenu {
         }
         html += "<div>";
 
+        // html += '<li>' + this.setMenuMode(true);
+
         let liStr = "<li><span class='icn3d-menu-color'";
 
         html += "<ul class='icn3d-mn-item'>";
@@ -11403,7 +11480,11 @@ class SetMenu {
         html += liStr + ">Help</span>";
         html += this.setMenu6_base();
 
-        me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
+        // reset the menus at the end of the menus
+        // let mode = me.htmlCls.setHtmlCls.getCookie('menumode');
+        // this.resetMenu(mode);
+
+        // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus); 
 
         html += "<li><div style='position:relative; margin-top:-6px;'>" + str1;
         html += "<div class='icn3d-commandTitle' style='margin-top: 3px; white-space: nowrap;'>" + str2;
@@ -11580,7 +11661,7 @@ class SetMenu {
         // Analysis menu
         html += tdStrBorder + this.setIcon(iconType, 'tool_selectannotations', 'Sequences & Annotations', 'grip-lines') + "</td>";
         html += tdStr + this.setIcon(iconType, 'hbondsYes', 'Interactions', 'users') + "</td>";
-        html += tdStr + this.setIcon(iconType, 'tool_delphi', 'Delphi Potentials', 'cloud-meatball') + "</td>";
+        html += tdStr + this.setIcon(iconType, 'tool_delphi', 'DelPhi Potentials', 'cloud-meatball') + "</td>";
         html += tdStr + this.setIcon(iconType, 'removeLabels', 'Remove Labels', 'remove-format') + "</td>";
 
         // Help menu
@@ -12792,6 +12873,10 @@ class SetMenu {
 
         html += "<ul class='icn3d-mn-item'>";
 
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.getLink('mn2_2ddepiction', '2D Depiction ' + me.htmlCls.wifiStr, 1, 1);
+        }
+
         if(me.cfg.cid === undefined) {
             html += this.getLink('mn6_selectannotations', 'Seq. & Annotations ' + me.htmlCls.wifiStr, 1, 1);
 
@@ -13593,7 +13678,7 @@ class Dialog {
                 width='50%';
             }
             else if(id === me.pre + 'dl_menupref') {
-                width = 600;
+                width = 800;
                 height = 500;
             }
             
@@ -14254,6 +14339,10 @@ class SetDialog {
         html += me.htmlCls.divStr + "dl_collection_file' style=''>";
         html += "You can load a collection of structures via a file. Here are <a href='https://github.com/ncbi/icn3d/blob/master/example/collection/' target='_blank'>some example files</a><br><br>";
         html += "Collection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "collectionfile'><br/>";
+        html += "<input type='radio' id='dl_collectionAppendStructureNone' name='appendStructure' value='none' checked/>";
+        html += "<label for='dl_collectionAppendStructureNone'>Default</label>";
+        html += "<input type='radio' id='dl_collectionAppendStructure' name='appendStructure' value='append' />";
+        html += "<label for='dl_collectionAppendStructure'>Append</label><br/>";
         html += me.htmlCls.buttonStr + "reload_collectionfile' style='margin-top: 6px;'>Load</button>";
         html += "</div>";
         html += "</div>";
@@ -14261,7 +14350,8 @@ class SetDialog {
         html += me.htmlCls.divStr + "dl_collection_structures' style='display: none'>";
         html += "<select id='" + me.pre + "collections_menu'multiple size='6' style='min-width:300px;'></select>";
         html += '<br/>';
-        html += me.htmlCls.buttonStr + "opendl_export_collections'>Export</button>";
+        html += me.htmlCls.buttonStr + "collections_clear_commands' style='margin-top: 6px;'>Clear Commands</button>";
+        html += me.htmlCls.buttonStr + "opendl_export_collections'>Export JSON</button>";
         html += "</div>";
         html += '<br/>'; 
         html += "</div>";
@@ -14616,24 +14706,30 @@ class SetDialog {
         html += "</div>";
 
 
-        html += me.htmlCls.divStr + "dl_ligplot' sty2D Interaction for One Ligand/Residule='background-color:white' class='" + dialogClass + "'>";
-        html += this.addNotebookTitle('dl_ligplot', 'e with Atom Details');
+        html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
+
+        if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
+            html += this.addNotebookTitle('dl_ligplot', '2D Depiction for Chemicals');
+        }
+        else {
+            html += this.addNotebookTitle('dl_ligplot', '2D Interaction for One Ligand/Residue with Atom Details');
 
-        html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
+            html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
 
-        html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
-          + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
-          + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
+            html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+            + me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
+            + me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
 
-        html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
+            html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
 
-        // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
-        // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
-        html += "<b>Color legend</b> for interactions (dashed lines): <br>";
+            // html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
+            // html += "Mouseover the dashed lines to see interaction types and distances.<br>";
+            html += "<b>Color legend</b> for interactions (dashed lines): <br>";
 
-        html += me.htmlCls.setHtmlCls.setColorHints();
+            html += me.htmlCls.setHtmlCls.setColorHints();
 
-        html += "<br></div>";
+            html += "<br></div>";
+        }
 
         me.ligplotid = me.pre + 'ligplot';
         html += me.htmlCls.divNowrapStr + buttonStrTmp + me.ligplotid + '_svg">SVG</button>' + me.htmlCls.space2;
@@ -14960,13 +15056,15 @@ class SetDialog {
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_menupref'>Apply</button></span>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "reset_menupref' style='margin-left:30px'>Reset to Simple Menus</button></span>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "reset_menupref_all' style='margin-left:30px'>Reset to All Menus</button></span>";
-        html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "savepref' style='margin-left:30px'>Save Preferences</button></span><br><br>";
+        html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "savepref' style='margin-left:30px'>Save Preferences</button></span>";
+        html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "loadpref' style='margin-left:30px'>Load Preferences</button></span><br><br>";
 
         html += "<div id='" + me.pre + "menulist'></div><br><br>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_menupref2'>Apply</button></span>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "reset_menupref2' style='margin-left:30px'>Reset to Simple Menus</button></span>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "reset_menupref_all2' style='margin-left:30px'>Reset to All Menus</button></span>";
         html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "savepref2' style='margin-left:30px'>Save Preferences</button></span>";
+        html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "loadpref2' style='margin-left:30px'>Load Preferences</button></span>";
         html += "</div>";
 
         html += me.htmlCls.divStr + "dl_addtrack' class='" + dialogClass + "'>";
@@ -15742,6 +15840,14 @@ class Events {
         me.htmlCls.clickMenuCls.clickMenu5();
         me.htmlCls.clickMenuCls.clickMenu6();
 
+        me.myEventCls.onIds("#" + me.pre + "menumode", "change", async function(e) { me.icn3d;
+            e.preventDefault();
+            let mode = $("#" + me.pre + "menumode").val();
+
+            me.htmlCls.setHtmlCls.setCookie('menumode', mode);
+            me.htmlCls.setMenuCls.resetMenu(mode);
+        });
+
         // back and forward arrows
         me.myEventCls.onIds(["#" + me.pre + "back", "#" + me.pre + "mn6_back"], "click", async function(e) { let ic = me.icn3d;
            e.preventDefault();
@@ -16019,6 +16125,11 @@ class Events {
              thisClass.setLogCmd("view interactions", true);
         });
 
+        me.myEventCls.onIds("#" + me.pre + "mn2_2ddepiction", "click", async function(e) { let ic = me.icn3d;
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
+            thisClass.setLogCmd("view 2d depiction", true);
+       });
+
         me.myEventCls.onIds("#" + me.pre + "search_seq_button", "click", async function(e) { me.icn3d;
            e.stopImmediatePropagation();
            await thisClass.searchSeq();
@@ -16783,95 +16894,108 @@ class Events {
             } else {
                 ic.resizeCanvasCls.closeDialogs();
                 }
-            ic.bInputfile = false;
-            ic.pdbCollection = [];
-            ic.allData = {};
-            ic.allData['all'] = {
-                'atoms': {},
-                'proteins': {},
-                'nucleotides': {},
-                'chemicals': {},
-                'ions': {},
-                'water': {},
-                'structures': {}, // getSSExpandedAtoms
-                'ssbondpnts': {},
-                'residues': {}, // getSSExpandedAtoms
-                'chains': {},
-                'chainsSeq': {}, //Sequences and Annotation
-                'defNames2Atoms': {},
-                'defNames2Residues': {}
-            };
-            ic.allData['prev'] = {};
-            ic.selectCollectionsCls.reset();
-
+                
             ic.dAtoms = me.hashUtilsCls.cloneHash(ic.atoms);
             ic.hAtoms = me.hashUtilsCls.cloneHash(ic.atoms);
             me.htmlCls.setHtmlCls.fileSupport();
 
             let fileName = file.name;
             let fileExtension = fileName.split('.').pop().toLowerCase();
-
+            let collection = {};
+            
             $("#" + ic.pre + "collections_menu").empty();
             $("#" + ic.pre + "collections_menu").off("change");
+                
+            if (dl_collectionAppendStructureNone.checked || ic.allData === undefined) {
+                ic.bInputfile = false;
+                ic.pdbCollection = {};
+                ic.allData = {};
+                ic.allData['all'] = {
+                    'atoms': {},
+                    'proteins': {},
+                    'nucleotides': {},
+                    'chemicals': {},
+                    'ions': {},
+                    'water': {},
+                    'structures': {}, // getSSExpandedAtoms
+                    'ssbondpnts': {},
+                    'residues': {}, // getSSExpandedAtoms
+                    'chains': {},
+                    'chainsSeq': {}, //Sequences and Annotation
+                    'defNames2Atoms': {},
+                    'defNames2Residues': {}
+                };
+                ic.allData['prev'] = {};
+                ic.selectCollectionsCls.reset();
+
+            } else {
+                if (ic.collections) {
+                    collection = ic.collections;
+                }
+            }
 
             function parseJsonCollection(data) {
                 let dataStr = JSON.parse(data);
-                return dataStr["structures"].map(({ id, title, description, commands }) => {
+                let parsedCollection = {};
+
+                dataStr["structures"].map(({ id, title, description, commands }) => {
                     if (id && id.includes('.pdb')) {
                         id = id.split('.pdb')[0];
                     }
-                    return [id, title, description, commands, false];
+                    parsedCollection[id] = [id, title, description, commands, false];
                 });
-            }
 
+                return parsedCollection;
+            }
+            
             function parsePdbCollection(data, description = '', commands = []) {         
                 let dataStr = data;
                 let lines = dataStr.split('\n');
-              
                 let sections = [];
                 let currentSection = [];
-              
+                
                 lines.forEach(line => {
-                  if (line.startsWith('HEADER')) {
+                    if (line.startsWith('HEADER')) {
                     currentSection = [];
                     sections.push(currentSection);
-                  }
-                  currentSection.push(line);
+                    }
+                    currentSection.push(line);
                 });
-              
-                let ids = [];
-                let titles = [];
-              
+        
+                
+                let parsedCollection = {};
+                
                 sections.forEach((section) => {
-                    let headerLine = section[0];
-                    headerLine = headerLine.replace(/[\n\r]/g, '').trim();
+                    let headerLine = section[0].replace(/[\n\r]/g, '').trim();
                     let header = headerLine.split(' ').filter(Boolean);
-                    let lastElement = header[header.length - 1];
-                    ids.push(lastElement);
-                    titles.push(section[1].startsWith('TITLE') ? section[1].split('TITLE').pop().trim() : lastElement);
+                    let id = header[header.length - 1];
+                    let title = section[1].startsWith('TITLE') ? section[1].split('TITLE').pop().trim() : id;
+
+                    parsedCollection[id] = [id, title, description, commands, true];
+
+                    const sanitizedSection = section.map(line => line.trim());
+                    ic.pdbCollection[id] = sanitizedSection;
                 });
-              
-                if (sections.length > 0) {
-                    ic.pdbCollection.push(...sections);
-                }
 
-                return ids.map((id, index, description, commands) => [id, titles[index], description, commands, true]);
+                return parsedCollection;
             }
 
-            let collection = [];
-
             if (fileExtension === 'json' || fileExtension === 'pdb') {
                 let reader = new FileReader();
                 reader.onload = async function (e) {
                     if (fileExtension === 'json') {
-                        collection = parseJsonCollection(e.target.result);
+                        let jsonCollection = parseJsonCollection(e.target.result);
+                        collection = { ...collection, ...jsonCollection };
                     } else if (fileExtension === 'pdb') {
                         ic.bInputfile = true;
-                        collection = parsePdbCollection(e.target.result);
+                        let pdbCollection = parsePdbCollection(e.target.result);
+                        collection = { ...collection, ...pdbCollection };
                     }
 
                     let collectionHtml = await ic.selectCollectionsCls.setAtomMenu(collection);
 
+                    ic.collections = collection;
+
                     $("#" + ic.pre + "collections_menu").html(collectionHtml);
                     await ic.selectCollectionsCls.clickStructure(collection);
                     $("#" + ic.pre + "collections_menu").trigger("change");     
@@ -16889,7 +17013,7 @@ class Events {
                 let reader2 = new FileReader();
                 reader2.onload = async function (e) {
                     if (fileExtension === 'zip') {
-                        let url = './script/jszip.js';
+                        let url = './script/jszip.min.js';
                         await me.getAjaxPromise(url, 'script');
 
                         let jszip = new JSZip();
@@ -16923,7 +17047,8 @@ class Events {
                                 let jsonCollection = [];
                                 for (const file of jsonFiles) {
                                     let fileData = await file.async('text');
-                                    parseJsonCollection(fileData).forEach(element => {
+                                    let parsedJson = Object.values(parseJsonCollection(fileData));
+                                    parsedJson.forEach(element => {
                                         jsonCollection.push(element);
                                     });
                                 }
@@ -16933,8 +17058,9 @@ class Events {
                                     let matchingPdbFile = pdbFiles.find(file => file.name.toLowerCase().includes(id.toLowerCase()));
                                     if (matchingPdbFile) {
                                         let pdbFileData = await matchingPdbFile.async('text');
-                                        parsePdbCollection(pdbFileData, description, commands).forEach(element => {
-                                            collection.push(element);
+                                        let parsedPdb = Object.values(parsePdbCollection(pdbFileData, description, commands));
+                                        parsedPdb.forEach(element => {
+                                            collection[id] = element;
                                         });
                                     }
                                 }
@@ -16943,27 +17069,30 @@ class Events {
                                 // Do something if only JSON files are present
                                 jsonFiles.forEach(async file => {
                                     let fileData = await file.async('text');
-                                    parseJsonCollection(fileData).forEach(element => {
-                                        collection.push(element);
+                                    const parsedJson = Object.values(parseJsonCollection(fileData));
+                                    parsedJson.forEach(element => {
+                                        collection[element[0]] = element;
                                     });
                                 });
                             } else if (hasPdb) {
                                 // Do something if only PDB files are present
                                 pdbFiles.forEach(async file => {
                                     let fileData = await file.async('text');
-                                    parsePdbCollection(fileData).forEach(element => {
-                                        collection.push(element);
+                                    const parsedPdb = Object.values(parsedPdbCollection(fileData));
+                                    parsedPdb.forEach(element => {
+                                        collection[element[0]] = element;
                                     });
                                 });
                             } else if (hasGz) {
-                                let url = './script/pako.js';
+                                let url = './script/pako.min.js';
                                 await me.getAjaxPromise(url, 'script');
                                 try {
                                     for (const file of gzFiles) {
                                         let compressed = await file.async('uint8array');
                                         let decompressed = pako.inflate(compressed, { to: 'string' });
-                                        parsePdbCollection(decompressed).forEach(element => {
-                                            collection.push(element);
+                                        const parsedPdb = Object.values(parsePdbCollection(decompressed));
+                                        parsedPdb.forEach(element => {
+                                            collection[element[0]] = element;
                                         });
                                     }
                                 } catch (error) {
@@ -16974,7 +17103,7 @@ class Events {
                             console.error('Error loading ZIP file', error);
                         }
                     } else if (fileExtension === 'gz') {
-                        let url = './script/pako.js';
+                        let url = './script/pako.min.js';
                         await me.getAjaxPromise(url, 'script');
                         
                         try {
@@ -16991,6 +17120,8 @@ class Events {
                     $("#" + ic.pre + "collections_menu").html(collectionHtml);
                     await ic.selectCollectionsCls.clickStructure(collection);
 
+                    ic.collections = collection;
+
                     $("#" + ic.pre + "collections_menu").trigger("change");
 
                     me.htmlCls.clickMenuCls.setLogCmd(
@@ -17009,7 +17140,7 @@ class Events {
                 throw new Error('Invalid file type');
             }
             
-            if (Object.keys(me.utilsCls.getStructures(ic.dAtoms))){
+            if (ic.allData && Object.keys(ic.allData).length > 0) {
                 $("#" + me.pre + "dl_collection_file").hide();
                 $("#" + me.pre + "dl_collection_structures").show();
                 $("#" + me.pre + "dl_collection_file_expand").show();
@@ -17030,6 +17161,17 @@ class Events {
             }
         });
 
+        me.myEventCls.onIds("#" + me.pre + "collections_clear_commands", "click", function (e) {
+            var selectedValues = $("#" + ic.pre + "collections_menu").val();
+            selectedValues.forEach(function (selectedValue) {
+                if (ic.allData[selectedValue]) {
+                    ic.allData[selectedValue]['commands'] = [];
+                } else {
+                    console.warn("No data found for selectedValue:", selectedValue);
+                }
+            });
+        });
+
         me.myEventCls.onIds("#" + me.pre + "opendl_export_collections", "click", function (e) {
             me.htmlCls.dialogCls.openDlg("dl_export_collections", "Export Collections");
         });
@@ -19516,9 +19658,9 @@ class SetHtml {
 
             let pdbstr = '';
 
-            let bMergeIntoOne = true;
-            pdbstr += ic.saveFileCls.getAtomPDB(atomHash, undefined, undefined, undefined, undefined, undefined, bMergeIntoOne);
-            pdbstr += ic.saveFileCls.getAtomPDB(ionHash, true, undefined, true);
+            let bMergeIntoOne = true, bOneLetterChain = true;
+            pdbstr +=(me.cfg.cid) ? ic.saveFileCls.getAtomPDB(atomHash, true, undefined, undefined, undefined, undefined, bMergeIntoOne, bOneLetterChain) : ic.saveFileCls.getAtomPDB(atomHash, undefined, undefined, undefined, undefined, undefined, bMergeIntoOne, bOneLetterChain);
+            pdbstr += ic.saveFileCls.getAtomPDB(ionHash, true, undefined, true, undefined, undefined, bMergeIntoOne, bOneLetterChain);
 
             let url = me.htmlCls.baseUrl + "delphi/delphi.cgi";
 
@@ -27222,6 +27364,8 @@ class Camera {
                 }
             }
 
+            // ic.cam.add(ic.directionalLight);
+
             ic.cam.updateProjectionMatrix();
     //    }
     }
@@ -28720,687 +28864,233 @@ class Stick {
  * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
  */
 
-class Strand {
+class FirstAtomObj {
     constructor(icn3d) {
         this.icn3d = icn3d;
     }
 
-    // significantly modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
-    //Create the style of ribbon or strand for "atoms". "num" means how many lines define the curve.
-    //"num" is 2 for ribbon and 6 for strand. "div" means how many pnts are used to smooth the curve.
-    //It's typically 5. "coilWidth" is the width of curve for coil. "helixSheetWidth" is the width of curve for helix or sheet.
-    //"doNotSmoothen" is a flag to smooth the curve or not. "thickness" is the thickness of the curve.
-    //"bHighlight" is an option to draw the highlight for these atoms. The highlight could be outlines
-    //with bHighlight=1 and 3D objects with bHighlight=2.
-    createStrand(atoms, num, div, fill, coilWidth, helixSheetWidth, doNotSmoothen, thickness, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
-        if(me.bNode) return;
+    //Return the first atom in the atom hash, which has the atom serial number as the key.
+    getFirstAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
+            return undefined;
+        }
 
-        let bRibbon = fill ? true: false;
+        let atomKeys = Object.keys(atomsHash);
+        let firstIndex = atomKeys[0];
 
-        // when highlight, the input atoms may only include one rediue.
-        // add one extra residue to show the strand
-        let atomsAdjust = {};
+        return ic.atoms[firstIndex];
+    }
 
-        let residueHashTmp = ic.firstAtomObjCls.getResiduesFromAtoms(atoms);
-        if( Object.keys(residueHashTmp).length  == 1) {
-            atomsAdjust = this.getOneExtraResidue(residueHashTmp);
+    // n is the position of the selected atom
+    getMiddleAtomObj(atomsHash, n) { let ic = this.icn3d; ic.icn3dui;
+        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
+            return undefined;
         }
-        else {
-            atomsAdjust = atoms;
+
+        let atomKeys = Object.keys(atomsHash);
+        let middleIndex = (n && n < atomKeys.length) ? atomKeys[n] : atomKeys[parseInt(atomKeys.length / 2)];
+
+        return ic.atoms[middleIndex];
+    }
+
+    getFirstCalphaAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
+            return undefined;
         }
 
-        if(bHighlight === 2) {
-            if(fill) {
-                fill = false;
-                num = null;
-                div = null;
-                coilWidth = null;
-                helixSheetWidth = null;
-                thickness = undefined;
+        let firstIndex;
+
+        for(let i in atomsHash) {
+            if(ic.atoms[i].name == 'CA') {
+                firstIndex = i;
+                break;
             }
-            else {
-                fill = true;
-                num = 2;
-                div = undefined;
-                coilWidth = undefined;
-                helixSheetWidth = undefined;
-                thickness = ic.ribbonthickness;
+        }
+
+        if(!firstIndex) {
+            for(let i in atomsHash) {
+                if(ic.atoms[i].name == "O3'" || ic.atoms[i].name == "O3*") {
+                    firstIndex = i;
+                    break;
+                }
             }
         }
 
-        num = num || ic.strandDIV;
-        div = div || ic.axisDIV;
-        coilWidth = coilWidth || ic.coilWidth;
-        doNotSmoothen = doNotSmoothen || false;
-        helixSheetWidth = helixSheetWidth || ic.helixSheetWidth;
-        let pnts = {}; for (let k = 0; k < num; ++k) pnts[k] = [];
-        let pntsCA = [];
-        let prevCOArray = [];
-        let bShowArray = [];
-        let calphaIdArray = []; // used to store one of the final positions drawn in 3D
-        let colors = [];
-        let currentChain, currentResi, currentCA = null, currentO = null, currentColor = null, prevCoorCA = null, prevCoorO = null, prevColor = null;
-        let prevCO = null, ss = null, ssend = false, atomid = null, prevAtomid = null, prevAtomSelected = null, prevResi = null, calphaid = null, prevCalphaid = null;
-        let strandWidth, bSheetSegment = false, bHelixSegment = false;
+        return (firstIndex !== undefined) ? ic.atoms[firstIndex] : this.getFirstAtomObj(atomsHash);
+    }
 
-        // For each chain, test the first 30 atoms to see whether only C-alpha is available
-        let bCalphaOnlyHash = {};
-        for(let chainid in ic.chains) {
-            let atoms = me.hashUtilsCls.hash2Atoms(ic.chains[chainid], ic.atoms);
-            let bCalphaOnly = me.utilsCls.isCalphaPhosOnly(atoms); //, 'CA');
-            bCalphaOnlyHash[chainid] = bCalphaOnly;
+    getFirstAtomObjByName(atomsHash, atomName) { let ic = this.icn3d; ic.icn3dui;
+        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
+            return ic.atoms[0];
         }
 
-        // when highlight, draw whole beta sheet and use bShowArray to show the highlight part
-        let residueHash = {};
-        for(let i in atomsAdjust) {
-            let atom = ic.atoms[i];
+        let firstIndex;
 
-            let residueid = atom.structure + '_' + atom.chain + '_' + atom.resi;
-            residueHash[residueid] = 1;
+        for(let i in atomsHash) {
+            if(ic.atoms[i].name == atomName) {
+                firstIndex = i;
+                break;
+            }
         }
-        Object.keys(residueHash).length;
-
-        let bFullAtom = (Object.keys(ic.hAtoms).length == Object.keys(ic.atoms).length) ? true : false;
 
-        let caArray = []; // record all C-alpha atoms to predict the helix
+        return (firstIndex !== undefined) ? ic.atoms[firstIndex] : undefined;
+    }
 
-        let maxDist = 6.0;
+    //Return the last atom in the atom hash, which has the atom serial number as the key.
+    getLastAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
+            return ic.atoms[0];
+        }
 
-        //get the last residue
-        let atomArray = Object.keys(atomsAdjust);
-        let lastAtomSerial = atomArray[atomArray.length - 1];
-        let lastAtom = ic.atoms[lastAtomSerial];
-        let lastResid = lastAtom.structure + '_' + lastAtom.chain + '_' + lastAtom.resi;
+        let atomKeys = Object.keys(atomsHash);
+        let lastIndex = atomKeys[atomKeys.length - 1];
 
-        for (let i in atomsAdjust) {
-          let atom = ic.atoms[i];
-          let chainid = atom.structure + '_' + atom.chain;
-          let resid = atom.structure + '_' + atom.chain + '_' + atom.resi;
-          if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
-            // "CA" has to appear before "O"
+        return ic.atoms[lastIndex];
+    }
 
-            if (atom.name === 'CA') {
-                if ( atoms.hasOwnProperty(i) && ((atom.ss !== 'helix' && atom.ss !== 'sheet') || atom.ssend || atom.ssbegin) ) ;
+    //Return the residue hash from the atom hash. The residue hash has the resid as the key and 1 as the value.
+    getResiduesFromAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        let residuesHash = {};
+        for(let i in atomsHash) {
+            let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
+            residuesHash[residueid] = 1;
+        }
 
-                currentCA = atom.coord;
-                currentColor = atom.color;
-                calphaid = atom.serial;
+        return residuesHash;
+    }
 
-                caArray.push(atom.serial);
+    getResiduesFromCalphaAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        let residuesHash = {};
+        for(let i in atomsHash) {
+            if((ic.atoms[i].name == 'CA' && ic.proteins.hasOwnProperty(i)) || !ic.proteins.hasOwnProperty(i)) {
+                let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
+                //residuesHash[residueid] = 1;
+                residuesHash[residueid] = ic.atoms[i].resn;
             }
+        }
 
-            if (atom.name === 'O' || (bCalphaOnlyHash[chainid] && atom.name === 'CA')) {
-                if(currentCA === null || currentCA === undefined) {
-                    currentCA = atom.coord;
-                    currentColor = atom.color;
-                    calphaid = atom.serial;
-                }
+        return residuesHash;
+    }
 
-                if(atom.name === 'O') {
-                    currentO = atom.coord;
-                }
-                // smoothen each coil, helix and sheet separately. The joint residue has to be included both in the previous and next segment
-               
-                // let bSameChain = true;
-                // if (currentChain !== atom.chain) {
-                // //if (currentChain !== atom.chain) {
-                //     bSameChain = false;
-                // }
+    //Return the chain hash from the atom hash. The chain hash has the chainid as the key and 1 as the value.
+    getChainsFromAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
+        let chainsHash = {};
+        for(let i in atomsHash) {
+           let atom = ic.atoms[i];
+           let chainid = atom.structure + "_" + atom.chain;
 
-                if(atom.ssend && atom.ss === 'sheet') {
-                    bSheetSegment = true;
-                }
-                else if( (atom.ssend && atom.ss === 'helix') || resid == lastResid) { // partial sheet will draw as helix
-                    bHelixSegment = true;
-                }
+           chainsHash[chainid] = 1;
+        }
 
-                // assign the previous residue
-                if(prevCoorO) {
-                    if(bHighlight === 1 || bHighlight === 2) {
-                        colors.push(ic.hColor);
-                    }
-                    else {
-                        colors.push(prevColor);
-                    }
+        return chainsHash;
+    }
 
-                    if(ss !== 'coil' && atom.ss === 'coil') {
-                        strandWidth = coilWidth;
-                    }
-                    else if(ssend && atom.ssbegin) { // a transition between two ss
-                        strandWidth = coilWidth;
-                    }
-                    else {
-                        strandWidth = (ss === 'coil') ? coilWidth : helixSheetWidth;
-                    }
+    getAtomFromResi(resid, atomName) { let ic = this.icn3d; ic.icn3dui;
+        if(ic.residues.hasOwnProperty(resid)) {
+            for(let i in ic.residues[resid]) {
+                if(ic.atoms[i].name === atomName && !ic.atoms[i].het) {
+                    return ic.atoms[i];
+                }
+            }
+        }
 
-                    let O, oldCA, resSpan = 4;
-                    if(atom.name === 'O') {
-                        O = prevCoorO.clone();
-                        if(prevCoorCA !== null && prevCoorCA !== undefined) {
-                            O.sub(prevCoorCA);
-                        }
-                        else {
-                            prevCoorCA = prevCoorO.clone();
-                            if(caArray.length > resSpan + 1) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
-                                O = prevCoorCA.clone();
-                                oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan - 1]].coord.clone();
-                                //O.sub(oldCA);
-                                oldCA.sub(O);
-                            }
-                            else {
-                                O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
-                            }
-                        }
-                    }
-                    else if(bCalphaOnlyHash[chainid] && atom.name === 'CA') {
-                        if(caArray.length > resSpan + 1) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
-                            O = prevCoorCA.clone();
-                            oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan - 1]].coord.clone();
-                            //O.sub(oldCA);
-                            oldCA.sub(O);
-                        }
-                        else {
-                            O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
-                        }
-                    }
+        return undefined;
+    }
 
-                    O.normalize(); // can be omitted for performance
-                    O.multiplyScalar(strandWidth);
-                    if (prevCO !== null && O.dot(prevCO) < 0) O.negate();
-                    prevCO = O;
+    getAtomCoordFromResi(resid, atomName) { let ic = this.icn3d; ic.icn3dui;
+        let atom = this.getAtomFromResi(resid, atomName);
+        if(atom !== undefined) {
+            let coord = (atom.coord2 !== undefined) ? atom.coord2 : atom.coord;
 
-                    for (let j = 0, numM1Inv2 = 2 / (num - 1); j < num; ++j) {
-                        let delta = -1 + numM1Inv2 * j;
-                        let v = new THREE.Vector3(prevCoorCA.x + prevCO.x * delta, prevCoorCA.y + prevCO.y * delta, prevCoorCA.z + prevCO.z * delta);
-                        if (!doNotSmoothen && ss === 'sheet') v.smoothen = true;
-                        pnts[j].push(v);
-                    }
+            return coord;
+        }
 
-                    pntsCA.push(prevCoorCA);
-                    prevCOArray.push(prevCO);
+        return undefined;
+    }
+}
 
-                    if(atoms.hasOwnProperty(prevAtomid)) {
-                        bShowArray.push(prevResi);
-                        calphaIdArray.push(prevCalphaid);
-                    }
-                    else {
-                        bShowArray.push(0);
-                        calphaIdArray.push(0);
-                    }
-                }
+/**
+ * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
+ */
 
-                //let bBrokenSs =  ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 !== ic.ParserUtilsCls.getResiNCBI(chainid, atom.resi) || (prevCoorCA && Math.abs(currentCA.x - prevCoorCA.x) > maxDist) || (prevCoorCA && Math.abs(currentCA.y - prevCoorCA.y) > maxDist) || (prevCoorCA && Math.abs(currentCA.z - prevCoorCA.z) > maxDist);
+class Strip {
+    constructor(icn3d) {
+        this.icn3d = icn3d;
+    }
 
-                let prevCoor = (prevAtomSelected) ? prevAtomSelected.coord : undefined;
-                
-                let bBrokenSs =  ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 !== ic.ParserUtilsCls.getResiNCBI(chainid, atom.resi) || (prevCoor && Math.abs(currentCA.x - prevCoor.x) > maxDist) || (prevCoor && Math.abs(currentCA.y - prevCoor.y) > maxDist) || (prevCoor && Math.abs(currentCA.z - prevCoor.z) > maxDist);
-
-                // check whether the atoms are continuous
-                // atomsAdjusted has all atoms in the secondary structure
-                // atoms has all selected atoms
-                // let bBrokenSs = false;
-                // if(prevAtomSelected && prevAtomid == prevAtomSelected.serial && !atoms.hasOwnProperty(atom.serial)) {
-                //     bBrokenSs = true;                  
-                // }
+    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
+    createStrip(p0, p1, colors, div, thickness, bHighlight, bNoSmoothen, bShowArray,
+      calphaIdArray, positions, prevone, nexttwo, pntsCA, prevCOArray) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
 
+        if (p0.length < 2) return;
+        div = div || ic.axisDIV;
 
-                // The following code didn't work to select one residue
-                // let bBrokenSs = !atoms.hasOwnProperty(atom.serial) || (prevCoorCA && Math.abs(currentCA.x - prevCoorCA.x) > maxDist) || (prevCoorCA && Math.abs(currentCA.y - prevCoorCA.y) > maxDist) || (prevCoorCA && Math.abs(currentCA.z - prevCoorCA.z) > maxDist);
+        // if(pntsCA && ic.bDoublecolor && !ic.bCalphaOnly) {
+        if(pntsCA && ic.bDoublecolor) {
+            let bExtendLastRes = false; //true;
 
-                // if(bBrokenSs && atom.ss === 'sheet') {
-                //     bSheetSegment = true;
-                // }
-                // else if(bBrokenSs && atom.ss === 'helix') {
-                //     bHelixSegment = true;
-                // }
+            let pnts_clrs = me.subdivideCls.subdivide(pntsCA, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
+            pntsCA = pnts_clrs[0];
 
-                //if ((atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs) && pnts[0].length > 0 && bSameChain) {
-                // if ((currentChain !== atom.chain || atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs || resid == lastResid) && pnts[0].length > 0) { // last coil was not drawn correctly, e.g., in 1TOP
+            this.setCalphaDrawnCoord(pntsCA, div, calphaIdArray);
 
-                if ((currentChain !== atom.chain || atom.ssbegin || atom.ssend || bBrokenSs || (resid == lastResid && atom.ss != 'coil')) && pnts[0].length > 0) {
-                    let atomName = 'CA';
-                
-                    let prevone = [], nexttwo = [];
+            for(let i = 0, il = prevCOArray.length; i < il; ++i) {
+                prevCOArray[i].normalize();
+            }
 
-                    if(isNaN(ic.atoms[prevAtomid].resi)) {
-                        prevone = [];
-                    }
-                    else {
-                        let prevoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) - 1).toString();
-                        let prevoneCoord = ic.firstAtomObjCls.getAtomCoordFromResi(prevoneResid, atomName);
-                        prevone = (prevoneCoord !== undefined) ? [prevoneCoord] : [];
-                    }
+            let pnts_clrs2 = me.subdivideCls.subdivide(prevCOArray, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
+            prevCOArray = pnts_clrs2[0];
 
-                    if(!isNaN(ic.atoms[prevAtomid].resi)) {
-                        let nextoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) + 1).toString();
-                        let nextoneCoord = ic.firstAtomObjCls.getAtomCoordFromResi(nextoneResid, atomName);
-                        if(nextoneCoord !== undefined) {
-                            nexttwo.push(nextoneCoord);
-                        }
+            colors = pnts_clrs[2];
+        }
+        else {
 
-                        let nexttwoResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) + 2).toString();
-                        let nexttwoCoord = ic.firstAtomObjCls.getAtomCoordFromResi(nexttwoResid, atomName);
-                        if(nexttwoCoord !== undefined) {
-                            nexttwo.push(nexttwoCoord);
-                        }
-                    }
+            if(!bNoSmoothen) {
+                //var bExtendLastRes = true;
+                let bExtendLastRes = false;
+                let pnts_clrs0 = me.subdivideCls.subdivide(p0, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
+                let pnts_clrs1 = me.subdivideCls.subdivide(p1, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
+                p0 = pnts_clrs0[0];
+                p1 = pnts_clrs1[0];
+                colors = pnts_clrs0[2];
+            }
+            if (p0.length < 2) return;
 
-                    // include the current residue
-                    if(!bBrokenSs) { 
-                        // assign the current joint residue to the previous segment
-                        if(bHighlight === 1 || bHighlight === 2) {
-                            colors.push(ic.hColor);
-                        }
-                        else {
-                            //colors.push(atom.color);
-                            colors.push(prevColor);
-                        }
+            this.setCalphaDrawnCoord(p0, div, calphaIdArray);
+        }
 
-                        if(atom.ssend && atom.ss === 'sheet') { // current residue is the end of ss and is the end of arrow
-                            strandWidth = 0; // make the arrow end sharp
-                        }
-                        else if(ss === 'coil' && atom.ssbegin) {
-                            strandWidth = coilWidth;
-                        }
-                        else if(ssend && atom.ssbegin) { // current residue is the start of ss and  the previous residue is the end of ss, then use coil
-                            strandWidth = coilWidth;
-                        }
-                        else { // use the ss from the previous residue
-                            strandWidth = (atom.ss === 'coil') ? coilWidth : helixSheetWidth;
-                        }
+        if(bHighlight === 1) {
+            //mesh = new THREE.Mesh(geo, ic.matShader);
 
-                        let O, oldCA, resSpan = 4;
-                        if(atom.name === 'O') {
-                            O = currentO.clone();
-                            O.sub(currentCA);
-                        }
-                        else if(bCalphaOnlyHash[chainid] && atom.name === 'CA') {
-                            if(caArray.length > resSpan) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
-                                O = currentCA.clone();
-                                oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan]].coord.clone();
-                                //O.sub(oldCA);
-                                oldCA.sub(O);
-                            }
-                            else {
-                                O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
-                            }
-                        }
+            let radius = ic.coilWidth / 2;
+            //var radiusSegments = 8;
+            let radiusSegments = 4; // save memory
+            let closed = false;
 
-                        O.normalize(); // can be omitted for performance
-                        O.multiplyScalar(strandWidth);
-                        if (prevCO !== null && O.dot(prevCO) < 0) O.negate();
-                        prevCO = O;
+            if(positions !== undefined) {
+                let currPos, prevPos;
+                let currP0 = [], currP1 = [];
 
-                        for (let j = 0, numM1Inv2 = 2 / (num - 1); j < num; ++j) {
-                            let delta = -1 + numM1Inv2 * j;
-                            let v = new THREE.Vector3(currentCA.x + prevCO.x * delta, currentCA.y + prevCO.y * delta, currentCA.z + prevCO.z * delta);
-                            if (!doNotSmoothen && ss === 'sheet') v.smoothen = true;
-                            pnts[j].push(v);
-                        }
+                for(let i = 0, il = p0.length; i < il; ++i) {
+                    currPos = positions[i];
 
-                        atomid = atom.serial;
+                    if((currPos !== prevPos && parseInt(currPos) !== parseInt(prevPos) + 1 && prevPos !== undefined) || (i === il -1) ) {
+                        // first tube
+                        let geometry0 = new THREE.TubeGeometry(
+                            new THREE.CatmullRomCurve3(currP0), // path
+                            currP0.length, // segments
+                            radius,
+                            radiusSegments,
+                            closed
+                        );
 
-                        pntsCA.push(currentCA);
-                        prevCOArray.push(prevCO);
+                        let mesh = new THREE.Mesh(geometry0, ic.matShader);
+                        mesh.renderOrder = ic.renderOrderPicking;
+                        //ic.mdlPicking.add(mesh);
+                        ic.mdl.add(mesh);
 
-                        // when a coil connects to a sheet and the last residue of coild is highlighted, the first sheet residue is set as atom.highlightStyle. This residue should not be shown.
-                        //if(atoms.hasOwnProperty(atomid) && (bHighlight === 1 && !atom.notshow) ) {
-                        if(atoms.hasOwnProperty(atomid)) {
-                            bShowArray.push(atom.resi);
-                            calphaIdArray.push(calphaid);
-                        }
-                        else {
-                            bShowArray.push(0);
-                            calphaIdArray.push(0);
-                        }
-                    }
-
-                    // draw the current segment
-                    for (let j = 0; !fill && j < num; ++j) {
-                        if(bSheetSegment) {
-                            ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
-                        }
-                        else if(bHelixSegment) {
-                            if(bFullAtom) {
-                                ic.curveCls.createCurveSub(pnts[j], 1, colors, div, bHighlight, bRibbon, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo);
-                            }
-                            else {
-                                ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
-                            }
-                        }
-                    }
-                    if (fill) {
-                        if(bSheetSegment) {
-                            let start = 0, end = num - 1;
-                            ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
-                        }
-                        else if(bHelixSegment) {
-                            if(bFullAtom) {
-                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
-                            }
-                            else {
-                                let start = 0, end = num - 1;
-                                ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
-                            }
-                        }
-                        else {
-                            if(bHighlight === 2) { // draw coils only when highlighted. if not highlighted, coils will be drawn as tubes separately
-                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
-                            }
-                        }
-                    }
-                    for (let k = 0; k < num; ++k) pnts[k] = [];
-
-                    colors = [];
-                    pntsCA = [];
-                    prevCOArray = [];
-                    bShowArray = [];
-                    calphaIdArray = [];
-                    bSheetSegment = false;
-                    bHelixSegment = false;
-                } // end if (atom.ssbegin || atom.ssend)
-
-                // end of a chain, or end of selection
-                if ((currentChain !== atom.chain 
-                    || ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 !== ic.ParserUtilsCls.getResiNCBI(chainid, atom.resi)
-                    // || (drawnResidueCount === totalResidueCount - 1) 
-                    // || bBrokenSs 
-                    || (resid == lastResid && atom.ss != 'coil')
-                    ) && pnts[0].length > 0) {
-                //if ((currentChain !== atom.chain) && pnts[0].length > 0) {
-
-                    let atomName = 'CA';
-
-                    let prevone = [], nexttwo = [];
-                    if(isNaN(ic.atoms[prevAtomid].resi)) {
-                        prevone = [];
-                    }
-                    else {
-                        let prevoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) - 1).toString();
-                        ic.firstAtomObjCls.getAtomCoordFromResi(prevoneResid, atomName);
-                    }
-
-                    for (let j = 0; !fill && j < num; ++j) {
-                        if(bSheetSegment) {
-                            ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
-                        }
-                        else if(bHelixSegment) {
-                            if(bFullAtom) {
-                                ic.curveCls.createCurveSub(pnts[j], 1, colors, div, bHighlight, bRibbon, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo);
-                            }
-                            else {
-                                ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
-                            }
-                        }
-                    }
-                    if (fill) {
-                        if(bSheetSegment) {
-                            let start = 0, end = num - 1;
-                            ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
-                        }
-                        else if(bHelixSegment) {
-                            if(bFullAtom) {
-                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
-                            }
-                            else {
-                                let start = 0, end = num - 1;
-                                ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
-                            }
-                        }
-                    }
-
-                    for (let k = 0; k < num; ++k) pnts[k] = [];
-                    colors = [];
-                    pntsCA = [];
-                    prevCOArray = [];
-                    bShowArray = [];
-                    calphaIdArray = [];
-                    bSheetSegment = false;
-                    bHelixSegment = false;
-                }
-
-                currentChain = atom.chain;
-                currentResi = atom.resi;
-                ss = atom.ss;
-                ssend = atom.ssend;
-                prevAtomid = atom.serial;
-                if(atoms.hasOwnProperty(atom.serial)) prevAtomSelected = atom;
-                prevResi = atom.resi;
-
-                prevCalphaid = calphaid;
-
-                // only update when atom.name === 'O'
-                prevCoorCA = currentCA;
-                prevCoorO = atom.coord;
-                prevColor = currentColor;
-            } // end if (atom.name === 'O' || (bCalphaOnlyHash[chainid] && atom.name === 'CA') ) {
-          } // end if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
-        } // end for
-
-        caArray = [];
-
-        // ic.tubeCls.createTube(tubeAtoms, 'CA', coilWidth, bHighlight);
-        // draw all atoms in tubes and assign zero radius when the residue is not coil
-        ic.tubeCls.createTube(atomsAdjust, 'CA', coilWidth, bHighlight);
-        pnts = {};
-    }
-
-    getOneExtraResidue(residueHash) { let ic = this.icn3d, me = ic.icn3dui;
-        let atomsAdjust = {};
-        
-        for(let resid in residueHash) {
-            atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, ic.residues[resid]);
-
-            let residNcbi = ic.resid2ncbi[resid];
-            let resiNcbi = residNcbi.substr(residNcbi.lastIndexOf('_') + 1);
-
-            let nextResidNcbi = residNcbi.substr(0, residNcbi.lastIndexOf('_')) + '_' + (parseInt(resiNcbi) + 1);
-            let nextResid = ic.ncbi2resid[nextResidNcbi];
-
-            if(!nextResid) {
-                nextResidNcbi = residNcbi.substr(0, residNcbi.lastIndexOf('_')) + '_' + (parseInt(resiNcbi) - 1);
-                nextResid = ic.ncbi2resid[nextResidNcbi];
-            }
-
-            if(nextResid) atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, ic.residues[nextResid]);
-        }
-
-        return atomsAdjust;
-    }
-
-    /*
-    getSSExpandedAtoms(atoms, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
-        let currChain, currResi, currAtom, prevChain, prevResi, prevAtom;
-        let firstAtom, lastAtom;
-        let index = 0, length = Object.keys(atoms).length;
-
-        let atomsAdjust = me.hashUtilsCls.cloneHash(atoms);
-        for(let serial in atoms) {
-          currChain = atoms[serial].structure + '_' + atoms[serial].chain;
-          currResi = atoms[serial].resi; //parseInt(atoms[serial].resi);
-          currAtom = atoms[serial];
-
-          if(prevChain === undefined) firstAtom = atoms[serial];
-
-          if( (currChain !== prevChain && prevChain !== undefined)
-           || (currResi !== prevResi && ic.resid2ncbi[currResi] !== ic.resid2ncbi[prevResi] + 1 && prevResi !== undefined) || index === length - 1) {
-            if( (currChain !== prevChain && prevChain !== undefined)
-              || (currResi !== prevResi && currResi !== ic.resid2ncbi[prevResi] + 1 && prevResi !== undefined) ) {
-                lastAtom = prevAtom;
-            }
-            else if(index === length - 1) {
-                lastAtom = currAtom;
-            }
-
-            // fill the beginning
-            let beginResi = firstAtom.resi;
-            if(!isNaN(firstAtom.resi) && firstAtom.ss !== 'coil' && !(firstAtom.ssbegin) ) {
-                for(let i = parseInt(firstAtom.resi) - 1; i > 0; --i) {
-                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + i;
-                    if(!ic.residues.hasOwnProperty(residueid)) break;
-
-                    let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residueid]);
-
-                    if(atom.ss === firstAtom.ss && atom.ssbegin) {
-                        beginResi = atom.resi;
-                        break;
-                    }
-                }
-
-                for(let i = beginResi; i < firstAtom.resi; ++i) {
-                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + i;
-                    atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
-                      ic.atoms));
-                }
-            }
-
-            // add one extra residue for coils between strands/helix
-            if(!isNaN(firstAtom.resi) && ic.pk === 3 && bHighlight === 1 && firstAtom.ss === 'coil') {
-                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + (parseInt(firstAtom.resi) - 1).toString();
-                    if(ic.residues.hasOwnProperty(residueid)) {
-                        atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
-                          ic.atoms));
-                        atoms = me.hashUtilsCls.unionHash(atoms, me.hashUtilsCls.hash2Atoms(ic.residues[residueid], ic.atoms));
-                    }
-            }
-
-            // fill the end
-            let endResi = lastAtom.resi;
-            // when a coil connects to a sheet and the last residue of coil is highlighted, the first sheet residue is set as atom.notshow. This residue should not be shown.
-
-            if(lastAtom.ss !== undefined && lastAtom.ss !== 'coil' && !(lastAtom.ssend) && !(lastAtom.notshow)) {
-
-                let endChainResi = ic.firstAtomObjCls.getLastAtomObj(ic.chains[lastAtom.structure + '_' + lastAtom.chain]).resi;
-                for(let i = parseInt(lastAtom.resi) + 1; i <= parseInt(endChainResi); ++i) {
-                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + i;
-                    if(!ic.residues.hasOwnProperty(residueid)) break;
-
-                    let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residueid]);
-
-                    if(atom.ss === lastAtom.ss && atom.ssend) {
-                        endResi = atom.resi;
-                        break;
-                    }
-                }
-
-                for(let i = parseInt(lastAtom.resi) + 1; i <= parseInt(endResi); ++i) {
-                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + i;
-                    atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
-                      ic.atoms));
-                }
-            }
-
-            // add one extra residue for coils between strands/helix
-            if(ic.pk === 3 && bHighlight === 1 && lastAtom.ss === 'coil') {
-                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + (parseInt(lastAtom.resi) + 1).toString();
-                    if(ic.residues.hasOwnProperty(residueid)) {
-                        atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
-                          ic.atoms));
-                        atoms = me.hashUtilsCls.unionHash(atoms, me.hashUtilsCls.hash2Atoms(ic.residues[residueid], ic.atoms));
-                    }
-            }
-
-            // reset notshow
-            if(lastAtom.notshow) lastAtom.notshow = undefined;
-
-            firstAtom = currAtom;
-          }
-
-          prevChain = currChain;
-          prevResi = currResi;
-          prevAtom = currAtom;
-
-          ++index;
-        }
-
-        return atomsAdjust;
-    }
-    */
-}
-
-/**
- * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
- */
-
-class Strip {
-    constructor(icn3d) {
-        this.icn3d = icn3d;
-    }
-
-    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
-    createStrip(p0, p1, colors, div, thickness, bHighlight, bNoSmoothen, bShowArray,
-      calphaIdArray, positions, prevone, nexttwo, pntsCA, prevCOArray) { let ic = this.icn3d, me = ic.icn3dui;
-        if(me.bNode) return;
-
-        if (p0.length < 2) return;
-        div = div || ic.axisDIV;
-
-        // if(pntsCA && ic.bDoublecolor && !ic.bCalphaOnly) {
-        if(pntsCA && ic.bDoublecolor) {
-            let bExtendLastRes = false; //true;
-
-            let pnts_clrs = me.subdivideCls.subdivide(pntsCA, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
-            pntsCA = pnts_clrs[0];
-
-            this.setCalphaDrawnCoord(pntsCA, div, calphaIdArray);
-
-            for(let i = 0, il = prevCOArray.length; i < il; ++i) {
-                prevCOArray[i].normalize();
-            }
-
-            let pnts_clrs2 = me.subdivideCls.subdivide(prevCOArray, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
-            prevCOArray = pnts_clrs2[0];
-
-            colors = pnts_clrs[2];
-        }
-        else {
-
-            if(!bNoSmoothen) {
-                //var bExtendLastRes = true;
-                let bExtendLastRes = false;
-                let pnts_clrs0 = me.subdivideCls.subdivide(p0, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
-                let pnts_clrs1 = me.subdivideCls.subdivide(p1, colors, div, bShowArray, bHighlight, prevone, nexttwo, bExtendLastRes);
-                p0 = pnts_clrs0[0];
-                p1 = pnts_clrs1[0];
-                colors = pnts_clrs0[2];
-            }
-            if (p0.length < 2) return;
-
-            this.setCalphaDrawnCoord(p0, div, calphaIdArray);
-        }
-
-        if(bHighlight === 1) {
-            //mesh = new THREE.Mesh(geo, ic.matShader);
-
-            let radius = ic.coilWidth / 2;
-            //var radiusSegments = 8;
-            let radiusSegments = 4; // save memory
-            let closed = false;
-
-            if(positions !== undefined) {
-                let currPos, prevPos;
-                let currP0 = [], currP1 = [];
-
-                for(let i = 0, il = p0.length; i < il; ++i) {
-                    currPos = positions[i];
-
-                    if((currPos !== prevPos && parseInt(currPos) !== parseInt(prevPos) + 1 && prevPos !== undefined) || (i === il -1) ) {
-                        // first tube
-                        let geometry0 = new THREE.TubeGeometry(
-                            new THREE.CatmullRomCurve3(currP0), // path
-                            currP0.length, // segments
-                            radius,
-                            radiusSegments,
-                            closed
-                        );
-
-                        let mesh = new THREE.Mesh(geometry0, ic.matShader);
-                        mesh.renderOrder = ic.renderOrderPicking;
-                        //ic.mdlPicking.add(mesh);
-                        ic.mdl.add(mesh);
-
-                        ic.prevHighlightObjects.push(mesh);
+                        ic.prevHighlightObjects.push(mesh);
 
                         geometry0 = null;
 
@@ -29687,6 +29377,7 @@ class Tube {
                 atom.structure + '_' + atom.chain + '_' + (parseInt(atom.resi) - 1).toString();
 
                 if (index > 0 && (currentChain !== atom.chain || Math.abs(atom.coord.x - prevAtom.coord.x) > maxDist || Math.abs(atom.coord.y - prevAtom.coord.y) > maxDist || Math.abs(atom.coord.z - prevAtom.coord.z) > maxDist
+                  || (prevAtom.ssbegin) // e.g., https://www.ncbi.nlm.nih.gov/Structure/icn3d/?pdbid=7JO8 where a beta sheet has just two residues
 //                  || (parseInt(currentResi) + 1 < parseInt(atom.resi) && (Math.abs(atom.coord.x - prevAtom.coord.x) > maxDist2 || Math.abs(atom.coord.y - prevAtom.coord.y) > maxDist2 || Math.abs(atom.coord.z - prevAtom.coord.z) > maxDist2) && ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid]) && ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[resid]).ss == 'helix')
                   || (ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + currentChain, currentResi) + 1 < ic.ParserUtilsCls.getResiNCBI(atom.structure + '_' + atom.chain, atom.resi) && (Math.abs(atom.coord.x - prevAtom.coord.x) > maxDist2 || Math.abs(atom.coord.y - prevAtom.coord.y) > maxDist2 || Math.abs(atom.coord.z - prevAtom.coord.z) > maxDist2))
                   ) ) {
@@ -29779,7 +29470,7 @@ class Tube {
                 }
                 
                 // draw all atoms in tubes and assign zero radius when the residue is not coil
-                if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
+                // if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
 
                 //radii.push(radius || (atom.b > 0 ? atom.b * 0.01 : ic.coilWidth));
                 radii.push(radiusFinal);
@@ -29922,224 +29613,770 @@ class Tube {
                     radiusFinal = this.getRadius(radius, atom);
                 }
 
-                // draw all atoms in tubes and assign zero radius when the residue is not coil
-                if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
+                // draw all atoms in tubes and assign zero radius when the residue is not coil
+                if(!bNonCoil && atom.ss != 'coil' && !atom.ssbegin && !atom.ssend ) radiusFinal = 0;
+
+                //radii.push(radius || (atom.b > 0 ? atom.b * 0.01 : ic.coilWidth));
+                radii.push(radiusFinal);
+
+                colors.push(atom.color);
+                // the starting residue of a coil uses the color from the next residue to avoid using the color of the last helix/sheet residue
+                if(index === 1) colors[colors.length - 2] = atom.color;
+
+                currentChain = atom.chain;
+                currentResi = atom.resi;
+
+                let scale = 1.2;
+                if(bHighlight === 2 && !atom.ssbegin) {
+                    ic.boxCls.createBox(atom, undefined, undefined, scale, undefined, bHighlight);
+                }
+
+                ++index;
+
+                prevAtom = atom;
+            }
+        }
+
+        if(bHighlight !== 2) {
+            pnts_colors_radii_prevone_nexttwo.push({'pnts':pnts, 'colors':colors, 'radii':radii, 'prevone':prevone, 'nexttwo':nexttwo});
+        }
+
+        for(let i = 0, il = pnts_colors_radii_prevone_nexttwo.length; i < il; ++i) {
+            let pnts = pnts_colors_radii_prevone_nexttwo[i].pnts;
+            let colors = pnts_colors_radii_prevone_nexttwo[i].colors;
+            let radii = pnts_colors_radii_prevone_nexttwo[i].radii;
+            let prevone = []; // = pnts_colors_radii_prevone_nexttwo[i].prevone;
+            let nexttwo = []; // = pnts_colors_radii_prevone_nexttwo[i].nexttwo;
+
+            this.createTubeSub(pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil);
+        }
+
+        pnts_colors_radii_prevone_nexttwo = [];    
+    }
+*/
+
+    getCustomtubesize(resid) { let ic = this.icn3d; ic.icn3dui;
+        let pos = resid.lastIndexOf('_');
+        let resi = resid.substr(pos + 1);
+        let chainid = resid.substr(0, pos);
+
+        let radiusFinal = (ic.queryresi2score[chainid] && ic.queryresi2score[chainid].hasOwnProperty(resi)) ? ic.queryresi2score[chainid][resi] * 0.01 : ic.coilWidth;
+
+        return radiusFinal;
+    };
+
+    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
+    createTubeSub(_pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
+
+        if (_pnts.length < 2) return;
+
+        let circleDiv = ic.tubeDIV, axisDiv = ic.axisDIV;
+        let circleDivInv = 1 / circleDiv, axisDivInv = 1 / axisDiv;
+        //var geo = new THREE.Geometry();
+        let geo = new THREE.BufferGeometry();
+        let verticeArray = [], colorArray = [],indexArray = [], color;
+        let offset = 0, offset2 = 0, offset3 = 0;
+
+        let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
+
+        let pnts = pnts_clrs[0];
+        colors = pnts_clrs[2];
+
+        let constRadiius;
+        // a threshold to stop drawing the tube if it's less than this ratio of radius
+        let thresholdRatio = 1; //0.9;
+
+        let prevAxis1 = new THREE.Vector3(), prevAxis2;
+        for (let i = 0, lim = pnts.length; i < lim; ++i) {
+            let r, idx = (i - 1) * axisDivInv;
+
+            if (i === 0) {
+                r = radii[0];
+                if(r > 0) constRadiius = r;
+            }
+            else {
+                if (idx % 1 === 0) {
+                    r = radii[idx];
+                    if(r > 0) constRadiius = r;
+                }
+                else {
+                    let floored = Math.floor(idx);
+                    let tmp = idx - floored;
+                    // draw all atoms in tubes and assign zero radius when the residue is not coil
+                    // r = radii[floored] * tmp + radii[floored + 1] * (1 - tmp);
+                    r = radii[floored] * (1 - tmp) + radii[floored + 1] * tmp;
+
+                    // a threshold to stop drawing the tube if it's less than this ratio of radius.
+                    // The extra bit of tube connects coil with strands or helices
+                    if(!bNonCoil) {
+                        if(r < thresholdRatio * constRadiius) {
+                            r = 0;
+                        }
+                        // else if(r < constRadiius) {
+                        //     r *= 0.5; // use small radius for the connection between coild and sheets/helices 
+                        // }
+                    }
+                }
+            }
+            let delta, axis1, axis2;
+            if (i < lim - 1) {
+                delta = pnts[i].clone().sub(pnts[i + 1]);
+                axis1 = new THREE.Vector3(0, -delta.z, delta.y).normalize().multiplyScalar(r);
+                axis2 = delta.clone().cross(axis1).normalize().multiplyScalar(r);
+                //      let dir = 1, offset = 0;
+                if (prevAxis1.dot(axis1) < 0) {
+                    axis1.negate(); axis2.negate();  //dir = -1;//offset = 2 * Math.PI / axisDiv;
+                }
+                prevAxis1 = axis1; prevAxis2 = axis2;
+            } else {
+                axis1 = prevAxis1; axis2 = prevAxis2;
+            }
+            for (let j = 0; j < circleDiv; ++j) {
+                let angle = 2 * Math.PI * circleDivInv * j; //* dir  + offset;
+                let point = pnts[i].clone().add(axis1.clone().multiplyScalar(Math.cos(angle))).add(axis2.clone().multiplyScalar(Math.sin(angle)));
+                verticeArray[offset++] = point.x;
+                verticeArray[offset++] = point.y;
+                verticeArray[offset++] = point.z;
+
+                color = (i == colors.length - 1 && colors.length > 1) ? me.parasCls.thr(colors[colors.length - 2]) : me.parasCls.thr(colors[i]);
+                colorArray[offset2++] = color.r;
+                colorArray[offset2++] = color.g;
+                colorArray[offset2++] = color.b;
+            }
+        }
+        let offsetTmp = 0, nComp = 3;
+        for (let i = 0, lim = pnts.length - 1; i < lim; ++i) {
+            let reg = 0;
+            //var r1 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv]).lengthSq();
+            //var r2 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv + 1]).lengthSq();
+            let pos = offsetTmp * nComp;
+            let point1 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+            pos = (offsetTmp + circleDiv) * nComp;
+            let point2 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+            pos = (offsetTmp + circleDiv + 1) * nComp;
+            let point3 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
+
+            let r1 = point1.clone().sub(point2).lengthSq();
+            let r2 = point1.clone().sub(point3).lengthSq();
+            if (r1 > r2) { r1 = r2; reg = 1; }            for (let j = 0; j < circleDiv; ++j) {
+                //geo.faces.push(new THREE.Face3(offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv, undefined, c));
+                //geo.faces.push(new THREE.Face3(offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv, undefined, c));
+                //indexArray = indexArray.concat([offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv]);
+                indexArray[offset3++] = offsetTmp + j;
+                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
+
+                //indexArray = indexArray.concat([offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv]);
+                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
+                indexArray[offset3++] = offsetTmp + (j + reg + 1) % circleDiv + circleDiv;
+            }
+            offsetTmp += circleDiv;
+        }
+
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(verticeArray), nComp));
+        geo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), nComp));
+
+        geo.setIndex(new THREE.BufferAttribute(new Uint32Array(indexArray), 1));
+        //geo.setIndex(indexArray);
+
+        //geo.computeFaceNormals();
+        //geo.computeVertexNormals(false);
+        geo.computeVertexNormals();
+
+        let mesh;
+        if(bHighlight === 2) {
+          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
+
+          if(ic.mdl) ic.mdl.add(mesh);
+        }
+        else if(bHighlight === 1) {
+          mesh = new THREE.Mesh(geo, ic.matShader);
+          mesh.renderOrder = ic.renderOrderPicking;
+          //ic.mdlPicking.add(mesh);
+          if(ic.mdl) ic.mdl.add(mesh);
+        }
+        else {
+          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
+          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
+
+          if(ic.mdl) ic.mdl.add(mesh);
+        }
+
+        if(bHighlight === 1 || bHighlight === 2) {
+            ic.prevHighlightObjects.push(mesh);
+        }
+        else {
+            ic.objects.push(mesh);
+        }
+    }
+
+    getRadius(radius, atom) { let ic = this.icn3d; ic.icn3dui;
+        let radiusFinal = radius;
+        if(radius) {
+            radiusFinal = radius;
+        }
+        else {
+            if(atom.b > 0 && atom.b <= 100) {
+                radiusFinal = atom.b * 0.01;
+            }
+            else if(atom.b > 100) {
+                radiusFinal = 100 * 0.01;
+            }
+            else {
+                radiusFinal = ic.coilWidth;
+            }
+        }
+
+        return radiusFinal;
+    }
+}
+
+/**
+ * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
+ */
+
+class Strand {
+    constructor(icn3d) {
+        this.icn3d = icn3d;
+    }
+
+    // significantly modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
+    //Create the style of ribbon or strand for "atoms". "num" means how many lines define the curve.
+    //"num" is 2 for ribbon and 6 for strand. "div" means how many pnts are used to smooth the curve.
+    //It's typically 5. "coilWidth" is the width of curve for coil. "helixSheetWidth" is the width of curve for helix or sheet.
+    //"doNotSmoothen" is a flag to smooth the curve or not. "thickness" is the thickness of the curve.
+    //"bHighlight" is an option to draw the highlight for these atoms. The highlight could be outlines
+    //with bHighlight=1 and 3D objects with bHighlight=2.
+    createStrand(atoms, num, div, fill, coilWidth, helixSheetWidth, doNotSmoothen, thickness, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
+        if(me.bNode) return;
+
+        let bRibbon = fill ? true: false;
+
+        // when highlight, the input atoms may only include part of sheet or helix
+        // include the whole sheet or helix when highlighting
+        let atomsAdjust = {};
+
+        //if( (bHighlight === 1 || bHighlight === 2) && !ic.bAllAtoms) {
+        //if( !ic.bAllAtoms) {
+        if( Object.keys(atoms).length < Object.keys(ic.atoms).length) {
+            atomsAdjust = this.getSSExpandedAtoms(atoms);
+        }
+        else {
+            atomsAdjust = atoms;
+        }
+
+        if(bHighlight === 2) {
+            if(fill) {
+                fill = false;
+                num = null;
+                div = null;
+                coilWidth = null;
+                helixSheetWidth = null;
+                thickness = undefined;
+            }
+            else {
+                fill = true;
+                num = 2;
+                div = undefined;
+                coilWidth = undefined;
+                helixSheetWidth = undefined;
+                thickness = ic.ribbonthickness;
+            }
+        }
+
+        num = num || ic.strandDIV;
+        div = div || ic.axisDIV;
+        coilWidth = coilWidth || ic.coilWidth;
+        doNotSmoothen = doNotSmoothen || false;
+        helixSheetWidth = helixSheetWidth || ic.helixSheetWidth;
+        let pnts = {}; for (let k = 0; k < num; ++k) pnts[k] = [];
+        let pntsCA = [];
+        let prevCOArray = [];
+        let bShowArray = [];
+        let calphaIdArray = []; // used to store one of the final positions drawn in 3D
+        let colors = [];
+        let currentChain, currentCA = null, currentO = null, currentColor = null, prevCoorCA = null, prevCoorO = null, prevColor = null;
+        let prevCO = null, ss = null, ssend = false, atomid = null, prevAtomid = null, prevResi = null, calphaid = null, prevCalphaid = null;
+        let strandWidth, bSheetSegment = false, bHelixSegment = false;
+        let atom, tubeAtoms = {};
+
+        // test the first 30 atoms to see whether only C-alpha is available
+        ic.bCalphaOnly = me.utilsCls.isCalphaPhosOnly(atomsAdjust); //, 'CA');
+
+        // when highlight, draw whole beta sheet and use bShowArray to show the highlight part
+        let residueHash = {};
+        for(let i in atomsAdjust) {
+            let atom = atomsAdjust[i];
+
+            let residueid = atom.structure + '_' + atom.chain + '_' + atom.resi;
+            residueHash[residueid] = 1;
+        }
+        let totalResidueCount = Object.keys(residueHash).length;
+
+        let drawnResidueCount = 0;
+
+        let bFullAtom = (Object.keys(ic.hAtoms).length == Object.keys(ic.atoms).length) ? true : false;
+
+        let caArray = []; // record all C-alpha atoms to predict the helix
+
+        for (let i in atomsAdjust) {
+          atom = atomsAdjust[i];
+          if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
+            // "CA" has to appear before "O"
+
+            if (atom.name === 'CA') {
+                if ( atoms.hasOwnProperty(i) && ((atom.ss !== 'helix' && atom.ss !== 'sheet') || atom.ssend || atom.ssbegin) ) {
+                    tubeAtoms[i] = atom;
+                }
+
+                currentCA = atom.coord;
+                currentColor = atom.color;
+                calphaid = atom.serial;
+
+                caArray.push(atom.serial);
+            }
+
+            if (atom.name === 'O' || (ic.bCalphaOnly && atom.name === 'CA')) {
+                if(currentCA === null || currentCA === undefined) {
+                    currentCA = atom.coord;
+                    currentColor = atom.color;
+                    calphaid = atom.serial;
+                }
+
+                if(atom.name === 'O') {
+                    currentO = atom.coord;
+                }
+                // smoothen each coil, helix and sheet separately. The joint residue has to be included both in the previous and next segment
+                let bSameChain = true;
+//                    if (currentChain !== atom.chain || currentResi + 1 !== atom.resi) {
+                if (currentChain !== atom.chain) {
+                    bSameChain = false;
+                }
+
+                if(atom.ssend && atom.ss === 'sheet') {
+                    bSheetSegment = true;
+                }
+                else if(atom.ssend && atom.ss === 'helix') {
+                    bHelixSegment = true;
+                }
+
+                // assign the previous residue
+                if(prevCoorO) {
+                    if(bHighlight === 1 || bHighlight === 2) {
+                        colors.push(ic.hColor);
+                    }
+                    else {
+                        colors.push(prevColor);
+                    }
+
+                    if(ss !== 'coil' && atom.ss === 'coil') {
+                        strandWidth = coilWidth;
+                    }
+                    else if(ssend && atom.ssbegin) { // a transition between two ss
+                        strandWidth = coilWidth;
+                    }
+                    else {
+                        strandWidth = (ss === 'coil') ? coilWidth : helixSheetWidth;
+                    }
+
+                    let O, oldCA, resSpan = 4;
+                    if(atom.name === 'O') {
+                        O = prevCoorO.clone();
+                        if(prevCoorCA !== null && prevCoorCA !== undefined) {
+                            O.sub(prevCoorCA);
+                        }
+                        else {
+                            prevCoorCA = prevCoorO.clone();
+                            if(caArray.length > resSpan + 1) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
+                                O = prevCoorCA.clone();
+                                oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan - 1]].coord.clone();
+                                //O.sub(oldCA);
+                                oldCA.sub(O);
+                            }
+                            else {
+                                O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
+                            }
+                        }
+                    }
+                    else if(ic.bCalphaOnly && atom.name === 'CA') {
+                        if(caArray.length > resSpan + 1) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
+                            O = prevCoorCA.clone();
+                            oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan - 1]].coord.clone();
+                            //O.sub(oldCA);
+                            oldCA.sub(O);
+                        }
+                        else {
+                            O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
+                        }
+                    }
+
+                    O.normalize(); // can be omitted for performance
+                    O.multiplyScalar(strandWidth);
+                    if (prevCO !== null && O.dot(prevCO) < 0) O.negate();
+                    prevCO = O;
+
+                    for (let j = 0, numM1Inv2 = 2 / (num - 1); j < num; ++j) {
+                        let delta = -1 + numM1Inv2 * j;
+                        let v = new THREE.Vector3(prevCoorCA.x + prevCO.x * delta, prevCoorCA.y + prevCO.y * delta, prevCoorCA.z + prevCO.z * delta);
+                        if (!doNotSmoothen && ss === 'sheet') v.smoothen = true;
+                        pnts[j].push(v);
+                    }
+
+                    pntsCA.push(prevCoorCA);
+                    prevCOArray.push(prevCO);
+
+                    if(atoms.hasOwnProperty(prevAtomid)) {
+                        bShowArray.push(prevResi);
+                        calphaIdArray.push(prevCalphaid);
+                    }
+                    else {
+                        bShowArray.push(0);
+                        calphaIdArray.push(0);
+                    }
+
+                    ++drawnResidueCount;
+                }
+
+                let maxDist = 6.0;
+                let bBrokenSs = (prevCoorCA && Math.abs(currentCA.x - prevCoorCA.x) > maxDist) || (prevCoorCA && Math.abs(currentCA.y - prevCoorCA.y) > maxDist) || (prevCoorCA && Math.abs(currentCA.z - prevCoorCA.z) > maxDist);
+                // The following code didn't work to select one residue
+                // let bBrokenSs = !atoms.hasOwnProperty(atom.serial) || (prevCoorCA && Math.abs(currentCA.x - prevCoorCA.x) > maxDist) || (prevCoorCA && Math.abs(currentCA.y - prevCoorCA.y) > maxDist) || (prevCoorCA && Math.abs(currentCA.z - prevCoorCA.z) > maxDist);
+
+                // if(bBrokenSs && atom.ss === 'sheet') {
+                //     bSheetSegment = true;
+                // }
+                // else if(bBrokenSs && atom.ss === 'helix') {
+                //     bHelixSegment = true;
+                // }
+
+                if ((atom.ssbegin || atom.ssend || (drawnResidueCount === totalResidueCount - 1) || bBrokenSs) && pnts[0].length > 0 && bSameChain) {
+                    let atomName = 'CA';
+
+                    let prevone = [], nexttwo = [];
+
+                    if(isNaN(ic.atoms[prevAtomid].resi)) {
+                        prevone = [];
+                    }
+                    else {
+                        let prevoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) - 1).toString();
+                        let prevoneCoord = ic.firstAtomObjCls.getAtomCoordFromResi(prevoneResid, atomName);
+                        prevone = (prevoneCoord !== undefined) ? [prevoneCoord] : [];
+                    }
+
+                    if(!isNaN(ic.atoms[prevAtomid].resi)) {
+                        let nextoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) + 1).toString();
+                        let nextoneCoord = ic.firstAtomObjCls.getAtomCoordFromResi(nextoneResid, atomName);
+                        if(nextoneCoord !== undefined) {
+                            nexttwo.push(nextoneCoord);
+                        }
+
+                        let nexttwoResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) + 2).toString();
+                        let nexttwoCoord = ic.firstAtomObjCls.getAtomCoordFromResi(nexttwoResid, atomName);
+                        if(nexttwoCoord !== undefined) {
+                            nexttwo.push(nexttwoCoord);
+                        }
+                    }
+
+                    if(!bBrokenSs) { // include the current residue
+                        // assign the current joint residue to the previous segment
+                        if(bHighlight === 1 || bHighlight === 2) {
+                            colors.push(ic.hColor);
+                        }
+                        else {
+                            //colors.push(atom.color);
+                            colors.push(prevColor);
+                        }
+
+                        if(atom.ssend && atom.ss === 'sheet') { // current residue is the end of ss and is the end of arrow
+                            strandWidth = 0; // make the arrow end sharp
+                        }
+                        else if(ss === 'coil' && atom.ssbegin) {
+                            strandWidth = coilWidth;
+                        }
+                        else if(ssend && atom.ssbegin) { // current residue is the start of ss and  the previous residue is the end of ss, then use coil
+                            strandWidth = coilWidth;
+                        }
+                        else { // use the ss from the previous residue
+                            strandWidth = (atom.ss === 'coil') ? coilWidth : helixSheetWidth;
+                        }
+
+                        let O, oldCA, resSpan = 4;
+                        if(atom.name === 'O') {
+                            O = currentO.clone();
+                            O.sub(currentCA);
+                        }
+                        else if(ic.bCalphaOnly && atom.name === 'CA') {
+                            if(caArray.length > resSpan) { // use the calpha and the previous 4th c-alpha to calculate the helix direction
+                                O = currentCA.clone();
+                                oldCA = ic.atoms[caArray[caArray.length - 1 - resSpan]].coord.clone();
+                                //O.sub(oldCA);
+                                oldCA.sub(O);
+                            }
+                            else {
+                                O = new THREE.Vector3(Math.random(),Math.random(),Math.random());
+                            }
+                        }
+
+                        O.normalize(); // can be omitted for performance
+                        O.multiplyScalar(strandWidth);
+                        if (prevCO !== null && O.dot(prevCO) < 0) O.negate();
+                        prevCO = O;
+
+                        for (let j = 0, numM1Inv2 = 2 / (num - 1); j < num; ++j) {
+                            let delta = -1 + numM1Inv2 * j;
+                            let v = new THREE.Vector3(currentCA.x + prevCO.x * delta, currentCA.y + prevCO.y * delta, currentCA.z + prevCO.z * delta);
+                            if (!doNotSmoothen && ss === 'sheet') v.smoothen = true;
+                            pnts[j].push(v);
+                        }
+
+                        atomid = atom.serial;
+
+                        pntsCA.push(currentCA);
+                        prevCOArray.push(prevCO);
+
+                        // when a coil connects to a sheet and the last residue of coild is highlighted, the first sheet residue is set as atom.highlightStyle. This residue should not be shown.
+                        //if(atoms.hasOwnProperty(atomid) && (bHighlight === 1 && !atom.notshow) ) {
+                        if(atoms.hasOwnProperty(atomid)) {
+                            bShowArray.push(atom.resi);
+                            calphaIdArray.push(calphaid);
+                        }
+                        else {
+                            bShowArray.push(0);
+                            calphaIdArray.push(0);
+                        }
+                    }
+
+                    // draw the current segment
+                    for (let j = 0; !fill && j < num; ++j) {
+                        if(bSheetSegment) {
+                            ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
+                        }
+                        else if(bHelixSegment) {
+                            if(bFullAtom) {
+                                ic.curveCls.createCurveSub(pnts[j], 1, colors, div, bHighlight, bRibbon, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo);
+                            }
+                            else {
+                                ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
+                            }
+                        }
+                    }
+                    if (fill) {
+                        if(bSheetSegment) {
+                            let start = 0, end = num - 1;
+                            ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
+                        }
+                        else if(bHelixSegment) {
+                            if(bFullAtom) {
+                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
+                            }
+                            else {
+                                let start = 0, end = num - 1;
+                                ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
+                            }
+                        }
+                        else {
+                            if(bHighlight === 2) { // draw coils only when highlighted. if not highlighted, coils will be drawn as tubes separately
+                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
+                            }
+                        }
+                    }
+                    for (let k = 0; k < num; ++k) pnts[k] = [];
+
+                    colors = [];
+                    pntsCA = [];
+                    prevCOArray = [];
+                    bShowArray = [];
+                    calphaIdArray = [];
+                    bSheetSegment = false;
+                    bHelixSegment = false;
+                } // end if (atom.ssbegin || atom.ssend)
+
+                // end of a chain
+//                    if ((currentChain !== atom.chain || currentResi + 1 !== atom.resi) && pnts[0].length > 0) {
+                if ((currentChain !== atom.chain) && pnts[0].length > 0) {
 
-                //radii.push(radius || (atom.b > 0 ? atom.b * 0.01 : ic.coilWidth));
-                radii.push(radiusFinal);
+                    let atomName = 'CA';
 
-                colors.push(atom.color);
-                // the starting residue of a coil uses the color from the next residue to avoid using the color of the last helix/sheet residue
-                if(index === 1) colors[colors.length - 2] = atom.color;
+                    let prevone = [], nexttwo = [];
+                    if(isNaN(ic.atoms[prevAtomid].resi)) {
+                        prevone = [];
+                    }
+                    else {
+                        let prevoneResid = ic.atoms[prevAtomid].structure + '_' + ic.atoms[prevAtomid].chain + '_' + (parseInt(ic.atoms[prevAtomid].resi) - 1).toString();
+                        ic.firstAtomObjCls.getAtomCoordFromResi(prevoneResid, atomName);
+                    }
 
-                currentChain = atom.chain;
-                currentResi = atom.resi;
+                    for (let j = 0; !fill && j < num; ++j) {
+                        if(bSheetSegment) {
+                            ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
+                        }
+                        else if(bHelixSegment) {
+                            if(bFullAtom) {
+                                ic.curveCls.createCurveSub(pnts[j], 1, colors, div, bHighlight, bRibbon, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo);
+                            }
+                            else {
+                                ic.curveStripArrowCls.createCurveSubArrow(pnts[j], 1, colors, div, bHighlight, bRibbon, num, j, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
+                            }
+                        }
+                    }
+                    if (fill) {
+                        if(bSheetSegment) {
+                            let start = 0, end = num - 1;
+                            ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, true, prevone, nexttwo);
+                        }
+                        else if(bHelixSegment) {
+                            if(bFullAtom) {
+                                ic.stripCls.createStrip(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, false, bShowArray, calphaIdArray, undefined, prevone, nexttwo, pntsCA, prevCOArray);
+                            }
+                            else {
+                                let start = 0, end = num - 1;
+                                ic.curveStripArrowCls.createStripArrow(pnts[0], pnts[num - 1], colors, div, thickness, bHighlight, num, start, end, pntsCA, prevCOArray, bShowArray, calphaIdArray, false, prevone, nexttwo);
+                            }
+                        }
+                    }
 
-                let scale = 1.2;
-                if(bHighlight === 2 && !atom.ssbegin) {
-                    ic.boxCls.createBox(atom, undefined, undefined, scale, undefined, bHighlight);
+                    for (let k = 0; k < num; ++k) pnts[k] = [];
+                    colors = [];
+                    pntsCA = [];
+                    prevCOArray = [];
+                    bShowArray = [];
+                    calphaIdArray = [];
+                    bSheetSegment = false;
+                    bHelixSegment = false;
                 }
 
-                ++index;
+                currentChain = atom.chain;
+                ss = atom.ss;
+                ssend = atom.ssend;
+                prevAtomid = atom.serial;
+                prevResi = atom.resi;
 
-                prevAtom = atom;
-            }
-        }
+                prevCalphaid = calphaid;
 
-        if(bHighlight !== 2) {
-            pnts_colors_radii_prevone_nexttwo.push({'pnts':pnts, 'colors':colors, 'radii':radii, 'prevone':prevone, 'nexttwo':nexttwo});
-        }
+                // only update when atom.name === 'O'
+                prevCoorCA = currentCA;
+                prevCoorO = atom.coord;
+                prevColor = currentColor;
+            } // end if (atom.name === 'O' || (ic.bCalphaOnly && atom.name === 'CA') ) {
+          } // end if ((atom.name === 'O' || atom.name === 'CA') && !atom.het) {
+        } // end for
 
-        for(let i = 0, il = pnts_colors_radii_prevone_nexttwo.length; i < il; ++i) {
-            let pnts = pnts_colors_radii_prevone_nexttwo[i].pnts;
-            let colors = pnts_colors_radii_prevone_nexttwo[i].colors;
-            let radii = pnts_colors_radii_prevone_nexttwo[i].radii;
-            let prevone = []; // = pnts_colors_radii_prevone_nexttwo[i].prevone;
-            let nexttwo = []; // = pnts_colors_radii_prevone_nexttwo[i].nexttwo;
+        caArray = [];
 
-            this.createTubeSub(pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil);
-        }
+        ic.tubeCls.createTube(tubeAtoms, 'CA', coilWidth, bHighlight);
 
-        pnts_colors_radii_prevone_nexttwo = [];    
+        tubeAtoms = {};
+        pnts = {};
     }
-*/
-
-    getCustomtubesize(resid) { let ic = this.icn3d; ic.icn3dui;
-        let pos = resid.lastIndexOf('_');
-        let resi = resid.substr(pos + 1);
-        let chainid = resid.substr(0, pos);
-
-        let radiusFinal = (ic.queryresi2score[chainid] && ic.queryresi2score[chainid].hasOwnProperty(resi)) ? ic.queryresi2score[chainid][resi] * 0.01 : ic.coilWidth;
-
-        return radiusFinal;
-    };
-
-    // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
-    createTubeSub(_pnts, colors, radii, bHighlight, prevone, nexttwo, bNonCoil) { let ic = this.icn3d, me = ic.icn3dui;
-        if(me.bNode) return;
-
-        if (_pnts.length < 2) return;
 
-        let circleDiv = ic.tubeDIV, axisDiv = ic.axisDIV;
-        let circleDivInv = 1 / circleDiv, axisDivInv = 1 / axisDiv;
-        //var geo = new THREE.Geometry();
-        let geo = new THREE.BufferGeometry();
-        let verticeArray = [], colorArray = [],indexArray = [], color;
-        let offset = 0, offset2 = 0, offset3 = 0;
+    getSSExpandedAtoms(atoms, bHighlight) { let ic = this.icn3d, me = ic.icn3dui;
+        let currChain, currResi, currAtom, prevChain, prevResi, prevAtom;
+        let firstAtom, lastAtom;
+        let index = 0, length = Object.keys(atoms).length;
 
-        let pnts_clrs = me.subdivideCls.subdivide(_pnts, colors, axisDiv, undefined, undefined, prevone, nexttwo);
+        let atomsAdjust = me.hashUtilsCls.cloneHash(atoms);
+        for(let serial in atoms) {
+          currChain = atoms[serial].structure + '_' + atoms[serial].chain;
+          currResi = atoms[serial].resi; //parseInt(atoms[serial].resi);
+          currAtom = atoms[serial];
 
-        let pnts = pnts_clrs[0];
-        colors = pnts_clrs[2];
+          if(prevChain === undefined) firstAtom = atoms[serial];
 
-        let constRadiius;
-        // a threshold to stop drawing the tube if it's less than this ratio of radius
-        let thresholdRatio = 1; //0.9;
+          if( (currChain !== prevChain && prevChain !== undefined)
+           || (currResi !== prevResi && currResi !== parseInt(prevResi) + 1 && prevResi !== undefined) || index === length - 1) {
+            if( (currChain !== prevChain && prevChain !== undefined)
+              || (currResi !== prevResi && currResi !== parseInt(prevResi) + 1 && prevResi !== undefined) ) {
+                lastAtom = prevAtom;
+            }
+            else if(index === length - 1) {
+                lastAtom = currAtom;
+            }
 
-        let prevAxis1 = new THREE.Vector3(), prevAxis2;
-        for (let i = 0, lim = pnts.length; i < lim; ++i) {
-            let r, idx = (i - 1) * axisDivInv;
+            // fill the beginning
+            let beginResi = firstAtom.resi;
+            if(!isNaN(firstAtom.resi) && firstAtom.ss !== 'coil' && !(firstAtom.ssbegin) ) {
+                for(let i = parseInt(firstAtom.resi) - 1; i > 0; --i) {
+                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + i;
+                    if(!ic.residues.hasOwnProperty(residueid)) break;
 
-            if (i === 0) {
-                r = radii[0];
-                if(r > 0) constRadiius = r;
-            }
-            else {
-                if (idx % 1 === 0) {
-                    r = radii[idx];
-                    if(r > 0) constRadiius = r;
-                }
-                else {
-                    let floored = Math.floor(idx);
-                    let tmp = idx - floored;
-                    // draw all atoms in tubes and assign zero radius when the residue is not coil
-                    // r = radii[floored] * tmp + radii[floored + 1] * (1 - tmp);
-                    r = radii[floored] * (1 - tmp) + radii[floored + 1] * tmp;
+                    let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residueid]);
 
-                    // a threshold to stop drawing the tube if it's less than this ratio of radius.
-                    // The extra bit of tube connects coil with strands or helices
-                    if(!bNonCoil) {
-                        if(r < thresholdRatio * constRadiius) {
-                            r = 0;
-                        }
-                        // else if(r < constRadiius) {
-                        //     r *= 0.5; // use small radius for the connection between coild and sheets/helices 
-                        // }
+                    if(atom.ss === firstAtom.ss && atom.ssbegin) {
+                        beginResi = atom.resi;
+                        break;
                     }
                 }
-            }
-            let delta, axis1, axis2;
-            if (i < lim - 1) {
-                delta = pnts[i].clone().sub(pnts[i + 1]);
-                axis1 = new THREE.Vector3(0, -delta.z, delta.y).normalize().multiplyScalar(r);
-                axis2 = delta.clone().cross(axis1).normalize().multiplyScalar(r);
-                //      let dir = 1, offset = 0;
-                if (prevAxis1.dot(axis1) < 0) {
-                    axis1.negate(); axis2.negate();  //dir = -1;//offset = 2 * Math.PI / axisDiv;
+
+                for(let i = beginResi; i < firstAtom.resi; ++i) {
+                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + i;
+                    atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
+                      ic.atoms));
                 }
-                prevAxis1 = axis1; prevAxis2 = axis2;
-            } else {
-                axis1 = prevAxis1; axis2 = prevAxis2;
             }
-            for (let j = 0; j < circleDiv; ++j) {
-                let angle = 2 * Math.PI * circleDivInv * j; //* dir  + offset;
-                let point = pnts[i].clone().add(axis1.clone().multiplyScalar(Math.cos(angle))).add(axis2.clone().multiplyScalar(Math.sin(angle)));
-                verticeArray[offset++] = point.x;
-                verticeArray[offset++] = point.y;
-                verticeArray[offset++] = point.z;
 
-                color = (i == colors.length - 1 && colors.length > 1) ? me.parasCls.thr(colors[colors.length - 2]) : me.parasCls.thr(colors[i]);
-                colorArray[offset2++] = color.r;
-                colorArray[offset2++] = color.g;
-                colorArray[offset2++] = color.b;
+            // add one extra residue for coils between strands/helix
+            if(!isNaN(firstAtom.resi) && ic.pk === 3 && bHighlight === 1 && firstAtom.ss === 'coil') {
+                    let residueid = firstAtom.structure + '_' + firstAtom.chain + '_' + (parseInt(firstAtom.resi) - 1).toString();
+                    if(ic.residues.hasOwnProperty(residueid)) {
+                        atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
+                          ic.atoms));
+                        atoms = me.hashUtilsCls.unionHash(atoms, me.hashUtilsCls.hash2Atoms(ic.residues[residueid], ic.atoms));
+                    }
             }
-        }
-        let offsetTmp = 0, nComp = 3;
-        for (let i = 0, lim = pnts.length - 1; i < lim; ++i) {
-            let reg = 0;
-            //var r1 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv]).lengthSq();
-            //var r2 = geo.vertices[offset].clone().sub(geo.vertices[offset + circleDiv + 1]).lengthSq();
-            let pos = offsetTmp * nComp;
-            let point1 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
-            pos = (offsetTmp + circleDiv) * nComp;
-            let point2 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
-            pos = (offsetTmp + circleDiv + 1) * nComp;
-            let point3 = new THREE.Vector3(verticeArray[pos], verticeArray[pos + 1], verticeArray[pos + 2]);
 
-            let r1 = point1.clone().sub(point2).lengthSq();
-            let r2 = point1.clone().sub(point3).lengthSq();
-            if (r1 > r2) { r1 = r2; reg = 1; }            for (let j = 0; j < circleDiv; ++j) {
-                //geo.faces.push(new THREE.Face3(offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv, undefined, c));
-                //geo.faces.push(new THREE.Face3(offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv, undefined, c));
-                //indexArray = indexArray.concat([offset + j, offset + (j + reg) % circleDiv + circleDiv, offset + (j + 1) % circleDiv]);
-                indexArray[offset3++] = offsetTmp + j;
-                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
-                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
+            // fill the end
+            let endResi = lastAtom.resi;
+            // when a coil connects to a sheet and the last residue of coil is highlighted, the first sheet residue is set as atom.notshow. This residue should not be shown.
 
-                //indexArray = indexArray.concat([offset + (j + 1) % circleDiv, offset + (j + reg) % circleDiv + circleDiv, offset + (j + reg + 1) % circleDiv + circleDiv]);
-                indexArray[offset3++] = offsetTmp + (j + 1) % circleDiv;
-                indexArray[offset3++] = offsetTmp + (j + reg) % circleDiv + circleDiv;
-                indexArray[offset3++] = offsetTmp + (j + reg + 1) % circleDiv + circleDiv;
-            }
-            offsetTmp += circleDiv;
-        }
+            if(lastAtom.ss !== undefined && lastAtom.ss !== 'coil' && !(lastAtom.ssend) && !(lastAtom.notshow)) {
 
-        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(verticeArray), nComp));
-        geo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(colorArray), nComp));
+                let endChainResi = ic.firstAtomObjCls.getLastAtomObj(ic.chains[lastAtom.structure + '_' + lastAtom.chain]).resi;
+                for(let i = parseInt(lastAtom.resi) + 1; i <= parseInt(endChainResi); ++i) {
+                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + i;
+                    if(!ic.residues.hasOwnProperty(residueid)) break;
 
-        geo.setIndex(new THREE.BufferAttribute(new Uint32Array(indexArray), 1));
-        //geo.setIndex(indexArray);
+                    let atom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residueid]);
 
-        //geo.computeFaceNormals();
-        //geo.computeVertexNormals(false);
-        geo.computeVertexNormals();
+                    if(atom.ss === lastAtom.ss && atom.ssend) {
+                        endResi = atom.resi;
+                        break;
+                    }
+                }
 
-        let mesh;
-        if(bHighlight === 2) {
-          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
-          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ transparent: true, opacity: 0.5, specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
+                for(let i = parseInt(lastAtom.resi) + 1; i <= parseInt(endResi); ++i) {
+                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + i;
+                    atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
+                      ic.atoms));
+                }
+            }
 
-          if(ic.mdl) ic.mdl.add(mesh);
-        }
-        else if(bHighlight === 1) {
-          mesh = new THREE.Mesh(geo, ic.matShader);
-          mesh.renderOrder = ic.renderOrderPicking;
-          //ic.mdlPicking.add(mesh);
-          if(ic.mdl) ic.mdl.add(mesh);
-        }
-        else {
-          //mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: THREE.FaceColors, side: THREE.DoubleSide }));
-          mesh = new THREE.Mesh(geo, new THREE.MeshPhongMaterial({ specular: ic.frac, shininess: ic.shininess, emissive: ic.emissive, vertexColors: true, side: THREE.DoubleSide }));
+            // add one extra residue for coils between strands/helix
+            if(ic.pk === 3 && bHighlight === 1 && lastAtom.ss === 'coil') {
+                    let residueid = lastAtom.structure + '_' + lastAtom.chain + '_' + (parseInt(lastAtom.resi) + 1).toString();
+                    if(ic.residues.hasOwnProperty(residueid)) {
+                        atomsAdjust = me.hashUtilsCls.unionHash(atomsAdjust, me.hashUtilsCls.hash2Atoms(ic.residues[residueid],
+                          ic.atoms));
+                        atoms = me.hashUtilsCls.unionHash(atoms, me.hashUtilsCls.hash2Atoms(ic.residues[residueid], ic.atoms));
+                    }
+            }
 
-          if(ic.mdl) ic.mdl.add(mesh);
-        }
+            // reset notshow
+            if(lastAtom.notshow) lastAtom.notshow = undefined;
 
-        if(bHighlight === 1 || bHighlight === 2) {
-            ic.prevHighlightObjects.push(mesh);
-        }
-        else {
-            ic.objects.push(mesh);
-        }
-    }
+            firstAtom = currAtom;
+          }
 
-    getRadius(radius, atom) { let ic = this.icn3d; ic.icn3dui;
-        let radiusFinal = radius;
-        if(radius) {
-            radiusFinal = radius;
-        }
-        else {
-            if(atom.b > 0 && atom.b <= 100) {
-                radiusFinal = atom.b * 0.01;
-            }
-            else if(atom.b > 100) {
-                radiusFinal = 100 * 0.01;
-            }
-            else {
-                radiusFinal = ic.coilWidth;
-            }
+          prevChain = currChain;
+          prevResi = currResi;
+          prevAtom = currAtom;
+
+          ++index;
         }
 
-        return radiusFinal;
+        return atomsAdjust;
     }
 }
 
@@ -37157,6 +37394,11 @@ class Alternate {
             ic.directionalLight.position.copy(ic.lightPos.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight2.position.copy(ic.lightPos2.clone().applyQuaternion( quaternion ).normalize());
             ic.directionalLight3.position.copy(ic.lightPos3.clone().applyQuaternion( quaternion ).normalize());
+
+            // adjust the light according to the position of camera
+            ic.directionalLight.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight2.applyMatrix4(cam.matrixWorld);
+            ic.directionalLight3.applyMatrix4(cam.matrixWorld);
         }
 
         if(!ic.bVr) ic.renderer.setPixelRatio( window.devicePixelRatio ); // r71
@@ -47788,6 +48030,13 @@ class ShowAnno {
              } // align seq to structure
         }
         //ic.bAnnoShown = true;
+
+        if($("#" + ic.pre + "anno_ig").length && $("#" + ic.pre + "anno_ig")[0].checked) {
+            ic.bRunRefnumAgain = true;
+            await ic.annotationCls.setAnnoTabIg();
+
+            ic.bRunRefnumAgain = false;
+        }
     }
 
     async showAnnoSeqData(nucleotide_chainid, chemical_chainid, chemical_set) { let ic = this.icn3d, me = ic.icn3dui;
@@ -53522,6 +53771,7 @@ class AlignParser {
 
     async downloadAlignmentPart2(data, seqalign, chainresiCalphaHash2) { let ic = this.icn3d, me = ic.icn3dui;
         //ic.init();
+
         ic.loadAtomDataCls.loadAtomDataIn(data, undefined, 'align', seqalign);
 
         if(me.cfg.align === undefined && Object.keys(ic.structures).length == 1) {
@@ -53565,20 +53815,21 @@ class AlignParser {
     async loadOpmDataForAlign(data, seqalign, mmdbidArray) { let ic = this.icn3d, me = ic.icn3dui;
         let thisClass = this;
 
-        let url = "https://opm-assets.storage.googleapis.com/pdb/" + mmdbidArray[0].toLowerCase()+ ".pdb";
-        let prms1 = me.getAjaxPromise(url, 'text');
-        let url2 = "https://opm-assets.storage.googleapis.com/pdb/" + mmdbidArray[1].toLowerCase()+ ".pdb";
-        let prms2 = me.getAjaxPromise(url2, 'text');
-
-        let allPromise = Promise.allSettled([prms1, prms2]);
         try {
+            let url = "https://opm-assets.storage.googleapis.com/pdb/" + mmdbidArray[0].toLowerCase()+ ".pdb";
+            let prms1 = me.getAjaxPromise(url, 'text');
+            let url2 = "https://opm-assets.storage.googleapis.com/pdb/" + mmdbidArray[1].toLowerCase()+ ".pdb";
+            let prms2 = me.getAjaxPromise(url2, 'text');
+
+            let allPromise = Promise.allSettled([prms1, prms2]);
+
             let dataArray = await allPromise;
-            
+
             let bFound = false;
             for(let i = 0, il = dataArray.length; i < il; ++i) {
-                //let opmdata = (me.bNode) ? dataArray[i] : dataArray[i].value;
-                let opmdata = dataArray[i].value;
+                // if(dataArray[i].status == 'rejected') continue;
 
+                let opmdata = dataArray[i].value;
                 if(!opmdata) continue;
 
                 ic.selectedPdbid = mmdbidArray[i];
@@ -53594,6 +53845,7 @@ class AlignParser {
                 $("#" + ic.pre + "intra_mem_z").val(-ic.halfBilayerSize);
 
                 ic.init(); // remove all previously loaded data
+
                 await thisClass.downloadAlignmentPart2(data, seqalign, chainresiCalphaHash);
 
                 bFound = true;
@@ -58169,7 +58421,7 @@ class SdfParser {
         let sdfStr = await me.getAjaxPromise(urlSmiles, 'text');
 
         ic.init();
-        ic.bInputfile = true;
+        //ic.bInputfile = true;
         ic.InputfileData = (ic.InputfileData) ? ic.InputfileData + '\nENDMDL\n' + sdfStr : sdfStr;
         ic.InputfileType = 'sdf';
         await ic.sdfParserCls.loadSdfData(sdfStr);
@@ -60978,6 +61230,7 @@ class ParserUtils {
               ic.selectionCls.oneStructurePerWindow(); // for alignment
               ic.drawCls.draw();
           }
+
           if(ic.bOpm) {
               let axis = new THREE.Vector3(1,0,0);
               let angle = -0.5 * Math.PI;
@@ -63515,7 +63768,8 @@ class LoadPDB {
 
     // modified from iview (http://istar.cse.cuhk.edu.hk/iview/)
     //This PDB parser feeds the viewer with the content of a PDB file, pdbData.
-    async loadPDB(src, pdbid, bOpm, bVector, bMutation, bAppend, type, bEsmfold) { let ic = this.icn3d, me = ic.icn3dui;
+    // async loadPDB(src, pdbid, bOpm, bVector, bMutation, bAppend, type, bEsmfold) { let ic = this.icn3d, me = ic.icn3dui;
+    loadPDB(src, pdbid, bOpm, bVector, bMutation, bAppend, type, bEsmfold) { let ic = this.icn3d, me = ic.icn3dui;
         let hAtoms = {};
 
         let bNMR = false;
@@ -68636,17 +68890,15 @@ class SelectCollections {
   }
 
   //Set the menu of defined sets with an array of defined names "commandnameArray".
-  setAtomMenu(nameArray) {
+  setAtomMenu(collection) {
     let ic = this.icn3d;
     ic.icn3dui;
     let html = "";
-    //for(let i in ic.defNames2Atoms) {
-    for (let i = 0, il = nameArray.length; i < il; ++i) {
-      let name = nameArray[i][0];
-      let title = nameArray[i][1];
-      let description = nameArray[i][2];
-
+    
+    Object.entries(collection).forEach(([name, structure], index) => {
       let atomHash;
+      let [id, title, description, commands, pdb] = structure;
+
       if (
         ic.defNames2Atoms !== undefined &&
         ic.defNames2Atoms.hasOwnProperty(name)
@@ -68667,12 +68919,12 @@ class SelectCollections {
         }
       }
 
-      if (i == 0) {
-        html += "<option value='" + nameArray[0][0] + "' selected='selected' data-description='" + description + "'>" + title + "</option>";
-    } else {
+      if (index === 0) {
+        html += "<option value='" + name + "' selected='selected' data-description='" + description + "'>" + title + "</option>";
+      } else {
         html += "<option value='" + name + "' data-description='" + description + "'>" + title + "</option>";
-    }
-    }
+      }
+    });
 
     return html;
   }
@@ -68726,7 +68978,7 @@ class SelectCollections {
       let nameArray = $(this).val();
       let nameStructure = $(this).find("option:selected").text();
       let selectedIndices = Array.from(this.selectedOptions).map(option => option.index);
-      let selectedIndicesMap = nameArray.reduce((map, name, i) => {
+      nameArray.reduce((map, name, i) => {
         map[name] = selectedIndices[i];
         return map;
       }, {});
@@ -68763,13 +69015,13 @@ class SelectCollections {
                 if (Object.keys(ic.structures).length == 0) {
                   bAppend = false;
                 }
-                await ic.pdbParserCls.loadPdbData(ic.pdbCollection[selectedIndicesMap[name]].join('\n'), undefined, undefined, bAppend);
+                await ic.pdbParserCls.loadPdbData(ic.pdbCollection[name].join('\n'), undefined, undefined, bAppend);
               } else {
                 await ic.chainalignParserCls.downloadMmdbAf(name, undefined, undefined, bNoDuplicate);
               }
             }
             
-            await loadStructure(collection[selectedIndicesMap[name]][4]).then(() => {
+            await loadStructure(collection[name][4]).then(() => {
               ic.allData['all'] = {
                 'atoms': ic.atoms,
                 'proteins': ic.proteins,
@@ -68829,9 +69081,9 @@ class SelectCollections {
             
           ic.molTitle = ic.allData[name]['title'];
           
-          if (collection[selectedIndicesMap[name]][3] !== undefined && collection[selectedIndicesMap[name]][3].length > 0) {
+          if (collection[name][3] !== undefined && collection[name][3].length > 0) {
             if (ic.allData[name]['commands'] == undefined) {
-              let commands = collection[selectedIndicesMap[name]][3];
+              let commands = collection[name][3];
               ic.allData[name]['commands'] = commands;
             }
           }
@@ -69100,7 +69352,9 @@ class LoadScript {
           }
           else if(command.indexOf('view interactions') == 0 && me.cfg.align !== undefined) { // the command may have "|||{"factor"...
               await thisClass.applyCommandViewinteraction(strArray[0].trim());
-
+          }
+          else if(command.indexOf('view 2d depiction') == 0) { // the command may have "|||{"factor"...
+            await ic.ligplotCls.drawLigplot(ic.atoms, true);
           }
           else if(command.indexOf('symmetry') == 0) {
             ic.bAxisOnly = false;
@@ -69310,6 +69564,9 @@ class LoadScript {
                     else if(lastCommand.indexOf('view interactions') == 0 && me.cfg.align !== undefined) {
                         await thisClass.applyCommandViewinteraction(lastCommand);
                     }
+                    else if(lastCommand.indexOf('view 2d depiction') == 0) {
+                      await ic.ligplotCls.drawLigplot(ic.atoms, true);
+                    }
                     else if(lastCommand.indexOf('symmetry') == 0) {
                         let title = lastCommand.substr(lastCommand.indexOf(' ') + 1);
                         ic.symmetrytitle =(title === 'none') ? undefined : title;
@@ -71468,155 +71725,6 @@ class Resid2spec {
     }
 }
 
-/**
- * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
- */
-
-class FirstAtomObj {
-    constructor(icn3d) {
-        this.icn3d = icn3d;
-    }
-
-    //Return the first atom in the atom hash, which has the atom serial number as the key.
-    getFirstAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
-            return undefined;
-        }
-
-        let atomKeys = Object.keys(atomsHash);
-        let firstIndex = atomKeys[0];
-
-        return ic.atoms[firstIndex];
-    }
-
-    // n is the position of the selected atom
-    getMiddleAtomObj(atomsHash, n) { let ic = this.icn3d; ic.icn3dui;
-        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
-            return undefined;
-        }
-
-        let atomKeys = Object.keys(atomsHash);
-        let middleIndex = (n && n < atomKeys.length) ? atomKeys[n] : atomKeys[parseInt(atomKeys.length / 2)];
-
-        return ic.atoms[middleIndex];
-    }
-
-    getFirstCalphaAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
-            return undefined;
-        }
-
-        let firstIndex;
-
-        for(let i in atomsHash) {
-            if(ic.atoms[i].name == 'CA') {
-                firstIndex = i;
-                break;
-            }
-        }
-
-        if(!firstIndex) {
-            for(let i in atomsHash) {
-                if(ic.atoms[i].name == "O3'" || ic.atoms[i].name == "O3*") {
-                    firstIndex = i;
-                    break;
-                }
-            }
-        }
-
-        return (firstIndex !== undefined) ? ic.atoms[firstIndex] : this.getFirstAtomObj(atomsHash);
-    }
-
-    getFirstAtomObjByName(atomsHash, atomName) { let ic = this.icn3d; ic.icn3dui;
-        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
-            return ic.atoms[0];
-        }
-
-        let firstIndex;
-
-        for(let i in atomsHash) {
-            if(ic.atoms[i].name == atomName) {
-                firstIndex = i;
-                break;
-            }
-        }
-
-        return (firstIndex !== undefined) ? ic.atoms[firstIndex] : undefined;
-    }
-
-    //Return the last atom in the atom hash, which has the atom serial number as the key.
-    getLastAtomObj(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        if(atomsHash === undefined || Object.keys(atomsHash).length === 0) {
-            return ic.atoms[0];
-        }
-
-        let atomKeys = Object.keys(atomsHash);
-        let lastIndex = atomKeys[atomKeys.length - 1];
-
-        return ic.atoms[lastIndex];
-    }
-
-    //Return the residue hash from the atom hash. The residue hash has the resid as the key and 1 as the value.
-    getResiduesFromAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        let residuesHash = {};
-        for(let i in atomsHash) {
-            let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
-            residuesHash[residueid] = 1;
-        }
-
-        return residuesHash;
-    }
-
-    getResiduesFromCalphaAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        let residuesHash = {};
-        for(let i in atomsHash) {
-            if((ic.atoms[i].name == 'CA' && ic.proteins.hasOwnProperty(i)) || !ic.proteins.hasOwnProperty(i)) {
-                let residueid = ic.atoms[i].structure + '_' + ic.atoms[i].chain + '_' + ic.atoms[i].resi;
-                //residuesHash[residueid] = 1;
-                residuesHash[residueid] = ic.atoms[i].resn;
-            }
-        }
-
-        return residuesHash;
-    }
-
-    //Return the chain hash from the atom hash. The chain hash has the chainid as the key and 1 as the value.
-    getChainsFromAtoms(atomsHash) { let ic = this.icn3d; ic.icn3dui;
-        let chainsHash = {};
-        for(let i in atomsHash) {
-           let atom = ic.atoms[i];
-           let chainid = atom.structure + "_" + atom.chain;
-
-           chainsHash[chainid] = 1;
-        }
-
-        return chainsHash;
-    }
-
-    getAtomFromResi(resid, atomName) { let ic = this.icn3d; ic.icn3dui;
-        if(ic.residues.hasOwnProperty(resid)) {
-            for(let i in ic.residues[resid]) {
-                if(ic.atoms[i].name === atomName && !ic.atoms[i].het) {
-                    return ic.atoms[i];
-                }
-            }
-        }
-
-        return undefined;
-    }
-
-    getAtomCoordFromResi(resid, atomName) { let ic = this.icn3d; ic.icn3dui;
-        let atom = this.getAtomFromResi(resid, atomName);
-        if(atom !== undefined) {
-            let coord = (atom.coord2 !== undefined) ? atom.coord2 : atom.coord;
-
-            return coord;
-        }
-
-        return undefined;
-    }
-}
-
 /**
  * @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
  */
@@ -71677,9 +71785,9 @@ class Delphi {
        let pdbstr = '';
 ///       pdbstr += ic.saveFileCls.getPDBHeader();
 
-       let bMergeIntoOne = true;
-       pdbstr +=(me.cfg.cid) ? ic.saveFileCls.getAtomPDB(atomHash, true, undefined, undefined, undefined, undefined, bMergeIntoOne) : ic.saveFileCls.getAtomPDB(atomHash, undefined, undefined, undefined, undefined, undefined, bMergeIntoOne);
-       pdbstr += ic.saveFileCls.getAtomPDB(ionHash, true, undefined, true);
+       let bMergeIntoOne = true, bOneLetterChain = true;
+       pdbstr +=(me.cfg.cid) ? ic.saveFileCls.getAtomPDB(atomHash, true, undefined, undefined, undefined, undefined, bMergeIntoOne, bOneLetterChain) : ic.saveFileCls.getAtomPDB(atomHash, undefined, undefined, undefined, undefined, undefined, bMergeIntoOne, bOneLetterChain);
+       pdbstr += ic.saveFileCls.getAtomPDB(ionHash, true, undefined, true, undefined, undefined, bMergeIntoOne, bOneLetterChain);
 
        return pdbstr;
     }
@@ -77693,8 +77801,13 @@ class Ligplot {
         this.icn3d = icn3d;
     }
 
-    async drawLigplot(atomSet1) { let ic = this.icn3d, me = ic.icn3dui;
-        me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+    async drawLigplot(atomSet1, bDepiction) { let ic = this.icn3d, me = ic.icn3dui;
+        if(bDepiction) {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', '2D Depiction');
+        }
+        else {
+            me.htmlCls.dialogCls.openDlg('dl_ligplot', 'Show ligand interactions with atom details');
+        }
 
         let widthOri, heightOri, width = 100, height = 100;
         ic.len4ang = 80;
@@ -77776,19 +77889,28 @@ class Ligplot {
         let offset = - ic.len4ang;
         let svgHtml = "<svg id='" + id + "' viewBox='" + offset + "," + offset + "," + width + "," + heightAll + "' width='" + graphWidth + "px' font-family='sans-serif' stroke='rgb(0,0,0)' stroke-width='2' stroke-linecap='round'>";
 
-        let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
-        let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
-        ic.bLigplot = true;
+        if(bDepiction) {
+            svgHtml += lineSvg + nodeSvg;
+        }
+        else {
+            let xlen = parseInt(widthOri / ic.svgGridSize), ylen = parseInt(heightOri / ic.svgGridSize);
+            let result = ic.viewInterPairsCls.getAllInteractionTable("save1", index2xy, xlen, ylen, xcenter, ycenter); // sort on the ligand/set1
+            // ic.bLigplot = true;
 
-        svgHtml += lineSvg + result.svgHtmlLine;
+            svgHtml += lineSvg + result.svgHtmlLine;
 
-        svgHtml += nodeSvg + result.svgHtmlNode;
+            svgHtml += nodeSvg + result.svgHtmlNode;
+        }
 
         svgHtml += "</svg>";
 
-        $("#" + ic.pre + "ligplotDiv").html(svgHtml);
-
-        this.setEventsForLigplot();
+        if(bDepiction) {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+        }
+        else {
+            $("#" + ic.pre + "ligplotDiv").html(svgHtml);
+            this.setEventsForLigplot();
+        }  
     }
 
     
@@ -78935,7 +79057,7 @@ class SaveFile {
     }
 
     //getAtomPDB: function(atomHash, bPqr, bPdb, bNoChem) { let ic = this.icn3d, me = ic.icn3dui;
-    getAtomPDB(atomHash, bPqr, bNoChem, bNoHeader, chainResi2pdb, pdbid, bMergeIntoOne, bVastSearch) { let ic = this.icn3d, me = ic.icn3dui;
+    getAtomPDB(atomHash, bPqr, bNoChem, bNoHeader, chainResi2pdb, pdbid, bMergeIntoOne, bOneLetterChain) { let ic = this.icn3d, me = ic.icn3dui;
         let pdbStr = '';
 
         // get all phosphate groups in lipids
@@ -79210,7 +79332,7 @@ class SaveFile {
                 //line +=(atom.chain.length <= 1) ? atom.chain.padStart(1, ' ') : atom.chain.substr(0, 1);
                 if(atom.chain.length >= 2) {
                     let chainTmp = atom.chain.replace(/_/gi, '').substr(0, 2);
-                    if(bVastSearch) chainTmp = ' ' + chainTmp.substr(0,1); // VAST search only support one lettter chain ID
+                    if(bOneLetterChain) chainTmp = ' ' + chainTmp.substr(0,1); // VAST search only support one lettter chain ID
                     line += chainTmp;
                 }
                 else if(atom.chain.length == 1) {
@@ -79289,8 +79411,8 @@ class SaveFile {
             }
             else {
                 line += "1.00".padStart(6, ' ');
-                // line +=(atom.b) ? parseFloat(atom.b).toFixed(2).toString().padStart(6, ' ') : ' '.padStart(6, ' ');
-                let defaultBFactor = (bVastSearch) ? "1.0" : " ";
+                // let defaultBFactor = (bOneLetterChain) ? "1.0" : " ";
+                let defaultBFactor = " ";
                 line +=(atom.b) ? parseFloat(atom.b).toFixed(2).toString().padStart(6, ' ') : defaultBFactor.padStart(6, ' ');
                 line += ' '.padStart(10, ' ');
                 line += atom.elem.padStart(2, ' ');
@@ -79338,7 +79460,7 @@ class SaveFile {
             let resn = me.utilsCls.residueName2Abbr(atom.resn);
             let ss = this.secondary2Abbr(atom.ss);
 
-            if(chainid != prevChainid) {
+            if(chainid != prevChainid && !data[chainid]) {
                 data[chainid] = {"resi": [], "resn": [], "secondary": []};
             }
 
@@ -82862,7 +82984,7 @@ class iCn3DUI {
     //even when multiple iCn3D viewers are shown together.
     this.pre = this.cfg.divid + "_";
 
-    this.REVISION = '3.39.0';
+    this.REVISION = '3.40.3';
 
     // In nodejs, iCn3D defines "window = {navigator: {}}"
     this.bNode = (Object.keys(window).length < 2) ? true : false;
@@ -83024,7 +83146,7 @@ iCn3DUI.prototype.show3DStructure = async function(pdbStr) { let me = this;
     ic.molTitle = '';
     ic.loadCmd;
 
-    // set menus
+    // set menus 
     me.htmlCls.clickMenuCls.getHiddenMenusFromCache();
     me.htmlCls.clickMenuCls.applyShownMenus();