@vitessce/gl 3.1.3 → 3.2.0

package/src/BitmaskLayerBeta.js

@@ -0,0 +1,360 @@
+/* eslint-disable no-unused-vars */
+import GL from '@luma.gl/constants'; // eslint-disable-line import/no-extraneous-dependencies
+import { project32, picking } from '@deck.gl/core'; // eslint-disable-line import/no-extraneous-dependencies
+import { Texture2D, isWebGL2 } from '@luma.gl/core';
+import { XRLayer } from '@hms-dbmi/viv';
+import { fromEntries } from '@vitessce/utils';
+import { range } from 'lodash-es';
+import { fs, vs } from './bitmask-layer-beta-shaders.js';
+import {
+  GLSL_COLORMAPS,
+  GLSL_COLORMAP_DEFAULT,
+  COLORMAP_SHADER_PLACEHOLDER,
+} from './constants.js';
+import { multiSetsToTextureData } from './bitmask-utils.js';
+
+
+const MAX_CHANNELS = 7;
+const MULTI_FEATURE_TEX_SIZE = 2048;
+
+function padWithDefault(arr, defaultValue, padWidth) {
+  const newArr = [...arr];
+  for (let i = 0; i < padWidth; i += 1) {
+    newArr.push(defaultValue);
+  }
+  return newArr;
+}
+
+function getColor(arr) {
+  return arr ? arr.map(v => v / 255) : [0, 0, 0];
+}
+
+
+const defaultProps = {
+  channelStrokeWidths: { type: 'array', value: null, compare: true },
+  channelsFilled: { type: 'array', value: null, compare: true },
+  channelOpacities: { type: 'array', value: null, compare: true },
+  channelColors: { type: 'array', value: null, compare: true },
+  hoveredCell: { type: 'number', value: null, compare: true },
+  colormap: { type: 'string', value: GLSL_COLORMAP_DEFAULT, compare: true },
+  expressionData: { type: 'object', value: null, compare: true },
+  multiFeatureValues: { type: 'array', value: null, compare: true },
+  setColorValues: { type: 'array', value: null, compare: true },
+  channelFeatureValueColormaps: { type: 'array', value: null, compare: true },
+  channelFeatureValueColormapRanges: { type: 'array', value: null, compare: true },
+  channelIsStaticColorMode: { type: 'array', value: null, compare: true },
+  channelIsSetColorMode: { type: 'array', value: null, compare: true },
+};
+
+/**
+ * A BitmapLayer that performs aggregation in the fragment shader,
+ * and renders its texture from a Uint8Array rather than an ImageData.
+ */
+export default class BitmaskLayer extends XRLayer {
+  // eslint-disable-next-line class-methods-use-this
+  getShaders() {
+    const { colormap } = this.props;
+    return {
+      fs,
+      vs,
+      modules: [project32, picking],
+      defines: {
+        [COLORMAP_SHADER_PLACEHOLDER]: GLSL_COLORMAPS.includes(colormap)
+          ? colormap
+          : GLSL_COLORMAP_DEFAULT,
+      },
+    };
+  }
+
+  /**
+   * Override the parent loadChannelTextures to enable
+   * up to eight channels (rather than six).
+   * Reference: https://github.com/hms-dbmi/viv/blob/v0.13.3/packages/layers/src/xr-layer/xr-layer.js#L316
+  */
+  loadChannelTextures(channelData) {
+    const textures = {
+      channel0: null,
+      channel1: null,
+      channel2: null,
+      channel3: null,
+      channel4: null,
+      channel5: null,
+      channel6: null,
+    };
+    if (this.state.textures) {
+      Object.values(this.state.textures).forEach(tex => tex && tex.delete());
+    }
+    if (channelData
+      && Object.keys(channelData).length > 0
+      && channelData.data
+    ) {
+      channelData.data.forEach((d, i) => {
+        textures[`channel${i}`] = this.dataToTexture(
+          d,
+          channelData.width,
+          channelData.height,
+        );
+      }, this);
+      this.setState({ textures });
+    }
+  }
+
+  updateState({ props, oldProps, changeFlags }) {
+    super.updateState({ props, oldProps, changeFlags });
+    if (
+      props.multiFeatureValues !== oldProps.multiFeatureValues
+      || props.setColorValues !== oldProps.setColorValues
+      || props.channelIsSetColorMode !== oldProps.channelIsSetColorMode
+    ) {
+      const { multiFeatureValues, setColorValues, channelIsSetColorMode } = this.props;
+      // Use one expressionTex for all channels,
+      // using an offset mechanism.
+      const [
+        valueTex,
+        colorTex,
+        valueTexOffsets,
+        colorTexOffsets,
+        valueTexHeight,
+        colorTexHeight,
+      ] = this.multiSetsToTexture(
+        multiFeatureValues,
+        setColorValues,
+        channelIsSetColorMode,
+      );
+      this.setState({
+        valueTex,
+        colorTex,
+        valueTexOffsets,
+        colorTexOffsets,
+        valueTexHeight,
+        colorTexHeight,
+      });
+    }
+    if (props.colormap !== oldProps.colormap) {
+      const { gl } = this.context;
+      if (this.state.model) {
+        this.state.model.delete();
+      }
+      // eslint-disable-next-line no-underscore-dangle
+      this.setState({ model: this._getModel(gl) });
+
+      this.getAttributeManager().invalidateAll();
+    }
+  }
+
+  draw(opts) {
+    const { uniforms } = opts;
+    const {
+      channelStrokeWidths,
+      channelsFilled,
+      channelOpacities,
+      channelColors,
+      channelsVisible,
+      // TODO: use `channelFeatureValueColormaps` in shader,
+      // figure out how to call multiple GLSL colormap functions
+      channelFeatureValueColormaps,
+      channelFeatureValueColormapRanges,
+      channelIsStaticColorMode,
+      channelIsSetColorMode,
+      hoveredCell,
+      colorScaleLo,
+      colorScaleHi,
+      isExpressionMode,
+      zoom,
+      minZoom,
+      maxZoom,
+      zoomOffset, // TODO: figure out if this needs to be used or not
+    } = this.props;
+    const {
+      textures,
+      model,
+      // Expression and set index (and colors) textures with offsets
+      valueTex,
+      colorTex,
+      valueTexOffsets,
+      colorTexOffsets,
+      valueTexHeight,
+      colorTexHeight,
+    } = this.state;
+    // Render the image
+    if (textures && model) {
+      const scaleFactor = 1 / (2 ** (maxZoom - zoom));
+      const colors = fromEntries(range(MAX_CHANNELS).map(i => ([`color${i}`, getColor(channelColors[i])])));
+      model
+        .setUniforms(
+          Object.assign({}, uniforms, {
+            ...colors,
+            // Bitmask image channel data textures
+            ...textures,
+            multiFeatureTexSize: MULTI_FEATURE_TEX_SIZE,
+            // Expression textures with offsets
+            valueTex,
+            valueTexOffsets: padWithDefault(
+              valueTexOffsets,
+              0,
+              MAX_CHANNELS - valueTexOffsets.length,
+            ),
+            valueTexHeight,
+            // Set indices and colors textures with offsets
+            colorTex,
+            colorTexOffsets: padWithDefault(
+              colorTexOffsets,
+              0,
+              MAX_CHANNELS - colorTexOffsets.length,
+            ),
+            colorTexHeight,
+            // Visualization properties
+            channelsFilled: padWithDefault(
+              channelsFilled,
+              true,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelsFilled.length,
+            ),
+            channelOpacities: padWithDefault(
+              channelOpacities,
+              0.0,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelOpacities.length,
+            ),
+            channelStrokeWidths: padWithDefault(
+              channelStrokeWidths,
+              1.0,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelStrokeWidths.length,
+            ),
+            channelColormapRangeStarts: padWithDefault(
+              channelFeatureValueColormapRanges.map(r => r?.[0] || 0.0),
+              0.0,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelFeatureValueColormapRanges.length,
+            ),
+            channelColormapRangeEnds: padWithDefault(
+              channelFeatureValueColormapRanges.map(r => r?.[1] || 1.0),
+              1.0,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelFeatureValueColormapRanges.length,
+            ),
+            channelIsStaticColorMode: padWithDefault(
+              channelIsStaticColorMode,
+              true,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelIsStaticColorMode.length,
+            ),
+            channelIsSetColorMode: padWithDefault(
+              channelIsSetColorMode,
+              false,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelIsSetColorMode.length,
+            ),
+            hovered: hoveredCell || 0,
+            channelsVisible: padWithDefault(
+              channelsVisible,
+              false,
+              // There are six texture entries on the shaders
+              MAX_CHANNELS - channelsVisible.length,
+            ),
+            // uColorScaleRange: [colorScaleLo, colorScaleHi],
+            // uIsExpressionMode: isExpressionMode,
+            // uIsOutlined: false,
+            scaleFactor,
+          }),
+        )
+        .draw();
+    }
+  }
+
+  /**
+   * This function creates textures from the data
+   */
+  dataToTexture(data, width, height) {
+    const isWebGL2On = isWebGL2(this.context.gl);
+    return new Texture2D(this.context.gl, {
+      width,
+      height,
+      // Only use Float32 so we don't have to write two shaders
+      data: new Float32Array(data),
+      // we don't want or need mimaps
+      mipmaps: false,
+      parameters: {
+        // NEAREST for integer data
+        [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
+        [GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
+        // CLAMP_TO_EDGE to remove tile artifacts
+        [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+        [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
+      },
+      format: isWebGL2On ? GL.R32F : GL.LUMINANCE,
+      dataFormat: isWebGL2On ? GL.RED : GL.LUMINANCE,
+      type: GL.FLOAT,
+    });
+  }
+
+  multiSetsToTexture(multiFeatureValues, setColorValues, channelIsSetColorMode) {
+    const isWebGL2On = isWebGL2(this.context.gl);
+
+    const [
+      totalData,
+      valueTexHeight,
+      indicesOffsets,
+      totalColors,
+      colorTexHeight,
+      colorsOffsets,
+    ] = multiSetsToTextureData(
+      multiFeatureValues,
+      setColorValues,
+      channelIsSetColorMode,
+      MULTI_FEATURE_TEX_SIZE,
+    );
+
+    return [
+      // Color indices texture
+      new Texture2D(this.context.gl, {
+        width: MULTI_FEATURE_TEX_SIZE,
+        height: valueTexHeight,
+        // Only use Float32 so we don't have to write two shaders
+        data: new Float32Array(totalData),
+        // we don't want or need mimaps
+        mipmaps: false,
+        parameters: {
+          // NEAREST for integer data
+          [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
+          [GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
+          // CLAMP_TO_EDGE to remove tile artifacts
+          [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+          [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
+        },
+        format: isWebGL2On ? GL.R32F : GL.LUMINANCE,
+        dataFormat: isWebGL2On ? GL.RED : GL.LUMINANCE,
+        type: GL.FLOAT,
+      }),
+      // Colors texture
+      new Texture2D(this.context.gl, {
+        width: MULTI_FEATURE_TEX_SIZE,
+        height: colorTexHeight,
+        // Only use Float32 so we don't have to write two shaders
+        data: new Float32Array(totalColors),
+        // we don't want or need mimaps
+        mipmaps: false,
+        parameters: {
+          // NEAREST for integer data
+          [GL.TEXTURE_MIN_FILTER]: GL.NEAREST,
+          [GL.TEXTURE_MAG_FILTER]: GL.NEAREST,
+          // CLAMP_TO_EDGE to remove tile artifacts
+          [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+          [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE,
+        },
+        format: isWebGL2On ? GL.R32F : GL.LUMINANCE,
+        dataFormat: isWebGL2On ? GL.RED : GL.LUMINANCE,
+        type: GL.FLOAT,
+      }),
+      // Offsets
+      indicesOffsets,
+      colorsOffsets,
+      // Texture heights
+      valueTexHeight,
+      colorTexHeight,
+    ];
+  }
+}
+BitmaskLayer.layerName = 'BitmaskLayer';
+BitmaskLayer.defaultProps = defaultProps;

package/src/SelectionLayer.js

@@ -70,10 +70,8 @@ const PASS_THROUGH_PROPS = [
 export default class SelectionLayer extends CompositeLayer {
   _selectPolygonObjects(coordinates) {
     const {
-      onSelect,
-      getCellCoords,
-      cellsQuadTree,
       flipY,
+      obsLayers,
     } = this.props;
 
     const flippedCoordinates = (flipY
@@ -83,53 +81,73 @@ export default class SelectionLayer extends CompositeLayer {
     // 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;
+    obsLayers.forEach((obsLayer) => {
+      const {
+        getObsCoords,
+        obsQuadTree,
+        obsIndex,
+        onSelect: layerOnSelect,
+      } = obsLayer;
+
+      // Create an array to store the results.
+      // Clear the array before checking each new layer.
+      const pickingInfos = [];
+
+      // It is possible for a layer to not have an obsQuadTree,
+      // for example if the layer is a segmentation bitmask without associated
+      // obsLocations.
+      obsQuadTree?.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(getObsCoords(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;
+      });
+      const pickingIds = pickingInfos.map(obsI => obsIndex[obsI]);
+      layerOnSelect(pickingIds);
     });
+  }
 
-    onSelect({ pickingInfos });
+  _selectEmpty() {
+    const { obsLayers } = this.props;
+    obsLayers.forEach((obsLayer) => {
+      const { onSelect: layerOnSelect } = obsLayer;
+      layerOnSelect([]);
+    });
   }
 
   renderLayers() {
-    const { onSelect } = this.props;
     const mode = MODE_MAP[this.props.selectionType] || ViewMode;
 
     const inheritedProps = {};
@@ -153,7 +171,7 @@ export default class SelectionLayer extends CompositeLayer {
               this._selectPolygonObjects(coordinates);
             } else if (editType === EDIT_TYPE_CLEAR) {
               // We want to select an empty array to clear any previous selection.
-              onSelect({ pickingInfos: [] });
+              this._selectEmpty();
             }
           },
           _subLayerProps: {