-
Notifications
You must be signed in to change notification settings - Fork 43
/
setDialog.js
1659 lines (1300 loc) · 124 KB
/
setDialog.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
/**
* @author Jiyao Wang <wangjiy@ncbi.nlm.nih.gov> / https://github.com/ncbi/icn3d
*/
class SetDialog {
constructor(icn3dui) {
this.icn3dui = icn3dui;
}
//A placeholder for all custom dialogs.
setCustomDialogs() { let me = this.icn3dui, ic = me.icn3d;
if(me.bNode) return '';
let html = "";
return html;
}
getHtmlAlignResidueByResidue(chainids, predefinedid, buttonid) { let me = this.icn3dui, ic = me.icn3d;
let html = '';
html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + chainids + "' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
html += "Each alignment is defined as \" | \"-separated residue lists in one line. \"10-50\" means a range of residues from 10 to 50.<br><textarea id='" + me.pre + predefinedid + "' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'>1,5,10-50 | 1,5,10-50\n2,6,11-51 | 1,5,10-50</textarea><br/>";
html += me.htmlCls.buttonStr + buttonid + "'><b>Align Residue by Residue</b></button><br/>";
return html;
}
addNotebookTitle(id, title, bAddExtraDiv) { let me = this.icn3dui, ic = me.icn3d;
//return '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#1c94c4; width:100%"><span style="color:white; font-weight:bold">' + title + '</span> <span onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose" title="Close">x</span></div>';
let html = '<div id="' + me.pre + id + '_nb" style="display:none; background-color:#5C9CCC; width:100%"><span id="' + me.pre + id + '_title" style="color:white; font-weight:bold">' + title + '</span> <div onclick="$(\'#' + me.pre + id + '\').hide(); return false;" class="icn3d-nbclose ui-icon ui-icon-close" title="Close"></div></div>';
if(bAddExtraDiv) {
html += '<div id="' + me.pre + id + '_html"></div>';
}
return html;
}
//Set the html for all popup dialogs.
setDialogs() { let me = this.icn3dui, ic = me.icn3d;
if(me.bNode) return '';
let html = "";
let defaultColor = "#ffff00"; //ic.colorBlackbkgd;
me.htmlCls.optionStr = "<option value=";
html += "<!-- dialog will not be part of the form -->";
let divClass =(me.cfg.notebook) ? '' : 'icn3d-hidden';
let dialogClass =(me.cfg.notebook) ? 'icn3d-hidden' : '';
//html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:" + me.htmlCls.CMD_HEIGHT + "px'>";
html += me.htmlCls.divStr + "alldialogs' class='" + divClass + " icn3d-dialog' style='margin-top:12px'>";
html += me.htmlCls.divStr + "dl_2ddgm' class='" + dialogClass + " icn3d-dl_2ddgm' style='background-color:white'>";
html += this.addNotebookTitle('dl_2ddgm', '2D Diagram', true);
html += "</div>";
html += me.htmlCls.divStr + "dl_2dctn' class='" + dialogClass + " icn3d-dl_2dctn' style='background-color:white'>";
html += this.addNotebookTitle('dl_2dctn', '2D Cartoon');
me.svgid_ct = me.pre + "icn3d_cartoon";
let buttonStrTmp = '<button class="icn3d-commandTitle" style="-webkit-appearance:button; height:24px;background-color:#DDD;" id="';
let tmpStr = 'icn3d-node-text';
html += me.htmlCls.divNowrapStr + "Dynamically generated for selected residues. <br>Nodes can be dragged or clicked.</div>";
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.svgid_ct + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.svgid_ct + '_png">PNG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.svgid_ct + '_json">JSON</button><br>';
html += "<b>Label</b>: <select id='" + me.svgid_ct + "_label'>";
html += me.htmlCls.optionStr + "'" + tmpStr + "0'>No</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "4'>4px</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "8' selected>8px</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "12'>12px</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "16'>16px</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "24'>24px</option>";
html += me.htmlCls.optionStr + "'" + tmpStr + "32'>32px</option>";
html += "</select>";
html += "</div>";
html += "<svg id='" + me.svgid_ct + "' viewBox='" + "0,0," + me.htmlCls.width2d + "," + me.htmlCls.width2d + "'>";
html += "</svg>";
html += "</div>";
// if(me.cfg.align !== undefined || me.cfg.chainalign !== undefined || ic.bRealign || ic.bSymd) {
html += me.htmlCls.divStr + "dl_alignment' class='" + dialogClass + "' style='background-color:white;'>";
html += this.addNotebookTitle('dl_alignment', 'Dynamically Calculated Symmetry using SymD');
html += me.htmlCls.divStr + "symd_info'></div>";
html += me.htmlCls.divStr + "alignseqguide_wrapper'><br>" + me.htmlCls.setHtmlCls.setAlignSequenceGuide() + "</div>";
html += me.htmlCls.divStr + "dl_sequence2' class='icn3d-dl_sequence'>";
html += this.addNotebookTitle('dl_sequence2', 'Select Residues in Aligned Sequences');
html += "</div>";
html += "</div>";
// }
html += me.htmlCls.divStr + "dl_definedsets' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_definedsets', 'Defined Sets');
html += me.htmlCls.divStr + "dl_setsmenu'>";
html += "<b>Defined Sets:</b> <br/>";
html += "<select id='" + me.pre + "atomsCustom' multiple size='6' style='min-width:130px;'>";
html += "</select>";
html += "<div style='margin: 6px 0 6px 0;'>" + me.htmlCls.buttonStr + "deletesets'><b>Delete Selected Sets</b></button></div>";
html += ' <b>Set Operations</b>: <div style="width:20px; margin-top:6px; display:inline-block;"><span id="' + me.pre + 'dl_command_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="' + me.pre + 'dl_command_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div><br>';
html += "</div>";
html += me.htmlCls.divStr + "dl_command' style='display:none;'>";
html += me.htmlCls.divStr + "dl_setoperations'>";
html += "<label for='" + me.pre + "setOr'>" + me.htmlCls.inputRadioStr + "name='" + me.pre + "setOperation' id='" + me.pre + "setOr' checked> Union(or) </label><br/>";
html += "<label for='" + me.pre + "setAnd'>" + me.htmlCls.inputRadioStr + "name='" + me.pre + "setOperation' id='" + me.pre + "setAnd'> Intersection(and) </label><br/>";
html += "<label for='" + me.pre + "setNot'>" + me.htmlCls.inputRadioStr + "name='" + me.pre + "setOperation' id='" + me.pre + "setNot'> Exclusion(not) </label>";
html += "</div><br>";
html += me.htmlCls.setHtmlCls.setAdvanced();
html += "</div>";
html += "</div>";
html += me.htmlCls.setHtmlCls.setAdvanced(2);
html += me.htmlCls.divStr + "dl_vastplus' class='" + dialogClass + "' style='max-width:500px'>";
html += this.addNotebookTitle('dl_vastplus', 'Please input PDB ID for VAST+');
html += "Note: <b>VAST+</b> finds other macromolecular structures that have a similar biological unit. To do this, VAST+ takes into consideration the complete set of 3D domains that VAST identified within a query structure, throughout all of its component protein molecules, and finds other macromolecular structures that have a similar set of proteins/3D domains.<br><br>";
html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastpluspdbid' value='6VXX' size=8><br>";
html += me.htmlCls.buttonStr + "reload_vastplus'>VAST+</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_vast' class='" + dialogClass + "' style='max-width:500px'>";
html += this.addNotebookTitle('dl_vast', 'Pleaes input chain or PDB file for VAST');
html += 'Note: <b>VAST</b> identifies 3D domains (substructures) within each protein structure in the Molecular Modeling Database (MMDB), and then finds other protein structures that have one or more similar 3D domains, using purely geometric criteria. You have two ways to do a VAST search.<br><br>';
html += '<b>Option 1</b>, search with your selection (all residues are selected by default) in the loaded structures:<br>';
html += '<form data-ncbi-sg-search="true" method=post enctype=multipart/form-data action="https://www.ncbi.nlm.nih.gov/Structure/vast/VSMmdb.cgi" id="' + me.pre + 'newvs2" name="newvs2" target="_blank">';
html += '<input type=hidden id="' + me.pre + 'pdbstr" name="pdbstr">';
html += "Searching against: <input type='radio' name='dataset' value='Non-redundant subset' checked> Medium-redundancy Subset of PDB <a href='https://www.ncbi.nlm.nih.gov/Structure/VAST/vasthelp.html#VASTNR' title='Medium-redundancy Subset' target='_blank'>?</a> <input type='radio' name='dataset' value='All'>All of PDB <br>";
// the submit value has to be "Submit" in order to make the backend cgi works
//html += '<input type="submit" name="' + me.pre + 'cmdVSMmdb" value="VAST Search"></input>';
html += '<input type="submit" id="' + me.pre + 'cmdVSMmdb2" name="cmdVSMmdb" value="Submit"></input>';
html += "</form><br>";
html += '<b>Option 2</b>, search with PDB ID and chain name:<br>';
html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastpdbid' value='4N7N' size=8> ";
html += "Chain Name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "vastchainid' value='A' size=8> <br>";
html += me.htmlCls.buttonStr + "reload_vast'>VAST</button><br><br>";
html += '<b>Option 3</b>, search with a PDB file:<br>';
html += '<form data-ncbi-sg-search="true" method=post enctype=multipart/form-data action="https://www.ncbi.nlm.nih.gov/Structure/vast/VSMmdb.cgi" id="' + me.pre + 'newvs" name="newvs" target="_blank">';
html += "PDB File: " + me.htmlCls.inputFileStr + " name='pdbfile' size=8><br>";
html += "Searching against: <input type='radio' name='dataset' value='Non-redundant subset' checked> Medium-redundancy Subset of PDB <a href='https://www.ncbi.nlm.nih.gov/Structure/VAST/vasthelp.html#VASTNR' title='Medium-redundancy Subset' target='_blank'>?</a> <input type='radio' name='dataset' value='All'>All of PDB <br>";
// the submit value has to be "Submit" in order to make the backend cgi works
//html += '<input type="submit" name="' + me.pre + 'cmdVSMmdb" value="VAST Search"></input>';
html += '<input type="submit" id="' + me.pre + 'cmdVSMmdb" name="cmdVSMmdb" value="Submit"></input>';
html += "</form><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_foldseek' class='" + dialogClass + "' style='max-width:500px'>";
html += this.addNotebookTitle('dl_foldseek', 'Submit your selection to Foldseek');
html += '1. <input type="submit" id="' + me.pre + 'fssubmit" name="fssubmit" value="Submit"></input> your selection (all residues are selected by default) in the loaded structures to <a href="https://search.foldseek.com/search" target="_blank">Foldseek</a> web server.<br><br>';
html += '2 (Optional). Once you see the structure neighbors, you can view the alignment in iCn3D by inputing a list of PDB chain IDs or AlphaFold UniProt IDs below. <br><br>The PDB chain IDs are the same as the record names such as "1HHO_A". The UniProt ID is the text between "AF-" and "-F1". For example, the UniProt ID for the record name "AF-P69905-F1-model_v4" is "P69905".<br><br>';
html += "Chain ID List: " + me.htmlCls.inputTextStr + "id='" + me.pre + "foldseekchainids' value='P69905,P01942,1HHO_A' size=30> ";
html += me.htmlCls.buttonStr + "reload_foldseek'>Align</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_mmtfid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_mmtfid', 'Please input an BCIF/MMTF ID');
html += "BCIF/MMTF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmtfid' value='1TUP' size=8> ";
html += me.htmlCls.buttonStr + "reload_mmtf'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_pdbid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_pdbid', 'Please input a PDB ID');
html += "PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "pdbid' value='1TUP' size=8> ";
html += me.htmlCls.buttonStr + "reload_pdb'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_afid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_afid', 'Please input an AlphaFold UniProt ID');
html += "Note: AlphaFold produces a per-residue confidence score (pLDDT) between 0 and 100:<br>";
html += me.htmlCls.clickMenuCls.setAlphaFoldLegend() + "<br>";
let afid = (me.cfg.afid) ? me.cfg.afid : 'A4D1S0';
html += "<a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "afid' value='" + afid + "' size=10><br><br>";
html += me.htmlCls.buttonStr + "reload_af'>Load Structure</button><br><br>"
html += "PAE Map: " + me.htmlCls.buttonStr + "reload_afmap'>Load Half</button>"
+ me.htmlCls.buttonStr + "reload_afmapfull' style='margin-left:30px'>Load Full (slow)</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_refseqid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_refseqid', 'Please input an NCBI protein accession');
html += "NCBI Protein Accession: " + me.htmlCls.inputTextStr + "id='" + me.pre + "refseqid' value='NP_001743.1' size=8> ";
html += me.htmlCls.buttonStr + "reload_refseq'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_opmid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_opmid', 'Please input an OPM PDB ID');
html += "<a href='https://opm.phar.umich.edu' target='_blank'>Orientations of Proteins in Membranes(OPM)</a> PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "opmid' value='6JXR' size=8> ";
html += me.htmlCls.buttonStr + "reload_opm'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_pdbfile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_pdbfile', 'Please input a PDB file');
html += "Note: Several PDB files could be concatenated into a single PDB file. Use the line \"ENDMDL\" to separate PDB files.<br><br>";
html += "PDB File: " + me.htmlCls.inputFileStr + " id='" + me.pre + "pdbfile' size=8> ";
html += me.htmlCls.buttonStr + "reload_pdbfile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_pdbfile_app' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_pdbfile_app', 'Please append PDB files');
html += "Multiple PDB Files: <input type='file' multiple id='" + me.pre + "pdbfile_app' size=8> ";
html += me.htmlCls.buttonStr + "reload_pdbfile_app'>Append</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_rescolorfile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_rescolorfile', 'Please input a residue color file');
html += '<div style="width:450px;">The custom JSON file on residue colors has the following format for proteins("ALA" and "ARG") and nucleotides("G" and "A"):<br>';
html += '{"ALA":"#C8C8C8", "ARG":"#145AFF", ..., "G":"#008000", "A":"#6080FF", ...}</div><br>';
html += "Residue Color File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "rescolorfile' size=8> ";
html += me.htmlCls.buttonStr + "reload_rescolorfile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_customcolor' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_customcolor', 'Please input a custom color file');
html += " <input type='hidden' id='" + me.pre + "customcolor_chainid' value=''>";
html += '<div style="width:450px;">The custom file for the structure has two columns separated by space or tab: ';
html += 'residue number, and score in the range of 0-100. If you click "Apply Custom Color" button, ';
html += 'the scores 0, 50 and 100 correspond to the three colors specified below. If you click "Apply Custom Tube", ';
html += 'the selected residues will be displayed in a style similar to "B-factor Tube".</div><br>';
html += "Custom File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "cstcolorfile' size=8> <br><br>";
html += "1. " + me.htmlCls.buttonStr + "reload_customcolorfile'>Apply Custom Color</button>" + me.htmlCls.buttonStr + "remove_legend' style='margin-left:30px;'>Remove Legend</button><br>";
html += "<span style='margin-left:15px'>Score to Color: 0:</span> <select id='" + me.pre + "startColor'>";
html += me.htmlCls.optionStr + "'red'>Red</option>";
html += me.htmlCls.optionStr + "'green'>Green</option>";
html += me.htmlCls.optionStr + "'blue' selected>Blue</option>";
html += "</select>";
html += "<span style='margin-left:30px'>50</span>: <select id='" + me.pre + "midColor'>";
html += me.htmlCls.optionStr + "'white' selected>White</option>";
html += me.htmlCls.optionStr + "'black'>Black</option>";
html += "</select>";
html += "<span style='margin-left:30px'>100</span>: <select id='" + me.pre + "endColor'>";
html += me.htmlCls.optionStr + "'red' selected>Red</option>";
html += me.htmlCls.optionStr + "'green'>Green</option>";
html += me.htmlCls.optionStr + "'blue'>Blue</option>";
html += "</select><br>";
html += "or<br><br>";
html += "2. " + me.htmlCls.buttonStr + "reload_customtubefile'>Apply Custom Tube</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_customref' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_customref', 'Please input a reference number file');
html += '<div style="width:550px;">You can define your own reference numbers in a custom file using Excel, and then export it as a CSV file. An example file is shown below with cells separated by commas.<br>';
html += '<pre>refnum,11,12,,21,22,,10C,11C,20C<br>';
html += '1TUP_A,100,101,,,132,,,,<br>';
html += '1TUP_B,110,111,,141,142,,,,<br>';
html += '1TUP_C,,,,,,,200,201,230</pre>';
html += 'The first row defines the reference residue numbers, which could be any strings. The 1st cell could be anything. The rest cells are reference residue numbers (e.g., 11, 21, 10C, etc.) or empty cells. Each chain has a separate row. The first cell of the second row is the chain ID "1TUP_A". The rest cells are the corresponding real residue numbers for reference residue numbers in the first row. For example, the reference numbers for residues 100, 101, and 132 in the chain 1TUP_A are 11, 12, and 22, respectively. The fourth row shows another set of reference numners for the chain "1TUP_C". It could be a chain from a different structure.<br><br>';
html += 'To select all residues corresponding to the reference numbers, you can simplay replace ":" with "%" in the <a href="https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#selectb" target="_blank">Specification</a>. For example, "%12" selects the residue 101 in 1TUP_A and the residue 111 in 1TUP_B. ".A%12" has the chain "A" filter and selects the residue 101 in 1TUP_A.<br>';
html += '</div><br>';
html += "Custom File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "cstreffile' size=8> <br><br>";
html += me.htmlCls.buttonStr + "reload_customreffile'>Apply Custom Reference Numbers</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_align' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_align', 'Please select residues in aligned sequences');
html += "Enter the PDB IDs or MMDB IDs of the structures: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid1' value='2DN3' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignid2' value='4N7N' size=8><br/><br/>";
html += "<b>VAST+ based on VAST</b>: " + me.htmlCls.buttonStr + "reload_align_ori'>All Matching Molecules Superposed</button>" + me.htmlCls.space3 + me.htmlCls.buttonStr + "reload_align_refined'>Invariant Substructure Superposed</button><br><br>";
html += "<b>VAST+ based on TM-align</b>: " + me.htmlCls.buttonStr + "reload_align_tmalign'>All Matching Molecules Superposed</button><br><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_alignaf' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_alignaf', 'Align AlphaFold structures');
html += "Enter two <a href='https://alphafold.ebi.ac.uk/' target='_blank'>AlphaFold Uniprot</a> IDs: <br/><br/>ID1: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid1' value='P41327' size=8>" + me.htmlCls.space3 + me.htmlCls.space3 + "ID2: " + me.htmlCls.inputTextStr + "id='" + me.pre + "alignafid2' value='P41331' size=8><br/><br/>";
html += me.htmlCls.buttonStr + "reload_alignaf_tmalign'>Align with TM-align</button>" + me.htmlCls.buttonStr + "reload_alignaf' style='margin-left:30px'>Align with VAST</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_chainalign' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_chainalign', 'Align chains');
html += "<div style='width:550px'>";
html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
html += me.htmlCls.buttonStr + "reload_chainalign_tmalign'><b>Align with TM-align</b></button>" + me.htmlCls.buttonStr + "reload_chainalign_asym' style='margin-left:30px'><b>Align with VAST</b></button><br/><br/>";
html += "(Note: To align chains in custom PDB files, you could load them in \"File > Open File > PDB Files (appendable)\" and click \"Analysis > Defined Sets\". Finally select multiple chains in Defined Sets and click \"File > Realign Selection\".)<br><br>";
html += "</div></div>";
html += me.htmlCls.divStr + "dl_chainalign2' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_chainalign2', 'Align chains');
html += "<div style='width:550px'>";
html += "All chains will be aligned to the first chain in the comma-separated chain IDs. Each chain ID has the form of PDBID_chain (e.g., 1HHO_A, case sensitive) or UniprotID (e.g., P69905 for AlphaFold structures).<br/><br/>";
html += "<b>Chain IDs</b>: " + me.htmlCls.inputTextStr + "id='" + me.pre + "chainalignids2' value='P69905,P01942,1HHO_A' size=50><br/><br/>";
html += "The sequence alignment (followed by structure alignment) is based on residue numbers in the First/Master chain: <br>" + me.htmlCls.inputTextStr + "id='" + me.pre + "resalignids' value='1,5,10-50' size=50><br/>";
html += me.htmlCls.buttonStr + "reload_chainalign_asym2' style='margin-top:3px;'><b>Align by Sequence Alignment</b></button><br/><br/>";
html += "(Note: To align chains in custom PDB files, you could load them in \"File > Open File > PDB Files (appendable)\" and click \"Analysis > Defined Sets\". Finally select multiple chains in Defined Sets and click \"File > Realign Selection\".)<br><br>";
html += "</div></div>";
html += me.htmlCls.divStr + "dl_chainalign3' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_chainalign3', 'Align chains');
html += "<div style='width:550px'>";
html += this.getHtmlAlignResidueByResidue('chainalignids3', 'predefinedres', 'reload_chainalign_asym3');
html += "</div></div>";
html += me.htmlCls.divStr + "dl_realignresbyres' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_realignresbyres', 'Realign residue by residue');
html += "<div style='width:550px'>";
html += "<b>Option 1</b>: " + me.htmlCls.buttonStr + "realignSelection'><b>Realign Current Selection Residue by Residue</b></button><br/><br/>";
html += "<b>Option 2</b>: <br>";
html += "<div class='icn3d-box'>" + this.getHtmlAlignResidueByResidue('chainalignids4', 'predefinedres2', 'reload_chainalign_asym4') + "</div>";
html += "</div></div>";
html += me.htmlCls.divStr + "dl_mutation' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_mutation', 'Mutation analysis');
html += "<div style='width:500px'>";
html += 'Please specify the mutations with a comma separated mutation list. Each mutation can be specified as "[<b>uppercase</b> PDB ID or AlphaFold UniProt ID]_[Chain Name]_[Residue Number]_[One Letter Mutant Residue]". E.g., the mutation of N501Y in the E chain of PDB 6M0J can be specified as "6M0J_E_501_Y". For AlphaFold structures, the "Chain ID" is "A".<br/>If you load a custom structure without PDB or UniProt ID, you can open "Seq. & Annotations" window and find the chain ID such as "stru_A". The part before the underscore is the structure ID, which can be used to specify the mutation such as "stru_A_...". Remember to choose "Show Mutation in: Current Page".<br/><br/>';
html += "<div style='display:inline-block; width:110px'>Mutations: </div>" + me.htmlCls.inputTextStr + "id='" + me.pre + "mutationids' value='6M0J_E_484_K,6M0J_E_501_Y,6M0J_E_417_N' size=50><br/><br/>";
html += '<b>ID Type</b>: ';
html += '<input type="radio" name="' + me.pre + 'idsource" id="' + me.pre + 'type_mmdbid" value="mmdbid" checked>PDB ID';
html += '<input type="radio" name="' + me.pre + 'idsource" id="' + me.pre + 'type_afid" value="afid" style="margin-left:20px">AlphaFold UniProt ID<br><br>';
html += '<b>Show Mutation in</b>: ';
html += '<input type="radio" name="' + me.pre + 'pdbsource" id="' + me.pre + 'showin_currentpage" value="currentpage">Current Page';
html += '<input type="radio" name="' + me.pre + 'pdbsource" id="' + me.pre + 'showin_newpage" value="newpage" style="margin-left:20px" checked>New Page<br><br>';
html += me.htmlCls.buttonStr + "reload_mutation_3d' title='Show the mutations in 3D using the scap program'>3D with scap</button>";
html += me.htmlCls.buttonStr + "reload_mutation_inter' style='margin-left:20px' title='Show the mutations in 3D and the change of interactions'>Interactions</button>";
html += me.htmlCls.buttonStr + "reload_mutation_pdb' style='margin-left:20px' title='Show the mutations in 3D and export the PDB of the mutant within 10 angstrom'>PDB</button>";
html += "<br/><br/></div></div>";
html += me.htmlCls.divStr + "dl_mol2file' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_mol2file', 'Please input a Mol2 file');
html += "Mol2 File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "mol2file' size=8> ";
html += me.htmlCls.buttonStr + "reload_mol2file'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_sdffile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_sdffile', 'Please input an SDF file');
html += "SDF File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "sdffile' size=8> ";
html += me.htmlCls.buttonStr + "reload_sdffile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_xyzfile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_xyzfile', 'Please input an XYZ file');
html += "XYZ File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "xyzfile' size=8> ";
html += me.htmlCls.buttonStr + "reload_xyzfile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_afmapfile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_afmapfile', 'Please input an AlphaFold PAE file');
html += "AlphaFold PAE File: " + me.htmlCls.inputFileStr + "id='" + me.pre + "afmapfile' size=8> <br><br>";
html += me.htmlCls.buttonStr + "reload_afmapfile'>Load Half PAE Map</button>"
+ me.htmlCls.buttonStr + "reload_afmapfilefull' style='margin-left:30px'>Load Full PAE Map (slow)</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_urlfile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_urlfile', 'Please input a file via URL');
html += "File type: ";
html += "<select id='" + me.pre + "filetype'>";
html += me.htmlCls.optionStr + "'pdb' selected>PDB</option>";
html += me.htmlCls.optionStr + "'mmcif'>mmCIF</option>";
html += me.htmlCls.optionStr + "'mol2'>Mol2</option>";
html += me.htmlCls.optionStr + "'sdf'>SDF</option>";
html += me.htmlCls.optionStr + "'xyz'>XYZ</option>";
html += me.htmlCls.optionStr + "'icn3dpng'>iCn3D PNG</option>";
html += me.htmlCls.optionStr + "'pae'>AlphaFold PAE</option>";
html += "</select><br/>";
html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "urlfile' size=20><br/> ";
html += me.htmlCls.buttonStr + "reload_urlfile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_mmciffile' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_mmciffile', 'Please append mmCIF files');
html += "Multiple mmCIF Files: <input type='file' multiple id='" + me.pre + "mmciffile' size=8> ";
html += me.htmlCls.buttonStr + "reload_mmciffile'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_mmcifid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_mmcifid', 'Please input an mmCIF ID');
html += "mmCIF ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmcifid' value='1TUP' size=8> ";
html += me.htmlCls.buttonStr + "reload_mmcif'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_mmdbid' class='" + dialogClass + "' style='max-width:500px'>";
html += this.addNotebookTitle('dl_mmdbid', 'Please input an MMDB ID');
html += "MMDB or PDB ID: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbid' value='1TUP' size=8> <br><br>";
html += me.htmlCls.buttonStr + "reload_mmdb'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdb_asym' style='margin-left:30px'>Load Asymmetric Unit (All Chains)</button><br/><br/><br/>";
html += '<b>Note</b>: The "<b>biological unit</b>" is the <b>biochemically active form of a biomolecule</b>, <div style="width:20px; margin:6px 0 0 20px; display:inline-block;"><span id="'
+ me.pre + 'asu_bu_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
+ me.pre + 'asu_bu_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div>';
html += me.htmlCls.divStr + "asu_bu' style='display:none;'>";
html += 'which can range from a monomer (single protein molecule) to an oligomer of 100+ protein molecules.<br><br>The "<b>asymmetric unit</b>" is the raw 3D structure data resolved by X-ray crystallography, NMR, or Cryo-electron microscopy. The asymmetric unit is equivalent to the biological unit in approximately 60% of structure records. In the remaining 40% of the records, the asymmetric unit represents a portion of the biological unit that can be reconstructed using crystallographic symmetry, or it represents multiple copies of the biological unit.</div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_mmdbafid' class='" + dialogClass + "' style='max-width:600px'>";
html += this.addNotebookTitle('dl_mmdbafid', 'Please input a list of PDB/AlphaFold IDs');
html += "List of PDB, MMDB, or AlphaFold UniProt structures: " + me.htmlCls.inputTextStr + "id='" + me.pre + "mmdbafid' placeholder='e.g., 1HHO,4N7N,P69905,P01942' size=30> <br><br>";
html += "<div style='display:inline-block; width:20px'></div>" + me.htmlCls.buttonStr + "reload_mmdbaf' style='width:150px'>Load Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym' style='margin-left:30px; width:250px'>Load Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
html += "<div style='display:inline-block; width:20px'>or</div>" + me.htmlCls.buttonStr + "reload_mmdbaf_append' style='width:150px'>Append Biological Unit</button>" + me.htmlCls.buttonStr + "reload_mmdbaf_asym_append' style='margin-left:30px; width:250px'>Append Asymmetric Unit (All Chains)</button>" + "<br/><br/>";
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="'
+ me.pre + 'asu_bu2_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
+ me.pre + 'asu_bu2_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div>';
html += me.htmlCls.divStr + "asu_bu2' style='display:none;'>";
html += 'which can range from a monomer (single protein molecule) to an oligomer of 100+ protein molecules.<br><br>The "<b>asymmetric unit</b>" is the raw 3D structure data resolved by X-ray crystallography, NMR, or Cryo-electron microscopy. The asymmetric unit is equivalent to the biological unit in approximately 60% of structure records. In the remaining 40% of the records, the asymmetric unit represents a portion of the biological unit that can be reconstructed using crystallographic symmetry, or it represents multiple copies of the biological unit.</div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_blast_rep_id' style='max-width:600px;' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_blast_rep_id', 'Align sequence to structure');
html += "Enter a protein 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 protein sequence ID or FASTA sequence as input. If the protein accession is not a PDB chain, the corresponding AlphaFold UniProt structure is used.<br><br> ";
html += "<b>Protein Sequence ID</b>(NCBI protein accession of a sequence): " + me.htmlCls.inputTextStr + "id='" + me.pre + "query_id' value='NP_001108451.1' size=8><br> ";
html += "or FASTA sequence: <br><textarea id='" + me.pre + "query_fasta' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
html += "<b>Aligned Protein Accession</b> (or a chain of a PDB): " + me.htmlCls.inputTextStr + "id='" + me.pre + "blast_rep_id' value='1TSR_A' size=8><br> ";
//html += me.htmlCls.buttonStr + "reload_blast_rep_id'>Load</button>";
html += me.htmlCls.buttonStr + "reload_blast_rep_id'>Align with BLAST</button> " + me.htmlCls.wifiStr
+ me.htmlCls.buttonStr + "reload_alignsw' style='margin-left:30px'>Align with Global Smith-Waterman</button>"
+ me.htmlCls.buttonStr + "reload_alignswlocal' style='margin-left:30px'>Align with Local Smith-Waterman</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_esmfold' style='max-width:600px;' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_esmfold', 'Sequence to structure prediction with ESMFold');
html += "The sequence to structure prediction is done via <a href='https://esmatlas.com/resources?action=fold' target='_blank'>ESM Metagenomic Atlas</a>. The sequence should be less than 400 characters. For any sequence longer than 400, please see the discussion <a href='https://github.com/facebookresearch/esm/issues/21' target='_blank'>here</a>.<br><br> ";
html += "FASTA sequence: <br><textarea id='" + me.pre + "esmfold_fasta' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;'></textarea><br><br>";
html += me.htmlCls.buttonStr + "run_esmfold'>ESMFold</button> ";
html += "</div>";
html += me.htmlCls.divStr + "dl_yournote' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_yournote', 'Your Note');
html += "Your note will be saved in the HTML file when you click \"File > Save File > iCn3D PNG Image\".<br><br>";
html += "<textarea id='" + me.pre + "yournote' rows='5' style='width: 100%; height: " +(me.htmlCls.LOG_HEIGHT) + "px; padding: 0px; border: 0px;' placeholder='Enter your note here'></textarea><br>";
html += me.htmlCls.buttonStr + "applyyournote'>Save</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_proteinname' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_proteinname', 'Please input a protein/gene name');
html += "Protein/Gene name: " + me.htmlCls.inputTextStr + "id='" + me.pre + "proteinname' value='TP53' size=8> ";
html += me.htmlCls.buttonStr + "reload_proteinname'>Search</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_cid' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_cid', 'Please input a PubChem Compound');
html += "PubChem CID/Name/InchI: " + me.htmlCls.inputTextStr + "id='" + me.pre + "cid' value='2244' size=8> ";
html += me.htmlCls.buttonStr + "reload_cid'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_smiles' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_cid', 'Please input a chemical SMILES');
html += "Chemical SMILES: " + me.htmlCls.inputTextStr + "id='" + me.pre + "smiles' value='CC(=O)OC1=CC=CC=C1C(=O)O' size=30> ";
html += me.htmlCls.buttonStr + "reload_smiles'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_pngimage' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_pngimage', 'Please append iCn3D PNG Image files');
html += "Multiple iCn3D PNG images: " + me.htmlCls.inputFileStr + " multiple id='" + me.pre + "pngimage' size=8><br/>";
html += me.htmlCls.buttonStr + "reload_pngimage' style='margin-top: 6px;'>Append</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_state' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_state', 'Please input a state file');
html += "State file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "state'><br/>";
html += me.htmlCls.buttonStr + "reload_state' style='margin-top: 6px;'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_fixedversion' style='max-width:500px' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_fixedversion', 'Use fixed version of iCn3D');
html += "Since January 6, 2021, you can show the original view with the archived version of iCn3D by pasting your URL below and click \"Show Originial View\". Note the version in the parameter \"v\" was used to replace \"full.html\" with \"full_[v].html\" in the URL.<br><br>";
html += "Share Link URL: " + me.htmlCls.inputTextStr + "id='" + me.pre + "sharelinkurl' size=60><br>";
html += me.htmlCls.buttonStr + "reload_fixedversion'>Show Original View</button><br><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_selection' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_selection', 'Please input the selection file');
html += "Selection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "selectionfile'><br/>";
html += me.htmlCls.buttonStr + "reload_selectionfile' style='margin-top: 6px;'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_selectCollections' class='" + dialogClass + "'>";
html += me.htmlCls.divStr + "dl_collectionsMenu'>";
html += '<b>Collection File</b>: <div style="width:20px; margin-top:6px; display:inline-block;"><span id="' + me.pre + 'dl_collection_file_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="' + me.pre + 'dl_collection_file_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div><br>';
html += me.htmlCls.divStr + "dl_collection_file' style=''>";
html += "You can load a collection of structures via a file. Here are <a href='https://github.com/ncbi/icn3d/blob/master/example/collection/' target='_blank'>some example files</a><br><br>";
html += "Collection file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "collectionfile'><br/>";
html += "<input type='radio' id='dl_collectionAppendStructureNone' name='appendStructure' value='none' checked/>";
html += "<label for='dl_collectionAppendStructureNone'>Default</label>";
html += "<input type='radio' id='dl_collectionAppendStructure' name='appendStructure' value='append' />";
html += "<label for='dl_collectionAppendStructure'>Append</label><br/>";
html += me.htmlCls.buttonStr + "reload_collectionfile' style='margin-top: 6px;'>Load</button>";
html += "</div>";
html += "</div>";
html += '<br/><b>Structures</b>: <div style="width:20px; margin-top:6px; display:inline-block;"><span id="' + me.pre + 'dl_collection_structures_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="' + me.pre + 'dl_collection_structures_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div><br>';
html += me.htmlCls.divStr + "dl_collection_structures' style='display: none'>";
html += "<select id='" + me.pre + "collections_menu'multiple size='6' style='min-width:300px;'></select>";
html += '<br/>';
html += me.htmlCls.buttonStr + "collections_clear_commands' style='margin-top: 6px;'>Clear Commands</button>";
html += me.htmlCls.buttonStr + "opendl_export_collections'>Export JSON</button>";
html += "</div>";
html += '<br/>';
html += "</div>";
html += me.htmlCls.divStr + "dl_export_collections' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_export_collections', 'Export Collections');
html += "<label for='dl_collectionTitle'>Collection Title: </label>";
html += "<input type='text' id='dl_collectionTitle' name='collectionTitle' placeholder='Enter collection title' />";
html += '<br/>';
html += "<label for='dl_collectionDescription'>Collection Description: </label>";
html += "<input type='text' id='dl_collectionDescription' name='collectionDescription' placeholder='Enter collection description' />";
html += '<br/>';
html += "<input type='radio' id='dl_collectionExportSelected' name='exportOption' value='selected' />";
html += "<label for='dl_collectionExportSelected'>Selected</label>";
html += "<input type='radio' id='dl_collectionExportAll' name='exportOption' value='all' />";
html += "<label for='dl_collectionExportAll'>All</label>";
html += '<br/>';
html += me.htmlCls.buttonStr + "export_collections'>Export</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_menuloadpref' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_menuloadpref', 'Load a preference file');
html += "Preference file: " + me.htmlCls.inputFileStr + "id='" + me.pre + "menupreffile'><br/>";
html += me.htmlCls.buttonStr + "reload_menupreffile' style='margin-top: 6px;'>Load</button>";
html += "</div>";
html += me.htmlCls.divStr + "dl_dsn6' class='" + dialogClass + "' style='max-width:600px'>";
html += this.addNotebookTitle('dl_dsn6', 'Load a map file');
html += "<b>Note</b>: Always load a PDB file before loading map files. If you don't specify the threshold below, a default one will be chosen.<br/><br/><br/>";
html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at default threshold or at: "
+ me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigma2fofc' value='' size=8> σ</span><br/>";
//html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6file2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4file2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfile2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfile2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6file2fofc'><br>" + me.htmlCls.buttonStr + "reload_ccp4file2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfile2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfile2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
html += "<span style='white-space:nowrap;font-weight:bold;'>fofc contour at default threshold or at: "
+ me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmafofc' value='' size=8> σ</span><br/>";
//html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'><br>" + me.htmlCls.buttonStr + "reload_dsn6filefofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4filefofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfilefofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfilefofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
html += me.htmlCls.inputFileStr + "id='" + me.pre + "dsn6filefofc'><br>" + me.htmlCls.buttonStr + "reload_ccp4filefofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfilefofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfilefofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
html += me.htmlCls.buttonStr + "elecmapNo4'>Remove Map</button><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_dsn6url' class='" + dialogClass + "' style='max-width:600px'>";
html += this.addNotebookTitle('dl_dsn6url', 'Load a selection file via a URL');
html += "<b>Note</b>: Always load a PDB file before loading map files. If you don't specify the threshold below, a default one will be chosen.<br/><br/><br/>";
html += "<span style='white-space:nowrap;font-weight:bold;'>2fofc contour at default threshold or at: "
+ me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmaurl2fofc' value='' size=8> σ</span><br/>";
//html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurl2fofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurl2fofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurl2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurl2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurl2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurl2fofc' size=20><br>" + me.htmlCls.buttonStr + "reload_ccp4fileurl2fofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurl2fofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurl2fofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br/>";
html += "<span style='white-space:nowrap;font-weight:bold;'>fofc contour at default threshold or at: "
+ me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6sigmaurlfofc' value='' size=8> σ</span><br/>";
//html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurlfofc' size=20><br>" + me.htmlCls.buttonStr + "reload_dsn6fileurlfofc' style='margin: 6px 20px 0 0;'>Load DSN6</button>" + me.htmlCls.buttonStr + "reload_ccp4fileurlfofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurlfofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurlfofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
html += "URL in the same host: " + me.htmlCls.inputTextStr + "id='" + me.pre + "dsn6fileurlfofc' size=20><br>" + me.htmlCls.buttonStr + "reload_ccp4fileurlfofc' style='margin: 6px 20px 0 0;'>Load CCP4</button>" + me.htmlCls.buttonStr + "reload_mtzfileurlfofc' style='margin: 6px 20px 0 0;'>Load MTZ</button>" + me.htmlCls.buttonStr + "reload_rcsbmtzfileurlfofc' style='margin-top: 6px;'>Load RCSB MTZ</button><br><br><br>";
html += me.htmlCls.buttonStr + "elecmapNo5'>Remove Map</button><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_clr' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_clr', 'Pick a color');
html += "Click in the input box to use the color picker:<br><br> ";
html += "Custom Color: " + me.htmlCls.inputTextStr + "id='" + me.pre + "colorcustom' value='FF0000' size=8> ";
html += me.htmlCls.buttonStr + "applycustomcolor'>Apply</button>";
html += "</div>";
html += me.htmlCls.setHtmlCls.getPotentialHtml('delphi', dialogClass);
html += me.htmlCls.setHtmlCls.getPotentialHtml('local', dialogClass);
html += me.htmlCls.setHtmlCls.getPotentialHtml('url', dialogClass);
html += me.htmlCls.divStr + "dl_symmetry' class='" + dialogClass + "'><br>";
html += this.addNotebookTitle('dl_symmetry', 'Symmetry');
html += me.htmlCls.divNowrapStr + "Symmetry: <select id='" + me.pre + "selectSymmetry'>";
html += "</select>" + me.htmlCls.space3;
html += me.htmlCls.buttonStr + "applysymmetry'>Apply</button>" + me.htmlCls.space3;
html += me.htmlCls.buttonStr + "clearsymmetry'>Clear</button></div>";
html += "</div>";
html += me.htmlCls.divStr + "dl_symd' style='max-width:400px' class='" + dialogClass + "'><br>";
html += this.addNotebookTitle('dl_symd', 'Dynamically symmetry calculation using SymD');
html += "</div>";
html += me.htmlCls.divStr + "dl_contact' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_contact', 'Contact Map');
html += "<span style='white-space:nowrap;font-weight:bold;'>Distance: <select id='" + me.pre + "contactdist'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(['4', '5', '6', '7', '8', '9', '10'], 4);
html += "</select></span>";
html += "<span style='margin-left:30px; white-space:nowrap;font-weight:bold;'>Contact Type: <select id='" + me.pre + "contacttype'>";
html += me.htmlCls.optionStr + "'calpha' >between C-alpha Atoms</option>";
html += me.htmlCls.optionStr + "'cbeta' selected>between C-beta Atoms</option>";
html += me.htmlCls.optionStr + "'heavyatoms' >between Heavy Atoms</option>";
html += "</select></span><br><br>";
html += "<span style='white-space:nowrap;'>" + me.htmlCls.buttonStr + "applycontactmap'>Display</button></span><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_hbonds' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_hbonds', 'Interaction Analysis');
html += "1. Choose interaction types and their thresholds:<br>";
html += "<div class='icn3d-box'><table border=0 width=450><tr>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_hbond' checked>Hydrogen Bonds <span style='background-color:#" + me.htmlCls.hbondColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "hbondthreshold'>";
let optArray2 = ['3.2', '3.3', '3.4', '3.5', '3.6', '3.7', '3.8', '3.9', '4.0', '4.1', '4.2'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray2, 6);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_saltbridge' checked>Salt Bridge/Ionic <span style='background-color:#" + me.htmlCls.ionicColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "saltbridgethreshold'>";
let optArray3 = ['3', '4', '5', '6', '7', '8'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray3, 3);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_contact' checked>Contacts/Interactions <span style='background-color:#" + me.htmlCls.contactColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "contactthreshold'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray3, 1);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "</tr>";
html += "<tr>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_halogen' checked>Halogen Bonds <span style='background-color:#" + me.htmlCls.halogenColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "halogenthreshold'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray2, 6);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_pication' checked>π-Cation <span style='background-color:#" + me.htmlCls.picationColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "picationthreshold'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray3, 3);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "<td style='white-space:nowrap'>" + me.htmlCls.inputCheckStr + "id='" + me.pre + "analysis_pistacking' checked>π-Stacking <span style='background-color:#" + me.htmlCls.pistackingColor + "'>" + me.htmlCls.space3 + "</span></td>";
html += "<td>";
html += me.htmlCls.divNowrapStr + " <select id='" + me.pre + "pistackingthreshold'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(['3', '4', '5'], 99);
html += me.htmlCls.optionStr + "'5.5' selected>5.5</option>";
html += me.htmlCls.setHtmlCls.getOptionHtml(['6', '7', '8'], 99);
html += "</select> Å" + me.htmlCls.space3 + "</div></td>";
html += "</tr></table></div>";
html += "<table border=0 width=400 cellspacing=10><tr><td>";
html += me.htmlCls.divNowrapStr + "2. Select the first set:</div>";
html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "atomsCustomHbond2' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "</td><td>";
html += me.htmlCls.divNowrapStr + "3. Select the second set:</div>";
html += "<div style='text-indent:1.1em'><select style='max-width:200px' id='" + me.pre + "atomsCustomHbond' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "</td></tr></table>";
html += "<div>4. " + me.htmlCls.buttonStr + "applyhbonds'>3D Display Interactions</button></div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondWindow'>Highlight Interactions in Table</button><span style='margin-left:30px; font-wieght:bold'>Sort Interactions on</span>: " + me.htmlCls.buttonStr + "sortSet1'> Set 1</button>" + me.htmlCls.buttonStr + "sortSet2' style='margin-left:12px'>Set 2</button></div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondLineGraph'>2D Interaction Network</button> " + me.htmlCls.buttonStr + "hbondLineGraph2' style='margin-left:12px'>2D Network with Reference Numbers</button> to show two lines of residue nodes</div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondScatterplot'>2D Interaction Map</button> " + me.htmlCls.buttonStr + "hbondScatterplot2' style='margin-left:12px'>2D Map with Reference Numbers</button> to show map</div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondLigplot'>2D Interaction for One Ligand/Residue</button> with atom details</div><br>";
tmpStr = ': </td><td><input style="margin-left:-12px" type="text" id="';
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondGraph'>2D Graph(Force-Directed)</button> to show interactions with strength parameters in 0-200:</div>";
html += '<div style="text-indent:1.1em"><table><tr><td>Helix or Sheet' + tmpStr + me.pre + 'dist_ss" size="4" value="100"></td>';
html += '<td>Coil or Nucleotide' + tmpStr + me.pre + 'dist_coil" size="4" value="50"></td>';
html += '<td>Disulfide Bonds' + tmpStr + me.pre + 'dist_ssbond" size="4" value="50"></td></tr>';
html += '<tr><td>Hydrogen Bonds' + tmpStr + me.pre + 'dist_hbond" size="4" value="50"></td>';
html += '<td>Salt Bridge/Ionic' + tmpStr + me.pre + 'dist_ionic" size="4" value="50"></td>';
html += '<td>Contacts' + tmpStr + me.pre + 'dist_inter" size="4" value="25"></td></tr>';
html += '<tr><td>Halogen Bonds' + tmpStr + me.pre + 'dist_halogen" size="4" value="50"></td>';
html += '<td>π-Cation' + tmpStr + me.pre + 'dist_pication" size="4" value="50"></td>';
html += '<td>π-Stacking' + tmpStr + me.pre + 'dist_pistacking" size="4" value="50"></td></tr></table></div>';
html += '<div style="text-indent:1.1em">(Note: you can also adjust thresholds at #1 to add/remove interactions.)</div><br>';
// html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "hbondExport'>Save</button> H-bond/contact pairs in a file</div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "areaWindow'>Buried Surface Area</button></div><br>";
html += "<div>5. " + me.htmlCls.buttonStr + "hbondReset'>Reset</button> and select new sets</div>";
html += "</div>";
html += me.htmlCls.divStr + "dl_realign' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_realign', 'Realign by sequence');
html += me.htmlCls.divNowrapStr + "1. Select sets below <br>or use your current selection:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealign' multiple size='5' style='min-width:130px;'>";
html += "</select></div><br>";
html += "<div>2. " + me.htmlCls.buttonStr + "applyRealign'>Realign by Sequence</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_realignbystruct' class='" + dialogClass + "' style='max-width:500px'>";
html += this.addNotebookTitle('dl_realignbystruct', 'Realign by structure');
//html += "<div><b>1</b>. There are two options to align chains. Option \"a\" is to select a list of chains below, and align all chains to the first chain. Option \"b\" is to select sets below or use your current selection, and align all chains pairwise.</div><br>";
html += "<div><b>1</b>. Select sets below or use your current selection.</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealignByStruct' multiple size='5' style='min-width:130px;'>";
html += "</select></div><br>";
// some issues in aligning 4orz_C and 5esv_H due to insertion code
//html += "<div><b>2a</b>. <div style='display:inline-block; width:170px'>Align to First Chain:</div> " + me.htmlCls.buttonStr + "applyRealignByStructMsa_tmalign'>Realign with TM-align</button>" + me.htmlCls.buttonStr + "applyRealignByStructMsa' style='margin-left:30px'>Realign with VAST</button></div><br>";
//html += "<div>or <b>2b</b>. <div style='display:inline-block; width:155px'>Align All Chains Pairwise:</div> " + me.htmlCls.buttonStr + "applyRealignByStruct_tmalign'>Realign with TM-align</button>" + me.htmlCls.buttonStr + "applyRealignByStruct' style='margin-left:30px'>Realign with VAST</button></div><br>";
html += "<div><b>2</b>. " + me.htmlCls.buttonStr + "applyRealignByStruct_tmalign'>Realign with TM-align</button>" + me.htmlCls.buttonStr + "applyRealignByStruct' style='margin-left:30px'>Realign with VAST</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_realigntwostru' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_realigntwostru', 'Realign two structure complexes');
html += me.htmlCls.divNowrapStr + "1. Select sets below or use your current selection:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomRealignByStruct2' multiple size='5' style='min-width:130px;'>";
html += "</select></div><br>";
html += "2. Overall maximum RMSD: " + me.htmlCls.inputTextStr + "id='" + me.pre + "maxrmsd' value='30' size='2'> Å <br><br>";
html += "<div>3. " + me.htmlCls.buttonStr + "applyRealignByStruct_vastplus'>VAST+ Alignment based on TM-align</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_colorspectrumacrosssets' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_colorspectrumacrosssets', 'Set color spectrum across sets');
html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrumAcross' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "<div>2. " + me.htmlCls.buttonStr + "applyColorSpectrumAcrossSets'>Spectrum Color for Sets</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_colorspectrumbysets' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_colorspectrumbysets', 'Set color spectrum for residues in sets');
html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorSpectrum' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "<div>2. " + me.htmlCls.buttonStr + "applyColorSpectrumBySets'>Spectrum Color for Residues in Sets</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_colorrainbowacrosssets' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_colorrainbowacrosssets', 'Set color rainbow across sets');
html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbowAcross' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "<div>2. " + me.htmlCls.buttonStr + "applyColorRainbowAcrossSets'>Rainbow Color for Sets</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_colorrainbowbysets' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_colorrainbowbysets', 'Set color rainbow for residues in sets');
html += me.htmlCls.divNowrapStr + "1. Select sets below:</div><br>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomColorRainbow' multiple size='5' style='min-width:130px;'>";
html += "</select></div>";
html += "<div>2. " + me.htmlCls.buttonStr + "applyColorRainbowBySets'>Rainbow Color for Residues in Sets</button></div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_allinteraction' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_allinteraction', 'All interactions', true);
html += "</div>";
html += me.htmlCls.divStr + "dl_interactionsorted' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_interactionsorted', 'Sorted interactions', true);
html += "</div>";
html += me.htmlCls.divStr + "dl_linegraph' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_linegraph', '2D Interaction Network');
html += me.htmlCls.divNowrapStr + '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+ me.pre + 'dl_linegraphcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
+ me.pre + 'dl_linegraphcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div>';
html += me.htmlCls.space2 + "Hold Ctrl key to select multiple nodes/lines.</div>";
html += me.htmlCls.divStr + "dl_linegraphcolor' style='display:block;'>";
html += me.htmlCls.setHtmlCls.setColorHints();
html += "</div><br>";
//let buttonStrTmp = '<button class="icn3d-commandTitle" style="-webkit-appearance:button; height:24px;background-color:#DDD;" id="';
me.linegraphid = me.pre + 'linegraph';
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.linegraphid + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.linegraphid + '_png">PNG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.linegraphid + '_json">JSON</button>' + me.htmlCls.space4;
html += "<b>Scale</b>: <select id='" + me.linegraphid + "_scale'>";
let optArray4 = ['0.1', '0.2', '0.4', '0.6', '0.8', '1', '2', '4', '6', '8', '10'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray4, 5);
html += "</select></div><br>";
html += '<div id="' + me.pre + 'linegraphDiv"></div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_scatterplot' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_scatterplot', '2D Interaction Map');
html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3;
html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+ me.pre + 'dl_scatterplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="width:15px;" title="Expand"></span><span id="'
+ me.pre + 'dl_scatterplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="display:none; width:15px;" title="Shrink"></span></div></div>';
html += me.htmlCls.divStr + "dl_scatterplotcolor' style='display:none;'>";
html += me.htmlCls.setHtmlCls.setColorHints();
html += "</div>";
me.scatterplotid = me.pre + 'scatterplot';
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.scatterplotid + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.scatterplotid + '_png">PNG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.scatterplotid + '_json">JSON</button>' + me.htmlCls.space4;
html += "<b>Scale</b>: <select id='" + me.scatterplotid + "_scale'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray4, 5);
html += "</select></div><br>";
html += '<div id="' + me.pre + 'scatterplotDiv"></div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_ligplot' style='background-color:white' class='" + dialogClass + "'>";
if(me.cfg.cid !== undefined || me.cfg.smiles !== undefined) {
html += this.addNotebookTitle('dl_ligplot', '2D Depiction for Chemicals');
}
else {
html += this.addNotebookTitle('dl_ligplot', '2D Interaction for One Ligand/Residue with Atom Details');
html += me.htmlCls.divNowrapStr + "<b>Note</b>: Nodes/Residues can be dragged. Both nodes and dashed lines/interactions can be clicked to select residues. " + me.htmlCls.space3;
html += '<div style="width:20px; margin-top:6px; display:inline-block;"><span id="'
+ me.pre + 'dl_ligplotcolor_expand" class="ui-icon ui-icon-plus icn3d-expand icn3d-link" style="display:none; width:15px;" title="Expand"></span><span id="'
+ me.pre + 'dl_ligplotcolor_shrink" class="ui-icon ui-icon-minus icn3d-shrink icn3d-link" style="width:15px;" title="Shrink"></span></div></div>';
html += me.htmlCls.divStr + "dl_ligplotcolor' style='inline-block;'>";
// html += "The real interaction distances are not in scale, and are about twice the distances of dashed line segments.<br>Some \"Contact\" lines are only shown partially to simplify the view.<br>";
// html += "Mouseover the dashed lines to see interaction types and distances.<br>";
html += "<b>Color legend</b> for interactions (dashed lines): <br>";
html += me.htmlCls.setHtmlCls.setColorHints();
html += "<br></div>";
}
me.ligplotid = me.pre + 'ligplot';
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.ligplotid + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.ligplotid + '_png">PNG</button>' + me.htmlCls.space2;
// html += buttonStrTmp + me.ligplotid + '_json">JSON</button>' + me.htmlCls.space4;
html += "<b>Scale</b>: <select id='" + me.ligplotid + "_scale'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray4, 5);
html += "</select></div><br>";
html += '<div id="' + me.pre + 'ligplotDiv"></div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_contactmap' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_contactmap', 'Contact Map');
html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
me.contactmapid = me.pre + 'contactmap';
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.contactmapid + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.contactmapid + '_png">PNG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.contactmapid + '_json">JSON</button>' + me.htmlCls.space4;
html += "<b>Scale</b>: <select id='" + me.contactmapid + "_scale'>";
let optArray5 = ['0.01', '0.02', '0.04', '0.06', '0.08', '0.1', '0.2', '0.4', '0.6', '0.8', '1'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray5, 10);
html += "</select></div><br>";
html += '<div id="' + me.pre + 'contactmapDiv"></div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_alignerrormap' style='background-color:white' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_alignerrormap', 'PAE Map');
html += me.htmlCls.divNowrapStr + "Hold Ctrl key to select multiple nodes." + me.htmlCls.space3 + "</div>";
me.alignerrormapid = me.pre + 'alignerrormap';
html += me.htmlCls.divNowrapStr + buttonStrTmp + me.alignerrormapid + '_svg">SVG</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.alignerrormapid + '_png">PNG (slow)</button>' + me.htmlCls.space2;
html += buttonStrTmp + me.alignerrormapid + '_json">JSON</button>' + me.htmlCls.space4;
html += '<b>Scale</b>: <select id="' + me.alignerrormapid + '_scale">';
//let optArray5 = ['0.01', '0.02', '0.04', '0.06', '0.08', '0.1', '0.2', '0.4', '0.6', '0.8', '1'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray5, 2);
html += "</select></div><br>";
//min: 004d00, max: FFFFFF
let startColorStr = '#004d00';
let endColorStr = '#FFFFFF';
let rangeStr = startColorStr + ' 0%, ' + endColorStr + ' 100%';
html += "<div style='width:200px'><div style='height: 12px; border: 1px solid #000; background: linear-gradient(to right, " + rangeStr + ");'></div>";
html += "<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td width='15%'>0</td><td width='15%'>5</td><td width='15%'>10</td><td width='15%'>15</td><td width='15%'>20</td><td width='15%'>25</td><td>30</td></tr><tr><td colspan='7' align='center'>Expected position error (Angstroms)</td></tr></table></div><br>";
html += '<div id="' + me.pre + 'alignerrormapDiv"></div>';
html += "</div>";
html += me.htmlCls.divStr + "dl_elecmap2fofc' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_elecmap2fofc', 'Electron Density 2F0-Fc Map');
html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigma2fofc'>";
let optArray1 = ['0', '0.5', '1', '1.5', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 3);
html += "</select> σ</span> <span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "applymap2fofc'>Display</button></span> <span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "elecmapNo2'>Remove Map</button></span>";
html += "</div>";
html += me.htmlCls.divStr + "dl_elecmapfofc' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_elecmapfofc', 'Electron Density F0-Fc Map');
html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "sigmafofc'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(optArray1, 5);
html += "</select> σ</span> <span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "applymapfofc'>Display</button></span> <span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "elecmapNo3'>Remove Map</button></span>";
html += "</div>";
html += me.htmlCls.divStr + "dl_emmap' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_emmap', 'EM Density Map');
html += "<span style='white-space:nowrap;font-weight:bold;'>Contour at: <select id='" + me.pre + "empercentage'>";
html += me.htmlCls.setHtmlCls.getOptionHtml(['0', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100'], 3);
html += "</select> % of maximum EM values</span><br><span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "applyemmap'>Display</button></span> <span style='white-space:nowrap; margin-left:30px;'>" + me.htmlCls.buttonStr + "emmapNo2'>Remove EM Map</button></span>";
html += "</div>";
html += me.htmlCls.divStr + "dl_aroundsphere' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_aroundsphere', 'Select a sphere around a set of residues');
html += me.htmlCls.divNowrapStr + "1. Select the first set:</div>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomSphere2' multiple size='3' style='min-width:130px;'>";
html += "</select></div><br>";
html += me.htmlCls.divNowrapStr + "2. Sphere with a radius: " + me.htmlCls.inputTextStr + "id='" + me.pre + "radius_aroundsphere' value='4' size='2'> Å</div><br/>";
html += me.htmlCls.divNowrapStr + "3. Select the second set to apply the sphere:</div>";
html += "<div style='text-indent:1.1em'><select id='" + me.pre + "atomsCustomSphere' multiple size='3' style='min-width:130px;'>";
html += "</select></div><br>";
html += me.htmlCls.divNowrapStr + "4. " + me.htmlCls.buttonStr + "applypick_aroundsphere'>Display</button> the sphere around the first set of atoms</div><br>";
html += "<div style='text-indent:1.1em'>" + me.htmlCls.buttonStr + "sphereExport'>Save</button> interacting/contacting residue pairs in a file</div>";
html += "</div>";
html += me.htmlCls.divStr + "dl_adjustmem' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_adjustmem', 'Adjust membranes');
html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
html += me.htmlCls.divNowrapStr + "1. Extracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "extra_mem_z' value='' size='3'> Å</div><br/>";
html += me.htmlCls.divNowrapStr + "2. intracellular membrane Z-axis position: " + me.htmlCls.inputTextStr + "id='" + me.pre + "intra_mem_z' value='' size='3'> Å</div><br/>";
html += me.htmlCls.divNowrapStr + "3. " + me.htmlCls.buttonStr + "apply_adjustmem'>Display</button> the adjusted membranes</div><br>";
html += "</div>";
html += me.htmlCls.divStr + "dl_selectplane' class='" + dialogClass + "'>";
html += this.addNotebookTitle('dl_selectplane', 'Select a plane');
html += "<b>Note</b>: The membranes are parallel to the X-Y plane. The center of the membranes is at Z = 0. <br/><br/>";
html += me.htmlCls.divNowrapStr + "1. Z-axis position of the first X-Y plane: " + me.htmlCls.inputTextStr + "id='" + me.pre + "selectplane_z1' value='15' size='3'> Å</div><br/>";