Skip to content

GitLab

Commit a2f91703 authored by Lijiao's avatar Lijiao Committed by chicm-ms
Browse files

Format other final keys and fix bugs in hyper-parameter graph (#990) 

* Format other final keys and fix bugs in hyper-parameter graph
parent 8a606bb3
Show whitespace changes
Inline Side-by-side
Showing with 90 additions and 100 deletions
src/webui/src/components/Overview.tsx
View file @ a2f91703
......@@ -32,7 +32,7 @@ interface OverviewState {
accNodata: string;
trialNumber: TrialNumber;
isTop10: boolean;
titleMaxbgcolor: string;
titleMaxbgcolor?: string;
titleMinbgcolor?: string;
// trial stdout is content(false) or link(true)
isLogCollection: boolean;
......@@ -80,7 +80,6 @@ class Overview extends React.Component<{}, OverviewState> {
totalCurrentTrial: 0
},
isTop10: true,
titleMaxbgcolor: '#999',
isLogCollection: false
};
}
......@@ -103,6 +102,24 @@ class Overview extends React.Component<{}, OverviewState> {
// default logCollection is true
const logCollection = res.data.params.logCollection;
let expLogCollection: boolean = false;
const optimizeMode = res.data.params.tuner.classArgs.optimize_mode;
if (optimizeMode !== undefined) {
if (optimizeMode === 'minimize') {
if (this._isMounted) {
this.setState({
isTop10: false,
titleMinbgcolor: '#999'
});
}
} else {
if (this._isMounted) {
this.setState({
isTop10: true,
titleMaxbgcolor: '#999'
});
}
}
}
if (logCollection !== undefined && logCollection !== 'none') {
expLogCollection = true;
}
......@@ -315,8 +332,9 @@ class Overview extends React.Component<{}, OverviewState> {
indexarr.push(items.sequenceId);
});
const accOption = {
// support max show 0.0000000
grid: {
left: 40,
left: 67,
right: 40
},
tooltip: {
......
src/webui/src/components/TrialsDetail.tsx
View file @ a2f91703
......@@ -25,7 +25,6 @@ interface TrialDetailState {
experimentLogCollection: boolean;
entriesTable: number;
searchSpace: string;
defaultMetric?: Array<number>;
}
class TrialsDetail extends React.Component<{}, TrialDetailState> {
......@@ -69,8 +68,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
experimentLogCollection: false,
entriesTable: 20,
isHasSearch: false,
searchSpace: '',
defaultMetric: [0, 1]
searchSpace: ''
};
}
......@@ -87,7 +85,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
const metricSource = res1.data;
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
parameters: {},
intermediate: []
......@@ -148,32 +145,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
description: desc
});
});
// get acc max and min for hyper-parameters graph color bar max and min
const sortSource = JSON.parse(JSON.stringify(trialTable));
sortSource.sort((a: TableObj, b: TableObj) => {
if (a.acc !== undefined && b.acc !== undefined) {
return JSON.parse(a.acc.default) - JSON.parse(b.acc.default);
} else {
return NaN;
}
});
if (this._isMounted && sortSource !== undefined) {
const hyperMin = sortSource[0].acc !== undefined
?
sortSource[0].acc.default
:
'0';
const max = sortSource[sortSource.length - 1].acc;
let maxResult = '1';
if (max !== undefined) {
maxResult = max.default;
}
this.setState(() => ({
defaultMetric: [JSON.parse(hyperMin), JSON.parse(maxResult)]
}));
}
// update search data result
const { searchResultSource } = this.state;
if (searchResultSource.length !== 0) {
......@@ -326,8 +297,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
const {
tableListSource, searchResultSource, isHasSearch,
entriesTable, experimentPlatform, searchSpace,
defaultMetric, experimentLogCollection
entriesTable, experimentPlatform, searchSpace, experimentLogCollection
} = this.state;
const source = isHasSearch ? searchResultSource : tableListSource;
return (
......@@ -347,7 +317,6 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
<Para
dataSource={source}
expSearchSpace={searchSpace}
defaultMetric={defaultMetric}
/>
</Row>
</TabPane>
......
src/webui/src/components/overview/Progress.tsx
View file @ a2f91703
......@@ -161,13 +161,14 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
const bar2Percent = (bar2 / trialProfile.MaxTrialNum) * 100;
const percent = (trialProfile.execDuration / trialProfile.maxDuration) * 100;
const runDuration = convertTime(trialProfile.execDuration);
const temp = trialProfile.maxDuration - trialProfile.execDuration;
let remaining;
if (status === 'DONE') {
let errorContent;
if (temp < 0) {
remaining = '0';
} else {
remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
remaining = convertTime(temp);
}
let errorContent;
if (errors !== '') {
errorContent = (
<div className="errors">
......@@ -225,33 +226,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
<Col span={6}>
<Row className="basic colorOfbasic">
<p>Remaining</p>
<div>{remaining}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>Running</p>
<div>{trialNumber.runTrial}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>Succeeded</p>
<div>{trialNumber.succTrial}</div>
</Row>
</Col>
</Row>
<Row className="mess">
<Col span={6}>
<Row className="basic">
<p>Stopped</p>
<div>{trialNumber.stopTrial}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic">
<p>Failed</p>
<div>{trialNumber.failTrial}</div>
<div className="time">{remaining}</div>
</Row>
</Col>
<Col span={12}>
......@@ -282,6 +257,33 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
</Row>
</Col>
</Row>
<Row className="mess">
<Col span={6}>
<Row className="basic colorOfbasic">
<p>Running</p>
<div>{trialNumber.runTrial}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic colorOfbasic">
<p>Succeeded</p>
<div>{trialNumber.succTrial}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic">
<p>Stopped</p>
<div>{trialNumber.stopTrial}</div>
</Row>
</Col>
<Col span={6}>
<Row className="basic">
<p>Failed</p>
<div>{trialNumber.failTrial}</div>
</Row>
</Col>
</Row>
</Row>
);
}
......
src/webui/src/components/trial-detail/Para.tsx
View file @ a2f91703
......@@ -17,14 +17,13 @@ interface ParaState {
swapAxisArr: Array<string>;
percent: number;
paraNodata: string;
barColorMax: number;
barColorMin: number;
max: number; // graph color bar limit
min: number;
}
interface ParaProps {
dataSource: Array<TableObj>;
expSearchSpace: string;
defaultMetric: Array<number> | undefined;
}
message.config({
......@@ -58,16 +57,8 @@ class Para extends React.Component<ParaProps, ParaState> {
swapAxisArr: [],
percent: 0,
paraNodata: '',
barColorMax: this.props.defaultMetric !== undefined
?
this.props.defaultMetric[1]
:
1,
barColorMin: this.props.defaultMetric !== undefined
?
this.props.defaultMetric[0]
:
1
min: 0,
max: 1
};
}
......@@ -107,7 +98,7 @@ class Para extends React.Component<ParaProps, ParaState> {
parallelAxis.push({
dim: i,
name: dimName[i],
max: searchKey._value[0],
max: searchKey._value[0] - 1,
min: 0
});
break;
......@@ -217,7 +208,11 @@ class Para extends React.Component<ParaProps, ParaState> {
eachTrialParams.push(temp.description.parameters);
}
});
if (this._isMounted) {
this.setState({ max: Math.max(...accPara), min: Math.min(...accPara) }, () => {
this.getParallelAxis(dimName, searchRange, accPara, eachTrialParams, paraYdata);
});
}
}
// get percent value number
......@@ -233,11 +228,11 @@ class Para extends React.Component<ParaProps, ParaState> {
// deal with response data into pic data
getOption = (dataObj: ParaObj) => {
const {barColorMax, barColorMin} = this.state;
const { max, min } = this.state;
let parallelAxis = dataObj.parallelAxis;
let paralleData = dataObj.data;
let visualMapObj = {};
if (barColorMax === barColorMin) {
if (max === min) {
visualMapObj = {
type: 'continuous',
precision: 3,
......@@ -248,8 +243,8 @@ class Para extends React.Component<ParaProps, ParaState> {
bottom: '20px',
type: 'continuous',
precision: 3,
min: barColorMin,
max: barColorMax,
min: min,
max: max,
color: ['#CA0000', '#FFC400', '#90EE90']
};
}
......@@ -379,12 +374,6 @@ class Para extends React.Component<ParaProps, ParaState> {
componentWillReceiveProps(nextProps: ParaProps) {
const dataSource = nextProps.dataSource;
const expSearchSpace = nextProps.expSearchSpace;
const metricMax = nextProps.defaultMetric !== undefined
?
nextProps.defaultMetric[1]
:
1;
this.setState({ barColorMax: metricMax });
this.hyperParaPic(dataSource, expSearchSpace);
}
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ a2f91703
......@@ -386,16 +386,23 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: item,
width: 150,
render: (text: string, record: TableObj) => {
return (
<div>
{
record.acc
?
record.acc[item]
:
'--'
const temp = record.acc;
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();
}
</div>
}
} else {
other = '--';
}
return (
<div>{other}</div>
);
}
});
......
src/webui/src/static/style/progress.scss
View file @ a2f91703
......@@ -61,6 +61,11 @@
div{
color: #0573bc;
}
.time{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.mess{
......
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