Skip to content

GitLab

Commit ed2f1bdf authored by Lijiao's avatar Lijiao Committed by fishyds
Browse files

Fix bugs for v0.3 (#315) 

* Fix bugs

* update
parent f56f688b
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 113 deletions
src/webui/src/components/Overview.tsx
View file @ ed2f1bdf
......@@ -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';
......@@ -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);
......@@ -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) {
......@@ -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;
......@@ -255,6 +259,8 @@ class Overview extends React.Component<{}, SessionState> {
trialNumber: profile
});
}
// draw accuracy
this.drawPointGraph();
}
});
}
......@@ -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);
}
......@@ -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() {
......
src/webui/src/components/TrialsDetail.tsx
View file @ ed2f1bdf
......@@ -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';
......@@ -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'
});
......@@ -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
......@@ -110,7 +150,14 @@ 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,
......@@ -118,7 +165,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
id: id,
status: status,
duration: duration,
acc: acc,
acc: tableAcc,
description: desc
});
});
......
src/webui/src/components/overview/SuccessTable.tsx
View file @ ed2f1bdf
......@@ -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>
);
},
}, {
......
src/webui/src/components/trial-detail/Para.tsx
View file @ ed2f1bdf
......@@ -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);
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ ed2f1bdf
......@@ -167,34 +167,33 @@ 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);
......@@ -202,7 +201,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
duration = 0;
}
return (
<div style={{ background: bg }}>{duration}</div>
<div className="durationsty"><div>{duration}</div></div>
);
},
}, {
......
src/webui/src/static/function.ts
View file @ ed2f1bdf
import { AccurPoint } from './interface';
export const convertTime = (num: number) => {
if (num % 3600 === 0) {
return num / 3600 + 'h';
......@@ -25,33 +23,4 @@ export const convertDuration = (num: number) => {
} else {
return result;
}
};
// ACCURACY point graph option format
export const getAccuracyData = (dataObj: AccurPoint) => {
const yAxis = dataObj.yAxis;
const xAxis: Array<number> = [];
for (let i = 1; i <= yAxis.length; i++) {
xAxis.push(i);
}
return {
tooltip: {
trigger: 'item'
},
xAxis: {
name: 'Trial',
type: 'category',
data: xAxis
},
yAxis: {
name: 'Accuracy',
type: 'value',
data: yAxis
},
series: [{
symbolSize: 6,
type: 'scatter',
data: yAxis
}]
};
};
\ No newline at end of file
src/webui/src/static/interface.ts
View file @ ed2f1bdf
......@@ -37,7 +37,8 @@ interface Experiment {
// trial accuracy
interface AccurPoint {
yAxis: Array<number>;
acc: number;
index: number;
}
interface TrialNumber {
......
src/webui/src/static/style/table.scss
View file @ ed2f1bdf
......@@ -12,7 +12,19 @@
}
}
#succeTable, #tableList{
.commonTableStyle .idtitle div{
text-align: left;
}
.durationsty{
width: 80%;
margin: 0 auto;
div{
text-align: right;
margin-right: 9px;
}
}
}
/* add the brother selector to increase the priority */
#succeTable .commonTableStyle, #tableList .commonTableStyle {
......
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