[dashboard][performance] dashboard grid item performs 2 DOM queries every render

[nreese]

#182535 updated src/plugins/dashboard/public/dashboard_container/component/grid/dashboard_grid_item.tsx with 2 document.querySelector queries every render. In a worse case, I logged this as a 50 millisecond delay but most delays are less then one millisecond.

Instead, these DOM elements should be passed to the DashboardGridItem as props. As an added benefit, props will decouple the DashboardGridItem component from internal selector implementations of the components that are getting searched for.

To see the effect I added some performance metrics around the code

    const start = performance.now();
    const dashboardContainerTopOffset =
      (document.querySelector('.dashboardContainer') as HTMLDivElement)?.offsetTop || 0;
    const globalNavTopOffset =
      (document.querySelector('#app-fixed-viewport') as HTMLDivElement)?.offsetTop || 0;
    const end = performance.now();

    const time = end - start;

    console.log('time (milliseconds)', time);

When rendering web logs sample data dashboard the output is

There is a larger performance penalty when moving a panel around as seen below

[elasticmachine]

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