@deck.gl/aggregation-layers 8.6.0-alpha.1 → 8.6.0-beta.1

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.6.0-alpha.1",
+  "version": "8.6.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -29,13 +29,13 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@luma.gl/shadertools": "^8.5.4",
-    "@math.gl/web-mercator": "^3.5.3",
+    "@luma.gl/shadertools": "^8.5.10",
+    "@math.gl/web-mercator": "^3.5.4",
     "d3-hexbin": "^0.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/layers": "^8.0.0"
   },
-  "gitHead": "62c579bab4114b34e7ac7fbeb8e05fc0ea11c13b"
+  "gitHead": "ce689d7ceb9a732d8b83d959581147b36f416d38"
 }

package/src/gpu-grid-layer/gpu-grid-cell-layer-vertex.glsl.js

@@ -95,7 +95,6 @@ float linearScale(vec2 domain, vec2 range, float value) {
 }
 
 void main(void) {
-
   vec2 clrDomain = colorDomainValid ? colorDomain : vec2(colorData.maxMinCount.a, colorData.maxMinCount.r);
   vec4 color = quantizeScale(clrDomain, colorRange, colors.r);
 
@@ -121,6 +120,7 @@ void main(void) {
 
   vec3 centroidPosition = vec3(instancePositionXFP64[0], instancePositionYFP64[0], elevation);
   vec3 centroidPosition64Low = vec3(instancePositionXFP64[1], instancePositionYFP64[1], 0.0);
+  geometry.worldPosition = centroidPosition;
   vec3 pos = vec3(project_size(positions.xy + offset) * dotRadius, 0.);
 
   // Set color to be rendered to picking fbo (also used to check for selection highlight).

package/src/heatmap-layer/heatmap-layer.js

@@ -29,12 +29,7 @@ import {
   getTextureParams
 } from './heatmap-layer-utils';
 import {Buffer, Texture2D, Transform, getParameters, FEATURES, hasFeatures} from '@luma.gl/core';
-import {
-  AttributeManager,
-  COORDINATE_SYSTEM,
-  log,
-  _mergeShaders as mergeShaders
-} from '@deck.gl/core';
+import {AttributeManager, COORDINATE_SYSTEM, log} from '@deck.gl/core';
 import TriangleLayer from './triangle-layer';
 import AggregationLayer from '../aggregation-layer';
 import {defaultColorRange, colorRangeToFlatArray} from '../utils/color-utils';
@@ -44,8 +39,6 @@ import vs_max from './max-vs.glsl';
 import fs_max from './max-fs.glsl';
 
 const RESOLUTION = 2; // (number of common space pixels) / (number texels)
-const SIZE_2K = 2048;
-const ZOOM_DEBOUNCE = 500; // milliseconds
 const TEXTURE_OPTIONS = {
   mipmaps: false,
   parameters: {
@@ -71,7 +64,9 @@ const defaultProps = {
   threshold: {type: 'number', min: 0, max: 1, value: 0.05},
   colorDomain: {type: 'array', value: null, optional: true},
   // 'SUM' or 'MEAN'
-  aggregation: 'SUM'
+  aggregation: 'SUM',
+  weightsTextureSize: {type: 'number', min: 128, max: 2048, value: 2048},
+  debounceTimeout: {type: 'number', min: 0, max: 1000, value: 500}
 };
 
 const REQUIRED_FEATURES = [
@@ -112,11 +107,16 @@ export default class HeatmapLayer extends AggregationLayer {
       return;
     }
     super.updateState(opts);
+    this._updateHeatmapState(opts);
+  }
+
+  _updateHeatmapState(opts) {
     const {props, oldProps} = opts;
     const changeFlags = this._getChangeFlags(opts);
 
-    if (changeFlags.viewportChanged) {
-      changeFlags.boundsChanged = this._updateBounds();
+    if (changeFlags.dataChanged || changeFlags.viewportChanged) {
+      // if data is changed, do not debounce and immediately update the weight map
+      changeFlags.boundsChanged = this._updateBounds(changeFlags.dataChanged);
       this._updateTextureRenderingBounds();
     }
 
@@ -139,7 +139,6 @@ export default class HeatmapLayer extends AggregationLayer {
 
     this.setState({zoom: opts.context.viewport.zoom});
   }
-  /* eslint-enable max-statements,complexity */
 
   renderLayers() {
     if (!this.state.supported) {
@@ -262,7 +261,9 @@ export default class HeatmapLayer extends AggregationLayer {
 
   _setupTextureParams() {
     const {gl} = this.context;
-    const textureSize = Math.min(SIZE_2K, getParameters(gl, gl.MAX_TEXTURE_SIZE));
+    const {weightsTextureSize} = this.props;
+
+    const textureSize = Math.min(weightsTextureSize, getParameters(gl, gl.MAX_TEXTURE_SIZE));
     const floatTargetSupport = hasFeatures(gl, FEATURES.COLOR_ATTACHMENT_RGBA32F);
     const {format, type} = getTextureParams({gl, floatTargetSupport});
     const weightsScale = floatTargetSupport ? 1 : 1 / 255;
@@ -276,18 +277,25 @@ export default class HeatmapLayer extends AggregationLayer {
     }
   }
 
-  _createWeightsTransform(shaderOptions = {}) {
+  getShaders(type) {
+    return super.getShaders(
+      type === 'max-weights-transform'
+        ? {
+            vs: vs_max,
+            _fs: fs_max
+          }
+        : {
+            vs: weights_vs,
+            _fs: weights_fs
+          }
+    );
+  }
+
+  _createWeightsTransform(shaders = {}) {
     const {gl} = this.context;
     let {weightsTransform} = this.state;
     const {weightsTexture} = this.state;
     weightsTransform?.delete();
-    const shaders = mergeShaders(
-      {
-        vs: weights_vs,
-        _fs: weights_fs
-      },
-      shaderOptions
-    );
 
     weightsTransform = new Transform(gl, {
       id: `${this.id}-weights-transform`,
@@ -303,7 +311,11 @@ export default class HeatmapLayer extends AggregationLayer {
     const {gl} = this.context;
     this._createTextures();
     const {textureSize, weightsTexture, maxWeightsTexture} = this.state;
-    this._createWeightsTransform();
+
+    const weightsTransformShaders = this.getShaders('weights-transform');
+    this._createWeightsTransform(weightsTransformShaders);
+
+    const maxWeightsTransformShaders = this.getShaders('max-weights-transform');
     const maxWeightTransform = new Transform(gl, {
       id: `${this.id}-max-weights-transform`,
       _sourceTextures: {
@@ -311,8 +323,7 @@ export default class HeatmapLayer extends AggregationLayer {
       },
       _targetTexture: maxWeightsTexture,
       _targetTextureVarying: 'outTexture',
-      vs: vs_max,
-      _fs: fs_max,
+      ...maxWeightsTransformShaders,
       elementCount: textureSize * textureSize
     });
 
@@ -496,6 +507,7 @@ export default class HeatmapLayer extends AggregationLayer {
 
   _debouncedUpdateWeightmap(fromTimer = false) {
     let {updateTimer} = this.state;
+    const {debounceTimeout} = this.props;
 
     if (fromTimer) {
       updateTimer = null;
@@ -506,7 +518,7 @@ export default class HeatmapLayer extends AggregationLayer {
     } else {
       this.setState({isWeightMapDirty: false});
       clearTimeout(updateTimer);
-      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), ZOOM_DEBOUNCE);
+      updateTimer = setTimeout(this._debouncedUpdateWeightmap.bind(this, true), debounceTimeout);
     }
 
     this.setState({updateTimer});

package/src/hexagon-layer/hexagon-layer.js

@@ -66,9 +66,6 @@ const defaultProps = {
 };
 
 export default class HexagonLayer extends AggregationLayer {
-  shouldUpdateState({changeFlags}) {
-    return changeFlags.somethingChanged;
-  }
   initializeState() {
     const cpuAggregator = new CPUAggregator({
       getAggregator: props => props.hexagonAggregator,
@@ -78,7 +75,7 @@ export default class HexagonLayer extends AggregationLayer {
     this.state = {
       cpuAggregator,
       aggregatorState: cpuAggregator.state,
-      hexagonVertices: null
+      vertices: null
     };
     const attributeManager = this.getAttributeManager();
     attributeManager.add({
@@ -90,47 +87,25 @@ export default class HexagonLayer extends AggregationLayer {
 
   updateState(opts) {
     super.updateState(opts);
-    const {cpuAggregator, hexagonVertices: oldVertices} = this.state;
 
     if (opts.changeFlags.propsOrDataChanged) {
-      this.setState({
-        // make a copy of the internal state of cpuAggregator for testing
-        aggregatorState: cpuAggregator.updateState(opts, {
-          viewport: this.context.viewport,
-          attributes: this.getAttributes()
-        })
+      const aggregatorState = this.state.cpuAggregator.updateState(opts, {
+        viewport: this.context.viewport,
+        attributes: this.getAttributes()
       });
-    }
-
-    // if user provided custom aggregator and returns hexagonVertices,
-    // Need to recalculate radius and angle based on vertices
-    const {hexagonVertices} = cpuAggregator.state.layerData || {};
-
-    if (hexagonVertices && oldVertices !== hexagonVertices) {
-      const vertices = this.convertLatLngToMeterOffset(hexagonVertices);
-      if (vertices) {
+      if (this.state.aggregatorState.layerData !== aggregatorState.layerData) {
+        // if user provided custom aggregator and returns hexagonVertices,
+        // Need to recalculate radius and angle based on vertices
+        const {hexagonVertices} = aggregatorState.layerData || {};
         this.setState({
-          hexagonVertices,
-          vertices
+          vertices: hexagonVertices && this.convertLatLngToMeterOffset(hexagonVertices)
         });
       }
-    } else {
-      // update radius angle by viewport
-      this.updateRadiusAngle();
-    }
-  }
-
-  updateRadiusAngle(vertices) {
-    const {viewport} = this.context;
-    const {unitsPerMeter} = viewport.getDistanceScales();
-    const {cpuAggregator} = this.state;
-
-    if (cpuAggregator.state.layerData && cpuAggregator.state.layerData.radiusCommon) {
-      const {radiusCommon} = cpuAggregator.state.layerData;
-      const radius = radiusCommon / unitsPerMeter[0];
 
-      // convert radius in common to meter
-      this.setState({angle: 90, radius});
+      this.setState({
+        // make a copy of the internal state of cpuAggregator for testing
+        aggregatorState
+      });
     }
   }
 
@@ -183,12 +158,19 @@ export default class HexagonLayer extends AggregationLayer {
 
   renderLayers() {
     const {elevationScale, extruded, coverage, material, transitions} = this.props;
-    const {angle, radius, cpuAggregator, vertices} = this.state;
+    const {aggregatorState, vertices} = this.state;
 
     const SubLayerClass = this.getSubLayerClass('hexagon-cell', ColumnLayer);
     const updateTriggers = this._getSublayerUpdateTriggers();
 
-    const geometry = vertices && vertices.length ? {vertices, radius: 1} : {radius, angle};
+    const geometry = vertices
+      ? {vertices, radius: 1}
+      : {
+          // default geometry
+          radius: aggregatorState.layerData.radiusCommon || 1,
+          radiusUnits: 'common',
+          angle: 90
+        };
     return new SubLayerClass(
       {
         ...geometry,
@@ -210,7 +192,7 @@ export default class HexagonLayer extends AggregationLayer {
         updateTriggers
       }),
       {
-        data: cpuAggregator.state.layerData.data
+        data: aggregatorState.layerData.data
       }
     );
   }