Skip to content

GitLab

Unverified Commit 9caf5215 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Hybrid show trial platforms in webui (#3391)

parent 28c486c4
Hide whitespace changes
Inline Side-by-side
Showing with 432 additions and 413 deletions
ts/webui/src/App.scss
View file @ 9caf5215
......@@ -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;
......
ts/webui/src/components/trial-detail/TableList.tsx
View file @ 9caf5215
......@@ -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') {
......@@ -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 `_`
};
......@@ -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 => (
......
ts/webui/src/static/const.ts
View file @ 9caf5215
......@@ -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',
......@@ -75,7 +63,6 @@ export {
DOWNLOAD_IP,
trialJobStatus,
EXPERIMENTSTATUS,
COLUMNPro,
WEBUIDOC,
CONTROLTYPE,
MONACO,
......
ts/webui/src/static/interface.ts
View file @ 9caf5215
......@@ -46,6 +46,7 @@ interface TableRecord {
id: string;
duration: number;
status: string;
message: string;
intermediateCount: number;
accuracy?: number | any;
latestAccuracy: number | undefined;
......@@ -135,6 +136,7 @@ interface TrialJobInfo {
trialJobId: string;
sequenceId: number;
status: string;
message: string;
startTime?: number;
endTime?: number;
hyperParameters?: string[];
......
ts/webui/src/static/model/trial.ts
View file @ 9caf5215
......@@ -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,
......
ts/webui/src/static/style/common.scss
View file @ 9caf5215
.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 {
......
ts/webui/src/static/style/experiment/experiment.scss
View file @ 9caf5215
$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;
}
ts/webui/src/static/style/nav/nav.scss
View file @ 9caf5215
$barHeight: 56px;
.navOptions {
.ms-Button-icon {
color: #fff;
&:hover {
color: #fff;
}
}
.ms-Button--commandBar {
background-color: #0071bc;
user-select: none;
&:hover,
&:active {
color: #fff;
.ms-Button-icon {
color: #fff;
}
}
.ms-Button-textContainer {
color: #fff;
}
.ms-Button-menuIcon {
color: #fff;
background-color: transparent;
}
}
.experiment {
position: relative;
.ms-Button-icon {
color: #fff;
&:hover {
color: #fff;
}
}
.ms-Button--commandBar {
background-color: #0071bc;
user-select: none;
&:hover,
&:active {
color: #fff;
.ms-Button-icon {
color: #fff;
}
}
.ms-Button-textContainer {
color: #fff;
}
.ms-Button-menuIcon {
color: #fff;
background-color: transparent;
}
}
.experiment {
position: relative;
top: 3px;
text-decoration: none;
}
}
}
.nav {
width: 100%;
min-width: 1200px;
height: $barHeight;
line-height: $barHeight;
/* desktop mode useful */
.desktop-logo {
position: relative;
top: 6px;
}
.logoTitle {
font-size: 18px;
color: #fff;
}
&-refresh {
position: relative;
display: flex;
}
&-refresh-num {
position: absolute;
top: -13px;
left: 17px;
color: #fff;
font-size: 12px;
}
width: 100%;
min-width: 1200px;
height: $barHeight;
line-height: $barHeight;
/* desktop mode useful */
.desktop-logo {
position: relative;
top: 6px;
}
.logoTitle {
font-size: 18px;
color: #fff;
}
&-refresh {
position: relative;
display: flex;
}
&-refresh-num {
position: absolute;
top: -13px;
left: 17px;
color: #fff;
font-size: 12px;
}
}
/* overview and detail tabs common style */
a.common-tabs {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #b8c7ce;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
color: #b8c7ce;
text-decoration: none;
}
.common-tabs:visited,
.selected:hover {
color: #fff;
text-decoration: none;
color: #fff;
text-decoration: none;
}
.common-tabs:hover,
.selected {
color: #fff;
border-bottom: 1px solid #fff;
color: #fff;
border-bottom: 1px solid #fff;
}
.left-right-margin {
margin-left: 20px;
margin-right: 20px;
margin-left: 20px;
margin-right: 20px;
}
.expNavTitle {
span {
color: #fff;
text-decoration: none;
position: relative;
top: -4px;
}
i {
color: #fff;
font-size: 12px;
position: relative;
top: -3px;
padding-left: 4px;
}
span {
color: #fff;
text-decoration: none;
position: relative;
top: -4px;
}
i {
color: #fff;
font-size: 12px;
position: relative;
top: -3px;
padding-left: 4px;
}
}
ts/webui/src/static/style/overview/count.scss
View file @ 9caf5215
......@@ -2,129 +2,130 @@ $seriesIconMargin: 10px;
$margin: 24px;
.marginTop {
margin-top: $margin;
margin-top: $margin;
}
.ExpDuration {
margin-top: $margin;
margin-top: $margin;
.maxTrialNum {
margin-bottom: 10px;
}
.maxTrialNum {
margin-bottom: 10px;
}
}
.exp-progress {
margin-top: 9px;
margin-top: 9px;
.bold {
font-weight: 500;
}
.bold {
font-weight: 500;
}
.joiner {
padding: 0 3px;
}
.joiner {
padding: 0 3px;
}
}
.status-count {
span {
font-size: 14px;
color: #8f8f8f;
}
p {
font-size: 16px;
font-weight: 500;
color: #484848;
}
span {
font-size: 14px;
color: #8f8f8f;
}
p {
font-size: 16px;
font-weight: 500;
color: #484848;
}
}
.maxTrialNum {
.editparam {
position: relative;
top: -7px;
}
.editparam {
position: relative;
top: -7px;
}
}
.noEditDuration {
position: relative;
top: -7px;
position: relative;
top: -7px;
}
.editDuration {
position: relative;
top: -4px;
position: relative;
top: -4px;
}
.concurrency {
.editparam {
margin-top: 5px;
position: relative;
}
.editparam {
margin-top: 5px;
position: relative;
}
}
.editparam {
&-Input {
width: 42px;
height: 32px;
padding-right: 5px;
text-align: right;
outline: none;
border: none;
border-bottom: 1px solid #ccc;
}
.maxExecDuration {
width: 36px;
}
&-dropdown {
width: 65px;
display: inline-block;
position: relative;
top: 13px;
left: 4px;
margin-right: 3px;
.ms-Dropdown-title {
padding-right: 0;
}
}
&-Input {
width: 42px;
height: 32px;
padding-right: 5px;
text-align: right;
outline: none;
border: none;
border-bottom: 1px solid #ccc;
}
.maxExecDuration {
width: 36px;
}
&-dropdown {
width: 65px;
display: inline-block;
position: relative;
top: 13px;
left: 4px;
margin-right: 3px;
.ms-Dropdown-title {
padding-right: 0;
}
}
}
.series {
position: relative;
top: 5px;
position: relative;
top: 5px;
i {
font-size: 20px;
font-weight: 700;
}
i {
font-size: 20px;
font-weight: 700;
}
.confirm {
margin: 0 $seriesIconMargin;
.confirm {
margin: 0 $seriesIconMargin;
i {
color: green;
}
}
i {
color: green;
}
}
}
.cancel i {
color: red;
font-size: 16px;
color: red;
font-size: 16px;
}
.edit i {
margin-left: 4px;
margin-left: 4px;
}
.overview input:disabled {
background: transparent;
border: none;
background: transparent;
border: none;
}
.info {
position: absolute;
z-index: 999;
left: -50%;
position: absolute;
z-index: 999;
left: -50%;
width: 270%;
}
ts/webui/src/static/style/overview/overview.scss
View file @ 9caf5215
......@@ -3,61 +3,61 @@ $boxBorderRadius: 5px;
$boxGapPadding: 10px;
.wrapper {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 102px;
> div {
background: #fff;
padding: $boxPadding;
border-radius: $boxBorderRadius;
box-sizing: border-box;
}
.duration,
.trialCount {
grid-column: 1 / 5;
background: #fff;
padding: $boxPadding;
border-radius: $boxBorderRadius;
box-sizing: border-box;
margin-top: $boxGapPadding;
/* for alert message tooltip position */
position: relative;
}
.duration {
grid-row: 3 / 5;
height: 158px;
}
.trialCount {
grid-row: 5 / 8;
margin-top: -26px;
height: 273px;
}
.overviewCommand {
grid-column: 1 / 5;
grid-row-start: 8;
margin-top: -50px;
height: 158px;
margin-right: $boxGapPadding;
border-radius: $boxBorderRadius;
}
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-auto-rows: 102px;
> div {
background: #fff;
padding: $boxPadding;
border-radius: $boxBorderRadius;
box-sizing: border-box;
}
.duration,
.trialCount {
grid-column: 1 / 5;
background: #fff;
padding: $boxPadding;
border-radius: $boxBorderRadius;
box-sizing: border-box;
margin-top: $boxGapPadding;
/* for alert message tooltip position */
position: relative;
}
.duration {
grid-row: 3 / 5;
height: 158px;
}
.trialCount {
grid-row: 5 / 8;
margin-top: -26px;
height: 273px;
}
.overviewCommand {
grid-column: 1 / 5;
grid-row-start: 8;
margin-top: -50px;
height: 158px;
margin-right: $boxGapPadding;
border-radius: $boxBorderRadius;
}
}
.overviewBasicInfo {
grid-column: 1 / 5;
grid-row: 1 / 3;
z-index: 2;
grid-column: 1 / 5;
grid-row: 1 / 3;
z-index: 2;
}
.overviewBasicInfo,
.duration,
.trialCount {
margin-right: $boxGapPadding;
margin-right: $boxGapPadding;
}
.basic {
......@@ -65,8 +65,8 @@ $boxGapPadding: 10px;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
p {
font-size: 14px;
font-weight: normal;
font-size: 14px;
font-weight: normal;
color: #8f8f8f;
span {
......@@ -79,45 +79,44 @@ $boxGapPadding: 10px;
font-weight: 500;
color: #484848;
}
}
.overviewBestMetric {
grid-column: 5 / 9;
grid-row: 1 / 10;
max-height: 822px;
overflow: hidden;
.topTrialTitle {
width: 72%;
}
.active {
background: #d2d0ce;
}
.max {
margin-left: 7px;
}
.mincenter {
margin: 0 13px 0 $boxGapPadding;
}
.chooseEntry {
margin-right: $boxGapPadding;
line-height: 30px;
}
grid-column: 5 / 9;
grid-row: 1 / 10;
max-height: 822px;
overflow: hidden;
.topTrialTitle {
width: 72%;
}
.active {
background: #d2d0ce;
}
.max {
margin-left: 7px;
}
.mincenter {
margin: 0 13px 0 $boxGapPadding;
}
.chooseEntry {
margin-right: $boxGapPadding;
line-height: 30px;
}
}
.overviewCommand1,
.overviewCommand2 {
grid-row: 7 / 9;
height: 144px;
overflow: hidden;
margin-top: $boxGapPadding;
grid-row: 7 / 9;
height: 144px;
overflow: hidden;
margin-top: $boxGapPadding;
}
.overviewChart {
margin-top: 20px;
margin-top: 20px;
}
ts/webui/src/static/style/overview/panel.scss
View file @ 9caf5215
$buttonBorderRadius: 23px;
.config {
position: fixed;
right: 0;
z-index: 1000;
.ms-Button--default {
padding: 0 8px;
margin-bottom: 12px;
border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
font-size: 12px;
text-align: left;
.ms-Button-label {
font-weight: normal;
}
}
.integralBtn {
display: none;
}
.margin {
margin-left: 10px;
}
position: fixed;
right: 0;
z-index: 1000;
.ms-Button--default {
padding: 0 8px;
margin-bottom: 12px;
border: none;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.08);
border-radius: $buttonBorderRadius 0 0 $buttonBorderRadius;
font-size: 12px;
text-align: left;
.ms-Button-label {
font-weight: normal;
}
}
.integralBtn {
display: none;
}
.margin {
margin-left: 10px;
}
}
.container {
text-align: right;
text-align: right;
.icon {
min-width: 50px;
.icon {
min-width: 50px;
i {
font-size: 16px;
}
}
i {
font-size: 16px;
}
}
.maxScrBtn {
width: 150px;
.maxScrBtn {
width: 150px;
&:hover {
color: #fff;
border: 1px solid blue;
background-color: #0071bc;
}
}
&:hover {
color: #fff;
border: 1px solid blue;
background-color: #0071bc;
}
}
.configBtn i{
.configBtn i {
margin-left: -40px;
}
.logBtn i {
margin-left: -25px;
}
&:hover {
.icon {
display: none;
}
.integralBtn {
display: block;
color: #fff;
border: 1px solid blue;
background-color: #0071bc;
i {
font-size: 14px;
}
}
}
&:hover {
.icon {
display: none;
}
.integralBtn {
display: block;
color: #fff;
border: 1px solid blue;
background-color: #0071bc;
i {
font-size: 14px;
}
}
}
}
.ms-Fabric {
.ms-Panel-commands {
margin: 0;
}
.ms-Panel-commands {
margin: 0;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment