@carto/kepler.gl 0.0.81 → 0.0.82

package/src/layers/icon-layer/icon-layer.js

@@ -1,324 +0,0 @@
-// Copyright (c) 2022 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import window from 'global/window';
-import {BrushingExtension} from '@deck.gl/extensions';
-
-import SvgIconLayer from 'deckgl-layers/svg-icon-layer/svg-icon-layer';
-import IconLayerIcon from './icon-layer-icon';
-import {ICON_FIELDS, CLOUDFRONT} from 'constants/default-settings';
-import IconInfoModalFactory from './icon-info-modal';
-import Layer from '../base-layer';
-import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
-
-const brushingExtension = new BrushingExtension();
-
-export const SVG_ICON_URL = `${CLOUDFRONT}/icons/svg-icons.json`;
-
-export const iconPosAccessor = ({lat, lng, altitude}) => dc => d => [
-  dc.valueAt(d.index, lng.fieldIdx),
-  dc.valueAt(d.index, lat.fieldIdx),
-  altitude?.fieldIdx > -1 ? dc.valueAt(d.index, altitude.fieldIdx) : 0
-];
-
-export const iconAccessor = ({icon}) => dc => d => dc.valueAt(d.index, icon.fieldIdx);
-
-export const iconRequiredColumns = ['lat', 'lng', 'icon'];
-export const iconOptionalColumns = ['altitude'];
-
-export const pointVisConfigs = {
-  radius: 'radius',
-  opacity: 'opacity',
-  colorRange: 'colorRange',
-  radiusRange: 'radiusRange'
-};
-
-function flatterIconPositions(icon) {
-  // had to flip y, since @luma modal has changed
-  return icon.mesh.cells.reduce((prev, cell) => {
-    cell.forEach(p => {
-      prev.push(
-        ...[icon.mesh.positions[p][0], -icon.mesh.positions[p][1], icon.mesh.positions[p][2]]
-      );
-    });
-    return prev;
-  }, []);
-}
-
-export default class IconLayer extends Layer {
-  constructor(props = {}) {
-    super(props);
-
-    this.registerVisConfig(pointVisConfigs);
-    this.getPositionAccessor = dataContainer => iconPosAccessor(this.config.columns)(dataContainer);
-    this.getIconAccessor = dataContainer => iconAccessor(this.config.columns)(dataContainer);
-
-    // prepare layer info modal
-    this._layerInfoModal = IconInfoModalFactory();
-    this.iconGeometry = props.iconGeometry || null;
-    this.getSvgIcons();
-  }
-
-  get type() {
-    return 'icon';
-  }
-
-  get requiredLayerColumns() {
-    return iconRequiredColumns;
-  }
-
-  get optionalColumns() {
-    return iconOptionalColumns;
-  }
-
-  get columnPairs() {
-    return this.defaultPointColumnPairs;
-  }
-
-  get layerIcon() {
-    return IconLayerIcon;
-  }
-
-  get visualChannels() {
-    return {
-      color: {
-        ...super.visualChannels.color,
-        accessor: 'getFillColor',
-        defaultValue: config => config.color
-      },
-      size: {
-        ...super.visualChannels.size,
-        property: 'radius',
-        range: 'radiusRange',
-        channelScaleType: 'radius',
-        accessor: 'getRadius',
-        defaultValue: 1
-      }
-    };
-  }
-
-  get layerInfoModal() {
-    return {
-      id: 'iconInfo',
-      template: this._layerInfoModal,
-      modalProps: {
-        title: 'modal.iconInfo.title'
-      }
-    };
-  }
-
-  getSvgIcons() {
-    const fetchConfig = {
-      method: 'GET',
-      mode: 'cors',
-      cache: 'no-cache'
-    };
-
-    if (window.fetch) {
-      window
-        .fetch(SVG_ICON_URL, fetchConfig)
-        .then(response => response.json())
-        .then((parsed = {}) => {
-          const {svgIcons = []} = parsed;
-          this.iconGeometry = svgIcons.reduce(
-            (accu, curr) => ({
-              ...accu,
-              [curr.id]: flatterIconPositions(curr)
-            }),
-            {}
-          );
-
-          this._layerInfoModal = IconInfoModalFactory(svgIcons);
-        });
-    }
-  }
-
-  static findDefaultLayerProps({fieldPairs = [], fields = []}) {
-    const notFound = {props: []};
-    if (!fieldPairs.length || !fields.length) {
-      return notFound;
-    }
-
-    const iconFields = fields.filter(({name}) =>
-      name
-        .replace(/[_,.]+/g, ' ')
-        .trim()
-        .split(' ')
-        .some(seg => ICON_FIELDS.icon.some(t => t.includes(seg)))
-    );
-
-    if (!iconFields.length) {
-      return notFound;
-    }
-
-    // create icon layers for first point pair
-    const ptPair = fieldPairs[0];
-
-    const props = iconFields.map(iconField => ({
-      label: iconField.name.replace(/[_,.]+/g, ' ').trim(),
-      columns: {
-        lat: ptPair.pair.lat,
-        lng: ptPair.pair.lng,
-        icon: {
-          value: iconField.name,
-          fieldIdx: iconField.fieldIdx
-        }
-      },
-      isVisible: true
-    }));
-
-    return {props};
-  }
-
-  calculateDataAttribute({dataContainer, filteredIndex}, getPosition) {
-    const getIcon = this.getIconAccessor(dataContainer);
-    const data = [];
-
-    for (let i = 0; i < filteredIndex.length; i++) {
-      const index = filteredIndex[i];
-      const rowIndex = {index};
-      const pos = getPosition(rowIndex);
-      const icon = getIcon(rowIndex);
-
-      // if doesn't have point lat or lng, do not add the point
-      // deck.gl can't handle position = null
-      if (pos.every(Number.isFinite) && typeof icon === 'string') {
-        data.push({
-          index,
-          icon
-        });
-      }
-    }
-
-    return data;
-  }
-
-  formatLayerData(datasets, oldLayerData) {
-    const {textLabel} = this.config;
-    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
-
-    const getPosition = this.getPositionAccessor(dataContainer);
-
-    const {data, triggerChanged} = this.updateData(datasets, oldLayerData);
-
-    // get all distinct characters in the text labels
-    const textLabels = formatTextLabelData({
-      textLabel,
-      triggerChanged,
-      oldLayerData,
-      data,
-      dataContainer
-    });
-
-    const accessors = this.getAttributeAccessors({dataContainer});
-
-    return {
-      data,
-      getPosition,
-      getFilterValue: gpuFilter.filterValueAccessor(dataContainer)(),
-      textLabels,
-      ...accessors
-    };
-  }
-
-  updateLayerMeta(dataContainer, getPosition) {
-    const bounds = this.getPointsBounds(dataContainer, getPosition);
-    this.updateMeta({bounds});
-  }
-
-  renderLayer(opts) {
-    const {data, gpuFilter, objectHovered, interactionConfig} = opts;
-
-    const radiusScale = this.getRadiusScale();
-    const layerProps = {radiusScale, radiusUnits: 'pixels', radiusMaxPixels: 500};
-
-    const updateTriggers = {
-      getPosition: this.config.columns,
-      getFilterValue: gpuFilter.filterValueUpdateTriggers,
-      ...this.getVisualChannelUpdateTriggers()
-    };
-
-    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
-    const brushingProps = this.getBrushingExtensionProps(interactionConfig);
-    const getPixelOffset = getTextOffsetByRadius(radiusScale, data.getRadius);
-    const extensions = [...defaultLayerProps.extensions, brushingExtension];
-
-    // shared Props between layer and label layer
-    const sharedProps = {
-      getFilterValue: data.getFilterValue,
-      extensions,
-      filterRange: defaultLayerProps.filterRange,
-      ...brushingProps
-    };
-
-    const labelLayers = [
-      ...this.renderTextLabelLayer(
-        {
-          getPosition: data.getPosition,
-          sharedProps,
-          getPixelOffset,
-          updateTriggers
-        },
-        opts
-      )
-    ];
-    const hoveredObject = this.hasHoveredObject(objectHovered);
-
-    const parameters = {
-      // icons will be flat on the map when the altitude column is not used
-      depthTest: this.config.columns.altitude?.fieldIdx > -1
-    };
-
-    return !this.iconGeometry
-      ? []
-      : [
-          new SvgIconLayer({
-            ...defaultLayerProps,
-            ...brushingProps,
-            ...layerProps,
-            ...data,
-            parameters,
-            getIconGeometry: id => this.iconGeometry[id],
-
-            // update triggers
-            updateTriggers,
-            extensions
-          }),
-
-          ...(hoveredObject
-            ? [
-                new SvgIconLayer({
-                  ...this.getDefaultHoverLayerProps(),
-                  ...layerProps,
-                  data: [hoveredObject],
-                  parameters,
-                  getPosition: data.getPosition,
-                  getRadius: data.getRadius,
-                  getFillColor: this.config.highlightColor,
-                  getIconGeometry: id => this.iconGeometry[id]
-                })
-              ]
-            : []),
-
-          // text label layer
-          ...labelLayers
-        ];
-  }
-}

package/src/layers/index.d.ts

@@ -1,128 +0,0 @@
-import {RGBColor, RGBAColor} from '../reducers/types';
-import {Field, Datasets, KeplerTable} from '../reducers/vis-state-updaters';
-import {LayerTextLabel, ColorRange, ColorUI, LayerVisConfig} from './layer-factory';
-
-export enum PopupEvent {
-  Hover = 'hover',
-  Click = 'click'
-}
-
-export type LayerColumns = {
-  [key: string]: {value: string | null; fieldIdx: number; optional?: boolean};
-};
-export type VisualChannelDomain = number[] | string[];
-export type VisualChannelField = Field | null;
-
-export interface PopupFormatSettings {
-  fields: PopupField[];
-  style: PopupStyle;
-  templateMode?: boolean;
-  template?: string;
-  templateEdited?: boolean;
-}
-
-export type LayerConfig = {
-  dataId: string | null;
-  label: string;
-  color: RGBColor;
-
-  columns: LayerColumns;
-  isVisible: boolean;
-  isConfigActive: boolean;
-  highlightColor: RGBColor | RGBAColor;
-  hidden: boolean;
-  visibilityByZoom: {min: number; max: number};
-
-  colorField: VisualChannelField;
-  colorDomain: VisualChannelDomain;
-  colorScale: string;
-
-  // color by size, domain is set by filters, field, scale type
-  sizeDomain: VisualChannelDomain;
-  sizeScale: string;
-  sizeField: VisualChannelField;
-  radiusField: VisualChannelField | undefined;
-
-  visConfig: LayerVisConfig;
-  textLabel: LayerTextLabel[];
-
-  colorUI: {
-    color: ColorUI;
-    colorRange: ColorUI;
-  };
-  animation: {
-    enabled: boolean;
-  };
-};
-
-export type VisualChannel = {
-  property: string;
-  field: string;
-  scale: string;
-  domain: string;
-  range: string;
-  key: string;
-  channelScaleType: string;
-  nullValue: any;
-  defaultMeasure: any;
-  accessor?: string;
-  condition?: (config: any) => boolean;
-  getAttributeValue?: (config: any) => (d: any) => any;
-};
-
-export type VisualChannelDescription = {
-  label: string;
-  measure: string;
-};
-
-export class Layer {
-  constructor(
-    prop?: {
-      id?: string;
-    } & Partial<LayerConfig>
-  );
-  id: string;
-  type: string;
-  config: LayerConfig;
-  visConfigSettings: any;
-  visualChannels: {[key: string]: VisualChannel};
-  _oldDataUpdateTriggers: any;
-  _interactivitySettings?: { enabled: boolean, [PopupEvent.Click]?: PopupFormatSettings, [PopupEvent.Hover]?: PopupFormatSettings };
-  hasTooltip: boolean;
-  hasInteractivity: boolean;
-  hasAllColumns(): boolean;
-  updateLayerConfig(p: Partial<LayerConfig>): Layer;
-  updateLayerMeta(p: any): Layer
-  updateLayerLegend(p: any): Layer
-  updateLayerDomain(datasets: Datasets, filter?: Filter): Layer;
-  updateLayerVisualChannel(dataset: KeplerTable, channel: string): Layer;
-  shouldCalculateLayerData(props: string[]): boolean;
-  formatLayerData(datasets: Datasets, oldLayerData?: any);
-  updateLayerColorUI(prop: string, newConfig: Partial<ColorUI>): Layer;
-  isValidToSave(): boolean;
-  validateVisualChannel(channel: string);
-  getVisualChannelDescription(key: string): {label: string, measure: string};
-  calculateHexColumnLegend(datasets: Datasets): any;
-  static findDefaultLayerProps(dataset: KeplerTable, foundLayers?: any[]);
-  // static findDefaultColumnField(defaultFields, allFields)
-}
-
-export type LayerClassesType = {
-  point: Layer;
-  arc: Layer;
-  line: Layer;
-  grid: Layer;
-  hexagon: Layer;
-  geojson: Layer;
-  cluster: Layer;
-  icon: Layer;
-  heatmap: Layer;
-  hexagonId: Layer;
-  '3D': Layer;
-  trip: Layer;
-  s2: Layer;
-};
-export const LayerClasses: LayerClassesType;
-
-export type OVERLAY_TYPE = {[key: string]: string}
-export const LAYER_ID_LENGTH: number;

package/src/layers/index.js

@@ -1,76 +0,0 @@
-// Copyright (c) 2022 Uber Technologies, Inc.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in
-// all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-// THE SOFTWARE.
-
-import {default as PointLayer} from './point-layer/point-layer';
-import {default as ArcLayer} from './arc-layer/arc-layer';
-import {default as LineLayer} from './line-layer/line-layer';
-import {default as GridLayer} from './grid-layer/grid-layer';
-import {default as HexagonLayer} from './hexagon-layer/hexagon-layer';
-import {default as GeojsonLayer} from './geojson-layer/geojson-layer';
-import {default as ClusterLayer} from './cluster-layer/cluster-layer';
-import {default as IconLayer} from './icon-layer/icon-layer';
-import {default as HeatmapLayer} from './heatmap-layer/heatmap-layer';
-import {default as H3Layer} from './h3-hexagon-layer/h3-hexagon-layer';
-import {default as ScenegraphLayer} from './scenegraph-layer/scenegraph-layer';
-import {default as TripLayer} from './trip-layer/trip-layer';
-import {default as S2GeometryLayer} from './s2-geometry-layer/s2-geometry-layer';
-import {LAYER_TYPES} from './types';
-
-// base layer
-export {default as Layer, OVERLAY_TYPE, LAYER_ID_LENGTH, colorMaker} from './base-layer';
-
-// individual layers
-export const KeplerGlLayers = {
-  PointLayer,
-  ArcLayer,
-  LineLayer,
-  GridLayer,
-  HexagonLayer,
-  GeojsonLayer,
-  ClusterLayer,
-  IconLayer,
-  HeatmapLayer,
-  H3Layer,
-  ScenegraphLayer,
-  TripLayer,
-  S2GeometryLayer
-};
-
-export const LayerClasses = {
-  [LAYER_TYPES.point]: PointLayer,
-  [LAYER_TYPES.arc]: ArcLayer,
-  [LAYER_TYPES.line]: LineLayer,
-  [LAYER_TYPES.grid]: GridLayer,
-  [LAYER_TYPES.hexagon]: HexagonLayer,
-  [LAYER_TYPES.geojson]: GeojsonLayer,
-  [LAYER_TYPES.cluster]: ClusterLayer,
-  [LAYER_TYPES.icon]: IconLayer,
-  [LAYER_TYPES.heatmap]: HeatmapLayer,
-  [LAYER_TYPES.hexagonId]: H3Layer,
-  [LAYER_TYPES['3D']]: ScenegraphLayer,
-  [LAYER_TYPES.trip]: TripLayer,
-  [LAYER_TYPES.s2]: S2GeometryLayer
-};
-
-export {LAYER_VIS_CONFIGS} from './layer-factory';
-
-// CARTO ADDITIONS
-import IconInfoModalFactory from './icon-layer/icon-info-modal';
-export {IconInfoModalFactory};

package/src/layers/layer-factory.d.ts

@@ -1,149 +0,0 @@
-import {RGBColor, RGBAColor, HexColor, Field} from 'reducers';
-
-export type ColorRange = {
-  name: string;
-  type: string;
-  category: string;
-  colors: HexColor[];
-  reversed?: boolean;
-  colorMap?: Map | object;
-};
-
-export type LayerTextLabel = {
-  field: Field | null;
-  color: RGBColor;
-  size: number;
-  offset: [number, number];
-  anchor: string;
-  alignment: string;
-};
-
-export type ColorUI = {
-  // customPalette in edit
-  customPalette: ColorRange;
-  // show color sketcher modal
-  showSketcher: boolean;
-  // show color range selection panel
-  showDropdown: boolean;
-  // color range selector config
-  colorRangeConfig: {
-    type: string;
-    steps: number;
-    reversed: boolean;
-    custom: boolean;
-    hexColumn: boolean;
-  };
-};
-
-export type VisConfig = {
-  label: string | ((config: LayerConfig) => string);
-  group: string;
-  property: string;
-  description?: string;
-  condition?: (config: LayerConfig) => boolean;
-};
-
-export type VisConfigNumber = VisConfig & {
-  type: 'number';
-  isRanged: false;
-  defaultValue: number;
-  range: [number, number];
-  step: number;
-};
-
-export type VisConfigBoolean = VisConfig & {
-  type: 'boolean';
-  defaultValue: boolean;
-};
-
-export type VisConfigSelection = VisConfig & {
-  type: 'select';
-  defaultValue: string;
-  options: string[];
-};
-
-export type VisConfigRange = VisConfig & {
-  type: 'number';
-  isRanged: boolean;
-  range: [number, number];
-  defaultValue: [number, number];
-  step: number;
-};
-
-export type VisConfigColorSelect = VisConfig & {
-  type: 'color-select';
-  defaultValue: null;
-};
-
-export type VisConfigColorRange = VisConfig & {
-  type: 'color-range-select';
-  defaultValue: ColorRange;
-};
-
-export type LayerVisConfig = {
-  thickness: VisConfigNumber;
-  strokeWidthRange: VisConfigRange;
-  trailLength: VisConfigNumber;
-  radius: VisConfigNumber;
-  radiusRange: VisConfigRange;
-  clusterRadius: VisConfigNumber;
-  clusterRadiusRange: VisConfigRange;
-  opacity: VisConfigNumber;
-  coverage: VisConfigNumber;
-  outline: VisConfigBoolean;
-  colorRange: VisConfigColorRange;
-  strokeColorRange: VisConfigColorRange;
-  targetColor: VisConfigColorSelect;
-  strokeColor: VisConfigColorSelect;
-  aggregation: VisConfigSelect;
-  sizeAggregation: VisConfigSelect;
-  percentile: VisConfigRange;
-  elevationPercentile: VisConfigRange;
-  resolution: VisConfigNumber;
-  sizeScale: VisConfigNumber;
-  angle: VisConfigNumber;
-  worldUnitSize: VisConfigNumber;
-  elevationScale: VisConfigNumber;
-  enableElevationZoomFactor: VisConfigBoolean;
-  elevationRange: VisConfigRange;
-  heightRange: VisConfigRange;
-  coverageRange: VisConfigRange;
-  'hi-precision': VisConfigBoolean;
-  enable3d: VisConfigBoolean;
-  stroked: VisConfigBoolean;
-  filled: VisConfigBoolean;
-  extruded: VisConfigBoolean;
-  wireframe: VisConfigBoolean;
-  weight: VisConfigNumber;
-  heatmapRadius: VisConfigNumber;
-};
-
-export type TextConfigSelect = {
-  type: 'select';
-  options: string[];
-  multiSelect: boolean;
-  searchable: boolean;
-};
-export type TextConfigNumber = {
-  type: 'number';
-  range: number[];
-  value0: number;
-  step: number;
-  isRanged: boolean;
-  label: string;
-  showInput: boolean;
-};
-export type LayerTextConfig = {
-  fontSize: TextConfigNumber;
-  textAnchor: TextConfigSelect;
-  textAlignment: TextConfigSelect;
-};
-
-export const DEFAULT_TEXT_LABEL: LayerTextLabel;
-export const DEFAULT_CUSTOM_PALETTE: ColorRange;
-export const DEFAULT_COLOR_UI: ColorUI;
-export const DEFAULT_HIGHLIGHT_COLOR: RGBAColor;
-export const DEFAULT_LAYER_LABEL: string;
-export const LAYER_VIS_CONFIGS: LayerVisConfig;
-export const LAYER_TEXT_CONFIGS: LayerTextConfig;
-export const UNKNOWN_COLOR_KEY: string;