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