@vitessce/launcher 3.9.7 → 3.9.8

package/dist/{index-BMKNNrwj.js → index-DBTEa182.js}

@@ -11241,6 +11241,7 @@ const CoordinationType$1 = {
   SPATIAL_LAYER_MODEL_MATRIX: "spatialLayerModelMatrix",
   SPATIAL_SEGMENTATION_FILLED: "spatialSegmentationFilled",
   SPATIAL_SEGMENTATION_STROKE_WIDTH: "spatialSegmentationStrokeWidth",
+  SPATIAL_POINT_STROKE_WIDTH: "spatialPointStrokeWidth",
   SPATIAL_CHANNEL_COLOR: "spatialChannelColor",
   SPATIAL_CHANNEL_VISIBLE: "spatialChannelVisible",
   SPATIAL_CHANNEL_OPACITY: "spatialChannelOpacity",
@@ -11636,7 +11637,8 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_COLOR,
     CoordinationType$1.SPATIAL_CHANNEL_OPACITY,
     CoordinationType$1.SPATIAL_CHANNEL_VISIBLE,
-    CoordinationType$1.LEGEND_VISIBLE
+    CoordinationType$1.LEGEND_VISIBLE,
+    CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH
   ],
   [ViewType$1.SCATTERPLOT]: [
     CoordinationType$1.DATASET,
@@ -12020,6 +12022,7 @@ const COMPONENT_COORDINATION_TYPES = {
     CoordinationType$1.SPATIAL_CHANNEL_COLOR,
     CoordinationType$1.SPATIAL_SEGMENTATION_FILLED,
     CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH,
+    CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH,
     CoordinationType$1.IMAGE_CHANNEL,
     CoordinationType$1.IMAGE_LAYER,
     CoordinationType$1.SEGMENTATION_CHANNEL,
@@ -12758,6 +12761,8 @@ const ngPrecomputedMeshSchema = z.object({
   // projectionScale: z.number(),
   // position: z.array(z.number()).length(3),
   // projectionOrientation: z.array(z.number()).length(4),
+  subsources: z.record(z.boolean()).describe("Subsources are the individual data components of a source (e.g. meshes, skeletons, etc.). Each entry explicitly enables or disables a subsource.").optional(),
+  enableDefaultSubsources: z.boolean().describe("When true (default), automatically loads all subsources (defined in mesh metadata), when false loads what is explicitly enabled in `subsources`.").optional()
 }).partial().nullable();
 const ngPointAnnotationSchema = z.object({
   projectionAnnotationSpacing: z.number(),
@@ -20175,7 +20180,7 @@ const { tss } = createTss({
   },
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
-const useStyles$x = tss.create({});
+const useStyles$y = tss.create({});
 function createChainedFunction$1(...funcs) {
   return funcs.reduce((acc, func) => {
     if (func == null) {
@@ -24304,7 +24309,7 @@ const ErrorOutlineIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("pa
 const InfoOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
 }), "InfoOutlined");
-const ClearIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+const ClearIcon$1 = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
 }), "Close");
 const useUtilityClasses$1y = (ownerState) => {
@@ -24510,7 +24515,7 @@ const Alert = /* @__PURE__ */ React.forwardRef(function Alert2(inProps, ref2) {
     ownerState
   });
   const [CloseIconSlot, closeIconProps] = useSlot("closeIcon", {
-    elementType: ClearIcon,
+    elementType: ClearIcon$1,
     externalForwardedProps,
     ownerState
   });
@@ -29673,7 +29678,7 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     blurOnSelect = false,
     ChipProps: ChipPropsProp,
     className,
-    clearIcon = _ClearIcon || (_ClearIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(ClearIcon, {
+    clearIcon = _ClearIcon || (_ClearIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(ClearIcon$1, {
       fontSize: "small"
     })),
     clearOnBlur = !props.freeSolo,
@@ -48134,6 +48139,9 @@ const VisibilityIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path
 const VisibilityOffIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("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 7M2 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 3zM7.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.2m4.31-.78 3.15 3.15.02-.16c0-1.66-1.34-3-3-3z"
 }), "VisibilityOff");
+const ClearIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Clear");
 const reactMajor = parseInt(React.version, 10);
 const forwardRef = (render2) => {
   if (reactMajor >= 19) {
@@ -74991,7 +74999,7 @@ const Popper = React.forwardRef((props, ref2) => {
   }, [handlePopperRef]);
   React.useImperativeHandle(popperRefProp, () => popperRef.current, []);
   const [exited, setExited] = React.useState(true);
-  const { theme } = useStyles$x();
+  const { theme } = useStyles$y();
   const rtlPlacement = flipPlacement(initialPlacement, theme);
   const [placement, setPlacement] = React.useState(rtlPlacement);
   React.useEffect(() => {
@@ -75725,7 +75733,7 @@ var VariableSizeList$1 = /* @__PURE__ */ createListComponent({
 });
 const VariableSizeList = VariableSizeList$1;
 const LIST_ROW_HEIGHT$1 = 48;
-const useStyles$w = makeStyles()(() => ({
+const useStyles$x = makeStyles()(() => ({
   searchInput: {
     lineHeight: "initial",
     height: "auto !important"
@@ -75765,7 +75773,7 @@ const ListboxComponent$1 = React__default.forwardRef((props, ref2) => {
 });
 function SimpleAutocomplete(props) {
   const { getMatches, onChange, textInputLabel = "Enter a gene", getItemLabel = (option) => option.label } = props;
-  const { classes: classes2 } = useStyles$w();
+  const { classes: classes2 } = useStyles$x();
   const [potentialItems, setPotentialItems] = useState([]);
   const handleInputChange = async (_event, value2) => {
     if (!value2) {
@@ -85315,7 +85323,7 @@ function defaultUrlTransform(value2) {
   }
   return "";
 }
-const useStyles$v = makeStyles()((theme) => ({
+const useStyles$w = makeStyles()((theme) => ({
   description: {
     "& p, details, table": {
       fontSize: "80%",
@@ -85352,7 +85360,7 @@ const useStyles$v = makeStyles()((theme) => ({
 }));
 function Description(props) {
   const { description: description2, metadata: metadata2, descriptionType } = props;
-  const { classes: classes2 } = useStyles$v();
+  const { classes: classes2 } = useStyles$w();
   return jsxRuntimeExports.jsxs("div", { className: classes2.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: classes2.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) {
@@ -100423,7 +100431,7 @@ const Tooltip$2 = /* @__PURE__ */ React.forwardRef((props, ref2) => {
   }, extraProps), getChildren());
 });
 const nodeHeight = 32;
-const useStyles$u = makeStyles()((theme) => ({
+const useStyles$v = makeStyles()((theme) => ({
   setsManager: {
     position: "relative",
     width: "100%",
@@ -100590,7 +100598,7 @@ const useStyles$u = makeStyles()((theme) => ({
 }));
 function SetsManagerTreeGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$x();
+  const { theme } = useStyles$y();
   return jsxRuntimeExports.jsx(ScopedGlobalStyles, { parentClassName: classes2.setsManagerTree, styles: {
     ".rc-tree": {
       paddingLeft: "0",
@@ -100931,7 +100939,7 @@ function HelpTooltipGlobalStyles(props) {
 }
 function PopoverGlobalStyles(props) {
   const { classes: classes2 } = props;
-  const { theme } = useStyles$x();
+  const { theme } = useStyles$y();
   return jsxRuntimeExports.jsx(ScopedGlobalStyles, { parentClassName: classes2.popover, styles: {
     ".rc-tooltip-inner": {
       boxSizing: "border-box",
@@ -105615,7 +105623,7 @@ function NamedSetNodeStatic(props) {
   const onClick = level === 0 && !expanded ? () => onCheckLevel(nodeKey, nextLevelToCheck) : () => onNodeView(path2);
   const tooltipProps = disableTooltip ? { visible: false } : {};
   const popoverMenuConfig = makeNodeViewMenuConfig(props);
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   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: classes2.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("span", { children: jsxRuntimeExports.jsx(SvgMenu, { className: classes2.nodeMenuIcon, "aria-label": "Open Node View Menu" }) }) }) : null, level > 0 && isChecking ? checkbox2 : null, level > 0 && jsxRuntimeExports.jsx("span", { className: classes2.nodeSizeLabel, children: niceSize })] });
 }
 function NamedSetNodeEditing(props) {
@@ -105627,7 +105635,7 @@ function NamedSetNodeEditing(props) {
       onNodeSetName(path2, currentTitle, true);
     }
   }
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsxRuntimeExports.jsxs("span", { className: classes2.titleButtonWithInput, children: [jsxRuntimeExports.jsx("input", {
     // eslint-disable-next-line jsx-a11y/no-autofocus
     autoFocus: true,
@@ -105653,7 +105661,7 @@ function LevelsButtons(props) {
       onCheckLevel(nodeKey, newLevel);
     }
   }
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsxRuntimeExports.jsx("div", { className: classes2.levelButtonsContainer, children: range$e(1, height2 + 1).map((i2) => {
     const isChecked = isEqual$3(path2, checkedLevelPath) && i2 === checkedLevelIndex;
     return jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx(HelpTooltip, { title: getLevelTooltipText(i2), children: jsxRuntimeExports.jsx("input", { className: clsx(classes2.levelRadioButton, { [classes2.levelRadioButtonChecked]: isChecked && !hasColorEncoding }), type: "checkbox", value: i2, checked: isChecked && hasColorEncoding, onChange: onCheck }) }) }, i2);
@@ -105737,7 +105745,7 @@ let TreeNode$1 = class TreeNode extends TreeNode$2 {
 };
 function PlusButton(props) {
   const { datatype, onError, onImportTree, onCreateLevelZeroNode, importable, editable } = props;
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   const onImport = useCallback((importHandler, mimeType) => () => {
     const uploadInputNode = document.createElement("input");
     uploadInputNode.setAttribute("type", "file");
@@ -105854,7 +105862,7 @@ function SetsManager(props) {
       }, onNodeCheckNewName, onNodeSetIsEditing: setIsEditingNodeName, onNodeRemove, onExportLevelZeroNodeJSON, onExportLevelZeroNodeTabular, onExportSetJSON, disableTooltip: isDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), children: renderTreeNodes(node2.children, readOnly, newPath) }, pathToKey(newPath));
     });
   }
-  const { classes: classes2 } = useStyles$u();
+  const { classes: classes2 } = useStyles$v();
   return jsxRuntimeExports.jsxs("div", { className: classes2.setsManager, children: [jsxRuntimeExports.jsx(SetsManagerTreeGlobalStyles, { classes: classes2 }), jsxRuntimeExports.jsxs("div", { className: classes2.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;
@@ -211819,22 +211827,22 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-DUp-QtrM.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-D2V8xY3D.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-BChW8Bv2.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-GyLKEjHd.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-9fUrQn3q.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-Dbe9OGOc.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-DgS6vwfA.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-BztqQwoS.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-D0JH4rkz.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-DJsZJlYo.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-BinCJj-X.js").then(async (m2) => {
+  () => import("./lerc-9qrJ4PEa.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-CH0Nfeyo.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-BlgQb3bb.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -228603,7 +228611,7 @@ class ContourLayerWithText extends ContourLayer {
 }
 ContourLayerWithText.layerName = "ContourLayerWithText";
 ContourLayerWithText.defaultProps = defaultProps;
-const useStyles$t = makeStyles()(() => ({
+const useStyles$u = makeStyles()(() => ({
   toolButton: {
     display: "inline-flex",
     "&:active": {
@@ -228665,12 +228673,12 @@ const useStyles$t = makeStyles()(() => ({
 }));
 function IconTool(props) {
   const { alt, onClick, isActive: isActive2, children: children3 } = props;
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   return jsxRuntimeExports.jsx("button", { className: clsx(classes2.toolIcon, { [classes2.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children3 });
 }
 function IconButton(props) {
   const { alt, onClick, children: children3 } = props;
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   return jsxRuntimeExports.jsx("button", { className: clsx(classes2.toolIcon, classes2.toolButton), onClick, type: "button", title: alt, children: children3 });
 }
 function ToolMenu(props) {
@@ -228678,7 +228686,7 @@ function ToolMenu(props) {
   const lassoIconAltText = "Select lasso";
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true, recenter: true }, recenterOnClick = () => {
   } } = props;
-  const { classes: classes2 } = useStyles$t();
+  const { classes: classes2 } = useStyles$u();
   const onRecenterButtonCLick = () => {
     recenterOnClick();
   };
@@ -229867,7 +229875,7 @@ function ScatterplotOptions(props) {
     id: `feature-aggregation-strategy-${scatterplotOptionsId}`
   }, children: FEATURE_AGGREGATION_STRATEGIES$1.map((opt) => jsxRuntimeExports.jsx("option", { value: opt, children: capitalize$3(opt) }, opt)) }) })] }) : null] });
 }
-const useStyles$s = makeStyles()((theme) => ({
+const useStyles$t = makeStyles()((theme) => ({
   tooltipAnchor: {
     position: "relative",
     width: "0px",
@@ -229898,7 +229906,7 @@ const useStyles$s = makeStyles()((theme) => ({
 function Tooltip3(props) {
   const { x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
   const ref2 = useRef();
-  const { classes: classes2 } = useStyles$s();
+  const { classes: classes2 } = useStyles$t();
   const [placementX, setPlacementX] = useState("start");
   const [placementY, setPlacementY] = useState("bottom");
   const getTooltipContainer = useVitessceContainer(ref2);
@@ -229914,7 +229922,7 @@ function Tooltip3(props) {
   }, [x2, y2, parentWidth, parentHeight]);
   return jsxRuntimeExports.jsx("div", { ref: ref2, className: classes2.tooltipAnchor, children: ref2 && ref2.current ? jsxRuntimeExports.jsx(Popper, { open: true, anchorEl: ref2.current, container: getTooltipContainer, transition: true, placement: `${placementY}-${placementX}`, children: jsxRuntimeExports.jsx(Paper, { elevation: 8, className: classes2.tooltipContent, children: children3 }) }) : null });
 }
-const useStyles$r = makeStyles()((theme) => ({
+const useStyles$s = makeStyles()((theme) => ({
   cellEmphasisCrosshair: {
     zIndex: 50,
     position: "absolute",
@@ -229925,7 +229933,7 @@ const useStyles$r = makeStyles()((theme) => ({
 }));
 function Tooltip2D(props) {
   const { parentUuid, sourceUuid, x: x2, y: y2, parentWidth, parentHeight, children: children3 } = props;
-  const { classes: classes2 } = useStyles$r();
+  const { classes: classes2 } = useStyles$s();
   if (x2 < 0 || x2 > parentWidth || y2 < 0 || y2 > parentHeight) {
     return null;
   }
@@ -233830,7 +233838,7 @@ function getXlinkHref(cmap) {
   const xlinkHref = ramp(color2.copy().domain(quantize$3(interpolate$1$1(0, 1), n3))).toDataURL();
   return xlinkHref;
 }
-const useStyles$q = makeStyles()(() => ({
+const useStyles$r = makeStyles()(() => ({
   legend: {
     position: "relative",
     // Needed for absolute positioning of slider overlay
@@ -234027,7 +234035,7 @@ function Legend(props) {
     contourThresholds
   } = props;
   const svgRef = useRef(null);
-  const { classes: classes2 } = useStyles$q();
+  const { classes: classes2 } = useStyles$r();
   const [localRange, setLocalRange] = useState(featureValueColormapRange);
   useEffect(() => {
     setLocalRange(featureValueColormapRange);
@@ -234308,7 +234316,9 @@ function Legend(props) {
     isStaticColor,
     missing,
     showObsLabel,
-    staticColor
+    staticColor,
+    featureColor,
+    pointsLegendElements
   ]);
   const showInteractiveSlider = !isPointsLayer && setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
   const globalExtent = useMemo$1(() => {
@@ -234359,7 +234369,7 @@ function Legend(props) {
     }
   } })] })] });
 }
-const useStyles$p = makeStyles()(() => ({
+const useStyles$q = makeStyles()(() => ({
   multiLegend: {
     position: "absolute",
     top: "0px",
@@ -234386,7 +234396,7 @@ function MultiLegend(props) {
     pointLayerCoordination,
     pointMultiIndicesData
   } = props;
-  const { classes: classes2 } = useStyles$p();
+  const { classes: classes2 } = useStyles$q();
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
@@ -234479,7 +234489,7 @@ function MultiLegend(props) {
     }) : null;
   }) : null] });
 }
-const useStyles$o = makeStyles()(() => ({
+const useStyles$p = makeStyles()(() => ({
   channelNamesLegendContainer: {
     position: "absolute",
     bottom: "0px",
@@ -234502,7 +234512,7 @@ const useStyles$o = makeStyles()(() => ({
 }));
 function ChannelNamesLegend(props) {
   const { images, imageLayerScopes, imageLayerCoordination, imageChannelScopesByLayer, imageChannelCoordination } = props;
-  const { classes: classes2 } = useStyles$o();
+  const { classes: classes2 } = useStyles$p();
   const reversedImageLayerScopes = useMemo$1(() => [...imageLayerScopes || []].reverse(), [imageLayerScopes]);
   return jsxRuntimeExports.jsx("div", { className: classes2.channelNamesLegendContainer, children: imageLayerScopes ? reversedImageLayerScopes.map((layerScope) => {
     const layerCoordination = imageLayerCoordination[0][layerScope];
@@ -253450,6 +253460,12 @@ function createGetRange(store) {
     throw new Error("Invalid rangeQuery value.");
   };
 }
+function flattenOmeAttrs(rootAttrs) {
+  if (rootAttrs && typeof rootAttrs.ome === "object" && rootAttrs.ome !== null) {
+    return { ...rootAttrs.ome, ...rootAttrs };
+  }
+  return rootAttrs;
+}
 class VitessceError extends Error {
   constructor(message) {
     super(message);
@@ -253512,10 +253528,12 @@ async function loadMultiscales(root2) {
     }
     throw e3;
   }
+  rootAttrs = flattenOmeAttrs(rootAttrs);
   let paths = ["0"];
   let labels2 = ["t", "c", "z", "y", "x"];
   if ("multiscales" in rootAttrs) {
-    const { datasets, axes } = rootAttrs.multiscales[0];
+    const { multiscales } = rootAttrs;
+    const { datasets, axes } = multiscales[0];
     paths = datasets.map((d) => d.path);
     if (axes) {
       if (isAxis(axes)) {
@@ -256386,12 +256404,12 @@ class ErrorBoundary extends React__default.Component {
   }
 }
 const LazySpatialThree = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-DlwYKAh1.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-1U4gELip.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 }) }) }) }));
 const LazySpatialAccelerated = React__default.lazy(async () => {
-  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-_s9jmws5.js");
+  const { SpatialWrapper: SpatialWrapper2 } = await import("./index-D2vPxKer.js");
   return { default: SpatialWrapper2 };
 });
 const SpatialAcceleratedAdapter = 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(LazySpatialAccelerated, { ...props }) }) }) }));
@@ -264511,7 +264529,7 @@ _defineProperty$3(WindowScroller, "defaultProps", {
   serverHeight: 0,
   serverWidth: 0
 });
-const useStyles$n = makeStyles()((theme) => ({
+const useStyles$o = makeStyles()((theme) => ({
   selectableTable: {
     flex: "1 1 auto",
     outline: "none"
@@ -264660,7 +264678,7 @@ function SelectableTable(props) {
       onChange(null);
     }
   }, [selectedRows, allowMultiple]);
-  const { classes: classes2 } = useStyles$n();
+  const { classes: classes2 } = useStyles$o();
   const inputUuid = v4$1();
   const rowRenderer = ({ index: index2, style: style2 }) => (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
@@ -264685,7 +264703,7 @@ const FEATURELIST_SORT_OPTIONS = [
   "original"
 ];
 const ALT_COLNAME = "Alternate ID";
-const useStyles$m = makeStyles()(() => ({
+const useStyles$n = makeStyles()(() => ({
   searchBar: {
     marginTop: "10px",
     marginLeft: "10px",
@@ -264698,7 +264716,7 @@ const useStyles$m = makeStyles()(() => ({
 }));
 function FeatureList(props) {
   const { width: width2, height: height2, hasColorEncoding, geneList = [], featureLabelsMap, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showFeatureTable, featureListSort, featureListSortKey, hasFeatureLabels, primaryColumnName } = props;
-  const { classes: classes2 } = useStyles$m();
+  const { classes: classes2 } = useStyles$n();
   const [searchTerm, setSearchTerm] = useState("");
   const selectableTableSortKey = featureListSortKey === "featureIndex" ? "key" : "name";
   const searchResults = useMemo$1(() => geneList.filter((gene) => gene.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(gene)?.toLowerCase().includes(searchTerm.toLowerCase()) || featureLabelsMap?.get(cleanFeatureId(gene))?.toLowerCase().includes(searchTerm.toLowerCase())), [geneList, searchTerm, featureLabelsMap]);
@@ -264773,7 +264791,7 @@ function FeatureListOptions(props) {
     id: `feature-list-show-alternative-ids-${featureListId}`
   } } }) })] })] }) : null] });
 }
-const useStyles$l = makeStyles()((theme) => ({
+const useStyles$m = makeStyles()((theme) => ({
   featureListContainer: {
     width: "100%",
     height: "100%",
@@ -264788,7 +264806,7 @@ function FeatureListSubscriber(props) {
   const loaders = useLoaders();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
   const [width2, height2, containerRef] = useGridItemSize();
-  const { classes: classes2 } = useStyles$l();
+  const { classes: classes2 } = useStyles$m();
   const [{ dataset, obsType, featureType, featureSelection: geneSelection, featureFilter: geneFilter, obsColorEncoding: cellColorEncoding }, { setFeatureSelection: setGeneSelection, setFeatureFilter: setGeneFilter, setFeatureHighlight: setGeneHighlight, setObsColorEncoding: setCellColorEncoding }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_LIST], coordinationScopes);
   const variablesLabel = variablesLabelOverride || featureType;
   const title2 = titleOverride || `${capitalize$3(variablesLabel)} List`;
@@ -264856,6 +264874,12 @@ const useControllerSectionStyles = makeStyles()((theme) => ({
   },
   layerControllerGrid: {
     marginTop: "10px"
+  },
+  layerControllerSubRow: {
+    flexDirection: "column",
+    marginLeft: "40px",
+    padding: "0px 8px",
+    backgroundColor: theme.palette.paperBackground
   }
 }));
 const useAccordionStyles = makeStyles()((theme) => ({
@@ -264917,7 +264941,7 @@ const useSelectionSliderStyles = makeStyles()(() => ({
     backgroundColor: "rgba(128, 128, 128, 0.7)"
   }
 }));
-const useStyles$k = makeStyles()((theme) => ({
+const useStyles$l = makeStyles()((theme) => ({
   paletteContainer: {
     width: "70px",
     height: "40px",
@@ -264938,10 +264962,10 @@ const useStyles$k = makeStyles()((theme) => ({
   }
 }));
 const ColorPalette = ({ handleChange }) => {
-  const { classes: classes2 } = useStyles$k();
+  const { classes: classes2 } = useStyles$l();
   return jsxRuntimeExports.jsx("div", { className: classes2.paletteContainer, "aria-label": "Color swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(IconButton$1, { className: classes2.button, onClick: () => handleChange(color2), "aria-label": `Change color to ${color2}`, children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes2.icon }) }, color2)) });
 };
-const useStyles$j = makeStyles()(() => ({
+const useStyles$k = makeStyles()(() => ({
   menuButton: {
     backgroundColor: "transparent"
   },
@@ -264960,7 +264984,7 @@ function MuiSpan(props) {
 }
 function ChannelOptions$1({ handlePropertyChange, handleChannelRemove, handleIQRUpdate }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$j();
+  const { classes: classes2 } = useStyles$k();
   const handleColorSelect = (color2) => {
     handlePropertyChange("color", color2);
   };
@@ -265577,7 +265601,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, { onClick: handleLayerRemove, fullWidth: true, variant: "outlined", style: buttonStyles, size: "small", children: "Remove Image Layer" }) : null] })] });
 }
-const useStyles$i = makeStyles()(() => ({
+const useStyles$j = makeStyles()(() => ({
   addButton: {
     marginTop: "10px",
     marginBottom: "10px",
@@ -265589,7 +265613,7 @@ function ImageAddIcon() {
 }
 function ImageAddButton({ imageOptions, handleImageAdd }) {
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$i();
+  const { classes: classes2 } = useStyles$j();
   const handleAdd = (imgData) => {
     setOpen((prev2) => !prev2);
     handleImageAdd(imgData);
@@ -265921,7 +265945,7 @@ const useEllipsisMenuStyles = makeStyles()(() => ({
     padding: "4px"
   }
 }));
-const useStyles$h = makeStyles()(() => ({
+const useStyles$i = makeStyles()(() => ({
   colorPickerPaper: {
     overflow: "hidden",
     "& > ul": {
@@ -265979,13 +266003,15 @@ function ChannelColorPickerMenu(props) {
       setColor2([rgb2.r, rgb2.g, rgb2.b]);
     }
   }
-  const { classes: classes2 } = useStyles$h();
+  const { classes: classes2 } = useStyles$i();
   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(classes2.colorIcon, {
+  const isWritable = typeof setColor2 === "function";
+  const derivedOpen = isWritable ? isStaticColor && visible ? open2 : false : false;
+  return jsxRuntimeExports.jsx(PopperMenu, { open: derivedOpen, setOpen, buttonIcon: isStaticColor && visible ? jsxRuntimeExports.jsx("div", { className: clsx(classes2.colorIcon, {
     [classes2.colorIconOutline]: theme !== "dark" && isEqual$3(color2, [255, 255, 255])
   }), style: { backgroundColor: currentColor } }) : isColormap && visible && featureValueColormap ? jsxRuntimeExports.jsx("div", { className: classes2.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: classes2.colorIcon }), buttonClassName: classes2.colorIconButton, withPaper: true, paperClassName: classes2.colorPickerPaper, "aria-label": "Open color picker menu", children: jsxRuntimeExports.jsx(Twitter$1, { className: classes2.colorPicker, disableAlpha: true, width: 108, triangle: "hide", colors: defaultPalette, color: currentColor, onChangeComplete: handleColorChange }) });
 }
-const useStyles$g = makeStyles()(() => ({
+const useStyles$h = makeStyles()(() => ({
   layerTypeSpotIcon: {
     height: "100%",
     marginLeft: "1px",
@@ -265998,7 +266024,7 @@ const useStyles$g = makeStyles()(() => ({
 function SpotLayerEllipsisMenu(props) {
   const { strokeWidth, setStrokeWidth, filled, setFilled, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible } = props;
   const [open2, setOpen] = useState(false);
-  const { classes: classes2 } = useStyles$g();
+  const { classes: classes2 } = useStyles$h();
   const { classes: selectClasses2 } = useSelectStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const filledId = $bdb11010cef70236$export$f680877a34711e37();
@@ -266020,7 +266046,7 @@ function SpotLayerController(props) {
   const Visibility = useMemo$1(() => visibleSetting ? VisibilityIcon : VisibilityOffIcon, [visibleSetting]);
   const isStaticColor = obsColorEncoding === "spatialLayerColor";
   const isColormap = obsColorEncoding === "geneSelection";
-  const { classes: classes2 } = useStyles$g();
+  const { classes: classes2 } = useStyles$h();
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: menuClasses } = useEllipsisMenuStyles();
   const handleVisibleChange = useCallback(() => {
@@ -266030,6 +266056,104 @@ function SpotLayerController(props) {
   const handleOpacityChange = useCallback((e3, v) => setOpacity2(v), [setOpacity2]);
   return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle spot layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { 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$1, { size: 1, children: jsxRuntimeExports.jsx(SpotLayerEllipsisMenu, { filled, setFilled, strokeWidth, setStrokeWidth, featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormap, setFeatureValueColormap, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgSpots, { className: classes2.layerTypeSpotIcon }) })] }) }) });
 }
+const useStyles$g = makeStyles()(() => ({
+  layerFeatureControllerGrid: {
+    padding: "0",
+    flexWrap: "nowrap"
+  },
+  layerFeatureExpansionButton: {
+    display: "inline-block",
+    margin: 0,
+    padding: 0,
+    minWidth: 0,
+    lineHeight: 1,
+    width: "50%"
+  },
+  layerTypeFeatureIcon: {
+    height: "100%",
+    paddingLeft: "2px",
+    fill: "currentColor",
+    fontSize: "14px",
+    width: "50%",
+    maxWidth: "16px"
+  }
+}));
+function LayerPerFeatureController(props) {
+  const { theme, palette = null, featureName, featureColor, setFeatureColor, featureValueColormap, featureSelection, setFeatureSelection, spatialLayerColor, featureIndex, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange } = props;
+  const featureColorIndex = useMemo$1(() => featureColor?.findIndex((fc) => fc.name === featureName) ?? -1, [featureColor, featureName]);
+  const varIndex = useMemo$1(() => featureIndex?.indexOf(featureName) ?? -1, [featureIndex, featureName]);
+  const randomByFeatureColor = useMemo$1(() => varIndex >= 0 ? PALETTE[varIndex % PALETTE.length] : [255, 255, 255], [varIndex]);
+  const handleRemoveFeature = useCallback(() => {
+    setFeatureSelection(featureSelection.filter((f2) => f2 !== featureName));
+  }, [featureName, featureSelection, setFeatureSelection]);
+  const handleColorChange = useCallback((newColor) => {
+    if (featureColorIndex >= 0) {
+      const nextFeatureColor = [...featureColor];
+      nextFeatureColor[featureColorIndex] = {
+        ...nextFeatureColor[featureColorIndex],
+        color: newColor
+      };
+      setFeatureColor(nextFeatureColor);
+    } else {
+      setFeatureColor([
+        ...featureColor ?? [],
+        { name: featureName, color: newColor }
+      ]);
+    }
+  }, [featureName, featureColor, setFeatureColor, featureColorIndex]);
+  const { classes: classes2 } = useStyles$g();
+  const { classes: lcClasses } = useControllerSectionStyles();
+  const { classes: menuClasses } = useEllipsisMenuStyles();
+  const [open2, setOpen] = useState(false);
+  const { colorPickerColor, colorPickerReadable, colorPickerWritable, colorPickerTooltip } = useMemo$1(() => {
+    if (obsColorEncoding === "geneSelection") {
+      return {
+        colorPickerColor: featureColor?.[featureColorIndex]?.color ?? spatialLayerColor,
+        colorPickerReadable: true,
+        colorPickerWritable: true,
+        colorPickerTooltip: null
+      };
+    }
+    if (obsColorEncoding === "spatialLayerColor") {
+      return {
+        colorPickerColor: spatialLayerColor,
+        colorPickerReadable: true,
+        colorPickerWritable: false,
+        colorPickerTooltip: 'Currently using the color value from the parent point layer. Per-feature colors can be modified when the Color Encoding mode of the parent layer is "Feature Color".'
+      };
+    }
+    if (obsColorEncoding === "randomByFeature") {
+      return {
+        colorPickerColor: randomByFeatureColor,
+        colorPickerReadable: true,
+        colorPickerWritable: false,
+        colorPickerTooltip: 'Currently using the assigned random color. Per-feature colors can be modified when the Color Encoding mode of the parent layer is "Feature Color".'
+      };
+    }
+    if (obsColorEncoding === "random") {
+      return {
+        colorPickerColor: null,
+        colorPickerReadable: false,
+        colorPickerWritable: false,
+        colorPickerTooltip: 'Currently using a random color per point. Per-feature colors can be modified when the Color Encoding mode of the parent layer is "Feature Color".'
+      };
+    }
+    return {
+      colorPickerColor: null,
+      colorPickerReadable: false,
+      colorPickerWritable: false,
+      colorPickerTooltip: null
+    };
+  }, [
+    obsColorEncoding,
+    spatialLayerColor,
+    featureName,
+    featureColor,
+    featureColorIndex,
+    randomByFeatureColor
+  ]);
+  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsxs(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: [jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleRemoveFeature, className: menuClasses.imageLayerVisibleButton, "aria-label": "Remove feature", children: jsxRuntimeExports.jsx(ClearIcon, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Tooltip$3, { title: colorPickerTooltip ?? "", disableHoverListener: !colorPickerTooltip, placement: "top", children: jsxRuntimeExports.jsx("span", { children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: colorPickerColor, setColor: colorPickerWritable ? handleColorChange : null, palette, isStaticColor: colorPickerReadable, isColormap: false, featureValueColormap, visible: true }) }) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: featureName }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": `Adjust opacity for layer ${featureName}` }) }), jsxRuntimeExports.jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypeFeatureIcon }), null] })] }), loadingDoneFraction < 1 ? jsxRuntimeExports.jsx(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.layerFeatureControllerGrid, children: jsxRuntimeExports.jsx(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null] }) }, featureName);
+}
 const useStyles$f = makeStyles()(() => ({
   pointLayerButton: {
     borderStyle: "dashed",
@@ -266072,7 +266196,7 @@ function PointLayerEllipsisMenu(props) {
   return jsxRuntimeExports.jsxs(PopperMenu, { open: open2, setOpen, buttonIcon: jsxRuntimeExports.jsx(MoreVertIcon, {}), buttonClassName: menuClasses.imageLayerMenuButton, containerClassName: menuClasses.imageLayerPopperContainer, withPaper: true, "aria-label": "Open point layer options menu", children: [jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: quantitativeColormapId, children: "Color Encoding: " }), jsxRuntimeExports.jsxs(NativeSelect, { onChange: (e3) => setObsColorEncoding(e3.target.value), value: obsColorEncoding, inputProps: { id: quantitativeColormapId, "aria-label": "Color encoding selector" }, classes: { root: selectClasses2.selectRoot }, children: [jsxRuntimeExports.jsx("option", { value: "spatialLayerColor", children: "Static Color" }), jsxRuntimeExports.jsx("option", { value: "geneSelection", children: "Feature Color" }), jsxRuntimeExports.jsx("option", { value: "randomByFeature", children: "Random Color per Feature" }), jsxRuntimeExports.jsx("option", { value: "random", children: "Random Color per Point" })] })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: featureFilterModeId, children: "Filter to Feature Selection: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: featureFilterMode === "featureSelection", onChange: (e3, v) => setFeatureFilterMode(v ? "featureSelection" : null), slotProps: { input: { id: featureFilterModeId, "aria-label": "Toggle feature filter mode" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: colormapRangeId, children: "Colormap Range: " }), jsxRuntimeExports.jsx(Slider, { disabled: obsColorEncoding !== "geneSelection", value: featureValueColormapRange, min: 0, max: 1, step: 0.01, onChange: (e3, v) => setFeatureValueColormapRange(v), className: menuClasses.menuItemSlider, orientation: "horizontal", id: colormapRangeId, getAriaLabel: (index2) => index2 === 0 ? "Low value colormap range slider" : "High value colormap range slider" })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: tooltipsVisibleId, children: "Tooltips Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipsVisible, onChange: (e3, v) => setTooltipsVisible(v), slotProps: { input: { id: tooltipsVisibleId, "aria-label": "Toggle tooltip visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: crosshairsVisibleId, children: "Tooltip Crosshairs Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: tooltipCrosshairsVisible, onChange: (e3, v) => setTooltipCrosshairsVisible(v), slotProps: { input: { id: crosshairsVisibleId, "aria-label": "Toggle tooltip crosshair visibility" } } })] }), jsxRuntimeExports.jsxs(MenuItem, { dense: true, disableGutters: true, children: [jsxRuntimeExports.jsx("label", { className: menuClasses.imageLayerMenuLabel, htmlFor: legendVisibleId, children: "Legend Visible: " }), jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", className: menuClasses.menuItemCheckbox, checked: legendVisible, onChange: (e3, v) => setLegendVisible(v), slotProps: { input: { id: legendVisibleId, "aria-label": "Toggle legend visibility" } } })] })] });
 }
 function PointLayerController(props) {
-  const { theme, layerScope, layerCoordination, setLayerCoordination, palette = null, pointMatrixIndicesData, tiledPointsLoadingProgress } = props;
+  const { theme, layerScope, layerCoordination, setLayerCoordination, palette = null, pointMatrixIndicesData, tiledPointsLoadingProgress, layerPerFeatureForPoints } = props;
   const [open2, setOpen] = useState(false);
   const loadingDoneFraction = useMemo$1(() => {
     if (tiledPointsLoadingProgress && typeof tiledPointsLoadingProgress === "object") {
@@ -266157,7 +266281,8 @@ function PointLayerController(props) {
   useCallback(() => setOpen((prev2) => !prev2), []);
   const [coloringTabIndex, setColoringTabIndex] = useState(0);
   const { featureIndex } = pointMatrixIndicesData || {};
-  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { 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$1, { size: 1, children: jsxRuntimeExports.jsx(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxRuntimeExports.jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsxRuntimeExports.jsx(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsxRuntimeExports.jsx(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }) });
+  const hasSelectedFeatures = Array.isArray(featureSelection) && featureSelection.length > 0;
+  return jsxRuntimeExports.jsxs(Grid$1, { className: lcClasses.layerControllerGrid, children: [jsxRuntimeExports.jsxs(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: [jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: handleVisibleChange, className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle layer visibility", children: jsxRuntimeExports.jsx(Visibility, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: color2, setColor: setColor2, palette, isStaticColor, isColormap, featureValueColormap, visible }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: jsxRuntimeExports.jsx(Slider, { 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$1, { size: 1, children: jsxRuntimeExports.jsx(PointLayerEllipsisMenu, { featureSelection, obsColorEncoding, setObsColorEncoding, featureValueColormapRange, setFeatureValueColormapRange, tooltipsVisible, setTooltipsVisible, tooltipCrosshairsVisible, setTooltipCrosshairsVisible, legendVisible, setLegendVisible, featureFilterMode, setFeatureFilterMode }) }), jsxRuntimeExports.jsxs(Grid$1, { size: 1, container: true, direction: "row", children: [jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypePointIcon }), null] })] }), loadingDoneFraction < 1 ? jsxRuntimeExports.jsx(Grid$1, { size: 12, container: true, direction: "column", justifyContent: "space-between", className: classes2.pointFeatureControllerGrid, children: jsxRuntimeExports.jsx(LinearProgress, { variant: loadingDoneFraction === 0 ? "indeterminate" : "determinate", value: loadingDoneFraction * 100 }) }) : null, null] }), hasSelectedFeatures ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [featureSelection.map((featureName) => jsxRuntimeExports.jsx(LayerPerFeatureController, { theme, featureName, featureColor, setFeatureColor, spatialLayerColor, featureIndex, featureValueColormap, featureSelection, setFeatureSelection, obsColorEncoding, loadingDoneFraction, opacity: opacity2, handleOpacityChange }, featureName)), jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 2, className: lcClasses.layerControllerSubRow, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Button, { onClick: () => setFeatureFilterMode(featureFilterMode === "featureSelection" ? null : "featureSelection"), className: menuClasses.imageLayerVisibleButton, "aria-label": "Toggle visibility of unselected points", children: featureFilterMode === "featureSelection" ? jsxRuntimeExports.jsx(VisibilityOffIcon, {}) : jsxRuntimeExports.jsx(VisibilityIcon, {}) }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(ChannelColorPickerMenu, { theme, color: getDefaultColor("dark"), setColor: null, isStaticColor: true, isColormap: false, visible: true }) }), jsxRuntimeExports.jsx(Grid$1, { size: 6, children: jsxRuntimeExports.jsx(Typography, { className: menuClasses.imageLayerName, children: "Unselected" }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, sx: { paddingRight: "12px", overflow: "visible" }, children: jsxRuntimeExports.jsx(Slider, { value: opacity2, min: 0, max: 1, step: 1e-3, onChange: handleOpacityChange, className: menuClasses.imageLayerOpacitySlider, orientation: "horizontal", "aria-label": "Adjust opacity for unselected layer" }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgPoints, { className: classes2.layerTypePointIcon }) })] }) }) })] }) : null] });
 }
 const useStyles$e = makeStyles()(() => ({
   layerTypeSegmentationIcon: {
@@ -269292,16 +269417,17 @@ function GlobalDimensionSlider(props) {
   const { classes: lcClasses } = useControllerSectionStyles();
   const { classes: classes2 } = useStyles$8();
   const isForZ = spatialRenderingMode !== null;
+  const is3dMode = spatialRenderingMode === "3D";
   function handleRenderingModeChange(event2) {
     setSpatialRenderingMode(event2.target.checked ? "3D" : "2D");
     if (!event2.target.checked) {
       setTargetValue(Math.floor(targetValue));
     }
   }
-  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 8, children: jsxRuntimeExports.jsx(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: isForZ ? jsxRuntimeExports.jsx(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsxRuntimeExports.jsx(FormControlLabel$1, { control: jsxRuntimeExports.jsx(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
+  return jsxRuntimeExports.jsx(Grid$1, { className: lcClasses.layerControllerGrid, children: jsxRuntimeExports.jsx(Paper, { elevation: 4, className: lcClasses.layerControllerRoot, children: jsxRuntimeExports.jsxs(Grid$1, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(SvgDimensions, { className: classes2.dimensionsIcon }) }), jsxRuntimeExports.jsx(Grid$1, { size: 1, children: jsxRuntimeExports.jsx(Typography, { className: classes2.dimensionLabel, children: label2 }) }), jsxRuntimeExports.jsx(Grid$1, { size: 8, children: !is3dMode ? jsxRuntimeExports.jsx(Slider, { value: targetValue, min: min2, max: max2, step: 1, onChange: (e3, v) => setTargetValue(v), className: classes2.dimensionSlider, valueLabelDisplay: "auto", orientation: "horizontal", disabled: spatialRenderingMode === "3D", "aria-label": `${label2}-slice slider` }) : null }), jsxRuntimeExports.jsx(Grid$1, { size: 2, children: isForZ ? jsxRuntimeExports.jsx(FormGroup, { row: true, className: classes2.switchFormGroup, children: jsxRuntimeExports.jsx(FormControlLabel$1, { control: jsxRuntimeExports.jsx(Switch, { color: "primary", checked: spatialRenderingMode === "3D", onChange: handleRenderingModeChange, name: "is3dMode" }), label: "3D" }) }) : null })] }) }) });
 }
 function LayerController(props) {
-  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress } = props;
+  const { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress, layerPerFeatureForPoints } = props;
   const anyLayerHasT = Object.values(images || {}).some((image2) => image2?.image?.instance.hasTStack());
   const anyLayerHasZ = Object.values(images || {}).some((image2) => image2?.image?.instance.hasZStack());
   const maxT = Object.values(images || {}).reduce((a2, h2) => Math.max(a2, h2?.image?.instance.getNumT()), 1) - 1;
@@ -269310,10 +269436,10 @@ function LayerController(props) {
   const reversedSegmentationLayerScopes = useMemo$1(() => [...segmentationLayerScopes || []].reverse(), [segmentationLayerScopes]);
   const reversedSpotLayerScopes = useMemo$1(() => [...spotLayerScopes || []].reverse(), [spotLayerScopes]);
   const reversedPointLayerScopes = useMemo$1(() => [...pointLayerScopes || []].reverse(), [pointLayerScopes]);
-  return jsxRuntimeExports.jsxs("div", { children: [anyLayerHasZ ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
+  return jsxRuntimeExports.jsxs("div", { children: [anyLayerHasZ ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "Z", targetValue: targetZ, setTargetValue: setTargetZ, max: maxZ, spatialRenderingMode, setSpatialRenderingMode }) : null, anyLayerHasT ? jsxRuntimeExports.jsx(GlobalDimensionSlider, { label: "T", targetValue: targetT, setTargetValue: setTargetT, max: maxT }) : null, pointLayerScopes && reversedPointLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(PointLayerController, { theme, layerScope, layerCoordination: pointLayerCoordination[0][layerScope], setLayerCoordination: pointLayerCoordination[1][layerScope], pointMatrixIndicesData: pointMultiIndicesData?.[layerScope], tiledPointsLoadingProgress, layerPerFeatureForPoints }, layerScope)), spotLayerScopes && reversedSpotLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SpotLayerController, { theme, layerScope, layerCoordination: spotLayerCoordination[0][layerScope], setLayerCoordination: spotLayerCoordination[1][layerScope] }, layerScope)), segmentationLayerScopes && reversedSegmentationLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(SegmentationLayerController, { theme, layerScope, layerCoordination: segmentationLayerCoordination[0][layerScope], setLayerCoordination: segmentationLayerCoordination[1][layerScope], channelScopes: segmentationChannelScopesByLayer[layerScope], channelCoordination: segmentationChannelCoordination[0][layerScope], setChannelCoordination: segmentationChannelCoordination[1][layerScope] }, layerScope)), imageLayerScopes && reversedImageLayerScopes.map((layerScope) => jsxRuntimeExports.jsx(ImageLayerController, { theme, coordinationScopesRaw, layerScope, layerCoordination: imageLayerCoordination[0][layerScope], setLayerCoordination: imageLayerCoordination[1][layerScope], channelScopes: imageChannelScopesByLayer[layerScope], channelCoordination: imageChannelCoordination[0][layerScope], setChannelCoordination: imageChannelCoordination[1][layerScope], image: images[layerScope]?.image?.instance, featureIndex: images[layerScope]?.featureIndex, targetT, targetZ, spatialRenderingMode, volumeLoadingProgress: volumeLoadingStatus?.loadingProgress, onStopVolumeLoading: volumeLoadingStatus?.onStopLoading, onRestartVolumeLoading: volumeLoadingStatus?.onRestartLoading, volumeStillRef: volumeLoadingStatus?.stillRef }, layerScope))] });
 }
 function LayerControllerSubscriber(props) {
-  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, cameraPresets } = props;
+  const { coordinationScopes: coordinationScopesRaw, coordinationScopesBy: coordinationScopesByRaw, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, title: title2 = "Spatial Layers", uuid: uuid2, layerPerFeatureForPoints = false, cameraPresets } = props;
   const loaders = useLoaders();
   const mergeCoordination = useMergeCoordination();
   const coordinationScopes = useCoordinationScopes(coordinationScopesRaw);
@@ -269469,7 +269595,7 @@ function LayerControllerSubscriber(props) {
     imageDataStatus,
     pointMultiIndicesDataStatus
   ]);
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, volumeLoadingStatus, tiledPointsLoadingProgress }) });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, isScroll: true, closeButtonVisible, downloadButtonVisible, removeGridComponent, theme, isReady, errors, children: jsxRuntimeExports.jsx(LayerController, { theme, coordinationScopesRaw, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination, images: imageData, imageLayerScopes, imageLayerCoordination, targetT, targetZ, setTargetT, setTargetZ, spatialRenderingMode, setSpatialRenderingMode, imageChannelScopesByLayer, imageChannelCoordination, spotLayerScopes, spotLayerCoordination, pointLayerScopes, pointLayerCoordination, pointMultiIndicesData, layerPerFeatureForPoints, volumeLoadingStatus, tiledPointsLoadingProgress }) });
 }
 const isIterable$2 = (obj) => Symbol.iterator in obj;
 const hasIterableEntries = (value2) => (
@@ -271467,7 +271593,7 @@ function HiglassGlobalStyles(props) {
 }
 register({ dataFetcher: ZarrMultivecDataFetcher_default, config: ZarrMultivecDataFetcher_default.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./higlass-DBQ7M7Iv.js");
+  const { HiGlassComponent } = await import("./higlass-PHabY4jK.js");
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -274415,7 +274541,7 @@ function NeuroglancerGlobalStyles(props) {
   const { classes: classes2 } = props;
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(GlobalStyles$3, { styles: globalNeuroglancerCss }), jsxRuntimeExports.jsx(ScopedGlobalStyles, { styles: globalNeuroglancerStyles, parentClassName: classes2.neuroglancerWrapper })] });
 }
-const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-DCZQdt01.js"));
+const LazyReactNeuroglancer = React__default.lazy(() => import("./ReactNeuroglancer-DJRTUBG7.js"));
 function createWorker() {
   const worker = new WorkerFactory$1();
   worker.AsyncComputationWorker = WorkerFactory;
@@ -274486,8 +274612,8 @@ class NeuroglancerComp extends PureComponent {
     }
   }
   render() {
-    const { classes: classes2, viewerState, cellColorMapping } = this.props;
-    return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(NeuroglancerGlobalStyles, { classes: classes2 }), jsxRuntimeExports.jsx("div", { className: classes2.neuroglancerWrapper, children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState, onViewerStateChanged: this.onViewerStateChanged, bundleRoot: this.bundleRoot, cellColorMapping, ref: this.onRef }) }) })] });
+    const { classes: classes2, viewerState, cellColorMapping, onLayerLoadingChange } = this.props;
+    return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(NeuroglancerGlobalStyles, { classes: classes2 }), jsxRuntimeExports.jsx("div", { className: classes2.neuroglancerWrapper, children: jsxRuntimeExports.jsx(Suspense, { fallback: jsxRuntimeExports.jsx("div", { children: "Loading..." }), children: jsxRuntimeExports.jsx(LazyReactNeuroglancer, { brainMapsClientId: "NOT_A_VALID_ID", viewerState, onViewerStateChanged: this.onViewerStateChanged, onLayerLoadingChange, bundleRoot: this.bundleRoot, cellColorMapping, ref: this.onRef }) }) })] });
   }
 }
 function useMemoCustomComparison(factory2, dependencies2, customIsEqual) {
@@ -274526,7 +274652,8 @@ function customIsEqualForCellColors(prevDeps, nextDeps) {
           "obsColorEncoding",
           "obsSetSelection",
           "additionalObsSets",
-          "spatialChannelColor"
+          "spatialChannelColor",
+          "spatialChannelOpacity"
         ])) {
           forceUpdate = true;
         }
@@ -274541,6 +274668,9 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
   const curriedShallowDiffByLayer = (depName, scopeName) => shallowDiffByLayer(prevDeps, nextDeps, depName, scopeName);
   const curriedShallowDiffByLayerCoordinationWithKeys = (depName, layerScope, keys2) => shallowDiffByLayerCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, keys2);
   const curriedShallowDiffByChannelCoordinationWithKeys = (depName, layerScope, channelScope, keys2) => shallowDiffByChannelCoordinationWithKeys(prevDeps, nextDeps, depName, layerScope, channelScope, keys2);
+  if (["theme", "showAxisLines"].some(curriedShallowDiff)) {
+    forceUpdate = true;
+  }
   if (["segmentationLayerScopes", "segmentationChannelScopesByLayer"].some(curriedShallowDiff)) {
     forceUpdate = true;
   } else {
@@ -274569,7 +274699,8 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
         "spatialLayerColor",
         "featureSelection",
         "featureFilterMode",
-        "featureColor"
+        "featureColor",
+        "spatialPointStrokeWidth"
       ]) || Math.abs(prevDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity - nextDeps?.pointLayerCoordination?.[0]?.[layerScope]?.spatialLayerOpacity) >= 0.05) {
         forceUpdate = true;
       }
@@ -274580,21 +274711,25 @@ function customIsEqualForInitialViewerState(prevDeps, nextDeps) {
 function normalizeColor(rgbColor) {
   return rgbColor.map((c2) => c2 / 255);
 }
+function borderWidthGlsl(borderWidth = 0) {
+  return `setPointMarkerBorderWidth(${borderWidth.toFixed(1)});`;
+}
 function toVec3(normalizedColor) {
   return `vec3(${normalizedColor.join(", ")})`;
 }
 function toVec4(normalizedColor, alpha2) {
   return `vec4(${normalizedColor.join(", ")}, ${alpha2})`;
 }
-function getSpatialLayerColorShader(staticColor, opacity2) {
+function getSpatialLayerColorShader(staticColor, opacity2, borderWidth = 0) {
   const norm2 = normalizeColor(staticColor);
   return `
         void main() {
             setColor(${toVec4(norm2, opacity2)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureIndices, defaultColor, featureIndexProp) {
+function getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureIndices, defaultColor, featureIndexProp, borderWidth = 0) {
   const normStatic = normalizeColor(staticColor);
   const normDefault = normalizeColor(defaultColor);
   const numFeatures = featureIndices.length;
@@ -274611,13 +274746,15 @@ function getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureI
             }
             if (isSelected) {
                 setColor(${toVec4(normStatic, opacity2)});
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity2)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
 }
-function getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndices, featureIndexProp) {
+function getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndices, featureIndexProp, borderWidth = 0) {
   const normStatic = normalizeColor(staticColor);
   const numFeatures = featureIndices.length;
   const indicesArr = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
@@ -274635,18 +274772,20 @@ function getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndice
                 discard;
             }
             setColor(${toVec4(normStatic, opacity2)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getGeneSelectionNoSelectionShader(staticColor, opacity2) {
+function getGeneSelectionNoSelectionShader(staticColor, opacity2, borderWidth = 0) {
   const norm2 = normalizeColor(staticColor);
   return `
         void main() {
             setColor(${toVec4(norm2, opacity2)});
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity2, featureIndexProp) {
+function getGeneSelectionWithSelectionShader(featureIndices, featureColors, staticColor, defaultColor, opacity2, featureIndexProp, borderWidth = 0) {
   const numFeatures = featureIndices.length;
   const normDefault = normalizeColor(defaultColor);
   const normColors = featureColors.map((c2) => normalizeColor(c2));
@@ -274666,10 +274805,11 @@ function getGeneSelectionWithSelectionShader(featureIndices, featureColors, stat
                 }
             }
             setColor(color);
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity2, featureIndexProp) {
+function getGeneSelectionFilteredShader(featureIndices, featureColors, staticColor, opacity2, featureIndexProp, borderWidth = 0) {
   const numFeatures = featureIndices.length;
   const normColors = featureColors.map((c2) => normalizeColor(c2));
   const normStatic = normalizeColor(staticColor);
@@ -274693,10 +274833,11 @@ function getGeneSelectionFilteredShader(featureIndices, featureColors, staticCol
                 discard;
             }
             setColor(vec4(matchedColor, ${opacity2}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getRandomByFeatureShader(opacity2, featureIndexProp) {
+function getRandomByFeatureShader(opacity2, featureIndexProp, borderWidth = 0) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map((c2) => normalizeColor(c2));
   const paletteDecl = `vec3 palette[${paletteSize}] = vec3[${paletteSize}](${normPalette.map((c2) => toVec3(c2)).join(", ")});`;
@@ -274708,10 +274849,11 @@ function getRandomByFeatureShader(opacity2, featureIndexProp) {
             if (colorIdx < 0) { colorIdx = -colorIdx; }
             vec3 color = palette[colorIdx];
             setColor(vec4(color, ${opacity2}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp) {
+function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, borderWidth = 0) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map((c2) => normalizeColor(c2));
   const normDefault = normalizeColor(defaultColor);
@@ -274733,13 +274875,15 @@ function getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opa
                 int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
                 if (colorIdx < 0) { colorIdx = -colorIdx; }
                 setColor(vec4(palette[colorIdx], ${opacity2}));
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity2)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
 }
-function getRandomByFeatureFilteredShader(featureIndices, opacity2, featureIndexProp) {
+function getRandomByFeatureFilteredShader(featureIndices, opacity2, featureIndexProp, borderWidth = 0) {
   const paletteSize = PALETTE.length;
   const normPalette = PALETTE.map((c2) => normalizeColor(c2));
   const numFeatures = featureIndices.length;
@@ -274762,6 +274906,7 @@ function getRandomByFeatureFilteredShader(featureIndices, opacity2, featureIndex
             int colorIdx = geneIndex - (geneIndex / ${paletteSize}) * ${paletteSize};
             if (colorIdx < 0) { colorIdx = -colorIdx; }
             setColor(vec4(palette[colorIdx], ${opacity2}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
@@ -274776,7 +274921,7 @@ function hashToFloatGlsl() {
         }
     `;
 }
-function getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp) {
+function getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp, borderWidth = 0) {
   return `
         ${hashToFloatGlsl()}
         void main() {
@@ -274786,10 +274931,11 @@ function getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp) {
             float g = hashToFloat(pointIndex, 1);
             float b = hashToFloat(pointIndex, 2);
             setColor(vec4(r, g, b, ${opacity2}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
-function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp) {
+function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp, borderWidth = 0) {
   const normDefault = normalizeColor(defaultColor);
   const numFeatures = featureIndices.length;
   const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
@@ -274810,13 +274956,15 @@ function getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opac
                 float g = hashToFloat(pointIndex, 1);
                 float b = hashToFloat(pointIndex, 2);
                 setColor(vec4(r, g, b, ${opacity2}));
+                ${borderWidthGlsl(borderWidth)}
             } else {
                 setColor(${toVec4(normDefault, opacity2)});
+                ${borderWidthGlsl(borderWidth)}
             }
         }
     `;
 }
-function getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexProp, pointIndexProp) {
+function getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexProp, pointIndexProp, borderWidth = 0) {
   const numFeatures = featureIndices.length;
   const indicesDecl = `int selectedIndices[${numFeatures}] = int[${numFeatures}](${featureIndices.join(", ")});`;
   return `
@@ -274838,11 +274986,12 @@ function getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexP
             float g = hashToFloat(pointIndex, 1);
             float b = hashToFloat(pointIndex, 2);
             setColor(vec4(r, g, b, ${opacity2}));
+            ${borderWidthGlsl(borderWidth)}
         }
     `;
 }
 function getPointsShader(layerCoordination) {
-  const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, featureIndexProp, pointIndexProp } = layerCoordination;
+  const { theme, featureIndex, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, pointMarkerBorderWidth = 0, featureIndexProp, pointIndexProp } = layerCoordination;
   const defaultColor = getDefaultColor(theme);
   const opacity2 = spatialLayerOpacity ?? 1;
   const staticColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : defaultColor;
@@ -274859,50 +275008,50 @@ function getPointsShader(layerCoordination) {
   }) : [];
   if (obsColorEncoding === "spatialLayerColor") {
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getSpatialLayerColorShader(staticColor, opacity2);
+      return getSpatialLayerColorShader(staticColor, opacity2, pointMarkerBorderWidth);
     }
     if (isFiltered) {
-      return getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndices, featureIndexProp);
+      return getSpatialLayerColorFilteredShader(staticColor, opacity2, featureIndices, featureIndexProp, pointMarkerBorderWidth);
     }
-    return getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureIndices, defaultColor, featureIndexProp);
+    return getSpatialLayerColorWithSelectionShader(staticColor, opacity2, featureIndices, defaultColor, featureIndexProp, pointMarkerBorderWidth);
   }
   if (obsColorEncoding === "geneSelection") {
     if (!featureIndexProp) {
       throw new Error("In order to use gene-based color encoding for Neuroglancer Points, options.featureIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.");
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getGeneSelectionNoSelectionShader(staticColor, opacity2);
+      return getGeneSelectionNoSelectionShader(staticColor, opacity2, pointMarkerBorderWidth);
     }
     if (isFiltered) {
-      return getGeneSelectionFilteredShader(featureIndices, resolvedFeatureColors, staticColor, opacity2, featureIndexProp);
+      return getGeneSelectionFilteredShader(featureIndices, resolvedFeatureColors, staticColor, opacity2, featureIndexProp, pointMarkerBorderWidth);
     }
-    return getGeneSelectionWithSelectionShader(featureIndices, resolvedFeatureColors, staticColor, defaultColor, opacity2, featureIndexProp);
+    return getGeneSelectionWithSelectionShader(featureIndices, resolvedFeatureColors, staticColor, defaultColor, opacity2, featureIndexProp, pointMarkerBorderWidth);
   }
   if (obsColorEncoding === "randomByFeature") {
     if (!featureIndexProp) {
       throw new Error("In order to use gene-based color encoding for Neuroglancer Points, options.featureIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.");
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getRandomByFeatureShader(opacity2, featureIndexProp);
+      return getRandomByFeatureShader(opacity2, featureIndexProp, pointMarkerBorderWidth);
     }
     if (isFiltered) {
-      return getRandomByFeatureFilteredShader(featureIndices, opacity2, featureIndexProp);
+      return getRandomByFeatureFilteredShader(featureIndices, opacity2, featureIndexProp, pointMarkerBorderWidth);
     }
-    return getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp);
+    return getRandomByFeatureWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointMarkerBorderWidth);
   }
   if (obsColorEncoding === "random") {
     if (!pointIndexProp) {
       throw new Error("In order to use per-point color encoding for Neuroglancer Points, options.pointIndexProp must be specified for the obsPoints.ng-annotations fileType in the Vitessce configuration.");
     }
     if (!hasFeatureSelection || !hasResolvedIndices) {
-      return getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp);
+      return getRandomPerPointShader(opacity2, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
     }
     if (isFiltered) {
-      return getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexProp, pointIndexProp);
+      return getRandomPerPointFilteredShader(featureIndices, opacity2, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
     }
-    return getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp);
+    return getRandomPerPointWithSelectionShader(featureIndices, defaultColor, opacity2, featureIndexProp, pointIndexProp, pointMarkerBorderWidth);
   }
-  return getSpatialLayerColorShader(staticColor, opacity2);
+  return getSpatialLayerColorShader(staticColor, opacity2, pointMarkerBorderWidth);
 }
 const DEFAULT_NG_PROPS = {
   layout: "3d",
@@ -274932,7 +275081,7 @@ function toNgLayerName(dataType, layerScope, channelScope = null) {
   }
   throw new Error(`Unsupported data type: ${dataType}`);
 }
-function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
+function useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData) {
   const viewerState = useMemoCustomComparison(() => {
     let result = cloneDeep$1(DEFAULT_NG_PROPS);
     segmentationLayerScopes.forEach((layerScope) => {
@@ -274945,13 +275094,20 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
         channelScopes.forEach((channelScope) => {
           const channelCoordination = segmentationChannelCoordination[0]?.[layerScope]?.[channelScope];
           const { spatialChannelVisible } = channelCoordination || {};
+          const { source: ngSource, ...otherNgOptions } = layerData.neuroglancerOptions ?? {};
+          const hasNgSourceOptions = layerData.neuroglancerOptions?.subsources || layerData.neuroglancerOptions?.enableDefaultSubsources !== void 0;
+          const source2 = hasNgSourceOptions ? {
+            url: toPrecomputedSource(layerUrl),
+            subsources: layerData.neuroglancerOptions.subsources,
+            enableDefaultSubsources: layerData.neuroglancerOptions.enableDefaultSubsources ?? false
+          } : toPrecomputedSource(layerUrl);
           result = {
             ...result,
             layers: [
               ...result.layers,
               {
                 type: "segmentation",
-                source: toPrecomputedSource(layerUrl),
+                source: source2,
                 segments: [],
                 name: toNgLayerName(DataType$3.OBS_SEGMENTATIONS, layerScope, channelScope),
                 visible: spatialLayerVisible && spatialChannelVisible,
@@ -274959,7 +275115,7 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
                 // visibility must be true for the layer to be visible.
                 // TODO: update this to extract specific properties from
                 // neuroglancerOptions as needed.
-                ...layerData.neuroglancerOptions ?? {}
+                ...otherNgOptions
               }
             ]
           };
@@ -274972,7 +275128,7 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
       const layerUrl = obsPointsUrls[layerScope]?.[0]?.url;
       const featureIndex = pointMultiIndicesData[layerScope]?.featureIndex;
       if (layerUrl && layerData) {
-        const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor } = layerCoordination || {};
+        const { spatialLayerVisible, spatialLayerOpacity, obsColorEncoding, spatialLayerColor, featureSelection, featureFilterMode, featureColor, spatialPointStrokeWidth } = layerCoordination || {};
         const shader = getPointsShader({
           theme,
           featureIndex,
@@ -274983,7 +275139,8 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
           featureFilterMode,
           featureColor,
           featureIndexProp: layerData.neuroglancerOptions?.featureIndexProp,
-          pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp
+          pointIndexProp: layerData.neuroglancerOptions?.pointIndexProp,
+          pointMarkerBorderWidth: spatialPointStrokeWidth ?? 0
         });
         result = {
           ...result,
@@ -275020,6 +275177,7 @@ function useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentation
     return result;
   }, {
     theme,
+    showAxisLines,
     segmentationLayerScopes,
     segmentationChannelScopesByLayer,
     segmentationLayerCoordination,
@@ -304715,6 +304873,7 @@ function NeuroglancerSubscriber(props) {
     downloadButtonVisible,
     removeGridComponent,
     theme,
+    showAxisLines = false,
     title: title2 = "Spatial",
     subtitle = "Powered by Neuroglancer",
     helpText = ViewHelpMapping.NEUROGLANCER,
@@ -304803,7 +304962,8 @@ function NeuroglancerSubscriber(props) {
     CoordinationType$1.OBS_HIGHLIGHT,
     CoordinationType$1.TOOLTIPS_VISIBLE,
     CoordinationType$1.TOOLTIP_CROSSHAIRS_VISIBLE,
-    CoordinationType$1.LEGEND_VISIBLE
+    CoordinationType$1.LEGEND_VISIBLE,
+    CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH
   ], coordinationScopes, coordinationScopesBy, CoordinationType$1.POINT_LAYER);
   const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, uuid2);
   const [pointMultiIndicesData, pointMultiIndicesDataStatus, pointMultiIndicesDataErrors] = usePointMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset);
@@ -304836,7 +304996,7 @@ function NeuroglancerSubscriber(props) {
       result[layerScope] = {};
       segmentationChannelScopesByLayer?.[layerScope]?.forEach((channelScope) => {
         const { obsSets: layerSets, obsIndex: layerIndex } = obsSegmentationsSetsData?.[layerScope]?.[channelScope] || {};
-        const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor } = segmentationChannelCoordination[0][layerScope][channelScope];
+        const { obsSetColor, obsColorEncoding, obsSetSelection, additionalObsSets, spatialChannelColor, spatialChannelOpacity } = segmentationChannelCoordination[0][layerScope][channelScope];
         if (obsColorEncoding === "spatialChannelColor") {
           if (layerIndex && spatialChannelColor) {
             const hex2 = rgbToHex$1(spatialChannelColor);
@@ -304856,6 +305016,7 @@ function NeuroglancerSubscriber(props) {
               });
             }
             result[layerScope][channelScope] = ngCellColors;
+            result[layerScope].opacity = spatialChannelOpacity ?? 1;
           }
         } else if (layerSets && layerIndex) {
           const mergedCellSets = mergeObsSets(layerSets, additionalObsSets);
@@ -304871,6 +305032,7 @@ function NeuroglancerSubscriber(props) {
             ngCellColors[i2] = rgbToHex$1(color2);
           });
           result[layerScope][channelScope] = ngCellColors;
+          result[layerScope].opacity = spatialChannelOpacity ?? 1;
         }
       });
     });
@@ -304884,7 +305046,7 @@ function NeuroglancerSubscriber(props) {
     segmentationChannelCoordination,
     theme
   }, customIsEqualForCellColors);
-  const initalViewerState = useNeuroglancerViewerState(theme, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
+  const initalViewerState = useNeuroglancerViewerState(theme, showAxisLines, segmentationLayerScopes, segmentationChannelScopesByLayer, segmentationLayerCoordination, segmentationChannelCoordination, obsSegmentationsUrls, obsSegmentationsData, pointLayerScopes, pointLayerCoordination, obsPointsUrls, obsPointsData, pointMultiIndicesData);
   const [latestViewerStateIteration, incrementLatestViewerStateIteration] = useReducer((x2) => x2 + 1, 0);
   const latestViewerStateRef = useRef({
     ...initalViewerState,
@@ -304918,6 +305080,7 @@ function NeuroglancerSubscriber(props) {
     z: spatialRotationZ,
     orbit: spatialRotationOrbit
   });
+  const [isLayersLoaded, setIsLayersLoaded] = useState(false);
   const prevCoordsRef = useRef({
     zoom: spatialZoom,
     rx: spatialRotationX,
@@ -305022,7 +305185,10 @@ function NeuroglancerSubscriber(props) {
     const result = {};
     segmentationLayerScopes?.forEach((layerScope) => {
       const channelScope = segmentationChannelScopesByLayer?.[layerScope]?.[0];
-      result[layerScope] = segmentationColorMapping?.[layerScope]?.[channelScope] ?? {};
+      result[layerScope] = {
+        colors: segmentationColorMapping?.[layerScope]?.[channelScope] ?? {},
+        opacity: segmentationColorMapping?.[layerScope]?.opacity ?? 1
+      };
     });
     return result;
   }, [segmentationColorMapping, segmentationLayerScopes, segmentationChannelScopesByLayer]);
@@ -305085,12 +305251,13 @@ function NeuroglancerSubscriber(props) {
     }
     const updatedLayers = current2?.layers?.map((layer, idx) => {
       const layerScope = segmentationLayerScopes?.[idx];
-      const layerColorMapping = cellColorMappingByLayer?.[layerScope] ?? {};
+      const layerColorMapping = cellColorMappingByLayer?.[layerScope]?.colors ?? {};
       const layerSegments = Object.keys(layerColorMapping);
       return {
         ...layer,
         segments: layerSegments,
-        segmentColors: layerColorMapping
+        segmentColors: layerColorMapping,
+        objectAlpha: cellColorMappingByLayer?.[layerScope]?.opacity ?? 1
       };
     }) ?? [];
     const updated = {
@@ -305125,8 +305292,23 @@ function NeuroglancerSubscriber(props) {
   const onSegmentHighlight = useCallback((obsId) => {
     setCellHighlight(String(obsId));
   }, [setCellHighlight]);
+  const handleLayerLoadingChange = useCallback((isLoaded) => {
+    setIsLayersLoaded(isLoaded);
+  }, []);
   const hasLayers = derivedViewerState?.layers?.length > 0;
-  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, info: subtitle, helpText, isSpatial: true, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady, errors, withPadding: false, guideUrl: GUIDE_URL, children: hasLayers ? jsxRuntimeExports.jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, ref: containerRef, children: [jsxRuntimeExports.jsx("div", { style: { position: "absolute", top: 0, right: 0, zIndex: 50 }, children: jsxRuntimeExports.jsx(MultiLegend, { theme: "dark", maxHeight: ngHeight, segmentationLayerScopes, segmentationLayerCoordination, segmentationChannelScopesByLayer, segmentationChannelCoordination }) }), jsxRuntimeExports.jsx(NeuroglancerComp, { classes: classes2, onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate })] }) : null });
+  return jsxRuntimeExports.jsx(TitleInfo, { title: title2, info: subtitle, helpText, isSpatial: true, theme, closeButtonVisible, downloadButtonVisible, removeGridComponent, isReady: isReady && isLayersLoaded, errors, withPadding: false, guideUrl: GUIDE_URL, children: hasLayers ? jsxRuntimeExports.jsxs("div", { style: { position: "relative", width: "100%", height: "100%" }, ref: containerRef, children: [jsxRuntimeExports.jsx("div", { style: { position: "absolute", top: 0, right: 0, zIndex: 50 }, children: jsxRuntimeExports.jsx(MultiLegend, {
+    theme: "dark",
+    maxHeight: ngHeight,
+    // Segmentations
+    segmentationLayerScopes,
+    segmentationLayerCoordination,
+    segmentationChannelScopesByLayer,
+    segmentationChannelCoordination,
+    // Points
+    pointLayerScopes,
+    pointLayerCoordination,
+    pointMultiIndicesData
+  }) }), jsxRuntimeExports.jsx(NeuroglancerComp, { classes: classes2, onSegmentClick, onSelectHoveredCoords: onSegmentHighlight, viewerState: derivedViewerState, cellColorMapping: cellColorMappingByLayer, setViewerState: handleStateUpdate, onLayerLoadingChange: handleLayerLoadingChange })] }) : null });
 }
 const FEATURE_AGGREGATION_STRATEGIES = ["first", "last", "sum", "mean"];
 function CellSetExpressionPlotOptions(props) {
@@ -307085,10 +307267,9 @@ function CellSetExpressionPlot(props) {
     if (!obsSetSelection) {
       return 0;
     }
-    const cellSetNames = obsSetSelection.map((d) => d.at(-1));
-    return cellSetNames.reduce((acc, name2) => {
-      acc = acc === void 0 || name2.length > acc ? name2.length : acc;
-      return acc;
+    return obsSetSelection.reduce((acc, path2) => {
+      const nameLength = path2?.at(-1)?.length ?? 0;
+      return nameLength > acc ? nameLength : acc;
     }, 0);
   }, [obsSetSelection]);
   const isStratified = Array.isArray(sampleSetSelection) && sampleSetSelection.length === 2;
@@ -307167,7 +307348,7 @@ function CellSetExpressionPlot(props) {
     }
     g2.append("g").attr("transform", `translate(${marginLeft},0)`).call(axisLeft(y2)).selectAll("text").style("font-size", "11px");
     const xTickG = g2.append("g").attr("transform", `translate(0,${innerHeight})`).style("font-size", "14px");
-    xTickG.call(axisBottom(xGroup).tickFormat((d) => d.at(-1))).selectAll("text").style("font-size", "11px").attr("dx", "-6px").attr("dy", "6px").attr("transform", "rotate(-45)").style("text-anchor", "end");
+    xTickG.call(axisBottom(xGroup).tickFormat((d) => d?.at(-1) ?? "")).selectAll("text").style("font-size", "11px").attr("dx", "-6px").attr("dy", "6px").attr("transform", "rotate(-45)").style("text-anchor", "end");
     if (isStratified) {
       const tickWidth = xGroup.bandwidth();
       xTickG.selectAll(".tick").append("rect").attr("x", -tickWidth / 2).attr("width", tickWidth).attr("height", 4).style("fill", (d) => obsSetColorScale(d));
@@ -357951,7 +358132,7 @@ const VEGA_THEMES = {
 };
 const DATASET_NAME = "table";
 function VegaGlobalStyles() {
-  const { theme } = useStyles$x();
+  const { theme } = useStyles$y();
   return jsxRuntimeExports.jsx(GlobalStyles$3, { styles: {
     "#vg-tooltip-element.vg-tooltip.custom-theme": {
       boxShadow: "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
@@ -357985,7 +358166,7 @@ function renderTooltipContents(tooltipText) {
 }
 function VegaPlot(props) {
   const { spec: partialSpec, data: data2, getTooltipText, signalListeners, renderer = "svg", onNewView } = props;
-  const { classes: tooltipClasses2 } = useStyles$s();
+  const { classes: tooltipClasses2 } = useStyles$t();
   const tooltipHandler = useMemo$1(() => {
     if (typeof getTooltipText === "function") {
       const tooltipConfig = {
@@ -360683,7 +360864,8 @@ class SpatialDataAutoConfig extends AbstractAutoConfig {
     });
     availableElements.forEach(({ path: path2, attrs }) => {
       const relPath = path2.substring(1);
-      const firstCoordinateSystem = attrs?.multiscales?.[0]?.coordinateTransformations?.[0]?.output?.name;
+      const omeAttrs = flattenOmeAttrs(attrs);
+      const firstCoordinateSystem = omeAttrs?.multiscales?.[0]?.coordinateTransformations?.[0]?.output?.name;
       if (relPath.match(/^(images)\/([^/]*)$/)) {
         options.image = {
           path: relPath,
@@ -363765,10 +363947,10 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
     const loader2 = await loadOmeZarr(this.storeRoot);
     const imageWrapper = new ImageWrapper(loader2, this.options);
     const { metadata: metadata2, data: data2 } = loader2;
-    const { omero, multiscales, channels_metadata: spatialDataChannels, "image-label": imageLabel } = metadata2;
-    const isSpatialData = !!spatialDataChannels || !!imageLabel;
-    const isLabels = !!imageLabel;
-    if (!isSpatialData && !omero) {
+    const { omero, multiscales, channels_metadata: spatialDataChannels, "image-label": imageLabel, spatialdata_attrs: spatialDataAttrs } = metadata2;
+    const isSpatialDataElement = !!spatialDataChannels || !!imageLabel || !!spatialDataAttrs;
+    const isLabels = !!imageLabel || isSpatialDataElement && !omero && !spatialDataChannels;
+    if (!isSpatialDataElement && !omero) {
       throw new Error("image.ome-zarr must have omero metadata in attributes.");
     }
     if (!Array.isArray(multiscales) || multiscales.length === 0) {
@@ -363797,23 +363979,21 @@ class OmeZarrLoader extends AbstractTwoStepLoader {
     let channelLabels = [];
     let initialTargetT = 0;
     let initialTargetZ = 0;
-    if (isSpatialData) {
-      if (isLabels) {
-        channelObjects = [{
-          selection: filterSelection2({ z: initialTargetZ, t: initialTargetT, c: 0 }),
-          slider: [0, 255],
-          color: [255, 255, 255]
-        }];
-        channelLabels = ["labels"];
-      } else {
-        const { channels: channels2 } = spatialDataChannels;
-        channelObjects = channels2.map((channel, i2) => ({
-          selection: filterSelection2({ z: initialTargetZ, t: initialTargetT, c: i2 }),
-          slider: [0, 255],
-          color: [255, 255, 255]
-        }));
-        channelLabels = channels2.map((c2) => c2.label);
-      }
+    if (isLabels) {
+      channelObjects = [{
+        selection: filterSelection2({ z: initialTargetZ, t: initialTargetT, c: 0 }),
+        slider: [0, 255],
+        color: [255, 255, 255]
+      }];
+      channelLabels = ["labels"];
+    } else if (spatialDataChannels) {
+      const { channels: channels2 } = spatialDataChannels;
+      channelObjects = channels2.map((channel, i2) => ({
+        selection: filterSelection2({ z: initialTargetZ, t: initialTargetT, c: i2 }),
+        slider: [0, 255],
+        color: [255, 255, 255]
+      }));
+      channelLabels = channels2.map((c2) => c2.label);
     } else {
       const { rdefs = {}, channels: channels2 } = omero;
       if (typeof rdefs.defaultT === "number") {
@@ -386530,6 +386710,7 @@ const baseCoordinationTypes = [
   new PluginCoordinationType(CoordinationType$1.SPATIAL_CHANNEL_COLOR, [255, 255, 255], z.array(z.number()).length(3).nullable()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SEGMENTATION_FILLED, true, z.boolean()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_SEGMENTATION_STROKE_WIDTH, 1, z.number()),
+  new PluginCoordinationType(CoordinationType$1.SPATIAL_POINT_STROKE_WIDTH, 0, z.number()),
   new PluginCoordinationType(CoordinationType$1.SPATIAL_LOD_FACTOR, 1, z.number()),
   // Reference: https://www.awaresystems.be/imaging/tiff/tifftags/photometricinterpretation.html
   new PluginCoordinationType(CoordinationType$1.PHOTOMETRIC_INTERPRETATION, null, z.enum(["BlackIsZero", "RGB"]).nullable()),