phyloio 2.1.0 → 2.1.1
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.
- package/Examples/Website/phyloio.html +73 -71
- package/{src_phylo_compare/phylo.js → Examples/Website/src_worker_bcn_js.phylo.js} +25 -972
- package/{src_phylo_compare/vendors-node_modules_d3_index_js-node_modules_file-saver_dist_FileSaver_min_js.phylo.js → Examples/Website/src_worker_distance_js.phylo.js} +100 -2
- package/README.md +16 -2
- package/dist/phylo.js +7 -7
- package/dist/src_worker_bcn_js.phylo.js +2 -2
- package/dist/src_worker_distance_js.phylo.js +1 -1
- package/package-lock.json +19607 -0
- package/package.json +1 -1
- package/src/api.js +19 -9
- package/src/container.js +408 -64
- package/src/interface.css +6 -0
- package/src/interface.js +371 -207
- package/src/model.js +5 -0
- package/src/tmp +12 -0
- package/src/utils.js +31 -1
- package/src/viewer.js +177 -88
- package/src_phylo_compare/fonts/fa-brands-400.eot +0 -0
- package/src_phylo_compare/fonts/fa-brands-400.svg +0 -3717
- package/src_phylo_compare/fonts/fa-brands-400.ttf +0 -0
- package/src_phylo_compare/fonts/fa-brands-400.woff +0 -0
- package/src_phylo_compare/fonts/fa-brands-400.woff2 +0 -0
- package/src_phylo_compare/fonts/fa-regular-400.eot +0 -0
- package/src_phylo_compare/fonts/fa-regular-400.svg +0 -801
- package/src_phylo_compare/fonts/fa-regular-400.ttf +0 -0
- package/src_phylo_compare/fonts/fa-regular-400.woff +0 -0
- package/src_phylo_compare/fonts/fa-regular-400.woff2 +0 -0
- package/src_phylo_compare/fonts/fa-solid-900.eot +0 -0
- package/src_phylo_compare/fonts/fa-solid-900.svg +0 -5034
- package/src_phylo_compare/fonts/fa-solid-900.ttf +0 -0
- package/src_phylo_compare/fonts/fa-solid-900.woff +0 -0
- package/src_phylo_compare/fonts/fa-solid-900.woff2 +0 -0
- package/src_phylo_compare/fonts/fa-v4compatibility.ttf +0 -0
- package/src_phylo_compare/fonts/fa-v4compatibility.woff2 +0 -0
- package/src_phylo_compare/src_utils_js.phylo.js +0 -21
- package/src_phylo_compare/src_worker_bcn_js.phylo.js +0 -341
- package/src_phylo_compare/src_worker_distance_js.phylo.js +0 -227
- package/src_phylo_compare/vendors-node_modules_biojs-io-newick_src_index_js-node_modules_minhashjs_index_js.phylo.js +0 -1703
- package/src_phylo_compare.zip +0 -0
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
|
-
<
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<title>Phylo.io - Phylogenetic tree viewer</title>
|
|
5
6
|
<meta charset="UTF-8">
|
|
6
7
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
7
|
-
|
|
8
|
-
<
|
|
8
|
+
<meta name="description" content="Phylo.io let you visualize, compare and modify phylogenetic trees in an interactive tool and allows you to share them with peers.">
|
|
9
|
+
<meta name="keywords" content="phylogenetic trees,visualization,gene tree,species tree,tree distances,comparing phylogenetic trees">
|
|
9
10
|
|
|
10
11
|
<!-- CSS only -->
|
|
11
12
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
|
@@ -13,13 +14,19 @@
|
|
|
13
14
|
<link rel="stylesheet" href="./phyloio.css">
|
|
14
15
|
|
|
15
16
|
<!-- JavaScript Bundle with Popper <script src="../../dist/phylo.js"></script> -->
|
|
17
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
16
18
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
17
|
-
<script src="./phylo.js"></script>
|
|
18
19
|
|
|
19
20
|
<!-- Phylo.io Bundle -->
|
|
21
|
+
<script src="src_worker_bcn_js.phylo.js"></script>
|
|
22
|
+
<script src="src_worker_distance_js.phylo.js"></script>
|
|
23
|
+
<script src="../../dist/phylo.js"></script>
|
|
24
|
+
|
|
25
|
+
<!--
|
|
20
26
|
<script src="https://cdn.jsdelivr.net/gh/DessimozLab/phylo-io@master/dist/src_worker_bcn_js.phylo.js"></script>
|
|
21
27
|
<script src="https://cdn.jsdelivr.net/gh/DessimozLab/phylo-io@master/dist/src_worker_distance_js.phylo.js"></script>
|
|
22
28
|
<script src="https://cdn.jsdelivr.net/gh/DessimozLab/phylo-io@master/dist/phylo.js"></script>
|
|
29
|
+
-->
|
|
23
30
|
|
|
24
31
|
</head>
|
|
25
32
|
|
|
@@ -94,8 +101,8 @@
|
|
|
94
101
|
|
|
95
102
|
|
|
96
103
|
|
|
97
|
-
<a href="
|
|
98
|
-
<img src="./svg.svg" style="width: 48px;">
|
|
104
|
+
<a href="#" class="d-block p-3 link-dark text-decoration-none" title="" style="text-align: center">
|
|
105
|
+
<img src="./svg.svg" style="width: 48px;margin-left: -4px;">
|
|
99
106
|
|
|
100
107
|
<small style="font-size: xx-small; color: white">PHYLO.IO</small>
|
|
101
108
|
|
|
@@ -105,19 +112,19 @@
|
|
|
105
112
|
<li class="nav-item">
|
|
106
113
|
<a href="#" class="nav-link py-3 border-bottom border-top" id="menu_load" aria-current="page" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Load Session" >
|
|
107
114
|
<i class="bi-file-earmark-arrow-up" style="font-size: 24px;color: white "></i>
|
|
108
|
-
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Load</p>
|
|
115
|
+
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Load session</p>
|
|
109
116
|
</a>
|
|
110
117
|
</li>
|
|
111
118
|
<li>
|
|
112
119
|
<a href="#" class="nav-link py-3 border-bottom" id="menu_save" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Save Session">
|
|
113
120
|
<i class="bi-file-earmark-arrow-down" style="font-size: 24px;color: white "></i>
|
|
114
|
-
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Save</p>
|
|
121
|
+
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Save session</p>
|
|
115
122
|
</a>
|
|
116
123
|
</li>
|
|
117
124
|
<li>
|
|
118
125
|
<a href="#" class="nav-link py-3 border-bottom" id="menu_share" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Share Session">
|
|
119
126
|
<i class="bi-share" style="font-size: 24px;color: white "></i>
|
|
120
|
-
<p style="font-size: xx-small; color: white; margin-bottom:0px" >
|
|
127
|
+
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Share session</p>
|
|
121
128
|
</a>
|
|
122
129
|
</li>
|
|
123
130
|
<li>
|
|
@@ -143,7 +150,7 @@
|
|
|
143
150
|
<li>
|
|
144
151
|
<a href="#" id="menu_screenshot" class="nav-link py-3 border-bottom" title="" id="menu_screenshot" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Export as graphic">
|
|
145
152
|
<i class="bi-camera" style="font-size: 24px;color: white "></i>
|
|
146
|
-
<p style="font-size: xx-small; color: white; margin-bottom:0px" >
|
|
153
|
+
<p style="font-size: xx-small; color: white; margin-bottom:0px" >Screenshot session</p>
|
|
147
154
|
</a>
|
|
148
155
|
</li>
|
|
149
156
|
|
|
@@ -192,9 +199,7 @@
|
|
|
192
199
|
</div>
|
|
193
200
|
|
|
194
201
|
<div class="alert alert-warning" role="alert">
|
|
195
|
-
<strong>Warning:</strong>
|
|
196
|
-
on the left menu. It will reset the current phylo.io session and load all data and settings from the file erasing if any data you have already load.
|
|
197
|
-
<b>If you only want to add a new tree please use the "add tree" button on the top left of each viewer. </b>
|
|
202
|
+
<strong>Warning:</strong> Only load .phyloio files generated via the download session button in the left menu. This will reset the current session and overwrite any loaded data. To add a new tree without resetting, use the "Add Tree" button at the top left of each viewer. </b>
|
|
198
203
|
</div>
|
|
199
204
|
|
|
200
205
|
|
|
@@ -224,13 +229,13 @@
|
|
|
224
229
|
</div>
|
|
225
230
|
<div class="modal-body">
|
|
226
231
|
<br>
|
|
227
|
-
<div class="
|
|
232
|
+
<div class="gap-1 col-10 mx-auto">
|
|
228
233
|
<div style="margin-bottom: 32px">
|
|
229
234
|
|
|
230
235
|
<div class="card text-center" style="margin-left: 24px" >
|
|
231
236
|
<div class="card-body">
|
|
232
237
|
|
|
233
|
-
<div class="row">
|
|
238
|
+
<div class="row d-flex" id="share_link_row">
|
|
234
239
|
<div class="col-1">
|
|
235
240
|
<i class="bi-link-45deg" ></i>
|
|
236
241
|
</div>
|
|
@@ -242,6 +247,14 @@
|
|
|
242
247
|
<button type="button" class="btn btn-sm btn-outline-primary" onclick="copy_clipboard('share_link', 'href')">copy</button>
|
|
243
248
|
</div>
|
|
244
249
|
</div>
|
|
250
|
+
<div class="row d-flex" id="share_error_row" style="display: none;">
|
|
251
|
+
|
|
252
|
+
<div class="gap-1 col-9" style="overflow: scroll;">
|
|
253
|
+
<p id="share_error" style="white-space: nowrap; font-weight: bold; color: red;"></p>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
</div>
|
|
257
|
+
|
|
245
258
|
|
|
246
259
|
|
|
247
260
|
</div>
|
|
@@ -302,8 +315,8 @@
|
|
|
302
315
|
<h5 class="modal-title">Keyboard shorcuts </h5>
|
|
303
316
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
304
317
|
</div>
|
|
305
|
-
<div class="modal-body">
|
|
306
318
|
|
|
319
|
+
<div class="modal-body">
|
|
307
320
|
<h5>General actions</h5>
|
|
308
321
|
<p><strong>Distance: </strong> Use <kbd>t</kbd> to start phylogenetic distance computation<br>
|
|
309
322
|
<p><strong>Viewer Mode: </strong> Use <kbd>g</kbd> to switch between single tree mode or compare mode<br>
|
|
@@ -324,14 +337,13 @@
|
|
|
324
337
|
<p><strong>Tree Selection: </strong> Use <kbd>u</kbd> or <kbd>o</kbd> to change tree<br>
|
|
325
338
|
<p><strong>Automatic Collapsing: </strong> Use <kbd>z</kbd> to fit the tree in the viewer by collapsing and zooming in/out. <br>
|
|
326
339
|
<p><strong>Automatic Zoom: </strong> Use <kbd>h</kbd> to fit the tree in the viewer by zooming in/out.<br>
|
|
340
|
+
</div>
|
|
327
341
|
|
|
328
|
-
|
|
329
|
-
</div>
|
|
330
342
|
<div class="modal-footer">
|
|
331
343
|
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
|
|
332
344
|
</div>
|
|
333
345
|
</div>
|
|
334
|
-
|
|
346
|
+
</div>
|
|
335
347
|
</div>
|
|
336
348
|
|
|
337
349
|
<div class="modal" id="modal_screenshot" tabindex="-1">
|
|
@@ -342,9 +354,7 @@
|
|
|
342
354
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
343
355
|
</div>
|
|
344
356
|
<div class="modal-body">
|
|
345
|
-
<p>
|
|
346
|
-
export as image both viewers. If you want each individual viewer to be exported as single image please use <i class=" fas fa-download " style="color: rgb(136, 136, 136);"></i> at the top righ of
|
|
347
|
-
each viewers.</p>
|
|
357
|
+
<p>This will take a screenshot of the current phylo.io view. If compare mode is active, both viewers will be included in the image. To export each viewer separately, use the screenshot button at the top right of each viewer.</p>
|
|
348
358
|
|
|
349
359
|
<label for="s_format_r" style="margin-left: 24px"><strong>Format:</strong> </label>
|
|
350
360
|
|
|
@@ -380,7 +390,7 @@
|
|
|
380
390
|
|
|
381
391
|
var copyText = document.getElementById(div_id);
|
|
382
392
|
|
|
383
|
-
if (type
|
|
393
|
+
if (type === 'href'){
|
|
384
394
|
navigator.clipboard.writeText(copyText.href);
|
|
385
395
|
}
|
|
386
396
|
else {
|
|
@@ -421,9 +431,8 @@
|
|
|
421
431
|
document.getElementById("li_lock").style.display = 'none'
|
|
422
432
|
}
|
|
423
433
|
else if (document.getElementById("li_distance").style.display === 'none'){
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
434
|
+
document.getElementById("li_distance").style.display = 'block';
|
|
435
|
+
document.getElementById("li_lock").style.display = 'block';
|
|
427
436
|
}
|
|
428
437
|
|
|
429
438
|
update_lock()
|
|
@@ -432,20 +441,9 @@
|
|
|
432
441
|
var compare = false;
|
|
433
442
|
const phylo = PhyloIO.init()
|
|
434
443
|
|
|
435
|
-
/*
|
|
436
|
-
|
|
437
|
-
const tooltip_object = []
|
|
438
|
-
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
|
439
|
-
tooltipTriggerList.forEach(function (tooltipTriggerEl) {
|
|
440
|
-
tooltip_object.push(new bootstrap.Tooltip(tooltipTriggerEl));
|
|
441
|
-
})
|
|
442
|
-
|
|
443
|
-
*/
|
|
444
|
-
|
|
445
444
|
if (!compare){
|
|
446
445
|
document.getElementById("li_distance").style.display = 'none'
|
|
447
446
|
document.getElementById("li_lock").style.display = 'none'
|
|
448
|
-
|
|
449
447
|
update_lock()
|
|
450
448
|
}
|
|
451
449
|
|
|
@@ -457,7 +455,6 @@
|
|
|
457
455
|
|
|
458
456
|
document.getElementById("menu_share").onclick = function() {
|
|
459
457
|
$('#modal_share').modal('show');
|
|
460
|
-
//$('#modal_phylo_session').modal('show');
|
|
461
458
|
};
|
|
462
459
|
|
|
463
460
|
document.getElementById("menu_distance").onclick = function() {
|
|
@@ -489,8 +486,7 @@
|
|
|
489
486
|
};
|
|
490
487
|
|
|
491
488
|
document.getElementById("menu_help").onclick = function() {
|
|
492
|
-
|
|
493
|
-
var url = 'https://github.com/DessimozLab/phylo-io?tab=readme-ov-file#phyloio'
|
|
489
|
+
let url = 'https://github.com/DessimozLab/phylo-io?tab=readme-ov-file#phyloio'
|
|
494
490
|
window.open(url, '_blank').focus();
|
|
495
491
|
};
|
|
496
492
|
|
|
@@ -610,28 +606,22 @@
|
|
|
610
606
|
};
|
|
611
607
|
|
|
612
608
|
|
|
613
|
-
|
|
609
|
+
let myModalEl = document.getElementById('modal_share');
|
|
614
610
|
myModalEl.addEventListener('shown.bs.modal', function (event) {
|
|
615
|
-
|
|
616
|
-
phylo.
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
else{
|
|
630
|
-
document.getElementById("share_link").innerText = phylo.session_url
|
|
631
|
-
document.getElementById("share_link").href = phylo.session_url
|
|
632
|
-
}
|
|
633
|
-
|
|
634
|
-
|
|
611
|
+
phylo.session_url = null;
|
|
612
|
+
phylo.session_answer = null;
|
|
613
|
+
phylo.generate_share_link( function() {
|
|
614
|
+
if (phylo.session_answer && phylo.session_answer.result === "OK"){
|
|
615
|
+
document.getElementById("share_link_row").style.display = "block";
|
|
616
|
+
document.getElementById("share_link").innerText = phylo.session_url
|
|
617
|
+
document.getElementById("share_link").href = phylo.session_url
|
|
618
|
+
document.getElementById("share_error_row").style.display = 'none';
|
|
619
|
+
} else {
|
|
620
|
+
document.getElementById("share_link_row").style.display = "none";
|
|
621
|
+
document.getElementById("share_error_row").style.display = 'block';
|
|
622
|
+
document.getElementById("share_error").innerText = phylo.session_answer.message || "We cannot upload the session data for some unknown reason."
|
|
623
|
+
}
|
|
624
|
+
})
|
|
635
625
|
|
|
636
626
|
})
|
|
637
627
|
|
|
@@ -760,7 +750,7 @@
|
|
|
760
750
|
|
|
761
751
|
try {
|
|
762
752
|
|
|
763
|
-
if (JSON.parse(d).result
|
|
753
|
+
if (JSON.parse(d).result === 'Error'){
|
|
764
754
|
throw new Error('Empty received data');
|
|
765
755
|
}
|
|
766
756
|
l(d)
|
|
@@ -861,6 +851,13 @@
|
|
|
861
851
|
|
|
862
852
|
start_phylo(phylo.settings.compareMode)
|
|
863
853
|
|
|
854
|
+
// if version is not define or under 1 display error message
|
|
855
|
+
if (json.settings.version == undefined || json.settings.version < phylo.settings.version){
|
|
856
|
+
var message = '<strong>OUPS!</strong> It seems your data is not compatible with the current version of phylo.io.'
|
|
857
|
+
error_loading_session(message)
|
|
858
|
+
return
|
|
859
|
+
}
|
|
860
|
+
|
|
864
861
|
phylo.set_color_scales(json.color_scales)
|
|
865
862
|
|
|
866
863
|
let cs = Object.values(json.containers)
|
|
@@ -889,16 +886,8 @@
|
|
|
889
886
|
|
|
890
887
|
} catch (error) {
|
|
891
888
|
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
var message = ' <strong>OUPS!</strong> It seems the data is corrupted or obselete.'
|
|
889
|
+
error_loading_session('<strong>OUPS!</strong> It seems the data is corrupted or obselete.')
|
|
895
890
|
|
|
896
|
-
create_alert('error_remote_data', message)
|
|
897
|
-
console.log(error)
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
csp[i].current_model = 0
|
|
901
|
-
csp[i].remove_all_trees()
|
|
902
891
|
}
|
|
903
892
|
|
|
904
893
|
}
|
|
@@ -911,6 +900,19 @@
|
|
|
911
900
|
|
|
912
901
|
}
|
|
913
902
|
|
|
903
|
+
function error_loading_session(msg){
|
|
904
|
+
|
|
905
|
+
document.getElementById("error_remote_data").style.display = 'block';
|
|
906
|
+
|
|
907
|
+
create_alert('error_remote_data', msg)
|
|
908
|
+
|
|
909
|
+
console.log(msg)
|
|
910
|
+
|
|
911
|
+
|
|
912
|
+
//csp[i].current_model = 0
|
|
913
|
+
//csp[i].remove_all_trees()
|
|
914
|
+
}
|
|
915
|
+
|
|
914
916
|
function refresh(){
|
|
915
917
|
|
|
916
918
|
var data = JSON.parse(phylo.get_json_pickle())
|