Add sliding animation to workflow switch component by daniellok-db · Pull Request #20831 · mlflow/mlflow

daniellok-db · 2026-02-16T04:20:00Z

Related Issues/PRs

N/A

What changes are proposed in this pull request?

Add a smooth sliding animation to the sidebar workflow switch when toggling between GenAI and Model training modes. The thumb indicator now slides between positions with a 200ms ease-out CSS transition, providing better visual feedback during interaction.

How is this PR tested?

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

Screen.Recording.2026-02-16.at.2.03.24.PM.mov

Does this PR require documentation update?

Does this PR require updating the MLflow Skills repository?

No. You can skip the rest of this section.
Yes. Please link the corresponding PR or explain how you plan to update it.

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.

Add sliding animation to the workflow type switch in the sidebar for smoother visual feedback when toggling between GenAI and Model training modes.

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 (this PR will be cherry-picked and included in the next patch release)
No (this PR will be included in the next minor release)

Refactor MlflowSidebarWorkflowSwitch to use a sliding thumb indicator with CSS transitions when switching between GenAI and Model training workflow types. The animation provides smoother visual feedback. Co-Authored-By: Claude <noreply@anthropic.com> Signed-off-by: Daniel Lok <daniel.lok@databricks.com>

github-actions · 2026-02-16T04:20:14Z

🛠 DevTools 🛠

Install mlflow from this PR

# mlflow
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20831/merge
# mlflow-skinny
pip install git+https://github.com/mlflow/mlflow.git@refs/pull/20831/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/20831/merge

Copilot

Pull request overview

This PR updates the sidebar workflow type switch UI to use a sliding “thumb” indicator animation when toggling between GenAI and Model training modes, improving visual feedback in the navigation sidebar.

Changes:

Replaced the previous per-option “pill” rendering with a single sliding thumb indicator.
Added CSS transitions for thumb movement/size/background to animate state changes.
Adjusted switch layout/styling (e.g., min-content width, z-index layering) to support the overlay thumb.

Copilot · 2026-02-16T04:23:23Z

mlflow/server/js/src/common/components/MlflowSidebarWorkflowSwitch.tsx

+            width: `${isGenAi ? 39 : 67}%`,
+            background: borderColor,
+            borderRadius: theme.borders.borderRadiusFull,
+            padding: 1,
+            transition: 'transform 200ms ease-out, width 200ms ease-out, background 200ms ease-out',
+            transform: isGenAi ? 'translateX(0)' : `translateX(calc(51%))`,


The thumb sizing/positioning relies on magic percentages (width 39%/67% and translateX(51%)). Note that translateX(%) is relative to the thumb’s own width, so these values won’t reliably line up with the two option widths and can even push the thumb past the container edge. Consider making the two options deterministic widths (e.g., 2 equal grid columns) and animate the thumb using left (0/50%) or translateX(0/100%) with a fixed 50% width (or measure actual option widths) instead.

Suggested change

width: `${isGenAi ? 39 : 67}%`,

background: borderColor,

borderRadius: theme.borders.borderRadiusFull,

padding: 1,

transition: 'transform 200ms ease-out, width 200ms ease-out, background 200ms ease-out',

transform: isGenAi ? 'translateX(0)' : `translateX(calc(51%))`,

width: '50%',

background: borderColor,

borderRadius: theme.borders.borderRadiusFull,

padding: 1,

transition: 'transform 200ms ease-out, width 200ms ease-out, background 200ms ease-out',

transform: isGenAi ? 'translateX(0)' : 'translateX(100%)',

50% / 50% looks bad. it's true that it's hardcoded / magic number but this is not a component we expect to edit further

Copilot · 2026-02-16T04:23:24Z

mlflow/server/js/src/common/components/MlflowSidebarWorkflowSwitch.tsx

+            paddingLeft: theme.spacing.md,
+            whiteSpace: 'nowrap' as const,
+          }}
+          onClick={() => setWorkflowType(WorkflowType.GENAI)}


This option is a clickable <div> (with onClick) but it isn’t keyboard-focusable and has no semantic role/state for assistive tech. Please use a <button type="button"> (or add role, tabIndex, aria-* state, and Enter/Space key handling) so the workflow switch can be operated via keyboard.

Copilot · 2026-02-16T04:23:24Z

mlflow/server/js/src/common/components/MlflowSidebarWorkflowSwitch.tsx

+            paddingLeft: theme.spacing.sm,
+            whiteSpace: 'nowrap' as const,
+          }}
+          onClick={() => setWorkflowType(WorkflowType.MACHINE_LEARNING)}


This option is a clickable <div> (with onClick) but it isn’t keyboard-focusable and has no semantic role/state for assistive tech. Please use a <button type="button"> (or add role, tabIndex, aria-* state, and Enter/Space key handling) so the workflow switch can be operated via keyboard.

github-actions · 2026-02-16T04:28:37Z

Documentation preview for 80d1fd2 is available at:

https://pr-20831--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.

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

B-Step62

The animation change looks good!

Do you think it makes sense to add transition animation for the background color too? It seems it's a bit tricky to do it between linear-gradient and static color, but claude suggested sth like this, which appear to work

--- a/mlflow/server/js/src/MlflowRouter.tsx
+++ b/mlflow/server/js/src/MlflowRouter.tsx
@@ -67,15 +67,25 @@ const MlflowRootLayout = ({
               display: 'flex',
               flexDirection: 'row',
               width: '100%',
-              background:
-                workflowType === WorkflowType.GENAI
-                  ? `linear-gradient(163deg, rgba(66, 153, 224, 0.06) 20%, rgba(202, 66, 224, 0.06) 35%, rgba(255, 95, 70, 0.06) 50%, transparent 80%), ${theme.colors.backgroundSecondary}`
-                  : theme.colors.backgroundSecondary,
+              position: 'relative',
+              background: theme.colors.backgroundSecondary,
             }}
           >
+            <div
+              css={{
+                position: 'absolute',
+                inset: 0,
+                background:
+                  'linear-gradient(163deg, rgba(66, 153, 224, 0.06) 20%, rgba(202, 66, 224, 0.06) 35%, rgba(255, 95, 70, 0.06) 50%, transparent 80%)',
+                opacity: workflowType === WorkflowType.GENAI ? 1 : 0,
+                transition: 'opacity 200ms ease-out',
+                pointerEvents: 'none',
+              }}
+            />
             <MlflowSidebar showSidebar={showSidebar} setShowSidebar={setShowSidebar} />

TomeHirata

Looks great!

TomeHirata · 2026-02-19T08:48:57Z

mlflow/server/js/src/common/components/MlflowSidebarWorkflowSwitch.tsx

+            paddingLeft: theme.spacing.md,
+            whiteSpace: 'nowrap' as const,
+          }}
+          role="button"


q: is it difficult to use the Button component for this use case?

i think for things that require lots of custom styling it's easier to use custom div, for example the buttons come with some default styles for hover, etc which we might not want.

that being said i realize that using custom div means we have to track telemetry ourselves which i forgot to do. i will include it in this PR for convenience

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

Signed-off-by: Daniel Lok <daniel.lok@databricks.com> Co-authored-by: Claude <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings February 16, 2026 04:20

github-actions bot added the size/M label Feb 16, 2026

github-actions bot added area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/feature Mention under Features in Changelogs. labels Feb 16, 2026

Copilot started reviewing on behalf of daniellok-db February 16, 2026 04:20 View session

Copilot AI reviewed Feb 16, 2026

View reviewed changes

daniellok-db requested review from B-Step62 and TomeHirata February 16, 2026 06:03

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

a11y

3f67045

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

B-Step62 approved these changes Feb 19, 2026

View reviewed changes

TomeHirata approved these changes Feb 19, 2026

View reviewed changes

TomeHirata reviewed Feb 19, 2026

View reviewed changes

github-actions bot assigned B-Step62 and TomeHirata Feb 19, 2026

fix

80d1fd2

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

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

Merged via the queue into mlflow:master with commit 810fd0e Feb 20, 2026
17 checks passed

daniellok-db deleted the workflow-animation branch February 20, 2026 05:06

daniellok-db added a commit to daniellok-db/mlflow that referenced this pull request Feb 20, 2026

Add sliding animation to workflow switch component (mlflow#20831)

3035158

Signed-off-by: Daniel Lok <daniel.lok@databricks.com> Co-authored-by: Claude <noreply@anthropic.com>

daniellok-db added a commit that referenced this pull request Feb 20, 2026

Add sliding animation to workflow switch component (#20831)

a2be6a6

Signed-off-by: Daniel Lok <daniel.lok@databricks.com> Co-authored-by: Claude <noreply@anthropic.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sliding animation to workflow switch component#20831

Add sliding animation to workflow switch component#20831
daniellok-db merged 3 commits intomlflow:masterfrom
daniellok-db:workflow-animation

daniellok-db commented Feb 16, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Feb 16, 2026

Install mlflow from this PR

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 16, 2026

Uh oh!

daniellok-db Feb 16, 2026

Uh oh!

Copilot AI Feb 16, 2026

Uh oh!

Copilot AI Feb 16, 2026

Uh oh!

github-actions bot commented Feb 16, 2026 •

edited

Loading

Uh oh!

B-Step62 left a comment

Uh oh!

TomeHirata left a comment

Uh oh!

TomeHirata Feb 19, 2026

Uh oh!

daniellok-db Feb 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

daniellok-db commented Feb 16, 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?

Does this PR require updating the MLflow Skills repository?

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 Feb 16, 2026

Install mlflow from this PR

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

daniellok-db Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

B-Step62 left a comment

Choose a reason for hiding this comment

Uh oh!

TomeHirata left a comment

Choose a reason for hiding this comment

Uh oh!

TomeHirata Feb 19, 2026

Choose a reason for hiding this comment

Uh oh!

daniellok-db Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

daniellok-db commented Feb 16, 2026 •

edited

Loading

github-actions bot commented Feb 16, 2026 •

edited

Loading