@vitessce/scatterplot-embedding 3.1.2 → 3.2.0

package/dist/{index-841c8a1c.js → index-b19aa9df.js}

@@ -11039,8 +11039,10 @@ const ViewType$1 = {
   STATUS: "status",
   SCATTERPLOT: "scatterplot",
   SPATIAL: "spatial",
+  SPATIAL_BETA: "spatialBeta",
   HEATMAP: "heatmap",
   LAYER_CONTROLLER: "layerController",
+  LAYER_CONTROLLER_BETA: "layerControllerBeta",
   GENOMIC_PROFILES: "genomicProfiles",
   GATING: "gating",
   FEATURE_LIST: "featureList",
@@ -11052,20 +11054,24 @@ const ViewType$1 = {
 const DataType$2 = {
   OBS_LABELS: "obsLabels",
   OBS_EMBEDDING: "obsEmbedding",
-  OBS_LOCATIONS: "obsLocations",
   OBS_FEATURE_MATRIX: "obsFeatureMatrix",
   OBS_SETS: "obsSets",
   FEATURE_LABELS: "featureLabels",
   IMAGE: "image",
   OBS_SEGMENTATIONS: "obsSegmentations",
   NEIGHBORHOODS: "neighborhoods",
-  GENOMIC_PROFILES: "genomic-profiles"
+  GENOMIC_PROFILES: "genomic-profiles",
+  OBS_SPOTS: "obsSpots",
+  OBS_POINTS: "obsPoints",
+  OBS_LOCATIONS: "obsLocations"
 };
 const FileType$1 = {
   // Joint file types
   ANNDATA_ZARR: "anndata.zarr",
   // Atomic file types
   OBS_EMBEDDING_CSV: "obsEmbedding.csv",
+  OBS_SPOTS_CSV: "obsSpots.csv",
+  OBS_POINTS_CSV: "obsPoints.csv",
   OBS_LOCATIONS_CSV: "obsLocations.csv",
   OBS_LABELS_CSV: "obsLabels.csv",
   FEATURE_LABELS_CSV: "featureLabels.csv",
@@ -11078,6 +11084,8 @@ const FileType$1 = {
   OBS_FEATURE_MATRIX_ANNDATA_ZARR: "obsFeatureMatrix.anndata.zarr",
   OBS_SETS_ANNDATA_ZARR: "obsSets.anndata.zarr",
   OBS_EMBEDDING_ANNDATA_ZARR: "obsEmbedding.anndata.zarr",
+  OBS_SPOTS_ANNDATA_ZARR: "obsSpots.anndata.zarr",
+  OBS_POINTS_ANNDATA_ZARR: "obsPoints.anndata.zarr",
   OBS_LOCATIONS_ANNDATA_ZARR: "obsLocations.anndata.zarr",
   OBS_SEGMENTATIONS_ANNDATA_ZARR: "obsSegmentations.anndata.zarr",
   OBS_LABELS_ANNDATA_ZARR: "obsLabels.anndata.zarr",
@@ -11086,6 +11094,8 @@ const FileType$1 = {
   OBS_FEATURE_MATRIX_MUDATA_ZARR: "obsFeatureMatrix.mudata.zarr",
   OBS_SETS_MUDATA_ZARR: "obsSets.mudata.zarr",
   OBS_EMBEDDING_MUDATA_ZARR: "obsEmbedding.mudata.zarr",
+  OBS_SPOTS_MUDATA_ZARR: "obsSpots.mudata.zarr",
+  OBS_POINTS_MUDATA_ZARR: "obsPoints.mudata.zarr",
   OBS_LOCATIONS_MUDATA_ZARR: "obsLocations.mudata.zarr",
   OBS_SEGMENTATIONS_MUDATA_ZARR: "obsSegmentations.mudata.zarr",
   OBS_LABELS_MUDATA_ZARR: "obsLabels.mudata.zarr",
@@ -11129,10 +11139,8 @@ const FileType$1 = {
   ANNDATA_EXPRESSION_MATRIX_ZARR: "anndata-expression-matrix.zarr"
 };
 const CoordinationType$1 = {
-  // Meta coordination scopes
   META_COORDINATION_SCOPES: "metaCoordinationScopes",
   META_COORDINATION_SCOPES_BY: "metaCoordinationScopesBy",
-  // Other coordination scopes
   DATASET: "dataset",
   // Entity types
   OBS_TYPE: "obsType",
@@ -11158,6 +11166,7 @@ const CoordinationType$1 = {
   SPATIAL_TARGET_X: "spatialTargetX",
   SPATIAL_TARGET_Y: "spatialTargetY",
   SPATIAL_TARGET_Z: "spatialTargetZ",
+  SPATIAL_TARGET_T: "spatialTargetT",
   SPATIAL_ROTATION_X: "spatialRotationX",
   SPATIAL_ROTATION_Y: "spatialRotationY",
   SPATIAL_ROTATION_Z: "spatialRotationZ",
@@ -11195,7 +11204,46 @@ const CoordinationType$1 = {
   GATING_FEATURE_SELECTION_X: "gatingFeatureSelectionX",
   GATING_FEATURE_SELECTION_Y: "gatingFeatureSelectionY",
   FEATURE_VALUE_TRANSFORM_COEFFICIENT: "featureValueTransformCoefficient",
-  TOOLTIPS_VISIBLE: "tooltipsVisible"
+  TOOLTIPS_VISIBLE: "tooltipsVisible",
+  FILE_UID: "fileUid",
+  IMAGE_LAYER: "imageLayer",
+  IMAGE_CHANNEL: "imageChannel",
+  SEGMENTATION_LAYER: "segmentationLayer",
+  SEGMENTATION_CHANNEL: "segmentationChannel",
+  SPATIAL_TARGET_C: "spatialTargetC",
+  SPATIAL_LAYER_VISIBLE: "spatialLayerVisible",
+  SPATIAL_LAYER_OPACITY: "spatialLayerOpacity",
+  SPATIAL_LAYER_COLORMAP: "spatialLayerColormap",
+  SPATIAL_LAYER_TRANSPARENT_COLOR: "spatialLayerTransparentColor",
+  SPATIAL_LAYER_MODEL_MATRIX: "spatialLayerModelMatrix",
+  SPATIAL_SEGMENTATION_FILLED: "spatialSegmentationFilled",
+  SPATIAL_SEGMENTATION_STROKE_WIDTH: "spatialSegmentationStrokeWidth",
+  SPATIAL_CHANNEL_COLOR: "spatialChannelColor",
+  SPATIAL_CHANNEL_VISIBLE: "spatialChannelVisible",
+  SPATIAL_CHANNEL_OPACITY: "spatialChannelOpacity",
+  SPATIAL_CHANNEL_WINDOW: "spatialChannelWindow",
+  PHOTOMETRIC_INTERPRETATION: "photometricInterpretation",
+  // For 3D volume rendering
+  SPATIAL_RENDERING_MODE: "spatialRenderingMode",
+  VOLUMETRIC_RENDERING_ALGORITHM: "volumetricRenderingAlgorithm",
+  SPATIAL_TARGET_RESOLUTION: "spatialTargetResolution",
+  // For clipping plane sliders
+  SPATIAL_SLICE_X: "spatialSliceX",
+  SPATIAL_SLICE_Y: "spatialSliceY",
+  SPATIAL_SLICE_Z: "spatialSliceZ",
+  // For spatial spot and point layers
+  SPOT_LAYER: "spotLayer",
+  POINT_LAYER: "pointLayer",
+  SPATIAL_SPOT_RADIUS: "spatialSpotRadius",
+  SPATIAL_SPOT_FILLED: "spatialSpotFilled",
+  SPATIAL_SPOT_STROKE_WIDTH: "spatialSpotStrokeWidth",
+  SPATIAL_LAYER_COLOR: "spatialLayerColor",
+  PIXEL_HIGHLIGHT: "pixelHighlight",
+  TOOLTIP_CROSSHAIRS_VISIBLE: "tooltipCrosshairsVisible",
+  LEGEND_VISIBLE: "legendVisible",
+  SPATIAL_CHANNEL_LABELS_VISIBLE: "spatialChannelLabelsVisible",
+  SPATIAL_CHANNEL_LABELS_ORIENTATION: "spatialChannelLabelsOrientation",
+  SPATIAL_CHANNEL_LABEL_SIZE: "spatialChannelLabelSize"
 };
 const COMPONENT_COORDINATION_TYPES = {
   [ViewType$1.SCATTERPLOT]: [
@@ -11299,6 +11347,77 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.MOLECULE_HIGHLIGHT,
     CoordinationType$1.TOOLTIPS_VISIBLE
   ],
+  [ViewType$1.SPATIAL_BETA]: [
+    CoordinationType$1.META_COORDINATION_SCOPES,
+    CoordinationType$1.META_COORDINATION_SCOPES_BY,
+    CoordinationType$1.DATASET,
+    CoordinationType$1.OBS_TYPE,
+    CoordinationType$1.OBS_LABELS_TYPE,
+    CoordinationType$1.FEATURE_TYPE,
+    CoordinationType$1.FEATURE_VALUE_TYPE,
+    CoordinationType$1.SPATIAL_ZOOM,
+    CoordinationType$1.SPATIAL_ROTATION,
+    CoordinationType$1.SPATIAL_POINT_LAYER,
+    CoordinationType$1.SPATIAL_NEIGHBORHOOD_LAYER,
+    CoordinationType$1.SPATIAL_TARGET_X,
+    CoordinationType$1.SPATIAL_TARGET_Y,
+    CoordinationType$1.SPATIAL_TARGET_Z,
+    CoordinationType$1.SPATIAL_TARGET_T,
+    CoordinationType$1.SPATIAL_ROTATION_X,
+    CoordinationType$1.SPATIAL_ROTATION_Y,
+    CoordinationType$1.SPATIAL_ROTATION_Z,
+    CoordinationType$1.SPATIAL_ROTATION_ORBIT,
+    CoordinationType$1.SPATIAL_ORBIT_AXIS,
+    CoordinationType$1.SPATIAL_AXIS_FIXED,
+    CoordinationType$1.OBS_FILTER,
+    CoordinationType$1.OBS_HIGHLIGHT,
+    CoordinationType$1.OBS_SET_SELECTION,
+    CoordinationType$1.OBS_SET_HIGHLIGHT,
+    CoordinationType$1.OBS_SET_COLOR,
+    CoordinationType$1.FEATURE_HIGHLIGHT,
+    CoordinationType$1.FEATURE_SELECTION,
+    CoordinationType$1.FEATURE_VALUE_COLORMAP,
+    CoordinationType$1.FEATURE_VALUE_COLORMAP_RANGE,
+    CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.ADDITIONAL_OBS_SETS,
+    CoordinationType$1.MOLECULE_HIGHLIGHT,
+    CoordinationType$1.TOOLTIPS_VISIBLE,
+    CoordinationType$1.FILE_UID,
+    CoordinationType$1.SPATIAL_TARGET_C,
+    CoordinationType$1.SPATIAL_LAYER_VISIBLE,
+    CoordinationType$1.SPATIAL_LAYER_OPACITY,
+    CoordinationType$1.SPATIAL_LAYER_COLORMAP,
+    CoordinationType$1.SPATIAL_LAYER_TRANSPARENT_COLOR,
+    CoordinationType$1.SPATIAL_LAYER_MODEL_MATRIX,
+    CoordinationType$1.SPATIAL_CHANNEL_COLOR,
+    CoordinationType$1.SPATIAL_SEGMENTATION_FILLED,
+    CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH,
+    CoordinationType$1.IMAGE_LAYER,
+    CoordinationType$1.SEGMENTATION_LAYER,
+    CoordinationType$1.IMAGE_CHANNEL,
+    CoordinationType$1.SEGMENTATION_CHANNEL,
+    CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_OPACITY,
+    CoordinationType$1.SPATIAL_CHANNEL_WINDOW,
+    CoordinationType$1.SPATIAL_RENDERING_MODE,
+    CoordinationType$1.VOLUMETRIC_RENDERING_ALGORITHM,
+    CoordinationType$1.SPATIAL_TARGET_RESOLUTION,
+    CoordinationType$1.SPATIAL_SLICE_X,
+    CoordinationType$1.SPATIAL_SLICE_Y,
+    CoordinationType$1.SPATIAL_SLICE_Z,
+    CoordinationType$1.SPOT_LAYER,
+    CoordinationType$1.POINT_LAYER,
+    CoordinationType$1.SPATIAL_SPOT_RADIUS,
+    CoordinationType$1.SPATIAL_SPOT_FILLED,
+    CoordinationType$1.SPATIAL_SPOT_STROKE_WIDTH,
+    CoordinationType$1.SPATIAL_LAYER_COLOR,
+    CoordinationType$1.PIXEL_HIGHLIGHT,
+    CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
+    CoordinationType$1.LEGEND_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+  ],
   [ViewType$1.HEATMAP]: [
     CoordinationType$1.DATASET,
     CoordinationType$1.OBS_TYPE,
@@ -11404,6 +11523,61 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_ROTATION_ORBIT,
     CoordinationType$1.SPATIAL_ORBIT_AXIS
   ],
+  [ViewType$1.LAYER_CONTROLLER_BETA]: [
+    CoordinationType$1.META_COORDINATION_SCOPES,
+    CoordinationType$1.META_COORDINATION_SCOPES_BY,
+    CoordinationType$1.DATASET,
+    CoordinationType$1.OBS_TYPE,
+    CoordinationType$1.FEATURE_TYPE,
+    CoordinationType$1.FEATURE_VALUE_TYPE,
+    CoordinationType$1.SPATIAL_POINT_LAYER,
+    CoordinationType$1.SPATIAL_NEIGHBORHOOD_LAYER,
+    CoordinationType$1.SPATIAL_ZOOM,
+    CoordinationType$1.SPATIAL_TARGET_X,
+    CoordinationType$1.SPATIAL_TARGET_Y,
+    CoordinationType$1.SPATIAL_TARGET_Z,
+    CoordinationType$1.SPATIAL_TARGET_T,
+    CoordinationType$1.SPATIAL_ROTATION_X,
+    CoordinationType$1.SPATIAL_ROTATION_Y,
+    CoordinationType$1.SPATIAL_ROTATION_Z,
+    CoordinationType$1.SPATIAL_ROTATION_ORBIT,
+    CoordinationType$1.SPATIAL_ORBIT_AXIS,
+    CoordinationType$1.FILE_UID,
+    CoordinationType$1.SPATIAL_TARGET_C,
+    CoordinationType$1.SPATIAL_LAYER_VISIBLE,
+    CoordinationType$1.SPATIAL_LAYER_OPACITY,
+    CoordinationType$1.SPATIAL_LAYER_COLORMAP,
+    CoordinationType$1.SPATIAL_LAYER_TRANSPARENT_COLOR,
+    CoordinationType$1.SPATIAL_LAYER_MODEL_MATRIX,
+    CoordinationType$1.SPATIAL_CHANNEL_COLOR,
+    CoordinationType$1.SPATIAL_SEGMENTATION_FILLED,
+    CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH,
+    CoordinationType$1.IMAGE_CHANNEL,
+    CoordinationType$1.SEGMENTATION_CHANNEL,
+    CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_OPACITY,
+    CoordinationType$1.SPATIAL_CHANNEL_WINDOW,
+    CoordinationType$1.PHOTOMETRIC_INTERPRETATION,
+    CoordinationType$1.SPATIAL_RENDERING_MODE,
+    CoordinationType$1.VOLUMETRIC_RENDERING_ALGORITHM,
+    CoordinationType$1.SPATIAL_TARGET_RESOLUTION,
+    CoordinationType$1.SPATIAL_SLICE_X,
+    CoordinationType$1.SPATIAL_SLICE_Y,
+    CoordinationType$1.SPATIAL_SLICE_Z,
+    CoordinationType$1.SPOT_LAYER,
+    CoordinationType$1.POINT_LAYER,
+    CoordinationType$1.SPATIAL_SPOT_RADIUS,
+    CoordinationType$1.SPATIAL_SPOT_FILLED,
+    CoordinationType$1.SPATIAL_SPOT_STROKE_WIDTH,
+    CoordinationType$1.SPATIAL_LAYER_COLOR,
+    CoordinationType$1.OBS_COLOR_ENCODING,
+    CoordinationType$1.TOOLTIPS_VISIBLE,
+    CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
+    CoordinationType$1.LEGEND_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_LABELS_VISIBLE,
+    CoordinationType$1.SPATIAL_CHANNEL_LABELS_ORIENTATION,
+    CoordinationType$1.SPATIAL_CHANNEL_LABEL_SIZE
+  ],
   [ViewType$1.GENOMIC_PROFILES]: [
     CoordinationType$1.DATASET,
     CoordinationType$1.OBS_TYPE,
@@ -11695,6 +11869,8 @@ const annDataObsSets = z.array(z.object({
   ]),
   scorePath: z.string().optional().describe("The location in the AnnData store for the set confidence scores, like 'obs/celltype_prediction_score.'")
 }));
+const annDataObsSpots = annDataObsm;
+const annDataObsPoints = annDataObsm;
 const annDataObsLocations = annDataObsm;
 const annDataObsEmbedding = annDataObsm;
 const annDataObsSegmentations = annDataObs;
@@ -11721,10 +11897,21 @@ z.object({
 z.object({
   obsIndex: z.string(),
   obsEmbedding: z.array(z.string()).length(2)
+  // TODO: support 3D?
+});
+z.object({
+  obsIndex: z.string(),
+  obsSpots: z.array(z.string()).length(2)
+  // TODO: support 3D?
+});
+z.object({
+  obsIndex: z.string(),
+  obsPoints: z.array(z.string()).length(3)
 });
 z.object({
   obsIndex: z.string(),
   obsLocations: z.array(z.string()).length(2)
+  // TODO: support 3D?
 });
 z.object({
   obsIndex: z.string(),
@@ -11756,6 +11943,8 @@ z.object({
   ]),
   obsFeatureMatrix: annDataObsFeatureMatrix,
   obsSets: annDataObsSets,
+  obsSpots: annDataObsSpots,
+  obsPoints: annDataObsPoints,
   obsLocations: annDataObsLocations,
   obsSegmentations: annDataObsSegmentations,
   obsEmbedding: z.union([
@@ -20456,17 +20645,17 @@ let COLOR;
   COLOR2[COLOR2["BRIGHT_CYAN"] = 96] = "BRIGHT_CYAN";
   COLOR2[COLOR2["BRIGHT_WHITE"] = 97] = "BRIGHT_WHITE";
 })(COLOR || (COLOR = {}));
-function getColor(color2) {
+function getColor$1(color2) {
   return typeof color2 === "string" ? COLOR[color2.toUpperCase()] || COLOR.WHITE : color2;
 }
 function addColor(string2, color2, background) {
   if (!isBrowser$3 && typeof string2 === "string") {
     if (color2) {
-      color2 = getColor(color2);
+      color2 = getColor$1(color2);
       string2 = "\x1B[".concat(color2, "m").concat(string2, "\x1B[39m");
     }
     if (background) {
-      color2 = getColor(background);
+      color2 = getColor$1(background);
       string2 = "\x1B[".concat(background + 10, "m").concat(string2, "\x1B[49m");
     }
   }
@@ -30490,7 +30679,7 @@ function negate(out, a2) {
   out[2] = -a2[2];
   return out;
 }
-function normalize$4(out, a2) {
+function normalize$5(out, a2) {
   var x2 = a2[0];
   var y2 = a2[1];
   var z2 = a2[2];
@@ -31799,7 +31988,7 @@ function squaredLength$1(a2) {
   var w2 = a2[3];
   return x2 * x2 + y2 * y2 + z2 * z2 + w2 * w2;
 }
-function normalize$3(out, a2) {
+function normalize$4(out, a2) {
   var x2 = a2[0];
   var y2 = a2[1];
   var z2 = a2[2];
@@ -32436,7 +32625,7 @@ var dot$1 = dot$2;
 var lerp$1 = lerp$2;
 var length$2 = length$3;
 var squaredLength = squaredLength$1;
-var normalize$2 = normalize$3;
+var normalize$3 = normalize$4;
 var rotationTo = function() {
   var tmpvec3 = create$3();
   var xUnitVec3 = fromValues(1, 0, 0);
@@ -32447,7 +32636,7 @@ var rotationTo = function() {
       cross(tmpvec3, xUnitVec3, a2);
       if (len(tmpvec3) < 1e-6)
         cross(tmpvec3, yUnitVec3, a2);
-      normalize$4(tmpvec3, tmpvec3);
+      normalize$5(tmpvec3, tmpvec3);
       setAxisAngle(out, tmpvec3, Math.PI);
       return out;
     } else if (dot2 > 0.999999) {
@@ -32462,7 +32651,7 @@ var rotationTo = function() {
       out[1] = tmpvec3[1];
       out[2] = tmpvec3[2];
       out[3] = 1 + dot2;
-      return normalize$2(out, out);
+      return normalize$3(out, out);
     }
   };
 }();
@@ -32488,7 +32677,7 @@ var rotationTo = function() {
     matr[2] = -view[0];
     matr[5] = -view[1];
     matr[8] = -view[2];
-    return normalize$2(out, fromMat3(out, matr));
+    return normalize$3(out, fromMat3(out, matr));
   };
 })();
 const IDENTITY_QUATERNION = [0, 0, 0, 1];
@@ -54177,7 +54366,7 @@ function copyFlatRing(target, targetStartIndex, positions, size, srcStartIndex =
   modifyPolygonWindingDirection(target, windingDirection, windingOptions);
   return targetIndex;
 }
-function normalize$1(polygon2, positionSize) {
+function normalize$2(polygon2, positionSize) {
   validate(polygon2);
   const positions = [];
   const holeIndices = [];
@@ -54283,7 +54472,7 @@ class PolygonTesselator extends Tesselator {
   }
   normalizeGeometry(polygon2) {
     if (this.normalize) {
-      const normalizedPolygon = normalize$1(polygon2, this.positionSize);
+      const normalizedPolygon = normalize$2(polygon2, this.positionSize);
       if (this.opts.resolution) {
         return cutPolygonByGrid(getPositions(normalizedPolygon), getHoleIndices(normalizedPolygon), {
           size: this.positionSize,
@@ -54905,7 +55094,7 @@ class PolygonLayer extends CompositeLayer {
       objectInfo.index++;
       let polygon2 = getPolygon(object2, objectInfo);
       if (_normalize) {
-        polygon2 = normalize$1(polygon2, positionSize);
+        polygon2 = normalize$2(polygon2, positionSize);
       }
       const {
         holeIndices
@@ -119764,28 +119953,38 @@ const PASS_THROUGH_PROPS = [
 ];
 class SelectionLayer extends CompositeLayer {
   _selectPolygonObjects(coordinates2) {
-    const { onSelect, getCellCoords, cellsQuadTree, flipY } = this.props;
+    const { flipY, obsLayers } = this.props;
     const flippedCoordinates = flipY ? coordinates2.map((poly) => poly.map((p) => [p[0], -p[1]])) : coordinates2;
     const selectedPolygon = polygon(flippedCoordinates);
-    const pickingInfos = [];
-    cellsQuadTree.visit((node, x02, y02, x12, y12) => {
-      const nodePoints = [[[x02, y02], [x12, y02], [x12, y12], [x02, y12], [x02, y02]]];
-      const nodePolygon = polygon(nodePoints);
-      const nodePolygonContainsSelectedPolygon = booleanContains(nodePolygon, selectedPolygon);
-      const nodePolygonWithinSelectedPolygon = booleanWithin(nodePolygon, selectedPolygon);
-      const nodePolygonOverlapsSelectedPolgyon = booleanOverlap(nodePolygon, selectedPolygon);
-      if (!nodePolygonContainsSelectedPolygon && !nodePolygonWithinSelectedPolygon && !nodePolygonOverlapsSelectedPolgyon) {
-        return true;
-      }
-      if (node.data && booleanPointInPolygon$1(point([].slice.call(getCellCoords(node.data))), selectedPolygon)) {
-        pickingInfos.push(node.data);
-      }
-      return false;
+    obsLayers.forEach((obsLayer) => {
+      const { getObsCoords, obsQuadTree, obsIndex, onSelect: layerOnSelect } = obsLayer;
+      const pickingInfos = [];
+      obsQuadTree == null ? void 0 : obsQuadTree.visit((node, x02, y02, x12, y12) => {
+        const nodePoints = [[[x02, y02], [x12, y02], [x12, y12], [x02, y12], [x02, y02]]];
+        const nodePolygon = polygon(nodePoints);
+        const nodePolygonContainsSelectedPolygon = booleanContains(nodePolygon, selectedPolygon);
+        const nodePolygonWithinSelectedPolygon = booleanWithin(nodePolygon, selectedPolygon);
+        const nodePolygonOverlapsSelectedPolgyon = booleanOverlap(nodePolygon, selectedPolygon);
+        if (!nodePolygonContainsSelectedPolygon && !nodePolygonWithinSelectedPolygon && !nodePolygonOverlapsSelectedPolgyon) {
+          return true;
+        }
+        if (node.data && booleanPointInPolygon$1(point([].slice.call(getObsCoords(node.data))), selectedPolygon)) {
+          pickingInfos.push(node.data);
+        }
+        return false;
+      });
+      const pickingIds = pickingInfos.map((obsI) => obsIndex[obsI]);
+      layerOnSelect(pickingIds);
+    });
+  }
+  _selectEmpty() {
+    const { obsLayers } = this.props;
+    obsLayers.forEach((obsLayer) => {
+      const { onSelect: layerOnSelect } = obsLayer;
+      layerOnSelect([]);
     });
-    onSelect({ pickingInfos });
   }
   renderLayers() {
-    const { onSelect } = this.props;
     const mode = MODE_MAP[this.props.selectionType] || distEs6.ViewMode;
     const inheritedProps = {};
     PASS_THROUGH_PROPS.forEach((p) => {
@@ -119807,7 +120006,7 @@ class SelectionLayer extends CompositeLayer {
             const { coordinates: coordinates2 } = updatedData.features[0].geometry;
             this._selectPolygonObjects(coordinates2);
           } else if (editType === EDIT_TYPE_CLEAR) {
-            onSelect({ pickingInfos: [] });
+            this._selectEmpty();
           }
         },
         _subLayerProps: {
@@ -119839,25 +120038,23 @@ SelectionLayer.defaultProps = defaultProps$f;
 function getBaseLayerId(layerId) {
   return `base-${layerId}`;
 }
-function getSelectionLayers(tool, zoom, layerId, getCellCoords, obsIndex, updateCellsSelection, cellsQuadTree, flipY = false) {
+const onSelectNoop = ({ pickingInfos }) => {
+};
+function getSelectionLayer(tool, zoom, layerId, obsLayers, flipY = false) {
   if (!tool) {
     return [];
   }
   const cellBaseLayerId = getBaseLayerId(layerId);
   const editHandlePointRadius = 5 / (zoom + 16);
-  return [new SelectionLayer({
+  return new SelectionLayer({
     id: "selection",
     flipY,
-    cellsQuadTree,
-    getCellCoords,
+    obsLayers,
     coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
     selectionType: tool,
-    onSelect: ({ pickingInfos }) => {
-      const cellIds = pickingInfos.map((i2) => obsIndex[i2]);
-      if (updateCellsSelection) {
-        updateCellsSelection(cellIds);
-      }
-    },
+    // This onSelect is no longer used since
+    // the obsLayers each have their own onSelect.
+    onSelect: onSelectNoop,
     layerIds: [cellBaseLayerId],
     getTentativeFillColor: () => [255, 255, 255, 95],
     getTentativeLineColor: () => [143, 143, 143, 255],
@@ -119869,7 +120066,7 @@ function getSelectionLayers(tool, zoom, layerId, getCellCoords, obsIndex, update
     editHandlePointRadiusScale: 1,
     editHandlePointRadiusMinPixels: editHandlePointRadius,
     editHandlePointRadiusMaxPixels: 2 * editHandlePointRadius
-  })];
+  });
 }
 const TILE_SIZE = 4096;
 const DATA_TEXTURE_SIZE = 4096;
@@ -120983,16 +121180,16 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-589273c1.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-6da36e65.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-42eaa5bd.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-1258bf90.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-e27c7111.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-7455633d.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-f9f4e24f.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-a121511e.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-532eb642.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-a05285b9.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-c642ec70.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-b526be77.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-59152b4a.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-49ce920f.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -127785,7 +127982,7 @@ const SIGNAL_ABORTED = "__vivSignalAborted";
 addDecoder(5, () => LZWDecoder);
 const MAX_COLOR_INTENSITY = 255;
 const DEFAULT_COLOR_OFF = [0, 0, 0];
-const MAX_CHANNELS = 6;
+const MAX_CHANNELS$1 = 6;
 const DEFAULT_FONT_FAMILY = "-apple-system, 'Helvetica Neue', Arial, sans-serif";
 const DTYPE_VALUES = {
   Uint8: {
@@ -129301,7 +129498,7 @@ const AdditiveColormapExtension = class extends LayerExtension {
 };
 AdditiveColormapExtension.extensionName = "AdditiveColormapExtension";
 AdditiveColormapExtension.defaultProps = defaultProps$4$1;
-const fs$1$1 = `uniform vec3 transparentColor;
+const fs$1$2 = `uniform vec3 transparentColor;
 uniform bool useTransparentColor;
 uniform float opacity;
 
@@ -129328,12 +129525,12 @@ rgba = apply_opacity(rgb);
 `;
 const colorPalette = {
   name: "color-palette-module",
-  fs: fs$1$1,
+  fs: fs$1$2,
   inject: {
     "fs:DECKGL_MUTATE_COLOR": DECKGL_MUTATE_COLOR
   }
 };
-function padWithDefault$2(arr, defaultValue2, padWidth) {
+function padWithDefault$3(arr, defaultValue2, padWidth) {
   for (let i2 = 0; i2 < padWidth; i2 += 1) {
     arr.push(defaultValue2);
   }
@@ -129359,8 +129556,8 @@ function padColors({ colors, channelsVisible }) {
   const newColors = colors.map(
     (color2, i2) => channelsVisible[i2] ? color2.map((c2) => c2 / MAX_COLOR_INTENSITY) : DEFAULT_COLOR_OFF
   );
-  const padSize = MAX_CHANNELS - newColors.length;
-  const paddedColors = padWithDefault$2(
+  const padSize = MAX_CHANNELS$1 - newColors.length;
+  const paddedColors = padWithDefault$3(
     newColors,
     DEFAULT_COLOR_OFF,
     padSize
@@ -129479,7 +129676,7 @@ const lens = {
   `
   }
 };
-const defaultProps$2$1 = {
+const defaultProps$2$2 = {
   lensEnabled: { type: "boolean", value: false, compare: true },
   lensSelection: { type: "number", value: 0, compare: true },
   lensRadius: { type: "number", value: 100, compare: true },
@@ -129501,7 +129698,7 @@ const LensExtension = class extends LayerExtension {
     }
     const onMouseMove = () => {
       const { viewportId } = layer.props;
-      const { lensRadius = defaultProps$2$1.lensRadius.value } = this.props;
+      const { lensRadius = defaultProps$2$2.lensRadius.value } = this.props;
       if (!viewportId) {
         layer.setState({ unprojectLensBounds: [0, 0, 0, 0] });
         return;
@@ -129548,10 +129745,10 @@ const LensExtension = class extends LayerExtension {
     const { unprojectLensBounds = [0, 0, 0, 0] } = this.state;
     const {
       bounds: bounds2,
-      lensEnabled = defaultProps$2$1.lensEnabled.value,
-      lensSelection = defaultProps$2$1.lensSelection.value,
-      lensBorderColor = defaultProps$2$1.lensBorderColor.value,
-      lensBorderRadius = defaultProps$2$1.lensBorderRadius.value,
+      lensEnabled = defaultProps$2$2.lensEnabled.value,
+      lensSelection = defaultProps$2$2.lensSelection.value,
+      lensBorderColor = defaultProps$2$2.lensBorderColor.value,
+      lensBorderRadius = defaultProps$2$2.lensBorderRadius.value,
       colors,
       channelsVisible
     } = this.props;
@@ -129592,7 +129789,7 @@ const LensExtension = class extends LayerExtension {
   }
 };
 LensExtension.extensionName = "LensExtension";
-LensExtension.defaultProps = defaultProps$2$1;
+LensExtension.defaultProps = defaultProps$2$2;
 function colormapModuleFactory3D(name2, apply_cmap) {
   const fs2 = `${apply_cmap}
 
@@ -129832,7 +130029,7 @@ const channels = {
 function range(len2) {
   return [...Array(len2).keys()];
 }
-function padWithDefault$1(arr, defaultValue2, padWidth) {
+function padWithDefault$2(arr, defaultValue2, padWidth) {
   for (let i2 = 0; i2 < padWidth; i2 += 1) {
     arr.push(defaultValue2);
   }
@@ -129856,13 +130053,13 @@ function padContrastLimits({
   const newContrastLimits = contrastLimits.map(
     (slider, i2) => channelsVisible[i2] ? slider : [maxSliderValue, maxSliderValue]
   );
-  const padSize = MAX_CHANNELS - newContrastLimits.length;
+  const padSize = MAX_CHANNELS$1 - newContrastLimits.length;
   if (padSize < 0) {
     throw Error(
       `${newContrastLimits.lengths} channels passed in, but only 6 are allowed.`
     );
   }
-  const paddedContrastLimits = padWithDefault$1(
+  const paddedContrastLimits = padWithDefault$2(
     newContrastLimits,
     [maxSliderValue, maxSliderValue],
     padSize
@@ -129892,7 +130089,7 @@ function makeBoundingBox(viewState) {
     viewport.unproject([0, viewport.height])
   ];
 }
-const fs$1 = `#define SHADER_NAME xr-layer-fragment-shader
+const fs$1$1 = `#define SHADER_NAME xr-layer-fragment-shader
 
 precision highp float;
 precision highp int;
@@ -129933,7 +130130,7 @@ void main() {
   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
-const vs$1 = `#define SHADER_NAME xr-layer-vertex-shader
+const vs$1$1 = `#define SHADER_NAME xr-layer-vertex-shader
 
 attribute vec2 texCoords;
 attribute vec3 positions;
@@ -129952,7 +130149,7 @@ void main(void) {
   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
-const coreShaderModule = { fs: fs$1, vs: vs$1 };
+const coreShaderModule = { fs: fs$1$1, vs: vs$1$1 };
 function validateWebGL2Filter(gl, interpolation) {
   const canShowFloat = hasFeature(gl, FEATURES$1.TEXTURE_FLOAT);
   const canShowLinear = hasFeature(gl, FEATURES$1.TEXTURE_FILTER_LINEAR_FLOAT);
@@ -130686,7 +130883,7 @@ function getPosition$1(boundingBox, position, length2) {
     }
   }
 }
-const defaultProps$2 = {
+const defaultProps$2$1 = {
   pickable: { type: "boolean", value: true, compare: true },
   viewState: {
     type: "object",
@@ -130779,7 +130976,7 @@ const ScaleBarLayer = class extends CompositeLayer {
   }
 };
 ScaleBarLayer.layerName = "ScaleBarLayer";
-ScaleBarLayer.defaultProps = defaultProps$2;
+ScaleBarLayer.defaultProps = defaultProps$2$1;
 const vs$2 = `#version 300 es
 #define SHADER_NAME xr-layer-vertex-shader
 
@@ -131185,7 +131382,7 @@ const XR3DLayer = class extends Layer {
       });
       const invertedScaleMatrix = scaleMatrix.clone().invert();
       const invertedResolutionMatrix = resolutionMatrix.clone().invert();
-      const paddedClippingPlanes = padWithDefault$1(
+      const paddedClippingPlanes = padWithDefault$2(
         clippingPlanes.map(
           (p) => p.clone().transform(invertedScaleMatrix).transform(invertedResolutionMatrix)
         ),
@@ -131497,7 +131694,7 @@ const VolumeLayer = class extends CompositeLayer {
 };
 VolumeLayer.layerName = "VolumeLayer";
 VolumeLayer.defaultProps = defaultProps$9;
-const vs = `
+const vs$1 = `
 #define SHADER_NAME bitmask-layer-vertex-shader
 
 attribute vec2 texCoords;
@@ -131518,7 +131715,7 @@ void main(void) {
   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
-const fs = `
+const fs$1 = `
 #define SHADER_NAME bitmask-layer-fragment-shader
 precision highp float;
 
@@ -131586,14 +131783,14 @@ void main() {
   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
-function padWithDefault(arr, defaultValue2, padWidth) {
+function padWithDefault$1(arr, defaultValue2, padWidth) {
   const newArr = [...arr];
   for (let i2 = 0; i2 < padWidth; i2 += 1) {
     newArr.push(defaultValue2);
   }
   return newArr;
 }
-const defaultProps$1 = {
+const defaultProps$2 = {
   hoveredCell: { type: "number", value: null, compare: true },
   // We do not want to deep-compare cellColorData,
   // as it is potentially a TypedArray with millions of elements.
@@ -131605,13 +131802,13 @@ const defaultProps$1 = {
   // Same as with cellColorData, we do not want to deep-compare expressionData.
   expressionData: { type: "object", value: null, compare: 0 }
 };
-class BitmaskLayer extends XRLayer {
+let BitmaskLayer$1 = class BitmaskLayer extends XRLayer {
   // eslint-disable-next-line class-methods-use-this
   getShaders() {
     const { colormap } = this.props;
     return {
-      fs,
-      vs,
+      fs: fs$1,
+      vs: vs$1,
       modules: [project32, picking],
       defines: {
         [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap) ? colormap : GLSL_COLORMAP_DEFAULT
@@ -131671,7 +131868,7 @@ class BitmaskLayer extends XRLayer {
         expressionTex,
         colorTexHeight: colorTex.height,
         colorTexWidth: colorTex.width,
-        channelsVisible: padWithDefault(
+        channelsVisible: padWithDefault$1(
           channelsVisible,
           false,
           // There are six texture entries on the shaders
@@ -131708,9 +131905,564 @@ class BitmaskLayer extends XRLayer {
       type: GL$1.FLOAT
     });
   }
+};
+BitmaskLayer$1.layerName = "BitmaskLayer";
+BitmaskLayer$1.defaultProps = defaultProps$2;
+const vs = `
+#define SHADER_NAME bitmask-layer-vertex-shader
+
+attribute vec2 texCoords;
+attribute vec3 positions;
+attribute vec3 positions64Low;
+attribute vec3 instancePickingColors;
+
+varying vec2 vTexCoord;
+
+void main(void) {
+  geometry.worldPosition = positions;
+  geometry.uv = texCoords;
+  geometry.pickingColor = instancePickingColors;
+  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+  vTexCoord = texCoords;
+  vec4 color = vec4(0.0);
+  DECKGL_FILTER_COLOR(color, geometry);
+}
+`;
+const fs = `
+#define SHADER_NAME bitmask-layer-fragment-shader
+precision highp float;
+
+${colormaps$1}
+
+// Note: can have a maximum of 16 textures in most browsers
+// Reference: https://webglreport.com/
+
+// Data (mask) texture
+uniform sampler2D channel0;
+uniform sampler2D channel1;
+uniform sampler2D channel2;
+uniform sampler2D channel3;
+uniform sampler2D channel4;
+uniform sampler2D channel5;
+uniform sampler2D channel6;
+
+// Color texture
+uniform float hovered;
+
+// Channel-specific properties
+uniform bool channelsVisible[7];
+uniform float channelOpacities[7];
+uniform bool channelIsStaticColorMode[7]; // TODO: should this be a single float?
+uniform bool channelIsSetColorMode[7]; // TODO: should this be a single float?
+
+// TODO: can array of tuples/vec2 be used?
+uniform float channelColormapRangeStarts[7];
+uniform float channelColormapRangeEnds[7];
+
+uniform float multiFeatureTexSize;
+
+// Use one expressionTex for all channels, using an offset mechanism.
+uniform sampler2D valueTex;
+uniform float valueTexOffsets[7];
+uniform float valueTexHeight;
+
+// Textures for set colors, using the same offset mechanism.
+uniform sampler2D colorTex;
+uniform float colorTexOffsets[7];
+uniform float colorTexHeight;
+
+
+// Static colors
+// TODO: For some reason I cannot use uniform vec3 colors[7]; and i cannot figure out why.
+uniform vec3 color0;
+uniform vec3 color1;
+uniform vec3 color2;
+uniform vec3 color3;
+uniform vec3 color4;
+uniform vec3 color5;
+uniform vec3 color6;
+
+// Info for edge-only mode
+uniform float scaleFactor;
+uniform bool channelsFilled[7];
+uniform float channelStrokeWidths[7];
+
+// opacity
+uniform float opacity;
+
+varying vec2 vTexCoord;
+
+vec3 sampleAndGetData(sampler2D dataTex, vec2 coord, bool isFilled, float strokeWidth, bool isOn) {
+  float sampledData = texture(dataTex, coord).r;
+  float clampedSampledData = max(0., min(sampledData, 1.));
+
+  bool isEdge = true;
+
+  if(!isFilled) {
+    vec2 uTextureSize = vec2(2048.0, 2048.0);
+    vec2 onePixel = vec2(1.0, 1.0) / uTextureSize;
+
+    // Vary the edgeSize based on user-defined stroke width.
+    float edgeSize = 150.0 * strokeWidth * scaleFactor;
+
+    float pixN = texture(dataTex, coord + vec2(0.0, onePixel.y * edgeSize)).r;
+    float pixS = texture(dataTex, coord - vec2(0.0, onePixel.y * edgeSize)).r;
+    float pixW = texture(dataTex, coord + vec2(onePixel.x * edgeSize, 0.0)).r;
+    float pixE = texture(dataTex, coord - vec2(onePixel.x * edgeSize, 0.0)).r;
+
+    float pixNW = texture(dataTex, coord + vec2(onePixel.y * edgeSize, onePixel.y * edgeSize)).r;
+    float pixNE = texture(dataTex, coord + vec2(-1.0 * onePixel.x * edgeSize, onePixel.y * edgeSize)).r;
+    float pixSW = texture(dataTex, coord - vec2(onePixel.x * edgeSize, onePixel.y * edgeSize)).r;
+    float pixSE = texture(dataTex, coord - vec2(-1.0 * onePixel.x * edgeSize, onePixel.y * edgeSize)).r;
+
+    isEdge = (pixN != sampledData || pixS != sampledData || pixW != sampledData || pixE != sampledData || pixNW != sampledData || pixNE != sampledData || pixSW != sampledData || pixSE != sampledData);
+  }
+  // Return a tuple of (sampledData, isEdge)
+  return vec3(clampedSampledData * float(isOn), sampledData, float(isEdge));
 }
-BitmaskLayer.layerName = "BitmaskLayer";
-BitmaskLayer.defaultProps = defaultProps$1;
+
+vec4 dataToColor(vec3 sampledDataAndIsEdge, bool isStaticColorMode, vec3 channelColor, float channelOpacity, float valueOffset, float rangeStart, float rangeEnd, bool isSetColorMode, float setColorOffset) {
+  float clampedSampledDataAndIsOn = sampledDataAndIsEdge.x;
+  float sampledData = sampledDataAndIsEdge.y;
+  float isEdge = sampledDataAndIsEdge.z;
+  
+
+  vec4 hoveredColor = float(sampledData == hovered && sampledData > 0. && hovered > 0.) * vec4(0., 0., 1., 1.);
+  
+  // Colors are laid out corresponding to ids in row-major order in the texture.  So if width of the texture is 10, and you want ID 25,
+  // you need coordinate (1, 4) (i.e 2 rows down, and 5 columns over indexed from 0 for a total of 25 units covered in row major order).
+  float offsetSampledData = sampledData + valueOffset - 1.0;
+  vec2 colorTexCoord = vec2(mod(offsetSampledData, multiFeatureTexSize) / multiFeatureTexSize, floor(offsetSampledData / multiFeatureTexSize) / (valueTexHeight - 1.));
+
+  // Get expression value
+  float expressionValue = texture(valueTex, colorTexCoord).r / 255.;
+  float scaledExpressionValue = (expressionValue - rangeStart) / max(0.005, (rangeEnd - rangeStart));
+
+
+  // Get set color index value
+  vec2 setIndicesTexCoord = vec2(mod(offsetSampledData, multiFeatureTexSize) / multiFeatureTexSize, floor(offsetSampledData / multiFeatureTexSize) / (valueTexHeight - 1.));
+  float setColorIndex = texture(valueTex, setIndicesTexCoord).r;
+
+  // Initialize to the default "null" color.
+  vec3 setColor = vec3(200. / 255., 200. / 255., 200. / 255.);
+  if(setColorIndex != 0.) {
+    // Subtract one from setColorIndex because we have already checked for the "null" value.
+    setColorIndex = setColorIndex - 1.;
+
+    float setColorOffsetR = (setColorIndex + setColorOffset) * 3.0 + 0.0;
+    vec2 setColorTexCoordR = vec2(mod(setColorOffsetR, multiFeatureTexSize) / multiFeatureTexSize, floor(setColorOffsetR / multiFeatureTexSize) / (colorTexHeight - 1.));
+    float setColorR = texture(colorTex, setColorTexCoordR).r / 255.;
+
+    float setColorOffsetG = (setColorIndex + setColorOffset) * 3.0 + 1.0;
+    vec2 setColorTexCoordG = vec2(mod(setColorOffsetG, multiFeatureTexSize) / multiFeatureTexSize, floor(setColorOffsetG / multiFeatureTexSize) / (colorTexHeight - 1.));
+    float setColorG = texture(colorTex, setColorTexCoordG).r / 255.;
+
+    float setColorOffsetB = (setColorIndex + setColorOffset) * 3.0 + 2.0;
+    vec2 setColorTexCoordB = vec2(mod(setColorOffsetB, multiFeatureTexSize) / multiFeatureTexSize, floor(setColorOffsetB / multiFeatureTexSize) / (colorTexHeight - 1.));
+    float setColorB = texture(colorTex, setColorTexCoordB).r / 255.;
+
+    setColor = vec3(setColorR, setColorG, setColorB);
+  }
+
+  
+  vec4 sampledColor = (1. - (float(isStaticColorMode) + float(isSetColorMode))) * vec4(COLORMAP_FUNC(clamp(scaledExpressionValue, 0.0, 1.0)).rgb, channelOpacity) + float(isStaticColorMode) * vec4(channelColor.rgb, channelOpacity) + float(isSetColorMode) * vec4(setColor, channelOpacity);
+  // Only return a color if the data is non-zero.
+  
+  return clampedSampledDataAndIsOn * isEdge * sampledColor;
+}
+
+void main() {
+
+  // Get the color and alpha value for each channel.
+  vec3 dat0 = sampleAndGetData(channel0, vTexCoord, channelsFilled[0], channelStrokeWidths[0], channelsVisible[0]);
+  vec3 dat1 = sampleAndGetData(channel1, vTexCoord, channelsFilled[1], channelStrokeWidths[1], channelsVisible[1]);
+  vec3 dat2 = sampleAndGetData(channel2, vTexCoord, channelsFilled[2], channelStrokeWidths[2], channelsVisible[2]);
+  vec3 dat3 = sampleAndGetData(channel3, vTexCoord, channelsFilled[3], channelStrokeWidths[3], channelsVisible[3]);
+  vec3 dat4 = sampleAndGetData(channel4, vTexCoord, channelsFilled[4], channelStrokeWidths[4], channelsVisible[4]);
+  vec3 dat5 = sampleAndGetData(channel5, vTexCoord, channelsFilled[5], channelStrokeWidths[5], channelsVisible[5]);
+  vec3 dat6 = sampleAndGetData(channel6, vTexCoord, channelsFilled[6], channelStrokeWidths[6], channelsVisible[6]);
+  
+  vec4 val0 = dataToColor(dat0, channelIsStaticColorMode[0], color0, channelOpacities[0], valueTexOffsets[0], channelColormapRangeStarts[0], channelColormapRangeEnds[0], channelIsSetColorMode[0], colorTexOffsets[0]);
+  vec4 val1 = dataToColor(dat1, channelIsStaticColorMode[1], color1, channelOpacities[1], valueTexOffsets[1], channelColormapRangeStarts[1], channelColormapRangeEnds[1], channelIsSetColorMode[1], colorTexOffsets[1]);
+  vec4 val2 = dataToColor(dat2, channelIsStaticColorMode[2], color2, channelOpacities[2], valueTexOffsets[2], channelColormapRangeStarts[2], channelColormapRangeEnds[2], channelIsSetColorMode[2], colorTexOffsets[2]);
+  vec4 val3 = dataToColor(dat3, channelIsStaticColorMode[3], color3, channelOpacities[3], valueTexOffsets[3], channelColormapRangeStarts[3], channelColormapRangeEnds[3], channelIsSetColorMode[3], colorTexOffsets[3]);
+  vec4 val4 = dataToColor(dat4, channelIsStaticColorMode[4], color4, channelOpacities[4], valueTexOffsets[4], channelColormapRangeStarts[4], channelColormapRangeEnds[4], channelIsSetColorMode[4], colorTexOffsets[4]);
+  vec4 val5 = dataToColor(dat5, channelIsStaticColorMode[5], color5, channelOpacities[5], valueTexOffsets[5], channelColormapRangeStarts[5], channelColormapRangeEnds[5], channelIsSetColorMode[5], colorTexOffsets[5]);
+  vec4 val6 = dataToColor(dat6, channelIsStaticColorMode[6], color6, channelOpacities[6], valueTexOffsets[6], channelColormapRangeStarts[6], channelColormapRangeEnds[6], channelIsSetColorMode[6], colorTexOffsets[6]);
+  
+  // If all of the channels are "empty", then discard this pixel so that it is not considered during picking.
+  float emptyDat = 0.;
+  if(dat0.x == emptyDat && dat1.x == emptyDat && dat2.x == emptyDat && dat3.x == emptyDat && dat4.x == emptyDat && dat5.x == emptyDat && dat6.x == emptyDat) {
+    discard;
+  }
+  
+  // If the next channel color and the currently stored color (gl_FragColor) are identical,
+  // or the next channel color is transparent black,
+  // just use the currently stored color. Repeat this for all channels.
+
+  // Mix colors where necessary, using the alpha value of the next channel as the weight.
+  // Use the maximum alpha value as the resulting alpha value.
+  gl_FragColor = val0;
+  gl_FragColor = (val1 == gl_FragColor || val1 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val1, val1.a).rgb, max(gl_FragColor.a, val1.a));
+  gl_FragColor = (val2 == gl_FragColor || val2 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val2, val2.a).rgb, max(gl_FragColor.a, val2.a));
+  gl_FragColor = (val3 == gl_FragColor || val3 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val3, val3.a).rgb, max(gl_FragColor.a, val3.a));
+  gl_FragColor = (val4 == gl_FragColor || val4 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val4, val4.a).rgb, max(gl_FragColor.a, val4.a));
+  gl_FragColor = (val5 == gl_FragColor || val5 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val5, val5.a).rgb, max(gl_FragColor.a, val5.a));
+  gl_FragColor = (val6 == gl_FragColor || val6 == vec4(0.)) ? gl_FragColor : vec4(mix(gl_FragColor, val6, val6.a).rgb, max(gl_FragColor.a, val6.a));
+
+  
+
+  // TODO: multiply the resulting channel-level opacity value by the layer-level opacity value.
+
+  geometry.uv = vTexCoord;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;
+function normalize$1(arr) {
+  const [min, max] = extent$1(arr);
+  const ratio = 255 / (max - min);
+  const data = new Uint8Array(arr.map((i2) => Math.floor((i2 - min) * ratio)));
+  return data;
+}
+function multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, texSize) {
+  let totalValuesLength = 0;
+  let totalColorsLength = 0;
+  channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
+    var _a2, _b, _c, _d, _e;
+    if (isSetColorMode) {
+      totalValuesLength += ((_b = (_a2 = setColorValues[channelIndex]) == null ? void 0 : _a2.obsIndex) == null ? void 0 : _b.length) || 0;
+      totalColorsLength += (((_d = (_c = setColorValues[channelIndex]) == null ? void 0 : _c.setColors) == null ? void 0 : _d.length) || 0) * 3;
+    } else {
+      totalValuesLength += ((_e = multiFeatureValues[channelIndex]) == null ? void 0 : _e.length) || 0;
+    }
+  });
+  const valueTexHeight = Math.max(2, Math.ceil(totalValuesLength / texSize));
+  const colorTexHeight = Math.max(2, Math.ceil(totalColorsLength / texSize));
+  if (valueTexHeight > texSize) {
+    console.error("Error: length of concatenated quantitative feature values larger than maximum texture size");
+  }
+  if (colorTexHeight > texSize) {
+    console.error("Error: length of concatenated quantitative feature values larger than maximum texture size");
+  }
+  const totalData = new Uint8Array(texSize * valueTexHeight);
+  const totalColors = new Uint8Array(texSize * colorTexHeight);
+  const indicesOffsets = [];
+  const colorsOffsets = [];
+  let indexOffset = 0;
+  let colorOffset = 0;
+  channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
+    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;
+        }
+        for (let i2 = 0; i2 < setColors.length; i2++) {
+          const { color: [r2, g2, b] } = setColors[i2];
+          totalColors[(colorOffset + i2) * 3 + 0] = r2;
+          totalColors[(colorOffset + i2) * 3 + 1] = g2;
+          totalColors[(colorOffset + i2) * 3 + 2] = b;
+        }
+      }
+      indicesOffsets.push(indexOffset);
+      colorsOffsets.push(colorOffset);
+      indexOffset += (obsIndex == null ? void 0 : obsIndex.length) || 0;
+      colorOffset += (setColors == null ? void 0 : setColors.length) || 0;
+    } else {
+      const featureArr = multiFeatureValues[channelIndex];
+      totalData.set(normalize$1(featureArr), indexOffset);
+      indicesOffsets.push(indexOffset);
+      indexOffset += featureArr.length;
+      colorsOffsets.push(colorOffset);
+    }
+  });
+  return [
+    totalData,
+    valueTexHeight,
+    indicesOffsets,
+    totalColors,
+    colorTexHeight,
+    colorsOffsets
+  ];
+}
+const MAX_CHANNELS = 7;
+const MULTI_FEATURE_TEX_SIZE = 2048;
+function padWithDefault(arr, defaultValue2, padWidth) {
+  const newArr = [...arr];
+  for (let i2 = 0; i2 < padWidth; i2 += 1) {
+    newArr.push(defaultValue2);
+  }
+  return newArr;
+}
+function getColor(arr) {
+  return arr ? arr.map((v) => v / 255) : [0, 0, 0];
+}
+const defaultProps$1 = {
+  channelStrokeWidths: { type: "array", value: null, compare: true },
+  channelsFilled: { type: "array", value: null, compare: true },
+  channelOpacities: { type: "array", value: null, compare: true },
+  channelColors: { type: "array", value: null, compare: true },
+  hoveredCell: { type: "number", value: null, compare: true },
+  colormap: { type: "string", value: GLSL_COLORMAP_DEFAULT, compare: true },
+  expressionData: { type: "object", value: null, compare: true },
+  multiFeatureValues: { 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 },
+  channelIsStaticColorMode: { type: "array", value: null, compare: true },
+  channelIsSetColorMode: { type: "array", value: null, compare: true }
+};
+class BitmaskLayer2 extends XRLayer {
+  // eslint-disable-next-line class-methods-use-this
+  getShaders() {
+    const { colormap } = this.props;
+    return {
+      fs,
+      vs,
+      modules: [project32, picking],
+      defines: {
+        [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap) ? colormap : GLSL_COLORMAP_DEFAULT
+      }
+    };
+  }
+  /**
+   * Override the parent loadChannelTextures to enable
+   * up to eight channels (rather than six).
+   * Reference: https://github.com/hms-dbmi/viv/blob/v0.13.3/packages/layers/src/xr-layer/xr-layer.js#L316
+  */
+  loadChannelTextures(channelData) {
+    const textures = {
+      channel0: null,
+      channel1: null,
+      channel2: null,
+      channel3: null,
+      channel4: null,
+      channel5: null,
+      channel6: null
+    };
+    if (this.state.textures) {
+      Object.values(this.state.textures).forEach((tex) => tex && tex.delete());
+    }
+    if (channelData && Object.keys(channelData).length > 0 && channelData.data) {
+      channelData.data.forEach((d, i2) => {
+        textures[`channel${i2}`] = this.dataToTexture(d, channelData.width, channelData.height);
+      }, this);
+      this.setState({ textures });
+    }
+  }
+  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);
+      this.setState({
+        valueTex,
+        colorTex,
+        valueTexOffsets,
+        colorTexOffsets,
+        valueTexHeight,
+        colorTexHeight
+      });
+    }
+    if (props2.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      if (this.state.model) {
+        this.state.model.delete();
+      }
+      this.setState({ model: this._getModel(gl) });
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+  draw(opts2) {
+    const { uniforms } = opts2;
+    const {
+      channelStrokeWidths,
+      channelsFilled,
+      channelOpacities,
+      channelColors,
+      channelsVisible,
+      // TODO: use `channelFeatureValueColormaps` in shader,
+      // figure out how to call multiple GLSL colormap functions
+      channelFeatureValueColormaps,
+      channelFeatureValueColormapRanges,
+      channelIsStaticColorMode,
+      channelIsSetColorMode,
+      hoveredCell,
+      colorScaleLo,
+      colorScaleHi,
+      isExpressionMode,
+      zoom,
+      minZoom,
+      maxZoom,
+      zoomOffset
+      // TODO: figure out if this needs to be used or not
+    } = this.props;
+    const {
+      textures,
+      model,
+      // Expression and set index (and colors) textures with offsets
+      valueTex,
+      colorTex,
+      valueTexOffsets,
+      colorTexOffsets,
+      valueTexHeight,
+      colorTexHeight
+    } = this.state;
+    if (textures && model) {
+      const scaleFactor = 1 / 2 ** (maxZoom - zoom);
+      const colors = fromEntries(range$5(MAX_CHANNELS).map((i2) => [`color${i2}`, getColor(channelColors[i2])]));
+      model.setUniforms(Object.assign({}, uniforms, {
+        ...colors,
+        // Bitmask image channel data textures
+        ...textures,
+        multiFeatureTexSize: MULTI_FEATURE_TEX_SIZE,
+        // Expression textures with offsets
+        valueTex,
+        valueTexOffsets: padWithDefault(valueTexOffsets, 0, MAX_CHANNELS - valueTexOffsets.length),
+        valueTexHeight,
+        // Set indices and colors textures with offsets
+        colorTex,
+        colorTexOffsets: padWithDefault(colorTexOffsets, 0, MAX_CHANNELS - colorTexOffsets.length),
+        colorTexHeight,
+        // Visualization properties
+        channelsFilled: padWithDefault(
+          channelsFilled,
+          true,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelsFilled.length
+        ),
+        channelOpacities: padWithDefault(
+          channelOpacities,
+          0,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelOpacities.length
+        ),
+        channelStrokeWidths: padWithDefault(
+          channelStrokeWidths,
+          1,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelStrokeWidths.length
+        ),
+        channelColormapRangeStarts: padWithDefault(
+          channelFeatureValueColormapRanges.map((r2) => (r2 == null ? void 0 : r2[0]) || 0),
+          0,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelFeatureValueColormapRanges.length
+        ),
+        channelColormapRangeEnds: padWithDefault(
+          channelFeatureValueColormapRanges.map((r2) => (r2 == null ? void 0 : r2[1]) || 1),
+          1,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelFeatureValueColormapRanges.length
+        ),
+        channelIsStaticColorMode: padWithDefault(
+          channelIsStaticColorMode,
+          true,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelIsStaticColorMode.length
+        ),
+        channelIsSetColorMode: padWithDefault(
+          channelIsSetColorMode,
+          false,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelIsSetColorMode.length
+        ),
+        hovered: hoveredCell || 0,
+        channelsVisible: padWithDefault(
+          channelsVisible,
+          false,
+          // There are six texture entries on the shaders
+          MAX_CHANNELS - channelsVisible.length
+        ),
+        // uColorScaleRange: [colorScaleLo, colorScaleHi],
+        // uIsExpressionMode: isExpressionMode,
+        // uIsOutlined: false,
+        scaleFactor
+      })).draw();
+    }
+  }
+  /**
+   * This function creates textures from the data
+   */
+  dataToTexture(data, width, height) {
+    const isWebGL2On = isWebGL2$1(this.context.gl);
+    return new Texture2D(this.context.gl, {
+      width,
+      height,
+      // Only use Float32 so we don't have to write two shaders
+      data: new Float32Array(data),
+      // we don't want or need mimaps
+      mipmaps: false,
+      parameters: {
+        // NEAREST for integer data
+        [GL$1.TEXTURE_MIN_FILTER]: GL$1.NEAREST,
+        [GL$1.TEXTURE_MAG_FILTER]: GL$1.NEAREST,
+        // CLAMP_TO_EDGE to remove tile artifacts
+        [GL$1.TEXTURE_WRAP_S]: GL$1.CLAMP_TO_EDGE,
+        [GL$1.TEXTURE_WRAP_T]: GL$1.CLAMP_TO_EDGE
+      },
+      format: isWebGL2On ? GL$1.R32F : GL$1.LUMINANCE,
+      dataFormat: isWebGL2On ? GL$1.RED : GL$1.LUMINANCE,
+      type: GL$1.FLOAT
+    });
+  }
+  multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode) {
+    const isWebGL2On = isWebGL2$1(this.context.gl);
+    const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets] = multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, MULTI_FEATURE_TEX_SIZE);
+    return [
+      // Color indices texture
+      new Texture2D(this.context.gl, {
+        width: MULTI_FEATURE_TEX_SIZE,
+        height: valueTexHeight,
+        // Only use Float32 so we don't have to write two shaders
+        data: new Float32Array(totalData),
+        // we don't want or need mimaps
+        mipmaps: false,
+        parameters: {
+          // NEAREST for integer data
+          [GL$1.TEXTURE_MIN_FILTER]: GL$1.NEAREST,
+          [GL$1.TEXTURE_MAG_FILTER]: GL$1.NEAREST,
+          // CLAMP_TO_EDGE to remove tile artifacts
+          [GL$1.TEXTURE_WRAP_S]: GL$1.CLAMP_TO_EDGE,
+          [GL$1.TEXTURE_WRAP_T]: GL$1.CLAMP_TO_EDGE
+        },
+        format: isWebGL2On ? GL$1.R32F : GL$1.LUMINANCE,
+        dataFormat: isWebGL2On ? GL$1.RED : GL$1.LUMINANCE,
+        type: GL$1.FLOAT
+      }),
+      // Colors texture
+      new Texture2D(this.context.gl, {
+        width: MULTI_FEATURE_TEX_SIZE,
+        height: colorTexHeight,
+        // Only use Float32 so we don't have to write two shaders
+        data: new Float32Array(totalColors),
+        // we don't want or need mimaps
+        mipmaps: false,
+        parameters: {
+          // NEAREST for integer data
+          [GL$1.TEXTURE_MIN_FILTER]: GL$1.NEAREST,
+          [GL$1.TEXTURE_MAG_FILTER]: GL$1.NEAREST,
+          // CLAMP_TO_EDGE to remove tile artifacts
+          [GL$1.TEXTURE_WRAP_S]: GL$1.CLAMP_TO_EDGE,
+          [GL$1.TEXTURE_WRAP_T]: GL$1.CLAMP_TO_EDGE
+        },
+        format: isWebGL2On ? GL$1.R32F : GL$1.LUMINANCE,
+        dataFormat: isWebGL2On ? GL$1.RED : GL$1.LUMINANCE,
+        type: GL$1.FLOAT
+      }),
+      // Offsets
+      indicesOffsets,
+      colorsOffsets,
+      // Texture heights
+      valueTexHeight,
+      colorTexHeight
+    ];
+  }
+}
+BitmaskLayer2.layerName = "BitmaskLayer";
+BitmaskLayer2.defaultProps = defaultProps$1;
 function r(e3) {
   var t2, f2, n2 = "";
   if ("string" == typeof e3 || "number" == typeof e3)
@@ -141794,8 +142546,8 @@ class AbstractSpatialOrScatterplot extends PureComponent {
    * @param {object} params.viewState The next deck.gl viewState.
    */
   onViewStateChange({ viewState: nextViewState }) {
-    const { setViewState, viewState, layers, spatialAxisFixed } = this.props;
-    const use3d = layers == null ? void 0 : layers.some((l2) => l2.use3d);
+    const { setViewState, viewState, spatialAxisFixed } = this.props;
+    const use3d = this.use3d();
     setViewState({
       ...nextViewState,
       // If the axis is fixed, just use the current target in state i.e don't change target.
@@ -141843,6 +142595,8 @@ class AbstractSpatialOrScatterplot extends PureComponent {
   getLayers() {
     return [];
   }
+  // TODO: remove this method and use the layer-level onHover instead.
+  // (e.g., see delegateHover in spatial-beta/SpatialSubscriber.js).
   // eslint-disable-next-line consistent-return
   onHover(info) {
     const { coordinate, sourceLayer: layer, tile } = info;
@@ -141963,7 +142717,7 @@ class AbstractSpatialOrScatterplot extends PureComponent {
    */
   render() {
     var _a2, _b, _c, _d;
-    const { deckRef, viewState, uuid, hideTools } = this.props;
+    const { deckRef, viewState, uuid, hideTools, orbitAxis } = this.props;
     const { gl, tool } = this.state;
     const layers = this.getLayers();
     const use3d = this.use3d();
@@ -141974,7 +142728,7 @@ class AbstractSpatialOrScatterplot extends PureComponent {
       pan: showPanTool && !hideTools,
       selectLasso: showCellSelectionTools && !hideTools
     }, recenterOnClick: this.recenter }), jsxRuntimeExports.jsx(DeckGL$1, { id: `deckgl-overlay-${uuid}`, ref: deckRef, views: [
-      use3d ? new OrbitView({ id: "orbit", controller: true, orbitAxis: "Y" }) : new OrthographicView({
+      use3d ? new OrbitView({ id: "orbit", controller: true, orbitAxis }) : new OrthographicView({
         id: "ortho"
       })
     ], layers: gl && viewState.target.slice(0, 2).every((i2) => typeof i2 === "number") ? layers : [], glOptions: DEFAULT_GL_OPTIONS, onWebGLInitialized: this.onWebGLInitialized, onViewStateChange: this.onViewStateChange, viewState, useDevicePixels, controller: tool ? { dragPan: false } : true, getCursor: tool ? getCursorWithTool : getCursor, onHover: this.onHover, children: this.onInitializeViewInfo })] });
@@ -142276,20 +143030,29 @@ class Scatterplot extends AbstractSpatialOrScatterplot {
     }
     return result;
   }
-  createSelectionLayers() {
+  createSelectionLayer() {
     const { obsEmbeddingIndex: obsIndex, obsEmbedding, viewState, setCellSelection } = this.props;
     const { tool } = this.state;
     const { cellsQuadTree } = this;
     const flipYTooltip = true;
     const getCellCoords = makeDefaultGetObsCoords(obsEmbedding);
-    return getSelectionLayers(tool, viewState.zoom, CELLS_LAYER_ID, getCellCoords, obsIndex, setCellSelection, cellsQuadTree, flipYTooltip);
+    return getSelectionLayer(tool, viewState.zoom, CELLS_LAYER_ID, [
+      {
+        getObsCoords: getCellCoords,
+        obsIndex,
+        obsQuadTree: cellsQuadTree,
+        onSelect: (obsIds) => {
+          setCellSelection(obsIds);
+        }
+      }
+    ], flipYTooltip);
   }
   getLayers() {
     const { cellsLayer, cellSetsLayers } = this;
     return [
       cellsLayer,
       ...cellSetsLayers,
-      ...this.createSelectionLayers()
+      this.createSelectionLayer()
     ];
   }
   onUpdateCellsData() {
@@ -144444,14 +145207,12 @@ function getXlinkHref(cmap) {
 }
 const useStyles = makeStyles(() => ({
   legend: {
-    position: "absolute",
     top: "2px",
     right: "2px",
     zIndex: "100",
     fontSize: "10px !important",
-    display: "flex",
     flexDirection: "column",
-    backgroundColor: "rgba(215, 215, 215, 0.2)",
+    backgroundColor: "rgba(215, 215, 215, 0.7)",
     borderRadius: "4px",
     padding: "2px",
     lineHeight: "10px !important",
@@ -144460,26 +145221,55 @@ const useStyles = makeStyles(() => ({
       left: 0,
       position: "relative"
     }
+  },
+  legendAbsolute: {
+    position: "absolute",
+    display: "inline-block"
+  },
+  legendRelative: {
+    position: "relative",
+    marginBottom: "2px",
+    display: "block"
+  },
+  legendHighContrast: {
+    backgroundColor: "rgba(215, 215, 215, 0.7)"
+  },
+  legendLowContrast: {
+    backgroundColor: "rgba(215, 215, 215, 0.2)"
+  },
+  legendInvisible: {
+    display: "none"
   }
 }));
 const titleHeight = 10;
 const rectHeight = 8;
+const rectMarginY = 2;
+const rectMarginX = 2;
 function Legend(props2) {
-  const { visible: visibleProp, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, extent: extent2, width = 100, height = 36, theme } = props2;
+  const { visible: visibleProp, positionRelative = false, highContrast = false, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, spatialChannelColor, spatialLayerColor, obsSetSelection, obsSetColor, extent: extent2, width = 100, height = 36, theme, showObsLabel = false } = props2;
   const svgRef = useRef();
   const classes = useStyles();
   const isDarkTheme = theme === "dark";
-  const visible = visibleProp && (!considerSelections || obsColorEncoding === "geneSelection" && featureSelection && Array.isArray(featureSelection) && featureSelection.length === 1);
+  const isStaticColor = obsColorEncoding === "spatialChannelColor" || obsColorEncoding === "spatialLayerColor";
+  const isSetColor = obsColorEncoding === "cellSetSelection";
+  const layerColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme);
+  const channelColor = Array.isArray(spatialChannelColor) && spatialChannelColor.length === 3 ? spatialChannelColor : getDefaultColor(theme);
+  const staticColor = obsColorEncoding === "spatialChannelColor" ? channelColor : layerColor;
+  const visible = visibleProp && (!considerSelections || obsColorEncoding === "geneSelection" && featureSelection && Array.isArray(featureSelection) && featureSelection.length === 1 || isSetColor && (obsSetSelection == null ? void 0 : obsSetSelection.length) > 0 && (obsSetColor == null ? void 0 : obsSetColor.length) > 0 || isStaticColor);
+  const levelZeroNames = useMemo(() => Array.from(new Set((obsSetSelection == null ? void 0 : obsSetSelection.map((setPath) => setPath[0])) || [])), [obsSetSelection]);
+  const dynamicHeight = isSetColor ? levelZeroNames.length * titleHeight + (obsSetSelection == null ? void 0 : obsSetSelection.length) * (rectHeight + rectMarginY) : height;
   useEffect(() => {
     const domElement = svgRef.current;
-    const foregroundColor = isDarkTheme ? "white" : "black";
+    const foregroundColor = highContrast ? "black" : isDarkTheme ? "white" : "black";
     const svg = select(domElement);
     svg.selectAll("g").remove();
-    svg.attr("width", width).attr("height", height);
-    const g2 = svg.append("g").attr("width", width).attr("height", height);
-    const xlinkHref = getXlinkHref(featureValueColormap);
+    svg.attr("width", width).attr("height", dynamicHeight);
+    const g2 = svg.append("g").attr("width", width).attr("height", dynamicHeight);
     if (!considerSelections || obsColorEncoding === "geneSelection") {
-      g2.append("image").attr("x", 0).attr("y", titleHeight).attr("width", width).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref);
+      if (featureValueColormap) {
+        const xlinkHref = getXlinkHref(featureValueColormap);
+        g2.append("image").attr("x", 0).attr("y", titleHeight).attr("width", width).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref);
+      }
       const [xMin, xMax] = extent2 || [0, 1];
       const [rMin, rMax] = featureValueColormapRange;
       const scaledDataExtent = [
@@ -144492,9 +145282,42 @@ function Legend(props2) {
       axisTicks.selectAll("text").style("fill", foregroundColor);
       axisTicks.selectAll("text").attr("text-anchor", (d, i2) => i2 === 0 ? "start" : "end");
     }
-    const featureLabel = featureSelection && featureSelection.length >= 1 ? (featureLabelsMap == null ? void 0 : featureLabelsMap.get(featureSelection[0])) || featureSelection[0] : null;
-    const legendLabel = considerSelections ? featureLabel || capitalize$1(featureValueType) : capitalize$1(featureValueType);
-    g2.append("text").attr("text-anchor", "end").attr("dominant-baseline", "hanging").attr("x", width).attr("y", 0).text(legendLabel).style("font-size", "10px").style("fill", foregroundColor);
+    if (isStaticColor) {
+      g2.append("rect").attr("x", 0).attr("y", titleHeight).attr("width", width).attr("height", rectHeight).attr("fill", `rgb(${staticColor[0]},${staticColor[1]},${staticColor[2]})`);
+    }
+    if (isSetColor && obsSetSelection && obsSetColor) {
+      const obsSetSelectionByLevelZero = {};
+      obsSetSelection.forEach((setPath) => {
+        const levelZeroName = setPath[0];
+        if (!obsSetSelectionByLevelZero[levelZeroName]) {
+          obsSetSelectionByLevelZero[levelZeroName] = [];
+        }
+        obsSetSelectionByLevelZero[levelZeroName].push(setPath);
+      });
+      let y2 = 0;
+      Object.entries(obsSetSelectionByLevelZero).forEach(([levelZeroName, setPaths]) => {
+        g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", 0).attr("y", y2).text(levelZeroName).style("font-size", "9px").style("fill", foregroundColor);
+        y2 += titleHeight;
+        setPaths.forEach((setPath) => {
+          const setColor = obsSetColor.find((d) => isEqual$1(d.path, setPath)).color;
+          g2.append("rect").attr("x", 0).attr("y", y2).attr("width", rectHeight).attr("height", rectHeight).attr("fill", `rgb(${setColor[0]},${setColor[1]},${setColor[2]})`);
+          g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", rectHeight + rectMarginX).attr("y", y2).text(setPath.at(-1)).style("font-size", "9px").style("fill", foregroundColor);
+          y2 += rectHeight + rectMarginY;
+        });
+      });
+    }
+    const featureSelectionLabel = featureSelection && featureSelection.length >= 1 && !isStaticColor ? (featureLabelsMap == null ? void 0 : featureLabelsMap.get(featureSelection[0])) || featureSelection[0] : null;
+    const obsLabel = capitalize$1(obsType);
+    const featureLabel = considerSelections ? featureSelectionLabel || capitalize$1(featureValueType) : capitalize$1(featureValueType);
+    const mainLabel = showObsLabel ? obsLabel : featureLabel;
+    const subLabel = showObsLabel ? featureLabel : null;
+    const hasSubLabel = subLabel !== null;
+    if (!isSetColor) {
+      g2.append("text").attr("text-anchor", hasSubLabel ? "start" : "end").attr("dominant-baseline", "hanging").attr("x", hasSubLabel ? 0 : width).attr("y", 0).text(mainLabel).style("font-size", "10px").style("fill", foregroundColor);
+    }
+    if (hasSubLabel) {
+      g2.append("text").attr("text-anchor", "end").attr("dominant-baseline", "hanging").attr("x", width).attr("y", titleHeight).text(subLabel).style("font-size", "9px").style("fill", foregroundColor);
+    }
   }, [
     width,
     height,
@@ -144507,13 +145330,51 @@ function Legend(props2) {
     isDarkTheme,
     featureValueType,
     extent2,
-    featureLabelsMap
+    featureLabelsMap,
+    spatialChannelColor,
+    obsSetColor,
+    obsSetSelection,
+    isSetColor
   ]);
-  return jsxRuntimeExports.jsx("div", { className: classes.legend, style: { display: visible ? "inline-block" : "none" }, children: jsxRuntimeExports.jsx("svg", { ref: svgRef, style: {
+  return jsxRuntimeExports.jsx("div", { className: clsx(classes.legend, {
+    [classes.legendRelative]: positionRelative,
+    [classes.legendAbsolute]: !positionRelative,
+    [classes.legendHighContrast]: highContrast,
+    [classes.legendLowContrast]: !highContrast,
+    [classes.legendInvisible]: !visible
+  }), children: jsxRuntimeExports.jsx("svg", { ref: svgRef, style: {
     width: `${width}px`,
-    height: `${height}px`
+    height: `${dynamicHeight}px`
   } }) });
 }
+makeStyles(() => ({
+  multiLegend: {
+    position: "absolute",
+    top: "0px",
+    right: "0px"
+  }
+}));
+makeStyles(() => ({
+  channelNamesLegendContainer: {
+    position: "absolute",
+    bottom: "0px",
+    left: "0px",
+    paddingLeft: "10px",
+    paddingBottom: "10px"
+  },
+  channelNamesLegendLayer: {
+    display: "flex"
+  },
+  channelNamesRow: {
+    flexDirection: "column"
+  },
+  channelNamesCol: {
+    flexDirection: "row"
+  },
+  channelNameText: {
+    marginRight: "10px"
+  }
+}));
 function EmbeddingScatterplotSubscriber(props2) {
   const {
     uuid,