@carto/api-client 0.5.14 → 0.5.15-alpha.raster-1

package/package.json

@@ -8,7 +8,7 @@
   "homepage": "https://github.com/CartoDB/carto-api-client#readme",
   "author": "Don McCurdy <donmccurdy@carto.com>",
   "packageManager": "yarn@4.3.1",
-  "version": "0.5.14",
+  "version": "0.5.15-alpha.raster-1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -71,6 +71,7 @@
     "d3-format": "^3.1.0",
     "d3-scale": "^4.0.2",
     "h3-js": "^4.1.0",
+    "jsep": "^1.4.0",
     "quadbin": "^0.4.1-alpha.0"
   },
   "devDependencies": {
@@ -131,5 +132,6 @@
   "resolutions": {
     "@carto/api-client": "portal:./",
     "rollup": "^4.20.0"
-  }
+  },
+  "stableVersion": "0.5.14"
 }

package/src/fetch-map/basemap-styles.ts

@@ -92,7 +92,7 @@ export const STYLE_LAYER_GROUPS: StyleLayerGroup[] = [
 ];
 
 export function applyLayerGroupFilters(
-  style: any,
+  style: any, // this Maplibre/Mapbox style, we don't want to add a dependency on Maplibre
   visibleLayerGroups: Record<StyleLayerGroupSlug, boolean>
 ) {
   if (!Array.isArray(style?.layers)) {

package/src/fetch-map/index.ts

@@ -1,4 +1,8 @@
-export {default as BASEMAP} from './basemap-styles.js';
+export {
+  default as BASEMAP,
+  applyLayerGroupFilters as _applyLayerGroupFilters,
+} from './basemap-styles.js';
+export {getRasterTileLayerStyleProps as _getRasterTileLayerStyleProps} from './raster-layer.js';
 export {fetchMap} from './fetch-map.js';
 export type {FetchMapOptions, FetchMapResult} from './fetch-map.js';
 export type {

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

@@ -28,6 +28,7 @@ import {
   scaleIdentity,
 } from './utils.js';
 import type {
+  ColorRange,
   CustomMarkersRange,
   Dataset,
   MapLayerConfig,
@@ -38,6 +39,7 @@ import type {
 import type {ProviderType, SchemaField} from '../types.js';
 import {DEFAULT_AGGREGATION_EXP_ALIAS} from '../constants-internal.js';
 import {AggregationTypes} from '../constants.js';
+import type {Attribute, TilejsonResult} from '../sources/types.js';
 
 export type D3Scale = {
   domain: (d?: any) => any[];
@@ -113,6 +115,13 @@ const sharedPropMap = {
   },
 };
 
+const rasterPropsMap = {
+  isVisible: 'visible',
+  visConfig: {
+    opacity: 'opacity',
+  },
+};
+
 const customMarkersPropsMap = {
   color: 'getIconColor',
   visConfig: {
@@ -174,6 +183,13 @@ export function getLayerProps(
     );
   }
 
+  if (type === 'raster') {
+    return {
+      propMap: rasterPropsMap,
+      defaultProps: {},
+    };
+  }
+
   let basePropMap: any = sharedPropMap;
   if (config.visConfig?.customMarkers) {
     basePropMap = mergePropMaps(basePropMap, customMarkersPropsMap);
@@ -195,18 +211,21 @@ export function getLayerProps(
 }
 
 function domainFromAttribute(
-  attribute: any,
+  attribute: Attribute,
   scaleType: ScaleType,
   scaleLength: number
-) {
+): number[] | string[] {
   if (scaleType === 'ordinal' || scaleType === 'point') {
+    if (!attribute.categories) {
+      return [0, 1];
+    }
     return attribute.categories
       .map((c: any) => c.category)
       .filter((c: any) => c !== undefined && c !== null);
   }
 
   if (scaleType === 'quantile' && attribute.quantiles) {
-    return attribute.quantiles.global
+    return 'global' in attribute.quantiles
       ? attribute.quantiles.global[scaleLength]
       : attribute.quantiles[scaleLength];
   }
@@ -215,7 +234,7 @@ function domainFromAttribute(
   if (scaleType === 'log' && min === 0) {
     min = 1e-5;
   }
-  return [min, attribute.max];
+  return [min ?? 0, attribute.max ?? 1];
 }
 
 function domainFromValues(values: any, scaleType: ScaleType) {
@@ -235,8 +254,8 @@ function domainFromValues(values: any, scaleType: ScaleType) {
 }
 
 function calculateDomain(
-  data: any,
-  name: any,
+  data: TilejsonResult,
+  name: string,
   scaleType: ScaleType,
   scaleLength?: number
 ) {
@@ -244,14 +263,16 @@ function calculateDomain(
     // Tileset data type
     const {attributes} = data.tilestats.layers[0];
     const attribute = attributes.find((a: any) => a.attribute === name);
-    return domainFromAttribute(attribute, scaleType, scaleLength as number);
+    if (attribute) {
+      return domainFromAttribute(attribute, scaleType, scaleLength as number);
+    }
   }
 
   return [0, 1];
 }
 
 function normalizeAccessor(accessor: any, data: any) {
-  if (data.features || data.tilestats) {
+  if (data.features || data.tilestats || data.raster_metadata) {
     return (object: any, info: any) => {
       if (object) {
         return accessor(object.properties || object.__source.object.properties);
@@ -299,7 +320,7 @@ export function getColorAccessor(
   scaleType: ScaleType,
   {aggregation, range}: {aggregation: string; range: any},
   opacity: number | undefined,
-  data: any
+  data: TilejsonResult
 ): {accessor: any; scale: any} {
   const scale = calculateLayerScale(
     colorColumn || name,
@@ -321,14 +342,13 @@ export function getColorAccessor(
   return {accessor: normalizeAccessor(accessor, data), scale};
 }
 
-function calculateLayerScale(
-  name: any,
+export function calculateLayerScale(
+  name: string,
   scaleType: ScaleType,
-  range: any,
-  data: any
+  range: ColorRange,
+  data: TilejsonResult
 ) {
-  const scale = SCALE_FUNCS[scaleType]();
-  let domain: (string | number)[] = [];
+  let domain: string[] | number[] = [];
   let scaleColor: string[] = [];
 
   if (scaleType !== 'identity') {
@@ -336,7 +356,7 @@ function calculateLayerScale(
 
     if (Array.isArray(colorMap)) {
       colorMap.forEach(([value, color]) => {
-        domain.push(value);
+        (domain as string[]).push(value);
         scaleColor.push(color);
       });
     } else {
@@ -349,9 +369,19 @@ function calculateLayerScale(
     }
   }
 
+  return createColorScale(scaleType, domain, scaleColor, UNKNOWN_COLOR);
+}
+
+export function createColorScale<T>(
+  scaleType: ScaleType,
+  domain: string[] | number[],
+  range: T[],
+  unknown: T
+) {
+  const scale = SCALE_FUNCS[scaleType]();
   scale.domain(domain);
-  scale.range(scaleColor);
-  scale.unknown!(UNKNOWN_COLOR);
+  scale.range(range);
+  scale.unknown!(unknown as any);
 
   return scale;
 }
@@ -428,7 +458,7 @@ export function getSizeAccessor(
   scaleType: ScaleType | undefined,
   aggregation: string | null | undefined,
   range: Iterable<Range> | null | undefined,
-  data: any
+  data: TilejsonResult
 ): {accessor: any; scale: any} {
   const scale = scaleType ? SCALE_FUNCS[scaleType]() : identity;
   if (scaleType) {

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

@@ -32,6 +32,11 @@ import type {
   VisualChannelField,
 } from './types.js';
 import {isRemoteCalculationSupported} from './utils.js';
+import {
+  getRasterTileLayerStylePropsRgb,
+  getRasterTileLayerStylePropsScaledBand,
+} from './raster-layer.js';
+import type {TilejsonResult} from '../sources/types.js';
 
 export type Scale = {
   field: VisualChannelField;
@@ -40,11 +45,18 @@ export type Scale = {
   type: ScaleType;
 };
 
+export type ScaleKey =
+  | 'fillColor'
+  | 'pointRadius'
+  | 'lineColor'
+  | 'elevation'
+  | 'weight';
+
 export type LayerDescriptor = {
   type: LayerType;
   props: Record<string, any>;
   filters?: Filters;
-  scales: Record<ScaleKey, Scale>;
+  scales: Partial<Record<ScaleKey, Scale>>;
 };
 
 export type ParseMapResult = {
@@ -68,13 +80,62 @@ export type ParseMapResult = {
   layers: LayerDescriptor[];
 };
 
+export function getLayerDescriptor({
+  mapConfig,
+  layer,
+  dataset,
+}: {
+  mapConfig: KeplerMapConfig;
+  layer: MapConfigLayer;
+  dataset: Dataset;
+}) {
+  const {filters, visState} = mapConfig;
+  const {layerBlending, interactionConfig} = visState;
+  const {id, type, config, visualChannels} = layer;
+  const {data, id: datasetId} = dataset;
+
+  const {propMap, defaultProps} = getLayerProps(type, config, dataset);
+
+  const styleProps = createStyleProps(config, propMap);
+
+  const {channelProps, scales} = createChannelProps(
+    id,
+    type,
+    config,
+    visualChannels,
+    data,
+    dataset
+  );
+  const layerDescriptor: LayerDescriptor = {
+    type,
+    filters:
+      isEmptyObject(filters) || isRemoteCalculationSupported(dataset)
+        ? undefined
+        : filters[datasetId],
+    props: {
+      id,
+      data,
+      ...defaultProps,
+      ...createInteractionProps(interactionConfig),
+      ...styleProps,
+      ...channelProps,
+      ...createParametersProp(layerBlending, styleProps.parameters || {}), // Must come after style
+      ...createLoadOptions(data.accessToken),
+    },
+    scales,
+  };
+  return 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, legendSettings} = config;
-  const {layers, layerBlending, interactionConfig} = config.visState;
+  const mapConfig = keplerMapConfig.config as KeplerMapConfig;
+  const {mapState, mapStyle, popupSettings, legendSettings, visState} =
+    mapConfig;
+  const {layers} = visState;
 
+  const layersReverse = [...layers].reverse();
   return {
     id: json.id,
     title: json.title,
@@ -87,57 +148,24 @@ export function parseMap(json: any) {
     popupSettings,
     legendSettings,
     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 {channelProps, scales} = createChannelProps(
-            id,
-            type,
-            config,
-            visualChannels,
-            data,
-            dataset
-          );
-          const layer: LayerDescriptor = {
-            type,
-            filters:
-              isEmptyObject(filters) || isRemoteCalculationSupported(dataset)
-                ? undefined
-                : filters[dataId],
-            props: {
-              id,
-              data,
-              ...defaultProps,
-              ...createInteractionProps(interactionConfig),
-              ...styleProps,
-              ...channelProps,
-              ...createParametersProp(
-                layerBlending,
-                styleProps.parameters || {}
-              ), // Must come after style
-              ...createLoadOptions(token),
-            },
-            scales,
-          };
-          return layer;
-        } catch (e: any) {
-          console.error(e.message);
-          return undefined;
-        }
-      }),
+    layers: layersReverse.map((layer: MapConfigLayer) => {
+      try {
+        const {dataId} = layer.config;
+        const dataset: Dataset | null = datasets.find(
+          (d: any) => d.id === dataId
+        );
+        assert(dataset, `No dataset matching dataId: ${dataId}`);
+        const layerDescriptor = getLayerDescriptor({
+          mapConfig,
+          layer,
+          dataset,
+        });
+        return layerDescriptor;
+      } catch (e: any) {
+        console.error(e.message);
+        return undefined;
+      }
+    }),
   };
 }
 
@@ -225,21 +253,17 @@ function domainAndRangeFromScale(
   };
 }
 
-export type ScaleKey =
-  | 'fillColor'
-  | 'pointRadius'
-  | 'lineColor'
-  | 'elevation'
-  | 'weight';
-
 function createChannelProps(
   id: string,
   layerType: LayerType,
   config: MapLayerConfig,
   visualChannels: VisualChannels,
-  data: any,
+  data: TilejsonResult,
   dataset: Dataset
-): {channelProps: Record<string, any>; scales: Record<ScaleKey, Scale>} {
+): {
+  channelProps: Record<string, any>;
+  scales: Partial<Record<ScaleKey, Scale>>;
+} {
   const {
     colorField,
     colorScale,
@@ -247,11 +271,52 @@ function createChannelProps(
     radiusScale,
     strokeColorField,
     strokeColorScale,
+    sizeField: strokeWidthField,
+    sizeScale: strokeWidthScale,
     weightField,
   } = visualChannels;
+  if (layerType === 'raster') {
+    const rasterMetadata = data.raster_metadata;
+    if (!rasterMetadata) {
+      return {
+        channelProps: {},
+        scales: {},
+      };
+    }
+    const rasterStyleType = config.visConfig.rasterStyleType;
+    if (rasterStyleType === 'Rgb') {
+      return {
+        channelProps: getRasterTileLayerStylePropsRgb({
+          layerConfig: config,
+          rasterMetadata,
+          visualChannels,
+        }),
+        scales: {},
+      };
+    } else {
+      return {
+        channelProps: getRasterTileLayerStylePropsScaledBand({
+          layerConfig: config,
+          visualChannels,
+          rasterMetadata,
+        }),
+        scales: {
+          ...(colorField && {
+            fillColor: {
+              field: colorField,
+              type: 'ordinal',
+              domain: [],
+              range: [],
+            },
+          }),
+        },
+      };
+    }
+  }
   const {heightField, heightScale} = visualChannels;
   const {textLabel, visConfig} = config;
   const result: Record<string, any> = {};
+  const updateTriggers: Record<string, any> = {};
 
   const scales: Record<string, Scale> = {};
 
@@ -265,7 +330,7 @@ function createChannelProps(
       data
     );
     result.getFillColor = accessor;
-    scales.fillColor = {
+    scales.fillColor = updateTriggers.getFillColor = {
       field: colorField,
       type: colorScale!,
       ...domainAndRangeFromScale(scale),
@@ -288,6 +353,8 @@ function createChannelProps(
       return d.properties[aggregationExpAlias];
     };
 
+    updateTriggers.getWeight = aggregationExpAlias;
+
     result.getPointRadius = (d: any, info: any) => {
       return calculateClusterRadius(
         d.properties,
@@ -296,6 +363,10 @@ function createChannelProps(
         aggregationExpAlias
       );
     };
+    updateTriggers.getPointRadius = {
+      aggregationExpAlias,
+      radiusRange: visConfig.radiusRange,
+    };
 
     result.textCharacterSet = 'auto';
     result.textFontFamily = 'Inter, sans';
@@ -305,6 +376,8 @@ function createChannelProps(
     result.getText = (d: any) =>
       TEXT_NUMBER_FORMATTER.format(d.properties[aggregationExpAlias]);
 
+    updateTriggers.getText = aggregationExpAlias;
+
     result.getTextColor = config.textLabel[TEXT_LABEL_INDEX].color;
     result.textOutlineColor = [
       ...(config.textLabel[TEXT_LABEL_INDEX].outlineColor as number[]),
@@ -322,6 +395,11 @@ function createChannelProps(
       );
       return calculateClusterTextFontSize(radius);
     };
+
+    updateTriggers.getTextSize = {
+      aggregationExpAlias,
+      radiusRange: visConfig.radiusRange,
+    };
   }
 
   if (radiusField) {
@@ -333,7 +411,7 @@ function createChannelProps(
       data
     );
     result.getPointRadius = accessor;
-    scales.pointRadius = {
+    scales.pointRadius = updateTriggers.getPointRadius = {
       field: radiusField,
       type: radiusScale || 'identity',
       ...domainAndRangeFromScale(scale),
@@ -353,12 +431,28 @@ function createChannelProps(
       data
     );
     result.getLineColor = accessor;
-    scales.lineColor = {
+    scales.lineColor = updateTriggers.getLineColor = {
       field: strokeColorField,
       type: strokeColorScale!,
       ...domainAndRangeFromScale(scale),
     };
   }
+  if (strokeWidthField) {
+    const {accessor, scale} = getSizeAccessor(
+      strokeWidthField,
+      strokeWidthScale,
+      visConfig.sizeAggregation,
+      visConfig.sizeRange,
+      data
+    );
+    result.getLineWidth = accessor;
+    scales.lineWidth = updateTriggers.getLineWidth = {
+      field: strokeWidthField,
+      type: strokeWidthScale || 'identity',
+      ...domainAndRangeFromScale(scale),
+    };
+  }
+
   if (heightField && visConfig.enable3d) {
     const {accessor, scale} = getSizeAccessor(
       heightField,
@@ -368,7 +462,7 @@ function createChannelProps(
       data
     );
     result.getElevation = accessor;
-    scales.elevation = {
+    scales.elevation = updateTriggers.getElevation = {
       field: heightField,
       type: heightScale || 'identity',
       ...domainAndRangeFromScale(scale),
@@ -384,9 +478,9 @@ function createChannelProps(
       data
     );
     result.getWeight = accessor;
-    scales.weight = {
+    scales.weight = updateTriggers.getWeight = {
       field: weightField,
-      type: 'identity',
+      type: 'identity' as ScaleType,
       ...domainAndRangeFromScale(scale),
     };
   }
@@ -407,6 +501,12 @@ function createChannelProps(
       {fallbackUrl: customMarkersUrl, maxIconSize, useMaskedIcons},
       data
     );
+    updateTriggers.getIcon = {
+      customMarkersUrl,
+      customMarkersRange,
+      maxIconSize,
+      useMaskedIcons,
+    };
     result._subLayerProps = {
       'points-icon': {
         loadOptions: {
@@ -424,10 +524,12 @@ function createChannelProps(
 
     if (getFillColor && useMaskedIcons) {
       result.getIconColor = getFillColor;
+      updateTriggers.getIconColor = updateTriggers.getFillColor;
     }
 
     if (getPointRadius) {
       result.getIconSize = getPointRadius;
+      updateTriggers.getIconSize = updateTriggers.getPointRadius;
     }
 
     if (visualChannels.rotationField) {
@@ -439,6 +541,7 @@ function createChannelProps(
         data
       );
       result.getIconAngle = negateAccessor(accessor);
+      updateTriggers.getIconAngle = updateTriggers.getRotationField;
     }
   } else if (layerType === 'tileset') {
     result.pointType = 'circle';
@@ -494,7 +597,13 @@ function createChannelProps(
     };
   }
 
-  return {channelProps: result, scales};
+  return {
+    channelProps: {
+      ...result,
+      updateTriggers,
+    },
+    scales,
+  };
 }
 
 function createLoadOptions(accessToken: string) {