Skip to content

[Maps] add multiple feature selection in tooltips#39629

Merged
thomasneirynck merged 34 commits intoelastic:masterfrom
thomasneirynck:maps/multi_tooltip
Jul 1, 2019
Merged

[Maps] add multiple feature selection in tooltips#39629
thomasneirynck merged 34 commits intoelastic:masterfrom
thomasneirynck:maps/multi_tooltip

Conversation

@thomasneirynck
Copy link
Copy Markdown
Contributor

@thomasneirynck thomasneirynck commented Jun 25, 2019

WIP, do not merge


2nd DRAFT

added @ryankeairns suggestions:

  1. hovering, single feature

image

  1. hovering, multi features

image

  1. locked, single layer / single feature

image

  1. locked, single layer / multi features

image

  1. locked, multi-layers / multi-features

image

  1. locked, multi-layers / single feature (after layer-filter)

image


1st DRAFT

Adds carrousel and layer-selector to cycle through the results under the mouse pointer

image


Closes #29005

@thomasneirynck thomasneirynck added Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v7.3.0 v8.0.0 WIP Work in progress labels Jun 25, 2019
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/kibana-gis

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@nreese
Copy link
Copy Markdown
Contributor

nreese commented Jun 27, 2019

FeatureTooltip is getting rather large. Want to break it into smaller components? Maybe put FeatureProperties into its own component? That way, FeatureTooltip would just pass featureId, layerId, and loadFeatureProperties to FeatureProperties and FeatureProperties could encapsulate loading feature props and rendering table

@nreese
Copy link
Copy Markdown
Contributor

nreese commented Jun 27, 2019

The feature selection controls dominate the tooltip. How about putting them in a panel with a grey background color or adding a horizontal rule so they are visually separated from the property content a little more?

Screen Shot 2019-06-27 at 7 20 41 AM

Screen Shot 2019-06-27 at 7 20 47 AM

@ryankeairns
Copy link
Copy Markdown
Contributor

ryankeairns commented Jun 27, 2019

Thomas and I talked and came up with revised layouts for the case where there is only one layer and where there are many layers or many data points.

The layer selector and compressed pagination (arrows; no page numbers) will only appear when the data dictates a need for it. These controls allow users to select a specific layer (reduce the volume of data) and/or quickly flip through the data points.

The iInCircle would display an EuiToolTip explaining that filtering can be used to as another way to reduce the amount of data being presented.

Screenshot 2019-06-27 09 40 01

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

Copy link
Copy Markdown
Contributor

@ryankeairns ryankeairns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 LGTM. Tried it out locally, added layers, works as described/designed.

@thomasneirynck thomasneirynck removed the WIP Work in progress label Jun 28, 2019
@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@thomasneirynck
Copy link
Copy Markdown
Contributor Author

retest

@elasticmachine
Copy link
Copy Markdown
Contributor

💔 Build Failed

@thomasneirynck
Copy link
Copy Markdown
Contributor Author

retest

Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/mb/view.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@thomasneirynck thomasneirynck requested a review from nreese July 1, 2019 14:09
Comment thread x-pack/legacy/plugins/maps/public/components/map/feature_tooltip.js Outdated
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

@thomasneirynck thomasneirynck requested a review from nreese July 1, 2019 15:21
Copy link
Copy Markdown
Contributor

@nreese nreese left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm
code review and tested in chrome

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

release_note:enhancement Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v7.3.0 v8.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Maps] tooltips should handle multiple overlapping features

4 participants