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

[dbczumar]

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))

2. 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

[SadiaAfrinPurba]

@dbczumar I would like to work on this issue.

[dbczumar]

@SadiaAfrinPurba Sounds great! I’ll assign the issue to you. Please let me know if you have any questions. Thank you in advance for your contribution!

[dbczumar]

Hi @SadiaAfrinPurba, were you able to take a look at this issue? Are there any questions I can help answer?

[SadiaAfrinPurba]

Hi @dbczumar, apologize for the late reply. I missed this notification. I've looked into this issue and for now, I do not have any questions. I am familiarizing myself with the codebase and hopefully, I will give any updates by next week.

[NieuweNils]

@dbczumar , @SadiaAfrinPurba Is this issue still open? I'm new to the project and would love to help out and contribute.

[dbczumar]

Hi @NieuweNils . Yes, the issue is still open and we would definitely welcome your contribution! Thank you in advance and let me know if you have any questions!

[NieuweNils]

Great to hear I can help! Will definitely let you know if I need anything.

[DrPuneetGaur]

@NieuweNils Please let me know if you have got an opportunity to work on this issue. If not, I will raise a PR as I have figured out the fix for this issue.

[dbczumar]

Hi @NieuweNils . Please let me know if you have updates here. @coder-freestyle I've left a comment on the linked PR here: https://github.com/mlflow/mlflow/pull/4990/files#r742467554

[DrPuneetGaur]

@dbczumar Kindly take a look at the latest commits for dynamic width sizing and let me know if this looks good.

[NieuweNils]

Hi @dbczumar , @coder-freestyle!
I Was busy with work, sorry for the late reply!

I was trying to find out how to do a dynamic resize from the get-go but did not yet see how to get it done.
Setting the width to "auto" in css doesn't do the trick for me.
If I'm not mistaken, a "Select" field should automatically resize with the biggest "Option" it contains, but it doesn't do that for some reason.
Trying to find out how set it to do that on focus (when you expand the drop down).

I'm not a front-ender by trade, so if anyone has a suggestion (@coder-freestyle, maybe?), feel free to help :)

[cedkoffeto]

Hi @NieuweNils

Just an idea
Maybe you can add a tooltip that will contain the full name of the metric.

Thanks.

[NieuweNils]

@dbczumar
I opened a PR!
The fix automatically changes column width for the selected column, and has a bigger drop down (20% of screen size).

[NieuweNils]

@cedkoffeto The issue says the drop down should be widened, so I stuck to that. Thanks for your suggestion though!

[dbczumar]

Closing this now that #5018 is merged. Thanks @NieuweNils @coder-freestyle !

[DrPuneetGaur]

@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