@vitessce/all 3.1.1 → 3.1.3

package/dist/{index-6e5fe875.js → index-61ee101c.js}

@@ -5,7 +5,7 @@ var __publicField = (obj, key2, value2) => {
   return value2;
 };
 import * as React from "react";
-import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useReducer, Suspense } from "react";
+import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useId, useReducer, Suspense } from "react";
 import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, logConfig, VitS } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
@@ -794,9 +794,9 @@ var reactJsxRuntime_development = {};
         }
         if (isArray3(node)) {
           for (var i2 = 0; i2 < node.length; i2++) {
-            var child2 = node[i2];
-            if (isValidElement2(child2)) {
-              validateExplicitKey(child2, parentType);
+            var child = node[i2];
+            if (isValidElement2(child)) {
+              validateExplicitKey(child, parentType);
             }
           }
         } else if (isValidElement2(node)) {
@@ -4626,6 +4626,363 @@ var z = /* @__PURE__ */ Object.freeze({
   quotelessJson,
   ZodError
 });
+function commonjsRequire(path2) {
+  throw new Error('Could not dynamically require "' + path2 + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
+}
+var pluralize$1 = { exports: {} };
+(function(module2, exports2) {
+  (function(root2, pluralize2) {
+    if (typeof commonjsRequire === "function" && true && true) {
+      module2.exports = pluralize2();
+    } else {
+      root2.pluralize = pluralize2();
+    }
+  })(commonjsGlobal$1, function() {
+    var pluralRules = [];
+    var singularRules = [];
+    var uncountables = {};
+    var irregularPlurals = {};
+    var irregularSingles = {};
+    function sanitizeRule(rule2) {
+      if (typeof rule2 === "string") {
+        return new RegExp("^" + rule2 + "$", "i");
+      }
+      return rule2;
+    }
+    function restoreCase(word, token) {
+      if (word === token)
+        return token;
+      if (word === word.toLowerCase())
+        return token.toLowerCase();
+      if (word === word.toUpperCase())
+        return token.toUpperCase();
+      if (word[0] === word[0].toUpperCase()) {
+        return token.charAt(0).toUpperCase() + token.substr(1).toLowerCase();
+      }
+      return token.toLowerCase();
+    }
+    function interpolate2(str, args) {
+      return str.replace(/\$(\d{1,2})/g, function(match2, index2) {
+        return args[index2] || "";
+      });
+    }
+    function replace2(word, rule2) {
+      return word.replace(rule2[0], function(match2, index2) {
+        var result = interpolate2(rule2[1], arguments);
+        if (match2 === "") {
+          return restoreCase(word[index2 - 1], result);
+        }
+        return restoreCase(match2, result);
+      });
+    }
+    function sanitizeWord(token, word, rules) {
+      if (!token.length || uncountables.hasOwnProperty(token)) {
+        return word;
+      }
+      var len2 = rules.length;
+      while (len2--) {
+        var rule2 = rules[len2];
+        if (rule2[0].test(word))
+          return replace2(word, rule2);
+      }
+      return word;
+    }
+    function replaceWord(replaceMap, keepMap, rules) {
+      return function(word) {
+        var token = word.toLowerCase();
+        if (keepMap.hasOwnProperty(token)) {
+          return restoreCase(word, token);
+        }
+        if (replaceMap.hasOwnProperty(token)) {
+          return restoreCase(word, replaceMap[token]);
+        }
+        return sanitizeWord(token, word, rules);
+      };
+    }
+    function checkWord(replaceMap, keepMap, rules, bool) {
+      return function(word) {
+        var token = word.toLowerCase();
+        if (keepMap.hasOwnProperty(token))
+          return true;
+        if (replaceMap.hasOwnProperty(token))
+          return false;
+        return sanitizeWord(token, token, rules) === token;
+      };
+    }
+    function pluralize2(word, count2, inclusive) {
+      var pluralized = count2 === 1 ? pluralize2.singular(word) : pluralize2.plural(word);
+      return (inclusive ? count2 + " " : "") + pluralized;
+    }
+    pluralize2.plural = replaceWord(
+      irregularSingles,
+      irregularPlurals,
+      pluralRules
+    );
+    pluralize2.isPlural = checkWord(
+      irregularSingles,
+      irregularPlurals,
+      pluralRules
+    );
+    pluralize2.singular = replaceWord(
+      irregularPlurals,
+      irregularSingles,
+      singularRules
+    );
+    pluralize2.isSingular = checkWord(
+      irregularPlurals,
+      irregularSingles,
+      singularRules
+    );
+    pluralize2.addPluralRule = function(rule2, replacement) {
+      pluralRules.push([sanitizeRule(rule2), replacement]);
+    };
+    pluralize2.addSingularRule = function(rule2, replacement) {
+      singularRules.push([sanitizeRule(rule2), replacement]);
+    };
+    pluralize2.addUncountableRule = function(word) {
+      if (typeof word === "string") {
+        uncountables[word.toLowerCase()] = true;
+        return;
+      }
+      pluralize2.addPluralRule(word, "$0");
+      pluralize2.addSingularRule(word, "$0");
+    };
+    pluralize2.addIrregularRule = function(single, plural) {
+      plural = plural.toLowerCase();
+      single = single.toLowerCase();
+      irregularSingles[single] = plural;
+      irregularPlurals[plural] = single;
+    };
+    [
+      // Pronouns.
+      ["I", "we"],
+      ["me", "us"],
+      ["he", "they"],
+      ["she", "they"],
+      ["them", "them"],
+      ["myself", "ourselves"],
+      ["yourself", "yourselves"],
+      ["itself", "themselves"],
+      ["herself", "themselves"],
+      ["himself", "themselves"],
+      ["themself", "themselves"],
+      ["is", "are"],
+      ["was", "were"],
+      ["has", "have"],
+      ["this", "these"],
+      ["that", "those"],
+      // Words ending in with a consonant and `o`.
+      ["echo", "echoes"],
+      ["dingo", "dingoes"],
+      ["volcano", "volcanoes"],
+      ["tornado", "tornadoes"],
+      ["torpedo", "torpedoes"],
+      // Ends with `us`.
+      ["genus", "genera"],
+      ["viscus", "viscera"],
+      // Ends with `ma`.
+      ["stigma", "stigmata"],
+      ["stoma", "stomata"],
+      ["dogma", "dogmata"],
+      ["lemma", "lemmata"],
+      ["schema", "schemata"],
+      ["anathema", "anathemata"],
+      // Other irregular rules.
+      ["ox", "oxen"],
+      ["axe", "axes"],
+      ["die", "dice"],
+      ["yes", "yeses"],
+      ["foot", "feet"],
+      ["eave", "eaves"],
+      ["goose", "geese"],
+      ["tooth", "teeth"],
+      ["quiz", "quizzes"],
+      ["human", "humans"],
+      ["proof", "proofs"],
+      ["carve", "carves"],
+      ["valve", "valves"],
+      ["looey", "looies"],
+      ["thief", "thieves"],
+      ["groove", "grooves"],
+      ["pickaxe", "pickaxes"],
+      ["passerby", "passersby"]
+    ].forEach(function(rule2) {
+      return pluralize2.addIrregularRule(rule2[0], rule2[1]);
+    });
+    [
+      [/s?$/i, "s"],
+      [/[^\u0000-\u007F]$/i, "$0"],
+      [/([^aeiou]ese)$/i, "$1"],
+      [/(ax|test)is$/i, "$1es"],
+      [/(alias|[^aou]us|t[lm]as|gas|ris)$/i, "$1es"],
+      [/(e[mn]u)s?$/i, "$1s"],
+      [/([^l]ias|[aeiou]las|[ejzr]as|[iu]am)$/i, "$1"],
+      [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1i"],
+      [/(alumn|alg|vertebr)(?:a|ae)$/i, "$1ae"],
+      [/(seraph|cherub)(?:im)?$/i, "$1im"],
+      [/(her|at|gr)o$/i, "$1oes"],
+      [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|automat|quor)(?:a|um)$/i, "$1a"],
+      [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)(?:a|on)$/i, "$1a"],
+      [/sis$/i, "ses"],
+      [/(?:(kni|wi|li)fe|(ar|l|ea|eo|oa|hoo)f)$/i, "$1$2ves"],
+      [/([^aeiouy]|qu)y$/i, "$1ies"],
+      [/([^ch][ieo][ln])ey$/i, "$1ies"],
+      [/(x|ch|ss|sh|zz)$/i, "$1es"],
+      [/(matr|cod|mur|sil|vert|ind|append)(?:ix|ex)$/i, "$1ices"],
+      [/\b((?:tit)?m|l)(?:ice|ouse)$/i, "$1ice"],
+      [/(pe)(?:rson|ople)$/i, "$1ople"],
+      [/(child)(?:ren)?$/i, "$1ren"],
+      [/eaux$/i, "$0"],
+      [/m[ae]n$/i, "men"],
+      ["thou", "you"]
+    ].forEach(function(rule2) {
+      return pluralize2.addPluralRule(rule2[0], rule2[1]);
+    });
+    [
+      [/s$/i, ""],
+      [/(ss)$/i, "$1"],
+      [/(wi|kni|(?:after|half|high|low|mid|non|night|[^\w]|^)li)ves$/i, "$1fe"],
+      [/(ar|(?:wo|[ae])l|[eo][ao])ves$/i, "$1f"],
+      [/ies$/i, "y"],
+      [/\b([pl]|zomb|(?:neck|cross)?t|coll|faer|food|gen|goon|group|lass|talk|goal|cut)ies$/i, "$1ie"],
+      [/\b(mon|smil)ies$/i, "$1ey"],
+      [/\b((?:tit)?m|l)ice$/i, "$1ouse"],
+      [/(seraph|cherub)im$/i, "$1"],
+      [/(x|ch|ss|sh|zz|tto|go|cho|alias|[^aou]us|t[lm]as|gas|(?:her|at|gr)o|[aeiou]ris)(?:es)?$/i, "$1"],
+      [/(analy|diagno|parenthe|progno|synop|the|empha|cri|ne)(?:sis|ses)$/i, "$1sis"],
+      [/(movie|twelve|abuse|e[mn]u)s$/i, "$1"],
+      [/(test)(?:is|es)$/i, "$1is"],
+      [/(alumn|syllab|vir|radi|nucle|fung|cact|stimul|termin|bacill|foc|uter|loc|strat)(?:us|i)$/i, "$1us"],
+      [/(agend|addend|millenni|dat|extrem|bacteri|desiderat|strat|candelabr|errat|ov|symposi|curricul|quor)a$/i, "$1um"],
+      [/(apheli|hyperbat|periheli|asyndet|noumen|phenomen|criteri|organ|prolegomen|hedr|automat)a$/i, "$1on"],
+      [/(alumn|alg|vertebr)ae$/i, "$1a"],
+      [/(cod|mur|sil|vert|ind)ices$/i, "$1ex"],
+      [/(matr|append)ices$/i, "$1ix"],
+      [/(pe)(rson|ople)$/i, "$1rson"],
+      [/(child)ren$/i, "$1"],
+      [/(eau)x?$/i, "$1"],
+      [/men$/i, "man"]
+    ].forEach(function(rule2) {
+      return pluralize2.addSingularRule(rule2[0], rule2[1]);
+    });
+    [
+      // Singular words with no plurals.
+      "adulthood",
+      "advice",
+      "agenda",
+      "aid",
+      "aircraft",
+      "alcohol",
+      "ammo",
+      "analytics",
+      "anime",
+      "athletics",
+      "audio",
+      "bison",
+      "blood",
+      "bream",
+      "buffalo",
+      "butter",
+      "carp",
+      "cash",
+      "chassis",
+      "chess",
+      "clothing",
+      "cod",
+      "commerce",
+      "cooperation",
+      "corps",
+      "debris",
+      "diabetes",
+      "digestion",
+      "elk",
+      "energy",
+      "equipment",
+      "excretion",
+      "expertise",
+      "firmware",
+      "flounder",
+      "fun",
+      "gallows",
+      "garbage",
+      "graffiti",
+      "hardware",
+      "headquarters",
+      "health",
+      "herpes",
+      "highjinks",
+      "homework",
+      "housework",
+      "information",
+      "jeans",
+      "justice",
+      "kudos",
+      "labour",
+      "literature",
+      "machinery",
+      "mackerel",
+      "mail",
+      "media",
+      "mews",
+      "moose",
+      "music",
+      "mud",
+      "manga",
+      "news",
+      "only",
+      "personnel",
+      "pike",
+      "plankton",
+      "pliers",
+      "police",
+      "pollution",
+      "premises",
+      "rain",
+      "research",
+      "rice",
+      "salmon",
+      "scissors",
+      "series",
+      "sewage",
+      "shambles",
+      "shrimp",
+      "software",
+      "species",
+      "staff",
+      "swine",
+      "tennis",
+      "traffic",
+      "transportation",
+      "trout",
+      "tuna",
+      "wealth",
+      "welfare",
+      "whiting",
+      "wildebeest",
+      "wildlife",
+      "you",
+      /pok[eé]mon$/i,
+      // Regexes.
+      /[^aeiou]ese$/i,
+      // "chinese", "japanese"
+      /deer$/i,
+      // "deer", "reindeer"
+      /fish$/i,
+      // "fish", "blowfish", "angelfish"
+      /measles$/i,
+      /o[iu]s$/i,
+      // "carnivorous"
+      /pox$/i,
+      // "chickpox", "smallpox"
+      /sheep$/i
+    ].forEach(pluralize2.addUncountableRule);
+    return pluralize2;
+  });
+})(pluralize$1);
+var pluralizeExports = pluralize$1.exports;
+const plur = /* @__PURE__ */ getDefaultExportFromCjs$1(pluralizeExports);
+plur.addPluralRule("glomerulus", "glomeruli");
+plur.addPluralRule("interstitium", "interstitia");
 function fromEntries(iterable) {
   return [...iterable].reduce((obj, { 0: key2, 1: val }) => Object.assign(obj, { [key2]: val }), {});
 }
@@ -4636,6 +4993,9 @@ function commaNumber(n3) {
 function capitalize$2(word) {
   return word ? word.charAt(0).toUpperCase() + word.slice(1) : "";
 }
+function pluralize(word, count2 = null) {
+  return plur(word, count2);
+}
 function getLongestString(strings2) {
   return strings2.reduce((prevLongest, currentValue) => prevLongest.length > currentValue.length ? prevLongest : currentValue);
 }
@@ -8024,12 +8384,12 @@ function findCandidate(tree2, a2, b2, c2, d, maxDist, segTree) {
   var node = tree2.data;
   while (node) {
     for (var i2 = 0; i2 < node.children.length; i2++) {
-      var child2 = node.children[i2];
-      var dist2 = node.leaf ? sqSegDist(child2, b2, c2) : sqSegBoxDist(b2, c2, child2);
+      var child = node.children[i2];
+      var dist2 = node.leaf ? sqSegDist(child, b2, c2) : sqSegBoxDist(b2, c2, child);
       if (dist2 > maxDist)
         continue;
       queue.push({
-        node: child2,
+        node: child,
         dist: dist2
       });
     }
@@ -9318,7 +9678,7 @@ function nodeFindNodeByNamePath(node, path2, currLevelIndex) {
       return node;
     }
     if (node.children) {
-      const foundNodes = node.children.map((child2) => nodeFindNodeByNamePath(child2, path2, currLevelIndex + 1)).filter(Boolean);
+      const foundNodes = node.children.map((child) => nodeFindNodeByNamePath(child, path2, currLevelIndex + 1)).filter(Boolean);
       if (foundNodes.length === 1) {
         return foundNodes[0];
       }
@@ -9347,7 +9707,7 @@ function nodeTransform$1(node, predicate, transform3, transformedPaths, currPath
   if (node.children) {
     return {
       ...node,
-      children: node.children.map((child2) => nodeTransform$1(child2, predicate, transform3, transformedPaths, newPath.concat([child2.name])))
+      children: node.children.map((child) => nodeTransform$1(child, predicate, transform3, transformedPaths, newPath.concat([child.name])))
     };
   }
   return node;
@@ -9367,7 +9727,7 @@ function nodeTransformAll(node, predicate, transform3, transformedPaths, currPat
   if (node.children) {
     return {
       ...newNode,
-      children: newNode.children.map((child2) => nodeTransformAll(child2, predicate, transform3, transformedPaths, newPath.concat([child2.name])))
+      children: newNode.children.map((child) => nodeTransformAll(child, predicate, transform3, transformedPaths, newPath.concat([child.name])))
     };
   }
   return newNode;
@@ -9688,10 +10048,10 @@ function treeToMembershipMap(currTree) {
 }
 function getPaths(node, currentPath = [], paths = []) {
   if (node.children) {
-    node.children.forEach((child2) => {
-      const newPath = [...currentPath, child2.name];
+    node.children.forEach((child) => {
+      const newPath = [...currentPath, child.name];
       paths.push(newPath);
-      getPaths(child2, newPath, paths);
+      getPaths(child, newPath, paths);
     });
   }
   return paths;
@@ -9927,10 +10287,10 @@ var json2csv_umd = { exports: {} };
       this._maxListeners = n3;
       return this;
     };
-    function $getMaxListeners(that2) {
-      if (that2._maxListeners === void 0)
+    function $getMaxListeners(that) {
+      if (that._maxListeners === void 0)
         return EventEmitter2.defaultMaxListeners;
-      return that2._maxListeners;
+      return that._maxListeners;
     }
     EventEmitter2.prototype.getMaxListeners = function getMaxListeners2() {
       return $getMaxListeners(this);
@@ -10434,20 +10794,20 @@ var json2csv_umd = { exports: {} };
     function kMaxLength() {
       return Buffer3.TYPED_ARRAY_SUPPORT ? 2147483647 : 1073741823;
     }
-    function createBuffer(that2, length2) {
+    function createBuffer(that, length2) {
       if (kMaxLength() < length2) {
         throw new RangeError("Invalid typed array length");
       }
       if (Buffer3.TYPED_ARRAY_SUPPORT) {
-        that2 = new Uint8Array(length2);
-        that2.__proto__ = Buffer3.prototype;
+        that = new Uint8Array(length2);
+        that.__proto__ = Buffer3.prototype;
       } else {
-        if (that2 === null) {
-          that2 = new Buffer3(length2);
+        if (that === null) {
+          that = new Buffer3(length2);
         }
-        that2.length = length2;
+        that.length = length2;
       }
-      return that2;
+      return that;
     }
     function Buffer3(arg, encodingOrOffset, length2) {
       if (!Buffer3.TYPED_ARRAY_SUPPORT && !(this instanceof Buffer3)) {
@@ -10468,17 +10828,17 @@ var json2csv_umd = { exports: {} };
       arr.__proto__ = Buffer3.prototype;
       return arr;
     };
-    function from(that2, value2, encodingOrOffset, length2) {
+    function from(that, value2, encodingOrOffset, length2) {
       if (typeof value2 === "number") {
         throw new TypeError('"value" argument must not be a number');
       }
       if (typeof ArrayBuffer !== "undefined" && value2 instanceof ArrayBuffer) {
-        return fromArrayBuffer(that2, value2, encodingOrOffset, length2);
+        return fromArrayBuffer(that, value2, encodingOrOffset, length2);
       }
       if (typeof value2 === "string") {
-        return fromString2(that2, value2, encodingOrOffset);
+        return fromString2(that, value2, encodingOrOffset);
       }
-      return fromObject(that2, value2);
+      return fromObject(that, value2);
     }
     Buffer3.from = function(value2, encodingOrOffset, length2) {
       return from(null, value2, encodingOrOffset, length2);
@@ -10494,28 +10854,28 @@ var json2csv_umd = { exports: {} };
         throw new RangeError('"size" argument must not be negative');
       }
     }
-    function alloc(that2, size2, fill2, encoding) {
+    function alloc(that, size2, fill2, encoding) {
       assertSize(size2);
       if (size2 <= 0) {
-        return createBuffer(that2, size2);
+        return createBuffer(that, size2);
       }
       if (fill2 !== void 0) {
-        return typeof encoding === "string" ? createBuffer(that2, size2).fill(fill2, encoding) : createBuffer(that2, size2).fill(fill2);
+        return typeof encoding === "string" ? createBuffer(that, size2).fill(fill2, encoding) : createBuffer(that, size2).fill(fill2);
       }
-      return createBuffer(that2, size2);
+      return createBuffer(that, size2);
     }
     Buffer3.alloc = function(size2, fill2, encoding) {
       return alloc(null, size2, fill2, encoding);
     };
-    function allocUnsafe2(that2, size2) {
+    function allocUnsafe2(that, size2) {
       assertSize(size2);
-      that2 = createBuffer(that2, size2 < 0 ? 0 : checked(size2) | 0);
+      that = createBuffer(that, size2 < 0 ? 0 : checked(size2) | 0);
       if (!Buffer3.TYPED_ARRAY_SUPPORT) {
         for (var i2 = 0; i2 < size2; ++i2) {
-          that2[i2] = 0;
+          that[i2] = 0;
         }
       }
-      return that2;
+      return that;
     }
     Buffer3.allocUnsafe = function(size2) {
       return allocUnsafe2(null, size2);
@@ -10523,7 +10883,7 @@ var json2csv_umd = { exports: {} };
     Buffer3.allocUnsafeSlow = function(size2) {
       return allocUnsafe2(null, size2);
     };
-    function fromString2(that2, string2, encoding) {
+    function fromString2(that, string2, encoding) {
       if (typeof encoding !== "string" || encoding === "") {
         encoding = "utf8";
       }
@@ -10531,22 +10891,22 @@ var json2csv_umd = { exports: {} };
         throw new TypeError('"encoding" must be a valid string encoding');
       }
       var length2 = byteLength(string2, encoding) | 0;
-      that2 = createBuffer(that2, length2);
-      var actual = that2.write(string2, encoding);
+      that = createBuffer(that, length2);
+      var actual = that.write(string2, encoding);
       if (actual !== length2) {
-        that2 = that2.slice(0, actual);
+        that = that.slice(0, actual);
       }
-      return that2;
+      return that;
     }
-    function fromArrayLike(that2, array2) {
+    function fromArrayLike(that, array2) {
       var length2 = array2.length < 0 ? 0 : checked(array2.length) | 0;
-      that2 = createBuffer(that2, length2);
+      that = createBuffer(that, length2);
       for (var i2 = 0; i2 < length2; i2 += 1) {
-        that2[i2] = array2[i2] & 255;
+        that[i2] = array2[i2] & 255;
       }
-      return that2;
+      return that;
     }
-    function fromArrayBuffer(that2, array2, byteOffset, length2) {
+    function fromArrayBuffer(that, array2, byteOffset, length2) {
       array2.byteLength;
       if (byteOffset < 0 || array2.byteLength < byteOffset) {
         throw new RangeError("'offset' is out of bounds");
@@ -10562,32 +10922,32 @@ var json2csv_umd = { exports: {} };
         array2 = new Uint8Array(array2, byteOffset, length2);
       }
       if (Buffer3.TYPED_ARRAY_SUPPORT) {
-        that2 = array2;
-        that2.__proto__ = Buffer3.prototype;
+        that = array2;
+        that.__proto__ = Buffer3.prototype;
       } else {
-        that2 = fromArrayLike(that2, array2);
+        that = fromArrayLike(that, array2);
       }
-      return that2;
+      return that;
     }
-    function fromObject(that2, obj) {
+    function fromObject(that, obj) {
       if (internalIsBuffer(obj)) {
         var len2 = checked(obj.length) | 0;
-        that2 = createBuffer(that2, len2);
-        if (that2.length === 0) {
-          return that2;
+        that = createBuffer(that, len2);
+        if (that.length === 0) {
+          return that;
         }
-        obj.copy(that2, 0, 0, len2);
-        return that2;
+        obj.copy(that, 0, 0, len2);
+        return that;
       }
       if (obj) {
         if (typeof ArrayBuffer !== "undefined" && obj.buffer instanceof ArrayBuffer || "length" in obj) {
           if (typeof obj.length !== "number" || isnan(obj.length)) {
-            return createBuffer(that2, 0);
+            return createBuffer(that, 0);
           }
-          return fromArrayLike(that2, obj);
+          return fromArrayLike(that, obj);
         }
         if (obj.type === "Buffer" && isArray3(obj.data)) {
-          return fromArrayLike(that2, obj.data);
+          return fromArrayLike(that, obj.data);
         }
       }
       throw new TypeError("First argument must be a string, Buffer, ArrayBuffer, Array, or array-like object.");
@@ -15655,7 +16015,7 @@ function rgbSpline$1(spline) {
     return (t4) => [r3(t4), g2(t4), b2(t4)];
   };
 }
-function basis$3(values3) {
+function basis$2(values3) {
   function innerBasis(t12, v0, v12, v2, v32) {
     const t22 = t12 * t12;
     const t32 = t22 * t12;
@@ -15671,7 +16031,7 @@ function basis$3(values3) {
     return innerBasis((t4 - i2 / n3) * n3, v0, v12, v2, v32);
   };
 }
-const interpolateRgbBasis = rgbSpline$1(basis$3);
+const interpolateRgbBasis = rgbSpline$1(basis$2);
 function interpolateSequentialMulti(range2) {
   const n3 = range2.length;
   return (t4) => range2[Math.max(0, Math.min(n3 - 1, Math.floor(t4 * n3)))];
@@ -15783,7 +16143,7 @@ function nodeTransform(node, predicate, transform3, transformedPaths, currPath =
   if ("children" in node) {
     return {
       ...node,
-      children: node.children.map((child2) => nodeTransform(child2, predicate, transform3, transformedPaths, newPath.concat([child2.name])))
+      children: node.children.map((child) => nodeTransform(child, predicate, transform3, transformedPaths, newPath.concat([child.name])))
     };
   }
   return node;
@@ -18740,6 +19100,11 @@ const CoordinationType$1 = {
   FEATURE_VALUE_TRANSFORM_COEFFICIENT: "featureValueTransformCoefficient",
   TOOLTIPS_VISIBLE: "tooltipsVisible"
 };
+const STATUS$1 = {
+  LOADING: "loading",
+  SUCCESS: "success",
+  ERROR: "error"
+};
 const COMPONENT_COORDINATION_TYPES = {
   [ViewType$1.SCATTERPLOT]: [
     CoordinationType$1.DATASET,
@@ -21505,15 +21870,15 @@ function createTheme() {
       var depth = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 1;
       var key2;
       for (key2 in node) {
-        var child2 = node[key2];
+        var child = node[key2];
         if (depth === 1) {
-          if (key2.indexOf("Mui") === 0 && child2) {
-            traverse2(child2, key2, depth + 1);
+          if (key2.indexOf("Mui") === 0 && child) {
+            traverse2(child, key2, depth + 1);
           }
-        } else if (pseudoClasses2.indexOf(key2) !== -1 && Object.keys(child2).length > 0) {
+        } else if (pseudoClasses2.indexOf(key2) !== -1 && Object.keys(child).length > 0) {
           {
             console.error(["Material-UI: The `".concat(parentKey, "` component increases ") + "the CSS specificity of the `".concat(key2, "` internal state."), "You can not override it like this: ", JSON.stringify(node, null, 2), "", "Instead, you need to use the $ruleName syntax:", JSON.stringify({
-              root: _defineProperty$m({}, "&$".concat(key2), child2)
+              root: _defineProperty$m({}, "&$".concat(key2), child)
             }, null, 2), "", "https://mui.com/r/pseudo-classes-guide"].join("\n"));
           }
           node[key2] = {};
@@ -22834,11 +23199,11 @@ var DomRenderer = /* @__PURE__ */ function() {
     if (sheet)
       sheets.add(sheet);
     this.sheet = sheet;
-    var _ref3 = this.sheet ? this.sheet.options : {}, media2 = _ref3.media, meta2 = _ref3.meta, element2 = _ref3.element;
+    var _ref3 = this.sheet ? this.sheet.options : {}, media = _ref3.media, meta2 = _ref3.meta, element2 = _ref3.element;
     this.element = element2 || createStyle();
     this.element.setAttribute("data-jss", "");
-    if (media2)
-      this.element.setAttribute("media", media2);
+    if (media)
+      this.element.setAttribute("media", media);
     if (meta2)
       this.element.setAttribute("data-meta", meta2);
     var nonce = getNonce();
@@ -24897,9 +25262,9 @@ function debounce$4(func) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    var that2 = this;
+    var that = this;
     var later = function later2() {
-      func.apply(that2, args);
+      func.apply(that, args);
     };
     clearTimeout(timeout3);
     timeout3 = setTimeout(later, wait2);
@@ -25557,15 +25922,15 @@ function _assertThisInitialized$v(self2) {
   return self2;
 }
 function getChildMapping(children2, mapFn) {
-  var mapper = function mapper2(child2) {
-    return mapFn && isValidElement(child2) ? mapFn(child2) : child2;
+  var mapper = function mapper2(child) {
+    return mapFn && isValidElement(child) ? mapFn(child) : child;
   };
   var result = /* @__PURE__ */ Object.create(null);
   if (children2)
     Children.map(children2, function(c2) {
       return c2;
-    }).forEach(function(child2) {
-      result[child2.key] = mapper(child2);
+    }).forEach(function(child) {
+      result[child.key] = mapper(child);
     });
   return result;
 }
@@ -25603,17 +25968,17 @@ function mergeChildMappings(prev, next3) {
   }
   return childMapping;
 }
-function getProp(child2, prop, props2) {
-  return props2[prop] != null ? props2[prop] : child2.props[prop];
+function getProp(child, prop, props2) {
+  return props2[prop] != null ? props2[prop] : child.props[prop];
 }
 function getInitialChildMapping(props2, onExited) {
-  return getChildMapping(props2.children, function(child2) {
-    return cloneElement(child2, {
-      onExited: onExited.bind(null, child2),
+  return getChildMapping(props2.children, function(child) {
+    return cloneElement(child, {
+      onExited: onExited.bind(null, child),
       in: true,
-      appear: getProp(child2, "appear", props2),
-      enter: getProp(child2, "enter", props2),
-      exit: getProp(child2, "exit", props2)
+      appear: getProp(child, "appear", props2),
+      enter: getProp(child, "enter", props2),
+      exit: getProp(child, "exit", props2)
     });
   });
 }
@@ -25621,30 +25986,30 @@ function getNextChildMapping(nextProps, prevChildMapping, onExited) {
   var nextChildMapping = getChildMapping(nextProps.children);
   var children2 = mergeChildMappings(prevChildMapping, nextChildMapping);
   Object.keys(children2).forEach(function(key2) {
-    var child2 = children2[key2];
-    if (!isValidElement(child2))
+    var child = children2[key2];
+    if (!isValidElement(child))
       return;
     var hasPrev = key2 in prevChildMapping;
     var hasNext = key2 in nextChildMapping;
     var prevChild = prevChildMapping[key2];
     var isLeaving = isValidElement(prevChild) && !prevChild.props.in;
     if (hasNext && (!hasPrev || isLeaving)) {
-      children2[key2] = cloneElement(child2, {
-        onExited: onExited.bind(null, child2),
+      children2[key2] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
         in: true,
-        exit: getProp(child2, "exit", nextProps),
-        enter: getProp(child2, "enter", nextProps)
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
       });
     } else if (!hasNext && hasPrev && !isLeaving) {
-      children2[key2] = cloneElement(child2, {
+      children2[key2] = cloneElement(child, {
         in: false
       });
     } else if (hasNext && hasPrev && isValidElement(prevChild)) {
-      children2[key2] = cloneElement(child2, {
-        onExited: onExited.bind(null, child2),
+      children2[key2] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
         in: prevChild.props.in,
-        exit: getProp(child2, "exit", nextProps),
-        enter: getProp(child2, "enter", nextProps)
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
       });
     }
   });
@@ -25657,8 +26022,8 @@ var values$4 = Object.values || function(obj) {
 };
 var defaultProps$N = {
   component: "div",
-  childFactory: function childFactory(child2) {
-    return child2;
+  childFactory: function childFactory(child) {
+    return child;
   }
 };
 var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
@@ -25695,17 +26060,17 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
       firstRender: false
     };
   };
-  _proto.handleExited = function handleExited(child2, node) {
+  _proto.handleExited = function handleExited(child, node) {
     var currentChildMapping = getChildMapping(this.props.children);
-    if (child2.key in currentChildMapping)
+    if (child.key in currentChildMapping)
       return;
-    if (child2.props.onExited) {
-      child2.props.onExited(node);
+    if (child.props.onExited) {
+      child.props.onExited(node);
     }
     if (this.mounted) {
       this.setState(function(state) {
         var children2 = _extends$6({}, state.children);
-        delete children2[child2.key];
+        delete children2[child.key];
         return {
           children: children2
         };
@@ -27101,8 +27466,8 @@ IconButton$1.propTypes = {
    * The icon element.
    */
   children: chainPropTypes(_pt.node, function(props2) {
-    var found = React.Children.toArray(props2.children).some(function(child2) {
-      return /* @__PURE__ */ React.isValidElement(child2) && child2.props.onClick;
+    var found = React.Children.toArray(props2.children).some(function(child) {
+      return /* @__PURE__ */ React.isValidElement(child) && child.props.onClick;
     });
     if (found) {
       return new Error(["Material-UI: You are providing an onClick event listener to a child of a button element.", "Firefox will never trigger the event.", "You should move the onClick listener to the parent button element.", "https://github.com/mui-org/material-ui/issues/13957"].join("\n"));
@@ -29907,11 +30272,11 @@ var FormControl = /* @__PURE__ */ React.forwardRef(function FormControl2(props2,
   var _React$useState = React.useState(function() {
     var initialAdornedStart = false;
     if (children2) {
-      React.Children.forEach(children2, function(child2) {
-        if (!isMuiElement(child2, ["Input", "Select"])) {
+      React.Children.forEach(children2, function(child) {
+        if (!isMuiElement(child, ["Input", "Select"])) {
           return;
         }
-        var input = isMuiElement(child2, ["Select"]) ? child2.props.input : child2;
+        var input = isMuiElement(child, ["Select"]) ? child.props.input : child;
         if (input && isAdornedStart(input.props)) {
           initialAdornedStart = true;
         }
@@ -29922,11 +30287,11 @@ var FormControl = /* @__PURE__ */ React.forwardRef(function FormControl2(props2,
   var _React$useState2 = React.useState(function() {
     var initialFilled = false;
     if (children2) {
-      React.Children.forEach(children2, function(child2) {
-        if (!isMuiElement(child2, ["Input", "Select"])) {
+      React.Children.forEach(children2, function(child) {
+        if (!isMuiElement(child, ["Input", "Select"])) {
           return;
         }
-        if (isFilled(child2.props, true)) {
+        if (isFilled(child.props, true)) {
           initialFilled = true;
         }
       });
@@ -31395,8 +31760,8 @@ ListItem.propTypes = {
     var children2 = React.Children.toArray(props2.children);
     var secondaryActionIndex = -1;
     for (var i2 = children2.length - 1; i2 >= 0; i2 -= 1) {
-      var child2 = children2[i2];
-      if (isMuiElement(child2, ["ListItemSecondaryAction"])) {
+      var child = children2[i2];
+      if (isMuiElement(child, ["ListItemSecondaryAction"])) {
         secondaryActionIndex = i2;
         break;
       }
@@ -31484,8 +31849,8 @@ function getTransformOriginValue(transformOrigin) {
     return typeof n3 === "number" ? "".concat(n3, "px") : n3;
   }).join(" ");
 }
-function getScrollParent$1(parent, child2) {
-  var element2 = child2;
+function getScrollParent$1(parent, child) {
+  var element2 = child;
   var scrollTop = 0;
   while (element2 && element2 !== parent) {
     element2 = element2.parentElement;
@@ -32000,35 +32365,35 @@ var MenuList = /* @__PURE__ */ React.forwardRef(function MenuList2(props2, ref2)
   }, []);
   var handleRef = useForkRef(handleOwnRef, ref2);
   var activeItemIndex = -1;
-  React.Children.forEach(children2, function(child2, index2) {
-    if (!/* @__PURE__ */ React.isValidElement(child2)) {
+  React.Children.forEach(children2, function(child, index2) {
+    if (!/* @__PURE__ */ React.isValidElement(child)) {
       return;
     }
     {
-      if (reactIsExports.isFragment(child2)) {
+      if (reactIsExports.isFragment(child)) {
         console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
       }
     }
-    if (!child2.props.disabled) {
-      if (variant === "selectedMenu" && child2.props.selected) {
+    if (!child.props.disabled) {
+      if (variant === "selectedMenu" && child.props.selected) {
         activeItemIndex = index2;
       } else if (activeItemIndex === -1) {
         activeItemIndex = index2;
       }
     }
   });
-  var items = React.Children.map(children2, function(child2, index2) {
+  var items = React.Children.map(children2, function(child, index2) {
     if (index2 === activeItemIndex) {
       var newChildProps = {};
       if (autoFocusItem) {
         newChildProps.autoFocus = true;
       }
-      if (child2.props.tabIndex === void 0 && variant === "selectedMenu") {
+      if (child.props.tabIndex === void 0 && variant === "selectedMenu") {
         newChildProps.tabIndex = 0;
       }
-      return /* @__PURE__ */ React.cloneElement(child2, newChildProps);
+      return /* @__PURE__ */ React.cloneElement(child, newChildProps);
     }
-    return child2;
+    return child;
   });
   return /* @__PURE__ */ React.createElement(List$1, _extends$6({
     role: "menu",
@@ -32134,33 +32499,33 @@ var Menu = /* @__PURE__ */ React.forwardRef(function Menu2(props2, ref2) {
     }
   };
   var activeItemIndex = -1;
-  React.Children.map(children2, function(child2, index2) {
-    if (!/* @__PURE__ */ React.isValidElement(child2)) {
+  React.Children.map(children2, function(child, index2) {
+    if (!/* @__PURE__ */ React.isValidElement(child)) {
       return;
     }
     {
-      if (reactIsExports.isFragment(child2)) {
+      if (reactIsExports.isFragment(child)) {
         console.error(["Material-UI: The Menu component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
       }
     }
-    if (!child2.props.disabled) {
-      if (variant !== "menu" && child2.props.selected) {
+    if (!child.props.disabled) {
+      if (variant !== "menu" && child.props.selected) {
         activeItemIndex = index2;
       } else if (activeItemIndex === -1) {
         activeItemIndex = index2;
       }
     }
   });
-  var items = React.Children.map(children2, function(child2, index2) {
+  var items = React.Children.map(children2, function(child, index2) {
     if (index2 === activeItemIndex) {
-      return /* @__PURE__ */ React.cloneElement(child2, {
+      return /* @__PURE__ */ React.cloneElement(child, {
         ref: function ref3(instance) {
           contentAnchorRef.current = ReactDOM.findDOMNode(instance);
-          setRef(child2.ref, instance);
+          setRef(child.ref, instance);
         }
       });
     }
-    return child2;
+    return child;
   });
   return /* @__PURE__ */ React.createElement(Popover$2, _extends$6({
     getContentAnchorEl,
@@ -34811,7 +35176,7 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
   var handleRef = useForkRef(ref2, inputRefProp);
   React.useImperativeHandle(handleRef, function() {
     return {
-      focus: function focus2() {
+      focus: function focus() {
         displayNode.focus();
       },
       node: inputRef.current,
@@ -34866,19 +35231,19 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
   };
   var childrenArray = React.Children.toArray(children2);
   var handleChange = function handleChange2(event2) {
-    var index2 = childrenArray.map(function(child3) {
-      return child3.props.value;
+    var index2 = childrenArray.map(function(child2) {
+      return child2.props.value;
     }).indexOf(event2.target.value);
     if (index2 === -1) {
       return;
     }
-    var child2 = childrenArray[index2];
-    setValue(child2.props.value);
+    var child = childrenArray[index2];
+    setValue(child.props.value);
     if (onChange) {
-      onChange(event2, child2);
+      onChange(event2, child);
     }
   };
-  var handleItemClick = function handleItemClick2(child2) {
+  var handleItemClick = function handleItemClick2(child) {
     return function(event2) {
       if (!multiple) {
         update2(false, event2);
@@ -34886,17 +35251,17 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
       var newValue;
       if (multiple) {
         newValue = Array.isArray(value2) ? value2.slice() : [];
-        var itemIndex = value2.indexOf(child2.props.value);
+        var itemIndex = value2.indexOf(child.props.value);
         if (itemIndex === -1) {
-          newValue.push(child2.props.value);
+          newValue.push(child.props.value);
         } else {
           newValue.splice(itemIndex, 1);
         }
       } else {
-        newValue = child2.props.value;
+        newValue = child.props.value;
       }
-      if (child2.props.onClick) {
-        child2.props.onClick(event2);
+      if (child.props.onClick) {
+        child.props.onClick(event2);
       }
       if (value2 === newValue) {
         return;
@@ -34911,7 +35276,7 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
             name: name2
           }
         });
-        onChange(event2, child2);
+        onChange(event2, child);
       }
     };
   };
@@ -34960,12 +35325,12 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
       computeDisplay = true;
     }
   }
-  var items = childrenArray.map(function(child2) {
-    if (!/* @__PURE__ */ React.isValidElement(child2)) {
+  var items = childrenArray.map(function(child) {
+    if (!/* @__PURE__ */ React.isValidElement(child)) {
       return null;
     }
     {
-      if (reactIsExports.isFragment(child2)) {
+      if (reactIsExports.isFragment(child)) {
         console.error(["Material-UI: The Select component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
       }
     }
@@ -34975,44 +35340,44 @@ var SelectInput = /* @__PURE__ */ React.forwardRef(function SelectInput2(props2,
         throw new Error("Material-UI: The `value` prop must be an array when using the `Select` component with `multiple`.");
       }
       selected = value2.some(function(v) {
-        return areEqualValues(v, child2.props.value);
+        return areEqualValues(v, child.props.value);
       });
       if (selected && computeDisplay) {
-        displayMultiple.push(child2.props.children);
+        displayMultiple.push(child.props.children);
       }
     } else {
-      selected = areEqualValues(value2, child2.props.value);
+      selected = areEqualValues(value2, child.props.value);
       if (selected && computeDisplay) {
-        displaySingle = child2.props.children;
+        displaySingle = child.props.children;
       }
     }
     if (selected) {
       foundMatch = true;
     }
-    return /* @__PURE__ */ React.cloneElement(child2, {
+    return /* @__PURE__ */ React.cloneElement(child, {
       "aria-selected": selected ? "true" : void 0,
-      onClick: handleItemClick(child2),
+      onClick: handleItemClick(child),
       onKeyUp: function onKeyUp(event2) {
         if (event2.key === " ") {
           event2.preventDefault();
         }
-        if (child2.props.onKeyUp) {
-          child2.props.onKeyUp(event2);
+        if (child.props.onKeyUp) {
+          child.props.onKeyUp(event2);
         }
       },
       role: "option",
       selected,
       value: void 0,
       // The value is most likely not a valid HTML attribute.
-      "data-value": child2.props.value
+      "data-value": child.props.value
       // Instead, we provide it as a data attribute.
     });
   });
   {
     React.useEffect(function() {
       if (!foundMatch && !multiple && value2 !== "") {
-        var values3 = childrenArray.map(function(child2) {
-          return child2.props.value;
+        var values3 = childrenArray.map(function(child) {
+          return child.props.value;
         });
         console.warn(["Material-UI: You have provided an out-of-range value `".concat(value2, "` for the select ").concat(name2 ? '(name="'.concat(name2, '") ') : "", "component."), "Consider providing a value that matches one of the available options or ''.", "The available values are ".concat(values3.filter(function(x2) {
           return x2 != null;
@@ -37301,20 +37666,20 @@ var Tabs = /* @__PURE__ */ React.forwardRef(function Tabs2(props2, ref2) {
     style: _extends$6({}, indicatorStyle, TabIndicatorProps.style)
   }));
   var childIndex = 0;
-  var children2 = React.Children.map(childrenProp, function(child2) {
-    if (!/* @__PURE__ */ React.isValidElement(child2)) {
+  var children2 = React.Children.map(childrenProp, function(child) {
+    if (!/* @__PURE__ */ React.isValidElement(child)) {
       return null;
     }
     {
-      if (reactIsExports.isFragment(child2)) {
+      if (reactIsExports.isFragment(child)) {
         console.error(["Material-UI: The Tabs component doesn't accept a Fragment as a child.", "Consider providing an array instead."].join("\n"));
       }
     }
-    var childValue = child2.props.value === void 0 ? childIndex : child2.props.value;
+    var childValue = child.props.value === void 0 ? childIndex : child.props.value;
     valueToIndex.set(childValue, childIndex);
     var selected = childValue === value2;
     childIndex += 1;
-    return /* @__PURE__ */ React.cloneElement(child2, {
+    return /* @__PURE__ */ React.cloneElement(child, {
       fullWidth: variant === "fullWidth",
       indicator: selected && !mounted && indicator,
       selected,
@@ -37815,26 +38180,26 @@ var _aFunction = function(it) {
   return it;
 };
 var aFunction = _aFunction;
-var _ctx = function(fn, that2, length2) {
+var _ctx = function(fn, that, length2) {
   aFunction(fn);
-  if (that2 === void 0)
+  if (that === void 0)
     return fn;
   switch (length2) {
     case 1:
       return function(a2) {
-        return fn.call(that2, a2);
+        return fn.call(that, a2);
       };
     case 2:
       return function(a2, b2) {
-        return fn.call(that2, a2, b2);
+        return fn.call(that, a2, b2);
       };
     case 3:
       return function(a2, b2, c2) {
-        return fn.call(that2, a2, b2, c2);
+        return fn.call(that, a2, b2, c2);
       };
   }
   return function() {
-    return fn.apply(that2, arguments);
+    return fn.apply(that, arguments);
   };
 };
 var _objectDp = {};
@@ -38264,8 +38629,8 @@ var _typeof$y = {};
 var toInteger = _toInteger;
 var defined$6 = _defined;
 var _stringAt = function(TO_STRING) {
-  return function(that2, pos) {
-    var s2 = String(defined$6(that2));
+  return function(that, pos) {
+    var s2 = String(defined$6(that));
     var i2 = toInteger(pos);
     var l2 = s2.length;
     var a2, b2;
@@ -39078,16 +39443,16 @@ var warning_1 = warning;
 const warning$1 = /* @__PURE__ */ getDefaultExportFromCjs$1(warning_1);
 function toArray(children2) {
   var ret = [];
-  React__default.Children.forEach(children2, function(child2) {
-    if (child2 === void 0 || child2 === null) {
+  React__default.Children.forEach(children2, function(child) {
+    if (child === void 0 || child === null) {
       return;
     }
-    if (Array.isArray(child2)) {
-      ret = ret.concat(toArray(child2));
-    } else if (reactIsExports$1.isFragment(child2) && child2.props) {
-      ret = ret.concat(toArray(child2.props.children));
+    if (Array.isArray(child)) {
+      ret = ret.concat(toArray(child));
+    } else if (reactIsExports$1.isFragment(child) && child.props) {
+      ret = ret.concat(toArray(child.props.children));
     } else {
-      ret.push(child2);
+      ret.push(child);
     }
   });
   return ret;
@@ -40240,8 +40605,8 @@ function conductCheck(keyList, isCheck, keyEntities) {
       return;
     var everyChildChecked = true;
     var someChildChecked = false;
-    (children2 || []).filter(function(child2) {
-      return !isCheckDisabled(child2.node);
+    (children2 || []).filter(function(child) {
+      return !isCheckDisabled(child.node);
     }).forEach(function(_ref6) {
       var childKey = _ref6.key;
       var childChecked = checkedKeys[childKey];
@@ -40271,8 +40636,8 @@ function conductCheck(keyList, isCheck, keyEntities) {
     if (isCheckDisabled(node))
       return;
     checkedKeys[key2] = isCheck;
-    (children2 || []).forEach(function(child2) {
-      conductDown(child2.key);
+    (children2 || []).forEach(function(child) {
+      conductDown(child.key);
     });
   }
   function conduct(key2) {
@@ -40285,10 +40650,10 @@ function conductCheck(keyList, isCheck, keyEntities) {
     checkedKeys[key2] = isCheck;
     if (isCheckDisabled(node))
       return;
-    (children2 || []).filter(function(child2) {
-      return !isCheckDisabled(child2.node);
-    }).forEach(function(child2) {
-      conductDown(child2.key);
+    (children2 || []).filter(function(child) {
+      return !isCheckDisabled(child.node);
+    }).forEach(function(child) {
+      conductDown(child.key);
     });
     if (parent) {
       conductUp(parent.key);
@@ -40659,16 +41024,16 @@ var Tree$2 = function(_React$Component) {
       var _this$state$checkedKe = _this.state.checkedKeys, checkedKeys = _this$state$checkedKe === void 0 ? [] : _this$state$checkedKe;
       return checkedKeys.indexOf(key2) !== -1;
     };
-    _this.renderTreeNode = function(child2, index2) {
+    _this.renderTreeNode = function(child, index2) {
       var level = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : 0;
       var _this$state3 = _this.state, keyEntities = _this$state3.keyEntities, _this$state3$expanded = _this$state3.expandedKeys, expandedKeys = _this$state3$expanded === void 0 ? [] : _this$state3$expanded, _this$state3$selected = _this$state3.selectedKeys, selectedKeys = _this$state3$selected === void 0 ? [] : _this$state3$selected, _this$state3$halfChec = _this$state3.halfCheckedKeys, halfCheckedKeys = _this$state3$halfChec === void 0 ? [] : _this$state3$halfChec, _this$state3$loadedKe = _this$state3.loadedKeys, loadedKeys = _this$state3$loadedKe === void 0 ? [] : _this$state3$loadedKe, _this$state3$loadingK = _this$state3.loadingKeys, loadingKeys = _this$state3$loadingK === void 0 ? [] : _this$state3$loadingK, dragOverNodeKey = _this$state3.dragOverNodeKey, dropPosition = _this$state3.dropPosition;
       var pos = getPosition$3(level, index2);
-      var key2 = child2.key || pos;
+      var key2 = child.key || pos;
       if (!keyEntities[key2]) {
         warnOnlyTreeNode();
         return null;
       }
-      return React__default.cloneElement(child2, {
+      return React__default.cloneElement(child, {
         key: key2,
         eventKey: key2,
         expanded: expandedKeys.indexOf(key2) !== -1,
@@ -44100,7 +44465,7 @@ var ResizeObserver = (
     return (_a2 = observers.get(this))[method2].apply(_a2, arguments);
   };
 });
-var index$4 = function() {
+var index$3 = function() {
   if (typeof global$1.ResizeObserver !== "undefined") {
     return global$1.ResizeObserver;
   }
@@ -44145,7 +44510,7 @@ function monitorResize(element2, callback) {
     prevWidth = fixedWidth;
     prevHeight = fixedHeight;
   }
-  var resizeObserver = new index$4(onResize);
+  var resizeObserver = new index$3(onResize);
   if (element2) {
     resizeObserver.observe(element2);
   }
@@ -45415,7 +45780,7 @@ function generateTrigger(PortalComponent) {
       value: function render2() {
         var popupVisible = this.state.popupVisible;
         var _this$props11 = this.props, children2 = _this$props11.children, forceRender = _this$props11.forceRender, alignPoint2 = _this$props11.alignPoint, className = _this$props11.className, autoDestroy = _this$props11.autoDestroy;
-        var child2 = React.Children.only(children2);
+        var child = React.Children.only(children2);
         var newChildProps = {
           key: "trigger"
         };
@@ -45453,15 +45818,15 @@ function generateTrigger(PortalComponent) {
           newChildProps.onFocus = this.createTwoChains("onFocus");
           newChildProps.onBlur = this.createTwoChains("onBlur");
         }
-        var childrenClassName = classNames(child2 && child2.props && child2.props.className, className);
+        var childrenClassName = classNames(child && child.props && child.props.className, className);
         if (childrenClassName) {
           newChildProps.className = childrenClassName;
         }
         var cloneProps = _objectSpread2$1({}, newChildProps);
-        if (supportRef(child2)) {
-          cloneProps.ref = composeRef(this.triggerRef, child2.ref);
+        if (supportRef(child)) {
+          cloneProps.ref = composeRef(this.triggerRef, child.ref);
         }
-        var trigger = /* @__PURE__ */ React.cloneElement(child2, cloneProps);
+        var trigger = /* @__PURE__ */ React.cloneElement(child, cloneProps);
         var portal;
         if (popupVisible || this.popupRef.current || forceRender) {
           portal = /* @__PURE__ */ React.createElement(PortalComponent, {
@@ -50522,7 +50887,7 @@ const Swatch = ({
   onHover,
   title: title2 = color2,
   children: children2,
-  focus: focus2,
+  focus,
   focusStyle = {}
 }) => {
   const transparent = color2 === "transparent";
@@ -50536,7 +50901,7 @@ const Swatch = ({
         position: "relative",
         outline: "none",
         ...style2,
-        ...focus2 ? focusStyle : {}
+        ...focus ? focusStyle : {}
       }
     }
   });
@@ -51661,332 +52026,6 @@ function sum$5(values3, valueof) {
   }
   return sum2;
 }
-var irregularPlurals$1 = { exports: {} };
-const addendum = "addenda";
-const aircraft = "aircraft";
-const alga = "algae";
-const alumna = "alumnae";
-const alumnus = "alumni";
-const amoeba = "amoebae";
-const analysis = "analyses";
-const antenna = "antennae";
-const antithesis = "antitheses";
-const apex = "apices";
-const appendix = "appendices";
-const automaton = "automata";
-const axis$1 = "axes";
-const bacillus = "bacilli";
-const bacterium = "bacteria";
-const barracks = "barracks";
-const basis$2 = "bases";
-const beau = "beaux";
-const bison = "bison";
-const buffalo = "buffalo";
-const bureau = "bureaus";
-const cactus = "cacti";
-const calf = "calves";
-const carp = "carp";
-const census = "censuses";
-const chassis = "chassis";
-const cherub = "cherubim";
-const child = "children";
-const cod = "cod";
-const codex = "codices";
-const concerto = "concerti";
-const corpus = "corpora";
-const crisis = "crises";
-const criterion = "criteria";
-const curriculum = "curricula";
-const datum$2 = "data";
-const deer = "deer";
-const diagnosis = "diagnoses";
-const die = "dice";
-const dwarf = "dwarfs";
-const echo = "echoes";
-const elf = "elves";
-const elk = "elk";
-const ellipsis = "ellipses";
-const embargo = "embargoes";
-const emphasis = "emphases";
-const erratum = "errata";
-const fez = "fezes";
-const firmware = "firmware";
-const fish = "fish";
-const focus = "foci";
-const foot = "feet";
-const formula = "formulae";
-const fungus = "fungi";
-const gallows = "gallows";
-const genus = "genera";
-const goose = "geese";
-const graffito = "graffiti";
-const grouse = "grouse";
-const half = "halves";
-const hero = "heroes";
-const hoof = "hooves";
-const hovercraft = "hovercraft";
-const hypothesis = "hypotheses";
-const index$3 = "indices";
-const kakapo = "kakapo";
-const knife = "knives";
-const larva = "larvae";
-const leaf = "leaves";
-const libretto = "libretti";
-const life = "lives";
-const loaf = "loaves";
-const locus = "loci";
-const louse = "lice";
-const man = "men";
-const matrix$1 = "matrices";
-const means = "means";
-const medium = "media";
-const media = "media";
-const memorandum = "memoranda";
-const millennium = "millennia";
-const minutia = "minutiae";
-const moose = "moose";
-const mouse = "mice";
-const nebula$1 = "nebulae";
-const nemesis = "nemeses";
-const neurosis = "neuroses";
-const news = "news";
-const nucleus = "nuclei";
-const oasis = "oases";
-const offspring = "offspring";
-const opus = "opera";
-const ovum = "ova";
-const ox = "oxen";
-const paralysis = "paralyses";
-const parenthesis = "parentheses";
-const person = "people";
-const phenomenon = "phenomena";
-const phylum = "phyla";
-const pike = "pike";
-const polyhedron = "polyhedra";
-const potato = "potatoes";
-const prognosis = "prognoses";
-const quiz = "quizzes";
-const radius$1 = "radii";
-const referendum = "referenda";
-const salmon = "salmon";
-const scarf = "scarves";
-const self$1 = "selves";
-const series = "series";
-const sheep = "sheep";
-const shelf = "shelves";
-const shrimp = "shrimp";
-const soliloquy = "soliloquies";
-const spacecraft = "spacecraft";
-const species = "species";
-const spectrum = "spectra";
-const squid = "squid";
-const stimulus = "stimuli";
-const stratum = "strata";
-const swine = "swine";
-const syllabus = "syllabi";
-const symposium = "symposia";
-const synopsis = "synopses";
-const synthesis = "syntheses";
-const tableau = "tableaus";
-const that = "those";
-const thesis = "theses";
-const thief = "thieves";
-const tomato = "tomatoes";
-const tooth = "teeth";
-const trout = "trout";
-const tuna = "tuna";
-const vertebra = "vertebrae";
-const vertex = "vertices";
-const veto = "vetoes";
-const vita = "vitae";
-const vortex = "vortices";
-const watercraft = "watercraft";
-const wharf = "wharves";
-const wife = "wives";
-const wolf = "wolves";
-const woman = "women";
-const require$$0$7 = {
-  addendum,
-  aircraft,
-  alga,
-  alumna,
-  alumnus,
-  amoeba,
-  analysis,
-  antenna,
-  antithesis,
-  apex,
-  appendix,
-  automaton,
-  axis: axis$1,
-  bacillus,
-  bacterium,
-  barracks,
-  basis: basis$2,
-  beau,
-  bison,
-  buffalo,
-  bureau,
-  cactus,
-  calf,
-  carp,
-  census,
-  chassis,
-  cherub,
-  child,
-  "château": "châteaus",
-  cod,
-  codex,
-  concerto,
-  corpus,
-  crisis,
-  criterion,
-  curriculum,
-  datum: datum$2,
-  deer,
-  diagnosis,
-  die,
-  dwarf,
-  echo,
-  elf,
-  elk,
-  ellipsis,
-  embargo,
-  emphasis,
-  erratum,
-  "faux pas": "faux pas",
-  fez,
-  firmware,
-  fish,
-  focus,
-  foot,
-  formula,
-  fungus,
-  gallows,
-  genus,
-  goose,
-  graffito,
-  grouse,
-  half,
-  hero,
-  hoof,
-  hovercraft,
-  hypothesis,
-  index: index$3,
-  kakapo,
-  knife,
-  larva,
-  leaf,
-  libretto,
-  life,
-  loaf,
-  locus,
-  louse,
-  man,
-  matrix: matrix$1,
-  means,
-  medium,
-  media,
-  memorandum,
-  millennium,
-  minutia,
-  moose,
-  mouse,
-  nebula: nebula$1,
-  nemesis,
-  neurosis,
-  news,
-  nucleus,
-  oasis,
-  offspring,
-  opus,
-  ovum,
-  ox,
-  paralysis,
-  parenthesis,
-  person,
-  phenomenon,
-  phylum,
-  pike,
-  polyhedron,
-  potato,
-  prognosis,
-  quiz,
-  radius: radius$1,
-  referendum,
-  salmon,
-  scarf,
-  self: self$1,
-  series,
-  sheep,
-  shelf,
-  shrimp,
-  soliloquy,
-  spacecraft,
-  species,
-  spectrum,
-  squid,
-  stimulus,
-  stratum,
-  swine,
-  syllabus,
-  symposium,
-  synopsis,
-  synthesis,
-  tableau,
-  that,
-  thesis,
-  thief,
-  "this": "these",
-  tomato,
-  tooth,
-  trout,
-  tuna,
-  vertebra,
-  vertex,
-  veto,
-  vita,
-  vortex,
-  watercraft,
-  wharf,
-  wife,
-  wolf,
-  woman
-};
-irregularPlurals$1.exports;
-(function(module2) {
-  const irregularPlurals2 = require$$0$7;
-  Object.defineProperty(module2, "exports", {
-    get() {
-      return new Map(Object.entries(irregularPlurals2));
-    }
-  });
-})(irregularPlurals$1);
-var irregularPluralsExports = irregularPlurals$1.exports;
-const irregularPlurals = /* @__PURE__ */ getDefaultExportFromCjs$1(irregularPluralsExports);
-function plur(word, plural, count2) {
-  if (typeof plural === "number") {
-    count2 = plural;
-  }
-  if (irregularPlurals.has(word.toLowerCase())) {
-    plural = irregularPlurals.get(word.toLowerCase());
-    const firstLetter = word.charAt(0);
-    const isFirstLetterUpperCase = firstLetter === firstLetter.toUpperCase();
-    if (isFirstLetterUpperCase) {
-      plural = firstLetter + plural.slice(1);
-    }
-    const isWholeWordUpperCase = word === word.toUpperCase();
-    if (isWholeWordUpperCase) {
-      plural = plural.toUpperCase();
-    }
-  } else if (typeof plural !== "string") {
-    plural = (word.replace(/(?:s|x|z|ch|sh)$/i, "$&e").replace(/([^aeiou])y$/i, "$1ie") + "s").replace(/i?e?s$/i, (match2) => {
-      const isTailLowerCase = word.slice(-1) === word.slice(-1).toLowerCase();
-      return isTailLowerCase ? match2.toLowerCase() : match2.toUpperCase();
-    });
-  }
-  return Math.abs(count2) === 1 ? word : plural;
-}
 function tree_add$1(d) {
   var x2 = +this._x.call(null, d), y2 = +this._y.call(null, d);
   return add$c(this.cover(x2, y2), x2, y2, d);
@@ -51994,9 +52033,9 @@ function tree_add$1(d) {
 function add$c(tree2, x2, y2, d) {
   if (isNaN(x2) || isNaN(y2))
     return tree2;
-  var parent, node = tree2._root, leaf2 = { data: d }, x02 = tree2._x0, y02 = tree2._y0, x12 = tree2._x1, y12 = tree2._y1, xm, ym, xp, yp, right2, bottom2, i2, j;
+  var parent, node = tree2._root, leaf = { data: d }, x02 = tree2._x0, y02 = tree2._y0, x12 = tree2._x1, y12 = tree2._y1, xm, ym, xp, yp, right2, bottom2, i2, j;
   if (!node)
-    return tree2._root = leaf2, tree2;
+    return tree2._root = leaf, tree2;
   while (node.length) {
     if (right2 = x2 >= (xm = (x02 + x12) / 2))
       x02 = xm;
@@ -52007,12 +52046,12 @@ function add$c(tree2, x2, y2, d) {
     else
       y12 = ym;
     if (parent = node, !(node = node[i2 = bottom2 << 1 | right2]))
-      return parent[i2] = leaf2, tree2;
+      return parent[i2] = leaf, tree2;
   }
   xp = +tree2._x.call(null, node.data);
   yp = +tree2._y.call(null, node.data);
   if (x2 === xp && y2 === yp)
-    return leaf2.next = node, parent ? parent[i2] = leaf2 : tree2._root = leaf2, tree2;
+    return leaf.next = node, parent ? parent[i2] = leaf : tree2._root = leaf, tree2;
   do {
     parent = parent ? parent[i2] = new Array(4) : tree2._root = new Array(4);
     if (right2 = x2 >= (xm = (x02 + x12) / 2))
@@ -52024,7 +52063,7 @@ function add$c(tree2, x2, y2, d) {
     else
       y12 = ym;
   } while ((i2 = bottom2 << 1 | right2) === (j = (yp >= ym) << 1 | xp >= xm));
-  return parent[j] = node, parent[i2] = leaf2, tree2;
+  return parent[j] = node, parent[i2] = leaf, tree2;
 }
 function addAll$1(data2) {
   var d, i2, n3 = data2.length, x2, y2, xz = new Array(n3), yz = new Array(n3), x02 = Infinity, y02 = Infinity, x12 = -Infinity, y12 = -Infinity;
@@ -52205,20 +52244,20 @@ function tree_size$1() {
   return size2;
 }
 function tree_visit$1(callback) {
-  var quads = [], q, node = this._root, child2, x02, y02, x12, y12;
+  var quads = [], q, node = this._root, child, x02, y02, x12, y12;
   if (node)
     quads.push(new Quad$1(node, this._x0, this._y0, this._x1, this._y1));
   while (q = quads.pop()) {
     if (!callback(node = q.node, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1) && node.length) {
       var xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
-      if (child2 = node[3])
-        quads.push(new Quad$1(child2, xm, ym, x12, y12));
-      if (child2 = node[2])
-        quads.push(new Quad$1(child2, x02, ym, xm, y12));
-      if (child2 = node[1])
-        quads.push(new Quad$1(child2, xm, y02, x12, ym));
-      if (child2 = node[0])
-        quads.push(new Quad$1(child2, x02, y02, xm, ym));
+      if (child = node[3])
+        quads.push(new Quad$1(child, xm, ym, x12, y12));
+      if (child = node[2])
+        quads.push(new Quad$1(child, x02, ym, xm, y12));
+      if (child = node[1])
+        quads.push(new Quad$1(child, xm, y02, x12, ym));
+      if (child = node[0])
+        quads.push(new Quad$1(child, x02, y02, xm, ym));
     }
   }
   return this;
@@ -52230,15 +52269,15 @@ function tree_visitAfter$1(callback) {
   while (q = quads.pop()) {
     var node = q.node;
     if (node.length) {
-      var child2, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1, xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
-      if (child2 = node[0])
-        quads.push(new Quad$1(child2, x02, y02, xm, ym));
-      if (child2 = node[1])
-        quads.push(new Quad$1(child2, xm, y02, x12, ym));
-      if (child2 = node[2])
-        quads.push(new Quad$1(child2, x02, ym, xm, y12));
-      if (child2 = node[3])
-        quads.push(new Quad$1(child2, xm, ym, x12, y12));
+      var child, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1, xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
+      if (child = node[0])
+        quads.push(new Quad$1(child, x02, y02, xm, ym));
+      if (child = node[1])
+        quads.push(new Quad$1(child, xm, y02, x12, ym));
+      if (child = node[2])
+        quads.push(new Quad$1(child, x02, ym, xm, y12));
+      if (child = node[3])
+        quads.push(new Quad$1(child, xm, ym, x12, y12));
     }
     next3.push(q);
   }
@@ -52272,15 +52311,15 @@ function Quadtree$1(x2, y2, x02, y02, x12, y12) {
   this._y1 = y12;
   this._root = void 0;
 }
-function leaf_copy$1(leaf2) {
-  var copy2 = { data: leaf2.data }, next3 = copy2;
-  while (leaf2 = leaf2.next)
-    next3 = next3.next = { data: leaf2.data };
+function leaf_copy$1(leaf) {
+  var copy2 = { data: leaf.data }, next3 = copy2;
+  while (leaf = leaf.next)
+    next3 = next3.next = { data: leaf.data };
   return copy2;
 }
 var treeProto$1 = quadtree$1.prototype = Quadtree$1.prototype;
 treeProto$1.copy = function() {
-  var copy2 = new Quadtree$1(this._x, this._y, this._x0, this._y0, this._x1, this._y1), node = this._root, nodes, child2;
+  var copy2 = new Quadtree$1(this._x, this._y, this._x0, this._y0, this._x1, this._y1), node = this._root, nodes, child;
   if (!node)
     return copy2;
   if (!node.length)
@@ -52288,11 +52327,11 @@ treeProto$1.copy = function() {
   nodes = [{ source: node, target: copy2._root = new Array(4) }];
   while (node = nodes.pop()) {
     for (var i2 = 0; i2 < 4; ++i2) {
-      if (child2 = node.source[i2]) {
-        if (child2.length)
-          nodes.push({ source: child2, target: node.target[i2] = new Array(4) });
+      if (child = node.source[i2]) {
+        if (child.length)
+          nodes.push({ source: child, target: node.target[i2] = new Array(4) });
         else
-          node.target[i2] = leaf_copy$1(child2);
+          node.target[i2] = leaf_copy$1(child);
       }
     }
   }
@@ -52362,20 +52401,20 @@ Dispatch$1.prototype = dispatch$1.prototype = {
       copy2[t4] = _[t4].slice();
     return new Dispatch$1(copy2);
   },
-  call: function(type2, that2) {
+  call: function(type2, that) {
     if ((n3 = arguments.length - 2) > 0)
       for (var args = new Array(n3), i2 = 0, n3, t4; i2 < n3; ++i2)
         args[i2] = arguments[i2 + 2];
     if (!this._.hasOwnProperty(type2))
       throw new Error("unknown type: " + type2);
     for (t4 = this._[type2], i2 = 0, n3 = t4.length; i2 < n3; ++i2)
-      t4[i2].value.apply(that2, args);
+      t4[i2].value.apply(that, args);
   },
-  apply: function(type2, that2, args) {
+  apply: function(type2, that, args) {
     if (!this._.hasOwnProperty(type2))
       throw new Error("unknown type: " + type2);
     for (var t4 = this._[type2], i2 = 0, n3 = t4.length; i2 < n3; ++i2)
-      t4[i2].value.apply(that2, args);
+      t4[i2].value.apply(that, args);
   }
 };
 function get$6(type2, name2) {
@@ -57113,7 +57152,7 @@ let Resource$1 = class Resource {
     }
     this._handle = null;
     if (children2 && deleteChildren) {
-      children2.filter(Boolean).forEach((child2) => child2.delete());
+      children2.filter(Boolean).forEach((child) => child.delete());
     }
     return this;
   }
@@ -76039,10 +76078,10 @@ var hammer$1 = { exports: {} };
     var merge3 = deprecate(function merge4(dest, src2) {
       return extend3(dest, src2, true);
     }, "merge", "Use `assign`.");
-    function inherit(child2, base2, properties) {
+    function inherit(child, base2, properties) {
       var baseP = base2.prototype, childP;
-      childP = child2.prototype = Object.create(baseP);
-      childP.constructor = child2;
+      childP = child.prototype = Object.create(baseP);
+      childP.constructor = child;
       childP._super = baseP;
       if (properties) {
         assign2(childP, properties);
@@ -84142,27 +84181,27 @@ function createMesh(bounds2, resolution) {
   const indices = new Uint32Array(vertexCount);
   const texCoords = new Float32Array(uCount * vCount * 2);
   const positions = new Float64Array(uCount * vCount * 3);
-  let vertex2 = 0;
+  let vertex = 0;
   let index2 = 0;
   for (let u2 = 0; u2 < uCount; u2++) {
     const ut = u2 / (uCount - 1);
     for (let v = 0; v < vCount; v++) {
       const vt = v / (vCount - 1);
       const p = interpolateQuad(bounds2, ut, vt);
-      positions[vertex2 * 3 + 0] = p[0];
-      positions[vertex2 * 3 + 1] = p[1];
-      positions[vertex2 * 3 + 2] = p[2] || 0;
-      texCoords[vertex2 * 2 + 0] = ut;
-      texCoords[vertex2 * 2 + 1] = 1 - vt;
+      positions[vertex * 3 + 0] = p[0];
+      positions[vertex * 3 + 1] = p[1];
+      positions[vertex * 3 + 2] = p[2] || 0;
+      texCoords[vertex * 2 + 0] = ut;
+      texCoords[vertex * 2 + 1] = 1 - vt;
       if (u2 > 0 && v > 0) {
-        indices[index2++] = vertex2 - vCount;
-        indices[index2++] = vertex2 - vCount - 1;
-        indices[index2++] = vertex2 - 1;
-        indices[index2++] = vertex2 - vCount;
-        indices[index2++] = vertex2 - 1;
-        indices[index2++] = vertex2;
+        indices[index2++] = vertex - vCount;
+        indices[index2++] = vertex - vCount - 1;
+        indices[index2++] = vertex - 1;
+        indices[index2++] = vertex - vCount;
+        indices[index2++] = vertex - 1;
+        indices[index2++] = vertex;
       }
-      vertex2++;
+      vertex++;
     }
   }
   return {
@@ -90560,9 +90599,6 @@ class GeoCellLayer extends CompositeLayer {
 }
 _defineProperty$n(GeoCellLayer, "layerName", "GeoCellLayer");
 _defineProperty$n(GeoCellLayer, "defaultProps", defaultProps$t);
-function commonjsRequire(path2) {
-  throw new Error('Could not dynamically require "' + path2 + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
-}
 var long = { exports: {} };
 (function(module2) {
   /**
@@ -92170,8 +92206,8 @@ class OSMNode {
     }
     this.selected = false;
     this.childVisible = true;
-    for (const child2 of this.children) {
-      child2.update(params2);
+    for (const child of this.children) {
+      child.update(params2);
     }
     return true;
   }
@@ -92813,8 +92849,8 @@ function updateTileStateReplace(allTiles) {
   for (const tile of sortedTiles) {
     tile.isVisible = Boolean(tile.state & TILE_STATE_VISIBLE);
     if (tile.children && (tile.isVisible || tile.state & TILE_STATE_VISITED)) {
-      for (const child2 of tile.children) {
-        child2.state = TILE_STATE_VISITED;
+      for (const child of tile.children) {
+        child.state = TILE_STATE_VISITED;
       }
     } else if (tile.isSelected) {
       getPlaceholderInChildren(tile);
@@ -92833,11 +92869,11 @@ function getPlaceholderInAncestors(startTile) {
   return false;
 }
 function getPlaceholderInChildren(tile) {
-  for (const child2 of tile.children) {
-    if (child2.isLoaded || child2.content) {
-      child2.state |= TILE_STATE_VISIBLE;
+  for (const child of tile.children) {
+    if (child.isLoaded || child.content) {
+      child.state |= TILE_STATE_VISIBLE;
     } else {
-      getPlaceholderInChildren(child2);
+      getPlaceholderInChildren(child);
     }
   }
 }
@@ -105495,7 +105531,7 @@ class GroupNode extends ScenegraphNode {
     const {
       children: children2 = []
     } = props2;
-    log$8.assert(children2.every((child2) => child2 instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
+    log$8.assert(children2.every((child) => child instanceof ScenegraphNode), "every child must an instance of ScenegraphNode");
     super(props2);
     this.children = children2;
   }
@@ -105503,18 +105539,18 @@ class GroupNode extends ScenegraphNode {
     for (var _len = arguments.length, children2 = new Array(_len), _key = 0; _key < _len; _key++) {
       children2[_key] = arguments[_key];
     }
-    for (const child2 of children2) {
-      if (Array.isArray(child2)) {
-        this.add(...child2);
+    for (const child of children2) {
+      if (Array.isArray(child)) {
+        this.add(...child);
       } else {
-        this.children.push(child2);
+        this.children.push(child);
       }
     }
     return this;
   }
-  remove(child2) {
+  remove(child) {
     const children2 = this.children;
-    const indexOf = children2.indexOf(child2);
+    const indexOf = children2.indexOf(child);
     if (indexOf > -1) {
       children2.splice(indexOf, 1);
     }
@@ -105525,7 +105561,7 @@ class GroupNode extends ScenegraphNode {
     return this;
   }
   delete() {
-    this.children.forEach((child2) => child2.delete());
+    this.children.forEach((child) => child.delete());
     this.removeAll();
     super.delete();
   }
@@ -105534,13 +105570,13 @@ class GroupNode extends ScenegraphNode {
       worldMatrix = new Matrix4()
     } = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
     const modelMatrix2 = new Matrix4(worldMatrix).multiplyRight(this.matrix);
-    for (const child2 of this.children) {
-      if (child2 instanceof GroupNode) {
-        child2.traverse(visitor, {
+    for (const child of this.children) {
+      if (child instanceof GroupNode) {
+        child.traverse(visitor, {
           worldMatrix: modelMatrix2
         });
       } else {
-        visitor(child2, {
+        visitor(child, {
           worldMatrix: modelMatrix2
         });
       }
@@ -106031,7 +106067,7 @@ class GLTFInstantiator {
   createNode(gltfNode) {
     if (!gltfNode._node) {
       const gltfChildren = gltfNode.children || [];
-      const children2 = gltfChildren.map((child2) => this.createNode(child2));
+      const children2 = gltfChildren.map((child) => this.createNode(child));
       if (gltfNode.mesh) {
         children2.push(this.createMesh(gltfNode.mesh));
       }
@@ -107574,12 +107610,12 @@ class Float64 extends Float {
 }
 _Symbol$toStringTag7 = Symbol.toStringTag;
 class FixedSizeList extends DataType {
-  constructor(listSize, child2) {
+  constructor(listSize, child) {
     super();
     _defineProperty$n(this, "listSize", void 0);
     _defineProperty$n(this, "children", void 0);
     this.listSize = listSize;
-    this.children = [child2];
+    this.children = [child];
   }
   get typeId() {
     return Type$1.FixedSizeList;
@@ -108582,7 +108618,7 @@ class GLTFV1Normalizer {
   }
   _convertNodeIds(node) {
     if (node.children) {
-      node.children = node.children.map((child2) => this._convertIdToIndex(child2, "node"));
+      node.children = node.children.map((child) => this._convertIdToIndex(child, "node"));
     }
     if (node.meshes) {
       node.meshes = node.meshes.map((mesh2) => this._convertIdToIndex(mesh2, "mesh"));
@@ -108798,7 +108834,7 @@ class GLTFPostProcessor {
   _resolveNode(node, index2) {
     node.id = node.id || "node-".concat(index2);
     if (node.children) {
-      node.children = node.children.map((child2) => this.getNode(child2));
+      node.children = node.children.map((child) => this.getNode(child));
     }
     if (node.mesh !== void 0) {
       node.mesh = this.getMesh(node.mesh);
@@ -110759,8 +110795,8 @@ class TilesetTraverser {
   }
   updateChildTiles(tile, frameState) {
     const children2 = tile.children;
-    for (const child2 of children2) {
-      this.updateTile(child2, frameState);
+    for (const child of children2) {
+      this.updateTile(child, frameState);
     }
     return true;
   }
@@ -110774,26 +110810,26 @@ class TilesetTraverser {
     const checkRefines = tile.refine === TILE_REFINEMENT.REPLACE && tile.hasRenderContent && !skipLevelOfDetail;
     let hasVisibleChild = false;
     let refines = true;
-    for (const child2 of children2) {
-      child2._selectionDepth = depth;
-      if (child2.isVisibleAndInRequestVolume) {
-        if (stack2.find(child2)) {
-          stack2.delete(child2);
+    for (const child of children2) {
+      child._selectionDepth = depth;
+      if (child.isVisibleAndInRequestVolume) {
+        if (stack2.find(child)) {
+          stack2.delete(child);
         }
-        stack2.push(child2);
+        stack2.push(child);
         hasVisibleChild = true;
       } else if (checkRefines || loadSiblings) {
-        this.loadTile(child2, frameState);
-        this.touchTile(child2, frameState);
+        this.loadTile(child, frameState);
+        this.touchTile(child, frameState);
       }
       if (checkRefines) {
         let childRefines;
-        if (!child2._inRequestVolume) {
+        if (!child._inRequestVolume) {
           childRefines = false;
-        } else if (!child2.hasRenderContent) {
-          childRefines = this.executeEmptyTraversal(child2, frameState);
+        } else if (!child.hasRenderContent) {
+          childRefines = this.executeEmptyTraversal(child, frameState);
         } else {
-          childRefines = child2.contentAvailable;
+          childRefines = child.contentAvailable;
         }
         refines = refines && childRefines;
         if (!refines) {
@@ -110870,9 +110906,9 @@ class TilesetTraverser {
   }
   anyChildrenVisible(tile, frameState) {
     let anyVisible = false;
-    for (const child2 of tile.children) {
-      child2.updateVisibility(frameState);
-      anyVisible = anyVisible || child2.isVisibleAndInRequestVolume;
+    for (const child of tile.children) {
+      child.updateVisibility(frameState);
+      anyVisible = anyVisible || child.isVisibleAndInRequestVolume;
     }
     return anyVisible;
   }
@@ -110890,11 +110926,11 @@ class TilesetTraverser {
       const traverse = !tile.hasRenderContent && this.canTraverse(tile, frameState, false, true);
       if (traverse) {
         const children2 = tile.children;
-        for (const child2 of children2) {
-          if (stack2.find(child2)) {
-            stack2.delete(child2);
+        for (const child of children2) {
+          if (stack2.find(child)) {
+            stack2.delete(child);
           }
-          stack2.push(child2);
+          stack2.push(child);
         }
       } else if (!tile.contentAvailable) {
         allDescendantsLoaded = false;
@@ -111462,15 +111498,15 @@ class I3STilesetTraverser extends TilesetTraverser {
     const children2 = tile.header.children || [];
     const childTiles = tile.children;
     const tileset = tile.tileset;
-    for (const child2 of children2) {
-      const extendedId = "".concat(child2.id, "-").concat(frameState.viewport.id);
+    for (const child of children2) {
+      const extendedId = "".concat(child.id, "-").concat(frameState.viewport.id);
       const childTile = childTiles && childTiles.find((t4) => t4.id === extendedId);
       if (!childTile) {
-        let request2 = () => this._loadTile(child2.id, tileset);
+        let request2 = () => this._loadTile(child.id, tileset);
         const cachedRequest = this._tileManager.find(extendedId);
         if (!cachedRequest) {
           if (tileset.tileset.nodePages) {
-            request2 = () => tileset.tileset.nodePagesTile.formTileFromNodePages(child2.id);
+            request2 = () => tileset.tileset.nodePagesTile.formTileFromNodePages(child.id);
           }
           this._tileManager.add(request2, extendedId, (header) => this._onTileLoad(header, tile, extendedId), frameState);
         } else {
@@ -112026,8 +112062,8 @@ class Tileset3D {
     }
     while (stack2.length > 0) {
       const tile = stack2.pop();
-      for (const child2 of tile.children) {
-        stack2.push(child2);
+      for (const child of tile.children) {
+        stack2.push(child);
       }
       this._destroyTile(tile);
     }
@@ -112039,8 +112075,8 @@ class Tileset3D {
     stack2.push(root2);
     while (stack2.length > 0) {
       tile = stack2.pop();
-      for (const child2 of tile.children) {
-        stack2.push(child2);
+      for (const child of tile.children) {
+        stack2.push(child);
       }
       if (tile !== root2) {
         this._destroyTile(tile);
@@ -117846,7 +117882,7 @@ function evaluateChildren(children2, childProps) {
     return children2(childProps);
   }
   if (Array.isArray(children2)) {
-    return children2.map((child2) => evaluateChildren(child2, childProps));
+    return children2.map((child) => evaluateChildren(child, childProps));
   }
   if (isComponent(children2)) {
     if (isReactMap(children2)) {
@@ -117859,16 +117895,16 @@ function evaluateChildren(children2, childProps) {
   }
   return children2;
 }
-function isComponent(child2) {
-  return child2 && typeof child2 === "object" && "type" in child2 || false;
+function isComponent(child) {
+  return child && typeof child === "object" && "type" in child || false;
 }
-function isReactMap(child2) {
-  const componentClass = child2.type;
+function isReactMap(child) {
+  const componentClass = child.type;
   const componentProps = componentClass && componentClass.defaultProps;
   return componentProps && componentProps.mapStyle;
 }
-function needsDeckGLViewProps(child2) {
-  const componentClass = child2.type;
+function needsDeckGLViewProps(child) {
+  const componentClass = child.type;
   return componentClass && componentClass.deckGLViewProps;
 }
 function wrapInView(node) {
@@ -117953,12 +117989,12 @@ function positionChildrenUnderViews({
   }
   const views = {};
   const defaultViewId = viewManager.views[0].id;
-  for (const child2 of children2) {
+  for (const child of children2) {
     let viewId = defaultViewId;
-    let viewChildren = child2;
-    if (isComponent(child2) && inheritsFrom(child2.type, View$2)) {
-      viewId = child2.props.id || defaultViewId;
-      viewChildren = child2.props.children;
+    let viewChildren = child;
+    if (isComponent(child) && inheritsFrom(child.type, View$2)) {
+      viewId = child.props.id || defaultViewId;
+      viewChildren = child.props.children;
     }
     const viewport = viewManager.getViewport(viewId);
     const viewState = viewManager.getViewState(viewId);
@@ -120487,7 +120523,7 @@ var ERROR_MESSAGE = "Function.prototype.bind called on incompatible ";
 var slice$4 = Array.prototype.slice;
 var toStr$2 = Object.prototype.toString;
 var funcType = "[object Function]";
-var implementation$7 = function bind2(that2) {
+var implementation$7 = function bind2(that) {
   var target2 = this;
   if (typeof target2 !== "function" || toStr$2.call(target2) !== funcType) {
     throw new TypeError(ERROR_MESSAGE + target2);
@@ -120506,7 +120542,7 @@ var implementation$7 = function bind2(that2) {
       return this;
     } else {
       return target2.apply(
-        that2,
+        that,
         args.concat(slice$4.call(arguments))
       );
     }
@@ -136849,10 +136885,10 @@ EventEmitter.prototype.setMaxListeners = function setMaxListeners(n3) {
   this._maxListeners = n3;
   return this;
 };
-function _getMaxListeners(that2) {
-  if (that2._maxListeners === void 0)
+function _getMaxListeners(that) {
+  if (that._maxListeners === void 0)
     return EventEmitter.defaultMaxListeners;
-  return that2._maxListeners;
+  return that._maxListeners;
 }
 EventEmitter.prototype.getMaxListeners = function getMaxListeners() {
   return _getMaxListeners(this);
@@ -146973,13 +147009,13 @@ var MeasureAngleMode = /* @__PURE__ */ function(_GeoJsonEditMode) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty$5(_assertThisInitialized$1(_this), "_getTooltips", (0, _memoize["default"])(function(_ref3) {
-      var modeConfig = _ref3.modeConfig, vertex2 = _ref3.vertex, point1 = _ref3.point1, point2 = _ref3.point2;
+      var modeConfig = _ref3.modeConfig, vertex = _ref3.vertex, point1 = _ref3.point1, point2 = _ref3.point2;
       var tooltips = DEFAULT_TOOLTIPS;
-      if (vertex2 && point1 && point2) {
+      if (vertex && point1 && point2) {
         var _ref22 = modeConfig || {}, formatTooltip2 = _ref22.formatTooltip, measurementCallback = _ref22.measurementCallback;
         var units2 = "deg";
-        var angle1 = (0, _bearing$1["default"])(vertex2, point1);
-        var angle2 = (0, _bearing$1["default"])(vertex2, point2);
+        var angle1 = (0, _bearing$1["default"])(vertex, point1);
+        var angle2 = (0, _bearing$1["default"])(vertex, point2);
         var angle3 = Math.abs(angle1 - angle2);
         if (angle3 > 180) {
           angle3 = 360 - angle3;
@@ -155187,16 +155223,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-90cab418.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-e2d5a7f6.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-cb4a4ae9.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-8aa1e0b3.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-d5225556.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-c18e8d14.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-b6a798a9.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-e2ffe296.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-ad4dfc02.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-eaa82c98.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-e164f5b4.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-ad4b66a3.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-0c45509f.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-3d222f28.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -158124,11 +158160,11 @@ var xmlNode$1 = function(tagname, parent, val) {
   this.child = {};
   this.attrsMap = {};
   this.val = val;
-  this.addChild = function(child2) {
-    if (Array.isArray(this.child[child2.tagname])) {
-      this.child[child2.tagname].push(child2);
+  this.addChild = function(child) {
+    if (Array.isArray(this.child[child.tagname])) {
+      this.child[child.tagname].push(child);
     } else {
-      this.child[child2.tagname] = [child2];
+      this.child[child.tagname] = [child];
     }
   };
 };
@@ -171717,7 +171753,7 @@ function ToolMenu(props2) {
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
-  return jsxRuntimeExports.jsxs("div", { className: classes.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: "select lasso", onClick: () => setActiveTool(distEs6$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, jsxRuntimeExports.jsx(IconButton2, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) })] });
+  return jsxRuntimeExports.jsxs("div", { className: classes.tool, children: [visibleTools.pan && jsxRuntimeExports.jsx(IconTool, { alt: "pointer tool", onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsxRuntimeExports.jsx(SvgNearMe, {}) }), visibleTools.selectLasso ? jsxRuntimeExports.jsx(IconTool, { alt: "select lasso", onClick: () => setActiveTool(distEs6$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6$2.SELECTION_TYPE.POLYGON, children: jsxRuntimeExports.jsx(SvgSelectionLasso, {}) }) : null, jsxRuntimeExports.jsx(IconButton2, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsxRuntimeExports.jsx(CenterFocusStrong, {}) })] });
 }
 const getCursorWithTool = () => "crosshair";
 const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "default";
@@ -172359,6 +172395,7 @@ const ScatterplotWrapper = forwardRef((props2, deckRef) => jsxRuntimeExports.jsx
 ScatterplotWrapper.displayName = "ScatterplotWrapper";
 function ScatterplotOptions(props2) {
   const { children: children2, observationsLabel, cellRadius, setCellRadius, cellRadiusMode, setCellRadiusMode, cellOpacity, setCellOpacity, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange } = props2;
+  const scatterplotOptionsId = useId();
   const observationsLabelNice = capitalize$2(observationsLabel);
   const classes = usePlotOptionsStyles();
   function handleCellRadiusModeChange(event2) {
@@ -172392,7 +172429,10 @@ function ScatterplotOptions(props2) {
     setGeneExpressionColormapRange(value2);
   }
   const handleColormapRangeChangeDebounced = useCallback(debounce$5(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
-  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsx(CellColorEncodingOption, { observationsLabel, cellColorEncoding, setCellColorEncoding }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [observationsLabelNice, " Set Labels Visible"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default" }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Tooltips Visible" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, {
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsx(CellColorEncodingOption, { observationsLabel, cellColorEncoding, setCellColorEncoding }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-labels-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Labels Visible"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.checkbox, checked: cellSetLabelsVisible, onChange: handleLabelVisibilityChange, name: "scatterplot-option-cell-set-labels", color: "default", inputProps: {
+    "aria-label": "Show or hide set labels",
+    id: `scatterplot-set-labels-visible-${scatterplotOptionsId}`
+  } }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`, children: "Tooltips Visible" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, {
     className: classes.checkbox,
     /**
      * We have to use "checked" here, not "value".
@@ -172401,15 +172441,25 @@ function ScatterplotOptions(props2) {
      */
     checked: tooltipsVisible,
     onChange: handleTooltipsVisibilityChange,
-    name: "scatterplot-option-toltip-visibility",
-    color: "default"
-  }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [observationsLabelNice, " Set Label Size"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { disabled: !cellSetLabelsVisible, classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-labelledby": "cell-set-label-size-slider", valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [observationsLabelNice, " Set Polygons Visible"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default" }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, htmlFor: "cell-radius-mode-select", children: [observationsLabelNice, " Radius Mode"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
-    id: "cell-radius-mode-select"
-  }, children: [jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }), jsxRuntimeExports.jsx("option", { value: "manual", children: "Manual" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [observationsLabelNice, " Radius"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { disabled: cellRadiusMode !== "manual", classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellRadius, onChange: handleRadiusChange, "aria-labelledby": "cell-radius-slider", valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, htmlFor: "cell-opacity-mode-select", children: [observationsLabelNice, " Opacity Mode"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
-    id: "cell-opacity-mode-select"
-  }, children: [jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }), jsxRuntimeExports.jsx("option", { value: "manual", children: "Manual" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsxs(TableCell$1, { className: classes.labelCell, children: [observationsLabelNice, " Opacity"] }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { disabled: cellOpacityMode !== "manual", classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: cellOpacity, onChange: handleOpacityChange, "aria-labelledby": "cell-opacity-slider", valueLabelDisplay: "auto", step: 0.05, min: 0, max: 1 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
-    id: "gene-expression-colormap-select"
-  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] });
+    name: "scatterplot-option-tooltip-visibility",
+    color: "default",
+    inputProps: {
+      "aria-label": "Show or hide tooltips",
+      id: `scatterplot-set-tooltips-visible-${scatterplotOptionsId}`
+    }
+  }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-label-size-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Label Size"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: !cellSetLabelsVisible, value: cellSetLabelSize, onChange: handleLabelSizeChange, "aria-label": "Scatterplot label size slider", id: `scatterplot-set-label-size-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 1, min: 8, max: 36 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`, children: [observationsLabelNice, " Set Polygons Visible"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.checkbox, checked: cellSetPolygonsVisible, onChange: handlePolygonVisibilityChange, name: "scatterplot-option-cell-set-polygons", color: "default", inputProps: {
+    "aria-label": "Show or hide polygons",
+    id: `scatterplot-set-polygons-visible-${scatterplotOptionsId}`
+  } }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Mode"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes.select, value: cellRadiusMode, onChange: handleCellRadiusModeChange, inputProps: {
+    id: `scatterplot-set-radius-mode-select-${scatterplotOptionsId}`
+  }, children: [jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }), jsxRuntimeExports.jsx("option", { value: "manual", children: "Manual" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, children: [observationsLabelNice, " Radius Size"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: cellRadiusMode !== "manual", value: cellRadius, onChange: handleRadiusChange, "aria-label": "Scatterplot radius size slider", id: `scatterplot-set-radius-size-select-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.01, min: 0.01, max: 10 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Mode"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsxs(OptionSelect, { className: classes.select, value: cellOpacityMode, onChange: handleCellOpacityModeChange, inputProps: {
+    id: `scatterplot-set-opacity-mode-${scatterplotOptionsId}`
+  }, children: [jsxRuntimeExports.jsx("option", { value: "auto", children: "Auto" }), jsxRuntimeExports.jsx("option", { value: "manual", children: "Manual" })] }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsxs("label", { htmlFor: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, children: [observationsLabelNice, " Opacity Level"] }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, disabled: cellOpacityMode !== "manual", value: cellOpacity, onChange: handleOpacityChange, "aria-label": "Scatterplot opacity level slider", id: `scatterplot-set-opacity-level-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 0.05, min: 0, max: 1 }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`, children: "Gene Expression Colormap" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
+    id: `scatterplot-gene-expression-colormap-${scatterplotOptionsId}`
+  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, children: "Gene Expression Colormap Range" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index2) => {
+    const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
+    return `${labelPrefix} for scatterplot gene expression colormap range`;
+  }, id: `scatterplot-gene-expression-colormap-range-${scatterplotOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] });
 }
 const styles32 = makeStyles((theme) => ({
   tooltipAnchor: {
@@ -172652,11 +172702,11 @@ function EnterNode(parent, datum2) {
 }
 EnterNode.prototype = {
   constructor: EnterNode,
-  appendChild: function(child2) {
-    return this._parent.insertBefore(child2, this._next);
+  appendChild: function(child) {
+    return this._parent.insertBefore(child, this._next);
   },
-  insertBefore: function(child2, next3) {
-    return this._parent.insertBefore(child2, next3);
+  insertBefore: function(child, next3) {
+    return this._parent.insertBefore(child, next3);
   },
   querySelector: function(selector2) {
     return this._parent.querySelector(selector2);
@@ -174633,12 +174683,13 @@ function EmbeddingScatterplotSubscriber(props2) {
     setTargetY(target2[1]);
     setTargetZ(target2[2] || 0);
   };
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState, originalViewState, obsEmbeddingIndex, obsEmbedding, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState, originalViewState, obsEmbeddingIndex, obsEmbedding, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
     setComponentHover(uuid);
   }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected }), tooltipsVisible && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: expressionExtents == null ? void 0 : expressionExtents[0] })] });
 }
 function GatingScatterplotOptions(props2) {
   const { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform, setGatingFeatureValueTransform, gatingFeatureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient, geneSelectOptions, transformOptions } = props2;
+  const gatingScatterplotOptionsId = useId();
   const classes = usePlotOptionsStyles();
   const handleGeneSelectChange = (event2) => {
     const { options } = event2.target;
@@ -174669,13 +174720,13 @@ function GatingScatterplotOptions(props2) {
       }
     }
   };
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: capitalize$2(plur(featureType, geneSelectOptions == null ? void 0 : geneSelectOptions.length)) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter((v) => v), onChange: handleGeneSelectChange, inputProps: {
-    id: "scatterplot-gene-select"
-  }, children: geneSelectOptions.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) }, "gating-gene-select") })] }, "gene-option-row"), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Transform" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? "" : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
-    id: "scatterplot-transform-select"
-  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }, "gating-transform-select") })] }, "transform-option-row"), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Transform Coefficient" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(TextField$1, { label: "Number", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, InputLabelProps: {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`, children: capitalize$2(pluralize(featureType, geneSelectOptions == null ? void 0 : geneSelectOptions.length)) }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { multiple: true, className: classes.select, value: [gatingFeatureSelectionX, gatingFeatureSelectionY].filter((v) => v), onChange: handleGeneSelectChange, inputProps: {
+    id: `scatterplot-gating-gene-select-${gatingScatterplotOptionsId}`
+  }, children: geneSelectOptions.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`, children: "Transform" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: gatingFeatureValueTransform === null ? "" : gatingFeatureValueTransform, onChange: handleTransformChange, inputProps: {
+    id: `scatterplot-gating-transform-select-${gatingScatterplotOptionsId}`
+  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}`, children: "Transform Coefficient" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(TextField$1, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: gatingFeatureValueTransformCoefficient, InputLabelProps: {
     shrink: true
-  } }) })] }, "transform-coefficient-option-row")] });
+  }, id: `scatterplot-gating-transform-coefficient-${gatingScatterplotOptionsId}` }) })] })] });
 }
 function GatingSubscriber(props2) {
   const {
@@ -174875,12 +174926,12 @@ function GatingSubscriber(props2) {
     gatingFeatureSelectionY,
     obsType
   ]);
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${plur(obsType, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, children: jsxRuntimeExports.jsx(GatingScatterplotOptions, { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(obsType, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, children: jsxRuntimeExports.jsx(GatingScatterplotOptions, { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
     setFeatureValueTransform(newValue);
     setTargetX(null);
     setTargetY(null);
     setZoom(null);
-  }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) }), children: [jsxRuntimeExports.jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${plur(featureType, 2)} in the plot settings.` }), jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState: ({ zoom: newZoom, target: target2 }) => {
+  }, gatingFeatureValueTransformCoefficient: featureValueTransformCoefficient, setGatingFeatureValueTransformCoefficient: setFeatureValueTransformCoefficient, geneSelectOptions: featureIndex, transformOptions: VALUE_TRANSFORM_OPTIONS }) }), children: [jsxRuntimeExports.jsx(EmptyMessage, { visible: !(gatingFeatureSelectionX && gatingFeatureSelectionY), message: `Select two ${pluralize(featureType, 2)} in the plot settings.` }), jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, hideTools: !(gatingFeatureSelectionX && gatingFeatureSelectionY), viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState: ({ zoom: newZoom, target: target2 }) => {
     setZoom(newZoom);
     setTargetX(target2[0]);
     setTargetY(target2[1]);
@@ -176474,8 +176525,8 @@ function _validate(array2, size2, dim) {
   if (dim < size2.length - 1) {
     var dimNext = dim + 1;
     for (i2 = 0; i2 < len2; i2++) {
-      var child2 = array2[i2];
-      if (!Array.isArray(child2)) {
+      var child = array2[i2];
+      if (!Array.isArray(child)) {
         throw new DimensionError(size2.length - 1, size2.length, "<");
       }
       _validate(array2[i2], size2, dimNext);
@@ -181496,8 +181547,8 @@ var createDenseMatrixClass = /* @__PURE__ */ factory(name$N, dependencies$M, (_r
     } else {
       return range2.map(function(i2) {
         validateIndex(i2, data2.length);
-        var child2 = data2[i2];
-        return _getSubmatrix(child2, index2, dims, dim + 1);
+        var child = data2[i2];
+        return _getSubmatrix(child, index2, dims, dim + 1);
       }).valueOf();
     }
   }
@@ -181624,8 +181675,8 @@ var createDenseMatrixClass = /* @__PURE__ */ factory(name$N, dependencies$M, (_r
     var me = this;
     var recurse2 = function recurse3(value2, index2) {
       if (isArray$1(value2)) {
-        return value2.map(function(child2, i2) {
-          return recurse3(child2, index2.concat(i2));
+        return value2.map(function(child, i2) {
+          return recurse3(child, index2.concat(i2));
         });
       } else {
         return callback(value2, index2, me);
@@ -181639,8 +181690,8 @@ var createDenseMatrixClass = /* @__PURE__ */ factory(name$N, dependencies$M, (_r
     var me = this;
     var recurse2 = function recurse3(value2, index2) {
       if (isArray$1(value2)) {
-        value2.forEach(function(child2, i2) {
-          recurse3(child2, index2.concat(i2));
+        value2.forEach(function(child, i2) {
+          recurse3(child, index2.concat(i2));
         });
       } else {
         callback(value2, index2, me);
@@ -190225,6 +190276,41 @@ function coordinateTransformationsToMatrix(coordinateTransformations, axes) {
   }
   return mat;
 }
+function normalizeCoordinateTransformations(coordinateTransformations, datasets) {
+  var _a2;
+  let result = [];
+  if (Array.isArray(coordinateTransformations)) {
+    result = coordinateTransformations.map((transform3) => {
+      if (transform3.input && transform3.output) {
+        const { type: type2 } = transform3;
+        if (type2 === "translation") {
+          return {
+            type: type2,
+            translation: transform3.translation
+          };
+        }
+        if (type2 === "scale") {
+          return {
+            type: type2,
+            scale: transform3.scale
+          };
+        }
+        if (type2 === "identity") {
+          return { type: type2 };
+        }
+        console.warn(`Coordinate transformation type "${type2}" is not supported.`);
+      }
+      return transform3;
+    });
+  }
+  if (Array.isArray((_a2 = datasets == null ? void 0 : datasets[0]) == null ? void 0 : _a2.coordinateTransformations)) {
+    result = [
+      ...datasets[0].coordinateTransformations,
+      ...result
+    ];
+  }
+  return result;
+}
 var shortNumber$1 = { exports: {} };
 (function(module2, exports2) {
   (function(global2, factory2) {
@@ -190272,14 +190358,14 @@ const shortNumber = /* @__PURE__ */ getDefaultExportFromCjs$1(shortNumberExports
 function makeSpatialSubtitle({ observationsCount, observationsLabel, subobservationsCount, subobservationsLabel, locationsCount }) {
   const parts = [];
   if (subobservationsCount > 0) {
-    let part = `${commaNumber(subobservationsCount)} ${plur(subobservationsLabel, subobservationsCount)}`;
+    let part = `${commaNumber(subobservationsCount)} ${pluralize(subobservationsLabel, subobservationsCount)}`;
     if (locationsCount > 0) {
       part += ` at ${shortNumber(locationsCount)} locations`;
     }
     parts.push(part);
   }
   if (observationsCount > 0) {
-    parts.push(`${commaNumber(observationsCount)} ${plur(observationsLabel, observationsCount)}`);
+    parts.push(`${commaNumber(observationsCount)} ${pluralize(observationsLabel, observationsCount)}`);
   }
   return parts.join(", ");
 }
@@ -190966,11 +191052,16 @@ const useToggleStyles = makeStyles(() => ({
   }
 }));
 const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d }) => {
+  const toggleAxisId = useId();
   const classes = useToggleStyles();
-  return jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.cameraLabel, children: "Fix Camera Axis" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.toggleBox, children: jsxRuntimeExports.jsx(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed) }) })] });
+  return jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.cameraLabel, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `spatial-camera-axis-${toggleAxisId}`, children: "Fix Camera Axis" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.toggleBox, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed), inputProps: {
+    "aria-label": "Fix or not fix spatial camera axis",
+    id: `spatial-camera-axis-${toggleAxisId}`
+  } }) })] });
 };
 function SpatialOptions(props2) {
   const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions } = props2;
+  const spatialOptionsId = useId();
   function handleGeneExpressionColormapChange(event2) {
     setGeneExpressionColormap(event2.target.value);
   }
@@ -190982,7 +191073,7 @@ function SpatialOptions(props2) {
     setTooltipsVisible(event2.target.checked);
   }
   const classes = usePlotOptionsStyles();
-  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [canShowColorEncodingOption ? jsxRuntimeExports.jsx(CellColorEncodingOption, { observationsLabel, cellColorEncoding, setCellColorEncoding }) : null, canShow3DOptions ? jsxRuntimeExports.jsx(ToggleFixedAxisButton, { setSpatialAxisFixed, spatialAxisFixed, use3d }) : null, jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Tooltips Visible" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, {
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [canShowColorEncodingOption ? jsxRuntimeExports.jsx(CellColorEncodingOption, { observationsLabel, cellColorEncoding, setCellColorEncoding }) : null, canShow3DOptions ? jsxRuntimeExports.jsx(ToggleFixedAxisButton, { setSpatialAxisFixed, spatialAxisFixed, use3d }) : null, jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `gene-expression-colormap-option-tooltip-visibility-${spatialOptionsId}`, children: "Tooltips Visible" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, {
     className: classes.checkbox,
     /**
      * We have to use "checked" here, not "value".
@@ -190991,11 +191082,18 @@ function SpatialOptions(props2) {
      */
     checked: tooltipsVisible,
     onChange: handleTooltipsVisibilityChange,
-    name: "gene-expression-colormap-option-toltip-visibility",
-    color: "default"
-  }) })] }), canShowExpressionOptions ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
-    id: "gene-expression-colormap-select"
-  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] }) : null] });
+    name: "gene-expression-colormap-option-tooltip-visibility",
+    color: "default",
+    inputProps: {
+      "aria-label": "Enable or disable tooltips",
+      id: `gene-expression-colormap-option-tooltip-visibility-${spatialOptionsId}`
+    }
+  }) })] }), canShowExpressionOptions ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `gene-expression-colormap-select-${spatialOptionsId}`, children: "Gene Expression Colormap" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
+    id: `gene-expression-colormap-select-${spatialOptionsId}`
+  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }, "gene-expression-colormap-select") })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `gene-expression-colormap-range-${spatialOptionsId}`, children: "Gene Expression Colormap Range" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index2) => {
+    const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
+    return `${labelPrefix} for spatial gene expression colormap range`;
+  }, id: `gene-expression-colormap-range-${spatialOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] }) : null] });
 }
 function SpatialTooltipSubscriber(props2) {
   const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo, hoverData, hoverCoord, useHoverInfoForTooltip, getObsIdFromHoverData } = props2;
@@ -191020,7 +191118,7 @@ function SpatialTooltipSubscriber(props2) {
   return cellInfo ? jsxRuntimeExports.jsx(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsxRuntimeExports.jsx(TooltipContent, { info: cellInfo }) }) : null;
 }
 function SpatialSubscriber(props2) {
-  const { uuid, coordinationScopes, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {} } = props2;
+  const { uuid, coordinationScopes, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false } = props2;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
@@ -191032,13 +191130,14 @@ function SpatialSubscriber(props2) {
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
   const hasExpressionData = useHasLoader(loaders, dataset, DataType$2.OBS_FEATURE_MATRIX, { obsType, featureType, featureValueType });
-  const hasSegmentationsData = useHasLoader(loaders, dataset, DataType$2.OBS_SEGMENTATIONS, { obsType });
+  const hasSegmentationsLoader = useHasLoader(loaders, dataset, DataType$2.OBS_SEGMENTATIONS, { obsType });
   const hasLocationsData = useHasLoader(loaders, dataset, DataType$2.OBS_LOCATIONS, { obsType });
   const hasImageData = useHasLoader(loaders, dataset, DataType$2.IMAGE, {});
   const [{ obsIndex: obsLocationsIndex, obsLocations }, obsLocationsStatus, obsLocationsUrls] = useObsLocationsData(loaders, dataset, false, { setSpatialPointLayer: setMoleculesLayer }, { spatialPointLayer: moleculesLayer }, { obsType: "molecule" });
   const [{ obsLabels: obsLocationsLabels }, obsLabelsStatus, obsLabelsUrls] = useObsLabelsData(loaders, dataset, false, {}, {}, { obsType: "molecule" });
   const [{ obsIndex: obsCentroidsIndex, obsLocations: obsCentroids }, obsCentroidsStatus, obsCentroidsUrls] = useObsLocationsData(loaders, dataset, false, {}, {}, { obsType });
   const [{ obsIndex: obsSegmentationsIndex, obsSegmentations, obsSegmentationsType }, obsSegmentationsStatus, obsSegmentationsUrls] = useObsSegmentationsData(loaders, dataset, false, { setSpatialSegmentationLayer: setCellsLayer }, { spatialSegmentationLayer: cellsLayer }, { obsType });
+  const hasSegmentationsData = hasSegmentationsLoader && !(obsSegmentationsStatus === STATUS$1.SUCCESS && !(obsSegmentations || obsSegmentationsType));
   const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
   const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
   const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
@@ -191254,7 +191353,29 @@ function SpatialSubscriber(props2) {
     const shouldUseFullData = (ll, index2) => Array.isArray(useFullResolutionImage) && useFullResolutionImage.includes(meta2[index2].name) && Array.isArray(ll.data);
     return imageLayerLoaders.map((ll, index2) => shouldUseFullData(ll, index2) ? { ...ll, data: ll.data[0] } : ll);
   }, [imageLayerLoaders, useFullResolutionImage, meta2]);
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, removeGridComponent, isReady, options, children: [jsxRuntimeExports.jsx(SpatialWrapper, { ref: deckRef, uuid, width: width2, height: height2, viewState: {
+  const [channelNames, channelColors] = useMemo(() => {
+    let names = [];
+    let colors2 = [];
+    if (imageLayers && imageLayers.length > 0 && imageLayerLoaders && imageLayerLoaders.length > 0) {
+      const firstImageLayer = imageLayers[0];
+      const firstImageLayerLoader = imageLayerLoaders == null ? void 0 : imageLayerLoaders[firstImageLayer == null ? void 0 : firstImageLayer.index];
+      if (firstImageLayer && !firstImageLayer.colormap && firstImageLayer.channels && firstImageLayerLoader) {
+        const allChannels = firstImageLayerLoader.channels;
+        names = firstImageLayer.channels.map((c2) => allChannels[c2.selection.channel === void 0 ? c2.selection.c : c2.selection.channel]);
+        colors2 = firstImageLayer.channels.map((c2) => c2.color);
+      }
+    }
+    return [names, colors2];
+  }, [imageLayers, imageLayerLoaders]);
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, removeGridComponent, isReady, options, children: [jsxRuntimeExports.jsx("div", { style: {
+    position: "absolute",
+    bottom: "5px",
+    left: "5px",
+    zIndex: 6
+  }, children: channelNamesVisible && channelNames ? channelNames.map((name2, i2) => jsxRuntimeExports.jsx(Typography$1, { variant: "h6", style: {
+    color: colorArrayToString(channelColors[i2]),
+    fontSize: "14px"
+  }, children: name2 }, `${name2}-${colorArrayToString(channelColors[i2])}`)) : null }), jsxRuntimeExports.jsx(SpatialWrapper, { ref: deckRef, uuid, width: width2, height: height2, viewState: {
     zoom: zoom2,
     target: [targetX2, targetY2, targetZ],
     rotationX,
@@ -192106,6 +192227,7 @@ function HeatmapTooltipSubscriber(props2) {
 function HeatmapOptions(props2) {
   const { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible } = props2;
   const classes = usePlotOptionsStyles();
+  const heatmapOptionsId = useId();
   function handleGeneExpressionColormapChange(event2) {
     setGeneExpressionColormap(event2.target.value);
   }
@@ -192116,9 +192238,10 @@ function HeatmapOptions(props2) {
     setGeneExpressionColormapRange(value2);
   }
   const handleColormapRangeChangeDebounced = useCallback(debounce$5(handleColormapRangeChange, 5, { trailing: true }), [handleColormapRangeChange]);
-  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "gene-expression-colormap-select", children: "Gene Expression Colormap" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
-    id: "gene-expression-colormap-select"
-  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Tooltips Visible" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, {
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `heatmap-gene-expression-colormap-${heatmapOptionsId}`, children: "Gene Expression Colormap" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: geneExpressionColormap, onChange: handleGeneExpressionColormapChange, inputProps: {
+    "aria-label": "Select gene expression colormap",
+    id: `heatmap-gene-expression-colormap-${heatmapOptionsId}`
+  }, children: GLSL_COLORMAPS.map((cmap) => jsxRuntimeExports.jsx("option", { value: cmap, children: cmap }, cmap)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `heatmap-gene-expression-colormap-tooltip-visibility-${heatmapOptionsId}`, children: "Tooltips Visible" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, {
     className: classes.checkbox,
     /**
      * We have to use "checked" here, not "value".
@@ -192127,9 +192250,13 @@ function HeatmapOptions(props2) {
      */
     checked: tooltipsVisible,
     onChange: handleTooltipsVisibilityChange,
-    name: "gene-expression-colormap-option-toltip-visibility",
-    color: "default"
-  }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Gene Expression Colormap Range" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, "aria-labelledby": "gene-expression-colormap-range-slider", valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] });
+    name: "heatmap-gene-expression-colormap-tooltip-visibility",
+    color: "default",
+    inputProps: {
+      "aria-label": "Show or hide tooltips",
+      id: `heatmap-gene-expression-colormap-tooltip-visibility-${heatmapOptionsId}`
+    }
+  }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `heatmap-gene-expression-colormap-range-${heatmapOptionsId}`, children: "Gene Expression Colormap Range" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider", id: `heatmap-gene-expression-colormap-range-${heatmapOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] });
 }
 function HeatmapSubscriber(props2) {
   const { uuid, coordinationScopes, removeGridComponent, theme, transpose: transpose2, observationsLabelOverride, variablesLabelOverride, title: title2 = "Heatmap" } = props2;
@@ -192138,9 +192265,9 @@ function HeatmapSubscriber(props2) {
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
   const [{ dataset, obsType, featureType, featureValueType, heatmapZoomX: zoomX, heatmapTargetX: targetX2, heatmapTargetY: targetY2, featureSelection: geneSelection, obsHighlight: cellHighlight, featureHighlight: geneHighlight, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible }, { setHeatmapZoomX: setZoomX, setHeatmapZoomY: setZoomY, setHeatmapTargetX: setTargetX, setHeatmapTargetY: setTargetY, setObsHighlight: setCellHighlight, setFeatureSelection: setGeneSelection, setObsColorEncoding: setCellColorEncoding, setFeatureHighlight: setGeneHighlight, setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor, setFeatureValueColormapRange: setGeneExpressionColormapRange, setFeatureValueColormap: setGeneExpressionColormap, setTooltipsVisible }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.HEATMAP], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
-  const observationsPluralLabel = plur(observationsLabel);
+  const observationsPluralLabel = pluralize(observationsLabel);
   const variablesLabel = variablesLabelOverride || featureType;
-  const variablesPluralLabel = plur(variablesLabel);
+  const variablesPluralLabel = pluralize(variablesLabel);
   const observationsTitle = capitalize$2(observationsPluralLabel);
   const variablesTitle = capitalize$2(variablesPluralLabel);
   const [isRendering, setIsRendering] = useState(false);
@@ -192207,8 +192334,8 @@ function HeatmapSubscriber(props2) {
     `${capitalize$2(observationsLabel)} Set`
   ], [observationsLabel]);
   const selectedCount = cellColors.size;
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${plur(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${plur(variablesLabel, genesCount)},
-             with ${commaNumber(selectedCount)} ${plur(observationsLabel, selectedCount)} selected`, urls: urls2, theme, removeGridComponent, isReady: isReady && !isRendering, options: jsxRuntimeExports.jsx(HeatmapOptions, { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible }), children: [jsxRuntimeExports.jsx(Heatmap$1, { ref: deckRef, transpose: transpose2, viewState: { zoom: zoomX, target: [targetX2, targetY2] }, setViewState: ({ zoom: zoom2, target: target2 }) => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${pluralize(variablesLabel, genesCount)},
+             with ${commaNumber(selectedCount)} ${pluralize(observationsLabel, selectedCount)} selected`, urls: urls2, theme, removeGridComponent, isReady: isReady && !isRendering, options: jsxRuntimeExports.jsx(HeatmapOptions, { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible }), children: [jsxRuntimeExports.jsx(Heatmap$1, { ref: deckRef, transpose: transpose2, viewState: { zoom: zoomX, target: [targetX2, targetY2] }, setViewState: ({ zoom: zoom2, target: target2 }) => {
     setZoomX(zoom2);
     setZoomY(zoom2);
     setTargetX(target2[0]);
@@ -196592,6 +196719,7 @@ function FeatureList(props2) {
 }
 function FeatureListOptions(props2) {
   const { children: children2, featureListSort, setFeatureListSort, featureListSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels, primaryColumnName } = props2;
+  const featureListId = useId();
   function handleFeatureListSortChange(event2) {
     setFeatureListSort(event2.target.value);
   }
@@ -196602,11 +196730,15 @@ function FeatureListOptions(props2) {
     setShowFeatureTable(event2.target.checked);
   }
   const classes = usePlotOptionsStyles();
-  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "feature-list-sort-option-select", children: "Sort Ordering" }), jsxRuntimeExports.jsx(TableCell$1, { children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureListSort, onChange: handleFeatureListSortChange, inputProps: {
-    id: "feature-list-sort-option-select"
-  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsxRuntimeExports.jsx("option", { value: option, children: option }, option)) }) })] }), hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "feature-list-sort-key-select", children: "Sort Key" }), jsxRuntimeExports.jsx(TableCell$1, { children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
-    id: "feature-list-sort-key-select"
-  }, children: hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("option", { value: "featureLabels", children: primaryColumnName }), jsxRuntimeExports.jsx("option", { value: "featureIndex", children: ALT_COLNAME })] }) : jsxRuntimeExports.jsx("option", { value: "featureIndex", children: primaryColumnName }) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Show Alternate IDs" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.tableCheckbox, checked: showFeatureTable, onChange: handleShowTableChange, name: "feature-list-show-table", color: "default" }) })] })] }) : null] });
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `feature-list-sort-option-${featureListId}`, children: "Sort Ordering" }) }), jsxRuntimeExports.jsx(TableCell$1, { variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureListSort, onChange: handleFeatureListSortChange, inputProps: {
+    id: `feature-list-sort-option-${featureListId}`
+  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsxRuntimeExports.jsx("option", { value: option, children: option }, option)) }) })] }), hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `feature-list-sort-key-${featureListId}`, children: "Sort Key" }) }), jsxRuntimeExports.jsx(TableCell$1, { variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
+    "aria-label": "Select the feature list sort key",
+    id: `feature-list-sort-key-${featureListId}`
+  }, children: hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("option", { value: "featureLabels", children: primaryColumnName }), jsxRuntimeExports.jsx("option", { value: "featureIndex", children: ALT_COLNAME })] }) : jsxRuntimeExports.jsx("option", { value: "featureIndex", children: primaryColumnName }) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `feature-list-show-alternative-ids-${featureListId}`, children: "Show Alternate IDs" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.tableCheckbox, checked: showFeatureTable, onChange: handleShowTableChange, name: "feature-list-show-table", color: "default", inputProps: {
+    "aria-label": "Show or hide alternative feature ids",
+    id: `feature-list-show-alternative-ids-${featureListId}`
+  } }) })] })] }) : null] });
 }
 function FeatureListSubscriber(props2) {
   const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null } = props2;
@@ -196638,7 +196770,7 @@ function FeatureListSubscriber(props2) {
   const primaryColumnName = `${capitalize$2(featureType)} ID`;
   return jsxRuntimeExports.jsx(TitleInfo, {
     title: title2,
-    info: `${commaNumber(numGenes)} ${plur(variablesLabel, numGenes)}`,
+    info: `${commaNumber(numGenes)} ${pluralize(variablesLabel, numGenes)}`,
     theme,
     // Virtual scroll is used but this allows for the same styling as a scroll component
     // even though this no longer uses the TitleInfo component's
@@ -196659,6 +196791,16 @@ const useSpanStyles = makeStyles(() => ({
     paddingRight: "2px"
   }
 }));
+const useChannelSliderStyles = makeStyles((theme) => ({
+  valueLabel: {
+    marginTop: "7px",
+    "& span": {
+      color: theme.palette.secondaryForeground,
+      backgroundColor: theme.palette.secondaryBackgroundDim
+      // Change color here
+    }
+  }
+}));
 function MuiSpan(props2) {
   const { children: children2 } = props2;
   const classes = useSpanStyles();
@@ -196746,7 +196888,7 @@ const useStyles$6 = makeStyles((theme) => ({
 }));
 const ColorPalette = ({ handleChange }) => {
   const classes = useStyles$6();
-  return jsxRuntimeExports.jsx("div", { className: classes.paletteContainer, "aria-label": "color-swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(IconButton$2, { className: classes.button, onClick: () => handleChange(color2), children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes.icon }) }, color2)) });
+  return jsxRuntimeExports.jsx("div", { className: classes.paletteContainer, "aria-label": "Color swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(IconButton$2, { className: classes.button, onClick: () => handleChange(color2), "aria-label": `Change color to ${color2}`, children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes.icon }) }, color2)) });
 };
 const useStyles$5 = makeStyles(() => ({
   menuButton: {
@@ -196770,7 +196912,7 @@ function ChannelOptions({ handlePropertyChange, handleChannelRemove, handleIQRUp
     setOpen(false);
     handleChannelRemove();
   };
-  return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes.menuButton, children: [jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, onClick: handleRemove, children: jsxRuntimeExports.jsx(MuiSpan, { children: "Remove" }) }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, onClick: handleIQRUpdate, children: jsxRuntimeExports.jsx(MuiSpan, { children: "Use IQR" }) }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, className: classes.colors, children: jsxRuntimeExports.jsx(ColorPalette, { handleChange: handleColorSelect }) })] });
+  return jsxRuntimeExports.jsxs(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes.menuButton, "aria-label": "Open channel options menu", children: [jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, onClick: handleRemove, "aria-label": "Click to remove channel", children: jsxRuntimeExports.jsx(MuiSpan, { children: "Remove" }) }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, onClick: handleIQRUpdate, "aria-label": "Click to use IQR for channel", children: jsxRuntimeExports.jsx(MuiSpan, { children: "Use IQR" }) }), jsxRuntimeExports.jsx(MenuItem$1, { dense: true, disableGutters: true, className: classes.colors, "aria-label": "Click to select color for channel", children: jsxRuntimeExports.jsx(ColorPalette, { handleChange: handleColorSelect }) })] });
 }
 function getDomains() {
   const domains = {};
@@ -196872,10 +197014,10 @@ function abbreviateNumber$1(value2) {
 }
 function ChannelSelectionDropdown({ handleChange, disabled, channelOptions, selectionIndex }) {
   const classes = useSelectStyles();
-  return jsxRuntimeExports.jsx(Select$1, { classes: { root: classes.selectRoot }, native: true, value: selectionIndex, onChange: (e3) => handleChange(Number(e3.target.value)), children: channelOptions.map((opt, i2) => jsxRuntimeExports.jsx("option", { disabled, value: i2, children: opt }, opt)) });
+  return jsxRuntimeExports.jsx(Select$1, { classes: { root: classes.selectRoot }, native: true, value: selectionIndex, onChange: (e3) => handleChange(Number(e3.target.value)), inputProps: { "aria-label": "Select a channel" }, children: channelOptions.map((opt, i2) => jsxRuntimeExports.jsx("option", { disabled, value: i2, children: opt }, opt)) });
 }
 function ChannelVisibilityCheckbox({ color: color2, checked, toggle: toggle2, disabled }) {
-  return jsxRuntimeExports.jsx(Checkbox$1, { onChange: toggle2, checked, disabled, style: { color: color2, "&$checked": { color: color2 } } });
+  return jsxRuntimeExports.jsx(Checkbox$1, { onChange: toggle2, checked, disabled, style: { color: color2, "&$checked": { color: color2 } }, inputProps: { "aria-label": "Toggle on or off a channel" } });
 }
 function abbreviateNumber(value2) {
   const maxLength = 5;
@@ -196904,8 +197046,12 @@ function ChannelSlider({ color: color2, slider = [0, 0], handleChange, domain: d
     sliderCopy[1] = max2;
   }
   const handleChangeDebounced = useCallback(debounce$5(handleChange, 3, { trailing: true }), [handleChange]);
+  const classes = useChannelSliderStyles();
   const step2 = max2 - min2 < 500 && dtype.startsWith("Float") ? (max2 - min2) / 500 : 1;
-  return jsxRuntimeExports.jsx(Slider$1, { value: slider, valueLabelFormat: abbreviateNumber, onChange: (e3, v) => handleChangeDebounced(v), valueLabelDisplay: "auto", getAriaLabel: () => `${color2}-${slider}`, min: min2, max: max2, step: step2, orientation: "horizontal", style: { color: color2, marginTop: "7px" }, disabled });
+  return jsxRuntimeExports.jsx(Slider$1, { classes: { valueLabel: classes.valueLabel }, value: slider, valueLabelFormat: abbreviateNumber, onChange: (e3, v) => handleChangeDebounced(v), valueLabelDisplay: "auto", getAriaLabel: (index2) => {
+    const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
+    return `${labelPrefix} for ${color2} colormap channel`;
+  }, getAriaValueText: () => `Current colormap values: ${color2}-${slider}`, min: min2, max: max2, step: step2, orientation: "horizontal", style: { color: color2, marginTop: "7px" }, disabled });
 }
 function RasterChannelController({ visibility = false, slider, color: color2, channels: channels2, channelId, domainType: newDomainType, dimName, theme, loader: loader2, colormapOn, channelOptions, handlePropertyChange, handleChannelRemove, handleIQRUpdate, selectionIndex, isLoading, use3d: newUse3d }) {
   const { dtype } = getSourceFromLoader(loader2);
@@ -196979,7 +197125,7 @@ function RasterChannelController({ visibility = false, slider, color: color2, ch
 }
 function BitmaskChannelController({ visibility = false, dimName, channelOptions, handlePropertyChange, handleChannelRemove, selectionIndex, disableOptions = false }) {
   const createSelection = (index2) => ({ [dimName]: index2 });
-  return jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(ChannelVisibilityCheckbox, { color: [220, 220, 220], checked: visibility, toggle: () => handlePropertyChange("visible", !visibility) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 9, children: jsxRuntimeExports.jsx(ChannelSelectionDropdown, { handleChange: (v) => handlePropertyChange("selection", createSelection(v)), selectionIndex, disableOptions, channelOptions }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(IconButton$2, { onClick: handleChannelRemove, style: { padding: "6px 6px 6px 0px" }, children: jsxRuntimeExports.jsx(RemoveCircleIcon, {}) }) })] });
+  return jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(ChannelVisibilityCheckbox, { color: [220, 220, 220], checked: visibility, toggle: () => handlePropertyChange("visible", !visibility) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 9, children: jsxRuntimeExports.jsx(ChannelSelectionDropdown, { handleChange: (v) => handlePropertyChange("selection", createSelection(v)), selectionIndex, disableOptions, channelOptions }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(IconButton$2, { onClick: handleChannelRemove, style: { padding: "6px 6px 6px 0px" }, "aria-label": "Remove channel", children: jsxRuntimeExports.jsx(RemoveCircleIcon, {}) }) })] });
 }
 function VectorLayerController(props2) {
   const { label: label2, layer, layerType, handleLayerChange } = props2;
@@ -197000,7 +197146,10 @@ function VectorLayerController(props2) {
   return jsxRuntimeExports.jsx(Grid$3, { item: true, style: { marginTop: "10px" }, children: jsxRuntimeExports.jsxs(Paper$1, { className: classes.layerControllerRoot, children: [jsxRuntimeExports.jsx(Typography$1, { style: {
     padding: "15px 8px 0px 8px",
     marginBottom: "-5px"
-  }, children: label2 }), jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: isOn, onChange: (e3, v) => handleCheckBoxChange(v) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 9, style: { paddingRight: "8px" }, children: jsxRuntimeExports.jsx(Slider$1, { value: slider, min: 0, max: 1, step: 1e-3, onChange: (e3, v) => handleSliderChange(v), style: { marginTop: "7px" }, orientation: "horizontal" }) })] })] }) });
+  }, children: label2 }), jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: isOn, onChange: (e3, v) => handleCheckBoxChange(v), inputProps: { "aria-label": "Show or hide vector layer" } }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 9, style: { paddingRight: "8px" }, children: jsxRuntimeExports.jsx(Slider$1, { value: slider, min: 0, max: 1, step: 1e-3, onChange: (e3, v) => handleSliderChange(v), style: { marginTop: "7px" }, orientation: "horizontal", getAriaLabel: (index2) => {
+    const labelPrefix = index2 === 0 ? "Low value slider" : "High value slider";
+    return `${labelPrefix} for ${label2} layer controller`;
+  } }) })] })] }) });
 }
 const DOMAIN_OPTIONS = ["Full", "Min/Max"];
 function VolumeDropdown({ loader: loaderWithMeta, handleMultiPropertyChange, resolution: currResolution, disable3d, setRasterLayerCallback, setAreAllChannelsLoading, setViewState, spatialHeight, spatialWidth, channels: channels2, use3d, modelMatrix: modelMatrix2 }) {
@@ -197068,7 +197217,7 @@ function VolumeDropdown({ loader: loaderWithMeta, handleMultiPropertyChange, res
   };
   const { labels: labels2, shape: shape2 } = Array.isArray(loader2) ? loader2[0] : loader2;
   const hasZStack = shape2[labels2.indexOf("z")] > 1;
-  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(Select$1, { native: true, value: currResolution, onChange: (e3) => handleChange(e3.target.value === "2D" ? e3.target.value : Number(e3.target.value)), classes: { root: classes.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "2D", children: "2D Visualization" }, "2D"), Array.from({ length: loader2.length }).fill(0).map((_, resolution) => {
+  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsxs(Select$1, { native: true, value: currResolution, onChange: (e3) => handleChange(e3.target.value === "2D" ? e3.target.value : Number(e3.target.value)), inputProps: { "aria-label": "Resolution selector" }, classes: { root: classes.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "2D", children: "2D Visualization" }, "2D"), Array.from({ length: loader2.length }).fill(0).map((_, resolution) => {
     if (loader2) {
       if (canLoadResolution(loader2, resolution)) {
         const { height: height2, width: width2, depthDownsampled, totalBytes } = getStatsForResolution(loader2, resolution);
@@ -197080,25 +197229,26 @@ function VolumeDropdown({ loader: loaderWithMeta, handleMultiPropertyChange, res
 }
 function ColormapSelect({ value: value2, inputId, handleChange }) {
   const classes = useSelectStyles();
-  return jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: (e3) => handleChange(e3.target.value === "" ? null : e3.target.value), value: value2, inputProps: { name: "colormap", id: inputId }, style: { width: "100%" }, classes: { root: classes.selectRoot }, children: [jsxRuntimeExports.jsx("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2))] });
+  return jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: (e3) => handleChange(e3.target.value === "" ? null : e3.target.value), value: value2, inputProps: { name: "colormap", id: inputId, "aria-label": "Colormap selector" }, style: { width: "100%" }, classes: { root: classes.selectRoot }, children: [jsxRuntimeExports.jsx("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2))] });
 }
-function TransparentColorCheckbox({ value: value2, handleChange }) {
+function TransparentColorCheckbox({ value: value2, inputId, handleChange }) {
   return jsxRuntimeExports.jsx(Checkbox$1, { style: { float: "left", padding: 0 }, color: "default", onChange: () => {
     if (value2) {
       handleChange(null);
     } else {
       handleChange([0, 0, 0]);
     }
-  }, checked: Boolean(value2) });
+  }, checked: Boolean(value2), id: inputId, inputProps: { "aria-label": "Enable or disable color transparency" } });
 }
-function OpacitySlider({ value: value2, handleChange }) {
-  return jsxRuntimeExports.jsx(Slider$1, { value: value2, onChange: (e3, v) => handleChange(v), valueLabelDisplay: "auto", getAriaLabel: () => "opacity slider", min: 0, max: 1, step: 0.01, orientation: "horizontal", style: { marginTop: "7px" } });
+function OpacitySlider({ value: value2, inputId, handleChange }) {
+  const classes = useChannelSliderStyles();
+  return jsxRuntimeExports.jsx(Slider$1, { classes: { valueLabel: classes.valueLabel }, value: value2, onChange: (e3, v) => handleChange(v), valueLabelDisplay: "auto", "aria-label": "Layer opacity slider", id: inputId, min: 0, max: 1, step: 0.01, orientation: "horizontal" });
 }
 function SliderDomainSelector({ value: value2, inputId, handleChange }) {
   const classes = useSelectStyles();
-  return jsxRuntimeExports.jsx(Select$1, { native: true, onChange: (e3) => handleChange(e3.target.value), value: value2, inputProps: { name: "domain-selector", id: inputId }, style: { width: "100%" }, classes: { root: classes.selectRoot }, children: DOMAIN_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) });
+  return jsxRuntimeExports.jsx(Select$1, { native: true, onChange: (e3) => handleChange(e3.target.value), value: value2, id: inputId, inputProps: { name: "domain-selector", "aria-label": "Domain type selector" }, style: { width: "100%" }, classes: { root: classes.selectRoot }, children: DOMAIN_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) });
 }
-function GlobalSelectionSlider({ field: field2, value: value2, handleChange, possibleValues }) {
+function GlobalSelectionSlider({ field: field2, value: value2, inputId, handleChange, possibleValues }) {
   const classes = useSelectionSliderStyles();
   return jsxRuntimeExports.jsx(Slider$1, {
     classes: { root: classes.selectionSliderRoot, markActive: classes.markActive },
@@ -197112,7 +197262,8 @@ function GlobalSelectionSlider({ field: field2, value: value2, handleChange, pos
       handleChange({ selection: { [field2]: newValue }, event: event2 });
     },
     valueLabelDisplay: "auto",
-    getAriaLabel: () => `${field2} slider`,
+    "aria-label": `${field2} slider`,
+    id: inputId,
     marks: possibleValues.map((val) => ({ value: val })),
     min: Number(possibleValues[0]),
     max: Number(possibleValues.slice(-1)),
@@ -197130,9 +197281,14 @@ function LayerOptions({ colormap, opacity: opacity2, handleColormapChange, handl
   const hasViewableResolutions = Boolean(Array.from({
     length: loader2.data.length
   }).filter((_, res) => canLoadResolution(loader2.data, res)).length);
-  return jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", style: { width: "100%" }, children: [hasZStack && !disable3d && hasViewableResolutions && jsxRuntimeExports.jsx(VolumeDropdown, { loader: loader2, handleSliderChange, handleDomainChange, channels: channels2, handleMultiPropertyChange, resolution, disable3d, setRasterLayerCallback, setAreAllChannelsLoading, setViewState, spatialHeight, spatialWidth, use3d, modelMatrix: modelMatrix2 }), hasDimensionsAndChannels && !use3d && globalControlLabels.map((field2) => shape2[labels2.indexOf(field2)] > 1 && jsxRuntimeExports.jsx(LayerOption, { name: field2, inputId: `${field2}-slider`, children: jsxRuntimeExports.jsx(GlobalSelectionSlider, { field: field2, value: globalLabelValues[field2], handleChange: handleGlobalChannelsSelectionChange, possibleValues: range$a(shape2[labels2.indexOf(field2)]) }) }, field2)), !disableChannelsIfRgbDetected ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [shouldShowColormap && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Colormap", inputId: "colormap-select", children: jsxRuntimeExports.jsx(ColormapSelect, { value: colormap || "", inputId: "colormap-select", handleChange: handleColormapChange }) }) }), shouldShowDomain && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Domain", inputId: "domain-selector", children: jsxRuntimeExports.jsx(SliderDomainSelector, { value: domainType || DEFAULT_RASTER_DOMAIN_TYPE, handleChange: (value2) => {
+  const globalSelectionSliderId = useId();
+  const colormapSelectId = useId();
+  const domainSelectorId = useId();
+  const opacitySliderId = useId();
+  const zeroTransparentId = useId();
+  return jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", style: { width: "100%" }, children: [hasZStack && !disable3d && hasViewableResolutions && jsxRuntimeExports.jsx(VolumeDropdown, { loader: loader2, handleSliderChange, handleDomainChange, channels: channels2, handleMultiPropertyChange, resolution, disable3d, setRasterLayerCallback, setAreAllChannelsLoading, setViewState, spatialHeight, spatialWidth, use3d, modelMatrix: modelMatrix2 }), hasDimensionsAndChannels && !use3d && globalControlLabels.map((field2) => shape2[labels2.indexOf(field2)] > 1 && jsxRuntimeExports.jsx(LayerOption, { name: field2, inputId: `${field2}-${globalSelectionSliderId}`, children: jsxRuntimeExports.jsx(GlobalSelectionSlider, { field: field2, inputId: `${field2}-${globalSelectionSliderId}`, value: globalLabelValues[field2], handleChange: handleGlobalChannelsSelectionChange, possibleValues: range$a(shape2[labels2.indexOf(field2)]) }) }, field2)), !disableChannelsIfRgbDetected ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [shouldShowColormap && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Colormap", inputId: colormapSelectId, children: jsxRuntimeExports.jsx(ColormapSelect, { value: colormap || "", inputId: colormapSelectId, handleChange: handleColormapChange }) }) }), shouldShowDomain && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Domain", inputId: domainSelectorId, children: jsxRuntimeExports.jsx(SliderDomainSelector, { value: domainType || DEFAULT_RASTER_DOMAIN_TYPE, inputId: domainSelectorId, handleChange: (value2) => {
     handleDomainChange(value2);
-  } }) }) })] }) : null, !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Opacity", inputId: "opacity-slider", children: jsxRuntimeExports.jsx(OpacitySlider, { value: opacity2, handleChange: handleOpacityChange }) }) }), shouldShowTransparentColor && !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Zero Transparent", inputId: "transparent-color-selector", children: jsxRuntimeExports.jsx(TransparentColorCheckbox, { value: transparentColor, handleChange: handleTransparentColorChange }) }) })] });
+  } }) }) })] }) : null, !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Opacity", inputId: opacitySliderId, children: jsxRuntimeExports.jsx(OpacitySlider, { value: opacity2, handleChange: handleOpacityChange, inputId: opacitySliderId }) }) }), shouldShowTransparentColor && !use3d && jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(LayerOption, { name: "Zero Transparent", inputId: zeroTransparentId, children: jsxRuntimeExports.jsx(TransparentColorCheckbox, { value: transparentColor, handleChange: handleTransparentColorChange, inputId: zeroTransparentId }) }) })] });
 }
 const useSlicerStyles = makeStyles((theme) => createStyles({
   enabled: {},
@@ -197172,8 +197328,8 @@ const Slicer = ({ xSlice, ySlice, zSlice, handleSlicerSetting, loader: loader2,
     ]
   ];
   const classes = useSlicerStyles();
-  const Slicers = sliceValuesAndSetSliceFunctions.map(([val, setVal, label2, [min2, max2]]) => jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginBottom: 0 }, children: [label2, ":"] }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 11, children: jsxRuntimeExports.jsx(Slider$1, { disabled: !use3d, className: !use3d ? classes.disabled : classes.enabled, value: val, onChange: (e3, v) => setVal(v), valueLabelDisplay: "auto", valueLabelFormat: (v) => abbreviateNumber$1(v), getAriaLabel: () => `${label2} slider`, min: min2, max: max2, step: 5e-3, orientation: "horizontal" }) })] }, label2));
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginTop: 16, marginBottom: 0 }, children: ["Clipping Planes:", " "] }), " ", Slicers] });
+  const Slicers = sliceValuesAndSetSliceFunctions.map(([val, setVal, label2, [min2, max2]]) => jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginBottom: 0 }, variant: "h2", children: [label2, ":"] }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 11, children: jsxRuntimeExports.jsx(Slider$1, { disabled: !use3d, className: !use3d ? classes.disabled : classes.enabled, value: val, onChange: (e3, v) => setVal(v), valueLabelDisplay: "auto", valueLabelFormat: (v) => abbreviateNumber$1(v), "aria-label": `Volume options ${label2} slider`, min: min2, max: max2, step: 5e-3, orientation: "horizontal" }) })] }, label2));
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginTop: 16, marginBottom: 0 }, variant: "h2", children: ["Clipping Planes:", " "] }), " ", Slicers] });
 };
 const renderingOptions = Object.values(RENDERING_MODES);
 function RenderingModeSelect({ handleRenderingModeChange, renderingMode, use3d }) {
@@ -197181,7 +197337,8 @@ function RenderingModeSelect({ handleRenderingModeChange, renderingMode, use3d }
   const options = !use3d ? [...renderingOptions, ""] : renderingOptions;
   return jsxRuntimeExports.jsxs(FormControl$1, { fullWidth: true, children: [jsxRuntimeExports.jsx(InputLabel$1, { htmlFor: "rendering-mode-select", children: "Rendering Mode" }), jsxRuntimeExports.jsx(Select$1, { native: true, onChange: (e3) => handleRenderingModeChange(e3.target.value), value: use3d ? renderingMode : "", inputProps: {
     name: "rendering-mode",
-    id: "rendering-mode-select"
+    id: "rendering-mode-select",
+    "aria-label": "Select rendering mode option"
   }, disabled: !use3d, classes: { root: classes.selectRoot }, children: options.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) })] });
 }
 const ReCenterButton = ({ setViewState, use3d, spatialHeight, spatialWidth, loader: loader2, modelMatrix: modelMatrix2 }) => jsxRuntimeExports.jsx(Grid$3, { item: true, xs: "auto", children: jsxRuntimeExports.jsx(Button$1, { onClick: () => {
@@ -197231,6 +197388,7 @@ function LayerController(props2) {
     channelRef.current = channels2;
     return void 0;
   }, [channels2]);
+  const layerControlsId = useId();
   const firstSelection = ((_a2 = channels2[0]) == null ? void 0 : _a2.selection) || {};
   const { data: data2, channels: channelOptions } = loader2;
   const [tab, setTab] = useState(0);
@@ -197458,12 +197616,12 @@ function LayerController(props2) {
   return jsxRuntimeExports.jsxs(Accordion$1, { className: controllerSectionClasses.layerControllerRoot, onChange: (e3, expanded) => {
     var _a3, _b, _c;
     return !disabled && setIsExpanded(expanded && ((_c = (_b = (_a3 = e3 == null ? void 0 : e3.target) == null ? void 0 : _a3.attributes) == null ? void 0 : _b.role) == null ? void 0 : _c.value) === "presentation");
-  }, TransitionProps: { enter: false }, expanded: !disabled && isExpanded, children: [jsxRuntimeExports.jsx(AccordionSummary$1, { classes: {
+  }, TransitionProps: { enter: false }, expanded: !disabled && isExpanded, id: `layer-controls-accordion-${layerControlsId}`, children: [jsxRuntimeExports.jsx(AccordionSummary$1, { classes: {
     root: accordionClasses.accordionSummaryRoot,
     content: accordionClasses.content,
     expanded: accordionClasses.expanded,
     expandIcon: accordionClasses.expandIcon
-  }, expandIcon: jsxRuntimeExports.jsx(ExpandMoreIcon, { role: "presentation" }), "aria-controls": `layer-${name2}-controls`, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", m: 1, justifyContent: "center", children: [jsxRuntimeExports.jsxs(Grid$3, { item: true, classes: { item: overflowEllipsisGridClasses.item }, children: [jsxRuntimeExports.jsx(Button$1, { onClick: (e3) => {
+  }, expandIcon: jsxRuntimeExports.jsx(ExpandMoreIcon, { role: "presentation" }), "aria-controls": `layer-${name2}-controls`, "aria-expanded": isExpanded, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", m: 1, justifyContent: "center", children: [jsxRuntimeExports.jsxs(Grid$3, { item: true, classes: { item: overflowEllipsisGridClasses.item }, children: [jsxRuntimeExports.jsx(Button$1, { "aria-label": "Toggle layer visibility", onClick: (e3) => {
     if (!disabled) {
       e3.stopPropagation();
       const nextVisible = typeof visible === "boolean" ? !visible : false;
@@ -197474,12 +197632,12 @@ function LayerController(props2) {
     marginBottom: 2,
     padding: 0,
     minWidth: 0
-  }, children: jsxRuntimeExports.jsx(Visibility, {}) }), name2] }), !disabled && !isExpanded && !use3d && jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", alignItems: "center", justifyContent: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(InputLabel$1, { htmlFor: `layer-${name2}-opacity-closed`, classes: { root: inputLabelClasses.inputLabelRoot }, children: "Opacity:" }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Slider$1, { id: `layer-${name2}-opacity-closed`, value: opacity2, onChange: (e3, v) => setOpacity(v), valueLabelDisplay: "auto", getAriaLabel: () => "opacity slider", min: 0, max: 1, step: 0.01, orientation: "horizontal" }) })] })] }) }), jsxRuntimeExports.jsxs(AccordionDetails$1, { classes: { root: accordionClasses.accordionDetailsRoot }, children: [useVolumeTabs ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Tabs$1, { value: tab, onChange: handleTabChange, "aria-label": "simple tabs example", style: { height: "24px", minHeight: "24px" }, children: [jsxRuntimeExports.jsx(Tab$1, { label: "Channels", style: {
+  }, children: jsxRuntimeExports.jsx(Visibility, {}) }), name2] }), !disabled && !isExpanded && !use3d && jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", alignItems: "center", justifyContent: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(InputLabel$1, { htmlFor: `layer-${name2}-opacity-closed`, classes: { root: inputLabelClasses.inputLabelRoot }, children: "Opacity:" }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Slider$1, { id: `layer-${name2}-opacity-closed`, value: opacity2, onChange: (e3, v) => setOpacity(v), valueLabelDisplay: "auto", "aria-label": `Adjust opacity for layer ${name2}`, min: 0, max: 1, step: 0.01, orientation: "horizontal" }) })] })] }) }), jsxRuntimeExports.jsxs(AccordionDetails$1, { classes: { root: accordionClasses.accordionDetailsRoot }, id: `layer-${name2}-controls`, children: [useVolumeTabs ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Tabs$1, { value: tab, onChange: handleTabChange, "aria-label": "Change the layer tab type", style: { height: "24px", minHeight: "24px" }, children: [jsxRuntimeExports.jsx(Tab$1, { label: "Channels", "aria-label": "Channels tab", style: {
     fontSize: ".75rem",
     bottom: 12,
     width: "50%",
     minWidth: "50%"
-  }, disableRipple: true }), jsxRuntimeExports.jsx(Tab$1, { label: "Volume", style: {
+  }, disableRipple: true }), jsxRuntimeExports.jsx(Tab$1, { label: "Volume", "aria-label": "Volume tab", style: {
     fontSize: ".75rem",
     bottom: 12,
     width: "50%",
@@ -197505,7 +197663,7 @@ function ImageAddButton({ imageOptions, handleImageAdd }) {
   };
   if (!imageOptions)
     return null;
-  return jsxRuntimeExports.jsx(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(ImageAddIcon, {}), buttonClassName: classes.addButton, placement: "bottom-start", children: imageOptions.map((imgData, i2) => jsxRuntimeExports.jsx(MenuItem$1, { dense: true, onClick: () => handleAdd(i2), children: jsxRuntimeExports.jsx("span", { children: imgData.name }) }, imgData.name)) });
+  return jsxRuntimeExports.jsx(PopperMenu, { open, setOpen, buttonIcon: jsxRuntimeExports.jsx(ImageAddIcon, {}), buttonClassName: classes.addButton, placement: "bottom-start", "aria-label": "Add image menu", children: imageOptions.map((imgData, i2) => jsxRuntimeExports.jsx(MenuItem$1, { dense: true, onClick: () => handleAdd(i2), children: jsxRuntimeExports.jsx("span", { children: imgData.name }) }, imgData.name)) });
 }
 const LayerControllerMemoized = React__default.memo(forwardRef((props2, ref2) => {
   const {
@@ -198297,7 +198455,7 @@ const HIGLASS_BUNDLE_VERSION = "1.11.13";
 const HIGLASS_CSS_URL = `https://unpkg.com/${HIGLASS_PKG_NAME}@${HIGLASS_BUNDLE_VERSION}/dist/hglib.css`;
 register({ dataFetcher: ZarrMultivecDataFetcher, config: ZarrMultivecDataFetcher.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./hglib-8b454259.js").then((n3) => n3.h);
+  const { HiGlassComponent } = await import("./hglib-27190533.js").then((n3) => n3.h);
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -198585,6 +198743,7 @@ function GenomicProfilesSubscriber(props2) {
 }
 function CellSetExpressionPlotOptions(props2) {
   const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions } = props2;
+  const cellSetExpressionPlotOptionsId = useId();
   const classes = usePlotOptionsStyles();
   const handleTransformChange = (event2) => {
     setFeatureValueTransform(event2.target.value === "" ? null : event2.target.value);
@@ -198600,11 +198759,11 @@ function CellSetExpressionPlotOptions(props2) {
       }
     }
   };
-  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Transform" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? "" : featureValueTransform, onChange: handleTransformChange, inputProps: {
-    id: "scatterplot-transform-select"
-  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }, "gating-transform-select") })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Transform Coefficient" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(TextField$1, { label: "Number", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`, children: "Transform" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureValueTransform === null ? "" : featureValueTransform, onChange: handleTransformChange, inputProps: {
+    id: `cellset-expression-transform-select-${cellSetExpressionPlotOptionsId}`
+  }, children: transformOptions.map((opt) => jsxRuntimeExports.jsx("option", { value: opt.value === null ? "" : opt.value, children: opt.name }, opt.name)) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}`, children: "Transform Coefficient" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(TextField$1, { label: "Transform Coefficient", type: "number", onChange: handleTransformCoefficientChange, value: featureValueTransformCoefficient, InputLabelProps: {
     shrink: true
-  } }) })] }, "transform-coefficient-option-row")] });
+  }, id: `cellset-expression-transform-coeff-${cellSetExpressionPlotOptionsId}` }) })] })] });
 }
 function accessor(fn, fields, name2) {
   fn.fields = fields || [];
@@ -199081,10 +199240,10 @@ function flush(range2, value2, threshold2, left2, right2, center2) {
   const r3 = Math.abs(b2 - value2);
   return l2 < r3 && l2 <= t4 ? left2 : r3 <= t4 ? right2 : center2;
 }
-function inherits(child2, parent, members) {
-  const proto = child2.prototype = Object.create(parent.prototype);
+function inherits(child, parent, members) {
+  const proto = child.prototype = Object.create(parent.prototype);
   Object.defineProperty(proto, "constructor", {
-    value: child2,
+    value: child,
     writable: true,
     enumerable: true,
     configurable: true
@@ -199231,8 +199390,8 @@ function toSet(_) {
     s2[_[i2]] = true;
   return s2;
 }
-function truncate$1(str, length2, align2, ellipsis2) {
-  const e3 = ellipsis2 != null ? ellipsis2 : "…", s2 = str + "", n3 = s2.length, l2 = Math.max(0, length2 - e3.length);
+function truncate$1(str, length2, align2, ellipsis) {
+  const e3 = ellipsis != null ? ellipsis : "…", s2 = str + "", n3 = s2.length, l2 = Math.max(0, length2 - e3.length);
   return n3 <= length2 ? s2 : align2 === "left" ? e3 + s2.slice(n3 - l2) : align2 === "center" ? s2.slice(0, Math.ceil(l2 / 2)) + e3 + s2.slice(n3 - ~~(l2 / 2)) : s2.slice(0, l2) + e3;
 }
 function visitArray(array2, filter2, visitor) {
@@ -208248,13 +208407,13 @@ function intersect$3(x02, y02, x12, y12, x2, y2, x3, y3) {
   return [x02 + t4 * x10, y02 + t4 * y10];
 }
 function cornerTangents(x02, y02, x12, y12, r1, rc, cw2) {
-  var x01 = x02 - x12, y01 = y02 - y12, lo = (cw2 ? rc : -rc) / sqrt$3(x01 * x01 + y01 * y01), ox2 = lo * y01, oy = -lo * x01, x11 = x02 + ox2, y11 = y02 + oy, x10 = x12 + ox2, y10 = y12 + oy, x002 = (x11 + x10) / 2, y002 = (y11 + y10) / 2, dx = x10 - x11, dy = y10 - y11, d2 = dx * dx + dy * dy, r3 = r1 - rc, D2 = x11 * y10 - x10 * y11, d = (dy < 0 ? -1 : 1) * sqrt$3(max$1(0, r3 * r3 * d2 - D2 * D2)), cx0 = (D2 * dy - dx * d) / d2, cy0 = (-D2 * dx - dy * d) / d2, cx1 = (D2 * dy + dx * d) / d2, cy1 = (-D2 * dx + dy * d) / d2, dx0 = cx0 - x002, dy0 = cy0 - y002, dx1 = cx1 - x002, dy1 = cy1 - y002;
+  var x01 = x02 - x12, y01 = y02 - y12, lo = (cw2 ? rc : -rc) / sqrt$3(x01 * x01 + y01 * y01), ox = lo * y01, oy = -lo * x01, x11 = x02 + ox, y11 = y02 + oy, x10 = x12 + ox, y10 = y12 + oy, x002 = (x11 + x10) / 2, y002 = (y11 + y10) / 2, dx = x10 - x11, dy = y10 - y11, d2 = dx * dx + dy * dy, r3 = r1 - rc, D2 = x11 * y10 - x10 * y11, d = (dy < 0 ? -1 : 1) * sqrt$3(max$1(0, r3 * r3 * d2 - D2 * D2)), cx0 = (D2 * dy - dx * d) / d2, cy0 = (-D2 * dx - dy * d) / d2, cx1 = (D2 * dy + dx * d) / d2, cy1 = (-D2 * dx + dy * d) / d2, dx0 = cx0 - x002, dy0 = cy0 - y002, dx1 = cx1 - x002, dy1 = cy1 - y002;
   if (dx0 * dx0 + dy0 * dy0 > dx1 * dx1 + dy1 * dy1)
     cx0 = cx1, cy0 = cy1;
   return {
     cx: cx0,
     cy: cy0,
-    x01: -ox2,
+    x01: -ox,
     y01: -oy,
     x11: cx0 * (r1 / r3 - 1),
     y11: cy0 * (r1 / r3 - 1)
@@ -208553,14 +208712,14 @@ function Symbol$1(type2, size2) {
 }
 function noop$3() {
 }
-function point$7(that2, x2, y2) {
-  that2._context.bezierCurveTo(
-    (2 * that2._x0 + that2._x1) / 3,
-    (2 * that2._y0 + that2._y1) / 3,
-    (that2._x0 + 2 * that2._x1) / 3,
-    (that2._y0 + 2 * that2._y1) / 3,
-    (that2._x0 + 4 * that2._x1 + x2) / 6,
-    (that2._y0 + 4 * that2._y1 + y2) / 6
+function point$7(that, x2, y2) {
+  that._context.bezierCurveTo(
+    (2 * that._x0 + that._x1) / 3,
+    (2 * that._y0 + that._y1) / 3,
+    (that._x0 + 2 * that._x1) / 3,
+    (that._y0 + 2 * that._y1) / 3,
+    (that._x0 + 4 * that._x1 + x2) / 6,
+    (that._y0 + 4 * that._y1 + y2) / 6
   );
 }
 function Basis(context2) {
@@ -208756,14 +208915,14 @@ const curveBundle = function custom(beta) {
   };
   return bundle2;
 }(0.85);
-function point$6(that2, x2, y2) {
-  that2._context.bezierCurveTo(
-    that2._x1 + that2._k * (that2._x2 - that2._x0),
-    that2._y1 + that2._k * (that2._y2 - that2._y0),
-    that2._x2 + that2._k * (that2._x1 - x2),
-    that2._y2 + that2._k * (that2._y1 - y2),
-    that2._x2,
-    that2._y2
+function point$6(that, x2, y2) {
+  that._context.bezierCurveTo(
+    that._x1 + that._k * (that._x2 - that._x0),
+    that._y1 + that._k * (that._y2 - that._y0),
+    that._x2 + that._k * (that._x1 - x2),
+    that._y2 + that._k * (that._y1 - y2),
+    that._x2,
+    that._y2
   );
 }
 function Cardinal(context2, tension) {
@@ -208939,19 +209098,19 @@ const curveCardinalOpen = function custom4(tension) {
   };
   return cardinal;
 }(0);
-function point$5(that2, x2, y2) {
-  var x12 = that2._x1, y12 = that2._y1, x22 = that2._x2, y22 = that2._y2;
-  if (that2._l01_a > epsilon$4) {
-    var a2 = 2 * that2._l01_2a + 3 * that2._l01_a * that2._l12_a + that2._l12_2a, n3 = 3 * that2._l01_a * (that2._l01_a + that2._l12_a);
-    x12 = (x12 * a2 - that2._x0 * that2._l12_2a + that2._x2 * that2._l01_2a) / n3;
-    y12 = (y12 * a2 - that2._y0 * that2._l12_2a + that2._y2 * that2._l01_2a) / n3;
+function point$5(that, x2, y2) {
+  var x12 = that._x1, y12 = that._y1, x22 = that._x2, y22 = that._y2;
+  if (that._l01_a > epsilon$4) {
+    var a2 = 2 * that._l01_2a + 3 * that._l01_a * that._l12_a + that._l12_2a, n3 = 3 * that._l01_a * (that._l01_a + that._l12_a);
+    x12 = (x12 * a2 - that._x0 * that._l12_2a + that._x2 * that._l01_2a) / n3;
+    y12 = (y12 * a2 - that._y0 * that._l12_2a + that._y2 * that._l01_2a) / n3;
   }
-  if (that2._l23_a > epsilon$4) {
-    var b2 = 2 * that2._l23_2a + 3 * that2._l23_a * that2._l12_a + that2._l12_2a, m2 = 3 * that2._l23_a * (that2._l23_a + that2._l12_a);
-    x22 = (x22 * b2 + that2._x1 * that2._l23_2a - x2 * that2._l12_2a) / m2;
-    y22 = (y22 * b2 + that2._y1 * that2._l23_2a - y2 * that2._l12_2a) / m2;
+  if (that._l23_a > epsilon$4) {
+    var b2 = 2 * that._l23_2a + 3 * that._l23_a * that._l12_a + that._l12_2a, m2 = 3 * that._l23_a * (that._l23_a + that._l12_a);
+    x22 = (x22 * b2 + that._x1 * that._l23_2a - x2 * that._l12_2a) / m2;
+    y22 = (y22 * b2 + that._y1 * that._l23_2a - y2 * that._l12_2a) / m2;
   }
-  that2._context.bezierCurveTo(x12, y12, x22, y22, that2._x2, that2._y2);
+  that._context.bezierCurveTo(x12, y12, x22, y22, that._x2, that._y2);
 }
 function CatmullRom(context2, alpha2) {
   this._context = context2;
@@ -209170,17 +209329,17 @@ function curveLinearClosed(context2) {
 function sign$1(x2) {
   return x2 < 0 ? -1 : 1;
 }
-function slope3(that2, x2, y2) {
-  var h0 = that2._x1 - that2._x0, h1 = x2 - that2._x1, s0 = (that2._y1 - that2._y0) / (h0 || h1 < 0 && -0), s1 = (y2 - that2._y1) / (h1 || h0 < 0 && -0), p = (s0 * h1 + s1 * h0) / (h0 + h1);
+function slope3(that, x2, y2) {
+  var h0 = that._x1 - that._x0, h1 = x2 - that._x1, s0 = (that._y1 - that._y0) / (h0 || h1 < 0 && -0), s1 = (y2 - that._y1) / (h1 || h0 < 0 && -0), p = (s0 * h1 + s1 * h0) / (h0 + h1);
   return (sign$1(s0) + sign$1(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;
 }
-function slope2(that2, t4) {
-  var h2 = that2._x1 - that2._x0;
-  return h2 ? (3 * (that2._y1 - that2._y0) / h2 - t4) / 2 : t4;
+function slope2(that, t4) {
+  var h2 = that._x1 - that._x0;
+  return h2 ? (3 * (that._y1 - that._y0) / h2 - t4) / 2 : t4;
 }
-function point$4(that2, t02, t12) {
-  var x02 = that2._x0, y02 = that2._y0, x12 = that2._x1, y12 = that2._y1, dx = (x12 - x02) / 3;
-  that2._context.bezierCurveTo(x02 + dx, y02 + dx * t02, x12 - dx, y12 - dx * t12, x12, y12);
+function point$4(that, t02, t12) {
+  var x02 = that._x0, y02 = that._y0, x12 = that._x1, y12 = that._y1, dx = (x12 - x02) / 3;
+  that._context.bezierCurveTo(x02 + dx, y02 + dx * t02, x12 - dx, y12 - dx * t12, x12, y12);
 }
 function MonotoneX(context2) {
   this._context = context2;
@@ -211836,7 +211995,7 @@ const HalfSqrt3 = Math.sqrt(3) / 2;
 var segmentCache = {};
 var bezierCache = {};
 var join$1 = [].join;
-function segments(x2, y2, rx, ry, large, sweep, rotateX2, ox2, oy) {
+function segments(x2, y2, rx, ry, large, sweep, rotateX2, ox, oy) {
   const key2 = join$1.call(arguments);
   if (segmentCache[key2]) {
     return segmentCache[key2];
@@ -211846,8 +212005,8 @@ function segments(x2, y2, rx, ry, large, sweep, rotateX2, ox2, oy) {
   const cos_th = Math.cos(th);
   rx = Math.abs(rx);
   ry = Math.abs(ry);
-  const px2 = cos_th * (ox2 - x2) * 0.5 + sin_th * (oy - y2) * 0.5;
-  const py2 = cos_th * (oy - y2) * 0.5 - sin_th * (ox2 - x2) * 0.5;
+  const px2 = cos_th * (ox - x2) * 0.5 + sin_th * (oy - y2) * 0.5;
+  const py2 = cos_th * (oy - y2) * 0.5 - sin_th * (ox - x2) * 0.5;
   let pl = px2 * px2 / (rx * rx) + py2 * py2 / (ry * ry);
   if (pl > 1) {
     pl = Math.sqrt(pl);
@@ -211858,8 +212017,8 @@ function segments(x2, y2, rx, ry, large, sweep, rotateX2, ox2, oy) {
   const a01 = sin_th / rx;
   const a10 = -sin_th / ry;
   const a11 = cos_th / ry;
-  const x02 = a00 * ox2 + a01 * oy;
-  const y02 = a10 * ox2 + a11 * oy;
+  const x02 = a00 * ox + a01 * oy;
+  const y02 = a10 * ox + a11 * oy;
   const x12 = a00 * x2 + a01 * y2;
   const y12 = a10 * x2 + a11 * y2;
   const d = (x12 - x02) * (x12 - x02) + (y12 - y02) * (y12 - y02);
@@ -213650,8 +213809,8 @@ function truncate(item, text2) {
   var limit = +item.limit, width2 = widthGetter(item);
   if (width2(text2) < limit)
     return text2;
-  var ellipsis2 = item.ellipsis || "…", rtl = item.dir === "rtl", lo = 0, hi = text2.length, mid;
-  limit -= width2(ellipsis2);
+  var ellipsis = item.ellipsis || "…", rtl = item.dir === "rtl", lo = 0, hi = text2.length, mid;
+  limit -= width2(ellipsis);
   if (rtl) {
     while (lo < hi) {
       mid = lo + hi >>> 1;
@@ -213660,7 +213819,7 @@ function truncate(item, text2) {
       else
         hi = mid;
     }
-    return ellipsis2 + text2.slice(lo);
+    return ellipsis + text2.slice(lo);
   } else {
     while (lo < hi) {
       mid = 1 + (lo + hi >>> 1);
@@ -213669,7 +213828,7 @@ function truncate(item, text2) {
       else
         hi = mid - 1;
     }
-    return text2.slice(0, lo) + ellipsis2;
+    return text2.slice(0, lo) + ellipsis;
   }
 }
 function fontFamily(item, quote) {
@@ -214848,8 +215007,8 @@ function _serialize(m2, node) {
   }
   if (node.hasChildNodes()) {
     const children2 = node.childNodes;
-    for (const child2 of children2) {
-      child2.nodeType === 3 ? m2.text(child2.nodeValue) : _serialize(m2, child2);
+    for (const child of children2) {
+      child.nodeType === 3 ? m2.text(child.nodeValue) : _serialize(m2, child);
     }
   }
   return m2.close();
@@ -216956,14 +217115,14 @@ inherits(LegendEntries$1, Transform2, {
     if (this.value != null && !_.modified()) {
       return pulse2.StopPropagation;
     }
-    var locale2 = pulse2.dataflow.locale(), out = pulse2.fork(pulse2.NO_SOURCE | pulse2.NO_FIELDS), items = this.value, type2 = _.type || SymbolLegend, scale2 = _.scale, limit = +_.limit, count2 = tickCount(scale2, _.count == null ? 5 : _.count, _.minstep), lskip = !!_.values || type2 === SymbolLegend, format2 = _.format || labelFormat(locale2, scale2, count2, type2, _.formatSpecifier, _.formatType, lskip), values3 = _.values || labelValues(scale2, count2), domain2, fraction2, size2, offset6, ellipsis2;
+    var locale2 = pulse2.dataflow.locale(), out = pulse2.fork(pulse2.NO_SOURCE | pulse2.NO_FIELDS), items = this.value, type2 = _.type || SymbolLegend, scale2 = _.scale, limit = +_.limit, count2 = tickCount(scale2, _.count == null ? 5 : _.count, _.minstep), lskip = !!_.values || type2 === SymbolLegend, format2 = _.format || labelFormat(locale2, scale2, count2, type2, _.formatSpecifier, _.formatType, lskip), values3 = _.values || labelValues(scale2, count2), domain2, fraction2, size2, offset6, ellipsis;
     if (items)
       out.rem = items;
     if (type2 === SymbolLegend) {
       if (limit && values3.length > limit) {
         pulse2.dataflow.warn("Symbol legend count exceeds limit, filtering items.");
         items = values3.slice(0, limit - 1);
-        ellipsis2 = true;
+        ellipsis = true;
       } else {
         items = values3;
       }
@@ -216982,14 +217141,14 @@ inherits(LegendEntries$1, Transform2, {
         offset: offset6,
         size: size2(value2, _)
       }));
-      if (ellipsis2) {
-        ellipsis2 = values3[items.length];
+      if (ellipsis) {
+        ellipsis = values3[items.length];
         items.push(ingest$1({
           index: items.length,
           label: "…".concat(values3.length - items.length, " entries"),
-          value: ellipsis2,
+          value: ellipsis,
           offset: offset6,
-          size: size2(ellipsis2, _)
+          size: size2(ellipsis, _)
         }));
       }
     } else if (type2 === GradientLegend) {
@@ -220086,10 +220245,10 @@ function number$2(_) {
 function density2D() {
   var x2 = (d) => d[0], y2 = (d) => d[1], weight = one$2, bandwidth2 = [-1, -1], dx = 960, dy = 500, k = 2;
   function density2(data2, counts) {
-    const rx = radius(bandwidth2[0], data2, x2) >> k, ry = radius(bandwidth2[1], data2, y2) >> k, ox2 = rx ? rx + 2 : 0, oy = ry ? ry + 2 : 0, n3 = 2 * ox2 + (dx >> k), m2 = 2 * oy + (dy >> k), values0 = new Float32Array(n3 * m2), values1 = new Float32Array(n3 * m2);
+    const rx = radius(bandwidth2[0], data2, x2) >> k, ry = radius(bandwidth2[1], data2, y2) >> k, ox = rx ? rx + 2 : 0, oy = ry ? ry + 2 : 0, n3 = 2 * ox + (dx >> k), m2 = 2 * oy + (dy >> k), values0 = new Float32Array(n3 * m2), values1 = new Float32Array(n3 * m2);
     let values3 = values0;
     data2.forEach((d) => {
-      const xi = ox2 + (+x2(d) >> k), yi = oy + (+y2(d) >> k);
+      const xi = ox + (+x2(d) >> k), yi = oy + (+y2(d) >> k);
       if (xi >= 0 && xi < n3 && yi >= 0 && yi < m2) {
         values0[xi + yi * n3] += +weight(d);
       }
@@ -220120,9 +220279,9 @@ function density2D() {
       scale: 1 << k,
       width: n3,
       height: m2,
-      x1: ox2,
+      x1: ox,
       y1: oy,
-      x2: ox2 + (dx >> k),
+      x2: ox + (dx >> k),
       y2: oy + (dy >> k)
     };
   }
@@ -220837,9 +220996,9 @@ function tree_add(d) {
 function add$1(tree2, x2, y2, d) {
   if (isNaN(x2) || isNaN(y2))
     return tree2;
-  var parent, node = tree2._root, leaf2 = { data: d }, x02 = tree2._x0, y02 = tree2._y0, x12 = tree2._x1, y12 = tree2._y1, xm, ym, xp, yp, right2, bottom2, i2, j;
+  var parent, node = tree2._root, leaf = { data: d }, x02 = tree2._x0, y02 = tree2._y0, x12 = tree2._x1, y12 = tree2._y1, xm, ym, xp, yp, right2, bottom2, i2, j;
   if (!node)
-    return tree2._root = leaf2, tree2;
+    return tree2._root = leaf, tree2;
   while (node.length) {
     if (right2 = x2 >= (xm = (x02 + x12) / 2))
       x02 = xm;
@@ -220850,12 +221009,12 @@ function add$1(tree2, x2, y2, d) {
     else
       y12 = ym;
     if (parent = node, !(node = node[i2 = bottom2 << 1 | right2]))
-      return parent[i2] = leaf2, tree2;
+      return parent[i2] = leaf, tree2;
   }
   xp = +tree2._x.call(null, node.data);
   yp = +tree2._y.call(null, node.data);
   if (x2 === xp && y2 === yp)
-    return leaf2.next = node, parent ? parent[i2] = leaf2 : tree2._root = leaf2, tree2;
+    return leaf.next = node, parent ? parent[i2] = leaf : tree2._root = leaf, tree2;
   do {
     parent = parent ? parent[i2] = new Array(4) : tree2._root = new Array(4);
     if (right2 = x2 >= (xm = (x02 + x12) / 2))
@@ -220867,7 +221026,7 @@ function add$1(tree2, x2, y2, d) {
     else
       y12 = ym;
   } while ((i2 = bottom2 << 1 | right2) === (j = (yp >= ym) << 1 | xp >= xm));
-  return parent[j] = node, parent[i2] = leaf2, tree2;
+  return parent[j] = node, parent[i2] = leaf, tree2;
 }
 function addAll(data2) {
   var d, i2, n3 = data2.length, x2, y2, xz = new Array(n3), yz = new Array(n3), x02 = Infinity, y02 = Infinity, x12 = -Infinity, y12 = -Infinity;
@@ -221048,20 +221207,20 @@ function tree_size() {
   return size2;
 }
 function tree_visit(callback) {
-  var quads = [], q, node = this._root, child2, x02, y02, x12, y12;
+  var quads = [], q, node = this._root, child, x02, y02, x12, y12;
   if (node)
     quads.push(new Quad(node, this._x0, this._y0, this._x1, this._y1));
   while (q = quads.pop()) {
     if (!callback(node = q.node, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1) && node.length) {
       var xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
-      if (child2 = node[3])
-        quads.push(new Quad(child2, xm, ym, x12, y12));
-      if (child2 = node[2])
-        quads.push(new Quad(child2, x02, ym, xm, y12));
-      if (child2 = node[1])
-        quads.push(new Quad(child2, xm, y02, x12, ym));
-      if (child2 = node[0])
-        quads.push(new Quad(child2, x02, y02, xm, ym));
+      if (child = node[3])
+        quads.push(new Quad(child, xm, ym, x12, y12));
+      if (child = node[2])
+        quads.push(new Quad(child, x02, ym, xm, y12));
+      if (child = node[1])
+        quads.push(new Quad(child, xm, y02, x12, ym));
+      if (child = node[0])
+        quads.push(new Quad(child, x02, y02, xm, ym));
     }
   }
   return this;
@@ -221073,15 +221232,15 @@ function tree_visitAfter(callback) {
   while (q = quads.pop()) {
     var node = q.node;
     if (node.length) {
-      var child2, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1, xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
-      if (child2 = node[0])
-        quads.push(new Quad(child2, x02, y02, xm, ym));
-      if (child2 = node[1])
-        quads.push(new Quad(child2, xm, y02, x12, ym));
-      if (child2 = node[2])
-        quads.push(new Quad(child2, x02, ym, xm, y12));
-      if (child2 = node[3])
-        quads.push(new Quad(child2, xm, ym, x12, y12));
+      var child, x02 = q.x0, y02 = q.y0, x12 = q.x1, y12 = q.y1, xm = (x02 + x12) / 2, ym = (y02 + y12) / 2;
+      if (child = node[0])
+        quads.push(new Quad(child, x02, y02, xm, ym));
+      if (child = node[1])
+        quads.push(new Quad(child, xm, y02, x12, ym));
+      if (child = node[2])
+        quads.push(new Quad(child, x02, ym, xm, y12));
+      if (child = node[3])
+        quads.push(new Quad(child, xm, ym, x12, y12));
     }
     next3.push(q);
   }
@@ -221115,15 +221274,15 @@ function Quadtree(x2, y2, x02, y02, x12, y12) {
   this._y1 = y12;
   this._root = void 0;
 }
-function leaf_copy(leaf2) {
-  var copy2 = { data: leaf2.data }, next3 = copy2;
-  while (leaf2 = leaf2.next)
-    next3 = next3.next = { data: leaf2.data };
+function leaf_copy(leaf) {
+  var copy2 = { data: leaf.data }, next3 = copy2;
+  while (leaf = leaf.next)
+    next3 = next3.next = { data: leaf.data };
   return copy2;
 }
 var treeProto = quadtree.prototype = Quadtree.prototype;
 treeProto.copy = function() {
-  var copy2 = new Quadtree(this._x, this._y, this._x0, this._y0, this._x1, this._y1), node = this._root, nodes, child2;
+  var copy2 = new Quadtree(this._x, this._y, this._x0, this._y0, this._x1, this._y1), node = this._root, nodes, child;
   if (!node)
     return copy2;
   if (!node.length)
@@ -221131,11 +221290,11 @@ treeProto.copy = function() {
   nodes = [{ source: node, target: copy2._root = new Array(4) }];
   while (node = nodes.pop()) {
     for (var i2 = 0; i2 < 4; ++i2) {
-      if (child2 = node.source[i2]) {
-        if (child2.length)
-          nodes.push({ source: child2, target: node.target[i2] = new Array(4) });
+      if (child = node.source[i2]) {
+        if (child.length)
+          nodes.push({ source: child, target: node.target[i2] = new Array(4) });
         else
-          node.target[i2] = leaf_copy(child2);
+          node.target[i2] = leaf_copy(child);
       }
     }
   }
@@ -221377,20 +221536,20 @@ Dispatch.prototype = dispatch.prototype = {
       copy2[t4] = _[t4].slice();
     return new Dispatch(copy2);
   },
-  call: function(type2, that2) {
+  call: function(type2, that) {
     if ((n3 = arguments.length - 2) > 0)
       for (var args = new Array(n3), i2 = 0, n3, t4; i2 < n3; ++i2)
         args[i2] = arguments[i2 + 2];
     if (!this._.hasOwnProperty(type2))
       throw new Error("unknown type: " + type2);
     for (t4 = this._[type2], i2 = 0, n3 = t4.length; i2 < n3; ++i2)
-      t4[i2].value.apply(that2, args);
+      t4[i2].value.apply(that, args);
   },
-  apply: function(type2, that2, args) {
+  apply: function(type2, that, args) {
     if (!this._.hasOwnProperty(type2))
       throw new Error("unknown type: " + type2);
     for (var t4 = this._[type2], i2 = 0, n3 = t4.length; i2 < n3; ++i2)
-      t4[i2].value.apply(that2, args);
+      t4[i2].value.apply(that, args);
   }
 };
 function get$1(type2, name2) {
@@ -222141,17 +222300,17 @@ function count(node) {
 function node_count() {
   return this.eachAfter(count);
 }
-function node_each(callback, that2) {
+function node_each(callback, that) {
   let index2 = -1;
   for (const node of this) {
-    callback.call(that2, node, ++index2, this);
+    callback.call(that, node, ++index2, this);
   }
   return this;
 }
-function node_eachBefore(callback, that2) {
+function node_eachBefore(callback, that) {
   var node = this, nodes = [node], children2, i2, index2 = -1;
   while (node = nodes.pop()) {
-    callback.call(that2, node, ++index2, this);
+    callback.call(that, node, ++index2, this);
     if (children2 = node.children) {
       for (i2 = children2.length - 1; i2 >= 0; --i2) {
         nodes.push(children2[i2]);
@@ -222160,7 +222319,7 @@ function node_eachBefore(callback, that2) {
   }
   return this;
 }
-function node_eachAfter(callback, that2) {
+function node_eachAfter(callback, that) {
   var node = this, nodes = [node], next3 = [], children2, i2, n3, index2 = -1;
   while (node = nodes.pop()) {
     next3.push(node);
@@ -222171,14 +222330,14 @@ function node_eachAfter(callback, that2) {
     }
   }
   while (node = next3.pop()) {
-    callback.call(that2, node, ++index2, this);
+    callback.call(that, node, ++index2, this);
   }
   return this;
 }
-function node_find(callback, that2) {
+function node_find(callback, that) {
   let index2 = -1;
   for (const node of this) {
-    if (callback.call(that2, node, ++index2, this)) {
+    if (callback.call(that, node, ++index2, this)) {
       return node;
     }
   }
@@ -222274,14 +222433,14 @@ function hierarchy(data2, children2) {
   } else if (children2 === void 0) {
     children2 = objectChildren;
   }
-  var root2 = new Node$3(data2), node, nodes = [root2], child2, childs, i2, n3;
+  var root2 = new Node$3(data2), node, nodes = [root2], child, childs, i2, n3;
   while (node = nodes.pop()) {
     if ((childs = children2(node.data)) && (n3 = (childs = Array.from(childs)).length)) {
       node.children = childs;
       for (i2 = n3 - 1; i2 >= 0; --i2) {
-        nodes.push(child2 = childs[i2] = new Node$3(childs[i2]));
-        child2.parent = node;
-        child2.depth = node.depth + 1;
+        nodes.push(child = childs[i2] = new Node$3(childs[i2]));
+        child.parent = node;
+        child.depth = node.depth + 1;
       }
     }
   }
@@ -222799,13 +222958,13 @@ function TreeNode2(node, i2) {
 }
 TreeNode2.prototype = Object.create(Node$3.prototype);
 function treeRoot(root2) {
-  var tree2 = new TreeNode2(root2, 0), node, nodes = [tree2], child2, children2, i2, n3;
+  var tree2 = new TreeNode2(root2, 0), node, nodes = [tree2], child, children2, i2, n3;
   while (node = nodes.pop()) {
     if (children2 = node._.children) {
       node.children = new Array(n3 = children2.length);
       for (i2 = n3 - 1; i2 >= 0; --i2) {
-        nodes.push(child2 = node.children[i2] = new TreeNode2(children2[i2], i2));
-        child2.parent = node;
+        nodes.push(child = node.children[i2] = new TreeNode2(children2[i2], i2));
+        child.parent = node;
       }
     }
   }
@@ -225403,8 +225562,8 @@ function jitter(x2, y2, r3) {
   return [x2 + Math.sin(x2 + y2) * r3, y2 + Math.cos(x2 - y2) * r3];
 }
 class Delaunay {
-  static from(points2, fx = pointX, fy = pointY, that2) {
-    return new Delaunay("length" in points2 ? flatArray(points2, fx, fy, that2) : Float64Array.from(flatIterable(points2, fx, fy, that2)));
+  static from(points2, fx = pointX, fy = pointY, that) {
+    return new Delaunay("length" in points2 ? flatArray(points2, fx, fy, that) : Float64Array.from(flatIterable(points2, fx, fy, that)));
   }
   constructor(points2) {
     this._delaunator = new Delaunator(points2);
@@ -225594,21 +225753,21 @@ class Delaunay {
     return polygon2.value();
   }
 }
-function flatArray(points2, fx, fy, that2) {
+function flatArray(points2, fx, fy, that) {
   const n3 = points2.length;
   const array2 = new Float64Array(n3 * 2);
   for (let i2 = 0; i2 < n3; ++i2) {
     const p = points2[i2];
-    array2[i2 * 2] = fx.call(that2, p, i2, points2);
-    array2[i2 * 2 + 1] = fy.call(that2, p, i2, points2);
+    array2[i2 * 2] = fx.call(that, p, i2, points2);
+    array2[i2 * 2 + 1] = fy.call(that, p, i2, points2);
   }
   return array2;
 }
-function* flatIterable(points2, fx, fy, that2) {
+function* flatIterable(points2, fx, fy, that) {
   let i2 = 0;
   for (const p of points2) {
-    yield fx.call(that2, p, i2, points2);
-    yield fy.call(that2, p, i2, points2);
+    yield fx.call(that, p, i2, points2);
+    yield fy.call(that, p, i2, points2);
     ++i2;
   }
 }
@@ -234405,17 +234564,17 @@ var clone2 = { exports: {} };
           return null;
         if (depth2 === 0)
           return parent2;
-        var child2;
+        var child;
         var proto;
         if (typeof parent2 != "object") {
           return parent2;
         }
         if (_instanceof(parent2, nativeMap)) {
-          child2 = new nativeMap();
+          child = new nativeMap();
         } else if (_instanceof(parent2, nativeSet)) {
-          child2 = new nativeSet();
+          child = new nativeSet();
         } else if (_instanceof(parent2, nativePromise)) {
-          child2 = new nativePromise(function(resolve2, reject) {
+          child = new nativePromise(function(resolve2, reject) {
             parent2.then(function(value2) {
               resolve2(_clone(value2, depth2 - 1));
             }, function(err2) {
@@ -234423,29 +234582,29 @@ var clone2 = { exports: {} };
             });
           });
         } else if (clone4.__isArray(parent2)) {
-          child2 = [];
+          child = [];
         } else if (clone4.__isRegExp(parent2)) {
-          child2 = new RegExp(parent2.source, __getRegExpFlags(parent2));
+          child = new RegExp(parent2.source, __getRegExpFlags(parent2));
           if (parent2.lastIndex)
-            child2.lastIndex = parent2.lastIndex;
+            child.lastIndex = parent2.lastIndex;
         } else if (clone4.__isDate(parent2)) {
-          child2 = new Date(parent2.getTime());
+          child = new Date(parent2.getTime());
         } else if (useBuffer2 && Buffer.isBuffer(parent2)) {
           if (Buffer.allocUnsafe) {
-            child2 = Buffer.allocUnsafe(parent2.length);
+            child = Buffer.allocUnsafe(parent2.length);
           } else {
-            child2 = new Buffer(parent2.length);
+            child = new Buffer(parent2.length);
           }
-          parent2.copy(child2);
-          return child2;
+          parent2.copy(child);
+          return child;
         } else if (_instanceof(parent2, Error)) {
-          child2 = Object.create(parent2);
+          child = Object.create(parent2);
         } else {
           if (typeof prototype2 == "undefined") {
             proto = Object.getPrototypeOf(parent2);
-            child2 = Object.create(proto);
+            child = Object.create(proto);
           } else {
-            child2 = Object.create(prototype2);
+            child = Object.create(prototype2);
             proto = prototype2;
           }
         }
@@ -234455,19 +234614,19 @@ var clone2 = { exports: {} };
             return allChildren[index2];
           }
           allParents.push(parent2);
-          allChildren.push(child2);
+          allChildren.push(child);
         }
         if (_instanceof(parent2, nativeMap)) {
           parent2.forEach(function(value2, key2) {
             var keyChild = _clone(key2, depth2 - 1);
             var valueChild = _clone(value2, depth2 - 1);
-            child2.set(keyChild, valueChild);
+            child.set(keyChild, valueChild);
           });
         }
         if (_instanceof(parent2, nativeSet)) {
           parent2.forEach(function(value2) {
             var entryChild = _clone(value2, depth2 - 1);
-            child2.add(entryChild);
+            child.add(entryChild);
           });
         }
         for (var i2 in parent2) {
@@ -234478,7 +234637,7 @@ var clone2 = { exports: {} };
           if (attrs && attrs.set == null) {
             continue;
           }
-          child2[i2] = _clone(parent2[i2], depth2 - 1);
+          child[i2] = _clone(parent2[i2], depth2 - 1);
         }
         if (Object.getOwnPropertySymbols) {
           var symbols2 = Object.getOwnPropertySymbols(parent2);
@@ -234488,9 +234647,9 @@ var clone2 = { exports: {} };
             if (descriptor2 && !descriptor2.enumerable && !includeNonEnumerable) {
               continue;
             }
-            child2[symbol2] = _clone(parent2[symbol2], depth2 - 1);
+            child[symbol2] = _clone(parent2[symbol2], depth2 - 1);
             if (!descriptor2.enumerable) {
-              Object.defineProperty(child2, symbol2, {
+              Object.defineProperty(child, symbol2, {
                 enumerable: false
               });
             }
@@ -234504,13 +234663,13 @@ var clone2 = { exports: {} };
             if (descriptor2 && descriptor2.enumerable) {
               continue;
             }
-            child2[propertyName] = _clone(parent2[propertyName], depth2 - 1);
-            Object.defineProperty(child2, propertyName, {
+            child[propertyName] = _clone(parent2[propertyName], depth2 - 1);
+            Object.defineProperty(child, propertyName, {
               enumerable: false
             });
           }
         }
-        return child2;
+        return child;
       }
       return _clone(parent, depth);
     }
@@ -240401,9 +240560,9 @@ class CoreNormalizer extends SpecMapper {
       return Object.assign(Object.assign({}, rest), { layer: layer.map((layerValue) => {
         const childRepeater = Object.assign(Object.assign({}, repeater), { layer: layerValue });
         const childName = `${(childSpec.name || "") + repeaterPrefix}child__layer_${varName(layerValue)}`;
-        const child2 = this.mapLayerOrUnit(childSpec, Object.assign(Object.assign({}, params2), { repeater: childRepeater, repeaterPrefix: childName }));
-        child2.name = childName;
-        return child2;
+        const child = this.mapLayerOrUnit(childSpec, Object.assign(Object.assign({}, params2), { repeater: childRepeater, repeaterPrefix: childName }));
+        child.name = childName;
+        return child;
       }) });
     }
   }
@@ -240429,9 +240588,9 @@ class CoreNormalizer extends SpecMapper {
             layer: repeater.layer
           };
           const childName = (childSpec.name || "") + repeaterPrefix + "child__" + (isArray2(repeat2) ? `${varName(repeatValue)}` : (repeat2.row ? `row_${varName(rowValue)}` : "") + (repeat2.column ? `column_${varName(columnValue)}` : ""));
-          const child2 = this.map(childSpec, Object.assign(Object.assign({}, params2), { repeater: childRepeater, repeaterPrefix: childName }));
-          child2.name = childName;
-          concat2.push(omit(child2, ["data"]));
+          const child = this.map(childSpec, Object.assign(Object.assign({}, params2), { repeater: childRepeater, repeaterPrefix: childName }));
+          child.name = childName;
+          concat2.push(omit(child, ["data"]));
         }
       }
     }
@@ -241136,9 +241295,9 @@ function assembleUnitSelectionMarks(model, marks) {
   return marks;
 }
 function assembleLayerSelectionMarks(model, marks) {
-  for (const child2 of model.children) {
-    if (isUnitModel(child2)) {
-      marks = assembleUnitSelectionMarks(child2, marks);
+  for (const child of model.children) {
+    if (isUnitModel(child)) {
+      marks = assembleUnitSelectionMarks(child, marks);
     }
   }
   return marks;
@@ -241189,15 +241348,15 @@ class DataFlowNode {
   numChildren() {
     return this._children.length;
   }
-  addChild(child2, loc) {
-    if (this._children.includes(child2)) {
+  addChild(child, loc) {
+    if (this._children.includes(child)) {
       warn(ADD_SAME_CHILD_TWICE);
       return;
     }
     if (loc !== void 0) {
-      this._children.splice(loc, 0, child2);
+      this._children.splice(loc, 0, child);
     } else {
-      this._children.push(child2);
+      this._children.push(child);
     }
   }
   removeChild(oldChild) {
@@ -241210,9 +241369,9 @@ class DataFlowNode {
    */
   remove() {
     let loc = this._parent.removeChild(this);
-    for (const child2 of this._children) {
-      child2._parent = this._parent;
-      this._parent.addChild(child2, loc++);
+    for (const child of this._children) {
+      child._parent = this._parent;
+      this._parent.addChild(child, loc++);
     }
   }
   /**
@@ -241227,8 +241386,8 @@ class DataFlowNode {
   swapWithParent() {
     const parent = this._parent;
     const newParent = parent.parent;
-    for (const child2 of this._children) {
-      child2.parent = parent;
+    for (const child of this._children) {
+      child.parent = parent;
     }
     this._children = [];
     parent.removeChild(this);
@@ -241308,15 +241467,15 @@ var __rest$e = function(s2, e3) {
   return t4;
 };
 class TimeUnitNode extends DataFlowNode {
-  constructor(parent, formula2) {
+  constructor(parent, formula) {
     super(parent);
-    this.formula = formula2;
+    this.formula = formula;
   }
   clone() {
     return new TimeUnitNode(null, duplicate(this.formula));
   }
   static makeFromEncoding(parent, model) {
-    const formula2 = model.reduceFieldDef((timeUnitComponent, fieldDef) => {
+    const formula = model.reduceFieldDef((timeUnitComponent, fieldDef) => {
       const { field: field2, timeUnit } = fieldDef;
       if (timeUnit) {
         const as = vgField(fieldDef, { forAs: true });
@@ -241332,10 +241491,10 @@ class TimeUnitNode extends DataFlowNode {
       }
       return timeUnitComponent;
     }, {});
-    if (isEmpty(formula2)) {
+    if (isEmpty(formula)) {
       return null;
     }
-    return new TimeUnitNode(parent, formula2);
+    return new TimeUnitNode(parent, formula);
   }
   static makeFromTransform(parent, t4) {
     const _a2 = Object.assign({}, t4), { timeUnit } = _a2, other = __rest$e(_a2, ["timeUnit"]);
@@ -241356,9 +241515,9 @@ class TimeUnitNode extends DataFlowNode {
         this.formula[key2] = other.formula[key2];
       }
     }
-    for (const child2 of other.children) {
-      other.removeChild(child2);
-      child2.parent = this;
+    for (const child of other.children) {
+      other.removeChild(child);
+      child.parent = this;
     }
     other.remove();
   }
@@ -243142,12 +243301,12 @@ function parseSelectionPredicate(model, pred, dfnode, datum2 = "datum") {
     return `!!${vname}`;
   }
   if (selCmpt.project.timeUnit) {
-    const child2 = dfnode !== null && dfnode !== void 0 ? dfnode : model.component.data.raw;
+    const child = dfnode !== null && dfnode !== void 0 ? dfnode : model.component.data.raw;
     const tunode = selCmpt.project.timeUnit.clone();
-    if (child2.parent) {
-      tunode.insertAsParentOf(child2);
+    if (child.parent) {
+      tunode.insertAsParentOf(child);
     } else {
-      child2.parent = tunode;
+      child.parent = tunode;
     }
   }
   const fn = selCmpt.project.hasSelectionId ? "vlSelectionIdTest(" : "vlSelectionTest(";
@@ -244387,12 +244546,12 @@ function parseLegendForChannel(model, channel) {
 }
 function parseNonUnitLegend(model) {
   const { legends, resolve: resolve2 } = model.component;
-  for (const child2 of model.children) {
-    parseLegend(child2);
-    for (const channel of keys$1(child2.component.legends)) {
+  for (const child of model.children) {
+    parseLegend(child);
+    for (const channel of keys$1(child.component.legends)) {
       resolve2.legend[channel] = parseGuideResolve(model.component.resolve, channel);
       if (resolve2.legend[channel] === "shared") {
-        legends[channel] = mergeLegendComponent(legends[channel], child2.component.legends[channel]);
+        legends[channel] = mergeLegendComponent(legends[channel], child.component.legends[channel]);
         if (!legends[channel]) {
           resolve2.legend[channel] = "independent";
           delete legends[channel];
@@ -244401,12 +244560,12 @@ function parseNonUnitLegend(model) {
     }
   }
   for (const channel of keys$1(legends)) {
-    for (const child2 of model.children) {
-      if (!child2.component.legends[channel]) {
+    for (const child of model.children) {
+      if (!child.component.legends[channel]) {
         continue;
       }
       if (resolve2.legend[channel] === "shared") {
-        delete child2.component.legends[channel];
+        delete child.component.legends[channel];
       }
     }
   }
@@ -244541,8 +244700,8 @@ function assembleProjections(model) {
   }
 }
 function assembleProjectionsForModelAndChildren(model) {
-  return model.children.reduce((projections2, child2) => {
-    return projections2.concat(child2.assembleProjections());
+  return model.children.reduce((projections2, child) => {
+    return projections2.concat(child.assembleProjections());
   }, assembleProjectionForModel(model));
 }
 function assembleProjectionForModel(model) {
@@ -244689,11 +244848,11 @@ function parseNonUnitProjections(model) {
     return void 0;
   }
   let nonUnitProjection;
-  for (const child2 of model.children) {
-    parseProjection(child2);
+  for (const child of model.children) {
+    parseProjection(child);
   }
-  const mergable = every(model.children, (child2) => {
-    const projection2 = child2.component.projection;
+  const mergable = every(model.children, (child) => {
+    const projection2 = child.component.projection;
     if (!projection2) {
       return true;
     } else if (!nonUnitProjection) {
@@ -244710,13 +244869,13 @@ function parseNonUnitProjections(model) {
   if (nonUnitProjection && mergable) {
     const name2 = model.projectionName(true);
     const modelProjection = new ProjectionComponent(name2, nonUnitProjection.specifiedProjection, nonUnitProjection.size, duplicate(nonUnitProjection.data));
-    for (const child2 of model.children) {
-      const projection2 = child2.component.projection;
+    for (const child of model.children) {
+      const projection2 = child.component.projection;
       if (projection2) {
         if (projection2.isFit) {
-          modelProjection.data.push(...child2.component.projection.data);
+          modelProjection.data.push(...child.component.projection.data);
         }
-        child2.renameProjection(projection2.get("name"), name2);
+        child.renameProjection(projection2.get("name"), name2);
         projection2.merged = true;
       }
     }
@@ -244830,9 +244989,9 @@ class BinNode extends DataFlowNode {
         this.bins[key2] = other.bins[key2];
       }
     }
-    for (const child2 of other.children) {
-      other.removeChild(child2);
-      child2.parent = this;
+    for (const child of other.children) {
+      other.removeChild(child);
+      child.parent = this;
     }
     other.remove();
   }
@@ -245461,13 +245620,13 @@ class ParseNode extends DataFlowNode {
       if (!expr2) {
         return null;
       }
-      const formula2 = {
+      const formula = {
         type: "formula",
         expr: expr2,
         as: removePathFromField(field2)
         // Vega output is always flattened
       };
-      return formula2;
+      return formula;
     }).filter((t4) => t4 !== null);
   }
 }
@@ -245640,8 +245799,8 @@ class BottomUpOptimizer extends Optimizer {
    */
   getNodeDepths(node, depth, depths) {
     depths.set(node, depth);
-    for (const child2 of node.children) {
-      this.getNodeDepths(child2, depth + 1, depths);
+    for (const child of node.children) {
+      this.getNodeDepths(child, depth + 1, depths);
     }
     return depths;
   }
@@ -245663,8 +245822,8 @@ class TopDownOptimizer extends Optimizer {
    */
   optimize(node) {
     this.run(node);
-    for (const child2 of node.children) {
-      this.optimize(child2);
+    for (const child of node.children) {
+      this.optimize(child);
     }
     return this.modifiedFlag;
   }
@@ -245727,8 +245886,8 @@ class RemoveDuplicateTimeUnits extends Optimizer {
         }
       }
     }
-    for (const child2 of node.children) {
-      this.run(child2, /* @__PURE__ */ new Set([...timeUnitFields, ...producedFields]));
+    for (const child of node.children) {
+      this.run(child, /* @__PURE__ */ new Set([...timeUnitFields, ...producedFields]));
     }
   }
 }
@@ -245751,17 +245910,17 @@ class MoveParseUp extends BottomUpOptimizer {
     if (node.numChildren() > 1) {
       return;
     }
-    for (const child2 of node.children) {
-      if (child2 instanceof ParseNode) {
+    for (const child of node.children) {
+      if (child instanceof ParseNode) {
         if (node instanceof ParseNode) {
           this.setModified();
-          node.merge(child2);
+          node.merge(child);
         } else {
-          if (fieldIntersection(node.producedFields(), child2.dependentFields())) {
+          if (fieldIntersection(node.producedFields(), child.dependentFields())) {
             continue;
           }
           this.setModified();
-          child2.swapWithParent();
+          child.swapWithParent();
         }
       }
     }
@@ -245771,7 +245930,7 @@ class MoveParseUp extends BottomUpOptimizer {
 class MergeParse extends BottomUpOptimizer {
   run(node) {
     const originalChildren = [...node.children];
-    const parseChildren = node.children.filter((child2) => child2 instanceof ParseNode);
+    const parseChildren = node.children.filter((child) => child instanceof ParseNode);
     if (node.numChildren() > 1 && parseChildren.length >= 1) {
       const commonParse = {};
       const conflictingParse = /* @__PURE__ */ new Set();
@@ -245831,7 +245990,7 @@ class MergeTimeUnits extends BottomUpOptimizer {
 }
 class MergeAggregates extends BottomUpOptimizer {
   run(node) {
-    const aggChildren = node.children.filter((child2) => child2 instanceof AggregateNode);
+    const aggChildren = node.children.filter((child) => child instanceof AggregateNode);
     const groupedAggregates = {};
     for (const agg of aggChildren) {
       const groupBys = hash(agg.groupBy);
@@ -245865,12 +246024,12 @@ class MergeBins extends BottomUpOptimizer {
     const moveBinsUp = !(isDataSourceNode(node) || node instanceof FilterNode || node instanceof ParseNode || node instanceof IdentifierNode);
     const promotableBins = [];
     const remainingBins = [];
-    for (const child2 of node.children) {
-      if (child2 instanceof BinNode) {
-        if (moveBinsUp && !fieldIntersection(node.producedFields(), child2.dependentFields())) {
-          promotableBins.push(child2);
+    for (const child of node.children) {
+      if (child instanceof BinNode) {
+        if (moveBinsUp && !fieldIntersection(node.producedFields(), child.dependentFields())) {
+          promotableBins.push(child);
         } else {
-          remainingBins.push(child2);
+          remainingBins.push(child);
         }
       }
     }
@@ -245898,15 +246057,15 @@ class MergeBins extends BottomUpOptimizer {
 class MergeOutputs extends BottomUpOptimizer {
   run(node) {
     const children2 = [...node.children];
-    const hasOutputChild = some(children2, (child2) => child2 instanceof OutputNode);
+    const hasOutputChild = some(children2, (child) => child instanceof OutputNode);
     if (!hasOutputChild || node.numChildren() <= 1) {
       return;
     }
     const otherChildren = [];
     let mainOutput;
-    for (const child2 of children2) {
-      if (child2 instanceof OutputNode) {
-        let lastOutput = child2;
+    for (const child of children2) {
+      if (child instanceof OutputNode) {
+        let lastOutput = child;
         while (lastOutput.numChildren() === 1) {
           const [theChild] = lastOutput.children;
           if (theChild instanceof OutputNode) {
@@ -245917,8 +246076,8 @@ class MergeOutputs extends BottomUpOptimizer {
         }
         otherChildren.push(...lastOutput.children);
         if (mainOutput) {
-          node.removeChild(child2);
-          child2.parent = mainOutput.parent;
+          node.removeChild(child);
+          child.parent = mainOutput.parent;
           mainOutput.parent.removeChild(mainOutput);
           mainOutput.parent = lastOutput;
           this.setModified();
@@ -245926,14 +246085,14 @@ class MergeOutputs extends BottomUpOptimizer {
           mainOutput = lastOutput;
         }
       } else {
-        otherChildren.push(child2);
+        otherChildren.push(child);
       }
     }
     if (otherChildren.length) {
       this.setModified();
-      for (const child2 of otherChildren) {
-        child2.parent.removeChild(child2);
-        child2.parent = mainOutput;
+      for (const child of otherChildren) {
+        child.parent.removeChild(child);
+        child.parent = mainOutput;
       }
     }
   }
@@ -246242,11 +246401,11 @@ function cloneSubtree(facet) {
 function moveFacetDown(node) {
   if (node instanceof FacetNode) {
     if (node.numChildren() === 1 && !(node.children[0] instanceof OutputNode)) {
-      const child2 = node.children[0];
-      if (child2 instanceof AggregateNode || child2 instanceof StackNode || child2 instanceof WindowTransformNode || child2 instanceof JoinAggregateTransformNode) {
-        child2.addDimensions(node.fields);
+      const child = node.children[0];
+      if (child instanceof AggregateNode || child instanceof StackNode || child instanceof WindowTransformNode || child instanceof JoinAggregateTransformNode) {
+        child.addDimensions(node.fields);
       }
-      child2.swapWithParent();
+      child.swapWithParent();
       moveFacetDown(node);
     } else {
       const facetMain = node.model.component.data.main;
@@ -246264,9 +246423,9 @@ function moveFacetDown(node) {
 function moveMainDownToFacet(node) {
   if (node instanceof OutputNode && node.type === DataSourceType.Main) {
     if (node.numChildren() === 1) {
-      const child2 = node.children[0];
-      if (!(child2 instanceof FacetNode)) {
-        child2.swapWithParent();
+      const child = node.children[0];
+      if (!(child instanceof FacetNode)) {
+        child.swapWithParent();
         moveMainDownToFacet(node);
       }
     }
@@ -246276,8 +246435,8 @@ const FACET_SCALE_PREFIX = "scale_";
 const MAX_OPTIMIZATION_RUNS = 5;
 function checkLinks(nodes) {
   for (const node of nodes) {
-    for (const child2 of node.children) {
-      if (child2.parent !== node) {
+    for (const child of node.children) {
+      if (child.parent !== node) {
         return false;
       }
     }
@@ -246391,15 +246550,15 @@ function parseUnitScaleDomain(model) {
   }
 }
 function parseNonUnitScaleDomain(model) {
-  for (const child2 of model.children) {
-    parseScaleDomain(child2);
+  for (const child of model.children) {
+    parseScaleDomain(child);
   }
   const localScaleComponents = model.component.scales;
   for (const channel of keys$1(localScaleComponents)) {
     let domains;
     let selectionExtent = null;
-    for (const child2 of model.children) {
-      const childComponent = child2.component.scales[channel];
+    for (const child of model.children) {
+      const childComponent = child.component.scales[channel];
       if (childComponent) {
         if (domains === void 0) {
           domains = childComponent.getWithExplicit("domains");
@@ -246806,8 +246965,8 @@ var __rest$7 = function(s2, e3) {
 };
 function assembleScales(model) {
   if (isLayerModel(model) || isConcatModel(model)) {
-    return model.children.reduce((scales2, child2) => {
-      return scales2.concat(assembleScales(child2));
+    return model.children.reduce((scales2, child) => {
+      return scales2.concat(assembleScales(child));
     }, assembleScalesForModel(model));
   } else {
     return assembleScalesForModel(model);
@@ -247316,17 +247475,17 @@ function parseScaleRange(model) {
 }
 function parseNonUnitScaleProperty(model, property2) {
   const localScaleComponents = model.component.scales;
-  for (const child2 of model.children) {
+  for (const child of model.children) {
     if (property2 === "range") {
-      parseScaleRange(child2);
+      parseScaleRange(child);
     } else {
-      parseScaleProperty(child2, property2);
+      parseScaleProperty(child, property2);
     }
   }
   for (const channel of keys$1(localScaleComponents)) {
     let valueWithExplicit;
-    for (const child2 of model.children) {
-      const childComponent = child2.component.scales[channel];
+    for (const child of model.children) {
+      const childComponent = child.component.scales[channel];
       if (childComponent) {
         const childValueWithExplicit = childComponent.getWithExplicit(property2);
         valueWithExplicit = mergeValuesWithExplicit(valueWithExplicit, childValueWithExplicit, property2, "scale", tieBreakByComparing((v12, v2) => {
@@ -247608,13 +247767,13 @@ function parseNonUnitScaleCore(model) {
   const scaleComponents = model.component.scales = {};
   const scaleTypeWithExplicitIndex = {};
   const resolve2 = model.component.resolve;
-  for (const child2 of model.children) {
-    parseScaleCore(child2);
-    for (const channel of keys$1(child2.component.scales)) {
+  for (const child of model.children) {
+    parseScaleCore(child);
+    for (const channel of keys$1(child.component.scales)) {
       (_a2 = (_b = resolve2.scale)[channel]) !== null && _a2 !== void 0 ? _a2 : _b[channel] = defaultScaleResolve(channel, model);
       if (resolve2.scale[channel] === "shared") {
         const explicitScaleType = scaleTypeWithExplicitIndex[channel];
-        const childScaleType = child2.component.scales[channel].getWithExplicit("type");
+        const childScaleType = child.component.scales[channel].getWithExplicit("type");
         if (explicitScaleType) {
           if (scaleCompatible(explicitScaleType.value, childScaleType.value)) {
             scaleTypeWithExplicitIndex[channel] = mergeValuesWithExplicit(explicitScaleType, childScaleType, "type", "scale", scaleTypeTieBreaker);
@@ -247632,10 +247791,10 @@ function parseNonUnitScaleCore(model) {
     const name2 = model.scaleName(channel, true);
     const typeWithExplicit = scaleTypeWithExplicitIndex[channel];
     scaleComponents[channel] = new ScaleComponent(name2, typeWithExplicit);
-    for (const child2 of model.children) {
-      const childScale = child2.component.scales[channel];
+    for (const child of model.children) {
+      const childScale = child.component.scales[channel];
       if (childScale) {
-        child2.renameScale(childScale.get("name"), name2);
+        child.renameScale(childScale.get("name"), name2);
         childScale.merged = true;
       }
     }
@@ -248681,13 +248840,13 @@ function makeWalkTree(data2) {
         } else {
           source2 = dataSource.source;
         }
-        for (const child2 of node.children) {
+        for (const child of node.children) {
           const newData = {
             name: null,
             source: source2,
             transform: []
           };
-          walkTree(child2, newData);
+          walkTree(child, newData);
         }
         break;
       }
@@ -248698,8 +248857,8 @@ function makeWalkTree(data2) {
 function assembleFacetData(root2) {
   const data2 = [];
   const walkTree = makeWalkTree(data2);
-  for (const child2 of root2.children) {
-    walkTree(child2, {
+  for (const child of root2.children) {
+    walkTree(child, {
       source: root2.name,
       name: null,
       transform: []
@@ -248759,7 +248918,7 @@ function parseFacetHeaders(model) {
 }
 function parseFacetHeader(model, channel) {
   var _a2;
-  const { facet, config: config3, child: child2, component } = model;
+  const { facet, config: config3, child, component } = model;
   if (model.channelHasField(channel)) {
     const fieldDef = facet[channel];
     const titleConfig = getHeaderProperty("title", null, config3, channel);
@@ -248767,10 +248926,10 @@ function parseFacetHeader(model, channel) {
       allowDisabling: true,
       includeDefault: titleConfig === void 0 || !!titleConfig
     });
-    if (child2.component.layoutHeaders[channel].title) {
+    if (child.component.layoutHeaders[channel].title) {
       title$1 = isArray2(title$1) ? title$1.join(", ") : title$1;
-      title$1 += ` / ${child2.component.layoutHeaders[channel].title}`;
-      child2.component.layoutHeaders[channel].title = null;
+      title$1 += ` / ${child.component.layoutHeaders[channel].title}`;
+      child.component.layoutHeaders[channel].title = null;
     }
     const labelOrient = getHeaderProperty("labelOrient", fieldDef.header, config3, channel);
     const labels2 = fieldDef.header !== null ? getFirstDefined((_a2 = fieldDef.header) === null || _a2 === void 0 ? void 0 : _a2.labels, config3.header.labels, true) : false;
@@ -248792,14 +248951,14 @@ function makeHeaderComponent(model, channel, labels2) {
 }
 function mergeChildAxis(model, channel) {
   var _a2;
-  const { child: child2 } = model;
-  if (child2.component.axes[channel]) {
+  const { child } = model;
+  if (child.component.axes[channel]) {
     const { layoutHeaders: layoutHeaders2, resolve: resolve2 } = model.component;
     resolve2.axis[channel] = parseGuideResolve(resolve2, channel);
     if (resolve2.axis[channel] === "shared") {
       const headerChannel = channel === "x" ? "column" : "row";
       const layoutHeader = layoutHeaders2[headerChannel];
-      for (const axisComponent of child2.component.axes[channel]) {
+      for (const axisComponent of child.component.axes[channel]) {
         const headerType = getHeaderType(axisComponent.get("orient"));
         (_a2 = layoutHeader[headerType]) !== null && _a2 !== void 0 ? _a2 : layoutHeader[headerType] = [makeHeaderComponent(model, headerChannel, false)];
         const mainAxis = assembleAxis(axisComponent, "main", model.config, { header: true });
@@ -248824,8 +248983,8 @@ function parseConcatLayoutSize(model) {
   parseNonUnitLayoutSizeForChannel(model, heightType);
 }
 function parseChildrenLayoutSize(model) {
-  for (const child2 of model.children) {
-    child2.parseLayoutSize();
+  for (const child of model.children) {
+    child.parseLayoutSize();
   }
 }
 function parseNonUnitLayoutSizeForChannel(model, layoutSizeType) {
@@ -248835,8 +248994,8 @@ function parseNonUnitLayoutSizeForChannel(model, layoutSizeType) {
   const resolve2 = model.component.resolve;
   const layoutSizeCmpt = model.component.layoutSize;
   let mergedSize;
-  for (const child2 of model.children) {
-    const childSize = child2.component.layoutSize.getWithExplicit(sizeType);
+  for (const child of model.children) {
+    const childSize = child.component.layoutSize.getWithExplicit(sizeType);
     const scaleResolve = (_a2 = resolve2.scale[channel]) !== null && _a2 !== void 0 ? _a2 : defaultScaleResolve(channel, model);
     if (scaleResolve === "independent" && childSize.value === "step") {
       mergedSize = void 0;
@@ -248853,9 +249012,9 @@ function parseNonUnitLayoutSizeForChannel(model, layoutSizeType) {
     }
   }
   if (mergedSize) {
-    for (const child2 of model.children) {
-      model.renameSignal(child2.getName(sizeType), model.getName(layoutSizeType));
-      child2.component.layoutSize.set(sizeType, "merged", false);
+    for (const child of model.children) {
+      model.renameSignal(child.getName(sizeType), model.getName(layoutSizeType));
+      child.component.layoutSize.set(sizeType, "merged", false);
     }
     layoutSizeCmpt.setWithExplicit(layoutSizeType, mergedSize);
   } else {
@@ -249168,12 +249327,12 @@ class FacetModel extends ModelWithField {
     return void 0;
   }
   assembleMarks() {
-    const { child: child2 } = this;
+    const { child } = this;
     const facetRoot = this.component.data.facetRoot;
     const data2 = assembleFacetData(facetRoot);
-    const encodeEntry2 = child2.assembleGroupEncodeEntry(false);
-    const title2 = this.assembleLabelTitle() || child2.assembleTitle();
-    const style2 = child2.assembleGroupStyle();
+    const encodeEntry2 = child.assembleGroupEncodeEntry(false);
+    const title2 = this.assembleLabelTitle() || child.assembleTitle();
+    const style2 = child.assembleGroupStyle();
     const markGroup = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ name: this.getName("cell"), type: "group" }, title2 ? { title: title2 } : {}), style2 ? { style: style2 } : {}), {
       from: {
         facet: this.assembleFacet()
@@ -249183,7 +249342,7 @@ class FacetModel extends ModelWithField {
         field: FACET_CHANNELS.map((c2) => this.facetSortFields(c2)).flat(),
         order: FACET_CHANNELS.map((c2) => this.facetSortOrder(c2)).flat()
       }
-    }), data2.length > 0 ? { data: data2 } : {}), encodeEntry2 ? { encode: { update: encodeEntry2 } } : {}), child2.assembleGroup(assembleFacetSignals(this, [])));
+    }), data2.length > 0 ? { data: data2 } : {}), encodeEntry2 ? { encode: { update: encodeEntry2 } } : {}), child.assembleGroup(assembleFacetSignals(this, [])));
     return [markGroup];
   }
   getMapping() {
@@ -249444,33 +249603,33 @@ class ConcatModel extends Model2 {
     if (((_b = (_a2 = spec.resolve) === null || _a2 === void 0 ? void 0 : _a2.axis) === null || _b === void 0 ? void 0 : _b.x) === "shared" || ((_d = (_c = spec.resolve) === null || _c === void 0 ? void 0 : _c.axis) === null || _d === void 0 ? void 0 : _d.y) === "shared") {
       warn(CONCAT_CANNOT_SHARE_AXIS);
     }
-    this.children = this.getChildren(spec).map((child2, i2) => {
-      return buildModel(child2, this, this.getName(`concat_${i2}`), void 0, config3);
+    this.children = this.getChildren(spec).map((child, i2) => {
+      return buildModel(child, this, this.getName(`concat_${i2}`), void 0, config3);
     });
   }
   parseData() {
     this.component.data = parseData(this);
-    for (const child2 of this.children) {
-      child2.parseData();
+    for (const child of this.children) {
+      child.parseData();
     }
   }
   parseSelections() {
     this.component.selection = {};
-    for (const child2 of this.children) {
-      child2.parseSelections();
-      for (const key2 of keys$1(child2.component.selection)) {
-        this.component.selection[key2] = child2.component.selection[key2];
+    for (const child of this.children) {
+      child.parseSelections();
+      for (const key2 of keys$1(child.component.selection)) {
+        this.component.selection[key2] = child.component.selection[key2];
       }
     }
   }
   parseMarkGroup() {
-    for (const child2 of this.children) {
-      child2.parseMarkGroup();
+    for (const child of this.children) {
+      child.parseMarkGroup();
     }
   }
   parseAxesAndHeaders() {
-    for (const child2 of this.children) {
-      child2.parseAxesAndHeaders();
+    for (const child of this.children) {
+      child.parseAxesAndHeaders();
     }
   }
   getChildren(spec) {
@@ -249488,28 +249647,28 @@ class ConcatModel extends Model2 {
     return null;
   }
   assembleSelectionTopLevelSignals(signals) {
-    return this.children.reduce((sg, child2) => child2.assembleSelectionTopLevelSignals(sg), signals);
+    return this.children.reduce((sg, child) => child.assembleSelectionTopLevelSignals(sg), signals);
   }
   assembleSignals() {
-    this.children.forEach((child2) => child2.assembleSignals());
+    this.children.forEach((child) => child.assembleSignals());
     return [];
   }
   assembleLayoutSignals() {
     const layoutSignals = assembleLayoutSignals(this);
-    for (const child2 of this.children) {
-      layoutSignals.push(...child2.assembleLayoutSignals());
+    for (const child of this.children) {
+      layoutSignals.push(...child.assembleLayoutSignals());
     }
     return layoutSignals;
   }
   assembleSelectionData(data2) {
-    return this.children.reduce((db, child2) => child2.assembleSelectionData(db), data2);
+    return this.children.reduce((db, child) => child.assembleSelectionData(db), data2);
   }
   assembleMarks() {
-    return this.children.map((child2) => {
-      const title2 = child2.assembleTitle();
-      const style2 = child2.assembleGroupStyle();
-      const encodeEntry2 = child2.assembleGroupEncodeEntry(false);
-      return Object.assign(Object.assign(Object.assign(Object.assign({ type: "group", name: child2.getName("group") }, title2 ? { title: title2 } : {}), style2 ? { style: style2 } : {}), encodeEntry2 ? { encode: { update: encodeEntry2 } } : {}), child2.assembleGroup());
+    return this.children.map((child) => {
+      const title2 = child.assembleTitle();
+      const style2 = child.assembleGroupStyle();
+      const encodeEntry2 = child.assembleGroupEncodeEntry(false);
+      return Object.assign(Object.assign(Object.assign(Object.assign({ type: "group", name: child.getName("group") }, title2 ? { title: title2 } : {}), style2 ? { style: style2 } : {}), encodeEntry2 ? { encode: { update: encodeEntry2 } } : {}), child.assembleGroup());
     });
   }
   assembleGroupStyle() {
@@ -249616,12 +249775,12 @@ function parseLayerAxes(model) {
   var _a2;
   const { axes, resolve: resolve2 } = model.component;
   const axisCount = { top: 0, bottom: 0, right: 0, left: 0 };
-  for (const child2 of model.children) {
-    child2.parseAxesAndHeaders();
-    for (const channel of keys$1(child2.component.axes)) {
+  for (const child of model.children) {
+    child.parseAxesAndHeaders();
+    for (const channel of keys$1(child.component.axes)) {
       resolve2.axis[channel] = parseGuideResolve(model.component.resolve, channel);
       if (resolve2.axis[channel] === "shared") {
-        axes[channel] = mergeAxisComponents(axes[channel], child2.component.axes[channel]);
+        axes[channel] = mergeAxisComponents(axes[channel], child.component.axes[channel]);
         if (!axes[channel]) {
           resolve2.axis[channel] = "independent";
           delete axes[channel];
@@ -249630,13 +249789,13 @@ function parseLayerAxes(model) {
     }
   }
   for (const channel of POSITION_SCALE_CHANNELS) {
-    for (const child2 of model.children) {
-      if (!child2.component.axes[channel]) {
+    for (const child of model.children) {
+      if (!child.component.axes[channel]) {
         continue;
       }
       if (resolve2.axis[channel] === "independent") {
-        axes[channel] = ((_a2 = axes[channel]) !== null && _a2 !== void 0 ? _a2 : []).concat(child2.component.axes[channel]);
-        for (const axisComponent of child2.component.axes[channel]) {
+        axes[channel] = ((_a2 = axes[channel]) !== null && _a2 !== void 0 ? _a2 : []).concat(child.component.axes[channel]);
+        for (const axisComponent of child.component.axes[channel]) {
           const { value: orient2, explicit } = axisComponent.getWithExplicit("orient");
           if (isSignalRef(orient2)) {
             continue;
@@ -249650,7 +249809,7 @@ function parseLayerAxes(model) {
           axisCount[orient2]++;
         }
       }
-      delete child2.component.axes[channel];
+      delete child.component.axes[channel];
     }
     if (resolve2.axis[channel] === "independent" && axes[channel] && axes[channel].length > 1) {
       for (const axisCmpt of axes[channel]) {
@@ -249669,16 +249828,16 @@ function mergeAxisComponents(mergedAxisCmpts, childAxisCmpts) {
     const length2 = mergedAxisCmpts.length;
     for (let i2 = 0; i2 < length2; i2++) {
       const merged = mergedAxisCmpts[i2];
-      const child2 = childAxisCmpts[i2];
-      if (!!merged !== !!child2) {
+      const child = childAxisCmpts[i2];
+      if (!!merged !== !!child) {
         return void 0;
-      } else if (merged && child2) {
+      } else if (merged && child) {
         const mergedOrient = merged.getWithExplicit("orient");
-        const childOrient = child2.getWithExplicit("orient");
+        const childOrient = child.getWithExplicit("orient");
         if (mergedOrient.explicit && childOrient.explicit && mergedOrient.value !== childOrient.value) {
           return void 0;
         } else {
-          mergedAxisCmpts[i2] = mergeAxisComponent(merged, child2);
+          mergedAxisCmpts[i2] = mergeAxisComponent(merged, child);
         }
       }
     }
@@ -249687,11 +249846,11 @@ function mergeAxisComponents(mergedAxisCmpts, childAxisCmpts) {
   }
   return mergedAxisCmpts;
 }
-function mergeAxisComponent(merged, child2) {
+function mergeAxisComponent(merged, child) {
   for (const prop of AXIS_COMPONENT_PROPERTIES) {
     const mergedValueWithExplicit = mergeValuesWithExplicit(
       merged.getWithExplicit(prop),
-      child2.getWithExplicit(prop),
+      child.getWithExplicit(prop),
       prop,
       "axis",
       // Tie breaker function
@@ -250663,8 +250822,8 @@ class LayerModel extends Model2 {
   }
   parseData() {
     this.component.data = parseData(this);
-    for (const child2 of this.children) {
-      child2.parseData();
+    for (const child of this.children) {
+      child.parseData();
     }
   }
   parseLayoutSize() {
@@ -250672,42 +250831,42 @@ class LayerModel extends Model2 {
   }
   parseSelections() {
     this.component.selection = {};
-    for (const child2 of this.children) {
-      child2.parseSelections();
-      for (const key2 of keys$1(child2.component.selection)) {
-        this.component.selection[key2] = child2.component.selection[key2];
+    for (const child of this.children) {
+      child.parseSelections();
+      for (const key2 of keys$1(child.component.selection)) {
+        this.component.selection[key2] = child.component.selection[key2];
       }
     }
   }
   parseMarkGroup() {
-    for (const child2 of this.children) {
-      child2.parseMarkGroup();
+    for (const child of this.children) {
+      child.parseMarkGroup();
     }
   }
   parseAxesAndHeaders() {
     parseLayerAxes(this);
   }
   assembleSelectionTopLevelSignals(signals) {
-    return this.children.reduce((sg, child2) => child2.assembleSelectionTopLevelSignals(sg), signals);
+    return this.children.reduce((sg, child) => child.assembleSelectionTopLevelSignals(sg), signals);
   }
   // TODO: Support same named selections across children.
   assembleSignals() {
-    return this.children.reduce((signals, child2) => {
-      return signals.concat(child2.assembleSignals());
+    return this.children.reduce((signals, child) => {
+      return signals.concat(child.assembleSignals());
     }, assembleAxisSignals(this));
   }
   assembleLayoutSignals() {
-    return this.children.reduce((signals, child2) => {
-      return signals.concat(child2.assembleLayoutSignals());
+    return this.children.reduce((signals, child) => {
+      return signals.concat(child.assembleLayoutSignals());
     }, assembleLayoutSignals(this));
   }
   assembleSelectionData(data2) {
-    return this.children.reduce((db, child2) => child2.assembleSelectionData(db), data2);
+    return this.children.reduce((db, child) => child.assembleSelectionData(db), data2);
   }
   assembleGroupStyle() {
     const uniqueStyles = /* @__PURE__ */ new Set();
-    for (const child2 of this.children) {
-      for (const style2 of array$5(child2.assembleGroupStyle())) {
+    for (const child of this.children) {
+      for (const style2 of array$5(child.assembleGroupStyle())) {
         uniqueStyles.add(style2);
       }
     }
@@ -250719,8 +250878,8 @@ class LayerModel extends Model2 {
     if (title2) {
       return title2;
     }
-    for (const child2 of this.children) {
-      title2 = child2.assembleTitle();
+    for (const child of this.children) {
+      title2 = child.assembleTitle();
       if (title2) {
         return title2;
       }
@@ -250731,13 +250890,13 @@ class LayerModel extends Model2 {
     return null;
   }
   assembleMarks() {
-    return assembleLayerSelectionMarks(this, this.children.flatMap((child2) => {
-      return child2.assembleMarks();
+    return assembleLayerSelectionMarks(this, this.children.flatMap((child) => {
+      return child.assembleMarks();
     }));
   }
   assembleLegends() {
-    return this.children.reduce((legends, child2) => {
-      return legends.concat(child2.assembleLegends());
+    return this.children.reduce((legends, child) => {
+      return legends.concat(child.assembleLegends());
     }, assembleLegends(this));
   }
 }
@@ -256356,10 +256515,10 @@ class RasterJsonAsObsSegmentationsLoader extends RasterLoader {
     if (!(coordinationValues == null ? void 0 : coordinationValues.spatialImageLayer)) {
       console.warn("Could not initialize coordinationValues.spatialImageLayer in RasterJsonAsObsSegmentationsLoader. This may be an indicator that the image could not be loaded.");
     }
-    return new LoaderResult({
+    return new LoaderResult(loaders.length > 0 && meta2.length > 0 ? {
       obsSegmentationsType: "bitmask",
-      obsSegmentations: loaders.length > 0 && meta2.length > 0 ? { loaders, meta: meta2 } : null
-    }, urls2, {
+      obsSegmentations: { loaders, meta: meta2 }
+    } : null, urls2, {
       // Filter coordinationValues, keeping only bitmask layers.
       spatialSegmentationLayer: (_a2 = coordinationValues == null ? void 0 : coordinationValues.spatialImageLayer) == null ? void 0 : _a2.filter((l2) => l2.type === "bitmask").map((layer) => ({
         ...layer,
@@ -257098,7 +257257,7 @@ class ObsSegmentationsAnndataLoader extends AbstractTwoStepLoader {
         // Bug introduced from DeckGL v8.6.x to v8.8.x:
         // Polygon vertices cannot be passed via Uint32Arrays, which is how they load via Zarr.
         // For now, a workaround is to cast each vertex to a plain Array.
-        data: arr.data.map((poly2) => poly2.map((vertex2) => Array.from(vertex2)))
+        data: arr.data.map((poly2) => poly2.map((vertex) => Array.from(vertex)))
       }));
       return this.segmentations;
     }
@@ -257259,22 +257418,21 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
     const { coordinateTransformations: coordinateTransformationsFromOptions } = this.options || {};
     const loader2 = await loadOmeZarr(this.url, { fetchOptions: this.requestInit, type: "multiscales" });
     const { metadata: metadata2, data: data2 } = loader2;
-    const { omero, multiscales } = metadata2;
-    if (!omero) {
-      console.error("Path for image not valid");
+    const { omero, multiscales, channels_metadata: spatialDataChannels } = metadata2;
+    const isSpatialData = !!spatialDataChannels;
+    if (!isSpatialData && !omero) {
+      console.error("image.ome-zarr must have omero metadata in attributes.");
       return Promise.reject(payload);
     }
     if (!Array.isArray(multiscales) || multiscales.length === 0) {
       console.error("Multiscales array must exist and have at least one element");
     }
-    const { coordinateTransformations } = multiscales[0];
+    const { datasets, coordinateTransformations: coordinateTransformationsFromFile, name: imageName } = multiscales[0];
     const axes = getNgffAxes(multiscales[0].axes);
+    const normCoordinateTransformationsFromFile = normalizeCoordinateTransformations(coordinateTransformationsFromFile, datasets);
     const transformMatrixFromOptions = coordinateTransformationsToMatrix(coordinateTransformationsFromOptions, axes);
-    const transformMatrixFromFile = coordinateTransformationsToMatrix(coordinateTransformations, axes);
+    const transformMatrixFromFile = coordinateTransformationsToMatrix(normCoordinateTransformationsFromFile, axes);
     const transformMatrix = transformMatrixFromFile.multiplyLeft(transformMatrixFromOptions);
-    const { rdefs, channels: channels2, name: omeroName } = omero;
-    const t4 = rdefs.defaultT ?? 0;
-    const z2 = rdefs.defaultZ ?? 0;
     const filterSelection = (sel) => {
       if (data2.length > 0) {
         const nextSel = {};
@@ -257288,14 +257446,37 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
       }
       return sel;
     };
+    let channelObjects;
+    let channelLabels = [];
+    let initialTargetT = 0;
+    let initialTargetZ = 0;
+    if (isSpatialData) {
+      const { channels: channels2 } = spatialDataChannels;
+      channelObjects = channels2.map((channel, i2) => ({
+        selection: filterSelection({ z: initialTargetZ, t: initialTargetT, c: i2 }),
+        slider: [0, 255],
+        color: [255, 255, 255]
+      }));
+      channelLabels = channels2.map((c2) => c2.label);
+    } else {
+      const { rdefs, channels: channels2 } = omero;
+      if (typeof rdefs.defaultT === "number") {
+        initialTargetT = rdefs.defaultT;
+      }
+      if (typeof rdefs.defaultZ === "number") {
+        initialTargetZ = rdefs.defaultZ;
+      }
+      channelObjects = channels2.map((channel, i2) => ({
+        selection: filterSelection({ z: initialTargetZ, t: initialTargetT, c: i2 }),
+        slider: [channel.window.start, channel.window.end],
+        color: hexToRgb(channel.color)
+      }));
+      channelLabels = channels2.map((c2) => c2.label);
+    }
     const imagesWithLoaderCreators = [
       {
-        name: omeroName || "Image",
-        channels: channels2.map((channel, i2) => ({
-          selection: filterSelection({ z: z2, t: t4, c: i2 }),
-          slider: [channel.window.start, channel.window.end],
-          color: hexToRgb(channel.color)
-        })),
+        name: imageName || "Image",
+        channels: channelObjects,
         ...transformMatrix ? {
           metadata: {
             transform: {
@@ -257303,7 +257484,7 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
             }
           }
         } : {},
-        loaderCreator: async () => ({ ...loader2, channels: channels2.map((c2) => c2.label) })
+        loaderCreator: async () => ({ ...loader2, channels: channelLabels })
       }
     ];
     const [autoImageLayers, imageLayerLoaders, imageLayerMeta] = await initializeRasterLayersAndChannels(imagesWithLoaderCreators, void 0);