Server-side map filtering with widgets (#797)

packages/react-api/src/index.d.ts

@@ -7,4 +7,4 @@ export { executeModel as _executeModel } from './api/model';
 export { default as FeaturesDroppedLoader } from './hooks/FeaturesDroppedLoader';
 export { default as useCartoLayerProps } from './hooks/useCartoLayerProps';
 
-export { Credentials, UseCartoLayerFilterProps } from './types';
+export { Credentials, UseCartoLayerFilterProps, SourceProps } from './types';

packages/react-api/src/types.d.ts

@@ -2,6 +2,7 @@ import { DataFilterExtension, MaskExtension } from '@deck.gl/extensions/typed';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto/typed';
 import { QueryParameters } from '@deck.gl/carto/typed';
 import { FeatureCollection } from 'geojson';
+import { Provider } from '@carto/react-core';
 
 type ApiVersionsType = typeof API_VERSIONS;
 type MapTypesType = typeof MAP_TYPES;
@@ -34,7 +35,7 @@ export type SourceProps = {
   aggregationExp?: string;
   credentials?: Credentials;
   queryParameters?: QueryParameters;
-  provider?: 'bigquery' | 'postgres' | 'snowflake' | 'redshift' | 'databricks';
+  provider?: Provider;
 };
 
 export type LayerConfig = {

packages/react-core/src/index.d.ts

@@ -28,6 +28,8 @@ export { groupValuesByColumn } from './operations/groupBy';
 export { histogram } from './operations/histogram';
 export { scatterPlot } from './operations/scatterPlot';
 
+export { Provider } from './operations/constants/Provider'
+
 export { FilterTypes as _FilterTypes } from './filters/FilterTypes';
 
 export {

packages/react-core/src/index.js

@@ -29,6 +29,8 @@ export { groupValuesByColumn } from './operations/groupBy';
 export { histogram } from './operations/histogram';
 export { scatterPlot } from './operations/scatterPlot';
 
+export { Provider } from './operations/constants/Provider';
+
 export { FilterTypes as _FilterTypes } from './filters/FilterTypes';
 
 export {

packages/react-core/src/operations/constants/Provider.js

@@ -0,0 +1,12 @@
+/**
+ * Enum for the different connections providers
+ * @enum {string}
+ * @readonly
+ */
+export const Provider = Object.freeze({
+  BigQuery: 'bigquery',
+  Redshift: 'redshift',
+  Postgres: 'postgres',
+  Snowflake: 'snowflake',
+  Databricks: 'databricks'
+});

packages/react-core/src/operations/constants/Provider.ts

@@ -0,0 +1,7 @@
+export enum Provider {
+  BigQuery = 'bigquery',
+  Redshift = 'redshift',
+  Postgres = 'postgres',
+  Snowflake = 'snowflake',
+  Databricks = 'databricks'
+}

packages/react-redux/src/slices/cartoSlice.d.ts

@@ -1,14 +1,19 @@
-import { Credentials } from '@carto/react-api/';
-import { SourceProps } from '@carto/react-api/types';
+import { Credentials, SourceProps } from '@carto/react-api/';
 import { FiltersLogicalOperators, Viewport, _FilterTypes } from '@carto/react-core';
 import { CartoBasemapsNames, GMapsBasemapsNames } from '@carto/react-basemaps/';
 import { InitialCartoState, CartoState, ViewState } from '../types';
 import { AnyAction, Reducer } from 'redux';
 import { Feature, Polygon, MultiPolygon } from 'geojson';
 
+type FilterValues = string[] | number[] | number[][]
+
+export type SourceFilters = {
+  [column: string]: Partial<Record<_FilterTypes, { values: FilterValues; owner?: string; params?: Record<string, unknown>; }>>
+}
+
 type Source = SourceProps & {
   id: string;
-  filters?: any;
+  filters?: SourceFilters;
   filtersLogicalOperator?: FiltersLogicalOperators;
   isDroppingFeatures?: boolean;
 };
@@ -23,7 +28,7 @@ type BasemapName = CartoBasemapsNames | GMapsBasemapsNames;
 
 type FilterBasic = {
   type: _FilterTypes;
-  values: string[] | number[] | number[][];
+  values: FilterValues;
   owner?: string;
   params?: Record<string, unknown>;
 };
@@ -41,6 +46,7 @@ type SpatialFilter = {
 
 type Filter = FilterBasic & FilterCommonProps;
 
+
 type FeaturesData = {
   sourceId: string;
   features: [];

packages/react-redux/src/slices/cartoSlice.js

@@ -206,6 +206,7 @@ export const createCartoSlice = (initialState) => {
  * @param {string} data.type - type of source. Possible values are sql or bigquery.
  * @param {object=} data.credentials - (optional) Custom credentials to be used in the source.
  * @param {string} data.connection - connection name for CARTO 3 source.
+ * @param {import('./cartoSlice').SourceFilters=} data.filters - logical operator that defines how filters for different columns are joined together.
  * @param {FiltersLogicalOperators=} data.filtersLogicalOperator - logical operator that defines how filters for different columns are joined together.
  * @param {import('@deck.gl/carto/typed').QueryParameters} data.queryParameters - SQL query parameters.
  * @param {string=} data.geoColumn - (optional) name of column containing geometries or spatial index data.
@@ -218,6 +219,7 @@ export const addSource = ({
   type,
   credentials,
   connection,
+  filters = undefined,
   filtersLogicalOperator = FiltersLogicalOperators.AND,
   queryParameters = [],
   geoColumn,
@@ -231,6 +233,7 @@ export const addSource = ({
     type,
     credentials,
     connection,
+    ...(filters && { filters }),
     filtersLogicalOperator,
     queryParameters,
     geoColumn,

packages/react-widgets/__tests__/models/utils.test.js

@@ -1,11 +1,11 @@
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
 import {
-  formatTableNameWithFilters,
+  sourceAndFiltersToSQL,
   wrapModelCall,
   formatOperationColumn,
   normalizeObjectKeys
 } from '../../src/models/utils';
-import { AggregationTypes, _filtersToSQL } from '@carto/react-core';
+import { AggregationTypes, Provider, _filtersToSQL } from '@carto/react-core';
 
 const V2_SOURCE = {
   id: '__test__',
@@ -22,7 +22,8 @@ const V3_SOURCE = {
   data: '__test__',
   credentials: {
     apiVersion: API_VERSIONS.V3
-  }
+  },
+  provider: Provider.BigQuery
 };
 
 const SOURCE_WITH_FILTERS = {
@@ -89,29 +90,29 @@ describe('utils', () => {
     });
   });
 
-  describe('formatTableNameWithFilters', () => {
+  describe('sourceAndFiltersToSQL', () => {
     test('should format query sources correctly', () => {
       const source = {
         ...V3_SOURCE,
         type: MAP_TYPES.QUERY,
         data: 'SELECT * FROM test;'
       };
-      const query = formatTableNameWithFilters({ source });
+      const query = sourceAndFiltersToSQL(source);
 
-      expect(query).toBe(`(SELECT * FROM test) foo`);
+      expect(query).toBe(`SELECT * FROM (SELECT * FROM test) __source_query `);
     });
 
     test('should format table sources correctly', () => {
-      const query = formatTableNameWithFilters({ source: V3_SOURCE });
+      const query = sourceAndFiltersToSQL(V3_SOURCE);
 
-      expect(query).toBe(V3_SOURCE.data);
+      expect(query).toBe(`SELECT * FROM \`${V3_SOURCE.data}\` `);
     });
 
     test('should format source with filters correctly', () => {
-      const query = formatTableNameWithFilters({ source: SOURCE_WITH_FILTERS });
+      const query = sourceAndFiltersToSQL(SOURCE_WITH_FILTERS);
 
       expect(query).toBe(
-        `${SOURCE_WITH_FILTERS.data} WHERE (column_1 in('value_1','value_2'))`
+        `SELECT * FROM \`${SOURCE_WITH_FILTERS.data}\` WHERE (column_1 in('value_1','value_2'))`
       );
     });
   });

packages/react-widgets/src/index.d.ts

@@ -27,3 +27,4 @@ export { default as FeatureSelectionWidget } from './widgets/FeatureSelectionWid
 export { default as FeatureSelectionLayer } from './layers/FeatureSelectionLayer';
 export { default as useGeocoderWidgetController } from './hooks/useGeocoderWidgetController';
 export { WidgetState, WidgetStateType } from './types';
+export { isRemoteCalculationSupported as _isRemoteCalculationSupported, sourceAndFiltersToSQL as _sourceAndFiltersToSQL } from './models/utils';

packages/react-widgets/src/index.js

@@ -23,4 +23,7 @@ export { default as useSourceFilters } from './hooks/useSourceFilters';
 export { default as FeatureSelectionLayer } from './layers/FeatureSelectionLayer';
 export { default as useGeocoderWidgetController } from './hooks/useGeocoderWidgetController';
 export { WidgetStateType } from './hooks/useWidgetFetch';
-export { isRemoteCalculationSupported as _isRemoteCalculationSupported } from './models/utils';
+export {
+  isRemoteCalculationSupported as _isRemoteCalculationSupported,
+  sourceAndFiltersToSQL as _sourceAndFiltersToSQL
+} from './models/utils';

packages/react-widgets/src/models/fqn.d.ts

@@ -0,0 +1,69 @@
+import { Provider } from "@carto/react-core"
+
+export type Fragment = {
+  name: string,
+  quoted: boolean
+}
+export type GetIdentifierOptions = {
+  quoted?: boolean,
+  safe?: boolean
+}
+
+export type GetObjectIdentifierOptions = GetIdentifierOptions & {
+  suffix?: string
+}
+
+export enum ParsingMode {
+  LeftToRight = 'leftToRight',
+  RightToLeft = 'rightToLeft'
+}
+
+export class FullyQualifiedName {
+  protected databaseFragment: Fragment | null
+  protected schemaFragment: Fragment | null
+  protected objectFragment: Fragment | null
+
+  protected provider: Provider
+  protected originalFQN: string
+  protected parsingMode: ParsingMode
+
+  static empty (provider: Provider, mode: ParsingMode): FullyQualifiedName
+
+  constructor (fqn: string, provider: Provider, mode?: ParsingMode)
+
+  public toString (): string
+
+  public getDatabaseName<Safe extends boolean> (options: { quoted?: boolean, safe: Safe }): Safe extends true ? string | null : string
+  public getDatabaseName (options?: GetIdentifierOptions): string
+  public getDatabaseName (options?: GetIdentifierOptions): string | null
+
+  public getSchemaName<Safe extends boolean> (options: { quoted?: boolean, safe: Safe }): Safe extends true ? string | null : string
+  public getSchemaName (options?: GetIdentifierOptions): string
+  public getSchemaName (options?: GetIdentifierOptions): string | null
+
+  public getObjectName<Safe extends boolean> (options: { quoted?: boolean, safe: Safe, suffix?: string }): Safe extends true ? string | null : string
+  public getObjectName (options?: GetObjectIdentifierOptions): string
+  public getObjectName (options?: GetObjectIdentifierOptions): string | null | boolean
+
+  public setDatabaseName (databaseName: string): void
+
+  public setSchemaName (schemaName: string): void 
+
+  public setObjectName (objectName: string): void
+
+  private parseFQN (fqn: string): Array<Fragment | null>
+
+  private getFragmentName (fragment: Fragment): string
+
+  private quoteFragmentName (fragment: Fragment, suffix): string
+
+  private unquoteFragmentName (fragment: Fragment, suffix): string
+
+  private isQuotedName (name: string): boolean
+
+  private quoteName (name: string): string
+
+  private unquoteName (name: string, onlyDelimiters): string
+
+  private quoteExternalIdentifier (identifier: string): string
+}