[Feat] Upgrade deck.gl@8.4.11 luma.gl@8.4.3 loaders.gl@2.3.12 (#1674)

* fix grid and hexagon layer, added tests * added `test-headless` and moved map-container tests there * Fix Pinning a tooltip moves it to the top left of the screen * fix grid and hexagon layer, added tests * added `test-headless` and moved map-container tests there * ts fixes for MapboxGLMap * fix for browser tests build * Luma.gl verson for deck-gl layers updated Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Daria Terekhova <daria.terekhova@actionengine.com>
keplergl · Jul 20, 2022 · c1e2034 · c1e2034
1 parent b668fd2
commit c1e2034
Show file tree

Hide file tree

Showing 26 changed files with 2,538 additions and 2,758 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -35,9 +35,6 @@ jobs:
       - name: Install Dependecies
         run: yarn
 
-      - name: Lint
-        run: yarn lint
-
       - name: Test
         run: xvfb-run --auto-servernum yarn cover
 

diff --git a/contributing/DEVELOPERS.md b/contributing/DEVELOPERS.md
@@ -83,25 +83,44 @@ npm run start:deck-src
 
 ## Running Tests
 
-We write unit and browser tests with [Tape][tape] and [Enzyme][enzyme], and lint with [ESLint][eslint]. Make sure to run test before submitting your PR. To run all of the tests once with node:
+- We write node and browser tests with [Tape][tape], [Enzyme][enzyme], [jsDom](https://www.npmjs.com/package/jsdom) and [@probe.gl/test-util](https://uber-web.github.io/probe.gl/docs/api-reference/test-utils/browser-driver), and lint with [ESLint][eslint]. Make sure to run test before submitting your PR. To run all of the tests once
 
 ```bash
 yarn test
 ```
 
-To run separately
+- Yarn test runs lint and 3 tests in different env. To run them separately
 ```bash
 # lint
 yarn lint
 
 # node tests
 yarn test-node
 
-# browser tests
+# jsdom tests
 yarn test-browser
 
-# fast test (no linting)
-yarn fast-test
+# headless browser tests, uses probe.gl to run browser tests with puppeteer
+yarn test-headless
+```
+
+- Here are some handy scripts / tricks for debugging tests
+
+1. add `.only` to errored tests to only run 1 test at a time
+```js
+test.only('MapContainerFactory', t => {
+  // tests 
+}
+```
+
+2. run all tests in chromium browser. This runs node, browser and headless browser tests in chromium browser and logs the output, you can step through the code with chrome developer tools
+```bash
+yarn test-browser-drive
+```
+
+3. Fast tests, runs node and browser tests without tap-spec output
+```bash
+yarn test-fast
 ```
 
 To generate a coverage report

diff --git a/package.json b/package.json
@@ -29,30 +29,33 @@
     "install:web": "yarn install:example && cd website && yarn",
     "install-and-start": "node ./scripts/install-and-start",
     "babel-tape-runner": "node ./scripts/babel-tape-runner",
-    "fast-test": "npm run test-node && npm run test-browser ",
-    "test-browser": "NODE_ENV=test npm run babel-tape-runner -r ./test/setup-browser-env.js ./test/browser/index.js | tap-spec",
-    "test-node": "NODE_ENV=test npm run babel-tape-runner ./test/node.js | tap-spec",
-    "test-browser-drive": "NODE_ENV=test node ./test/browser-drive.js",
+    "test-fast": "yarn test-node-debug && yarn test-browser-debug",
+    "test-node": "yarn test-node-debug | tap-spec",
+    "test-browser": "yarn test-browser-debug | tap-spec",
+    "test-headless": "NODE_ENV=test node ./test/browser-drive.js",
+    "test-browser-drive": "NODE_ENV=test node ./test/browser-drive.js debug",
+    "test-node-debug": "NODE_ENV=test yarn babel-tape-runner ./test/node.js",
+    "test-browser-debug": "NODE_ENV=test yarn babel-tape-runner -r ./test/setup-browser-env.js ./test/js-dom.js",
     "test-e2e": "NODE_ENV=test HEADLESS=true SLOWMO=true jest",
-    "test": "npm run lint && npm run test-node && npm run test-browser",
+    "test": "yarn lint && yarn test-node && yarn test-browser",
     "cover": "nyc --reporter=lcov --reporter html npm test",
-    "start": "npm run install-and-start -- examples/demo-app start-local",
-    "start:deck": "npm run install-and-start -- examples/demo-app start-local-deck",
-    "start:deck-src": "npm run install-and-start -- examples/demo-app start-local-deck-src",
-    "start:loaders-src": "npm run install-and-start -- examples/demo-app start-local-loaders-src",
-    "start:open-modal": "npm run install-and-start -- examples/open-modal start-local",
-    "start:custom-reducer": "npm run install-and-start -- examples/custom-reducer start-local",
-    "start:replace-component": "npm run install-and-start -- examples/replace-component start-local",
-    "start:custom-theme": "npm run install-and-start -- examples/custom-theme start-local",
-    "start:custom-map-style": "npm run install-and-start -- examples/custom-map-style start-local",
-    "start:node-app": "npm run install-and-start -- examples/node-app start-local",
-    "start:web": "npm run install-and-start -- website start",
-    "start:https": "npm run install-and-start -- examples/demo-app start-local-https",
-    "start:e2e": "npm run install-and-start -- examples/demo-app start-local-e2e",
+    "start": "yarn install-and-start -- examples/demo-app start-local",
+    "start:deck": "yarn install-and-start -- examples/demo-app start-local-deck",
+    "start:deck-src": "yarn install-and-start -- examples/demo-app start-local-deck-src",
+    "start:loaders-src": "yarn install-and-start -- examples/demo-app start-local-loaders-src",
+    "start:open-modal": "yarn install-and-start -- examples/open-modal start-local",
+    "start:custom-reducer": "yarn install-and-start -- examples/custom-reducer start-local",
+    "start:replace-component": "yarn install-and-start -- examples/replace-component start-local",
+    "start:custom-theme": "yarn install-and-start -- examples/custom-theme start-local",
+    "start:custom-map-style": "yarn install-and-start -- examples/custom-map-style start-local",
+    "start:node-app": "yarn install-and-start -- examples/node-app start-local",
+    "start:web": "yarn install-and-start -- website start",
+    "start:https": "yarn install-and-start -- examples/demo-app start-local-https",
+    "start:e2e": "yarn install-and-start -- examples/demo-app start-local-e2e",
     "build": "rm -fr dist && babel src/{actions,components,layers,middleware,reducers,styles,templates,utils,cloud-providers,connect,localization,processors,schemas,tasks} --out-dir dist --source-maps inline --extensions '.ts,.tsx,.js,.jsx' --ignore '**/*.d.ts'",
     "build:umd": "webpack --config ./webpack/umd.js --progress --env.prod",
     "build:types": "tsc --project tsconfig.production.json",
-    "analyze": "npm run analyze:bundle",
+    "analyze": "yarn analyze:bundle",
     "analyze:bundle": "webpack --config ./webpack/bundle.js --progress --env.prod",
     "check-licence": "uber-licence --dry",
     "add-licence": "uber-licence",
@@ -87,21 +90,21 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.2.0",
-    "@deck.gl/core": "8.2.0",
-    "@deck.gl/extensions": "8.2.0",
-    "@deck.gl/geo-layers": "8.2.0",
-    "@deck.gl/layers": "8.2.0",
-    "@deck.gl/mesh-layers": "8.2.0",
-    "@deck.gl/react": "8.2.0",
-    "@loaders.gl/core": "^2.3.3",
-    "@loaders.gl/csv": "^2.3.3",
-    "@loaders.gl/gltf": "^2.3.3",
-    "@loaders.gl/json": "^2.3.3",
-    "@loaders.gl/loader-utils": "^2.3.3",
-    "@loaders.gl/polyfills": "^2.3.3",
-    "@luma.gl/constants": "^8.2.0",
-    "@luma.gl/core": "^8.2.0",
+    "@deck.gl/aggregation-layers": "8.4.11",
+    "@deck.gl/core": "^8.4.11",
+    "@deck.gl/extensions": "^8.4.11",
+    "@deck.gl/geo-layers": "^8.4.11",
+    "@deck.gl/layers": "^8.4.11",
+    "@deck.gl/mesh-layers": "^8.4.11",
+    "@deck.gl/react": "^8.4.11",
+    "@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",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/geojson-normalize": "0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
@@ -191,7 +194,7 @@
     "react-palm": "^3.3.7",
     "react-redux": "^7.1.3",
     "react-sortable-hoc": "^1.8.3",
-    "react-tooltip": "^4.2.10",
+    "react-tooltip": "^4.2.17",
     "react-virtualized": "^9.21.1",
     "react-vis": "^1.8.0",
     "redux": "^4.0.5",
@@ -224,8 +227,8 @@
     "@babel/register": "^7.12.1",
     "@babel/runtime": "^7.12.1",
     "@babel/traverse": "^7.12.1",
-    "@deck.gl/test-utils": "8.2.0",
-    "@luma.gl/test-utils": "^8.2.0",
+    "@deck.gl/test-utils": "^8.4.11",
+    "@luma.gl/test-utils": "^8.4.3",
     "@probe.gl/test-utils": "^3.0.1",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/d3-array": "^2.0.0",
@@ -292,20 +295,29 @@
     "webpack-stats-plugin": "^0.2.1"
   },
   "resolutions": {
-    "@loaders.gl/core": "^2.3.3",
-    "@loaders.gl/csv": "^2.3.3",
-    "@loaders.gl/gltf": "^2.3.3",
-    "@loaders.gl/json": "^2.3.3",
-    "@loaders.gl/loader-utils": "^2.3.3",
-    "@loaders.gl/polyfills": "^2.3.3",
+    "@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.11",
+    "@deck.gl/extensions": "^8.4.11",
+    "@deck.gl/geo-layers": "^8.4.11",
+    "@deck.gl/layers": "^8.4.11",
+    "@deck.gl/mapbox": "^8.4.11",
+    "@deck.gl/mesh-layers": "^8.4.11",
+    "@deck.gl/react": "^8.4.11",
+    "@deck.gl/test-utils": "^8.4.11",
     "d3-scale": "^3.2.3",
     "dot-prop": "6.0.0",
     "kind-of": "6.0.3",
     "jpeg-js": "0.4.2",
     "lodash": "4.17.19",
     "minimist": "1.2.3",
     "node-fetch": "2.6.1",
-    "tough-cookie": "4.0.0"
+    "tough-cookie": "4.0.0",
+    "caniuse-lite": "^1.0.30001361"
   },
   "peerDependencies": {
     "react": ">=16.3",

diff --git a/src/components/map-container.tsx b/src/components/map-container.tsx
@@ -20,7 +20,7 @@
 
 // libraries
 import React, {Component, createRef} from 'react';
-import MapboxGLMap from 'react-map-gl';
+import MapboxGLMap, {MapRef} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {createSelector} from 'reselect';
 import WebMercatorViewport from 'viewport-mercator-project';
@@ -152,7 +152,7 @@ interface MapContainerProps {
   onMapToggleLayer?: Function;
   onMapStyleLoaded?: Function;
   onMapRender?: Function;
-  getMapboxRef?: (mapbox?: MapboxGLMap | null, index?: number) => void;
+  getMapboxRef?: (mapbox?: MapRef | null, index?: number) => void;
   index?: number;
 
   locale?: any;
@@ -273,7 +273,7 @@ export default function MapContainerFactory(
       }
     };
 
-    _setMapboxMap: React.LegacyRef<MapboxGLMap> = mapbox => {
+    _setMapboxMap: React.Ref<MapRef> = mapbox => {
       if (!this._map && mapbox) {
         this._map = mapbox.getMap();
         // i noticed in certain context we don't access the actual map element
@@ -332,7 +332,7 @@ export default function MapContainerFactory(
     /* component render functions */
 
     /* eslint-disable complexity */
-    _renderMapPopover(layersToRender) {
+    _renderMapPopover() {
       // TODO: move this into reducer so it can be tested
       const {
         mapState,
@@ -343,6 +343,7 @@ export default function MapContainerFactory(
         layers,
         mousePos: {mousePosition, coordinate, pinned}
       } = this.props;
+      const layersToRender = this.layersToRenderSelector(this.props);
 
       if (!mousePosition || !interactionConfig.tooltip) {
         return null;
@@ -365,7 +366,7 @@ export default function MapContainerFactory(
       if (pinned || clicked) {
         // project lnglat to screen so that tooltip follows the object on zoom
         const viewport = new WebMercatorViewport(mapState);
-        const lngLat = clicked ? clicked.lngLat : pinned.coordinate;
+        const lngLat = clicked ? clicked.coordinate : pinned.coordinate;
         pinnedPosition = this._getHoverXY(viewport, lngLat);
         layerPinnedProp = getLayerHoverProp({
           interactionConfig,
@@ -502,6 +503,33 @@ export default function MapContainerFactory(
       }
     }
 
+    _renderDrawEditor() {
+      const {layers, datasets, mapControls, visStateActions, editor, index} = this.props;
+      const isEdit = mapControls.mapDraw ? mapControls.mapDraw.active : false;
+      const layersToRender = this.layersToRenderSelector(this.props);
+
+      return (
+        <Editor
+          index={index}
+          datasets={datasets}
+          editor={editor}
+          filters={this.polygonFilters(this.props)}
+          isEnabled={isEdit}
+          layers={layers}
+          layersToRender={layersToRender}
+          onDeleteFeature={visStateActions.deleteFeature}
+          onSelect={visStateActions.setSelectedFeature}
+          onUpdate={visStateActions.setFeatures}
+          onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
+          style={{
+            pointerEvents: isEdit ? 'all' : 'none',
+            position: 'absolute',
+            display: editor.visible ? 'block' : 'none'
+          }}
+        />
+      );
+    }
+
     _onViewportChange = viewState => {
       const {width, height, ...restViewState} = viewState;
       const {primary} = this.props;
@@ -560,8 +588,6 @@ export default function MapContainerFactory(
         transformRequest
       };
 
-      const isEdit = (mapControls.mapDraw || {}).active;
-
       const hasGeocoderLayer = layers.find(l => l.id === GEOCODER_LAYER_ID);
       const isSplit = Boolean(mapState.isSplit);
 
@@ -602,24 +628,7 @@ export default function MapContainerFactory(
           >
             {this._renderDeckOverlay(layersForDeck)}
             {this._renderMapboxOverlays()}
-            <Editor
-              index={index}
-              datasets={datasets}
-              editor={editor}
-              filters={this.polygonFilters(this.props)}
-              isEnabled={isEdit}
-              layers={layers}
-              layersToRender={layersToRender}
-              onDeleteFeature={visStateActions.deleteFeature}
-              onSelect={visStateActions.setSelectedFeature}
-              onUpdate={visStateActions.setFeatures}
-              onTogglePolygonFilter={visStateActions.setPolygonFilterLayer}
-              style={{
-                pointerEvents: isEdit ? 'all' : 'none',
-                position: 'absolute',
-                display: editor.visible ? 'block' : 'none'
-              }}
-            />
+            {this._renderDrawEditor()}
           </MapComponent>
           {mapStyle.topMapStyle || hasGeocoderLayer ? (
             <div style={MAP_STYLE.top}>
@@ -628,7 +637,7 @@ export default function MapContainerFactory(
               </MapComponent>
             </div>
           ) : null}
-          {this._renderMapPopover(layersToRender)}
+          {this._renderMapPopover()}
           {!isSplit || index === 1 ? <Attribution /> : null}
         </>
       );

diff --git a/src/components/map/map-legend.tsx b/src/components/map/map-legend.tsx
@@ -165,6 +165,7 @@ export const LayerColorLegend: React.FC<LayerColorLegendProps> = React.memo(
   }
 );
 
+// eslint-disable-next-line react/display-name
 LayerColorLegend.displayName = 'LayerColorLegend';
 
 const isColorChannel = visualChannel =>

diff --git a/src/components/modals/add-map-style-modal.tsx b/src/components/modals/add-map-style-modal.tsx
@@ -22,7 +22,7 @@ import React, {Component} from 'react';
 import {polyfill} from 'react-lifecycles-compat';
 import classnames from 'classnames';
 import styled from 'styled-components';
-import MapboxGLMap from 'react-map-gl';
+import MapboxGLMap, {MapRef} from 'react-map-gl';
 import {
   StyledModalContent,
   InputLight,
@@ -141,7 +141,7 @@ function AddMapStyleModalFactory() {
       return null;
     }
 
-    mapRef: MapboxGLMap | null | undefined;
+    mapRef: MapRef | null | undefined;
     _map: mapboxgl.Map | undefined;
 
     componentDidUpdate() {

diff --git a/src/deckgl-layers/package.json b/src/deckgl-layers/package.json
@@ -30,15 +30,15 @@
   ],
   "dependencies": {
     "@danmarshall/deckgl-typings": "4.9.22",
-    "@deck.gl/aggregation-layers": "8.2.0",
-    "@deck.gl/core": "8.2.0",
-    "@deck.gl/extensions": "8.2.0",
-    "@deck.gl/geo-layers": "8.2.0",
-    "@deck.gl/layers": "8.2.0",
-    "@deck.gl/mesh-layers": "8.2.0",
-    "@deck.gl/react": "8.2.0",
-    "@luma.gl/constants": "^8.2.0",
-    "@luma.gl/core": "^8.2.0",
+    "@deck.gl/aggregation-layers": "8.4.11",
+    "@deck.gl/core": "^8.4.11",
+    "@deck.gl/extensions": "^8.4.11",
+    "@deck.gl/geo-layers": "^8.4.11",
+    "@deck.gl/layers": "^8.4.11",
+    "@deck.gl/mesh-layers": "^8.4.11",
+    "@deck.gl/react": "^8.4.11",
+    "@luma.gl/constants": "^8.4.3",
+    "@luma.gl/core": "^8.4.3",
     "@mapbox/geo-viewport": "^0.4.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@types/geojson": "^7946.0.7",