[Maps] provide drag-n-drop support to order tooltip properties #46631

nreese · 2019-09-25T19:43:04Z

This PR replaces the tooltip configuration UI with a new component that allows users to use drag-n-drop to order tooltip properties. The UI changes lay the foundation needed for custom tooltip labels and support for a side bar overflow when lots of properties are requested.

elasticmachine · 2019-09-25T19:43:07Z

Pinging @elastic/kibana-gis

cchaos · 2019-09-25T19:51:00Z

@miukimiu Is working on mocks for this at the moment. Please coordinate with her over the UI design.

elasticmachine · 2019-09-25T21:30:25Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

elasticmachine · 2019-09-25T21:55:20Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request

nickpeihl

A nit, but the flash on the droppable pane after the drag end feels delayed. I'm not sure if this is something in EUI or if there's some async function that is blocking the flash. I just feel like the flash should happen sooner.

x-pack/legacy/plugins/maps/public/components/add_tooltip_field_popover.js

nickpeihl · 2019-09-26T18:53:04Z

x-pack/legacy/plugins/maps/public/components/tooltip_selector.js

+            selectedFields={selectedFields}
+          />
+        </EuiTextAlign>
+      </div>


I wonder if we could wrap this div in a collapsible element like EuiAccordion instead? It takes up a lot of real estate when someone adds a lot of fields.

elizabetdev · 2019-09-27T11:12:41Z

Hi @nreese,

Here's the design I have in mind for the tooltips:

When we reach more than 5 fields a <EuiCallOut /> appears saying that is not recommended. As we discussed on #44298

When the users click to add a new field a <EuiPopover /> appears. Similar to what you've done but the difference is instead of having the type of field as a title they will appear as icons.

As you asked me, I also thought about how to rename the fields just to have for future reference:

The idea is you can always rename the field but you can open the card to see the real field name. This is just an initial idea and I'm happy to improve it. 😄

You can find the Figma Prototype Here

nreese · 2019-09-27T11:29:51Z

@miukimiu Thanks for the designs, they look great. I really like the idea of showing type icon instead of using a header.

Did you see Nick's suggestion about having a way to collapse the list? Where should the controls go for that suggestion?

nickpeihl · 2019-09-27T15:07:49Z

Did you see Nick's suggestion about having a way to collapse the list? Where should the controls go for that suggestion?

IMO we may not need to collapse the element if we implement the suggested limit of five fields from @miukimiu 's mockup.

elizabetdev · 2019-09-27T16:43:46Z

Another suggestion could be to have all the panels collapsible and move the tooltip settings to its own card.

But I think there's a reason that @nreese mentioned that the tooltip settings can't be on a different card.

nreese · 2019-09-27T17:32:58Z

But I think there's a reason that @nreese mentioned that the tooltip settings can't be on a different card.

Tooltip state is currently stored in source state. Settings panels are controlled by the layer and layer state. We would need to migrate the tooltip state from the source to the layer to move the panel to its own panel.

I think we need to do this in order to allow users to control which metrics and join fields are displayed in the tooltip tip. Right now, all metrics and joins show up in the tooltip but if we go the route of the side panel for overflow tooltip space then users will need to be able to specify which metric and joins are in the tooltip and the display order. Regardless, that work will be done in another PR

nreese · 2019-10-07T20:49:25Z

Updated add tooltip popover with FieldIcon

nreese · 2019-10-07T21:06:10Z

@miukimiu I added a bottom border to each tooltip field instead of a box. This is more inline with the separation between metric fields for the geo-grid source that @cchaos just added. I also do not show the grab and trash icon until the hover event. This is more inline with the icons in the map legend. Thoughts?

nreese · 2019-10-07T21:29:52Z

@nickpeihl This is ready for another look. I have fixed the flash after dragging and dropping fields. The popover now allows for the selection of multiple fields at a time.

elasticmachine · 2019-10-07T21:47:18Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 39f256c

elasticmachine · 2019-10-07T21:50:59Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 21acefb

elasticmachine · 2019-10-07T22:09:36Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 1739cfa

elasticmachine · 2019-10-07T22:37:47Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: bb758e5

nickpeihl

lgtm! thanks.

bcamper · 2019-10-09T14:23:13Z

🎊🎊🎊

elasticmachine · 2019-10-09T14:50:55Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: fc28afe

elizabetdev

Thanks for merging the style fixes! 👍

Everything looks good to me!

elasticmachine · 2019-10-09T19:23:41Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: 5cec2a9

snide

Small one for you @nreese. Thanks.

x-pack/legacy/plugins/maps/public/components/_tooltip_selector.scss

elasticmachine · 2019-10-09T21:20:21Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 2d7357e

…ic#46631) * [Maps] tooltip custom labels * add drag handlers for re-ordering tooltip property order * add trash button to remove property * add jest tests for AddTooltipFieldPopover * sort EMS file tooltip properties * update TooltipSelector jest test * clean up AddTooltipFieldPopover field sorting * remove console statements * add more styles when row is getting dragged * change reorder aria label * move css changes into seperate file * allow adding multiple fields before closing popover * clear checked state on Add * update jest snapshots * use FieldIcon to display field type as icon * add bottom border to tooltip field * avoid flash after drag and drop * Tooltip styles (#32) * update TooltipSelector snapshot * replace 24px with

… (#47771) * [Maps] tooltip custom labels * add drag handlers for re-ordering tooltip property order * add trash button to remove property * add jest tests for AddTooltipFieldPopover * sort EMS file tooltip properties * update TooltipSelector jest test * clean up AddTooltipFieldPopover field sorting * remove console statements * add more styles when row is getting dragged * change reorder aria label * move css changes into seperate file * allow adding multiple fields before closing popover * clear checked state on Add * update jest snapshots * use FieldIcon to display field type as icon * add bottom border to tooltip field * avoid flash after drag and drop * Tooltip styles (#32) * update TooltipSelector snapshot * replace 24px with

nreese added 11 commits September 24, 2019 12:58

[Maps] tooltip custom labels

2548fcb

Merge branch 'master' of github.com:elastic/kibana into tooltip-sort

c051daa

add drag handlers for re-ordering tooltip property order

dc6159c

add trash button to remove property

13b5ba6

add jest tests for AddTooltipFieldPopover

1ed927c

sort EMS file tooltip properties

68df57d

update TooltipSelector jest test

c41c726

clean up AddTooltipFieldPopover field sorting

5490ac0

remove console statements

3e560fb

add more styles when row is getting dragged

b5c165d

change reorder aria label

3ab4f0d

nreese added [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation enhancement New value added to drive a business result v8.0.0 v7.5.0 labels Sep 25, 2019

nreese requested review from nickpeihl and elizabetdev September 25, 2019 19:43

nreese requested a review from a team as a code owner September 25, 2019 19:43

nreese mentioned this pull request Sep 25, 2019

[Maps] Tooltip enhancements #46581

Closed

9 tasks

move css changes into seperate file

0b4a91b

nickpeihl requested changes Sep 26, 2019

View reviewed changes

nreese added 2 commits October 7, 2019 14:29

Merge branch 'master' of github.com:elastic/kibana into tooltip-sort

39f256c

use FieldIcon to display field type as icon

21acefb

add bottom border to tooltip field

1739cfa

avoid flash after drag and drop

bb758e5

nreese requested a review from nickpeihl October 7, 2019 21:29

nickpeihl approved these changes Oct 8, 2019

View reviewed changes

nreese added release_note:enhancement and removed enhancement New value added to drive a business result labels Oct 9, 2019

fix merge conflicts

fc28afe

Tooltip styles (#32)

f9e22eb

elizabetdev approved these changes Oct 9, 2019

View reviewed changes

merge with master and update snapshots

5cec2a9

update TooltipSelector snapshot

810b9e3

snide approved these changes Oct 9, 2019

View reviewed changes

x-pack/legacy/plugins/maps/public/components/_tooltip_selector.scss Outdated Show resolved Hide resolved

replace 24px with

2d7357e

nreese merged commit e925186 into elastic:master Oct 9, 2019

nreese mentioned this pull request Oct 9, 2019

[7.x] [Maps] provide drag-n-drop support to order tooltip properties (#46631) #47771

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] provide drag-n-drop support to order tooltip properties #46631

[Maps] provide drag-n-drop support to order tooltip properties #46631

nreese commented Sep 25, 2019 •

edited

Loading

elasticmachine commented Sep 25, 2019

cchaos commented Sep 25, 2019

elasticmachine commented Sep 25, 2019

elasticmachine commented Sep 25, 2019

nickpeihl left a comment

nickpeihl Sep 26, 2019

elizabetdev commented Sep 27, 2019 •

edited

Loading

nreese commented Sep 27, 2019 •

edited

Loading

nickpeihl commented Sep 27, 2019

elizabetdev commented Sep 27, 2019

nreese commented Sep 27, 2019 •

edited

Loading

nreese commented Oct 7, 2019

nreese commented Oct 7, 2019

nreese commented Oct 7, 2019

elasticmachine commented Oct 7, 2019

elasticmachine commented Oct 7, 2019

elasticmachine commented Oct 7, 2019

elasticmachine commented Oct 7, 2019

nickpeihl left a comment

bcamper commented Oct 9, 2019

elasticmachine commented Oct 9, 2019

elizabetdev left a comment

elasticmachine commented Oct 9, 2019

snide left a comment

elasticmachine commented Oct 9, 2019

[Maps] provide drag-n-drop support to order tooltip properties #46631

[Maps] provide drag-n-drop support to order tooltip properties #46631

Conversation

nreese commented Sep 25, 2019 • edited Loading

elasticmachine commented Sep 25, 2019

cchaos commented Sep 25, 2019

elasticmachine commented Sep 25, 2019

💚 Build Succeeded

elasticmachine commented Sep 25, 2019

💚 Build Succeeded

nickpeihl left a comment

Choose a reason for hiding this comment

nickpeihl Sep 26, 2019

Choose a reason for hiding this comment

elizabetdev commented Sep 27, 2019 • edited Loading

You can find the Figma Prototype Here

nreese commented Sep 27, 2019 • edited Loading

nickpeihl commented Sep 27, 2019

elizabetdev commented Sep 27, 2019

nreese commented Sep 27, 2019 • edited Loading

nreese commented Oct 7, 2019

nreese commented Oct 7, 2019

nreese commented Oct 7, 2019

elasticmachine commented Oct 7, 2019

💚 Build Succeeded

elasticmachine commented Oct 7, 2019

💚 Build Succeeded

elasticmachine commented Oct 7, 2019

💚 Build Succeeded

elasticmachine commented Oct 7, 2019

💚 Build Succeeded

nickpeihl left a comment

Choose a reason for hiding this comment

bcamper commented Oct 9, 2019

elasticmachine commented Oct 9, 2019

💔 Build Failed

elizabetdev left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 9, 2019

💔 Build Failed

snide left a comment

Choose a reason for hiding this comment

elasticmachine commented Oct 9, 2019

💚 Build Succeeded

nreese commented Sep 25, 2019 •

edited

Loading

elizabetdev commented Sep 27, 2019 •

edited

Loading

nreese commented Sep 27, 2019 •

edited

Loading

nreese commented Sep 27, 2019 •

edited

Loading