[Chore]: Technical: add types for side panel root components

src/actions/vis-state-actions.ts

@@ -24,7 +24,8 @@ import {AddDataToMapPayload} from '../actions/actions';
 import {FileCacheItem} from '../processors/types';
 import {Layer, LayerBaseConfig, LayerVisConfig} from 'layers';
 import {Feature, InteractionConfig} from 'reducers/vis-state-updaters';
-import {ValueOf, Merge, RGBColor} from '../reducers/types';
+import {ValueOf, Merge, RGBColor, NestedPartial} from '../reducers/types';
+import {ColorUI} from 'layers/layer-factory';
 // TODO - import LoaderObject type from @loaders.gl/core when supported
 // TODO - import LoadOptions type from @loaders.gl/core when supported
 
@@ -154,7 +155,7 @@ export function layerVisConfigChange(
 export type LayerColorUIChangeUpdaterAction = {
   oldLayer: Layer;
   prop: string;
-  newConfig: object;
+  newConfig: NestedPartial<ColorUI>;
 };
 
 /**
@@ -169,7 +170,7 @@ export type LayerColorUIChangeUpdaterAction = {
 export function layerColorUIChange(
   oldLayer: Layer,
   prop: string,
-  newConfig: object
+  newConfig: NestedPartial<ColorUI>
 ): Merge<LayerColorUIChangeUpdaterAction, {type: typeof ActionTypes.LAYER_COLOR_UI_CHANGE}> {
   return {
     type: ActionTypes.LAYER_COLOR_UI_CHANGE,
@@ -328,7 +329,7 @@ export function addFilter(
 }
 
 export type AddLayerUpdaterAction = {
-  config: object;
+  config?: object;
   datasetId?: string;
 };
 /**
@@ -340,7 +341,7 @@ export type AddLayerUpdaterAction = {
  * @public
  */
 export function addLayer(
-  config: object,
+  config?: object,
   datasetId?: string
 ): Merge<AddLayerUpdaterAction, {type: typeof ActionTypes.ADD_LAYER}> {
   return {

src/components/common/field-selector.tsx

@@ -79,7 +79,15 @@ type FieldType =
 
 interface FieldSelectorFactoryProps {
   fields?: FieldType[];
-  onSelect: (items: readonly (string | number | boolean | object)[] | null) => void;
+  onSelect: (
+    items:
+      | ReadonlyArray<string | number | boolean | object>
+      | string
+      | number
+      | boolean
+      | object
+      | null
+  ) => void;
   placement?: string;
   value?: FieldType | null;
   filterFieldTypes?: FieldType | FieldType[];
@@ -90,7 +98,7 @@ interface FieldSelectorFactoryProps {
   multiSelect?: boolean;
   closeOnSelect?: boolean;
   showToken?: boolean;
-  suggested?: any[]; //TODO
+  suggested?: ReadonlyArray<string | number | boolean | object> | null;
   CustomChickletComponent?: ComponentType;
   size?: string;
 }

src/components/common/info-helper.tsx

@@ -48,9 +48,9 @@ const StyledInfoHelper = styled.div<StyledInfoHelperProps>`
 interface InfoHelperProps {
   description: string;
   containerClass?: string;
-  width: number;
+  width?: number;
   property?: string;
-  id: string;
+  id?: string;
 }
 
 function InfoHelperFactory() {

src/components/common/item-selector/item-selector.tsx

@@ -116,10 +116,24 @@ const DropdownWrapper = styled.div<DropdownWrapperProps>`
 `;
 
 type ItemSelectorProps = {
-  selectedItems: ReadonlyArray<string | number | boolean | object>;
+  selectedItems?:
+    | ReadonlyArray<string | number | boolean | object>
+    | string
+    | number
+    | boolean
+    | object
+    | null;
   options: ReadonlyArray<string | number | boolean | object>;
-  onChange: (items: ReadonlyArray<string | number | boolean | object> | null) => void;
-  fixedOptions?: any[];
+  onChange: (
+    items:
+      | ReadonlyArray<string | number | boolean | object>
+      | string
+      | number
+      | boolean
+      | object
+      | null
+  ) => void;
+  fixedOptions?: ReadonlyArray<string | number | boolean | object> | null;
   erasable?: boolean;
   showArrow?: boolean;
   searchable?: boolean;
@@ -178,16 +192,16 @@ class ItemSelector extends Component<ItemSelectorProps> {
     // only used when multiSelect = true
     e.preventDefault();
     e.stopPropagation();
-    const {selectedItems} = this.props;
-    const index = selectedItems.findIndex(t => t === item);
+    const multiSelectedItems = toArray(this.props.selectedItems);
+    const index = multiSelectedItems.findIndex(t => t === item);
 
     if (index < 0) {
       return;
     }
 
     const items = [
-      ...selectedItems.slice(0, index),
-      ...selectedItems.slice(index + 1, selectedItems.length)
+      ...multiSelectedItems.slice(0, index),
+      ...multiSelectedItems.slice(index + 1, multiSelectedItems.length)
     ];
 
     this.props.onChange(items);

src/components/common/item-selector/typeahead.tsx

@@ -128,7 +128,7 @@ interface TypeaheadProps {
   maxVisible?: number;
   resultsTruncatedMessage?: string;
   options?: ReadonlyArray<string | number | boolean | object>;
-  fixedOptions?: ReadonlyArray<string | number | boolean | object>;
+  fixedOptions?: ReadonlyArray<string | number | boolean | object> | null;
   allowCustomValues?: number;
   initialValue?: string;
   value?: string;

src/components/common/toolbar-item.tsx

@@ -63,11 +63,12 @@ const StyledDiv = styled.div.attrs({
 
 export type ToolbarItemProps = {
   id?: string;
+  key?: string;
   label: string;
   className?: string;
   active?: boolean;
   onClose?: () => void;
-  onClick: (event: MouseEvent<HTMLDivElement>) => void;
+  onClick: ((event: MouseEvent<HTMLDivElement>) => void) | null;
   icon?: ComponentType<any>;
 };
 
@@ -83,7 +84,7 @@ const ToolbarItem = React.memo((props: ToolbarItemProps) => (
       if (typeof props.onClose === 'function') {
         props.onClose();
       }
-      props.onClick(e);
+      props.onClick?.(e);
     }}
   >
     {props.icon && <props.icon />}

src/components/filters/types.ts

@@ -47,7 +47,9 @@ export type SingleSelectFilterProps = {
 
 export type MultiSelectFilterProps = {
   filter: MultiSelectFilter;
-  setFilter: (v: ReadonlyArray<string | number | boolean | object> | null) => void;
+  setFilter: (
+    v: ReadonlyArray<string | number | boolean | object> | string | number | boolean | object | null
+  ) => void;
 };
 
 export type TimeWidgetTopProps = {

src/components/side-panel.tsx

@@ -18,11 +18,8 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import React, {useCallback, useMemo, ComponentType} from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {FormattedMessage} from 'localization';
-import {Datasets, Filter, InteractionConfig, MapStyle} from '../reducers';
-import {Layer, LayerClassesType} from '../layers';
-import {UiState} from 'reducers/ui-state-updaters';
 
 import {
   EXPORT_DATA_ID,
@@ -48,43 +45,7 @@ import PanelTitleFactory from './side-panel/panel-title';
 
 import styled from 'styled-components';
 import get from 'lodash.get';
-
-import * as MapStyleActions from 'actions/map-style-actions';
-import * as VisStateActions from 'actions/vis-state-actions';
-import * as MapStateActions from 'actions/map-state-actions';
-import * as UIStateActions from 'actions/ui-state-actions';
-
-type SidePanelItem = {
-  id: string;
-  label: string;
-  iconComponent: ComponentType<any>;
-  component?: ComponentType<any>;
-};
-
-type SidePanelProps = {
-  appName: string;
-  appWebsite: string;
-  filters: Filter[];
-  interactionConfig: InteractionConfig;
-  layerBlending: string;
-  layers: Layer[];
-  layerClasses: LayerClassesType;
-  layerOrder: number[];
-  mapStyle: MapStyle;
-  onSaveMap?: Function;
-  width: number;
-  mapInfo: {title: string; description: string};
-  datasets: Datasets;
-  uiStateActions: typeof UIStateActions;
-  visStateActions: typeof VisStateActions;
-  mapStateActions: typeof MapStateActions;
-  mapStyleActions: typeof MapStyleActions;
-  uiState: UiState;
-  availableProviders: {hasShare: boolean; hasStorage: boolean};
-  mapSaved?: string | null;
-  panels: SidePanelItem[];
-  version: string;
-};
+import {SidePanelProps} from './types';
 
 export const StyledSidePanelContent = styled.div`
   ${props => props.theme.sidePanelScrollBar};

src/components/side-panel/common/types.ts

@@ -64,5 +64,13 @@ export type SourceDataSelectorProps = {
   disabled: boolean;
   defaultValue?: string;
   inputTheme: string;
-  onSelect: (items: ReadonlyArray<string | number | boolean | object> | null) => void;
+  onSelect: (
+    items:
+      | ReadonlyArray<string | number | boolean | object>
+      | string
+      | number
+      | boolean
+      | object
+      | null
+  ) => void;
 };

src/components/side-panel/filter-manager.js → src/components/side-panel/filter-manager.tsx

@@ -19,30 +19,45 @@
 // THE SOFTWARE.
 
 import React, {useCallback, useMemo} from 'react';
-import PropTypes from 'prop-types';
 import {FormattedMessage} from 'localization';
 import {Button, SidePanelDivider, SidePanelSection} from 'components/common/styled-components';
 import {Add} from 'components/common/icons';
 import SourceDataCatalogFactory from './common/source-data-catalog';
 import FilterPanelFactory from './filter-panel/filter-panel';
+import {Datasets, Filter} from 'reducers';
+import {Layer} from 'layers';
+import * as VisStateActions from 'actions/vis-state-actions';
+import {ActionHandler} from 'actions';
+
+type FilterManagerProps = {
+  filters: Filter[];
+  datasets: Datasets;
+  layers: Layer[];
+  showDatasetTable: ActionHandler<typeof VisStateActions.showDatasetTable>;
+  updateTableColor: ActionHandler<typeof VisStateActions.updateTableColor>;
+  visStateActions: typeof VisStateActions;
+};
 
 FilterManagerFactory.deps = [SourceDataCatalogFactory, FilterPanelFactory];
 
-function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
+function FilterManagerFactory(
+  SourceDataCatalog: ReturnType<typeof SourceDataCatalogFactory>,
+  FilterPanel: ReturnType<typeof FilterPanelFactory>
+) {
   const FilterManager = ({
     filters = [],
     datasets,
     layers,
     showDatasetTable,
     updateTableColor,
     visStateActions
-  }) => {
+  }: FilterManagerProps) => {
     const {
       addFilter,
       enlargeFilter,
       removeFilter,
       setFilter,
-      toggleAnimation,
+      toggleFilterAnimation,
       toggleFilterFeature
     } = visStateActions;
     const isAnyFilterAnimating = filters.some(f => f.isAnimating);
@@ -80,7 +95,7 @@ function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
               isAnyFilterAnimating={isAnyFilterAnimating}
               removeFilter={() => removeFilter(idx)}
               enlargeFilter={() => enlargeFilter(idx)}
-              toggleAnimation={() => toggleAnimation(idx)}
+              toggleAnimation={() => toggleFilterAnimation(idx)}
               toggleFilterFeature={() => toggleFilterFeature(idx)}
               setFilter={setFilter}
             />
@@ -99,18 +114,6 @@ function FilterManagerFactory(SourceDataCatalog, FilterPanel) {
     );
   };
 
-  FilterManager.propTypes = {
-    datasets: PropTypes.object,
-    layers: PropTypes.arrayOf(PropTypes.any).isRequired,
-    filters: PropTypes.arrayOf(PropTypes.any).isRequired,
-    showDatasetTable: PropTypes.func.isRequired,
-    updateTableColor: PropTypes.func.isRequired,
-    visStateActions: PropTypes.object.isRequired,
-
-    // fields can be undefined when dataset is not selected
-    fields: PropTypes.arrayOf(PropTypes.any)
-  };
-
   return FilterManager;
 }
 

src/components/side-panel/filter-panel/filter-panel.tsx

@@ -33,6 +33,7 @@ import PolygonFilterPanelFactory from 'components/filters/filter-panels/polygon-
 import {Filter} from 'reducers/vis-state-updaters';
 import {Field} from 'utils/table-utils/kepler-table';
 import {FilterPanelProps} from 'components/filters/filter-panels/types';
+import {Layer} from 'layers';
 
 const StyledFilterPanel = styled.div`
   margin-bottom: 12px;
@@ -41,6 +42,11 @@ const StyledFilterPanel = styled.div`
 
 interface FilterPanelPropsImpl extends Omit<FilterPanelProps, 'allAvailableFields'> {
   filters: Filter[];
+  layers: ReadonlyArray<Layer>;
+  isAnyFilterAnimating: boolean;
+  enlargeFilter: () => void;
+  toggleAnimation: () => void;
+  toggleFilterFeature: () => void;
 }
 
 FilterPanelFactory.deps = [

src/components/side-panel/interaction-manager.js → src/components/side-panel/interaction-manager.tsx

@@ -19,13 +19,26 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import {Datasets, InteractionConfig} from 'reducers';
 import InteractionPanelFactory from './interaction-panel/interaction-panel';
+import * as VisStateActions from 'actions/vis-state-actions';
+
+type InteractionManagerProps = {
+  interactionConfig: InteractionConfig;
+  datasets: Datasets;
+  visStateActions: typeof VisStateActions;
+};
 
 InteractionManagerFactory.deps = [InteractionPanelFactory];
 
-function InteractionManagerFactory(InteractionPanel) {
-  const InteractionManager = ({interactionConfig, datasets, visStateActions}) => {
+function InteractionManagerFactory(InteractionPanel: ReturnType<typeof InteractionPanelFactory>) {
+  const InteractionManager = ({
+    interactionConfig,
+    datasets,
+    visStateActions
+  }: InteractionManagerProps) => {
     const {interactionConfigChange: onConfigChange} = visStateActions;
+
     return (
       <div className="interaction-manager">
         {Object.keys(interactionConfig).map(key => (