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.js CHANGED
@@ -5685,7 +5685,7 @@ class ClickMenu {
5685
5685
  if(!bOneset) $("#" + me.pre + id2).resizable();
5686
5686
  }
5687
5687
 
5688
- applyShownMenus() { let me = this.icn3dui; me.icn3d;
5688
+ applyShownMenus(bNoSave) { let me = this.icn3dui; me.icn3d;
5689
5689
  let idArray = [];
5690
5690
  for(let id in me.htmlCls.allMenus) {
5691
5691
  if(me.htmlCls.shownMenus.hasOwnProperty(id)) {
@@ -5705,7 +5705,7 @@ class ClickMenu {
5705
5705
  }
5706
5706
 
5707
5707
  // save to localStorage
5708
- if(localStorage) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
5708
+ if(localStorage && !bNoSave) localStorage.setItem('hiddenmenus', JSON.stringify(idArray));
5709
5709
  }
5710
5710
 
5711
5711
  getHiddenMenusFromCache() { let me = this.icn3dui; me.icn3d;
@@ -6956,7 +6956,7 @@ class ClickMenu {
6956
6956
 
6957
6957
  let legendHtml = thisClass.setLegendHtml();
6958
6958
  //$("#" + me.pre + "legend").html(legendHtml).show();
6959
- $("#" + me.pre + "dl_legend").html(legendHtml);
6959
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
6960
6960
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
6961
6961
 
6962
6962
  ic.addTrackCls.setCustomFile('color', ic.startColor, ic.midColor, ic.endColor);
@@ -7308,11 +7308,27 @@ class ClickMenu {
7308
7308
  me.myEventCls.onIds("#" + me.pre + "mn6_igrefYes", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
7309
7309
  thisClass.setLogCmd('ig refnum on', true);
7310
7310
  await ic.refnumCls.showIgRefNum();
7311
+
7312
+ if(ic.bShowRefnum) {
7313
+ ic.opts.color = 'ig strand';
7314
+ ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
7315
+
7316
+ ic.selectionCls.selectAll_base();
7317
+ ic.hlUpdateCls.updateHlAll();
7318
+ ic.drawCls.draw();
7319
+ }
7311
7320
  });
7312
7321
 
7313
7322
  me.myEventCls.onIds("#" + me.pre + "mn6_igrefNo", "click", async function(e) { let ic = me.icn3d; //e.preventDefault();
7314
7323
  thisClass.setLogCmd('ig refnum off', true);
7315
7324
  await ic.refnumCls.hideIgRefNum();
7325
+
7326
+ ic.opts.color = 'chain';
7327
+ ic.setColorCls.setColorByOptions(ic.opts, ic.atoms);
7328
+
7329
+ ic.selectionCls.selectAll_base();
7330
+ ic.hlUpdateCls.updateHlAll();
7331
+ ic.drawCls.draw();
7316
7332
  });
7317
7333
 
7318
7334
 
@@ -9368,8 +9384,8 @@ class SetMenu {
9368
9384
  //}
9369
9385
 
9370
9386
  //!!!
9371
- //html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
9372
- //html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
9387
+ //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgstrand', 'Ig Strand', undefined, undefined, 2);
9388
+ //!!!html += this.getRadio('mn4_clr', 'mn4_clrIgproto', 'Ig Protodomain', undefined, undefined, 2);
9373
9389
  }
9374
9390
  else {
9375
9391
  //if(!me.cfg.hidelicense) html += this.getRadio('mn4_clr', 'mn1_delphi2', 'DelPhi<br><span style="padding-left:1.5em;">Potential ' + me.htmlCls.licenseStr + '</span>');
@@ -9450,14 +9466,15 @@ class SetMenu {
9450
9466
 
9451
9467
  html += this.getLink('mn6_contactmap', 'Contact Map', undefined, 1);
9452
9468
 
9453
- if(!me.cfg.notebook) {
9469
+ //if(!me.cfg.notebook) {
9454
9470
  html += this.getLink('mn1_mutation', 'Mutation ' + me.htmlCls.wifiStr, 1, 1);
9455
- }
9471
+ //}
9456
9472
 
9457
9473
  //html += this.getMenuSep();
9458
9474
  }
9459
9475
 
9460
- if(!me.cfg.notebook && !me.cfg.hidelicense) {
9476
+ //if(!me.cfg.notebook && !me.cfg.hidelicense) {
9477
+ if(!me.cfg.hidelicense) {
9461
9478
  html += this.getMenuText('mn1_delphiwrap', 'DelPhi Potential', undefined, 1, 1);
9462
9479
 
9463
9480
  html += "<ul>";
@@ -10271,6 +10288,7 @@ class Dialog {
10271
10288
 
10272
10289
  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') {
10273
10290
  $( "#" + id ).show();
10291
+ $( "#" + id + "_nb").show();
10274
10292
 
10275
10293
  height =(me.htmlCls.HEIGHT) * 0.5;
10276
10294
 
@@ -10315,7 +10333,10 @@ class Dialog {
10315
10333
  });
10316
10334
  }
10317
10335
  else {
10318
- if(ic.bRender) $( "#" + id ).show();
10336
+ if(ic.bRender) {
10337
+ $( "#" + id ).show();
10338
+ $( "#" + id + "_nb").show();
10339
+ }
10319
10340
 
10320
10341
  height = 'auto';
10321
10342
  width = 'auto';
@@ -10365,6 +10386,18 @@ class SetDialog {
10365
10386
  return html;
10366
10387
  }
10367
10388
 
10389
+ addNotebookTitle(id, title, bAddExtraDiv) { let me = this.icn3dui; me.icn3d;
10390
+ //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>';
10391
+
10392
+ 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>';
10393
+
10394
+ if(bAddExtraDiv) {
10395
+ html += '<div id="' + me.pre + id + '_html"></div>';
10396
+ }
10397
+
10398
+ return html;
10399
+ }
10400
+
10368
10401
  //Set the html for all popup dialogs.
10369
10402
  setDialogs() { let me = this.icn3dui, ic = me.icn3d;
10370
10403
  if(me.bNode) return '';
@@ -10379,12 +10412,15 @@ class SetDialog {
10379
10412
 
10380
10413
  let divClass =(me.cfg.notebook) ? '' : 'icn3d-hidden';
10381
10414
  let dialogClass =(me.cfg.notebook) ? 'icn3d-hidden' : '';
10382
- html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog'>";
10415
+ //html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:" + me.htmlCls.CMD_HEIGHT + "px'>";
10416
+ html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:12px'>";
10383
10417
 
10384
10418
  html += me.htmlCls.divStr + "dl_2ddgm' class='" + dialogClass + " icn3d-dl_2ddgm' style='background-color:white'>";
10419
+ html += this.addNotebookTitle('dl_2ddgm', '2D Diagram', true);
10385
10420
  html += "</div>";
10386
10421
 
10387
10422
  html += me.htmlCls.divStr + "dl_2dctn' class='" + dialogClass + " icn3d-dl_2dctn' style='background-color:white'>";
10423
+ html += this.addNotebookTitle('dl_2dctn', '2D Cartoon');
10388
10424
 
10389
10425
  me.svgid_ct = me.pre + "icn3d_cartoon";
10390
10426
 
@@ -10412,14 +10448,17 @@ class SetDialog {
10412
10448
 
10413
10449
  // if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign || ic.bSymd) {
10414
10450
  html += me.htmlCls.divStr + "dl_alignment' class='" + dialogClass + "' style='background-color:white;'>";
10451
+ html += this.addNotebookTitle('dl_alignment', 'Dynamically Calculated Symmetry using SymD');
10415
10452
  html += me.htmlCls.divStr + "symd_info'></div>";
10416
10453
  html += me.htmlCls.divStr + "alignseqguide_wrapper'><br>" + me.htmlCls.setHtmlCls.setAlignSequenceGuide() + "</div>";
10417
10454
  html += me.htmlCls.divStr + "dl_sequence2' class='icn3d-dl_sequence'>";
10455
+ html += this.addNotebookTitle('dl_sequence2', 'Select Residues in Aligned Sequences');
10418
10456
  html += "</div>";
10419
10457
  html += "</div>";
10420
10458
  // }
10421
10459
 
10422
10460
  html += me.htmlCls.divStr + "dl_definedsets' class='" + dialogClass + "'>";
10461
+ html += this.addNotebookTitle('dl_definedsets', 'Defined Sets');
10423
10462
  html += me.htmlCls.divStr + "dl_setsmenu'>";
10424
10463
  html += "<b>Defined Sets:</b> <br/>";
10425
10464
  html += "<select id='" + me.pre + "atomsCustom' multiple size='6' style='min-width:130px;'>";
@@ -10443,12 +10482,14 @@ class SetDialog {
10443
10482
  html += me.htmlCls.setHtmlCls.setAdvanced(2);
10444
10483
 
10445
10484
  html += me.htmlCls.divStr + "dl_vastplus' class='" + dialogClass + "' style='max-width:500px'>";
10485
+ html += this.addNotebookTitle('dl_vastplus', 'Please input PDB ID for VAST+');
10446
10486
  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>";
10447
10487
  html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastpluspdbid' value='6VXX' size=8><br>";
10448
10488
  html += me.htmlCls.buttonStr + "reload_vastplus'>VAST+</button>";
10449
10489
  html += "</div>";
10450
10490
 
10451
10491
  html += me.htmlCls.divStr + "dl_vast' class='" + dialogClass + "' style='max-width:500px'>";
10492
+ html += this.addNotebookTitle('dl_vast', 'Pleaes input chain or PDB file for VAST');
10452
10493
  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>';
10453
10494
 
10454
10495
  html += '<b>Optione 1</b>, search with your selection (all residues are selected by default) in the loaded structures:<br>';
@@ -10477,6 +10518,7 @@ class SetDialog {
10477
10518
  html += "</div>";
10478
10519
 
10479
10520
  html += me.htmlCls.divStr + "dl_foldseek' class='" + dialogClass + "' style='max-width:500px'>";
10521
+ html += this.addNotebookTitle('dl_foldseek', 'Submit your selection to Foldseek');
10480
10522
  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>';
10481
10523
  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>';
10482
10524
 
@@ -10485,16 +10527,19 @@ class SetDialog {
10485
10527
  html += "</div>";
10486
10528
 
10487
10529
  html += me.htmlCls.divStr + "dl_mmtfid' class='" + dialogClass + "'>";
10530
+ html += this.addNotebookTitle('dl_mmtfid', 'Please input an MMTF ID');
10488
10531
  html += "MMTF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmtfid' value='1TUP' size=8> ";
10489
10532
  html += me.htmlCls.buttonStr + "reload_mmtf'>Load</button>";
10490
10533
  html += "</div>";
10491
10534
 
10492
10535
  html += me.htmlCls.divStr + "dl_pdbid' class='" + dialogClass + "'>";
10536
+ html += this.addNotebookTitle('dl_pdbid', 'Please input a PDB ID');
10493
10537
  html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "pdbid' value='1TUP' size=8> ";
10494
10538
  html += me.htmlCls.buttonStr + "reload_pdb'>Load</button>";
10495
10539
  html += "</div>";
10496
10540
 
10497
10541
  html += me.htmlCls.divStr + "dl_afid' class='" + dialogClass + "'>";
10542
+ html += this.addNotebookTitle('dl_afid', 'Please input an AlphaFold UniProt ID');
10498
10543
  html += "Note: AlphaFold produces a per-residue confidence score (pLDDT) between 0 and 100:<br>";
10499
10544
  html += me.htmlCls.clickMenuCls.setAlphaFoldLegend() + "<br>";
10500
10545
 
@@ -10507,27 +10552,32 @@ class SetDialog {
10507
10552
  html += "</div>";
10508
10553
 
10509
10554
  html += me.htmlCls.divStr + "dl_refseqid' class='" + dialogClass + "'>";
10555
+ html += this.addNotebookTitle('dl_refseqid', 'Please input an NCBI protein accession');
10510
10556
  html += "NCBI Protein Accession: " + me.htmlCls.inputTextStr + "id='" + me.pre + "refseqid' value='NP_001743.1' size=8> ";
10511
10557
  html += me.htmlCls.buttonStr + "reload_refseq'>Load</button>";
10512
10558
  html += "</div>";
10513
10559
 
10514
10560
  html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
10561
+ html += this.addNotebookTitle('dl_opmid', 'Please input an OPM PDB ID');
10515
10562
  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> ";
10516
10563
  html += me.htmlCls.buttonStr + "reload_opm'>Load</button>";
10517
10564
  html += "</div>";
10518
10565
 
10519
10566
  html += me.htmlCls.divStr + "dl_pdbfile' class='" + dialogClass + "'>";
10567
+ html += this.addNotebookTitle('dl_pdbfile', 'Please input a PDB file');
10520
10568
  html += "Note: Several PDB files could be concatenated into a single PDB file. Use the line \"ENDMDL\" to separate PDB files.<br><br>";
10521
10569
  html += "PDB File: " + me.htmlCls.inputFileStr + " id='" + me.pre + "pdbfile' size=8> ";
10522
10570
  html += me.htmlCls.buttonStr + "reload_pdbfile'>Load</button>";
10523
10571
  html += "</div>";
10524
10572
 
10525
10573
  html += me.htmlCls.divStr + "dl_pdbfile_app' class='" + dialogClass + "'>";
10574
+ html += this.addNotebookTitle('dl_pdbfile_app', 'Please append PDB files');
10526
10575
  html += "Multiple PDB Files: <input type='file' multiple id='" + me.pre + "pdbfile_app' size=8> ";
10527
10576
  html += me.htmlCls.buttonStr + "reload_pdbfile_app'>Append</button>";
10528
10577
  html += "</div>";
10529
10578
 
10530
10579
  html += me.htmlCls.divStr + "dl_rescolorfile' class='" + dialogClass + "'>";
10580
+ html += this.addNotebookTitle('dl_rescolorfile', 'Please input a residue color file');
10531
10581
  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>';
10532
10582
  html += '{"ALA":"#C8C8C8", "ARG":"#145AFF", ..., "G":"#008000", "A":"#6080FF", ...}</div><br>';
10533
10583
  html += "Residue Color File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "rescolorfile' size=8> ";
@@ -10535,6 +10585,7 @@ class SetDialog {
10535
10585
  html += "</div>";
10536
10586
 
10537
10587
  html += me.htmlCls.divStr + "dl_customcolor' class='" + dialogClass + "'>";
10588
+ html += this.addNotebookTitle('dl_customcolor', 'Please input a custom color file');
10538
10589
  html += " <input type='hidden' id='" + me.pre + "customcolor_chainid' value=''>";
10539
10590
  html += '<div style="width:450px;">The custom file for the structure has two columns separated by space or tab: ';
10540
10591
  html += 'residue number, and score in the range of 0-100. If you click "Apply Custom Color" button, ';
@@ -10562,6 +10613,7 @@ class SetDialog {
10562
10613
  html += "</div>";
10563
10614
 
10564
10615
  html += me.htmlCls.divStr + "dl_customref' class='" + dialogClass + "'>";
10616
+ html += this.addNotebookTitle('dl_customref', 'Please input a reference number file');
10565
10617
  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>';
10566
10618
  html += '<pre>refnum,11,12,,21,22,,10C,11C,20C<br>';
10567
10619
  html += '1TUP_A,100,101,,,132,,,,<br>';
@@ -10575,17 +10627,20 @@ class SetDialog {
10575
10627
  html += "</div>";
10576
10628
 
10577
10629
  html += me.htmlCls.divStr + "dl_align' class='" + dialogClass + "'>";
10630
+ html += this.addNotebookTitle('dl_align', 'Please select residues in aligned sequences');
10578
10631
  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/>";
10579
10632
  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>";
10580
10633
  html += "<b>VAST+ based on TM-align</b>: " + me.htmlCls.buttonStr + "reload_align_tmalign'>All Matching Molecules Superposed</button><br><br>";
10581
10634
  html += "</div>";
10582
10635
 
10583
10636
  html += me.htmlCls.divStr + "dl_alignaf' class='" + dialogClass + "'>";
10637
+ html += this.addNotebookTitle('dl_alignaf', 'Align AlphaFold structures');
10584
10638
  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/>";
10585
10639
  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>";
10586
10640
  html += "</div>";
10587
10641
 
10588
10642
  html += me.htmlCls.divStr + "dl_chainalign' class='" + dialogClass + "'>";
10643
+ html += this.addNotebookTitle('dl_chainalign', 'Align chains');
10589
10644
  html += "<div style='width:550px'>";
10590
10645
  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/>";
10591
10646
  html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -10595,6 +10650,7 @@ class SetDialog {
10595
10650
  html += "</div></div>";
10596
10651
 
10597
10652
  html += me.htmlCls.divStr + "dl_chainalign2' class='" + dialogClass + "'>";
10653
+ html += this.addNotebookTitle('dl_chainalign2', 'Align chains');
10598
10654
  html += "<div style='width:550px'>";
10599
10655
  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/>";
10600
10656
  html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids2' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
@@ -10606,11 +10662,13 @@ class SetDialog {
10606
10662
  html += "</div></div>";
10607
10663
 
10608
10664
  html += me.htmlCls.divStr + "dl_chainalign3' class='" + dialogClass + "'>";
10665
+ html += this.addNotebookTitle('dl_chainalign3', 'Align chains');
10609
10666
  html += "<div style='width:550px'>";
10610
10667
  html += this.getHtmlAlignResidueByResidue('chainalignids3', 'predefinedres', 'reload_chainalign_asym3');
10611
10668
  html += "</div></div>";
10612
10669
 
10613
10670
  html += me.htmlCls.divStr + "dl_realignresbyres' class='" + dialogClass + "'>";
10671
+ html += this.addNotebookTitle('dl_realignresbyres', 'Realign residue by residue');
10614
10672
  html += "<div style='width:550px'>";
10615
10673
  html += "<b>Option 1</b>: " + me.htmlCls.buttonStr + "realignSelection'><b>Realign Current Selection Residue by Residue</b></button><br/><br/>";
10616
10674
  html += "<b>Option 2</b>: <br>";
@@ -10618,6 +10676,7 @@ class SetDialog {
10618
10676
  html += "</div></div>";
10619
10677
 
10620
10678
  html += me.htmlCls.divStr + "dl_mutation' class='" + dialogClass + "'>";
10679
+ html += this.addNotebookTitle('dl_mutation', 'Mutation analysis');
10621
10680
  html += "<div style='width:500px'>";
10622
10681
  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/>';
10623
10682
  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/>";
@@ -10636,25 +10695,30 @@ class SetDialog {
10636
10695
  html += "<br/><br/></div></div>";
10637
10696
 
10638
10697
  html += me.htmlCls.divStr + "dl_mol2file' class='" + dialogClass + "'>";
10698
+ html += this.addNotebookTitle('dl_mol2file', 'Please input a Mol2 file');
10639
10699
  html += "Mol2 File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mol2file' size=8> ";
10640
10700
  html += me.htmlCls.buttonStr + "reload_mol2file'>Load</button>";
10641
10701
  html += "</div>";
10642
10702
  html += me.htmlCls.divStr + "dl_sdffile' class='" + dialogClass + "'>";
10703
+ html += this.addNotebookTitle('dl_sdffile', 'Please input an SDF file');
10643
10704
  html += "SDF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "sdffile' size=8> ";
10644
10705
  html += me.htmlCls.buttonStr + "reload_sdffile'>Load</button>";
10645
10706
  html += "</div>";
10646
10707
  html += me.htmlCls.divStr + "dl_xyzfile' class='" + dialogClass + "'>";
10708
+ html += this.addNotebookTitle('dl_xyzfile', 'Please input an XYZ file');
10647
10709
  html += "XYZ File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xyzfile' size=8> ";
10648
10710
  html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
10649
10711
  html += "</div>";
10650
10712
 
10651
10713
  html += me.htmlCls.divStr + "dl_afmapfile' class='" + dialogClass + "'>";
10714
+ html += this.addNotebookTitle('dl_afmapfile', 'Please input an AlphaFold PAE file');
10652
10715
  html += "AlphaFold PAE File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> <br><br>";
10653
10716
  html += me.htmlCls.buttonStr + "reload_afmapfile'>Load Half PAE Map</button>"
10654
10717
  + me.htmlCls.buttonStr + "reload_afmapfilefull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
10655
10718
  html += "</div>";
10656
10719
 
10657
10720
  html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
10721
+ html += this.addNotebookTitle('dl_urlfile', 'Please input a file via URL');
10658
10722
  html += "File type: ";
10659
10723
  html += "<select id='" + me.pre + "filetype'>";
10660
10724
  html += me.htmlCls.optionStr + "'pdb' selected>PDB</option>";
@@ -10670,16 +10734,19 @@ class SetDialog {
10670
10734
  html += "</div>";
10671
10735
 
10672
10736
  html += me.htmlCls.divStr + "dl_mmciffile' class='" + dialogClass + "'>";
10737
+ html += this.addNotebookTitle('dl_mmciffile', 'Please input an mmCIF file');
10673
10738
  html += "mmCIF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mmciffile' value='1TUP' size=8> ";
10674
10739
  html += me.htmlCls.buttonStr + "reload_mmciffile'>Load</button>";
10675
10740
  html += "</div>";
10676
10741
 
10677
10742
  html += me.htmlCls.divStr + "dl_mmcifid' class='" + dialogClass + "'>";
10743
+ html += this.addNotebookTitle('dl_mmcifid', 'Please input an mmCIF ID');
10678
10744
  html += "mmCIF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmcifid' value='1TUP' size=8> ";
10679
10745
  html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
10680
10746
  html += "</div>";
10681
10747
 
10682
10748
  html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "' style='max-width:500px'>";
10749
+ html += this.addNotebookTitle('dl_mmdbid', 'Please input an MMDB ID');
10683
10750
  html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> <br><br>";
10684
10751
  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>";
10685
10752
  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="'
@@ -10692,6 +10759,7 @@ class SetDialog {
10692
10759
  html += "</div>";
10693
10760
 
10694
10761
  html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
10762
+ html += this.addNotebookTitle('dl_mmdbafid', 'Please input a list of PDB/AlphaFold IDs');
10695
10763
  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>";
10696
10764
  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/>";
10697
10765
  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/>";
@@ -10706,6 +10774,7 @@ class SetDialog {
10706
10774
  html += "</div>";
10707
10775
 
10708
10776
  html += me.htmlCls.divStr + "dl_blast_rep_id' style='max-width:600px;' class='" + dialogClass + "'>";
10777
+ html += this.addNotebookTitle('dl_blast_rep_id', 'Align sequence to structure');
10709
10778
  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> ";
10710
10779
  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> ";
10711
10780
  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>";
@@ -10717,32 +10786,38 @@ class SetDialog {
10717
10786
  html += "</div>";
10718
10787
 
10719
10788
  html += me.htmlCls.divStr + "dl_yournote' class='" + dialogClass + "'>";
10789
+ html += this.addNotebookTitle('dl_yournote', 'Your Note');
10720
10790
  html += "Your note will be saved in the HTML file when you click \"File > Save File > iCn3D PNG Image\".<br><br>";
10721
10791
  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>";
10722
10792
  html += me.htmlCls.buttonStr + "applyyournote'>Save</button>";
10723
10793
  html += "</div>";
10724
10794
 
10725
10795
  html += me.htmlCls.divStr + "dl_gi' class='" + dialogClass + "'>";
10796
+ html += this.addNotebookTitle('dl_gi', 'Please input an NCBI gi');
10726
10797
  html += "Protein gi: " + me.htmlCls.inputTextStr + "id='" + me.pre + "gi' value='1310960' size=8> ";
10727
10798
  html += me.htmlCls.buttonStr + "reload_gi'>Load</button>";
10728
10799
  html += "</div>";
10729
10800
 
10730
10801
  html += me.htmlCls.divStr + "dl_cid' class='" + dialogClass + "'>";
10802
+ html += this.addNotebookTitle('dl_cid', 'Please input a PubChem CID');
10731
10803
  html += "PubChem CID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
10732
10804
  html += me.htmlCls.buttonStr + "reload_cid'>Load</button>";
10733
10805
  html += "</div>";
10734
10806
 
10735
10807
  html += me.htmlCls.divStr + "dl_pngimage' class='" + dialogClass + "'>";
10808
+ html += this.addNotebookTitle('dl_pngimage', 'Please input an iCn3D PNG Image file');
10736
10809
  html += "iCn3D PNG image: " + me.htmlCls.inputFileStr + "id='" + me.pre + "pngimage'><br/>";
10737
10810
  html += me.htmlCls.buttonStr + "reload_pngimage' style='margin-top: 6px;'>Load</button>";
10738
10811
  html += "</div>";
10739
10812
 
10740
10813
  html += me.htmlCls.divStr + "dl_state' class='" + dialogClass + "'>";
10814
+ html += this.addNotebookTitle('dl_state', 'Please input a state file');
10741
10815
  html += "State file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "state'><br/>";
10742
10816
  html += me.htmlCls.buttonStr + "reload_state' style='margin-top: 6px;'>Load</button>";
10743
10817
  html += "</div>";
10744
10818
 
10745
10819
  html += me.htmlCls.divStr + "dl_fixedversion' style='max-width:500px' class='" + dialogClass + "'>";
10820
+ html += this.addNotebookTitle('dl_fixedversion', 'Use fixed version of iCn3D');
10746
10821
  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>";
10747
10822
  html += "Share Link URL: " + me.htmlCls.inputTextStr + "id='" + me.pre + "sharelinkurl' size=60><br>";
10748
10823
  html += me.htmlCls.buttonStr + "reload_fixedversion'>Show Original View</button><br><br>";
@@ -10750,16 +10825,19 @@ class SetDialog {
10750
10825
 
10751
10826
 
10752
10827
  html += me.htmlCls.divStr + "dl_selection' class='" + dialogClass + "'>";
10828
+ html += this.addNotebookTitle('dl_selection', 'Load a selection file');
10753
10829
  html += "Selection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "selectionfile'><br/>";
10754
10830
  html += me.htmlCls.buttonStr + "reload_selectionfile' style='margin-top: 6px;'>Load</button>";
10755
10831
  html += "</div>";
10756
10832
 
10757
10833
  html += me.htmlCls.divStr + "dl_menuloadpref' class='" + dialogClass + "'>";
10834
+ html += this.addNotebookTitle('dl_menuloadpref', 'Load a preference file');
10758
10835
  html += "Preference file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "menupreffile'><br/>";
10759
10836
  html += me.htmlCls.buttonStr + "reload_menupreffile' style='margin-top: 6px;'>Load</button>";
10760
10837
  html += "</div>";
10761
10838
 
10762
10839
  html += me.htmlCls.divStr + "dl_dsn6' class='" + dialogClass + "'>";
10840
+ html += this.addNotebookTitle('dl_dsn6', 'Load a DSN6 file');
10763
10841
  html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
10764
10842
 
10765
10843
  html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigma2fofc'>";
@@ -10782,6 +10860,7 @@ class SetDialog {
10782
10860
  html += "</div>";
10783
10861
 
10784
10862
  html += me.htmlCls.divStr + "dl_dsn6url' class='" + dialogClass + "'>";
10863
+ html += this.addNotebookTitle('dl_dsn6url', 'Load a selection file via a URL');
10785
10864
  html += "<b>Note</b>: Always load a PDB file before loading DSN6 files. <br/><br/><br/>";
10786
10865
 
10787
10866
  html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at: <select id='" + me.pre + "dsn6sigmaurl2fofc'>";
@@ -10803,6 +10882,7 @@ class SetDialog {
10803
10882
  html += "</div>";
10804
10883
 
10805
10884
  html += me.htmlCls.divStr + "dl_clr' class='" + dialogClass + "'>";
10885
+ html += this.addNotebookTitle('dl_clr', 'Pick a color');
10806
10886
  html += "Click in the input box to use the color picker:<br><br> ";
10807
10887
  html += "Custom Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "colorcustom' value='FF0000' size=8> ";
10808
10888
  html += me.htmlCls.buttonStr + "applycustomcolor'>Apply</button>";
@@ -10814,6 +10894,7 @@ class SetDialog {
10814
10894
  html += me.htmlCls.setHtmlCls.getPotentialHtml('url', dialogClass);
10815
10895
 
10816
10896
  html += me.htmlCls.divStr + "dl_symmetry' class='" + dialogClass + "'><br>";
10897
+ html += this.addNotebookTitle('dl_symmetry', 'Symmetry');
10817
10898
  html += me.htmlCls.divNowrapStr + "Symmetry: <select id='" + me.pre + "selectSymmetry'>";
10818
10899
  html += "</select>" + me.htmlCls.space3;
10819
10900
  html += me.htmlCls.buttonStr + "applysymmetry'>Apply</button>" + me.htmlCls.space3;
@@ -10821,10 +10902,12 @@ class SetDialog {
10821
10902
  html += "</div>";
10822
10903
 
10823
10904
  html += me.htmlCls.divStr + "dl_symd' style='max-width:400px' class='" + dialogClass + "'><br>";
10905
+ html += this.addNotebookTitle('dl_symd', 'Dynamically symmetry calculation using SymD');
10824
10906
 
10825
10907
  html += "</div>";
10826
10908
 
10827
10909
  html += me.htmlCls.divStr + "dl_contact' class='" + dialogClass + "'>";
10910
+ html += this.addNotebookTitle('dl_contact', 'Contact Map');
10828
10911
  html += "<span style='white-space:nowrap;font-weight:bold;'>Distance: <select id='" + me.pre + "contactdist'>";
10829
10912
  html += me.htmlCls.setHtmlCls.getOptionHtml(['4', '5', '6', '7', '8', '9', '10'], 4);
10830
10913
  html += "</select></span>";
@@ -10837,6 +10920,7 @@ class SetDialog {
10837
10920
  html += "</div>";
10838
10921
 
10839
10922
  html += me.htmlCls.divStr + "dl_hbonds' class='" + dialogClass + "'>";
10923
+ html += this.addNotebookTitle('dl_hbonds', 'Interaction Analysis');
10840
10924
  html += "1. Choose interaction types and their thresholds:<br>";
10841
10925
  html += "<div class='icn3d-box'><table border=0 width=450><tr>";
10842
10926
  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>";
@@ -10935,6 +11019,7 @@ class SetDialog {
10935
11019
  html += "</div>";
10936
11020
 
10937
11021
  html += me.htmlCls.divStr + "dl_realign' class='" + dialogClass + "'>";
11022
+ html += this.addNotebookTitle('dl_realign', 'Realign by sequence');
10938
11023
 
10939
11024
  html += me.htmlCls.divNowrapStr + "1. Select sets below <br>or use your current selection:</div><br>";
10940
11025
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealign' multiple size='5' style='min-width:130px;'>";
@@ -10944,6 +11029,7 @@ class SetDialog {
10944
11029
  html += "</div>";
10945
11030
 
10946
11031
  html += me.htmlCls.divStr + "dl_realignbystruct' class='" + dialogClass + "' style='max-width:500px'>";
11032
+ html += this.addNotebookTitle('dl_realignbystruct', 'Realign by structure');
10947
11033
 
10948
11034
  //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>";
10949
11035
  html += "<div><b>1</b>. Select sets below or use your current selection.</div><br>";
@@ -10959,6 +11045,7 @@ class SetDialog {
10959
11045
  html += "</div>";
10960
11046
 
10961
11047
  html += me.htmlCls.divStr + "dl_realigntwostru' class='" + dialogClass + "'>";
11048
+ html += this.addNotebookTitle('dl_realigntwostru', 'Realign two structure complexes');
10962
11049
 
10963
11050
  html += me.htmlCls.divNowrapStr + "1. Select sets below or use your current selection:</div><br>";
10964
11051
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealignByStruct2' multiple size='5' style='min-width:130px;'>";
@@ -10971,6 +11058,7 @@ class SetDialog {
10971
11058
 
10972
11059
 
10973
11060
  html += me.htmlCls.divStr + "dl_colorspectrumacrosssets' class='" + dialogClass + "'>";
11061
+ html += this.addNotebookTitle('dl_colorspectrumacrosssets', 'Set color spectrum across sets');
10974
11062
 
10975
11063
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
10976
11064
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrumAcross' multiple size='5' style='min-width:130px;'>";
@@ -10981,7 +11069,7 @@ class SetDialog {
10981
11069
 
10982
11070
 
10983
11071
  html += me.htmlCls.divStr + "dl_colorspectrumbysets' class='" + dialogClass + "'>";
10984
-
11072
+ html += this.addNotebookTitle('dl_colorspectrumbysets', 'Set color spectrum for residues in sets');
10985
11073
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
10986
11074
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrum' multiple size='5' style='min-width:130px;'>";
10987
11075
  html += "</select></div>";
@@ -10991,7 +11079,7 @@ class SetDialog {
10991
11079
 
10992
11080
 
10993
11081
  html += me.htmlCls.divStr + "dl_colorrainbowacrosssets' class='" + dialogClass + "'>";
10994
-
11082
+ html += this.addNotebookTitle('dl_colorrainbowacrosssets', 'Set color rainbow across sets');
10995
11083
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
10996
11084
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbowAcross' multiple size='5' style='min-width:130px;'>";
10997
11085
  html += "</select></div>";
@@ -11001,7 +11089,7 @@ class SetDialog {
11001
11089
 
11002
11090
 
11003
11091
  html += me.htmlCls.divStr + "dl_colorrainbowbysets' class='" + dialogClass + "'>";
11004
-
11092
+ html += this.addNotebookTitle('dl_colorrainbowbysets', 'Set color rainbow for residues in sets');
11005
11093
  html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
11006
11094
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbow' multiple size='5' style='min-width:130px;'>";
11007
11095
  html += "</select></div>";
@@ -11011,12 +11099,15 @@ class SetDialog {
11011
11099
 
11012
11100
 
11013
11101
  html += me.htmlCls.divStr + "dl_allinteraction' style='background-color:white' class='" + dialogClass + "'>";
11102
+ html += this.addNotebookTitle('dl_allinteraction', 'All interactions', true);
11014
11103
  html += "</div>";
11015
11104
 
11016
11105
  html += me.htmlCls.divStr + "dl_interactionsorted' style='background-color:white' class='" + dialogClass + "'>";
11106
+ html += this.addNotebookTitle('dl_interactionsorted', 'Sorted interactions', true);
11017
11107
  html += "</div>";
11018
11108
 
11019
11109
  html += me.htmlCls.divStr + "dl_linegraph' style='background-color:white' class='" + dialogClass + "'>";
11110
+ html += this.addNotebookTitle('dl_linegraph', '2D Interaction Network');
11020
11111
 
11021
11112
  html += me.htmlCls.divNowrapStr + '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
11022
11113
  + 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="'
@@ -11047,6 +11138,7 @@ class SetDialog {
11047
11138
  html += "</div>";
11048
11139
 
11049
11140
  html += me.htmlCls.divStr + "dl_scatterplot' style='background-color:white' class='" + dialogClass + "'>";
11141
+ html += this.addNotebookTitle('dl_scatterplot', '2D Interaction Map');
11050
11142
 
11051
11143
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3;
11052
11144
 
@@ -11073,6 +11165,7 @@ class SetDialog {
11073
11165
  html += "</div>";
11074
11166
 
11075
11167
  html += me.htmlCls.divStr + "dl_contactmap' style='background-color:white' class='" + dialogClass + "'>";
11168
+ html += this.addNotebookTitle('dl_contactmap', 'Contact Map');
11076
11169
 
11077
11170
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
11078
11171
 
@@ -11091,6 +11184,7 @@ class SetDialog {
11091
11184
  html += "</div>";
11092
11185
 
11093
11186
  html += me.htmlCls.divStr + "dl_alignerrormap' style='background-color:white' class='" + dialogClass + "'>";
11187
+ html += this.addNotebookTitle('dl_alignerrormap', 'PAE Map');
11094
11188
 
11095
11189
  html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
11096
11190
 
@@ -11118,6 +11212,7 @@ class SetDialog {
11118
11212
  html += "</div>";
11119
11213
 
11120
11214
  html += me.htmlCls.divStr + "dl_elecmap2fofc' class='" + dialogClass + "'>";
11215
+ html += this.addNotebookTitle('dl_elecmap2fofc', 'Electron Density 2F0-Fc Map');
11121
11216
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigma2fofc'>";
11122
11217
 
11123
11218
  html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 3);
@@ -11126,6 +11221,7 @@ class SetDialog {
11126
11221
  html += "</div>";
11127
11222
 
11128
11223
  html += me.htmlCls.divStr + "dl_elecmapfofc' class='" + dialogClass + "'>";
11224
+ html += this.addNotebookTitle('dl_elecmapfofc', 'Electron Density F0-Fc Map');
11129
11225
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigmafofc'>";
11130
11226
 
11131
11227
  html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 5);
@@ -11134,6 +11230,7 @@ class SetDialog {
11134
11230
  html += "</div>";
11135
11231
 
11136
11232
  html += me.htmlCls.divStr + "dl_emmap' class='" + dialogClass + "'>";
11233
+ html += this.addNotebookTitle('dl_emmap', 'EM Density Map');
11137
11234
  html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "empercentage'>";
11138
11235
 
11139
11236
  html += me.htmlCls.setHtmlCls.getOptionHtml(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'], 3);
@@ -11142,6 +11239,7 @@ class SetDialog {
11142
11239
  html += "</div>";
11143
11240
 
11144
11241
  html += me.htmlCls.divStr + "dl_aroundsphere' class='" + dialogClass + "'>";
11242
+ html += this.addNotebookTitle('dl_aroundsphere', 'Select a sphere around a set of residues');
11145
11243
  html += me.htmlCls.divNowrapStr + "1. Select the first set:</div>";
11146
11244
  html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomSphere2' multiple size='3' style='min-width:130px;'>";
11147
11245
  html += "</select></div><br>";
@@ -11156,6 +11254,7 @@ class SetDialog {
11156
11254
  html += "</div>";
11157
11255
 
11158
11256
  html += me.htmlCls.divStr + "dl_adjustmem' class='" + dialogClass + "'>";
11257
+ html += this.addNotebookTitle('dl_adjustmem', 'Adjust membranes');
11159
11258
  html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
11160
11259
  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/>";
11161
11260
  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/>";
@@ -11163,6 +11262,7 @@ class SetDialog {
11163
11262
  html += "</div>";
11164
11263
 
11165
11264
  html += me.htmlCls.divStr + "dl_selectplane' class='" + dialogClass + "'>";
11265
+ html += this.addNotebookTitle('dl_selectplane', 'Select a plane');
11166
11266
  html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
11167
11267
  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/>";
11168
11268
  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/>";
@@ -11170,6 +11270,7 @@ class SetDialog {
11170
11270
  html += "</div>";
11171
11271
 
11172
11272
  html += me.htmlCls.divStr + "dl_addlabel' class='" + dialogClass + "'>";
11273
+ html += this.addNotebookTitle('dl_addlabel', 'Add labels between two atoms');
11173
11274
  html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext' value='Text' size=4><br/>";
11174
11275
  html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize' value='18' size=4 maxlength=2><br/>";
11175
11276
  html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor' value='" + defaultColor + "' size=4><br/>";
@@ -11184,6 +11285,7 @@ class SetDialog {
11184
11285
  html += "</div>";
11185
11286
 
11186
11287
  html += me.htmlCls.divStr + "dl_addlabelselection' class='" + dialogClass + "'>";
11288
+ html += this.addNotebookTitle('dl_addlabelselection', 'Add labels for your selection');
11187
11289
  html += "1. Text: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labeltext2' value='Text' size=4><br/>";
11188
11290
  html += "2. Size: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelsize2' value='18' size=4 maxlength=2><br/>";
11189
11291
  html += "3. Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolor2' value='" + defaultColor + "' size=4><br/>";
@@ -11192,11 +11294,13 @@ class SetDialog {
11192
11294
  html += "</div>";
11193
11295
 
11194
11296
  html += me.htmlCls.divStr + "dl_labelColor' class='" + dialogClass + "'>";
11297
+ html += this.addNotebookTitle('dl_labelColor', 'Change label color');
11195
11298
  html += "Color for all labels: " + me.htmlCls.inputTextStr + "id='" + me.pre + "labelcolorall' value='" + defaultColor + "' size=4><br/><br/>";
11196
11299
  html += me.htmlCls.spanNowrapStr + me.htmlCls.buttonStr + "applylabelcolor'>Display</button></span>";
11197
11300
  html += "</div>";
11198
11301
 
11199
11302
  html += me.htmlCls.divStr + "dl_distance' class='" + dialogClass + "'>";
11303
+ html += this.addNotebookTitle('dl_distance', 'Measure distance');
11200
11304
  if(me.utilsCls.isMobile()) {
11201
11305
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
11202
11306
  }
@@ -11208,6 +11312,7 @@ class SetDialog {
11208
11312
  html += "</div>";
11209
11313
 
11210
11314
  html += me.htmlCls.divStr + "dl_stabilizer' class='" + dialogClass + "'>";
11315
+ html += this.addNotebookTitle('dl_stabilizer', 'Add a stabilizer');
11211
11316
  if(me.utilsCls.isMobile()) {
11212
11317
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
11213
11318
  }
@@ -11219,6 +11324,7 @@ class SetDialog {
11219
11324
  html += "</div>";
11220
11325
 
11221
11326
  html += me.htmlCls.divStr + "dl_disttwosets' class='" + dialogClass + "'>";
11327
+ html += this.addNotebookTitle('dl_disttwosets', 'Measure the distance between two sets');
11222
11328
  html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
11223
11329
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
11224
11330
 
@@ -11240,6 +11346,7 @@ class SetDialog {
11240
11346
 
11241
11347
 
11242
11348
  html += me.htmlCls.divStr + "dl_linebtwsets' class='" + dialogClass + "'>";
11349
+ html += this.addNotebookTitle('dl_linebtwsets', 'Add a line between two sets');
11243
11350
  html += me.htmlCls.spanNowrapStr + "1. Select two sets</span><br/>";
11244
11351
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
11245
11352
 
@@ -11273,6 +11380,7 @@ class SetDialog {
11273
11380
 
11274
11381
 
11275
11382
  html += me.htmlCls.divStr + "dl_cartoonshape' class='" + dialogClass + "'>";
11383
+ html += this.addNotebookTitle('dl_cartoonshape', 'Cartoon Shape');
11276
11384
  html += me.htmlCls.spanNowrapStr + "1. Select a set:</span><br/>";
11277
11385
  html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "cartoonshape' multiple size='5' style='min-width:130px;'>";
11278
11386
  html += "</select></div><br>";
@@ -11295,6 +11403,7 @@ class SetDialog {
11295
11403
 
11296
11404
 
11297
11405
  html += me.htmlCls.divStr + "dl_distmanysets' class='" + dialogClass + "'>";
11406
+ html += this.addNotebookTitle('dl_distmanysets', 'Measure distances among many sets');
11298
11407
  html += me.htmlCls.spanNowrapStr + "1. Select sets for pairwise distances</span><br/>";
11299
11408
  html += "<table border=0 width=400 cellspacing=10><tr><td>";
11300
11409
 
@@ -11314,6 +11423,7 @@ class SetDialog {
11314
11423
  html += "</div>";
11315
11424
 
11316
11425
  html += me.htmlCls.divStr + "dl_stabilizer_rm' class='" + dialogClass + "'>";
11426
+ html += this.addNotebookTitle('dl_stabilizer_rm', 'Remove a stabilizer');
11317
11427
  if(me.utilsCls.isMobile()) {
11318
11428
  html += me.htmlCls.spanNowrapStr + "1. Touch TWO atoms</span><br/>";
11319
11429
  }
@@ -11324,14 +11434,17 @@ class SetDialog {
11324
11434
  html += "</div>";
11325
11435
 
11326
11436
  html += me.htmlCls.divStr + "dl_thickness' class='" + dialogClass + "'>";
11437
+ html += this.addNotebookTitle('dl_thickness', 'Set thickness');
11327
11438
  html += me.htmlCls.setHtmlCls.setThicknessHtml('3dprint');
11328
11439
  html += "</div>";
11329
11440
 
11330
11441
  html += me.htmlCls.divStr + "dl_thickness2' class='" + dialogClass + "'>";
11442
+ html += this.addNotebookTitle('dl_thickness2', 'Set thickness');
11331
11443
  html += me.htmlCls.setHtmlCls.setThicknessHtml('style');
11332
11444
  html += "</div>";
11333
11445
 
11334
11446
  html += me.htmlCls.divStr + "dl_menupref' class='" + dialogClass + "'>";
11447
+ html += this.addNotebookTitle('dl_menupref', 'Preferences for menus');
11335
11448
  html += "<b>Note</b>: The following parameters will be saved in cache. You just need to set them once. <br><br>";
11336
11449
 
11337
11450
  html += me.htmlCls.spanNowrapStr + "" + me.htmlCls.buttonStr + "apply_menupref'>Apply</button></span>";
@@ -11347,6 +11460,7 @@ class SetDialog {
11347
11460
  html += "</div>";
11348
11461
 
11349
11462
  html += me.htmlCls.divStr + "dl_addtrack' class='" + dialogClass + "'>";
11463
+ html += this.addNotebookTitle('dl_addtrack', 'Add a track');
11350
11464
  html += " <input type='hidden' id='" + me.pre + "track_chainid' value=''>";
11351
11465
 
11352
11466
  html += me.htmlCls.divStr + "dl_addtrack_tabs' style='border:0px;'>";
@@ -11402,6 +11516,7 @@ class SetDialog {
11402
11516
  html += "</div>";
11403
11517
 
11404
11518
  html += me.htmlCls.divStr + "dl_saveselection' class='" + dialogClass + "'>";
11519
+ html += this.addNotebookTitle('dl_saveselection', 'Save Selection');
11405
11520
  let index =(ic && ic.defNames2Atoms) ? Object.keys(ic.defNames2Atoms).length : 1;
11406
11521
  let suffix = '';
11407
11522
  html += "Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "seq_command_name" + suffix + "' value='seq_" + index + "' size='5'> <br>";
@@ -11411,6 +11526,7 @@ class SetDialog {
11411
11526
 
11412
11527
 
11413
11528
  html += me.htmlCls.divStr + "dl_copyurl' style='width:520px;' class='" + dialogClass + "'>";
11529
+ html += this.addNotebookTitle('dl_copyurl', 'Share Link');
11414
11530
  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>";
11415
11531
  html += "Original URL with commands: <br><textarea id='" + me.pre + "ori_url' rows='4' style='width:100%'></textarea><br><br>";
11416
11532
  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>";
@@ -11418,6 +11534,7 @@ class SetDialog {
11418
11534
  html += "</div>";
11419
11535
 
11420
11536
  html += me.htmlCls.divStr + "dl_selectannotations' class='" + dialogClass + " icn3d-annotation' style='background-color:white;'>";
11537
+ html += this.addNotebookTitle('dl_selectannotations', 'Sequences & Annotations');
11421
11538
 
11422
11539
  html += me.htmlCls.divStr + "dl_annotations_tabs'>";
11423
11540
 
@@ -11446,6 +11563,7 @@ class SetDialog {
11446
11563
  html += "</div>";
11447
11564
 
11448
11565
  html += me.htmlCls.divStr + "dl_graph' style='background-color:white;' class='" + dialogClass + "'>";
11566
+ html += this.addNotebookTitle('dl_graph', 'Interactions');
11449
11567
  me.svgid = me.pre + 'icn3d_viz';
11450
11568
  html += '<style>';
11451
11569
  html += '#' + me.svgid + ' svg { border: 1px solid; font: 13px sans-serif; text-anchor: end; }';
@@ -11500,6 +11618,7 @@ class SetDialog {
11500
11618
  html += "</div>";
11501
11619
 
11502
11620
  html += me.htmlCls.divStr + "dl_area' class='" + dialogClass + "'>";
11621
+ html += this.addNotebookTitle('dl_area', 'Surface Area');
11503
11622
  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>";
11504
11623
  html += '(0-20% out is considered "in". 50-100% out is considered "out".)<br><br>';
11505
11624
  html += "<b>Toal</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "areavalue' value='' size='10'> &#8491;<sup>2</sup><br><br>";
@@ -11507,19 +11626,23 @@ class SetDialog {
11507
11626
  html += "</div>";
11508
11627
 
11509
11628
  html += me.htmlCls.divStr + "dl_colorbyarea' class='" + dialogClass + "'>";
11629
+ html += this.addNotebookTitle('dl_colorbyarea', 'Color by surface area');
11510
11630
  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>";
11511
11631
  html += "<b>Middle Percentage(White)</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "midpercent' value='35' size='10'>% <br><br>";
11512
11632
  html += "<button style='white-space:nowrap;' id='" + me.pre + "applycolorbyarea'>Color</button><br/><br/>";
11513
11633
  html += "</div>";
11514
11634
 
11515
11635
  html += me.htmlCls.divStr + "dl_rmsd' class='" + dialogClass + "' style='max-width:300px'>";
11636
+ html += this.addNotebookTitle('dl_rmsd', 'RMSD', true);
11516
11637
 
11517
11638
  html += "</div>";
11518
11639
 
11519
11640
  html += me.htmlCls.divStr + "dl_buriedarea' class='" + dialogClass + "'>";
11641
+ html += this.addNotebookTitle('dl_buriedarea', 'Buried surface area', true);
11520
11642
  html += "</div>";
11521
11643
 
11522
11644
  html += me.htmlCls.divStr + "dl_propbypercentout' class='" + dialogClass + "'>";
11645
+ html += this.addNotebookTitle('dl_propbypercentout', 'Select residues basen on solvent accessilbe surface area');
11523
11646
  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>";
11524
11647
  html += "<b>Min Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minpercentout' value='0' size='10'>% <br>";
11525
11648
  html += "<b>Max Percentage</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxpercentout' value='100' size='10'>% <br>";
@@ -11527,6 +11650,7 @@ class SetDialog {
11527
11650
  html += "</div>";
11528
11651
 
11529
11652
  html += me.htmlCls.divStr + "dl_propbybfactor' class='" + dialogClass + "'>";
11653
+ html += this.addNotebookTitle('dl_propbybfactor', 'Select residues basen on B-factor');
11530
11654
  html += "<div style='width:400px'>Select residue based on B-factor. The values are in the range of 0-100.</div><br>";
11531
11655
  html += "<b>Min B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "minbfactor' value='0' size='10'>% <br>";
11532
11656
  html += "<b>Max B-factor</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxbfactor' value='100' size='10'>% <br>";
@@ -11534,9 +11658,11 @@ class SetDialog {
11534
11658
  html += "</div>";
11535
11659
 
11536
11660
  html += me.htmlCls.divStr + "dl_legend' class='" + dialogClass + "' style='max-width:500px; background-color:white'>";
11661
+ html += this.addNotebookTitle('dl_legend', 'Legend', true);
11537
11662
  html += "</div>";
11538
11663
 
11539
11664
  html += me.htmlCls.divStr + "dl_disttable' class='" + dialogClass + "'>";
11665
+ html += this.addNotebookTitle('dl_disttable', 'Distance Table', true);
11540
11666
  html += "</div>";
11541
11667
 
11542
11668
  html += "</div>";
@@ -14852,6 +14978,8 @@ class SetHtml {
14852
14978
  }
14853
14979
 
14854
14980
  html += me.htmlCls.divStr + "dl_" + name1 + "' class='" + dialogClass + "'>";
14981
+ html += me.htmlCls.setDialogCls.addNotebookTitle("dl_" + name1, 'DelPhi Potential');
14982
+
14855
14983
  html += me.htmlCls.divStr + "dl_" + name1 + "_tabs' style='border:0px;'>";
14856
14984
  html += "<ul>";
14857
14985
  html += "<li><a href='#" + me.pre + name1 + "tab1'>" + tab1 + "</a></li>";
@@ -15165,7 +15293,7 @@ class SetHtml {
15165
15293
  statefile = imageStr.substr(posState + matchedStrState.length, posStateEnd - posState- matchedStrState.length);
15166
15294
  //statefile = decodeURIComponent(statefile);
15167
15295
  statefile = decodeURIComponent(statefile + "\n" + commandStr);
15168
-
15296
+
15169
15297
  if(type === 'pdb') {
15170
15298
  await ic.pdbParserCls.loadPdbData(data);
15171
15299
 
@@ -22167,7 +22295,7 @@ class Scene {
22167
22295
  ic.cam.remove( ic.canvasUI.mesh );
22168
22296
  }
22169
22297
 
22170
- if (controllerInfo !== undefined){
22298
+ if (controller && controllerInfo !== undefined){
22171
22299
  // "trigger":{"button":0},
22172
22300
  // "squeeze":{"button":1},
22173
22301
  // "thumbstick":{"button":3,"xAxis":2,"yAxis":3}, "touchpad":{"button":2,"xAxis":0,"yAxis":1},
@@ -22249,8 +22377,11 @@ class Scene {
22249
22377
  ic.cam.remove( ic.canvasUI.mesh );
22250
22378
  } },
22251
22379
  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() {
22252
- ic.setOptionCls.setStyle("proteins", "sphere");
22253
- ic.setOptionCls.setStyle("nucleotides", "sphere");
22380
+ // ic.setOptionCls.setStyle("proteins", "sphere");
22381
+ // ic.setOptionCls.setStyle("nucleotides", "sphere");
22382
+ ic.opts['surface'] = 'molecular surface';
22383
+ ic.applyMapCls.applySurfaceOptions();
22384
+
22254
22385
  ic.cam.remove( ic.canvasUI.mesh );
22255
22386
  } },
22256
22387
 
@@ -22316,14 +22447,17 @@ class Scene {
22316
22447
  //ic.canvasUILog.updateElement( "info", "ERROR: " + err );
22317
22448
  }
22318
22449
  } },
22319
- // 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() {
22320
- // ic.debugStr = '###ic.hAtoms: ' + Object.keys(ic.hAtoms).length + ' ic.dAtoms: ' + Object.keys(ic.dAtoms).length;
22321
- // let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
22322
- // ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
22323
- // ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
22324
- // ic.cam.remove( ic.canvasUI.mesh );
22325
- // } },
22326
- 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() {
22450
+ 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() {
22451
+ let gsize = 65, salt = 0.15, contour = 2, bSurface = true;
22452
+ ic.phisurftype = 22; // molecular surface
22453
+ ic.phisurfop = 1.0; // opacity
22454
+ ic.phisurfwf = 'no'; // wireframe
22455
+ await ic.delphiCls.CalcPhi(gsize, salt, contour, bSurface);
22456
+
22457
+ //ic.canvasUILog.updateElement( "info", "debug: " + ic.debugStr );
22458
+ ic.cam.remove( ic.canvasUI.mesh );
22459
+ } },
22460
+ 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() {
22327
22461
  for(let name in ic.labels) {
22328
22462
  //if(name === 'residue' || name === 'custom') {
22329
22463
  ic.labels[name] = [];
@@ -22333,7 +22467,7 @@ class Scene {
22333
22467
  ic.drawCls.draw();
22334
22468
  ic.cam.remove( ic.canvasUI.mesh );
22335
22469
  } },
22336
- 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() {
22470
+ 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() {
22337
22471
  ic.selectionCls.resetAll();
22338
22472
 
22339
22473
  ic.cam.remove( ic.canvasUI.mesh );
@@ -22353,7 +22487,8 @@ class Scene {
22353
22487
  ribbon: "Ribbon",
22354
22488
  schematic: "Schem.",
22355
22489
  stick: "Stick",
22356
- sphere: "Sphere",
22490
+ //sphere: "Sphere",
22491
+ sphere: "Surface",
22357
22492
 
22358
22493
  color: "Color",
22359
22494
  rainbow: "Rainbow",
@@ -22373,7 +22508,7 @@ class Scene {
22373
22508
 
22374
22509
  analysis: "Analysis",
22375
22510
  interaction: "Interact",
22376
- //delphi: "DelPhi",
22511
+ delphi: "DelPhi",
22377
22512
  removeLabel: "No Label",
22378
22513
  reset: "Reset"
22379
22514
  };
@@ -22424,6 +22559,8 @@ class Scene {
22424
22559
 
22425
22560
  for(let i=0; i<=1; i++){
22426
22561
  const controller = ic.renderer.xr.getController( i );
22562
+ if(!controller) continue;
22563
+
22427
22564
  ic.dolly.add( controller );
22428
22565
 
22429
22566
  controller.add( line.clone() );
@@ -25733,6 +25870,8 @@ class TextSprite {
25733
25870
  sprite.scale.set(expandWidthFactor * factor, factor, 1.0);
25734
25871
  }
25735
25872
 
25873
+ sprite.renderOrder = 1; // larger than the default 0
25874
+
25736
25875
  return sprite;
25737
25876
  }
25738
25877
 
@@ -28522,11 +28661,12 @@ class Surface {
28522
28661
  cfg.isovalue = ic.mapData.contourPhi;
28523
28662
  cfg.type = 'phi';
28524
28663
  cfg.loadPhiFrom = ic.loadPhiFrom;
28525
-
28664
+
28526
28665
  ps = this.SetupMap(cfg);
28527
28666
  }
28528
28667
  else {
28529
28668
  //1: van der waals surface, 2: molecular surface, 3: solvent accessible surface
28669
+
28530
28670
 
28531
28671
  //exclude water
28532
28672
  let atomsToShow = me.hashUtilsCls.exclHash(atoms, ic.water);
@@ -28560,7 +28700,7 @@ class Surface {
28560
28700
 
28561
28701
  ps = this.SetupSurface(cfg);
28562
28702
  }
28563
-
28703
+
28564
28704
  if(ic.bCalcArea) {
28565
28705
  ic.areavalue = ps.area.toFixed(2);
28566
28706
  let serial2area = ps.serial2area;
@@ -28639,7 +28779,7 @@ class Surface {
28639
28779
  //geo = new THREE.Geometry();
28640
28780
  geo = new THREE.BufferGeometry();
28641
28781
  let verticeArray = [], colorArray = [], indexArray = [], color;
28642
-
28782
+
28643
28783
  //var geoVertices = verts.map(function (v) {
28644
28784
  let offset = 0;
28645
28785
  for(let i = 0, il = verts.length; i < il; ++i, offset += 3) {
@@ -28714,9 +28854,8 @@ class Surface {
28714
28854
  //geo.normalsNeedUpdate = true;
28715
28855
 
28716
28856
  geo.computeVertexNormals();
28717
-
28857
+
28718
28858
  geo.type = 'Surface'; // to be recognized in vrml.js for 3D printing
28719
-
28720
28859
  // use the regular way to show transparency for type == 15 (surface with potential)
28721
28860
  // if(ic.transparentRenderOrder && (type == 1 || type == 2 || type == 3)) { // WebGL has some ordering problem when dealing with transparency
28722
28861
  if(ic.transparentRenderOrder) { // WebGL has some ordering problem when dealing with transparency
@@ -28904,7 +29043,7 @@ class Surface {
28904
29043
  mesh.renderOrder = -2; // default: 0, picking: -1
28905
29044
 
28906
29045
  ic.mdl.add(mesh);
28907
-
29046
+
28908
29047
  if(type == 11 || type == 12) {
28909
29048
  ic.prevMaps.push(mesh);
28910
29049
  }
@@ -28987,7 +29126,7 @@ class Surface {
28987
29126
 
28988
29127
  SetupMap(data) { let ic = this.icn3d; ic.icn3dui;
28989
29128
  let ps = new ElectronMap(ic);
28990
-
29129
+
28991
29130
  ps.initparm(data.header, data.data, data.matrix, data.isovalue, data.center, data.maxdist,
28992
29131
  data.pmin, data.pmax, data.water, data.type, data.rmsd_supr, data.loadPhiFrom, data.icn3d);
28993
29132
 
@@ -28996,7 +29135,7 @@ class Surface {
28996
29135
  if(!data.header.bSurface) ps.buildboundary();
28997
29136
 
28998
29137
  if(!data.header.bSurface) ps.marchingcube();
28999
-
29138
+
29000
29139
  ps.vpBits = null; // uint8 array of bitmasks
29001
29140
  //ps.vpDistance = null; // floatarray of _squared_ distances
29002
29141
  ps.vpAtomID = null; // intarray
@@ -32023,7 +32162,7 @@ class Alternate {
32023
32162
  //if(window.dialog) window.dialog.dialog( "close" );
32024
32163
 
32025
32164
  let html = me.utilsCls.getMemDesc();
32026
- $("#" + ic.pre + "dl_rmsd").html(html);
32165
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
32027
32166
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Membranes');
32028
32167
  }
32029
32168
  }
@@ -32194,6 +32333,8 @@ class Alternate {
32194
32333
 
32195
32334
  for(let i = 0, il = ic.controllers.length; i < il; ++i) {
32196
32335
  let controller = ic.controllers[i];
32336
+ if(!controller) continue;
32337
+
32197
32338
  dt = (i % 2 == 0) ? dt : -dt; // dt * y;
32198
32339
  thisClass.handleController( controller, dt, controller.userData.selectPressed, controller.userData.squeezePressed, result.xArray, result.yArray );
32199
32340
  //thisClass.handleController( controller, dt, pressed );
@@ -32202,13 +32343,13 @@ class Alternate {
32202
32343
 
32203
32344
  if ( ic.renderer.xr.isPresenting){
32204
32345
  if(ic.canvasUI) ic.canvasUI.update();
32205
- //if(ic.canvasUILog) ic.canvasUILog.update();
32346
+ if(ic.canvasUILog) ic.canvasUILog.update();
32206
32347
  }
32207
32348
  }
32208
32349
  else if(ic.bAr) {
32209
32350
  if ( ic.renderer.xr.isPresenting ){
32210
32351
  ic.gestures.update();
32211
- //if(ic.canvasUILog) ic.canvasUILog.update();
32352
+ if(ic.canvasUILog) ic.canvasUILog.update();
32212
32353
  }
32213
32354
  }
32214
32355
 
@@ -34404,22 +34545,28 @@ class SetColor {
34404
34545
 
34405
34546
  case 'ig strand':
34406
34547
  if(ic.bShowRefnum) {
34407
- for(let resid in ic.resid2refnum) {
34408
- let refnumLabel = ic.resid2refnum[resid];
34409
- let color;
34410
- if(!refnumLabel) {
34411
- color = me.parasCls.thr(me.htmlCls.GREYB);
34548
+ let color;
34549
+ for(let resid in ic.residues) {
34550
+ if(!ic.resid2refnum[resid]) {
34551
+ color = me.parasCls.thr('#FFFFFF');
34412
34552
  }
34413
34553
  else {
34414
- let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
34415
- let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
34416
- color = ic.showSeqCls.getRefnumColor(currStrand);
34417
-
34418
- if(ic.residIgLoop.hasOwnProperty(resid)) {
34554
+ let refnumLabel = ic.resid2refnum[resid];
34555
+
34556
+ if(!refnumLabel) {
34419
34557
  color = me.parasCls.thr(me.htmlCls.GREYB);
34420
34558
  }
34559
+ else {
34560
+ let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
34561
+ let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
34562
+ color = ic.showSeqCls.getRefnumColor(currStrand);
34563
+
34564
+ if(ic.residIgLoop.hasOwnProperty(resid)) {
34565
+ color = me.parasCls.thr(me.htmlCls.GREYB);
34566
+ }
34567
+ }
34421
34568
  }
34422
-
34569
+
34423
34570
  for (let i in ic.residues[resid]) {
34424
34571
  let atom = ic.atoms[i];
34425
34572
  atom.color = me.parasCls.thr(color);
@@ -34433,20 +34580,26 @@ class SetColor {
34433
34580
 
34434
34581
  case 'ig protodomain':
34435
34582
  if(ic.bShowRefnum) {
34436
- for(let resid in ic.resid2refnum) {
34437
- let refnumLabel = ic.resid2refnum[resid];
34438
- let color;
34439
- if(!refnumLabel) {
34440
- color = me.parasCls.thr(me.htmlCls.GREYB);
34583
+ let color;
34584
+ for(let resid in ic.residues) {
34585
+ if(!ic.resid2refnum[resid]) {
34586
+ color = me.parasCls.thr('#FFFFFF');
34441
34587
  }
34442
34588
  else {
34443
- let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
34444
- let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
34445
- color = ic.showSeqCls.getProtodomainColor(currStrand);
34589
+ let refnumLabel = ic.resid2refnum[resid];
34446
34590
 
34447
- if(ic.residIgLoop.hasOwnProperty(resid)) {
34591
+ if(!refnumLabel) {
34448
34592
  color = me.parasCls.thr(me.htmlCls.GREYB);
34449
34593
  }
34594
+ else {
34595
+ let refnumStr = refnumLabel.replace(/'/g, '').replace(/\*/g, '').replace(/\^/g, '').substr(1); // C', C''
34596
+ let currStrand = refnumLabel.replace(new RegExp(refnumStr,'g'), '');
34597
+ color = ic.showSeqCls.getProtodomainColor(currStrand);
34598
+
34599
+ if(ic.residIgLoop.hasOwnProperty(resid)) {
34600
+ color = me.parasCls.thr(me.htmlCls.GREYB);
34601
+ }
34602
+ }
34450
34603
  }
34451
34604
 
34452
34605
  for (let i in ic.residues[resid]) {
@@ -35224,7 +35377,7 @@ class SetOption {
35224
35377
  bClose = true;
35225
35378
  }
35226
35379
 
35227
- $("#" + me.pre + "dl_legend").html(html);
35380
+ $("#" + me.pre + "dl_legend_html").html(html);
35228
35381
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Legend');
35229
35382
 
35230
35383
  if(bClose) {
@@ -35390,7 +35543,7 @@ class SetOption {
35390
35543
  "C' Strand": "6495ED",
35391
35544
  "C'' Strand": "006400",
35392
35545
  "D Strand": "00FF00",
35393
- "E Strand": "F7DC6F", //"F0E68C",
35546
+ "E Strand": "FFFF00", //"F0E68C",
35394
35547
  "F Strand": "FFA500",
35395
35548
  "G Strand": "FF0000",
35396
35549
  "G* Strand": "8B0000",
@@ -35417,12 +35570,12 @@ class SetOption {
35417
35570
  const name2color = {
35418
35571
  "A Strand": "0000FF",
35419
35572
  "B Strand": "006400",
35420
- "C Strand": "F7DC6F", //"F0E68C",
35573
+ "C Strand": "FFFF00", //"F0E68C",
35421
35574
  "C' Strand": "FFA500",
35422
35575
  "C'' Strand": "FF0000",
35423
35576
  "D Strand": "0000FF",
35424
35577
  "E Strand": "006400",
35425
- "F Strand": "F7DC6F", //"F0E68C",
35578
+ "F Strand": "FFFF00", //"F0E68C",
35426
35579
  "G Strand": "FFA500",
35427
35580
  "Loop": "CCCCCC"
35428
35581
  };
@@ -37642,6 +37795,7 @@ class Domain3d {
37642
37795
  this.icn3d = icn3d;
37643
37796
 
37644
37797
  //this.dcut = 8; // threshold for C-alpha interactions
37798
+
37645
37799
  // It seemed the threshold 7 angstrom works better
37646
37800
  this.dcut = 7; // threshold for C-alpha interactions
37647
37801
 
@@ -37677,6 +37831,9 @@ class Domain3d {
37677
37831
  this.c_delta = 3; // cut set parameter
37678
37832
  this.nc_fact = 0.0; // size factor for internal contacts
37679
37833
 
37834
+ // added by Jiyao
37835
+ this.min_contacts = 10; // minimum number of contacts to be considered as neighbors
37836
+
37680
37837
  //let this.elements[2*this.MAX_SSE]; // sets of this.elements to be split
37681
37838
  this.elements = [];
37682
37839
  this.elements.length = 2*this.MAX_SSE;
@@ -38225,6 +38382,7 @@ class Domain3d {
38225
38382
  //https://www.geeksforgeeks.org/number-groups-formed-graph-friends/
38226
38383
  countUtil(ss1, sheetNeighbor, existing_groups) {
38227
38384
  this.visited[ss1] = true;
38385
+
38228
38386
  if(!this.groupnum2sheet[existing_groups]) this.groupnum2sheet[existing_groups] = [];
38229
38387
  this.groupnum2sheet[existing_groups].push(parseInt(ss1));
38230
38388
 
@@ -38268,6 +38426,7 @@ class Domain3d {
38268
38426
  let chnid = residueArray[0].substr(0, residueArray[0].lastIndexOf('_'));
38269
38427
 
38270
38428
  let substructItem = {};
38429
+ let pos2resi = {};
38271
38430
  for(let i = 0; i < residueArray.length; ++i) {
38272
38431
  let resid = residueArray[i];
38273
38432
 
@@ -38305,22 +38464,26 @@ class Domain3d {
38305
38464
  x0.push(atom.coord.x);
38306
38465
  y0.push(atom.coord.y);
38307
38466
  z0.push(atom.coord.z);
38308
- resiArray.push(resi);
38467
+ //resiArray.push(resi);
38468
+ resiArray.push(i+1);
38469
+ pos2resi[i+1] = resi;
38309
38470
 
38310
38471
  if(atom.ssend) {
38311
- substructItem.To = parseInt(resi);
38472
+ //substructItem.To = parseInt(resi);
38473
+ substructItem.To = i + 1;
38312
38474
  substructItem.x2 = atom.coord.x;
38313
38475
  substructItem.y2 = atom.coord.y;
38314
38476
  substructItem.z2 = atom.coord.z;
38315
38477
 
38316
38478
  substructItem.Sheet = (atom.ss == 'sheet') ? true : false;
38317
38479
  substruct.push(substructItem);
38318
- substructItem = {};
38480
+ substructItem = {};
38319
38481
  }
38320
38482
 
38321
38483
  // a residue could be both start and end. check ssend first, then check ssbegin
38322
38484
  if(atom.ssbegin) {
38323
- substructItem.From = parseInt(resi);
38485
+ //substructItem.From = parseInt(resi);
38486
+ substructItem.From = i + 1;
38324
38487
  substructItem.x1 = atom.coord.x;
38325
38488
  substructItem.y1 = atom.coord.y;
38326
38489
  substructItem.z1 = atom.coord.z;
@@ -38340,7 +38503,8 @@ class Domain3d {
38340
38503
  }
38341
38504
 
38342
38505
  let seqLen = residueArray.length; // + resiOffset;
38343
- let lastResi = resiArray[seqLen - 1];
38506
+ //let lastResi = resiArray[seqLen - 1];
38507
+ let lastResi = seqLen;
38344
38508
 
38345
38509
  // get a list of Calpha-Calpha contacts
38346
38510
  ///list< pair< pair< int, let >, let > >
@@ -38419,7 +38583,8 @@ class Domain3d {
38419
38583
  let ss2 = parseInt(ssPair[1]);
38420
38584
 
38421
38585
  // both are sheets
38422
- if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet) {
38586
+ // min number of contacts: this.min_contacts
38587
+ if(substruct[ss1 - 1].Sheet && substruct[ss2 - 1].Sheet && ctable[pair] >= this.min_contacts ) {
38423
38588
  if(!sheetNeighbor[ss1]) sheetNeighbor[ss1] = {};
38424
38589
  if(!sheetNeighbor[ss2]) sheetNeighbor[ss2] = {};
38425
38590
 
@@ -38442,13 +38607,13 @@ class Domain3d {
38442
38607
  // If not in any group.
38443
38608
  if (this.visited[ss1] == false) {
38444
38609
  existing_groups++;
38445
-
38610
+
38446
38611
  this.countUtil(ss1, sheetNeighbor, existing_groups);
38447
38612
  }
38448
38613
  }
38449
38614
 
38450
38615
  // get sheet2sheetnum
38451
- // each neighboring sheet willbe represented by the sheet with the smallest sse
38616
+ // each neighboring sheet will be represented by the sheet with the smallest sse
38452
38617
  for(let groupnum in this.groupnum2sheet) {
38453
38618
  let ssArray = this.groupnum2sheet[groupnum].sort();
38454
38619
  for(let i = 0, il = ssArray.length; i < il; ++i) {
@@ -38551,7 +38716,7 @@ class Domain3d {
38551
38716
  this.parts[2*i] = this.parts[2*i + 1] = 0;
38552
38717
  ratios[i] = 0.0;
38553
38718
  }
38554
-
38719
+
38555
38720
  n_saved = this.new_split_chain(nsse, sratio, minSize, minSSE, maxCsz, avgCts, cDelta, ncFact, this.parts, n_saved, ratios);
38556
38721
 
38557
38722
  // save domain data
@@ -38592,14 +38757,14 @@ class Domain3d {
38592
38757
  //resflags.clear();
38593
38758
 
38594
38759
  //let resflags = [];
38595
- let resflags = {};
38760
+ let resflags = {}; // keys are 1-based positions
38596
38761
 
38597
38762
  // a domain must have at least 3 SSEs...
38598
38763
  if (prts.length <= 2) continue;
38599
38764
 
38600
38765
  for (let i = 0; i < seqLen; i++) {
38601
38766
  //resflags.push(0);
38602
- resflags[resiArray[i]] = 0;
38767
+ resflags[i + 1] = 0;
38603
38768
  }
38604
38769
 
38605
38770
  for (let i = 0; i < prts.length; i++) {
@@ -38615,17 +38780,14 @@ class Domain3d {
38615
38780
  let To = sserec.To;
38616
38781
 
38617
38782
  for (let j = From; j <= To; j++) {
38618
- //resflags[j - 1] = 1;
38619
38783
  resflags[j] = 1;
38620
38784
  }
38621
38785
 
38622
38786
  if ((k == 0) && (From > 1)) {
38623
38787
  // residues with negative residue numbers will not be included
38624
38788
  for (let j = 1; j < From; j++) {
38625
- //resflags[j - 1] = 1;
38626
38789
  // include at most 10 residues
38627
38790
  if(From - j <= 10) {
38628
- //resflags[j - 1] = 1;
38629
38791
  resflags[j] = 1;
38630
38792
  }
38631
38793
  }
@@ -38635,10 +38797,8 @@ class Domain3d {
38635
38797
  if ((k == substruct.length - 1) && (To < parseInt(lastResi))) {
38636
38798
  //for (let j = To + 1; j <= seqLen; j++) {
38637
38799
  for (let j = To + 1; j <= parseInt(lastResi); j++) {
38638
- //resflags[j - 1] = 1;
38639
38800
  // include at most 10 residues
38640
38801
  if(j - To <= 10) {
38641
- //resflags[j - 1] = 1;
38642
38802
  resflags[j] = 1;
38643
38803
  }
38644
38804
  }
@@ -38654,7 +38814,6 @@ class Domain3d {
38654
38814
 
38655
38815
  if (ll > 0) {
38656
38816
  for (let j = From - ll; j <= From - 1; j++) {
38657
- //resflags[j - 1] = 1;
38658
38817
  resflags[j] = 1;
38659
38818
  }
38660
38819
  }
@@ -38673,7 +38832,6 @@ class Domain3d {
38673
38832
 
38674
38833
  if (ll > 0) {
38675
38834
  for (let j = To + 1; j <= To + ll; j++) {
38676
- //resflags[j - 1] = 1;
38677
38835
  resflags[j] = 1;
38678
38836
  }
38679
38837
  }
@@ -38685,16 +38843,15 @@ class Domain3d {
38685
38843
  let startseg;
38686
38844
  //vector<int> segments;
38687
38845
  //segments.clear();
38688
- let segments = [];
38846
+ let segments = []; //use position instead of residue number
38689
38847
 
38690
38848
  for (let i = 0; i < seqLen; i++) {
38691
38849
  //let rf = resflags[i];
38692
- let rf = resflags[resiArray[i]];
38850
+ let rf = resflags[i + 1];
38693
38851
 
38694
38852
  if (!inseg && (rf == 1)) {
38695
38853
  // new segment starts here
38696
- //startseg = i + 1;
38697
- startseg = resiArray[i];
38854
+ startseg = i + 1;
38698
38855
  inseg = true;
38699
38856
  continue;
38700
38857
  }
@@ -38702,8 +38859,7 @@ class Domain3d {
38702
38859
  if (inseg && (rf == 0)) {
38703
38860
  // segment ends
38704
38861
  segments.push(startseg);
38705
- //segments.push(i);
38706
- segments.push(resiArray[i]);
38862
+ segments.push(i);
38707
38863
  inseg = false;
38708
38864
  }
38709
38865
  }
@@ -38711,7 +38867,6 @@ class Domain3d {
38711
38867
  // check for the last segment
38712
38868
  if (inseg) {
38713
38869
  segments.push(startseg);
38714
- //segments.push(seqLen);
38715
38870
  segments.push(lastResi);
38716
38871
  }
38717
38872
 
@@ -38732,8 +38887,8 @@ class Domain3d {
38732
38887
  }
38733
38888
  }
38734
38889
  }
38735
-
38736
- return {subdomains: subdomains, substruct: substruct};
38890
+
38891
+ return {subdomains: subdomains, substruct: substruct, pos2resi:pos2resi };
38737
38892
  } // end c2b_NewSplitChain
38738
38893
 
38739
38894
  getDomainJsonForAlign(atoms) { let ic = this.icn3d, me = ic.icn3dui;
@@ -38741,6 +38896,7 @@ class Domain3d {
38741
38896
 
38742
38897
  let subdomains = result.subdomains;
38743
38898
  let substruct = result.substruct;
38899
+ let pos2resi = result.pos2resi;
38744
38900
 
38745
38901
  let residueHash = ic.firstAtomObjCls.getResiduesFromAtoms(atoms);
38746
38902
  let residueArray = Object.keys(residueHash);
@@ -38768,8 +38924,8 @@ class Domain3d {
38768
38924
  //ss: sstype ss_start ss_end x1 y1 z1 x2 y2 z2
38769
38925
  //sstype: 1 (helix), 2 (sheet)
38770
38926
  let sstype = (substruct[k].Sheet) ? 2 : 1;
38771
- let from = substruct[k].From;
38772
- let to = substruct[k].To;
38927
+ let from = pos2resi[substruct[k].From];
38928
+ let to = pos2resi[substruct[k].To];
38773
38929
 
38774
38930
  let residFrom = chnid + "_" + from;
38775
38931
  let atomFrom = ic.firstAtomObjCls.getFirstCalphaAtomObj(ic.residues[residFrom]);
@@ -39786,7 +39942,7 @@ class AddTrack {
39786
39942
  let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
39787
39943
 
39788
39944
  //$("#" + me.pre + "legend").html(legendHtml);
39789
- $("#" + me.pre + "dl_legend").html(legendHtml);
39945
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
39790
39946
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color range');
39791
39947
  }
39792
39948
  else if(type == 'tube') {
@@ -41842,7 +41998,7 @@ class ShowSeq {
41842
41998
  }
41843
41999
  else {
41844
42000
  let refnum = parseInt(refnumStr).toString();
41845
- let color = this.getRefnumColor(currStrand);
42001
+ let color = this.getRefnumColor(currStrand, true);
41846
42002
  let colorStr = 'style="color:' + color + '"';
41847
42003
 
41848
42004
  let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42013,7 +42169,7 @@ class ShowSeq {
42013
42169
 
42014
42170
  getRefnumHtml(residueid, refnumStr, refnumStr_ori, refnumLabel, currStrand, bLoop, bHidelabel) { let ic = this.icn3d, me = ic.icn3dui;
42015
42171
  let refnum = parseInt(refnumStr).toString();
42016
- let color = this.getRefnumColor(currStrand);
42172
+ let color = this.getRefnumColor(currStrand, true);
42017
42173
  let colorStr = (!bLoop) ? 'style="color:' + color + '; text-decoration: underline overline;"' : 'style="color:' + color + '"';
42018
42174
 
42019
42175
  let lastTwo = parseInt(refnum.substr(refnum.length - 2, 2));
@@ -42039,45 +42195,45 @@ class ShowSeq {
42039
42195
  return html;
42040
42196
  }
42041
42197
 
42042
- getRefnumColor(currStrand) { let ic = this.icn3d, me = ic.icn3dui;
42043
- if(currStrand == "A^") { //magenta // deep sky blue
42044
- return '#FF00FF'; //'#9900ff'; //'#00BFFF';
42198
+ getRefnumColor(currStrand, bText) { let ic = this.icn3d, me = ic.icn3dui;
42199
+ if(currStrand == "A^") {
42200
+ return '#FF00FF';
42045
42201
  }
42046
- else if(currStrand == "A") { //rebecca purple // blue
42047
- return '#663399'; //'#9900ff'; //'#0000FF';
42202
+ else if(currStrand == "A") {
42203
+ return '#663399';
42048
42204
  }
42049
- else if(currStrand == "A*") { //pink // sky blue
42050
- return '#FFC0CB'; //'#9900ff'; //'#87CEEB';
42205
+ else if(currStrand == "A*") {
42206
+ return '#FFC0CB';
42051
42207
  }
42052
- else if(currStrand == "A'") { //medium purple // steel blue
42053
- return '#663399'; //'#9370db'; //'#9900ff'; //'#4682B4';
42208
+ else if(currStrand == "A'") {
42209
+ return '#663399';
42054
42210
  }
42055
- else if(currStrand == "B") { //medium orchid // cyan
42056
- return '#ba55d3'; //'#0000FF'; //'#4a86e8'; //'#00FFFF';
42211
+ else if(currStrand == "B") {
42212
+ return '#ba55d3';
42057
42213
  }
42058
- else if(currStrand == "C") { //blue // green
42059
- return '#0000FF'; //'#76d6ff'; //'#00FF00';
42214
+ else if(currStrand == "C") {
42215
+ return '#0000FF';
42060
42216
  }
42061
- else if(currStrand == "C'") { //corn blue // yellow
42062
- return '#6495ED'; //'#006400'; //'#00b050'; //'#FFFF00';
42217
+ else if(currStrand == "C'") {
42218
+ return '#6495ED';
42063
42219
  }
42064
- else if(currStrand == "C''") { //dark green // orange
42065
- return '#006400'; //'#00ff00'; //'#FFA500';
42220
+ else if(currStrand == "C''") {
42221
+ return '#006400';
42066
42222
  }
42067
- else if(currStrand == "D") { //green // brown
42068
- return '#00FF00'; //'#fffb00'; //'#A52A2A';
42223
+ else if(currStrand == "D") {
42224
+ return '#00FF00';
42069
42225
  }
42070
- else if(currStrand == "E") { //yellow // pink
42071
- return "#F7DC6F"; //'#F0E68C'; //'#ff9900'; //'#ffd966'; //'#FFC0CB';
42226
+ else if(currStrand == "E") {
42227
+ return (bText) ? "#F7DC6F" : "#FFFF00";
42072
42228
  }
42073
- else if(currStrand == "F") { //orange // magenta
42074
- return '#FFA500'; //'#FF00FF'; //'#ff9900'; //'#FF00FF';
42229
+ else if(currStrand == "F") {
42230
+ return '#FFA500';
42075
42231
  }
42076
- else if(currStrand == "G") { //red // red
42077
- return '#FF0000'; //'#ff2600'; //'#FF0000';
42232
+ else if(currStrand == "G") {
42233
+ return '#FF0000';
42078
42234
  }
42079
- else if(currStrand == "G*") { //dark red // salmon
42080
- return '#8B0000'; //'#ff2600'; //'#FA8072';
42235
+ else if(currStrand == "G*") {
42236
+ return '#8B0000';
42081
42237
  }
42082
42238
  else {
42083
42239
  return me.htmlCls.GREYB;
@@ -42092,7 +42248,7 @@ class ShowSeq {
42092
42248
  return '#006400';
42093
42249
  }
42094
42250
  else if(currStrand == "C" || currStrand == "F") {
42095
- return "#F7DC6F"; //'#F0E68C';
42251
+ return "#FFFF00"; //'#F0E68C';
42096
42252
  }
42097
42253
  else if(currStrand == "C'" || (currStrand && currStrand.substr(0, 1) == "G")) {
42098
42254
  return '#FFA500';
@@ -42676,7 +42832,7 @@ class HlUpdate {
42676
42832
  html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData, ic.inputid, undefined, true);
42677
42833
  html2ddgm += ic.diagram2dCls.set2DdgmNote();
42678
42834
 
42679
- $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
42835
+ $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
42680
42836
  }
42681
42837
  else if(ic.mmdbidArray &&(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign)) {
42682
42838
  html2ddgm += ic.diagram2dCls.draw2Ddgm(ic.interactionData1, ic.mmdbidArray[0].toUpperCase(), 0, true);
@@ -42688,7 +42844,7 @@ class HlUpdate {
42688
42844
  }
42689
42845
  html2ddgm += ic.diagram2dCls.set2DdgmNote(true);
42690
42846
 
42691
- $("#" + ic.pre + "dl_2ddgm").html(html2ddgm);
42847
+ $("#" + ic.pre + "dl_2ddgm_html").html(html2ddgm);
42692
42848
  }
42693
42849
  }
42694
42850
 
@@ -43225,8 +43381,8 @@ class LineGraph {
43225
43381
  linkedNodeCnt[mappingid] = 1;
43226
43382
  linkedNodeInterDiff[mappingid] = link.n;
43227
43383
  }
43228
- else {
43229
- ++linkedNodeCnt[mappingid];
43384
+ else {
43385
+ ++linkedNodeCnt[mappingid];
43230
43386
  linkedNodeInterDiff[mappingid] -= link.n; // show difference
43231
43387
  }
43232
43388
  }
@@ -43576,9 +43732,9 @@ class LineGraph {
43576
43732
  if(pos1 === undefined || pos2 === undefined) continue;
43577
43733
  let linestrokewidth;
43578
43734
  if(link.v == me.htmlCls.contactValue) {
43579
- linestrokewidth = 1;
43735
+ linestrokewidth = (link.n == 1) ? 1 : 3;
43580
43736
  } else {
43581
- linestrokewidth = 2;
43737
+ linestrokewidth = (link.n == 1) ? 2 : 4;
43582
43738
  }
43583
43739
  let strokecolor;
43584
43740
  if(link.v == me.htmlCls.hbondValue) {
@@ -43595,8 +43751,9 @@ class LineGraph {
43595
43751
  strokecolor = "#" + me.htmlCls.contactColor;
43596
43752
  }
43597
43753
  html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
43598
- html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
43599
- html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "' /></g>";
43754
+ let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
43755
+ if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
43756
+ html += "<line x1='" + pos1.x + "' y1='" + pos1.y + "' x2='" + pos2.x + "' y2='" + pos2.y + "' stroke='" + strokecolor + "' stroke-width='" + linestrokewidth + "'/></g>";
43600
43757
  }
43601
43758
  // show nodes later
43602
43759
  html += nodeHtml;
@@ -43689,9 +43846,9 @@ class LineGraph {
43689
43846
 
43690
43847
  let linestrokewidth;
43691
43848
  if(link.v == me.htmlCls.contactValue) {
43692
- linestrokewidth = 1;
43849
+ linestrokewidth = (link.n == 1) ? 1 : 3;
43693
43850
  } else {
43694
- linestrokewidth = 2;
43851
+ linestrokewidth = (link.n == 1) ? 2 : 4;
43695
43852
  }
43696
43853
 
43697
43854
  if(bAfMap && ic.hex2skip[link.c]) ;
@@ -43706,7 +43863,8 @@ class LineGraph {
43706
43863
  }
43707
43864
  else {
43708
43865
  html += "<g class='icn3d-interaction' resid1='" + resid1 + "' resid2='" + resid2 + "' >";
43709
- html += "<title>Interaction of residue " + node1.id + " with residue " + node2.id + "</title>";
43866
+ let interactStr = (link.n == 1) ? 'Interaction' : link.n + ' interactions';
43867
+ if(link.n > 1) html += "<title>" + interactStr + " of residue " + node1.id + " with residue " + node2.id + "</title>";
43710
43868
  if(bContactMap) {
43711
43869
  html += "<rect x='" +(pos2.x - halfSize).toString() + "' y='" +(pos1.y - halfSize).toString() + "' width='" + rectSize + "' height='" + rectSize + "' fill='" + strokecolor + "' stroke-width='" + linestrokewidth + "' stroke='" + strokecolor + "' />";
43712
43870
  }
@@ -44222,11 +44380,9 @@ class GetGraph {
44222
44380
 
44223
44381
  if(!linkstr2cnt.hasOwnProperty(linkStr)) {
44224
44382
  linkstr2cnt[linkStr] = 1;
44225
- linkstr2cnt[linkStr] = 1;
44226
44383
  }
44227
44384
  else {
44228
- linkstr2cnt[linkStr] += 1;
44229
- linkstr2cnt[linkStr] += 1;
44385
+ ++linkstr2cnt[linkStr];
44230
44386
  }
44231
44387
  }
44232
44388
  }
@@ -44950,11 +45106,11 @@ class ViewInterPairs {
44950
45106
  html += result.html;
44951
45107
  bondCnt = result.bondCnt;
44952
45108
 
44953
- $("#" + ic.pre + "dl_interactionsorted").html(html);
45109
+ $("#" + ic.pre + "dl_interactionsorted_html").html(html);
44954
45110
  me.htmlCls.dialogCls.openDlg('dl_interactionsorted', 'Show sorted interactions');
44955
45111
  }
44956
45112
  else if(type == 'view') {
44957
- $("#" + ic.pre + "dl_allinteraction").html(html);
45113
+ $("#" + ic.pre + "dl_allinteraction_html").html(html);
44958
45114
  me.htmlCls.dialogCls.openDlg('dl_allinteraction', 'Show interactions');
44959
45115
  }
44960
45116
  else if(type == 'linegraph') {
@@ -47282,7 +47438,7 @@ class ChainalignParser {
47282
47438
  me.htmlCls.clickMenuCls.setLogCmd(logStr, false);
47283
47439
  let html = "<br><b>Alignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br>";
47284
47440
  if(me.cfg.aligntool == 'tmalign') html += "<b>TM-score</b>: " + align[0].score.toPrecision(4) + "<br><br>";
47285
- $("#" + ic.pre + "dl_rmsd").html(html);
47441
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
47286
47442
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment');
47287
47443
 
47288
47444
  bAligned = true;
@@ -51548,7 +51704,7 @@ class ParserUtils {
51548
51704
  //if(window.dialog) window.dialog.dialog( "close" );
51549
51705
  html += me.utilsCls.getMemDesc();
51550
51706
  }
51551
- $("#" + ic.pre + "dl_rmsd").html(html);
51707
+ $("#" + ic.pre + "dl_rmsd_html").html(html);
51552
51708
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
51553
51709
  }
51554
51710
 
@@ -51729,7 +51885,7 @@ class ParserUtils {
51729
51885
  ic.diagram2dCls.draw2Ddgm(ic.interactionData2, mmdbid2, 1);
51730
51886
 
51731
51887
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
51732
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
51888
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
51733
51889
 
51734
51890
  ic.b2DShown = true;
51735
51891
 
@@ -51782,7 +51938,7 @@ class ParserUtils {
51782
51938
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote(true);
51783
51939
 
51784
51940
  ic.b2DShown = true;
51785
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
51941
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
51786
51942
  if(me.cfg.show2d) me.htmlCls.dialogCls.openDlg('dl_2ddgm', 'Interactions');
51787
51943
 
51788
51944
  /// if(ic.deferredViewinteraction !== undefined) ic.deferredViewinteraction.resolve();
@@ -51800,7 +51956,7 @@ class ParserUtils {
51800
51956
  ic.diagram2dCls.draw2Ddgm(ic.interactionData, mmdbid);
51801
51957
 
51802
51958
  ic.html2ddgm += "<br>" + ic.diagram2dCls.set2DdgmNote();
51803
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
51959
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
51804
51960
  }
51805
51961
 
51806
51962
  ic.b2DShown = true;
@@ -51903,7 +52059,7 @@ class ParserUtils {
51903
52059
  let rmsd = ic.rmsd_supr.rmsd;
51904
52060
 
51905
52061
  me.htmlCls.clickMenuCls.setLogCmd("RMSD of alignment to OPM: " + rmsd.toPrecision(4), false);
51906
- //$("#" + ic.pre + "dl_rmsd").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
52062
+ //$("#" + ic.pre + "dl_rmsd_html").html("<br><b>RMSD of alignment to OPM</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
51907
52063
  //if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'RMSD of alignment to OPM');
51908
52064
 
51909
52065
  let dxymaxsq = 0;
@@ -52109,6 +52265,16 @@ class ParserUtils {
52109
52265
 
52110
52266
  // set defined sets before loadScript
52111
52267
  if(ic.bInitial) {
52268
+ if(me.cfg.mobilemenu) {
52269
+ me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.simpleMenus);
52270
+ let bNoSave = true;
52271
+ me.htmlCls.clickMenuCls.applyShownMenus(bNoSave);
52272
+ }
52273
+ // else {
52274
+ // me.htmlCls.shownMenus = me.hashUtilsCls.cloneHash(me.htmlCls.allMenus);
52275
+ // me.htmlCls.clickMenuCls.applyShownMenus();
52276
+ // }
52277
+
52112
52278
  if(me.cfg.showsets) {
52113
52279
  ic.definedSetsCls.showSets();
52114
52280
  }
@@ -55549,7 +55715,7 @@ class Vastplus {
55549
55715
  bAligned = true;
55550
55716
 
55551
55717
  me.htmlCls.clickMenuCls.setLogCmd("realignment RMSD: " + rmsd.toPrecision(4), false);
55552
- $("#" + ic.pre + "dl_rmsd").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
55718
+ $("#" + ic.pre + "dl_rmsd_html").html("<br><b>Realignment RMSD</b>: " + rmsd.toPrecision(4) + " &#8491;<br><br>");
55553
55719
  if(!me.cfg.bSidebyside) me.htmlCls.dialogCls.openDlg('dl_rmsd', 'Realignment RMSD');
55554
55720
 
55555
55721
  // apply matrix for each atom
@@ -57495,7 +57661,7 @@ class ApplyCommand {
57495
57661
 
57496
57662
  let legendHtml = me.htmlCls.clickMenuCls.setLegendHtml();
57497
57663
  //$("#" + me.pre + "legend").html(legendHtml).show();
57498
- $("#" + me.pre + "dl_legend").html(legendHtml);
57664
+ $("#" + me.pre + "dl_legend_html").html(legendHtml);
57499
57665
  me.htmlCls.dialogCls.openDlg('dl_legend', 'Color Range');
57500
57666
  }
57501
57667
  }
@@ -61011,7 +61177,7 @@ class Delphi {
61011
61177
  let phidata = await this.CalcPhiPrms(gsize, salt, contour, bSurface, data);
61012
61178
 
61013
61179
  this.loadPhiData(phidata, contour, bSurface);
61014
-
61180
+
61015
61181
  ic.bAjaxPhi = true;
61016
61182
 
61017
61183
  if(bSurface) {
@@ -61775,8 +61941,8 @@ class Dssp {
61775
61941
 
61776
61942
  // align each 3D domain with reference structure
61777
61943
  let result = ic.domain3dCls.c2b_NewSplitChain(ic.chains[chainid]);
61778
- let subdomains = result.subdomains;
61779
-
61944
+ let subdomains = result.subdomains;
61945
+
61780
61946
  let domainAtomsArray = [];
61781
61947
  if(subdomains.length <= 1) {
61782
61948
  domainAtomsArray.push(ic.chains[chainid]);
@@ -61806,9 +61972,9 @@ class Dssp {
61806
61972
  }
61807
61973
 
61808
61974
  for(let k = 0, kl = domainAtomsArray.length; k < kl; ++k) {
61809
-
61810
61975
  let pdb_target = ic.saveFileCls.getAtomPDB(domainAtomsArray[k], undefined, undefined, undefined, undefined, struct);
61811
61976
  let domainid = chainid + '-' + k;
61977
+
61812
61978
  for(let index = 0, indexl = dataArray.length; index < indexl; ++index) {
61813
61979
  let struct2 = ic.defaultPdbId + index;
61814
61980
  let pdb_query = dataArray[index].value; //[0];
@@ -62029,7 +62195,7 @@ if(!me.bNode) {
62029
62195
  else if(refnum >= 1200 && refnum < 1300) return "A'" + oriRefnum;
62030
62196
  else if(refnum >= 1300 && refnum < 1400) return "A*" + oriRefnum;
62031
62197
  else if(refnum >= 1400 && refnum < 2000) {
62032
- if(prevStrand.substr(0, 1) == 'A') {
62198
+ if(prevStrand && prevStrand.substr(0, 1) == 'A') {
62033
62199
  return prevStrand + oriRefnum;
62034
62200
  }
62035
62201
  else {
@@ -63398,7 +63564,7 @@ class Analysis {
63398
63564
  //html += '<b>Buried Surface for both Sets</b>: ' + buriedArea + ' &#8491;<sup>2</sup><br>';
63399
63565
  html += '<b>Buried Surface for Set 1</b>: ' + buriedArea2 + ' &#8491;<sup>2</sup><br>';
63400
63566
  html += '<b>Buried Surface for Set 2</b>: ' + buriedArea1 + ' &#8491;<sup>2</sup><br><br>';
63401
- $("#" + ic.pre + "dl_buriedarea").html(html);
63567
+ $("#" + ic.pre + "dl_buriedarea_html").html(html);
63402
63568
  me.htmlCls.dialogCls.openDlg('dl_buriedarea', 'Buried solvent accessible surface area in the interface');
63403
63569
  me.htmlCls.clickMenuCls.setLogCmd('buried surface ' + buriedArea, false);
63404
63570
  }
@@ -63504,7 +63670,7 @@ class Analysis {
63504
63670
 
63505
63671
  tableHtml += '</table><br><br>';
63506
63672
 
63507
- $("#" + me.pre + "dl_disttable").html(tableHtml);
63673
+ $("#" + me.pre + "dl_disttable_html").html(tableHtml);
63508
63674
  }
63509
63675
  }
63510
63676
 
@@ -64061,7 +64227,7 @@ class Diagram2d {
64061
64227
 
64062
64228
  ic.html2ddgm += html;
64063
64229
 
64064
- $("#" + ic.pre + "dl_2ddgm").html(ic.html2ddgm);
64230
+ $("#" + ic.pre + "dl_2ddgm_html").html(ic.html2ddgm);
64065
64231
 
64066
64232
  return html;
64067
64233
  }
@@ -69946,7 +70112,7 @@ class iCn3DUI {
69946
70112
  //even when multiple iCn3D viewers are shown together.
69947
70113
  this.pre = this.cfg.divid + "_";
69948
70114
 
69949
- this.REVISION = '3.23.2';
70115
+ this.REVISION = '3.24.0';
69950
70116
 
69951
70117
  // In nodejs, iCn3D defines "window = {navigator: {}}"
69952
70118
  this.bNode = (Object.keys(window).length < 2) ? true : false;