@vitessce/gl 2.0.3 → 3.0.1

package/dist-tsc/heatmap-bitmap-layer-shaders.d.ts

@@ -0,0 +1,13 @@
+/**
+ * No change to the vertex shader from the base BitmapLayer.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
+ */
+export const vertexShader: "\n#define SHADER_NAME heatmap-bitmap-layer-vertex-shader\n\nattribute vec2 texCoords;\nattribute vec3 positions;\nattribute vec3 positions64Low;\n\nvarying vec2 vTexCoord;\n\nconst vec3 pickingColor = vec3(1.0, 0.0, 0.0);\n\nvoid main(void) {\n  geometry.worldPosition = positions;\n  geometry.uv = texCoords;\n  geometry.pickingColor = pickingColor;\n\n  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);\n  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n\n  vTexCoord = texCoords;\n\n  vec4 color = vec4(0.0);\n  DECKGL_FILTER_COLOR(color, geometry);\n}\n";
+/**
+ * Fragment shader adapted to perform aggregation and
+ * take color scale functions + sliders into account.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
+ * Reference: https://github.com/hms-dbmi/viv/blob/06231ae02cac1ff57ba458c71e9bc59ed2fc4f8b/src/layers/XRLayer/xr-layer-fragment-colormap.webgl1.glsl
+ */
+export const fragmentShader: string;
+//# sourceMappingURL=heatmap-bitmap-layer-shaders.d.ts.map

package/dist-tsc/heatmap-bitmap-layer-shaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-bitmap-layer-shaders.d.ts","sourceRoot":"","sources":["../src/heatmap-bitmap-layer-shaders.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,moBAwBE;AAEF;;;;;GAKG;AACH,oCAwEE"}

package/dist-tsc/heatmap-bitmap-layer-shaders.js

@@ -0,0 +1,109 @@
+import { colormaps } from './glsl/index.js';
+/**
+ * No change to the vertex shader from the base BitmapLayer.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
+ */
+export const vertexShader = `
+#define SHADER_NAME heatmap-bitmap-layer-vertex-shader
+
+attribute vec2 texCoords;
+attribute vec3 positions;
+attribute vec3 positions64Low;
+
+varying vec2 vTexCoord;
+
+const vec3 pickingColor = vec3(1.0, 0.0, 0.0);
+
+void main(void) {
+  geometry.worldPosition = positions;
+  geometry.uv = texCoords;
+  geometry.pickingColor = pickingColor;
+
+  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+  vTexCoord = texCoords;
+
+  vec4 color = vec4(0.0);
+  DECKGL_FILTER_COLOR(color, geometry);
+}
+`;
+/**
+ * Fragment shader adapted to perform aggregation and
+ * take color scale functions + sliders into account.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
+ * Reference: https://github.com/hms-dbmi/viv/blob/06231ae02cac1ff57ba458c71e9bc59ed2fc4f8b/src/layers/XRLayer/xr-layer-fragment-colormap.webgl1.glsl
+ */
+export const fragmentShader = `
+#define SHADER_NAME heatmap-bitmap-layer-fragment-shader
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+${colormaps}
+
+// The texture (GL.LUMINANCE & Uint8Array).
+uniform sampler2D uBitmapTexture;
+
+// What are the dimensions of the texture (width, height)?
+uniform vec2 uTextureSize;
+
+// How many consecutive pixels should be aggregated together along each axis?
+uniform vec2 uAggSize;
+
+// What are the values of the color scale sliders?
+uniform vec2 uColorScaleRange;
+
+// The texture coordinate, varying (interpolated between values set by the vertex shader).
+varying vec2 vTexCoord;
+
+void main(void) {
+  // Compute 1 pixel in texture coordinates
+  vec2 onePixel = vec2(1.0, 1.0) / uTextureSize;
+  
+  vec2 viewCoord = vec2(floor(vTexCoord.x * uTextureSize.x), floor(vTexCoord.y * uTextureSize.y));
+
+  // Compute (x % aggSizeX, y % aggSizeY).
+  // These values will be the number of values to the left / above the current position to consider.
+  vec2 modAggSize = vec2(-1.0 * mod(viewCoord.x, uAggSize.x), -1.0 * mod(viewCoord.y, uAggSize.y));
+
+  // Take the sum of values along each axis.
+  float intensitySum = 0.0;
+  vec2 offsetPixels = vec2(0.0, 0.0);
+
+  for(int i = 0; i < 16; i++) {
+    // Check to break outer loop early.
+    // Uniforms cannot be used as conditions in GLSL for loops.
+    if(float(i) >= uAggSize.y) {
+      // Done in the y direction.
+      break;
+    }
+
+    offsetPixels = vec2(offsetPixels.x, (modAggSize.y + float(i)) * onePixel.y);
+
+    for(int j = 0; j < 16; j++) {
+      // Check to break inner loop early.
+      // Uniforms cannot be used as conditions in GLSL for loops.
+      if(float(j) >= uAggSize.x) {
+        // Done in the x direction.
+        break;
+      }
+
+      offsetPixels = vec2((modAggSize.x + float(j)) * onePixel.x, offsetPixels.y);
+      intensitySum += texture2D(uBitmapTexture, vTexCoord + offsetPixels).r;
+    }
+  }
+  
+  // Compute the mean value.
+  float intensityMean = intensitySum / (uAggSize.x * uAggSize.y);
+  
+  // Re-scale using the color scale slider values.
+  float scaledIntensityMean = (intensityMean - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
+
+  gl_FragColor = COLORMAP_FUNC(clamp(scaledIntensityMean, 0.0, 1.0));
+
+  geometry.uv = vTexCoord;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/dist-tsc/heatmap-constants.d.ts

@@ -0,0 +1,20 @@
+export const TILE_SIZE: 4096;
+export const DATA_TEXTURE_SIZE: 4096;
+export const MIN_ROW_AGG: 1;
+export const MAX_ROW_AGG: 16;
+export const COLOR_BAR_SIZE: 20;
+export const AXIS_LABEL_TEXT_SIZE: 11;
+export const AXIS_TITLE_TEXT_SIZE: 15;
+export const AXIS_MIN_SIZE: 12;
+export const AXIS_MAX_SIZE: 120;
+export const AXIS_MARGIN: 3;
+export const AXIS_PADDING: 10;
+export namespace THEME_TO_TEXT_COLOR {
+    const dark: number[];
+    const light: number[];
+}
+export const AXIS_FONT_FAMILY: "-apple-system, 'Helvetica Neue', Arial, sans-serif";
+export const PIXELATED_TEXTURE_PARAMETERS: {
+    [x: number]: number;
+};
+//# sourceMappingURL=heatmap-constants.d.ts.map

package/dist-tsc/heatmap-constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heatmap-constants.d.ts","sourceRoot":"","sources":["../src/heatmap-constants.js"],"names":[],"mappings":"AAGA,6BAA8B;AAE9B,qCAAsC;AACtC,4BAA6B;AAC7B,6BAA8B;AAE9B,gCAAiC;AACjC,sCAAuC;AACvC,sCAAuC;AACvC,+BAAgC;AAChC,gCAAiC;AACjC,4BAA6B;AAC7B,8BAA+B;;;;;AAK/B,oFAAqF;AAErF;;EAOE"}

package/dist-tsc/heatmap-constants.js

@@ -0,0 +1,27 @@
+import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
+// Image texture dimensions
+export const TILE_SIZE = 4096;
+// Reshaped data texture dimensions
+export const DATA_TEXTURE_SIZE = 4096;
+export const MIN_ROW_AGG = 1;
+export const MAX_ROW_AGG = 16;
+export const COLOR_BAR_SIZE = 20;
+export const AXIS_LABEL_TEXT_SIZE = 11;
+export const AXIS_TITLE_TEXT_SIZE = 15;
+export const AXIS_MIN_SIZE = 12;
+export const AXIS_MAX_SIZE = 120;
+export const AXIS_MARGIN = 3;
+export const AXIS_PADDING = 10;
+export const THEME_TO_TEXT_COLOR = {
+    dark: [224, 224, 224],
+    light: [64, 64, 64],
+};
+export const AXIS_FONT_FAMILY = "-apple-system, 'Helvetica Neue', Arial, sans-serif";
+export const PIXELATED_TEXTURE_PARAMETERS = {
+    // NEAREST for integer data to prevent interpolation.
+    [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
+    [GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
+    // CLAMP_TO_EDGE to remove tile artifacts.
+    [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+    [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
+};

package/dist-tsc/index.d.ts

@@ -0,0 +1,14 @@
+export { getSelectionLayers } from "./selection-utils.js";
+export { default as HeatmapBitmapLayer } from "./HeatmapBitmapLayer.js";
+export { default as PixelatedBitmapLayer } from "./PixelatedBitmapLayer.js";
+export { default as HeatmapCompositeTextLayer } from "./HeatmapCompositeTextLayer.js";
+export { default as PaddedExpressionHeatmapBitmapLayer } from "./PaddedExpressionHeatmapBitmapLayer.js";
+export { default as ScaledExpressionExtension } from "./ScaledExpressionExtension/index.js";
+export { default as SelectionExtension } from "./SelectionExtension/index.js";
+export { default as BitmaskLayer } from "./BitmaskLayer.js";
+export * as viv from "./viv.js";
+export * as luma from "./luma.js";
+export * as deck from "./deck.js";
+export { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, DEFAULT_GL_OPTIONS, SELECTION_TYPE } from "./constants.js";
+export { TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG, COLOR_BAR_SIZE, AXIS_MARGIN, DATA_TEXTURE_SIZE, PIXELATED_TEXTURE_PARAMETERS, AXIS_LABEL_TEXT_SIZE, AXIS_FONT_FAMILY, AXIS_PADDING, AXIS_MIN_SIZE, AXIS_MAX_SIZE } from "./heatmap-constants.js";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist-tsc/index.js

@@ -1,16 +1,19 @@
 // Selection Layers
-export { getSelectionLayers } from './selection-utils';
+export { getSelectionLayers } from './selection-utils.js';
 // Heatmap Layers
-export { default as HeatmapBitmapLayer } from './HeatmapBitmapLayer';
-export { default as PixelatedBitmapLayer } from './PixelatedBitmapLayer';
-export { default as HeatmapCompositeTextLayer } from './HeatmapCompositeTextLayer';
-export { default as PaddedExpressionHeatmapBitmapLayer } from './PaddedExpressionHeatmapBitmapLayer';
-export { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, DEFAULT_GL_OPTIONS, SELECTION_TYPE, } from './constants';
+export { default as HeatmapBitmapLayer } from './HeatmapBitmapLayer.js';
+export { default as PixelatedBitmapLayer } from './PixelatedBitmapLayer.js';
+export { default as HeatmapCompositeTextLayer } from './HeatmapCompositeTextLayer.js';
+export { default as PaddedExpressionHeatmapBitmapLayer } from './PaddedExpressionHeatmapBitmapLayer.js';
+export { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, DEFAULT_GL_OPTIONS, SELECTION_TYPE, } from './constants.js';
 // Layer extensions
-export { default as ScaledExpressionExtension } from './ScaledExpressionExtension';
-export { default as SelectionExtension } from './SelectionExtension';
-export { default as BitmaskLayer } from './BitmaskLayer';
-export { TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG, COLOR_BAR_SIZE, AXIS_MARGIN, DATA_TEXTURE_SIZE, PIXELATED_TEXTURE_PARAMETERS, AXIS_LABEL_TEXT_SIZE, AXIS_FONT_FAMILY, AXIS_PADDING, AXIS_MIN_SIZE, AXIS_MAX_SIZE, } from './heatmap-constants';
-export * as viv from './viv';
-export * as luma from './luma';
-export * as deck from './deck';
+export { default as ScaledExpressionExtension } from './ScaledExpressionExtension/index.js';
+export { default as SelectionExtension } from './SelectionExtension/index.js';
+export { default as BitmaskLayer } from './BitmaskLayer.js';
+export { TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG, COLOR_BAR_SIZE, AXIS_MARGIN, DATA_TEXTURE_SIZE, PIXELATED_TEXTURE_PARAMETERS, AXIS_LABEL_TEXT_SIZE, AXIS_FONT_FAMILY, AXIS_PADDING, AXIS_MIN_SIZE, AXIS_MAX_SIZE, } from './heatmap-constants.js';
+// eslint-disable-next-line react-refresh/only-export-components
+export * as viv from './viv.js';
+// eslint-disable-next-line react-refresh/only-export-components
+export * as luma from './luma.js';
+// eslint-disable-next-line react-refresh/only-export-components
+export * as deck from './deck.js';

package/dist-tsc/luma.d.ts

@@ -0,0 +1,2 @@
+export { default as GL } from "@luma.gl/constants";
+//# sourceMappingURL=luma.d.ts.map

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

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

package/dist-tsc/luma.js

@@ -0,0 +1,2 @@
+export { default as GL } from '@luma.gl/constants';
+export { Texture2D } from '@luma.gl/core';

package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.d.ts

@@ -0,0 +1,13 @@
+/**
+ * No change to the vertex shader from the base BitmapLayer.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
+ */
+export const vertexShader: "\n#define SHADER_NAME heatmap-bitmap-layer-vertex-shader\n\nattribute vec2 texCoords;\nattribute vec3 positions;\nattribute vec3 positions64Low;\n\nvarying vec2 vTexCoord;\n\nconst vec3 pickingColor = vec3(1.0, 0.0, 0.0);\n\nvoid main(void) {\n  geometry.worldPosition = positions;\n  geometry.uv = texCoords;\n  geometry.pickingColor = pickingColor;\n\n  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);\n  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);\n\n  vTexCoord = texCoords;\n\n  vec4 color = vec4(0.0);\n  DECKGL_FILTER_COLOR(color, geometry);\n}\n";
+/**
+ * Fragment shader adapted to perform aggregation and
+ * take color scale functions + sliders into account.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
+ * Reference: https://github.com/hms-dbmi/viv/blob/06231ae02cac1ff57ba458c71e9bc59ed2fc4f8b/src/layers/XRLayer/xr-layer-fragment-colormap.webgl1.glsl
+ */
+export const fragmentShader: string;
+//# sourceMappingURL=padded-expression-heatmap-bitmap-layer-shaders.d.ts.map

package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"padded-expression-heatmap-bitmap-layer-shaders.d.ts","sourceRoot":"","sources":["../src/padded-expression-heatmap-bitmap-layer-shaders.js"],"names":[],"mappings":"AAEA;;;GAGG;AACH,moBAwBE;AAEF;;;;;GAKG;AACH,oCA0GE"}

package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.js

@@ -0,0 +1,143 @@
+import { colormaps } from './glsl/index.js';
+/**
+ * No change to the vertex shader from the base BitmapLayer.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-vertex.js
+ */
+export const vertexShader = `
+#define SHADER_NAME heatmap-bitmap-layer-vertex-shader
+
+attribute vec2 texCoords;
+attribute vec3 positions;
+attribute vec3 positions64Low;
+
+varying vec2 vTexCoord;
+
+const vec3 pickingColor = vec3(1.0, 0.0, 0.0);
+
+void main(void) {
+  geometry.worldPosition = positions;
+  geometry.uv = texCoords;
+  geometry.pickingColor = pickingColor;
+
+  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+
+  vTexCoord = texCoords;
+
+  vec4 color = vec4(0.0);
+  DECKGL_FILTER_COLOR(color, geometry);
+}
+`;
+/**
+ * Fragment shader adapted to perform aggregation and
+ * take color scale functions + sliders into account.
+ * Reference: https://github.com/visgl/deck.gl/blob/8.2-release/modules/layers/src/bitmap-layer/bitmap-layer-fragment.js
+ * Reference: https://github.com/hms-dbmi/viv/blob/06231ae02cac1ff57ba458c71e9bc59ed2fc4f8b/src/layers/XRLayer/xr-layer-fragment-colormap.webgl1.glsl
+ */
+export const fragmentShader = `
+#define SHADER_NAME heatmap-bitmap-layer-fragment-shader
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+${colormaps}
+
+// The texture (GL.LUMINANCE & Uint8Array).
+uniform sampler2D uBitmapTexture;
+
+// height x width of the data matrix (i.e x and y are flipped compared to the graphics convention)
+uniform vec2 uOrigDataSize;
+uniform vec2 uReshapedDataSize;
+
+uniform vec2 tileIJ;
+uniform vec2 dataIJ;
+uniform vec2 numTiles;
+
+// What are the dimensions of the texture (width, height)?
+uniform vec2 uTextureSize;
+
+// How many consecutive pixels should be aggregated together along each axis?
+uniform vec2 uAggSize;
+
+// What are the values of the color scale sliders?
+uniform vec2 uColorScaleRange;
+
+// The texture coordinate, varying (interpolated between values set by the vertex shader).
+varying vec2 vTexCoord;
+
+vec2 offsetvTexcoord(vec2 coord) {
+  float xTileToDataRatio = uTextureSize.x / uOrigDataSize.y;
+  float yTileToDataRatio = uTextureSize.y / uOrigDataSize.x;
+  vec2 vTexCoordOffset = vec2(
+    (tileIJ.y * xTileToDataRatio) + (coord.x * xTileToDataRatio),
+    (tileIJ.x * yTileToDataRatio) + ((1. - coord.y) * yTileToDataRatio)
+  );
+  return vTexCoordOffset;
+}
+
+vec2 dataCoordinateFromvTexCoordOffset(vec2 vTexCoordOffset) {
+  
+  // True pixel coordinate on scale of uOrigDataSize
+  vec2 viewCoord = vec2(floor(vTexCoordOffset.x * uOrigDataSize.y), floor(vTexCoordOffset.y * uOrigDataSize.x));
+  return viewCoord;
+}
+
+float getIndexFromViewCoord(vec2 viewCoord) {
+  return viewCoord.y * uOrigDataSize.y + viewCoord.x;
+}
+
+vec2 transformDataCoordinate(float index) {
+  float textureX = (floor( index / uReshapedDataSize.x )) / uReshapedDataSize.x;
+  float textureY = (index - (floor( index / uReshapedDataSize.x ) * uReshapedDataSize.x)) / uReshapedDataSize.y;
+  vec2 texturedCoord = vec2(textureY, textureX);
+  return texturedCoord;
+}
+
+void main(void) {
+  // Compute 1 pixel in texture coordinates
+  vec2 onePixel = vec2(1.0, 1.0) / uTextureSize;
+  vec2 vTexCoordOffset = offsetvTexcoord(vTexCoord);
+  vec2 viewCoordTransformed = dataCoordinateFromvTexCoordOffset(vTexCoordOffset);
+  // Compute (x % aggSizeX, y % aggSizeY).
+  // These values will be the number of values to the left / above the current position to consider.
+  vec2 modAggSize = vec2(-1.0 * mod(viewCoordTransformed.x, uAggSize.x), -1.0 * mod(viewCoordTransformed.y, uAggSize.y));
+  // Take the sum of values along each axis.
+  float intensitySum = 0.0;
+  vec2 offsetPixels = vec2(0.0, 0.0);
+  for(int i = 0; i < 16; i++) {
+    // Check to break outer loop early.
+    // Uniforms cannot be used as conditions in GLSL for loops.
+    if(float(i) >= uAggSize.y) {
+      // Done in the y direction.
+      break;
+    }
+
+    offsetPixels = vec2(offsetPixels.x, (modAggSize.y + float(i)));
+
+    for(int j = 0; j < 16; j++) {
+      // Check to break inner loop early.
+      // Uniforms cannot be used as conditions in GLSL for loops.
+      if(float(j) >= uAggSize.x) {
+        // Done in the x direction.
+        break;
+      }
+      offsetPixels = vec2((modAggSize.x + float(j)), offsetPixels.y);
+      float indexFull = getIndexFromViewCoord(viewCoordTransformed + offsetPixels);
+      float index = indexFull - (floor(indexFull / (uReshapedDataSize.x * uReshapedDataSize.y)) * (uReshapedDataSize.x * uReshapedDataSize.y));
+      vec2 vTexCoordTransformed = transformDataCoordinate(index);
+      intensitySum += texture2D(uBitmapTexture, vTexCoordTransformed).r;
+    }
+  }
+  
+  // Compute the mean value.
+  float intensityMean = intensitySum / (uAggSize.x * uAggSize.y);
+  // Re-scale using the color scale slider values.
+  float scaledIntensityMean = (intensityMean - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
+
+  gl_FragColor = COLORMAP_FUNC(clamp(scaledIntensityMean, 0.0, 1.0));
+
+  geometry.uv = vTexCoord;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

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

@@ -0,0 +1,19 @@
+/**
+ * Construct DeckGL selection layers.
+ * @param {string} tool
+ * @param {number} zoom
+ * @param {string} cellBaseLayerId
+ * @param {function} getCellCoords
+ * @param {function} updateCellsSelection
+ * @returns {object[]} The array of DeckGL selection layers.
+ */
+export function getSelectionLayers(tool: string, zoom: number, layerId: any, getCellCoords: Function, obsIndex: any, updateCellsSelection: Function, cellsQuadTree: any, flipY?: boolean): object[];
+/**
+ * Get deck.gl layer props for selection overlays.
+ * @param {object} props
+ * @returns {object} Object with two properties,
+ * overlay: overlayProps, base: baseProps,
+ * where the values are deck.gl layer props.
+ */
+export function overlayBaseProps(props: object): object;
+//# sourceMappingURL=selection-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selection-utils.d.ts","sourceRoot":"","sources":["../src/selection-utils.js"],"names":[],"mappings":"AAsBA;;;;;;;;GAQG;AACH,yCAPW,MAAM,QACN,MAAM,8HAIJ,MAAM,EAAE,CA4CpB;AAED;;;;;;GAMG;AACH,wCALW,MAAM,GACJ,MAAM,CA8BlB"}

package/dist-tsc/selection-utils.js

@@ -0,0 +1,92 @@
+import { COORDINATE_SYSTEM } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { DataFilterExtension } from '@deck.gl/extensions'; // eslint-disable-line import/no-extraneous-dependencies
+import SelectionLayer from './SelectionLayer.js';
+/**
+ * Convert a DeckGL layer ID to a "base" layer ID for selection.
+ * @param {string} layerId The layer ID to convert.
+ * @returns {string} The base layer ID.
+ */
+function getBaseLayerId(layerId) {
+    return `base-${layerId}`;
+}
+/**
+ * Convert a DeckGL layer ID to a "selected" layer ID for selection.
+ * @param {string} layerId The layer ID to convert.
+ * @returns {string} The base layer ID.
+ */
+function getSelectedLayerId(layerId) {
+    return `selected-${layerId}`;
+}
+/**
+ * Construct DeckGL selection layers.
+ * @param {string} tool
+ * @param {number} zoom
+ * @param {string} cellBaseLayerId
+ * @param {function} getCellCoords
+ * @param {function} updateCellsSelection
+ * @returns {object[]} The array of DeckGL selection layers.
+ */
+export function getSelectionLayers(tool, zoom, layerId, getCellCoords, obsIndex, updateCellsSelection, cellsQuadTree, flipY = false) {
+    if (!tool) {
+        return [];
+    }
+    const cellBaseLayerId = getBaseLayerId(layerId);
+    const editHandlePointRadius = 5 / (zoom + 16);
+    return [new SelectionLayer({
+            id: 'selection',
+            flipY,
+            cellsQuadTree,
+            getCellCoords,
+            coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+            selectionType: tool,
+            onSelect: ({ pickingInfos }) => {
+                const cellIds = pickingInfos.map(i => obsIndex[i]);
+                if (updateCellsSelection) {
+                    updateCellsSelection(cellIds);
+                }
+            },
+            layerIds: [cellBaseLayerId],
+            getTentativeFillColor: () => [255, 255, 255, 95],
+            getTentativeLineColor: () => [143, 143, 143, 255],
+            getTentativeLineDashArray: () => [7, 4],
+            lineWidthMinPixels: 2,
+            lineWidthMaxPixels: 2,
+            getEditHandlePointColor: () => [0xff, 0xff, 0xff, 0xff],
+            getEditHandlePointRadius: () => editHandlePointRadius,
+            editHandlePointRadiusScale: 1,
+            editHandlePointRadiusMinPixels: editHandlePointRadius,
+            editHandlePointRadiusMaxPixels: 2 * editHandlePointRadius,
+        })];
+}
+/**
+ * Get deck.gl layer props for selection overlays.
+ * @param {object} props
+ * @returns {object} Object with two properties,
+ * overlay: overlayProps, base: baseProps,
+ * where the values are deck.gl layer props.
+ */
+export function overlayBaseProps(props) {
+    const { id, getColor, data, isSelected, ...rest } = props;
+    return {
+        overlay: {
+            id: getSelectedLayerId(id),
+            getFillColor: getColor,
+            getLineColor: getColor,
+            data,
+            getFilterValue: isSelected,
+            extensions: [new DataFilterExtension({ filterSize: 1 })],
+            filterRange: [1, 1],
+            ...rest,
+        },
+        base: {
+            id: getBaseLayerId(id),
+            getLineColor: getColor,
+            getFillColor: getColor,
+            // Alternatively: contrast outlines with solids:
+            // getLineColor: getColor,
+            // getFillColor: [255, 255, 255],
+            data: data.slice(),
+            ...rest,
+        },
+    };
+}

package/dist-tsc/viv.d.ts

@@ -0,0 +1,2 @@
+export { ZarrPixelSource, loadOmeTiff, loadOmeZarr, XRLayer, getChannelStats, RENDERING_MODES, MAX_CHANNELS, getDefaultInitialViewState, ScaleBarLayer, MultiscaleImageLayer, AdditiveColormapExtension, ColorPaletteExtension, ImageLayer, VolumeLayer, AdditiveColormap3DExtensions, ColorPalette3DExtensions, DTYPE_VALUES } from "@hms-dbmi/viv";
+//# sourceMappingURL=viv.d.ts.map

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

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

package/dist-tsc/viv.js

@@ -0,0 +1,3 @@
+export { ZarrPixelSource, loadOmeTiff, loadOmeZarr, XRLayer, getChannelStats, RENDERING_MODES, MAX_CHANNELS, getDefaultInitialViewState, ScaleBarLayer, MultiscaleImageLayer, AdditiveColormapExtension, ColorPaletteExtension, ImageLayer, VolumeLayer, AdditiveColormap3DExtensions, ColorPalette3DExtensions, 
+// TODO: deprecated
+DTYPE_VALUES, } from '@hms-dbmi/viv';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/gl",
-  "version": "2.0.3",
+  "version": "3.0.1",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,10 +8,12 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.js",
   "files": [
+    "src",
     "dist",
-    "src"
+    "dist-tsc"
   ],
   "dependencies": {
     "@deck.gl/aggregation-layers": "~8.8.6",
@@ -21,7 +23,7 @@
     "@deck.gl/layers": "~8.8.6",
     "@deck.gl/mesh-layers": "~8.8.6",
     "@deck.gl/react": "~8.8.6",
-    "@hms-dbmi/viv": "~0.13.6",
+    "@hms-dbmi/viv": "~0.13.7",
     "@loaders.gl/3d-tiles": "^3.0.0",
     "@loaders.gl/core": "^3.0.0",
     "@loaders.gl/images": "^3.0.0",
@@ -45,18 +47,25 @@
     "@turf/helpers": "^6.5.0",
     "deck.gl": "~8.8.6",
     "glslify": "^7.0.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "math.gl": "^3.5.6",
     "mathjs": "^9.2.0",
     "nebula.gl": "0.23.8",
-    "@vitessce/utils": "2.0.3"
+    "@vitessce/utils": "3.0.1"
   },
   "devDependencies": {
     "glsl-colormap": "^1.0.1"
   },
   "scripts": {
     "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
-    "test": "pnpm exec vitest --run -r ../../ --dir .",
+    "test": "pnpm exec vitest --run",
     "glslify": "cat src/glsl/colormaps.in.glsl | glslify > src/glsl/colormaps.out.glsl"
+  },
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist-tsc/index.d.ts",
+      "import": "./dist/index.js"
+    }
   }
 }

package/src/BitmaskLayer.js

@@ -2,12 +2,12 @@ import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous
 import { project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
 import { Texture2D, isWebGL2 } from '@luma.gl/core';
 import { XRLayer } from '@hms-dbmi/viv';
-import { fs, vs } from './bitmask-layer-shaders';
+import { fs, vs } from './bitmask-layer-shaders.js';
 import {
   GLSL_COLORMAPS,
   GLSL_COLORMAP_DEFAULT,
   COLORMAP_SHADER_PLACEHOLDER,
-} from './constants';
+} from './constants.js';
 
 function padWithDefault(arr, defaultValue, padWidth) {
   const newArr = [...arr];
@@ -19,9 +19,15 @@ function padWithDefault(arr, defaultValue, padWidth) {
 
 const defaultProps = {
   hoveredCell: { type: 'number', value: null, compare: true },
-  cellColorData: { type: 'object', value: null, compare: true },
+  // We do not want to deep-compare cellColorData,
+  // as it is potentially a TypedArray with millions of elements.
+  // For `compare`: "if a number is supplied, indicates the maximum depth to deep-compare,
+  // where 0 is shallow comparison and -1 is infinite depth. true is equivalent to 1."
+  // Reference: https://deck.gl/docs/developer-guide/custom-layers/prop-types#array
+  cellColorData: { type: 'object', value: null, compare: 0 },
   colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
-  expressionData: { type: 'object', value: null, compare: true },
+  // Same as with cellColorData, we do not want to deep-compare expressionData.
+  expressionData: { type: 'object', value: null, compare: 0 },
 };
 
 /**
@@ -46,9 +52,13 @@ export default class BitmaskLayer extends XRLayer {
 
   updateState({ props, oldProps, changeFlags }) {
     super.updateState({ props, oldProps, changeFlags });
+    // Check the cellColorData to determine whether
+    // to update the texture.
     if (props.cellColorData !== oldProps.cellColorData) {
       this.setColorTexture();
     }
+    // Check the expressionData to determine whether
+    // to update the texture.
     if (props.expressionData !== oldProps.expressionData) {
       const { expressionData, cellTexHeight, cellTexWidth } = this.props;
       const expressionTex = this.dataToTexture(