@vitessce/gl 2.0.0-beta.0

package/dist/ScaledExpressionExtension/shader-module.js

@@ -0,0 +1,32 @@
+import { colormaps } from '../glsl/index';
+/**
+ *
+ * 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/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';
+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/SelectionExtension/index.js

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

package/dist/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/SelectionLayer.js

@@ -0,0 +1,167 @@
+/* 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/bitmask-layer-shaders.js

@@ -0,0 +1,90 @@
+import { colormaps } from './glsl/index';
+export const vs = `
+#define SHADER_NAME bitmask-layer-vertex-shader
+
+attribute vec2 texCoords;
+attribute vec3 positions;
+attribute vec3 positions64Low;
+attribute vec3 instancePickingColors;
+
+varying vec2 vTexCoord;
+
+void main(void) {
+  geometry.worldPosition = positions;
+  geometry.uv = texCoords;
+  geometry.pickingColor = instancePickingColors;
+  gl_Position = project_position_to_clipspace(positions, positions64Low, vec3(0.0), geometry.position);
+  DECKGL_FILTER_GL_POSITION(gl_Position, geometry);
+  vTexCoord = texCoords;
+  vec4 color = vec4(0.0);
+  DECKGL_FILTER_COLOR(color, geometry);
+}
+`;
+export const fs = `
+#define SHADER_NAME bitmask-layer-fragment-shader
+precision highp float;
+
+${colormaps}
+
+// Data (mask) texture
+uniform sampler2D channel0;
+uniform sampler2D channel1;
+uniform sampler2D channel2;
+uniform sampler2D channel3;
+uniform sampler2D channel4;
+uniform sampler2D channel5;
+
+// Color texture
+uniform sampler2D colorTex;
+uniform float colorTexHeight;
+uniform float colorTexWidth;
+uniform float hovered;
+// range
+uniform bool channelsVisible[6];
+
+// Expression mapping
+uniform vec2 uColorScaleRange;
+uniform bool uIsExpressionMode;
+uniform sampler2D expressionTex;
+
+// opacity
+uniform float opacity;
+
+varying vec2 vTexCoord;
+
+vec4 sampleAndGetColor(sampler2D dataTex, vec2 coord, bool isOn){
+  float sampledData = texture(dataTex, coord).r;
+  vec4 hoveredColor = float(sampledData == hovered && sampledData > 0. && hovered > 0.) * vec4(0., 0., 1., 1.);
+  // Colors are laid out corresponding to ids in row-major order in the texture.  So if width of the texture is 10, and you want ID 25,
+  // you need coordinate (1, 4) (i.e 2 rows down, and 5 columns over indexed from 0 for a total of 25 units covered in row major order).
+  vec2 colorTexCoord = vec2(mod(sampledData, colorTexWidth) / colorTexWidth, floor(sampledData / colorTexWidth) / (colorTexHeight - 1.));
+  float expressionValue = texture(expressionTex, colorTexCoord).r / 255.;
+  float scaledExpressionValue = (expressionValue - uColorScaleRange[0]) / max(0.005, (uColorScaleRange[1] - uColorScaleRange[0]));
+  vec4 sampledColor = float(uIsExpressionMode) * COLORMAP_FUNC(clamp(scaledExpressionValue, 0.0, 1.0)) +  (1. - float(uIsExpressionMode)) * vec4(texture(colorTex, colorTexCoord).rgb, 1.);
+  // Only return a color if the data is non-zero.
+  return max(0., min(sampledData, 1.)) * float(isOn) * (sampledColor + hoveredColor);
+}
+
+void main() {
+
+  gl_FragColor = sampleAndGetColor(channel0, vTexCoord, channelsVisible[0]);
+
+  // If the sampled color and the currently stored color (gl_FragColor) are identical, don't blend and use the sampled color,
+  // otherwise just use the currently stored color.  Repeat this for all channels.
+  vec4 sampledColor = sampleAndGetColor(channel1, vTexCoord, channelsVisible[1]);
+  gl_FragColor = (sampledColor == gl_FragColor || sampledColor == vec4(0.)) ? gl_FragColor : sampledColor;
+  sampledColor = sampleAndGetColor(channel2, vTexCoord, channelsVisible[2]);
+  gl_FragColor = (sampledColor == gl_FragColor || sampledColor == vec4(0.)) ? gl_FragColor : sampledColor;
+  sampledColor = sampleAndGetColor(channel3, vTexCoord, channelsVisible[3]);
+  gl_FragColor = (sampledColor == gl_FragColor || sampledColor == vec4(0.)) ? gl_FragColor : sampledColor;
+  sampledColor = sampleAndGetColor(channel4, vTexCoord, channelsVisible[4]);
+  gl_FragColor = (sampledColor == gl_FragColor || sampledColor == vec4(0.)) ? gl_FragColor : sampledColor;
+  sampledColor = sampleAndGetColor(channel5, vTexCoord, channelsVisible[5]);
+  gl_FragColor = (sampledColor == gl_FragColor || sampledColor == vec4(0.)) ? gl_FragColor : sampledColor;
+  // Apply the opacity if there is pixel data, and if the pixel data is empty i.e no segmentation, use 0 opacity.
+  gl_FragColor = vec4(gl_FragColor.rgb, (gl_FragColor.rgb == vec3(0., 0., 0.)) ? 0.0 : opacity);
+
+  geometry.uv = vTexCoord;
+  DECKGL_FILTER_COLOR(gl_FragColor, geometry);
+}
+`;

package/dist/constants.js

@@ -0,0 +1,11 @@
+// List of the GLSL colormaps available,
+// to validate against before string replacing.
+export const GLSL_COLORMAPS = [
+    'plasma',
+    'viridis',
+    'jet',
+];
+export const GLSL_COLORMAP_DEFAULT = 'plasma';
+export const COLORMAP_SHADER_PLACEHOLDER = 'COLORMAP_FUNC';
+export const DEFAULT_GL_OPTIONS = { webgl2: true };
+export { SELECTION_TYPE } from 'nebula.gl';

package/dist/deck.js

@@ -0,0 +1,4 @@
+export { default as DeckGL } from 'deck.gl';
+export { COORDINATE_SYSTEM } from '@deck.gl/core';
+export { PolygonLayer, TextLayer, ScatterplotLayer } from '@deck.gl/layers';
+export { OrthographicView, OrbitView } from '@deck.gl/core';