Skip to content

GitLab

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