Skip to content

GitLab

Commit 8f778aa5 authored by Lijiao's avatar Lijiao Committed by chicm-ms
Browse files

fix some bugs about webui (#1632)

parent fc7ddcd0
Show whitespace changes
Inline Side-by-side
Showing with 129 additions and 65 deletions
src/webui/src/components/Modal/Compare.tsx
View file @ 8f778aa5
......@@ -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>
......@@ -164,6 +169,10 @@ class Compare extends React.Component<CompareProps, {}> {
})}
</tr>
{
isComplexSearchSpace
?
null
:
Object.keys(parameterKeys).map(index => {
return (
<tr key={index}>
......
src/webui/src/components/Modal/ExperimentDrawer.tsx
View file @ 8f778aa5
......@@ -14,6 +14,7 @@ interface ExpDrawerProps {
interface ExpDrawerState {
experiment: string;
expDrawerHeight: number;
}
class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
......@@ -23,7 +24,8 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
super(props);
this.state = {
experiment: ''
experiment: '',
expDrawerHeight: window.innerHeight - 48
};
}
......@@ -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) {
......@@ -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
......@@ -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}
......
src/webui/src/components/Modal/LogDrawer.tsx
View file @ 8f778aa5
......@@ -16,6 +16,7 @@ interface LogDrawerState {
nniManagerLogStr: string | null;
dispatcherLogStr: string | null;
isLoading: boolean;
logDrawerHeight: number;
}
class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
......@@ -28,6 +29,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
nniManagerLogStr: null,
dispatcherLogStr: null,
isLoading: true,
logDrawerHeight: window.innerHeight - 48
};
}
......@@ -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
......@@ -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">
......@@ -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">
......@@ -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);
});
......
src/webui/src/components/SlideBar.tsx
View file @ 8f778aa5
......@@ -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>
......@@ -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>
......
src/webui/src/components/public-child/MonacoEditor.tsx
View file @ 8f778aa5
......@@ -6,6 +6,7 @@ import MonacoEditor from 'react-monaco-editor';
interface MonacoEditorProps {
content: string;
loading: boolean;
height: number;
}
class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
......@@ -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}
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ 8f778aa5
......@@ -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 ]);
}
}
......
src/webui/src/components/trial-detail/Intermediate.tsx
View file @ 8f778aa5
......@@ -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"
......@@ -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
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 8f778aa5
......@@ -332,20 +332,35 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Icon type="line-chart" />
</Button>
{/* kill job */}
{
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={flag}
disabled={false}
className="margin-mediate special"
title="kill"
>
<Icon type="stop" />
</Button>
</Popconfirm>
}
</Row>
);
},
......
src/webui/src/static/style/button.scss
View file @ 8f778aa5
......@@ -6,7 +6,7 @@ Button.tableButton{
border-color: $btnBgcolor;
height: 26px;
font-size: 14px;
margin-top: 2px;
margin-top: 4px;
border-radius: 0;
}
......
src/webui/src/static/style/logDrawer.scss
View file @ 8f778aa5
......@@ -25,8 +25,9 @@
height: 100%;
}
/* log drawer download & close button's row */
.buttons{
margin-top: 11px;
margin-top: 16px;
.close{
text-align: right;
}
......
src/webui/src/static/style/slideBar.scss
View file @ 8f778aa5
......@@ -21,7 +21,7 @@ $drowHoverBgColor: #e2e2e2;
padding-bottom: 14px;
.down-icon{
font-size: 20px !important;
padding-right: 2px;
padding-right: 6px;
}
}
......@@ -186,6 +186,11 @@ $drowHoverBgColor: #e2e2e2;
width: 20px;
margin-right: 8px;
}
/* ? icon style */
.question{
width: 14px;
margin-right: 4px;
}
.feedback{
font-size: 16px;
margin: 0 20px;
......
src/webui/src/static/style/trialsDetail.scss
View file @ 8f778aa5
......@@ -15,10 +15,12 @@
.ant-tabs-tab-active{
.panelTitle{
background-color: #999;
/*
span{
color: #fff;
font-weight: normal;
}
*/
}
}
.panelTitle{
......
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