@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/utils/layer-utils.js

@@ -1,206 +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 {OVERLAY_TYPE} from 'layers/base-layer';
-import {GEOCODER_LAYER_ID, MASK_LAYER_ID} from 'constants/default-settings';
-import {MaskExtension} from '@deck.gl/extensions';
-
-/**
- * Find default layers from fields
- * @type {typeof import('./layer-utils').findDefaultLayer}
- */
-export function findDefaultLayer(dataset, layerClasses) {
-  if (!dataset) {
-    return [];
-  }
-  const layerProps = Object.keys(layerClasses).reduce((previous, lc) => {
-    const result =
-      typeof layerClasses[lc].findDefaultLayerProps === 'function'
-        ? layerClasses[lc].findDefaultLayerProps(dataset, previous)
-        : {props: []};
-
-    const props = Array.isArray(result) ? result : result.props || [];
-    const foundLayers = result.foundLayers || previous;
-
-    return foundLayers.concat(
-      props.map(p => ({
-        ...p,
-        type: lc,
-        dataId: dataset.id
-      }))
-    );
-  }, []);
-
-  // go through all layerProps to create layer
-  return layerProps.map(props => {
-    const layer = new layerClasses[props.type](props);
-    return typeof layer.setInitialLayerConfig === 'function' && dataset.dataContainer
-      ? layer.setInitialLayerConfig(dataset)
-      : layer;
-  });
-}
-
-/**
- * calculate layer data based on layer type, col Config,
- * return updated layer if colorDomain, dataMap has changed
- * @type {typeof import('./layer-utils').calculateLayerData}
- */
-export function calculateLayerData(layer, state, oldLayerData) {
-  const {type} = layer;
-
-  if (!type || !layer.hasAllColumns() || !layer.config.dataId) {
-    return {layer, layerData: {}};
-  }
-
-  const layerData = layer.formatLayerData(state.datasets, oldLayerData);
-  layer.calculateHexColumnLegend(state.datasets);
-  return {layerData, layer};
-}
-
-/**
- * Calculate props passed to LayerHoverInfo
- * @type {typeof import('./layer-utils').getLayerHoverProp}
- */
-export function getLayerHoverProp({
-  interactionConfig,
-  hoverInfo,
-  layers,
-  layersToRender,
-  datasets
-}) {
-  if (interactionConfig.tooltip.enabled && hoverInfo && hoverInfo.picked) {
-    // if anything hovered
-    const {object, layer: overlay} = hoverInfo;
-
-    // deckgl layer to kepler-gl layer
-    const layer = layers[overlay.props.idx];
-
-    if (object && layer && layer.getHoverData && layersToRender[layer.id]) {
-      // if layer is visible and have hovered data
-      const {
-        config: {dataId}
-      } = layer;
-      if (!dataId) {
-        return null;
-      }
-      const {dataContainer, fields} = datasets[dataId];
-      const data = layer.getHoverData(object, dataContainer, fields);
-      const fieldsToShow = interactionConfig.tooltip.config.fieldsToShow[dataId];
-
-      return {
-        data,
-        fields,
-        fieldsToShow,
-        layer
-      };
-    }
-  }
-
-  return null;
-}
-
-export function renderDeckGlLayer(props, layerCallbacks, idx) {
-  const {
-    datasets,
-    layers,
-    layerData,
-    hoverInfo,
-    clicked,
-    mapState,
-    interactionConfig,
-    animationConfig,
-    mapLayers,
-    maskPolygon,
-    popupSettings
-  } = props;
-  const layer = layers[idx];
-  const data = layerData[idx];
-  const {gpuFilter} = datasets[layer.config.dataId] || {};
-  const objectHovered = clicked || hoverInfo;
-  const visible = !mapLayers || (mapLayers && mapLayers[layer.id]);
-
-  layer.interactivitySettings = popupSettings?.layers[layer.id];
-  // Layer is Layer class
-  return layer.renderLayer({
-    data,
-    gpuFilter,
-    idx,
-    interactionConfig,
-    layerCallbacks,
-    mapState,
-    animationConfig,
-    objectHovered,
-    visible,
-    maskPolygon,
-    popupSettings
-  });
-}
-
-export function isLayerRenderable(layer, layerData) {
-  return layer.id !== GEOCODER_LAYER_ID && layer.shouldRenderLayer(layerData);
-}
-
-export function isLayerVisible(layer, mapLayers) {
-  return (
-    layer.config.isVisible &&
-    // if layer.id is not in mapLayers, don't render it
-    (!mapLayers || (mapLayers && mapLayers[layer.id]))
-  );
-}
-
-// Prepare a dict of layers rendered by the deck.gl
-// Note, isVisible: false layer is passed to deck.gl here
-// return {[id]: true \ false}
-export function prepareLayersForDeck(layers, layerData) {
-  return layers.reduce(
-    (accu, layer, idx) => ({
-      ...accu,
-      [layer.id]:
-        isLayerRenderable(layer, layerData[idx]) && layer.overlayType === OVERLAY_TYPE.deckgl
-    }),
-    {}
-  );
-}
-
-// Prepare a dict of rendered layers rendered in the map
-// This includes only the visibile layers for single map view and split map view
-// return {[id]: true \ false}
-export function prepareLayersToRender(layers, layerData, mapLayers) {
-  return layers.reduce(
-    (accu, layer, idx) => ({
-      ...accu,
-      [layer.id]: isLayerRenderable(layer, layerData[idx]) && isLayerVisible(layer, mapLayers)
-    }),
-    {}
-  );
-}
-
-const maskExtension = new MaskExtension();
-
-export function getMaskExtensionProps(maskPolygon) {
-  return {
-    maskId: Boolean(maskPolygon && maskPolygon.length) && MASK_LAYER_ID,
-    extensions: [maskExtension]
-  };
-}
-
-export function negateAccessor(accessor) {
-  return typeof accessor === 'function' ? (d, i) => -accessor(d, i) : -accessor;
-}

package/src/utils/map-style-utils/mapbox-gl-style-editor.js

@@ -1,201 +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 memoize from 'lodash/memoize';
-import cloneDeep from 'lodash/cloneDeep';
-import {DEFAULT_LAYER_GROUPS, DEFAULT_MAPBOX_API_URL} from 'constants/default-settings';
-
-const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;
-const httpRg = /^(?=(http:|https:))/;
-
-export function getDefaultLayerGroupVisibility({layerGroups = []}) {
-  return layerGroups.reduce(
-    (accu, layer) => ({
-      ...accu,
-      [layer.slug]: layer.defaultVisibility
-    }),
-    {}
-  );
-}
-
-const resolver = ({id, mapStyle, visibleLayerGroups = {}}) =>
-  `${id}:${Object.keys(visibleLayerGroups)
-    .filter(d => visibleLayerGroups[d])
-    .sort()
-    .join('-')}`;
-
-/**
- * Edit preset map style to keep only visible layers
- *
- * @param {Object} mapStyle - preset map style
- * @param {Object} visibleLayerGroups - visible layers of top map
- * @returns {Object} top map style
- */
-export const editTopMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
-  const visibleFilters = (mapStyle.layerGroups || [])
-    .filter(lg => visibleLayerGroups[lg.slug])
-    .map(lg => lg.filter);
-
-  // if top map
-  // keep only visible layers
-  const filteredLayers = mapStyle.style.layers.filter(layer =>
-    visibleFilters.some(match => match(layer))
-  );
-
-  return {
-    ...mapStyle.style,
-    layers: filteredLayers
-  };
-}, resolver);
-
-/**
- * Edit preset map style to filter out invisible layers
- *
- * @param {Object} mapStyle - preset map style
- * @param {Object} visibleLayerGroups - visible layers of bottom map
- * @returns {Object} bottom map style
- */
-export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
-  const invisibleFilters = (mapStyle.layerGroups || [])
-    .filter(lg => !visibleLayerGroups[lg.slug])
-    .map(lg => lg.filter);
-
-  // if bottom map
-  // filter out invisible layers
-  const filteredLayers = mapStyle.style.layers.filter(layer =>
-    invisibleFilters.every(match => !match(layer))
-  );
-
-  return {
-    ...mapStyle.style,
-    layers: filteredLayers
-  };
-}, resolver);
-
-// valid style url
-// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4
-// lowercase letters, numbers and dashes only.
-export function isValidStyleUrl(url) {
-  return typeof url === 'string' && Boolean(url.match(mapUrlRg) || url.match(httpRg));
-}
-
-export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) {
-  if (styleUrl.startsWith('http')) {
-    return styleUrl;
-  }
-
-  // mapbox://styles/jckr/cjhcl0lxv13di2rpfoytdbdyj
-  if (styleUrl.startsWith('mapbox://styles')) {
-    const styleId = styleUrl.replace('mapbox://styles/', '');
-
-    // https://api.mapbox.com/styles/v1/heshan0131/cjg1bfumo1cwm2rlrjxkinfgw?pluginName=Keplergl&access_token=<token>
-    return `${mapboxApiUrl ||
-      DEFAULT_MAPBOX_API_URL}/styles/v1/${styleId}?pluginName=Keplergl&access_token=${accessToken}`;
-  }
-
-  // style url not recognized
-  return null;
-}
-
-/**
- * Generate static map image from style Url to be used as icon
- * @param {Object} param
- * @param {string} param.styleUrl
- * @param {string} param.mapboxApiAccessToken
- * @param {string} param.mapboxApiUrl
- * @param {Object} param.mapState
- * @param {number} param.mapW
- * @param {number} param.mapH
- */
-export function getStyleImageIcon({
-  styleUrl,
-  mapboxApiAccessToken,
-  mapboxApiUrl = DEFAULT_MAPBOX_API_URL,
-  mapState = {
-    longitude: -122.3391,
-    latitude: 37.7922,
-    zoom: 9
-  },
-  mapW = 400,
-  mapH = 300
-}) {
-  const styleId = styleUrl.replace('mapbox://styles/', '');
-
-  return (
-    `${mapboxApiUrl}/styles/v1/${styleId}/static/` +
-    `${mapState.longitude},${mapState.latitude},${mapState.zoom},0,0/` +
-    `${mapW}x${mapH}` +
-    `?access_token=${mapboxApiAccessToken}&logo=false&attribution=false`
-  );
-}
-
-export function scaleMapStyleByResolution(mapboxStyle, scale) {
-  if (scale !== 1 && mapboxStyle) {
-    const labelLayerGroup = DEFAULT_LAYER_GROUPS.find(lg => lg.slug === 'label');
-    // @ts-ignore
-    const {filter: labelLayerFilter} = labelLayerGroup;
-    const zoomOffset = Math.log2(scale);
-
-    const copyStyle = cloneDeep(mapboxStyle);
-    (copyStyle.layers || []).forEach(d => {
-      // edit minzoom and maxzoom
-      if (d.maxzoom) {
-        d.maxzoom = Math.max(d.maxzoom + zoomOffset, 1);
-      }
-
-      if (d.minzoom) {
-        d.minzoom = Math.max(d.minzoom + zoomOffset, 1);
-      }
-
-      // edit text size
-      if (labelLayerFilter(d)) {
-        if (d.layout && d.layout['text-size'] && Array.isArray(d.layout['text-size'].stops)) {
-          d.layout['text-size'].stops.forEach(stop => {
-            // zoom
-            stop[0] = Math.max(stop[0] + zoomOffset, 1);
-            // size
-            stop[1] *= scale;
-          });
-        }
-      }
-    });
-
-    return copyStyle;
-  }
-
-  return mapboxStyle;
-}
-
-/**
- * When switch to a new style, try to keep current layer group visibility
- * by merging default and current
- * @param {Object} defaultLayerGroup
- * @param {Object} currentLayerGroup
- * @return {Object} mergedLayerGroups
- */
-export function mergeLayerGroupVisibility(defaultLayerGroup, currentLayerGroup) {
-  return Object.keys(defaultLayerGroup).reduce(
-    (accu, key) => ({
-      ...accu,
-      ...(currentLayerGroup.hasOwnProperty(key) ? {[key]: currentLayerGroup[key]} : {})
-    }),
-    defaultLayerGroup
-  );
-}

package/src/utils/notifications-utils.js

@@ -1,83 +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 {generateHashId} from './utils';
-
-import {
-  DEFAULT_NOTIFICATION_MESSAGE,
-  DEFAULT_NOTIFICATION_TOPICS,
-  DEFAULT_NOTIFICATION_TYPES,
-  DEFAULT_UUID_COUNT
-} from 'constants/default-settings';
-
-import {BUG_REPORT_LINK} from 'constants/user-guides';
-
-/**
- * Creates a notification
- * @param {object} opt
- * @param {string} opt.message - Message to display during the notification
- * @param {string} opt.type - The type of message. One of DEFAULT_NOTIFICATION_TYPES
- * @param {string} opt.topic - The topic the notification belongs to. One of DEFAULT_NOTIFICATION_TOPICS
- * @param {string} opt.id optional id for notification. If not provided it will be generated by the method
- * @param {object} opt.options - Extra parameters to store as part of hte notification
- * @returns {object}
- */
-export function createNotification({
-  message = DEFAULT_NOTIFICATION_MESSAGE,
-  type = DEFAULT_NOTIFICATION_TYPES.info,
-  topic = DEFAULT_NOTIFICATION_TOPICS.global,
-  id = generateHashId(DEFAULT_UUID_COUNT),
-  ...options
-}) {
-  return {
-    ...options,
-    id,
-    message,
-    type,
-    topic
-  };
-}
-
-/**
- * Creates an error notification
- * @param options
- * @returns {{topic, id, message, type: (null|number)}}
- */
-export const errorNotification = options => ({
-  ...createNotification(options),
-  type: DEFAULT_NOTIFICATION_TYPES.error
-});
-
-/**
- * Creates a success notification
- * @param options
- * @returns {{topic, id, message, type: null}}
- */
-export const successNotification = options => ({
-  ...createNotification(options),
-  type: DEFAULT_NOTIFICATION_TYPES.success
-});
-
-export const exportImageError = options =>
-  errorNotification({
-    ...options,
-    topic: DEFAULT_NOTIFICATION_TOPICS.global,
-    message: `Failed to export image, please take a screenshot of the javascript console, report the with [this link](${BUG_REPORT_LINK}) `
-  });

package/src/utils/observe-dimensions.d.ts

@@ -1,18 +0,0 @@
-import {RefObject} from 'react';
-
-export interface Dimensions {
-  readonly height: number;
-  readonly width: number;
-}
-
-export default function useDimensions<T extends Element>(
-  throttleDelay?: number
-): [RefObject<T>, Dimensions | undefined];
-
-export function observeDimensions(
-  target: Element,
-  handleResize: (size: Dimensions) => void,
-  throttleDelay?: number
-);
-
-export function unobserveDimensions(target: Element);

package/src/utils/observe-dimensions.js

@@ -1,115 +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 throttle from 'lodash/throttle';
-import {useEffect, useRef, useState} from 'react';
-import ResizeObserver from 'resize-observer-polyfill';
-
-const DEFAULT_THROTTLE_DELAY = 100;
-
-// Using a single ResizeObserver for all elements can be 10x
-// more performant than using a separate ResizeObserver per element
-// https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ
-let _observerRegistry;
-
-function getObserverRegistry() {
-  if (_observerRegistry === undefined) {
-    const callbacks = new Map();
-    const resizeObserver = new ResizeObserver((entries, observer) => {
-      for (const entry of entries) {
-        callbacks.get(entry.target)?.(entry, observer);
-      }
-    });
-    _observerRegistry = {
-      subscribe(target, callback) {
-        resizeObserver.observe(target);
-        callbacks.set(target, callback);
-      },
-      unsubscribe(target) {
-        resizeObserver.unobserve(target);
-        callbacks.delete(target);
-      }
-    };
-  }
-  return _observerRegistry;
-}
-
-export function observeDimensions(target, handleResize, throttleDelay = DEFAULT_THROTTLE_DELAY) {
-  const registry = getObserverRegistry();
-  const handler = throttleDelay > 0 ? throttle(handleResize, throttleDelay) : handleResize;
-  registry.subscribe(target, entry => handler(getSize(target, entry)));
-}
-
-export function unobserveDimensions(target) {
-  const registry = getObserverRegistry();
-  registry.unsubscribe(target);
-}
-
-function getSize(node, entry) {
-  if (entry.contentRect) {
-    const {width, height} = entry.contentRect;
-    return {width, height};
-  }
-  if (node.getBoundingClientRect) {
-    const {width, height} = node.getBoundingClientRect();
-    return {width, height};
-  }
-  return null;
-}
-
-/**
- * Usage example:
- * const [ref, dimensions] = useDimensions<HTMLDivElement>();
- *
- * @param throttleDelay
- * @returns {[React.RefObject<Element>, {width: number, height: number} | null]}
- */
-export default function useDimensions(throttleDelay = DEFAULT_THROTTLE_DELAY) {
-  const ref = useRef(null);
-  const [size, setSize] = useState(null);
-
-  useEffect(() => {
-    const {current} = ref;
-    if (!current) {
-      return;
-    }
-
-    let didUnobserve = false;
-    observeDimensions(
-      current,
-      entry => {
-        if (didUnobserve) return;
-        const newSize = getSize(current, entry);
-        if (newSize) {
-          // @ts-ignore
-          setSize(newSize);
-        }
-      },
-      throttleDelay
-    );
-    return () => {
-      didUnobserve = true;
-      unobserveDimensions(current);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [throttleDelay]);
-
-  return [ref, size];
-}