diff --git a/mlflow/server/js/src/common/utils/StringUtils.js b/mlflow/server/js/src/common/utils/StringUtils.js
index 12b7fa4d11b52..5a7b68c047a5f 100644
--- a/mlflow/server/js/src/common/utils/StringUtils.js
+++ b/mlflow/server/js/src/common/utils/StringUtils.js
@@ -13,3 +13,15 @@ export const capitalizeFirstChar = (str) => {
}
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
+
+export const middleTruncateStr = (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;
+ }
+};
diff --git a/mlflow/server/js/src/common/utils/StringUtils.test.js b/mlflow/server/js/src/common/utils/StringUtils.test.js
index 501923aa6c805..a81c9ec9a8db8 100644
--- a/mlflow/server/js/src/common/utils/StringUtils.test.js
+++ b/mlflow/server/js/src/common/utils/StringUtils.test.js
@@ -1,4 +1,8 @@
-import { truncateToFirstLineWithMaxLength, capitalizeFirstChar } from './StringUtils';
+import {
+ truncateToFirstLineWithMaxLength,
+ capitalizeFirstChar,
+ middleTruncateStr,
+} 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('middleTruncateStr', () => {
+ test('test middleTruncateStr', () => {
+ expect(middleTruncateStr('abc', 10)).toEqual('abc');
+ expect(middleTruncateStr('abcdefghij', 10)).toEqual('abcdefghij');
+ expect(middleTruncateStr('abcdefghijk', 10)).toEqual('abc...hijk');
+ expect(middleTruncateStr('abcdefghijkl', 10)).toEqual('abc...ijkl');
+ });
+});
diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
index c5fd787c203c8..fea4317a53665 100644
--- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js
+++ b/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 { middleTruncateStr } from '../../common/utils/StringUtils';
import {
COLUMN_TYPES,
LIFECYCLE_FILTER,
@@ -721,7 +722,7 @@ export class ExperimentView extends Component {
) : (
)}{' '}
- {metricKey}
+ {middleTruncateStr(metricKey, 50)}
,
);
});
@@ -745,7 +746,7 @@ export class ExperimentView extends Component {
) : (
)}{' '}
- {paramKey}
+ {middleTruncateStr(paramKey, 50)}
,
);
});