Skip to content

GitLab

Commit 13bec759 authored by Lijiao's avatar Lijiao Committed by Guoxin
Browse files

fix bugs, sort, concurrency, multi (#1451) 

fix bugs about sort & concurrency & multi-phase
parent d754574c
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 37 deletions
src/webui/src/App.tsx
View file @ 13bec759
import * as React from 'react';
import { Row, Col } from 'antd';
import axios from 'axios';
import { COLUMN, MANAGER_IP } from './static/const';
import './App.css';
import SlideBar from './components/SlideBar';
interface AppState {
interval: number;
whichPageToFresh: string;
columnList: Array<string>;
concurrency: number;
}
class App extends React.Component<{}, AppState> {
......@@ -14,7 +18,9 @@ class App extends React.Component<{}, AppState> {
super(props);
this.state = {
interval: 10, // sendons
whichPageToFresh: ''
whichPageToFresh: '',
columnList: COLUMN,
concurrency: 1
};
}
......@@ -31,25 +37,57 @@ class App extends React.Component<{}, AppState> {
}
}
changeColumn = (columnList: Array<string>) => {
if (this._isMounted === true) {
this.setState(() => ({ columnList: columnList }));
}
}
changeConcurrency = (val: number) => {
if (this._isMounted === true) {
this.setState(() => ({ concurrency: val }));
}
}
getConcurrency = () => {
axios(`${MANAGER_IP}/experiment`, {
method: 'GET'
})
.then(res => {
if (res.status === 200) {
const params = res.data.params;
if (this._isMounted) {
this.setState(() => ({ concurrency: params.trialConcurrency }));
}
}
});
}
componentDidMount() {
this._isMounted = true;
this.getConcurrency();
}
componentWillUnmount() {
this._isMounted = false;
}
render() {
const { interval, whichPageToFresh } = this.state;
const { interval, whichPageToFresh, columnList, concurrency } = this.state;
const reactPropsChildren = React.Children.map(this.props.children, child =>
// tslint:disable-next-line:no-any
React.cloneElement(child as React.ReactElement<any>, { interval, whichPageToFresh })
React.cloneElement(
// tslint:disable-next-line:no-any
child as React.ReactElement<any>, {
interval, whichPageToFresh,
columnList, changeColumn: this.changeColumn,
concurrency, changeConcurrency: this.changeConcurrency
})
);
return (
<Row className="nni" style={{ minHeight: window.innerHeight }}>
<Row className="header">
<Col span={1} />
<Col className="headerCon" span={22}>
<SlideBar changeInterval={this.changeInterval} changeFresh={this.changeFresh}/>
<SlideBar changeInterval={this.changeInterval} changeFresh={this.changeFresh} />
</Col>
<Col span={1} />
</Row>
......
src/webui/src/components/Modal/ExperimentDrawer.tsx
View file @ 13bec759
......@@ -42,8 +42,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
let trialMessagesArr = res1.data;
const interResultList = res2.data;
Object.keys(trialMessagesArr).map(item => {
// transform hyperparameters as object to show elegantly
trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters);
// not deal with trial's hyperParameters
const trialId = trialMessagesArr[item].id;
// add intermediate result message
trialMessagesArr[item].intermediate = [];
......
src/webui/src/components/Overview.tsx
View file @ 13bec759
......@@ -42,6 +42,8 @@ interface OverviewState {
interface OverviewProps {
interval: number; // user select
whichPageToFresh: string;
concurrency: number;
changeConcurrency: (val: number) => void;
}
class Overview extends React.Component<OverviewProps, OverviewState> {
......@@ -61,7 +63,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
id: '',
author: '',
experName: '',
runConcurren: 0,
runConcurren: 1,
maxDuration: 0,
execDuration: 0,
MaxTrialNum: 0,
......@@ -264,7 +266,8 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
profile.succTrial += 1;
const desJobDetail: Parameters = {
parameters: {},
intermediate: []
intermediate: [],
multiProgress: 1
};
const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
const acc = getFinal(tableData[item].finalMetricData);
......@@ -273,6 +276,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
if (tempara !== undefined) {
const tempLength = tempara.length;
const parameters = JSON.parse(tempara[tempLength - 1]).parameters;
desJobDetail.multiProgress = tempara.length;
if (typeof parameters === 'string') {
desJobDetail.parameters = JSON.parse(parameters);
} else {
......@@ -462,6 +466,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
accNodata, status, errorStr, trialNumber, bestAccuracy, isMultiPhase,
titleMaxbgcolor, titleMinbgcolor, isLogCollection, experimentAPI
} = this.state;
const { concurrency } = this.props;
trialProfile.runConcurren = concurrency;
Object.keys(experimentAPI).map(item => {
if (item === 'params') {
const temp = experimentAPI[item];
Object.keys(temp).map(index => {
if (index === 'trialConcurrency') {
temp[index] = concurrency;
}
});
}
});
return (
<div className="overview">
......@@ -480,7 +496,8 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
bestAccuracy={bestAccuracy}
status={status}
errors={errorStr}
updateFile={this.showSessionPro}
concurrency={concurrency}
changeConcurrency={this.props.changeConcurrency}
/>
</Col>
{/* experiment parameters search space tuner assessor... */}
......
src/webui/src/components/SlideBar.tsx
View file @ 13bec759
......@@ -136,7 +136,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
onChange={this.handleVisibleChange}
title={
<span>
<span>Download</span>
<span>View</span>
</span>
}
>
......@@ -234,7 +234,7 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
>
<a className="ant-dropdown-link" href="#">
<Icon type="download" className="down-icon" />
<span>Download</span>
<span>View</span>
{
menuVisible
?
......
src/webui/src/components/TrialsDetail.tsx
View file @ 13bec759
......@@ -38,6 +38,8 @@ interface TrialDetailState {
interface TrialsDetailProps {
interval: number;
whichPageToFresh: string;
columnList: Array<string>;
changeColumn: (val: Array<string>) => void;
}
class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
......@@ -112,7 +114,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
let desc: Parameters = {
parameters: {},
intermediate: [],
progress: 1
multiProgress: 1
};
let duration = 0;
const id = trialJobs[item].id !== undefined
......@@ -133,7 +135,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
const tempHyper = trialJobs[item].hyperParameters;
if (tempHyper !== undefined) {
const getPara = JSON.parse(tempHyper[tempHyper.length - 1]).parameters;
desc.progress = tempHyper.length;
desc.multiProgress = tempHyper.length;
if (typeof getPara === 'string') {
desc.parameters = JSON.parse(getPara);
} else {
......@@ -397,6 +399,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
whichGraph, searchPlaceHolder
} = this.state;
const source = isHasSearch ? searchResultSource : tableListSource;
const { columnList, changeColumn } = this.props;
return (
<div>
<div className="trial" id="tabsty">
......@@ -482,6 +485,8 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
platform={experimentInfo.platform}
updateList={this.getDetailSource}
logCollection={experimentLogCollection}
columnList={columnList}
changeColumn={changeColumn}
ref={(tabList) => this.tableList = tabList}
/>
</div>
......
src/webui/src/components/overview/Progress.tsx
View file @ 13bec759
......@@ -11,11 +11,12 @@ import '../../static/style/probar.scss';
interface ProgressProps {
trialProfile: Experiment;
concurrency: number;
trialNumber: TrialNumber;
bestAccuracy: number;
status: string;
errors: string;
updateFile: Function;
changeConcurrency: (val: number) => void;
}
interface ProgressState {
......@@ -45,12 +46,14 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
const { btnName } = this.state;
if (this._isMounted) {
if (btnName === 'Edit') {
// user click edit
this.setState(() => ({
isEnable: false,
btnName: 'Save',
cancelSty: 'inline-block'
}));
} else {
// user click save button
axios(`${MANAGER_IP}/experiment`, {
method: 'GET'
})
......@@ -81,9 +84,7 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
message.destroy();
message.success(`Update ${CONTROLTYPE[1].toLocaleLowerCase()}
successfully`);
// rerender trial profile message
const { updateFile } = this.props;
updateFile();
this.props.changeConcurrency(parseInt(userInputVal, 10));
}
})
.catch(error => {
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ 13bec759
......@@ -98,7 +98,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
For the entire parameter set, please refer to the following "
<a href={trialink} target="_blank">{trialink}</a>".
<br/>
Current Phase: {record.description.progress}.
Current Phase: {record.description.multiProgress}.
</Row>
:
<div />
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ 13bec759
......@@ -275,7 +275,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
<div>
<div className="default-metric">
<div className="position">
<span className="bold">optimization curve</span>
<span className="bold">Optimization curve</span>
<Switch defaultChecked={false} onChange={this.loadDefault} />
</div>
</div>
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 13bec759
......@@ -4,7 +4,7 @@ import ReactEcharts from 'echarts-for-react';
import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select, Icon } from 'antd';
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX, COLUMNPro } from '../../static/const';
import { MANAGER_IP, trialJobStatus, COLUMN_INDEX, COLUMNPro } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob, filterByStatus } from '../../static/function';
import { TableObj, TrialJob } from '../../static/interface';
import OpenRow from '../public-child/OpenRow';
......@@ -32,6 +32,8 @@ interface TableListProps {
platform: string;
logCollection: boolean;
isMultiPhase: boolean;
columnList: Array<string>; // user select columnKeys
changeColumn: (val: Array<string>) => void;
}
interface TableListState {
......@@ -39,7 +41,6 @@ interface TableListState {
modalVisible: boolean;
isObjFinal: boolean;
isShowColumn: boolean;
columnSelected: Array<string>; // user select columnKeys
selectRows: Array<TableObj>;
isShowCompareModal: boolean;
selectedRowKeys: string[] | number[];
......@@ -69,7 +70,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
isObjFinal: false,
isShowColumn: false,
isShowCompareModal: false,
columnSelected: COLUMN,
selectRows: [],
selectedRowKeys: [], // close selected trial message after modal closed
intermediateData: [],
......@@ -120,6 +120,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
// intermediate button click -> intermediate graph for each trial
// support intermediate is dict
selectOtherKeys = (value: string) => {
const isShowDefault: boolean = value === 'default' ? true : false;
......@@ -226,7 +228,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
});
if (this._isMounted) {
this.setState(() => ({ columnSelected: wantResult }));
this.props.changeColumn(wantResult);
}
}
......@@ -277,8 +279,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
render() {
const { entries, tableSource, updateList } = this.props;
const { intermediateOption, modalVisible, isShowColumn, columnSelected,
const { entries, tableSource, updateList, columnList } = this.props;
const { intermediateOption, modalVisible, isShowColumn,
selectRows, isShowCompareModal, selectedRowKeys, intermediateOtherKeys } = this.state;
const rowSelection = {
selectedRowKeys: selectedRowKeys,
......@@ -316,8 +318,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
value: item
});
});
Object.keys(columnSelected).map(key => {
const item = columnSelected[key];
Object.keys(columnList).map(key => {
const item = columnList[key];
switch (item) {
case 'Trial No.':
showColumn.push({
......@@ -413,13 +415,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'acc',
width: 120,
sorter: (a: TableObj, b: TableObj) => {
const aa = a.description.intermediate;
const bb = b.description.intermediate;
if (aa !== undefined && bb !== undefined) {
return aa[aa.length - 1] - bb[bb.length - 1];
} else {
return NaN;
}
const oneArr = a.description.intermediate;
const otherArr = b.description.intermediate;
const one = (oneArr[oneArr.length - 1] !== undefined) ? oneArr[oneArr.length - 1] : 0;
const other = (otherArr[otherArr.length - 1] !== undefined)
? otherArr[otherArr.length - 1] : 0;
return one - other;
},
render: (text: string, record: TableObj) => {
return (
......@@ -581,7 +582,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
>
<CheckboxGroup
options={showTitle}
defaultValue={columnSelected}
defaultValue={columnList}
// defaultValue={columnSelected}
onChange={this.selectedColumn}
className="titleColumn"
/>
......
src/webui/src/static/interface.ts
View file @ 13bec759
......@@ -27,7 +27,7 @@ interface Parameters {
parameters: ErrorParameter;
logPath?: string;
intermediate: Array<number>;
progress?: number;
multiProgress?: number;
}
interface Experiment {
......
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