From 832c0e4796edead024c905b9635a5d70993831a8 Mon Sep 17 00:00:00 2001 From: v-liguo Date: Sun, 20 Oct 2019 12:02:22 +0800 Subject: [PATCH] fix some bugs about webui --- src/webui/src/components/Modal/Compare.tsx | 41 ++++++++++------- .../src/components/Modal/ExperimentDrawer.tsx | 22 ++++++--- src/webui/src/components/Modal/LogDrawer.tsx | 35 ++++++++++---- src/webui/src/components/SlideBar.tsx | 11 +++-- .../components/public-child/MonacoEditor.tsx | 8 ++-- .../trial-detail/DefaultMetricPoint.tsx | 6 +-- .../components/trial-detail/Intermediate.tsx | 14 +++--- .../src/components/trial-detail/TableList.tsx | 43 ++++++++++++------ src/webui/src/static/img/icon/ques.png | Bin 0 -> 452 bytes src/webui/src/static/style/button.scss | 2 +- src/webui/src/static/style/logDrawer.scss | 3 +- src/webui/src/static/style/slideBar.scss | 7 ++- src/webui/src/static/style/trialsDetail.scss | 2 + 13 files changed, 129 insertions(+), 65 deletions(-) create mode 100644 src/webui/src/static/img/icon/ques.png diff --git a/src/webui/src/components/Modal/Compare.tsx b/src/webui/src/components/Modal/Compare.tsx index 8a7278c966..7ba8f8f7fa 100644 --- 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 { 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 ( @@ -164,22 +169,26 @@ class Compare extends React.Component { })} { - Object.keys(parameterKeys).map(index => { - return ( - - - { - Object.keys(parameterList).map(key => { - return ( - - ); - }) - } - - ); - }) + isComplexSearchSpace + ? + null + : + Object.keys(parameterKeys).map(index => { + return ( + + + { + Object.keys(parameterList).map(key => { + return ( + + ); + }) + } + + ); + }) }
{parameterKeys[index]} - {parameterList[key][parameterKeys[index]]} -
{parameterKeys[index]} + {parameterList[key][parameterKeys[index]]} +
diff --git a/src/webui/src/components/Modal/ExperimentDrawer.tsx b/src/webui/src/components/Modal/ExperimentDrawer.tsx index 2541811bf3..ba32492773 100644 --- 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 { @@ -23,7 +24,8 @@ class ExperimentDrawer extends React.Component { super(props); this.state = { - experiment: '' + experiment: '', + expDrawerHeight: window.innerHeight - 48 }; } @@ -69,9 +71,14 @@ class ExperimentDrawer extends React.Component { 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 { 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 ( { onClose={closeExpDrawer} visible={isVisble} width="54%" - height={heights} + height={expDrawerHeight} > -
- + {/* 104: tabHeight(40) + tabMarginBottom(16) + buttonHeight(32) + buttonMarginTop(16) */} +
+
{ @@ -28,6 +29,7 @@ class LogDrawer extends React.Component { nniManagerLogStr: null, dispatcherLogStr: null, isLoading: true, + logDrawerHeight: window.innerHeight - 48 }; } @@ -63,18 +65,23 @@ class LogDrawer extends React.Component { ); } + 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 ( { onClose={closeDrawer} visible={true} width="76%" - height={heights} + height={logDrawerHeight} // className="logDrawer" > -
- +
+ {/* */} {/* */}
- +
@@ -117,7 +132,11 @@ class LogDrawer extends React.Component { {/* */}
- +
@@ -159,7 +178,7 @@ class LogDrawer extends React.Component { 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 index 8de43d2968..32a7430101 100644 --- a/src/webui/src/components/SlideBar.tsx +++ b/src/webui/src/components/SlideBar.tsx @@ -214,7 +214,12 @@ class SlideBar extends React.Component { type="ghost" > - Help + question + Help @@ -329,8 +334,8 @@ class SlideBar extends React.Component { render() { const mobile = ({this.mobileHTML()}); - const tablet = ({this.tabeltHTML()}); - const desktop = ({this.desktopHTML()}); + const tablet = ({this.tabeltHTML()}); + const desktop = ({this.desktopHTML()}); const { isvisibleLogDrawer, activeKey, isvisibleExperimentDrawer } = this.state; return (
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx index cf89f01502..7ab1621cad 100644 --- 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 { @@ -25,18 +26,17 @@ class MonacoHTML extends React.Component { } render() { - const { content, loading } = this.props; - const heights: number = window.innerHeight - 48; + const { content, loading, height } = this.props; return (
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 index 3c24b8f497..1850926cbd 100644 --- 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
{/* style in para.scss */} - {/* filter message */} - Filter - { isFilter ? - + # Intermediate result : null } + {/* filter message */} + Filter + { {/* kill job */} - - - + { + flag + ? + + : + + + + } ); }, diff --git a/src/webui/src/static/img/icon/ques.png b/src/webui/src/static/img/icon/ques.png new file mode 100644 index 0000000000000000000000000000000000000000..baf4d0a45e6b250a4d3d665232524ef64a54e266 GIT binary patch literal 452 zcmV;#0XzPQP)3nob^a?+KULip! z)wH+bwmRMIj?B&6WV6}b`Pj`RvDGAd<~;MxdCwUU@tN5^um>yvQ+~@g@ButYI*v#) z3{fc1%$|YOLR{akXMhR6?g59A9z*#WfoApwECEi)0S9#7X6V!|$jm;y(#xir)&XyTZQw=HTBt4_=&tt&c$c(X zx2Fy`s@a;EX1<=)SHpehoE=_f1 uIX