From 7b201d6afdc05a4944a76b2b6a1e3895ce31382d Mon Sep 17 00:00:00 2001
From: Lijiao <15910218274@163.com>
Date: Mon, 17 Feb 2020 16:35:57 +0000
Subject: [PATCH 1/3] support final-dict includes addcolumn

---
 .../Modals/ChangeColumnComponent.tsx          |  3 +-
 .../src/components/trial-detail/TableList.tsx | 60 +++++++++++++------
 src/webui/src/static/function.ts              |  7 ++-
 src/webui/src/static/interface.ts             |  3 +-
 src/webui/src/static/model/trial.ts           |  4 +-
 src/webui/src/static/style/table.scss         |  6 +-
 6 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
index e03d539d52..b71e70fef3 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/Modals/ChangeColumnComponent.tsx
@@ -117,7 +117,6 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
         });
         return (
             <div>
-                <div>Hello</div>
                 <Dialog
                     hidden={isHideDialog} // required field!
                     dialogContentProps={{
@@ -130,7 +129,7 @@ class ChangeColumnComponent extends React.Component<ChangeColumnProps, ChangeCol
                         styles: { main: { maxWidth: 450 } }
                     }}
                 >
-                    <div>
+                    <div className="columns-height">
                         {renderOptions.map(item => {
                             return <Checkbox key={item.label} {...item} styles={{ root: { marginBottom: 8 } }} />
                         })}
diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 47d7a4bb92..91726e33af 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -388,29 +388,28 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 parameterStr.push(`${value} (search space)`);
             });
         }
-        let allColumnList = COLUMNPro; // eslint-disable-line @typescript-eslint/no-unused-vars
-        allColumnList = COLUMNPro.concat(parameterStr);
+        // let allColumnList = COLUMNPro; // eslint-disable-line @typescript-eslint/no-unused-vars
+        let allColumnList = COLUMNPro.concat(parameterStr);
 
         // only succeed trials have final keys
         if (tableSource.filter(record => record.status === 'SUCCEEDED').length >= 1) {
-            const temp = tableSource.filter(record => record.status === 'SUCCEEDED')[0].accuracy;
+            const temp = tableSource.filter(record => record.status === 'SUCCEEDED')[0].accDictionary;
             if (temp !== undefined && typeof temp === 'object') {
-                if (!isNaN(temp)) {
-                    // concat default column and finalkeys
-                    const item = Object.keys(temp);
-                    // item: ['default', 'other-keys', 'maybe loss']
-                    if (item.length > 1) {
-                        const want: string[] = [];
-                        item.forEach(value => {
-                            if (value !== 'default') {
-                                want.push(value);
-                            }
-                        });
-                        allColumnList = COLUMNPro.concat(want);
-                    }
+                // concat default column and finalkeys
+                const item = Object.keys(temp);
+                // item: ['default', 'other-keys', 'maybe loss']
+                if (item.length > 1) {
+                    const want: string[] = [];
+                    item.forEach(value => {
+                        if (value !== 'default') {
+                            want.push(value);
+                        }
+                    });
+                    allColumnList = allColumnList.concat(want);
                 }
             }
         }
+
         return allColumnList;
     }
 
@@ -522,8 +521,32 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     });
                     break;
                 default:
-                    // FIXME
-                    alert('Unexpected column type');
+                    showColumn.push({
+                        name: item,
+                        key: item,
+                        fieldName: item,
+                        minWidth: 100,
+                        onRender: (record: TableRecord) => {
+                            const temp = record.accDictionary;
+                            let decimals = 0;
+                            let other = '';
+                            if (temp !== undefined) {
+                                if (temp[item].toString().indexOf('.') !== -1) {
+                                    decimals = temp[item].toString().length - temp[item].toString().indexOf('.') - 1;
+                                    if (decimals > 6) {
+                                        other = `${temp[item].toFixed(6)}`;
+                                    } else {
+                                        other = temp[item].toString();
+                                    }
+                                }
+                            } else {
+                                other = '--';
+                            }
+                            return (
+                                <div>{other}</div>
+                            );
+                        }
+                    });
             }
         }
         return showColumn;
@@ -546,7 +569,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
         } = this.state;
         const { columnList } = this.props;
         const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.state.tableSourceForSort));
-
         return (
             <Stack>
                 <div id="tableList">
diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts
index 8177ec1f54..fc4bd174d4 100644
--- a/src/webui/src/static/function.ts
+++ b/src/webui/src/static/function.ts
@@ -189,7 +189,12 @@ function formatTimestamp(timestamp?: number, placeholder?: string): string {
 
 function metricAccuracy(metric: MetricDataRecord): number {
     const data = parseMetrics(metric.data);
-    return typeof data === 'number' ? data : NaN;
+    // return typeof data === 'number' ? data : NaN;
+    if (typeof data === 'number') {
+        return data;
+    } else {
+        return data.default;
+    }
 }
 
 function formatAccuracy(accuracy: number): string {
diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts
index 626a571ae7..5254c3702e 100644
--- a/src/webui/src/static/interface.ts
+++ b/src/webui/src/static/interface.ts
@@ -23,7 +23,8 @@ interface TableRecord {
     intermediateCount: number;
     accuracy?: number;
     latestAccuracy: number | undefined;
-    formattedLatestAccuracy: string; // format (LATEST/FINAL)
+    formattedLatestAccuracy: string; // format (LATEST/FINAL),
+    accDictionary: FinalType | undefined;
 }
 
 interface SearchSpace {
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index 2ab0e4afa8..5da72a8b8d 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -82,9 +82,11 @@ class Trial implements TableObj {
             duration,
             status: this.info.status,
             intermediateCount: this.intermediates.length,
-            accuracy: this.finalAcc,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            accuracy: this.acc !== undefined ? JSON.parse(this.acc!.default) : undefined,
             latestAccuracy: this.latestAccuracy,
             formattedLatestAccuracy: this.formatLatestAccuracy(),
+            accDictionary: this.acc
         };
     }
 
diff --git a/src/webui/src/static/style/table.scss b/src/webui/src/static/style/table.scss
index 73ade8b124..4838fb1ed7 100644
--- a/src/webui/src/static/style/table.scss
+++ b/src/webui/src/static/style/table.scss
@@ -46,4 +46,8 @@
 }
 .detail-table{
     padding: 5px 0 0 0;
-}
\ No newline at end of file
+}
+.columns-height{
+    max-height: 335px;
+    overflow-y: scroll;
+}

From fe9e48be7e8a18cbe30541ee66e7e5ee220b5225 Mon Sep 17 00:00:00 2001
From: Lijiao <15910218274@163.com>
Date: Tue, 18 Feb 2020 02:40:21 +0000
Subject: [PATCH 2/3] support intermeidate dict

---
 .../src/components/trial-detail/TableList.tsx    | 16 +++++++---------
 src/webui/src/static/model/trial.ts              |  7 +++++--
 src/webui/src/static/style/search.scss           |  5 +++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 91726e33af..2ca30d3804 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -54,7 +54,7 @@ interface TableListState {
     isShowCustomizedModal: boolean;
     copyTrialId: string; // user copy trial to submit a new customized trial
     isCalloutVisible: boolean; // kill job button callout [kill or not kill job window]
-    intermediateKeys: string[]; // intermeidate modal: which key is choosed.
+    intermediateKey: string; // intermeidate modal: which key is choosed.
     isExpand: boolean;
     modalIntermediateWidth: number;
     modalIntermediateHeight: number;
@@ -86,7 +86,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             isShowCustomizedModal: false,
             isCalloutVisible: false,
             copyTrialId: '',
-            intermediateKeys: ['default'],
+            intermediateKey: 'default',
             isExpand: false,
             modalIntermediateWidth: window.innerWidth,
             modalIntermediateHeight: window.innerHeight,
@@ -294,7 +294,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
             // re-render
             this.setState({
-                intermediateKeys: [value],
+                intermediateKey: value,
                 intermediateOption: intermediate
             });
         }
@@ -388,7 +388,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 parameterStr.push(`${value} (search space)`);
             });
         }
-        // let allColumnList = COLUMNPro; // eslint-disable-line @typescript-eslint/no-unused-vars
         let allColumnList = COLUMNPro.concat(parameterStr);
 
         // only succeed trials have final keys
@@ -562,7 +561,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     }
     render(): React.ReactNode {
-        const { intermediateKeys, modalIntermediateWidth, modalIntermediateHeight,
+        const { intermediateKey, modalIntermediateWidth, modalIntermediateHeight,
             tableColumns, allColumnList, isShowColumn, modalVisible,
             selectRows, isShowCompareModal, intermediateOtherKeys,
             isShowCustomizedModal, copyTrialId, intermediateOption
@@ -602,11 +601,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     {
                         intermediateOtherKeys.length > 1
                             ?
-                            <Stack className="selectKeys" styles={{ root: { width: 800 } }}>
+                            <Stack horizontalAlign="end" className="selectKeys">
                                 <Dropdown
                                     className="select"
-                                    selectedKeys={intermediateKeys}
-                                    onChange={this.selectOtherKeys}
+                                    selectedKey={intermediateKey}
                                     options={
                                         intermediateOtherKeys.map((key, item) => {
                                             return {
@@ -614,7 +612,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                             };
                                         })
                                     }
-                                    styles={{ dropdown: { width: 300 } }}
+                                    onChange={this.selectOtherKeys}
                                 />
                             </Stack>
                             :
diff --git a/src/webui/src/static/model/trial.ts b/src/webui/src/static/model/trial.ts
index 5da72a8b8d..140351421e 100644
--- a/src/webui/src/static/model/trial.ts
+++ b/src/webui/src/static/model/trial.ts
@@ -53,10 +53,13 @@ class Trial implements TableObj {
         if (this.accuracy !== undefined) {
             return this.accuracy;
         } else if (this.intermediates.length > 0) {
-            // TODO: support intermeidate result is dict
             const temp = this.intermediates[this.intermediates.length - 1];
             if (temp !== undefined) {
-                return parseMetrics(temp.data);
+                if (typeof parseMetrics(temp.data) === 'object') {
+                    return parseMetrics(temp.data).default;
+                } else {
+                    return parseMetrics(temp.data);
+                }
             } else {
                 return undefined;
             }
diff --git a/src/webui/src/static/style/search.scss b/src/webui/src/static/style/search.scss
index 7dc341b164..22c507e107 100644
--- a/src/webui/src/static/style/search.scss
+++ b/src/webui/src/static/style/search.scss
@@ -27,9 +27,10 @@
 .selectKeys{
     /* intermediate result is dict, select box for keys */
     .select{
+        margin-right: 12%;
+    }
+    .ms-Dropdown{
         width: 120px;
-        float: right;
-        margin-right: 10%;
     }
 }
 

From d608e12685adb3b92d962e68f8e5c95e39a1ae9f Mon Sep 17 00:00:00 2001
From: Lijiao <15910218274@163.com>
Date: Tue, 18 Feb 2020 03:59:19 +0000
Subject: [PATCH 3/3] fix shinai comment

---
 src/webui/src/components/trial-detail/TableList.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
index 2ca30d3804..5c434f380a 100644
--- a/src/webui/src/components/trial-detail/TableList.tsx
+++ b/src/webui/src/components/trial-detail/TableList.tsx
@@ -526,16 +526,16 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         fieldName: item,
                         minWidth: 100,
                         onRender: (record: TableRecord) => {
-                            const temp = record.accDictionary;
+                            const accDictionary = record.accDictionary;
                             let decimals = 0;
                             let other = '';
-                            if (temp !== undefined) {
-                                if (temp[item].toString().indexOf('.') !== -1) {
-                                    decimals = temp[item].toString().length - temp[item].toString().indexOf('.') - 1;
+                            if (accDictionary !== undefined) {
+                                if (accDictionary[item].toString().indexOf('.') !== -1) {
+                                    decimals = accDictionary[item].toString().length - accDictionary[item].toString().indexOf('.') - 1;
                                     if (decimals > 6) {
-                                        other = `${temp[item].toFixed(6)}`;
+                                        other = `${accDictionary[item].toFixed(6)}`;
                                     } else {
-                                        other = temp[item].toString();
+                                        other = accDictionary[item].toString();
                                     }
                                 }
                             } else {