@vitessce/gl 2.0.2 → 2.0.3

package/dist/PaddedExpressionHeatmapBitmapLayer.js

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

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

@@ -1,105 +0,0 @@
-/* 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/SelectionExtension/SelectionExtension.js

@@ -1,31 +0,0 @@
-/* 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';
-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/dist/SelectionLayer.js

@@ -1,167 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable no-underscore-dangle */
-// File adopted from nebula.gl's SelectionLayer
-// https://github.com/uber/nebula.gl/blob/8e9c2ec8d7cf4ca7050909ed826eb847d5e2cd9c/modules/layers/src/layers/selection-layer.js
-import { CompositeLayer } from 'deck.gl';
-import { polygon as turfPolygon, point as turfPoint } from '@turf/helpers';
-import booleanWithin from '@turf/boolean-within';
-import booleanContains from '@turf/boolean-contains';
-import booleanOverlap from '@turf/boolean-overlap';
-import booleanPointInPolygon from '@turf/boolean-point-in-polygon';
-import { ScatterplotLayer } from '@deck.gl/layers';
-import { SELECTION_TYPE } from 'nebula.gl';
-import { EditableGeoJsonLayer } from '@nebula.gl/layers';
-import { DrawRectangleMode, DrawPolygonByDraggingMode, ViewMode } from '@nebula.gl/edit-modes';
-const EDIT_TYPE_ADD = 'addFeature';
-const EDIT_TYPE_CLEAR = 'clearFeatures';
-// Customize the click handlers for the rectangle and polygon tools,
-// so that clicking triggers the `onEdit` callback.
-class ClickableDrawRectangleMode extends DrawRectangleMode {
-    // eslint-disable-next-line class-methods-use-this
-    handleClick(event, props) {
-        props.onEdit({ editType: EDIT_TYPE_CLEAR });
-    }
-}
-class ClickableDrawPolygonByDraggingMode extends DrawPolygonByDraggingMode {
-    // eslint-disable-next-line class-methods-use-this
-    handleClick(event, props) {
-        props.onEdit({ editType: EDIT_TYPE_CLEAR });
-    }
-}
-const MODE_MAP = {
-    [SELECTION_TYPE.RECTANGLE]: ClickableDrawRectangleMode,
-    [SELECTION_TYPE.POLYGON]: ClickableDrawPolygonByDraggingMode,
-};
-const defaultProps = {
-    selectionType: SELECTION_TYPE.RECTANGLE,
-    layerIds: [],
-    onSelect: () => { },
-};
-const EMPTY_DATA = {
-    type: 'FeatureCollection',
-    features: [],
-};
-const LAYER_ID_GEOJSON = 'selection-geojson';
-const PASS_THROUGH_PROPS = [
-    'lineWidthScale',
-    'lineWidthMinPixels',
-    'lineWidthMaxPixels',
-    'lineWidthUnits',
-    'lineJointRounded',
-    'lineMiterLimit',
-    'pointRadiusScale',
-    'pointRadiusMinPixels',
-    'pointRadiusMaxPixels',
-    'lineDashJustified',
-    'getLineColor',
-    'getFillColor',
-    'getPointRadius',
-    'getLineWidth',
-    'getLineDashArray',
-    'getTentativeLineDashArray',
-    'getTentativeLineColor',
-    'getTentativeFillColor',
-    'getTentativeLineWidth',
-    'editHandlePointRadiusScale',
-    'editHandlePointRadiusMinPixels',
-    'editHandlePointRadiusMaxPixels',
-    'getEditHandlePointColor',
-    'getEditHandlePointRadius',
-    'modeHandlers',
-];
-export default class SelectionLayer extends CompositeLayer {
-    _selectPolygonObjects(coordinates) {
-        const { onSelect, getCellCoords, cellsQuadTree, flipY, } = this.props;
-        const flippedCoordinates = (flipY
-            ? coordinates.map(poly => poly.map(p => ([p[0], -p[1]])))
-            : coordinates);
-        // Convert the selection to a turf polygon object.
-        const selectedPolygon = turfPolygon(flippedCoordinates);
-        // Create an array to store the results.
-        const pickingInfos = [];
-        // quadtree.visit() takes a callback that returns a boolean:
-        // If true returned, then the children of the node are _not_ visited.
-        // If false returned, then the children of the node are visited.
-        // Reference: https://github.com/d3/d3-quadtree#quadtree_visit
-        cellsQuadTree.visit((node, x0, y0, x1, y1) => {
-            const nodePoints = [[[x0, y0], [x1, y0], [x1, y1], [x0, y1], [x0, y0]]];
-            const nodePolygon = turfPolygon(nodePoints);
-            const nodePolygonContainsSelectedPolygon = booleanContains(nodePolygon, selectedPolygon);
-            const nodePolygonWithinSelectedPolygon = booleanWithin(nodePolygon, selectedPolygon);
-            const nodePolygonOverlapsSelectedPolgyon = booleanOverlap(nodePolygon, selectedPolygon);
-            if (!nodePolygonContainsSelectedPolygon
-                && !nodePolygonWithinSelectedPolygon
-                && !nodePolygonOverlapsSelectedPolgyon) {
-                // We are not interested in anything below this node,
-                // so return true because we are done with this node.
-                return true;
-            }
-            // This node made it past the above return statement, so it must either
-            // contain, be within, or overlap with the selected polygon.
-            // Check if this is a leaf node.
-            if (node.data
-                && booleanPointInPolygon(turfPoint([].slice.call(getCellCoords(node.data))), selectedPolygon)) {
-                // This node has data, so it is a leaf node representing one data point,
-                // and we have verified that the point is in the selected polygon.
-                pickingInfos.push(node.data);
-            }
-            // Return false because we are not done.
-            // We want to visit the children of this node.
-            return false;
-        });
-        onSelect({ pickingInfos });
-    }
-    renderLayers() {
-        const { onSelect } = this.props;
-        const mode = MODE_MAP[this.props.selectionType] || ViewMode;
-        const inheritedProps = {};
-        PASS_THROUGH_PROPS.forEach((p) => {
-            if (this.props[p] !== undefined)
-                inheritedProps[p] = this.props[p];
-        });
-        const layers = [
-            new EditableGeoJsonLayer(this.getSubLayerProps({
-                id: LAYER_ID_GEOJSON,
-                pickable: true,
-                mode,
-                modeConfig: {
-                    dragToDraw: true,
-                },
-                selectedFeatureIndexes: [],
-                data: EMPTY_DATA,
-                onEdit: ({ updatedData, editType }) => {
-                    if (editType === EDIT_TYPE_ADD) {
-                        const { coordinates } = updatedData.features[0].geometry;
-                        this._selectPolygonObjects(coordinates);
-                    }
-                    else if (editType === EDIT_TYPE_CLEAR) {
-                        // We want to select an empty array to clear any previous selection.
-                        onSelect({ pickingInfos: [] });
-                    }
-                },
-                _subLayerProps: {
-                    guides: {
-                        pointType: 'circle',
-                        _subLayerProps: {
-                            'points-circle': {
-                                // Styling for editHandles goes here.
-                                // Reference: https://github.com/uber/nebula.gl/issues/618#issuecomment-898466319
-                                type: ScatterplotLayer,
-                                radiusScale: 1,
-                                stroked: true,
-                                getLineWidth: 1,
-                                radiusMinPixels: 1,
-                                radiusMaxPixels: 3,
-                                getPointRadius: 2,
-                            },
-                        },
-                    },
-                },
-                ...inheritedProps,
-            })),
-        ];
-        return layers;
-    }
-}
-SelectionLayer.layerName = 'SelectionLayer';
-SelectionLayer.defaultProps = defaultProps;

package/dist/selection-utils.js

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

@@ -1,3 +0,0 @@
-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';