[Chore]: Technical: Isolate table-utils (#1949)

* some internal refactoring

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

* Reducers and table-utils imports corrected

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

* Build fix

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

* table-utils isolated

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

* Build fix

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

* Versions update

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

* Deploy fix

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

* package renamed, getTimeWidgetHintFormatter and getIntervalBins moved to utils

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

* Imports fix

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

* Build fix

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

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

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -22,8 +22,8 @@ import {OAuthApp} from '@carto/toolkit';
 import Console from 'global/console';
 import CartoIcon from './carto-icon';
 import {Provider} from '@kepler.gl/cloud-providers';
-import {createDataContainer} from 'kepler.gl/reducers/table-utils';
-import {formatCsv} from 'kepler.gl/reducers';
+import {createDataContainer} from '@kepler.gl/table';
+import {formatCsv} from 'reducers';
 
 const NAME = 'carto';
 const DISPLAY_NAME = 'CARTO';

package.json

@@ -24,6 +24,7 @@
     "./src/middleware",
     "./src/deckgl-layers",
     "./src/layers",
+    "./src/table",
     "./src/cloud-providers",
     "./src/processors",
     "./src/tasks",
@@ -248,7 +249,6 @@
     "@testing-library/react-hooks": "^3.4.2",
     "@types/d3-array": "^2.0.0",
     "@types/d3-scale": "^3.2.2",
-    "@types/lodash.debounce": "^4.0.6",
     "@types/geojson": "^7946.0.7",
     "@types/redux-actions": "^2.6.2",
     "@types/supercluster": "^7.1.0",

src/components/bottom-widget.tsx

@@ -24,7 +24,7 @@ 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 '@kepler.gl/constants';
-import {getIntervalBins} from 'reducers/filter-utils';
+import {getIntervalBins} from '@kepler.gl/utils';
 import {media} from '@kepler.gl/styles';
 import {AnimationConfig, TimeRangeFilter} from '@kepler.gl/types';
 import {bottomWidgetSelector} from './kepler-gl';

src/components/common/color-legend.tsx

@@ -24,7 +24,7 @@ import {createSelector} from 'reselect';
 import {format} from 'd3-format';
 import moment from 'moment';
 import {SCALE_TYPES, SCALE_FUNC, ALL_FIELD_TYPES} from '@kepler.gl/constants';
-import {getTimeWidgetHintFormatter} from 'reducers/filter-utils';
+import {getTimeWidgetHintFormatter} from '@kepler.gl/utils';
 
 const ROW_H = 10;
 const GAP = 4;

src/components/common/data-table/cell-size.ts

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import document from 'global/document';
-import {DataContainerInterface} from 'reducers/table-utils';
+import {DataContainerInterface} from '@kepler.gl/table';
 import {parseFieldValue} from '@kepler.gl/utils';
 
 const MIN_GHOST_CELL_SIZE: number = 200;

src/components/common/data-table/index.tsx

@@ -38,7 +38,7 @@ import {adjustCellsToContainer} from './cell-size';
 
 import {ALL_FIELD_TYPES, SORT_ORDER} from '@kepler.gl/constants';
 import FieldTokenFactory from 'components/common/field-token';
-import {DataContainerInterface} from 'reducers/table-utils/data-container-interface';
+import {DataContainerInterface} from '@kepler.gl/table';
 
 const defaultHeaderRowHeight = 55;
 const defaultRowHeight = 32;

src/components/common/image-preview.tsx

@@ -23,8 +23,6 @@ import styled from 'styled-components';
 import LoadingSpinner from 'components/common/loading-spinner';
 import {ExportImage} from '@kepler.gl/constants';
 
-/** @typedef {import('reducers/ui-state-updaters').ExportImage} ExportImage */
-
 const StyledImagePreview = styled.div.attrs({
   className: 'image-preview'
 })`

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/core';
+import {KeplerGlState} from 'reducers';
 
 export const ERROR_MSG = {
   noState:

src/components/editor/editor.tsx

@@ -35,7 +35,7 @@ import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style
 import {Filter} from '@kepler.gl/types';
 import {Feature} from '@nebula.gl/edit-modes';
 import {MjolnirEvent} from 'mjolnir.js';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 const StyledWrapper = styled.div`
   cursor: ${(props: {editor: {mode: string}}) =>

src/components/editor/feature-action-panel.tsx

@@ -30,7 +30,7 @@ import copy from 'copy-to-clipboard';
 import {Layer} from '@kepler.gl/layers';
 import {Filter} from '@kepler.gl/types';
 import {Feature} from '@nebula.gl/edit-modes';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 const LAYOVER_OFFSET = 4;
 

src/components/filters/filter-panels/filter-panel-with-field-select.tsx

@@ -26,7 +26,7 @@ import SourceDataSelectorFactory from 'components/side-panel/common/source-data-
 import FieldSelectorFactory from '../../common/field-selector';
 import {getSupportedFilterFields} from './new-filter-panel';
 import {FilterPanelWithFieldSelectComponent} from './types';
-import KeplerTable from 'reducers/table-utils/kepler-table';
+import {KeplerTable} from '@kepler.gl/table';
 
 FieldPanelWithFieldSelectFactory.deps = [
   FilterPanelHeaderFactory,

src/components/filters/filter-panels/new-filter-panel.tsx

@@ -24,7 +24,7 @@ import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
 import FieldSelectorFactory from '../../common/field-selector';
 import {FilterPanelComponent} from './types';
-import KeplerTable from 'reducers/table-utils/kepler-table';
+import {KeplerTable} from '@kepler.gl/table';
 import {Field, FilterBase, LineChart} from '@kepler.gl/types';
 
 NewFilterPanelFactory.deps = [

src/components/filters/filter-panels/polygon-filter-panel.tsx

@@ -29,7 +29,7 @@ import {StyledFilterPanel} from '../components';
 
 import get from 'lodash.get';
 import {PolygonFilterPanelComponent} from './types';
-import KeplerTable from 'reducers/table-utils/kepler-table';
+import {KeplerTable} from '@kepler.gl/table';
 
 PolygonFilterPanelFactory.deps = [
   FilterPanelHeaderFactory,

src/components/filters/filter-panels/types.ts

@@ -1,7 +1,7 @@
 import {FunctionComponent, ComponentType} from 'react';
 import {Filter, PolygonFilter, TimeRangeFilter, Field} from '@kepler.gl/types';
 import {Layer} from '@kepler.gl/layers';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 interface PanelAction {
   id: string;

src/components/filters/types.ts

@@ -15,7 +15,7 @@ import {
   toggleFilterAnimation,
   updateFilterAnimationSpeed
 } from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 export type PolygonFilterProps = {
   filter: Filter;

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/core';
+import {KeplerGlState} from 'reducers';
 import {Provider} from 'cloud-providers';
 
 // Maybe we should think about exporting this or creating a variable

src/components/map-container.tsx

@@ -68,7 +68,7 @@ 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 'reducers/table-utils';
+import {Datasets} from '@kepler.gl/table';
 import {
   computeDeckLayers,
   getLayerHoverProp,

src/components/map/map-control.tsx

@@ -31,7 +31,7 @@ import MapDrawPanelFactory from './map-draw-panel';
 import LocalePanelFactory from './locale-panel';
 import {Layer} from '@kepler.gl/layers';
 import {Editor, MapControls} from '@kepler.gl/types';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 interface StyledMapControlProps {
   top?: number;

src/components/modal-container.tsx

@@ -27,7 +27,7 @@ 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} from 'reducers/export-utils';
+import {exportData, getFileFormatNames, getFileExtensions, MapStyle, ProviderState} from 'reducers';
 
 // modals
 import DeleteDatasetModalFactory from './modals/delete-data-modal';
@@ -59,10 +59,7 @@ import {
   OVERWRITE_MAP_ID
 } from '@kepler.gl/constants';
 
-import {getFileFormatNames, getFileExtensions} from 'reducers/vis-state-selectors';
-import {MapStyle} from 'reducers';
-import {MapState, UiState, OnErrorCallBack, OnSuccessCallBack} from '@kepler.gl/types';
-import {ProviderState} from 'reducers/provider-state-updaters';
+import {MapState, UiState, OnSuccessCallBack, OnErrorCallBack} from '@kepler.gl/types';
 
 import {
   VisStateActions,

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

@@ -25,7 +25,7 @@ import DataTableFactory from 'components/common/data-table';
 import {createSelector} from 'reselect';
 import {renderedSize} from 'components/common/data-table/cell-size';
 import CanvasHack from 'components/common/data-table/canvas';
-import KeplerTable, {Datasets} from 'reducers/table-utils/kepler-table';
+import KeplerTable, {Datasets} from '@kepler.gl/table';
 
 const dgSettings = {
   sidePadding: '38px',

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

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 import DatasetLabel from 'components/common/dataset-label';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {Layer} from '@kepler.gl/layers';
-import {KeplerTable} from 'reducers/table-utils';
+import {KeplerTable} from '@kepler.gl/table';
 
 const StyledMsg = styled.div`
   margin-top: 24px;

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

@@ -31,7 +31,7 @@ import {
 } from 'components/common/styled-components';
 import {injectIntl, IntlShape} from 'react-intl';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {Datasets} from 'reducers/table-utils';
+import {Datasets} from '@kepler.gl/table';
 
 const getDataRowCount = (
   datasets: Datasets,

src/components/plot-container.tsx

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

src/components/side-panel/common/types.ts

@@ -3,7 +3,7 @@ import {openDeleteModal} from '@kepler.gl/actions';
 import {VisStateActions} from '@kepler.gl/actions';
 import {ActionHandler} from '@kepler.gl/actions';
 import {RGBColor} from '@kepler.gl/types';
-import KeplerTable, {Datasets} from 'reducers/table-utils/kepler-table';
+import KeplerTable, {Datasets} from '@kepler.gl/table';
 
 export type DatasetInfoProps = {
   dataset: KeplerTable;

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

@@ -27,7 +27,7 @@ import FilterPanelFactory from './filter-panel/filter-panel';
 import {Filter} from '@kepler.gl/types';
 import {Layer} from '@kepler.gl/layers';
 import {VisStateActions, ActionHandler} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type FilterManagerProps = {
   filters: Filter[];

src/components/side-panel/filter-panel/filter-panel-header.tsx

@@ -25,7 +25,7 @@ import {Trash} from 'components/common/icons';
 import {createLinearGradient} from '@kepler.gl/utils';
 import {StyledPanelHeader, StyledPanelHeaderProps} from 'components/common/styled-components';
 import {RGBColor, Filter} from '@kepler.gl/types';
-import KeplerTable from 'reducers/table-utils/kepler-table';
+import {KeplerTable} from '@kepler.gl/table';
 
 interface StyledFilterHeaderProps extends StyledPanelHeaderProps {
   $labelRCGColorValues: RGBColor[];

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

@@ -22,7 +22,7 @@ import React from 'react';
 import {InteractionConfig} from '@kepler.gl/types';
 import InteractionPanelFactory from './interaction-panel/interaction-panel';
 import {VisStateActions} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type InteractionManagerProps = {
   interactionConfig: InteractionConfig;

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/interaction-utils';
+import {BRUSH_CONFIG} from 'reducers';
 import {FormattedMessage} from '@kepler.gl/localization';
 
 BrushConfigFactory.deps = [RangeSliderFactory];

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

@@ -35,7 +35,7 @@ import Switch from 'components/common/switch';
 import ItemSelector from 'components/common/item-selector/item-selector';
 import {COMPARE_TYPES, GEOCODER_DATASET_NAME} from '@kepler.gl/constants';
 import FieldSelectorFactory from '../../common/field-selector';
-import KeplerTable, {Datasets} from 'reducers/table-utils/kepler-table';
+import KeplerTable, {Datasets} from '@kepler.gl/table';
 
 const TooltipConfigWrapper = styled.div`
   .item-selector > div > div {

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

@@ -39,7 +39,7 @@ import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
 import {SidePanelItem} from 'components/types';
 import {LayerPanelListView} from '@kepler.gl/types';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type LayerBlendingSelectorProps = {
   layerBlending: string;

src/components/side-panel/layer-panel/add-layer-button.tsx

@@ -29,7 +29,7 @@ import {Button} from 'components/common/styled-components';
 import {DatasetSquare} from 'components';
 import Typeahead from 'components/common/item-selector/typeahead';
 import Accessor from 'components/common/item-selector/accessor';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 import {RGBColor} from '@kepler.gl/types';
 
 type AddLayerButtonProps = {

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/vis-state-merger';
+import {validateColumn} from 'reducers';
 import {LayerColumn, LayerColumns} from '@kepler.gl/layers';
 import {Field, FieldPair} from '@kepler.gl/types';
 

src/components/side-panel/layer-panel/dataset-layer-group.tsx

@@ -23,7 +23,7 @@ import React, {useMemo} from 'react';
 import DatasetLayerSectionFactory from './dataset-layer-section';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type DatasetLayerGroupProps = {
   datasets: Datasets;

src/components/side-panel/layer-panel/dataset-layer-section.tsx

@@ -25,7 +25,7 @@ import SourceDataCatalogFactory from '../common/source-data-catalog';
 import LayerListFactory from './layer-list';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {UIStateActions, ActionHandler, VisStateActions} from '@kepler.gl/actions';
-import KeplerTable from 'reducers/table-utils/kepler-table';
+import {KeplerTable} from '@kepler.gl/table';
 
 type DatasetLayerSectionProps = {
   dataset: KeplerTable;

src/components/side-panel/layer-panel/dataset-section.tsx

@@ -26,7 +26,7 @@ import {Button} from 'components/common/styled-components';
 
 import SourceDataCatalogFactory from '../common/source-data-catalog';
 import {UIStateActions, VisStateActions, ActionHandler} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type AddDataButtonProps = {
   onClick: () => void;

src/components/side-panel/layer-panel/layer-configurator.tsx

@@ -51,7 +51,7 @@ import {
 
 import {NestedPartial, RGBColor, LayerVisConfig, ColorUI, Field} from '@kepler.gl/types';
 import {toggleModal, ActionHandler} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type LayerConfiguratorProps = {
   layer: Layer;

src/components/side-panel/layer-panel/layer-list.tsx

@@ -24,7 +24,7 @@ import classnames from 'classnames';
 import {SortableContainer, SortableElement} from 'react-sortable-hoc';
 import LayerPanelFactory from './layer-panel';
 import {Layer, LayerClassesType} from '@kepler.gl/layers';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 import {arrayMove} from '@kepler.gl/utils';
 import {UIStateActions, VisStateActions} from '@kepler.gl/actions';
 

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

@@ -32,7 +32,7 @@ import LayerPanelHeaderFactory from './layer-panel-header';
 import {NestedPartial, LayerVisConfig, ColorUI} from '@kepler.gl/types';
 import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 import {toggleModal, VisStateActions, ActionHandler} from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 type LayerPanelProps = {
   className?: string;

src/components/side-panel/layer-panel/vis-config-slider.tsx

@@ -27,7 +27,7 @@ import {FormattedMessage} from '@kepler.gl/localization';
 import {KeyEvent} from '@kepler.gl/constants';
 import {Checkbox} from 'components';
 import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
-import {isInRange} from 'reducers/filter-utils';
+import {isInRange} from '@kepler.gl/table';
 import {clamp} from '@kepler.gl/utils';
 
 type LazyInputProps = {

src/components/types.ts

@@ -9,7 +9,7 @@ import {
   MapStateActions,
   UIStateActions
 } from '@kepler.gl/actions';
-import {Datasets} from 'reducers/table-utils/kepler-table';
+import {Datasets} from '@kepler.gl/table';
 
 export type SidePanelItem = {
   id: string;

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/combined-updaters';
+import {KeplerGlState} from 'reducers';
 
 const identity = state => state;