improve reducer updater typing, change visstate to be more relaxed (#…

…1908) Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Shan He <heshan0131@gmail.com>
keplergl · Aug 9, 2022 · bec013e · bec013e
1 parent 6c51a2a
commit bec013e
Show file tree

Hide file tree

Showing 11 changed files with 265 additions and 251 deletions.
diff --git a/package.json b/package.json
@@ -317,6 +317,7 @@
     "@deck.gl/mesh-layers": "^8.4.16",
     "@deck.gl/react": "^8.4.16",
     "@deck.gl/test-utils": "^8.4.16",
+    "d3-array": "^2.8.0",
     "d3-scale": "^3.2.3",
     "dot-prop": "6.0.0",
     "kind-of": "6.0.3",

diff --git a/src/actions/vis-state-actions.ts b/src/actions/vis-state-actions.ts
@@ -572,7 +572,7 @@ export type AddDataToMapUpdaterOptions = {
 export type UpdateVisDataUpdaterAction = {
   datasets: AddDataToMapPayload['datasets'];
   options: AddDataToMapPayload['options'];
-  config: AddDataToMapPayload['config'];
+  config?: AddDataToMapPayload['config'];
 } & AddDataToMapPayload;
 // * @param dataset.info -info of a dataset
 // * @param dataset.info.id - id of this dataset. If config is defined, `id` should matches the `dataId` in config.
@@ -598,7 +598,7 @@ export type UpdateVisDataUpdaterAction = {
 export function updateVisData(
   datasets: AddDataToMapPayload['datasets'],
   options: AddDataToMapPayload['options'],
-  config: AddDataToMapPayload['config']
+  config?: AddDataToMapPayload['config']
 ): Merge<UpdateVisDataUpdaterAction, {type: typeof ActionTypes.UPDATE_VIS_DATA}> {
   return {
     type: ActionTypes.UPDATE_VIS_DATA,

diff --git a/src/components/filters/filter-panels/new-filter-panel.tsx b/src/components/filters/filter-panels/new-filter-panel.tsx
@@ -23,7 +23,7 @@ import {StyledFilterContent} from 'components/common/styled-components';
 import FilterPanelHeaderFactory from 'components/side-panel/filter-panel/filter-panel-header';
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
 import FieldSelectorFactory from '../../common/field-selector';
-import {FilterBase} from 'reducers';
+import {FilterBase, LineChart} from 'reducers';
 import {FilterPanelComponent} from './types';
 import KeplerTable, {Field} from 'utils/table-utils/kepler-table';
 
@@ -47,7 +47,7 @@ function NewFilterPanelFactory(
   SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
   FieldSelector: ReturnType<typeof FieldSelectorFactory>
 ) {
-  const NewFilterPanel: FilterPanelComponent<FilterBase> = React.memo(
+  const NewFilterPanel: FilterPanelComponent<FilterBase<LineChart>> = React.memo(
     ({idx, filter, datasets, allAvailableFields, setFilter, removeFilter}) => {
       const onFieldSelector = useCallback(field => setFilter(idx, 'name', field.name), [
         idx,

diff --git a/src/reducers/combined-updaters.ts b/src/reducers/combined-updaters.ts
@@ -164,14 +164,19 @@ export const addDataToMapUpdater = (
 
   return compose_<KeplerGlState>([
     pick_('visState')(
-      apply_(visStateUpdateVisDataUpdater, {
+      apply_<VisState, any>(visStateUpdateVisDataUpdater, {
         datasets,
         options,
         config: parsedConfig
       })
     ),
 
-    if_(Boolean(info), pick_('visState')(apply_(setMapInfoUpdater, {info}))),
+    if_(
+      Boolean(info),
+      pick_('visState')(
+        apply_<VisState, any>(setMapInfoUpdater, {info})
+      )
+    ),
 
     with_(({visState}) =>
       pick_('mapState')(

diff --git a/src/reducers/vis-state-merger.ts b/src/reducers/vis-state-merger.ts
@@ -37,7 +37,7 @@ import {TooltipInfo} from './vis-state-updaters';
 import {SavedInteractionConfig} from 'schemas';
 
 export type Merger = {
-  merge: (state: VisState, config: any, fromConfig?: boolean) => VisState;
+  merge: <S extends VisState>(state: S, config: any, fromConfig?: boolean) => S;
   prop: string;
   toMergeProp?: string;
 };
@@ -48,11 +48,11 @@ export type VisStateMergers = Merger[];
  * save it for later
  *
  */
-export function mergeFilters(
-  state: VisState,
+export function mergeFilters<S extends VisState>(
+  state: S,
   filtersToMerge: NonNullable<ParsedConfig['visState']>['filters'],
   fromConfig?: boolean
-): VisState {
+): S {
   if (!Array.isArray(filtersToMerge) || !filtersToMerge.length) {
     return state;
   }
@@ -115,11 +115,11 @@ export function serializeLayer(newLayer): ParsedLayer {
  * save it for later
  *
  */
-export function mergeLayers(
-  state: VisState,
+export function mergeLayers<S extends VisState>(
+  state: S,
   layersToMerge: NonNullable<ParsedConfig['visState']>['layers'] = [],
   fromConfig?: boolean
-): VisState {
+): S {
   const preserveLayerOrder = fromConfig ? layersToMerge.map(l => l.id) : state.preserveLayerOrder;
 
   if (!Array.isArray(layersToMerge) || !layersToMerge.length) {
@@ -145,7 +145,6 @@ export function mergeLayers(
     ...state,
     layers: newLayers,
     layerOrder: newLayerOrder,
-    // @ts-expect-error
     preserveLayerOrder,
     layerToBeMerged: [...state.layerToBeMerged, ...unmerged]
   };
@@ -202,11 +201,11 @@ export function insertLayerAtRightOrder(
  * Merge interactions with saved config
  *
  */
-export function mergeInteractions(
-  state: VisState,
+export function mergeInteractions<S extends VisState>(
+  state: S,
   interactionToBeMerged: Partial<SavedInteractionConfig> | undefined,
   fromConfig?: boolean
-): VisState {
+): S {
   const merged: Partial<SavedInteractionConfig> = {};
   const unmerged: Partial<SavedInteractionConfig> = {};
 
@@ -263,7 +262,6 @@ export function mergeInteractions(
 
   return {
     ...state,
-    // @ts-expect-error
     interactionConfig: {
       ...state.interactionConfig,
       ...merged
@@ -279,11 +277,11 @@ export function mergeInteractions(
  * 2. if current map is NOT split, but splitMaps contain maps
  *    : add to splitMaps, and add current layers to splitMaps
  */
-export function mergeSplitMaps(
-  state: VisState,
+export function mergeSplitMaps<S extends VisState>(
+  state: S,
   splitMaps: NonNullable<ParsedConfig['visState']>['splitMaps'] = [],
   fromConfig?: boolean
-): VisState {
+): S {
   const merged = [...state.splitMaps];
   const unmerged = [];
   splitMaps.forEach((sm, i) => {
@@ -353,11 +351,11 @@ export function mergeInteractionTooltipConfig(
  * Merge layerBlending with saved
  *
  */
-export function mergeLayerBlending(
-  state: VisState,
+export function mergeLayerBlending<S extends VisState>(
+  state: S,
   layerBlending: NonNullable<ParsedConfig['visState']>['layerBlending'],
   fromConfig?: boolean
-): VisState {
+): S {
   if (layerBlending && LAYER_BLENDINGS[layerBlending]) {
     return {
       ...state,
@@ -371,11 +369,11 @@ export function mergeLayerBlending(
 /**
  * Merge animation config
  */
-export function mergeAnimationConfig(
-  state: VisState,
+export function mergeAnimationConfig<S extends VisState>(
+  state: S,
   animation: NonNullable<ParsedConfig['visState']>['animationConfig'],
   fromConfig?: boolean
-): VisState {
+): S {
   if (animation && animation.currentTime) {
     return {
       ...state,