Add dark theme to experiment pane #10380

daniellok-db · 2023-11-14T04:46:24Z

🛠 DevTools 🛠

Install mlflow from this PR

pip install git+https://github.com/mlflow/mlflow.git@refs/pull/10380/merge

Checkout with GitHub CLI

gh pr checkout 10380

Related Issues/PRs

What changes are proposed in this pull request?

The previous PR was getting quite large as there's a number of things to fix, so I'm going to be breaking it up into smaller PRs. This one just addresses the experiment sidebar:

I also updated the tests to move away from enzyme.

How is this PR tested?

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

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.

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

Components

Interface

area/uiux: Front-end, user experience, plotting, JavaScript, JavaScript dev server
area/docker: Docker use across MLflow's components, such as MLflow Projects and MLflow Models
area/sqlalchemy: Use of SQLAlchemy in the Tracking Service or Model Registry
area/windows: Windows support

Language

language/r: R APIs and clients
language/java: Java APIs and clients
language/new: Proposals for new client languages

Integrations

integrations/azure: Azure and Azure ML integrations
integrations/sagemaker: SageMaker integrations
integrations/databricks: Databricks integrations

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

…10372) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com>

Signed-off-by: B-Step62 <yuki.watanabe@databricks.com> Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com> Co-authored-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com>

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

github-actions · 2023-11-14T04:46:42Z

Documentation preview for db2bcbb will be available here when this CircleCI job completes successfully.

More info

Ignore this comment if this PR does not change the documentation.
It takes a few minutes for the preview to be available.
The preview is updated when a new commit is pushed to this PR.
This comment was created by https://github.com/mlflow/mlflow/actions/runs/6871431326.

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

…ance type validation (mlflow#10379) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com> Signed-off-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com>

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

hubertzub-db

left few nits, looks well otherwise!

hubertzub-db · 2023-11-14T05:29:28Z

mlflow/server/js/src/experiment-tracking/components/ExperimentListView.tsx

@@ -174,7 +174,7 @@ export class ExperimentListView extends Component<Props, State> {
    return (
      <div
        css={isActive ? this.activeExperimentListItem : this.inactiveExperimentListItem}
-        data-test-id={dataTestId}
+        data-testid={dataTestId}


thanks 🙏

hubertzub-db · 2023-11-14T05:30:02Z

mlflow/server/js/src/experiment-tracking/components/ExperimentListView.tsx

@@ -392,6 +391,11 @@ const classNames = {
    justifySelf: 'end',
    marginRight: '10px',
  },
+  icon: (theme: Theme) => ({
+    color: theme.colors.actionDefaultTextDefault,
+    fontSize: 24,


(should evaluate to 24 as well)

Suggested change

fontSize: 24,

fontSize: theme.general.iconSize,

hubertzub-db · 2023-11-14T05:33:01Z

mlflow/server/js/src/experiment-tracking/components/HomeView.tsx

@@ -63,8 +64,8 @@ class HomeView extends Component<HomeViewProps> {
      );
    }
    return (
-      <div css={{ display: 'flex', height: 'calc(100% - 60px)' }}>
-        <div css={{ height: '100%', paddingTop: 24, display: 'flex' }}>
+      <div css={styles.homeContainer}>


We've eventually stopped using automatic (theme) => styleObject function pattern for emotion because jest runtime hates it badly and produces super noisy logs. Whenever possible, please just get theme object e.g. from hook and use

Suggested change

<div css={styles.homeContainer}>

<div css={styles.homeContainer(theme)}>

ah and for class components, you can use HoC

hubertzub-db · 2023-11-14T05:38:22Z

mlflow/server/js/src/experiment-tracking/components/HomeView.test.tsx

    );
-    expect(wrapper.length).toBe(1);
+    expect(screen.getByAltText('No experiments found.')).not.toBeNull();


Suggested change

expect(screen.getByAltText('No experiments found.')).not.toBeNull();

expect(screen.getByAltText('No experiments found.')).toBeInTheDocument();

Signed-off-by: chenmoneygithub <chen.qian@databricks.com>

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

daniellok-db · 2023-11-14T06:49:09Z

mlflow/server/js/src/experiment-tracking/components/ExperimentListView.tsx

@@ -230,19 +228,21 @@ export class ExperimentListView extends Component<Props, State> {

  render() {
    const { hidden } = this.state;
+    const { activeExperimentIds, designSystemThemeApi } = this.props;


@hubertzub-db is this the right way to use HoC (what does it stand for btw)?

yeah, it works! thanks! HoC means Higher-order-Component which is an old (pre-hook) technique for wrapping components in other (higher-order) ones to inject features within

…mlflow#10362) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com>

Signed-off-by: Serena Ruan <serena.rxy@gmail.com>

Signed-off-by: Liang Zhang <liang.zhang@databricks.com>

) Signed-off-by: chenmoneygithub <chen.qian@databricks.com> Signed-off-by: Chen Qian <chenmoney@google.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>

Signed-off-by: Prithvi Kannan <prithvi.kannan@databricks.com>

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

…10394) Signed-off-by: chenmoneygithub <chen.qian@databricks.com>

This reverts commit 1c33add.

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

Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com> Signed-off-by: B-Step62 <yuki.watanabe@databricks.com> Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com> Signed-off-by: Daniel Lok <daniel.lok@databricks.com> Signed-off-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com> Signed-off-by: chenmoneygithub <chen.qian@databricks.com> Signed-off-by: Serena Ruan <serena.rxy@gmail.com> Signed-off-by: Liang Zhang <liang.zhang@databricks.com> Signed-off-by: Chen Qian <chenmoney@google.com> Signed-off-by: Prithvi Kannan <prithvi.kannan@databricks.com> Co-authored-by: Haxatron <haxatron1@gmail.com> Co-authored-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com> Co-authored-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com> Co-authored-by: Chen Qian <chenmoney@google.com> Co-authored-by: Serena Ruan <82044803+serena-ruan@users.noreply.github.com> Co-authored-by: Liang Zhang <liang.zhang@databricks.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com> Co-authored-by: Prithvi Kannan <46332835+prithvikannan@users.noreply.github.com>

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

Haxatron and others added 4 commits November 14, 2023 08:26

Further fix validate path on Windows (mlflow#10330)

b68b435

Temporarily pin pydantic in CI due to 2.5.0 breaking changes (mlflow#…

2cd6744

…10372) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com>

Update doc requirements and guide to install pandoc (mlflow#10348)

4c38b0c

Signed-off-by: B-Step62 <yuki.watanabe@databricks.com> Signed-off-by: Yuki Watanabe <31463517+B-Step62@users.noreply.github.com> Co-authored-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com>

add dark theme to experiment pane

c6539ce

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

daniellok-db requested a review from hubertzub-db November 14, 2023 04:46

github-actions bot added area/uiux Front-end, user experience, plotting, JavaScript, JavaScript dev server rn/none List under Small Changes in Changelogs. labels Nov 14, 2023

daniellok-db and others added 5 commits November 14, 2023 12:47

fix

55b8c4f

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

undo

5b28c70

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

remove unnecessary change

1b8ac78

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

Fix the Gateway config validator pre-check for OpenAI to perform inst…

ec7fe8e

…ance type validation (mlflow#10379) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com> Signed-off-by: Ben Wilson <39283302+BenWilson2@users.noreply.github.com>

collapsed button

bdb5dfe

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

hubertzub-db approved these changes Nov 14, 2023

View reviewed changes

chenmoneygithub and others added 3 commits November 13, 2023 22:05

Fix the problem that async logging has hanging thread (mlflow#10374)

23eef04

Signed-off-by: chenmoneygithub <chen.qian@databricks.com>

address comments

3699adf

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

fix

7c6df91

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

daniellok-db commented Nov 14, 2023

View reviewed changes

BenWilson2 and others added 8 commits November 14, 2023 11:00

Fix regression in downloading single files from models artifact store (…

d668245

…mlflow#10362) Signed-off-by: Ben Wilson <benjamin.wilson@databricks.com>

format docs (mlflow#10375)

148b69a

Signed-off-by: Serena Ruan <serena.rxy@gmail.com>

Add built in metric ndcg_at_k to retriever evaluation (mlflow#10284)

5c0b7e2

Signed-off-by: Liang Zhang <liang.zhang@databricks.com>

Enable system metrics logging for resuming an existing run (mlflow#10312

373c654

) Signed-off-by: chenmoneygithub <chen.qian@databricks.com> Signed-off-by: Chen Qian <chenmoney@google.com> Co-authored-by: Harutaka Kawamura <hkawamura0130@gmail.com>

Simplify score_model_on_one_payload (mlflow#10381)

8951815

Signed-off-by: Prithvi Kannan <prithvi.kannan@databricks.com>

Fix promptlab pyfunc models not working for chat routes (mlflow#10346)

7d96e75

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

Use databricks clusters list-zones to validate credentials (mlflow#…

1bed5db

…10394) Signed-off-by: chenmoneygithub <chen.qian@databricks.com>

Merge branch 'master' of github.com:mlflow/mlflow into experiment-pane

db2bcbb

daniellok-db merged commit 1c33add into mlflow:dark-mode Nov 15, 2023
4 of 23 checks passed

daniellok-db added a commit that referenced this pull request Nov 15, 2023

Revert "Add dark theme to experiment pane (#10380)"

c7c20e5

This reverts commit 1c33add.

daniellok-db mentioned this pull request Nov 15, 2023

Revert "Add dark theme to experiment pane" #10396

Merged

daniellok-db added a commit that referenced this pull request Nov 15, 2023

Fix experiment pane (Duplicate #10380) (#10397)

81217ba

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

daniellok-db added a commit that referenced this pull request Nov 15, 2023

Fix experiment pane (Duplicate #10380) (#10397)

eb2c74c

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

daniellok-db added a commit that referenced this pull request Nov 15, 2023

Fix experiment pane (Duplicate #10380) (#10397)

00b6e18

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add dark theme to experiment pane #10380

Add dark theme to experiment pane #10380

daniellok-db commented Nov 14, 2023 •

edited by github-actions bot

github-actions bot commented Nov 14, 2023 •

edited

hubertzub-db left a comment

hubertzub-db Nov 14, 2023

hubertzub-db Nov 14, 2023

hubertzub-db Nov 14, 2023

hubertzub-db Nov 14, 2023

hubertzub-db Nov 14, 2023

daniellok-db Nov 14, 2023

hubertzub-db Nov 14, 2023 •

edited

	<div css={styles.homeContainer}>
	<div css={styles.homeContainer(theme)}>

	expect(screen.getByAltText('No experiments found.')).not.toBeNull();
	expect(screen.getByAltText('No experiments found.')).toBeInTheDocument();

Add dark theme to experiment pane #10380

Add dark theme to experiment pane #10380

Conversation

daniellok-db commented Nov 14, 2023 • edited by github-actions bot

Install mlflow from this PR

Checkout with GitHub CLI

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:

github-actions bot commented Nov 14, 2023 • edited

hubertzub-db left a comment

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023

Choose a reason for hiding this comment

daniellok-db Nov 14, 2023

Choose a reason for hiding this comment

hubertzub-db Nov 14, 2023 • edited

Choose a reason for hiding this comment

daniellok-db commented Nov 14, 2023 •

edited by github-actions bot

github-actions bot commented Nov 14, 2023 •

edited

hubertzub-db Nov 14, 2023 •

edited