Improve the design of copying trial parameters (#1105)

docs/en_US/WebUI.md

@@ -6,6 +6,8 @@ Click the tab "Overview".
 
 * See the experiment trial profile and search space message.
 * Support to download the experiment result.
+* Support to export nni-manager and dispatcher log file.
+* If you have any question, you can click "Feedback" to report it.
 
 ![](../img/webui-img/over1.png)
 * See good performance trials.
@@ -52,6 +54,14 @@ Click the tab "Trials Detail" to see the status of the all trials. Specifically:
 
 ![](../img/webui-img/detail-local.png)
 
+* The button named "Add column" can select which column to show in the table. If you run an experiment that final result is dict, you can see other keys in the table.
+
+![](../img/webui-img/addColumn.png)
+
+* You can use the button named "Copy as python" to copy trial's parameters.
+
+![](../img/webui-img/copyParameter.png)
+
 * If you run on OpenPAI or Kubeflow platform, you can also see the hdfsLog.
 
 ![](../img/webui-img/detail-pai.png)

src/webui/src/components/public-child/OpenRow.tsx

@@ -3,9 +3,10 @@ import * as copy from 'copy-to-clipboard';
 import PaiTrialLog from '../public-child/PaiTrialLog';
 import TrialLog from '../public-child/TrialLog';
 import { TableObj } from '../../static/interface';
-import { Row, Tabs, Button, message } from 'antd';
+import { Row, Tabs, Button, message, Modal } from 'antd';
 import { MANAGER_IP } from '../../static/const';
 import '../../static/style/overview.scss';
+import '../../static/style/copyParameter.scss';
 import JSONTree from 'react-json-tree';
 const TabPane = Tabs.TabPane;
 
@@ -17,43 +18,62 @@ interface OpenRowProps {
 }
 
 interface OpenRowState {
-    idList: Array<string>;
+    isShowFormatModal: boolean;
+    formatStr: string;
 }
 
 class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
 
+    public _isMounted: boolean;
     constructor(props: OpenRowProps) {
         super(props);
         this.state = {
-            idList: ['']
+            isShowFormatModal: false,
+            formatStr: ''
         };
+    }
+
+    showFormatModal = (record: TableObj) => {
+        // get copy parameters
+        const params = JSON.stringify(record.description.parameters, null, 4);
+        // open modal with format string
+        if (this._isMounted === true) {
+            this.setState(() => ({ isShowFormatModal: true, formatStr: params }));
+        }
+    }
 
+    hideFormatModal = () => {
+        // close modal, destroy state format string data
+        if (this._isMounted === true) {
+            this.setState(() => ({ isShowFormatModal: false, formatStr: '' }));
+        }
     }
 
-    copyParams = (record: TableObj) => {
+    copyParams = () => {
         // json format
-        const params = JSON.stringify(record.description.parameters, null, 4);
-        if (copy(params)) {
+        const { formatStr } = this.state;
+        if (copy(formatStr)) {
             message.destroy();
             message.success('Success copy parameters to clipboard in form of python dict !', 3);
-            const { idList } = this.state;
-            const copyIdList: Array<string> = idList;
-            copyIdList[copyIdList.length - 1] = record.id;
-            this.setState(() => ({
-                idList: copyIdList
-            }));
         } else {
             message.destroy();
             message.error('Failed !', 2);
         }
+        this.hideFormatModal();
     }
 
+    componentDidMount() {
+        this._isMounted = true;
+    }
+
+    componentWillUnmount() {
+        this._isMounted = false;
+    }
     render() {
         const { trainingPlatform, record, logCollection, multiphase } = this.props;
-        const { idList } = this.state;
+        const { isShowFormatModal, formatStr } = this.state;
         let isClick = false;
         let isHasParameters = true;
-        if (idList.indexOf(record.id) !== -1) { isClick = true; }
         if (record.description.parameters.error) {
             isHasParameters = false;
         }
@@ -101,7 +121,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                                     </Row>
                                     <Row className="copy">
                                         <Button
-                                            onClick={this.copyParams.bind(this, record)}
+                                            onClick={this.showFormatModal.bind(this, record)}
                                         >
                                             Copy as python
                                         </Button>
@@ -128,6 +148,21 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
                         }
                     </TabPane>
                 </Tabs>
+                <Modal
+                    title="Format"
+                    okText="Copy"
+                    centered={true}
+                    visible={isShowFormatModal}
+                    onCancel={this.hideFormatModal}
+                    maskClosable={false} // click mongolian layer don't close modal
+                    onOk={this.copyParams}
+                    destroyOnClose={true}
+                    width="60%"
+                    className="format"
+                >
+                    {/* write string in pre to show format string */}
+                    <pre className="formatStr">{formatStr}</pre>
+                </Modal>
             </Row >
         );
     }

src/webui/src/static/style/copyParameter.scss

+$color: #f2f2f2;
+.formatStr{
+    border: 1px solid #8f8f8f;
+    color: #333;
+    padding: 5px 10px;
+    background-color: #fff; 
+}
+
+.format {
+    .ant-modal-header{
+        background-color: $color;
+        border-bottom: none;
+    }
+    .ant-modal-footer{
+        background-color: $color;
+        border-top: none;
+    }
+    .ant-modal-body{
+        background-color: $color;
+        padding: 10px 24px !important;
+    }
+}

src/webui/src/static/style/overview.scss

@@ -52,4 +52,3 @@
 .link{
     margin-bottom: 10px;
 }
-