[Dashboard][Collapsable Panels] Kbn Grid Layout Embeddable Integration #190379
Assignees
Labels
Feature:Dashboard
Dashboard related features
impact:critical
This issue should be addressed immediately due to a critical level of impact on the product.
loe:large
Large Level of Effort
Project:Collapsable Panels
Related to the project for adding collapsable sections to Dashboards.
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
Comments
ThomThomson
added
Feature:Dashboard
ThomThomson
changed the title
Heenawter
added
loe:large
Heenawter
added
loe:medium
This was referenced Oct 30, 2024
Heenawter
added a commit
that referenced
this issue
Nov 5, 2024
Closes #190445 ## Summary This PR adds the first steps of a panel management API to the `GridLayout` component: - A method to delete a panel - A method to replace a panel - A method to add a panel with a given size and placement technique (`'placeAtTop' | 'findTopLeftMostOpenSpace'`) - Currently, we only support adding a panel to the first row, since this is all that is necessary for parity with the current Dashboard layout engine - we can revisit this decision as part of the [row API](#195807). - A method to get panel count - This might not be necessary for the dashboard (we'll see), but I needed it for the example plugin to be able to generate suggested panel IDs. It's possible this will get removed 🤷 - The ability to serialize the grid layout state I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future. https://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20 ### Serialization With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the `GridLayout` component). Our goal is to keep `kbn-grid-layout` as **generic** as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to the `GridLayout` component. The dashboard grid layout serialization will be tackled as part of #190446, where it's possible my opinion might change :) This is just a first draft of the `kbn-grid-layout` API, after all. ### Example Grid Layout In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is #190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state :bow: ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]>
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
Nov 5, 2024
…5513) Closes elastic#190445 ## Summary This PR adds the first steps of a panel management API to the `GridLayout` component: - A method to delete a panel - A method to replace a panel - A method to add a panel with a given size and placement technique (`'placeAtTop' | 'findTopLeftMostOpenSpace'`) - Currently, we only support adding a panel to the first row, since this is all that is necessary for parity with the current Dashboard layout engine - we can revisit this decision as part of the [row API](elastic#195807). - A method to get panel count - This might not be necessary for the dashboard (we'll see), but I needed it for the example plugin to be able to generate suggested panel IDs. It's possible this will get removed 🤷 - The ability to serialize the grid layout state I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future. https://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20 ### Serialization With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the `GridLayout` component). Our goal is to keep `kbn-grid-layout` as **generic** as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to the `GridLayout` component. The dashboard grid layout serialization will be tackled as part of elastic#190446, where it's possible my opinion might change :) This is just a first draft of the `kbn-grid-layout` API, after all. ### Example Grid Layout In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is elastic#190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state :bow: ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit a91427d)
kibanamachine
added a commit
that referenced
this issue
Nov 5, 2024
) (#199040) # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Add panel management API (#195513)](#195513) <!--- 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-11-05T18:11:11Z","message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Dashboard","Team:Presentation","loe:medium","release_note:skip","impact:high","v9.0.0","backport:prev-minor","Project:Collapsable Panels"],"title":"[Dashboard] [Collapsable Panels] Add panel management API","number":195513,"url":"https://github.com/elastic/kibana/pull/195513","mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f"}},"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/195513","number":195513,"mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Add panel management API (#195513)\n\nCloses https://github.com/elastic/kibana/issues/190445\r\n\r\n## Summary\r\n\r\nThis PR adds the first steps of a panel management API to the\r\n`GridLayout` component:\r\n- A method to delete a panel\r\n- A method to replace a panel\r\n- A method to add a panel with a given size and placement technique\r\n(`'placeAtTop' | 'findTopLeftMostOpenSpace'`)\r\n- Currently, we only support adding a panel to the first row, since this\r\nis all that is necessary for parity with the current Dashboard layout\r\nengine - we can revisit this decision as part of the [row\r\nAPI](https://github.com/elastic/kibana/issues/195807).\r\n- A method to get panel count\r\n- This might not be necessary for the dashboard (we'll see), but I\r\nneeded it for the example plugin to be able to generate suggested panel\r\nIDs. It's possible this will get removed 🤷\r\n- The ability to serialize the grid layout state\r\n\r\nI only included the bare minimum here that I know will be necessary for\r\na dashboard integration, but it's possible I missed some things and so\r\nthis API will most likely expand in the future.\r\n\r\n\r\n\r\nhttps://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20\r\n\r\n\r\n\r\n\r\n\r\n### Serialization\r\n\r\nWith respect to serialization, there are still some open questions about\r\nhow we want to handle it from the Dashboard side - therefore, in this\r\nPR, I opted to keep the serialization as simple as possible (i.e. both\r\nthe input and serialized output take identical forms for the\r\n`GridLayout` component).\r\n\r\nOur goal is to keep `kbn-grid-layout` as **generic** as possible so,\r\nwhile I considered making the serialize method return the form that the\r\nDashboard expects, I ultimately decided against that; instead, I think\r\nDashboard should be responsible for taking the grid layout's serialized\r\nform and turning it into a dashboard-specific serialization of a grid\r\nlayout and vice-versa for deserializing and sending the initial layout\r\nto the `GridLayout` component.\r\n\r\nThe dashboard grid layout serialization will be tackled as part of\r\nhttps://github.com//issues/190446, where it's possible my\r\nopinion might change :) This is just a first draft of the\r\n`kbn-grid-layout` API, after all.\r\n\r\n### Example Grid Layout\r\n\r\nIn the grid layout example plugin, I integrated the API by adding some\r\npretty bare-bones buttons to each panel in order to ensure the API works\r\nas expected - that being said, I didn't worry too much about the design\r\nof these things and so it looks pretty ugly 😆 My next step is\r\nhttps://github.com//issues/190379, where I will have to\r\nintegrate the grid layout API with the embeddable actions, at which\r\npoint the design will be improved - so this is a very temporary state\r\n:bow:\r\n\r\n### Checklist\r\n\r\n- [x] Any text added follows [EUI's writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing), uses\r\nsentence case text and includes [i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)\r\n\r\n\r\n### For maintainers\r\n\r\n- [ ] This was checked for breaking API changes and was [labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <[email protected]>","sha":"a91427d71bfab9d6a47c3dcdfd5e1a08b8e3ee6f"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <[email protected]>
mgadewoll
pushed a commit
to mgadewoll/kibana
that referenced
this issue
Nov 7, 2024
…5513) Closes elastic#190445 ## Summary This PR adds the first steps of a panel management API to the `GridLayout` component: - A method to delete a panel - A method to replace a panel - A method to add a panel with a given size and placement technique (`'placeAtTop' | 'findTopLeftMostOpenSpace'`) - Currently, we only support adding a panel to the first row, since this is all that is necessary for parity with the current Dashboard layout engine - we can revisit this decision as part of the [row API](elastic#195807). - A method to get panel count - This might not be necessary for the dashboard (we'll see), but I needed it for the example plugin to be able to generate suggested panel IDs. It's possible this will get removed 🤷 - The ability to serialize the grid layout state I only included the bare minimum here that I know will be necessary for a dashboard integration, but it's possible I missed some things and so this API will most likely expand in the future. https://github.com/user-attachments/assets/28df844c-5c12-40fd-b4f4-8fbd1a8abc20 ### Serialization With respect to serialization, there are still some open questions about how we want to handle it from the Dashboard side - therefore, in this PR, I opted to keep the serialization as simple as possible (i.e. both the input and serialized output take identical forms for the `GridLayout` component). Our goal is to keep `kbn-grid-layout` as **generic** as possible so, while I considered making the serialize method return the form that the Dashboard expects, I ultimately decided against that; instead, I think Dashboard should be responsible for taking the grid layout's serialized form and turning it into a dashboard-specific serialization of a grid layout and vice-versa for deserializing and sending the initial layout to the `GridLayout` component. The dashboard grid layout serialization will be tackled as part of elastic#190446, where it's possible my opinion might change :) This is just a first draft of the `kbn-grid-layout` API, after all. ### Example Grid Layout In the grid layout example plugin, I integrated the API by adding some pretty bare-bones buttons to each panel in order to ensure the API works as expected - that being said, I didn't worry too much about the design of these things and so it looks pretty ugly 😆 My next step is elastic#190379, where I will have to integrate the grid layout API with the embeddable actions, at which point the design will be improved - so this is a very temporary state :bow: ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <[email protected]>
Heenawter
added
loe:large
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this issue
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)
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this issue
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
Embeddable Integration
Kbn grid layoutcomes with arenderPanelContentsmethod. Before we can merge this new engine in Dashboard we need to test how it handles rendering Embeddables.As part of this effort, we should remove the drag handle introduced by the hover actions, and use the native drag handle from
kbn grid layoutinstead. This will separate the layout engine actions (drag, resize) from the embeddable ones (edit etc.)We may also need to figure out a way to allow the panels to be dragged via their titles.
The text was updated successfully, but these errors were encountered: