[Lens] visualize in maps button by nreese · Pull Request #98677 · elastic/kibana

nreese · 2021-04-28T19:49:41Z

Show geo_point and geo_shape fields in Lens field list. Add visualize in maps button in field details. PR also shows a custom workspace panel when users drag geo fields into the workspace. The workspace panel has a drop zone that when the field is dropped into the zone, takes users to the maps application.

elasticmachine · 2021-04-28T19:49:44Z

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

wylieconlon

I know this is in draft, so I've left the smallest review I can.

x-pack/plugins/lens/public/plugin.ts

x-pack/plugins/lens/public/indexpattern_datasource/visualize_geo_field_button.tsx

flash1293 · 2021-04-29T12:04:15Z

@nreese @wylieconlon I wrote down an idea how to implement the second part of this feature (custom workspace drop target that leads to maps): https://gist.github.com/flash1293/3a55232eb1f0162125ad3aa8e1ac3f99

timroes · 2021-04-29T12:10:17Z

I wonder if we really want to show that geo point if there would be no action available for that trigger, or if we should already make listing those fields (and not just disabling the button within the popover) dependant on whether there is an action available?

flash1293 · 2021-04-29T12:13:40Z

Agree with that @timroes - if the action is not available we should hide the field in the list.

nreese · 2021-04-29T14:04:52Z

@elasticmachine merge upstream

nreese · 2021-05-03T14:04:35Z

@elasticmachine merge upstream

flash1293

Looks pretty good already. Do you need some help to polish the UI? Or did you plan to do that after the general feature is working?

One thing we should probably think about: If the user came to Lens from dashboard and goes to maps via the action, the connection to dashboard is lost and the maps "Save" button will prompt them to select a dashboard again. Are we fine with that? Or should we find a way to pass this information along?

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

nreese · 2021-05-04T13:35:20Z

Do you need some help to polish the UI?

I will need help creating the icon from the screen shots in the demo. Also, any other suggestions would be helpful as well but I have mainly been focused on getting the functionality working

flash1293 · 2021-05-04T13:42:48Z

@cchaos or @MichaelMarcialis Can you assist getting the icon out of the mockups here? #80078

nreese · 2021-05-05T22:27:54Z

UI looks good except for the drop zone (not centered and a bit too small in both height and width)

Resolved

This kind of navigation is a prime candidate to break because of unrelated changes, do you think it would make sense adding a small functional test for this (either to the Lens or the maps suite)? Just to check whether the maps app is loaded correctly.

Functional test added to lens suite

One thing we should probably think about: If the user came to Lens from dashboard and goes to maps via the action, the connection to dashboard is lost and the maps "Save" button will prompt them to select a dashboard again. Are we fine with that? Or should we find a way to pass this information along?

I am fine having this work done in a separate PR since it could balloon in scope.

flash1293

Looks almost good to me except for the a11y message when dragging to the new drop zone. The best solution I can think of (maybe someone else has a better idea) is to extend HumandData by something like specialCallout?: string which overwrites the default announcement and then setting it to something like Visualize {field} in Maps

...lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss

flash1293 · 2021-05-06T13:55:06Z

.../lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

+const dragDropIdentifier = {
+  id: 'lnsGeoFieldWorkspace',
+  humanData: {
+    label: i18n.translate('xpack.lens.geoFieldWorkspace.workspaceLabel', {


This is used to construct the screen reader message if the user picks up the field using keyboard and moves it to the drop zone:

We can either add a special case for this here (extending humanData for a special message):

kibana/x-pack/plugins/lens/public/drag_drop/providers/announcements.tsx

Line 530 in 755c186

: i18n.translate('xpack.lens.dragDrop.announce.selectedTarget.defaultNoPosition', {

or think about something that fits into the existing template and makes clear this will move the user to Maps.

MichaelMarcialis

Left some small comments and suggestions below. Also going to send along an updated SVG globe graphic. Noticed some oddities in the original illustration that I'd like to correct. Stay tuned.

.../lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

...lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss

.../lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

...lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

…orkspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is>

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

…orkspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is>

Co-authored-by: Michael Marcialis <michael@marcial.is>

nreese · 2021-05-10T13:53:21Z

@elasticmachine merge upstream

MichaelMarcialis

Left one small comment below. Otherwise, looks good to me. Approving now so I don't hold you up.

.../lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

flash1293

LGTM - tested and works fine. Thanks for this!

nreese · 2021-05-12T13:55:12Z

@elasticmachine merge upstream

kibanamachine · 2021-05-12T15:49:23Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`lens`	496	508	+12

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`lens`	970.4KB	999.5KB	+29.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`lens`	35.1KB	35.1KB	+40.0B

Unknown metric groups

References to deprecated APIs

id	before	after	diff
`canvas`	29	25	-4
`crossClusterReplication`	8	6	-2
`fleet`	4	2	-2
`globalSearch`	4	2	-2
`indexManagement`	12	7	-5
`infra`	5	3	-2
`licensing`	18	15	-3
`monitoring`	109	56	-53
total			-73

History

💚 Build #125224 succeeded 2eb13d5
💔 Build #125189 failed 73b4549
💚 Build #125067 succeeded 6c50c4e
💔 Build #125039 failed 050080b
💚 Build #125029 succeeded 21d16a6

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

* [Lens] visualize in maps button * clean up dependency injection as suggested * add custom workspace render for geo fields * tslint and finish drag and drop for geo field * convert react class to function component * prevent page reload when clicking visualize in maps button * filter allFields instead of using condition to populate fieldTypeNames to fix tslint * clean up UI * fix jest test * globe illustration * UI cleanup * functional test * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * updated globe svg * remove unused * better message for drop zone screen reader * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * tslint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michael Marcialis <michael@marcial.is>

* [Lens] visualize in maps button * clean up dependency injection as suggested * add custom workspace render for geo fields * tslint and finish drag and drop for geo field * convert react class to function component * prevent page reload when clicking visualize in maps button * filter allFields instead of using condition to populate fieldTypeNames to fix tslint * clean up UI * fix jest test * globe illustration * UI cleanup * functional test * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * updated globe svg * remove unused * better message for drop zone screen reader * Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * tslint Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michael Marcialis <michael@marcial.is> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michael Marcialis <michael@marcial.is>

tsullivan · 2021-07-09T18:27:17Z

Hi! I'm just popping in after doing some 7.14 testing. I like that the field is shown in the listing and can be accessed as a way to navigate to Maps: it's a nice, streamlined process users may even learn to access intentionally.

Great work!

[Lens] visualize in maps button

ebded20

nreese added WIP Work in progress Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.0.0 Feature:Lens v7.14.0 reason:enhancement labels Apr 28, 2021

nreese requested a review from a team April 28, 2021 19:49

nreese added release_note:enhancement and removed reason:enhancement labels Apr 28, 2021

wylieconlon reviewed Apr 28, 2021

View reviewed changes

kibanamachine and others added 3 commits April 29, 2021 10:05

Merge branch 'master' into lens_link_to_maps

ae91101

clean up dependency injection as suggested

8762935

add custom workspace render for geo fields

a707d1b

nreese requested a review from a team as a code owner April 30, 2021 20:46

kibanamachine and others added 3 commits May 3, 2021 10:04

Merge branch 'master' into lens_link_to_maps

c97fa4b

tslint and finish drag and drop for geo field

1ebfdea

convert react class to function component

c4fc65c

nreese requested a review from wylieconlon May 3, 2021 20:37

nreese removed the WIP Work in progress label May 3, 2021

prevent page reload when clicking visualize in maps button

76313c5

flash1293 reviewed May 4, 2021

View reviewed changes

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx Show resolved Hide resolved

x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx Show resolved Hide resolved

nreese requested a review from flash1293 May 5, 2021 22:27

flash1293 reviewed May 6, 2021

View reviewed changes

MichaelMarcialis reviewed May 6, 2021

View reviewed changes

nreese and others added 6 commits May 10, 2021 07:52

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

873294c

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

21d16a6

…orkspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is>

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

5fffe4b

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

05f6b5d

…orkspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is>

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

db3ba29

…orkspace_panel/geo_field_workspace_panel.scss Co-authored-by: Michael Marcialis <michael@marcial.is>

Update x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx

ae91b07

Co-authored-by: Michael Marcialis <michael@marcial.is>

kibanamachine and others added 4 commits May 10, 2021 09:53

Merge branch 'master' into lens_link_to_maps

e2f1b3d

updated globe svg

050080b

remove unused

e5a118a

better message for drop zone screen reader

6c50c4e

nreese requested review from MichaelMarcialis and flash1293 May 10, 2021 15:03

MichaelMarcialis approved these changes May 10, 2021

View reviewed changes

.../lens/public/editor_frame_service/editor_frame/workspace_panel/geo_field_workspace_panel.tsx Outdated Show resolved Hide resolved

nreese and others added 2 commits May 10, 2021 15:16

Update x-pack/plugins/lens/public/editor_frame_service/editor_frame/w…

73b4549

…orkspace_panel/geo_field_workspace_panel.tsx Co-authored-by: Michael Marcialis <michael@marcial.is>

tslint

2eb13d5

flash1293 approved these changes May 12, 2021

View reviewed changes

Merge branch 'master' into lens_link_to_maps

b6af7e4

nreese merged commit b097385 into elastic:master May 12, 2021

nreese mentioned this pull request May 12, 2021

[7.x] [Lens] visualize in maps button (#98677) #99951

Merged

nreese mentioned this pull request Mar 31, 2022

Elastic Maps in other applications (Dashboard, Lens) #49242

Closed

Conversation

nreese commented Apr 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

elasticmachine commented Apr 28, 2021

Uh oh!

wylieconlon left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

flash1293 commented Apr 29, 2021

Uh oh!

timroes commented Apr 29, 2021

Uh oh!

flash1293 commented Apr 29, 2021

Uh oh!

nreese commented Apr 29, 2021

Uh oh!

nreese commented May 3, 2021

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nreese commented May 4, 2021

Uh oh!

flash1293 commented May 4, 2021

Uh oh!

nreese commented May 5, 2021

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

flash1293 May 6, 2021

Choose a reason for hiding this comment

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nreese commented May 10, 2021

Uh oh!

MichaelMarcialis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

nreese commented May 12, 2021

Uh oh!

kibanamachine commented May 12, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

References to deprecated APIs

History

Uh oh!

tsullivan commented Jul 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

10 participants

nreese commented Apr 28, 2021 •

edited

Loading