Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[kbn-grid-layout] Disable pointer events on drag + resize #208647

Conversation

Heenawter
Copy link
Contributor

@Heenawter Heenawter commented Jan 28, 2025

Summary

This PR greatly improves the performance of kbn-grid-layout on drag + resize by disabling pointer events during these actions. This is especially evident when dragging over panels that have their own mouse event listeners.

Before After
image image
image image
image image

Checklist

  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

@Heenawter Heenawter added release_note:enhancement Feature:Dashboard Dashboard related features performance Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) Project:Collapsable Panels Related to the project for adding collapsable sections to Dashboards. labels Jan 28, 2025
@Heenawter Heenawter self-assigned this Jan 28, 2025
@Heenawter Heenawter changed the title [kbn-grid-layout] Disable pointer events on drag + resize [kbn-grid-layout] Disable pointer events on drag + resize Jan 28, 2025
@Heenawter Heenawter added release_note:skip Skip the PR/issue when compiling release notes and removed release_note:enhancement labels Jan 28, 2025
@Heenawter Heenawter requested a review from mbondyra January 28, 2025 23:56
@Heenawter Heenawter marked this pull request as ready for review January 29, 2025 00:22
@Heenawter Heenawter requested a review from a team as a code owner January 29, 2025 00:22
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-presentation (Team:Presentation)

@Heenawter Heenawter added the loe:small Small Level of Effort label Jan 29, 2025
Copy link
Contributor

@mbondyra mbondyra left a comment

Choose a reason for hiding this comment

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

🎉

@Heenawter Heenawter added bug Fixes for quality problems that affect the customer experience release_note:fix backport:version Backport to applied version labels v8.18.0 v9.0.0 v9.1.0 v8.19.0 and removed release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) bug Fixes for quality problems that affect the customer experience labels Jan 30, 2025
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #21 / TableSearch renders with empty value correctly

Metrics [docs]

Async chunks

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

id before after diff
dashboard 601.9KB 601.8KB -46.0B

History

cc @Heenawter

@nickpeihl nickpeihl self-requested a review February 3, 2025 21:16
@Heenawter Heenawter merged commit 6cc788c into elastic:main Feb 3, 2025
9 checks passed
@Heenawter Heenawter deleted the kbn-grid-layout_disable-pointer-events_2025-01-28 branch February 3, 2025 22:43
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.18, 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13124323790

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 3, 2025
…8647)

## Summary

This PR greatly improves the performance of `kbn-grid-layout` on drag +
resize by disabling pointer events during these actions. This is
especially evident when dragging over panels that have their own mouse
event listeners.

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)
|
![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)
|
|
![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)
|
![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)
|
|
![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)
|
![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)
|

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 6cc788c)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 3, 2025
…8647)

## Summary

This PR greatly improves the performance of `kbn-grid-layout` on drag +
resize by disabling pointer events during these actions. This is
especially evident when dragging over panels that have their own mouse
event listeners.

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)
|
![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)
|
|
![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)
|
![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)
|
|
![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)
|
![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)
|

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 6cc788c)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Feb 3, 2025
…8647)

## Summary

This PR greatly improves the performance of `kbn-grid-layout` on drag +
resize by disabling pointer events during these actions. This is
especially evident when dragging over panels that have their own mouse
event listeners.

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)
|
![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)
|
|
![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)
|
![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)
|
|
![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)
|
![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)
|

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 6cc788c)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.18
8.x
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Feb 4, 2025
) (#209423)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[kbn-grid-layout] Disable pointer events on drag + resize
(#208647)](#208647)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-03T22:43:24Z","message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","performance","Team:Presentation","loe:small","impact:high","v9.0.0","Project:Collapsable
Panels","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[kbn-grid-layout]
Disable pointer events on drag +
resize","number":208647,"url":"https://github.com/elastic/kibana/pull/208647","mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208647","number":208647,"mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
kibanamachine added a commit that referenced this pull request Feb 4, 2025
…8647) (#209422)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[kbn-grid-layout] Disable pointer events on drag + resize
(#208647)](#208647)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-03T22:43:24Z","message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","performance","Team:Presentation","loe:small","impact:high","v9.0.0","Project:Collapsable
Panels","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[kbn-grid-layout]
Disable pointer events on drag +
resize","number":208647,"url":"https://github.com/elastic/kibana/pull/208647","mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208647","number":208647,"mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
kibanamachine added a commit that referenced this pull request Feb 4, 2025
) (#209424)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[kbn-grid-layout] Disable pointer events on drag + resize
(#208647)](#208647)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Hannah
Mudge","email":"Heenawter@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-03T22:43:24Z","message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","release_note:fix","performance","Team:Presentation","loe:small","impact:high","v9.0.0","Project:Collapsable
Panels","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[kbn-grid-layout]
Disable pointer events on drag +
resize","number":208647,"url":"https://github.com/elastic/kibana/pull/208647","mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/208647","number":208647,"mergeCommit":{"message":"[kbn-grid-layout]
Disable pointer events on drag + resize (#208647)\n\n##
Summary\r\n\r\nThis PR greatly improves the performance of
`kbn-grid-layout` on drag +\r\nresize by disabling pointer events during
these actions. This is\r\nespecially evident when dragging over panels
that have their own mouse\r\nevent listeners.\r\n\r\n| Before | After
|\r\n|--------|--------|\r\n|\r\n![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)\r\n|\r\n![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)\r\n|\r\n![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)\r\n|\r\n|\r\n![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)\r\n|\r\n![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] The PR description includes the appropriate
Release Notes section,\r\nand the correct `release_note:*` label is
applied per
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"6cc788c4b17fdb627feeceadd457c425478eefd1"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>
drewdaemon pushed a commit to drewdaemon/kibana that referenced this pull request Feb 6, 2025
…8647)

## Summary

This PR greatly improves the performance of `kbn-grid-layout` on drag +
resize by disabling pointer events during these actions. This is
especially evident when dragging over panels that have their own mouse
event listeners.

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/efea4bd0-e950-4d71-8485-f5f123240e5b)
|
![image](https://github.com/user-attachments/assets/15b044b2-521c-4bf5-a6cb-673c3a2affe4)
|
|
![image](https://github.com/user-attachments/assets/7daa6c96-ff38-4336-beb8-e7378445e589)
|
![image](https://github.com/user-attachments/assets/37bb55c8-e757-4311-ab25-cb0c4cd18f58)
|
|
![image](https://github.com/user-attachments/assets/1fbe721d-690f-4a57-aaab-c07f575e5d41)
|
![image](https://github.com/user-attachments/assets/6bdfdd40-9e58-4750-b152-cec2b12065fc)
|

### Checklist

- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:version Backport to applied version labels Feature:Dashboard Dashboard related features impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. loe:small Small Level of Effort performance Project:Collapsable Panels Related to the project for adding collapsable sections to Dashboards. release_note:fix Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas v8.18.0 v8.19.0 v9.0.0 v9.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants