UI: Improve empty states for Traces and Sessions tabs by ridgupta26 · Pull Request #20034 · mlflow/mlflow

ridgupta26 · 2026-01-15T19:16:02Z

Before

emptys-states-part1-before.mp4

After

emptys-states-part1-after.mp4

Related Issues/PRs

#xxx

What changes are proposed in this pull request?

This PR improves the UI consistency and readability of empty states in the Traces and Sessions tabs:

Centered layout: Traces empty state now matches the Sessions tab with proper centering
Content width constraint: Both empty states constrained to 600px max-width for better readability
Updated heading: Changed Traces heading to 'Log traces to this experiment' with H3 styling
Proper text colors: Using design system colors (primary for headings, secondary for body text)
Dark mode fix: Code snippets now use proper duotoneDark theme in dark mode
Code snippet width: Code blocks respect the 600px max-width constraint with horizontal scrolling
Clean empty state: Column headers hidden in Sessions tab when table is empty
Consistent heading colors: Both Traces and Sessions use text-primary color for headings
Design system border: Toolbar border now uses borderDecorative token instead of hardcoded grey100

How is this PR tested?

Existing unit/integration tests
New unit/integration tests
Manual tests

Manual testing:

Manually tested in both light and dark modes
Verified layout consistency between Traces and Sessions empty states
Confirmed all text uses proper design system colors
Verified code snippets display correctly and respect width constraints
Confirmed toolbar border uses design system token

Does this PR require documentation update?

Release Notes

Is this a user-facing change?

No. You can skip the rest of this section.
Yes. Give a description of this change to be included in the release notes for MLflow users.

Improved the visual consistency and readability of empty states in the Traces and Sessions tabs with proper centering, width constraints, updated heading text, correct design system colors, and fixed dark mode theming for code snippets.

What component(s), interfaces, languages, and integrations does this PR affect?

Components

How should the PR be classified in the release notes? Choose one:

rn/none - No description will be included. The PR will be mentioned only by the PR number in the "Small Bugfixes and Documentation Updates" section
rn/breaking-change - The PR will be mentioned in the "Breaking Changes" section
rn/feature - A new user-facing feature worth mentioning in the release notes
rn/bug-fix - A user-facing bug fix worth mentioning in the release notes
rn/documentation - A user-facing documentation change worth mentioning in the release notes

Should this PR be included in the next patch release?

Yes should be selected for bug fixes, documentation updates, and other small changes. No should be selected for new features and larger changes. If you're unsure about the release classification of this PR, leave this unchecked to let the maintainers decide.

What is a minor/patch release?

Minor release: a release that increments the second part of the version number (e.g., 1.2.0 -> 1.3.0).
Bug fixes, doc updates and new features usually go into minor releases.
Patch release: a release that increments the third part of the version number (e.g., 1.2.0 -> 1.2.1).
Bug fixes and doc updates usually go into patch releases.

Yes (this PR will be cherry-picked and included in the next patch release)
No (this PR will be included in the next minor release)

github-actions · 2026-01-15T19:16:29Z

🛠 DevTools 🛠

Install mlflow from this PR

# mlflow
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20034/merge
# mlflow-skinny
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20034/merge#subdirectory=libs/skinny

For Databricks, use the following command:

%sh curl -LsSf https://raw.githubusercontent.com/mlflow/mlflow/HEAD/dev/install-skinny.sh | sh -s pull/20034/merge

github-actions · 2026-01-15T19:16:30Z

@ridgupta26 Thank you for the contribution! Could you fix the following issue(s)?

⚠ DCO check

The DCO check failed. Please sign off your commit(s) by following the instructions here. See https://github.com/mlflow/mlflow/blob/master/CONTRIBUTING.md#sign-your-work for more details.

⚠ Invalid PR template

This PR does not appear to have been filed using the MLflow PR template. Please copy the PR template from here and fill it out.

danielseong1 · 2026-01-15T19:31:49Z

.vscode/settings.json

  "python.testing.unittestEnabled": false,
-  "python.testing.pytestEnabled": true
+  "python.testing.pytestEnabled": true,
+  "cursorpyright.analysis.exclude": [


do we need these changes?

danielseong1

could you add some screenshots to the PR description? I think you will also have to use the PR template here: https://raw.githubusercontent.com/mlflow/mlflow/master/.github/pull_request_template.md

ridgupta26 · 2026-01-15T21:27:51Z

Removed the VSCode settings changes - they were Cursor-specific settings that accidentally got included and are not needed for this PR.

ridgupta26 · 2026-01-15T21:31:23Z

@danielseong1 made updates to the PR format as well as added the screenshots.

github-actions · 2026-01-15T22:25:07Z

Documentation preview for f75c551 is available at:

https://pr-20034--mlflow-docs-preview.netlify.app/docs/latest/

More info

Ignore this comment if this PR does not change the documentation.
The preview is updated when a new commit is pushed to this PR.
This comment was created by this workflow run.
The documentation was built by this workflow run.

B-Step62

@ridgupta26 Overall change looks good, can you fix linter failures?

You can run yarn prettier:check at mlflow/server/js to run JS formatter, and then run pre-commit run --all-files for general linters.

(btw plz ignore "MLflow tests" CI failures, they are transient package download issues)

- Center Traces empty state layout to match Sessions tab - Update Traces heading to 'Log traces to this experiment' with primary color and center alignment - Constrain all content to 600px max width for consistency - Add secondary color to all text paragraphs - Fix code snippet theme switching for dark mode (use 'duotoneDark') - Remove custom style overrides, use design system defaults - Hide column headers in Sessions table when empty - Ensure code blocks properly constrain to 600px in both tabs Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com>

- Use text-primary color for Sessions empty state heading to match Traces tab - Replace hardcoded grey100 border with design system borderDecorative token in TracesV3Toolbar Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com>

Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com>

ridgupta26 · 2026-01-29T04:43:34Z

Fixed DCO issue by rebasing the branch onto the latest master and cherry-picking only the commits that belong to this PR. All checks are now passing! ✅

...rver/js/src/experiment-tracking/components/traces/quickstart/TraceTableGenericQuickstart.tsx

Signed-off-by: Daniel Lok <daniel.lok@databricks.com>

daniellok-db

lgtm

Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com> Signed-off-by: Daniel Lok <daniel.lok@databricks.com> Co-authored-by: ridgupta26 <ridhima.gatech@gmail.com> Co-authored-by: Daniel Lok <daniel.lok@databricks.com>

danielseong1 reviewed Jan 15, 2026

View reviewed changes

github-actions bot assigned danielseong1 Jan 15, 2026

github-actions bot added v3.8.2 area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/bug-fix Mention under Bug Fixes in Changelogs. labels Jan 15, 2026

ridgupta26 force-pushed the fix-empty-states-part1 branch from 86c80db to 94957b4 Compare January 15, 2026 21:27

B-Step62 approved these changes Jan 16, 2026

View reviewed changes

github-actions bot assigned B-Step62 Jan 16, 2026

danielseong1 approved these changes Jan 16, 2026

View reviewed changes

ridgupta26 force-pushed the fix-empty-states-part1 branch from 82ab80f to ce65d6f Compare January 29, 2026 04:28

ridhimagupta added 3 commits January 28, 2026 20:42

Fix empty state heading and toolbar border colors

cd75d8d

- Use text-primary color for Sessions empty state heading to match Traces tab - Replace hardcoded grey100 border with design system borderDecorative token in TracesV3Toolbar Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com>

Fix Prettier formatting in TraceTableGenericQuickstart

d8610a6

Signed-off-by: ridgupta26 <ridhima.gatech@gmail.com>

ridgupta26 force-pushed the fix-empty-states-part1 branch from ce65d6f to d8610a6 Compare January 29, 2026 04:43

daniellok-db reviewed Feb 13, 2026

View reviewed changes

...rver/js/src/experiment-tracking/components/traces/quickstart/TraceTableGenericQuickstart.tsx Outdated Show resolved Hide resolved

Apply suggestion from @daniellok-db

f75c551

Signed-off-by: Daniel Lok <daniel.lok@databricks.com>

daniellok-db approved these changes Feb 13, 2026

View reviewed changes

daniellok-db added this pull request to the merge queue Feb 13, 2026

Merged via the queue into mlflow:master with commit 0b779f9 Feb 13, 2026
15 checks passed

daniellok-db added the v3.10.0 label Feb 20, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Improve empty states for Traces and Sessions tabs#20034

UI: Improve empty states for Traces and Sessions tabs#20034
daniellok-db merged 4 commits intomlflow:masterfrom
ridgupta26:fix-empty-states-part1

ridgupta26 commented Jan 15, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 15, 2026

Install mlflow from this PR

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

danielseong1 Jan 15, 2026

Uh oh!

danielseong1 left a comment •

edited

Loading

Uh oh!

ridgupta26 commented Jan 15, 2026

Uh oh!

ridgupta26 commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026 •

edited

Loading

Uh oh!

B-Step62 left a comment •

edited

Loading

Uh oh!

ridgupta26 commented Jan 29, 2026

Uh oh!

Uh oh!

daniellok-db left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ridgupta26 commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Related Issues/PRs

What changes are proposed in this pull request?

How is this PR tested?

Does this PR require documentation update?

Release Notes

Is this a user-facing change?

What component(s), interfaces, languages, and integrations does this PR affect?

How should the PR be classified in the release notes? Choose one:

Should this PR be included in the next patch release?

Uh oh!

github-actions bot commented Jan 15, 2026

Install mlflow from this PR

Uh oh!

github-actions bot commented Jan 15, 2026

⚠ DCO check

⚠ Invalid PR template

Uh oh!

danielseong1 Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

danielseong1 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ridgupta26 commented Jan 15, 2026

Uh oh!

ridgupta26 commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

B-Step62 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ridgupta26 commented Jan 29, 2026

Uh oh!

Uh oh!

daniellok-db left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ridgupta26 commented Jan 15, 2026 •

edited

Loading

danielseong1 left a comment •

edited

Loading

github-actions bot commented Jan 15, 2026 •

edited

Loading

B-Step62 left a comment •

edited

Loading