3 commits

Author	SHA1	Message	Date
Hannah Mudge	1ab448126b	[8.x] [Dashboard][Collapsable Panels] New collision resolution algorithm (#204134) (#205509) ... # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard][Collapsable Panels] New collision resolution algorithm](https://github.com/elastic/kibana/pull/204134) <!--- Backport version: 8.9.8 -->	2025-01-03 10:58:23 -07:00
Kibana Machine	d223cd7df5	[8.x] [Dashboard] [Collapsable Panels] Add embeddable support (#198413) (#203652) ... # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Add embeddable support (#198413)](https://github.com/elastic/kibana/pull/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":"Heenawter@users.noreply.github.com"},"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 https://github.com/elastic/kibana/pull/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 <42973632+kibanamachine@users.noreply.github.com>","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 https://github.com/elastic/kibana/pull/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 <42973632+kibanamachine@users.noreply.github.com>","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 https://github.com/elastic/kibana/pull/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 <42973632+kibanamachine@users.noreply.github.com>","sha":"2a76fe3ee432d0b6746eae660cfe31fc71d15547"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>	2024-12-10 13:12:29 -06:00
Kibana Machine	8f11c13df9	[8.x] [Dashboard] [Collapsable Panels] Switch to using props (#200793) (#201253) ... # Backport This will backport the following commits from `main` to `8.x`: - [[Dashboard] [Collapsable Panels] Switch to using props (#200793)](https://github.com/elastic/kibana/pull/200793) <!--- 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":"2024-11-21T17:27:56Z","message":"[Dashboard] [Collapsable Panels] Switch to using props (#200793)\n\nCloses https://github.com/elastic/kibana/issues/200090\r\n\r\n## Summary\r\n\r\nThis PR migrates the `GridLayout` component a more traditional React\r\ndesign using **props** rather than providing an API. This change serves\r\ntwo purposes:\r\n1. It makes the eventual Dashboard migration easier, since it is more\r\nsimilar to `react-grid-layout`'s implementation\r\n3. It makes the `GridLayout` component less opinionated by moving the\r\nlogic for panel management (i.e. panel placement, etc) to the parent\r\ncomponent.\r\n\r\nI tried to keep efficiency in mind for this comparison, and ensured that\r\nwe are still keeping the number of rerenders **o a minimum**. This PR\r\nshould not introduce **any** extra renders in comparison to the API\r\nversion.\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 all work is contained in the\r\n`examples` plugin.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"549532240cd8bc271a78b74846021c9023e2da64","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.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] Switch to using props","number":200793,"url":"https://github.com/elastic/kibana/pull/200793","mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Switch to using props (#200793)\n\nCloses https://github.com/elastic/kibana/issues/200090\r\n\r\n## Summary\r\n\r\nThis PR migrates the `GridLayout` component a more traditional React\r\ndesign using **props** rather than providing an API. This change serves\r\ntwo purposes:\r\n1. It makes the eventual Dashboard migration easier, since it is more\r\nsimilar to `react-grid-layout`'s implementation\r\n3. It makes the `GridLayout` component less opinionated by moving the\r\nlogic for panel management (i.e. panel placement, etc) to the parent\r\ncomponent.\r\n\r\nI tried to keep efficiency in mind for this comparison, and ensured that\r\nwe are still keeping the number of rerenders **o a minimum**. This PR\r\nshould not introduce **any** extra renders in comparison to the API\r\nversion.\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 all work is contained in the\r\n`examples` plugin.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"549532240cd8bc271a78b74846021c9023e2da64"}},"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/200793","number":200793,"mergeCommit":{"message":"[Dashboard] [Collapsable Panels] Switch to using props (#200793)\n\nCloses https://github.com/elastic/kibana/issues/200090\r\n\r\n## Summary\r\n\r\nThis PR migrates the `GridLayout` component a more traditional React\r\ndesign using **props** rather than providing an API. This change serves\r\ntwo purposes:\r\n1. It makes the eventual Dashboard migration easier, since it is more\r\nsimilar to `react-grid-layout`'s implementation\r\n3. It makes the `GridLayout` component less opinionated by moving the\r\nlogic for panel management (i.e. panel placement, etc) to the parent\r\ncomponent.\r\n\r\nI tried to keep efficiency in mind for this comparison, and ensured that\r\nwe are still keeping the number of rerenders **o a minimum**. This PR\r\nshould not introduce **any** extra renders in comparison to the API\r\nversion.\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 all work is contained in the\r\n`examples` plugin.\r\n\r\n---------\r\n\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>","sha":"549532240cd8bc271a78b74846021c9023e2da64"}}]}] BACKPORT--> Co-authored-by: Hannah Mudge <Heenawter@users.noreply.github.com>	2024-11-21 13:19:50 -06:00