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

package/src/reducers/root.js

@@ -0,0 +1,230 @@
+// 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 {handleActions} from 'redux-actions';
+
+import {_actionFor, _updateProperty} from '../actions/action-wrapper';
+import {keplerGlInit} from '../actions/actions';
+import {coreReducerFactory} from './core';
+import ActionTypes from 'constants/action-types';
+
+// INITIAL_STATE
+const initialCoreState = {};
+
+export function provideInitialState(initialState) {
+  const coreReducer = coreReducerFactory(initialState);
+
+  const handleRegisterEntry = (
+    state,
+    {
+      payload: {
+        id,
+        mint,
+        mapboxApiAccessToken,
+        mapboxApiUrl,
+        mapStylesReplaceDefault,
+        initialUiState
+      }
+    }
+  ) => {
+    // by default, always create a mint state even if the same id already exist
+    // if state.id exist and mint=false, keep the existing state
+    const previousState = state[id] && mint === false ? state[id] : undefined;
+
+    return {
+      // register entry to kepler.gl passing in mapbox config to mapStyle
+      ...state,
+      [id]: coreReducer(
+        previousState,
+        keplerGlInit({mapboxApiAccessToken, mapboxApiUrl, mapStylesReplaceDefault, initialUiState})
+      )
+    };
+  };
+
+  const handleDeleteEntry = (state, {payload: id}) =>
+    Object.keys(state).reduce(
+      (accu, curr) => ({
+        ...accu,
+        ...(curr === id ? {} : {[curr]: state[curr]})
+      }),
+      {}
+    );
+
+  const handleRenameEntry = (state, {payload: {oldId, newId}}) =>
+    Object.keys(state).reduce(
+      (accu, curr) => ({
+        ...accu,
+        ...{[curr === oldId ? newId : curr]: state[curr]}
+      }),
+      {}
+    );
+
+  return (state = initialCoreState, action) => {
+    // update child states
+    Object.keys(state).forEach(id => {
+      const updateItemState = coreReducer(state[id], _actionFor(id, action));
+      state = _updateProperty(state, id, updateItemState);
+    });
+
+    // perform additional state reducing (e.g. switch action.type etc...)
+    const handlers = {
+      [ActionTypes.REGISTER_ENTRY]: handleRegisterEntry,
+      [ActionTypes.DELETE_ENTRY]: handleDeleteEntry,
+      [ActionTypes.RENAME_ENTRY]: handleRenameEntry
+    };
+
+    // @ts-ignore
+    return handleActions(handlers, initialCoreState)(state, action);
+  };
+}
+
+const _keplerGlReducer = provideInitialState();
+
+function mergeInitialState(saved = {}, provided = {}) {
+  const keys = ['mapState', 'mapStyle', 'visState', 'uiState'];
+
+  // shallow merge each reducer
+  return keys.reduce(
+    (accu, key) => ({
+      ...accu,
+      ...(saved[key] && provided[key]
+        ? {[key]: {...saved[key], ...provided[key]}}
+        : {[key]: saved[key] || provided[key] || {}})
+    }),
+    {}
+  );
+}
+
+function decorate(target, savedInitialState = {}) {
+  const targetInitialState = savedInitialState;
+
+  /**
+   * Returns a kepler.gl reducer that will also pass each action through additional reducers spiecified.
+   * The parameter should be either a reducer map or a reducer function.
+   * The state passed into the additional action handler is the instance state.
+   * It will include all the subreducers `visState`, `uiState`, `mapState` and `mapStyle`.
+   * `.plugin` is only meant to be called once when mounting the keplerGlReducer to the store.
+   * **Note** This is an advanced option to give you more freedom to modify the internal state of the kepler.gl instance.
+   * You should only use this to adding additional actions instead of replacing default actions.
+   *
+   * @mixin keplerGlReducer.plugin
+   * @memberof keplerGlReducer
+   * @param {Object|Function} customReducer - A reducer map or a reducer
+   * @public
+   * @example
+   * const myKeplerGlReducer = keplerGlReducer
+   *  .plugin({
+   *    // 1. as reducer map
+   *    HIDE_AND_SHOW_SIDE_PANEL: (state, action) => ({
+   *      ...state,
+   *      uiState: {
+   *        ...state.uiState,
+   *        readOnly: !state.uiState.readOnly
+   *      }
+   *    })
+   *  })
+   * .plugin(handleActions({
+   *   // 2. as reducer
+   *   'HIDE_MAP_CONTROLS': (state, action) => ({
+   *     ...state,
+   *     uiState: {
+   *       ...state.uiState,
+   *       mapControls: hiddenMapControl
+   *     }
+   *   })
+   * }, {}));
+   */
+  target.plugin = function plugin(customReducer) {
+    if (typeof customReducer === 'object') {
+      // if only provided a reducerMap, wrap it in a reducer
+      customReducer = handleActions(customReducer, {});
+    }
+
+    // use 'function' keyword to enable 'this'
+    return decorate((state = {}, action = {}) => {
+      let nextState = this(state, action);
+
+      // for each entry in the staten
+      Object.keys(nextState).forEach(id => {
+        // update child states
+        nextState = _updateProperty(
+          nextState,
+          id,
+          customReducer(nextState[id], _actionFor(id, action))
+        );
+      });
+
+      return nextState;
+    });
+  };
+
+  /**
+   * Return a reducer that initiated with custom initial state.
+   * The parameter should be an object mapping from `subreducer` name to custom subreducer state,
+   * which will be shallow **merged** with default initial state.
+   *
+   * Default subreducer state:
+   *  - [`visState`](./vis-state.md#INITIAL_VIS_STATE)
+   *  - [`mapState`](./map-state.md#INITIAL_MAP_STATE)
+   *  - [`mapStyle`](./map-style.md#INITIAL_MAP_STYLE)
+   *  - [`uiState`](./ui-state.md#INITIAL_UI_STATE)
+   * @mixin keplerGlReducer.initialState
+   * @memberof keplerGlReducer
+   * @param {Object} iniSt - custom state to be merged with default initial state
+   * @public
+   * @example
+   * const myKeplerGlReducer = keplerGlReducer
+   *  .initialState({
+   *    uiState: {readOnly: true}
+   *  });
+   */
+  target.initialState = function initialState(iniSt) {
+    const merged = mergeInitialState(targetInitialState, iniSt);
+    const targetReducer = provideInitialState(merged);
+
+    return decorate(targetReducer, merged);
+  };
+
+  return target;
+}
+
+/**
+ * Kepler.gl reducer to be mounted to your store. You can mount `keplerGlReducer` at property `keplerGl`, if you choose
+ * to mount it at another address e.g. `foo` you will need to specify it when you mount `KeplerGl` component in your app with `getState: state => state.foo`
+ * @public
+ * @example
+ * import keplerGlReducer from 'kepler.gl/reducers';
+ * import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
+ * import {taskMiddleware} from 'react-palm/tasks';
+ *
+ * const initialState = {};
+ * const reducers = combineReducers({
+ *   // <-- mount kepler.gl reducer in your app
+ *   keplerGl: keplerGlReducer,
+ *
+ *   // Your other reducers here
+ *   app: appReducer
+ * });
+ *
+ * // using createStore
+ * export default createStore(reducer, initialState, applyMiddleware(taskMiddleware));
+ */
+const keplerGlReducer = decorate(_keplerGlReducer);
+export default keplerGlReducer;

package/src/reducers/types.d.ts

@@ -0,0 +1,10 @@
+export type RGBColor = [number, number, number];
+export type RGBAColor = [number, number, number, number];
+export type HexColor = string; // this is the best tpescript can do at the moment
+export type Millisecond = number;
+
+type ValueOf<T> = T[keyof T];
+
+type Merge<A, B> = {[K in keyof A]: K extends keyof B ? B[K] : A[K]} & B extends infer O
+  ? {[K in keyof O]: O[K]}
+  : never;

package/src/reducers/ui-state-updaters.d.ts

@@ -0,0 +1,198 @@
+import * as UiStateActions from 'actions/ui-state-actions';
+import {ToggleSplitMapUpdaterAction} from 'actions/map-state-actions';
+import {LoadFilesUpdaterAction, LoadFilesErrUpdaterAction} from ' actions/vis-state-actions';
+
+export type ExportImage = {
+  ratio: string;
+  resolution: string;
+  legend: boolean;
+  mapH: number;
+  mapW: number;
+  imageSize: {
+    zoomOffset: number;
+    scale: number;
+    imageW: number;
+    imageH: number;
+  };
+  // exporting state
+  imageDataUri: string;
+  exporting: boolean;
+  processing: boolean;
+  error: Error;
+};
+
+export type ExportData = {
+  selectedDataset: string;
+  dataType: string;
+  filtered: boolean;
+};
+
+export type ExportHtml = {
+  exportMapboxAccessToken: null | string;
+  userMapboxToken: string;
+  mode: string;
+};
+export type ExportJson = {
+  hasData: boolean;
+};
+export type ExportMap = {
+  HTML: ExportHtml;
+  JSON: ExportJson;
+  format: 'HTML' | 'JSON';
+};
+
+export type MapControl = {
+  show: boolean;
+  active: boolean;
+  disableClose?: boolean;
+  activeMapIndex?: number;
+};
+export type MapControls = {
+  visibleLayers: MapControl;
+  mapLegend: MapControl;
+  toggle3d: MapControl;
+  splitMap: MapControl;
+  mapDraw: MapControl;
+  mapLocale: MapControl;
+};
+
+export type LoadFiles = {
+  fileLoading: boolean;
+};
+
+export type Notifications = {
+  message: string;
+  type: string;
+  topic: string;
+  id: string;
+};
+
+export type Locale = string;
+
+export type UiState = {
+  readOnly: boolean;
+  activeSidePanel: string;
+  currentModal: string | null;
+  datasetKeyToRemove: string | null;
+  visibleDropdown: string | null;
+  // export image modal ui
+  exportImage: ExportImage;
+  // export data modal ui
+  exportData: ExportData;
+  // html export
+  exportMap: ExportMap;
+  // map control panels
+  mapControls: MapControls;
+  // ui notifications
+  notifications: Notifications[];
+  // load files
+  loadFiles: LoadFiles;
+  // Locale of the UI
+  locale: Locale;
+};
+
+export const DEFAULT_MAP_CONTROLS: MapControls;
+export const DEFAULT_EXPORT_IMAGE: ExportImage;
+export const INITIAL_UI_STATE: UiState;
+
+export function toggleSidePanelUpdater(
+  state: UiState,
+  action: UiStateActions.ToggleSidePanelUpdaterAction
+): UiState;
+export function toggleModalUpdater(
+  state: UiState,
+  action: UiStateActions.ToggleModalUpdaterAction
+): UiState;
+export function showExportDropdownUpdater(
+  state: UiState,
+  action: UiStateActions.ShowExportDropdownUpdaterAction
+): UiState;
+export function hideExportDropdownUpdater(
+  state: UiState,
+  action: UiStateActions.HideExportDropdownUpdaterAction
+): UiState;
+export function toggleMapControlUpdater(
+  state: UiState,
+  action: UiStateActions.ToggleMapControlUpdaterAction
+): UiState;
+export function setMapControlVisibilityUpdater(
+  state: UiState,
+  action: UiStateActions.setMapControlVisibilityUpdaterAction
+): UiState;
+export function openDeleteModalUpdater(
+  state: UiState,
+  action: UiStateActions.OpenDeleteModalUpdaterAction
+): UiState;
+export function addNotificationUpdater(
+  state: UiState,
+  action: UiStateActions.AddNotificationUpdaterAction
+): UiState;
+export function removeNotificationUpdater(
+  state: UiState,
+  action: UiStateActions.RemoveNotificationUpdaterAction
+): UiState;
+export function setExportImageSettingUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportImageSettingUpdaterAction
+): UiState;
+export function setExportImageDataUriUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportImageDataUriUpdaterAction
+): UiState;
+export function setExportImageErrorUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportImageErrorUpdaterAction
+): UiState;
+export function cleanupExportImageUpdater(
+  state: UiState,
+  action: UiStateActions.CleanupExportImageUpdaterAction
+): UiState;
+export function startExportingImageUpdater(
+  state: UiState,
+  action: UiStateActions.startExportingImage
+): UiState;
+export function setExportSelectedDatasetUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportSelectedDatasetUpdaterAction
+): UiState;
+export function setExportDataTypeUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportDataTypeUpdaterAction
+): UiState;
+export function setExportFilteredUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportFilteredUpdaterAction
+): UiState;
+export function setExportDataUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportDataUpdaterAction
+): UiState;
+export function setUserMapboxAccessTokenUpdater(
+  state: UiState,
+  action: UiStateActions.SetUserMapboxAccessTokenUpdaterAction
+): UiState;
+export function setExportMapFormatUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportMapFormatUpdaterAction
+): UiState;
+export function setExportMapHTMLModeUpdater(
+  state: UiState,
+  action: UiStateActions.SetExportHTMLMapModeUpdaterAction
+): UiState;
+export function showDatasetTableUpdater(state: UiState);
+export function setLocaleUpdater(
+  state: UiState,
+  action: UiStateActions.SetLocaleUpdaterAction
+): UiState;
+
+export function loadFilesUpdater(state: UiState, action: LoadFilesUpdaterAction): UiState;
+export function loadFilesErrUpdater(state: UiState, action: LoadFilesErrUpdaterAction): UiState;
+export function loadFilesSuccessUpdater(state: UiState): UiState;
+export function toggleSplitMapUpdater(state: UiState, action: ToggleSplitMapUpdaterAction): UiState;
+export function initUiStateUpdater(
+  state: UiState,
+  action: {
+    type?: ActionTypes.INIT;
+    payload: KeplerGlInitPayload;
+  }
+): UiState;