@vitessce/gl 2.0.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/BitmaskLayer.js

@@ -0,0 +1,132 @@
+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/dist/HeatmapBitmapLayer.js

@@ -0,0 +1,123 @@
+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/dist/HeatmapCompositeTextLayer.js

@@ -0,0 +1,129 @@
+/* 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';

package/dist/PaddedExpressionHeatmapBitmapLayer.js

@@ -0,0 +1,129 @@
+/* eslint-disable no-underscore-dangle */
+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, DATA_TEXTURE_SIZE } from './heatmap-constants';
+import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from './constants';
+import { vertexShader, fragmentShader } from './padded-expression-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 PaddedExpressionHeatmapBitmapLayer 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.
+     */
+    _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);
+        return this._getShaders({
+            vs: vertexShader,
+            fs: fragmentShaderWithColormap,
+            modules: [project32, picking],
+        });
+    }
+    updateState(args) {
+        super.updateState(args);
+        const { props, oldProps } = args;
+        if (props.colormap !== oldProps.colormap) {
+            const { gl } = this.context;
+            // eslint-disable-next-line no-unused-expressions
+            this.state.model?.delete();
+            this.state.model = this._getModel(gl);
+            this.getAttributeManager().invalidateAll();
+        }
+        if (props.image !== oldProps.image) {
+            this.loadTexture(this.props.image);
+        }
+    }
+    /**
+     * 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, origDataSize, tileI, tileJ, numXTiles, numYTiles, } = this.props;
+        // Render the image
+        if (bitmapTexture && model) {
+            model
+                .setUniforms(Object.assign({}, uniforms, {
+                uBitmapTexture: bitmapTexture,
+                uOrigDataSize: origDataSize,
+                uReshapedDataSize: [DATA_TEXTURE_SIZE, DATA_TEXTURE_SIZE],
+                uTextureSize: [TILE_SIZE, TILE_SIZE],
+                uAggSize: [aggSizeX, aggSizeY],
+                uColorScaleRange: [colorScaleLo, colorScaleHi],
+                tileIJ: [tileI, tileJ],
+                dataIJ: [0, 0],
+                numTiles: [numXTiles, numYTiles],
+                numData: [1, 1],
+            }))
+                .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 {Array<Uint8Array>} images
+     */
+    loadTexture(image) {
+        const { gl } = this.context;
+        if (this.state.bitmapTexture) {
+            this.state.bitmapTexture.delete();
+        }
+        if (image && 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: DATA_TEXTURE_SIZE,
+                    height: DATA_TEXTURE_SIZE,
+                }),
+            });
+        }
+    }
+}
+PaddedExpressionHeatmapBitmapLayer.layerName = 'PaddedExpressionHeatmapBitmapLayer';
+PaddedExpressionHeatmapBitmapLayer.defaultProps = defaultProps;

package/dist/PixelatedBitmapLayer.js

@@ -0,0 +1,26 @@
+import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
+import { CompositeLayer } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { PIXELATED_TEXTURE_PARAMETERS } from './heatmap-constants';
+// These are the same defaultProps as for BitmapLayer.
+const defaultProps = {
+    ...BitmapLayer.defaultProps,
+    image: { type: 'object', value: null, async: true },
+    bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
+    desaturate: {
+        type: 'number', min: 0, max: 1, value: 0,
+    },
+    transparentColor: { type: 'color', value: [0, 0, 0, 0] },
+    tintColor: { type: 'color', value: [255, 255, 255] },
+};
+export default class PixelatedBitmapLayer extends CompositeLayer {
+    renderLayers() {
+        const { image } = this.props;
+        return new BitmapLayer(this.props, {
+            id: `${this.props.id}-wrapped`,
+            image,
+            textureParameters: PIXELATED_TEXTURE_PARAMETERS,
+        });
+    }
+}
+PixelatedBitmapLayer.layerName = 'PixelatedBitmapLayer';
+PixelatedBitmapLayer.defaultProps = defaultProps;

package/dist/ScaledExpressionExtension/ScaledExpressionExtension.js

@@ -0,0 +1,105 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-extraneous-dependencies */
+import GL from '@luma.gl/constants';
+import { LayerExtension } from '@deck.gl/core';
+import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from '../constants';
+import module from './shader-module';
+const defaultProps = {
+    colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+    colorScaleLo: { type: 'number', value: 0.0, compare: true },
+    colorScaleHi: { type: 'number', value: 1.0, compare: true },
+    isExpressionMode: false,
+    getExpressionValue: { type: 'accessor', value: 0 },
+    getSelectionState: { type: 'accessor', value: 0.0 },
+};
+export default class ScaledExpressionExtension extends LayerExtension {
+    getShaders() {
+        const { colormap } = this.props;
+        return {
+            modules: [module],
+            defines: {
+                [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
+                    ? colormap
+                    : GLSL_COLORMAP_DEFAULT,
+            },
+        };
+    }
+    updateState({ props, oldProps }) {
+        if (props.colormap !== oldProps.colormap) {
+            const { gl } = this.context;
+            // Normal single model layers, like ScatterplotLayer
+            if (this.state.model) {
+                // eslint-disable-next-line no-unused-expressions
+                this.state.model?.delete();
+                this.state.model = this._getModel(gl);
+            }
+            else {
+                // Special handling for PolygonLayer sublayer models.
+                if (this.state.models) {
+                    // eslint-disable-next-line no-unused-expressions
+                    this.state.models?.forEach(model => model?.delete());
+                }
+                if (this.state.topModel) {
+                    // eslint-disable-next-line no-unused-expressions
+                    this.state.topModel?.delete();
+                }
+                if (this.state.sideModel) {
+                    // eslint-disable-next-line no-unused-expressions
+                    this.state.sideModel?.delete();
+                }
+                if (this._getModels) {
+                    this.setState(this._getModels(this.context.gl));
+                }
+            }
+            const attributeManager = this.getAttributeManager();
+            if (attributeManager) {
+                this.getAttributeManager().invalidateAll();
+            }
+        }
+    }
+    initializeState() {
+        const layer = this.getCurrentLayer();
+        // No need to run this on layers that don't have a `draw` call.
+        if (layer.isComposite) {
+            return;
+        }
+        const attributeManager = this.getAttributeManager();
+        if (attributeManager) {
+            // This attributes is the array of expression data needed for
+            // coloring cells against the colormap.
+            attributeManager.add({
+                expressionValue: {
+                    type: GL.FLOAT,
+                    size: 1,
+                    transition: true,
+                    accessor: 'getExpressionValue',
+                    defaultValue: 1,
+                    // PolygonLayer fill needs not-intsanced attribute but
+                    // ScatterplotLayer and the PolygonLayer stroke needs instanced.
+                    // So use another attribute's divisor property as a proxy for this divisor.
+                    divisor: Object.values(attributeManager.attributes)[0].settings.divisor,
+                },
+            });
+        }
+    }
+    draw() {
+        const { colorScaleLo, colorScaleHi, isExpressionMode, } = this.props;
+        const { topModel, sideModel, models, model, } = this.state;
+        const uniforms = {
+            uColorScaleRange: [colorScaleLo, colorScaleHi],
+            uIsExpressionMode: isExpressionMode,
+        };
+        // ScatterplotLayer model
+        // eslint-disable-next-line no-unused-expressions
+        model?.setUniforms(uniforms);
+        // PolygonLayer models from sublayers
+        // eslint-disable-next-line no-unused-expressions
+        models?.forEach(m => m.setUniforms(uniforms));
+        // eslint-disable-next-line no-unused-expressions
+        topModel?.setUniforms(uniforms);
+        // eslint-disable-next-line no-unused-expressions
+        sideModel?.setUniforms(uniforms);
+    }
+}
+ScaledExpressionExtension.extensionName = 'ScaledExpressionExtension';
+ScaledExpressionExtension.defaultProps = defaultProps;

package/dist/ScaledExpressionExtension/index.js

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