Refactor ExperimentListView using @databricks/design-system's Tree component

[harupy]

Signed-off-by: harupy hkawamura0130@gmail.com

What changes are proposed in this pull request?

Refactor the ExperimentListView component using @databricks/design-system's Tree component to simplify the implementation of multi-experiment run comparison in #5822.

ExperimentListView-refactor.mov

How is this patch tested?

• Unit tests
• Manual QA

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.

1. Check the status of the ci/circleci: build_doc check. If it's successful, proceed to the
   next step, otherwise fix it.
2. Click Details on the right to open the job page of CircleCI.
3. Click the Artifacts tab.
4. Click docs/build/html/index.html.
5. 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

• 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

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

[harupy]

To support multi-experiment run comparison, we can add checkable and onCheck:

Suggested change

	selectable: true,
	multiple: true,
	selectedKeys: [activeExperimentId],
	titleRender: this.renderListItem,
	checkable: true,
	selectable: true,
	multiple: true,
	onCheck: this.handleCheck,
	selectedKeys: [activeExperimentId],
	titleRender: this.renderListItem,

Ref: https://ant.design/components/tree/

[harupy]

Quick demo:

multi-experiment-demo.mov

[harupy]

Testing scroll when we have many experiments:

many-experiments.mov

[sunishsheth2009]

Is there a reason we don't use LinkTo here and rather use div? This isn't great for a11y as well since the screen readers wouldn't read it as Link and note that there would a transition. Plus tracking things like site-speed is difficult where we rely on navigation or something.

[harupy]

@sunishsheth2009

Is there a reason we don't use LinkTo here and rather use div?

No, we can replace this div with <Link to=... >.