@carto/api-client 0.5.0-alpha.13 → 0.5.0-alpha.15

package/src/fetch-map/parse-map.ts

@@ -0,0 +1,425 @@
+import type {ColorParameters} from '@luma.gl/core';
+import {
+  AGGREGATION,
+  getLayerProps,
+  getColorAccessor,
+  getColorValueAccessor,
+  getSizeAccessor,
+  getTextAccessor,
+  OPACITY_MAP,
+  opacityToAlpha,
+  getIconUrlAccessor,
+  negateAccessor,
+  getMaxMarkerSize,
+  LayerType,
+} from './layer-map.js';
+
+import {assert, isEmptyObject} from '../utils.js';
+import {Filters} from '../types.js';
+import {
+  KeplerMapConfig,
+  MapLayerConfig,
+  VisualChannels,
+  VisConfig,
+  MapConfigLayer,
+  Dataset,
+} from './types.js';
+import {isRemoteCalculationSupported} from './utils.js';
+
+export type LayerDescriptor = {
+  type: LayerType;
+  props: Record<string, any>;
+  filters?: Filters;
+};
+
+export type ParseMapResult = {
+  /** Map id. */
+  id: string;
+
+  /** Title of map. */
+  title: string;
+
+  /** Description of map. */
+  description?: string;
+  createdAt: string;
+  updatedAt: string;
+  initialViewState: any;
+
+  /** @deprecated Use `basemap`. */
+  mapStyle: any;
+  popupSettings: any;
+  token: string;
+
+  layers: LayerDescriptor[];
+};
+
+export function parseMap(json: any) {
+  const {keplerMapConfig, datasets, token} = json;
+  assert(keplerMapConfig.version === 'v1', 'Only support Kepler v1');
+  const config = keplerMapConfig.config as KeplerMapConfig;
+  const {filters, mapState, mapStyle, popupSettings} = config;
+  const {layers, layerBlending, interactionConfig} = config.visState;
+
+  return {
+    id: json.id,
+    title: json.title,
+    description: json.description,
+    createdAt: json.createdAt,
+    updatedAt: json.updatedAt,
+    initialViewState: mapState,
+    /** @deprecated Use `basemap`. */
+    mapStyle,
+    popupSettings,
+    token,
+    layers: layers
+      .reverse()
+      .map(({id, type, config, visualChannels}: MapConfigLayer) => {
+        try {
+          const {dataId} = config;
+          const dataset: Dataset | null = datasets.find(
+            (d: any) => d.id === dataId
+          );
+          assert(dataset, `No dataset matching dataId: ${dataId}`);
+          const {data} = dataset;
+          assert(data, `No data loaded for dataId: ${dataId}`);
+
+          const {propMap, defaultProps} = getLayerProps(type, config, dataset);
+
+          const styleProps = createStyleProps(config, propMap);
+
+          const layer: LayerDescriptor = {
+            type,
+            filters:
+              isEmptyObject(filters) || isRemoteCalculationSupported(dataset)
+                ? undefined
+                : filters[dataId],
+            props: {
+              id,
+              data,
+              ...defaultProps,
+              ...createInteractionProps(interactionConfig),
+              ...styleProps,
+              ...createChannelProps(id, type, config, visualChannels, data), // Must come after style
+              ...createParametersProp(
+                layerBlending,
+                styleProps.parameters || {}
+              ), // Must come after style
+              ...createLoadOptions(token),
+            },
+          };
+          return layer;
+        } catch (e: any) {
+          console.error(e.message);
+          return undefined;
+        }
+      }),
+  };
+}
+
+function createParametersProp(
+  layerBlending: string,
+  parameters: ColorParameters
+) {
+  if (layerBlending === 'additive') {
+    parameters.blendColorSrcFactor = parameters.blendAlphaSrcFactor =
+      'src-alpha';
+    parameters.blendColorDstFactor = parameters.blendAlphaDstFactor =
+      'dst-alpha';
+    parameters.blendColorOperation = parameters.blendAlphaOperation = 'add';
+  } else if (layerBlending === 'subtractive') {
+    parameters.blendColorSrcFactor = 'one';
+    parameters.blendColorDstFactor = 'one-minus-dst-color';
+    parameters.blendAlphaSrcFactor = 'src-alpha';
+    parameters.blendAlphaDstFactor = 'dst-alpha';
+    parameters.blendColorOperation = 'subtract';
+    parameters.blendAlphaOperation = 'add';
+  }
+
+  return Object.keys(parameters).length ? {parameters} : {};
+}
+
+function createInteractionProps(interactionConfig: any) {
+  const pickable = interactionConfig && interactionConfig.tooltip.enabled;
+  return {
+    autoHighlight: pickable,
+    pickable,
+  };
+}
+
+function mapProps(source: any, target: any, mapping: any) {
+  for (const sourceKey in mapping) {
+    const sourceValue = source[sourceKey];
+    const targetKey = mapping[sourceKey];
+    if (sourceValue === undefined) {
+      continue;
+    }
+    if (typeof targetKey === 'string') {
+      target[targetKey] = sourceValue;
+    } else if (typeof targetKey === 'function') {
+      const [key, value] = Object.entries(targetKey(sourceValue))[0];
+      target[key] = value;
+    } else if (typeof targetKey === 'object') {
+      // Nested definition, recurse down one level (also handles arrays)
+      mapProps(sourceValue, target, targetKey);
+    }
+  }
+}
+
+function createStyleProps(config: MapLayerConfig, mapping: any) {
+  const result: Record<string, any> = {};
+  mapProps(config, result, mapping);
+
+  // Kepler format sometimes omits strokeColor. TODO: remove once we can rely on
+  // `strokeColor` always being set when `stroke: true`.
+  if (result.stroked && !result.getLineColor) {
+    result.getLineColor = result.getFillColor;
+  }
+
+  for (const colorAccessor in OPACITY_MAP) {
+    if (Array.isArray(result[colorAccessor])) {
+      const color = [...result[colorAccessor]];
+      const opacityKey = OPACITY_MAP[colorAccessor];
+      const opacity = config.visConfig[opacityKey as keyof VisConfig];
+      color[3] = opacityToAlpha(opacity);
+      result[colorAccessor] = color;
+    }
+  }
+
+  result.highlightColor = config.visConfig.enable3d
+    ? [255, 255, 255, 60]
+    : [252, 242, 26, 255];
+  return result;
+}
+
+function createChannelProps(
+  id: string,
+  type: string,
+  config: MapLayerConfig,
+  visualChannels: VisualChannels,
+  data: any
+) {
+  const {
+    colorField,
+    colorScale,
+    radiusField,
+    radiusScale,
+    sizeField,
+    sizeScale,
+    strokeColorField,
+    strokeColorScale,
+    weightField,
+  } = visualChannels;
+  let {heightField, heightScale} = visualChannels;
+  if (type === 'hexagonId') {
+    heightField = sizeField;
+    heightScale = sizeScale;
+  }
+  const {textLabel, visConfig} = config;
+  const result: Record<string, any> = {};
+
+  if (type === 'grid' || type === 'hexagon') {
+    result.colorScaleType = colorScale;
+    if (colorField) {
+      const {colorAggregation} = config.visConfig;
+      if (!AGGREGATION[colorAggregation]) {
+        result.getColorValue = getColorValueAccessor(
+          colorField,
+          colorAggregation,
+          data
+        );
+      } else {
+        result.getColorWeight = (d: any) => d[colorField.name];
+      }
+    }
+  } else if (colorField) {
+    const {colorAggregation: aggregation, colorRange: range} = visConfig;
+    result.getFillColor = getColorAccessor(
+      colorField,
+      // @ts-ignore
+      colorScale,
+      {aggregation, range},
+      visConfig.opacity,
+      data
+    );
+  }
+
+  if (type === 'point') {
+    const altitude = config.columns?.altitude;
+    if (altitude) {
+      result.dataTransform = (data: any) => {
+        data.features.forEach(
+          ({geometry, properties}: {geometry: any; properties: any}) => {
+            const {type, coordinates} = geometry;
+            if (type === 'Point') {
+              coordinates[2] = properties[altitude];
+            }
+          }
+        );
+        return data;
+      };
+    }
+  }
+
+  if (radiusField || sizeField) {
+    result.getPointRadius = getSizeAccessor(
+      // @ts-ignore
+      radiusField || sizeField,
+      // @ts-ignore
+      radiusScale || sizeScale,
+      visConfig.sizeAggregation,
+      visConfig.radiusRange || visConfig.sizeRange,
+      data
+    );
+  }
+
+  if (strokeColorField) {
+    const fallbackOpacity = type === 'point' ? visConfig.opacity : 1;
+    const opacity =
+      visConfig.strokeOpacity !== undefined
+        ? visConfig.strokeOpacity
+        : fallbackOpacity;
+    const {strokeColorAggregation: aggregation, strokeColorRange: range} =
+      visConfig;
+    result.getLineColor = getColorAccessor(
+      strokeColorField,
+      // @ts-ignore
+      strokeColorScale,
+      // @ts-ignore
+      {aggregation, range},
+      opacity,
+      data
+    );
+  }
+  if (heightField && visConfig.enable3d) {
+    result.getElevation = getSizeAccessor(
+      heightField,
+      // @ts-ignore
+      heightScale,
+      visConfig.heightAggregation,
+      visConfig.heightRange || visConfig.sizeRange,
+      data
+    );
+  }
+
+  if (weightField) {
+    result.getWeight = getSizeAccessor(
+      weightField,
+      undefined,
+      visConfig.weightAggregation,
+      undefined,
+      data
+    );
+  }
+
+  if (visConfig.customMarkers) {
+    const maxIconSize = getMaxMarkerSize(visConfig, visualChannels);
+    const {getPointRadius, getFillColor} = result;
+    const {
+      customMarkersUrl,
+      customMarkersRange,
+      filled: useMaskedIcons,
+    } = visConfig;
+
+    result.pointType = 'icon';
+    result.getIcon = getIconUrlAccessor(
+      visualChannels.customMarkersField,
+      customMarkersRange,
+      {fallbackUrl: customMarkersUrl, maxIconSize, useMaskedIcons},
+      data
+    );
+    result._subLayerProps = {
+      'points-icon': {
+        loadOptions: {
+          image: {
+            type: 'imagebitmap',
+          },
+          imagebitmap: {
+            resizeWidth: maxIconSize,
+            resizeHeight: maxIconSize,
+            resizeQuality: 'high',
+          },
+        },
+      },
+    };
+
+    if (getFillColor && useMaskedIcons) {
+      result.getIconColor = getFillColor;
+    }
+
+    if (getPointRadius) {
+      result.getIconSize = getPointRadius;
+    }
+
+    if (visualChannels.rotationField) {
+      result.getIconAngle = negateAccessor(
+        getSizeAccessor(
+          visualChannels.rotationField,
+          undefined,
+          null,
+          undefined,
+          data
+        )
+      );
+    }
+  } else if (type === 'point' || type === 'tileset') {
+    result.pointType = 'circle';
+  }
+
+  if (textLabel && textLabel.length && textLabel[0].field) {
+    const [mainLabel, secondaryLabel] = textLabel;
+    const collisionGroup = id;
+
+    ({
+      alignment: result.getTextAlignmentBaseline,
+      anchor: result.getTextAnchor,
+      color: result.getTextColor,
+      outlineColor: result.textOutlineColor,
+      size: result.textSizeScale,
+    } = mainLabel);
+    const {
+      color: getSecondaryColor,
+      field: secondaryField,
+      outlineColor: secondaryOutlineColor,
+      size: secondarySizeScale,
+    } = secondaryLabel || {};
+
+    result.getText = mainLabel.field && getTextAccessor(mainLabel.field, data);
+    const getSecondaryText =
+      secondaryField && getTextAccessor(secondaryField, data);
+
+    result.pointType = `${result.pointType}+text`;
+    result.textCharacterSet = 'auto';
+    result.textFontFamily = 'Inter, sans';
+    result.textFontSettings = {sdf: true};
+    result.textFontWeight = 600;
+    result.textOutlineWidth = 3;
+
+    result._subLayerProps = {
+      ...result._subLayerProps,
+      'points-text': {
+        collisionEnabled: true,
+        collisionGroup,
+
+        // getPointRadius already has radiusScale baked in, so only pass one or the other
+        ...(result.getPointRadius
+          ? {getRadius: result.getPointRadius}
+          : {radiusScale: visConfig.radius}),
+
+        ...(secondaryField && {
+          getSecondaryText,
+          getSecondaryColor,
+          secondarySizeScale,
+          secondaryOutlineColor,
+        }),
+      },
+    };
+  }
+
+  return result;
+}
+
+function createLoadOptions(accessToken: string) {
+  return {
+    loadOptions: {fetch: {headers: {Authorization: `Bearer ${accessToken}`}}},
+  };
+}

package/src/fetch-map/source.ts

@@ -0,0 +1,233 @@
+import {Dataset} from './types.js';
+import {SpatialIndex, SpatialIndexColumn} from '../constants.js';
+import {
+  QuerySourceOptions,
+  TableSourceOptions,
+  TilejsonResult,
+  TileResolution,
+} from '../sources/types.js';
+import {
+  DEFAULT_AGGREGATION_EXP,
+  DEFAULT_AGGREGATION_RES_LEVEL_H3,
+  DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN,
+  DEFAULT_TILE_RESOLUTION,
+  REDUCED_QUERIES_TILE_RESOLUTION,
+} from '../constants-internal.js';
+import {
+  h3QuerySource,
+  H3QuerySourceOptions,
+  h3TableSource,
+  H3TableSourceOptions,
+  quadbinQuerySource,
+  QuadbinQuerySourceOptions,
+  quadbinTableSource,
+  QuadbinTableSourceOptions,
+  rasterSource,
+  vectorQuerySource,
+  VectorQuerySourceOptions,
+  vectorTableSource,
+  VectorTableSourceOptions,
+  vectorTilesetSource,
+  VectorTilesetSourceOptions,
+} from '../sources/index.js';
+import {Filter} from '../types.js';
+
+type FetchDatasetOptions = {
+  accessToken: string;
+  apiBaseUrl: string;
+  connection: string;
+  headers?: Record<string, string>;
+  localCache?: {
+    cacheControl: 'no-cache'[];
+  };
+  maxLengthURL?: number;
+};
+
+type FetchDataset = {
+  dataset: Dataset;
+  filters?: Filter;
+  options: FetchDatasetOptions;
+};
+
+// Copy of getCartoSource from cloud-native:
+// https://github.com/CartoDB/cloud-native/blob/main/workspace-www/src/features/common/utils/cartoDeckGL.ts#L79
+export function configureSource({
+  dataset,
+  filters,
+  options,
+}: FetchDataset): Promise<TilejsonResult> {
+  const {
+    geoColumn,
+    columns,
+    type,
+    source,
+    queryParameters,
+    aggregationExp,
+    aggregationResLevel: originalAggregationResLevel,
+  } = dataset;
+  const sourceOptions = getSourceOptions(options);
+  const spatialDataColumn = getColumnNameFromGeoColumn(geoColumn) || undefined;
+  const spatialIndex = geoColumn
+    ? getSpatialIndexFromGeoColumn(geoColumn)
+    : undefined;
+  const tileResolution = getDynamicTileResolution(spatialIndex);
+  const isH3 = spatialIndex === SpatialIndex.H3;
+  const isQuadbin = spatialIndex === SpatialIndex.QUADBIN;
+  let aggregationResLevel = originalAggregationResLevel;
+
+  if (typeof originalAggregationResLevel !== 'number' && isH3) {
+    aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_H3;
+  } else if (typeof originalAggregationResLevel !== 'number' && isQuadbin) {
+    aggregationResLevel = DEFAULT_AGGREGATION_RES_LEVEL_QUADBIN;
+  }
+
+  const spatialIndexOptions = {
+    aggregationExp: !aggregationExp ? DEFAULT_AGGREGATION_EXP : aggregationExp,
+    aggregationResLevel: scaleAggregationResLevel(
+      aggregationResLevel,
+      tileResolution
+    ),
+    spatialDataColumn,
+    ...(filters && {filters}),
+  } as H3QuerySourceOptions;
+  const tilesetOptions = {
+    ...sourceOptions,
+    tableName: source,
+  } as VectorTilesetSourceOptions;
+  const tableOptions = {
+    ...sourceOptions,
+    tableName: source,
+    tileResolution,
+  } as TableSourceOptions;
+  const queryOptions = {
+    ...sourceOptions,
+    sqlQuery: source,
+    tileResolution,
+    ...(queryParameters && {queryParameters}),
+  } as QuerySourceOptions;
+  const vectorOptions = {
+    spatialDataColumn,
+    ...(columns && {columns}),
+    ...(filters && {filters}),
+    ...(aggregationExp && {aggregationExp}),
+  } as VectorTableSourceOptions;
+
+  if (type === 'raster') {
+    return rasterSource({
+      ...sourceOptions,
+      tableName: source,
+      ...(filters && {filters: filters as any}),
+    });
+  }
+  if (type === 'tileset') {
+    return vectorTilesetSource({...tilesetOptions});
+  }
+
+  if (type === 'table') {
+    if (isH3) {
+      return h3TableSource({
+        ...(tableOptions as H3TableSourceOptions),
+        ...spatialIndexOptions,
+      });
+    } else if (isQuadbin) {
+      return quadbinTableSource({
+        ...(tableOptions as QuadbinTableSourceOptions),
+        ...spatialIndexOptions,
+      });
+    } else {
+      return vectorTableSource({
+        ...(tableOptions as VectorTableSourceOptions),
+        ...vectorOptions,
+      });
+    }
+  }
+
+  if (type === 'query') {
+    if (isH3) {
+      return h3QuerySource({
+        ...(queryOptions as H3QuerySourceOptions),
+        ...spatialIndexOptions,
+      });
+    } else if (isQuadbin) {
+      return quadbinQuerySource({
+        ...(queryOptions as QuadbinQuerySourceOptions),
+        ...spatialIndexOptions,
+      });
+    } else {
+      return vectorQuerySource({
+        ...(queryOptions as VectorQuerySourceOptions),
+        ...vectorOptions,
+      });
+    }
+  }
+  throw new Error(`Invalid source type: ${type}`);
+}
+
+function getSourceOptions({
+  accessToken,
+  apiBaseUrl,
+  connection,
+  headers,
+  maxLengthURL,
+}: FetchDatasetOptions) {
+  return {
+    accessToken,
+    connectionName: connection,
+    apiBaseUrl,
+    headers,
+    maxLengthURL,
+    ...(headers?.['Cache-Control']?.includes('no-cache') && {
+      localCache: {
+        cacheControl: ['no-cache'] as 'no-cache'[],
+      },
+    }),
+  };
+}
+
+/**
+ * Returns default tile resolution for dynamic tilesets, based on layer configuration
+ * Result is not applicable for static tilesets, for which tile resolution is defined
+ * by tilejson.
+ */
+function getDynamicTileResolution(
+  spatialIndex?: SpatialIndex | null
+): TileResolution {
+  // TODO: Support increased tile size and resolution for dynamic H3 spatial indexes.
+  if (spatialIndex !== SpatialIndex.H3) {
+    return REDUCED_QUERIES_TILE_RESOLUTION;
+  }
+
+  return DEFAULT_TILE_RESOLUTION;
+}
+
+/**
+ * State of `aggregationResLevel` in the UI and backend config is based on an assumption of
+ * 512x512px tiles. Because we may change tile resolution for performance goals, the
+ * `aggregationResLevel` passed to the deck.gl layer must be scaled with tile resolution.
+ */
+function scaleAggregationResLevel(
+  aggregationResLevel: number,
+  tileResolution: number
+): number | undefined {
+  if (typeof aggregationResLevel !== 'number') return;
+  return aggregationResLevel - Math.log2(0.5 / tileResolution);
+}
+
+function getColumnNameFromGeoColumn(geoColumn: string | null | undefined) {
+  if (!geoColumn) {
+    return geoColumn;
+  }
+  const parts = geoColumn.split(':');
+  return parts.length === 1 ? parts[0] : parts.length === 2 ? parts[1] : null;
+}
+
+function getSpatialIndexFromGeoColumn(geoColumn: string) {
+  const spatialIndexToSearch = geoColumn.split(':')[0];
+
+  for (const index of Object.values(SpatialIndex)) {
+    if (SpatialIndexColumn[index].includes(spatialIndexToSearch)) {
+      return index;
+    }
+  }
+  return null;
+}