[Lens] Drag and drop performance improvements

[mbondyra]

Summary

Involves performance changes:

• pass context directly to buttons and not to the whole layer panel to avoid rerendering when context changes
• only pass dragging to getDropProps and don't pass it at all to onDrop (we didn't use it at all)
• memoized some values passed to DragDrop
• memorized ChartSwitch as it was rerendering everytime when workspace is rerendered (so any dragDropContext change)
• memoized suggestionForDraggedField as this function is quite expensive (2~8ms) and was being executed twice on changing the context when dragging started
• moved changeIndexPattern up so it's not being recreated on every render.
• Unit or functional tests were updated or added to match the most common scenarios
• flattening structure of drag drop Context - before activeDropTarget consisted of activeDropTarget and dropTargetsByOrder so everytime we registered dropTargetsByOrder all the elements rerendered. Now activeDropTarget and dropTargetsByOrder are two separate props of a context.
• adding the style below, to avoid the flickering of dragOver-dragEnd that currently is happening when dragging around the drop:

.lnsDragDrop-isDropTarget {
  > * {
    pointer-events: none;
  }
}

before:

after:

• only registering droptargetsByOrder when in keyboardMode - thanks to that context changes only once and not two times when starting a drag by mouse. So we have one rerender instead of two for all the datapanel fields (in the picture you can see 4 & 2 rerenders, that's because I track dragStart (2 rerenders on the picture 'before' and 1 'after') and dragEnd (2 rerenders before and 1 after) as I cannot stop profiler without stopping a drag.

Results

Before:

After:

Example improvement in editor frame: When starting a drag, we have two rerenders - when dragging changes in context, and then when all the dropTargetsByOrder register. The second rerender improved a lot, the first not so much as the dragging props has to be passed down to many components.

before when starting a drag, illustrated 2 rerenders :

after:

The message below disappeared when starting mouse dragging:

When throttling my processor x 4 times slower, the message still appears but times dropped by more than a half and don't appear for dragend at all:

before (repeatedly starting a drag and dropping in empty area):

after:

I have some ideas to further improve performance, but I don't want to do this ahead of time as big changes are awaiting so I'll leave it as it is.

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[mbondyra]

this change is only removing ChildDragDropProvider and removing dragDropContext from buttons' props.

[dej611]

Tested on Chrome and profiled it. There's a good perf boost from master.
I've commented a couple of places where I think it can be improved.

I'm a bit unsure whether all the memoization in x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx is required. For instance things like renderEmptyWorkspace can work ok even without it.

[mbondyra]

Hey @dej611! Thank you for checking my PR! About the memoizations in the workspace_panel component, you’re right – I firstly made it this way because it made sense, and then I switched to moving context in upper component, so it doesn’t matter that much – I don’t have a strong opinion about leaving it or moving it there so I'll just remove it, please take a look again.

[MichaelMarcialis]

LGTM

[mbondyra]

@elasticmachine merge upstream

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 750e0ac
• Storybooks Preview

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
lens	482	485	+3

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
lens	908.1KB	918.2KB	+10.1KB

History

• 💚 Build #107968 succeeded 0b40493
• 💚 Build #107960 succeeded 673019b
• 💚 Build #107925 succeeded 8c6e429
• 💚 Build #107636 succeeded 2e67967
• 💚 Build #107589 succeeded e9a7736

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream