[BUG] Runs table filter dropdown is narrow, truncates content

MLflow Roadmap Item

This is an MLflow Roadmap item that has been prioritized by the MLflow maintainers. We’re seeking help with the implementation of roadmap items tagged with the help wanted label.

For requirements clarifications and implementation questions, or to request a PR review, please tag @BenWilson2 in your communications related to this issue.

System information

• Have I written custom code (as opposed to using a stock example script provided in MLflow): No
• OS Platform and Distribution (e.g., Linux Ubuntu 16.04): OSX 10.15
• MLflow installed from (source or binary): Binary
• MLflow version (run mlflow --version): 1.20.2
• Python version: 3.8
• npm version, if running the dev UI: NA
• Exact command to reproduce: mlflow ui

Describe the problem

In the MLflow experiment UI, the dropdown for sorting columns (i.e. parameters, metrics, and tags) in the Runs table in ascending / descending order is narrow, so column names are cut off.

For example, see:

This dropdown should be widened.

Code to reproduce issue

1. Run the following Python code and then launch the MLflow UI by running mlflow ui from the same directory:

import mlflow

for _ in range(10):
    with mlflow.start_run():
        for i in range(10):
            mlflow.log_param("my_medium_param_key_" + str(i), str(i))

1. Open the column sorting dropdown in the experiment UI

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

Components

• area/artifacts: Artifact stores and artifact logging
• area/build: Build and test infrastructure for MLflow
• area/docs: MLflow documentation pages
• area/examples: Example code
• area/model-registry: Model Registry service, APIs, and the fluent client calls for Model Registry
• area/models: MLmodel format, model serialization/deserialization, flavors
• area/projects: MLproject format, project running backends
• area/scoring: MLflow Model server, model deployment tools, Spark UDFs
• area/server-infra: MLflow Tracking server backend
• area/tracking: Tracking Service, tracking client APIs, autologging

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

[dbczumar]

Closing this now that https://github.com/mlflow/mlflow/pull/5018 is merged. Thanks @NieuweNils @coder-freestyle !

[coder-freestyle]

@dbczumar I was looking at an alternate solution for this issue for future references which would truncate the extra white space introduced due to min-width being set as 30%. We can set the dropdownMatchSelectWidth as false and keep the width in CSS as auto. Attaching the code snippet and the user interface screenshot.

Please let me know your thoughts (in case a PR needs to be raised)

FYI @NieuweNils