Fix bugs for v0.3 (#315)

* Fix bugs

* update

src/webui/src/components/Overview.tsx

@@ -4,11 +4,8 @@ import { Row, Col } from 'antd';
 import { MANAGER_IP, overviewItem } from '../static/const';
 import {
     Experiment, TableObj,
-    Parameters, AccurPoint, TrialNumber
+    Parameters, TrialNumber
 } from '../static/interface';
-import {
-    getAccuracyData
-} from '../static/function';
 import SuccessTable from './overview/SuccessTable';
 import Title1 from './overview/Title1';
 import Progressed from './overview/Progress';
@@ -42,7 +39,6 @@ class Overview extends React.Component<{}, SessionState> {
     public _isMounted = false;
     public intervalID = 0;
     public intervalProfile = 1;
-    public intervalAccuracy = 2;
 
     constructor(props: {}) {
         super(props);
@@ -212,8 +208,16 @@ class Overview extends React.Component<{}, SessionState> {
                                 };
                                 const duration = (tableData[item].endTime - tableData[item].startTime) / 1000;
                                 let acc;
+                                let tableAcc = 0;
                                 if (tableData[item].finalMetricData) {
-                                    acc = parseFloat(tableData[item].finalMetricData.data);
+                                    acc = JSON.parse(tableData[item].finalMetricData.data);
+                                    if (typeof (acc) === 'object') {
+                                        if (acc.default) {
+                                            tableAcc = acc.default;
+                                        }
+                                    } else {
+                                        tableAcc = acc;
+                                    }
                                 }
                                 // if hyperparameters is undefine, show error message, else, show parameters value
                                 if (tableData[item].hyperParameters) {
@@ -234,7 +238,7 @@ class Overview extends React.Component<{}, SessionState> {
                                     id: tableData[item].id,
                                     duration: duration,
                                     status: tableData[item].status,
-                                    acc: acc,
+                                    acc: tableAcc,
                                     description: desJobDetail
                                 });
                                 break;
@@ -255,6 +259,8 @@ class Overview extends React.Component<{}, SessionState> {
                             trialNumber: profile
                         });
                     }
+                    // draw accuracy
+                    this.drawPointGraph();
                 }
             });
     }
@@ -311,26 +317,45 @@ class Overview extends React.Component<{}, SessionState> {
     // trial accuracy graph
     drawPointGraph = () => {
 
-        axios(`${MANAGER_IP}/trial-jobs`, {
-            method: 'GET'
-        })
-            .then(res => {
-                if (res.status === 200 && this._isMounted) {
-                    const accData = res.data;
-                    const accArr: Array<number> = [];
-                    const accY: Array<AccurPoint> = [];
-                    Object.keys(accData).map(item => {
-                        if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
-                            accArr.push(parseFloat(accData[item].finalMetricData.data));
+        const { tableData } = this.state;
+        const sourcePoint = JSON.parse(JSON.stringify(tableData));
+        sourcePoint.sort((a: TableObj, b: TableObj) => {
+            if (a.sequenceId && b.sequenceId) {
+                return a.sequenceId - b.sequenceId;
+            } else {
+                return NaN;
             }
         });
-                    accArr.sort((a, b) => { return a - b; });
-                    accArr.length = Math.min(10, accArr.length);
-                    accY.push({ yAxis: accArr });
-                    let optionObj = getAccuracyData(accY[0]);
-                    const bestAccnum = Math.max(...accArr);
-                    this.setState({ accuracyData: optionObj }, () => {
-                        if (accArr.length === 0) {
+        const accarr: Array<number> = [];
+        const indexarr: Array<number> = [];
+        Object.keys(sourcePoint).map(item => {
+            const items = sourcePoint[item];
+            accarr.push(items.acc);
+            indexarr.push(items.sequenceId);
+        });
+        const bestAccnum = Math.max(...accarr);
+        const accOption = {
+            tooltip: {
+                trigger: 'item'
+            },
+            xAxis: {
+                name: 'Trial',
+                type: 'category',
+                data: indexarr
+            },
+            yAxis: {
+                name: 'Accuracy',
+                type: 'value',
+                data: accarr
+            },
+            series: [{
+                symbolSize: 6,
+                type: 'scatter',
+                data: accarr
+            }]
+        };
+        this.setState({ accuracyData: accOption }, () => {
+            if (accarr.length === 0) {
                 this.setState({
                     accNodata: 'No data'
                 });
@@ -342,15 +367,11 @@ class Overview extends React.Component<{}, SessionState> {
             }
         });
     }
-            });
-    }
 
     componentDidMount() {
+        this._isMounted = true;
         this.showSessionPro();
         this.showTrials();
-        this.drawPointGraph();
-        this.intervalAccuracy = window.setInterval(this.drawPointGraph, 10000);
-        this._isMounted = true;
         this.intervalID = window.setInterval(this.showTrials, 10000);
         this.intervalProfile = window.setInterval(this.showSessionPro, 60000);
     }
@@ -359,7 +380,6 @@ class Overview extends React.Component<{}, SessionState> {
         this._isMounted = false;
         window.clearInterval(this.intervalID);
         window.clearInterval(this.intervalProfile);
-        window.clearInterval(this.intervalAccuracy);
     }
 
     render() {

src/webui/src/components/TrialsDetail.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import axios from 'axios';
 import { MANAGER_IP } from '../static/const';
 import { Row, Tabs } from 'antd';
-import { getAccuracyData } from '../static/function';
 import { TableObj, Parameters, AccurPoint } from '../static/interface';
 import Accuracy from './overview/Accuracy';
 import Duration from './trial-detail/Duration';
@@ -42,17 +41,57 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
             .then(res => {
                 if (res.status === 200 && this._isMounted) {
                     const accData = res.data;
-                    const accArr: Array<number> = [];
-                    const accY: Array<AccurPoint> = [];
+                    const accSource: Array<AccurPoint> = [];
                     Object.keys(accData).map(item => {
                         if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
-                            accArr.push(parseFloat(accData[item].finalMetricData.data));
+                            let acc;
+                            let tableAcc;
+                            if (accData[item].finalMetricData) {
+                                acc = JSON.parse(accData[item].finalMetricData.data);
+                                if (typeof (acc) === 'object') {
+                                    if (acc.default) {
+                                        tableAcc = acc.default;
                                     }
+                                } else {
+                                    tableAcc = acc;
+                                }
+                            }
+                            accSource.push({
+                                acc: tableAcc,
+                                index: accData[item].sequenceId
+                            });
+                        }
+                    });
+                    const accarr: Array<number> = [];
+                    const indexarr: Array<number> = [];
+                    Object.keys(accSource).map(item => {
+                        const items = accSource[item];
+                        accarr.push(items.acc);
+                        indexarr.push(items.index);
                     });
-                    accY.push({ yAxis: accArr });
-                    const optionObj = getAccuracyData(accY[0]);
-                    this.setState({ accSource: optionObj }, () => {
-                        if (accArr.length === 0) {
+                    const allAcuracy = {
+                        tooltip: {
+                            trigger: 'item'
+                        },
+                        xAxis: {
+                            name: 'Trial',
+                            type: 'category',
+                            data: indexarr
+                        },
+                        yAxis: {
+                            name: 'Accuracy',
+                            type: 'value',
+                            data: accarr
+                        },
+                        series: [{
+                            symbolSize: 6,
+                            type: 'scatter',
+                            data: accarr
+                        }]
+                    };
+
+                    this.setState({ accSource: allAcuracy }, () => {
+                        if (accarr.length === 0) {
                             this.setState({
                                 accNodata: 'No data'
                             });
@@ -80,7 +119,8 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                         let desc: Parameters = {
                             parameters: {}
                         };
-                        let acc = 0;
+                        let acc;
+                        let tableAcc = 0;
                         let duration = 0;
                         const id = trialJobs[item].id !== undefined
                             ? trialJobs[item].id
@@ -110,7 +150,14 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             }
                         }
                         if (trialJobs[item].finalMetricData !== undefined) {
-                            acc = parseFloat(trialJobs[item].finalMetricData.data);
+                            acc = JSON.parse(trialJobs[item].finalMetricData.data);
+                            if (typeof (acc) === 'object') {
+                                if (acc.default) {
+                                    tableAcc = acc.default;
+                                }
+                            } else {
+                                tableAcc = acc;
+                            }
                         }
                         trialTable.push({
                             key: trialTable.length,
@@ -118,7 +165,7 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
                             id: id,
                             status: status,
                             duration: duration,
-                            acc: acc,
+                            acc: tableAcc,
                             description: desc
                         });
                     });

src/webui/src/components/overview/SuccessTable.tsx

@@ -21,34 +21,34 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
 
         let bgColor = '';
         const columns = [{
-            title: 'Number',
+            title: 'Trial No.',
             dataIndex: 'sequenceId',
             key: 'sequenceId',
-            width: 60,
-            className: 'tableHead',
-            render: (text: string, record: TableObj) => {
-                return (
-                    <span>#{record.sequenceId}</span>
-                );
-            }
+            width: 140,
+            className: 'tableHead'
         }, {
             title: 'Id',
             dataIndex: 'id',
             key: 'id',
-            width: 150,
-            className: 'tableHead'
+            width: 60,
+            className: 'tableHead idtitle',
+            render: (text: string, record: TableObj) => {
+                return (
+                    <div>{record.id}</div>
+                );
+            },
         }, {
             title: 'Duration',
             dataIndex: 'duration',
             key: 'duration',
-            width: 150,
+            width: 140,
             render: (text: string, record: TableObj) => {
                 let duration;
                 if (record.duration) {
                     duration = convertDuration(record.duration);
                 }
                 return (
-                    <div>{duration}</div>
+                    <div className="durationsty"><div>{duration}</div></div>
                 );
             },
         }, {

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

@@ -80,7 +80,17 @@ class Para extends React.Component<{}, ParaState> {
                             if (accParaData[item].status === 'SUCCEEDED') {
                                 if (accParaData[item].finalMetricData && accParaData[item].hyperParameters) {
                                     // get acc array
-                                    accPara.push(parseFloat(accParaData[item].finalMetricData.data));
+                                    let acc;
+                                    let accReal;
+                                    acc = JSON.parse(accParaData[item].finalMetricData.data);
+                                    if (typeof (acc) === 'object') {
+                                        if (acc.default) {
+                                            accReal = acc.default;
+                                        }
+                                    } else {
+                                        accReal = acc;
+                                    }
+                                    accPara.push(accReal);
                                     // get dim and every line specific number
                                     const temp = JSON.parse(accParaData[item].hyperParameters).parameters;
                                     speValue.push(temp);

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

@@ -167,34 +167,33 @@ class TableList extends React.Component<TableListProps, TableListState> {
             });
         });
         const columns = [{
-            title: 'Number',
+            title: 'Trial No.',
             dataIndex: 'sequenceId',
             key: 'sequenceId',
             width: 120,
             className: 'tableHead',
-            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number),
-            render: (text: string, record: TableObj) => {
-                return (
-                    <span>#{record.sequenceId}</span>
-                );
-            }
+            sorter: (a: TableObj, b: TableObj) => (a.sequenceId as number) - (b.sequenceId as number)
         }, {
             title: 'Id',
             dataIndex: 'id',
             key: 'id',
-            width: 150,
-            className: 'tableHead',
+            width: 60,
+            className: 'tableHead idtitle',
             // the sort of string
-            sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id)
+            sorter: (a: TableObj, b: TableObj): number => a.id.localeCompare(b.id),
+            render: (text: string, record: TableObj) => {
+                return (
+                    <div>{record.id}</div>
+                );
+            }
         }, {
             title: 'Duration',
             dataIndex: 'duration',
             key: 'duration',
-            width: 150,
+            width: 140,
             // the sort of number
             sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
             render: (text: string, record: TableObj) => {
-                const bg = record.color;
                 let duration;
                 if (record.duration !== undefined && record.duration > 0) {
                     duration = convertDuration(record.duration);
@@ -202,7 +201,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     duration = 0;
                 }
                 return (
-                    <div style={{ background: bg }}>{duration}</div>
+                    <div className="durationsty"><div>{duration}</div></div>
                 );
             },
         }, {

src/webui/src/static/function.ts

-import { AccurPoint } from './interface';
-
 export const convertTime = (num: number) => {
     if (num % 3600 === 0) {
         return num / 3600 + 'h';
@@ -26,32 +24,3 @@ export const convertDuration = (num: number) => {
         return result;
     }
 };
\ No newline at end of file
-
-// ACCURACY point graph option format
-export const getAccuracyData = (dataObj: AccurPoint) => {
-    const yAxis = dataObj.yAxis;
-    const xAxis: Array<number> = [];
-    for (let i = 1; i <= yAxis.length; i++) {
-        xAxis.push(i);
-    }
-    return {
-        tooltip: {
-            trigger: 'item'
-        },
-        xAxis: {
-            name: 'Trial',
-            type: 'category',
-            data: xAxis
-        },
-        yAxis: {
-            name: 'Accuracy',
-            type: 'value',
-            data: yAxis
-        },
-        series: [{
-            symbolSize: 6,
-            type: 'scatter',
-            data: yAxis
-        }]
-    };
-};
\ No newline at end of file

src/webui/src/static/interface.ts

@@ -37,7 +37,8 @@ interface Experiment {
 
 // trial accuracy
 interface AccurPoint {
-    yAxis: Array<number>;
+    acc: number;
+    index: number;
 }
 
 interface TrialNumber {

src/webui/src/static/style/table.scss

@@ -12,7 +12,19 @@
     }
 
 }
-
+#succeTable, #tableList{
+    .commonTableStyle .idtitle div{
+        text-align: left;
+    }
+    .durationsty{
+        width: 80%;
+        margin: 0 auto;
+        div{
+            text-align: right;
+            margin-right: 9px;
+        }
+    }
+}
 /* add the brother selector to increase the priority */
 #succeTable .commonTableStyle, #tableList .commonTableStyle {