[chore] Exported layer utils methods and added onDragStart onDragEnd …

…props (#2210)

src/components/src/index.ts

@@ -267,6 +267,7 @@ export type {LayerTypeListItemType} from './side-panel/layer-panel/layer-type-li
 export type {LayerGroupColorPickerProps} from './side-panel/map-style-panel/map-layer-group-color-picker';
 export type {MapLegendPanelProps, MapLegendPanelFactoryDeps} from './map/map-legend-panel';
 export type {FormatterDropdownProps} from './common/data-table/option-dropdown';
+export type {LayerListProps, LayerListFactoryDeps} from './side-panel/layer-panel/layer-list';
 
 export {
   Icons,

src/components/src/kepler-gl.tsx

@@ -30,7 +30,7 @@ import {RootContext, FeatureFlagsContextProvider, FeatureFlags} from './context'
 import {OnErrorCallBack, OnSuccessCallBack, Viewport} from '@kepler.gl/types';
 import {Layer} from '@kepler.gl/layers';
 
-import {DndContext, DragOverlay} from '@dnd-kit/core';
+import {DndContext, DragOverlay, DragEndEvent, DragStartEvent} from '@dnd-kit/core';
 
 import {
   MapStateActions,
@@ -60,7 +60,6 @@ import {
 
 import {
   DragItem,
-  DND_MODIFIERS,
   DND_EMPTY_MODIFIERS,
   DRAGOVERLAY_MODIFIERS,
   findDndContainerId,
@@ -345,6 +344,9 @@ type KeplerGLBasicProps = {
 
   topMapContainerProps?: object;
   bottomMapContainerProps?: object;
+
+  onDragStart?: (event: DragStartEvent) => void;
+  onDragEnd?: (event: DragEndEvent) => void;
 };
 
 type KeplerGLProps = KeplerGlState & KeplerGlActions & KeplerGLBasicProps;
@@ -508,7 +510,13 @@ function KeplerGlFactory(
       this.props.visStateActions.toggleLayerForMap(containerId, layerId);
     };
 
-    _handleDragStart = ({active}) => {
+    _handleDragStart = event => {
+      if (this.props.onDragStart) {
+        this.props.onDragStart(event);
+        return;
+      }
+
+      const {active} = event;
       const {
         visState: {layers},
         visStateActions
@@ -521,7 +529,14 @@ function KeplerGlFactory(
       }
     };
 
-    _handleDragEnd = ({active, over}) => {
+    _handleDragEnd = event => {
+      if (this.props.onDragEnd) {
+        this.props.onDragEnd(event);
+        return;
+      }
+
+      const {active, over} = event;
+
       const {
         visState: {layerOrder, splitMaps},
         visStateActions
@@ -634,7 +649,7 @@ function KeplerGlFactory(
                   <DndContext
                     onDragStart={this._handleDragStart}
                     onDragEnd={this._handleDragEnd}
-                    modifiers={!isSplit ? DND_MODIFIERS : DND_EMPTY_MODIFIERS}
+                    modifiers={DND_EMPTY_MODIFIERS}
                   >
                     {!uiState.readOnly && !readOnly && <SidePanel {...sideFields} />}
                     <MapsLayout className="maps">{mapContainers}</MapsLayout>

src/components/src/map-container.tsx

@@ -144,7 +144,7 @@ interface StyledDroppableProps {
 }
 
 const StyledDroppable = styled.div<StyledDroppableProps>`
-  background-color: ${({isOver}) => (isOver ? 'rgba(128,128,128,0.2)' : 'none')};
+  background-color: ${props => (props.isOver ? props.theme.dndOverBackgroundColor : 'none')};
   width: 100%;
   height: 100%;
   position: absolute;
@@ -156,7 +156,10 @@ export const isSplitSelector = props =>
   props.visState.splitMaps && props.visState.splitMaps.length > 1;
 
 export const Droppable = ({containerId}) => {
-  const {isOver, setNodeRef} = useDroppable({id: containerId});
+  const {isOver, setNodeRef} = useDroppable({
+    id: containerId,
+    data: {type: 'map', index: containerId}
+  });
 
   return <StyledDroppable ref={setNodeRef} isOver={isOver} />;
 };
@@ -301,6 +304,9 @@ interface MapContainerProps {
   transformRequest?: any;
 
   datasetAttributions?: DatasetAttribution[];
+
+  generateMapboxLayers?: typeof generateMapboxLayers;
+  generateDeckGLLayers?: typeof computeDeckLayers;
 }
 
 export default function MapContainerFactory(
@@ -412,12 +418,16 @@ export default function MapContainerFactory(
       }
     );
 
+    generateMapboxLayerMethodSelector = props => props.generateMapboxLayers ?? generateMapboxLayers;
+
     mapboxLayersSelector = createSelector(
       this.layersSelector,
       this.layerDataSelector,
       this.layerOrderSelector,
       this.layersToRenderSelector,
-      generateMapboxLayers
+      this.generateMapboxLayerMethodSelector,
+      (layer, layerData, layerOrder, layersToRender, generateMapboxLayerMethod) =>
+        generateMapboxLayerMethod(layer, layerData, layerOrder, layersToRender)
     );
 
     // merge in a background-color style if the basemap choice is NO_MAP_ID
@@ -658,7 +668,8 @@ export default function MapContainerFactory(
         deckGlProps,
         index,
         mapControls,
-        theme
+        theme,
+        generateDeckGLLayers
       } = this.props;
 
       const {hoverInfo, editor} = visState;
@@ -675,7 +686,8 @@ export default function MapContainerFactory(
 
       const {setFeatures, onLayerClick, setSelectedFeature} = visStateActions;
 
-      const deckGlLayers = computeDeckLayers(
+      const generateDeckGLLayersMethod = generateDeckGLLayers ?? computeDeckLayers;
+      const deckGlLayers = generateDeckGLLayersMethod(
         {
           visState,
           mapState,

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

@@ -31,7 +31,7 @@ import {useSortable, SortableContext, verticalListSortingStrategy} from '@dnd-ki
 import {CSS} from '@dnd-kit/utilities';
 import {findById} from '@kepler.gl/utils';
 
-type LayerListProps = {
+export type LayerListProps = {
   datasets: Datasets;
   layers: Layer[];
   layerOrder: string[];
@@ -41,6 +41,8 @@ type LayerListProps = {
   visStateActions: typeof VisStateActions;
 };
 
+export type LayerListFactoryDeps = [typeof LayerPanelFactory];
+
 // make sure the element is always visible while is being dragged
 // item being dragged is appended in body, here to reset its global style
 

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

@@ -194,7 +194,11 @@ const StyledDragHandle = styled.div`
   }
 `;
 
-export const DragHandle = ({className, listeners, children}) => (
+export const DragHandle: React.FC<{className?: string; listeners?: any}> = ({
+  className,
+  listeners,
+  children
+}) => (
   <StyledDragHandle className={className} {...(listeners ? listeners : {})}>
     {children}
   </StyledDragHandle>

src/constants/src/default-settings.ts

@@ -973,7 +973,7 @@ export const EXPORT_MAP_FORMAT_OPTIONS = Object.entries(EXPORT_MAP_FORMATS).map(
   })
 );
 
-export function getHTMLMapModeTileUrl(mode) {
+export function getHTMLMapModeTileUrl(mode: string): string {
   return `https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/documentation/map-${mode.toLowerCase()}-mode.png`;
 }
 

src/layers/src/editor-layer/editor-layer.ts

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 import {EditableGeoJsonLayer} from '@nebula.gl/layers';
+import {Layer as DeckLayer, LayerProps as DeckLayerProps} from '@deck.gl/core/typed';
 import {
   DrawPolygonMode,
   TranslateMode,
@@ -70,7 +71,7 @@ export function getEditorLayer({
   featureCollection,
   selectedFeatureIndexes,
   viewport
-}: GetEditorLayerProps): EditableGeoJsonLayer {
+}: GetEditorLayerProps): DeckLayer<DeckLayerProps<any>> {
   const {mode: editorMode} = editor;
 
   let mode = DEFAULT_COMPOSITE_MODE;

src/layers/src/index.ts

@@ -42,7 +42,7 @@ export {defaultElevation as h3DefaultElevation} from './h3-hexagon-layer/h3-hexa
 import {default as ScenegraphLayer} from './scenegraph-layer/scenegraph-layer';
 import {default as TripLayer} from './trip-layer/trip-layer';
 export {defaultLineWidth as tripDefaultLineWidth} from './trip-layer/trip-layer';
-export {containValidTime, parseTripGeoJsonTimestamp} from './trip-layer/trip-utils';
+export {coordHasLength4, containValidTime, isTripGeoJsonField, parseTripGeoJsonTimestamp, getAnimationDomainFromTimestamps} from './trip-layer/trip-utils';
 import {default as S2GeometryLayer} from './s2-geometry-layer/s2-geometry-layer';
 export {defaultElevation as s2DefaultElevation} from './s2-geometry-layer/s2-geometry-layer';
 export {getS2Center} from './s2-geometry-layer/s2-utils';

src/reducers/src/index.ts

@@ -71,8 +71,6 @@ export * from './composer-helpers';
 // export types
 export * from './vis-state-updaters';
 
-export * from './layer-utils';
-
 export {INITIAL_UI_STATE} from './ui-state-updaters';
 
 export type {

src/reducers/src/layer-utils.ts

@@ -19,6 +19,7 @@
 // THE SOFTWARE.
 
 import {GEOCODER_LAYER_ID} from '@kepler.gl/constants';
+import {Layer as DeckLayer, LayerProps as DeckLayerProps} from '@deck.gl/core/typed';
 import {
   Field,
   TooltipField,
@@ -96,15 +97,20 @@ export function findDefaultLayer(dataset: KeplerTable, layerClasses: LayerClasse
   });
 }
 
+type MinVisState = {
+  datasets: VisState['datasets'];
+  animationConfig: VisState['animationConfig'];
+};
+
 /**
  * Calculate layer data based on layer type, col Config,
  * return updated layer if colorDomain, dataMap has changed.
  * Also, returns updated layer in case the input layer was in invalid state.
  * Adds an error message to the layer in case of an exception.
  */
-export function calculateLayerData(
+export function calculateLayerData<S extends MinVisState>(
   layer: Layer,
-  state: {datasets: Datasets},
+  state: S,
   oldLayerData?: any
 ): {
   layerData: any;
@@ -248,7 +254,7 @@ export function isLayerVisible(layer, mapLayers) {
 // return {[id]: true \ false}
 export function prepareLayersForDeck(
   layers: Layer[],
-  layerData: any[]
+  layerData: VisState['layerData']
 ): {
   [key: string]: boolean;
 } {
@@ -279,7 +285,9 @@ export function prepareLayersToRender(
   );
 }
 
-export function getCustomDeckLayers(deckGlProps) {
+type CustomDeckLayer = DeckLayer<DeckLayerProps<any>>;
+
+export function getCustomDeckLayers(deckGlProps?: any): [CustomDeckLayer[], CustomDeckLayer[]] {
   const bottomDeckLayers = Array.isArray(deckGlProps?.layers)
     ? deckGlProps?.layers
     : isFunction(deckGlProps?.layers)
@@ -317,24 +325,26 @@ export type ComputeDeckLayersProps = {
   };
 };
 
-export function bindLayerCallbacks(layerCallbacks = {}, idx) {
+export function bindLayerCallbacks(layerCallbacks: LayerCallbacks = {}, idx: number) {
   return Object.keys(layerCallbacks).reduce(
     (accu, key) => ({
       ...accu,
       [key]: val => layerCallbacks[key](idx, val)
     }),
-    {}
+    {} as Record<string, (_idx: number, val: any) => void>
   );
 }
 
+export type LayerCallbacks = {
+  onLayerHover?: (idx: number, value: any) => void;
+  onSetLayerDomain?: (idx: number, value: any) => void;
+};
+
 // eslint-disable-next-line complexity
 export function computeDeckLayers(
   {visState, mapState, mapStyle}: any,
   options?: ComputeDeckLayersProps,
-  layerCallbacks?: {
-    onLayerHover?: (idx: number, value: any) => void;
-    onSetLayerDomain?: (idx: number, value: any) => void;
-  },
+  layerCallbacks?: LayerCallbacks,
   deckGlProps?: any
 ): Layer[] {
   const {

src/reducers/src/vis-state-updaters.ts

@@ -816,30 +816,30 @@ export function setFilterUpdater(
       // @ts-ignore
       const layerIdDifference = xor(newFilter.layerId, oldFilter.layerId);
 
-      const layerDataIds = uniq(
+      const layerDataIds = uniq<string>(
         layerIdDifference
           .map(lid =>
             get(
               state.layers.find(l => l.id === lid),
               ['config', 'dataId']
             )
           )
-          .filter(d => d)
+          .filter(d => d) as string[]
       );
 
       // only filter datasetsIds
       datasetIds = layerDataIds;
 
       // Update newFilter dataIds
-      const newDataIds = uniq(
+      const newDataIds = uniq<string>(
         newFilter.layerId
-          .map(lid =>
+          ?.map(lid =>
             get(
               state.layers.find(l => l.id === lid),
               ['config', 'dataId']
             )
           )
-          .filter(d => d)
+          .filter(d => d) as string[]
       );
 
       newFilter = {
@@ -1631,6 +1631,7 @@ export const updateVisDataUpdater = (
   const datasets = toArray(action.datasets);
 
   const newDataEntries = datasets.reduce(
+    // @ts-expect-error  Type '{}' is missing the following properties from type 'ProtoDataset': data, info
     (accu, {info = {}, ...rest} = {}) => ({
       ...accu,
       ...(createNewDataEntry({info, ...rest}, state.datasets) || {})
@@ -2770,7 +2771,11 @@ export function replaceDatasetDepsInState<T extends VisState>(
           ? replacePropValueInState(replacedState, replacedItem, mergerOptions)
           : replacedState;
 
-        if (replacedState[mergerOptions.toMergeProp]?.length && preserveOrder) {
+        if (
+          mergerOptions.toMergeProp !== undefined &&
+          replacedState[mergerOptions.toMergeProp]?.length &&
+          preserveOrder
+        ) {
           replacedState[preserveOrder] = propValue.map(item => item.id);
         }
       });

src/schemas/src/index.ts

@@ -42,7 +42,9 @@ export {
   DimensionFieldSchema,
   SplitMapsSchema,
   filterPropsV1,
-  default as visStateSchema
+  default as visStateSchema,
+  layerPropsV1,
+  layerPropsV0
 } from './vis-state-schema';
 export type {
   SavedField,

src/schemas/src/schema.ts

@@ -53,7 +53,7 @@ export default class Schema {
 
   loadPropertiesOrApplySchema(
     node: any,
-    parents: object[] = [],
+    parents: any[] = [],
     accumulator?: any
   ): {[key: string]: any} {
     return this._getPropertyValueFromSchema('load', node, parents, accumulator);