Skip to content

Commit

Permalink
[Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make…
Browse files Browse the repository at this point in the history 
… synchronous (elastic#54067)

* [Maps] refactor isPointsOnly, isLinesOnly, and isPolygonsOnly to make synchronous

* fix jest test

* review feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
  • Loading branch information
@nreese @elasticmachine
nreese and elasticmachine committed Jan 13, 2020
1 parent e7472e2 commit 14df4c0
Show file tree
Hide file tree
Showing 13 changed files with 199 additions and 573 deletions.
8 changes: 4 additions & 4 deletions ...maps/public/layers/styles/vector/components/legend/__snapshots__/vector_icon.test.js.snap
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

91 changes: 30 additions & 61 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,82 +4,51 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';

import { CircleIcon } from './circle_icon';
import { LineIcon } from './line_icon';
import { PolygonIcon } from './polygon_icon';
import { SymbolIcon } from './symbol_icon';
import { VECTOR_STYLES } from '../../vector_style_defaults';

export class VectorIcon extends Component {
state = {
isInitialized: false,
};

componentDidMount() {
this._isMounted = true;
this._init();
}

componentWillUnmount() {
this._isMounted = false;
}

async _init() {
const isPointsOnly = await this.props.loadIsPointsOnly();
const isLinesOnly = await this.props.loadIsLinesOnly();
if (this._isMounted) {
this.setState({
isInitialized: true,
isPointsOnly,
isLinesOnly,
});
}
}

render() {
if (!this.state.isInitialized) {
return null;
}

if (this.state.isLinesOnly) {
const style = {
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, true),
strokeWidth: '4px',
};
return <LineIcon style={style} />;
}

export function VectorIcon({ fillColor, isPointsOnly, isLinesOnly, strokeColor, symbolId }) {
if (isLinesOnly) {
const style = {
stroke: this.props.getColorForProperty(VECTOR_STYLES.LINE_COLOR, false),
strokeWidth: '1px',
fill: this.props.getColorForProperty(VECTOR_STYLES.FILL_COLOR, false),
stroke: strokeColor,
strokeWidth: '4px',
};
return <LineIcon style={style} />;
}

if (!this.state.isPointsOnly) {
return <PolygonIcon style={style} />;
}
const style = {
stroke: strokeColor,
strokeWidth: '1px',
fill: fillColor,
};

if (!this.props.symbolId) {
return <CircleIcon style={style} />;
}
if (!isPointsOnly) {
return <PolygonIcon style={style} />;
}

return (
<SymbolIcon
symbolId={this.props.symbolId}
fill={style.fill}
stroke={style.stroke}
strokeWidth={style.strokeWidth}
/>
);
if (!symbolId) {
return <CircleIcon style={style} />;
}

return (
<SymbolIcon
symbolId={symbolId}
fill={style.fill}
stroke={style.stroke}
strokeWidth={style.strokeWidth}
/>
);
}

VectorIcon.propTypes = {
getColorForProperty: PropTypes.func.isRequired,
fillColor: PropTypes.string,
isPointsOnly: PropTypes.bool.isRequired,
isLinesOnly: PropTypes.bool.isRequired,
strokeColor: PropTypes.string.isRequired,
symbolId: PropTypes.string,
loadIsPointsOnly: PropTypes.func.isRequired,
loadIsLinesOnly: PropTypes.func.isRequired,
};
126 changes: 32 additions & 94 deletions x-pack/legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_icon.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,113 +8,51 @@ import React from 'react';
import { shallow } from 'enzyme';

import { VectorIcon } from './vector_icon';
import { VectorStyle } from '../../vector_style';
import { extractColorFromStyleProperty } from './extract_color_from_style_property';
import { VECTOR_STYLES } from '../../vector_style_defaults';

let isPointsOnly = false;
let isLinesOnly = false;
const styles = {
fillColor: {
type: VectorStyle.STYLE_TYPE.STATIC,
options: {
color: '#ff0000',
},
},
lineColor: {
type: VectorStyle.STYLE_TYPE.DYNAMIC,
options: {
color: 'Blues',
field: {
name: 'prop1',
},
},
},
};

const defaultProps = {
getColorForProperty: (styleProperty, isLinesOnly) => {
if (isLinesOnly) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'grey');
}

if (styleProperty === VECTOR_STYLES.LINE_COLOR) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.LINE_COLOR], 'none');
} else if (styleProperty === VECTOR_STYLES.FILL_COLOR) {
return extractColorFromStyleProperty(styles[VECTOR_STYLES.FILL_COLOR], 'grey');
} else {
//unexpected
console.error('Cannot return color for properties other then line or fill color');
}
},

loadIsPointsOnly: () => {
return isPointsOnly;
},
loadIsLinesOnly: () => {
return isLinesOnly;
},
};

function configureIsLinesOnly() {
isLinesOnly = true;
isPointsOnly = false;
}

function configureIsPointsOnly() {
isLinesOnly = false;
isPointsOnly = true;
}

function configureNotLineOrPointOnly() {
isLinesOnly = false;
isPointsOnly = false;
}

test('Renders PolygonIcon with correct styles when not line only or not point only', async () => {
configureNotLineOrPointOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders PolygonIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={false}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
/>
);

expect(component).toMatchSnapshot();
});

test('Renders LineIcon with correct styles when isLineOnly', async () => {
configureIsLinesOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders LineIcon', () => {
const component = shallow(
<VectorIcon isPointsOnly={false} isLinesOnly={true} strokeColor="rgb(106,173,213)" />
);

expect(component).toMatchSnapshot();
});

test('Renders CircleIcon with correct styles when isPointOnly', async () => {
configureIsPointsOnly();
const component = shallow(<VectorIcon {...defaultProps} />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders CircleIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={true}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
/>
);

expect(component).toMatchSnapshot();
});

test('Renders SymbolIcon with correct styles when isPointOnly and symbolId provided', async () => {
configureIsPointsOnly();
const component = shallow(<VectorIcon {...defaultProps} symbolId="airfield-15" />);

// Ensure all promises resolve
await new Promise(resolve => process.nextTick(resolve));
// Ensure the state changes are reflected
component.update();
test('Renders SymbolIcon', () => {
const component = shallow(
<VectorIcon
fillColor="#ff0000"
isPointsOnly={true}
isLinesOnly={false}
strokeColor="rgb(106,173,213)"
symbolId="airfield-15"
/>
);

expect(component).toMatchSnapshot();
});
67 changes: 14 additions & 53 deletions .../legacy/plugins/maps/public/layers/styles/vector/components/legend/vector_style_legend.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,57 +4,18 @@
* you may not use this file except in compliance with the Elastic License.
*/

import _ from 'lodash';
import React, { Component, Fragment } from 'react';

export class VectorStyleLegend extends Component {
state = {
styles: [],
};

componentDidMount() {
this._isMounted = true;
this._prevStyleDescriptors = undefined;
this._loadRows();
}

componentDidUpdate() {
this._loadRows();
}

componentWillUnmount() {
this._isMounted = false;
}

_loadRows = _.debounce(async () => {
const styles = await this.props.getLegendDetailStyleProperties();
const styleDescriptorPromises = styles.map(async style => {
return {
type: style.getStyleName(),
options: style.getOptions(),
fieldMeta: style.getFieldMeta(),
label: await style.getField().getLabel(),
};
});

const styleDescriptors = await Promise.all(styleDescriptorPromises);
if (this._isMounted && !_.isEqual(styleDescriptors, this._prevStyleDescriptors)) {
this._prevStyleDescriptors = styleDescriptors;
this.setState({ styles: styles });
}
}, 100);

render() {
return this.state.styles.map(style => {
return (
<Fragment key={style.getStyleName()}>
{style.renderLegendDetailRow({
loadIsLinesOnly: this.props.loadIsLinesOnly,
loadIsPointsOnly: this.props.loadIsPointsOnly,
symbolId: this.props.symbolId,
})}
</Fragment>
);
});
}
import React, { Fragment } from 'react';

export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }) {
return styles.map(style => {
return (
<Fragment key={style.getStyleName()}>
{style.renderLegendDetailRow({
isLinesOnly,
isPointsOnly,
symbolId,
})}
</Fragment>
);
});
}
Loading

0 comments on commit 14df4c0

Please sign in to comment.