### Initialize TidyTree with Newick String

Source: https://github.com/cdcgov/tidytree/blob/master/test/example.html

This example shows how to initialize the TidyTree library. It first applies basic CSS for page layout and then creates a TidyTree instance using a Newick formatted string and an options object specifying the parent element for rendering.

```javascript
html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; }
let newick = "(A:0.1,B:0.2,(C:0.3,D:0.4):0.5);";
let tree = new TidyTree(newick, { parent: "body" });
```

--------------------------------

### Context Menu Initialization

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Initializes a context menu function. The provided snippet is incomplete, but it suggests the start of a context menu handler that receives data 'd' and event 'e'. Further implementation details are missing.

```javascript
function contextMenu(d) {
  let e = d3.event;
  if (!e) retu
```

--------------------------------

### Quick Start: Initialize TidyTree with Newick Data

Source: https://github.com/cdcgov/tidytree/blob/master/README.md

This snippet demonstrates how to quickly integrate the TidyTree library into an HTML page. It requires d3.js as a dependency and initializes a phylogenetic tree from a Newick string, rendering it within the specified parent element.

```html
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/tidytree@0.5.0/dist/tidytree.min.js"></script>
```

```javascript
let newick = "(A:0.1,B:0.2,(C:0.3,D:0.4):0.5);";
let tree = new TidyTree(newick, { parent: "body" });
```

--------------------------------

### Node GUID Retrieval

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Retrieves unique identifiers (GUIDs) for nodes within the TidyTree, with options to filter for leaf nodes or based on a predicate.

```APIDOC
getNodeGUIDs(leavesOnly, predicate)
  - Retrieves the GUIDs of the nodes in the TidyTree instance.
  - Parameters:
    - leavesOnly: [boolean] Whether to retrieve GUIDs only for leaf nodes.
    - predicate: [function] A function that returns true if the node should be included.
  - Returns: [Array] An array of GUIDs of the nodes.
```

--------------------------------

### Get All Leaf Nodes

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Retrieves all descendant nodes that are considered leaves from a given node in the tree. Optionally, the starting node itself can be included in the result.

```APIDOC
getAllLeaves(node, includeSelf)
  Returns an array of all the child leaf nodes of the given node in a tree.
  Parameters:
    node [Object][75]: A node of the tree.
    includeSelf [boolean][77]: Whether to include the given node itself as a leaf node. Defaults to false.
  Returns:
    [Array][80]: An array of leaf nodes.
```

--------------------------------

### Document Ready and Tree Initialization

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Initializes the TidyTree application when the DOM is ready. It sets up Material Design components, parses URL parameters to load a tree file, and falls back to loading a default 'life.nwk' file if no URL is provided or loading fails.

```javascript
$(document).ready(function() {
  $("body").bootstrapMaterialDesign();
  const params = new URLSearchParams(window.location.search);
  const fileUrl = params.get("file");
  let treeFetched;
  if (fileUrl) {
    d3.select("#tree-url").property("value", fileUrl);
    treeFetched = fetchAndLoadTree(fileUrl);
  }
  if (!fileUrl || !treeFetched) {
    fetch("life.nwk").then(response => response.text().then(buildTree));
  }
});
```

--------------------------------

### TidyTree Class and Constructor

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Initializes a TidyTree object. The constructor accepts data, options, events, and a Newick string to set up the tree visualization.

```APIDOC
TidyTree(data, options, events, newick)
  - Creates a TidyTree object.
  - Parameters:
    - data: The initial data structure for the tree.
    - options [Object]: Configuration options for setting up the tree.
    - events: Event handlers for tree interactions.
    - newick [String]: A valid Newick string representing the phylogenetic tree.
```

--------------------------------

### Available Layouts, Types, and Modes

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Provides lists of valid configuration options for rendering trees, branches, and nodes.

```APIDOC
validLayouts
  - The available layouts for rendering trees.
  - Type: [Array]

validTypes
  - The available types for rendering branches.
  - Type: [Array]

validModes
  - The available modes for rendering branches.
  - Type: [Array]

validNodeColorModes
  - The available color modes for rendering nodes.
  - Type: [Array]

validBranchColorModes
  - The available color modes for rendering branches.
  - Type: [Array]
```

--------------------------------

### Fetch and Load Tree from URL

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Asynchronously fetches tree data from a given URL. It checks for HTTP errors, parses the response text, calls buildTree to render the tree, and updates the URL. Provides user feedback on failure.

```javascript
async function fetchAndLoadTree(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const text = await response.text();
    buildTree(text);
    updateQueryParam(url);
    return true;
  } catch (error) {
    alert("Failed to load the Newick tree. Check the URL and CORS settings.");
  }
  return false;
}
```

--------------------------------

### TidyTree Appearance and Styling Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for customizing the visual appearance of the tree, including colors, stretching, and node/label styling.

```APIDOC
setColorOptions(newColorOptions)
  - Sets the tree's color options.
  - Parameters:
    - newColorOptions [Object]: An object containing new color configuration.
  - Returns: The TidyTree object.

setHStretch(proportion)
  - Adjusts the horizontal stretching of the tree.
  - Parameters:
    - proportion [Number]: The proportion by which to stretch the tree horizontally.
  - Returns: The TidyTree object.

setVStretch(proportion)
  - Adjusts the vertical stretching of the tree.
  - Parameters:
    - proportion [Number]: The proportion by which to stretch the tree vertically.
  - Returns: The TidyTree object.

setBranchNodes(nodes)
  - Sets the branch nodes.
  - Parameters:
    - nodes: The branch nodes to set.
  - Returns: The TidyTree object.

setBranchLabels(labels)
  - Sets the branch labels.
  - Parameters:
    - labels: The branch labels to set.
  - Returns: The TidyTree object.

setBranchDistances(distances)
  - Sets the branch distances.
  - Parameters:
    - distances: The branch distances to set.
  - Returns: The TidyTree object.

setLeafNodes(nodes)
  - Sets the leaf nodes.
  - Parameters:
    - nodes: The leaf nodes to set.
  - Returns: The TidyTree object.

setEquidistantLeaves(equidistant)
  - Configures leaves to be displayed equidistantly.
  - Parameters:
    - equidistant [Boolean]: True to enable equidistant leaves, false otherwise.
  - Returns: The TidyTree object.

setLeafLabels(labels)
  - Sets the leaf labels.
  - Parameters:
    - labels: The leaf labels to set.
  - Returns: The TidyTree object.

setRuler(ruler)
  - Sets the ruler for the tree.
  - Parameters:
    - ruler: The ruler configuration.
  - Returns: The TidyTree object.
```

--------------------------------

### Load Tree from URL Button Handler

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles the click event for a 'Load URL' button. It retrieves the URL from an input field and calls fetchAndLoadTree to load the tree data.

```javascript
d3.select("#load-url").on("click", async function() {
  const url = d3.select("#tree-url").property("value").trim();
  if (url) {
    fetchAndLoadTree(url);
  } else {
    alert("Please enter a valid URL.");
  }
});
```

--------------------------------

### TidyTree Rendering and Layout Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods related to drawing, redrawing, and controlling the visual layout of the phylogenetic tree.

```APIDOC
draw(selector)
  - Draws the phylogenetic tree on the element specified by the CSS selector.
  - Parameters:
    - selector [String]: A CSS selector for the target element.
  - Returns: The TidyTree object.

redraw()
  - Redraws the tree links and relocates nodes accordingly.
  - Returns: The TidyTree object.

recenter()
  - Centers the tree within the view.
  - Returns: The TidyTree object.

setLayout(newLayout)
  - Sets the tree's layout.
  - Parameters:
    - newLayout [String]: The name of the new layout to apply.
  - Returns: The TidyTree object.
```

--------------------------------

### Build Tree Function

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Core function to create or update the TidyTree visualization. It instantiates the TidyTree class with Newick data and various configuration options derived from DOM elements. It also accepts optional callbacks for context menus and tooltips.

```javascript
function buildTree(newick) {
  tree = new TidyTree(
    newick ? newick : tree.data.clone(),
    {
      parent: "#tree",
      layout: d3.select("#layout").node().value,
      mode: d3.select("#mode").node().value,
      type: d3.select("#type").node().value,
      colorOptions: {
        nodeColorMode: "list",
        branchColorMode: "monophyletic",
        defaultNodeColor: d3.select("#defaultNodeColor").node().value,
        defaultBranchColor: d3.select("#defaultBranchColor").node().value,
        highlightColor: d3.select("#highlightColor").node().value,
      },
      leafNodes: d3.select("#leafNodes").node().checked,
      branchNodes: d3.select("#branchNodes").node().checked,
      leafLabels: d3.select("#leafLabels").node().checked,
      equidistantLeaves: d3.select("#equidistantLeaves").node().checked,
      branchLabels: d3.select("#branchLabels").node().checked,
      branchDistances: d3.select("#branchDistances").node().checked,
      ruler: d3.select("#ruler").node().checked,
      animation: parseFloat(d3.select("#animation").node().value),
      margin: [10, 10, 70, 30]
    },
    {
      contextmenu: contextMenu,
      showtooltip: showTooltip,
      hidetooltip: hideTooltip
    }
  );
}
```

--------------------------------

### File Input Handler

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles file uploads via an input element. When a file is selected, it uses FileReader to read the file content as text and then calls buildTree to render the tree.

```javascript
d3.select("#source").on("input", function() {
  let reader = new FileReader();
  reader.onload = () => buildTree(reader.result);
  reader.readAsText(d3.event.srcElement.files[0]);
});
```

--------------------------------

### Populate Select Options

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Dynamically populates dropdown (<select>) elements with options from the TidyTree configuration object. It iterates through 'layout', 'mode', and 'type' settings to create corresponding options.

```javascript
["layout", "mode", "type"].forEach(thing => {
  var title = "valid" + thing[0].toUpperCase() + thing.slice(1) + "s";
  d3.select("#" + thing)
    .selectAll("option")
    .data(TidyTree[title])
    .enter()
    .append("option")
    .text(d => d);
});
```

--------------------------------

### TidyTree Mode, Type, and Animation Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the tree's operational mode, display type, and animation settings.

```APIDOC
setMode(newMode)
  - Sets the tree's operational mode.
  - Parameters:
    - newMode [String]: The name of the new mode to apply.
  - Returns: The TidyTree object.

setType(newType)
  - Sets the tree's display type.
  - Parameters:
    - newType [Boolean]: The new type setting.
  - Returns: The TidyTree object.

setRotation(degrees)
  - Rotates the tree by a specified number of degrees.
  - Parameters:
    - degrees [Number]: The number of degrees to rotate.
  - Returns: The TidyTree object.

setAnimation(time)
  - Sets the animation time for tree transitions.
  - Note: This method does not trigger an immediate redraw.
  - Parameters:
    - time [Number]: The duration of the animation in milliseconds.
  - Returns: The TidyTree object.
```

--------------------------------

### TidyTree Event Handling and Iteration Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for managing events, iterating over tree elements, and retrieving specific data.

```APIDOC
eachBranchNode(callback)
  - Iterates over each branch node, executing a callback function.
  - Parameters:
    - callback: A function to execute for each branch node.
  - Returns: The TidyTree object.

eachBranchLabel(callback)
  - Iterates over each branch label, executing a callback function.
  - Parameters:
    - callback: A function to execute for each branch label.
  - Returns: The TidyTree object.

eachBranchDistance(callback)
  - Iterates over each branch distance, executing a callback function.
  - Parameters:
    - callback: A function to execute for each branch distance.
  - Returns: The TidyTree object.

eachLeafNode(callback)
  - Iterates over each leaf node, executing a callback function.
  - Parameters:
    - callback: A function to execute for each leaf node.
  - Returns: The TidyTree object.

eachLeafLabel(callback)
  - Iterates over each leaf label, executing a callback function.
  - Parameters:
    - callback: A function to execute for each leaf label.
  - Returns: The TidyTree object.

on(event, handler)
  - Attaches an event listener.
  - Parameters:
    - event [String]: The name of the event to listen for.
    - handler: The function to call when the event is triggered.
  - Returns: The TidyTree object.

off(event, handler)
  - Detaches an event listener.
  - Parameters:
    - event [String]: The name of the event to detach.
    - handler: The handler function to remove.
  - Returns: The TidyTree object.

trigger(event, payload)
  - Triggers a specific event.
  - Parameters:
    - event [String]: The name of the event to trigger.
    - payload: Data to pass with the event.
  - Returns: The TidyTree object.
```

--------------------------------

### Helper Functions

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Utility functions used within the TidyTree library for calculations and data retrieval.

```APIDOC
circularPoint(radius, angle)
  - Calculates coordinates for a point on a circle.
  - Parameters:
    - radius [Number]: The radius of the circle.
    - angle [Number]: The angle in radians.
  - Returns: An object with x and y coordinates.

findNodeColor(node, colorOptions)
  - Determines the color for a given node based on provided options.
  - Parameters:
    - node: The node object.
    - colorOptions [Object]: Configuration for node coloring.
  - Returns: The determined color string.

findBranchColor(branch, colorOptions)
  - Determines the color for a given branch based on provided options.
  - Parameters:
    - branch: The branch object.
    - colorOptions [Object]: Configuration for branch coloring.
  - Returns: The determined color string.

getAllLeaves(node)
  - Recursively retrieves all leaf nodes starting from a given node.
  - Parameters:
    - node: The starting node object.
  - Returns: An array of leaf node objects.
```

--------------------------------

### TidyTree Utility and Search Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for retrieving specific data, searching within the tree, and performing utility operations.

```APIDOC
getNodeGUIDs()
  - Retrieves all node GUIDs from the tree.
  - Returns: An array of node GUIDs.

search(query)
  - Searches the tree for nodes matching a query.
  - Parameters:
    - query: The search query.
  - Returns: An array of matching nodes.

validLayouts()
  - Returns a list of available tree layouts.
  - Returns: An array of strings representing valid layout names.

validTypes()
  - Returns a list of available tree types.
  - Returns: An array of strings representing valid type names.

validModes()
  - Returns a list of available tree modes.
  - Returns: An array of strings representing valid mode names.

validNodeColorModes()
  - Returns a list of available node color modes.
  - Returns: An array of strings representing valid node color mode names.

validBranchColorModes()
  - Returns a list of available branch color modes.
  - Returns: An array of strings representing valid branch color mode names.
```

--------------------------------

### Reset Button Handler

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles the click event for a 'Reset' button. It calls the buildTree function without arguments, effectively reloading the tree with its current data and default settings.

```javascript
d3.select("#reset").on("click", e => buildTree());
```

--------------------------------

### TidyTree CSS Styles

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Core CSS styles for the TidyTree web application, defining layout, element appearance, and interactive components like accordions and tooltips.

```css
html, body, #tree { height: 100%; overflow: hidden; }
#options { height: 100%; background-color: lightgray; }
.accordion-header { background-color: darkgrey; }
.accordion-body { background-color: white; }
.form-group { margin: 0.4rem; }
[type="range"] { width: 100%; }
#toggle-options { position: absolute; top: calc(50% - 10px); left: 357px; background: lightgray; border-radius: 0 5px 5px 0; padding: 5px; }
#tree { padding: 0; }
.tidytree-node circle { fill: steelblue; stroke: #fff; stroke-width: 1px; }
.tidytree-link { stroke-width: 2px; }
#search-wrapper { position: absolute; top: -50px; right: 100px; padding: 5px; background: lightgray; border: 1px solid darkgray; border-radius: 5px; }
#search-close { background: white; border: 1px solid darkgray; padding: 2px 6px; }
#context-menu, #tooltip { position: absolute; display: none; z-index: -1; }
#tooltip { background: lightgray; border-radius: 0.25rem; padding: 0.25rem; }
#export { position: fixed; bottom: 30px; right: 10px; z-index: 1001; }
#export-format { height: 33px; padding: 7px 0; }
```

--------------------------------

### Event Handling

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for attaching, detaching, and triggering event listeners within the TidyTree.

```APIDOC
on(events, callback)
  - Attaches a new event listener. Note: This functionality is not yet fully implemented.
  - Parameters:
    - events: [String] A space-delimited list of event names.
    - callback: [Function] The function to run when one of the `events` occurs.
  - Returns: [TidyTree] The TidyTree on which this method was called.

off(events)
  - Removes all event listeners from the given events.
  - Parameters:
    - events: [String] A space-delimited list of event names.
  - Returns: [TidyTree] The TidyTree on which this method was called.

trigger(events, args)
  - Forces the tree to respond as though an `event` has occurred.
  - Parameters:
    - events: [String] Space-delimited list of names of events to trigger.
    - args: Spread Any arguments which should be passed to the event handler(s).
  - Returns: any The output of the callback run on `event`.
```

--------------------------------

### Branch Label Management

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the visibility and styling of branch labels in the TidyTree.

```APIDOC
setBranchLabels(show)
  - Sets the TidyTree's branchLabels visibility.
  - Parameters:
    - show: [Boolean] Should the TidyTree show branchLabels?
  - Returns: [TidyTree] The TidyTree object.

eachBranchLabel(styler)
  - Restyles Branch Labels.
  - Parameters:
    - styler: [Function] A function that restyles each node. It receives a reference to the DOM node and an associated data object.
  - Returns: [TidyTree] The TidyTree object.
```

--------------------------------

### Branch Node Management

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the visibility and styling of branch nodes within the TidyTree.

```APIDOC
setBranchNodes(show)
  - Shows or hides the Branch Nodes.
  - Parameters:
    - show: [Boolean] Should Branch nodes be shown?
  - Returns: [TidyTree] The TidyTree object.

eachBranchNode(styler)
  - Restyles Leaf Nodes.
  - Parameters:
    - styler: [Function] A function that restyles each node. It receives a reference to the DOM node and an associated data object.
  - Returns: [TidyTree] The TidyTree Object.
```

--------------------------------

### Export Tree Visualization

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles the export functionality for the tree visualization. Users can select an export format (nwk, png, svg) and filename. It utilizes specific library functions for each format, including Newick conversion, PNG export, and SVG saving.

```javascript
d3.select("#export-download").on("click", function() {
  let format = document.getElementById("export-format").value;
  let filename = document.getElementById("export-filename").value;
  if (format === "nwk") {
    saveAs(
      new Blob([tree.data.toNewick()], { type: "text/plain;charset=utf-8" }),
      filename + "." + format
    );
  } else if (format === "png") {
    saveSvgAsPng(d3.select("#tree svg").node(), filename + ".png", {});
  } else {
    prepareSvg(d3.select("#tree svg").node(), {}, function(svg) {
      saveAs(
        new Blob([svg], { type: "image/svg+xml" }),
        filename + ".svg"
      );
    });
  }
});
```

--------------------------------

### Initialize Service Worker

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Registers a service worker for the application if the browser supports it. This is typically used for caching or offline capabilities.

```javascript
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js");
}
```

--------------------------------

### Configure Tree Size and Label Styles

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Manages user adjustments for various visual elements of the tree, including the size of branch nodes, branch labels, branch distances, leaf nodes, and leaf labels. These changes are applied dynamically to the corresponding SVG elements.

```javascript
d3.select("#branchNodeSize").on("input", function() {
  tree.eachBranchNode((node, data) => {
    d3.select(node).attr("r", this.value);
  });
});

d3.select("#branchLabelSize").on("input", function() {
  tree.eachBranchLabel((label, data) => {
    d3.select(label).style("font-size", this.value + "px");
  });
});

d3.select("#branchDistanceSize").on("input", function() {
  tree.eachBranchDistance((label, data) => {
    d3.select(label).style("font-size", this.value + "px");
  });
});

d3.select("#leafNodeSize").on("input", function() {
  tree.eachLeafNode((node, data) => {
    d3.select(node).attr("r", this.value);
  });
});

d3.select("#leafLabelSize").on("input", function() {
  tree.eachLeafLabel((label, data) => {
    d3.select(label).style("font-size", this.value + "px");
  });
});
```

--------------------------------

### Leaf Node Management

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the visibility and styling of leaf nodes within the TidyTree.

```APIDOC
setLeafNodes(show)
  - Shows or Hides the Leaf Nodes.
  - Parameters:
    - show: [Boolean] Should leaf nodes be visible?
  - Returns: [TidyTree] The TidyTree object.

eachLeafNode(styler)
  - Restyles Leaf Nodes.
  - Parameters:
    - styler: [Function] A function that restyles each node. It receives a reference to the DOM node and an associated data object.
  - Returns: [TidyTree] The TidyTree object.
```

--------------------------------

### Configure Tree Color Options

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles user input from color pickers and mode selectors to update the tree's color scheme. It adjusts node and branch colors, highlight colors, and leaf visibility based on selected modes like 'none', 'predicate', or 'monophyletic'.

```javascript
d3.select("#defaultNodeColor").on("input", function() {
  tree.setColorOptions({
    nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "predicate",
    branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
    defaultNodeColor: this.value,
    defaultBranchColor: d3.select("#defaultBranchColor").node().value,
    highlightColor: d3.select("#highlightColor").node().value,
    leavesOnly: d3.select("#highlightMode").property("value") === "monophyletic" ? false : true,
    predicate: d3.select("#highlightMode").property("value") === "monophyletic" ? isEColiOrShigellaNode : null
  });
});

d3.select("#defaultBranchColor").on("input", function() {
  tree.setColorOptions({
    nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "list",
    branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
    defaultNodeColor: d3.select("#defaultNodeColor").node().value,
    defaultBranchColor: this.value,
    highlightColor: d3.select("#highlightColor").node().value,
    leavesOnly: d3.select("#highlightMode").property("value") === "monophyletic" ? false : true,
    predicate: d3.select("#highlightMode").property("value") === "monophyletic" ? isEColiOrShigellaNode : null
  });
});

d3.select("#highlightColor").on("input", function() {
  tree.setColorOptions({
    nodeColorMode: d3.select("#highlightMode").property("value") === "none" ? "none" : "list",
    branchColorMode: d3.select("#highlightMode").property("value") === "monophyletic" ? "monophyletic" : "none",
    defaultNodeColor: d3.select("#defaultNodeColor").node().value,
    defaultBranchColor: d3.select("#defaultBranchColor").node().value,
    highlightColor: this.value,
    leavesOnly: d3.select("#highlightMode").property("value") === "monophyletic" ? false : true,
    predicate: d3.select("#highlightMode").property("value") === "monophyletic" ? isEColiOrShigellaNode : null
  });
});
```

--------------------------------

### Leaf Label Management

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the visibility and styling of leaf labels in the TidyTree.

```APIDOC
setLeafLabels(show)
  - Shows or Hides the TidyTree's Leaf Labels.
  - Parameters:
    - show: [Boolean] Should the TidyTree show leafLabels?
  - Returns: [TidyTree] The TidyTree object.

eachLeafLabel(styler)
  - Restyles Leaf Labels.
  - Parameters:
    - styler: [Function] A function that restyles each node. It receives a reference to the DOM node and an associated data object.
  - Returns: [TidyTree] The TidyTree object.
```

--------------------------------

### JavaScript D3 Global Event Handling

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Provides global event handling for the D3.js visualization. It hides context menus and tooltips when the body is clicked and redraws the tree when the window is resized.

```javascript
d3.select("body").on("click", function() {
  d3.selectAll("#context-menu, #tooltip")
    .style("z-index", -1)
    .style("display", "none");
});

d3.select(window).on("resize", function() {
  tree.redraw();
});
```

--------------------------------

### TidyTree Destruction Method

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Method to clean up and remove the TidyTree instance and its associated elements.

```APIDOC
destroy()
  - Cleans up the TidyTree instance, removing event listeners and DOM elements.
  - Returns: void.
```

--------------------------------

### JavaScript D3 Context Menu for Tree Interaction

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles the display and behavior of a context menu for a D3.js tree visualization. It positions the menu based on mouse events and attaches click handlers to various tree manipulation actions like rerooting, rotating, flipping, sorting, removing, isolating, excising, simplifying, and consolidating nodes.

```javascript
function showContextMenu(d) {
  let e = d3.event;
  e.preventDefault();
  hideTooltip();
  d3.select("#context-menu")
    .style("top", e.pageY + "px")
    .style("left", e.pageX + "px")
    .style("z-index", 1000)
    .style("display", "block");
  d3.select("#reroot").on("click", c => tree.setData(d[0].data.reroot()));
  d3.select("#rotate").on("click", c => tree.setData(d[0].data.rotate().getRoot()));
  d3.select("#flip").on("click", c => tree.setData(d[0].data.flip().getRoot()));
  d3.select("#sort").on("click", c => tree.setData(d[0].data.sort().getRoot()));
  d3.select("#remove").on("click", c => tree.setData(d[0].data.remove()));
  d3.select("#isolate").on("click", c => tree.setData(d[0].data.isolate()));
  d3.select("#excise").on("click", c => tree.setData(d[0].data.excise().getRoot()));
  d3.select("#simplify").on("click", c => tree.setData(d[0].data.simplify().getRoot()));
  d3.select("#consolidate").on("click", c => tree.setData(d[0].data.consolidate().getRoot()));
}
```

--------------------------------

### Update Tree Highlighting Mode

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles changes to the 'highlightMode' input, allowing users to switch between different highlighting strategies (none, leaves, monophyletic). It updates the TidyTree's color options accordingly.

```javascript
d3.select("#highlightMode").on("input", function() {
  if (this.value === "none") {
    tree.setColorOptions({
      nodeColorMode: "none",
      branchColorMode: "none",
      defaultNodeColor: d3.select("#defaultNodeColor").node().value,
      defaultBranchColor: d3.select("#defaultBranchColor").node().value,
      highlightColor: d3.select("#highlightColor").node().value
    });
  } else if (this.value === "leaves") {
    tree.setColorOptions({
      nodeColorMode: "predicate",
      branchColorMode: "none",
      defaultNodeColor: d3.select("#defaultNodeColor").node().value,
      defaultBranchColor: d3.select("#defaultBranchColor").node().value,
      highlightColor: d3.select("#highlightColor").node().value,
      leavesOnly: true,
    });
  } else if (this.value === "monophyletic") {
    tree.setColorOptions({
      nodeColorMode: "predicate",
      branchColorMode: "monophyletic",
      defaultNodeColor: d3.select("#defaultNodeColor").node().value,
      defaultBranchColor: d3.select("#defaultBranchColor").node().value,
      highli
```

--------------------------------

### Toggle Options Panel

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Manages the collapsing and expanding of an options panel. It animates the width of the panel and changes the toggle button text ('<' or '>'). The tree is redrawn after the animation completes to reflect any potential layout changes.

```javascript
d3.select("#toggle-options").on("click", function() {
  var that = d3.select(this);
  if (that.text() === "<") {
    d3.select("#options")
      .transition()
      .duration(400)
      .style("width", "0px");
    that
      .text(">")
      .transition()
      .duration(400)
      .style("left", "15px")
      .end()
      .then(() => tree.redraw());
  } else {
    d3.select("#options")
      .transition()
      .duration(400)
      .style("width", "376px");
    that
      .text("<")
      .transition()
      .duration(400)
      .style("left", "376px")
      .end()
      .then(() => tree.redraw());
  }
});
```

--------------------------------

### TidyTree Data Management Methods

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for updating the tree's underlying data structure. This includes replacing the entire tree with new data or a new Newick string, or re-rooting the tree.

```APIDOC
setData(data)
  - Updates the TidyTree's underlying data structure with a patristic.Branch object.
  - Use this to replace the tree or when underlying data changes (e.g., re-rooting).
  - Parameters:
    - data [Object]: A patristic.Branch object.
  - Returns: The TidyTree object.

setTree(newick)
  - Updates the TidyTree's underlying data structure with a new Newick string.
  - Use this to replace the tree with a completely different one.
  - Parameters:
    - newick [String]: A valid Newick string.
  - Returns: The TidyTree object.
```

--------------------------------

### Tree Search

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Searches the TidyTree based on a provided test function, returning matching nodes.

```APIDOC
search(test)
  - Searches the tree and returns Search Results.
  - Parameters:
    - test: [Function] A function which takes a Branch and returns a Truthy or Falsy value.
  - Returns: [Array] The array of results.
```

--------------------------------

### Update URL Query Parameter

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Updates the browser's URL with a new file parameter, allowing the current tree state to be shared or bookmarked. It uses history.replaceState to avoid adding new entries to the browser history.

```javascript
function updateQueryParam(url) {
  const newUrl = new URL(window.location);
  newUrl.searchParams.set("file", url);
  window.history.replaceState({}, "", newUrl);
}
```

--------------------------------

### Tree Destruction

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Cleans up and removes the TidyTree instance from the DOM and memory.

```APIDOC
destroy()
  - Destroys the TidyTree.
  - Returns: [undefined] The TidyTree instance is removed.
```

--------------------------------

### Branch Distance Management

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Methods for controlling the visibility and styling of branch distances in the TidyTree.

```APIDOC
setBranchDistances(show)
  - Shows or hides the TidyTree's branch distances.
  - Parameters:
    - show: [Boolean] Should the TidyTree show branch distances?
  - Returns: [TidyTree] The TidyTree Object.

eachBranchDistance(styler)
  - Restyles Branch Distances.
  - Parameters:
    - styler: [Function] A function that restyles each node. It receives a reference to the DOM node and an associated data object.
  - Returns: [TidyTree] The TidyTree Object.
```

--------------------------------

### Find Branch Color

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Retrieves the color for a given link (branch) in the tree visualization. It uses a configuration object that specifies different color schemes and rules for branches.

```APIDOC
findBranchColor(link, colorOptions)
  Find the color of a given link based on the provided color options.
  Parameters:
    link [string][76]: The link for which to find the color.
    colorOptions [object][75]: The options for different link colors.
  Returns:
    [string][76]: The color of the link.
```

--------------------------------

### Keyboard Shortcuts for Search and Close

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Implements keyboard shortcuts for accessing the search functionality (Ctrl+F or F3) and closing search/modal elements (Escape key). It controls the visibility and focus of a search input field.

```javascript
window.addEventListener("keydown", function(e) {
  if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
    e.preventDefault();
    d3.select("#search-wrapper")
      .transition()
      .duration(300)
      .style("top", "5px");
    d3.select("#search")
      .node()
      .focus();
  }
  if (e.keyCode === 27) {
    e.preventDefault();
    d3.select("#search-wrapper")
      .transition()
      .duration(300)
      .style("top", "-50px");
  }
});
```

--------------------------------

### Ruler Visibility

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Controls the visibility of the ruler in the TidyTree visualization.

```APIDOC
setRuler(show)
  - Shows or hides the TidyTree's ruler.
  - Parameters:
    - show: [Boolean] Should the TidyTree show the ruler?
  - Returns: [TidyTree] The TidyTree Object.
```

--------------------------------

### Leaf Equidistance Setting

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Configures the TidyTree to display leaves at equidistant positions.

```APIDOC
setEquidistantLeaves(isEquidistant)
  - Sets the TidyTree's leaves to be equidistant.
  - Parameters:
    - isEquidistant: [Boolean] Indicates if leaves should be equidistant.
```

--------------------------------

### Animation Settings

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Controls the animation duration for TidyTree operations. Setting time to 0 disables animations.

```APIDOC
setAnimationTime(time)
  - Sets the desired duration of an animation, in milliseconds.
  - Parameters:
    - time: [number] The duration in ms. Set to 0 to turn animations off.
  - Returns: [TidyTree] The TidyTree object.
```

--------------------------------

### Set Tree Animation Speed

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Allows users to control the animation speed of the tree visualization. The input value is parsed as a float and passed to the tree's animation setting method.

```javascript
d3.select("#animation").on("input", function() {
  tree.setAnimation(parseFloat(this.value));
});
```

--------------------------------

### Update Tree on Select Change

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Listens for 'change' events on select elements (excluding those with class 'skip'). When a change occurs, it updates the corresponding TidyTree property (e.g., layout, mode) and re-centers the tree.

```javascript
d3.selectAll("select")
  .filter(":not(.skip)")
  .on("change", function() {
    var thing = this.id[0].toUpperCase() + this.id.slice(1);
    tree["set" + thing](this.value);
    tree.recenter();
  });
```

--------------------------------

### Close Search Wrapper

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Provides a click handler for a close button associated with the search functionality. This handler animates the search wrapper element to move off-screen, effectively hiding the search interface.

```javascript
d3.select("#search-close").on("click", () => {
  d3.select("#search-wrapper")
    .transition()
    .duration(300)
    .style("top", "-50px");
});
```

--------------------------------

### JavaScript D3 Tooltip Display for Tree Nodes

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Manages the display of tooltips for nodes in a D3.js tree visualization. It shows the node ID when hovering over a node, provided a checkbox is enabled, and positions the tooltip near the mouse cursor.

```javascript
function showTooltip(d) {
  if (!d3.select("#tooltips").node().checked) return;
  let e = d3.event;
  e.preventDefault();
  d3.select("#tooltip")
    .text(d[0].data.id)
    .style("top", e.pageY + "px")
    .style("left", e.pageX + 5 + "px")
    .style("z-index", 1000)
    .style("display", "block");
}

function hideTooltip() {
  d3.selectAll("#tooltip")
    .style("z-index", -1)
    .style("display", "none");
}
```

--------------------------------

### Search Tree Nodes

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles live search functionality for tree nodes. As the user types, it filters nodes based on their ID. Matching nodes have their circles colored red, while non-matching nodes revert to steelblue. If the search input is cleared, all nodes are reset to steelblue.

```javascript
d3.select("#search").on("input", () => {
  if (!d3.event.target.value.length) return tree.parent.selectAll("circle").style("fill", "steelblue");
  tree
    .search(d => !d.data.id.includes(d3.event.target.value))
    .selectAll("circle")
    .style("fill", "steelblue");
  tree
    .search(d => d.data.id.includes(d3.event.target.value))
    .selectAll("circle")
    .style("fill", "red");
});
```

--------------------------------

### Calculate Circular Point Coordinates

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

Calculates the x and y coordinates of a point on a circle given its center and radius. This function is useful for positioning elements in a circular layout.

```APIDOC
circularpoint(x, y, radius, angle)
  Calculates the coordinates of a point on a circle.
  Parameters:
    x [number]: The x-coordinate of the center of the point.
    y [number]: The y-coordinate of the center of the point.
    radius [number]: The radius of the circle.
    angle [number]: The angle in radians for the point on the circle.
  Returns:
    [Array][80]<[number][78]>: An array containing the new x and y coordinates of the point on the circle.
```

--------------------------------

### Update Tree on Checkbox Change

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Listens for 'change' events on input elements of type 'checkbox' (excluding those with class 'skip'). It updates the corresponding TidyTree property (e.g., leafNodes, leafLabels) based on the checkbox's checked state.

```javascript
d3.selectAll("input")
  .filter('[type="checkbox"]:not(.skip)')
  .on("change", function() {
    var thing = this.id[0].toUpperCase() + this.id.slice(1);
    tree["set" + thing](this.checked);
  });
```

--------------------------------

### Circular Point Calculation

Source: https://github.com/cdcgov/tidytree/blob/master/docs/README.md

A utility function to calculate the coordinates of a point transformed onto a circle.

```APIDOC
circularPoint(...)
  - Calculate the coordinates of a point transformed onto a circle.
```

--------------------------------

### Update Tree on Range Input

Source: https://github.com/cdcgov/tidytree/blob/master/app/index.html

Handles 'input' events on range slider elements (excluding those with class 'skip'). It temporarily disables animation, updates the corresponding TidyTree property (e.g., animation duration), and then restores the animation setting.

```javascript
d3.selectAll("input")
  .filter('[type="range"]:not(.skip)')
  .on("input", function() {
    var cached = tree.animation;
    tree.setAnimation(0);
    var thing = this.id[0].toUpperCase() + this.id.slice(1);
    tree["set" + thing](parseFloat(this.value));
    tree.setAnimation(cached);
  });
```