[Dev UI] Show trace data for the previous run in flow runner

[shrutip90]

Overview

Once we run a flow, we want to show the trace details for the run with the flow runner.

Requirements

1. Show the trace span tree for the run in a pop up drawer on the right, that should cover the existing right side panel containing Schema (Please ignore the styling changes in the trace tree for this task and we will have a separate task for adding the icons and updating the styling for trace tree):

2. On clicking on "Trace details" button on the top left for this panel, we should open a bigger mat-drawer showing the full trace details:

3. Remove "Open in flow runner" button on the root span details since we are already in the flow runner.

Open questions

• Should we pop up the trace on every run or if the user closes it once, should we stop the pop ups?

[hugomurillomtz]

The basics were covered here: https://github.com/FirebasePrivate/genkit-ui/pull/1365. In a follow-up PR, this is to be done:

• When clicking View trace from an error callout, the drawer should open and expand.
• Expand the drawer to the top of the page so it covers the nav bar. See if it can be done through CSS only.
• Once a flow is ran, open the span tree by default.
• When hitting viewTrace, it should open the expanded view trace.
• In the history, there's a view trace button. Load the trace for that particular history item when clicking that button.

[mjchristy]

There seems to be a regression in the bg color with this PR. The main body is now drawer color instead of app bg color.

[hugomurillomtz]

There seems to be a regression in the bg color with this PR. The main body is now drawer color instead of app bg color.

It's fixed!

[hugomurillomtz]

Part one is done: https://github.com/FirebasePrivate/genkit-ui/pull/1365.

[hugomurillomtz]

This is done with: https://github.com/FirebasePrivate/genkit-ui/pull/1408.

However, more changes are coming regarding this for refactoring, like in this PR: https://github.com/FirebasePrivate/genkit-ui/pull/1441