Support multiphase experiment (#998)

Support multiphase experiment 

src/webui/src/components/Overview.tsx

@@ -36,6 +36,7 @@ interface OverviewState {
     titleMinbgcolor?: string;
     // trial stdout is content(false) or link(true)
     isLogCollection: boolean;
+    isMultiPhase: boolean;
 }
 
 class Overview extends React.Component<{}, OverviewState> {
@@ -80,7 +81,8 @@ class Overview extends React.Component<{}, OverviewState> {
                 totalCurrentTrial: 0
             },
             isTop10: true,
-            isLogCollection: false
+            isLogCollection: false,
+            isMultiPhase: false
         };
     }
 
@@ -102,6 +104,8 @@ class Overview extends React.Component<{}, OverviewState> {
                     // default logCollection is true
                     const logCollection = res.data.params.logCollection;
                     let expLogCollection: boolean = false;
+                    const isMultiy: boolean = res.data.params.multiPhase !== undefined
+                    ? res.data.params.multiPhase : false;
                     const optimizeMode = res.data.params.tuner.classArgs.optimize_mode;
                     if (optimizeMode !== undefined) {
                         if (optimizeMode === 'minimize') {
@@ -165,7 +169,8 @@ class Overview extends React.Component<{}, OverviewState> {
                             experimentAPI: res.data,
                             trialProfile: trialPro[0],
                             searchSpace: searchSpace,
-                            isLogCollection: expLogCollection
+                            isLogCollection: expLogCollection,
+                            isMultiPhase: isMultiy
                         });
                     }
                 }
@@ -246,8 +251,10 @@ class Overview extends React.Component<{}, OverviewState> {
                                 const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
                                 const acc = getFinal(tableData[item].finalMetricData);
                                 // if hyperparameters is undefine, show error message, else, show parameters value
-                                if (tableData[item].hyperParameters) {
-                                    const parameters = JSON.parse(tableData[item].hyperParameters[0]).parameters;
+                                const tempara = tableData[item].hyperParameters;
+                                if (tempara !== undefined) {
+                                    const tempLength = tempara.length;
+                                    const parameters = JSON.parse(tempara[tempLength - 1]).parameters;
                                     if (typeof parameters === 'string') {
                                         desJobDetail.parameters = JSON.parse(parameters);
                                     } else {
@@ -414,7 +421,7 @@ class Overview extends React.Component<{}, OverviewState> {
 
         const {
             trialProfile, searchSpace, tableData, accuracyData,
-            accNodata, status, errorStr, trialNumber, bestAccuracy,
+            accNodata, status, errorStr, trialNumber, bestAccuracy, isMultiPhase,
             titleMaxbgcolor, titleMinbgcolor, isLogCollection, experimentAPI
         } = this.state;
 
@@ -488,6 +495,7 @@ class Overview extends React.Component<{}, OverviewState> {
                         <Col span={16} id="succeTable">
                             <SuccessTable
                                 tableSource={tableData}
+                                multiphase={isMultiPhase}
                                 logCollection={isLogCollection}
                                 trainingPlatform={trialProfile.trainingServicePlatform}
                             />

src/webui/src/components/TrialsDetail.tsx

@@ -25,6 +25,7 @@ interface TrialDetailState {
     experimentLogCollection: boolean;
     entriesTable: number;
     searchSpace: string;
+    isMultiPhase: boolean;
 }
 
 class TrialsDetail extends React.Component<{}, TrialDetailState> {
@@ -68,7 +69,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             experimentLogCollection: false,
             entriesTable: 20,
             isHasSearch: false,
-            searchSpace: ''
+            searchSpace: '',
+            isMultiPhase: false
         };
     }
 
@@ -105,8 +107,9 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                 duration = (new Date().getTime() - begin) / 1000;
                             }
                         }
-                        if (trialJobs[item].hyperParameters !== undefined) {
-                            const getPara = JSON.parse(trialJobs[item].hyperParameters[0]).parameters;
+                        const tempHyper = trialJobs[item].hyperParameters;
+                        if (tempHyper !== undefined) {
+                            const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
                             if (typeof getPara === 'string') {
                                 desc.parameters = JSON.parse(getPara);
                             } else {
@@ -266,6 +269,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     // default logCollection is true
                     const logCollection = res.data.params.logCollection;
                     let expLogCollection: boolean = false;
+                    const isMultiy: boolean = res.data.params.multiPhase !== undefined
+                    ? res.data.params.multiPhase : false;
                     if (logCollection !== undefined && logCollection !== 'none') {
                         expLogCollection = true;
                     }
@@ -273,7 +278,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         this.setState({
                             experimentPlatform: trainingPlatform,
                             searchSpace: res.data.params.searchSpace,
-                            experimentLogCollection: expLogCollection
+                            experimentLogCollection: expLogCollection,
+                            isMultiPhase: isMultiy
                         });
                     }
                 }
@@ -296,7 +302,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     render() {
 
         const {
-            tableListSource, searchResultSource, isHasSearch,
+            tableListSource, searchResultSource, isHasSearch, isMultiPhase,
             entriesTable, experimentPlatform, searchSpace, experimentLogCollection
         } = this.state;
         const source = isHasSearch ? searchResultSource : tableListSource;
@@ -370,6 +376,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                 <TableList
                     entries={entriesTable}
                     tableSource={source}
+                    isMultiPhase={isMultiPhase}
                     platform={experimentPlatform}
                     updateList={this.getDetailSource}
                     logCollection={experimentLogCollection}

src/webui/src/components/overview/SuccessTable.tsx

@@ -11,6 +11,7 @@ interface SuccessTableProps {
     tableSource: Array<TableObj>;
     trainingPlatform: string;
     logCollection: boolean;
+    multiphase: boolean;
 }
 
 class SuccessTable extends React.Component<SuccessTableProps, {}> {
@@ -23,12 +24,13 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
     }
 
     openRow = (record: TableObj) => {
-        const { trainingPlatform, logCollection } = this.props;
+        const { trainingPlatform, logCollection, multiphase } = this.props;
         return (
             <OpenRow
                 trainingPlatform={trainingPlatform}
                 record={record}
                 logCollection={logCollection}
+                multiphase={multiphase}
             />
         );
     }

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

@@ -4,6 +4,8 @@ import PaiTrialLog from '../public-child/PaiTrialLog';
 import TrialLog from '../public-child/TrialLog';
 import { TableObj } from '../../static/interface';
 import { Row, Tabs, Button, message } from 'antd';
+import { MANAGER_IP } from '../../static/const';
+import '../../static/style/overview.scss';
 import JSONTree from 'react-json-tree';
 const TabPane = Tabs.TabPane;
 
@@ -11,6 +13,7 @@ interface OpenRowProps {
     trainingPlatform: string;
     record: TableObj;
     logCollection: boolean;
+    multiphase: boolean;
 }
 
 interface OpenRowState {
@@ -46,7 +49,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
     }
 
     render() {
-        const { trainingPlatform, record, logCollection } = this.props;
+        const { trainingPlatform, record, logCollection, multiphase } = this.props;
         const { idList } = this.state;
         let isClick = false;
         let isHasParameters = true;
@@ -54,9 +57,8 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         if (record.description.parameters.error) {
             isHasParameters = false;
         }
-        const openRowDataSource = {
-            parameters: record.description.parameters
-        };
+        const openRowDataSource = record.description.parameters;
+        const trialink: string = `${MANAGER_IP}/trial-jobs/${record.id}`;
         const logPathRow = record.description.logPath !== undefined
             ?
             record.description.logPath
@@ -66,6 +68,19 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
             <Row className="openRowContent hyperpar">
                 <Tabs tabPosition="left" className="card">
                     <TabPane tab="Parameters" key="1">
+                        {
+                            multiphase
+                                ?
+                                <Row className="link">
+                                    Trails for multiphase experiment will return a set of parameters,
+                                    we are listing the latest parameter in webportal.
+                                    <br />
+                                    For the entire parameter set, please refer to the following "
+                                    <a href={trialink} target="_blank">{trialink}</a>".
+                                </Row>
+                                :
+                                <div />
+                        }
                         {
                             isHasParameters
                                 ?
@@ -74,13 +89,13 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                         {
                                             isClick
                                                 ?
-                                                <pre>{JSON.stringify(openRowDataSource.parameters, null, 4)}</pre>
+                                                <pre>{JSON.stringify(openRowDataSource, null, 4)}</pre>
                                                 :
                                                 <JSONTree
                                                     hideRoot={true}
                                                     shouldExpandNode={() => true}  // default expandNode
                                                     getItemString={() => (<span />)}  // remove the {} items
-                                                    data={openRowDataSource.parameters}
+                                                    data={openRowDataSource}
                                                 />
                                         }
                                     </Row>

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

@@ -32,6 +32,7 @@ interface TableListProps {
     updateList: Function;
     platform: string;
     logCollection: boolean;
+    isMultiPhase: boolean;
 }
 
 interface TableListState {
@@ -175,12 +176,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
     }
 
     openRow = (record: TableObj) => {
-        const { platform, logCollection } = this.props;
+        const { platform, logCollection, isMultiPhase } = this.props;
         return (
             <OpenRow
                 trainingPlatform={platform}
                 record={record}
                 logCollection={logCollection}
+                multiphase={isMultiPhase}
             />
         );
     }

src/webui/src/static/function.ts

@@ -34,11 +34,11 @@ const convertDuration = (num: number) => {
 
 // get final result value
 // draw Accuracy point graph
-const getFinalResult = (final: FinalResult) => {
+const getFinalResult = (final: Array<FinalResult>) => {
     let acc;
     let showDefault = 0;
     if (final) {
-        acc = JSON.parse(final[0].data);
+        acc = JSON.parse(final[final.length - 1].data);
         if (typeof (acc) === 'object') {
             if (acc.default) {
                 showDefault = acc.default;
@@ -53,10 +53,10 @@ const getFinalResult = (final: FinalResult) => {
 };
 
 // get final result value // acc obj 
-const getFinal = (final: FinalResult) => {
+const getFinal = (final: Array<FinalResult>) => {
     let showDefault: FinalType;
     if (final) {
-        showDefault = JSON.parse(final[0].data);
+        showDefault = JSON.parse(final[final.length - 1].data);
         if (typeof showDefault === 'number') {
             showDefault = { default: showDefault };
         }

src/webui/src/static/style/overview.scss

@@ -49,3 +49,7 @@
     }
 }
 
+.link{
+    margin-bottom: 10px;
+}
+