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

[webui] eslint fix #1864

Merged
merged 8 commits into from
Dec 23, 2019
Merged

[webui] eslint fix #1864

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
725c472
fix eslint
Dec 19, 2019
0c4d8d9
not check react/disable-name
Dec 20, 2019
e2a9db5
change promise<any> to promise<void>
Dec 20, 2019
60fa3a7
promise
Dec 20, 2019
4c5fe45
fix comments by chicm-ms
Dec 20, 2019
336409b
change render type to React.ReactNode and merge eslint rules and more…
Dec 23, 2019
1ce7067
change Array<number> to number[]
Dec 23, 2019
0cdfa8a
delete unuseful eslint note
Dec 23, 2019
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
3 changes: 2 additions & 1 deletion src/webui/.eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@
"@typescript-eslint/consistent-type-assertions": 0,
"@typescript-eslint/no-inferrable-types": 0,
"no-inner-declarations": 0,
"@typescript-eslint/no-var-requires": 0
"@typescript-eslint/no-var-requires": 0,
"react/display-name": 0
},
"ignorePatterns": [
"node_modules/",
Expand Down
14 changes: 7 additions & 7 deletions src/webui/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ class App extends React.Component<{}, AppState> {
};
}

async componentDidMount() {
async componentDidMount(): Promise<any> {
Copy link
Contributor

Choose a reason for hiding this comment

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

This should be Promise since there is no return value.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks. Had changed Promise<any> to Promise<void>.

await Promise.all([ EXPERIMENT.init(), TRIALS.init() ]);
this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
this.setState({ metricGraphMode: (EXPERIMENT.optimizeMode === 'minimize' ? 'min' : 'max') });
}

changeInterval = (interval: number) => {
changeInterval = (interval: number): void => {
this.setState({ interval });
if (this.timerId === null && interval !== 0) {
window.setTimeout(this.refresh);
Expand All @@ -45,15 +45,15 @@ class App extends React.Component<{}, AppState> {
}

// TODO: use local storage
changeColumn = (columnList: Array<string>) => {
changeColumn = (columnList: Array<string>): void => {
this.setState({ columnList: columnList });
}

changeMetricGraphMode = (val: 'max' | 'min') => {
changeMetricGraphMode = (val: 'max' | 'min'): void => {
this.setState({ metricGraphMode: val });
}

render() {
render(): any{
Copy link
Contributor

Choose a reason for hiding this comment

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

Can the return type be React.ReactNode?

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's right!

const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast, metricGraphMode } = this.state;
if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
return null; // TODO: render a loading page
Expand Down Expand Up @@ -86,7 +86,7 @@ class App extends React.Component<{}, AppState> {
);
}

private refresh = async () => {
private refresh = async (): Promise<any> => {
const [ experimentUpdated, trialsUpdated ] = await Promise.all([ EXPERIMENT.update(), TRIALS.update() ]);
if (experimentUpdated) {
this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
Expand All @@ -107,7 +107,7 @@ class App extends React.Component<{}, AppState> {
}
}

private async lastRefresh() {
private async lastRefresh(): Promise<any> {
await EXPERIMENT.update();
await TRIALS.update(true);
this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1 }));
Expand Down
14 changes: 7 additions & 7 deletions src/webui/src/components/Modal/Compare.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ class Compare extends React.Component<CompareProps, {}> {
super(props);
}

intermediate = () => {
intermediate = (): any => {
Copy link
Contributor

@chicm-ms chicm-ms Dec 20, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

what is the object type of the return value?

Copy link
Contributor Author

@lvybriage lvybriage Dec 20, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

It's hard to ensure its type.
I try HTMLElement Element HTMLDivElement.
all tooltip this error: Type 'Element' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 238 more.ts(2740)

Copy link
Contributor

Choose a reason for hiding this comment

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

Have you tried React.ReactNode?

const { compareRows } = this.props;
const trialIntermediate: Array<Intermedia> = [];
const idsList: Array<string> = [];
Expand Down Expand Up @@ -52,14 +52,14 @@ class Compare extends React.Component<CompareProps, {}> {
tooltip: {
trigger: 'item',
enterable: true,
position: function (point: Array<number>, data: TooltipForIntermediate) {
position: function (point: Array<number>, data: TooltipForIntermediate): Array<number> {
Copy link
Contributor

Choose a reason for hiding this comment

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

Array<number> is more oftenly written as number[].

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks

if (data.dataIndex < length / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
formatter: function (data: TooltipForIntermediate) {
formatter: function (data: TooltipForIntermediate): any {
const trialId = data.seriesName;
let obj = {};
const temp = trialIntermediate.find(key => key.name === trialId);
Expand Down Expand Up @@ -106,7 +106,7 @@ class Compare extends React.Component<CompareProps, {}> {
}

// render table column ---
initColumn = () => {
initColumn = (): any => {
const idList: Array<string> = [];
const sequenceIdList: Array<number> = [];
const durationList: Array<number> = [];
Expand Down Expand Up @@ -195,15 +195,15 @@ class Compare extends React.Component<CompareProps, {}> {
);
}

componentDidMount() {
componentDidMount(): void {
this._isCompareMount = true;
}

componentWillUnmount() {
componentWillUnmount(): void {
this._isCompareMount = false;
}

render() {
render(): any{
const { visible, cancelFunc } = this.props;

return (
Expand Down
22 changes: 11 additions & 11 deletions src/webui/src/components/Modal/CustomizedTrial.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
}

// [submit click] user add a new trial [submit a trial]
addNewTrial = () => {
addNewTrial = (): void => {
const { searchSpace, copyTrialParameter } = this.state;
// get user edited hyperParameter, ps: will change data type if you modify the input val
const customized = this.props.form.getFieldsValue();
Expand Down Expand Up @@ -76,19 +76,19 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {

}

warningConfirm = () => {
warningConfirm = (): void => {
this.setState(() => ({ isShowWarning: false }));
const { customParameters } = this.state;
this.submitCustomize(customParameters);
}

warningCancel = () => {
warningCancel = (): void => {
this.setState(() => ({ isShowWarning: false }));
}

submitCustomize = (customized: Object) => {
submitCustomize = (customized: Record<string, any>): void => {
// delete `tag` key
for (let i in customized) {
for (const i in customized) {
if (i === 'tag') {
delete customized[i];
}
Expand All @@ -106,40 +106,40 @@ class Customize extends React.Component<CustomizeProps, CustomizeState> {
this.setState(() => ({ isShowSubmitFailed: true }));
}
})
.catch(error => {
.catch(() => {
this.setState(() => ({ isShowSubmitFailed: true }));
});
}

closeSucceedHint = () => {
closeSucceedHint = (): void => {
// also close customized trial modal
this.setState(() => ({ isShowSubmitSucceed: false }));
this.props.closeCustomizeModal();
}

closeFailedHint = () => {
closeFailedHint = (): void => {
// also close customized trial modal
this.setState(() => ({ isShowSubmitFailed: false }));
this.props.closeCustomizeModal();
}

componentDidMount() {
componentDidMount(): void {
const { copyTrialId } = this.props;
if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
}
}

componentWillReceiveProps(nextProps: CustomizeProps) {
componentWillReceiveProps(nextProps: CustomizeProps): void {
const { copyTrialId } = nextProps;
if (copyTrialId !== undefined && TRIALS.getTrial(copyTrialId) !== undefined) {
const originCopyTrialPara = TRIALS.getTrial(copyTrialId).description.parameters;
this.setState(() => ({ copyTrialParameter: originCopyTrialPara }));
}
}

render() {
render(): any {
const { closeCustomizeModal, visible } = this.props;
const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
const {
Expand Down
16 changes: 8 additions & 8 deletions src/webui/src/components/Modal/ExperimentDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
};
}

getExperimentContent = () => {
getExperimentContent = (): void => {
axios
.all([
axios.get(`${MANAGER_IP}/experiment`),
Expand All @@ -41,7 +41,7 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
if (res.data.params.searchSpace) {
res.data.params.searchSpace = JSON.parse(res.data.params.searchSpace);
}
let trialMessagesArr = res1.data;
const trialMessagesArr = res1.data;
const interResultList = res2.data;
Object.keys(trialMessagesArr).map(item => {
// not deal with trial's hyperParameters
Expand All @@ -66,34 +66,34 @@ class ExperimentDrawer extends React.Component<ExpDrawerProps, ExpDrawerState> {
}));
}

downExperimentParameters = () => {
downExperimentParameters = (): void => {
const { experiment } = this.state;
downFile(experiment, 'experiment.json');
}

onWindowResize = () => {
onWindowResize = (): void => {
this.setState(() => ({expDrawerHeight: window.innerHeight - 48}));
}

componentDidMount() {
componentDidMount(): void {
this._isCompareMount = true;
this.getExperimentContent();
window.addEventListener('resize', this.onWindowResize);
}

componentWillReceiveProps(nextProps: ExpDrawerProps) {
componentWillReceiveProps(nextProps: ExpDrawerProps): void {
const { isVisble } = nextProps;
if (isVisble === true) {
this.getExperimentContent();
}
}

componentWillUnmount() {
componentWillUnmount(): void {
this._isCompareMount = false;
window.removeEventListener('resize', this.onWindowResize);
}

render() {
render(): any {
const { isVisble, closeExpDrawer } = this.props;
const { experiment, expDrawerHeight } = this.state;
return (
Expand Down
20 changes: 10 additions & 10 deletions src/webui/src/components/Modal/LogDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,19 +33,19 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
};
}

downloadNNImanager = () => {
downloadNNImanager = (): void => {
if (this.state.nniManagerLogStr !== null) {
downFile(this.state.nniManagerLogStr, 'nnimanager.log');
}
}

downloadDispatcher = () => {
downloadDispatcher = (): void => {
if (this.state.dispatcherLogStr !== null) {
downFile(this.state.dispatcherLogStr, 'dispatcher.log');
}
}

dispatcherHTML = () => {
dispatcherHTML = (): any => {
return (
<div>
<span>Dispatcher Log</span>
Expand All @@ -56,7 +56,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
);
}

nnimanagerHTML = () => {
nnimanagerHTML = (): any => {
return (
<div>
<span>NNImanager Log</span>
Expand All @@ -65,21 +65,21 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
);
}

setLogDrawerHeight = () => {
setLogDrawerHeight = (): void => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
}

async componentDidMount() {
async componentDidMount(): Promise<any> {
this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight);
}

componentWillUnmount() {
componentWillUnmount(): void {
window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight);
}

render() {
render(): any {
const { closeDrawer, activeTab } = this.props;
const { nniManagerLogStr, dispatcherLogStr, isLoading, logDrawerHeight } = this.state;
return (
Expand Down Expand Up @@ -164,7 +164,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
);
}

private refresh = () => {
private refresh = (): void => {
window.clearTimeout(this.timerId);
const dispatcherPromise = axios.get(`${DOWNLOAD_IP}/dispatcher.log`);
const nniManagerPromise = axios.get(`${DOWNLOAD_IP}/nnimanager.log`);
Expand All @@ -184,7 +184,7 @@ class LogDrawer extends React.Component<LogDrawerProps, LogDrawerState> {
});
}

private manualRefresh = () => {
private manualRefresh = (): void => {
this.setState({ isLoading: true });
this.refresh();
}
Expand Down
14 changes: 7 additions & 7 deletions src/webui/src/components/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,31 +35,31 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
};
}

clickMaxTop = (event: React.SyntheticEvent<EventTarget>) => {
clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
// #999 panel active bgcolor; #b3b3b3 as usual
const { changeMetricGraphMode } = this.props;
changeMetricGraphMode('max');
}

clickMinTop = (event: React.SyntheticEvent<EventTarget>) => {
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation();
const { changeMetricGraphMode } = this.props;
changeMetricGraphMode('min');
}

changeConcurrency = (val: number) => {
changeConcurrency = (val: number): void => {
this.setState({ trialConcurrency: val });
}

render() {
render(): any {
const { trialConcurrency } = this.state;
const { experimentUpdateBroadcast, metricGraphMode } = this.props;

const searchSpace = this.convertSearchSpace();

const bestTrials = this.findBestTrials();
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : ''; // eslint-disable-line
Copy link
Contributor

Choose a reason for hiding this comment

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

when // eslint-disable-line is used, please specify the rule such as // eslint-disable-line @typescript-eslint/camelcase, so that we know which rule is disabled

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ok.

const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data';

Expand Down Expand Up @@ -147,7 +147,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
const searchSpace = Object.assign({}, EXPERIMENT.searchSpace);
Object.keys(searchSpace).map(item => {
const key = searchSpace[item]._type;
let value = searchSpace[item]._value;
const value = searchSpace[item]._value;
switch (key) {
case 'quniform':
case 'qnormal':
Expand All @@ -161,7 +161,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
}

private findBestTrials(): Trial[] {
let bestTrials = TRIALS.sort();
const bestTrials = TRIALS.sort();
if (this.props.metricGraphMode === 'max') {
bestTrials.reverse().splice(10);
} else {
Expand Down
Loading