@vitessce/all 3.0.0 → 3.0.1

package/dist/{index-3f1c1764.js → index-f48f3f08.js}

@@ -6,7 +6,7 @@ var __publicField = (obj, key2, value2) => {
 };
 import * as React from "react";
 import React__default, { Children, isValidElement, cloneElement, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useLayoutEffect as useLayoutEffect$1, useState, PureComponent, Component as Component$1, useCallback, createElement, useReducer, Suspense } from "react";
-import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useUrls, useObsSetsData, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, VitS } from "@vitessce/vit-s";
+import { useLoaders, useCoordination, useDescription, useImageData, useReady, TitleInfo, useVitessceContainer, useSetWarning, useObsSetsData, useUrls, usePlotOptionsStyles, OptionsContainer, CellColorEncodingOption, OptionSelect, useComponentHover, useComponentViewInfo, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useDeckCanvasSize, useMultiObsLabels, useObsEmbeddingData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useGetObsInfo, useUint8FeatureSelection, useExpressionValueGetter, useAuxiliaryCoordination, useHasLoader, useObsLocationsData, useObsLabelsData, useObsSegmentationsData, useNeighborhoodsData, useObsFeatureMatrixData, useUint8ObsFeatureMatrix, useGetObsMembership, PopperMenu, useComponentLayout, useClosestVitessceContainerSize, useWindowDimensions, useWarning, useGridItemSize, useGenomicProfilesData, DataSourceFetchError, AbstractLoaderError, AbstractTwoStepLoader, LoaderResult, LoaderValidationError, logConfig, VitS } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function _mergeNamespaces(n3, m2) {
@@ -37756,14 +37756,12 @@ function Description(props2) {
   const classes = useStyles$d();
   return jsxRuntimeExports.jsxs("div", { className: classes.description, children: [jsxRuntimeExports.jsx("p", { children: description2 }), metadata2 && Array.from(metadata2.entries()).map(([layerIndex, { name: layerName, metadata: metadataRecord }]) => metadataRecord && Object.entries(metadataRecord).length > 0 ? jsxRuntimeExports.jsxs("details", { children: [jsxRuntimeExports.jsx("summary", { children: layerName }), jsxRuntimeExports.jsx("div", { className: classes.metadataContainer, children: jsxRuntimeExports.jsx("table", { children: jsxRuntimeExports.jsx("tbody", { children: Object.entries(metadataRecord).map(([key2, value2]) => jsxRuntimeExports.jsxs("tr", { children: [jsxRuntimeExports.jsx("th", { title: key2, children: key2 }), jsxRuntimeExports.jsx("td", { title: value2, children: value2 })] }, key2)) }) }) })] }, layerIndex) : null)] });
 }
-const addUrl = () => {
-};
 function DescriptionSubscriber(props2) {
   const { coordinationScopes, description: descriptionOverride, removeGridComponent, theme, title: title2 = "Description" } = props2;
   const loaders = useLoaders();
   const [{ dataset, spatialImageLayer: rasterLayers }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.DESCRIPTION], coordinationScopes);
   const [description2] = useDescription(loaders, dataset);
-  const [{ image: image2 }, imageStatus] = useImageData(loaders, dataset, addUrl, false, {}, {}, {});
+  const [{ image: image2 }, imageStatus] = useImageData(loaders, dataset, false, {}, {}, {});
   const { loaders: imageLayerLoaders = [], meta: imageLayerMeta = [] } = image2 || {};
   const isReady = useReady([imageStatus]);
   const metadata2 = useMemo(() => {
@@ -46136,6 +46134,7 @@ const useHelpTooltipStyles = makeStyles((theme) => ({
       cursor: "pointer",
       width: "100%",
       backgroundColor: "transparent",
+      color: theme.palette.grayDarkD15,
       borderRadius: "2px",
       "&:hover": {
         backgroundColor: theme.palette.grayLightL10
@@ -51109,14 +51108,12 @@ function ObsSetsManagerSubscriber(props2) {
   const setWarning = useSetWarning();
   const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetExpansion: cellSetExpansion, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsColorEncoding: cellColorEncoding }, { setObsSetSelection: setCellSetSelection, setObsColorEncoding: setCellColorEncoding, setObsSetColor: setCellSetColor, setObsSetExpansion: setCellSetExpansion, setAdditionalObsSets: setAdditionalCellSets }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SETS], coordinationScopes);
   const title2 = titleOverride || `${capitalize$2(obsType)} Sets`;
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   useEffect(() => {
     setCellSetExpansion([]);
   }, [loaders, dataset]);
-  const [{ obsIndex, obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
-  const isReady = useReady([
-    obsSetsStatus
-  ]);
+  const [{ obsIndex, obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const isReady = useReady([obsSetsStatus]);
+  const urls2 = useUrls([obsSetsUrls]);
   useEffect(() => {
     if (additionalCellSets) {
       let upgradedCellSets;
@@ -155474,16 +155471,16 @@ async function getDecoder(fileDirectory) {
   const Decoder = await importFn();
   return new Decoder(fileDirectory);
 }
-addDecoder([void 0, 1], () => import("./raw-3c693341.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-865bd058.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-3c2d82ff.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-4d26ee71.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-e740c9a5.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-f57b3163.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-d4191efd.js").then((m2) => m2.default));
-addDecoder(34887, () => import("./lerc-01e6c4d8.js").then((m2) => m2.default));
-addDecoder(50001, () => import("./webimage-83da2258.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-7f0b1b2c.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-475a23c9.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-08efb7ce.js").then((m2) => m2.default));
+addDecoder(34887, () => import("./lerc-f7557585.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-a7dde8d2.js").then((m2) => m2.default));
 function copyNewSize(array2, width2, height2, samplesPerPixel = 1) {
   return new (Object.getPrototypeOf(array2)).constructor(width2 * height2 * samplesPerPixel);
 }
@@ -171929,7 +171926,7 @@ const VisibilityOffIcon = createSvgIcon(/* @__PURE__ */ React.createElement("pat
   d: "M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"
 }), "VisibilityOff");
 const useStyles$b = makeStyles(() => ({
-  button: {
+  toolButton: {
     display: "inline-flex",
     "&:active": {
       opacity: ".65",
@@ -171952,7 +171949,7 @@ const useStyles$b = makeStyles(() => ({
     transform: "scale(0.98)"
     // make the button slightly smaller
   },
-  icon: {
+  toolIcon: {
     // btn btn-outline-secondary mr-2 icon
     padding: "0",
     height: "2em",
@@ -171990,12 +171987,12 @@ const useStyles$b = makeStyles(() => ({
 function IconTool(props2) {
   const { alt, onClick, isActive: isActive2, children: children2 } = props2;
   const classes = useStyles$b();
-  return jsxRuntimeExports.jsx("button", { className: clsx(classes.icon, { [classes.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children2 });
+  return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, { [classes.toolActive]: isActive2 }), onClick, type: "button", title: alt, children: children2 });
 }
 function IconButton2(props2) {
   const { alt, onClick, children: children2 } = props2;
   const classes = useStyles$b();
-  return jsxRuntimeExports.jsx("button", { className: clsx(classes.icon, classes.button), onClick, type: "button", title: alt, children: children2 });
+  return jsxRuntimeExports.jsx("button", { className: clsx(classes.toolIcon, classes.toolButton), onClick, type: "button", title: alt, children: children2 });
 }
 function ToolMenu(props2) {
   const { setActiveTool, activeTool, visibleTools = { pan: true, selectLasso: true }, recenterOnClick = () => {
@@ -174758,17 +174755,17 @@ function EmbeddingScatterplotSubscriber(props2) {
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
   const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom2, embeddingTargetX: targetX2, embeddingTargetY: targetY2, embeddingTargetZ: targetZ, embeddingType: mapping, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
+  const { embeddingZoom: initialZoom, embeddingTargetX: initialTargetX, embeddingTargetY: initialTargetY } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SCATTERPLOT], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title2 = titleOverride || `Scatterplot (${mapping})`;
-  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset, addUrl2);
-  const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus] = useObsEmbeddingData(loaders, dataset, addUrl2, true, {}, {}, { obsType, embeddingType: mapping });
+  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
+  const [{ obsIndex: obsEmbeddingIndex, obsEmbedding }, obsEmbeddingStatus, obsEmbeddingUrls] = useObsEmbeddingData(loaders, dataset, true, {}, {}, { obsType, embeddingType: mapping });
   const cellsCount = (obsEmbeddingIndex == null ? void 0 : obsEmbeddingIndex.length) || 0;
-  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
   const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
-  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl2, false, { obsType, featureType, featureValueType });
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl2, false, {}, {}, { featureType });
+  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
   const isReady = useReady([
     obsEmbeddingStatus,
     obsSetsStatus,
@@ -174776,6 +174773,12 @@ function EmbeddingScatterplotSubscriber(props2) {
     featureLabelsStatus,
     matrixIndicesStatus
   ]);
+  const urls2 = useUrls([
+    obsEmbeddingUrls,
+    obsSetsUrls,
+    matrixIndicesUrls,
+    featureLabelsUrls
+  ]);
   const [dynamicCellRadius, setDynamicCellRadius] = useState(cellRadiusFixed);
   const [dynamicCellOpacity, setDynamicCellOpacity] = useState(cellOpacityFixed);
   const [originalViewState, setOriginalViewState] = useState(null);
@@ -174848,33 +174851,39 @@ function EmbeddingScatterplotSubscriber(props2) {
     return [null, null, null, null, null];
   }, [obsEmbedding]);
   useEffect(() => {
-    if (xRange && yRange && isReady) {
+    if (xRange && yRange) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom2, xRange, yRange, width2, height2);
       setDynamicCellRadius(pointSizeDevicePixels);
       const nextCellOpacityScale = getPointOpacity(zoom2, xRange, yRange, width2, height2, numCells, averageFillDensity);
       setDynamicCellOpacity(nextCellOpacityScale);
-      if (typeof targetX2 !== "number" || typeof targetY2 !== "number") {
+      if (typeof initialTargetX !== "number" || typeof initialTargetY !== "number") {
         const newTargetX = xExtent[0] + xRange / 2;
         const newTargetY = yExtent[0] + yRange / 2;
         const newZoom = Math.log2(Math.min(width2 / xRange, height2 / yRange));
-        setTargetX(newTargetX);
-        setTargetY(-newTargetY);
-        setZoom(newZoom);
+        const notYetInitialized = typeof targetX2 !== "number" || typeof targetY2 !== "number";
+        const stillDefaultInitialized = targetX2 === newTargetX && targetY2 === -newTargetY;
+        if (notYetInitialized || stillDefaultInitialized) {
+          setTargetX(newTargetX);
+          setTargetY(-newTargetY);
+          setZoom(newZoom);
+        }
         setOriginalViewState({ target: [newTargetX, -newTargetY, 0], zoom: newZoom });
       } else if (!originalViewState) {
-        setOriginalViewState({ target: [targetX2, targetY2, 0], zoom: zoom2 });
+        setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
   }, [
     xRange,
     yRange,
-    isReady,
     xExtent,
     yExtent,
     numCells,
     width2,
     height2,
+    initialZoom,
     zoom2,
+    initialTargetX,
+    initialTargetY,
     averageFillDensity
   ]);
   const getObsInfo = useGetObsInfo(observationsLabel, obsLabelsTypes, obsLabelsData, obsSetsMembership);
@@ -174953,7 +174962,6 @@ function GatingSubscriber(props2) {
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
   const [{ dataset, obsType, featureType, featureValueType, embeddingZoom: zoom2, embeddingTargetX: targetX2, embeddingTargetY: targetY2, embeddingTargetZ: targetZ, obsFilter: cellFilter, obsHighlight: cellHighlight, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, embeddingObsSetPolygonsVisible: cellSetPolygonsVisible, embeddingObsSetLabelsVisible: cellSetLabelsVisible, embeddingObsSetLabelSize: cellSetLabelSize, embeddingObsRadius: cellRadiusFixed, embeddingObsRadiusMode: cellRadiusMode, embeddingObsOpacity: cellOpacityFixed, embeddingObsOpacityMode: cellOpacityMode, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, featureSelection: gatingFeatureSelectionColor, featureValueTransform, featureValueTransformCoefficient, gatingFeatureSelectionX, gatingFeatureSelectionY }, { setEmbeddingZoom: setZoom, setEmbeddingTargetX: setTargetX, setEmbeddingTargetY: setTargetY, setEmbeddingTargetZ: setTargetZ, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setEmbeddingObsSetPolygonsVisible: setCellSetPolygonsVisible, setEmbeddingObsSetLabelsVisible: setCellSetLabelsVisible, setEmbeddingObsSetLabelSize: setCellSetLabelSize, setEmbeddingObsRadius: setCellRadiusFixed, setEmbeddingObsRadiusMode: setCellRadiusMode, setEmbeddingObsOpacity: setCellOpacityFixed, setEmbeddingObsOpacityMode: setCellOpacityMode, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setFeatureValueTransform, setFeatureValueTransformCoefficient, setGatingFeatureSelectionX, setGatingFeatureSelectionY }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GATING], coordinationScopes);
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const [width2, height2, deckRef] = useDeckCanvasSize();
   const title2 = useMemo(() => {
     if (titleOverride) {
@@ -174966,11 +174974,11 @@ function GatingSubscriber(props2) {
   }, [titleOverride, gatingFeatureSelectionX, gatingFeatureSelectionY]);
   const featureSelectionX = useMemo(() => gatingFeatureSelectionX ? [gatingFeatureSelectionX] : null, [gatingFeatureSelectionX]);
   const featureSelectionY = useMemo(() => gatingFeatureSelectionY ? [gatingFeatureSelectionY] : null, [gatingFeatureSelectionY]);
-  const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
   const [expressionDataColor, loadedColor, featureSelectionColorStatus] = useFeatureSelection(loaders, dataset, false, gatingFeatureSelectionColor, { obsType, featureType, featureValueType });
   const [expressionDataX, loadedX, featureSelectionXStatus] = useFeatureSelection(loaders, dataset, false, featureSelectionX, { obsType, featureType, featureValueType });
   const [expressionDataY, loadedY, featureSelectionYStatus] = useFeatureSelection(loaders, dataset, false, featureSelectionY, { obsType, featureType, featureValueType });
-  const [{ obsIndex, featureIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl2, false, { obsType, featureType, featureValueType });
+  const [{ obsIndex, featureIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
   const cellsCount = (obsIndex == null ? void 0 : obsIndex.length) || 0;
   const isReady = useReady([
     obsSetsStatus,
@@ -174979,6 +174987,10 @@ function GatingSubscriber(props2) {
     featureSelectionYStatus,
     matrixIndicesStatus
   ]);
+  const urls2 = useUrls([
+    obsSetsUrls,
+    matrixIndicesUrls
+  ]);
   const obsXY = useMemo(() => {
     if (!(cellsCount && (expressionDataX == null ? void 0 : expressionDataX[0]) && (expressionDataY == null ? void 0 : expressionDataY[0]) && featureSelectionX && featureSelectionY)) {
       return null;
@@ -191219,16 +191231,13 @@ const useToggleStyles = makeStyles(() => ({
   cameraLabel: {
     padding: "0px 0px 0px 16px"
   },
-  box: {
+  toggleBox: {
     padding: "0px"
-  },
-  button: {
-    padding: "0px 0px 0px 8px"
   }
 }));
 const ToggleFixedAxisButton = ({ setSpatialAxisFixed, spatialAxisFixed, use3d }) => {
   const classes = useToggleStyles();
-  return jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.cameraLabel, children: "Fix Camera Axis" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.box, children: jsxRuntimeExports.jsx(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed) }) })] });
+  return jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.cameraLabel, children: "Fix Camera Axis" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.toggleBox, children: jsxRuntimeExports.jsx(Checkbox$1, { onClick: () => setSpatialAxisFixed(!spatialAxisFixed), disabled: !use3d, checked: Boolean(spatialAxisFixed) }) })] });
 };
 function SpatialOptions(props2) {
   const { observationsLabel, cellColorEncoding, setCellColorEncoding, setSpatialAxisFixed, spatialAxisFixed, use3d, tooltipsVisible, setTooltipsVisible, geneExpressionColormap, setGeneExpressionColormap, geneExpressionColormapRange, setGeneExpressionColormapRange, canShowExpressionOptions, canShowColorEncodingOption, canShow3DOptions } = props2;
@@ -191274,27 +191283,27 @@ function SpatialSubscriber(props2) {
   const setComponentHover = useSetComponentHover();
   const setComponentViewInfo = useSetComponentViewInfo(uuid);
   const [{ dataset, obsType, featureType, featureValueType, spatialZoom: zoom2, spatialTargetX: targetX2, spatialTargetY: targetY2, spatialTargetZ: targetZ, spatialRotationX: rotationX, spatialRotationY: rotationY, spatialRotationZ: rotationZ, spatialRotationOrbit: rotationOrbit, spatialOrbitAxis: orbitAxis, spatialImageLayer: imageLayers, spatialSegmentationLayer: cellsLayer, spatialPointLayer: moleculesLayer, spatialNeighborhoodLayer: neighborhoodsLayer, obsFilter: cellFilter, obsHighlight: cellHighlight, featureSelection: geneSelection, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, obsColorEncoding: cellColorEncoding, additionalObsSets: additionalCellSets, spatialAxisFixed, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, tooltipsVisible }, { setSpatialZoom: setZoom, setSpatialTargetX: setTargetX, setSpatialTargetY: setTargetY, setSpatialTargetZ: setTargetZ, setSpatialRotationX: setRotationX, setSpatialRotationOrbit: setRotationOrbit, setSpatialOrbitAxis: setOrbitAxis, setSpatialImageLayer: setRasterLayers, setSpatialSegmentationLayer: setCellsLayer, setSpatialPointLayer: setMoleculesLayer, setSpatialNeighborhoodLayer: setNeighborhoodsLayer, setObsFilter: setCellFilter, setObsSetSelection: setCellSetSelection, setObsHighlight: setCellHighlight, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setAdditionalObsSets: setAdditionalCellSets, setMoleculeHighlight, setSpatialAxisFixed, setFeatureValueColormap: setGeneExpressionColormap, setFeatureValueColormapRange: setGeneExpressionColormapRange, setTooltipsVisible }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
+  const { spatialZoom: initialZoom, spatialTargetX: initialTargetX, spatialTargetY: initialTargetY, spatialTargetZ: initialTargetZ } = useInitialCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.SPATIAL], coordinationScopes);
   const observationsLabel = observationsLabelOverride || obsType;
   const [{ imageLayerCallbacks, segmentationLayerCallbacks }] = useAuxiliaryCoordination(COMPONENT_COORDINATION_TYPES.layerController, coordinationScopes);
   const use3d = imageLayers == null ? void 0 : imageLayers.some((l2) => l2.use3d);
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const [width2, height2, deckRef] = useDeckCanvasSize();
-  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset, addUrl2);
+  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
   const hasExpressionData = useHasLoader(loaders, dataset, DataType$2.OBS_FEATURE_MATRIX, { obsType, featureType, featureValueType });
   const hasSegmentationsData = useHasLoader(loaders, dataset, DataType$2.OBS_SEGMENTATIONS, { obsType });
   const hasLocationsData = useHasLoader(loaders, dataset, DataType$2.OBS_LOCATIONS, { obsType });
   const hasImageData = useHasLoader(loaders, dataset, DataType$2.IMAGE, {});
-  const [{ obsIndex: obsLocationsIndex, obsLocations }, obsLocationsStatus] = useObsLocationsData(loaders, dataset, addUrl2, false, { setSpatialPointLayer: setMoleculesLayer }, { spatialPointLayer: moleculesLayer }, { obsType: "molecule" });
-  const [{ obsLabels: obsLocationsLabels }, obsLabelsStatus] = useObsLabelsData(loaders, dataset, addUrl2, false, {}, {}, { obsType: "molecule" });
-  const [{ obsIndex: obsCentroidsIndex, obsLocations: obsCentroids }, obsCentroidsStatus] = useObsLocationsData(loaders, dataset, addUrl2, false, {}, {}, { obsType });
-  const [{ obsIndex: obsSegmentationsIndex, obsSegmentations, obsSegmentationsType }, obsSegmentationsStatus] = useObsSegmentationsData(loaders, dataset, addUrl2, false, { setSpatialSegmentationLayer: setCellsLayer }, { spatialSegmentationLayer: cellsLayer }, { obsType });
-  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const [{ obsIndex: obsLocationsIndex, obsLocations }, obsLocationsStatus, obsLocationsUrls] = useObsLocationsData(loaders, dataset, false, { setSpatialPointLayer: setMoleculesLayer }, { spatialPointLayer: moleculesLayer }, { obsType: "molecule" });
+  const [{ obsLabels: obsLocationsLabels }, obsLabelsStatus, obsLabelsUrls] = useObsLabelsData(loaders, dataset, false, {}, {}, { obsType: "molecule" });
+  const [{ obsIndex: obsCentroidsIndex, obsLocations: obsCentroids }, obsCentroidsStatus, obsCentroidsUrls] = useObsLocationsData(loaders, dataset, false, {}, {}, { obsType });
+  const [{ obsIndex: obsSegmentationsIndex, obsSegmentations, obsSegmentationsType }, obsSegmentationsStatus, obsSegmentationsUrls] = useObsSegmentationsData(loaders, dataset, false, { setSpatialSegmentationLayer: setCellsLayer }, { spatialSegmentationLayer: cellsLayer }, { obsType });
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
   const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
-  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl2, false, { obsType, featureType, featureValueType });
-  const [{ image: image2 }, imageStatus] = useImageData(loaders, dataset, addUrl2, false, { setSpatialImageLayer: setRasterLayers }, { spatialImageLayer: imageLayers }, {});
+  const [{ obsIndex: matrixObsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+  const [{ image: image2 }, imageStatus, imageUrls] = useImageData(loaders, dataset, false, { setSpatialImageLayer: setRasterLayers }, { spatialImageLayer: imageLayers }, {});
   const { loaders: imageLayerLoaders = [], meta: meta2 = [] } = image2 || {};
-  const [neighborhoods, neighborhoodsStatus] = useNeighborhoodsData(loaders, dataset, addUrl2, false, { setSpatialNeighborhoodLayer: setNeighborhoodsLayer }, { spatialNeighborhoodLayer: neighborhoodsLayer });
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl2, false, {}, {}, { featureType });
+  const [neighborhoods, neighborhoodsStatus, neighborhoodsUrls] = useNeighborhoodsData(loaders, dataset, false, { setSpatialNeighborhoodLayer: setNeighborhoodsLayer }, { spatialNeighborhoodLayer: neighborhoodsLayer });
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
   const isReady = useReady([
     obsLocationsStatus,
     obsLabelsStatus,
@@ -191307,6 +191316,17 @@ function SpatialSubscriber(props2) {
     neighborhoodsStatus,
     featureLabelsStatus
   ]);
+  const urls2 = useUrls([
+    obsLocationsUrls,
+    obsLabelsUrls,
+    obsCentroidsUrls,
+    obsSegmentationsUrls,
+    obsSetsUrls,
+    matrixIndicesUrls,
+    imageUrls,
+    neighborhoodsUrls,
+    featureLabelsUrls
+  ]);
   const obsLocationsFeatureIndex = useMemo(() => {
     if (obsLocationsLabels) {
       return Array.from(new Set(obsLocationsLabels));
@@ -191315,8 +191335,8 @@ function SpatialSubscriber(props2) {
   }, [obsLocationsLabels]);
   const moleculesCount = (obsLocationsFeatureIndex == null ? void 0 : obsLocationsFeatureIndex.length) || 0;
   const locationsCount = (obsLocationsIndex == null ? void 0 : obsLocationsIndex.length) || 0;
-  const [originalViewState, setOriginalViewState] = useState({ target: [targetX2, targetY2, targetZ], zoom: zoom2 });
-  const { initialTargetX, initialTargetY, initialTargetZ, initialZoom } = useMemo(
+  const [originalViewState, setOriginalViewState] = useState(null);
+  const { initialTargetX: defaultTargetX, initialTargetY: defaultTargetY, initialTargetZ: defaultTargetZ, initialZoom: defaultZoom } = useMemo(
     () => getInitialSpatialTargets({
       width: width2,
       height: height2,
@@ -191332,23 +191352,47 @@ function SpatialSubscriber(props2) {
         return (_a2 = metadata2 == null ? void 0 : metadata2.transform) == null ? void 0 : _a2.matrix;
       })
     }),
-    // Deliberate dependency omissions: width/height - technically then
-    // these initial values will be "wrong" after resizing, but it shouldn't be far enough
-    // off to be noticeable.
     // Deliberate dependency omissions: imageLayerLoaders and meta - using `image` as
     // an indirect dependency instead.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [image2, use3d, hasImageData, obsCentroids, obsSegmentations, obsSegmentationsType]
+    [
+      image2,
+      use3d,
+      hasImageData,
+      obsCentroids,
+      obsSegmentations,
+      obsSegmentationsType,
+      width2,
+      height2
+    ]
   );
   useEffect(() => {
-    if (typeof targetX2 !== "number" || typeof targetY2 !== "number") {
-      setTargetX(initialTargetX);
-      setTargetY(initialTargetY);
-      setTargetZ(initialTargetZ);
-      setZoom(initialZoom);
-      setOriginalViewState({ target: [initialTargetX, initialTargetY, initialTargetZ], zoom: initialZoom });
-    }
-  }, [initialTargetX, initialTargetY, initialTargetZ, initialZoom]);
+    if (typeof initialTargetX !== "number" || typeof initialTargetY !== "number") {
+      const notYetInitialized = typeof targetX2 !== "number" || typeof targetY2 !== "number";
+      const stillDefaultInitialized = targetX2 === defaultTargetX && targetY2 === defaultTargetY;
+      if (notYetInitialized || stillDefaultInitialized) {
+        setTargetX(defaultTargetX);
+        setTargetY(defaultTargetY);
+        setTargetZ(defaultTargetZ);
+        setZoom(defaultZoom);
+      }
+      setOriginalViewState({ target: [defaultTargetX, defaultTargetY, defaultTargetZ], zoom: defaultZoom });
+    } else if (!originalViewState) {
+      setOriginalViewState({
+        target: [initialTargetX, initialTargetY, initialTargetZ],
+        zoom: initialZoom
+      });
+    }
+  }, [
+    defaultTargetX,
+    defaultTargetY,
+    defaultTargetZ,
+    defaultZoom,
+    initialTargetX,
+    initialTargetY,
+    initialTargetZ,
+    initialZoom
+  ]);
   const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
   const setCellSelectionProp = useCallback((v) => {
     setObsSelection(v, additionalCellSets, cellSetColor, setCellSetSelection, setAdditionalCellSets, setCellSetColor, setCellColorEncoding);
@@ -191669,8 +191713,8 @@ function shouldUsePaddedImplementation(dataLength) {
   return dataLength <= DATA_TEXTURE_SIZE ** 2;
 }
 const Heatmap$1 = forwardRef((props2, deckRef) => {
-  const { uuid, theme, viewState: rawViewState, setViewState, width: viewWidth2, height: viewHeight2, expressionMatrix: expression2, cellColors, cellColorLabels = [""], colormap, colormapRange, clearPleaseWait, setComponentHover, setCellHighlight = createDefaultUpdateCellsHover("Heatmap"), setGeneHighlight = createDefaultUpdateGenesHover("Heatmap"), setTrackHighlight = createDefaultUpdateTracksHover("Heatmap"), updateViewInfo = createDefaultUpdateViewInfo("Heatmap"), setIsRendering = () => {
-  }, transpose: transpose2 = false, variablesTitle = "Genes", observationsTitle = "Cells", variablesDashes = true, observationsDashes = true, useDevicePixels = 1, hideObservationLabels = false, hideVariableLabels = false, onHeatmapClick, setColorEncoding, featureIndex } = props2;
+  const { uuid, theme, viewState: rawViewState, setViewState, width: viewWidth2, height: viewHeight2, uint8ObsFeatureMatrix, cellColors, cellColorLabels = [""], colormap, colormapRange, setComponentHover, setCellHighlight = createDefaultUpdateCellsHover("Heatmap"), setGeneHighlight = createDefaultUpdateGenesHover("Heatmap"), setTrackHighlight = createDefaultUpdateTracksHover("Heatmap"), updateViewInfo = createDefaultUpdateViewInfo("Heatmap"), setIsRendering = () => {
+  }, transpose: transpose2 = false, variablesTitle = "Genes", observationsTitle = "Cells", variablesDashes = true, observationsDashes = true, useDevicePixels = 1, hideObservationLabels = false, hideVariableLabels = false, onHeatmapClick, setColorEncoding, obsIndex, featureIndex, featureLabelsMap } = props2;
   const viewState = {
     ...rawViewState,
     target: transpose2 ? [rawViewState.target[1], rawViewState.target[0]] : rawViewState.target,
@@ -191679,11 +191723,6 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
   const axisLeftTitle = transpose2 ? variablesTitle : observationsTitle;
   const axisTopTitle = transpose2 ? observationsTitle : variablesTitle;
   const workerPool = useMemo(() => new HeatmapPool(), []);
-  useEffect(() => {
-    if (clearPleaseWait && expression2) {
-      clearPleaseWait("expression-matrix");
-    }
-  }, [clearPleaseWait, expression2]);
   const tilesRef = useRef();
   const dataRef = useRef();
   const [axisLeftLabels, setAxisLeftLabels] = useState([]);
@@ -191693,15 +191732,15 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
   const [tileIteration, incTileIteration] = useReducer((i2) => i2 + 1, 0);
   const [backlog, setBacklog] = useState([]);
   useEffect(() => {
-    if (expression2 && expression2.matrix && !shouldUsePaddedImplementation(expression2.matrix.length)) {
-      dataRef.current = copyUint8Array(expression2.matrix);
+    if (uint8ObsFeatureMatrix && !shouldUsePaddedImplementation(uint8ObsFeatureMatrix.length)) {
+      dataRef.current = copyUint8Array(uint8ObsFeatureMatrix);
     }
-  }, [dataRef, expression2]);
+  }, [dataRef, uint8ObsFeatureMatrix]);
   useEffect(() => {
-    if (!expression2) {
+    if (!obsIndex) {
       return;
     }
-    const newCellOrdering = !cellColors || cellColors.size === 0 ? expression2.rows : Array.from(cellColors.keys());
+    const newCellOrdering = !cellColors || cellColors.size === 0 ? obsIndex : Array.from(cellColors.keys());
     const oldCellOrdering = transpose2 ? axisTopLabels : axisLeftLabels;
     if (!isEqual$4(oldCellOrdering, newCellOrdering)) {
       if (transpose2) {
@@ -191710,33 +191749,33 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
         setAxisLeftLabels(newCellOrdering);
       }
     }
-  }, [expression2, cellColors, axisTopLabels, axisLeftLabels, transpose2]);
+  }, [obsIndex, cellColors, axisTopLabels, axisLeftLabels, transpose2]);
   useEffect(() => {
-    if (!expression2) {
+    if (!featureIndex) {
       return;
     }
     if (transpose2) {
-      setAxisLeftLabels(expression2.cols);
+      setAxisLeftLabels(featureIndex);
     } else {
-      setAxisTopLabels(expression2.cols);
+      setAxisTopLabels(featureIndex);
     }
-  }, [expression2, transpose2]);
+  }, [featureIndex, transpose2]);
   const [longestCellLabel, longestGeneLabel] = useMemo(() => {
-    if (!expression2) {
+    if (!obsIndex || !featureIndex) {
       return ["", ""];
     }
     return [
-      getLongestString(expression2.rows),
-      getLongestString([...expression2.cols, ...cellColorLabels])
+      getLongestString(obsIndex),
+      getLongestString([...featureIndex, ...cellColorLabels])
     ];
-  }, [expression2, cellColorLabels]);
+  }, [featureIndex, cellColorLabels, obsIndex]);
   const expressionRowLookUp = useMemo(() => {
     const lookUp = /* @__PURE__ */ new Map();
-    if (expression2 == null ? void 0 : expression2.rows) {
-      expression2.rows.forEach((cell2, j) => lookUp.set(cell2, j));
+    if (obsIndex) {
+      obsIndex.forEach((cell2, j) => lookUp.set(cell2, j));
     }
     return lookUp;
-  }, [expression2]);
+  }, [obsIndex]);
   const width2 = axisTopLabels.length;
   const height2 = axisLeftLabels.length;
   const [axisOffsetLeft, axisOffsetTop] = getAxisSizes(transpose2, longestGeneLabel, longestCellLabel, hideObservationLabels, hideVariableLabels);
@@ -191812,29 +191851,28 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
     });
   }, [matrixRight, matrixBottom, transpose2, setViewState]);
   useEffect(() => {
-    if (!expression2 || !expression2.matrix || expression2.matrix.length < DATA_TEXTURE_SIZE ** 2) {
+    if (!uint8ObsFeatureMatrix || uint8ObsFeatureMatrix.length < DATA_TEXTURE_SIZE ** 2) {
       return;
     }
     if (axisTopLabels && axisLeftLabels && xTiles && yTiles) {
       setBacklog((prev) => [...prev, v4$1()]);
     }
-  }, [dataRef, expression2, axisTopLabels, axisLeftLabels, xTiles, yTiles]);
+  }, [dataRef, uint8ObsFeatureMatrix, axisTopLabels, axisLeftLabels, xTiles, yTiles]);
   useEffect(() => {
     if (backlog.length < 1 || shouldUsePaddedImplementation(dataRef.current.length)) {
       return;
     }
     const curr = backlog[backlog.length - 1];
     if (dataRef.current && dataRef.current.buffer.byteLength && expressionRowLookUp.size > 0 && !shouldUsePaddedImplementation(dataRef.current.length)) {
-      const { cols, matrix: matrix2 } = expression2;
       const promises = range$a(yTiles).map((i2) => range$a(xTiles).map(async (j) => workerPool.process({
         curr,
         tileI: i2,
         tileJ: j,
         tileSize: TILE_SIZE,
         cellOrdering: transpose2 ? axisTopLabels : axisLeftLabels,
-        cols,
+        cols: featureIndex,
         transpose: transpose2,
-        data: matrix2.buffer.slice(),
+        data: uint8ObsFeatureMatrix.buffer.slice(),
         expressionRowLookUp
       })));
       const process2 = async () => {
@@ -191854,27 +191892,28 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
     axisLeftLabels,
     axisTopLabels,
     backlog,
-    expression2,
+    uint8ObsFeatureMatrix,
     transpose2,
     xTiles,
     yTiles,
     workerPool,
-    expressionRowLookUp
+    expressionRowLookUp,
+    featureIndex
   ]);
   useEffect(() => {
     setIsRendering(backlog.length > 0);
   }, [backlog, setIsRendering]);
   const paddedExpressions = useMemo(() => {
     const cellOrdering = transpose2 ? axisTopLabels : axisLeftLabels;
-    if ((expression2 == null ? void 0 : expression2.matrix) && cellOrdering.length && gl && shouldUsePaddedImplementation(expression2.matrix.length)) {
+    if (uint8ObsFeatureMatrix && cellOrdering.length && gl && shouldUsePaddedImplementation(uint8ObsFeatureMatrix.length)) {
       let newIndex = 0;
       for (let cellOrderingIndex = 0; cellOrderingIndex < cellOrdering.length; cellOrderingIndex += 1) {
         const cell2 = cellOrdering[cellOrderingIndex];
         newIndex = transpose2 ? cellOrderingIndex : newIndex;
         const cellIndex = expressionRowLookUp.get(cell2);
-        for (let geneIndex = 0; geneIndex < expression2.cols.length; geneIndex += 1) {
-          const index2 = cellIndex * expression2.cols.length + geneIndex;
-          paddedExpressionContainer[newIndex % (DATA_TEXTURE_SIZE * DATA_TEXTURE_SIZE)] = expression2.matrix[index2];
+        for (let geneIndex = 0; geneIndex < featureIndex.length; geneIndex += 1) {
+          const index2 = cellIndex * featureIndex.length + geneIndex;
+          paddedExpressionContainer[newIndex % (DATA_TEXTURE_SIZE * DATA_TEXTURE_SIZE)] = uint8ObsFeatureMatrix[index2];
           newIndex = transpose2 ? newIndex + cellOrdering.length : newIndex + 1;
         }
       }
@@ -191896,18 +191935,18 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
     transpose2,
     axisTopLabels,
     axisLeftLabels,
-    expression2,
+    uint8ObsFeatureMatrix,
     expressionRowLookUp,
+    featureIndex,
     gl
   ]);
   const heatmapLayers = useMemo(() => {
-    const usePaddedExpressions = (expression2 == null ? void 0 : expression2.matrix) && shouldUsePaddedImplementation(expression2 == null ? void 0 : expression2.matrix.length);
+    const usePaddedExpressions = uint8ObsFeatureMatrix && shouldUsePaddedImplementation(uint8ObsFeatureMatrix.length);
     if ((!tilesRef.current || backlog.length) && !usePaddedExpressions) {
       return [];
     }
     if (usePaddedExpressions) {
       let getLayer2 = function(i2, j) {
-        const { cols } = expression2;
         return new PaddedExpressionHeatmapBitmapLayer({
           id: `heatmapLayer-${i2}-${j}`,
           image: paddedExpressions,
@@ -191921,7 +191960,7 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
           tileJ: j,
           numXTiles: xTiles,
           numYTiles: yTiles,
-          origDataSize: transpose2 ? [cols.length, cellOrdering.length] : [cellOrdering.length, cols.length],
+          origDataSize: transpose2 ? [featureIndex.length, cellOrdering.length] : [cellOrdering.length, featureIndex.length],
           aggSizeX,
           aggSizeY,
           colormap,
@@ -191961,28 +192000,29 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
     const layers2 = tilesRef.current.map((tile, index2) => getLayer(Math.floor(index2 / xTiles), index2 % xTiles, tile));
     return layers2;
   }, [
-    expression2,
+    uint8ObsFeatureMatrix,
     backlog.length,
     transpose2,
     axisTopLabels,
     axisLeftLabels,
-    yTiles,
-    xTiles,
     paddedExpressions,
     matrixLeft,
     tileWidth,
     matrixTop,
     tileHeight,
+    yTiles,
+    xTiles,
     aggSizeX,
     aggSizeY,
     colormap,
     colormapRange,
-    tileIteration
+    tileIteration,
+    featureIndex
   ]);
   const axisLeftDashes = transpose2 ? variablesDashes : observationsDashes;
   const axisTopDashes = transpose2 ? observationsDashes : variablesDashes;
-  const axisTopLabelData = useMemo(() => axisTopLabels.map((d, i2) => [i2, axisTopDashes ? `- ${d}` : d]), [axisTopLabels, axisTopDashes]);
-  const axisLeftLabelData = useMemo(() => axisLeftLabels.map((d, i2) => [i2, axisLeftDashes ? `${d} -` : d]), [axisLeftLabels, axisLeftDashes]);
+  const axisTopLabelData = useMemo(() => (!transpose2 && featureLabelsMap ? axisTopLabels.map((d) => featureLabelsMap.get(d) || d) : axisTopLabels).map((d, i2) => [i2, axisTopDashes ? `- ${d}` : d]), [axisTopLabels, axisTopDashes, transpose2, featureLabelsMap]);
+  const axisLeftLabelData = useMemo(() => (transpose2 && featureLabelsMap ? axisLeftLabels.map((d) => featureLabelsMap.get(d) || d) : axisLeftLabels).map((d, i2) => [i2, axisLeftDashes ? `${d} -` : d]), [axisLeftLabels, axisLeftDashes, transpose2, featureLabelsMap]);
   const cellColorLabelsData = useMemo(() => cellColorLabels.map((d, i2) => [i2, d && (transpose2 ? `${d} -` : `- ${d}`)]), [cellColorLabels, transpose2]);
   const hideTopLabels = transpose2 ? hideObservationLabels : hideVariableLabels;
   const hideLeftLabels = transpose2 ? hideVariableLabels : hideObservationLabels;
@@ -192153,7 +192193,7 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
   const showText = width2 > 0 && height2 > 0;
   const layers = heatmapLayers.concat(showText ? textLayers : []).concat(...cellColorsLayersList);
   function onHover(info2, event2) {
-    if (!expression2) {
+    if (!uint8ObsFeatureMatrix) {
       return;
     }
     let highlightedCell = null;
@@ -192179,8 +192219,8 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
       setTrackHighlight(null);
       setColorEncoding("geneSelection");
     } else {
-      const obsI2 = expression2.rows.indexOf(transpose2 ? axisTopLabels[trackColI] : axisLeftLabels[trackColI]);
-      const cellIndex = expression2.rows[obsI2];
+      const obsI2 = obsIndex.indexOf(transpose2 ? axisTopLabels[trackColI] : axisLeftLabels[trackColI]);
+      const cellIndex = obsIndex[obsI2];
       setTrackHighlight([cellIndex, trackI, mouseX, mouseY]);
       highlightedCell = cellIndex;
       setColorEncoding("cellSelection");
@@ -192196,9 +192236,9 @@ const Heatmap$1 = forwardRef((props2, deckRef) => {
       numRows: height2,
       numCols: width2
     });
-    const obsI = expression2.rows.indexOf(transpose2 ? axisTopLabels[colI] : axisLeftLabels[rowI]);
-    const varI = expression2.cols.indexOf(transpose2 ? axisLeftLabels[rowI] : axisTopLabels[colI]);
-    const obsId = expression2.rows[obsI];
+    const obsI = obsIndex.indexOf(transpose2 ? axisTopLabels[colI] : axisLeftLabels[rowI]);
+    const varI = featureIndex.indexOf(transpose2 ? axisLeftLabels[rowI] : axisTopLabels[colI]);
+    const obsId = obsIndex[obsI];
     const varId = featureIndex[varI];
     if (setComponentHover) {
       setComponentHover();
@@ -192348,17 +192388,21 @@ function HeatmapSubscriber(props2) {
   const variablesTitle = capitalize$2(variablesPluralLabel);
   const [isRendering, setIsRendering] = useState(false);
   const [hoveredColorEncoding, setHoveredColorEncoding] = useState("geneSelection");
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const [width2, height2, deckRef] = useDeckCanvasSize();
-  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset, addUrl2);
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl2, false, {}, {}, { featureType });
-  const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(loaders, dataset, addUrl2, true, {}, {}, { obsType, featureType, featureValueType });
-  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const [obsLabelsTypes, obsLabelsData] = useMultiObsLabels(coordinationScopes, obsType, loaders, dataset);
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+  const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls] = useObsFeatureMatrixData(loaders, dataset, true, {}, {}, { obsType, featureType, featureValueType });
+  const [{ obsSets: cellSets, obsSetsMembership }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, false, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
   const isReady = useReady([
     featureLabelsStatus,
     matrixStatus,
     obsSetsStatus
   ]);
+  const urls2 = useUrls([
+    featureLabelsUrls,
+    matrixUrls,
+    obsSetsUrls
+  ]);
   const [uint8ObsFeatureMatrix, obsFeatureMatrixExtent] = useUint8ObsFeatureMatrix({ obsFeatureMatrix });
   const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
   const cellColors = useMemo(() => getCellColors({
@@ -192383,16 +192427,6 @@ function HeatmapSubscriber(props2) {
     }
     return null;
   }, [variablesLabel, featureLabelsMap]);
-  const expressionMatrix = useMemo(() => {
-    if (obsIndex && featureIndex && uint8ObsFeatureMatrix) {
-      return {
-        rows: obsIndex,
-        cols: featureLabelsMap ? featureIndex.map((key2) => featureLabelsMap.get(key2) || key2) : featureIndex,
-        matrix: uint8ObsFeatureMatrix.data
-      };
-    }
-    return null;
-  }, [obsIndex, featureIndex, uint8ObsFeatureMatrix, featureLabelsMap]);
   const cellsCount = obsIndex ? obsIndex.length : 0;
   const genesCount = featureIndex ? featureIndex.length : 0;
   const setTrackHighlight = useCallback(() => {
@@ -192422,7 +192456,7 @@ function HeatmapSubscriber(props2) {
     setZoomY(zoom2);
     setTargetX(target2[0]);
     setTargetY(target2[1]);
-  }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height2, width: width2, theme, uuid, expressionMatrix, cellColors, colormap: geneExpressionColormap, setIsRendering, setCellHighlight, setGeneHighlight, featureIndex, setTrackHighlight, setComponentHover: () => {
+  }, colormapRange: geneExpressionColormapRange, setColormapRange: setGeneExpressionColormapRange, height: height2, width: width2, theme, uuid, uint8ObsFeatureMatrix: uint8ObsFeatureMatrix == null ? void 0 : uint8ObsFeatureMatrix.data, cellColors, colormap: geneExpressionColormap, setIsRendering, setCellHighlight, setGeneHighlight, featureLabelsMap, obsIndex, featureIndex, setTrackHighlight, setComponentHover: () => {
     setComponentHover(uuid);
   }, updateViewInfo: setComponentViewInfo, observationsTitle, variablesTitle, variablesDashes: false, observationsDashes: false, cellColorLabels, useDevicePixels: true, onHeatmapClick, setColorEncoding: setHoveredColorEncoding }), tooltipsVisible && jsxRuntimeExports.jsx(HeatmapTooltipSubscriber, { parentUuid: uuid, width: width2, height: height2, transpose: transpose2, getObsInfo, getFeatureInfo, obsHighlight: cellHighlight, featureHighlight: geneHighlight }), jsxRuntimeExports.jsx(Legend, { visible: true, theme, featureType, featureValueType, obsColorEncoding: "geneExpression", considerSelections: false, featureSelection: geneSelection, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, extent: obsFeatureMatrixExtent })] });
 }
@@ -196625,10 +196659,10 @@ const useStyles$8 = makeStyles((theme) => ({
       backgroundClip: "unset"
     }
   },
-  radio: {
+  tableRadio: {
     borderRadius: "50%"
   },
-  checkbox: {
+  tableCheckbox: {
     borderRadius: "2px"
   }
 }));
@@ -196709,7 +196743,7 @@ function SelectableTable(props2) {
   const inputUuid = v4$1();
   const rowRenderer = ({ index: index2, style: style2 }) => (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    jsxRuntimeExports.jsxs("div", { className: clsx(classes.tableItem, classes.tableRow, { "row-checked": isSelected(data2[index2][idKey]) }), style: style2, role: "button", onClick: () => onSelectRow(data2[index2][idKey], !isSelected(data2[index2][idKey]) || !hasColorEncoding), children: [jsxRuntimeExports.jsx("div", { className: clsx(classes.inputContainer, classes.tableCell, { [classes.hiddenInputColumn]: !showTableInputs }), children: jsxRuntimeExports.jsx("label", { htmlFor: `${inputUuid}_${data2[index2][idKey]}`, children: jsxRuntimeExports.jsx("input", { id: `${inputUuid}_${data2[index2][idKey]}`, type: "checkbox", className: clsx(classes.radioOrCheckbox, isCheckingMultiple ? classes.checkbox : classes.radio), name: inputUuid, value: data2[index2][idKey], onChange: handleInputChange, checked: isSelected(data2[index2][idKey]) }) }) }), columns.map((column) => jsxRuntimeExports.jsx("div", { className: classes.tableCell, children: data2[index2][column] }, column))] }, data2[index2][idKey])
+    jsxRuntimeExports.jsxs("div", { className: clsx(classes.tableItem, classes.tableRow, { "row-checked": isSelected(data2[index2][idKey]) }), style: style2, role: "button", onClick: () => onSelectRow(data2[index2][idKey], !isSelected(data2[index2][idKey]) || !hasColorEncoding), children: [jsxRuntimeExports.jsx("div", { className: clsx(classes.inputContainer, classes.tableCell, { [classes.hiddenInputColumn]: !showTableInputs }), children: jsxRuntimeExports.jsx("label", { htmlFor: `${inputUuid}_${data2[index2][idKey]}`, children: jsxRuntimeExports.jsx("input", { id: `${inputUuid}_${data2[index2][idKey]}`, type: "checkbox", className: clsx(classes.radioOrCheckbox, isCheckingMultiple ? classes.tableCheckbox : classes.tableRadio), name: inputUuid, value: data2[index2][idKey], onChange: handleInputChange, checked: isSelected(data2[index2][idKey]) }) }) }), columns.map((column) => jsxRuntimeExports.jsx("div", { className: classes.tableCell, children: data2[index2][column] }, column))] }, data2[index2][idKey])
   );
   const headerRowRenderer = ({ style: style2 }) => jsxRuntimeExports.jsx("div", { className: classes.tableRow, style: style2, children: columnLabels.map((columnLabel) => jsxRuntimeExports.jsx("div", { className: classes.tableCell, style: { fontWeight: "bold" }, children: columnLabel }, columnLabel)) });
   return jsxRuntimeExports.jsx("div", { className: classes.selectableTable, children: jsxRuntimeExports.jsx(AutoSizer$1.AutoSizer, { children: ({ width: width2, height: height2 }) => jsxRuntimeExports.jsx(Table$1.Table, {
@@ -196725,6 +196759,11 @@ function SelectableTable(props2) {
     rowGetter: ({ index: index2 }) => data2[index2]
   }) }) });
 }
+const FEATURELIST_SORT_OPTIONS = [
+  "alphabetical",
+  "original"
+];
+const ALT_COLNAME = "Alternate ID";
 const useStyles$7 = makeStyles(() => ({
   searchBar: {
     marginBottom: "4px",
@@ -196734,10 +196773,11 @@ const useStyles$7 = makeStyles(() => ({
   }
 }));
 function FeatureList(props2) {
-  const { hasColorEncoding, geneList = [], featureLabelsMap, featureType, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showTable, sort: sort2 } = props2;
+  const { hasColorEncoding, geneList = [], featureLabelsMap, geneSelection = [], geneFilter = null, setGeneSelection, enableMultiSelect, showFeatureTable, featureListSort, featureListSortKey, hasFeatureLabels, primaryColumnName } = props2;
   const classes = useStyles$7();
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState(geneList);
+  const selectableTableSortKey = featureListSortKey === "featureIndex" ? "key" : "name";
   useEffect(() => {
     const results = geneList.filter((gene) => {
       var _a2;
@@ -196758,44 +196798,87 @@ function FeatureList(props2) {
       }
     }
   }
-  let data2 = searchResults.filter((gene) => geneFilter ? geneFilter.includes(gene) : true).map((gene) => ({
-    key: gene,
-    name: (featureLabelsMap == null ? void 0 : featureLabelsMap.get(gene)) || gene,
-    value: geneSelection ? geneSelection.includes(gene) : false
-  }));
-  if (sort2 === "alphabetical") {
-    data2 = data2.sort((a2, b2) => a2.name.localeCompare(b2.name));
-  }
+  const data2 = useMemo(() => {
+    const preSortedData = searchResults.filter((gene) => geneFilter ? geneFilter.includes(gene) : true).map((gene) => ({
+      key: gene,
+      name: (featureLabelsMap == null ? void 0 : featureLabelsMap.get(gene)) || gene,
+      value: geneSelection ? geneSelection.includes(gene) : false
+    }));
+    if (preSortedData && featureListSort === "alphabetical" && preSortedData.length > 0) {
+      return preSortedData.sort((a2, b2) => a2[selectableTableSortKey].localeCompare(b2[selectableTableSortKey]));
+    }
+    return preSortedData;
+  }, [
+    featureListSort,
+    selectableTableSortKey,
+    searchResults,
+    geneFilter,
+    featureLabelsMap,
+    geneSelection
+  ]);
   const handleChange = (event2) => {
     setSearchTerm(event2.target.value);
   };
-  const columns = ["name"];
-  const columnLabels = [`${capitalize$2(featureType)} ID`];
-  if (showTable) {
-    columns.push("key");
-    columnLabels.push("Alternate ID");
-  }
+  const [columns, columnLabels] = useMemo(() => {
+    if (showFeatureTable && hasFeatureLabels) {
+      return [
+        ["name", "key"],
+        [primaryColumnName, ALT_COLNAME]
+      ];
+    }
+    return [
+      ["name"],
+      [primaryColumnName]
+    ];
+  }, [showFeatureTable, primaryColumnName, hasFeatureLabels]);
   return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("input", { className: classes.searchBar, type: "text", placeholder: "Search", value: searchTerm, onChange: handleChange }), jsxRuntimeExports.jsx(SelectableTable, { columns, columnLabels, data: data2, hasColorEncoding, idKey: "key", valueKey: "value", onChange, allowMultiple: enableMultiSelect, allowUncheck: enableMultiSelect, showTableHead: columnLabels.length > 1 })] });
 }
+function FeatureListOptions(props2) {
+  const { children: children2, featureListSort, setFeatureListSort, featureListSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels, primaryColumnName } = props2;
+  function handleFeatureListSortChange(event2) {
+    setFeatureListSort(event2.target.value);
+  }
+  function handleFeatureListSortKeyChange(event2) {
+    setFeatureListSortKey(event2.target.value);
+  }
+  function handleShowTableChange(event2) {
+    setShowFeatureTable(event2.target.checked);
+  }
+  const classes = usePlotOptionsStyles();
+  return jsxRuntimeExports.jsxs(OptionsContainer, { children: [children2, jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "feature-list-sort-option-select", children: "Sort Ordering" }), jsxRuntimeExports.jsx(TableCell$1, { children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, value: featureListSort, onChange: handleFeatureListSortChange, inputProps: {
+    id: "feature-list-sort-option-select"
+  }, children: FEATURELIST_SORT_OPTIONS.map((option) => jsxRuntimeExports.jsx("option", { value: option, children: option }, option)) }) })] }), hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, htmlFor: "feature-list-sort-key-select", children: "Sort Key" }), jsxRuntimeExports.jsx(TableCell$1, { children: jsxRuntimeExports.jsx(OptionSelect, { className: classes.select, disabled: featureListSort === "original", value: featureListSortKey, onChange: handleFeatureListSortKeyChange, inputProps: {
+    id: "feature-list-sort-key-select"
+  }, children: hasFeatureLabels ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("option", { value: "featureLabels", children: primaryColumnName }), jsxRuntimeExports.jsx("option", { value: "featureIndex", children: ALT_COLNAME })] }) : jsxRuntimeExports.jsx("option", { value: "featureIndex", children: primaryColumnName }) }) })] }), jsxRuntimeExports.jsxs(TableRow$1, { children: [jsxRuntimeExports.jsx(TableCell$1, { className: classes.labelCell, children: "Show Alternate IDs" }), jsxRuntimeExports.jsx(TableCell$1, { className: classes.inputCell, children: jsxRuntimeExports.jsx(Checkbox$1, { className: classes.tableCheckbox, checked: showFeatureTable, onChange: handleShowTableChange, name: "feature-list-show-table", color: "default" }) })] })] }) : null] });
+}
 function FeatureListSubscriber(props2) {
-  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical" } = props2;
+  const { coordinationScopes, removeGridComponent, variablesLabelOverride, theme, title: titleOverride, enableMultiSelect = false, showTable = false, sort: sort2 = "alphabetical", sortKey: sortKey2 = null } = props2;
   const loaders = useLoaders();
   const [{ dataset, 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$2(variablesLabel)} List`;
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl2, false, {}, {}, { featureType });
-  const [{ featureIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl2, true, { featureType });
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+  const [{ featureIndex }, matrixIndicesStatus, obsFeatureMatrixUrls] = useObsFeatureMatrixIndices(loaders, dataset, true, { featureType });
   const isReady = useReady([
     featureLabelsStatus,
     matrixIndicesStatus
   ]);
+  const urls2 = useUrls([
+    featureLabelsUrls,
+    obsFeatureMatrixUrls
+  ]);
   const geneList = featureIndex || [];
   const numGenes = geneList.length;
+  const hasFeatureLabels = Boolean(featureLabelsMap);
   function setGeneSelectionAndColorEncoding(newSelection) {
     setGeneSelection(newSelection);
     setCellColorEncoding("geneSelection");
   }
+  const [showFeatureTable, setShowFeatureTable] = useState(showTable);
+  const [featureListSort, setFeatureListSort] = useState(sort2);
+  const [featureListSortKey, setFeatureListSortKey] = useState(null);
+  const initialSortKey = sortKey2 || (hasFeatureLabels ? "featureLabels" : "featureIndex");
+  const primaryColumnName = `${capitalize$2(featureType)} ID`;
   return jsxRuntimeExports.jsx(TitleInfo, {
     title: title2,
     info: `${commaNumber(numGenes)} ${plur(variablesLabel, numGenes)}`,
@@ -196807,7 +196890,8 @@ function FeatureListSubscriber(props2) {
     removeGridComponent,
     isReady,
     urls: urls2,
-    children: jsxRuntimeExports.jsx(FeatureList, { hasColorEncoding: cellColorEncoding === "geneSelection", showTable, geneList, sort: sort2, featureLabelsMap, featureType, geneSelection, geneFilter, setGeneSelection: setGeneSelectionAndColorEncoding, setGeneFilter, setGeneHighlight, enableMultiSelect })
+    options: jsxRuntimeExports.jsx(FeatureListOptions, { featureListSort, setFeatureListSort, featureListSortKey: featureListSortKey || initialSortKey, setFeatureListSortKey, showFeatureTable, setShowFeatureTable, hasFeatureLabels: Boolean(featureLabelsMap), primaryColumnName }),
+    children: jsxRuntimeExports.jsx(FeatureList, { hasColorEncoding: cellColorEncoding === "geneSelection", showFeatureTable, geneList, featureListSort, featureListSortKey: featureListSortKey || initialSortKey, featureLabelsMap, featureType, geneSelection, geneFilter, setGeneSelection: setGeneSelectionAndColorEncoding, setGeneFilter, setGeneHighlight, enableMultiSelect, hasFeatureLabels: Boolean(featureLabelsMap), primaryColumnName })
   });
 }
 const useSpanStyles = makeStyles(() => ({
@@ -196830,45 +196914,22 @@ const useSelectStyles = makeStyles(() => ({
     margin: "4px 0"
   }
 }));
-withStyles2((theme) => ({
-  paper: {
-    backgroundColor: theme.palette.background.paper
-  },
-  span: {
-    width: "70px",
-    textAlign: "center",
-    paddingLeft: "2px",
-    paddingRight: "2px"
-  },
-  colors: {
-    "&:hover": {
-      backgroundColor: "transparent"
-    },
-    paddingLeft: "2px",
-    paddingRight: "2px"
-  },
-  popper: {
-    zIndex: 4
-  }
-}));
 const sharedControllerStyles = {
   width: "100%",
   flexDirection: "column"
 };
 const useControllerSectionStyles = makeStyles(() => ({
-  root: {
+  layerControllerRoot: {
     ...sharedControllerStyles,
     padding: "0px 8px"
   }
 }));
-const StyledAccordionDetails = withStyles2(() => ({
-  root: {
+const useAccordionStyles = makeStyles((theme) => ({
+  accordionDetailsRoot: {
     ...sharedControllerStyles,
     padding: "8px 8px 24px 8px"
-  }
-}))(AccordionDetails$1);
-const StyledAccordionSummary = withStyles2((theme) => ({
-  root: {
+  },
+  accordionSummaryRoot: {
     padding: "0px 8px"
   },
   content: {
@@ -196884,30 +196945,30 @@ const StyledAccordionSummary = withStyles2((theme) => ({
       top: theme.spacing(-1.3)
     }
   }
-}))(AccordionSummary$1);
-const StyledInputLabel = withStyles2(() => ({
-  root: {
+}));
+const useInputLabelStyles = makeStyles(() => ({
+  inputLabelRoot: {
     fontSize: "14px"
   }
-}))(InputLabel$1);
-const OverflowEllipsisGrid = withStyles2(() => ({
+}));
+const useOverflowEllipsisGridStyles = makeStyles(() => ({
   item: {
     width: "100%",
     overflow: "hidden",
     whiteSpace: "nowrap",
     textOverflow: "ellipsis"
   }
-}))(Grid$3);
-const StyledSelectionSlider = withStyles2(() => ({
-  root: {
+}));
+const useSelectionSliderStyles = makeStyles(() => ({
+  selectionSliderRoot: {
     marginTop: "7px"
   },
   markActive: {
     backgroundColor: "rgba(128, 128, 128, 0.7)"
   }
-}))(Slider$1);
+}));
 const useStyles$6 = makeStyles((theme) => ({
-  container: {
+  paletteContainer: {
     width: "70px",
     height: "40px",
     display: "flex",
@@ -196928,7 +196989,7 @@ const useStyles$6 = makeStyles((theme) => ({
 }));
 const ColorPalette = ({ handleChange }) => {
   const classes = useStyles$6();
-  return jsxRuntimeExports.jsx("div", { className: classes.container, "aria-label": "color-swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(IconButton$2, { className: classes.button, onClick: () => handleChange(color2), children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes.icon }) }, color2)) });
+  return jsxRuntimeExports.jsx("div", { className: classes.paletteContainer, "aria-label": "color-swatch", children: VIEWER_PALETTE.map((color2) => jsxRuntimeExports.jsx(IconButton$2, { className: classes.button, onClick: () => handleChange(color2), children: jsxRuntimeExports.jsx(LensIcon, { fontSize: "small", style: { color: `rgb(${color2})` }, className: classes.icon }) }, color2)) });
 };
 const useStyles$5 = makeStyles(() => ({
   menuButton: {
@@ -197179,7 +197240,7 @@ function VectorLayerController(props2) {
     handleLayerChange({ ...layer, visible: v });
   }
   const classes = useControllerSectionStyles();
-  return jsxRuntimeExports.jsx(Grid$3, { item: true, style: { marginTop: "10px" }, children: jsxRuntimeExports.jsxs(Paper$1, { className: classes.root, children: [jsxRuntimeExports.jsx(Typography$1, { style: {
+  return jsxRuntimeExports.jsx(Grid$3, { item: true, style: { marginTop: "10px" }, children: jsxRuntimeExports.jsxs(Paper$1, { className: classes.layerControllerRoot, children: [jsxRuntimeExports.jsx(Typography$1, { style: {
     padding: "15px 8px 0px 8px",
     marginBottom: "-5px"
   }, children: label2 }), jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", justifyContent: "space-between", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 2, children: jsxRuntimeExports.jsx(Checkbox$1, { color: "primary", checked: isOn, onChange: (e3, v) => handleCheckBoxChange(v) }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 9, style: { paddingRight: "8px" }, children: jsxRuntimeExports.jsx(Slider$1, { value: slider, min: 0, max: 1, step: 1e-3, onChange: (e3, v) => handleSliderChange(v), style: { marginTop: "7px" }, orientation: "horizontal" }) })] })] }) });
@@ -197281,7 +197342,9 @@ function SliderDomainSelector({ value: value2, inputId, handleChange }) {
   return jsxRuntimeExports.jsx(Select$1, { native: true, onChange: (e3) => handleChange(e3.target.value), value: value2, inputProps: { name: "domain-selector", id: inputId }, style: { width: "100%" }, classes: { root: classes.selectRoot }, children: DOMAIN_OPTIONS.map((name2) => jsxRuntimeExports.jsx("option", { value: name2, children: name2 }, name2)) });
 }
 function GlobalSelectionSlider({ field: field2, value: value2, handleChange, possibleValues }) {
-  return jsxRuntimeExports.jsx(StyledSelectionSlider, {
+  const classes = useSelectionSliderStyles();
+  return jsxRuntimeExports.jsx(Slider$1, {
+    classes: { root: classes.selectionSliderRoot, markActive: classes.markActive },
     value: value2,
     // See https://github.com/hms-dbmi/viv/issues/176 for why
     // we have the two handlers.
@@ -197594,6 +197657,9 @@ function LayerController(props2) {
     );
   }
   const controllerSectionClasses = useControllerSectionStyles();
+  const accordionClasses = useAccordionStyles();
+  const inputLabelClasses = useInputLabelStyles();
+  const overflowEllipsisGridClasses = useOverflowEllipsisGridStyles();
   const { visible } = layer;
   const visibleSetting = typeof visible === "boolean" ? visible : true;
   const Visibility = visibleSetting ? VisibilityIcon : VisibilityOffIcon;
@@ -197632,10 +197698,15 @@ function LayerController(props2) {
     spatialWidth,
     modelMatrix: modelMatrix2
   }), isRgb(loader2, channels2) && disableChannelsIfRgbDetected ? null : channelControllers, isRgb(loader2, channels2) && disableChannelsIfRgbDetected ? null : jsxRuntimeExports.jsx(Button$1, { disabled: channels2.length === MAX_CHANNELS, onClick: handleChannelAdd, fullWidth: true, variant: "outlined", style: buttonStyles, startIcon: jsxRuntimeExports.jsx(AddIcon, {}), size: "small", children: "Add Channel" })] });
-  return jsxRuntimeExports.jsxs(Accordion$1, { className: controllerSectionClasses.root, onChange: (e3, expanded) => {
+  return jsxRuntimeExports.jsxs(Accordion$1, { className: controllerSectionClasses.layerControllerRoot, onChange: (e3, expanded) => {
     var _a3, _b, _c;
     return !disabled && setIsExpanded(expanded && ((_c = (_b = (_a3 = e3 == null ? void 0 : e3.target) == null ? void 0 : _a3.attributes) == null ? void 0 : _b.role) == null ? void 0 : _c.value) === "presentation");
-  }, TransitionProps: { enter: false }, expanded: !disabled && isExpanded, children: [jsxRuntimeExports.jsx(StyledAccordionSummary, { expandIcon: jsxRuntimeExports.jsx(ExpandMoreIcon, { role: "presentation" }), "aria-controls": `layer-${name2}-controls`, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", m: 1, justifyContent: "center", children: [jsxRuntimeExports.jsxs(OverflowEllipsisGrid, { item: true, children: [jsxRuntimeExports.jsx(Button$1, { onClick: (e3) => {
+  }, TransitionProps: { enter: false }, expanded: !disabled && isExpanded, children: [jsxRuntimeExports.jsx(AccordionSummary$1, { classes: {
+    root: accordionClasses.accordionSummaryRoot,
+    content: accordionClasses.content,
+    expanded: accordionClasses.expanded,
+    expandIcon: accordionClasses.expandIcon
+  }, expandIcon: jsxRuntimeExports.jsx(ExpandMoreIcon, { role: "presentation" }), "aria-controls": `layer-${name2}-controls`, children: jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "column", m: 1, justifyContent: "center", children: [jsxRuntimeExports.jsxs(Grid$3, { item: true, classes: { item: overflowEllipsisGridClasses.item }, children: [jsxRuntimeExports.jsx(Button$1, { onClick: (e3) => {
     if (!disabled) {
       e3.stopPropagation();
       const nextVisible = typeof visible === "boolean" ? !visible : false;
@@ -197646,7 +197717,7 @@ function LayerController(props2) {
     marginBottom: 2,
     padding: 0,
     minWidth: 0
-  }, children: jsxRuntimeExports.jsx(Visibility, {}) }), name2] }), !disabled && !isExpanded && !use3d && jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", alignItems: "center", justifyContent: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(StyledInputLabel, { htmlFor: `layer-${name2}-opacity-closed`, children: "Opacity:" }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Slider$1, { id: `layer-${name2}-opacity-closed`, value: opacity2, onChange: (e3, v) => setOpacity(v), valueLabelDisplay: "auto", getAriaLabel: () => "opacity slider", min: 0, max: 1, step: 0.01, orientation: "horizontal" }) })] })] }) }), jsxRuntimeExports.jsxs(StyledAccordionDetails, { children: [useVolumeTabs ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Tabs$1, { value: tab, onChange: handleTabChange, "aria-label": "simple tabs example", style: { height: "24px", minHeight: "24px" }, children: [jsxRuntimeExports.jsx(Tab$1, { label: "Channels", style: {
+  }, children: jsxRuntimeExports.jsx(Visibility, {}) }), name2] }), !disabled && !isExpanded && !use3d && jsxRuntimeExports.jsxs(Grid$3, { container: true, direction: "row", alignItems: "center", justifyContent: "center", children: [jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(InputLabel$1, { htmlFor: `layer-${name2}-opacity-closed`, classes: { root: inputLabelClasses.inputLabelRoot }, children: "Opacity:" }) }), jsxRuntimeExports.jsx(Grid$3, { item: true, xs: 6, children: jsxRuntimeExports.jsx(Slider$1, { id: `layer-${name2}-opacity-closed`, value: opacity2, onChange: (e3, v) => setOpacity(v), valueLabelDisplay: "auto", getAriaLabel: () => "opacity slider", min: 0, max: 1, step: 0.01, orientation: "horizontal" }) })] })] }) }), jsxRuntimeExports.jsxs(AccordionDetails$1, { classes: { root: accordionClasses.accordionDetailsRoot }, children: [useVolumeTabs ? jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs(Tabs$1, { value: tab, onChange: handleTabChange, "aria-label": "simple tabs example", style: { height: "24px", minHeight: "24px" }, children: [jsxRuntimeExports.jsx(Tab$1, { label: "Channels", style: {
     fontSize: ".75rem",
     bottom: 12,
     width: "50%",
@@ -197850,12 +197921,9 @@ function LayerControllerSubscriber(props2) {
   const layerControllerRef = useRef();
   const [componentWidth, componentHeight] = useClosestVitessceContainerSize(layerControllerRef);
   const { height: windowHeight, width: windowWidth } = useWindowDimensions();
-  const [obsLocationsData, obsLocationsStatus] = useObsLocationsData(loaders, dataset, () => {
-  }, false, { setSpatialPointLayer: setMoleculesLayer }, { spatialPointLayer: moleculesLayer }, {});
-  const [{ obsSegmentations, obsSegmentationsType }, obsSegmentationsStatus] = useObsSegmentationsData(loaders, dataset, () => {
-  }, false, { setSpatialSegmentationLayer: setCellsLayer }, { spatialSegmentationLayer: cellsLayer }, {});
-  const [{ image: image2 }, imageStatus] = useImageData(loaders, dataset, () => {
-  }, false, { setSpatialImageLayer: setRasterLayers }, { spatialImageLayer: rasterLayers }, {});
+  const [obsLocationsData, obsLocationsStatus] = useObsLocationsData(loaders, dataset, false, { setSpatialPointLayer: setMoleculesLayer }, { spatialPointLayer: moleculesLayer }, {});
+  const [{ obsSegmentations, obsSegmentationsType }, obsSegmentationsStatus] = useObsSegmentationsData(loaders, dataset, false, { setSpatialSegmentationLayer: setCellsLayer }, { spatialSegmentationLayer: cellsLayer }, {});
+  const [{ image: image2 }, imageStatus] = useImageData(loaders, dataset, false, { setSpatialImageLayer: setRasterLayers }, { spatialImageLayer: rasterLayers }, {});
   const { loaders: imageLayerLoaders, meta: imageLayerMeta } = image2 || {};
   const isReady = useReady([
     obsLocationsStatus,
@@ -198472,7 +198540,7 @@ const HIGLASS_BUNDLE_VERSION = "1.11.13";
 const HIGLASS_CSS_URL = `https://unpkg.com/${HIGLASS_PKG_NAME}@${HIGLASS_BUNDLE_VERSION}/dist/hglib.css`;
 register({ dataFetcher: ZarrMultivecDataFetcher, config: ZarrMultivecDataFetcher.config }, { pluginType: "dataFetcher" });
 const LazyHiGlassComponent = React__default.lazy(async () => {
-  const { HiGlassComponent } = await import("./hglib-1422f224.js").then((n3) => n3.h);
+  const { HiGlassComponent } = await import("./hglib-76c1b0ad.js").then((n3) => n3.h);
   return { default: HiGlassComponent };
 });
 const HG_SIZE = 800;
@@ -198629,9 +198697,9 @@ function GenomicProfilesSubscriber(props2) {
   const [width2, height2, containerRef] = useGridItemSize();
   const loaders = useLoaders();
   const [{ dataset, obsSetColor: cellSetColor, obsSetSelection: cellSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.GENOMIC_PROFILES], coordinationScopes);
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
-  const [genomicProfilesAttrs, genomicProfilesStatus] = useGenomicProfilesData(loaders, dataset, addUrl2, true, {}, {}, {});
+  const [genomicProfilesAttrs, genomicProfilesStatus, genomicProfilesUrls] = useGenomicProfilesData(loaders, dataset, true, {}, {}, {});
   const isReady = useReady([genomicProfilesStatus]);
+  const urls2 = useUrls([genomicProfilesUrls]);
   const hgViewConfig = useMemo(() => {
     if (!genomicProfilesAttrs || urls2.length !== 1) {
       return null;
@@ -255485,18 +255553,22 @@ function CellSetExpressionPlotSubscriber(props2) {
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, featureValueTransform, featureValueTransformCoefficient, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets }, { setFeatureValueTransform, setFeatureValueTransformCoefficient }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_FEATURE_VALUE_DISTRIBUTION], coordinationScopes);
   const [width2, height2, containerRef] = useGridItemSize();
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const transformOptions = VALUE_TRANSFORM_OPTIONS;
   const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
-  const [{ featureLabelsMap }, featureLabelsStatus] = useFeatureLabelsData(loaders, dataset, addUrl2, false, {}, {}, { featureType });
-  const [{ obsIndex }, matrixIndicesStatus] = useObsFeatureMatrixIndices(loaders, dataset, addUrl2, false, { obsType, featureType, featureValueType });
-  const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, true, {}, {}, { obsType });
+  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(loaders, dataset, false, {}, {}, { featureType });
+  const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(loaders, dataset, false, { obsType, featureType, featureValueType });
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, true, {}, {}, { obsType });
   const isReady = useReady([
     featureSelectionStatus,
     matrixIndicesStatus,
     obsSetsStatus,
     featureLabelsStatus
   ]);
+  const urls2 = useUrls([
+    featureLabelsUrls,
+    matrixIndicesUrls,
+    obsSetsUrls
+  ]);
   const [expressionArr, setArr, expressionMax] = useExpressionByCellSet(expressionData, obsIndex, cellSets, additionalCellSets, geneSelection, cellSetSelection, cellSetColor, featureValueTransform, featureValueTransformCoefficient, theme);
   const firstGeneSelected = geneSelection && geneSelection.length >= 1 ? (featureLabelsMap == null ? void 0 : featureLabelsMap.get(geneSelection[0])) || geneSelection[0] : null;
   const selectedTransformName = (_a2 = transformOptions.find((o2) => o2.value === featureValueTransform)) == null ? void 0 : _a2.name;
@@ -255626,13 +255698,11 @@ function CellSetSizesPlotSubscriber(props2) {
   const [{ dataset, obsType, obsSetSelection: cellSetSelection, obsSetColor: cellSetColor, additionalObsSets: additionalCellSets, obsSetExpansion: cellSetExpansion }, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.OBS_SET_SIZES], coordinationScopes);
   const title2 = titleOverride || `${capitalize$2(obsType)} Set Sizes`;
   const [width2, height2, containerRef] = useGridItemSize();
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
   const [currentHierarchy, setCurrentHierarchy] = useState([]);
   const [prevCellSetSelection, setPrevCellSetSelection] = useState([]);
-  const [{ obsSets: cellSets }, obsSetsStatus] = useObsSetsData(loaders, dataset, addUrl2, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
-  const isReady = useReady([
-    obsSetsStatus
-  ]);
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(loaders, dataset, true, { setObsSetSelection: setCellSetSelection, setObsSetColor: setCellSetColor }, { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor }, { obsType });
+  const isReady = useReady([obsSetsStatus]);
+  const urls2 = useUrls([obsSetsUrls]);
   const mergedCellSets = useMemo(() => mergeObsSets(cellSets, additionalCellSets), [cellSets, additionalCellSets]);
   const data2 = useMemo(() => {
     if (cellSetSelection && cellSetColor && mergedCellSets && cellSets) {
@@ -255732,13 +255802,15 @@ function ExpressionHistogramSubscriber(props2) {
   const loaders = useLoaders();
   const [{ dataset, obsType, featureType, featureValueType, featureSelection: geneSelection, additionalObsSets: additionalCellSets, obsSetColor: cellSetColor }, { setAdditionalObsSets: setAdditionalCellSets, setObsSetColor: setCellSetColor, setObsColorEncoding: setCellColorEncoding, setObsSetSelection: setCellSetSelection }] = useCoordination(COMPONENT_COORDINATION_TYPES[ViewType$1.FEATURE_VALUE_HISTOGRAM], coordinationScopes);
   const [width2, height2, containerRef] = useGridItemSize();
-  const [urls2, addUrl2] = useUrls(loaders, dataset);
-  const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus] = useObsFeatureMatrixData(loaders, dataset, addUrl2, true, {}, {}, { obsType, featureType, featureValueType });
+  const [{ obsIndex, featureIndex, obsFeatureMatrix }, matrixStatus, matrixUrls] = useObsFeatureMatrixData(loaders, dataset, true, {}, {}, { obsType, featureType, featureValueType });
   const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(loaders, dataset, false, geneSelection, { obsType, featureType, featureValueType });
   const isReady = useReady([
     matrixStatus,
     featureSelectionStatus
   ]);
+  const urls2 = useUrls([
+    matrixUrls
+  ]);
   const firstGeneSelected = geneSelection && geneSelection.length >= 1 ? geneSelection[0] : null;
   const data2 = useMemo(() => {
     if (firstGeneSelected && obsFeatureMatrix && expressionData) {
@@ -256409,6 +256481,33 @@ async function initLoader(imageData) {
       const channels2 = Array.isArray(Channels) ? Channels.map((channel, i2) => channel.Name || `Channel ${i2}`) : [Channels.Name || `Channel ${0}`];
       return { ...loader2, channels: channels2 };
     }
+    case "ome-zarr": {
+      const { coordinateTransformations: coordinateTransformationsFromOptions } = metadata2 || {};
+      const loader2 = await loadOmeZarr(url, { fetchOptions: requestInit2, type: "multiscales" });
+      const { metadata: loaderMetadata } = loader2;
+      const { omero, multiscales } = loaderMetadata;
+      if (!Array.isArray(multiscales) || multiscales.length === 0) {
+        console.error("Multiscales array must exist and have at least one element");
+      }
+      const { coordinateTransformations } = multiscales[0];
+      const axes = getNgffAxes(multiscales[0].axes);
+      const transformMatrixFromOptions = coordinateTransformationsToMatrix(coordinateTransformationsFromOptions, axes);
+      const transformMatrixFromFile = coordinateTransformationsToMatrix(coordinateTransformations, axes);
+      const transformMatrix = transformMatrixFromFile.multiplyLeft(transformMatrixFromOptions);
+      const { channels: channels2, name: omeroName } = omero;
+      return {
+        name: omeroName || "Image",
+        channels: channels2.map((c2, i2) => c2.label || `Channel ${i2}`),
+        ...transformMatrix ? {
+          metadata: {
+            transform: {
+              matrix: transformMatrix
+            }
+          }
+        } : {},
+        ...loader2
+      };
+    }
     default: {
       throw Error(`Image type (${type2}) is not supported`);
     }
@@ -256430,7 +256529,7 @@ class RasterLoader extends JsonLoader {
     }
     const { data: raster } = payload;
     const { images, renderLayers, usePhysicalSizeScaling = false } = raster;
-    const urls2 = images.filter((image2) => !image2.url.includes("zarr")).map((image2) => [image2.url, image2.name]);
+    const urls2 = images.filter((image2) => !image2.url.includes("zarr")).map((image2) => ({ url: image2.url, name: image2.name }));
     const imagesWithLoaderCreators = images.map((image2) => ({
       ...image2,
       loaderCreator: async () => initLoader(image2)
@@ -257492,9 +257591,6 @@ class OmeTiffLoader extends AbstractTwoStepLoader {
   async load() {
     const { url, requestInit: requestInit2 } = this;
     const { coordinateTransformations: coordinateTransformationsFromOptions } = this.options || {};
-    const urls2 = [
-      [url, "image"]
-    ];
     const offsets2 = await this.loadOffsets();
     const loader2 = await loadOmeTiff(url, { offsets: offsets2, headers: requestInit2 == null ? void 0 : requestInit2.headers });
     const { Name: imageName, Pixels: { Channels, DimensionOrder, PhysicalSizeX, PhysicalSizeXUnit, PhysicalSizeY, PhysicalSizeYUnit } } = loader2.metadata;
@@ -257513,6 +257609,9 @@ class OmeTiffLoader extends AbstractTwoStepLoader {
         }
       } : {}
     };
+    const urls2 = [
+      { url, name: image2.name }
+    ];
     const imagesWithLoaderCreators = [
       {
         ...image2,
@@ -257542,7 +257641,6 @@ class OmeTiffAsObsSegmentationsLoader extends OmeTiffLoader {
     const offsets2 = await this.loadOffsets();
     const loader2 = await loadOmeTiff(url, { offsets: offsets2, headers: requestInit2 == null ? void 0 : requestInit2.headers });
     const { Name: imageName, Pixels: { Channels, DimensionOrder, PhysicalSizeX, PhysicalSizeXUnit, PhysicalSizeY, PhysicalSizeYUnit } } = loader2.metadata;
-    const urls2 = [url, "OME-TIFF"];
     const transformMatrixFromOptions = coordinateTransformationsToMatrix(coordinateTransformationsFromOptions, getNgffAxesForTiff(DimensionOrder));
     const usePhysicalSizeScaling = PhysicalSizeX && PhysicalSizeXUnit && PhysicalSizeY && PhysicalSizeYUnit;
     const image2 = {
@@ -257559,6 +257657,7 @@ class OmeTiffAsObsSegmentationsLoader extends OmeTiffLoader {
         } : {}
       }
     };
+    const urls2 = [{ url, name: image2.name }];
     const imagesWithLoaderCreators = [
       {
         ...image2,
@@ -258208,10 +258307,11 @@ function Vitessce(props2) {
     pluginCoordinationTypes: pluginCoordinationTypesProp,
     pluginJointFileTypes: pluginJointFileTypesProp
   } = props2;
-  const configUid = config3 == null ? void 0 : config3.uid;
+  const configKey = (config3 == null ? void 0 : config3.uid) || config3;
   const configVersion = config3 == null ? void 0 : config3.version;
   const [configOrWarning, success] = useMemo(() => {
     try {
+      logConfig(config3, "pre-upgrade view config");
       const validConfig = upgradeAndParse(config3, onConfigUpgrade);
       return [validConfig, true];
     } catch (e3) {
@@ -258224,7 +258324,7 @@ function Vitessce(props2) {
         false
       ];
     }
-  }, [configUid, configVersion]);
+  }, [configKey, configVersion]);
   const mergedPluginViewTypes = useMemo(() => [
     ...baseViewTypes,
     ...pluginViewTypesProp || []