@deck.gl/carto 9.0.0-beta.3 → 9.0.0-beta.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.0-beta.3",
+  "version": "9.0.0-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -74,5 +74,5 @@
     "@deck.gl/layers": "^9.0.0-alpha",
     "@loaders.gl/core": "^4.1.0"
   },
-  "gitHead": "643d1009268bbf92b5bc0941d00aa59d5e3a582b"
+  "gitHead": "7063cbec75a5fbcefc51f33f6e2488134533d34a"
 }

package/src/api/types.ts

@@ -54,6 +54,26 @@ export type VisualChannelField = {
   colorColumn?: string;
 };
 
+export interface Filters {
+  [column: string]: Filter;
+}
+
+interface Filter {
+  [FilterTypes.In]: number[];
+  [FilterTypes.Between]: number[][];
+  [FilterTypes.ClosedOpen]: number[][];
+  [FilterTypes.Time]: number[][];
+  [FilterTypes.StringSearch]: string[];
+}
+
+export enum FilterTypes {
+  In = 'in',
+  Between = 'between', // [a, b] both are included
+  ClosedOpen = 'closed_open', // [a, b) a is included, b is not
+  Time = 'time',
+  StringSearch = 'stringSearch'
+}
+
 export type VisualChannels = {
   colorField?: VisualChannelField;
   colorScale?: SCALE_TYPE;

package/src/layers/raster-layer-vertex.glsl.ts

@@ -32,8 +32,8 @@ void main(void) {
   vec2 common_position = offset.xy;
   float scale = offset.z;
 
-  int yIndex = - (gl_InstanceID / 256);
-  int xIndex = gl_InstanceID + (yIndex * 256);
+  int yIndex = - (gl_InstanceID / BLOCK_WIDTH);
+  int xIndex = gl_InstanceID + (yIndex * BLOCK_WIDTH);
   common_position += scale * vec2(float(xIndex), float(yIndex));
 
   vec4 color = isStroke ? instanceLineColors : instanceFillColors;

package/src/layers/raster-layer.ts

@@ -31,7 +31,9 @@ class RasterColumnLayer extends ColumnLayer {
 
   getShaders() {
     const shaders = super.getShaders();
-    return {...shaders, vs};
+    const data = this.props.data as unknown as Raster & {length: number};
+    const BLOCK_WIDTH = data.blockWidth || Math.sqrt(data.length);
+    return {...shaders, defines: {...shaders.defines, BLOCK_WIDTH}, vs};
   }
 
   initializeState() {

package/src/layers/vector-tile-layer.ts

@@ -35,7 +35,6 @@ type _VectorTileLayerProps = {
   data: null | TilejsonResult | Promise<TilejsonResult>;
 };
 
-// TODO Perhaps we can't subclass MVTLayer and keep types. Better to subclass TileLayer instead?
 // @ts-ignore
 export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLayer<
   Required<_VectorTileLayerProps> & ExtraProps
@@ -47,6 +46,12 @@ export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLaye
     mvt: boolean;
   };
 
+  constructor(...propObjects: VectorTileLayerProps[]) {
+    // Force externally visible props type, as it is not possible modify via extension
+    // @ts-ignore
+    super(...propObjects);
+  }
+
   initializeState(): void {
     super.initializeState();
     this.setState({binary: true});

package/src/sources/boundary-query-source.ts

@@ -1,14 +1,18 @@
 import {QueryParameters} from '../api/index';
 import {baseSource} from './base-source';
-import type {SourceOptions, TilejsonResult} from './types';
+import type {FilterOptions, SourceOptions, TilejsonResult} from './types';
 
-export type BoundaryQuerySourceOptions = SourceOptions & {
-  tilesetTableName: string;
-  matchingColumn?: string;
-  propertiesSqlQuery: string;
-  queryParameters?: QueryParameters;
-};
+export type BoundaryQuerySourceOptions = SourceOptions &
+  FilterOptions & {
+    columns?: string[];
+    tilesetTableName: string;
+    matchingColumn?: string;
+    propertiesSqlQuery: string;
+    queryParameters?: QueryParameters;
+  };
 type UrlParameters = {
+  columns?: string;
+  filters?: string;
   tilesetTableName: string;
   matchingColumn: string;
   propertiesSqlQuery: string;
@@ -18,12 +22,26 @@ type UrlParameters = {
 export const boundaryQuerySource = async function (
   options: BoundaryQuerySourceOptions
 ): Promise<TilejsonResult> {
-  const {tilesetTableName, matchingColumn = 'id', propertiesSqlQuery, queryParameters} = options;
+  const {
+    columns,
+    filters,
+    tilesetTableName,
+    matchingColumn = 'id',
+    propertiesSqlQuery,
+    queryParameters
+  } = options;
   const urlParameters: UrlParameters = {
     tilesetTableName,
     matchingColumn,
     propertiesSqlQuery
   };
+
+  if (columns) {
+    urlParameters.columns = columns.join(',');
+  }
+  if (filters) {
+    urlParameters.filters = JSON.stringify(filters);
+  }
   if (queryParameters) {
     urlParameters.queryParameters = JSON.stringify(queryParameters);
   }

package/src/sources/boundary-table-source.ts

@@ -1,13 +1,15 @@
 import {baseSource} from './base-source';
-import type {SourceOptions, TilejsonResult} from './types';
+import type {FilterOptions, SourceOptions, TilejsonResult} from './types';
 
-export type BoundaryTableSourceOptions = SourceOptions & {
-  tilesetTableName: string;
-  columns?: string[];
-  matchingColumn?: string;
-  propertiesTableName: string;
-};
+export type BoundaryTableSourceOptions = SourceOptions &
+  FilterOptions & {
+    tilesetTableName: string;
+    columns?: string[];
+    matchingColumn?: string;
+    propertiesTableName: string;
+  };
 type UrlParameters = {
+  filters?: string;
   tilesetTableName: string;
   columns?: string;
   matchingColumn: string;
@@ -17,7 +19,7 @@ type UrlParameters = {
 export const boundaryTableSource = async function (
   options: BoundaryTableSourceOptions
 ): Promise<TilejsonResult> {
-  const {tilesetTableName, columns, matchingColumn = 'id', propertiesTableName} = options;
+  const {filters, tilesetTableName, columns, matchingColumn = 'id', propertiesTableName} = options;
   const urlParameters: UrlParameters = {
     tilesetTableName,
     matchingColumn,
@@ -27,5 +29,8 @@ export const boundaryTableSource = async function (
   if (columns) {
     urlParameters.columns = columns.join(',');
   }
+  if (filters) {
+    urlParameters.filters = JSON.stringify(filters);
+  }
   return baseSource<UrlParameters>('boundary', options, urlParameters) as Promise<TilejsonResult>;
 };

package/src/sources/types.ts

@@ -1,5 +1,5 @@
 import type {Feature} from 'geojson';
-import type {Format, MapInstantiation, QueryParameters} from '../api/types';
+import type {Filters, Format, MapInstantiation, QueryParameters} from '../api/types';
 
 export type SourceRequiredOptions = {
   /** Carto platform access token. */
@@ -57,6 +57,13 @@ export type AggregationOptions = {
   aggregationResLevel?: number;
 };
 
+export type FilterOptions = {
+  /**
+   * Filters to apply to the data source on the server
+   */
+  filters: Filters;
+};
+
 export type QuerySourceOptions = {
   /**
    * The column name and the type of geospatial support.

package/src/sources/vector-query-source.ts

@@ -1,9 +1,21 @@
 /* eslint-disable camelcase */
 import {baseSource} from './base-source';
-import type {SourceOptions, QuerySourceOptions, SpatialDataType, TilejsonResult} from './types';
+import type {
+  FilterOptions,
+  SourceOptions,
+  QuerySourceOptions,
+  SpatialDataType,
+  TilejsonResult
+} from './types';
 
-export type VectorQuerySourceOptions = SourceOptions & QuerySourceOptions;
+export type VectorQuerySourceOptions = SourceOptions &
+  QuerySourceOptions &
+  FilterOptions & {
+    columns?: string[];
+  };
 type UrlParameters = {
+  columns?: string;
+  filters?: string;
   spatialDataType: SpatialDataType;
   spatialDataColumn?: string;
   q: string;
@@ -13,9 +25,15 @@ type UrlParameters = {
 export const vectorQuerySource = async function (
   options: VectorQuerySourceOptions
 ): Promise<TilejsonResult> {
-  const {spatialDataColumn = 'geom', sqlQuery, queryParameters} = options;
+  const {columns, filters, spatialDataColumn = 'geom', sqlQuery, queryParameters} = options;
   const urlParameters: UrlParameters = {spatialDataColumn, spatialDataType: 'geo', q: sqlQuery};
 
+  if (columns) {
+    urlParameters.columns = columns.join(',');
+  }
+  if (filters) {
+    urlParameters.filters = JSON.stringify(filters);
+  }
   if (queryParameters) {
     urlParameters.queryParameters = JSON.stringify(queryParameters);
   }

package/src/sources/vector-table-source.ts

@@ -1,10 +1,17 @@
 /* eslint-disable camelcase */
 import {baseSource} from './base-source';
-import type {SourceOptions, SpatialDataType, TableSourceOptions, TilejsonResult} from './types';
+import type {
+  FilterOptions,
+  SourceOptions,
+  SpatialDataType,
+  TableSourceOptions,
+  TilejsonResult
+} from './types';
 
-export type VectorTableSourceOptions = SourceOptions & TableSourceOptions;
+export type VectorTableSourceOptions = SourceOptions & TableSourceOptions & FilterOptions;
 type UrlParameters = {
   columns?: string;
+  filters?: string;
   spatialDataType: SpatialDataType;
   spatialDataColumn?: string;
   name: string;
@@ -13,11 +20,14 @@ type UrlParameters = {
 export const vectorTableSource = async function (
   options: VectorTableSourceOptions
 ): Promise<TilejsonResult> {
-  const {columns, spatialDataColumn = 'geom', tableName} = options;
+  const {columns, filters, spatialDataColumn = 'geom', tableName} = options;
   const urlParameters: UrlParameters = {name: tableName, spatialDataColumn, spatialDataType: 'geo'};
 
   if (columns) {
     urlParameters.columns = columns.join(',');
   }
+  if (filters) {
+    urlParameters.filters = JSON.stringify(filters);
+  }
   return baseSource<UrlParameters>('table', options, urlParameters) as Promise<TilejsonResult>;
 };