@vitessce/all 3.4.10 → 3.4.12

package/dist/{index-f360a30e.js → index-8ed3997f.js}

@@ -10073,6 +10073,7 @@ const CoordinationType$1 = {
   FEATURE_TYPE: "featureType",
   FEATURE_VALUE_TYPE: "featureValueType",
   OBS_LABELS_TYPE: "obsLabelsType",
+  FEATURE_LABELS_TYPE: "featureLabelsType",
   // Other types
   EMBEDDING_TYPE: "embeddingType",
   EMBEDDING_ZOOM: "embeddingZoom",
@@ -10196,6 +10197,23 @@ const DescriptionType = {
   PLAIN: "plain",
   MARKDOWN: "markdown"
 };
+const ViewHelpMapping = {
+  SCATTERPLOT: "The scatterplot displays two-dimensional (pre-computed) dimensionality reduction results (such as from t-SNE or UMAP). Each point on the scatterplot represents an observation (e.g., cell).",
+  HEATMAP: "The heatmap displays an observation-by-feature (e.g., cell-by-gene) matrix, typically with transformed (e.g., normalized or standardized) values.",
+  SPATIAL: "The spatial view displays (potentially layered) spatially-resolved data including RGB or multiplexed images, segmentations of observations (bitmask- or polygon-based), and/or points (e.g., representing FISH transcripts).",
+  DESCRIPTION: "The description view displays additional information about a dataset. When images are included in a dataset, the description view also includes image metadata (if contained in the image files).",
+  STATUS: "The status view displays debugging messages, including app-wide error messages when datasets fail to load or when schemas fail to validate. Details about the entity under the mouse cursor (cell, gene, and/or molecule) are displayed during hover interactions.",
+  LAYER_CONTROLLER: "The spatial layer controller provides an interface for manipulating the visualization layers displayed in the spatial view.",
+  GENOMIC_PROFILES: "The genomic profiles view displays genome browser tracks (using the genomic-profiles data type) containing bar plots, where the genome is along the x-axis and the value at each genome position is encoded with a bar along the y-axis.",
+  GATING: "The gating scatterplot displays expression data for two genes (along the X and Y axes). Users can select two genes, and the scatterplot is dynamically generated using observation-by-feature matrix data. Gating can then be performed by using the lasso or box select tools.",
+  FEATURE_LIST: "The feature list controller displays an interactive list of features (e.g., genes).",
+  OBS_SETS: "The observation sets controller displays an interactive list of (potentially hierarchical) observation sets (e.g., cell clusters or cell type annotations).",
+  OBS_SET_SIZES: "The observation set sizes view displays a bar plot with the currently-selected observation sets (e.g., cell types) on the x-axis and bars representing their size (e.g., number of cells) on the y-axis.",
+  OBS_SET_FEATURE_VALUE_DISTRIBUTION: "The observation set feature value distribution view displays a violin plot with values (e.g., expression values) per set (e.g., cell type) for the selected feature (e.g., gene).",
+  FEATURE_VALUE_HISTOGRAM: "The feature value histogram displays the distribution of values (e.g., expression) for the selected feature (e.g., gene).",
+  DOT_PLOT: "The dot plot displays summary information about expression of the selected features (e.g., genes) for each selected observation set (e.g., cell type).",
+  FEATURE_BAR_PLOT: "The feature bar plot displays one bar per observation (e.g., cell) along the x-axis, where the value of a selected feature (e.g., gene) is encoded along the y-axis."
+};
 const ALT_ZARR_STORE_TYPES = {
   [FileType$1.OBS_FEATURE_MATRIX_ANNDATA_ZARR]: {
     zip: FileType$1.OBS_FEATURE_MATRIX_ANNDATA_ZARR_ZIP,
@@ -11024,7 +11042,7 @@ const obsFeatureMatrixSpatialdataSchema = annDataObsFeatureMatrix.extend({
 const obsSetsSpatialdataSchema = z.object({
   region: z.string().describe("The name of a region to use to filter instances (i.e., rows) in the table").optional(),
   tablePath: z.string().optional().describe("The path to a table which contains the index for the set values."),
-  obsSets: annDataObsSets
+  obsSets: annDataObsSetsArr
 });
 const meshGlbSchema = z.object({
   targetX: z.number(),
@@ -16040,7 +16058,7 @@ function getStylesCreator(stylesOrCreator) {
     }
   }
   return {
-    create: function create6(theme, name2) {
+    create: function create5(theme, name2) {
       var styles35;
       try {
         styles35 = themingEnabled ? stylesOrCreator(theme) : stylesOrCreator;
@@ -25237,7 +25255,7 @@ var classCallCheck$1 = function(instance, Constructor) {
   }
 };
 var createClass$1 = function() {
-  function defineProperties4(target2, props) {
+  function defineProperties3(target2, props) {
     for (var i2 = 0; i2 < props.length; i2++) {
       var descriptor2 = props[i2];
       descriptor2.enumerable = descriptor2.enumerable || false;
@@ -25249,9 +25267,9 @@ var createClass$1 = function() {
   }
   return function(Constructor, protoProps, staticProps) {
     if (protoProps)
-      defineProperties4(Constructor.prototype, protoProps);
+      defineProperties3(Constructor.prototype, protoProps);
     if (staticProps)
-      defineProperties4(Constructor, staticProps);
+      defineProperties3(Constructor, staticProps);
     return Constructor;
   };
 }();
@@ -31580,14 +31598,14 @@ function toJsxRuntime(tree2, options) {
     throw new TypeError("Expected `Fragment` in options");
   }
   const filePath = options.filePath || void 0;
-  let create6;
+  let create5;
   if (options.development) {
     if (typeof options.jsxDEV !== "function") {
       throw new TypeError(
         "Expected `jsxDEV` in options when `development: true`"
       );
     }
-    create6 = developmentCreate(filePath, options.jsxDEV);
+    create5 = developmentCreate(filePath, options.jsxDEV);
   } else {
     if (typeof options.jsx !== "function") {
       throw new TypeError("Expected `jsx` in production options");
@@ -31595,13 +31613,13 @@ function toJsxRuntime(tree2, options) {
     if (typeof options.jsxs !== "function") {
       throw new TypeError("Expected `jsxs` in production options");
     }
-    create6 = productionCreate(filePath, options.jsx, options.jsxs);
+    create5 = productionCreate(filePath, options.jsx, options.jsxs);
   }
   const state = {
     Fragment: options.Fragment,
     ancestors: [],
     components: options.components || {},
-    create: create6,
+    create: create5,
     elementAttributeNameCase: options.elementAttributeNameCase || "react",
     evaluater: options.createEvaluater ? options.createEvaluater() : void 0,
     filePath,
@@ -31725,16 +31743,16 @@ function addChildren(props, children2) {
   }
 }
 function productionCreate(_, jsx, jsxs) {
-  return create6;
-  function create6(_2, type2, props, key2) {
+  return create5;
+  function create5(_2, type2, props, key2) {
     const isStaticChildren = Array.isArray(props.children);
     const fn = isStaticChildren ? jsxs : jsx;
     return key2 ? fn(type2, props, key2) : fn(type2, props);
   }
 }
 function developmentCreate(filePath, jsxDEV) {
-  return create6;
-  function create6(node2, type2, props, key2) {
+  return create5;
+  function create5(node2, type2, props, key2) {
     const isStaticChildren = Array.isArray(props.children);
     const point2 = pointStart(node2);
     return jsxDEV(
@@ -35877,14 +35895,14 @@ function parse$d(options) {
     defined: [],
     lazy: {},
     constructs: constructs2,
-    content: create6(content$2),
-    document: create6(document$2),
-    flow: create6(flow$1),
-    string: create6(string$4),
-    text: create6(text$5)
+    content: create5(content$2),
+    document: create5(document$2),
+    flow: create5(flow$1),
+    string: create5(string$4),
+    text: create5(text$5)
   };
   return parser2;
-  function create6(initial) {
+  function create5(initial) {
     return creator2;
     function creator2(from) {
       return createTokenizer(parser2, initial, from);
@@ -36252,10 +36270,10 @@ function compiler(options) {
     events2[start][1]._spread = listSpread;
     return length2;
   }
-  function opener(create6, and) {
+  function opener(create5, and) {
     return open2;
     function open2(token) {
-      enter.call(this, create6(token), token);
+      enter.call(this, create5(token), token);
       if (and)
         and.call(this, token);
     }
@@ -39592,7 +39610,7 @@ function Description(props) {
   return jsxRuntimeExports.jsxs("div", { className: classes.description, children: [descriptionType && descriptionType === DescriptionType.MARKDOWN ? jsxRuntimeExports.jsx(Markdown, { children: description2 }) : 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(props) {
-  const { coordinationScopes, description: descriptionOverride, descriptionType, removeGridComponent, theme, title: title2 = "Description", closeButtonVisible } = props;
+  const { coordinationScopes, description: descriptionOverride, descriptionType, removeGridComponent, theme, title: title2 = "Description", closeButtonVisible, helpText = ViewHelpMapping.DESCRIPTION } = props;
   const loaders = useLoaders();
   const [{ dataset, spatialImageLayer: rasterLayers }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.DESCRIPTION], coordinationScopes);
   const [description2] = useDescription(loaders, dataset);
@@ -39614,7 +39632,7 @@ function DescriptionSubscriber(props) {
     }
     return result;
   }, [rasterLayers, imageLayerMeta, imageLayerLoaders]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, removeGridComponent, isScroll: true, theme, isReady, children: jsxRuntimeExports.jsx(Description, { description: descriptionOverride || description2, descriptionType, metadata: metadata2 }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, removeGridComponent, isScroll: true, theme, isReady, helpText, children: jsxRuntimeExports.jsx(Description, { description: descriptionOverride || description2, descriptionType, metadata: metadata2 }) });
 }
 var earthRadius = 63710088e-1;
 var factors = {
@@ -49056,10 +49074,10 @@ var _propertyDesc = function(bitmap, value2) {
     value: value2
   };
 };
-var dP$2 = require_objectDp();
+var dP$1 = require_objectDp();
 var createDesc$2 = _propertyDesc;
 var _hide = require_descriptors() ? function(object2, key2, value2) {
-  return dP$2.f(object2, key2, createDesc$2(1, value2));
+  return dP$1.f(object2, key2, createDesc$2(1, value2));
 } : function(object2, key2, value2) {
   object2[key2] = value2;
   return object2;
@@ -49073,7 +49091,7 @@ var core$3 = _coreExports;
 var ctx = _ctx;
 var hide$2 = _hide;
 var has$a = _has$1;
-var PROTOTYPE$2 = "prototype";
+var PROTOTYPE$1 = "prototype";
 var $export$6 = function(type2, name2, source2) {
   var IS_FORCED = type2 & $export$6.F;
   var IS_GLOBAL = type2 & $export$6.G;
@@ -49082,8 +49100,8 @@ var $export$6 = function(type2, name2, source2) {
   var IS_BIND = type2 & $export$6.B;
   var IS_WRAP = type2 & $export$6.W;
   var exports2 = IS_GLOBAL ? core$3 : core$3[name2] || (core$3[name2] = {});
-  var expProto = exports2[PROTOTYPE$2];
-  var target2 = IS_GLOBAL ? global$5 : IS_STATIC ? global$5[name2] : (global$5[name2] || {})[PROTOTYPE$2];
+  var expProto = exports2[PROTOTYPE$1];
+  var target2 = IS_GLOBAL ? global$5 : IS_STATIC ? global$5[name2] : (global$5[name2] || {})[PROTOTYPE$1];
   var key2, own2, out;
   if (IS_GLOBAL)
     source2 = name2;
@@ -49107,7 +49125,7 @@ var $export$6 = function(type2, name2, source2) {
         }
         return C3.apply(this, arguments);
       };
-      F[PROTOTYPE$2] = C3[PROTOTYPE$2];
+      F[PROTOTYPE$1] = C3[PROTOTYPE$1];
       return F;
     }(out) : IS_PROTO && typeof out == "function" ? ctx(Function.call, out) : out;
     if (IS_PROTO) {
@@ -49212,22 +49230,30 @@ var px$2 = Math.random();
 var _uid = function(key2) {
   return "Symbol(".concat(key2 === void 0 ? "" : key2, ")_", (++id$4 + px$2).toString(36));
 };
-var shared$1 = _sharedExports("keys");
-var uid$3 = _uid;
-var _sharedKey = function(key2) {
-  return shared$1[key2] || (shared$1[key2] = uid$3(key2));
-};
+var _sharedKey;
+var hasRequired_sharedKey;
+function require_sharedKey() {
+  if (hasRequired_sharedKey)
+    return _sharedKey;
+  hasRequired_sharedKey = 1;
+  var shared2 = _sharedExports("keys");
+  var uid2 = _uid;
+  _sharedKey = function(key2) {
+    return shared2[key2] || (shared2[key2] = uid2(key2));
+  };
+  return _sharedKey;
+}
 var has$9 = _has$1;
 var toIObject$4 = _toIobject;
 var arrayIndexOf = _arrayIncludes(false);
-var IE_PROTO$2 = _sharedKey("IE_PROTO");
+var IE_PROTO$1 = require_sharedKey()("IE_PROTO");
 var _objectKeysInternal = function(object2, names) {
   var O = toIObject$4(object2);
   var i2 = 0;
   var result = [];
   var key2;
   for (key2 in O)
-    if (key2 != IE_PROTO$2)
+    if (key2 != IE_PROTO$1)
       has$9(O, key2) && result.push(key2);
   while (names.length > i2)
     if (has$9(O, key2 = names[i2++])) {
@@ -49237,9 +49263,9 @@ var _objectKeysInternal = function(object2, names) {
 };
 var _enumBugKeys = "constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",");
 var $keys$2 = _objectKeysInternal;
-var enumBugKeys$1 = _enumBugKeys;
+var enumBugKeys = _enumBugKeys;
 var _objectKeys$1 = Object.keys || function keys(O) {
-  return $keys$2(O, enumBugKeys$1);
+  return $keys$2(O, enumBugKeys);
 };
 var _objectGops = {};
 _objectGops.f = Object.getOwnPropertySymbols;
@@ -49357,7 +49383,7 @@ function _interopRequireDefault$o(obj) {
   return obj && obj.__esModule ? obj : { default: obj };
 }
 var _default$5 = function() {
-  function defineProperties4(target2, props) {
+  function defineProperties3(target2, props) {
     for (var i2 = 0; i2 < props.length; i2++) {
       var descriptor2 = props[i2];
       descriptor2.enumerable = descriptor2.enumerable || false;
@@ -49369,9 +49395,9 @@ var _default$5 = function() {
   }
   return function(Constructor, protoProps, staticProps) {
     if (protoProps)
-      defineProperties4(Constructor.prototype, protoProps);
+      defineProperties3(Constructor.prototype, protoProps);
     if (staticProps)
-      defineProperties4(Constructor, staticProps);
+      defineProperties3(Constructor, staticProps);
     return Constructor;
   };
 }();
@@ -49392,19 +49418,27 @@ var _stringAt = function(TO_STRING) {
 };
 var _redefine = _hide;
 var _iterators = {};
-var dP$1 = require_objectDp();
-var anObject$2 = _anObject;
-var getKeys$1 = _objectKeys$1;
-var _objectDps = require_descriptors() ? Object.defineProperties : function defineProperties(O, Properties) {
-  anObject$2(O);
-  var keys4 = getKeys$1(Properties);
-  var length2 = keys4.length;
-  var i2 = 0;
-  var P2;
-  while (length2 > i2)
-    dP$1.f(O, P2 = keys4[i2++], Properties[P2]);
-  return O;
-};
+var _objectDps;
+var hasRequired_objectDps;
+function require_objectDps() {
+  if (hasRequired_objectDps)
+    return _objectDps;
+  hasRequired_objectDps = 1;
+  var dP2 = require_objectDp();
+  var anObject2 = _anObject;
+  var getKeys2 = _objectKeys$1;
+  _objectDps = require_descriptors() ? Object.defineProperties : function defineProperties3(O, Properties) {
+    anObject2(O);
+    var keys4 = getKeys2(Properties);
+    var length2 = keys4.length;
+    var i2 = 0;
+    var P2;
+    while (length2 > i2)
+      dP2.f(O, P2 = keys4[i2++], Properties[P2]);
+    return O;
+  };
+  return _objectDps;
+}
 var _html;
 var hasRequired_html;
 function require_html() {
@@ -49415,42 +49449,50 @@ function require_html() {
   _html = document2 && document2.documentElement;
   return _html;
 }
-var anObject$1 = _anObject;
-var dPs = _objectDps;
-var enumBugKeys = _enumBugKeys;
-var IE_PROTO$1 = _sharedKey("IE_PROTO");
-var Empty$2 = function() {
-};
-var PROTOTYPE$1 = "prototype";
-var createDict = function() {
-  var iframe = require_domCreate()("iframe");
-  var i2 = enumBugKeys.length;
-  var lt2 = "<";
-  var gt2 = ">";
-  var iframeDocument;
-  iframe.style.display = "none";
-  require_html().appendChild(iframe);
-  iframe.src = "javascript:";
-  iframeDocument = iframe.contentWindow.document;
-  iframeDocument.open();
-  iframeDocument.write(lt2 + "script" + gt2 + "document.F=Object" + lt2 + "/script" + gt2);
-  iframeDocument.close();
-  createDict = iframeDocument.F;
-  while (i2--)
-    delete createDict[PROTOTYPE$1][enumBugKeys[i2]];
-  return createDict();
-};
-var _objectCreate = Object.create || function create2(O, Properties) {
-  var result;
-  if (O !== null) {
-    Empty$2[PROTOTYPE$1] = anObject$1(O);
-    result = new Empty$2();
-    Empty$2[PROTOTYPE$1] = null;
-    result[IE_PROTO$1] = O;
-  } else
-    result = createDict();
-  return Properties === void 0 ? result : dPs(result, Properties);
-};
+var _objectCreate;
+var hasRequired_objectCreate;
+function require_objectCreate() {
+  if (hasRequired_objectCreate)
+    return _objectCreate;
+  hasRequired_objectCreate = 1;
+  var anObject2 = _anObject;
+  var dPs = require_objectDps();
+  var enumBugKeys2 = _enumBugKeys;
+  var IE_PROTO2 = require_sharedKey()("IE_PROTO");
+  var Empty2 = function() {
+  };
+  var PROTOTYPE2 = "prototype";
+  var createDict = function() {
+    var iframe = require_domCreate()("iframe");
+    var i2 = enumBugKeys2.length;
+    var lt2 = "<";
+    var gt2 = ">";
+    var iframeDocument;
+    iframe.style.display = "none";
+    require_html().appendChild(iframe);
+    iframe.src = "javascript:";
+    iframeDocument = iframe.contentWindow.document;
+    iframeDocument.open();
+    iframeDocument.write(lt2 + "script" + gt2 + "document.F=Object" + lt2 + "/script" + gt2);
+    iframeDocument.close();
+    createDict = iframeDocument.F;
+    while (i2--)
+      delete createDict[PROTOTYPE2][enumBugKeys2[i2]];
+    return createDict();
+  };
+  _objectCreate = Object.create || function create5(O, Properties) {
+    var result;
+    if (O !== null) {
+      Empty2[PROTOTYPE2] = anObject2(O);
+      result = new Empty2();
+      Empty2[PROTOTYPE2] = null;
+      result[IE_PROTO2] = O;
+    } else
+      result = createDict();
+    return Properties === void 0 ? result : dPs(result, Properties);
+  };
+  return _objectCreate;
+}
 var _wks = { exports: {} };
 var store = _sharedExports("wks");
 var uid$2 = _uid;
@@ -49468,7 +49510,7 @@ var _setToStringTag = function(it, tag2, stat) {
   if (it && !has$8(it = stat ? it : it.prototype, TAG))
     def$1(it, TAG, { configurable: true, value: tag2 });
 };
-var create$b = _objectCreate;
+var create$b = require_objectCreate();
 var descriptor = _propertyDesc;
 var setToStringTag$2 = _setToStringTag;
 var IteratorPrototype$2 = {};
@@ -49481,7 +49523,7 @@ var _iterCreate = function(Constructor, NAME2, next3) {
 };
 var has$7 = _has$1;
 var toObject$2 = _toObject;
-var IE_PROTO = _sharedKey("IE_PROTO");
+var IE_PROTO = require_sharedKey()("IE_PROTO");
 var ObjectProto$1 = Object.prototype;
 var _objectGpo = Object.getPrototypeOf || function(O) {
   O = toObject$2(O);
@@ -49644,23 +49686,23 @@ var setMeta = function(it) {
     // weak collections IDs
   } });
 };
-var fastKey = function(it, create6) {
+var fastKey = function(it, create5) {
   if (!isObject$h(it))
     return typeof it == "symbol" ? it : (typeof it == "string" ? "S" : "P") + it;
   if (!has$6(it, META$1)) {
     if (!isExtensible(it))
       return "F";
-    if (!create6)
+    if (!create5)
       return "E";
     setMeta(it);
   }
   return it[META$1].i;
 };
-var getWeak = function(it, create6) {
+var getWeak = function(it, create5) {
   if (!has$6(it, META$1)) {
     if (!isExtensible(it))
       return true;
-    if (!create6)
+    if (!create5)
       return false;
     setMeta(it);
   }
@@ -49769,7 +49811,7 @@ var toObject$1 = _toObject;
 var toIObject = _toIobject;
 var toPrimitive = _toPrimitive;
 var createDesc = _propertyDesc;
-var _create$1 = _objectCreate;
+var _create$1 = require_objectCreate();
 var gOPNExt = _objectGopnExt;
 var $GOPD = _objectGopd;
 var $GOPS = _objectGops;
@@ -49836,7 +49878,7 @@ var $defineProperty$4 = function defineProperty2(it, key2, D2) {
   }
   return dP(it, key2, D2);
 };
-var $defineProperties = function defineProperties2(it, P2) {
+var $defineProperties = function defineProperties(it, P2) {
   anObject(it);
   var keys4 = enumKeys(P2 = toIObject(P2));
   var i2 = 0;
@@ -49846,7 +49888,7 @@ var $defineProperties = function defineProperties2(it, P2) {
     $defineProperty$4(it, key2 = keys4[i2++], P2[key2]);
   return it;
 };
-var $create = function create3(it, P2) {
+var $create = function create2(it, P2) {
   return P2 === void 0 ? _create$1(it) : $defineProperties(_create$1(it), P2);
 };
 var $propertyIsEnumerable = function propertyIsEnumerable(key2) {
@@ -50073,9 +50115,9 @@ $export$1($export$1.S, "Object", { setPrototypeOf: require_setProto().set });
 var setPrototypeOf$2 = _coreExports.Object.setPrototypeOf;
 var setPrototypeOf$1 = { "default": setPrototypeOf$2, __esModule: true };
 var $export = _export;
-$export($export.S, "Object", { create: _objectCreate });
+$export($export.S, "Object", { create: require_objectCreate() });
 var $Object$2 = _coreExports.Object;
-var create$a = function create4(P2, D2) {
+var create$a = function create3(P2, D2) {
   return $Object$2.create(P2, D2);
 };
 var create$9 = { "default": create$a, __esModule: true };
@@ -62171,7 +62213,7 @@ function SetsManager(props) {
 }
 const packageJson = { name: "vitessce" };
 function ObsSetsManagerSubscriber(props) {
-  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride } = props;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride, helpText = ViewHelpMapping.OBS_SETS } = props;
   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);
@@ -62566,7 +62608,7 @@ function ObsSetsManagerSubscriber(props) {
     setWarning,
     theme
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, children: manager });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, children: manager });
 }
 function ascending$7(a2, b2) {
   return a2 < b2 ? -1 : a2 > b2 ? 1 : a2 >= b2 ? 0 : NaN;
@@ -105867,11 +105909,11 @@ class Tileset2D {
       this._dirty = false;
     }
   }
-  _getTile(index2, create6) {
+  _getTile(index2, create5) {
     const id2 = this.getTileId(index2);
     let tile = this._cache.get(id2);
     let needsReload = false;
-    if (!tile && create6) {
+    if (!tile && create5) {
       tile = new Tile2DHeader(index2);
       Object.assign(tile, this.getTileMetadata(tile.index));
       Object.assign(tile, {
@@ -134270,7 +134312,7 @@ var defineProperty$2 = function(object2, name2, value2, predicate) {
     defineDataProperty2(object2, name2, value2);
   }
 };
-var defineProperties3 = function(object2, map2) {
+var defineProperties2 = function(object2, map2) {
   var predicates = arguments.length > 2 ? arguments[2] : {};
   var props = keys$4(map2);
   if (hasSymbols$1) {
@@ -134280,8 +134322,8 @@ var defineProperties3 = function(object2, map2) {
     defineProperty$2(object2, props[i2], map2[props[i2]], predicates[props[i2]]);
   }
 };
-defineProperties3.supportsDescriptors = !!supportsDescriptors$2;
-var defineProperties_1 = defineProperties3;
+defineProperties2.supportsDescriptors = !!supportsDescriptors$2;
+var defineProperties_1 = defineProperties2;
 var numberIsNaN = function(value2) {
   return value2 !== value2;
 };
@@ -168538,16 +168580,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-498d13ba.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-3b341e96.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-54997420.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-9502d20a.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-a509da75.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-997d2944.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-d7b27016.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-6b1d32af.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-65abb0c2.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-e383d75a.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-efd5356d.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-b61051af.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-e0ea6e91.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-e4eb8c23.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -183487,11 +183529,11 @@ function TooltipContent(props) {
   return jsxRuntimeExports.jsx("table", { children: jsxRuntimeExports.jsx("tbody", { children: Object.entries(info2).map(([key2, value2]) => jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { children: key2 }), jsxRuntimeExports.jsx("td", { children: value2 })] }, key2)) }) });
 }
 function ScatterplotTooltipSubscriber(props) {
-  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo } = props;
+  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo: getObsInfo2 } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
-  const [cellInfo, x2, y2] = obsHighlight && getObsInfo ? [
-    getObsInfo(obsHighlight),
+  const [cellInfo, x2, y2] = obsHighlight && getObsInfo2 ? [
+    getObsInfo2(obsHighlight),
     ...viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsHighlight) : [null, null]
   ] : [null, null, null];
   return cellInfo ? jsxRuntimeExports.jsx(Tooltip2D, { x: x2, y: y2, parentUuid, sourceUuid, parentWidth: width2, parentHeight: height2, children: jsxRuntimeExports.jsx(TooltipContent, { info: cellInfo }) }) : null;
@@ -184049,18 +184091,18 @@ function selection_lower() {
   return this.each(lower);
 }
 function selection_append(name2) {
-  var create6 = typeof name2 === "function" ? name2 : creator(name2);
+  var create5 = typeof name2 === "function" ? name2 : creator(name2);
   return this.select(function() {
-    return this.appendChild(create6.apply(this, arguments));
+    return this.appendChild(create5.apply(this, arguments));
   });
 }
 function constantNull() {
   return null;
 }
 function selection_insert(name2, before) {
-  var create6 = typeof name2 === "function" ? name2 : creator(name2), select2 = before == null ? constantNull : typeof before === "function" ? before : selector(before);
+  var create5 = typeof name2 === "function" ? name2 : creator(name2), select2 = before == null ? constantNull : typeof before === "function" ? before : selector(before);
   return this.select(function() {
-    return this.insertBefore(create6.apply(this, arguments), select2.apply(this, arguments) || null);
+    return this.insertBefore(create5.apply(this, arguments), select2.apply(this, arguments) || null);
   });
 }
 function remove$1() {
@@ -188506,6 +188548,7 @@ function EmbeddingScatterplotSubscriber(props) {
     theme,
     observationsLabelOverride,
     title: titleOverride,
+    helpText = ViewHelpMapping.SCATTERPLOT,
     // Average fill density for dynamic opacity calculation.
     averageFillDensity
   } = props;
@@ -188650,7 +188693,7 @@ function EmbeddingScatterplotSubscriber(props) {
     initialTargetY,
     averageFillDensity
   ]);
-  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const cellSelectionSet = useMemo(() => new Set(cellSelection), [cellSelection]);
   const getCellIsSelected = useCallback((object2, { index: index2 }) => (cellSelectionSet || /* @__PURE__ */ new Set([])).has(obsEmbeddingIndex[index2]) ? 1 : 0, [cellSelectionSet, obsEmbeddingIndex]);
   const cellRadius = cellRadiusMode === "manual" ? cellRadiusFixed : dynamicCellRadius;
@@ -188736,7 +188779,7 @@ function EmbeddingScatterplotSubscriber(props) {
     setTargetY(target2[1]);
     setTargetZ(target2[2] || 0);
   };
-  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, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles: DEFAULT_CONTOUR_PERCENTILES, contourColorEncoding, setContourColorEncoding }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, 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, embeddingPointsVisible, setEmbeddingPointsVisible, embeddingContoursVisible, setEmbeddingContoursVisible, embeddingContoursFilled, setEmbeddingContoursFilled, contourPercentiles, setContourPercentiles, defaultContourPercentiles: DEFAULT_CONTOUR_PERCENTILES, contourColorEncoding, setContourColorEncoding }), children: [jsxRuntimeExports.jsx(ScatterplotWrapper, {
     ref: deckRef,
     uuid,
     theme,
@@ -188780,7 +188823,7 @@ function EmbeddingScatterplotSubscriber(props) {
     contoursFilled: embeddingContoursFilled,
     embeddingPointsVisible,
     embeddingContoursVisible
-  }), tooltipsVisible && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo }), jsxRuntimeExports.jsx(Legend, {
+  }), tooltipsVisible && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2 }), jsxRuntimeExports.jsx(Legend, {
     visible: true,
     theme,
     featureType,
@@ -188852,7 +188895,8 @@ function GatingSubscriber(props) {
     disableTooltip = false,
     title: titleOverride,
     // Average fill density for dynamic opacity calculation.
-    averageFillDensity
+    averageFillDensity,
+    helpText = ViewHelpMapping.GATING
   } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
@@ -189022,7 +189066,7 @@ function GatingSubscriber(props) {
     matrixObsIndex: obsIndex,
     expressionData: uint8ExpressionData
   });
-  const getObsInfo = useCallback((obsId) => {
+  const getObsInfo2 = useCallback((obsId) => {
     var _a3;
     const selectedTransformName = (_a3 = VALUE_TRANSFORM_OPTIONS.find((o2) => o2.value === featureValueTransform)) == null ? void 0 : _a3.name;
     const genePrefix = featureValueTransform ? `${selectedTransformName} ` : "";
@@ -189041,7 +189085,7 @@ function GatingSubscriber(props) {
     gatingFeatureSelectionY,
     obsType
   ]);
-  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) => {
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(obsType, cellsCount)}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, 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);
@@ -189053,7 +189097,7 @@ function GatingSubscriber(props) {
     setTargetZ(target2[2] || 0);
   }, obsEmbeddingIndex: obsIndex, obsEmbedding: obsXY, cellFilter, cellSelection, cellHighlight, cellColors, cellSetPolygons, cellSetLabelSize, cellSetLabelsVisible, cellSetPolygonsVisible, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, cellRadius, cellOpacity, cellColorEncoding, geneExpressionColormap, geneExpressionColormapRange, setComponentHover: () => {
     setComponentHover(uuid);
-  }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected }), !disableTooltip && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo })] });
+  }, updateViewInfo: setComponentViewInfo, getExpressionValue, getCellIsSelected }), !disableTooltip && jsxRuntimeExports.jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2 })] });
 }
 var DEFAULT_CONFIG = {
   // minimum relative difference between two compared values,
@@ -189350,7 +189394,7 @@ var typedFunction$1 = { exports: {} };
     function undef() {
       return void 0;
     }
-    function create6() {
+    function create5() {
       var _types = [
         { name: "number", test: function(x2) {
           return typeof x2 === "number";
@@ -190102,7 +190146,7 @@ var typedFunction$1 = { exports: {} };
           return createTypedFunction(name2, extractSignatures(fns));
         }
       });
-      typed2.create = create6;
+      typed2.create = create5;
       typed2.types = _types;
       typed2.conversions = _conversions;
       typed2.ignore = _ignore;
@@ -190133,7 +190177,7 @@ var typedFunction$1 = { exports: {} };
       };
       return typed2;
     }
-    return create6();
+    return create5();
   });
 })(typedFunction$1);
 var typedFunctionExports = typedFunction$1.exports;
@@ -190845,11 +190889,11 @@ function getArrayDataType(array2, typeOf2) {
   }
   return type2;
 }
-function factory(name2, dependencies2, create6, meta2) {
+function factory(name2, dependencies2, create5, meta2) {
   function assertAndCreate(scope) {
     var deps = pickShallow(scope, dependencies2.map(stripOptionalNotation));
     assertDependencies(name2, dependencies2, scope);
-    return create6(deps);
+    return create5(deps);
   }
   assertAndCreate.isFactory = true;
   assertAndCreate.fn = name2;
@@ -208097,7 +208141,7 @@ function SpatialOptions(props) {
   }, id: `gene-expression-colormap-range-${spatialOptionsId}`, valueLabelDisplay: "auto", step: 5e-3, min: 0, max: 1 }) })] })] }) : null] });
 }
 function SpatialTooltipSubscriber$1(props) {
-  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo, hoverData, hoverCoord, useHoverInfoForTooltip, getObsIdFromHoverData } = props;
+  const { parentUuid, obsHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, hoverData, hoverCoord, useHoverInfoForTooltip, getObsIdFromHoverData } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
   let [cellInfo, x2, y2] = [null, null, null];
@@ -208105,21 +208149,21 @@ function SpatialTooltipSubscriber$1(props) {
     const obsId = getObsIdFromHoverData(hoverData);
     if (obsId) {
       [cellInfo, x2, y2] = [
-        getObsInfo(obsId),
+        getObsInfo2(obsId),
         ...viewInfo && viewInfo.project ? viewInfo.project(hoverCoord) : [null, null]
       ];
     }
-  } else if (!useHoverInfoForTooltip && getObsInfo && obsHighlight) {
+  } else if (!useHoverInfoForTooltip && getObsInfo2 && obsHighlight) {
     const obsId = obsHighlight;
     [cellInfo, x2, y2] = [
-      getObsInfo(obsId),
+      getObsInfo2(obsId),
       ...viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsId) : [null, null]
     ];
   }
   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(props) {
-  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false } = props;
+  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, observationsLabelOverride, subobservationsLabelOverride: subobservationsLabel = "molecule", theme, title: title2 = "Spatial", disable3d, globalDisable3d, useFullResolutionImage = {}, channelNamesVisible = false, helpText = ViewHelpMapping.SPATIAL } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
@@ -208260,7 +208304,7 @@ function SpatialSubscriber$1(props) {
     matrixObsIndex
   ]);
   const cellSelection = useMemo(() => Array.from(cellColors.keys()), [cellColors]);
-  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const [hoverData, setHoverData] = useState(null);
   const [hoverCoord, setHoverCoord] = useState(null);
   const useHoverInfoForTooltip = !obsCentroids;
@@ -208368,7 +208412,7 @@ function SpatialSubscriber$1(props) {
     }
     return [names, colors2];
   }, [imageLayers, imageLayerLoaders]);
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: subtitle, isSpatial: true, urls: urls2, theme, closeButtonVisible, downloadButtonVisible, 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, helpText, children: [jsxRuntimeExports.jsx("div", { style: {
     position: "absolute",
     bottom: "5px",
     left: "5px",
@@ -208386,7 +208430,7 @@ function SpatialSubscriber$1(props) {
     orbitAxis
   }, setViewState, originalViewState, imageLayerDefs: imageLayers, obsSegmentationsLayerDefs: cellsLayer, obsLocationsLayerDefs: moleculesLayer, neighborhoodLayerDefs: neighborhoodsLayer, obsLocationsIndex, obsSegmentationsIndex, obsLocations, obsLocationsLabels, obsLocationsFeatureIndex, hasSegmentations: hasSegmentationsData, obsSegmentations, obsSegmentationsType, obsCentroids, obsCentroidsIndex, cellFilter, cellSelection, cellHighlight, cellColors, neighborhoods, imageLayerLoaders: resolutionFilteredImageLayerLoaders, setCellFilter, setCellSelection: setCellSelectionProp, setCellHighlight, setHoverInfo, setMoleculeHighlight, setComponentHover: () => {
     setComponentHover(uuid);
-  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage }), tooltipsVisible && jsxRuntimeExports.jsx(SpatialTooltipSubscriber$1, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo, useHoverInfoForTooltip, hoverData, hoverCoord, getObsIdFromHoverData }), jsxRuntimeExports.jsx(Legend, {
+  }, updateViewInfo: setComponentViewInfo, imageLayerCallbacks, segmentationLayerCallbacks, spatialAxisFixed, geneExpressionColormap, geneExpressionColormapRange, expressionData: shiftedExpressionDataForBitmask, cellColorEncoding, getExpressionValue, theme, useFullResolutionImage }), tooltipsVisible && jsxRuntimeExports.jsx(SpatialTooltipSubscriber$1, { parentUuid: uuid, obsHighlight: cellHighlight, width: width2, height: height2, getObsInfo: getObsInfo2, useHoverInfoForTooltip, hoverData, hoverCoord, getObsIdFromHoverData }), jsxRuntimeExports.jsx(Legend, {
     visible: true,
     // Fix to dark theme due to black background of spatial plot.
     theme: "dark",
@@ -209676,6 +209720,24 @@ function getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTo
   const projectedObsCoord = viewInfo == null ? void 0 : viewInfo.project(obsCoord);
   return [projectedObsCoord == null ? void 0 : projectedObsCoord[0], projectedObsCoord == null ? void 0 : projectedObsCoord[1]];
 }
+function getObsInfo(obsSetsData, obsType, obsId) {
+  let result = {
+    [`${capitalize$2(obsType)} ID`]: obsId
+  };
+  if (obsSetsData == null ? void 0 : obsSetsData.obsSetsMembership) {
+    const obsMembership = obsSetsData.obsSetsMembership.get(obsId) || [];
+    if (obsMembership) {
+      result = {
+        ...result,
+        ...Object.fromEntries(obsMembership.flatMap((path2) => path2.slice(1).map((pathEl, elLevel) => [
+          `${path2[0]}${path2.length > 2 ? ` L${elLevel + 1}` : ""}`,
+          pathEl
+        ])))
+      };
+    }
+  }
+  return result;
+}
 function SpatialTooltipSubscriber(props) {
   const {
     parentUuid,
@@ -209695,6 +209757,7 @@ function SpatialTooltipSubscriber(props) {
     segmentationLayerScopes,
     segmentationChannelScopesByLayer,
     segmentationChannelCoordination,
+    obsSegmentationsSetsData,
     // Images
     imageLayerScopes,
     imageLayerCoordination
@@ -209713,18 +209776,18 @@ function SpatialTooltipSubscriber(props) {
   })), segmentationLayerScopes == null ? void 0 : segmentationLayerScopes.flatMap((layerScope) => {
     var _a3;
     return (_a3 = segmentationChannelScopesByLayer == null ? void 0 : segmentationChannelScopesByLayer[layerScope]) == null ? void 0 : _a3.map((channelScope) => {
-      var _a4, _b2, _c2;
+      var _a4, _b2, _c2, _d2;
       const { obsType, obsHighlight, tooltipsVisible, tooltipCrosshairsVisible, spatialChannelVisible } = ((_b2 = (_a4 = segmentationChannelCoordination == null ? void 0 : segmentationChannelCoordination[0]) == null ? void 0 : _a4[layerScope]) == null ? void 0 : _b2[channelScope]) || {};
+      const obsSetsData = (_c2 = obsSegmentationsSetsData == null ? void 0 : obsSegmentationsSetsData[layerScope]) == null ? void 0 : _c2[channelScope];
+      const obsInfo = getObsInfo(obsSetsData, obsType, obsHighlight);
       if (!obsHighlight || !spatialChannelVisible || !tooltipsVisible && !tooltipCrosshairsVisible)
         return null;
-      const { obsIndex, obsLocations } = ((_c2 = obsSegmentationsLocations == null ? void 0 : obsSegmentationsLocations[layerScope]) == null ? void 0 : _c2[channelScope]) || {};
+      const { obsIndex, obsLocations } = ((_d2 = obsSegmentationsLocations == null ? void 0 : obsSegmentationsLocations[layerScope]) == null ? void 0 : _d2[channelScope]) || {};
       const xy = getXY(obsHighlight, viewInfo, obsIndex, obsLocations, useHoverInfoForTooltip, projectedHoverCoord);
       if (!xy)
         return null;
       const [x2, y2] = xy;
-      return jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, tooltipsVisible, tooltipCrosshairsVisible, width: width2, height: height2, info: {
-        [`${capitalize$2(obsType)} ID`]: obsHighlight
-      }, x: x2, y: y2 + (yOffset += 30) }, `${layerScope}-${channelScope}`);
+      return jsxRuntimeExports.jsx(TooltipChild, { parentUuid, sourceUuid, tooltipsVisible, tooltipCrosshairsVisible, width: width2, height: height2, info: obsInfo, x: x2, y: y2 + (yOffset += 20 + 15 * Object.keys(obsInfo).length) }, `${layerScope}-${channelScope}`);
     });
   }), spotLayerScopes == null ? void 0 : spotLayerScopes.map((layerScope) => {
     var _a3;
@@ -209772,7 +209835,7 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-7def4863.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-1eed7926.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialThreeAdapter = React__default.forwardRef((props, ref2) => jsxRuntimeExports.jsx("div", { ref: ref2, style: { width: "100%", height: "100%" }, children: jsxRuntimeExports.jsx(ErrorBoundary, { children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazySpatialThree, { ...props }) }) }) }));
@@ -210159,8 +210222,8 @@ function SpatialSubscriber(props) {
             let obsId;
             if (layerType === "segmentation-bitmask") {
               const { obsIndex } = ((_a3 = segmentationMultiIndicesData == null ? void 0 : segmentationMultiIndicesData[segmentationLayerScope]) == null ? void 0 : _a3[channelScope]) || {};
-              obsI -= 1;
               if (obsIndex && bitmaskValueIsIndex) {
+                obsI -= 1;
                 obsId = obsIndex == null ? void 0 : obsIndex[obsI];
               } else {
                 obsId = String(obsI);
@@ -210368,6 +210431,7 @@ function SpatialSubscriber(props) {
     segmentationLayerScopes,
     segmentationChannelScopesByLayer,
     segmentationChannelCoordination,
+    obsSegmentationsSetsData,
     // Images
     imageLayerScopes,
     imageLayerCoordination
@@ -211213,11 +211277,11 @@ const Heatmap$1 = forwardRef((props, deckRef) => {
   ], layers, layerFilter, getCursor: (interactionState) => interactionState.isDragging ? "grabbing" : cursorType, glOptions: DEFAULT_GL_OPTIONS$1, onViewStateChange, viewState, onHover, useDevicePixels, onClick: onHeatmapClick });
 });
 function HeatmapTooltipSubscriber(props) {
-  const { parentUuid, width: width2, height: height2, transpose: transpose2, getObsInfo, getFeatureInfo, obsHighlight, featureHighlight } = props;
+  const { parentUuid, width: width2, height: height2, transpose: transpose2, getObsInfo: getObsInfo2, getFeatureInfo, obsHighlight, featureHighlight } = props;
   const sourceUuid = useComponentHover();
   const viewInfo = useComponentViewInfo(parentUuid);
-  const [cellInfo, cellCoord] = obsHighlight && getObsInfo ? [
-    getObsInfo(obsHighlight),
+  const [cellInfo, cellCoord] = obsHighlight && getObsInfo2 ? [
+    getObsInfo2(obsHighlight),
     viewInfo && viewInfo.projectFromId ? viewInfo.projectFromId(obsHighlight, null)[transpose2 ? 0 : 1] : null
   ] : [null, null];
   const [geneInfo, geneCoord] = featureHighlight && getFeatureInfo ? [
@@ -211263,7 +211327,7 @@ function HeatmapOptions(props) {
   }) })] }), 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(props) {
-  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, transpose: transpose2, observationsLabelOverride, variablesLabelOverride, title: title2 = "Heatmap" } = props;
+  const { uuid, coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, transpose: transpose2, observationsLabelOverride, variablesLabelOverride, title: title2 = "Heatmap", helpText = ViewHelpMapping.HEATMAP } = props;
   const loaders = useLoaders();
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
@@ -211306,7 +211370,7 @@ function HeatmapSubscriber(props) {
     cellSetSelection,
     obsIndex
   ]);
-  const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
+  const getObsInfo2 = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
   const getObsMembership = useGetObsMembership(obsSetsMembership);
   const getFeatureInfo = useCallback((featureId) => {
     if (featureId) {
@@ -211338,7 +211402,7 @@ function HeatmapSubscriber(props) {
     `${capitalize$2(observationsLabel)} Set`
   ], [observationsLabel]);
   const selectedCount = cellColors.size;
-  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${pluralize(variablesLabel, genesCount)},
+  return jsxRuntimeExports.jsxs(TitleInfo, { title: title2, helpText, info: `${commaNumber(cellsCount)} ${pluralize(observationsLabel, cellsCount)} × ${commaNumber(genesCount)} ${pluralize(variablesLabel, genesCount)},
              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);
@@ -211346,7 +211410,7 @@ function HeatmapSubscriber(props) {
     setTargetY(target2[1]);
   }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height2, width: width2, theme, uuid, uint8ObsFeatureMatrix: uint8ObsFeatureMatrix == null ? void 0 : uint8ObsFeatureMatrix.data, cellColors, colormap: geneExpressionColormap, setIsRendering, setCellHighlight, setGeneHighlight, featureLabelsMap, obsIndex, featureIndex, setTrackHighlight, setComponentHover: () => {
     setComponentHover(uuid);
-  }, updateViewInfo: setComponentViewInfo, observationsTitle, variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels, useDevicePixels: true, onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && jsxRuntimeExports.jsx(HeatmapTooltipSubscriber, { parentUuid: uuid, width: width2, height: height2, transpose: transpose2, getObsInfo, getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] });
+  }, updateViewInfo: setComponentViewInfo, observationsTitle, variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels, useDevicePixels: true, onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && jsxRuntimeExports.jsx(HeatmapTooltipSubscriber, { parentUuid: uuid, width: width2, height: height2, transpose: transpose2, getObsInfo: getObsInfo2, getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, obsSetSelection: cellSetSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] });
 }
 var AutoSizer$1 = {};
 var interopRequireDefault = { exports: {} };
@@ -215747,7 +215811,7 @@ function FeatureListOptions(props) {
   } }) })] })] }) : null] });
 }
 function FeatureListSubscriber(props) {
-  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null, closeButtonVisible, downloadButtonVisible } = props;
+  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null, closeButtonVisible, downloadButtonVisible, helpText = ViewHelpMapping.FEATURE_LIST } = props;
   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;
@@ -215787,6 +215851,7 @@ function FeatureListSubscriber(props) {
     removeGridComponent,
     isReady,
     urls: urls2,
+    helpText,
     options: jsxRuntimeExports.jsx(FeatureListOptions, { featureListSort, setFeatureListSort, featureListSortKey: featureListSortKey || initialSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels: Boolean(featureLabelsMap), primaryColumnName }),
     children: jsxRuntimeExports.jsx(FeatureList, { hasColorEncoding: cellColorEncoding === "geneSelection", showFeatureTable, geneList, featureListSort, featureListSortKey: featureListSortKey || initialSortKey, featureLabelsMap, featureType, geneSelection, geneFilter, setGeneSelection: setGeneSelectionAndColorEncoding, setGeneFilter, setGeneHighlight, enableMultiSelect, hasFeatureLabels: Boolean(featureLabelsMap), primaryColumnName })
   });
@@ -216609,10 +216674,11 @@ const LayerControllerMemoized = React__default.memo(forwardRef((props, ref2) =>
     componentWidth,
     spatialLayout,
     handleImageAdd,
-    enableLayerButtonsWithOneLayer
+    enableLayerButtonsWithOneLayer,
+    helpText
   } = props;
   const shouldShowImageLayerButton = Boolean(enableLayerButtonsWithOneLayer || (imageLayerLoaders == null ? void 0 : imageLayerLoaders.length) > 1);
-  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) => {
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, helpText, 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];
@@ -216727,7 +216793,7 @@ const LayerControllerMemoized = React__default.memo(forwardRef((props, ref2) =>
   }), shouldShowImageLayerButton ? jsxRuntimeExports.jsx(Grid$3, { item: true, children: jsxRuntimeExports.jsx(ImageAddButton, { imageOptions: imageLayerMeta, handleImageAdd }) }) : null] }) });
 }));
 function LayerControllerSubscriber$1(props) {
-  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", disable3d, globalDisable3d, disableChannelsIfRgbDetected, enableLayerButtonsWithOneLayer } = props;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", disable3d, globalDisable3d, disableChannelsIfRgbDetected, enableLayerButtonsWithOneLayer, helpText = ViewHelpMapping.LAYER_CONTROLLER } = props;
   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);
@@ -216795,6 +216861,7 @@ function LayerControllerSubscriber$1(props) {
     setMoleculesLayer,
     cellsLayer,
     setCellsLayer,
+    helpText,
     rasterLayers,
     imageLayerLoaders,
     imageLayerMeta,
@@ -218558,7 +218625,7 @@ function Status(props) {
   return messages2;
 }
 function StatusSubscriber(props) {
-  const { coordinationScopes, closeButtonVisible, removeGridComponent, theme, title: title2 = "Status" } = props;
+  const { coordinationScopes, closeButtonVisible, removeGridComponent, theme, title: title2 = "Status", helpText = ViewHelpMapping.STATUS } = props;
   const [{ obsHighlight: cellHighlight, featureHighlight: geneHighlight, moleculeHighlight }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.STATUS], coordinationScopes);
   const warn2 = useWarning();
   const infos = [
@@ -218567,7 +218634,7 @@ function StatusSubscriber(props) {
     ...moleculeHighlight ? [`Hovered gene ${moleculeHighlight}`] : []
   ];
   const info2 = infos.join("; ");
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, theme, closeButtonVisible, 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, helpText, children: jsxRuntimeExports.jsx(Status, { warn: warn2, info: info2 }) });
 }
 window.higlassTracks = window.higlassTracks || {};
 window.higlassTracksByType = window.higlassTracksByType || {};
@@ -220133,7 +220200,7 @@ const useStyles$2 = makeStyles((theme) => ({
 }));
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-79b185c3.js");
+  const { HiGlassComponent } = await import("./higlass-32a71267.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -220300,7 +220367,7 @@ const REFERENCE_STATIC_FILES = {
   }
 };
 function GenomicProfilesSubscriber(props) {
-  const { coordinationScopes, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, profileTrackUidKey = "path", profileTrackNameKey = null, higlassServer = "https://higlass.io/api/v1", assembly = "hg38", title: title2 = "Genomic Profiles", showGeneAnnotations = true } = props;
+  const { coordinationScopes, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, profileTrackUidKey = "path", profileTrackNameKey = null, higlassServer = "https://higlass.io/api/v1", assembly = "hg38", title: title2 = "Genomic Profiles", showGeneAnnotations = true, helpText = ViewHelpMapping.GENOMIC_PROFILES } = props;
   const [width2, height2, containerRef] = useGridItemSize();
   const loaders = useLoaders();
   const [{ dataset, obsSetColor: cellSetColor, obsSetSelection: cellSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GENOMIC_PROFILES], coordinationScopes);
@@ -220436,7 +220503,7 @@ function GenomicProfilesSubscriber(props) {
     assembly
   ]);
   const classes = useStyles$2();
-  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 }) }) });
+  return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, urls: urls2, helpText, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: hgViewConfig ? jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) : null }) }) });
 }
 function CellSetExpressionPlotOptions(props) {
   const { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold, setFeatureValuePositivityThreshold, featureValueColormap, setFeatureValueColormap } = props;
@@ -225566,7 +225633,7 @@ function useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, exp
 }
 function CellSetExpressionPlotSubscriber(props) {
   var _a3;
-  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, jitter: jitter2 = false, yMin = null, yUnits = null } = props;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, jitter: jitter2 = false, yMin = null, yUnits = null, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION } = props;
   const classes = useStyles$1();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection, sampleSetColor }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setSampleSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
@@ -225596,7 +225663,7 @@ function CellSetExpressionPlotSubscriber(props) {
   const [histogramData, setArr, exprMax] = useExpressionByCellSet(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme, yMin);
   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})` : ""}`, 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: histogramData ? jsxRuntimeExports.jsx(CellSetExpressionPlot, { yMin, yUnits, jitter: jitter2, cellSetSelection, sampleSetSelection, sampleSetColor, colors: setArr, data: histogramData, exprMax, theme, width: width2, height: height2, obsType, featureType, 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, helpText, options: jsxRuntimeExports.jsx(CellSetExpressionPlotOptions, { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: histogramData ? jsxRuntimeExports.jsx(CellSetExpressionPlot, { yMin, yUnits, jitter: jitter2, cellSetSelection, sampleSetSelection, sampleSetColor, colors: setArr, data: histogramData, exprMax, theme, width: width2, height: height2, obsType, featureType, featureValueType, featureValueTransformName: selectedTransformName }) : jsxRuntimeExports.jsxs("span", { children: ["Select a ", featureType, "."] }) }) });
 }
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -241964,7 +242031,7 @@ inherits(Projection$1, Transform2, {
   transform(_, pulse2) {
     let proj = this.value;
     if (!proj || _.modified("type")) {
-      this.value = proj = create5(_.type);
+      this.value = proj = create4(_.type);
       projectionProperties.forEach((prop) => {
         if (_[prop] != null)
           set$3(proj, prop, _[prop]);
@@ -241986,7 +242053,7 @@ function fit(proj, _) {
   const data2 = collectGeoJSON(_.fit);
   _.extent ? proj.fitExtent(_.extent, data2) : _.size ? proj.fitSize(_.size, data2) : 0;
 }
-function create5(type2) {
+function create4(type2) {
   const constructor = projection((type2 || "mercator").toLowerCase());
   if (!constructor)
     error("Unrecognized projection type: " + type2);
@@ -250793,8 +250860,8 @@ function bind3(view, el2, binding) {
       bind4.update = debounce(param2.debounce, bind4.update);
     }
   }
-  const create6 = param2.input == null && param2.element ? target : generate$1;
-  create6(bind4, el2, param2, view);
+  const create5 = param2.input == null && param2.element ? target : generate$1;
+  create5(bind4, el2, param2, view);
   if (!bind4.active) {
     view.on(view._signals[param2.signal], null, () => {
       bind4.source ? bind4.source = false : bind4.set(view.signal(param2.signal));
@@ -277119,7 +277186,7 @@ function CellSetSizesPlot(props) {
   return jsxRuntimeExports.jsx(VegaPlot, { data: data2, spec, signalListeners, getTooltipText });
 }
 function CellSetSizesPlotSubscriber(props) {
-  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride } = props;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride, helpText = ViewHelpMapping.OBS_SET_SIZES } = props;
   const classes = useStyles$1();
   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);
@@ -277166,7 +277233,7 @@ function CellSetSizesPlotSubscriber(props) {
       setCellSetSelection([...cellSetSelection, setNamePath]);
     }
   };
-  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 }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(CellSetSizesPlot, { data: data2, onBarSelect, theme, width: width2, height: height2, obsType }) }) });
 }
 function ExpressionHistogram(props) {
   const { geneSelection, obsType, featureType, featureValueType, data: data2, theme, width: width2, height: height2, marginRight = 90, marginBottom = 50, onSelect } = props;
@@ -277225,7 +277292,7 @@ function ExpressionHistogram(props) {
   return jsxRuntimeExports.jsx(VegaPlot, { data: data2, signalListeners, spec });
 }
 function ExpressionHistogramSubscriber(props) {
-  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme } = props;
+  const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_VALUE_HISTOGRAM } = props;
   const classes = useStyles$1();
   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);
@@ -277273,7 +277340,7 @@ function ExpressionHistogramSubscriber(props) {
     setCellSetSelection,
     firstGeneSelected
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: `Histogram${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(ExpressionHistogram, { geneSelection, obsType, featureType, featureValueType, onSelect, data: data2, theme, width: width2, height: height2 }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: `Histogram${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, closeButtonVisible, downloadButtonVisible, removeGridComponent, urls: urls2, theme, isReady, helpText, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(ExpressionHistogram, { geneSelection, obsType, featureType, featureValueType, onSelect, data: data2, theme, width: width2, height: height2 }) }) });
 }
 function DotPlot(props) {
   const { isStratified, transpose: transpose2, data: rawData, theme, width: width2, height: height2, marginRight, marginBottom, obsType, keyLength = 36, featureType, featureValueType, featureValueTransformName, featureValueColormap, cellSetSelection } = props;
@@ -277425,7 +277492,7 @@ function useExpressionSummaries(sampleEdges, sampleSets, sampleSetSelection, exp
 }
 function DotPlotSubscriber(props) {
   var _a3;
-  const { coordinationScopes, removeGridComponent, theme, title: title2 = "Dot Plot", transpose: transpose2 = true } = props;
+  const { coordinationScopes, removeGridComponent, theme, title: title2 = "Dot Plot", transpose: transpose2 = true, helpText = ViewHelpMapping.DOT_PLOT } = props;
   const classes = useStyles$1();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, featureValuePositivityThreshold: posThreshold, featureValueColormap, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, sampleType, sampleSetSelection }, { setFeatureValueTransform, setFeatureValueTransformCoefficient, setFeatureValuePositivityThreshold: setPosThreshold, setFeatureValueColormap }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.DOT_PLOT], coordinationScopes);
@@ -277455,7 +277522,7 @@ function DotPlotSubscriber(props) {
   ]);
   const [resultArr, meanExpressionMax] = useExpressionSummaries(sampleEdges, sampleSets, sampleSetSelection, expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, posThreshold, featureLabelsMap);
   const selectedTransformName = (_a3 = transformOptions.find((o2) => o2.value === featureValueTransform)) == null ? void 0 : _a3.name;
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, removeGridComponent, urls: urls2, theme, isReady, options: jsxRuntimeExports.jsx(CellSetExpressionPlotOptions, { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap, setFeatureValueColormap }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? jsxRuntimeExports.jsx(DotPlot, { isStratified, transpose: transpose2, domainMax: meanExpressionMax, data: resultArr, theme, width: width2, height: height2, obsType, featureType, featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap, cellSetSelection }) : jsxRuntimeExports.jsxs("span", { children: ["Select at least one ", featureType, "."] }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, removeGridComponent, urls: urls2, theme, isReady, helpText, options: jsxRuntimeExports.jsx(CellSetExpressionPlotOptions, { featureValueTransform, setFeatureValueTransform, featureValueTransformCoefficient, setFeatureValueTransformCoefficient, transformOptions, featureValuePositivityThreshold: posThreshold, setFeatureValuePositivityThreshold: setPosThreshold, featureValueColormap, setFeatureValueColormap }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: resultArr ? jsxRuntimeExports.jsx(DotPlot, { isStratified, transpose: transpose2, domainMax: meanExpressionMax, data: resultArr, theme, width: width2, height: height2, obsType, featureType, featureValueType, featureValueTransformName: selectedTransformName, featureValueColormap, cellSetSelection }) : jsxRuntimeExports.jsxs("span", { children: ["Select at least one ", featureType, "."] }) }) });
 }
 const scaleBand = scale$5("band");
 const OBS_KEY = "obsId";
@@ -277567,7 +277634,7 @@ function FeatureBarPlot(props) {
   } });
 }
 function FeatureBarPlotSubscriber(props) {
-  const { coordinationScopes, removeGridComponent, theme, yMin = 0, yUnits = null } = props;
+  const { coordinationScopes, removeGridComponent, theme, yMin = 0, yUnits = null, helpText = ViewHelpMapping.FEATURE_BAR_PLOT } = props;
   const classes = useStyles$1();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsHighlight: cellHighlight, additionalObsSets: additionalCellSets, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_BAR_PLOT], coordinationScopes);
@@ -277623,7 +277690,7 @@ function FeatureBarPlotSubscriber(props) {
     featureValueTransformCoefficient,
     firstGeneSelected
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: `Feature Values${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, removeGridComponent, urls: urls2, theme, isReady, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? jsxRuntimeExports.jsx(FeatureBarPlot, { yMin, yMax: expressionMax, yUnits, data: expressionArr, theme, width: width2, height: height2, obsType, cellHighlight, cellSetSelection, additionalCellSets, cellSetColor, featureType, featureValueType, featureName: firstGeneSelected, onBarSelect, onBarHighlight }) : jsxRuntimeExports.jsxs("span", { children: ["Select a ", featureType, "."] }) }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: `Feature Values${firstGeneSelected ? ` (${firstGeneSelected})` : ""}`, removeGridComponent, urls: urls2, theme, isReady, helpText, children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: expressionArr ? jsxRuntimeExports.jsx(FeatureBarPlot, { yMin, yMax: expressionMax, yUnits, data: expressionArr, theme, width: width2, height: height2, obsType, cellHighlight, cellSetSelection, additionalCellSets, cellSetColor, featureType, featureValueType, featureName: firstGeneSelected, onBarSelect, onBarHighlight }) : jsxRuntimeExports.jsxs("span", { children: ["Select a ", featureType, "."] }) }) });
 }
 class CsvSource {
   constructor({ url, requestInit: requestInit2 }) {
@@ -280509,7 +280576,6 @@ class SpatialDataObsSetsLoader extends ObsSetsAnndataLoader {
   constructor(dataSource, params2) {
     super(dataSource, params2);
     this.region = this.options.region;
-    this.options = this.options.obsSets;
   }
 }
 class GenomicProfilesZarrLoader extends AbstractTwoStepLoader {
@@ -314656,6 +314722,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.FEATURE_TYPE, "gene", z.string()),
   new PluginCoordinationType(CoordinationType$1.FEATURE_VALUE_TYPE, "expression", z.string()),
   new PluginCoordinationType(CoordinationType$1.OBS_LABELS_TYPE, null, z.string().nullable()),
+  new PluginCoordinationType(CoordinationType$1.FEATURE_LABELS_TYPE, null, z.string().nullable()),
   new PluginCoordinationType(CoordinationType$1.EMBEDDING_ZOOM, null, z.number().nullable()),
   new PluginCoordinationType(CoordinationType$1.EMBEDDING_ROTATION, 0, z.number().nullable()),
   new PluginCoordinationType(CoordinationType$1.EMBEDDING_TARGET_X, null, z.number().nullable()),