Update Deck GL v9 (#838)

.github/workflows/ci.yml

@@ -110,6 +110,10 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
 
+      # Configure private registry
+      - name: Configure private registry
+        run: npm set //npm.pkg.github.com/:_authToken ${{ secrets.GITHUB_TOKEN }}
+
       # Install dependencies, lint, build and test
 
       - name: Install dependencies

.npmrc

@@ -0,0 +1 @@
+@cartodb:registry=https://npm.pkg.github.com

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Not released
 
+## 3.0.0
+
+### 3.0.0-alpha.7 (2024-04-16)
+
+-  Update Deck GL v9 and removed dropping features functionality [#838](https://github.com/CartoDB/carto-react/pull/838)
+
 ## 2.5
 
 ### 2.5.2 (2024-04-10)

lerna.json

@@ -4,5 +4,5 @@
   ],
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "2.5.2"
+  "version": "3.0.0-alpha.7"
 }

package.json

@@ -5,22 +5,21 @@
     "packages/*"
   ],
   "devDependencies": {
-    "@deck.gl/aggregation-layers": "^8.9.18",
-    "@deck.gl/carto": "^8.9.18",
-    "@deck.gl/core": "^8.9.18",
-    "@deck.gl/extensions": "^8.9.18",
-    "@deck.gl/geo-layers": "^8.9.18",
-    "@deck.gl/google-maps": "^8.9.18",
-    "@deck.gl/layers": "^8.9.18",
-    "@deck.gl/mesh-layers": "^8.9.18",
+    "@deck.gl-community/editable-layers": "^9.0.0-alpha.1",
+    "@deck.gl/aggregation-layers": "^9.0.1",
+    "@deck.gl/carto": "^9.0.1",
+    "@deck.gl/core": "^9.0.1",
+    "@deck.gl/extensions": "^9.0.1",
+    "@deck.gl/geo-layers": "^9.0.1",
+    "@deck.gl/google-maps": "^9.0.1",
+    "@deck.gl/layers": "^9.0.1",
+    "@deck.gl/mesh-layers": "^9.0.1",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@formatjs/intl-localematcher": "^0.4.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/lab": "^5.0.0-alpha.125",
     "@mui/material": "^5.11.16",
-    "@nebula.gl/edit-modes": "^1.0.4",
-    "@nebula.gl/layers": "^1.0.4",
     "@reduxjs/toolkit": "^1.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",

packages/react-api/__tests__/api/SQL.test.js

@@ -1,7 +1,7 @@
 import { REQUEST_GET_MAX_URL_LENGTH } from '@carto/react-core';
 import { mockClear, mockSqlApiRequest } from '../mockSqlApiRequest';
 import { executeSQL } from '../../src/api/SQL';
-import { API_VERSIONS } from '@deck.gl/carto';
+import { API_VERSIONS } from '../../src/types';
 
 describe('should call SqlApi', () => {
   const response = { rows: { revenue: 1495728 } };

packages/react-api/__tests__/api/lds.test.js

@@ -1,5 +1,5 @@
-import { API_VERSIONS } from '@deck.gl/carto';
 import { ldsGeocode } from '../../src/api/lds';
+import { API_VERSIONS } from '../../src/types';
 
 const sampleCredentialsV3 = {
   apiVersion: API_VERSIONS.V3,

packages/react-api/__tests__/api/tilejson.test.js

@@ -1,16 +1,13 @@
 import { getTileJson } from '../../src/api/tilejson';
-import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
+import { MAP_TYPES, API_VERSIONS } from '../../src/types';
 
-const mockedFetchLayerData = jest.fn();
+const mockedVectorTilesetSource = jest.fn();
 
 jest.mock('@deck.gl/carto', () => ({
   ...jest.requireActual('@deck.gl/carto'),
-  fetchLayerData: (props) => {
-    mockedFetchLayerData(props);
-    return Promise.resolve({
-      data: {},
-      format: 'tilejson'
-    });
+  vectorTilesetSource: (props) => {
+    mockedVectorTilesetSource(props);
+    return Promise.resolve({});
   }
 }));
 
@@ -34,17 +31,12 @@ describe('tilejson', () => {
 
       const tilejson = await getTileJson({ source });
 
-      expect(mockedFetchLayerData).toBeCalledWith({
+      expect(mockedVectorTilesetSource).toBeCalledWith({
+        connectionName: '__test_connection__',
+        apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
+        accessToken: '__test_api_key__',
         clientId: 'carto-for-react', // hardcoded as no neeed to export CLIENT_ID from '@carto/react-api/api/common';
-        connection: '__test_connection__',
-        credentials: {
-          accessToken: '__test_api_key__',
-          apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
-          apiVersion: 'v3'
-        },
-        format: 'tilejson',
-        source: '__test_tileset__',
-        type: 'tileset'
+        tableName: '__test_tileset__'
       });
 
       expect(tilejson).toBeDefined();

packages/react-api/__tests__/hooks/useCartoLayerProps.test.js

@@ -1,9 +1,9 @@
 import { DataFilterExtension, MaskExtension } from '@deck.gl/extensions';
-import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
 import { renderHook } from '@testing-library/react-hooks';
 import useCartoLayerProps from '../../src/hooks/useCartoLayerProps';
 import { mockReduxHooks, mockClear } from '../mockReduxHooks';
 import { MAX_GPU_FILTERS } from '../../src/hooks/dataFilterExtensionUtil';
+import { MAP_TYPES, API_VERSIONS } from '../../src/types';
 
 describe('useCartoLayerProps', () => {
   mockReduxHooks();
@@ -13,21 +13,11 @@ describe('useCartoLayerProps', () => {
       'binary',
       'onViewportLoad',
       'fetch',
-      'loaders',
       'onDataLoad',
       'id',
       'visible',
       'opacity',
       'uniqueIdProperty',
-      'data',
-      'type',
-      'geoColumn',
-      'aggregationExp',
-      'provider',
-      'connection',
-      'credentials',
-      'clientId',
-      'queryParameters',
       'filterRange',
       'updateTriggers',
       'getFilterValue',
@@ -90,22 +80,6 @@ describe('useCartoLayerProps', () => {
       });
     });
 
-    test('should return correct props when source geo column is set', () => {
-      const source = {
-        credentials: {
-          apiVersion: API_VERSIONS.V2
-        },
-        geoColumn: 'column_name',
-        aggregationExp: 'agg_exp'
-      };
-
-      const { result } = renderHook(() => useCartoLayerProps({ source }));
-
-      expect(Object.keys(result.current)).toEqual([...COMMON_PROPS]);
-      expect(result.current.geoColumn).toBe(source.geoColumn);
-      expect(result.current.aggregationExp).toBe(source.aggregationExp);
-    });
-
     describe('when maps_api_version is V3', () => {
       test('should return correct props when source type is tileset', () => {
         const source = {

packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "2.5.2",
+  "version": "3.0.0-alpha.7",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -68,12 +68,12 @@
     "@babel/runtime": "^7.13.9"
   },
   "peerDependencies": {
-    "@carto/react-core": "^2.5.0",
-    "@carto/react-redux": "^2.5.0",
-    "@carto/react-workers": "^2.5.0",
-    "@deck.gl/carto": "^8.9.18",
-    "@deck.gl/core": "^8.9.18",
-    "@deck.gl/extensions": "^8.9.18",
+    "@carto/react-core": "^3.0.0-alpha.7",
+    "@carto/react-redux": "^3.0.0-alpha.7",
+    "@carto/react-workers": "^3.0.0-alpha.7",
+    "@deck.gl/carto": "^9.0.1",
+    "@deck.gl/core": "^9.0.1",
+    "@deck.gl/extensions": "^9.0.1",
     "@loaders.gl/mvt": "^3.2.10",
     "react": "17.x || 18.x",
     "react-dom": "17.x || 18.x",

packages/react-api/src/api/SQL.js

@@ -1,8 +1,8 @@
 import { encodeParameter, getRequest, postRequest } from '@carto/react-core';
 import { REQUEST_GET_MAX_URL_LENGTH } from '@carto/react-core';
-import { API_VERSIONS } from '@deck.gl/carto/typed';
 
 import { dealWithApiError, CLIENT_ID } from './common';
+import { API_VERSIONS } from '../types';
 
 const DEFAULT_USER_COMPONENT_IN_URL = '{user}';
 
@@ -17,7 +17,7 @@ const DEFAULT_USER_COMPONENT_IN_URL = '{user}';
  * @param { string } props.query - SQL query to be executed
  * @param { string } props.connection - connection name required for CARTO cloud native
  * @param { Object } props.opts - Additional options for the HTTP request (eg `{ headers: {} }`)
- * @param { import('@deck.gl/carto/typed').QueryParameters } props.queryParameters - SQL query parameters
+ * @param { import('@deck.gl/carto').QueryParameters } props.queryParameters - SQL query parameters
  */
 export const executeSQL = async ({
   credentials,

packages/react-api/src/api/model.js

@@ -1,8 +1,9 @@
 import { checkCredentials, makeCall } from './common';
-import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed';
 import { _assert as assert } from '@carto/react-core/';
 
 import { REQUEST_GET_MAX_URL_LENGTH, _getClient } from '@carto/react-core';
+import { MAP_TYPES } from '../types';
+import { API_VERSIONS } from '../types';
 
 const AVAILABLE_MODELS = [
   'category',

packages/react-api/src/api/stats.js

@@ -1,11 +1,11 @@
 import { checkCredentials, makeCall } from './common';
-import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed';
 import { getTileJson } from './tilejson';
 import {
   InvalidColumnError,
   REQUEST_GET_MAX_URL_LENGTH,
   _assert as assert
 } from '@carto/react-core/';
+import { MAP_TYPES, API_VERSIONS } from '../types';
 
 /**
  * Execute a stats service request.

packages/react-api/src/api/tilejson.js

@@ -1,6 +1,7 @@
 import { checkCredentials, CLIENT_ID } from './common';
-import { MAP_TYPES, API_VERSIONS, fetchLayerData, FORMATS } from '@deck.gl/carto/typed';
+import { vectorTilesetSource } from '@deck.gl/carto';
 import { _assert as assert } from '@carto/react-core';
+import { MAP_TYPES, API_VERSIONS } from '../types';
 
 /**
  * Get the TileJson for static tilesets
@@ -24,16 +25,13 @@ export async function getTileJson(props) {
     'TileJson is a feature only available in CARTO 3.'
   );
 
-  const { data, format } = await fetchLayerData({
-    type: source.type,
-    source: source.data,
-    connection: source.connection,
-    credentials: source.credentials,
-    format: FORMATS.TILEJSON,
-    clientId: CLIENT_ID
+  const data = await vectorTilesetSource({
+    connectionName: source.connection,
+    apiBaseUrl: source.credentials.apiBaseUrl,
+    accessToken: source.credentials.accessToken,
+    clientId: CLIENT_ID,
+    tableName: source.data
   });
 
-  assert(format === FORMATS.TILEJSON, 'getTileJson: data is not a tilejson');
-
   return data;
 }

packages/react-api/src/hooks/dataFilterExtensionUtil.js

@@ -1,4 +1,4 @@
-import { DataFilterExtension } from '@deck.gl/extensions/typed';
+import { DataFilterExtension } from '@deck.gl/extensions';
 import { _buildFeatureFilter, _FilterTypes } from '@carto/react-core';
 
 // Don't change this value to maintain compatibility with builder

packages/react-api/src/hooks/maskExtensionUtil.js

@@ -1,5 +1,5 @@
 import { MASK_ID } from '@carto/react-core/';
-import { MaskExtension } from '@deck.gl/extensions/typed';
+import { MaskExtension } from '@deck.gl/extensions';
 
 const maskExtension = new MaskExtension();
 

packages/react-api/src/hooks/useCartoLayerProps.js

@@ -5,10 +5,6 @@ import useGeojsonFeatures from './useGeojsonFeatures';
 import useTileFeatures from './useTileFeatures';
 import { getDataFilterExtensionProps } from './dataFilterExtensionUtil';
 import { getMaskExtensionProps } from './maskExtensionUtil';
-import FeaturesDroppedLoader from './FeaturesDroppedLoader';
-import { CLIENT_ID } from '../api/common';
-
-const LOADERS = [FeaturesDroppedLoader];
 
 export default function useCartoLayerProps({
   source,
@@ -57,7 +53,6 @@ export default function useCartoLayerProps({
     ...(viewportFeatures && {
       onViewportLoad,
       fetch,
-      loaders: LOADERS,
       onDataLoad
     })
   };
@@ -78,15 +73,6 @@ export default function useCartoLayerProps({
     visible: layerConfig?.visible !== undefined ? layerConfig.visible : true,
     opacity: layerConfig?.opacity ?? 1,
     uniqueIdProperty,
-    data: source?.data,
-    type: source?.type,
-    geoColumn: source?.geoColumn,
-    aggregationExp: source?.aggregationExp,
-    provider: source?.provider,
-    connection: source?.connection,
-    credentials: source?.credentials,
-    clientId: CLIENT_ID,
-    queryParameters: source?.queryParameters,
     ...dataFilterExtensionProps,
     ...maskExtensionProps,
     extensions