[Chore]: Technical: Isolate layers (#1856)

* fix imports

Signed-off-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

* Moved some things from layer-factory to constants

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

* Moved types to types package

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

* Imports organized

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

* Prettier changes

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

* Dependencies update

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

* Review corrections

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

Co-authored-by: Evgeny Zhgulev <evgeny.zhgulev@actionengine.com>

package.json

@@ -18,7 +18,8 @@
   "workspaces": [
     "./src/constants",
     "./src/types",
-    "./src/deckgl-layers"
+    "./src/deckgl-layers",
+    "./src/layers"
   ],
   "repository": {
     "type": "git",

src/actions/vis-state-actions.ts

@@ -22,10 +22,9 @@
 import {default as ActionTypes} from './action-types';
 import {AddDataToMapPayload} from '../actions/actions';
 import {FileCacheItem} from '../processors/types';
-import {Layer, LayerBaseConfig, LayerVisConfig} from 'layers';
+import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 import {Feature, InteractionConfig} from 'reducers/vis-state-updaters';
-import {ValueOf, Merge, RGBColor, NestedPartial} from '@kepler.gl/types';
-import {ColorUI} from 'layers/layer-factory';
+import {ValueOf, Merge, RGBColor, NestedPartial, LayerVisConfig, ColorUI} from '@kepler.gl/types';
 // TODO - import LoaderObject type from @loaders.gl/core when supported
 // TODO - import LoadOptions type from @loaders.gl/core when supported
 

src/components/editor/editor.tsx

@@ -28,11 +28,10 @@ import {createSelector} from 'reselect';
 
 import FeatureActionPanelFactory, {FeatureActionPanelProps} from './feature-action-panel';
 import {FILTER_TYPES, EDITOR_MODES, KeyEvent} from '@kepler.gl/constants';
-import {EDITOR_AVAILABLE_LAYERS} from 'layers/types';
+import {EDITOR_AVAILABLE_LAYERS, Layer} from '@kepler.gl/layers';
 
 import {DEFAULT_RADIUS, getStyle as getFeatureStyle} from './feature-styles';
 import {getStyle as getEditHandleStyle, getEditHandleShape} from './handle-style';
-import {Layer} from 'layers';
 import {Datasets, Filter} from 'reducers';
 import {Feature} from '@nebula.gl/edit-modes';
 import {MjolnirEvent} from 'mjolnir.js';

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

@@ -27,7 +27,7 @@ import onClickOutside from 'react-onclickoutside';
 import classnames from 'classnames';
 import {Trash, Layers, Copy, Checkmark} from 'components/common/icons';
 import copy from 'copy-to-clipboard';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import {Datasets, Filter} from 'reducers';
 import {Feature} from '@nebula.gl/edit-modes';
 

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

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

src/components/filters/polygon-filter.tsx

@@ -20,8 +20,7 @@
 
 import React, {useMemo, useCallback} from 'react';
 import ItemSelector from 'components/common/item-selector/item-selector';
-import {Layer} from 'layers';
-import {LAYER_TYPES} from 'layers/types';
+import {Layer, LAYER_TYPES} from '@kepler.gl/layers';
 import {PolygonFilterProps} from './types';
 import {StyledFilterPanel} from './components';
 

src/components/filters/types.ts

@@ -6,7 +6,7 @@ import {
   SelectFilter,
   TimeRangeFilter
 } from 'reducers';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import {
   ActionHandler,
   enlargeFilter,

src/components/map-container.tsx

@@ -38,7 +38,13 @@ import {StyledMapContainer, StyledAttrbution} from 'components/common/styled-com
 import EditorFactory from './editor/editor';
 
 // utils
-import {generateMapboxLayers, updateMapboxLayers} from 'layers/mapbox-utils';
+import {
+  generateMapboxLayers,
+  updateMapboxLayers,
+  Layer,
+  LayerBaseConfig,
+  VisualChannelDomain
+} from '@kepler.gl/layers';
 import {setLayerBlending} from 'utils/gl-utils';
 import {transformRequest} from 'utils/map-style-utils/mapbox-utils';
 import {
@@ -65,9 +71,7 @@ import {
   MapStyle,
   Viewport
 } from 'reducers';
-import {Layer} from 'layers';
 import {SplitMapLayers} from 'reducers/vis-state-updaters';
-import {LayerBaseConfig, VisualChannelDomain} from 'layers/base-layer';
 
 /** @type {{[key: string]: React.CSSProperties}} */
 const MAP_STYLE: {[key: string]: React.CSSProperties} = {

src/components/map/layer-selector-panel.tsx

@@ -26,7 +26,7 @@ import {Layers} from '../common/icons';
 import MapLayerSelector from '../common/map-layer-selector';
 import MapControlTooltipFactory from './map-control-tooltip';
 import MapControlPanelFactory from './map-control-panel';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import {MapControl, MapControls} from 'reducers';
 
 LayerSelectorPanelFactory.deps = [MapControlTooltipFactory, MapControlPanelFactory];

src/components/map/map-control.tsx

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

src/components/map/map-legend-panel.tsx

@@ -31,7 +31,7 @@ import TippyTooltip from 'components/common/tippy-tooltip';
 import {createPortal} from 'react-dom';
 import {DIMENSIONS} from '@kepler.gl/constants';
 import {MapControl, MapControls} from 'reducers';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 
 MapLegendPanelFactory.deps = [MapControlPanelFactory, MapLegendFactory];
 

src/components/map/map-legend.tsx

@@ -24,7 +24,7 @@ import {rgb} from 'd3-color';
 import ColorLegend from 'components/common/color-legend';
 import {CHANNEL_SCALES, DIMENSIONS} from '@kepler.gl/constants';
 import {FormattedMessage} from 'localization';
-import Layer, {LayerBaseConfig, VisualChannel, VisualChannelDescription} from 'layers/base-layer';
+import {Layer, LayerBaseConfig, VisualChannel, VisualChannelDescription} from '@kepler.gl/layers';
 
 interface StyledMapControlLegendProps {
   width?: number;

src/components/modal-container.tsx

@@ -46,6 +46,7 @@ import {media} from 'styles/media-breakpoints';
 
 // Template
 import {
+  KeyEvent,
   ADD_DATA_ID,
   DATA_TABLE_ID,
   DELETE_DATA_ID,
@@ -57,8 +58,6 @@ import {
   SHARE_MAP_ID,
   OVERWRITE_MAP_ID
 } from '@kepler.gl/constants';
-
-import {KeyEvent} from '@kepler.gl/constants';
 import {getFileFormatNames, getFileExtensions} from '../reducers/vis-state-selectors';
 import {MapState, MapStyle, UiState, VisState} from 'reducers';
 import {OnSuccessCallBack, OnErrorCallBack} from 'actions';

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

@@ -22,7 +22,7 @@ import React from 'react';
 import styled from 'styled-components';
 import DatasetLabel from 'components/common/dataset-label';
 import {FormattedMessage} from 'localization';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import KeplerTable from 'utils/table-utils/kepler-table';
 
 const StyledMsg = styled.div`

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

@@ -25,7 +25,7 @@ import {Add} from 'components/common/icons';
 import SourceDataCatalogFactory from './common/source-data-catalog';
 import FilterPanelFactory from './filter-panel/filter-panel';
 import {Datasets, Filter} from 'reducers';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import * as VisStateActions from 'actions/vis-state-actions';
 import {ActionHandler} from 'actions';
 

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

@@ -33,7 +33,7 @@ import PolygonFilterPanelFactory from 'components/filters/filter-panels/polygon-
 import {Filter} from 'reducers/vis-state-updaters';
 import {Field} from 'utils/table-utils/kepler-table';
 import {FilterPanelProps} from 'components/filters/filter-panels/types';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 
 const StyledFilterPanel = styled.div`
   margin-bottom: 12px;

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

@@ -25,8 +25,7 @@ import {Hash, Delete} from 'components/common/icons';
 import DropdownList from 'components/common/item-selector/dropdown-list';
 import {FormattedMessage} from 'localization';
 import onClickOutside from 'react-onclickoutside';
-import {FIELD_OPTS} from '@kepler.gl/constants';
-import {TOOLTIP_FORMATS, TOOLTIP_FORMAT_TYPES, TOOLTIP_KEY} from '@kepler.gl/constants';
+import {FIELD_OPTS, TOOLTIP_FORMATS, TOOLTIP_FORMAT_TYPES, TOOLTIP_KEY} from '@kepler.gl/constants';
 import {getFormatter} from 'utils/data-utils';
 import TippyTooltip from 'components/common/tippy-tooltip';
 

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

@@ -36,7 +36,7 @@ import {PanelLabel, SidePanelDivider, SidePanelSection} from 'components/common/
 
 import {LAYER_BLENDINGS} from '@kepler.gl/constants';
 import {Datasets} from 'reducers';
-import {Layer, LayerClassesType} from 'layers';
+import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import * as UiStateActions from 'actions/ui-state-actions';
 import * as VisStateActions from 'actions/vis-state-actions';
 import {SidePanelItem} from 'components/types';

src/components/side-panel/layer-panel/color-range-selector.tsx

@@ -32,8 +32,7 @@ import {COLOR_RANGES, ColorRange} from '@kepler.gl/constants';
 import {numberSort} from 'utils/data-utils';
 import {reverseColorRange} from 'utils/color-utils';
 import {FormattedMessage} from 'localization';
-import {ColorUI} from 'layers/layer-factory';
-import {NestedPartial} from '@kepler.gl/types';
+import {NestedPartial, ColorUI} from '@kepler.gl/types';
 
 type ColorRangeSelectorProps = {
   colorPaletteUI: ColorUI;

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

@@ -26,9 +26,8 @@ import ColorRangeSelector from './color-range-selector';
 import ColorPalette from './color-palette';
 import {StyledPanelDropdown} from 'components/common/styled-components';
 import onClickOutside from 'react-onclickoutside';
-import {ColorUI} from 'layers/layer-factory';
 import {ColorRange} from '@kepler.gl/constants';
-import {NestedPartial, RGBColor} from '@kepler.gl/types';
+import {NestedPartial, RGBColor, ColorUI} from '@kepler.gl/types';
 
 type ColorSelectorInputProps = {
   active: boolean;

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

@@ -24,7 +24,7 @@ import {FormattedMessage} from 'localization';
 import {PanelLabel} from 'components/common/styled-components';
 import FieldSelectorFactory from 'components/common/field-selector';
 import {validateColumn} from 'reducers/vis-state-merger';
-import {LayerColumn, LayerColumns} from 'layers';
+import {LayerColumn, LayerColumns} from '@kepler.gl/layers';
 import {Field, FieldPair} from 'utils/table-utils/kepler-table';
 
 type Pair = {

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

@@ -22,7 +22,7 @@ import React, {useMemo} from 'react';
 
 import DatasetLayerSectionFactory from './dataset-layer-section';
 import {Datasets} from 'reducers';
-import {Layer, LayerClassesType} from 'layers';
+import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import * as UiStateActions from 'actions/ui-state-actions';
 import * as VisStateActions from 'actions/vis-state-actions';
 import {ActionHandler} from 'actions';

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

@@ -23,7 +23,7 @@ import styled from 'styled-components';
 
 import SourceDataCatalogFactory from '../common/source-data-catalog';
 import LayerListFactory from './layer-list';
-import {Layer, LayerClassesType} from 'layers';
+import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import KeplerTable from 'utils/table-utils/kepler-table';
 import * as UiStateActions from 'actions/ui-state-actions';
 import * as VisStateActions from 'actions/vis-state-actions';

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

@@ -23,8 +23,7 @@ import styled from 'styled-components';
 import {FormattedMessage} from 'localization';
 import {PanelLabel, SidePanelSection} from 'components/common/styled-components';
 import ColumnSelectorFactory from './column-selector';
-import {ColumnPairs} from 'layers/base-layer';
-import {Layer, LayerColumns, LayerBaseConfig} from 'layers';
+import {ColumnPairs, Layer, LayerColumns, LayerBaseConfig} from '@kepler.gl/layers';
 import {Field, FieldPair} from 'utils/table-utils/kepler-table';
 
 type LayerColumnConfigProps = {

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

@@ -26,7 +26,8 @@ import {FormattedMessage} from 'react-intl';
 import Switch from 'components/common/switch';
 import InfoHelperFactory from 'components/common/info-helper';
 import {VertThreeDots} from 'components/common/icons';
-import {Layer, LayerVisConfig} from 'layers';
+import {Layer} from '@kepler.gl/layers';
+import {LayerVisConfig} from '@kepler.gl/types';
 
 type LayerConfigGroupLabelProps = {
   label?: string;

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

@@ -40,13 +40,16 @@ import TextLabelPanelFactory from './text-label-panel';
 import {capitalizeFirstLetter} from 'utils/utils';
 
 import {CHANNEL_SCALE_SUPPORTED_FIELDS, ColorRange} from '@kepler.gl/constants';
-import {Layer, LayerBaseConfig, LayerVisConfig} from 'layers';
-import {LAYER_TYPES} from 'layers/types';
+import {
+  Layer,
+  LayerBaseConfig,
+  LAYER_TYPES,
+  VisualChannel,
+  AggregationLayer
+} from '@kepler.gl/layers';
+
 import {Datasets} from 'reducers';
-import {NestedPartial, RGBColor} from '@kepler.gl/types';
-import {ColorUI} from 'layers/layer-factory';
-import {VisualChannel} from 'layers/base-layer';
-import AggregationLayer from 'layers/aggregation-layer';
+import {NestedPartial, RGBColor, LayerVisConfig, ColorUI} from '@kepler.gl/types';
 import {Field} from 'utils/table-utils/kepler-table';
 import {toggleModal} from 'actions/ui-state-actions';
 import {ActionHandler} from 'actions';

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

@@ -25,7 +25,7 @@ import classnames from 'classnames';
 import {SortableContainer, SortableElement} from 'react-sortable-hoc';
 import LayerPanelFactory from './layer-panel';
 import {Datasets} from 'reducers';
-import {Layer, LayerClassesType} from 'layers';
+import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import * as UiStateActions from 'actions/ui-state-actions';
 import * as VisStateActions from 'actions/vis-state-actions';
 

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

@@ -30,11 +30,10 @@ import styled from 'styled-components';
 import LayerConfiguratorFactory from './layer-configurator';
 import LayerPanelHeaderFactory from './layer-panel-header';
 import {Datasets} from 'reducers';
-import {NestedPartial} from '@kepler.gl/types';
-import {Layer, LayerBaseConfig, LayerVisConfig} from 'layers';
+import {NestedPartial, LayerVisConfig, ColorUI} from '@kepler.gl/types';
+import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 import {toggleModal} from 'actions/ui-state-actions';
 import * as VisStateActions from 'actions/vis-state-actions';
-import {ColorUI} from 'layers/layer-factory';
 import {ActionHandler} from 'actions';
 
 type LayerPanelProps = {

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

@@ -26,7 +26,7 @@ import LayerTypeListItemFactory from './layer-type-list-item';
 import ItemSelector from 'components/common/item-selector/item-selector';
 
 import {SidePanelSection} from 'components/common/styled-components';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 import {Datasets} from 'reducers';
 
 type Option = {

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

@@ -37,10 +37,10 @@ import LayerConfigGroupFactory, {
 } from './layer-config-group';
 import RangeSliderFactory from 'components/common/range-slider';
 
-import {LayerTextLabel, LAYER_TEXT_CONFIGS} from 'layers/layer-factory';
 import FieldSelectorFactory from '../../common/field-selector';
 import {Field} from 'utils/table-utils/kepler-table';
-import {RGBColor} from '@kepler.gl/types';
+import {RGBColor, LayerTextLabel} from '@kepler.gl/types';
+import {LAYER_TEXT_CONFIGS} from '@kepler.gl/constants';
 
 type TextLabelPanelProps = {
   fields: Field[];

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

@@ -28,7 +28,7 @@ import {KeyEvent} from '@kepler.gl/constants';
 import {Checkbox} from 'components';
 import {clamp} from 'utils/data-utils';
 import {isInRange} from 'utils/filter-utils';
-import {Layer, LayerBaseConfig} from 'layers';
+import {Layer, LayerBaseConfig} from '@kepler.gl/layers';
 
 type LazyInputProps = {
   value: string | [string, string];

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

@@ -25,7 +25,7 @@ import Switch from 'components/common/switch';
 import {SidePanelSection, PanelLabel} from 'components/common/styled-components';
 import {capitalizeFirstLetter} from 'utils/utils';
 import {FormattedMessage} from 'localization';
-import {Layer} from 'layers';
+import {Layer} from '@kepler.gl/layers';
 
 type VisConfigSwitchProps = {
   layer: Layer;

src/components/types.ts

@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
-import {Layer, LayerClassesType} from '../layers';
+import {Layer, LayerClassesType} from '@kepler.gl/layers';
 import {UiState} from 'reducers/ui-state-updaters';
 
 import * as MapStyleActions from 'actions/map-style-actions';

src/constants/src/index.ts

@@ -24,6 +24,7 @@ export * from './color-palette';
 export * from './color-ranges';
 export * from './custom-color-ranges';
 export * from './default-settings';
+export * from './layers';
 export {default as KeyEvent} from './keyevent';
 export * from './tooltip';
 export * from './user-feedbacks';