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

Add more tooltips in default metric graph #370

Merged
merged 2 commits into from
Nov 19, 2018
Merged

Add more tooltips in default metric graph #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43b3b71
Add more tooltip in default metric graph and fix bug
Nov 16, 2018
50d3ba7
update
Nov 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/webui/src/components/Overview.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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;
}
}