Update UI #5577

harupy · 2022-04-01T07:53:19Z

Signed-off-by: harupy 17039389+harupy@users.noreply.github.com

What changes are proposed in this pull request?

Update MLflow UI.

How is this patch tested?

JS unit tests
Generate run data by running the script below and manually check the UI works fine.

import os
import mlflow
import random

from sklearn.linear_model import LinearRegression


def log():
    for i in range(50):

        with mlflow.start_run():
            mlflow.log_params({"p1": random.random(), "p2": random.random()})
            mlflow.log_metrics({"m1": random.random()})

            for step in range(10):
                mlflow.log_metrics({"m2": random.random()}, step=step)

            model = LinearRegression()
            registered_model_name = f"model_{i}" if i >= 40 else None
            mlflow.sklearn.log_model(
                model,
                "model",
                pip_requirements=["scikit-learn"],
                registered_model_name=registered_model_name,
            )

    for _ in range(50):
        with mlflow.start_run():
            mlflow.log_params({"p1": random.random(), "p3": random.random()})
            mlflow.log_metrics({"m1": random.random(), "m3": random.random()})


db_path = "mlflow.db"
if os.path.exists(db_path):
    os.remove(db_path)
mlflow.set_tracking_uri(f"sqlite:///{db_path}")

# Default experiment
log()

mlflow.set_experiment("a")
log()

mlflow.set_experiment("b")
log()

Does this PR change the documentation?

No. You can skip the rest of this section.
Yes. Make sure the changed pages / sections render correctly by following the steps below.

Check the status of the ci/circleci: build_doc check. If it's successful, proceed to the
next step, otherwise fix it.
Click Details on the right to open the job page of CircleCI.
Click the Artifacts tab.
Click docs/build/html/index.html.
Find the changed pages / sections and make sure they render correctly.

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.

(Details in 1-2 sentences. You can just refer to another PR with a description if this PR is part of a larger change.)

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/breaking-change - The PR will be mentioned in the "Breaking Changes" section
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/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

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy · 2022-04-01T08:02:38Z

docs/source/python_api/mlflow.statsmodels.rst

+mlflow.statsmodels
+==================
+
+.. automodule:: mlflow.statsmodels
+    :members:
+    :undoc-members:
+    :show-inheritance:


It appears line endings have been changed to LF from CRLF.

(mlflow-dev-env) @ mlflow [master] -- INSERT -- % git branch --show-current master (mlflow-dev-env) @ mlflow [master] -- INSERT -- % file docs/source/python_api/mlflow.statsmodels.rst docs/source/python_api/mlflow.statsmodels.rst: ASCII text, with CRLF line terminators

(mlflow-dev-env) @ mlflow [5hy2wakz] -- INSERT -- % git branch --show-current 5hy2wakz (mlflow-dev-env) @ mlflow [5hy2wakz] -- INSERT -- % file docs/source/python_api/mlflow.statsmodels.rst docs/source/python_api/mlflow.statsmodels.rst: ASCII text

A list of files using CRLF

% git ls-files | xargs file | grep CRLF docs/source/python_api/mlflow.statsmodels.rst: ASCII text, with CRLF line terminators examples/statsmodels/MLproject: ASCII text, with CRLF line terminators examples/statsmodels/README.md: ASCII text, with CRLF line terminators examples/statsmodels/conda.yaml: ASCII text, with CRLF line terminators examples/statsmodels/train.py: Python script text executable, ASCII text, with CRLF line terminators mlflow/server/prometheus_exporter.py: Python script text executable, ASCII text, with CRLF line terminators tests/statsmodels/test_statsmodels_model_export.py: Python script text executable, ASCII text, with CRLF line terminators

Filed #5580 to convert CRLF to LF.

mlflow/server/js/src/experiment-tracking/components/ExperimentView.test.js

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy · 2022-04-04T06:51:48Z

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

-          {this.state.listExperimentsExpanded ? (
-            <ExperimentListView
-              activeExperimentId={this.props.experimentId}
-              onClickListExperiments={this.onClickListExperiments}
-            />
-          ) : (
-            <i
-              onClick={this.onClickListExperiments}
-              title='Show experiment list'
-              style={styles.showExperimentListExpander}
-              className='expander fa fa-chevron-right login-icon'
-            />
-          )}
+          <PageContainer>
+            {this.state.listExperimentsExpanded ? (
+              <ExperimentListView
+                activeExperimentId={this.props.experimentIds && this.props.experimentIds[0]}
+                onClickListExperiments={this.onClickListExperiments}
+              />
+            ) : (
+              <i
+                onClick={this.onClickListExperiments}
+                title='Show experiment list'
+                style={styles.showExperimentListExpander}
+                className='expander fa fa-chevron-right login-icon'
+              />
+            )}
+          </PageContainer>


Before: (the experiment list almost touches the top bar)

After:

cc @xanderwebs

WeichenXu123 · 2022-04-04T13:27:32Z

I pull the branch and try to run locally, but hit an error:

(py38) weichen.xu@C02G36DSMD6R js % yarn start           
command not found: craco

I tried to run:
yarn add @craco/craco to install it, but failed again:

➤ YN0001: │ Error: While cloning /Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/humanize-ms/node_modules/ms -> /Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/send/node_modules/ms ENOENT: no such file or directory, scandir '/Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/humanize-ms/node_modules/ms'

harupy · 2022-04-04T13:37:13Z

@WeichenXu123 I think you forgot to run yarn install.

WeichenXu123 · 2022-04-04T14:38:49Z

@WeichenXu123 I think you forgot to run yarn install.

No, I already run yarn install it does not address this. Then I tried solely run yarn add @craco/craco it failed like above.
yarn install also emit a error like:

➤ YN0001: │ Error: While cloning /Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/humanize-ms/node_modules/ms -> /Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/send/node_modules/ms ENOENT: no such file or directory, scandir '/Users/weichen.xu/work/mlflow/mlflow/server/js/node_modules/humanize-ms/node_modules/ms'

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

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy · 2022-04-05T01:14:42Z

@xanderwebs Would you mind taking a brief look at this PR?

dbczumar

@harupy Not sure if it's new with this PR, but the edit name / delete actions in the experiment sidebar are very close to the righthand side:

dbczumar

LGTM once #5577 (review) is addressed. Tested this out locally using a synthetic workflow from the PR description and confirmed that all components work properly. Thanks @harupy !

harupy · 2022-04-05T06:47:49Z

@harupy Not sure if it's new with this PR, but the edit name / delete actions in the experiment sidebar are very close to the righthand side:

@dbczumar Thanks for the catch, let me check.

harupy · 2022-04-05T06:51:39Z

1.24.0:

1.23.0:

dbczumar · 2022-04-05T06:52:40Z

1.24.0:

Can we increase the margin slightly?

harupy · 2022-04-05T06:59:23Z

Added a 10px (the same value as the edit button) right margin:

dbczumar · 2022-04-05T07:00:46Z

Added a 10px (the same value as the edit button) right margin:

Thanks!

harupy · 2022-04-05T07:03:24Z

margin-right: 3px

margin-right: 5px

margin-right: 10px

@dbczumar Which one looks the best to you? 3px looks too narrow. 10px looks a bit too wide? 5px looks good to me.

harupy · 2022-04-05T07:15:56Z

The tag table on the run page also uses 10px:

Let's use 10px.

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy · 2022-04-05T08:55:15Z

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

@@ -193,6 +193,7 @@ export class ExperimentListView extends Component {
                      onClick={this.handleDeleteExperiment}
                      data-experimentid={experiment_id}
                      data-experimentname={name}
+                      style={{ marginRight: 10 }}


Change to fix #5577 (review)

WeichenXu123

LGTM

mlflow/server/js/src/setupProxy.js

harupy · 2022-04-09T00:46:34Z

mlflow/server/js/craco.config.js

+    ...(proxyTarget && {
+      devServer: {
+        hot: true,
+        https: true,
+        proxy: [
+          // Heads up src/setupProxy.js is indirectly referenced by CRA
+          // and also defines proxies.
+          {
+            context: function(pathname) {
+              return mayProxy(pathname);
+            },
+            pathRewrite: { '^/mfe/mlflow': '' },
+            target: proxyTarget,
+            secure: false,
+            changeOrigin: true,
+            ws: true,
+            xfwd: true,
+            onProxyRes: (proxyRes, req) => {
+              rewriteRedirect(proxyRes, req);
+              rewriteCookies(proxyRes);
+            },
+          },
+        ],
+        host: 'localhost',
+        port: 3000,
+        open: false,
+      },
+    }),


@xanderwebs

harupy added 2 commits April 1, 2022 15:40

resolve conflicts

1244c3b

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

fix

0cbee87

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy commented Apr 1, 2022

View reviewed changes

github-actions bot added the rn/feature Mention under Features in Changelogs. label Apr 1, 2022

harupy commented Apr 1, 2022

View reviewed changes

mlflow/server/js/src/experiment-tracking/components/ExperimentView.test.js Outdated Show resolved Hide resolved

harupy added 4 commits April 4, 2022 13:57

Merge branch 'master' into 5hy2wakz

f2651c7

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

remove console.log

fdd8e67

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

fix lint

fa60af6

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

wrap experiment list with page container

1900091

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy commented Apr 4, 2022

View reviewed changes

harupy requested review from dbczumar and WeichenXu123 April 4, 2022 11:16

xanderwebs reviewed Apr 4, 2022

View reviewed changes

mlflow/server/js/src/experiment-tracking/components/HomeView.js Outdated Show resolved Hide resolved

Use Spacer

e788dc9

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy requested a review from xanderwebs April 5, 2022 00:44

dbczumar reviewed Apr 5, 2022

View reviewed changes

dbczumar approved these changes Apr 5, 2022

View reviewed changes

add marginRight to delete experiment button

205e2ee

Signed-off-by: harupy <17039389+harupy@users.noreply.github.com>

harupy commented Apr 5, 2022

View reviewed changes

WeichenXu123 approved these changes Apr 5, 2022

View reviewed changes

xanderwebs approved these changes Apr 5, 2022

View reviewed changes

harupy merged commit 430882b into mlflow:master Apr 5, 2022

This was referenced Apr 7, 2022

Add version to header and use version specific documentation links #5504

Merged

Orfv8bnj #5634

Closed

Remove files in mlflow/server/js/src/mfe #5638

Merged

[ALL TESTS] Update #5645

Merged

harupy commented Apr 9, 2022

View reviewed changes

mlflow/server/js/src/setupProxy.js Show resolved Hide resolved

harupy commented Apr 9, 2022

View reviewed changes

mlflow/server/js/src/setupProxy.js Show resolved Hide resolved

harupy commented Apr 9, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update UI #5577

Update UI #5577

harupy commented Apr 1, 2022 •

edited

Loading

harupy Apr 1, 2022

harupy Apr 1, 2022

harupy Apr 1, 2022

harupy Apr 1, 2022

harupy Apr 4, 2022 •

edited

Loading

WeichenXu123 commented Apr 4, 2022

harupy commented Apr 4, 2022

WeichenXu123 commented Apr 4, 2022 •

edited

Loading

harupy commented Apr 5, 2022

dbczumar left a comment

dbczumar left a comment

harupy commented Apr 5, 2022

harupy commented Apr 5, 2022 •

edited

Loading

dbczumar commented Apr 5, 2022

1.24.0:

harupy commented Apr 5, 2022 •

edited

Loading

dbczumar commented Apr 5, 2022

harupy commented Apr 5, 2022 •

edited

Loading

harupy commented Apr 5, 2022

harupy Apr 5, 2022

WeichenXu123 left a comment

harupy Apr 9, 2022

Update UI #5577

Update UI #5577

Conversation

harupy commented Apr 1, 2022 • edited Loading

What changes are proposed in this pull request?

How is this patch tested?

Does this PR change the documentation?

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:

harupy Apr 1, 2022

Choose a reason for hiding this comment

harupy Apr 1, 2022

Choose a reason for hiding this comment

harupy Apr 1, 2022

Choose a reason for hiding this comment

harupy Apr 1, 2022

Choose a reason for hiding this comment

harupy Apr 4, 2022 • edited Loading

Choose a reason for hiding this comment

Before: (the experiment list almost touches the top bar)

After:

WeichenXu123 commented Apr 4, 2022

harupy commented Apr 4, 2022

WeichenXu123 commented Apr 4, 2022 • edited Loading

harupy commented Apr 5, 2022

dbczumar left a comment

Choose a reason for hiding this comment

dbczumar left a comment

Choose a reason for hiding this comment

harupy commented Apr 5, 2022

harupy commented Apr 5, 2022 • edited Loading

1.24.0:

1.23.0:

dbczumar commented Apr 5, 2022

1.24.0:

harupy commented Apr 5, 2022 • edited Loading

dbczumar commented Apr 5, 2022

harupy commented Apr 5, 2022 • edited Loading

margin-right: 3px

margin-right: 5px

margin-right: 10px

harupy commented Apr 5, 2022

harupy Apr 5, 2022

Choose a reason for hiding this comment

WeichenXu123 left a comment

Choose a reason for hiding this comment

harupy Apr 9, 2022

Choose a reason for hiding this comment

harupy commented Apr 1, 2022 •

edited

Loading

harupy Apr 4, 2022 •

edited

Loading

WeichenXu123 commented Apr 4, 2022 •

edited

Loading

harupy commented Apr 5, 2022 •

edited

Loading

harupy commented Apr 5, 2022 •

edited

Loading

harupy commented Apr 5, 2022 •

edited

Loading