[Chore]: Technical: add types for layer panel components #1819

jagerts · 2022-05-12T08:24:25Z

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

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

heshan0131 · 2022-05-23T09:03:37Z

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

 };

 export type DatasetTagProps = {
  id?: string;
  dataset: KeplerTable;
-  updateTableColor?: (d: string, c?: RGBColor) => void;
+  updateTableColor?: typeof VisStateActions.updateTableColor;


#1801 (comment)

heshan0131 · 2022-05-23T09:03:44Z

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

  onClick?: (e: MouseEvent) => void;
  onClickSquare?: (e: MouseEvent) => void;
 };

 export type ShowDataTableProps = {
  id: string;
-  showDatasetTable: Function;
+  showDatasetTable?: typeof VisStateActions.showDatasetTable;


#1801 (comment)

heshan0131 · 2022-05-23T09:03:48Z

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

 };

 export type RemoveDatasetProps = {
  datasetKey: string;
-  removeDataset?: (d: string) => void;
+  removeDataset?: typeof openDeleteModal;


#1801 (comment)

heshan0131 · 2022-05-23T09:04:32Z

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

  showDeleteDataset: boolean;
  onTitleClick?: () => void;
-  updateTableColor?: (d: string, c?: RGBColor) => void;
-  removeDataset?: (d: string) => void;
+  showDatasetTable?: typeof VisStateActions.showDatasetTable;


#1801 (comment)

heshan0131 · 2022-05-23T09:04:48Z

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

  onTitleClick?: () => void;
-  updateTableColor?: (d: string, c?: RGBColor) => void;
-  removeDataset?: (d: string) => void;
+  showDatasetTable?: typeof VisStateActions.showDatasetTable;


#1801 (comment)

heshan0131 · 2022-05-23T09:08:07Z

src/components/side-panel/layer-panel/color-range-selector.tsx

@@ -202,7 +230,7 @@ export const PaletteConfig = ({label, value, config: {type, options}, onChange})
    {type === 'select' && (
      <div className="color-palette__config__select">
        <ItemSelector
-          selectedItems={value}
+          selectedItems={[value]}


shouldn't need to convert to array ItemSelector props.selectedItems can be a single object

heshan0131 · 2022-05-23T09:08:52Z

src/components/side-panel/layer-panel/color-range-selector.tsx

@@ -226,12 +259,19 @@ const StyledColorRange = styled.div.attrs({
  }
 `;

-export const ColorPaletteGroup = ({reversed, onSelect, selected, colorRanges}) => (
+export const ColorPaletteGroup = ({


export const ColorPaletteGroup: React.FC<ColorPaletteGroupProps>

heshan0131 · 2022-05-23T09:17:44Z

src/components/side-panel/layer-panel/dataset-layer-group.tsx

+  layerOrder: number[];
+  layerClasses: LayerClassesType;
+  showDeleteDataset: boolean;
+  removeDataset: typeof UiStateActions.openDeleteModal;


#1801 (comment)

heshan0131 · 2022-05-23T09:18:43Z

src/components/side-panel/layer-panel/dataset-section.tsx

+  defaultDataset: string;
+  showDatasetList: boolean;
+  showDeleteDataset: boolean;
+  showDatasetTable: typeof VisStateActions.showDatasetTable;


#1801 (comment)

heshan0131 · 2022-05-23T09:19:32Z

src/components/side-panel/layer-panel/dimension-scale-selector.tsx

@@ -35,7 +51,7 @@ const DimensionScaleSelector = ({label, onSelect, options, scaleType, disabled =
      </PanelLabel>
      <ItemSelector
        disabled={disabled}
-        selectedItems={scaleType}
+        selectedItems={scaleType ? [scaleType] : []}


shouldn't need to convert to array. selectedItems can be a single object or an array of objects

heshan0131 · 2022-05-23T09:25:03Z

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

+  }[];
+  isDraggable?: boolean;
+  openModal: typeof toggleModal;
+  layerColorUIChange: typeof VisStateActions.layerColorUIChange;


use ActionHandler<>
#1801 (comment)

heshan0131 · 2022-05-23T09:25:42Z

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

@@ -132,7 +146,7 @@ function LayerPanelFactory(LayerConfigurator, LayerPanelHeader) {
            isVisible={config.isVisible}
            label={config.label}
            labelRCGColorValues={config.dataId ? datasets[config.dataId].color : null}
-            layerType={layer.type}
+            layerType={layer.type!}


what's the ! here? is it a typo?

non-null-assertion-operator

layer should have type defined, isn't it?

it's not always the case, a layer when first created, type might be null, LayerPanelHeader should handle layerType: null case

heshan0131 · 2022-05-23T09:26:59Z

src/components/side-panel/layer-panel/layer-type-selector.tsx

-    ]);
+    const selectedItems = useMemo(() => {
+      const selected = typeOptions.find(op => op.id === layer.type);
+      return selected ? [selected] : [];


selectedItems doesn't have to be an array

heshan0131 · 2022-05-23T09:27:59Z

src/components/side-panel/layer-panel/text-label-panel.tsx

@@ -110,7 +122,7 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
                      </PanelLabel>
                      <ItemSelector
                        {...LAYER_TEXT_CONFIGS.textAnchor}
-                        selectedItems={tl.anchor}
+                        selectedItems={[tl.anchor]}


same as above

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

jagerts · 2022-05-24T08:19:22Z

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

@@ -178,16 +192,16 @@ class ItemSelector extends Component<ItemSelectorProps> {
    // only used when multiSelect = true
    e.preventDefault();
    e.stopPropagation();
-    const {selectedItems} = this.props;


@heshan0131

due to ts cannot understand that selectedItems should be array in this case. Btw, in some cases it can be wrong - we can use multiSelect = true, but selectedItems not array type

heshan0131 · 2022-05-25T07:05:22Z

src/components/side-panel/layer-panel/text-label-panel.tsx

@@ -120,7 +132,7 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector) {
                      </PanelLabel>
                      <ItemSelector
                        {...LAYER_TEXT_CONFIGS.textAlignment}
-                        selectedItems={tl.alignment}
+                        selectedItems={[tl.alignment]}


keep it as selectedItems={tl.alignment}

heshan0131 · 2022-05-25T07:05:42Z

src/components/side-panel/layer-panel/text-label-panel.tsx

+type TextLabelPanelProps = {
+  fields: Field[];
+  textLabel: LayerTextLabel[];
+  // updateLayerTextLabel: (


remove comment out code

heshan0131 · 2022-05-25T07:06:21Z

src/components/side-panel/layer-panel/panel-view-list-toggle.tsx

-function PanelViewListToggleFactory(ToggleOption) {
-  const PanelViewListToggle = props => {
+function PanelViewListToggleFactory(ToggleOption: ReturnType<typeof ToggleOptionFactory>) {
+  const PanelViewListToggle = (props: PanelViewListToggleProps) => {


use React.FC<PanelViewListToggleProps>

heshan0131 · 2022-05-25T07:06:33Z

src/components/side-panel/layer-panel/layer-type-selector.tsx

+    layerTypeOptions,
+    onSelect,
+    datasets
+  }: LayerTypeSelectorProps) => {


use React.FC<LayerTypeSelectorProps>

heshan0131 · 2022-05-25T07:06:49Z

src/components/side-panel/layer-panel/layer-type-list-item.tsx

@@ -59,7 +68,7 @@ const StyledListItem = styled.div`
 `;

 export function LayerTypeListItemFactory() {
-  const LayerTypeListItem = ({value, isTile}) => (
+  const LayerTypeListItem = ({value, isTile}: LayerTypeListItemProps) => (


use React.FC

heshan0131 · 2022-05-25T07:06:59Z

src/components/side-panel/layer-panel/layer-type-dropdown-list.tsx

@@ -68,7 +81,7 @@ export function LayerTypeDropdownListFactory() {
    selectedItems,
    selectionIndex,
    customListItemComponent
-  }) => {
+  }: LayerTypeDropdownListProps) => {


use React.FC

heshan0131 · 2022-05-25T07:07:20Z

src/components/side-panel/layer-panel/layer-panel-header.tsx

+  layerId,
+  label,
+  onEdit
+}: {


use React.FC

heshan0131 · 2022-05-25T07:07:32Z

src/components/side-panel/layer-panel/layer-list.tsx

  const WrappedSortableContainer = SortableContainer(({children}) => {
    return <div>{children}</div>;
  });
-  const LayerList = props => {
+
+  const LayerList = (props: LayerListProps) => {


use React.FC

heshan0131 · 2022-05-25T07:07:52Z

src/components/side-panel/layer-panel/layer-configurator.tsx

  layer: props.layer,
  fields: getLayerFields(props.datasets, props.layer),
  onChange: props.updateLayerConfig,
  setColorUI: props.updateLayerColorUI
 });

-export const getVisConfiguratorProps = props => ({
+export const getVisConfiguratorProps = (props: LayerConfiguratorProps) => ({


use React.FC

This function returns an object with props.

heshan0131 · 2022-05-25T07:07:58Z

src/components/side-panel/layer-panel/layer-configurator.tsx

  layer: props.layer,
  fields: getLayerFields(props.datasets, props.layer),
  onChange: props.updateLayerVisConfig,
  setColorUI: props.updateLayerColorUI
 });

-export const getLayerChannelConfigProps = props => ({
+export const getLayerChannelConfigProps = (props: LayerConfiguratorProps) => ({


use React.FC

This function returns an object with props.

heshan0131 · 2022-05-25T07:08:15Z

src/components/side-panel/layer-panel/layer-config-group.tsx

@@ -123,7 +135,7 @@ export function LayerConfigGroupLabelFactory(InfoHelper) {
    }
  `;

-  const LayerConfigGroupLabel = ({label, description}) => (
+  const LayerConfigGroupLabel = ({label, description}: {label?: string; description?: string}) => (


use React.FC

heshan0131 · 2022-05-25T07:08:24Z

src/components/side-panel/layer-panel/layer-column-config.tsx

@@ -42,7 +55,7 @@ function LayerColumnConfigFactory(ColumnSelector) {
    updateLayerConfig,
    assignColumn,
    assignColumnPairs
-  }) => {
+  }: LayerColumnConfigProps) => {


use React.FC

heshan0131 · 2022-05-25T07:08:31Z

src/components/side-panel/layer-panel/dimension-scale-selector.tsx

+  options,
+  scaleType,
+  disabled = false
+}: DimensionScaleSelectorProps) => {


use React.FC

heshan0131 · 2022-05-25T07:10:15Z

src/components/side-panel/layer-panel/color-palette.tsx

@@ -67,17 +67,16 @@ const StyledColorBlock = styled.div.attrs({
  flex-grow: 1;
 `;

-const ColorPalette = ({colors, height, className, isSelected, isReversed}) => (
+const ColorPalette = ({colors, height, className, isSelected, isReversed}: ColorPaletteProps) => (


use React.FC

heshan0131 · 2022-05-25T07:10:24Z

src/components/side-panel/layer-panel/add-layer-button.tsx

@@ -99,7 +107,7 @@ function AddLayerButtonFactory() {
    </ListItemWrapper>
  );

-  const AddLayerButton = props => {
+  const AddLayerButton = (props: AddLayerButtonProps) => {


use React.FC

heshan0131 · 2022-05-25T07:11:30Z

src/components/side-panel/layer-panel/vis-config-slider.tsx

@@ -104,7 +129,7 @@ const LazyInput = ({value, onChange, name}) => {
  );
 };

-const CustomInput = ({isRanged, value, onChangeCustomInput}) => {
+const CustomInput = ({isRanged, value, onChangeCustomInput}: CustomInputProps) => {


use React.FC

heshan0131 · 2022-05-25T07:11:34Z

src/components/side-panel/layer-panel/vis-config-slider.tsx

@@ -161,7 +174,7 @@ export default function VisConfigSliderFactory(RangeSlider) {
    disabled,
    onChange,
    inputTheme
-  }) => {
+  }: VisConfigSliderProps) => {


use React.FC

heshan0131 · 2022-05-25T07:11:45Z

src/components/side-panel/layer-panel/vis-config-switch.tsx

  const VisConfigSwitch = ({
    layer: {id, config},
    property,
    onChange,
    label,
    description,
    disabled
-  }) => (
+  }: VisConfigSwitchProps) => (


use React.FC

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

jagerts · 2022-05-25T23:54:18Z

@heshan0131 can we merge it? Looks like all comments are resolved

Add types for layer panel components

b93a0a8

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

jagerts requested review from heshan0131 and dariaterekhova-actionengine May 12, 2022 08:24

zsh:1: merge branch 'master'

1d7bed2

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

jagerts force-pushed the ez/add-types-layer-panel branch from da2869e to 1d7bed2 Compare May 12, 2022 16:37

jagerts added 4 commits May 13, 2022 17:02

fix linting failure

66a167d

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

fix linting failure

9b43ef7

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

Merge branch master into ez/add-types-layer-panel

f092cf1

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

add fixes after merge

d03abce

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

heshan0131 reviewed May 23, 2022

View reviewed changes

jagerts added 2 commits May 23, 2022 23:55

Merge branch 'master' into ez/add-types-layer-panel

6ce098e

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

add changes due to code review

3347834

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

jagerts commented May 24, 2022

View reviewed changes

jagerts requested a review from heshan0131 May 24, 2022 08:42

heshan0131 reviewed May 25, 2022

View reviewed changes

jagerts added 2 commits May 25, 2022 13:48

Merge branch 'master' into ez/add-types-layer-panel

50f35fe

add changes due to code review

b09e8e3

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

jagerts requested a review from heshan0131 May 25, 2022 12:09

heshan0131 approved these changes Jun 1, 2022

View reviewed changes

jagerts merged commit b7d8edf into master Jun 1, 2022

delete-merged-branch bot deleted the ez/add-types-layer-panel branch June 1, 2022 08:29

[Chore]: Technical: add types for layer panel components #1819

[Chore]: Technical: add types for layer panel components #1819

Conversation

jagerts commented May 12, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jagerts May 25, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jagerts commented May 25, 2022

jagerts May 25, 2022 •

edited