phyloio 2.1.0 → 2.2.2

package/src/model.js

@@ -30,6 +30,7 @@ export default class Model {
             'use_branch_lenght' : true,
             'show_tooltips' : false,
             'subsample_label' : true,
+            'use_internal_node_name_for_triangles' : true,
             'display_internal_label' : false,
             'display_internal_label_left_top' : false,
             'display_internal_label_left_bottom' : false,
@@ -80,6 +81,8 @@ export default class Model {
             },
             'sync_coloring': false,
             'selected_triangle_coloring': 'None',
+            'selected_collapse_uncolored': 'Leaves',
+            'selected_collapse_monocolored': 'Leaves',
             'colorScale': {'leaf' : null, 'node':null, 'circle': {}},
             'intercolor': {'leaf' : null, 'node': null, 'circle': {}}
         }
@@ -791,10 +794,6 @@ export default class Model {
         parent.branch_length = old_distance /2
         parent.extended_informations['Length'] = old_distance/2
 
-
-
-        //                      ((C,D)1,(A,(B,X)3)2,E); to test
-
         // Until we reach the old root reverse child/parent order
         var child = root
         var stack = []
@@ -809,29 +808,26 @@ export default class Model {
             parent.values_before_reverse = {}
             parent.branch_length_before_reverse = parent.branch_length
 
-            for (var key of this.settings.edge_related_data) {
-
-                var value = key;
+            for (var value of this.settings.edge_related_data) {
 
                 parent.values_before_reverse[value] = parent.extended_informations[value]
 
+                if (value=== 'Length'){
+                    parent.branch_length = child.branch_length_before_reverse || child.branch_length;
+                    parent.extended_informations['Length'] = parent.branch_length;
 
-                    if (value=== 'Length'){
-                        parent.branch_length = child.branch_length_before_reverse || child.branch_length;
-                        parent.extended_informations['Length'] = parent.branch_length;
-
+                }
+                else{
+                    if ( child.values_before_reverse && value in child.values_before_reverse){
+                        parent.extended_informations[value] = child.values_before_reverse[value]
                     }
                     else{
-                        if ( child.values_before_reverse && value in child.values_before_reverse){
-                            parent.extended_informations[value] = child.values_before_reverse[value]
-                        }
-                        else{
-                            parent.extended_informations[value] = child.extended_informations[value]
-                            child.extended_informations[value] = null
-                        }
-
+                        parent.extended_informations[value] = child.extended_informations[value]
+                        child.extended_informations[value] = null
                     }
 
+                }
+
 
 
             }
@@ -887,7 +883,6 @@ export default class Model {
 
             for (var childy of root.children) {
 
-                console.log(childy, childy.extended_informations[key], root.extended_informations[key] )
                 childy.extended_informations[key] =  root.extended_informations[key]
 
             }
@@ -906,6 +901,8 @@ export default class Model {
 
         this.traverse(root, function(n,c){
             n.leaves = this.get_leaves(n)
+            n.values_before_reverse = {}
+            n.branch_length_before_reverse = undefined
         })
 
 
@@ -1175,6 +1172,8 @@ export default class Model {
         // headers: column_name -> type
 
         Object.keys(headers).forEach(item => {
+
+
             if (item != reference || item != 'Length' ) {
 
                 this.settings.extended_data_type[item] = headers[item]

package/src/tmp

@@ -0,0 +1,12 @@
+     578 ./api.js
+      40 ./color_mapper.js
+     916 ./container.js
+      40 ./index.js
+    4149 ./interface.js
+      70 ./keyboardManager.js
+    1349 ./model.js
+    1484 ./phyloxml.js
+     987 ./utils.js
+    2703 ./viewer.js
+     144 ./worker_bcn.js
+      10 ./worker_distance.js

package/src/utils.js

@@ -969,6 +969,36 @@ function prepare_and_run_distance(m1,m2){
     return  distance
 }
 
-module.exports =  {prepare_and_run_distance, build_table, reroot_hierarchy, screen_shot, parse_nhx, save_file_as, compute_RF_Euc, get_intersection_leaves, filter_leaves_hierarchy, remove_duplicated_and_unnamed_leaves_hierarchy};
+function check_if_color(query){
+    var accepted_spelling = ['color', 'colour'];
+
+    if (accepted_spelling.includes(query.toLowerCase())){
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+
+function hexToRgb(hex) {
+    const bigint = parseInt(hex.slice(1), 16);
+    const r = (bigint >> 16) & 255;
+    const g = (bigint >> 8) & 255;
+    const b = bigint & 255;
+    return { r, g, b };
+}
+
+function colorDifference(hex1, hex2) {
+    const color1 = hexToRgb(hex1);
+    const color2 = hexToRgb(hex2);
+    const rDiff = color1.r - color2.r;
+    const gDiff = color1.g - color2.g;
+    const bDiff = color1.b - color2.b;
+    const distance = Math.sqrt(rDiff * rDiff + gDiff * gDiff + bDiff * bDiff);
+    const maxDistance = Math.sqrt(255 * 255 * 3);
+    return (distance / maxDistance) * 100;
+}
+
+module.exports =  {colorDifference, check_if_color, prepare_and_run_distance, build_table, reroot_hierarchy, screen_shot, parse_nhx, save_file_as, compute_RF_Euc, get_intersection_leaves, filter_leaves_hierarchy, remove_duplicated_and_unnamed_leaves_hierarchy};
 
 

package/src/viewer.js

@@ -42,6 +42,7 @@ export default class Viewer {
         this.container_d3.style('font-family', 'monospace !important' )
 
         this.interface;
+        this.blinking=0;
 
         // Settings
         this.settings = {
@@ -301,6 +302,7 @@ export default class Viewer {
                 this.maximise_zoom()
                 this.svg.call(this.zoom.scaleBy, 0.5)
                 this.container_object.history_actions = []
+                this.container_object.undone_actions = []
 
             }
 
@@ -400,6 +402,7 @@ export default class Viewer {
         var show_duplications = this.model.settings.display_duplication
         var mirror_factor = this.model.settings.mirror ? -1 : 1
         var deepest_tip = 0;
+        var k = this.d3.zoomTransform(d3.select("#master_g" + this.uid).node()).k
 
         // update x pos with branch length
         this.nodes.forEach(d => {
@@ -535,7 +538,7 @@ export default class Viewer {
         this.nodeUpdate.select('circle.node')
             .attr('r', d => d._children || (!this.model.rooted && d.data.root ) ?  1e-6 : real_node_radius )
             .style("fill",   (d) => {
-                if ( d.data.duplication && show_duplications){
+                if ( (d.data.duplication && show_duplications)){
                     return 'red'
                 }
 
@@ -570,6 +573,31 @@ export default class Viewer {
             })
             .attr('cursor', 'pointer');
 
+        if (this.blinking > 0)  {
+
+            var BCN_nodes = node.select('circle.node').filter(d => d.data._show_BCN);
+
+            BCN_nodes.style('stroke', 'red')
+                .style('stroke-width', (d) => { return  (2/k) + 'px'})
+
+            // Blinking effect
+            let isVisible = true;
+            const interval = setInterval(() => {
+                isVisible = !isVisible;
+                BCN_nodes.style("stroke-opacity", isVisible ? 1 : 0);
+                this.blinking -= 1;
+
+
+                if (this.blinking <= 0) {
+                    clearInterval(interval); // Stop the interval when blinking reaches 0
+                    BCN_nodes.style("stroke-opacity", 0); // Ensure stroke is visible after stopping
+                }
+
+            }, 750); // Blink every 500ms
+
+
+        }
+
         this.node_face_update(this.nodeUpdate)
 
         // Remove any exiting nodes
@@ -638,87 +666,93 @@ export default class Viewer {
         })
 
         // align to tip
+        this.G.selectAll("line.dashed_line").remove()
+        if (this.model.settings.align_tip) {
+
+            var update_dashed = (d) => {
+
+                this.G.append("line")
+                    .attr("class", "dashed_line")
+                    .attr("x1", mirror_factor * d.y)
+                    .attr("y1", d.x)
+                    .attr("x2", mirror_factor * (d.y + d.off_set_to_tip))
+                    .attr("y2", d.x)
+                    .style("stroke", "white")
+                    .style("stroke-dasharray", this.compute_edge_width() + ', ' + this.compute_edge_width())
+            }
+
 
-        if (this.model.settings.align_tip){
 
             if (this.model.settings.has_branch_lenght && this.model.settings.use_branch_lenght) {
 
                 // update y pos with branch length
                 this.nodes.forEach(d => {
 
-                    var distance_root_to_tip = this.scale_branch_length(d.data.distance_to_root) + (d.data.triangle_width ? d.data.triangle_width : 0)
+                    var distance_root_to_tip = this.scale_branch_length(d.data.distance_to_root) + (d.data.triangle_width ? d.data.triangle_width : 0);
 
-                    if (deepest_tip <distance_root_to_tip ){
-                        deepest_tip =  distance_root_to_tip
+                    if (deepest_tip < distance_root_to_tip) {
+                        deepest_tip = distance_root_to_tip;
                     }
-                })
+                });
 
                 // Transition to the proper position for the node
                 this.nodeUpdate.transition()
                     .duration(duration)
-                    .attr("transform", (d) =>  {
+                    .attr("transform", (d) => {
 
-                        if (d.children ){
-                            d.off_set_to_tip = 0
-                            return "translate(" + (mirror_factor*d.y) + "," + d.x + ")";
-                        }
-
-                        else if (d._children) {
-                            d.off_set_to_tip =   deepest_tip - this.scale_branch_length(d.data.distance_to_root) - d.data.triangle_width
-                            return "translate(" + (mirror_factor*(d.y + d.off_set_to_tip)) + "," + d.x + ")";
-                        }
-
-                        else {
-                            d.off_set_to_tip =  deepest_tip - this.scale_branch_length(d.data.distance_to_root)
-                            return "translate(" + (mirror_factor* (d.y + d.off_set_to_tip)) + "," + d.x + ")";
-                        }
+                        if (d.children) {
+                            d.off_set_to_tip = 0;
+                            return "translate(" + (mirror_factor * d.y) + "," + d.x + ")";
+                        } else if (d._children) {
+                            d.off_set_to_tip = deepest_tip - this.scale_branch_length(d.data.distance_to_root) - d.data.triangle_width;
 
+                            update_dashed(d)
 
+                            return "translate(" + (mirror_factor * (d.y + d.off_set_to_tip)) + "," + d.x + ")";
+                        } else {
+                            d.off_set_to_tip = deepest_tip - this.scale_branch_length(d.data.distance_to_root);
 
+                            update_dashed(d)
 
+                            return "translate(" + (mirror_factor * (d.y + d.off_set_to_tip)) + "," + d.x + ")";
+                        }
                     });
             }
-            else{
+            else {
 
                 // update y pos with branch length
                 this.nodes.forEach(d => {
 
-                    var distance_root_to_tip = this.scale_branch_depth(d.data.depth) + (d.data.triangle_width ? d.data.triangle_width : 0)
+                    var distance_root_to_tip = this.scale_branch_depth(d.data.depth) + (d.data.triangle_width ? d.data.triangle_width : 0);
 
-                    if (deepest_tip <distance_root_to_tip ){
-                        deepest_tip =  distance_root_to_tip
+                    if (deepest_tip < distance_root_to_tip) {
+                        deepest_tip = distance_root_to_tip;
                     }
-                })
+                });
 
                 // Transition to the proper position for the node
                 this.nodeUpdate.transition()
                     .duration(duration)
-                    .attr("transform", (d) =>  {
+                    .attr("transform", (d) => {
 
-                        if (d.children ){
-                            d.off_set_to_tip = 0
-                            return "translate(" + (mirror_factor*d.y) + "," + d.x + ")";
-                        }
-
-                        else if (d._children) {
-                            d.off_set_to_tip =   deepest_tip - this.scale_branch_depth(d.data.depth) - d.data.triangle_width
-                            return "translate(" + (mirror_factor*(d.y + d.off_set_to_tip)) + "," + d.x + ")";
-                        }
-
-                        else {
-                            d.off_set_to_tip =  deepest_tip - this.scale_branch_depth(d.data.depth)
-                            return "translate(" + (mirror_factor* (d.y + d.off_set_to_tip)) + "," + d.x + ")";
-                        }
+                        if (d.children) {
+                            d.off_set_to_tip = 0;
+                            return "translate(" + (mirror_factor * d.y) + "," + d.x + ")";
+                        } else if (d._children) {
+                            d.off_set_to_tip = deepest_tip - this.scale_branch_depth(d.data.depth) - d.data.triangle_width;
 
+                            update_dashed(d)
 
+                            return "translate(" + (mirror_factor * (d.y + d.off_set_to_tip)) + "," + d.x + ")";
+                        } else {
+                            d.off_set_to_tip = deepest_tip - this.scale_branch_depth(d.data.depth);
 
+                            update_dashed(d)
 
+                            return "translate(" + (mirror_factor * (d.y + d.off_set_to_tip)) + "," + d.x + ")";
+                        }
                     });
             }
-
-
-
-
         }
 
 
@@ -881,6 +915,9 @@ export default class Viewer {
             .attr('d', d => this.square_edges({x: source.x, y: source.y}, {x: source.x, y: source.y}))
             .remove();
 
+        var real_edges_width = this.compute_edge_width()
+        this.G.selectAll('.dashed_line').style('stroke-width',  real_edges_width + 'px')
+
     }
 
     get_compared_model(){
@@ -928,11 +965,17 @@ export default class Viewer {
 
             var v = edge.data.extended_informations[acc];
 
-            if (typeof v == "undefined" ) {return "#555"}
+
+
+            // check if v is undefined or empty
+            if (typeof v == "undefined" || !v ) {return "#555"}
             else {
                 if (this.model.settings.extended_data_type[acc] == 'cat') {
                     return this.model.settings.colorScale['node'].get_color(v)
                 }
+                else if (this.model.settings.extended_data_type[acc] == 'color') {
+                    return v
+                }
                 else {
                     return this.model.settings.colorScale['node'](v)
                 }
@@ -1018,10 +1061,11 @@ export default class Viewer {
 
                 var real_edges_width = this.compute_edge_width()
                 this.G.selectAll('path.link').style('stroke-width',  real_edges_width + 'px')
+                this.G.selectAll('.dashed_line').style('stroke-width',  real_edges_width + 'px')
 
-            }
 
 
+            }
 
             this.model.store_zoomTransform(transform)
 
@@ -1124,6 +1168,15 @@ export default class Viewer {
                 ]
             }
 
+            if (this.container_object.api.settings.compareMode && this.container_object.api.bound_container.includes(this.container_object)){
+
+                menu.push({
+                    title: 'Highlight BCN' ,
+                    action: () =>  {this.container_object.trigger_("BCN", node.data, node)}
+                })
+
+            }
+
             if (this.container_object.api.settings.phylostratigraphy){
 
                 menu.push({
@@ -1137,6 +1190,8 @@ export default class Viewer {
         }
 
 
+
+
         menu.push({
             title: 'Close' ,
             action: () =>  {
@@ -1451,7 +1506,9 @@ export default class Viewer {
     maximise_zoom(){
 
         var old_zoom = this.d3.zoomTransform(d3.select("#master_g" + this.uid).node())
-        this.container_object.add_action('Stretch tree',  this, this.render_with_settings, [old_zoom.k, old_zoom.x,old_zoom.y,this.model.settings.tree.node_horizontal_size, []] )
+
+
+
         // Adjust Zoom-y to fit height
         var r = this.get_height_hierarchy()
         var vh = this.height - this.settings.style.offset_top_fit
@@ -1489,6 +1546,11 @@ export default class Viewer {
 
         var real_edges_width = this.compute_edge_width()
         this.G.selectAll('path.link').style('stroke-width',  real_edges_width + 'px')
+        this.G.selectAll('.dashed_line').style('stroke-width',  real_edges_width + 'px')
+
+        var undo = {'name': 'Revert Zoom', 'fonction_obj': this, 'fonct':  this.render_with_settings, 'argu': [old_zoom.k, old_zoom.x,old_zoom.y,this.model.settings.tree.node_horizontal_size, []]}
+        var redo = {'name': 'Stretch tree', 'fonction_obj': this, 'fonct':  this.render_with_settings, 'argu': [h_scale, x_tr, y_tr,ns, []] }
+        this.container_object.add_action(undo, redo, true)
 
     }
 
@@ -1496,7 +1558,9 @@ export default class Viewer {
 
         var collapsed = this.model.get_all_collapse(this.model.data)
         var old_zoom = this.d3.zoomTransform(d3.select("#master_g" + this.uid).node())
-        this.container_object.add_action('Compact tree',  this, this.render_with_settings, [old_zoom.k, old_zoom.x,old_zoom.y,this.model.settings.tree.node_horizontal_size, collapsed] )
+
+
+
 
         // Increment Collapsed Depth until "Visible leaf" > "Max visible leaves"
         var depth;
@@ -1557,6 +1621,11 @@ export default class Viewer {
 
         var real_edges_width = this.compute_edge_width()
         this.G.selectAll('path.link').style('stroke-width',  real_edges_width + 'px')
+        this.G.selectAll('.dashed_line').style('stroke-width',  real_edges_width + 'px')
+
+        var undo = {'name': 'Uncompact tree', 'fonction_obj': this, 'fonct':  this.render_with_settings, 'argu': [old_zoom.k, old_zoom.x,old_zoom.y,this.model.settings.tree.node_horizontal_size, collapsed]}
+        var redo = {'name': 'Compact tree', 'fonction_obj': this, 'fonct':  this.fit_to_viewer_height, 'argu': [] }
+        this.container_object.add_action(undo, redo, true)
 
 
 
@@ -1582,6 +1651,7 @@ export default class Viewer {
 
         var real_edges_width = this.compute_edge_width()
         this.G.selectAll('path.link').style('stroke-width',  real_edges_width + 'px')
+        this.G.selectAll('.dashed_line').style('stroke-width',  real_edges_width + 'px')
 
     }
 
@@ -1628,8 +1698,8 @@ export default class Viewer {
 
     toggle_align_tip(){
         this.model.settings.align_tip = !this.model.settings.align_tip
-
         this.render(this.hierarchy)
+
     }
 
     toggle_mirror(){
@@ -1676,6 +1746,14 @@ export default class Viewer {
 
     }
 
+    toggle_triangle_name(){
+        this.model.settings.use_internal_node_name_for_triangles = !this.model.settings.use_internal_node_name_for_triangles
+        this.render(this.hierarchy)
+
+    }
+
+
+
     toggle_subsample(){
         this.model.settings.subsample_label = !this.model.settings.subsample_label
         var k = this.d3.zoomTransform(d3.select("#master_g" + this.uid).node()).k
@@ -2379,6 +2457,48 @@ export default class Viewer {
             })
     }
 
+    get_color_label(d){
+
+        var acc = this.model.settings.style.color_accessor['leaf']
+        var type_acc = this.model.settings.extended_data_type[acc]
+
+
+        if (type_acc === 'color'){
+
+            var g = d.data.extended_informations[acc];
+
+            if (typeof g !== "undefined" ) {
+                return g
+            }
+
+
+        }
+
+        else if (acc !== null){
+
+            var v = d.data.extended_informations[acc];
+
+            if (typeof v !== "undefined" ) {
+
+                if (type_acc == 'cat'){
+
+                    var cs = this.container_object.api.get_color_scale(acc)
+                    return cs.get_color(v)
+
+                }
+
+                else{
+                    return this.model.settings.colorScale['leaf'](v)
+                }
+
+
+            }
+
+
+        }
+
+    }
+
     node_face_update(nodes){
 
         var on_screen_text_size = this.compute_node_font_size()
@@ -2409,6 +2529,10 @@ export default class Viewer {
                             return d.data.name
                         }
 
+                        if (this.model.settings.use_internal_node_name_for_triangles && d.data.name != ''){
+                            return d.data.name
+                        }
+
                         let l = d.data.leaves
 
                         if (l.length <= 0){
@@ -2447,44 +2571,7 @@ export default class Viewer {
 
                 if (!(d.children || d._children)){
 
-
-                    var acc = this.model.settings.style.color_accessor['leaf']
-                    var type_acc = this.model.settings.extended_data_type[acc]
-
-
-                    if (type_acc === 'color'){
-
-                        var g = d.data.extended_informations[acc];
-
-                        if (typeof g !== "undefined" ) {
-                            return g
-                        }
-
-
-                    }
-
-                    else if (acc !== null){
-
-                        var v = d.data.extended_informations[acc];
-
-                        if (typeof v !== "undefined" ) {
-
-                            if (type_acc == 'cat'){
-
-                                var cs = this.container_object.api.get_color_scale(acc)
-                                return cs.get_color(v)
-
-                            }
-
-                            else{
-                                return this.model.settings.colorScale['leaf'](v)
-                            }
-
-
-                        }
-
-
-                    }
+                    return this.get_color_label(d)
 
                 }
 
@@ -2637,6 +2724,8 @@ export default class Viewer {
             .style('fill-opacity', 1e-6);
     }
 
+
+
 };