[Chore]: Technical: Isolate reducers (#1961)

* Reducers isolation

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

* Imports cleaning

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

package.json

@@ -28,7 +28,8 @@
     "./src/cloud-providers",
     "./src/processors",
     "./src/tasks",
-    "./src/actions"
+    "./src/actions",
+    "./src/reducers"
   ],
   "repository": {
     "type": "git",

src/components/container.tsx

@@ -27,7 +27,7 @@ import KeplerGlFactory from './kepler-gl';
 
 import {registerEntry, deleteEntry, renameEntry, forwardTo} from '@kepler.gl/actions';
 import {notNullorUndefined} from '@kepler.gl/utils';
-import {KeplerGlState} from 'reducers';
+import {KeplerGlState} from '@kepler.gl/reducers';
 
 export const ERROR_MSG = {
   noState:

src/components/kepler-gl.tsx

@@ -74,7 +74,7 @@ import {
 } from '@kepler.gl/utils';
 
 import {theme as basicTheme, themeLT, themeBS} from '@kepler.gl/styles';
-import {KeplerGlState} from 'reducers';
+import {KeplerGlState} from '@kepler.gl/reducers';
 import {Provider} from 'cloud-providers';
 
 // Maybe we should think about exporting this or creating a variable

src/components/map-container.tsx

@@ -67,15 +67,15 @@ import ErrorBoundary from 'components/common/error-boundary';
 import {LOCALE_CODES} from '@kepler.gl/localization';
 import {getMapLayersFromSplitMaps, onViewPortChange} from '@kepler.gl/utils';
 import {MapView} from '@deck.gl/core';
-import {MapStyle} from 'reducers';
 import {Datasets} from '@kepler.gl/table';
 import {
+  MapStyle,
   computeDeckLayers,
   getLayerHoverProp,
   LayerHoverProp,
   prepareLayersForDeck,
   prepareLayersToRender
-} from 'reducers';
+} from '@kepler.gl/reducers';
 
 /** @type {{[key: string]: React.CSSProperties}} */
 const MAP_STYLE: {[key: string]: React.CSSProperties} = {

src/components/map/layer-hover-info.tsx

@@ -30,7 +30,7 @@ import {
   AggregationLayerHoverData,
   getTooltipDisplayDeltaValue,
   getTooltipDisplayValue
-} from 'reducers';
+} from '@kepler.gl/reducers';
 
 export const StyledLayerName = styled(CenterFlexbox)`
   color: ${props => props.theme.textColorHl};

src/components/map/map-popover.tsx

@@ -27,7 +27,7 @@ import {injectIntl, IntlShape} from 'react-intl';
 import {FormattedMessage} from '@kepler.gl/localization';
 import Tippy from '@tippyjs/react/headless';
 import {RootContext} from 'components';
-import {LayerHoverProp} from 'reducers/layer-utils';
+import {LayerHoverProp} from '@kepler.gl/reducers';
 
 const MAX_WIDTH = 500;
 const MAX_HEIGHT = 600;

src/components/modal-container.tsx

@@ -27,7 +27,13 @@ import document from 'global/document';
 import {EXPORT_DATA_TYPE_OPTIONS, EXPORT_MAP_FORMATS} from '@kepler.gl/constants';
 import ModalDialogFactory from './modals/modal-dialog';
 import {exportHtml, isValidMapInfo, exportMap, exportJson} from '@kepler.gl/utils';
-import {exportData, getFileFormatNames, getFileExtensions, MapStyle, ProviderState} from 'reducers';
+import {
+  exportData,
+  getFileFormatNames,
+  getFileExtensions,
+  MapStyle,
+  ProviderState
+} from '@kepler.gl/reducers';
 
 // modals
 import DeleteDatasetModalFactory from './modals/delete-data-modal';
@@ -159,7 +165,7 @@ export default function ModalContainerFactory(
       document.removeEventListener('keyup', this._onKeyUp);
     }
 
-    cloudProviders = props => props.cloudProviders;
+    cloudProviders = (props: ModalContainerProps) => props.cloudProviders;
     providerWithStorage = createSelector(this.cloudProviders, cloudProviders =>
       cloudProviders.filter(p => p.hasPrivateStorage())
     );
@@ -343,7 +349,6 @@ export default function ModalContainerFactory(
             template = (
               <LoadDataModal
                 {...providerState}
-                // @ts-expect-error //TODO Remove it once LoadDataModal is translated
                 onClose={this._closeModal}
                 onFileUpload={this._onFileUpload}
                 onLoadCloudMap={this._onLoadCloudMap}
@@ -465,7 +470,6 @@ export default function ModalContainerFactory(
             break;
           case SAVE_MAP_ID:
             template = (
-              // @ts-expect-error //TODO Remove it once SaveMapModal is translated
               <SaveMapModal
                 {...providerState}
                 exportImage={uiState.exportImage}

src/components/modals/load-data-modal.tsx

@@ -29,7 +29,9 @@ import ModalTabsFactory from './modal-tabs';
 import LoadingDialog from './loading-dialog';
 
 import {LOADING_METHODS} from '@kepler.gl/constants';
-import {FileLoading} from '@kepler.gl/types';
+import {FileLoading, FileLoadingProgress, LoadFiles} from '@kepler.gl/types';
+import {Provider} from 'cloud-providers';
+import {SetCloudProviderPayload, ProviderActions, ActionHandler} from '@kepler.gl/actions';
 
 /** @typedef {import('./load-data-modal').LoadDataModalProps} LoadDataModalProps */
 
@@ -43,7 +45,8 @@ const StyledLoadDataModal = styled.div.attrs({
 `;
 
 const noop = () => {};
-const getDefaultMethod = methods => (Array.isArray(methods) ? get(methods, [0]) : null);
+const getDefaultMethod = <T,>(methods: T[] = []) =>
+  Array.isArray(methods) ? get(methods, [0]) : null;
 export interface LoadingMethod {
   id: string;
   label: string;
@@ -56,14 +59,21 @@ type LoadDataModalProps = {
   onFileUpload: (files: File[]) => void;
   onLoadCloudMap: (provider: any, vis: any) => void;
   fileLoading: FileLoading | false;
-  loadingMethods: LoadingMethod[];
+  loadingMethods?: LoadingMethod[];
   /** A list of names of supported formats suitable to present to user */
   fileFormatNames: string[];
   /** A list of typically 3 letter extensions (without '.') for file matching */
   fileExtensions: string[];
   isCloudMapLoading: boolean;
   /** Set to true if app wants to do its own file filtering */
   disableExtensionFilter?: boolean;
+  onClose?: (...args: any) => any;
+  cloudProviders?: Provider[];
+
+  onSetCloudProvider: (provider: SetCloudProviderPayload) => void;
+  getSavedMaps: ActionHandler<typeof ProviderActions['getSavedMaps']>;
+  loadFiles: LoadFiles;
+  fileLoadingProgress: FileLoadingProgress;
 };
 
 LoadDataModalFactory.deps = [ModalTabsFactory, FileUploadFactory, LoadStorageMapFactory];
@@ -79,19 +89,19 @@ export function LoadDataModalFactory(
     const {loadingMethods, isCloudMapLoading} = props;
     const [currentMethod, toggleMethod] = useState(getDefaultMethod(loadingMethods));
 
-    const ElementType = currentMethod.elementType;
+    const ElementType = currentMethod?.elementType;
 
     return (
       <StyledLoadDataModal>
         <ModalTabs
-          currentMethod={currentMethod.id}
+          currentMethod={currentMethod?.id}
           loadingMethods={loadingMethods}
           toggleMethod={toggleMethod}
         />
         {isCloudMapLoading ? (
           <LoadingDialog size={64} />
         ) : (
-          currentMethod && <ElementType key={currentMethod.id} intl={intl} {...props} />
+          ElementType && <ElementType key={currentMethod?.id} intl={intl} {...props} />
         )}
       </StyledLoadDataModal>
     );

src/components/modals/save-map-modal.tsx

@@ -86,7 +86,7 @@ type SaveMapModalProps = {
   exportImage: ExportImage;
   cloudProviders: Provider[];
   isProviderLoading: boolean;
-  currentProvider?: string;
+  currentProvider?: string | null;
   providerError?: any;
   characterLimits?: CharacterLimits;
 

src/components/plot-container.tsx

@@ -31,7 +31,7 @@ import {
   convertToPng,
   getScaleFromImageSize
 } from '@kepler.gl/utils';
-import {findMapBounds} from 'reducers';
+import {findMapBounds} from '@kepler.gl/reducers';
 import MapContainerFactory from './map-container';
 import MapsLayoutFactory from './maps-layout';
 

src/components/side-panel/interaction-panel/brush-config.tsx

@@ -22,7 +22,7 @@ import React from 'react';
 import RangeSliderFactory from 'components/common/range-slider';
 
 import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
-import {BRUSH_CONFIG} from 'reducers';
+import {BRUSH_CONFIG} from '@kepler.gl/reducers';
 import {FormattedMessage} from '@kepler.gl/localization';
 
 BrushConfigFactory.deps = [RangeSliderFactory];

src/components/side-panel/layer-panel/column-selector.tsx

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {PanelLabel} from 'components/common/styled-components';
 import FieldSelectorFactory from 'components/common/field-selector';
-import {validateColumn} from 'reducers';
+import {validateColumn} from '@kepler.gl/reducers';
 import {LayerColumn, LayerColumns} from '@kepler.gl/layers';
 import {Field, FieldPair} from '@kepler.gl/types';
 

src/components/side-panel/map-manager.tsx

@@ -29,7 +29,7 @@ import ColorSelector from './layer-panel/color-selector';
 import {createSelector} from 'reselect';
 import {injectIntl, WrappedComponentProps} from 'react-intl';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {MapStyle} from 'reducers';
+import {MapStyle} from '@kepler.gl/reducers';
 import {MapStyleActions} from '@kepler.gl/actions';
 
 type MapManagerProps = {

src/components/side-panel/map-style-panel/map-style-selector.tsx

@@ -31,7 +31,7 @@ import {
   StyledPanelHeader
 } from 'components/common/styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {MapStyle} from 'reducers';
+import {MapStyle} from '@kepler.gl/reducers';
 import {BaseProps} from 'components/common/icons/base';
 
 const StyledMapDropdown = styled(StyledPanelHeader)`

src/components/types.ts

@@ -1,5 +1,5 @@
 import {ComponentType} from 'react';
-import {MapStyle} from 'reducers';
+import {MapStyle} from '@kepler.gl/reducers';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {Filter, InteractionConfig, UiState} from '@kepler.gl/types';
 

src/connect/with-local-selector.tsx

@@ -21,7 +21,7 @@
 import React, {Component} from 'react';
 import {createSelector} from 'reselect';
 import KeplerGlContext from 'components/context';
-import {KeplerGlState} from 'reducers';
+import {KeplerGlState} from '@kepler.gl/reducers';
 
 const identity = state => state;
 

src/index.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 // Reducers
-export * from 'reducers';
+export * from '@kepler.gl/reducers';
 
 // Schemas
 export * from './schemas';

src/reducers/UPGRADE-data-container.md

@@ -0,0 +1,38 @@
+# Upgrade Guide (Data Containers)
+
+### Major changes
+- `KeplerTable.allData: any[][]` is substituted with `KeplerTable.dataContainer: DataContainerInterface`.
+
+### Step by step upgrade
+| File | Function | Change |
+| ---- | --- | --- |
+| base-layer.js & extended layers | accessors | Accessors in default Kepler layers now expect a data container as one of parameters: ```const pointPosAccessor = config => dc => d => {return ...}``` where `dc` is an instance of `DataContainerInterface`, and `d` is an object that is expected to contain an index of a row in the data container. | 
+|            | updateLayerMeta() | 1st parameter has to be an instance of `DataContainerInterface`. |
+|            | getPointsBounds() | 1st parameter has to be an instance of `DataContainerInterface`. |
+|            | calculateDataAttribute() | 1st parameter has to be an instance of `KeplerTable`. |
+|            | getAttributeAccessors() | 1st parameter is now an object that to contains `dataContainer: : DataContainerInterface`. |
+|            | getHoverData() |  New 2nd parameter, an instance of `DataContainerInterface`. |
+|            | getPositionAccessor() | 1st parameter has to be an instance of `DataContainerInterface`. |
+|            | setInitialLayerConfig() | 1st parameter is now object expected to contain `dataContainer: : DataContainerInterface`.  |
+|            | findDefaultLayerProps() | 2nd parameter has to be an instance of `DataContainerInterface`.  |
+| cell-size.js | renderedSize() | `text.rows` is substituted with `text.dataContainer: DataContainerInterface`. |
+| data-table/index.js |  | `DataTable.props.rows` is substituted with `DataTable.props.dataContainer: DataContainerInterface`. |
+| layer-text-label.js | formatTextLabelData() | `dataContainer: DataContainerInterface` is expected as part of the 1st parameter. |
+| geojson-utils.js | getGeojsonDataMaps() | 1st parameter has to be an instance of `DataContainerInterface`. |
+| h3-utils.js | isHexField() | 3rd parameter has to be an instance of `DataContainerInterface`. |
+|             | getHexFields() | 2nd parameter has to be an instance of `DataContainerInterface`. |
+| mapbox-utils.js | geoJsonFromData() | `allData` is removed from the parameter list. `getGeometry`, `getProperties` parameters expect `{index}` object as input parameter. |
+| trip-utils.js | isTripGeoJsonField() | 1st parameter has to be an instance of `DataContainerInterface`. |
+| data-processor.js | formatCsv() | `data` parameter has to be an instance of `DataContainerInterface`. |
+| data-scale-utils.js | getOrdinalDomain() | 1st parameter has to be an instance of `DataContainerInterface`. |
+| filter-utils.js | getFilterFunction() | New 5th parameter, an instance of `DataContainerInterface`. Returned function expects `{index}` object as 1st parameter.  |
+|                 | filterDataByFilterTypes() | 2nd parameter has to be an instance of `DataContainerInterface`. |	
+|                 | getTimestampFieldDomain() | 1st parameter has to be an instance of `DataContainerInterface`. valueAccessor parameter expects a function that accepts `{index}` object as 1st parameter. |		
+|                 | getNumericFieldDomain() |	1st parameter has to be an instance of `DataContainerInterface`. valueAccessor parameter expects a function that accepts `{index}` object as 1st parameter. |
+|                 | getPolygonFilterFunctor() | New 3rd parameter, an instance of `DataContainerInterface`. |
+| interaction-utils.js | getTooltipDisplayDeltaValue() | data and primaryData parameters are now of `DataRow` type. |
+|                      | getTooltipDisplayValue() | data parameter is now of `DataRow` type. |
+| comparison-utils.js |	cmpGpuFilterProp() | New 4th parameter, an instance of `DataContainerInterface`. |
+| gpu-filter-utils.js | getGpuFilterProps() | Returned function now expects a data container. ```dc => (getIndex, getData) => d => {...}``` as parameter to the first call. |
+| data-utils.js | maybeToDate() | New 4th parameter, an instance of `DataContainerInterface`. |
+| kepler-table.js | Field.valueAccessor() | 1st parameter is expected to be an object that contain index property. | 

src/reducers/babel.config.js

@@ -0,0 +1,66 @@
+// 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.
+
+const KeplerPackage = require('./package');
+
+const PRESETS = ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'];
+const PLUGINS = [
+  ['@babel/plugin-transform-typescript', {isTSX: true, allowDeclareFields: true}],
+  '@babel/plugin-transform-modules-commonjs',
+  '@babel/plugin-proposal-class-properties',
+  '@babel/plugin-proposal-export-namespace-from',
+  '@babel/plugin-proposal-optional-chaining',
+  [
+    '@babel/transform-runtime',
+    {
+      regenerator: true
+    }
+  ],
+  [
+    'search-and-replace',
+    {
+      rules: [
+        {
+          search: '__PACKAGE_VERSION__',
+          replace: KeplerPackage.version
+        }
+      ]
+    }
+  ]
+];
+const ENV = {
+  test: {
+    plugins: ['istanbul']
+  },
+  debug: {
+    sourceMaps: 'inline',
+    retainLines: true
+  }
+};
+
+module.exports = function babel(api) {
+  api.cache(true);
+
+  return {
+    presets: PRESETS,
+    plugins: PLUGINS,
+    env: ENV
+  };
+};