feat: Mount layout panels inside the main react tree

[mattrunyon]

This will be useful for any providers/contexts we want to use without needing to wrap each panel in the provider and synchronize them (works w/ redux, becomes painful with react providers like the spectrum provider)

Tested interactions

• Opening panels (tables and charts) by creating the object in a query
• Creating a different panel w/ the same name as an existing panel so the panel contents get replaced
• Reloading the page and checking layout persisted
• Rearranging panels
• Resizing panels
• Opening notebook in preview mode/regular mode
• Promoting notebooks from file explorer and by double clicking the preview tab header
• Maximize/minimize stacks (groups of panels)
• Running code from notebooks
• Opening panels from global panels menu
• Opening panels from console panels menu
• Opening/focusing panel from pill button in console after creating
• Double clicking on the pill button in the console after creating a table/chart
• Linker

[codecov]

Codecov Report

Merging #1229 (f549e60) into main (d304300) will increase coverage by 0.00%.
The diff coverage is 50.00%.

@@           Coverage Diff           @@
##             main    #1229   +/-   ##
=======================================
  Coverage   45.89%   45.89%           
=======================================
  Files         492      492           
  Lines       34371    34373    +2     
  Branches     8566     8565    -1     
=======================================
+ Hits        15775    15776    +1     
- Misses      18545    18546    +1     
  Partials       51       51           

Flag	Coverage Δ
unit	45.89% <50.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/dashboard/src/DashboardPlugin.ts	18.18% <ø> (ø)
packages/dashboard/src/DashboardLayout.tsx	47.27% <50.00%> (+0.05%)	⬆️

[mofojed]

Getting an issue when opening a panel - if I click a table twice from the console, it opens briefly and then opens into a blank panel (on the second click)

[mattrunyon]

Fixed the double clicking a pill button in the console not opening the panel properly. It was an issue of the events triggering rapidly. The first event would open the panel and the 2nd event would replace that panel. However, the layoutConfig did not change between these 2 events, so DashboardLayout did not re-render. The panel was there, just needed something to trigger DashboardLayout re-render. I added an event any time the layout manager adds/removes a react child which is used to update DashboardLayout.

[mofojed]

Still running into an issue - it may be because of the switch from addChild/removeChild with replaceChild? Perhaps we should just change replace to do the add/remove? It may be because of something else. But anyway, issue is really easy to reproduce:

1. Create a plot
2. Open the plot from the button
3. Click the plot button again to "open" it again
4. Close the plot
5. Open the plot with the button again

Expected Results:
4) No errors, area previously occupied by the plot is reclaimed
5) Plot re-opens

Actual Results:
4) Error in the logs, area previously occupied by the plot just goes black
5) Plot will not re-open

2023-05-04-092131_support_logs.zip

[mofojed]

Looks good, but let's wait til Vlad's changes are in and we publish that version, then this will be in the next version.