@vitessce/gl 2.0.3-beta.0 → 2.0.3

package/{dist → src}/heatmap-constants.js

@@ -1,10 +1,12 @@
 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;
@@ -13,15 +15,16 @@ 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],
+  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,
+  // 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,33 @@
+// Selection Layers
+export { getSelectionLayers } from './selection-utils';
+
+// Heatmap Layers
+export { default as HeatmapBitmapLayer } from './HeatmapBitmapLayer';
+export { default as PixelatedBitmapLayer } from './PixelatedBitmapLayer';
+export { default as HeatmapCompositeTextLayer } from './HeatmapCompositeTextLayer';
+export { default as PaddedExpressionHeatmapBitmapLayer } from './PaddedExpressionHeatmapBitmapLayer';
+
+export {
+  GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, DEFAULT_GL_OPTIONS, SELECTION_TYPE,
+} from './constants';
+
+// Layer extensions
+export { default as ScaledExpressionExtension } from './ScaledExpressionExtension';
+export { default as SelectionExtension } from './SelectionExtension';
+export { default as BitmaskLayer } from './BitmaskLayer';
+
+export {
+  TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG,
+  COLOR_BAR_SIZE,
+  AXIS_MARGIN,
+  DATA_TEXTURE_SIZE,
+  PIXELATED_TEXTURE_PARAMETERS,
+  AXIS_LABEL_TEXT_SIZE,
+  AXIS_FONT_FAMILY,
+  AXIS_PADDING,
+  AXIS_MIN_SIZE,
+  AXIS_MAX_SIZE,
+} from './heatmap-constants';
+export * as viv from './viv';
+export * as luma from './luma';
+export * as deck from './deck';

package/{dist → src}/padded-expression-heatmap-bitmap-layer-shaders.js

@@ -1,4 +1,5 @@
 import { colormaps } from './glsl';
+
 /**
  * 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
@@ -28,6 +29,7 @@ void main(void) {
   DECKGL_FILTER_COLOR(color, geometry);
 }
 `;
+
 /**
  * Fragment shader adapted to perform aggregation and
  * take color scale functions + sliders into account.

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';
+
+/**
+ * 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/BitmaskLayer.js

@@ -1,132 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

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