@vitessce/heatmap 3.8.9 → 3.8.13

package/dist/{index-e8-Lh_l9.js → index-BB2ssozJ.js}

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a2, _b;
 import * as React from "react";
-import React__default, { useContext, forwardRef, useRef, useMemo, createContext, createElement, isValidElement, cloneElement, Children, useEffect, useLayoutEffect, useState, useImperativeHandle, useReducer, useCallback } from "react";
+import React__default, { useContext, forwardRef, useRef, useMemo, createContext, createElement, isValidElement, cloneElement, Children, useState, useEffect, useCallback, useLayoutEffect, useImperativeHandle, useReducer } from "react";
 import { useVitessceContainer, useComponentHover, useComponentViewInfo, usePlotOptionsStyles, OptionsContainer, OptionSelect, useLoaders, useCoordinationScopes, useSetComponentHover, useSetComponentViewInfo, useCoordination, useDeckCanvasSize, useMultiObsLabels, useFeatureLabelsData, useExpandedFeatureLabelsMap, useObsFeatureMatrixData, useObsSetsData, useReady, useUrls, useUint8ObsFeatureMatrix, useGetObsInfo, useGetObsMembership, TitleInfo } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 function _mergeNamespaces(n2, m) {
@@ -788,6 +788,34 @@ class Pool {
     }
   }
 }
+function extent$1(values2, valueof) {
+  let min;
+  let max2;
+  {
+    for (const value of values2) {
+      if (value != null) {
+        if (min === void 0) {
+          if (value >= value) min = max2 = value;
+        } else {
+          if (min > value) min = value;
+          if (max2 < value) max2 = value;
+        }
+      }
+    }
+  }
+  return [min, max2];
+}
+function max(values2, valueof) {
+  let max2;
+  {
+    for (const value of values2) {
+      if (value != null && (max2 < value || max2 === void 0 && value >= value)) {
+        max2 = value;
+      }
+    }
+  }
+  return max2;
+}
 let getRandomValues$1;
 const rnds8$1 = new Uint8Array(16);
 function rng$1() {
@@ -1832,7 +1860,7 @@ function debounce$1(func, wait, options) {
     leading = !!options.leading;
     maxing = "maxWait" in options;
     maxWait = maxing ? nativeMax$1(toNumber(options.maxWait) || 0, wait) : maxWait;
-    trailing = "trailing" in options ? true : trailing;
+    trailing = "trailing" in options ? !!options.trailing : trailing;
   }
   function invokeFunc(time) {
     var args = lastArgs, thisArg = lastThis;
@@ -9787,6 +9815,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",
@@ -25090,11 +25120,6 @@ const { tss } = createTss({
   "usePlugin": useMuiThemeStyleOverridesPlugin
 });
 const useStyles$3 = tss.create({});
-function chainPropTypes(propType1, propType2) {
-  return function validate2(...args) {
-    return propType1(...args) || propType2(...args);
-  };
-}
 const memoTheme = unstable_memoTheme;
 ({
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -25113,332 +25138,6 @@ const memoTheme = unstable_memoTheme;
 function useDefaultProps(params) {
   return useDefaultProps$1(params);
 }
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
-    for (var e3 = 1; e3 < arguments.length; e3++) {
-      var t = arguments[e3];
-      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
-    }
-    return n2;
-  }, _extends$1.apply(null, arguments);
-}
-function _objectWithoutPropertiesLoose(r2, e3) {
-  if (null == r2) return {};
-  var t = {};
-  for (var n2 in r2) if ({}.hasOwnProperty.call(r2, n2)) {
-    if (-1 !== e3.indexOf(n2)) continue;
-    t[n2] = r2[n2];
-  }
-  return t;
-}
-function _setPrototypeOf(t, e3) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e4) {
-    return t2.__proto__ = e4, t2;
-  }, _setPrototypeOf(t, e3);
-}
-function _inheritsLoose(t, o2) {
-  t.prototype = Object.create(o2.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o2);
-}
-const TransitionGroupContext = React__default.createContext(null);
-function _assertThisInitialized(e3) {
-  if (void 0 === e3) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e3;
-}
-function getChildMapping(children2, mapFn) {
-  var mapper = function mapper2(child) {
-    return mapFn && isValidElement(child) ? mapFn(child) : child;
-  };
-  var result = /* @__PURE__ */ Object.create(null);
-  if (children2) Children.map(children2, function(c) {
-    return c;
-  }).forEach(function(child) {
-    result[child.key] = mapper(child);
-  });
-  return result;
-}
-function mergeChildMappings(prev2, next2) {
-  prev2 = prev2 || {};
-  next2 = next2 || {};
-  function getValueForKey(key) {
-    return key in next2 ? next2[key] : prev2[key];
-  }
-  var nextKeysPending = /* @__PURE__ */ Object.create(null);
-  var pendingKeys = [];
-  for (var prevKey in prev2) {
-    if (prevKey in next2) {
-      if (pendingKeys.length) {
-        nextKeysPending[prevKey] = pendingKeys;
-        pendingKeys = [];
-      }
-    } else {
-      pendingKeys.push(prevKey);
-    }
-  }
-  var i2;
-  var childMapping = {};
-  for (var nextKey in next2) {
-    if (nextKeysPending[nextKey]) {
-      for (i2 = 0; i2 < nextKeysPending[nextKey].length; i2++) {
-        var pendingNextKey = nextKeysPending[nextKey][i2];
-        childMapping[nextKeysPending[nextKey][i2]] = getValueForKey(pendingNextKey);
-      }
-    }
-    childMapping[nextKey] = getValueForKey(nextKey);
-  }
-  for (i2 = 0; i2 < pendingKeys.length; i2++) {
-    childMapping[pendingKeys[i2]] = getValueForKey(pendingKeys[i2]);
-  }
-  return childMapping;
-}
-function getProp(child, prop, props) {
-  return props[prop] != null ? props[prop] : child.props[prop];
-}
-function getInitialChildMapping(props, onExited) {
-  return getChildMapping(props.children, function(child) {
-    return cloneElement(child, {
-      onExited: onExited.bind(null, child),
-      in: true,
-      appear: getProp(child, "appear", props),
-      enter: getProp(child, "enter", props),
-      exit: getProp(child, "exit", props)
-    });
-  });
-}
-function getNextChildMapping(nextProps, prevChildMapping, onExited) {
-  var nextChildMapping = getChildMapping(nextProps.children);
-  var children2 = mergeChildMappings(prevChildMapping, nextChildMapping);
-  Object.keys(children2).forEach(function(key) {
-    var child = children2[key];
-    if (!isValidElement(child)) return;
-    var hasPrev = key in prevChildMapping;
-    var hasNext = key in nextChildMapping;
-    var prevChild = prevChildMapping[key];
-    var isLeaving = isValidElement(prevChild) && !prevChild.props.in;
-    if (hasNext && (!hasPrev || isLeaving)) {
-      children2[key] = cloneElement(child, {
-        onExited: onExited.bind(null, child),
-        in: true,
-        exit: getProp(child, "exit", nextProps),
-        enter: getProp(child, "enter", nextProps)
-      });
-    } else if (!hasNext && hasPrev && !isLeaving) {
-      children2[key] = cloneElement(child, {
-        in: false
-      });
-    } else if (hasNext && hasPrev && isValidElement(prevChild)) {
-      children2[key] = cloneElement(child, {
-        onExited: onExited.bind(null, child),
-        in: prevChild.props.in,
-        exit: getProp(child, "exit", nextProps),
-        enter: getProp(child, "enter", nextProps)
-      });
-    }
-  });
-  return children2;
-}
-var values = Object.values || function(obj) {
-  return Object.keys(obj).map(function(k) {
-    return obj[k];
-  });
-};
-var defaultProps$P = {
-  component: "div",
-  childFactory: function childFactory(child) {
-    return child;
-  }
-};
-var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
-  _inheritsLoose(TransitionGroup2, _React$Component);
-  function TransitionGroup2(props, context) {
-    var _this;
-    _this = _React$Component.call(this, props, context) || this;
-    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
-    _this.state = {
-      contextValue: {
-        isMounting: true
-      },
-      handleExited,
-      firstRender: true
-    };
-    return _this;
-  }
-  var _proto = TransitionGroup2.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    this.mounted = true;
-    this.setState({
-      contextValue: {
-        isMounting: false
-      }
-    });
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    this.mounted = false;
-  };
-  TransitionGroup2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
-    var prevChildMapping = _ref.children, handleExited = _ref.handleExited, firstRender = _ref.firstRender;
-    return {
-      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
-      firstRender: false
-    };
-  };
-  _proto.handleExited = function handleExited(child, node2) {
-    var currentChildMapping = getChildMapping(this.props.children);
-    if (child.key in currentChildMapping) return;
-    if (child.props.onExited) {
-      child.props.onExited(node2);
-    }
-    if (this.mounted) {
-      this.setState(function(state) {
-        var children2 = _extends$1({}, state.children);
-        delete children2[child.key];
-        return {
-          children: children2
-        };
-      });
-    }
-  };
-  _proto.render = function render() {
-    var _this$props = this.props, Component2 = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
-    var contextValue = this.state.contextValue;
-    var children2 = values(this.state.children).map(childFactory2);
-    delete props.appear;
-    delete props.enter;
-    delete props.exit;
-    if (Component2 === null) {
-      return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
-        value: contextValue
-      }, children2);
-    }
-    return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
-      value: contextValue
-    }, /* @__PURE__ */ React__default.createElement(Component2, props, children2));
-  };
-  return TransitionGroup2;
-}(React__default.Component);
-TransitionGroup.propTypes = {
-  /**
-   * `<TransitionGroup>` renders a `<div>` by default. You can change this
-   * behavior by providing a `component` prop.
-   * If you use React v16+ and would like to avoid a wrapping `<div>` element
-   * you can pass in `component={null}`. This is useful if the wrapping div
-   * borks your css styles.
-   */
-  component: PropTypes.any,
-  /**
-   * A set of `<Transition>` components, that are toggled `in` and out as they
-   * leave. the `<TransitionGroup>` will inject specific transition props, so
-   * remember to spread them through if you are wrapping the `<Transition>` as
-   * with our `<Fade>` example.
-   *
-   * While this component is meant for multiple `Transition` or `CSSTransition`
-   * children, sometimes you may want to have a single transition child with
-   * content that you want to be transitioned out and in when you change it
-   * (e.g. routes, images etc.) In that case you can change the `key` prop of
-   * the transition child as you change its content, this will cause
-   * `TransitionGroup` to transition the child out and back in.
-   */
-  children: PropTypes.node,
-  /**
-   * A convenience prop that enables or disables appear animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
-   */
-  appear: PropTypes.bool,
-  /**
-   * A convenience prop that enables or disables enter animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
-   */
-  enter: PropTypes.bool,
-  /**
-   * A convenience prop that enables or disables exit animations
-   * for all children. Note that specifying this will override any defaults set
-   * on individual children Transitions.
-   */
-  exit: PropTypes.bool,
-  /**
-   * You may need to apply reactive updates to a child as it is exiting.
-   * This is generally done by using `cloneElement` however in the case of an exiting
-   * child the element has already been removed and not accessible to the consumer.
-   *
-   * If you do need to update a child as it leaves you can provide a `childFactory`
-   * to wrap every child, even the ones that are leaving.
-   *
-   * @type Function(child: ReactElement) -> ReactElement
-   */
-  childFactory: PropTypes.func
-};
-TransitionGroup.defaultProps = defaultProps$P;
-const UNINITIALIZED = {};
-function useLazyRef(init, initArg) {
-  const ref = React.useRef(UNINITIALIZED);
-  if (ref.current === UNINITIALIZED) {
-    ref.current = init(initArg);
-  }
-  return ref;
-}
-const EMPTY$1 = [];
-function useOnMount(fn) {
-  React.useEffect(fn, EMPTY$1);
-}
-class Timeout {
-  constructor() {
-    __publicField(this, "currentId", null);
-    __publicField(this, "clear", () => {
-      if (this.currentId !== null) {
-        clearTimeout(this.currentId);
-        this.currentId = null;
-      }
-    });
-    __publicField(this, "disposeEffect", () => {
-      return this.clear;
-    });
-  }
-  static create() {
-    return new Timeout();
-  }
-  /**
-   * Executes `fn` after `delay`, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setTimeout(() => {
-      this.currentId = null;
-      fn();
-    }, delay);
-  }
-}
-function useTimeout() {
-  const timeout = useLazyRef(Timeout.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
-function isClassComponent(elementType) {
-  const {
-    prototype = {}
-  } = elementType;
-  return Boolean(prototype.isReactComponent);
-}
-function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
-  const propValue = props[propName];
-  const safePropName = propFullName || propName;
-  if (propValue == null || // When server-side rendering React doesn't warn either.
-  // This is not an accurate check for SSR.
-  // This is only in place for emotion compat.
-  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
-  typeof window === "undefined") {
-    return null;
-  }
-  let warningHint;
-  if (typeof propValue === "function" && !isClassComponent(propValue)) {
-    warningHint = "Did you accidentally provide a plain function component instead?";
-  }
-  if (warningHint !== void 0) {
-    return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. Expected an element type that can hold a ref. ${warningHint} For more information see https://mui.com/r/caveat-with-refs-guide`);
-  }
-  return null;
-}
-const elementTypeAcceptingRef$1 = chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
 function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
@@ -25855,6 +25554,337 @@ function mergeSlotProps$1(externalSlotProps, defaultSlotProps) {
     }
   };
 }
+function chainPropTypes(propType1, propType2) {
+  return function validate2(...args) {
+    return propType1(...args) || propType2(...args);
+  };
+}
+function _extends$1() {
+  return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
+    for (var e3 = 1; e3 < arguments.length; e3++) {
+      var t = arguments[e3];
+      for (var r2 in t) ({}).hasOwnProperty.call(t, r2) && (n2[r2] = t[r2]);
+    }
+    return n2;
+  }, _extends$1.apply(null, arguments);
+}
+function _objectWithoutPropertiesLoose(r2, e3) {
+  if (null == r2) return {};
+  var t = {};
+  for (var n2 in r2) if ({}.hasOwnProperty.call(r2, n2)) {
+    if (-1 !== e3.indexOf(n2)) continue;
+    t[n2] = r2[n2];
+  }
+  return t;
+}
+function _setPrototypeOf(t, e3) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e4) {
+    return t2.__proto__ = e4, t2;
+  }, _setPrototypeOf(t, e3);
+}
+function _inheritsLoose(t, o2) {
+  t.prototype = Object.create(o2.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o2);
+}
+const TransitionGroupContext = React__default.createContext(null);
+function _assertThisInitialized(e3) {
+  if (void 0 === e3) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e3;
+}
+function getChildMapping(children2, mapFn) {
+  var mapper = function mapper2(child) {
+    return mapFn && isValidElement(child) ? mapFn(child) : child;
+  };
+  var result = /* @__PURE__ */ Object.create(null);
+  if (children2) Children.map(children2, function(c) {
+    return c;
+  }).forEach(function(child) {
+    result[child.key] = mapper(child);
+  });
+  return result;
+}
+function mergeChildMappings(prev2, next2) {
+  prev2 = prev2 || {};
+  next2 = next2 || {};
+  function getValueForKey(key) {
+    return key in next2 ? next2[key] : prev2[key];
+  }
+  var nextKeysPending = /* @__PURE__ */ Object.create(null);
+  var pendingKeys = [];
+  for (var prevKey in prev2) {
+    if (prevKey in next2) {
+      if (pendingKeys.length) {
+        nextKeysPending[prevKey] = pendingKeys;
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  }
+  var i2;
+  var childMapping = {};
+  for (var nextKey in next2) {
+    if (nextKeysPending[nextKey]) {
+      for (i2 = 0; i2 < nextKeysPending[nextKey].length; i2++) {
+        var pendingNextKey = nextKeysPending[nextKey][i2];
+        childMapping[nextKeysPending[nextKey][i2]] = getValueForKey(pendingNextKey);
+      }
+    }
+    childMapping[nextKey] = getValueForKey(nextKey);
+  }
+  for (i2 = 0; i2 < pendingKeys.length; i2++) {
+    childMapping[pendingKeys[i2]] = getValueForKey(pendingKeys[i2]);
+  }
+  return childMapping;
+}
+function getProp(child, prop, props) {
+  return props[prop] != null ? props[prop] : child.props[prop];
+}
+function getInitialChildMapping(props, onExited) {
+  return getChildMapping(props.children, function(child) {
+    return cloneElement(child, {
+      onExited: onExited.bind(null, child),
+      in: true,
+      appear: getProp(child, "appear", props),
+      enter: getProp(child, "enter", props),
+      exit: getProp(child, "exit", props)
+    });
+  });
+}
+function getNextChildMapping(nextProps, prevChildMapping, onExited) {
+  var nextChildMapping = getChildMapping(nextProps.children);
+  var children2 = mergeChildMappings(prevChildMapping, nextChildMapping);
+  Object.keys(children2).forEach(function(key) {
+    var child = children2[key];
+    if (!isValidElement(child)) return;
+    var hasPrev = key in prevChildMapping;
+    var hasNext = key in nextChildMapping;
+    var prevChild = prevChildMapping[key];
+    var isLeaving = isValidElement(prevChild) && !prevChild.props.in;
+    if (hasNext && (!hasPrev || isLeaving)) {
+      children2[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: true,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    } else if (!hasNext && hasPrev && !isLeaving) {
+      children2[key] = cloneElement(child, {
+        in: false
+      });
+    } else if (hasNext && hasPrev && isValidElement(prevChild)) {
+      children2[key] = cloneElement(child, {
+        onExited: onExited.bind(null, child),
+        in: prevChild.props.in,
+        exit: getProp(child, "exit", nextProps),
+        enter: getProp(child, "enter", nextProps)
+      });
+    }
+  });
+  return children2;
+}
+var values = Object.values || function(obj) {
+  return Object.keys(obj).map(function(k) {
+    return obj[k];
+  });
+};
+var defaultProps$P = {
+  component: "div",
+  childFactory: function childFactory(child) {
+    return child;
+  }
+};
+var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
+  _inheritsLoose(TransitionGroup2, _React$Component);
+  function TransitionGroup2(props, context) {
+    var _this;
+    _this = _React$Component.call(this, props, context) || this;
+    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
+    _this.state = {
+      contextValue: {
+        isMounting: true
+      },
+      handleExited,
+      firstRender: true
+    };
+    return _this;
+  }
+  var _proto = TransitionGroup2.prototype;
+  _proto.componentDidMount = function componentDidMount() {
+    this.mounted = true;
+    this.setState({
+      contextValue: {
+        isMounting: false
+      }
+    });
+  };
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this.mounted = false;
+  };
+  TransitionGroup2.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
+    var prevChildMapping = _ref.children, handleExited = _ref.handleExited, firstRender = _ref.firstRender;
+    return {
+      children: firstRender ? getInitialChildMapping(nextProps, handleExited) : getNextChildMapping(nextProps, prevChildMapping, handleExited),
+      firstRender: false
+    };
+  };
+  _proto.handleExited = function handleExited(child, node2) {
+    var currentChildMapping = getChildMapping(this.props.children);
+    if (child.key in currentChildMapping) return;
+    if (child.props.onExited) {
+      child.props.onExited(node2);
+    }
+    if (this.mounted) {
+      this.setState(function(state) {
+        var children2 = _extends$1({}, state.children);
+        delete children2[child.key];
+        return {
+          children: children2
+        };
+      });
+    }
+  };
+  _proto.render = function render() {
+    var _this$props = this.props, Component2 = _this$props.component, childFactory2 = _this$props.childFactory, props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
+    var contextValue = this.state.contextValue;
+    var children2 = values(this.state.children).map(childFactory2);
+    delete props.appear;
+    delete props.enter;
+    delete props.exit;
+    if (Component2 === null) {
+      return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
+        value: contextValue
+      }, children2);
+    }
+    return /* @__PURE__ */ React__default.createElement(TransitionGroupContext.Provider, {
+      value: contextValue
+    }, /* @__PURE__ */ React__default.createElement(Component2, props, children2));
+  };
+  return TransitionGroup2;
+}(React__default.Component);
+TransitionGroup.propTypes = {
+  /**
+   * `<TransitionGroup>` renders a `<div>` by default. You can change this
+   * behavior by providing a `component` prop.
+   * If you use React v16+ and would like to avoid a wrapping `<div>` element
+   * you can pass in `component={null}`. This is useful if the wrapping div
+   * borks your css styles.
+   */
+  component: PropTypes.any,
+  /**
+   * A set of `<Transition>` components, that are toggled `in` and out as they
+   * leave. the `<TransitionGroup>` will inject specific transition props, so
+   * remember to spread them through if you are wrapping the `<Transition>` as
+   * with our `<Fade>` example.
+   *
+   * While this component is meant for multiple `Transition` or `CSSTransition`
+   * children, sometimes you may want to have a single transition child with
+   * content that you want to be transitioned out and in when you change it
+   * (e.g. routes, images etc.) In that case you can change the `key` prop of
+   * the transition child as you change its content, this will cause
+   * `TransitionGroup` to transition the child out and back in.
+   */
+  children: PropTypes.node,
+  /**
+   * A convenience prop that enables or disables appear animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  appear: PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables enter animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  enter: PropTypes.bool,
+  /**
+   * A convenience prop that enables or disables exit animations
+   * for all children. Note that specifying this will override any defaults set
+   * on individual children Transitions.
+   */
+  exit: PropTypes.bool,
+  /**
+   * You may need to apply reactive updates to a child as it is exiting.
+   * This is generally done by using `cloneElement` however in the case of an exiting
+   * child the element has already been removed and not accessible to the consumer.
+   *
+   * If you do need to update a child as it leaves you can provide a `childFactory`
+   * to wrap every child, even the ones that are leaving.
+   *
+   * @type Function(child: ReactElement) -> ReactElement
+   */
+  childFactory: PropTypes.func
+};
+TransitionGroup.defaultProps = defaultProps$P;
+const UNINITIALIZED = {};
+function useLazyRef(init, initArg) {
+  const ref = React.useRef(UNINITIALIZED);
+  if (ref.current === UNINITIALIZED) {
+    ref.current = init(initArg);
+  }
+  return ref;
+}
+const EMPTY$1 = [];
+function useOnMount(fn) {
+  React.useEffect(fn, EMPTY$1);
+}
+class Timeout {
+  constructor() {
+    __publicField(this, "currentId", null);
+    __publicField(this, "clear", () => {
+      if (this.currentId !== null) {
+        clearTimeout(this.currentId);
+        this.currentId = null;
+      }
+    });
+    __publicField(this, "disposeEffect", () => {
+      return this.clear;
+    });
+  }
+  static create() {
+    return new Timeout();
+  }
+  /**
+   * Executes `fn` after `delay`, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setTimeout(() => {
+      this.currentId = null;
+      fn();
+    }, delay);
+  }
+}
+function useTimeout() {
+  const timeout = useLazyRef(Timeout.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+function isClassComponent(elementType) {
+  const {
+    prototype = {}
+  } = elementType;
+  return Boolean(prototype.isReactComponent);
+}
+function elementTypeAcceptingRef(props, propName, componentName, location, propFullName) {
+  const propValue = props[propName];
+  const safePropName = propFullName || propName;
+  if (propValue == null || // When server-side rendering React doesn't warn either.
+  // This is not an accurate check for SSR.
+  // This is only in place for emotion compat.
+  // TODO: Revisit once https://github.com/facebook/react/issues/20047 is resolved.
+  typeof window === "undefined") {
+    return null;
+  }
+  let warningHint;
+  if (typeof propValue === "function" && !isClassComponent(propValue)) {
+    warningHint = "Did you accidentally provide a plain function component instead?";
+  }
+  if (warningHint !== void 0) {
+    return new Error(`Invalid ${location} \`${safePropName}\` supplied to \`${componentName}\`. Expected an element type that can hold a ref. ${warningHint} For more information see https://mui.com/r/caveat-with-refs-guide`);
+  }
+  return null;
+}
+const elementTypeAcceptingRef$1 = chainPropTypes(PropTypes.elementType, elementTypeAcceptingRef);
 function getTypeByValue(value) {
   const valueType = typeof value;
   switch (valueType) {
@@ -32438,40 +32468,51 @@ function number$2(x) {
 const ascendingBisect = bisector$1(ascending$2);
 const bisectRight = ascendingBisect.right;
 bisector$1(number$2).center;
-var e10 = Math.sqrt(50), e5 = Math.sqrt(10), e2 = Math.sqrt(2);
+const e10 = Math.sqrt(50), e5 = Math.sqrt(10), e2 = Math.sqrt(2);
+function tickSpec(start, stop, count2) {
+  const step = (stop - start) / Math.max(0, count2), power = Math.floor(Math.log10(step)), error2 = step / Math.pow(10, power), factor = error2 >= e10 ? 10 : error2 >= e5 ? 5 : error2 >= e2 ? 2 : 1;
+  let i1, i2, inc;
+  if (power < 0) {
+    inc = Math.pow(10, -power) / factor;
+    i1 = Math.round(start * inc);
+    i2 = Math.round(stop * inc);
+    if (i1 / inc < start) ++i1;
+    if (i2 / inc > stop) --i2;
+    inc = -inc;
+  } else {
+    inc = Math.pow(10, power) * factor;
+    i1 = Math.round(start / inc);
+    i2 = Math.round(stop / inc);
+    if (i1 * inc < start) ++i1;
+    if (i2 * inc > stop) --i2;
+  }
+  if (i2 < i1 && 0.5 <= count2 && count2 < 2) return tickSpec(start, stop, count2 * 2);
+  return [i1, i2, inc];
+}
 function ticks(start, stop, count2) {
-  var reverse, i2 = -1, n2, ticks2, step;
   stop = +stop, start = +start, count2 = +count2;
-  if (start === stop && count2 > 0) return [start];
-  if (reverse = stop < start) n2 = start, start = stop, stop = n2;
-  if ((step = tickIncrement(start, stop, count2)) === 0 || !isFinite(step)) return [];
-  if (step > 0) {
-    let r0 = Math.round(start / step), r1 = Math.round(stop / step);
-    if (r0 * step < start) ++r0;
-    if (r1 * step > stop) --r1;
-    ticks2 = new Array(n2 = r1 - r0 + 1);
-    while (++i2 < n2) ticks2[i2] = (r0 + i2) * step;
+  if (!(count2 > 0)) return [];
+  if (start === stop) return [start];
+  const reverse = stop < start, [i1, i2, inc] = reverse ? tickSpec(stop, start, count2) : tickSpec(start, stop, count2);
+  if (!(i2 >= i1)) return [];
+  const n2 = i2 - i1 + 1, ticks2 = new Array(n2);
+  if (reverse) {
+    if (inc < 0) for (let i3 = 0; i3 < n2; ++i3) ticks2[i3] = (i2 - i3) / -inc;
+    else for (let i3 = 0; i3 < n2; ++i3) ticks2[i3] = (i2 - i3) * inc;
   } else {
-    step = -step;
-    let r0 = Math.round(start * step), r1 = Math.round(stop * step);
-    if (r0 / step < start) ++r0;
-    if (r1 / step > stop) --r1;
-    ticks2 = new Array(n2 = r1 - r0 + 1);
-    while (++i2 < n2) ticks2[i2] = (r0 + i2) / step;
-  }
-  if (reverse) ticks2.reverse();
+    if (inc < 0) for (let i3 = 0; i3 < n2; ++i3) ticks2[i3] = (i1 + i3) / -inc;
+    else for (let i3 = 0; i3 < n2; ++i3) ticks2[i3] = (i1 + i3) * inc;
+  }
   return ticks2;
 }
 function tickIncrement(start, stop, count2) {
-  var step = (stop - start) / Math.max(0, count2), power = Math.floor(Math.log(step) / Math.LN10), error2 = step / Math.pow(10, power);
-  return power >= 0 ? (error2 >= e10 ? 10 : error2 >= e5 ? 5 : error2 >= e2 ? 2 : 1) * Math.pow(10, power) : -Math.pow(10, -power) / (error2 >= e10 ? 10 : error2 >= e5 ? 5 : error2 >= e2 ? 2 : 1);
+  stop = +stop, start = +start, count2 = +count2;
+  return tickSpec(start, stop, count2)[2];
 }
 function tickStep(start, stop, count2) {
-  var step0 = Math.abs(stop - start) / Math.max(0, count2), step1 = Math.pow(10, Math.floor(Math.log(step0) / Math.LN10)), error2 = step0 / step1;
-  if (error2 >= e10) step1 *= 10;
-  else if (error2 >= e5) step1 *= 5;
-  else if (error2 >= e2) step1 *= 2;
-  return stop < start ? -step1 : step1;
+  stop = +stop, start = +start, count2 = +count2;
+  const reverse = stop < start, inc = reverse ? tickIncrement(stop, start, count2) : tickIncrement(start, stop, count2);
+  return (reverse ? -1 : 1) * (inc < 0 ? 1 / -inc : inc);
 }
 function initRange(domain, range2) {
   switch (arguments.length) {
@@ -33553,6 +33594,9 @@ function ramp(color2, n2 = 256) {
   canvas.width = n2;
   canvas.height = 1;
   const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Could not get 2d context from canvas");
+  }
   for (let i2 = 0; i2 < n2; ++i2) {
     context.fillStyle = color2(i2 / (n2 - 1));
     context.fillRect(i2, 0, 1, 1);
@@ -33571,6 +33615,8 @@ function getXlinkHref(cmap) {
 }
 const useStyles$2 = makeStyles()(() => ({
   legend: {
+    position: "relative",
+    // Needed for absolute positioning of slider overlay
     top: "2px",
     right: "2px",
     fontSize: "10px !important",
@@ -33602,6 +33648,74 @@ const useStyles$2 = makeStyles()(() => ({
   },
   legendInvisible: {
     display: "none"
+  },
+  sliderContainer: {
+    position: "absolute",
+    // Position at the colormap location: top offset = titleHeight
+    top: "10px",
+    // titleHeight
+    left: "2px",
+    // Account for parent padding
+    width: "calc(100% - 4px)",
+    // Account for left and right padding
+    height: "8px",
+    // rectHeight
+    "&:hover $sliderThumb": {
+      opacity: 1
+    }
+  },
+  sliderRoot: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "8px",
+    // rectHeight
+    padding: 0,
+    "& .MuiSlider-rail": {
+      display: "none"
+    },
+    "& .MuiSlider-track": {
+      display: "none"
+    },
+    "& .MuiSlider-valueLabel": {
+      fontSize: "9px",
+      padding: "2px 4px",
+      backgroundColor: "rgb(0, 0, 0)",
+      borderRadius: "2px"
+    }
+  },
+  sliderThumb: {
+    width: "4px",
+    height: "12px",
+    borderRadius: "2px",
+    backgroundColor: "white",
+    border: "1px solid black",
+    opacity: 0,
+    transition: "opacity 0.15s ease-in-out",
+    "&:hover, &.Mui-focusVisible": {
+      boxShadow: "0 0 0 4px rgba(0, 0, 0, 0.16)",
+      opacity: 1
+    },
+    "&.Mui-active": {
+      boxShadow: "0 0 0 6px rgba(0, 0, 0, 0.16)",
+      opacity: 1
+    }
+  },
+  colormapImage: {
+    position: "absolute",
+    top: "2px",
+    height: "6px",
+    // rectHeight
+    pointerEvents: "none"
+  },
+  grayTrack: {
+    position: "absolute",
+    top: "2px",
+    height: "6px",
+    // rectHeight
+    backgroundColor: "rgba(128, 128, 128, 0.5)",
+    pointerEvents: "none"
   }
 }));
 const titleHeight = 10;
@@ -33611,21 +33725,23 @@ const rectMarginX = 2;
 function combineExtents(extents, featureAggregationStrategy) {
   if (Array.isArray(extents)) {
     if (Array.isArray(extents == null ? void 0 : extents[0])) {
+      const extentsArray = extents;
       if (featureAggregationStrategy === "first") {
-        return extents[0];
+        return extentsArray[0];
       }
       if (featureAggregationStrategy === "last") {
-        return extents.at(-1);
+        return extentsArray.at(-1) || null;
       }
       if (typeof featureAggregationStrategy === "number") {
         const i2 = featureAggregationStrategy;
-        return extents[i2];
+        return extentsArray[i2];
       }
       if (featureAggregationStrategy === "sum") {
-        return extents.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]);
+        return extentsArray.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]);
       }
       if (featureAggregationStrategy === "mean") {
-        return extents.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]).map((v) => v / extents.length);
+        const sum2 = extentsArray.reduce((a2, h) => [a2[0] + h[0], a2[1] + h[1]]);
+        return [sum2[0] / extentsArray.length, sum2[1] / extentsArray.length];
       }
     } else {
       return extents;
@@ -33639,7 +33755,7 @@ function combineMissings(missings, featureAggregationStrategy) {
       return missings[0];
     }
     if (featureAggregationStrategy === "last") {
-      return missings.at(-1);
+      return missings.at(-1) || null;
     }
     if (typeof featureAggregationStrategy === "number") {
       const i2 = featureAggregationStrategy;
@@ -33655,52 +33771,127 @@ function combineMissings(missings, featureAggregationStrategy) {
   return null;
 }
 function Legend(props) {
-  const { visible: visibleProp, positionRelative = false, highContrast = false, obsType, featureValueType, considerSelections = true, obsColorEncoding, featureSelection, featureLabelsMap, featureValueColormap, featureValueColormapRange, spatialChannelColor, spatialLayerColor, obsSetSelection, obsSetColor, featureAggregationStrategy, extent: extent2, missing, width: width2 = 100, height: height2 = 36, maxHeight: maxHeight2 = null, theme, showObsLabel = false, pointsVisible = true, contoursVisible = false, contoursFilled, contourPercentiles, contourThresholds } = props;
-  const svgRef = useRef();
+  const {
+    visible: visibleProp,
+    positionRelative = false,
+    highContrast = false,
+    obsType,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    featureType: _featureType = void 0,
+    // Unused but accepted for API compatibility
+    featureValueType,
+    considerSelections = true,
+    obsColorEncoding,
+    featureSelection,
+    featureLabelsMap,
+    featureValueColormap,
+    featureValueColormapRange,
+    setFeatureValueColormapRange,
+    spatialChannelColor,
+    spatialLayerColor,
+    obsSetSelection,
+    obsSetColor,
+    featureAggregationStrategy,
+    extent: extent2,
+    missing,
+    width: width2 = 100,
+    height: height2 = 36,
+    maxHeight: maxHeight2 = null,
+    theme,
+    showObsLabel = false,
+    pointsVisible = true,
+    contoursVisible = false,
+    contoursFilled,
+    contourPercentiles,
+    contourThresholds
+  } = props;
+  const svgRef = useRef(null);
   const { classes } = useStyles$2();
+  const [localRange, setLocalRange] = useState(featureValueColormapRange);
+  useEffect(() => {
+    setLocalRange(featureValueColormapRange);
+  }, [featureValueColormapRange]);
+  const debouncedSetRange = useMemo(() => setFeatureValueColormapRange ? debounce$1((value) => {
+    setFeatureValueColormapRange(value);
+  }, 5, { leading: false, trailing: true }) : null, [setFeatureValueColormapRange]);
+  useEffect(() => () => {
+    if (debouncedSetRange) {
+      debouncedSetRange.cancel();
+    }
+  }, [debouncedSetRange]);
+  const handleSliderChange = useCallback((_event, newValue) => {
+    const rangeValue = newValue;
+    setLocalRange(rangeValue);
+    if (debouncedSetRange) {
+      debouncedSetRange(rangeValue);
+    }
+  }, [debouncedSetRange]);
   const isDarkTheme = theme === "dark";
   const isStaticColor = obsColorEncoding === "spatialChannelColor" || obsColorEncoding === "spatialLayerColor";
   const isSetColor = obsColorEncoding === "cellSetSelection";
-  const layerColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme);
-  const channelColor = Array.isArray(spatialChannelColor) && spatialChannelColor.length === 3 ? spatialChannelColor : getDefaultColor(theme);
+  const layerColor = Array.isArray(spatialLayerColor) && spatialLayerColor.length === 3 ? spatialLayerColor : getDefaultColor(theme ?? "light");
+  const channelColor = Array.isArray(spatialChannelColor) && spatialChannelColor.length === 3 ? spatialChannelColor : getDefaultColor(theme ?? "light");
   const staticColor = obsColorEncoding === "spatialChannelColor" ? channelColor : layerColor;
-  const visible = visibleProp && (!considerSelections || obsColorEncoding === "geneSelection" && featureSelection && Array.isArray(featureSelection) && featureSelection.length >= 1 || isSetColor && (obsSetSelection == null ? void 0 : obsSetSelection.length) > 0 && (obsSetColor == null ? void 0 : obsSetColor.length) > 0 || isStaticColor);
+  const visible = visibleProp && (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && featureSelection && Array.isArray(featureSelection) && featureSelection.length >= 1 || isSetColor && ((obsSetSelection == null ? void 0 : obsSetSelection.length) ?? 0) > 0 && ((obsSetColor == null ? void 0 : obsSetColor.length) ?? 0) > 0 || isStaticColor);
   const levelZeroNames = useMemo(() => Array.from(new Set((obsSetSelection == null ? void 0 : obsSetSelection.map((setPath) => setPath[0])) || [])), [obsSetSelection]);
-  const dynamicHeight = isSetColor && obsSetSelection ? levelZeroNames.length * titleHeight + (obsSetSelection == null ? void 0 : obsSetSelection.length) * (rectHeight + rectMarginY) : height2 + (!pointsVisible && contoursVisible ? 25 : 0);
+  const dynamicHeight = isSetColor && obsSetSelection ? levelZeroNames.length * titleHeight + ((obsSetSelection == null ? void 0 : obsSetSelection.length) ?? 0) * (rectHeight + rectMarginY) : height2 + (!pointsVisible && contoursVisible ? 25 : 0);
   const availHeight = maxHeight2 !== null ? Math.max(0, maxHeight2 - 4) : Infinity;
   const needsScroll = Number.isFinite(availHeight) && dynamicHeight > availHeight + 1;
   useEffect(() => {
     const domElement = svgRef.current;
+    if (!domElement)
+      return;
     const foregroundColor = highContrast ? "black" : isDarkTheme ? "white" : "black";
     const svg = select(domElement);
     svg.selectAll("g").remove();
     svg.attr("width", width2).attr("height", dynamicHeight);
     const g2 = svg.append("g").attr("width", width2).attr("height", dynamicHeight);
-    if (!considerSelections || obsColorEncoding === "geneSelection") {
-      const [xMin, xMax] = combineExtents(extent2, featureAggregationStrategy) || [0, 1];
+    const showInteractiveSlider2 = setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
+    if (!considerSelections || ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "")) {
+      const combinedExtent = combineExtents(extent2 ?? null, featureAggregationStrategy ?? null) || [0, 1];
+      const [xMin, xMax] = combinedExtent;
       if (featureValueColormap && pointsVisible) {
-        const xlinkHref = getXlinkHref(featureValueColormap);
-        g2.append("image").attr("x", 0).attr("y", titleHeight).attr("width", width2).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref);
-        const [rMin, rMax] = featureValueColormapRange;
+        const xlinkHref2 = getXlinkHref(featureValueColormap);
+        const currentRange = showInteractiveSlider2 ? localRange : featureValueColormapRange;
+        const [rMin, rMax] = currentRange || [0, 1];
+        if (showInteractiveSlider2) ;
+        else if (setFeatureValueColormapRange) {
+          g2.append("image").attr("x", rMin * width2).attr("y", titleHeight).attr("width", (rMax - rMin) * width2).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref2);
+        } else {
+          g2.append("image").attr("x", 0).attr("y", titleHeight).attr("width", width2).attr("height", rectHeight).attr("preserveAspectRatio", "none").attr("href", xlinkHref2);
+        }
         const scaledDataExtent = [
           xMin + (xMax - xMin) * rMin,
           xMax - (xMax - xMin) * (1 - rMax)
         ];
-        const x = linear().domain(scaledDataExtent).range([0.5, width2 - 0.5]);
-        const axisTicks = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight})`).style("font-size", "10px").call(axisBottom(x).tickValues(scaledDataExtent));
-        axisTicks.selectAll("line,path").style("stroke", foregroundColor);
-        axisTicks.selectAll("text").style("fill", foregroundColor);
-        axisTicks.selectAll("text").attr("text-anchor", (d, i2) => i2 === 0 ? "start" : "end");
-      } else if (contoursVisible) {
+        let x;
+        if (setFeatureValueColormapRange || showInteractiveSlider2) {
+          x = linear().domain(scaledDataExtent).range([rMin * width2, rMax * width2]);
+        } else {
+          x = linear().domain(scaledDataExtent).range([0, width2]);
+        }
+        if (showInteractiveSlider2) {
+          const xGlobal = linear().domain([xMin, xMax]).range([0, width2 - 4]);
+          const axisTicks = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight})`).style("font-size", "10px").call(axisBottom(xGlobal).tickValues([xMin, xMax]));
+          axisTicks.selectAll("line,path").style("stroke", foregroundColor);
+          axisTicks.selectAll("text").style("fill", foregroundColor);
+          axisTicks.selectAll("text").attr("text-anchor", (_d, i2) => i2 === 0 ? "start" : "end");
+        } else {
+          const axisTicks = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight})`).style("font-size", "10px").call(axisBottom(x).tickValues(scaledDataExtent));
+          axisTicks.selectAll("line,path").style("stroke", foregroundColor);
+          axisTicks.selectAll("text").style("fill", foregroundColor);
+          axisTicks.selectAll("text").attr("text-anchor", (_d, i2) => i2 === 0 ? "start" : "end");
+        }
+      } else if (contoursVisible && contourPercentiles) {
         const tSize = 12;
         const xPercentile = linear().domain([0, 1]).range([tSize / 2, width2 - tSize / 2 - 2]);
-        const axisTicks = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight + 15})`).style("font-size", "9px").call(axisBottom(xPercentile).tickValues(contourPercentiles).tickFormat(format(".0%")).tickSizeOuter(0));
+        const axisTicks = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight + 15})`).style("font-size", "9px").call(axisBottom(xPercentile).tickValues(contourPercentiles).tickFormat((d) => format(".0%")(d)).tickSizeOuter(0));
         axisTicks.selectAll("line,path").style("stroke", foregroundColor);
         axisTicks.selectAll("text").style("fill", foregroundColor);
         const NEIGHBOR_THRESHOLD = 18;
-        const contourPercentages = contourPercentiles.map((x) => x * 100);
+        const contourPercentages = contourPercentiles.map((p) => p * 100);
         if ((contourPercentages == null ? void 0 : contourPercentages[1]) - (contourPercentages == null ? void 0 : contourPercentages[0]) <= NEIGHBOR_THRESHOLD || (contourPercentages == null ? void 0 : contourPercentages[2]) - (contourPercentages == null ? void 0 : contourPercentages[1]) <= NEIGHBOR_THRESHOLD) {
-          axisTicks.selectAll("text").attr("transform", (d, i2) => `translate(0,${i2 === 0 || i2 === contourPercentiles.length - 1 ? 0 : 10})`);
+          axisTicks.selectAll("text").attr("transform", (_d, i2) => `translate(0,${i2 === 0 || i2 === contourPercentiles.length - 1 ? 0 : 10})`);
         }
         const triangleGroupG = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight + 4})`);
         contourPercentiles.forEach((p, i2) => {
@@ -33710,14 +33901,14 @@ function Legend(props) {
         const thresholdGroupG = g2.append("g").attr("transform", `translate(0,${titleHeight + rectHeight})`);
         const thresholdFormatter = format(".0f");
         contourPercentiles.forEach((p, i2) => {
-          const contourThreshold = xMin + (xMax - xMin) * ((contourThresholds == null ? void 0 : contourThresholds[i2]) / 255);
+          const contourThreshold = xMin + (xMax - xMin) * (((contourThresholds == null ? void 0 : contourThresholds[i2]) ?? 0) / 255);
           const thresholdG = thresholdGroupG.append("g").attr("transform", `translate(${xPercentile(p)},0)`).style("font-size", "7px");
           thresholdG.append("text").text(thresholdFormatter(contourThreshold)).style("fill", foregroundColor).attr("text-anchor", "middle");
         });
       }
     }
     if (isStaticColor) {
-      g2.append("rect").attr("x", 0).attr("y", titleHeight).attr("width", width2).attr("height", rectHeight).attr("fill", `rgb(${staticColor[0]},${staticColor[1]},${staticColor[2]})`);
+      g2.append("rect").attr("x", 0).attr("y", titleHeight).attr("width", width2 - 4).attr("height", rectHeight).attr("fill", `rgb(${staticColor[0]},${staticColor[1]},${staticColor[2]})`);
     }
     if (isSetColor && obsSetSelection && obsSetColor) {
       const obsSetSelectionByLevelZero = {};
@@ -33734,9 +33925,9 @@ function Legend(props) {
         y += titleHeight;
         setPaths.forEach((setPath) => {
           var _a3;
-          const setColor2 = ((_a3 = obsSetColor == null ? void 0 : obsSetColor.find((d) => isEqual$1(d.path, setPath))) == null ? void 0 : _a3.color) || getDefaultColor(theme);
+          const setColor2 = ((_a3 = obsSetColor == null ? void 0 : obsSetColor.find((d) => isEqual$1(d.path, setPath))) == null ? void 0 : _a3.color) || getDefaultColor(theme ?? "light");
           g2.append("rect").attr("x", 0).attr("y", y).attr("width", rectHeight).attr("height", rectHeight).attr("fill", `rgb(${setColor2[0]},${setColor2[1]},${setColor2[2]})`);
-          g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", rectHeight + rectMarginX).attr("y", y).text(setPath.at(-1)).style("font-size", "9px").style("fill", foregroundColor);
+          g2.append("text").attr("text-anchor", "start").attr("dominant-baseline", "hanging").attr("x", rectHeight + rectMarginX).attr("y", y).text(setPath.at(-1) ?? "").style("font-size", "9px").style("fill", foregroundColor);
           y += rectHeight + rectMarginY;
         });
       });
@@ -33751,23 +33942,31 @@ function Legend(props) {
       const i2 = featureAggregationStrategy;
       featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw[i2];
     } else if (featureAggregationStrategy === "sum") {
-      featureSelectionLabelRawStr = "Sum of features";
+      if (Array.isArray(featureSelection) && featureSelection.length === 1) {
+        featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw[0];
+      } else {
+        featureSelectionLabelRawStr = "Sum of features";
+      }
     } else if (featureAggregationStrategy === "mean") {
-      featureSelectionLabelRawStr = "Mean of features";
+      if (Array.isArray(featureSelection) && featureSelection.length === 1) {
+        featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw[0];
+      } else {
+        featureSelectionLabelRawStr = "Mean of features";
+      }
     } else {
       featureSelectionLabelRawStr = featureSelectionLabelRaw == null ? void 0 : featureSelectionLabelRaw[0];
     }
-    const combinedMissing = combineMissings(missing, featureAggregationStrategy);
+    const combinedMissing = combineMissings(missing ?? null, featureAggregationStrategy ?? null);
     const featureSelectionLabel = combinedMissing ? `${featureSelectionLabelRawStr} (${Math.round(combinedMissing * 100)}% NaN)` : featureSelectionLabelRawStr;
-    const obsLabel = capitalize$2(obsType);
-    const featureLabel = considerSelections ? featureSelectionLabel || capitalize$2(featureValueType) : capitalize$2(featureValueType);
+    const obsLabel = capitalize$2(obsType ?? null);
+    const featureLabel = considerSelections ? featureSelectionLabel || capitalize$2(featureValueType ?? null) : capitalize$2(featureValueType ?? null);
     const mainLabel = showObsLabel ? obsLabel : featureLabel;
     const subLabel = showObsLabel ? featureLabel : null;
     const hasSubLabel = subLabel !== null;
     if (!isSetColor) {
-      g2.append("text").attr("text-anchor", hasSubLabel ? "start" : "end").attr("dominant-baseline", "hanging").attr("x", hasSubLabel ? 0 : width2).attr("y", 0).text(mainLabel).style("font-size", "10px").style("fill", foregroundColor);
+      g2.append("text").attr("text-anchor", hasSubLabel ? "start" : "end").attr("dominant-baseline", "hanging").attr("x", hasSubLabel ? 0 : width2 - 4).attr("y", 0).text(mainLabel ?? "").style("font-size", "10px").style("fill", foregroundColor);
       if (hasSubLabel) {
-        g2.append("text").attr("text-anchor", "end").attr("dominant-baseline", "hanging").attr("x", width2).attr("y", titleHeight).text(subLabel).style("font-size", "9px").style("fill", foregroundColor);
+        g2.append("text").attr("text-anchor", "end").attr("dominant-baseline", "hanging").attr("x", width2 - 5).attr("y", titleHeight + rectHeight).text(subLabel ?? "").style("font-size", "9px").style("fill", foregroundColor);
       }
     }
   }, [
@@ -33775,6 +33974,7 @@ function Legend(props) {
     height2,
     featureValueColormap,
     featureValueColormapRange,
+    localRange,
     considerSelections,
     obsType,
     obsColorEncoding,
@@ -33793,20 +33993,63 @@ function Legend(props) {
     contoursFilled,
     contoursVisible,
     pointsVisible,
-    featureAggregationStrategy
+    featureAggregationStrategy,
+    setFeatureValueColormapRange,
+    dynamicHeight,
+    highContrast,
+    isStaticColor,
+    missing,
+    showObsLabel,
+    staticColor
   ]);
-  return jsxRuntimeExports.jsx("div", { className: clsx$1(classes.legend, {
+  const showInteractiveSlider = setFeatureValueColormapRange && ["geneSelection", "geneExpression"].includes(obsColorEncoding ?? "") && pointsVisible && featureValueColormap;
+  const globalExtent = useMemo(() => {
+    const combined = combineExtents(extent2 ?? null, featureAggregationStrategy ?? null);
+    return combined || [0, 1];
+  }, [extent2, featureAggregationStrategy]);
+  const formatSliderValue = useCallback((value) => {
+    const [xMin, xMax] = globalExtent;
+    const dataValue = xMin + (xMax - xMin) * value;
+    const range2 = xMax - xMin;
+    if (range2 < 0.01) {
+      return dataValue.toExponential(2);
+    }
+    if (range2 < 1) {
+      return dataValue.toFixed(3);
+    }
+    if (range2 < 100) {
+      return dataValue.toFixed(1);
+    }
+    return Math.round(dataValue).toString();
+  }, [globalExtent]);
+  const xlinkHref = featureValueColormap ? getXlinkHref(featureValueColormap) : null;
+  const currentLocalRange = localRange || [0, 1];
+  return jsxRuntimeExports.jsxs("div", { className: clsx$1(classes.legend, {
     [classes.legendRelative]: positionRelative,
     [classes.legendAbsolute]: !positionRelative,
     [classes.legendHighContrast]: highContrast,
     [classes.legendLowContrast]: !highContrast,
     [classes.legendInvisible]: !visible
   }), style: {
-    ...needsScroll ? { maxHeight: `${Math.floor(availHeight)}px`, overflowY: "auto" } : { maxHeight: void 0, overflowY: "visible" }
-  }, children: jsxRuntimeExports.jsx("svg", { ref: svgRef, style: {
+    ...needsScroll ? { maxHeight: `${Math.floor(availHeight)}px`, overflowY: "auto" } : { maxHeight: void 0, overflowY: "visible" },
+    width: `${width2}px`
+  }, children: [jsxRuntimeExports.jsx("svg", { ref: svgRef, style: {
     width: `${width2}px`,
     height: `${dynamicHeight}px`
-  } }) });
+  } }), showInteractiveSlider && xlinkHref && jsxRuntimeExports.jsxs("div", { className: classes.sliderContainer, children: [currentLocalRange[0] > 0 && jsxRuntimeExports.jsx("div", { className: classes.grayTrack, style: {
+    left: 0,
+    width: `${currentLocalRange[0] * 100}%`
+  } }), currentLocalRange[1] < 1 && jsxRuntimeExports.jsx("div", { className: classes.grayTrack, style: {
+    left: `${currentLocalRange[1] * 100}%`,
+    width: `${(1 - currentLocalRange[1]) * 100}%`
+  } }), jsxRuntimeExports.jsx("img", { src: xlinkHref, alt: "Colormap gradient", className: classes.colormapImage, style: {
+    left: `${currentLocalRange[0] * 100}%`,
+    width: `${(currentLocalRange[1] - currentLocalRange[0]) * 100}%`
+  } }), jsxRuntimeExports.jsx(Slider, { className: classes.sliderRoot, value: currentLocalRange, onChange: handleSliderChange, min: 0, max: 1, step: 0.01, disableSwap: true, valueLabelDisplay: "auto", valueLabelFormat: formatSliderValue, "aria-label": "Colormap range", getAriaLabel: (index2) => index2 === 0 ? "Colormap minimum" : "Colormap maximum", getAriaValueText: (value) => formatSliderValue(value), slotProps: {
+    thumb: {
+      className: classes.sliderThumb
+    }
+  } })] })] });
 }
 makeStyles()(() => ({
   multiLegend: {
@@ -112664,7 +112907,7 @@ function clipExtent(x02, y02, x12, y12) {
     return clipStream;
   };
 }
-function extent$1() {
+function extent() {
   var x02 = 0, y02 = 0, x12 = 960, y12 = 500, cache2, cacheStream, clip2;
   return clip2 = {
     stream: function(stream) {
@@ -113998,7 +114241,7 @@ const d3Geo = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   geoBounds: bounds,
   geoCentroid: centroid,
   geoCircle: circle$1,
-  geoClipExtent: extent$1,
+  geoClipExtent: extent,
   geoConicConformal: conicConformal,
   geoConicConformalRaw: conicConformalRaw,
   geoConicEqualArea: conicEqualArea,
@@ -137829,22 +138072,22 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c) => registry$1.set(c, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-CYkXbM-r.js").then((m) => m.default));
-addDecoder(5, () => import("./lzw-DuQQG26m.js").then((m) => m.default));
+addDecoder([void 0, 1], () => import("./raw-DBEZoTXk.js").then((m) => m.default));
+addDecoder(5, () => import("./lzw-DIDyT49t.js").then((m) => m.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-C-aR7Yvm.js").then((m) => m.default));
-addDecoder([8, 32946], () => import("./deflate-D1zCiRQz.js").then((m) => m.default));
-addDecoder(32773, () => import("./packbits-CKkWkWM2.js").then((m) => m.default));
+addDecoder(7, () => import("./jpeg-BQH57nGA.js").then((m) => m.default));
+addDecoder([8, 32946], () => import("./deflate-C6kM_d3H.js").then((m) => m.default));
+addDecoder(32773, () => import("./packbits-x4mUZGOp.js").then((m) => m.default));
 addDecoder(
   34887,
-  () => import("./lerc-BDETtaHZ.js").then(async (m) => {
+  () => import("./lerc-Bcypgvlf.js").then(async (m) => {
     await m.zstd.init();
     return m;
   }).then((m) => m.default)
 );
-addDecoder(50001, () => import("./webimage-CK0o5if1.js").then((m) => m.default));
+addDecoder(50001, () => import("./webimage-DNvdSc-_.js").then((m) => m.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -147813,36 +148056,8 @@ void main() {
   DECKGL_FILTER_COLOR(gl_FragColor, geometry);
 }
 `;
-function extent(values2, valueof) {
-  let min;
-  let max2;
-  {
-    for (const value of values2) {
-      if (value != null) {
-        if (min === void 0) {
-          if (value >= value) min = max2 = value;
-        } else {
-          if (min > value) min = value;
-          if (max2 < value) max2 = value;
-        }
-      }
-    }
-  }
-  return [min, max2];
-}
-function max(values2, valueof) {
-  let max2;
-  {
-    for (const value of values2) {
-      if (value != null && (max2 < value || max2 === void 0 && value >= value)) {
-        max2 = value;
-      }
-    }
-  }
-  return max2;
-}
 function normalize(arr) {
-  const [min, max2] = extent(arr);
+  const [min, max2] = extent$1(arr);
   const ratio = 255 / (max2 - min);
   const data = new Uint8Array(arr.map((i2) => Math.floor((i2 - min) * ratio)));
   return data;
@@ -152870,6 +153085,7 @@ function HeatmapSubscriber(props) {
         obsSetSelection: cellSetSelection,
         featureValueColormap: geneExpressionColormap,
         featureValueColormapRange: geneExpressionColormapRange,
+        setFeatureValueColormapRange: setGeneExpressionColormapRange,
         extent: obsFeatureMatrixExtent
       }
     )