phyloio 2.1.0 → 2.2.2

package/src/container.js

@@ -3,7 +3,7 @@ import Model from './model.js'
 import Interface from "./interface";
 import * as bootstrap from "bootstrap";
 import * as d3 from "d3";
-const { build_table, save_file_as } = require('./utils.js')
+const { build_table, save_file_as, colorDifference } = require('./utils.js')
 var parser = require("biojs-io-newick");
 
 
@@ -24,6 +24,7 @@ export default class Container {
         this.current_model = 0; // current model index
         this.viewer = new Viewer(this); // attach Viewer()
         this.history_actions = [] //  for Undo feature
+        this.undone_actions = [] //  for Undo feature
         this.api = api
         this.message_loader = null
 
@@ -38,14 +39,24 @@ export default class Container {
 
     }
 
-    add_action(name, fn_object, counter_fn, argu, refresh_interface){
+    add_action(undo, redo, refresh_interface){
 
-        var refresh_interface = (typeof refresh_interface !== 'undefined') ? refresh_interface : false;
+        /* undo and redo object - {'name': X, 'fonct': X, 'fonction_obj': X, 'argu': X} */
 
-        if (!this.api.undoing){
-            this.history_actions.push({'name': name, 'fonct':counter_fn, 'fonction_obj':fn_object, 'argu': argu, 'refresh_interface' : refresh_interface})
+        if (this.api.undoing) {
+            return
         }
 
+
+        this.history_actions.push(
+            {
+            'undo': undo,
+            'redo': redo,
+            'refresh_interface' : (typeof refresh_interface !== 'undefined') ? refresh_interface : false,
+            }
+        )
+
+
     }
 
     get_last_action(){
@@ -53,7 +64,13 @@ export default class Container {
     }
 
     pop_last_action(){
-        return this.history_actions.pop()
+        var pop  = this.history_actions.pop()
+        this.undone_actions.push(pop)
+        return pop
+    }
+
+    pop_redo_action(){
+        return this.undone_actions.pop()
     }
 
 
@@ -145,7 +162,7 @@ export default class Container {
 
         if (this.current_model + offset >= 0 && this.current_model + offset <= this.models.length -1 ) {
 
-            this.add_action('Change tree',  this, this.shift_model, [-offset, store_old] )
+            //this.add_action('Change tree',  this, this.shift_model, [-offset, store_old] )
 
             if (store_old){
                 // store the current zoom information
@@ -191,7 +208,21 @@ export default class Container {
         var m = this.models[this.current_model];
 
         if (action === 'collapse') {
-            this.add_action('Collapse this node',  this, this.trigger_, [action, data, node] )
+
+            var name_undo,name_redo;
+
+            if (data.children && data.collapse){
+                name_undo = 'Collapse this node';
+                name_redo = 'Expand this node';
+            }
+            else {
+                name_undo = 'Expand this node';
+                name_redo = 'Collapse this node';
+            }
+
+            var undo = {'name': name_undo, 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            var redo = {'name': name_redo, 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
             m.collapse(data)
             this.viewer.apply_collapse_from_data_to_d3(data, node)
             this.viewer.build_d3_cluster()
@@ -199,7 +230,11 @@ export default class Container {
 
         }
         else if (action === 'collapseAll') {
-            this.add_action('Collapse All',  this, this.trigger_, ['expandAll', data, node] )
+
+            var undo = {'name': 'Expand All', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': ['expandAll', data, node]}
+            var redo = {'name': 'Collapse All', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             m.collapseAll(data, true)
             this.viewer.apply_collapseAll_from_data_to_d3(data, node)
             this.viewer.build_d3_cluster()
@@ -207,7 +242,11 @@ export default class Container {
 
         }
         else if (action === 'expandAll') {
-            this.add_action('Expand All',  this, this.trigger_, ['collapseAll', data, node] )
+
+            var undo = {'name': 'Collapse All', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': ['collapseAll', data, node]}
+            var redo = {'name': 'Expand All', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             m.collapseAll(data, false)
             this.viewer.apply_expandAll_from_data_to_d3(data, node)
             this.viewer.build_d3_cluster()
@@ -215,7 +254,11 @@ export default class Container {
 
         }
         else if (action === 'swap') {
-            this.add_action('Swap',  this, this.trigger_, ['unswap', data, node] )
+
+            var undo = {'name': 'Unswap', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': ['unswap', data, node]}
+            var redo = {'name': 'Swap', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             m.swap_subtrees(data)
             this.viewer.apply_swap_from_data_to_d3(data, node)
             this.viewer.build_d3_cluster()
@@ -233,7 +276,10 @@ export default class Container {
         }
         else if (action === 'reroot'){
 
-            this.add_action('Reroot',  this, this.trigger_, ['reroot', this.viewer.hierarchy.children[0].data, null] )
+            var undo = {'name': 'Reroot', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': ['reroot', this.viewer.hierarchy.children[0].data, null]}
+            var redo = {'name': 'Reroot', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             m.reroot(data)
             m.rooted = true
             this.viewer.set_data(m)
@@ -255,7 +301,12 @@ export default class Container {
         }
         else if (action === 'trim'){
             var untrim_data = m.trim(data.data)
-            this.add_action('Trim',  this, this.trigger_, ['untrim', untrim_data, null] )
+
+
+            var undo = {'name': 'Untrim', 'fonction_obj': this, 'fonct': this.trigger_, 'argu':['untrim', untrim_data, null]}
+            var redo = {'name': 'Trim', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             this.viewer.set_data(m)
             m.hierarchy_mockup = m.build_hierarchy_mockup()
             m.table = build_table(m.hierarchy_mockup)
@@ -282,7 +333,10 @@ export default class Container {
         }
         else if (action === 'force_show_label'){
 
-            this.add_action('Show Label',  this, this.trigger_, ['force_show_label', data, node] )
+            var undo = {'name': 'Toggle Label', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            var redo = {'name': 'Toggle Label', 'fonction_obj': this, 'fonct': this.trigger_, 'argu': [action, data, node]}
+            this.add_action(undo, redo)
+
             m.toggle_show_label(data)
             this.viewer.apply_show_label_from_data_to_d3(data, node)
             this.viewer.build_d3_cluster()
@@ -290,9 +344,52 @@ export default class Container {
 
 
         }
+        else if (action === 'BCN'){
+
+            var other_container = this.api.bound_container[0] === this ? this.api.bound_container[1] : this.api.bound_container[0]
+
+            // get BCN node
+            var target_node = node.data.elementBCN[other_container.viewer.model.uid]
+
+            if (!target_node){
+                console.log('No BCN node found for this container')
+                return
+            }
+
+            var target_hierarchy = this.getHierarchyNodeFromModelNode(target_node, other_container.viewer.hierarchy)
+
+
+            other_container.expandToRoot(target_node)
+            other_container.viewer.centerNode(target_hierarchy)
+
+            target_node._show_BCN = true
+            other_container.viewer.blinking = 6
+            other_container.viewer.render(other_container.viewer.hierarchy)
+
+        }
 
     }
 
+    expandToRoot(node_model ) {
+
+        var model  = this.viewer.model;
+        var hierarchy = this.viewer.hierarchy;
+
+        var node = node_model
+        while (node) {
+            model.collapse(node, false)
+
+            var node_hierarchy = this.getHierarchyNodeFromModelNode(node, hierarchy)
+            this.viewer.apply_collapse_from_data_to_d3(node, node_hierarchy)
+            node = node.parent; // Move to the parent node
+        }
+
+    }
+
+
+
+
+
     // collapse all node from depth
     collapse_depth(depth, tree){
 
@@ -334,109 +431,336 @@ export default class Container {
     collapse_node_not_colored(){
 
         var model =  this.models[this.current_model];
-        var viewer =  this.viewer;
+        var viewer = this.viewer;
+        var f_pre, f_post;
 
-            var f_pre = function(node, children){
+        var is_leaf = function(node) {
+            return !node.children && !node._children;
+        }
+
+        switch (model.settings.selected_collapse_uncolored) {
+
+            case 'Leaves':
 
-                node.colored = false;
+                f_pre = function(node, children){
 
-                var acc_node = node.data.extended_informations[model.settings.style.color_accessor['node']]
-                var acc_leaf = node.data.extended_informations[model.settings.style.color_accessor['leaf']]
+                    node.colored = false;
+                    node.data.colored = false;
+
+                    if (is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['leaf']] !== undefined  ){
+                        node.colored = true;
+                        node.data.colored = true;
+                    }
 
-                if (acc_node !== undefined || acc_leaf !== undefined ){
-                    node.colored = true;
                 }
 
-            }
+                f_post = function(child, node){
 
-            var f_post = function(child, node){
+                    // go through node.data.leaves and check if one colored break
+                    var leaves = child.data.leaves ? child.data.leaves : []
+                    for (const leafKey in leaves) {
+                        const leaf = leaves[leafKey];
+                        if (leaf.colored) {
+                            return
+                        }
+                    }
+
+                    model.collapse(child.data, true)
+                    viewer.apply_collapse_from_data_to_d3(child.data, child)
+                }
 
-            if (child.children || child._children){
+                break;
 
-                var children_list = child.children ? child.children : child._children
+            case 'Nodes':
 
-                var colored = false;
-                for (const childrenListKey in children_list) {
+                var f_pre = function(node, children){
 
-                    var e = children_list[childrenListKey]
+                    node.colored = false;
+                    node.data.colored = false;
 
-                    if (e.colored){
-                        colored = true;
-                        break
+                    if ( !is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['node']] !== undefined  ){
+                        node.colored = true;
+                        node.data.colored = true;
                     }
 
                 }
 
+                var f_post = function(child, node){
+
+                    if (is_leaf(child)){ return }
+
+                    var children_list = child.children ? child.children : child._children
+
+                    for (const childrenListKey in children_list) {
+
+                        var e = children_list[childrenListKey]
+
+                        if (is_leaf(e)){continue}
+
+                        if (e.colored) {
+                            return
+                        }
+
+                    }
 
-                if (colored){
-                    model.collapse(child.data, false)
-                    child.colored = true;
-                }
-                else {
                     model.collapse(child.data, true)
-                    child.colored = false;
+                    viewer.apply_collapse_from_data_to_d3(child.data, child)
+                }
+
+                break;
+            case 'Both':
+
+                var f_pre = function(node, children){
+
+                    node.colored = false;
+                    node.data.colored = false;
+
+                    if ( !is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['node']] !== undefined  ){
+                        node.colored = true;
+                        node.data.colored = true;
+                    }
+                    else if (is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['leaf']] !== undefined  ){
+                        node.colored = true;
+                        node.data.colored = true;
+                    }
 
                 }
-                viewer.apply_collapse_from_data_to_d3(child.data, child)
-            }
 
+                var f_post = function(child, node){
+
+                    if (is_leaf(child)){return}
+
+                    var children_list = child.children ? child.children : child._children
+
+                    for (const childrenListKey in children_list) {
+
+                        var e = children_list[childrenListKey]
+
+                        if (e.colored) {
+                            return
+                        }
+
+                    }
+
+                    model.collapse(child.data, true)
+                    viewer.apply_collapse_from_data_to_d3(child.data, child)
+                }
+
+                break;
+            default:
+                console.log('Unknown collapse option: ' + model.settings.selected_collapse_uncolored)
+                return;
 
         }
 
-            this.models[this.current_model].traverse_hierarchy(this.viewer.hierarchy,f_pre, f_post)
+        this.models[this.current_model].traverse_hierarchy(this.viewer.hierarchy,f_pre, f_post)
 
     }
 
+    monocolored_check_and_collapse(colors,child ){
+
+        var model = this.models[this.current_model]
+
+        switch (colors.size) {
+            case 0:
+                break; // no color, do nothing
+            case 1:
+                model.collapse(child.data, true)
+                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)
+                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) {
+                            return; // multiple colors, do not collapse
+                        }
+                    }
+                }
+                model.collapse(child.data, true)
+                this.viewer.apply_collapse_from_data_to_d3(child.data, child)
+                break
+        }
+    }
+
     collapse_node_same_color(){
 
+        var that = this
+
         var model =  this.models[this.current_model];
         var viewer =  this.viewer;
         var compared_model = viewer.get_compared_model()
+        var f_pre, f_post;
 
-        var f_pre = function(node, children){
+        var is_leaf = function(node) {
+            return !node.children && !node._children;
+        }
 
-            node.colored = false;
 
-            var acc_node = node.data.extended_informations[model.settings.style.color_accessor['node']]
-            var acc_leaf = node.data.extended_informations[model.settings.style.color_accessor['leaf']]
+        switch (model.settings.selected_collapse_monocolored) {
 
-            if (acc_node !== undefined || acc_leaf !== undefined ){
-                node.colored = true;
-                node.renderedColor = viewer.color_edge(node, compared_model);
-                node.coloredValue = node.data.extended_informations[model.settings.style.color_accessor['node']];
-            }
+            case 'Leaves':
 
-        }
+                f_pre = function(node, children){
 
-        var f_post = function(child, node){
+                    node.renderedColor = false;
+                    node.data.renderedColor = false;
 
-            if (child.children || child._children){
+                    if (is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['leaf']] !== undefined  ){
+                        node.renderedColor = viewer.get_color_label(node)
+                        node.data.renderedColor = viewer.get_color_label(node)
 
-                var children_list = child.children ? child.children : child._children
+                    }
 
-                var renderedColors = Array.from(children_list).filter(e => e.coloredValue).map(e => e.coloredValue)
+                }
 
-                // check if difference between min and max value > 10% of the max value
-                var min = Math.min(...renderedColors)
-                var max = Math.max(...renderedColors)
-                var unicolored = (max - min) < 0.1 * max
+                f_post = function(child, node){
 
+                    var colors = new Set()
+
+                    var leaves = child.data.leaves ? child.data.leaves : []
+
+                    for (const leafKey in leaves) {
+                        const leaf = leaves[leafKey];
+
+                        if (!leaf.renderedColor) {
+                            continue
+                        }
+
+                        colors.add(leaf.renderedColor)
+                    }
+
+
+
+                    that.monocolored_check_and_collapse(colors,child )
+
+                    viewer.apply_collapse_from_data_to_d3(child.data, child)
 
-                if (unicolored){
-                    model.collapse(child.data, true)
                 }
-                else {
-                    model.collapse(child.data, false)
+
+                break;
+
+            case 'Nodes':
+
+                f_pre = function(node, children){
+
+
+                    node.renderedColor = false;
+                    node.data.renderedColor = false;
+
+                    if ( !is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['node']] !== undefined  ){
+                        node.renderedColor = viewer.color_edge(node, compared_model);
+                        node.data.renderedColor = viewer.color_edge(node, compared_model);
+                    }
 
                 }
-                viewer.apply_collapse_from_data_to_d3(child.data, child)
-            }
 
+                f_post = function(child, node){
+
+                    if (is_leaf(child)){ return }
+
+                    var children_list = child.children ? child.children : child._children
+
+                    // check if all children_list are leaf return
+                    if (children_list.length === 0 || children_list.every(is_leaf)) {
+                        return;
+                    }
+
+                    child.colors = new Set()
+
+                    for (const childrenListKey in children_list) {
+
+                        var e = children_list[childrenListKey]
+
+                        if (is_leaf(e)){continue}
+
+
+                        if (e.colors){
+                            child.colors = new Set([...child.colors, ...e.colors]);
+
+                        }
+                        else if (e.renderedColor){
+                            child.colors.add(e.renderedColor)
+                        }
+                        else{
+                            child.colors = new Set()
+                            return
+                        }
+
+
+                    }
+
+                    that.monocolored_check_and_collapse(child.colors,child )
+
+
+                }
+
+                break;
+
+            case 'Both':
+
+                f_pre = function(node, children){
+
+
+                    node.renderedColor = false;
+                    node.data.renderedColor = false;
+
+                    if ( is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['node']] !== undefined  ){
+                        node.renderedColor = viewer.color_edge(node, compared_model);
+                        node.data.renderedColor = viewer.color_edge(node, compared_model);
+                    }
+                    else if (is_leaf(node) && node.data.extended_informations[model.settings.style.color_accessor['leaf']] !== undefined  ){
+                        node.renderedColor = viewer.get_color_label(node)
+                        node.data.renderedColor = viewer.get_color_label(node)
+                    }
+
+                }
+
+                f_post = function(child, node){
+
+                    if (is_leaf(child)){ return }
+
+                    var children_list = child.children ? child.children : child._children
+
+                    child.colors = new Set()
+
+                    for (const childrenListKey in children_list) {
+
+                        var e = children_list[childrenListKey]
+
+                        if (e.colors){
+                            child.colors = new Set([...child.colors, ...e.colors]);
+
+                        }
+                        else if (e.renderedColor){
+                            child.colors.add(e.renderedColor)
+                        }
+                        else{
+                            child.colors = new Set()
+                            return
+                        }
+
+
+
+                    }
+
+                    that.monocolored_check_and_collapse(child.colors,child )
+
+                }
+
+                break;
+            default:
+                console.log('Unknown collapse option: ' + model.settings.selected_collapse_uncolored)
+                return;
 
         }
 
         this.models[this.current_model].traverse_hierarchy(this.viewer.hierarchy,f_pre, f_post)
 
+
+
+
     }
 
     highlight_node(name){
@@ -845,6 +1169,26 @@ export default class Container {
 
     }
 
+    traverseAllNodes(node, callback) {
+        callback(node); // Apply the callback to the current node
+        const children = node.children || node._children; // Include both expanded and collapsed nodes
+        if (children) {
+            children.forEach((child) => this.traverseAllNodes(child, callback));
+        }
+    }
+
+    getHierarchyNodeFromModelNode(modelNode, hierarchy) {
+        let equivalentNode = null;
+
+        this.traverseAllNodes(hierarchy, (d) => {
+            if (d.data === modelNode) {
+                equivalentNode = d;
+            }
+        });
+
+        return equivalentNode;
+    }
+
 
 
 

package/src/interface.css

@@ -22,6 +22,12 @@
     height: 56px;
 }
 
+.square_button.mini{
+
+    width: 42px;
+    height: 42px;
+}
+
 .square_button:hover{
     background-color: #ddd;
 }