Rearrange DOM to fix widget events in all environments

[chrisgervang]

Closes #8877

Background

Exploring a way to exclude widgets from the deck event manager and push it above maplibre. Currently mouse event on a widget performs deck picking, which is an unwanted interaction.

propagation_short.mov

Rearranging the DOM so that the deck picker and widgets are peer elements fix the deck picking issue. Also, by nesting the deck children, such as react-map-gl in reversed controlled configuration, the deck widgets events aren't blocked by maplibre.

<!-- react-map-gl reverse controlled DOM -->
<div id="react-deckgl-wrapper">
  <div class="event-manager-root">
    <canvas class="deck-overlay" />
    <div class="react-deck-view">
      <div class="react-map-gl-root" />
      <div class="some-other-child-component" />
    </div>
  </div>
  <div class="deck-widgets-container">
    <div class="deck-view-widgets">
      <div class="fill"/>
      <div class="top-left"/>
    </div>
  </div>
</div>

react-widget-dom.mov

---

Flavors to test:

• no basemap
• React reverse controlled
• MapboxOverlay overlaid
• MapboxOverlay interleaved
• Script tag
• Python/Jupyter notebook
• GoogleMapsOverlay

Change List

• Core
  • If present as a child of parent, selects an .event-manager-root element for EventManager to use for picking.
  • If present as a child of parent, selects an .deck-widgets-container element for WidgetManager to add widgets to.
• React
  • Nests deck overlay and <DeckGL/> children under .event-manager-root
  • Nests deck widgets under .deck-widgets-container

[Pessimistress]

Should this be this.props.parent?.querySelector() like the eventRoot? Searching under document.body is suspicious...