@grunwaldlab/heat-tree 0.1.1 → 0.2.0

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

@@ -824,7 +824,7 @@ function extend(parent, definition) {
   for (var key in definition) prototype[key] = definition[key];
   return prototype;
 }
-function Color() {
+function Color$1() {
 }
 var darker = 0.7;
 var brighter = 1 / darker;
@@ -979,7 +979,7 @@ var named = {
   yellow: 16776960,
   yellowgreen: 10145074
 };
-define(Color, color, {
+define(Color$1, color, {
   copy(channels) {
     return Object.assign(new this.constructor(), this, channels);
   },
@@ -1019,7 +1019,7 @@ function rgba(r, g, b, a) {
   return new Rgb(r, g, b, a);
 }
 function rgbConvert(o) {
-  if (!(o instanceof Color)) o = color(o);
+  if (!(o instanceof Color$1)) o = color(o);
   if (!o) return new Rgb();
   o = o.rgb();
   return new Rgb(o.r, o.g, o.b, o.opacity);
@@ -1033,7 +1033,7 @@ function Rgb(r, g, b, opacity) {
   this.b = +b;
   this.opacity = +opacity;
 }
-define(Rgb, rgb, extend(Color, {
+define(Rgb, rgb, extend(Color$1, {
   brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
@@ -1086,7 +1086,7 @@ function hsla(h, s, l, a) {
 }
 function hslConvert(o) {
   if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
-  if (!(o instanceof Color)) o = color(o);
+  if (!(o instanceof Color$1)) o = color(o);
   if (!o) return new Hsl();
   if (o instanceof Hsl) return o;
   o = o.rgb();
@@ -1111,7 +1111,7 @@ function Hsl(h, s, l, opacity) {
   this.l = +l;
   this.opacity = +opacity;
 }
-define(Hsl, hsl, extend(Color, {
+define(Hsl, hsl, extend(Color$1, {
   brighter(k) {
     k = k == null ? brighter : Math.pow(brighter, k);
     return new Hsl(this.h, this.s, this.l * k, this.opacity);
@@ -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;z-index:10;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;overflow:hidden;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}.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-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-tree{flex:1 1 auto;min-height:0;position:relative}.ht-tree svg{display:block}";
+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}";
 function injectStyles() {
   const styleId = "heat-tree-styles";
   if (!document.getElementById(styleId)) {
@@ -3118,67 +3118,69 @@ function parseNewick(newickStr) {
   }
   return result;
 }
-function parseTable(tsvStr, sep = "	") {
+function parseTable(tsvStr, valid_ids, sep = "	") {
   let metadataMap = /* @__PURE__ */ new Map();
-  let metadataColumns = [];
   let columnTypes = /* @__PURE__ */ new Map();
+  let validIdCounts = [];
+  let idColumns = [];
   const lines = tsvStr.trim().split("\n");
   if (lines.length == 0) {
-    console.error("Empty metatdata table");
+    console.error("Empty metadata table");
   } else {
     const headers = lines[0].split(sep);
-    const nodeIdIndex = headers.indexOf("node_id");
-    if (nodeIdIndex === -1) {
-      console.warn('Metadata table must contain a "node_id" column');
-    } else {
-      metadataColumns = headers.filter((h, i) => i !== nodeIdIndex);
-      const columnValues = /* @__PURE__ */ new Map();
-      metadataColumns.forEach((col) => columnValues.set(col, []));
-      for (let i = 1; i < lines.length; i++) {
-        const values = lines[i].split(sep);
-        const nodeId = values[nodeIdIndex];
-        const metadata = {};
-        for (let j = 0; j < headers.length; j++) {
-          if (j !== nodeIdIndex) {
-            const colName = headers[j];
-            const value = values[j];
-            metadata[colName] = value;
-            columnValues.get(colName).push(value);
-          }
+    const columnValues = /* @__PURE__ */ new Map();
+    headers.forEach((col) => columnValues.set(col, []));
+    for (let i = 1; i < lines.length; i++) {
+      const values = lines[i].split(sep);
+      const metadata = {};
+      for (let j = 0; j < headers.length; j++) {
+        const colName = headers[j];
+        const value = values[j];
+        metadata[colName] = value;
+        columnValues.get(colName).push(value);
+      }
+      metadataMap.set(i - 1, metadata);
+    }
+    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;
+      columnTypes.set(col, isContinuous ? "continuous" : "categorical");
+      let matchCount = 0;
+      for (const value of values) {
+        if (value && valid_ids.has(value)) {
+          matchCount++;
         }
-        metadataMap.set(nodeId, metadata);
       }
-      metadataColumns.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;
-        columnTypes.set(col, isContinuous ? "continuous" : "categorical");
-      });
-    }
+      if (matchCount > 0) {
+        validIdCounts.push({ col, matchCount });
+      }
+    });
+    validIdCounts = validIdCounts.sort((a, b) => b.matchCount - a.matchCount);
+    idColumns = validIdCounts.map((x) => x.col);
   }
-  return {
-    metadataMap,
-    columnTypes
-  };
+  return { metadataMap, columnTypes, idColumns };
 }
 class NullScale {
-  defaultValue;
-  constructor(defaultValue) {
-    if (defaultValue === void 0) {
-      console.error("A defualt value for a NullScale is needed.");
-    } else {
-      this.defaultValue = defaultValue;
+  constructor(options = {}) {
+    this.state = { ...options };
+    if (this.state.default === void 0) {
+      console.error("A default value for a NullScale is needed.");
     }
   }
   getValue() {
-    return this.defaultValue;
+    return this.state.default;
   }
 }
 class IdentityScale {
-  constructor(defaultValue = null, validValues = null, transformFn = null) {
-    this.validValues = validValues ? new Set(validValues) : null;
-    this.transformFn = transformFn;
-    this.defaultValue = defaultValue;
+  constructor(options = {}) {
+    this.state = {
+      default: null,
+      outputValues: null,
+      transformFn: null,
+      ...options
+    };
+    this.validValues = this.state.outputValues ? new Set(this.state.outputValues) : null;
   }
   /**
    * Get the value, optionally transformed and validated
@@ -3186,23 +3188,26 @@ class IdentityScale {
    * @returns {*} The output value, or null if invalid
    */
   getValue(value) {
-    let result = this.transformFn ? this.transformFn(value) : value;
+    let result = this.state.transformFn ? this.state.transformFn(value) : value;
     if (this.validValues !== null && !this.validValues.has(result)) {
       result = null;
     }
     if (result === null || result === void 0 || result === "") {
-      result = this.defaultValue;
+      result = this.state.default;
     }
     return result;
   }
 }
 class CategoricalTextScale {
-  constructor(values, outputCategories, defaultValue) {
+  constructor(values, options = {}) {
     if (!Array.isArray(values) || values.length === 0) {
       throw new Error("values must be a non-empty array");
     }
-    this.outputCategories = outputCategories;
-    this.defaultValue = defaultValue;
+    this.state = {
+      outputValues: null,
+      default: null,
+      ...options
+    };
     const frequencyMap = /* @__PURE__ */ new Map();
     for (const category of values) {
       if (category === null || category === void 0 || category === "") {
@@ -3217,18 +3222,18 @@ class CategoricalTextScale {
     const sortedCategories = new Map(
       [...frequencyMap.entries()].sort((a, b) => a[0] - b[0])
     );
-    if (sortedCategories.length > outputCategories.length) {
-      this.otheredCategories = sortedCategories.keys().slice(outputCategories.length - 2, sortedCategories.length);
+    if (sortedCategories.length > this.state.outputValues.length) {
+      this.otheredCategories = sortedCategories.keys().slice(this.state.outputValues.length - 2, sortedCategories.length);
     } else {
       this.otheredCategories = [];
     }
     this.categoryMap = /* @__PURE__ */ new Map();
     const sortedCategoriesKeys = [...sortedCategories.keys()];
     for (let i = 0; i < sortedCategoriesKeys.length; i++) {
-      if (i < outputCategories.length) {
-        this.categoryMap.set(sortedCategoriesKeys[i], outputCategories[i]);
+      if (i < this.state.outputValues.length) {
+        this.categoryMap.set(sortedCategoriesKeys[i], this.state.outputValues[i]);
       } else {
-        this.categoryMap.set(sortedCategoriesKeys[i], outputCategories[outputCategories.length - 1]);
+        this.categoryMap.set(sortedCategoriesKeys[i], this.state.outputValues[this.state.outputValues.length - 1]);
       }
     }
   }
@@ -3239,17 +3244,20 @@ class CategoricalTextScale {
    */
   getValue(category) {
     if (category === null || category === void 0 || category === "") {
-      return this.defaultValue;
+      return this.state.default;
     }
     return this.categoryMap.get(category);
   }
 }
 class ContinuousSizeScale {
-  constructor(dataMin, dataMax, sizeMin, sizeMax) {
+  constructor(dataMin, dataMax, options = {}) {
+    this.state = {
+      outputRange: [0.5, 2],
+      nullValue: 1,
+      ...options
+    };
     this.dataMin = dataMin;
     this.dataMax = dataMax;
-    this.sizeMin = sizeMin;
-    this.sizeMax = sizeMax;
   }
   /**
    * Get the size corresponding to the given value
@@ -3257,46 +3265,53 @@ class ContinuousSizeScale {
    * @returns {number} The corresponding size, clamped to min/max
    */
   getValue(value) {
+    if (value === null || value === void 0 || value === "") {
+      return this.state.nullValue;
+    }
     const clampedValue = Math.max(this.dataMin, Math.min(this.dataMax, value));
     if (this.dataMin === this.dataMax) {
       if (value === this.dataMax) {
-        return (this.sizeMin + this.sizeMax) / 2;
+        return (this.state.outputRange[0] + this.state.outputRange[1]) / 2;
       } else if (value < this.dataMin) {
-        return this.sizeMin;
+        return this.state.outputRange[0];
       } else {
-        return this.sizeMax;
+        return this.state.outputRange[1];
       }
     }
     const t = (clampedValue - this.dataMin) / (this.dataMax - this.dataMin);
-    return this.sizeMin + t * (this.sizeMax - this.sizeMin);
+    return this.state.outputRange[0] + t * (this.state.outputRange[1] - this.state.outputRange[0]);
   }
 }
 class ContinuousColorScale {
-  constructor(dataMin, dataMax, transformMin = 0, transformMax = 1, colors = null, colorPositions = null) {
+  constructor(dataMin, dataMax, options = {}) {
+    this.state = {
+      transformMin: 0,
+      transformMax: 1,
+      colorPalette: null,
+      colorPositions: null,
+      nullValue: "#808080",
+      ...options
+    };
     this.dataMin = dataMin;
     this.dataMax = dataMax;
-    this.transformMin = transformMin;
-    this.transformMax = transformMax;
-    this.nullColor = "#808080";
-    if (colors === null) {
-      this.colors = ["#440154", "#31688e", "#35b779", "#fde724"].map((c) => this._hexToRgb(c));
-    } else {
-      if (colors.length < 1) {
-        throw new Error("At least 1 color is required");
-      }
-      this.colors = colors.map((c) => this._hexToRgb(c));
+    if (this.state.colorPalette === null) {
+      this.state.colorPalette = ["#440154", "#31688e", "#35b779", "#fde724"];
+    }
+    if (this.state.colorPalette.length < 1) {
+      throw new Error("At least 1 color is required");
     }
+    this.colors = this.state.colorPalette.map((c) => this._hexToRgb(c));
     if (this.colors.length === 1) {
       this.colorPositions = [0];
       return;
     }
-    if (colorPositions === null) {
+    if (this.state.colorPositions === null) {
       this.colorPositions = this.colors.map((_, i) => i / (this.colors.length - 1));
     } else {
-      if (colorPositions.length !== this.colors.length) {
+      if (this.state.colorPositions.length !== this.colors.length) {
         throw new Error("colorPositions must have the same length as colors");
       }
-      const paired = colorPositions.map((pos, i) => ({ pos, color: this.colors[i] }));
+      const paired = this.state.colorPositions.map((pos, i) => ({ pos, color: this.colors[i] }));
       paired.sort((a, b) => a.pos - b.pos);
       this.colorPositions = paired.map((p) => p.pos);
       this.colors = paired.map((p) => p.color);
@@ -3316,7 +3331,7 @@ class ContinuousColorScale {
    */
   getValue(value) {
     if (value === null || value === void 0 || value === "") {
-      return this.nullColor;
+      return this.state.nullValue;
     }
     if (this.colors.length === 1) {
       return this._rgbToHex(this.colors[0].r, this.colors[0].g, this.colors[0].b);
@@ -3335,7 +3350,7 @@ class ContinuousColorScale {
     }
     const clampedValue = Math.max(this.dataMin, Math.min(this.dataMax, value));
     const dataT = (clampedValue - this.dataMin) / (this.dataMax - this.dataMin);
-    const transformedT = this.transformMin + dataT * (this.transformMax - this.transformMin);
+    const transformedT = this.state.transformMin + dataT * (this.state.transformMax - this.state.transformMin);
     const clampedT = Math.max(0, Math.min(1, transformedT));
     if (clampedT <= this.colorPositions[0]) {
       return this._rgbToHex(this.colors[0].r, this.colors[0].g, this.colors[0].b);
@@ -3397,14 +3412,19 @@ class ContinuousColorScale {
 }
 class CategoricalColorScale {
   defaultPalette = ["#440154", "#31688e", "#35b779", "#fde724"];
-  constructor(categoryData, transformMin = 0, transformMax = 1, colors = null, colorPositions = null, maxColors = 10) {
+  constructor(categoryData, options = {}) {
     if (!Array.isArray(categoryData) || categoryData.length === 0) {
       throw new Error("categoryData must be a non-empty array");
     }
-    this.transformMin = transformMin;
-    this.transformMax = transformMax;
-    this.nullColor = "#808080";
-    this.maxColors = maxColors;
+    this.state = {
+      transformMin: 0,
+      transformMax: 1,
+      colorPalette: null,
+      colorPositions: null,
+      maxCategories: 10,
+      nullValue: "#808080",
+      ...options
+    };
     this.frequencyMap = /* @__PURE__ */ new Map();
     for (const category of categoryData) {
       if (this.frequencyMap.has(category)) {
@@ -3414,26 +3434,25 @@ class CategoricalColorScale {
       }
     }
     this.categories = [...this.frequencyMap.entries()].sort((a, b) => b[1] - a[1]).map((entry) => entry[0]);
-    if (colors === null) {
-      this.colors = this.defaultPalette.map((c) => this._hexToRgb(c));
-    } else {
-      if (colors.length < 1) {
-        throw new Error("At least 1 color is required");
-      }
-      this.colors = colors.map((c) => this._hexToRgb(c));
+    if (this.state.colorPalette === null) {
+      this.state.colorPalette = this.defaultPalette;
+    }
+    if (this.state.colorPalette.length < 1) {
+      throw new Error("At least 1 color is required");
     }
+    this.colors = this.state.colorPalette.map((c) => this._hexToRgb(c));
     if (this.colors.length === 1) {
       this.colorPositions = [0];
       this._assignColors();
       return;
     }
-    if (colorPositions === null) {
+    if (this.state.colorPositions === null) {
       this.colorPositions = this.colors.map((_, i) => i / (this.colors.length - 1));
     } else {
-      if (colorPositions.length !== this.colors.length) {
+      if (this.state.colorPositions.length !== this.colors.length) {
         throw new Error("colorPositions must have the same length as colors");
       }
-      const paired = colorPositions.map((pos, i) => ({ pos, color: this.colors[i] }));
+      const paired = this.state.colorPositions.map((pos, i) => ({ pos, color: this.colors[i] }));
       paired.sort((a, b) => a.pos - b.pos);
       this.colorPositions = paired.map((p) => p.pos);
       this.colors = paired.map((p) => p.color);
@@ -3461,13 +3480,13 @@ class CategoricalColorScale {
       return;
     }
     if (this.categories.length === 1) {
-      const color2 = this._getColorAtPosition(this.transformMin);
+      const color2 = this._getColorAtPosition(this.state.transformMin);
       this.categoryColorMap.set(this.categories[0], color2);
     } else {
-      const nCategories = this.categories.length > this.maxColors ? this.maxColors : this.categories.length;
+      const nCategories = this.categories.length > this.state.maxCategories ? this.state.maxCategories : this.categories.length;
       for (let i = 0; i < this.categories.length; i++) {
         const t = i >= nCategories ? 1 : i / (nCategories - 1);
-        const transformedT = this.transformMin + t * (this.transformMax - this.transformMin);
+        const transformedT = this.state.transformMin + t * (this.state.transformMax - this.state.transformMin);
         const color2 = this._getColorAtPosition(transformedT);
         this.categoryColorMap.set(this.categories[i], color2);
       }
@@ -3514,7 +3533,7 @@ class CategoricalColorScale {
    */
   getValue(category) {
     if (category === null || category === void 0 || category === "") {
-      return this.nullColor;
+      return this.state.nullValue;
     }
     if (this.categoryColorMap.has(category)) {
       return this.categoryColorMap.get(category);
@@ -3554,25 +3573,820 @@ class CategoricalColorScale {
     }).join("");
   }
 }
-class Aesthetic {
+/*!
+ * vanilla-picker v2.12.3
+ * https://vanilla-picker.js.org
+ *
+ * Copyright 2017-2024 Andreas Borgen (https://github.com/Sphinxxxx), Adam Brooks (https://github.com/dissimulate)
+ * Released under the ISC license.
+ */
+var classCallCheck = function(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+};
+var createClass = /* @__PURE__ */ (function() {
+  function defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
+  return function(Constructor, protoProps, staticProps) {
+    if (protoProps) defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) defineProperties(Constructor, staticProps);
+    return Constructor;
+  };
+})();
+var slicedToArray = /* @__PURE__ */ (function() {
+  function sliceIterator(arr, i) {
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = void 0;
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"]) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+  return function(arr, i) {
+    if (Array.isArray(arr)) {
+      return arr;
+    } else if (Symbol.iterator in Object(arr)) {
+      return sliceIterator(arr, i);
+    } else {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance");
+    }
+  };
+})();
+String.prototype.startsWith = String.prototype.startsWith || function(needle) {
+  return this.indexOf(needle) === 0;
+};
+String.prototype.padStart = String.prototype.padStart || function(len, pad) {
+  var str = this;
+  while (str.length < len) {
+    str = pad + str;
+  }
+  return str;
+};
+var colorNames = { cb: "0f8ff", tqw: "aebd7", q: "-ffff", qmrn: "7fffd4", zr: "0ffff", bg: "5f5dc", bsq: "e4c4", bck: "---", nch: "ebcd", b: "--ff", bvt: "8a2be2", brwn: "a52a2a", brw: "deb887", ctb: "5f9ea0", hrt: "7fff-", chcT: "d2691e", cr: "7f50", rnw: "6495ed", crns: "8dc", crms: "dc143c", cn: "-ffff", Db: "--8b", Dcn: "-8b8b", Dgnr: "b8860b", Dgr: "a9a9a9", Dgrn: "-64-", Dkhk: "bdb76b", Dmgn: "8b-8b", Dvgr: "556b2f", Drng: "8c-", Drch: "9932cc", Dr: "8b--", Dsmn: "e9967a", Dsgr: "8fbc8f", DsTb: "483d8b", DsTg: "2f4f4f", Dtrq: "-ced1", Dvt: "94-d3", ppnk: "1493", pskb: "-bfff", mgr: "696969", grb: "1e90ff", rbrc: "b22222", rwht: "af0", stg: "228b22", chs: "-ff", gnsb: "dcdcdc", st: "8f8ff", g: "d7-", gnr: "daa520", gr: "808080", grn: "-8-0", grnw: "adff2f", hnw: "0fff0", htpn: "69b4", nnr: "cd5c5c", ng: "4b-82", vr: "0", khk: "0e68c", vnr: "e6e6fa", nrb: "0f5", wngr: "7cfc-", mnch: "acd", Lb: "add8e6", Lcr: "08080", Lcn: "e0ffff", Lgnr: "afad2", Lgr: "d3d3d3", Lgrn: "90ee90", Lpnk: "b6c1", Lsmn: "a07a", Lsgr: "20b2aa", Lskb: "87cefa", LsTg: "778899", Lstb: "b0c4de", Lw: "e0", m: "-ff-", mgrn: "32cd32", nn: "af0e6", mgnt: "-ff", mrn: "8--0", mqm: "66cdaa", mmb: "--cd", mmrc: "ba55d3", mmpr: "9370db", msg: "3cb371", mmsT: "7b68ee", "": "-fa9a", mtr: "48d1cc", mmvt: "c71585", mnLb: "191970", ntc: "5fffa", mstr: "e4e1", mccs: "e4b5", vjw: "dead", nv: "--80", c: "df5e6", v: "808-0", vrb: "6b8e23", rng: "a5-", rngr: "45-", rch: "da70d6", pgnr: "eee8aa", pgrn: "98fb98", ptrq: "afeeee", pvtr: "db7093", ppwh: "efd5", pchp: "dab9", pr: "cd853f", pnk: "c0cb", pm: "dda0dd", pwrb: "b0e0e6", prp: "8-080", cc: "663399", r: "--", sbr: "bc8f8f", rb: "4169e1", sbrw: "8b4513", smn: "a8072", nbr: "4a460", sgrn: "2e8b57", ssh: "5ee", snn: "a0522d", svr: "c0c0c0", skb: "87ceeb", sTb: "6a5acd", sTgr: "708090", snw: "afa", n: "-ff7f", stb: "4682b4", tn: "d2b48c", t: "-8080", thst: "d8bfd8", tmT: "6347", trqs: "40e0d0", vt: "ee82ee", whT: "5deb3", wht: "", hts: "5f5f5", w: "-", wgrn: "9acd32" };
+function printNum(num) {
+  var decs = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 1;
+  var str = decs > 0 ? num.toFixed(decs).replace(/0+$/, "").replace(/\.$/, "") : num.toString();
+  return str || "0";
+}
+var Color = (function() {
+  function Color2(r, g, b, a) {
+    classCallCheck(this, Color2);
+    var that = this;
+    function parseString(input) {
+      if (input.startsWith("hsl")) {
+        var _input$match$map = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map2 = slicedToArray(_input$match$map, 4), h = _input$match$map2[0], s = _input$match$map2[1], l = _input$match$map2[2], _a = _input$match$map2[3];
+        if (_a === void 0) {
+          _a = 1;
+        }
+        h /= 360;
+        s /= 100;
+        l /= 100;
+        that.hsla = [h, s, l, _a];
+      } else if (input.startsWith("rgb")) {
+        var _input$match$map3 = input.match(/([\-\d\.e]+)/g).map(Number), _input$match$map4 = slicedToArray(_input$match$map3, 4), _r = _input$match$map4[0], _g = _input$match$map4[1], _b = _input$match$map4[2], _a2 = _input$match$map4[3];
+        if (_a2 === void 0) {
+          _a2 = 1;
+        }
+        that.rgba = [_r, _g, _b, _a2];
+      } else {
+        if (input.startsWith("#")) {
+          that.rgba = Color2.hexToRgb(input);
+        } else {
+          that.rgba = Color2.nameToRgb(input) || Color2.hexToRgb(input);
+        }
+      }
+    }
+    if (r === void 0) ;
+    else if (Array.isArray(r)) {
+      this.rgba = r;
+    } else if (b === void 0) {
+      var color2 = r && "" + r;
+      if (color2) {
+        parseString(color2.toLowerCase());
+      }
+    } else {
+      this.rgba = [r, g, b, a === void 0 ? 1 : a];
+    }
+  }
+  createClass(Color2, [{
+    key: "printRGB",
+    value: function printRGB(alpha) {
+      var rgb2 = alpha ? this.rgba : this.rgba.slice(0, 3), vals = rgb2.map(function(x, i) {
+        return printNum(x, i === 3 ? 3 : 0);
+      });
+      return alpha ? "rgba(" + vals + ")" : "rgb(" + vals + ")";
+    }
+  }, {
+    key: "printHSL",
+    value: function printHSL(alpha) {
+      var mults = [360, 100, 100, 1], suff = ["", "%", "%", ""];
+      var hsl2 = alpha ? this.hsla : this.hsla.slice(0, 3), vals = hsl2.map(function(x, i) {
+        return printNum(x * mults[i], i === 3 ? 3 : 1) + suff[i];
+      });
+      return alpha ? "hsla(" + vals + ")" : "hsl(" + vals + ")";
+    }
+  }, {
+    key: "printHex",
+    value: function printHex(alpha) {
+      var hex2 = this.hex;
+      return alpha ? hex2 : hex2.substring(0, 7);
+    }
+  }, {
+    key: "rgba",
+    get: function get2() {
+      if (this._rgba) {
+        return this._rgba;
+      }
+      if (!this._hsla) {
+        throw new Error("No color is set");
+      }
+      return this._rgba = Color2.hslToRgb(this._hsla);
+    },
+    set: function set2(rgb2) {
+      if (rgb2.length === 3) {
+        rgb2[3] = 1;
+      }
+      this._rgba = rgb2;
+      this._hsla = null;
+    }
+  }, {
+    key: "rgbString",
+    get: function get2() {
+      return this.printRGB();
+    }
+  }, {
+    key: "rgbaString",
+    get: function get2() {
+      return this.printRGB(true);
+    }
+  }, {
+    key: "hsla",
+    get: function get2() {
+      if (this._hsla) {
+        return this._hsla;
+      }
+      if (!this._rgba) {
+        throw new Error("No color is set");
+      }
+      return this._hsla = Color2.rgbToHsl(this._rgba);
+    },
+    set: function set2(hsl2) {
+      if (hsl2.length === 3) {
+        hsl2[3] = 1;
+      }
+      this._hsla = hsl2;
+      this._rgba = null;
+    }
+  }, {
+    key: "hslString",
+    get: function get2() {
+      return this.printHSL();
+    }
+  }, {
+    key: "hslaString",
+    get: function get2() {
+      return this.printHSL(true);
+    }
+  }, {
+    key: "hex",
+    get: function get2() {
+      var rgb2 = this.rgba, hex2 = rgb2.map(function(x, i) {
+        return i < 3 ? x.toString(16) : Math.round(x * 255).toString(16);
+      });
+      return "#" + hex2.map(function(x) {
+        return x.padStart(2, "0");
+      }).join("");
+    },
+    set: function set2(hex2) {
+      this.rgba = Color2.hexToRgb(hex2);
+    }
+  }], [{
+    key: "hexToRgb",
+    value: function hexToRgb2(input) {
+      var hex2 = (input.startsWith("#") ? input.slice(1) : input).replace(/^(\w{3})$/, "$1F").replace(/^(\w)(\w)(\w)(\w)$/, "$1$1$2$2$3$3$4$4").replace(/^(\w{6})$/, "$1FF");
+      if (!hex2.match(/^([0-9a-fA-F]{8})$/)) {
+        throw new Error("Unknown hex color; " + input);
+      }
+      var rgba2 = hex2.match(/^(\w\w)(\w\w)(\w\w)(\w\w)$/).slice(1).map(function(x) {
+        return parseInt(x, 16);
+      });
+      rgba2[3] = rgba2[3] / 255;
+      return rgba2;
+    }
+  }, {
+    key: "nameToRgb",
+    value: function nameToRgb(input) {
+      var hash = input.toLowerCase().replace("at", "T").replace(/[aeiouyldf]/g, "").replace("ght", "L").replace("rk", "D").slice(-5, 4), hex2 = colorNames[hash];
+      return hex2 === void 0 ? hex2 : Color2.hexToRgb(hex2.replace(/\-/g, "00").padStart(6, "f"));
+    }
+  }, {
+    key: "rgbToHsl",
+    value: function rgbToHsl(_ref) {
+      var _ref2 = slicedToArray(_ref, 4), r = _ref2[0], g = _ref2[1], b = _ref2[2], a = _ref2[3];
+      r /= 255;
+      g /= 255;
+      b /= 255;
+      var max = Math.max(r, g, b), min = Math.min(r, g, b);
+      var h = void 0, s = void 0, l = (max + min) / 2;
+      if (max === min) {
+        h = s = 0;
+      } else {
+        var d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+          case r:
+            h = (g - b) / d + (g < b ? 6 : 0);
+            break;
+          case g:
+            h = (b - r) / d + 2;
+            break;
+          case b:
+            h = (r - g) / d + 4;
+            break;
+        }
+        h /= 6;
+      }
+      return [h, s, l, a];
+    }
+  }, {
+    key: "hslToRgb",
+    value: function hslToRgb(_ref3) {
+      var _ref4 = slicedToArray(_ref3, 4), h = _ref4[0], s = _ref4[1], l = _ref4[2], a = _ref4[3];
+      var r = void 0, g = void 0, b = void 0;
+      if (s === 0) {
+        r = g = b = l;
+      } else {
+        var hue2rgb = function hue2rgb2(p2, q2, t) {
+          if (t < 0) t += 1;
+          if (t > 1) t -= 1;
+          if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
+          if (t < 1 / 2) return q2;
+          if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+          return p2;
+        };
+        var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1 / 3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1 / 3);
+      }
+      var rgba2 = [r * 255, g * 255, b * 255].map(Math.round);
+      rgba2[3] = a;
+      return rgba2;
+    }
+  }]);
+  return Color2;
+})();
+var EventBucket = (function() {
+  function EventBucket2() {
+    classCallCheck(this, EventBucket2);
+    this._events = [];
+  }
+  createClass(EventBucket2, [{
+    key: "add",
+    value: function add(target, type, handler) {
+      target.addEventListener(type, handler, false);
+      this._events.push({
+        target,
+        type,
+        handler
+      });
+    }
+  }, {
+    key: "remove",
+    value: function remove2(target, type, handler) {
+      this._events = this._events.filter(function(e) {
+        var isMatch = true;
+        if (target && target !== e.target) {
+          isMatch = false;
+        }
+        if (type && type !== e.type) {
+          isMatch = false;
+        }
+        if (handler && handler !== e.handler) {
+          isMatch = false;
+        }
+        if (isMatch) {
+          EventBucket2._doRemove(e.target, e.type, e.handler);
+        }
+        return !isMatch;
+      });
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._events.forEach(function(e) {
+        return EventBucket2._doRemove(e.target, e.type, e.handler);
+      });
+      this._events = [];
+    }
+  }], [{
+    key: "_doRemove",
+    value: function _doRemove(target, type, handler) {
+      target.removeEventListener(type, handler, false);
+    }
+  }]);
+  return EventBucket2;
+})();
+function parseHTML(htmlString) {
+  var div = document.createElement("div");
+  div.innerHTML = htmlString;
+  return div.firstElementChild;
+}
+function dragTrack(eventBucket, area, callback) {
+  var dragging = false;
+  function clamp(val, min, max) {
+    return Math.max(min, Math.min(val, max));
+  }
+  function onMove(e, info, starting) {
+    if (starting) {
+      dragging = true;
+    }
+    if (!dragging) {
+      return;
+    }
+    e.preventDefault();
+    var bounds = area.getBoundingClientRect(), w = bounds.width, h = bounds.height, x = info.clientX, y = info.clientY;
+    var relX = clamp(x - bounds.left, 0, w), relY = clamp(y - bounds.top, 0, h);
+    callback(relX / w, relY / h);
+  }
+  function onMouse(e, starting) {
+    var button = e.buttons === void 0 ? e.which : e.buttons;
+    if (button === 1) {
+      onMove(e, e, starting);
+    } else {
+      dragging = false;
+    }
+  }
+  function onTouch(e, starting) {
+    if (e.touches.length === 1) {
+      onMove(e, e.touches[0], starting);
+    } else {
+      dragging = false;
+    }
+  }
+  eventBucket.add(area, "mousedown", function(e) {
+    onMouse(e, true);
+  });
+  eventBucket.add(area, "touchstart", function(e) {
+    onTouch(e, true);
+  });
+  eventBucket.add(window, "mousemove", onMouse);
+  eventBucket.add(area, "touchmove", onTouch);
+  eventBucket.add(window, "mouseup", function(e) {
+    dragging = false;
+  });
+  eventBucket.add(area, "touchend", function(e) {
+    dragging = false;
+  });
+  eventBucket.add(area, "touchcancel", function(e) {
+    dragging = false;
+  });
+}
+var BG_TRANSP = "linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 2em 2em,\n                   linear-gradient(45deg, lightgrey 25%,       white 25%,       white 75%, lightgrey 75%) 1em 1em / 2em 2em";
+var HUES = 360;
+var EVENT_KEY = "keydown", EVENT_CLICK_OUTSIDE = "mousedown", EVENT_TAB_MOVE = "focusin";
+function $(selector2, context) {
+  return (context || document).querySelector(selector2);
+}
+function stopEvent(e) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+function onKey(bucket, target, keys, handler, stop) {
+  bucket.add(target, EVENT_KEY, function(e) {
+    if (keys.indexOf(e.key) >= 0) {
+      handler(e);
+    }
+  });
+}
+var Picker = (function() {
+  function Picker2(options) {
+    classCallCheck(this, Picker2);
+    this.settings = {
+      popup: "right",
+      layout: "default",
+      alpha: true,
+      editor: true,
+      editorFormat: "hex",
+      cancelButton: false,
+      defaultColor: "#0cf"
+    };
+    this._events = new EventBucket();
+    this.onChange = null;
+    this.onDone = null;
+    this.onOpen = null;
+    this.onClose = null;
+    this.setOptions(options);
+  }
+  createClass(Picker2, [{
+    key: "setOptions",
+    value: function setOptions(options) {
+      var _this = this;
+      if (!options) {
+        return;
+      }
+      var settings = this.settings;
+      function transfer(source, target, skipKeys) {
+        for (var key in source) {
+          target[key] = source[key];
+        }
+      }
+      if (options instanceof HTMLElement) {
+        settings.parent = options;
+      } else {
+        if (settings.parent && options.parent && settings.parent !== options.parent) {
+          this._events.remove(settings.parent);
+          this._popupInited = false;
+        }
+        transfer(options, settings);
+        if (options.onChange) {
+          this.onChange = options.onChange;
+        }
+        if (options.onDone) {
+          this.onDone = options.onDone;
+        }
+        if (options.onOpen) {
+          this.onOpen = options.onOpen;
+        }
+        if (options.onClose) {
+          this.onClose = options.onClose;
+        }
+        var col = options.color || options.colour;
+        if (col) {
+          this._setColor(col);
+        }
+      }
+      var parent = settings.parent;
+      if (parent && settings.popup && !this._popupInited) {
+        var openProxy = function openProxy2(e) {
+          return _this.openHandler(e);
+        };
+        this._events.add(parent, "click", openProxy);
+        onKey(this._events, parent, [" ", "Spacebar", "Enter"], openProxy);
+        this._popupInited = true;
+      } else if (options.parent && !settings.popup) {
+        this.show();
+      }
+    }
+  }, {
+    key: "openHandler",
+    value: function openHandler(e) {
+      if (this.show()) {
+        e && e.preventDefault();
+        this.settings.parent.style.pointerEvents = "none";
+        var toFocus = e && e.type === EVENT_KEY ? this._domEdit : this.domElement;
+        setTimeout(function() {
+          return toFocus.focus();
+        }, 100);
+        if (this.onOpen) {
+          this.onOpen(this.colour);
+        }
+      }
+    }
+  }, {
+    key: "closeHandler",
+    value: function closeHandler(e) {
+      var event = e && e.type;
+      var doHide = false;
+      if (!e) {
+        doHide = true;
+      } else if (event === EVENT_CLICK_OUTSIDE || event === EVENT_TAB_MOVE) {
+        var knownTime = (this.__containedEvent || 0) + 100;
+        if (e.timeStamp > knownTime) {
+          doHide = true;
+        }
+      } else {
+        stopEvent(e);
+        doHide = true;
+      }
+      if (doHide && this.hide()) {
+        this.settings.parent.style.pointerEvents = "";
+        if (event !== EVENT_CLICK_OUTSIDE) {
+          this.settings.parent.focus();
+        }
+        if (this.onClose) {
+          this.onClose(this.colour);
+        }
+      }
+    }
+  }, {
+    key: "movePopup",
+    value: function movePopup(options, open) {
+      this.closeHandler();
+      this.setOptions(options);
+      if (open) {
+        this.openHandler();
+      }
+    }
+  }, {
+    key: "setColor",
+    value: function setColor(color2, silent) {
+      this._setColor(color2, { silent });
+    }
+  }, {
+    key: "_setColor",
+    value: function _setColor(color2, flags) {
+      if (typeof color2 === "string") {
+        color2 = color2.trim();
+      }
+      if (!color2) {
+        return;
+      }
+      flags = flags || {};
+      var c = void 0;
+      try {
+        c = new Color(color2);
+      } catch (ex) {
+        if (flags.failSilently) {
+          return;
+        }
+        throw ex;
+      }
+      if (!this.settings.alpha) {
+        var hsla2 = c.hsla;
+        hsla2[3] = 1;
+        c.hsla = hsla2;
+      }
+      this.colour = this.color = c;
+      this._setHSLA(null, null, null, null, flags);
+    }
+  }, {
+    key: "setColour",
+    value: function setColour(colour, silent) {
+      this.setColor(colour, silent);
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      var parent = this.settings.parent;
+      if (!parent) {
+        return false;
+      }
+      if (this.domElement) {
+        var toggled = this._toggleDOM(true);
+        this._setPosition();
+        return toggled;
+      }
+      var html = this.settings.template || '<div class="picker_wrapper" tabindex="-1"><div class="picker_arrow"></div><div class="picker_hue picker_slider"><div class="picker_selector"></div></div><div class="picker_sl"><div class="picker_selector"></div></div><div class="picker_alpha picker_slider"><div class="picker_selector"></div></div><div class="picker_editor"><input aria-label="Type a color name or hex value"/></div><div class="picker_sample"></div><div class="picker_done"><button>Ok</button></div><div class="picker_cancel"><button>Cancel</button></div></div>';
+      var wrapper = parseHTML(html);
+      this.domElement = wrapper;
+      this._domH = $(".picker_hue", wrapper);
+      this._domSL = $(".picker_sl", wrapper);
+      this._domA = $(".picker_alpha", wrapper);
+      this._domEdit = $(".picker_editor input", wrapper);
+      this._domSample = $(".picker_sample", wrapper);
+      this._domOkay = $(".picker_done button", wrapper);
+      this._domCancel = $(".picker_cancel button", wrapper);
+      wrapper.classList.add("layout_" + this.settings.layout);
+      if (!this.settings.alpha) {
+        wrapper.classList.add("no_alpha");
+      }
+      if (!this.settings.editor) {
+        wrapper.classList.add("no_editor");
+      }
+      if (!this.settings.cancelButton) {
+        wrapper.classList.add("no_cancel");
+      }
+      this._ifPopup(function() {
+        return wrapper.classList.add("popup");
+      });
+      this._setPosition();
+      if (this.colour) {
+        this._updateUI();
+      } else {
+        this._setColor(this.settings.defaultColor);
+      }
+      this._bindEvents();
+      return true;
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      return this._toggleDOM(false);
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      this._events.destroy();
+      if (this.domElement) {
+        this.settings.parent.removeChild(this.domElement);
+      }
+    }
+  }, {
+    key: "_bindEvents",
+    value: function _bindEvents() {
+      var _this2 = this;
+      var that = this, dom = this.domElement, events = this._events;
+      function addEvent(target, type, handler) {
+        events.add(target, type, handler);
+      }
+      addEvent(dom, "click", function(e) {
+        return e.preventDefault();
+      });
+      dragTrack(events, this._domH, function(x, y) {
+        return that._setHSLA(x);
+      });
+      dragTrack(events, this._domSL, function(x, y) {
+        return that._setHSLA(null, x, 1 - y);
+      });
+      if (this.settings.alpha) {
+        dragTrack(events, this._domA, function(x, y) {
+          return that._setHSLA(null, null, null, 1 - y);
+        });
+      }
+      var editInput = this._domEdit;
+      {
+        addEvent(editInput, "input", function(e) {
+          that._setColor(this.value, { fromEditor: true, failSilently: true });
+        });
+        addEvent(editInput, "focus", function(e) {
+          var input = this;
+          if (input.selectionStart === input.selectionEnd) {
+            input.select();
+          }
+        });
+      }
+      this._ifPopup(function() {
+        var popupCloseProxy = function popupCloseProxy2(e) {
+          return _this2.closeHandler(e);
+        };
+        addEvent(window, EVENT_CLICK_OUTSIDE, popupCloseProxy);
+        addEvent(window, EVENT_TAB_MOVE, popupCloseProxy);
+        onKey(events, dom, ["Esc", "Escape"], popupCloseProxy);
+        var timeKeeper = function timeKeeper2(e) {
+          _this2.__containedEvent = e.timeStamp;
+        };
+        addEvent(dom, EVENT_CLICK_OUTSIDE, timeKeeper);
+        addEvent(dom, EVENT_TAB_MOVE, timeKeeper);
+        addEvent(_this2._domCancel, "click", popupCloseProxy);
+      });
+      var onDoneProxy = function onDoneProxy2(e) {
+        _this2._ifPopup(function() {
+          return _this2.closeHandler(e);
+        });
+        if (_this2.onDone) {
+          _this2.onDone(_this2.colour);
+        }
+      };
+      addEvent(this._domOkay, "click", onDoneProxy);
+      onKey(events, dom, ["Enter"], onDoneProxy);
+    }
+  }, {
+    key: "_setPosition",
+    value: function _setPosition() {
+      var parent = this.settings.parent, elm = this.domElement;
+      if (parent !== elm.parentNode) {
+        parent.appendChild(elm);
+      }
+      this._ifPopup(function(popup) {
+        if (getComputedStyle(parent).position === "static") {
+          parent.style.position = "relative";
+        }
+        var cssClass = popup === true ? "popup_right" : "popup_" + popup;
+        ["popup_top", "popup_bottom", "popup_left", "popup_right"].forEach(function(c) {
+          if (c === cssClass) {
+            elm.classList.add(c);
+          } else {
+            elm.classList.remove(c);
+          }
+        });
+        elm.classList.add(cssClass);
+      });
+    }
+  }, {
+    key: "_setHSLA",
+    value: function _setHSLA(h, s, l, a, flags) {
+      flags = flags || {};
+      var col = this.colour, hsla2 = col.hsla;
+      [h, s, l, a].forEach(function(x, i) {
+        if (x || x === 0) {
+          hsla2[i] = x;
+        }
+      });
+      col.hsla = hsla2;
+      this._updateUI(flags);
+      if (this.onChange && !flags.silent) {
+        this.onChange(col);
+      }
+    }
+  }, {
+    key: "_updateUI",
+    value: function _updateUI(flags) {
+      if (!this.domElement) {
+        return;
+      }
+      flags = flags || {};
+      var col = this.colour, hsl2 = col.hsla, cssHue = "hsl(" + hsl2[0] * HUES + ", 100%, 50%)", cssHSL = col.hslString, cssHSLA = col.hslaString;
+      var uiH = this._domH, uiSL = this._domSL, uiA = this._domA, thumbH = $(".picker_selector", uiH), thumbSL = $(".picker_selector", uiSL), thumbA = $(".picker_selector", uiA);
+      function posX(parent, child, relX) {
+        child.style.left = relX * 100 + "%";
+      }
+      function posY(parent, child, relY) {
+        child.style.top = relY * 100 + "%";
+      }
+      posX(uiH, thumbH, hsl2[0]);
+      this._domSL.style.backgroundColor = this._domH.style.color = cssHue;
+      posX(uiSL, thumbSL, hsl2[1]);
+      posY(uiSL, thumbSL, 1 - hsl2[2]);
+      uiSL.style.color = cssHSL;
+      posY(uiA, thumbA, 1 - hsl2[3]);
+      var opaque = cssHSL, transp = opaque.replace("hsl", "hsla").replace(")", ", 0)"), bg = "linear-gradient(" + [opaque, transp] + ")";
+      this._domA.style.background = bg + ", " + BG_TRANSP;
+      if (!flags.fromEditor) {
+        var format = this.settings.editorFormat, alpha = this.settings.alpha;
+        var value = void 0;
+        switch (format) {
+          case "rgb":
+            value = col.printRGB(alpha);
+            break;
+          case "hsl":
+            value = col.printHSL(alpha);
+            break;
+          default:
+            value = col.printHex(alpha);
+        }
+        this._domEdit.value = value;
+      }
+      this._domSample.style.color = cssHSLA;
+    }
+  }, {
+    key: "_ifPopup",
+    value: function _ifPopup(actionIf, actionElse) {
+      if (this.settings.parent && this.settings.popup) {
+        actionIf && actionIf(this.settings.popup);
+      } else {
+        actionElse && actionElse();
+      }
+    }
+  }, {
+    key: "_toggleDOM",
+    value: function _toggleDOM(toVisible) {
+      var dom = this.domElement;
+      if (!dom) {
+        return false;
+      }
+      var displayStyle = toVisible ? "" : "none", toggle = dom.style.display !== displayStyle;
+      if (toggle) {
+        dom.style.display = displayStyle;
+      }
+      return toggle;
+    }
+  }]);
+  return Picker2;
+})();
+{
+  var style = document.createElement("style");
+  style.textContent = '.picker_wrapper.no_alpha .picker_alpha{display:none}.picker_wrapper.no_editor .picker_editor{position:absolute;z-index:-1;opacity:0}.picker_wrapper.no_cancel .picker_cancel{display:none}.layout_default.picker_wrapper{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:stretch;font-size:10px;width:25em;padding:.5em}.layout_default.picker_wrapper input,.layout_default.picker_wrapper button{font-size:1rem}.layout_default.picker_wrapper>*{margin:.5em}.layout_default.picker_wrapper::before{content:"";display:block;width:100%;height:0;order:1}.layout_default .picker_slider,.layout_default .picker_selector{padding:1em}.layout_default .picker_hue{width:100%}.layout_default .picker_sl{flex:1 1 auto}.layout_default .picker_sl::before{content:"";display:block;padding-bottom:100%}.layout_default .picker_editor{order:1;width:6.5rem}.layout_default .picker_editor input{width:100%;height:100%}.layout_default .picker_sample{order:1;flex:1 1 auto}.layout_default .picker_done,.layout_default .picker_cancel{order:1}.picker_wrapper{box-sizing:border-box;background:#f2f2f2;box-shadow:0 0 0 1px silver;cursor:default;font-family:sans-serif;color:#444;pointer-events:auto}.picker_wrapper:focus{outline:none}.picker_wrapper button,.picker_wrapper input{box-sizing:border-box;border:none;box-shadow:0 0 0 1px silver;outline:none}.picker_wrapper button:focus,.picker_wrapper button:active,.picker_wrapper input:focus,.picker_wrapper input:active{box-shadow:0 0 2px 1px #1e90ff}.picker_wrapper button{padding:.4em .6em;cursor:pointer;background-color:#f5f5f5;background-image:linear-gradient(0deg, gainsboro, transparent)}.picker_wrapper button:active{background-image:linear-gradient(0deg, transparent, gainsboro)}.picker_wrapper button:hover{background-color:#fff}.picker_selector{position:absolute;z-index:1;display:block;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);border:2px solid #fff;border-radius:100%;box-shadow:0 0 3px 1px #67b9ff;background:currentColor;cursor:pointer}.picker_slider .picker_selector{border-radius:2px}.picker_hue{position:relative;background-image:linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);box-shadow:0 0 0 1px silver}.picker_sl{position:relative;box-shadow:0 0 0 1px silver;background-image:linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))}.picker_alpha,.picker_sample{position:relative;background:linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;box-shadow:0 0 0 1px silver}.picker_alpha .picker_selector,.picker_sample .picker_selector{background:none}.picker_editor input{font-family:monospace;padding:.2em .4em}.picker_sample::before{content:"";position:absolute;display:block;width:100%;height:100%;background:currentColor}.picker_arrow{position:absolute;z-index:-1}.picker_wrapper.popup{position:absolute;z-index:2;margin:1.5em}.picker_wrapper.popup,.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{background:#f2f2f2;box-shadow:0 0 10px 1px rgba(0,0,0,.4)}.picker_wrapper.popup .picker_arrow{width:3em;height:3em;margin:0}.picker_wrapper.popup .picker_arrow::before,.picker_wrapper.popup .picker_arrow::after{content:"";display:block;position:absolute;top:0;left:0;z-index:-99}.picker_wrapper.popup .picker_arrow::before{width:100%;height:100%;-webkit-transform:skew(45deg);transform:skew(45deg);-webkit-transform-origin:0 100%;transform-origin:0 100%}.picker_wrapper.popup .picker_arrow::after{width:150%;height:150%;box-shadow:none}.popup.popup_top{bottom:100%;left:0}.popup.popup_top .picker_arrow{bottom:0;left:0;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.popup.popup_bottom{top:100%;left:0}.popup.popup_bottom .picker_arrow{top:0;left:0;-webkit-transform:rotate(90deg) scale(1, -1);transform:rotate(90deg) scale(1, -1)}.popup.popup_left{top:0;right:100%}.popup.popup_left .picker_arrow{top:0;right:0;-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.popup.popup_right{top:0;left:100%}.popup.popup_right .picker_arrow{top:0;left:0}';
+  document.documentElement.firstElementChild.appendChild(style);
+  Picker.StyleElement = style;
+}
+class Aesthetic extends Subscribable {
   state;
   // Object containing all configuration used to infer the scale
   scale;
   // the actual scale instance
+  values;
+  // Store the original values for scale recreation
+  defaultPalette = ["#440154", "#31688e", "#35b779", "#fde724"];
   constructor(values, options = {}) {
+    super();
     if (!options.scaleType) {
       throw new Error("scaleType is required");
     }
     if (options.default === void 0) {
       throw new Error("default is required");
     }
+    this.values = values;
     this.state = {
       scaleType: void 0,
       default: void 0,
       isCategorical: void 0,
       outputValues: null,
       outputRegex: null,
-      colorPalette: null,
+      colorPalette: this.defaultPalette,
+      colorPositions: this.defaultPalette.map((_, i) => i / (this.defaultPalette.length - 1)),
       outputRange: null,
       inputUnits: null,
       title: null,
@@ -3582,17 +4396,10 @@ class Aesthetic {
       transformMin: 0,
       transformMax: 1,
       transformFn: null,
-      colorPositions: null,
+      nullValue: null,
       ...options
     };
-    this.updateScale(values);
-  }
-  /**
-   * Set the scale instance for this aesthetic
-   * @param {object} scale - The scale instance
-   */
-  setScale(scale) {
-    this.scale = scale;
+    this.updateScale(false);
   }
   /**
    * Get the output value for a given input value
@@ -3607,14 +4414,10 @@ class Aesthetic {
    * Update the scale based on current state
    * Uses the stored state to create an appropriate scale
    */
-  updateScale(values) {
+  updateScale(notify = true) {
+    const values = this.values;
     const { scaleType, isCategorical } = this.state;
     let scale;
-    if (scaleType === "null") {
-      scale = new NullScale(this.state.default);
-      this.setScale(scale);
-      return;
-    }
     let isAlreadyOutputFormat = true;
     if (isCategorical && (this.state.outputValues || this.state.outputRegex)) {
       if (this.state.outputValues) {
@@ -3636,77 +4439,461 @@ class Aesthetic {
     } else {
       isAlreadyOutputFormat = false;
     }
-    if (scaleType === "identity" || isAlreadyOutputFormat) {
-      scale = new IdentityScale(
-        this.state.default,
-        this.state.outputValues,
-        this.state.transformFn
-      );
-      this.setScale(scale);
-      return;
-    }
-    if (scaleType === "text") {
+    if (scaleType === "null") {
+      scale = new NullScale(this.state);
+      this.scale = scale;
+    } else if (scaleType === "identity" || isAlreadyOutputFormat) {
+      scale = new IdentityScale(this.state);
+      this.scale = scale;
+    } else if (scaleType === "text") {
       if (!isCategorical) {
         throw new Error("Text scales can only be used with categorical data");
       }
-      scale = new CategoricalTextScale(values, this.state.outputValues, this.state.default);
-      this.setScale(scale);
-      return;
-    }
-    if (scaleType === "size") {
+      scale = new CategoricalTextScale(values, this.state);
+      this.scale = scale;
+    } else if (scaleType === "size") {
       if (isCategorical) {
         throw new Error("Size scales can only be used with continuous data");
       }
       const numericValues = values.map((v) => Number(v)).filter((v) => !isNaN(v));
       if (numericValues.length === 0) {
         console.warn("No numeric values found for size scale, using NullScale");
-        scale = new NullScale(this.state.default);
+        scale = new NullScale(this.state);
       } else {
         const min = Math.min(...numericValues);
         const max = Math.max(...numericValues);
-        const range = this.state.outputRange || [0.5, 2];
-        scale = new ContinuousSizeScale(min, max, range[0], range[1]);
+        scale = new ContinuousSizeScale(min, max, this.state);
       }
-      this.setScale(scale);
-      return;
-    }
-    if (scaleType === "color") {
+      this.scale = scale;
+    } else if (scaleType === "color") {
       if (isCategorical) {
-        scale = new CategoricalColorScale(
-          values,
-          this.state.transformMin,
-          this.state.transformMax,
-          this.state.colorPalette,
-          this.state.colorPositions,
-          this.state.maxCategories
-        );
+        scale = new CategoricalColorScale(values, this.state);
       } else {
         const numericValues = values.map((v) => Number(v)).filter((v) => !isNaN(v));
         if (numericValues.length === 0) {
           console.warn("No numeric values found for color scale, using NullScale");
-          scale = new NullScale(this.state.default);
+          scale = new NullScale(this.state);
         } else {
           const min = Math.min(...numericValues);
           const max = Math.max(...numericValues);
-          scale = new ContinuousColorScale(
-            min,
-            max,
-            this.state.transformMin,
-            this.state.transformMax,
-            this.state.colorPalette,
-            this.state.colorPositions
-          );
+          scale = new ContinuousColorScale(min, max, this.state);
         }
       }
-      this.setScale(scale);
-      return;
+      this.scale = scale;
+    } else {
+      throw new Error(`Unknown scale type: ${scaleType}`);
+    }
+    if (notify) {
+      this.notify("aestheticChange", this);
+    }
+  }
+  /**
+   * Update aesthetic state properties
+   * @param {Object} updates - Object with properties to update
+   */
+  updateState(updates) {
+    Object.assign(this.state, updates);
+    this.updateScale(this.values);
+  }
+  /**
+   * Create settings widget(s) for this aesthetic
+   * @param {Object} options - Configuration options
+   * @param {number} options.controlHeight - Height of controls
+   * @returns {HTMLElement|null} The settings widget container, or null if no settings available
+   */
+  createSettingsWidget(options = {}) {
+    const {
+      controlHeight = 24
+    } = options;
+    if (this.state.scaleType === "color") {
+      return this.createColorPaletteEditor(controlHeight);
     }
-    throw new Error(`Unknown scale type: ${scaleType}`);
+    return null;
   }
+  /**
+   * Create a color palette editor widget
+   * @param {number} controlHeight - Height of controls
+   * @returns {HTMLElement} The palette editor container
+   */
+  createColorPaletteEditor(controlHeight) {
+    if (!this.scale) {
+      return null;
+    }
+    const container = document.createElement("div");
+    container.className = "ht-color-palette-editor";
+    const gradientContainer = document.createElement("div");
+    gradientContainer.className = "ht-gradient-container";
+    const gradientColumn = document.createElement("div");
+    gradientColumn.className = "ht-gradient-column";
+    const colorSquaresContainer = document.createElement("div");
+    colorSquaresContainer.className = "ht-color-squares-container";
+    const gradientBox = document.createElement("div");
+    gradientBox.className = "ht-gradient-box";
+    const updateGradientDisplay = () => {
+      const gradientStops = this.state.colorPalette.map((color2, i) => {
+        const pos = this.state.colorPositions[i] * 100;
+        return `${color2} ${pos}%`;
+      }).join(", ");
+      gradientBox.style.background = `linear-gradient(to right, ${gradientStops})`;
+    };
+    updateGradientDisplay();
+    let currentPickerParent = null;
+    const pickerContainer = document.createElement("div");
+    pickerContainer.style.position = "fixed";
+    pickerContainer.style.zIndex = "999999";
+    pickerContainer.style.pointerEvents = "auto";
+    document.body.appendChild(pickerContainer);
+    const nullPickerContainer = document.createElement("div");
+    nullPickerContainer.style.position = "fixed";
+    nullPickerContainer.style.zIndex = "999999";
+    nullPickerContainer.style.pointerEvents = "auto";
+    document.body.appendChild(nullPickerContainer);
+    const closeGradientPicker = () => {
+      pickerContainer.style.display = "none";
+      currentPickerParent = null;
+    };
+    const closeNullPicker = () => {
+      nullPickerContainer.style.display = "none";
+    };
+    const nullColorColumn = document.createElement("div");
+    nullColorColumn.className = "ht-null-color-column";
+    const nullColorSquareContainer = document.createElement("div");
+    nullColorSquareContainer.className = "ht-null-color-square-container";
+    const nullSquareWrapper = document.createElement("div");
+    nullSquareWrapper.style.display = "flex";
+    nullSquareWrapper.style.flexDirection = "column";
+    nullSquareWrapper.style.alignItems = "center";
+    const nullSquare = document.createElement("div");
+    nullSquare.className = "ht-null-color-square";
+    nullSquare.style.backgroundColor = this.state.nullValue;
+    nullSquare.title = "Click to edit missing data color";
+    const nullTick = document.createElement("div");
+    nullTick.className = "ht-null-color-square-tick";
+    nullSquareWrapper.appendChild(nullSquare);
+    nullSquareWrapper.appendChild(nullTick);
+    nullColorSquareContainer.appendChild(nullSquareWrapper);
+    const nullColorBox = document.createElement("div");
+    nullColorBox.className = "ht-null-color-box";
+    nullColorBox.style.backgroundColor = this.state.nullValue;
+    const sharedPicker = new Picker({
+      parent: pickerContainer,
+      popup: false,
+      alpha: false,
+      editor: true,
+      color: this.state.colorPalette[0],
+      onChange: (color2) => {
+        if (!currentPickerParent) return;
+        const colorIndex = parseInt(currentPickerParent.getAttribute("data-color-index"));
+        const hexColor = color2.hex.substring(0, 7);
+        this.state.colorPalette[colorIndex] = hexColor;
+        currentPickerParent.style.backgroundColor = hexColor;
+        updateGradientDisplay();
+        const minColor2 = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+        minHandle.style.backgroundColor = minColor2;
+        const maxColor2 = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+        maxHandle.style.backgroundColor = maxColor2;
+        this.updateScale();
+      },
+      onDone: () => {
+        closeGradientPicker();
+      }
+    });
+    pickerContainer.style.display = "none";
+    const closePickerOnClickOutside = (e) => {
+      if (!pickerContainer.contains(e.target) && !e.target.closest(".ht-color-square")) {
+        closeGradientPicker();
+      }
+    };
+    document.addEventListener("click", closePickerOnClickOutside);
+    const nullColorPicker = new Picker({
+      parent: nullPickerContainer,
+      popup: false,
+      alpha: false,
+      editor: true,
+      color: this.state.nullValue,
+      onChange: (color2) => {
+        const hexColor = color2.hex.substring(0, 7);
+        this.state.nullValue = hexColor;
+        nullSquare.style.backgroundColor = hexColor;
+        nullColorBox.style.backgroundColor = hexColor;
+        this.updateScale();
+      },
+      onDone: () => {
+        closeNullPicker();
+      }
+    });
+    nullPickerContainer.style.display = "none";
+    const closeNullPickerOnClickOutside = (e) => {
+      if (!nullPickerContainer.contains(e.target) && e.target !== nullSquare) {
+        closeNullPicker();
+      }
+    };
+    document.addEventListener("click", closeNullPickerOnClickOutside);
+    container.dataset.pickerCleanup = "cleanup";
+    container.cleanupFunction = () => {
+      document.removeEventListener("click", closePickerOnClickOutside);
+      document.removeEventListener("click", closeNullPickerOnClickOutside);
+      if (pickerContainer.parentElement) {
+        pickerContainer.parentElement.removeChild(pickerContainer);
+      }
+      if (nullPickerContainer.parentElement) {
+        nullPickerContainer.parentElement.removeChild(nullPickerContainer);
+      }
+    };
+    const recreateColorSquares = () => {
+      colorSquaresContainer.innerHTML = "";
+      this.state.colorPalette.forEach((color2, i) => {
+        const squareContainer = createColorSquareWithTick(colorSquaresContainer, color2, i, (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const square = e.currentTarget;
+          const colorIndex = parseInt(square.getAttribute("data-color-index"));
+          closeNullPicker();
+          currentPickerParent = square;
+          const rect = square.getBoundingClientRect();
+          sharedPicker.setColor(this.state.colorPalette[colorIndex], true);
+          pickerContainer.style.left = `${rect.left}px`;
+          pickerContainer.style.top = `${rect.bottom + 5}px`;
+          pickerContainer.style.display = "block";
+        });
+        squareContainer.style.left = `${this.state.colorPositions[i] * 100}%`;
+      });
+    };
+    recreateColorSquares();
+    const rangeSliderContainer = document.createElement("div");
+    rangeSliderContainer.className = "ht-range-slider-container";
+    const minHandle = document.createElement("div");
+    minHandle.className = "ht-range-handle";
+    minHandle.style.left = `${this.state.transformMin * 100}%`;
+    minHandle.title = "Drag to adjust minimum";
+    let minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+    minHandle.style.backgroundColor = minColor;
+    const minIndicator = document.createElement("div");
+    minIndicator.className = "ht-range-handle-indicator";
+    minHandle.appendChild(minIndicator);
+    const maxHandle = document.createElement("div");
+    maxHandle.className = "ht-range-handle";
+    maxHandle.style.left = `${this.state.transformMax * 100}%`;
+    maxHandle.title = "Drag to adjust maximum";
+    let maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+    maxHandle.style.backgroundColor = maxColor;
+    const maxIndicator = document.createElement("div");
+    maxIndicator.className = "ht-range-handle-indicator";
+    maxHandle.appendChild(maxIndicator);
+    let isDraggingMin = false;
+    minHandle.addEventListener("mousedown", (e) => {
+      isDraggingMin = true;
+      e.preventDefault();
+    });
+    let isDraggingMax = false;
+    maxHandle.addEventListener("mousedown", (e) => {
+      isDraggingMax = true;
+      e.preventDefault();
+    });
+    const handleMouseMove = (e) => {
+      if (!isDraggingMin && !isDraggingMax) return;
+      const rect = rangeSliderContainer.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const width = rect.width;
+      let newValue = Math.max(0, Math.min(1, x / width));
+      if (isDraggingMin) {
+        newValue = Math.min(newValue, this.state.transformMax - 0.01);
+        this.state.transformMin = newValue;
+        minHandle.style.left = `${newValue * 100}%`;
+        minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, newValue);
+        minHandle.style.backgroundColor = minColor;
+        this.updateScale();
+      } else if (isDraggingMax) {
+        newValue = Math.max(newValue, this.state.transformMin + 0.01);
+        this.state.transformMax = newValue;
+        maxHandle.style.left = `${newValue * 100}%`;
+        maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, newValue);
+        maxHandle.style.backgroundColor = maxColor;
+        this.updateScale();
+      }
+    };
+    const handleMouseUp = () => {
+      isDraggingMin = false;
+      isDraggingMax = false;
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    rangeSliderContainer.appendChild(minHandle);
+    rangeSliderContainer.appendChild(maxHandle);
+    gradientColumn.appendChild(colorSquaresContainer);
+    gradientColumn.appendChild(gradientBox);
+    gradientColumn.appendChild(rangeSliderContainer);
+    nullSquare.addEventListener("click", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      closeGradientPicker();
+      const rect = nullSquare.getBoundingClientRect();
+      nullColorPicker.setColor(this.state.nullValue, true);
+      nullPickerContainer.style.left = `${rect.left}px`;
+      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 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);
+    nullColorColumn.appendChild(nullColorSquareContainer);
+    nullColorColumn.appendChild(nullColorBox);
+    nullColorColumn.appendChild(resetContainer);
+    gradientContainer.appendChild(gradientColumn);
+    gradientContainer.appendChild(nullColorColumn);
+    const leftButtonsContainer = document.createElement("div");
+    leftButtonsContainer.className = "ht-palette-buttons-container";
+    const leftPlusBtn = createPaletteButton("+", "Add color to left");
+    leftPlusBtn.addEventListener("click", () => {
+      const newColor = this.state.colorPalette[0];
+      this.state.colorPalette.unshift(newColor);
+      this.state.colorPositions = this.state.colorPalette.map((_, i) => i / (this.state.colorPalette.length - 1));
+      updateGradientDisplay();
+      recreateColorSquares();
+      minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+      minHandle.style.backgroundColor = minColor;
+      maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+      maxHandle.style.backgroundColor = maxColor;
+      this.updateScale();
+    });
+    const leftMinusBtn = createPaletteButton("-", "Remove color from left");
+    leftMinusBtn.addEventListener("click", () => {
+      if (this.state.colorPalette.length <= 2) {
+        console.warn("Cannot remove color: minimum 2 colors required");
+        return;
+      }
+      this.state.colorPalette.shift();
+      this.state.colorPositions = this.state.colorPalette.map((_, i) => i / (this.state.colorPalette.length - 1));
+      updateGradientDisplay();
+      recreateColorSquares();
+      minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+      minHandle.style.backgroundColor = minColor;
+      maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+      maxHandle.style.backgroundColor = maxColor;
+      this.updateScale();
+    });
+    leftButtonsContainer.appendChild(leftPlusBtn);
+    leftButtonsContainer.appendChild(leftMinusBtn);
+    const rightButtonsContainer = document.createElement("div");
+    rightButtonsContainer.className = "ht-palette-buttons-container";
+    const rightPlusBtn = createPaletteButton("+", "Add color to right");
+    rightPlusBtn.addEventListener("click", () => {
+      const newColor = this.state.colorPalette[this.state.colorPalette.length - 1];
+      this.state.colorPalette.push(newColor);
+      this.state.colorPositions = this.state.colorPalette.map((_, i) => i / (this.state.colorPalette.length - 1));
+      updateGradientDisplay();
+      recreateColorSquares();
+      minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+      minHandle.style.backgroundColor = minColor;
+      maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+      maxHandle.style.backgroundColor = maxColor;
+      this.updateScale();
+    });
+    const rightMinusBtn = createPaletteButton("-", "Remove color from right");
+    rightMinusBtn.addEventListener("click", () => {
+      if (this.state.colorPalette.length <= 2) {
+        console.warn("Cannot remove color: minimum 2 colors required");
+        return;
+      }
+      this.state.colorPalette.pop();
+      this.state.colorPositions = this.state.colorPalette.map((_, i) => i / (this.state.colorPalette.length - 1));
+      updateGradientDisplay();
+      recreateColorSquares();
+      minColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMin);
+      minHandle.style.backgroundColor = minColor;
+      maxColor = interpolateGradient(this.state.colorPalette, this.state.colorPositions, this.state.transformMax);
+      maxHandle.style.backgroundColor = maxColor;
+      this.updateScale();
+    });
+    rightButtonsContainer.appendChild(rightPlusBtn);
+    rightButtonsContainer.appendChild(rightMinusBtn);
+    container.appendChild(leftButtonsContainer);
+    container.appendChild(gradientContainer);
+    container.appendChild(rightButtonsContainer);
+    return container;
+  }
+}
+function createPaletteButton(text, title) {
+  const button = document.createElement("button");
+  button.className = "ht-palette-button";
+  button.textContent = text;
+  button.title = title;
+  return button;
+}
+function interpolateGradient(colors, positions, t) {
+  t = Math.max(0, Math.min(1, t));
+  if (colors.length === 1) {
+    return colors[0];
+  }
+  let i = 0;
+  while (i < positions.length - 1 && t > positions[i + 1]) {
+    i++;
+  }
+  if (t === positions[i]) {
+    return colors[i];
+  }
+  if (i === positions.length - 1) {
+    return colors[i];
+  }
+  const t1 = positions[i];
+  const t2 = positions[i + 1];
+  const localT = (t - t1) / (t2 - t1);
+  const color1 = hexToRgb(colors[i]);
+  const color2 = hexToRgb(colors[i + 1]);
+  const r = Math.round(color1.r + (color2.r - color1.r) * localT);
+  const g = Math.round(color1.g + (color2.g - color1.g) * localT);
+  const b = Math.round(color1.b + (color2.b - color1.b) * localT);
+  return rgbToHex(r, g, b);
+}
+function hexToRgb(hex2) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex2);
+  return result ? {
+    r: parseInt(result[1], 16),
+    g: parseInt(result[2], 16),
+    b: parseInt(result[3], 16)
+  } : { r: 0, g: 0, b: 0 };
+}
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map((x) => {
+    const hex2 = x.toString(16);
+    return hex2.length === 1 ? "0" + hex2 : hex2;
+  }).join("");
+}
+function createColorSquareWithTick(parent, color2, colorIndex, clickHandler) {
+  const squareContainer = document.createElement("div");
+  squareContainer.className = "ht-color-square-wrapper";
+  const square = document.createElement("div");
+  square.className = "ht-color-square";
+  square.style.backgroundColor = color2;
+  square.title = "Click to edit color";
+  square.setAttribute("data-color-index", colorIndex);
+  square.addEventListener("click", clickHandler);
+  const tick = document.createElement("div");
+  tick.className = "ht-color-square-tick";
+  squareContainer.appendChild(square);
+  squareContainer.appendChild(tick);
+  parent.appendChild(squareContainer);
+  return squareContainer;
 }
 class TreeData extends Subscribable {
   tree;
   metadata = /* @__PURE__ */ new Map();
+  // Map of table ID to array of row objects
   metadataTableNames = /* @__PURE__ */ new Map();
   // Map of table ID to display name
   columnType = /* @__PURE__ */ new Map();
@@ -3717,14 +4904,17 @@ class TreeData extends Subscribable {
   // Display-friendly column name, keyed by unique column ID
   columnAesthetic = /* @__PURE__ */ new Map();
   // Map of columnId -> Map of aestheticId -> Aesthetic
+  nodeIdColumn = /* @__PURE__ */ new Map();
+  // Map of table ID to the column name used for node IDs
+  validIdColumns = /* @__PURE__ */ new Map();
+  // Map of table ID to array of column names that contain valid node IDs
   #nextTableId = 0;
   constructor(newickStr, metadataTables = [], metadataTableNames = []) {
     super();
     this.tree = this.parseTree(newickStr);
     if (Array.isArray(metadataTables)) {
       metadataTables.forEach((tableStr, index) => {
-        const tableName = metadataTableNames[index] || `Metadata ${index + 1}`;
-        this.addTable(tableStr, tableName);
+        this.addTable(tableStr, metadataTableNames[index]);
       });
     }
   }
@@ -3752,7 +4942,7 @@ class TreeData extends Subscribable {
    */
   setTree(newickStr) {
     this.tree = this.parseTree(newickStr);
-    this.metadata.keys().forEach(this.#attachTable);
+    this.metadata.keys().forEach((tableId) => this.#attachTable(tableId));
     this.notify("treeUpdated", this);
   }
   /**
@@ -3762,6 +4952,39 @@ class TreeData extends Subscribable {
   getMetadataTableNames() {
     return Array.from(this.metadataTableNames.values());
   }
+  /**
+   * Get all node names from the tree
+   * @returns {Set<string>} Set of all node names in the tree
+   */
+  getTreeNodeNames() {
+    const nodeNames = /* @__PURE__ */ new Set();
+    this.tree.each((d) => {
+      if (d.data.name) {
+        nodeNames.add(d.data.name);
+      }
+    });
+    return nodeNames;
+  }
+  /**
+   * Generate a Map from node ID to row data for a given table
+   * @param {string} tableId - ID of the table
+   * @returns {Map} Map from node ID to row data
+   */
+  #generateMetadataMap(tableId) {
+    const rows = this.metadata.get(tableId);
+    const idColumn = this.nodeIdColumn.get(tableId);
+    if (!rows || !idColumn) {
+      return /* @__PURE__ */ new Map();
+    }
+    const metadataMap = /* @__PURE__ */ new Map();
+    for (const row of rows) {
+      const nodeId = row[idColumn];
+      if (nodeId) {
+        metadataMap.set(nodeId, row);
+      }
+    }
+    return metadataMap;
+  }
   /**
    * Add a metadata table
    * @param {string} tableStr - TSV formatted string or path
@@ -3770,22 +4993,29 @@ class TreeData extends Subscribable {
    * @returns {string} The table ID
    */
   addTable(tableStr, tableName = null, sep = "	") {
-    const { metadataMap, columnTypes } = parseTable(tableStr, sep);
-    const id2 = `table_${this.#nextTableId++}`;
+    let { metadataMap, columnTypes, idColumns } = parseTable(tableStr, this.getTreeNodeNames(), sep);
+    const tableId = `table_${this.#nextTableId++}`;
     if (!tableName) {
       tableName = `Metadata ${this.#nextTableId}`;
     }
-    this.metadataTableNames.set(id2, tableName);
+    this.metadataTableNames.set(tableId, tableName);
     const columnIdMap = /* @__PURE__ */ new Map();
     for (const [originalName, columnType] of columnTypes) {
-      const uniqueId = `${id2}_${originalName}`;
+      const uniqueId = `${tableId}_${originalName}`;
       columnIdMap.set(originalName, uniqueId);
       this.columnType.set(uniqueId, columnType);
       this.columnName.set(uniqueId, originalName);
       this.columnDisplayName.set(uniqueId, columnToHeader(originalName));
     }
-    const transformedMetadata = /* @__PURE__ */ new Map();
-    for (const [nodeName, nodeData] of metadataMap) {
+    idColumns = idColumns.map((x) => columnIdMap.get(x));
+    let selectedIdColumn = null;
+    if (idColumns.length > 0) {
+      selectedIdColumn = idColumns[0];
+    } else {
+      console.warn(`No valid node ID column found in table ${tableName}`);
+    }
+    const metadataArray = [];
+    for (const nodeData of metadataMap.values()) {
       const transformedNodeData = {};
       for (const [originalColumnName, value] of Object.entries(nodeData)) {
         const uniqueId = columnIdMap.get(originalColumnName);
@@ -3793,15 +5023,79 @@ class TreeData extends Subscribable {
           transformedNodeData[uniqueId] = value;
         }
       }
-      transformedMetadata.set(nodeName, transformedNodeData);
+      metadataArray.push(transformedNodeData);
     }
-    this.metadata.set(id2, transformedMetadata);
-    this.#attachTable(id2);
+    this.validIdColumns.set(tableId, idColumns);
+    this.nodeIdColumn.set(tableId, selectedIdColumn);
+    this.metadata.set(tableId, metadataArray);
+    this.#attachTable(tableId);
     this.notify("metadataAdded", {
-      tableId: id2,
-      columnIds: columnIdMap.values()
+      tableId,
+      columnIds: Array.from(columnIdMap.values())
+    });
+    return tableId;
+  }
+  /**
+   * Get valid ID columns for a table
+   * @param {string} tableId - ID of the table
+   * @returns {Array<string>} Array of column names that contain valid node IDs
+   */
+  getValidIdColumns(tableId) {
+    return this.validIdColumns.get(tableId) || [];
+  }
+  /**
+   * Get the current node ID column for a table
+   * @param {string} tableId - ID of the table
+   * @returns {string|null} Column name used as node ID, or null if none
+   */
+  getNodeIdColumn(tableId) {
+    return this.nodeIdColumn.get(tableId);
+  }
+  /**
+   * Get all column IDs for a table
+   * @param {string} tableId - ID of the table
+   * @returns {Array<string>} Array of column IDs in the table
+   */
+  getTableColumnIds(tableId) {
+    const table = this.metadata.get(tableId);
+    if (!table || table.length === 0) {
+      return [];
+    }
+    return Object.keys(table[0]);
+  }
+  /**
+   * Change the node ID column for a table
+   * @param {string} tableId - ID of the table
+   * @param {string} newIdColumnName - Name of the new ID column to use
+   */
+  setNodeIdColumn(tableId, newIdColumnName) {
+    const table = this.metadata.get(tableId);
+    if (!table) {
+      console.warn(`Table ${tableId} does not exist`);
+      return;
+    }
+    if (!this.validIdColumns.get(tableId).includes(newIdColumnName)) {
+      console.warn(`Column ${newIdColumnName} is not a valid ID column for table ${tableId}`);
+      return;
+    }
+    const oldIdColumn = this.nodeIdColumn.get(tableId);
+    if (oldIdColumn === newIdColumnName) {
+      return;
+    }
+    const columnIds = this.getTableColumnIds(tableId);
+    for (const columnId of columnIds) {
+      this.columnAesthetic.delete(columnId);
+    }
+    this.#detachTable(tableId);
+    this.nodeIdColumn.set(tableId, newIdColumnName);
+    this.#attachTable(tableId);
+    this.notify("metadataChanged", {
+      tableId,
+      oldIdColumn,
+      newIdColumn: newIdColumnName,
+      columnIds,
+      requiresAestheticRefresh: true
     });
-    return id2;
   }
   /**
    * Remove a metadata table
@@ -3813,7 +5107,7 @@ class TreeData extends Subscribable {
       console.warn(`Table ${tableId} does not exist`);
       return;
     }
-    const keys = Object.keys(table.values().next().value);
+    const keys = table.length > 0 ? Object.keys(table[0]) : [];
     for (const uniqueId of keys) {
       this.columnType.delete(uniqueId);
       this.columnName.delete(uniqueId);
@@ -3823,7 +5117,9 @@ class TreeData extends Subscribable {
     this.#detachTable(tableId);
     this.metadata.delete(tableId);
     this.metadataTableNames.delete(tableId);
-    this.notify("metadataRemoved", {
+    this.nodeIdColumn.delete(tableId);
+    this.validIdColumns.delete(tableId);
+    this.notify("metadataChanged", {
       tableId,
       columnIds: keys
     });
@@ -3893,11 +5189,11 @@ class TreeData extends Subscribable {
    * Add metadata to tree nodes
    */
   #attachTable(tableId) {
-    const table = this.metadata.get(tableId);
+    const metadataMap = this.#generateMetadataMap(tableId);
     this.tree.each((d) => {
       const nodeName = d.data.name;
-      if (nodeName && table.has(nodeName)) {
-        const tableMetadata = table.get(nodeName);
+      if (nodeName && metadataMap.has(nodeName)) {
+        const tableMetadata = metadataMap.get(nodeName);
         d.metadata = { ...d.metadata, ...tableMetadata };
       }
     });
@@ -3907,11 +5203,16 @@ class TreeData extends Subscribable {
    */
   #detachTable(tableId) {
     const table = this.metadata.get(tableId);
-    const keys = Object.keys(table.values().next().value);
+    if (!table || table.length === 0) {
+      return;
+    }
+    const keys = Object.keys(table[0]);
     this.tree.each((d) => {
-      keys.forEach((key) => {
-        delete d[key];
-      });
+      if (d.metadata) {
+        keys.forEach((key) => {
+          delete d.metadata[key];
+        });
+      }
     });
   }
 }
@@ -4208,6 +5509,7 @@ class TreeState extends Subscribable {
       title: "Tip label text",
       scaleType: "identity",
       default: "",
+      nullValue: "",
       downstream: ["updateTipLabelText", "updateCoordinates"],
       hasLegend: false
     },
@@ -4215,6 +5517,7 @@ class TreeState extends Subscribable {
       title: "Tip label color",
       scaleType: "color",
       default: "#000000",
+      nullValue: "#808080",
       otherCategory: "#555555",
       downstream: [],
       hasLegend: true
@@ -4223,6 +5526,7 @@ class TreeState extends Subscribable {
       title: "Tip label size",
       scaleType: "size",
       default: 1,
+      nullValue: 1,
       isCategorical: false,
       outputRange: [0.5, 2],
       downstream: ["updateCoordinates"],
@@ -4232,6 +5536,7 @@ class TreeState extends Subscribable {
       title: "Tip label font",
       scaleType: "identity",
       default: "sans-serif",
+      nullValue: "sans-serif",
       downstream: ["updateCoordinates"],
       hasLegend: false
     },
@@ -4240,6 +5545,7 @@ class TreeState extends Subscribable {
       scaleType: "text",
       outputValues: ["normal", "bold", "italic", "bold italic"],
       default: "normal",
+      nullValue: "normal",
       otherCategory: "italic",
       downstream: ["updateCoordinates"],
       hasLegend: false
@@ -4248,6 +5554,7 @@ class TreeState extends Subscribable {
       title: "Node label text",
       scaleType: "identity",
       default: "",
+      nullValue: "",
       downstream: ["updateNodeLabelText"],
       hasLegend: false
     },
@@ -4255,6 +5562,7 @@ class TreeState extends Subscribable {
       title: "Node label size",
       scaleType: "size",
       default: 1,
+      nullValue: 1,
       isCategorical: false,
       outputRange: [0.5, 2],
       downstream: ["updateCoordinates"],
@@ -4306,8 +5614,22 @@ class TreeState extends Subscribable {
     this.state.treeData.subscribe("treeUpdate", () => {
       this.#initalize();
     });
-    this.state.treeData.subscribe("metadataRemoved", (info) => {
-      this.setAesthetics(Object.fromEntries(info.columnIds.map((key) => [key, void 0])));
+    this.state.treeData.subscribe("metadataChanged", (info) => {
+      if (info.columnIds && Array.isArray(info.columnIds)) {
+        if (info.requiresAestheticRefresh) {
+          const aestheticsToRefresh = {};
+          for (const [aestheticId, columnId] of Object.entries(this.state.aesthetics)) {
+            if (columnId && info.columnIds.includes(columnId)) {
+              aestheticsToRefresh[aestheticId] = columnId;
+            }
+          }
+          if (Object.keys(aestheticsToRefresh).length > 0) {
+            this.setAesthetics(aestheticsToRefresh, true);
+          }
+        } else {
+          this.setAesthetics(Object.fromEntries(info.columnIds.map((key) => [key, void 0])));
+        }
+      }
     });
   }
   #initalize() {
@@ -4357,21 +5679,16 @@ class TreeState extends Subscribable {
       if (force || columnId !== this.state.aesthetics[aestheticId]) {
         this.state.aesthetics[aestheticId] = columnId;
         if (!columnId) {
-          this.aestheticsScales[aestheticId] = new NullScale(aesData.default);
+          this.aestheticsScales[aestheticId] = new NullScale({ default: aesData.default });
         } else {
           this.aestheticsScales[aestheticId] = this.state.treeData.getAesthetic(columnId, aestheticId, aesData);
+          this.aestheticsScales[aestheticId].subscribe("aestheticChange", () => {
+            this.#updateTreeDataForAesthetic(aestheticId, columnId);
+            this.#updateLegends();
+            this.notify(`${aestheticId}Change`);
+          });
         }
-        this.state.treeData.tree.each((d) => {
-          if (columnId && columnId !== null && columnId !== void 0) {
-            if (d.metadata && d.metadata[columnId] !== void 0) {
-              d[aestheticId] = this.aestheticsScales[aestheticId].getValue(d.metadata[columnId]);
-            } else {
-              d[aestheticId] = aesData.default;
-            }
-          } else {
-            d[aestheticId] = this.aestheticsScales[aestheticId].getValue();
-          }
-        });
+        this.#updateTreeDataForAesthetic(aestheticId, columnId);
         for (const methodName of aesData.downstream) {
           downstreams.add(methodName);
         }
@@ -4388,6 +5705,24 @@ class TreeState extends Subscribable {
       this[methodName]();
     }
   }
+  /**
+   * Update tree data for a specific aesthetic
+   * @private
+   */
+  #updateTreeDataForAesthetic(aestheticId, columnId) {
+    const aesData = this.#AESTHETICS[aestheticId];
+    this.state.treeData.tree.each((d) => {
+      if (columnId && columnId !== null && columnId !== void 0) {
+        if (d.metadata) {
+          d[aestheticId] = this.aestheticsScales[aestheticId].getValue(d.metadata[columnId]);
+        } else {
+          d[aestheticId] = aesData.default;
+        }
+      } else {
+        d[aestheticId] = this.aestheticsScales[aestheticId].getValue();
+      }
+    });
+  }
   #updateLegends() {
     this.legends = [];
     for (const [aestheticId, columnId] of Object.entries(this.state.aesthetics)) {
@@ -4727,6 +6062,10 @@ const ICONS = {
     "m 17,4 c 0,0 9,8 0,16",
     "M 17,8 V 4 h 4",
     "M 21,20 H 17 V 16"
+  ],
+  edit: [
+    "m 12,8 -8,8 -1,5 5,-1 8,-8 z",
+    "M 21,7 18,10 14,6 17,3 Z"
   ]
 };
 function appendIcon(svgSel, name, size, padding = 2) {
@@ -4899,8 +6238,8 @@ class TextSizeLegend extends LegendBase {
   updateCoordinates() {
     const minValue = this.state.aesthetic.scale.dataMin;
     const maxValue = this.state.aesthetic.scale.dataMax;
-    const minSize = this.state.aesthetic.scale.sizeMin;
-    const maxSize = this.state.aesthetic.scale.sizeMax;
+    const minSize = this.state.aesthetic.state.outputRange[0];
+    const maxSize = this.state.aesthetic.state.outputRange[1];
     const ticks = generateNiceTicks(minValue, maxValue, 5);
     const maxLetterFont = maxSize * this.state.treeState.labelSizeToPxFactor * 0.7;
     const minLetterFont = minSize * this.state.treeState.labelSizeToPxFactor * 0.7;
@@ -4939,8 +6278,8 @@ class TextSizeLegend extends LegendBase {
         text: this.state.aesthetic.state.inputUnits || ""
       }
     };
-    ticks.forEach((tickValue, i) => {
-      const x = leftOverhang + i / (ticks.length - 1) * baseWidth;
+    if (minValue === maxValue) {
+      const x = leftOverhang + baseWidth / 2;
       this.coordinates.ticks.push({
         x1: x,
         y1: rampBaseY,
@@ -4950,15 +6289,37 @@ class TextSizeLegend extends LegendBase {
       this.coordinates.labels.push({
         x,
         y: rampBaseY + this.tickHeight,
-        text: formatTickLabel(tickValue, ticks)
+        text: formatTickLabel(minValue, ticks)
       });
-    });
-    this.coordinates.polygon = [
-      { x: leftOverhang, y: rampBaseY },
-      { x: leftOverhang, y: rampBaseY - minLetterFont },
-      { x: leftOverhang + baseWidth, y: rampBaseY - maxLetterFont },
-      { x: leftOverhang + baseWidth, y: rampBaseY }
-    ];
+      const avgLetterFont = (minLetterFont + maxLetterFont) / 2;
+      this.coordinates.polygon = [
+        { x: leftOverhang, y: rampBaseY },
+        { x: leftOverhang, y: rampBaseY - avgLetterFont },
+        { x: leftOverhang + baseWidth, y: rampBaseY - avgLetterFont },
+        { x: leftOverhang + baseWidth, y: rampBaseY }
+      ];
+    } else {
+      ticks.forEach((tickValue, i) => {
+        const x = leftOverhang + i / (ticks.length - 1) * baseWidth;
+        this.coordinates.ticks.push({
+          x1: x,
+          y1: rampBaseY,
+          x2: x,
+          y2: rampBaseY + this.tickHeight
+        });
+        this.coordinates.labels.push({
+          x,
+          y: rampBaseY + this.tickHeight,
+          text: formatTickLabel(tickValue, ticks)
+        });
+      });
+      this.coordinates.polygon = [
+        { x: leftOverhang, y: rampBaseY },
+        { x: leftOverhang, y: rampBaseY - minLetterFont },
+        { x: leftOverhang + baseWidth, y: rampBaseY - maxLetterFont },
+        { x: leftOverhang + baseWidth, y: rampBaseY }
+      ];
+    }
   }
   /**
    * Render the legend in the specified SVG element
@@ -5035,7 +6396,7 @@ class TextColorLegend extends LegendBase {
     let currentX = 0;
     let currentY = titleHeightOffset + this.verticalSpacing + this.squareSize / 2;
     let rowHeight = this.squareSize;
-    categories.slice(0, aesthetic.scale.maxColors).forEach((category, i) => {
+    categories.slice(0, aesthetic.state.maxCategories).forEach((category, i) => {
       const color2 = aesthetic.scale.getValue(category);
       const labelSize = this.textSizeEstimator.getTextSize(category, this.state.labelFontSize);
       const itemWidth = this.squareSize + this.itemLabelGap + labelSize.widthPx;
@@ -5048,7 +6409,7 @@ class TextColorLegend extends LegendBase {
         x: currentX,
         y: currentY,
         color: color2,
-        label: i < aesthetic.scale.maxColors - 1 ? category : aesthetic.state.otherLabel,
+        label: i < aesthetic.state.maxCategories - 1 ? category : aesthetic.state.otherLabel,
         squareX: currentX,
         squareY: currentY - this.squareSize / 2,
         labelX: currentX + this.squareSize + this.itemLabelGap,
@@ -5105,8 +6466,8 @@ class TextColorLegend extends LegendBase {
         text: aesthetic.state.inputUnits || ""
       }
     };
-    ticks.forEach((tickValue, i) => {
-      const x = leftOverhang + i / (ticks.length - 1) * baseWidth;
+    if (minValue === maxValue) {
+      const x = leftOverhang + baseWidth / 2;
       this.coordinates.ticks.push({
         x1: x,
         y1: ticksY,
@@ -5116,9 +6477,24 @@ class TextColorLegend extends LegendBase {
       this.coordinates.labels.push({
         x,
         y: labelsY,
-        text: formatTickLabel(tickValue, ticks)
+        text: formatTickLabel(minValue, ticks)
       });
-    });
+    } else {
+      ticks.forEach((tickValue, i) => {
+        const x = leftOverhang + i / (ticks.length - 1) * baseWidth;
+        this.coordinates.ticks.push({
+          x1: x,
+          y1: ticksY,
+          x2: x,
+          y2: ticksY + this.tickHeight
+        });
+        this.coordinates.labels.push({
+          x,
+          y: labelsY,
+          text: formatTickLabel(tickValue, ticks)
+        });
+      });
+    }
   }
   /**
    * Render the legend in the specified SVG element
@@ -5154,11 +6530,17 @@ class TextColorLegend extends LegendBase {
     const gradientId = `color-gradient-${Math.random().toString(36).substr(2, 9)}`;
     const defs = this.group.append("defs");
     const gradient = defs.append("linearGradient").attr("id", gradientId).attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%");
-    for (let i = 0; i <= this.numGradientStops; i++) {
-      const t = i / this.numGradientStops;
-      const value = minValue + t * (maxValue - minValue);
-      const color2 = aesthetic.scale.getValue(value);
-      gradient.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", color2);
+    if (minValue === maxValue) {
+      const color2 = aesthetic.scale.getValue(minValue);
+      gradient.append("stop").attr("offset", "0%").attr("stop-color", color2);
+      gradient.append("stop").attr("offset", "100%").attr("stop-color", color2);
+    } else {
+      for (let i = 0; i <= this.numGradientStops; i++) {
+        const t = i / this.numGradientStops;
+        const value = minValue + t * (maxValue - minValue);
+        const color2 = aesthetic.scale.getValue(value);
+        gradient.append("stop").attr("offset", `${t * 100}%`).attr("stop-color", color2);
+      }
     }
     this.group.append("rect").attr("x", this.coordinates.gradient.x).attr("y", this.coordinates.gradient.y).attr("width", this.coordinates.gradient.width).attr("height", this.coordinates.gradient.height).style("fill", `url(#${gradientId})`).style("stroke", "#000").style("stroke-width", 1);
     this.coordinates.ticks.forEach((tick) => {
@@ -6264,10 +7646,75 @@ 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;
   let currentTab = null;
   let selectedMetadata = null;
+  let currentAestheticSettings = null;
   let expandSubtreesBtn = null;
   let expandRootBtn = null;
   let showHiddenBtn = null;
@@ -6295,6 +7742,8 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
   tabsContainer.className = "ht-tabs";
   const controlsContainer = document.createElement("div");
   controlsContainer.className = "ht-controls hidden";
+  const aestheticSettingsContainer = document.createElement("div");
+  aestheticSettingsContainer.className = "ht-aesthetic-settings hidden";
   const tabs = [
     { id: "data", label: "Data", requiresTree: false },
     { id: "controls", label: "Controls", requiresTree: true },
@@ -6311,6 +7760,7 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
       if (tabDiv.classList.contains("disabled")) {
         return;
       }
+      closeAestheticSettings();
       if (currentTab === tab.id) {
         closeTab();
       } else {
@@ -6320,6 +7770,14 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
     tabElements[tab.id] = tabDiv;
     tabsContainer.appendChild(tabDiv);
   });
+  controlsContainer.addEventListener("click", (e) => {
+    const editButton = e.target.closest(".ht-icon-button");
+    const aestheticGroup = e.target.closest(".ht-control-group.ht-aesthetic-editing");
+    if (editButton || aestheticGroup) {
+      return;
+    }
+    closeAestheticSettings();
+  });
   function updateTabStates() {
     const hasTree = getCurrentTreeState() !== null;
     tabs.forEach((tab) => {
@@ -6402,6 +7860,44 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
     }
     return "tree";
   }
+  function openAestheticSettings(aestheticId, aestheticGroup) {
+    if (currentAestheticSettings === aestheticId) {
+      closeAestheticSettings();
+      return;
+    }
+    closeAestheticSettings();
+    currentAestheticSettings = aestheticId;
+    aestheticGroup.classList.add("ht-aesthetic-editing");
+    aestheticSettingsContainer.classList.remove("hidden");
+    populateAestheticSettings(aestheticId);
+  }
+  function closeAestheticSettings() {
+    if (!currentAestheticSettings) return;
+    const existingEditors = aestheticSettingsContainer.querySelectorAll(".ht-color-palette-editor");
+    existingEditors.forEach((editor) => {
+      if (editor.cleanupFunction && typeof editor.cleanupFunction === "function") {
+        editor.cleanupFunction();
+      }
+    });
+    const allGroups = controlsContainer.querySelectorAll(".ht-control-group");
+    allGroups.forEach((group) => group.classList.remove("ht-aesthetic-editing"));
+    aestheticSettingsContainer.classList.add("hidden");
+    aestheticSettingsContainer.innerHTML = "";
+    currentAestheticSettings = null;
+  }
+  function populateAestheticSettings(aestheticId) {
+    aestheticSettingsContainer.innerHTML = "";
+    const treeState = getCurrentTreeState();
+    if (!treeState) return;
+    if (aestheticId === "tipLabelColor") {
+      populateTipLabelColorSettings(aestheticSettingsContainer, treeState, CONTROL_HEIGHT);
+      return;
+    }
+    const placeholder = document.createElement("div");
+    placeholder.textContent = `Settings for ${aestheticId} (coming soon)`;
+    placeholder.style.padding = "10px";
+    aestheticSettingsContainer.appendChild(placeholder);
+  }
   function openTab(tabId) {
     const tabDef = tabs.find((t) => t.id === tabId);
     if (tabDef && tabDef.requiresTree && !getCurrentTreeState()) {
@@ -6425,9 +7921,11 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
     });
     controlsContainer.classList.add("hidden");
     controlsContainer.innerHTML = "";
+    closeAestheticSettings();
   }
   function populateControls(tabId) {
     controlsContainer.innerHTML = "";
+    closeAestheticSettings();
     switch (tabId) {
       case "data":
         populateDataControls(
@@ -6474,7 +7972,16 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
         );
         break;
       case "tip-label-settings":
-        populateTipLabelSettingsControls(controlsContainer, getCurrentTreeState, options, CONTROL_HEIGHT);
+        populateTipLabelSettingsControls(
+          controlsContainer,
+          getCurrentTreeState,
+          options,
+          CONTROL_HEIGHT,
+          openAestheticSettings,
+          closeAestheticSettings,
+          populateAestheticSettings,
+          () => currentAestheticSettings
+        );
         break;
       case "export":
         populateExportControls(controlsContainer, getCurrentTreeState, getCurrentTreeView, getCurrentTreeName, options, CONTROL_HEIGHT);
@@ -6501,6 +8008,7 @@ function createToolbar(toolbarDiv, treeDataInstances, getCurrentTreeState, getCu
   }
   collapsiblePanel.appendChild(tabsContainer);
   collapsiblePanel.appendChild(controlsContainer);
+  collapsiblePanel.appendChild(aestheticSettingsContainer);
   toolbarDiv.appendChild(toggleContainer);
   toolbarDiv.appendChild(collapsiblePanel);
   updateTabStates();
@@ -6601,6 +8109,7 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
     });
     metadataSelect.addEventListener("change", (e) => {
       setSelectedMetadata(e.target.value);
+      refreshCurrentTab();
     });
   }
   metadataGroup.appendChild(metadataSelect);
@@ -6647,6 +8156,51 @@ function populateDataControls(container, treeDataInstances, getCurrentTreeState,
     metadataFileInput.click();
   });
   container.appendChild(addMetadataBtn);
+  if (selectedMetadata) {
+    const treeData = currentTreeState.state.treeData;
+    let selectedTableId = null;
+    for (const [tableId, tableName] of treeData.metadataTableNames.entries()) {
+      if (tableName === selectedMetadata) {
+        selectedTableId = tableId;
+        break;
+      }
+    }
+    if (selectedTableId) {
+      const validIdColumns = treeData.getValidIdColumns(selectedTableId);
+      const currentIdColumn = treeData.getNodeIdColumn(selectedTableId);
+      const nodeIdGroup = createControlGroup();
+      const nodeIdLabel = createLabel("Node/Tip ID Column:", controlHeight);
+      nodeIdGroup.appendChild(nodeIdLabel);
+      const nodeIdSelect = document.createElement("select");
+      nodeIdSelect.className = "ht-select";
+      nodeIdSelect.style.height = `${controlHeight}px`;
+      if (validIdColumns.length === 0) {
+        const option = document.createElement("option");
+        option.textContent = "No ID column found";
+        option.value = "";
+        nodeIdSelect.appendChild(option);
+        nodeIdSelect.disabled = true;
+      } else {
+        validIdColumns.forEach((columnName) => {
+          const option = document.createElement("option");
+          option.value = columnName;
+          option.textContent = treeData.columnDisplayName.get(columnName);
+          if (columnName === currentIdColumn) {
+            option.selected = true;
+          }
+          nodeIdSelect.appendChild(option);
+        });
+        nodeIdSelect.addEventListener("change", (e) => {
+          const newIdColumn = e.target.value;
+          treeData.setNodeIdColumn(selectedTableId, newIdColumn);
+          currentTreeState.updateCoordinates();
+          refreshCurrentTab();
+        });
+      }
+      nodeIdGroup.appendChild(nodeIdSelect);
+      container.appendChild(nodeIdGroup);
+    }
+  }
 }
 function populateControlsTab(container, getCurrentTreeState, getCurrentTreeView, options, controlHeight) {
   container.innerHTML = "";
@@ -6845,13 +8399,19 @@ function populateTreeManipulationControls(container, getCurrentTreeState, refres
   radialLayoutGroup.appendChild(radialLayoutToggle);
   container.appendChild(radialLayoutGroup);
 }
-function populateTipLabelSettingsControls(container, getCurrentTreeState, options, controlHeight) {
+function populateTipLabelSettingsControls(container, getCurrentTreeState, options, controlHeight, openAestheticSettings, closeAestheticSettings, populateAestheticSettings, getCurrentAestheticSettings) {
   container.innerHTML = "";
   const treeState = getCurrentTreeState();
   if (!treeState) {
     container.textContent = "No tree selected";
     return;
   }
+  const editIconSvg = `
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M11.5 1.5L14.5 4.5L5 14H2V11L11.5 1.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M10 3L13 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `;
   const tipLabelTextGroup = createControlGroup();
   const tipLabelTextLabel = createLabel("Text:", controlHeight);
   tipLabelTextGroup.appendChild(tipLabelTextLabel);
@@ -6861,20 +8421,30 @@ function populateTipLabelSettingsControls(container, getCurrentTreeState, option
     "Default",
     controlHeight,
     true,
-    null
+    null,
+    getCurrentAestheticSettings,
+    populateAestheticSettings
   );
   tipLabelTextGroup.appendChild(tipLabelTextSelect);
   container.appendChild(tipLabelTextGroup);
   const tipLabelColorGroup = createControlGroup();
   const tipLabelColorLabel = createLabel("Color:", controlHeight);
   tipLabelColorGroup.appendChild(tipLabelColorLabel);
+  const tipLabelColorEditBtn = createIconButton(editIconSvg, "Edit color settings", controlHeight);
+  tipLabelColorEditBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    openAestheticSettings("tipLabelColor", tipLabelColorGroup);
+  });
+  tipLabelColorGroup.appendChild(tipLabelColorEditBtn);
   const tipLabelColorSelect = createMetadataColumnSelect(
     treeState,
     "tipLabelColor",
     "Default",
     controlHeight,
     false,
-    null
+    null,
+    getCurrentAestheticSettings,
+    populateAestheticSettings
   );
   tipLabelColorGroup.appendChild(tipLabelColorSelect);
   container.appendChild(tipLabelColorGroup);
@@ -6887,7 +8457,9 @@ function populateTipLabelSettingsControls(container, getCurrentTreeState, option
     "Default",
     controlHeight,
     false,
-    true
+    true,
+    getCurrentAestheticSettings,
+    populateAestheticSettings
   );
   tipLabelSizeGroup.appendChild(tipLabelSizeSelect);
   container.appendChild(tipLabelSizeGroup);
@@ -6900,7 +8472,9 @@ function populateTipLabelSettingsControls(container, getCurrentTreeState, option
     "Default",
     controlHeight,
     false,
-    false
+    false,
+    getCurrentAestheticSettings,
+    populateAestheticSettings
   );
   tipLabelStyleGroup.appendChild(tipLabelStyleSelect);
   container.appendChild(tipLabelStyleGroup);
@@ -6932,7 +8506,102 @@ function populateTipLabelSettingsControls(container, getCurrentTreeState, option
   tipLabelFontGroup.appendChild(tipLabelFontSelect);
   container.appendChild(tipLabelFontGroup);
 }
-function createMetadataColumnSelect(treeState, aesthetic, defaultLabel, controlHeight, includeNone = false, continuous = null) {
+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";
   select2.style.height = `${controlHeight}px`;
@@ -6986,6 +8655,12 @@ function createMetadataColumnSelect(treeState, aesthetic, defaultLabel, controlH
     const aestheticUpdate = {};
     aestheticUpdate[aesthetic] = columnId;
     treeState.setAesthetics(aestheticUpdate);
+    if (getCurrentAestheticSettings && populateAestheticSettings) {
+      const currentAestheticSettings = getCurrentAestheticSettings();
+      if (currentAestheticSettings === aesthetic) {
+        populateAestheticSettings(aesthetic);
+      }
+    }
   });
   return select2;
 }
@@ -7137,61 +8812,6 @@ function populateExportControls(container, getCurrentTreeState, getCurrentTreeVi
   marginGroup.appendChild(marginInput);
   container.appendChild(marginGroup);
 }
-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 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 heatTree(containerSelector, treesInput = [], options = {}) {
   if (treesInput && !Array.isArray(treesInput)) {
     treesInput = [treesInput];