@deck.gl/carto 8.7.7 → 8.8.0-alpha.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.7.7",
+  "version": "8.8.0-alpha.2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,12 +31,12 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/gis": "^3.1.5",
-    "@loaders.gl/loader-utils": "^3.1.5",
-    "@loaders.gl/mvt": "^3.1.5",
-    "@loaders.gl/tiles": "^3.1.5",
+    "@loaders.gl/gis": "^3.2.0-alpha.4",
+    "@loaders.gl/loader-utils": "^3.2.0-alpha.4",
+    "@loaders.gl/mvt": "^3.2.0-alpha.4",
+    "@loaders.gl/tiles": "^3.2.0-alpha.4",
     "@luma.gl/constants": "^8.5.10",
-    "@math.gl/web-mercator": "^3.5.7",
+    "@math.gl/web-mercator": "3.6.0-alpha.5",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
     "d3-color": "^2.0.0",
@@ -53,9 +53,10 @@
   "peerDependencies": {
     "@deck.gl/aggregation-layers": "^8.0.0",
     "@deck.gl/core": "^8.0.0",
+    "@deck.gl/extensions": "^8.0.0",
     "@deck.gl/geo-layers": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@loaders.gl/core": "^3.1.5"
+    "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "5a7e586411cb538d3319e35f8e07d61c9a3efb6d"
+  "gitHead": "a52215449dff06fb683f5afd6399526353d11f35"
 }

package/src/api/layer-map.ts

@@ -7,7 +7,8 @@ import {
   scalePoint,
   scaleQuantile,
   scaleQuantize,
-  scaleSqrt
+  scaleSqrt,
+  scaleThreshold
 } from 'd3-scale';
 import {format as d3Format} from 'd3-format';
 import moment from 'moment-timezone';
@@ -27,10 +28,13 @@ const SCALE_FUNCS = {
   point: scalePoint,
   quantile: scaleQuantile,
   quantize: scaleQuantize,
-  sqrt: scaleSqrt
+  sqrt: scaleSqrt,
+  custom: scaleThreshold
 };
 export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
+const UNKNOWN_COLOR = '#868d91';
+
 export const AGGREGATION = {
   average: 'MEAN',
   maximum: 'MAX',
@@ -179,7 +183,11 @@ function domainFromAttribute(attribute, scaleType: SCALE_TYPE) {
 
 function domainFromValues(values, scaleType: SCALE_TYPE) {
   if (scaleType === 'ordinal') {
-    return [...new Set(values)].sort();
+    return groupSort(
+      values,
+      g => -g.length,
+      d => d
+    );
   } else if (scaleType === 'quantile') {
     return values.sort((a, b) => a - b);
   } else if (scaleType === 'log') {
@@ -226,13 +234,31 @@ export function getColorValueAccessor({name}, colorAggregation, data: any) {
 export function getColorAccessor(
   {name},
   scaleType: SCALE_TYPE,
-  {colors},
+  {colors, colorMap},
   opacity: number | undefined,
   data: any
 ) {
   const scale = SCALE_FUNCS[scaleType as any]();
-  scale.domain(calculateDomain(data, name, scaleType));
-  scale.range(colors);
+  let domain: (string | number)[] = [];
+  let scaleColor: string[] = [];
+
+  if (Array.isArray(colorMap)) {
+    colorMap.forEach(([value, color]) => {
+      domain.push(value);
+      scaleColor.push(color);
+    });
+  } else {
+    domain = calculateDomain(data, name, scaleType);
+    scaleColor = colors;
+  }
+
+  if (scaleType === 'ordinal') {
+    domain = domain.slice(0, scaleColor.length);
+  }
+
+  scale.domain(domain);
+  scale.range(scaleColor);
+  scale.unknown(UNKNOWN_COLOR);
   const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
 
   const accessor = properties => {

package/src/api/maps-api-common.ts

@@ -20,8 +20,8 @@ export const MAP_TYPES = {
   TILESET: 'tileset'
 } as const;
 export type MapType = ValuesOf<typeof MAP_TYPES>;
-export const COLUMNS_SUPPORT = [MAP_TYPES.TABLE];
-export const GEO_COLUMN_SUPPORT = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
+export const COLUMNS_SUPPORT: MapType[] = [MAP_TYPES.TABLE];
+export const GEO_COLUMN_SUPPORT: MapType[] = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
 
 // AVAILABLE FORMATS
 export const FORMATS = {
@@ -59,7 +59,7 @@ export interface SchemaField {
 export interface MapInstantiation extends MapInstantiationFormats {
   nrows: number;
   size?: number;
-  schema?: SchemaField[];
+  schema: SchemaField[];
 }
 
 type MapInstantiationFormats = Record<

package/src/api/maps-v3-client.ts

@@ -112,10 +112,11 @@ type FetchLayerDataParams = {
   credentials: CloudNativeCredentials;
   geoColumn?: string;
   columns?: string[];
-  schema?: boolean;
   clientId?: string;
   format?: Format;
   formatTiles?: TileFormat;
+  aggregationExp?: string;
+  aggregationResLevel?: number;
 };
 
 /**
@@ -126,23 +127,27 @@ function getParameters({
   source,
   geoColumn,
   columns,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: Omit<FetchLayerDataParams, 'connection' | 'credentials'>) {
   const parameters = [encodeParameter('client', clientId || DEFAULT_CLIENT)];
-  if (schema) {
-    parameters.push(encodeParameter('schema', true));
-  }
 
   const sourceName = type === MAP_TYPES.QUERY ? 'q' : 'name';
   parameters.push(encodeParameter(sourceName, source));
 
-  if (GEO_COLUMN_SUPPORT.includes(type) && geoColumn) {
+  if (geoColumn) {
     parameters.push(encodeParameter('geo_column', geoColumn));
   }
-  if (COLUMNS_SUPPORT.includes(type) && columns) {
+  if (columns) {
     parameters.push(encodeParameter('columns', columns.join(',')));
   }
+  if (aggregationExp) {
+    parameters.push(encodeParameter('aggregationExp', aggregationExp));
+  }
+  if (aggregationResLevel) {
+    parameters.push(encodeParameter('aggregationResLevel', aggregationResLevel));
+  }
 
   return parameters.join('&');
 }
@@ -154,11 +159,20 @@ export async function mapInstantiation({
   credentials,
   geoColumn,
   columns,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams): Promise<MapInstantiation> {
   const baseUrl = `${credentials.mapsUrl}/${connection}/${type}`;
-  const url = `${baseUrl}?${getParameters({type, source, geoColumn, columns, schema, clientId})}`;
+  const url = `${baseUrl}?${getParameters({
+    type,
+    source,
+    geoColumn,
+    columns,
+    clientId,
+    aggregationExp,
+    aggregationResLevel
+  })}`;
   const {accessToken} = credentials;
 
   if (url.length > MAX_GET_LENGTH && type === MAP_TYPES.QUERY) {
@@ -187,7 +201,11 @@ function checkFetchLayerDataParameters({
   type,
   source,
   connection,
-  credentials
+  credentials,
+  geoColumn,
+  columns,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams) {
   assert(connection, 'Must define connection');
   assert(type, 'Must define a type');
@@ -196,12 +214,35 @@ function checkFetchLayerDataParameters({
   assert(credentials.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
   assert(credentials.apiBaseUrl, 'Must define apiBaseUrl');
   assert(credentials.accessToken, 'Must define an accessToken');
+
+  if (columns) {
+    assert(
+      COLUMNS_SUPPORT.includes(type),
+      `The columns parameter is not supported by type ${type}`
+    );
+  }
+  if (geoColumn) {
+    assert(
+      GEO_COLUMN_SUPPORT.includes(type),
+      `The geoColumn parameter is not supported by type ${type}`
+    );
+  } else {
+    assert(!aggregationExp, 'Have aggregationExp, but geoColumn parameter is missing');
+    assert(!aggregationResLevel, 'Have aggregationResLevel, but geoColumn parameter is missing');
+  }
+
+  if (!aggregationExp) {
+    assert(
+      !aggregationResLevel,
+      'Have aggregationResLevel, but aggregationExp parameter is missing'
+    );
+  }
 }
 
 export interface FetchLayerDataResult {
   data: any;
-  format: Format;
-  schema?: SchemaField[];
+  format?: Format;
+  schema: SchemaField[];
 }
 export async function fetchLayerData({
   type,
@@ -212,8 +253,9 @@ export async function fetchLayerData({
   columns,
   format,
   formatTiles,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams): Promise<FetchLayerDataResult> {
   // Internally we split data fetching into two parts to allow us to
   // conditionally fetch the actual data, depending on the metadata state
@@ -226,16 +268,13 @@ export async function fetchLayerData({
     columns,
     format,
     formatTiles,
-    schema,
-    clientId
+    clientId,
+    aggregationExp,
+    aggregationResLevel
   });
 
   const data = await requestData({url, format: mapFormat, accessToken});
-  const result: FetchLayerDataResult = {data, format: mapFormat};
-  if (schema) {
-    result.schema = metadata.schema;
-  }
-
+  const result: FetchLayerDataResult = {data, format: mapFormat, schema: metadata.schema};
   return result;
 }
 
@@ -248,8 +287,9 @@ async function _fetchDataUrl({
   columns,
   format,
   formatTiles,
-  schema,
-  clientId
+  clientId,
+  aggregationExp,
+  aggregationResLevel
 }: FetchLayerDataParams) {
   const defaultCredentials = getDefaultCredentials();
   // Only pick up default credentials if they have been defined for
@@ -258,7 +298,16 @@ async function _fetchDataUrl({
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
     ...credentials
   };
-  checkFetchLayerDataParameters({type, source, connection, credentials: localCreds});
+  checkFetchLayerDataParameters({
+    type,
+    source,
+    connection,
+    credentials: localCreds,
+    geoColumn,
+    columns,
+    aggregationExp,
+    aggregationResLevel
+  });
 
   if (!localCreds.mapsUrl) {
     localCreds.mapsUrl = buildMapsUrlFromBase(localCreds.apiBaseUrl);
@@ -271,8 +320,9 @@ async function _fetchDataUrl({
     credentials: localCreds,
     geoColumn,
     columns,
-    schema,
-    clientId
+    clientId,
+    aggregationExp,
+    aggregationResLevel
   });
   let url: string | null = null;
   let mapFormat: Format | undefined;
@@ -325,7 +375,6 @@ export async function getData({
     geoColumn,
     columns,
     format,
-    schema: false,
     clientId
   });
   return layerData.data;

package/src/index.ts

@@ -16,3 +16,5 @@ export {
   getData,
   mapInstantiation as _mapInstantiation
 } from './api';
+
+export type {CartoLayerProps} from './layers/carto-layer';

package/src/layers/{carto-layer.js → carto-layer.ts}

@@ -1,16 +1,28 @@
-import {CompositeLayer, log} from '@deck.gl/core';
+import {CompositeLayer, Layer, log} from '@deck.gl/core';
 import CartoTileLayer from './carto-tile-layer';
 import {MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
 import {
   COLUMNS_SUPPORT,
+  Format,
   FORMATS,
   GEO_COLUMN_SUPPORT,
+  MapType,
   MAP_TYPES,
+  TileFormat,
   TILE_FORMATS
 } from '../api/maps-api-common';
-import {getDefaultCredentials} from '../config';
+import {
+  ClassicCredentials,
+  CloudNativeCredentials,
+  Credentials,
+  getDefaultCredentials
+} from '../config';
+import {CompositeLayerProps, LayerProps} from 'modules/core/src/types/layer-props';
+import {ChangeFlags} from 'modules/core/src/lib/layer-state';
+import {FetchLayerDataResult} from '../api/maps-v3-client';
+import {assert} from '../utils';
 
 const defaultProps = {
   // (String, required): data resource to load. table name, sql query or tileset name.
@@ -46,19 +58,105 @@ const defaultProps = {
   columns: {type: 'array', value: null}
 };
 
-export default class CartoLayer extends CompositeLayer {
-  initializeState() {
+export interface CartoLayerProps<DataT = any> extends CompositeLayerProps<DataT> {
+  /**
+   * Either a SQL query or a name of dataset/tileset.
+   */
+  data: string;
+
+  /**
+   * Data type.
+   *
+   * Possible values are:
+   *  * `MAP_TYPES.QUERY`, if data is a SQL query.
+   *  * `MAP_TYPES.TILESET`, if data is a tileset name.
+   *  * `MAP_TYPES.TABLE`, if data is a dataset name. Only supported with API v3.
+   */
+  type: MapType;
+
+  /**
+   * Name of the connection registered in the CARTO workspace.
+   *
+   * Required when apiVersion is `API_VERSIONS.V3`.
+   */
+  connection?: string;
+
+  /**
+   * Use to override the default data format.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3`.
+   *
+   * Possible values are: `FORMATS.GEOJSON`, `FORMATS.JSON` and `FORMATS.TILEJSON`.
+   */
+  format?: Format;
+
+  /**
+   * Use to override the default tile data format.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and format is `FORMATS.TILEJSON`.
+   *
+   * Possible values are: `TILE_FORMATS.BINARY`, `TILE_FORMATS.GEOJSON` and `TILE_FORMATS.MVT`.
+   */
+  formatTiles?: TileFormat;
+
+  /**
+   * Name of the geo_column in the CARTO platform.
+   *
+   * Use this override the default column (`'geom'`), from which the geometry information should be fetched.
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and type is `MAP_TYPES.TABLE`.
+   */
+  geoColumn?: string;
+
+  /**
+   * Names of columns to fetch.
+   *
+   * By default, all columns are fetched
+   *
+   * Only supported when apiVersion is `API_VERSIONS.V3` and type is `MAP_TYPES.TABLE`.
+   */
+  columns?: string[];
+
+  /**
+   * A string pointing to a unique attribute at the result of the query.
+   *
+   * A unique attribute is needed for highlighting with vector tiles when a feature is split across two or more tiles.
+   */
+  uniqueIdProperty?: string;
+
+  /**
+   * Optional. Overrides the configuration to connect with CARTO.
+   *
+   * @see Credentials
+   */
+  credentials?: Credentials;
+
+  /**
+   * Called when the request to the CARTO Maps API failed.
+   *
+   * By default the Error is thrown.
+   */
+  onDataError?: (err: unknown) => void;
+
+  clientId?: string;
+}
+
+export default class CartoLayer<DataT = any> extends CompositeLayer<CartoLayerProps<DataT>> {
+  static layerName = 'CartoLayer';
+  static defaultProps = defaultProps as any;
+
+  initializeState(): void {
     this.state = {
       data: null,
       apiVersion: null
     };
   }
 
-  get isLoaded() {
+  get isLoaded(): boolean {
     return this.getSubLayers().length > 0 && super.isLoaded;
   }
 
-  _checkProps(props) {
+  _checkProps(props: CartoLayerProps): void {
     const {type, credentials, connection, geoColumn, columns} = props;
     const localCreds = {...getDefaultCredentials(), ...credentials};
     const {apiVersion} = localCreds;
@@ -97,7 +195,16 @@ export default class CartoLayer extends CompositeLayer {
     }
   }
 
-  updateState({props, oldProps, changeFlags}) {
+  updateState({
+    props,
+    oldProps,
+    changeFlags
+  }: {
+    props: CartoLayerProps;
+    oldProps: CartoLayerProps;
+    context: any;
+    changeFlags: ChangeFlags;
+  }): void {
     this._checkProps(props);
     const shouldUpdateData =
       changeFlags.dataChanged ||
@@ -111,40 +218,57 @@ export default class CartoLayer extends CompositeLayer {
 
     if (shouldUpdateData) {
       this.setState({data: null, apiVersion: null});
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
       this._updateData();
     }
   }
 
-  async _updateData() {
+  async _updateData(): Promise<void> {
     try {
-      const {type, data: source, clientId, credentials, ...rest} = this.props;
+      const {type, data: source, clientId, credentials, connection, ...rest} = this.props;
       const localConfig = {...getDefaultCredentials(), ...credentials};
       const {apiVersion} = localConfig;
 
-      let result;
+      let result: FetchLayerDataResult;
       if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
-        result = {data: await getDataV2({type, source, credentials})};
+        result = {
+          data: await getDataV2({type, source, credentials: credentials as ClassicCredentials})
+        };
       } else {
-        result = await fetchLayerData({type, source, clientId, credentials, ...rest});
+        result = await fetchLayerData({
+          type,
+          source,
+          clientId,
+          credentials: credentials as CloudNativeCredentials,
+          connection: connection as string,
+          ...rest
+        });
       }
 
       this.setState({...result, apiVersion});
-      this.props.onDataLoad(result.data);
+
+      this.props.onDataLoad?.(result.data, {
+        propName: 'data',
+        layer: this
+      });
     } catch (err) {
       if (this.props.onDataError) {
-        this.props.onDataError(err);
+        this.props.onDataError(err as Error);
       } else {
         throw err;
       }
     }
   }
 
-  _getSubLayerAndProps() {
+  _getSubLayerAndProps(): [any, LayerProps] {
+    assert(this.state);
+
     const {data, format, apiVersion} = this.state;
 
     const {uniqueIdProperty} = defaultProps;
-    const props = {uniqueIdProperty, ...this.props};
-    delete props.data;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const {data: _notUsed, ...propsNoData} = this.props;
+    const props = {uniqueIdProperty, ...propsNoData};
 
     if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
       return [MVTLayer, props];
@@ -155,7 +279,9 @@ export default class CartoLayer extends CompositeLayer {
       const tileUrl = new URL(data.tiles[0]);
 
       props.formatTiles =
-        props.formatTiles || tileUrl.searchParams.get('formatTiles') || TILE_FORMATS.MVT;
+        props.formatTiles ||
+        (tileUrl.searchParams.get('formatTiles') as TileFormat) ||
+        TILE_FORMATS.MVT;
 
       return props.formatTiles === TILE_FORMATS.MVT ? [MVTLayer, props] : [CartoTileLayer, props];
     }
@@ -164,7 +290,9 @@ export default class CartoLayer extends CompositeLayer {
     return [GeoJsonLayer, props];
   }
 
-  renderLayers() {
+  renderLayers(): Layer | null {
+    assert(this.state);
+
     const {data} = this.state;
 
     if (!data) return null;
@@ -184,6 +312,3 @@ export default class CartoLayer extends CompositeLayer {
     );
   }
 }
-
-CartoLayer.layerName = 'CartoLayer';
-CartoLayer.defaultProps = defaultProps;