Skip to content
This repository has been archived by the owner on Sep 18, 2024. It is now read-only.

Commit

Permalink
Add more tooltips in default metric graph (#370)
Browse files Browse the repository at this point in the history 
* Add more tooltip in default metric graph and fix bug

* update
  • Loading branch information
@lvybriage @yds05
lvybriage authored and yds05 committed Nov 19, 2018
1 parent 0ee46f5 commit 12db0cb
Show file tree
Hide file tree
Showing 6 changed files with 78 additions and 23 deletions.
13 changes: 8 additions & 5 deletions src/webui/src/components/Overview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@ class Overview extends React.Component<{}, OverviewState> {
if (res.data.params.searchSpace) {
res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
}
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const interResultList = res2.data;
const contentOfExperiment = JSON.stringify(res.data, null, 2);
let trialMessagesArr = res1.data;
Expand All @@ -315,14 +316,16 @@ class Overview extends React.Component<{}, OverviewState> {
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.download = 'experiment.json';
aTag.href = URL.createObjectURL(file);
aTag.click();
URL.revokeObjectURL(aTag.href);
if (!isEdge) {
URL.revokeObjectURL(aTag.href);
}
if (navigator.userAgent.indexOf('Firefox') > -1) {
const downTag = document.createElement('a');
downTag.addEventListener('click', function () {
downTag.download = 'experiment.txt';
downTag.download = 'experiment.json';
downTag.href = URL.createObjectURL(file);
});
let eventMouse = document.createEvent('MouseEvents');
Expand All @@ -336,7 +339,7 @@ class Overview extends React.Component<{}, OverviewState> {
}));
}

// trial accuracy graph
// trial accuracy graph Default Metric
drawPointGraph = () => {

const { tableData } = this.state;
Expand Down Expand Up @@ -366,7 +369,7 @@ class Overview extends React.Component<{}, OverviewState> {
data: indexarr
},
yAxis: {
name: 'Accuracy',
name: 'Default Metric',
type: 'value',
data: accarr
},
Expand Down
50 changes: 36 additions & 14 deletions src/webui/src/components/TrialsDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, AccurPoint } 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';
Expand Down Expand Up @@ -42,11 +42,12 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
.then(res => {
if (res.status === 200 && this._isMounted) {
const accData = res.data;
const accSource: Array<AccurPoint> = [];
const accSource: Array<DetailAccurPoint> = [];
Object.keys(accData).map(item => {
if (accData[item].status === 'SUCCEEDED' && accData[item].finalMetricData) {
let acc;
let tableAcc;
let searchSpace: object = {};
if (accData[item].finalMetricData) {
acc = JSON.parse(accData[item].finalMetricData.data);
if (typeof (acc) === 'object') {
Expand All @@ -57,42 +58,62 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
tableAcc = acc;
}
}
if (accData[item].hyperParameters) {
searchSpace = JSON.parse(accData[item].hyperParameters).parameters;
}
accSource.push({
acc: tableAcc,
index: accData[item].sequenceId
index: accData[item].sequenceId,
searchSpace: JSON.stringify(searchSpace)
});
}
});
const accarr: Array<number> = [];
const indexarr: Array<number> = [];
const resultList: Array<number | string>[] = [];
Object.keys(accSource).map(item => {
const items = accSource[item];
accarr.push(items.acc);
indexarr.push(items.index);
let temp: Array<number | string>;
temp = [items.index, items.acc, JSON.parse(items.searchSpace)];
resultList.push(temp);
});
const allAcuracy = {
tooltip: {
trigger: 'item'
trigger: 'item',
enterable: true,
position: function (point: Array<number>, data: TooltipForAccuracy) {
if (data.data[0] < resultList.length / 2) {
return [point[0], 10];
} else {
return [point[0] - 300, 10];
}
},
formatter: function (data: TooltipForAccuracy) {
const result = '<div class="tooldetailAccuracy">' +
'<div>Trial No: ' + data.data[0] + '</div>' +
'<div>Default Metrc: ' + data.data[1] + '</div>' +
'<div>Parameters: ' +
'<pre>' + JSON.stringify(data.data[2], null, 4) + '</pre>' +
'</div>' +
'</div>';
return result;
}
},
xAxis: {
name: 'Trial',
type: 'category',
data: indexarr
},
yAxis: {
name: 'Accuracy',
name: 'Default Metric',
type: 'value',
data: accarr
},
series: [{
symbolSize: 6,
type: 'scatter',
data: accarr
data: resultList
}]
};

this.setState({ accSource: allAcuracy }, () => {
if (accarr.length === 0) {
if (resultList.length === 0) {
this.setState({
accNodata: 'No data'
});
Expand Down Expand Up @@ -250,8 +271,9 @@ class TrialsDetail extends React.Component<{}, TrialDetailState> {
accSource, accNodata,
tableListSource
} = this.state;

const titleOfacc = (
<Title1 text="Trial Accuracy" icon="3.png" />
<Title1 text="Default Metric" icon="3.png" />
);
const titleOfhyper = (
<Title1 text="Hyper Parameter" icon="1.png" />
Expand Down
2 changes: 2 additions & 0 deletions src/webui/src/components/overview/SuccessTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
dataIndex: 'duration',
key: 'duration',
width: 140,
sorter: (a: TableObj, b: TableObj) => (a.duration as number) - (b.duration as number),
render: (text: string, record: TableObj) => {
let duration;
if (record.duration) {
Expand Down Expand Up @@ -69,6 +70,7 @@ class SuccessTable extends React.Component<SuccessTableProps, {}> {
title: 'Default Metric',
dataIndex: 'acc',
key: 'acc',
sorter: (a: TableObj, b: TableObj) => (a.acc as number) - (b.acc as number),
render: (text: string, record: TableObj) => {
const accuracy = record.acc;
let wei = 0;
Expand Down
6 changes: 5 additions & 1 deletion src/webui/src/components/trial-detail/TableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,11 @@ class TableList extends React.Component<TableListProps, TableListState> {
})
.catch(error => {
if (error.response.status === 500) {
message.error('500 error, fail to cancel the job');
if (error.response.data.error) {
message.error(error.response.data.error);
} else {
message.error('500 error, fail to cancel the job');
}
}
});
}
Expand Down
11 changes: 11 additions & 0 deletions src/webui/src/static/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,16 @@ interface AccurPoint {
index: number;
}

interface DetailAccurPoint {
acc: number;
index: number;
searchSpace: string;
}

interface TooltipForAccuracy {
data: Array<number | object>;
}

interface TrialNumber {
succTrial: number;
failTrial: number;
Expand Down Expand Up @@ -82,5 +92,6 @@ interface VisualMapValue {

export {TableObj, Parameters, Experiment,
AccurPoint, TrialNumber, TrialJob,
DetailAccurPoint, TooltipForAccuracy,
HoverName, ParaObj, VisualMapValue, Dimobj
};
19 changes: 16 additions & 3 deletions src/webui/src/static/style/trialsDetail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@
background-color: #999;
span{
color: #fff;
font-size: 18px;
font-family: 'Segoe';
font-weight: normal;
}
}
}
Expand Down Expand Up @@ -52,4 +51,18 @@
.commonTableStyle{
overflow: hidden;
}
}
}

.tooldetailAccuracy{
user-select: text;
min-width: 245px;
max-width: 350px;
max-height: 350px;
padding: 10px 10px;
white-space: normal;
overflow: auto;
pre{
overflow: inherit;
margin-bottom: 10px;
}
}

0 comments on commit 12db0cb

Please sign in to comment.