Truncate in middle for the dropdown of sorting columns in Experiment View

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

@@ -373,7 +373,7 @@ span.error-message {
 }
 
 .ExperimentView .sort-select {
-    width: 200px;
+    width: 350px;
 }
 
 .ExperimentView .start-time-select {

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

@@ -720,7 +720,7 @@ export class ExperimentView extends Component {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {metricKey}
+                              {ExperimentViewUtil.middleTruncateKey(metricKey, 40)}
                             </Option>,
                           );
                         });
@@ -744,7 +744,7 @@ export class ExperimentView extends Component {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {paramKey}
+                              {ExperimentViewUtil.middleTruncateKey(paramKey, 40)}
                             </Option>,
                           );
                         });

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

@@ -273,6 +273,20 @@ export default class ExperimentViewUtil {
     return keyType + '.`' + keyName + '`';
   }
 
+  static middleTruncateKey(keyName, maxLen) {
+    if (keyName.length > maxLen) {
+      const firstPartLen = Math.floor((maxLen - 3) / 2);
+      const lastPartLen = maxLen - 3 - firstPartLen;
+      return (
+        keyName.substring(0, firstPartLen) +
+        '...' +
+        keyName.substring(keyName.length - lastPartLen, keyName.length)
+      );
+    } else {
+      return keyName;
+    }
+  }
+
   static getExpanderHeader(cellType) {
     const CellComponent = `${cellType}`;
     return (