From f21e449a8ab87a032c4681b9cc73ecd7c7471b13 Mon Sep 17 00:00:00 2001 From: colorjam Date: Fri, 7 Aug 2020 18:35:25 +0900 Subject: [PATCH 01/12] update global sort --- src/webui/package.json | 2 +- .../src/components/trial-detail/TableList.tsx | 33 +++++-------------- 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/src/webui/package.json b/src/webui/package.json index 8d38c62ecf..7831bbb9d7 100644 --- a/src/webui/package.json +++ b/src/webui/package.json @@ -83,7 +83,7 @@ "npx": "^10.2.0", "typescript": "^3.8.0" }, - "proxy": "http://localhost:12138", + "proxy": "http://localhost:8080", "scripts": { "start": "node --max-old-space-size=3072 scripts/start.js", "build": "node --max-old-space-size=3072 scripts/build.js", diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 4ce1ccd7bb..6163fde7d7 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -75,7 +75,7 @@ interface TableListState { tableSourceForSort: Array; sortMessage: SortInfo; offset: number; - data: Array; + tablePerPage: Array; perPage: number; currentPage: number; pageCount: number; @@ -111,7 +111,7 @@ class TableList extends React.Component { allColumnList: this.getAllColumnKeys(), sortMessage: { field: '', isDescend: false }, offset: 0, - data: [], + tablePerPage: [], perPage: 20, currentPage: 0, pageCount: 0, @@ -139,9 +139,9 @@ class TableList extends React.Component { tableColumns: newColumns, tableSourceForSort: newItems, sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending } + }, () => {this.updateData(); }); - - }; + } private copyAndSort(items: T[], columnKey: string, isSortedDescending?: boolean): any { const key = columnKey as keyof T; @@ -567,7 +567,7 @@ class TableList extends React.Component { componentDidMount(): void { window.addEventListener('resize', this.onWindowResize); - this.updateData() + this.updateData(); } componentDidUpdate(prevProps: TableListProps): void { @@ -582,12 +582,11 @@ class TableList extends React.Component { } updateData(): void { - const tableSource: Array = JSON.parse(JSON.stringify(this.props.tableSource)); - + const tableSource: Array = this.state.tableSourceForSort; const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage) this.setState({ - tableSourceForSort: tableSlice, + tablePerPage: tableSlice, pageCount: Math.ceil(tableSource.length / this.state.perPage), }); } @@ -618,36 +617,22 @@ class TableList extends React.Component { const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight, tableColumns, allColumnList, isShowColumn, modalVisible, selectRows, isShowCompareModal, intermediateOtherKeys, - isShowCustomizedModal, copyTrialId, intermediateOption, sortMessage + isShowCustomizedModal, copyTrialId, intermediateOption, tablePerPage } = this.state; const { columnList } = this.props; - const tableSource = this.state.tableSourceForSort const perPageOptions = [ { key: '10', text: '10 items per page'}, { key: '20', text: '20 items per page'}, { key: '50', text: '50 items per page'}, { key: 'all', text: 'All items'}, ]; - - - if (sortMessage.field !== '') { - tableSource.sort(function (a, b): any { - if (a[sortMessage.field] === undefined) { - return 1; - } - if (b[sortMessage.field] === undefined) { - return -1; - } - return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1; - }); - } return (
Date: Tue, 11 Aug 2020 13:48:53 +0900 Subject: [PATCH 02/12] fix bug of auto fresh --- .../src/components/trial-detail/TableList.tsx | 54 ++++++++++++------- 1 file changed, 36 insertions(+), 18 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 6163fde7d7..9122dd8a48 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -121,7 +121,7 @@ class TableList extends React.Component { // sort for table column onColumnClick = (ev: React.MouseEvent, getColumn: IColumn): void => { - const { tableColumns, tableSourceForSort } = this.state; + const { tableColumns } = this.state; const newColumns: IColumn[] = tableColumns.slice(); const currColumn: IColumn = newColumns.filter(item => getColumn.key === item.key)[0]; newColumns.forEach((newCol: IColumn) => { @@ -133,13 +133,12 @@ class TableList extends React.Component { newCol.isSortedDescending = true; } }); - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const newItems = this.copyAndSort(tableSourceForSort, currColumn.fieldName!, currColumn.isSortedDescending); + this.setState({ tableColumns: newColumns, - tableSourceForSort: newItems, sortMessage: { field: getColumn.key, isDescend: currColumn.isSortedDescending } - }, () => {this.updateData(); + }, () => { + this.updateData(); }); } @@ -576,29 +575,46 @@ class TableList extends React.Component { this.setState({ tableColumns: this.initTableColumnList(columnList), allColumnList: this.getAllColumnKeys() - }, () => {this.updateData(); - }); + }, () => { + this.updateData(); + }); } } updateData(): void { - const tableSource: Array = this.state.tableSourceForSort; - const tableSlice = tableSource.slice(this.state.offset, this.state.offset + this.state.perPage) + const tableSource: Array = this.props.tableSource; + const { offset, perPage, sortMessage } = this.state; + + if (sortMessage.field !== '') { + tableSource.sort(function (a, b): any { + if (a[sortMessage.field] === undefined) { + return 1; + } + if (b[sortMessage.field] === undefined) { + return -1; + } + return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1; + }); + } + + const tableSlice = tableSource.slice(offset, offset + perPage) this.setState({ tablePerPage: tableSlice, - pageCount: Math.ceil(tableSource.length / this.state.perPage), + pageCount: Math.ceil(tableSource.length / perPage), }); } handlePageClick = (evt: any): void => { + const selectedPage = evt.selected; const offset = selectedPage * this.state.perPage; this.setState({ currentPage: selectedPage, - offset: offset }, - () => { this.updateData(); + offset: offset + }, () => { + this.updateData(); }); } @@ -606,27 +622,28 @@ class TableList extends React.Component { // clear input value and re-render table if (item !== undefined) { this.setState({ - perPage: item.key === 'all' ? this.props.tableSource.length: Number(item.key) }, - () => {this.updateData(); + perPage: item.key === 'all' ? this.props.tableSource.length: Number(item.key) + }, () => { + this.updateData(); }); } } - render(): React.ReactNode { const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight, tableColumns, allColumnList, isShowColumn, modalVisible, selectRows, isShowCompareModal, intermediateOtherKeys, - isShowCustomizedModal, copyTrialId, intermediateOption, tablePerPage + isShowCustomizedModal, copyTrialId, intermediateOption, + tablePerPage } = this.state; - const { columnList } = this.props; + const { columnList, trialsUpdateBroadcast } = this.props; const perPageOptions = [ { key: '10', text: '10 items per page'}, { key: '20', text: '20 items per page'}, { key: '50', text: '50 items per page'}, { key: 'all', text: 'All items'}, ]; - + return (
@@ -639,6 +656,7 @@ class TableList extends React.Component { layoutMode={DetailsListLayoutMode.justified} selectionMode={SelectionMode.multiple} selection={this.getSelectedRows} + key={trialsUpdateBroadcast} /> From d5ae06ac7e8f345ab1d7136cd4fa2a26915e4ad0 Mon Sep 17 00:00:00 2001 From: colorjam Date: Tue, 11 Aug 2020 14:47:01 +0900 Subject: [PATCH 03/12] update --- src/webui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/webui/package.json b/src/webui/package.json index 7831bbb9d7..8d38c62ecf 100644 --- a/src/webui/package.json +++ b/src/webui/package.json @@ -83,7 +83,7 @@ "npx": "^10.2.0", "typescript": "^3.8.0" }, - "proxy": "http://localhost:8080", + "proxy": "http://localhost:12138", "scripts": { "start": "node --max-old-space-size=3072 scripts/start.js", "build": "node --max-old-space-size=3072 scripts/build.js", From eb5e2644089a1272584517a1e1d6eda4ccdcca8f Mon Sep 17 00:00:00 2001 From: colorjam Date: Tue, 11 Aug 2020 16:40:51 +0900 Subject: [PATCH 04/12] fix bug --- src/webui/src/components/trial-detail/TableList.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 9122dd8a48..f4d1849441 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -581,6 +581,7 @@ class TableList extends React.Component { } } + // slice all table data into current page data updateData(): void { const tableSource: Array = this.props.tableSource; const { offset, perPage, sortMessage } = this.state; @@ -605,8 +606,8 @@ class TableList extends React.Component { }); } + // update data when click the page index handlePageClick = (evt: any): void => { - const selectedPage = evt.selected; const offset = selectedPage * this.state.perPage; @@ -619,10 +620,13 @@ class TableList extends React.Component { } updateperPage = (event: React.FormEvent, item: IDropdownOption | undefined): void => { - // clear input value and re-render table + const { currentPage } = this.state; + if (item !== undefined) { + const curPerPage = item.key === 'all' ? this.props.tableSource.length: Number(item.key); this.setState({ - perPage: item.key === 'all' ? this.props.tableSource.length: Number(item.key) + perPage: curPerPage, + offset: item.key === 'all' ? 0 : currentPage * curPerPage }, () => { this.updateData(); }); From 33b0360cb427c2b62fcf2155d9af6ba3c4c4b3b4 Mon Sep 17 00:00:00 2001 From: colorjam Date: Tue, 11 Aug 2020 18:23:50 +0900 Subject: [PATCH 05/12] update --- .../src/components/trial-detail/TableList.tsx | 41 ++++++++----------- 1 file changed, 17 insertions(+), 24 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index f4d1849441..574d1006ef 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -142,19 +142,6 @@ class TableList extends React.Component { }); } - private copyAndSort(items: T[], columnKey: string, isSortedDescending?: boolean): any { - const key = columnKey as keyof T; - return items.slice(0).sort(function (a: T, b: T): any { - if (a[key] === undefined) { - return 1; - } - if (b[key] === undefined) { - return -1; - } - return (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1; - }); - } - AccuracyColumnConfig: any = { name: 'Default metric', className: 'leftTitle', @@ -599,10 +586,10 @@ class TableList extends React.Component { } const tableSlice = tableSource.slice(offset, offset + perPage) - + const curPageCount = Math.ceil(tableSource.length / perPage) this.setState({ tablePerPage: tableSlice, - pageCount: Math.ceil(tableSource.length / perPage), + pageCount: curPageCount, }); } @@ -619,14 +606,19 @@ class TableList extends React.Component { }); } - updateperPage = (event: React.FormEvent, item: IDropdownOption | undefined): void => { - const { currentPage } = this.state; + // update per page option when click the dropdown + updatePerPage = (event: React.FormEvent, item: IDropdownOption | undefined): void => { + const { pageCount } = this.state; if (item !== undefined) { - const curPerPage = item.key === 'all' ? this.props.tableSource.length: Number(item.key); + const currentPerPage = item.key === 'all' ? this.props.tableSource.length: Number(item.key) + const currentPageCount = this.props.tableSource.length <= currentPerPage ? 1 : pageCount + this.setState({ - perPage: curPerPage, - offset: item.key === 'all' ? 0 : currentPage * curPerPage + perPage: currentPerPage, + offset: 0, + currentPage: 0, + pageCount: currentPageCount }, () => { this.updateData(); }); @@ -638,7 +630,7 @@ class TableList extends React.Component { tableColumns, allColumnList, isShowColumn, modalVisible, selectRows, isShowCompareModal, intermediateOtherKeys, isShowCustomizedModal, copyTrialId, intermediateOption, - tablePerPage + tablePerPage, currentPage } = this.state; const { columnList, trialsUpdateBroadcast } = this.props; const perPageOptions = [ @@ -667,10 +659,9 @@ class TableList extends React.Component { - {/* this.props.tableSource.length > this.state.perPage && */} "} @@ -683,7 +674,9 @@ class TableList extends React.Component { containerClassName={(this.props.tableSource.length == 0 ? "pagination hidden" : "pagination" )} subContainerClassName={"pages pagination"} disableInitialCallback={false} - activeClassName={"active"}/> + activeClassName={"active"} + forcePage={this.state.currentPage} + key={currentPage}/> From 4121eaeeb13f88742f71098efc98b1ce80d323d8 Mon Sep 17 00:00:00 2001 From: colorjam Date: Tue, 11 Aug 2020 18:24:00 +0900 Subject: [PATCH 06/12] update --- src/webui/src/components/trial-detail/TableList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 574d1006ef..38eaa367e1 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -680,7 +680,6 @@ class TableList extends React.Component { - {/* /> */}
{/* Intermediate Result Modal */} Date: Wed, 12 Aug 2020 10:53:14 +0900 Subject: [PATCH 07/12] add comment --- src/webui/src/components/trial-detail/TableList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 38eaa367e1..93eb039350 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -593,7 +593,7 @@ class TableList extends React.Component { }); } - // update data when click the page index + // update data when click the page index of pagination handlePageClick = (evt: any): void => { const selectedPage = evt.selected; const offset = selectedPage * this.state.perPage; @@ -606,7 +606,7 @@ class TableList extends React.Component { }); } - // update per page option when click the dropdown + // update per page items when click the dropdown of pagination updatePerPage = (event: React.FormEvent, item: IDropdownOption | undefined): void => { const { pageCount } = this.state; From 4a2a0602132c5b2783190cfd098155bda1cadc42 Mon Sep 17 00:00:00 2001 From: colorjam Date: Wed, 12 Aug 2020 11:28:12 +0900 Subject: [PATCH 08/12] update --- src/webui/src/components/trial-detail/TableList.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 93eb039350..f765572ef8 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -557,7 +557,7 @@ class TableList extends React.Component { } componentDidUpdate(prevProps: TableListProps): void { - if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource) { + if (this.props.columnList !== prevProps.columnList || this.props.tableSource !== prevProps.tableSource || prevProps.trialsUpdateBroadcast !== this.props.trialsUpdateBroadcast) { const { columnList } = this.props; this.setState({ tableColumns: this.initTableColumnList(columnList), @@ -630,9 +630,9 @@ class TableList extends React.Component { tableColumns, allColumnList, isShowColumn, modalVisible, selectRows, isShowCompareModal, intermediateOtherKeys, isShowCustomizedModal, copyTrialId, intermediateOption, - tablePerPage, currentPage + tablePerPage } = this.state; - const { columnList, trialsUpdateBroadcast } = this.props; + const { columnList } = this.props; const perPageOptions = [ { key: '10', text: '10 items per page'}, { key: '20', text: '20 items per page'}, @@ -652,7 +652,6 @@ class TableList extends React.Component { layoutMode={DetailsListLayoutMode.justified} selectionMode={SelectionMode.multiple} selection={this.getSelectedRows} - key={trialsUpdateBroadcast} /> @@ -676,8 +675,7 @@ class TableList extends React.Component { disableInitialCallback={false} activeClassName={"active"} forcePage={this.state.currentPage} - key={currentPage}/> - + />
From 4f238243048903039a9effc8af91c3c87e068bdc Mon Sep 17 00:00:00 2001 From: colorjam Date: Wed, 12 Aug 2020 16:12:57 +0900 Subject: [PATCH 09/12] update sort --- src/webui/src/components/trial-detail/TableList.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index f765572ef8..522821f8df 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -575,13 +575,12 @@ class TableList extends React.Component { if (sortMessage.field !== '') { tableSource.sort(function (a, b): any { - if (a[sortMessage.field] === undefined) { - return 1; + if (a[sortMessage.field] === undefined || Object.is(a[sortMessage.field], NaN) || Object.is(a[sortMessage.field], Infinity) || Object.is(a[sortMessage.field], -Infinity) || typeof a[sortMessage.field] === 'object' ) { + return 1; + } + if (b[sortMessage.field] === undefined || Object.is(b[sortMessage.field], NaN) || Object.is(b[sortMessage.field], Infinity) || Object.is(b[sortMessage.field], -Infinity) || typeof b[sortMessage.field] === 'object' ) { + return -1; } - if (b[sortMessage.field] === undefined) { - return -1; - } - return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1; }); } From f773ee4bef9f9f420dff6490c781724a0d98291f Mon Sep 17 00:00:00 2001 From: colorjam Date: Wed, 12 Aug 2020 18:08:03 +0900 Subject: [PATCH 10/12] update sort --- src/webui/src/components/trial-detail/TableList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 522821f8df..9683d12c78 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -581,6 +581,7 @@ class TableList extends React.Component { if (b[sortMessage.field] === undefined || Object.is(b[sortMessage.field], NaN) || Object.is(b[sortMessage.field], Infinity) || Object.is(b[sortMessage.field], -Infinity) || typeof b[sortMessage.field] === 'object' ) { return -1; } + return (sortMessage.isDescend ? a[sortMessage.field] < b[sortMessage.field] : a[sortMessage.field] > b[sortMessage.field]) ? 1 : -1; }); } From dbd6fd6dc4ecb2ef0475d7c156a87b275db47074 Mon Sep 17 00:00:00 2001 From: colorjam Date: Wed, 12 Aug 2020 18:10:34 +0900 Subject: [PATCH 11/12] update --- src/webui/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/src/webui/package.json b/src/webui/package.json index 8d38c62ecf..03cc3ed7b6 100644 --- a/src/webui/package.json +++ b/src/webui/package.json @@ -83,6 +83,7 @@ "npx": "^10.2.0", "typescript": "^3.8.0" }, + "proxy": "http://localhost:12138", "scripts": { "start": "node --max-old-space-size=3072 scripts/start.js", From 8d30bee693442bc6d0cd50c0b3315c99bb8aa322 Mon Sep 17 00:00:00 2001 From: colorjam Date: Wed, 12 Aug 2020 18:10:51 +0900 Subject: [PATCH 12/12] update --- src/webui/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/src/webui/package.json b/src/webui/package.json index 03cc3ed7b6..8d38c62ecf 100644 --- a/src/webui/package.json +++ b/src/webui/package.json @@ -83,7 +83,6 @@ "npx": "^10.2.0", "typescript": "^3.8.0" }, - "proxy": "http://localhost:12138", "scripts": { "start": "node --max-old-space-size=3072 scripts/start.js",