@deck.gl/aggregation-layers 8.8.0-alpha.6 → 8.8.0-beta.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/aggregation-layers",
   "description": "deck.gl layers that aggregate the input data into alternative representations",
   "license": "MIT",
-  "version": "8.8.0-alpha.6",
+  "version": "8.8.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -30,13 +30,15 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^8.5.13",
-    "@math.gl/web-mercator": "3.6.0-alpha.8",
+    "@luma.gl/constants": "^8.5.14",
+    "@luma.gl/shadertools": "^8.5.14",
+    "@math.gl/web-mercator": "^3.6.0",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
-    "@deck.gl/layers": "^8.0.0"
+    "@deck.gl/layers": "^8.0.0",
+    "@luma.gl/core": "^8.0.0"
   },
-  "gitHead": "6885ccab01c91a7632385f566c9377f8ae387e7c"
+  "gitHead": "bb459e1b4a4e3674ee9832d775d39211541d17b4"
 }

package/src/{aggregation-layer.js → aggregation-layer.ts}

@@ -18,22 +18,39 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer, AttributeManager, _compareProps as compareProps} from '@deck.gl/core';
+import {
+  CompositeLayer,
+  AttributeManager,
+  _compareProps as compareProps,
+  UpdateParameters,
+  CompositeLayerProps
+} from '@deck.gl/core';
 import {cssToDeviceRatio} from '@luma.gl/core';
 import {filterProps} from './utils/prop-utils';
 
-export default class AggregationLayer extends CompositeLayer {
-  initializeState(dimensions) {
-    super.initializeState();
+export type AggregationLayerProps<DataT = any> = CompositeLayerProps<DataT>;
+
+export default abstract class AggregationLayer<
+  ExtraPropsT = {}
+> extends CompositeLayer<ExtraPropsT> {
+  static layerName = 'AggregationLayer';
+
+  state!: CompositeLayer['state'] & {
+    ignoreProps?: Record<string, any>;
+    dimensions?: any;
+  };
+
+  initializeAggregationLayer(dimensions: any) {
+    super.initializeState(this.context);
 
     this.setState({
       // Layer props , when changed doesn't require updating aggregation
-      ignoreProps: filterProps(this.constructor._propTypes, dimensions.data.props),
+      ignoreProps: filterProps((this.constructor as any)._propTypes, dimensions.data.props),
       dimensions
     });
   }
 
-  updateState(opts) {
+  updateState(opts: UpdateParameters<this>) {
     super.updateState(opts);
     const {changeFlags} = opts;
     if (changeFlags.extensionsChanged) {
@@ -45,7 +62,7 @@ export default class AggregationLayer extends CompositeLayer {
     }
 
     // Explictly call to update attributes as 'CompositeLayer' doesn't call this
-    this._updateAttributes(opts.props);
+    this._updateAttributes();
   }
 
   updateAttributes(changedAttributes) {
@@ -55,7 +72,7 @@ export default class AggregationLayer extends CompositeLayer {
   }
 
   getAttributes() {
-    return this.getAttributeManager().getShaderAttributes();
+    return this.getAttributeManager()!.getShaderAttributes();
   }
 
   getModuleSettings() {
@@ -84,7 +101,10 @@ export default class AggregationLayer extends CompositeLayer {
    * @param {Boolean} params.compareAll - when `true` it will include non layer props for comparision
    * @returns {Boolean} - returns true if dimensions' prop or accessor is changed
    **/
-  isAggregationDirty(updateOpts, params = {}) {
+  isAggregationDirty(
+    updateOpts,
+    params: {compareAll?: boolean; dimension?: any} = {}
+  ): string | boolean {
     const {props, oldProps, changeFlags} = updateOpts;
     const {compareAll = false, dimension} = params;
     const {ignoreProps} = this.state;
@@ -113,7 +133,7 @@ export default class AggregationLayer extends CompositeLayer {
         oldProps,
         newProps: props,
         ignoreProps,
-        propTypes: this.constructor._propTypes
+        propTypes: (this.constructor as any)._propTypes
       });
     }
     // Compare props of the dimension
@@ -131,7 +151,7 @@ export default class AggregationLayer extends CompositeLayer {
    * @returns {Boolean} - `true` if attribute `name` is changed, `false` otherwise,
    *                       If `name` is not passed or `undefiend`, `true` if any attribute is changed, `false` otherwise
    **/
-  isAttributeChanged(name) {
+  isAttributeChanged(name?: string) {
     const {changedAttributes} = this.state;
     if (!name) {
       // if name not specified return true if any attribute is changed
@@ -156,13 +176,10 @@ export default class AggregationLayer extends CompositeLayer {
 // Returns true if given object is empty, false otherwise.
 function isObjectEmpty(obj) {
   let isEmpty = true;
-  /* eslint-disable no-unused-vars  */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   for (const key in obj) {
     isEmpty = false;
     break;
   }
-  /* eslint-enable no-unused-vars  */
   return isEmpty;
 }
-
-AggregationLayer.layerName = 'AggregationLayer';

package/src/contour-layer/{contour-layer.js → contour-layer.ts}

@@ -21,18 +21,27 @@
 import GL from '@luma.gl/constants';
 import {LineLayer, SolidPolygonLayer} from '@deck.gl/layers';
 import {generateContours} from './contour-utils';
-import {log} from '@deck.gl/core';
+import {
+  Accessor,
+  AccessorFunction,
+  Color,
+  Layer,
+  log,
+  Position,
+  UpdateParameters,
+  DefaultProps
+} from '@deck.gl/core';
 
 import GPUGridAggregator from '../utils/gpu-grid-aggregation/gpu-grid-aggregator';
 import {AGGREGATION_OPERATION, getValueFunc} from '../utils/aggregation-operation-utils';
 import {getBoundingBox, getGridParams} from '../utils/grid-aggregation-utils';
-import GridAggregationLayer from '../grid-aggregation-layer';
+import GridAggregationLayer, {GridAggregationLayerProps} from '../grid-aggregation-layer';
 
 const DEFAULT_COLOR = [255, 255, 255, 255];
 const DEFAULT_STROKE_WIDTH = 1;
 const DEFAULT_THRESHOLD = 1;
 
-const defaultProps = {
+const defaultProps: DefaultProps<ContourLayerProps> = {
   // grid aggregation
   cellSize: {type: 'number', min: 1, max: 1000, value: 1000},
   getPosition: {type: 'accessor', value: x => x.position},
@@ -58,9 +67,84 @@ const DIMENSIONS = {
   }
 };
 
-export default class ContourLayer extends GridAggregationLayer {
-  initializeState() {
-    super.initializeState({
+/** All properties supported by ContourLayer. */
+export type ContourLayerProps<DataT = any> = _ContourLayerProps<DataT> &
+  GridAggregationLayerProps<DataT>;
+
+/** Properties added by ContourLayer. */
+export type _ContourLayerProps<DataT> = {
+  /**
+   * Size of each cell in meters.
+   * @default 1000
+   */
+  cellSize?: number;
+
+  /**
+   * When set to true, aggregation is performed on GPU, provided other conditions are met.
+   * @default true
+   */
+  gpuAggregation?: boolean;
+
+  /**
+   * Defines the type of aggregation operation, valid values are 'SUM', 'MEAN', 'MIN' and 'MAX'.
+   * @default 'SUM'
+   */
+  aggregation?: 'SUM' | 'MEAN' | 'MIN' | 'MAX';
+
+  /**
+   * Definition of contours to be drawn.
+   * @default [{threshold: 1}]
+   */
+  contours: {
+    /**
+     * Isolines: `threshold` value must be a single `Number`, Isolines are generated based on this threshold value.
+     *
+     * Isobands: `threshold` value must be an Array of two `Number`s. Isobands are generated using `[threshold[0], threshold[1])` as threshold range, i.e area that has values `>= threshold[0]` and `< threshold[1]` are rendered with corresponding color. NOTE: `threshold[0]` is inclusive and `threshold[1]` is not inclusive.
+     */
+    threshold: number | number[];
+
+    /**
+     * RGBA color array to be used to render the contour.
+     * @default [255, 255, 255, 255]
+     */
+    color?: Color;
+
+    /**
+     * Applicable for `Isoline`s only, width of the Isoline in pixels.
+     * @default 1
+     */
+    strokeWidth?: number;
+
+    /** Defines z order of the contour. */
+    zIndex?: number;
+  }[];
+
+  /**
+   * A very small z offset that is added for each vertex of a contour (Isoline or Isoband).
+   * @default 0.005
+   */
+  zOffset?: number;
+
+  /**
+   * Method called to retrieve the position of each object.
+   * @default object => object.position
+   */
+  getPosition?: AccessorFunction<DataT, Position>;
+
+  /**
+   * The weight of each object.
+   * @default 1
+   */
+  getWeight?: Accessor<DataT, number>;
+};
+export default class ContourLayer<DataT = any, ExtraPropsT = {}> extends GridAggregationLayer<
+  ExtraPropsT & Required<_ContourLayerProps<DataT>>
+> {
+  static layerName = 'ContourLayer';
+  static defaultProps = defaultProps;
+
+  initializeState(): void {
+    super.initializeAggregationLayer({
       dimensions: DIMENSIONS
     });
     this.setState({
@@ -73,7 +157,7 @@ export default class ContourLayer extends GridAggregationLayer {
         }
       }
     });
-    const attributeManager = this.getAttributeManager();
+    const attributeManager = this.getAttributeManager()!;
     attributeManager.add({
       [POSITION_ATTRIBUTE_NAME]: {
         size: 3,
@@ -86,7 +170,7 @@ export default class ContourLayer extends GridAggregationLayer {
     });
   }
 
-  updateState(opts) {
+  updateState(opts: UpdateParameters<this>): void {
     super.updateState(opts);
     let contoursChanged = false;
     const {oldProps, props} = opts;
@@ -102,7 +186,7 @@ export default class ContourLayer extends GridAggregationLayer {
     }
   }
 
-  renderLayers() {
+  renderLayers(): Layer[] {
     const {contourSegments, contourPolygons} = this.state.contourData;
 
     const LinesSubLayerClass = this.getSubLayerClass('lines', LineLayer);
@@ -219,7 +303,7 @@ export default class ContourLayer extends GridAggregationLayer {
 
   // Private (Aggregation)
 
-  _updateAccessors(opts) {
+  private _updateAccessors(opts) {
     const {getWeight, aggregation, data} = opts.props;
     const {count} = this.state.weights;
     if (count) {
@@ -229,7 +313,7 @@ export default class ContourLayer extends GridAggregationLayer {
     this.setState({getValue: getValueFunc(aggregation, getWeight, {data})});
   }
 
-  _resetResults() {
+  private _resetResults() {
     const {count} = this.state.weights;
     if (count) {
       count.aggregationData = null;
@@ -238,7 +322,7 @@ export default class ContourLayer extends GridAggregationLayer {
 
   // Private (Contours)
 
-  _generateContours() {
+  private _generateContours() {
     const {numCol, numRow, gridOrigin, gridOffset, thresholdData} = this.state;
     const {count} = this.state.weights;
     let {aggregationData} = count;
@@ -260,7 +344,7 @@ export default class ContourLayer extends GridAggregationLayer {
     this.setState({contourData});
   }
 
-  _updateThresholdData(props) {
+  private _updateThresholdData(props) {
     const {contours, zOffset} = props;
     const count = contours.length;
     const thresholdData = new Array(count);
@@ -275,6 +359,3 @@ export default class ContourLayer extends GridAggregationLayer {
     this.setState({thresholdData});
   }
 }
-
-ContourLayer.layerName = 'ContourLayer';
-ContourLayer.defaultProps = defaultProps;

package/src/contour-layer/{contour-utils.js → contour-utils.ts}

@@ -4,14 +4,19 @@ import {getCode, getVertices, CONTOUR_TYPE} from './marching-squares';
 /* eslint-disable max-depth */
 export function generateContours({
   thresholdData,
-  colors,
   cellWeights,
   gridSize,
   gridOrigin,
   cellSize
+}: {
+  thresholdData: any;
+  cellWeights: Float32Array;
+  gridSize: number[];
+  gridOrigin: number[];
+  cellSize: number[];
 }) {
-  const contourSegments = [];
-  const contourPolygons = [];
+  const contourSegments: {start: number[]; end: number[]; contour: any}[] = [];
+  const contourPolygons: {vertices: number[][]; contour: any}[] = [];
   const width = gridSize[0];
   const height = gridSize[1];
   let segmentIndex = 0;
@@ -32,6 +37,7 @@ export function generateContours({
           height
         });
         const opts = {
+          type: CONTOUR_TYPE.ISO_BANDS,
           gridOrigin,
           cellSize,
           x,
@@ -44,7 +50,7 @@ export function generateContours({
         };
         if (Array.isArray(threshold)) {
           opts.type = CONTOUR_TYPE.ISO_BANDS;
-          const polygons = getVertices(opts);
+          const polygons = getVertices(opts) as number[][][];
           for (const polygon of polygons) {
             contourPolygons[polygonIndex++] = {
               vertices: polygon,
@@ -54,7 +60,7 @@ export function generateContours({
         } else {
           // Get the intersection vertices based on MarchingSquares code.
           opts.type = CONTOUR_TYPE.ISO_LINES;
-          const vertices = getVertices(opts);
+          const vertices = getVertices(opts) as number[][];
           for (let i = 0; i < vertices.length; i += 2) {
             contourSegments[segmentIndex++] = {
               start: vertices[i],

package/src/contour-layer/{marching-squares.js → marching-squares.ts}

@@ -16,7 +16,7 @@ const DEFAULT_THRESHOLD_DATA = {
 
 // Utility methods
 
-function getVertexCode(weight, threshold) {
+function getVertexCode(weight: number, threshold: number | number[]): number {
   // threshold must be a single value or a range (array of size 2)
 
   // Iso-bands
@@ -50,8 +50,8 @@ export function getCode(opts) {
   const isTopBoundary = y >= height - 1;
   const isBoundary = isLeftBoundary || isRightBoundary || isBottomBoundary || isTopBoundary;
 
-  const weights = {};
-  const codes = {};
+  const weights: Record<string, number> = {};
+  const codes: Record<string, number> = {};
 
   // TOP
   if (isLeftBoundary || isTopBoundary) {
@@ -147,9 +147,9 @@ export function getVertices(opts) {
   //      ]
 
   if (type === CONTOUR_TYPE.ISO_BANDS) {
-    const polygons = [];
+    const polygons: number[][][] = [];
     offsets.forEach(polygonOffsets => {
-      const polygon = [];
+      const polygon: number[][] = [];
       polygonOffsets.forEach(xyOffset => {
         const vX = refVertexX + xyOffset[0] * cellSize[0];
         const vY = refVertexY + xyOffset[1] * cellSize[1];
@@ -161,7 +161,7 @@ export function getVertices(opts) {
   }
 
   // default case is ISO_LINES
-  const lines = [];
+  const lines: number[][] = [];
   offsets.forEach(xyOffsets => {
     xyOffsets.forEach(offset => {
       const vX = refVertexX + offset[0] * cellSize[0];