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

[v1.1] fix some bugs about webui #1632

Merged
merged 1 commit into from
Oct 21, 2019
Merged

[v1.1] fix some bugs about webui #1632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
41 changes: 25 additions & 16 deletions src/webui/src/components/Modal/Compare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,11 @@ class Compare extends React.Component<CompareProps, {}> {
durationList.push(temp.duration);
parameterList.push(temp.description.parameters);
});
let isComplexSearchSpace;
if (parameterList.length > 0) {
isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
? true : false;
}
return (
<table className="compare">
<tbody>
Expand Down Expand Up @@ -164,22 +169,26 @@ class Compare extends React.Component<CompareProps, {}> {
})}
</tr>
{
Object.keys(parameterKeys).map(index => {
return (
<tr key={index}>
<td className="column" key={index}>{parameterKeys[index]}</td>
{
Object.keys(parameterList).map(key => {
return (
<td key={key} className="value">
{parameterList[key][parameterKeys[index]]}
</td>
);
})
}
</tr>
);
})
isComplexSearchSpace
?
null
:
Object.keys(parameterKeys).map(index => {
return (
<tr key={index}>
<td className="column" key={index}>{parameterKeys[index]}</td>
{
Object.keys(parameterList).map(key => {
return (
<td key={key} className="value">
{parameterList[key][parameterKeys[index]]}
</td>
);
})
}
</tr>
);
})
}
</tbody>
</table>
Expand Down
22 changes: 15 additions & 7 deletions src/webui/src/components/Modal/ExperimentDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface ExpDrawerProps {

interface ExpDrawerState {
experiment: string;
expDrawerHeight: number;
}

class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
Expand All @@ -23,7 +24,8 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
super(props);

this.state = {
experiment: ''
experiment: '',
expDrawerHeight: window.innerHeight - 48
};
}

Expand Down Expand Up @@ -69,9 +71,14 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
downFile(experiment, 'experiment.json');
}

onWindowResize = () => {
this.setState(() => ({expDrawerHeight: window.innerHeight - 48}));
}

componentDidMount() {
this._isCompareMount = true;
this.getExperimentContent();
window.addEventListener('resize', this.onWindowResize);
}

componentWillReceiveProps(nextProps: ExpDrawerProps) {
Expand All @@ -83,12 +90,12 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {

componentWillUnmount() {
this._isCompareMount = false;
window.removeEventListener('resize', this.onWindowResize);
}

render() {
const { isVisble, closeExpDrawer } = this.props;
const { experiment } = this.state;
const heights: number = window.innerHeight - 48;
const { experiment, expDrawerHeight } = this.state;
return (
<Row className="logDrawer">
<Drawer
Expand All @@ -99,15 +106,16 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
onClose={closeExpDrawer}
visible={isVisble}
width="54%"
height={heights}
height={expDrawerHeight}
>
<div className="card-container log-tab-body" style={{ height: heights }}>
<Tabs type="card" style={{ height: heights + 19 }}>
{/* 104: tabHeight(40) + tabMarginBottom(16) + buttonHeight(32) + buttonMarginTop(16) */}
<div className="card-container log-tab-body">
<Tabs type="card" style={{ height: expDrawerHeight, minHeight: 190 }}>
<TabPane tab="Experiment Parameters" key="Experiment">
<div className="just-for-log">
<MonacoEditor
width="100%"
height={heights * 0.9}
height={expDrawerHeight - 104}
language="json"
value={experiment}
options={DRAWEROPTION}
Expand Down
35 changes: 27 additions & 8 deletions src/webui/src/components/Modal/LogDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface LogDrawerState {
nniManagerLogStr: string | null;
dispatcherLogStr: string | null;
isLoading: boolean;
logDrawerHeight: number;
}

class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
Expand All @@ -28,6 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
nniManagerLogStr: null,
dispatcherLogStr: null,
isLoading: true,
logDrawerHeight: window.innerHeight - 48
};
}

Expand Down Expand Up @@ -63,18 +65,23 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
);
}

setLogDrawerHeight = () => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
}

async componentDidMount() {
this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight);
}

componentWillUnmount() {
window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight);
}

render() {
const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading } = this.state;
const heights: number = window.innerHeight - 48; // padding top and bottom
const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
return (
<Row>
<Drawer
Expand All @@ -84,16 +91,24 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
onClose={closeDrawer}
visible={true}
width="76%"
height={heights}
height={logDrawerHeight}
// className="logDrawer"
>
<div className="card-container log-tab-body" style={{ height: heights }}>
<Tabs type="card" defaultActiveKey={activeTab} style={{ height: heights + 19 }}>
<div className="card-container log-tab-body">
<Tabs
type="card"
defaultActiveKey={activeTab}
style={{ height: logDrawerHeight, minHeight: 190 }}
>
{/* <Tabs type="card" onTabClick={this.selectwhichLog} defaultActiveKey={activeTab}> */}
{/* <TabPane tab="Dispatcher Log" key="dispatcher"> */}
<TabPane tab={this.dispatcherHTML()} key="dispatcher">
<div>
<MonacoHTML content={dispatcherLogStr || 'Loading...'} loading={isLoading} />
<MonacoHTML
content={dispatcherLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div>
<Row className="buttons">
<Col span={12} className="download">
Expand All @@ -117,7 +132,11 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
<TabPane tab={this.nnimanagerHTML()} key="nnimanager">
{/* <TabPane tab="NNImanager Log" key="nnimanager"> */}
<div>
<MonacoHTML content={nniManagerLogStr || 'Loading...'} loading={isLoading} />
<MonacoHTML
content={nniManagerLogStr || 'Loading...'}
loading={isLoading}
height={logDrawerHeight - 104}
/>
</div>
<Row className="buttons">
<Col span={12} className="download">
Expand Down Expand Up @@ -159,7 +178,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
this.setState({ nniManagerLogStr: res.data });
}
});
Promise.all([ dispatcherPromise, nniManagerPromise ]).then(() => {
Promise.all([dispatcherPromise, nniManagerPromise]).then(() => {
this.setState({ isLoading: false });
this.timerId = window.setTimeout(this.refresh, 300);
});
Expand Down
11 changes: 8 additions & 3 deletions src/webui/src/components/SlideBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,12 @@ class SlideBar extends React.Component<SliderProps, SliderState> {
type="ghost"
>
<a target="_blank" href="https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html">
<Icon type="question" /><span>Help</span>
<img
src={require('../static/img/icon/ques.png')}
alt="question"
className="question"
/>
<span>Help</span>
</a>
</Button>
</span>
Expand Down Expand Up @@ -329,8 +334,8 @@ class SlideBar extends React.Component<SliderProps, SliderState> {

render() {
const mobile = (<MediaQuery maxWidth={884}>{this.mobileHTML()}</MediaQuery>);
const tablet = (<MediaQuery minWidth={885} maxWidth={1241}>{this.tabeltHTML()}</MediaQuery>);
const desktop = (<MediaQuery minWidth={1242}>{this.desktopHTML()}</MediaQuery>);
const tablet = (<MediaQuery minWidth={885} maxWidth={1281}>{this.tabeltHTML()}</MediaQuery>);
const desktop = (<MediaQuery minWidth={1282}>{this.desktopHTML()}</MediaQuery>);
const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state;
return (
<div>
Expand Down
8 changes: 4 additions & 4 deletions src/webui/src/components/public-child/MonacoEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor';
interface MonacoEditorProps {
content: string;
loading: boolean;
height: number;
}

class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
Expand All @@ -25,18 +26,17 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
}

render() {
const { content, loading } = this.props;
const heights: number = window.innerHeight - 48;
const { content, loading, height } = this.props;
return (
<div className="just-for-log">
<Spin
// tip="Loading..."
style={{ width: '100%', height: heights * 0.9 }}
style={{ width: '100%', height: height }}
spinning={loading}
>
<MonacoEditor
width="100%"
height={heights * 0.9}
height={height}
language="json"
value={content}
options={DRAWEROPTION}
Expand Down
6 changes: 3 additions & 3 deletions src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,17 +135,17 @@ function generateScatterSeries(trials: Trial[]) {

function generateBestCurveSeries(trials: Trial[]) {
let best = trials[0];
const data = [[ best.sequenceId, best.accuracy, best.info.hyperParameters ]];
const data = [[ best.sequenceId, best.accuracy, best.description.parameters ]];

for (let i = 1; i < trials.length; i++) {
const trial = trials[i];
const delta = trial.accuracy! - best.accuracy!;
const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
if (better) {
data.push([ trial.sequenceId, trial.accuracy, trial.info.hyperParameters ]);
data.push([ trial.sequenceId, trial.accuracy, trial.description.parameters ]);
best = trial;
} else {
data.push([ trial.sequenceId, best.accuracy, trial.info.hyperParameters ]);
data.push([ trial.sequenceId, best.accuracy, trial.description.parameters ]);
}
}

Expand Down
14 changes: 7 additions & 7 deletions src/webui/src/components/trial-detail/Intermediate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,16 +262,10 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<div>
{/* style in para.scss */}
<Row className="meline intermediate">
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
{
isFilter
?
<span>
<span style={{marginRight: 15}}>
<span className="filter-x"># Intermediate result</span>
<input
// placeholder="point"
Expand Down Expand Up @@ -300,6 +294,12 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
:
null
}
{/* filter message */}
<span>Filter</span>
<Switch
defaultChecked={false}
onChange={this.switchTurn}
/>
</Row>
<Row className="intermediate-graph">
<ReactEcharts
Expand Down
43 changes: 29 additions & 14 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 @@ -332,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Icon type="line-chart" />
</Button>
{/* kill job */}
<Popconfirm
title="Are you sure to cancel this trial?"
onConfirm={killJob.
bind(this, record.key, record.id, record.status)}
>
<Button
type="default"
disabled={flag}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
</Popconfirm>
{
flag
?
<Button
type="default"
disabled={true}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
:
<Popconfirm
title="Are you sure to cancel this trial?"
okText="Yes"
cancelText="No"
onConfirm={killJob.
bind(this, record.key, record.id, record.status)}
>
<Button
type="default"
disabled={false}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
</Popconfirm>
}
</Row>
);
},
Expand Down
Binary file added src/webui/src/static/img/icon/ques.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/webui/src/static/style/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Button.tableButton{
border-color: $btnBgcolor;
height: 26px;
font-size: 14px;
margin-top: 2px;
margin-top: 4px;
border-radius: 0;
}

Expand Down
3 changes: 2 additions & 1 deletion src/webui/src/static/style/logDrawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,9 @@
height: 100%;
}

/* log drawer download & close button's row */
.buttons{
margin-top: 11px;
margin-top: 16px;
.close{
text-align: right;
}
Expand Down
Loading