How to align the highlight bins and the images automatically

[klcym]

Dear Giorgio :

I want to align the highlight bins and the images and I dont want to change the tree into the cladogram style. What can I do?

Thanks for your help.

[arklumpus]

Hi! For the images, within the options for the Draw image module, you need to set the Anchor to Origin, and then use the same X value for the position of all images.

For the highlights, I'm afraid there is no easy way to do this at the moment; you would have to manually adjust the Right margin of each highlight. I'll figure something out for the next update!

Another alternative would be to use a custom script to draw the highlights - I can give you some example code to get started, if you're interested.

[klcym]

Thanks for your reply. I will try to use the custom script.😊

[arklumpus]

OK, here is an example that produces the following tree:

And here is the tree file: customHighlights.zip

Essentially, the highlight colour is stored as an attribute on the LCA of each highlighted group; the script searches for nodes with this attribute and draws a rectangle around them.

Here is the source code (you can also access it from the tree file, by opening the options of the Custom script module.

Source code

using PhyloTree;
using System.Collections.Generic;
using VectSharp;
using TreeViewer;
using System.Linq;

namespace a6d3baabb494a4099b6ff50915d4ed748
{
    //Do not change class name
    public static class CustomCode
    {
        //Do not change method signature
        public static Point[] PerformPlotAction(TreeNode tree, Dictionary<string, Point> coordinates, Graphics graphics, InstanceStateData stateData)
        {
            // Name of the attribute where the highlight colour is stored.
            string attribute = "HighlightColour";

            // Margins for the highlight.
            double marginTop = 6;
            double marginLeft = 10;
            double marginBottom = 6;
            double marginRight = 25;

            // Get the X coordinate that is farthest from the root.
            double rightmostX = coordinates.Values.Select(point => point.X).Max();

            // Traverse the tree
            foreach (TreeNode node in tree.GetChildrenRecursiveLazy())
            {
                // Check if the node has the attribute
                if (node.Attributes.TryGetValue(attribute, out object attributeVal) && attributeVal is string attributeString)
                {
                    // Parse the colour.
                    Colour highlightCol = Colour.FromCSSString(attributeString).Value;

                    // The left side of the highlight corresponds to the coordinates of the node (minus the margin).
                    double leftX = coordinates[node.Id].X - marginLeft;

                    // The right side of the highlight is fixed.
                    double rightX = rightmostX + marginRight;

                    // The top of the highlight will be at the minimum Y coordinate of the node's children.
                    double topY = node.GetChildrenRecursiveLazy().Select(childNode => coordinates[childNode.Id].Y).Min() - marginTop;

                    // The bottom of the highlight will be at the maximum Y coordinate of the node's children.
                    double bottomY = node.GetChildrenRecursiveLazy().Select(childNode => coordinates[childNode.Id].Y).Max() + marginBottom;

                    // Create the linear gradient brush.
                    LinearGradientBrush brush = new LinearGradientBrush(
                            new Point(leftX, (topY + bottomY) * 0.5), // Start point
                            new Point(rightX, (topY + bottomY) * 0.5), // End point
                            new VectSharp.GradientStop(highlightCol.WithAlpha(0), 0), new VectSharp.GradientStop(highlightCol, 1)); // Gradient colour stops.

                    // Fill the highlight rectangle (tagging the rectangle with the node Id makes it selectable).
                    graphics.FillRectangle(leftX, topY, rightX - leftX, bottomY - topY, brush, tag: node.Id);
                }
            }
            
            // In theory, we should return the coordinates of the top-left and bottom-right corners of the area containing
            // everything that has been drawn by this script. However, since we are not extending the plot area, in this
            // case it doesn't matter.
            Point topLeft = new Point();
            Point bottomRight = new Point();
            return new Point[] { topLeft, bottomRight };
        }
    }
}

Let me know if you have any questions!

[klcym]

Wow, that's great!