fix bugs, sort, concurrency, multi (#1451)

fix bugs about sort & concurrency & multi-phase 

src/webui/src/App.tsx

 import * as React from 'react';
 import { Row, Col } from 'antd';
+import axios from 'axios';
+import { COLUMN, MANAGER_IP } from './static/const';
 import './App.css';
 import SlideBar from './components/SlideBar';
 
 interface AppState {
   interval: number;
   whichPageToFresh: string;
+  columnList: Array<string>;
+  concurrency: number;
 }
 
 class App extends React.Component<{}, AppState> {
@@ -14,7 +18,9 @@ class App extends React.Component<{}, AppState> {
     super(props);
     this.state = {
       interval: 10, // sendons
-      whichPageToFresh: ''
+      whichPageToFresh: '',
+      columnList: COLUMN,
+      concurrency: 1
     };
   }
 
@@ -31,25 +37,57 @@ class App extends React.Component<{}, AppState> {
     }
   }
 
+  changeColumn = (columnList: Array<string>) => {
+    if (this._isMounted === true) {
+      this.setState(() => ({ columnList: columnList }));
+    }
+  }
+
+  changeConcurrency = (val: number) => {
+    if (this._isMounted === true) {
+      this.setState(() => ({ concurrency: val }));
+    }
+  }
+
+  getConcurrency = () => {
+    axios(`${MANAGER_IP}/experiment`, {
+      method: 'GET'
+    })
+      .then(res => {
+        if (res.status === 200) {
+          const params = res.data.params;
+          if (this._isMounted) {
+            this.setState(() => ({ concurrency: params.trialConcurrency }));
+          }
+        }
+      });
+  }
+
   componentDidMount() {
     this._isMounted = true;
+    this.getConcurrency();
   }
 
   componentWillUnmount() {
     this._isMounted = false;
   }
   render() {
-    const { interval, whichPageToFresh } = this.state;
+    const { interval, whichPageToFresh, columnList, concurrency } = this.state;
     const reactPropsChildren = React.Children.map(this.props.children, child =>
-      // tslint:disable-next-line:no-any
-      React.cloneElement(child as React.ReactElement<any>, { interval, whichPageToFresh })
+      React.cloneElement(
+        // tslint:disable-next-line:no-any
+        child as React.ReactElement<any>, {
+          interval, whichPageToFresh,
+          columnList, changeColumn: this.changeColumn,
+          concurrency, changeConcurrency: this.changeConcurrency
+        })
     );
     return (
       <Row className="nni" style={{ minHeight: window.innerHeight }}>
         <Row className="header">
           <Col span={1} />
           <Col className="headerCon" span={22}>
-            <SlideBar changeInterval={this.changeInterval} changeFresh={this.changeFresh}/>
+            <SlideBar changeInterval={this.changeInterval} changeFresh={this.changeFresh} />
           </Col>
           <Col span={1} />
         </Row>

src/webui/src/components/Modal/ExperimentDrawer.tsx

@@ -42,8 +42,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
                     let trialMessagesArr = res1.data;
                     const interResultList = res2.data;
                     Object.keys(trialMessagesArr).map(item => {
-                        // transform hyperparameters as object to show elegantly
-                        trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters);
+                        // not deal with trial's hyperParameters
                         const trialId = trialMessagesArr[item].id;
                         // add intermediate result message
                         trialMessagesArr[item].intermediate = [];

src/webui/src/components/Overview.tsx

@@ -42,6 +42,8 @@ interface OverviewState {
 interface OverviewProps {
     interval: number; // user select
     whichPageToFresh: string;
+    concurrency: number;
+    changeConcurrency: (val: number) => void;
 }
 
 class Overview extends React.Component<OverviewProps, OverviewState> {
@@ -61,7 +63,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                 id: '',
                 author: '',
                 experName: '',
-                runConcurren: 0,
+                runConcurren: 1,
                 maxDuration: 0,
                 execDuration: 0,
                 MaxTrialNum: 0,
@@ -264,7 +266,8 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                                 profile.succTrial += 1;
                                 const desJobDetail: Parameters = {
                                     parameters: {},
-                                    intermediate: []
+                                    intermediate: [],
+                                    multiProgress: 1
                                 };
                                 const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
                                 const acc = getFinal(tableData[item].finalMetricData);
@@ -273,6 +276,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                                 if (tempara !== undefined) {
                                     const tempLength = tempara.length;
                                     const parameters = JSON.parse(tempara[tempLength - 1]).parameters;
+                                    desJobDetail.multiProgress = tempara.length;
                                     if (typeof parameters === 'string') {
                                         desJobDetail.parameters = JSON.parse(parameters);
                                     } else {
@@ -462,6 +466,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
             accNodata, status, errorStr, trialNumber, bestAccuracy, isMultiPhase,
             titleMaxbgcolor, titleMinbgcolor, isLogCollection, experimentAPI
         } = this.state;
+        const { concurrency } = this.props;
+        trialProfile.runConcurren = concurrency;
+        Object.keys(experimentAPI).map(item => {
+            if (item === 'params') {
+                const temp = experimentAPI[item];
+                Object.keys(temp).map(index => {
+                    if (index === 'trialConcurrency') {
+                        temp[index] = concurrency;
+                    }
+                });
+            }
+        });
 
         return (
             <div className="overview">
@@ -480,7 +496,8 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                             bestAccuracy={bestAccuracy}
                             status={status}
                             errors={errorStr}
-                            updateFile={this.showSessionPro}
+                            concurrency={concurrency}
+                            changeConcurrency={this.props.changeConcurrency}
                         />
                     </Col>
                     {/* experiment parameters search space tuner assessor... */}

src/webui/src/components/SlideBar.tsx

@@ -136,7 +136,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                     onChange={this.handleVisibleChange}
                     title={
                         <span>
-                            <span>Download</span>
+                            <span>View</span>
                         </span>
                     }
                 >
@@ -234,7 +234,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
                         >
                             <a className="ant-dropdown-link" href="#">
                                 <Icon type="download" className="down-icon" />
-                                <span>Download</span>
+                                <span>View</span>
                                 {
                                     menuVisible
                                     ?

src/webui/src/components/TrialsDetail.tsx

@@ -38,6 +38,8 @@ interface TrialDetailState {
 interface TrialsDetailProps {
     interval: number;
     whichPageToFresh: string;
+    columnList: Array<string>;
+    changeColumn: (val: Array<string>) => void;
 }
 
 class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
@@ -112,7 +114,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                         let desc: Parameters = {
                             parameters: {},
                             intermediate: [],
-                            progress: 1
+                            multiProgress: 1
                         };
                         let duration = 0;
                         const id = trialJobs[item].id !== undefined
@@ -133,7 +135,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                         const tempHyper = trialJobs[item].hyperParameters;
                         if (tempHyper !== undefined) {
                             const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
-                            desc.progress = tempHyper.length;
+                            desc.multiProgress = tempHyper.length;
                             if (typeof getPara === 'string') {
                                 desc.parameters = JSON.parse(getPara);
                             } else {
@@ -397,6 +399,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
             whichGraph, searchPlaceHolder
         } = this.state;
         const source = isHasSearch ? searchResultSource : tableListSource;
+        const { columnList, changeColumn } = this.props;
         return (
             <div>
                 <div className="trial" id="tabsty">
@@ -482,6 +485,8 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     platform={experimentInfo.platform}
                     updateList={this.getDetailSource}
                     logCollection={experimentLogCollection}
+                    columnList={columnList}
+                    changeColumn={changeColumn}
                     ref={(tabList) => this.tableList = tabList}
                 />
             </div>

src/webui/src/components/overview/Progress.tsx

@@ -11,11 +11,12 @@ import '../../static/style/probar.scss';
 
 interface ProgressProps {
     trialProfile: Experiment;
+    concurrency: number;
     trialNumber: TrialNumber;
     bestAccuracy: number;
     status: string;
     errors: string;
-    updateFile: Function;
+    changeConcurrency: (val: number) => void;
 }
 
 interface ProgressState {
@@ -45,12 +46,14 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
         const { btnName } = this.state;
         if (this._isMounted) {
             if (btnName === 'Edit') {
+                // user click edit
                 this.setState(() => ({
                     isEnable: false,
                     btnName: 'Save',
                     cancelSty: 'inline-block'
                 }));
             } else {
+                // user click save button
                 axios(`${MANAGER_IP}/experiment`, {
                     method: 'GET'
                 })
@@ -81,9 +84,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
                                             message.destroy();
                                             message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()}
                                             successfully`);
-                                            // rerender trial profile message
-                                            const { updateFile } = this.props;
-                                            updateFile();
+                                            this.props.changeConcurrency(parseInt(userInputVal, 10));
                                         }
                                     })
                                         .catch(error => {

src/webui/src/components/public-child/OpenRow.tsx

@@ -98,7 +98,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                     For the entire parameter set, please refer to the following "
                                     <a href={trialink} target="_blank">{trialink}</a>".
                                     <br/>
-                                    Current Phase: {record.description.progress}.
+                                    Current Phase: {record.description.multiProgress}.
                                 </Row>
                                 :
                                 <div />

src/webui/src/components/trial-detail/DefaultMetricPoint.tsx

@@ -275,7 +275,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
             <div>
                 <div className="default-metric">
                     <div className="position">
-                        <span className="bold">optimization curve</span>
+                        <span className="bold">Optimization curve</span>
                         <Switch defaultChecked={false} onChange={this.loadDefault} />
                     </div>
                 </div>

src/webui/src/components/trial-detail/TableList.tsx

@@ -4,7 +4,7 @@ import ReactEcharts from 'echarts-for-react';
 import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select, Icon } from 'antd';
 const Option = Select.Option;
 const CheckboxGroup = Checkbox.Group;
-import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
+import { MANAGER_IP, trialJobStatus, COLUMN_INDEX, COLUMNPro } from '../../static/const';
 import { convertDuration, intermediateGraphOption, killJob, filterByStatus } from '../../static/function';
 import { TableObj, TrialJob } from '../../static/interface';
 import OpenRow from '../public-child/OpenRow';
@@ -32,6 +32,8 @@ interface TableListProps {
     platform: string;
     logCollection: boolean;
     isMultiPhase: boolean;
+    columnList: Array<string>; // user select columnKeys
+    changeColumn: (val: Array<string>) => void;
 }
 
 interface TableListState {
@@ -39,7 +41,6 @@ interface TableListState {
     modalVisible: boolean;
     isObjFinal: boolean;
     isShowColumn: boolean;
-    columnSelected: Array<string>; // user select columnKeys
     selectRows: Array<TableObj>;
     isShowCompareModal: boolean;
     selectedRowKeys: string[] | number[];
@@ -69,7 +70,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
             isObjFinal: false,
             isShowColumn: false,
             isShowCompareModal: false,
-            columnSelected: COLUMN,
             selectRows: [],
             selectedRowKeys: [], // close selected trial message after modal closed
             intermediateData: [],
@@ -120,6 +120,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
         }
     }
 
+    // intermediate button click -> intermediate graph for each trial
+    // support intermediate is dict
     selectOtherKeys = (value: string) => {
 
         const isShowDefault: boolean = value === 'default' ? true : false;
@@ -226,7 +228,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         });
 
         if (this._isMounted) {
-            this.setState(() => ({ columnSelected: wantResult }));
+            this.props.changeColumn(wantResult);
         }
     }
 
@@ -277,8 +279,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
 
     render() {
 
-        const { entries, tableSource, updateList } = this.props;
-        const { intermediateOption, modalVisible, isShowColumn, columnSelected,
+        const { entries, tableSource, updateList, columnList } = this.props;
+        const { intermediateOption, modalVisible, isShowColumn,
             selectRows, isShowCompareModal, selectedRowKeys, intermediateOtherKeys } = this.state;
         const rowSelection = {
             selectedRowKeys: selectedRowKeys,
@@ -316,8 +318,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 value: item
             });
         });
-        Object.keys(columnSelected).map(key => {
-            const item = columnSelected[key];
+        Object.keys(columnList).map(key => {
+            const item = columnList[key];
             switch (item) {
                 case 'Trial No.':
                     showColumn.push({
@@ -413,13 +415,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
                         key: 'acc',
                         width: 120,
                         sorter: (a: TableObj, b: TableObj) => {
-                            const aa = a.description.intermediate;
-                            const bb = b.description.intermediate;
-                            if (aa !== undefined && bb !== undefined) {
-                                return aa[aa.length - 1] - bb[bb.length - 1];
-                            } else {
-                                return NaN;
-                            }
+                            const oneArr = a.description.intermediate;
+                            const otherArr = b.description.intermediate;
+                            const one = (oneArr[oneArr.length - 1] !== undefined) ? oneArr[oneArr.length - 1] : 0;
+                            const other = (otherArr[otherArr.length - 1] !== undefined)
+                                ? otherArr[otherArr.length - 1] : 0;
+                            return one - other;
                         },
                         render: (text: string, record: TableObj) => {
                             return (
@@ -581,7 +582,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 >
                     <CheckboxGroup
                         options={showTitle}
-                        defaultValue={columnSelected}
+                        defaultValue={columnList}
+                        // defaultValue={columnSelected}
                         onChange={this.selectedColumn}
                         className="titleColumn"
                     />

src/webui/src/static/interface.ts

@@ -27,7 +27,7 @@ interface Parameters {
     parameters: ErrorParameter;
     logPath?: string;
     intermediate: Array<number>;
-    progress?: number;
+    multiProgress?: number;
 }
 
 interface Experiment {