@carto/kepler.gl 0.0.76 → 0.0.78-0

package/src/cloud-providers/index.ts

@@ -0,0 +1,22 @@
+// 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';
+export type {MapListItem, Millisecond, Thumbnail, ProviderProps} from './provider';

package/src/cloud-providers/provider.ts

@@ -0,0 +1,277 @@
+// 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';
+import {MapData, ExportFileOptions} from 'actions/provider-actions';
+import {ComponentType} from 'react';
+
+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;
+};
+
+export interface IconProps {
+  height?: string;
+  width?: string;
+}
+
+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 {
+  name: string;
+  displayName: string;
+  icon: ComponentType<IconProps>;
+  thumbnail: Thumbnail;
+  getManagementUrl?: () => string;
+
+  constructor(props: ProviderProps) {
+    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
+   * @public
+   */
+  hasPrivateStorage(): boolean {
+    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
+   * @public
+   */
+  hasSharingUrl(): boolean {
+    return true;
+  }
+
+  /**
+   * This method is called after user share a map, to display the share url.
+   * @param fullUrl - Whether to return the full url with domain, or just the location
+   * @returns shareUrl
+   * @public
+   */
+  getShareUrl(fullUrl: boolean = false): string {
+    return '';
+  }
+
+  /**
+   * This method is called by kepler.gl demo app to pushes a new location to history, becoming the current location.
+   * @param fullURL - Whether to return the full url with domain, or just the location
+   * @returns mapUrl
+   * @public
+   */
+  getMapUrl(fullURL: boolean = true): string {
+    return '';
+  }
+
+  /**
+   * This method is called to determine whether user already logged in to this provider
+   * @public
+   * @returns true if a user already logged in
+   */
+  getAccessToken(): boolean {
+    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 true if a user already logged in
+   */
+  getUserName(): string {
+    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: () => void) {
+    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 = {}
+  }: {
+    mapData: MapData;
+    options: ExportFileOptions;
+  }): Promise<any> {
+    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(): Promise<MapListItem[]> {
+    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): Promise<{map: MapData; format: string}> {
+    // @ts-expect-error
+    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.tsx

@@ -0,0 +1,275 @@
+// 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, DIMENSIONS, FILTER_TYPES} from 'constants/default-settings';
+import {getIntervalBins} from 'utils/filter-utils';
+import {media} from 'styles/media-breakpoints';
+import {AnimationConfig, TimeRangeFilter} from 'reducers';
+import {bottomWidgetSelector} from './kepler-gl';
+
+const maxWidth = 1080;
+
+interface BottomWidgetContainerProps {
+  hasPadding?: boolean;
+  width?: number;
+}
+
+const BottomWidgetContainer = styled.div<BottomWidgetContainerProps>`
+  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;`}
+`;
+
+interface FilterAnimationControllerProps {
+  filter: TimeRangeFilter & {animationWindow?: string};
+  filterIdx: number;
+  setFilterAnimationTime: (idx: number, value: string, a: any[]) => void;
+}
+
+FilterAnimationControllerFactory.deps = [AnimationControllerFactory];
+export function FilterAnimationControllerFactory(
+  AnimationController: ReturnType<typeof AnimationControllerFactory>
+) {
+  const FilterAnimationController: React.FC<FilterAnimationControllerProps> = ({
+    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;
+}
+
+interface LayerAnimationControllerProps {
+  animationConfig: AnimationConfig & {timeSteps?: number[] | null};
+  setLayerAnimationTime: (x: number) => void;
+}
+
+LayerAnimationControllerFactory.deps = [AnimationControllerFactory];
+export function LayerAnimationControllerFactory(
+  AnimationController: ReturnType<typeof AnimationControllerFactory>
+) {
+  const LayerAnimationController: React.FC<LayerAnimationControllerProps> = ({
+    animationConfig,
+    setLayerAnimationTime,
+    children
+  }) => (
+    <AnimationController<number>
+      key="layer-control"
+      value={Number(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;
+}
+
+type BottomWidgetProps = {
+  containerW: number;
+} & ReturnType<typeof bottomWidgetSelector>;
+
+BottomWidgetFactory.deps = [
+  TimeWidgetFactory,
+  AnimationControlFactory,
+  FilterAnimationControllerFactory,
+  LayerAnimationControllerFactory
+];
+
+/* eslint-disable complexity */
+export default function BottomWidgetFactory(
+  TimeWidget: ReturnType<typeof TimeWidgetFactory>,
+  AnimationControl: ReturnType<typeof AnimationControlFactory>,
+  FilterAnimationController: ReturnType<typeof FilterAnimationControllerFactory>,
+  LayerAnimationController: ReturnType<typeof LayerAnimationControllerFactory>
+) {
+  const BottomWidget = (props: BottomWidgetProps) => {
+    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 isLegendPinned =
+      uiState.mapControls?.mapLegend?.show && uiState.mapControls?.mapLegend?.active;
+    const spaceForLegendWidth = isLegendPinned
+      ? DIMENSIONS.mapControl.width + DIMENSIONS.mapControl.mapLegend.pinned.right
+      : 0;
+
+    const enlargedFilterWidth =
+      (isOpen ? containerW - sidePanelWidth : containerW) - spaceForLegendWidth;
+
+    // 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 as TimeRangeFilter) || filters[enlargedFilterIdx];
+
+    return (
+      <BottomWidgetContainer
+        width={Math.min(maxWidth, enlargedFilterWidth)}
+        style={{marginRight: spaceForLegendWidth}}
+        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
+                  filter={filters[enlargedFilterIdx] as TimeRangeFilter}
+                  index={enlargedFilterIdx}
+                  datasets={datasets}
+                  readOnly={readOnly}
+                  showTimeDisplay={showFloatingTimeDisplay}
+                  setFilterPlot={visStateActions.setFilterPlot}
+                  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: BottomWidgetProps, ref) => <BottomWidget {...props} rootRef={ref} />);
+  /* eslint-enable react/display-name */
+}
+/* eslint-enable complexity */