@vitessce/gl 3.5.8 → 3.5.10

package/dist/index.js

@@ -1,18 +1,19 @@
-import { f as distEs6 } from "./index-06f9318c.js";
-import { o, n, A, r, q, p, i, j, C, l, D, G, e, H, c, M, k, m, d, P, S, h, T, t, b, s, u, v } from "./index-06f9318c.js";
+import { f as distEs6 } from "./index-e113c88f.js";
+import { p, o, A, s, r, q, i, j, l, C, m, D, G, e, H, c, M, k, n, d, P, S, h, T, u, b, t, w, v } from "./index-e113c88f.js";
 import "react";
 const SELECTION_TYPE = distEs6.SELECTION_TYPE;
 export {
-  o as AXIS_FONT_FAMILY,
-  n as AXIS_LABEL_TEXT_SIZE,
+  p as AXIS_FONT_FAMILY,
+  o as AXIS_LABEL_TEXT_SIZE,
   A as AXIS_MARGIN,
-  r as AXIS_MAX_SIZE,
-  q as AXIS_MIN_SIZE,
-  p as AXIS_PADDING,
+  s as AXIS_MAX_SIZE,
+  r as AXIS_MIN_SIZE,
+  q as AXIS_PADDING,
   i as BitmaskLayer,
   j as BitmaskLayerBeta,
-  C as COLOR_BAR_SIZE,
-  l as DATA_TEXTURE_SIZE,
+  l as COLOR_BAR_SIZE,
+  C as ContourLayerWithText,
+  m as DATA_TEXTURE_SIZE,
   D as DEFAULT_GL_OPTIONS,
   G as GLSL_COLORMAPS,
   e as GLSL_COLORMAP_DEFAULT,
@@ -20,16 +21,16 @@ export {
   c as HeatmapCompositeTextLayer,
   M as MAX_ROW_AGG,
   k as MIN_ROW_AGG,
-  m as PIXELATED_TEXTURE_PARAMETERS,
+  n as PIXELATED_TEXTURE_PARAMETERS,
   d as PaddedExpressionHeatmapBitmapLayer,
   P as PixelatedBitmapLayer,
   SELECTION_TYPE,
   S as ScaledExpressionExtension,
   h as SelectionExtension,
   T as TILE_SIZE,
-  t as deck,
+  u as deck,
   b as getSelectionLayer,
-  s as luma,
-  u as math,
+  t as luma,
+  w as math,
   v as viv
 };

package/dist/{jpeg-45af9337.js → jpeg-a43f1407.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-06f9318c.js";
+import { B as BaseDecoder } from "./index-e113c88f.js";
 import "react";
 const dctZigZag = new Int32Array([
   0,

package/dist/{lerc-956ec4f4.js → lerc-d05b8280.js}

@@ -1,5 +1,5 @@
 import { i as inflate_1 } from "./pako.esm-68f84e2a.js";
-import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-06f9318c.js";
+import { g as getDefaultExportFromCjs, B as BaseDecoder, L as LercParameters, a as LercAddCompression } from "./index-e113c88f.js";
 import "react";
 var LercDecode = { exports: {} };
 (function(module) {

package/dist/{lzw-5698c290.js → lzw-cae4aaf9.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-06f9318c.js";
+import { B as BaseDecoder } from "./index-e113c88f.js";
 import "react";
 const MIN_BITS = 9;
 const CLEAR_CODE = 256;

package/dist/{packbits-110b757d.js → packbits-965c5d70.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-06f9318c.js";
+import { B as BaseDecoder } from "./index-e113c88f.js";
 import "react";
 class PackbitsDecoder extends BaseDecoder {
   decodeBlock(buffer) {

package/dist/{raw-2ccdfb85.js → raw-3c07a927.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-06f9318c.js";
+import { B as BaseDecoder } from "./index-e113c88f.js";
 import "react";
 class RawDecoder extends BaseDecoder {
   decodeBlock(buffer) {

package/dist/{webimage-f56b4603.js → webimage-36b3a167.js}

@@ -1,4 +1,4 @@
-import { B as BaseDecoder } from "./index-06f9318c.js";
+import { B as BaseDecoder } from "./index-e113c88f.js";
 import "react";
 class WebImageDecoder extends BaseDecoder {
   constructor() {

package/dist-tsc/ContourLayerWithText.d.ts

@@ -0,0 +1,83 @@
+declare class ContourLayerWithText {
+    /**
+     * Construct line and text layers to render.
+     * @returns {object[]} Array of DeckGL layers.
+     */
+    getLineAndTextLayers(): object[];
+    /**
+     * Overrides the ContourLayer renderLayers function,
+     * so that the custom text/line layers can be
+     * appended to the contour line/polygon layers.
+     * @returns {object[]} Array of DeckGL layers.
+     */
+    renderLayers(): object[];
+}
+declare namespace ContourLayerWithText {
+    export let layerName: string;
+    export { defaultProps };
+}
+export default ContourLayerWithText;
+declare namespace defaultProps {
+    namespace obsSetPath {
+        let type: string;
+    }
+    namespace sampleSetPath {
+        let type_1: string;
+        export { type_1 as type };
+    }
+    namespace circleInfo {
+        let type_2: string;
+        export { type_2 as type };
+    }
+    namespace circlePointSet {
+        let type_3: string;
+        export { type_3 as type };
+    }
+    namespace obsSetLabelsVisible {
+        let type_4: string;
+        export { type_4 as type };
+    }
+    namespace obsSetLabelSize {
+        let type_5: string;
+        export { type_5 as type };
+        export let min: number;
+        export let max: number;
+        export let value: number;
+    }
+    namespace cellSize {
+        let type_6: string;
+        export { type_6 as type };
+        let min_1: number;
+        export { min_1 as min };
+        let max_1: number;
+        export { max_1 as max };
+        let value_1: number;
+        export { value_1 as value };
+    }
+    namespace getPosition {
+        let type_7: string;
+        export { type_7 as type };
+        export function value_2(x: any): any;
+        export { value_2 as value };
+    }
+    namespace getWeight {
+        let type_8: string;
+        export { type_8 as type };
+        let value_3: number;
+        export { value_3 as value };
+    }
+    let gpuAggregation: boolean;
+    let aggregation: string;
+    namespace contours {
+        let type_9: string;
+        export { type_9 as type };
+        let value_4: {
+            threshold: number;
+        }[];
+        export { value_4 as value };
+        export let optional: boolean;
+        export let compare: number;
+    }
+    let zOffset: number;
+}
+//# sourceMappingURL=ContourLayerWithText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContourLayerWithText.d.ts","sourceRoot":"","sources":["../src/ContourLayerWithText.js"],"names":[],"mappings":"AA8GA;IACE;;;OAGG;IACH,wBAFa,MAAM,EAAE,CAuHpB;IAED;;;;;OAKG;IACH,gBAFa,MAAM,EAAE,CAYpB;CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAlOyC,qCAAe"}

package/dist-tsc/ContourLayerWithText.js

@@ -0,0 +1,220 @@
+import { ContourLayer } from '@deck.gl/aggregation-layers';
+import { LineLayer, TextLayer } from '@deck.gl/layers';
+import { point as turfPoint, polygons } from '@turf/helpers';
+import { getGeom } from '@turf/invariant';
+import { flattenReduce } from '@turf/meta';
+import { union } from '@turf/union';
+import { area } from '@turf/area';
+import { distance } from '@turf/distance';
+import { range } from 'lodash-es';
+import { AXIS_FONT_FAMILY } from './heatmap-constants.js';
+const DEFAULT_THRESHOLD = 1;
+const defaultProps = {
+    // for text
+    obsSetPath: { type: 'object' },
+    sampleSetPath: { type: 'object' },
+    circleInfo: { type: 'object' },
+    circlePointSet: { type: 'object' },
+    obsSetLabelsVisible: { type: 'boolean' },
+    obsSetLabelSize: { type: 'number', min: 1, max: 100, value: 12 },
+    // grid aggregation
+    cellSize: { type: 'number', min: 1, max: 1000, value: 1000 },
+    getPosition: { type: 'accessor', value: x => x.position },
+    getWeight: { type: 'accessor', value: 1 },
+    gpuAggregation: true,
+    aggregation: 'SUM',
+    // contour lines
+    contours: {
+        type: 'object',
+        value: [{ threshold: DEFAULT_THRESHOLD }],
+        optional: true,
+        compare: 3,
+    },
+    zOffset: 0.005,
+};
+const MIN_AREA_THRESHOLD = 10;
+const MAX_NUM_VERTICES = 36;
+/**
+ * Get the polygon with the maximum area,
+ * and also return its area value.
+ * @param {{contour, vertices}[]} levelToUse The
+ * contourPolygons array filtered to a given level.
+ * @returns {[number, object]} A tuple of
+ * [area value, Turf polygon object].
+ */
+function getMaxAreaPolygon(levelToUse) {
+    if (levelToUse.length === 0) {
+        return [0, null];
+    }
+    const levelPolygons = levelToUse.map(d => ([
+        // The vertices are 3D, but we only need 2D.
+        [
+            ...d.vertices.map(v => ([v[0], v[1]])),
+            // Need four vertices (not 3), so repeat the first vertex.
+            [d.vertices[0][0], d.vertices[0][1]],
+        ],
+    ]));
+    const levelPolygonsUnion = union(polygons(levelPolygons));
+    const [maxAreaValue, maxAreaPolygon] = flattenReduce(levelPolygonsUnion, (previousValue, currentFeature) => {
+        if (getGeom(currentFeature).type === 'Polygon') {
+            const currArea = area(currentFeature);
+            if (currArea >= previousValue[0]) {
+                return [currArea, currentFeature];
+            }
+        }
+        return previousValue;
+    }, 
+    // Initial value
+    [0, null]);
+    return [maxAreaValue, maxAreaPolygon];
+}
+/**
+ * Get the area, polygon, and level associated with
+ * the "polygon of maximum area". (Not actually maximum
+ * among all levels but the max within a given level)
+ * @param {{contour, vertices}[]} contourPolygons The
+ * contourPolygons value within state.contourData
+ * @returns {[number, object, number]} A tuple of
+ * [area value, Turf polygon object, level index].
+ */
+function getMaxAreaPolygonAndLevel(contourPolygons) {
+    const l2 = contourPolygons?.filter(d => d.contour.i === 2) ?? [];
+    const [l2area, l2polygon] = getMaxAreaPolygon(l2);
+    if (Math.log10(l2area) >= MIN_AREA_THRESHOLD) {
+        return [l2area, l2polygon, 2];
+    }
+    const l1 = contourPolygons?.filter(d => d.contour.i === 1) ?? [];
+    const [l1area, l1polygon] = getMaxAreaPolygon(l1);
+    if (Math.log10(l1area) >= MIN_AREA_THRESHOLD) {
+        return [l1area, l1polygon, 1];
+    }
+    const l0 = contourPolygons?.filter(d => d.contour.i === 0) ?? [];
+    const [l0area, l0polygon] = getMaxAreaPolygon(l0);
+    return [l0area, l0polygon, 0];
+}
+// Reference: https://github.com/visgl/deck.gl/blob/v8.9.36/modules/aggregation-layers/src/contour-layer/contour-layer.ts
+export default class ContourLayerWithText extends ContourLayer {
+    /**
+     * Construct line and text layers to render.
+     * @returns {object[]} Array of DeckGL layers.
+     */
+    getLineAndTextLayers() {
+        const lineAndTextLayers = [];
+        const { contourPolygons } = this.state.contourData;
+        const { obsSetPath, contours, circleInfo, circlePointSet, obsSetLabelSize } = this.props;
+        if (!circleInfo) {
+            return lineAndTextLayers;
+        }
+        const obsSetName = obsSetPath?.at(-1);
+        const [maxAreaValue, maxAreaPolygon, levelI] = getMaxAreaPolygonAndLevel(contourPolygons);
+        // Get a circle polygon which outlines the whole plot.
+        const { center, steps, polygon: circlePolygon } = circleInfo;
+        if (maxAreaValue > 0 && maxAreaPolygon) {
+            let minDist = Infinity;
+            let minCirclePoint;
+            let minCirclePointI;
+            let minPolygonPoint;
+            const numVertices = maxAreaPolygon.geometry.coordinates[0].length;
+            // Only consider a maximum of 36 vertices from the polygon,
+            // since it may be complex with many vertices.
+            const polygonVertices = numVertices > MAX_NUM_VERTICES
+                ? range(MAX_NUM_VERTICES).map(i => maxAreaPolygon
+                    .geometry
+                    .coordinates[0][Math.floor(i * numVertices / MAX_NUM_VERTICES)])
+                : [...maxAreaPolygon.geometry.coordinates[0]];
+            // Find the pair (vertex on circle, vertex on contourPolygon) which
+            // have the shortest distance.
+            circlePolygon.geometry.coordinates[0].forEach((circleCoord, circlePointI) => {
+                const circlePoint = turfPoint(circleCoord);
+                polygonVertices.forEach((polyCoord) => {
+                    const polyPoint = turfPoint(polyCoord);
+                    const dist = distance(circlePoint, polyPoint);
+                    if (dist < minDist) {
+                        minDist = dist;
+                        minCirclePoint = circleCoord;
+                        minCirclePointI = circlePointI;
+                        minPolygonPoint = polyCoord;
+                    }
+                });
+            });
+            // If this circle vertex has already been used, then its index
+            // will be in the circlePointSet, so we instead try the subsequent
+            // vertex until we find one that is unused
+            // (or until the set is full, in which case we must reuse a vertex).
+            while (circlePointSet.size < steps && circlePointSet.has(minCirclePointI)) {
+                const nextCirclePointI = (minCirclePointI + 1) % steps;
+                minCirclePointI = nextCirclePointI;
+            }
+            circlePointSet.add(minCirclePointI);
+            minCirclePoint = circlePolygon.geometry.coordinates[0][minCirclePointI];
+            // Compute the angle formed by the line
+            // (from the circle's center point).
+            const angleRadians = Math.atan2(minCirclePoint[1] - center[1], minCirclePoint[0] - center[0]);
+            let angleDegrees = angleRadians * 180 / Math.PI;
+            // Create the line and text layers.
+            lineAndTextLayers.push(new LineLayer({
+                id: `line-${obsSetName}`,
+                data: [
+                    {
+                        from: minPolygonPoint,
+                        to: minCirclePoint,
+                        color: contours[levelI].color,
+                    },
+                ],
+                getColor: d => d.color,
+                getSourcePosition: d => d.from,
+                getTargetPosition: d => d.to,
+                getWidth: levelI + 0.5,
+            }));
+            // Determine textAnchor based on angle formed on circle.
+            let textAnchor = 'start';
+            if (angleDegrees < 0) {
+                angleDegrees += 360;
+            }
+            if (angleDegrees > 90 && angleDegrees < 270) {
+                angleDegrees -= 180;
+                textAnchor = 'end';
+            }
+            lineAndTextLayers.push(new TextLayer({
+                id: `text-${obsSetName}`,
+                data: [
+                    {
+                        label: obsSetName,
+                        to: minCirclePoint,
+                        color: contours[levelI].color,
+                    },
+                ],
+                getPosition: d => d.to,
+                getText: d => d.label,
+                getColor: d => d.color,
+                getSize: obsSetLabelSize,
+                getAngle: -angleDegrees,
+                getTextAnchor: textAnchor,
+                getAlignmentBaseline: 'center',
+                fontFamily: AXIS_FONT_FAMILY,
+                fontWeight: 'normal',
+                // maxWidth: 80 * obsSetLabelSize,
+            }));
+        }
+        return lineAndTextLayers;
+    }
+    /**
+     * Overrides the ContourLayer renderLayers function,
+     * so that the custom text/line layers can be
+     * appended to the contour line/polygon layers.
+     * @returns {object[]} Array of DeckGL layers.
+     */
+    renderLayers() {
+        const { obsSetLabelsVisible } = this.props;
+        const contourLayers = super.renderLayers();
+        const lineAndTextLayers = obsSetLabelsVisible
+            ? this.getLineAndTextLayers()
+            : [];
+        return [
+            ...contourLayers,
+            ...lineAndTextLayers,
+        ];
+    }
+}
+ContourLayerWithText.layerName = 'ContourLayerWithText';
+ContourLayerWithText.defaultProps = defaultProps;

package/dist-tsc/SelectionLayer.js

@@ -4,10 +4,10 @@
 // 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 { 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';

package/dist-tsc/index.d.ts

@@ -7,6 +7,7 @@ export { default as ScaledExpressionExtension } from "./ScaledExpressionExtensio
 export { default as SelectionExtension } from "./SelectionExtension/index.js";
 export { default as BitmaskLayer } from "./BitmaskLayer.js";
 export { default as BitmaskLayerBeta } from "./BitmaskLayerBeta.js";
+export { default as ContourLayerWithText } from "./ContourLayerWithText.js";
 export * as viv from "./viv.js";
 export * as luma from "./luma.js";
 export * as deck from "./deck.js";

package/dist-tsc/index.js

@@ -11,6 +11,7 @@ export { default as ScaledExpressionExtension } from './ScaledExpressionExtensio
 export { default as SelectionExtension } from './SelectionExtension/index.js';
 export { default as BitmaskLayer } from './BitmaskLayer.js';
 export { default as BitmaskLayerBeta } from './BitmaskLayerBeta.js';
+export { default as ContourLayerWithText } from './ContourLayerWithText.js';
 export { TILE_SIZE, MAX_ROW_AGG, MIN_ROW_AGG, COLOR_BAR_SIZE, AXIS_MARGIN, DATA_TEXTURE_SIZE, PIXELATED_TEXTURE_PARAMETERS, AXIS_LABEL_TEXT_SIZE, AXIS_FONT_FAMILY, AXIS_PADDING, AXIS_MIN_SIZE, AXIS_MAX_SIZE, } from './heatmap-constants.js';
 // eslint-disable-next-line react-refresh/only-export-components
 export * as viv from './viv.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitessce/gl",
-  "version": "3.5.8",
+  "version": "3.5.10",
   "author": "HIDIVE Lab at HMS",
   "homepage": "http://vitessce.io",
   "repository": {
@@ -38,13 +38,17 @@
     "@math.gl/core": "^3.5.6",
     "@nebula.gl/edit-modes": "0.23.8",
     "@nebula.gl/layers": "0.23.8",
-    "@turf/area": "^6.5.0",
-    "@turf/boolean-contains": "^6.5.0",
-    "@turf/boolean-overlap": "^6.5.0",
-    "@turf/boolean-point-in-polygon": "^6.5.0",
-    "@turf/boolean-within": "^6.5.0",
-    "@turf/centroid": "^6.5.0",
-    "@turf/helpers": "^6.5.0",
+    "@turf/area": "^7.2.0",
+    "@turf/boolean-contains": "^7.2.0",
+    "@turf/boolean-overlap": "^7.2.0",
+    "@turf/boolean-point-in-polygon": "^7.2.0",
+    "@turf/boolean-within": "^7.2.0",
+    "@turf/centroid": "^7.2.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/union": "^7.2.0",
+    "@turf/meta": "^7.2.0",
+    "@turf/invariant": "^7.2.0",
+    "@turf/distance": "^7.2.0",
     "d3-array": "^2.4.0",
     "deck.gl": "8.8.27",
     "glslify": "^7.0.0",
@@ -52,8 +56,8 @@
     "math.gl": "^3.5.6",
     "mathjs": "^9.2.0",
     "nebula.gl": "0.23.8",
-    "@vitessce/utils": "3.5.8",
-    "@vitessce/globals": "3.5.8"
+    "@vitessce/utils": "3.5.10",
+    "@vitessce/globals": "3.5.10"
   },
   "devDependencies": {
     "glsl-colormap": "^1.0.1"