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

mlflow/server/js/src/common/utils/StringUtils.js

@@ -13,3 +13,17 @@ export const capitalizeFirstChar = (str) => {
   }
   return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 };
+
+export const middleTruncateKey = (str, maxLen) => {
+  if (str.length > maxLen) {
+    const firstPartLen = Math.floor((maxLen - 3) / 2);
+    const lastPartLen = maxLen - 3 - firstPartLen;
+    return (
+      str.substring(0, firstPartLen) +
+      '...' +
+      str.substring(str.length - lastPartLen, str.length)
+    );
+  } else {
+    return str;
+  }
+};

mlflow/server/js/src/common/utils/StringUtils.test.js

@@ -1,4 +1,8 @@
-import { truncateToFirstLineWithMaxLength, capitalizeFirstChar } from './StringUtils';
+import {
+  truncateToFirstLineWithMaxLength,
+  capitalizeFirstChar,
+  middleTruncateKey,
+} from './StringUtils';
 
 describe('truncateToFirstLineWithMaxLength', () => {
   test('should truncate to first line if it exists', () => {
@@ -43,3 +47,12 @@ describe('capitalizeFirstChar', () => {
     expect(capitalizeFirstChar(object)).toEqual(object);
   });
 });
+
+describe('middleTruncateKey', () => {
+  test('test middleTruncateKey', () => {
+    expect(middleTruncateKey('abc', 10)).toEqual('abc');
+    expect(middleTruncateKey('abcdefghij', 10)).toEqual('abcdefghij');
+    expect(middleTruncateKey('abcdefghijk', 10)).toEqual('abc...hijk');
+    expect(middleTruncateKey('abcdefghijkl', 10)).toEqual('abc...ijkl');
+  });
+});

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

@@ -49,6 +49,7 @@ import { Spacer } from '../../shared/building_blocks/Spacer';
 import { SearchBox } from '../../shared/building_blocks/SearchBox';
 import { Radio } from '../../shared/building_blocks/Radio';
 import syncSvg from '../../common/static/sync.svg';
+import { middleTruncateKey } from '../../common/utils/StringUtils';
 import {
   COLUMN_TYPES,
   LIFECYCLE_FILTER,
@@ -721,7 +722,7 @@ export class ExperimentView extends Component {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {metricKey}
+                              {middleTruncateKey(metricKey, 50)}
                             </Option>,
                           );
                         });
@@ -745,7 +746,7 @@ export class ExperimentView extends Component {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {paramKey}
+                              {middleTruncateKey(paramKey, 50)}
                             </Option>,
                           );
                         });