@vitessce/heatmap 3.2.0 → 3.2.2

package/dist/{deflate-6b41b0a6.js → deflate-54e8a983.js}

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

package/dist/{index-e4911a2c.js → index-99684608.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-import React__default, { Children, isValidElement, cloneElement, useRef, useMemo, useEffect, useLayoutEffect, createElement, forwardRef, useState, useImperativeHandle, useReducer, useCallback, useId } from "react";
+import React__default, { Children, isValidElement, cloneElement, useRef, useMemo, useEffect, useLayoutEffect, createElement, forwardRef, useState, useImperativeHandle, useReducer, useCallback, useContext } from "react";
 import { useVitessceContainer, useComponentHover, useComponentViewInfo, usePlotOptionsStyles, OptionsContainer, OptionSelect, useLoaders, useSetComponentHover, useSetComponentViewInfo, useCoordination, useDeckCanvasSize, useMultiObsLabels, useFeatureLabelsData, useObsFeatureMatrixData, useObsSetsData, useReady, useUrls, useUint8ObsFeatureMatrix, useGetObsInfo, useGetObsMembership, TitleInfo } from "@vitessce/vit-s";
 import * as ReactDOM from "react-dom";
 function _mergeNamespaces(n2, m) {
@@ -132521,16 +132521,16 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c) => registry$1.set(c, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-67eae85c.js").then((m) => m.default));
-addDecoder(5, () => import("./lzw-6f9c40ad.js").then((m) => m.default));
+addDecoder([void 0, 1], () => import("./raw-ed466def.js").then((m) => m.default));
+addDecoder(5, () => import("./lzw-dcec678f.js").then((m) => m.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-aa330cdf.js").then((m) => m.default));
-addDecoder([8, 32946], () => import("./deflate-6b41b0a6.js").then((m) => m.default));
-addDecoder(32773, () => import("./packbits-c64561b9.js").then((m) => m.default));
-addDecoder(34887, () => import("./lerc-e665fe72.js").then((m) => m.default));
-addDecoder(50001, () => import("./webimage-8d441440.js").then((m) => m.default));
+addDecoder(7, () => import("./jpeg-91201fe5.js").then((m) => m.default));
+addDecoder([8, 32946], () => import("./deflate-54e8a983.js").then((m) => m.default));
+addDecoder(32773, () => import("./packbits-1f0b4f8a.js").then((m) => m.default));
+addDecoder(34887, () => import("./lerc-ede29ce8.js").then((m) => m.default));
+addDecoder(50001, () => import("./webimage-892fe81d.js").then((m) => m.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset5 = 0;
@@ -141430,6 +141430,67 @@ function makeBoundingBox(viewState) {
     viewport.unproject([0, viewport.height])
   ];
 }
+const TARGETS = [1, 2, 3, 4, 5, 10, 20, 25, 50, 100, 200, 250, 500, 1e3];
+const MIN_TARGET = TARGETS[0];
+const MAX_TARGET = TARGETS[TARGETS.length - 1];
+const SI_PREFIXES = [
+  { symbol: "Y", exponent: 24 },
+  { symbol: "Z", exponent: 21 },
+  { symbol: "E", exponent: 18 },
+  { symbol: "P", exponent: 15 },
+  { symbol: "T", exponent: 12 },
+  { symbol: "G", exponent: 9 },
+  { symbol: "M", exponent: 6 },
+  { symbol: "k", exponent: 3 },
+  { symbol: "h", exponent: 2 },
+  { symbol: "da", exponent: 1 },
+  { symbol: "", exponent: 0 },
+  { symbol: "d", exponent: -1 },
+  { symbol: "c", exponent: -2 },
+  { symbol: "m", exponent: -3 },
+  { symbol: "µ", exponent: -6 },
+  { symbol: "n", exponent: -9 },
+  { symbol: "p", exponent: -12 },
+  { symbol: "f", exponent: -15 },
+  { symbol: "a", exponent: -18 },
+  { symbol: "z", exponent: -21 },
+  { symbol: "y", exponent: -24 }
+];
+function sizeToMeters(size, unit2) {
+  if (!unit2 || unit2 === "m") {
+    return size;
+  }
+  if (unit2.length > 1) {
+    let unitPrefix = unit2.substring(0, unit2.length - 1);
+    if (unitPrefix === "u") {
+      unitPrefix = "µ";
+    }
+    const unitObj = SI_PREFIXES.find((p) => p.symbol === unitPrefix);
+    if (unitObj) {
+      return size * 10 ** unitObj.exponent;
+    }
+  }
+  throw new Error("Received unknown unit");
+}
+function snapValue(value) {
+  let magnitude = 0;
+  if (value < MIN_TARGET || value > MAX_TARGET) {
+    magnitude = Math.floor(Math.log10(value));
+  }
+  let snappedUnit = SI_PREFIXES.find(
+    (p) => p.exponent % 3 === 0 && p.exponent <= magnitude
+  );
+  let adjustedValue = value / 10 ** snappedUnit.exponent;
+  if (adjustedValue > 500 && adjustedValue <= 1e3) {
+    snappedUnit = SI_PREFIXES.find(
+      (p) => p.exponent % 3 === 0 && p.exponent <= magnitude + 3
+    );
+    adjustedValue = value / 10 ** snappedUnit.exponent;
+  }
+  const targetNewUnits = TARGETS.find((t2) => t2 > adjustedValue);
+  const targetOrigUnits = targetNewUnits * 10 ** snappedUnit.exponent;
+  return [targetOrigUnits, targetNewUnits, snappedUnit.symbol];
+}
 const fs$1$1 = `#define SHADER_NAME xr-layer-fragment-shader
 
 precision highp float;
@@ -142197,26 +142258,27 @@ const OverviewLayer = class extends CompositeLayer {
 OverviewLayer.layerName = "OverviewLayer";
 OverviewLayer.defaultProps = defaultProps$3;
 function getPosition(boundingBox, position, length2) {
-  const viewLength = boundingBox[2][0] - boundingBox[0][0];
+  const viewWidth = boundingBox[2][0] - boundingBox[0][0];
+  const viewHeight = boundingBox[2][1] - boundingBox[0][1];
   switch (position) {
     case "bottom-right": {
-      const yCoord = boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = boundingBox[2][0] - viewLength * length2;
+      const yCoord = boundingBox[2][1] - viewHeight * length2;
+      const xLeftCoord = boundingBox[2][0] - viewWidth * length2;
       return [yCoord, xLeftCoord];
     }
     case "top-right": {
-      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = boundingBox[2][0] - viewLength * length2;
+      const yCoord = boundingBox[0][1] + viewHeight * length2;
+      const xLeftCoord = boundingBox[2][0] - viewWidth * length2;
       return [yCoord, xLeftCoord];
     }
     case "top-left": {
-      const yCoord = (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = viewLength * length2;
+      const yCoord = boundingBox[0][1] + viewHeight * length2;
+      const xLeftCoord = boundingBox[0][0] + viewWidth * length2;
       return [yCoord, xLeftCoord];
     }
     case "bottom-left": {
-      const yCoord = boundingBox[2][1] - (boundingBox[2][1] - boundingBox[0][1]) * length2;
-      const xLeftCoord = viewLength * length2;
+      const yCoord = boundingBox[2][1] - viewHeight * length2;
+      const xLeftCoord = boundingBox[0][0] + viewWidth * length2;
       return [yCoord, xLeftCoord];
     }
     default: {
@@ -142234,11 +142296,12 @@ const defaultProps$2 = {
   unit: { type: "string", value: "", compare: true },
   size: { type: "number", value: 1, compare: true },
   position: { type: "string", value: "bottom-right", compare: true },
-  length: { type: "number", value: 0.085, compare: true }
+  length: { type: "number", value: 0.085, compare: true },
+  snap: { type: "boolean", value: false, compare: true }
 };
 const ScaleBarLayer = class extends CompositeLayer {
   renderLayers() {
-    const { id, unit: unit2, size, position, viewState, length: length2 } = this.props;
+    const { id, unit: unit2, size, position, viewState, length: length2, snap } = this.props;
     const boundingBox = makeBoundingBox(viewState);
     const { zoom } = viewState;
     const viewLength = boundingBox[2][0] - boundingBox[0][0];
@@ -142247,15 +142310,27 @@ const ScaleBarLayer = class extends CompositeLayer {
       2 ** (-zoom + 1.5),
       (boundingBox[2][1] - boundingBox[0][1]) * 7e-3
     );
-    const numUnits = barLength * size;
+    let adjustedBarLength = barLength;
+    let displayNumber = (barLength * size).toPrecision(5);
+    let displayUnit = unit2;
+    if (snap) {
+      const meterSize = sizeToMeters(size, unit2);
+      const numUnits = barLength * meterSize;
+      const [snappedOrigUnits, snappedNewUnits, snappedUnitPrefix] = snapValue(numUnits);
+      adjustedBarLength = snappedOrigUnits / meterSize;
+      displayNumber = snappedNewUnits;
+      displayUnit = `${snappedUnitPrefix}m`;
+    }
     const [yCoord, xLeftCoord] = getPosition(boundingBox, position, length2);
+    const xRightCoord = xLeftCoord + barLength;
+    const isLeft = position.endsWith("-left");
     const lengthBar = new LineLayer({
       id: `scale-bar-length-${id}`,
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord, yCoord],
-          [xLeftCoord + barLength, yCoord]
+          [isLeft ? xLeftCoord : xRightCoord - adjustedBarLength, yCoord],
+          [isLeft ? xLeftCoord + adjustedBarLength : xRightCoord, yCoord]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -142268,8 +142343,14 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord, yCoord - barHeight],
-          [xLeftCoord, yCoord + barHeight]
+          [
+            isLeft ? xLeftCoord : xRightCoord - adjustedBarLength,
+            yCoord - barHeight
+          ],
+          [
+            isLeft ? xLeftCoord : xRightCoord - adjustedBarLength,
+            yCoord + barHeight
+          ]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -142282,8 +142363,14 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         [
-          [xLeftCoord + barLength, yCoord - barHeight],
-          [xLeftCoord + barLength, yCoord + barHeight]
+          [
+            isLeft ? xLeftCoord + adjustedBarLength : xRightCoord,
+            yCoord - barHeight
+          ],
+          [
+            isLeft ? xLeftCoord + adjustedBarLength : xRightCoord,
+            yCoord + barHeight
+          ]
         ]
       ],
       getSourcePosition: (d) => d[0],
@@ -142296,8 +142383,11 @@ const ScaleBarLayer = class extends CompositeLayer {
       coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
       data: [
         {
-          text: numUnits.toPrecision(5) + unit2,
-          position: [xLeftCoord + barLength * 0.5, yCoord + barHeight * 4]
+          text: `${displayNumber}${displayUnit}`,
+          position: [
+            isLeft ? xLeftCoord + barLength * 0.5 : xRightCoord - barLength * 0.5,
+            yCoord + barHeight * 4
+          ]
         }
       ],
       getColor: [220, 220, 220, 255],
@@ -142306,7 +142396,7 @@ const ScaleBarLayer = class extends CompositeLayer {
       sizeUnits: "meters",
       sizeScale: 2 ** -zoom,
       characterSet: [
-        ...unit2.split(""),
+        ...displayUnit.split(""),
         ...range(10).map((i2) => String(i2)),
         ".",
         "e",
@@ -144839,6 +144929,132 @@ function HeatmapTooltipSubscriber(props2) {
     }
   ) : null;
 }
+const $b5e257d569688ac6$var$defaultContext = {
+  prefix: String(Math.round(Math.random() * 1e10)),
+  current: 0
+};
+const $b5e257d569688ac6$var$SSRContext = /* @__PURE__ */ React__default.createContext($b5e257d569688ac6$var$defaultContext);
+const $b5e257d569688ac6$var$IsSSRContext = /* @__PURE__ */ React__default.createContext(false);
+let $b5e257d569688ac6$var$canUseDOM = Boolean(typeof window !== "undefined" && window.document && window.document.createElement);
+let $b5e257d569688ac6$var$componentIds = /* @__PURE__ */ new WeakMap();
+function $b5e257d569688ac6$var$useCounter(isDisabled = false) {
+  let ctx = useContext($b5e257d569688ac6$var$SSRContext);
+  let ref = useRef(null);
+  if (ref.current === null && !isDisabled) {
+    var _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner;
+    let currentOwner = (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = React__default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED === void 0 ? void 0 : (_React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner = _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner) === null || _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner === void 0 ? void 0 : _React___SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED_ReactCurrentOwner.current;
+    if (currentOwner) {
+      let prevComponentValue = $b5e257d569688ac6$var$componentIds.get(currentOwner);
+      if (prevComponentValue == null)
+        $b5e257d569688ac6$var$componentIds.set(currentOwner, {
+          id: ctx.current,
+          state: currentOwner.memoizedState
+        });
+      else if (currentOwner.memoizedState !== prevComponentValue.state) {
+        ctx.current = prevComponentValue.id;
+        $b5e257d569688ac6$var$componentIds.delete(currentOwner);
+      }
+    }
+    ref.current = ++ctx.current;
+  }
+  return ref.current;
+}
+function $b5e257d569688ac6$var$useLegacySSRSafeId(defaultId) {
+  let ctx = useContext($b5e257d569688ac6$var$SSRContext);
+  if (ctx === $b5e257d569688ac6$var$defaultContext && !$b5e257d569688ac6$var$canUseDOM)
+    console.warn("When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.");
+  let counter2 = $b5e257d569688ac6$var$useCounter(!!defaultId);
+  let prefix2 = ctx === $b5e257d569688ac6$var$defaultContext && false ? "react-aria" : `react-aria${ctx.prefix}`;
+  return defaultId || `${prefix2}-${counter2}`;
+}
+function $b5e257d569688ac6$var$useModernSSRSafeId(defaultId) {
+  let id = React__default.useId();
+  let [didSSR] = useState($b5e257d569688ac6$export$535bd6ca7f90a273());
+  let prefix2 = didSSR || false ? "react-aria" : `react-aria${$b5e257d569688ac6$var$defaultContext.prefix}`;
+  return defaultId || `${prefix2}-${id}`;
+}
+const $b5e257d569688ac6$export$619500959fc48b26 = typeof React__default["useId"] === "function" ? $b5e257d569688ac6$var$useModernSSRSafeId : $b5e257d569688ac6$var$useLegacySSRSafeId;
+function $b5e257d569688ac6$var$getSnapshot() {
+  return false;
+}
+function $b5e257d569688ac6$var$getServerSnapshot() {
+  return true;
+}
+function $b5e257d569688ac6$var$subscribe(onStoreChange) {
+  return () => {
+  };
+}
+function $b5e257d569688ac6$export$535bd6ca7f90a273() {
+  if (typeof React__default["useSyncExternalStore"] === "function")
+    return React__default["useSyncExternalStore"]($b5e257d569688ac6$var$subscribe, $b5e257d569688ac6$var$getSnapshot, $b5e257d569688ac6$var$getServerSnapshot);
+  return useContext($b5e257d569688ac6$var$IsSSRContext);
+}
+const $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document !== "undefined" ? React__default.useLayoutEffect : () => {
+};
+let $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
+function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
+  let [value, setValue] = useState(defaultId);
+  let nextId = useRef(null);
+  let res = $b5e257d569688ac6$export$619500959fc48b26(value);
+  let updateValue = useCallback((val) => {
+    nextId.current = val;
+  }, []);
+  $bdb11010cef70236$var$idsUpdaterMap.set(res, updateValue);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    let r2 = res;
+    return () => {
+      $bdb11010cef70236$var$idsUpdaterMap.delete(r2);
+    };
+  }, [
+    res
+  ]);
+  useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+  return res;
+}
+let $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
+let $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window === "undefined")
+    return;
+  let onTransitionStart = (e3) => {
+    let transitions2 = $bbed8b41f857bcc0$var$transitionsByElement.get(e3.target);
+    if (!transitions2) {
+      transitions2 = /* @__PURE__ */ new Set();
+      $bbed8b41f857bcc0$var$transitionsByElement.set(e3.target, transitions2);
+      e3.target.addEventListener("transitioncancel", onTransitionEnd);
+    }
+    transitions2.add(e3.propertyName);
+  };
+  let onTransitionEnd = (e3) => {
+    let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e3.target);
+    if (!properties)
+      return;
+    properties.delete(e3.propertyName);
+    if (properties.size === 0) {
+      e3.target.removeEventListener("transitioncancel", onTransitionEnd);
+      $bbed8b41f857bcc0$var$transitionsByElement.delete(e3.target);
+    }
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
+        cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart);
+  document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $bbed8b41f857bcc0$var$setupGlobalEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
 function HeatmapOptions(props2) {
   const {
     geneExpressionColormap,
@@ -144849,7 +145065,7 @@ function HeatmapOptions(props2) {
     setTooltipsVisible
   } = props2;
   const classes = usePlotOptionsStyles();
-  const heatmapOptionsId = useId();
+  const heatmapOptionsId = $bdb11010cef70236$export$f680877a34711e37();
   function handleGeneExpressionColormapChange(event) {
     setGeneExpressionColormap(event.target.value);
   }

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a, H } from "./index-e4911a2c.js";
+import { a, H } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{jpeg-aa330cdf.js → jpeg-91201fe5.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e4911a2c.js";
+import { B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lerc-e665fe72.js → lerc-ede29ce8.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-e4911a2c.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{lzw-6f9c40ad.js → lzw-dcec678f.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e4911a2c.js";
+import { B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{packbits-c64561b9.js → packbits-1f0b4f8a.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e4911a2c.js";
+import { B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{raw-67eae85c.js → raw-ed466def.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e4911a2c.js";
+import { B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist/{webimage-8d441440.js → webimage-892fe81d.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-e4911a2c.js";
+import { B as BaseDecoder } from "./index-99684608.js";
 import "react";
 import "@vitessce/vit-s";
 import "react-dom";

package/dist-tsc/HeatmapOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeatmapOptions.d.ts","sourceRoot":"","sources":["../src/HeatmapOptions.js"],"names":[],"mappings":"AAMA,gEAsGC"}
+{"version":3,"file":"HeatmapOptions.d.ts","sourceRoot":"","sources":["../src/HeatmapOptions.js"],"names":[],"mappings":"AAOA,gEAsGC"}

package/dist-tsc/HeatmapOptions.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback, useId } from 'react';
+import React, { useCallback } from 'react';
+import { useId } from 'react-aria';
 import { debounce } from 'lodash-es';
 import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/heatmap",
-  "version": "3.2.0",
+  "version": "3.2.2",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -19,14 +19,15 @@
     "@material-ui/core": "~4.12.3",
     "lodash-es": "^4.17.21",
     "uuid": "^9.0.0",
-    "@vitessce/constants-internal": "3.2.0",
-    "@vitessce/gl": "3.2.0",
-    "@vitessce/legend": "3.2.0",
-    "@vitessce/sets-utils": "3.2.0",
-    "@vitessce/tooltip": "3.2.0",
-    "@vitessce/utils": "3.2.0",
-    "@vitessce/vit-s": "3.2.0",
-    "@vitessce/workers": "3.2.0"
+    "react-aria": "^3.28.0",
+    "@vitessce/constants-internal": "3.2.2",
+    "@vitessce/gl": "3.2.2",
+    "@vitessce/legend": "3.2.2",
+    "@vitessce/sets-utils": "3.2.2",
+    "@vitessce/tooltip": "3.2.2",
+    "@vitessce/utils": "3.2.2",
+    "@vitessce/vit-s": "3.2.2",
+    "@vitessce/workers": "3.2.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.4",

package/src/HeatmapOptions.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useId } from 'react';
+import React, { useCallback } from 'react';
+import { useId } from 'react-aria';
 import { debounce } from 'lodash-es';
 import { Checkbox, Slider, TableCell, TableRow } from '@material-ui/core';
 import { usePlotOptionsStyles, OptionsContainer, OptionSelect } from '@vitessce/vit-s';