Show intermediate result (#384)

src/webui/src/components/SlideBar.tsx

@@ -8,7 +8,9 @@ class SlideBar extends React.Component<{}, {}> {
     return (
       <ul className="nav">
         <li className="logo">
-          <img src={require('../static/img/logo.png')} style={{ width: 156 }} alt="NNI logo" />
+          <Link to={'/oview'}>
+            <img src={require('../static/img/logo.png')} style={{ width: 156 }} alt="NNI logo" />
+          </Link>
         </li>
         <li className="tab">
           <Link to={'/oview'} activeClassName="high">

src/webui/src/components/TrialsDetail.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
 import { Row, Col, Button, Tabs, Input } from 'antd';
 const Search = Input.Search;
-import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy, } from '../static/interface';
+import { TableObj, Parameters, DetailAccurPoint, TooltipForAccuracy } from '../static/interface';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
 import Title1 from './overview/Title1';
@@ -16,6 +16,7 @@ interface TrialDetailState {
     accSource: object;
     accNodata: string;
     tableListSource: Array<TableObj>;
+    tableBaseSource: Array<TableObj>;
 }
 
 class TrialsDetail extends React.Component<{}, TrialDetailState> {
@@ -30,7 +31,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
         this.state = {
             accSource: {},
             accNodata: '',
-            tableListSource: []
+            tableListSource: [],
+            tableBaseSource: []
         };
     }
     // trial accuracy graph
@@ -129,17 +131,21 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
 
     drawTableList = () => {
 
-        axios(`${MANAGER_IP}/trial-jobs`, {
-            method: 'GET'
-        })
-            .then(res => {
-                if (res.status === 200) {
+        axios
+            .all([
+                axios.get(`${MANAGER_IP}/trial-jobs`),
+                axios.get(`${MANAGER_IP}/metric-data`)
+            ])
+            .then(axios.spread((res, res1) => {
+                if (res.status === 200 && res1.status === 200) {
                     const trialJobs = res.data;
+                    const metricSource = res1.data;
                     const trialTable: Array<TableObj> = [];
                     Object.keys(trialJobs).map(item => {
                         // only succeeded trials have finalMetricData
                         let desc: Parameters = {
-                            parameters: {}
+                            parameters: {},
+                            intermediate: []
                         };
                         let acc;
                         let tableAcc = 0;
@@ -171,6 +177,14 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                                 desc.isLink = true;
                             }
                         }
+                        let mediate: Array<string> = [];
+                        Object.keys(metricSource).map(key => {
+                            const items = metricSource[key];
+                            if (items.trialJobId === id) {
+                                mediate.push(items.data);
+                            }
+                        });
+                        desc.intermediate = mediate;
                         if (trialJobs[item].finalMetricData !== undefined) {
                             acc = JSON.parse(trialJobs[item].finalMetricData.data);
                             if (typeof (acc) === 'object') {
@@ -193,11 +207,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                     });
                     if (this._isMounted) {
                         this.setState(() => ({
-                            tableListSource: trialTable
+                            tableListSource: trialTable,
+                            tableBaseSource: trialTable
                         }));
                     }
                 }
-            });
+            }));
     }
 
     callback = (key: string) => {
@@ -228,10 +243,10 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
     searchTrialNo = (value: string) => {
 
         window.clearInterval(this.interTableList);
-        const { tableListSource } = this.state;
+        const { tableBaseSource } = this.state;
         const searchResultList: Array<TableObj> = [];
-        Object.keys(tableListSource).map(key => {
-            const item = tableListSource[key];
+        Object.keys(tableBaseSource).map(key => {
+            const item = tableBaseSource[key];
             if (item.sequenceId.toString() === value) {
                 searchResultList.push(item);
             }
@@ -271,7 +286,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             accSource, accNodata,
             tableListSource
         } = this.state;
-        
+
         const titleOfacc = (
             <Title1 text="Default Metric" icon="3.png" />
         );

src/webui/src/components/overview/Progress.tsx

@@ -29,12 +29,16 @@ class Progressed extends React.Component<ProgressProps, {}> {
             trialNumber, bestAccuracy,
             status, errors
         } = this.props;
-        // remaining time
         const bar2 = trialNumber.totalCurrentTrial - trialNumber.waitTrial - trialNumber.unknowTrial;
         const bar2Percent = (bar2 / trialProfile.MaxTrialNum) * 100;
         const percent = (trialProfile.execDuration / trialProfile.maxDuration) * 100;
         const runDuration = convertTime(trialProfile.execDuration);
-        const remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
+        let remaining;
+        if (status === 'DONE') {
+            remaining = '0';
+        } else {
+            remaining = convertTime(trialProfile.maxDuration - trialProfile.execDuration);
+        }
         let errorContent;
         if (errors !== '') {
             errorContent = (
@@ -81,7 +85,7 @@ class Progressed extends React.Component<ProgressProps, {}> {
                     maxString={`MaxTrialNumber: ${trialProfile.MaxTrialNum}`}
                 />
                 <Row className="basic colorOfbasic mess">
-                    <p>Best Accuracy</p>
+                    <p>Best Default Metric</p>
                     <div>{bestAccuracy}</div>
                 </Row>
                 <Row className="mess">
@@ -99,7 +103,7 @@ class Progressed extends React.Component<ProgressProps, {}> {
                     </Col>
                     <Col span={7}>
                         <Row className="basic colorOfbasic">
-                            <p>Duration</p>
+                            <p>MaxDuration</p>
                             <div>{convertTime(trialProfile.maxDuration)}</div>
                         </Row>
                     </Col>

src/webui/src/components/trial-detail/Duration.tsx

@@ -44,14 +44,6 @@ class Duration extends React.Component<{}, DurationState> {
                     type: 'shadow'
                 }
             },
-            // title: {
-            //     left: 'center',
-            //     text: 'Trial Duration',
-            //     textStyle: {
-            //         fontSize: 18,
-            //         color: '#333'
-            //     }
-            // },
             grid: {
                 bottom: '3%',
                 containLabel: true,
@@ -108,7 +100,7 @@ class Duration extends React.Component<{}, DurationState> {
                             } else {
                                 duration = (new Date().getTime() - start) / 1000;
                             }
-                            trialId.push(trialJobs[item].id);
+                            trialId.push(trialJobs[item].sequenceId);
                             trialTime.push(duration);
                         }
                     });

src/webui/src/components/trial-detail/Para.tsx

@@ -3,7 +3,7 @@ import axios from 'axios';
 import { MANAGER_IP } from '../../static/const';
 import ReactEcharts from 'echarts-for-react';
 import { Row, Col, Select, Button, message } from 'antd';
-import { HoverName, ParaObj, VisualMapValue, Dimobj } from '../../static/interface';
+import { ParaObj, VisualMapValue, Dimobj } from '../../static/interface';
 const Option = Select.Option;
 require('echarts/lib/chart/parallel');
 require('echarts/lib/component/tooltip');
@@ -243,30 +243,19 @@ class Para extends React.Component<{}, ParaState> {
             };
         } else {
             visualMapObj = {
+                bottom: '20px',
                 type: 'continuous',
                 precision: 3,
                 min: visualValue.minAccuracy,
                 max: visualValue.maxAccuracy,
-                color: ['#CA0000', '#FFC400', '#90EE90']
+                color: ['#CA0000', '#FFC400', '#90EE90'],
+                calculable: true
             };
         }
         let optionown = {
             parallelAxis,
             tooltip: {
-                trigger: 'item',
-                formatter: function (params: HoverName) {
-                    return params.name;
-                }
-            },
-            toolbox: {
-                show: true,
-                left: 'right',
-                iconStyle: {
-                    normal: {
-                        borderColor: '#ddd'
-                    }
-                },
-                z: 202
+                trigger: 'item'
             },
             parallel: {
                 parallelAxisDefault: {
@@ -276,9 +265,6 @@ class Para extends React.Component<{}, ParaState> {
                 }
             },
             visualMap: visualMapObj,
-            highlight: {
-                type: 'highlight'
-            },
             series: {
                 type: 'parallel',
                 smooth: true,

src/webui/src/components/trial-detail/TableList.tsx

@@ -98,7 +98,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 data: sequence
             },
             yAxis: {
-                name: 'Accuracy',
+                name: 'Default Metric',
                 type: 'value',
                 data: intermediateArr
             },
@@ -165,7 +165,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
             key: 'sequenceId',
             width: 120,
             className: 'tableHead',
-            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number),
+            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number)
         }, {
             title: 'Id',
             dataIndex: 'id',
@@ -305,6 +305,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
             const parametersRow = {
                 parameters: record.description.parameters
             };
+            const intermediate = record.description.intermediate;
+            let showIntermediate = '';
+            if (intermediate && intermediate.length > 0) {
+                showIntermediate = intermediate.join(', ');
+            }
             let isLogLink: boolean = false;
             const logPathRow = record.description.logPath;
             if (record.description.isLink !== undefined) {
@@ -340,6 +345,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                 <span className="logContent">{logPathRow}</span>
                             </div>
                     }
+                    <Row className="intermediate logpath">
+                        <span className="logName">Intermediate Result:</span> 
+                        {showIntermediate}
+                    </Row>
                 </pre>
             );
         };

src/webui/src/static/interface.ts

@@ -15,6 +15,7 @@ interface Parameters {
     parameters: ErrorParameter;
     logPath?: string;
     isLink?: boolean;
+    intermediate?: Array<string>;
 }
 
 interface Experiment {
@@ -76,10 +77,6 @@ interface Dimobj {
     data?: string[];
 }
 
-interface HoverName {
-    name: string;
-}
-
 interface ParaObj {
     data: number[][];
     parallelAxis: Array<Dimobj>;
@@ -90,8 +87,9 @@ interface VisualMapValue {
     minAccuracy: number;
 }
 
-export {TableObj, Parameters, Experiment, 
+export {
+    TableObj, Parameters, Experiment, 
     AccurPoint, TrialNumber, TrialJob,
     DetailAccurPoint, TooltipForAccuracy,
-    HoverName, ParaObj, VisualMapValue, Dimobj
+    ParaObj, VisualMapValue, Dimobj
 };
\ No newline at end of file

src/webui/src/static/style/logPath.scss

 .logpath{
     margin-left: 10px;
-
+    font-size: 14px;
     .logName{
         color: #268BD2;
+        margin-right: 5px;
     }
 
     .logContent{
@@ -18,3 +19,8 @@
     color: blue;
     text-decoration: underline;
 }
+
+.intermediate{
+    white-space: normal;
+    font-size: 14px;
+}