keplergl · igorDykhta · Nov 4, 2023 · Oct 28, 2023 · Aug 2, 2023
diff --git a/src/actions/src/vis-state-actions.ts b/src/actions/src/vis-state-actions.ts
@@ -37,8 +37,7 @@ import {
   Filter,
   ParsedConfig,
   ParsedLayer,
-  EffectConfig,
-  EffectParamsPartial
+  EffectPropsPartial
 } from '@kepler.gl/types';
 // TODO - import LoaderObject type from @loaders.gl/core when supported
 // TODO - import LoadOptions type from @loaders.gl/core when supported
@@ -524,7 +523,7 @@ export function duplicateLayer(
 }
 
 export type AddEffectUpdaterAction = {
-  config: EffectParamsPartial;
+  config: EffectPropsPartial;
 };
 
 /**
@@ -535,7 +534,7 @@ export type AddEffectUpdaterAction = {
  * @public
  */
 export function addEffect(
-  config: EffectParamsPartial
+  config: EffectPropsPartial
 ): Merge<AddEffectUpdaterAction, {type: typeof ActionTypes.ADD_EFFECT}> {
   return {
     type: ActionTypes.ADD_EFFECT,
@@ -585,7 +584,7 @@ export function removeEffect(
 
 export type UpdateEffectUpdaterAction = {
   id: string;
-  props: Partial<EffectConfig>;
+  props: EffectPropsPartial;
 };
 
 /**
@@ -597,7 +596,7 @@ export type UpdateEffectUpdaterAction = {
  */
 export function updateEffect(
   id: string,
-  props: Partial<EffectConfig>
+  props: EffectPropsPartial
 ): Merge<UpdateEffectUpdaterAction, {type: typeof ActionTypes.UPDATE_EFFECT}> {
   return {
     type: ActionTypes.UPDATE_EFFECT,

diff --git a/src/components/src/effects/effect-configurator.tsx b/src/components/src/effects/effect-configurator.tsx
@@ -4,7 +4,7 @@ import {injectIntl, IntlShape} from 'react-intl';
 
 import {LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
 import {isNumber} from '@kepler.gl/utils';
-import {Effect, EffectConfig} from '@kepler.gl/types';
+import {Effect, EffectUpdateProps} from '@kepler.gl/types';
 
 import {PanelLabel} from '../common/styled-components';
 import RangeSliderFactory from '../common/range-slider';
@@ -16,7 +16,7 @@ export type EffectConfiguratorProps = {
   updateEffectConfig: (
     e: Event | null | undefined,
     id: string,
-    config: Partial<EffectConfig>
+    config: Partial<EffectUpdateProps>
   ) => void;
 };
 
@@ -67,40 +67,39 @@ export default function EffectConfiguratorFactory(
 ): React.FC<EffectConfiguratorProps> {
   const EffectConfigurator = ({
     effect,
-    updateEffectConfig,
-    intl
+    updateEffectConfig
   }: EffectConfiguratorProps & {intl: IntlShape}) => {
     const renderShadowEffectConfigurator = useCallback(() => {
-      const {config} = effect;
+      const {parameters} = effect;
 
       const sliderProps = useMemo(() => {
         const propNames = ['shadowIntensity', 'ambientLightIntensity', 'sunLightIntensity'];
         return propNames.map(propName => {
           return {
-            value1: effect.config.params[propName],
+            value1: parameters[propName],
             range: [0, 1],
             value0: 0,
-            onChange: (value: number[], e?: Event) => {
-              updateEffectConfig(e, effect.id, {params: {[propName]: value[1]}});
+            onChange: (value: number[], event?: Event) => {
+              updateEffectConfig(event, effect.id, {parameters: {[propName]: value[1]}});
             }
           };
         });
-      }, [effect, config.params, updateEffectConfig]);
+      }, [effect.id, parameters, updateEffectConfig]);
 
       const onDateTimeChange = useCallback(
         value => {
-          updateEffectConfig(null, effect.id, {params: {timestamp: value}});
+          updateEffectConfig(null, effect.id, {parameters: {timestamp: value}});
         },
-        [effect, updateEffectConfig]
+        [effect.id, updateEffectConfig]
       );
 
       const onTimeModeChange = useCallback(
         value => {
           updateEffectConfig(null, effect.id, {
-            params: {timeMode: value}
+            parameters: {timeMode: value}
           });
         },
-        [effect, updateEffectConfig]
+        [effect.id, updateEffectConfig]
       );
 
       const colorPickerProps = useMemo(() => {
@@ -109,25 +108,24 @@ export default function EffectConfiguratorFactory(
           return {
             colorSets: [
               {
-                selectedColor: config.params[propName],
-                setColor: v => updateEffectConfig(null, effect.id, {params: {[propName]: v}})
+                selectedColor: parameters[propName],
+                setColor: v => updateEffectConfig(null, effect.id, {parameters: {[propName]: v}})
               }
             ]
           };
         });
-      }, [effect, config.params, updateEffectConfig]);
+      }, [effect.id, parameters, updateEffectConfig]);
 
       return (
         <StyledEffectConfigurator key={effect.id}>
           <PanelLabelWrapper>
             <PanelLabel>{'Date & Time'}</PanelLabel>
           </PanelLabelWrapper>
           <EffectTimeConfigurator
-            timestamp={config.params.timestamp}
+            timestamp={parameters.timestamp}
             onDateTimeChange={onDateTimeChange}
-            timeMode={config.params.timeMode}
+            timeMode={parameters.timeMode}
             onTimeModeChange={onTimeModeChange}
-            intl={intl}
           />
           <PanelLabelWrapper>
             <PanelLabel>{'Shadow intensity'}</PanelLabel>
@@ -161,12 +159,11 @@ export default function EffectConfiguratorFactory(
           </StyledColorSelectorWrapper>
         </StyledEffectConfigurator>
       );
-    }, [effect, updateEffectConfig]);
+    }, [effect, effect.parameters, updateEffectConfig]);
 
     const renderPostProcessingEffectConfigurator = useCallback(() => {
-      const {config} = effect;
       const uniforms = effect.deckEffect?.module.uniforms || {};
-      const propNames = Object.keys(uniforms);
+      const propNames = useMemo(() => Object.keys(uniforms), [uniforms]);
 
       const slidersForProps = useMemo(() => {
         return propNames.map(propName => {
@@ -181,17 +178,17 @@ export default function EffectConfiguratorFactory(
             range: [number, number];
             onChange: (value: number[], e?: Event) => void;
           }[] = [];
-          const prevValue = config.params[propName];
+          const prevValue = effect.parameters[propName];
 
           // the uniform is [0, 1] array
           if (uniform.length === 2) {
             sliders.push({
               value1: prevValue[0] || 0,
               range: [0, 1],
               value0: 0,
-              onChange: (newValue, e) => {
-                updateEffectConfig(e, effect.id, {
-                  params: {[propName]: [newValue[1], prevValue[1]]}
+              onChange: (newValue, event) => {
+                updateEffectConfig(event, effect.id, {
+                  parameters: {[propName]: [newValue[1], prevValue[1]]}
                 });
               }
             });
@@ -200,9 +197,9 @@ export default function EffectConfiguratorFactory(
               value1: prevValue[1] || 0,
               range: [0, 1],
               value0: 0,
-              onChange: (newValue, e) => {
-                updateEffectConfig(e, effect.id, {
-                  params: {[propName]: [prevValue[0], newValue[1]]}
+              onChange: (newValue, event) => {
+                updateEffectConfig(event, effect.id, {
+                  parameters: {[propName]: [prevValue[0], newValue[1]]}
                 });
               }
             });
@@ -213,8 +210,8 @@ export default function EffectConfiguratorFactory(
               value1: prevValue || 0,
               range: [0, 500],
               value0: 0,
-              onChange: (newValue, e) => {
-                updateEffectConfig(e, effect.id, {params: {[propName]: newValue[1]}});
+              onChange: (newValue, event) => {
+                updateEffectConfig(event, effect.id, {parameters: {[propName]: newValue[1]}});
               }
             });
           }
@@ -224,8 +221,8 @@ export default function EffectConfiguratorFactory(
               value1: prevValue || 0,
               range: [uniform.min ?? uniform.softMin ?? 0, uniform.max ?? uniform.softMax ?? 1],
               value0: uniform.min ?? uniform.softMin ?? 0,
-              onChange: (newValue, e) => {
-                updateEffectConfig(e, effect.id, {params: {[propName]: newValue[1]}});
+              onChange: (newValue, event) => {
+                updateEffectConfig(event, effect.id, {parameters: {[propName]: newValue[1]}});
               }
             });
           } else {
@@ -234,7 +231,7 @@ export default function EffectConfiguratorFactory(
 
           return sliders;
         });
-      }, [propNames, effect, effect.config.params, updateEffectConfig]);
+      }, [propNames, effect, effect.parameters, updateEffectConfig]);
 
       return (
         <StyledEffectConfigurator key={effect.id}>
@@ -257,10 +254,9 @@ export default function EffectConfiguratorFactory(
           })}
         </StyledEffectConfigurator>
       );
-    }, [effect, updateEffectConfig]);
+    }, [effect, effect.parameters, updateEffectConfig]);
 
-    const {config} = effect;
-    if (config.type === LIGHT_AND_SHADOW_EFFECT.type) return renderShadowEffectConfigurator();
+    if (effect.type === LIGHT_AND_SHADOW_EFFECT.type) return renderShadowEffectConfigurator();
     return renderPostProcessingEffectConfigurator();
   };
 

diff --git a/src/components/src/effects/effect-manager.tsx b/src/components/src/effects/effect-manager.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import {injectIntl, IntlShape} from 'react-intl';
 
 import {addEffect, updateEffect, removeEffect, reorderEffect} from '@kepler.gl/actions';
-import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCS} from '@kepler.gl/constants';
+import {LIGHT_AND_SHADOW_EFFECT, EFFECT_DESCRIPTIONS} from '@kepler.gl/constants';
 import {VisStateActions} from '@kepler.gl/actions';
 import {Effect} from '@kepler.gl/types';
 
@@ -73,12 +73,12 @@ function EffectManagerFactory(
     // Prevent shadow effect from being added multiple times
     const effectOptions = useMemo(() => {
       const hasShadow = effects.some(effect => {
-        return effect.config.type === LIGHT_AND_SHADOW_EFFECT.type;
+        return effect.type === LIGHT_AND_SHADOW_EFFECT.type;
       });
 
       return hasShadow
-        ? EFFECT_DESCS.filter(desc => desc.type !== LIGHT_AND_SHADOW_EFFECT.type)
-        : EFFECT_DESCS;
+        ? EFFECT_DESCRIPTIONS.filter(desc => desc.type !== LIGHT_AND_SHADOW_EFFECT.type)
+        : EFFECT_DESCRIPTIONS;
     }, [effects]);
 
     return (

diff --git a/src/components/src/effects/effect-panel-header.tsx b/src/components/src/effects/effect-panel-header.tsx
@@ -1,13 +1,15 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import classnames from 'classnames';
 import styled from 'styled-components';
 
+import {EFFECT_DESCRIPTIONS} from '@kepler.gl/constants';
+
 import PanelHeaderActionFactory from '../side-panel/panel-header-action';
 import {ArrowDown, EyeSeen, EyeUnseen, Trash, VertDots, BaseProps} from '../common/icons';
 import {StyledPanelHeader} from '../common/styled-components';
 
 export type EffectPanelHeaderProps = {
-  label: string;
+  type: string;
   listeners: any;
   effectId: string;
   isEnabled: boolean;
@@ -181,12 +183,17 @@ function EffectPanelHeaderFactory(
     const {
       isConfigActive,
       isDragNDropEnabled,
-      label,
+      type,
       onToggleEnableConfig,
       listeners,
       showSortHandle = true
     } = props;
 
+    const label = useMemo(() => {
+      const description = EFFECT_DESCRIPTIONS.find(_description => _description.type === type);
+      return description?.name || 'Effect';
+    }, [type]);
+
     return (
       <StyledEffectPanelHeader
         className={classnames('effect-panel__header', {

diff --git a/src/components/src/effects/effect-panel.tsx b/src/components/src/effects/effect-panel.tsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 
 import {dataTestIds, LIGHT_AND_SHADOW_EFFECT} from '@kepler.gl/constants';
 import {removeEffect, updateEffect} from '@kepler.gl/actions';
-import {Effect, EffectConfig} from '@kepler.gl/types';
+import {Effect} from '@kepler.gl/types';
 
 import EffectPanelHeaderFactory from './effect-panel-header';
 import EffectConfiguratorFactory from './effect-configurator';
@@ -52,35 +52,35 @@ function EffectPanelFactory(
       isDraggable: PropTypes.bool
     };
 
-    _toggleEnabled = (e?: Event) => {
-      e?.stopPropagation();
+    _toggleEnabled = (event?: Event) => {
+      event?.stopPropagation();
       this.props.updateEffect(this.props.effect.id, {
-        isEnabled: !this.props.effect.config.isEnabled
+        isEnabled: !this.props.effect.isEnabled
       });
     };
 
-    _toggleConfigActive = (e?: Event) => {
-      e?.stopPropagation();
+    _toggleConfigActive = (event?: Event) => {
+      event?.stopPropagation();
       this.props.updateEffect(this.props.effect.id, {
-        isConfigActive: !this.props.effect.config.isConfigActive
+        isConfigActive: !this.props.effect.isConfigActive
       });
     };
 
-    _removeEffect = (e?: Event) => {
-      e?.stopPropagation();
+    _removeEffect = (event?: Event) => {
+      event?.stopPropagation();
       this.props.removeEffect(this.props.effect.id);
     };
 
-    _updateEffectConfig = (e, id, props) => {
-      e?.stopPropagation();
+    _updateEffectConfig = (event, id, props) => {
+      event?.stopPropagation();
       this.props.updateEffect(id, props);
     };
 
     render() {
       const {effect, isDraggable, listeners} = this.props;
-      const {config = {} as EffectConfig} = effect;
+      const {id, type, isConfigActive, isEnabled} = effect;
 
-      const sortingAllowed = config.type !== LIGHT_AND_SHADOW_EFFECT.type;
+      const sortingAllowed = type !== LIGHT_AND_SHADOW_EFFECT.type;
 
       return (
         <PanelWrapper
@@ -92,20 +92,20 @@ function EffectPanelFactory(
           onTouchStart={this.props.onTouchStart}
         >
           <EffectPanelHeader
-            isConfigActive={config.isConfigActive}
-            effectId={effect.id}
-            label={config.name}
-            isEnabled={config.isEnabled}
+            isConfigActive={isConfigActive}
+            effectId={id}
+            type={type}
+            isEnabled={isEnabled}
             onToggleEnabled={this._toggleEnabled}
             onRemoveEffect={this._removeEffect}
             onToggleEnableConfig={this._toggleConfigActive}
             isDragNDropEnabled={isDraggable && sortingAllowed}
             listeners={listeners}
-            showSortHandle={effect.type !== LIGHT_AND_SHADOW_EFFECT.type}
+            showSortHandle={type !== LIGHT_AND_SHADOW_EFFECT.type}
           />
-          {config.isConfigActive && (
+          {isConfigActive && (
             <EffectConfigurator
-              key={`effect-configurator-${effect.id}`}
+              key={`effect-configurator-${id}`}
               effect={effect}
               updateEffectConfig={this._updateEffectConfig}
             />