### Setup phylotree.js Project and Install Dependencies Source: https://github.com/veg/phylotree.js/blob/master/CONTRIBUTING.md This snippet guides through cloning the phylotree.js repository, navigating into the project directory, installing Yarn globally, installing webpack-cli globally, and finally installing the project's dependencies using Yarn. It sets up the local environment for development. ```shell git clone http://www.github.com/veg/phylotree.js phylo cd phylo npm install -g yarn yarn global add webpack-cli yarn ``` -------------------------------- ### Install and Run phylotree.js Source: https://github.com/veg/phylotree.js/blob/master/README.md Instructions for installing the phylotree.js library using Yarn and starting a local development server with Rollup. This setup allows for live reloading upon code edits. ```shell git clone https://github.com/veg/phylotree.js.git yarn yarn serve ``` -------------------------------- ### Start Development Server for phylotree.js Source: https://github.com/veg/phylotree.js/blob/master/CONTRIBUTING.md This command starts the development server for the phylotree.js project. Once running, you can access the application at http://localhost:8080/. Edits made to src/main.js will trigger webpack builds, but the browser will need to be refreshed to see changes. ```shell yarn serve ``` -------------------------------- ### Newick String Example Source: https://github.com/veg/phylotree.js/blob/master/index.html An example of a Newick string format, commonly used in bioinformatics to represent phylogenetic trees. This string defines the structure and branch lengths of a tree. ```plaintext (a : 0.1, (b : 0.11, (c : 0.12, d : 0.13) : 0.14) : 0.15) ``` -------------------------------- ### setBranchLength: Get or set branch length accessor Source: https://github.com/veg/phylotree.js/blob/master/API.md Provides functionality to get or set the accessor for branch lengths. It takes an attribute as input. ```APIDOC setBranchLength(attr) Parameters: attr: The attribute to set or get the branch length accessor. ``` -------------------------------- ### Phylotree.js API - Initialization and Rendering Source: https://github.com/veg/phylotree.js/blob/master/index.html Details on how to instantiate and configure the phylotree.js library for rendering phylogenetic trees. Covers the constructor and the `render` method with its various options for customization. ```APIDOC phylotree.phylotree(newickString) - Constructor for the Phylotree object. - Parameters: - newickString (string): A string containing the phylogenetic tree data in Newick format. render(options) - Renders the phylogenetic tree within a specified container. - Parameters: - options (object): Configuration object for rendering. - container (string): CSS selector for the DOM element where the tree will be rendered. - "draw-size-bubbles" (boolean): Whether to draw size bubbles for nodes. - "bubble-styler" (function): A function that returns the size for bubbles based on node data. - "node-styler" (function): A function that applies custom styling to nodes. - "font-size" (number): The base font size for labels. - zoom (boolean): Whether to enable zooming functionality. - "edge-styler" (function): A function that applies custom styling to edges. Example: var tree = new phylotree.phylotree("(A:1,B:2,(C:3,D:4)E:5);\n"); tree.render({ container: "#tree_container", "draw-size-bubbles": false, "font-size": 12 }); ``` -------------------------------- ### Phylotree Initialization and Rendering Source: https://github.com/veg/phylotree.js/blob/master/index.html This section demonstrates how to initialize and render a phylogenetic tree using the phylotree.js library. It shows how to load data (e.g., from a Newick string), specify rendering options, and attach event listeners for interactivity. ```javascript $(document).ready(function() { tree = new phylotree.phylotree(test_string); global_tree = tree; tree.render({ container: "#tree_container", "draw-size-bubbles": false, "bubble-styler": d => { return 5 }, "node-styler": node_colorizer, "font-size": 12, zoom: false, "edge-styler": edge_colorizer }); $('#tree_container').on('reroot', function (e) { update_selection_names(); tree.display.countHandler(count => { $("#selected_branch_counter").text(function(d) { return count[current_selection_name]; }); }); }); tree.display.selectionLabel(current_selection_name); tree.display.countHandler(count => { $("#selected_branch_counter").text(function(d) { return count[current_selection_name]; }); }); // Get selection set names from parsed newick if (tree.parsed_tags.) { // Incomplete line from original text // ... further processing ... } }); ``` -------------------------------- ### Get Root Node Source: https://github.com/veg/phylotree.js/blob/master/API.md Retrieves the root node of the phylogenetic tree. ```APIDOC getRootNode() Returns: Node - the current root node of the ``phylotree``. ``` -------------------------------- ### Phylotree Class Constructor Source: https://github.com/veg/phylotree.js/blob/master/API.md Constructor for the Phylotree class. Initializes a phylogenetic tree instance with Newick, PhyloXML, or JSON data and optional configuration options. ```APIDOC Phylotree: __constructor(nwk, options) Parameters: nwk (Object): A Newick string, PhyloXML string, or hierarchical JSON representation of a phylogenetic tree. options (Object): Configuration options, e.g., bootstrap_values, type, format. Returns: Phylotree: The phylotree instance, following the builder pattern. ``` -------------------------------- ### Phylotree Class Overview (APIDOC) Source: https://github.com/veg/phylotree.js/blob/master/API.md Provides an overview of the Phylotree class. This class is responsible for managing phylotree instances, setting up event listeners, parsing specific tags within the tree structure, and generating links that visually represent branches. ```APIDOC Phylotree: Description: An instance of a phylotree. Sets event listeners, parses tags, and creates links that represent branches. Usage: Represents a phylotree object in the application. Dependencies: None explicitly mentioned in this snippet. Functionality: Manages phylotree state, handles user interactions via event listeners, and processes tree data for display. ``` -------------------------------- ### Get Node by Name Source: https://github.com/veg/phylotree.js/blob/master/API.md Retrieves a specific node from the tree by its name. ```APIDOC getNodeByName(name) Description: Get a node by name. Parameters: name (String): Name of the desired node. Returns: Node: Desired node. ``` -------------------------------- ### Get All Nodes Source: https://github.com/veg/phylotree.js/blob/master/API.md Retrieves an array containing all nodes present in the phylogenetic tree. ```APIDOC getNodes() Returns: Array - Nodes in the current ``phylotree``. ``` -------------------------------- ### phylotree.js Configuration Options Source: https://github.com/veg/phylotree.js/blob/master/README.md This section outlines the configurable options for phylotree.js, detailing their types, default values, and possible settings. These options control various aspects of the tree's layout, interactivity, and visual presentation. ```APIDOC phylotree.js Configuration Options: setOptions(options: object): Sets various configuration options for the phylotree. Options: left-right-spacing: (String) Determines layout size from left to right. Defaults to "fixed-step". Possible values: - "fixed-step": Determine width from padding and spacing. - "fit-to-size": Determine width from size array. top-bottom-spacing: (String) Determines layout size from top to bottom. Defaults to "fixed-step". Possible values: - "fixed-step": Determine width from padding and spacing. - "fit-to-size": Determine width from size array. brush: (Boolean) Whether or not the brush should be activated. Defaults to true. hide: (Boolean) Whether or not hiding a given node or subtree is enabled. Defaults to true. reroot: (Boolean) Whether or not rerooting on a given node is enabled. Defaults to true. compression: (Number) The percentage of original size for a collapsed node. Defaults to 0.2. show-scale: (Boolean) Determines whether or not scale bar for branch lengths is shown. left-offset: (Number) Amount of space on left side of phylotree. Defaults to 0. draw-size-bubbles: (Boolean) Determines whether nodes are drawn with a given size. Defaults to false. max-radius: (Number) Set an upper bound on the radius in a radial layout. Defaults to 768. collapsible: (Boolean) Determines whether or not nodes are collapsible. Defaults to true. selectable: (Boolean) Determines whether or not individual branches are selectable. Defaults to true. zoom: (Boolean) Determines whether or not zooming is enabled. Defaults to false. restricted-selectable: (Array | Boolean | String) Determines what types of global selection actions are possible. Defaults to false. Possible values: - false: No restrictions placed on global selection. - "all": Allow users to select all branches. - "none": Allow users to unselect all branches. - "all-leaf-nodes": Allow users to select all leaf nodes. - "all-internal-branches": Allow users to select all internal branches. align-tips: (Boolean) Determines whether tip names are aligned or not. Defaults to false. maximum-per-node-spacing: (Number) Determines maximum node spacing allocated when laying out left to right. Defaults to 100. minimum-per-node-spacing: (Number) Determines minimum node spacing allocated when laying out left to right. Defaults to 2. maximum-per-level-spacing: (Number) Determines maximum node spacing allocated when laying out top to bottom. Defaults to 100. minimum-per-level-spacing: (Number) Determines minimum node spacing allocated when laying out top to bottom. Defaults to 10. API Reference: A complete list of available functions can be found at [API.md](API.md) ``` -------------------------------- ### getRootNode: Get the root node Source: https://github.com/veg/phylotree.js/blob/master/API.md Retrieves the root node of the phylogenetic tree. ```APIDOC getRootNode() ``` -------------------------------- ### Phylotree.js API - Event Handling Source: https://github.com/veg/phylotree.js/blob/master/index.html Documentation for event listeners that can be attached to the tree container for handling user interactions and tree updates. Covers events like 'reroot' and methods for managing selections. ```APIDOC tree.display.countHandler(callback) - Registers a callback function to be executed when selection counts change. - Parameters: - callback (function): A function that receives a 'count' object (mapping selection names to counts). selectionLabel(label) - Sets the current selection label for the tree display. - Parameters: - label (string): The name of the current selection. Event: 'reroot' - Triggered when the tree is rerooted. - Usage: $('#tree_container').on('reroot', function(event) { // Handle reroot event }); ``` -------------------------------- ### Get Tree Tips Source: https://github.com/veg/phylotree.js/blob/master/API.md Retrieves an array containing all the tip nodes of the phylogenetic tree. ```APIDOC getTips() Returns: Array - Nodes in the current ``phylotree``. ```