Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[maps] convert VectorStyleEditor to TS #83582

Merged
merged 2 commits into from
Nov 19, 2020
Merged

[maps] convert VectorStyleEditor to TS #83582

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f03957
[maps] convert VectorStyleEditor to TS
nreese Nov 17, 2020
b262140
Merge branch 'master' into ts_vector_style_editor
kibanamachine Nov 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,18 +174,18 @@ export type SizeStylePropertyDescriptor =
};

export type VectorStylePropertiesDescriptor = {
[VECTOR_STYLES.SYMBOLIZE_AS]?: SymbolizeAsStylePropertyDescriptor;
[VECTOR_STYLES.FILL_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_WIDTH]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON]?: IconStylePropertyDescriptor;
[VECTOR_STYLES.ICON_SIZE]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON_ORIENTATION]?: OrientationStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_TEXT]?: LabelStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_SIZE]?: SizeStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_COLOR]?: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_SIZE]?: LabelBorderSizeStylePropertyDescriptor;
[VECTOR_STYLES.SYMBOLIZE_AS]: SymbolizeAsStylePropertyDescriptor;
[VECTOR_STYLES.FILL_COLOR]: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_COLOR]: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LINE_WIDTH]: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON]: IconStylePropertyDescriptor;
[VECTOR_STYLES.ICON_SIZE]: SizeStylePropertyDescriptor;
[VECTOR_STYLES.ICON_ORIENTATION]: OrientationStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_TEXT]: LabelStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_COLOR]: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_SIZE]: SizeStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_COLOR]: ColorStylePropertyDescriptor;
[VECTOR_STYLES.LABEL_BORDER_SIZE]: LabelBorderSizeStylePropertyDescriptor;
};

export type StyleDescriptor = {
Expand Down
11 changes: 7 additions & 4 deletions x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
LayerDescriptor,
VectorLayerDescriptor,
VectorSourceRequestMeta,
VectorStylePropertiesDescriptor,
} from '../../../../common/descriptor_types';
import { IVectorSource } from '../../sources/vector_source';
import { LICENSED_FEATURES } from '../../../licensed_features';
Expand Down Expand Up @@ -79,13 +80,15 @@ function getClusterStyleDescriptor(
clusterSource: ESGeoGridSource
): VectorStyleDescriptor {
const defaultDynamicProperties = getDefaultDynamicProperties();
const clusterStyleDescriptor: VectorStyleDescriptor = {
const clusterStyleDescriptor: Omit<VectorStyleDescriptor, 'properties'> & {
properties: Partial<VectorStylePropertiesDescriptor>;
} = {
type: LAYER_STYLE_TYPE.VECTOR,
properties: {
[VECTOR_STYLES.LABEL_TEXT]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options,
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
field: {
name: COUNT_PROP_NAME,
origin: FIELD_ORIGIN.SOURCE,
Expand All @@ -95,7 +98,7 @@ function getClusterStyleDescriptor(
[VECTOR_STYLES.ICON_SIZE]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
field: {
name: COUNT_PROP_NAME,
origin: FIELD_ORIGIN.SOURCE,
Expand Down Expand Up @@ -157,7 +160,7 @@ function getClusterStyleDescriptor(
}
});

return clusterStyleDescriptor;
return clusterStyleDescriptor as VectorStyleDescriptor;
}

export interface BlendedVectorLayerArguments {
Expand Down
2 changes: 1 addition & 1 deletion .../maps/public/classes/layers/choropleth_layer_wizard/create_choropleth_layer_descriptor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ function createChoroplethLayerDescriptor({
[VECTOR_STYLES.FILL_COLOR]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
field: {
name: joinKey,
origin: FIELD_ORIGIN.JOIN,
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/maps/public/classes/layers/create_region_map_layer_descriptor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,15 +100,15 @@ export function createRegionMapLayerDescriptor({
[VECTOR_STYLES.FILL_COLOR]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
field: {
name: joinKey,
origin: FIELD_ORIGIN.JOIN,
},
color: colorPallette ? colorPallette.value : 'Yellow to Red',
type: COLOR_MAP_TYPE.ORDINAL,
fieldMetaOptions: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions)
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions)
.fieldMetaOptions,
isEnabled: false,
},
Expand Down
10 changes: 5 additions & 5 deletions x-pack/plugins/maps/public/classes/layers/create_tile_map_layer_descriptor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,16 +113,16 @@ export function createTileMapLayerDescriptor({
const colorPallette = NUMERICAL_COLOR_PALETTES.find((pallette) => {
return pallette.value.toLowerCase() === colorSchema.toLowerCase();
});
const styleProperties: VectorStylePropertiesDescriptor = {
const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
[VECTOR_STYLES.FILL_COLOR]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
field: metricStyleField,
color: colorPallette ? colorPallette.value : 'Yellow to Red',
type: COLOR_MAP_TYPE.ORDINAL,
fieldMetaOptions: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions)
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions)
.fieldMetaOptions,
isEnabled: false,
},
Expand All @@ -139,11 +139,11 @@ export function createTileMapLayerDescriptor({
styleProperties[VECTOR_STYLES.ICON_SIZE] = {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
maxSize: 18,
field: metricStyleField,
fieldMetaOptions: {
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions)
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions)
.fieldMetaOptions,
isEnabled: false,
},
Expand Down
18 changes: 7 additions & 11 deletions x-pack/plugins/maps/public/classes/layers/layer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,11 +76,9 @@ export interface ILayer {
getType(): string | undefined;
isVisible(): boolean;
cloneDescriptor(): Promise<LayerDescriptor>;
renderStyleEditor({
onStyleDescriptorChange,
}: {
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
}): ReactElement<any> | null;
renderStyleEditor(
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
): ReactElement<any> | null;
getInFlightRequestTokens(): symbol[];
getPrevRequestToken(dataId: string): symbol | undefined;
destroy: () => void;
Expand Down Expand Up @@ -437,16 +435,14 @@ export class AbstractLayer implements ILayer {
return null;
}

renderStyleEditor({
onStyleDescriptorChange,
}: {
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
}): ReactElement<any> | null {
renderStyleEditor(
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
): ReactElement<any> | null {
const style = this.getStyleForEditing();
if (!style) {
return null;
}
return style.renderEditor({ layer: this, onStyleDescriptorChange });
return style.renderEditor(onStyleDescriptorChange);
}

getIndexPatternIds(): string[] {
Expand Down
6 changes: 3 additions & 3 deletions ...ugins/maps/public/classes/layers/solution_layers/observability/create_layer_descriptor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function createDynamicFillColorDescriptor(
return {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
field,
color:
layer === OBSERVABILITY_LAYER_TYPE.APM_RUM_PERFORMANCE ? 'Green to Red' : 'Yellow to Red',
Expand Down Expand Up @@ -226,12 +226,12 @@ export function createLayerDescriptor({
origin: FIELD_ORIGIN.SOURCE,
};

const styleProperties: VectorStylePropertiesDescriptor = {
const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
[VECTOR_STYLES.FILL_COLOR]: createDynamicFillColorDescriptor(layer, metricStyleField),
[VECTOR_STYLES.ICON_SIZE]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
field: metricStyleField,
},
},
Expand Down
8 changes: 4 additions & 4 deletions ...k/plugins/maps/public/classes/layers/solution_layers/security/create_layer_descriptors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ function createSourceLayerDescriptor(indexPatternId: string, indexPatternTitle:
],
});

const styleProperties: VectorStylePropertiesDescriptor = {
const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
[VECTOR_STYLES.FILL_COLOR]: {
type: STYLE_TYPE.STATIC,
options: { color: euiVisColorPalette[1] },
Expand Down Expand Up @@ -121,7 +121,7 @@ function createDestinationLayerDescriptor(indexPatternId: string, indexPatternTi
],
});

const styleProperties: VectorStylePropertiesDescriptor = {
const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
[VECTOR_STYLES.FILL_COLOR]: {
type: STYLE_TYPE.STATIC,
options: { color: euiVisColorPalette[2] },
Expand Down Expand Up @@ -168,15 +168,15 @@ function createLineLayerDescriptor(indexPatternId: string, indexPatternTitle: st
],
});

const styleProperties: VectorStylePropertiesDescriptor = {
const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
[VECTOR_STYLES.LINE_COLOR]: {
type: STYLE_TYPE.STATIC,
options: { color: euiVisColorPalette[1] },
},
[VECTOR_STYLES.LINE_WIDTH]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.LINE_WIDTH]!.options as SizeDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.LINE_WIDTH].options as SizeDynamicOptions),
field: {
name: COUNT_PROP_NAME,
origin: FIELD_ORIGIN.SOURCE,
Expand Down
4 changes: 2 additions & 2 deletions x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
[VECTOR_STYLES.ICON_SIZE]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
field: {
name: COUNT_PROP_NAME,
origin: FIELD_ORIGIN.SOURCE,
Expand All @@ -87,7 +87,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
[VECTOR_STYLES.LABEL_TEXT]: {
type: STYLE_TYPE.DYNAMIC,
options: {
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options,
...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
field: {
name: COUNT_PROP_NAME,
origin: FIELD_ORIGIN.SOURCE,
Expand Down
6 changes: 1 addition & 5 deletions x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,7 @@ export class HeatmapStyle implements IStyle {
return LAYER_STYLE_TYPE.HEATMAP;
}

renderEditor({
onStyleDescriptorChange,
}: {
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
}) {
renderEditor(onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void) {
const onHeatmapColorChange = ({ colorRampName }: { colorRampName: string }) => {
const styleDescriptor = HeatmapStyle.createDescriptor(colorRampName);
onStyleDescriptorChange(styleDescriptor);
Expand Down
11 changes: 3 additions & 8 deletions x-pack/plugins/maps/public/classes/styles/style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,10 @@

import { ReactElement } from 'react';
import { StyleDescriptor } from '../../../common/descriptor_types';
import { ILayer } from '../layers/layer';

export interface IStyle {
getType(): string;
renderEditor({
layer,
onStyleDescriptorChange,
}: {
layer: ILayer;
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
}): ReactElement<any> | null;
renderEditor(
onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
): ReactElement<any> | null;
}
2 changes: 1 addition & 1 deletion x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class TileStyle implements IStyle {
return LAYER_STYLE_TYPE.TILE;
}

renderEditor(/* { layer, onStyleDescriptorChange } */) {
renderEditor(/* onStyleDescriptorChange */) {
return null;
}
}
6 changes: 5 additions & 1 deletion .../plugins/maps/public/classes/styles/vector/components/color/vector_style_color_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ import { DynamicColorForm } from './dynamic_color_form';
import { StaticColorForm } from './static_color_form';
import { ColorDynamicOptions, ColorStaticOptions } from '../../../../../../common/descriptor_types';

export function VectorStyleColorEditor(props: Props<ColorStaticOptions, ColorDynamicOptions>) {
type ColorEditorProps = Omit<Props<ColorStaticOptions, ColorDynamicOptions>, 'children'> & {
swatches: string[];
};

export function VectorStyleColorEditor(props: ColorEditorProps) {
const colorForm = props.styleProperty.isDynamic() ? (
<DynamicColorForm {...props} />
) : (
Expand Down
9 changes: 7 additions & 2 deletions ...onents/label/vector_style_label_editor.js → ...nents/label/vector_style_label_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@

import React from 'react';

import { StylePropEditor } from '../style_prop_editor';
import { Props, StylePropEditor } from '../style_prop_editor';
// @ts-expect-error
import { DynamicLabelForm } from './dynamic_label_form';
// @ts-expect-error
import { StaticLabelForm } from './static_label_form';
import { LabelDynamicOptions, LabelStaticOptions } from '../../../../../../common/descriptor_types';

export function VectorStyleLabelEditor(props) {
type LabelEditorProps = Omit<Props<LabelStaticOptions, LabelDynamicOptions>, 'children'>;

export function VectorStyleLabelEditor(props: LabelEditorProps) {
const labelForm = props.styleProperty.isDynamic() ? (
<DynamicLabelForm {...props} />
) : (
Expand Down
9 changes: 7 additions & 2 deletions ...mponents/size/vector_style_size_editor.js → ...ponents/size/vector_style_size_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,16 @@

import React from 'react';

import { StylePropEditor } from '../style_prop_editor';
import { Props, StylePropEditor } from '../style_prop_editor';
// @ts-expect-error
import { DynamicSizeForm } from './dynamic_size_form';
// @ts-expect-error
import { StaticSizeForm } from './static_size_form';
import { SizeDynamicOptions, SizeStaticOptions } from '../../../../../../common/descriptor_types';

export function VectorStyleSizeEditor(props) {
type SizeEditorProps = Omit<Props<SizeStaticOptions, SizeDynamicOptions>, 'children'>;

export function VectorStyleSizeEditor(props: SizeEditorProps) {
const sizeForm = props.styleProperty.isDynamic() ? (
<DynamicSizeForm {...props} />
) : (
Expand Down
10 changes: 5 additions & 5 deletions x-pack/plugins/maps/public/classes/styles/vector/components/style_prop_editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ export interface Props<StaticOptions, DynamicOptions> {
customStaticOptionLabel?: string;
defaultStaticStyleOptions: StaticOptions;
defaultDynamicStyleOptions: DynamicOptions;
disabled: boolean;
disabled?: boolean;
disabledBy?: VECTOR_STYLES;
fields: StyleField[];
onDynamicStyleChange: (propertyName: VECTOR_STYLES, options: DynamicOptions) => void;
onStaticStyleChange: (propertyName: VECTOR_STYLES, options: StaticOptions) => void;
styleProperty: IStyleProperty<any>;
styleProperty: IStyleProperty<StaticOptions | DynamicOptions>;
}

export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<
Expand All @@ -42,15 +42,15 @@ export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<
_onTypeToggle = () => {
if (this.props.styleProperty.isDynamic()) {
// preserve current dynmaic style
this._prevDynamicStyleOptions = this.props.styleProperty.getOptions();
this._prevDynamicStyleOptions = this.props.styleProperty.getOptions() as DynamicOptions;
// toggle to static style
this.props.onStaticStyleChange(
this.props.styleProperty.getStyleName(),
this._prevStaticStyleOptions
);
} else {
// preserve current static style
this._prevStaticStyleOptions = this.props.styleProperty.getOptions();
this._prevStaticStyleOptions = this.props.styleProperty.getOptions() as StaticOptions;
// toggle to dynamic style
this.props.onDynamicStyleChange(
this.props.styleProperty.getStyleName(),
Expand All @@ -61,7 +61,7 @@ export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<

_onFieldMetaOptionsChange = (fieldMetaOptions: FieldMetaOptions) => {
const options = {
...this.props.styleProperty.getOptions(),
...(this.props.styleProperty.getOptions() as DynamicOptions),
fieldMetaOptions,
};
this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), options);
Expand Down
Loading