Skip to content

fix(studio): experiment detail view UI polish (ASE-365/366/367) - #466

Merged
walston merged 9 commits into
mainfrom
nwalston/ui-bugs
Jun 26, 2026
Merged

fix(studio): experiment detail view UI polish (ASE-365/366/367)#466
walston merged 9 commits into
mainfrom
nwalston/ui-bugs

Conversation

@walston

@walston walston commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Closes #ASE-365, #ASE-366, #ASE-367

Screen.Recording.2026-06-25.at.15.11.31.mov

Summary

Three cosmetic fixes to the experiment detail view, all found while reviewing real switchyard data in the dev instance.

ASE-365 — Input column truncation. Long prompt strings were blowing out row height because truncate depends on white-space: nowrap, which the Text component overrides. Replaced with line-clamp-2 (webkit line clamp, layout-independent) and widened the column from 240 px to 400 px so more of the value is readable before clamping. Full text remains accessible on hover via the existing tooltip.

ASE-366 — Dataset version popover. The dataset version field (often a long sha256 hash) occupied a full KV slot in the header, pushing other metadata off-screen. Removed the standalone slot and moved the version into a hover tooltip on the Dataset Name value.

ASE-367 — Right-align numeric columns. Latency, Tokens, Cost, and evaluator score columns now carry meta: { alignment: 'right' }, which the DataView's existing TableHeaderCell/body cell align prop picks up. Text and date columns are unchanged.

Also fixes a local-dev CORS regression (OPTIONS preflight 500s) caused by FastAPIInstrumentor.instrument_app wrapping the entire ASGI stack outside CORSMiddleware. Skipping the wrapper when no trace exporter is configured unblocks local development without affecting production deployments (see ASTD-267 for the upstream fix).

Test plan

  • Navigate to any experiment with test cases — confirm Input cells are capped at 2 lines with and hovering shows the full value
  • Hover the Dataset Name in the header — confirm a tooltip appears with the dataset version; confirm no standalone Version KV slot
  • Confirm Latency, Tokens, Cost columns have right-aligned headers and values; Case, Input, Status remain left-aligned

Summary by CodeRabbit

  • New Features

    • Added a lazily-loaded route for experiment trace details, with an “Trace” error panel.
  • Enhancements

    • Updated the experiment session “Input” column to a 2-line clamped display, reducing truncation and removing the full-value hover tooltip.
    • Improved experiment detail dataset display by showing dataset version on hover only when available.
    • Right-aligned numeric metrics in experiment sessions (latency, tokens, cost, and evaluator scores) for easier comparison.

@walston
walston requested review from a team as code owners June 25, 2026 18:17
@github-actions github-actions Bot added the fix label Jun 25, 2026
@coderabbitai

coderabbitai Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Experiment sessions update input rendering and numeric alignment, experiment detail metrics conditionally show dataset version in the Dataset Name tooltip, and experiment routes add a lazy-loaded trace detail route.

Changes

Experiment views and trace route

Layer / File(s) Summary
Session table formatting
web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx
ExperimentSessionsDataView renders Input as clamped text, removes the Input tooltip, increases the Input column width, right-aligns latency, token, cost, and evaluator score columns, and reflows the row-click and empty-state JSX.
Dataset name tooltip
web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx
The Dataset Name value renders in a tooltip when present and shows the dataset version in that tooltip when available.
Trace detail route
web/packages/studio/src/routes/groups/experimentRoutes.tsx
The experiment route group adds a lazy-loaded trace detail route and wires it to ROUTES.workspace.experimentTraceDetail with an ErrorPanel titled Trace.

Possibly related PRs

Suggested reviewers

  • nakolean
  • htolentino-nvidia
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main experiment detail view UI polish changes and the referenced ASE issues.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch nwalston/ui-bugs

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx`:
- Around line 46-60: The dataset name is being wrapped in a Tooltip even when
there is no dataset_version to display, which makes the UI suggest hover content
that does not exist. Update ExperimentDetailMetrics so the Tooltip is only
rendered when experiment.dataset_version is present, and keep the plain Text
rendering path for the no-version case; use the existing
experiment.dataset_name, experiment.dataset_version, and Tooltip/Text branches
to locate the change.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: ab9d542c-0022-4cef-9fea-af13625e70ac

📥 Commits

Reviewing files that changed from the base of the PR and between e5608bf and b77c061.

📒 Files selected for processing (3)
  • packages/nmp_common/src/nmp/common/observability/tracing.py
  • web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx
  • web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx

@github-actions

github-actions Bot commented Jun 25, 2026

Copy link
Copy Markdown
Contributor
Suite Lines Covered Line Rate Branch Rate
Unit Tests 21322/27924 76.4% 61.4%
Integration Tests 12349/26693 46.3% 19.7%

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx`:
- Around line 142-145: The full-input trigger in ExperimentSessionsDataView is
mouse-only because the clickable Text relies on onClick when isLong is true.
Update the Text interaction so it is keyboard accessible by either rendering a
proper button/link-style control or by adding focusability, role, and
Enter/Space key handling in the same ExperimentSessionsDataView component. Keep
the existing setInputModalValue and stopPropagation behavior, but ensure the
long-value trigger can be reached and activated without a mouse.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Enterprise

Run ID: b002609f-2527-48d8-bf18-15bc34d08954

📥 Commits

Reviewing files that changed from the base of the PR and between b77c061 and 8eef16a.

📒 Files selected for processing (2)
  • web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx
  • web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
  • web/packages/studio/src/routes/ExperimentDetailRoute/ExperimentDetailMetrics.tsx

Comment thread web/packages/studio/src/components/dataViews/ExperimentSessionsDataView/index.tsx Outdated
@rrhyne

rrhyne commented Jun 25, 2026

Copy link
Copy Markdown
Contributor

That's a lot of popups to try to show the full input. Let's remove the preview and the full view and rely on clicking through the row to see the trace.

@walston
walston force-pushed the nwalston/ui-bugs branch from 8eef16a to 634d45a Compare June 25, 2026 19:59
walston added 9 commits June 25, 2026 15:28
Replaces single-line truncation (truncate + max-w) with line-clamp-2 on
the Input cell in ExperimentSessionsDataView, and widens the column from
240px to 400px so more of the value is visible before clamping.

Also fixes a related local-dev CORS issue (ASE-365 blocker): skip
FastAPIInstrumentor.instrument_app when no trace exporter is configured.
The OTel ASGI wrapper sits outside CORSMiddleware and throws on OPTIONS
preflight route resolution (see ASTD-267), causing 500s on all API
preflight requests in local dev.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
…(ASE-366)

Remove the standalone Dataset Version KV pair from the experiment detail
header. The version is now shown in a Tooltip on the Dataset Name value,
visible on hover. Keeps the header compact when dataset versions are long
(e.g. sha256 hashes).

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
… (ASE-367)

Add meta: { alignment: 'right' } to Latency, Tokens, Cost, and evaluator
score columns. The alignment flows through to both the header cell and body
cells via the DataView's existing meta.alignment support.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
… follow-up)

Long input values caused the tooltip to exceed viewport height, triggering
CSS Anchor Positioning fallback to margin:auto centering — which placed the
tooltip on the trigger and immediately closed it.

Fix: truncate tooltip content at 400 chars. For values over 400 chars, append
a styled hint and wire the cell click to open a Modal with the full text
(click stops row-navigation propagation). Tooltip truncation guarantees
anchor positioning always finds a valid above/below slot.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
…false }

Per nkolean: use per-column meta: { title: false } instead of the table-wide
autoCellTooltips=false approach, so other columns keep their native title
tooltips. The input column manages its own Tooltip.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
…SE-366)

Per CodeRabbit: the Tooltip trigger was unconditionally wrapping the dataset
name even when dataset_version is absent, advertising hover content that
doesn't exist. Render plain text when no version is available.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
…h (ASE-365)

Per rrhyne: tooltip previews and the full-value modal add unnecessary
complexity. Experiments always have trace_ids so the existing row
click-through to trace detail is sufficient. Input cell is now
line-clamp-2 only.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
… in #355)

The route was originally registered in routes/index.tsx as part of #353
but was lost when #355 refactored routes into per-domain group files.
experimentRoutes.tsx never received the entry.

Signed-off-by: Nathan Walston <nwalston@nvidia.com>
Signed-off-by: Nathan Walston <nwalston@nvidia.com>

@rrhyne rrhyne left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great, thanks for making that change.

@walston
walston enabled auto-merge June 26, 2026 15:01
@walston
walston disabled auto-merge June 26, 2026 15:01
@walston
walston force-pushed the nwalston/ui-bugs branch from 649767c to 95a1f66 Compare June 26, 2026 15:02
@walston
walston enabled auto-merge June 26, 2026 18:50
@walston
walston added this pull request to the merge queue Jun 26, 2026
Merged via the queue into main with commit 86df58d Jun 26, 2026
51 checks passed
@walston
walston deleted the nwalston/ui-bugs branch June 26, 2026 19:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants