npm - phyloio - Versions diffs - 2.0.0 - Mend

phyloio 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1756) hide show

package/Examples/Website/phyloio.html ADDED Viewed

@@ -0,0 +1,928 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Phylo.io</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <!-- CSS only -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
+    <link rel="stylesheet" href="./phyloio.css">
+    <!-- JavaScript Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
+    <script src="./phylo.js"></script>
+</head>
+<style>
+    .nav-pills .nav-link {
+        border-radius: 0 !important;
+    }
+    #distance_window {
+        border-radius: 8px;
+        position: absolute;
+        top: 30%;
+        left:50%;
+        z-index: 9;
+        background-color: rgba(235,235,235,0.95);
+        text-align: center;
+    }
+    #mydivheader {
+        cursor: move;
+        z-index: 1;
+        background-color: rgba(235,235,235,0.95);
+    }
+    #mydivbody{
+        cursor: move;
+        z-index: 1;
+    }
+</style>
+<body>
+<main>
+    <!-- Draggable DIV -->
+    <div id="distance_window">
+        <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
+        <div id="mydivheader"> <p style="margin-bottom: 0px"><strong> Distance <button class="btn" id="close_distance_window" >
+            <i id='icon_distance' class="bi-x-lg" ></i>
+        </button></strong> </p>
+        </div>
+        <div id="mydivbody"  >
+        </div>
+    </div>
+    <div class="d-flex flex-column flex-shrink-0 " style="width: 4.5rem;background-color: rgb(33, 37, 41);
+}">
+        <a href="https://zoo.vital-it.ch/viewer/" class="d-block p-3 link-dark text-decoration-none" title="" style="text-align: center">
+            <i class="bi-triangle" style="font-size: 24px;color: white  "></i>
+            <small style="font-size: xx-small; color: white">PHYLO.IO</small>
+        </a>
+        <ul class="nav nav-pills nav-flush flex-column mb-auto text-center">
+            <li class="nav-item">
+                <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" >
+                    <i class="bi-file-earmark-arrow-up" style="font-size: 24px;color: white "></i>
+                </a>
+            </li>
+            <li>
+                <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">
+                    <i class="bi-file-earmark-arrow-down" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li>
+                <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">
+                    <i class="bi-share" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li>
+                <a href="#" id="menu_compare_mode" class="nav-link py-3 border-bottom" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Switch between single & compare mode">
+                    <i class="bi-layout-split" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li id="li_distance">
+                <a href="#" id="menu_distance" class="nav-link py-3 border-bottom" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Show phylogenetic distance">
+                    <i class="bi-rulers" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li id="li_lock">
+                <a href="#" id="menu_lock" class="nav-link py-3 border-bottom" title="" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Synchronize zoom between viewer">
+                    <i class="bi-lock" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li>
+                <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">
+                    <i class="bi-camera" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+            <li>
+                <a href="#" id="menu_keyboard" class="nav-link py-3 border-bottom" title="" id="menu_keyboard" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-original-title="Show keyboard shorcuts">
+                    <i class="bi-keyboard" style="font-size: 24px;color: white  "></i>
+                </a>
+            </li>
+        </ul>
+        <div class="dropdown border-top">
+            <a href="#" id='menu_help' class="d-flex align-items-center justify-content-center p-3  text-decoration-none " style="color: white" >
+                <i class="bi-question-circle" style="font-size: 24px; color:white  "></i>
+            </a>
+        </div>
+    </div>
+    <!-- Modals -->
+    <div class="modal" id="modal_phylo_session" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg ">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><b>Load your phylo.io session</b></h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="container-fluid">
+                        <div class="row" style="margin-bottom: 32px">
+                            <div class="col">
+                                <div class="input-group mb-3" style="padding-left: 24px;">
+                                    <input class="form-control" type="file" id="load_session_input">                                    <div class="input-group-append">
+                                        <button class="btn btn-outline-secondary" id="load_session_file" type="button">OK</button>
+                                    </div>
+                                </div>
+                                <div class="alert alert-warning" role="alert">
+                                    <strong>Warning:</strong> Here you can only load .phyloio file that are generated from the download button
+                                    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.
+                                   <b>If you only want to add a new tree please use the "add tree" button on the top left of each viewer. </b>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    <div class="modal" id="modal_share" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Share your phylo.io session </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <br>
+                    <div class=" gap-2 col-8 mx-auto">
+                        <div style="margin-bottom: 32px">
+                            <div class="card text-center" style="margin-left: 24px" >
+                                <div class="card-body">
+                                    <div class="row">
+                                        <div class="col-1">
+                                            <i class="bi-link-45deg" ></i>
+                                        </div>
+                                        <div class="col-9" style="overflow: scroll;">
+                                            <a href="#" class="card-link" id="share_link" style="white-space: nowrap;"></a>
+                                        </div>
+                                        <div class="col-2">
+                                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="copy_clipboard('share_link', 'href')">copy</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="modal_distance" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Phylogenetic distance settings</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="switchRF" checked>
+                        <label class="form-check-label" for="switchRF">Compute Robinson-Foulds (RF) distance</label>
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="switchClade" checked>
+                        <label class="form-check-label" for="switchClade">Compute Clade distance</label>
+                    </div>
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" role="switch" id="switchEuc" checked>
+                        <label class="form-check-label" for="switchEuc">Compute Euclidian distance</label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button"  class="btn btn-primary" data-bs-dismiss="modal">I'm done here</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="modal_keyboard" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Keyboard shorcuts  </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <h5>Left tree (or single mode)</h5>
+                    <p><strong>Tree Height: </strong> Use <kbd>w</kbd> to increase or <kbd>s</kbd> to decrease<br>
+                    <p><strong>Tree Width: </strong> Use <kbd>a</kbd> to increase or <kbd>d</kbd> to decrease<br>
+                    <p><strong>Tree Selection: </strong> Use <kbd>q</kbd> or <kbd>e</kbd> to change tree<br>
+                    <br>
+                    <h5>Right tree (only in compare mode)</h5>
+                    <p><strong>Tree Height: </strong> Use <kbd>i</kbd> to increase or <kbd>k</kbd> to decrease<br>
+                    <p><strong>Tree Width: </strong> Use <kbd>j</kbd> to increase or <kbd>l</kbd> to decrease<br>
+                    <p><strong>Tree Selection: </strong> Use <kbd>u</kbd> or <kbd>o</kbd> to change tree<br>
+                    </div>
+                <div class="modal-footer">
+                    <button type="button"  class="btn btn-primary" data-bs-dismiss="modal">I'm done here</button>
+                </div>
+            </div>
+            </div>
+    </div>
+    <div class="modal" id="modal_help" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Phylo.io help center</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    Help section is under construction
+                </div>
+                <div class="modal-footer">
+                    <button type="button"  class="btn btn-primary" data-bs-dismiss="modal">I'm done!</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal" id="modal_screenshot" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Screenshot settings </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p> Here, you will make a screenshot of the current phylo.io view. This means that if the compare mode is activated it will
+                        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
+                        each viewers.</p>
+                    <label for="s_format_r" style="margin-left: 24px"><strong>Format:</strong> </label>
+                    <div class="btn-group" style="margin-left: 12px"  role="group" id="s_format_r" aria-label="Basic radio toggle button group">
+                        <input type="radio" class="btn-check" name="format_screen" id="btnradiosvg" autocomplete="off" checked>
+                        <label class="btn btn-outline-primary" for="btnradiosvg">SVG</label>
+                        <input type="radio" class="btn-check" name="format_screen" id="btnradiopng" autocomplete="off">
+                        <label class="btn btn-outline-primary" for="btnradiopng">PNG</label>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button"  id="button_export_screenshot" class="btn btn-primary" data-bs-dismiss="modal">Export as Image</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="position-fixed top-50 start-50 translate-middle"  id="error_remote_data" style="display: none; z-index: 10000000">
+    </div>
+</main>
+<script>
+   var copy_clipboard = function(div_id, type){
+       var copyText = document.getElementById(div_id);
+       if (type == 'href'){
+           navigator.clipboard.writeText(copyText.href);
+       }
+       else {
+           navigator.clipboard.writeText(copyText.innerText);
+       }
+   }
+   var create_alert = function(div, message){
+       var container = document.getElementById(div);
+       var h = ' <div class="alert alert-danger alert-dismissible show fade"  role="alert"> ' +
+           '<span>' +message+'</span>' +
+           ' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> '
+            ' </div>'
+       container.innerHTML= h;
+   }
+</script>
+<script>
+    $(window).bind('beforeunload', function() {
+        // do something, preferably ajax request etc
+        return 'are you sure?';
+    });
+    var display_distance_menu = function(compare){
+        if (!compare){
+            document.getElementById("li_distance").style.display = 'none'
+            document.getElementById("li_lock").style.display = 'none'
+        }
+        else if (document.getElementById("li_distance").style.display === 'none'){
+            document.getElementById("li_distance").style.display = 'block';
+            document.getElementById("li_lock").style.display = 'block';
+        }
+        update_lock()
+    }
+    var compare = false;
+    const phylo = PhyloIO.init()
+    const tooltip_object = []
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+    tooltipTriggerList.forEach(function (tooltipTriggerEl) {
+        tooltip_object.push(new bootstrap.Tooltip(tooltipTriggerEl));
+    })
+    if (!compare){
+        document.getElementById("li_distance").style.display = 'none'
+        document.getElementById("li_lock").style.display = 'none'
+        update_lock()
+    }
+    // MODALS
+    document.getElementById("menu_load").onclick = function() {
+        //$('#modal_load').modal('show');
+        $('#modal_phylo_session').modal('show');
+    };
+    document.getElementById("menu_share").onclick = function() {
+        $('#modal_share').modal('show');
+        //$('#modal_phylo_session').modal('show');
+    };
+    document.getElementById("menu_distance").onclick = function() {
+        phylo.settings.compute_distance = true;
+        phylo.compute_distance()
+    };
+    document.getElementById("menu_lock").onclick = function() {
+        phylo.settings.sync_zoom = !phylo.settings.sync_zoom;
+        if (phylo.settings.sync_zoom && phylo.bound_container[0].models.length > 0 && phylo.bound_container[1].models.length > 0 ){
+            var c0 = phylo.bound_container[0]
+            var t = c0.viewer.d3.zoomTransform(c0.viewer.svg.node())
+            c0.viewer.set_zoom(t.k,t.x,t.y)
+        }
+        update_lock()
+    };
+    document.getElementById("menu_screenshot").onclick = function() {
+        $('#modal_screenshot').modal('show');
+        //$('#modal_phylo_session').modal('show');
+    };
+    document.getElementById("menu_keyboard").onclick = function() {
+        $('#modal_keyboard').modal('show');
+    };
+    document.getElementById("menu_help").onclick = function() {
+        $('#modal_help').modal('show');
+    };
+    // CLICK BINDING
+    document.getElementById("menu_compare_mode").onclick = function() {
+        if (compare){
+            message = '<strong>Attention!</strong> ' +
+            ' All data in the right viewer will be discarded ' +
+            '<button type="button" id="button_accept_compare_delete" class="btn btn-danger btn-sm">Accept</button>'
+            document.getElementById("error_remote_data").style.display = 'block';
+            create_alert('error_remote_data', message)
+            document.getElementById("button_accept_compare_delete").onclick = function() {
+                document.getElementById("error_remote_data").style.display = 'none';
+                document.getElementById("error_remote_data").innerHTML = '';
+                compare = !compare
+                var data = JSON.parse(phylo.get_json_pickle())
+                data.settings.compareMode = compare
+                data.containers = [data.containers[0]]
+                var c  = phylo.containers["containerR"]
+                if (c.interface && c.interface.tooltip_add_tree){
+                    c.interface.tooltip_add_tree.tip.remove()
+                }
+                start_with_json(data)
+            }
+        }
+        else{
+            compare = !compare
+            var c = phylo.containers["containerS"];
+            if (c.interface && c.interface.tooltip_add_tree){
+                c.interface.tooltip_add_tree.tip.remove()
+            }
+            var data = JSON.parse(phylo.get_json_pickle())
+            data.settings.compareMode = compare
+            data.containers.push({'models' : [],
+                'settings'  : null})
+            start_with_json(data)
+        }
+    };
+    document.getElementById("menu_save").onclick = function() {
+        phylo.save_session()
+        refresh()
+    };
+    document.getElementById('load_session_file').onclick = () => {
+        var file = document.getElementById('load_session_input').files[0];
+        $('#modal_phylo_session').modal('hide');
+        if (file) {
+            var reader = new FileReader();
+            reader.readAsText(file, "UTF-8");
+            reader.onload =  (evt) => {
+                var pickle = JSON.parse(evt.target.result)
+                start_with_json(pickle)
+            }
+            reader.onerror = function (evt) {
+                console.log("error reading file")
+            }
+        }
+    }
+    document.getElementById("button_export_screenshot").onclick = function() {
+        if (phylo.settings.compareMode) {
+            var svg1 = phylo.bound_container[0].viewer.d3.select("#svg" + phylo.bound_container[0].viewer.uid)
+            var svg2 = phylo.bound_container[1].viewer.d3.select("#svg" + phylo.bound_container[1].viewer.uid)
+        }
+        else {
+            var svg1 = Object.values(phylo.containers)[0].viewer.d3.select("#svg" + Object.values(phylo.containers)[0].viewer.uid)
+        }
+        if (document.getElementById("btnradiosvg").checked){
+            phylo.screen_shot({ svg1: svg1,svg2: svg2,format: 'svg'})
+        }
+        else if (document.getElementById("btnradiopng").checked){
+            phylo.screen_shot({ svg1: svg1,svg2: svg2,format: 'png'})
+        }
+    };
+    var myModalEl = document.getElementById('modal_share')
+    myModalEl.addEventListener('shown.bs.modal', function (event) {
+        phylo.generate_share_link()
+        var s_url = JSON.parse(JSON.stringify(phylo.session_url));
+        refresh()
+        phylo.session_url = s_url
+        document.getElementById("share_link").innerText = phylo.session_url
+        document.getElementById("share_link").href = phylo.session_url
+    })
+    // SWITCH BINDING
+    $('#switchRF').on('change.bootstrapSwitch', function(e) {
+        phylo.settings.compute_RF = e.target.checked
+        phylo.display_distance_window()
+    });
+    $('#switchClade').on('change.bootstrapSwitch', function(e) {
+        phylo.settings.compute_Clade = e.target.checked
+        phylo.display_distance_window()
+    });
+    $('#switchEuc').on('change.bootstrapSwitch', function(e) {
+        phylo.settings.compute_Euc = e.target.checked
+        phylo.display_distance_window()
+    });
+    var start_phylo = function(compare){
+        if (document.getElementById("containerL")) { document.getElementById("containerL").outerHTML = "";}
+        if (document.getElementById("containerR")) {document.getElementById("containerR").outerHTML = "";}
+        if (document.getElementById("containerS")) {document.getElementById("containerS").outerHTML = "";}
+        var left_con_html = "<div class=\"p-2 flex-grow-1\" id=\"containerL\" style=\"height: 100%; width: 100%; background-color: white; border-right: 1px solid lightgrey\" ></div>"
+        var right_con_html = "<div class=\"p-2 flex-grow-1\" id=\"containerR\" style=\"height: 100%; width: 100%; background-color: white;\"></div>"
+        var single_con_html = "<div class=\"p-2 flex-grow-1\" id=\"containerS\" style=\"height: 100%; width: 100%; background-color: white;\"></div>"
+        phylo.reset()
+        phylo.settings.compareMode = compare;
+        phylo.phylo_embedded = true
+        var m = document.getElementsByTagName('main')[0]
+        if (compare){
+            m.insertAdjacentHTML('beforeend',left_con_html)
+            m.insertAdjacentHTML('beforeend',right_con_html)
+            const c1 = phylo.create_container("containerL")
+            const c2 = phylo.create_container("containerR")
+            phylo.bound_container = [c1,c2];
+            phylo.start()
+        }
+        else {
+            m.insertAdjacentHTML('beforeend', single_con_html)
+            const c1 = phylo.create_container("containerS")
+            phylo.settings.compareMode = compare;
+            phylo.start()
+        }
+        phylo.display_distance_window()
+        return phylo
+    }
+    start_phylo(compare)
+    const entries = new URLSearchParams(window.location.search).entries();
+    for(const entry of entries) {
+        if (entry[0] === 'session'){
+            var l = function (pickle) {
+                pickle = JSON.parse(pickle)
+                start_with_json(pickle)
+                /*
+            for(var key in pickle.settings) {
+                var value = pickle.settings[key];
+                phylo.settings[key] = value;
+            }
+            start_phylo(phylo.settings.compareMode)
+            let cs = Object.values(pickle.containers)
+            let csp = Object.values(phylo.containers)
+            for (var i = 0; i < cs.length; i++) {
+                var ms = cs[i].models
+                for (var j = 0; j < ms.length; j++) {
+                    csp[i].add_tree(ms[j].data, ms[j].settings, false)
+                    csp[i].models[csp[i].models.length-1].add_circularity_back()
+                }
+                container_object = csp[i]
+                container_object.viewer.set_data(container_object.models[container_object.current_model]);
+                container_object.viewer.render(container_object.viewer.hierarchy);
+                container_object.viewer.update_collapse_level(container_object.models[container_object.current_model].settings.collapse_level)
+            }
+            phylo.start(recompute=true)
+            display_distance_menu(phylo.settings.compareMode)
+             */
+            }
+            phylo.get_share_data(entry[1], function (d) {
+                try {
+                    if (JSON.parse(d).result == 'Error'){
+                        throw new Error('Empty received data');
+                    }
+                    l(d)
+                } catch (error) {
+                    document.getElementById("error_remote_data").style.display = 'block';
+                    var message = '<strong>OUPS!</strong>  It seems your data was not found.'
+                    create_alert('error_remote_data', message)
+                }
+            })
+        }
+    }
+    // Make the DIV element draggable:
+    dragElement(document.getElementById("distance_window"));
+    document.getElementById("close_distance_window").addEventListener('click', event => {
+        document.getElementById("distance_window").style.display = 'none'
+        phylo.settings.compute_distance = false;
+    });
+    var doit;
+    window.onresize = function(){
+        clearTimeout(doit);
+        doit = setTimeout(refresh, 300);
+    };
+    //window.addEventListener('resize', refresh);
+    JSON.parse(phylo.get_json_pickle())
+    function dragElement(elmnt) {
+        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+        if (document.getElementById(elmnt.id)) {
+            // if present, the header is where you move the DIV from:
+            document.getElementById(elmnt.id).onmousedown = dragMouseDown;
+        } else {
+            // otherwise, move the DIV from anywhere inside the DIV:
+            elmnt.onmousedown = dragMouseDown;
+        }
+        function dragMouseDown(e) {
+            e = e || window.event;
+            e.preventDefault();
+            // get the mouse cursor position at startup:
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            document.onmouseup = closeDragElement;
+            // call a function whenever the cursor moves:
+            document.onmousemove = elementDrag;
+        }
+        function elementDrag(e) {
+            e = e || window.event;
+            e.preventDefault();
+            // calculate the new cursor position:
+            pos1 = pos3 - e.clientX;
+            pos2 = pos4 - e.clientY;
+            pos3 = e.clientX;
+            pos4 = e.clientY;
+            // set the element's new position:
+            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+        }
+        function closeDragElement() {
+            // stop moving when mouse button is released:
+            document.onmouseup = null;
+            document.onmousemove = null;
+        }
+    }
+    function start_with_json(json){
+        for(var key in json.settings) {
+            var value = json.settings[key];
+            phylo.settings[key] = value;
+        }
+        start_phylo(phylo.settings.compareMode)
+        let cs = Object.values(json.containers)
+        let csp = Object.values(phylo.containers)
+        for (var i = 0; i < cs.length; i++) {
+            var ms = cs[i].models
+            if (ms.length > 0){
+                try {
+                    for (var j = 0; j < ms.length; j++) {
+                        csp[i].add_tree(ms[j].data, ms[j].settings, false)
+                        var m = csp[i].models[csp[i].models.length - 1]
+                        m.zoom = ms[j].zoom
+                        m.add_circularity_back()
+                    }
+                    container_object = csp[i]
+                    container_object.current_model = cs[i].current_model
+                    container_object.viewer.set_data(container_object.models[container_object.current_model]);
+                    container_object.viewer.render(container_object.viewer.hierarchy);
+                    container_object.viewer.update_collapse_level(container_object.models[container_object.current_model].settings.collapse_level)
+                } catch (error) {
+                    document.getElementById("error_remote_data").style.display = 'block';
+                    var message = ' <strong>OUPS!</strong>  It seems the data is corrupted or obselete.'
+                    create_alert('error_remote_data', message)
+                    csp[i].current_model = 0
+                    csp[i].remove_all_trees()
+            }
+            }
+        }
+        phylo.start(recompute=true)
+        display_distance_menu(phylo.settings.compareMode)
+    }
+    function refresh(){
+        var data = JSON.parse(phylo.get_json_pickle())
+        start_with_json(data)
+    }
+    function update_lock(){
+        if (phylo.settings.sync_zoom){
+            document.getElementById('menu_lock').innerHTML = '<i class="bi-lock" style="font-size: 24px;color: white  "></i>'
+        }
+        else {
+            document.getElementById('menu_lock').innerHTML = '<i class="bi-unlock" style="font-size: 24px;color: white  "></i>'
+        }
+    }
+</script>
+</body>
+</html>