[Feat] upgrade to deck.gl@8

package.json

@@ -41,7 +41,7 @@
     "start:custom-theme": "npm run install-and-start -- examples/custom-theme start-local",
     "start:node-app": "npm run install-and-start -- examples/node-app start-local",
     "start:web": "npm run install-and-start -- website start",
-    "build": "rm -fr dist && uber-licence && babel src --out-dir dist --source-maps inline",
+    "build": "rm -fr dist && babel src --out-dir dist --source-maps inline",
     "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
     "analyze": "npm run analyze:bundle",
     "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
@@ -71,6 +71,16 @@
     "umd"
   ],
   "dependencies": {
+    "@deck.gl/extensions": "8.1.0-alpha.2",
+    "@deck.gl/core": "8.1.0-alpha.2",
+    "@deck.gl/layers": "8.1.0-alpha.2",
+    "@deck.gl/aggregation-layers": "8.1.0-alpha.2",
+    "@deck.gl/mesh-layers": "8.1.0-alpha.2",
+    "@deck.gl/react": "8.1.0-alpha.2",
+    "@deck.gl/geo-layers": "8.1.0-alpha.2",
+    "@luma.gl/constants": "^8.0.0-beta.4",
+    "@luma.gl/core": "^8.0.0-beta.4",
+    "@loaders.gl/gltf": "^2.0.0",
     "@mapbox/geo-viewport": "^0.2.2",
     "@mapbox/geojson-normalize": "0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
@@ -88,7 +98,6 @@
     "d3-hexbin": "^0.2.2",
     "d3-request": "^1.0.6",
     "d3-scale": "^1.0.6",
-    "deck.gl": "^7.3.14",
     "fuzzy": "^0.1.3",
     "global": "^4.3.0",
     "h3-js": "^3.1.0",
@@ -105,7 +114,6 @@
     "lodash.uniq": "^4.0.1",
     "lodash.uniqby": "^4.7.0",
     "lodash.xor": "^4.5.0",
-    "luma.gl": "^7.3.2",
     "mini-svg-data-uri": "^1.0.3",
     "moment": "^2.10.6",
     "pbf": "^3.1.0",
@@ -164,7 +172,8 @@
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.0.0",
     "@babel/traverse": "^7.2.3",
-    "@deck.gl/test-utils": "^7.3.14",
+    "@deck.gl/test-utils": "^8.0.11",
+    "@luma.gl/test-utils": "^8.0.0-beta.4",
     "@probe.gl/test-utils": "^3.0.1",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.0",

src/actions/provider-actions.js

@@ -17,6 +17,7 @@
 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
+
 import {createAction} from 'redux-actions';
 import keyMirror from 'keymirror';
 import {addPrefix} from 'constants/action-types';

src/components/map-container.js

@@ -22,7 +22,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import MapboxGLMap from 'react-map-gl';
-import DeckGL from 'deck.gl';
+import DeckGL from '@deck.gl/react';
 import {createSelector} from 'reselect';
 import WebMercatorViewport from 'viewport-mercator-project';
 

src/components/side-panel/layer-panel/layer-configurator.js

@@ -39,7 +39,9 @@ import ColorSelector from './color-selector';
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
 import VisConfigSwitch from './vis-config-switch';
 import VisConfigSlider from './vis-config-slider';
-import LayerConfigGroup, {ConfigGroupCollapsibleContent} from './layer-config-group';
+import LayerConfigGroup, {
+  ConfigGroupCollapsibleContent
+} from './layer-config-group';
 import TextLabelPanel from './text-label-panel';
 
 import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
@@ -65,9 +67,7 @@ const StyledLayerVisualConfigurator = styled.div.attrs({
 `;
 
 export const getLayerFields = (datasets, layer) =>
-  datasets[layer.config.dataId] ?
-  datasets[layer.config.dataId].fields
-  : [];
+  datasets[layer.config.dataId] ? datasets[layer.config.dataId].fields : [];
 
 export const getLayerConfiguratorProps = props => ({
   layer: props.layer,
@@ -87,7 +87,7 @@ export const getLayerChannelConfigProps = props => ({
   layer: props.layer,
   fields: getLayerFields(props.datasets, props.layer),
   onChange: props.updateLayerVisualChannelConfig
-})
+});
 
 LayerConfiguratorFactory.deps = [SourceDataSelectorFactory];
 export default function LayerConfiguratorFactory(SourceDataSelector) {
@@ -242,7 +242,9 @@ export default function LayerConfiguratorFactory(SourceDataSelector) {
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
-              {layer.visConfigSettings.colorAggregation.condition(layer.config) ? (
+              {layer.visConfigSettings.colorAggregation.condition(
+                layer.config
+              ) ? (
                 <AggregationTypeSelector
                   {...layer.visConfigSettings.colorAggregation}
                   {...layerChannelConfigProps}
@@ -328,7 +330,8 @@ export default function LayerConfiguratorFactory(SourceDataSelector) {
       const {
         visConfig: {enable3d}
       } = config;
-      const elevationByDescription = 'When off, height is based on count of points';
+      const elevationByDescription =
+        'When off, height is based on count of points';
       const colorByDescription = 'When off, color is based on count of points';
 
       return (
@@ -345,7 +348,9 @@ export default function LayerConfiguratorFactory(SourceDataSelector) {
                 channel={layer.visualChannels.color}
                 {...layerChannelConfigProps}
               />
-              {layer.visConfigSettings.colorAggregation.condition(layer.config) ? (
+              {layer.visConfigSettings.colorAggregation.condition(
+                layer.config
+              ) ? (
                 <AggregationTypeSelector
                   {...layer.visConfigSettings.colorAggregation}
                   {...layerChannelConfigProps}
@@ -407,7 +412,9 @@ export default function LayerConfiguratorFactory(SourceDataSelector) {
                   description={elevationByDescription}
                   disabled={!enable3d}
                 />
-                {layer.visConfigSettings.sizeAggregation.condition(layer.config) ? (
+                {layer.visConfigSettings.sizeAggregation.condition(
+                  layer.config
+                ) ? (
                   <AggregationTypeSelector
                     {...layer.visConfigSettings.sizeAggregation}
                     {...layerChannelConfigProps}
@@ -486,15 +493,20 @@ export default function LayerConfiguratorFactory(SourceDataSelector) {
             {...visConfiguratorProps}
             collapsible
           >
-            <VisConfigSlider
-              {...LAYER_VIS_CONFIGS.elevationRange}
-              {...visConfiguratorProps}
-              label={false}
+            <ChannelByValueSelector
+              channel={layer.visualChannels.size}
+              {...layerChannelConfigProps}
             />
             <ConfigGroupCollapsibleContent>
-              <ChannelByValueSelector
-                channel={layer.visualChannels.size}
-                {...layerChannelConfigProps}
+              <VisConfigSlider
+                {...LAYER_VIS_CONFIGS.elevationScale}
+                {...visConfiguratorProps}
+                labl="Zoom scale"
+              />
+              <VisConfigSlider
+                {...LAYER_VIS_CONFIGS.elevationRange}
+                {...visConfiguratorProps}
+                label="Height Range"
               />
             </ConfigGroupCollapsibleContent>
           </LayerConfigGroup>
@@ -973,7 +985,8 @@ export const ArcLayerColorSelector = ({
           label: 'Source'
         },
         {
-          selectedColor: layer.config.visConfig.targetColor || layer.config.color,
+          selectedColor:
+            layer.config.visConfig.targetColor || layer.config.color,
           setColor: rgbValue => onChangeVisConfig({targetColor: rgbValue}),
           label: 'Target'
         }

src/components/side-panel/layer-panel/text-label-panel.js

@@ -62,7 +62,7 @@ export default class TextLabelPanel extends Component {
         </ConfigGroupCollapsibleHeader>
         <ConfigGroupCollapsibleContent>
           {textLabel.map((tl, idx) => (
-            <div key={tl.field ? tl.field.name : 'null'}>
+            <div key={tl.field ? tl.field.name : `null-${idx}`}>
               <PanelLabel>{`Label ${idx + 1}`}</PanelLabel>
               <SidePanelSection>
                 <FieldSelector

src/deckgl-layers/cluster-layer/cluster-layer.js

@@ -18,7 +18,9 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer, ScatterplotLayer} from 'deck.gl';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {_AggregationLayer as AggregationLayer} from '@deck.gl/aggregation-layers';
+
 import geoViewport from '@mapbox/geo-viewport';
 import CPUAggregator, {defaultColorDimension, getDimensionScale} from '../layer-utils/cpu-aggregator';
 import {getDistanceScales} from 'viewport-mercator-project';
@@ -36,15 +38,15 @@ const defaultRadiusRange = LAYER_VIS_CONFIGS.clusterRadiusRange.defaultValue;
 const defaultGetColorValue = points => points.length;
 const defaultGetRadiusValue = cell => cell.filteredPoints ? cell.filteredPoints.length : cell.points.length;
 
-function processGeoJSON(step, props, aggregation, viewport) {
+function processGeoJSON(step, props, aggregation, {viewport}) {
   const {data, getPosition, filterData} = props;
   const geoJSON = getGeoJSON(data, getPosition, filterData);
   const clusterBuilder = new ClusterBuilder();
 
   this.setState({geoJSON, clusterBuilder});
 }
 
-function getClusters(step, props, aggregation, viewport) {
+function getClusters(step, props, aggregation, {viewport}) {
 
   const {geoJSON, clusterBuilder} = this.state;
   const {clusterRadius, zoom, width, height} = props;
@@ -161,7 +163,7 @@ const defaultProps = {
   getRadiusValue: {type: 'accessor', value: defaultGetRadiusValue}
 };
 
-export default class ClusterLayer extends CompositeLayer {
+export default class ClusterLayer extends AggregationLayer {
   initializeState() {
     const cpuAggregator = new CPUAggregator({
       aggregation: clusterAggregation,
@@ -172,14 +174,22 @@ export default class ClusterLayer extends CompositeLayer {
       cpuAggregator,
       aggregatorState: cpuAggregator.state
     };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
   }
 
   updateState({oldProps, props, changeFlags}) {
     this.setState({
       // make a copy of the internal state of cpuAggregator for testing
       aggregatorState: this.state.cpuAggregator.updateState(
         {oldProps, props, changeFlags},
-        this.context.viewport
+        {
+          viewport: this.context.viewport,
+          attributes: this.getAttributes(),
+          numInstances: this.getNumInstances(props)
+        }
       )
     });
   }

src/deckgl-layers/grid-layer/enhanced-cpu-grid-layer.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CPUGridLayer} from 'deck.gl';
+import {CPUGridLayer} from '@deck.gl/aggregation-layers';
 import CPUAggregator, {getAggregatedData} from '../layer-utils/cpu-aggregator';
 
 export const gridAggregation = {
@@ -53,6 +53,10 @@ export default class ScaleEnhancedGridLayer extends CPUGridLayer {
       cpuAggregator,
       aggregatorState: cpuAggregator.state
     };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
   }
 }
 

src/deckgl-layers/hexagon-layer/enhanced-hexagon-layer.js

@@ -53,6 +53,10 @@ export default class ScaleEnhancedHexagonLayer extends HexagonLayer {
       cpuAggregator,
       aggregatorState: cpuAggregator.state
     };
+    const attributeManager = this.getAttributeManager();
+    attributeManager.add({
+      positions: {size: 3, accessor: 'getPosition'}
+    });
   }
 }
 

src/deckgl-layers/layer-utils/cpu-aggregator.js

@@ -19,14 +19,12 @@
 // THE SOFTWARE.
 
 /* eslint-disable guard-for-in */
-import {experimental, AGGREGATION_OPERATION} from '@deck.gl/aggregation-layers';
+import {_BinSorter as BinSorter, AGGREGATION_OPERATION} from '@deck.gl/aggregation-layers';
 import {console as Console} from 'global/window';
 
 import {aggregate} from 'utils/aggregate-utils';
 import {AGGREGATION_TYPES, SCALE_FUNC} from 'constants/default-settings';
 
-const {BinSorter} = experimental;
-
 export const DECK_AGGREGATION_MAP = {
   [AGGREGATION_OPERATION.SUM]: AGGREGATION_TYPES.sum,
   [AGGREGATION_OPERATION.MEAN]: AGGREGATION_TYPES.average,
@@ -140,15 +138,15 @@ function normalizeResult(result = {}) {
   return result;
 }
 
-export function getAggregatedData(step, props, aggregation, viewport) {
+export function getAggregatedData(step, props, aggregation, aggregationParams) {
   const {
     triggers: {aggregator: aggr}
   } = step;
   const aggregator = props[aggr.prop];
 
   // result should contain a data array and other props
   // result = {data: [], ...other props}
-  const result = aggregator(props, viewport);
+  const result = aggregator(props, aggregationParams);
   this.setState({
     layerData: normalizeResult(result)
   });
@@ -381,22 +379,23 @@ export default class CPUAggregator {
     dimensionChanges.forEach(f => typeof f === 'function' && f());
   }
 
-  updateAggregation(props, viewport) {
+  updateAggregation(props, aggregationParams) {
+
     const updaters = this._accumulateUpdaters(
       0,
       props,
       this.aggregationUpdater
     );
-    updaters.forEach(f => typeof f === 'function' && f(viewport));
+    updaters.forEach(f => typeof f === 'function' && f(aggregationParams));
   }
 
-  updateState({oldProps, props, changeFlags}, viewport) {
-    // const reprojectNeeded = this.needsReProjectPoints(oldProps, props, changeFlags);
+  updateState(opts, aggregationParams) {
+    const {oldProps, props, changeFlags} = opts;
     let dimensionChanges = [];
 
     if (changeFlags.dataChanged) {
       // if data changed update everything
-      this.updateAggregation(props, viewport);
+      this.updateAggregation(props, aggregationParams);
       this.updateAllDimensions(props);
 
       return this.state;
@@ -410,7 +409,7 @@ export default class CPUAggregator {
 
     if (aggregationChanges && aggregationChanges.length) {
       // get aggregatedData
-      aggregationChanges.forEach(f => typeof f === 'function' && f(viewport));
+      aggregationChanges.forEach(f => typeof f === 'function' && f(aggregationParams));
       this.updateAllDimensions(props);
     } else {
       // only update dimensions

src/deckgl-layers/line-layer/line-layer.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {LineLayer} from 'deck.gl';
+import {LineLayer} from '@deck.gl/layers';
 import GL from '@luma.gl/constants';
 import {editShader} from 'deckgl-layers/layer-utils/shader-utils';
 

src/deckgl-layers/svg-icon-layer/scatterplot-icon-layer.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {ScatterplotLayer} from '@deck.gl/layers';
-import {Geometry, Model} from 'luma.gl';
+import {Geometry, Model} from '@luma.gl/core';
 import GL from '@luma.gl/constants';
 
 const DEFAULT_POS = [-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0];

src/deckgl-layers/svg-icon-layer/svg-icon-layer.js

@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {CompositeLayer} from 'deck.gl';
+import {CompositeLayer} from '@deck.gl/core';
 import ScatterplotIconLayer from './scatterplot-icon-layer';
 
 // default icon geometry is a square