HeatmapLayer: website testing fixes (#3409)

visgl · Aug 7, 2019 · 2adcf3a · 2adcf3a
1 parent 47fa3ac
commit 2adcf3a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 14 deletions.
diff --git a/docs/layers/README.md b/docs/layers/README.md
@@ -36,6 +36,7 @@ The [Aggregation Layers](https://www.npmjs.com/package/@deck.gl/aggregation-laye
   - [CPUGridLayer](/docs/layers/cpu-grid-layer.md)
   - [HexagonLayer](/docs/layers/hexagon-layer.md)
   - [ScreenGridLayer](/docs/layers/screen-grid-layer.md)
+  - [HeatmapLayer](/docs/layers/heatmap-layer.md) *Experimental*
 
 ## Geo Layers
 

diff --git a/examples/website/heatmap-layer/app.js b/examples/website/heatmap-layer/app.js
@@ -3,6 +3,7 @@
 import React, {PureComponent} from 'react';
 import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
+import {isWebGL2} from '@luma.gl/core';
 import DeckGL from 'deck.gl';
 import {HeatmapLayer} from '@deck.gl/aggregation-layers';
 
@@ -25,6 +26,9 @@ const MAP_STYLE = 'mapbox://styles/mapbox/dark-v9';
 class Root extends PureComponent {
   constructor(props) {
     super(props);
+    this.state = {
+      webGL2Supported: true
+    };
   }
 
   _renderLayers() {
@@ -44,13 +48,34 @@ class Root extends PureComponent {
     ];
   }
 
+  _onWebGLInitialized(gl) {
+    const webGL2Supported = isWebGL2(gl);
+    this.setState({webGL2Supported});
+  }
+
   render() {
+    const {webGL2Supported} = this.state;
+    if (!webGL2Supported) {
+      return (
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh'
+          }}
+        >
+          <h2> {'HeatmapLayer is not supported on this browser, requires WebGL2'} </h2>
+        </div>
+      );
+    }
     return (
       <div>
         <DeckGL
           initialViewState={INITIAL_VIEW_STATE}
           controller={true}
           layers={this._renderLayers()}
+          onWebGLInitialized={this._onWebGLInitialized.bind(this)}
         >
           <StaticMap
             reuseMaps

diff --git a/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js b/modules/aggregation-layers/src/heatmap-layer/heatmap-layer.js
@@ -58,8 +58,12 @@ const defaultProps = {
 export default class HeatmapLayer extends CompositeLayer {
   initializeState() {
     const {gl} = this.context;
+    const textureSize = Math.min(SIZE_2K, getParameter(gl, gl.MAX_TEXTURE_SIZE));
+    this.state = {textureSize, supported: true};
     if (!isWebGL2(gl)) {
-      log.error('HeatmapLayer is not supported on this browser, requires WebGL2')();
+      log.error(`HeatmapLayer ${this.id} is not supported on this browser, requires WebGL2`)();
+      this.setState({supported: false});
+      return;
     }
     this._setupAttributes();
     this._setupResources();
@@ -71,6 +75,9 @@ export default class HeatmapLayer extends CompositeLayer {
   }
 
   updateState(opts) {
+    if (!this.state.supported) {
+      return;
+    }
     super.updateState(opts);
     const {props, oldProps} = opts;
     const changeFlags = this._getChangeFlags(opts);
@@ -97,6 +104,9 @@ export default class HeatmapLayer extends CompositeLayer {
   }
 
   renderLayers() {
+    if (!this.state.supported) {
+      return [];
+    }
     const {
       weightsTexture,
       triPositionBuffer,
@@ -140,13 +150,15 @@ export default class HeatmapLayer extends CompositeLayer {
       triTexCoordBuffer,
       colorTexture
     } = this.state;
-    weightsTransform.delete();
-    weightsTexture.delete();
-    maxWeightTransform.delete();
-    maxWeightsTexture.delete();
-    triPositionBuffer.delete();
-    triTexCoordBuffer.delete();
-    colorTexture.delete();
+    /* eslint-disable no-unused-expressions */
+    weightsTransform && weightsTransform.delete();
+    weightsTexture && weightsTexture.delete();
+    maxWeightTransform && maxWeightTransform.delete();
+    maxWeightsTexture && maxWeightsTexture.delete();
+    triPositionBuffer && triPositionBuffer.delete();
+    triTexCoordBuffer && triTexCoordBuffer.delete();
+    colorTexture && colorTexture.delete();
+    /* eslint-enable no-unused-expressions */
   }
 
   // PRIVATE
@@ -203,7 +215,7 @@ export default class HeatmapLayer extends CompositeLayer {
 
   _setupResources() {
     const {gl} = this.context;
-    const textureSize = Math.min(SIZE_2K, getParameter(gl, gl.MAX_TEXTURE_SIZE));
+    const {textureSize} = this.state;
     const weightsTexture = getFloatTexture(gl, {
       width: textureSize,
       height: textureSize,
@@ -220,8 +232,7 @@ export default class HeatmapLayer extends CompositeLayer {
       _targetTextureVarying: 'weightsTexture'
     });
 
-    this.state = {
-      textureSize,
+    this.setState({
       weightsTexture,
       maxWeightsTexture,
       weightsTransform,
@@ -245,7 +256,7 @@ export default class HeatmapLayer extends CompositeLayer {
         byteLength: 48,
         accessor: {size: 2}
       })
-    };
+    });
   }
 
   _updateMaxWeightValue() {

diff --git a/website/src/components/demos/aggregation-layer-demos.js b/website/src/components/demos/aggregation-layer-demos.js
@@ -96,7 +96,6 @@ export const HeatmapLayerDemo = createLayerDemoClass({
   props: {
     pickable: false,
     getPosition: d => d.COORDINATES,
-    radiusPixels: 25,
-    enhanceFactor: 20
+    radiusPixels: 25
   }
 });