[Chore] Upgrade to deck 8.5.2 (#1917)

package.json

@@ -95,24 +95,25 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.4.16",
-    "@deck.gl/core": "^8.4.16",
-    "@deck.gl/extensions": "^8.4.16",
-    "@deck.gl/geo-layers": "^8.4.16",
-    "@deck.gl/layers": "^8.4.16",
-    "@deck.gl/mapbox": "^8.4.16",
-    "@deck.gl/mesh-layers": "^8.4.16",
-    "@deck.gl/react": "^8.4.16",
+    "@deck.gl/aggregation-layers": "8.5.2",
+    "@deck.gl/core": "^8.5.2",
+    "@deck.gl/extensions": "^8.5.2",
+    "@deck.gl/geo-layers": "^8.5.2",
+    "@deck.gl/layers": "^8.5.2",
+    "@deck.gl/mapbox": "^8.5.2",
+    "@deck.gl/mesh-layers": "^8.5.2",
+    "@deck.gl/react": "^8.5.2",
     "@hubble.gl/core": "1.2.0-alpha.6",
     "@hubble.gl/react": "1.2.0-alpha.6",
-    "@loaders.gl/core": "^2.3.12",
-    "@loaders.gl/csv": "^2.3.12",
-    "@loaders.gl/gltf": "^2.3.12",
-    "@loaders.gl/json": "^2.3.12",
-    "@loaders.gl/loader-utils": "^2.3.12",
-    "@loaders.gl/polyfills": "^2.3.12",
-    "@luma.gl/constants": "^8.4.3",
-    "@luma.gl/core": "^8.4.3",
+    "@loaders.gl/core": "^3.0.7",
+    "@loaders.gl/csv": "^3.0.7",
+    "@loaders.gl/gltf": "^3.0.7",
+    "@loaders.gl/json": "^3.0.7",
+    "@loaders.gl/loader-utils": "^3.0.7",
+    "@loaders.gl/polyfills": "^3.0.7",
+    "@loaders.gl/shapefile": "^3.0.7",
+    "@luma.gl/constants": "^8.5.4",
+    "@luma.gl/core": "^8.5.4",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/geojson-normalize": "0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
@@ -235,9 +236,11 @@
     "@babel/register": "^7.12.1",
     "@babel/runtime": "^7.12.1",
     "@babel/traverse": "^7.12.1",
-    "@deck.gl/test-utils": "^8.4.16",
-    "@luma.gl/test-utils": "^8.4.3",
+    "@deck.gl/test-utils": "^8.5.2",
+    "@luma.gl/test-utils": "^8.5.4",
+    "@probe.gl/env": "^3.0.1",
     "@probe.gl/test-utils": "^3.0.1",
+    "@loaders.gl/polyfills": "^3.0.7",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/d3-array": "^2.0.0",
     "@types/d3-scale": "^3.2.2",
@@ -303,20 +306,21 @@
     "webpack-stats-plugin": "^0.2.1"
   },
   "resolutions": {
-    "@loaders.gl/core": "^2.3.12",
-    "@loaders.gl/csv": "^2.3.12",
-    "@loaders.gl/gltf": "^2.3.12",
-    "@loaders.gl/json": "^2.3.12",
-    "@loaders.gl/loader-utils": "^2.3.12",
-    "@loaders.gl/polyfills": "^2.3.12",
-    "@deck.gl/core": "^8.4.16",
-    "@deck.gl/extensions": "^8.4.16",
-    "@deck.gl/geo-layers": "^8.4.16",
-    "@deck.gl/layers": "^8.4.16",
-    "@deck.gl/mapbox": "^8.4.16",
-    "@deck.gl/mesh-layers": "^8.4.16",
-    "@deck.gl/react": "^8.4.16",
-    "@deck.gl/test-utils": "^8.4.16",
+    "@loaders.gl/core": "^3.0.7",
+    "@loaders.gl/csv": "^3.0.7",
+    "@loaders.gl/gltf": "^3.0.7",
+    "@loaders.gl/json": "^3.0.7",
+    "@loaders.gl/loader-utils": "^3.0.7",
+    "@loaders.gl/polyfills": "^3.0.7",
+    "@deck.gl/core": "^8.5.2",
+    "@deck.gl/extensions": "^8.5.2",
+    "@deck.gl/geo-layers": "^8.5.2",
+    "@deck.gl/layers": "^8.5.2",
+    "@deck.gl/mapbox": "^8.5.2",
+    "@deck.gl/mesh-layers": "^8.5.2",
+    "@deck.gl/react": "^8.5.2",
+    "@deck.gl/test-utils": "^8.5.2",
+    "@luma.gl/test-utils": "^8.5.4",
     "d3-array": "^2.8.0",
     "d3-scale": "^3.2.3",
     "dot-prop": "6.0.0",

src/constants/src/default-settings.ts

@@ -938,3 +938,10 @@ export const MAP_CONTROLS = keyMirror({
   mapDraw: null,
   mapLocale: null
 });
+
+/**
+ * A multiplier for screen-space width/scale for Arc, Line, Icon and Text layers.
+ * Required in order to maintain the same appearance after upgrading to deck.gl v8.5.
+ * https://github.com/visgl/deck.gl/blob/master/docs/upgrade-guide.md
+ */
+export const PROJECTED_PIXEL_SIZE_MULTIPLIER = 2 / 3;

src/constants/tsconfig.production.json

@@ -6,12 +6,12 @@
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
-    "declaration":true,
-    "emitDeclarationOnly":true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "noImplicitAny": false,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "outDir": "dist",
     "sourceMap": true,
     "strictNullChecks": true,
@@ -27,12 +27,6 @@
       "*": ["*"]
     }
   },
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "*/actions/**/*",
-    "*/utils/**/*",
-    "../components/**/*"
-  ]
+  "include": ["src"],
+  "exclude": ["*/actions/**/*", "*/utils/**/*", "../components/**/*"]
 }

src/deckgl-layers/package.json

@@ -31,15 +31,15 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.4.16",
-    "@deck.gl/core": "^8.4.16",
-    "@deck.gl/extensions": "^8.4.16",
-    "@deck.gl/geo-layers": "^8.4.16",
-    "@deck.gl/layers": "^8.4.16",
-    "@deck.gl/mesh-layers": "^8.4.16",
-    "@deck.gl/react": "^8.4.16",
-    "@luma.gl/constants": "^8.4.3",
-    "@luma.gl/core": "^8.4.3",
+    "@deck.gl/aggregation-layers": "8.5.2",
+    "@deck.gl/core": "^8.5.2",
+    "@deck.gl/extensions": "^8.5.2",
+    "@deck.gl/geo-layers": "^8.5.2",
+    "@deck.gl/layers": "^8.5.2",
+    "@deck.gl/mesh-layers": "^8.5.2",
+    "@deck.gl/react": "^8.5.2",
+    "@luma.gl/constants": "^8.5.4",
+    "@luma.gl/core": "^8.5.4",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@types/geojson": "^7946.0.7",

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

@@ -72,6 +72,10 @@ export default class SvgIconLayer extends CompositeLayer<any, SvgIconLayerProps>
     });
   }
 
+  _updateAutoHighlight(info) {
+    info?.sourceLayer?.updateAutoHighlight(info);
+  }
+
   renderLayers() {
     const layerId = this.props.id;
 

src/deckgl-layers/tsconfig.production.json

@@ -6,12 +6,12 @@
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
-    "declaration":true,
-    "emitDeclarationOnly":true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "noImplicitAny": false,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "outDir": "dist",
     "sourceMap": true,
     "strictNullChecks": true,
@@ -27,7 +27,5 @@
       "@kepler.gl/deckgl-layers": ["deckgl-layers/src"] //TODO change once all dependencies are isolated
     }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

src/layers/package.json

@@ -30,17 +30,17 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/core": "^8.4.16",
-    "@deck.gl/extensions": "^8.4.16",
-    "@deck.gl/geo-layers": "^8.4.16",
-    "@deck.gl/layers": "^8.4.16",
-    "@deck.gl/mesh-layers": "^8.4.16",
+    "@deck.gl/core": "^8.5.2",
+    "@deck.gl/extensions": "^8.5.2",
+    "@deck.gl/geo-layers": "^8.5.2",
+    "@deck.gl/layers": "^8.5.2",
+    "@deck.gl/mesh-layers": "^8.5.2",
     "@kepler.gl/deckgl-layers": "^2.5.5",
     "@kepler.gl/layers": "^2.5.5",
     "@kepler.gl/constants": "^2.5.5",
     "@kepler.gl/types": "^2.5.5",
-    "@loaders.gl/core": "^2.3.12",
-    "@loaders.gl/gltf": "^2.3.12",
+    "@loaders.gl/core": "^3.0.7",
+    "@loaders.gl/gltf": "^3.0.7",
     "@mapbox/geojson-normalize": "0.0.1",
     "@turf/bbox": "^6.0.1",
     "@types/geojson": "^7946.0.7",

src/layers/src/arc-layer/arc-layer.ts

@@ -30,7 +30,11 @@ import {ArcLayer as DeckArcLayer} from '@deck.gl/layers';
 
 import {hexToRgb} from 'utils/color-utils';
 import ArcLayerIcon from './arc-layer-icon';
-import {DEFAULT_LAYER_COLOR, ColorRange} from '@kepler.gl/constants';
+import {
+  DEFAULT_LAYER_COLOR,
+  ColorRange,
+  PROJECTED_PIXEL_SIZE_MULTIPLIER
+} from '@kepler.gl/constants';
 import {DataContainerInterface} from 'utils/table-utils/data-container-interface';
 
 import {
@@ -265,14 +269,15 @@ export default class ArcLayer extends Layer {
       getFilterValue: gpuFilter.filterValueUpdateTriggers,
       ...this.getVisualChannelUpdateTriggers()
     };
+    const widthScale = this.config.visConfig.thickness * PROJECTED_PIXEL_SIZE_MULTIPLIER;
     const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
     const hoveredObject = this.hasHoveredObject(objectHovered);
     return [
       new DeckArcLayer({
         ...defaultLayerProps,
         ...this.getBrushingExtensionProps(interactionConfig, 'source_target'),
         ...data,
-        widthScale: this.config.visConfig.thickness,
+        widthScale,
         updateTriggers,
         extensions: [...defaultLayerProps.extensions, new BrushingExtension()]
       }),
@@ -282,7 +287,7 @@ export default class ArcLayer extends Layer {
             new DeckArcLayer({
               ...this.getDefaultHoverLayerProps(),
               data: [hoveredObject],
-              widthScale: this.config.visConfig.thickness,
+              widthScale,
               getSourceColor: this.config.highlightColor,
               getTargetColor: this.config.highlightColor,
               getWidth: data.getWidth

src/layers/src/base-layer.ts

@@ -44,7 +44,8 @@ import {
   DEFAULT_COLOR_UI,
   UNKNOWN_COLOR_KEY,
   DEFAULT_HIGHLIGHT_COLOR,
-  DEFAULT_LAYER_LABEL
+  DEFAULT_LAYER_LABEL,
+  PROJECTED_PIXEL_SIZE_MULTIPLIER
 } from '@kepler.gl/constants';
 
 import {generateHashId, isPlainObject} from 'utils/utils';
@@ -1320,7 +1321,7 @@ class Layer {
             getPosition,
             characterSet: d.characterSet,
             getPixelOffset: getPixelOffset(textLabel[i]),
-            getSize: 1,
+            getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
             sizeScale: textLabel[i].size,
             getTextAnchor: textLabel[i].anchor,
             getAlignmentBaseline: textLabel[i].alignment,

src/layers/src/geojson-layer/geojson-layer.ts

@@ -269,7 +269,7 @@ export default class GeoJsonLayer extends Layer {
         range: 'radiusRange',
         key: 'radius',
         channelScaleType: CHANNEL_SCALES.radius,
-        accessor: 'getRadius',
+        accessor: 'getPointRadius',
         nullValue: 0,
         getAttributeValue: () => d => d.properties.radius || defaultRadius
       }
@@ -438,7 +438,8 @@ export default class GeoJsonLayer extends Layer {
         wireframe: visConfig.wireframe,
         wrapLongitude: false,
         lineMiterLimit: 2,
-        rounded: true,
+        capRounded: true,
+        jointRounded: true,
         updateTriggers,
         _subLayerProps: {
           ...(featureTypes?.polygon ? {'polygons-stroke': opaOverwrite} : {}),
@@ -460,7 +461,7 @@ export default class GeoJsonLayer extends Layer {
               wrapLongitude: false,
               data: [hoveredObject],
               getLineWidth: data.getLineWidth,
-              getRadius: data.getRadius,
+              getPointRadius: data.getPointRadius,
               getElevation: data.getElevation,
               getLineColor: this.config.highlightColor,
               getFillColor: this.config.highlightColor,

src/layers/src/line-layer/line-layer.ts

@@ -24,7 +24,7 @@ import {EnhancedLineLayer} from '@kepler.gl/deckgl-layers';
 import LineLayerIcon from './line-layer-icon';
 import ArcLayer, {ArcLayerConfig} from '../arc-layer/arc-layer';
 import {LayerColumn} from '../base-layer';
-import {LAYER_VIS_CONFIGS, ColorRange} from '@kepler.gl/constants';
+import {LAYER_VIS_CONFIGS, ColorRange, PROJECTED_PIXEL_SIZE_MULTIPLIER} from '@kepler.gl/constants';
 import {
   Merge,
   RGBColor,
@@ -182,7 +182,7 @@ export default class LineLayer extends ArcLayer {
     const {data, gpuFilter, objectHovered, interactionConfig} = opts;
 
     const layerProps = {
-      widthScale: this.config.visConfig.thickness,
+      widthScale: this.config.visConfig.thickness * PROJECTED_PIXEL_SIZE_MULTIPLIER,
       elevationScale: this.config.visConfig.elevationScale
     };
 

src/layers/src/trip-layer/trip-layer.ts

@@ -341,7 +341,8 @@ export default class TripLayer extends Layer {
         ...data,
         getTimestamps: d => (data.getTimestamps(d) || []).map(ts => ts - domain0),
         widthScale: this.config.visConfig.thickness * zoomFactor * zoomFactorValue,
-        rounded: true,
+        capRounded: true,
+        jointRounded: true,
         wrapLongitude: false,
         parameters: {
           depthTest: mapState.dragRotate,

src/layers/tsconfig.production.json

@@ -6,12 +6,12 @@
     "jsx": "react",
     "module": "esnext",
     "moduleResolution": "node",
-    "declaration":true,
-    "emitDeclarationOnly":true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
     "noImplicitAny": false,
     "noImplicitReturns": true,
     "noImplicitThis": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "outDir": "dist",
     "sourceMap": true,
     "strictNullChecks": true,
@@ -27,7 +27,5 @@
       "@kepler.gl/layers": ["layers/src"] //TODO change once all dependencies are isolated
     }
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

src/localization/package.json

@@ -31,15 +31,15 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.4.16",
-    "@deck.gl/core": "^8.4.16",
-    "@deck.gl/extensions": "^8.4.16",
-    "@deck.gl/geo-layers": "^8.4.16",
-    "@deck.gl/layers": "^8.4.16",
-    "@deck.gl/mesh-layers": "^8.4.16",
-    "@deck.gl/react": "^8.4.16",
-    "@luma.gl/constants": "^8.4.3",
-    "@luma.gl/core": "^8.4.3",
+    "@deck.gl/aggregation-layers": "8.5.2",
+    "@deck.gl/core": "^8.5.2",
+    "@deck.gl/extensions": "^8.5.2",
+    "@deck.gl/geo-layers": "^8.5.2",
+    "@deck.gl/layers": "^8.5.2",
+    "@deck.gl/mesh-layers": "^8.5.2",
+    "@deck.gl/react": "^8.5.2",
+    "@luma.gl/constants": "^8.5.4",
+    "@luma.gl/core": "^8.5.4",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@types/geojson": "^7946.0.7",