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

[v1.8 bug-bash] fix webui error #2808

Merged
merged 3 commits into from
Aug 24, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
21 changes: 18 additions & 3 deletions src/webui/src/components/Modals/Compare.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,10 @@ class Compare extends React.Component<CompareProps, {}> {
containLabel: true
},
legend: {
// more than 10 trials will hide legend
data: idsList.length > 10 ? null : idsList
type: 'scroll',
right: 40,
left: idsList.length > 6 ? 80 : null,
data: idsList
},
xAxis: {
type: 'category',
Expand Down Expand Up @@ -135,8 +137,17 @@ class Compare extends React.Component<CompareProps, {}> {
isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
? true : false;
}
const width = this.getWebUIWidth();
let scrollClass;
if (width > 1200) {
scrollClass = idList.length > 3 ? 'flex' : '';
} else if (width < 700) {
scrollClass = idList.length > 1 ? 'flex' : '';
} else {
scrollClass = idList.length > 2 ? 'flex' : '';
}
return (
<table className="compare-modal-table">
<table className={`compare-modal-table ${scrollClass}`}>
<tbody>
<tr>
<td className="column">Id</td>
Expand Down Expand Up @@ -200,6 +211,10 @@ class Compare extends React.Component<CompareProps, {}> {
);
}

getWebUIWidth = (): number => {
return window.innerWidth;
}

componentDidMount(): void {
this._isCompareMount = true;
}
Expand Down
10 changes: 7 additions & 3 deletions src/webui/src/components/public-child/PaiTrialChild.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import { DOWNLOAD_IP } from '../../static/const';
import LogPathChild from './LogPathChild';

interface PaiTrialChildProps {
logString: string;
Expand All @@ -21,7 +22,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
{
logString === ''
?
<div />
null
:
<div>
{
Expand All @@ -33,10 +34,13 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
href={`${DOWNLOAD_IP}/trial_${id}.log`}
style={{ marginRight: 10 }}
>
trial stdout
Trial stdout
</a>
:
<span>trial stdout: {logString}</span>
<LogPathChild
eachLogpath={logString}
logName="Trial stdout:"
/>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the log of pai mode use 2 different components? can they use the same PaiTrialLog component?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

logPathChild just confirm that log string is hyperlink. But log nested components will refactor next release.

}
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions src/webui/src/components/public-child/PaiTrialLog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
>
Trial stdout
</a>
<a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>hdfsLog</a>
<a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>NFS log</a>
</div>
:
<div>
Expand All @@ -52,7 +52,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
/>
<LogPathChild
eachLogpath={logStr.split(',')[1]}
logName="Log on HDFS:"
logName="Log on NFS:"
/>
</div>
}
Expand Down
27 changes: 16 additions & 11 deletions src/webui/src/static/model/trial.ts
Original file line number Diff line number Diff line change
Expand Up @@ -112,14 +112,14 @@ class Trial implements TableObj {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const duration = (endTime - this.info.startTime!) / 1000;
let accuracy;
if(this.acc !== undefined && this.acc.default !== undefined){
if(typeof this.acc.default === 'number'){
if (this.acc !== undefined && this.acc.default !== undefined) {
if (typeof this.acc.default === 'number') {
accuracy = JSON5.parse(this.acc.default);
}else {
} else {
accuracy = this.acc.default;
}
}

return {
key: this.info.id,
sequenceId: this.info.sequenceId,
Expand Down Expand Up @@ -227,7 +227,7 @@ class Trial implements TableObj {
Object.entries(acc).forEach(item => {
const [k, v] = item;
const column = space.axes.get(k);

if (column !== undefined) {
ret.set(column, v);
} else {
Expand All @@ -245,7 +245,7 @@ class Trial implements TableObj {
}

public finalKeys(): string[] {
if(this.acc !== undefined){
if (this.acc !== undefined) {
return Object.keys(this.acc);
} else {
return [];
Expand Down Expand Up @@ -304,11 +304,16 @@ class Trial implements TableObj {
}

private renderNumber(val: any): string {
if(typeof val === 'number'){
if (typeof val === 'number') {
if (isNaNorInfinity(val)) {
return `${val}`; // show 'NaN' or 'Infinity'
} else {
return `${formatAccuracy(val)} (FINAL)`;
if (this.accuracy === undefined) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this.accuracy final result value?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes.

return `${formatAccuracy(val)} (LATEST)`;
} else {
return `${formatAccuracy(val)} (FINAL)`;

}
}
} else {
// show other types, such as {tensor: {data: }}
Expand All @@ -317,8 +322,8 @@ class Trial implements TableObj {
}

public formatLatestAccuracy(): string { // TODO: this should be private
if(this.status === 'SUCCEEDED'){
return (this.accuracy === undefined ? '--': this.renderNumber(this.accuracy));
if (this.status === 'SUCCEEDED') {
return (this.accuracy === undefined ? '--' : this.renderNumber(this.accuracy));
} else {
if (this.accuracy !== undefined) {
return this.renderNumber(this.accuracy);
Expand All @@ -330,7 +335,7 @@ class Trial implements TableObj {
return this.renderNumber(metricAccuracy(latest));
}
}

}
}

Expand Down
11 changes: 8 additions & 3 deletions src/webui/src/static/style/compare.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,21 @@
/* decide modal size */
.ms-Dialog-main{
width: 50%;
overflow: hidden;
min-width: 450px;
}
.ms-Modal-scrollableContent{
overflow-x: hidden;
}

/* compare-md: table style */
.flex{
display: flex;
}
&-table{
width: 92%;
margin: 0 auto;
margin-bottom: 20px;
border: 1px solid transparent;
overflow: auto;
overflow: auto hidden;
color: #333;
tr{
line-height: 30px;
Expand Down