[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/file-handler';
 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,
@@ -309,7 +310,7 @@ export function setFilterAnimationWindow({
 }
 
 export type AddFilterUpdaterAction = {
-  dataId: string;
+  dataId: string | null;
 };
 /**
  * Add a new filter
@@ -319,7 +320,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,
@@ -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

@@ -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,11 +74,20 @@ type FieldType =
       name?: string;
       fieldIdx?: number;
       type?: number;
-    };
+    }
+  | Field;
 
 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[];
@@ -88,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

@@ -118,8 +118,16 @@ const DropdownWrapper = styled.div<DropdownWrapperProps>`
 type ItemSelectorProps = {
   selectedItems: ReadonlyArray<string | number | boolean | object>;
   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;

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/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/filter-manager.js → src/components/side-panel/filter-manager.tsx

@@ -19,30 +19,44 @@
 // 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';
+
+type FilterManagerProps = {
+  filters: Filter[];
+  datasets: Datasets;
+  layers: Layer[];
+  showDatasetTable: typeof VisStateActions.showDatasetTable;
+  updateTableColor: 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 +94,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 +113,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/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 => (