@vitessce/gl 2.0.3-beta.0 → 3.0.0

package/src/heatmap-bitmap-layer-shaders.js

@@ -0,0 +1,111 @@
+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/src/heatmap-constants.js

@@ -0,0 +1,30 @@
+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/src/index.js

@@ -0,0 +1,36 @@
+// Selection Layers
+export { getSelectionLayers } from './selection-utils.js';
+
+// Heatmap Layers
+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/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/src/luma.js

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

package/src/padded-expression-heatmap-bitmap-layer-shaders.js

@@ -0,0 +1,145 @@
+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/src/selection-utils.js

@@ -0,0 +1,109 @@
+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/src/viv.js

@@ -0,0 +1,20 @@
+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/dist/SelectionExtension/index.js

@@ -1,2 +0,0 @@
-import SelectionExtension from './SelectionExtension';
-export default SelectionExtension;

package/dist/layer-controller.js

@@ -1,109 +0,0 @@
-import { Matrix4 } from 'math.gl';
-import { getChannelStats } from './viv';
-async function getSingleSelectionStats2D({ loader, selection }) {
-    const data = Array.isArray(loader) ? loader[loader.length - 1] : loader;
-    const raster = await data.getRaster({ selection });
-    const selectionStats = getChannelStats(raster.data);
-    const { domain, contrastLimits: slider } = selectionStats;
-    return { domain, slider };
-}
-async function getSingleSelectionStats3D({ loader, selection }) {
-    const lowResSource = loader[loader.length - 1];
-    const { shape, labels } = lowResSource;
-    // eslint-disable-next-line no-bitwise
-    const sizeZ = shape[labels.indexOf('z')] >> (loader.length - 1);
-    const raster0 = await lowResSource.getRaster({
-        selection: { ...selection, z: 0 },
-    });
-    const rasterMid = await lowResSource.getRaster({
-        selection: { ...selection, z: Math.floor(sizeZ / 2) },
-    });
-    const rasterTop = await lowResSource.getRaster({
-        selection: { ...selection, z: Math.max(0, sizeZ - 1) },
-    });
-    const stats0 = getChannelStats(raster0.data);
-    const statsMid = getChannelStats(rasterMid.data);
-    const statsTop = getChannelStats(rasterTop.data);
-    return {
-        domain: [
-            Math.min(stats0.domain[0], statsMid.domain[0], statsTop.domain[0]),
-            Math.max(stats0.domain[1], statsMid.domain[1], statsTop.domain[1]),
-        ],
-        slider: [
-            Math.min(stats0.contrastLimits[0], statsMid.contrastLimits[0], statsTop.contrastLimits[0]),
-            Math.max(stats0.contrastLimits[1], statsMid.contrastLimits[1], statsTop.contrastLimits[1]),
-        ],
-    };
-}
-/**
- * Get bounding cube for a given loader i.e [[0, width], [0, height], [0, depth]]
- * @param {Object} loader PixelSource|PixelSource[]
- * @param {[]} selection Selection for stats.
- * @param {boolean} use3d Whether or not to get 3d stats.
- * @returns {Object} { domains, sliders }
- */
-export const getSingleSelectionStats = async ({ loader, selection, use3d }) => {
-    const getStats = use3d
-        ? getSingleSelectionStats3D
-        : getSingleSelectionStats2D;
-    return getStats({ loader, selection });
-};
-export const getMultiSelectionStats = async ({ loader, selections, use3d }) => {
-    const stats = await Promise.all(selections.map(selection => getSingleSelectionStats({ loader, selection, use3d })));
-    const domains = stats.map(stat => stat.domain);
-    const sliders = stats.map(stat => stat.slider);
-    return { domains, sliders };
-};
-/**
- * Get physical size scaling Matrix4
- * @param {Object} loader PixelSource
- * @returns {Object} matrix
- */
-export function getPhysicalSizeScalingMatrix(loader) {
-    const { x, y, z } = loader?.meta?.physicalSizes ?? {};
-    if (x?.size && y?.size && z?.size) {
-        const min = Math.min(z.size, x.size, y.size);
-        const ratio = [x.size / min, y.size / min, z.size / min];
-        return new Matrix4().scale(ratio);
-    }
-    return new Matrix4().identity();
-}
-/**
- * Get bounding cube for a given loader
- * @param {Object} loader PixelSource|PixelSource[]
- * @returns {Array} [0, width], [0, height], [0, depth]]
- */
-export function getBoundingCube(loader) {
-    const source = Array.isArray(loader) ? loader[0] : loader;
-    const { shape, labels } = source;
-    const physicalSizeScalingMatrix = getPhysicalSizeScalingMatrix(source);
-    const xSlice = [0, physicalSizeScalingMatrix[0] * shape[labels.indexOf('x')]];
-    const ySlice = [0, physicalSizeScalingMatrix[5] * shape[labels.indexOf('y')]];
-    const zSlice = [
-        0,
-        physicalSizeScalingMatrix[10] * shape[labels.indexOf('z')],
-    ];
-    return [xSlice, ySlice, zSlice];
-}
-export function abbreviateNumber(value) {
-    // Return an abbreviated representation of value, in 5 characters or less.
-    const maxLength = 5;
-    let maxNaiveDigits = maxLength;
-    /* eslint-disable no-plusplus */
-    if (!Number.isInteger(value)) {
-        --maxNaiveDigits;
-    } // Wasted on "."
-    if (value < 1) {
-        --maxNaiveDigits;
-    } // Wasted on "0."
-    /* eslint-disable no-plusplus */
-    const naive = Intl.NumberFormat('en-US', {
-        maximumSignificantDigits: maxNaiveDigits,
-        useGrouping: false,
-    }).format(value);
-    if (naive.length <= maxLength)
-        return naive;
-    // "e+9" consumes 3 characters, so if we even had two significant digits,
-    // it would take take us to six characters, including the decimal point.
-    return value.toExponential(0);
-}