@vitessce/gl 2.0.3-beta.0 → 2.0.3

package/dist/raw.739ce163.mjs

@@ -0,0 +1,10 @@
+import { B as BaseDecoder } from "./index.9aaafdeb.mjs";
+import "react";
+class RawDecoder extends BaseDecoder {
+  decodeBlock(buffer) {
+    return buffer;
+  }
+}
+export {
+  RawDecoder as default
+};

package/dist/webimage.4e868fb9.mjs

@@ -0,0 +1,30 @@
+import { B as BaseDecoder } from "./index.9aaafdeb.mjs";
+import "react";
+class WebImageDecoder extends BaseDecoder {
+  constructor() {
+    super();
+    if (typeof createImageBitmap === "undefined") {
+      throw new Error("Cannot decode WebImage as `createImageBitmap` is not available");
+    } else if (typeof document === "undefined" && typeof OffscreenCanvas === "undefined") {
+      throw new Error("Cannot decode WebImage as neither `document` nor `OffscreenCanvas` is not available");
+    }
+  }
+  async decode(fileDirectory, buffer) {
+    const blob = new Blob([buffer]);
+    const imageBitmap = await createImageBitmap(blob);
+    let canvas;
+    if (typeof document !== "undefined") {
+      canvas = document.createElement("canvas");
+      canvas.width = imageBitmap.width;
+      canvas.height = imageBitmap.height;
+    } else {
+      canvas = new OffscreenCanvas(imageBitmap.width, imageBitmap.height);
+    }
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(imageBitmap, 0, 0);
+    return ctx.getImageData(0, 0, imageBitmap.width, imageBitmap.height).data.buffer;
+  }
+}
+export {
+  WebImageDecoder as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/gl",
-  "version": "2.0.3-beta.0",
+  "version": "2.0.3",
   "author": "Gehlenborg Lab",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -8,9 +8,10 @@
     "url": "git+https://github.com/vitessce/vitessce.git"
   },
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
     "@deck.gl/aggregation-layers": "~8.8.6",
@@ -20,7 +21,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.3",
+    "@hms-dbmi/viv": "~0.13.6",
     "@loaders.gl/3d-tiles": "^3.0.0",
     "@loaders.gl/core": "^3.0.0",
     "@loaders.gl/images": "^3.0.0",
@@ -48,14 +49,13 @@
     "math.gl": "^3.5.6",
     "mathjs": "^9.2.0",
     "nebula.gl": "0.23.8",
-    "@vitessce/utils": "2.0.3-beta.0"
+    "@vitessce/utils": "2.0.3"
   },
   "devDependencies": {
     "glsl-colormap": "^1.0.1"
   },
   "scripts": {
-    "start": "tsc --watch",
-    "build": "tsc",
+    "bundle": "pnpm exec vite build -c ../../scripts/vite.config.js",
     "test": "pnpm exec vitest --run -r ../../ --dir .",
     "glslify": "cat src/glsl/colormaps.in.glsl | glslify > src/glsl/colormaps.out.glsl"
   }

package/src/BitmaskLayer.js

@@ -0,0 +1,165 @@
+import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
+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 {
+  GLSL_COLORMAPS,
+  GLSL_COLORMAP_DEFAULT,
+  COLORMAP_SHADER_PLACEHOLDER,
+} from './constants';
+
+function padWithDefault(arr, defaultValue, padWidth) {
+  const newArr = [...arr];
+  for (let i = 0; i < padWidth; i += 1) {
+    newArr.push(defaultValue);
+  }
+  return newArr;
+}
+
+const defaultProps = {
+  hoveredCell: { type: 'number', value: null, compare: true },
+  cellColorData: { type: 'object', value: null, compare: true },
+  colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+  expressionData: { type: 'object', value: null, compare: true },
+};
+
+/**
+ * A BitmapLayer that performs aggregation in the fragment shader,
+ * and renders its texture from a Uint8Array rather than an ImageData.
+ */
+export default class BitmaskLayer extends XRLayer {
+  // eslint-disable-next-line class-methods-use-this
+  getShaders() {
+    const { colormap } = this.props;
+    return {
+      fs,
+      vs,
+      modules: [project32, picking],
+      defines: {
+        [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
+          ? colormap
+          : GLSL_COLORMAP_DEFAULT,
+      },
+    };
+  }
+
+  updateState({ props, oldProps, changeFlags }) {
+    super.updateState({ props, oldProps, changeFlags });
+    if (props.cellColorData !== oldProps.cellColorData) {
+      this.setColorTexture();
+    }
+    if (props.expressionData !== oldProps.expressionData) {
+      const { expressionData, cellTexHeight, cellTexWidth } = this.props;
+      const expressionTex = this.dataToTexture(
+        expressionData,
+        cellTexWidth,
+        cellTexHeight,
+      );
+      this.setState({ expressionTex });
+    }
+    if (props.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      if (this.state.model) {
+        this.state.model.delete();
+      }
+      // eslint-disable-next-line no-underscore-dangle
+      this.setState({ model: this._getModel(gl) });
+
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+
+  setColorTexture() {
+    const {
+      cellColorData: data,
+      cellTexHeight: height,
+      cellTexWidth: width,
+    } = this.props;
+    const colorTex = new Texture2D(this.context.gl, {
+      width,
+      height,
+      // Only use Float32 so we don't have to write two shaders
+      data,
+      // we don't want or need mimaps
+      mipmaps: false,
+      parameters: {
+        // NEAREST for integer data
+        [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,
+      },
+      format: GL.RGB,
+      dataFormat: GL.RGB,
+      type: GL.UNSIGNED_BYTE,
+    });
+    this.setState({ colorTex });
+  }
+
+  draw(opts) {
+    const { uniforms } = opts;
+    const {
+      channelsVisible,
+      hoveredCell,
+      colorScaleLo,
+      colorScaleHi,
+      isExpressionMode,
+    } = this.props;
+    const {
+      textures, model, colorTex, expressionTex,
+    } = this.state;
+    // Render the image
+    if (textures && model && colorTex) {
+      model
+        .setUniforms(
+          Object.assign({}, uniforms, {
+            hovered: hoveredCell || 0,
+            colorTex,
+            expressionTex,
+            colorTexHeight: colorTex.height,
+            colorTexWidth: colorTex.width,
+            channelsVisible: padWithDefault(
+              channelsVisible,
+              false,
+              // There are six texture entries on the shaders
+              6 - channelsVisible.length,
+            ),
+            uColorScaleRange: [colorScaleLo, colorScaleHi],
+            uIsExpressionMode: isExpressionMode,
+            ...textures,
+          }),
+        )
+        .draw();
+    }
+  }
+
+  /**
+   * This function creates textures from the data
+   */
+  dataToTexture(data, width, height) {
+    const isWebGL2On = isWebGL2(this.context.gl);
+    return new Texture2D(this.context.gl, {
+      width,
+      height,
+      // Only use Float32 so we don't have to write two shaders
+      data: new Float32Array(data),
+      // we don't want or need mimaps
+      mipmaps: false,
+      parameters: {
+        // NEAREST for integer data
+        [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,
+      },
+      format: isWebGL2On ? GL.R32F : GL.LUMINANCE,
+      dataFormat: isWebGL2On ? GL.RED : GL.LUMINANCE,
+      type: GL.FLOAT,
+    });
+  }
+}
+BitmaskLayer.layerName = 'BitmaskLayer';
+BitmaskLayer.defaultProps = defaultProps;

package/src/HeatmapBitmapLayer.js

@@ -0,0 +1,144 @@
+import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
+import { _mergeShaders, project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
+import { Texture2D } from '@luma.gl/core';
+import { PIXELATED_TEXTURE_PARAMETERS, TILE_SIZE } from './heatmap-constants';
+import {
+  GLSL_COLORMAPS,
+  GLSL_COLORMAP_DEFAULT,
+  COLORMAP_SHADER_PLACEHOLDER,
+} from './constants';
+import { vertexShader, fragmentShader } from './heatmap-bitmap-layer-shaders';
+
+const defaultProps = {
+  image: { type: 'object', value: null, async: true },
+  colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+  bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
+  aggSizeX: { type: 'number', value: 8.0, compare: true },
+  aggSizeY: { type: 'number', value: 8.0, compare: true },
+  colorScaleLo: { type: 'number', value: 0.0, compare: true },
+  colorScaleHi: { type: 'number', value: 1.0, compare: true },
+};
+/**
+ * A BitmapLayer that performs aggregation in the fragment shader,
+ * and renders its texture from a Uint8Array rather than an ImageData.
+ */
+export default class HeatmapBitmapLayer extends BitmapLayer {
+  /**
+   * Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
+   * @param {object} shaders
+   * @returns {object} Merged shaders.
+   */
+  // eslint-disable-next-line no-underscore-dangle
+  _getShaders(shaders) {
+    this.props.extensions.forEach((extension) => {
+      // eslint-disable-next-line no-param-reassign
+      shaders = _mergeShaders(
+        shaders,
+        extension.getShaders.call(this, extension),
+      );
+    });
+    return shaders;
+  }
+
+  /**
+   * Need to override to provide custom shaders.
+   */
+  getShaders() {
+    const { colormap } = this.props;
+    const fragmentShaderWithColormap = GLSL_COLORMAPS.includes(colormap)
+      ? fragmentShader.replace(COLORMAP_SHADER_PLACEHOLDER, colormap)
+      : fragmentShader.replace(
+        COLORMAP_SHADER_PLACEHOLDER,
+        GLSL_COLORMAP_DEFAULT,
+      );
+    // eslint-disable-next-line no-underscore-dangle
+    return this._getShaders({
+      vs: vertexShader,
+      fs: fragmentShaderWithColormap,
+      modules: [project32, picking],
+    });
+  }
+
+  updateState(args) {
+    super.updateState(args);
+    this.loadTexture(this.props.image);
+    const { props, oldProps } = args;
+    if (props.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      // eslint-disable-next-line no-unused-expressions
+      this.state.model?.delete();
+      // eslint-disable-next-line no-underscore-dangle
+      this.state.model = this._getModel(gl);
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+
+  /**
+   * Need to override to provide additional uniform values.
+   * Simplified by removing video-related code.
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
+   * @param {*} opts
+   */
+  draw(opts) {
+    const { uniforms } = opts;
+    const { bitmapTexture, model } = this.state;
+    const {
+      aggSizeX, aggSizeY, colorScaleLo, colorScaleHi,
+    } = this.props;
+
+    // Render the image
+    if (bitmapTexture && model) {
+      model
+        .setUniforms(
+          Object.assign({}, uniforms, {
+            uBitmapTexture: bitmapTexture,
+            uTextureSize: [TILE_SIZE, TILE_SIZE],
+            uAggSize: [aggSizeX, aggSizeY],
+            uColorScaleRange: [colorScaleLo, colorScaleHi],
+          }),
+        )
+        .draw();
+    }
+  }
+
+  /**
+   * Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
+   * object.
+   * Simplified by removing video-related code.
+   * Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
+   * @param {Uint8Array} image
+   */
+  loadTexture(image) {
+    const { gl } = this.context;
+
+    if (this.state.bitmapTexture) {
+      this.state.bitmapTexture.delete();
+    }
+
+    if (image instanceof Texture2D) {
+      this.setState({
+        bitmapTexture: image,
+      });
+    } else if (image) {
+      this.setState({
+        bitmapTexture: new Texture2D(gl, {
+          data: image,
+          mipmaps: false,
+          parameters: PIXELATED_TEXTURE_PARAMETERS,
+          // Each color contains a single luminance value.
+          // When sampled, rgb are all set to this luminance, alpha is 1.0.
+          // Reference: https://luma.gl/docs/api-reference/webgl/texture#texture-formats
+          format: GL.LUMINANCE,
+          dataFormat: GL.LUMINANCE,
+          type: GL.UNSIGNED_BYTE,
+          width: TILE_SIZE,
+          height: TILE_SIZE,
+        }),
+      });
+    }
+  }
+}
+HeatmapBitmapLayer.layerName = 'HeatmapBitmapLayer';
+HeatmapBitmapLayer.defaultProps = defaultProps;

package/src/HeatmapCompositeTextLayer.js

@@ -0,0 +1,156 @@
+/* eslint-disable no-underscore-dangle */
+import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { TextLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
+import {
+  AXIS_LABEL_TEXT_SIZE,
+  AXIS_TITLE_TEXT_SIZE,
+  AXIS_MARGIN,
+  THEME_TO_TEXT_COLOR,
+  AXIS_FONT_FAMILY,
+  COLOR_BAR_SIZE,
+} from './heatmap-constants';
+
+export default class HeatmapCompositeTextLayer extends CompositeLayer {
+  _renderAxisTopLayers() {
+    const {
+      axisTopLabelData, matrixLeft, width, matrixWidth, viewWidth, theme,
+      targetX, targetY, axisTopTitle, cellWidth, axisOffsetTop, scaleFactor,
+      hideTopLabels,
+    } = this.props;
+    const showAxisTopLabels = cellWidth >= AXIS_LABEL_TEXT_SIZE;
+    const axisLabelTop = targetY + (axisOffsetTop - AXIS_MARGIN) / 2 / scaleFactor;
+    return hideTopLabels ? [] : [
+      new TextLayer({
+        id: 'axisTopLabels',
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        data: axisTopLabelData,
+        getText: d => d[1],
+        getPosition: d => [matrixLeft + ((d[0] + 0.5) / width) * matrixWidth, axisLabelTop],
+        getTextAnchor: 'start',
+        getColor: () => THEME_TO_TEXT_COLOR[theme],
+        getSize: (showAxisTopLabels ? AXIS_LABEL_TEXT_SIZE : 0),
+        getAngle: 75,
+        fontFamily: AXIS_FONT_FAMILY,
+        updateTriggers: {
+          getPosition: [axisLabelTop, matrixLeft, matrixWidth, viewWidth],
+          getSize: [showAxisTopLabels],
+          getColor: [theme],
+        },
+      }),
+      new TextLayer({
+        id: 'axisTopTitle',
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        data: [{ title: axisTopTitle }],
+        getText: d => d.title,
+        getPosition: [targetX, targetY],
+        getTextAnchor: 'middle',
+        getColor: () => THEME_TO_TEXT_COLOR[theme],
+        getSize: (!showAxisTopLabels ? AXIS_TITLE_TEXT_SIZE : 0),
+        getAngle: 0,
+        fontFamily: AXIS_FONT_FAMILY,
+        updateTriggers: {
+          getSize: [showAxisTopLabels],
+          getColor: [theme],
+        },
+      }),
+    ];
+  }
+
+  _renderCornerLayers() {
+    const {
+      theme, targetX, targetY, axisOffsetTop, scaleFactor,
+      cellColorLabelsData, axisOffsetLeft, transpose,
+    } = this.props;
+    const axisLabelTop = targetY + (axisOffsetTop - AXIS_MARGIN) / 2 / scaleFactor;
+    const axisLabelLeft = targetX + (axisOffsetLeft - AXIS_MARGIN) / 2 / scaleFactor;
+    return cellColorLabelsData.map(data => (
+      new TextLayer({
+        id: `cellColorLabel-${data[0]}`,
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        data: [data],
+        getText: d => d[1],
+        getTextAnchor: (transpose ? 'end' : 'start'),
+        getAlignmentBaseline: 'top',
+        getColor: () => THEME_TO_TEXT_COLOR[theme],
+        getSize: AXIS_LABEL_TEXT_SIZE,
+        getPosition: d => [
+          (transpose
+            ? axisLabelLeft
+            : targetX
+              + ((-cellColorLabelsData.length + d[0] * 2) * COLOR_BAR_SIZE + AXIS_MARGIN)
+              / 2 / scaleFactor
+          ),
+          (transpose
+            ? targetY
+              + ((-cellColorLabelsData.length + d[0] * 2) * COLOR_BAR_SIZE + AXIS_MARGIN)
+              / 2 / scaleFactor
+            : axisLabelTop
+          ),
+        ],
+        getAngle: (transpose ? 0 : 90),
+        fontFamily: AXIS_FONT_FAMILY,
+      })
+    ));
+  }
+
+  _renderAxisLeftLayers() {
+    const {
+      axisLeftLabelData, matrixTop, height, matrixHeight,
+      viewHeight, theme, axisLeftTitle, targetX, targetY, cellHeight, axisOffsetLeft,
+      scaleFactor, hideLeftLabels,
+    } = this.props;
+    const showAxisLeftLabels = cellHeight >= AXIS_LABEL_TEXT_SIZE;
+    const axisLabelLeft = targetX + (axisOffsetLeft - AXIS_MARGIN) / 2 / scaleFactor;
+    return hideLeftLabels ? [] : [
+      new TextLayer({
+        id: 'axisLeftLabels',
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        data: axisLeftLabelData,
+        getText: d => d[1],
+        getPosition: d => [axisLabelLeft, matrixTop + ((d[0] + 0.5) / height) * matrixHeight],
+        getTextAnchor: 'end',
+        getColor: () => THEME_TO_TEXT_COLOR[theme],
+        getSize: (showAxisLeftLabels ? AXIS_LABEL_TEXT_SIZE : 0),
+        getAngle: 0,
+        fontFamily: AXIS_FONT_FAMILY,
+        updateTriggers: {
+          getPosition: [axisLabelLeft, matrixTop, matrixHeight, viewHeight],
+          getSize: [showAxisLeftLabels],
+          getColor: [theme],
+        },
+      }),
+      new TextLayer({
+        id: 'axisLeftTitle',
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        data: [{ title: axisLeftTitle }],
+        getText: d => d.title,
+        getPosition: [targetX, targetY],
+        getTextAnchor: 'middle',
+        getColor: () => THEME_TO_TEXT_COLOR[theme],
+        getSize: (!showAxisLeftLabels ? AXIS_TITLE_TEXT_SIZE : 0),
+        getAngle: 90,
+        fontFamily: AXIS_FONT_FAMILY,
+        updateTriggers: {
+          getSize: [showAxisLeftLabels],
+          getColor: [theme],
+        },
+      }),
+    ];
+  }
+
+  renderLayers() {
+    const { axis } = this.props;
+    if (axis === 'left') {
+      return this._renderAxisLeftLayers();
+    }
+    if (axis === 'top') {
+      return this._renderAxisTopLayers();
+    }
+    if (axis === 'corner') {
+      return this._renderCornerLayers();
+    }
+    return [];
+  }
+}
+
+HeatmapCompositeTextLayer.layerName = 'HeatmapCompositeTextLayer';