Flatten CompositeLayer.renderLayer() output (visgl#676)

denson · Jun 1, 2017 · e5fe18f · e5fe18f
1 parent f886632
commit e5fe18f
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 17 deletions.
diff --git a/demo/src/components/demos/layer-demo-base.js b/demo/src/components/demos/layer-demo-base.js
@@ -96,7 +96,7 @@ export default function createLayerDemoClass(settings) {
         renderLayer(data, params, {
           onHover: this._onHover
         })
-      ].filter(Boolean);
+      ];
 
       return (
         <div>

diff --git a/docs/api-reference/composite-layer.md b/docs/api-reference/composite-layer.md
@@ -9,6 +9,21 @@ to help create sublayers and handle events.
 If you intend to implement a layer that generates other layers, it is recommended
 that you extend this class.
 
+## Usage
+
+Define a composite layer that renders a set of sublayers, one of them conditionally
+```js
+class MyCompositeLayer extends CompositeLayer {
+  renderLayers() {
+    return [
+      this._renderGroupOfSubLayers(), // returns an array of layers
+      this.props.showScatterplot && new ScatterplotLayer(...)
+    ];
+  }
+}
+```
+
+
 ## Methods
 
 ##### `draw`
@@ -22,10 +37,12 @@ Allows a layer to "render" or insert one or more deck.gl layers after itself.
 Called after a layer has been updated.
 
 Returns:
-- `null`, a single `Layer` instance, or an array of layers.
+- `null`, a single `Layer` instance, or a (nested) array of layers.
 
 The default implementation of `renderLayers` returns `null`.
 
+`renderLayers` can return a nested arrays with `null` values. deck.gl will automatically flatten and filter the array. See usage above.
+
 
 ##### `getPickingInfo`
 

diff --git a/docs/whats-new.md b/docs/whats-new.md
@@ -1,3 +1,9 @@
+# deck.gl v4.1
+
+## CompositeLayer
+
+* `CompositeLayer.renderLayers` can now return a nested arrays with `null` values. deck.gl will automatically flatten and filter the array. This is a small convenience that makes the `renderLayers methods in complex composite layers a little more readable.
+
 # deck.gl v4.0
 
 Release date: March 31, 2017

diff --git a/examples/graph/graph-layer/graph-layer.js b/examples/graph/graph-layer/graph-layer.js
@@ -165,7 +165,7 @@ export default class GraphLayer extends CompositeLayer {
       linksLayer,
       nodesLayer,
       nodeIconsLayer
-    ].filter(Boolean);
+    ];
   }
 
 }

diff --git a/examples/point-cloud-laz/app.js b/examples/point-cloud-laz/app.js
@@ -165,7 +165,7 @@ class Example extends PureComponent {
           viewport={glViewport}
           layers={[
             this._renderLazPointCloudLayer()
-          ].filter(Boolean)}
+          ]}
           onWebGLInitialized={this._onInitialized}/>
       </OrbitController>
     );

diff --git a/examples/point-cloud-ply/app.js b/examples/point-cloud-ply/app.js
@@ -115,7 +115,7 @@ class Example extends PureComponent {
           viewport={glViewport}
           layers={[
             this._renderPointCloudLayer()
-          ].filter(Boolean)}
+          ]}
           onWebGLInitialized={this._onInitialized}/>
         </OrbitController>
       );

diff --git a/examples/sample-layers/outline-polygon-layer/outline-polygon-layer.js b/examples/sample-layers/outline-polygon-layer/outline-polygon-layer.js
@@ -83,7 +83,7 @@ export default class OutlinePolygonLayer extends CompositeLayer {
     return [
       polygonFillLayer
       // polygonOutlineLayer
-    ].filter(Boolean);
+    ];
   }
 }
 

diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "publish-prod": "npm run build && npm run test && npm run test-dist && npm publish",
     "publish-beta": "npm run build && npm run test && npm run test-dist && npm publish --tag beta",
     "test": "npm run lint && npm run build && npm run test-node",
+    "test-fast": "npm run test-node",
     "test-cover": "NODE_ENV=test tape -r babel-register test/node.js && nyc report",
     "test-node": "node test/node.js",
     "test-dist": "node test/node-dist.js",

diff --git a/src/layers/core/geojson-layer/geojson-layer.js b/src/layers/core/geojson-layer/geojson-layer.js
@@ -247,7 +247,7 @@ export default class GeoJsonLayer extends CompositeLayer {
       pointLayer,
       // If extruded: draw fill layer last for correct blending behavior
       extruded && polygonFillLayer
-    ].filter(Boolean);
+    ];
   }
 }
 

diff --git a/src/layers/core/polygon-layer/polygon-layer.js b/src/layers/core/polygon-layer/polygon-layer.js
@@ -195,7 +195,7 @@ export default class PolygonLayer extends CompositeLayer {
       polygonLineLayer,
       // If extruded: draw fill layer last for correct blending behavior
       extruded && polygonLayer
-    ].filter(Boolean);
+    ];
   }
 }
 

diff --git a/src/lib/layer-manager.js b/src/lib/layer-manager.js
@@ -48,6 +48,7 @@
 /* eslint-disable no-try-catch */
 import Layer from './layer';
 import {log} from './utils';
+import {flatten} from './utils/flatten';
 import assert from 'assert';
 import {drawLayers, pickLayers} from './draw-and-pick';
 import {LIFECYCLE} from './constants';
@@ -263,7 +264,10 @@ export default class LayerManager {
         // End layer lifecycle method: render sublayers
 
         if (sublayers) {
-          sublayers = Array.isArray(sublayers) ? sublayers : [sublayers];
+          // Flatten the returned array, removing any null, undefined or false
+          // this allows layers to render sublayers conditionally
+          // (see CompositeLayer.renderLayers docs)
+          sublayers = flatten(sublayers, {filter: Boolean});
 
           // populate reference to parent layer
           sublayers.forEach(layer => {

diff --git a/src/lib/utils/flatten.js b/src/lib/utils/flatten.js
@@ -19,18 +19,32 @@
 // THE SOFTWARE.
 
 /**
- * Flattens a nested array into a single level array
+ * Flattens a nested array into a single level array,
+ * or a single value into an array with one value
  * @example flatten([[1, [2]], [3], 4]) => [1, 2, 3, 4]
+ * @example flatten(1) => [1]
  * @param {Array} array The array to flatten.
- * @return {Array} Returns the new flattened array.
+ * @param {Function} filter= - Optional predicate called on each `value` to
+ *   determine if it should be included (pushed onto) the resulting array.
+ * @param {Array} result=[] - Optional array to push value into
+ * @return {Array} Returns the new flattened array (new array or `result` if provided)
  */
-export function flatten(array, result = []) {
+export function flatten(array, {
+  filter = () => true,
+  result = []
+} = {}) {
+  array = Array.isArray(array) ? array : [array];
+  return flattenArray(array, filter, result);
+}
+
+// Deep flattens an array. Helper to `flatten`, see its parameters
+function flattenArray(array, filter, result) {
   let index = -1;
   while (++index < array.length) {
     const value = array[index];
     if (Array.isArray(value)) {
-      flatten(value, result);
-    } else {
+      flattenArray(value, filter, result);
+    } else if (filter(value)) {
       result.push(value);
     }
   }

diff --git a/test/layers/geojson-layer.spec.js b/test/layers/geojson-layer.spec.js
@@ -53,7 +53,7 @@ test('GeoJsonLayer#updates', t => {
       },
       assert: (layer, oldState) => {
         t.ok(layer.state, 'should update layer state');
-        const subLayers = layer.renderLayers();
+        const subLayers = layer.renderLayers().filter(Boolean);
         t.ok(subLayers.length === 2, 'should render 2 subLayers');
       }
     }, {

diff --git a/test/lib/utils/flatten.spec.js b/test/lib/utils/flatten.spec.js
@@ -42,6 +42,13 @@ const FLATTEN_TEST_CASES = [
     title: 'nested three levels',
     argument: [1, [[2], 3], [[4, [5]], 6]],
     result: [1, 2, 3, 4, 5, 6]
+  }, {
+    title: 'nested three levels with predicate',
+    opts: {
+      filter: Boolean
+    },
+    argument: [1, [[2], null], [[4, [null]], 6]],
+    result: [1, 2, 4, 6]
   }
 ];
 
@@ -62,7 +69,10 @@ test('flatten#import', t => {
 
 test('flatten#tests', t => {
   for (const tc of FLATTEN_TEST_CASES) {
-    const result = flatten(tc.argument);
+    t.comment(tc.title + JSON.stringify(tc.opts));
+    const result = tc.opts ?
+      flatten(tc.argument, tc.opts) :
+      flatten(tc.argument);
     t.deepEqual(result, tc.result, `flatten ${tc.title} returned expected result`);
   }
   t.end();
@@ -71,7 +81,7 @@ test('flatten#tests', t => {
 test('fillArray#tests', t => {
   for (const tc of FILL_ARRAY_TEST_CASES) {
     const result = fillArray(tc.arguments);
-    t.deepEqual(result, tc.result, `flatten ${tc.title} returned expected result`);
+    t.deepEqual(result, tc.result, `fillArray ${tc.title} returned expected result`);
   }
   t.end();
 });