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

Commit

Permalink
refactor best trials (#2417)
Browse files Browse the repository at this point in the history 
Co-authored-by: Lijiao <15910218274@163.com>
  • Loading branch information
@Lijiaoa @lvybriage
Lijiaoa and lvybriage authored May 11, 2020
1 parent 3efc59e commit af80021
Show file tree
Hide file tree
Showing 9 changed files with 128 additions and 92 deletions.
13 changes: 12 additions & 1 deletion src/webui/src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
14 changes: 11 additions & 3 deletions src/webui/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> {
Expand All @@ -30,7 +31,8 @@ class App extends React.Component<{}, AppState> {
trialsUpdateBroadcast: 0,
metricGraphMode: 'max',
isillegalFinal: false,
expWarningMessage: ''
expWarningMessage: '',
bestTrialEntries: '10'
};
}

Expand Down Expand Up @@ -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
Expand All @@ -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
})
);

Expand Down
60 changes: 44 additions & 16 deletions src/webui/src/components/Overview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
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';
Expand All @@ -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 {
Expand All @@ -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;
Expand All @@ -48,33 +51,48 @@ 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
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
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}
Expand All @@ -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*/}
Expand All @@ -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}>
Expand All @@ -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>
Expand All @@ -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;
}
Expand Down
91 changes: 46 additions & 45 deletions src/webui/src/components/TrialsDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
6 changes: 6 additions & 0 deletions src/webui/src/components/overview/BasicInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions src/webui/src/components/overview/Title1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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, {}> {
Expand All @@ -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>
);
}
Expand Down
1 change: 0 additions & 1 deletion src/webui/src/static/style/overview.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
padding: 15px 0;
color: #212121;
width: 95%;
margin: 0 auto;
}

.nowrap{
Expand Down
Loading

0 comments on commit af80021

Please sign in to comment.