From 6df0774e07ac994e6f36effd448ab2de88fdb902 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 24 Jan 2019 16:19:39 -0700 Subject: [PATCH 1/7] [Maps] move source details to Panel header --- .../layer_panel/settings_panel/index.js | 1 - .../settings_panel/settings_panel.js | 125 +++++++----------- .../gis/public/components/layer_panel/view.js | 66 ++++++++- .../shared/components/es_source_details.js | 46 ------- .../plugins/gis/public/shared/layers/layer.js | 6 +- .../shared/layers/sources/ems_file_source.js | 19 +-- .../sources/ems_tms_source/ems_tms_source.js | 16 +-- .../es_geohashgrid_source.js | 25 ++-- .../shared/layers/sources/es_join_source.js | 6 - .../es_search_source/es_search_source.js | 30 +++-- .../kibana_regionmap_source.js | 18 +-- .../kibana_tilemap_source.js | 16 +-- .../public/shared/layers/sources/source.js | 10 +- .../shared/layers/sources/wms_source.js | 22 +-- .../shared/layers/sources/xyz_tms_source.js | 16 +-- 15 files changed, 186 insertions(+), 236 deletions(-) delete mode 100644 x-pack/plugins/gis/public/shared/components/es_source_details.js diff --git a/x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js b/x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js index 2bbcbe3273e01..7a54c8d1640a3 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js +++ b/x-pack/plugins/gis/public/components/layer_panel/settings_panel/index.js @@ -23,7 +23,6 @@ function mapStateToProps(state = {}) { layerId: selectedLayer.getId(), maxZoom: selectedLayer.getMaxZoom(), minZoom: selectedLayer.getMinZoom(), - renderSourceDetails: selectedLayer.renderSourceDetails, renderSourceSettingsEditor: selectedLayer.renderSourceSettingsEditor, }; } diff --git a/x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js b/x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js index 8efb06622f0bc..a63a9ea8d0744 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js +++ b/x-pack/plugins/gis/public/components/layer_panel/settings_panel/settings_panel.js @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { Component, Fragment } from 'react'; +import React from 'react'; import { EuiFlexGroup, @@ -15,46 +15,35 @@ import { EuiFieldText, EuiRange, EuiSpacer, - EuiLink, } from '@elastic/eui'; import { ValidatedRange } from '../../../shared/components/validated_range'; -export class SettingsPanel extends Component { +export function SettingsPanel(props) { - state = { - showSourceDetails: false, - } - - toggleSourceDetails = () => { - this.setState((prevState) => ({ - showSourceDetails: !prevState.showSourceDetails, - })); - } - - onLabelChange = (event) => { + const onLabelChange = (event) => { const label = event.target.value; - this.props.updateLabel(this.props.layerId, label); - } + props.updateLabel(props.layerId, label); + }; - onMinZoomChange = (event) => { + const onMinZoomChange = (event) => { const zoom = parseInt(event.target.value, 10); - this.props.updateMinZoom(this.props.layerId, zoom); - } + props.updateMinZoom(props.layerId, zoom); + }; - onMaxZoomChange = (event) => { + const onMaxZoomChange = (event) => { const zoom = parseInt(event.target.value, 10); - this.props.updateMaxZoom(this.props.layerId, zoom); - } + props.updateMaxZoom(props.layerId, zoom); + }; - onAlphaChange = (alpha) => { - this.props.updateAlpha(this.props.layerId, alpha); - } + const onAlphaChange = (alpha) => { + props.updateAlpha(props.layerId, alpha); + }; - onSourceChange = ({ propName, value }) => { - this.props.updateSourceProp(this.props.layerId, propName, value); - } + const onSourceChange = ({ propName, value }) => { + props.updateSourceProp(props.layerId, propName, value); + }; - renderZoomSliders() { + const renderZoomSliders = () => { return ( @@ -81,8 +70,8 @@ export class SettingsPanel extends Component { @@ -91,22 +80,22 @@ export class SettingsPanel extends Component { ); - } + }; - renderLabel() { + const renderLabel = () => { return ( ); - } + }; - renderAlphaSlider() { + const renderAlphaSlider = () => { return ( ); - } + }; - renderSourceDetails() { - if (!this.state.showSourceDetails) { - return null; - } + return ( + + + +
Settings
 + + - return ( - - {this.props.renderSourceDetails()} - - - ); - } + - render() { - return ( - - - -
Settings
 - - - - source details - - - - - + {renderLabel()} - {this.renderSourceDetails()} + {renderZoomSliders()} - {this.renderLabel()} + {renderAlphaSlider()} - {this.renderZoomSliders()} + {props.renderSourceSettingsEditor({ onChange: onSourceChange })} - {this.renderAlphaSlider()} - - {this.props.renderSourceSettingsEditor({ onChange: this.onSourceChange })} - - - ); - } + + ); } diff --git a/x-pack/plugins/gis/public/components/layer_panel/view.js b/x-pack/plugins/gis/public/components/layer_panel/view.js index 1e827f74b598f..e959a62aad50e 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/view.js +++ b/x-pack/plugins/gis/public/components/layer_panel/view.js @@ -20,17 +20,45 @@ import { EuiFlyoutBody, EuiFlyoutFooter, EuiSpacer, + EuiAccordion, + EuiText, + EuiLink, } from '@elastic/eui'; export class LayerPanel extends React.Component { - state = { - displayName: null + static getDerivedStateFromProps(nextProps, prevState) { + const nextId = nextProps.selectedLayer.getId(); + if (nextId !== prevState.prevId) { + return { + isLayerAsyncStateLoaded: false, + displayName: '', + immutableSourceProps: [], + prevId: nextId, + }; + } + + return null; } + state = {} + componentDidMount() { this._isMounted = true; this.loadDisplayName(); + this.loadImmutableSourceProperties(); + } + + componentDidUpdate() { + if (!this.state.isLayerAsyncStateLoaded) { + this.setState({ + isLayerAsyncStateLoaded: true + }, + () => { + this.loadDisplayName(); + this.loadImmutableSourceProperties(); + }); + } } componentWillUnmount() { @@ -44,6 +72,13 @@ export class LayerPanel extends React.Component { } } + loadImmutableSourceProperties = async () => { + const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties(); + if (this._isMounted) { + this.setState({ immutableSourceProps }); + } + } + _renderJoinSection() { if (!this.props.selectedLayer.isJoinable()) { return null; @@ -59,6 +94,23 @@ export class LayerPanel extends React.Component { ); } + _renderSourceProperties() { + return this.state.immutableSourceProps.map(({ label, value, link }) => { + function renderValue() { + if (link) { + return ({value}); + } + return ({value}); + } + return ( +

+ {label} + {renderValue()} +

+ ); + }); + } + render() { const { selectedLayer } = this.props; @@ -78,6 +130,16 @@ export class LayerPanel extends React.Component { + + +
+ {this._renderSourceProperties()} +
+ + diff --git a/x-pack/plugins/gis/public/shared/components/es_source_details.js b/x-pack/plugins/gis/public/shared/components/es_source_details.js deleted file mode 100644 index 2cf424fae84d9..0000000000000 --- a/x-pack/plugins/gis/public/shared/components/es_source_details.js +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import React, { Component } from 'react'; - -import { - EuiText, -} from '@elastic/eui'; - -export class ESSourceDetails extends Component { - - state = { - indexPatternTitle: null - } - - componentDidMount() { - this._isMounted = true; - this.loadDisplayName(); - } - - componentWillUnmount() { - this._isMounted = false; - } - - loadDisplayName = async () => { - const indexPatternTitle = await this.props.source.getDisplayName(); - if (this._isMounted) { - this.setState({ indexPatternTitle }); - } - } - - render() { - return ( - -

- Type {this.props.sourceType}
- Index pattern {this.state.indexPatternTitle}
- {this.props.geoFieldType}{this.props.geoField}
-

- - ); - } -} diff --git a/x-pack/plugins/gis/public/shared/layers/layer.js b/x-pack/plugins/gis/public/shared/layers/layer.js index 5018ff3bd3f95..9cea3143223db 100644 --- a/x-pack/plugins/gis/public/shared/layers/layer.js +++ b/x-pack/plugins/gis/public/shared/layers/layer.js @@ -131,9 +131,9 @@ export class ALayer { return this._style; } - renderSourceDetails = () => { - return this._source.renderDetails(); - }; + async getImmutableSourceProperties() { + return this._source.getImmutableProperties(); + } renderSourceSettingsEditor = ({ onChange }) => { return this._source.renderSourceSettingsEditor({ onChange }); diff --git a/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js b/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js index b4d466e0113c6..d78cc13049af2 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js @@ -7,8 +7,6 @@ import { VectorSource } from './vector_source'; import React from 'react'; import { - EuiLink, - EuiText, EuiSelect, EuiFormRow, } from '@elastic/eui'; @@ -70,17 +68,12 @@ export class EMSFileSource extends VectorSource { }; } - renderDetails() { - const emsHotLink = emsServiceSettings.getEMSHotLink(this._descriptor.id); - return ( - -

- Source Elastic Maps Service
- Id {this._descriptor.id}
- Preview on maps.elastic.co
-

- - ); + async getImmutableProperties() { + const emsLink = await emsServiceSettings.getEMSHotLink(this._descriptor.id); + return [ + { label: 'Data source', value: EMSFileSource.title }, + { label: 'Layer', value: this._descriptor.id, link: emsLink } + ]; } async getDisplayName() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/ems_tms_source/ems_tms_source.js b/x-pack/plugins/gis/public/shared/layers/sources/ems_tms_source/ems_tms_source.js index c43449a1367db..51cc7d1e7c143 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/ems_tms_source/ems_tms_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/ems_tms_source/ems_tms_source.js @@ -7,7 +7,6 @@ import React from 'react'; import { TMSSource } from '../tms_source'; import { TileLayer } from '../../tile_layer'; import { - EuiText, EuiSelect, EuiFormRow, } from '@elastic/eui'; @@ -58,16 +57,11 @@ export class EMSTMSSource extends TMSSource { this._emsTileServices = emsTmsServices; } - renderDetails() { - return ( - -

- Source Elastic Maps Service
- Type Tile
- Id {this._descriptor.id}
-

- - ); + async getImmutableProperties() { + return [ + { label: 'Data source', value: EMSTMSSource.title }, + { label: 'Tile service', value: this._descriptor.id } + ]; } _getTMSOptions() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js b/x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js index a5897ea047576..be40273943694 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/es_geohashgrid_source/es_geohashgrid_source.js @@ -23,7 +23,6 @@ import { createExtentFilter, makeGeohashGridPolygon } from '../../../../elastics import { AggConfigs } from 'ui/vis/agg_configs'; import { tabifyAggResponse } from 'ui/agg_response/tabify'; import { convertToGeoJson } from './convert_to_geojson'; -import { ESSourceDetails } from '../../../components/es_source_details'; import { VectorStyle } from '../../styles/vector_style'; import { RENDER_AS } from './render_as'; import { CreateSourceEditor } from './create_source_editor'; @@ -92,15 +91,21 @@ export class ESGeohashGridSource extends VectorSource { ); } - renderDetails() { - return ( - - ); + async getImmutableProperties() { + let indexPatternTitle = this._descriptor.indexPatternId; + try { + const indexPattern = await indexPatternService.get(this._descriptor.indexPatternId); + indexPatternTitle = indexPattern.title; + } catch (error) { + // ignore error, title will just default to id + } + + return [ + { label: 'Data source', value: ESGeohashGridSource.title }, + { label: 'Index pattern', value: indexPatternTitle }, + { label: 'Geospatial field', value: this._descriptor.geoField }, + { label: 'Show as', value: this._descriptor.requestType }, + ]; } destroy() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/es_join_source.js b/x-pack/plugins/gis/public/shared/layers/sources/es_join_source.js index 1eaa055439ae0..0f0a6ae75ebe9 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/es_join_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/es_join_source.js @@ -5,8 +5,6 @@ */ import _ from 'lodash'; -import React, { Fragment } from 'react'; - import { ASource } from './source'; import { Schemas } from 'ui/vis/editors/default/schemas'; import { @@ -68,10 +66,6 @@ export class ESJoinSource extends ASource { return `
editor details
`; } - renderDetails() { - return (table source details); - } - hasCompleteConfig() { if (_.has(this._descriptor, 'indexPatternId') && _.has(this._descriptor, 'term')) { return true; diff --git a/x-pack/plugins/gis/public/shared/layers/sources/es_search_source/es_search_source.js b/x-pack/plugins/gis/public/shared/layers/sources/es_search_source/es_search_source.js index 47f59e26fb44b..972fb4c7a1f53 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/es_search_source/es_search_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/es_search_source/es_search_source.js @@ -17,7 +17,6 @@ import { } from '../../../../kibana_services'; import { hitsToGeoJson, createExtentFilter } from '../../../../elasticsearch_geo_utils'; import { timefilter } from 'ui/timefilter/timefilter'; -import { ESSourceDetails } from '../../../components/es_source_details'; import { CreateSourceEditor } from './create_source_editor'; import { UpdateSourceEditor } from './update_source_editor'; @@ -98,15 +97,26 @@ export class ESSearchSource extends VectorSource { return [this._descriptor.indexPatternId]; } - renderDetails() { - return ( - - ); + async getImmutableProperties() { + let indexPatternTitle = this._descriptor.indexPatternId; + let geoFieldType = ''; + try { + const indexPattern = await indexPatternService.get(this._descriptor.indexPatternId); + indexPatternTitle = indexPattern.title; + const geoField = indexPattern.fields.byName[this._descriptor.geoField]; + if (geoField) { + geoFieldType = geoField.type; + } + } catch (error) { + // ignore error, title will just default to id + } + + return [ + { label: 'Data source', value: ESSearchSource.title }, + { label: 'Index pattern', value: indexPatternTitle }, + { label: 'Geospatial field', value: this._descriptor.geoField }, + { label: 'Geospatial field type', value: geoFieldType }, + ]; } async _getIndexPattern() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/kibana_regionmap_source/kibana_regionmap_source.js b/x-pack/plugins/gis/public/shared/layers/sources/kibana_regionmap_source/kibana_regionmap_source.js index 47a92ec27daef..6f6b3c05e9cb5 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/kibana_regionmap_source/kibana_regionmap_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/kibana_regionmap_source/kibana_regionmap_source.js @@ -7,9 +7,6 @@ import _ from 'lodash'; import { VectorSource } from '../vector_source'; import React from 'react'; -import { - EuiText, -} from '@elastic/eui'; import { CreateSourceEditor } from './create_source_editor'; export class KibanaRegionmapSource extends VectorSource { @@ -48,16 +45,11 @@ export class KibanaRegionmapSource extends VectorSource { ); }; - renderDetails() { - return ( - -

- Source Kibana Region Map
- Type Vector
- Name {this._descriptor.name}
-

- - ); + async getImmutableProperties() { + return [ + { label: 'Data source', value: KibanaRegionmapSource.title }, + { label: 'Vector layer', value: this._descriptor.name }, + ]; } async getGeoJsonWithMeta() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/kibana_tilemap_source/kibana_tilemap_source.js b/x-pack/plugins/gis/public/shared/layers/sources/kibana_tilemap_source/kibana_tilemap_source.js index 4b29d315488e0..c794b5f72f3f1 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/kibana_tilemap_source/kibana_tilemap_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/kibana_tilemap_source/kibana_tilemap_source.js @@ -7,7 +7,6 @@ import React from 'react'; import { TMSSource } from '../tms_source'; import { TileLayer } from '../../tile_layer'; import { CreateSourceEditor } from './create_source_editor'; -import { EuiText } from '@elastic/eui'; export class KibanaTilemapSource extends TMSSource { @@ -33,16 +32,11 @@ export class KibanaTilemapSource extends TMSSource { return (); }; - renderDetails() { - return ( - -

- Source Kibana Tilemap Configuration
- Type Tile
- Id {this._descriptor.id}
-

- - ); + async getImmutableProperties() { + return [ + { label: 'Data source', value: KibanaTilemapSource.title }, + { label: 'Tilemap url', value: this.getUrlTemplate() }, + ]; } _createDefaultLayerDescriptor(options) { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/source.js b/x-pack/plugins/gis/public/shared/layers/sources/source.js index 6d7a9f316c1b6..3cc9dcd53724d 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/source.js @@ -4,8 +4,6 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; - export class ASource { static renderEditor() { @@ -26,8 +24,12 @@ export class ASource { destroy() {} - renderDetails() { - return (
{`Here be details for source`}
); + /** + * return list of immutable source properties. + * Immutable source properties are properties that can not be edited by the user. + */ + async getImmutableProperties() { + return []; } _createDefaultLayerDescriptor() { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js b/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js index 458cdbf5e39fd..f4fe3afdf0e37 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js @@ -8,7 +8,6 @@ import React, { Fragment } from 'react'; import { EuiFieldText, - EuiText, EuiFormRow, } from '@elastic/eui'; @@ -39,20 +38,13 @@ export class WMSSource extends TMSSource { return (); } - renderDetails() { - return ( - -

- Type WMSSource.typeDisplayName
- Service - {this._descriptor.serviceUrl}
- Layers - {this._descriptor.layers}
- Styles - {this._descriptor.styles}
-

- - ); + async getImmutableProperties() { + return [ + { label: 'Data source', value: WMSSource.title }, + { label: 'Url', value: this._descriptor.serviceUrl }, + { label: 'Layers', value: this._descriptor.layers }, + { label: 'Styles', value: this._descriptor.styles }, + ]; } _createDefaultLayerDescriptor(options) { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js b/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js index 9ec050ec11085..71704498539bc 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js @@ -8,7 +8,6 @@ import React from 'react'; import { EuiFieldText, - EuiText, EuiFormRow, } from '@elastic/eui'; @@ -37,16 +36,11 @@ export class XYZTMSSource extends TMSSource { return (); } - renderDetails() { - return ( - -

- Type Tile
- Url - {this._descriptor.urlTemplate}
-

- - ); + async getImmutableProperties() { + return [ + { label: 'Data source', value: XYZTMSSource.title }, + { label: 'Url', value: this._descriptor.urlTemplate }, + ]; } _createDefaultLayerDescriptor(options) { From 76fb38c67a027a5cc5380f5480c5144285f18d75 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 24 Jan 2019 16:32:01 -0700 Subject: [PATCH 2/7] fix EMS file link --- .../plugins/gis/public/shared/layers/sources/ems_file_source.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js b/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js index d78cc13049af2..96152e9d1254b 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/ems_file_source.js @@ -69,7 +69,7 @@ export class EMSFileSource extends VectorSource { } async getImmutableProperties() { - const emsLink = await emsServiceSettings.getEMSHotLink(this._descriptor.id); + const emsLink = await emsServiceSettings.getEMSHotLink({ id: this._descriptor.id }); return [ { label: 'Data source', value: EMSFileSource.title }, { label: 'Layer', value: this._descriptor.id, link: emsLink } From abdce9f17b7618587c78046f818be39f289e7ff4 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 24 Jan 2019 16:39:46 -0700 Subject: [PATCH 3/7] add grid icon to WMS and TMS source --- x-pack/plugins/gis/public/shared/layers/sources/wms_source.js | 1 + .../plugins/gis/public/shared/layers/sources/xyz_tms_source.js | 1 + 2 files changed, 2 insertions(+) diff --git a/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js b/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js index f4fe3afdf0e37..12f7340d8855a 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/wms_source.js @@ -19,6 +19,7 @@ export class WMSSource extends TMSSource { static type = 'WMS'; static title = 'Web Map Service'; static description = 'Maps from OGC Standard WMS'; + static icon = 'grid'; static createDescriptor({ serviceUrl, layers, styles }) { return { diff --git a/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js b/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js index 71704498539bc..646346ab80774 100644 --- a/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js +++ b/x-pack/plugins/gis/public/shared/layers/sources/xyz_tms_source.js @@ -19,6 +19,7 @@ export class XYZTMSSource extends TMSSource { static type = 'EMS_XYZ'; static title = 'Tile Map Service from URL'; static description = 'Map tiles from a URL that includes the XYZ coordinates'; + static icon = 'grid'; static createDescriptor(urlTemplate) { return { From 3829f6bda0be37d93ce9e65910eabcfbc3a71886 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Thu, 24 Jan 2019 16:58:13 -0700 Subject: [PATCH 4/7] ensure loadingDisplayName and props is only called once when component mounts --- .../gis/public/components/layer_panel/view.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/gis/public/components/layer_panel/view.js b/x-pack/plugins/gis/public/components/layer_panel/view.js index e959a62aad50e..ab3e792fd65f5 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/view.js +++ b/x-pack/plugins/gis/public/components/layer_panel/view.js @@ -45,19 +45,12 @@ export class LayerPanel extends React.Component { componentDidMount() { this._isMounted = true; - this.loadDisplayName(); - this.loadImmutableSourceProperties(); + this.loadAsyncState(); } componentDidUpdate() { if (!this.state.isLayerAsyncStateLoaded) { - this.setState({ - isLayerAsyncStateLoaded: true - }, - () => { - this.loadDisplayName(); - this.loadImmutableSourceProperties(); - }); + this.loadAsyncState(); } } @@ -65,6 +58,16 @@ export class LayerPanel extends React.Component { this._isMounted = false; } + loadAsyncState = async () => { + this.setState({ + isLayerAsyncStateLoaded: true + }, + () => { + this.loadDisplayName(); + this.loadImmutableSourceProperties(); + }); + } + loadDisplayName = async () => { const displayName = await this.props.selectedLayer.getDisplayName(); if (this._isMounted) { From f9250d2b869f522c4b9876f16ed737780d55ea1f Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Fri, 25 Jan 2019 06:07:33 -0700 Subject: [PATCH 5/7] ensure display name gets updated when user changes it in settings panel input --- .../gis/public/components/layer_panel/view.js | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/x-pack/plugins/gis/public/components/layer_panel/view.js b/x-pack/plugins/gis/public/components/layer_panel/view.js index ab3e792fd65f5..be50250d973d8 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/view.js +++ b/x-pack/plugins/gis/public/components/layer_panel/view.js @@ -31,9 +31,9 @@ export class LayerPanel extends React.Component { const nextId = nextProps.selectedLayer.getId(); if (nextId !== prevState.prevId) { return { - isLayerAsyncStateLoaded: false, displayName: '', immutableSourceProps: [], + hasLoadedSourcePropsForLayer: false, prevId: nextId, }; } @@ -45,40 +45,39 @@ export class LayerPanel extends React.Component { componentDidMount() { this._isMounted = true; - this.loadAsyncState(); + this.loadDisplayName(); + this.loadImmutableSourceProperties(); } componentDidUpdate() { - if (!this.state.isLayerAsyncStateLoaded) { - this.loadAsyncState(); - } + this.loadDisplayName(); + this.loadImmutableSourceProperties(); } componentWillUnmount() { this._isMounted = false; } - loadAsyncState = async () => { - this.setState({ - isLayerAsyncStateLoaded: true - }, - () => { - this.loadDisplayName(); - this.loadImmutableSourceProperties(); - }); - } - loadDisplayName = async () => { const displayName = await this.props.selectedLayer.getDisplayName(); - if (this._isMounted) { - this.setState({ displayName }); + if (!this._isMounted || displayName === this.state.displayName) { + return; } + + this.setState({ displayName }); } loadImmutableSourceProperties = async () => { + if (this.state.hasLoadedSourcePropsForLayer) { + return; + } + const immutableSourceProps = await this.props.selectedLayer.getImmutableSourceProperties(); if (this._isMounted) { - this.setState({ immutableSourceProps }); + this.setState({ + immutableSourceProps, + hasLoadedSourcePropsForLayer: true, + }); } } From b480b91421bf92512169403b9ef52eeabada9d90 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Sat, 26 Jan 2019 12:40:22 -0700 Subject: [PATCH 6/7] clean-up styling --- .../components/layer_panel/_layer_panel.scss | 10 ++++++++ .../gis/public/components/layer_panel/view.js | 23 +++++++++++-------- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss b/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss index e5eb76e562bf8..093ae98b48244 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss +++ b/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss @@ -23,6 +23,16 @@ box-shadow: 0 $euiSize $euiSize (-$euiSize / 2) $euiColorLightestShade; } +.gisLayerPanel__sourceDetails { + margin-left: $euiSizeXL; +} + +.gisLayerDetails { + p { + margin-bottom: 0px !important; + } +} + .gisLayerPanel__footer { border-top: $euiBorderThin; box-shadow: 0 ($euiSize *-1) $euiSize (-$euiSize / 2) $euiColorLightestShade; diff --git a/x-pack/plugins/gis/public/components/layer_panel/view.js b/x-pack/plugins/gis/public/components/layer_panel/view.js index 52f55487b7270..77c3531308595 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/view.js +++ b/x-pack/plugins/gis/public/components/layer_panel/view.js @@ -135,16 +135,19 @@ export class LayerPanel extends React.Component { - - -
- {this._renderSourceProperties()} -
- - +
+ + +
+ + {this._renderSourceProperties()} +
+ + +
From cc6b79308bd0955c5952d1afb84f35d83cb84f79 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 28 Jan 2019 18:42:33 -0700 Subject: [PATCH 7/7] review feedback --- .../public/components/layer_panel/_layer_panel.scss | 6 ++---- .../plugins/gis/public/components/layer_panel/view.js | 11 +++++------ x-pack/plugins/gis/public/shared/layers/_index.scss | 1 - x-pack/plugins/gis/public/shared/layers/_layers.scss | 10 ---------- 4 files changed, 7 insertions(+), 21 deletions(-) delete mode 100644 x-pack/plugins/gis/public/shared/layers/_layers.scss diff --git a/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss b/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss index 093ae98b48244..64ed57a211301 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss +++ b/x-pack/plugins/gis/public/components/layer_panel/_layer_panel.scss @@ -27,10 +27,8 @@ margin-left: $euiSizeXL; } -.gisLayerDetails { - p { - margin-bottom: 0px !important; - } +.gisLayerPanel__sourceDetail { + margin-bottom: 0px !important; } .gisLayerPanel__footer { diff --git a/x-pack/plugins/gis/public/components/layer_panel/view.js b/x-pack/plugins/gis/public/components/layer_panel/view.js index 77c3531308595..400d2f0f7d9e4 100644 --- a/x-pack/plugins/gis/public/components/layer_panel/view.js +++ b/x-pack/plugins/gis/public/components/layer_panel/view.js @@ -106,8 +106,8 @@ export class LayerPanel extends React.Component { return ({value}); } return ( -

- {label} +

+ {label}{' '} {renderValue()}

); @@ -135,16 +135,15 @@ export class LayerPanel extends React.Component { +
-
- - {this._renderSourceProperties()} -
+ + {this._renderSourceProperties()}
diff --git a/x-pack/plugins/gis/public/shared/layers/_index.scss b/x-pack/plugins/gis/public/shared/layers/_index.scss index f51627d55c2c5..a2ce58e0381af 100644 --- a/x-pack/plugins/gis/public/shared/layers/_index.scss +++ b/x-pack/plugins/gis/public/shared/layers/_index.scss @@ -1,2 +1 @@ @import './styles/index'; -@import './layers'; diff --git a/x-pack/plugins/gis/public/shared/layers/_layers.scss b/x-pack/plugins/gis/public/shared/layers/_layers.scss deleted file mode 100644 index 33a81a949d650..0000000000000 --- a/x-pack/plugins/gis/public/shared/layers/_layers.scss +++ /dev/null @@ -1,10 +0,0 @@ -.gisLayerDetails__label { - display: inline-block; - min-width: 5.5em; - margin-right: $euiSizeS; - white-space: nowrap; - - + span { - word-break: break-all; - } -}