[Maps] add drilldown support map embeddable #75598

nreese · 2020-08-20T19:31:50Z

This PR adds drilldown support to map embeddable allowing users to configure drilldowns for map panels.

To test

Install sample web log data
go to dashboard application and create new dashboard
Add map panel to dashboard
Open map panel context menu and click "Create drilldown". Add one or more drill downs linking to the dashboard "[Logs] Web Traffic"
Save your dashboard. Drilldowns are not active while the dashboard is in edit mode.
Create filters in the map panel. Select the drill down action to navigate to the dashboard when adding filters.

About the UI

Visualization panels are much simplier than map panels. When a pie slice or heatmap square are clicked, there is only a single value or pair of values. As a result, drilldowns for visualization panels provide a popup to allow the user to select the appropriate action after clicking.

This flow does not translate to map panels. The reason is that the map contains much more information for each element then a simple x/y axis. Users are presented with a tooltip or drawing configuration that requires pre-configuration before the filter can be generated. It is a disruptive user experience to present the user with the drilldown popover after dealing with the popover required to create the filter. As a result, this PR places the drilldown action selection as part of the initial UI to create the filter.

When creating spatial filters, if drilldowns are configured, then the user can select the drilldown in the actions select. Upon completing the drawing action, the selected drilldown will be executed with no further user interactions.

To avoid cluttering the tooltip UI, Users can click the right arrow button to view all actions.

elasticmachine · 2020-08-20T19:31:53Z

Pinging @elastic/kibana-gis (Team:Geo)

nreese · 2020-08-20T19:32:40Z

@streamich

Can you review the changes to map_embeddable to make sure I am not abusing the ui_action_service API?

nreese · 2020-08-21T15:36:17Z

@elasticmachine merge upstream

kmartastic · 2020-08-21T16:44:00Z

Tested this out and it looks good.
Success: Create drilldown to map.
Success: Create drilldown from map.
Observation -- need to save dashboard before navigating away.

nreese · 2020-08-24T13:55:40Z

@elasticmachine merge upstream

jsanz · 2020-08-24T15:24:55Z

Tested as well and not much to add, worked smoothly, super cool.

@nreese have you tried to put the drilldown destination below the rest of the tooltip content as used in other visualizations?

nreese · 2020-08-24T15:36:33Z

have you tried to put the drilldown destination below the rest of the tooltip content as used in other visualizations?

That is not possible because the filter context depends on the field. In the screen shot below, notice how you can create a filter from multiple fields. I also did not like the popup after selecting the filter. It messed up the flow the request new data from the user when they have already filled out an UI to create the filter. I like the flow where the user only has a single UI to add filters and they select the action in that flow

thomasneirynck

Really cool!

These are just some minor initial comments about the general flow.

When going into Edit-mode, all the drilldowns disappears from the tooltips.

This seems "off".

(I guess this helps to prevent users navigating away from the dashboard during editing, but that same restriction does not apply anywhere when the user tries to navigate elsewhere in Kibana by e.g. clicking an app-icon in the side-bar)

When there are multiple drilldowns, we show the first one, and a little expando-arrow to see the full list.

I'm wondering if that's what we really want, because it seems to add a hierarchy and level of importance to these actions. Filtering > first drilldown > other drilldowns. I'm not sure if that's the case. Maybe the expando could just collect all drilldowns (clicks don't matter :) )

Note that you also can't "order" drilldowns in the drilldown editor, so the user is a little stuck when creating them (unless they remove and re-create them in the correct order).

Drilldowns are not available when there are no tooltips

A user can create drilldowns when a map layer does not have tooltips.

Do we want all drilldowns for every layer?

Do we want every drilldowns to show up in every tooltip of every layer?

Not sure how important these are. I think in general, it will be somewhat of a difficult concept for users to just "discover" how tooltips layers, and drilldowns relate to eachother. They need to know:

they have to create a tooltip first and only include fields they want to be able to create drilldowns for
the drilldowns need to make sense in the context of the map: --> maps with drilldowns should not contain layers where the configured drilldowns do not make sense

As work-around:

Would it make sense to expand the Maps-app to complain some additional info in the tooltip-card, that refers to drilldowns?
Would it make sense to disable drilldown-creation (if possible) if the map does not have tooltips?

miukimiu

I like the idea of just having the right arrow button to view all actions. The only thing is that when we have long lists the content seems a little bit out of place.

@nreese what do you think of separating each property with a line and align the icons to the right?

nreese · 2020-08-25T16:10:28Z

what do you think of separating each property with a line and align the icons to the right?

Not sure if I like all of the horizontal lines. This adds a lot of noise and visual clutter to the screen.

How about moving the buttons to the left side? Then they sit next to the field name.

nickpeihl · 2020-08-25T16:15:11Z

I think the lines may help align the UI with larger documents such as the agent example. But moving the icons to the left of the field might also mitigate that so the lines might not be necessary.

miukimiu · 2020-08-25T17:04:12Z

Normally the action buttons are on the right side. And because we have an arrowRight icon that opens another screen it makes sense to be on the right side.

Option 1 - We can remove the lines. I think it makes it more difficult to know in some cases to each label property the action belongs.

Option 2 - We can add the same line color of the Layers Panel which is a very light gray

jsanz · 2020-08-25T17:27:28Z

I like the light gray lines

nreese · 2020-08-25T17:56:46Z

Option 2 - We can add the same line color of the Layers Panel which is a very light gray

I like option 2 a lot.

nreese · 2020-08-25T19:18:03Z

@elasticmachine merge upstream

miukimiu · 2020-08-26T11:09:07Z

Hi @nreese,

I created a PR with a few styles that make the table rows to always get the full width: nreese#36.

* Improving tooltip actions row styles * Removind unecessary comment

nreese · 2020-08-26T17:45:24Z

@elasticmachine merge upstream

nreese · 2020-08-27T12:23:13Z

@elasticmachine merge upstream

miukimiu

Thanks for merging the PR. Tested locally and it looks good! 🎉

thomasneirynck

This is really slick_ addition. The interactivity with the dashboards improves leaps and bounds, especially in combination with save&return.

thomasneirynck · 2020-08-28T13:05:38Z

src/plugins/data/public/public.api.md

@@ -78,6 +78,11 @@ import { UnregisterCallback } from 'history';
 import { UnwrapPromiseOrReturn } from '@kbn/utility-types';
 import { UserProvidedValues } from 'src/core/server/types';

+// Warning: (ae-missing-release-tag) "ACTION_GLOBAL_APPLY_FILTER" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)


Are these warnings something we should care about?

I am not sure. I do not understand the entire auto-generated API thing. Since its only exposing a constant I figured it was good enough.

x-pack/plugins/maps/public/components/action_select.tsx

x-pack/plugins/maps/public/connected_components/map/mb/draw_control/draw_control.js

kibanamachine · 2020-08-28T17:00:02Z

💚 Build Succeeded

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

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
maps	696	+1	695

async chunks size

id	value	diff	baseline
maps	3.3MB	+16.2KB	3.3MB

page load bundle size

id	value	diff	baseline
data	1.4MB	+120.0B	1.4MB
maps	297.0KB	+760.0B	296.2KB
total		+880.0B

distributable file count

id	value	diff	baseline
total	53126	+2	53124

History

💚 Build #70821 succeeded 27f1de9
💚 Build #70606 succeeded a937252
💔 Build #70553 failed abdac76
💔 Build #70502 failed 37ecfc5
💚 Build #70371 succeeded 6b1a221

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

* [Maps] add drilldown support * filter actions view * use i18n getter * remove unused changed * tslint fixes * more tslint changes * clean-up and API doc changes * update snapshots * do not show first drilldown in tooltip * add light grey line to seperate feature property rows * Improving tooltip row styles (#36) * Improving tooltip actions row styles * Removind unecessary comment * update snapshot and add functional test * switch UiActionsActionDefinition to Action and remove unneeded checks Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

* [Maps] add drilldown support * filter actions view * use i18n getter * remove unused changed * tslint fixes * more tslint changes * clean-up and API doc changes * update snapshots * do not show first drilldown in tooltip * add light grey line to seperate feature property rows * Improving tooltip row styles (#36) * Improving tooltip actions row styles * Removind unecessary comment * update snapshot and add functional test * switch UiActionsActionDefinition to Action and remove unneeded checks Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co>

…s-for-710 * 'master' of github.com:elastic/kibana: (43 commits) [APM] Chart units don't update when toggling the chart legends (elastic#74931) [ILM] Add support for frozen phase in UI (elastic#75968) Hides advanced json for count metric (elastic#74636) add client-side feature usage API (elastic#75486) [Maps] add drilldown support map embeddable (elastic#75598) [Enterprise Search] Request handler refactors/enhancements + update existing routes to use shared handler (elastic#76106) [Resolver] model `location.search` in redux (elastic#76140) [APM] Prevent imports of public in server code (elastic#75979) fix eslint issue skip flaky suite (elastic#76223) [APM] Transaction duration anomaly alerting integration (elastic#75719) [Transforms] Avoid using "Are you sure" (elastic#75932) [Security Solution][Exceptions] - Fix bug of alerts not updating after closure from exceptions modal (elastic#76145) [plugin-helpers] improve 3rd party KP plugin support (elastic#75019) [docs/getting-started] link to yarn v1 specifically (elastic#76169) [Security_Solution][Resolver] Resolver loading and error state (elastic#75600) Fixes App Search documentation links (elastic#76133) Fix alerts unable to create / update when the name has trailing whitepace(s) (elastic#76079) [Resolver] Fix useSelector usage (elastic#76129) [Enterprise Search] Migrate util and components from ent-search (elastic#76051) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/data_tier_allocation/node_allocation.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx # x-pack/plugins/index_lifecycle_management/public/application/services/policies/types.ts # x-pack/plugins/index_lifecycle_management/public/application/services/policies/warm_phase.ts

nreese added 3 commits August 20, 2020 10:19

[Maps] add drilldown support

d589bc8

filter actions view

d9e2bd3

use i18n getter

ef9cd15

nreese added release_note:enhancement [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 v7.10.0 labels Aug 20, 2020

nreese requested review from jsanz and thomasneirynck August 20, 2020 19:31

nreese requested review from a team as code owners August 20, 2020 19:31

nreese mentioned this pull request Aug 20, 2020

POC map embeddable drilldown support #74346

Closed

4 tasks

nreese requested a review from streamich August 20, 2020 19:37

nreese added 3 commits August 20, 2020 13:41

remove unused changed

aa418b6

tslint fixes

20673fc

more tslint changes

a129eac

nreese requested a review from a team as a code owner August 21, 2020 15:35

elasticmachine and others added 2 commits August 21, 2020 09:36

Merge branch 'master' into map_drilldowns

1700fc6

clean-up and API doc changes

2779982

update snapshots

553b6d9

Merge branch 'master' into map_drilldowns

a4f340a

miukimiu self-requested a review August 24, 2020 14:00

thomasneirynck reviewed Aug 24, 2020

View reviewed changes

nreese requested a review from thomasneirynck August 24, 2020 18:21

nreese mentioned this pull request Aug 24, 2020

[Maps] add message to empty add tooltip card #75809

Merged

miukimiu reviewed Aug 25, 2020

View reviewed changes

elasticmachine and others added 2 commits August 25, 2020 13:18

Merge branch 'master' into map_drilldowns

8efb529

add light grey line to seperate feature property rows

6b1a221

nreese requested a review from miukimiu August 25, 2020 19:48

miukimiu and others added 2 commits August 26, 2020 07:51

Improving tooltip row styles (#36)

37ecfc5

* Improving tooltip actions row styles * Removind unecessary comment

update snapshot and add functional test

abdac76

Merge branch 'master' into map_drilldowns

a937252

Merge branch 'master' into map_drilldowns

27f1de9

miukimiu approved these changes Aug 27, 2020

View reviewed changes

thomasneirynck approved these changes Aug 28, 2020

View reviewed changes

switch UiActionsActionDefinition to Action and remove unneeded checks

e6f548e

nreese merged commit 1e20cd4 into elastic:master Aug 28, 2020

nreese mentioned this pull request Aug 28, 2020

[7.x] [Maps] add drilldown support map embeddable (#75598) #76236

Merged

jsanz mentioned this pull request Sep 15, 2020

[Maps] Filter by geometry is only available with a field on tooltip #77463

Closed

nreese mentioned this pull request Aug 1, 2022

[Maps] Tool tip with large field list exceeds browser screen and cannot be accessed or dismissed #136428

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Maps] add drilldown support map embeddable #75598

[Maps] add drilldown support map embeddable #75598

nreese commented Aug 20, 2020 •

edited

elasticmachine commented Aug 20, 2020

nreese commented Aug 20, 2020 •

edited

nreese commented Aug 21, 2020

kmartastic commented Aug 21, 2020

nreese commented Aug 24, 2020

jsanz commented Aug 24, 2020

nreese commented Aug 24, 2020 •

edited

thomasneirynck left a comment •

edited

miukimiu left a comment

nreese commented Aug 25, 2020

nickpeihl commented Aug 25, 2020

miukimiu commented Aug 25, 2020

jsanz commented Aug 25, 2020

nreese commented Aug 25, 2020

nreese commented Aug 25, 2020

miukimiu commented Aug 26, 2020

nreese commented Aug 26, 2020

nreese commented Aug 27, 2020

miukimiu left a comment

thomasneirynck left a comment

thomasneirynck Aug 28, 2020

nreese Aug 28, 2020

kibanamachine commented Aug 28, 2020

[Maps] add drilldown support map embeddable #75598

[Maps] add drilldown support map embeddable #75598

Conversation

nreese commented Aug 20, 2020 • edited

To test

About the UI

elasticmachine commented Aug 20, 2020

nreese commented Aug 20, 2020 • edited

nreese commented Aug 21, 2020

kmartastic commented Aug 21, 2020

nreese commented Aug 24, 2020

jsanz commented Aug 24, 2020

nreese commented Aug 24, 2020 • edited

thomasneirynck left a comment • edited

Choose a reason for hiding this comment

miukimiu left a comment

Choose a reason for hiding this comment

nreese commented Aug 25, 2020

nickpeihl commented Aug 25, 2020

miukimiu commented Aug 25, 2020

jsanz commented Aug 25, 2020

nreese commented Aug 25, 2020

nreese commented Aug 25, 2020

miukimiu commented Aug 26, 2020

nreese commented Aug 26, 2020

nreese commented Aug 27, 2020

miukimiu left a comment

Choose a reason for hiding this comment

thomasneirynck left a comment

Choose a reason for hiding this comment

thomasneirynck Aug 28, 2020

Choose a reason for hiding this comment

nreese Aug 28, 2020

Choose a reason for hiding this comment

kibanamachine commented Aug 28, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

page load bundle size

distributable file count

History

nreese commented Aug 20, 2020 •

edited

nreese commented Aug 20, 2020 •

edited

nreese commented Aug 24, 2020 •

edited

thomasneirynck left a comment •

edited