Skip to content

[controls] lazy load control actions#206876

Merged
nreese merged 15 commits intoelastic:mainfrom
nreese:control_actions
Jan 20, 2025
Merged

[controls] lazy load control actions#206876
nreese merged 15 commits intoelastic:mainfrom
nreese:control_actions

Conversation

@nreese
Copy link
Copy Markdown
Contributor

@nreese nreese commented Jan 15, 2025 •
edited by kibanamachine
Loading

  • register control actions with async method
  • move floating actions into controls plugin
  • replace PANEL_HOVER_TRIGGER => CONTROL_HOVER_TRIGGER
  • Load controls in single chunk
    Screenshot 2025-01-16 at 11 40 08 AM

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 15, 2025

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 16, 2025

@elasticmachine merge upstream

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 16, 2025

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 16, 2025

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 16, 2025

/ci

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 16, 2025

/ci

@nreese nreese marked this pull request as ready for review January 16, 2025 23:39
@nreese nreese requested review from a team as code owners January 16, 2025 23:40
@nreese nreese added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// release_note:skip Skip the PR/issue when compiling release notes v9.0.0 backport:version Backport to applied version labels v8.18.0 labels Jan 16, 2025
@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jan 16, 2025

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

andreadelrio
andreadelrio approved these changes Jan 16, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@andreadelrio andreadelrio left a comment

Choose a reason for hiding this comment

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

Sass file moved. LGTM.

@botelastic botelastic Bot added the Feature:Embedding Embedding content via iFrame label Jan 16, 2025
jbudz
jbudz approved these changes Jan 16, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@jbudz jbudz left a comment

Choose a reason for hiding this comment

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

limits.yml LGTM

@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 19, 2025

@elasticmachine merge upstream

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Jan 20, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
controls 373 383 +10
presentationUtil 193 146 -47
total -37

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id before after diff
embeddable 145 140 -5
presentationUtil 102 100 -2
total -7

Async chunks

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

id before after diff
controls 507.7KB 491.3KB -16.4KB
presentationUtil 77.3KB 84.1KB +6.8KB
total -9.5KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
presentationUtil 8 7 -1

Page load bundle

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

id before after diff
controls 14.1KB 11.0KB -3.1KB
embeddable 22.6KB 22.3KB -404.0B
presentationPanel 11.2KB 11.0KB -225.0B
presentationUtil 32.4KB 23.8KB -8.6KB
total -12.3KB
Unknown metric groups

API count

id before after diff
embeddable 172 167 -5
presentationUtil 126 124 -2
total -7

async chunk count

id before after diff
controls 10 1 -9

References to deprecated APIs

id before after diff
controls 16 13 -3

History

ThomThomson
ThomThomson approved these changes Jan 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@ThomThomson ThomThomson left a comment

Choose a reason for hiding this comment

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

Great PR! It reduces both the async and plugin bundle size for the controls plugin, and everything is downloaded in a single chunk which is a great detail!

Comment thread src/platform/plugins/private/presentation_panel/public/panel_actions/triggers.ts
};

export const PANEL_HOVER_TRIGGER = 'PANEL_HOVER_TRIGGER';
export const panelHoverTrigger: Trigger = {
Copy link
Copy Markdown
Contributor

@ThomThomson ThomThomson Jan 20, 2025

Choose a reason for hiding this comment

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

Great to see this moved & renamed.

Comment thread src/platform/plugins/shared/controls/public/actions/clear_control_action.tsx
}

public async execute({ embeddable }: EmbeddableApiContext) {
const { compatibilityCheck } = await import('./clear_control_action_compatibility_check');
Copy link
Copy Markdown
Contributor

@ThomThomson ThomThomson Jan 20, 2025

Choose a reason for hiding this comment

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

So much better for developer experience to have this defined in the same file.

Comment thread src/platform/plugins/shared/controls/public/control_group/components/floating_actions.scss
Copy link
Copy Markdown
Contributor

@ThomThomson ThomThomson Jan 20, 2025

Choose a reason for hiding this comment

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

I bet we could reduce the bundle size further by converting this to emotion!

@nreese nreese merged commit f4df585 into elastic:main Jan 20, 2025
@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jan 20, 2025

Starting backport for target branches: 8.x

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

@kibanamachine
Copy link
Copy Markdown
Contributor

kibanamachine commented Jan 20, 2025

💔 All backports failed

Status Branch Result
❌ 8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 206876

Questions ?

Please refer to the Backport tool documentation

@nreese nreese mentioned this pull request Jan 21, 2025
Merged
@nreese
Copy link
Copy Markdown
Contributor Author

nreese commented Jan 21, 2025

💚 All backports created successfully

Status Branch Result
✅ 8.x

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

Questions ?

Please refer to the Backport tool documentation

nreese added a commit that referenced this pull request Jan 21, 2025
@nreese
[8.x] [controls] lazy load control actions (#206876) (#207277)
c570a34 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[controls] lazy load control actions
(#206876)](#206876)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Nathan
Reese","email":"reese.nathan@elastic.co"},"sourceCommit":{"committedDate":"2025-01-20T21:00:48Z","message":"[controls]
lazy load control actions (#206876)\n\n* register control actions with
async method\r\n* move floating actions into controls plugin\r\n*
replace `PANEL_HOVER_TRIGGER` => `CONTROL_HOVER_TRIGGER`\r\n* Load
controls in single chunk\r\n<img width=\"400\" alt=\"Screenshot
2025-01-16 at 11 40
08 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/3171c9bf-26bc-4c07-950d-c35603cfb65a\"\r\n/>\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f4df5856f249552f01ccb020a3ffd90c1517b71d","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Embedding","Team:Presentation","release_note:skip","v9.0.0","project:embeddableRebuild","backport:version","v8.18.0"],"title":"[controls]
lazy load control
actions","number":206876,"url":"https://github.com/elastic/kibana/pull/206876","mergeCommit":{"message":"[controls]
lazy load control actions (#206876)\n\n* register control actions with
async method\r\n* move floating actions into controls plugin\r\n*
replace `PANEL_HOVER_TRIGGER` => `CONTROL_HOVER_TRIGGER`\r\n* Load
controls in single chunk\r\n<img width=\"400\" alt=\"Screenshot
2025-01-16 at 11 40
08 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/3171c9bf-26bc-4c07-950d-c35603cfb65a\"\r\n/>\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f4df5856f249552f01ccb020a3ffd90c1517b71d"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/206876","number":206876,"mergeCommit":{"message":"[controls]
lazy load control actions (#206876)\n\n* register control actions with
async method\r\n* move floating actions into controls plugin\r\n*
replace `PANEL_HOVER_TRIGGER` => `CONTROL_HOVER_TRIGGER`\r\n* Load
controls in single chunk\r\n<img width=\"400\" alt=\"Screenshot
2025-01-16 at 11 40
08 AM\"\r\nsrc=\"https://github.com/user-attachments/assets/3171c9bf-26bc-4c07-950d-c35603cfb65a\"\r\n/>\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"f4df5856f249552f01ccb020a3ffd90c1517b71d"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
viduni94 pushed a commit to viduni94/kibana that referenced this pull request Jan 23, 2025
@nreese @kibanamachine
@elasticmachine @viduni94
[controls] lazy load control actions (elastic#206876)
3e43f56 
* register control actions with async method
* move floating actions into controls plugin
* replace `PANEL_HOVER_TRIGGER` => `CONTROL_HOVER_TRIGGER`
* Load controls in single chunk
<img width="400" alt="Screenshot 2025-01-16 at 11 40 08 AM"
src="https://github.com/user-attachments/assets/3171c9bf-26bc-4c07-950d-c35603cfb65a"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
@ThomThomson ThomThomson mentioned this pull request Jan 24, 2025
Closed
@nickpeihl nickpeihl mentioned this pull request Jun 17, 2025
Closed
11 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jbudz jbudz jbudz approved these changes

@andreadelrio andreadelrio andreadelrio approved these changes

@ThomThomson ThomThomson ThomThomson approved these changes

Assignees

No one assigned

Labels

backport:version Backport to applied version labels Feature:Embedding Embedding content via iFrame project:embeddableRebuild release_note:skip Skip the PR/issue when compiling release notes Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas t// v8.18.0 v9.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@nreese @elasticmachine @kibanamachine @jbudz @andreadelrio @ThomThomson