From 27a17f7da4e2269bd3a48d7bf03cf1e37712e721 Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Mon, 8 Nov 2021 17:48:59 +0800 Subject: [PATCH 01/10] init Signed-off-by: Weichen Xu --- .../experiment-tracking/components/ExperimentView.js | 4 ++-- .../components/ExperimentViewUtil.js | 11 +++++++++++ 2 files changed, 13 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( , ); }); @@ -744,7 +744,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {ExperimentViewUtil.middleTruncateKey(paramKey, 20)} + {ExperimentViewUtil.middleTruncateKey(paramKey, 40)} , ); }); From bd3a6f6a8cd620da7e87a196d3654a6529d7942e Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Mon, 8 Nov 2021 19:57:48 +0800 Subject: [PATCH 04/10] fix js lint Signed-off-by: Weichen Xu --- .../components/ExperimentViewUtil.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js index ad07cdfe72dc2..8e9c501b17a1b 100644 --- a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js +++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js @@ -275,12 +275,15 @@ export default class ExperimentViewUtil { static middleTruncateKey(keyName, maxLen) { if (keyName.length > maxLen) { - var firstPartLen = Math.floor((maxLen - 3) / 2) - var lastPartLen = maxLen - 3 - firstPartLen - return keyName.substring(0, firstPartLen) + '...' + - keyName.substring(keyName.length - lastPartLen, keyName.length) + 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 + return keyName; } } From 150ef510a7f4616760a29c11bb3bf78db65e8a4f Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Tue, 9 Nov 2021 20:31:52 +0800 Subject: [PATCH 05/10] update Signed-off-by: Weichen Xu --- mlflow/server/js/src/common/utils/StringUtils.js | 14 ++++++++++++++ .../components/ExperimentView.js | 3 ++- .../components/ExperimentViewUtil.js | 14 -------------- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/mlflow/server/js/src/common/utils/StringUtils.js b/mlflow/server/js/src/common/utils/StringUtils.js index 12b7fa4d11b52..1b008524dce39 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.js +++ b/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 = (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; + } +} diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js index 1785d7d45b09f..5b8fb3d06e5d9 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 { middleTruncateKey } from '../../common/utils/StringUtils'; import { COLUMN_TYPES, LIFECYCLE_FILTER, @@ -721,7 +722,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {ExperimentViewUtil.middleTruncateKey(metricKey, 40)} + {middleTruncateKey(metricKey, 40)} , ); }); diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js index 8e9c501b17a1b..f3d5ae993e8ab 100644 --- a/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js +++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentViewUtil.js @@ -273,20 +273,6 @@ 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 ( From 8721f5af3dbc942855be498ae25b7212fe2ef4fa Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Tue, 9 Nov 2021 20:45:32 +0800 Subject: [PATCH 06/10] add unit test Signed-off-by: Weichen Xu --- mlflow/server/js/src/common/utils/StringUtils.test.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/mlflow/server/js/src/common/utils/StringUtils.test.js b/mlflow/server/js/src/common/utils/StringUtils.test.js index 501923aa6c805..48f640fcc5620 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.test.js +++ b/mlflow/server/js/src/common/utils/StringUtils.test.js @@ -1,4 +1,4 @@ -import { truncateToFirstLineWithMaxLength, capitalizeFirstChar } from './StringUtils'; +import { truncateToFirstLineWithMaxLength, capitalizeFirstChar, middleTruncateKey } from './StringUtils'; describe('truncateToFirstLineWithMaxLength', () => { test('should truncate to first line if it exists', () => { @@ -43,3 +43,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') + }) +}) From 56abbbcfc99b26cbf47c381670db442d5aa6653c Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Tue, 9 Nov 2021 20:47:38 +0800 Subject: [PATCH 07/10] fix Signed-off-by: Weichen Xu --- .../server/js/src/common/utils/StringUtils.js | 2 +- .../js/src/common/utils/StringUtils.test.js | 18 +++++++++++------- .../components/ExperimentView.js | 2 +- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/mlflow/server/js/src/common/utils/StringUtils.js b/mlflow/server/js/src/common/utils/StringUtils.js index 1b008524dce39..6be1b65e0ce24 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.js +++ b/mlflow/server/js/src/common/utils/StringUtils.js @@ -26,4 +26,4 @@ export const middleTruncateKey = (keyName, maxLen) => { } else { return keyName; } -} +}; diff --git a/mlflow/server/js/src/common/utils/StringUtils.test.js b/mlflow/server/js/src/common/utils/StringUtils.test.js index 48f640fcc5620..d31b94fa57a6f 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, middleTruncateKey } from './StringUtils'; +import { + truncateToFirstLineWithMaxLength, + capitalizeFirstChar, + middleTruncateKey, +} from './StringUtils'; describe('truncateToFirstLineWithMaxLength', () => { test('should truncate to first line if it exists', () => { @@ -46,9 +50,9 @@ describe('capitalizeFirstChar', () => { 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') - }) -}) + 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'); + }); +}); diff --git a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js index 5b8fb3d06e5d9..bbedaed9fcc32 100644 --- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js +++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js @@ -746,7 +746,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {ExperimentViewUtil.middleTruncateKey(paramKey, 40)} + {middleTruncateKey(paramKey, 40)} , ); }); From 1c6ca218f8128b21cae79b0fa09547ebf5315911 Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Wed, 10 Nov 2021 14:14:48 +0800 Subject: [PATCH 08/10] update size Signed-off-by: Weichen Xu --- .../js/src/experiment-tracking/components/ExperimentView.js | 4 ++-- 1 file changed, 2 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 bbedaed9fcc32..49f2d3059560e 100644 --- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js +++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js @@ -722,7 +722,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {middleTruncateKey(metricKey, 40)} + {middleTruncateKey(metricKey, 50)} , ); }); @@ -746,7 +746,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {middleTruncateKey(paramKey, 40)} + {middleTruncateKey(paramKey, 50)} , ); }); From 1a6174a5c81e3b6928a530873dadae92ffa361fb Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Wed, 10 Nov 2021 14:18:13 +0800 Subject: [PATCH 09/10] address comments Signed-off-by: Weichen Xu --- mlflow/server/js/src/common/utils/StringUtils.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/mlflow/server/js/src/common/utils/StringUtils.js b/mlflow/server/js/src/common/utils/StringUtils.js index 6be1b65e0ce24..dd9613e5a5542 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.js +++ b/mlflow/server/js/src/common/utils/StringUtils.js @@ -14,16 +14,16 @@ export const capitalizeFirstChar = (str) => { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); }; -export const middleTruncateKey = (keyName, maxLen) => { - if (keyName.length > maxLen) { +export const middleTruncateKey = (str, maxLen) => { + if (str.length > maxLen) { const firstPartLen = Math.floor((maxLen - 3) / 2); const lastPartLen = maxLen - 3 - firstPartLen; return ( - keyName.substring(0, firstPartLen) + + str.substring(0, firstPartLen) + '...' + - keyName.substring(keyName.length - lastPartLen, keyName.length) + str.substring(str.length - lastPartLen, str.length) ); } else { - return keyName; + return str; } }; From 640f179d98bd56d216dd3764398d878fe1b6f5e5 Mon Sep 17 00:00:00 2001 From: Weichen Xu Date: Wed, 10 Nov 2021 16:10:21 +0800 Subject: [PATCH 10/10] update Signed-off-by: Weichen Xu --- mlflow/server/js/src/common/utils/StringUtils.js | 6 ++---- .../server/js/src/common/utils/StringUtils.test.js | 14 +++++++------- .../components/ExperimentView.js | 6 +++--- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/mlflow/server/js/src/common/utils/StringUtils.js b/mlflow/server/js/src/common/utils/StringUtils.js index dd9613e5a5542..5a7b68c047a5f 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.js +++ b/mlflow/server/js/src/common/utils/StringUtils.js @@ -14,14 +14,12 @@ export const capitalizeFirstChar = (str) => { return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase(); }; -export const middleTruncateKey = (str, maxLen) => { +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) + 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 d31b94fa57a6f..a81c9ec9a8db8 100644 --- a/mlflow/server/js/src/common/utils/StringUtils.test.js +++ b/mlflow/server/js/src/common/utils/StringUtils.test.js @@ -1,7 +1,7 @@ import { truncateToFirstLineWithMaxLength, capitalizeFirstChar, - middleTruncateKey, + middleTruncateStr, } from './StringUtils'; describe('truncateToFirstLineWithMaxLength', () => { @@ -48,11 +48,11 @@ describe('capitalizeFirstChar', () => { }); }); -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'); +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 49f2d3059560e..fea4317a53665 100644 --- a/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js +++ b/mlflow/server/js/src/experiment-tracking/components/ExperimentView.js @@ -49,7 +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 { middleTruncateStr } from '../../common/utils/StringUtils'; import { COLUMN_TYPES, LIFECYCLE_FILTER, @@ -722,7 +722,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {middleTruncateKey(metricKey, 50)} + {middleTruncateStr(metricKey, 50)} , ); }); @@ -746,7 +746,7 @@ export class ExperimentView extends Component { ) : ( )}{' '} - {middleTruncateKey(paramKey, 50)} + {middleTruncateStr(paramKey, 50)} , ); });