@vitessce/gl 2.0.3 → 3.0.0

package/dist-tsc/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.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/dist-tsc/PixelatedBitmapLayer.d.ts

@@ -0,0 +1,10 @@
+declare class PixelatedBitmapLayer {
+    renderLayers(): any;
+}
+declare namespace PixelatedBitmapLayer {
+    export const layerName: string;
+    export { defaultProps };
+}
+export default PixelatedBitmapLayer;
+declare const defaultProps: any;
+//# sourceMappingURL=PixelatedBitmapLayer.d.ts.map

package/dist-tsc/PixelatedBitmapLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PixelatedBitmapLayer.d.ts","sourceRoot":"","sources":["../src/PixelatedBitmapLayer.js"],"names":[],"mappings":"AAiBA;IACE,oBAOC;CACF;;;;;;AApBD,gCASE"}

package/dist-tsc/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.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/dist-tsc/ScaledExpressionExtension/ScaledExpressionExtension.d.ts

@@ -0,0 +1,62 @@
+declare class ScaledExpressionExtension {
+    getShaders(): {
+        modules: {
+            name: string;
+            vs: string;
+            inject: {
+                'vs:DECKGL_FILTER_COLOR': string;
+            };
+        }[];
+        defines: {
+            COLORMAP_FUNC: any;
+        };
+    };
+    updateState({ props, oldProps }: {
+        props: any;
+        oldProps: any;
+    }): void;
+    initializeState(): void;
+    draw(): void;
+}
+declare namespace ScaledExpressionExtension {
+    export const extensionName: string;
+    export { defaultProps };
+}
+export default ScaledExpressionExtension;
+declare namespace defaultProps {
+    namespace colormap {
+        export const type: string;
+        export { GLSL_COLORMAP_DEFAULT as value };
+        export const compare: boolean;
+    }
+    namespace colorScaleLo {
+        const type_1: string;
+        export { type_1 as type };
+        export const value: number;
+        const compare_1: boolean;
+        export { compare_1 as compare };
+    }
+    namespace colorScaleHi {
+        const type_2: string;
+        export { type_2 as type };
+        const value_1: number;
+        export { value_1 as value };
+        const compare_2: boolean;
+        export { compare_2 as compare };
+    }
+    const isExpressionMode: boolean;
+    namespace getExpressionValue {
+        const type_3: string;
+        export { type_3 as type };
+        const value_2: number;
+        export { value_2 as value };
+    }
+    namespace getSelectionState {
+        const type_4: string;
+        export { type_4 as type };
+        const value_3: number;
+        export { value_3 as value };
+    }
+}
+import { GLSL_COLORMAP_DEFAULT } from "../constants.js";
+//# sourceMappingURL=ScaledExpressionExtension.d.ts.map

package/dist-tsc/ScaledExpressionExtension/ScaledExpressionExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScaledExpressionExtension.d.ts","sourceRoot":"","sources":["../../src/ScaledExpressionExtension/ScaledExpressionExtension.js"],"names":[],"mappings":"AAgBA;IACE;;;;;;;;;;;MAUC;IAED;;;aA+BC;IAED,wBAwBC;IAED,aAwBC;CACF"}

package/dist-tsc/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.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/dist-tsc/ScaledExpressionExtension/index.d.ts

@@ -0,0 +1,3 @@
+export default ScaledExpressionExtension;
+import ScaledExpressionExtension from "./ScaledExpressionExtension.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/ScaledExpressionExtension/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ScaledExpressionExtension/index.js"],"names":[],"mappings":""}

package/dist-tsc/ScaledExpressionExtension/index.js

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

package/dist-tsc/ScaledExpressionExtension/shader-module.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    export const name: string;
+    export { vs };
+    export { inject };
+}
+export default _default;
+/**
+ *
+ * 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
+ */
+declare const vs: string;
+declare const inject: {
+    'vs:DECKGL_FILTER_COLOR': string;
+};
+//# sourceMappingURL=shader-module.d.ts.map

package/dist-tsc/ScaledExpressionExtension/shader-module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/ScaledExpressionExtension/shader-module.js"],"names":[],"mappings":";;;;;;AAEA;;;;;GAKG;AACH,yBAUE;AAEF;;EAQE"}

package/dist-tsc/ScaledExpressionExtension/shader-module.js

@@ -0,0 +1,32 @@
+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/dist-tsc/SelectionExtension/SelectionExtension.d.ts

@@ -0,0 +1,18 @@
+declare class SelectionExtension {
+    getShaders(): {
+        modules: {
+            name: string;
+            vs: string;
+            inject: {
+                'vs:DECKGL_FILTER_GL_POSITION': string;
+                'fs:#main-start': string;
+            };
+        }[];
+    };
+    initializeState(context: any, extension: any): void;
+}
+declare namespace SelectionExtension {
+    const extensionName: string;
+}
+export default SelectionExtension;
+//# sourceMappingURL=SelectionExtension.d.ts.map

package/dist-tsc/SelectionExtension/SelectionExtension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionExtension.d.ts","sourceRoot":"","sources":["../../src/SelectionExtension/SelectionExtension.js"],"names":[],"mappings":"AAMA;IAEE;;;;;;;;;MAIC;IAED,oDAgBC;CACF"}

package/dist-tsc/SelectionExtension/SelectionExtension.js

@@ -0,0 +1,31 @@
+/* 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/dist-tsc/SelectionExtension/index.d.ts

@@ -0,0 +1,3 @@
+export default SelectionExtension;
+import SelectionExtension from "./SelectionExtension.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/SelectionExtension/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SelectionExtension/index.js"],"names":[],"mappings":""}

package/dist-tsc/SelectionExtension/index.js

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

package/dist-tsc/SelectionExtension/shader-module.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    export const name: string;
+    export { vs };
+    export { inject };
+}
+export default _default;
+declare const vs: "\nattribute float isSelected;\n";
+declare const inject: {
+    'vs:DECKGL_FILTER_GL_POSITION': string;
+    'fs:#main-start': string;
+};
+//# sourceMappingURL=shader-module.d.ts.map

package/dist-tsc/SelectionExtension/shader-module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/SelectionExtension/shader-module.js"],"names":[],"mappings":";;;;;;AAAA,oDAEE;AAEF;;;EAWE"}

package/dist-tsc/SelectionExtension/shader-module.js

@@ -0,0 +1,20 @@
+const vs = `
+attribute float isSelected;
+`;
+const inject = {
+    'vs:DECKGL_FILTER_GL_POSITION': `
+    position.z += (1. - isSelected) * .00005; // Add a small z offset for unselected points in the positive direction i.e into the screen.
+  `,
+    'fs:#main-start': ` // Gets rid of bad border effects (active after deck.gl 8.5): https://github.com/visgl/deck.gl/pull/6081
+    float distToCenterNew = length(unitPosition) * outerRadiusPixels;
+    float inCircleNew = step(distToCenterNew, outerRadiusPixels);
+    if (inCircleNew == 0.0) {
+      discard;
+    }
+  `,
+};
+export default {
+    name: 'selection',
+    vs,
+    inject,
+};

package/dist-tsc/SelectionLayer.d.ts

@@ -0,0 +1,15 @@
+declare class SelectionLayer {
+    _selectPolygonObjects(coordinates: any): void;
+    renderLayers(): EditableGeoJsonLayer[];
+}
+declare namespace SelectionLayer {
+    export const layerName: string;
+    export { defaultProps };
+}
+export default SelectionLayer;
+import { EditableGeoJsonLayer } from "@nebula.gl/layers";
+declare namespace defaultProps {
+    const layerIds: never[];
+    function onSelect(): void;
+}
+//# sourceMappingURL=SelectionLayer.d.ts.map

package/dist-tsc/SelectionLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionLayer.d.ts","sourceRoot":"","sources":["../src/SelectionLayer.js"],"names":[],"mappings":"AAqEA;IACE,8CA0DC;IAED,uCAoDC;CACF;;;;;;;;;IAxJW,0BAAQ"}