[WebUI] Support dictionary metrics includes table defatule metirc | addcolumn | intermeidate result modal

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 } }} />
                         })}

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">

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 {

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 {

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
         };
     }
 

src/webui/src/static/style/table.scss

@@ -46,4 +46,8 @@
 }
 .detail-table{
     padding: 5px 0 0 0;
-}
+}
+.columns-height{
+    max-height: 335px;
+    overflow-y: scroll;
+}