@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/cloud-providers/index.d.ts

@@ -1,53 +0,0 @@
-import {ComponentType} from 'prop-types';
-import {MapData, ExportFileOptions} from 'actions/provider-actions';
-
-export type Millisecond = number;
-
-export type MapListItem = {
-  id: string;
-  title: string;
-  description: string;
-  loadParams: any;
-  imageUrl?: string;
-  lastModification?: Millisecond;
-  privateMap?: boolean;
-};
-
-export type Thumbnail = {
-  width: number;
-  height: number;
-};
-
-export type ProviderProps = {
-  name?: string;
-  displayName?: string;
-  icon?: ComponentType<IconProps>;
-  thumbnail?: Thumbnail;
-};
-
-interface IconProps {
-  height?: number | string;
-  width?: number | string;
-}
-
-export class Provider {
-  constructor(p: ProviderProps);
-  name: string;
-  displayName: string;
-  icon: ComponentType<IconProps>;
-  thumbnail: Thumbnail;
-  getManagementUrl?: () => string;
-  hasPrivateStorage(): boolean;
-  hasSharingUrl(): boolean;
-  getShareUrl(fullUrl?: boolean): string;
-  getMapUrl(fullUrl?: boolean): string;
-  getAccessToken(): boolean;
-  getUserName(): boolean;
-  login(Fn?: any): Promise<any>;
-  logout(Fn?: any): Promise<any>;
-  uploadMap(p: {mapData: MapData; options: ExportFileOptions}): Promise<any>;
-  listMaps(): Promise<MapListItem>;
-  downloadMap(param: any): Promose<{map: MapData; format: string}>;
-}
-
-export const FILE_CONFLICT_MSG: string;

package/src/cloud-providers/index.js

@@ -1,21 +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.
-
-export {default as Provider, FILE_CONFLICT_MSG} from './provider';

package/src/cloud-providers/provider.js

@@ -1,233 +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 {Upload} from 'components/common/icons';
-
-const NAME = 'cloud-provider';
-const DISPLAY_NAME = 'Cloud Provider';
-const THUMBNAIL = {width: 300, height: 200};
-const ICON = Upload;
-export const FILE_CONFLICT_MSG = 'file_conflict';
-/**
- * The default provider class
- * @param {object} props
- * @param {string} props.name
- * @param {string} props.displayName
- * @param {React.Component} props.icon - React element
- * @param {object} props.thumbnail - thumbnail size object
- * @param {number} props.thumbnail.width - thumbnail width in pixels
- * @param {number} props.thumbnail.height - thumbnail height in pixels
- * @public
- * @example
- *
- * const myProvider = new Provider({
- *  name: 'foo',
- *  displayName: 'Foo Storage'
- *  icon: Icon,
- *  thumbnail: {width: 300, height: 200}
- * })
- */
-export default class Provider {
-  constructor(props) {
-    this.name = props.name || NAME;
-    this.displayName = props.displayName || DISPLAY_NAME;
-    this.icon = props.icon || ICON;
-    this.thumbnail = props.thumbnail || THUMBNAIL;
-  }
-
-  /**
-   * Whether this provider support upload map to a private storage. If truthy, user will be displayed with the storage save icon on the top right of the side bar.
-   * @returns {boolean}
-   * @public
-   */
-  hasPrivateStorage() {
-    return true;
-  }
-
-  /**
-   * Whether this provider support share map via a public url, if truthy, user will be displayed with a share map via url under the export map option on the top right of the side bar
-   * @returns {boolean}
-   * @public
-   */
-  hasSharingUrl() {
-    return true;
-  }
-
-  /**
-   * This method is called after user share a map, to display the share url.
-   * @param {boolean} fullUrl - Whether to return the full url with domain, or just the location
-   * @returns {string} shareUrl
-   * @public
-   */
-  getShareUrl(fullUrl = false) {
-    return '';
-  }
-
-  /**
-   * This method is called by kepler.gl demo app to pushes a new location to history, becoming the current location.
-   * @param {boolean} fullURL - Whether to return the full url with domain, or just the location
-   * @returns {string} mapUrl
-   * @public
-   */
-  getMapUrl(fullURL = true) {
-    return '';
-  }
-
-  /**
-   * This method is called to determine whether user already logged in to this provider
-   * @public
-   * @returns {boolean} true if a user already logged in
-   */
-  getAccessToken() {
-    return true;
-  }
-
-  /**
-   * This method is called to get the user name of the current user. It will be displayed in the cloud provider tile.
-   * @public
-   * @returns {string} true if a user already logged in
-   */
-  getUserName() {
-    return '';
-  }
-
-  /**
-   * This return a standard error that will trigger the overwrite map modal
-   */
-  getFileConflictError() {
-    return new Error(FILE_CONFLICT_MSG);
-  }
-
-  /**
-   * This method will be called when user click the login button in the cloud provider tile.
-   * Upon login success, `onCloudLoginSuccess` has to be called to notify kepler.gl UI
-   * @param {function} onCloudLoginSuccess - callbacks to be called after login success
-   * @public
-   */
-  async login(onCloudLoginSuccess) {
-    onCloudLoginSuccess();
-    return;
-  }
-
-  /**
-   * This method will be called when user click the logout button under the cloud provider tile.
-   * Upon login success, `onCloudLoginSuccess` has to be called to notify kepler.gl UI
-   * @param {function} onCloudLogoutSuccess - callbacks to be called after logout success
-   * @public
-   */
-  async logout(onCloudLogoutSuccess) {
-    onCloudLogoutSuccess();
-    return;
-  }
-
-  /**
-   * This method will be called to upload map for saving and sharing. Kepler.gl will package map data, config, title, description and thumbnail for upload to storage.
-   * With the option to overwrite already saved map, and upload as private or public map.
-   *
-   * @param {Object} param
-   * @param {Object} param.mapData - the map object
-   * @param {Object} param.mapData.map - {datasets. config, info: {title, description}}
-   * @param {Blob} param.mapData.thumbnail - A thumbnail of current map. thumbnail size can be defined by provider by this.thumbnail
-   * @param {object} [param.options]
-   * @param {boolean} [param.options.overwrite] - whether user choose to overwrite already saved map under the same name
-   * @param {boolean} [param.options.isPublic] - whether user wish to share the map with others. if isPublic is truthy, kepler will call this.getShareUrl() to display an URL they can share with others
-   * @public
-   */
-  async uploadMap({mapData, options = {}}) {
-    return;
-  }
-
-  /**
-   * This method is called to get a list of maps saved by the current logged in user.
-   * @returns visualizations an array of Viz objects
-   * @public
-   * @example
-   *  async listMaps() {
-   *    return [
-   *      {
-   *        id: 'a',
-   *        title: 'My map',
-   *        description: 'My first kepler map',
-   *        imageUrl: 'http://',
-   *        lastModification: 1582677787000,
-   *        privateMap: false,
-   *        loadParams: {}
-   *      }
-   *    ];
-   *  }
-   */
-  async listMaps() {
-    return [];
-  }
-
-  /**
-   * This method will be called when user select a map to load from the storage map viewer
-   * @param {*} loadParams - the loadParams property of each visualization object
-   * @returns mapResponse - the map object containing dataset config info and format option
-   * @public
-   * @example
-   * async downloadMap(loadParams) {
-   *  const mockResponse = {
-   *    map: {
-   *      datasets: [],
-   *      config: {},
-   *      info: {
-   *        app: 'kepler.gl',
-   *        created_at: ''
-   *        title: 'test map',
-   *        description: 'Hello this is my test dropbox map'
-   *      }
-   *    },
-   *    // pass csv here if your provider currently only support save / load file as csv
-   *    format: 'keplergl'
-   *  };
-   *
-   *  return downloadMap;
-   * }
-   */
-  async downloadMap(loadParams) {
-    return;
-  }
-
-  /**
-   * @typedef {Object} Viz
-   * @property {string} id - An unique id
-   * @property {string} title - The title of the map
-   * @property {string} description - The description of the map
-   * @property {string} imageUrl - The imageUrl of the map
-   * @property {number} lastModification - An epoch timestamp in milliseconds
-   * @property {boolean} privateMap - Optional, whether if this map is private to the user, or can be accessed by others via URL
-   * @property {*} loadParams - A property to be passed to `downloadMap`
-   * @public
-   */
-
-  /**
-   * The returned object of `downloadMap`. The response object should contain: datasets: [], config: {}, and info: {}
-   * each dataset object should be {info: {id, label}, data: {...}}
-   * to inform how kepler should process your data object, pass in `format`
-   * @typedef {Object} MapResponse
-   * @property {Object} map
-   * @property {Array<Object>} map.datasets
-   * @property {Object} map.config
-   * @property {Object} map.info
-   * @property {string} format - one of 'csv': csv file string, 'geojson': geojson object, 'row': row object, 'keplergl': datasets array saved using KeplerGlSchema.save
-   * @public
-   */
-}

package/src/components/bottom-widget.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-import {Datasets, Filter, AnimationConfig} from 'reducers/vis-state-updaters';
-import {UiState} from 'reducers/ui-state-updaters';
-import * as UIStateActions from 'actions/ui-state-actions';
-import * as VisStateActions from 'actions/vis-state-actions';
-import {Layer} from 'layers';
-
-export type BottomWidgetProps = {
-  datasets: Datasets;
-  filters: Filter[];
-  layers: Layer[];
-  animationConfig: AnimationConfig;
-  uiStateActions: typeof UIStateActions;
-  visStateActions: typeof VisStateActions;
-  rootRef: React.ForwardedRef<HTMLDivElement>;
-  containerW: number;
-  uiState: UiState;
-  sidePanelWidth: number;
-  toggleModal: typeof UIStateActions.toggleModal;
-  children?: React.ReactNode;
-};
-
-export function BottomWidgetFactory(
-  TimeWidget: typeof React.Component,
-  AnimationControl: typeof React.Component,
-  FilterAnimationController: typeof React.Component,
-  LayerAnimationController: typeof React.Component
-): any;
-
-export default BottomWidgetFactory;
-
-export function LayerAnimationControllerFactory(): React.Component;
-export function FilterAnimationControllerFactory(): React.Component;

package/src/components/bottom-widget.js

@@ -1,235 +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 React, {useCallback, forwardRef, useMemo} from 'react';
-import styled from 'styled-components';
-import TimeWidgetFactory from './filters/time-widget';
-import AnimationControlFactory from './common/animation-control/animation-control';
-import AnimationControllerFactory from './common/animation-control/animation-controller';
-import {ANIMATION_WINDOW, FILTER_TYPES} from 'constants/default-settings';
-import {getIntervalBins} from 'utils/filter-utils';
-import {media} from 'styles/media-breakpoints';
-
-const maxWidth = 1080;
-
-const BottomWidgetContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding-top: ${props => (props.hasPadding ? props.theme.bottomWidgetPaddingTop : 0)}px;
-  padding-right: ${props => (props.hasPadding ? props.theme.bottomWidgetPaddingRight : 0)}px;
-  padding-bottom: ${props => (props.hasPadding ? props.theme.bottomWidgetPaddingBottom : 0)}px;
-  padding-left: ${props => (props.hasPadding ? props.theme.bottomWidgetPaddingLeft : 0)}px;
-  pointer-events: none !important; /* prevent padding from blocking input */
-  & > * {
-    /* all children should allow input */
-    pointer-events: all;
-  }
-  width: ${props => props.width}px;
-  z-index: 1;
-  ${media.portable`padding: 0;`}
-`;
-
-FilterAnimationControllerFactory.deps = [AnimationControllerFactory];
-export function FilterAnimationControllerFactory(AnimationController) {
-  const FilterAnimationController = ({filter, filterIdx, setFilterAnimationTime, children}) => {
-    const intervalBins = useMemo(() => getIntervalBins(filter), [filter]);
-
-    const steps = useMemo(() => (intervalBins ? intervalBins.map(x => x.x0) : null), [
-      intervalBins
-    ]);
-
-    const updateAnimation = useCallback(
-      value => {
-        switch (filter.animationWindow) {
-          case ANIMATION_WINDOW.interval:
-            const idx = value[1];
-            setFilterAnimationTime(filterIdx, 'value', [
-              intervalBins[idx].x0,
-              intervalBins[idx].x1 - 1
-            ]);
-            break;
-          default:
-            setFilterAnimationTime(filterIdx, 'value', value);
-            break;
-        }
-      },
-      [filterIdx, intervalBins, filter.animationWindow, setFilterAnimationTime]
-    );
-
-    return (
-      <AnimationController
-        key="filter-control"
-        value={filter.value}
-        domain={filter.domain}
-        speed={filter.speed}
-        isAnimating={filter.isAnimating}
-        animationWindow={filter.animationWindow}
-        steps={steps}
-        updateAnimation={updateAnimation}
-        children={children}
-      />
-    );
-  };
-  return FilterAnimationController;
-}
-
-LayerAnimationControllerFactory.deps = [AnimationControllerFactory];
-export function LayerAnimationControllerFactory(AnimationController) {
-  const LayerAnimationController = ({animationConfig, setLayerAnimationTime, children}) => (
-    <AnimationController
-      key="layer-control"
-      value={animationConfig.currentTime}
-      domain={animationConfig.domain}
-      speed={animationConfig.speed}
-      isAnimating={animationConfig.isAnimating}
-      updateAnimation={setLayerAnimationTime}
-      steps={animationConfig.timeSteps}
-      animationWindow={
-        animationConfig.timeSteps ? ANIMATION_WINDOW.interval : ANIMATION_WINDOW.point
-      }
-      children={children}
-    />
-  );
-  return LayerAnimationController;
-}
-
-BottomWidgetFactory.deps = [
-  TimeWidgetFactory,
-  AnimationControlFactory,
-  FilterAnimationControllerFactory,
-  LayerAnimationControllerFactory
-];
-
-/* eslint-disable complexity */
-export default function BottomWidgetFactory(
-  TimeWidget,
-  AnimationControl,
-  FilterAnimationController,
-  LayerAnimationController
-) {
-  const BottomWidget = props => {
-    const {
-      datasets,
-      filters,
-      animationConfig,
-      visStateActions,
-      containerW,
-      uiState,
-      sidePanelWidth,
-      layers
-    } = props;
-
-    const {activeSidePanel, readOnly} = uiState;
-    const isOpen = Boolean(activeSidePanel);
-
-    const enlargedFilterIdx = useMemo(
-      () => filters.findIndex(f => f.enlarged && f.type === FILTER_TYPES.timeRange),
-      [filters]
-    );
-    const animatedFilterIdx = useMemo(() => filters.findIndex(f => f.isAnimating), [filters]);
-    const animatedFilter = animatedFilterIdx > -1 ? filters[animatedFilterIdx] : null;
-
-    const enlargedFilterWidth = isOpen ? containerW - sidePanelWidth : containerW;
-
-    // show playback control if layers contain trip layer & at least one trip layer is visible
-    const animatableLayer = useMemo(
-      () =>
-        layers.filter(l => l.config.animation && l.config.animation.enabled && l.config.isVisible),
-      [layers]
-    );
-
-    const readyToAnimation =
-      Array.isArray(animationConfig.domain) && Number.isFinite(animationConfig.currentTime);
-    // if animation control is showing, hide time display in time slider
-    const showFloatingTimeDisplay = !animatableLayer.length;
-    const showAnimationControl =
-      animatableLayer.length && readyToAnimation && !animationConfig.hideControl;
-    const showTimeWidget = enlargedFilterIdx > -1 && Object.keys(datasets).length > 0;
-
-    // if filter is not animating, pass in enlarged filter here because
-    // animation controller needs to call reset on it
-    const filter = animatedFilter || filters[enlargedFilterIdx];
-
-    return (
-      <BottomWidgetContainer
-        width={Math.min(maxWidth, enlargedFilterWidth)}
-        className="bottom-widget--container"
-        hasPadding={showAnimationControl || showTimeWidget}
-      >
-        <LayerAnimationController
-          animationConfig={animationConfig}
-          setLayerAnimationTime={visStateActions.setLayerAnimationTime}
-        >
-          {(isAnimating, start, pause, reset) =>
-            showAnimationControl ? (
-              <AnimationControl
-                animationConfig={animationConfig}
-                setLayerAnimationTime={visStateActions.setLayerAnimationTime}
-                updateAnimationSpeed={visStateActions.updateLayerAnimationSpeed}
-                toggleAnimation={visStateActions.toggleLayerAnimation}
-                isAnimatable={!animatedFilter}
-                isAnimating={isAnimating}
-                resetAnimation={reset}
-              />
-            ) : null
-          }
-        </LayerAnimationController>
-        {filter && (
-          <FilterAnimationController
-            filter={filter}
-            filterIdx={animatedFilterIdx > -1 ? animatedFilterIdx : enlargedFilterIdx}
-            setFilterAnimationTime={visStateActions.setFilterAnimationTime}
-          >
-            {(isAnimating, start, pause, resetAnimation) =>
-              showTimeWidget ? (
-                <TimeWidget
-                  // TimeWidget uses React.memo, here we pass width
-                  // even though it doesnt use it, to force rerender
-                  width={enlargedFilterWidth}
-                  filter={filters[enlargedFilterIdx]}
-                  index={enlargedFilterIdx}
-                  isAnyFilterAnimating={Boolean(animatedFilter)}
-                  datasets={datasets}
-                  readOnly={readOnly}
-                  showTimeDisplay={showFloatingTimeDisplay}
-                  setFilterPlot={visStateActions.setFilterPlot}
-                  setFilter={visStateActions.setFilter}
-                  setFilterAnimationTime={visStateActions.setFilterAnimationTime}
-                  setFilterAnimationWindow={visStateActions.setFilterAnimationWindow}
-                  toggleAnimation={visStateActions.toggleFilterAnimation}
-                  updateAnimationSpeed={visStateActions.updateFilterAnimationSpeed}
-                  enlargeFilter={visStateActions.enlargeFilter}
-                  resetAnimation={resetAnimation}
-                  isAnimatable={!animationConfig || !animationConfig.isAnimating}
-                />
-              ) : null
-            }
-          </FilterAnimationController>
-        )}
-      </BottomWidgetContainer>
-    );
-  };
-
-  /* eslint-disable react/display-name */
-  // @ts-ignore
-  return forwardRef((props, ref) => <BottomWidget {...props} rootRef={ref} />);
-  /* eslint-enable react/display-name */
-}
-/* eslint-enable complexity */

package/src/components/common/action-panel.d.ts

@@ -1,24 +0,0 @@
-import {FunctionComponent, PropsWithChildren, ComponentType, CSSProperties} from 'react';
-
-export type ActionPanelItemProps = PropsWithChildren<{
-  color?: string,
-  className?: string,
-  Icon?: ComponentType<any>,
-  label: string,
-  onClick?: () => void,
-  isSelection?: boolean,
-  isActive?: boolean,
-  style?: CSSProperties
-}>;
-
-export const ActionPanelItem: FunctionComponent<ActionPanelItemProps>;
-
-export type ActionPanelProps = PropsWithChildren<{
-  color?: string,
-  className?: string,
-  direction?: string
-}>;
-
-export const ActionPanel: FunctionComponent<ActionPanelProps>;
-
-export default ActionPanel;