ES6 Container/Immutable support cleanup (visgl#399) (visgl#402)

aravindiiitb · Mar 8, 2017 · 6287972 · 6287972
1 parent 1701b09
commit 6287972
Show file tree

Hide file tree

Showing 47 changed files with 804 additions and 643 deletions.
diff --git a/API-GUIDELINES.md b/API-GUIDELINES.md
@@ -74,6 +74,37 @@ docs, or other places that are easy to track.
   as examples rather than supported layers with the intention to help users implement similar
   functionality for themselves.
 
+## Rules for Data Iteration and Access
+
+A general ambition is that all deck.gl layers should accept any "ES6 container"
+in the `data` prop. This includes ES6 Sets and Maps, as well as Immutable.js
+containers. For most layers the only requirement is that iteration
+over data is performed using general functions:
+```
+    for (const object of this.props.data) { ... } // GOOD
+    this.props.data.forEach((object, index) => ...) // GOOD
+```
+Note that the following will NOT work on general containers:
+```
+    for (let i = 0; i < this.props.data.length; i++) { // NOT GOOD
+      const object = this.props.data[i];
+      ...
+    }
+```
+Special attention is normally only required when accessing elements using
+keys or indices. deck.gl provides internal functions `get` and `count` to
+handle such cases:
+```
+    for (let i = 0; i < count(this.props.data); i++) { // GOOD
+      const object = get(this.props.data, i); // instead of this.props.data[i]
+      const value = get(object, 'value'); // instead of object.value
+    }
+```
+Remarks:
+* deck.gl does not support plain objects as `data`. Support for objects would
+  impose too many restrictions on layer iteration code and make layers less
+  readable.
+
 ## Rules for Naming Props, Attributes, Uniforms and updateTriggers
 
 Summary: Custom layer props usually corresponds to either attributes or uniforms

diff --git a/README.md b/README.md
@@ -47,7 +47,7 @@ or browse directly the [docs folder](./docs).
 
 ## Developing
 
-    npm install
+    npm install # or yarn
     npm test
     npm start  # See note below
 
@@ -58,6 +58,15 @@ since the npm start command tries to build and run that example.
     npm install
     cd ../..
 
+Note that `npm start` in the main directory actually runs `examples/main`.
+You will need to install dependencies in that example first:
+
+    cd examples/main
+    npm install # or yarn
+    cd ../..
+    npm start
+
+
 #### Node Version Requirement
 
 Building deck.gl from source has a dependency on node `4.0` or higher.

diff --git a/demo/src/components/demos/plot.js b/demo/src/components/demos/plot.js
@@ -102,25 +102,27 @@ export default class PlotDemo extends Component {
     } = this.props;
     const {viewport, equation, hoverInfo} = this.state;
 
-    const layers = equation.valid ? [new PlotLayer({
-      getZ: equation.func,
-      getColor: (x, y, z) => [40, z * 128 + 128, 160],
-      xMin: -Math.PI,
-      xMax: Math.PI,
-      yMin: -Math.PI,
-      yMax: Math.PI,
-      xResolution: resolution.value,
-      yResolution: resolution.value,
-      drawAxes: showAxis.value,
-      axesOffset: 0.25,
-      axesColor: [0, 0, 0, 128],
-      opacity: 1,
-      pickable: true,
-      onHover: this._onHover,
-      updateTriggers: {
-        getZ: equation.text
-      }
-    })] : [];
+    const layers = equation.valid ? [
+      new PlotLayer({
+        getZ: equation.func,
+        getColor: (x, y, z) => [40, z * 128 + 128, 160],
+        xMin: -Math.PI,
+        xMax: Math.PI,
+        yMin: -Math.PI,
+        yMax: Math.PI,
+        xResolution: resolution.value,
+        yResolution: resolution.value,
+        drawAxes: showAxis.value,
+        axesOffset: 0.25,
+        axesColor: [0, 0, 0, 128],
+        opacity: 1,
+        pickable: true,
+        onHover: this._onHover,
+        updateTriggers: {
+          getZ: equation.text
+        }
+      })
+    ] : [];
 
     const canvasProps = {
       width,

diff --git a/examples/hello-world-browserify/app.js b/examples/hello-world-browserify/app.js
@@ -1,9 +1,8 @@
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-import MapGL from 'react-map-gl';
+// import MapGL from 'react-map-gl';
 import DeckGL from 'deck.gl';
 import {LineLayer} from 'deck.gl';
-// import MapGL from 'react-map-gl';
 /* global document */
 
 // Set your mapbox token here

diff --git a/examples/hello-world-rollup/app.js b/examples/hello-world-rollup/app.js
@@ -1,9 +1,9 @@
+/* global document */
 import React, {Component} from 'react';
 import {render} from 'react-dom';
-// import MapGL from 'react-map-gl';
+import MapGL from 'react-map-gl';
 import DeckGL from 'deck.gl';
 import {LineLayer} from 'deck.gl';
-/* global document */
 
 // Set your mapbox token here
 const MAPBOX_TOKEN = process.env.MAPBOX_ACCESS_TOKEN; // eslint-disable-line

diff --git a/examples/layer-browser/src/app.js b/examples/layer-browser/src/app.js
@@ -1,6 +1,5 @@
 /* global window, document */
-import DeckGL from 'deck.gl';
-import {experimental} from 'deck.gl';
+import DeckGL, {experimental} from 'deck.gl';
 const {ReflectionEffect} = experimental;
 
 import React, {PureComponent} from 'react';
@@ -11,10 +10,12 @@ import {FPSStats} from 'react-stats';
 
 import {Matrix4} from 'luma.gl';
 
-import LayerInfo from './layer-info';
-import LayerSelector from './layer-selector';
-import LayerControls from './layer-controls';
-import LAYER_CATEGORIES from './layer-examples';
+import LayerInfo from './components/layer-info';
+import LayerSelector from './components/layer-selector';
+import LayerControls from './components/layer-controls';
+
+import LAYER_CATEGORIES from './examples';
+import {setImmutableDataSamples} from './immutable-data-samples';
 
 /* eslint-disable no-process-env */
 const MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN || // eslint-disable-line
@@ -36,6 +37,7 @@ class App extends PureComponent {
       },
       activeExamples: {},
       settings: {
+        // immutable: false,
         effects: false,
         separation: 0,
         rotationZ: 0,
@@ -90,6 +92,7 @@ class App extends PureComponent {
 
   _onUpdateContainerSettings(settings) {
     this.setState({settings});
+    setImmutableDataSamples(settings.immutable);
   }
 
   _onHover(info) {

diff --git a/examples/layer-browser/src/components/color-palette-picker.js b/examples/layer-browser/src/components/color-palette-picker.js
@@ -0,0 +1,65 @@
+import React, {PureComponent} from 'react';
+import {getColorArray, getColorHex} from './color-picker';
+import colorbrewer from 'colorbrewer';
+
+function entries(obj) {
+  return Object.keys(obj).map(k => [k, obj[k]]);
+}
+
+const cbNames = [
+  'YlOrRd', 'YlGnBu', 'PuRd', 'YlGn',
+  // 'Greens', 'Reds', 'Blues', 'RdYlGn',
+  'Spectral'
+];
+const flip = ['RdYlGn', 'Spectral'];
+
+const colorbrewerColors = [];
+for (const [keyName, colorScheme] of entries(colorbrewer)) {
+  for (const [lenKey, colors] of entries(colorScheme)) {
+    if (lenKey === '6' && cbNames.includes(keyName)) {
+      colorbrewerColors.push({
+        name: `${keyName}-${lenKey}`,
+        colors: flip.includes(keyName) ? colors.slice().reverse() : colors
+      });
+    }
+  }
+}
+
+function isSamePalette(colors1, colors2) {
+  return colors1.length === colors2.length && colors1.every((c, i) => c === colors2[i]);
+}
+
+export default class ColorPalettePicker extends PureComponent {
+
+  _renderPalette(name, colors, isCurrent) {
+    const width = `${80 / colors.length}%`;
+    const {onChange} = this.props;
+
+    return (
+      <div key={name} style={{display: 'inline'}}>
+        <div className="block" style={{width: '20%'}}>
+          <input
+            type="checkbox"
+            id="colorRange"
+            checked={isCurrent}
+            onChange={() => onChange(colors.map(getColorArray))}/>
+        </div>
+        {colors.map(color =>
+          <div className="block" key={color}
+               style={{background: color, width}}/>)}
+      </div>
+    );
+  }
+
+  render() {
+    const currentColors = this.props.value.map(getColorHex);
+
+    return (
+      <div className="color-palette-picker">
+        {colorbrewerColors
+          .map(({name, colors}) => this._renderPalette(
+            name, colors, isSamePalette(currentColors, colors)))}
+      </div>
+    );
+  }
+}
diff --git a/...s/layer-browser/src/utils/color-picker.js → ...er-browser/src/components/color-picker.js b/...s/layer-browser/src/utils/color-picker.js → ...er-browser/src/components/color-picker.js
diff --git a/examples/layer-browser/src/layer-controls.js → ...-browser/src/components/layer-controls.js b/examples/layer-browser/src/layer-controls.js → ...-browser/src/components/layer-controls.js
@@ -1,6 +1,6 @@
 import React, {PureComponent} from 'react';
-import ColorPicker from './utils/color-picker';
-import ColorPalettePicker from './utils/color-palette-picker';
+import ColorPicker from './color-picker';
+import ColorPalettePicker from './color-palette-picker';
 
 export default class LayerControls extends PureComponent {
 
@@ -96,7 +96,7 @@ export default class LayerControls extends PureComponent {
     // first test if proptype is already defined
     if (propType && propType.type) {
       switch (propType.type) {
-      case 'range':
+      case 'number':
         return this._renderSlider(settingName, value, propType);
       default:
         break;

diff --git a/examples/layer-browser/src/layer-info.js → ...ayer-browser/src/components/layer-info.js b/examples/layer-browser/src/layer-info.js → ...ayer-browser/src/components/layer-info.js
diff --git a/examples/layer-browser/src/layer-selector.js → ...-browser/src/components/layer-selector.js b/examples/layer-browser/src/layer-selector.js → ...-browser/src/components/layer-selector.js
diff --git a/examples/layer-browser/src/data-samples.js b/examples/layer-browser/src/data-samples.js
@@ -3,27 +3,38 @@ import allPoints from '../data/sf.bike.parking.json';
 import {pointGrid} from './utils';
 import {pointsToWorldGrid} from './utils/grid-aggregator';
 
-export {default as choropleths} from '../data/sf.zip.geo.json';
-export {default as geojson} from '../data/sample.geo.json';
-export {default as hexagons} from '../data/hexagons.json';
-export {default as routes} from '../data/sfmta.routes.json';
-export {default as trips} from '../data/trips.json';
-export {default as iconAtlas} from '../data/icon-atlas.json';
+import {default as choropleths} from '../data/sf.zip.geo.json';
+import {default as geojson} from '../data/sample.geo.json';
+import {default as hexagons} from '../data/hexagons.json';
+import {default as routes} from '../data/sfmta.routes.json';
+import {default as trips} from '../data/trips.json';
+import {default as iconAtlas} from '../data/icon-atlas.json';
+
+export {choropleths};
+export {geojson};
+export {hexagons};
+export {routes};
+export {trips};
+export {iconAtlas};
 
 export const points = allPoints;
 export const positionOrigin = [-122.45, 37.75, 0];
 
 export const worldGrid = pointsToWorldGrid(points, 0.5);
 
 export const zigzag = [
-  {path: (new Array(12)).fill(0).map(
-    (d, i) => [
+  {
+    path: new Array(12).fill(0).map((d, i) => [
       positionOrigin[0] + i * i * 0.001,
       positionOrigin[1] + Math.cos(i * Math.PI) * 0.2 / (i + 4)
     ])
   }
 ];
 
+// Extract simple/complex polygons arrays from geojson
+export const polygons = choropleths.features
+  .map(choropleth => choropleth.geometry.coordinates);
+
 // time consuming - only generate on demand
 
 let _pointCloud = null;