diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx index 0c0109d4df..6d0d8183de 100644 --- a/src/webui/src/components/Overview.tsx +++ b/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,46 +317,61 @@ 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 = []; - const accY: Array = []; - Object.keys(accData).map(item => { - if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) { - accArr.push(parseFloat(accData[item].finalMetricData.data)); - } - }); - 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) { - this.setState({ - accNodata: 'No data' - }); - } else { - this.setState({ - accNodata: '', - bestAccuracy: bestAccnum.toFixed(6) - }); - } - }); - } - }); + 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; + } + }); + const accarr: Array = []; + const indexarr: Array = []; + 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' + }); + } else { + this.setState({ + accNodata: '', + bestAccuracy: bestAccnum.toFixed(6) + }); + } + }); } 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() { diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx index 8fce99f875..7f2d8dbde3 100644 --- a/src/webui/src/components/TrialsDetail.tsx +++ b/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 = []; - const accY: Array = []; + const accSource: Array = []; 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 + }); } }); - accY.push({ yAxis: accArr }); - const optionObj = getAccuracyData(accY[0]); - this.setState({ accSource: optionObj }, () => { - if (accArr.length === 0) { + const accarr: Array = []; + const indexarr: Array = []; + Object.keys(accSource).map(item => { + const items = accSource[item]; + accarr.push(items.acc); + indexarr.push(items.index); + }); + 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 }); }); diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx index e458cfefad..bb2eb511e3 100644 --- a/src/webui/src/components/overview/SuccessTable.tsx +++ b/src/webui/src/components/overview/SuccessTable.tsx @@ -21,34 +21,34 @@ class SuccessTable extends React.Component { let bgColor = ''; const columns = [{ - title: 'Number', + title: 'Trial No.', dataIndex: 'sequenceId', key: 'sequenceId', - width: 60, - className: 'tableHead', - render: (text: string, record: TableObj) => { - return ( - #{record.sequenceId} - ); - } + 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 ( +
{record.id}
+ ); + }, }, { 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 ( -
{duration}
+
{duration}
); }, }, { diff --git a/src/webui/src/components/trial-detail/Para.tsx b/src/webui/src/components/trial-detail/Para.tsx index 54871ee4fc..77a3f32362 100644 --- a/src/webui/src/components/trial-detail/Para.tsx +++ b/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); diff --git a/src/webui/src/components/trial-detail/TableList.tsx b/src/webui/src/components/trial-detail/TableList.tsx index 1456c1bda1..ce9fa1f51a 100644 --- a/src/webui/src/components/trial-detail/TableList.tsx +++ b/src/webui/src/components/trial-detail/TableList.tsx @@ -167,34 +167,33 @@ class TableList extends React.Component { }); }); 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 ( - #{record.sequenceId} - ); - } + 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 ( +
{record.id}
+ ); + } }, { 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 { duration = 0; } return ( -
{duration}
+
{duration}
); }, }, { diff --git a/src/webui/src/static/function.ts b/src/webui/src/static/function.ts index 641e717649..a180170f3d 100644 --- a/src/webui/src/static/function.ts +++ b/src/webui/src/static/function.ts @@ -1,5 +1,3 @@ -import { AccurPoint } from './interface'; - export const convertTime = (num: number) => { if (num % 3600 === 0) { return num / 3600 + 'h'; @@ -25,33 +23,4 @@ export const convertDuration = (num: number) => { } else { return result; } -}; - -// ACCURACY point graph option format -export const getAccuracyData = (dataObj: AccurPoint) => { - const yAxis = dataObj.yAxis; - const xAxis: Array = []; - 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 diff --git a/src/webui/src/static/interface.ts b/src/webui/src/static/interface.ts index b73f0e9440..8c1d4fc23d 100644 --- a/src/webui/src/static/interface.ts +++ b/src/webui/src/static/interface.ts @@ -37,7 +37,8 @@ interface Experiment { // trial accuracy interface AccurPoint { - yAxis: Array; + acc: number; + index: number; } interface TrialNumber { diff --git a/src/webui/src/static/style/table.scss b/src/webui/src/static/style/table.scss index 6baec14b08..0929687f69 100644 --- a/src/webui/src/static/style/table.scss +++ b/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 {