-
+ {errorList.map(
+ (item, key) =>
+ item.errorWhere && (
+
+
- );
- })
- }
- {isillegalFinal &&
-
-
}
- {reactPropsChildren}
+ )
+ )}
+ {isillegalFinal && (
+
+
+
+ )}
+
+ {this.props.children}
+
@@ -179,7 +201,6 @@ class App extends React.Component<{}, AppState> {
if (trialsUpdated) {
this.setState(state => ({ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
}
-
} else {
this.firstLoad = false;
}
@@ -192,16 +213,16 @@ class App extends React.Component<{}, AppState> {
}
this.timerId = window.setTimeout(this.refresh, this.state.interval * 1000);
-
- }
+ };
public async lastRefresh(): Promise
{
await EXPERIMENT.update();
await TRIALS.update(true);
- this.setState(state => ({ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1, trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1 }));
+ this.setState(state => ({
+ experimentUpdateBroadcast: state.experimentUpdateBroadcast + 1,
+ trialsUpdateBroadcast: state.trialsUpdateBroadcast + 1
+ }));
}
}
export default App;
-
-
diff --git a/src/webui/src/components/NavCon.tsx b/src/webui/src/components/NavCon.tsx
index 5fed93dfe1..b1bc216fae 100644
--- a/src/webui/src/components/NavCon.tsx
+++ b/src/webui/src/components/NavCon.tsx
@@ -2,15 +2,17 @@ import * as React from 'react';
import axios from 'axios';
import { WEBUIDOC, MANAGER_IP } from '../static/const';
import {
- Stack, initializeIcons, StackItem, CommandBarButton,
- IContextualMenuProps, IStackTokens, IStackStyles
-} from 'office-ui-fabric-react';
-import LogPanel from './Modals/LogPanel';
-import ExperimentPanel from './Modals/ExperimentPanel';
-import {
- downLoadIcon, infoIconAbout,
- timeIcon, disableUpdates, requency, closeTimer
-} from './Buttons/Icon';
+ Stack,
+ initializeIcons,
+ StackItem,
+ CommandBarButton,
+ IContextualMenuProps,
+ IStackTokens,
+ IStackStyles
+} from '@fluentui/react';
+import LogPanel from './modals/LogPanel';
+import ExperimentPanel from './modals/ExperimentPanel';
+import { downLoadIcon, infoIconAbout, timeIcon, disableUpdates, requency, closeTimer } from './buttons/Icon';
import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
import { EXPERIMENT } from '../static/datamodel';
import '../static/style/nav/nav.scss';
@@ -22,7 +24,10 @@ const stackTokens: IStackTokens = {
};
const stackStyle: IStackStyles = {
root: {
- minWidth: 400, height: 56, display: 'flex', verticalAlign: 'center'
+ minWidth: 400,
+ height: 56,
+ display: 'flex',
+ verticalAlign: 'center'
}
};
@@ -43,7 +48,6 @@ interface NavProps {
}
class NavCon extends React.Component {
-
constructor(props: NavProps) {
super(props);
this.state = {
@@ -61,49 +65,48 @@ class NavCon extends React.Component {
// to see & download experiment parameters
showExpcontent = (): void => {
this.setState({ isvisibleExperimentDrawer: true });
- }
+ };
// to see & download dispatcher | nnimanager log
showDispatcherLog = (): void => {
this.setState({ isvisibleLogDrawer: true });
- }
+ };
// close log drawer (nnimanager.dispatcher)
closeLogDrawer = (): void => {
this.setState({ isvisibleLogDrawer: false });
- }
+ };
// close download experiment parameters drawer
closeExpDrawer = (): void => {
this.setState({ isvisibleExperimentDrawer: false });
- }
+ };
getNNIversion = (): void => {
axios(`${MANAGER_IP}/version`, {
method: 'GET'
- })
- .then(res => {
- if (res.status === 200) {
- this.setState({ version: res.data });
- }
- });
- }
+ }).then(res => {
+ if (res.status === 200) {
+ this.setState({ version: res.data });
+ }
+ });
+ };
openGithub = (): void => {
const { version } = this.state;
const feed = `https://github.com/Microsoft/nni/issues/new?labels=${version}`;
window.open(feed);
- }
+ };
openDocs = (): void => {
window.open(WEBUIDOC);
- }
+ };
openGithubNNI = (): void => {
const { version } = this.state;
const nniLink = `https://github.com/Microsoft/nni/tree/${version}`;
window.open(nniLink);
- }
+ };
getInterval = (num: number): void => {
this.props.changeInterval(num); // notice parent component
@@ -111,15 +114,14 @@ class NavCon extends React.Component {
refreshFrequency: num === 0 ? '' : num,
refreshText: num === 0 ? 'Disable auto' : 'Auto refresh'
}));
- }
+ };
componentDidMount(): void {
this.getNNIversion();
}
render(): React.ReactNode {
- const { isvisibleLogDrawer, isvisibleExperimentDrawer, version,
- refreshText, refreshFrequency } = this.state;
+ const { isvisibleLogDrawer, isvisibleExperimentDrawer, version, refreshText, refreshFrequency } = this.state;
const aboutProps: IContextualMenuProps = {
items: [
{
@@ -143,14 +145,14 @@ class NavCon extends React.Component {
]
};
return (
-
+
- {NNILOGO}
- {OVERVIEWTABS}
+ {NNILOGO}
+ {OVERVIEWTABS}
{DETAILTABS}
-
-
+
+
{/* refresh button danyi*/}
{/* TODO: fix bug */}
{/* {
text="Refresh"
onClick={this.props.refreshFunction}
/> */}
-
+
-
{refreshFrequency}
+
{refreshFrequency}
-
-
+
+
{/* the drawer for dispatcher & nnimanager log message */}
{isvisibleLogDrawer &&
}
- {isvisibleExperimentDrawer &&
}
+ {isvisibleExperimentDrawer && (
+
+ )}
);
}
@@ -236,8 +232,7 @@ class NavCon extends React.Component
{
text: 'Refresh every 1min',
iconProps: requency,
onClick: this.getInterval.bind(this, 60)
- },
-
+ }
]
};
}
diff --git a/src/webui/src/components/Overview.tsx b/src/webui/src/components/Overview.tsx
index b2e00efae7..a875d2efaa 100644
--- a/src/webui/src/components/Overview.tsx
+++ b/src/webui/src/components/Overview.tsx
@@ -1,19 +1,20 @@
import * as React from 'react';
-import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
+import { Stack, IStackTokens, Dropdown } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
-import Title1 from './overview/Title1';
+import { AppContext } from '../App';
+import { Title1 } from './overview/Title1';
import SuccessTable from './overview/SuccessTable';
import Progressed from './overview/Progress';
import Accuracy from './overview/Accuracy';
import SearchSpace from './overview/SearchSpace';
-import BasicInfo from './overview/BasicInfo';
+import { BasicInfo } from './overview/BasicInfo';
import TrialInfo from './overview/TrialProfile';
import '../static/style/overview.scss';
import '../static/style/logPath.scss';
const stackTokens: IStackTokens = {
- childrenGap: 30,
+ childrenGap: 30
};
const entriesOption = [
@@ -24,21 +25,20 @@ const entriesOption = [
{ key: '100', text: 'Display top 100 trials' }
];
-interface OverviewProps {
- experimentUpdateBroadcast: number;
- trialsUpdateBroadcast: number;
- metricGraphMode: 'max' | 'min';
- bestTrialEntries: string;
- changeMetricGraphMode: (val: 'max' | 'min') => void;
- changeEntries: (entries: string) => void;
-}
-
interface OverviewState {
trialConcurrency: number;
}
-class Overview extends React.Component {
- constructor(props: OverviewProps) {
+export const TitleContext = React.createContext({
+ text: '',
+ icon: '',
+ fontColor: ''
+});
+
+class Overview extends React.Component<{}, OverviewState> {
+ static contextType = AppContext;
+
+ constructor(props) {
super(props);
this.state = {
trialConcurrency: EXPERIMENT.trialConcurrency
@@ -48,125 +48,151 @@ class Overview extends React.Component {
clickMaxTop = (event: React.SyntheticEvent): void => {
event.stopPropagation();
// #999 panel active bgcolor; #b3b3b3 as usual
- const { changeMetricGraphMode } = this.props;
+ const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('max');
- }
-
+ };
clickMinTop = (event: React.SyntheticEvent): void => {
event.stopPropagation();
- const { changeMetricGraphMode } = this.props;
+ const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('min');
- }
+ };
changeConcurrency = (val: number): void => {
this.setState({ trialConcurrency: val });
- }
+ };
// updateEntries = (event: React.FormEvent, item: IDropdownOption | undefined): void => {
updateEntries = (event: React.FormEvent, item: any): void => {
if (item !== undefined) {
- this.props.changeEntries(item.key);
+ this.context.changeEntries(item.key);
}
- }
+ };
render(): React.ReactNode {
const { trialConcurrency } = this.state;
- const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
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' ? '#333' : '#b3b3b3');
- const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
-
return (
-
- {/* status and experiment block */}
-
-
-
-
-
-
- {/* status block */}
-
-
-
-
- {/* experiment parameters search space tuner assessor... */}
-
-
-
-
-
-
- {/* */}
-
-
-
- {/* the scroll bar all the trial profile in the searchSpace div*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {(value): React.ReactNode => {
+ const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
+ const titleMaxbgcolor = metricGraphMode === 'max' ? '#333' : '#b3b3b3';
+ const titleMinbgcolor = metricGraphMode === 'min' ? '#333' : '#b3b3b3';
+ return (
+
+ {/* status and experiment block */}
+
+
+
+
+
+
+
+
+ {/* status block */}
+
+
+
+
+
+
+ {/* experiment parameters search space tuner assessor... */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* the scroll bar all the trial profile in the searchSpace div*/}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ trial.info.id)} />
+
+
+
-
-
-
-
-
-
-
- trial.info.id)} />
-
-
-
-
+ );
+ }}
+
);
}
private findBestTrials(): Trial[] {
const bestTrials = TRIALS.sort();
- const { bestTrialEntries } = this.props;
- if (this.props.metricGraphMode === 'max') {
+ const { bestTrialEntries, metricGraphMode } = this.context;
+ if (metricGraphMode === 'max') {
bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
} else {
bestTrials.splice(JSON.parse(bestTrialEntries));
@@ -198,11 +224,13 @@ class Overview extends React.Component {
scale: true,
data: ySequence
},
- series: [{
- symbolSize: 6,
- type: 'scatter',
- data: ySequence
- }]
+ series: [
+ {
+ symbolSize: 6,
+ type: 'scatter',
+ data: ySequence
+ }
+ ]
};
}
}
diff --git a/src/webui/src/components/TrialsDetail.tsx b/src/webui/src/components/TrialsDetail.tsx
index 7f8317ee58..b22d6d2841 100644
--- a/src/webui/src/components/TrialsDetail.tsx
+++ b/src/webui/src/components/TrialsDetail.tsx
@@ -1,10 +1,9 @@
import * as React from 'react';
-import {
- Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
-} from 'office-ui-fabric-react';
+import { Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial';
-import { tableListIcon } from './Buttons/Icon';
+import { AppContext } from '../App';
+import { tableListIcon } from './buttons/Icon';
import DefaultPoint from './trial-detail/DefaultMetricPoint';
import Duration from './trial-detail/Duration';
import Para from './trial-detail/Para';
@@ -13,6 +12,13 @@ import TableList from './trial-detail/TableList';
import '../static/style/trialsDetail.scss';
import '../static/style/search.scss';
+const searchOptions = [
+ { key: 'id', text: 'Id' },
+ { key: 'Trial No.', text: 'Trial No.' },
+ { key: 'status', text: 'Status' },
+ { key: 'parameters', text: 'Parameters' }
+];
+
interface TrialDetailState {
tablePageSize: number; // table components val
whichChart: string;
@@ -20,22 +26,15 @@ interface TrialDetailState {
searchFilter: (trial: Trial) => boolean;
}
-interface TrialsDetailProps {
- columnList: string[];
- changeColumn: (val: string[]) => void;
- experimentUpdateBroacast: number;
- trialsUpdateBroadcast: number;
-}
-
-class TrialsDetail extends React.Component {
-
+class TrialsDetail extends React.Component<{}, TrialDetailState> {
+ static contextType = AppContext;
public interAccuracy = 0;
public interAllTableList = 2;
public tableList!: TableList | null;
public searchInput!: HTMLInputElement | null;
- constructor(props: TrialsDetailProps) {
+ constructor(props) {
super(props);
this.state = {
tablePageSize: 20,
@@ -73,17 +72,17 @@ class TrialsDetail extends React.Component
alert(`Unexpected search filter ${this.state.searchType}`);
}
this.setState({ searchFilter: filter });
- }
+ };
handleTablePageSizeSelect = (event: React.FormEvent, item: IDropdownOption | undefined): void => {
if (item !== undefined) {
this.setState({ tablePageSize: item.text === 'all' ? -1 : parseInt(item.text, 10) });
}
- }
+ };
handleWhichTabs = (item: any): void => {
- this.setState({whichChart: item.props.headerText});
- }
+ this.setState({ whichChart: item.props.headerText });
+ };
updateSearchFilterType = (event: React.FormEvent, item: IDropdownOption | undefined): void => {
// clear input value and re-render table
@@ -93,104 +92,115 @@ class TrialsDetail extends React.Component
}
this.setState(() => ({ searchType: item.key.toString() }));
}
- }
+ };
render(): React.ReactNode {
const { tablePageSize, whichChart, searchType } = this.state;
- const { columnList, changeColumn } = this.props;
const source = TRIALS.filter(this.state.searchFilter);
const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id);
- const searchOptions = [
- { key: 'id', text: 'Id' },
- { key: 'Trial No.', text: 'Trial No.' },
- { key: 'status', text: 'Status' },
- { key: 'parameters', text: 'Parameters' },
- ];
+
return (
-
-
-
- {/* doesn't work*/}
-
-
-
+
+ {(value): React.ReactNode => (
+
+
+
+ {/* doesn't work*/}
+
+
+
+
+
+ {/* */}
+
+
+
+
+
+ {/* */}
+
+
+
+ {/* */}
+
+ {/* *why this graph has small footprint? */}
+
+
+
+
+ {/* trial table list */}
+
- {/* trial table list */}
-
-
- {tableListIcon}
- Trial jobs
-
-
-
- { if (this.tableList) { this.tableList.compareBtn(); } }}
+ trial.tableRecord)}
+ columnList={value.columnList}
+ changeColumn={value.changeColumn}
+ trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
+ // TODO: change any to specific type
+ ref={(tabList): any => (this.tableList = tabList)}
/>
-
-
-
- { if (this.tableList) { this.tableList.addColumn(); } }}
- />
-
- (this.searchInput) = text}
- />
-
-
-
-
trial.tableRecord)}
- columnList={columnList}
- changeColumn={changeColumn}
- trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
- // TODO: change any to specific type
- ref={(tabList): any => this.tableList = tabList}
- />
-
-
+
+
+ )}
+
);
}
}
diff --git a/src/webui/src/components/Buttons/Icon.tsx b/src/webui/src/components/buttons/Icon.tsx
similarity index 63%
rename from src/webui/src/components/Buttons/Icon.tsx
rename to src/webui/src/components/buttons/Icon.tsx
index 621620c908..4d77758feb 100644
--- a/src/webui/src/components/Buttons/Icon.tsx
+++ b/src/webui/src/components/buttons/Icon.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Icon, initializeIcons } from 'office-ui-fabric-react';
+import { Icon, initializeIcons } from '@fluentui/react';
initializeIcons();
const infoIcon = ;
@@ -11,13 +11,25 @@ const copy = ;
const tableListIcon = ;
const downLoadIcon = { iconName: 'Download' };
const infoIconAbout = { iconName: 'info' };
-const timeIcon = { iconName: 'ReminderTime' };
+const timeIcon = { iconName: 'Refresh' };
const disableUpdates = { iconName: 'DisableUpdates' };
-const requency = { iconName: 'Timer' };
+const requency = { iconName: 'Timer' };
const closeTimer = { iconName: 'Blocked2' };
const LineChart = ;
-export { infoIcon, warining, errorBadge, completed, blocked,
- infoIconAbout, copy, tableListIcon, downLoadIcon, timeIcon,
- disableUpdates, requency, closeTimer, LineChart
+export {
+ infoIcon,
+ warining,
+ errorBadge,
+ completed,
+ blocked,
+ infoIconAbout,
+ copy,
+ tableListIcon,
+ downLoadIcon,
+ timeIcon,
+ disableUpdates,
+ requency,
+ closeTimer,
+ LineChart
};
diff --git a/src/webui/src/components/Buttons/ModalTheme.tsx b/src/webui/src/components/buttons/ModalTheme.tsx
similarity index 94%
rename from src/webui/src/components/Buttons/ModalTheme.tsx
rename to src/webui/src/components/buttons/ModalTheme.tsx
index a52f105c58..eaf513b532 100644
--- a/src/webui/src/components/Buttons/ModalTheme.tsx
+++ b/src/webui/src/components/buttons/ModalTheme.tsx
@@ -1,4 +1,4 @@
-import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react';
+import { getTheme, mergeStyleSets, FontWeights, FontSizes } from '@fluentui/react';
// Themed styles for the example.
const theme = getTheme();
const contentStyles = mergeStyleSets({
@@ -50,4 +50,4 @@ const iconButtonStyles = mergeStyleSets({
}
});
-export { contentStyles, iconButtonStyles };
\ No newline at end of file
+export { contentStyles, iconButtonStyles };
diff --git a/src/webui/src/components/Modals/ChangeColumnComponent.tsx b/src/webui/src/components/modals/ChangeColumnComponent.tsx
similarity index 87%
rename from src/webui/src/components/Modals/ChangeColumnComponent.tsx
rename to src/webui/src/components/modals/ChangeColumnComponent.tsx
index e1a6c84ad7..a4691b8d40 100644
--- a/src/webui/src/components/Modals/ChangeColumnComponent.tsx
+++ b/src/webui/src/components/modals/ChangeColumnComponent.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
+import { Dialog, DialogType, DialogFooter, Checkbox, PrimaryButton, DefaultButton } from '@fluentui/react';
import { OPERATION } from '../../static/const';
interface ChangeColumnState {
@@ -21,17 +21,23 @@ interface CheckBoxItems {
onChange: () => void;
}
class ChangeColumnComponent extends React.Component {
-
constructor(props: ChangeColumnProps) {
super(props);
- this.state = { userSelectColumnList: this.props.selectedColumn, originSelectColumnList: this.props.selectedColumn };
+ this.state = {
+ userSelectColumnList: this.props.selectedColumn,
+ originSelectColumnList: this.props.selectedColumn
+ };
}
makeChangeHandler = (label: string): any => {
return (ev: any, checked: boolean): void => this.onCheckboxChange(ev, label, checked);
- }
+ };
- onCheckboxChange = (ev: React.FormEvent | undefined, label: string, val?: boolean, ): void => {
+ onCheckboxChange = (
+ ev: React.FormEvent | undefined,
+ label: string,
+ val?: boolean
+ ): void => {
const source: string[] = JSON.parse(JSON.stringify(this.state.userSelectColumnList));
if (val === true) {
if (!source.includes(label)) {
@@ -41,7 +47,7 @@ class ChangeColumnComponent extends React.Component item !== label);
+ const result = source.filter(item => item !== label);
this.setState(() => ({ userSelectColumnList: result }));
}
}
@@ -88,11 +94,11 @@ class ChangeColumnComponent extends React.Component {
this.props.hideShowColumnDialog();
- }
+ };
// user exit dialog
cancelOption = (): void => {
@@ -101,7 +107,7 @@ class ChangeColumnComponent extends React.Component {
this.hideDialog();
});
- }
+ };
render(): React.ReactNode {
const { showColumn, isHideDialog } = this.props;
@@ -129,14 +135,14 @@ class ChangeColumnComponent extends React.Component
-
+
{renderOptions.map(item => {
- return
+ return ;
})}
-
-
+
+
diff --git a/src/webui/src/components/Modals/Compare.tsx b/src/webui/src/components/modals/Compare.tsx
similarity index 65%
rename from src/webui/src/components/Modals/Compare.tsx
rename to src/webui/src/components/modals/Compare.tsx
index bc7c732ff4..daed24526c 100644
--- a/src/webui/src/components/Modals/Compare.tsx
+++ b/src/webui/src/components/modals/Compare.tsx
@@ -1,10 +1,10 @@
import * as React from 'react';
-import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from 'office-ui-fabric-react';
+import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from '@fluentui/react';
import ReactEcharts from 'echarts-for-react';
import IntermediateVal from '../public-child/IntermediateVal';
import { TRIALS } from '../../static/datamodel';
import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
-import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
+import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
import '../../static/style/compare.scss';
const dragOptions: IDragOptions = {
@@ -20,7 +20,6 @@ interface CompareProps {
}
class Compare extends React.Component {
-
public _isCompareMount!: boolean;
constructor(props: CompareProps) {
super(props);
@@ -41,7 +40,9 @@ class Compare extends React.Component {
idsList.push(element.id);
});
// find max intermediate number
- trialIntermediate.sort((a, b) => { return (b.data.length - a.data.length); });
+ trialIntermediate.sort((a, b) => {
+ return b.data.length - a.data.length;
+ });
const legend: string[] = [];
// max length
const length = trialIntermediate[0] !== undefined ? trialIntermediate[0].data.length : 0;
@@ -56,27 +57,35 @@ class Compare extends React.Component {
tooltip: {
trigger: 'item',
enterable: true,
- position: function (point: number[], data: TooltipForIntermediate): number[] {
+ position: function(point: number[], data: TooltipForIntermediate): number[] {
if (data.dataIndex < length / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
- formatter: function (data: TooltipForIntermediate): React.ReactNode {
+ formatter: function(data: TooltipForIntermediate): React.ReactNode {
const trialId = data.seriesName;
let obj = {};
const temp = trialIntermediate.find(key => key.name === trialId);
if (temp !== undefined) {
obj = temp.hyperPara;
}
- return ''
+ );
}
},
grid: {
@@ -110,8 +119,7 @@ class Compare extends React.Component {
notMerge={true} // update now
/>
);
-
- }
+ };
// render table column ---
initColumn = (): React.ReactNode => {
@@ -134,8 +142,7 @@ class Compare extends React.Component {
});
let isComplexSearchSpace;
if (parameterList.length > 0) {
- isComplexSearchSpace = (typeof parameterList[0][parameterKeys[0]] === 'object')
- ? true : false;
+ isComplexSearchSpace = typeof parameterList[0][parameterKeys[0]] === 'object' ? true : false;
}
const width = this.getWebUIWidth();
let scrollClass;
@@ -150,70 +157,59 @@ class Compare extends React.Component {
- Id
- {Object.keys(idList).map(key => {
- return (
- {idList[key]}
- );
- })}
+ Id
+ {Object.keys(idList).map(key => (
+
+ {idList[key]}
+
+ ))}
- Trial No.
- {Object.keys(sequenceIdList).map(key => {
- return (
- {sequenceIdList[key]}
- );
- })}
+ Trial No.
+ {Object.keys(sequenceIdList).map(key => (
+
+ {sequenceIdList[key]}
+
+ ))}
- Default metric
- {Object.keys(compareStacks).map(index => {
- const temp = compareStacks[index];
- return (
-
-
-
- );
- })}
+ Default metric
+ {Object.keys(compareStacks).map(index => (
+
+
+
+ ))}
- duration
- {Object.keys(durationList).map(index => {
- return (
- {durationList[index]}
- );
- })}
+ duration
+ {Object.keys(durationList).map(index => (
+
+ {durationList[index]}
+
+ ))}
- {
- isComplexSearchSpace
- ?
- null
- :
- Object.keys(parameterKeys).map(index => {
- return (
-
- {parameterKeys[index]}
- {
- Object.keys(parameterList).map(key => {
- return (
-
- {parameterList[key][parameterKeys[index]]}
-
- );
- })
- }
-
- );
- })
- }
+ {isComplexSearchSpace
+ ? null
+ : Object.keys(parameterKeys).map(index => (
+
+
+ {parameterKeys[index]}
+
+ {Object.keys(parameterList).map(key => (
+
+ {parameterList[key][parameterKeys[index]]}
+
+ ))}
+
+ ))}
);
- }
+ };
getWebUIWidth = (): number => {
return window.innerWidth;
- }
+ };
componentDidMount(): void {
this._isCompareMount = true;
@@ -230,7 +226,7 @@ class Compare extends React.Component {
@@ -240,13 +236,13 @@ class Compare extends React.Component {
-
+
{this.intermediate()}
- # Intermediate result
+ # Intermediate result
{this.initColumn()}
diff --git a/src/webui/src/components/Modals/CustomizedTrial.tsx b/src/webui/src/components/modals/CustomizedTrial.tsx
similarity index 78%
rename from src/webui/src/components/Modals/CustomizedTrial.tsx
rename to src/webui/src/components/modals/CustomizedTrial.tsx
index 102f486b5c..86d4ed3c50 100644
--- a/src/webui/src/components/Modals/CustomizedTrial.tsx
+++ b/src/webui/src/components/modals/CustomizedTrial.tsx
@@ -1,10 +1,10 @@
import * as React from 'react';
import axios from 'axios';
-import { Stack, StackItem, PrimaryButton, DefaultButton } from 'office-ui-fabric-react';
-import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
+import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
import { MANAGER_IP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { warining, errorBadge, completed } from '../Buttons/Icon';
+import { warining, errorBadge, completed } from '../buttons/Icon';
import './customized.scss';
interface CustomizeProps {
@@ -25,7 +25,6 @@ interface CustomizeState {
}
class Customize extends React.Component {
-
constructor(props: CustomizeProps) {
super(props);
this.state = {
@@ -36,17 +35,15 @@ class Customize extends React.Component {
copyTrialParameter: {},
customParameters: {},
customID: NaN,
- changeMap: new Map
+ changeMap: new Map()
};
}
getFinalVal = (event: React.ChangeEvent): void => {
-
const { name, value } = event.target;
const { changeMap } = this.state;
this.setState({ changeMap: changeMap.set(name, value) });
-
- }
+ };
// [submit click] user add a new trial [submit a trial]
addNewTrial = (): void => {
@@ -54,7 +51,7 @@ class Customize extends React.Component {
// get user edited hyperParameter, ps: will change data type if you modify the input val
const customized = JSON.parse(JSON.stringify(copyTrialParameter));
// changeMap: user changed keys: values
- changeMap.forEach(function (value, key) {
+ changeMap.forEach(function(value, key) {
customized[key] = value;
});
@@ -72,14 +69,17 @@ class Customize extends React.Component {
return;
}
if (searchSpace[item]._type === 'choice') {
- if (searchSpace[item]._value.find((val: string | number) =>
- val === customized[item]) === undefined) {
+ if (
+ searchSpace[item]._value.find((val: string | number) => val === customized[item]) === undefined
+ ) {
parametersIllegal = true;
return;
}
} else {
- if (customized[item] < searchSpace[item]._value[0]
- || customized[item] > searchSpace[item]._value[1]) {
+ if (
+ customized[item] < searchSpace[item]._value[0] ||
+ customized[item] > searchSpace[item]._value[1]
+ ) {
parametersIllegal = true;
return;
}
@@ -93,18 +93,17 @@ class Customize extends React.Component {
// submit a customized job
this.submitCustomize(customized);
}
-
- }
+ };
warningConfirm = (): void => {
this.setState(() => ({ isShowWarning: false }));
const { customParameters } = this.state;
this.submitCustomize(customParameters);
- }
+ };
warningCancel = (): void => {
this.setState(() => ({ isShowWarning: false }));
- }
+ };
submitCustomize = (customized: Record): void => {
// delete `tag` key
@@ -129,19 +128,19 @@ class Customize extends React.Component {
.catch(() => {
this.setState(() => ({ isShowSubmitFailed: true }));
});
- }
+ };
closeSucceedHint = (): void => {
// also close customized trial modal
this.setState(() => ({ isShowSubmitSucceed: false, changeMap: new Map() }));
this.props.closeCustomizeModal();
- }
+ };
closeFailedHint = (): void => {
// also close customized trial modal
this.setState(() => ({ isShowSubmitFailed: false, changeMap: new Map() }));
this.props.closeCustomizeModal();
- }
+ };
componentDidMount(): void {
const { copyTrialId } = this.props;
@@ -164,8 +163,9 @@ class Customize extends React.Component {
render(): React.ReactNode {
const { closeCustomizeModal, visible } = this.props;
const { isShowSubmitSucceed, isShowSubmitFailed, isShowWarning, customID, copyTrialParameter } = this.state;
- const warning = 'The parameters you set are not in our search space, this may cause the tuner to crash, Are'
- + ' you sure you want to continue submitting?';
+ const warning =
+ 'The parameters you set are not in our search space, this may cause the tuner to crash, Are' +
+ ' you sure you want to continue submitting?';
return (
{
styles: { main: { maxWidth: 450 } }
}}
>
-
-
-
+
+
@@ -217,17 +216,22 @@ class Customize extends React.Component {
onDismiss={this.closeSucceedHint}
dialogContentProps={{
type: DialogType.normal,
- title: {completed}Submit successfully
,
+ title: (
+
+ {completed}
+ Submit successfully
+
+ ),
closeButtonAriaLabel: 'Close',
subText: `You can find your customized trial by Trial No.${customID}`
}}
modalProps={{
isBlocking: false,
- styles: { main: { minWidth: 500 } },
+ styles: { main: { minWidth: 500 } }
}}
>
-
+
@@ -236,17 +240,17 @@ class Customize extends React.Component {
onDismiss={this.closeSucceedHint}
dialogContentProps={{
type: DialogType.normal,
- title: {errorBadge}Submit Failed
,
+ title: {errorBadge}Submit Failed
,
closeButtonAriaLabel: 'Close',
subText: 'Unknown error.'
}}
modalProps={{
isBlocking: false,
- styles: { main: { minWidth: 500 } },
+ styles: { main: { minWidth: 500 } }
}}
>
-
+
@@ -256,22 +260,21 @@ class Customize extends React.Component {
onDismiss={this.closeSucceedHint}
dialogContentProps={{
type: DialogType.normal,
- title: {warining}Warning
,
+ title: {warining}Warning
,
closeButtonAriaLabel: 'Close',
subText: `${warning}`
}}
modalProps={{
isBlocking: false,
- styles: { main: { minWidth: 500 } },
+ styles: { main: { minWidth: 500 } }
}}
>
-
-
+
+
-
);
}
}
diff --git a/src/webui/src/components/Modals/ExperimentPanel.tsx b/src/webui/src/components/modals/ExperimentPanel.tsx
similarity index 77%
rename from src/webui/src/components/Modals/ExperimentPanel.tsx
rename to src/webui/src/components/modals/ExperimentPanel.tsx
index cbc674ec9a..11b45abf11 100644
--- a/src/webui/src/components/Modals/ExperimentPanel.tsx
+++ b/src/webui/src/components/modals/ExperimentPanel.tsx
@@ -1,8 +1,6 @@
import * as React from 'react';
import { downFile } from '../../static/function';
-import {
- Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
-} from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem } from '@fluentui/react';
import { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor';
@@ -19,7 +17,6 @@ interface ExpDrawerState {
}
class ExperimentDrawer extends React.Component {
-
public _isExperimentMount!: boolean;
private refreshId!: number | undefined;
@@ -60,21 +57,20 @@ class ExperimentDrawer extends React.Component {
}
if (['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status)) {
- if(this.refreshId !== null || this.refreshId !== undefined){
+ if (this.refreshId !== null || this.refreshId !== undefined) {
window.clearInterval(this.refreshId);
}
- }
-
- }
-
+ }
+ };
+
downExperimentParameters = (): void => {
const { experiment } = this.state;
downFile(experiment, 'experiment.json');
- }
+ };
onWindowResize = (): void => {
this.setState(() => ({ expDrawerHeight: window.innerHeight }));
- }
+ };
componentDidMount(): void {
this._isExperimentMount = true;
@@ -93,7 +89,7 @@ class ExperimentDrawer extends React.Component {
const { closeExpDrawer } = this.props;
const { experiment, expDrawerHeight } = this.state;
return (
-
+
{
onLightDismissClick={closeExpDrawer}
styles={{ root: { height: expDrawerHeight, paddingTop: 15 } }}
>
-
-
-
+
+
+
-
-
-
+
+
+
-
-
+
+
diff --git a/src/webui/src/components/Modals/Killjob.tsx b/src/webui/src/components/modals/Killjob.tsx
similarity index 89%
rename from src/webui/src/components/Modals/Killjob.tsx
rename to src/webui/src/components/modals/Killjob.tsx
index 2f4c7a1833..e35be32cfa 100644
--- a/src/webui/src/components/Modals/Killjob.tsx
+++ b/src/webui/src/components/modals/Killjob.tsx
@@ -1,11 +1,16 @@
import * as React from 'react';
import {
- Stack, FocusTrapCallout, DefaultButton,
+ Stack,
+ FocusTrapCallout,
+ DefaultButton,
FocusZone,
- PrimaryButton, getTheme, mergeStyleSets, FontWeights
-} from 'office-ui-fabric-react';
+ PrimaryButton,
+ getTheme,
+ mergeStyleSets,
+ FontWeights
+} from '@fluentui/react';
import { killJob } from '../../static/function';
-import { blocked } from '../Buttons/Icon';
+import { blocked } from '../buttons/Icon';
const theme = getTheme();
const styles = mergeStyleSets({
@@ -63,7 +68,6 @@ interface KillJobProps {
}
class KillJob extends React.Component {
-
private menuButtonElement!: HTMLElement | null;
constructor(props: KillJobProps) {
super(props);
@@ -72,20 +76,20 @@ class KillJob extends React.Component {
onDismiss = (): void => {
this.setState(() => ({ isCalloutVisible: false }));
- }
+ };
onKill = (): void => {
this.setState({ isCalloutVisible: false }, () => {
const { trial } = this.props;
killJob(trial.key, trial.id, trial.status);
});
- }
+ };
openPromot = (event: React.SyntheticEvent): void => {
event.preventDefault();
event.stopPropagation();
this.setState({ isCalloutVisible: true });
- }
+ };
render(): React.ReactNode {
const { isCalloutVisible } = this.state;
@@ -93,12 +97,14 @@ class KillJob extends React.Component {
return (
(this.menuButtonElement = menuButton)}>
-
{blocked}
+
+ {blocked}
+
{isCalloutVisible ? (
{
if (this.state.nniManagerLogStr !== null) {
downFile(this.state.nniManagerLogStr, 'nnimanager.log');
}
- }
+ };
downloadDispatcher = (): void => {
if (this.state.dispatcherLogStr !== null) {
downFile(this.state.dispatcherLogStr, 'dispatcher.log');
}
- }
-
- dispatcherHTML = (): React.ReactNode => {
- return (
-
- Dispatcher log
-
- {infoIcon}
-
-
- );
- }
-
- nnimanagerHTML = (): React.ReactNode => {
- return (
-
- NNImanager log
- {infoIcon}
-
- );
- }
+ };
+
+ dispatcherHTML = (): React.ReactNode => (
+
+ Dispatcher log
+
+ {infoIcon}
+
+
+ );
+
+ nnimanagerHTML = (): React.ReactNode => (
+
+ NNImanager log
+
+ {infoIcon}
+
+
+ );
setLogDrawerHeight = (): void => {
this.setState(() => ({ logDrawerHeight: window.innerHeight - 48 }));
- }
+ };
async componentDidMount(): Promise {
this.refresh();
window.addEventListener('resize', this.setLogDrawerHeight);
}
- componentWillUnmount(): void{
+ componentWillUnmount(): void {
window.clearTimeout(this.timerId);
window.removeEventListener('resize', this.setLogDrawerHeight);
}
@@ -95,41 +90,38 @@ class LogDrawer extends React.Component {
isLightDismiss={true}
onLightDismissClick={closeDrawer}
>
-
-
+
+
{/* */}
-
+
-
-
-
+
+
+
-
-
+
+
-
+
{/* */}
-
-
-
+
+
+
-
-
+
+
@@ -158,12 +150,12 @@ class LogDrawer extends React.Component {
this.setState({ isLoading: false });
this.timerId = window.setTimeout(this.refresh, 10000);
});
- }
+ };
private manualRefresh = (): void => {
this.setState({ isLoading: true });
this.refresh();
- }
+ };
}
export default LogDrawer;
diff --git a/src/webui/src/components/Modals/MessageInfo.tsx b/src/webui/src/components/modals/MessageInfo.tsx
similarity index 62%
rename from src/webui/src/components/Modals/MessageInfo.tsx
rename to src/webui/src/components/modals/MessageInfo.tsx
index 995c535013..c9f34c7149 100644
--- a/src/webui/src/components/Modals/MessageInfo.tsx
+++ b/src/webui/src/components/modals/MessageInfo.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { MessageBar, MessageBarType } from 'office-ui-fabric-react';
+import { MessageBar, MessageBarType } from '@fluentui/react';
interface MessageInfoProps {
info: string;
@@ -8,7 +8,6 @@ interface MessageInfoProps {
}
class MessageInfo extends React.Component {
-
constructor(props: MessageInfoProps) {
super(props);
}
@@ -16,15 +15,11 @@ class MessageInfo extends React.Component {
render(): React.ReactNode {
const { info, typeInfo, className } = this.props;
return (
-
+
{info}
);
}
}
-export default MessageInfo;
\ No newline at end of file
+export default MessageInfo;
diff --git a/src/webui/src/components/Modals/customized.scss b/src/webui/src/components/modals/customized.scss
similarity index 66%
rename from src/webui/src/components/Modals/customized.scss
rename to src/webui/src/components/modals/customized.scss
index ef2cce35b8..a6bfe1fc3d 100644
--- a/src/webui/src/components/Modals/customized.scss
+++ b/src/webui/src/components/modals/customized.scss
@@ -1,86 +1,106 @@
/* resubmit confirm modal style */
-.resubmit{
- .title{
+.resubmit {
+ .title {
font-size: 16px;
color: #000;
- .color-warn, .color-error{
+
+ .color-warn,
+ .color-error {
color: red;
}
- i{
+
+ i {
margin-right: 10px;
}
}
- .hint{
+
+ .hint {
padding: 15px 0;
color: #333;
margin-left: 30px;
}
- .color-succ{
+
+ .color-succ {
color: green;
}
}
-.hyper-box{
+
+.hyper-box {
padding: 16px 18px 16px 16px;
}
-.hyper-form{
+
+.hyper-form {
margin-bottom: 10px;
- .title{
+
+ .title {
font-size: 14px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 40px;
}
- .inputs{
+
+ .inputs {
height: 32px;
}
- input{
+
+ input {
padding-left: 5px;
height: 32px;
}
}
-.tag-input{
+
+.tag-input {
margin-top: 25px;
}
-/* submit & cancel buttons style*/
-.modal-button{
+/* submit & cancel buttons style */
+.modal-button {
text-align: right;
height: 28px;
- /* cancel button style*/
- .cancelSty{
+
+ /* cancel button style */
+ .cancelSty {
width: 80px;
background-color: #dadada;
border: none;
color: #333;
}
- .cancelSty:hover, .cancelSty:active, .cancelSty:focus{
+
+ .cancelSty:hover,
+ .cancelSty:active,
+ .cancelSty:focus {
background-color: #dadada;
}
- .distance{
+
+ .distance {
margin-right: 8px;
}
}
-.center{
+.center {
text-align: center;
}
-.icon-color{
- i{
+.icon-color {
+ i {
color: green;
}
}
-.icon-error{
- i{
+
+.icon-error {
+ i {
color: red;
}
}
-.icon-color, .icon-error{
- i{
+
+.icon-color,
+.icon-error {
+ i {
margin-right: 10px;
position: relative;
top: 5px;
}
}
-.ms-Dialog-subText{
+
+.ms-Dialog-subText {
color: #333;
-}
\ No newline at end of file
+}
diff --git a/src/webui/src/components/overview/Accuracy.tsx b/src/webui/src/components/overview/Accuracy.tsx
index 0a4f305887..2f2fd9253b 100644
--- a/src/webui/src/components/overview/Accuracy.tsx
+++ b/src/webui/src/components/overview/Accuracy.tsx
@@ -15,10 +15,8 @@ interface AccuracyProps {
}
class Accuracy extends React.Component {
-
constructor(props: AccuracyProps) {
super(props);
-
}
render(): React.ReactNode {
@@ -29,14 +27,14 @@ class Accuracy extends React.Component {
option={accuracyData}
style={{
height: height,
- margin: '0 auto',
+ margin: '0 auto'
}}
- theme="my_theme"
+ theme='my_theme'
/>
- {accNodata}
+ {accNodata}
);
}
}
-export default Accuracy;
\ No newline at end of file
+export default Accuracy;
diff --git a/src/webui/src/components/overview/BasicInfo.tsx b/src/webui/src/components/overview/BasicInfo.tsx
index 63977386a9..6ef6505191 100644
--- a/src/webui/src/components/overview/BasicInfo.tsx
+++ b/src/webui/src/components/overview/BasicInfo.tsx
@@ -1,63 +1,43 @@
-import * as React from 'react';
-import { Stack, TooltipHost, getId } from 'office-ui-fabric-react';
+import React from 'react';
+import { Stack, TooltipHost } from '@fluentui/react';
import { EXPERIMENT } from '../../static/datamodel';
import { formatTimestamp } from '../../static/function';
-interface BasicInfoProps {
- experimentUpdateBroadcast: number;
-}
-
-class BasicInfo extends React.Component {
- // Use getId() to ensure that the ID is unique on the page.
- // (It's also okay to use a plain string without getId() and manually ensure uniqueness.)
- // for tooltip user the log directory
- private _hostId: string = getId('tooltipHost');
- constructor(props: BasicInfoProps) {
- super(props);
- }
-
- render(): React.ReactNode {
- return (
-
-
- Name
- {EXPERIMENT.profile.params.experimentName}
-
-
- ID
- {EXPERIMENT.profile.id}
-
-
- Start time
- {formatTimestamp(EXPERIMENT.profile.startTime)}
-
-
- End time
- {formatTimestamp(EXPERIMENT.profile.endTime)}
-
-
- Log directory
-
-
- {/* show logDir */}
- {EXPERIMENT.profile.logDir || 'unknown'}
-
-
-
-
- Training platform
- {EXPERIMENT.profile.params.trainingServicePlatform}
-
-
-
- );
- }
-}
-
-export default BasicInfo;
+export const BasicInfo = (): any => (
+
+
+ Name
+ {EXPERIMENT.profile.params.experimentName}
+
+
+ ID
+ {EXPERIMENT.profile.id}
+
+
+ Start time
+ {formatTimestamp(EXPERIMENT.profile.startTime)}
+
+
+ End time
+ {formatTimestamp(EXPERIMENT.profile.endTime)}
+
+
+ Log directory
+
+
+ {/* show logDir */}
+ {EXPERIMENT.profile.logDir || 'unknown'}
+
+
+
+
+ Training platform
+ {EXPERIMENT.profile.params.trainingServicePlatform}
+
+
+);
diff --git a/src/webui/src/components/overview/Details.tsx b/src/webui/src/components/overview/Details.tsx
index 9af40159ce..65407b7965 100644
--- a/src/webui/src/components/overview/Details.tsx
+++ b/src/webui/src/components/overview/Details.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { DetailsRow, IDetailsRowBaseProps } from 'office-ui-fabric-react';
+import { DetailsRow, IDetailsRowBaseProps } from '@fluentui/react';
import OpenRow from '../public-child/OpenRow';
interface DetailsProps {
@@ -11,7 +11,6 @@ interface DetailsState {
}
class Details extends React.Component {
-
constructor(props: DetailsProps) {
super(props);
this.state = { isExpand: false };
@@ -22,9 +21,11 @@ class Details extends React.Component {
const { isExpand } = this.state;
return (
-
{
- this.setState(() => ({ isExpand: !isExpand }));
- }}>
+
{
+ this.setState(() => ({ isExpand: !isExpand }));
+ }}
+ >
{isExpand &&
}
@@ -33,4 +34,4 @@ class Details extends React.Component
{
}
}
-export default Details;
\ No newline at end of file
+export default Details;
diff --git a/src/webui/src/components/overview/NumInput.tsx b/src/webui/src/components/overview/NumInput.tsx
index 1420c952da..6264923aa6 100644
--- a/src/webui/src/components/overview/NumInput.tsx
+++ b/src/webui/src/components/overview/NumInput.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Stack, PrimaryButton } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton } from '@fluentui/react';
interface ConcurrencyInputProps {
value: number;
@@ -23,32 +23,29 @@ class ConcurrencyInput extends React.Component {
this.setState({ editting: false });
- }
+ };
edit = (): void => {
this.setState({ editting: true });
- }
+ };
render(): React.ReactNode {
if (this.state.editting) {
return (
-
+
+
-
@@ -56,17 +53,9 @@ class ConcurrencyInput extends React.Component
-
-
+
+
+
);
}
diff --git a/src/webui/src/components/overview/Progress.tsx b/src/webui/src/components/overview/Progress.tsx
index c21e9e8921..4bc5139f0c 100644
--- a/src/webui/src/components/overview/Progress.tsx
+++ b/src/webui/src/components/overview/Progress.tsx
@@ -1,17 +1,25 @@
import * as React from 'react';
import {
- Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
- getId, getTheme, StackItem, TooltipHost
-} from 'office-ui-fabric-react';
+ Stack,
+ Callout,
+ Link,
+ IconButton,
+ FontWeights,
+ mergeStyleSets,
+ getId,
+ getTheme,
+ StackItem,
+ TooltipHost
+} from '@fluentui/react';
import axios from 'axios';
import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { convertTime } from '../../static/function';
import ConcurrencyInput from './NumInput';
import ProgressBar from './ProgressItem';
-import LogDrawer from '../Modals/LogPanel';
-import MessageInfo from '../Modals/MessageInfo';
-import { infoIcon } from "../Buttons/Icon";
+import LogDrawer from '../modals/LogPanel';
+import MessageInfo from '../modals/MessageInfo';
+import { infoIcon } from '../buttons/Icon';
import '../../static/style/progress.scss';
import '../../static/style/probar.scss';
interface ProgressProps {
@@ -100,20 +108,21 @@ class Progressed extends React.Component {
hideSucceedInfo = (): void => {
this.setState(() => ({ isShowSucceedInfo: false }));
- }
+ };
/**
* info: message content
* typeInfo: message type: success | error...
- * continuousTime: show time, 2000ms
+ * continuousTime: show time, 2000ms
*/
showMessageInfo = (info: string, typeInfo: string): void => {
this.setState(() => ({
- info, typeInfo,
+ info,
+ typeInfo,
isShowSucceedInfo: true
}));
setTimeout(this.hideSucceedInfo, 2000);
- }
+ };
editTrialConcurrency = async (userInput: string): Promise => {
if (!userInput.match(/^[1-9]\d*$/)) {
@@ -144,30 +153,33 @@ class Progressed extends React.Component {
if (error.response && error.response.data.error) {
this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
} else if (error.response) {
- this.showMessageInfo(`Failed to update trial concurrency\nServer responsed ${error.response.status}`, 'error');
+ this.showMessageInfo(
+ `Failed to update trial concurrency\nServer responsed ${error.response.status}`,
+ 'error'
+ );
} else if (error.message) {
this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
} else {
this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
}
}
- }
+ };
isShowDrawer = (): void => {
this.setState({ isShowLogDrawer: true });
- }
+ };
closeDrawer = (): void => {
this.setState({ isShowLogDrawer: false });
- }
+ };
onDismiss = (): void => {
this.setState({ isCalloutVisible: false });
- }
+ };
onShow = (): void => {
this.setState({ isCalloutVisible: true });
- }
+ };
render(): React.ReactNode {
const { bestAccuracy } = this.props;
@@ -187,123 +199,117 @@ class Progressed extends React.Component {
const execDuration = convertTime(EXPERIMENT.profile.execDuration);
return (
-
-
+
+
Status
-
+
{EXPERIMENT.status}
- {
- EXPERIMENT.status === 'ERROR'
- ?
-
-
this.menuButtonElement = val}>
-
-
- {isCalloutVisible && (
-
-
-
-
- {EXPERIMENT.error}
-
-
-
- Learn about
-
-
-
-
- )}
+ {EXPERIMENT.status === 'ERROR' ? (
+
+
(this.menuButtonElement = val)}>
+
- :
- null
- }
+ {isCalloutVisible && (
+
+
+
+
+ {EXPERIMENT.error}
+
+
+
+ Learn about
+
+
+
+
+ )}
+
+ ) : null}
-
+
Best metric
{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}
- {isShowSucceedInfo && }
+ {isShowSucceedInfo && }
-
-
+
+
Spent
{execDuration}
-
+
Remaining
- {remaining}
+ {remaining}
{/* modify concurrency */}
- Concurrency{infoIcon}
+
+ Concurrency{infoIcon}
+
-
+
-
-
+
+
Running
{count.get('RUNNING')}
-
+
Succeeded
{count.get('SUCCEEDED')}
-
+
-
+
Failed
{count.get('FAILED')}
{/* learn about click -> default active key is dispatcher. */}
- {isShowLogDrawer ? (
-
- ) : null}
+ {isShowLogDrawer ?
: null}
);
}
-
}
export default Progressed;
diff --git a/src/webui/src/components/overview/ProgressItem.tsx b/src/webui/src/components/overview/ProgressItem.tsx
index 3c531f7e95..849171bb57 100644
--- a/src/webui/src/components/overview/ProgressItem.tsx
+++ b/src/webui/src/components/overview/ProgressItem.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react';
+import { Stack, StackItem, ProgressIndicator } from '@fluentui/react';
interface ProItemProps {
who: string;
@@ -10,10 +10,8 @@ interface ProItemProps {
}
class ProgressBar extends React.Component
{
-
constructor(props: ProItemProps) {
super(props);
-
}
render(): React.ReactNode {
@@ -21,18 +19,19 @@ class ProgressBar extends React.Component {
return (
- {who}
-
-
-
+ {who}
+
+
+
0
- {maxString}
+
+ {maxString}
+
- {description}
+
+ {description}
+
@@ -40,4 +39,4 @@ class ProgressBar extends React.Component {
}
}
-export default ProgressBar;
\ No newline at end of file
+export default ProgressBar;
diff --git a/src/webui/src/components/overview/SearchSpace.tsx b/src/webui/src/components/overview/SearchSpace.tsx
index c5379c0ba9..9532f8b812 100644
--- a/src/webui/src/components/overview/SearchSpace.tsx
+++ b/src/webui/src/components/overview/SearchSpace.tsx
@@ -7,20 +7,18 @@ interface SearchspaceProps {
}
class SearchSpace extends React.Component {
-
constructor(props: SearchspaceProps) {
super(props);
-
}
render(): React.ReactNode {
const { searchSpace } = this.props;
return (
-
+
@@ -29,4 +27,4 @@ class SearchSpace extends React.Component
{
}
}
-export default SearchSpace;
\ No newline at end of file
+export default SearchSpace;
diff --git a/src/webui/src/components/overview/SuccessTable.tsx b/src/webui/src/components/overview/SuccessTable.tsx
index 67d1aebfbc..67c3ae8908 100644
--- a/src/webui/src/components/overview/SuccessTable.tsx
+++ b/src/webui/src/components/overview/SuccessTable.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { DetailsList, IDetailsListProps, IColumn } from 'office-ui-fabric-react';
+import { DetailsList, IDetailsListProps, IColumn } from '@fluentui/react';
import DefaultMetric from '../public-child/DefaultMetric';
import Details from './Details';
import { convertDuration } from '../../static/function';
@@ -59,7 +59,9 @@ class SuccessTable extends React.Component
tooltipStr = (
The experiment is running, please wait for the final metric patiently.
-
You could also find status of trial job with {DETAILTABS} button.
+
+ You could also find status of trial job with {DETAILTABS} button.
+
);
@@ -73,7 +75,8 @@ class SuccessTable extends React.Component
isResizable: true,
data: 'number',
onColumnClick: this.onColumnClick
- }, {
+ },
+ {
name: 'ID',
key: 'id',
fieldName: 'id',
@@ -83,7 +86,8 @@ class SuccessTable extends React.Component
className: 'tableHead leftTitle',
data: 'string',
onColumnClick: this.onColumnClick
- }, {
+ },
+ {
name: 'Duration',
key: 'duration',
minWidth: 100,
@@ -92,12 +96,13 @@ class SuccessTable extends React.Component
fieldName: 'duration',
data: 'number',
onColumnClick: this.onColumnClick,
- onRender: (item: any): React.ReactNode => {
- return (
- {convertDuration(item.duration)}
- );
- },
- }, {
+ onRender: (item: any): React.ReactNode => (
+
+
{convertDuration(item.duration)}
+
+ )
+ },
+ {
name: 'Status',
key: 'status',
minWidth: 140,
@@ -105,11 +110,10 @@ class SuccessTable extends React.Component
isResizable: true,
fieldName: 'status',
onRender: (item: any): React.ReactNode => {
- return (
- {item.status}
- );
+ return {item.status}
;
}
- }, {
+ },
+ {
name: 'Default metric',
key: 'accuracy',
fieldName: 'accuracy',
@@ -119,15 +123,13 @@ class SuccessTable extends React.Component
data: 'number',
onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => {
- return (
-
- );
+ return ;
}
}
];
componentDidUpdate(prevProps: SuccessTableProps): void {
- if(this.props.trialIds !== prevProps.trialIds){
+ if (this.props.trialIds !== prevProps.trialIds) {
const { trialIds } = this.props;
this.setState(() => ({ source: TRIALS.table(trialIds) }));
}
@@ -135,20 +137,20 @@ class SuccessTable extends React.Component
render(): React.ReactNode {
const { columns, source } = this.state;
- const isNoneData = (source.length === 0) ? true : false;
-
+ const isNoneData = source.length === 0 ? true : false;
+
return (
-
+
- {isNoneData &&
{this.tooltipStr}
}
+ {isNoneData &&
{this.tooltipStr}
}
);
}
diff --git a/src/webui/src/components/overview/Title1.tsx b/src/webui/src/components/overview/Title1.tsx
index 7cf309b2fe..dd89dd8fa0 100644
--- a/src/webui/src/components/overview/Title1.tsx
+++ b/src/webui/src/components/overview/Title1.tsx
@@ -1,27 +1,15 @@
import * as React from 'react';
-import {Stack} from 'office-ui-fabric-react';
+import { Stack } from '@fluentui/react';
+import { TitleContext } from '../Overview';
import '../../static/style/overviewTitle.scss';
-interface Title1Props {
- text: string;
- icon?: string;
- fontColor?: string;
-}
-class Title1 extends React.Component
{
-
- constructor(props: Title1Props) {
- super(props);
- }
-
- render(): React.ReactNode {
- const { text, icon, fontColor } = this.props;
- return (
-
-
- {text}
+export const Title1 = (): any => (
+
+ {(value): React.ReactNode => (
+
+
+ {value.text}
- );
- }
-}
-
-export default Title1;
\ No newline at end of file
+ )}
+
+);
diff --git a/src/webui/src/components/overview/TrialProfile.tsx b/src/webui/src/components/overview/TrialProfile.tsx
index 77ae929698..6c49ad4907 100644
--- a/src/webui/src/components/overview/TrialProfile.tsx
+++ b/src/webui/src/components/overview/TrialProfile.tsx
@@ -9,15 +9,19 @@ interface TrialInfoProps {
}
class TrialInfo extends React.Component {
-
constructor(props: TrialInfoProps) {
super(props);
}
render(): React.ReactNode {
const blacklist = [
- 'id', 'logDir', 'startTime', 'endTime',
- 'experimentName', 'searchSpace', 'trainingServicePlatform'
+ 'id',
+ 'logDir',
+ 'startTime',
+ 'endTime',
+ 'experimentName',
+ 'searchSpace',
+ 'trainingServicePlatform'
];
const filter = (key: string, val: any): any => {
if (key === 'trialConcurrency') {
@@ -28,12 +32,12 @@ class TrialInfo extends React.Component {
const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
return (
-
+
diff --git a/src/webui/src/components/public-child/DefaultMetric.tsx b/src/webui/src/components/public-child/DefaultMetric.tsx
index 252628d729..388a7f1d18 100644
--- a/src/webui/src/components/public-child/DefaultMetric.tsx
+++ b/src/webui/src/components/public-child/DefaultMetric.tsx
@@ -13,9 +13,7 @@ class DefaultMetric extends React.Component
{
render(): React.ReactNode {
const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
- return (
- {accuracy !== undefined ? formatAccuracy(accuracy) : '--'}
- );
+ return {accuracy !== undefined ? formatAccuracy(accuracy) : '--'}
;
}
}
diff --git a/src/webui/src/components/public-child/IntermediateVal.tsx b/src/webui/src/components/public-child/IntermediateVal.tsx
index 45c677f051..1d41b1b41d 100644
--- a/src/webui/src/components/public-child/IntermediateVal.tsx
+++ b/src/webui/src/components/public-child/IntermediateVal.tsx
@@ -11,9 +11,7 @@ class IntermediateVal extends React.Component {
}
render(): React.ReactNode {
- return (
- {TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}
- );
+ return {TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}
;
}
}
diff --git a/src/webui/src/components/public-child/LogPathChild.tsx b/src/webui/src/components/public-child/LogPathChild.tsx
index 8d2419efac..a73fabc6de 100644
--- a/src/webui/src/components/public-child/LogPathChild.tsx
+++ b/src/webui/src/components/public-child/LogPathChild.tsx
@@ -6,10 +6,8 @@ interface LogpathChildProps {
}
class LogPathChild extends React.Component {
-
constructor(props: LogpathChildProps) {
super(props);
-
}
render(): React.ReactNode {
@@ -17,16 +15,15 @@ class LogPathChild extends React.Component {
const isLink = /^http/gi.test(eachLogpath);
return (
-
-
{logName}
- {
- isLink
- ?
-
{eachLogpath}
- :
-
{eachLogpath}
-
- }
+
);
}
diff --git a/src/webui/src/components/public-child/MonacoEditor.tsx b/src/webui/src/components/public-child/MonacoEditor.tsx
index 4e28c5457b..850a01ad1c 100644
--- a/src/webui/src/components/public-child/MonacoEditor.tsx
+++ b/src/webui/src/components/public-child/MonacoEditor.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Spinner } from 'office-ui-fabric-react';
+import { Spinner } from '@fluentui/react';
import { DRAWEROPTION } from '../../static/const';
import MonacoEditor from 'react-monaco-editor';
@@ -10,7 +10,6 @@ interface MonacoEditorProps {
}
class MonacoHTML extends React.Component
{
-
public _isMonacoMount!: boolean;
constructor(props: MonacoEditorProps) {
@@ -28,34 +27,25 @@ class MonacoHTML extends React.Component {
render(): React.ReactNode {
const { content, loading, height } = this.props;
return (
-
- {
- loading
- ?
-
-
-
- :
+
+ {loading ? (
+
- }
-
+
+ ) : (
+
+ )}
);
}
diff --git a/src/webui/src/components/public-child/OpenRow.tsx b/src/webui/src/components/public-child/OpenRow.tsx
index a20cf5313f..b54b24aa5d 100644
--- a/src/webui/src/components/public-child/OpenRow.tsx
+++ b/src/webui/src/components/public-child/OpenRow.tsx
@@ -1,13 +1,13 @@
import * as React from 'react';
import * as copy from 'copy-to-clipboard';
-import { Stack, PrimaryButton, Pivot, PivotItem } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Pivot, PivotItem } from '@fluentui/react';
import { Trial } from '../../static/model/trial';
import { MANAGER_IP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import JSONTree from 'react-json-tree';
import PaiTrialLog from '../public-child/PaiTrialLog';
import TrialLog from '../public-child/TrialLog';
-import MessageInfo from '../Modals/MessageInfo';
+import MessageInfo from '../modals/MessageInfo';
import '../../static/style/overview.scss';
import '../../static/style/copyParameter.scss';
import '../../static/style/openRow.scss';
@@ -23,7 +23,6 @@ interface OpenRowState {
}
class OpenRow extends React.Component
{
-
constructor(props: OpenRowProps) {
super(props);
this.state = {
@@ -35,17 +34,17 @@ class OpenRow extends React.Component {
hideMessageInfo = (): void => {
this.setState(() => ({ isHidenInfo: true }));
- }
+ };
/**
* info: message content
* typeInfo: message type: success | error...
- * continuousTime: show time, 2000ms
+ * continuousTime: show time, 2000ms
*/
getCopyStatus = (info: string, typeInfo: string): void => {
this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
setTimeout(this.hideMessageInfo, 2000);
- }
+ };
copyParams = (trial: Trial): void => {
// get copy parameters
@@ -55,83 +54,79 @@ class OpenRow extends React.Component {
} else {
this.getCopyStatus('Failed !', 'error');
}
- }
+ };
openTrialLog = (type: string): void => {
window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`);
- }
+ };
render(): React.ReactNode {
const { isHidenInfo, typeInfo, info } = this.state;
const trialId = this.props.trialId;
const trial = TRIALS.getTrial(trialId);
- const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
+ const logPathRow = trial.info.logPath || "This trial's log path is not available.";
return (
-
-
+
+
-
- {
- trial.info.hyperParameters !== undefined
- ?
-
-
- true} // default expandNode
- getItemString={(): null => null} // remove the {} items
- data={trial.description.parameters}
- />
-
-
-
- {/* copy success | failed message info */}
- {!isHidenInfo && }
-
+
+ {trial.info.hyperParameters !== undefined ? (
+
+
+ true} // default expandNode
+ getItemString={(): null => null} // remove the {} items
+ data={trial.description.parameters}
+ />
- :
-
- Error:
- {`This trial's parameters are not available.'`}
+
+
+ {/* copy success | failed message info */}
+ {!isHidenInfo && }
- }
+
+ ) : (
+
+ Error:
+ {`This trial's parameters are not available.'`}
+
+ )}
-
- {
- // FIXME: this should not be handled in web UI side
- EXPERIMENT.trainingServicePlatform !== 'local'
- ?
-
- :
-
-
- {/* view each trial log in drawer*/}
-
-
+
+ {// FIXME: this should not be handled in web UI side
+ EXPERIMENT.trainingServicePlatform !== 'local' ? (
+
+ ) : (
+
+
+ {/* view each trial log in drawer*/}
+
- }
+
+ )}
-
+
);
}
diff --git a/src/webui/src/components/public-child/PaiTrialChild.tsx b/src/webui/src/components/public-child/PaiTrialChild.tsx
index c505623b3f..438bc1df22 100644
--- a/src/webui/src/components/public-child/PaiTrialChild.tsx
+++ b/src/webui/src/components/public-child/PaiTrialChild.tsx
@@ -9,41 +9,30 @@ interface PaiTrialChildProps {
}
class PaiTrialChild extends React.Component
{
-
constructor(props: PaiTrialChildProps) {
super(props);
-
}
render(): React.ReactNode {
const { logString, id, logCollect } = this.props;
return (
- {
- logString === ''
- ?
- null
- :
-
- }
+ {logString === '' ? null : (
+
+ )}
);
}
diff --git a/src/webui/src/components/public-child/PaiTrialLog.tsx b/src/webui/src/components/public-child/PaiTrialLog.tsx
index f083e7e750..f522cece57 100644
--- a/src/webui/src/components/public-child/PaiTrialLog.tsx
+++ b/src/webui/src/components/public-child/PaiTrialLog.tsx
@@ -10,60 +10,42 @@ interface PaitrialLogProps {
}
class PaitrialLog extends React.Component {
-
constructor(props: PaitrialLogProps) {
super(props);
-
}
render(): React.ReactNode {
const { logStr, id, logCollection } = this.props;
- const isTwopath = logStr.indexOf(',') !== -1
- ?
- true
- :
- false;
+ const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
return (
- {
- isTwopath
- ?
-
- {
- logCollection
- ?
-
- :
-
-
-
-
- }
-
- :
-
- }
+ {isTwopath ? (
+
+ {logCollection ? (
+
+ ) : (
+
+
+
+
+ )}
+
+ ) : (
+
+ )}
);
diff --git a/src/webui/src/components/public-child/TrialLog.tsx b/src/webui/src/components/public-child/TrialLog.tsx
index 9891bed150..126ab8711b 100644
--- a/src/webui/src/components/public-child/TrialLog.tsx
+++ b/src/webui/src/components/public-child/TrialLog.tsx
@@ -7,10 +7,8 @@ interface TrialLogProps {
}
class TrialLog extends React.Component {
-
constructor(props: TrialLogProps) {
super(props);
-
}
render(): React.ReactNode {
@@ -18,10 +16,7 @@ class TrialLog extends React.Component {
return (
-
+
);
}
diff --git a/src/webui/src/components/stateless-component/NNItabs.tsx b/src/webui/src/components/stateless-component/NNItabs.tsx
index 6f75213cf4..a733da4fdd 100644
--- a/src/webui/src/components/stateless-component/NNItabs.tsx
+++ b/src/webui/src/components/stateless-component/NNItabs.tsx
@@ -1,26 +1,22 @@
import * as React from 'react';
-import { Link } from 'react-router';
+import { NavLink } from 'react-router-dom';
const OVERVIEWTABS = (
-
+
Overview
-
+
);
const DETAILTABS = (
-
+
Trials detail
-
+
);
const NNILOGO = (
-
-
-
+
+
+
);
-export { OVERVIEWTABS, DETAILTABS, NNILOGO };
\ No newline at end of file
+export { OVERVIEWTABS, DETAILTABS, NNILOGO };
diff --git a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
index f97e3a11f7..3427c0c28d 100644
--- a/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
+++ b/src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Toggle, Stack } from 'office-ui-fabric-react';
+import { Toggle, Stack } from '@fluentui/react';
import ReactEcharts from 'echarts-for-react';
import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { Trial } from '../../static/model/trial';
@@ -14,23 +14,22 @@ const EmptyGraph = {
},
xAxis: {
name: 'Trial',
- type: 'category',
+ type: 'category'
},
yAxis: {
name: 'Default metric',
- type: 'value',
+ type: 'value'
}
};
interface DefaultPointProps {
trialIds: string[];
visible: boolean;
- trialsUpdateBroadcast: number;
}
interface DefaultPointState {
bestCurveEnabled?: boolean | undefined;
- startY: number; // dataZoomY
+ startY: number; // dataZoomY
endY: number;
}
@@ -46,7 +45,7 @@ class DefaultPoint extends React.Component
loadDefault = (ev: React.MouseEvent, checked?: boolean): void => {
this.setState({ bestCurveEnabled: checked });
- }
+ };
shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
return nextProps.visible;
@@ -55,31 +54,37 @@ class DefaultPoint extends React.Component
metricDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) {
this.setState(() => ({
- startY: (e.batch[0].start !== null ? e.batch[0].start : 0),
- endY: (e.batch[0].end !== null ? e.batch[0].end : 100)
+ startY: e.batch[0].start !== null ? e.batch[0].start : 0,
+ endY: e.batch[0].end !== null ? e.batch[0].end : 100
}));
}
- }
+ };
generateGraphConfig(maxSequenceId: number): any {
const { startY, endY } = this.state;
return {
grid: {
- left: '8%',
+ left: '8%'
},
tooltip: {
trigger: 'item',
enterable: true,
- position: (point: number[], data: TooltipForAccuracy): number[] => (
- [(data.data[0] < maxSequenceId ? point[0] : (point[0] - 300)), 80]
- ),
- formatter: (data: TooltipForAccuracy): React.ReactNode => (
+ position: (point: number[], data: TooltipForAccuracy): number[] => [
+ data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
+ 80
+ ],
+ formatter: (data: TooltipForAccuracy): React.ReactNode =>
''
- ),
},
dataZoom: [
{
@@ -93,27 +98,23 @@ class DefaultPoint extends React.Component
],
xAxis: {
name: 'Trial',
- type: 'category',
+ type: 'category'
},
yAxis: {
name: 'Default metric',
type: 'value',
- scale: true,
+ scale: true
},
- series: undefined,
+ series: undefined
};
}
generateScatterSeries(trials: Trial[]): any {
- const data = trials.map(trial => [
- trial.sequenceId,
- trial.accuracy,
- trial.description.parameters,
- ]);
+ const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
return {
symbolSize: 6,
type: 'scatter',
- data,
+ data
};
}
@@ -125,7 +126,7 @@ class DefaultPoint extends React.Component
const trial = trials[i];
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const delta = trial.accuracy! - best.accuracy!;
- const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
+ const better = EXPERIMENT.optimizeMode === 'minimize' ? delta < 0 : delta > 0;
if (better) {
data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
best = trial;
@@ -137,36 +138,33 @@ class DefaultPoint extends React.Component
return {
type: 'line',
lineStyle: { color: '#FF6600' },
- data,
+ data
};
}
render(): React.ReactNode {
const graph = this.generateGraph();
- const accNodata = (graph === EmptyGraph ? 'No data' : '');
- const onEvents = { 'dataZoom': this.metricDataZoom };
+ const accNodata = graph === EmptyGraph ? 'No data' : '';
+ const onEvents = { dataZoom: this.metricDataZoom };
return (
-
-
+
+
-
+
-
{accNodata}
+
{accNodata}
);
diff --git a/src/webui/src/components/trial-detail/Duration.tsx b/src/webui/src/components/trial-detail/Duration.tsx
index e07ef26b5e..d4e16f665a 100644
--- a/src/webui/src/components/trial-detail/Duration.tsx
+++ b/src/webui/src/components/trial-detail/Duration.tsx
@@ -23,16 +23,13 @@ interface DurationState {
}
class Duration extends React.Component {
-
constructor(props: DurationProps) {
-
super(props);
this.state = {
startDuration: 0, // for record data zoom
endDuration: 100,
- durationSource: this.initDuration(this.props.source),
+ durationSource: this.initDuration(this.props.source)
};
-
}
initDuration = (source: Array): any => {
@@ -50,12 +47,15 @@ class Duration extends React.Component {
axisPointer: {
type: 'shadow'
},
- formatter: (data: any): React.ReactNode => (
+ formatter: (data: any): React.ReactNode =>
'' +
- '
Trial No.: ' + data[0].dataIndex + '
' +
- '
Duration: ' + convertDuration(data[0].data) + '
' +
+ '
Trial No.: ' +
+ data[0].dataIndex +
+ '
' +
+ '
Duration: ' +
+ convertDuration(data[0].data) +
+ '
' +
'
'
- ),
},
grid: {
bottom: '3%',
@@ -71,11 +71,11 @@ class Duration extends React.Component {
filterMode: 'empty',
start: 0,
end: 100
- },
+ }
],
xAxis: {
name: 'Time/s',
- type: 'value',
+ type: 'value'
},
yAxis: {
name: 'Trial No.',
@@ -85,12 +85,14 @@ class Duration extends React.Component {
padding: [0, 0, 0, 30]
}
},
- series: [{
- type: 'bar',
- data: trialTime
- }]
+ series: [
+ {
+ type: 'bar',
+ data: trialTime
+ }
+ ]
};
- }
+ };
getOption = (dataObj: Runtrial): any => {
const { startDuration, endDuration } = this.state;
@@ -100,12 +102,15 @@ class Duration extends React.Component {
axisPointer: {
type: 'shadow'
},
- formatter: (data: any): React.ReactNode => (
+ formatter: (data: any): React.ReactNode =>
'' +
- '
Trial No.: ' + data[0].dataIndex + '
' +
- '
Duration: ' + convertDuration(data[0].data) + '
' +
+ '
Trial No.: ' +
+ data[0].dataIndex +
+ '
' +
+ '
Duration: ' +
+ convertDuration(data[0].data) +
+ '
' +
'
'
- ),
},
grid: {
bottom: '3%',
@@ -121,11 +126,11 @@ class Duration extends React.Component {
filterMode: 'empty',
start: startDuration,
end: endDuration
- },
+ }
],
xAxis: {
name: 'Time',
- type: 'value',
+ type: 'value'
},
yAxis: {
name: 'Trial',
@@ -135,12 +140,14 @@ class Duration extends React.Component {
padding: [0, 0, 0, 30]
}
},
- series: [{
- type: 'bar',
- data: dataObj.trialTime
- }]
+ series: [
+ {
+ type: 'bar',
+ data: dataObj.trialTime
+ }
+ ]
};
- }
+ };
drawDurationGraph = (source: Array): void => {
// why this function run two times when props changed?
@@ -160,7 +167,7 @@ class Duration extends React.Component {
this.setState({
durationSource: this.getOption(trialRun[0])
});
- }
+ };
componentDidMount(): void {
const { source } = this.props;
@@ -178,13 +185,13 @@ class Duration extends React.Component {
render(): React.ReactNode {
const { durationSource } = this.state;
- const onEvents = { 'dataZoom': this.durationDataZoom };
+ const onEvents = { dataZoom: this.durationDataZoom };
return (
@@ -195,11 +202,11 @@ class Duration extends React.Component {
private durationDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) {
this.setState(() => ({
- startDuration: (e.batch[0].start !== null ? e.batch[0].start : 0),
- endDuration: (e.batch[0].end !== null ? e.batch[0].end : 100)
+ startDuration: e.batch[0].start !== null ? e.batch[0].start : 0,
+ endDuration: e.batch[0].end !== null ? e.batch[0].end : 100
}));
}
- }
+ };
}
export default Duration;
diff --git a/src/webui/src/components/trial-detail/Intermediate.tsx b/src/webui/src/components/trial-detail/Intermediate.tsx
index 308b4b6acf..72dcc94cee 100644
--- a/src/webui/src/components/trial-detail/Intermediate.tsx
+++ b/src/webui/src/components/trial-detail/Intermediate.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Stack, PrimaryButton, Toggle, IStackTokens } from 'office-ui-fabric-react';
+import { Stack, PrimaryButton, Toggle, IStackTokens } from '@fluentui/react';
import { TooltipForIntermediate, TableObj, Intermedia, EventMap } from '../../static/interface';
import ReactEcharts from 'echarts-for-react';
import 'echarts/lib/component/tooltip';
@@ -28,7 +28,6 @@ interface IntermediateProps {
}
class Intermediate extends React.Component {
-
static intervalMediate = 1;
public pointInput!: HTMLInputElement | null;
public minValInput!: HTMLInputElement | null;
@@ -68,7 +67,9 @@ class Intermediate extends React.Component