Skip to content

GitLab

Commit 6e2c08db authored by Lijiao's avatar Lijiao Committed by SparkSnail
Browse files

Support multiphase experiment (#998) 

Support multiphase experiment
parent e6b3828c
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 22 deletions
src/webui/src/components/Overview.tsx
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -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
View file @ 6e2c08db
......@@ -49,3 +49,7 @@
}
}
.link{
margin-bottom: 10px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment