Skip to content

GitLab

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

refactor best trials (#2417) 


Co-authored-by: default avatarLijiao <15910218274@163.com>
parent 3efc59ee
Hide whitespace changes
Inline Side-by-side
Showing with 128 additions and 92 deletions
src/webui/src/App.scss
View file @ af800213
......@@ -29,7 +29,18 @@
margin: 0 auto;
margin-top: 74px;
margin-bottom: 30px;
background: #fff;
}
.bottomDiv{
margin-bottom: 10px;
}
.bgNNI{
background-color: #fff;
}
.borderRight{
margin-right: 10px;
}
/* office-fabric-ui */
......
src/webui/src/App.tsx
View file @ af800213
......@@ -14,6 +14,7 @@ interface AppState {
metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
isillegalFinal: boolean;
expWarningMessage: string;
bestTrialEntries: string; // for overview page: best trial entreis
}
class App extends React.Component<{}, AppState> {
......@@ -30,7 +31,8 @@ class App extends React.Component<{}, AppState> {
trialsUpdateBroadcast: 0,
metricGraphMode: 'max',
isillegalFinal: false,
expWarningMessage: ''
expWarningMessage: '',
bestTrialEntries: '10'
};
}
......@@ -92,9 +94,14 @@ class App extends React.Component<{}, AppState> {
this.setState({ metricGraphMode: val });
}
// overview best trial module
changeEntries = (entries: string): void => {
this.setState({bestTrialEntries: entries});
}
render(): React.ReactNode {
const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast,
metricGraphMode, isillegalFinal, expWarningMessage
metricGraphMode, isillegalFinal, expWarningMessage, bestTrialEntries
} = this.state;
if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
return null; // TODO: render a loading page
......@@ -106,7 +113,8 @@ class App extends React.Component<{}, AppState> {
columnList, changeColumn: this.changeColumn,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode
metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries, changeEntries: this.changeEntries
})
);
......
src/webui/src/components/Overview.tsx
View file @ af800213
import * as React from 'react';
import { Stack, IStackTokens } from 'office-ui-fabric-react';
import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
import Title1 from './overview/Title1';
......@@ -16,7 +16,9 @@ interface OverviewProps {
experimentUpdateBroadcast: number;
trialsUpdateBroadcast: number;
metricGraphMode: 'max' | 'min';
bestTrialEntries: string;
changeMetricGraphMode: (val: 'max' | 'min') => void;
changeEntries: (entries: string) => void;
}
interface OverviewState {
......@@ -38,6 +40,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
changeMetricGraphMode('max');
}
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
const { changeMetricGraphMode } = this.props;
......@@ -48,9 +51,16 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
this.setState({ trialConcurrency: val });
}
// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
if (item !== undefined) {
this.props.changeEntries(item.key);
}
}
render(): React.ReactNode {
const { trialConcurrency } = this.state;
const { experimentUpdateBroadcast, metricGraphMode } = this.props;
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
const searchSpace = this.convertSearchSpace();
const bestTrials = this.findBestTrials();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
......@@ -58,23 +68,31 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#999' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#999' : '#b3b3b3');
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
const stackTokens: IStackTokens = {
childrenGap: 30,
};
const entriesOption = [
{ key: '10', text: 'Display top 10 trials' },
{ key: '20', text: 'Display top 20 trials' },
{ key: '30', text: 'Display top 30 trials' },
{ key: '50', text: 'Display top 50 trials' },
{ key: '100', text: 'Display top 100 trials' }
];
return (
<div className="overview">
{/* status and experiment block */}
<Stack>
<Stack className="bottomDiv bgNNI">
<Title1 text="Experiment" icon="11.png" />
<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
</Stack>
<Stack horizontal className="overMessage">
<Stack horizontal className="overMessage bottomDiv">
{/* status block */}
<Stack.Item grow className="prograph overviewBoder cc">
<Stack.Item grow className="prograph bgNNI borderRight">
<Title1 text="Status" icon="5.png" />
<Progressed
bestAccuracy={bestAccuracy}
......@@ -84,13 +102,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/>
</Stack.Item>
{/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder">
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
<Title1 text="Search space" icon="10.png" />
<Stack className="experiment">
<SearchSpace searchSpace={searchSpace} />
</Stack>
</Stack.Item>
<Stack.Item grow styles={{root: {width: 450}}}>
{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
<Stack.Item grow styles={{root: {width: 450}}} className="bgNNI">
<Title1 text="Config" icon="4.png" />
<Stack className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/}
......@@ -104,19 +123,27 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
</Stack.Item>
</Stack>
<Stack>
<Stack horizontal className="top10bg">
<Stack style={{backgroundColor: '#fff'}}>
<Stack horizontal className="top10bg" style={{position: 'relative'}}>
<div
className="title"
onClick={this.clickMaxTop}
>
<Title1 text="Top10 Maximal trials" icon="max.png" bgcolor={titleMaxbgcolor} />
<Title1 text="Top Maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
</div>
<div
className="title minTitle"
onClick={this.clickMinTop}
>
<Title1 text="Top10 Minimal trials" icon="min.png" bgcolor={titleMinbgcolor} />
<Title1 text="Top Minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
</div>
<div style={{position: 'absolute', right: 52, top: 6}}>
<Dropdown
selectedKey={bestTrialEntries}
options={entriesOption}
onChange={this.updateEntries}
styles={{ root: { width: 170 } }}
/>
</div>
</Stack>
<Stack horizontal tokens={stackTokens}>
......@@ -128,7 +155,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/>
</div>
<div style={{ width: '60%'}}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
</div>
</Stack>
</Stack>
......@@ -155,10 +182,11 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
private findBestTrials(): Trial[] {
const bestTrials = TRIALS.sort();
const { bestTrialEntries } = this.props;
if (this.props.metricGraphMode === 'max') {
bestTrials.reverse().splice(10);
bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
} else {
bestTrials.splice(10);
bestTrials.splice(JSON.parse(bestTrialEntries));
}
return bestTrials;
}
......
src/webui/src/components/TrialsDetail.tsx
View file @ af800213
......@@ -142,53 +142,54 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
</Pivot>
</div>
{/* trial table list */}
<Stack horizontal className="panelTitle">
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
<Stack horizontal className="allList">
<StackItem grow={50}>
<DefaultButton
text="Compare"
className="allList-compare"
// use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
/>
</StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList">
<div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
<Stack horizontal className="allList">
<StackItem grow={50}>
<DefaultButton
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
text="Compare"
className="allList-compare"
// use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack>
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList}
changeColumn={changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
// TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList}
/>
</StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList">
<DefaultButton
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack>
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList}
changeColumn={changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
// TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList}
/>
</div>
</div>
);
}
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ af800213
......@@ -22,12 +22,16 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<Stack.Item grow={3} className="padItem basic">
<p>Name</p>
<div>{EXPERIMENT.profile.params.experimentName}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>ID</p>
<div>{EXPERIMENT.profile.id}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>Start time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
</Stack.Item>
<Stack.Item grow={3} className="padItem basic">
<p>End time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
</Stack.Item>
......@@ -45,6 +49,8 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
{EXPERIMENT.profile.logDir || 'unknown'}
</TooltipHost>
</div>
</Stack.Item>
<Stack.Item className="padItem basic">
<p>Training platform</p>
<div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
</Stack.Item>
......
src/webui/src/components/overview/Title1.tsx
View file @ af800213
......@@ -4,7 +4,7 @@ import '../../static/style/overviewTitle.scss';
interface Title1Props {
text: string;
icon?: string;
bgcolor?: string;
fontColor?: string;
}
class Title1 extends React.Component<Title1Props, {}> {
......@@ -14,11 +14,11 @@ class Title1 extends React.Component<Title1Props, {}> {
}
render(): React.ReactNode {
const { text, icon, bgcolor } = this.props;
const { text, icon, fontColor } = this.props;
return (
<Stack horizontal className="panelTitle" style={{ backgroundColor: bgcolor }}>
<Stack horizontal className="panelTitle">
<img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
<span>{text}</span>
<span style={{ color: fontColor }}>{text}</span>
</Stack>
);
}
......
src/webui/src/static/style/overview.scss
View file @ af800213
......@@ -25,7 +25,6 @@
padding: 15px 0;
color: #212121;
width: 95%;
margin: 0 auto;
}
.nowrap{
......
src/webui/src/static/style/overviewTitle.scss
View file @ af800213
$titleBgcolor: #b3b3b3;
$iconPaddingVal: 14px;
.overview .overviewBoder{
height: 100%;
border-right: 2px solid white;
}
.panelTitle{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
width: 100%;
height: 38px;
padding: 0 $iconPaddingVal;
background: $titleBgcolor;
padding: 4px $iconPaddingVal;
box-sizing: border-box;
img{
height: 22px;
/* (38 - 22 ) / 2 */
......@@ -40,7 +34,6 @@ $iconPaddingVal: 14px;
}
.top10bg{
background-color: $titleBgcolor;
.top10Title{
width: 160px;
......
src/webui/src/static/style/trialsDetail.scss
View file @ af800213
$bg: #b3b3b3;
#tabsty{
background-color: #fff;
.ms-Pivot{
.ms-Button{
padding: 0;
......@@ -7,13 +7,6 @@ $bg: #b3b3b3;
margin-right: 0;
border-right: 2px solid #fff;
transition: 0.3s;
&:hover{
background-color: $bg;
}
.ms-Button-flexContainer{
background-color: $bg;
}
}
.ms-Pivot-link::before{
......@@ -45,10 +38,7 @@ $bg: #b3b3b3;
/* graph, title total height */
width: 100%;
height: 500px;
/* graph all title bg*/
.ms-FocusZone{
background-color: $bg;
}
.graph{
height: 432px;
margin: 0 auto;
......
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