@vitessce/scatterplot-embedding 3.8.8 → 3.8.10

package/dist/{deflate-Dr6bxD0w.js → deflate-DV84laLg.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 class DeflateDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return inflate_1(new Uint8Array(buffer)).buffer;

package/dist/{index-DXCCF6LM.js → index-BgrJUaQb.js}

@@ -3098,6 +3098,59 @@ const PALETTE = [
   [136, 34, 85],
   [170, 68, 153]
 ];
+function aggregateFeatureArrays(arrays, strategy) {
+  if (!arrays || arrays.length === 0)
+    return null;
+  let targetArray;
+  if (strategy === "first" || typeof strategy === "number" && strategy === 0) {
+    targetArray = arrays[0];
+  } else if (strategy === "last") {
+    targetArray = arrays[arrays.length - 1];
+  } else if (typeof strategy === "number") {
+    if (strategy >= 0 && strategy < arrays.length) {
+      targetArray = arrays[strategy];
+    } else {
+      throw new Error(`Array index out of bounds: ${strategy}`);
+    }
+  }
+  if (targetArray) {
+    return targetArray;
+  }
+  const numArrays = arrays.length;
+  const firstArrayLength = arrays[0].length;
+  if (arrays.some((arr) => arr.length !== firstArrayLength)) {
+    throw new Error("All arrays must have the same length for aggregation.");
+  }
+  if (strategy === "sum" || strategy === "mean") {
+    const resultArray = new Float64Array(firstArrayLength);
+    for (let i2 = 0; i2 < numArrays; i2++) {
+      const arr = arrays[i2];
+      for (let j = 0; j < firstArrayLength; j++) {
+        resultArray[j] += arr[j];
+      }
+    }
+    if (strategy === "mean") {
+      for (let i2 = 0; i2 < firstArrayLength; i2++) {
+        resultArray[i2] /= numArrays;
+      }
+    }
+    return resultArray;
+  }
+  if (strategy === "difference") {
+    if (numArrays !== 2) {
+      console.warn("Difference strategy requires exactly 2 arrays.");
+      return arrays[0];
+    }
+    const arr0 = arrays[0];
+    const arr1 = arrays[1];
+    const resultArray = new Float64Array(firstArrayLength);
+    for (let i2 = 0; i2 < firstArrayLength; i2++) {
+      resultArray[i2] = arr0[i2] - arr1[i2];
+    }
+    return resultArray;
+  }
+  throw new Error(`Unknown aggregation strategy: ${strategy}`);
+}
 var util;
 (function(util2) {
   util2.assertEqual = (val) => val;
@@ -123348,22 +123401,22 @@ function addDecoder(cases, importFn) {
   }
   cases.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-CBdLq0ga.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-Dbo7OpaS.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-BJDJq5QK.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw-BwAlpbiv.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-UKzKGs1t.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-Dr6bxD0w.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-0X-GrQId.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-V5Wg0DTH.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-DV84laLg.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-BzaxDQbT.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-D62tGpqi.js").then(async (m2) => {
+  () => import("./lerc-LFwYjack.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-C2vUudNG.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-6o_3zIHO.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -150440,8 +150493,14 @@ function forceCollideRects() {
   };
   return force;
 }
-function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width2, height2) {
-  const pointSize = 5e-4;
+const BASE_POINT_SIZE = 5;
+const LARGE_DATASET_CELL_COUNT = 1e4;
+const SMALL_DATASET_CELL_COUNT = 100;
+function getInitialPointSize(numCells = LARGE_DATASET_CELL_COUNT) {
+  return BASE_POINT_SIZE / clamp$4(numCells, SMALL_DATASET_CELL_COUNT, LARGE_DATASET_CELL_COUNT);
+}
+function getPointSizeDevicePixels(devicePixelRatio, zoom, xRange, yRange, width2, height2, numCells) {
+  const pointSize = getInitialPointSize(numCells);
   const pointScreenSizeMax = 10;
   const pointScreenSizeMin = 1 / devicePixelRatio;
   const scaleFactor = 2 ** zoom;
@@ -151999,40 +152058,51 @@ function number$2(x) {
 const ascendingBisect = bisector(ascending);
 const bisectRight = ascendingBisect.right;
 bisector(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) {
@@ -153114,6 +153184,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);
@@ -153132,6 +153205,8 @@ function getXlinkHref(cmap) {
 }
 const useStyles = makeStyles()(() => ({
   legend: {
+    position: "relative",
+    // Needed for absolute positioning of slider overlay
     top: "2px",
     right: "2px",
     fontSize: "10px !important",
@@ -153163,6 +153238,74 @@ const useStyles = 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;
@@ -153172,21 +153315,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;
@@ -153200,7 +153345,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;
@@ -153216,52 +153361,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();
+  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) => {
@@ -153271,7 +153491,7 @@ 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");
         });
@@ -153295,9 +153515,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;
         });
       });
@@ -153318,17 +153538,17 @@ function Legend(props) {
     } 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).attr("y", titleHeight + rectHeight).text(subLabel ?? "").style("font-size", "9px").style("fill", foregroundColor);
       }
     }
   }, [
@@ -153336,6 +153556,7 @@ function Legend(props) {
     height2,
     featureValueColormap,
     featureValueColormapRange,
+    localRange,
     considerSelections,
     obsType,
     obsColorEncoding,
@@ -153354,20 +153575,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: {
@@ -153715,7 +153979,8 @@ function EmbeddingScatterplotSubscriber(props) {
         xRange,
         yRange,
         width2,
-        height2
+        height2,
+        numCells
       );
       setDynamicCellRadius(pointSizeDevicePixels);
       const nextCellOpacityScale = getPointOpacity(
@@ -153768,11 +154033,18 @@ function EmbeddingScatterplotSubscriber(props) {
   const getCellIsSelected = useCallback((object2, { index: index2 }) => (cellSelectionSet || /* @__PURE__ */ new Set([])).has(obsEmbeddingIndex[index2]) ? 1 : 0, [cellSelectionSet, obsEmbeddingIndex]);
   const cellRadius = cellRadiusMode === "manual" ? cellRadiusFixed : dynamicCellRadius;
   const cellOpacity = cellOpacityMode === "manual" ? cellOpacityFixed : dynamicCellOpacity;
+  const aggregatedExpressionData = useMemo(() => {
+    if (featureAggregationStrategyToUse != null && expressionData && expressionData.length > 1) {
+      const aggregated = aggregateFeatureArrays(expressionData, featureAggregationStrategyToUse);
+      return [aggregated];
+    }
+    return expressionData;
+  }, [expressionData, featureAggregationStrategyToUse]);
   const {
     normData: uint8ExpressionData,
     extents: expressionExtents,
     missing: expressionMissing
-  } = useUint8FeatureSelection(expressionData);
+  } = useUint8FeatureSelection(aggregatedExpressionData);
   const getExpressionValue = useExpressionValueGetter({
     instanceObsIndex: obsEmbeddingIndex,
     matrixObsIndex,
@@ -154015,6 +154287,7 @@ function EmbeddingScatterplotSubscriber(props) {
         featureLabelsMap,
         featureValueColormap: geneExpressionColormap,
         featureValueColormapRange: geneExpressionColormapRange,
+        setFeatureValueColormapRange: setGeneExpressionColormapRange,
         obsSetSelection: cellSetSelection,
         extent: expressionExtents,
         missing: expressionMissing,

package/dist/index.js

@@ -1,4 +1,4 @@
-import { D, E } from "./index-DXCCF6LM.js";
+import { D, E } from "./index-BgrJUaQb.js";
 export {
   D as DualEmbeddingScatterplotSubscriber,
   E as EmbeddingScatterplotSubscriber

package/dist/{jpeg-UKzKGs1t.js → jpeg-V5Wg0DTH.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 const dctZigZag = new Int32Array([
   0,
   1,

package/dist/{lerc-D62tGpqi.js → lerc-LFwYjack.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-SxljTded.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder } from "./index-BgrJUaQb.js";
 const LercParameters = {
   AddCompression: 1
 };

package/dist/{lzw-Dbo7OpaS.js → lzw-BwAlpbiv.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;
 const EOI_CODE = 257;

package/dist/{packbits-0X-GrQId.js → packbits-BzaxDQbT.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     const dataView = new DataView(buffer);

package/dist/{raw-CBdLq0ga.js → raw-BJDJq5QK.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {
     return buffer;

package/dist/{webimage-C2vUudNG.js → webimage-6o_3zIHO.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-DXCCF6LM.js";
+import { B as BaseDecoder } from "./index-BgrJUaQb.js";
 class WebImageDecoder extends BaseDecoder {
   constructor() {
     super();

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

@@ -1 +1 @@
-{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA6CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eAimBA"}
+{"version":3,"file":"EmbeddingScatterplotSubscriber.d.ts","sourceRoot":"","sources":["../src/EmbeddingScatterplotSubscriber.js"],"names":[],"mappings":"AA6CA;;;;;;;;;;;;GAYG;AACH,sDAVG;IAAsB,IAAI,EAAlB,MAAM;IACQ,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;IAEU,mBAAmB;IAErB,KAAK,EAAnB,MAAM;IACQ,kBAAkB,EAAhC,MAAM;CAEhB,eA6mBA"}

package/dist-tsc/EmbeddingScatterplotSubscriber.js

@@ -5,7 +5,7 @@ import { isEqual } from 'lodash-es';
 import { circle } from '@turf/circle';
 import { TitleInfo, useReady, useUrls, useDeckCanvasSize, useUint8FeatureSelection, useExpressionValueGetter, useGetObsInfo, useObsEmbeddingData, useObsSetsData, useFeatureSelection, useObsFeatureMatrixIndices, useFeatureLabelsData, useMultiObsLabels, useSampleSetsData, useSampleEdgesData, useCoordination, useLoaders, useSetComponentHover, useSetComponentViewInfo, useInitialCoordination, useExpandedFeatureLabelsMap, useCoordinationScopes, } from '@vitessce/vit-s';
 import { setObsSelection, mergeObsSets, getCellSetPolygons, getCellColors, stratifyArrays, } from '@vitessce/sets-utils';
-import { pluralize as plur, commaNumber } from '@vitessce/utils';
+import { pluralize as plur, commaNumber, aggregateFeatureArrays } from '@vitessce/utils';
 import { Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions, getPointSizeDevicePixels, getPointOpacity, } from '@vitessce/scatterplot';
 import { Legend } from '@vitessce/legend';
 import { ViewType, COMPONENT_COORDINATION_TYPES, ViewHelpMapping } from '@vitessce/constants-internal';
@@ -148,7 +148,7 @@ export function EmbeddingScatterplotSubscriber(props) {
     // extents of the cell coordinates on the x/y axes.
     useEffect(() => {
         if (xRange && yRange && width && height) {
-            const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom, xRange, yRange, width, height);
+            const pointSizeDevicePixels = getPointSizeDevicePixels(window.devicePixelRatio, zoom, xRange, yRange, width, height, numCells);
             setDynamicCellRadius(pointSizeDevicePixels);
             const nextCellOpacityScale = getPointOpacity(zoom, xRange, yRange, width, height, numCells, averageFillDensity);
             setDynamicCellOpacity(nextCellOpacityScale);
@@ -182,7 +182,17 @@ export function EmbeddingScatterplotSubscriber(props) {
     const getCellIsSelected = useCallback((object, { index }) => ((cellSelectionSet || new Set([])).has(obsEmbeddingIndex[index]) ? 1.0 : 0.0), [cellSelectionSet, obsEmbeddingIndex]);
     const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
     const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
-    const { normData: uint8ExpressionData, extents: expressionExtents, missing: expressionMissing, } = useUint8FeatureSelection(expressionData);
+    // Compute aggregated expression data if featureAggregationStrategyToUse is not null
+    // and we have multiple features to aggregate.
+    const aggregatedExpressionData = useMemo(() => {
+        if (featureAggregationStrategyToUse != null && expressionData && expressionData.length > 1) {
+            const aggregated = aggregateFeatureArrays(expressionData, featureAggregationStrategyToUse);
+            // Return as array with single element to match expressionData structure
+            return [aggregated];
+        }
+        return expressionData;
+    }, [expressionData, featureAggregationStrategyToUse]);
+    const { normData: uint8ExpressionData, extents: expressionExtents, missing: expressionMissing, } = useUint8FeatureSelection(aggregatedExpressionData);
     // Set up a getter function for gene expression values, to be used
     // by the DeckGL layer to obtain values for instanced attributes.
     const getExpressionValue = useExpressionValueGetter({
@@ -316,7 +326,7 @@ export function EmbeddingScatterplotSubscriber(props) {
                 }, updateViewInfo: setComponentViewInfo, getExpressionValue: getExpressionValue, getCellIsSelected: getCellIsSelected, obsSetSelection: cellSetSelection, sampleSetSelection: sampleSetSelection, 
                 // InternMap data structures where keys are
                 // obsSet -> sampleSet -> arrayKey -> [].
-                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, circleInfo: circleInfo, featureSelection: geneSelection }), tooltipsVisible && width && height ? (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })) : null, _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents, missing: expressionMissing, 
+                stratifiedData: stratifiedData, obsSetColor: cellSetColor, sampleSetColor: sampleSetColor, contourThresholds: contourThresholds, contourColorEncoding: contourColorEncoding, contourColor: contourColor, contoursFilled: embeddingContoursFilled, embeddingPointsVisible: embeddingPointsVisible, embeddingContoursVisible: embeddingContoursVisible, circleInfo: circleInfo, featureSelection: geneSelection }), tooltipsVisible && width && height ? (_jsx(ScatterplotTooltipSubscriber, { parentUuid: uuid, obsHighlight: cellHighlight, width: width, height: height, getObsInfo: getObsInfo, featureType: featureType, featureLabelsMap: featureLabelsMap })) : null, _jsx(Legend, { visible: true, theme: theme, featureType: featureType, featureValueType: featureValueType, obsColorEncoding: cellColorEncoding, featureSelection: geneSelection, featureLabelsMap: featureLabelsMap, featureValueColormap: geneExpressionColormap, featureValueColormapRange: geneExpressionColormapRange, setFeatureValueColormapRange: setGeneExpressionColormapRange, obsSetSelection: cellSetSelection, extent: expressionExtents, missing: expressionMissing, 
                 // Contour percentile legend
                 pointsVisible: embeddingPointsVisible, contoursVisible: embeddingContoursVisible, contoursFilled: embeddingContoursFilled, contourPercentiles: contourPercentiles || DEFAULT_CONTOUR_PERCENTILES, contourThresholds: contourThresholds, featureAggregationStrategy: featureAggregationStrategyToUse })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/scatterplot-embedding",
-  "version": "3.8.8",
+  "version": "3.8.10",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -20,13 +20,13 @@
     "lodash-es": "^4.17.21",
     "react-aria": "^3.28.0",
     "@turf/circle": "^7.2.0",
-    "@vitessce/styles": "3.8.8",
-    "@vitessce/constants-internal": "3.8.8",
-    "@vitessce/legend": "3.8.8",
-    "@vitessce/sets-utils": "3.8.8",
-    "@vitessce/utils": "3.8.8",
-    "@vitessce/vit-s": "3.8.8",
-    "@vitessce/scatterplot": "3.8.8"
+    "@vitessce/styles": "3.8.10",
+    "@vitessce/constants-internal": "3.8.10",
+    "@vitessce/legend": "3.8.10",
+    "@vitessce/scatterplot": "3.8.10",
+    "@vitessce/sets-utils": "3.8.10",
+    "@vitessce/utils": "3.8.10",
+    "@vitessce/vit-s": "3.8.10"
   },
   "devDependencies": {
     "react": "18.3.1",

package/src/EmbeddingScatterplotSubscriber.js

@@ -31,7 +31,7 @@ import {
   setObsSelection, mergeObsSets, getCellSetPolygons, getCellColors,
   stratifyArrays,
 } from '@vitessce/sets-utils';
-import { pluralize as plur, commaNumber } from '@vitessce/utils';
+import { pluralize as plur, commaNumber, aggregateFeatureArrays } from '@vitessce/utils';
 import {
   Scatterplot, ScatterplotTooltipSubscriber, ScatterplotOptions,
   getPointSizeDevicePixels,
@@ -335,7 +335,7 @@ export function EmbeddingScatterplotSubscriber(props) {
   useEffect(() => {
     if (xRange && yRange && width && height) {
       const pointSizeDevicePixels = getPointSizeDevicePixels(
-        window.devicePixelRatio, zoom, xRange, yRange, width, height,
+        window.devicePixelRatio, zoom, xRange, yRange, width, height, numCells,
       );
       setDynamicCellRadius(pointSizeDevicePixels);
 
@@ -365,7 +365,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         setOriginalViewState({ target: [initialTargetX, initialTargetY, 0], zoom: initialZoom });
       }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [xRange, yRange, xExtent, yExtent, numCells,
     width, height, initialZoom, zoom, initialTargetX, initialTargetY, averageFillDensity]);
 
@@ -381,11 +381,22 @@ export function EmbeddingScatterplotSubscriber(props) {
   const cellRadius = (cellRadiusMode === 'manual' ? cellRadiusFixed : dynamicCellRadius);
   const cellOpacity = (cellOpacityMode === 'manual' ? cellOpacityFixed : dynamicCellOpacity);
 
+  // Compute aggregated expression data if featureAggregationStrategyToUse is not null
+  // and we have multiple features to aggregate.
+  const aggregatedExpressionData = useMemo(() => {
+    if (featureAggregationStrategyToUse != null && expressionData && expressionData.length > 1) {
+      const aggregated = aggregateFeatureArrays(expressionData, featureAggregationStrategyToUse);
+      // Return as array with single element to match expressionData structure
+      return [aggregated];
+    }
+    return expressionData;
+  }, [expressionData, featureAggregationStrategyToUse]);
+
   const {
     normData: uint8ExpressionData,
     extents: expressionExtents,
     missing: expressionMissing,
-  } = useUint8FeatureSelection(expressionData);
+  } = useUint8FeatureSelection(aggregatedExpressionData);
 
   // Set up a getter function for gene expression values, to be used
   // by the DeckGL layer to obtain values for instanced attributes.
@@ -651,6 +662,7 @@ export function EmbeddingScatterplotSubscriber(props) {
         featureLabelsMap={featureLabelsMap}
         featureValueColormap={geneExpressionColormap}
         featureValueColormapRange={geneExpressionColormapRange}
+        setFeatureValueColormapRange={setGeneExpressionColormapRange}
         obsSetSelection={cellSetSelection}
         extent={expressionExtents}
         missing={expressionMissing}