Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Commit

Permalink
Fix bugs for v0.3 (#315)
Browse files Browse the repository at this point in the history 
* Fix bugs

* update
  • Loading branch information
@lvybriage @yds05
lvybriage authored and yds05 committed Nov 2, 2018
1 parent f56f688 commit ed2f1bd
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 113 deletions.
106 changes: 63 additions & 43 deletions src/webui/src/components/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,8 @@ import { Row, Col } from 'antd';
import { MANAGER_IP, overviewItem } from '../static/const';
import {
Experiment, TableObj,
Parameters, AccurPoint, TrialNumber
Parameters, TrialNumber
} from '../static/interface';
import {
getAccuracyData
} from '../static/function';
import SuccessTable from './overview/SuccessTable';
import Title1 from './overview/Title1';
import Progressed from './overview/Progress';
Expand Down Expand Up @@ -42,7 +39,6 @@ class Overview extends React.Component<{}, SessionState> {
public _isMounted = false;
public intervalID = 0;
public intervalProfile = 1;
public intervalAccuracy = 2;

constructor(props: {}) {
super(props);
Expand Down Expand Up @@ -212,8 +208,16 @@ class Overview extends React.Component<{}, SessionState> {
};
const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
let acc;
let tableAcc = 0;
if (tableData[item].finalMetricData) {
acc = parseFloat(tableData[item].finalMetricData.data);
acc = JSON.parse(tableData[item].finalMetricData.data);
if (typeof (acc) === 'object') {
if (acc.default) {
tableAcc = acc.default;
}
} else {
tableAcc = acc;
}
}
// if hyperparameters is undefine, show error message, else, show parameters value
if (tableData[item].hyperParameters) {
Expand All @@ -234,7 +238,7 @@ class Overview extends React.Component<{}, SessionState> {
id: tableData[item].id,
duration: duration,
status: tableData[item].status,
acc: acc,
acc: tableAcc,
description: desJobDetail
});
break;
Expand All @@ -255,6 +259,8 @@ class Overview extends React.Component<{}, SessionState> {
trialNumber: profile
});
}
// draw accuracy
this.drawPointGraph();
}
});
}
Expand Down Expand Up @@ -311,46 +317,61 @@ class Overview extends React.Component<{}, SessionState> {
// trial accuracy graph
drawPointGraph = () => {

axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
})
.then(res => {
if (res.status === 200 && this._isMounted) {
const accData = res.data;
const accArr: Array<number> = [];
const accY: Array<AccurPoint> = [];
Object.keys(accData).map(item => {
if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
accArr.push(parseFloat(accData[item].finalMetricData.data));
}
});
accArr.sort((a, b) => { return a - b; });
accArr.length = Math.min(10, accArr.length);
accY.push({ yAxis: accArr });
let optionObj = getAccuracyData(accY[0]);
const bestAccnum = Math.max(...accArr);
this.setState({ accuracyData: optionObj }, () => {
if (accArr.length === 0) {
this.setState({
accNodata: 'No data'
});
} else {
this.setState({
accNodata: '',
bestAccuracy: bestAccnum.toFixed(6)
});
}
});
}
});
const { tableData } = this.state;
const sourcePoint = JSON.parse(JSON.stringify(tableData));
sourcePoint.sort((a: TableObj, b: TableObj) => {
if (a.sequenceId && b.sequenceId) {
return a.sequenceId - b.sequenceId;
} else {
return NaN;
}
});
const accarr: Array<number> = [];
const indexarr: Array<number> = [];
Object.keys(sourcePoint).map(item => {
const items = sourcePoint[item];
accarr.push(items.acc);
indexarr.push(items.sequenceId);
});
const bestAccnum = Math.max(...accarr);
const accOption = {
tooltip: {
trigger: 'item'
},
xAxis: {
name: 'Trial',
type: 'category',
data: indexarr
},
yAxis: {
name: 'Accuracy',
type: 'value',
data: accarr
},
series: [{
symbolSize: 6,
type: 'scatter',
data: accarr
}]
};
this.setState({ accuracyData: accOption }, () => {
if (accarr.length === 0) {
this.setState({
accNodata: 'No data'
});
} else {
this.setState({
accNodata: '',
bestAccuracy: bestAccnum.toFixed(6)
});
}
});
}

componentDidMount() {
this._isMounted = true;
this.showSessionPro();
this.showTrials();
this.drawPointGraph();
this.intervalAccuracy = window.setInterval(this.drawPointGraph, 10000);
this._isMounted = true;
this.intervalID = window.setInterval(this.showTrials, 10000);
this.intervalProfile = window.setInterval(this.showSessionPro, 60000);
}
Expand All @@ -359,7 +380,6 @@ class Overview extends React.Component<{}, SessionState> {
this._isMounted = false;
window.clearInterval(this.intervalID);
window.clearInterval(this.intervalProfile);
window.clearInterval(this.intervalAccuracy);
}

render() {
Expand Down
69 changes: 58 additions & 11 deletions src/webui/src/components/TrialsDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import * as React from 'react';
import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Tabs } from 'antd';
import { getAccuracyData } from '../static/function';
import { TableObj, Parameters, AccurPoint } from '../static/interface';
import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration';
Expand Down Expand Up @@ -42,17 +41,57 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200 && this._isMounted) {
const accData = res.data;
const accArr: Array<number> = [];
const accY: Array<AccurPoint> = [];
const accSource: Array<AccurPoint> = [];
Object.keys(accData).map(item => {
if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
accArr.push(parseFloat(accData[item].finalMetricData.data));
let acc;
let tableAcc;
if (accData[item].finalMetricData) {
acc = JSON.parse(accData[item].finalMetricData.data);
if (typeof (acc) === 'object') {
if (acc.default) {
tableAcc = acc.default;
}
} else {
tableAcc = acc;
}
}
accSource.push({
acc: tableAcc,
index: accData[item].sequenceId
});
}
});
accY.push({ yAxis: accArr });
const optionObj = getAccuracyData(accY[0]);
this.setState({ accSource: optionObj }, () => {
if (accArr.length === 0) {
const accarr: Array<number> = [];
const indexarr: Array<number> = [];
Object.keys(accSource).map(item => {
const items = accSource[item];
accarr.push(items.acc);
indexarr.push(items.index);
});
const allAcuracy = {
tooltip: {
trigger: 'item'
},
xAxis: {
name: 'Trial',
type: 'category',
data: indexarr
},
yAxis: {
name: 'Accuracy',
type: 'value',
data: accarr
},
series: [{
symbolSize: 6,
type: 'scatter',
data: accarr
}]
};

this.setState({ accSource: allAcuracy }, () => {
if (accarr.length === 0) {
this.setState({
accNodata: 'No data'
});
Expand Down Expand Up @@ -80,7 +119,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
let desc: Parameters = {
parameters: {}
};
let acc = 0;
let acc;
let tableAcc = 0;
let duration = 0;
const id = trialJobs[item].id !== undefined
? trialJobs[item].id
Expand Down Expand Up @@ -110,15 +150,22 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
}
}
if (trialJobs[item].finalMetricData !== undefined) {
acc = parseFloat(trialJobs[item].finalMetricData.data);
acc = JSON.parse(trialJobs[item].finalMetricData.data);
if (typeof (acc) === 'object') {
if (acc.default) {
tableAcc = acc.default;
}
} else {
tableAcc = acc;
}
}
trialTable.push({
key: trialTable.length,
sequenceId: trialJobs[item].sequenceId,
id: id,
status: status,
duration: duration,
acc: acc,
acc: tableAcc,
description: desc
});
});
Expand Down
24 changes: 12 additions & 12 deletions src/webui/src/components/overview/SuccessTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,34 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {

let bgColor = '';
const columns = [{
title: 'Number',
title: 'Trial No.',
dataIndex: 'sequenceId',
key: 'sequenceId',
width: 60,
className: 'tableHead',
render: (text: string, record: TableObj) => {
return (
<span>#{record.sequenceId}</span>
);
}
width: 140,
className: 'tableHead'
}, {
title: 'Id',
dataIndex: 'id',
key: 'id',
width: 150,
className: 'tableHead'
width: 60,
className: 'tableHead idtitle',
render: (text: string, record: TableObj) => {
return (
<div>{record.id}</div>
);
},
}, {
title: 'Duration',
dataIndex: 'duration',
key: 'duration',
width: 150,
width: 140,
render: (text: string, record: TableObj) => {
let duration;
if (record.duration) {
duration = convertDuration(record.duration);
}
return (
<div>{duration}</div>
<div className="durationsty"><div>{duration}</div></div>
);
},
}, {
Expand Down
12 changes: 11 additions & 1 deletion src/webui/src/components/trial-detail/Para.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,17 @@ class Para extends React.Component<{}, ParaState> {
if (accParaData[item].status === 'SUCCEEDED') {
if (accParaData[item].finalMetricData && accParaData[item].hyperParameters) {
// get acc array
accPara.push(parseFloat(accParaData[item].finalMetricData.data));
let acc;
let accReal;
acc = JSON.parse(accParaData[item].finalMetricData.data);
if (typeof (acc) === 'object') {
if (acc.default) {
accReal = acc.default;
}
} else {
accReal = acc;
}
accPara.push(accReal);
// get dim and every line specific number
const temp = JSON.parse(accParaData[item].hyperParameters).parameters;
speValue.push(temp);
Expand Down
25 changes: 12 additions & 13 deletions src/webui/src/components/trial-detail/TableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,42 +167,41 @@ class TableList extends React.Component<TableListProps, TableListState> {
});
});
const columns = [{
title: 'Number',
title: 'Trial No.',
dataIndex: 'sequenceId',
key: 'sequenceId',
width: 120,
className: 'tableHead',
sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number),
render: (text: string, record: TableObj) => {
return (
<span>#{record.sequenceId}</span>
);
}
sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number)
}, {
title: 'Id',
dataIndex: 'id',
key: 'id',
width: 150,
className: 'tableHead',
width: 60,
className: 'tableHead idtitle',
// the sort of string
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id)
sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
render: (text: string, record: TableObj) => {
return (
<div>{record.id}</div>
);
}
}, {
title: 'Duration',
dataIndex: 'duration',
key: 'duration',
width: 150,
width: 140,
// the sort of number
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => {
const bg = record.color;
let duration;
if (record.duration !== undefined && record.duration > 0) {
duration = convertDuration(record.duration);
} else {
duration = 0;
}
return (
<div style={{ background: bg }}>{duration}</div>
<div className="durationsty"><div>{duration}</div></div>
);
},
}, {
Expand Down
Loading

0 comments on commit ed2f1bd

Please sign in to comment.