fix some bugs about webui (#1632)

microsoft · Oct 21, 2019 · 8f778aa · 8f778aa
1 parent fc7ddcd
commit 8f778aa
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 65 deletions.
diff --git a/src/webui/src/components/Modal/Compare.tsx b/src/webui/src/components/Modal/Compare.tsx
@@ -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,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>

diff --git a/src/webui/src/components/Modal/ExperimentDrawer.tsx b/src/webui/src/components/Modal/ExperimentDrawer.tsx
@@ -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}

diff --git a/src/webui/src/components/Modal/LogDrawer.tsx b/src/webui/src/components/Modal/LogDrawer.tsx
@@ -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);
         });

diff --git a/src/webui/src/components/SlideBar.tsx b/src/webui/src/components/SlideBar.tsx
@@ -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>

diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -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}

diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -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 ]);
         }
     }
 

diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -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

diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx
@@ -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>
                             );
                         },

diff --git a/src/webui/src/static/img/icon/ques.png b/src/webui/src/static/img/icon/ques.png
diff --git a/src/webui/src/static/style/button.scss b/src/webui/src/static/style/button.scss
@@ -6,7 +6,7 @@ Button.tableButton{
     border-color: $btnBgcolor;
     height: 26px;
     font-size: 14px;
-    margin-top: 2px;
+    margin-top: 4px;
     border-radius: 0;
 }
 

diff --git a/src/webui/src/static/style/logDrawer.scss b/src/webui/src/static/style/logDrawer.scss
@@ -25,8 +25,9 @@
   height: 100%;
 }
 
+/* log drawer download & close button's row */
 .buttons{
-  margin-top: 11px;
+  margin-top: 16px;
   .close{
     text-align: right;
   }