@vitessce/all 3.3.1 → 3.3.3

package/dist/{index-1b56347b.js → index-e7182d2c.js}

@@ -29,7 +29,7 @@ var __privateMethod = (obj, member, method2) => {
 var _bytes, _encoder, _encode_buffer, _strides, _TypedArray, _BYTES_PER_ELEMENT, _shape, _endian, _shape2, _strides2, _metadata, _a2, _metadata2, _b, _c, _overrides, _use_suffix_request, _merge_init, merge_init_fn;
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useContext, useReducer, Suspense } from "react";
-import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useCoordinationScopes, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useMultiObsPoints, usePointMultiObsLabels, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, logConfig, VitS } from "@vitessce/vit-s";
+import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useMergeCoordination, useCoordinationScopes, useCoordinationScopesBy, useMultiCoordinationScopesSecondaryNonNull, useMultiCoordinationScopesNonNull, useComplexCoordination, useComplexCoordinationSecondary, useMultiObsPoints, usePointMultiObsLabels, useMultiObsSpots, useSpotMultiObsSets, useSpotMultiFeatureSelection, useSpotMultiObsFeatureMatrixIndices, useSegmentationMultiObsLocations, useMultiObsSegmentations, useSegmentationMultiObsSets, useSegmentationMultiFeatureSelection, useSegmentationMultiObsFeatureMatrixIndices, useMultiImages, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useRemoveImageChannelInMetaCoordinationScopes, useAddImageChannelInMetaCoordinationScopes, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, logConfig, VitS } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function _mergeNamespaces(n3, m2) {
@@ -19015,7 +19015,9 @@ const FileType$1 = {
   OBS_SEGMENTATIONS_JSON: "obsSegmentations.json",
   OBS_SETS_CSV: "obsSets.csv",
   OBS_SETS_JSON: "obsSets.json",
+  // OME-Zarr
   IMAGE_OME_ZARR: "image.ome-zarr",
+  OBS_SEGMENTATIONS_OME_ZARR: "obsSegmentations.ome-zarr",
   // AnnData
   OBS_FEATURE_MATRIX_ANNDATA_ZARR: "obsFeatureMatrix.anndata.zarr",
   OBS_SETS_ANNDATA_ZARR: "obsSets.anndata.zarr",
@@ -19504,7 +19506,9 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_SEGMENTATION_FILLED,
     CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH,
     CoordinationType$1.IMAGE_CHANNEL,
+    CoordinationType$1.IMAGE_LAYER,
     CoordinationType$1.SEGMENTATION_CHANNEL,
+    CoordinationType$1.SEGMENTATION_LAYER,
     CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
     CoordinationType$1.SPATIAL_CHANNEL_OPACITY,
     CoordinationType$1.SPATIAL_CHANNEL_WINDOW,
@@ -19522,6 +19526,9 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_SPOT_STROKE_WIDTH,
     CoordinationType$1.SPATIAL_LAYER_COLOR,
     CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.FEATURE_VALUE_COLORMAP,
+    CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.FEATURE_SELECTION,
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
     CoordinationType$1.LEGEND_VISIBLE,
@@ -19884,13 +19891,22 @@ const imageOmeTiffSchema = z.object({
   offsetsUrl: z.string().optional(),
   coordinateTransformations: omeCoordinateTransformations.optional()
 });
+const obsSegmentationsOmeTiffSchema = imageOmeTiffSchema.extend({
+  obsTypesFromChannelNames: z.boolean().optional()
+});
 const imageOmeZarrSchema = z.object({
   coordinateTransformations: omeCoordinateTransformations.optional()
 });
+const obsSegmentationsOmeZarrSchema = imageOmeZarrSchema.extend({
+  obsTypesFromChannelNames: z.boolean().optional()
+});
 const imageSpatialdataSchema = imageOmeZarrSchema.extend({
   path: z.string()
 });
 const obsSegmentationsSpatialdataSchema = z.object({
+  // TODO: should this also extend the imageOmeZarrSchema?
+  // TODO: should this be renamed labelsSpatialdataSchema?
+  // TODO: support obsTypesFromChannelNames?
   path: z.string()
 });
 z.object({
@@ -19975,6 +19991,19 @@ const anndataZarrSchema = z.object({
     z.array(annDataConvenienceObsEmbeddingItem)
   ])
 }).partial();
+const spatialdataZarrSchema = z.object({
+  // TODO: should `image` be a special schema
+  // to allow specifying fileUid (like for embeddingType)?
+  image: imageSpatialdataSchema,
+  // TODO: should this be a special schema
+  // to allow specifying fileUid (like for embeddingType)?
+  labels: obsSegmentationsSpatialdataSchema,
+  obsFeatureMatrix: obsFeatureMatrixSpatialdataSchema,
+  obsSpots: obsSpotsSpatialdataSchema,
+  // TODO: obsPoints
+  // TODO: obsLocations
+  obsSets: obsSetsSpatialdataSchema
+}).partial();
 const cellsJsonSchema = z.object({
   obsLabelsTypes: z.array(z.string()).optional(),
   embeddingTypes: z.array(z.string()).optional()
@@ -38827,7 +38856,7 @@ function Description(props2) {
   return jsxRuntimeExports.jsxs("div", { className: classes.description, children: [jsxRuntimeExports.jsx("p", { children: description2 }), metadata2 && Array.from(metadata2.entries()).map(([layerIndex, { name: layerName, metadata: metadataRecord }]) => metadataRecord && Object.entries(metadataRecord).length > 0 ? jsxRuntimeExports.jsxs("details", { children: [jsxRuntimeExports.jsx("summary", { children: layerName }), jsxRuntimeExports.jsx("div", { className: classes.metadataContainer, children: jsxRuntimeExports.jsx("table", { children: jsxRuntimeExports.jsx("tbody", { children: Object.entries(metadataRecord).map(([key2, value2]) => jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { title: key2, children: key2 }), jsxRuntimeExports.jsx("td", { title: value2, children: value2 })] }, key2)) }) }) })] }, layerIndex) : null)] });
 }
 function DescriptionSubscriber(props2) {
-  const { coordinationScopes, description: descriptionOverride, removeGridComponent, theme, title: title2 = "Description" } = props2;
+  const { coordinationScopes, description: descriptionOverride, removeGridComponent, theme, title: title2 = "Description", closeButtonVisible } = props2;
   const loaders = useLoaders();
   const [{ dataset, spatialImageLayer: rasterLayers }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.DESCRIPTION], coordinationScopes);
   const [description2] = useDescription(loaders, dataset);
@@ -38849,7 +38878,7 @@ function DescriptionSubscriber(props2) {
     }
     return result;
   }, [rasterLayers, imageLayerMeta, imageLayerLoaders]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, removeGridComponent, isScroll: true, theme, isReady, children: jsxRuntimeExports.jsx(Description, { description: descriptionOverride || description2, metadata: metadata2 }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, removeGridComponent, isScroll: true, theme, isReady, children: jsxRuntimeExports.jsx(Description, { description: descriptionOverride || description2, metadata: metadata2 }) });
 }
 var _global = { exports: {} };
 var global$6 = _global.exports = typeof window != "undefined" && window.Math == Math ? window : typeof self != "undefined" && self.Math == Math ? self : Function("return this")();
@@ -39100,11 +39129,11 @@ var _toLength = function(it) {
   return it > 0 ? min$5(toInteger$2(it), 9007199254740991) : 0;
 };
 var toInteger$1 = _toInteger;
-var max$4 = Math.max;
+var max$5 = Math.max;
 var min$4 = Math.min;
 var _toAbsoluteIndex = function(index2, length2) {
   index2 = toInteger$1(index2);
-  return index2 < 0 ? max$4(index2 + length2, 0) : min$4(index2, length2);
+  return index2 < 0 ? max$5(index2 + length2, 0) : min$4(index2, length2);
 };
 var toIObject$5 = _toIobject;
 var toLength = _toLength;
@@ -52163,7 +52192,7 @@ function SetsManager(props2) {
 }
 const packageJson = { name: "vitessce" };
 function ObsSetsManagerSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, theme, title: titleOverride } = props2;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride } = props2;
   const loaders = useLoaders();
   const setWarning = useSetWarning();
   const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetExpansion: cellSetExpansion, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsColorEncoding: cellColorEncoding }, { setObsSetSelection: setCellSetSelection, setObsColorEncoding: setCellColorEncoding, setObsSetColor: setCellSetColor, setObsSetExpansion: setCellSetExpansion, setAdditionalObsSets: setAdditionalCellSets }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SETS], coordinationScopes);
@@ -52556,7 +52585,7 @@ function ObsSetsManagerSubscriber(props2) {
     setWarning,
     theme
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, removeGridComponent, urls: urls2, theme, isReady, children: manager });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, children: manager });
 }
 function ascending$6(a2, b2) {
   return a2 < b2 ? -1 : a2 > b2 ? 1 : a2 >= b2 ? 0 : NaN;
@@ -52783,6 +52812,24 @@ function tickStep$1(start, stop3, count2) {
     step1 *= 2;
   return stop3 < start ? -step1 : step1;
 }
+function max$4(values3, valueof) {
+  let max2;
+  if (valueof === void 0) {
+    for (const value2 of values3) {
+      if (value2 != null && (max2 < value2 || max2 === void 0 && value2 >= value2)) {
+        max2 = value2;
+      }
+    }
+  } else {
+    let index2 = -1;
+    for (let value2 of values3) {
+      if ((value2 = valueof(value2, ++index2, values3)) != null && (max2 < value2 || max2 === void 0 && value2 >= value2)) {
+        max2 = value2;
+      }
+    }
+  }
+  return max2;
+}
 function quantileSorted$1(values3, p, valueof = number$a) {
   if (!(n3 = values3.length))
     return;
@@ -156081,16 +156128,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-da28bf32.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-54abbb89.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-81ed6601.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-846a70ec.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-d4932e74.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-4c7ad087.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-0cb854db.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-8e20c0a6.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-344622f8.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-dc640134.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-ff8e0389.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-8a313c48.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-42f701c0.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-72021080.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -170384,16 +170431,16 @@ function normalize$4(arr) {
   const data2 = new Uint8Array(arr.map((i2) => Math.floor((i2 - min2) * ratio)));
   return data2;
 }
-function multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, texSize) {
+function multiSetsToTextureData(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, texSize) {
   let totalValuesLength = 0;
   let totalColorsLength = 0;
   channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
-    var _a3, _b2, _c2, _d, _e;
+    var _a3, _b2, _c2, _d;
     if (isSetColorMode) {
-      totalValuesLength += ((_b2 = (_a3 = setColorValues[channelIndex]) == null ? void 0 : _a3.obsIndex) == null ? void 0 : _b2.length) || 0;
-      totalColorsLength += (((_d = (_c2 = setColorValues[channelIndex]) == null ? void 0 : _c2.setColors) == null ? void 0 : _d.length) || 0) * 3;
+      totalColorsLength += (((_b2 = (_a3 = setColorValues[channelIndex]) == null ? void 0 : _a3.setColors) == null ? void 0 : _b2.length) || 0) * 3;
+      totalValuesLength += ((_c2 = setColorValues[channelIndex]) == null ? void 0 : _c2.obsIndex) ? max$4(setColorValues[channelIndex].obsIndex.map((d) => parseInt(d))) : 0;
     } else {
-      totalValuesLength += ((_e = multiFeatureValues[channelIndex]) == null ? void 0 : _e.length) || 0;
+      totalValuesLength += multiMatrixObsIndex[channelIndex] ? max$4(multiMatrixObsIndex[channelIndex].map((d) => parseInt(d))) : ((_d = multiFeatureValues[channelIndex]) == null ? void 0 : _d.length) || 0;
     }
   });
   const valueTexHeight = Math.max(2, Math.ceil(totalValuesLength / texSize));
@@ -170411,12 +170458,20 @@ function multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSet
   let indexOffset = 0;
   let colorOffset = 0;
   channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
+    const matrixObsIndex = multiMatrixObsIndex[channelIndex];
+    const bitmaskValueIsIndex = matrixObsIndex === null;
     if (isSetColorMode) {
       const { setColorIndices, setColors, obsIndex } = setColorValues[channelIndex] || {};
       if (setColorIndices && setColors && obsIndex) {
         for (let i2 = 0; i2 < obsIndex.length; i2++) {
-          const colorIndex = setColorIndices.get(String(i2 + 1));
-          totalData[indexOffset + i2] = colorIndex === void 0 ? 0 : colorIndex + 1;
+          let obsId = String(i2 + 1);
+          let obsI = i2;
+          if (!bitmaskValueIsIndex) {
+            obsId = obsIndex[i2];
+            obsI = parseInt(obsId) - 1;
+          }
+          const colorIndex = setColorIndices.get(obsId);
+          totalData[indexOffset + obsI] = colorIndex === void 0 ? 0 : colorIndex + 1;
         }
         for (let i2 = 0; i2 < setColors.length; i2++) {
           const { color: [r3, g2, b2] } = setColors[i2];
@@ -170431,7 +170486,16 @@ function multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSet
       colorOffset += (setColors == null ? void 0 : setColors.length) || 0;
     } else {
       const featureArr = multiFeatureValues[channelIndex];
-      totalData.set(normalize$4(featureArr), indexOffset);
+      const normalizedFeatureArr = normalize$4(featureArr);
+      if (!bitmaskValueIsIndex && matrixObsIndex) {
+        for (let i2 = 0; i2 < matrixObsIndex.length; i2++) {
+          const obsId = matrixObsIndex[i2];
+          const obsI = parseInt(obsId) - 1;
+          totalData[indexOffset + obsI] = normalizedFeatureArr[i2];
+        }
+      } else {
+        totalData.set(normalizedFeatureArr, indexOffset);
+      }
       indicesOffsets.push(indexOffset);
       indexOffset += featureArr.length;
       colorsOffsets.push(colorOffset);
@@ -170458,6 +170522,17 @@ function padWithDefault(arr, defaultValue2, padWidth) {
 function getColor(arr) {
   return arr ? arr.map((v) => v / 255) : [0, 0, 0];
 }
+function isEqualShallow(prevArr, nextArr) {
+  if (prevArr === nextArr) {
+    return true;
+  }
+  if (Array.isArray(prevArr) && Array.isArray(nextArr)) {
+    if (prevArr.length === nextArr.length) {
+      return !prevArr.some((v, i2) => v !== nextArr[i2] && (!Array.isArray(v) && !Array.isArray(nextArr[i2]) || (v.length > 0 || nextArr[i2].length > 0)));
+    }
+  }
+  return prevArr === nextArr;
+}
 const defaultProps = {
   channelStrokeWidths: { type: "array", value: null, compare: true },
   channelsFilled: { type: "array", value: null, compare: true },
@@ -170467,6 +170542,7 @@ const defaultProps = {
   colormap: { type: "string", value: GLSL_COLORMAP_DEFAULT, compare: true },
   expressionData: { type: "object", value: null, compare: true },
   multiFeatureValues: { type: "array", value: null, compare: true },
+  multiMatrixObsIndex: { type: "array", value: null, compare: true },
   setColorValues: { type: "array", value: null, compare: true },
   channelFeatureValueColormaps: { type: "array", value: null, compare: true },
   channelFeatureValueColormapRanges: { type: "array", value: null, compare: true },
@@ -170513,9 +170589,9 @@ class BitmaskLayer2 extends XRLayer {
   }
   updateState({ props: props2, oldProps, changeFlags }) {
     super.updateState({ props: props2, oldProps, changeFlags });
-    if (props2.multiFeatureValues !== oldProps.multiFeatureValues || props2.setColorValues !== oldProps.setColorValues || props2.channelIsSetColorMode !== oldProps.channelIsSetColorMode) {
-      const { multiFeatureValues, setColorValues, channelIsSetColorMode } = this.props;
-      const [valueTex, colorTex, valueTexOffsets, colorTexOffsets, valueTexHeight, colorTexHeight] = this.multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode);
+    if (!isEqualShallow(props2.multiFeatureValues, oldProps.multiFeatureValues) || !isEqualShallow(props2.multiMatrixObsIndex, oldProps.multiMatrixObsIndex) || !isEqualShallow(props2.setColorValues, oldProps.setColorValues) || !isEqualShallow(props2.channelIsSetColorMode, oldProps.channelIsSetColorMode)) {
+      const { multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode } = this.props;
+      const [valueTex, colorTex, valueTexOffsets, colorTexOffsets, valueTexHeight, colorTexHeight] = this.multiSetsToTexture(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode);
       this.setState({
         valueTex,
         colorTex,
@@ -170667,9 +170743,9 @@ class BitmaskLayer2 extends XRLayer {
       type: GL$1.FLOAT
     });
   }
-  multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode) {
+  multiSetsToTexture(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode) {
     const isWebGL2On = isWebGL2$1(this.context.gl);
-    const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets] = multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, MULTI_FEATURE_TEX_SIZE);
+    const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets] = multiSetsToTextureData(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, MULTI_FEATURE_TEX_SIZE);
     return [
       // Color indices texture
       new Texture2D(this.context.gl, {
@@ -173967,6 +174043,8 @@ function EmbeddingScatterplotSubscriber(props2) {
   const {
     uuid,
     coordinationScopes,
+    closeButtonVisible,
+    downloadButtonVisible,
     removeGridComponent,
     theme,
     observationsLabelOverride,
@@ -174126,7 +174204,7 @@ function EmbeddingScatterplotSubscriber(props2) {
     setTargetY(target2[1]);
     setTargetZ(target2[2] || 0);
   };
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState, originalViewState, obsEmbeddingIndex, obsEmbedding, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, tooltipsVisible, setTooltipsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, { ref: deckRef, uuid, theme, viewState: { zoom: zoom2, target: [targetX2, targetY2, targetZ] }, setViewState, originalViewState, obsEmbeddingIndex, obsEmbedding, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
     setComponentHover(uuid);
   }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected }), tooltipsVisible && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: expressionExtents == null ? void 0 : expressionExtents[0] })] });
 }
@@ -174175,6 +174253,8 @@ function GatingSubscriber(props2) {
   const {
     uuid,
     coordinationScopes,
+    closeButtonVisible,
+    downloadButtonVisible,
     removeGridComponent,
     theme,
     disableTooltip = false,
@@ -174369,7 +174449,7 @@ function GatingSubscriber(props2) {
     gatingFeatureSelectionY,
     obsType
   ]);
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(obsType, cellsCount)}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, children: jsxRuntimeExports.jsx(GatingScatterplotOptions, { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(obsType, cellsCount)}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(ScatterplotOptions, { observationsLabel: obsType, cellRadius: cellRadiusFixed, setCellRadius: setCellRadiusFixed, cellRadiusMode, setCellRadiusMode, cellOpacity: cellOpacityFixed, setCellOpacity: setCellOpacityFixed, cellOpacityMode, setCellOpacityMode, cellSetLabelsVisible, setCellSetLabelsVisible, cellSetLabelSize, setCellSetLabelSize, cellSetPolygonsVisible, setCellSetPolygonsVisible, cellColorEncoding, setCellColorEncoding, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, children: jsxRuntimeExports.jsx(GatingScatterplotOptions, { featureType, gatingFeatureSelectionX, setGatingFeatureSelectionX, gatingFeatureSelectionY, setGatingFeatureSelectionY, gatingFeatureValueTransform: featureValueTransform, setGatingFeatureValueTransform: (newValue) => {
     setFeatureValueTransform(newValue);
     setTargetX(null);
     setTargetY(null);
@@ -191331,8 +191411,7 @@ class ZarritaPixelSource extends ZarrPixelSource {
     this._readChunks = false;
   }
 }
-async function loadOmeZarr(url, requestInit2) {
-  const root2 = await zarrOpenRoot(url, requestInit2);
+async function loadOmeZarr(root2) {
   const { data: data2, rootAttrs, labels: labels2 } = await loadMultiscales(root2);
   const tileSize = guessTileSize(data2[0]);
   const pyramid = data2.map((arr) => new ZarritaPixelSource(createZarrArrayAdapter(arr), labels2, tileSize));
@@ -192169,7 +192248,7 @@ function SpatialTooltipSubscriber$1(props2) {
   return cellInfo ? jsxRuntimeExports.jsx(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsxRuntimeExports.jsx(TooltipContent, { info: cellInfo }) }) : null;
 }
 function SpatialSubscriber$1(props2) {
-  const { uuid, coordinationScopes, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false } = props2;
+  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false } = props2;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
@@ -192418,7 +192497,7 @@ function SpatialSubscriber$1(props2) {
     }
     return [names, colors2];
   }, [imageLayers, imageLayerLoaders]);
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, removeGridComponent, isReady, options, children: [jsxRuntimeExports.jsx("div", { style: {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, options, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "absolute",
     bottom: "5px",
     left: "5px",
@@ -192680,6 +192759,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     this.prevSpotSetColor = {};
     this.prevSpotSetSelection = {};
     this.segmentationToMatrixIndexMap = {};
+    this.segmentationToMatrixIndexArr = {};
     this.segmentationColors = {};
     this.segmentationExpressionGetters = {};
     this.prevSegmentationSetColor = {};
@@ -192962,7 +193042,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     return spatialRenderingMode === "3D";
   }
   // New createImageLayer function.
-  createBitmaskSegmentationLayer(layerScope, layerCoordination, channelScopes, channelCoordination, image2, layerFeatureValues) {
+  createBitmaskSegmentationLayer(layerScope, layerCoordination, channelScopes, channelCoordination, image2, layerFeatureValues, layerMatrixObsIndices, bitmaskValueIsIndex) {
     var _a3, _b2, _c2, _d;
     const { delegateHover, targetT, targetZ } = this.props;
     const data2 = (_b2 = (_a3 = image2 == null ? void 0 : image2.obsSegmentations) == null ? void 0 : _a3.instance) == null ? void 0 : _b2.getData();
@@ -193007,6 +193087,11 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
         var _a4;
         return ((_a4 = layerFeatureValues == null ? void 0 : layerFeatureValues[cScope]) == null ? void 0 : _a4[0]) || [];
       }),
+      // Pass in the matrixObsIndex to account for the fact that
+      // the obsIndex of the obsFeatureMatrix
+      // may not be ["1", "2", "3", "4", ... "N"] and
+      // instead may be ["3", "20", "4", "6"].
+      multiMatrixObsIndex: channelScopes.map((cScope) => bitmaskValueIsIndex ? null : (layerMatrixObsIndices == null ? void 0 : layerMatrixObsIndices[cScope]) || null),
       setColorValues: channelScopes.map((cScope) => {
         var _a4, _b3;
         return ((_b3 = (_a4 = this.segmentationColors) == null ? void 0 : _a4[layerScope]) == null ? void 0 : _b3[cScope]) || [];
@@ -193153,12 +193238,23 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     });
   }
   createSegmentationLayers() {
-    const { obsSegmentations = {}, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, segmentationLayerCallbacks = [], segmentationMultiExpressionData } = this.props;
+    const { obsSegmentations = {}, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, segmentationLayerCallbacks = [], segmentationMultiExpressionData, bitmaskValueIsIndex } = this.props;
     return segmentationLayerScopes.map((layerScope) => {
+      var _a3;
       if (obsSegmentations[layerScope]) {
         const { obsSegmentationsType } = obsSegmentations[layerScope];
         if (obsSegmentationsType === "bitmask") {
-          return this.createBitmaskSegmentationLayer(layerScope, segmentationLayerCoordination[0][layerScope], segmentationChannelScopesByLayer[layerScope], segmentationChannelCoordination[0][layerScope], obsSegmentations[layerScope], segmentationMultiExpressionData == null ? void 0 : segmentationMultiExpressionData[layerScope]);
+          return this.createBitmaskSegmentationLayer(
+            layerScope,
+            segmentationLayerCoordination[0][layerScope],
+            segmentationChannelScopesByLayer[layerScope],
+            segmentationChannelCoordination[0][layerScope],
+            obsSegmentations[layerScope],
+            segmentationMultiExpressionData == null ? void 0 : segmentationMultiExpressionData[layerScope],
+            (_a3 = this.segmentationToMatrixIndexArr) == null ? void 0 : _a3[layerScope],
+            // TODO: get this from the layer coordination.
+            bitmaskValueIsIndex
+          );
         }
         if (obsSegmentationsType === "polygon") {
           return this.createPolygonSegmentationLayer(layerScope, segmentationLayerCoordination[0][layerScope], segmentationChannelScopesByLayer[layerScope], segmentationChannelCoordination[0][layerScope], obsSegmentations[layerScope], segmentationMultiExpressionData == null ? void 0 : segmentationMultiExpressionData[layerScope]);
@@ -193329,6 +193425,12 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
       }
       this.segmentationToMatrixIndexMap[layerScope][channelScope] = instanceObsIndex.map((key2) => matrixIndexMap.get(key2));
     }
+    if (matrixObsIndex) {
+      if (!this.segmentationToMatrixIndexArr[layerScope]) {
+        this.segmentationToMatrixIndexArr[layerScope] = {};
+      }
+      this.segmentationToMatrixIndexArr[layerScope][channelScope] = matrixObsIndex;
+    }
   }
   onUpdateAllSegmentationsIndexData() {
     const { segmentationLayerScopes, segmentationChannelScopesByLayer } = this.props;
@@ -193346,7 +193448,7 @@ class Spatial2 extends AbstractSpatialOrScatterplot {
     const expressionData = (_a3 = segmentationMultiExpressionData == null ? void 0 : segmentationMultiExpressionData[layerScope]) == null ? void 0 : _a3[channelScope];
     const toMatrixIndexMap = (_c2 = (_b2 = this.segmentationToMatrixIndexMap) == null ? void 0 : _b2[layerScope]) == null ? void 0 : _c2[channelScope];
     const getExpressionValue = (entry2, { index: instanceIndex }) => {
-      if (toMatrixIndexMap && expressionData && expressionData[0]) {
+      if (expressionData && expressionData[0]) {
         const rowIndex = toMatrixIndexMap[instanceIndex];
         const val = expressionData[0][rowIndex];
         return val;
@@ -193818,10 +193920,25 @@ function getHoverData(hoverInfo, layerType) {
   return null;
 }
 function SpatialSubscriber(props2) {
-  const { uuid, coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, disableTooltip = false, title: title2 = "Spatial" } = props2;
+  const {
+    uuid,
+    coordinationScopes: coordinationScopesRaw,
+    coordinationScopesBy: coordinationScopesByRaw,
+    closeButtonVisible,
+    downloadButtonVisible,
+    removeGridComponent,
+    observationsLabelOverride,
+    subobservationsLabelOverride: subobservationsLabel = "molecule",
+    theme,
+    disableTooltip = false,
+    title: title2 = "Spatial",
+    bitmaskValueIsIndex = false
+    // TODO: move to coordination type
+  } = props2;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
+  const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const coordinationScopesBy = useCoordinationScopesBy(coordinationScopes, coordinationScopesByRaw);
   const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialTargetT: targetT, spatialRenderingMode, spatialRotationX: rotationX, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialAxisFixed }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL_BETA], coordinationScopes);
@@ -193918,18 +194035,18 @@ function SpatialSubscriber(props2) {
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
   const is3dMode = spatialRenderingMode === "3D";
   const [width2, height2, deckRef] = useDeckCanvasSize();
-  const [obsPointsData, obsPointsDataStatus, obsPointsUrls] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [obsPointsData, obsPointsDataStatus, obsPointsUrls] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
   const [pointMultiObsLabelsData, pointMultiObsLabelsDataStatus] = usePointMultiObsLabels(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
   const [obsSpotsSetsData, obsSpotsSetsDataStatus] = useSpotMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [spotMultiExpressionData, spotMultiLoadedFeatureSelection, spotMultiExpressionExtents, spotMultiExpressionNormData, spotMultiFeatureSelectionStatus] = useSpotMultiFeatureSelection(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [spotMultiIndicesData, spotMultiIndicesDataStatus] = useSpotMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [obsSegmentationsLocationsData, obsSegmentationsLocationsDataStatus] = useSegmentationMultiObsLocations(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls] = useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls] = useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
   const [obsSegmentationsSetsData, obsSegmentationsSetsDataStatus] = useSegmentationMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [segmentationMultiExpressionData, segmentationMultiLoadedFeatureSelection, segmentationMultiExpressionExtents, segmentationMultiExpressionNormData, segmentationMultiFeatureSelectionStatus] = useSegmentationMultiFeatureSelection(coordinationScopes, coordinationScopesBy, loaders, dataset);
   const [segmentationMultiIndicesData, segmentationMultiIndicesDataStatus] = useSegmentationMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [imageData, imageDataStatus, imageUrls] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [imageData, imageDataStatus, imageUrls] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
   const isReadyToComputeInitialViewState = useReady([
     obsPointsDataStatus,
     obsSpotsDataStatus,
@@ -194099,7 +194216,7 @@ function SpatialSubscriber(props2) {
             if (layerType === "segmentation-bitmask") {
               const { obsIndex } = ((_a3 = segmentationMultiIndicesData == null ? void 0 : segmentationMultiIndicesData[segmentationLayerScope]) == null ? void 0 : _a3[channelScope]) || {};
               obsI -= 1;
-              if (obsIndex) {
+              if (obsIndex && bitmaskValueIsIndex) {
                 obsId = obsIndex == null ? void 0 : obsIndex[obsI];
               } else {
                 obsId = String(obsI);
@@ -194168,7 +194285,7 @@ function SpatialSubscriber(props2) {
     var _a3;
     return (_a3 = obsSegmentationsLocationsData == null ? void 0 : obsSegmentationsLocationsData[layerScope]) == null ? void 0 : _a3[channelScope];
   })).length > 0;
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, removeGridComponent, isReady, children: [jsxRuntimeExports.jsx(SpatialWrapper, {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, children: [jsxRuntimeExports.jsx(SpatialWrapper, {
     ref: deckRef,
     uuid,
     width: width2,
@@ -194213,6 +194330,7 @@ function SpatialSubscriber(props2) {
     obsSegmentationsSets: obsSegmentationsSetsData,
     segmentationMatrixIndices: segmentationMultiIndicesData,
     segmentationMultiExpressionData: segmentationMultiExpressionNormData,
+    bitmaskValueIsIndex,
     // Images
     images: imageData,
     imageLayerScopes,
@@ -195131,7 +195249,7 @@ function HeatmapOptions(props2) {
   }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, variant: "head", scope: "row", children: jsxRuntimeExports.jsx("label", { htmlFor: `heatmap-gene-expression-colormap-range-${heatmapOptionsId}`, children: "Gene Expression Colormap Range" }) }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, variant: "body", children: jsxRuntimeExports.jsx(Slider$1, { classes: { root: classes.slider, valueLabel: classes.sliderValueLabel }, value: geneExpressionColormapRange, onChange: handleColormapRangeChangeDebounced, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider", id: `heatmap-gene-expression-colormap-range-${heatmapOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] });
 }
 function HeatmapSubscriber(props2) {
-  const { uuid, coordinationScopes, removeGridComponent, theme, transpose: transpose2, observationsLabelOverride, variablesLabelOverride, title: title2 = "Heatmap" } = props2;
+  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, transpose: transpose2, observationsLabelOverride, variablesLabelOverride, title: title2 = "Heatmap" } = props2;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
@@ -195207,7 +195325,7 @@ function HeatmapSubscriber(props2) {
   ], [observationsLabel]);
   const selectedCount = cellColors.size;
   return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${pluralize(variablesLabel, genesCount)},
-             with ${commaNumber(selectedCount)} ${pluralize(observationsLabel, selectedCount)} selected`, urls: urls2, theme, removeGridComponent, isReady: isReady && !isRendering, options: jsxRuntimeExports.jsx(HeatmapOptions, { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible }), children: [jsxRuntimeExports.jsx(Heatmap$1, { ref: deckRef, transpose: transpose2, viewState: { zoom: zoomX, target: [targetX2, targetY2] }, setViewState: ({ zoom: zoom2, target: target2 }) => {
+             with ${commaNumber(selectedCount)} ${pluralize(observationsLabel, selectedCount)} selected`, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady: isReady && !isRendering, options: jsxRuntimeExports.jsx(HeatmapOptions, { geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, tooltipsVisible, setTooltipsVisible }), children: [jsxRuntimeExports.jsx(Heatmap$1, { ref: deckRef, transpose: transpose2, viewState: { zoom: zoomX, target: [targetX2, targetY2] }, setViewState: ({ zoom: zoom2, target: target2 }) => {
     setZoomX(zoom2);
     setZoomY(zoom2);
     setTargetX(target2[0]);
@@ -199613,7 +199731,7 @@ function FeatureListOptions(props2) {
   } }) })] })] }) : null] });
 }
 function FeatureListSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null } = props2;
+  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null, closeButtonVisible, downloadButtonVisible } = props2;
   const loaders = useLoaders();
   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;
@@ -199648,6 +199766,8 @@ function FeatureListSubscriber(props2) {
     // even though this no longer uses the TitleInfo component's
     // scroll css (SelectableTable is virtual scroll).
     isScroll: true,
+    closeButtonVisible,
+    downloadButtonVisible,
     removeGridComponent,
     isReady,
     urls: urls2,
@@ -200088,8 +200208,8 @@ const Slicer = ({ xSlice, ySlice, zSlice, handleSlicerSetting, loader: loader2,
     ]
   ];
   const classes = useSlicerStyles();
-  const Slicers = sliceValuesAndSetSliceFunctions.map(([val, setVal, label2, [min2, max2]]) => jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginBottom: 0 }, variant: "h2", children: [label2, ":"] }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 11, children: jsxRuntimeExports.jsx(Slider$1, { disabled: !use3d, className: !use3d ? classes.disabled : classes.enabled, value: val, onChange: (e3, v) => setVal(v), valueLabelDisplay: "auto", valueLabelFormat: (v) => abbreviateNumber(v), "aria-label": `Volume options ${label2} slider`, min: min2, max: max2, step: 5e-3, orientation: "horizontal" }) })] }, label2));
-  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginTop: 16, marginBottom: 0 }, variant: "h2", children: ["Clipping Planes:", " "] }), " ", Slicers] });
+  const Slicers = sliceValuesAndSetSliceFunctions.map(([val, setVal, label2, [min2, max2]]) => jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "flex-start", alignItems: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginBottom: 0 }, children: [label2, ":"] }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 11, children: jsxRuntimeExports.jsx(Slider$1, { disabled: !use3d, className: !use3d ? classes.disabled : classes.enabled, value: val, onChange: (e3, v) => setVal(v), valueLabelDisplay: "auto", valueLabelFormat: (v) => abbreviateNumber(v), "aria-label": `Volume options ${label2} slider`, min: min2, max: max2, step: 5e-3, orientation: "horizontal" }) })] }, label2));
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Typography$1, { className: !use3d ? classes.disabled : classes.enabled, style: { marginTop: 16, marginBottom: 0 }, children: ["Clipping Planes:", " "] }), " ", Slicers] });
 };
 const renderingOptions = Object.values(RENDERING_MODES);
 function RenderingModeSelect({ handleRenderingModeChange, renderingMode, use3d }) {
@@ -200428,6 +200548,8 @@ function ImageAddButton({ imageOptions, handleImageAdd }) {
 const LayerControllerMemoized = React__default.memo(forwardRef((props2, ref2) => {
   const {
     title: title2,
+    closeButtonVisible,
+    downloadButtonVisible,
     removeGridComponent,
     theme,
     isReady,
@@ -200473,7 +200595,7 @@ const LayerControllerMemoized = React__default.memo(forwardRef((props2, ref2) =>
     enableLayerButtonsWithOneLayer
   } = props2;
   const shouldShowImageLayerButton = Boolean(enableLayerButtonsWithOneLayer || (imageLayerLoaders == null ? void 0 : imageLayerLoaders.length) > 1);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, removeGridComponent, theme, isReady, children: jsxRuntimeExports.jsxs("div", { className: "layer-controller-container", ref: ref2, children: [moleculesLayer && jsxRuntimeExports.jsx(VectorLayerController, { label: "Molecules", layerType: "molecules", layer: moleculesLayer, handleLayerChange: setMoleculesLayer }, `${dataset}-molecules`), cellsLayer && obsSegmentationsType === "polygon" && jsxRuntimeExports.jsx(VectorLayerController, { label: `${capitalize$2(obsType)} Segmentations`, layerType: "cells", layer: cellsLayer, handleLayerChange: setCellsLayer }, `${dataset}-cells`), cellsLayer && obsSegmentationsType === "bitmask" && cellsLayer.map((layer, i2) => {
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, children: jsxRuntimeExports.jsxs("div", { className: "layer-controller-container", ref: ref2, children: [moleculesLayer && jsxRuntimeExports.jsx(VectorLayerController, { label: "Molecules", layerType: "molecules", layer: moleculesLayer, handleLayerChange: setMoleculesLayer }, `${dataset}-molecules`), cellsLayer && obsSegmentationsType === "polygon" && jsxRuntimeExports.jsx(VectorLayerController, { label: `${capitalize$2(obsType)} Segmentations`, layerType: "cells", layer: cellsLayer, handleLayerChange: setCellsLayer }, `${dataset}-cells`), cellsLayer && obsSegmentationsType === "bitmask" && cellsLayer.map((layer, i2) => {
     const { index: index2 } = layer;
     const loader2 = segmentationLayerLoaders == null ? void 0 : segmentationLayerLoaders[index2];
     const layerMeta = segmentationLayerMeta == null ? void 0 : segmentationLayerMeta[index2];
@@ -200588,7 +200710,7 @@ const LayerControllerMemoized = React__default.memo(forwardRef((props2, ref2) =>
   }), shouldShowImageLayerButton ? jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(ImageAddButton, { imageOptions: imageLayerMeta, handleImageAdd }) }) : null] }) });
 }));
 function LayerControllerSubscriber$1(props2) {
-  const { coordinationScopes, removeGridComponent, theme, title: title2 = "Spatial Layers", disable3d, globalDisable3d, disableChannelsIfRgbDetected, enableLayerButtonsWithOneLayer } = props2;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", disable3d, globalDisable3d, disableChannelsIfRgbDetected, enableLayerButtonsWithOneLayer } = props2;
   const loaders = useLoaders();
   const [{ dataset, obsType, spatialImageLayer: rasterLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer }, { setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialZoom: setZoom }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.LAYER_CONTROLLER], coordinationScopes);
   const [{ imageLayerCallbacks, areLoadingImageChannels, segmentationLayerCallbacks, areLoadingSegmentationChannels }, { setImageLayerCallbacks, setAreLoadingImageChannels, setSegmentationLayerCallbacks, setAreLoadingSegmentationChannels }] = useAuxiliaryCoordination(COMPONENT_COORDINATION_TYPES.layerController, coordinationScopes);
@@ -200645,6 +200767,8 @@ function LayerControllerSubscriber$1(props2) {
   return jsxRuntimeExports.jsx(LayerControllerMemoized, {
     ref: layerControllerRef,
     title: title2,
+    closeButtonVisible,
+    downloadButtonVisible,
     removeGridComponent,
     theme,
     isReady,
@@ -202281,8 +202405,9 @@ function LayerController(props2) {
   })] });
 }
 function LayerControllerSubscriber(props2) {
-  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, removeGridComponent, theme, title: title2 = "Spatial Layers" } = props2;
+  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid } = props2;
   const loaders = useLoaders();
+  const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const coordinationScopesBy = useCoordinationScopesBy(coordinationScopes, coordinationScopesByRaw);
   const [{ dataset, spatialTargetT: targetT, spatialTargetZ: targetZ, spatialRenderingMode }, { setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialTargetT: setTargetT, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialZoom: setZoom, setSpatialRenderingMode }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.LAYER_CONTROLLER_BETA], coordinationScopes);
@@ -202372,17 +202497,17 @@ function LayerControllerSubscriber(props2) {
   const layerControllerRef = useRef();
   useClosestVitessceContainerSize(layerControllerRef);
   useWindowDimensions();
-  const [obsSegmentationsData, obsSegmentationsDataStatus] = useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [imageData, imageDataStatus] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [obsSpotsData, obsSpotsDataStatus] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset);
-  const [obsPointsData, obsPointsDataStatus] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset);
+  const [obsSegmentationsData, obsSegmentationsDataStatus] = useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
+  const [imageData, imageDataStatus] = useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
+  const [obsSpotsData, obsSpotsDataStatus] = useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
+  const [obsPointsData, obsPointsDataStatus] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid);
   const isReady = useReady([
     obsSpotsDataStatus,
     obsPointsDataStatus,
     obsSegmentationsDataStatus,
     imageDataStatus
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, removeGridComponent, theme, isReady, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination }) });
 }
 const useStyles$3 = makeStyles(() => ({
   info: {
@@ -202416,7 +202541,7 @@ function Status(props2) {
   return messages2;
 }
 function StatusSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, theme, title: title2 = "Status" } = props2;
+  const { coordinationScopes, closeButtonVisible, removeGridComponent, theme, title: title2 = "Status" } = props2;
   const [{ obsHighlight: cellHighlight, featureHighlight: geneHighlight, moleculeHighlight }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.STATUS], coordinationScopes);
   const warn2 = useWarning();
   const infos = [
@@ -202425,7 +202550,7 @@ function StatusSubscriber(props2) {
     ...moleculeHighlight ? [`Hovered gene ${moleculeHighlight}`] : []
   ];
   const info2 = infos.join("; ");
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, theme, removeGridComponent, isScroll: true, isReady: true, children: jsxRuntimeExports.jsx(Status, { warn: warn2, info: info2 }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, theme, closeButtonVisible, removeGridComponent, isScroll: true, isReady: true, children: jsxRuntimeExports.jsx(Status, { warn: warn2, info: info2 }) });
 }
 window.higlassTracks = window.higlassTracks || {};
 window.higlassTracksByType = window.higlassTracksByType || {};
@@ -202677,7 +202802,7 @@ const HIGLASS_BUNDLE_VERSION = "1.11.13";
 const HIGLASS_CSS_URL = `https://unpkg.com/${HIGLASS_PKG_NAME}@${HIGLASS_BUNDLE_VERSION}/dist/hglib.css`;
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./hglib-7473f81f.js").then((n3) => n3.h);
+  const { HiGlassComponent } = await import("./hglib-6e6aad2d.js").then((n3) => n3.h);
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -202806,10 +202931,10 @@ HiGlassLazy.defaultProps = {
 };
 const urls = [];
 function HiGlassSubscriber(props2) {
-  const { coordinationScopes, theme, hgViewConfig, removeGridComponent } = props2;
+  const { coordinationScopes, theme, hgViewConfig, closeButtonVisible, downloadButtonVisible, removeGridComponent } = props2;
   const [width2, height2, containerRef] = useGridItemSize();
   const classes = useStyles$2();
-  return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: "HiGlass", removeGridComponent, theme, isReady: true, urls, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) }) }) });
+  return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: "HiGlass", closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady: true, urls, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) }) }) });
 }
 const REFERENCE_TILESETS = {
   hg38: {
@@ -202830,7 +202955,7 @@ const REFERENCE_TILESETS = {
   }
 };
 function GenomicProfilesSubscriber(props2) {
-  const { coordinationScopes, theme, removeGridComponent, profileTrackUidKey = "path", profileTrackNameKey = null, higlassServer = "https://higlass.io/api/v1", assembly = "hg38", title: title2 = "Genomic Profiles" } = props2;
+  const { coordinationScopes, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, profileTrackUidKey = "path", profileTrackNameKey = null, higlassServer = "https://higlass.io/api/v1", assembly = "hg38", title: title2 = "Genomic Profiles" } = props2;
   const [width2, height2, containerRef] = useGridItemSize();
   const loaders = useLoaders();
   const [{ dataset, obsSetColor: cellSetColor, obsSetSelection: cellSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GENOMIC_PROFILES], coordinationScopes);
@@ -202961,7 +203086,7 @@ function GenomicProfilesSubscriber(props2) {
     assembly
   ]);
   const classes = useStyles$2();
-  return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: title2, removeGridComponent, theme, isReady, urls: urls2, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: hgViewConfig ? jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) : null }) }) });
+  return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, urls: urls2, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: hgViewConfig ? jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) : null }) }) });
 }
 function CellSetExpressionPlotOptions(props2) {
   const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions } = props2;
@@ -259600,7 +259725,7 @@ function useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCe
 }
 function CellSetExpressionPlotSubscriber(props2) {
   var _a3;
-  const { coordinationScopes, removeGridComponent, theme } = props2;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme } = props2;
   const classes = useStyles();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets }, { setFeatureValueTransform, setFeatureValueTransformCoefficient }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
@@ -259624,7 +259749,7 @@ function CellSetExpressionPlotSubscriber(props2) {
   const [expressionArr, setArr, expressionMax] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
   const firstGeneSelected = geneSelection && geneSelection.length >= 1 ? (featureLabelsMap == null ? void 0 : featureLabelsMap.get(geneSelection[0])) || geneSelection[0] : null;
   const selectedTransformName = (_a3 = transformOptions.find((o2) => o2.value === featureValueTransform)) == null ? void 0 : _a3.name;
-  return jsxRuntimeExports.jsx(TitleInfo, { title: `Expression by ${capitalize$2(obsType)} Set${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(CellSetExpressionPlotOptions, { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? jsxRuntimeExports.jsx(CellSetExpressionPlot, { domainMax: expressionMax, colors: setArr, data: expressionArr, theme, width: width2, height: height2, obsType, featureValueType, featureValueTransformName: selectedTransformName }) : jsxRuntimeExports.jsxs("span", { children: ["Select a ", featureType, "."] }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: `Expression by ${capitalize$2(obsType)} Set${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(CellSetExpressionPlotOptions, { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? jsxRuntimeExports.jsx(CellSetExpressionPlot, { domainMax: expressionMax, colors: setArr, data: expressionArr, theme, width: width2, height: height2, obsType, featureValueType, featureValueTransformName: selectedTransformName }) : jsxRuntimeExports.jsxs("span", { children: ["Select a ", featureType, "."] }) }) });
 }
 function CellSetSizesPlot(props2) {
   const { data: rawData, theme, width: width2, height: height2, marginRight = 90, marginBottom = 120, keyLength = 36, obsType, onBarSelect } = props2;
@@ -259744,7 +259869,7 @@ function CellSetSizesPlot(props2) {
   return jsxRuntimeExports.jsx(VegaPlot, { data: data2, spec, signalListeners, getTooltipText });
 }
 function CellSetSizesPlotSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, theme, title: titleOverride } = props2;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride } = props2;
   const classes = useStyles();
   const loaders = useLoaders();
   const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsSetExpansion: cellSetExpansion }, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_SIZES], coordinationScopes);
@@ -259791,7 +259916,7 @@ function CellSetSizesPlotSubscriber(props2) {
       setCellSetSelection([...cellSetSelection, setNamePath]);
     }
   };
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(CellSetSizesPlot, { data: data2, onBarSelect, theme, width: width2, height: height2, obsType }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(CellSetSizesPlot, { data: data2, onBarSelect, theme, width: width2, height: height2, obsType }) }) });
 }
 function ExpressionHistogram(props2) {
   const { geneSelection, data: data2, theme, width: width2, height: height2, marginRight = 90, marginBottom = 50, onSelect } = props2;
@@ -259849,7 +259974,7 @@ function ExpressionHistogram(props2) {
   return jsxRuntimeExports.jsx(VegaPlot, { data: data2, signalListeners, spec });
 }
 function ExpressionHistogramSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, theme } = props2;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme } = props2;
   const classes = useStyles();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_VALUE_HISTOGRAM], coordinationScopes);
@@ -259898,7 +260023,7 @@ function ExpressionHistogramSubscriber(props2) {
     setCellSetSelection,
     firstGeneSelected
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: `Expression Histogram${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(ExpressionHistogram, { geneSelection, onSelect, data: data2, theme, width: width2, height: height2 }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: `Expression Histogram${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(ExpressionHistogram, { geneSelection, onSelect, data: data2, theme, width: width2, height: height2 }) }) });
 }
 class CsvSource {
   constructor({ url, requestInit: requestInit2 }) {
@@ -260006,6 +260131,24 @@ class ObsLabelsCsvLoader extends CsvLoader {
     return this.cachedResult;
   }
 }
+class CoordinationLevel {
+  constructor(value2) {
+    this.value = value2;
+    this.cachedValue = null;
+  }
+  setCached(processedLevel) {
+    this.cachedValue = processedLevel;
+  }
+  getCached() {
+    return this.cachedValue;
+  }
+  isCached() {
+    return this.cachedValue !== null;
+  }
+}
+function CL(value2) {
+  return new CoordinationLevel(value2);
+}
 class ObsSpotsCsvLoader extends CsvLoader {
   loadFromCache(data2) {
     if (this.cachedResult) {
@@ -260022,6 +260165,32 @@ class ObsSpotsCsvLoader extends CsvLoader {
     this.cachedResult = { obsIndex, obsSpots };
     return this.cachedResult;
   }
+  async load() {
+    const payload = await this.getSourceData().catch((reason) => Promise.resolve(reason));
+    if (payload instanceof AbstractLoaderError) {
+      return Promise.reject(payload);
+    }
+    const coordinationValues = {
+      spotLayer: CL({
+        obsType: "spot",
+        // obsColorEncoding: 'spatialLayerColor',
+        // spatialLayerColor: [255, 255, 255],
+        spatialLayerVisible: true,
+        spatialLayerOpacity: 1,
+        spatialSpotRadius: 10
+        // TODO: spatialSpotRadiusUnit: 'µm' or 'um'
+        // after resolving https://github.com/vitessce/vitessce/issues/1760
+        // featureValueColormapRange: [0, 1],
+        // obsHighlight: null,
+        // obsSetColor: null,
+        // obsSetSelection: null,
+        // additionalObsSets: null,
+      })
+    };
+    const { data: data2, url } = payload;
+    const result = this.loadFromCache(data2);
+    return Promise.resolve(new LoaderResult(result, url, coordinationValues));
+  }
 }
 class ObsPointsCsvLoader extends CsvLoader {
   loadFromCache(data2) {
@@ -260039,6 +260208,31 @@ class ObsPointsCsvLoader extends CsvLoader {
     this.cachedResult = { obsIndex, obsPoints };
     return this.cachedResult;
   }
+  async load() {
+    const payload = await this.getSourceData().catch((reason) => Promise.resolve(reason));
+    if (payload instanceof AbstractLoaderError) {
+      return Promise.reject(payload);
+    }
+    const coordinationValues = {
+      pointLayer: CL({
+        obsType: "point",
+        // obsColorEncoding: 'spatialLayerColor',
+        // spatialLayerColor: [255, 255, 255],
+        spatialLayerVisible: true,
+        spatialLayerOpacity: 1
+        // TODO: support a point radius?
+        // featureValueColormapRange: [0, 1],
+        // obsHighlight: null,
+        // obsSetColor: null,
+        // obsSetSelection: null,
+        // additionalObsSets: null,
+        // obsLabelsType: null,
+      })
+    };
+    const { data: data2, url } = payload;
+    const result = this.loadFromCache(data2);
+    return Promise.resolve(new LoaderResult(result, url, coordinationValues));
+  }
 }
 class ObsLocationsCsvLoader extends CsvLoader {
   loadFromCache(data2) {
@@ -260195,13 +260389,39 @@ class ObsSegmentationsJsonLoader extends JsonLoader {
     return this.cachedResult;
   }
   async load() {
+    var _a3;
     const payload = await super.load().catch((reason) => Promise.resolve(reason));
     if (payload instanceof AbstractLoaderError) {
       return Promise.reject(payload);
     }
+    const channelCoordination = [{
+      // obsType: null,
+      spatialChannelColor: [255, 255, 255],
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: null,
+      // featureType: 'feature',
+      // featureValueType: 'value',
+      obsColorEncoding: "spatialChannelColor",
+      spatialSegmentationFilled: true,
+      spatialSegmentationStrokeWidth: 1,
+      obsHighlight: null
+    }];
+    const coordinationValues = {
+      // spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+      // spatialTargetT: imageWrapper.getDefaultTargetT(),
+      segmentationLayer: CL([
+        {
+          fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+          spatialLayerOpacity: 1,
+          spatialLayerVisible: true,
+          segmentationChannel: CL(channelCoordination)
+        }
+      ])
+    };
     const { data: data2, url } = payload;
     const result = this.loadFromCache(data2);
-    return Promise.resolve(new LoaderResult(result, url));
+    return Promise.resolve(new LoaderResult(result, url, coordinationValues));
   }
 }
 class ObsSetsJsonLoader extends JsonLoader {
@@ -260568,7 +260788,8 @@ async function initLoader(imageData) {
     }
     case "ome-zarr": {
       const { coordinateTransformations: coordinateTransformationsFromOptions } = metadata2 || {};
-      const loader2 = await loadOmeZarr(url, requestInit2);
+      const root2 = await zarrOpenRoot(url, requestInit2);
+      const loader2 = await loadOmeZarr(root2);
       const { metadata: loaderMetadata } = loader2;
       const { omero, multiscales } = loaderMetadata;
       if (!Array.isArray(multiscales) || multiscales.length === 0) {
@@ -260704,6 +260925,9 @@ class ZarrDataSource {
       this.storeRoot = zarrOpenRoot(url, requestInit2);
     }
   }
+  getStoreRoot(path2) {
+    return this.storeRoot.resolve(path2);
+  }
   /**
    * Class method for decoding json from the store.
    * @param {string} key A path to the item.
@@ -260711,13 +260935,14 @@ class ZarrDataSource {
    * that resolves to the parsed JSON if successful.
    * @throws This may throw an error.
    */
-  async getJson(key2) {
+  async getJson(key2, storeRootParam = null) {
     const { storeRoot } = this;
+    const storeRootToUse = storeRootParam || storeRoot;
     let dirKey = key2;
     if (key2.endsWith(".zattrs") || key2.endsWith(".zarray") || key2.endsWith(".zgroup")) {
       dirKey = key2.substring(0, key2.length - 8);
     }
-    return (await open(storeRoot.resolve(dirKey))).attrs;
+    return (await open(storeRootToUse.resolve(dirKey))).attrs;
   }
 }
 function dirname(path2) {
@@ -261528,10 +261753,28 @@ class ObsSpotsAnndataLoader extends AbstractTwoStepLoader {
     if (superResult instanceof AbstractLoaderError) {
       return Promise.reject(superResult);
     }
+    const coordinationValues = {
+      spotLayer: CL({
+        obsType: "spot",
+        // obsColorEncoding: 'spatialLayerColor',
+        // spatialLayerColor: [255, 255, 255],
+        spatialLayerVisible: true,
+        spatialLayerOpacity: 1,
+        spatialSpotRadius: 10
+        // TODO: get this from adata.uns if possible.
+        // TODO: spatialSpotRadiusUnit: 'µm' or 'um'
+        // after resolving https://github.com/vitessce/vitessce/issues/1760
+        // featureValueColormapRange: [0, 1],
+        // obsHighlight: null,
+        // obsSetColor: null,
+        // obsSetSelection: null,
+        // additionalObsSets: null,
+      })
+    };
     return Promise.all([
       this.dataSource.loadObsIndex(path2),
       this.loadSpots()
-    ]).then(([obsIndex, obsSpots]) => Promise.resolve(new LoaderResult({ obsIndex, obsSpots }, null)));
+    ]).then(([obsIndex, obsSpots]) => Promise.resolve(new LoaderResult({ obsIndex, obsSpots }, null, coordinationValues)));
   }
 }
 class ObsPointsAnndataLoader extends AbstractTwoStepLoader {
@@ -261557,10 +261800,26 @@ class ObsPointsAnndataLoader extends AbstractTwoStepLoader {
     if (superResult instanceof AbstractLoaderError) {
       return Promise.reject(superResult);
     }
+    const coordinationValues = {
+      pointLayer: CL({
+        obsType: "point",
+        // obsColorEncoding: 'spatialLayerColor',
+        // spatialLayerColor: [255, 255, 255],
+        spatialLayerVisible: true,
+        spatialLayerOpacity: 1
+        // TODO: support a point radius?
+        // featureValueColormapRange: [0, 1],
+        // obsHighlight: null,
+        // obsSetColor: null,
+        // obsSetSelection: null,
+        // additionalObsSets: null,
+        // obsLabelsType: null,
+      })
+    };
     return Promise.all([
       this.dataSource.loadObsIndex(path2),
       this.loadPoints()
-    ]).then(([obsIndex, obsPoints]) => Promise.resolve(new LoaderResult({ obsIndex, obsPoints }, null)));
+    ]).then(([obsIndex, obsPoints]) => Promise.resolve(new LoaderResult({ obsIndex, obsPoints }, null, coordinationValues)));
   }
 }
 class ObsLocationsAnndataLoader extends AbstractTwoStepLoader {
@@ -261628,13 +261887,39 @@ class ObsSegmentationsAnndataLoader extends AbstractTwoStepLoader {
     return this.segmentations;
   }
   async load() {
+    var _a3;
     const { path: path2 } = this.options;
     const superResult = await super.load().catch((reason) => Promise.resolve(reason));
     if (superResult instanceof AbstractLoaderError) {
       return Promise.reject(superResult);
     }
+    const channelCoordination = [{
+      // obsType: null,
+      spatialChannelColor: [255, 255, 255],
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: null,
+      // featureType: 'feature',
+      // featureValueType: 'value',
+      obsColorEncoding: "spatialChannelColor",
+      spatialSegmentationFilled: true,
+      spatialSegmentationStrokeWidth: 1,
+      obsHighlight: null
+    }];
     const coordinationValues = {
-      spatialSegmentationLayer: DEFAULT_CELLS_LAYER
+      // Old
+      spatialSegmentationLayer: DEFAULT_CELLS_LAYER,
+      // New
+      // spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+      // spatialTargetT: imageWrapper.getDefaultTargetT(),
+      segmentationLayer: CL([
+        {
+          fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+          spatialLayerOpacity: 1,
+          spatialLayerVisible: true,
+          segmentationChannel: CL(channelCoordination)
+        }
+      ])
     };
     return Promise.all([
       this.dataSource.loadObsIndex(path2),
@@ -261643,7 +261928,7 @@ class ObsSegmentationsAnndataLoader extends AbstractTwoStepLoader {
       obsIndex,
       obsSegmentations,
       obsSegmentationsType: "polygon"
-    }, coordinationValues)));
+    }, null, coordinationValues)));
   }
 }
 class ObsSetsAnndataLoader extends AbstractTwoStepLoader {
@@ -261840,20 +262125,20 @@ class ImageWrapper {
     return result;
   }
   getNumChannels() {
-    if ("Pixels" in this.vivLoader.metadata) {
-      const { Pixels: { Channels } } = this.vivLoader.metadata;
-      return Channels.length;
-    }
-    if ("omero" in this.vivLoader.metadata) {
-      const { omero: { channels: channels2 } } = this.vivLoader.metadata;
-      return channels2.length;
+    if ("image-label" in this.vivLoader.metadata) {
+      return 1;
     }
     if ("channels_metadata" in this.vivLoader.metadata) {
       const { channels_metadata: channelsMetadata } = this.vivLoader.metadata;
       return (channelsMetadata == null ? void 0 : channelsMetadata.channels.length) || 0;
     }
-    if ("image-label" in this.vivLoader.metadata) {
-      return 1;
+    if ("omero" in this.vivLoader.metadata) {
+      const { omero: { channels: channels2 } } = this.vivLoader.metadata;
+      return channels2.length;
+    }
+    if ("Pixels" in this.vivLoader.metadata) {
+      const { Pixels: { Channels } } = this.vivLoader.metadata;
+      return Channels.length;
     }
     return 0;
   }
@@ -261862,9 +262147,8 @@ class ImageWrapper {
       const { Pixels: { Channels } } = this.vivLoader.metadata;
       return Channels.map((channel, i2) => channel.Name || `Channel ${i2}`);
     }
-    if ("omero" in this.vivLoader.metadata) {
-      const { omero: { channels: channels2 } } = this.vivLoader.metadata;
-      return channels2.map((channel, i2) => channel.label || `Channel ${i2}`);
+    if ("image-label" in this.vivLoader.metadata) {
+      return ["labels"];
     }
     if ("channels_metadata" in this.vivLoader.metadata) {
       const { channels_metadata: channelsMetadata } = this.vivLoader.metadata;
@@ -261872,9 +262156,33 @@ class ImageWrapper {
         return channelsMetadata.channels.map((channel) => `Channel ${channel.label}`);
       }
     }
+    if ("omero" in this.vivLoader.metadata) {
+      const { omero: { channels: channels2 } } = this.vivLoader.metadata;
+      return channels2.map((channel, i2) => channel.label || `Channel ${i2}`);
+    }
     return [];
   }
+  // TODO: support passing a custom color palette array.
   getChannelObjects() {
+    if ("image-label" in this.vivLoader.metadata) {
+      return [{
+        name: "labels",
+        defaultColor: [255, 255, 255],
+        defaultWindow: [0, 255],
+        autoDefaultColor: [0, 0, 0]
+      }];
+    }
+    if ("channels_metadata" in this.vivLoader.metadata) {
+      const { channels_metadata: channelsMetadata } = this.vivLoader.metadata;
+      if (channelsMetadata && Array.isArray(channelsMetadata == null ? void 0 : channelsMetadata.channels)) {
+        return channelsMetadata.channels.map((channel, i2) => ({
+          name: `Channel ${channel.label}`,
+          defaultColor: void 0,
+          defaultWindow: void 0,
+          autoDefaultColor: VIEWER_PALETTE[i2 % VIEWER_PALETTE.length]
+        }));
+      }
+    }
     if ("omero" in this.vivLoader.metadata) {
       const { omero: { channels: channels2 } } = this.vivLoader.metadata;
       return channels2.map((channel, i2) => ({
@@ -261893,17 +262201,6 @@ class ImageWrapper {
         autoDefaultColor: VIEWER_PALETTE[i2 % VIEWER_PALETTE.length]
       }));
     }
-    if ("channels_metadata" in this.vivLoader.metadata) {
-      const { channels_metadata: channelsMetadata } = this.vivLoader.metadata;
-      if (channelsMetadata && Array.isArray(channelsMetadata == null ? void 0 : channelsMetadata.channels)) {
-        return channelsMetadata.channels.map((channel, i2) => ({
-          name: `Channel ${channel.label}`,
-          defaultColor: void 0,
-          defaultWindow: void 0,
-          autoDefaultColor: VIEWER_PALETTE[i2 % VIEWER_PALETTE.length]
-        }));
-      }
-    }
     return [];
   }
   getDtype() {
@@ -261992,15 +262289,42 @@ class ImageWrapper {
     const { shape: shape2 } = Array.isArray(loader2.data) ? loader2.data[0] : loader2.data;
     return isInterleaved$1(shape2);
   }
+  getPhotometricInterpretation() {
+    const loader2 = this.vivLoader;
+    if ("Pixels" in loader2.metadata) {
+      const source2 = Array.isArray(loader2.data) ? loader2.data[0] : loader2.data;
+      if ("meta" in source2) {
+        const { meta: meta2 } = source2;
+        if (meta2 && "photometricInterpretation" in meta2) {
+          const numericValue = meta2.photometricInterpretation;
+          if (numericValue === 2) {
+            return "RGB";
+          }
+        }
+      }
+    }
+    if ("omero" in loader2.metadata) {
+      const { omero: { rdefs: { model } } } = loader2.metadata;
+      if (model === "color") {
+        return "RGB";
+      }
+    }
+    return "BlackIsZero";
+  }
 }
 class OmeZarrLoader extends AbstractTwoStepLoader {
+  constructor(dataSource, params2) {
+    super(dataSource, params2);
+    this.storeRoot = this.dataSource.storeRoot;
+  }
   async load() {
-    const payload = await this.dataSource.getJson(".zattrs").catch((reason) => Promise.resolve(reason));
+    var _a3;
+    const payload = await this.dataSource.getJson(".zattrs", this.storeRoot).catch((reason) => Promise.resolve(reason));
     if (payload instanceof AbstractLoaderError) {
       return Promise.reject(payload);
     }
     const { coordinateTransformations: coordinateTransformationsFromOptions } = this.options || {};
-    const loader2 = await loadOmeZarr(this.url, this.requestInit);
+    const loader2 = await loadOmeZarr(this.storeRoot);
     const imageWrapper = new ImageWrapper(loader2, this.options);
     const { metadata: metadata2, data: data2 } = loader2;
     const { omero, multiscales, channels_metadata: spatialDataChannels, "image-label": imageLabel } = metadata2;
@@ -262083,8 +262407,31 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
       }
     ];
     const [autoImageLayers, imageLayerLoaders, imageLayerMeta] = await initializeRasterLayersAndChannels(imagesWithLoaderCreators, void 0);
+    const channelObjects2 = imageWrapper.getChannelObjects();
+    const channelCoordination = channelObjects2.slice(0, 5).map((channelObj, i2) => ({
+      spatialTargetC: i2,
+      spatialChannelColor: (channelObj.defaultColor || channelObj.autoDefaultColor).slice(0, 3),
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: channelObj.defaultWindow || null
+    }));
     const coordinationValues = {
-      spatialImageLayer: autoImageLayers
+      // Old
+      spatialImageLayer: autoImageLayers,
+      // New
+      spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+      spatialTargetT: imageWrapper.getDefaultTargetT(),
+      imageLayer: CL([
+        {
+          fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+          spatialLayerOpacity: 1,
+          spatialLayerVisible: true,
+          photometricInterpretation: imageWrapper.getPhotometricInterpretation(),
+          volumetricRenderingAlgorithm: "maximumIntensityProjection",
+          spatialTargetResolution: null,
+          imageChannel: CL(channelCoordination)
+        }
+      ])
     };
     return Promise.resolve(new LoaderResult({
       image: {
@@ -262094,21 +262441,57 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
         // TODO: make this the root value of LoaderResult.image.
       },
       featureIndex: imageWrapper.getChannelNames()
-    }, [], coordinationValues));
+    }, null, coordinationValues));
+  }
+}
+class OmeZarrAsObsSegmentationsLoader extends OmeZarrLoader {
+  async load() {
+    var _a3;
+    const { obsTypesFromChannelNames } = this.options || {};
+    const result = await super.load();
+    const imageWrapper = result.data.image.instance;
+    const channelObjects = imageWrapper.getChannelObjects();
+    const channelCoordination = channelObjects.slice(0, 5).map((channelObj, i2) => ({
+      spatialTargetC: i2,
+      spatialChannelColor: (channelObj.defaultColor || channelObj.autoDefaultColor).slice(0, 3),
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: channelObj.defaultWindow || null,
+      // featureType: 'feature',
+      // featureValueType: 'value',
+      obsColorEncoding: "spatialChannelColor",
+      spatialSegmentationFilled: true,
+      spatialSegmentationStrokeWidth: 1,
+      obsHighlight: null,
+      ...obsTypesFromChannelNames ? { obsType: channelObj.name } : {}
+    }));
+    const coordinationValues = {
+      spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+      spatialTargetT: imageWrapper.getDefaultTargetT(),
+      segmentationLayer: CL([
+        {
+          fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+          spatialLayerOpacity: 1,
+          spatialLayerVisible: true,
+          segmentationChannel: CL(channelCoordination)
+        }
+      ])
+    };
+    return Promise.resolve(new LoaderResult({
+      obsSegmentationsType: "bitmask",
+      obsSegmentations: result.data.image
+    }, result.url, coordinationValues));
   }
 }
 class SpatialDataImageLoader extends OmeZarrLoader {
   constructor(dataSource, params2) {
-    const newParams = {
-      ...params2,
-      url: `${params2.url}/${params2.options.path}`
-    };
-    super(dataSource, newParams);
-    this.dataSource = dataSource;
+    super(dataSource, params2);
+    this.storeRoot = this.dataSource.getStoreRoot(params2.options.path);
   }
 }
 class SpatialDataLabelsLoader extends SpatialDataImageLoader {
   async load() {
+    var _a3;
     const result = await super.load();
     if (result instanceof AbstractLoaderError) {
       return Promise.reject(result);
@@ -262117,12 +262500,44 @@ class SpatialDataLabelsLoader extends SpatialDataImageLoader {
       obsSegmentations: result.data.image,
       obsSegmentationsType: "bitmask"
     };
+    const imageWrapper = result.data.obsSegmentations.instance;
+    const channelObjects = imageWrapper.getChannelObjects();
+    const channelCoordination = channelObjects.slice(0, 5).map((channelObj, i2) => ({
+      spatialTargetC: i2,
+      // obsType: channelObj.name,
+      spatialChannelColor: (channelObj.defaultColor || channelObj.autoDefaultColor).slice(0, 3),
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: channelObj.defaultWindow || null,
+      // featureType: 'feature',
+      // featureValueType: 'value',
+      obsColorEncoding: "spatialChannelColor",
+      spatialSegmentationFilled: true,
+      spatialSegmentationStrokeWidth: 1,
+      obsHighlight: null
+    }));
+    const coordinationValues = {
+      spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+      spatialTargetT: imageWrapper.getDefaultTargetT(),
+      segmentationLayer: CL([
+        {
+          fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+          spatialLayerOpacity: 1,
+          spatialLayerVisible: true,
+          segmentationChannel: CL(channelCoordination)
+        }
+      ])
+    };
+    result.coordinationValues = coordinationValues;
     return Promise.resolve(result);
   }
 }
 function getCoordsPath(path2) {
   return `${path2}/coords`;
 }
+function getRadiusPath(path2) {
+  return `${path2}/radius`;
+}
 class SpatialDataObsSpotsLoader extends AbstractTwoStepLoader {
   /**
      * Class method for loading embedding coordinates, such as those from UMAP or t-SNE.
@@ -262140,6 +262555,18 @@ class SpatialDataObsSpotsLoader extends AbstractTwoStepLoader {
     this.locations = Promise.resolve(null);
     return this.locations;
   }
+  loadRadius() {
+    const { path: path2 } = this.options;
+    if (this.radius) {
+      return this.radius;
+    }
+    if (!this.radius) {
+      this.radius = this.dataSource.loadNumeric(getRadiusPath(path2));
+      return this.radius;
+    }
+    this.radius = Promise.resolve(null);
+    return this.radius;
+  }
   async load() {
     const { path: path2, tablePath } = this.options;
     const superResult = await super.load().catch((reason) => Promise.resolve(reason));
@@ -262148,8 +262575,30 @@ class SpatialDataObsSpotsLoader extends AbstractTwoStepLoader {
     }
     return Promise.all([
       this.dataSource.loadObsIndex(getCoordsPath(path2), tablePath),
-      this.loadSpots()
-    ]).then(([obsIndex, obsSpots]) => Promise.resolve(new LoaderResult({ obsIndex, obsSpots }, null)));
+      this.loadSpots(),
+      this.loadRadius()
+    ]).then(([obsIndex, obsSpots, obsRadius]) => {
+      var _a3;
+      const spatialSpotRadius = (_a3 = obsRadius == null ? void 0 : obsRadius.data) == null ? void 0 : _a3[0];
+      const coordinationValues = {
+        spotLayer: CL({
+          obsType: "spot",
+          // obsColorEncoding: 'spatialLayerColor',
+          // spatialLayerColor: [255, 255, 255],
+          spatialLayerVisible: true,
+          spatialLayerOpacity: 1,
+          spatialSpotRadius
+          // TODO: spatialSpotRadiusUnit: 'µm' or 'um'
+          // after resolving https://github.com/vitessce/vitessce/issues/1760
+          // featureValueColormapRange: [0, 1],
+          // obsHighlight: null,
+          // obsSetColor: null,
+          // obsSetSelection: null,
+          // additionalObsSets: null,
+        })
+      };
+      return Promise.resolve(new LoaderResult({ obsIndex, obsSpots }, null, coordinationValues));
+    });
   }
 }
 class SpatialDataObsSetsLoader extends ObsSetsAnndataLoader {
@@ -262216,6 +262665,14 @@ class OmeTiffLoader extends AbstractTwoStepLoader {
     const urls2 = [
       { url, name: image2.name }
     ];
+    const channelObjects = imageWrapper.getChannelObjects();
+    const channelCoordination = channelObjects.slice(0, 5).map((channelObj, i2) => ({
+      spatialTargetC: i2,
+      spatialChannelColor: (channelObj.defaultColor || channelObj.autoDefaultColor).slice(0, 3),
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: channelObj.defaultWindow || null
+    }));
     const imagesWithLoaderCreators = [
       {
         ...image2,
@@ -262227,9 +262684,25 @@ class OmeTiffLoader extends AbstractTwoStepLoader {
       this.autoImageCache = initializeRasterLayersAndChannels(imagesWithLoaderCreators, renderLayers, usePhysicalSizeScaling);
     }
     return this.autoImageCache.then((autoImages) => {
+      var _a3;
       const [autoImageLayers, imageLayerLoaders, imageLayerMeta] = autoImages;
       const coordinationValues = {
-        spatialImageLayer: autoImageLayers
+        // Old
+        spatialImageLayer: autoImageLayers,
+        // New
+        spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+        spatialTargetT: imageWrapper.getDefaultTargetT(),
+        imageLayer: CL([
+          {
+            fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+            spatialLayerOpacity: 1,
+            spatialLayerVisible: true,
+            photometricInterpretation: imageWrapper.getPhotometricInterpretation(),
+            volumetricRenderingAlgorithm: "maximumIntensityProjection",
+            spatialTargetResolution: null,
+            imageChannel: CL(channelCoordination)
+          }
+        ])
       };
       return new LoaderResult({
         image: {
@@ -262246,7 +262719,7 @@ class OmeTiffLoader extends AbstractTwoStepLoader {
 class OmeTiffAsObsSegmentationsLoader extends OmeTiffLoader {
   async load() {
     const { url, requestInit: requestInit2 } = this;
-    const { coordinateTransformations: coordinateTransformationsFromOptions } = this.options || {};
+    const { coordinateTransformations: coordinateTransformationsFromOptions, obsTypesFromChannelNames } = this.options || {};
     const offsets2 = await this.loadOffsets();
     const loader2 = await loadOmeTiff(url, { offsets: offsets2, headers: requestInit2 == null ? void 0 : requestInit2.headers });
     const imageWrapper = new ImageWrapper(loader2, this.options);
@@ -262268,6 +262741,21 @@ class OmeTiffAsObsSegmentationsLoader extends OmeTiffLoader {
       }
     };
     const urls2 = [{ url, name: image2.name }];
+    const channelObjects = imageWrapper.getChannelObjects();
+    const channelCoordination = channelObjects.slice(0, 5).map((channelObj, i2) => ({
+      spatialTargetC: i2,
+      spatialChannelColor: (channelObj.defaultColor || channelObj.autoDefaultColor).slice(0, 3),
+      spatialChannelVisible: true,
+      spatialChannelOpacity: 1,
+      spatialChannelWindow: channelObj.defaultWindow || null,
+      // featureType: 'feature',
+      // featureValueType: 'value',
+      obsColorEncoding: "spatialChannelColor",
+      spatialSegmentationFilled: true,
+      spatialSegmentationStrokeWidth: 1,
+      obsHighlight: null,
+      ...obsTypesFromChannelNames ? { obsType: channelObj.name } : {}
+    }));
     const imagesWithLoaderCreators = [
       {
         ...image2,
@@ -262282,9 +262770,22 @@ class OmeTiffAsObsSegmentationsLoader extends OmeTiffLoader {
       this.autoImageCache = initializeRasterLayersAndChannels(imagesWithLoaderCreators, renderLayers, usePhysicalSizeScaling);
     }
     return this.autoImageCache.then((autoImages) => {
+      var _a3;
       const [autoImageLayers, imageLayerLoaders, imageLayerMeta] = autoImages;
       const coordinationValues = {
-        spatialSegmentationLayer: autoImageLayers
+        // Old
+        spatialSegmentationLayer: autoImageLayers,
+        // New
+        spatialTargetZ: imageWrapper.getDefaultTargetZ(),
+        spatialTargetT: imageWrapper.getDefaultTargetT(),
+        segmentationLayer: CL([
+          {
+            fileUid: ((_a3 = this.coordinationValues) == null ? void 0 : _a3.fileUid) || null,
+            spatialLayerOpacity: 1,
+            spatialLayerVisible: true,
+            segmentationChannel: CL(channelCoordination)
+          }
+        ])
       };
       return new LoaderResult({
         obsSegmentationsType: "bitmask",
@@ -262469,6 +262970,84 @@ function expandAnndataZarr(fileDef) {
     }] : []
   ];
 }
+function expandSpatialdataZarr(fileDef) {
+  var _a3, _b2, _c2;
+  const baseFileDef = {
+    url: fileDef.url,
+    requestInit: fileDef.requestInit,
+    coordinationValues: {
+      ...fileDef.coordinationValues,
+      obsType: ((_a3 = fileDef.coordinationValues) == null ? void 0 : _a3.obsType) || "cell",
+      featureType: ((_b2 = fileDef.coordinationValues) == null ? void 0 : _b2.featureType) || "gene",
+      featureValueType: ((_c2 = fileDef.coordinationValues) == null ? void 0 : _c2.featureValueType) || "expression"
+    }
+  };
+  const extraCoordinationValues = {};
+  Object.entries(baseFileDef.coordinationValues).forEach(([key2, value2]) => {
+    if (!expectedCoordinationTypes.includes(key2)) {
+      extraCoordinationValues[key2] = value2;
+    }
+  });
+  const { options = {} } = fileDef;
+  return [
+    // obsFeatureMatrix
+    ...options.obsFeatureMatrix ? [{
+      ...baseFileDef,
+      fileType: FileType$1.OBS_FEATURE_MATRIX_SPATIALDATA_ZARR,
+      options: options.obsFeatureMatrix,
+      coordinationValues: {
+        ...extraCoordinationValues,
+        obsType: baseFileDef.coordinationValues.obsType,
+        featureType: baseFileDef.coordinationValues.featureType,
+        featureValueType: baseFileDef.coordinationValues.featureValueType
+      }
+    }] : [],
+    // obsSets
+    ...options.obsSets ? [{
+      ...baseFileDef,
+      fileType: FileType$1.OBS_SETS_SPATIALDATA_ZARR,
+      options: options.obsSets,
+      coordinationValues: {
+        ...extraCoordinationValues,
+        obsType: baseFileDef.coordinationValues.obsType
+      }
+    }] : [],
+    // obsSpots
+    ...options.obsSpots ? [{
+      ...baseFileDef,
+      fileType: FileType$1.OBS_SPOTS_SPATIALDATA_ZARR,
+      options: options.obsSpots,
+      coordinationValues: {
+        ...extraCoordinationValues,
+        obsType: baseFileDef.coordinationValues.obsType
+      }
+    }] : [],
+    // TODO: obsPoints?
+    // TODO: obsLocations?
+    // image
+    ...options.image ? [{
+      ...baseFileDef,
+      fileType: FileType$1.IMAGE_SPATIALDATA_ZARR,
+      options: options.image,
+      coordinationValues: {
+        ...extraCoordinationValues,
+        featureType: baseFileDef.coordinationValues.featureType
+        // TODO: fileUid?
+      }
+    }] : [],
+    // labels
+    ...options.labels ? [{
+      ...baseFileDef,
+      fileType: FileType$1.LABELS_SPATIALDATA_ZARR,
+      options: options.labels,
+      coordinationValues: {
+        ...extraCoordinationValues,
+        obsType: baseFileDef.coordinationValues.obsType
+        // TODO: fileUid?
+      }
+    }] : []
+  ];
+}
 function expandMoleculesJson(fileDef) {
   var _a3;
   const baseFileDef = {
@@ -262801,7 +263380,8 @@ const baseFileTypes = [
   // All OME file types
   makeFileType(FileType$1.IMAGE_OME_ZARR, DataType$2.IMAGE, OmeZarrLoader, ZarrDataSource, imageOmeZarrSchema),
   makeFileType(FileType$1.IMAGE_OME_TIFF, DataType$2.IMAGE, OmeTiffLoader, OmeTiffSource, imageOmeTiffSchema),
-  makeFileType(FileType$1.OBS_SEGMENTATIONS_OME_TIFF, DataType$2.OBS_SEGMENTATIONS, OmeTiffAsObsSegmentationsLoader, OmeTiffSource, imageOmeZarrSchema),
+  makeFileType(FileType$1.OBS_SEGMENTATIONS_OME_ZARR, DataType$2.OBS_SEGMENTATIONS, OmeZarrAsObsSegmentationsLoader, ZarrDataSource, obsSegmentationsOmeZarrSchema),
+  makeFileType(FileType$1.OBS_SEGMENTATIONS_OME_TIFF, DataType$2.OBS_SEGMENTATIONS, OmeTiffAsObsSegmentationsLoader, OmeTiffSource, obsSegmentationsOmeTiffSchema),
   // SpatialData file types
   makeFileType(FileType$1.IMAGE_SPATIALDATA_ZARR, DataType$2.IMAGE, SpatialDataImageLoader, ZarrDataSource, imageSpatialdataSchema),
   // TODO: create a new loader for labels that returns obsSegmentations with obsSegmentationsType: 'bitmask'
@@ -262830,7 +263410,7 @@ const baseFileTypes = [
 ];
 const baseJointFileTypes = [
   new PluginJointFileType(FileType$1.ANNDATA_ZARR, expandAnndataZarr, anndataZarrSchema),
-  // new PluginJointFileType(FileType.SPATIALDATA_ZARR, expandSpatialdataZarr, spatialdataZarrSchema),
+  new PluginJointFileType(FileType$1.SPATIALDATA_ZARR, expandSpatialdataZarr, spatialdataZarrSchema),
   // For legacy file types:
   new PluginJointFileType(FileType$1.ANNDATA_CELLS_ZARR, expandAnndataCellsZarr, anndataCellsZarrSchema),
   new PluginJointFileType(FileType$1.ANNDATA_CELL_SETS_ZARR, expandAnndataCellSetsZarr, anndataCellSetsZarrSchema),
@@ -263002,7 +263582,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_VISIBLE, true, z.boolean()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_OPACITY, 1, z.number()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_WINDOW, null, z.array(z.number()).length(2).nullable()),
-  new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_COLOR, null, z.array(z.number()).length(3).nullable()),
+  new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_COLOR, [255, 255, 255], z.array(z.number()).length(3).nullable()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SEGMENTATION_FILLED, true, z.boolean()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH, 1, z.number()),
   // Reference: https://www.awaresystems.be/imaging/tiff/tifftags/photometricinterpretation.html