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

Commit

Permalink
Show intermediate result (#384)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lvybriage @yds05
lvybriage authored and yds05 committed Nov 22, 2018
1 parent 7035f3e commit 8d63b10
Show file tree
Hide file tree
Showing 8 changed files with 68 additions and 56 deletions.
4 changes: 3 additions & 1 deletion src/webui/src/components/SlideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ class SlideBar extends React.Component<{}, {}> {
return (
<ul className="nav">
<li className="logo">
<img src={require('../static/img/logo.png')} style={{ width: 156 }} alt="NNI logo" />
<Link to={'/oview'}>
<img src={require('../static/img/logo.png')} style={{ width: 156 }} alt="NNI logo" />
</Link>
</li>
<li className="tab">
<Link to={'/oview'} activeClassName="high">
Expand Down
43 changes: 29 additions & 14 deletions src/webui/src/components/TrialsDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import axios from 'axios';
import { MANAGER_IP } from '../static/const';
import { Row, Col, Button, Tabs, Input } from 'antd';
const Search = Input.Search;
import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy, } from '../static/interface';
import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
import Accuracy from './overview/Accuracy';
import Duration from './trial-detail/Duration';
import Title1 from './overview/Title1';
Expand All @@ -16,6 +16,7 @@ interface TrialDetailState {
accSource: object;
accNodata: string;
tableListSource: Array<TableObj>;
tableBaseSource: Array<TableObj>;
}

class TrialsDetail extends React.Component<{}, TrialDetailState> {
Expand All @@ -30,7 +31,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
this.state = {
accSource: {},
accNodata: '',
tableListSource: []
tableListSource: [],
tableBaseSource: []
};
}
// trial accuracy graph
Expand Down Expand Up @@ -129,17 +131,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {

drawTableList = () => {

axios(`${MANAGER_IP}/trial-jobs`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
axios
.all([
axios.get(`${MANAGER_IP}/trial-jobs`),
axios.get(`${MANAGER_IP}/metric-data`)
])
.then(axios.spread((res, res1) => {
if (res.status === 200 && res1.status === 200) {
const trialJobs = res.data;
const metricSource = res1.data;
const trialTable: Array<TableObj> = [];
Object.keys(trialJobs).map(item => {
// only succeeded trials have finalMetricData
let desc: Parameters = {
parameters: {}
parameters: {},
intermediate: []
};
let acc;
let tableAcc = 0;
Expand Down Expand Up @@ -171,6 +177,14 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
desc.isLink = true;
}
}
let mediate: Array<string> = [];
Object.keys(metricSource).map(key => {
const items = metricSource[key];
if (items.trialJobId === id) {
mediate.push(items.data);
}
});
desc.intermediate = mediate;
if (trialJobs[item].finalMetricData !== undefined) {
acc = JSON.parse(trialJobs[item].finalMetricData.data);
if (typeof (acc) === 'object') {
Expand All @@ -193,11 +207,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
});
if (this._isMounted) {
this.setState(() => ({
tableListSource: trialTable
tableListSource: trialTable,
tableBaseSource: trialTable
}));
}
}
});
}));
}

callback = (key: string) => {
Expand Down Expand Up @@ -228,10 +243,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
searchTrialNo = (value: string) => {

window.clearInterval(this.interTableList);
const { tableListSource } = this.state;
const { tableBaseSource } = this.state;
const searchResultList: Array<TableObj> = [];
Object.keys(tableListSource).map(key => {
const item = tableListSource[key];
Object.keys(tableBaseSource).map(key => {
const item = tableBaseSource[key];
if (item.sequenceId.toString() === value) {
searchResultList.push(item);
}
Expand Down Expand Up @@ -271,7 +286,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
accSource, accNodata,
tableListSource
} = this.state;

const titleOfacc = (
<Title1 text="Default Metric" icon="3.png" />
);
Expand Down
12 changes: 8 additions & 4 deletions src/webui/src/components/overview/Progress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,16 @@ class Progressed extends React.Component<ProgressProps, {}> {
trialNumber, bestAccuracy,
status, errors
} = this.props;
// remaining time
const bar2 = trialNumber.totalCurrentTrial - trialNumber.waitTrial - trialNumber.unknowTrial;
const bar2Percent = (bar2 / trialProfile.MaxTrialNum) * 100;
const percent = (trialProfile.execDuration / trialProfile.maxDuration) * 100;
const runDuration = convertTime(trialProfile.execDuration);
const remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
let remaining;
if (status === 'DONE') {
remaining = '0';
} else {
remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
}
let errorContent;
if (errors !== '') {
errorContent = (
Expand Down Expand Up @@ -81,7 +85,7 @@ class Progressed extends React.Component<ProgressProps, {}> {
maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
/>
<Row className="basic colorOfbasic mess">
<p>Best Accuracy</p>
<p>Best Default Metric</p>
<div>{bestAccuracy}</div>
</Row>
<Row className="mess">
Expand All @@ -99,7 +103,7 @@ class Progressed extends React.Component<ProgressProps, {}> {
</Col>
<Col span={7}>
<Row className="basic colorOfbasic">
<p>Duration</p>
<p>MaxDuration</p>
<div>{convertTime(trialProfile.maxDuration)}</div>
</Row>
</Col>
Expand Down
10 changes: 1 addition & 9 deletions src/webui/src/components/trial-detail/Duration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,14 +44,6 @@ class Duration extends React.Component<{}, DurationState> {
type: 'shadow'
}
},
// title: {
// left: 'center',
// text: 'Trial Duration',
// textStyle: {
// fontSize: 18,
// color: '#333'
// }
// },
grid: {
bottom: '3%',
containLabel: true,
Expand Down Expand Up @@ -108,7 +100,7 @@ class Duration extends React.Component<{}, DurationState> {
} else {
duration = (new Date().getTime() - start) / 1000;
}
trialId.push(trialJobs[item].id);
trialId.push(trialJobs[item].sequenceId);
trialTime.push(duration);
}
});
Expand Down
24 changes: 5 additions & 19 deletions src/webui/src/components/trial-detail/Para.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import axios from 'axios';
import { MANAGER_IP } from '../../static/const';
import ReactEcharts from 'echarts-for-react';
import { Row, Col, Select, Button, message } from 'antd';
import { HoverName, ParaObj, VisualMapValue, Dimobj } from '../../static/interface';
import { ParaObj, VisualMapValue, Dimobj } from '../../static/interface';
const Option = Select.Option;
require('echarts/lib/chart/parallel');
require('echarts/lib/component/tooltip');
Expand Down Expand Up @@ -243,30 +243,19 @@ class Para extends React.Component<{}, ParaState> {
};
} else {
visualMapObj = {
bottom: '20px',
type: 'continuous',
precision: 3,
min: visualValue.minAccuracy,
max: visualValue.maxAccuracy,
color: ['#CA0000', '#FFC400', '#90EE90']
color: ['#CA0000', '#FFC400', '#90EE90'],
calculable: true
};
}
let optionown = {
parallelAxis,
tooltip: {
trigger: 'item',
formatter: function (params: HoverName) {
return params.name;
}
},
toolbox: {
show: true,
left: 'right',
iconStyle: {
normal: {
borderColor: '#ddd'
}
},
z: 202
trigger: 'item'
},
parallel: {
parallelAxisDefault: {
Expand All @@ -276,9 +265,6 @@ class Para extends React.Component<{}, ParaState> {
}
},
visualMap: visualMapObj,
highlight: {
type: 'highlight'
},
series: {
type: 'parallel',
smooth: true,
Expand Down
13 changes: 11 additions & 2 deletions src/webui/src/components/trial-detail/TableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
data: sequence
},
yAxis: {
name: 'Accuracy',
name: 'Default Metric',
type: 'value',
data: intermediateArr
},
Expand Down Expand Up @@ -165,7 +165,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'sequenceId',
width: 120,
className: 'tableHead',
sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number),
sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number)
}, {
title: 'Id',
dataIndex: 'id',
Expand Down Expand Up @@ -305,6 +305,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
const parametersRow = {
parameters: record.description.parameters
};
const intermediate = record.description.intermediate;
let showIntermediate = '';
if (intermediate && intermediate.length > 0) {
showIntermediate = intermediate.join(', ');
}
let isLogLink: boolean = false;
const logPathRow = record.description.logPath;
if (record.description.isLink !== undefined) {
Expand Down Expand Up @@ -340,6 +345,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
<span className="logContent">{logPathRow}</span>
</div>
}
<Row className="intermediate logpath">
<span className="logName">Intermediate Result:</span>
{showIntermediate}
</Row>
</pre>
);
};
Expand Down
10 changes: 4 additions & 6 deletions src/webui/src/static/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface Parameters {
parameters: ErrorParameter;
logPath?: string;
isLink?: boolean;
intermediate?: Array<string>;
}

interface Experiment {
Expand Down Expand Up @@ -76,10 +77,6 @@ interface Dimobj {
data?: string[];
}

interface HoverName {
name: string;
}

interface ParaObj {
data: number[][];
parallelAxis: Array<Dimobj>;
Expand All @@ -90,8 +87,9 @@ interface VisualMapValue {
minAccuracy: number;
}

export {TableObj, Parameters, Experiment,
export {
TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy,
HoverName, ParaObj, VisualMapValue, Dimobj
ParaObj, VisualMapValue, Dimobj
};
8 changes: 7 additions & 1 deletion src/webui/src/static/style/logPath.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.logpath{
margin-left: 10px;

font-size: 14px;
.logName{
color: #268BD2;
margin-right: 5px;
}

.logContent{
Expand All @@ -18,3 +19,8 @@
color: blue;
text-decoration: underline;
}

.intermediate{
white-space: normal;
font-size: 14px;
}

0 comments on commit 8d63b10

Please sign in to comment.