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

…View (#5022) * init Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * fix Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * tune size Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * fix js lint Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * update Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * add unit test Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * fix Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * update size Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * address comments Signed-off-by: Weichen Xu <weichen.xu@databricks.com> * update Signed-off-by: Weichen Xu <weichen.xu@databricks.com>
mlflow · Nov 10, 2021 · d0b0b82 · d0b0b82
1 parent f9aff40
commit d0b0b82
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {metricKey}
+                              {middleTruncateStr(metricKey, 50)}
                             </Option>,
                           );
                         });
@@ -745,7 +746,7 @@ export class ExperimentView extends Component {
                               ) : (
                                 <Icon type='arrow-down' />
                               )}{' '}
-                              {paramKey}
+                              {middleTruncateStr(paramKey, 50)}
                             </Option>,
                           );
                         });