[feat] introduction of deck.gl effects (#2372)

examples/demo-app/src/factories/map-control.js

@@ -20,25 +20,73 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {MapControlFactory, withState} from '@kepler.gl/components';
+import {
+  withState, 
+  MapControlFactory,
+  EffectControlFactory,
+  EffectManagerFactory
+} from '@kepler.gl/components';
 import {SampleMapPanel} from '../components/map-control/map-control';
 
-CustomMapControlFactory.deps = MapControlFactory.deps;
-function CustomMapControlFactory(...deps) {
+const StyledMapControlPanel = styled.div`
+  position: relative;
+`;
+
+const StyledMapControlContextPanel = styled.div`
+  max-height: 100%;
+  overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  pointer-events: none !important; /* prevent padding from blocking input */
+  & > * {
+    /* all children should allow input */
+    pointer-events: all;
+  }
+`;
+
+const StyledMapControlOverlay = styled.div`
+  position: absolute;
+  display: flex;
+  top: ${props => props.top}px;
+  right: 0;
+  z-index: 1;
+  pointer-events: none !important; /* prevent padding from blocking input */
+  & > * {
+    /* all children should allow input */
+    pointer-events: all;
+  }
+
+  margin-top: ${props => props.theme.rightPanelMarginTop}px;
+  margin-right: ${props => props.theme.rightPanelMarginRight}px;
+  ${props => (props.fullHeight ? 'height' : 'max-height')}: calc(100% - ${props =>
+  props.theme.rightPanelMarginTop + props.theme.bottomWidgetPaddingBottom}px);
+`;
+
+CustomMapControlFactory.deps = [
+  EffectControlFactory,
+  EffectManagerFactory,
+  ...MapControlFactory.deps
+];
+function CustomMapControlFactory(EffectControl, EffectManager, ...deps) {
   const MapControl = MapControlFactory(...deps);
-  const StyledMapControlOverlay = styled.div`
-    position: absolute;
-    top: ${props => props.top}px;
-    right: 0;
-    z-index: 1;
-  `;
-
-  const CustomMapControl = props => (
-    <StyledMapControlOverlay top={props.top}>
-      {!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
-      <MapControl {...props} top={0} />
-    </StyledMapControlOverlay>
-  );
+  const actionComponents = [...(MapControl.defaultProps?.actionComponents ?? []), EffectControl];
+
+  const CustomMapControl = props => {
+    const showEffects = props.mapControls?.effect?.active;
+    return (
+      <StyledMapControlOverlay top={props.top}>
+        <StyledMapControlPanel>
+          {!props.isExport && props.currentSample ? <SampleMapPanel {...props} /> : null}
+          <MapControl {...props} top={0} actionComponents={actionComponents} />
+        </StyledMapControlPanel>
+        <StyledMapControlContextPanel>
+          {showEffects ? <EffectManager /> : null}
+        </StyledMapControlContextPanel>
+      </StyledMapControlOverlay>
+    );
+  };
 
   return withState([], state => ({...state.demo.app}))(CustomMapControl);
 }

examples/webpack.config.local.js

@@ -57,7 +57,9 @@ function makeLocalDevConfig(env, EXAMPLE_DIR = LIB_DIR, externals = {}) {
     'react-dom': `${NODE_MODULES_DIR}/react-dom`,
     'react-redux': `${NODE_MODULES_DIR}/react-redux/lib`,
     'styled-components': `${NODE_MODULES_DIR}/styled-components`,
-    'react-intl': `${NODE_MODULES_DIR}/react-intl`
+    'react-intl': `${NODE_MODULES_DIR}/react-intl`,
+    // Suppress useles warnings from react-date-picker's dep
+    'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`
   };
 
   // Combine flags

package.json

@@ -29,6 +29,7 @@
     "./src/processors",
     "./src/tasks",
     "./src/actions",
+    "./src/effects",
     "./src/reducers",
     "./src/components"
   ],
@@ -96,6 +97,7 @@
     "components.js",
     "constants.js",
     "layers.js",
+    "effects.js",
     "middleware.js",
     "processors.js",
     "reducers.js",

src/actions/src/action-types.ts

@@ -117,6 +117,10 @@ export const ActionTypes = {
   NEXT_FILE_BATCH: `${ACTION_PREFIX}NEXT_FILE_BATCH`,
   PROCESS_FILE_CONTENT: `${ACTION_PREFIX}PROCESS_FILE_CONTENT`,
   UPDATE_TABLE_COLOR: `${ACTION_PREFIX}UPDATE_TABLE_COLOR`,
+  ADD_EFFECT: `${ACTION_PREFIX}ADD_EFFECT`,
+  REORDER_EFFECT: `${ACTION_PREFIX}REORDER_EFFECT`,
+  REMOVE_EFFECT: `${ACTION_PREFIX}REMOVE_EFFECT`,
+  UPDATE_EFFECT: `${ACTION_PREFIX}UPDATE_EFFECT`,
 
   // mapState
   UPDATE_MAP: `${ACTION_PREFIX}UPDATE_MAP`,

src/actions/src/vis-state-actions.ts

@@ -36,7 +36,9 @@ import {
   InteractionConfig,
   Filter,
   ParsedConfig,
-  ParsedLayer
+  ParsedLayer,
+  EffectConfig,
+  EffectParamsPartial
 } from '@kepler.gl/types';
 // TODO - import LoaderObject type from @loaders.gl/core when supported
 // TODO - import LoadOptions type from @loaders.gl/core when supported
@@ -521,6 +523,89 @@ export function duplicateLayer(
   };
 }
 
+export type AddEffectUpdaterAction = {
+  config: EffectParamsPartial;
+};
+
+/**
+ * Add a new effect
+ * @memberof visStateActions
+ * @param config - new effect config
+ * @returns action
+ * @public
+ */
+export function addEffect(
+  config: EffectParamsPartial
+): Merge<AddEffectUpdaterAction, {type: typeof ActionTypes.ADD_EFFECT}> {
+  return {
+    type: ActionTypes.ADD_EFFECT,
+    config
+  };
+}
+
+export type ReorderEffectUpdaterAction = {
+  order: string[];
+};
+
+/**
+ * Reorder effects
+ * @memberof visStateActions
+ * @param order an array of effect ids
+ * @returns action
+ * @public
+ */
+export function reorderEffect(
+  order: string[]
+): Merge<ReorderEffectUpdaterAction, {type: typeof ActionTypes.REORDER_EFFECT}> {
+  return {
+    type: ActionTypes.REORDER_EFFECT,
+    order
+  };
+}
+
+export type RemoveEffectUpdaterAction = {
+  id: string;
+};
+
+/**
+ * Remove an effect
+ * @memberof visStateActions
+ * @param id idx of the effect to be removed
+ * @returns action
+ * @public
+ */
+export function removeEffect(
+  id: string
+): Merge<RemoveEffectUpdaterAction, {type: typeof ActionTypes.REMOVE_EFFECT}> {
+  return {
+    type: ActionTypes.REMOVE_EFFECT,
+    id
+  };
+}
+
+export type UpdateEffectUpdaterAction = {
+  id: string;
+  props: Partial<EffectConfig>;
+};
+
+/**
+ * Update an effect
+ * @memberof visStateActions
+ * @param props idx of the effect to be updated with specified props
+ * @returns action
+ * @public
+ */
+export function updateEffect(
+  id: string,
+  props: Partial<EffectConfig>
+): Merge<UpdateEffectUpdaterAction, {type: typeof ActionTypes.UPDATE_EFFECT}> {
+  return {
+    type: ActionTypes.UPDATE_EFFECT,
+    id,
+    props
+  };
+}
+
 export type RemoveDatasetUpdaterAction = {
   dataId: string;
 };

src/components/package.json

@@ -40,6 +40,7 @@
     "@kepler.gl/cloud-providers": "3.0.0-alpha.0",
     "@kepler.gl/constants": "3.0.0-alpha.0",
     "@kepler.gl/layers": "3.0.0-alpha.0",
+    "@kepler.gl/effects": "3.0.0-alpha.0",
     "@kepler.gl/localization": "3.0.0-alpha.0",
     "@kepler.gl/processors": "3.0.0-alpha.0",
     "@kepler.gl/reducers": "3.0.0-alpha.0",
@@ -104,6 +105,7 @@
     "react": "^18.2.0",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.2",
+    "react-date-picker": "^10.2.0",
     "react-dom": "^18.2.0",
     "react-intl": "^6.3.0",
     "react-json-pretty": "^2.2.0",
@@ -114,6 +116,7 @@
     "react-onclickoutside": "^6.7.1",
     "react-redux": "^8.0.5",
     "react-sortable-hoc": "^1.8.3",
+    "react-time-picker": "^6.2.0",
     "react-tooltip": "^4.2.17",
     "react-virtualized": "^9.22.4",
     "react-vis": "1.11.7",