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:
Stop re-rendering the whole grid_layout when the layout changes by removing gridLayout from the useBatchedPublishingSubjects call.
Remove the grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties from the css call in grid_panel
expose the panelRef from grid_panel using a forward ref
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.
Problem
kbn grid layout
has slightly worse browser performance when dragging a panel thanreact grid layout
. This is becausereact grid layout
doesn'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:grid_layout
when the layout changes by removinggridLayout
from theuseBatchedPublishingSubjects
call.grid-column-start
,grid-column-end
,grid-row-start
, andgrid-row-end
properties from thecss
call ingrid_panel
panelRef
fromgrid_panel
using a forward refgrid_row
component subscribe togridLayout$
, and on change loop through all panels, and set theirgrid-column-start
,grid-column-end
,grid-row-start
, andgrid-row-end
properties directlyThis 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.