From 9caf5215d8a8ca8fb0729fc297f947699c1ca710 Mon Sep 17 00:00:00 2001 From: Lijiaoa <61399850+Lijiaoa@users.noreply.github.com> Date: Tue, 23 Feb 2021 23:38:50 +0800 Subject: [PATCH] Hybrid show trial platforms in webui (#3391) --- ts/webui/src/App.scss | 2 +- .../src/components/trial-detail/TableList.tsx | 25 +++ ts/webui/src/static/const.ts | 13 -- ts/webui/src/static/interface.ts | 2 + ts/webui/src/static/model/trial.ts | 1 + ts/webui/src/static/style/common.scss | 39 ++-- .../static/style/experiment/experiment.scss | 151 ++++++++-------- ts/webui/src/static/style/nav/nav.scss | 171 +++++++++--------- ts/webui/src/static/style/overview/count.scss | 161 +++++++++-------- .../src/static/style/overview/overview.scss | 159 ++++++++-------- ts/webui/src/static/style/overview/panel.scss | 121 ++++++------- 11 files changed, 432 insertions(+), 413 deletions(-) diff --git a/ts/webui/src/App.scss b/ts/webui/src/App.scss index 0eff30d9a2..7e3caaf5e3 100644 --- a/ts/webui/src/App.scss +++ b/ts/webui/src/App.scss @@ -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; diff --git a/ts/webui/src/components/trial-detail/TableList.tsx b/ts/webui/src/components/trial-detail/TableList.tsx index c3024098ac..5356574c69 100644 --- a/ts/webui/src/components/trial-detail/TableList.tsx +++ b/ts/webui/src/components/trial-detail/TableList.tsx @@ -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 { 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 { {record.status} ) }), + ...(k === 'message' && { + onRender: (record): React.ReactNode => + record.message.length > 15 ? ( + +
{record.message}
+ + ) : ( +
{record.message}
+ ) + }), ...((k.startsWith('metric/') || k.startsWith('space/')) && { // show tooltip onRender: (record): React.ReactNode => ( diff --git a/ts/webui/src/static/const.ts b/ts/webui/src/static/const.ts index 553e151703..0c3db720cb 100644 --- a/ts/webui/src/static/const.ts +++ b/ts/webui/src/static/const.ts @@ -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, diff --git a/ts/webui/src/static/interface.ts b/ts/webui/src/static/interface.ts index 99e89237ae..ad32122461 100644 --- a/ts/webui/src/static/interface.ts +++ b/ts/webui/src/static/interface.ts @@ -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[]; diff --git a/ts/webui/src/static/model/trial.ts b/ts/webui/src/static/model/trial.ts index dc3afdd63f..3292704095 100644 --- a/ts/webui/src/static/model/trial.ts +++ b/ts/webui/src/static/model/trial.ts @@ -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, diff --git a/ts/webui/src/static/style/common.scss b/ts/webui/src/static/style/common.scss index 555214dfd0..74ea97ba65 100644 --- a/ts/webui/src/static/style/common.scss +++ b/ts/webui/src/static/style/common.scss @@ -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 { diff --git a/ts/webui/src/static/style/experiment/experiment.scss b/ts/webui/src/static/style/experiment/experiment.scss index b9788b963d..d7cdd293b9 100644 --- a/ts/webui/src/static/style/experiment/experiment.scss +++ b/ts/webui/src/static/style/experiment/experiment.scss @@ -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; } diff --git a/ts/webui/src/static/style/nav/nav.scss b/ts/webui/src/static/style/nav/nav.scss index 1dd51b08df..dad4634b10 100644 --- a/ts/webui/src/static/style/nav/nav.scss +++ b/ts/webui/src/static/style/nav/nav.scss @@ -1,112 +1,113 @@ $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; + } } diff --git a/ts/webui/src/static/style/overview/count.scss b/ts/webui/src/static/style/overview/count.scss index 5189ff0fbc..6317e22967 100644 --- a/ts/webui/src/static/style/overview/count.scss +++ b/ts/webui/src/static/style/overview/count.scss @@ -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%; } diff --git a/ts/webui/src/static/style/overview/overview.scss b/ts/webui/src/static/style/overview/overview.scss index 6adc73889a..edfe8902f8 100644 --- a/ts/webui/src/static/style/overview/overview.scss +++ b/ts/webui/src/static/style/overview/overview.scss @@ -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; } diff --git a/ts/webui/src/static/style/overview/panel.scss b/ts/webui/src/static/style/overview/panel.scss index f37b3cc652..cc802e7ea9 100644 --- a/ts/webui/src/static/style/overview/panel.scss +++ b/ts/webui/src/static/style/overview/panel.scss @@ -1,83 +1,82 @@ $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; + } }