[maps] keydown+scroll to zoom #135330

nreese · 2022-06-28T15:07:11Z

PR adds control+scroll to zoom when map is embedded. Map displays instructions when scrolled

~~I used shift because scroll by bounding box also used shift so I wanted to be consistent with that action~~
Using control to be consistent with other mapping implementations.

elasticmachine · 2022-06-28T21:26:09Z

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

nyurik · 2022-06-28T22:12:39Z

Per my comments during the meeting - in my personal experience, most sites have used CTRL key rather than SHIFT. Shift is often used for various bbox selections. This is mostly a consistency thing rather than a strong preference, and other's experience could be different from mine.

monfera · 2022-06-29T08:10:19Z

I usually see the Command modifier if it requires a modifier key and don't remember seeing the Shift modifier.

What's currently called dashboard in Kibana is not a dashboard, it's an interactive document. In the future, it could evolve toward

a real dashboard that is not scrolling (see the GAH mock by @ryankeairns), maybe unifying with presentations which don't scroll either (basically, single-page presentation with a tiling layout)
a notebook format, which can scroll vertically, and, besides visualizations, may contain editable formulas, value entry (like filters) and, if the visibility of editable formulas/config is off, it regresses into an interactive Report document

A real dashboard should have no need for modifier keys, just like going to Google Maps doesn't need it and it's good.

The need for the modifier key only arises due to the conflicting scrolling functionality, and it's better to remove the conflict than to rely on feature discoverability.

I think we should guide users to avoid scrolling "dashboards" even right now. There are numerous UX problems with scrolly dashboards even putting this aside, such as possibly integral charts or maps scrolling out of page, or missing important signals. Change my mind 😄

A modifier key has a price, more tedious use of something that's more integral to the data experience (zooming) than scrolling an entire dashboard. And there needs to be feature discoverability, which won't be perfect.

Users can handle the capture. It's sometimes the case that there is a scrollable list on a document, that doesn't need a modifier key either. Users know how to deal with it.

Foregoing a modifier key solves the discoverability issue as well. A modifier key needs to be advertised; some tools add a map overlay if they encounter a zoom attempt without the modifier key, which is I think a UX with heavy tradeoffs.

jsanz · 2022-06-29T08:31:52Z

just like going to Google Maps doesn't need it and it's good.

Not always, for mobile screens they request users to use two fingers as described here

There is a Leaflet plugin to get the same behavior using Control/Command key or two fingers for mobile devices.

I'll share more examples on how this is handled to support one modifier or the other, if I found them.

nickpeihl · 2022-06-29T16:12:20Z

Google Maps uses ctrl+scroll on Windows and Linux and cmd+scroll on Mac to zoom.

Mapbox also uses ctrl+scoll (cmd+scroll on Mac) for zooming.

Maplibre should be soon adding support for cooperative gestures. The pending PR will also use ctrl+scroll (cmd+scoll on Mac) to zoom.

OpenLayers supports scroll zoom with a modifier key. It appears ctrl (cmd on Mac) is the default modifier.

As @jsanz noted, there is a plugin for Leaflet that supports cooperative gestures. It also defaults to ctrl+scroll (cmd+scroll on Mac) for zoom.

ArcGIS is the oddity of this group. Scrolling on their webmaps pans the map North and South. 😖 However, shift+scroll will zoom the map. 🤷

I would prefer to follow the more popular convention of using ctrl+scroll on Windows/Linux and cmd+scroll on Mac to enable zoom on a dashboard.

nreese · 2022-06-29T16:43:52Z

I would prefer to follow the more popular convention of using ctrl+scroll on Windows/Linux and cmd+scroll on Mac to enable zoom on a dashboard.

Thanks for looking at other implementations. Agree, let's be consistent. I will update the PR to use ctrl+scroll on Windows/Linux and cmd+scroll on Mac.

The need for the modifier key only arises due to the conflicting scrolling functionality, and it's better to remove the conflict than to rely on feature discoverability.

Scroll-less dashboards is a laudable goal. Until that goal is achieved, keydown+scroll is a big step forward in usability.

nreese · 2022-06-29T18:12:01Z

@elasticmachine merge upstream

…ling

nickpeihl

lgtm! just one small nit.

code review and tested map embeddables in dashboard and SIEM with chrome.

.../plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx

jsanz

Apart from the comment about the size of the text already noted in Nick's review , this looks great to me 👏.

MichaelMarcialis

@nreese: Nice addition! I've left some style and markup suggestions below for your review. Let me know if you have any questions. Thanks!

x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss

.../plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx

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

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

nreese · 2022-06-30T17:05:00Z

@elasticmachine merge upstream

nreese · 2022-06-30T17:10:23Z

Nice addition! I've left some style and markup suggestions below for your review. Let me know if you have any questions. Thanks!

Thanks for all the great changes. I have merged them and everything looks very polished now.

MichaelMarcialis

LGTM! Thanks for making those changes.

kibana-ci · 2022-06-30T18:18:37Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`maps`	861	862	+1

Async chunks

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

id	before	after	diff
`maps`	2.6MB	2.6MB	+1.7KB

History

💚 Build #54632 succeeded 78f4210
💛 Build #54405 was flaky 356f852
💚 Build #53951 succeeded e0c1ab1
💔 Build #53947 failed 37285bb
💔 Build #53943 failed fbffdf7
💔 Build #53925 failed 2b03008

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

* [maps] shift+scroll to zoom * content * only enable keydown scroll zoom in embeddable * scss lint fix * one more scss lint fix * replace shift with control * lint * use smaller css transition so message hides faster when keydown+scrolling * h3 and small text * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/_index.scss Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * Update x-pack/plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx Co-authored-by: Michael Marcialis <michael@marcial.is> * clean-up Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Michael Marcialis <michael@marcial.is>

nreese added 5 commits June 27, 2022 15:43

[maps] shift+scroll to zoom

23d8474

content

2b03008

only enable keydown scroll zoom in embeddable

fbffdf7

scss lint fix

37285bb

one more scss lint fix

e0c1ab1

nreese marked this pull request as ready for review June 28, 2022 21:22

nreese requested review from a team as code owners June 28, 2022 21:22

nreese added [Deprecated-Use Team:Presentation]Team:Geo Former Team Label for Geo Team. Now use Team:Presentation v8.4.0 labels Jun 28, 2022

nreese added release_note:enhancement backport:skip This commit does not require backporting labels Jun 28, 2022

nreese changed the title ~~[maps] shift+scroll to zoom~~ [maps] keydown+scroll to zoom Jun 29, 2022

kibanamachine and others added 2 commits June 29, 2022 14:12

Merge branch 'main' into keydown_scroll_zoom

6600def

replace shift with control

9aa80d7

nreese requested a review from nickpeihl June 29, 2022 18:30

nreese added 2 commits June 29, 2022 12:32

lint

8762b6d

use smaller css transition so message hides faster when keydown+scrol…

356f852

…ling

nickpeihl approved these changes Jun 29, 2022

View reviewed changes

.../plugins/maps/public/connected_components/mb_map/keydown_scroll_zoom/keydown_scroll_zoom.tsx Outdated Show resolved Hide resolved

jsanz approved these changes Jun 30, 2022

View reviewed changes

h3 and small text

78f4210

nreese enabled auto-merge (squash) June 30, 2022 15:13

nreese disabled auto-merge June 30, 2022 15:13

MichaelMarcialis reviewed Jun 30, 2022

View reviewed changes

nreese and others added 4 commits June 30, 2022 11:04

Update x-pack/plugins/maps/public/connected_components/mb_map/keydown…

cb5ddb3

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

Update x-pack/plugins/maps/public/connected_components/mb_map/keydown…

95bc2c4

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

Update x-pack/plugins/maps/public/connected_components/mb_map/keydown…

c2d3786

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

Update x-pack/plugins/maps/public/connected_components/mb_map/keydown…

7174127

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

kibanamachine and others added 2 commits June 30, 2022 13:05

Merge branch 'main' into keydown_scroll_zoom

61e157e

clean-up

c1db556

nreese requested a review from MichaelMarcialis June 30, 2022 17:10

MichaelMarcialis approved these changes Jun 30, 2022

View reviewed changes

nreese merged commit 4a82f98 into elastic:main Jun 30, 2022

nreese mentioned this pull request Nov 9, 2022

[TableListView] Enhance tag filtering #142108

Merged

nreese mentioned this pull request Feb 21, 2023

Unable to Zoom in/out when using Mouse Wheel in Kibana Dashboards and in Maximize Panel #151687

Closed

sophiec20 added the Feature:Maps label Aug 21, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[maps] keydown+scroll to zoom #135330

[maps] keydown+scroll to zoom #135330

nreese commented Jun 28, 2022 •

edited

Loading

elasticmachine commented Jun 28, 2022

nyurik commented Jun 28, 2022

monfera commented Jun 29, 2022

jsanz commented Jun 29, 2022

nickpeihl commented Jun 29, 2022

nreese commented Jun 29, 2022

nreese commented Jun 29, 2022

nickpeihl left a comment

jsanz left a comment

MichaelMarcialis left a comment

nreese commented Jun 30, 2022

nreese commented Jun 30, 2022

MichaelMarcialis left a comment

kibana-ci commented Jun 30, 2022

[maps] keydown+scroll to zoom #135330

[maps] keydown+scroll to zoom #135330

Conversation

nreese commented Jun 28, 2022 • edited Loading

elasticmachine commented Jun 28, 2022

nyurik commented Jun 28, 2022

monfera commented Jun 29, 2022

jsanz commented Jun 29, 2022

nickpeihl commented Jun 29, 2022

nreese commented Jun 29, 2022

nreese commented Jun 29, 2022

nickpeihl left a comment

Choose a reason for hiding this comment

jsanz left a comment

Choose a reason for hiding this comment

MichaelMarcialis left a comment

Choose a reason for hiding this comment

nreese commented Jun 30, 2022

nreese commented Jun 30, 2022

MichaelMarcialis left a comment

Choose a reason for hiding this comment

kibana-ci commented Jun 30, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

nreese commented Jun 28, 2022 •

edited

Loading