@carto/kepler.gl 0.0.1-alpha.map-libre

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

@@ -0,0 +1,161 @@
+// 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 {BrushingExtension} from '@deck.gl/extensions';
+
+import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
+import LineLayerIcon from './line-layer-icon';
+import ArcLayer from '../arc-layer/arc-layer';
+import EnhancedLineLayer from 'deckgl-layers/line-layer/line-layer';
+
+export const linePosAccessor = ({lat0, lng0, lat1, lng1, alt0, alt1}) => dc => d => [
+  dc.valueAt(d.index, lng0.fieldIdx),
+  dc.valueAt(d.index, lat0.fieldIdx),
+  alt0?.fieldIdx > -1 ? dc.valueAt(d.index, alt0.fieldIdx) : 0,
+  dc.valueAt(d.index, lng1.fieldIdx),
+  dc.valueAt(d.index, lat1.fieldIdx),
+  alt1?.fieldIdx > -1 ? dc.valueAt(d.index, alt1.fieldIdx) : 0
+];
+
+export const lineRequiredColumns = ['lat0', 'lng0', 'lat1', 'lng1'];
+export const lineOptionalColumns = ['alt0', 'alt1'];
+
+export const lineColumnLabels = {
+  lat0: 'arc.lat0',
+  lng0: 'arc.lng0',
+  lat1: 'arc.lat1',
+  lng1: 'arc.lng1',
+  alt0: 'line.alt0',
+  alt1: 'line.alt1'
+};
+
+export const lineVisConfigs = {
+  opacity: 'opacity',
+  thickness: 'thickness',
+  colorRange: 'colorRange',
+  sizeRange: 'strokeWidthRange',
+  targetColor: 'targetColor',
+  elevationScale: {
+    ...LAYER_VIS_CONFIGS.elevationScale,
+    defaultValue: 1
+  }
+};
+
+export default class LineLayer extends ArcLayer {
+  constructor(props) {
+    super(props);
+
+    this.registerVisConfig(lineVisConfigs);
+    this.getPositionAccessor = dataContainer => linePosAccessor(this.config.columns)(dataContainer);
+  }
+
+  get type() {
+    return 'line';
+  }
+
+  get layerIcon() {
+    return LineLayerIcon;
+  }
+
+  get requiredLayerColumns() {
+    return lineRequiredColumns;
+  }
+
+  get optionalColumns() {
+    return lineOptionalColumns;
+  }
+
+  get columnLabels() {
+    return lineColumnLabels;
+  }
+
+  get visualChannels() {
+    const visualChannels = super.visualChannels;
+    return {
+      ...visualChannels,
+      sourceColor: {
+        ...visualChannels.sourceColor,
+        accessor: 'getColor'
+      }
+    };
+  }
+
+  static findDefaultLayerProps({fieldPairs = []}) {
+    if (fieldPairs.length < 2) {
+      return {props: []};
+    }
+    const props = {};
+
+    // connect the first two point layer with line
+    props.columns = {
+      lat0: fieldPairs[0].pair.lat,
+      lng0: fieldPairs[0].pair.lng,
+      alt0: {value: null, fieldIdx: -1, optional: true},
+      lat1: fieldPairs[1].pair.lat,
+      lng1: fieldPairs[1].pair.lng,
+      alt1: {value: null, fieldIdx: -1, optional: true}
+    };
+    props.label = `${fieldPairs[0].defaultName} -> ${fieldPairs[1].defaultName} line`;
+
+    return {props: [props]};
+  }
+
+  renderLayer(opts) {
+    const {data, gpuFilter, objectHovered, interactionConfig} = opts;
+
+    const layerProps = {
+      widthScale: this.config.visConfig.thickness,
+      elevationScale: this.config.visConfig.elevationScale
+    };
+
+    const updateTriggers = {
+      getPosition: this.config.columns,
+      getFilterValue: gpuFilter.filterValueUpdateTriggers,
+      ...this.getVisualChannelUpdateTriggers()
+    };
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    return [
+      // base layer
+      new EnhancedLineLayer({
+        ...defaultLayerProps,
+        ...this.getBrushingExtensionProps(interactionConfig, 'source_target'),
+        ...data,
+        ...layerProps,
+        updateTriggers,
+        extensions: [...defaultLayerProps.extensions, new BrushingExtension()]
+      }),
+      // hover layer
+      ...(hoveredObject
+        ? [
+            new EnhancedLineLayer({
+              ...this.getDefaultHoverLayerProps(),
+              ...layerProps,
+              data: [hoveredObject],
+              getColor: this.config.highlightColor,
+              getTargetColor: this.config.highlightColor,
+              getWidth: data.getWidth
+            })
+          ]
+        : [])
+    ];
+  }
+}

package/src/layers/mapbox-utils.js

@@ -0,0 +1,195 @@
+// 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 {OVERLAY_TYPE} from './base-layer';
+
+/** @typedef {import("geojson").FeatureCollection} FeatureCollection */
+/** @typedef {import("geojson").Feature} Feature */
+
+/**
+ * This function will convert layers to mapbox layers
+ * @param {Array<Object>} layers the layers to be converted
+ * @param {Array<Object>} layerData extra layer information
+ * @param {Array<Number>} layerOrder the order by which we should convert layers
+ * @param {Object} layersToRender {[id]: true | false} object whether each layer should be rendered
+ * @returns {Object} {[id]: layer}
+ */
+export function generateMapboxLayers(
+  layers = [],
+  layerData = [],
+  layerOrder = [],
+  layersToRender = {}
+) {
+  if (layerData.length > 0) {
+    return layerOrder
+      .slice()
+      .reverse()
+      .filter(
+        idx => layers[idx].overlayType === OVERLAY_TYPE.mapboxgl && layersToRender[layers[idx].id]
+      )
+      .reduce((accu, index) => {
+        const layer = layers[index];
+        return {
+          ...accu,
+          [layer.id]: {
+            id: layer.id,
+            data: layerData[index].data,
+            isVisible: layer.config.isVisible,
+            config: layerData[index].config,
+            hidden: layer.config.hidden,
+            sourceId: layerData[index].config.source
+          }
+        };
+      }, {});
+  }
+
+  return {};
+}
+
+/**
+ * Update mapbox layers on the given map
+ * @param {Object} map
+ * @param {Object} newLayers Map of new mapbox layers to be displayed
+ * @param {Object} oldLayers Map of the old layers to be compare with the current ones to detect deleted layers
+ *                  {layerId: sourceId}
+ */
+export function updateMapboxLayers(map, newLayers = {}, oldLayers = null) {
+  // delete no longer existed old layers
+  if (oldLayers) {
+    checkAndRemoveOldLayers(map, oldLayers, newLayers);
+  }
+
+  // insert or update new layer
+  Object.values(newLayers).forEach(overlay => {
+    const {id: layerId, config, data, sourceId, isVisible} = overlay;
+    if (!data && !config) {
+      return;
+    }
+
+    const {data: oldData, config: oldConfig} = (oldLayers && oldLayers[layerId]) || {};
+
+    if (data && data !== oldData) {
+      updateSourceData(map, sourceId, data);
+    }
+
+    // compare with previous configs
+    if (oldConfig !== config) {
+      updateLayerConfig(map, layerId, config, isVisible);
+    }
+  });
+}
+
+function checkAndRemoveOldLayers(map, oldLayers, newLayers) {
+  Object.keys(oldLayers).forEach(layerId => {
+    if (!newLayers[layerId]) {
+      map.removeLayer(layerId);
+    }
+  });
+}
+
+function updateLayerConfig(map, layerId, config, isVisible) {
+  const mapboxLayer = map.getLayer(layerId);
+
+  if (mapboxLayer) {
+    // check if layer already is set
+    // remove it if exists
+    map.removeLayer(layerId);
+  }
+
+  map.addLayer(config);
+  map.setLayoutProperty(layerId, 'visibility', isVisible ? 'visible' : 'none');
+}
+
+function updateSourceData(map, sourceId, data) {
+  const source = map.getSource(sourceId);
+
+  if (!source) {
+    map.addSource(sourceId, {
+      type: 'geojson',
+      data
+    });
+  } else {
+    source.setData(data);
+  }
+}
+
+/**
+ *
+ * @param filteredIndex
+ * @param getGeometry {({index: number}) => any}
+ * @param getProperties {({index: number}) => any}
+ * @returns FeatureCollection
+ */
+export function geoJsonFromData(filteredIndex = [], getGeometry, getProperties = d => {}) {
+  const geojson = {
+    type: 'FeatureCollection',
+    /** @type {Feature[]} */
+    features: []
+  };
+
+  for (let i = 0; i < filteredIndex.length; i++) {
+    const index = filteredIndex[i];
+    const rowIndex = {index};
+    const geometry = getGeometry(rowIndex);
+
+    if (geometry) {
+      geojson.features.push({
+        type: 'Feature',
+        properties: {
+          index,
+          ...getProperties(rowIndex)
+        },
+        geometry
+      });
+    }
+  }
+
+  return geojson;
+}
+
+export const prefixGpuField = name => `gpu:${name}`;
+
+export function gpuFilterToMapboxFilter(gpuFilter) {
+  const {filterRange, filterValueUpdateTriggers} = gpuFilter;
+
+  const hasFilter = Object.values(filterValueUpdateTriggers).filter(d => d);
+
+  if (!hasFilter.length) {
+    return null;
+  }
+
+  const condition = ['all'];
+
+  // [">=", key, value]
+  // ["<=", key, value]
+  const expressions = Object.values(filterValueUpdateTriggers).reduce(
+    (accu, name, i) =>
+      name
+        ? [
+            ...accu,
+            ['>=', prefixGpuField(name), filterRange[i][0]],
+            ['<=', prefixGpuField(name), filterRange[i][1]]
+          ]
+        : accu,
+    condition
+  );
+
+  return expressions;
+}

package/src/layers/mapboxgl-layer.js

@@ -0,0 +1,154 @@
+// 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 Layer, {OVERLAY_TYPE} from './base-layer';
+import {createSelector} from 'reselect';
+
+import {geoJsonFromData, prefixGpuField, gpuFilterToMapboxFilter} from './mapbox-utils';
+
+export const mapboxRequiredColumns = ['lat', 'lng'];
+
+export const pointColResolver = ({lat, lng}) => `${lat.fieldIdx}-${lng.fieldIdx}`;
+
+class MapboxLayerGL extends Layer {
+  get overlayType() {
+    return OVERLAY_TYPE.mapboxgl;
+  }
+
+  get type() {
+    return null;
+  }
+
+  get isAggregated() {
+    return true;
+  }
+
+  get requiredLayerColumns() {
+    return mapboxRequiredColumns;
+  }
+
+  get columnPairs() {
+    return this.defaultPointColumnPairs;
+  }
+
+  get noneLayerDataAffectingProps() {
+    return [];
+  }
+
+  get visualChannels() {
+    return {};
+  }
+  datasetSelector = config => config.dataId;
+  gpuFilterSelector = (config, datasets) => (datasets[config.dataId] || {}).gpuFilter;
+  columnsSelector = config => pointColResolver(config.columns);
+
+  sourceSelector = createSelector(
+    this.datasetSelector,
+    this.columnsSelector,
+    (datasetId, columns) => `${datasetId}-${columns}`
+  );
+
+  filterSelector = createSelector(this.gpuFilterSelector, gpuFilter =>
+    gpuFilterToMapboxFilter(gpuFilter)
+  );
+
+  isValidFilter(filter) {
+    // mapbox will crash if filter is not an array or empty
+    return Array.isArray(filter) && filter.length;
+  }
+
+  getDataUpdateTriggers({filteredIndex, gpuFilter, id}) {
+    const {columns} = this.config;
+
+    const visualChannelFields = Object.values(this.visualChannels).reduce(
+      (accu, v) => ({
+        ...accu,
+        ...(this.config[v.field] ? {[v.field]: this.config[v.field].name} : {})
+      }),
+      {}
+    );
+
+    const updateTriggers = {
+      getData: {
+        datasetId: id,
+        columns,
+        filteredIndex,
+        ...visualChannelFields,
+        ...gpuFilter.filterValueUpdateTriggers
+      },
+      getMeta: {datasetId: id, columns}
+    };
+
+    return updateTriggers;
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex, gpuFilter}, getPosition) {
+    const getGeometry = d => this.getGeometry(getPosition(d));
+
+    const vcFields = Object.values(this.visualChannels)
+      .map(v => this.config[v.field])
+      .filter(v => v);
+
+    const getPropertyFromVisualChanel = vcFields.length
+      ? d =>
+          vcFields.reduce(
+            (accu, field) => ({
+              ...accu,
+              [field.name]: field.valueAccessor(d)
+            }),
+            {}
+          )
+      : d => ({});
+
+    const {filterValueUpdateTriggers, filterValueAccessor} = gpuFilter;
+
+    // gpuField To property
+    const hasFilter = Object.values(filterValueUpdateTriggers).filter(d => d).length;
+    const valueAccessor = filterValueAccessor(dataContainer)();
+
+    const getPropertyFromFilter = hasFilter
+      ? d => {
+          const filterValue = valueAccessor(d);
+          return Object.values(filterValueUpdateTriggers).reduce(
+            (accu, name, i) => ({
+              ...accu,
+              ...(name ? {[prefixGpuField(name)]: filterValue[i]} : {})
+            }),
+            {}
+          );
+        }
+      : d => ({});
+
+    const getProperties = d => ({
+      ...getPropertyFromVisualChanel(d),
+      ...getPropertyFromFilter(d)
+    });
+
+    return geoJsonFromData(filteredIndex, getGeometry, getProperties);
+  }
+
+  // this layer is rendered at mapbox level
+  // todo: maybe need to find a better solution for this one
+  shouldRenderLayer() {
+    return this.type && this.config.isVisible && this.hasAllColumns();
+  }
+}
+
+export default MapboxLayerGL;

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

@@ -0,0 +1,51 @@
+// 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 React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+class PointLayerIcon extends Component {
+  static propTypes = {
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'point-layer-icon',
+    totalColor: 6
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <circle cx="29.4" cy="31.6" r="8.4" className="cr1" />
+        <circle cx="48.5" cy="15.7" r="6.5" className="cr2" />
+        <circle cx="11" cy="44.2" r="3" className="cr3" />
+        <circle cx="50" cy="44.2" r="5" className="cr4" />
+        <circle cx="34" cy="54.2" r="3" className="cr5" />
+        <circle cx="14" cy="16.2" r="4" className="cr6" />
+      </Base>
+    );
+  }
+}
+
+export default PointLayerIcon;