[Dashboard] [Collapsable Panels] Add embeddable support #198413
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Heenawter
added
Feature:Dashboard
…_embeddable-support_2024-10-30
…_embeddable-support_2024-10-30
…_embeddable-support_2024-10-30
Heenawter
force-pushed
the
kbn-grid-layout_embeddable-support_2024-10-30
branch
from
ad4e3de to
8fea110
Compare
Heenawter
commented
Dec 6, 2024
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
TinaHeiligers
approved these changes
Dec 6, 2024
nickpeihl
approved these changes
Dec 9, 2024
There was a problem hiding this comment.
lgtm!
There is a slight lag when moving a panel between the Flights Dashboard collapsable panel and another collapsable panel. Strangely, this only seems to occur with the Flights Dashboard section. I was not able to recreate this with other sections. It's not blocking so I'm approving. But I wonder if you have any ideas or a similar experience?
mount-lag.mp4
So the problem is, the component you are dragging changes parents as soon as you start targetting a different section - even before the panel is dropped. Because of that, both the "old" section and the "new" section have to loop through and render all their panels again since I was able to make the performance here better by memoizing the panels, so only the panel being dragged actually gets remounted in this situation - but every other panel is still getting re-rendered, which I think is causing a bit of a "blip" when one of the sections includes a whole bunch of panels (as the Flights Dashboard section does). There is definitely room for some performance improvement here (we could only change parents on drop, for example, or we could be even more clever about memoization by somehow memoizing all panels without considering section index so that this rerender doesn't have to happen), but we can focus more on this once we are closer to making collapsible sections available in Dashboards :) |
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
Unknown metric groupsESLint disabled line counts
Total ESLint disabled count
History
|
|
Starting backport for target branches: 8.x |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Dec 10, 2024
Closes elastic#190379 ## Summary This PR switches the example grid layout app to render embeddables as panels rather than the simplified mock panel we were using previously. In doing so, I had to add the ability for custom panels to add a custom drag handle via the `renderPanelContents` callback - this required adding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that could be passed down to the `PresentationPanel` component. https://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2 #### New scroll behaviour In elastic#201867, I introduced a small "ease" to the auto-scroll effect that happens when you drag a panel to the top or bottom of the window. However, in that PR, I was using the `smooth` scrolling behaviour, which unfortunately became **very** jittery once I switched to embeddables rather than simple panels (specifically in Chrome - it worked fine in Firefox). The only way to prevent this jittery scroll was to switch to the default scroll behaviour, but this lead to a very **abrupt** stop when the scrollbar reached the top and/or bottom of the page - so, to give the same "gentle" stop that the `smooth` scroll had, I decided to recreate this effect by adding a slow down "ease" when close to the top or bottom of the page: https://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac This effect is accomplished via the parabola formula `y = a(x-h)2 + k` and can be roughly visualized with the following, which shows that the "speed up" ease happens at a much slower pace than the "slow down" ease:  #### Notes about parent changes As I investigated improving the efficiency of the grid layout with embeddables, one of the main things I noticed was that the grid panel was **always** remounted when moving a panel from one collapsible section to another. This lead me (and @ThomThomson) down a rabbit hole of React-reparenting, and we explored a few different options to see if we could change the parent of a component **without** having it remount. In summary, after various experiments and a whole bunch of research, we determined that, due to the reconciliation of the React tree, this is unfortunately impossible. So our priorities will instead have to move to making the remount of `ReactEmbeddableRenderer` **as efficient as possible** via caching, since the remount is inevitable. ### 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) ### Identify risks There are no risks to this PR, since the most significant work is contained in the `examples` plugin. Some changes were made to the presentation panel to allow for custom drag handles, but this isn't actually used in Dashboard - so for now, this code is only called in the example plugin, as well. --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit 2a76fe3)
💚 All backports created successfully
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
Dec 10, 2024
… (#203652) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Add embeddable support (#198413)](#198413) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Hannah Mudge","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-10T17:14:31Z","message":"[Dashboard] [Collapsable Panels] Add embeddable support (#198413)\n\nCloses https://github.com/elastic/kibana/issues/190379\r\n\r\n## Summary\r\n\r\nThis PR switches the example grid layout app to render embeddables as\r\npanels rather than the simplified mock panel we were using previously.\r\nIn doing so, I had to add the ability for custom panels to add a custom\r\ndrag handle via the `renderPanelContents` callback - this required\r\nadding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that\r\ncould be passed down to the `PresentationPanel` component.\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2\r\n\r\n\r\n\r\n#### New scroll behaviour\r\n\r\nIn #201867, I introduced a small\r\n\"ease\" to the auto-scroll effect that happens when you drag a panel to\r\nthe top or bottom of the window. However, in that PR, I was using the\r\n`smooth` scrolling behaviour, which unfortunately became **very**\r\njittery once I switched to embeddables rather than simple panels\r\n(specifically in Chrome - it worked fine in Firefox).\r\n\r\nThe only way to prevent this jittery scroll was to switch to the default\r\nscroll behaviour, but this lead to a very **abrupt** stop when the\r\nscrollbar reached the top and/or bottom of the page - so, to give the\r\nsame \"gentle\" stop that the `smooth` scroll had, I decided to recreate\r\nthis effect by adding a slow down \"ease\" when close to the top or bottom\r\nof the page:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac\r\n\r\nThis effect is accomplished via the parabola formula `y = a(x-h)2 + k`\r\nand can be roughly visualized with the following, which shows that the\r\n\"speed up\" ease happens at a much slower pace than the \"slow down\" ease:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n#### Notes about parent changes\r\nAs I investigated improving the efficiency of the grid layout with\r\nembeddables, one of the main things I noticed was that the grid panel\r\nwas **always** remounted when moving a panel from one collapsible\r\nsection to another. This lead me (and @ThomThomson) down a rabbit hole\r\nof React-reparenting, and we explored a few different options to see if\r\nwe could change the parent of a component **without** having it remount.\r\n\r\nIn summary, after various experiments and a whole bunch of research, we\r\ndetermined that, due to the reconciliation of the React tree, this is\r\nunfortunately impossible. So our priorities will instead have to move to\r\nmaking the remount of `ReactEmbeddableRenderer` **as efficient as\r\npossible** via caching, since the remount is inevitable.\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)\r\n\r\n### Identify risks\r\n\r\nThere are no risks to this PR, since the most significant work is\r\ncontained in the `examples` plugin. Some changes were made to the\r\npresentation panel to allow for custom drag handles, but this isn't\r\nactually used in Dashboard - so for now, this code is only called in the\r\nexample plugin, as well.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"2a76fe3ee432d0b6746eae660cfe31fc71d15547","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Feature:Embedding","Team:Presentation","loe:medium","release_note:skip","impact:high","v9.0.0","backport:prev-minor","Project:Collapsable Panels"],"title":"[Dashboard] [Collapsable Panels] Add embeddable support","number":198413,"url":"https://github.com/elastic/kibana/pull/198413","mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add embeddable support (#198413)\n\nCloses https://github.com/elastic/kibana/issues/190379\r\n\r\n## Summary\r\n\r\nThis PR switches the example grid layout app to render embeddables as\r\npanels rather than the simplified mock panel we were using previously.\r\nIn doing so, I had to add the ability for custom panels to add a custom\r\ndrag handle via the `renderPanelContents` callback - this required\r\nadding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that\r\ncould be passed down to the `PresentationPanel` component.\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2\r\n\r\n\r\n\r\n#### New scroll behaviour\r\n\r\nIn #201867, I introduced a small\r\n\"ease\" to the auto-scroll effect that happens when you drag a panel to\r\nthe top or bottom of the window. However, in that PR, I was using the\r\n`smooth` scrolling behaviour, which unfortunately became **very**\r\njittery once I switched to embeddables rather than simple panels\r\n(specifically in Chrome - it worked fine in Firefox).\r\n\r\nThe only way to prevent this jittery scroll was to switch to the default\r\nscroll behaviour, but this lead to a very **abrupt** stop when the\r\nscrollbar reached the top and/or bottom of the page - so, to give the\r\nsame \"gentle\" stop that the `smooth` scroll had, I decided to recreate\r\nthis effect by adding a slow down \"ease\" when close to the top or bottom\r\nof the page:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac\r\n\r\nThis effect is accomplished via the parabola formula `y = a(x-h)2 + k`\r\nand can be roughly visualized with the following, which shows that the\r\n\"speed up\" ease happens at a much slower pace than the \"slow down\" ease:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n#### Notes about parent changes\r\nAs I investigated improving the efficiency of the grid layout with\r\nembeddables, one of the main things I noticed was that the grid panel\r\nwas **always** remounted when moving a panel from one collapsible\r\nsection to another. This lead me (and @ThomThomson) down a rabbit hole\r\nof React-reparenting, and we explored a few different options to see if\r\nwe could change the parent of a component **without** having it remount.\r\n\r\nIn summary, after various experiments and a whole bunch of research, we\r\ndetermined that, due to the reconciliation of the React tree, this is\r\nunfortunately impossible. So our priorities will instead have to move to\r\nmaking the remount of `ReactEmbeddableRenderer` **as efficient as\r\npossible** via caching, since the remount is inevitable.\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)\r\n\r\n### Identify risks\r\n\r\nThere are no risks to this PR, since the most significant work is\r\ncontained in the `examples` plugin. Some changes were made to the\r\npresentation panel to allow for custom drag handles, but this isn't\r\nactually used in Dashboard - so for now, this code is only called in the\r\nexample plugin, as well.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"2a76fe3ee432d0b6746eae660cfe31fc71d15547"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198413","number":198413,"mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add embeddable support (#198413)\n\nCloses https://github.com/elastic/kibana/issues/190379\r\n\r\n## Summary\r\n\r\nThis PR switches the example grid layout app to render embeddables as\r\npanels rather than the simplified mock panel we were using previously.\r\nIn doing so, I had to add the ability for custom panels to add a custom\r\ndrag handle via the `renderPanelContents` callback - this required\r\nadding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that\r\ncould be passed down to the `PresentationPanel` component.\r\n\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2\r\n\r\n\r\n\r\n#### New scroll behaviour\r\n\r\nIn #201867, I introduced a small\r\n\"ease\" to the auto-scroll effect that happens when you drag a panel to\r\nthe top or bottom of the window. However, in that PR, I was using the\r\n`smooth` scrolling behaviour, which unfortunately became **very**\r\njittery once I switched to embeddables rather than simple panels\r\n(specifically in Chrome - it worked fine in Firefox).\r\n\r\nThe only way to prevent this jittery scroll was to switch to the default\r\nscroll behaviour, but this lead to a very **abrupt** stop when the\r\nscrollbar reached the top and/or bottom of the page - so, to give the\r\nsame \"gentle\" stop that the `smooth` scroll had, I decided to recreate\r\nthis effect by adding a slow down \"ease\" when close to the top or bottom\r\nof the page:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac\r\n\r\nThis effect is accomplished via the parabola formula `y = a(x-h)2 + k`\r\nand can be roughly visualized with the following, which shows that the\r\n\"speed up\" ease happens at a much slower pace than the \"slow down\" ease:\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n#### Notes about parent changes\r\nAs I investigated improving the efficiency of the grid layout with\r\nembeddables, one of the main things I noticed was that the grid panel\r\nwas **always** remounted when moving a panel from one collapsible\r\nsection to another. This lead me (and @ThomThomson) down a rabbit hole\r\nof React-reparenting, and we explored a few different options to see if\r\nwe could change the parent of a component **without** having it remount.\r\n\r\nIn summary, after various experiments and a whole bunch of research, we\r\ndetermined that, due to the reconciliation of the React tree, this is\r\nunfortunately impossible. So our priorities will instead have to move to\r\nmaking the remount of `ReactEmbeddableRenderer` **as efficient as\r\npossible** via caching, since the remount is inevitable.\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)\r\n\r\n### Identify risks\r\n\r\nThere are no risks to this PR, since the most significant work is\r\ncontained in the `examples` plugin. Some changes were made to the\r\npresentation panel to allow for custom drag handles, but this isn't\r\nactually used in Dashboard - so for now, this code is only called in the\r\nexample plugin, as well.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"2a76fe3ee432d0b6746eae660cfe31fc71d15547"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <[email protected]>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Dec 12, 2024
Closes elastic#190379 ## Summary This PR switches the example grid layout app to render embeddables as panels rather than the simplified mock panel we were using previously. In doing so, I had to add the ability for custom panels to add a custom drag handle via the `renderPanelContents` callback - this required adding a `setDragHandles` callback to the `ReactEmbeddableRenderer` that could be passed down to the `PresentationPanel` component. https://github.com/user-attachments/assets/9e2c68f9-34af-4360-a978-9113701a5ea2 #### New scroll behaviour In elastic#201867, I introduced a small "ease" to the auto-scroll effect that happens when you drag a panel to the top or bottom of the window. However, in that PR, I was using the `smooth` scrolling behaviour, which unfortunately became **very** jittery once I switched to embeddables rather than simple panels (specifically in Chrome - it worked fine in Firefox). The only way to prevent this jittery scroll was to switch to the default scroll behaviour, but this lead to a very **abrupt** stop when the scrollbar reached the top and/or bottom of the page - so, to give the same "gentle" stop that the `smooth` scroll had, I decided to recreate this effect by adding a slow down "ease" when close to the top or bottom of the page: https://github.com/user-attachments/assets/cb7bf03f-4a9e-4446-be4f-8f54c0bc88ac This effect is accomplished via the parabola formula `y = a(x-h)2 + k` and can be roughly visualized with the following, which shows that the "speed up" ease happens at a much slower pace than the "slow down" ease:  #### Notes about parent changes As I investigated improving the efficiency of the grid layout with embeddables, one of the main things I noticed was that the grid panel was **always** remounted when moving a panel from one collapsible section to another. This lead me (and @ThomThomson) down a rabbit hole of React-reparenting, and we explored a few different options to see if we could change the parent of a component **without** having it remount. In summary, after various experiments and a whole bunch of research, we determined that, due to the reconciliation of the React tree, this is unfortunately impossible. So our priorities will instead have to move to making the remount of `ReactEmbeddableRenderer` **as efficient as possible** via caching, since the remount is inevitable. ### 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) ### Identify risks There are no risks to this PR, since the most significant work is contained in the `examples` plugin. Some changes were made to the presentation panel to allow for custom drag handles, but this isn't actually used in Dashboard - so for now, this code is only called in the example plugin, as well. --------- Co-authored-by: kibanamachine <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #190379
Summary
This PR switches the example grid layout app to render embeddables as panels rather than the simplified mock panel we were using previously. In doing so, I had to add the ability for custom panels to add a custom drag handle via the
renderPanelContentscallback - this required adding asetDragHandlescallback to theReactEmbeddableRendererthat could be passed down to thePresentationPanelcomponent.GridLayoutEmbeddables.mov
New scroll behaviour
In #201867, I introduced a small "ease" to the auto-scroll effect that happens when you drag a panel to the top or bottom of the window. However, in that PR, I was using the
smoothscrolling behaviour, which unfortunately became very jittery once I switched to embeddables rather than simple panels (specifically in Chrome - it worked fine in Firefox).The only way to prevent this jittery scroll was to switch to the default scroll behaviour, but this lead to a very abrupt stop when the scrollbar reached the top and/or bottom of the page - so, to give the same "gentle" stop that the
smoothscroll had, I decided to recreate this effect by adding a slow down "ease" when close to the top or bottom of the page:AutoScroll.mov
This effect is accomplished via the parabola formula
y = a(x-h)2 + kand can be roughly visualized with the following, which shows that the "speed up" ease happens at a much slower pace than the "slow down" ease:Notes about parent changes
As I investigated improving the efficiency of the grid layout with embeddables, one of the main things I noticed was that the grid panel was always remounted when moving a panel from one collapsible section to another. This lead me (and @ThomThomson) down a rabbit hole of React-reparenting, and we explored a few different options to see if we could change the parent of a component without having it remount.
In summary, after various experiments and a whole bunch of research, we determined that, due to the reconciliation of the React tree, this is unfortunately impossible. So our priorities will instead have to move to making the remount of
ReactEmbeddableRendereras efficient as possible via caching, since the remount is inevitable.Checklist
release_note:*label is applied per the guidelinesIdentify risks
There are no risks to this PR, since the most significant work is contained in the
examplesplugin. Some changes were made to the presentation panel to allow for custom drag handles, but this isn't actually used in Dashboard - so for now, this code is only called in the example plugin, as well.