Fix bug of hyper graph and add down experiment parameters (#185)

* Fix bug of hyper graph and add down experiment parameters * Show loguniform elegantly * Change hyper graph color and numbers in bar show three decimal places
microsoft · Oct 9, 2018 · 52b4478 · 52b4478
1 parent fd8ee22
commit 52b4478
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 25 deletions.
diff --git a/src/webui/src/components/Para.tsx b/src/webui/src/components/Para.tsx
@@ -124,25 +124,38 @@ class Para extends React.Component<{}, ParaState> {
                         const searchRange = JSON.parse(res1.data.params.searchSpace);
                         for (let i = 0; i < dimName.length; i++) {
                             const searchKey = searchRange[dimName[i]];
-                            if (searchKey._type === 'uniform') {
-                                parallelAxis.push({
-                                    dim: i,
-                                    name: dimName[i],
-                                    max: searchKey._value[1],
-                                    min: searchKey._value[0]
-                                });
-                            } else { // choice
-                                // data number ['0.2', '0.4', '0.6']
-                                const data: Array<string> = [];
-                                for (let j = 0; j < searchKey._value.length; j++) {
-                                    data.push(searchKey._value[j].toString());
-                                }
-                                parallelAxis.push({
-                                    dim: i,
-                                    name: dimName[i],
-                                    type: 'category',
-                                    data: data
-                                });
+                            switch (searchKey._type) {
+                                case 'uniform':
+                                case 'quniform':
+                                    parallelAxis.push({
+                                        dim: i,
+                                        name: dimName[i],
+                                        max: searchKey._value[1],
+                                        min: searchKey._value[0]
+                                    });
+                                    break;
+
+                                case 'choice':
+                                    const data: Array<string> = [];
+                                    for (let j = 0; j < searchKey._value.length; j++) {
+                                        data.push(searchKey._value[j].toString());
+                                    }
+                                    parallelAxis.push({
+                                        dim: i,
+                                        name: dimName[i],
+                                        type: 'category',
+                                        data: data
+                                    });
+                                    break;
+
+                                case 'loguniform':
+                                    parallelAxis.push({
+                                        dim: i,
+                                        name: dimName[i]
+                                    });
+                                    break;
+
+                                default:
                             }
                         }
                         // get data for every lines. if dim is choice type
@@ -226,14 +239,16 @@ class Para extends React.Component<{}, ParaState> {
         if (maxAccuracy === minAccuracy) {
             visualMapObj = {
                 type: 'continuous',
-                color: ['#fb7c7c', 'yellow', 'lightblue']
+                precision: 3,
+                color: ['#CA0000', '#FFC400', '#90EE90']
             };
         } else {
             visualMapObj = {
                 type: 'continuous',
+                precision: 3,
                 min: visualValue.minAccuracy,
                 max: visualValue.maxAccuracy,
-                color: ['#fb7c7c', 'yellow', 'lightblue']
+                color: ['#CA0000', '#FFC400', '#90EE90']
             };
         }
         let optionown = {

diff --git a/src/webui/src/components/Sessionpro.tsx b/src/webui/src/components/Sessionpro.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import axios from 'axios';
-import { Table, Select, Row, Col, Icon } from 'antd';
+import { Table, Select, Row, Col, Icon, Button } from 'antd';
 import { MANAGER_IP, overviewItem } from '../const';
 const Option = Select.Option;
 import JSONTree from 'react-json-tree';
@@ -120,10 +120,26 @@ class Sessionpro extends React.Component<{}, SessionState> {
                         tuner: sessionData.params.tuner,
                         assessor: sessionData.params.assessor
                     });
+                    // search space format loguniform max and min
+                    const searchSpace = JSON.parse(sessionData.params.searchSpace);
+                    Object.keys(searchSpace).map(item => {
+                        const key = searchSpace[item]._type;
+                        if (key === 'loguniform') {
+                            let value = searchSpace[item]._value;
+                            const a = Math.pow(10, value[0]);
+                            const b = Math.pow(10, value[1]);
+                            if (a < b) {
+                                value = [a, b];
+                            } else {
+                                value = [b, a];
+                            }
+                            searchSpace[item]._value = value;
+                        }
+                    });
                     if (this._isMounted) {
                         this.setState({
                             trialProfile: trialPro[0],
-                            searchSpace: JSON.parse(sessionData.params.searchSpace),
+                            searchSpace: searchSpace,
                             tunerAssessor: tunerAsstemp[0]
                         });
                     }
@@ -211,6 +227,43 @@ class Sessionpro extends React.Component<{}, SessionState> {
         }
     }
 
+    downExperimentContent = () => {
+        axios
+            .all([
+                axios.get(`${MANAGER_IP}/experiment`),
+                axios.get(`${MANAGER_IP}/trial-jobs`)
+            ])
+            .then(axios.spread((res, res1) => {
+                if (res.status === 200 && res1.status === 200) {
+                    if (res.data.params.searchSpace) {
+                        res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
+                    }
+                    const contentOfExperiment = JSON.stringify(res.data, null, 2);
+                    let trialMessagesArr = res1.data;
+                    Object.keys(trialMessagesArr).map(item => {
+                        trialMessagesArr[item].hyperParameters = JSON.parse(trialMessagesArr[item].hyperParameters);
+                    });
+                    const trialMessages = JSON.stringify(trialMessagesArr, null, 2);
+                    const aTag = document.createElement('a');
+                    const file = new Blob([contentOfExperiment, trialMessages], { type: 'application/json' });
+                    aTag.download = 'experiment.txt';
+                    aTag.href = URL.createObjectURL(file);
+                    aTag.click();
+                    URL.revokeObjectURL(aTag.href);
+                    if (navigator.userAgent.indexOf('Firefox') > -1) {
+                        const downTag = document.createElement('a');
+                        downTag.addEventListener('click', function () {
+                            downTag.download = 'experiment.txt';
+                            downTag.href = URL.createObjectURL(file);
+                        });
+                        let eventMouse = document.createEvent('MouseEvents');
+                        eventMouse.initEvent('click', false, false);
+                        downTag.dispatchEvent(eventMouse);
+                    }
+                }
+            }));
+    }
+
     componentDidMount() {
         this.showSessionPro();
         this.showTrials();
@@ -285,7 +338,7 @@ class Sessionpro extends React.Component<{}, SessionState> {
                         getItemString={() => (<span />)}  // remove the {} items
                         data={openRowDataSource}
                     />
-                     {
+                    {
                         isLogLink
                             ?
                             <div className="logpath">
@@ -433,6 +486,15 @@ class Sessionpro extends React.Component<{}, SessionState> {
                         bordered={true}
                     />
                 </div>
+                <div className="downExp">
+                    <Button
+                        type="primary"
+                        className="tableButton"
+                        onClick={this.downExperimentContent}
+                    >
+                        Down Experiment
+                    </Button>
+                </div>
             </div>
         );
     }

diff --git a/src/webui/src/components/SlideBar.tsx b/src/webui/src/components/SlideBar.tsx
@@ -11,7 +11,7 @@ class SlideBar extends React.Component<{}, {}> {
         <ul className="nav">
           <li>
             <IndexLink to={'/oview'} activeClassName="high">
-              <Icon className="icon" type="rocket" />Overview
+              <Icon className="icon" type="home" />Overview
               <Icon className="floicon" type="right" />
             </IndexLink>
           </li>

diff --git a/src/webui/src/style/sessionpro.css b/src/webui/src/style/sessionpro.css
@@ -183,3 +183,7 @@
 .experStatus{
     line-height: 12px;
 }
+.downExp{
+    width: 154px;
+    margin: 0 auto;
+}