elastic / kibana

Your window into the Elastic Stack
https://www.elastic.co/products/kibana
Other
19.77k stars 8.17k forks source link

[Dashboard][Collapsable Panels] Stop kbn grid layout from re-rendering on drag #191131

Open ThomThomson opened 1 month ago

ThomThomson commented 1 month ago

Problem

kbn grid layout has slightly worse browser performance when dragging a panel than react grid layout. This is because react grid layoutdoesn't cause re-renders when the grid re-arranges until the panel is dropped. This shouldn't be an issue hence the low impact, but if it is there is a fairly easy way to mitigate it.

We can replicate react grid layout's behaviour quite easily by:

  1. Stop re-rendering the whole grid_layout when the layout changes by removing gridLayout from the useBatchedPublishingSubjects call.
  2. Remove the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties from the css call in grid_panel
  3. expose the panelRef from grid_panel using a forward ref
  4. In the grid_row component subscribe to gridLayout$, and on change loop through all panels, and set their grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties directly

This should allow all functionality to happen without re-rendering at all. Theoretically, this will allow us to remove all re-renders, that happen when interacting with the grid.

elasticmachine commented 1 month ago

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