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

Fix bugs for v0.3 #315

Merged
merged 2 commits into from
Nov 2, 2018
Merged

Fix bugs for v0.3 #315

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3bcd30d
Fix bugs
Nov 2, 2018
5f3ef85
update
Nov 2, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 63 additions & 43 deletions src/webui/src/components/Overview.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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