phyloio 2.1.0 → 2.2.2

package/src/interface.js

@@ -2,6 +2,7 @@ import * as fs from 'file-saver';
 import * as d3 from 'd3';
 import * as bootstrap from 'bootstrap';
 import * as d3_chrome from 'd3-scale-chromatic';
+import {check_if_color} from "./utils";
 
 // D3 viewer Interface that render UI elements(buttons, slider, menu)
 export default class Interface {
@@ -47,6 +48,10 @@ export default class Interface {
         this.container_d3.selectAll(".empty_message").remove()
         this.container_d3.select('#histogram-legend').remove();
 
+        // remove old meta modal with document. function
+        document.querySelectorAll('#modal_meta_' + this.container_object.uid).forEach((el) => { el.remove() })
+        document.querySelectorAll('#exampleModal' + this.container_object.uid).forEach((el) => { el.remove() })
+
         this.container_d3.select("#menu-node").remove()
 
 /*
@@ -108,6 +113,9 @@ export default class Interface {
         this.add_meta()
         this.add_settings()
         this.add_undo()
+        this.add_redo()
+
+
 
         // COLOR LEGEND
         if (this.api.settings.compareMode || (this.viewer.model.settings.style.color_accessor['node'] !== null && this.viewer.model.settings.style.color_accessor['node'] !== 'Topology'  )){
@@ -421,25 +429,27 @@ export default class Interface {
                 
                 <br>
                 
-                <div class="card">
                 
-                  <div class="card-body">
-                  
-                  <h5> <b>Step 3 (Optional) : Add a mapping file </b> 
-                  <a href="#" id='menu_help_add_tree' >
-                <i class="bi-question-circle"></i>
-            </a> </h5>
-                  
-                  <br>
-                  
-                  STEP3__
-                  
-       
-                </div>
-
-         
-                </div>
                 
+                <div class="card">
+    <div class="card-body">
+        <div style="cursor: pointer;" id="toggleStep3">
+            <h5>
+                <b>Step 3 (Optional): Add a mapping file</b>
+                <a href="#" id="menu_help_add_tree">
+                    <i class="bi-question-circle"></i>
+                </a>
+                <i class="bi-caret-down float-end" id="caretStep3"></i>
+                <small class="float-end" id="expandStep3">Expand</small>
+            </h5>
+        </div>
+        <br>
+        <div id="collapseStep3" style="display: none;">
+            STEP3__
+        </div>
+    </div>
+</div>
+                  
                 <br>
                  
                  <div style="margin: auto; width: fit-content;">
@@ -451,28 +461,29 @@ export default class Interface {
                   </div>
                 
         </div>
-                
+        
+                    
                 
         `
 
 
     }
 
-    add_data_icon(){
+    add_data_icon() {
 
         this.container_d3.select("#exampleModal" + this.container_object.uid).remove()
 
         var b = this.top_left.append('button')
             .attr('class', '  dashed_button')
-            .attr('id', 'buttonmodal_' + this.container_object.div_id )
+            .attr('id', 'buttonmodal_' + this.container_object.div_id)
             .attr('data-bs-toggle', 'modal')
             .attr('data-bs-target', '#exampleModal' + this.container_object.uid)
             .attr('data-bs-placement', 'right')
             .attr('title', 'Add a new tree')
             .append("div")
-            .attr("class","label")
+            .attr("class", "label")
 
-            b.html("  <i class='bi bi-plus' style='color:#888'></i> Add tree")
+        b.html("  <i class='bi bi-plus' style='color:#888'></i> Add tree")
 
         let mod_html = this.get_modal_template()
 
@@ -482,7 +493,6 @@ export default class Interface {
         mod_html = mod_html.replace('STEP3__', this.get_modal_meta_corpus())
 
 
-
         mod_html = mod_html.replace('exampleFormControlTextarea1s', 'exampleFormControlTextarea1s' + this.container_object.uid)
         mod_html = mod_html.replace('add_tree_file_input', 'add_tree_file_input' + this.container_object.uid)
         mod_html = mod_html.replace('exampleModal', 'exampleModal' + this.container_object.uid)
@@ -506,32 +516,53 @@ export default class Interface {
         mod_html = mod_html.replace('mapping_check_leaf', 'tree_adder_mapping_check_leaf' + this.container_object.uid)
         mod_html = mod_html.replace('mapping_apply_to_all', 'tree_adder_mapping_apply_to_all' + this.container_object.uid)
 
+
         mod_html = mod_html.replaceAll('add_mapping_ref_select', 'add_mapping_ref_select' + this.container_object.uid)
 
-        document.getElementById(this.container_object.div_id).insertAdjacentHTML('afterend',mod_html)
+        mod_html = mod_html.replace('collapseStep3', 'collapse3' + this.container_object.uid)
+        mod_html = mod_html.replace('toggleStep3', 'toggle3' + this.container_object.uid)
+        mod_html = mod_html.replace('caretStep3', 'caret3' + this.container_object.uid)
+        mod_html = mod_html.replace('expandStep3', 'expand3' + this.container_object.uid)
+
+
+        document.getElementById(this.container_object.div_id).insertAdjacentHTML('afterend', mod_html)
+
+        // Add code for the toggle functionality
 
+        const toggleElement = document.getElementById('toggle3' + this.container_object.uid);
+        const contentElement = document.getElementById('collapse3' + this.container_object.uid);
+        const caretElement = document.getElementById('caret3'  + this.container_object.uid);
+        const expandTextElement = document.getElementById('expand3' + this.container_object.uid);
+
+        toggleElement.addEventListener('click', () => {
+            const isHidden = contentElement.style.display === 'none';
+            contentElement.style.display = isHidden ? 'block' : 'none';
+            caretElement.className = isHidden ? 'bi-caret-up float-end' : 'bi-caret-down float-end';
+            expandTextElement.textContent = isHidden ? 'Collapse' : 'Expand';
+        });
 
 
-        var modmod = document.getElementById('exampleModal'+ this.container_object.uid);
 
-        var thaty  = this
+        var modmod = document.getElementById('exampleModal' + this.container_object.uid);
 
-        const add_tree_helpers = function(container_object, str, format, mapping){
+        var thaty = this
+
+        const add_tree_helpers = function (container_object, str, format, mapping) {
 
             var mapping = (typeof mapping == 'undefined') ? false : mapping;
 
-            container_object.add_tree(str, {'data_type':format})
-            container_object.current_model =  container_object.models.length-1
+            container_object.add_tree(str, {'data_type': format})
+            container_object.current_model = container_object.models.length - 1
 
             // check if internal_for_branch is checked or not and setup default_internal_label_is_for_branch
 
-            if (document.getElementById('internal_for_branch' + container_object.uid).checked){
+            if (document.getElementById('internal_for_branch' + container_object.uid).checked) {
                 container_object.models[container_object.current_model].settings.edge_related_data.push('Data');
             }
 
-            if (mapping !== false){
+            if (mapping !== false) {
 
-                if (mapping.parameters.apply_to_all){
+                if (mapping.parameters.apply_to_all) {
 
                     // apply add_meta_leaves to all models in the container
                     container_object.models.forEach((model) => {
@@ -539,10 +570,10 @@ export default class Interface {
                         model.settings.use_meta_for_leaf = mapping.parameters.use_meta_for_leaf
                         model.settings.use_meta_for_node = mapping.parameters.use_meta_for_node
 
-                        if (mapping.parameters.use_meta_for_leaf){
+                        if (mapping.parameters.use_meta_for_leaf) {
                             model.add_meta_leaves(mapping.meta, mapping.parameters.headers, container_object.api, mapping.parameters.reference)
                         }
-                        if (mapping.parameters.use_meta_for_node){
+                        if (mapping.parameters.use_meta_for_node) {
                             model.add_meta_nodes(mapping.meta, mapping.parameters.headers, container_object.api, mapping.parameters.reference)
                         }
 
@@ -557,12 +588,11 @@ export default class Interface {
                     moddy.settings.use_meta_for_leaf = mapping.parameters.use_meta_for_leaf
                     moddy.settings.use_meta_for_node = mapping.parameters.use_meta_for_node
 
-
-                    if (moddy.settings.use_meta_for_leaf){
+                    if (moddy.settings.use_meta_for_leaf) {
                         moddy.add_meta_leaves(mapping.meta, mapping.parameters.headers, container_object.api, mapping.parameters.reference)
                     }
 
-                    if (moddy.settings.use_meta_for_node){
+                    if (moddy.settings.use_meta_for_node) {
                         moddy.add_meta_nodes(mapping.meta, mapping.parameters.headers, container_object.api, mapping.parameters.reference)
                     }
 
@@ -573,7 +603,7 @@ export default class Interface {
             }
 
 
-            document.querySelector('#exampleModal'+ container_object.uid).style.display =  'none'
+            document.querySelector('#exampleModal' + container_object.uid).style.display = 'none'
             document.querySelectorAll('.modal-backdrop').forEach(elem => {
                 elem.parentNode.removeChild(elem);
             });
@@ -583,17 +613,17 @@ export default class Interface {
             container_object.viewer.render(container_object.viewer.hierarchy);
             //container_object.viewer.update_collapse_level(container_object.models[container_object.current_model].settings.collapse_level)
 
-            if (mapping){
+            if (mapping) {
                 thaty.open_color_settings()
             }
 
 
-            if (thaty.api.settings.compute_distance && thaty.api.bound_container.includes(thaty)){
+            if (thaty.api.settings.compute_distance && thaty.api.bound_container.includes(thaty)) {
                 thaty.api.send_worker_distance()
             }
         }
 
-        const add_data_from_modal =  (format) => {
+        const add_data_from_modal = (format) => {
 
             // mapping information
             var mapping_file = document.getElementById('tree_adder_modal_add_mapping_file_input' + that.container_object.uid).files[0];
@@ -601,7 +631,7 @@ export default class Interface {
 
             let s = document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value
 
-            if (s.length > 0){
+            if (s.length > 0) {
 
                 if (mapping_file) {
 
@@ -615,30 +645,29 @@ export default class Interface {
                         var meta = []
                         var ref_id = parameters.reference
 
-                        if (mapping_file.name.split('.').pop() == 'tsv'){
-                            d3.tsvParse(event.target.result, (d) => {meta[d[ref_id]] = d});
+                        if (mapping_file.name.split('.').pop() == 'tsv') {
+                            d3.tsvParse(event.target.result, (d) => {
+                                meta[d[ref_id]] = d
+                            });
+                        } else {
+                            d3.csvParse(event.target.result, (d) => {
+                                meta[d[ref_id]] = d
+                            });
                         }
-                        else{
-                            d3.csvParse(event.target.result, (d) => {meta[d[ref_id]] = d});
-                        }
-
 
 
                         add_tree_helpers(this.container_object, s, format, {'meta': meta, 'parameters': parameters})
                         return
 
 
-
                     });
                     reader.readAsText(mapping_file);
 
 
-                }
-                else {
+                } else {
                     add_tree_helpers(this.container_object, s, format)
-                    return}
-
-
+                    return
+                }
 
 
             }
@@ -648,7 +677,7 @@ export default class Interface {
             if (file) {
                 var reader = new FileReader();
                 reader.readAsText(file, "UTF-8");
-                reader.onload =  (evt) => {
+                reader.onload = (evt) => {
 
                     if (mapping_file) {
                         var parameters = that.get_mapping_parameter_from_UI(true)
@@ -662,26 +691,31 @@ export default class Interface {
                             var ref_id = parameters.reference
 
 
-                            if (mapping_file.name.split('.').pop() == 'tsv'){
-                                d3.tsvParse(event.target.result, (d) => {meta[d[ref_id]] = d});
-                            }
-                            else{
-                                d3.csvParse(event.target.result, (d) => {meta[d[ref_id]] = d});
+                            if (mapping_file.name.split('.').pop() == 'tsv') {
+                                d3.tsvParse(event.target.result, (d) => {
+                                    meta[d[ref_id]] = d
+                                });
+                            } else {
+                                d3.csvParse(event.target.result, (d) => {
+                                    meta[d[ref_id]] = d
+                                });
                             }
 
-                            add_tree_helpers(this.container_object, evt.target.result, format, {'meta': meta, 'parameters': parameters})
+                            add_tree_helpers(this.container_object, evt.target.result, format, {
+                                'meta': meta,
+                                'parameters': parameters
+                            })
                             return
 
 
-
                         });
                         reader.readAsText(mapping_file);
 
 
-                    }
-                    else {
+                    } else {
                         add_tree_helpers(this.container_object, evt.target.result, format)
-                        return}
+                        return
+                    }
 
 
                 }
@@ -691,7 +725,6 @@ export default class Interface {
             }
 
 
-
         }
 
         document.getElementById('modal_add_tree_final_button' + this.container_object.uid).onclick = () => {
@@ -703,35 +736,34 @@ export default class Interface {
         }
 
         modmod.getElementsByClassName('t1')[0].onclick = () => {
-            document.getElementById("exampleFormControlTextarea1s"+ this.container_object.uid).value = this.examples.small1
+            document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value = this.examples.small1
             document.getElementById('add_tree_str_select' + this.container_object.uid).value = 'newick'
         };
 
         modmod.getElementsByClassName('t1')[0].onclick = () => {
-            document.getElementById("exampleFormControlTextarea1s"+ this.container_object.uid).value = this.examples.small1
+            document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value = this.examples.small1
             document.getElementById('add_tree_str_select' + this.container_object.uid).value = 'newick'
         };
 
         modmod.getElementsByClassName('t2')[0].onclick = () => {
-            document.getElementById("exampleFormControlTextarea1s"+ this.container_object.uid).value = this.examples.small2
+            document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value = this.examples.small2
             document.getElementById('add_tree_str_select' + this.container_object.uid).value = 'newick'
         };
 
         modmod.getElementsByClassName('tbig')[0].onclick = () => {
-            document.getElementById("exampleFormControlTextarea1s"+ this.container_object.uid).value = this.examples.big
+            document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value = this.examples.big
             document.getElementById('add_tree_str_select' + this.container_object.uid).value = 'newick'
         };
 
         modmod.getElementsByClassName('nhx_ex')[0].onclick = () => {
-            document.getElementById("exampleFormControlTextarea1s"+ this.container_object.uid).value = this.examples.nhx
+            document.getElementById("exampleFormControlTextarea1s" + this.container_object.uid).value = this.examples.nhx
             document.getElementById('add_tree_str_select' + this.container_object.uid).value = 'nhx'
         };
 
 
         // META DATA UPLOADER
-        document.getElementById('upload_mapping_validation'+ this.container_object.uid).style.display = 'none'
-        document.getElementById('upload_mapping_close'+ this.container_object.uid).style.display = 'none'
-
+        document.getElementById('upload_mapping_validation' + this.container_object.uid).style.display = 'none'
+        document.getElementById('upload_mapping_close' + this.container_object.uid).style.display = 'none'
 
 
         var x = modmod.getElementsByClassName('card')
@@ -742,7 +774,7 @@ export default class Interface {
         // Add JS for modal corpus
         var that = this
 
-        document.getElementById('tree_adder_modal_add_mapping_file_input' + this.container_object.uid).onchange = function() {
+        document.getElementById('tree_adder_modal_add_mapping_file_input' + this.container_object.uid).onchange = function () {
             let input = this.files[0];
 
             if (input) {
@@ -755,17 +787,17 @@ export default class Interface {
 
                 reader.addEventListener("load", parseFile, false);
                 reader.readAsText(input);
-                function parseFile(){
+
+                function parseFile() {
 
                     // load data
-                    if (input.name.split('.').pop() == 'tsv'){
-                        data = d3.tsvParse(reader.result, function(d){
+                    if (input.name.split('.').pop() == 'tsv') {
+                        data = d3.tsvParse(reader.result, function (d) {
                             return d;
                         });
-                    }
-                    else{
+                    } else {
 
-                        data = d3.csvParse(reader.result, function(d){
+                        data = d3.csvParse(reader.result, function (d) {
                             return d;
                         });
 
@@ -776,11 +808,13 @@ export default class Interface {
                     var numerisator = {}
                     numerisator['id'] = 'cat'
                     data['columns'].forEach((currentElement) => {
-                        if (currentElement != 'id'){  numerisator[currentElement] = 'num'}
+                        if (currentElement != 'id') {
+                            numerisator[currentElement] = 'num'
+                        }
                     })
                     data.forEach((currentElement) => {
                         for (var key of Object.keys(numerisator)) {
-                            if (isNaN(currentElement[key])){
+                            if (isNaN(currentElement[key])) {
                                 numerisator[key] = 'cat'
                             }
                         }
@@ -791,7 +825,7 @@ export default class Interface {
                     var select = document.getElementById('add_mapping_ref_select' + that.container_object.uid)
                     select.innerHTML = '';
 
-                    for (var key of Object.keys(numerisator)){
+                    for (var key of Object.keys(numerisator)) {
                         var opt = document.createElement('option');
                         opt.value = key;
                         opt.innerHTML = key;
@@ -799,13 +833,12 @@ export default class Interface {
                     }
 
 
-
-
                     // creates radios
-                    var radio_container = document.getElementById( 'tree_adder_mod_meta_card2_radio' + that.container_object.uid)
+                    var radio_container = document.getElementById('tree_adder_mod_meta_card2_radio' + that.container_object.uid)
                     radio_container.innerHTML = '';
 
-                    var get_el = function(){return `
+                    var get_el = function () {
+                        return `
                         
                             <div  style = "padding: 12px 24px 0;">  <span><b style = "margin-right: 12px" > Column:  </b> "NAME_"</span>  <br>
 
@@ -824,7 +857,7 @@ export default class Interface {
                     </div>
                     
                     <div class="form-check" style="margin-left: 24px">
-                        <input class="form-check-input"  name="flexRadioDefault" type="radio" value="color" id="RADIO_3">
+                        <input class="form-check-input"  name="flexRadioDefault" type="radio" value="color" id="RADIO_3" ATTR_COLOR>
                             <label class="form-check-label" for="RADIO_3">
                                 Color
                             </label>
@@ -837,36 +870,43 @@ export default class Interface {
               
                     
                 </div>
-                        `}
+                        `
+                    }
 
-                    for (var key of Object.keys(numerisator)){
+                    // clean potential old radiobox
+
+                      for (var key of Object.keys(numerisator)) {
 
                         var rad = get_el()
 
 
                         rad = rad.replace('NAME_', key)
-                        rad = rad.replaceAll('flexRadioDefault', 'tree_adder_flexRadioDefault_' + key +  that.container_object.uid )
-                        rad = rad.replace('RADIO_1',  that.container_object.uid + 'mapping_header_radiotree_adder_1' +  '__' + key )
-                        rad = rad.replace('RADIO_2',  that.container_object.uid + 'mapping_header_radiotree_adder_2'  + '__' + key )
-                        rad = rad.replace('RADIO_3',  that.container_object.uid + 'mapping_header_radiotree_adder_3'  + '__' + key )
+                        rad = rad.replaceAll('flexRadioDefault', 'tree_adder_flexRadioDefault_' + key + that.container_object.uid)
+                        rad = rad.replace('RADIO_1', that.container_object.uid + 'mapping_header_radiotree_adder_1' + '__' + key)
+                        rad = rad.replace('RADIO_2', that.container_object.uid + 'mapping_header_radiotree_adder_2' + '__' + key)
+                        rad = rad.replace('RADIO_3', that.container_object.uid + 'mapping_header_radiotree_adder_3' + '__' + key)
 
 
-
-                        if (numerisator[key] == 'num'){
+                        if (numerisator[key] == 'num') {
                             rad = rad.replace('ATTR_NUM', 'checked')
                             rad = rad.replace('ATTR_CAT', '')
+                            rad = rad.replace('ATTR_COLOR', '')
                         }
-                        else{
+                        if (check_if_color(key)) {
+                            rad = rad.replace('ATTR_NUM', '')
+                            rad = rad.replace('ATTR_CAT', '')
+                            rad = rad.replace('ATTR_COLOR', 'checked')
+                        } else {
                             rad = rad.replace('ATTR_NUM', 'disabled')
                             rad = rad.replace('ATTR_CAT', 'checked')
+                            rad = rad.replace('ATTR_COLOR', '')
                         }
 
 
-
-                        radio_container.insertAdjacentHTML('beforeend',rad)
+                        radio_container.insertAdjacentHTML('beforeend', rad)
 
                     }
-                    radio_container.insertAdjacentHTML('beforeend','<br>')
+                    radio_container.insertAdjacentHTML('beforeend', '<br>')
 
                 }
 
@@ -874,19 +914,16 @@ export default class Interface {
 
         };
 
-
-        document.getElementById("menu_help_add_tree").onclick = function() {
+        document.getElementById("menu_help_add_tree").onclick = function () {
             $('#modal_help').modal('show');
 
         };
 
 
-
-
     }
 
-    get_modal_template(){
-        return  `
+    get_modal_template() {
+        return `
             <div class="modal" id="exampleModal" tabindex="-1">
                 <div class="modal-dialog modal-dialog-centered modal-lg">
                     <div class="modal-content">
@@ -1050,7 +1087,11 @@ export default class Interface {
                 edit_name_ok.style.display = 'none';
                 edit_name_trash.style.display = 'none';
                 var old_name = this.viewer.model.get_name()
-                this.container_object.add_action('Rename tree',  this.viewer.model, this.viewer.model.set_name, [old_name], true )
+
+                var undo = {'name': 'Rename tree', 'fonction_obj': this.viewer.model, 'fonct':  this.viewer.model.set_name, 'argu': [old_name]}
+                var redo = {'name': 'Rename tree', 'fonction_obj': this.viewer.model, 'fonct':  this.viewer.model.set_name, 'argu': [edit_name.textContent]}
+                this.container_object.add_action(undo, redo, true)
+
                 this.viewer.model.set_name(edit_name.textContent)
                 return false;
             }
@@ -1084,7 +1125,11 @@ export default class Interface {
 
         edit_name_ok.addEventListener('click', (event) => {
             var old_name = this.viewer.model.get_name()
-            this.container_object.add_action('Rename tree',  this.viewer.model, this.viewer.model.set_name, [old_name], true )
+
+            var undo = {'name': 'Rename tree', 'fonction_obj': this.viewer.model, 'fonct':  this.viewer.model.set_name, 'argu': [old_name]}
+            var redo = {'name': 'Rename tree', 'fonction_obj': this.viewer.model, 'fonct':  this.viewer.model.set_name, 'argu': [edit_name.textContent]}
+            this.container_object.add_action(undo, redo, true)
+
             this.viewer.model.set_name(edit_name.textContent)
 
         });
@@ -1640,8 +1685,7 @@ export default class Interface {
                            </div>
                            
                             <p style="padding: 0 24px;"><small>
-                            <b>Accepted format:</b> '.csv' or '.tsv' and must contain column names in the first row. 
-                            You can choose a column as reference for the mapping using the selection widget below, where reference name should matched the leaves and nodes names in the input file. 
+                            <b>Accepted format:</b> .csv or .tsv with column names in the first row. Use the selector below to choose a reference column matching leaf or node names in the input file.
                             </small></p>
                             
                             <div class="text-center" style="margin-left: 48px;margin-right: 48px;">
@@ -1762,7 +1806,6 @@ export default class Interface {
         mod_html = mod_html.replaceAll('Step 3.1', 'Step 1')
         mod_html = mod_html.replaceAll('Step 3.2', 'Step 2')
 
-
         document.getElementById(this.container_object.div_id).insertAdjacentHTML('afterend',mod_html)
 
         // Add JS for modal corpus
@@ -1848,7 +1891,7 @@ export default class Interface {
                     </div>
                     
                     <div class="form-check" style="margin-left: 24px">
-                        <input class="form-check-input"  name="flexRadioDefault" type="radio" value="color" id="RADIO_3">
+                        <input class="form-check-input"  name="flexRadioDefault" type="radio" value="color" id="RADIO_3" ATTR_COLOR>
                             <label class="form-check-label" for="RADIO_3">
                                 Color
                             </label>
@@ -1875,14 +1918,20 @@ export default class Interface {
                         rad = rad.replace('RADIO_3',  that.container_object.uid + 'mapping_header_radio3'  + '__' + key )
 
 
-
-                        if (numerisator[key] == 'num'){
+                        if (numerisator[key] == 'num') {
                             rad = rad.replace('ATTR_NUM', 'checked')
                             rad = rad.replace('ATTR_CAT', '')
+                            rad = rad.replace('ATTR_COLOR', '')
+                        }
+                        if (check_if_color(numerisator[key])) {
+                            rad = rad.replace('ATTR_NUM', '')
+                            rad = rad.replace('ATTR_CAT', '')
+                            rad = rad.replace('ATTR_COLOR', 'checked')
                         }
-                        else{
+                        else {
                             rad = rad.replace('ATTR_NUM', 'disabled')
                             rad = rad.replace('ATTR_CAT', 'checked')
+                            rad = rad.replace('ATTR_COLOR', '')
                         }
 
 
@@ -1960,14 +2009,8 @@ export default class Interface {
 
                     }
 
-
-
-
-
-
                     that.viewer.interface = new Interface(that.viewer, that.viewer.container_object)
 
-
                     that.open_color_settings()
 
                 });
@@ -2016,10 +2059,10 @@ export default class Interface {
             var prefix = this.container_object.uid + 'mapping_header_radio'
         }
 
-
         var checkies = document.querySelectorAll(`[id^="${prefix}"]`);
 
 
+
         checkies.forEach(element => {
 
             if (element.checked) {
@@ -2095,7 +2138,7 @@ export default class Interface {
         // ADD THE ACCORDION SYSTEM
 
         this.menu_exportimage_b = this.menu_export.append('button').attr('class', 'accordion').text("Export as Graphic")
-        this.menu_exportimage_p = this.menu_export.append('div').attr('class', 'panel').append("div").style("padding", "14px")
+        this.menu_exportimage_p = this.menu_export.append('div').attr('class', 'panel').append("div").style("padding", "6px")
 
         this.export_as = this.menu_exportimage_p.append('div')
             .style('display', 'flex')
@@ -2123,7 +2166,7 @@ export default class Interface {
 
 
         this.menu_exportfile_b = this.menu_export.append('button').attr('class', 'accordion').text("Export as Text")
-        this.menu_exportfile_p = this.menu_export.append('div').attr('class', 'panel').append("div").style("padding", "14px")
+        this.menu_exportfile_p = this.menu_export.append('div').attr('class', 'panel').append("div").style("padding", "6px")
 
         this.export_as = this.menu_exportfile_p.append('div')
             .style('display', 'flex')
@@ -2182,25 +2225,28 @@ export default class Interface {
 
     // UNDO
     add_undo(){
+
         var divybuty = this.tr_buttons.append('button')
             .attr('class', ' square_button')
             .attr('id', 'buttonundo_' + this.container_object.div_id )
             .attr('data-bs-placement', 'bottom')
             .attr('title',  d=> { return  this.container_object.history_actions.length > 0 ? 'Undo ' + this.container_object.get_last_action().name :  'Nothing to undo' })
             .style('margin', '2px')
-            .on("click", d => {
-                this.api.undoing = true
+           .on("click", d => {
+                this.api.undoing = true;
                 var cta = this.container_object.pop_last_action();
-                if (cta) {
+                cta = cta.undo
+                if (cta && typeof cta.fonct === 'function') {
                     cta.fonct.apply(cta.fonction_obj, cta.argu);
 
-                    if (cta.refresh_interface){
-                        let empty = this.container_object.models.length <= 0
-                        this.container_object.interface = new Interface(this.viewer, this.container_object, empty )
+                    if (cta.refresh_interface) {
+                        let empty = this.container_object.models.length <= 0;
+                        this.container_object.interface = new Interface(this.viewer, this.container_object, empty);
                     }
-
+                } else {
+                    console.error('Invalid cta or cta.fonct:', cta);
                 }
-                this.api.undoing = false
+                this.api.undoing = false;
             })
 
 
@@ -2221,6 +2267,43 @@ export default class Interface {
 
     }
 
+    add_redo(){
+
+        var divybuty = this.tr_buttons.append('button')
+            .attr('class', ' square_button')
+            .attr('id', 'buttonredo_' + this.container_object.div_id )
+            .attr('data-bs-placement', 'bottom')
+            .attr('title',  d=> { return  this.container_object.history_actions.length > 0 ? 'Redo ' + this.container_object.get_last_action().redo.name :  'Nothing to redo' })
+            .style('margin', '2px')
+            .on("click", d => {
+                var cta = this.container_object.pop_redo_action();
+                cta = cta.redo
+                if (cta && typeof cta.fonct === 'function') {
+                    cta.fonct.apply(cta.fonction_obj, cta.argu);
+
+                    if (cta.refresh_interface) {
+                        let empty = this.container_object.models.length <= 0;
+                        this.container_object.interface = new Interface(this.viewer, this.container_object, empty);
+                    }
+                } else {
+                    console.error('Invalid cta or cta.fonct:', cta);
+                }
+            })
+
+        divybuty.append("div")
+            .attr("class","label")
+            .append('i')
+            .style('color', '#888')
+            .attr('class', 'bi-arrow-clockwise')
+
+        divybuty.append('p')
+            .text('Redo')
+            .style('font-size', 'xx-small')
+
+        this.tooltip_undo = new bootstrap.Tooltip(document.getElementById('buttonredo_' + this.container_object.div_id))
+
+    }
+
     toggle_select_node_face(cid){
 
         var acc = document.getElementById("accordion_branch"+cid)
@@ -2297,17 +2380,17 @@ export default class Interface {
         this.menu_tree_b = this.menu_settings.append('button').attr('id', 'accordion_branch'+this.container_object.uid).attr('class', 'accordion').text("Branches & Labels")
         this.menu_tree_p =  this.menu_settings.append('div').attr('class', 'panel').append("div").style("padding", "14px")
 
-        this.menu_search_b = this.menu_settings.append('button').attr('id', 'accordion_branch'+this.container_object.uid).attr('class', 'accordion').text("Search")
-        this.menu_search_p =  this.menu_settings.append('div').attr('class', 'panel').append("div").style("padding", "14px")
 
         //this.menu_metadata_b = this.menu_settings.append('button').attr('id', 'accordion_color'+this.container_object.uid).attr('class', 'accordion').text("Additional Information")
         //this.menu_metadata_p =  this.menu_settings.append('div').attr('class', 'panel').append("div").style("padding", "14px")
 
         this.menu_coloring_b = this.menu_settings.append('button').attr('id', 'accordion_color'+this.container_object.uid).attr('class', 'accordion').text("Coloring")
         this.menu_coloring_panel =  this.menu_settings.append('div').attr('class', 'panel').attr('id', 'coloring_panel' + this.container_object.uid)
-
         this.menu_coloring_p = this.menu_coloring_panel.append("div").style("padding", "14px").attr('id', 'coloring_p' + this.container_object.uid)
 
+        this.menu_search_b = this.menu_settings.append('button').attr('id', 'accordion_branch'+this.container_object.uid).attr('class', 'accordion').text("Search options")
+        this.menu_search_p =  this.menu_settings.append('div').attr('class', 'panel').append("div").style("padding", "14px")
+
         if (this.viewer.model.settings.has_histogram_data && this.viewer.model.settings.show_histogram ) {
         this.menu_stack_b = this.menu_settings.append('button').attr('class', 'accordion').text("Bar Graph")
         this.menu_stack_p =  this.menu_settings.append('div').attr('class', 'panel').append("div").style("padding", "14px")
@@ -2420,7 +2503,7 @@ export default class Interface {
 
         // ADD TOGGLE BRANCH LENGTH
         if(this.viewer.model.settings.has_branch_lenght){
-            this.add_swicth_UI(this.menu_general_p, this.viewer.model.settings.use_branch_lenght,"Use branch length",   this.viewer.toggle_use_length.bind(this.viewer))
+            this.add_swicth_UI(this.menu_general_p, !this.viewer.model.settings.use_branch_lenght,"Ignore branch length",   this.viewer.toggle_use_length.bind(this.viewer))
         }
 
         this.add_swicth_UI(this.menu_general_p, this.viewer.model.settings.align_tip,"Align leaves",   this.viewer.toggle_align_tip.bind(this.viewer))
@@ -2437,8 +2520,11 @@ export default class Interface {
   */
 
 
-        this.buttons_height = this.add_quartet_buttons(this.menu_general_p, "Tree height", "buton_vertical_size_", this.container_object.modify_node_size_percent, 'vertical')
-        this.buttons_width = this.add_quartet_buttons(this.menu_general_p, "Tree width", "buton_horyzontal_size_", this.container_object.modify_node_size_percent, 'horizontal')
+        //this.buttons_height = this.add_quartet_buttons(this.menu_general_p, "Tree height", "buton_vertical_size_", this.container_object.modify_node_size_percent, 'vertical')
+        //this.buttons_width = this.add_quartet_buttons(this.menu_general_p, "Tree width", "buton_horyzontal_size_", this.container_object.modify_node_size_percent, 'horizontal')
+
+        this.add_quartet_buttons_single_line(this.menu_general_p, "Tree height", "buton_vertical_size_", this.container_object.modify_node_size_percent, 'vertical')
+        this.add_quartet_buttons_single_line(this.menu_general_p, "Tree width", "buton_horyzontal_size_", this.container_object.modify_node_size_percent, 'horizontal')
 
 
         // ADD SELECT LEFT NODE LABEL
@@ -2448,6 +2534,9 @@ export default class Interface {
         //this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.display_internal_label,"Show internal label",   this.viewer.toggle_internal_label.bind(this.viewer))
 
 
+        // ADD TOGGLE show internal name for triangle
+        this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.use_internal_node_name_for_triangles,"Show collapsed subtrees name",   this.viewer.toggle_triangle_name.bind(this.viewer))
+
         // ADD TOGGLE tooltips
         this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.subsample_label,"Subsample labels",   this.viewer.toggle_subsample.bind(this.viewer))
 
@@ -2458,7 +2547,7 @@ export default class Interface {
         this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.display_leaves,"Show node labels",   this.viewer.toggle_node_labels.bind(this.viewer))
 
         // ADD TOGGLE tooltips
-        this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.show_tooltips,"Show tooltips",   this.viewer.toggle_tooltips.bind(this.viewer))
+        this.add_swicth_UI(this.menu_tree_p, this.viewer.model.settings.show_tooltips,"Show data tooltips",   this.viewer.toggle_tooltips.bind(this.viewer))
 
         if (this.viewer.model.settings.has_duplications){
             // ADD TOGGLE DUPLICATION
@@ -2466,10 +2555,12 @@ export default class Interface {
 
         }
 
-        this.add_quartet_buttons(this.menu_tree_p, "Node radius", "buton_node_radius_", this.container_object.update_node_radius_percent )
+        //this.add_quartet_buttons(this.menu_tree_p, "Node radius", "buton_node_radius_", this.container_object.update_node_radius_percent )
+        this.add_quartet_buttons_single_line(this.menu_tree_p, "Node radius", "buton_node_radius_", this.container_object.update_node_radius_percent)
 
 
-        this.add_quartet_buttons(this.menu_tree_p, "Line width", "buton_line_width_", this.container_object.update_line_width_percent)
+        //this.add_quartet_buttons(this.menu_tree_p, "Line width", "buton_line_width_", this.container_object.update_line_width_percent)
+        this.add_quartet_buttons_single_line(this.menu_tree_p, "Line width", "buton_line_width_", this.container_object.update_line_width_percent)
 
 
 
@@ -2678,12 +2769,137 @@ export default class Interface {
         }
         else {
             drop.style('float','right').append('label').text("No Data available");
-            this.menu_coloring_p.append('br')
+            container_div.append('br')
 
         }
 
     }
 
+    add_color_collapsing(container_div) {
+
+        var that = this;
+
+        // Add button for collapse uncolored taxon
+        this.collapse_color_button_div = container_div.append('div')
+            .style('display', 'flex')
+            .style('margin-top', '0px')
+
+
+        this.collapse_color_button_div.append('button')
+            .attr('class', ' square_button')
+            .attr('id', 'collapse_color_search' + this.viewer.uid)
+            .on("click", d => {
+                this.container_object.collapse_node_not_colored()
+                this.viewer.build_d3_cluster()
+                this.viewer.render(this.viewer.hierarchy)
+                this.viewer.maximise_zoom()
+            })
+            .style('margin', '12px 0px')
+            .style('flex-grow', '1')
+            .append("text")
+            .text("Collapse uncolored subtrees ")
+
+        // Add select for select uncolored
+
+        var color_triangle_div = container_div.append('div')
+            .style('display','flex')
+            .style('float', 'right')
+
+
+        var options_triangle = ['Leaves', 'Nodes', 'Both'];
+
+        color_triangle_div.append('label')
+            .text("Using")
+            .style('margin-right', '8px')
+
+        var selectcoloring_triangle = color_triangle_div.append('select')
+            .attr('id','selectcol_uncol' + this.container_object.uid )
+            .attr('class','select')
+            .style('float','right')
+            .on('change', function(){
+                that.viewer.model.settings.selected_collapse_uncolored = this.value;
+
+                /*
+                that.container_object.collapse_node_not_colored()
+                that.viewer.build_d3_cluster()
+                that.viewer.render(that.viewer.hierarchy)
+                that.viewer.maximise_zoom()
+
+                 */
+
+            })
+
+
+        selectcoloring_triangle.selectAll('option').data(options_triangle).enter()
+            .append('option')
+            .attr('value', function (d) {
+                return d; })
+            .property("selected", (d) => { return d == this.viewer.model.settings.selected_collapse_uncolored })
+            .text(function (d) { return d; });
+
+        container_div.append('br')
+
+
+        // Add button for collapse unicolored taxon
+        this.collapse_unicolor_button_div = container_div.append('div')
+            .style('display', 'flex')
+            .style('margin-top', '0px')
+
+        this.collapse_unicolor_button_div.append('button')
+            .attr('class', ' square_button')
+            .attr('id', 'collapse_unicolor_search' + this.viewer.uid)
+            .on("click", d => {
+                this.container_object.collapse_node_same_color()
+                this.viewer.build_d3_cluster()
+                this.viewer.render(this.viewer.hierarchy)
+                this.viewer.maximise_zoom()
+            })
+            .style('margin', '12px 0px')
+            .style('flex-grow', '1')
+            .append("text")
+            .text("Collapse monocolored subtrees ")
+
+        // Add select for select unicolored
+
+        var color_unicolor_div = container_div.append('div')
+            .style('display','flex')
+            .style('float', 'right')
+
+        var _options_triangle = ['Leaves', 'Nodes', 'Both'];
+
+        color_unicolor_div.append('label')
+            .text("Using")
+            .style('margin-right', '8px')
+
+        var selectcoloring_mono = color_unicolor_div.append('select')
+            .attr('id','selectcol_uncol' + this.container_object.uid )
+            .attr('class','select')
+            .style('float','right')
+
+            .on('change', function(){
+                that.viewer.model.settings.selected_collapse_monocolored = this.value;
+                /*
+                that.container_object.collapse_node_same_color()
+                that.viewer.build_d3_cluster()
+                that.viewer.render(that.viewer.hierarchy)
+                that.viewer.maximise_zoom()
+
+                 */
+               })
+
+
+
+
+        selectcoloring_mono.selectAll('option').data(_options_triangle).enter()
+            .append('option')
+            .attr('value', function (d) {
+                return d; })
+            .property("selected", (d) => { return d == this.viewer.model.settings.selected_collapse_monocolored })
+            .text(function (d) { return d; });
+
+        container_div.append('br')
+    }
+
     add_settings_coloring(){
 
         var that = this;
@@ -2847,51 +3063,15 @@ export default class Interface {
 
         this.add_node_coloring_UI(this.menu_coloring_p)
 
-
         this.menu_coloring_p.append('hr').style('margin', '20px 0px 4px 0px')
 
-        // Add button for collapse uncolored taxon
-        this.collapse_color_button_div = this.menu_coloring_p.append('div')
-            .style('display', 'flex')
-            .style('margin-top', '0px')
-
-
-        this.collapse_color_button_div.append('button')
-            .attr('class', ' square_button')
-            .attr('id', 'collapse_color_search' + this.viewer.uid)
-            .on("click", d => {
-                this.container_object.collapse_node_not_colored()
-                this.viewer.build_d3_cluster()
-                this.viewer.render(this.viewer.hierarchy)
-                this.viewer.maximise_zoom()
-            })
-            .style('margin', '12px 0px')
-            .style('flex-grow', '1')
-            .append("text")
-            .text("Collapse uncolored sub-tree ")
-
-        // Add button for collapse unicolored taxon
-        this.collapse_unicolor_button_div = this.menu_coloring_p.append('div')
-            .style('display', 'flex')
-            .style('margin-top', '0px')
+        this.add_color_collapsing(this.menu_coloring_p)
 
-        this.collapse_unicolor_button_div.append('button')
-            .attr('class', ' square_button')
-            .attr('id', 'collapse_unicolor_search' + this.viewer.uid)
-            .on("click", d => {
-                this.container_object.collapse_node_same_color()
-                this.viewer.build_d3_cluster()
-                this.viewer.render(this.viewer.hierarchy)
-                this.viewer.maximise_zoom()
-            })
-            .style('margin', '12px 0px')
-            .style('flex-grow', '1')
-            .append("text")
-            .text("Collapse monocolored sub-tree ")
+        this.menu_coloring_p.append('hr').style('margin', '20px 0px 4px 0px')
 
 
         // add sync coloring
-        this.add_swicth_UI(this.menu_coloring_p, this.viewer.model.settings.sync_coloring,"Sync branches and leaves coloring",   this.viewer.toggle_sync_coloring.bind(this.viewer))
+        this.add_swicth_UI(this.menu_coloring_p, this.viewer.model.settings.sync_coloring,"Link branch & leaf coloring",   this.viewer.toggle_sync_coloring.bind(this.viewer))
 
         var color_triangle_div = this.menu_coloring_p.append('div')
             .style('display','block')
@@ -3706,7 +3886,7 @@ export default class Interface {
 
 
         var butty_putty1 = buttons.append('button')
-            .attr('class', ' square_button')
+            .attr('class', ' square_button mini')
             .style('border-radius', '0px')
             .style('padding', '2px')
             .attr('id', id + 'first' +  this.container_object.uid )
@@ -3715,19 +3895,16 @@ export default class Interface {
             .style('flex-grow', '1')
 
 
-        butty_putty1.append("div").append('i')
-            .style('color', '#888')
-            .style('font-size', '12px')
-            .attr('class', 'bi bi-dash')
+
 
         butty_putty1.append('p')
-            .text('-50%')
+            .text('- 50%')
             .style('font-size', 'xx-small')
             .style('line-height', 'normal')
             .style('margin-bottom', '4px')
 
         var butty_putty2 = buttons.append('button')
-            .attr('class', ' square_button')
+            .attr('class', ' square_button mini')
             .style('border-radius', '0px')
             .style('padding', '2px')
             .attr('id', id + 'second' +  this.container_object.uid )
@@ -3736,20 +3913,16 @@ export default class Interface {
             .style('flex-grow', '1')
 
 
-        butty_putty2.append("div").append('i')
-            .style('color', '#888')
-            .style('font-size', '8px')
-            .attr('class', ' bi bi-dash ')
 
         butty_putty2.append('p')
-            .text('-20%')
+            .text('- 20%')
             .style('font-size', 'xx-small')
             .style('line-height', 'normal')
             .style('margin-bottom', '4px')
 
 
         var butty_putty3 = buttons.append('button')
-            .attr('class', ' square_button')
+            .attr('class', ' square_button mini')
             .style('border-radius', '0px')
             .style('padding', '2px')
             .attr('id', id + 'third' +  this.container_object.uid )
@@ -3759,13 +3932,9 @@ export default class Interface {
 
 
 
-        butty_putty3.append("div").append('i')
-            .style('color', '#888')
-            .style('font-size', '8px')
-            .attr('class', ' bi bi-plus ')
 
         butty_putty3.append('p')
-            .text('+20%')
+            .text('+ 20%')
             .style('font-size', 'xx-small')
             .style('line-height', 'normal')
             .style('margin-bottom', '4px')
@@ -3773,7 +3942,7 @@ export default class Interface {
 
 
         var butty_putty4 = buttons.append('button')
-            .attr('class', ' square_button')
+            .attr('class', ' square_button mini')
             .style('border-radius', '0px')
             .style('padding', '2px')
             .attr('id', id + 'fourth' +  this.container_object.uid )
@@ -3783,13 +3952,8 @@ export default class Interface {
 
 
 
-        butty_putty4.append("div").append('i')
-            .style('color', '#888')
-            .style('font-size', '12px')
-            .attr('class', ' bi bi-plus ')
-
         butty_putty4.append('p')
-            .text('+50%')
+            .text('+ 50%')
             .style('font-size', 'xx-small')
             .style('line-height', 'normal')
             .style('margin-bottom', '4px')