icn3d 3.23.6 → 3.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/icn3d.css +8 -3
  2. package/icn3d.js +322 -156
  3. package/icn3d.min.js +3 -3
  4. package/icn3d.module.js +322 -156
  5. package/package.json +1 -1
package/icn3d.module.js CHANGED
@@ -6586,7 +6586,7 @@ class ClickMenu {
6586
6586
  if(!bOneset) $("#" + me.pre + id2).resizable();
6587
6587
  }
6588
6588
 
6589
- applyShownMenus() { let me = this.icn3dui; me.icn3d;
6589
+ applyShownMenus(bNoSave) { let me = this.icn3dui; me.icn3d;
6590
6590
  let idArray = [];
6591
6591
  for(let id in me.htmlCls.allMenus) {
6592
6592
  if(me.htmlCls.shownMenus.hasOwnProperty(id)) {
@@ -6606,7 +6606,7 @@ class ClickMenu {
6606
6606
  }
6607
6607
 
6608
6608
  // save to localStorage
6609
- if(localStorage) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
6609
+ if(localStorage && !bNoSave) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
6610
6610
  }
6611
6611
 
6612
6612
  getHiddenMenusFromCache() { let me = this.icn3dui; me.icn3d;
@@ -7857,7 +7857,7 @@ class ClickMenu {
7857
7857
 
7858
7858
  let legendHtml = thisClass.setLegendHtml();
7859
7859
  //$("#" + me.pre + "legend").html(legendHtml).show();
7860
- $("#" + me.pre + "dl_legend").html(legendHtml);
7860
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
7861
7861
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
7862
7862
 
7863
7863
  ic.addTrackCls.setCustomFile('color', ic.startColor, ic.midColor, ic.endColor);
@@ -8209,11 +8209,27 @@ class ClickMenu {
8209
8209
  me.myEventCls.onIds("#" + me.pre + "mn6_igrefYes", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
8210
8210
  thisClass.setLogCmd('ig refnum on', true);
8211
8211
  await ic.refnumCls.showIgRefNum();
8212
+
8213
+ if(ic.bShowRefnum) {
8214
+ ic.opts.color = 'ig strand';
8215
+ ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
8216
+
8217
+ ic.selectionCls.selectAll_base();
8218
+ ic.hlUpdateCls.updateHlAll();
8219
+ ic.drawCls.draw();
8220
+ }
8212
8221
  });
8213
8222
 
8214
8223
  me.myEventCls.onIds("#" + me.pre + "mn6_igrefNo", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
8215
8224
  thisClass.setLogCmd('ig refnum off', true);
8216
8225
  await ic.refnumCls.hideIgRefNum();
8226
+
8227
+ ic.opts.color = 'chain';
8228
+ ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
8229
+
8230
+ ic.selectionCls.selectAll_base();
8231
+ ic.hlUpdateCls.updateHlAll();
8232
+ ic.drawCls.draw();
8217
8233
  });
8218
8234
 
8219
8235
 
@@ -10269,8 +10285,8 @@ class SetMenu {
10269
10285
  //}
10270
10286
 
10271
10287
  //!!!
10272
- //html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
10273
- //html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
10288
+ //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
10289
+ //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
10274
10290
  }
10275
10291
  else {
10276
10292
  //if(!me.cfg.hidelicense) html += this.getRadio('mn4_clr', 'mn1_delphi2', 'DelPhi<br><span style="padding-left:1.5em;">Potential ' + me.htmlCls.licenseStr + '</span>');
@@ -10351,14 +10367,15 @@ class SetMenu {
10351
10367
 
10352
10368
  html += this.getLink('mn6_contactmap', 'Contact Map', undefined, 1);
10353
10369
 
10354
- if(!me.cfg.notebook) {
10370
+ //if(!me.cfg.notebook) {
10355
10371
  html += this.getLink('mn1_mutation', 'Mutation ' + me.htmlCls.wifiStr, 1, 1);
10356
- }
10372
+ //}
10357
10373
 
10358
10374
  //html += this.getMenuSep();
10359
10375
  }
10360
10376
 
10361
- if(!me.cfg.notebook && !me.cfg.hidelicense) {
10377
+ //if(!me.cfg.notebook && !me.cfg.hidelicense) {
10378
+ if(!me.cfg.hidelicense) {
10362
10379
  html += this.getMenuText('mn1_delphiwrap', 'DelPhi Potential', undefined, 1, 1);
10363
10380
 
10364
10381
  html += "<ul>";
@@ -11172,6 +11189,7 @@ class Dialog {
11172
11189
 
11173
11190
  if(id === me.pre + 'dl_selectannotations' || id === me.pre + 'dl_graph' || id === me.pre + 'dl_linegraph' || id === me.pre + 'dl_scatterplot' || id === me.pre + 'dl_contactmap' || id === me.pre + 'dl_alignerrormap' || id === me.pre + 'dl_interactionsorted' || id === me.pre + 'dl_alignment') {
11174
11191
  $( "#" + id ).show();
11192
+ $( "#" + id + "_nb").show();
11175
11193
 
11176
11194
  height =(me.htmlCls.HEIGHT) * 0.5;
11177
11195
 
@@ -11216,7 +11234,10 @@ class Dialog {
11216
11234
  });
11217
11235
  }
11218
11236
  else {
11219
- if(ic.bRender) $( "#" + id ).show();
11237
+ if(ic.bRender) {
11238
+ $( "#" + id ).show();
11239
+ $( "#" + id + "_nb").show();
11240
+ }
11220
11241
 
11221
11242
  height = 'auto';
11222
11243
  width = 'auto';
@@ -11266,6 +11287,18 @@ class SetDialog {
11266
11287
  return html;
11267
11288
  }
11268
11289
 
11290
+ addNotebookTitle(id, title, bAddExtraDiv) { let me = this.icn3dui; me.icn3d;
11291
+ //return '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#1c94c4; width:100%"><span style="color:white; font-weight:bold">' + title + '</span>&nbsp;&nbsp;&nbsp;<span onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose" title="Close">x</span></div>';
11292
+
11293
+ let html = '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#5C9CCC; width:100%"><span style="color:white; font-weight:bold">' + title + '</span>&nbsp;&nbsp;&nbsp;<div onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose ui-icon ui-icon-close" title="Close"></div></div>';
11294
+
11295
+ if(bAddExtraDiv) {
11296
+ html += '<div id="' + me.pre + id + '_html"></div>';
11297
+ }
11298
+
11299
+ return html;
11300
+ }
11301
+
11269
11302
  //Set the html for all popup dialogs.
11270
11303
  setDialogs() { let me = this.icn3dui, ic = me.icn3d;
11271
11304
  if(me.bNode) return '';
@@ -11280,12 +11313,15 @@ class SetDialog {
11280
11313
 
11281
11314
  let divClass =(me.cfg.notebook) ? '' : 'icn3d-hidden';
11282
11315
  let dialogClass =(me.cfg.notebook) ? 'icn3d-hidden' : '';
11283
- html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog'>";
11316
+ //html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:" + me.htmlCls.CMD_HEIGHT + "px'>";
11317
+ html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:12px'>";
11284
11318
 
11285
11319
  html += me.htmlCls.divStr + "dl_2ddgm' class='" + dialogClass + " icn3d-dl_2ddgm' style='background-color:white'>";
11320
+ html += this.addNotebookTitle('dl_2ddgm', '2D Diagram', true);
11286
11321
  html += "</div>";
11287
11322
 
11288
11323
  html += me.htmlCls.divStr + "dl_2dctn' class='" + dialogClass + " icn3d-dl_2dctn' style='background-color:white'>";
11324
+ html += this.addNotebookTitle('dl_2dctn', '2D Cartoon');
11289
11325
 
11290
11326
  me.svgid_ct = me.pre + "icn3d_cartoon";
11291
11327
 
@@ -11313,14 +11349,17 @@ class SetDialog {
11313
11349
 
11314
11350
  // if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign || ic.bSymd) {
11315
11351
  html += me.htmlCls.divStr + "dl_alignment' class='" + dialogClass + "' style='background-color:white;'>";
11352
+ html += this.addNotebookTitle('dl_alignment', 'Dynamically Calculated Symmetry using SymD');
11316
11353
  html += me.htmlCls.divStr + "symd_info'></div>";
11317
11354
  html += me.htmlCls.divStr + "alignseqguide_wrapper'><br>" + me.htmlCls.setHtmlCls.setAlignSequenceGuide() + "</div>";
11318
11355
  html += me.htmlCls.divStr + "dl_sequence2' class='icn3d-dl_sequence'>";
11356
+ html += this.addNotebookTitle('dl_sequence2', 'Select Residues in Aligned Sequences');
11319
11357
  html += "</div>";
11320
11358
  html += "</div>";
11321
11359
  // }
11322
11360
 
11323
11361
  html += me.htmlCls.divStr + "dl_definedsets' class='" + dialogClass + "'>";
11362
+ html += this.addNotebookTitle('dl_definedsets', 'Defined Sets');
11324
11363
  html += me.htmlCls.divStr + "dl_setsmenu'>";
11325
11364
  html += "<b>Defined Sets:</b> <br/>";
11326
11365
  html += "<select id='" + me.pre + "atomsCustom' multiple size='6' style='min-width:130px;'>";
@@ -11344,12 +11383,14 @@ class SetDialog {
11344
11383
  html += me.htmlCls.setHtmlCls.setAdvanced(2);
11345
11384
 
11346
11385
  html += me.htmlCls.divStr + "dl_vastplus' class='" + dialogClass + "' style='max-width:500px'>";
11386
+ html += this.addNotebookTitle('dl_vastplus', 'Please input PDB ID for VAST+');
11347
11387
  html += "Note: <b>VAST+</b> finds other macromolecular structures that have a similar biological unit. To do this, VAST+ takes into consideration the complete set of 3D domains that VAST identified within a query structure, throughout all of its component protein molecules, and finds other macromolecular structures that have a similar set of proteins/3D domains.<br><br>";
11348
11388
  html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastpluspdbid' value='6VXX' size=8><br>";
11349
11389
  html += me.htmlCls.buttonStr + "reload_vastplus'>VAST+</button>";
11350
11390
  html += "</div>";
11351
11391
 
11352
11392
  html += me.htmlCls.divStr + "dl_vast' class='" + dialogClass + "' style='max-width:500px'>";
11393
+ html += this.addNotebookTitle('dl_vast', 'Pleaes input chain or PDB file for VAST');
11353
11394
  html += 'Note: <b>VAST</b> identifies 3D domains (substructures) within each protein structure in the Molecular Modeling Database (MMDB), and then finds other protein structures that have one or more similar 3D domains, using purely geometric criteria. You have two ways to do a VAST search.<br><br>';
11354
11395
 
11355
11396
  html += '<b>Optione 1</b>, search with your selection (all residues are selected by default) in the loaded structures:<br>';
@@ -11378,6 +11419,7 @@ class SetDialog {
11378
11419
  html += "</div>";
11379
11420
 
11380
11421
  html += me.htmlCls.divStr + "dl_foldseek' class='" + dialogClass + "' style='max-width:500px'>";
11422
+ html += this.addNotebookTitle('dl_foldseek', 'Submit your selection to Foldseek');
11381
11423
  html += '1. <input type="submit" id="' + me.pre + 'fssubmit" name="fssubmit" value="Submit"></input> your selection (all residues are selected by default) in the loaded structures to <a href="https://search.foldseek.com/search" target="_blank">Foldseek</a> web server.<br><br>';
11382
11424
  html += '2 (Optional). Once you see the structure neighbors, you can view the alignment in iCn3D by inputing a list of PDB chain IDs or AlphaFold UniProt IDs below. <br><br>The PDB chain IDs are the same as the record names such as "1HHO_A". The UniProt ID is the text between "AF-" and "-F1". For example, the UniProt ID for the record name "AF-P69905-F1-model_v4" is "P69905".<br><br>';
11383
11425
 
@@ -11386,16 +11428,19 @@ class SetDialog {
11386
11428
  html += "</div>";
11387
11429
 
11388
11430
  html += me.htmlCls.divStr + "dl_mmtfid' class='" + dialogClass + "'>";
11431
+ html += this.addNotebookTitle('dl_mmtfid', 'Please input an MMTF ID');
11389
11432
  html += "MMTF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmtfid' value='1TUP' size=8> ";
11390
11433
  html += me.htmlCls.buttonStr + "reload_mmtf'>Load</button>";
11391
11434
  html += "</div>";
11392
11435
 
11393
11436
  html += me.htmlCls.divStr + "dl_pdbid' class='" + dialogClass + "'>";
11437
+ html += this.addNotebookTitle('dl_pdbid', 'Please input a PDB ID');
11394
11438
  html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "pdbid' value='1TUP' size=8> ";
11395
11439
  html += me.htmlCls.buttonStr + "reload_pdb'>Load</button>";
11396
11440
  html += "</div>";
11397
11441
 
11398
11442
  html += me.htmlCls.divStr + "dl_afid' class='" + dialogClass + "'>";
11443
+ html += this.addNotebookTitle('dl_afid', 'Please input an AlphaFold UniProt ID');
11399
11444
  html += "Note: AlphaFold produces a per-residue confidence score (pLDDT) between 0 and 100:<br>";
11400
11445
  html += me.htmlCls.clickMenuCls.setAlphaFoldLegend() + "<br>";
11401
11446
 
@@ -11408,27 +11453,32 @@ class SetDialog {
11408
11453
  html += "</div>";
11409
11454
 
11410
11455
  html += me.htmlCls.divStr + "dl_refseqid' class='" + dialogClass + "'>";
11456
+ html += this.addNotebookTitle('dl_refseqid', 'Please input an NCBI protein accession');
11411
11457
  html += "NCBI Protein Accession: " + me.htmlCls.inputTextStr + "id='" + me.pre + "refseqid' value='NP_001743.1' size=8> ";
11412
11458
  html += me.htmlCls.buttonStr + "reload_refseq'>Load</button>";
11413
11459
  html += "</div>";
11414
11460
 
11415
11461
  html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
11462
+ html += this.addNotebookTitle('dl_opmid', 'Please input an OPM PDB ID');
11416
11463
  html += "<a href='https://opm.phar.umich.edu' target='_blank'>Orientations of Proteins in Membranes(OPM)</a> PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "opmid' value='6JXR' size=8> ";
11417
11464
  html += me.htmlCls.buttonStr + "reload_opm'>Load</button>";
11418
11465
  html += "</div>";
11419
11466
 
11420
11467
  html += me.htmlCls.divStr + "dl_pdbfile' class='" + dialogClass + "'>";
11468
+ html += this.addNotebookTitle('dl_pdbfile', 'Please input a PDB file');
11421
11469
  html += "Note: Several PDB files could be concatenated into a single PDB file. Use the line \"ENDMDL\" to separate PDB files.<br><br>";
11422
11470
  html += "PDB File: " + me.htmlCls.inputFileStr + " id='" + me.pre + "pdbfile' size=8> ";
11423
11471
  html += me.htmlCls.buttonStr + "reload_pdbfile'>Load</button>";
11424
11472
  html += "</div>";
11425
11473
 
11426
11474
  html += me.htmlCls.divStr + "dl_pdbfile_app' class='" + dialogClass + "'>";
11475
+ html += this.addNotebookTitle('dl_pdbfile_app', 'Please append PDB files');
11427
11476
  html += "Multiple PDB Files: <input type='file' multiple id='" + me.pre + "pdbfile_app' size=8> ";
11428
11477
  html += me.htmlCls.buttonStr + "reload_pdbfile_app'>Append</button>";
11429
11478
  html += "</div>";
11430
11479
 
11431
11480
  html += me.htmlCls.divStr + "dl_rescolorfile' class='" + dialogClass + "'>";
11481
+ html += this.addNotebookTitle('dl_rescolorfile', 'Please input a residue color file');
11432
11482
  html += '<div style="width:450px;">The custom JSON file on residue colors has the following format for proteins("ALA" and "ARG") and nucleotides("G" and "A"):<br>';
11433
11483
  html += '{"ALA":"#C8C8C8", "ARG":"#145AFF", ..., "G":"#008000", "A":"#6080FF", ...}</div><br>';
11434
11484
  html += "Residue Color File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "rescolorfile' size=8> ";
@@ -11436,6 +11486,7 @@ class SetDialog {
11436
11486
  html += "</div>";
11437
11487
 
11438
11488
  html += me.htmlCls.divStr + "dl_customcolor' class='" + dialogClass + "'>";
11489
+ html += this.addNotebookTitle('dl_customcolor', 'Please input a custom color file');
11439
11490
  html += " <input type='hidden' id='" + me.pre + "customcolor_chainid' value=''>";
11440
11491
  html += '<div style="width:450px;">The custom file for the structure has two columns separated by space or tab: ';
11441
11492
  html += 'residue number, and score in the range of 0-100. If you click "Apply Custom Color" button, ';
@@ -11463,6 +11514,7 @@ class SetDialog {
11463
11514
  html += "</div>";
11464
11515
 
11465
11516
  html += me.htmlCls.divStr + "dl_customref' class='" + dialogClass + "'>";
11517
+ html += this.addNotebookTitle('dl_customref', 'Please input a reference number file');
11466
11518
  html += '<div style="width:550px;">You can define your own reference numbers in a custom file using Excel, and then export it as a CSV file. An example file is shown below with cells separated by commas.<br>';
11467
11519
  html += '<pre>refnum,11,12,,21,22,,10C,11C,20C<br>';
11468
11520
  html += '1TUP_A,100,101,,,132,,,,<br>';
@@ -11476,17 +11528,20 @@ class SetDialog {
11476
11528
  html += "</div>";
11477
11529
 
11478
11530
  html += me.htmlCls.divStr + "dl_align' class='" + dialogClass + "'>";
11531
+ html += this.addNotebookTitle('dl_align', 'Please select residues in aligned sequences');
11479
11532
  html += "Enter the PDB IDs or MMDB IDs of the structures: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid1' value='2DN3' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid2' value='4N7N' size=8><br/><br/>";
11480
11533
  html += "<b>VAST+ based on VAST</b>: " + me.htmlCls.buttonStr + "reload_align_ori'>All Matching Molecules Superposed</button>" + me.htmlCls.space3 + me.htmlCls.buttonStr + "reload_align_refined'>Invariant Substructure Superposed</button><br><br>";
11481
11534
  html += "<b>VAST+ based on TM-align</b>: " + me.htmlCls.buttonStr + "reload_align_tmalign'>All Matching Molecules Superposed</button><br><br>";
11482
11535
  html += "</div>";
11483
11536
 
11484
11537
  html += me.htmlCls.divStr + "dl_alignaf' class='" + dialogClass + "'>";
11538
+ html += this.addNotebookTitle('dl_alignaf', 'Align AlphaFold structures');
11485
11539
  html += "Enter two <a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> IDs: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid1' value='P41327' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid2' value='P41331' size=8><br/><br/>";
11486
11540
  html += me.htmlCls.buttonStr + "reload_alignaf_tmalign'>Align with TM-align</button>" + me.htmlCls.buttonStr + "reload_alignaf' style='margin-left:30px'>Align with VAST</button>";
11487
11541
  html += "</div>";
11488
11542
 
11489
11543
  html += me.htmlCls.divStr + "dl_chainalign' class='" + dialogClass + "'>";
11544
+ html += this.addNotebookTitle('dl_chainalign', 'Align chains');
11490
11545
  html += "<div style='width:550px'>";
11491
11546
  html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
11492
11547
  html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -11496,6 +11551,7 @@ class SetDialog {
11496
11551
  html += "</div></div>";
11497
11552
 
11498
11553
  html += me.htmlCls.divStr + "dl_chainalign2' class='" + dialogClass + "'>";
11554
+ html += this.addNotebookTitle('dl_chainalign2', 'Align chains');
11499
11555
  html += "<div style='width:550px'>";
11500
11556
  html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
11501
11557
  html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids2' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -11507,11 +11563,13 @@ class SetDialog {
11507
11563
  html += "</div></div>";
11508
11564
 
11509
11565
  html += me.htmlCls.divStr + "dl_chainalign3' class='" + dialogClass + "'>";
11566
+ html += this.addNotebookTitle('dl_chainalign3', 'Align chains');
11510
11567
  html += "<div style='width:550px'>";
11511
11568
  html += this.getHtmlAlignResidueByResidue('chainalignids3', 'predefinedres', 'reload_chainalign_asym3');
11512
11569
  html += "</div></div>";
11513
11570
 
11514
11571
  html += me.htmlCls.divStr + "dl_realignresbyres' class='" + dialogClass + "'>";
11572
+ html += this.addNotebookTitle('dl_realignresbyres', 'Realign residue by residue');
11515
11573
  html += "<div style='width:550px'>";
11516
11574
  html += "<b>Option 1</b>: " + me.htmlCls.buttonStr + "realignSelection'><b>Realign Current Selection Residue by Residue</b></button><br/><br/>";
11517
11575
  html += "<b>Option 2</b>: <br>";
@@ -11519,6 +11577,7 @@ class SetDialog {
11519
11577
  html += "</div></div>";
11520
11578
 
11521
11579
  html += me.htmlCls.divStr + "dl_mutation' class='" + dialogClass + "'>";
11580
+ html += this.addNotebookTitle('dl_mutation', 'Mutation analysis');
11522
11581
  html += "<div style='width:500px'>";
11523
11582
  html += 'Please specify the mutations with a comma separated mutation list. Each mutation can be specified as "[<b>uppercase</b> PDB ID or AlphaFold UniProt ID]_[Chain Name]_[Residue Number]_[One Letter Mutant Residue]". E.g., the mutation of N501Y in the E chain of PDB 6M0J can be specified as "6M0J_E_501_Y". For AlphaFold structures, the "Chain ID" is "A".<br/>If you load a custom structure without PDB or UniProt ID, you can open "Seq. & Annotations" window and find the chain ID such as "stru_A". The part before the underscore is the structure ID, which can be used to specify the mutation such as "stru_A_...". Remember to choose "Show Mutation in: Current Page".<br/><br/>';
11524
11583
  html += "<div style='display:inline-block; width:110px'>Mutations: </div>" + me.htmlCls.inputTextStr + "id='" + me.pre + "mutationids' value='6M0J_E_484_K,6M0J_E_501_Y,6M0J_E_417_N' size=50><br/><br/>";
@@ -11537,25 +11596,30 @@ class SetDialog {
11537
11596
  html += "<br/><br/></div></div>";
11538
11597
 
11539
11598
  html += me.htmlCls.divStr + "dl_mol2file' class='" + dialogClass + "'>";
11599
+ html += this.addNotebookTitle('dl_mol2file', 'Please input a Mol2 file');
11540
11600
  html += "Mol2 File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mol2file' size=8> ";
11541
11601
  html += me.htmlCls.buttonStr + "reload_mol2file'>Load</button>";
11542
11602
  html += "</div>";
11543
11603
  html += me.htmlCls.divStr + "dl_sdffile' class='" + dialogClass + "'>";
11604
+ html += this.addNotebookTitle('dl_sdffile', 'Please input an SDF file');
11544
11605
  html += "SDF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "sdffile' size=8> ";
11545
11606
  html += me.htmlCls.buttonStr + "reload_sdffile'>Load</button>";
11546
11607
  html += "</div>";
11547
11608
  html += me.htmlCls.divStr + "dl_xyzfile' class='" + dialogClass + "'>";
11609
+ html += this.addNotebookTitle('dl_xyzfile', 'Please input an XYZ file');
11548
11610
  html += "XYZ File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xyzfile' size=8> ";
11549
11611
  html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
11550
11612
  html += "</div>";
11551
11613
 
11552
11614
  html += me.htmlCls.divStr + "dl_afmapfile' class='" + dialogClass + "'>";
11615
+ html += this.addNotebookTitle('dl_afmapfile', 'Please input an AlphaFold PAE file');
11553
11616
  html += "AlphaFold PAE File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> <br><br>";
11554
11617
  html += me.htmlCls.buttonStr + "reload_afmapfile'>Load Half PAE Map</button>"
11555
11618
  + me.htmlCls.buttonStr + "reload_afmapfilefull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
11556
11619
  html += "</div>";
11557
11620
 
11558
11621
  html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
11622
+ html += this.addNotebookTitle('dl_urlfile', 'Please input a file via URL');
11559
11623
  html += "File type: ";
11560
11624
  html += "<select id='" + me.pre + "filetype'>";
11561
11625
  html += me.htmlCls.optionStr + "'pdb' selected>PDB</option>";
@@ -11571,16 +11635,19 @@ class SetDialog {
11571
11635
  html += "</div>";
11572
11636
 
11573
11637
  html += me.htmlCls.divStr + "dl_mmciffile' class='" + dialogClass + "'>";
11638
+ html += this.addNotebookTitle('dl_mmciffile', 'Please input an mmCIF file');
11574
11639
  html += "mmCIF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mmciffile' value='1TUP' size=8> ";
11575
11640
  html += me.htmlCls.buttonStr + "reload_mmciffile'>Load</button>";
11576
11641
  html += "</div>";
11577
11642
 
11578
11643
  html += me.htmlCls.divStr + "dl_mmcifid' class='" + dialogClass + "'>";
11644
+ html += this.addNotebookTitle('dl_mmcifid', 'Please input an mmCIF ID');
11579
11645
  html += "mmCIF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmcifid' value='1TUP' size=8> ";
11580
11646
  html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
11581
11647
  html += "</div>";
11582
11648
 
11583
11649
  html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "' style='max-width:500px'>";
11650
+ html += this.addNotebookTitle('dl_mmdbid', 'Please input an MMDB ID');
11584
11651
  html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> <br><br>";
11585
11652
  html += me.htmlCls.buttonStr + "reload_mmdb_asym'>Load Asymmetric Unit (All Chains)</button>" + me.htmlCls.buttonStr + "reload_mmdb' style='margin-left:30px'>Load Biological Unit</button><br/><br/><br>";
11586
11653
  html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
@@ -11593,6 +11660,7 @@ class SetDialog {
11593
11660
  html += "</div>";
11594
11661
 
11595
11662
  html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
11663
+ html += this.addNotebookTitle('dl_mmdbafid', 'Please input a list of PDB/AlphaFold IDs');
11596
11664
  html += "List of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
11597
11665
  html += "<div style='display:inline-block; width:20px'></div>" + me.htmlCls.buttonStr + "reload_mmdbaf' style='width:150px'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px; width:250px'>Load Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
11598
11666
  html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
@@ -11607,6 +11675,7 @@ class SetDialog {
11607
11675
  html += "</div>";
11608
11676
 
11609
11677
  html += me.htmlCls.divStr + "dl_blast_rep_id' style='max-width:600px;' class='" + dialogClass + "'>";
11678
+ html += this.addNotebookTitle('dl_blast_rep_id', 'Align sequence to structure');
11610
11679
  html += "Enter a Sequence ID (or FASTA sequence) and the aligned protein accession, which can be found using the <a href='https://blast.ncbi.nlm.nih.gov/Blast.cgi?PROGRAM=blastp&PAGE_TYPE=BlastSearch' target='_blank'>BLAST</a> search with the Sequence ID or FASTA sequence as input. If the protein accession is not a PDB chain, the corresponding AlphaFold UniProt structure is used.<br><br> ";
11611
11680
  html += "<b>Sequence ID</b>(NCBI protein accession of a sequence): " + me.htmlCls.inputTextStr + "id='" + me.pre + "query_id' value='NP_001108451.1' size=8><br> ";
11612
11681
  html += "or FASTA sequence: <br><textarea id='" + me.pre + "query_fasta' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
@@ -11618,32 +11687,38 @@ class SetDialog {
11618
11687
  html += "</div>";
11619
11688
 
11620
11689
  html += me.htmlCls.divStr + "dl_yournote' class='" + dialogClass + "'>";
11690
+ html += this.addNotebookTitle('dl_yournote', 'Your Note');
11621
11691
  html += "Your note will be saved in the HTML file when you click \"File > Save File > iCn3D PNG Image\".<br><br>";
11622
11692
  html += "<textarea id='" + me.pre + "yournote' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;' placeholder='Enter your note here'></textarea><br>";
11623
11693
  html += me.htmlCls.buttonStr + "applyyournote'>Save</button>";
11624
11694
  html += "</div>";
11625
11695
 
11626
11696
  html += me.htmlCls.divStr + "dl_gi' class='" + dialogClass + "'>";
11697
+ html += this.addNotebookTitle('dl_gi', 'Please input an NCBI gi');
11627
11698
  html += "Protein gi: " + me.htmlCls.inputTextStr + "id='" + me.pre + "gi' value='1310960' size=8> ";
11628
11699
  html += me.htmlCls.buttonStr + "reload_gi'>Load</button>";
11629
11700
  html += "</div>";
11630
11701
 
11631
11702
  html += me.htmlCls.divStr + "dl_cid' class='" + dialogClass + "'>";
11703
+ html += this.addNotebookTitle('dl_cid', 'Please input a PubChem CID');
11632
11704
  html += "PubChem CID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
11633
11705
  html += me.htmlCls.buttonStr + "reload_cid'>Load</button>";
11634
11706
  html += "</div>";
11635
11707
 
11636
11708
  html += me.htmlCls.divStr + "dl_pngimage' class='" + dialogClass + "'>";
11709
+ html += this.addNotebookTitle('dl_pngimage', 'Please input an iCn3D PNG Image file');
11637
11710
  html += "iCn3D PNG image: " + me.htmlCls.inputFileStr + "id='" + me.pre + "pngimage'><br/>";
11638
11711
  html += me.htmlCls.buttonStr + "reload_pngimage' style='margin-top: 6px;'>Load</button>";
11639
11712
  html += "</div>";
11640
11713
 
11641
11714
  html += me.htmlCls.divStr + "dl_state' class='" + dialogClass + "'>";
11715
+ html += this.addNotebookTitle('dl_state', 'Please input a state file');
11642
11716
  html += "State file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "state'><br/>";
11643
11717
  html += me.htmlCls.buttonStr + "reload_state' style='margin-top: 6px;'>Load</button>";
11644
11718
  html += "</div>";
11645
11719
 
11646
11720
  html += me.htmlCls.divStr + "dl_fixedversion' style='max-width:500px' class='" + dialogClass + "'>";
11721
+ html += this.addNotebookTitle('dl_fixedversion', 'Use fixed version of iCn3D');
11647
11722
  html += "Since January 6, 2021, you can show the original view with the archived version of iCn3D by pasting your URL below and click \"Show Originial View\". Note the version in the parameter \"v\" was used to replace \"full.html\" with \"full_[v].html\" in the URL.<br><br>";
11648
11723
  html += "Share Link URL: " + me.htmlCls.inputTextStr + "id='" + me.pre + "sharelinkurl' size=60><br>";
11649
11724
  html += me.htmlCls.buttonStr + "reload_fixedversion'>Show Original View</button><br><br>";
@@ -11651,16 +11726,19 @@ class SetDialog {
11651
11726
 
11652
11727
 
11653
11728
  html += me.htmlCls.divStr + "dl_selection' class='" + dialogClass + "'>";
11729
+ html += this.addNotebookTitle('dl_selection', 'Load a selection file');
11654
11730
  html += "Selection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "selectionfile'><br/>";
11655
11731
  html += me.htmlCls.buttonStr + "reload_selectionfile' style='margin-top: 6px;'>Load</button>";
11656
11732
  html += "</div>";
11657
11733
 
11658
11734
  html += me.htmlCls.divStr + "dl_menuloadpref' class='" + dialogClass + "'>";
11735
+ html += this.addNotebookTitle('dl_menuloadpref', 'Load a preference file');
11659
11736
  html += "Preference file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "menupreffile'><br/>";
11660
11737
  html += me.htmlCls.buttonStr + "reload_menupreffile' style='margin-top: 6px;'>Load</button>";
11661
11738
  html += "</div>";
11662
11739
 
11663
11740
  html += me.htmlCls.divStr + "dl_dsn6' class='" + dialogClass + "'>";
11741
+ html += this.addNotebookTitle('dl_dsn6', 'Load a DSN6 file');
11664
11742
  html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
11665
11743
 
11666
11744
  html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigma2fofc'>";
@@ -11683,6 +11761,7 @@ class SetDialog {
11683
11761
  html += "</div>";
11684
11762
 
11685
11763
  html += me.htmlCls.divStr + "dl_dsn6url' class='" + dialogClass + "'>";
11764
+ html += this.addNotebookTitle('dl_dsn6url', 'Load a selection file via a URL');
11686
11765
  html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
11687
11766
 
11688
11767
  html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigmaurl2fofc'>";
@@ -11704,6 +11783,7 @@ class SetDialog {
11704
11783
  html += "</div>";
11705
11784
 
11706
11785
  html += me.htmlCls.divStr + "dl_clr' class='" + dialogClass + "'>";
11786
+ html += this.addNotebookTitle('dl_clr', 'Pick a color');
11707
11787
  html += "Click in the input box to use the color picker:<br><br> ";
11708
11788
  html += "Custom Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "colorcustom' value='FF0000' size=8> ";
11709
11789
  html += me.htmlCls.buttonStr + "applycustomcolor'>Apply</button>";
@@ -11715,6 +11795,7 @@ class SetDialog {
11715
11795
  html += me.htmlCls.setHtmlCls.getPotentialHtml('url', dialogClass);
11716
11796
 
11717
11797
  html += me.htmlCls.divStr + "dl_symmetry' class='" + dialogClass + "'><br>";
11798
+ html += this.addNotebookTitle('dl_symmetry', 'Symmetry');
11718
11799
  html += me.htmlCls.divNowrapStr + "Symmetry: <select id='" + me.pre + "selectSymmetry'>";
11719
11800
  html += "</select>" + me.htmlCls.space3;
11720
11801
  html += me.htmlCls.buttonStr + "applysymmetry'>Apply</button>" + me.htmlCls.space3;
@@ -11722,10 +11803,12 @@ class SetDialog {
11722
11803
  html += "</div>";
11723
11804
 
11724
11805
  html += me.htmlCls.divStr + "dl_symd' style='max-width:400px' class='" + dialogClass + "'><br>";
11806
+ html += this.addNotebookTitle('dl_symd', 'Dynamically symmetry calculation using SymD');
11725
11807
 
11726
11808
  html += "</div>";
11727
11809
 
11728
11810
  html += me.htmlCls.divStr + "dl_contact' class='" + dialogClass + "'>";
11811
+ html += this.addNotebookTitle('dl_contact', 'Contact Map');
11729
11812
  html += "<span style='white-space:nowrap;font-weight:bold;'>Distance: <select id='" + me.pre + "contactdist'>";
11730
11813
  html += me.htmlCls.setHtmlCls.getOptionHtml(['4', '5', '6', '7', '8', '9', '10'], 4);
11731
11814
  html += "</select></span>";
@@ -11738,6 +11821,7 @@ class SetDialog {
11738
11821
  html += "</div>";
11739
11822
 
11740
11823
  html += me.htmlCls.divStr + "dl_hbonds' class='" + dialogClass + "'>";
11824
+ html += this.addNotebookTitle('dl_hbonds', 'Interaction Analysis');
11741
11825
  html += "1. Choose interaction types and their thresholds:<br>";
11742
11826
  html += "<div class='icn3d-box'><table border=0 width=450><tr>";
11743
11827
  html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_hbond' checked>Hydrogen Bonds <span style='background-color:#" + me.htmlCls.hbondColor + "'>" + me.htmlCls.space3 + "</span></td>";
@@ -11836,6 +11920,7 @@ class SetDialog {
11836
11920
  html += "</div>";
11837
11921
 
11838
11922
  html += me.htmlCls.divStr + "dl_realign' class='" + dialogClass + "'>";
11923
+ html += this.addNotebookTitle('dl_realign', 'Realign by sequence');
11839
11924
 
11840
11925
  html += me.htmlCls.divNowrapStr + "1. Select sets below <br>or use your current selection:</div><br>";
11841
11926
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealign' multiple size='5' style='min-width:130px;'>";
@@ -11845,6 +11930,7 @@ class SetDialog {
11845
11930
  html += "</div>";
11846
11931
 
11847
11932
  html += me.htmlCls.divStr + "dl_realignbystruct' class='" + dialogClass + "' style='max-width:500px'>";
11933
+ html += this.addNotebookTitle('dl_realignbystruct', 'Realign by structure');
11848
11934
 
11849
11935
  //html += "<div><b>1</b>. There are two options to align chains. Option \"a\" is to select a list of chains below, and align all chains to the first chain. Option \"b\" is to select sets below or use your current selection, and align all chains pairwise.</div><br>";
11850
11936
  html += "<div><b>1</b>. Select sets below or use your current selection.</div><br>";
@@ -11860,6 +11946,7 @@ class SetDialog {
11860
11946
  html += "</div>";
11861
11947
 
11862
11948
  html += me.htmlCls.divStr + "dl_realigntwostru' class='" + dialogClass + "'>";
11949
+ html += this.addNotebookTitle('dl_realigntwostru', 'Realign two structure complexes');
11863
11950
 
11864
11951
  html += me.htmlCls.divNowrapStr + "1. Select sets below or use your current selection:</div><br>";
11865
11952
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealignByStruct2' multiple size='5' style='min-width:130px;'>";
@@ -11872,6 +11959,7 @@ class SetDialog {
11872
11959
 
11873
11960
 
11874
11961
  html += me.htmlCls.divStr + "dl_colorspectrumacrosssets' class='" + dialogClass + "'>";
11962
+ html += this.addNotebookTitle('dl_colorspectrumacrosssets', 'Set color spectrum across sets');
11875
11963
 
11876
11964
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
11877
11965
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrumAcross' multiple size='5' style='min-width:130px;'>";
@@ -11882,7 +11970,7 @@ class SetDialog {
11882
11970
 
11883
11971
 
11884
11972
  html += me.htmlCls.divStr + "dl_colorspectrumbysets' class='" + dialogClass + "'>";
11885
-
11973
+ html += this.addNotebookTitle('dl_colorspectrumbysets', 'Set color spectrum for residues in sets');
11886
11974
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
11887
11975
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrum' multiple size='5' style='min-width:130px;'>";
11888
11976
  html += "</select></div>";
@@ -11892,7 +11980,7 @@ class SetDialog {
11892
11980
 
11893
11981
 
11894
11982
  html += me.htmlCls.divStr + "dl_colorrainbowacrosssets' class='" + dialogClass + "'>";
11895
-
11983
+ html += this.addNotebookTitle('dl_colorrainbowacrosssets', 'Set color rainbow across sets');
11896
11984
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
11897
11985
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbowAcross' multiple size='5' style='min-width:130px;'>";
11898
11986
  html += "</select></div>";
@@ -11902,7 +11990,7 @@ class SetDialog {
11902
11990
 
11903
11991
 
11904
11992
  html += me.htmlCls.divStr + "dl_colorrainbowbysets' class='" + dialogClass + "'>";
11905
-
11993
+ html += this.addNotebookTitle('dl_colorrainbowbysets', 'Set color rainbow for residues in sets');
11906
11994
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
11907
11995
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbow' multiple size='5' style='min-width:130px;'>";
11908
11996
  html += "</select></div>";
@@ -11912,12 +12000,15 @@ class SetDialog {
11912
12000
 
11913
12001
 
11914
12002
  html += me.htmlCls.divStr + "dl_allinteraction' style='background-color:white' class='" + dialogClass + "'>";
12003
+ html += this.addNotebookTitle('dl_allinteraction', 'All interactions', true);
11915
12004
  html += "</div>";
11916
12005
 
11917
12006
  html += me.htmlCls.divStr + "dl_interactionsorted' style='background-color:white' class='" + dialogClass + "'>";
12007
+ html += this.addNotebookTitle('dl_interactionsorted', 'Sorted interactions', true);
11918
12008
  html += "</div>";
11919
12009
 
11920
12010
  html += me.htmlCls.divStr + "dl_linegraph' style='background-color:white' class='" + dialogClass + "'>";
12011
+ html += this.addNotebookTitle('dl_linegraph', '2D Interaction Network');
11921
12012
 
11922
12013
  html += me.htmlCls.divNowrapStr + '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
11923
12014
  + me.pre + 'dl_linegraphcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
@@ -11948,6 +12039,7 @@ class SetDialog {
11948
12039
  html += "</div>";
11949
12040
 
11950
12041
  html += me.htmlCls.divStr + "dl_scatterplot' style='background-color:white' class='" + dialogClass + "'>";
12042
+ html += this.addNotebookTitle('dl_scatterplot', '2D Interaction Map');
11951
12043
 
11952
12044
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3;
11953
12045
 
@@ -11974,6 +12066,7 @@ class SetDialog {
11974
12066
  html += "</div>";
11975
12067
 
11976
12068
  html += me.htmlCls.divStr + "dl_contactmap' style='background-color:white' class='" + dialogClass + "'>";
12069
+ html += this.addNotebookTitle('dl_contactmap', 'Contact Map');
11977
12070
 
11978
12071
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
11979
12072
 
@@ -11992,6 +12085,7 @@ class SetDialog {
11992
12085
  html += "</div>";
11993
12086
 
11994
12087
  html += me.htmlCls.divStr + "dl_alignerrormap' style='background-color:white' class='" + dialogClass + "'>";
12088
+ html += this.addNotebookTitle('dl_alignerrormap', 'PAE Map');
11995
12089
 
11996
12090
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
11997
12091
 
@@ -12019,6 +12113,7 @@ class SetDialog {
12019
12113
  html += "</div>";
12020
12114
 
12021
12115
  html += me.htmlCls.divStr + "dl_elecmap2fofc' class='" + dialogClass + "'>";
12116
+ html += this.addNotebookTitle('dl_elecmap2fofc', 'Electron Density 2F0-Fc Map');
12022
12117
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigma2fofc'>";
12023
12118
 
12024
12119
  html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 3);
@@ -12027,6 +12122,7 @@ class SetDialog {
12027
12122
  html += "</div>";
12028
12123
 
12029
12124
  html += me.htmlCls.divStr + "dl_elecmapfofc' class='" + dialogClass + "'>";
12125
+ html += this.addNotebookTitle('dl_elecmapfofc', 'Electron Density F0-Fc Map');
12030
12126
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigmafofc'>";
12031
12127
 
12032
12128
  html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 5);
@@ -12035,6 +12131,7 @@ class SetDialog {
12035
12131
  html += "</div>";
12036
12132
 
12037
12133
  html += me.htmlCls.divStr + "dl_emmap' class='" + dialogClass + "'>";
12134
+ html += this.addNotebookTitle('dl_emmap', 'EM Density Map');
12038
12135
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "empercentage'>";
12039
12136
 
12040
12137
  html += me.htmlCls.setHtmlCls.getOptionHtml(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'], 3);
@@ -12043,6 +12140,7 @@ class SetDialog {
12043
12140
  html += "</div>";
12044
12141
 
12045
12142
  html += me.htmlCls.divStr + "dl_aroundsphere' class='" + dialogClass + "'>";
12143
+ html += this.addNotebookTitle('dl_aroundsphere', 'Select a sphere around a set of residues');
12046
12144
  html += me.htmlCls.divNowrapStr + "1. Select the first set:</div>";
12047
12145
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomSphere2' multiple size='3' style='min-width:130px;'>";
12048
12146
  html += "</select></div><br>";
@@ -12057,6 +12155,7 @@ class SetDialog {
12057
12155
  html += "</div>";
12058
12156
 
12059
12157
  html += me.htmlCls.divStr + "dl_adjustmem' class='" + dialogClass + "'>";
12158
+ html += this.addNotebookTitle('dl_adjustmem', 'Adjust membranes');
12060
12159
  html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
12061
12160
  html += me.htmlCls.divNowrapStr + "1. Extracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "extra_mem_z' value='' size='3'> &#197;</div><br/>";
12062
12161
  html += me.htmlCls.divNowrapStr + "2. intracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "intra_mem_z' value='' size='3'> &#197;</div><br/>";
@@ -12064,6 +12163,7 @@ class SetDialog {
12064
12163
  html += "</div>";
12065
12164
 
12066
12165
  html += me.htmlCls.divStr + "dl_selectplane' class='" + dialogClass + "'>";
12166
+ html += this.addNotebookTitle('dl_selectplane', 'Select a plane');
12067
12167
  html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
12068
12168
  html += me.htmlCls.divNowrapStr + "1. Z-axis position of the first X-Y plane: " + me.htmlCls.inputTextStr + "id='" + me.pre + "selectplane_z1' value='15' size='3'> &#197;</div><br/>";
12069
12169
  html += me.htmlCls.divNowrapStr + "2. Z-axis position of the second X-Y plane: " + me.htmlCls.inputTextStr + "id='" + me.pre + "selectplane_z2' value='-15' size='3'> &#197;</div><br/>";
@@ -12071,6 +12171,7 @@ class SetDialog {
12071
12171
  html += "</div>";
12072
12172
 
12073
12173
  html += me.htmlCls.divStr + "dl_addlabel' class='" + dialogClass + "'>";
12174
+ html += this.addNotebookTitle('dl_addlabel', 'Add labels between two atoms');
12074
12175
  html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext' value='Text' size=4><br/>";
12075
12176
  html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize' value='18' size=4 maxlength=2><br/>";
12076
12177
  html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor' value='" + defaultColor + "' size=4><br/>";
@@ -12085,6 +12186,7 @@ class SetDialog {
12085
12186
  html += "</div>";
12086
12187
 
12087
12188
  html += me.htmlCls.divStr + "dl_addlabelselection' class='" + dialogClass + "'>";
12189
+ html += this.addNotebookTitle('dl_addlabelselection', 'Add labels for your selection');
12088
12190
  html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext2' value='Text' size=4><br/>";
12089
12191
  html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize2' value='18' size=4 maxlength=2><br/>";
12090
12192
  html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor2' value='" + defaultColor + "' size=4><br/>";
@@ -12093,11 +12195,13 @@ class SetDialog {
12093
12195
  html += "</div>";
12094
12196
 
12095
12197
  html += me.htmlCls.divStr + "dl_labelColor' class='" + dialogClass + "'>";
12198
+ html += this.addNotebookTitle('dl_labelColor', 'Change label color');
12096
12199
  html += "Color for all labels: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolorall' value='" + defaultColor + "' size=4><br/><br/>";
12097
12200
  html += me.htmlCls.spanNowrapStr + me.htmlCls.buttonStr + "applylabelcolor'>Display</button></span>";
12098
12201
  html += "</div>";
12099
12202
 
12100
12203
  html += me.htmlCls.divStr + "dl_distance' class='" + dialogClass + "'>";
12204
+ html += this.addNotebookTitle('dl_distance', 'Measure distance');
12101
12205
  if(me.utilsCls.isMobile()) {
12102
12206
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
12103
12207
  }
@@ -12109,6 +12213,7 @@ class SetDialog {
12109
12213
  html += "</div>";
12110
12214
 
12111
12215
  html += me.htmlCls.divStr + "dl_stabilizer' class='" + dialogClass + "'>";
12216
+ html += this.addNotebookTitle('dl_stabilizer', 'Add a stabilizer');
12112
12217
  if(me.utilsCls.isMobile()) {
12113
12218
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
12114
12219
  }
@@ -12120,6 +12225,7 @@ class SetDialog {
12120
12225
  html += "</div>";
12121
12226
 
12122
12227
  html += me.htmlCls.divStr + "dl_disttwosets' class='" + dialogClass + "'>";
12228
+ html += this.addNotebookTitle('dl_disttwosets', 'Measure the distance between two sets');
12123
12229
  html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
12124
12230
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
12125
12231
 
@@ -12141,6 +12247,7 @@ class SetDialog {
12141
12247
 
12142
12248
 
12143
12249
  html += me.htmlCls.divStr + "dl_linebtwsets' class='" + dialogClass + "'>";
12250
+ html += this.addNotebookTitle('dl_linebtwsets', 'Add a line between two sets');
12144
12251
  html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
12145
12252
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
12146
12253
 
@@ -12174,6 +12281,7 @@ class SetDialog {
12174
12281
 
12175
12282
 
12176
12283
  html += me.htmlCls.divStr + "dl_cartoonshape' class='" + dialogClass + "'>";
12284
+ html += this.addNotebookTitle('dl_cartoonshape', 'Cartoon Shape');
12177
12285
  html += me.htmlCls.spanNowrapStr + "1. Select a set:</span><br/>";
12178
12286
  html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "cartoonshape' multiple size='5' style='min-width:130px;'>";
12179
12287
  html += "</select></div><br>";
@@ -12196,6 +12304,7 @@ class SetDialog {
12196
12304
 
12197
12305
 
12198
12306
  html += me.htmlCls.divStr + "dl_distmanysets' class='" + dialogClass + "'>";
12307
+ html += this.addNotebookTitle('dl_distmanysets', 'Measure distances among many sets');
12199
12308
  html += me.htmlCls.spanNowrapStr + "1. Select sets for pairwise distances</span><br/>";
12200
12309
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
12201
12310
 
@@ -12215,6 +12324,7 @@ class SetDialog {
12215
12324
  html += "</div>";
12216
12325
 
12217
12326
  html += me.htmlCls.divStr + "dl_stabilizer_rm' class='" + dialogClass + "'>";
12327
+ html += this.addNotebookTitle('dl_stabilizer_rm', 'Remove a stabilizer');
12218
12328
  if(me.utilsCls.isMobile()) {
12219
12329
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
12220
12330
  }
@@ -12225,14 +12335,17 @@ class SetDialog {
12225
12335
  html += "</div>";
12226
12336
 
12227
12337
  html += me.htmlCls.divStr + "dl_thickness' class='" + dialogClass + "'>";
12338
+ html += this.addNotebookTitle('dl_thickness', 'Set thickness');
12228
12339
  html += me.htmlCls.setHtmlCls.setThicknessHtml('3dprint');
12229
12340
  html += "</div>";
12230
12341
 
12231
12342
  html += me.htmlCls.divStr + "dl_thickness2' class='" + dialogClass + "'>";
12343
+ html += this.addNotebookTitle('dl_thickness2', 'Set thickness');
12232
12344
  html += me.htmlCls.setHtmlCls.setThicknessHtml('style');
12233
12345
  html += "</div>";
12234
12346
 
12235
12347
  html += me.htmlCls.divStr + "dl_menupref' class='" + dialogClass + "'>";
12348
+ html += this.addNotebookTitle('dl_menupref', 'Preferences for menus');
12236
12349
  html += "<b>Note</b>: The following parameters will be saved in cache. You just need to set them once. <br><br>";
12237
12350
 
12238
12351
  html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_menupref'>Apply</button></span>";
@@ -12248,6 +12361,7 @@ class SetDialog {
12248
12361
  html += "</div>";
12249
12362
 
12250
12363
  html += me.htmlCls.divStr + "dl_addtrack' class='" + dialogClass + "'>";
12364
+ html += this.addNotebookTitle('dl_addtrack', 'Add a track');
12251
12365
  html += " <input type='hidden' id='" + me.pre + "track_chainid' value=''>";
12252
12366
 
12253
12367
  html += me.htmlCls.divStr + "dl_addtrack_tabs' style='border:0px;'>";
@@ -12303,6 +12417,7 @@ class SetDialog {
12303
12417
  html += "</div>";
12304
12418
 
12305
12419
  html += me.htmlCls.divStr + "dl_saveselection' class='" + dialogClass + "'>";
12420
+ html += this.addNotebookTitle('dl_saveselection', 'Save Selection');
12306
12421
  let index =(ic && ic.defNames2Atoms) ? Object.keys(ic.defNames2Atoms).length : 1;
12307
12422
  let suffix = '';
12308
12423
  html += "Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "seq_command_name" + suffix + "' value='seq_" + index + "' size='5'> <br>";
@@ -12312,6 +12427,7 @@ class SetDialog {
12312
12427
 
12313
12428
 
12314
12429
  html += me.htmlCls.divStr + "dl_copyurl' style='width:520px;' class='" + dialogClass + "'>";
12430
+ html += this.addNotebookTitle('dl_copyurl', 'Share Link');
12315
12431
  html += "Please copy one of the URLs below. They show the same result.<br>(To add a title to share link, click \"Windows > Your Note\" and click \"File > Share Link\" again.)<br><br>";
12316
12432
  html += "Original URL with commands: <br><textarea id='" + me.pre + "ori_url' rows='4' style='width:100%'></textarea><br><br>";
12317
12433
  html += "Lifelong Short URL:(To replace this URL, send a pull request to update share.html at <a href='https://github.com/ncbi/icn3d' target='_blank'>iCn3D GitHub</a>)<br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "short_url' value='' style='width:100%'><br><br>";
@@ -12319,6 +12435,7 @@ class SetDialog {
12319
12435
  html += "</div>";
12320
12436
 
12321
12437
  html += me.htmlCls.divStr + "dl_selectannotations' class='" + dialogClass + " icn3d-annotation' style='background-color:white;'>";
12438
+ html += this.addNotebookTitle('dl_selectannotations', 'Sequences & Annotations');
12322
12439
 
12323
12440
  html += me.htmlCls.divStr + "dl_annotations_tabs'>";
12324
12441
 
@@ -12347,6 +12464,7 @@ class SetDialog {
12347
12464
  html += "</div>";
12348
12465
 
12349
12466
  html += me.htmlCls.divStr + "dl_graph' style='background-color:white;' class='" + dialogClass + "'>";
12467
+ html += this.addNotebookTitle('dl_graph', 'Interactions');
12350
12468
  me.svgid = me.pre + 'icn3d_viz';
12351
12469
  html += '<style>';
12352
12470
  html += '#' + me.svgid + ' svg { border: 1px solid; font: 13px sans-serif; text-anchor: end; }';
@@ -12401,6 +12519,7 @@ class SetDialog {
12401
12519
  html += "</div>";
12402
12520
 
12403
12521
  html += me.htmlCls.divStr + "dl_area' class='" + dialogClass + "'>";
12522
+ html += this.addNotebookTitle('dl_area', 'Surface Area');
12404
12523
  html += "Solvent Accessible Surface Area(SASA) calculated using the <a href='https://journals.plos.org/plosone/article?id=10.1371/journal.pone.0008140' target='_blank'>EDTSurf algorithm</a>: <br>";
12405
12524
  html += '(0-20% out is considered "in". 50-100% out is considered "out".)<br><br>';
12406
12525
  html += "<b>Toal</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "areavalue' value='' size='10'> &#8491;<sup>2</sup><br><br>";
@@ -12408,19 +12527,23 @@ class SetDialog {
12408
12527
  html += "</div>";
12409
12528
 
12410
12529
  html += me.htmlCls.divStr + "dl_colorbyarea' class='" + dialogClass + "'>";
12530
+ html += this.addNotebookTitle('dl_colorbyarea', 'Color by surface area');
12411
12531
  html += "<div style='width:500px'>Color each residue based on the percentage of solvent accessilbe surface area. The color ranges from blue, to white, to red for a percentage of 0, 35(variable), and 100, respectively.</div><br>";
12412
12532
  html += "<b>Middle Percentage(White)</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "midpercent' value='35' size='10'>% <br><br>";
12413
12533
  html += "<button style='white-space:nowrap;' id='" + me.pre + "applycolorbyarea'>Color</button><br/><br/>";
12414
12534
  html += "</div>";
12415
12535
 
12416
12536
  html += me.htmlCls.divStr + "dl_rmsd' class='" + dialogClass + "' style='max-width:300px'>";
12537
+ html += this.addNotebookTitle('dl_rmsd', 'RMSD', true);
12417
12538
 
12418
12539
  html += "</div>";
12419
12540
 
12420
12541
  html += me.htmlCls.divStr + "dl_buriedarea' class='" + dialogClass + "'>";
12542
+ html += this.addNotebookTitle('dl_buriedarea', 'Buried surface area', true);
12421
12543
  html += "</div>";
12422
12544
 
12423
12545
  html += me.htmlCls.divStr + "dl_propbypercentout' class='" + dialogClass + "'>";
12546
+ html += this.addNotebookTitle('dl_propbypercentout', 'Select residues basen on solvent accessilbe surface area');
12424
12547
  html += "<div style='width:400px'>Select residue based on the percentage of solvent accessilbe surface area. The values are in the range of 0-100.</div><br>";
12425
12548
  html += "<b>Min Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minpercentout' value='0' size='10'>% <br>";
12426
12549
  html += "<b>Max Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxpercentout' value='100' size='10'>% <br>";
@@ -12428,6 +12551,7 @@ class SetDialog {
12428
12551
  html += "</div>";
12429
12552
 
12430
12553
  html += me.htmlCls.divStr + "dl_propbybfactor' class='" + dialogClass + "'>";
12554
+ html += this.addNotebookTitle('dl_propbybfactor', 'Select residues basen on B-factor');
12431
12555
  html += "<div style='width:400px'>Select residue based on B-factor. The values are in the range of 0-100.</div><br>";
12432
12556
  html += "<b>Min B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minbfactor' value='0' size='10'>% <br>";
12433
12557
  html += "<b>Max B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxbfactor' value='100' size='10'>% <br>";
@@ -12435,9 +12559,11 @@ class SetDialog {
12435
12559
  html += "</div>";
12436
12560
 
12437
12561
  html += me.htmlCls.divStr + "dl_legend' class='" + dialogClass + "' style='max-width:500px; background-color:white'>";
12562
+ html += this.addNotebookTitle('dl_legend', 'Legend', true);
12438
12563
  html += "</div>";
12439
12564
 
12440
12565
  html += me.htmlCls.divStr + "dl_disttable' class='" + dialogClass + "'>";
12566
+ html += this.addNotebookTitle('dl_disttable', 'Distance Table', true);
12441
12567
  html += "</div>";
12442
12568
 
12443
12569
  html += "</div>";
@@ -15753,6 +15879,8 @@ class SetHtml {
15753
15879
  }
15754
15880
 
15755
15881
  html += me.htmlCls.divStr + "dl_" + name1 + "' class='" + dialogClass + "'>";
15882
+ html += me.htmlCls.setDialogCls.addNotebookTitle("dl_" + name1, 'DelPhi Potential');
15883
+
15756
15884
  html += me.htmlCls.divStr + "dl_" + name1 + "_tabs' style='border:0px;'>";
15757
15885
  html += "<ul>";
15758
15886
  html += "<li><a href='#" + me.pre + name1 + "tab1'>" + tab1 + "</a></li>";
@@ -16066,7 +16194,7 @@ class SetHtml {
16066
16194
  statefile = imageStr.substr(posState + matchedStrState.length, posStateEnd - posState- matchedStrState.length);
16067
16195
  //statefile = decodeURIComponent(statefile);
16068
16196
  statefile = decodeURIComponent(statefile + "\n" + commandStr);
16069
-
16197
+
16070
16198
  if(type === 'pdb') {
16071
16199
  await ic.pdbParserCls.loadPdbData(data);
16072
16200
 
@@ -23068,7 +23196,7 @@ class Scene {
23068
23196
  ic.cam.remove( ic.canvasUI.mesh );
23069
23197
  }
23070
23198
 
23071
- if (controllerInfo !== undefined){
23199
+ if (controller && controllerInfo !== undefined){
23072
23200
  // "trigger":{"button":0},
23073
23201
  // "squeeze":{"button":1},
23074
23202
  // "thumbstick":{"button":3,"xAxis":2,"yAxis":3}, "touchpad":{"button":2,"xAxis":0,"yAxis":1},
@@ -23150,8 +23278,11 @@ class Scene {
23150
23278
  ic.cam.remove( ic.canvasUI.mesh );
23151
23279
  } },
23152
23280
  sphere: { type: "button", position:{ top: margin + (btnHeight + margin), left: margin + 4*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23153
- ic.setOptionCls.setStyle("proteins", "sphere");
23154
- ic.setOptionCls.setStyle("nucleotides", "sphere");
23281
+ // ic.setOptionCls.setStyle("proteins", "sphere");
23282
+ // ic.setOptionCls.setStyle("nucleotides", "sphere");
23283
+ ic.opts['surface'] = 'molecular surface';
23284
+ ic.applyMapCls.applySurfaceOptions();
23285
+
23155
23286
  ic.cam.remove( ic.canvasUI.mesh );
23156
23287
  } },
23157
23288
 
@@ -23217,14 +23348,17 @@ class Scene {
23217
23348
  //ic.canvasUILog.updateElement( "info", "ERROR: " + err );
23218
23349
  }
23219
23350
  } },
23220
- // delphi: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 2*(btnWidth + margin)}, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23221
- // ic.debugStr = '###ic.hAtoms: ' + Object.keys(ic.hAtoms).length + ' ic.dAtoms: ' + Object.keys(ic.dAtoms).length;
23222
- // let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
23223
- // ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
23224
- // ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
23225
- // ic.cam.remove( ic.canvasUI.mesh );
23226
- // } },
23227
- removeLabel: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 2*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23351
+ delphi: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 2*(btnWidth + margin)}, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: async function() {
23352
+ let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
23353
+ ic.phisurftype = 22; // molecular surface
23354
+ ic.phisurfop = 1.0; // opacity
23355
+ ic.phisurfwf = 'no'; // wireframe
23356
+ await ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
23357
+
23358
+ //ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
23359
+ ic.cam.remove( ic.canvasUI.mesh );
23360
+ } },
23361
+ removeLabel: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 3*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23228
23362
  for(let name in ic.labels) {
23229
23363
  //if(name === 'residue' || name === 'custom') {
23230
23364
  ic.labels[name] = [];
@@ -23234,7 +23368,7 @@ class Scene {
23234
23368
  ic.drawCls.draw();
23235
23369
  ic.cam.remove( ic.canvasUI.mesh );
23236
23370
  } },
23237
- reset: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 3*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23371
+ reset: { type: "button", position:{ top: margin + 4*(btnHeight + margin), left: margin + 4*(btnWidth + margin) }, width: btnWidth, height: btnHeight, fontColor: fontColor, fontSize: fontSize, backgroundColor: bkgdColor, hover: hoverColor, onSelect: function() {
23238
23372
  ic.selectionCls.resetAll();
23239
23373
 
23240
23374
  ic.cam.remove( ic.canvasUI.mesh );
@@ -23254,7 +23388,8 @@ class Scene {
23254
23388
  ribbon: "Ribbon",
23255
23389
  schematic: "Schem.",
23256
23390
  stick: "Stick",
23257
- sphere: "Sphere",
23391
+ //sphere: "Sphere",
23392
+ sphere: "Surface",
23258
23393
 
23259
23394
  color: "Color",
23260
23395
  rainbow: "Rainbow",
@@ -23274,7 +23409,7 @@ class Scene {
23274
23409
 
23275
23410
  analysis: "Analysis",
23276
23411
  interaction: "Interact",
23277
- //delphi: "DelPhi",
23412
+ delphi: "DelPhi",
23278
23413
  removeLabel: "No Label",
23279
23414
  reset: "Reset"
23280
23415
  };
@@ -23325,6 +23460,8 @@ class Scene {
23325
23460
 
23326
23461
  for(let i=0; i<=1; i++){
23327
23462
  const controller = ic.renderer.xr.getController( i );
23463
+ if(!controller) continue;
23464
+
23328
23465
  ic.dolly.add( controller );
23329
23466
 
23330
23467
  controller.add( line.clone() );
@@ -26634,6 +26771,8 @@ class TextSprite {
26634
26771
  sprite.scale.set(expandWidthFactor * factor, factor, 1.0);
26635
26772
  }
26636
26773
 
26774
+ sprite.renderOrder = 1; // larger than the default 0
26775
+
26637
26776
  return sprite;
26638
26777
  }
26639
26778
 
@@ -29423,11 +29562,12 @@ class Surface {
29423
29562
  cfg.isovalue = ic.mapData.contourPhi;
29424
29563
  cfg.type = 'phi';
29425
29564
  cfg.loadPhiFrom = ic.loadPhiFrom;
29426
-
29565
+
29427
29566
  ps = this.SetupMap(cfg);
29428
29567
  }
29429
29568
  else {
29430
29569
  //1: van der waals surface, 2: molecular surface, 3: solvent accessible surface
29570
+
29431
29571
 
29432
29572
  //exclude water
29433
29573
  let atomsToShow = me.hashUtilsCls.exclHash(atoms, ic.water);
@@ -29461,7 +29601,7 @@ class Surface {
29461
29601
 
29462
29602
  ps = this.SetupSurface(cfg);
29463
29603
  }
29464
-
29604
+
29465
29605
  if(ic.bCalcArea) {
29466
29606
  ic.areavalue = ps.area.toFixed(2);
29467
29607
  let serial2area = ps.serial2area;
@@ -29540,7 +29680,7 @@ class Surface {
29540
29680
  //geo = new THREE.Geometry();
29541
29681
  geo = new THREE.BufferGeometry();
29542
29682
  let verticeArray = [], colorArray = [], indexArray = [], color;
29543
-
29683
+
29544
29684
  //var geoVertices = verts.map(function (v) {
29545
29685
  let offset = 0;
29546
29686
  for(let i = 0, il = verts.length; i < il; ++i, offset += 3) {
@@ -29615,9 +29755,8 @@ class Surface {
29615
29755
  //geo.normalsNeedUpdate = true;
29616
29756
 
29617
29757
  geo.computeVertexNormals();
29618
-
29758
+
29619
29759
  geo.type = 'Surface'; // to be recognized in vrml.js for 3D printing
29620
-
29621
29760
  // use the regular way to show transparency for type == 15 (surface with potential)
29622
29761
  // if(ic.transparentRenderOrder && (type == 1 || type == 2 || type == 3)) { // WebGL has some ordering problem when dealing with transparency
29623
29762
  if(ic.transparentRenderOrder) { // WebGL has some ordering problem when dealing with transparency
@@ -29805,7 +29944,7 @@ class Surface {
29805
29944
  mesh.renderOrder = -2; // default: 0, picking: -1
29806
29945
 
29807
29946
  ic.mdl.add(mesh);
29808
-
29947
+
29809
29948
  if(type == 11 || type == 12) {
29810
29949
  ic.prevMaps.push(mesh);
29811
29950
  }
@@ -29888,7 +30027,7 @@ class Surface {
29888
30027
 
29889
30028
  SetupMap(data) { let ic = this.icn3d; ic.icn3dui;
29890
30029
  let ps = new ElectronMap(ic);
29891
-
30030
+
29892
30031
  ps.initparm(data.header, data.data, data.matrix, data.isovalue, data.center, data.maxdist,
29893
30032
  data.pmin, data.pmax, data.water, data.type, data.rmsd_supr, data.loadPhiFrom, data.icn3d);
29894
30033
 
@@ -29897,7 +30036,7 @@ class Surface {
29897
30036
  if(!data.header.bSurface) ps.buildboundary();
29898
30037
 
29899
30038
  if(!data.header.bSurface) ps.marchingcube();
29900
-
30039
+
29901
30040
  ps.vpBits = null; // uint8 array of bitmasks
29902
30041
  //ps.vpDistance = null; // floatarray of _squared_ distances
29903
30042
  ps.vpAtomID = null; // intarray
@@ -32924,7 +33063,7 @@ class Alternate {
32924
33063
  //if(window.dialog) window.dialog.dialog( "close" );
32925
33064
 
32926
33065
  let html = me.utilsCls.getMemDesc();
32927
- $("#" + ic.pre + "dl_rmsd").html(html);
33066
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
32928
33067
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Membranes');
32929
33068
  }
32930
33069
  }
@@ -33095,6 +33234,8 @@ class Alternate {
33095
33234
 
33096
33235
  for(let i = 0, il = ic.controllers.length; i < il; ++i) {
33097
33236
  let controller = ic.controllers[i];
33237
+ if(!controller) continue;
33238
+
33098
33239
  dt = (i % 2 == 0) ? dt : -dt; // dt * y;
33099
33240
  thisClass.handleController( controller, dt, controller.userData.selectPressed, controller.userData.squeezePressed, result.xArray, result.yArray );
33100
33241
  //thisClass.handleController( controller, dt, pressed );
@@ -33103,13 +33244,13 @@ class Alternate {
33103
33244
 
33104
33245
  if ( ic.renderer.xr.isPresenting){
33105
33246
  if(ic.canvasUI) ic.canvasUI.update();
33106
- //if(ic.canvasUILog) ic.canvasUILog.update();
33247
+ if(ic.canvasUILog) ic.canvasUILog.update();
33107
33248
  }
33108
33249
  }
33109
33250
  else if(ic.bAr) {
33110
33251
  if ( ic.renderer.xr.isPresenting ){
33111
33252
  ic.gestures.update();
33112
- //if(ic.canvasUILog) ic.canvasUILog.update();
33253
+ if(ic.canvasUILog) ic.canvasUILog.update();
33113
33254
  }
33114
33255
  }
33115
33256
 
@@ -35305,22 +35446,28 @@ class SetColor {
35305
35446
 
35306
35447
  case 'ig strand':
35307
35448
  if(ic.bShowRefnum) {
35308
- for(let resid in ic.resid2refnum) {
35309
- let refnumLabel = ic.resid2refnum[resid];
35310
- let color;
35311
- if(!refnumLabel) {
35312
- color = me.parasCls.thr(me.htmlCls.GREYB);
35449
+ let color;
35450
+ for(let resid in ic.residues) {
35451
+ if(!ic.resid2refnum[resid]) {
35452
+ color = me.parasCls.thr('#FFFFFF');
35313
35453
  }
35314
35454
  else {
35315
- let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
35316
- let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
35317
- color = ic.showSeqCls.getRefnumColor(currStrand);
35318
-
35319
- if(ic.residIgLoop.hasOwnProperty(resid)) {
35455
+ let refnumLabel = ic.resid2refnum[resid];
35456
+
35457
+ if(!refnumLabel) {
35320
35458
  color = me.parasCls.thr(me.htmlCls.GREYB);
35321
35459
  }
35460
+ else {
35461
+ let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
35462
+ let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
35463
+ color = ic.showSeqCls.getRefnumColor(currStrand);
35464
+
35465
+ if(ic.residIgLoop.hasOwnProperty(resid)) {
35466
+ color = me.parasCls.thr(me.htmlCls.GREYB);
35467
+ }
35468
+ }
35322
35469
  }
35323
-
35470
+
35324
35471
  for (let i in ic.residues[resid]) {
35325
35472
  let atom = ic.atoms[i];
35326
35473
  atom.color = me.parasCls.thr(color);
@@ -35334,20 +35481,26 @@ class SetColor {
35334
35481
 
35335
35482
  case 'ig protodomain':
35336
35483
  if(ic.bShowRefnum) {
35337
- for(let resid in ic.resid2refnum) {
35338
- let refnumLabel = ic.resid2refnum[resid];
35339
- let color;
35340
- if(!refnumLabel) {
35341
- color = me.parasCls.thr(me.htmlCls.GREYB);
35484
+ let color;
35485
+ for(let resid in ic.residues) {
35486
+ if(!ic.resid2refnum[resid]) {
35487
+ color = me.parasCls.thr('#FFFFFF');
35342
35488
  }
35343
35489
  else {
35344
- let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
35345
- let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
35346
- color = ic.showSeqCls.getProtodomainColor(currStrand);
35490
+ let refnumLabel = ic.resid2refnum[resid];
35347
35491
 
35348
- if(ic.residIgLoop.hasOwnProperty(resid)) {
35492
+ if(!refnumLabel) {
35349
35493
  color = me.parasCls.thr(me.htmlCls.GREYB);
35350
35494
  }
35495
+ else {
35496
+ let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
35497
+ let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
35498
+ color = ic.showSeqCls.getProtodomainColor(currStrand);
35499
+
35500
+ if(ic.residIgLoop.hasOwnProperty(resid)) {
35501
+ color = me.parasCls.thr(me.htmlCls.GREYB);
35502
+ }
35503
+ }
35351
35504
  }
35352
35505
 
35353
35506
  for (let i in ic.residues[resid]) {
@@ -36125,7 +36278,7 @@ class SetOption {
36125
36278
  bClose = true;
36126
36279
  }
36127
36280
 
36128
- $("#" + me.pre + "dl_legend").html(html);
36281
+ $("#" + me.pre + "dl_legend_html").html(html);
36129
36282
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Legend');
36130
36283
 
36131
36284
  if(bClose) {
@@ -36291,7 +36444,7 @@ class SetOption {
36291
36444
  "C' Strand": "6495ED",
36292
36445
  "C'' Strand": "006400",
36293
36446
  "D Strand": "00FF00",
36294
- "E Strand": "F7DC6F", //"F0E68C",
36447
+ "E Strand": "FFFF00", //"F0E68C",
36295
36448
  "F Strand": "FFA500",
36296
36449
  "G Strand": "FF0000",
36297
36450
  "G* Strand": "8B0000",
@@ -36318,12 +36471,12 @@ class SetOption {
36318
36471
  const name2color = {
36319
36472
  "A Strand": "0000FF",
36320
36473
  "B Strand": "006400",
36321
- "C Strand": "F7DC6F", //"F0E68C",
36474
+ "C Strand": "FFFF00", //"F0E68C",
36322
36475
  "C' Strand": "FFA500",
36323
36476
  "C'' Strand": "FF0000",
36324
36477
  "D Strand": "0000FF",
36325
36478
  "E Strand": "006400",
36326
- "F Strand": "F7DC6F", //"F0E68C",
36479
+ "F Strand": "FFFF00", //"F0E68C",
36327
36480
  "G Strand": "FFA500",
36328
36481
  "Loop": "CCCCCC"
36329
36482
  };
@@ -38543,6 +38696,7 @@ class Domain3d {
38543
38696
  this.icn3d = icn3d;
38544
38697
 
38545
38698
  //this.dcut = 8; // threshold for C-alpha interactions
38699
+
38546
38700
  // It seemed the threshold 7 angstrom works better
38547
38701
  this.dcut = 7; // threshold for C-alpha interactions
38548
38702
 
@@ -38578,6 +38732,9 @@ class Domain3d {
38578
38732
  this.c_delta = 3; // cut set parameter
38579
38733
  this.nc_fact = 0.0; // size factor for internal contacts
38580
38734
 
38735
+ // added by Jiyao
38736
+ this.min_contacts = 10; // minimum number of contacts to be considered as neighbors
38737
+
38581
38738
  //let this.elements[2*this.MAX_SSE]; // sets of this.elements to be split
38582
38739
  this.elements = [];
38583
38740
  this.elements.length = 2*this.MAX_SSE;
@@ -39126,6 +39283,7 @@ class Domain3d {
39126
39283
  //https://www.geeksforgeeks.org/number-groups-formed-graph-friends/
39127
39284
  countUtil(ss1, sheetNeighbor, existing_groups) {
39128
39285
  this.visited[ss1] = true;
39286
+
39129
39287
  if(!this.groupnum2sheet[existing_groups]) this.groupnum2sheet[existing_groups] = [];
39130
39288
  this.groupnum2sheet[existing_groups].push(parseInt(ss1));
39131
39289
 
@@ -39169,6 +39327,7 @@ class Domain3d {
39169
39327
  let chnid = residueArray[0].substr(0, residueArray[0].lastIndexOf('_'));
39170
39328
 
39171
39329
  let substructItem = {};
39330
+ let pos2resi = {};
39172
39331
  for(let i = 0; i < residueArray.length; ++i) {
39173
39332
  let resid = residueArray[i];
39174
39333
 
@@ -39206,22 +39365,26 @@ class Domain3d {
39206
39365
  x0.push(atom.coord.x);
39207
39366
  y0.push(atom.coord.y);
39208
39367
  z0.push(atom.coord.z);
39209
- resiArray.push(resi);
39368
+ //resiArray.push(resi);
39369
+ resiArray.push(i+1);
39370
+ pos2resi[i+1] = resi;
39210
39371
 
39211
39372
  if(atom.ssend) {
39212
- substructItem.To = parseInt(resi);
39373
+ //substructItem.To = parseInt(resi);
39374
+ substructItem.To = i + 1;
39213
39375
  substructItem.x2 = atom.coord.x;
39214
39376
  substructItem.y2 = atom.coord.y;
39215
39377
  substructItem.z2 = atom.coord.z;
39216
39378
 
39217
39379
  substructItem.Sheet = (atom.ss == 'sheet') ? true : false;
39218
39380
  substruct.push(substructItem);
39219
- substructItem = {};
39381
+ substructItem = {};
39220
39382
  }
39221
39383
 
39222
39384
  // a residue could be both start and end. check ssend first, then check ssbegin
39223
39385
  if(atom.ssbegin) {
39224
- substructItem.From = parseInt(resi);
39386
+ //substructItem.From = parseInt(resi);
39387
+ substructItem.From = i + 1;
39225
39388
  substructItem.x1 = atom.coord.x;
39226
39389
  substructItem.y1 = atom.coord.y;
39227
39390
  substructItem.z1 = atom.coord.z;
@@ -39241,7 +39404,8 @@ class Domain3d {
39241
39404
  }
39242
39405
 
39243
39406
  let seqLen = residueArray.length; // + resiOffset;
39244
- let lastResi = resiArray[seqLen - 1];
39407
+ //let lastResi = resiArray[seqLen - 1];
39408
+ let lastResi = seqLen;
39245
39409
 
39246
39410
  // get a list of Calpha-Calpha contacts
39247
39411
  ///list< pair< pair< int, let >, let > >
@@ -39320,7 +39484,8 @@ class Domain3d {
39320
39484
  let ss2 = parseInt(ssPair[1]);
39321
39485
 
39322
39486
  // both are sheets
39323
- if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet) {
39487
+ // min number of contacts: this.min_contacts
39488
+ if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet && ctable[pair] >= this.min_contacts ) {
39324
39489
  if(!sheetNeighbor[ss1]) sheetNeighbor[ss1] = {};
39325
39490
  if(!sheetNeighbor[ss2]) sheetNeighbor[ss2] = {};
39326
39491
 
@@ -39343,13 +39508,13 @@ class Domain3d {
39343
39508
  // If not in any group.
39344
39509
  if (this.visited[ss1] == false) {
39345
39510
  existing_groups++;
39346
-
39511
+
39347
39512
  this.countUtil(ss1, sheetNeighbor, existing_groups);
39348
39513
  }
39349
39514
  }
39350
39515
 
39351
39516
  // get sheet2sheetnum
39352
- // each neighboring sheet willbe represented by the sheet with the smallest sse
39517
+ // each neighboring sheet will be represented by the sheet with the smallest sse
39353
39518
  for(let groupnum in this.groupnum2sheet) {
39354
39519
  let ssArray = this.groupnum2sheet[groupnum].sort();
39355
39520
  for(let i = 0, il = ssArray.length; i < il; ++i) {
@@ -39452,7 +39617,7 @@ class Domain3d {
39452
39617
  this.parts[2*i] = this.parts[2*i + 1] = 0;
39453
39618
  ratios[i] = 0.0;
39454
39619
  }
39455
-
39620
+
39456
39621
  n_saved = this.new_split_chain(nsse, sratio, minSize, minSSE, maxCsz, avgCts, cDelta, ncFact, this.parts, n_saved, ratios);
39457
39622
 
39458
39623
  // save domain data
@@ -39493,14 +39658,14 @@ class Domain3d {
39493
39658
  //resflags.clear();
39494
39659
 
39495
39660
  //let resflags = [];
39496
- let resflags = {};
39661
+ let resflags = {}; // keys are 1-based positions
39497
39662
 
39498
39663
  // a domain must have at least 3 SSEs...
39499
39664
  if (prts.length <= 2) continue;
39500
39665
 
39501
39666
  for (let i = 0; i < seqLen; i++) {
39502
39667
  //resflags.push(0);
39503
- resflags[resiArray[i]] = 0;
39668
+ resflags[i + 1] = 0;
39504
39669
  }
39505
39670
 
39506
39671
  for (let i = 0; i < prts.length; i++) {
@@ -39516,17 +39681,14 @@ class Domain3d {
39516
39681
  let To = sserec.To;
39517
39682
 
39518
39683
  for (let j = From; j <= To; j++) {
39519
- //resflags[j - 1] = 1;
39520
39684
  resflags[j] = 1;
39521
39685
  }
39522
39686
 
39523
39687
  if ((k == 0) && (From > 1)) {
39524
39688
  // residues with negative residue numbers will not be included
39525
39689
  for (let j = 1; j < From; j++) {
39526
- //resflags[j - 1] = 1;
39527
39690
  // include at most 10 residues
39528
39691
  if(From - j <= 10) {
39529
- //resflags[j - 1] = 1;
39530
39692
  resflags[j] = 1;
39531
39693
  }
39532
39694
  }
@@ -39536,10 +39698,8 @@ class Domain3d {
39536
39698
  if ((k == substruct.length - 1) && (To < parseInt(lastResi))) {
39537
39699
  //for (let j = To + 1; j <= seqLen; j++) {
39538
39700
  for (let j = To + 1; j <= parseInt(lastResi); j++) {
39539
- //resflags[j - 1] = 1;
39540
39701
  // include at most 10 residues
39541
39702
  if(j - To <= 10) {
39542
- //resflags[j - 1] = 1;
39543
39703
  resflags[j] = 1;
39544
39704
  }
39545
39705
  }
@@ -39555,7 +39715,6 @@ class Domain3d {
39555
39715
 
39556
39716
  if (ll > 0) {
39557
39717
  for (let j = From - ll; j <= From - 1; j++) {
39558
- //resflags[j - 1] = 1;
39559
39718
  resflags[j] = 1;
39560
39719
  }
39561
39720
  }
@@ -39574,7 +39733,6 @@ class Domain3d {
39574
39733
 
39575
39734
  if (ll > 0) {
39576
39735
  for (let j = To + 1; j <= To + ll; j++) {
39577
- //resflags[j - 1] = 1;
39578
39736
  resflags[j] = 1;
39579
39737
  }
39580
39738
  }
@@ -39586,16 +39744,15 @@ class Domain3d {
39586
39744
  let startseg;
39587
39745
  //vector<int> segments;
39588
39746
  //segments.clear();
39589
- let segments = [];
39747
+ let segments = []; //use position instead of residue number
39590
39748
 
39591
39749
  for (let i = 0; i < seqLen; i++) {
39592
39750
  //let rf = resflags[i];
39593
- let rf = resflags[resiArray[i]];
39751
+ let rf = resflags[i + 1];
39594
39752
 
39595
39753
  if (!inseg && (rf == 1)) {
39596
39754
  // new segment starts here
39597
- //startseg = i + 1;
39598
- startseg = resiArray[i];
39755
+ startseg = i + 1;
39599
39756
  inseg = true;
39600
39757
  continue;
39601
39758
  }
@@ -39603,8 +39760,7 @@ class Domain3d {
39603
39760
  if (inseg && (rf == 0)) {
39604
39761
  // segment ends
39605
39762
  segments.push(startseg);
39606
- //segments.push(i);
39607
- segments.push(resiArray[i]);
39763
+ segments.push(i);
39608
39764
  inseg = false;
39609
39765
  }
39610
39766
  }
@@ -39612,7 +39768,6 @@ class Domain3d {
39612
39768
  // check for the last segment
39613
39769
  if (inseg) {
39614
39770
  segments.push(startseg);
39615
- //segments.push(seqLen);
39616
39771
  segments.push(lastResi);
39617
39772
  }
39618
39773
 
@@ -39633,8 +39788,8 @@ class Domain3d {
39633
39788
  }
39634
39789
  }
39635
39790
  }
39636
-
39637
- return {subdomains: subdomains, substruct: substruct};
39791
+
39792
+ return {subdomains: subdomains, substruct: substruct, pos2resi:pos2resi };
39638
39793
  } // end c2b_NewSplitChain
39639
39794
 
39640
39795
  getDomainJsonForAlign(atoms) { let ic = this.icn3d, me = ic.icn3dui;
@@ -39642,6 +39797,7 @@ class Domain3d {
39642
39797
 
39643
39798
  let subdomains = result.subdomains;
39644
39799
  let substruct = result.substruct;
39800
+ let pos2resi = result.pos2resi;
39645
39801
 
39646
39802
  let residueHash = ic.firstAtomObjCls.getResiduesFromAtoms(atoms);
39647
39803
  let residueArray = Object.keys(residueHash);
@@ -39669,8 +39825,8 @@ class Domain3d {
39669
39825
  //ss: sstype ss_start ss_end x1 y1 z1 x2 y2 z2
39670
39826
  //sstype: 1 (helix), 2 (sheet)
39671
39827
  let sstype = (substruct[k].Sheet) ? 2 : 1;
39672
- let from = substruct[k].From;
39673
- let to = substruct[k].To;
39828
+ let from = pos2resi[substruct[k].From];
39829
+ let to = pos2resi[substruct[k].To];
39674
39830
 
39675
39831
  let residFrom = chnid + "_" + from;
39676
39832
  let atomFrom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residFrom]);
@@ -40687,7 +40843,7 @@ class AddTrack {
40687
40843
  let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
40688
40844
 
40689
40845
  //$("#" + me.pre + "legend").html(legendHtml);
40690
- $("#" + me.pre + "dl_legend").html(legendHtml);
40846
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
40691
40847
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
40692
40848
  }
40693
40849
  else if(type == 'tube') {
@@ -42743,7 +42899,7 @@ class ShowSeq {
42743
42899
  }
42744
42900
  else {
42745
42901
  let refnum = parseInt(refnumStr).toString();
42746
- let color = this.getRefnumColor(currStrand);
42902
+ let color = this.getRefnumColor(currStrand, true);
42747
42903
  let colorStr = 'style="color:' + color + '"';
42748
42904
 
42749
42905
  let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42914,7 +43070,7 @@ class ShowSeq {
42914
43070
 
42915
43071
  getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel) { let ic = this.icn3d, me = ic.icn3dui;
42916
43072
  let refnum = parseInt(refnumStr).toString();
42917
- let color = this.getRefnumColor(currStrand);
43073
+ let color = this.getRefnumColor(currStrand, true);
42918
43074
  let colorStr = (!bLoop) ? 'style="color:' + color + '; text-decoration: underline overline;"' : 'style="color:' + color + '"';
42919
43075
 
42920
43076
  let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42940,45 +43096,45 @@ class ShowSeq {
42940
43096
  return html;
42941
43097
  }
42942
43098
 
42943
- getRefnumColor(currStrand) { let ic = this.icn3d, me = ic.icn3dui;
42944
- if(currStrand == "A^") { //magenta // deep sky blue
42945
- return '#FF00FF'; //'#9900ff'; //'#00BFFF';
43099
+ getRefnumColor(currStrand, bText) { let ic = this.icn3d, me = ic.icn3dui;
43100
+ if(currStrand == "A^") {
43101
+ return '#FF00FF';
42946
43102
  }
42947
- else if(currStrand == "A") { //rebecca purple // blue
42948
- return '#663399'; //'#9900ff'; //'#0000FF';
43103
+ else if(currStrand == "A") {
43104
+ return '#663399';
42949
43105
  }
42950
- else if(currStrand == "A*") { //pink // sky blue
42951
- return '#FFC0CB'; //'#9900ff'; //'#87CEEB';
43106
+ else if(currStrand == "A*") {
43107
+ return '#FFC0CB';
42952
43108
  }
42953
- else if(currStrand == "A'") { //medium purple // steel blue
42954
- return '#663399'; //'#9370db'; //'#9900ff'; //'#4682B4';
43109
+ else if(currStrand == "A'") {
43110
+ return '#663399';
42955
43111
  }
42956
- else if(currStrand == "B") { //medium orchid // cyan
42957
- return '#ba55d3'; //'#0000FF'; //'#4a86e8'; //'#00FFFF';
43112
+ else if(currStrand == "B") {
43113
+ return '#ba55d3';
42958
43114
  }
42959
- else if(currStrand == "C") { //blue // green
42960
- return '#0000FF'; //'#76d6ff'; //'#00FF00';
43115
+ else if(currStrand == "C") {
43116
+ return '#0000FF';
42961
43117
  }
42962
- else if(currStrand == "C'") { //corn blue // yellow
42963
- return '#6495ED'; //'#006400'; //'#00b050'; //'#FFFF00';
43118
+ else if(currStrand == "C'") {
43119
+ return '#6495ED';
42964
43120
  }
42965
- else if(currStrand == "C''") { //dark green // orange
42966
- return '#006400'; //'#00ff00'; //'#FFA500';
43121
+ else if(currStrand == "C''") {
43122
+ return '#006400';
42967
43123
  }
42968
- else if(currStrand == "D") { //green // brown
42969
- return '#00FF00'; //'#fffb00'; //'#A52A2A';
43124
+ else if(currStrand == "D") {
43125
+ return '#00FF00';
42970
43126
  }
42971
- else if(currStrand == "E") { //yellow // pink
42972
- return "#F7DC6F"; //'#F0E68C'; //'#ff9900'; //'#ffd966'; //'#FFC0CB';
43127
+ else if(currStrand == "E") {
43128
+ return (bText) ? "#F7DC6F" : "#FFFF00";
42973
43129
  }
42974
- else if(currStrand == "F") { //orange // magenta
42975
- return '#FFA500'; //'#FF00FF'; //'#ff9900'; //'#FF00FF';
43130
+ else if(currStrand == "F") {
43131
+ return '#FFA500';
42976
43132
  }
42977
- else if(currStrand == "G") { //red // red
42978
- return '#FF0000'; //'#ff2600'; //'#FF0000';
43133
+ else if(currStrand == "G") {
43134
+ return '#FF0000';
42979
43135
  }
42980
- else if(currStrand == "G*") { //dark red // salmon
42981
- return '#8B0000'; //'#ff2600'; //'#FA8072';
43136
+ else if(currStrand == "G*") {
43137
+ return '#8B0000';
42982
43138
  }
42983
43139
  else {
42984
43140
  return me.htmlCls.GREYB;
@@ -42993,7 +43149,7 @@ class ShowSeq {
42993
43149
  return '#006400';
42994
43150
  }
42995
43151
  else if(currStrand == "C" || currStrand == "F") {
42996
- return "#F7DC6F"; //'#F0E68C';
43152
+ return "#FFFF00"; //'#F0E68C';
42997
43153
  }
42998
43154
  else if(currStrand == "C'" || (currStrand && currStrand.substr(0, 1) == "G")) {
42999
43155
  return '#FFA500';
@@ -43577,7 +43733,7 @@ class HlUpdate {
43577
43733
  html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData, ic.inputid, undefined, true);
43578
43734
  html2ddgm += ic.diagram2dCls.set2DdgmNote();
43579
43735
 
43580
- $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
43736
+ $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
43581
43737
  }
43582
43738
  else if(ic.mmdbidArray &&(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign)) {
43583
43739
  html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData1, ic.mmdbidArray[0].toUpperCase(), 0, true);
@@ -43589,7 +43745,7 @@ class HlUpdate {
43589
43745
  }
43590
43746
  html2ddgm += ic.diagram2dCls.set2DdgmNote(true);
43591
43747
 
43592
- $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
43748
+ $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
43593
43749
  }
43594
43750
  }
43595
43751
 
@@ -44126,8 +44282,8 @@ class LineGraph {
44126
44282
  linkedNodeCnt[mappingid] = 1;
44127
44283
  linkedNodeInterDiff[mappingid] = link.n;
44128
44284
  }
44129
- else {
44130
- ++linkedNodeCnt[mappingid];
44285
+ else {
44286
+ ++linkedNodeCnt[mappingid];
44131
44287
  linkedNodeInterDiff[mappingid] -= link.n; // show difference
44132
44288
  }
44133
44289
  }
@@ -44477,9 +44633,9 @@ class LineGraph {
44477
44633
  if(pos1 === undefined || pos2 === undefined) continue;
44478
44634
  let linestrokewidth;
44479
44635
  if(link.v == me.htmlCls.contactValue) {
44480
- linestrokewidth = 1;
44636
+ linestrokewidth = (link.n == 1) ? 1 : 3;
44481
44637
  } else {
44482
- linestrokewidth = 2;
44638
+ linestrokewidth = (link.n == 1) ? 2 : 4;
44483
44639
  }
44484
44640
  let strokecolor;
44485
44641
  if(link.v == me.htmlCls.hbondValue) {
@@ -44496,8 +44652,9 @@ class LineGraph {
44496
44652
  strokecolor = "#" + me.htmlCls.contactColor;
44497
44653
  }
44498
44654
  html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
44499
- html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
44500
- html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "' /></g>";
44655
+ let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
44656
+ if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
44657
+ html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "'/></g>";
44501
44658
  }
44502
44659
  // show nodes later
44503
44660
  html += nodeHtml;
@@ -44590,9 +44747,9 @@ class LineGraph {
44590
44747
 
44591
44748
  let linestrokewidth;
44592
44749
  if(link.v == me.htmlCls.contactValue) {
44593
- linestrokewidth = 1;
44750
+ linestrokewidth = (link.n == 1) ? 1 : 3;
44594
44751
  } else {
44595
- linestrokewidth = 2;
44752
+ linestrokewidth = (link.n == 1) ? 2 : 4;
44596
44753
  }
44597
44754
 
44598
44755
  if(bAfMap && ic.hex2skip[link.c]) ;
@@ -44607,7 +44764,8 @@ class LineGraph {
44607
44764
  }
44608
44765
  else {
44609
44766
  html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
44610
- html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
44767
+ let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
44768
+ if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
44611
44769
  if(bContactMap) {
44612
44770
  html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
44613
44771
  }
@@ -45123,11 +45281,9 @@ class GetGraph {
45123
45281
 
45124
45282
  if(!linkstr2cnt.hasOwnProperty(linkStr)) {
45125
45283
  linkstr2cnt[linkStr] = 1;
45126
- linkstr2cnt[linkStr] = 1;
45127
45284
  }
45128
45285
  else {
45129
- linkstr2cnt[linkStr] += 1;
45130
- linkstr2cnt[linkStr] += 1;
45286
+ ++linkstr2cnt[linkStr];
45131
45287
  }
45132
45288
  }
45133
45289
  }
@@ -45851,11 +46007,11 @@ class ViewInterPairs {
45851
46007
  html += result.html;
45852
46008
  bondCnt = result.bondCnt;
45853
46009
 
45854
- $("#" + ic.pre + "dl_interactionsorted").html(html);
46010
+ $("#" + ic.pre + "dl_interactionsorted_html").html(html);
45855
46011
  me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
45856
46012
  }
45857
46013
  else if(type == 'view') {
45858
- $("#" + ic.pre + "dl_allinteraction").html(html);
46014
+ $("#" + ic.pre + "dl_allinteraction_html").html(html);
45859
46015
  me.htmlCls.dialogCls.openDlg('dl_allinteraction', 'Show interactions');
45860
46016
  }
45861
46017
  else if(type == 'linegraph') {
@@ -48183,7 +48339,7 @@ class ChainalignParser {
48183
48339
  me.htmlCls.clickMenuCls.setLogCmd(logStr, false);
48184
48340
  let html = "<br><b>Alignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br>";
48185
48341
  if(me.cfg.aligntool == 'tmalign') html += "<b>TM-score</b>: " + align[0].score.toPrecision(4) + "<br><br>";
48186
- $("#" + ic.pre + "dl_rmsd").html(html);
48342
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
48187
48343
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment');
48188
48344
 
48189
48345
  bAligned = true;
@@ -52449,7 +52605,7 @@ class ParserUtils {
52449
52605
  //if(window.dialog) window.dialog.dialog( "close" );
52450
52606
  html += me.utilsCls.getMemDesc();
52451
52607
  }
52452
- $("#" + ic.pre + "dl_rmsd").html(html);
52608
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
52453
52609
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
52454
52610
  }
52455
52611
 
@@ -52630,7 +52786,7 @@ class ParserUtils {
52630
52786
  ic.diagram2dCls.draw2Ddgm(ic.interactionData2, mmdbid2, 1);
52631
52787
 
52632
52788
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
52633
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
52789
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
52634
52790
 
52635
52791
  ic.b2DShown = true;
52636
52792
 
@@ -52683,7 +52839,7 @@ class ParserUtils {
52683
52839
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
52684
52840
 
52685
52841
  ic.b2DShown = true;
52686
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
52842
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
52687
52843
  if(me.cfg.show2d) me.htmlCls.dialogCls.openDlg('dl_2ddgm', 'Interactions');
52688
52844
 
52689
52845
  /// if(ic.deferredViewinteraction !== undefined) ic.deferredViewinteraction.resolve();
@@ -52701,7 +52857,7 @@ class ParserUtils {
52701
52857
  ic.diagram2dCls.draw2Ddgm(ic.interactionData, mmdbid);
52702
52858
 
52703
52859
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote();
52704
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
52860
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
52705
52861
  }
52706
52862
 
52707
52863
  ic.b2DShown = true;
@@ -52804,7 +52960,7 @@ class ParserUtils {
52804
52960
  let rmsd = ic.rmsd_supr.rmsd;
52805
52961
 
52806
52962
  me.htmlCls.clickMenuCls.setLogCmd("RMSD of alignment to OPM: " + rmsd.toPrecision(4), false);
52807
- //$("#" + ic.pre + "dl_rmsd").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
52963
+ //$("#" + ic.pre + "dl_rmsd_html").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
52808
52964
  //if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment to OPM');
52809
52965
 
52810
52966
  let dxymaxsq = 0;
@@ -53010,6 +53166,16 @@ class ParserUtils {
53010
53166
 
53011
53167
  // set defined sets before loadScript
53012
53168
  if(ic.bInitial) {
53169
+ if(me.cfg.mobilemenu) {
53170
+ me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
53171
+ let bNoSave = true;
53172
+ me.htmlCls.clickMenuCls.applyShownMenus(bNoSave);
53173
+ }
53174
+ // else {
53175
+ // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
53176
+ // me.htmlCls.clickMenuCls.applyShownMenus();
53177
+ // }
53178
+
53013
53179
  if(me.cfg.showsets) {
53014
53180
  ic.definedSetsCls.showSets();
53015
53181
  }
@@ -56450,7 +56616,7 @@ class Vastplus {
56450
56616
  bAligned = true;
56451
56617
 
56452
56618
  me.htmlCls.clickMenuCls.setLogCmd("realignment RMSD: " + rmsd.toPrecision(4), false);
56453
- $("#" + ic.pre + "dl_rmsd").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
56619
+ $("#" + ic.pre + "dl_rmsd_html").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
56454
56620
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
56455
56621
 
56456
56622
  // apply matrix for each atom
@@ -58396,7 +58562,7 @@ class ApplyCommand {
58396
58562
 
58397
58563
  let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
58398
58564
  //$("#" + me.pre + "legend").html(legendHtml).show();
58399
- $("#" + me.pre + "dl_legend").html(legendHtml);
58565
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
58400
58566
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Range');
58401
58567
  }
58402
58568
  }
@@ -61912,7 +62078,7 @@ class Delphi {
61912
62078
  let phidata = await this.CalcPhiPrms(gsize, salt, contour, bSurface, data);
61913
62079
 
61914
62080
  this.loadPhiData(phidata, contour, bSurface);
61915
-
62081
+
61916
62082
  ic.bAjaxPhi = true;
61917
62083
 
61918
62084
  if(bSurface) {
@@ -62676,8 +62842,8 @@ class Dssp {
62676
62842
 
62677
62843
  // align each 3D domain with reference structure
62678
62844
  let result = ic.domain3dCls.c2b_NewSplitChain(ic.chains[chainid]);
62679
- let subdomains = result.subdomains;
62680
-
62845
+ let subdomains = result.subdomains;
62846
+
62681
62847
  let domainAtomsArray = [];
62682
62848
  if(subdomains.length <= 1) {
62683
62849
  domainAtomsArray.push(ic.chains[chainid]);
@@ -62707,9 +62873,9 @@ class Dssp {
62707
62873
  }
62708
62874
 
62709
62875
  for(let k = 0, kl = domainAtomsArray.length; k < kl; ++k) {
62710
-
62711
62876
  let pdb_target = ic.saveFileCls.getAtomPDB(domainAtomsArray[k], undefined, undefined, undefined, undefined, struct);
62712
62877
  let domainid = chainid + '-' + k;
62878
+
62713
62879
  for(let index = 0, indexl = dataArray.length; index < indexl; ++index) {
62714
62880
  let struct2 = ic.defaultPdbId + index;
62715
62881
  let pdb_query = dataArray[index].value; //[0];
@@ -62930,7 +63096,7 @@ if(!me.bNode) {
62930
63096
  else if(refnum >= 1200 && refnum < 1300) return "A'" + oriRefnum;
62931
63097
  else if(refnum >= 1300 && refnum < 1400) return "A*" + oriRefnum;
62932
63098
  else if(refnum >= 1400 && refnum < 2000) {
62933
- if(prevStrand.substr(0, 1) == 'A') {
63099
+ if(prevStrand && prevStrand.substr(0, 1) == 'A') {
62934
63100
  return prevStrand + oriRefnum;
62935
63101
  }
62936
63102
  else {
@@ -64299,7 +64465,7 @@ class Analysis {
64299
64465
  //html += '<b>Buried Surface for both Sets</b>: ' + buriedArea + ' &#8491;<sup>2</sup><br>';
64300
64466
  html += '<b>Buried Surface for Set 1</b>: ' + buriedArea2 + ' &#8491;<sup>2</sup><br>';
64301
64467
  html += '<b>Buried Surface for Set 2</b>: ' + buriedArea1 + ' &#8491;<sup>2</sup><br><br>';
64302
- $("#" + ic.pre + "dl_buriedarea").html(html);
64468
+ $("#" + ic.pre + "dl_buriedarea_html").html(html);
64303
64469
  me.htmlCls.dialogCls.openDlg('dl_buriedarea', 'Buried solvent accessible surface area in the interface');
64304
64470
  me.htmlCls.clickMenuCls.setLogCmd('buried surface ' + buriedArea, false);
64305
64471
  }
@@ -64405,7 +64571,7 @@ class Analysis {
64405
64571
 
64406
64572
  tableHtml += '</table><br><br>';
64407
64573
 
64408
- $("#" + me.pre + "dl_disttable").html(tableHtml);
64574
+ $("#" + me.pre + "dl_disttable_html").html(tableHtml);
64409
64575
  }
64410
64576
  }
64411
64577
 
@@ -64962,7 +65128,7 @@ class Diagram2d {
64962
65128
 
64963
65129
  ic.html2ddgm += html;
64964
65130
 
64965
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
65131
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
64966
65132
 
64967
65133
  return html;
64968
65134
  }
@@ -70847,7 +71013,7 @@ class iCn3DUI {
70847
71013
  //even when multiple iCn3D viewers are shown together.
70848
71014
  this.pre = this.cfg.divid + "_";
70849
71015
 
70850
- this.REVISION = '3.23.2';
71016
+ this.REVISION = '3.24.0';
70851
71017
 
70852
71018
  // In nodejs, iCn3D defines "window = {navigator: {}}"
70853
71019
  this.bNode = (Object.keys(window).length < 2) ? true : false;