phyloio 2.2.2 → 2.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phyloio",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "JS library for visualising and comparing phylogenetic trees",
   "scripts": {
     "test": "npm run-script build-jest; jest --silent=false",

package/src/container.js

@@ -557,7 +557,7 @@ export default class Container {
 
     }
 
-    monocolored_check_and_collapse(colors,child ){
+    monocolored_check_and_collapse(colors, child, data_type){
 
         var model = this.models[this.current_model]
 
@@ -569,8 +569,11 @@ export default class Container {
                 this.viewer.apply_collapse_from_data_to_d3(child.data, child)
                 break;
             default:
-                // compute the all pair of colorDifference in colors. If one above 10% return
-                var colorArray = Array.from(colors)
+                if (data_type !== "num") {
+                    break;  // more than one color, categorial or explicit color, do not colapse
+                }
+                // compute the all pairs of colorDifference in colors. If one above 5% do not collapse
+                let colorArray = Array.from(colors)
                 for (let i = 0; i < colorArray.length; i++) {
                     for (let j = i + 1; j < colorArray.length; j++) {
                         if (colorDifference(colorArray[i], colorArray[j]) > 0.05) {
@@ -627,13 +630,10 @@ export default class Container {
                         if (!leaf.renderedColor) {
                             continue
                         }
-
                         colors.add(leaf.renderedColor)
                     }
-
-
-
-                    that.monocolored_check_and_collapse(colors,child )
+                    const data_type = model.settings.extended_data_type[model.settings.style.color_accessor['leaf']];
+                    that.monocolored_check_and_collapse(colors, child, data_type)
 
                     viewer.apply_collapse_from_data_to_d3(child.data, child)
 
@@ -690,9 +690,8 @@ export default class Container {
 
 
                     }
-
-                    that.monocolored_check_and_collapse(child.colors,child )
-
+                    const data_type = model.settings.extended_informations[model.settings.style.color_accessor['node']];
+                    that.monocolored_check_and_collapse(child.colors, child, data_type);
 
                 }
 
@@ -740,12 +739,11 @@ export default class Container {
                             child.colors = new Set()
                             return
                         }
-
-
-
                     }
-
-                    that.monocolored_check_and_collapse(child.colors,child )
+                    const data_type_node = model.settings.extended_informations[model.settings.style.color_accessor['node']];
+                    const data_type_leaf = model.settings.extended_informations[model.settings.style.color_accessor['leaf']];
+                    const data_type = (data_type_node === data_type_leaf) ? data_type_node : 'cat'
+                    that.monocolored_check_and_collapse(child.colors, child, data_type);
 
                 }
 

package/src/interface.js

@@ -2792,7 +2792,7 @@ export default class Interface {
                 this.container_object.collapse_node_not_colored()
                 this.viewer.build_d3_cluster()
                 this.viewer.render(this.viewer.hierarchy)
-                this.viewer.maximise_zoom()
+                //this.viewer.maximise_zoom()
             })
             .style('margin', '12px 0px')
             .style('flex-grow', '1')
@@ -2852,7 +2852,7 @@ export default class Interface {
                 this.container_object.collapse_node_same_color()
                 this.viewer.build_d3_cluster()
                 this.viewer.render(this.viewer.hierarchy)
-                this.viewer.maximise_zoom()
+                //this.viewer.maximise_zoom()
             })
             .style('margin', '12px 0px')
             .style('flex-grow', '1')
@@ -3115,7 +3115,7 @@ export default class Interface {
 
 
         if (!(acc in this.viewer.model.settings.style.number_domain)) {
-            this.viewer.model.settings.style.number_domain[acc] = 3
+            this.viewer.model.settings.style.number_domain[acc] = 2
         }
 
         this.create_color_scheme_picker(type)
@@ -3217,6 +3217,8 @@ export default class Interface {
                         this.viewer.model.set_color_scale(type, this.api);
                     }
                     this.viewer.render(this.viewer.hierarchy)
+                    this.remove_color_legend(type)
+                    this.add_color_legend(type)
 
                 })
 
@@ -3528,9 +3530,8 @@ export default class Interface {
         var number = this.viewer.model.settings.style.number_domain[acc];
 
         if (!(acc in this.viewer.model.settings.style.color_domain)) {
-            this.viewer.model.settings.style.color_domain[acc] = this.viewer.model.settings.style.color_domain_default
-
-            var default_color = this.viewer.model.settings.style.color_domain_default
+            //this.viewer.model.settings.style.color_domain[acc] = this.viewer.model.settings.style.color_domain_default
+            var default_color = this.viewer.model.settings.style.color_domain_default[acc] || this.viewer.model.settings.style.color_domain_default["DEFAULT"];
 
             var w = Math.round(135/number);
             var color = []

package/src/model.js

@@ -53,8 +53,16 @@ export default class Model {
                 'color_extent_min': {'leaf' : {}, 'node': {"Topology":0}, 'circle': {} },
                 'color_extent_max':{'leaf' : {}, 'node': {"Topology":1}, 'circle': {}},
                 'number_domain':{ 'Topology': 5, 'Length': 5},
-                'color_domain':{'Topology' : ['#253494', '#2C7FB8', '#41B6C4', '#C7E9B4', '#FFFFCC'], 'Length': ['#253494', '#2C7FB8', '#41B6C4', '#C7E9B4', '#FFFFCC']},
-                'color_domain_default': ['#253494', '#2C7FB8', '#41B6C4', '#C7E9B4', '#FFFFCC'],
+                'color_domain': {
+                    'Topology' : ["#a50026", "#f46d43", "#ffffbf", "#74add1", "#313695"],
+                    'Length': ['#253494', '#2C7FB8', '#41B6C4', '#C7E9B4', '#FFFFCC']
+                },
+                'color_domain_default': {
+                    "Topology": ["#a50026", "#f46d43", "#ffffbf", "#74add1", "#313695"],
+                    "Length": ['#253494', '#2C7FB8', '#41B6C4', '#C7E9B4', '#FFFFCC'],
+                    "DEFAULT": ['#C60101', '#FB6A4A', '#F7F7F7', '#6BAED6', '#253494']
+                }
+
         },
             'tree': {
                 'node_vertical_size' : 30,

package/src/utils.js

@@ -980,7 +980,14 @@ function check_if_color(query){
     }
 }
 
-function hexToRgb(hex) {
+function hexToRgb(hex){
+    if (typeof hex === 'object' && hex.r !== undefined) {
+        return hex;
+    }
+    if (typeof hex === 'string' && hex.startsWith('rgb')) {
+        const values = hex.match(/\d+/g).map(Number);
+        return { r: values[0], g: values[1], b: values[2] };
+    }
     const bigint = parseInt(hex.slice(1), 16);
     const r = (bigint >> 16) & 255;
     const g = (bigint >> 8) & 255;
@@ -996,7 +1003,7 @@ function colorDifference(hex1, hex2) {
     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;
+    return (distance / maxDistance);
 }
 
 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

@@ -548,6 +548,7 @@ export default class Viewer {
                     var acc = this.model.settings.style.color_accessor['circle']
                     var type_acc = this.model.settings.extended_data_type[acc]
                     var g = d.data.extended_informations[acc]
+                    if (typeof(g) === 'undefined' || !g)  return "rgba(140,140,140,0.6)";
 
                     if (type_acc == 'cat'){
 
@@ -781,7 +782,8 @@ export default class Viewer {
 
     color_triangle(node_){
 
-        var mean = array => array.reduce((a, b) => a + b) / array.length;
+        const mean = array => array.reduce((a, b) => a + b) / array.length;
+        const default_color = '#666'
 
         function mostFrequentElement(array) {
             var frequencyMap = {};
@@ -824,6 +826,7 @@ export default class Viewer {
                     })
 
                     metrics = removeFalsyValues(metrics)
+                    if (metrics.length === 0) {return default_color;}
 
                     var type_l = this.model.settings.extended_data_type[acc_l]
 
@@ -854,6 +857,7 @@ export default class Viewer {
                     })
 
                     metrics = removeFalsyValues(metrics)
+                    if (metrics.length === 0) {return default_color;}
 
                     var type_l = this.model.settings.extended_data_type[acc_l]
 
@@ -871,7 +875,7 @@ export default class Viewer {
                 break
         }
 
-        return '#666'
+        return default_color;
     }
 
     render_edges(source, duration){