From 21a090049a1cd07fa998ccf84101160de6170a72 Mon Sep 17 00:00:00 2001
From: Weichen Xu <weichen.xu@databricks.com>
Date: Mon, 8 Nov 2021 17:48:59 +0800
Subject: [PATCH] init

Signed-off-by: Weichen Xu <weichen.xu@databricks.com>
---
 .../src/experiment-tracking/components/ExperimentView.js   | 4 ++--
 .../experiment-tracking/components/ExperimentViewUtil.js   | 7 +++++++
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
index ea435ed036b9b..9183806730fd6 100644
--- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
+++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
@@ -707,7 +707,7 @@ export class ExperimentView extends Component {
                         ColumnSortByOrder.forEach((order) => {
                           sortOptions.push(
                             <Option
-                              key={metricKey}
+                              key={ExperimentViewUtil.middleTruncateKey(metricKey, 20)}
                               title={metricKey}
                               data-test-id={`sort-select-${metricKey}-${order}`}
                               value={`${ExperimentViewUtil.makeCanonicalKey(
@@ -732,7 +732,7 @@ export class ExperimentView extends Component {
                           sortOptions.push(
                             <Option
                               key={paramKey}
-                              title={paramKey}
+                              title={ExperimentViewUtil.middleTruncateKey(paramKey, 20)}
                               data-test-id={`sort-select-${paramKey}-${order}`}
                               value={`${ExperimentViewUtil.makeCanonicalKey(
                                 COLUMN_TYPES.PARAMS,
diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
index f3d5ae993e8ab..f18d104aeff92 100644
--- a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
+++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js
@@ -273,6 +273,13 @@ export default class ExperimentViewUtil {
     return keyType + '.`' + keyName + '`';
   }
 
+  static middleTruncateKey(keyName, maxLen) {
+    if keyName.length > maxLen:
+        return keyName.substring(0, firstPartLen) + '...' + keyName.substring(firstPartLen + 3)
+    else:
+        return keyName
+  }
+
   static getExpanderHeader(cellType) {
     const CellComponent = `${cellType}`;
     return (