[Chore]: Technical: add types for filters (#1809)

* add types for filters

Signed-off-by: e.zhgulev <e.zhgulev@studiotg.ru>

* add changes due to code review

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

* fix typescript exception

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

* add factory return type

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

* fix linting failure

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

* add changes due to code review

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

* add changes due to code review

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

Co-authored-by: e.zhgulev <e.zhgulev@studiotg.ru>

src/actions/actions.ts

@@ -71,6 +71,8 @@ export type AddDataToMapPayload = {
   info?: Partial<MapInfo>;
 };
 
+export type ActionHandler<A extends (...args: any) => any> = (...args: Parameters<A>) => void;
+
 /**
  * Add data to kepler.gl reducer, prepare map with preset configuration if config is passed.
  * Kepler.gl provides a handy set of utils to parse data from different formats to the `data` object required in dataset. You rarely need to manually format the data obejct.

src/actions/vis-state-actions.ts

@@ -240,7 +240,7 @@ export function setFilter(
   idx: number,
   prop: string,
   value: any,
-  valueIndex: number
+  valueIndex?: number
 ): Merge<SetFilterUpdaterAction, {type: typeof ActionTypes.SET_FILTER}> {
   return {
     type: ActionTypes.SET_FILTER,
@@ -309,7 +309,7 @@ export function setFilterAnimationWindow({
 }
 
 export type AddFilterUpdaterAction = {
-  dataId: string;
+  dataId?: string | null;
 };
 /**
  * Add a new filter
@@ -319,7 +319,7 @@ export type AddFilterUpdaterAction = {
  * @public
  */
 export function addFilter(
-  dataId: string
+  dataId: string | null
 ): Merge<AddFilterUpdaterAction, {type: typeof ActionTypes.ADD_FILTER}> {
   return {
     type: ActionTypes.ADD_FILTER,

src/components/bottom-widget.tsx

@@ -245,7 +245,7 @@ export default function BottomWidgetFactory(
                 <TimeWidget
                   // TimeWidget uses React.memo, here we pass width
                   // even though it doesnt use it, to force rerender
-                  filter={filters[enlargedFilterIdx]}
+                  filter={filters[enlargedFilterIdx] as TimeRangeFilter}
                   index={enlargedFilterIdx}
                   datasets={datasets}
                   readOnly={readOnly}

src/components/common/animation-control/floating-time-display.tsx

@@ -120,9 +120,9 @@ const TimeDisplayRow = ({timeValues = []}: TimeDisplayRowProps) => (
 
 interface FloatingTimeDisplayProps {
   currentTime: number | number[];
-  defaultTimeFormat?: string;
-  timeFormat?: string;
-  timezone?: string;
+  defaultTimeFormat?: string | null;
+  timeFormat?: string | null;
+  timezone?: string | null;
 }
 
 export default function FloatingTimeDisplayFactory() {

src/components/common/animation-control/playback-controls.tsx

@@ -157,9 +157,9 @@ interface PlaybackControls {
   speed: number;
   animationWindow?: string;
   setFilterAnimationWindow?: (id: string) => void;
-  updateAnimationSpeed;
+  updateAnimationSpeed?: (val: number) => void;
   pauseAnimation?: () => void;
-  resetAnimation: () => void;
+  resetAnimation?: () => void;
   startAnimation: () => void;
   playbackIcons?: typeof DEFAULT_ICONS;
   animationItems?: {[key: string]: AnimationItem};

src/components/common/field-selector.tsx

@@ -27,6 +27,7 @@ import {classList} from './item-selector/dropdown-list';
 import {toArray} from 'utils/utils';
 import {notNullorUndefined} from 'utils/data-utils';
 import FieldTokenFactory from '../common/field-token';
+import {Field} from 'utils/table-utils/kepler-table';
 
 const defaultDisplayOption = d => d.displayName || d.name;
 const defaultValueOption = d => d.name;
@@ -73,7 +74,8 @@ type FieldType =
       name?: string;
       fieldIdx?: number;
       type?: number;
-    };
+    }
+  | Field;
 
 interface FieldSelectorFactoryProps {
   fields?: FieldType[];

src/components/common/range-slider.tsx

@@ -73,7 +73,7 @@ interface RangeSliderProps {
   step?: number;
   sliderHandleWidth?: number;
   xAxis?: ElementType;
-  timezone?: string;
+  timezone?: string | null;
   timeFormat?: string;
   playbackControlWidth?: number;
   lineChart?: LineChart;

src/components/common/time-range-slider-time-title.tsx

@@ -64,7 +64,7 @@ const TimeValue = ({value}) => (
 interface TimeTitleProps {
   value: number[];
   isEnlarged?: boolean;
-  timezone?: string;
+  timezone?: string | null;
   timeFormat: string;
 }
 

src/components/common/time-range-slider.tsx

@@ -19,21 +19,43 @@
 // THE SOFTWARE.
 
 import React, {useMemo} from 'react';
-import PropTypes from 'prop-types';
 import throttle from 'lodash.throttle';
 import styled from 'styled-components';
 
 import RangeSliderFactory from 'components/common/range-slider';
 import TimeSliderMarkerFactory from 'components/common/time-slider-marker';
 import PlaybackControlsFactory from 'components/common/animation-control/playback-controls';
 import TimeRangeSliderTimeTitleFactory from 'components/common/time-range-slider-time-title';
+import {HistogramBin, LineChart} from 'reducers';
 
 const animationControlWidth = 176;
 
 interface StyledSliderContainerProps {
   isEnlarged?: boolean;
 }
 
+type TimeRangeSliderProps = {
+  domain?: [number, number];
+  value: [number, number];
+  isEnlarged?: boolean;
+  hideTimeTitle?: boolean;
+  isAnimating: boolean;
+  timeFormat: string;
+  timezone?: string | null;
+  histogram?: HistogramBin[];
+  plotType?: string;
+  lineChart?: LineChart;
+  step: number;
+  isAnimatable?: boolean;
+  speed: number;
+  animationWindow: string;
+  resetAnimation?: () => void;
+  toggleAnimation: () => void;
+  updateAnimationSpeed?: (val: number) => void;
+  setFilterAnimationWindow?: (id: string) => void;
+  onChange: (v: number[]) => void;
+};
+
 const StyledSliderContainer = styled.div<StyledSliderContainerProps>`
   align-items: flex-end;
   display: flex;
@@ -63,7 +85,7 @@ export default function TimeRangeSliderFactory(
   TimeSliderMarker: ReturnType<typeof TimeSliderMarkerFactory>,
   TimeRangeSliderTimeTitle: ReturnType<typeof TimeRangeSliderTimeTitleFactory>
 ) {
-  const TimeRangeSlider = props => {
+  const TimeRangeSlider: React.FC<TimeRangeSliderProps> = props => {
     const {
       domain,
       value,
@@ -145,23 +167,5 @@ export default function TimeRangeSliderFactory(
     );
   };
 
-  TimeRangeSlider.propTypes = {
-    onChange: PropTypes.func.isRequired,
-    domain: PropTypes.arrayOf(PropTypes.number),
-    value: PropTypes.arrayOf(PropTypes.number).isRequired,
-    step: PropTypes.number.isRequired,
-    plotType: PropTypes.string,
-    histogram: PropTypes.arrayOf(PropTypes.any),
-    lineChart: PropTypes.object,
-    toggleAnimation: PropTypes.func.isRequired,
-    exportAnimation: PropTypes.func,
-    isAnimatable: PropTypes.bool,
-    isEnlarged: PropTypes.bool,
-    speed: PropTypes.number,
-    timeFormat: PropTypes.string,
-    timezone: PropTypes.string,
-    hideTimeTitle: PropTypes.bool
-  };
-
   return React.memo(TimeRangeSlider);
 }

src/components/filters/filter-panels/filter-panel-with-field-select.js → src/components/filters/filter-panels/filter-panel-with-field-select.tsx

@@ -25,6 +25,8 @@ import PanelHeaderActionFactory from 'components/side-panel/panel-header-action'
 import SourceDataSelectorFactory from 'components/side-panel/common/source-data-selector';
 import FieldSelectorFactory from '../../common/field-selector';
 import {getSupportedFilterFields} from './new-filter-panel';
+import {FilterPanelWithFieldSelectComponent} from './types';
+import KeplerTable from 'utils/table-utils/kepler-table';
 
 FieldPanelWithFieldSelectFactory.deps = [
   FilterPanelHeaderFactory,
@@ -34,16 +36,15 @@ FieldPanelWithFieldSelectFactory.deps = [
 ];
 
 function FieldPanelWithFieldSelectFactory(
-  FilterPanelHeader,
-  SourceDataSelector,
-  FieldSelector,
-  PanelHeaderAction
+  FilterPanelHeader: ReturnType<typeof FilterPanelHeaderFactory>,
+  SourceDataSelector: ReturnType<typeof SourceDataSelectorFactory>,
+  FieldSelector: ReturnType<typeof FieldSelectorFactory>,
+  PanelHeaderAction: ReturnType<typeof PanelHeaderActionFactory>
 ) {
-  /** @type {import('./filter-panel-types').FilterPanelComponent} */
-  const FilterPanelWithFieldSelect = React.memo(
+  const FilterPanelWithFieldSelect: FilterPanelWithFieldSelectComponent = React.memo(
     ({
-      allAvailableFields,
       children,
+      allAvailableFields,
       datasets,
       filter,
       idx,
@@ -62,42 +63,35 @@ function FieldPanelWithFieldSelectFactory(
       ]);
 
       const fieldValue = useMemo(
-        () => ((Array.isArray(filter.name) ? filter.name[0] : filter.name)),
+        () => (Array.isArray(filter.name) ? filter.name[0] : filter.name),
         [filter.name]
       );
 
-      const dataset = datasets[filter.dataId[0]];
+      const dataset: KeplerTable = datasets[filter.dataId[0]];
       const supportedFields = useMemo(
         () => getSupportedFilterFields(dataset.supportedFilterTypes, allAvailableFields),
         [dataset.supportedFilterTypes, allAvailableFields]
       );
       return (
         <>
-          <FilterPanelHeader
-            datasets={[dataset]}
-            allAvailableFields={supportedFields}
-            idx={idx}
-            filter={filter}
-            removeFilter={removeFilter}
-          >
+          <FilterPanelHeader datasets={[dataset]} filter={filter} removeFilter={removeFilter}>
             <FieldSelector
               inputTheme="secondary"
               fields={supportedFields}
               value={fieldValue}
               erasable={false}
               onSelect={onFieldSelector}
             />
-            {panelActions &&
-              panelActions.map(panelAction => (
-                <PanelHeaderAction
-                  id={panelAction.id}
-                  key={panelAction.id}
-                  onClick={panelAction.onClick}
-                  tooltip={panelAction.tooltip}
-                  IconComponent={panelAction.iconComponent}
-                  active={panelAction.active}
-                />
-              ))}
+            {panelActions?.map(panelAction => (
+              <PanelHeaderAction
+                id={panelAction.id}
+                key={panelAction.id}
+                onClick={panelAction.onClick}
+                tooltip={panelAction.tooltip}
+                IconComponent={panelAction.iconComponent}
+                active={panelAction.active}
+              />
+            ))}
           </FilterPanelHeader>
           <StyledFilterContent className="filter-panel__content">
             {Object.keys(datasets).length > 1 && (

src/components/filters/filter-panels/multi-select-filter-panel.js → src/components/filters/filter-panels/multi-select-filter-panel.tsx

@@ -20,24 +20,18 @@
 
 import React, {useCallback} from 'react';
 import MultiSelectFilterFactory from 'components/filters/multi-select-filter';
+import {MultiSelectFilter} from 'reducers';
 import FieldPanelWithFieldSelectFactory from 'components/filters/filter-panels/filter-panel-with-field-select';
+import {FilterPanelComponent} from './types';
 
 MultiSelectFilterPanelFactory.deps = [FieldPanelWithFieldSelectFactory, MultiSelectFilterFactory];
 
-function MultiSelectFilterPanelFactory(FieldPanelWithFieldSelect, MultiSelectFilter) {
-  /** @type {import('./filter-panel-types').FilterPanelComponent} */
-  const MultiSelectFilterPanel = React.memo(
-    ({
-      idx,
-      datasets,
-      allAvailableFields,
-      filter,
-      isAnyFilterAnimating,
-      enlargeFilter,
-      setFilter,
-      removeFilter,
-      toggleAnimation
-    }) => {
+function MultiSelectFilterPanelFactory(
+  FieldPanelWithFieldSelect: ReturnType<typeof FieldPanelWithFieldSelectFactory>,
+  MultiSelectFilter: ReturnType<typeof MultiSelectFilterFactory>
+) {
+  const MultiSelectFilterPanel: FilterPanelComponent<MultiSelectFilter> = React.memo(
+    ({idx, datasets, allAvailableFields, filter, setFilter, removeFilter}) => {
       const onSetFilter = useCallback(value => setFilter(idx, 'value', value), [idx, setFilter]);
 
       return (
@@ -52,13 +46,7 @@ function MultiSelectFilterPanelFactory(FieldPanelWithFieldSelect, MultiSelectFil
           >
             {filter.type && !filter.enlarged && (
               <div className="filter-panel__filter">
-                <MultiSelectFilter
-                  filter={filter}
-                  idx={idx}
-                  isAnyFilterAnimating={isAnyFilterAnimating}
-                  toggleAnimation={toggleAnimation}
-                  setFilter={onSetFilter}
-                />
+                <MultiSelectFilter filter={filter} setFilter={onSetFilter} />
               </div>
             )}
           </FieldPanelWithFieldSelect>