@carto/api-client 0.5.15-alpha.raster-5 → 0.5.15

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

@@ -16,6 +16,7 @@ import {
   TEXT_NUMBER_FORMATTER,
   TEXT_LABEL_INDEX,
   TEXT_OUTLINE_OPACITY,
+  type D3Scale,
   type ScaleType,
 } from './layer-map.js';
 
@@ -31,38 +32,19 @@ 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[];
-
-  /** Domain of the user to construct d3 scale */
-  scaleDomain?: string[] | number[];
-  range?: string[] | number[];
+  range: string[] | number[];
+  type: ScaleType;
 };
 
-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: Scales;
+  scales: Record<ScaleKey, Scale>;
 };
 
 export type ParseMapResult = {
@@ -86,62 +68,13 @@ 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 mapConfig = keplerMapConfig.config as KeplerMapConfig;
-  const {mapState, mapStyle, popupSettings, legendSettings, visState} =
-    mapConfig;
-  const {layers} = visState;
+  const config = keplerMapConfig.config as KeplerMapConfig;
+  const {filters, mapState, mapStyle, popupSettings, legendSettings} = config;
+  const {layers, layerBlending, interactionConfig} = config.visState;
 
-  const layersReverse = [...layers].reverse();
   return {
     id: json.id,
     title: json.title,
@@ -154,24 +87,57 @@ export function parseMap(json: any) {
     popupSettings,
     legendSettings,
     token,
-    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;
-      }
-    }),
+    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;
+        }
+      }),
   };
 }
 
@@ -238,7 +204,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] as number;
+      const opacity = config.visConfig[opacityKey as keyof VisConfig];
       color[3] = opacityToAlpha(opacity);
       result[colorAccessor] = color;
     }
@@ -250,75 +216,62 @@ 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: TilejsonResult,
+  data: any,
   dataset: Dataset
-): {
-  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
-        },
-      };
-    }
-  }
+): {channelProps: Record<string, any>; scales: Record<ScaleKey, Scale>} {
+  const {
+    colorField,
+    colorScale,
+    radiusField,
+    radiusScale,
+    strokeColorField,
+    strokeColorScale,
+    weightField,
+  } = visualChannels;
+  const {heightField, heightScale} = visualChannels;
   const {textLabel, visConfig} = config;
   const result: Record<string, any> = {};
-  const updateTriggers: Record<string, any> = {};
 
   const scales: Record<string, Scale> = {};
 
-  // 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 (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;
   }
 
   if (layerType === 'clusterTile') {
@@ -335,8 +288,6 @@ function createChannelProps(
       return d.properties[aggregationExpAlias];
     };
 
-    updateTriggers.getWeight = aggregationExpAlias;
-
     result.getPointRadius = (d: any, info: any) => {
       return calculateClusterRadius(
         d.properties,
@@ -345,10 +296,6 @@ function createChannelProps(
         aggregationExpAlias
       );
     };
-    updateTriggers.getPointRadius = {
-      aggregationExpAlias,
-      radiusRange: visConfig.radiusRange,
-    };
 
     result.textCharacterSet = 'auto';
     result.textFontFamily = 'Inter, sans';
@@ -358,8 +305,6 @@ 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[]),
@@ -377,122 +322,73 @@ function createChannelProps(
       );
       return calculateClusterTextFontSize(radius);
     };
-
-    updateTriggers.getTextSize = {
-      aggregationExpAlias,
-      radiusRange: visConfig.radiusRange,
-    };
-  }
-
-  // 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,
-      };
-    }
   }
 
-  // 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 (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),
+    };
   }
 
-  // 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,
-      };
-    }
+  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),
+    };
   }
-
-  // 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,
-      };
-    }
+  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),
+    };
   }
 
-  // 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 (weightField) {
+    const {accessor, scale} = getSizeAccessor(
+      weightField,
+      undefined,
+      visConfig.weightAggregation,
+      undefined,
+      data
+    );
+    result.getWeight = accessor;
+    scales.weight = {
+      field: weightField,
+      type: 'identity',
+      ...domainAndRangeFromScale(scale),
+    };
   }
 
   if (visConfig.customMarkers) {
@@ -511,12 +407,6 @@ function createChannelProps(
       {fallbackUrl: customMarkersUrl, maxIconSize, useMaskedIcons},
       data
     );
-    updateTriggers.getIcon = {
-      customMarkersUrl,
-      customMarkersRange,
-      maxIconSize,
-      useMaskedIcons,
-    };
     result._subLayerProps = {
       'points-icon': {
         loadOptions: {
@@ -534,12 +424,10 @@ function createChannelProps(
 
     if (getFillColor && useMaskedIcons) {
       result.getIconColor = getFillColor;
-      updateTriggers.getIconColor = updateTriggers.getFillColor;
     }
 
     if (getPointRadius) {
       result.getIconSize = getPointRadius;
-      updateTriggers.getIconSize = updateTriggers.getPointRadius;
     }
 
     if (visualChannels.rotationField) {
@@ -551,7 +439,6 @@ function createChannelProps(
         data
       );
       result.getIconAngle = negateAccessor(accessor);
-      updateTriggers.getIconAngle = updateTriggers.getRotationField;
     }
   } else if (layerType === 'tileset') {
     result.pointType = 'circle';
@@ -607,13 +494,7 @@ function createChannelProps(
     };
   }
 
-  return {
-    channelProps: {
-      ...result,
-      updateTriggers,
-    },
-    scales,
-  };
+  return {channelProps: result, scales};
 }
 
 function createLoadOptions(accessToken: string) {

package/src/fetch-map/types.ts

@@ -39,7 +39,6 @@ export type ColorRange = {
   colorMap: string[][] | undefined;
   name: string;
   type: string;
-  uiCustomScaleType?: 'logarithmic';
 };
 
 export type CustomMarkersRange = {
@@ -50,20 +49,12 @@ export type CustomMarkersRange = {
   othersMarker?: string;
 };
 
-export type ColorBand = 'red' | 'green' | 'blue' | 'alpha';
-
-export type RasterLayerConfigColorBand = {
-  band: ColorBand;
-  type: 'none' | 'band' | 'expression';
-  value: string; // band name or expression
-};
-
 export type VisConfig = {
   filled?: boolean;
   opacity?: number;
   enable3d?: boolean;
 
-  colorAggregation?: string;
+  colorAggregation?: any;
   colorRange: ColorRange;
 
   customMarkers?: boolean;
@@ -73,26 +64,21 @@ export type VisConfig = {
   radius: number;
   radiusRange?: number[];
 
-  sizeAggregation?: string;
-  sizeRange?: number[];
+  sizeAggregation?: any;
+  sizeRange?: any;
 
-  strokeColorAggregation?: string;
+  strokeColorAggregation?: any;
   strokeOpacity?: number;
   strokeColorRange?: ColorRange;
 
-  heightRange?: number[];
-  heightAggregation?: string;
+  heightRange?: any;
+  heightAggregation?: any;
 
-  weightAggregation?: string;
+  weightAggregation?: any;
 
   // type = clusterTile
   clusterLevel?: number;
   isTextVisible?: boolean;
-
-  rasterStyleType?: 'Rgb' | 'ColorRange' | 'UniqueValues';
-  colorBands?: RasterLayerConfigColorBand[];
-
-  uniqueValuesColorRange?: ColorRange;
 };
 
 export type TextLabel = {

package/src/fetch-map/utils.ts

@@ -85,59 +85,3 @@ export function formatDate(value: string | number | Date): string {
 export function formatTimestamp(value: string | number | Date): string {
   return String(Math.floor(new Date(value).getTime() / 1000));
 }
-
-function roundedPow10(exp: number) {
-  // Math.pow(10, less than 4) generates "0.0...009999999999999999" instead of "0.0...01"
-  // round it ...
-  const raw = Math.pow(10, exp);
-  if (exp < 0) {
-    const shift = Math.pow(10, -exp);
-    return Math.round(raw * shift) / shift;
-  }
-  return raw;
-}
-
-/**
- * Create domain for D3 threshold scale with logarithmic steps.
- *
- * If min is 0, it starts with max and goes down to fill color scale.
- * If max is Infinity, it starts with 10 and goes up to fill color scale.
- * Othersise it starts on first power of 10 that is greater than min.
- *
- * Generates `steps-1` entries, as this is what d3 threshold scale expects
- *
- * @see https://d3js.org/d3-scale/threshold
- */
-export function getLog10ScaleSteps({
-  min,
-  max,
-  steps,
-}: {
-  min: number;
-  max: number;
-  steps: number;
-}): number[] {
-  if (min === 0) {
-    if (max === Infinity) {
-      // count aggregations have [0, Infinity]
-      // that will yield [10, 100, 1000, ...]
-      return [...Array(steps - 1)].map((_v, i) => roundedPow10(i + 1));
-    }
-    // if stats.min = 0, we only can attempt to start from max and decrease powers until
-    // we use all color buckets ...
-    const maxLog = Math.log10(max);
-    const endExponent = Math.ceil(maxLog);
-    const startExponent = endExponent - steps + 1;
-    return [...Array(steps - 1)].map((_v, i) =>
-      roundedPow10(startExponent + i)
-    );
-  } else {
-    const minLog = Math.log10(min);
-    const startExponent =
-      Math.ceil(minLog) === minLog ? minLog + 1 : Math.ceil(minLog);
-
-    return [...Array(steps - 1)].map((_v, i) =>
-      roundedPow10(startExponent + i)
-    );
-  }
-}