[Feat]: implement Test set drawer UI

[ashrafchowdury]

Description

This PR aims to add a feature to save observability traces as testset.

Related Issue

Closes AGE-1337

QA

1. Verify Traces: Ensure traces are visible in the Observability section.

2. Select Traces and Open Test Set Drawer: Select multiple traces using checkboxes and click 'Add Test Set' to open the drawer.

3. Choose or Create Test Set:

   • Select an existing Test Set or create a new one.
   • Use the Data Preview dropdown to view your selected traces and confirm trace keys are automatically mapped in the Mapping section.

4. Manage Columns:

   • For existing Test Sets, select columns; for new Test Sets, add column names.
   • Ensure a warning appears if duplicate columns are selected.

5. Preview Data: Confirm data is visible immediately after column selection and verify preview options work for both all data and specific subsets.

6. Save Test Set: Ensure the Test Set saves successfully without errors.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agenta	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2024 6:09pm
agenta-documentation	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 4, 2024 6:09pm

[ardaerzin]

feels like some cleanup is needed 🙏

[ardaerzin]

Looking good 👍

[mmabrouk]

Thanks, @ashrafchowdury—it looks great.

However, there’s a feature that’s not implemented (maybe it wasn’t clearly communicated in the Figma notes).

We want to make it quick for the user to add new data points to a test set by:
1. Reusing the previous configuration.
2. Offering sensible defaults.

For point 1:
When a user adds a data point to a test set with a certain mapping, the next time they click “Add to Test Set,” we should reuse the same mapping as much as possible. This means:
1. The same test set will be selected by default.
2. We will display the same mapping, as long as both the source and sink of all the mappings exist. If not, we will show the default mapping.

For point 2:

We will show a default mapping. Right now, you only provide defaults for the mapping sources. We would also like to provide defaults for the mapping sinks. Here’s the simple algorithm we would use:

• If the user is creating a new test set, we will name all the columns by default using the last element of the address. For example, for data.input.input.country, the default name for the column will be country.
• If the user is selecting a pre-existing test set, we will use the column with the name of the last element of the address if it exists. For example, for data.input.input.country, if country exists as a column in the test set, we will select country by default. If it does not exist, we will keep the current behavior.

[mmabrouk]

A minor issue. When all columns from the test set are used and the only option is to create a new column, the multi-select is a bit buggy (we show the divider nevertheless). The right behavior is not to show the divider if there is only a Create new option

[mmabrouk]

CleanShot.2024-12-04.at.18.13.33.mp4

Non-parent spans can be selected in the parent view but not added to the test set. I don't see a reason why you could not add them

[ashrafchowdury]

Thanks, @ashrafchowdury—it looks great.

However, there’s a feature that’s not implemented (maybe it wasn’t clearly communicated in the Figma notes).

We want to make it quick for the user to add new data points to a test set by: 1. Reusing the previous configuration. 2. Offering sensible defaults.

For point 1: When a user adds a data point to a test set with a certain mapping, the next time they click “Add to Test Set,” we should reuse the same mapping as much as possible. This means: 1. The same test set will be selected by default. 2. We will display the same mapping, as long as both the source and sink of all the mappings exist. If not, we will show the default mapping.

For point 2:

We will show a default mapping. Right now, you only provide defaults for the mapping sources. We would also like to provide defaults for the mapping sinks. Here’s the simple algorithm we would use:

• If the user is creating a new test set, we will name all the columns by default using the last element of the address. For example, for data.input.input.country, the default name for the column will be country.
• If the user is selecting a pre-existing test set, we will use the column with the name of the last element of the address if it exists. For example, for data.input.input.country, if country exists as a column in the test set, we will select country by default. If it does not exist, we will keep the current behavior.

All features that are related to intelligence are for checkpoint-2, for checkpoint-1 everything will be manual, with no intelligence.
cc: @jp-agenta

[ashrafchowdury]

@mmabrouk Both Divider UI and child node selection issue has been fixed ✅

[mmabrouk]

Thank you @ashrafchowdury ! lgtm