Skip to content

Move Getting Started above experiments list and make collapsible#20691

Merged
B-Step62 merged 5 commits intomlflow:masterfrom
B-Step62:claude/exciting-varahamihira
Feb 16, 2026
Merged

Move Getting Started above experiments list and make collapsible#20691
B-Step62 merged 5 commits intomlflow:masterfrom
B-Step62:claude/exciting-varahamihira

Conversation

@B-Step62
Copy link
Collaborator

@B-Step62 B-Step62 commented Feb 10, 2026

Related Issues/PRs

What changes are proposed in this pull request?

  • Move the "Getting Started" section above the "Recent Experiments" list on the home page so new users see onboarding content first
  • Make the "Getting Started" section collapsible using the design system's Accordion component
  • Chevron icon (v when expanded, > when collapsed) positioned right next to the title text
  • Collapse state persisted in localStorage so it survives page refreshes

Default:
Screenshot 2026-02-10 at 16 52 44

Collapsed:
Screenshot 2026-02-10 at 16 52 49

How is this PR tested?

  • Existing unit/integration tests
  • Manual tests

Manual testing steps:

  1. Open http://localhost:3000 — "Getting Started" appears above "Recent Experiments"
  2. Click chevron to collapse — content hides, chevron changes to >
  3. Click again to expand — content shows, chevron changes to v
  4. Refresh the page — collapsed/expanded state is preserved
  5. Clear localStorage and refresh — section defaults to expanded

Does this PR require documentation update?

  • No. You can skip the rest of this section.

Does this PR require updating the MLflow Skills repository?

  • No. You can skip the rest of this section.

Release Notes

Is this a user-facing change?

  • Yes. Give a description of this change to be included in the release notes for MLflow users.

Move the "Getting Started" section above the experiment list on the home page and make it collapsible with state persisted in localStorage.

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

Components

  • area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server

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

  • rn/feature - A new user-facing feature 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)

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

🛠 DevTools 🛠

Install mlflow from this PR

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

@B-Step62 B-Step62 force-pushed the claude/exciting-varahamihira branch from b9a7d67 to 147d8bd Compare February 10, 2026 07:46
@github-actions
Copy link
Contributor

github-actions bot commented Feb 10, 2026

Documentation preview for 7d729d9 is available at:

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 B-Step62 added v3.10.0 team-review Trigger a team review request labels Feb 12, 2026
B-Step62 and others added 3 commits February 14, 2026 01:33
…lapsible

Move the Getting Started / features section above the experiment list on
the home page so new users see it first. Add a collapsible accordion with
state persisted in localStorage, allowing users to collapse the section
while maintaining visibility.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
The "Explore Features" subtitle was removed from the Getting Started
section, so its i18n entry is no longer needed.

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
@B-Step62 B-Step62 force-pushed the claude/exciting-varahamihira branch from 462c0a9 to f3d4743 Compare February 14, 2026 12:58
[theme],
);

const accordionStyles = useMemo(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

hmm what's the main purpose for all these custom styles? if we just want the arrow to be easier to see, can we just use <Accordion chevronAlignment="left">? otherwise we can just use a simple div that is easier to style than overridding all these styles from design system accordion

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Yeah I have tried that, but having the chevron on left side is a bit strange since it adds an indent to "Getting Started" section only, while other headings like "Welcome to MLflow" and "Recent Experiments" are left aligned.

Using simple div makes sense tho.

Copy link
Collaborator

@daniellok-db daniellok-db left a comment

Choose a reason for hiding this comment

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

lgtm once comments addressed

Address PR review comments:
- Use useLocalStorage hook instead of raw localStorage for
  collapse state persistence
- Replace design system Accordion with a simple button + conditional
  render to avoid complex style overrides

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
@B-Step62 B-Step62 force-pushed the claude/exciting-varahamihira branch from 008d94c to b807d64 Compare February 16, 2026 13:00
Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com>
@B-Step62 B-Step62 added this pull request to the merge queue Feb 16, 2026
Merged via the queue into mlflow:master with commit 6e39118 Feb 16, 2026
14 checks passed
@B-Step62 B-Step62 deleted the claude/exciting-varahamihira branch February 16, 2026 13:28
daniellok-db pushed a commit to daniellok-db/mlflow that referenced this pull request Feb 20, 2026
…low#20691)

Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
daniellok-db pushed a commit that referenced this pull request Feb 20, 2026
)

Signed-off-by: B-Step62 <yuki.watanabe@databricks.com>
Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/feature Mention under Features in Changelogs. size/M team-review Trigger a team review request v3.10.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants