@vitessce/vit-s 3.8.9 → 3.8.13

package/dist/index.js

@@ -8616,11 +8616,6 @@ const { tss } = createTss({
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
 const useStyles$5 = tss.create({});
-function chainPropTypes(propType1, propType2) {
-  return function validate(...args) {
-    return propType1(...args) || propType2(...args);
-  };
-}
 function GlobalStyles(props) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(GlobalStyles$1, {
     ...props,
@@ -8672,6 +8667,365 @@ const memoTheme = unstable_memoTheme;
 function useDefaultProps(params) {
   return useDefaultProps$1(params);
 }
+function getSvgIconUtilityClass(slot) {
+  return generateUtilityClass("MuiSvgIcon", slot);
+}
+generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
+const useUtilityClasses$j = (ownerState) => {
+  const {
+    color: color2,
+    fontSize,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", color2 !== "inherit" && `color${capitalize$1(color2)}`, `fontSize${capitalize$1(fontSize)}`]
+  };
+  return composeClasses(slots, getSvgIconUtilityClass, classes);
+};
+const SvgIconRoot = styled("svg", {
+  name: "MuiSvgIcon",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$1(ownerState.color)}`], styles2[`fontSize${capitalize$1(ownerState.fontSize)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n;
+  return {
+    userSelect: "none",
+    width: "1em",
+    height: "1em",
+    display: "inline-block",
+    flexShrink: 0,
+    transition: (_d2 = (_a3 = theme.transitions) == null ? void 0 : _a3.create) == null ? void 0 : _d2.call(_a3, "fill", {
+      duration: (_c2 = (_b2 = (theme.vars ?? theme).transitions) == null ? void 0 : _b2.duration) == null ? void 0 : _c2.shorter
+    }),
+    variants: [
+      {
+        props: (props) => !props.hasSvgAsChild,
+        style: {
+          // the <svg> will define the property that has `currentColor`
+          // for example heroicons uses fill="none" and stroke="currentColor"
+          fill: "currentColor"
+        }
+      },
+      {
+        props: {
+          fontSize: "inherit"
+        },
+        style: {
+          fontSize: "inherit"
+        }
+      },
+      {
+        props: {
+          fontSize: "small"
+        },
+        style: {
+          fontSize: ((_f2 = (_e2 = theme.typography) == null ? void 0 : _e2.pxToRem) == null ? void 0 : _f2.call(_e2, 20)) || "1.25rem"
+        }
+      },
+      {
+        props: {
+          fontSize: "medium"
+        },
+        style: {
+          fontSize: ((_h2 = (_g2 = theme.typography) == null ? void 0 : _g2.pxToRem) == null ? void 0 : _h2.call(_g2, 24)) || "1.5rem"
+        }
+      },
+      {
+        props: {
+          fontSize: "large"
+        },
+        style: {
+          fontSize: ((_j2 = (_i2 = theme.typography) == null ? void 0 : _i2.pxToRem) == null ? void 0 : _j2.call(_i2, 35)) || "2.1875rem"
+        }
+      },
+      // TODO v5 deprecate color prop, v6 remove for sx
+      ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color2]) => {
+        var _a4, _b3;
+        return {
+          props: {
+            color: color2
+          },
+          style: {
+            color: (_b3 = (_a4 = (theme.vars ?? theme).palette) == null ? void 0 : _a4[color2]) == null ? void 0 : _b3.main
+          }
+        };
+      }),
+      {
+        props: {
+          color: "action"
+        },
+        style: {
+          color: (_l = (_k2 = (theme.vars ?? theme).palette) == null ? void 0 : _k2.action) == null ? void 0 : _l.active
+        }
+      },
+      {
+        props: {
+          color: "disabled"
+        },
+        style: {
+          color: (_n = (_m = (theme.vars ?? theme).palette) == null ? void 0 : _m.action) == null ? void 0 : _n.disabled
+        }
+      },
+      {
+        props: {
+          color: "inherit"
+        },
+        style: {
+          color: void 0
+        }
+      }
+    ]
+  };
+}));
+const SvgIcon = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiSvgIcon"
+  });
+  const {
+    children,
+    className,
+    color: color2 = "inherit",
+    component = "svg",
+    fontSize = "medium",
+    htmlColor,
+    inheritViewBox = false,
+    titleAccess,
+    viewBox = "0 0 24 24",
+    ...other
+  } = props;
+  const hasSvgAsChild = /* @__PURE__ */ React$1.isValidElement(children) && children.type === "svg";
+  const ownerState = {
+    ...props,
+    color: color2,
+    component,
+    fontSize,
+    instanceFontSize: inProps.fontSize,
+    inheritViewBox,
+    viewBox,
+    hasSvgAsChild
+  };
+  const more = {};
+  if (!inheritViewBox) {
+    more.viewBox = viewBox;
+  }
+  const classes = useUtilityClasses$j(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, {
+    as: component,
+    className: clsx$1(classes.root, className),
+    focusable: "false",
+    color: htmlColor,
+    "aria-hidden": titleAccess ? void 0 : true,
+    role: titleAccess ? "img" : void 0,
+    ref,
+    ...more,
+    ...other,
+    ...hasSvgAsChild && children.props,
+    ownerState,
+    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /* @__PURE__ */ jsxRuntimeExports.jsx("title", {
+      children: titleAccess
+    }) : null]
+  });
+});
+SvgIcon.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Node passed into the SVG element.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
+   * @default 'inherit'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
+   * @default 'medium'
+   */
+  fontSize: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "large", "medium", "small"]), PropTypes.string]),
+  /**
+   * Applies a color attribute to the SVG element.
+   */
+  htmlColor: PropTypes.string,
+  /**
+   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
+   * prop will be ignored.
+   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
+   * `component`'s viewBox to the root node.
+   * @default false
+   */
+  inheritViewBox: PropTypes.bool,
+  /**
+   * The shape-rendering attribute. The behavior of the different options is described on the
+   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
+   * If you are having issues with blurry icons you should investigate this prop.
+   */
+  shapeRendering: PropTypes.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Provides a human-readable title for the element that contains it.
+   * https://www.w3.org/TR/SVG-access/#Equivalent
+   */
+  titleAccess: PropTypes.string,
+  /**
+   * Allows you to redefine what the coordinates without units mean inside an SVG element.
+   * For example, if the SVG element is 500 (width) by 200 (height),
+   * and you pass viewBox="0 0 50 20",
+   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
+   * to bottom right (50,20) and each unit will be worth 10px.
+   * @default '0 0 24 24'
+   */
+  viewBox: PropTypes.string
+};
+SvgIcon.muiName = "SvgIcon";
+function createSvgIcon(path, displayName) {
+  function Component2(props, ref) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgIcon, {
+      "data-testid": `${displayName}Icon`,
+      ref,
+      ...props,
+      children: path
+    });
+  }
+  {
+    Component2.displayName = `${displayName}Icon`;
+  }
+  Component2.muiName = SvgIcon.muiName;
+  return /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(Component2));
+}
+function debounce$3(func, wait = 166) {
+  let timeout2;
+  function debounced(...args) {
+    const later = () => {
+      func.apply(this, args);
+    };
+    clearTimeout(timeout2);
+    timeout2 = setTimeout(later, wait);
+  }
+  debounced.clear = () => {
+    clearTimeout(timeout2);
+  };
+  return debounced;
+}
+function ownerDocument(node2) {
+  return node2 && node2.ownerDocument || document;
+}
+function ownerWindow(node2) {
+  const doc = ownerDocument(node2);
+  return doc.defaultView || window;
+}
+function setRef$1(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+}
+let globalId = 0;
+function useGlobalId(idOverride) {
+  const [defaultId, setDefaultId] = React$1.useState(idOverride);
+  const id = idOverride || defaultId;
+  React$1.useEffect(() => {
+    if (defaultId == null) {
+      globalId += 1;
+      setDefaultId(`mui-${globalId}`);
+    }
+  }, [defaultId]);
+  return id;
+}
+const safeReact = {
+  ...React$1
+};
+const maybeReactUseId = safeReact.useId;
+function useId(idOverride) {
+  if (maybeReactUseId !== void 0) {
+    const reactId = maybeReactUseId();
+    return idOverride ?? reactId;
+  }
+  return useGlobalId(idOverride);
+}
+function useEventCallback(fn2) {
+  const ref = React$1.useRef(fn2);
+  useEnhancedEffect$1(() => {
+    ref.current = fn2;
+  });
+  return React$1.useRef((...args) => (
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)
+  )).current;
+}
+function useForkRef$1(...refs) {
+  const cleanupRef = React$1.useRef(void 0);
+  const refEffect = React$1.useCallback((instance) => {
+    const cleanups = refs.map((ref) => {
+      if (ref == null) {
+        return null;
+      }
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return typeof refCleanup === "function" ? refCleanup : () => {
+          refCallback(null);
+        };
+      }
+      ref.current = instance;
+      return () => {
+        ref.current = null;
+      };
+    });
+    return () => {
+      cleanups.forEach((refCleanup) => refCleanup == null ? void 0 : refCleanup());
+    };
+  }, refs);
+  return React$1.useMemo(() => {
+    if (refs.every((ref) => ref == null)) {
+      return null;
+    }
+    return (value) => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = void 0;
+      }
+      if (value != null) {
+        cleanupRef.current = refEffect(value);
+      }
+    };
+  }, refs);
+}
+function chainPropTypes(propType1, propType2) {
+  return function validate(...args) {
+    return propType1(...args) || propType2(...args);
+  };
+}
 function _extends$1() {
   return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
@@ -9456,360 +9810,6 @@ function getTransitionProps(props, options) {
     delay: style2.transitionDelay
   };
 }
-function getSvgIconUtilityClass(slot) {
-  return generateUtilityClass("MuiSvgIcon", slot);
-}
-generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$j = (ownerState) => {
-  const {
-    color: color2,
-    fontSize,
-    classes
-  } = ownerState;
-  const slots = {
-    root: ["root", color2 !== "inherit" && `color${capitalize$1(color2)}`, `fontSize${capitalize$1(fontSize)}`]
-  };
-  return composeClasses(slots, getSvgIconUtilityClass, classes);
-};
-const SvgIconRoot = styled("svg", {
-  name: "MuiSvgIcon",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, ownerState.color !== "inherit" && styles2[`color${capitalize$1(ownerState.color)}`], styles2[`fontSize${capitalize$1(ownerState.fontSize)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => {
-  var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l, _m, _n;
-  return {
-    userSelect: "none",
-    width: "1em",
-    height: "1em",
-    display: "inline-block",
-    flexShrink: 0,
-    transition: (_d2 = (_a3 = theme.transitions) == null ? void 0 : _a3.create) == null ? void 0 : _d2.call(_a3, "fill", {
-      duration: (_c2 = (_b2 = (theme.vars ?? theme).transitions) == null ? void 0 : _b2.duration) == null ? void 0 : _c2.shorter
-    }),
-    variants: [
-      {
-        props: (props) => !props.hasSvgAsChild,
-        style: {
-          // the <svg> will define the property that has `currentColor`
-          // for example heroicons uses fill="none" and stroke="currentColor"
-          fill: "currentColor"
-        }
-      },
-      {
-        props: {
-          fontSize: "inherit"
-        },
-        style: {
-          fontSize: "inherit"
-        }
-      },
-      {
-        props: {
-          fontSize: "small"
-        },
-        style: {
-          fontSize: ((_f2 = (_e2 = theme.typography) == null ? void 0 : _e2.pxToRem) == null ? void 0 : _f2.call(_e2, 20)) || "1.25rem"
-        }
-      },
-      {
-        props: {
-          fontSize: "medium"
-        },
-        style: {
-          fontSize: ((_h2 = (_g2 = theme.typography) == null ? void 0 : _g2.pxToRem) == null ? void 0 : _h2.call(_g2, 24)) || "1.5rem"
-        }
-      },
-      {
-        props: {
-          fontSize: "large"
-        },
-        style: {
-          fontSize: ((_j2 = (_i2 = theme.typography) == null ? void 0 : _i2.pxToRem) == null ? void 0 : _j2.call(_i2, 35)) || "2.1875rem"
-        }
-      },
-      // TODO v5 deprecate color prop, v6 remove for sx
-      ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color2]) => {
-        var _a4, _b3;
-        return {
-          props: {
-            color: color2
-          },
-          style: {
-            color: (_b3 = (_a4 = (theme.vars ?? theme).palette) == null ? void 0 : _a4[color2]) == null ? void 0 : _b3.main
-          }
-        };
-      }),
-      {
-        props: {
-          color: "action"
-        },
-        style: {
-          color: (_l = (_k2 = (theme.vars ?? theme).palette) == null ? void 0 : _k2.action) == null ? void 0 : _l.active
-        }
-      },
-      {
-        props: {
-          color: "disabled"
-        },
-        style: {
-          color: (_n = (_m = (theme.vars ?? theme).palette) == null ? void 0 : _m.action) == null ? void 0 : _n.disabled
-        }
-      },
-      {
-        props: {
-          color: "inherit"
-        },
-        style: {
-          color: void 0
-        }
-      }
-    ]
-  };
-}));
-const SvgIcon = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiSvgIcon"
-  });
-  const {
-    children,
-    className,
-    color: color2 = "inherit",
-    component = "svg",
-    fontSize = "medium",
-    htmlColor,
-    inheritViewBox = false,
-    titleAccess,
-    viewBox = "0 0 24 24",
-    ...other
-  } = props;
-  const hasSvgAsChild = /* @__PURE__ */ React$1.isValidElement(children) && children.type === "svg";
-  const ownerState = {
-    ...props,
-    color: color2,
-    component,
-    fontSize,
-    instanceFontSize: inProps.fontSize,
-    inheritViewBox,
-    viewBox,
-    hasSvgAsChild
-  };
-  const more = {};
-  if (!inheritViewBox) {
-    more.viewBox = viewBox;
-  }
-  const classes = useUtilityClasses$j(ownerState);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, {
-    as: component,
-    className: clsx$1(classes.root, className),
-    focusable: "false",
-    color: htmlColor,
-    "aria-hidden": titleAccess ? void 0 : true,
-    role: titleAccess ? "img" : void 0,
-    ref,
-    ...more,
-    ...other,
-    ...hasSvgAsChild && children.props,
-    ownerState,
-    children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /* @__PURE__ */ jsxRuntimeExports.jsx("title", {
-      children: titleAccess
-    }) : null]
-  });
-});
-SvgIcon.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Node passed into the SVG element.
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * You can use the `htmlColor` prop to apply a color attribute to the SVG element.
-   * @default 'inherit'
-   */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "action", "disabled", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The fontSize applied to the icon. Defaults to 24px, but can be configure to inherit font size.
-   * @default 'medium'
-   */
-  fontSize: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "large", "medium", "small"]), PropTypes.string]),
-  /**
-   * Applies a color attribute to the SVG element.
-   */
-  htmlColor: PropTypes.string,
-  /**
-   * If `true`, the root node will inherit the custom `component`'s viewBox and the `viewBox`
-   * prop will be ignored.
-   * Useful when you want to reference a custom `component` and have `SvgIcon` pass that
-   * `component`'s viewBox to the root node.
-   * @default false
-   */
-  inheritViewBox: PropTypes.bool,
-  /**
-   * The shape-rendering attribute. The behavior of the different options is described on the
-   * [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/shape-rendering).
-   * If you are having issues with blurry icons you should investigate this prop.
-   */
-  shapeRendering: PropTypes.string,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Provides a human-readable title for the element that contains it.
-   * https://www.w3.org/TR/SVG-access/#Equivalent
-   */
-  titleAccess: PropTypes.string,
-  /**
-   * Allows you to redefine what the coordinates without units mean inside an SVG element.
-   * For example, if the SVG element is 500 (width) by 200 (height),
-   * and you pass viewBox="0 0 50 20",
-   * this means that the coordinates inside the SVG will go from the top left corner (0,0)
-   * to bottom right (50,20) and each unit will be worth 10px.
-   * @default '0 0 24 24'
-   */
-  viewBox: PropTypes.string
-};
-SvgIcon.muiName = "SvgIcon";
-function createSvgIcon(path, displayName) {
-  function Component2(props, ref) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgIcon, {
-      "data-testid": `${displayName}Icon`,
-      ref,
-      ...props,
-      children: path
-    });
-  }
-  {
-    Component2.displayName = `${displayName}Icon`;
-  }
-  Component2.muiName = SvgIcon.muiName;
-  return /* @__PURE__ */ React$1.memo(/* @__PURE__ */ React$1.forwardRef(Component2));
-}
-function debounce$3(func, wait = 166) {
-  let timeout2;
-  function debounced(...args) {
-    const later = () => {
-      func.apply(this, args);
-    };
-    clearTimeout(timeout2);
-    timeout2 = setTimeout(later, wait);
-  }
-  debounced.clear = () => {
-    clearTimeout(timeout2);
-  };
-  return debounced;
-}
-function ownerDocument(node2) {
-  return node2 && node2.ownerDocument || document;
-}
-function ownerWindow(node2) {
-  const doc = ownerDocument(node2);
-  return doc.defaultView || window;
-}
-function setRef$1(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref) {
-    ref.current = value;
-  }
-}
-let globalId = 0;
-function useGlobalId(idOverride) {
-  const [defaultId, setDefaultId] = React$1.useState(idOverride);
-  const id = idOverride || defaultId;
-  React$1.useEffect(() => {
-    if (defaultId == null) {
-      globalId += 1;
-      setDefaultId(`mui-${globalId}`);
-    }
-  }, [defaultId]);
-  return id;
-}
-const safeReact = {
-  ...React$1
-};
-const maybeReactUseId = safeReact.useId;
-function useId(idOverride) {
-  if (maybeReactUseId !== void 0) {
-    const reactId = maybeReactUseId();
-    return idOverride ?? reactId;
-  }
-  return useGlobalId(idOverride);
-}
-function useEventCallback(fn2) {
-  const ref = React$1.useRef(fn2);
-  useEnhancedEffect$1(() => {
-    ref.current = fn2;
-  });
-  return React$1.useRef((...args) => (
-    // @ts-expect-error hide `this`
-    (0, ref.current)(...args)
-  )).current;
-}
-function useForkRef$1(...refs) {
-  const cleanupRef = React$1.useRef(void 0);
-  const refEffect = React$1.useCallback((instance) => {
-    const cleanups = refs.map((ref) => {
-      if (ref == null) {
-        return null;
-      }
-      if (typeof ref === "function") {
-        const refCallback = ref;
-        const refCleanup = refCallback(instance);
-        return typeof refCleanup === "function" ? refCleanup : () => {
-          refCallback(null);
-        };
-      }
-      ref.current = instance;
-      return () => {
-        ref.current = null;
-      };
-    });
-    return () => {
-      cleanups.forEach((refCleanup) => refCleanup == null ? void 0 : refCleanup());
-    };
-  }, refs);
-  return React$1.useMemo(() => {
-    if (refs.every((ref) => ref == null)) {
-      return null;
-    }
-    return (value) => {
-      if (cleanupRef.current) {
-        cleanupRef.current();
-        cleanupRef.current = void 0;
-      }
-      if (value != null) {
-        cleanupRef.current = refEffect(value);
-      }
-    };
-  }, refs);
-}
 function getTypeByValue(value) {
   const valueType = typeof value;
   switch (valueType) {
@@ -22313,8 +22313,8 @@ function useQuery(options, queryClient) {
 }
 var freeGlobal = typeof global == "object" && global && global.Object === Object && global;
 var freeSelf = typeof self == "object" && self && self.Object === Object && self;
-var root$1 = freeGlobal || freeSelf || Function("return this")();
-var Symbol$1 = root$1.Symbol;
+var root = freeGlobal || freeSelf || Function("return this")();
+var Symbol$1 = root.Symbol;
 var objectProto$d = Object.prototype;
 var hasOwnProperty$a = objectProto$d.hasOwnProperty;
 var nativeObjectToString$1 = objectProto$d.toString;
@@ -22439,7 +22439,7 @@ function isFunction(value) {
   var tag = baseGetTag(value);
   return tag == funcTag$2 || tag == genTag$1 || tag == asyncTag || tag == proxyTag;
 }
-var coreJsData = root$1["__core-js_shared__"];
+var coreJsData = root["__core-js_shared__"];
 var maskSrcKey = function() {
   var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || "");
   return uid ? "Symbol(src)_1." + uid : "";
@@ -22484,7 +22484,7 @@ function getNative(object, key) {
   var value = getValue(object, key);
   return baseIsNative(value) ? value : void 0;
 }
-var WeakMap$1 = getNative(root$1, "WeakMap");
+var WeakMap$1 = getNative(root, "WeakMap");
 var objectCreate = Object.create;
 var baseCreate = /* @__PURE__ */ function() {
   function object() {
@@ -22657,7 +22657,7 @@ function stubFalse() {
 var freeExports$2 = typeof exports == "object" && exports && !exports.nodeType && exports;
 var freeModule$2 = freeExports$2 && typeof module == "object" && module && !module.nodeType && module;
 var moduleExports$2 = freeModule$2 && freeModule$2.exports === freeExports$2;
-var Buffer$1 = moduleExports$2 ? root$1.Buffer : void 0;
+var Buffer$1 = moduleExports$2 ? root.Buffer : void 0;
 var nativeIsBuffer = Buffer$1 ? Buffer$1.isBuffer : void 0;
 var isBuffer$1 = nativeIsBuffer || stubFalse;
 var argsTag$2 = "[object Arguments]", arrayTag$2 = "[object Array]", boolTag$3 = "[object Boolean]", dateTag$3 = "[object Date]", errorTag$2 = "[object Error]", funcTag$1 = "[object Function]", mapTag$5 = "[object Map]", numberTag$3 = "[object Number]", objectTag$3 = "[object Object]", regexpTag$3 = "[object RegExp]", setTag$5 = "[object Set]", stringTag$3 = "[object String]", weakMapTag$2 = "[object WeakMap]";
@@ -22844,7 +22844,7 @@ ListCache.prototype["delete"] = listCacheDelete;
 ListCache.prototype.get = listCacheGet;
 ListCache.prototype.has = listCacheHas;
 ListCache.prototype.set = listCacheSet;
-var Map$1 = getNative(root$1, "Map");
+var Map$1 = getNative(root, "Map");
 function mapCacheClear() {
   this.size = 0;
   this.__data__ = {
@@ -23038,7 +23038,7 @@ Stack.prototype.set = stackSet;
 var freeExports = typeof exports == "object" && exports && !exports.nodeType && exports;
 var freeModule = freeExports && typeof module == "object" && module && !module.nodeType && module;
 var moduleExports = freeModule && freeModule.exports === freeExports;
-var Buffer2 = moduleExports ? root$1.Buffer : void 0;
+var Buffer2 = moduleExports ? root.Buffer : void 0;
 Buffer2 ? Buffer2.allocUnsafe : void 0;
 function cloneBuffer(buffer, isDeep) {
   {
@@ -23077,9 +23077,9 @@ function baseGetAllKeys(object, keysFunc, symbolsFunc) {
 function getAllKeys(object) {
   return baseGetAllKeys(object, keys, getSymbols);
 }
-var DataView$1 = getNative(root$1, "DataView");
-var Promise$1 = getNative(root$1, "Promise");
-var Set$1 = getNative(root$1, "Set");
+var DataView$1 = getNative(root, "DataView");
+var Promise$1 = getNative(root, "Promise");
+var Set$1 = getNative(root, "Set");
 var mapTag$4 = "[object Map]", objectTag$2 = "[object Object]", promiseTag = "[object Promise]", setTag$4 = "[object Set]", weakMapTag$1 = "[object WeakMap]";
 var dataViewTag$3 = "[object DataView]";
 var dataViewCtorString = toSource(DataView$1), mapCtorString = toSource(Map$1), promiseCtorString = toSource(Promise$1), setCtorString = toSource(Set$1), weakMapCtorString = toSource(WeakMap$1);
@@ -23114,7 +23114,7 @@ function initCloneArray(array) {
   }
   return result;
 }
-var Uint8Array$1 = root$1.Uint8Array;
+var Uint8Array$1 = root.Uint8Array;
 function cloneArrayBuffer(arrayBuffer) {
   var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
   new Uint8Array$1(result).set(new Uint8Array$1(arrayBuffer));
@@ -23624,7 +23624,7 @@ function createBaseEach(eachFunc, fromRight) {
 }
 var baseEach = createBaseEach(baseForOwn);
 var now = function() {
-  return root$1.Date.now();
+  return root.Date.now();
 };
 var FUNC_ERROR_TEXT = "Expected a function";
 var nativeMax$1 = Math.max, nativeMin = Math.min;
@@ -28516,6 +28516,23 @@ function atLeastLogLevel(someLevel) {
   const numericTarget = OrderedLogLevels.indexOf(someLevel);
   return currLevel <= numericTarget;
 }
+function extent(values2, valueof) {
+  let min2;
+  let max2;
+  {
+    for (const value of values2) {
+      if (value != null) {
+        if (min2 === void 0) {
+          if (value >= value) min2 = max2 = value;
+        } else {
+          if (min2 > value) min2 = value;
+          if (max2 < value) max2 = value;
+        }
+      }
+    }
+  }
+  return [min2, max2];
+}
 configSchema1_0_0.shape.coordinationSpace.unwrap();
 configSchema1_0_0.shape.layout.element.shape.coordinationScopes.unwrap();
 function upgradeReplaceViewProp(prefix2, view, coordinationSpace) {
@@ -31296,6 +31313,8 @@ const CoordinationType$1 = {
   // Per-spatial-layer
   SPATIAL_MAX_RESOLUTION: "spatialMaxResolution",
   // Per-image-channel (for spatial-accelerated)
+  SPATIAL_LOD_FACTOR: "spatialLodFactor",
+  // LOD factor for 3D volume rendering
   // For clipping plane sliders
   SPATIAL_SLICE_X: "spatialSliceX",
   SPATIAL_SLICE_Y: "spatialSliceY",
@@ -32251,7 +32270,7 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
     CoordinationType$1.HIERARCHY_LEVELS
   ]
 });
-const version = "3.8.9";
+const version = "3.8.13";
 const META_VERSION = {
   version
 };
@@ -34899,9 +34918,6 @@ class Location {
     return new Location(this.store, decodeURIComponent(new URL(path, root2).pathname));
   }
 }
-function root(store) {
-  return new Location(store ?? /* @__PURE__ */ new Map());
-}
 class Group extends Location {
   constructor(store, path, metadata) {
     super(store, path);
@@ -36087,7 +36103,7 @@ class SpatialDataAutoConfig extends AbstractAutoConfig {
       return relPath.match(/^(tables|table|images|labels|shapes|points)\/([^/]*)$/);
     });
     availableElements.forEach(({ path, attrs }) => {
-      var _a3, _b2, _c2, _d2, _e2, _f2;
+      var _a3, _b2, _c2, _d2, _e2;
       const relPath = path.substring(1);
       const firstCoordinateSystem = (_e2 = (_d2 = (_c2 = (_b2 = (_a3 = attrs == null ? void 0 : attrs.multiscales) == null ? void 0 : _a3[0]) == null ? void 0 : _b2.coordinateTransformations) == null ? void 0 : _c2[0]) == null ? void 0 : _d2.output) == null ? void 0 : _e2.name;
       if (relPath.match(/^(images)\/([^/]*)$/)) {
@@ -36105,13 +36121,7 @@ class SpatialDataAutoConfig extends AbstractAutoConfig {
         };
       }
       if (relPath.match(/^(shapes)\/([^/]*)$/)) {
-        options.obsSpots = {
-          path: relPath,
-          coordinateSystem: firstCoordinateSystem
-        };
-      }
-      if (relPath.match(/^(points)\/([^/]*)$/)) {
-        options.obsPoints = {
+        options.obsSegmentations = {
           path: relPath,
           coordinateSystem: firstCoordinateSystem
         };
@@ -36125,21 +36135,6 @@ class SpatialDataAutoConfig extends AbstractAutoConfig {
             // region: null,
           };
         }
-        const hasObs = tableEls.find((el) => el.path === `${path}/obs`);
-        if (hasObs) {
-          const columnOrder = (_f2 = hasObs.attrs) == null ? void 0 : _f2["column-order"];
-          options.obsSets = {
-            // region: null,
-            tablePath: relPath,
-            obsSets: columnOrder.map((c) => ({
-              // TODO: determine whether this column is string/categorical.
-              // TODO: determine whether this column contains too many
-              // categories to make sense to consider a cell set.
-              path: `${hasObs.path.substring(1)}/${c}`,
-              name: c
-            }))
-          };
-        }
       }
     });
     return options;
@@ -36294,8 +36289,16 @@ async function parsedUrlToZmetadata(parsedUrl) {
       store = await withConsolidated(initialStore, { metadataKey: "zmetadata" });
     }
     const contents = store.contents();
+    const consolidatedRoot = await open(store, { kind: "group" });
     promises = contents.map(async (value) => {
-      const item = await open(root(store).resolve(value.path));
+      let item;
+      try {
+        item = await open(consolidatedRoot.resolve(value.path), { kind: value.kind });
+      } catch {
+        item = {
+          attrs: {}
+        };
+      }
       return {
         ...value,
         attrs: item.attrs
@@ -36326,9 +36329,10 @@ async function parsedUrlToZmetadata(parsedUrl) {
       // Note: For spatialData, we assume the store is always consolidated.
       // TODO: throw error if spatialdata + not consolidated?
     ];
+    const storeRoot = await open(store, { kind: "group" });
     promises = keysToTry.map(async (k) => {
       try {
-        const item = await open(root(store).resolve(k));
+        const item = await open(storeRoot.resolve(k));
         return {
           path: k,
           kind: item.kind,
@@ -37289,7 +37293,9 @@ function useMultiDatasetCoordination(parameters, coordinationScopes, coordinatio
 }
 const AUXILIARY_COORDINATION_TYPES_MAP = {
   spatialImageLayer: ["imageLayerCallbacks", "areLoadingImageChannels"],
-  spatialSegmentationLayer: ["segmentationLayerCallbacks", "areLoadingSegmentationChannels"]
+  spatialSegmentationLayer: ["segmentationLayerCallbacks", "areLoadingSegmentationChannels"],
+  spatialAcceleratedVolumeLoadingProgress: ["volumeLoadingProgress"],
+  layerControllerBeta: ["volumeLoadingProgress"]
 };
 const mapCoordinationScopes = (coordinationScopes) => {
   const newCoordinationScopes = {};
@@ -44348,23 +44354,6 @@ function createLoaders(datasets, configDescription, fileTypes, coordinationTypes
   });
   return result;
 }
-function extent(values2, valueof) {
-  let min2;
-  let max2;
-  {
-    for (const value of values2) {
-      if (value != null) {
-        if (min2 === void 0) {
-          if (value >= value) min2 = max2 = value;
-        } else {
-          if (min2 > value) min2 = value;
-          if (max2 < value) max2 = value;
-        }
-      }
-    }
-  }
-  return [min2, max2];
-}
 function getWindowDimensions() {
   const { innerWidth: width2, innerHeight: height2 } = window;
   return {
@@ -45563,7 +45552,10 @@ function LoadingIndicator() {
 const useStyles$2 = makeStyles()(() => ({
   paper: {
     maxHeight: 200,
-    overflow: "auto"
+    overflowX: "hidden",
+    overflowY: "auto",
+    paddingLeft: "4px",
+    paddingRight: "4px"
   },
   container: {
     position: "relative",
@@ -47055,7 +47047,7 @@ function useSpotMultiFeatureSelection(coordinationScopes, coordinationScopesBy,
     [
       coordinationScopes,
       coordinationScopesBy,
-      ...Object.values(featureSelectionCoordination[0] || {}).flatMap((layerVal) => layerVal.featureSelection)
+      JSON.stringify(Object.values(featureSelectionCoordination[0] || {}).flatMap((layerVal) => layerVal.featureSelection))
     ]
   );
   const [

package/dist-tsc/data-hooks-multilevel.js

@@ -70,8 +70,8 @@ export function useSpotMultiFeatureSelection(coordinationScopes, coordinationSco
     ]))), 
     // Need to execute this more frequently, whenever the featureSelections update.
     [coordinationScopes, coordinationScopesBy,
-        ...Object.values(featureSelectionCoordination[0] || {})
-            .flatMap(layerVal => layerVal.featureSelection),
+        JSON.stringify(Object.values(featureSelectionCoordination[0] || {})
+            .flatMap(layerVal => layerVal.featureSelection)),
     ]);
     const [featureData, loadedSelections, extents, normData, featureStatus, errors,] = useFeatureSelectionMultiLevel(loaders, dataset, false, matchOnObj, selections, 1);
     return [featureData, loadedSelections, extents, normData, featureStatus, errors];

package/dist-tsc/shared-mui/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AAyBA,oDAkEC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../src/shared-mui/components.js"],"names":[],"mappings":"AA4BA,oDAkEC"}

package/dist-tsc/shared-mui/components.js

@@ -6,7 +6,10 @@ import { useVitessceContainer } from '../hooks.js';
 const useStyles = makeStyles()(() => ({
     paper: {
         maxHeight: 200,
-        overflow: 'auto',
+        overflowX: 'hidden',
+        overflowY: 'auto',
+        paddingLeft: '4px',
+        paddingRight: '4px',
     },
     container: {
         position: 'relative',

package/dist-tsc/state/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AA8BA,4DAiBC;AAED,6CAMC;AACD,uDAOC;AAED,8DAEC;AAGD,2DAiBC;AAED,4CAMC;AACD,sDAOC;AAED,6DAEC;AAID;;;;;;GAMG;AACH,8CAJW,GAAC,mBAEC,MAAM,GAAC,SAAS,CA4B5B;AAED;;;;;;;GAOG;AACH,gDALW,GAAC,wBACD,GAAC,qBAEC,MAAM,GAAC,SAAS,CA0C5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,sBACN,GAAC,GACC,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,mDACN,GAAC,wBACD,GAAC,GACC,MAAM,GAAC,SAAS,CAc5B;AAySD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAmCjB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED,yFAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,GAEJ,KAAK,CA2EjB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,GAEJ,KAAK,CAUjB;AA6BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAgCjB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,iCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,oEAIC;AAGD;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AAzhCM,yFA4LH;AAOG,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/state/hooks.js"],"names":[],"mappings":"AA8BA,4DAiBC;AAED,6CAMC;AACD,uDAOC;AAED,8DAEC;AAGD,2DAiBC;AAED,4CAMC;AACD,sDAOC;AAED,6DAEC;AAID;;;;;;GAMG;AACH,8CAJW,GAAC,mBAEC,MAAM,GAAC,SAAS,CA4B5B;AAED;;;;;;;GAOG;AACH,gDALW,GAAC,wBACD,GAAC,qBAEC,MAAM,GAAC,SAAS,CA0C5B;AAED;;;;;GAKG;AACH,6CAJW,MAAM,sBACN,GAAC,GACC,MAAM,GAAC,SAAS,CAI5B;AAED;;;;;;GAMG;AACH,+CALW,MAAM,mDACN,GAAC,wBACD,GAAC,GACC,MAAM,GAAC,SAAS,CAc5B;AAySD;;;;;;;;;GASG;AACH,mDALW,MAAM,EAAE,sBACR,MAAM,GAEJ,MAAM,CAclB;AAED;;;;;;;;;;;;;;;GAeG;AACH,4CATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAmCjB;AAED,yFAKC;AAED,gGAqBC;AAED,0IA4BC;AAED,iJAkEC;AAED,yFAmBC;AAED;;;;GAIG;AACH,mDAHW,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;;;;GAaG;AACH,mDAXW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,UAEN,MAAM,GAEJ,KAAK,CA2EjB;AAED;;;;;GAKG;AACH,0DAHW,MAAM,GACJ,MAAM,CAiBlB;AAED;;;;;;GAMG;AACH,4DAJW,MAAM,wBACN,MAAM,GACJ,MAAM,CAgBlB;AAED;;;;;;;GAOG;AACH,4DANW,MAAM,EAAE,iDACR,MAAM,eACN,MAAM,iBACN,MAAM,SAuEhB;AAGD;;;;;;;;;;;GAWG;AACH,wDATW,MAAM,EAAE,sBACR,MAAM,wBACN,MAAM,GAEJ,KAAK,CAUjB;AA+BD;;;;;;;;;;;;;;;GAeG;AACH,qDATW,MAAM,EAAE,sBACR,MAAM,GAEJ,KAAK,CAiCjB;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAGD;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAoBhB;AAED;;;;;;;;;;;;GAYG;AACH,2CARW,MAAM,WACN,MAAM,YACN,MAAM,0BACN,MAAM,OAShB;AAED;;;;;GAKG;AACH,6BAHa,MAAM,EAAE,CAKpB;AAED;;;;;GAKG;AACH,+CAEC;AAED;;;;;GAKG;AACH,0EAEC;AAED;;;;;GAKG;AACH,uEAEC;AAED;;;;;GAKG;AACH,4CAEC;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,iCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,oEAIC;AAGD;;;;;GAKG;AACH,qCAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,iDAEC;AAED;;;;;GAKG;AACH,8BAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,0CAEC;AAED;;;;;GAKG;AACH,iDAHa,MAAM,CAKlB;AAED;;;;;GAKG;AACH,6DAOC;AAED;;;;GAIG;AACH,iCAFa,MAAM,CAIlB;AAED;;;;;GAKG;AACH,8CAEC;AA5hCM,yFA4LH;AAOG,0FAFM,MAAM,CAOlB;AAcM,iDAUJ"}

package/dist-tsc/state/hooks.js

@@ -861,6 +861,8 @@ export function useMultiDatasetCoordination(parameters, coordinationScopes, coor
 const AUXILIARY_COORDINATION_TYPES_MAP = {
     spatialImageLayer: ['imageLayerCallbacks', 'areLoadingImageChannels'],
     spatialSegmentationLayer: ['segmentationLayerCallbacks', 'areLoadingSegmentationChannels'],
+    spatialAcceleratedVolumeLoadingProgress: ['volumeLoadingProgress'],
+    layerControllerBeta: ['volumeLoadingProgress'],
 };
 /**
  * The maps the coordination types of incoming scopes to new types

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/vit-s",
-  "version": "3.8.9",
+  "version": "3.8.13",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -30,16 +30,16 @@
     "react-error-boundary": "^5.0.0",
     "@placemarkio/flat-drop-files": "^1.0.2",
     "zarrita": "0.5.4",
-    "@vitessce/styles": "3.8.9",
-    "@vitessce/abstract": "3.8.9",
-    "@vitessce/error": "3.8.9",
-    "@vitessce/constants-internal": "3.8.9",
-    "@vitessce/plugins": "3.8.9",
-    "@vitessce/schemas": "3.8.9",
-    "@vitessce/utils": "3.8.9",
-    "@vitessce/sets-utils": "3.8.9",
-    "@vitessce/config": "3.8.9",
-    "@vitessce/globals": "3.8.9"
+    "@vitessce/styles": "3.8.13",
+    "@vitessce/abstract": "3.8.13",
+    "@vitessce/error": "3.8.13",
+    "@vitessce/constants-internal": "3.8.13",
+    "@vitessce/schemas": "3.8.13",
+    "@vitessce/plugins": "3.8.13",
+    "@vitessce/utils": "3.8.13",
+    "@vitessce/sets-utils": "3.8.13",
+    "@vitessce/globals": "3.8.13",
+    "@vitessce/config": "3.8.13"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -48,7 +48,7 @@
     "react-dom": "18.3.1",
     "vite": "^7.0.0",
     "vitest": "^3.1.4",
-    "@vitessce/types": "3.8.9"
+    "@vitessce/types": "3.8.13"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

package/src/data-hooks-multilevel.js

@@ -118,8 +118,8 @@ export function useSpotMultiFeatureSelection(
   ),
   // Need to execute this more frequently, whenever the featureSelections update.
   [coordinationScopes, coordinationScopesBy,
-    ...Object.values(featureSelectionCoordination[0] || {})
-      .flatMap(layerVal => layerVal.featureSelection),
+    JSON.stringify(Object.values(featureSelectionCoordination[0] || {})
+      .flatMap(layerVal => layerVal.featureSelection)),
   ]);
   const [
     featureData, loadedSelections, extents, normData, featureStatus, errors,

package/src/shared-mui/components.js

@@ -14,7 +14,10 @@ import { useVitessceContainer } from '../hooks.js';
 const useStyles = makeStyles()(() => ({
   paper: {
     maxHeight: 200,
-    overflow: 'auto',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    paddingLeft: '4px',
+    paddingRight: '4px',
   },
   container: {
     position: 'relative',

package/src/state/hooks.js

@@ -982,6 +982,8 @@ export function useMultiDatasetCoordination(parameters, coordinationScopes, coor
 const AUXILIARY_COORDINATION_TYPES_MAP = {
   spatialImageLayer: ['imageLayerCallbacks', 'areLoadingImageChannels'],
   spatialSegmentationLayer: ['segmentationLayerCallbacks', 'areLoadingSegmentationChannels'],
+  spatialAcceleratedVolumeLoadingProgress: ['volumeLoadingProgress'],
+  layerControllerBeta: ['volumeLoadingProgress'],
 };
 
 /**
@@ -1047,6 +1049,7 @@ export function useAuxiliaryCoordination(parameters, coordinationScopes) {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   })), [parameters, coordinationScopes]);
 
+
   return [values, setters];
 }