@vitessce/gl 3.3.1 → 3.3.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { f as distEs6 } from "./index-0d084e33.js";
-import { o, n, A, r, q, p, i, j, C, l, D, G, e, H, c, M, k, m, d, P, S, h, T, t, b, s, v } from "./index-0d084e33.js";
+import { f as distEs6 } from "./index-901cd86d.js";
+import { o, n, A, r, q, p, i, j, C, l, D, G, e, H, c, M, k, m, d, P, S, h, T, t, b, s, v } from "./index-901cd86d.js";
 import "react";
 const SELECTION_TYPE = distEs6.SELECTION_TYPE;
 export {

package/dist/{jpeg-201a0839.js → jpeg-2919bc92.js}

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

package/dist/{lerc-4c2149fc.js → lerc-95858d36.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-0d084e33.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-901cd86d.js";
 import "react";
 var LercDecode = { exports: {} };
 (function(module) {

package/dist/{lzw-04637fdd.js → lzw-d020357b.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0d084e33.js";
+import { B as BaseDecoder } from "./index-901cd86d.js";
 import "react";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;

package/dist/{packbits-c3fd53d2.js → packbits-2ad8f627.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0d084e33.js";
+import { B as BaseDecoder } from "./index-901cd86d.js";
 import "react";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {

package/dist/{raw-c78b844f.js → raw-93e6f264.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0d084e33.js";
+import { B as BaseDecoder } from "./index-901cd86d.js";
 import "react";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {

package/dist/{webimage-2dd56bbe.js → webimage-33d58a8b.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-0d084e33.js";
+import { B as BaseDecoder } from "./index-901cd86d.js";
 import "react";
 class WebImageDecoder extends BaseDecoder {
   constructor() {

package/dist-tsc/BitmaskLayerBeta.d.ts

@@ -39,7 +39,7 @@ declare class BitmaskLayer extends BitmaskLayer_base {
      * This function creates textures from the data
      */
     dataToTexture(data: any, width: any, height: any): any;
-    multiSetsToTexture(multiFeatureValues: any, setColorValues: any, channelIsSetColorMode: any): any[];
+    multiSetsToTexture(multiFeatureValues: any, multiMatrixObsIndex: any, setColorValues: any, channelIsSetColorMode: any): any[];
 }
 declare namespace BitmaskLayer {
     export const layerName: string;
@@ -107,7 +107,7 @@ declare namespace defaultProps {
         const compare_7: boolean;
         export { compare_7 as compare };
     }
-    namespace setColorValues {
+    namespace multiMatrixObsIndex {
         const type_8: string;
         export { type_8 as type };
         const value_7: null;
@@ -115,7 +115,7 @@ declare namespace defaultProps {
         const compare_8: boolean;
         export { compare_8 as compare };
     }
-    namespace channelFeatureValueColormaps {
+    namespace setColorValues {
         const type_9: string;
         export { type_9 as type };
         const value_8: null;
@@ -123,7 +123,7 @@ declare namespace defaultProps {
         const compare_9: boolean;
         export { compare_9 as compare };
     }
-    namespace channelFeatureValueColormapRanges {
+    namespace channelFeatureValueColormaps {
         const type_10: string;
         export { type_10 as type };
         const value_9: null;
@@ -131,7 +131,7 @@ declare namespace defaultProps {
         const compare_10: boolean;
         export { compare_10 as compare };
     }
-    namespace channelIsStaticColorMode {
+    namespace channelFeatureValueColormapRanges {
         const type_11: string;
         export { type_11 as type };
         const value_10: null;
@@ -139,7 +139,7 @@ declare namespace defaultProps {
         const compare_11: boolean;
         export { compare_11 as compare };
     }
-    namespace channelIsSetColorMode {
+    namespace channelIsStaticColorMode {
         const type_12: string;
         export { type_12 as type };
         const value_11: null;
@@ -147,6 +147,14 @@ declare namespace defaultProps {
         const compare_12: boolean;
         export { compare_12 as compare };
     }
+    namespace channelIsSetColorMode {
+        const type_13: string;
+        export { type_13 as type };
+        const value_12: null;
+        export { value_12 as value };
+        const compare_13: boolean;
+        export { compare_13 as compare };
+    }
 }
 import { GLSL_COLORMAP_DEFAULT } from "./constants.js";
 //# sourceMappingURL=BitmaskLayerBeta.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BitmaskLayerBeta.d.ts","sourceRoot":"","sources":["../src/BitmaskLayerBeta.js"],"names":[],"mappings":";;;;;;;;;;;AAgDA;;;GAGG;AACH;;IAEE;;;;;;;MAYC;IAED;;;;MAIE;IACF,4CA0BC;IAED;;;;aAyCC;IAED,sBAuHC;IAED;;OAEG;IACH,uDAqBC;IAED,oGAiEC;CACF"}
+{"version":3,"file":"BitmaskLayerBeta.d.ts","sourceRoot":"","sources":["../src/BitmaskLayerBeta.js"],"names":[],"mappings":";;;;;;;;;;;AAiEA;;;GAGG;AACH;;IAEE;;;;;;;MAYC;IAED;;;;MAIE;IACF,4CA0BC;IAED;;;;aA6CC;IAED,sBAuHC;IAED;;OAEG;IACH,uDAqBC;IAED,8HAuEC;CACF"}

package/dist-tsc/BitmaskLayerBeta.js

@@ -20,6 +20,18 @@ function padWithDefault(arr, defaultValue, padWidth) {
 function getColor(arr) {
     return arr ? arr.map(v => v / 255) : [0, 0, 0];
 }
+function isEqualShallow(prevArr, nextArr) {
+    if (prevArr === nextArr) {
+        return true;
+    }
+    if (Array.isArray(prevArr) && Array.isArray(nextArr)) {
+        if (prevArr.length === nextArr.length) {
+            return !prevArr.some((v, i) => (v !== nextArr[i] && ((!Array.isArray(v) && !Array.isArray(nextArr[i]))
+                || (v.length > 0 || nextArr[i].length > 0))));
+        }
+    }
+    return prevArr === nextArr;
+}
 const defaultProps = {
     channelStrokeWidths: { type: 'array', value: null, compare: true },
     channelsFilled: { type: 'array', value: null, compare: true },
@@ -29,6 +41,7 @@ const defaultProps = {
     colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
     expressionData: { type: 'object', value: null, compare: true },
     multiFeatureValues: { type: 'array', value: null, compare: true },
+    multiMatrixObsIndex: { type: 'array', value: null, compare: true },
     setColorValues: { type: 'array', value: null, compare: true },
     channelFeatureValueColormaps: { type: 'array', value: null, compare: true },
     channelFeatureValueColormapRanges: { type: 'array', value: null, compare: true },
@@ -83,13 +96,14 @@ export default class BitmaskLayer extends XRLayer {
     }
     updateState({ props, oldProps, changeFlags }) {
         super.updateState({ props, oldProps, changeFlags });
-        if (props.multiFeatureValues !== oldProps.multiFeatureValues
-            || props.setColorValues !== oldProps.setColorValues
-            || props.channelIsSetColorMode !== oldProps.channelIsSetColorMode) {
-            const { multiFeatureValues, setColorValues, channelIsSetColorMode } = this.props;
+        if (!isEqualShallow(props.multiFeatureValues, oldProps.multiFeatureValues)
+            || !isEqualShallow(props.multiMatrixObsIndex, oldProps.multiMatrixObsIndex)
+            || !isEqualShallow(props.setColorValues, oldProps.setColorValues)
+            || !isEqualShallow(props.channelIsSetColorMode, oldProps.channelIsSetColorMode)) {
+            const { multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, } = this.props;
             // Use one expressionTex for all channels,
             // using an offset mechanism.
-            const [valueTex, colorTex, valueTexOffsets, colorTexOffsets, valueTexHeight, colorTexHeight,] = this.multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode);
+            const [valueTex, colorTex, valueTexOffsets, colorTexOffsets, valueTexHeight, colorTexHeight,] = this.multiSetsToTexture(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode);
             this.setState({
                 valueTex,
                 colorTex,
@@ -196,9 +210,9 @@ export default class BitmaskLayer extends XRLayer {
             type: GL.FLOAT,
         });
     }
-    multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode) {
+    multiSetsToTexture(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode) {
         const isWebGL2On = isWebGL2(this.context.gl);
-        const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets,] = multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, MULTI_FEATURE_TEX_SIZE);
+        const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets,] = multiSetsToTextureData(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, MULTI_FEATURE_TEX_SIZE);
         return [
             // Color indices texture
             new Texture2D(this.context.gl, {

package/dist-tsc/bitmask-utils.d.ts

@@ -8,5 +8,5 @@
  * will be determined by the length of the concatenated values.
  * @returns
  */
-export function multiSetsToTextureData(multiFeatureValues: array[], setColorValues: object[], channelIsSetColorMode: boolean[], texSize: number): (number | any[] | Uint8Array)[];
+export function multiSetsToTextureData(multiFeatureValues: array[], multiMatrixObsIndex: any, setColorValues: object[], channelIsSetColorMode: boolean[], texSize: number): (number | any[] | Uint8Array)[];
 //# sourceMappingURL=bitmask-utils.d.ts.map

package/dist-tsc/bitmask-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bitmask-utils.d.ts","sourceRoot":"","sources":["../src/bitmask-utils.js"],"names":[],"mappings":"AAYA;;;;;;;;;GASG;AACH,2DARW,OAAO,kBACP,MAAM,EAAE,yBACR,OAAO,EAAE,WAET,MAAM,mCAgFhB"}
+{"version":3,"file":"bitmask-utils.d.ts","sourceRoot":"","sources":["../src/bitmask-utils.js"],"names":[],"mappings":"AAcA;;;;;;;;;GASG;AACH,2DARW,OAAO,4CACP,MAAM,EAAE,yBACR,OAAO,EAAE,WAET,MAAM,mCAwHhB"}

package/dist-tsc/bitmask-utils.js

@@ -1,4 +1,6 @@
-import { extent } from 'd3-array';
+/* eslint-disable radix */
+/* eslint-disable-next-line camelcase */
+import { extent, max as d3_max } from 'd3-array';
 function normalize(arr) {
     const [min, max] = extent(arr);
     const ratio = 255 / (max - min);
@@ -15,16 +17,26 @@ function normalize(arr) {
  * will be determined by the length of the concatenated values.
  * @returns
  */
-export function multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, texSize) {
+export function multiSetsToTextureData(multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, texSize) {
     let totalValuesLength = 0;
     let totalColorsLength = 0;
     channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
         if (isSetColorMode) {
-            totalValuesLength += setColorValues[channelIndex]?.obsIndex?.length || 0;
+            // totalValuesLength += setColorValues[channelIndex]?.obsIndex?.length || 0;
             totalColorsLength += (setColorValues[channelIndex]?.setColors?.length || 0) * 3;
+            // TODO: if we can assume values are monotonically increasing,
+            // we can just use the final array value arr[-1] directly as the max.
+            totalValuesLength += (setColorValues[channelIndex]?.obsIndex
+                ? d3_max(setColorValues[channelIndex].obsIndex.map(d => parseInt(d)))
+                : 0);
         }
         else {
-            totalValuesLength += multiFeatureValues[channelIndex]?.length || 0;
+            // totalValuesLength += multiFeatureValues[channelIndex]?.length || 0;
+            // TODO: if we can assume values are monotonically increasing,
+            // we can just use the final array value arr[-1] directly as the max.
+            totalValuesLength += (multiMatrixObsIndex[channelIndex]
+                ? d3_max(multiMatrixObsIndex[channelIndex].map(d => parseInt(d)))
+                : (multiFeatureValues[channelIndex]?.length || 0));
         }
     });
     const valueTexHeight = Math.max(2, Math.ceil(totalValuesLength / texSize));
@@ -46,15 +58,27 @@ export function multiSetsToTextureData(multiFeatureValues, setColorValues, chann
     let colorOffset = 0;
     // Iterate over the data for each channel.
     channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
+        const matrixObsIndex = multiMatrixObsIndex[channelIndex];
+        // Assume the bitmask values correspond to the values in the matrixObsIndex (off by one).
+        const bitmaskValueIsIndex = matrixObsIndex === null;
         if (isSetColorMode) {
             const { setColorIndices, setColors, obsIndex } = setColorValues[channelIndex] || {};
             if (setColorIndices && setColors && obsIndex) {
                 for (let i = 0; i < obsIndex.length; i++) {
+                    let obsId = String(i + 1);
+                    let obsI = i;
+                    // TODO: this uses the matrixObsIndex to determine the value of the flag, is that correct?
+                    if (!bitmaskValueIsIndex) {
+                        // We cannot assume that the values in the bitmask
+                        // correspond to the values in the matrixObsIndex.
+                        obsId = obsIndex[i];
+                        obsI = parseInt(obsId) - 1;
+                    }
                     // We add one here to account for i being 0-based but the pixel values being 1-based
                     // (to account for zero indicating the background of the segmentation bitmask).
-                    const colorIndex = setColorIndices.get(String(i + 1));
+                    const colorIndex = setColorIndices.get(obsId);
                     // Add one to the color index, so that we can use zero to indicate a "null" set color.
-                    totalData[indexOffset + i] = colorIndex === undefined ? 0 : colorIndex + 1;
+                    totalData[indexOffset + obsI] = colorIndex === undefined ? 0 : colorIndex + 1;
                 }
                 for (let i = 0; i < setColors.length; i++) {
                     const { color: [r, g, b] } = setColors[i];
@@ -70,8 +94,20 @@ export function multiSetsToTextureData(multiFeatureValues, setColorValues, chann
         }
         else {
             const featureArr = multiFeatureValues[channelIndex];
-            // TODO: are these values always already normalized?
-            totalData.set(normalize(featureArr), indexOffset);
+            const normalizedFeatureArr = normalize(featureArr);
+            if (!bitmaskValueIsIndex && matrixObsIndex) {
+                // We cannot assume that the values in the bitmask
+                // correspond to the values in the matrixObsIndex.
+                for (let i = 0; i < matrixObsIndex.length; i++) {
+                    const obsId = matrixObsIndex[i];
+                    const obsI = parseInt(obsId) - 1;
+                    totalData[indexOffset + obsI] = normalizedFeatureArr[i];
+                }
+            }
+            else {
+                // TODO: are these values always already normalized?
+                totalData.set(normalizedFeatureArr, indexOffset);
+            }
             indicesOffsets.push(indexOffset);
             indexOffset += featureArr.length;
             // Add a color offset so that the number of offsets still equals the number of channels.

package/dist-tsc/bitmask-utils.test.js

@@ -7,6 +7,10 @@ describe('bitmask utils', () => {
                 [1, 2, 3, 255, 1000],
                 [10, 20, 30], // 3 expression values, one per glomerulus
             ];
+            const multiObsIndex = [
+                ['1', '2', '3', '4', '5'],
+                ['1', '2', '3'], // 3 glomeruli
+            ];
             const setColorValues = [
                 {
                     setColorIndices: (new Map([
@@ -39,7 +43,7 @@ describe('bitmask utils', () => {
                 true,
                 false,
             ];
-            const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets,] = multiSetsToTextureData(multiFeatureValues, setColorValues, channelIsSetColorMode, 10);
+            const [totalData, valueTexHeight, indicesOffsets, totalColors, colorTexHeight, colorsOffsets,] = multiSetsToTextureData(multiFeatureValues, multiObsIndex, setColorValues, channelIsSetColorMode, 10);
             expect(valueTexHeight).toEqual(2);
             expect(colorTexHeight).toEqual(2);
             expect(indicesOffsets).toEqual([0, 5]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/gl",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -52,7 +52,7 @@
     "math.gl": "^3.5.6",
     "mathjs": "^9.2.0",
     "nebula.gl": "0.23.8",
-    "@vitessce/utils": "3.3.1"
+    "@vitessce/utils": "3.3.3"
   },
   "devDependencies": {
     "glsl-colormap": "^1.0.1"

package/src/BitmaskLayerBeta.js

@@ -29,6 +29,22 @@ function getColor(arr) {
   return arr ? arr.map(v => v / 255) : [0, 0, 0];
 }
 
+function isEqualShallow(prevArr, nextArr) {
+  if (prevArr === nextArr) {
+    return true;
+  }
+  if (Array.isArray(prevArr) && Array.isArray(nextArr)) {
+    if (prevArr.length === nextArr.length) {
+      return !prevArr.some((v, i) => (v !== nextArr[i] && (
+        (!Array.isArray(v) && !Array.isArray(nextArr[i]))
+        || (v.length > 0 || nextArr[i].length > 0)
+      )
+      ));
+    }
+  }
+  return prevArr === nextArr;
+}
+
 
 const defaultProps = {
   channelStrokeWidths: { type: 'array', value: null, compare: true },
@@ -39,6 +55,7 @@ const defaultProps = {
   colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
   expressionData: { type: 'object', value: null, compare: true },
   multiFeatureValues: { type: 'array', value: null, compare: true },
+  multiMatrixObsIndex: { type: 'array', value: null, compare: true },
   setColorValues: { type: 'array', value: null, compare: true },
   channelFeatureValueColormaps: { type: 'array', value: null, compare: true },
   channelFeatureValueColormapRanges: { type: 'array', value: null, compare: true },
@@ -102,11 +119,14 @@ export default class BitmaskLayer extends XRLayer {
   updateState({ props, oldProps, changeFlags }) {
     super.updateState({ props, oldProps, changeFlags });
     if (
-      props.multiFeatureValues !== oldProps.multiFeatureValues
-      || props.setColorValues !== oldProps.setColorValues
-      || props.channelIsSetColorMode !== oldProps.channelIsSetColorMode
+      !isEqualShallow(props.multiFeatureValues, oldProps.multiFeatureValues)
+      || !isEqualShallow(props.multiMatrixObsIndex, oldProps.multiMatrixObsIndex)
+      || !isEqualShallow(props.setColorValues, oldProps.setColorValues)
+      || !isEqualShallow(props.channelIsSetColorMode, oldProps.channelIsSetColorMode)
     ) {
-      const { multiFeatureValues, setColorValues, channelIsSetColorMode } = this.props;
+      const {
+        multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode,
+      } = this.props;
       // Use one expressionTex for all channels,
       // using an offset mechanism.
       const [
@@ -118,6 +138,7 @@ export default class BitmaskLayer extends XRLayer {
         colorTexHeight,
       ] = this.multiSetsToTexture(
         multiFeatureValues,
+        multiMatrixObsIndex,
         setColorValues,
         channelIsSetColorMode,
       );
@@ -289,7 +310,12 @@ export default class BitmaskLayer extends XRLayer {
     });
   }
 
-  multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode) {
+  multiSetsToTexture(
+    multiFeatureValues,
+    multiMatrixObsIndex,
+    setColorValues,
+    channelIsSetColorMode,
+  ) {
     const isWebGL2On = isWebGL2(this.context.gl);
 
     const [
@@ -301,6 +327,7 @@ export default class BitmaskLayer extends XRLayer {
       colorsOffsets,
     ] = multiSetsToTextureData(
       multiFeatureValues,
+      multiMatrixObsIndex,
       setColorValues,
       channelIsSetColorMode,
       MULTI_FEATURE_TEX_SIZE,

package/src/bitmask-utils.js

@@ -1,4 +1,6 @@
-import { extent } from 'd3-array';
+/* eslint-disable radix */
+/* eslint-disable-next-line camelcase */
+import { extent, max as d3_max } from 'd3-array';
 
 
 function normalize(arr) {
@@ -21,17 +23,33 @@ function normalize(arr) {
  * @returns
  */
 export function multiSetsToTextureData(
-  multiFeatureValues, setColorValues, channelIsSetColorMode, texSize,
+  multiFeatureValues, multiMatrixObsIndex, setColorValues, channelIsSetColorMode, texSize,
 ) {
   let totalValuesLength = 0;
   let totalColorsLength = 0;
 
   channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
     if (isSetColorMode) {
-      totalValuesLength += setColorValues[channelIndex]?.obsIndex?.length || 0;
+      // totalValuesLength += setColorValues[channelIndex]?.obsIndex?.length || 0;
       totalColorsLength += (setColorValues[channelIndex]?.setColors?.length || 0) * 3;
+
+      // TODO: if we can assume values are monotonically increasing,
+      // we can just use the final array value arr[-1] directly as the max.
+      totalValuesLength += (
+        setColorValues[channelIndex]?.obsIndex
+          ? d3_max(setColorValues[channelIndex].obsIndex.map(d => parseInt(d)))
+          : 0
+      );
     } else {
-      totalValuesLength += multiFeatureValues[channelIndex]?.length || 0;
+      // totalValuesLength += multiFeatureValues[channelIndex]?.length || 0;
+
+      // TODO: if we can assume values are monotonically increasing,
+      // we can just use the final array value arr[-1] directly as the max.
+      totalValuesLength += (
+        multiMatrixObsIndex[channelIndex]
+          ? d3_max(multiMatrixObsIndex[channelIndex].map(d => parseInt(d)))
+          : (multiFeatureValues[channelIndex]?.length || 0)
+      );
     }
   });
 
@@ -56,15 +74,27 @@ export function multiSetsToTextureData(
   let colorOffset = 0;
   // Iterate over the data for each channel.
   channelIsSetColorMode.forEach((isSetColorMode, channelIndex) => {
+    const matrixObsIndex = multiMatrixObsIndex[channelIndex];
+    // Assume the bitmask values correspond to the values in the matrixObsIndex (off by one).
+    const bitmaskValueIsIndex = matrixObsIndex === null;
     if (isSetColorMode) {
       const { setColorIndices, setColors, obsIndex } = setColorValues[channelIndex] || {};
       if (setColorIndices && setColors && obsIndex) {
         for (let i = 0; i < obsIndex.length; i++) {
+          let obsId = String(i + 1);
+          let obsI = i;
+          // TODO: this uses the matrixObsIndex to determine the value of the flag, is that correct?
+          if (!bitmaskValueIsIndex) {
+            // We cannot assume that the values in the bitmask
+            // correspond to the values in the matrixObsIndex.
+            obsId = obsIndex[i];
+            obsI = parseInt(obsId) - 1;
+          }
           // We add one here to account for i being 0-based but the pixel values being 1-based
           // (to account for zero indicating the background of the segmentation bitmask).
-          const colorIndex = setColorIndices.get(String(i + 1));
+          const colorIndex = setColorIndices.get(obsId);
           // Add one to the color index, so that we can use zero to indicate a "null" set color.
-          totalData[indexOffset + i] = colorIndex === undefined ? 0 : colorIndex + 1;
+          totalData[indexOffset + obsI] = colorIndex === undefined ? 0 : colorIndex + 1;
         }
         for (let i = 0; i < setColors.length; i++) {
           const { color: [r, g, b] } = setColors[i];
@@ -79,8 +109,20 @@ export function multiSetsToTextureData(
       colorOffset += (setColors?.length || 0);
     } else {
       const featureArr = multiFeatureValues[channelIndex];
-      // TODO: are these values always already normalized?
-      totalData.set(normalize(featureArr), indexOffset);
+      const normalizedFeatureArr = normalize(featureArr);
+
+      if (!bitmaskValueIsIndex && matrixObsIndex) {
+        // We cannot assume that the values in the bitmask
+        // correspond to the values in the matrixObsIndex.
+        for (let i = 0; i < matrixObsIndex.length; i++) {
+          const obsId = matrixObsIndex[i];
+          const obsI = parseInt(obsId) - 1;
+          totalData[indexOffset + obsI] = normalizedFeatureArr[i];
+        }
+      } else {
+        // TODO: are these values always already normalized?
+        totalData.set(normalizedFeatureArr, indexOffset);
+      }
       indicesOffsets.push(indexOffset);
       indexOffset += featureArr.length;
       // Add a color offset so that the number of offsets still equals the number of channels.

package/src/bitmask-utils.test.js

@@ -11,6 +11,11 @@ describe('bitmask utils', () => {
         [10, 20, 30], // 3 expression values, one per glomerulus
       ];
 
+      const multiObsIndex = [
+        ['1', '2', '3', '4', '5'], // 5 cells
+        ['1', '2', '3'], // 3 glomeruli
+      ];
+
       const setColorValues = [
         {
           setColorIndices: (new Map([
@@ -54,6 +59,7 @@ describe('bitmask utils', () => {
         colorsOffsets,
       ] = multiSetsToTextureData(
         multiFeatureValues,
+        multiObsIndex,
         setColorValues,
         channelIsSetColorMode,
         10,