@carto/api-client 0.5.16 → 0.5.18-alpha.colormapfix-1

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

@@ -16,7 +16,6 @@ import {
   TEXT_NUMBER_FORMATTER,
   TEXT_LABEL_INDEX,
   TEXT_OUTLINE_OPACITY,
-  type D3Scale,
   type ScaleType,
 } from './layer-map.js';
 
@@ -32,19 +31,38 @@ 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 = {
+  type: ScaleType;
   field: VisualChannelField;
+
+  /** Natural domain of the scale, as defined by the data  */
   domain: string[] | number[];
-  range: string[] | number[];
-  type: ScaleType;
+
+  /** Domain of the user to construct d3 scale */
+  scaleDomain?: string[] | number[];
+  range?: string[] | number[];
 };
 
+export type ScaleKey =
+  | 'fillColor'
+  | 'pointRadius'
+  | 'lineColor'
+  | 'elevation'
+  | 'weight';
+
+export type Scales = Partial<Record<ScaleKey, Scale>>;
+
 export type LayerDescriptor = {
   type: LayerType;
   props: Record<string, any>;
   filters?: Filters;
-  scales: Record<ScaleKey, Scale>;
+  scales: Scales;
 };
 
 export type ParseMapResult = {
@@ -68,13 +86,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 +154,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;
+      }
+    }),
   };
 }
 
@@ -204,7 +238,7 @@ function createStyleProps(config: MapLayerConfig, mapping: any) {
     if (Array.isArray(result[colorAccessor])) {
       const color = [...result[colorAccessor]];
       const opacityKey = OPACITY_MAP[colorAccessor];
-      const opacity = config.visConfig[opacityKey as keyof VisConfig];
+      const opacity = config.visConfig[opacityKey as keyof VisConfig] as number;
       color[3] = opacityToAlpha(opacity);
       result[colorAccessor] = color;
     }
@@ -216,62 +250,75 @@ function createStyleProps(config: MapLayerConfig, mapping: any) {
   return result;
 }
 
-function domainAndRangeFromScale(
-  scale: D3Scale
-): Pick<Scale, 'domain' | 'range'> {
-  return {
-    domain: scale.domain(),
-    range: scale.range(),
-  };
-}
-
-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>} {
-  const {
-    colorField,
-    colorScale,
-    radiusField,
-    radiusScale,
-    strokeColorField,
-    strokeColorScale,
-    weightField,
-  } = visualChannels;
-  const {heightField, heightScale} = visualChannels;
+): {
+  channelProps: Record<string, any>;
+  scales: Partial<Record<ScaleKey, Scale>>;
+} {
+  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: {}, // TODO
+      };
+    } else {
+      return {
+        channelProps: getRasterTileLayerStylePropsScaledBand({
+          layerConfig: config,
+          visualChannels,
+          rasterMetadata,
+        }),
+        scales: {
+          // TODO
+        },
+      };
+    }
+  }
   const {textLabel, visConfig} = config;
   const result: Record<string, any> = {};
+  const updateTriggers: Record<string, any> = {};
 
   const scales: Record<string, Scale> = {};
 
-  if (colorField) {
-    const {colorAggregation: aggregation, colorRange: range} = visConfig;
-    const {accessor, scale} = getColorAccessor(
-      colorField,
-      colorScale!,
-      {aggregation, range},
-      visConfig.opacity,
-      data
-    );
-    result.getFillColor = accessor;
-    scales.fillColor = {
-      field: colorField,
-      type: colorScale!,
-      ...domainAndRangeFromScale(scale),
-    };
-  } else if (visConfig.filled) {
-    scales.fillColor = {} as any;
+  // fill color
+  {
+    const {colorField, colorScale} = visualChannels;
+    const {colorRange, colorAggregation} = visConfig;
+    if (colorField && colorScale && colorRange) {
+      const {accessor, ...scaleProps} = getColorAccessor(
+        colorField,
+        colorScale,
+        {aggregation: colorAggregation, range: colorRange},
+        visConfig.opacity,
+        data
+      );
+      result.getFillColor = accessor;
+      scales.fillColor = updateTriggers.getFillColor = {
+        field: colorField,
+        type: colorScale,
+        ...scaleProps,
+      };
+    } else {
+      scales.fillColor = {} as any;
+    }
   }
 
   if (layerType === 'clusterTile') {
@@ -288,6 +335,8 @@ function createChannelProps(
       return d.properties[aggregationExpAlias];
     };
 
+    updateTriggers.getWeight = aggregationExpAlias;
+
     result.getPointRadius = (d: any, info: any) => {
       return calculateClusterRadius(
         d.properties,
@@ -296,6 +345,10 @@ function createChannelProps(
         aggregationExpAlias
       );
     };
+    updateTriggers.getPointRadius = {
+      aggregationExpAlias,
+      radiusRange: visConfig.radiusRange,
+    };
 
     result.textCharacterSet = 'auto';
     result.textFontFamily = 'Inter, sans';
@@ -305,6 +358,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,73 +377,122 @@ function createChannelProps(
       );
       return calculateClusterTextFontSize(radius);
     };
-  }
 
-  if (radiusField) {
-    const {accessor, scale} = getSizeAccessor(
-      radiusField,
-      radiusScale,
-      visConfig.sizeAggregation,
-      visConfig.radiusRange || visConfig.sizeRange,
-      data
-    );
-    result.getPointRadius = accessor;
-    scales.pointRadius = {
-      field: radiusField,
-      type: radiusScale || 'identity',
-      ...domainAndRangeFromScale(scale),
+    updateTriggers.getTextSize = {
+      aggregationExpAlias,
+      radiusRange: visConfig.radiusRange,
     };
   }
 
-  if (strokeColorField) {
-    const opacity =
-      visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
-    const {strokeColorAggregation: aggregation, strokeColorRange: range} =
-      visConfig;
-    const {accessor, scale} = getColorAccessor(
-      strokeColorField,
-      strokeColorScale!,
-      {aggregation, range},
-      opacity,
-      data
-    );
-    result.getLineColor = accessor;
-    scales.lineColor = {
-      field: strokeColorField,
-      type: strokeColorScale!,
-      ...domainAndRangeFromScale(scale),
-    };
+  // point radius
+  {
+    const radiusRange = visConfig.radiusRange;
+    const {radiusField, radiusScale} = visualChannels;
+    if (radiusField && radiusRange && radiusScale) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        radiusField,
+        radiusScale,
+        visConfig.sizeAggregation,
+        radiusRange,
+        data
+      );
+      result.getPointRadius = accessor;
+      scales.pointRadius = updateTriggers.getPointRadius = {
+        field: radiusField,
+        type: radiusScale,
+        ...scaleProps,
+      };
+    }
   }
-  if (heightField && visConfig.enable3d) {
-    const {accessor, scale} = getSizeAccessor(
-      heightField,
-      heightScale,
-      visConfig.heightAggregation,
-      visConfig.heightRange || visConfig.sizeRange,
-      data
-    );
-    result.getElevation = accessor;
-    scales.elevation = {
-      field: heightField,
-      type: heightScale || 'identity',
-      ...domainAndRangeFromScale(scale),
-    };
+
+  // stroke/ouline color
+  {
+    const strokeColorRange = visConfig.strokeColorRange;
+    const {strokeColorScale, strokeColorField} = visualChannels;
+    if (strokeColorField && strokeColorRange && strokeColorScale) {
+      const {strokeColorAggregation: aggregation} = visConfig;
+      const opacity =
+        visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
+
+      const {accessor, ...scaleProps} = getColorAccessor(
+        strokeColorField,
+        strokeColorScale,
+        {aggregation, range: strokeColorRange},
+        opacity,
+        data
+      );
+      result.getLineColor = accessor;
+      scales.lineColor = updateTriggers.getLineColor = {
+        field: strokeColorField,
+        type: strokeColorScale,
+        ...scaleProps,
+      };
+    }
   }
 
-  if (weightField) {
-    const {accessor, scale} = getSizeAccessor(
-      weightField,
-      undefined,
-      visConfig.weightAggregation,
-      undefined,
-      data
-    );
-    result.getWeight = accessor;
-    scales.weight = {
-      field: weightField,
-      type: 'identity',
-      ...domainAndRangeFromScale(scale),
-    };
+  // stroke/line width
+  {
+    const {sizeField: strokeWidthField, sizeScale: strokeWidthScale} =
+      visualChannels;
+    const {sizeRange, sizeAggregation} = visConfig;
+
+    if (strokeWidthField && sizeRange) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        strokeWidthField,
+        strokeWidthScale,
+        sizeAggregation,
+        sizeRange,
+        data
+      );
+      result.getLineWidth = accessor;
+      scales.lineWidth = updateTriggers.getLineWidth = {
+        field: strokeWidthField,
+        type: strokeWidthScale || 'identity',
+        ...scaleProps,
+      };
+    }
+  }
+
+  // height / elevation
+  {
+    const {enable3d, heightRange} = visConfig;
+    const {heightField, heightScale} = visualChannels;
+    if (heightField && heightRange && enable3d) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        heightField,
+        heightScale,
+        visConfig.heightAggregation,
+        heightRange,
+        data
+      );
+      result.getElevation = accessor;
+      scales.elevation = updateTriggers.getElevation = {
+        field: heightField,
+        type: heightScale || 'identity',
+        ...scaleProps,
+      };
+    }
+  }
+
+  // weight
+  {
+    const {weightField} = visualChannels;
+    const {weightAggregation} = visConfig;
+    if (weightField && weightAggregation) {
+      const {accessor, ...scaleProps} = getSizeAccessor(
+        weightField,
+        undefined,
+        weightAggregation,
+        undefined,
+        data
+      );
+      result.getWeight = accessor;
+      scales.weight = updateTriggers.getWeight = {
+        field: weightField,
+        type: 'identity' as ScaleType,
+        ...scaleProps,
+      };
+    }
   }
 
   if (visConfig.customMarkers) {
@@ -407,6 +511,12 @@ function createChannelProps(
       {fallbackUrl: customMarkersUrl, maxIconSize, useMaskedIcons},
       data
     );
+    updateTriggers.getIcon = {
+      customMarkersUrl,
+      customMarkersRange,
+      maxIconSize,
+      useMaskedIcons,
+    };
     result._subLayerProps = {
       'points-icon': {
         loadOptions: {
@@ -424,10 +534,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 +551,7 @@ function createChannelProps(
         data
       );
       result.getIconAngle = negateAccessor(accessor);
+      updateTriggers.getIconAngle = updateTriggers.getRotationField;
     }
   } else if (layerType === 'tileset') {
     result.pointType = 'circle';
@@ -494,7 +607,13 @@ function createChannelProps(
     };
   }
 
-  return {channelProps: result, scales};
+  return {
+    channelProps: {
+      ...result,
+      updateTriggers,
+    },
+    scales,
+  };
 }
 
 function createLoadOptions(accessToken: string) {