@vitessce/gl 2.0.3-beta.0 → 3.0.0

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.js';
+import {
+  GLSL_COLORMAPS,
+  GLSL_COLORMAP_DEFAULT,
+  COLORMAP_SHADER_PLACEHOLDER,
+} from './constants.js';
+import { vertexShader, fragmentShader } from './heatmap-bitmap-layer-shaders.js';
+
+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.js';
+
+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/src/PaddedExpressionHeatmapBitmapLayer.js

@@ -0,0 +1,154 @@
+/* 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.js';
+import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER } from './constants.js';
+import { vertexShader, fragmentShader } from './padded-expression-heatmap-bitmap-layer-shaders.js';
+
+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/src/PixelatedBitmapLayer.js

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

@@ -0,0 +1,117 @@
+/* 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.js';
+import module from './shader-module.js';
+
+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/src/ScaledExpressionExtension/index.js

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

package/src/ScaledExpressionExtension/shader-module.js

@@ -0,0 +1,35 @@
+import { colormaps } from '../glsl/index.js';
+
+/**
+ *
+ * Reference: https://github.com/visgl/deck.gl/blob/8.4-release/modules/layers/src/scatterplot-layer/scatterplot-layer-vertex.glsl.js
+ * Reference: https://observablehq.com/@rreusser/selecting-the-right-opacity-for-2d-point-clouds
+ * Reference: https://github.com/flekschas/regl-scatterplot/blob/5e3b03e/src/point.vs
+ */
+const vs = `
+${colormaps}
+
+// Custom attributes for Vitessce:
+attribute float expressionValue;
+
+// Custom uniforms for Vitessce:
+uniform vec2 uColorScaleRange;
+uniform bool uIsExpressionMode;
+
+`;
+
+const inject = {
+  'vs:DECKGL_FILTER_COLOR': `
+    if(uIsExpressionMode) {
+      float normalizedExpressionValue = expressionValue / 255.0;
+      float scaledExpressionValue = (normalizedExpressionValue - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
+      color.rgb = COLORMAP_FUNC(clamp(scaledExpressionValue, 0.0, 1.0)).rgb;
+    }
+  `,
+};
+
+export default {
+  name: 'scaled-expression',
+  vs,
+  inject,
+};

package/src/SelectionExtension/SelectionExtension.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable import/no-extraneous-dependencies */
+import GL from '@luma.gl/constants';
+import { LayerExtension } from '@deck.gl/core';
+import module from './shader-module.js';
+
+export default class SelectionExtension extends LayerExtension {
+  // eslint-disable-next-line class-methods-use-this
+  getShaders() {
+    return {
+      modules: [module],
+    };
+  }
+
+  initializeState(context, extension) {
+    const attributeManager = this.getAttributeManager();
+    if (attributeManager) {
+      attributeManager.add({
+        isSelected: {
+          type: GL.FLOAT,
+          size: 1,
+          transition: true,
+          accessor: 'getCellIsSelected',
+          defaultValue: 1,
+          // PolygonLayer needs not-intsanced attribute but
+          // ScatterplotLayer needs instanced.
+          divisor: Number(extension.opts.instanced),
+        },
+      });
+    }
+  }
+}
+
+SelectionExtension.extensionName = 'SelectionExtension';

package/src/SelectionExtension/index.js

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