@grunwaldlab/heat-tree 0.2.0 → 0.3.0

package/dist/heat-tree.es.min.js

@@ -2869,7 +2869,7 @@ function zoom() {
   };
   return zoom2;
 }
-const styles = ".ht-widget{display:flex;flex-direction:column;width:100%;height:100%}.ht-toolbar{flex:0 0 auto;margin-bottom:4px;display:flex;flex-direction:column;position:relative}.ht-toggle-container{position:absolute;top:0;right:0;padding:4px 8px;pointer-events:none}.ht-control-panel-toggle{background-color:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;gap:4px;transition:opacity .2s;pointer-events:auto}.ht-control-panel-toggle:hover{opacity:.7}.ht-control-panel-toggle .ht-toggle-arrow{transition:transform .3s}.ht-control-panel-toggle.collapsed .ht-toggle-arrow{transform:rotate(180deg)}.ht-control-panel-toggle .ht-hamburger-icon{color:#333}.ht-collapsible-panel{max-height:1000px;transition:max-height .3s ease-in-out}.ht-collapsible-panel.ht-panel-collapsed{max-height:0}.ht-tabs{display:flex;gap:20px;padding:4px 8px;background-color:#f5f5f5;border-bottom:2px solid #ddd;-webkit-user-select:none;user-select:none}.ht-tab{cursor:pointer;padding:2px 4px;font-family:sans-serif;font-size:14px;color:#333;border-bottom:2px solid transparent;transition:all .2s}.ht-tab:hover{color:#666}.ht-tab.active{color:#000;font-weight:700;border-bottom-color:#007bff}.ht-tab.active:hover{color:#000}.ht-tab.disabled{color:#999;cursor:not-allowed;opacity:.5}.ht-tab.disabled:hover{color:#999}.ht-controls{padding:2px 8px;background-color:#fafafa;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;min-height:26px}.ht-controls.hidden{display:none}.ht-control-group{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;transition:border-bottom-color .2s}.ht-control-group.ht-aesthetic-editing{border-bottom-color:#007bff}.ht-control-label{font-family:sans-serif;font-size:14px;color:#333;white-space:nowrap;display:flex;align-items:center}.ht-button{font-size:14px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;white-space:nowrap}.ht-button:hover{background-color:#d0d0d0}.ht-button:disabled{background-color:#f0f0f0;color:#999;cursor:not-allowed}.ht-button.primary{background-color:#007bff;color:#fff;font-weight:700}.ht-button.primary:hover{background-color:#0056b3}.ht-icon-button{font-size:14px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;padding:2px}.ht-icon-button:hover{background-color:#d0d0d0}.ht-icon-button svg{display:block}.ht-select{padding:1px 2px;font-size:14px;border:1px solid #ccc;border-radius:4px}.ht-slider{cursor:pointer;width:150px}.ht-toggle{width:50px;background-color:#ccc;border-radius:12px;position:relative;cursor:pointer;transition:background-color .3s;flex-shrink:0}.ht-toggle.active{background-color:#007bff}.ht-toggle-knob{background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .3s}.ht-toggle.active .ht-toggle-knob{left:calc(100% - 2px);transform:translate(-100%)}.ht-number-input{font-size:14px;border:1px solid #ccc;border-radius:4px;width:80px}.ht-text-input{font-size:14px;border:1px solid #ccc;border-radius:4px;padding:2px 4px;width:100px}.ht-aesthetic-settings{padding:2px 8px;background-color:#f0f0f0;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;max-height:1000px;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.ht-aesthetic-settings.hidden{max-height:0;padding-top:0;padding-bottom:0;border-bottom:none}.ht-color-palette-editor{display:flex;gap:8px;align-items:center}.ht-palette-buttons-container{display:flex;flex-direction:column;gap:2px}.ht-palette-button{width:24px;height:24px;font-size:14px;font-weight:700;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s}.ht-palette-button:hover{background-color:#d0d0d0}.ht-gradient-container{display:flex;gap:8px}.ht-gradient-column{display:flex;flex-direction:column;gap:4px}.ht-color-squares-container{display:flex;position:relative;height:16px;width:200px}.ht-color-square-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%)}.ht-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-color-square-tick{width:2px;height:8px;background-color:#333}.ht-gradient-box{width:200px;height:24px;border:1px solid #ccc;border-radius:4px;position:relative}.ht-range-slider-container{width:200px;height:12px;position:relative;border:1px solid #ccc;border-radius:4px;background:#f0f0f0;display:flex;align-items:center}.ht-range-handle{position:absolute;width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:ew-resize;transform:translate(-50%)}.ht-range-handle-indicator{position:absolute;bottom:90%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.ht-null-color-column{display:flex;flex-direction:column;gap:4px}.ht-null-color-square-container{display:flex;position:relative;height:16px;justify-content:center}.ht-null-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-null-color-square-tick{width:2px;height:6px;background-color:#333;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.ht-null-color-box{width:16px;height:24px;border:1px solid #ccc;border-radius:4px;position:relative}.ht-null-color-reset-container{position:relative;display:flex;align-items:center;justify-content:center}.ht-null-color-reset-indicator{position:absolute;bottom:85%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.ht-null-color-reset{font-size:14px;color:#d00;font-weight:700;line-height:1;-webkit-user-select:none;user-select:none;cursor:pointer}.ht-tree{flex:1 1 auto;min-height:0;position:relative}.ht-tree svg{display:block}.picker_wrapper,.picker_wrapper.popup{z-index:999999!important;position:fixed!important}.picker_wrapper *,.picker_selector,.picker_slider,.picker_editor,.picker_sample,.picker_done,.picker_cancel{pointer-events:auto!important}";
+const styles = ".ht-widget{color-scheme:light!important;--color-background: #ffffff;--color-text: #333333;--color-border: #dddddd;--color-muted: #666666;--color-accent: #007bff;background-color:var(--color-background);color:var(--color-text);display:flex;flex-direction:column;width:100%;height:100%}.ht-toolbar{flex:0 0 auto;margin-bottom:4px;display:flex;flex-direction:column;position:relative}.ht-toggle-container{position:absolute;top:0;right:0;padding:4px 8px;z-index:10}.ht-control-panel-toggle{background-color:transparent;border:none;cursor:pointer;padding:0 4px;display:flex;align-items:center;gap:4px;transition:opacity .2s}.ht-control-panel-toggle:hover{opacity:.7}.ht-control-panel-toggle .ht-toggle-arrow{transition:transform .3s}.ht-control-panel-toggle.collapsed .ht-toggle-arrow{transform:rotate(180deg)}.ht-control-panel-toggle .ht-hamburger-icon{color:#333}.ht-collapsible-panel{max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out}.ht-collapsible-panel.ht-panel-collapsed{max-height:0}.ht-widget .ht-tabs{display:flex;gap:20px;padding:4px 8px;background-color:#f5f5f5;border-bottom:2px solid #ddd;-webkit-user-select:none;user-select:none}.ht-widget .ht-tab{cursor:pointer;padding:0 4px;font-family:sans-serif;font-size:12px;color:#333;border-bottom:2px solid transparent;transition:all .2s}.ht-widget .ht-tab:hover{color:#666}.ht-widget .ht-tab.active{color:#000;font-weight:700;border-bottom-color:#007bff}.ht-widget .ht-tab.active:hover{color:#000}.ht-widget .ht-tab.disabled{color:#999;cursor:not-allowed;opacity:.5}.ht-widget .ht-tab.disabled:hover{color:#999}.ht-widget .ht-controls{padding:2px 8px;background-color:#fafafa;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;min-height:22px}.ht-controls.hidden{display:none}.ht-control-group{display:flex;align-items:center;gap:4px;white-space:nowrap;padding:2px 0;border-bottom:2px solid transparent;transition:border-bottom-color .2s}.ht-control-group.ht-aesthetic-editing{border-bottom-color:#007bff}.ht-widget .ht-control-label{font-family:sans-serif;font-size:12px;color:#333;white-space:nowrap;display:flex;align-items:center}.ht-button{font-size:12px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;white-space:nowrap}.ht-button:hover{background-color:#d0d0d0}.ht-button:disabled{background-color:#f0f0f0;color:#999;cursor:not-allowed}.ht-button.primary{background-color:#007bff;color:#fff;font-weight:700}.ht-button.primary:hover{background-color:#0056b3}.ht-icon-button{font-size:12px;font-family:sans-serif;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;padding:2px}.ht-icon-button:hover{background-color:#d0d0d0}.ht-icon-button svg{display:block}.ht-select{padding:1px 2px;font-size:12px;border:1px solid #ccc;border-radius:4px}.ht-slider{cursor:pointer;width:150px}.ht-toggle{width:50px;background-color:#ccc;border-radius:12px;position:relative;cursor:pointer;transition:background-color .3s;flex-shrink:0}.ht-toggle.active{background-color:#007bff}.ht-toggle-knob{background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:left .3s}.ht-toggle.active .ht-toggle-knob{left:calc(100% - 2px);transform:translate(-100%)}.ht-number-input{font-size:12px;border:1px solid #ccc;border-radius:4px;width:80px}.ht-text-input{font-size:12px;border:1px solid #ccc;border-radius:4px;padding:2px 4px;width:100px}.ht-widget .ht-aesthetic-settings-content{padding:2px 8px;background-color:#f0f0f0;border-bottom:1px solid #ddd;display:flex;flex-wrap:wrap;column-gap:8px;row-gap:2px;align-items:center;max-height:1000px;overflow:hidden;transition:max-height .3s ease-in-out,padding .3s ease-in-out}.ht-aesthetic-settings.hidden{max-height:0;padding-top:0;padding-bottom:0;border-bottom:none}.ht-color-palette-editor{display:flex;gap:8px;align-items:center}.ht-palette-buttons-container{display:flex;flex-direction:column;gap:2px}.ht-palette-button{width:20px;height:20px;font-size:12px;font-weight:700;background-color:#e0e0e0;border:1px solid #ccc;border-radius:4px;cursor:pointer;transition:background-color .2s}.ht-palette-button:hover{background-color:#d0d0d0}.ht-gradient-container{display:flex;gap:8px}.ht-gradient-column{display:flex;flex-direction:column;gap:4px}.ht-color-squares-container{display:flex;position:relative;height:16px;width:200px}.ht-color-square-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%)}.ht-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-color-square-tick{width:2px;height:8px;background-color:#333}.ht-gradient-box{width:200px;height:20px;border:1px solid #ccc;border-radius:4px;position:relative}.ht-widget .ht-range-slider-container{width:200px;height:12px;position:relative;border:1px solid #ccc;border-radius:4px;background:#f0f0f0;display:flex;align-items:center}.ht-range-handle{position:absolute;width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:ew-resize;transform:translate(-50%)}.ht-range-handle-indicator{position:absolute;bottom:90%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.ht-null-color-column{display:flex;flex-direction:column;gap:4px}.ht-null-color-square-container{display:flex;position:relative;height:16px;justify-content:center}.ht-null-color-square{width:12px;height:12px;border:2px solid #333;border-radius:4px;cursor:pointer}.ht-null-color-square-tick{width:2px;height:6px;background-color:#333;position:absolute;bottom:-6px;left:50%;transform:translate(-50%)}.ht-null-color-box{width:16px;height:20px;border:1px solid #ccc;border-radius:4px;position:relative}.missing-data-x-container{position:relative;display:flex;align-items:center;justify-content:center}.missing-data-x-container-triangle{position:absolute;bottom:85%;left:50%;transform:translate(-50%) rotate(180deg);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #333;border-radius:2px;margin-bottom:2px}.missing-data-x{font-size:16px;color:#d00;font-weight:700;line-height:1;-webkit-user-select:none;user-select:none;cursor:pointer}.ht-tree{flex:1 1 auto;min-height:0;position:relative}.ht-tree svg{display:block}.picker_wrapper,.picker_wrapper.popup{z-index:999999!important;position:fixed!important}.picker_wrapper *,.picker_selector,.picker_slider,.picker_editor,.picker_sample,.picker_done,.picker_cancel{pointer-events:auto!important}";
 function injectStyles() {
   const styleId = "heat-tree-styles";
   if (!document.getElementById(styleId)) {
@@ -3074,6 +3074,61 @@ class ContainerResizeHandler {
     clearTimeout(this.timeoutId);
   }
 }
+function isNexusFormat(str) {
+  const firstLine = str.trim().split(/\r?\n/)[0].trim();
+  return /^#NEXUS$/i.test(firstLine);
+}
+function applyTranslate(node, translateMap) {
+  if (node.name) {
+    const num = parseInt(node.name, 10);
+    if (!isNaN(num) && translateMap.has(num)) {
+      node.name = translateMap.get(num);
+    }
+  }
+  if (node.children) {
+    node.children.forEach((child) => applyTranslate(child, translateMap));
+  }
+}
+function parseTreesBlock(blockContent) {
+  const trees = [];
+  const translateMap = /* @__PURE__ */ new Map();
+  const translateMatch = blockContent.match(/translate\s+([^;]+);/i);
+  if (translateMatch) {
+    const translateContent = translateMatch[1];
+    const pairs = translateContent.split(/,\s*/);
+    pairs.forEach((pair) => {
+      const match2 = pair.trim().match(/^(\d+)\s+(.+)$/);
+      if (match2) {
+        const num = parseInt(match2[1], 10);
+        const name = match2[2].trim();
+        translateMap.set(num, name);
+      }
+    });
+  }
+  const treeRegex = /tree\s*\*?\s*(?:(\S+))?\s*=\s*(?:\[\S+\])?\s*([^;]+);/gi;
+  let match;
+  while ((match = treeRegex.exec(blockContent)) !== null) {
+    let treeName = match[1].replace(/['"]+/g, "") || null;
+    if (treeName.toLowerCase() == "untitled") {
+      treeName = null;
+    }
+    const newickStr = match[2].trim();
+    const treeData = parseNewick(newickStr);
+    applyTranslate(treeData, translateMap);
+    trees.push({ treeName, treeData });
+  }
+  return trees;
+}
+function parseNexus(nexusStr) {
+  const trees = [];
+  const treesBlockRegex = /begin\s+trees\s*;([^]*?)end\s*;/gi;
+  let blockMatch;
+  while ((blockMatch = treesBlockRegex.exec(nexusStr)) !== null) {
+    const blockTrees = parseTreesBlock(blockMatch[1]);
+    trees.push(...blockTrees);
+  }
+  return trees;
+}
 function parseNewick(newickStr) {
   newickStr = newickStr.trim();
   if (newickStr[newickStr.length - 1] === ";") {
@@ -3135,7 +3190,7 @@ function parseTable(tsvStr, valid_ids, sep = "	") {
       const metadata = {};
       for (let j = 0; j < headers.length; j++) {
         const colName = headers[j];
-        const value = values[j];
+        const value = values[j] === "" ? void 0 : values[j];
         metadata[colName] = value;
         columnValues.get(colName).push(value);
       }
@@ -3144,7 +3199,7 @@ function parseTable(tsvStr, valid_ids, sep = "	") {
     headers.forEach((col) => {
       const values = columnValues.get(col);
       const numericValues = values.map((v) => parseFloat(v)).filter((v) => !isNaN(v));
-      const isContinuous = numericValues.length > 0 && numericValues.length === values.filter((v) => v !== "").length;
+      const isContinuous = numericValues.length > 0 && numericValues.length === values.filter((v) => v !== void 0).length;
       columnTypes.set(col, isContinuous ? "continuous" : "categorical");
       let matchCount = 0;
       for (const value of values) {
@@ -3427,6 +3482,9 @@ class CategoricalColorScale {
     };
     this.frequencyMap = /* @__PURE__ */ new Map();
     for (const category of categoryData) {
+      if (category === null || category === void 0 || category === "") {
+        continue;
+      }
       if (this.frequencyMap.has(category)) {
         this.frequencyMap.set(category, this.frequencyMap.get(category) + 1);
       } else {
@@ -3479,7 +3537,9 @@ class CategoricalColorScale {
       }
       return;
     }
-    if (this.categories.length === 1) {
+    if (this.categories.length === 0) {
+      return;
+    } else if (this.categories.length === 1) {
       const color2 = this._getColorAtPosition(this.state.transformMin);
       this.categoryColorMap.set(this.categories[0], color2);
     } else {
@@ -4362,6 +4422,70 @@ var Picker = (function() {
   document.documentElement.firstElementChild.appendChild(style);
   Picker.StyleElement = style;
 }
+function createControlGroup() {
+  const group = document.createElement("div");
+  group.className = "ht-control-group";
+  return group;
+}
+function createLabel(text, height) {
+  const label = document.createElement("label");
+  label.className = "ht-control-label";
+  label.textContent = text;
+  label.style.height = `${height}px`;
+  return label;
+}
+function createButton(text, title = "", height) {
+  const button = document.createElement("button");
+  button.className = "ht-button";
+  button.textContent = text;
+  button.title = title;
+  button.style.height = `${height}px`;
+  return button;
+}
+function createIconButton(iconSvg, title = "", height) {
+  const button = document.createElement("button");
+  button.className = "ht-icon-button";
+  button.innerHTML = iconSvg;
+  button.title = title;
+  button.style.height = `${height}px`;
+  button.style.width = `${height}px`;
+  return button;
+}
+function createSlider(min, max, value, step, height) {
+  const slider = document.createElement("input");
+  slider.type = "range";
+  slider.className = "ht-slider";
+  slider.min = min;
+  slider.max = max;
+  slider.value = value;
+  slider.step = step;
+  slider.style.height = `${height}px`;
+  return slider;
+}
+function createToggle(initialState, height) {
+  const toggleHeight = Math.min(24, height - 4);
+  const knobSize = toggleHeight - 4;
+  const toggle = document.createElement("div");
+  toggle.className = initialState ? "ht-toggle active" : "ht-toggle";
+  toggle.style.height = `${toggleHeight}px`;
+  const knob = document.createElement("div");
+  knob.className = "ht-toggle-knob";
+  knob.style.width = `${knobSize}px`;
+  knob.style.height = `${knobSize}px`;
+  toggle.appendChild(knob);
+  return toggle;
+}
+function createNumberInput(value, min, max, step, height) {
+  const input = document.createElement("input");
+  input.type = "number";
+  input.className = "ht-number-input";
+  input.value = value;
+  input.min = min;
+  input.max = max;
+  input.step = step;
+  input.style.height = `${height}px`;
+  return input;
+}
 class Aesthetic extends Subscribable {
   state;
   // Object containing all configuration used to infer the scale
@@ -4369,7 +4493,9 @@ class Aesthetic extends Subscribable {
   // the actual scale instance
   values;
   // Store the original values for scale recreation
-  defaultPalette = ["#440154", "#31688e", "#35b779", "#fde724"];
+  defaultPalette = ["#440154", "#365C8D", "#1FA187", "#9FDA3A"];
+  treeState;
+  // Reference to the tree state for updates
   constructor(values, options = {}) {
     super();
     if (!options.scaleType) {
@@ -4379,6 +4505,7 @@ class Aesthetic extends Subscribable {
       throw new Error("default is required");
     }
     this.values = values;
+    this.treeState = options.treeState || null;
     this.state = {
       scaleType: void 0,
       default: void 0,
@@ -4396,7 +4523,8 @@ class Aesthetic extends Subscribable {
       transformMin: 0,
       transformMax: 1,
       transformFn: null,
-      nullValue: null,
+      nullValue: "#808080",
+      showNullInLegend: true,
       ...options
     };
     this.updateScale(false);
@@ -4499,16 +4627,105 @@ class Aesthetic extends Subscribable {
    * Create settings widget(s) for this aesthetic
    * @param {Object} options - Configuration options
    * @param {number} options.controlHeight - Height of controls
+   * @param {string} options.columnId - The column ID this aesthetic is mapped to
    * @returns {HTMLElement|null} The settings widget container, or null if no settings available
    */
   createSettingsWidget(options = {}) {
     const {
-      controlHeight = 24
+      controlHeight = 20,
+      columnId = null
     } = options;
+    if (!columnId) {
+      const message = document.createElement("div");
+      message.textContent = "Select a metadata column to edit its settings";
+      message.style.padding = "10px";
+      message.style.color = "#666";
+      return message;
+    }
+    const container = document.createElement("div");
+    container.className = "ht-aesthetic-settings-content";
     if (this.state.scaleType === "color") {
-      return this.createColorPaletteEditor(controlHeight);
+      const paletteEditor = this.createColorPaletteEditor(controlHeight);
+      if (paletteEditor) {
+        container.appendChild(paletteEditor);
+      }
+      if (this.state.isCategorical) {
+        const maxCategoriesGroup = createControlGroup();
+        const maxCategoriesLabel = createLabel("Max colors:", controlHeight);
+        maxCategoriesGroup.appendChild(maxCategoriesLabel);
+        const maxCategoriesInput = createNumberInput(
+          this.state.maxCategories || 7,
+          2,
+          100,
+          1,
+          controlHeight
+        );
+        maxCategoriesInput.addEventListener("input", (e) => {
+          const value = parseInt(e.target.value);
+          if (isNaN(value) || value < 1) return;
+          this.updateState({ maxCategories: value });
+          this.updateScale(this.values);
+          if (this.treeState) {
+            this.treeState.state.treeData.tree.each((node) => {
+              const columnValue = node[columnId];
+              if (columnValue !== void 0 && columnValue !== null) {
+                node.tipLabelColor = this.getValue(columnValue);
+              }
+            });
+            this.treeState.updateCoordinates();
+            this.treeState.notify("legendsChange");
+          }
+        });
+        maxCategoriesGroup.appendChild(maxCategoriesInput);
+        container.appendChild(maxCategoriesGroup);
+      }
+      const titleGroup = createControlGroup();
+      const titleLabel = createLabel("Legend title:", controlHeight);
+      titleGroup.appendChild(titleLabel);
+      const titleInput = document.createElement("input");
+      titleInput.type = "text";
+      titleInput.className = "ht-text-input";
+      titleInput.style.height = `${controlHeight}px`;
+      titleInput.style.flex = "1";
+      titleInput.value = this.state.title || "";
+      titleInput.placeholder = "Enter legend title";
+      titleInput.addEventListener("input", (e) => {
+        this.updateState({ title: e.target.value });
+        if (this.treeState) {
+          this.treeState.notify("legendsChange");
+        }
+      });
+      titleGroup.appendChild(titleInput);
+      container.appendChild(titleGroup);
+      if (!this.state.isCategorical) {
+        const unitsGroup = createControlGroup();
+        const unitsLabel = createLabel("Units label:", controlHeight);
+        unitsGroup.appendChild(unitsLabel);
+        const unitsInput = document.createElement("input");
+        unitsInput.type = "text";
+        unitsInput.className = "ht-text-input";
+        unitsInput.style.height = `${controlHeight}px`;
+        unitsInput.style.flex = "1";
+        unitsInput.value = this.state.inputUnits || "";
+        unitsInput.placeholder = "Enter units (e.g., °C, km)";
+        unitsInput.addEventListener("input", (e) => {
+          this.updateState({ inputUnits: e.target.value });
+          if (this.treeState) {
+            this.treeState.notify("legendsChange");
+          }
+        });
+        unitsGroup.appendChild(unitsInput);
+        container.appendChild(unitsGroup);
+      }
     }
-    return null;
+    if (container.children.length === 0) {
+      const placeholder = document.createElement("div");
+      placeholder.textContent = "No settings available for this aesthetic";
+      placeholder.style.padding = "10px";
+      placeholder.style.color = "#666";
+      container.appendChild(placeholder);
+    }
+    return container;
   }
   /**
    * Create a color palette editor widget
@@ -4733,27 +4950,18 @@ class Aesthetic extends Subscribable {
       nullPickerContainer.style.top = `${rect.bottom + 5}px`;
       nullPickerContainer.style.display = "block";
     });
-    const resetContainer = document.createElement("div");
-    resetContainer.className = "ht-null-color-reset-container";
-    resetContainer.title = "Reset to default missing data color";
+    const missingDataXContainer = document.createElement("div");
+    missingDataXContainer.className = "missing-data-x-container";
     const resetIndicator = document.createElement("div");
-    resetIndicator.className = "ht-null-color-reset-indicator";
-    const resetX = document.createElement("div");
-    resetX.className = "ht-null-color-reset";
-    resetX.textContent = "✕";
-    resetX.addEventListener("click", () => {
-      const defaultNullColor = "#808080";
-      this.state.nullValue = defaultNullColor;
-      nullSquare.style.backgroundColor = defaultNullColor;
-      nullColorBox.style.backgroundColor = defaultNullColor;
-      nullColorPicker.setColor(defaultNullColor, true);
-      this.updateScale();
-    });
-    resetContainer.appendChild(resetIndicator);
-    resetContainer.appendChild(resetX);
+    resetIndicator.className = "missing-data-x-container-triangle";
+    const missingDataX = document.createElement("div");
+    missingDataX.className = "missing-data-x";
+    missingDataX.textContent = "✕";
+    missingDataXContainer.appendChild(resetIndicator);
+    missingDataXContainer.appendChild(missingDataX);
     nullColorColumn.appendChild(nullColorSquareContainer);
     nullColorColumn.appendChild(nullColorBox);
-    nullColorColumn.appendChild(resetContainer);
+    nullColorColumn.appendChild(missingDataXContainer);
     gradientContainer.appendChild(gradientColumn);
     gradientContainer.appendChild(nullColorColumn);
     const leftButtonsContainer = document.createElement("div");
@@ -4909,9 +5117,15 @@ class TreeData extends Subscribable {
   validIdColumns = /* @__PURE__ */ new Map();
   // Map of table ID to array of column names that contain valid node IDs
   #nextTableId = 0;
-  constructor(newickStr, metadataTables = [], metadataTableNames = []) {
+  /**
+   * Create TreeData from a parsed tree object
+   * @param {Object} treeDataObj - Parsed tree object from parseNewick or parseNexus
+   * @param {Array} metadataTables - Optional array of metadata table strings
+   * @param {Array} metadataTableNames - Optional array of metadata table names
+   */
+  constructor(treeDataObj, metadataTables = [], metadataTableNames = []) {
     super();
-    this.tree = this.parseTree(newickStr);
+    this.tree = this.createHierarchy(treeDataObj);
     if (Array.isArray(metadataTables)) {
       metadataTables.forEach((tableStr, index) => {
         this.addTable(tableStr, metadataTableNames[index]);
@@ -4919,12 +5133,53 @@ class TreeData extends Subscribable {
     }
   }
   /**
-   * Parse a Newick string and create a hierarchy
-   * @param {string} newickStr - Newick formatted string
+   * Static factory method to create TreeData from tree string (Newick or NEXUS)
+   * @param {string} treeString - Newick or NEXUS formatted string
+   * @param {Array} metadataTables - Optional array of metadata table strings
+   * @param {Array} metadataTableNames - Optional array of metadata table names
+   * @returns {TreeData} New TreeData instance
+   */
+  static fromTreeString(treeString, metadataTables = [], metadataTableNames = []) {
+    const trees = TreeData.parseTrees(treeString, "Tree");
+    if (trees.length !== 1) {
+      throw new Error(`Expected exactly one tree, but found ${trees.length}. Use TreeData.parseTrees() for multiple trees.`);
+    }
+    return new TreeData(trees[0].treeData, metadataTables, metadataTableNames);
+  }
+  /**
+   * Parse tree input (Newick or NEXUS) and return array of trees with naming
+   * @param {string} input - Tree input string
+   * @param {string} sourceName - Base name for the tree(s) (e.g., filename or user-provided)
+   * @returns {Array<{name: string, treeData: Object}>} Array of parsed trees with names
+   */
+  static parseTrees(input, sourceName = "Tree") {
+    let trees;
+    if (isNexusFormat(input)) {
+      trees = parseNexus(input);
+    } else {
+      const treeData = parseNewick(input);
+      trees = [{ treeName: null, treeData }];
+    }
+    const multiple = trees.length > 1;
+    return trees.map((tree, index) => {
+      let name;
+      if (tree.treeName) {
+        name = multiple ? `${sourceName} ${tree.treeName}` : `${sourceName} - ${tree.treeName}`;
+      } else {
+        name = multiple ? `${sourceName} ${index + 1}` : sourceName;
+      }
+      return {
+        name,
+        treeData: tree.treeData
+      };
+    });
+  }
+  /**
+   * Create a D3 hierarchy from parsed tree data
+   * @param {Object} treeData - Parsed tree object from parseNewick
    * @returns {object} D3 hierarchy object
    */
-  parseTree(newickStr) {
-    const treeData = parseNewick(newickStr);
+  createHierarchy(treeData) {
     const root2 = hierarchy(treeData, (d) => d.children).sum((d) => d.children ? 0 : 1).each(function(d) {
       d.leafCount = d.value;
       delete d.value;
@@ -4938,10 +5193,10 @@ class TreeData extends Subscribable {
   }
   /**
    * Parse and set the tree data
-   * @param {string} newickStr - Newick formatted string or path
+   * @param {Object} treeDataObj - Parsed tree object
    */
-  setTree(newickStr) {
-    this.tree = this.parseTree(newickStr);
+  setTree(treeDataObj) {
+    this.tree = this.createHierarchy(treeDataObj);
     this.metadata.keys().forEach((tableId) => this.#attachTable(tableId));
     this.notify("treeUpdated", this);
   }
@@ -5170,15 +5425,26 @@ class TreeData extends Subscribable {
     }
     let values = [];
     this.tree.each((node) => {
-      if (node.metadata && node.metadata[columnId] !== void 0) {
+      if (state.subset == "tips" && node.children) {
+        return;
+      }
+      if (node.metadata) {
         values.push(node.metadata[columnId]);
+      } else {
+        values.push(void 0);
       }
     });
     if (values.length === 0) {
       console.error(`No values found for column ${columnId}`);
     }
     const displayName = this.columnDisplayName.get(columnId) || columnId;
+    let scaleType = state.scaleType;
+    if (!scaleType) {
+      scaleType = "color";
+    }
     const aesthetic = new Aesthetic(values, {
+      scaleType,
+      default: state.default !== void 0 ? state.default : isCategorical ? null : 0,
       isCategorical,
       inputUnits: displayName,
       ...state
@@ -5367,7 +5633,7 @@ function calculateCircularScalingFactors(root2, options) {
   }
   const minLabelScale = Math.min(...leafData.map((a) => a.labelScale));
   const maxBranchX = Math.max(...leafData.map((a) => a.radius));
-  const minBranchX = Math.min(...leafData.map((a) => a.radius));
+  const meanBranchX = leafData.reduce((sum, x) => sum + x.radius, 0) / leafData.length;
   const nonZeroBranches = root2.descendants().filter((a) => a.data.length > 0 && a.children);
   const minBranchLength = nonZeroBranches.length > 0 ? Math.min(...nonZeroBranches.map((a) => a.data.length)) : Infinity;
   applyLabelMin(options.minFontPx / minLabelScale);
@@ -5378,6 +5644,15 @@ function calculateCircularScalingFactors(root2, options) {
       ))
     );
   }
+  const totalAnnotationHeight = leafData.reduce((sum, a) => sum + a.height, 0);
+  if (totalAnnotationHeight > 0 && meanBranchX > 0) {
+    if (branchLenToPxFactor_min !== branchLenToPxFactor_max) {
+      applyBranchMin(totalAnnotationHeight * labelSizeToPxFactor_min / (meanBranchX * 2 * Math.PI));
+    }
+    if (labelSizeToPxFactor_min !== labelSizeToPxFactor_max) {
+      applyLabelMax(maxBranchX * branchLenToPxFactor_max * 2 * Math.PI / totalAnnotationHeight);
+    }
+  }
   function applyBranchViewConstraint() {
     const rightBranchFactor = Math.min(...leafData.filter((a) => a.cos > 0).map((a) => (options.viewWidth / 2 - a.width * a.cos * labelSizeToPxFactor_min) / (a.radius * a.cos)));
     const leftBranchFactor = Math.min(...leafData.filter((a) => a.cos < 0).map((a) => (options.viewWidth / 2 - a.width * -a.cos * labelSizeToPxFactor_min) / (a.radius * -a.cos)));
@@ -5400,18 +5675,6 @@ function calculateCircularScalingFactors(root2, options) {
   }
   applyBranchViewConstraint();
   applyLabelViewConstraint();
-  const totalAnnotationHeight = leafData.reduce((sum, a) => sum + a.height, 0);
-  if (totalAnnotationHeight > 0 && minBranchX > 0) {
-    if (branchLenToPxFactor_min !== branchLenToPxFactor_max) {
-      applyBranchMin(totalAnnotationHeight * labelSizeToPxFactor_min / (minBranchX * 2 * Math.PI));
-    }
-    if (labelSizeToPxFactor_min !== labelSizeToPxFactor_max) {
-      applyLabelMax(maxBranchX * branchLenToPxFactor_max * 2 * Math.PI / totalAnnotationHeight);
-    }
-  }
-  if (labelSizeToPxFactor_min !== labelSizeToPxFactor_max) {
-    applyLabelViewConstraint();
-  }
   if (labelSizeToPxFactor_min !== labelSizeToPxFactor_max) {
     applyLabelMin(options.idealFontPx / minLabelScale);
   }
@@ -5511,7 +5774,8 @@ class TreeState extends Subscribable {
       default: "",
       nullValue: "",
       downstream: ["updateTipLabelText", "updateCoordinates"],
-      hasLegend: false
+      hasLegend: false,
+      subset: "tips"
     },
     tipLabelColor: {
       title: "Tip label color",
@@ -5520,7 +5784,8 @@ class TreeState extends Subscribable {
       nullValue: "#808080",
       otherCategory: "#555555",
       downstream: [],
-      hasLegend: true
+      hasLegend: true,
+      subset: "tips"
     },
     tipLabelSize: {
       title: "Tip label size",
@@ -5530,7 +5795,8 @@ class TreeState extends Subscribable {
       isCategorical: false,
       outputRange: [0.5, 2],
       downstream: ["updateCoordinates"],
-      hasLegend: true
+      hasLegend: true,
+      subset: "tips"
     },
     tipLabelFont: {
       title: "Tip label font",
@@ -5538,7 +5804,8 @@ class TreeState extends Subscribable {
       default: "sans-serif",
       nullValue: "sans-serif",
       downstream: ["updateCoordinates"],
-      hasLegend: false
+      hasLegend: false,
+      subset: "tips"
     },
     tipLabelStyle: {
       title: "Tip label font style",
@@ -5548,7 +5815,8 @@ class TreeState extends Subscribable {
       nullValue: "normal",
       otherCategory: "italic",
       downstream: ["updateCoordinates"],
-      hasLegend: false
+      hasLegend: false,
+      subset: "tips"
     },
     nodeLabelText: {
       title: "Node label text",
@@ -5556,7 +5824,8 @@ class TreeState extends Subscribable {
       default: "",
       nullValue: "",
       downstream: ["updateNodeLabelText"],
-      hasLegend: false
+      hasLegend: false,
+      subset: "all"
     },
     nodeLabelSize: {
       title: "Node label size",
@@ -5566,7 +5835,8 @@ class TreeState extends Subscribable {
       isCategorical: false,
       outputRange: [0.5, 2],
       downstream: ["updateCoordinates"],
-      hasLegend: false
+      hasLegend: false,
+      subset: "all"
     }
   };
   state = {
@@ -6396,9 +6666,11 @@ class TextColorLegend extends LegendBase {
     let currentX = 0;
     let currentY = titleHeightOffset + this.verticalSpacing + this.squareSize / 2;
     let rowHeight = this.squareSize;
-    categories.slice(0, aesthetic.state.maxCategories).forEach((category, i) => {
+    const categoriesToShow = categories.slice(0, aesthetic.state.maxCategories);
+    categoriesToShow.forEach((category, i) => {
       const color2 = aesthetic.scale.getValue(category);
-      const labelSize = this.textSizeEstimator.getTextSize(category, this.state.labelFontSize);
+      const labelText = category === "" ? "No data" : category;
+      const labelSize = this.textSizeEstimator.getTextSize(labelText, this.state.labelFontSize);
       const itemWidth = this.squareSize + this.itemLabelGap + labelSize.widthPx;
       if (currentX > 0 && currentX + itemWidth > maxWidth) {
         currentX = 0;
@@ -6409,7 +6681,7 @@ class TextColorLegend extends LegendBase {
         x: currentX,
         y: currentY,
         color: color2,
-        label: i < aesthetic.state.maxCategories - 1 ? category : aesthetic.state.otherLabel,
+        label: i < aesthetic.state.maxCategories - 1 || i == categories.length - 1 ? labelText : aesthetic.state.otherLabel,
         squareX: currentX,
         squareY: currentY - this.squareSize / 2,
         labelX: currentX + this.squareSize + this.itemLabelGap,
@@ -6418,6 +6690,30 @@ class TextColorLegend extends LegendBase {
       currentX += itemWidth + this.itemGap;
       this.coordinates.width = Math.max(this.coordinates.width, currentX - this.itemGap);
     });
+    const hasNullValues = aesthetic.values.some((x) => x == void 0);
+    if (aesthetic.state.showNullInLegend && hasNullValues) {
+      const color2 = aesthetic.state.nullValue;
+      const labelText = "No Data";
+      const labelSize = this.textSizeEstimator.getTextSize(labelText, this.state.labelFontSize);
+      const itemWidth = this.squareSize + this.itemLabelGap + labelSize.widthPx;
+      if (currentX > 0 && currentX + itemWidth > maxWidth) {
+        currentX = 0;
+        currentY += rowHeight + this.verticalSpacing;
+        rowHeight = this.squareSize;
+      }
+      this.coordinates.items.push({
+        x: currentX,
+        y: currentY,
+        color: color2,
+        label: labelText,
+        squareX: currentX,
+        squareY: currentY - this.squareSize / 2,
+        labelX: currentX + this.squareSize + this.itemLabelGap,
+        labelY: currentY
+      });
+      currentX += itemWidth + this.itemGap;
+      this.coordinates.width = Math.max(this.coordinates.width, currentX - this.itemGap);
+    }
     this.coordinates.height = currentY + this.squareSize / 2;
   }
   /**
@@ -6441,7 +6737,7 @@ class TextColorLegend extends LegendBase {
     const ticksY = gradientY + this.gradientHeight;
     const labelsY = ticksY + this.tickHeight;
     const unitsSize = this.textSizeEstimator.getTextSize(aesthetic.state.inputUnits || "", this.state.labelFontSize);
-    const height = labelsY + this.state.labelFontSize + unitsSize.heightPx;
+    let height = labelsY + this.state.labelFontSize + unitsSize.heightPx;
     this.coordinates = {
       width,
       height,
@@ -6464,7 +6760,8 @@ class TextColorLegend extends LegendBase {
         x: width / 2,
         y: height,
         text: aesthetic.state.inputUnits || ""
-      }
+      },
+      nullItem: null
     };
     if (minValue === maxValue) {
       const x = leftOverhang + baseWidth / 2;
@@ -6495,6 +6792,23 @@ class TextColorLegend extends LegendBase {
         });
       });
     }
+    if (aesthetic.state.showNullInLegend) {
+      const color2 = aesthetic.state.nullValue;
+      const labelText = "No Data";
+      this.textSizeEstimator.getTextSize(labelText, this.state.labelFontSize);
+      const nullItemY = height + this.verticalSpacing;
+      this.coordinates.nullItem = {
+        x: leftOverhang,
+        y: nullItemY + this.squareSize / 2,
+        color: color2,
+        label: labelText,
+        squareX: leftOverhang,
+        squareY: nullItemY,
+        labelX: leftOverhang + this.squareSize + this.itemLabelGap,
+        labelY: nullItemY + this.squareSize / 2
+      };
+      this.coordinates.height = nullItemY + this.squareSize;
+    }
   }
   /**
    * Render the legend in the specified SVG element
@@ -7646,72 +7960,8 @@ function convertSvgToPng(svgString, width, height, filename) {
   };
   img.src = url;
 }
-function createControlGroup() {
-  const group = document.createElement("div");
-  group.className = "ht-control-group";
-  return group;
-}
-function createLabel(text, height) {
-  const label = document.createElement("label");
-  label.className = "ht-control-label";
-  label.textContent = text;
-  label.style.height = `${height}px`;
-  return label;
-}
-function createButton(text, title = "", height) {
-  const button = document.createElement("button");
-  button.className = "ht-button";
-  button.textContent = text;
-  button.title = title;
-  button.style.height = `${height}px`;
-  return button;
-}
-function createIconButton(iconSvg, title = "", height) {
-  const button = document.createElement("button");
-  button.className = "ht-icon-button";
-  button.innerHTML = iconSvg;
-  button.title = title;
-  button.style.height = `${height}px`;
-  button.style.width = `${height}px`;
-  return button;
-}
-function createSlider(min, max, value, step, height) {
-  const slider = document.createElement("input");
-  slider.type = "range";
-  slider.className = "ht-slider";
-  slider.min = min;
-  slider.max = max;
-  slider.value = value;
-  slider.step = step;
-  slider.style.height = `${height}px`;
-  return slider;
-}
-function createToggle(initialState, height) {
-  const toggleHeight = Math.min(24, height - 4);
-  const knobSize = toggleHeight - 4;
-  const toggle = document.createElement("div");
-  toggle.className = initialState ? "ht-toggle active" : "ht-toggle";
-  toggle.style.height = `${toggleHeight}px`;
-  const knob = document.createElement("div");
-  knob.className = "ht-toggle-knob";
-  knob.style.width = `${knobSize}px`;
-  knob.style.height = `${knobSize}px`;
-  toggle.appendChild(knob);
-  return toggle;
-}
-function createNumberInput(value, min, max, step, height) {
-  const input = document.createElement("input");
-  input.type = "number";
-  input.className = "ht-number-input";
-  input.value = value;
-  input.min = min;
-  input.max = max;
-  input.step = step;
-  input.style.height = `${height}px`;
-  return input;
-}
 function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCurrentTreeView, switchToTree, addNewTree, options) {
-  const CONTROL_HEIGHT = 24;
+  const CONTROL_HEIGHT = 20;
   let currentTab = null;
   let selectedMetadata = null;
   let currentAestheticSettings = null;
@@ -7795,12 +8045,15 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
       }
     }
   }
-  toggleButton.addEventListener("click", () => {
+  toggleButton.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     controlPanelVisible = !controlPanelVisible;
     if (controlPanelVisible) {
       collapsiblePanel.classList.remove("ht-panel-collapsed");
       toggleButton.classList.remove("collapsed");
     } else {
+      closeAestheticSettings();
       collapsiblePanel.classList.add("ht-panel-collapsed");
       toggleButton.classList.add("collapsed");
     }
@@ -7889,14 +8142,23 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
     aestheticSettingsContainer.innerHTML = "";
     const treeState = getCurrentTreeState();
     if (!treeState) return;
-    if (aestheticId === "tipLabelColor") {
-      populateTipLabelColorSettings(aestheticSettingsContainer, treeState, CONTROL_HEIGHT);
+    const columnId = treeState.state.aesthetics[aestheticId];
+    const aesthetic = treeState.aestheticsScales[aestheticId];
+    if (!aesthetic) {
+      const message = document.createElement("div");
+      message.textContent = "Error: Could not find aesthetic";
+      message.style.padding = "10px";
+      message.style.color = "#d00";
+      aestheticSettingsContainer.appendChild(message);
       return;
     }
-    const placeholder = document.createElement("div");
-    placeholder.textContent = `Settings for ${aestheticId} (coming soon)`;
-    placeholder.style.padding = "10px";
-    aestheticSettingsContainer.appendChild(placeholder);
+    const settingsWidget = aesthetic.createSettingsWidget({
+      controlHeight: CONTROL_HEIGHT,
+      columnId
+    });
+    if (settingsWidget) {
+      aestheticSettingsContainer.appendChild(settingsWidget);
+    }
   }
   function openTab(tabId) {
     const tabDef = tabs.find((t) => t.id === tabId);
@@ -8012,14 +8274,13 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
   toolbarDiv.appendChild(toggleContainer);
   toolbarDiv.appendChild(collapsiblePanel);
   updateTabStates();
-  openTab(tabs[0].id);
   resetSelectedMetadata();
   return refreshCurrentTab;
 }
 function populateDataControls(container, treeDataInstances, getCurrentTreeState, switchToTree, addNewTree, getCurrentMetadataNames, getSelectedMetadata, setSelectedMetadata, resetSelectedMetadata, refreshCurrentTab, options, controlHeight) {
   container.innerHTML = "";
   const treeGroup = createControlGroup();
-  const treeLabel = createLabel("Select tree:", controlHeight);
+  const treeLabel = createLabel("Tree:", controlHeight);
   treeGroup.appendChild(treeLabel);
   const treeSelect = document.createElement("select");
   treeSelect.className = "ht-select";
@@ -8051,24 +8312,19 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
   container.appendChild(treeGroup);
   const treeFileInput = document.createElement("input");
   treeFileInput.type = "file";
-  treeFileInput.accept = ".nwk,.newick,.tree,.tre,.treefile";
   treeFileInput.style.display = "none";
   treeFileInput.addEventListener("change", async (e) => {
     const file = e.target.files[0];
     if (!file) return;
     try {
-      const newickStr = await file.text();
-      let treeName = file.name.replace(/\.(nwk|newick|tree|tre)$/i, "");
-      let uniqueName = treeName;
-      let counter = 1;
-      while (treeDataInstances.has(uniqueName)) {
-        uniqueName = `${treeName} (${counter})`;
-        counter++;
-      }
-      addNewTree(uniqueName, newickStr);
+      const treeString = await file.text();
+      let treeName = file.name.replace(/\.[^/.]+$/, "");
+      const addedNames = addNewTree(treeName, treeString);
       treeFileInput.value = "";
       refreshCurrentTab();
-      switchToTree(uniqueName);
+      if (addedNames.length > 0) {
+        switchToTree(addedNames[0]);
+      }
     } catch (error) {
       console.error("Error loading tree file:", error);
       alert(`Error loading tree file: ${error.message}`);
@@ -8084,7 +8340,7 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
     return;
   }
   const metadataGroup = createControlGroup();
-  const metadataLabel = createLabel("Available metadata:", controlHeight);
+  const metadataLabel = createLabel("Metadata:", controlHeight);
   metadataGroup.appendChild(metadataLabel);
   const metadataSelect = document.createElement("select");
   metadataSelect.className = "ht-select";
@@ -8169,7 +8425,7 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
       const validIdColumns = treeData.getValidIdColumns(selectedTableId);
       const currentIdColumn = treeData.getNodeIdColumn(selectedTableId);
       const nodeIdGroup = createControlGroup();
-      const nodeIdLabel = createLabel("Node/Tip ID Column:", controlHeight);
+      const nodeIdLabel = createLabel("ID Column:", controlHeight);
       nodeIdGroup.appendChild(nodeIdLabel);
       const nodeIdSelect = document.createElement("select");
       nodeIdSelect.className = "ht-select";
@@ -8184,7 +8440,7 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
         validIdColumns.forEach((columnName) => {
           const option = document.createElement("option");
           option.value = columnName;
-          option.textContent = treeData.columnDisplayName.get(columnName);
+          option.textContent = treeData.columnName.get(columnName);
           if (columnName === currentIdColumn) {
             option.selected = true;
           }
@@ -8506,101 +8762,6 @@ function populateTipLabelSettingsControls(container, getCurrentTreeState, option
   tipLabelFontGroup.appendChild(tipLabelFontSelect);
   container.appendChild(tipLabelFontGroup);
 }
-function populateTipLabelColorSettings(container, treeState, controlHeight) {
-  const columnId = treeState.state.aesthetics.tipLabelColor;
-  if (!columnId) {
-    const message = document.createElement("div");
-    message.textContent = "Select a metadata column for tip label color to edit its settings";
-    message.style.padding = "10px";
-    message.style.color = "#666";
-    container.appendChild(message);
-    return;
-  }
-  const aesthetic = treeState.aestheticsScales.tipLabelColor;
-  if (!aesthetic) {
-    const message = document.createElement("div");
-    message.textContent = "Error: Could not find color aesthetic";
-    message.style.padding = "10px";
-    message.style.color = "#d00";
-    container.appendChild(message);
-    return;
-  }
-  const settingsWidget = aesthetic.createSettingsWidget({
-    controlHeight
-  });
-  if (settingsWidget) {
-    container.appendChild(settingsWidget);
-  } else {
-    const message = document.createElement("div");
-    message.textContent = "No settings available for this aesthetic";
-    message.style.padding = "10px";
-    message.style.color = "#666";
-    container.appendChild(message);
-    return;
-  }
-  if (aesthetic.state.isCategorical) {
-    const maxCategoriesGroup = createControlGroup();
-    const maxCategoriesLabel = createLabel("Max colors:", controlHeight);
-    maxCategoriesGroup.appendChild(maxCategoriesLabel);
-    const maxCategoriesInput = createNumberInput(
-      aesthetic.state.maxCategories || 7,
-      1,
-      100,
-      1,
-      controlHeight
-    );
-    maxCategoriesInput.addEventListener("input", (e) => {
-      const value = parseInt(e.target.value);
-      if (isNaN(value) || value < 1) return;
-      aesthetic.updateState({ maxCategories: value });
-      aesthetic.updateScale(aesthetic.values);
-      treeState.state.treeData.tree.each((node) => {
-        const columnValue = node[columnId];
-        if (columnValue !== void 0 && columnValue !== null) {
-          node.tipLabelColor = aesthetic.getValue(columnValue);
-        }
-      });
-      treeState.updateCoordinates();
-      treeState.notify("legendsChange");
-    });
-    maxCategoriesGroup.appendChild(maxCategoriesInput);
-    container.appendChild(maxCategoriesGroup);
-  }
-  const titleGroup = createControlGroup();
-  const titleLabel = createLabel("Legend title:", controlHeight);
-  titleGroup.appendChild(titleLabel);
-  const titleInput = document.createElement("input");
-  titleInput.type = "text";
-  titleInput.className = "ht-text-input";
-  titleInput.style.height = `${controlHeight}px`;
-  titleInput.style.flex = "1";
-  titleInput.value = aesthetic.state.title || "";
-  titleInput.placeholder = "Enter legend title";
-  titleInput.addEventListener("input", (e) => {
-    aesthetic.updateState({ title: e.target.value });
-    treeState.notify("legendsChange");
-  });
-  titleGroup.appendChild(titleInput);
-  container.appendChild(titleGroup);
-  if (!aesthetic.state.isCategorical) {
-    const unitsGroup = createControlGroup();
-    const unitsLabel = createLabel("Units label:", controlHeight);
-    unitsGroup.appendChild(unitsLabel);
-    const unitsInput = document.createElement("input");
-    unitsInput.type = "text";
-    unitsInput.className = "ht-text-input";
-    unitsInput.style.height = `${controlHeight}px`;
-    unitsInput.style.flex = "1";
-    unitsInput.value = aesthetic.state.inputUnits || "";
-    unitsInput.placeholder = "Enter units (e.g., °C, km)";
-    unitsInput.addEventListener("input", (e) => {
-      aesthetic.updateState({ inputUnits: e.target.value });
-      treeState.notify("legendsChange");
-    });
-    unitsGroup.appendChild(unitsInput);
-    container.appendChild(unitsGroup);
-  }
-}
 function createMetadataColumnSelect(treeState, aesthetic, defaultLabel, controlHeight, includeNone = false, continuous = null, getCurrentAestheticSettings = null, populateAestheticSettings = null) {
   const select2 = document.createElement("select");
   select2.className = "ht-select";
@@ -8832,10 +8993,10 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
   const treeDataInstances = /* @__PURE__ */ new Map();
   const treeConfigAesthetics = /* @__PURE__ */ new Map();
   treesInput.forEach((treeConfig, index) => {
-    if (!treeConfig.newick) {
-      throw new Error(`Tree at index ${index} is missing newick string`);
+    if (!treeConfig.tree) {
+      throw new Error(`Tree at index ${index} is missing tree string`);
     }
-    const treeName = treeConfig.name || `Tree ${index + 1}`;
+    const sourceName = treeConfig.name || `Tree ${index + 1}`;
     let metadataTables = [];
     let metadataNames = [];
     if (treeConfig.metadata) {
@@ -8850,24 +9011,33 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
         }
       });
     }
-    const treeData = new TreeData(treeConfig.newick, metadataTables, metadataNames);
-    let treeAesthetics;
-    if (treeConfig.aesthetics) {
-      treeAesthetics = Object.fromEntries(
-        Object.entries(treeConfig.aesthetics).map(([aes, col]) => {
-          for (const [assignedColId, originalName] of treeData.columnName.entries()) {
-            if (originalName === col) {
-              return [aes, assignedColId];
+    const parsedTrees = TreeData.parseTrees(treeConfig.tree, sourceName);
+    parsedTrees.forEach(({ name: parsedName, treeData: parsedTreeData }, treeIndex) => {
+      let uniqueName = parsedName;
+      let counter = 1;
+      while (treeDataInstances.has(uniqueName)) {
+        uniqueName = `${parsedName} (${counter})`;
+        counter++;
+      }
+      const treeData = new TreeData(parsedTreeData, metadataTables, metadataNames);
+      let treeAesthetics;
+      if (treeConfig.aesthetics) {
+        treeAesthetics = Object.fromEntries(
+          Object.entries(treeConfig.aesthetics).map(([aes, col]) => {
+            for (const [assignedColId, originalName] of treeData.columnName.entries()) {
+              if (originalName === col) {
+                return [aes, assignedColId];
+              }
             }
-          }
-          return void 0;
-        })
-      );
-    } else {
-      treeAesthetics = void 0;
-    }
-    treeDataInstances.set(treeName, treeData);
-    treeConfigAesthetics.set(treeName, treeAesthetics);
+            return void 0;
+          }).filter((entry) => entry !== void 0)
+        );
+      } else {
+        treeAesthetics = void 0;
+      }
+      treeDataInstances.set(uniqueName, treeData);
+      treeConfigAesthetics.set(uniqueName, treeAesthetics);
+    });
   });
   const treeStateCache = /* @__PURE__ */ new Map();
   const treeViewCache = /* @__PURE__ */ new Map();
@@ -8904,16 +9074,21 @@ function heatTree(containerSelector, treesInput = [], options = {}) {
       immediate: true
     }
   );
-  function addNewTree(treeName, newickStr, metadataTables = [], metadataNames = []) {
-    let uniqueName = treeName;
-    let counter = 1;
-    while (treeDataInstances.has(uniqueName)) {
-      uniqueName = `${treeName} (${counter})`;
-      counter++;
-    }
-    const treeData = new TreeData(newickStr, metadataTables, metadataNames);
-    treeDataInstances.set(uniqueName, treeData);
-    return uniqueName;
+  function addNewTree(treeName, treeString, metadataTables = [], metadataNames = []) {
+    const parsedTrees = TreeData.parseTrees(treeString, treeName);
+    const addedNames = [];
+    parsedTrees.forEach(({ name: parsedName, treeData: parsedTreeData }) => {
+      let uniqueName = parsedName;
+      let counter = 1;
+      while (treeDataInstances.has(uniqueName)) {
+        uniqueName = `${parsedName} (${counter})`;
+        counter++;
+      }
+      const treeData = new TreeData(parsedTreeData, metadataTables, metadataNames);
+      treeDataInstances.set(uniqueName, treeData);
+      addedNames.push(uniqueName);
+    });
+    return addedNames;
   }
   function switchToTree(treeName) {
     if (!treeDataInstances.has(treeName)) {