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

Commit

Permalink
Hybrid show trial platforms in webui (#3391)
Browse files Browse the repository at this point in the history
  • Loading branch information
Lijiaoa authored Feb 23, 2021
1 parent 28c486c commit 9caf521
Show file tree
Hide file tree
Showing 11 changed files with 432 additions and 413 deletions.
2 changes: 1 addition & 1 deletion ts/webui/src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@

.content {
width: 87%;
min-height: calc(100vh - 56);
min-height: calc(100vh - 56px);
margin: 0 auto;
min-width: 1200px;
max-width: 1490px;
Expand Down
25 changes: 25 additions & 0 deletions ts/webui/src/components/trial-detail/TableList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ function _inferColumnTitle(columnKey: string): string {
return 'ID';
} else if (columnKey === 'intermediateCount') {
return 'Intermediate results (#)';
} else if (columnKey === 'message') {
return 'Message';
} else if (columnKey.startsWith('space/')) {
return columnKey.split('/', 2)[1] + ' (space)';
} else if (columnKey === 'latestAccuracy') {
Expand Down Expand Up @@ -185,6 +187,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
endTime: (trial as Trial).info.endTime,
duration: trial.duration,
status: trial.status,
message: (trial as Trial).info.message || '--',
intermediateCount: trial.intermediates.length,
_expandDetails: this._expandedTrialIds.has(trial.id) // hidden field names should start with `_`
};
Expand Down Expand Up @@ -280,6 +283,28 @@ class TableList extends React.Component<TableListProps, TableListState> {
<span className={`${record.status} commonStyle`}>{record.status}</span>
)
}),
...(k === 'message' && {
onRender: (record): React.ReactNode =>
record.message.length > 15 ? (
<TooltipHost
content={record.message}
directionalHint={DirectionalHint.bottomCenter}
tooltipProps={{
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
>
<div>{record.message}</div>
</TooltipHost>
) : (
<div>{record.message}</div>
)
}),
...((k.startsWith('metric/') || k.startsWith('space/')) && {
// show tooltip
onRender: (record): React.ReactNode => (
Expand Down
13 changes: 0 additions & 13 deletions ts/webui/src/static/const.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,18 +39,6 @@ const DRAWEROPTION = {
const OPERATION = 'Operation';
// defatult selected column
const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
// all choice column !dictory final
const COLUMNPro = [
'Trial No.',
'ID',
'Start time',
'End time',
'Duration',
'Status',
'Intermediate result',
'Default',
OPERATION
];
const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
const SUPPORTED_SEARCH_SPACE_TYPE = [
'choice',
Expand All @@ -75,7 +63,6 @@ export {
DOWNLOAD_IP,
trialJobStatus,
EXPERIMENTSTATUS,
COLUMNPro,
WEBUIDOC,
CONTROLTYPE,
MONACO,
Expand Down
2 changes: 2 additions & 0 deletions ts/webui/src/static/interface.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ interface TableRecord {
id: string;
duration: number;
status: string;
message: string;
intermediateCount: number;
accuracy?: number | any;
latestAccuracy: number | undefined;
Expand Down Expand Up @@ -135,6 +136,7 @@ interface TrialJobInfo {
trialJobId: string;
sequenceId: number;
status: string;
message: string;
startTime?: number;
endTime?: number;
hyperParameters?: string[];
Expand Down
1 change: 1 addition & 0 deletions ts/webui/src/static/model/trial.ts
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ class Trial implements TableObj {
endTime: this.info.endTime,
duration,
status: this.info.status,
message: this.info.message || '--',
intermediateCount: this.intermediates.length,
accuracy: accuracy,
latestAccuracy: this.latestAccuracy,
Expand Down
39 changes: 20 additions & 19 deletions ts/webui/src/static/style/common.scss
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.link {
outline: none;
color: #333 !important;
text-decoration: none;

&:hover {
color: #0071bc !important;
text-decoration: underline;
}
&:active,
&:visited {
color: #0071bc;
}
outline: none;
color: #333 !important;
text-decoration: none;

&:hover {
color: #0071bc !important;
text-decoration: underline;
}

&:active,
&:visited {
color: #0071bc;
}
}

.cursor {
&:hover,
& i:hover {
cursor: pointer;
}
&:hover,
& i:hover {
cursor: pointer;
}
}

.idCopy {
Expand Down
151 changes: 77 additions & 74 deletions ts/webui/src/static/style/experiment/experiment.scss
Original file line number Diff line number Diff line change
@@ -1,84 +1,87 @@
$pageMargin: 24px;

.expBackground {
background: #f2f2f2;
height: 100%;

.content {
/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
margin-top: 32px;
margin-bottom: $pageMargin;
background: #fff;
}
background: #f2f2f2;
height: 100%;

.content {
/* TODO: here is 32 rather than $pageMargin is because experiment page `content` position */
margin-top: 32px;
margin-bottom: $pageMargin;
background: #fff;
}
}

.experimentList {
padding: $pageMargin 42px;

.ms-DetailsRow {
&:hover, &:focus {
background: #F3F2F1 !important;
}
}

.box {
margin-top: 20px;

.search {
width: 90%;

&-input {
width: 330px;
}
}

.filter {
width: 10%;
text-align: right;

&-button-open {
background: #f3f2f1;
}
}
}

.filter-condition {
margin-top: 26px;
.reset {
width: 80px;
position: relative;
top: 29px;
}

&-status {
width: 194px;
}
&-platform {
width: 150px;
}
}

.hidden {
display: none;
}

.margin {
margin-left: 10px;
}

.idColor {
color: #615f5d !important;
}

.toAnotherExp {
color: #0071bc !important;
}

.ms-DetailsRow:focus {
background: #e1dfdd;
}
padding: $pageMargin 42px;

.ms-DetailsRow {
&:hover,
&:focus {
background: #f3f2f1 !important;
}
}

.box {
margin-top: 20px;

.search {
width: 90%;

&-input {
width: 330px;
}
}

.filter {
width: 10%;
text-align: right;

&-button-open {
background: #f3f2f1;
}
}
}

.filter-condition {
margin-top: 26px;

.reset {
width: 80px;
position: relative;
top: 29px;
}

&-status {
width: 194px;
}

&-platform {
width: 150px;
}
}

.hidden {
display: none;
}

.margin {
margin-left: 10px;
}

.idColor {
color: #615f5d !important;
}

.toAnotherExp {
color: #0071bc !important;
}

.ms-DetailsRow:focus {
background: #e1dfdd;
}
}

.gray-port {
color: #bebebe;
color: #bebebe;
}
Loading

0 comments on commit 9caf521

Please sign in to comment.