@vitessce/all 3.5.8 → 3.5.9

package/dist/{deflate-caecb9a5.js → deflate-348b8ed0.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{higlass-499258e3.js → higlass-ac63bd26.js}

@@ -1,6 +1,6 @@
 import React__default, { createElement, isValidElement, PureComponent, Component } from "react";
 import ReactDOM__default, { findDOMNode as findDOMNode$1 } from "react-dom";
-import { aS as commonjsGlobal$1, aT as objectAssign, g as getDefaultExportFromCjs$1, aU as earcut } from "./index-ec9f6e92.js";
+import { aS as commonjsGlobal$1, aT as objectAssign, g as getDefaultExportFromCjs$1, aU as earcut } from "./index-13b53ff7.js";
 import "@vitessce/vit-s";
 var promise = {};
 (function(exports2) {

package/dist/{index-ec9f6e92.js → index-13b53ff7.js}

@@ -7423,6 +7423,9 @@ const DEFAULT_LIGHT2_COLOR = [235, 235, 235];
 function getDefaultColor(theme) {
   return theme === "dark" ? DEFAULT_DARK_COLOR : theme === "light" ? DEFAULT_LIGHT_COLOR$3 : DEFAULT_LIGHT2_COLOR;
 }
+function getDefaultForegroundColor(theme) {
+  return theme === "dark" ? DEFAULT_LIGHT2_COLOR : DEFAULT_DARK_COLOR;
+}
 const PALETTE = [
   [68, 119, 170],
   [136, 204, 238],
@@ -44131,7 +44134,7 @@ function defaultUrlTransform(value2) {
   }
   return "";
 }
-const useStyles$r = makeStyles((theme) => ({
+const useStyles$s = makeStyles((theme) => ({
   description: {
     "& p, details, table": {
       fontSize: "80%",
@@ -44168,7 +44171,7 @@ const useStyles$r = makeStyles((theme) => ({
 }));
 function Description(props) {
   const { description: description2, metadata: metadata2, descriptionType } = props;
-  const classes = useStyles$r();
+  const classes = useStyles$s();
   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) {
@@ -53775,10 +53778,10 @@ var _objectKeysInternal = function(object2, names) {
   return result;
 };
 var _enumBugKeys = "constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",");
-var $keys$1 = _objectKeysInternal;
+var $keys$2 = _objectKeysInternal;
 var enumBugKeys$1 = _enumBugKeys;
 var _objectKeys$1 = Object.keys || function keys(O) {
-  return $keys$1(O, enumBugKeys$1);
+  return $keys$2(O, enumBugKeys$1);
 };
 var _objectGops = {};
 _objectGops.f = Object.getOwnPropertySymbols;
@@ -54229,20 +54232,13 @@ var _isArray = Array.isArray || function isArray2(arg) {
 };
 var _objectGopnExt = {};
 var _objectGopn = {};
-var hasRequired_objectGopn;
-function require_objectGopn() {
-  if (hasRequired_objectGopn)
-    return _objectGopn;
-  hasRequired_objectGopn = 1;
-  var $keys2 = _objectKeysInternal;
-  var hiddenKeys = _enumBugKeys.concat("length", "prototype");
-  _objectGopn.f = Object.getOwnPropertyNames || function getOwnPropertyNames4(O) {
-    return $keys2(O, hiddenKeys);
-  };
-  return _objectGopn;
-}
+var $keys$1 = _objectKeysInternal;
+var hiddenKeys = _enumBugKeys.concat("length", "prototype");
+_objectGopn.f = Object.getOwnPropertyNames || function getOwnPropertyNames2(O) {
+  return $keys$1(O, hiddenKeys);
+};
 var toIObject$2 = _toIobject;
-var gOPN$1 = require_objectGopn().f;
+var gOPN$1 = _objectGopn.f;
 var toString$4 = {}.toString;
 var windowNames = typeof window == "object" && window && Object.getOwnPropertyNames ? Object.getOwnPropertyNames(window) : [];
 var getWindowNames = function(it2) {
@@ -54252,7 +54248,7 @@ var getWindowNames = function(it2) {
     return windowNames.slice();
   }
 };
-_objectGopnExt.f = function getOwnPropertyNames2(it2) {
+_objectGopnExt.f = function getOwnPropertyNames3(it2) {
   return windowNames && toString$4.call(it2) == "[object Window]" ? getWindowNames(it2) : gOPN$1(toIObject$2(it2));
 };
 var _objectGopd = {};
@@ -54391,7 +54387,7 @@ var $getOwnPropertyDescriptor = function getOwnPropertyDescriptor3(it2, key2) {
     D2.enumerable = true;
   return D2;
 };
-var $getOwnPropertyNames = function getOwnPropertyNames3(it2) {
+var $getOwnPropertyNames = function getOwnPropertyNames4(it2) {
   var names = gOPN(toIObject(it2));
   var result = [];
   var i2 = 0;
@@ -54435,7 +54431,7 @@ if (!USE_NATIVE) {
   });
   $GOPD.f = $getOwnPropertyDescriptor;
   $DP.f = $defineProperty$4;
-  require_objectGopn().f = gOPNExt.f = $getOwnPropertyNames;
+  _objectGopn.f = gOPNExt.f = $getOwnPropertyNames;
   _objectPie.f = $propertyIsEnumerable;
   $GOPS.f = $getOwnPropertySymbols;
   if (DESCRIPTORS && !_library) {
@@ -61275,7 +61271,7 @@ var Tooltip$2 = function Tooltip2(props, ref2) {
 };
 const Tooltip$3 = /* @__PURE__ */ forwardRef(Tooltip$2);
 const nodeHeight = 32;
-const useStyles$q = makeStyles((theme) => ({
+const useStyles$r = makeStyles((theme) => ({
   setsManager: {
     position: "relative",
     width: "100%",
@@ -66470,7 +66466,7 @@ function NamedSetNodeStatic(props) {
   const onClick = level === 0 && !expanded ? () => onCheckLevel(nodeKey, nextLevelToCheck) : () => onNodeView(path2);
   const tooltipProps = disableTooltip ? { visible: false } : {};
   const popoverMenuConfig = makeNodeViewMenuConfig(props);
-  const classes = useStyles$q();
+  const classes = useStyles$r();
   return jsxRuntimeExports.jsxs("span", { children: [jsxRuntimeExports.jsx(HelpTooltip, { title: tooltipText, ...tooltipProps, children: jsxRuntimeExports.jsx("button", { type: "button", onClick, onKeyPress: (e3) => callbackOnKeyPress(e3, "v", () => onNodeView(path2)), className: classes.titleButton, children: title2 }) }), popoverMenuConfig.length > 0 ? jsxRuntimeExports.jsx(PopoverMenu, { menuConfig: makeNodeViewMenuConfig(props), color: level > 0 && editable ? color2 || getDefaultColor(theme) : null, setColor: (c2) => onNodeSetColor(path2, c2), children: jsxRuntimeExports.jsx(SvgMenu, { className: classes.nodeMenuIcon, "aria-label": "Open Node View Menu" }) }) : null, level > 0 && isChecking ? checkbox2 : null, level > 0 && jsxRuntimeExports.jsx("span", { className: classes.nodeSizeLabel, children: niceSize })] });
 }
 function NamedSetNodeEditing(props) {
@@ -66482,7 +66478,7 @@ function NamedSetNodeEditing(props) {
       onNodeSetName(path2, currentTitle, true);
     }
   }
-  const classes = useStyles$q();
+  const classes = useStyles$r();
   return jsxRuntimeExports.jsxs("span", { className: classes.titleButtonWithInput, children: [jsxRuntimeExports.jsx("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: true,
@@ -66508,7 +66504,7 @@ function LevelsButtons(props) {
       onCheckLevel(nodeKey, newLevel);
     }
   }
-  const classes = useStyles$q();
+  const classes = useStyles$r();
   return jsxRuntimeExports.jsx("div", { className: classes.levelButtonsContainer, children: range$f(1, height2 + 1).map((i2) => {
     const isChecked = isEqual$5(path2, checkedLevelPath) && i2 === checkedLevelIndex;
     return jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx(HelpTooltip, { title: getLevelTooltipText(i2), children: jsxRuntimeExports.jsx("input", { className: clsx(classes.levelRadioButton, { [classes.levelRadioButtonChecked]: isChecked && !hasColorEncoding }), type: "checkbox", value: i2, checked: isChecked && hasColorEncoding, onChange: onCheck }) }) }, i2);
@@ -66595,7 +66591,7 @@ let TreeNode$1 = class TreeNode extends TreeNode$2 {
 };
 function PlusButton(props) {
   const { datatype, onError, onImportTree, onCreateLevelZeroNode, importable, editable } = props;
-  const classes = useStyles$q();
+  const classes = useStyles$r();
   const onImport = useCallback((importHandler, mimeType) => () => {
     const uploadInputNode = document.createElement("input");
     uploadInputNode.setAttribute("type", "file");
@@ -66713,7 +66709,7 @@ function SetsManager(props) {
       }, onNodeCheckNewName, onNodeSetIsEditing: setIsEditingNodeName, onNodeRemove, onExportLevelZeroNodeJSON, onExportLevelZeroNodeTabular, onExportSetJSON, disableTooltip: isDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: renderTreeNodes(node2.children, readOnly, newPath) }, pathToKey(newPath));
     });
   }
-  const classes = useStyles$q();
+  const classes = useStyles$r();
   return jsxRuntimeExports.jsxs("div", { className: classes.setsManager, children: [jsxRuntimeExports.jsxs("div", { className: classes.setsManagerTree, children: [jsxRuntimeExports.jsx(Tree$1, { draggable: false, checkable, checkedKeys: setSelectionKeys, expandedKeys: setExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), children: renderTreeNodes(processedSets.tree, true, []) }), jsxRuntimeExports.jsx(Tree$1, { draggable: true, checkable, checkedKeys: additionalSetSelectionKeys, expandedKeys: additionalSetExpansionKeys, autoExpandParent, onCheck: (checkedKeys, info2) => onCheckNode(info2.node.props.nodeKey, info2.checked), onExpand: (expandedKeys, info2) => onExpandNode(expandedKeys, info2.node.props.nodeKey, info2.expanded), onDrop: (info2) => {
     const { eventKey: dropKey } = info2.node.props;
     const { eventKey: dragKey } = info2.dragNode.props;
@@ -173047,16 +173043,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-8cc54eb3.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-d3000914.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-0fa2e626.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-ef19357e.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-71127875.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-caecb9a5.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-8ca42840.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-6b0aed4a.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-88dacd24.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-74f08245.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-348b8ed0.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-07b796e7.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-14ea355d.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-bf47d44e.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -186863,7 +186859,7 @@ const VisibilityIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path",
 const VisibilityOffIcon = createSvgIcon(/* @__PURE__ */ React.createElement("path", {
   d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
 }), "VisibilityOff");
-const useStyles$p = makeStyles(() => ({
+const useStyles$q = makeStyles(() => ({
   toolButton: {
     display: "inline-flex",
     "&:active": {
@@ -186924,12 +186920,12 @@ const useStyles$p = makeStyles(() => ({
 }));
 function IconTool(props) {
   const { alt, onClick, isActive: isActive2, children: children2 } = props;
-  const classes = useStyles$p();
+  const classes = useStyles$q();
   return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, { [classes.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children2 });
 }
 function IconButton2(props) {
   const { alt, onClick, children: children2 } = props;
-  const classes = useStyles$p();
+  const classes = useStyles$q();
   return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, classes.toolButton), onClick, type: "button", title: alt, children: children2 });
 }
 function ToolMenu(props) {
@@ -186937,7 +186933,7 @@ function ToolMenu(props) {
   const lassoIconAltText = "Select lasso";
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => {
   } } = props;
-  const classes = useStyles$p();
+  const classes = useStyles$q();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
@@ -188094,7 +188090,7 @@ function Tooltip4(props) {
   }, [x2, y2, parentWidth, parentHeight]);
   return jsxRuntimeExports.jsx("div", { ref: ref2, className: classes.tooltipAnchor, children: ref2 && ref2.current ? jsxRuntimeExports.jsx(P$1, { open: true, anchorEl: ref2.current, container: getTooltipContainer, transition: true, placement: `${placementY}-${placementX}`, children: jsxRuntimeExports.jsx(M$1, { elevation: 4, className: classes.tooltipContent, children: children2 }) }) : null });
 }
-const useStyles$o = makeStyles((theme) => ({
+const useStyles$p = makeStyles((theme) => ({
   cellEmphasisCrosshair: {
     zIndex: 50,
     position: "absolute",
@@ -188105,7 +188101,7 @@ const useStyles$o = makeStyles((theme) => ({
 }));
 function Tooltip2D(props) {
   const { parentUuid, sourceUuid, x: x2, y: y2, parentWidth, parentHeight, children: children2 } = props;
-  const classes = useStyles$o();
+  const classes = useStyles$p();
   if (x2 < 0 || x2 > parentWidth || y2 < 0 || y2 > parentHeight) {
     return null;
   }
@@ -192467,7 +192463,7 @@ function getXlinkHref(cmap) {
   const xlinkHref = ramp(color2.copy().domain(quantize$4(interpolate$3(0, 1), n3))).toDataURL();
   return xlinkHref;
 }
-const useStyles$n = makeStyles(() => ({
+const useStyles$o = makeStyles(() => ({
   legend: {
     top: "2px",
     right: "2px",
@@ -192510,7 +192506,7 @@ const rectMarginX = 2;
 function Legend(props) {
   const { visible: visibleProp, positionRelative = false, highContrast = false, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, spatialChannelColor, spatialLayerColor, obsSetSelection, obsSetColor, extent: extent2, missing, width: width2 = 100, height: height2 = 36, theme, showObsLabel = false, pointsVisible = true, contoursVisible = false, contoursFilled, contourPercentiles, contourThresholds } = props;
   const svgRef = useRef();
-  const classes = useStyles$n();
+  const classes = useStyles$o();
   const isDarkTheme = theme === "dark";
   const isStaticColor = obsColorEncoding === "spatialChannelColor" || obsColorEncoding === "spatialLayerColor";
   const isSetColor = obsColorEncoding === "cellSetSelection";
@@ -192640,7 +192636,7 @@ function Legend(props) {
     height: `${dynamicHeight}px`
   } }) });
 }
-const useStyles$m = makeStyles(() => ({
+const useStyles$n = makeStyles(() => ({
   multiLegend: {
     position: "absolute",
     top: "0px",
@@ -192665,7 +192661,7 @@ function MultiLegend(props) {
     pointLayerScopes,
     pointLayerCoordination
   } = props;
-  const classes = useStyles$m();
+  const classes = useStyles$n();
   const reversedSegmentationLayerScopes = useMemo(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
@@ -192738,7 +192734,7 @@ function MultiLegend(props) {
     }) : null;
   }) : null] });
 }
-const useStyles$l = makeStyles(() => ({
+const useStyles$m = makeStyles(() => ({
   channelNamesLegendContainer: {
     position: "absolute",
     bottom: "0px",
@@ -192761,7 +192757,7 @@ const useStyles$l = makeStyles(() => ({
 }));
 function ChannelNamesLegend(props) {
   const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination } = props;
-  const classes = useStyles$l();
+  const classes = useStyles$m();
   const reversedImageLayerScopes = useMemo(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
   return jsxRuntimeExports.jsx("div", { className: classes.channelNamesLegendContainer, children: imageLayerScopes ? reversedImageLayerScopes.map((layerScope) => {
     const layerCoordination = imageLayerCoordination[0][layerScope];
@@ -214166,7 +214162,7 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-1f21bfa0.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-f14612ce.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 }) }) }) }));
@@ -219879,7 +219875,7 @@ function requireTable() {
   var _default2 = _Table["default"];
   exports2["default"] = _default2;
 })(Table$2);
-const useStyles$k = makeStyles((theme) => ({
+const useStyles$l = makeStyles((theme) => ({
   selectableTable: {
     flex: "1 1 auto",
     outline: "none"
@@ -220027,7 +220023,7 @@ function SelectableTable(props) {
       onChange(null);
     }
   }, [selectedRows, allowMultiple]);
-  const classes = useStyles$k();
+  const classes = useStyles$l();
   const inputUuid = v4$1();
   const rowRenderer = ({ index: index2, style: style2 }) => (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -220052,7 +220048,7 @@ const FEATURELIST_SORT_OPTIONS = [
   "original"
 ];
 const ALT_COLNAME = "Alternate ID";
-const useStyles$j = makeStyles(() => ({
+const useStyles$k = makeStyles(() => ({
   searchBar: {
     marginBottom: "4px",
     border: "0",
@@ -220062,7 +220058,7 @@ const useStyles$j = makeStyles(() => ({
 }));
 function FeatureList(props) {
   const { hasColorEncoding, geneList = [], featureLabelsMap, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showFeatureTable, featureListSort, featureListSortKey, hasFeatureLabels, primaryColumnName } = props;
-  const classes = useStyles$j();
+  const classes = useStyles$k();
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState(geneList);
   const selectableTableSortKey = featureListSortKey === "featureIndex" ? "key" : "name";
@@ -220274,7 +220270,7 @@ const useSelectionSliderStyles = makeStyles(() => ({
     backgroundColor: "rgba(128, 128, 128, 0.7)"
   }
 }));
-const useStyles$i = makeStyles((theme) => ({
+const useStyles$j = makeStyles((theme) => ({
   paletteContainer: {
     width: "70px",
     height: "40px",
@@ -220295,10 +220291,10 @@ const useStyles$i = makeStyles((theme) => ({
   }
 }));
 const ColorPalette = ({ handleChange }) => {
-  const classes = useStyles$i();
+  const classes = useStyles$j();
   return jsxRuntimeExports.jsx("div", { className: classes.paletteContainer, "aria-label": "Color swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(S, { className: classes.button, onClick: () => handleChange(color2), "aria-label": `Change color to ${color2}`, children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes.icon }) }, color2)) });
 };
-const useStyles$h = makeStyles(() => ({
+const useStyles$i = makeStyles(() => ({
   menuButton: {
     backgroundColor: "transparent"
   },
@@ -220317,7 +220313,7 @@ function MuiSpan(props) {
 }
 function ChannelOptions$1({ handlePropertyChange, handleChannelRemove, handleIQRUpdate }) {
   const [open2, setOpen] = useState(false);
-  const classes = useStyles$h();
+  const classes = useStyles$i();
   const handleColorSelect = (color2) => {
     handlePropertyChange("color", color2);
   };
@@ -220942,7 +220938,7 @@ function LayerController$1(props) {
     minWidth: "50%"
   } })] }), jsxRuntimeExports.jsx(TabPanel, { value: tab2, index: 0, children: FullController }), jsxRuntimeExports.jsx(TabPanel, { value: tab2, index: 1, style: { marginTop: 4 }, children: jsxRuntimeExports.jsx(VolumeOptions, { loader: loader2, handleSlicerSetting, handleRenderingModeChange: setRenderingMode, renderingMode, xSlice, ySlice, zSlice, use3d, setViewState, spatialHeight, spatialWidth, modelMatrix: modelMatrix2 }) })] }) : FullController, shouldShowRemoveLayerButton ? jsxRuntimeExports.jsx(Button$1, { onClick: handleLayerRemove, fullWidth: true, variant: "outlined", style: buttonStyles, size: "small", children: "Remove Image Layer" }) : null] })] });
 }
-const useStyles$g = makeStyles(() => ({
+const useStyles$h = makeStyles(() => ({
   addButton: {
     marginTop: "10px",
     marginBottom: "10px",
@@ -220954,7 +220950,7 @@ function ImageAddIcon() {
 }
 function ImageAddButton({ imageOptions, handleImageAdd }) {
   const [open2, setOpen] = useState(false);
-  const classes = useStyles$g();
+  const classes = useStyles$h();
   const handleAdd = (imgData) => {
     setOpen((prev) => !prev);
     handleImageAdd(imgData);
@@ -221266,7 +221262,7 @@ const useEllipsisMenuStyles = makeStyles(() => ({
     width: "100px"
   }
 }));
-const useStyles$f = makeStyles(() => ({
+const useStyles$g = makeStyles(() => ({
   colorIcon: {
     width: "18px !important",
     height: "18px !important",
@@ -221318,13 +221314,13 @@ function ChannelColorPickerMenu(props) {
       setColor([rgb2.r, rgb2.g, rgb2.b]);
     }
   }
-  const classes = useStyles$f();
+  const classes = useStyles$g();
   const currentColor = color2 ? colorArrayToString(color2) : colorArrayToString(getDefaultColor(theme));
   return jsxRuntimeExports.jsx(PopperMenu, { open: isStaticColor && visible ? open2 : false, setOpen, buttonIcon: isStaticColor && visible ? jsxRuntimeExports.jsx("div", { className: clsx(classes.colorIcon, {
     [classes.colorIconOutline]: theme !== "dark" && isEqual$5(color2, [255, 255, 255])
   }), style: { backgroundColor: currentColor } }) : isColormap && visible && featureValueColormap ? jsxRuntimeExports.jsx("div", { className: classes.colorIcon, children: jsxRuntimeExports.jsx("svg", { width: "18", height: "18", children: jsxRuntimeExports.jsx("image", { x: 0, y: 0, width: 18, height: 18, preserveAspectRatio: "none", href: getXlinkHref(featureValueColormap), clipPath: "inset(0% round 4px)" }) }) }) : jsxRuntimeExports.jsx("div", { className: classes.colorIcon }), buttonClassName: classes.colorIconButton, withPaper: false, "aria-label": "Open color picker menu", children: jsxRuntimeExports.jsx(Twitter$1, { className: classes.colorPicker, disableAlpha: true, width: 108, triangle: "hide", colors: defaultPalette, color: currentColor, onChangeComplete: handleColorChange }) });
 }
-const useStyles$e = makeStyles(() => ({
+const useStyles$f = makeStyles(() => ({
   layerTypeSpotIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -221337,7 +221333,7 @@ const useStyles$e = makeStyles(() => ({
 function SpotLayerEllipsisMenu(props) {
   const { strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  useStyles$e();
+  useStyles$f();
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -221358,7 +221354,7 @@ function SpotLayerController(props) {
   const Visibility = useMemo(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const classes = useStyles$e();
+  const classes = useStyles$f();
   const lcClasses = useControllerSectionStyles();
   const menuClasses = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -221368,7 +221364,7 @@ function SpotLayerController(props) {
   const handleOpacityChange = useCallback((e3, v2) => setOpacity(v2), [setOpacity]);
   return jsxRuntimeExports.jsx(Grid$3, { item: true, className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(M$1, { className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(Button$1, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle spot layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor, palette: palette2, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Typography$1, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(Slider$1, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(SpotLayerEllipsisMenu, { filled, setFilled, strokeWidth, setStrokeWidth, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(SvgSpots, { className: classes.layerTypeSpotIcon }) })] }) }) });
 }
-const useStyles$d = makeStyles(() => ({
+const useStyles$e = makeStyles(() => ({
   layerTypePointIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -221399,7 +221395,7 @@ function PointLayerController(props) {
   const Visibility = useMemo(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const classes = useStyles$d();
+  const classes = useStyles$e();
   const lcClasses = useControllerSectionStyles();
   const menuClasses = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -221409,7 +221405,7 @@ function PointLayerController(props) {
   const handleOpacityChange = useCallback((e3, v2) => setOpacity(v2), [setOpacity]);
   return jsxRuntimeExports.jsx(Grid$3, { item: true, className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(M$1, { className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(Button$1, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor, palette: palette2, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Typography$1, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(Slider$1, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${label2}` }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 1, children: jsxRuntimeExports.jsx(SvgPoints, { className: classes.layerTypePointIcon }) })] }) }) });
 }
-const useStyles$c = makeStyles(() => ({
+const useStyles$d = makeStyles(() => ({
   layerTypeSegmentationIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -221422,7 +221418,7 @@ const useStyles$c = makeStyles(() => ({
 function SegmentationChannelEllipsisMenu(props) {
   const { obsType, featureType, featureValueType, strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  useStyles$c();
+  useStyles$d();
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -221470,7 +221466,7 @@ function SegmentationChannelController(props) {
   const Visibility = useMemo(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialChannelColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const classes = useStyles$c();
+  const classes = useStyles$d();
   const lcClasses = useControllerSectionStyles();
   const menuClasses = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -222706,7 +222702,7 @@ function useQuery(arg1, arg2, arg3) {
   const parsedOptions = parseQueryArgs(arg1, arg2, arg3);
   return useBaseQuery(parsedOptions, QueryObserver);
 }
-const useStyles$b = makeStyles(() => ({
+const useStyles$c = makeStyles(() => ({
   channelMenuButton: {
     backgroundColor: "transparent",
     padding: "3px 0",
@@ -222720,7 +222716,7 @@ const useStyles$b = makeStyles(() => ({
 function ChannelOptions(props) {
   const { onRemove: onRemove2, onResetWindowUsingIQR, showValueExtent, setShowValueExtent } = props;
   const [open2, setOpen] = useState(false);
-  const classes = useStyles$b();
+  const classes = useStyles$c();
   const selectClasses = useSelectStyles();
   const menuClasses = useEllipsisMenuStyles();
   function handleRemove() {
@@ -222733,7 +222729,7 @@ function ChannelOptions(props) {
   const domainTypeId = $bdb11010cef70236$export$f680877a34711e37();
   return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, { fontSize: "small" }), buttonClassName: classes.channelMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, placement: "bottom-end", withPaper: true, "aria-label": "Open channel options menu", children: [jsxRuntimeExports.jsxs(y$5, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: domainTypeId, children: "Slider Extent: " }), jsxRuntimeExports.jsxs(Select$1, { native: true, onChange: handleDomainTypeChange, value: showValueExtent ? "Value Min/Max" : "Dtype Min/Max", inputProps: { id: domainTypeId, "aria-label": "Slider extent selector" }, classes: { root: selectClasses.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "Value Min/Max", children: "Value Min/Max" }), jsxRuntimeExports.jsx("option", { value: "Dtype Min/Max", children: "Dtype Min/Max" })] })] }), jsxRuntimeExports.jsx(y$5, { dense: true, disableGutters: true, component: "button", onClick: onResetWindowUsingIQR, className: classes.menuItemButton, "aria-label": "Click to use IQR for channel", children: "Reset window using IQR" }), jsxRuntimeExports.jsx(y$5, { dense: true, disableGutters: true, component: "button", onClick: handleRemove, className: classes.menuItemButton, "aria-label": "Click to remove channel", children: "Remove channel" })] });
 }
-const useStyles$a = makeStyles(() => ({
+const useStyles$b = makeStyles(() => ({
   channelSlider: {
     marginTop: "7px"
   }
@@ -222743,7 +222739,7 @@ function ChannelSlider(props) {
   const rgbColor = toRgbUIString(colormapOn, color2, theme);
   const dtype = image2 == null ? void 0 : image2.getDtype();
   const fullDomain = dtype ? DOMAINS[dtype] : [0, 0];
-  const classes = useStyles$a();
+  const classes = useStyles$b();
   useEffect(() => {
     if (!window2 && !disabled && Array.isArray(minMaxDomain)) {
       setWindow2(minMaxDomain);
@@ -222758,7 +222754,7 @@ function ChannelSlider(props) {
     return `${labelPrefix} for ${rgbColor} colormap channel`;
   }, getAriaValueText: () => `Current colormap values: ${rgbColor}-${window2}`, min: min2, max: max2, step: step2, orientation: "horizontal", className: classes.channelSlider, style: { color: rgbColor }, disabled });
 }
-const useStyles$9 = makeStyles(() => ({
+const useStyles$a = makeStyles(() => ({
   visibilityCheckbox: {
     padding: "8px 0"
   }
@@ -222772,10 +222768,10 @@ function getCheckboxColor(colormapOn, color2, theme) {
 function ChannelVisibilityCheckbox(props) {
   const { color: color2, visible, setVisible, disabled, theme, colormapOn } = props;
   const rgbColor = getCheckboxColor(colormapOn, color2, theme);
-  const classes = useStyles$9();
+  const classes = useStyles$a();
   return jsxRuntimeExports.jsx(w$3, { onChange: (e3, v2) => setVisible(v2), checked: visible, disabled, className: classes.visibilityCheckbox, style: { color: rgbColor, "&$checked": { color: rgbColor } }, inputProps: { "aria-label": "Toggle channel visibility" } });
 }
-const useStyles$8 = makeStyles(() => ({
+const useStyles$9 = makeStyles(() => ({
   oneLineChannelSelect: {
     width: "90%",
     marginLeft: "5%",
@@ -222784,7 +222780,7 @@ const useStyles$8 = makeStyles(() => ({
 }));
 function ChannelSelectionDropdown(props) {
   const { featureIndex, targetC, setTargetC, setWindow: setWindow2, disabled } = props;
-  const classes = useStyles$8();
+  const classes = useStyles$9();
   const selectClasses = useSelectStyles();
   function handleChange(event2) {
     setTargetC(event2.target.value === "" ? null : Number(event2.target.value));
@@ -222866,7 +222862,7 @@ function ClippingSliders(props) {
   const [xSliceInit, ySliceInit, zSliceInit] = image2.getBoundingCube();
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(DimensionSlider, { label: "X", boundingSlice: xSliceInit, sliceValue: spatialSliceX, setSliceValue: setSpatialSliceX }), jsxRuntimeExports.jsx(DimensionSlider, { label: "Y", boundingSlice: ySliceInit, sliceValue: spatialSliceY, setSliceValue: setSpatialSliceY }), jsxRuntimeExports.jsx(DimensionSlider, { label: "Z", boundingSlice: zSliceInit, sliceValue: spatialSliceZ, setSliceValue: setSpatialSliceZ })] });
 }
-const useStyles$7 = makeStyles(() => ({
+const useStyles$8 = makeStyles(() => ({
   imageLayerButton: {
     borderStyle: "dashed",
     marginTop: "10px",
@@ -222951,7 +222947,7 @@ function ImageLayerController(props) {
   }, [visible, setVisible]);
   const handleOpacityChange = useCallback((e3, v2) => setOpacity(v2), [setOpacity]);
   const handleOpenChange = useCallback(() => setOpen((prev) => !prev), []);
-  const classes = useStyles$7();
+  const classes = useStyles$8();
   const menuClasses = useEllipsisMenuStyles();
   const controllerSectionClasses = useControllerSectionStyles();
   const isMultiChannel = photometricInterpretation !== "RGB";
@@ -222962,7 +222958,7 @@ function ImageLayerController(props) {
     return jsxRuntimeExports.jsx(ImageChannelController, { theme, coordinationScopesRaw, layerScope, channelScope: cScope, targetT, targetZ, targetC: channelIndex, setTargetC: setSpatialTargetC, visible: spatialChannelVisible, setVisible: setSpatialChannelVisible, opacity: spatialChannelOpacity, setOpacity: setSpatialChannelOpacity, color: spatialChannelColor, setColor: setSpatialChannelColor, window: spatialChannelWindow, setWindow: setSpatialChannelWindow, colormapOn: colormap !== null, featureIndex, image: image2, spatialRenderingMode }, cScope);
   }), jsxRuntimeExports.jsx(Button$1, { disabled: channelScopes.length === MAX_CHANNELS$1 || channelScopes.length === imageNumChannels, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", className: classes.imageLayerButton, startIcon: jsxRuntimeExports.jsx(AddIcon, {}), size: "small", "aria-label": "Add a channel to this layer", children: "Add Channel" })] }) : null, is3dMode && image2 ? jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", justifyContent: "space-between", className: classes.imageChannelControllerGrid, children: [jsxRuntimeExports.jsx(Typography$1, { className: classes.clippingPanesLabel, children: "Clipping planes:" }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 12, className: classes.clippingSliders, children: jsxRuntimeExports.jsx(ClippingSliders, { image: image2, spatialSliceX, spatialSliceY, spatialSliceZ, setSpatialSliceX, setSpatialSliceY, setSpatialSliceZ }) })] }) : null] }) });
 }
-const useStyles$6 = makeStyles((theme) => ({
+const useStyles$7 = makeStyles((theme) => ({
   dimensionsIcon: {
     height: "40px",
     width: "40px",
@@ -222986,7 +222982,7 @@ const useStyles$6 = makeStyles((theme) => ({
 function GlobalDimensionSlider(props) {
   const { label: label2, targetValue, setTargetValue, min: min2 = 0, max: max2 = 0, spatialRenderingMode = null, setSpatialRenderingMode = null } = props;
   const lcClasses = useControllerSectionStyles();
-  const classes = useStyles$6();
+  const classes = useStyles$7();
   const isForZ = spatialRenderingMode !== null;
   function handleRenderingModeChange(event2) {
     setSpatialRenderingMode(event2.target.checked ? "3D" : "2D");
@@ -223243,7 +223239,7 @@ function LinkControllerSubscriber(props) {
   } = props;
   return jsxRuntimeExports.jsx(TitleInfo, { title: title2, closeButtonVisible, removeGridComponent, isScroll: true, theme, isReady: true, children: jsxRuntimeExports.jsx(LinkController, { linkIDInit: linkID, authToken, linkEndpoint, websocketEndpoint, fileTypes, stores, coordinationTypes }) });
 }
-const useStyles$5 = makeStyles(() => ({
+const useStyles$6 = makeStyles(() => ({
   info: {
     // details
     fontSize: "80%",
@@ -223264,7 +223260,7 @@ const useStyles$5 = makeStyles(() => ({
 }));
 function Status(props) {
   const { info: info2, warn: warn2 } = props;
-  const classes = useStyles$5();
+  const classes = useStyles$6();
   const messages2 = [];
   if (info2) {
     messages2.push(jsxRuntimeExports.jsx("p", { className: classes.info, children: info2 }, "info"));
@@ -224974,7 +224970,7 @@ ZarrMultivecDataFetcher.config = {
   type: "zarr-multivec"
 };
 var ZarrMultivecDataFetcher_default = ZarrMultivecDataFetcher;
-const useStyles$4 = makeStyles((theme) => ({
+const useStyles$5 = makeStyles((theme) => ({
   higlassTitleWrapper: {
     height: "calc(100% - 20px)",
     "& > div:nth-child(2)": {
@@ -225025,7 +225021,7 @@ const useStyles$4 = makeStyles((theme) => ({
 }));
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-499258e3.js");
+  const { HiGlassComponent } = await import("./higlass-ac63bd26.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -225139,7 +225135,7 @@ function HiGlassLazy(props) {
     setGenomicTargetX,
     setGenomicTargetY
   ]);
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return jsxRuntimeExports.jsx("div", { className: classes.higlassWrapperParent, children: jsxRuntimeExports.jsx("div", { className: classes.higlassWrapper, ref: containerRef, style: { height: `${height2}px` }, children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazyHiGlassComponent, { ref: setHgInstance, zoomFixed: false, viewConfig: hgViewConfig, options: hgOptions }) }) }) });
 }
 HiGlassLazy.defaultProps = {
@@ -225156,7 +225152,7 @@ const urls = [];
 function HiGlassSubscriber(props) {
   const { coordinationScopes, theme, hgViewConfig, closeButtonVisible, downloadButtonVisible, removeGridComponent } = props;
   const [width2, height2, containerRef] = useGridItemSize();
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   return jsxRuntimeExports.jsx("div", { className: classes.higlassTitleWrapper, children: jsxRuntimeExports.jsx(TitleInfo, { title: "HiGlass", closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady: true, urls, children: jsxRuntimeExports.jsx("div", { className: classes.higlassLazyWrapper, ref: containerRef, children: jsxRuntimeExports.jsx(HiGlassLazy, { coordinationScopes, theme, hgViewConfig, height: height2 }) }) }) });
 }
 const REFERENCE_TILESETS = {
@@ -225327,7 +225323,7 @@ function GenomicProfilesSubscriber(props) {
     higlassServer,
     assembly
   ]);
-  const classes = useStyles$4();
+  const classes = useStyles$5();
   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 decodeBase64(base64, enableUnicode) {
@@ -225994,7 +225990,7 @@ span.CodeMirror-selectedtext {
   height: 100%
 }
 `;
-const useStyles$3 = makeStyles(() => ({
+const useStyles$4 = makeStyles(() => ({
   neuroglancerWrapper: {
     position: "relative",
     height: "100%",
@@ -227973,7 +227969,7 @@ const useStyles$3 = makeStyles(() => ({
   }
 }));
 const LazyReactNeuroglancer = React__default.lazy(async () => {
-  const ReactNeuroglancer = await import("./index-2732b061.js").then((n3) => n3.i);
+  const ReactNeuroglancer = await import("./index-e5a1091b.js").then((n3) => n3.i);
   return ReactNeuroglancer;
 });
 function createWorker() {
@@ -227981,7 +227977,7 @@ function createWorker() {
 }
 function Neuroglancer(props) {
   const { viewerState, onViewerStateChanged } = props;
-  const classes = useStyles$3();
+  const classes = useStyles$4();
   const bundleRoot = useMemo(() => createWorker(), []);
   const handleStateChanged = useCallback((newState) => {
     if (JSON.stringify(newState) !== JSON.stringify(viewerState)) {
@@ -232988,7 +232984,7 @@ function CellSetExpressionPlot(props) {
     position: "relative"
   } });
 }
-const useStyles$2 = makeStyles(() => ({
+const useStyles$3 = makeStyles(() => ({
   vegaContainer: {
     display: "flex",
     flex: "1 1 auto",
@@ -233128,7 +233124,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, helpText = ViewHelpMapping.OBS_SET_FEATURE_VALUE_DISTRIBUTION } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   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);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -284774,7 +284770,7 @@ const VEGA_THEMES = {
   }
 };
 const DATASET_NAME = "table";
-const useStyles$1 = makeStyles((theme) => ({
+const useStyles$2 = makeStyles((theme) => ({
   "@global": {
     "#vg-tooltip-element.vg-tooltip.custom-theme": {
       boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
@@ -284808,7 +284804,7 @@ function renderTooltipContents(tooltipText) {
 }
 function VegaPlot(props) {
   const { spec: partialSpec, data: data2, getTooltipText, signalListeners } = props;
-  const classes = useStyles$1();
+  const classes = useStyles$2();
   const tooltipClasses = styles$1();
   const tooltipHandler = useMemo(() => {
     if (typeof getTooltipText === "function") {
@@ -284968,7 +284964,7 @@ function CellSetSizesPlot(props) {
 }
 function CellSetSizesPlotSubscriber(props) {
   const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: titleOverride, helpText = ViewHelpMapping.OBS_SET_SIZES } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   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);
   const title2 = titleOverride || `${capitalize$2(obsType)} Set Sizes`;
@@ -285074,7 +285070,7 @@ function ExpressionHistogram(props) {
 }
 function ExpressionHistogramSubscriber(props) {
   const { coordinationScopes, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_VALUE_HISTOGRAM } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   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);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -285273,7 +285269,7 @@ function useExpressionSummaries(sampleEdges, sampleSets, sampleSetSelection, exp
 function DotPlotSubscriber(props) {
   var _a3;
   const { coordinationScopes, removeGridComponent, theme, title: title2 = "Dot Plot", transpose: transpose2 = true, helpText = ViewHelpMapping.DOT_PLOT } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   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);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -285415,7 +285411,7 @@ function FeatureBarPlot(props) {
 }
 function FeatureBarPlotSubscriber(props) {
   const { coordinationScopes, removeGridComponent, theme, yMin = 0, yUnits = null, helpText = ViewHelpMapping.FEATURE_BAR_PLOT } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   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);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -285504,7 +285500,7 @@ function uidGenerator(prefix2) {
   };
 }
 function Treemap(props) {
-  const { obsCounts, obsColorEncoding, hierarchyLevels, theme, width: width2, height: height2, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom } = props;
+  const { obsCounts, obsColorEncoding, hierarchyLevels, theme, width: width2, height: height2, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, marginTop = 5, marginRight = 5, marginLeft = 80, marginBottom, onNodeClick } = props;
   const hierarchyData = useMemo(() => {
     if (!obsCounts) {
       return null;
@@ -285558,7 +285554,11 @@ function Treemap(props) {
     leaf.append("rect").attr("id", (d) => {
       d.leafUid = getLeafUid();
       return d.leafUid.id;
-    }).attr("fill", (d) => colorScale2(getPathForColoring(d))).attr("fill-opacity", 0.8).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0);
+    }).attr("fill", (d) => colorScale2(getPathForColoring(d))).attr("fill-opacity", 0.8).attr("width", (d) => d.x1 - d.x0).attr("height", (d) => d.y1 - d.y0).on("click", (e3, d) => {
+      var _a3, _b3, _c3;
+      const obsSetPath2 = hierarchyLevels[0] === "obsSet" ? (_b3 = (_a3 = d.parent) == null ? void 0 : _a3.data) == null ? void 0 : _b3[0] : (_c3 = d.data) == null ? void 0 : _c3[0];
+      onNodeClick(obsSetPath2);
+    });
     leaf.append("clipPath").attr("id", (d) => {
       d.clipUid = getClipUid();
       return d.clipUid.id;
@@ -285590,7 +285590,8 @@ function Treemap(props) {
     obsSetColorScale,
     sampleSetColorScale,
     obsColorEncoding,
-    hierarchyLevels
+    hierarchyLevels,
+    onNodeClick
   ]);
   return jsxRuntimeExports.jsx("svg", { ref: svgRef, style: {
     top: 0,
@@ -285624,7 +285625,7 @@ function TreemapOptions(props) {
 const DEFAULT_HIERARCHY_LEVELS = ["obsSet", "sampleSet"];
 function TreemapSubscriber(props) {
   const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.TREEMAP } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, obsFilter, obsHighlight, obsSetSelection, obsSetFilter, obsSelection, obsSelectionMode, obsSetHighlight, obsSetColor, obsColorEncoding, additionalObsSets, sampleType, sampleSetSelection, sampleSetFilter, sampleSetColor, sampleSelection, sampleSelectionMode, sampleFilter, sampleFilterMode, sampleHighlight, hierarchyLevels }, { setObsFilter, setObsSelection: setObsSelection2, setObsSetFilter, setObsSetSelection, setObsSelectionMode, setObsFilterMode, setObsHighlight, setObsSetColor, setObsColorEncoding, setAdditionalObsSets, setSampleFilter, setSampleSetFilter, setSampleFilterMode, setSampleSelection, setSampleSetSelection, setSampleSelectionMode, setSampleHighlight, setSampleSetColor, setHierarchyLevels }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.TREEMAP], coordinationScopes);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -285717,7 +285718,10 @@ function TreemapSubscriber(props) {
     sampleSetSelection
     // TODO: consider filtering-related coordination values
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: `Treemap of ${capitalize$2(pluralize(obsType, 2))}`, info: `${commaNumber(obsCount)} ${pluralize(obsType, obsCount)} from ${commaNumber(sampleCount)} ${pluralize(sampleType, sampleCount)}`, removeGridComponent, urls: urls2, theme, isReady, helpText, options: jsxRuntimeExports.jsx(TreemapOptions, { obsType, sampleType, obsColorEncoding, setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(Treemap, { obsCounts, sampleCounts, obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme, width: width2, height: height2, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection }) }) });
+  const onNodeClick = useCallback((obsSetPath2) => {
+    setObsSetSelection([obsSetPath2]);
+  }, [setObsSetSelection]);
+  return jsxRuntimeExports.jsx(TitleInfo, { title: `Treemap of ${capitalize$2(pluralize(obsType, 2))}`, info: `${commaNumber(obsCount)} ${pluralize(obsType, obsCount)} from ${commaNumber(sampleCount)} ${pluralize(sampleType, sampleCount)}`, removeGridComponent, urls: urls2, theme, isReady, helpText, options: jsxRuntimeExports.jsx(TreemapOptions, { obsType, sampleType, obsColorEncoding, setObsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, setHierarchyLevels }), children: jsxRuntimeExports.jsx("div", { ref: containerRef, className: classes.vegaContainer, children: jsxRuntimeExports.jsx(Treemap, { obsCounts, sampleCounts, obsColorEncoding, hierarchyLevels: hierarchyLevels || DEFAULT_HIERARCHY_LEVELS, theme, width: width2, height: height2, obsType, sampleType, obsSetColor, sampleSetColor, obsSetSelection, sampleSetSelection, onNodeClick }) }) });
 }
 function VolcanoPlot(props) {
   const { theme, width: width2, height: height2, obsType, featureType, obsSetsColumnNameMapping, sampleSetsColumnNameMapping, sampleSetSelection, obsSetSelection, obsSetColor, sampleSetColor, data: data2, marginTop = 5, marginRight = 5, marginLeft = 50, marginBottom = 50, onFeatureClick, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold } = props;
@@ -285760,7 +285764,7 @@ function VolcanoPlot(props) {
     svg2.append("g").attr("transform", `translate(0,${height2 - marginBottom})`).call(axisBottom(xScale));
     svg2.append("g").attr("transform", `translate(${marginLeft},0)`).call(axisLeft(yScale));
     const titleG = svg2.append("g");
-    const fgColor = "black";
+    const fgColor = colorArrayToString(getDefaultForegroundColor(theme));
     titleG.append("text").attr("text-anchor", "middle").attr("x", -innerHeight / 2).attr("y", 15).attr("transform", "rotate(-90)").text("-log10 p-value").style("font-size", "12px").style("fill", fgColor);
     titleG.append("text").attr("text-anchor", "middle").attr("x", marginLeft + innerWidth / 2).attr("y", height2 - 10).text("log2 fold-change").style("font-size", "12px").style("fill", fgColor);
     const obsSetsColumnNameMappingReversed = Object.fromEntries(Object.entries(obsSetsColumnNameMapping).map(([key2, value2]) => [value2, key2]));
@@ -285865,7 +285869,7 @@ function VolcanoPlotOptions(props) {
 }
 function VolcanoPlotSubscriber(props) {
   const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.VOLCANO_PLOT } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const loaders = useLoaders();
   const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.VOLCANO_PLOT], coordinationScopes);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -286048,7 +286052,7 @@ function CellSetCompositionBarPlot(props) {
 }
 function CellSetCompositionBarPlotSubscriber(props) {
   const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.OBS_SET_COMPOSITION_BAR_PLOT } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const loaders = useLoaders();
   const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_COMPOSITION_BAR_PLOT], coordinationScopes);
   const [width2, height2, containerRef] = useGridItemSize();
@@ -286178,7 +286182,7 @@ function FeatureSetEnrichmentBarPlot(props) {
       x: {
         field: "minusLog10p",
         type: "quantitative",
-        title: "- log10 p-value"
+        title: "-log10 p-value"
       },
       color: {
         field: "key",
@@ -286228,7 +286232,7 @@ function FeatureSetEnrichmentBarPlot(props) {
 }
 function FeatureSetEnrichmentBarPlotSubscriber(props) {
   const { coordinationScopes, removeGridComponent, theme, helpText = ViewHelpMapping.FEATURE_SET_ENRICHMENT_BAR_PLOT } = props;
-  const classes = useStyles$2();
+  const classes = useStyles$3();
   const loaders = useLoaders();
   useAsyncFunction(AsyncFunctionType.TRANSFORM_FEATURE);
   const [{ dataset, obsType, sampleType, featureType, featureValueType, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection, obsSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, featurePointSignificanceThreshold, featurePointFoldChangeThreshold, featureLabelSignificanceThreshold, featureLabelFoldChangeThreshold, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY, featureSelection, sampleSetSelection, sampleSetColor }, { setObsFilter: setCellFilter, setObsSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setFeaturePointSignificanceThreshold, setFeaturePointFoldChangeThreshold, setFeatureLabelSignificanceThreshold, setFeatureLabelFoldChangeThreshold, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY, setFeatureSelection, setSampleSetSelection, setSampleSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_SET_ENRICHMENT_BAR_PLOT], coordinationScopes);
@@ -338565,7 +338569,7 @@ class GlbDataLoader extends AbstractTwoStepLoader {
     });
   }
 }
-const useStyles = makeStyles(() => ({
+const useStyles$1 = makeStyles(() => ({
   header: {
     marginTop: "10px",
     marginBottom: "10px"
@@ -338608,7 +338612,7 @@ function ConfirmatoryCart(props) {
     // eslint-disable-next-line no-unused-vars
     setCurrentStratificationSelection
   } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [expandedAccordions, setExpandedAccordions] = React__default.useState([
     "agnostic",
     "specific",
@@ -340804,7 +340808,7 @@ const ListboxComponent = React__default.forwardRef((props, ref2) => {
 });
 function SelectAgnostic(props) {
   const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [selectedItem, setSelectedItem] = React__default.useState(null);
   const [potentialItems, setPotentialItems] = React__default.useState([]);
   const handleChange = async (event2) => {
@@ -345570,7 +345574,7 @@ const columns = [
 ];
 function SelectSpecific(props) {
   const { currentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, getEdges } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const queries = useQueries({
     queries: (currentModalityAgnosticSelection == null ? void 0 : currentModalityAgnosticSelection.map((item) => ({
       queryKey: [item.nodeType, item.kgId],
@@ -345622,7 +345626,7 @@ const steps$1 = [
 ];
 function ConfirmatoryStepper(props) {
   const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, getEdges, stratifications, onFinish } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [activeStep, setActiveStep] = React__default.useState(0);
   const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ new Set());
   const isStepOptional = (step2) => step2 === 2;
@@ -345675,7 +345679,7 @@ const steps = [
 ];
 function ExploratoryStepper(props) {
   const { autocompleteNode, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, getEdges, stratifications, onFinish } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const [activeStep, setActiveStep] = React__default.useState(0);
   const [skipped, setSkipped] = React__default.useState(/* @__PURE__ */ new Set());
   const isStepOptional = (step2) => step2 === 2;
@@ -345725,7 +345729,7 @@ function ExploratoryStepper(props) {
 }
 function ScmdUi(props) {
   const { mode: modeProp, setMode, step: stepProp, setStep, currentModalityAgnosticSelection, setCurrentModalityAgnosticSelection, currentModalitySpecificSelection, setCurrentModalitySpecificSelection, currentStratificationSelection, setCurrentStratificationSelection, autocompleteNode, getEdges, stratifications, onFinish } = props;
-  const classes = useStyles();
+  const classes = useStyles$1();
   const mode = modeProp || "confirmatory";
   const [tempIsVisible, setTempIsVisible] = useState(true);
   const isConfirmatoryMode = mode === "confirmatory";
@@ -345800,11 +345804,47 @@ function BiomarkerSelectSubscriber(props) {
     setViewConfig(newViewConfig);
   } }) : null });
 }
+const useStyles = makeStyles((theme) => ({
+  buttonContainer: {
+    position: "absolute",
+    right: 0,
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    height: "100%"
+  },
+  headingContainer: {
+    backgroundColor: "transparent"
+  },
+  headingSectionContainer: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    position: "relative"
+  },
+  headingText: {
+    margin: 0,
+    color: theme.palette.primaryForeground
+  }
+}));
 function ComparativeHeadingSubscriber(props) {
   var _a3, _b3;
   const { coordinationScopes } = props;
-  const [{ sampleSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.COMPARATIVE_HEADING], coordinationScopes);
-  return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sampleSetSelection && sampleSetSelection.length === 2 ? jsxRuntimeExports.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "row" }, children: [jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: jsxRuntimeExports.jsx("h2", { children: (_a3 = sampleSetSelection == null ? void 0 : sampleSetSelection[0]) == null ? void 0 : _a3.at(-1) }) }), jsxRuntimeExports.jsx("div", { style: { width: "5%" }, children: jsxRuntimeExports.jsx("h2", { style: { textAlign: "right" }, children: "vs. " }) }), jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: jsxRuntimeExports.jsx("h2", { children: (_b3 = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b3.at(-1) }) })] }) : null });
+  const [{ sampleSetSelection, featureSelection }, {
+    setSampleSetSelection
+    // TODO: buttons for modification of featureSelection
+    // setFeatureSelection,
+  }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.COMPARATIVE_HEADING], coordinationScopes);
+  const classes = useStyles();
+  const swapSampleSets = useCallback(() => {
+    if ((sampleSetSelection == null ? void 0 : sampleSetSelection.length) === 2) {
+      setSampleSetSelection([
+        sampleSetSelection[1],
+        sampleSetSelection[0]
+      ]);
+    }
+  }, [sampleSetSelection, setSampleSetSelection]);
+  return jsxRuntimeExports.jsxs("div", { className: classes.headingContainer, children: [sampleSetSelection && sampleSetSelection.length === 2 ? jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [jsxRuntimeExports.jsx("div", { style: { width: "45%" }, children: jsxRuntimeExports.jsx("h2", { className: classes.headingText, children: (_a3 = sampleSetSelection == null ? void 0 : sampleSetSelection[0]) == null ? void 0 : _a3.at(-1) }) }), jsxRuntimeExports.jsx("div", { style: { width: "5%" }, children: jsxRuntimeExports.jsx("h2", { className: classes.headingText, style: { textAlign: "right" }, children: "vs. " }) }), jsxRuntimeExports.jsx("div", { style: { width: "50%" }, children: jsxRuntimeExports.jsx("h2", { className: classes.headingText, children: (_b3 = sampleSetSelection == null ? void 0 : sampleSetSelection[1]) == null ? void 0 : _b3.at(-1) }) }), jsxRuntimeExports.jsx("div", { className: classes.buttonContainer, children: jsxRuntimeExports.jsx("button", { onClick: swapSampleSets, type: "button", children: "Swap" }) })] }) : null, featureSelection && featureSelection.length > 0 ? jsxRuntimeExports.jsxs("div", { className: classes.headingSectionContainer, children: [jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("h3", { className: classes.headingText, children: "Selected Biomarkers: " }) }), featureSelection == null ? void 0 : featureSelection.map((featureName, i2) => jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsxs("h3", { className: classes.headingText, children: [featureName, i2 < featureSelection.length - 1 ? jsxRuntimeExports.jsx("span", { children: ", " }) : null] }) }))] }) : null] });
 }
 function isArray3(value2) {
   return !Array.isArray ? getTag(value2) === "[object Array]" : Array.isArray(value2);

package/dist/{index-2732b061.js → index-e5a1091b.js}

@@ -1,4 +1,4 @@
-import { aV as _export, aW as _coreExports, aX as _fails, aY as _toObject, aZ as _objectKeys, g as getDefaultExportFromCjs, a_ as _wksExports, a$ as _cof, b0 as _iterators, b1 as _anObject, b2 as _hide, b3 as _ctx, b4 as _toLength, b5 as _globalExports, b6 as _objectDp, b7 as _descriptors, b8 as _isObject, b9 as _metaExports, ba as _objectCreate, bb as _iterDefine, bc as _iterStep, bd as _isArray, be as _iobject, bf as _setToStringTag, bg as _aFunction, bh as _propertyDesc, bi as _root, bj as _baseGetTag, bk as isObjectLike_1, bl as isObject_1, bm as _Symbol$iterator, bn as _Object$assign, bo as _objectGopd, bp as _toIobject, bq as _html, br as _domCreate, bs as _library, bt as _Object$defineProperty, bu as _Symbol, bv as _objectPie, bw as _has, bx as _redefine, by as _objectAssign, aS as commonjsGlobal, bz as getAugmentedNamespace, bA as propTypesExports } from "./index-ec9f6e92.js";
+import { aV as _export, aW as _coreExports, aX as _fails, aY as _toObject, aZ as _objectKeys, g as getDefaultExportFromCjs, a_ as _wksExports, a$ as _cof, b0 as _iterators, b1 as _anObject, b2 as _hide, b3 as _ctx, b4 as _toLength, b5 as _globalExports, b6 as _objectDp, b7 as _descriptors, b8 as _isObject, b9 as _metaExports, ba as _objectCreate, bb as _iterDefine, bc as _iterStep, bd as _isArray, be as _iobject, bf as _setToStringTag, bg as _aFunction, bh as _propertyDesc, bi as _root, bj as _baseGetTag, bk as isObjectLike_1, bl as isObject_1, bm as _Symbol$iterator, bn as _Object$assign, bo as _objectGopd, bp as _toIobject, bq as _html, br as _domCreate, bs as _library, bt as _Object$defineProperty, bu as _Symbol, bv as _objectPie, bw as _has, bx as _redefine, by as _objectAssign, aS as commonjsGlobal, bz as getAugmentedNamespace, bA as propTypesExports } from "./index-13b53ff7.js";
 import React__default from "react";
 function _mergeNamespaces(n, m) {
   for (var i = 0; i < m.length; i++) {

package/dist/{index-1f21bfa0.js → index-f14612ce.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, R as Raycaster, O as OrthographicCamera, P as PerspectiveCamera, S as Scene, a as PCFSoftShadowMap, N as NoToneMapping, A as ACESFilmicToneMapping, V as Vector2, b as Vector3, L as Layers, T as Texture, c as RGBAFormat, U as UnsignedByteType, W as WebGLRenderer, C as Camera, B as BasicShadowMap, d as PCFShadowMap, e as VSMShadowMap, f as BufferGeometry, M as Material, h as Color, i as Clock, _ as _extends, j as THREE, G as Group, k as Matrix4, l as TrianglesDrawMode, m as TriangleFanDrawMode, n as TriangleStripDrawMode, o as REVISION, p as Ray$1, q as Plane, E as EventDispatcher, r as MOUSE, s as TOUCH, Q as Quaternion, t as Spherical, u as Loader, v as LoaderUtils, F as FileLoader, w as SpotLight, x as PointLight, D as DirectionalLight, y as MeshBasicMaterial, z as MeshPhysicalMaterial, I as InstancedMesh, H as Object3D, J as TextureLoader, K as ImageBitmapLoader, X as BufferAttribute, Y as InterleavedBuffer, Z as LinearFilter, $ as LinearMipmapLinearFilter, a0 as RepeatWrapping, a1 as PointsMaterial, a2 as LineBasicMaterial, a3 as MeshStandardMaterial, a4 as DoubleSide, a5 as PropertyBinding, a6 as SkinnedMesh, a7 as Mesh, a8 as LineSegments, a9 as Line$1, aa as LineLoop, ab as Points, ac as MathUtils, ad as Skeleton, ae as InterpolateLinear, af as AnimationClip, ag as Bone, ah as NearestFilter, ai as NearestMipmapNearestFilter, aj as LinearMipmapNearestFilter, ak as NearestMipmapLinearFilter, al as ClampToEdgeWrapping, am as MirroredRepeatWrapping, an as InterpolateDiscrete, ao as FrontSide, ap as InterleavedBufferAttribute, aq as VectorKeyframeTrack, ar as QuaternionKeyframeTrack, as as NumberKeyframeTrack, at as Box3, au as Sphere, av as Interpolant, aw as InstancedBufferGeometry, ax as Float32BufferAttribute, ay as InstancedInterleavedBuffer, az as WireframeGeometry, aA as ShaderMaterial, aB as UniformsUtils, aC as UniformsLib, aD as Vector4, aE as Line3, aF as SphereGeometry, aG as Triangle, aH as BackSide, aI as jsxRuntimeExports, aJ as Matrix3, aK as CoordinationType, aL as Data3DTexture, aM as RedFormat, aN as FloatType, aO as getImageSize } from "./index-ec9f6e92.js";
+import { g as getDefaultExportFromCjs, R as Raycaster, O as OrthographicCamera, P as PerspectiveCamera, S as Scene, a as PCFSoftShadowMap, N as NoToneMapping, A as ACESFilmicToneMapping, V as Vector2, b as Vector3, L as Layers, T as Texture, c as RGBAFormat, U as UnsignedByteType, W as WebGLRenderer, C as Camera, B as BasicShadowMap, d as PCFShadowMap, e as VSMShadowMap, f as BufferGeometry, M as Material, h as Color, i as Clock, _ as _extends, j as THREE, G as Group, k as Matrix4, l as TrianglesDrawMode, m as TriangleFanDrawMode, n as TriangleStripDrawMode, o as REVISION, p as Ray$1, q as Plane, E as EventDispatcher, r as MOUSE, s as TOUCH, Q as Quaternion, t as Spherical, u as Loader, v as LoaderUtils, F as FileLoader, w as SpotLight, x as PointLight, D as DirectionalLight, y as MeshBasicMaterial, z as MeshPhysicalMaterial, I as InstancedMesh, H as Object3D, J as TextureLoader, K as ImageBitmapLoader, X as BufferAttribute, Y as InterleavedBuffer, Z as LinearFilter, $ as LinearMipmapLinearFilter, a0 as RepeatWrapping, a1 as PointsMaterial, a2 as LineBasicMaterial, a3 as MeshStandardMaterial, a4 as DoubleSide, a5 as PropertyBinding, a6 as SkinnedMesh, a7 as Mesh, a8 as LineSegments, a9 as Line$1, aa as LineLoop, ab as Points, ac as MathUtils, ad as Skeleton, ae as InterpolateLinear, af as AnimationClip, ag as Bone, ah as NearestFilter, ai as NearestMipmapNearestFilter, aj as LinearMipmapNearestFilter, ak as NearestMipmapLinearFilter, al as ClampToEdgeWrapping, am as MirroredRepeatWrapping, an as InterpolateDiscrete, ao as FrontSide, ap as InterleavedBufferAttribute, aq as VectorKeyframeTrack, ar as QuaternionKeyframeTrack, as as NumberKeyframeTrack, at as Box3, au as Sphere, av as Interpolant, aw as InstancedBufferGeometry, ax as Float32BufferAttribute, ay as InstancedInterleavedBuffer, az as WireframeGeometry, aA as ShaderMaterial, aB as UniformsUtils, aC as UniformsLib, aD as Vector4, aE as Line3, aF as SphereGeometry, aG as Triangle, aH as BackSide, aI as jsxRuntimeExports, aJ as Matrix3, aK as CoordinationType, aL as Data3DTexture, aM as RedFormat, aN as FloatType, aO as getImageSize } from "./index-13b53ff7.js";
 import * as React from "react";
 import React__default, { useReducer, useRef, useDebugValue, useEffect, useLayoutEffect, useState, useMemo, forwardRef } from "react";
 import "@vitessce/vit-s";
@@ -23800,7 +23800,7 @@ const Text = /* @__PURE__ */ React.forwardRef(({
   const {
     Text: TextMeshImpl,
     preloadFont
-  } = suspend(async () => import("./troika-three-text.esm-f2c32ddf.js"), []);
+  } = suspend(async () => import("./troika-three-text.esm-bb9bae50.js"), []);
   const invalidate2 = useThree(({
     invalidate: invalidate3
   }) => invalidate3);

package/dist/index.js

@@ -1,4 +1,4 @@
-import { bM, bK, bI, bL, bJ, bH, bN } from "./index-ec9f6e92.js";
+import { bM, bK, bI, bL, bJ, bH, bN } from "./index-13b53ff7.js";
 import { useComplexCoordination, useComplexCoordinationSecondary, useCoordination, useCoordinationScopes, useCoordinationScopesBy, useGridItemSize, useMultiCoordinationScopesNonNull, useMultiCoordinationScopesSecondaryNonNull, usePageModeView } from "@vitessce/vit-s";
 import "react";
 import "react-dom";

package/dist/{jpeg-71127875.js → jpeg-74f08245.js}

@@ -1,4 +1,4 @@
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-6b0aed4a.js → lerc-14ea355d.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, aP as BaseDecoder, aQ as LercParameters, aR as LercAddCompression } from "./index-ec9f6e92.js";
+import { g as getDefaultExportFromCjs, aP as BaseDecoder, aQ as LercParameters, aR as LercAddCompression } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-d3000914.js → lzw-ef19357e.js}

@@ -1,4 +1,4 @@
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-8ca42840.js → packbits-07b796e7.js}

@@ -1,4 +1,4 @@
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-8cc54eb3.js → raw-0fa2e626.js}

@@ -1,4 +1,4 @@
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{troika-three-text.esm-f2c32ddf.js → troika-three-text.esm-bb9bae50.js}

@@ -1,4 +1,4 @@
-import { aB as UniformsUtils, bB as MeshDepthMaterial, bC as RGBADepthPacking, bD as MeshDistanceMaterial, bE as ShaderChunk, T as Texture, Z as LinearFilter, aw as InstancedBufferGeometry, au as Sphere, at as Box3, aH as BackSide, a4 as DoubleSide, bF as InstancedBufferAttribute, V as Vector2, aD as Vector4, h as Color, aJ as Matrix3, a7 as Mesh, ao as FrontSide, bG as PlaneGeometry, f as BufferGeometry, ax as Float32BufferAttribute, y as MeshBasicMaterial, k as Matrix4, b as Vector3 } from "./index-ec9f6e92.js";
+import { aB as UniformsUtils, bB as MeshDepthMaterial, bC as RGBADepthPacking, bD as MeshDistanceMaterial, bE as ShaderChunk, T as Texture, Z as LinearFilter, aw as InstancedBufferGeometry, au as Sphere, at as Box3, aH as BackSide, a4 as DoubleSide, bF as InstancedBufferAttribute, V as Vector2, aD as Vector4, h as Color, aJ as Matrix3, a7 as Mesh, ao as FrontSide, bG as PlaneGeometry, f as BufferGeometry, ax as Float32BufferAttribute, y as MeshBasicMaterial, k as Matrix4, b as Vector3 } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-88dacd24.js → webimage-bf47d44e.js}

@@ -1,4 +1,4 @@
-import { aP as BaseDecoder } from "./index-ec9f6e92.js";
+import { aP as BaseDecoder } from "./index-13b53ff7.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/all",
-  "version": "3.5.8",
+  "version": "3.5.9",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -18,35 +18,35 @@
   "dependencies": {
     "@material-ui/core": "~4.12.3",
     "zod": "^3.21.4",
-    "@vitessce/constants-internal": "3.5.8",
-    "@vitessce/abstract": "3.5.8",
-    "@vitessce/csv": "3.5.8",
-    "@vitessce/description": "3.5.8",
-    "@vitessce/feature-list": "3.5.8",
-    "@vitessce/genomic-profiles": "3.5.8",
-    "@vitessce/heatmap": "3.5.8",
-    "@vitessce/glb": "3.5.8",
-    "@vitessce/json": "3.5.8",
-    "@vitessce/layer-controller": "3.5.8",
-    "@vitessce/layer-controller-beta": "3.5.8",
-    "@vitessce/obs-sets-manager": "3.5.8",
-    "@vitessce/ome-tiff": "3.5.8",
-    "@vitessce/link-controller": "3.5.8",
-    "@vitessce/plugins": "3.5.8",
-    "@vitessce/scatterplot-embedding": "3.5.8",
-    "@vitessce/scatterplot-gating": "3.5.8",
-    "@vitessce/schemas": "3.5.8",
-    "@vitessce/spatial": "3.5.8",
-    "@vitessce/spatial-beta": "3.5.8",
-    "@vitessce/statistical-plots": "3.5.8",
-    "@vitessce/vit-s": "3.5.8",
-    "@vitessce/status": "3.5.8",
-    "@vitessce/zarr": "3.5.8",
-    "@vitessce/globals": "3.5.8",
-    "@vitessce/spatial-zarr": "3.5.8",
-    "@vitessce/spatial-three": "3.5.8",
-    "@vitessce/biomarker-select": "3.5.8",
-    "@vitessce/neuroglancer": "3.5.8"
+    "@vitessce/constants-internal": "3.5.9",
+    "@vitessce/abstract": "3.5.9",
+    "@vitessce/csv": "3.5.9",
+    "@vitessce/description": "3.5.9",
+    "@vitessce/feature-list": "3.5.9",
+    "@vitessce/genomic-profiles": "3.5.9",
+    "@vitessce/heatmap": "3.5.9",
+    "@vitessce/glb": "3.5.9",
+    "@vitessce/json": "3.5.9",
+    "@vitessce/layer-controller": "3.5.9",
+    "@vitessce/layer-controller-beta": "3.5.9",
+    "@vitessce/link-controller": "3.5.9",
+    "@vitessce/obs-sets-manager": "3.5.9",
+    "@vitessce/ome-tiff": "3.5.9",
+    "@vitessce/plugins": "3.5.9",
+    "@vitessce/scatterplot-embedding": "3.5.9",
+    "@vitessce/scatterplot-gating": "3.5.9",
+    "@vitessce/schemas": "3.5.9",
+    "@vitessce/spatial": "3.5.9",
+    "@vitessce/spatial-beta": "3.5.9",
+    "@vitessce/statistical-plots": "3.5.9",
+    "@vitessce/status": "3.5.9",
+    "@vitessce/vit-s": "3.5.9",
+    "@vitessce/zarr": "3.5.9",
+    "@vitessce/globals": "3.5.9",
+    "@vitessce/spatial-zarr": "3.5.9",
+    "@vitessce/spatial-three": "3.5.9",
+    "@vitessce/biomarker-select": "3.5.9",
+    "@vitessce/neuroglancer": "3.5.9"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",