@vitessce/launcher 4.0.0 → 4.0.2

package/dist/{index-DDD3apxS.js → index-D-cJewP-.js}

@@ -6375,12 +6375,12 @@ function baseIsEqual$3(value2, other, bitmask, customizer, stack2) {
 var now$4 = function() {
   return root$d.Date.now();
 };
-var FUNC_ERROR_TEXT$2 = "Expected a function";
+var FUNC_ERROR_TEXT$3 = "Expected a function";
 var nativeMax$3 = Math.max, nativeMin$1 = Math.min;
 function debounce$5(func, wait2, options) {
   var lastArgs, lastThis, maxWait, result, timerId, lastCallTime, lastInvokeTime = 0, leading = false, maxing = false, trailing = true;
   if (typeof func != "function") {
-    throw new TypeError(FUNC_ERROR_TEXT$2);
+    throw new TypeError(FUNC_ERROR_TEXT$3);
   }
   wait2 = toNumber$3(wait2) || 0;
   if (isObject$f(options)) {
@@ -6538,6 +6538,22 @@ var range$e = createRange();
 function sum$6(array2) {
   return array2 && array2.length ? baseSum(array2, identity$h) : 0;
 }
+var FUNC_ERROR_TEXT$2 = "Expected a function";
+function throttle$1(func, wait2, options) {
+  var leading = true, trailing = true;
+  if (typeof func != "function") {
+    throw new TypeError(FUNC_ERROR_TEXT$2);
+  }
+  if (isObject$f(options)) {
+    leading = "leading" in options ? !!options.leading : leading;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
+  }
+  return debounce$5(func, wait2, {
+    "leading": leading,
+    "maxWait": wait2,
+    "trailing": trailing
+  });
+}
 var INFINITY = 1 / 0;
 var createSet = !(Set$3 && 1 / setToArray$2(new Set$3([, -0]))[1] == INFINITY) ? noop$h : function(values3) {
   return new Set$3(values3);
@@ -10382,6 +10398,7 @@ const CoordinationType$1 = {
   SPATIAL_CHANNEL_LABELS_VISIBLE: "spatialChannelLabelsVisible",
   SPATIAL_CHANNEL_LABELS_ORIENTATION: "spatialChannelLabelsOrientation",
   SPATIAL_CHANNEL_LABEL_SIZE: "spatialChannelLabelSize",
+  SPATIAL_CHANNELS_SORT_ORDER: "spatialChannelsSortOrder",
   // Multi-sample / comparative
   SAMPLE_TYPE: "sampleType",
   SAMPLE_SELECTION: "sampleSelection",
@@ -10434,7 +10451,9 @@ const ViewHelpMapping = {
   OBS_SET_COMPOSITION_BAR_PLOT: "The set composition bar plot displays the results of a compositional analysis conducted using the scCODA method (Büttner et al. 2021 Nature Communications).",
   FEATURE_SET_ENRICHMENT_BAR_PLOT: "The feature set enrichment bar plot displays the results of a hypergeometric test applied to the differential expression test results to identify enriched pathway gene sets.",
   SAMPLE_SET_PAIR_MANAGER: "Select pairs of sample groups.",
-  FEATURE_STATS_TABLE: "This table displays per-feature statistics, for example, from a differential expression test."
+  FEATURE_STATS_TABLE: "This table displays per-feature statistics, for example, from a differential expression test.",
+  LAYER_CONTROLLER_BETA: "The spatial layer controller provides an interface for manipulating the visualization layers displayed in the spatial view.",
+  SPATIAL_BETA: "The spatial view displays (potentially layered) spatially-resolved data including RGB or multiplexed images, segmentations of observations (bitmask- or polygon-based), and/or points (e.g., representing FISH transcripts)."
 };
 ({
   // For new file types
@@ -10985,6 +11004,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
     CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER,
     CoordinationType$1.PHOTOMETRIC_INTERPRETATION
   ],
   [ViewType$1.HEATMAP]: [
@@ -11166,7 +11186,8 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.LEGEND_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
-    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER
   ],
   [ViewType$1.GENOMIC_PROFILES]: [
     CoordinationType$1.DATASET,
@@ -11877,7 +11898,18 @@ const ngPrecomputedMeshSchema = z.object({
 const ngPointAnnotationSchema = z.object({
   projectionAnnotationSpacing: z.number(),
   featureIndexProp: z.string().optional().describe("The name of the Neuroglancer AnnotationProperty containing feature IDs. For example, specify 'gene' to use prop_gene() in the Neuroglancer shader code."),
-  pointIndexProp: z.string().optional().describe("The name of the Neuroglancer AnnotationProperty containing point IDs. For example, specify 'point_id' to use prop_point_id() in the Neuroglancer shader code.")
+  pointIndexProp: z.string().optional().describe("The name of the Neuroglancer AnnotationProperty containing point IDs. For example, specify 'point_id' to use prop_point_id() in the Neuroglancer shader code."),
+  transform: z.object({
+    matrix: z.array(z.array(z.number())),
+    outputDimensions: z.record(z.tuple([z.number(), z.string()]))
+  }).optional().describe("A coordinate transformation matrix to apply to the annotation layer source to map annotation coordinates to the global coordinate space."),
+  // Note: See comments in neuroglancer-sorger.js
+  // We may remove these in the future, pending clarification
+  // to questions in the tissue-map-tools repo
+  // - https://github.com/hms-dbmi/tissue-map-tools/issues/20
+  // - https://github.com/hms-dbmi/tissue-map-tools/issues/38
+  quantitativeColorProp: z.string().optional(),
+  quantitativeColorMax: z.number().optional()
 }).partial().nullable();
 const obsEmbeddingAnndataSchema = annDataObsEmbedding;
 const obsSpotsAnndataSchema = annDataObsLocations;
@@ -19290,7 +19322,7 @@ const { tss } = createTss({
   },
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
-const useStyles$y = tss.create({});
+const useStyles$z = tss.create({});
 function createChainedFunction$1(...funcs) {
   return funcs.reduce((acc, func) => {
     if (func == null) {
@@ -74100,7 +74132,7 @@ const Popper = React.forwardRef((props, ref2) => {
   }, [handlePopperRef]);
   React.useImperativeHandle(popperRefProp, () => popperRef.current, []);
   const [exited, setExited] = React.useState(true);
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   const rtlPlacement = flipPlacement(initialPlacement, theme);
   const [placement, setPlacement] = React.useState(rtlPlacement);
   React.useEffect(() => {
@@ -74834,7 +74866,7 @@ var VariableSizeList$1 = /* @__PURE__ */ createListComponent({
 });
 const VariableSizeList = VariableSizeList$1;
 const LIST_ROW_HEIGHT$1 = 48;
-const useStyles$x = makeStyles()(() => ({
+const useStyles$y = makeStyles()(() => ({
   searchInput: {
     lineHeight: "initial",
     height: "auto !important"
@@ -74874,7 +74906,7 @@ const ListboxComponent$1 = React__default.forwardRef((props, ref2) => {
 });
 function SimpleAutocomplete(props) {
   const { getMatches, onChange, textInputLabel = "Enter a gene", getItemLabel = (option) => option.label } = props;
-  const { classes: classes2 } = useStyles$x();
+  const { classes: classes2 } = useStyles$y();
   const [potentialItems, setPotentialItems] = useState([]);
   const handleInputChange = async (_event, value2) => {
     if (!value2) {
@@ -84424,7 +84456,7 @@ function defaultUrlTransform(value2) {
   }
   return "";
 }
-const useStyles$w = makeStyles()((theme) => ({
+const useStyles$x = makeStyles()((theme) => ({
   description: {
     "& p, details, table": {
       fontSize: "80%",
@@ -84461,7 +84493,7 @@ const useStyles$w = makeStyles()((theme) => ({
 }));
 function Description(props) {
   const { description: description2, metadata: metadata2, descriptionType } = props;
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   return jsxs("div", { className: classes2.description, children: [descriptionType && descriptionType === DescriptionType.MARKDOWN ? jsx$1(Markdown, { children: description2 }) : jsx$1("p", { children: description2 }), metadata2 && Array.from(metadata2.entries()).map(([layerIndex, { name: layerName, metadata: metadataRecord }]) => metadataRecord && Object.entries(metadataRecord).length > 0 ? jsxs("details", { children: [jsx$1("summary", { children: layerName }), jsx$1("div", { className: classes2.metadataContainer, children: jsx$1("table", { children: jsx$1("tbody", { children: Object.entries(metadataRecord).map(([key2, value2]) => jsxs("tr", { children: [jsx$1("th", { title: key2, children: key2 }), jsx$1("td", { title: value2, children: value2 })] }, key2)) }) }) })] }, layerIndex) : null)] });
 }
 function DescriptionSubscriber(props) {
@@ -92713,6 +92745,37 @@ function dataToCellSetsTree(data2, options) {
   return cellSetsTree;
 }
 const schemeRdBu = [[103, 0, 31], [178, 24, 43], [214, 96, 77], [244, 165, 130], [253, 219, 199], [247, 247, 247], [209, 229, 240], [146, 197, 222], [67, 147, 195], [33, 102, 172], [5, 48, 97]];
+const schemePlasma = [[13, 8, 135], [16, 7, 136], [19, 7, 137], [22, 7, 138], [25, 6, 140], [27, 6, 141], [29, 6, 142], [32, 6, 143], [34, 6, 144], [36, 6, 145], [38, 5, 145], [40, 5, 146], [42, 5, 147], [44, 5, 148], [46, 5, 149], [47, 5, 150], [49, 5, 151], [51, 5, 151], [53, 4, 152], [55, 4, 153], [56, 4, 154], [58, 4, 154], [60, 4, 155], [62, 4, 156], [63, 4, 156], [65, 4, 157], [67, 3, 158], [68, 3, 158], [70, 3, 159], [72, 3, 159], [73, 3, 160], [75, 3, 161], [76, 2, 161], [78, 2, 162], [80, 2, 162], [81, 2, 163], [83, 2, 163], [85, 2, 164], [86, 1, 164], [88, 1, 164], [89, 1, 165], [91, 1, 165], [92, 1, 166], [94, 1, 166], [96, 1, 166], [97, 0, 167], [99, 0, 167], [100, 0, 167], [102, 0, 167], [103, 0, 168], [105, 0, 168], [106, 0, 168], [108, 0, 168], [110, 0, 168], [111, 0, 168], [113, 0, 168], [114, 1, 168], [116, 1, 168], [117, 1, 168], [119, 1, 168], [120, 1, 168], [122, 2, 168], [123, 2, 168], [125, 3, 168], [126, 3, 168], [128, 4, 168], [129, 4, 167], [131, 5, 167], [132, 5, 167], [134, 6, 166], [135, 7, 166], [136, 8, 166], [138, 9, 165], [139, 10, 165], [141, 11, 165], [142, 12, 164], [143, 13, 164], [145, 14, 163], [146, 15, 163], [148, 16, 162], [149, 17, 161], [150, 19, 161], [152, 20, 160], [153, 21, 159], [154, 22, 159], [156, 23, 158], [157, 24, 157], [158, 25, 157], [160, 26, 156], [161, 27, 155], [162, 29, 154], [163, 30, 154], [165, 31, 153], [166, 32, 152], [167, 33, 151], [168, 34, 150], [170, 35, 149], [171, 36, 148], [172, 38, 148], [173, 39, 147], [174, 40, 146], [176, 41, 145], [177, 42, 144], [178, 43, 143], [179, 44, 142], [180, 46, 141], [181, 47, 140], [182, 48, 139], [183, 49, 138], [184, 50, 137], [186, 51, 136], [187, 52, 136], [188, 53, 135], [189, 55, 134], [190, 56, 133], [191, 57, 132], [192, 58, 131], [193, 59, 130], [194, 60, 129], [195, 61, 128], [196, 62, 127], [197, 64, 126], [198, 65, 125], [199, 66, 124], [200, 67, 123], [201, 68, 122], [202, 69, 122], [203, 70, 121], [204, 71, 120], [204, 73, 119], [205, 74, 118], [206, 75, 117], [207, 76, 116], [208, 77, 115], [209, 78, 114], [210, 79, 113], [211, 81, 113], [212, 82, 112], [213, 83, 111], [213, 84, 110], [214, 85, 109], [215, 86, 108], [216, 87, 107], [217, 88, 106], [218, 90, 106], [218, 91, 105], [219, 92, 104], [220, 93, 103], [221, 94, 102], [222, 95, 101], [222, 97, 100], [223, 98, 99], [224, 99, 99], [225, 100, 98], [226, 101, 97], [226, 102, 96], [227, 104, 95], [228, 105, 94], [229, 106, 93], [229, 107, 93], [230, 108, 92], [231, 110, 91], [231, 111, 90], [232, 112, 89], [233, 113, 88], [233, 114, 87], [234, 116, 87], [235, 117, 86], [235, 118, 85], [236, 119, 84], [237, 121, 83], [237, 122, 82], [238, 123, 81], [239, 124, 81], [239, 126, 80], [240, 127, 79], [240, 128, 78], [241, 129, 77], [241, 131, 76], [242, 132, 75], [243, 133, 75], [243, 135, 74], [244, 136, 73], [244, 137, 72], [245, 139, 71], [245, 140, 70], [246, 141, 69], [246, 143, 68], [247, 144, 68], [247, 145, 67], [247, 147, 66], [248, 148, 65], [248, 149, 64], [249, 151, 63], [249, 152, 62], [249, 154, 62], [250, 155, 61], [250, 156, 60], [250, 158, 59], [251, 159, 58], [251, 161, 57], [251, 162, 56], [252, 163, 56], [252, 165, 55], [252, 166, 54], [252, 168, 53], [252, 169, 52], [253, 171, 51], [253, 172, 51], [253, 174, 50], [253, 175, 49], [253, 177, 48], [253, 178, 47], [253, 180, 47], [253, 181, 46], [254, 183, 45], [254, 184, 44], [254, 186, 44], [254, 187, 43], [254, 189, 42], [254, 190, 42], [254, 192, 41], [253, 194, 41], [253, 195, 40], [253, 197, 39], [253, 198, 39], [253, 200, 39], [253, 202, 38], [253, 203, 38], [252, 205, 37], [252, 206, 37], [252, 208, 37], [252, 210, 37], [251, 211, 36], [251, 213, 36], [251, 215, 36], [250, 216, 36], [250, 218, 36], [249, 220, 36], [249, 221, 37], [248, 223, 37], [248, 225, 37], [247, 226, 37], [247, 228, 37], [246, 230, 38], [246, 232, 38], [245, 233, 38], [245, 235, 39], [244, 237, 39], [243, 238, 39], [243, 240, 39], [242, 242, 39], [241, 244, 38], [241, 245, 37], [240, 247, 36], [240, 249, 33]];
+const schemeViridis = [[68, 1, 84], [68, 2, 86], [69, 4, 87], [69, 5, 89], [70, 7, 90], [70, 8, 92], [70, 10, 93], [70, 11, 94], [71, 13, 96], [71, 14, 97], [71, 16, 99], [71, 17, 100], [71, 19, 101], [72, 20, 103], [72, 22, 104], [72, 23, 105], [72, 24, 106], [72, 26, 108], [72, 27, 109], [72, 28, 110], [72, 30, 111], [72, 31, 112], [72, 32, 113], [72, 34, 115], [72, 35, 116], [72, 36, 117], [72, 38, 118], [72, 39, 119], [72, 40, 120], [72, 42, 121], [72, 43, 122], [72, 44, 123], [72, 46, 124], [72, 47, 125], [72, 48, 126], [72, 50, 127], [72, 51, 128], [72, 52, 129], [72, 53, 130], [72, 55, 131], [72, 56, 132], [72, 57, 133], [72, 59, 134], [72, 60, 135], [72, 61, 136], [72, 63, 137], [72, 64, 137], [72, 65, 138], [72, 67, 139], [72, 68, 140], [72, 69, 141], [72, 71, 142], [72, 72, 143], [72, 73, 144], [72, 75, 145], [72, 76, 146], [72, 77, 147], [72, 79, 148], [72, 80, 149], [72, 82, 150], [72, 83, 150], [72, 84, 151], [72, 86, 152], [72, 87, 153], [72, 88, 154], [72, 90, 155], [71, 91, 156], [71, 92, 157], [71, 94, 158], [71, 95, 158], [71, 97, 159], [71, 98, 160], [71, 99, 161], [71, 101, 162], [71, 102, 163], [71, 103, 164], [71, 105, 164], [71, 106, 165], [71, 108, 166], [71, 109, 167], [71, 110, 168], [71, 112, 169], [71, 113, 169], [71, 114, 170], [71, 116, 171], [71, 117, 172], [70, 119, 173], [70, 120, 174], [70, 121, 174], [70, 123, 175], [70, 124, 176], [70, 125, 177], [70, 127, 178], [70, 128, 178], [70, 130, 179], [70, 131, 180], [70, 132, 181], [70, 134, 182], [70, 135, 182], [70, 136, 183], [70, 138, 184], [70, 139, 185], [70, 141, 186], [70, 142, 186], [70, 143, 187], [70, 145, 188], [70, 146, 189], [70, 148, 189], [70, 149, 190], [70, 150, 191], [70, 152, 192], [70, 153, 192], [70, 155, 193], [70, 156, 194], [70, 157, 195], [70, 159, 195], [70, 160, 196], [70, 162, 197], [70, 163, 198], [70, 164, 198], [70, 166, 199], [70, 167, 200], [71, 169, 200], [71, 170, 201], [71, 171, 202], [71, 173, 203], [71, 174, 203], [71, 176, 204], [71, 177, 205], [71, 178, 205], [72, 180, 206], [72, 181, 207], [72, 183, 207], [72, 184, 208], [73, 185, 209], [73, 187, 209], [73, 188, 210], [74, 190, 211], [74, 191, 211], [74, 192, 212], [75, 194, 213], [75, 195, 213], [76, 197, 214], [76, 198, 214], [77, 199, 215], [77, 201, 216], [78, 202, 216], [78, 204, 217], [79, 205, 217], [79, 207, 218], [80, 208, 218], [81, 209, 219], [81, 211, 220], [82, 212, 220], [83, 214, 221], [83, 215, 221], [84, 216, 222], [85, 218, 222], [85, 219, 223], [86, 221, 223], [87, 222, 224], [88, 224, 224], [88, 225, 225], [89, 226, 225], [90, 228, 226], [91, 229, 226], [92, 231, 227], [92, 232, 227], [93, 234, 228], [94, 235, 228], [95, 236, 229], [96, 238, 229], [97, 239, 230], [97, 241, 230], [98, 242, 231], [99, 244, 231], [100, 245, 232], [101, 246, 232], [102, 248, 233], [103, 249, 233], [104, 251, 234], [105, 252, 234]];
+const schemeJet = Array.from({ length: 256 }, (_, i2) => {
+  const t4 = i2 / 255;
+  let r3;
+  let g2;
+  let b2;
+  if (t4 < 0.125) {
+    r3 = 0;
+    g2 = 0;
+    b2 = 0.5 + t4 * 4;
+  } else if (t4 < 0.375) {
+    r3 = 0;
+    g2 = (t4 - 0.125) * 4;
+    b2 = 1;
+  } else if (t4 < 0.625) {
+    r3 = (t4 - 0.375) * 4;
+    g2 = 1;
+    b2 = 1 - (t4 - 0.375) * 4;
+  } else if (t4 < 0.875) {
+    r3 = 1;
+    g2 = 1 - (t4 - 0.625) * 4;
+    b2 = 0;
+  } else {
+    r3 = 1 - (t4 - 0.875) * 4;
+    g2 = 0;
+    b2 = 0;
+  }
+  return [Math.round(r3 * 255), Math.round(g2 * 255), Math.round(b2 * 255)];
+});
+const schemeGreys = Array.from({ length: 256 }, (_, i2) => [i2, i2, i2]);
 function rgbSpline$1(spline) {
   return (colors2) => {
     const n3 = colors2.length;
@@ -92750,7 +92813,15 @@ function basis$2(values3) {
   };
 }
 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)))];
+}
 interpolateRgbBasis(schemeRdBu);
+const interpolatePlasma = interpolateSequentialMulti(schemePlasma);
+const interpolateViridis = interpolateSequentialMulti(schemeViridis);
+const interpolateJet = interpolateSequentialMulti(schemeJet);
+const interpolateGreys = interpolateSequentialMulti(schemeGreys);
 function getCellColors(params2) {
   const { cellSets, cellSetSelection, cellSetColor, obsIndex, theme } = params2;
   if (cellSetSelection && cellSets) {
@@ -99532,7 +99603,7 @@ const Tooltip$2 = /* @__PURE__ */ React.forwardRef((props, ref2) => {
   }, extraProps), getChildren());
 });
 const nodeHeight = 32;
-const useStyles$v = makeStyles()((theme) => ({
+const useStyles$w = makeStyles()((theme) => ({
   setsManager: {
     position: "relative",
     width: "100%",
@@ -99699,7 +99770,7 @@ const useStyles$v = makeStyles()((theme) => ({
 }));
 function SetsManagerTreeGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.setsManagerTree, styles: {
     ".rc-tree": {
       paddingLeft: "0",
@@ -100040,7 +100111,7 @@ function HelpTooltipGlobalStyles(props) {
 }
 function PopoverGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(ScopedGlobalStyles, { parentClassName: classes2.popover, styles: {
     ".rc-tooltip-inner": {
       boxSizing: "border-box",
@@ -104724,7 +104795,7 @@ function NamedSetNodeStatic(props) {
   const onClick = level === 0 && !expanded ? () => onCheckLevel(nodeKey, nextLevelToCheck) : () => onNodeView(path2);
   const tooltipProps = disableTooltip ? { visible: false } : {};
   const popoverMenuConfig = makeNodeViewMenuConfig(props);
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("span", { children: [jsx$1(HelpTooltip, { title: tooltipText, ...tooltipProps, children: jsx$1("button", { type: "button", onClick, onKeyPress: (e3) => callbackOnKeyPress(e3, "v", () => onNodeView(path2)), className: classes2.titleButton, children: title2 }) }), popoverMenuConfig.length > 0 ? jsx$1(PopoverMenu, { menuConfig: makeNodeViewMenuConfig(props), color: level > 0 && editable ? color2 || getDefaultColor(theme) : null, setColor: (c2) => onNodeSetColor(path2, c2), children: jsx$1("span", { children: jsx$1(SvgMenu, { className: classes2.nodeMenuIcon, "aria-label": "Open Node View Menu" }) }) }) : null, level > 0 && isChecking ? checkbox2 : null, level > 0 && jsx$1("span", { className: classes2.nodeSizeLabel, children: niceSize })] });
 }
 function NamedSetNodeEditing(props) {
@@ -104736,7 +104807,7 @@ function NamedSetNodeEditing(props) {
       onNodeSetName(path2, currentTitle, true);
     }
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("span", { className: classes2.titleButtonWithInput, children: [jsx$1("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: true,
@@ -104762,7 +104833,7 @@ function LevelsButtons(props) {
       onCheckLevel(nodeKey, newLevel);
     }
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsx$1("div", { className: classes2.levelButtonsContainer, children: range$e(1, height2 + 1).map((i2) => {
     const isChecked = isEqual$3(path2, checkedLevelPath) && i2 === checkedLevelIndex;
     return jsx$1("div", { children: jsx$1(HelpTooltip, { title: getLevelTooltipText(i2), children: jsx$1("input", { className: clsx(classes2.levelRadioButton, { [classes2.levelRadioButtonChecked]: isChecked && !hasColorEncoding }), type: "checkbox", value: i2, checked: isChecked && hasColorEncoding, onChange: onCheck }) }) }, i2);
@@ -104846,7 +104917,7 @@ let TreeNode$1 = class TreeNode extends TreeNode$2 {
 };
 function PlusButton(props) {
   const { datatype, onError, onImportTree, onCreateLevelZeroNode, importable, editable } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   const onImport = useCallback((importHandler, mimeType) => () => {
     const uploadInputNode = document.createElement("input");
     uploadInputNode.setAttribute("type", "file");
@@ -104963,7 +105034,7 @@ function SetsManager(props) {
       }, onNodeCheckNewName, onNodeSetIsEditing: setIsEditingNodeName, onNodeRemove, onExportLevelZeroNodeJSON, onExportLevelZeroNodeTabular, onExportSetJSON, disableTooltip: isDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: renderTreeNodes(node2.children, readOnly, newPath) }, pathToKey(newPath));
     });
   }
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxs("div", { className: classes2.setsManager, children: [jsx$1(SetsManagerTreeGlobalStyles, { classes: classes2 }), jsxs("div", { className: classes2.setsManagerTree, children: [jsx$1(Tree$1, { draggable: false, checkable, checkedKeys: setSelectionKeys, expandedKeys: setExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), children: renderTreeNodes(processedSets.tree, true, []) }), jsx$1(Tree$1, { draggable: true, checkable, checkedKeys: additionalSetSelectionKeys, expandedKeys: additionalSetExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), onDrop: (info2) => {
     const { eventKey: dropKey } = info2.node.props;
     const { eventKey: dragKey } = info2.dragNode.props;
@@ -210928,22 +210999,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-Dcz65jWu.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-BlNLuocx.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-DMNeLVd7.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-BmHVONBc.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-4XvdCEqV.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-nYfk3Mbe.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-D7jhgu7h.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-BGB-_EKG.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-38TS7div.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-DKF2IGBX.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-J5N91MJw.js").then(async (m2) => {
+  () => import("./lerc-Db0ZEZ3c.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-CMXekglL.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-BTp31_-j.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -227717,7 +227788,7 @@ class ContourLayerWithText extends ContourLayer {
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
 ContourLayerWithText.defaultProps = defaultProps;
-const useStyles$u = makeStyles()(() => ({
+const useStyles$v = makeStyles()(() => ({
   toolButton: {
     display: "inline-flex",
     "&:active": {
@@ -227779,12 +227850,12 @@ const useStyles$u = makeStyles()(() => ({
 }));
 function IconTool(props) {
   const { alt, onClick, isActive: isActive2, children: children3 } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsx$1("button", { className: clsx(classes2.toolIcon, { [classes2.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children3 });
 }
 function IconButton(props) {
   const { alt, onClick, children: children3 } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsx$1("button", { className: clsx(classes2.toolIcon, classes2.toolButton), onClick, type: "button", title: alt, children: children3 });
 }
 function ToolMenu(props) {
@@ -227792,14 +227863,14 @@ function ToolMenu(props) {
   const lassoIconAltText = "Select lasso";
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
   return jsxs("div", { className: classes2.tool, children: [visibleTools.pan && jsx$1(IconTool, { alt: pointerIconAltText, onClick: () => setActiveTool(null), isActive: activeTool === null, children: jsx$1(SvgNearMe, {}) }), visibleTools.selectLasso ? jsx$1(IconTool, { alt: lassoIconAltText, onClick: () => setActiveTool(distEs6Exports$2.SELECTION_TYPE.POLYGON), isActive: activeTool === distEs6Exports$2.SELECTION_TYPE.POLYGON, children: jsx$1(SvgSelectionLasso, {}) }) : null, visibleTools.recenter ? jsx$1(IconButton, { alt: "click to recenter", onClick: () => onRecenterButtonCLick(), "aria-label": "Recenter scatterplot view", children: jsx$1(CenterFocusStrong, {}) }) : null] });
 }
 const getCursorWithTool = () => "crosshair";
-const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "default";
+const getCursor = (interactionState) => interactionState.isDragging ? "grabbing" : "grab";
 function getOnHoverCallback(obsIndex, setObsHighlight, setComponentHover) {
   return (info2) => {
     if (setComponentHover) {
@@ -228949,7 +229020,7 @@ function ScatterplotOptions(props) {
     id: `feature-aggregation-strategy-${scatterplotOptionsId}`
   }, children: FEATURE_AGGREGATION_STRATEGIES$2.map((opt) => jsx$1("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
 }
-const useStyles$t = makeStyles()((theme) => ({
+const useStyles$u = makeStyles()((theme) => ({
   tooltipAnchor: {
     position: "relative",
     width: "0px",
@@ -228980,7 +229051,7 @@ const useStyles$t = makeStyles()((theme) => ({
 function Tooltip3(props) {
   const { x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
   const ref2 = useRef();
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   const [placementX, setPlacementX] = useState("start");
   const [placementY, setPlacementY] = useState("bottom");
   const getTooltipContainer = useVitessceContainer(ref2);
@@ -228996,7 +229067,7 @@ function Tooltip3(props) {
   }, [x2, y2, parentWidth, parentHeight]);
   return jsx$1("div", { ref: ref2, className: classes2.tooltipAnchor, children: ref2 && ref2.current ? jsx$1(Popper, { open: true, anchorEl: ref2.current, container: getTooltipContainer, transition: true, placement: `${placementY}-${placementX}`, children: jsx$1(Paper, { elevation: 8, className: classes2.tooltipContent, children: children3 }) }) : null });
 }
-const useStyles$s = makeStyles()((theme) => ({
+const useStyles$t = makeStyles()((theme) => ({
   cellEmphasisCrosshair: {
     zIndex: 50,
     position: "absolute",
@@ -229007,7 +229078,7 @@ const useStyles$s = makeStyles()((theme) => ({
 }));
 function Tooltip2D(props) {
   const { parentUuid, sourceUuid, x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
-  const { classes: classes2 } = useStyles$s();
+  const { classes: classes2 } = useStyles$t();
   if (x2 < 0 || x2 > parentWidth || y2 < 0 || y2 > parentHeight) {
     return null;
   }
@@ -232919,7 +232990,7 @@ function getXlinkHref(cmap) {
   const xlinkHref = ramp(color2.copy().domain(quantize$3(interpolate$1$1(0, 1), n3))).toDataURL();
   return xlinkHref;
 }
-const useStyles$r = makeStyles()(() => ({
+const useStyles$s = makeStyles()(() => ({
   legend: {
     position: "relative",
     // Needed for absolute positioning of slider overlay
@@ -233116,7 +233187,7 @@ function Legend(props) {
     contourThresholds
   } = props;
   const svgRef = useRef(null);
-  const { classes: classes2 } = useStyles$r();
+  const { classes: classes2 } = useStyles$s();
   const [localRange, setLocalRange] = useState(featureValueColormapRange);
   useEffect(() => {
     setLocalRange(featureValueColormapRange);
@@ -233450,7 +233521,7 @@ function Legend(props) {
     }
   } })] })] });
 }
-const useStyles$q = makeStyles()(() => ({
+const useStyles$r = makeStyles()(() => ({
   multiLegend: {
     position: "absolute",
     top: "0px",
@@ -233477,7 +233548,7 @@ function MultiLegend(props) {
     pointLayerCoordination,
     pointMultiIndicesData
   } = props;
-  const { classes: classes2 } = useStyles$q();
+  const { classes: classes2 } = useStyles$r();
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
@@ -233570,7 +233641,7 @@ function MultiLegend(props) {
     }) : null;
   }) : null] });
 }
-const useStyles$p = makeStyles()(() => ({
+const useStyles$q = makeStyles()(() => ({
   channelNamesLegendContainer: {
     position: "absolute",
     bottom: "0px",
@@ -233593,7 +233664,7 @@ const useStyles$p = makeStyles()(() => ({
 }));
 function ChannelNamesLegend(props) {
   const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination } = props;
-  const { classes: classes2 } = useStyles$p();
+  const { classes: classes2 } = useStyles$q();
   const reversedImageLayerScopes = useMemo$1(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
   return jsx$1("div", { className: classes2.channelNamesLegendContainer, children: imageLayerScopes ? reversedImageLayerScopes.map((layerScope) => {
     const layerCoordination = imageLayerCoordination[0][layerScope];
@@ -255200,7 +255271,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.viewInfoDidUpdate();
     const shallowDiff2 = (propName) => prevProps[propName] !== this.props[propName];
     const shallowDiffByLayer2 = (propName, scopeName) => prevProps?.[propName]?.[scopeName] !== this.props?.[propName]?.[scopeName];
-    const shallowDiffByChannel = (propName, firstName, secondName) => prevProps?.[propName]?.[firstName]?.[secondName] !== this.props?.[propName]?.[firstName]?.[secondName];
+    const shallowDiffByChannel2 = (propName, firstName, secondName) => prevProps?.[propName]?.[firstName]?.[secondName] !== this.props?.[propName]?.[firstName]?.[secondName];
     const shallowDiffByLayerCoordination = (propName, layerScope) => prevProps?.[propName]?.[0]?.[layerScope] !== this.props?.[propName]?.[0]?.[layerScope];
     const shallowDiffByChannelCoordination = (propName, layerScope, channelScope) => prevProps?.[propName]?.[0]?.[layerScope]?.[channelScope] !== this.props?.[propName]?.[0]?.[layerScope]?.[channelScope];
     let forceUpdate = false;
@@ -255221,7 +255292,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     } else {
       this.props.segmentationLayerScopes?.forEach((layerScope) => {
         this.props.segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
-          if (shallowDiffByChannel("obsSegmentationsLocations", layerScope, channelScope)) {
+          if (shallowDiffByChannel2("obsSegmentationsLocations", layerScope, channelScope)) {
             this.onUpdateSegmentationsLocationsData(layerScope, channelScope);
             forceUpdate = true;
           }
@@ -255234,7 +255305,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     } else {
       this.props.segmentationLayerScopes?.forEach((layerScope) => {
         this.props.segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
-          if (shallowDiffByChannel("obsSegmentationsSets", layerScope, channelScope) || shallowDiffByChannelCoordination("segmentationChannelCoordination", layerScope, channelScope)) {
+          if (shallowDiffByChannel2("obsSegmentationsSets", layerScope, channelScope) || shallowDiffByChannelCoordination("segmentationChannelCoordination", layerScope, channelScope)) {
             this.onUpdateSegmentationsSetsData(layerScope, channelScope);
             forceUpdate = true;
           }
@@ -255247,7 +255318,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     } else {
       this.props.segmentationLayerScopes?.forEach((layerScope) => {
         this.props.segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
-          if (shallowDiffByChannel("segmentationMatrixIndices", layerScope, channelScope)) {
+          if (shallowDiffByChannel2("segmentationMatrixIndices", layerScope, channelScope)) {
             this.onUpdateSegmentationsIndexData(layerScope, channelScope);
             forceUpdate = true;
           }
@@ -255260,7 +255331,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     } else {
       this.props.segmentationLayerScopes.forEach((layerScope) => {
         this.props.segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
-          if (shallowDiffByChannel("segmentationMatrixIndices", layerScope, channelScope) || shallowDiffByChannel("segmentationMultiExpressionData", layerScope, channelScope)) {
+          if (shallowDiffByChannel2("segmentationMatrixIndices", layerScope, channelScope) || shallowDiffByChannel2("segmentationMultiExpressionData", layerScope, channelScope)) {
             this.onUpdateSegmentationsExpressionData(layerScope, channelScope);
             forceUpdate = true;
           }
@@ -255514,12 +255585,12 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-C2U2CO2P.js").then((n3) => n3.a);
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-CA6Y_Dls.js").then((n3) => n3.a);
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialThree, { ...props }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-DuFOjj6d.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-gStG4FEQ.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = React__default.forwardRef((props, ref2) => jsx$1("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsx$1(ErrorBoundary, { fallback: jsx$1("div", { children: "3D spatial view is not available in this environment." }), children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazySpatialAccelerated, { ...props }) }) }) }));
@@ -255696,7 +255767,8 @@ function SpatialSubscriber(props) {
     bitmaskValueIsIndex = false,
     // TODO: move to coordination type
     three: threeFor3d = false,
-    accelerated: acceleratedFor3d = false
+    accelerated: acceleratedFor3d = false,
+    helpText = ViewHelpMapping.SPATIAL_BETA
   } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
@@ -256140,7 +256212,7 @@ function SpatialSubscriber(props) {
       }
     }
   };
-  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, children: [shouldUseThree ? acceleratedFor3d ? jsx$1(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
+  return jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, helpText, children: [shouldUseThree ? acceleratedFor3d ? jsx$1(SpatialAcceleratedAdapter, { ref: threeRef, uuid: uuid2, width: width2, height: height2, theme, hideTools: !isSelectable, rotation: [rotationX, rotationY, rotationZ], setRotationX, setRotationY, setRotationZ, targetT, targetZ, viewState: isValidViewState ? {
     zoom: zoom2,
     target: [targetX2, targetY2, targetZ],
     rotationX,
@@ -263591,7 +263663,7 @@ _defineProperty$3(WindowScroller, "defaultProps", {
   serverHeight: 0,
   serverWidth: 0
 });
-const useStyles$o = makeStyles()((theme) => ({
+const useStyles$p = makeStyles()((theme) => ({
   selectableTable: {
     flex: "1 1 auto",
     outline: "none"
@@ -263740,7 +263812,7 @@ function SelectableTable(props) {
       onChange(null);
     }
   }, [selectedRows, allowMultiple]);
-  const { classes: classes2 } = useStyles$o();
+  const { classes: classes2 } = useStyles$p();
   const inputUuid = v4$1();
   const rowRenderer = ({ index: index2, style: style2 }) => (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -263765,7 +263837,7 @@ const FEATURELIST_SORT_OPTIONS = [
   "original"
 ];
 const ALT_COLNAME = "Alternate ID";
-const useStyles$n = makeStyles()(() => ({
+const useStyles$o = makeStyles()(() => ({
   searchBar: {
     marginTop: "10px",
     marginLeft: "10px",
@@ -263778,7 +263850,7 @@ const useStyles$n = makeStyles()(() => ({
 }));
 function FeatureList(props) {
   const { width: width2, height: height2, hasColorEncoding, geneList = [], featureLabelsMap, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showFeatureTable, featureListSort, featureListSortKey, hasFeatureLabels, primaryColumnName } = props;
-  const { classes: classes2 } = useStyles$n();
+  const { classes: classes2 } = useStyles$o();
   const [searchTerm, setSearchTerm] = useState("");
   const selectableTableSortKey = featureListSortKey === "featureIndex" ? "key" : "name";
   const searchResults = useMemo$1(() => geneList.filter((gene) => gene.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(gene)?.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(cleanFeatureId(gene))?.toLowerCase().includes(searchTerm.toLowerCase())), [geneList, searchTerm, featureLabelsMap]);
@@ -263843,7 +263915,7 @@ function FeatureListOptions(props) {
   const { classes: classes2 } = usePlotOptionsStyles();
   return jsxs(OptionsContainer, { children: [children3, jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-option-${featureListId}`, children: "Sort Ordering" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, value: featureListSort, onChange: handleFeatureListSortChange, inputProps: {
     id: `feature-list-sort-option-${featureListId}`
-  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsx$1("option", { value: option, children: option }, option)) }) })] }), hasFeatureLabels ? jsxs(Fragment, { children: [jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-key-${featureListId}`, children: "Sort Key" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
+  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsx$1("option", { value: option, children: capitalize$3(option) }, option)) }) })] }), hasFeatureLabels ? jsxs(Fragment, { children: [jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-sort-key-${featureListId}`, children: "Sort Key" }) }), jsx$1(TableCell, { variant: "body", children: jsx$1(OptionSelect, { className: classes2.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 ? jsxs(Fragment, { children: [jsx$1("option", { value: "featureLabels", children: primaryColumnName }), jsx$1("option", { value: "featureIndex", children: ALT_COLNAME })] }) : jsx$1("option", { value: "featureIndex", children: primaryColumnName }) }) })] }), jsxs(TableRow, { children: [jsx$1(TableCell, { className: classes2.labelCell, variant: "head", scope: "row", children: jsx$1("label", { htmlFor: `feature-list-show-alternative-ids-${featureListId}`, children: "Show Alternate IDs" }) }), jsx$1(TableCell, { className: classes2.inputCell, variant: "body", children: jsx$1(Checkbox$1, { className: classes2.tableCheckbox, checked: showFeatureTable, onChange: handleShowTableChange, name: "feature-list-show-table", color: "default", slotProps: { input: {
@@ -263851,7 +263923,7 @@ function FeatureListOptions(props) {
     id: `feature-list-show-alternative-ids-${featureListId}`
   } } }) })] })] }) : null] });
 }
-const useStyles$m = makeStyles()((theme) => ({
+const useStyles$n = makeStyles()((theme) => ({
   featureListContainer: {
     width: "100%",
     height: "100%",
@@ -263866,7 +263938,7 @@ function FeatureListSubscriber(props) {
   const loaders = useLoaders();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const [width2, height2, containerRef] = useGridItemSize();
-  const { classes: classes2 } = useStyles$m();
+  const { classes: classes2 } = useStyles$n();
   const [{ dataset, obsType, featureType, featureSelection: geneSelection, featureFilter: geneFilter, obsColorEncoding: cellColorEncoding }, { setFeatureSelection: setGeneSelection, setFeatureFilter: setGeneFilter, setFeatureHighlight: setGeneHighlight, setObsColorEncoding: setCellColorEncoding }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_LIST], coordinationScopes);
   const variablesLabel = variablesLabelOverride || featureType;
   const title2 = titleOverride || `${capitalize$3(variablesLabel)} List`;
@@ -264001,7 +264073,7 @@ const useSelectionSliderStyles = makeStyles()(() => ({
     backgroundColor: "rgba(128, 128, 128, 0.7)"
   }
 }));
-const useStyles$l = makeStyles()((theme) => ({
+const useStyles$m = makeStyles()((theme) => ({
   paletteContainer: {
     width: "70px",
     height: "40px",
@@ -264022,10 +264094,10 @@ const useStyles$l = makeStyles()((theme) => ({
   }
 }));
 const ColorPalette = ({ handleChange }) => {
-  const { classes: classes2 } = useStyles$l();
+  const { classes: classes2 } = useStyles$m();
   return jsx$1("div", { className: classes2.paletteContainer, "aria-label": "Color swatch", children: VIEWER_PALETTE.map((color2) => jsx$1(IconButton$1, { className: classes2.button, onClick: () => handleChange(color2), "aria-label": `Change color to ${color2}`, children: jsx$1(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes2.icon }) }, color2)) });
 };
-const useStyles$k = makeStyles()(() => ({
+const useStyles$l = makeStyles()(() => ({
   menuButton: {
     backgroundColor: "transparent"
   },
@@ -264044,7 +264116,7 @@ function MuiSpan(props) {
 }
 function ChannelOptions$1({ handlePropertyChange, handleChannelRemove, handleIQRUpdate }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$k();
+  const { classes: classes2 } = useStyles$l();
   const handleColorSelect = (color2) => {
     handlePropertyChange("color", color2);
   };
@@ -264661,7 +264733,7 @@ function LayerController$1(props) {
     minWidth: "50%"
   } })] }), jsx$1(TabPanel, { value: tab2, index: 0, children: FullController }), jsx$1(TabPanel, { value: tab2, index: 1, style: { marginTop: 4 }, children: jsx$1(VolumeOptions, { loader: loader2, handleSlicerSetting, handleRenderingModeChange: setRenderingMode, renderingMode, xSlice, ySlice, zSlice, use3d, setViewState, spatialHeight, spatialWidth, modelMatrix: modelMatrix2 }) })] }) : FullController, shouldShowRemoveLayerButton ? jsx$1(Button, { onClick: handleLayerRemove, fullWidth: true, variant: "outlined", style: buttonStyles, size: "small", children: "Remove Image Layer" }) : null] })] });
 }
-const useStyles$j = makeStyles()(() => ({
+const useStyles$k = makeStyles()(() => ({
   addButton: {
     marginTop: "10px",
     marginBottom: "10px",
@@ -264673,7 +264745,7 @@ function ImageAddIcon() {
 }
 function ImageAddButton({ imageOptions, handleImageAdd }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$j();
+  const { classes: classes2 } = useStyles$k();
   const handleAdd = (imgData) => {
     setOpen((prev2) => !prev2);
     handleImageAdd(imgData);
@@ -265005,7 +265077,7 @@ const useEllipsisMenuStyles = makeStyles()(() => ({
     padding: "4px"
   }
 }));
-const useStyles$i = makeStyles()(() => ({
+const useStyles$j = makeStyles()(() => ({
   colorPickerPaper: {
     overflow: "hidden",
     "& > ul": {
@@ -265063,7 +265135,7 @@ function ChannelColorPickerMenu(props) {
       setColor2([rgb2.r, rgb2.g, rgb2.b]);
     }
   }
-  const { classes: classes2 } = useStyles$i();
+  const { classes: classes2 } = useStyles$j();
   const currentColor = color2 ? colorArrayToString(color2) : colorArrayToString(getDefaultColor(theme));
   const isWritable = typeof setColor2 === "function";
   const derivedOpen = isWritable ? isStaticColor && visible ? open2 : false : false;
@@ -265071,7 +265143,7 @@ function ChannelColorPickerMenu(props) {
     [classes2.colorIconOutline]: theme !== "dark" && isEqual$3(color2, [255, 255, 255])
   }), style: { backgroundColor: currentColor } }) : isColormap && visible && featureValueColormap ? jsx$1("div", { className: classes2.colorIcon, children: jsx$1("svg", { width: "18", height: "18", children: jsx$1("image", { x: 0, y: 0, width: 18, height: 18, preserveAspectRatio: "none", href: getXlinkHref(featureValueColormap), clipPath: "inset(0% round 4px)" }) }) }) : jsx$1("div", { className: classes2.colorIcon }), buttonClassName: classes2.colorIconButton, withPaper: true, paperClassName: classes2.colorPickerPaper, "aria-label": "Open color picker menu", children: jsx$1(Twitter$1, { className: classes2.colorPicker, disableAlpha: true, width: 108, triangle: "hide", colors: defaultPalette, color: currentColor, onChangeComplete: handleColorChange }) });
 }
-const useStyles$h = makeStyles()(() => ({
+const useStyles$i = makeStyles()(() => ({
   layerTypeSpotIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -265084,7 +265156,7 @@ const useStyles$h = makeStyles()(() => ({
 function SpotLayerEllipsisMenu(props) {
   const { strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$h();
+  const { classes: classes2 } = useStyles$i();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -265106,7 +265178,7 @@ function SpotLayerController(props) {
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const { classes: classes2 } = useStyles$h();
+  const { classes: classes2 } = useStyles$i();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -265116,7 +265188,7 @@ function SpotLayerController(props) {
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle spot layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SpotLayerEllipsisMenu, { filled, setFilled, strokeWidth, setStrokeWidth, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgSpots, { className: classes2.layerTypeSpotIcon }) })] }) }) });
 }
-const useStyles$g = makeStyles()(() => ({
+const useStyles$h = makeStyles()(() => ({
   layerFeatureControllerGrid: {
     padding: "0",
     flexWrap: "nowrap"
@@ -265161,14 +265233,15 @@ function LayerPerFeatureController(props) {
       ]);
     }
   }, [featureName, featureColor, setFeatureColor, featureColorIndex]);
-  const { classes: classes2 } = useStyles$g();
+  const { classes: classes2 } = useStyles$h();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const [open2, setOpen] = useState(false);
   const { colorPickerColor, colorPickerReadable, colorPickerWritable, colorPickerTooltip } = useMemo$1(() => {
     if (obsColorEncoding === "geneSelection") {
+      const storedColor = featureColor?.find((fc) => fc.name === featureName)?.color;
       return {
-        colorPickerColor: featureColor?.[featureColorIndex]?.color ?? spatialLayerColor,
+        colorPickerColor: storedColor ?? randomByFeatureColor ?? spatialLayerColor,
         colorPickerReadable: true,
         colorPickerWritable: true,
         colorPickerTooltip: null
@@ -265214,7 +265287,7 @@ function LayerPerFeatureController(props) {
   ]);
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleRemoveFeature, className: menuClasses.imageLayerVisibleButton, "aria-label": "Remove feature", children: jsx$1(ClearIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(Tooltip$3, { title: colorPickerTooltip ?? "", disableHoverListener: !colorPickerTooltip, placement: "top", children: jsx$1("span", { children: jsx$1(ChannelColorPickerMenu, { theme, color: colorPickerColor, setColor: colorPickerWritable ? handleColorChange : null, palette, isStaticColor: colorPickerReadable, isColormap: false, featureValueColormap, visible: true }) }) }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: featureName }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${featureName}` }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypeFeatureIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.layerFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null] }) }, featureName);
 }
-const useStyles$f = makeStyles()(() => ({
+const useStyles$g = makeStyles()(() => ({
   pointLayerButton: {
     borderStyle: "dashed",
     marginTop: "10px",
@@ -265243,7 +265316,7 @@ const useStyles$f = makeStyles()(() => ({
   }
 }));
 function PointLayerEllipsisMenu(props) {
-  const { featureSelection, featureFilterMode, setFeatureFilterMode, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
+  const { featureSelection, featureFilterMode, setFeatureFilterMode, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
@@ -265253,7 +265326,8 @@ function PointLayerEllipsisMenu(props) {
   const crosshairsVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   const legendVisibleId = $bdb11010cef70236$export$f680877a34711e37();
   const featureFilterModeId = $bdb11010cef70236$export$f680877a34711e37();
-  return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open point layer options menu", children: [jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxs(NativeSelect, { onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "spatialLayerColor", children: "Static Color" }), jsx$1("option", { value: "geneSelection", children: "Feature Color" }), jsx$1("option", { value: "randomByFeature", children: "Random Color per Feature" }), jsx$1("option", { value: "random", children: "Random Color per Point" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: featureFilterModeId, children: "Filter to Feature Selection: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: featureFilterMode === "featureSelection", onChange: (e3, v) => setFeatureFilterMode(v ? "featureSelection" : null), slotProps: { input: { id: featureFilterModeId, "aria-label": "Toggle feature filter mode" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsx$1(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } } })] })] });
+  const colormapSelectorId = $bdb11010cef70236$export$f680877a34711e37();
+  return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, getAriaLabel: () => "Open point layer options menu", children: [jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapSelectorId, children: "Colormap: " }), jsx$1(NativeSelect, { onChange: (e3) => setFeatureValueColormap(e3.target.value), value: featureValueColormap, inputProps: { id: colormapSelectorId, "aria-label": "Colormap selector" }, classes: { root: selectClasses2.selectRoot }, children: GLSL_COLORMAPS.map((cmap) => jsx$1("option", { value: cmap, children: cmap }, cmap)) })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxs(NativeSelect, { onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "spatialLayerColor", children: "Static Color" }), jsx$1("option", { value: "geneSelection", children: "Feature Color" }), jsx$1("option", { value: "randomByFeature", children: "Random Color per Feature" }), jsx$1("option", { value: "random", children: "Random Color per Point" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: featureFilterModeId, children: "Filter to Feature Selection: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: featureFilterMode === "featureSelection", onChange: (e3, v) => setFeatureFilterMode(v ? "featureSelection" : null), slotProps: { input: { id: featureFilterModeId, "aria-label": "Toggle feature filter mode" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsx$1(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } } })] })] });
 }
 function PointLayerController(props) {
   const { theme, layerScope, layerCoordination, setLayerCoordination, palette = null, pointMatrixIndicesData, tiledPointsLoadingProgress, layerPerFeatureForPoints } = props;
@@ -265283,7 +265357,7 @@ function PointLayerController(props) {
   }, [featureColor, featureSelection]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor" || obsColorEncoding === "geneSelection";
   const showStaticColor = obsColorEncoding === "spatialLayerColor" || obsColorEncoding === "geneSelection" && hasUnspecifiedFeatureColors;
-  const isColormap = false;
+  const isColormap = obsColorEncoding === "geneSelection";
   const hasSingleSelectedFeature = obsColorEncoding === "geneSelection" && Array.isArray(featureSelection) && featureSelection.length === 1;
   const color2 = useMemo$1(() => {
     if (showStaticColor) {
@@ -265330,7 +265404,7 @@ function PointLayerController(props) {
     featureSelection,
     showStaticColor
   ]);
-  const { classes: classes2 } = useStyles$f();
+  const { classes: classes2 } = useStyles$g();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -265342,9 +265416,24 @@ function PointLayerController(props) {
   const [coloringTabIndex, setColoringTabIndex] = useState(0);
   const { featureIndex } = pointMatrixIndicesData || {};
   const hasSelectedFeatures = Array.isArray(featureSelection) && featureSelection.length > 0;
-  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
+  useEffect(() => {
+    if (obsColorEncoding !== "geneSelection" || !Array.isArray(featureSelection))
+      return;
+    const cleanedFeatureColor = (featureColor ?? []).filter((fc) => featureSelection.includes(fc.name));
+    const missingEntries = featureSelection.filter((featureName) => !cleanedFeatureColor.find((fc) => fc.name === featureName)).map((featureName) => {
+      const varIdx = featureIndex?.indexOf(featureName) ?? -1;
+      const fColor = varIdx >= 0 ? PALETTE[varIdx % PALETTE.length] : getDefaultColor(theme);
+      return { name: featureName, color: fColor };
+    });
+    const nextFeatureColor = [...cleanedFeatureColor, ...missingEntries];
+    const changed = nextFeatureColor.length !== featureColor?.length || missingEntries.length > 0;
+    if (changed) {
+      setFeatureColor(nextFeatureColor);
+    }
+  }, [featureSelection, obsColorEncoding, featureIndex, featureColor]);
+  return jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode, featureValueColormap, setFeatureValueColormap }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsx$1(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsx$1(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), layerPerFeatureForPoints && hasSelectedFeatures ? jsxs(Fragment, { children: [featureSelection.map((featureName) => jsx$1(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsx$1(VisibilityOffIcon, {}) : jsx$1(VisibilityIcon, {}) }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsx$1(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
 }
-const useStyles$e = makeStyles()(() => ({
+const useStyles$f = makeStyles()(() => ({
   layerTypeSegmentationIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -265357,7 +265446,7 @@ const useStyles$e = makeStyles()(() => ({
 function SegmentationChannelEllipsisMenu(props) {
   const { obsType, featureType, featureValueType, strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$e();
+  const { classes: classes2 } = useStyles$f();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -265376,7 +265465,7 @@ function SegmentationChannelController(props) {
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialChannelColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const { classes: classes2 } = useStyles$e();
+  const { classes: classes2 } = useStyles$f();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -268094,7 +268183,7 @@ function useBaseQuery(options, Observer, queryClient) {
 function useQuery(options, queryClient) {
   return useBaseQuery(options, QueryObserver);
 }
-const useStyles$d = makeStyles()(() => ({
+const useStyles$e = makeStyles()(() => ({
   channelMenuButton: {
     backgroundColor: "transparent",
     padding: "3px 0",
@@ -268108,7 +268197,7 @@ const useStyles$d = makeStyles()(() => ({
 function ChannelOptions(props) {
   const { onRemove: onRemove2, onResetWindowUsingIQR, showValueExtent, setShowValueExtent, numResolutions, spatialMaxResolution, setSpatialMaxResolution } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$d();
+  const { classes: classes2 } = useStyles$e();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   function handleRemove() {
@@ -268121,7 +268210,7 @@ function ChannelOptions(props) {
   const domainTypeId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes2.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Best Resolution: " }), jsx$1(Slider, { value: spatialMaxResolution || 1, valueLabelDisplay: "auto", onChange: (e3, v) => setSpatialMaxResolution(v), min: 1, max: numResolutions - 1, step: 1, orientation: "horizontal" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxs(NativeSelect, { onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "Value Min/Max", children: "Value Min/Max" }), jsx$1("option", { value: "Dtype Min/Max", children: "Dtype Min/Max" })] })] }), jsx$1(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes2.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsx$1(MenuItem, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes2.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
 }
-const useStyles$c = makeStyles()(() => ({
+const useStyles$d = makeStyles()(() => ({
   channelSlider: {
     marginTop: "7px"
   }
@@ -268131,7 +268220,7 @@ function ChannelSlider(props) {
   const rgbColor = toRgbUIString(colormapOn, color2, theme);
   const dtype = image2?.getDtype();
   const fullDomain = dtype ? DOMAINS[dtype] : [0, 0];
-  const { classes: classes2 } = useStyles$c();
+  const { classes: classes2 } = useStyles$d();
   useEffect(() => {
     if (!window2 && !disabled && Array.isArray(minMaxDomain)) {
       setWindow2(minMaxDomain);
@@ -268146,7 +268235,7 @@ function ChannelSlider(props) {
     return `${labelPrefix} for ${rgbColor} colormap channel`;
   }, getAriaValueText: () => `Current colormap values: ${rgbColor}-${window2}`, min: min2, max: max2, step, orientation: "horizontal", className: classes2.channelSlider, style: { color: rgbColor }, disabled });
 }
-const useStyles$b = makeStyles()(() => ({
+const useStyles$c = makeStyles()(() => ({
   visibilityCheckbox: {
     padding: "10px 0"
   }
@@ -268160,10 +268249,10 @@ function getCheckboxColor(colormapOn, color2, theme) {
 function ChannelVisibilityCheckbox(props) {
   const { color: color2, visible, setVisible, disabled, theme, colormapOn } = props;
   const rgbColor = getCheckboxColor(colormapOn, color2, theme);
-  const { classes: classes2 } = useStyles$b();
+  const { classes: classes2 } = useStyles$c();
   return jsx$1(Checkbox$1, { onChange: (e3, v) => setVisible(v), checked: visible, disabled, className: classes2.visibilityCheckbox, style: { color: rgbColor, "&$checked": { color: rgbColor } }, slotProps: { input: { "aria-label": "Toggle channel visibility" } } });
 }
-const useStyles$a = makeStyles()(() => ({
+const useStyles$b = makeStyles()(() => ({
   oneLineChannelSelect: {
     width: "90%",
     marginLeft: "5%",
@@ -268171,17 +268260,23 @@ const useStyles$a = makeStyles()(() => ({
   }
 }));
 function ChannelSelectionDropdown(props) {
-  const { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
-  const { classes: classes2 } = useStyles$a();
+  const { featureIndex, channelsSortOrder, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
+  const { classes: classes2 } = useStyles$b();
   const { classes: selectClasses2 } = useSelectStyles();
   function handleChange(event2) {
     setTargetC(event2.target.value === "" ? null : Number(event2.target.value));
     setWindow2(null);
   }
-  return Array.isArray(featureIndex) ? jsx$1(NativeSelect, { classes: { root: selectClasses2.selectRoot }, className: classes2.oneLineChannelSelect, value: targetC === null ? "" : targetC, onChange: handleChange, inputProps: { "aria-label": "Channel selector" }, children: featureIndex.map((channelName, channelIndex) => (
-    // eslint-disable-next-line react/no-array-index-key
-    jsx$1("option", { disabled, value: channelIndex, children: channelName }, `${channelName}-${channelIndex}`)
-  )) }) : null;
+  const sortedOptions = useMemo$1(() => {
+    if (!Array.isArray(featureIndex))
+      return [];
+    const options = featureIndex.map((channelName, channelIndex) => ({ channelName, channelIndex }));
+    if (channelsSortOrder === "alphabetical") {
+      return options.sort((a2, b2) => a2.channelName.localeCompare(b2.channelName, void 0, { numeric: true, sensitivity: "base" }));
+    }
+    return options;
+  }, [featureIndex, channelsSortOrder]);
+  return Array.isArray(featureIndex) ? jsx$1(NativeSelect, { classes: { root: selectClasses2.selectRoot }, className: classes2.oneLineChannelSelect, value: targetC === null ? "" : targetC, onChange: handleChange, inputProps: { "aria-label": "Channel selector" }, children: sortedOptions.map(({ channelName, channelIndex }) => jsx$1("option", { disabled, value: channelIndex, children: channelName }, `${channelName}-${channelIndex}`)) }) : null;
 }
 function ImageChannelController(props) {
   const {
@@ -268209,7 +268304,8 @@ function ImageChannelController(props) {
     spatialRenderingMode,
     numResolutions,
     spatialMaxResolution,
-    setSpatialMaxResolution
+    setSpatialMaxResolution,
+    channelsSortOrder
   } = props;
   const removeChannel = useRemoveImageChannelInMetaCoordinationScopes();
   const [showValueExtent, setShowValueExtent] = useState(true);
@@ -268246,7 +268342,7 @@ function ImageChannelController(props) {
       setWindow2(minMaxDomain);
     }
   }
-  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading }) }), jsx$1(Grid$1, { size: 3, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
+  return jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelVisibilityCheckbox, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, colormapOn }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelColorPickerMenu, { color: color2, setColor: setColor2, visible, setVisible, disabled: isLoading, theme, isStaticColor: !colormapOn, palette: VIEWER_PALETTE }) }), jsx$1(Grid$1, { size: 6, children: jsx$1(ChannelSelectionDropdown, { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled: isLoading, channelsSortOrder }) }), jsx$1(Grid$1, { size: 3, children: jsx$1(ChannelSlider, { image: image2, targetT, targetZ, targetC, window: window2, setWindow: setWindow2, disabled, color: color2, theme, colormapOn, showValueExtent, minMaxDomain }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ChannelOptions, { onRemove: onRemove2, showValueExtent, setShowValueExtent, onResetWindowUsingIQR: handleResetWindowUsingIQR, numResolutions, spatialMaxResolution, setSpatialMaxResolution }) })] });
 }
 function DimensionSlider(props) {
   const { boundingSlice, sliceValue, setSliceValue, label: label2 } = props;
@@ -268300,7 +268396,7 @@ function LoadingStatusIndicator(props) {
   }
   return jsxs(Grid$1, { container: true, px: 0.5, children: [jsx$1(Grid$1, { size: 6, alignItems: "start", children: jsx$1(Grid$1, { container: true, alignItems: "center", gap: 1, children: statusColor !== "success" ? jsx$1(StatusChip, { label: statusLabel, color: statusColor, size: "small" }) : null }) }), jsx$1(Grid$1, { size: 6, px: 1, my: 0.25, children: jsx$1(LoadingText, { bricksLoaded, currentRequestCount, totalBricksRequested, isLoading }) }), jsx$1(Grid$1, { size: 12, children: jsxs(Grid$1, { container: true, direction: "row", spacing: 2, alignItems: "center", wrap: "nowrap", children: [jsx$1(LoadingControlButton, { startIcon: jsx$1(Stop, {}), onClick: onStopLoading, disabled: noNewRequests, ariaLabel: "Stop loading data and render at highest resolution", children: "Stop Loading" }), jsx$1(LoadingControlButton, { startIcon: jsx$1(Replay, {}), onClick: onRestartLoading, disabled: !noNewRequests && !isLoading, ariaLabel: "Restart data loading", children: "Restart Loading" })] }) }), jsx$1(Grid$1, { size: 12, visibility: isLoading ? "visible" : "hidden", mt: 1, mb: 0.5, children: jsx$1(LinearProgress, { variant: "determinate", value: percentage }) })] });
 }
-const useStyles$9 = makeStyles()(() => ({
+const useStyles$a = makeStyles()(() => ({
   imageLayerButton: {
     borderStyle: "dashed",
     marginTop: "10px",
@@ -268345,7 +268441,7 @@ const lodSliderRangeConfig = {
   step: 1
 };
 function ImageLayerEllipsisMenu(props) {
-  const { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize } = props;
+  const { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder } = props;
   const [open2, setOpen] = useState(false);
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
@@ -268371,6 +268467,9 @@ function ImageLayerEllipsisMenu(props) {
   function handleChannelLabelsOrientationChange(event2) {
     setChannelLabelsOrientation(event2.target.value);
   }
+  function handleChannelsSortOrderChange(event2) {
+    setChannelsSortOrder(event2.target.value);
+  }
   function handleLodFactorChange(event2, value2) {
     setLocalLodSliderValue(value2);
   }
@@ -268392,11 +268491,12 @@ function ImageLayerEllipsisMenu(props) {
   const channelLabelsOrientationId = $bdb11010cef70236$export$f680877a34711e37();
   const channelLabelSizeId = $bdb11010cef70236$export$f680877a34711e37();
   const lodFactorId = $bdb11010cef70236$export$f680877a34711e37();
+  const channelsSortOrderId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open image layer options menu", children: [is3dMode && jsxs(MenuItem, { dense: true, disableGutters: true, className: menuClasses.menuItem, children: [jsx$1("label", { id: `${lodFactorId}-label`, className: menuClasses.imageLayerMenuLabel, htmlFor: lodFactorId, children: "LOD Factor: " }), jsx$1(Slider, { disabled: !is3dMode, value: localLodSliderValue, onChange: handleLodFactorChange, onChangeCommitted: handleLodFactorChangeCommitted, className: menuClasses.menuItemSlider, orientation: "horizontal", id: lodFactorId, "aria-label": "Level of detail factor slider", valueLabelDisplay: "off", ...lodSliderRangeConfig }), jsx$1(Box, { px: 1 }), jsx$1(Input$1, { value: localLodSliderValue, onChange: handleLodFactorInputChange, onBlur: handleLodFactorInputChange, "aria-labelledby": `${lodFactorId}-label`, size: "small", sx: { width: "6ch", flexShrink: 0, fontVariantNumeric: "tabular-nums" }, endAdornment: jsx$1(InputAdornment$1, { position: "end", variant: "standard", sx: { "& > p": { marginBottom: 0 } }, children: "%" }), inputProps: {
     ...lodSliderRangeConfig,
     inputMode: "numeric",
     pattern: "[0-9]*"
-  } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleColormapChange, value: colormap === null ? "" : colormap, inputProps: { id: colormapId, "aria-label": "Colormap selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsx$1("option", { value: name2, children: name2 }, name2))] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: interpretationId, children: "Photometric Interpretation: " }), jsxs(NativeSelect, { onChange: handleInterpretationChange, value: photometricInterpretation, inputProps: { id: interpretationId, "aria-label": "Photometric interpretation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "RGB", value: "RGB", children: "RGB" }), channelScopes.length > 0 ? jsx$1("option", { "aria-label": "BlackIsZero", value: "BlackIsZero", children: "BlackIsZero" }) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: transparentId, children: "Zero Transparent: " }), jsx$1(Checkbox$1, { color: "primary", checked: spatialLayerTransparentColor !== null, onChange: (e3, v) => setSpatialLayerTransparentColor(v ? [0, 0, 0] : null), slotProps: { input: { id: transparentId, "aria-label": "Render zero-value pixels as transparent" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: volumetricId, children: "Volumetric Rendering: " }), jsxs(NativeSelect, { onChange: handleVolumetricChange, value: volumetricRenderingAlgorithm, inputProps: { id: volumetricId, "aria-label": "Volumetric rendering algorithm selector" }, classes: { root: selectClasses2.selectRoot }, disabled: !is3dMode, children: [jsx$1("option", { "aria-label": "Additive", value: "additive", children: "Additive" }), jsx$1("option", { "aria-label": "Maximum Intensity Projection", value: "maximumIntensityProjection", children: "Maximum Intensity Projection" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: resolutionId, children: "Volume Resolution: " }), jsxs(NativeSelect, { disabled: !is3dMode || !isMultiResolution, onChange: handleResolutionChange, value: spatialTargetResolution === null ? "auto" : spatialTargetResolution, inputProps: { id: resolutionId, "aria-label": "Volumetric resolution selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "auto", children: "Auto" }), Array.isArray(multiResolutionStats) ? multiResolutionStats.map((stats, resolution) => stats.canLoad ? jsx$1("option", { value: resolution, children: `3D: ${resolution}x Downsampled, ~${formatBytes(stats.totalBytes)} per channel, (${stats.height}, ${stats.width}, ${stats.depthDownsampled})` }, `(${stats.height}, ${stats.width}, ${stats.depthDownsampled})`) : null) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Render pixel value tooltips" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsVisibleId, children: "Channel Labels Visible: " }), jsx$1(Checkbox$1, { disabled: photometricInterpretation === "RGB", color: "primary", checked: channelLabelsVisible, onChange: (e3, v) => setChannelLabelsVisible(v), slotProps: { input: { id: channelLabelsVisibleId, "aria-label": "Render channel labels" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsOrientationId, children: "Channel Labels Orientation: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleChannelLabelsOrientationChange, value: channelLabelsOrientation, inputProps: { id: channelLabelsOrientationId, "aria-label": "Channel labels orientation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Vertical", value: "vertical", children: "Vertical" }), jsx$1("option", { "aria-label": "Horizontal", value: "horizontal", children: "Horizontal" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelSizeId, children: "Channel Labels Size: " }), jsx$1(Slider, { disabled: photometricInterpretation === "RGB", value: channelLabelSize, min: 8, max: 36, step: 1, onChange: (e3, v) => setChannelLabelSize(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: channelLabelSizeId, "aria-label": "Channel labels text size slider" })] })] });
+  } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleColormapChange, value: colormap === null ? "" : colormap, inputProps: { id: colormapId, "aria-label": "Colormap selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "None", value: "", children: "None" }), COLORMAP_OPTIONS.map((name2) => jsx$1("option", { value: name2, children: name2 }, name2))] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: interpretationId, children: "Photometric Interpretation: " }), jsxs(NativeSelect, { onChange: handleInterpretationChange, value: photometricInterpretation, inputProps: { id: interpretationId, "aria-label": "Photometric interpretation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "RGB", value: "RGB", children: "RGB" }), channelScopes.length > 0 ? jsx$1("option", { "aria-label": "BlackIsZero", value: "BlackIsZero", children: "BlackIsZero" }) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: transparentId, children: "Zero Transparent: " }), jsx$1(Checkbox$1, { color: "primary", checked: spatialLayerTransparentColor !== null, onChange: (e3, v) => setSpatialLayerTransparentColor(v ? [0, 0, 0] : null), slotProps: { input: { id: transparentId, "aria-label": "Render zero-value pixels as transparent" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: volumetricId, children: "Volumetric Rendering: " }), jsxs(NativeSelect, { onChange: handleVolumetricChange, value: volumetricRenderingAlgorithm, inputProps: { id: volumetricId, "aria-label": "Volumetric rendering algorithm selector" }, classes: { root: selectClasses2.selectRoot }, disabled: !is3dMode, children: [jsx$1("option", { "aria-label": "Additive", value: "additive", children: "Additive" }), jsx$1("option", { "aria-label": "Maximum Intensity Projection", value: "maximumIntensityProjection", children: "Maximum Intensity Projection" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: resolutionId, children: "Volume Resolution: " }), jsxs(NativeSelect, { disabled: !is3dMode || !isMultiResolution, onChange: handleResolutionChange, value: spatialTargetResolution === null ? "auto" : spatialTargetResolution, inputProps: { id: resolutionId, "aria-label": "Volumetric resolution selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "auto", children: "Auto" }), Array.isArray(multiResolutionStats) ? multiResolutionStats.map((stats, resolution) => stats.canLoad ? jsx$1("option", { value: resolution, children: `3D: ${resolution}x Downsampled, ~${formatBytes(stats.totalBytes)} per channel, (${stats.height}, ${stats.width}, ${stats.depthDownsampled})` }, `(${stats.height}, ${stats.width}, ${stats.depthDownsampled})`) : null) : null] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsx$1(Checkbox$1, { color: "primary", checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Render pixel value tooltips" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsVisibleId, children: "Channel Labels Visible: " }), jsx$1(Checkbox$1, { disabled: photometricInterpretation === "RGB", color: "primary", checked: channelLabelsVisible, onChange: (e3, v) => setChannelLabelsVisible(v), slotProps: { input: { id: channelLabelsVisibleId, "aria-label": "Render channel labels" } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelsOrientationId, children: "Channel Labels Orientation: " }), jsxs(NativeSelect, { disabled: photometricInterpretation === "RGB", onChange: handleChannelLabelsOrientationChange, value: channelLabelsOrientation, inputProps: { id: channelLabelsOrientationId, "aria-label": "Channel labels orientation selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Vertical", value: "vertical", children: "Vertical" }), jsx$1("option", { "aria-label": "Horizontal", value: "horizontal", children: "Horizontal" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelLabelSizeId, children: "Channel Labels Size: " }), jsx$1(Slider, { disabled: photometricInterpretation === "RGB", value: channelLabelSize, min: 8, max: 36, step: 1, onChange: (e3, v) => setChannelLabelSize(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: channelLabelSizeId, "aria-label": "Channel labels text size slider" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, classes: menuClasses.menuItem, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: channelsSortOrderId, children: "Channel Ordering: " }), jsxs(NativeSelect, { onChange: handleChannelsSortOrderChange, value: channelsSortOrder, inputProps: { id: channelsSortOrderId, "aria-label": "Channel sort order selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { "aria-label": "Original", value: "original", children: "Original" }), jsx$1("option", { "aria-label": "Alphabetical", value: "alphabetical", children: "Alphabetical" })] })] })] });
 }
 function ImageLayerController(props) {
   const {
@@ -268422,8 +268522,8 @@ function ImageLayerController(props) {
     volumeStillRef = null
   } = props;
   const [open2, setOpen] = useState(true);
-  const { spatialLayerVisible: visible, spatialLayerOpacity: opacity2, spatialLayerColormap: colormap, photometricInterpretation, spatialTargetResolution, spatialLodFactor, volumetricRenderingAlgorithm, spatialLayerTransparentColor, spatialSliceX, spatialSliceY, spatialSliceZ, tooltipsVisible, spatialChannelLabelsVisible: channelLabelsVisible, spatialChannelLabelsOrientation: channelLabelsOrientation, spatialChannelLabelSize: channelLabelSize } = layerCoordination;
-  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setSpatialLayerColormap: setColormap, setPhotometricInterpretation, setSpatialTargetResolution, setSpatialLodFactor, setVolumetricRenderingAlgorithm, setSpatialLayerTransparentColor, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ, setTooltipsVisible, setSpatialChannelLabelsVisible: setChannelLabelsVisible, setSpatialChannelLabelsOrientation: setChannelLabelsOrientation, setSpatialChannelLabelSize: setChannelLabelSize } = setLayerCoordination;
+  const { spatialLayerVisible: visible, spatialLayerOpacity: opacity2, spatialLayerColormap: colormap, photometricInterpretation, spatialTargetResolution, spatialLodFactor, volumetricRenderingAlgorithm, spatialLayerTransparentColor, spatialSliceX, spatialSliceY, spatialSliceZ, tooltipsVisible, spatialChannelLabelsVisible: channelLabelsVisible, spatialChannelLabelsOrientation: channelLabelsOrientation, spatialChannelLabelSize: channelLabelSize, spatialChannelsSortOrder: channelsSortOrder } = layerCoordination;
+  const { setSpatialLayerVisible: setVisible, setSpatialLayerOpacity: setOpacity2, setSpatialLayerColormap: setColormap, setPhotometricInterpretation, setSpatialTargetResolution, setSpatialLodFactor, setVolumetricRenderingAlgorithm, setSpatialLayerTransparentColor, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ, setTooltipsVisible, setSpatialChannelLabelsVisible: setChannelLabelsVisible, setSpatialChannelLabelsOrientation: setChannelLabelsOrientation, setSpatialChannelLabelSize: setChannelLabelSize, setSpatialChannelsSortOrder: setChannelsSortOrder } = setLayerCoordination;
   const addChannel = useAddImageChannelInMetaCoordinationScopes();
   const visibleSetting = typeof visible === "boolean" ? visible : true;
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
@@ -268439,19 +268539,19 @@ function ImageLayerController(props) {
   }, [visible, setVisible]);
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
   const handleOpenChange = useCallback(() => setOpen((prev2) => !prev2), []);
-  const { classes: classes2 } = useStyles$9();
+  const { classes: classes2 } = useStyles$a();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const { classes: controllerSectionClasses } = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
-  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1 }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMore, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
+  return jsx$1(Grid$1, { className: controllerSectionClasses.layerControllerGrid, children: jsxs(Paper, { elevation: 4, className: controllerSectionClasses.layerControllerRoot, children: [jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(Button, { className: menuClasses.imageLayerVisibleButton, onClick: handleVisibleChange, "aria-label": "Toggle layer visibility", children: jsx$1(Visibility, {}) }) }), jsx$1(Grid$1, { size: 1 }), jsx$1(Grid$1, { size: 6, children: jsx$1(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(ImageLayerEllipsisMenu, { colormap, setColormap, photometricInterpretation, setPhotometricInterpretation, spatialTargetResolution, setSpatialTargetResolution, spatialLodFactor, setSpatialLodFactor, volumetricRenderingAlgorithm, setVolumetricRenderingAlgorithm, spatialLayerTransparentColor, setSpatialLayerTransparentColor, spatialRenderingMode, image: image2, channelScopes, tooltipsVisible, setTooltipsVisible, channelLabelsVisible, setChannelLabelsVisible, channelLabelsOrientation, setChannelLabelsOrientation, channelLabelSize, setChannelLabelSize, channelsSortOrder, setChannelsSortOrder }) }), jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsx$1(ImageIcon, { className: classes2.layerTypeImageIcon }), isMultiChannel ? jsx$1(Button, { onClick: handleOpenChange, className: classes2.channelExpansionButton, "aria-label": "Expand or collapse channel controls", children: open2 ? jsx$1(ExpandLess, {}) : jsx$1(ExpandMore, {}) }) : null] })] }), isMultiChannel && open2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [channelScopes.map((cScope) => {
     const { spatialTargetC, spatialChannelVisible, spatialChannelOpacity, spatialChannelColor, spatialChannelWindow, spatialMaxResolution } = channelCoordination[cScope];
     const { setSpatialTargetC, setSpatialChannelVisible, setSpatialChannelOpacity, setSpatialChannelColor, setSpatialChannelWindow, setSpatialMaxResolution } = setChannelCoordination[cScope];
     const channelIndex = image2?.getChannelIndex(spatialTargetC);
     const numResolutions = image2?.getNumResolutions();
-    return jsx$1(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, spatialRenderingMode, numResolutions, spatialMaxResolution, setSpatialMaxResolution }, cScope);
+    return jsx$1(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, channelsSortOrder, spatialRenderingMode, numResolutions, spatialMaxResolution, setSpatialMaxResolution }, cScope);
   }), jsx$1(Button, { disabled: channelScopes.length === MAX_CHANNELS$1 || channelScopes.length === imageNumChannels, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", className: classes2.imageLayerButton, startIcon: jsx$1(AddIcon, {}), size: "small", "aria-label": "Add a channel to this layer", children: "Add Channel" })] }) : null, is3dMode && image2 ? jsxs(Grid$1, { container: true, direction: "column", justifyContent: "space-between", className: classes2.imageChannelControllerGrid, children: [jsx$1(Typography, { className: classes2.clippingPanesLabel, children: "Clipping planes:" }), jsx$1(Grid$1, { size: 12, className: classes2.clippingSliders, children: jsx$1(ClippingSliders, { image: image2, spatialSliceX, spatialSliceY, spatialSliceZ, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ }) }), jsx$1(LoadingStatusIndicator, { loadingProgress: volumeLoadingProgress, onStopLoading: onStopVolumeLoading, onRestartLoading: onRestartVolumeLoading, stillRef: volumeStillRef, spatialRenderingMode })] }) : null] }) });
 }
-const useStyles$8 = makeStyles()((theme) => ({
+const useStyles$9 = makeStyles()((theme) => ({
   dimensionsIcon: {
     height: "40px",
     width: "40px",
@@ -268475,7 +268575,7 @@ const useStyles$8 = makeStyles()((theme) => ({
 function GlobalDimensionSlider(props) {
   const { label: label2, targetValue, setTargetValue, min: min2 = 0, max: max2 = 0, spatialRenderingMode = null, setSpatialRenderingMode = null } = props;
   const { classes: lcClasses } = useControllerSectionStyles();
-  const { classes: classes2 } = useStyles$8();
+  const { classes: classes2 } = useStyles$9();
   const isForZ = spatialRenderingMode !== null;
   const is3dMode = spatialRenderingMode === "3D";
   function handleRenderingModeChange(event2) {
@@ -268486,20 +268586,115 @@ function GlobalDimensionSlider(props) {
   }
   return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsx$1(Grid$1, { size: 1, children: jsx$1(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsx$1(Grid$1, { size: 8, children: !is3dMode ? jsx$1(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) : null }), jsx$1(Grid$1, { size: 2, children: isForZ ? jsx$1(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsx$1(FormControlLabel$1, { control: jsx$1(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
 }
+const useStyles$8 = makeStyles()(() => ({
+  layerTypeCentroidSegmentationIcon: {
+    height: "100%",
+    marginLeft: "1px",
+    fill: "currentColor",
+    fontSize: "24px",
+    width: "50%",
+    maxWidth: "24px"
+  },
+  divider: {
+    width: "1px",
+    height: "20px",
+    background: "currentColor",
+    flexShrink: 0,
+    margin: "0 10px"
+  },
+  inlineLabel: {
+    margin: "0px !important",
+    lineHeight: 1,
+    alignSelf: "center"
+  },
+  iconCell: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+}));
+function CombinedEllipsisMenu(props) {
+  const { obsType, featureType, featureValueType, filled, setFilled, strokeWidth, setStrokeWidth, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, setPointObsColorEncoding, setPointFeatureValueColormap, setPointFeatureValueColormapRange, onColorEncodingChange } = props;
+  const [open2, setOpen] = useState(false);
+  const { classes: selectClasses2 } = useSelectStyles();
+  const { classes: menuClasses } = useEllipsisMenuStyles();
+  const filledId = $bdb11010cef70236$export$f680877a34711e37();
+  const strokeWidthId = $bdb11010cef70236$export$f680877a34711e37();
+  const colorEncodingId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapId = $bdb11010cef70236$export$f680877a34711e37();
+  const colormapRangeId = $bdb11010cef70236$export$f680877a34711e37();
+  const tooltipsId = $bdb11010cef70236$export$f680877a34711e37();
+  const crosshairsId = $bdb11010cef70236$export$f680877a34711e37();
+  const legendId = $bdb11010cef70236$export$f680877a34711e37();
+  return jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsx$1(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, getAriaLabel: () => "Open combined centroid and segmentation layer options menu", children: [jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: filledId, children: "Filled: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: filled, onChange: (e3, v) => setFilled(v), slotProps: { input: { id: filledId } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: strokeWidthId, children: "Stroke width:" }), jsx$1(Slider, { disabled: filled, value: strokeWidth, min: 0.01, max: 5, step: 0.01, onChange: (e3, v) => setStrokeWidth(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: strokeWidthId, getAriaLabel: () => "Stroke width" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colorEncodingId, children: "Color encoding: " }), jsxs(NativeSelect, { onChange: onColorEncodingChange, value: obsColorEncoding, inputProps: { id: colorEncodingId }, classes: { root: selectClasses2.selectRoot }, children: [jsx$1("option", { value: "spatialChannelColor", children: "Static Color" }), jsx$1("option", { value: "geneSelection", children: "Feature Value" }), jsx$1("option", { value: "cellSetSelection", children: "Set Selection" })] })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapId, children: "Colormap: " }), jsx$1(NativeSelect, { onChange: (e3) => {
+    setFeatureValueColormap(e3.target.value);
+    setPointFeatureValueColormap?.(e3.target.value);
+  }, value: featureValueColormap, inputProps: { id: colormapId }, classes: { root: selectClasses2.selectRoot }, children: GLSL_COLORMAPS.map((cmap) => jsx$1("option", { value: cmap, children: cmap }, cmap)) })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap range: " }), jsx$1(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => {
+    setFeatureValueColormapRange(v);
+    setPointFeatureValueColormapRange?.(v);
+  }, className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (i2) => i2 === 0 ? "Low colormap range" : "High colormap range" })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsId, children: "Tooltips visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsId } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsId, children: "Crosshairs visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsId } } })] }), jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsx$1("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendId, children: "Legend visible: " }), jsx$1(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendId } } })] })] });
+}
+function SegmentationCentroidsController(props) {
+  const { theme, segScope, segLayerCoordination, segChannelScopesByLayer, segChannelCoordination, pointScope, pointLayerCoordination } = props;
+  const { classes: classes2 } = useStyles$8();
+  const { classes: lcClasses } = useControllerSectionStyles();
+  const { classes: menuClasses } = useEllipsisMenuStyles();
+  const channelScopes = segChannelScopesByLayer?.[segScope] ?? [];
+  const primaryChanScope = channelScopes[0];
+  const chanValues = segChannelCoordination[0]?.[segScope]?.[primaryChanScope] ?? {};
+  const chanSetters = segChannelCoordination[1]?.[segScope]?.[primaryChanScope] ?? {};
+  const { obsType, featureType, featureValueType, spatialChannelVisible: segVisible, spatialChannelOpacity: segOpacity, spatialChannelColor: segColor, spatialSegmentationFilled: filled, spatialSegmentationStrokeWidth: strokeWidth, obsColorEncoding, featureSelection, featureValueColormap, featureValueColormapRange, tooltipsVisible, tooltipCrosshairsVisible, legendVisible } = chanValues;
+  const { setSpatialChannelVisible: setSegVisible, setSpatialChannelOpacity: setSegOpacity, setSpatialChannelColor: setSegColor, setSpatialSegmentationFilled: setFilled, setSpatialSegmentationStrokeWidth: setStrokeWidth, setObsColorEncoding, setFeatureValueColormap, setFeatureValueColormapRange, setTooltipsVisible, setTooltipCrosshairsVisible, setLegendVisible } = chanSetters;
+  const pointValues = pointLayerCoordination[0]?.[pointScope] ?? {};
+  const pointSetters = pointLayerCoordination[1]?.[pointScope] ?? {};
+  const { spatialLayerVisible: pointVisible, spatialLayerOpacity: pointOpacity, spatialLayerColor: pointColor, obsColorEncoding: pointObsColorEncoding, featureValueColormap: pointFeatureValueColormap } = pointValues;
+  const { setSpatialLayerVisible: setPointVisible, setSpatialLayerOpacity: setPointOpacity, setSpatialLayerColor: setPointColor, setObsColorEncoding: setPointObsColorEncoding, setFeatureValueColormap: setPointFeatureValueColormap, setFeatureValueColormapRange: setPointFeatureValueColormapRange } = pointSetters;
+  const sharedOpacity = segOpacity ?? 1;
+  const handleOpacityChange = useCallback((e3, v) => {
+    setSegOpacity?.(v);
+    setPointOpacity?.(v);
+  }, [setSegOpacity, setPointOpacity]);
+  const handleSegVisibleChange = useCallback(() => {
+    setSegVisible?.(typeof segVisible === "boolean" ? !segVisible : false);
+  }, [segVisible, setSegVisible]);
+  const handlePointVisibleChange = useCallback(() => {
+    setPointVisible?.(typeof pointVisible === "boolean" ? !pointVisible : false);
+  }, [pointVisible, setPointVisible]);
+  const handleColorEncodingChange = useCallback((e3) => {
+    const val = e3.target.value;
+    setObsColorEncoding(val);
+    if (val === "geneSelection") {
+      setPointObsColorEncoding?.("geneSelection");
+    } else if (val === "cellSetSelection") {
+      setPointObsColorEncoding?.("cellSetSelection");
+    } else {
+      setPointObsColorEncoding?.("spatialChannelColor");
+    }
+  }, [setObsColorEncoding, setPointObsColorEncoding]);
+  const segVisibleSetting = typeof segVisible === "boolean" ? segVisible : true;
+  const pointVisibleSetting = typeof pointVisible === "boolean" ? pointVisible : true;
+  const SegVisibility = segVisibleSetting ? VisibilityIcon : VisibilityOffIcon;
+  const PointVisibility = pointVisibleSetting ? VisibilityIcon : VisibilityOffIcon;
+  const isStaticColor = obsColorEncoding === "spatialChannelColor";
+  const isColormap = obsColorEncoding === "geneSelection";
+  const pointIsStaticColor = pointObsColorEncoding === "spatialChannelColor";
+  const pointIsColormap = pointObsColorEncoding === "geneSelection";
+  return jsx$1(Grid$1, { className: lcClasses.layerControllerGrid, children: jsx$1(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", alignItems: "center", children: [jsxs(Grid$1, { size: "grow", style: { display: "flex", alignItems: "center", minWidth: 0 }, children: [jsx$1(Button, { onClick: handleSegVisibleChange, className: menuClasses.imageLayerVisibleButton, getAriaLabel: () => "Toggle mesh visibility", children: jsx$1(SegVisibility, {}) }), jsx$1(ChannelColorPickerMenu, { theme, color: segColor, setColor: setSegColor, isStaticColor, isColormap, featureValueColormap, visible: segVisibleSetting }), jsx$1(Typography, { className: `${menuClasses.imageLayerName} ${classes2.inlineLabel}`, children: "Cell" }), jsx$1("div", { className: classes2.divider }), jsx$1(Button, { onClick: handlePointVisibleChange, className: menuClasses.imageLayerVisibleButton, getAriaLabel: () => "Toggle centroid visibility", children: jsx$1(PointVisibility, {}) }), jsx$1(ChannelColorPickerMenu, { theme, color: pointColor, setColor: setPointColor, isStaticColor: pointIsStaticColor, isColormap: pointIsColormap, featureValueColormap: pointFeatureValueColormap, visible: pointVisibleSetting }), jsx$1(Typography, { className: `${menuClasses.imageLayerName} ${classes2.inlineLabel}`, children: "Point" })] }), jsx$1(Grid$1, { size: 2, children: jsx$1(Slider, { value: sharedOpacity, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", getAriaLabel: () => "Adjust shared opacity" }) }), jsx$1(Grid$1, { size: 1, children: jsx$1(CombinedEllipsisMenu, { obsType, featureType, featureValueType, filled, setFilled, strokeWidth, setStrokeWidth, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, setPointObsColorEncoding, setPointFeatureValueColormap, setPointFeatureValueColormapRange, onColorEncodingChange: handleColorEncodingChange }) }), jsx$1(Grid$1, { size: 1, className: classes2.iconCell, children: jsx$1(SvgVector, { className: classes2.layerTypeCentroidSegmentationIcon }) })] }) }) });
+}
 function LayerController(props) {
-  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress, layerPerFeatureForPoints } = props;
+  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress, layerPerFeatureForPoints, centroidSegmentationPairs = [], pairedSegScopes = /* @__PURE__ */ new Set(), pairedPointScopes = /* @__PURE__ */ new Set() } = props;
   const anyLayerHasT = Object.values(images || {}).some((image2) => image2?.image?.instance.hasTStack());
   const anyLayerHasZ = Object.values(images || {}).some((image2) => image2?.image?.instance.hasZStack());
   const maxT = Object.values(images || {}).reduce((a2, h2) => Math.max(a2, h2?.image?.instance.getNumT()), 1) - 1;
   const maxZ = Object.values(images || {}).reduce((a2, h2) => Math.max(a2, h2?.image?.instance.getNumZ()), 1) - 1;
   const reversedImageLayerScopes = useMemo$1(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
-  const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
-  const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
-  return jsxs("div", { children: [anyLayerHasZ ? jsx$1(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsx$1(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsx$1(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsx$1(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsx$1(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsx$1(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
+  const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].filter((scope) => !pairedPointScopes.has(scope)).reverse(), [pointLayerScopes, pairedPointScopes]);
+  const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].filter((scope) => !pairedSegScopes.has(scope)).reverse(), [segmentationLayerScopes, pairedSegScopes]);
+  return jsxs("div", { children: [anyLayerHasZ ? jsx$1(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsx$1(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, centroidSegmentationPairs.map(({ pointScope, segScope }) => jsx$1(SegmentationCentroidsController, { theme, segScope, segLayerCoordination: segmentationLayerCoordination, segChannelScopesByLayer: segmentationChannelScopesByLayer, segChannelCoordination: segmentationChannelCoordination, pointScope, pointLayerCoordination }, `combined-${segScope}-${pointScope}`)), pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsx$1(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsx$1(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsx$1(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsx$1(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
 }
 function LayerControllerSubscriber(props) {
-  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets } = props;
+  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets, helpText = ViewHelpMapping.LAYER_CONTROLLER_BETA } = props;
   const loaders = useLoaders();
   const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
@@ -268587,7 +268782,8 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
-    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE,
+    CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.IMAGE_LAYER);
   const imageChannelCoordination = useComplexCoordinationSecondary([
     CoordinationType$1.SPATIAL_TARGET_C,
@@ -268628,6 +268824,40 @@ function LayerControllerSubscriber(props) {
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
     CoordinationType$1.LEGEND_VISIBLE
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
+  const centroidSegmentationPairs = React__default.useMemo(() => {
+    const pairs = [];
+    const pairedSegScopes = /* @__PURE__ */ new Set();
+    const pairedPointScopes = /* @__PURE__ */ new Set();
+    pointLayerScopes.forEach((pointScope) => {
+      const pointCoord = pointLayerCoordination[0][pointScope];
+      if (!pointCoord)
+        return;
+      const pointObsType = pointCoord[CoordinationType$1.OBS_TYPE];
+      if (!pointObsType)
+        return;
+      const matchingSegScope = segmentationLayerScopes.find((segScope) => {
+        if (pairedSegScopes.has(segScope))
+          return false;
+        const channelScopes = segmentationChannelScopesByLayer[segScope] || [];
+        return channelScopes.some((chanScope) => {
+          const chanCoord = segmentationChannelCoordination[0]?.[segScope]?.[chanScope];
+          return chanCoord?.[CoordinationType$1.OBS_TYPE] === pointObsType;
+        });
+      });
+      if (matchingSegScope) {
+        pairs.push({ pointScope, segScope: matchingSegScope });
+        pairedSegScopes.add(matchingSegScope);
+        pairedPointScopes.add(pointScope);
+      }
+    });
+    return { pairs, pairedSegScopes, pairedPointScopes };
+  }, [
+    pointLayerScopes,
+    pointLayerCoordination,
+    segmentationLayerScopes,
+    segmentationChannelScopesByLayer,
+    segmentationChannelCoordination
+  ]);
   const [{ volumeLoadingProgress: volumeLoadingStatus, tiledPointsLoadingProgress }] = useAuxiliaryCoordination([
     "spatialAcceleratedVolumeLoadingProgress",
     "spatialTiledPointsLoadingProgress"
@@ -268655,7 +268885,7 @@ function LayerControllerSubscriber(props) {
     imageDataStatus,
     pointMultiIndicesDataStatus
   ]);
-  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress }) });
+  return jsx$1(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, helpText, children: jsx$1(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress, centroidSegmentationPairs: centroidSegmentationPairs.pairs, pairedSegScopes: centroidSegmentationPairs.pairedSegScopes, pairedPointScopes: centroidSegmentationPairs.pairedPointScopes }) });
 }
 const isIterable$2 = (obj) => Symbol.iterator in obj;
 const hasIterableEntries = (value2) => (
@@ -270570,7 +270800,7 @@ function HiglassGlobalStyles(props) {
 }
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-DPgS6S1h.js");
+  const { HiGlassComponent } = await import("./higlass-CKuPDg4y.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -270908,6 +271138,12 @@ const useStyles$5 = makeStyles()(() => ({
   neuroglancerWrapper: {
     position: "relative",
     height: "100%"
+  },
+  meshLoadingIndicator: {
+    position: "absolute",
+    bottom: 8,
+    left: 8,
+    zIndex: 50
   }
 }));
 const globalNeuroglancerCss = `
@@ -272159,13 +272395,16 @@ const globalNeuroglancerStyles = {
   },
   "input.perspective-panel-show-slice-views": { pointerEvents: "all" },
   ".neuroglancer-rendered-data-panel": {
-    cursor: "crosshair",
+    cursor: "grab",
     position: "relative",
     outline: "0",
     touchAction: "none",
     color: "#fff",
     textAlign: "left"
   },
+  ".neuroglancer-rendered-data-panel:active": {
+    cursor: "grabbing"
+  },
   ".neuroglancer-display-dimensions-widget": {
     position: "absolute",
     cursor: "default",
@@ -273518,7 +273757,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxs(Fragment, { children: [jsx$1(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsx$1(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-BLfUOvtO.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-C2C-vEVu.js"));
 function createWorker() {
   const worker = new WorkerFactory$1();
   worker.AsyncComputationWorker = WorkerFactory;
@@ -273563,12 +273802,31 @@ class NeuroglancerComp extends PureComponent {
         }
       };
       remapWheelToZoom(viewer.inputEventBindings.perspectiveView);
+      const { getMeshIdToCellId, onViewerReady, cellsUrl } = this.props;
       this.prevHoverHandler = () => {
-        if (viewer.mouseState.pickedValue !== void 0) {
-          const pickedSegment = viewer.mouseState.pickedValue;
-          this.latestOnSelectHoveredCoords?.(pickedSegment?.low);
+        const ms = viewer.mouseState;
+        if (ms.pickedAnnotationId != null) {
+          const byIdKey = String(ms.pickedAnnotationId);
+          fetch(`${cellsUrl}/by_id/${byIdKey}`).then((r3) => r3.arrayBuffer()).then((buf) => {
+            const dv = new DataView(buf);
+            const actualMeshId = String(dv.getInt32(12, true));
+            const cellId = getMeshIdToCellId?.(actualMeshId) ?? actualMeshId;
+            this.latestOnSelectHoveredCoords?.(cellId);
+          });
+          return;
         }
+        if (ms.pickedValue !== void 0 && ms.pickedValue !== null) {
+          const meshId = String(ms.pickedValue?.low);
+          const cellId = getMeshIdToCellId?.(meshId) ?? meshId;
+          this.latestOnSelectHoveredCoords?.(cellId);
+          return;
+        }
+        this.latestOnSelectHoveredCoords?.(null);
       };
+      onViewerReady?.(() => {
+        const panel = [...viewer.display.panels][0];
+        return panel?.projectionParameters?.value_?.viewProjectionMat;
+      });
       viewer.mouseState.changed.add(this.prevHoverHandler);
     } else {
       if (this.prevMouseStateChanged && this.prevHoverHandler) {
@@ -273589,8 +273847,8 @@ class NeuroglancerComp extends PureComponent {
     }
   }
   render() {
-    const { classes: classes2, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
-    return jsxs(Fragment, { children: [jsx$1(NeuroglancerGlobalStyles, { classes: classes2 }), jsx$1("div", { className: classes2.neuroglancerWrapper, children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping, ref: this.onRef }) }) })] });
+    const { classes: classes2, viewerState, cellColorMapping, onLayerLoadingChange, onAnnotationSourceReady, onViewerReady, meshOpacity } = this.props;
+    return jsxs(Fragment, { children: [jsx$1(NeuroglancerGlobalStyles, { classes: classes2 }), jsx$1("div", { className: classes2.neuroglancerWrapper, children: jsx$1(Suspense, { fallback: jsx$1("div", { children: "Loading..." }), children: jsx$1(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping, ref: this.onRef, onAnnotationSourceReady, onViewerReady, meshOpacity }) }) })] });
   }
 }
 function useMemoCustomComparison(factory2, dependencies2, customIsEqual) {
@@ -273605,17 +273863,22 @@ function useMemoCustomComparison(factory2, dependencies2, customIsEqual) {
 }
 const shallowDiff = (prevDeps, nextDeps, depName) => prevDeps[depName] !== nextDeps[depName];
 const shallowDiffByLayer = (prevDeps, nextDeps, depName, scopeName) => prevDeps?.[depName]?.[scopeName] !== nextDeps?.[depName]?.[scopeName];
+const shallowDiffByChannel = (prevDeps, nextDeps, depName, firstName, secondName) => prevDeps?.[depName]?.[firstName]?.[secondName] !== nextDeps?.[depName]?.[firstName]?.[secondName];
 const shallowDiffByChannelWithKeys = (prevDeps, nextDeps, depName, firstName, secondName, keys2) => keys2.some((k) => prevDeps?.[depName]?.[firstName]?.[secondName]?.[k] !== nextDeps?.[depName]?.[firstName]?.[secondName]?.[k]);
 const shallowDiffByLayerCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, keys2) => keys2.some((k) => prevDeps?.[depName]?.[0]?.[layerScope]?.[k] !== nextDeps?.[depName]?.[0]?.[layerScope]?.[k]);
 const shallowDiffByChannelCoordinationWithKeys = (prevDeps, nextDeps, depName, layerScope, channelScope, keys2) => keys2.some((k) => prevDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k] !== nextDeps?.[depName]?.[0]?.[layerScope]?.[channelScope]?.[k]);
 function customIsEqualForCellColors(prevDeps, nextDeps) {
   let forceUpdate = false;
   const curriedShallowDiff = (depName) => shallowDiff(prevDeps, nextDeps, depName);
+  const curriedShallowDiffByChannel = (depName, firstName, secondName) => shallowDiffByChannel(prevDeps, nextDeps, depName, firstName, secondName);
   const curriedShallowDiffByChannelWithKeys = (depName, firstName, secondName, keys2) => shallowDiffByChannelWithKeys(prevDeps, nextDeps, depName, firstName, secondName, keys2);
   const curriedShallowDiffByChannelCoordinationWithKeys = (depName, layerScope, channelScope, keys2) => shallowDiffByChannelCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, channelScope, keys2);
   if (curriedShallowDiff("theme")) {
     forceUpdate = true;
   }
+  if (curriedShallowDiff("csvLoaded")) {
+    forceUpdate = true;
+  }
   if (["segmentationLayerScopes", "segmentationChannelScopesByLayer"].some(curriedShallowDiff)) {
     forceUpdate = true;
   } else {
@@ -273630,8 +273893,11 @@ function customIsEqualForCellColors(prevDeps, nextDeps) {
           "obsSetSelection",
           "additionalObsSets",
           "spatialChannelColor",
-          "spatialChannelOpacity"
-        ])) {
+          "spatialChannelOpacity",
+          "featureValueColormap",
+          "featureValueColormapRange",
+          "featureSelection"
+        ]) || curriedShallowDiffByChannel("segmentationMultiIndicesData", layerScope, channelScope) || curriedShallowDiffByChannel("segmentationMultiExpressionNormData", layerScope, channelScope)) {
           forceUpdate = true;
         }
       });
@@ -273677,7 +273943,13 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
         "featureSelection",
         "featureFilterMode",
         "featureColor",
-        "spatialPointStrokeWidth"
+        "spatialPointStrokeWidth",
+        "featureValueColormap",
+        "featureValueColormapRange",
+        "featureSelection",
+        "obsSetColor",
+        "obsSetSelection",
+        "additionalObsSets"
       ]) || Math.abs(prevDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity - nextDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity) >= 0.05) {
         forceUpdate = true;
       }
@@ -273731,6 +274003,35 @@ function getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureI
         }
     `;
 }
+function getObsSetSelectionFilteredShader(phenotypeColors, selectedIndices, opacity2, borderWidth = 0) {
+  const numColors = phenotypeColors.length;
+  const numSelected = selectedIndices.length;
+  const normColors = phenotypeColors.map((c2) => normalizeColor(c2));
+  const colorsDecl = `vec3 phenotypeColors[${numColors}] = vec3[${numColors}](${normColors.map((c2) => toVec3(c2)).join(", ")});`;
+  const selectedDecl = `int selectedIndices[${numSelected}] = int[${numSelected}](${selectedIndices.join(", ")});`;
+  return `
+    void main() {
+      int phenotype = prop_phenotype();
+      ${colorsDecl}
+      ${selectedDecl}
+      bool isSelected = false;
+      for (int i = 0; i < ${numSelected}; ++i) {
+        if (phenotype == selectedIndices[i]) {
+          isSelected = true;
+        }
+      }
+      if (!isSelected) {
+        discard;
+      }
+      vec3 color = vec3(0.5, 0.5, 0.5);
+      if (phenotype >= 0 && phenotype < ${numColors}) {
+        color = phenotypeColors[phenotype];
+      }
+      setColor(vec4(color, ${opacity2.toFixed(4)}));
+      ${borderWidthGlsl(borderWidth)}
+    }
+  `;
+}
 function getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndices, featureIndexProp, borderWidth = 0) {
   const normStatic = normalizeColor(staticColor);
   const numFeatures = featureIndices.length;
@@ -273912,6 +274213,23 @@ function getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp, bor
         }
     `;
 }
+function getQuantitativeColormapShader(quantitativeColorProp, opacity2, colormap = GLSL_COLORMAP_DEFAULT, colormapRange = [0, 1], borderWidth = 0, quantitativeColorMax = 1) {
+  const [low, high] = colormapRange;
+  const resolvedColormap = GLSL_COLORMAPS.includes(colormap) ? colormap : GLSL_COLORMAP_DEFAULT;
+  return `
+    #define COLORMAP_FUNC ${resolvedColormap}
+    ${colormaps$1}
+    void main() {
+      float rawVal = float(prop_${quantitativeColorProp}());
+      float normalizedVal = rawVal / ${quantitativeColorMax.toFixed(4)};
+      float t = (normalizedVal - ${low.toFixed(4)}) / max(${(high - low).toFixed(4)}, 0.0001);
+      t = clamp(t, 0.0, 1.0);
+      vec4 col = COLORMAP_FUNC(t);
+      setColor(vec4(col.rgb, ${opacity2.toFixed(4)}));
+      ${borderWidthGlsl(borderWidth)}
+    }
+  `;
+}
 function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp, borderWidth = 0) {
   const normDefault = normalizeColor(defaultColor);
   const numFeatures = featureIndices.length;
@@ -273967,8 +274285,25 @@ function getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexP
         }
     `;
 }
+function getObsSetSelectionShader(phenotypeColors, opacity2, borderWidth = 0) {
+  const numColors = phenotypeColors.length;
+  const normColors = phenotypeColors.map((c2) => normalizeColor(c2));
+  const colorsDecl = `vec3 phenotypeColors[${numColors}] = vec3[${numColors}](${normColors.map((c2) => toVec3(c2)).join(", ")});`;
+  return `
+    void main() {
+      int phenotype = prop_phenotype();
+      ${colorsDecl}
+      vec3 color = ${toVec3(normalizeColor([128, 128, 128]))};
+      if (phenotype >= 0 && phenotype < ${numColors}) {
+        color = phenotypeColors[phenotype];
+      }
+      setColor(vec4(color, ${opacity2.toFixed(4)}));
+      ${borderWidthGlsl(borderWidth)}
+    }
+  `;
+}
 function getPointsShader(layerCoordination) {
-  const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, pointMarkerBorderWidth = 0, featureIndexProp, pointIndexProp } = layerCoordination;
+  const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, pointMarkerBorderWidth = 0, featureIndexProp, pointIndexProp, quantitativeColorProp, featureValueColormap, featureValueColormapRange, obsSetColor, obsSetSelection, quantitativeColorMax, pointsAreSegmentationCentroids } = layerCoordination;
   const defaultColor = getDefaultColor(theme);
   const opacity2 = spatialLayerOpacity ?? 1;
   const staticColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : defaultColor;
@@ -273992,7 +274327,7 @@ function getPointsShader(layerCoordination) {
     }
     return getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureIndices, defaultColor, featureIndexProp, pointMarkerBorderWidth);
   }
-  if (obsColorEncoding === "geneSelection") {
+  if (obsColorEncoding === "geneSelection" && !pointsAreSegmentationCentroids) {
     if (!featureIndexProp) {
       throw new Error("In order to use gene-based color encoding for Neuroglancer Points, options.featureIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.");
     }
@@ -274028,19 +274363,49 @@ function getPointsShader(layerCoordination) {
     }
     return getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
   }
+  if (obsColorEncoding === "geneSelection" && pointsAreSegmentationCentroids) {
+    if (!quantitativeColorProp) {
+      console.warn("In order to use quantitative colormap encoding for Neuroglancer Points, options.quantitativeColorProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration. Falling back to static color.");
+      return getSpatialLayerColorShader(staticColor, opacity2, pointMarkerBorderWidth);
+    }
+    return getQuantitativeColormapShader(quantitativeColorProp, opacity2, featureValueColormap, featureValueColormapRange, pointMarkerBorderWidth, quantitativeColorMax);
+  }
+  if (obsColorEncoding === "cellSetSelection") {
+    if (!obsSetColor || !obsSetSelection) {
+      return getSpatialLayerColorShader(staticColor, opacity2, pointMarkerBorderWidth);
+    }
+    const colorByName = {};
+    obsSetColor?.forEach(({ path: path2, color: color2 }) => {
+      if (path2?.length > 1) {
+        colorByName[path2[path2.length - 1]] = color2;
+      }
+    });
+    const uniqueNames = Object.keys(colorByName).sort();
+    const phenotypeColors = uniqueNames.map((name2) => colorByName[name2] ?? defaultColor);
+    if (isFiltered) {
+      const selectedNames = new Set(obsSetSelection?.map((path2) => path2[path2.length - 1]) ?? []);
+      const selectedIndices = uniqueNames.map((name2, idx) => selectedNames.has(name2) ? idx : -1).filter((idx) => idx >= 0);
+      if (selectedIndices.length === 0) {
+        return "void main() { discard; }";
+      }
+      return getObsSetSelectionFilteredShader(phenotypeColors, selectedIndices, opacity2, pointMarkerBorderWidth);
+    }
+    return getObsSetSelectionShader(phenotypeColors, opacity2, pointMarkerBorderWidth);
+  }
   return getSpatialLayerColorShader(staticColor, opacity2, pointMarkerBorderWidth);
 }
+const DEFAULT_NG_DIMENSIONS = {
+  x: [1, "nm"],
+  y: [1, "nm"],
+  z: [1, "nm"]
+};
 const DEFAULT_NG_PROPS = {
   layout: "3d",
   position: [0, 0, 0],
   projectionOrientation: [0, 0, 0, 1],
   projectionScale: 1024,
   crossSectionScale: 1,
-  dimensions: {
-    x: [1, "nm"],
-    y: [1, "nm"],
-    z: [1, "nm"]
-  },
+  dimensions: DEFAULT_NG_DIMENSIONS,
   layers: []
 };
 function toPrecomputedSource(url) {
@@ -274058,6 +274423,15 @@ function toNgLayerName(dataType, layerScope, channelScope = null) {
   }
   throw new Error(`Unsupported data type: ${dataType}`);
 }
+function pointsHaveMatchingSegmentation({ pointObsType, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationChannelCoordination }) {
+  return segmentationLayerScopes.some((segmentationLayerScope) => {
+    const segmentationChannelScopes = segmentationChannelScopesByLayer?.[segmentationLayerScope] || [];
+    return segmentationChannelScopes.some((segmentationChannelScope) => {
+      const segmentationObsType = segmentationChannelCoordination?.[0]?.[segmentationLayerScope]?.[segmentationChannelScope]?.obsType;
+      return segmentationObsType && pointObsType && segmentationObsType === pointObsType;
+    });
+  });
+}
 function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
   const viewerState = useMemoCustomComparison(() => {
     let result = cloneDeep$1(DEFAULT_NG_PROPS);
@@ -274080,6 +274454,9 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
           } : toPrecomputedSource(layerUrl);
           result = {
             ...result,
+            showAxisLines,
+            showDefaultAnnotations: false,
+            // this removes the yellow box around pointsLayer
             layers: [
               ...result.layers,
               {
@@ -274103,9 +274480,27 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
       const layerCoordination = pointLayerCoordination[0][layerScope];
       const layerData = obsPointsData[layerScope];
       const layerUrl = obsPointsUrls[layerScope]?.[0]?.url;
+      const ngOptions = layerData?.neuroglancerOptions;
+      if (ngOptions?.transform?.matrix && ngOptions?.transform?.outputDimensions) {
+        result = {
+          ...result,
+          dimensions: ngOptions.transform.outputDimensions ?? DEFAULT_NG_DIMENSIONS
+        };
+      }
+      const pointsAreSegmentationCentroids = pointsHaveMatchingSegmentation({
+        pointObsType: layerCoordination?.obsType,
+        segmentationLayerScopes,
+        segmentationChannelScopesByLayer,
+        segmentationChannelCoordination
+      });
       const featureIndex = pointMultiIndicesData[layerScope]?.featureIndex;
       if (layerUrl && layerData) {
-        const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, spatialPointStrokeWidth } = layerCoordination || {};
+        const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, spatialPointStrokeWidth, featureValueColormap, featureValueColormapRange } = layerCoordination || {};
+        const quantitativeColorMax = layerData.neuroglancerOptions?.quantitativeColorMax;
+        if (!quantitativeColorMax && obsColorEncoding === "geneSelection") {
+          console.warn("quantitativeColorMax not specified in options — defaulting to 1.0 (no normalization)");
+        }
+        const quantitativeColorMaxSelected = quantitativeColorMax ?? 1;
         const shader = getPointsShader({
           theme,
           featureIndex,
@@ -274115,9 +274510,18 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
           featureSelection,
           featureFilterMode,
           featureColor,
+          featureValueColormap,
+          featureValueColormapRange,
           featureIndexProp: layerData.neuroglancerOptions?.featureIndexProp,
           pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp,
-          pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0
+          quantitativeColorProp: layerData.neuroglancerOptions?.quantitativeColorProp,
+          pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0,
+          obsSets: layerCoordination.obsSets,
+          obsSetColor: layerCoordination.obsSetColor,
+          obsSetSelection: layerCoordination.obsSetSelection,
+          additionalObsSets: layerCoordination.additionalObsSets,
+          quantitativeColorMax: quantitativeColorMaxSelected,
+          pointsAreSegmentationCentroids
         });
         result = {
           ...result,
@@ -274130,7 +274534,13 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
                 subsources: {
                   default: true
                 },
-                enableDefaultSubsources: false
+                enableDefaultSubsources: false,
+                ...ngOptions?.transform?.matrix ? {
+                  transform: {
+                    matrix: ngOptions.transform.matrix,
+                    outputDimensions: ngOptions.transform?.outputDimensions ?? result.dimensions
+                  }
+                } : {}
               },
               tab: "annotations",
               shader,
@@ -274138,7 +274548,7 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
               visible: spatialLayerVisible,
               // Options from layerData.neuroglancerOptions
               // like projectionAnnotationSpacing:
-              projectionAnnotationSpacing: layerData.neuroglancerOptions?.projectionAnnotationSpacing ?? 1
+              projectionAnnotationSpacing: ngOptions?.projectionAnnotationSpacing ?? 1
             }
           ],
           // TODO: is this needed?
@@ -274169,6 +274579,8 @@ function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScope
   }, customIsEqualForInitialViewerState);
   return viewerState;
 }
+const ANNOTATION_HEADER_OFFSET = 8;
+const GREY_HEX = "#323232";
 const EPSILON_KEYS_MAPPING_NG = {
   projectionScale: 100,
   projectionOrientation: 0.02,
@@ -274189,6 +274601,17 @@ const multiplyQuat = (a2, b2) => {
 const conjQuat = (q) => [-q[0], -q[1], -q[2], q[3]];
 const rad2deg = (r3) => r3 * 180 / Math.PI;
 const deg2rad = (d) => d * Math.PI / 180;
+function applyColormap(colormap, t4) {
+  const tClamped = Math.max(0, Math.min(1, t4));
+  const interpolators = {
+    plasma: interpolatePlasma,
+    viridis: interpolateViridis,
+    jet: interpolateJet,
+    greys: interpolateGreys
+  };
+  const fn2 = interpolators[colormap] ?? interpolateViridis;
+  return fn2(tClamped);
+}
 function valueGreaterThanEpsilon(a2, b2, epsilon3) {
   if (Array.isArray(a2) && Array.isArray(b2) && a2.length === b2.length) {
     return a2.some((val, i2) => Math.abs(val - b2[i2]) > epsilon3);
@@ -274255,13 +274678,57 @@ function makeVitNgZoomCalibrator(initialNgProjectionScale, initialDeckZoom = 0)
     }
   };
 }
+function parseAnnotationChunkSegmentsWithPositions(buffer2, serializer2) {
+  const dv = new DataView(buffer2);
+  if (buffer2.byteLength <= 8)
+    return [];
+  const count2 = dv.getUint32(0, true);
+  if (count2 === 0)
+    return [];
+  const numBytes = serializer2.serializedBytes;
+  const properties2 = [null, null, null, null, null];
+  const results = [];
+  for (let i2 = 0; i2 < count2; i2++) {
+    serializer2.deserialize(dv, ANNOTATION_HEADER_OFFSET, i2, count2, true, properties2);
+    const phenotype = properties2[0];
+    const segId = properties2[1];
+    if (segId > 0) {
+      const propBase = ANNOTATION_HEADER_OFFSET + i2 * numBytes;
+      const x2 = dv.getFloat32(propBase + 0, true);
+      const y2 = dv.getFloat32(propBase + 4, true);
+      const z2 = dv.getFloat32(propBase + 8, true);
+      if (x2 !== 0 || y2 !== 0 || z2 !== 0) {
+        results.push({
+          id: String(segId),
+          // mesh segment ID - use for segments array
+          phenotype: Number(phenotype),
+          x: x2,
+          y: y2,
+          z: z2
+        });
+      }
+    }
+  }
+  return results;
+}
+const remapCellColors = (ngCellColors, cellIdToMeshIdRef) => {
+  const remapped = {};
+  Object.entries(ngCellColors).forEach(([cellId, color2]) => {
+    const meshId = cellIdToMeshIdRef.current[cellId] ?? cellId;
+    remapped[meshId] = color2;
+  });
+  return remapped;
+};
 const VITESSCE_INTERACTION_DELAY = 50;
 const INIT_VIT_ZOOM = -3.6;
 const ZOOM_EPS = 0.01;
 const ROTATION_EPS = 1e-3;
 const TARGET_EPS = 0.5;
 const NG_ROT_COOLDOWN_MS = 120;
+const MESH_LOAD_THRESHOLD = 100;
+const MESH_LOADING_OVERLAY_TIMEOUT = 1500;
 const GUIDE_URL = "https://vitessce.io/docs/ng-guide/";
+const MESH_OPACITY = 0.6;
 const LAST_INTERACTION_SOURCE = {
   vitessce: "vitessce",
   neuroglancer: "neuroglancer"
@@ -274278,10 +274745,11 @@ function NeuroglancerSubscriber(props) {
     downloadButtonVisible,
     removeGridComponent,
     theme,
-    showAxisLines = false,
+    showAxisLines = true,
     title: title2 = "Spatial",
     subtitle = "Powered by Neuroglancer",
     helpText = ViewHelpMapping.NEUROGLANCER,
+    meshLoadProjectionScaleThreshold,
     // Note: this is a temporary mechanism
     // to pass an initial NG camera state.
     // Ideally, all camera state should be passed via
@@ -274292,6 +274760,32 @@ function NeuroglancerSubscriber(props) {
   } = props;
   const loaders = useLoaders();
   const mergeCoordination = useMergeCoordination();
+  const { classes: classes2 } = useStyles$5();
+  const initialRotationPushedRef = useRef(false);
+  const getViewProjectionMatRef = useRef(null);
+  const obsIdToMeshIdRef = useRef({});
+  const meshIdToCellIdRef = useRef({});
+  const cellIdToMeshIdRef = useRef({});
+  const ngRotPushAtRef = useRef(0);
+  const lastInteractionSource = useRef(null);
+  const applyNgUpdateTimeoutRef = useRef(null);
+  const lastNgPushOrientationRef = useRef(null);
+  const initialRenderCalibratorRef = useRef(null);
+  const translationOffsetRef = useRef([0, 0, 0]);
+  const zoomRafRef = useRef(null);
+  const lastNgQuatRef = useRef([0, 0, 0, 1]);
+  const lastNgScaleRef = useRef(null);
+  const annotationInfoRef = useRef(null);
+  const annotationTransformRef = useRef(null);
+  const visibleSegmentIdsRef = useRef(null);
+  const chunkCacheRef = useRef(/* @__PURE__ */ new Map());
+  const resizeObserverRef = useRef(null);
+  const [isLayersLoaded, setIsLayersLoaded] = useState(false);
+  const [isMeshLoading, setIsMeshLoading] = useState(false);
+  const [annotationReady, setAnnotationReady] = useState(false);
+  const [csvLoaded, setCsvLoaded] = useState(false);
+  const updateVisibleSegmentsThrottledRef = useRef(null);
+  const viewportSizeRef = useRef({ width: 0, height: 0 });
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const coordinationScopesBy = useCoordinationScopesBy(coordinationScopes, coordinationScopesByRaw);
   const [{
@@ -274323,6 +274817,19 @@ function NeuroglancerSubscriber(props) {
     setSpatialRotationOrbit: setRotationOrbit,
     setSpatialZoom: setZoom
   }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.NEUROGLANCER], coordinationScopes);
+  const csvUrlRef = useRef(null);
+  const csvUrl = useMemo$1(() => {
+    if (csvUrlRef.current)
+      return csvUrlRef.current;
+    const obsSetsMap = loaders?.[dataset]?.loaders?.obsSets;
+    if (!obsSetsMap)
+      return null;
+    const firstLoader = obsSetsMap.values().next().value;
+    const url = firstLoader?.url ?? null;
+    if (url)
+      csvUrlRef.current = url;
+    return url;
+  }, [loaders, dataset]);
   const [ngWidth, ngHeight, containerRef] = useGridItemSize();
   const [segmentationLayerScopes, segmentationChannelScopesByLayer] = useMultiCoordinationScopesSecondaryNonNull(CoordinationType$1.SEGMENTATION_CHANNEL, CoordinationType$1.SEGMENTATION_LAYER, coordinationScopes, coordinationScopesBy);
   const pointLayerScopes = useMultiCoordinationScopesNonNull(CoordinationType$1.POINT_LAYER, coordinationScopes);
@@ -274351,7 +274858,9 @@ function NeuroglancerSubscriber(props) {
     CoordinationType$1.OBS_HIGHLIGHT,
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
-    CoordinationType$1.LEGEND_VISIBLE
+    CoordinationType$1.LEGEND_VISIBLE,
+    CoordinationType$1.FEATURE_TYPE,
+    CoordinationType$1.FEATURE_VALUE_TYPE
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.SEGMENTATION_LAYER, CoordinationType$1.SEGMENTATION_CHANNEL);
   const pointLayerCoordination = useComplexCoordination([
     CoordinationType$1.OBS_TYPE,
@@ -274368,7 +274877,10 @@ function NeuroglancerSubscriber(props) {
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
     CoordinationType$1.LEGEND_VISIBLE,
-    CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH
+    CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH,
+    CoordinationType$1.OBS_SET_COLOR,
+    CoordinationType$1.OBS_SET_SELECTION,
+    CoordinationType$1.ADDITIONAL_OBS_SETS
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
   const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [pointMultiIndicesData, pointMultiIndicesDataStatus, pointMultiIndicesDataErrors] = usePointMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
@@ -274394,34 +274906,89 @@ function NeuroglancerSubscriber(props) {
     segmentationMultiFeatureSelectionStatus,
     segmentationMultiIndicesDataStatus
   ]);
-  const { classes: classes2 } = useStyles$5();
+  const lastVitessceRotationRef = useRef({
+    x: spatialRotationX,
+    y: spatialRotationY,
+    z: spatialRotationZ,
+    orbit: spatialRotationOrbit
+  });
+  const prevCoordsRef = useRef({
+    zoom: spatialZoom,
+    rx: spatialRotationX,
+    ry: spatialRotationY,
+    rz: spatialRotationZ,
+    orbit: spatialRotationOrbit,
+    tx: spatialTargetX,
+    ty: spatialTargetY
+  });
   const segmentationColorMapping = useMemoCustomComparison(() => {
     const result = {};
     segmentationLayerScopes?.forEach((layerScope) => {
       result[layerScope] = {};
       segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
-        const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
-        const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor, spatialChannelOpacity } = segmentationChannelCoordination[0][layerScope][channelScope];
+        const { obsSets: layerSets, obsIndex: layerIndexFromSets } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
+        const layerIndex = layerIndexFromSets ?? null;
+        const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor, spatialChannelOpacity, featureValueColormap, featureValueColormapRange } = segmentationChannelCoordination[0][layerScope][channelScope];
         if (obsColorEncoding === "spatialChannelColor") {
-          if (layerIndex && spatialChannelColor) {
+          if (spatialChannelColor) {
             const hex2 = rgbToHex$1(spatialChannelColor);
             const ngCellColors = {};
-            if (obsSetSelection?.length > 0) {
-              const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
-              const selectedIds = /* @__PURE__ */ new Set();
-              obsSetSelection.forEach((setPath) => {
-                const rootNode = mergedCellSets?.tree?.find((n3) => n3.name === setPath[0]);
-                const leafNode = setPath.length > 1 ? rootNode?.children?.find((n3) => n3.name === setPath[1]) : rootNode;
-                leafNode?.set?.forEach(([id2]) => selectedIds.add(String(id2)));
-              });
-              layerIndex.forEach((id2) => {
-                if (selectedIds.has(String(id2))) {
+            if (layerIndex) {
+              if (obsSetSelection?.length > 0) {
+                const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
+                const selectedIds = /* @__PURE__ */ new Set();
+                obsSetSelection.forEach((setPath) => {
+                  const rootNode = mergedCellSets?.tree?.find((n3) => n3.name === setPath[0]);
+                  const leafNode = setPath.length > 1 ? rootNode?.children?.find((n3) => n3.name === setPath[1]) : rootNode;
+                  leafNode?.set?.forEach(([id2]) => selectedIds.add(String(id2)));
+                });
+                layerIndex.forEach((id2) => {
+                  if (selectedIds.has(String(id2))) {
+                    ngCellColors[id2] = hex2;
+                  }
+                });
+              } else {
+                layerIndex.forEach((id2) => {
                   ngCellColors[id2] = hex2;
-                }
-              });
+                });
+              }
             }
-            result[layerScope][channelScope] = ngCellColors;
+            result[layerScope][channelScope] = remapCellColors(ngCellColors, cellIdToMeshIdRef);
+            result[layerScope].opacity = spatialChannelOpacity ?? 1;
+            result[layerScope].defaultColor = hex2;
+          }
+        } else if (obsColorEncoding === "geneSelection") {
+          const instanceObsIndex = obsSegmentationsSetsData?.[layerScope]?.[channelScope]?.obsIndex;
+          const matrixObsIndex = segmentationMultiIndicesData?.[layerScope]?.[channelScope]?.obsIndex;
+          const expressionData = segmentationMultiExpressionNormData?.[layerScope]?.[channelScope];
+          if (instanceObsIndex && matrixObsIndex && expressionData?.[0]) {
+            const matrixIndexMap = new Map(matrixObsIndex.map((key2, i2) => {
+              const normalizedKey = key2.replace(/^.*_/, "");
+              return [normalizedKey, i2];
+            }));
+            const toMatrixIndex = instanceObsIndex.map((key2) => matrixIndexMap.get(String(key2)));
+            const [low, high] = featureValueColormapRange ?? [0, 1];
+            const ngCellColors = {};
+            instanceObsIndex.forEach((id2, i2) => {
+              const rowIndex = toMatrixIndex[i2];
+              const rawVal = expressionData[0][rowIndex] ?? 0;
+              const t4 = rawVal / 255;
+              const tScaled = (t4 - low) / Math.max(high - low, 1e-4);
+              const tClamped = Math.max(0, Math.min(1, tScaled));
+              const color2 = applyColormap(featureValueColormap ?? "viridis", tClamped);
+              ngCellColors[id2] = rgbToHex$1(color2);
+            });
+            result[layerScope][channelScope] = remapCellColors(ngCellColors, cellIdToMeshIdRef);
+            result[layerScope].opacity = spatialChannelOpacity ?? 1;
+          } else if (instanceObsIndex) {
+            const fallbackColor = spatialChannelColor ? rgbToHex$1(spatialChannelColor) : GREY_HEX;
+            const ngCellColors = {};
+            instanceObsIndex.forEach((id2) => {
+              ngCellColors[id2] = fallbackColor;
+            });
+            result[layerScope][channelScope] = remapCellColors(ngCellColors, cellIdToMeshIdRef);
             result[layerScope].opacity = spatialChannelOpacity ?? 1;
+            result[layerScope].defaultColor = fallbackColor;
           }
         } else if (layerSets && layerIndex) {
           const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
@@ -274433,10 +275000,10 @@ function NeuroglancerSubscriber(props) {
             theme
           });
           const ngCellColors = {};
-          cellColors.forEach((color2, i2) => {
-            ngCellColors[i2] = rgbToHex$1(color2);
+          cellColors.forEach((color2, id2) => {
+            ngCellColors[id2] = rgbToHex$1(color2);
           });
-          result[layerScope][channelScope] = ngCellColors;
+          result[layerScope][channelScope] = remapCellColors(ngCellColors, cellIdToMeshIdRef);
           result[layerScope].opacity = spatialChannelOpacity ?? 1;
         }
       });
@@ -274449,14 +275016,201 @@ function NeuroglancerSubscriber(props) {
     segmentationChannelScopesByLayer,
     obsSegmentationsSetsData,
     segmentationChannelCoordination,
-    theme
+    theme,
+    segmentationMultiExpressionNormData,
+    segmentationMultiIndicesData,
+    csvLoaded
   }, customIsEqualForCellColors);
-  const initalViewerState = useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
+  const initialViewerState = useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
   const [latestViewerStateIteration, incrementLatestViewerStateIteration] = useReducer((x2) => x2 + 1, 0);
   const latestViewerStateRef = useRef({
-    ...initalViewerState,
+    ...initialViewerState,
     ...initialNgCameraState ?? {}
   });
+  useEffect(() => {
+    if (!csvUrl)
+      return;
+    fetch(csvUrl).then((r3) => r3.text()).then((text2) => {
+      const lines = text2.split("\n");
+      const header = lines[0].split(",");
+      const meshIdIdx = header.indexOf("MeshID");
+      const cellIdIdx = header.indexOf("CellID");
+      const meshMap = {};
+      const cellMap = {};
+      lines.slice(1).forEach((l2) => {
+        const cols = l2.split(",");
+        const meshId = cols[meshIdIdx]?.trim();
+        const cellId = cols[cellIdIdx]?.trim();
+        if (meshId && cellId) {
+          meshMap[meshId] = cellId;
+          cellMap[cellId] = meshId;
+        }
+      });
+      meshIdToCellIdRef.current = meshMap;
+      cellIdToMeshIdRef.current = cellMap;
+      setCsvLoaded(true);
+    });
+  }, [csvUrl]);
+  useEffect(() => {
+    chunkCacheRef.current.clear();
+  }, [obsPointsData]);
+  useEffect(() => {
+    if (ngWidth && ngHeight) {
+      viewportSizeRef.current = { width: ngWidth, height: ngHeight };
+    }
+  }, [ngWidth, ngHeight]);
+  const setContainerNode = useCallback((node2) => {
+    containerRef.current = node2;
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+    if (node2) {
+      const rect2 = node2.getBoundingClientRect();
+      if (rect2.width && rect2.height) {
+        viewportSizeRef.current = { width: rect2.width, height: rect2.height };
+      }
+      const observer2 = new ResizeObserver((entries2) => {
+        const entry2 = entries2[0];
+        if (!entry2)
+          return;
+        const { width: width2, height: height2 } = entry2.contentRect;
+        if (width2 && height2) {
+          viewportSizeRef.current = { width: width2, height: height2 };
+        }
+      });
+      observer2.observe(node2);
+      resizeObserverRef.current = observer2;
+    }
+  }, []);
+  const updateVisibleSegments = useCallback(async () => {
+    if (!annotationInfoRef.current)
+      return;
+    if (!annotationTransformRef.current)
+      return;
+    if (!segmentationLayerScopes?.length)
+      return;
+    if (!pointLayerScopes?.length)
+      return;
+    const { position: position2, projectionScale } = latestViewerStateRef.current;
+    if (!position2 || !projectionScale)
+      return;
+    const maxProjectionScale = meshLoadProjectionScaleThreshold ?? MESH_LOAD_THRESHOLD;
+    if (projectionScale > maxProjectionScale) {
+      if (visibleSegmentIdsRef.current?.length !== 0) {
+        visibleSegmentIdsRef.current = [];
+        incrementLatestViewerStateIteration();
+        setIsMeshLoading(false);
+      }
+      return;
+    }
+    const { width: width2, height: height2 } = viewportSizeRef.current;
+    if (!width2 || !height2)
+      return;
+    const transform3 = annotationTransformRef.current;
+    const info2 = annotationInfoRef.current;
+    const cellsUrl2 = info2.url;
+    const allLevelCoords = info2.spatial.flatMap((level) => {
+      const [gx, gy, gz] = level.grid_shape;
+      const coords = [];
+      for (let cx = 0; cx < gx; cx++) {
+        for (let cy = 0; cy < gy; cy++) {
+          for (let cz = 0; cz < gz; cz++) {
+            coords.push({ level: level.key, cx, cy, cz });
+          }
+        }
+      }
+      return coords;
+    });
+    const fetchChunkWithPositions = async ({ level, cx, cy, cz }) => {
+      const { serializers, serializer: defaultSerializer } = annotationTransformRef.current;
+      const serializer2 = serializers?.[0] ?? defaultSerializer;
+      if (!serializer2)
+        return [];
+      const cacheKey = `${cellsUrl2}/${level}/${cx}_${cy}_${cz}`;
+      if (chunkCacheRef.current.has(cacheKey)) {
+        return chunkCacheRef.current.get(cacheKey);
+      }
+      try {
+        const res = await fetch(cacheKey);
+        if (!res.ok) {
+          chunkCacheRef.current.set(cacheKey, []);
+          return [];
+        }
+        const buffer2 = await res.arrayBuffer();
+        const entries2 = parseAnnotationChunkSegmentsWithPositions(buffer2, serializer2);
+        chunkCacheRef.current.set(cacheKey, entries2);
+        return entries2;
+      } catch (e3) {
+        chunkCacheRef.current.set(cacheKey, []);
+        return [];
+      }
+    };
+    try {
+      const results = await Promise.all(allLevelCoords.map(fetchChunkWithPositions));
+      const seenIds = /* @__PURE__ */ new Set();
+      const allEntries = results.flat().filter(({ id: id2 }) => {
+        if (seenIds.has(id2))
+          return false;
+        seenIds.add(id2);
+        return true;
+      });
+      const obsIdToMeshId = {};
+      allEntries.forEach(({ id: id2, obsId }) => {
+        obsIdToMeshId[obsId] = id2;
+      });
+      obsIdToMeshIdRef.current = obsIdToMeshId;
+      const mat = getViewProjectionMatRef.current?.();
+      let visibleIds;
+      if (!mat) {
+        console.warn("No viewProjectionMatrix, loading all");
+        visibleIds = [...new Set(allEntries.map(({ id: id2 }) => id2))];
+      } else {
+        const margin2 = Math.max(width2, height2) * 0.5;
+        visibleIds = [...new Set(allEntries.filter(({ x: x2, y: y2, z: z2 }) => {
+          const vx = x2 / transform3.x;
+          const vy = y2 / transform3.y;
+          const vz = (z2 || 0) / transform3.z;
+          const cx = mat[0] * vx + mat[4] * vy + mat[8] * vz + mat[12];
+          const cy = mat[1] * vx + mat[5] * vy + mat[9] * vz + mat[13];
+          const cw2 = mat[3] * vx + mat[7] * vy + mat[11] * vz + mat[15];
+          const screenX = (cx / cw2 + 1) * 0.5 * width2;
+          const screenY = (1 - cy / cw2) * 0.5 * height2;
+          return screenX >= -margin2 && screenX <= width2 + margin2 && screenY >= -margin2 && screenY <= height2 + margin2;
+        }).map(({ id: id2 }) => id2))];
+      }
+      if (visibleIds.length === 0) {
+        if (visibleSegmentIdsRef.current?.length !== 0) {
+          visibleSegmentIdsRef.current = [];
+          incrementLatestViewerStateIteration();
+        }
+        setIsMeshLoading(false);
+        return;
+      }
+      const prevIds = new Set(visibleSegmentIdsRef.current ?? []);
+      const addedIdsCount = visibleIds.filter((id2) => !prevIds.has(id2)).length;
+      const hasSignificantChange = addedIdsCount > 20;
+      if (hasSignificantChange && visibleIds.length > 0) {
+        setIsMeshLoading(true);
+      }
+      const prevSorted = [...visibleSegmentIdsRef.current ?? []].sort().join(",");
+      const nextSorted = [...visibleIds].sort().join(",");
+      if (prevSorted !== nextSorted) {
+        visibleSegmentIdsRef.current = visibleIds;
+        incrementLatestViewerStateIteration();
+      }
+      if (hasSignificantChange) {
+        setTimeout(() => setIsMeshLoading(false), MESH_LOADING_OVERLAY_TIMEOUT);
+      }
+    } catch (e3) {
+      console.warn("[updateVisibleSegments] error:", e3);
+      setIsMeshLoading(false);
+    }
+  }, [segmentationLayerScopes, pointLayerScopes, obsPointsData, meshLoadProjectionScaleThreshold]);
+  useEffect(() => {
+    updateVisibleSegmentsThrottledRef.current = throttle$1(updateVisibleSegments, 500);
+    return () => updateVisibleSegmentsThrottledRef.current?.cancel();
+  }, [updateVisibleSegments]);
   useEffect(() => {
     const prevNgCameraState = {
       position: latestViewerStateRef.current.position,
@@ -274464,37 +275218,50 @@ function NeuroglancerSubscriber(props) {
       projectionScale: latestViewerStateRef.current.projectionScale
     };
     latestViewerStateRef.current = {
-      ...initalViewerState,
+      ...initialViewerState,
       ...prevNgCameraState
     };
     incrementLatestViewerStateIteration();
-  }, [initalViewerState]);
-  const initialRotationPushedRef = useRef(false);
-  const ngRotPushAtRef = useRef(0);
-  const lastInteractionSource = useRef(null);
-  const applyNgUpdateTimeoutRef = useRef(null);
-  const lastNgPushOrientationRef = useRef(null);
-  const initialRenderCalibratorRef = useRef(null);
-  const translationOffsetRef = useRef([0, 0, 0]);
-  const zoomRafRef = useRef(null);
-  const lastNgQuatRef = useRef([0, 0, 0, 1]);
-  const lastNgScaleRef = useRef(null);
-  const lastVitessceRotationRef = useRef({
-    x: spatialRotationX,
-    y: spatialRotationY,
-    z: spatialRotationZ,
-    orbit: spatialRotationOrbit
-  });
-  const [isLayersLoaded, setIsLayersLoaded] = useState(false);
-  const prevCoordsRef = useRef({
-    zoom: spatialZoom,
-    rx: spatialRotationX,
-    ry: spatialRotationY,
-    rz: spatialRotationZ,
-    orbit: spatialRotationOrbit,
-    tx: spatialTargetX,
-    ty: spatialTargetY
-  });
+  }, [initialViewerState]);
+  const cellsUrl = useMemo$1(() => {
+    const firstScope = pointLayerScopes?.[0];
+    return obsPointsUrls?.[firstScope]?.[0]?.url ?? null;
+  }, [pointLayerScopes, obsPointsUrls]);
+  const hasMatchingAnnotationSource = useMemo$1(() => {
+    if (!cellsUrl)
+      return false;
+    const firstPointScope = pointLayerScopes?.[0];
+    return pointsHaveMatchingSegmentation({
+      pointObsType: pointLayerCoordination[0]?.[firstPointScope]?.obsType,
+      segmentationLayerScopes,
+      segmentationChannelScopesByLayer,
+      segmentationChannelCoordination
+    });
+  }, [cellsUrl, pointLayerScopes, segmentationLayerScopes, segmentationChannelScopesByLayer]);
+  useEffect(() => {
+    if (!cellsUrl)
+      return;
+    fetch(`${cellsUrl}/info`).then((r3) => r3.json()).then((info2) => {
+      const infoWithUrl = {
+        ...info2,
+        url: cellsUrl
+      };
+      annotationInfoRef.current = infoWithUrl;
+      if (annotationTransformRef.current)
+        setAnnotationReady(true);
+    }).catch((err2) => console.error("failed to fetch annotation info:", err2));
+  }, [cellsUrl]);
+  useEffect(() => {
+    if (annotationReady) {
+      setIsLayersLoaded(true);
+      updateVisibleSegments();
+    }
+  }, [annotationReady]);
+  const onAnnotationSourceReady = useCallback((transform3) => {
+    annotationTransformRef.current = transform3;
+    if (annotationInfoRef.current)
+      setAnnotationReady(true);
+  }, []);
   const handleStateUpdate = useCallback((newState) => {
     lastInteractionSource.current = LAST_INTERACTION_SOURCE.neuroglancer;
     const { projectionScale, projectionOrientation, position: position2 } = newState;
@@ -274527,6 +275294,7 @@ function NeuroglancerSubscriber(props) {
           setZoom(vitZoomFromNg);
           zoomRafRef.current = null;
         });
+        updateVisibleSegments();
       }
       lastNgScaleRef.current = projectionScale;
     }
@@ -274567,7 +275335,8 @@ function NeuroglancerSubscriber(props) {
       projectionScale,
       position: position2
     };
-  }, []);
+    updateVisibleSegmentsThrottledRef.current?.();
+  }, [updateVisibleSegmentsThrottledRef]);
   const onSegmentClick = useCallback((value2) => {
     if (value2) {
       const id2 = String(value2);
@@ -274592,11 +275361,18 @@ function NeuroglancerSubscriber(props) {
       const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
       result[layerScope] = {
         colors: segmentationColorMapping?.[layerScope]?.[channelScope] ?? {},
-        opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1
+        opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1,
+        defaultColor: segmentationColorMapping?.[layerScope]?.defaultColor ?? null
       };
     });
     return result;
   }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
+  useEffect(() => {
+    if (!hasMatchingAnnotationSource && isReady && !segmentationLayerScopes?.length) {
+      setIsLayersLoaded(true);
+    }
+  }, [hasMatchingAnnotationSource, isReady, segmentationLayerScopes]);
+  const meshOpacity = hasMatchingAnnotationSource ? MESH_OPACITY : void 0;
   const derivedViewerState = useMemo$1(() => {
     const { current: current2 } = latestViewerStateRef;
     if (current2.layers.length <= 0) {
@@ -274655,13 +275431,33 @@ function NeuroglancerSubscriber(props) {
       lastInteractionSource.current = null;
     }
     const updatedLayers = current2?.layers?.map((layer, idx) => {
-      const layerScope = segmentationLayerScopes?.[idx];
+      if (layer.type !== "segmentation")
+        return layer;
+      const layerScope = segmentationLayerScopes?.find((scope) => layer.name?.includes(scope));
+      if (!layerScope)
+        return layer;
       const layerColorMapping = cellColorMappingByLayer?.[layerScope]?.colors ?? {};
-      const layerSegments = Object.keys(layerColorMapping);
+      const defaultColor = cellColorMappingByLayer?.[layerScope]?.defaultColor;
+      let segments2 = [];
+      if (hasMatchingAnnotationSource) {
+        segments2 = visibleSegmentIdsRef.current ?? [];
+      } else if (Object.keys(layerColorMapping).length > 0) {
+        segments2 = Object.keys(layerColorMapping);
+      }
+      let derivedSegmentColors = {};
+      if (hasMatchingAnnotationSource && segments2.length > 0) {
+        segments2.forEach((meshId) => {
+          const color2 = layerColorMapping[meshId] || defaultColor;
+          if (color2)
+            derivedSegmentColors[meshId] = color2;
+        });
+      } else if (!hasMatchingAnnotationSource) {
+        derivedSegmentColors = layerColorMapping;
+      }
       return {
         ...layer,
-        segments: layerSegments,
-        segmentColors: layerColorMapping,
+        segments: segments2,
+        segmentColors: derivedSegmentColors,
         objectAlpha: cellColorMappingByLayer?.[layerScope]?.opacity ?? 1
       };
     }) ?? [];
@@ -274691,17 +275487,21 @@ function NeuroglancerSubscriber(props) {
     spatialRotationZ,
     spatialTargetX,
     spatialTargetY,
-    initalViewerState,
-    latestViewerStateIteration
+    initialViewerState,
+    latestViewerStateIteration,
+    hasMatchingAnnotationSource
   ]);
   const onSegmentHighlight = useCallback((obsId) => {
     setCellHighlight(String(obsId));
   }, [setCellHighlight]);
   const handleLayerLoadingChange = useCallback((isLoaded) => {
-    setIsLayersLoaded(isLoaded);
-  }, []);
+    if (!isLayersLoaded && isLoaded) {
+      setIsLayersLoaded(true);
+    }
+  }, [isLayersLoaded]);
   const hasLayers = derivedViewerState?.layers?.length > 0;
-  return jsx$1(TitleInfo, { title: title2, info: subtitle, helpText, isSpatial: true, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady: isReady && isLayersLoaded, errors, withPadding: false, guideUrl: GUIDE_URL, children: hasLayers ? jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, ref: containerRef, children: [jsx$1("div", { style: { position: "absolute", top: 0, right: 0, zIndex: 50 }, children: jsx$1(MultiLegend, {
+  const showPointsLegend = !hasMatchingAnnotationSource;
+  return jsx$1(TitleInfo, { title: title2, info: subtitle, helpText, isSpatial: true, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady: isReady && isLayersLoaded, errors, withPadding: false, guideUrl: GUIDE_URL, children: hasLayers ? jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, ref: setContainerNode, children: [jsx$1("div", { style: { position: "absolute", top: 0, right: 0, zIndex: 50 }, children: jsx$1(MultiLegend, {
     theme: "dark",
     maxHeight: ngHeight,
     // Segmentations
@@ -274710,10 +275510,12 @@ function NeuroglancerSubscriber(props) {
     segmentationChannelScopesByLayer,
     segmentationChannelCoordination,
     // Points
-    pointLayerScopes,
+    pointLayerScopes: showPointsLegend ? pointLayerScopes : void 0,
     pointLayerCoordination,
     pointMultiIndicesData
-  }) }), jsx$1(NeuroglancerComp, { classes: classes2, onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate, onLayerLoadingChange: handleLayerLoadingChange })] }) : null });
+  }) }), isMeshLoading ? jsx$1(Chip, { label: "Loading meshes...", size: "small", color: "primary", className: classes2.meshLoadingIndicator }) : null, jsx$1(NeuroglancerComp, { classes: classes2, onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate, onLayerLoadingChange: handleLayerLoadingChange, onAnnotationSourceReady, onViewerReady: (getFn) => {
+    getViewProjectionMatRef.current = getFn;
+  }, getMeshIdToCellId: (meshId) => meshIdToCellIdRef.current[meshId], cellsUrl, meshOpacity })] }) : null });
 }
 const FEATURE_AGGREGATION_STRATEGIES = ["first", "last", "sum", "mean"];
 function CellSetExpressionPlotOptions(props) {
@@ -276552,7 +277354,7 @@ function useFilteredVolcanoData(props) {
       const rawSampleSetPathB = coordinationValues.sampleSetFilter[1];
       const sampleSetPathB = [...rawSampleSetPathB];
       sampleSetPathB[0] = sampleSetsColumnNameMappingReversed[rawSampleSetPathB[0]];
-      if (isEqual$3(sampleSetPathA, sampleSetSelection[1]) && isEqual$3(sampleSetPathB, sampleSetSelection[0])) {
+      if (isEqual$3(sampleSetPathA, sampleSetSelection[0]) && isEqual$3(sampleSetPathB, sampleSetSelection[1])) {
         shouldSwapFoldChangeDirection = true;
       }
     }
@@ -327211,7 +328013,7 @@ const VEGA_THEMES = {
 };
 const DATASET_NAME = "table";
 function VegaGlobalStyles() {
-  const { theme } = useStyles$y();
+  const { theme } = useStyles$z();
   return jsx$1(GlobalStyles$3, { styles: {
     "#vg-tooltip-element.vg-tooltip.custom-theme": {
       boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
@@ -327245,7 +328047,7 @@ function renderTooltipContents(tooltipText) {
 }
 function VegaPlot(props) {
   const { spec: partialSpec, data: data2, getTooltipText, signalListeners, renderer = "svg", onNewView } = props;
-  const { classes: tooltipClasses2 } = useStyles$t();
+  const { classes: tooltipClasses2 } = useStyles$u();
   const tooltipHandler = useMemo$1(() => {
     if (typeof getTooltipText === "function") {
       const tooltipConfig = {
@@ -328306,6 +329108,10 @@ function TreemapSubscriber(props) {
   }, [setObsSetSelection]);
   return jsxs(TitleInfo, { title: `Treemap of ${capitalize$3(pluralize(obsType, 2))}`, info: `${commaNumber(selectedObsCount)} ${pluralize(obsType, selectedObsCount)} from ${commaNumber(selectedSampleCount)} ${pluralize(sampleType, selectedSampleCount)}`, removeGridComponent, urls: urls2, theme, isReady, helpText, errors, withPadding: false, options: jsx$1(TreemapOptions, { obsType, sampleType, obsColorEncoding, setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels }), children: [jsx$1("div", { ref: containerRef, className: classes2.vegaContainer, children: jsx$1(Treemap, { obsCounts, sampleCounts, obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme, width: width2, height: Math.max(height2 * (selectedObsCount / totalObsCount), 40), obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, onNodeClick }) }), jsx$1("div", { style: { position: "absolute", right: "2px", bottom: "2px", fontSize: "10px" }, children: unselectedObsCount > 0 ? jsx$1("span", { children: `${commaNumber(unselectedObsCount)} ${pluralize(obsType, unselectedObsCount)} from ${commaNumber(unselectedSampleCount)} ${pluralize(sampleType, unselectedSampleCount)} currently omitted` }) : null })] });
 }
+const GOLDEN_RATIO = 0.6180339887498948;
+function topJitter(index2, rangePixels) {
+  return index2 * GOLDEN_RATIO % 1 * rangePixels;
+}
 function VolcanoPlot(props) {
   const { theme, width: width2, height: height2, obsType, featureType, obsSetsColumnNameMappingReversed, sampleSetsColumnNameMappingReversed, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data: data2, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold } = props;
   const svgRef = useRef();
@@ -328367,10 +329173,10 @@ function VolcanoPlot(props) {
       const obsSetPath2 = [...rawObsSetPath];
       obsSetPath2[0] = obsSetsColumnNameMappingReversed[rawObsSetPath[0]];
       const color2 = obsSetColorScale(obsSetPath2);
-      obsSetG.append("g").selectAll("circle").data(filteredDf).join("circle").attr("cx", (d) => xScale(d.logFoldChange)).attr("cy", (d) => yScale(d.minusLog10p)).attr("r", 3).attr("opacity", 0.5).attr("fill", color2).on("click", (event2, d) => {
+      obsSetG.append("g").selectAll("circle").data(filteredDf).join("circle").attr("cx", (d) => xScale(d.logFoldChange)).attr("cy", (d, i2) => yScale(d.minusLog10p) + (!Number.isFinite(d.minusLog10p) ? topJitter(i2, 20) : 0)).attr("r", 3).attr("opacity", 0.5).attr("fill", color2).on("click", (event2, d) => {
         onFeatureClick(d.featureId);
       });
-      const textElements = obsSetG.append("g").selectAll("text").data(filteredDf).join("text").text((d) => d.featureId).attr("text-anchor", (d) => d.logFoldChange < 0 ? "end" : "start").attr("x", (d) => xScale(d.logFoldChange)).attr("y", (d) => yScale(d.minusLog10p)).style("display", (d) => Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5) || d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01) ? "none" : void 0).attr("fill", color2).on("click", (event2, d) => {
+      const textElements = obsSetG.append("g").selectAll("text").data(filteredDf).join("text").text((d) => d.featureId).attr("text-anchor", (d) => d.logFoldChange < 0 ? "end" : "start").attr("x", (d) => xScale(d.logFoldChange)).attr("y", (d, i2) => yScale(d.minusLog10p) + (!Number.isFinite(d.minusLog10p) ? topJitter(i2, 20) : 0)).style("display", (d) => Math.abs(d.logFoldChange) < (featureLabelFoldChangeThreshold ?? 5) || d.featureSignificance >= (featureLabelSignificanceThreshold ?? 0.01) ? "none" : void 0).attr("fill", color2).on("click", (event2, d) => {
         onFeatureClick(d.featureId);
       });
       textElements.append("title").text((d) => `${featureType}: ${d.featureId}
@@ -353180,6 +353986,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE, true, z.boolean()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION, "vertical", z.enum(["vertical", "horizontal"])),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE, 14, z.number()),
+  new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNELS_SORT_ORDER, "original", z.enum(["original", "alphabetical"])),
   new PluginCoordinationType(CoordinationType$1.SAMPLE_TYPE, "sample", z.string().nullable()),
   // TODO: remove one array level and use multi-coordination for sampleSetSelection?
   new PluginCoordinationType(CoordinationType$1.SAMPLE_FILTER, null, z.array(z.string()).nullable()),
@@ -353734,7 +354541,7 @@ function UncontrolledLauncher(props) {
   ));
 }
 export {
-  diffCameraState as $,
+  GREY_HEX as $,
   require_descriptors as A,
   BaseDecoder as B,
   CoordinationType$1 as C,
@@ -353763,8 +354570,9 @@ export {
   require_redefine as Z,
   require_objectAssign as _,
   getDefaultExportFromCjs$1 as a,
-  UncontrolledLauncher as a0,
-  ControlledLauncher as a1,
+  diffCameraState as a0,
+  UncontrolledLauncher as a1,
+  ControlledLauncher as a2,
   LercAddCompression as b,
   commonjsGlobal$1 as c,
   requireAssign as d,