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

[webui] refactor overview page #2924

Merged
merged 14 commits into from
Oct 12, 2020
Merged

[webui] refactor overview page #2924

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
86c8a2e
fisrt commit
Sep 22, 2020
d2507f5
Merge branch 'master' of https://github.com/Microsoft/nni into overview
Sep 22, 2020
f95b541
fix styles
Sep 22, 2020
4dfbb02
fix showMessage info
Sep 22, 2020
87a68c9
PR
Sep 25, 2020
876bf58
fix update bug and improve trial command model
Sep 28, 2020
6020f3e
fix a comment
Sep 28, 2020
79c8373
delete unuseful file
Sep 28, 2020
1dfd074
add img file back and delete final metric is format because webui sup…
Sep 28, 2020
2864845
add global loding
Sep 28, 2020
697420b
fix some comments
Oct 7, 2020
5a1dd22
fix yuge comments and update loading img style and update yarn.lock
Oct 9, 2020
d3b8ac3
fix comments
Oct 10, 2020
bab6b92
remove config search space button from overview page to App
Oct 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/webui/src/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@
}

.content {
width: 89%;
min-width: 1024px;
width: 87%;
margin: 0 auto;
min-width: 1200px;
margin-top: 74px;
margin-bottom: 30px;
}
Expand Down
44 changes: 14 additions & 30 deletions src/webui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { COLUMN } from './static/const';
import { EXPERIMENT, TRIALS } from './static/datamodel';
import NavCon from './components/NavCon';
import MessageInfo from './components/modals/MessageInfo';
import { TrialConfigButton } from './components/public-child/config/TrialConfigButton';
import './App.scss';

interface AppState {
Expand All @@ -30,12 +31,13 @@ export const AppContext = React.createContext({
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeMetricGraphMode: (val: 'max' | 'min') => {},
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeEntries: (val: string) => {}
changeEntries: (val: string) => {},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think (_: string) => {} will suppress the warning.

Why no-empty-function is enabled? Doesn't make any sense to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes sense to me. And this rule is discussed result?

// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
updateOverviewPage: () => {}
});

class App extends React.Component<{}, AppState> {
private timerId!: number | undefined;
private dataFormatimer!: number;
private firstLoad: boolean = false; // when click refresh selector options
constructor(props: {}) {
super(props);
Expand All @@ -60,35 +62,8 @@ class App extends React.Component<{}, AppState> {
metricGraphMode: EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max'
}));
this.timerId = window.setTimeout(this.refresh, this.state.interval * 100);
// final result is legal
// get a succeed trial，see final result data's format
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
this.dataFormatimer = window.setInterval(this.getFinalDataFormat, this.state.interval * 1000);
}

getFinalDataFormat = (): void => {
for (let i = 0; this.state.isillegalFinal === false; i++) {
if (TRIALS.succeededTrials()[0] !== undefined && TRIALS.succeededTrials()[0].final !== undefined) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const oneSucceedTrial = JSON.parse(JSON.parse(TRIALS.succeededTrials()[0].final!.data));
if (typeof oneSucceedTrial === 'number' || oneSucceedTrial.hasOwnProperty('default')) {
window.clearInterval(this.dataFormatimer);
break;
} else {
// illegal final data
this.setState(() => ({
isillegalFinal: true,
expWarningMessage:
'WebUI support final result as number and dictornary includes default keys, your experiment final result is illegal, please check your data.'
}));
window.clearInterval(this.dataFormatimer);
}
} else {
break;
}
}
};

changeInterval = (interval: number): void => {
window.clearTimeout(this.timerId);
if (interval === 0) {
Expand Down Expand Up @@ -116,6 +91,12 @@ class App extends React.Component<{}, AppState> {
this.setState({ bestTrialEntries: entries });
};

updateOverviewPage = (): void => {
this.setState(state => ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems the parenthesis is not necessary.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually needed.

experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1
}));
};

shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
nextState.isUpdate = true;
Expand Down Expand Up @@ -155,6 +136,8 @@ class App extends React.Component<{}, AppState> {
</div>
<Stack className='contentBox'>
<Stack className='content'>
{/* search space & config */}
<TrialConfigButton />
{/* if api has error field, show error message */}
{errorList.map(
(item, key) =>
Expand All @@ -179,7 +162,8 @@ class App extends React.Component<{}, AppState> {
metricGraphMode,
changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries,
changeEntries: this.changeEntries
changeEntries: this.changeEntries,
updateOverviewPage: this.updateOverviewPage
}}
>
{this.props.children}
Expand Down
Loading