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

package/src/components/side-panel.js

@@ -0,0 +1,253 @@
+// 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, useMemo} from 'react';
+import {FormattedMessage} from 'localization';
+
+import {
+  EXPORT_DATA_ID,
+  EXPORT_MAP_ID,
+  SHARE_MAP_ID,
+  SIDEBAR_PANELS,
+  OVERWRITE_MAP_ID,
+  SAVE_MAP_ID,
+  EXPORT_IMAGE_ID,
+  ADD_DATA_ID,
+  ADD_MAP_STYLE_ID
+} from 'constants/default-settings';
+
+import SidebarFactory from './side-panel/side-bar';
+import PanelHeaderFactory from './side-panel/panel-header';
+import PanelToggleFactory from './side-panel/panel-toggle';
+import LayerManagerFactory from './side-panel/layer-manager';
+import FilterManagerFactory from './side-panel/filter-manager';
+import InteractionManagerFactory from './side-panel/interaction-manager';
+import MapManagerFactory from './side-panel/map-manager';
+import CustomPanelsFactory from './side-panel/custom-panel';
+import PanelTitleFactory from './side-panel/panel-title';
+
+import styled from 'styled-components';
+import get from 'lodash.get';
+
+export const StyledSidePanelContent = styled.div`
+  ${props => props.theme.sidePanelScrollBar};
+  flex-grow: 1;
+  padding: ${props => props.theme.sidePanelInnerPadding}px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+
+  .side-panel__content__inner {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+  }
+`;
+
+SidePanelFactory.deps = [
+  SidebarFactory,
+  PanelHeaderFactory,
+  PanelToggleFactory,
+  PanelTitleFactory,
+  LayerManagerFactory,
+  FilterManagerFactory,
+  InteractionManagerFactory,
+  MapManagerFactory,
+  CustomPanelsFactory
+];
+
+/**
+ * Vertical sidebar containing input components for the rendering layers
+ */
+export default function SidePanelFactory(
+  Sidebar,
+  PanelHeader,
+  PanelToggle,
+  PanelTitle,
+  LayerManager,
+  FilterManager,
+  InteractionManager,
+  MapManager,
+  CustomPanels
+) {
+  // inject components
+  const SIDEBAR_COMPONENTS = {
+    layer: LayerManager,
+    filter: FilterManager,
+    interaction: InteractionManager,
+    map: MapManager
+  };
+
+  // We should defined sidebar panels here but keeping them for backward compatible
+  const fullPanels = SIDEBAR_PANELS.map(component => ({
+    ...component,
+    component: SIDEBAR_COMPONENTS[component.id]
+  }));
+
+  const getCustomPanelProps = get(CustomPanels, ['defaultProps', 'getProps']) || (() => ({}));
+
+  /** @type {typeof import('./side-panel').SidePanel} */
+  // eslint-disable-next-line max-statements
+  const SidePanel = props => {
+    const {
+      appName,
+      appWebsite,
+      availableProviders,
+      datasets,
+      filters,
+      layers,
+      layerBlending,
+      layerClasses,
+      layerOrder,
+      interactionConfig,
+      panels,
+      mapInfo,
+      mapSaved,
+      mapStateActions,
+      mapStyle,
+      mapStyleActions,
+      onSaveMap,
+      uiState,
+      uiStateActions,
+      visStateActions,
+      version,
+      width
+    } = props;
+    const {openDeleteModal, toggleModal, toggleSidePanel} = uiStateActions;
+    const {activeSidePanel} = uiState;
+    const {setMapInfo, showDatasetTable} = visStateActions;
+    const {hasShare, hasStorage} = availableProviders;
+
+    const {title} = mapInfo;
+
+    const isOpen = Boolean(activeSidePanel);
+
+    const _onOpenOrClose = useCallback(() => toggleSidePanel(activeSidePanel ? null : 'layer'), [
+      activeSidePanel,
+      toggleSidePanel
+    ]);
+
+    const onClickExportImage = useCallback(() => toggleModal(EXPORT_IMAGE_ID), [toggleModal]);
+    const onClickExportData = useCallback(() => toggleModal(EXPORT_DATA_ID), [toggleModal]);
+    const onClickExportMap = useCallback(() => toggleModal(EXPORT_MAP_ID), [toggleModal]);
+    const onClickSaveToStorage = useCallback(
+      () => toggleModal(mapSaved ? OVERWRITE_MAP_ID : SAVE_MAP_ID),
+      [mapSaved, toggleModal]
+    );
+    const onClickSaveAsToStorage = useCallback(() => {
+      setMapInfo({
+        title: `${title || 'Kepler.gl'} (Copy)`
+      });
+
+      toggleModal(SAVE_MAP_ID);
+    }, [title, setMapInfo, toggleModal]);
+    const onClickShareMap = useCallback(() => toggleModal(SHARE_MAP_ID), [toggleModal]);
+    const onShowDatasetTable = useCallback(dataId => showDatasetTable(dataId), [showDatasetTable]);
+    const onShowAddDataModal = useCallback(() => toggleModal(ADD_DATA_ID), [toggleModal]);
+    const onShowAddMapStyleModal = useCallback(() => toggleModal(ADD_MAP_STYLE_ID), [toggleModal]);
+    const onRemoveDataset = useCallback(dataId => openDeleteModal(dataId), [openDeleteModal]);
+    const onSaveToStorage = useMemo(() => ((hasStorage ? onClickSaveToStorage : null)), [
+      hasStorage,
+      onClickSaveToStorage
+    ]);
+    const onSaveAsToStorage = useMemo(
+      () => ((hasStorage && mapSaved ? onClickSaveAsToStorage : null)),
+      [hasStorage, mapSaved, onClickSaveAsToStorage]
+    );
+    const currentPanel = useMemo(() => panels.find(({id}) => id === activeSidePanel) || {}, [
+      activeSidePanel,
+      panels
+    ]);
+    const onShareMap = useMemo(() => ((hasShare ? onClickShareMap : null)), [
+      hasShare,
+      onClickShareMap
+    ]);
+    const customPanelProps = useMemo(() => getCustomPanelProps(props), [props]);
+
+    const PanelComponent = currentPanel.component;
+
+    return (
+      <Sidebar width={width} isOpen={isOpen} minifiedWidth={0} onOpenOrClose={_onOpenOrClose}>
+        <PanelHeader
+          appName={appName}
+          version={version}
+          appWebsite={appWebsite}
+          visibleDropdown={uiState.visibleDropdown}
+          showExportDropdown={uiStateActions.showExportDropdown}
+          hideExportDropdown={uiStateActions.hideExportDropdown}
+          onExportImage={onClickExportImage}
+          onExportData={onClickExportData}
+          onExportMap={onClickExportMap}
+          onSaveMap={onSaveMap}
+          onSaveToStorage={onSaveToStorage}
+          onSaveAsToStorage={onSaveAsToStorage}
+          onShareMap={onShareMap}
+        />
+        {/* the next two components should be moved into one */}
+        {/* but i am keeping them because of backward compatibility */}
+        <PanelToggle
+          panels={panels}
+          activePanel={activeSidePanel}
+          togglePanel={uiStateActions.toggleSidePanel}
+        />
+        <StyledSidePanelContent className="side-panel__content">
+          <div className="side-panel__content__inner">
+            <PanelTitle className="side-panel__content__title">
+              <FormattedMessage id={currentPanel.label} />
+            </PanelTitle>
+            {PanelComponent ? (
+              <PanelComponent
+                datasets={datasets}
+                filters={filters}
+                layers={layers}
+                layerClasses={layerClasses}
+                layerOrder={layerOrder}
+                layerBlending={layerBlending}
+                mapStyle={mapStyle}
+                mapStyleActions={mapStyleActions}
+                mapStateActions={mapStateActions}
+                interactionConfig={interactionConfig}
+                removeDataset={onRemoveDataset}
+                showDatasetTable={onShowDatasetTable}
+                showAddDataModal={onShowAddDataModal}
+                showAddMapStyleModal={onShowAddMapStyleModal}
+                uiStateActions={uiStateActions}
+                visStateActions={visStateActions}
+              />
+            ) : null}
+            <CustomPanels {...customPanelProps} activeSidePanel={activeSidePanel} />
+          </div>
+        </StyledSidePanelContent>
+      </Sidebar>
+    );
+  };
+
+  SidePanel.defaultProps = {
+    panels: fullPanels,
+    sidebarComponents: SIDEBAR_COMPONENTS,
+    uiState: {},
+    visStateActions: {},
+    mapStyleActions: {},
+    uiStateActions: {},
+    availableProviders: {},
+    mapInfo: {}
+  };
+
+  return SidePanel;
+}

package/src/connect/keplergl-connect.js

@@ -0,0 +1,47 @@
+// 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 {connect as reduxConnect} from 'react-redux';
+import withLocalSelector from './with-local-selector';
+
+const defaultMapStateToProps = (state, _, __) => state;
+const defaultMapDispatchToProps = () => (dispatch, _, __) => ({dispatch});
+
+export const connect = (
+  mapStateToProps = defaultMapStateToProps,
+  makeMapDispatchToProps = defaultMapDispatchToProps,
+  reduxMergeProps,
+  options
+) => BaseComponent => {
+  const mapDispatchToProps = makeMapDispatchToProps();
+  const reduxMapState = (state, props) => mapStateToProps(props.selector(state), props, state);
+
+  const reduxMapDispatch = (dispatch, props) => mapDispatchToProps(props.dispatch, props, dispatch);
+
+  const ReduxComponent = reduxConnect(
+    reduxMapState,
+    reduxMapDispatch,
+    reduxMergeProps,
+    options
+  )(BaseComponent);
+
+  // save selector to context so it can be accessed by its children
+  return withLocalSelector(ReduxComponent);
+};

package/src/connect/with-local-selector.d.ts

@@ -0,0 +1,11 @@
+import {Component} from 'react';
+import KeplerGlContext from 'components/context';
+import {ConnectedComponent} from 'react-redux';
+
+interface ContextSelector {
+  (state: any, context: any): KeplerGlContext;
+}
+
+export default function withLocalSelector<P, S>(
+  component: ConnectedComponent<P, S>
+): Component<P, S>;

package/src/connect/with-local-selector.js

@@ -0,0 +1,67 @@
+// 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 {createSelector} from 'reselect';
+import KeplerGlContext from 'components/context';
+
+const identity = state => state;
+
+const mergeSelectors = (parentSelector, childSelector) => state =>
+  childSelector(parentSelector(state));
+
+// store the parent selector in the parent context
+// and return the parent component
+// when a selector is passed to a container component,
+// it will be stored in the context and passed down to child components,
+// as well as prop to the given component
+const withLocalSelector = ParentComponent => {
+  class WithConnectSelector extends Component {
+    static contextType = KeplerGlContext;
+
+    selectorFromContext = (_, ctx) => (ctx.selector ? ctx.selector : identity);
+    selectorFromProps = (props, _) => (props.selector ? props.selector : identity);
+    idFromProps = (props, _) => props.id;
+    computedSelector = createSelector(
+      this.selectorFromContext,
+      this.selectorFromProps,
+      (ctx, props) => mergeSelectors(ctx, props)
+    );
+    // TODO: This is tricky to type, revisit
+    /** @type import('./with-local-selector').ContextSelector */
+    contextSelector = createSelector(this.computedSelector, this.idFromProps, (selector, id) => ({
+      selector,
+      id
+    }));
+
+    render() {
+      const computedContext = this.contextSelector(this.props, this.context);
+      return (
+        <KeplerGlContext.Provider value={computedContext}>
+          <ParentComponent {...this.props} selector={computedContext.selector} />
+        </KeplerGlContext.Provider>
+      );
+    }
+  }
+
+  return WithConnectSelector;
+};
+
+export default withLocalSelector;

package/src/constants/action-types.d.ts

@@ -0,0 +1,135 @@
+export type ActionType = {
+  // identity action
+  REGISTER_ENTRY: string;
+  DELETE_ENTRY: string;
+  RENAME_ENTRY: string;
+
+  // visState
+  ADD_DATA: string;
+  ADD_FILTER: string;
+  ADD_LAYER: string;
+  INTERACTION_CONFIG_CHANGE: string;
+  LAYER_CONFIG_CHANGE: string;
+  LAYER_VISUAL_CHANNEL_CHANGE: string;
+  LAYER_TYPE_CHANGE: string;
+  LAYER_VIS_CONFIG_CHANGE: string;
+  LAYER_TEXT_LABEL_CHANGE: string;
+  LAYER_HOVER: string;
+  LAYER_CLICK: string;
+  MAP_CLICK: string;
+  MOUSE_MOVE: string;
+  REMOVE_FILTER: string;
+  REMOVE_LAYER: string;
+  DUPLICATE_LAYER: string;
+  REMOVE_DATASET: string;
+  REORDER_LAYER: string;
+  SET_FILTER: string;
+  SET_FILTER_ANIMATION_TIME: string;
+  SET_FILTER_ANIMATION_TIME_CONFIG:  string;
+  SET_FILTER_ANIMATION_WINDOW: string;
+  SHOW_DATASET_TABLE: string;
+  UPDATE_LAYER_BLENDING: string;
+  UPDATE_VIS_DATA: string;
+  RENAME_DATASET: string;
+  TOGGLE_FILTER_ANIMATION: string;
+  UPDATE_FILTER_ANIMATION_SPEED: string;
+  PLAY_ANIMATION: string;
+  SET_LAYER_ANIMATION_TIME: string;
+  SET_LAYER_ANIMATION_TIME_CONFIG: string;
+  UPDATE_ANIMATION_SPEED: string;
+  UPDATE_LAYER_ANIMATION_SPEED: string;
+  TOGGLE_LAYER_CONFIG_ACTIVE: string;
+  TOGGLE_LAYER_ANIMATION: string;
+  TOGGLE_LAYER_ANIMATION_CONTROL: string;
+  ENLARGE_FILTER: string;
+  TOGGLE_FILTER_FEATURE: string;
+  SET_VISIBLE_LAYERS_FOR_MAP: string;
+  TOGGLE_LAYER_FOR_MAP: string;
+  SET_FILTER_PLOT: string;
+  LOAD_FILES: string;
+  LOAD_NEXT_FILE: string;
+  LOAD_FILES_ERR: string;
+  LOAD_FILES_SUCCESS: string;
+  LOAD_FILE_STEP_SUCCESS: string;
+  LAYER_COLOR_UI_CHANGE: string;
+  TOGGLE_FEATURE_LAYER: string;
+  APPLY_CPU_FILTER: string;
+  SET_MAP_INFO: string;
+  SORT_TABLE_COLUMN: string;
+  PIN_TABLE_COLUMN: string;
+  COPY_TABLE_COLUMN: string;
+  NEXT_FILE_BATCH: string;
+  PROCESS_FILE_CONTENT: string;
+
+  // mapState
+  UPDATE_MAP: string;
+  FIT_BOUNDS: string;
+  TOGGLE_PERSPECTIVE: string;
+  TOGGLE_SPLIT_MAP: string;
+  TOGGLE_FULLSCREEN: string;
+
+  // mapStyle
+  MAP_CONFIG_CHANGE: string;
+  SET_DEFAULT_MAP_STYLE: string;
+  MAP_STYLE_CHANGE: string;
+  LOAD_MAP_STYLES: string;
+  LOAD_MAP_STYLE_ERR: string;
+  INPUT_MAP_STYLE: string;
+  LOAD_CUSTOM_MAP_STYLE: string;
+  ADD_CUSTOM_MAP_STYLE: string;
+  REQUEST_MAP_STYLES: string;
+  SET_3D_BUILDING_COLOR: string;
+
+  // uiState
+  TOGGLE_SIDE_PANEL: string;
+  TOGGLE_MODAL: string;
+  SHOW_EXPORT_DROPDOWN: string;
+  HIDE_EXPORT_DROPDOWN: string;
+  OPEN_DELETE_MODAL: string;
+  TOGGLE_MAP_CONTROL: string;
+  SET_MAP_CONTROL_VISIBILITY: string;
+  ADD_NOTIFICATION: string;
+  REMOVE_NOTIFICATION: string;
+  SET_LOCALE: string;
+
+  // uiState > export image
+  SET_EXPORT_IMAGE_SETTING: string;
+  START_EXPORTING_IMAGE: string;
+  SET_EXPORT_IMAGE_DATA_URI: string;
+  SET_EXPORT_IMAGE_ERROR: string;
+  CLEANUP_EXPORT_IMAGE: string;
+
+  // uiState > export data
+  SET_EXPORT_SELECTED_DATASET: string;
+  SET_EXPORT_DATA_TYPE: string;
+  SET_EXPORT_FILTERED: string;
+  SET_EXPORT_DATA: string;
+
+  // uiState > export map
+  SET_EXPORT_MAP_FORMAT: string;
+  SET_USER_MAPBOX_ACCESS_TOKEN: string;
+  SET_EXPORT_MAP_HTML_MODE: string;
+
+  // uiState > editor
+  SET_EDITOR_MODE: string;
+  SET_SELECTED_FEATURE: string;
+
+  // all
+  INIT: string;
+  ADD_DATA_TO_MAP: string;
+  RECEIVE_MAP_CONFIG: string;
+  RESET_MAP_CONFIG: string;
+
+  // geo-operations
+  SET_FEATURES: string;
+  SET_POLYGON_FILTER_LAYER: string;
+  DELETE_FEATURE: string;
+  TOGGLE_EDITOR_VISIBILITY: string;
+
+  // storage
+  START_SAVE_STORAGE: string;
+};
+
+export const ActionTypes: ActionType;
+export const ACTION_PREFIX: string;
+export default ActionTypes;