@vitessce/gl 2.0.3 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{deflate.04b04545.mjs → deflate-36830437.js} +2 -2
- package/dist/{index.9aaafdeb.mjs → index-d34ff949.js} +13285 -10710
- package/dist/index.js +33 -0
- package/dist/{jpeg.060c9bc0.mjs → jpeg-a66190dc.js} +1 -1
- package/dist/{lerc.62b02b29.mjs → lerc-21af7ec8.js} +76 -5
- package/dist/{lzw.19cdd4de.mjs → lzw-76194936.js} +1 -1
- package/dist/{packbits.03fc75de.mjs → packbits-bf7850c4.js} +1 -1
- package/dist/{pako.esm.0e57f323.mjs → pako.esm-68f84e2a.js} +97 -15
- package/dist/{raw.739ce163.mjs → raw-05d82ade.js} +1 -1
- package/dist/{webimage.4e868fb9.mjs → webimage-1ceac06a.js} +1 -1
- package/dist-tsc/BitmaskLayer.d.ts +74 -0
- package/dist-tsc/BitmaskLayer.d.ts.map +1 -0
- package/dist-tsc/BitmaskLayer.js +142 -0
- package/dist-tsc/HeatmapBitmapLayer.d.ts +93 -0
- package/dist-tsc/HeatmapBitmapLayer.d.ts.map +1 -0
- package/dist-tsc/HeatmapBitmapLayer.js +123 -0
- package/dist-tsc/HeatmapCompositeTextLayer.d.ts +11 -0
- package/dist-tsc/HeatmapCompositeTextLayer.d.ts.map +1 -0
- package/dist-tsc/HeatmapCompositeTextLayer.js +129 -0
- package/dist-tsc/PaddedExpressionHeatmapBitmapLayer.d.ts +93 -0
- package/dist-tsc/PaddedExpressionHeatmapBitmapLayer.d.ts.map +1 -0
- package/dist-tsc/PaddedExpressionHeatmapBitmapLayer.js +129 -0
- package/dist-tsc/PixelatedBitmapLayer.d.ts +10 -0
- package/dist-tsc/PixelatedBitmapLayer.d.ts.map +1 -0
- package/dist-tsc/PixelatedBitmapLayer.js +26 -0
- package/dist-tsc/ScaledExpressionExtension/ScaledExpressionExtension.d.ts +62 -0
- package/dist-tsc/ScaledExpressionExtension/ScaledExpressionExtension.d.ts.map +1 -0
- package/dist-tsc/ScaledExpressionExtension/ScaledExpressionExtension.js +105 -0
- package/dist-tsc/ScaledExpressionExtension/index.d.ts +3 -0
- package/dist-tsc/ScaledExpressionExtension/index.d.ts.map +1 -0
- package/dist-tsc/ScaledExpressionExtension/index.js +2 -0
- package/dist-tsc/ScaledExpressionExtension/shader-module.d.ts +17 -0
- package/dist-tsc/ScaledExpressionExtension/shader-module.d.ts.map +1 -0
- package/dist-tsc/ScaledExpressionExtension/shader-module.js +32 -0
- package/dist-tsc/SelectionExtension/SelectionExtension.d.ts +18 -0
- package/dist-tsc/SelectionExtension/SelectionExtension.d.ts.map +1 -0
- package/dist-tsc/SelectionExtension/SelectionExtension.js +31 -0
- package/dist-tsc/SelectionExtension/index.d.ts +3 -0
- package/dist-tsc/SelectionExtension/index.d.ts.map +1 -0
- package/dist-tsc/SelectionExtension/index.js +2 -0
- package/dist-tsc/SelectionExtension/shader-module.d.ts +12 -0
- package/dist-tsc/SelectionExtension/shader-module.d.ts.map +1 -0
- package/dist-tsc/SelectionExtension/shader-module.js +20 -0
- package/dist-tsc/SelectionLayer.d.ts +15 -0
- package/dist-tsc/SelectionLayer.d.ts.map +1 -0
- package/dist-tsc/SelectionLayer.js +157 -0
- package/dist-tsc/bitmask-layer-shaders.d.ts +3 -0
- package/dist-tsc/bitmask-layer-shaders.d.ts.map +1 -0
- package/dist-tsc/bitmask-layer-shaders.js +90 -0
- package/dist-tsc/constants.d.ts +8 -0
- package/dist-tsc/constants.d.ts.map +1 -0
- package/dist-tsc/constants.js +11 -0
- package/dist-tsc/deck.d.ts +2 -0
- package/dist-tsc/deck.d.ts.map +1 -0
- package/dist-tsc/deck.js +4 -0
- package/dist-tsc/glsl/index.d.ts +2 -0
- package/dist-tsc/glsl/index.d.ts.map +1 -0
- package/dist-tsc/glsl/index.js +340 -0
- package/dist-tsc/heatmap-bitmap-layer-shaders.d.ts +13 -0
- package/dist-tsc/heatmap-bitmap-layer-shaders.d.ts.map +1 -0
- package/dist-tsc/heatmap-bitmap-layer-shaders.js +109 -0
- package/dist-tsc/heatmap-constants.d.ts +20 -0
- package/dist-tsc/heatmap-constants.d.ts.map +1 -0
- package/dist-tsc/heatmap-constants.js +27 -0
- package/dist-tsc/index.d.ts +14 -0
- package/dist-tsc/index.d.ts.map +1 -0
- package/dist-tsc/index.js +16 -13
- package/dist-tsc/luma.d.ts +2 -0
- package/dist-tsc/luma.d.ts.map +1 -0
- package/dist-tsc/luma.js +2 -0
- package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.d.ts +13 -0
- package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.d.ts.map +1 -0
- package/dist-tsc/padded-expression-heatmap-bitmap-layer-shaders.js +143 -0
- package/dist-tsc/selection-utils.d.ts +19 -0
- package/dist-tsc/selection-utils.d.ts.map +1 -0
- package/dist-tsc/selection-utils.js +92 -0
- package/dist-tsc/viv.d.ts +2 -0
- package/dist-tsc/viv.d.ts.map +1 -0
- package/dist-tsc/viv.js +3 -0
- package/package.json +16 -7
- package/src/BitmaskLayer.js +14 -4
- package/src/HeatmapBitmapLayer.js +3 -3
- package/src/HeatmapCompositeTextLayer.js +1 -1
- package/src/PaddedExpressionHeatmapBitmapLayer.js +3 -3
- package/src/PixelatedBitmapLayer.js +1 -1
- package/src/ScaledExpressionExtension/ScaledExpressionExtension.js +2 -2
- package/src/ScaledExpressionExtension/index.js +1 -1
- package/src/ScaledExpressionExtension/shader-module.js +1 -1
- package/src/SelectionExtension/SelectionExtension.js +1 -1
- package/src/SelectionExtension/index.js +1 -1
- package/src/SelectionLayer.js +1 -12
- package/src/bitmask-layer-shaders.js +1 -1
- package/src/heatmap-bitmap-layer-shaders.js +1 -1
- package/src/index.js +16 -13
- package/src/padded-expression-heatmap-bitmap-layer-shaders.js +1 -1
- package/src/selection-utils.js +1 -1
- package/dist/index.mjs +0 -33
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
|
|
2
|
+
import { project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
|
|
3
|
+
import { Texture2D, isWebGL2 } from '@luma.gl/core';
|
|
4
|
+
import { XRLayer } from '@hms-dbmi/viv';
|
|
5
|
+
import { fs, vs } from './bitmask-layer-shaders.js';
|
|
6
|
+
import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER, } from './constants.js';
|
|
7
|
+
function padWithDefault(arr, defaultValue, padWidth) {
|
|
8
|
+
const newArr = [...arr];
|
|
9
|
+
for (let i = 0; i < padWidth; i += 1) {
|
|
10
|
+
newArr.push(defaultValue);
|
|
11
|
+
}
|
|
12
|
+
return newArr;
|
|
13
|
+
}
|
|
14
|
+
const defaultProps = {
|
|
15
|
+
hoveredCell: { type: 'number', value: null, compare: true },
|
|
16
|
+
// We do not want to deep-compare cellColorData,
|
|
17
|
+
// as it is potentially a TypedArray with millions of elements.
|
|
18
|
+
// For `compare`: "if a number is supplied, indicates the maximum depth to deep-compare,
|
|
19
|
+
// where 0 is shallow comparison and -1 is infinite depth. true is equivalent to 1."
|
|
20
|
+
// Reference: https://deck.gl/docs/developer-guide/custom-layers/prop-types#array
|
|
21
|
+
cellColorData: { type: 'object', value: null, compare: 0 },
|
|
22
|
+
colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
|
|
23
|
+
// Same as with cellColorData, we do not want to deep-compare expressionData.
|
|
24
|
+
expressionData: { type: 'object', value: null, compare: 0 },
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* A BitmapLayer that performs aggregation in the fragment shader,
|
|
28
|
+
* and renders its texture from a Uint8Array rather than an ImageData.
|
|
29
|
+
*/
|
|
30
|
+
export default class BitmaskLayer extends XRLayer {
|
|
31
|
+
// eslint-disable-next-line class-methods-use-this
|
|
32
|
+
getShaders() {
|
|
33
|
+
const { colormap } = this.props;
|
|
34
|
+
return {
|
|
35
|
+
fs,
|
|
36
|
+
vs,
|
|
37
|
+
modules: [project32, picking],
|
|
38
|
+
defines: {
|
|
39
|
+
[COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
|
|
40
|
+
? colormap
|
|
41
|
+
: GLSL_COLORMAP_DEFAULT,
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
updateState({ props, oldProps, changeFlags }) {
|
|
46
|
+
super.updateState({ props, oldProps, changeFlags });
|
|
47
|
+
// Check the cellColorData to determine whether
|
|
48
|
+
// to update the texture.
|
|
49
|
+
if (props.cellColorData !== oldProps.cellColorData) {
|
|
50
|
+
this.setColorTexture();
|
|
51
|
+
}
|
|
52
|
+
// Check the expressionData to determine whether
|
|
53
|
+
// to update the texture.
|
|
54
|
+
if (props.expressionData !== oldProps.expressionData) {
|
|
55
|
+
const { expressionData, cellTexHeight, cellTexWidth } = this.props;
|
|
56
|
+
const expressionTex = this.dataToTexture(expressionData, cellTexWidth, cellTexHeight);
|
|
57
|
+
this.setState({ expressionTex });
|
|
58
|
+
}
|
|
59
|
+
if (props.colormap !== oldProps.colormap) {
|
|
60
|
+
const { gl } = this.context;
|
|
61
|
+
if (this.state.model) {
|
|
62
|
+
this.state.model.delete();
|
|
63
|
+
}
|
|
64
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
65
|
+
this.setState({ model: this._getModel(gl) });
|
|
66
|
+
this.getAttributeManager().invalidateAll();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
setColorTexture() {
|
|
70
|
+
const { cellColorData: data, cellTexHeight: height, cellTexWidth: width, } = this.props;
|
|
71
|
+
const colorTex = new Texture2D(this.context.gl, {
|
|
72
|
+
width,
|
|
73
|
+
height,
|
|
74
|
+
// Only use Float32 so we don't have to write two shaders
|
|
75
|
+
data,
|
|
76
|
+
// we don't want or need mimaps
|
|
77
|
+
mipmaps: false,
|
|
78
|
+
parameters: {
|
|
79
|
+
// NEAREST for integer data
|
|
80
|
+
[GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
|
|
81
|
+
[GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
|
|
82
|
+
// CLAMP_TO_EDGE to remove tile artifacts
|
|
83
|
+
[GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
|
|
84
|
+
[GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
|
|
85
|
+
},
|
|
86
|
+
format: GL.RGB,
|
|
87
|
+
dataFormat: GL.RGB,
|
|
88
|
+
type: GL.UNSIGNED_BYTE,
|
|
89
|
+
});
|
|
90
|
+
this.setState({ colorTex });
|
|
91
|
+
}
|
|
92
|
+
draw(opts) {
|
|
93
|
+
const { uniforms } = opts;
|
|
94
|
+
const { channelsVisible, hoveredCell, colorScaleLo, colorScaleHi, isExpressionMode, } = this.props;
|
|
95
|
+
const { textures, model, colorTex, expressionTex, } = this.state;
|
|
96
|
+
// Render the image
|
|
97
|
+
if (textures && model && colorTex) {
|
|
98
|
+
model
|
|
99
|
+
.setUniforms(Object.assign({}, uniforms, {
|
|
100
|
+
hovered: hoveredCell || 0,
|
|
101
|
+
colorTex,
|
|
102
|
+
expressionTex,
|
|
103
|
+
colorTexHeight: colorTex.height,
|
|
104
|
+
colorTexWidth: colorTex.width,
|
|
105
|
+
channelsVisible: padWithDefault(channelsVisible, false,
|
|
106
|
+
// There are six texture entries on the shaders
|
|
107
|
+
6 - channelsVisible.length),
|
|
108
|
+
uColorScaleRange: [colorScaleLo, colorScaleHi],
|
|
109
|
+
uIsExpressionMode: isExpressionMode,
|
|
110
|
+
...textures,
|
|
111
|
+
}))
|
|
112
|
+
.draw();
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
/**
|
|
116
|
+
* This function creates textures from the data
|
|
117
|
+
*/
|
|
118
|
+
dataToTexture(data, width, height) {
|
|
119
|
+
const isWebGL2On = isWebGL2(this.context.gl);
|
|
120
|
+
return new Texture2D(this.context.gl, {
|
|
121
|
+
width,
|
|
122
|
+
height,
|
|
123
|
+
// Only use Float32 so we don't have to write two shaders
|
|
124
|
+
data: new Float32Array(data),
|
|
125
|
+
// we don't want or need mimaps
|
|
126
|
+
mipmaps: false,
|
|
127
|
+
parameters: {
|
|
128
|
+
// NEAREST for integer data
|
|
129
|
+
[GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
|
|
130
|
+
[GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
|
|
131
|
+
// CLAMP_TO_EDGE to remove tile artifacts
|
|
132
|
+
[GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
|
|
133
|
+
[GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
|
|
134
|
+
},
|
|
135
|
+
format: isWebGL2On ? GL.R32F : GL.LUMINANCE,
|
|
136
|
+
dataFormat: isWebGL2On ? GL.RED : GL.LUMINANCE,
|
|
137
|
+
type: GL.FLOAT,
|
|
138
|
+
});
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
BitmaskLayer.layerName = 'BitmaskLayer';
|
|
142
|
+
BitmaskLayer.defaultProps = defaultProps;
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A BitmapLayer that performs aggregation in the fragment shader,
|
|
3
|
+
* and renders its texture from a Uint8Array rather than an ImageData.
|
|
4
|
+
*/
|
|
5
|
+
declare class HeatmapBitmapLayer {
|
|
6
|
+
/**
|
|
7
|
+
* Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
|
|
8
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
|
|
9
|
+
* @param {object} shaders
|
|
10
|
+
* @returns {object} Merged shaders.
|
|
11
|
+
*/
|
|
12
|
+
_getShaders(shaders: object): object;
|
|
13
|
+
/**
|
|
14
|
+
* Need to override to provide custom shaders.
|
|
15
|
+
*/
|
|
16
|
+
getShaders(): object;
|
|
17
|
+
updateState(args: any): void;
|
|
18
|
+
/**
|
|
19
|
+
* Need to override to provide additional uniform values.
|
|
20
|
+
* Simplified by removing video-related code.
|
|
21
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
|
|
22
|
+
* @param {*} opts
|
|
23
|
+
*/
|
|
24
|
+
draw(opts: any): void;
|
|
25
|
+
/**
|
|
26
|
+
* Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
|
|
27
|
+
* object.
|
|
28
|
+
* Simplified by removing video-related code.
|
|
29
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
|
|
30
|
+
* @param {Uint8Array} image
|
|
31
|
+
*/
|
|
32
|
+
loadTexture(image: Uint8Array): void;
|
|
33
|
+
}
|
|
34
|
+
declare namespace HeatmapBitmapLayer {
|
|
35
|
+
export const layerName: string;
|
|
36
|
+
export { defaultProps };
|
|
37
|
+
}
|
|
38
|
+
export default HeatmapBitmapLayer;
|
|
39
|
+
declare namespace defaultProps {
|
|
40
|
+
namespace image {
|
|
41
|
+
const type: string;
|
|
42
|
+
const value: null;
|
|
43
|
+
const async: boolean;
|
|
44
|
+
}
|
|
45
|
+
namespace colormap {
|
|
46
|
+
const type_1: string;
|
|
47
|
+
export { type_1 as type };
|
|
48
|
+
export { GLSL_COLORMAP_DEFAULT as value };
|
|
49
|
+
export const compare: boolean;
|
|
50
|
+
}
|
|
51
|
+
namespace bounds {
|
|
52
|
+
const type_2: string;
|
|
53
|
+
export { type_2 as type };
|
|
54
|
+
const value_1: number[];
|
|
55
|
+
export { value_1 as value };
|
|
56
|
+
const compare_1: boolean;
|
|
57
|
+
export { compare_1 as compare };
|
|
58
|
+
}
|
|
59
|
+
namespace aggSizeX {
|
|
60
|
+
const type_3: string;
|
|
61
|
+
export { type_3 as type };
|
|
62
|
+
const value_2: number;
|
|
63
|
+
export { value_2 as value };
|
|
64
|
+
const compare_2: boolean;
|
|
65
|
+
export { compare_2 as compare };
|
|
66
|
+
}
|
|
67
|
+
namespace aggSizeY {
|
|
68
|
+
const type_4: string;
|
|
69
|
+
export { type_4 as type };
|
|
70
|
+
const value_3: number;
|
|
71
|
+
export { value_3 as value };
|
|
72
|
+
const compare_3: boolean;
|
|
73
|
+
export { compare_3 as compare };
|
|
74
|
+
}
|
|
75
|
+
namespace colorScaleLo {
|
|
76
|
+
const type_5: string;
|
|
77
|
+
export { type_5 as type };
|
|
78
|
+
const value_4: number;
|
|
79
|
+
export { value_4 as value };
|
|
80
|
+
const compare_4: boolean;
|
|
81
|
+
export { compare_4 as compare };
|
|
82
|
+
}
|
|
83
|
+
namespace colorScaleHi {
|
|
84
|
+
const type_6: string;
|
|
85
|
+
export { type_6 as type };
|
|
86
|
+
const value_5: number;
|
|
87
|
+
export { value_5 as value };
|
|
88
|
+
const compare_5: boolean;
|
|
89
|
+
export { compare_5 as compare };
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
import { GLSL_COLORMAP_DEFAULT } from "./constants.js";
|
|
93
|
+
//# sourceMappingURL=HeatmapBitmapLayer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatmapBitmapLayer.d.ts","sourceRoot":"","sources":["../src/HeatmapBitmapLayer.js"],"names":[],"mappings":"AAqBA;;;GAGG;AACH;IACE;;;;;OAKG;IAEH,qBAJW,MAAM,GACJ,MAAM,CAYlB;IAED;;OAEG;IACH,qBAcC;IAED,6BAYC;IAED;;;;;OAKG;IACH,sBAoBC;IAED;;;;;;OAMG;IACH,mBAFW,UAAU,QA8BpB;CACF"}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
|
|
2
|
+
import { _mergeShaders, project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
|
|
3
|
+
import { BitmapLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
|
|
4
|
+
import { Texture2D } from '@luma.gl/core';
|
|
5
|
+
import { PIXELATED_TEXTURE_PARAMETERS, TILE_SIZE } from './heatmap-constants.js';
|
|
6
|
+
import { GLSL_COLORMAPS, GLSL_COLORMAP_DEFAULT, COLORMAP_SHADER_PLACEHOLDER, } from './constants.js';
|
|
7
|
+
import { vertexShader, fragmentShader } from './heatmap-bitmap-layer-shaders.js';
|
|
8
|
+
const defaultProps = {
|
|
9
|
+
image: { type: 'object', value: null, async: true },
|
|
10
|
+
colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
|
|
11
|
+
bounds: { type: 'array', value: [1, 0, 0, 1], compare: true },
|
|
12
|
+
aggSizeX: { type: 'number', value: 8.0, compare: true },
|
|
13
|
+
aggSizeY: { type: 'number', value: 8.0, compare: true },
|
|
14
|
+
colorScaleLo: { type: 'number', value: 0.0, compare: true },
|
|
15
|
+
colorScaleHi: { type: 'number', value: 1.0, compare: true },
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* A BitmapLayer that performs aggregation in the fragment shader,
|
|
19
|
+
* and renders its texture from a Uint8Array rather than an ImageData.
|
|
20
|
+
*/
|
|
21
|
+
export default class HeatmapBitmapLayer extends BitmapLayer {
|
|
22
|
+
/**
|
|
23
|
+
* Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
|
|
24
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
|
|
25
|
+
* @param {object} shaders
|
|
26
|
+
* @returns {object} Merged shaders.
|
|
27
|
+
*/
|
|
28
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
29
|
+
_getShaders(shaders) {
|
|
30
|
+
this.props.extensions.forEach((extension) => {
|
|
31
|
+
// eslint-disable-next-line no-param-reassign
|
|
32
|
+
shaders = _mergeShaders(shaders, extension.getShaders.call(this, extension));
|
|
33
|
+
});
|
|
34
|
+
return shaders;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Need to override to provide custom shaders.
|
|
38
|
+
*/
|
|
39
|
+
getShaders() {
|
|
40
|
+
const { colormap } = this.props;
|
|
41
|
+
const fragmentShaderWithColormap = GLSL_COLORMAPS.includes(colormap)
|
|
42
|
+
? fragmentShader.replace(COLORMAP_SHADER_PLACEHOLDER, colormap)
|
|
43
|
+
: fragmentShader.replace(COLORMAP_SHADER_PLACEHOLDER, GLSL_COLORMAP_DEFAULT);
|
|
44
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
45
|
+
return this._getShaders({
|
|
46
|
+
vs: vertexShader,
|
|
47
|
+
fs: fragmentShaderWithColormap,
|
|
48
|
+
modules: [project32, picking],
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
updateState(args) {
|
|
52
|
+
super.updateState(args);
|
|
53
|
+
this.loadTexture(this.props.image);
|
|
54
|
+
const { props, oldProps } = args;
|
|
55
|
+
if (props.colormap !== oldProps.colormap) {
|
|
56
|
+
const { gl } = this.context;
|
|
57
|
+
// eslint-disable-next-line no-unused-expressions
|
|
58
|
+
this.state.model?.delete();
|
|
59
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
60
|
+
this.state.model = this._getModel(gl);
|
|
61
|
+
this.getAttributeManager().invalidateAll();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
/**
|
|
65
|
+
* Need to override to provide additional uniform values.
|
|
66
|
+
* Simplified by removing video-related code.
|
|
67
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
|
|
68
|
+
* @param {*} opts
|
|
69
|
+
*/
|
|
70
|
+
draw(opts) {
|
|
71
|
+
const { uniforms } = opts;
|
|
72
|
+
const { bitmapTexture, model } = this.state;
|
|
73
|
+
const { aggSizeX, aggSizeY, colorScaleLo, colorScaleHi, } = this.props;
|
|
74
|
+
// Render the image
|
|
75
|
+
if (bitmapTexture && model) {
|
|
76
|
+
model
|
|
77
|
+
.setUniforms(Object.assign({}, uniforms, {
|
|
78
|
+
uBitmapTexture: bitmapTexture,
|
|
79
|
+
uTextureSize: [TILE_SIZE, TILE_SIZE],
|
|
80
|
+
uAggSize: [aggSizeX, aggSizeY],
|
|
81
|
+
uColorScaleRange: [colorScaleLo, colorScaleHi],
|
|
82
|
+
}))
|
|
83
|
+
.draw();
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
|
|
88
|
+
* object.
|
|
89
|
+
* Simplified by removing video-related code.
|
|
90
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
|
|
91
|
+
* @param {Uint8Array} image
|
|
92
|
+
*/
|
|
93
|
+
loadTexture(image) {
|
|
94
|
+
const { gl } = this.context;
|
|
95
|
+
if (this.state.bitmapTexture) {
|
|
96
|
+
this.state.bitmapTexture.delete();
|
|
97
|
+
}
|
|
98
|
+
if (image instanceof Texture2D) {
|
|
99
|
+
this.setState({
|
|
100
|
+
bitmapTexture: image,
|
|
101
|
+
});
|
|
102
|
+
}
|
|
103
|
+
else if (image) {
|
|
104
|
+
this.setState({
|
|
105
|
+
bitmapTexture: new Texture2D(gl, {
|
|
106
|
+
data: image,
|
|
107
|
+
mipmaps: false,
|
|
108
|
+
parameters: PIXELATED_TEXTURE_PARAMETERS,
|
|
109
|
+
// Each color contains a single luminance value.
|
|
110
|
+
// When sampled, rgb are all set to this luminance, alpha is 1.0.
|
|
111
|
+
// Reference: https://luma.gl/docs/api-reference/webgl/texture#texture-formats
|
|
112
|
+
format: GL.LUMINANCE,
|
|
113
|
+
dataFormat: GL.LUMINANCE,
|
|
114
|
+
type: GL.UNSIGNED_BYTE,
|
|
115
|
+
width: TILE_SIZE,
|
|
116
|
+
height: TILE_SIZE,
|
|
117
|
+
}),
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
HeatmapBitmapLayer.layerName = 'HeatmapBitmapLayer';
|
|
123
|
+
HeatmapBitmapLayer.defaultProps = defaultProps;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
declare class HeatmapCompositeTextLayer {
|
|
2
|
+
_renderAxisTopLayers(): any[];
|
|
3
|
+
_renderCornerLayers(): any;
|
|
4
|
+
_renderAxisLeftLayers(): any[];
|
|
5
|
+
renderLayers(): any;
|
|
6
|
+
}
|
|
7
|
+
declare namespace HeatmapCompositeTextLayer {
|
|
8
|
+
const layerName: string;
|
|
9
|
+
}
|
|
10
|
+
export default HeatmapCompositeTextLayer;
|
|
11
|
+
//# sourceMappingURL=HeatmapCompositeTextLayer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeatmapCompositeTextLayer.d.ts","sourceRoot":"","sources":["../src/HeatmapCompositeTextLayer.js"],"names":[],"mappings":"AAYA;IACE,8BA2CC;IAED,2BAmCC;IAED,+BA2CC;IAED,oBAYC;CACF"}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
/* eslint-disable no-underscore-dangle */
|
|
2
|
+
import { COORDINATE_SYSTEM, CompositeLayer } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
|
|
3
|
+
import { TextLayer } from '@deck.gl/layers'; // eslint-disable-line import/no-extraneous-dependencies
|
|
4
|
+
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';
|
|
5
|
+
export default class HeatmapCompositeTextLayer extends CompositeLayer {
|
|
6
|
+
_renderAxisTopLayers() {
|
|
7
|
+
const { axisTopLabelData, matrixLeft, width, matrixWidth, viewWidth, theme, targetX, targetY, axisTopTitle, cellWidth, axisOffsetTop, scaleFactor, hideTopLabels, } = this.props;
|
|
8
|
+
const showAxisTopLabels = cellWidth >= AXIS_LABEL_TEXT_SIZE;
|
|
9
|
+
const axisLabelTop = targetY + (axisOffsetTop - AXIS_MARGIN) / 2 / scaleFactor;
|
|
10
|
+
return hideTopLabels ? [] : [
|
|
11
|
+
new TextLayer({
|
|
12
|
+
id: 'axisTopLabels',
|
|
13
|
+
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
14
|
+
data: axisTopLabelData,
|
|
15
|
+
getText: d => d[1],
|
|
16
|
+
getPosition: d => [matrixLeft + ((d[0] + 0.5) / width) * matrixWidth, axisLabelTop],
|
|
17
|
+
getTextAnchor: 'start',
|
|
18
|
+
getColor: () => THEME_TO_TEXT_COLOR[theme],
|
|
19
|
+
getSize: (showAxisTopLabels ? AXIS_LABEL_TEXT_SIZE : 0),
|
|
20
|
+
getAngle: 75,
|
|
21
|
+
fontFamily: AXIS_FONT_FAMILY,
|
|
22
|
+
updateTriggers: {
|
|
23
|
+
getPosition: [axisLabelTop, matrixLeft, matrixWidth, viewWidth],
|
|
24
|
+
getSize: [showAxisTopLabels],
|
|
25
|
+
getColor: [theme],
|
|
26
|
+
},
|
|
27
|
+
}),
|
|
28
|
+
new TextLayer({
|
|
29
|
+
id: 'axisTopTitle',
|
|
30
|
+
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
31
|
+
data: [{ title: axisTopTitle }],
|
|
32
|
+
getText: d => d.title,
|
|
33
|
+
getPosition: [targetX, targetY],
|
|
34
|
+
getTextAnchor: 'middle',
|
|
35
|
+
getColor: () => THEME_TO_TEXT_COLOR[theme],
|
|
36
|
+
getSize: (!showAxisTopLabels ? AXIS_TITLE_TEXT_SIZE : 0),
|
|
37
|
+
getAngle: 0,
|
|
38
|
+
fontFamily: AXIS_FONT_FAMILY,
|
|
39
|
+
updateTriggers: {
|
|
40
|
+
getSize: [showAxisTopLabels],
|
|
41
|
+
getColor: [theme],
|
|
42
|
+
},
|
|
43
|
+
}),
|
|
44
|
+
];
|
|
45
|
+
}
|
|
46
|
+
_renderCornerLayers() {
|
|
47
|
+
const { theme, targetX, targetY, axisOffsetTop, scaleFactor, cellColorLabelsData, axisOffsetLeft, transpose, } = this.props;
|
|
48
|
+
const axisLabelTop = targetY + (axisOffsetTop - AXIS_MARGIN) / 2 / scaleFactor;
|
|
49
|
+
const axisLabelLeft = targetX + (axisOffsetLeft - AXIS_MARGIN) / 2 / scaleFactor;
|
|
50
|
+
return cellColorLabelsData.map(data => (new TextLayer({
|
|
51
|
+
id: `cellColorLabel-${data[0]}`,
|
|
52
|
+
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
53
|
+
data: [data],
|
|
54
|
+
getText: d => d[1],
|
|
55
|
+
getTextAnchor: (transpose ? 'end' : 'start'),
|
|
56
|
+
getAlignmentBaseline: 'top',
|
|
57
|
+
getColor: () => THEME_TO_TEXT_COLOR[theme],
|
|
58
|
+
getSize: AXIS_LABEL_TEXT_SIZE,
|
|
59
|
+
getPosition: d => [
|
|
60
|
+
(transpose
|
|
61
|
+
? axisLabelLeft
|
|
62
|
+
: targetX
|
|
63
|
+
+ ((-cellColorLabelsData.length + d[0] * 2) * COLOR_BAR_SIZE + AXIS_MARGIN)
|
|
64
|
+
/ 2 / scaleFactor),
|
|
65
|
+
(transpose
|
|
66
|
+
? targetY
|
|
67
|
+
+ ((-cellColorLabelsData.length + d[0] * 2) * COLOR_BAR_SIZE + AXIS_MARGIN)
|
|
68
|
+
/ 2 / scaleFactor
|
|
69
|
+
: axisLabelTop),
|
|
70
|
+
],
|
|
71
|
+
getAngle: (transpose ? 0 : 90),
|
|
72
|
+
fontFamily: AXIS_FONT_FAMILY,
|
|
73
|
+
})));
|
|
74
|
+
}
|
|
75
|
+
_renderAxisLeftLayers() {
|
|
76
|
+
const { axisLeftLabelData, matrixTop, height, matrixHeight, viewHeight, theme, axisLeftTitle, targetX, targetY, cellHeight, axisOffsetLeft, scaleFactor, hideLeftLabels, } = this.props;
|
|
77
|
+
const showAxisLeftLabels = cellHeight >= AXIS_LABEL_TEXT_SIZE;
|
|
78
|
+
const axisLabelLeft = targetX + (axisOffsetLeft - AXIS_MARGIN) / 2 / scaleFactor;
|
|
79
|
+
return hideLeftLabels ? [] : [
|
|
80
|
+
new TextLayer({
|
|
81
|
+
id: 'axisLeftLabels',
|
|
82
|
+
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
83
|
+
data: axisLeftLabelData,
|
|
84
|
+
getText: d => d[1],
|
|
85
|
+
getPosition: d => [axisLabelLeft, matrixTop + ((d[0] + 0.5) / height) * matrixHeight],
|
|
86
|
+
getTextAnchor: 'end',
|
|
87
|
+
getColor: () => THEME_TO_TEXT_COLOR[theme],
|
|
88
|
+
getSize: (showAxisLeftLabels ? AXIS_LABEL_TEXT_SIZE : 0),
|
|
89
|
+
getAngle: 0,
|
|
90
|
+
fontFamily: AXIS_FONT_FAMILY,
|
|
91
|
+
updateTriggers: {
|
|
92
|
+
getPosition: [axisLabelLeft, matrixTop, matrixHeight, viewHeight],
|
|
93
|
+
getSize: [showAxisLeftLabels],
|
|
94
|
+
getColor: [theme],
|
|
95
|
+
},
|
|
96
|
+
}),
|
|
97
|
+
new TextLayer({
|
|
98
|
+
id: 'axisLeftTitle',
|
|
99
|
+
coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
|
|
100
|
+
data: [{ title: axisLeftTitle }],
|
|
101
|
+
getText: d => d.title,
|
|
102
|
+
getPosition: [targetX, targetY],
|
|
103
|
+
getTextAnchor: 'middle',
|
|
104
|
+
getColor: () => THEME_TO_TEXT_COLOR[theme],
|
|
105
|
+
getSize: (!showAxisLeftLabels ? AXIS_TITLE_TEXT_SIZE : 0),
|
|
106
|
+
getAngle: 90,
|
|
107
|
+
fontFamily: AXIS_FONT_FAMILY,
|
|
108
|
+
updateTriggers: {
|
|
109
|
+
getSize: [showAxisLeftLabels],
|
|
110
|
+
getColor: [theme],
|
|
111
|
+
},
|
|
112
|
+
}),
|
|
113
|
+
];
|
|
114
|
+
}
|
|
115
|
+
renderLayers() {
|
|
116
|
+
const { axis } = this.props;
|
|
117
|
+
if (axis === 'left') {
|
|
118
|
+
return this._renderAxisLeftLayers();
|
|
119
|
+
}
|
|
120
|
+
if (axis === 'top') {
|
|
121
|
+
return this._renderAxisTopLayers();
|
|
122
|
+
}
|
|
123
|
+
if (axis === 'corner') {
|
|
124
|
+
return this._renderCornerLayers();
|
|
125
|
+
}
|
|
126
|
+
return [];
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
HeatmapCompositeTextLayer.layerName = 'HeatmapCompositeTextLayer';
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A BitmapLayer that performs aggregation in the fragment shader,
|
|
3
|
+
* and renders its texture from a Uint8Array rather than an ImageData.
|
|
4
|
+
*/
|
|
5
|
+
declare class PaddedExpressionHeatmapBitmapLayer {
|
|
6
|
+
/**
|
|
7
|
+
* Copy of getShaders from Layer (grandparent, parent of BitmapLayer).
|
|
8
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/core/src/lib/layer.js#L302
|
|
9
|
+
* @param {object} shaders
|
|
10
|
+
* @returns {object} Merged shaders.
|
|
11
|
+
*/
|
|
12
|
+
_getShaders(shaders: object): object;
|
|
13
|
+
/**
|
|
14
|
+
* Need to override to provide custom shaders.
|
|
15
|
+
*/
|
|
16
|
+
getShaders(): object;
|
|
17
|
+
updateState(args: any): void;
|
|
18
|
+
/**
|
|
19
|
+
* Need to override to provide additional uniform values.
|
|
20
|
+
* Simplified by removing video-related code.
|
|
21
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L173
|
|
22
|
+
* @param {*} opts
|
|
23
|
+
*/
|
|
24
|
+
draw(opts: any): void;
|
|
25
|
+
/**
|
|
26
|
+
* Need to override to provide the custom DEFAULT_TEXTURE_PARAMETERS
|
|
27
|
+
* object.
|
|
28
|
+
* Simplified by removing video-related code.
|
|
29
|
+
* Reference: https://github.com/visgl/deck.gl/blob/0afd4e99a6199aeec979989e0c361c97e6c17a16/modules/layers/src/bitmap-layer/bitmap-layer.js#L218
|
|
30
|
+
* @param {Array<Uint8Array>} images
|
|
31
|
+
*/
|
|
32
|
+
loadTexture(image: any): void;
|
|
33
|
+
}
|
|
34
|
+
declare namespace PaddedExpressionHeatmapBitmapLayer {
|
|
35
|
+
export const layerName: string;
|
|
36
|
+
export { defaultProps };
|
|
37
|
+
}
|
|
38
|
+
export default PaddedExpressionHeatmapBitmapLayer;
|
|
39
|
+
declare namespace defaultProps {
|
|
40
|
+
namespace image {
|
|
41
|
+
const type: string;
|
|
42
|
+
const value: null;
|
|
43
|
+
const async: boolean;
|
|
44
|
+
}
|
|
45
|
+
namespace colormap {
|
|
46
|
+
const type_1: string;
|
|
47
|
+
export { type_1 as type };
|
|
48
|
+
export { GLSL_COLORMAP_DEFAULT as value };
|
|
49
|
+
export const compare: boolean;
|
|
50
|
+
}
|
|
51
|
+
namespace bounds {
|
|
52
|
+
const type_2: string;
|
|
53
|
+
export { type_2 as type };
|
|
54
|
+
const value_1: number[];
|
|
55
|
+
export { value_1 as value };
|
|
56
|
+
const compare_1: boolean;
|
|
57
|
+
export { compare_1 as compare };
|
|
58
|
+
}
|
|
59
|
+
namespace aggSizeX {
|
|
60
|
+
const type_3: string;
|
|
61
|
+
export { type_3 as type };
|
|
62
|
+
const value_2: number;
|
|
63
|
+
export { value_2 as value };
|
|
64
|
+
const compare_2: boolean;
|
|
65
|
+
export { compare_2 as compare };
|
|
66
|
+
}
|
|
67
|
+
namespace aggSizeY {
|
|
68
|
+
const type_4: string;
|
|
69
|
+
export { type_4 as type };
|
|
70
|
+
const value_3: number;
|
|
71
|
+
export { value_3 as value };
|
|
72
|
+
const compare_3: boolean;
|
|
73
|
+
export { compare_3 as compare };
|
|
74
|
+
}
|
|
75
|
+
namespace colorScaleLo {
|
|
76
|
+
const type_5: string;
|
|
77
|
+
export { type_5 as type };
|
|
78
|
+
const value_4: number;
|
|
79
|
+
export { value_4 as value };
|
|
80
|
+
const compare_4: boolean;
|
|
81
|
+
export { compare_4 as compare };
|
|
82
|
+
}
|
|
83
|
+
namespace colorScaleHi {
|
|
84
|
+
const type_6: string;
|
|
85
|
+
export { type_6 as type };
|
|
86
|
+
const value_5: number;
|
|
87
|
+
export { value_5 as value };
|
|
88
|
+
const compare_5: boolean;
|
|
89
|
+
export { compare_5 as compare };
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
import { GLSL_COLORMAP_DEFAULT } from "./constants.js";
|
|
93
|
+
//# sourceMappingURL=PaddedExpressionHeatmapBitmapLayer.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PaddedExpressionHeatmapBitmapLayer.d.ts","sourceRoot":"","sources":["../src/PaddedExpressionHeatmapBitmapLayer.js"],"names":[],"mappings":"AAmBA;;;GAGG;AACH;IACE;;;;;OAKG;IACH,qBAHW,MAAM,GACJ,MAAM,CAWlB;IAED;;OAEG;IACH,qBAaC;IAED,6BAaC;IAED;;;;;OAKG;IACH,sBAiCC;IAED;;;;;;OAMG;IACH,8BA4BC;CACF"}
|