Skip to content

GitLab

"...composable_kernel.git" did not exist on "2b5ec66391bf4b97c0ebdcec81e9fead5570e76a"
Unverified Commit 4668fc08 authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

Update webui react version and use fluent ui (#2873)

parent 2ee76dc7
Hide whitespace changes
Inline Side-by-side
Showing with 322 additions and 314 deletions
src/webui/package.json
View file @ 4668fc08
...@@ -22,12 +22,15 @@ ...@@ -22,12 +22,15 @@
"html-webpack-plugin": "4.0.0-beta.5", "html-webpack-plugin": "4.0.0-beta.5",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"is-wsl": "^1.1.0", "is-wsl": "^1.1.0",
"jest": "24.7.1",
"jest-environment-jsdom-fourteen": "0.1.0",
"jest-resolve": "24.7.1",
"jest-watch-typeahead": "0.3.0",
"json5": "^2.1.1", "json5": "^2.1.1",
"mini-css-extract-plugin": "0.5.0", "mini-css-extract-plugin": "0.5.0",
"monaco-editor": "^0.19.0", "monaco-editor": "^0.19.0",
"monaco-editor-webpack-plugin": "^1.8.1", "monaco-editor-webpack-plugin": "^1.8.1",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"office-ui-fabric-react": "^7.78.0",
"optimize-css-assets-webpack-plugin": "5.0.1", "optimize-css-assets-webpack-plugin": "5.0.1",
"parcoord-es": "^2.2.10", "parcoord-es": "^2.2.10",
"pnp-webpack-plugin": "1.2.1", "pnp-webpack-plugin": "1.2.1",
...@@ -44,7 +47,8 @@ ...@@ -44,7 +47,8 @@
"react-monaco-editor": "^0.32.1", "react-monaco-editor": "^0.32.1",
"react-paginate": "^6.3.2", "react-paginate": "^6.3.2",
"react-pagination": "^1.0.0", "react-pagination": "^1.0.0",
"react-router": "^3.2.3", "react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-table": "^7.0.0-rc.15", "react-table": "^7.0.0-rc.15",
"resolve": "1.10.0", "resolve": "1.10.0",
"sass-loader": "7.1.0", "sass-loader": "7.1.0",
...@@ -59,17 +63,16 @@ ...@@ -59,17 +63,16 @@
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "7.4.3", "@babel/core": "7.4.3",
"@fluentui/react": "^7.135.0",
"@svgr/webpack": "4.1.0", "@svgr/webpack": "4.1.0",
"@types/d3": "^5.7.2", "@types/d3": "^5.7.2",
"@types/jest": "24.0.12", "@types/jest": "24.0.12",
"@types/json5": "^0.0.30", "@types/json5": "^0.0.30",
"@types/node": "^10.13.0", "@types/node": "^10.14.2",
"@types/react": "16.8.6", "@types/react": "16.8.15",
"@types/react-dom": "^16.0.7", "@types/react-dom": "16.8.4",
"@types/react-router": "^3.0.20",
"@typescript-eslint/eslint-plugin": "^2.11.0", "@typescript-eslint/eslint-plugin": "^2.11.0",
"@typescript-eslint/parser": "^2.11.0", "@typescript-eslint/parser": "^2.11.0",
"@uifabric/fluent-theme": "^0.16.7",
"concurrently": "^5.2.0", "concurrently": "^5.2.0",
"eslint": "^5.16.0", "eslint": "^5.16.0",
"eslint-config-react-app": "^4.0.0", "eslint-config-react-app": "^4.0.0",
......
src/webui/src/App.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { Stack } from 'office-ui-fabric-react'; import { Stack } from '@fluentui/react';
import { COLUMN } from './static/const'; import { COLUMN } from './static/const';
import { EXPERIMENT, TRIALS } from './static/datamodel'; import { EXPERIMENT, TRIALS } from './static/datamodel';
import NavCon from './components/NavCon'; import NavCon from './components/NavCon';
import MessageInfo from './components/Modals/MessageInfo'; import MessageInfo from './components/modals/MessageInfo';
import './App.scss'; import './App.scss';
interface AppState { interface AppState {
...@@ -18,6 +18,21 @@ interface AppState { ...@@ -18,6 +18,21 @@ interface AppState {
isUpdate: boolean; isUpdate: boolean;
} }
export const AppContext = React.createContext({
interval: 10, // sendons
columnList: COLUMN,
experimentUpdateBroadcast: 0,
trialsUpdateBroadcast: 0,
metricGraphMode: 'max',
bestTrialEntries: '10',
// eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
changeColumn: (val: string[]) => {},
// 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) => {}
});
class App extends React.Component<{}, AppState> { class App extends React.Component<{}, AppState> {
private timerId!: number | undefined; private timerId!: number | undefined;
private dataFormatimer!: number; private dataFormatimer!: number;
...@@ -103,8 +118,7 @@ class App extends React.Component<{}, AppState> { ...@@ -103,8 +118,7 @@ class App extends React.Component<{}, AppState> {
} }
shouldComponentUpdate(nextProps: any, nextState: AppState): boolean { shouldComponentUpdate(nextProps: any, nextState: AppState): boolean {
if (!(nextState.isUpdate || nextState.isUpdate === undefined)) {
if(!(nextState.isUpdate || nextState.isUpdate === undefined)){
nextState.isUpdate = true; nextState.isUpdate = true;
return false; return false;
} }
...@@ -126,19 +140,6 @@ class App extends React.Component<{}, AppState> { ...@@ -126,19 +140,6 @@ class App extends React.Component<{}, AppState> {
{ errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() }, { errorWhere: TRIALS.latestMetricDataError(), errorMessage: TRIALS.getLatestMetricDataErrorMessage() },
{ errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() } { errorWhere: TRIALS.metricDataRangeError(), errorMessage: TRIALS.metricDataRangeErrorMessage() }
]; ];
const reactPropsChildren = React.Children.map(this.props.children, child =>
React.cloneElement(
child as React.ReactElement<any>, {
interval,
columnList, changeColumn: this.changeColumn,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries, changeEntries: this.changeEntries
})
);
return ( return (
<Stack className="nni" style={{ minHeight: window.innerHeight }}> <Stack className="nni" style={{ minHeight: window.innerHeight }}>
<div className="header"> <div className="header">
...@@ -161,7 +162,19 @@ class App extends React.Component<{}, AppState> { ...@@ -161,7 +162,19 @@ class App extends React.Component<{}, AppState> {
{isillegalFinal && <div className="warning"> {isillegalFinal && <div className="warning">
<MessageInfo info={expWarningMessage} typeInfo="warning" /> <MessageInfo info={expWarningMessage} typeInfo="warning" />
</div>} </div>}
{reactPropsChildren} <AppContext.Provider value={{
interval,
columnList,
changeColumn: this.changeColumn,
experimentUpdateBroadcast,
trialsUpdateBroadcast,
metricGraphMode,
changeMetricGraphMode: this.changeMetricGraphMode,
bestTrialEntries,
changeEntries: this.changeEntries
}}>
{this.props.children}
</AppContext.Provider>
</Stack> </Stack>
</Stack> </Stack>
</Stack> </Stack>
...@@ -203,5 +216,3 @@ class App extends React.Component<{}, AppState> { ...@@ -203,5 +216,3 @@ class App extends React.Component<{}, AppState> {
} }
export default App; export default App;
src/webui/src/components/NavCon.tsx
View file @ 4668fc08
...@@ -4,13 +4,13 @@ import { WEBUIDOC, MANAGER_IP } from '../static/const'; ...@@ -4,13 +4,13 @@ import { WEBUIDOC, MANAGER_IP } from '../static/const';
import { import {
Stack, initializeIcons, StackItem, CommandBarButton, Stack, initializeIcons, StackItem, CommandBarButton,
IContextualMenuProps, IStackTokens, IStackStyles IContextualMenuProps, IStackTokens, IStackStyles
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import LogPanel from './Modals/LogPanel'; import LogPanel from './modals/LogPanel';
import ExperimentPanel from './Modals/ExperimentPanel'; import ExperimentPanel from './modals/ExperimentPanel';
import { import {
downLoadIcon, infoIconAbout, downLoadIcon, infoIconAbout,
timeIcon, disableUpdates, requency, closeTimer timeIcon, disableUpdates, requency, closeTimer
} from './Buttons/Icon'; } from './buttons/Icon';
import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs'; import { OVERVIEWTABS, DETAILTABS, NNILOGO } from './stateless-component/NNItabs';
import { EXPERIMENT } from '../static/datamodel'; import { EXPERIMENT } from '../static/datamodel';
import '../static/style/nav/nav.scss'; import '../static/style/nav/nav.scss';
......
src/webui/src/components/Overview.tsx
View file @ 4668fc08
import * as React from 'react'; 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 { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial'; 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 SuccessTable from './overview/SuccessTable';
import Progressed from './overview/Progress'; import Progressed from './overview/Progress';
import Accuracy from './overview/Accuracy'; import Accuracy from './overview/Accuracy';
import SearchSpace from './overview/SearchSpace'; import SearchSpace from './overview/SearchSpace';
import BasicInfo from './overview/BasicInfo'; import { BasicInfo } from './overview/BasicInfo';
import TrialInfo from './overview/TrialProfile'; import TrialInfo from './overview/TrialProfile';
import '../static/style/overview.scss'; import '../static/style/overview.scss';
import '../static/style/logPath.scss'; import '../static/style/logPath.scss';
...@@ -24,21 +25,20 @@ const entriesOption = [ ...@@ -24,21 +25,20 @@ const entriesOption = [
{ key: '100', text: 'Display top 100 trials' } { 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 { interface OverviewState {
trialConcurrency: number; trialConcurrency: number;
} }
class Overview extends React.Component<OverviewProps, OverviewState> { export const TitleContext = React.createContext({
constructor(props: OverviewProps) { text: '',
icon: '',
fontColor: ''
});
class Overview extends React.Component<{}, OverviewState> {
static contextType = AppContext;
constructor(props) {
super(props); super(props);
this.state = { this.state = {
trialConcurrency: EXPERIMENT.trialConcurrency trialConcurrency: EXPERIMENT.trialConcurrency
...@@ -48,14 +48,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -48,14 +48,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => { clickMaxTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation(); event.stopPropagation();
// #999 panel active bgcolor; #b3b3b3 as usual // #999 panel active bgcolor; #b3b3b3 as usual
const { changeMetricGraphMode } = this.props; const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('max'); changeMetricGraphMode('max');
} }
clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => { clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
event.stopPropagation(); event.stopPropagation();
const { changeMetricGraphMode } = this.props; const { changeMetricGraphMode } = this.context;
changeMetricGraphMode('min'); changeMetricGraphMode('min');
} }
...@@ -66,107 +66,123 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -66,107 +66,123 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
// updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => { // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => { updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
if (item !== undefined) { if (item !== undefined) {
this.props.changeEntries(item.key); this.context.changeEntries(item.key);
} }
} }
render(): React.ReactNode { render(): React.ReactNode {
const { trialConcurrency } = this.state; const { trialConcurrency } = this.state;
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
const bestTrials = this.findBestTrials(); const bestTrials = this.findBestTrials();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN; const bestAccuracy = bestTrials.length > 0 ? bestTrials[0].accuracy! : NaN;
const accuracyGraphData = this.generateAccuracyGraph(bestTrials); const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
const noDataMessage = bestTrials.length > 0 ? '' : 'No data'; const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
return ( return (
<div className="overview"> <AppContext.Consumer>
{/* status and experiment block */} {(value): React.ReactNode => {
<Stack className="bottomDiv bgNNI"> const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
<Title1 text="Experiment" icon="11.png" /> const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} /> const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
</Stack> return (
<div className="overview">
<Stack horizontal className="overMessage bottomDiv"> {/* status and experiment block */}
{/* status block */} <Stack className="bottomDiv bgNNI">
<Stack.Item grow className="prograph bgNNI borderRight"> <TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}>
<Title1 text="Status" icon="5.png" /> <Title1 />
<Progressed </TitleContext.Provider>
bestAccuracy={bestAccuracy} <BasicInfo />
concurrency={trialConcurrency} </Stack>
changeConcurrency={this.changeConcurrency}
experimentUpdateBroadcast={experimentUpdateBroadcast} <Stack horizontal className="overMessage bottomDiv">
/> {/* status block */}
</Stack.Item> <Stack.Item grow className="prograph bgNNI borderRight">
{/* experiment parameters search space tuner assessor... */} <TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}>
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI"> <Title1 />
<Title1 text="Search space" icon="10.png" /> </TitleContext.Provider>
<Stack className="experiment"> <Progressed
<SearchSpace searchSpace={EXPERIMENT.searchSpace} /> bestAccuracy={bestAccuracy}
</Stack> concurrency={trialConcurrency}
</Stack.Item> changeConcurrency={this.changeConcurrency}
{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */} experimentUpdateBroadcast={experimentUpdateBroadcast}
<Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> />
<Title1 text="Config" icon="4.png" /> </Stack.Item>
<Stack className="experiment"> {/* experiment parameters search space tuner assessor... */}
{/* the scroll bar all the trial profile in the searchSpace div*/} <Stack.Item grow styles={{ root: { width: 450 } }} className="overviewBoder borderRight bgNNI">
<div className="experiment searchSpace"> <TitleContext.Provider value={{ text: "Search space", icon: "10.png", fontColor: '' }}>
<TrialInfo <Title1 />
experimentUpdateBroadcast={experimentUpdateBroadcast} </TitleContext.Provider>
concurrency={trialConcurrency} <Stack className="experiment">
/> <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
</div> </Stack>
</Stack> </Stack.Item>
</Stack.Item> <Stack.Item grow styles={{ root: { width: 450 } }} className="bgNNI">
</Stack> <TitleContext.Provider value={{ text: "Config", icon: "4.png", fontColor: '' }}>
<Title1 />
<Stack style={{backgroundColor: '#fff'}}> </TitleContext.Provider>
<Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}> <Stack className="experiment">
<div {/* the scroll bar all the trial profile in the searchSpace div*/}
className="title" <div className="experiment searchSpace">
onClick={this.clickMaxTop} <TrialInfo
> experimentUpdateBroadcast={experimentUpdateBroadcast}
<Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} /> concurrency={trialConcurrency}
</div> />
<div </div>
className="title minTitle" </Stack>
onClick={this.clickMinTop} </Stack.Item>
> </Stack>
<Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
</div> <Stack style={{ backgroundColor: '#fff' }}>
<div style={{position: 'absolute', right: '2%', top: 8}}> <Stack horizontal className="top10bg" style={{ position: 'relative', height: 42 }}>
<Dropdown <div
selectedKey={bestTrialEntries} className="title"
options={entriesOption} onClick={this.clickMaxTop}
onChange={this.updateEntries} >
styles={{ root: { width: 170 } }} <TitleContext.Provider value={{ text: "Top maximal trials", icon: "max.png", fontColor: titleMaxbgcolor }}>
/> <Title1 />
</div> </TitleContext.Provider>
</Stack> </div>
<Stack horizontal tokens={stackTokens}> <div
<div style={{ width: '40%', position: 'relative'}}> className="title minTitle"
<Accuracy onClick={this.clickMinTop}
accuracyData={accuracyGraphData} >
accNodata={noDataMessage} <TitleContext.Provider value={{ text: "Top minimal trials", icon: "min.png", fontColor: titleMinbgcolor }}>
height={404} <Title1 />
/> </TitleContext.Provider>
</div> </div>
<div style={{ width: '60%'}}> <div style={{ position: 'absolute', right: '2%', top: 8 }}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} /> <Dropdown
selectedKey={bestTrialEntries}
options={entriesOption}
onChange={this.updateEntries}
styles={{ root: { width: 170 } }}
/>
</div>
</Stack>
<Stack horizontal tokens={stackTokens}>
<div style={{ width: '40%', position: 'relative' }}>
<Accuracy
accuracyData={accuracyGraphData}
accNodata={noDataMessage}
height={404}
/>
</div>
<div style={{ width: '60%' }}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
</div>
</Stack>
</Stack>
</div> </div>
</Stack> )
</Stack> }
</div> }
</AppContext.Consumer>
); );
} }
private findBestTrials(): Trial[] { private findBestTrials(): Trial[] {
const bestTrials = TRIALS.sort(); const bestTrials = TRIALS.sort();
const { bestTrialEntries } = this.props; const { bestTrialEntries, metricGraphMode } = this.context;
if (this.props.metricGraphMode === 'max') { if (metricGraphMode === 'max') {
bestTrials.reverse().splice(JSON.parse(bestTrialEntries)); bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
} else { } else {
bestTrials.splice(JSON.parse(bestTrialEntries)); bestTrials.splice(JSON.parse(bestTrialEntries));
......
src/webui/src/components/TrialsDetail.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { import {
Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton Stack, StackItem, Pivot, PivotItem, Dropdown, IDropdownOption, DefaultButton
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import { EXPERIMENT, TRIALS } from '../static/datamodel'; import { EXPERIMENT, TRIALS } from '../static/datamodel';
import { Trial } from '../static/model/trial'; import { Trial } from '../static/model/trial';
import { tableListIcon } from './Buttons/Icon'; import { AppContext } from "../App";
import { tableListIcon } from './buttons/Icon';
import DefaultPoint from './trial-detail/DefaultMetricPoint'; import DefaultPoint from './trial-detail/DefaultMetricPoint';
import Duration from './trial-detail/Duration'; import Duration from './trial-detail/Duration';
import Para from './trial-detail/Para'; import Para from './trial-detail/Para';
...@@ -13,6 +14,13 @@ import TableList from './trial-detail/TableList'; ...@@ -13,6 +14,13 @@ import TableList from './trial-detail/TableList';
import '../static/style/trialsDetail.scss'; import '../static/style/trialsDetail.scss';
import '../static/style/search.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 { interface TrialDetailState {
tablePageSize: number; // table components val tablePageSize: number; // table components val
whichChart: string; whichChart: string;
...@@ -20,22 +28,15 @@ interface TrialDetailState { ...@@ -20,22 +28,15 @@ interface TrialDetailState {
searchFilter: (trial: Trial) => boolean; searchFilter: (trial: Trial) => boolean;
} }
interface TrialsDetailProps { class TrialsDetail extends React.Component<{}, TrialDetailState> {
columnList: string[]; static contextType = AppContext;
changeColumn: (val: string[]) => void;
experimentUpdateBroacast: number;
trialsUpdateBroadcast: number;
}
class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> {
public interAccuracy = 0; public interAccuracy = 0;
public interAllTableList = 2; public interAllTableList = 2;
public tableList!: TableList | null; public tableList!: TableList | null;
public searchInput!: HTMLInputElement | null; public searchInput!: HTMLInputElement | null;
constructor(props: TrialsDetailProps) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
tablePageSize: 20, tablePageSize: 20,
...@@ -82,7 +83,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> ...@@ -82,7 +83,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
} }
handleWhichTabs = (item: any): void => { handleWhichTabs = (item: any): void => {
this.setState({whichChart: item.props.headerText}); this.setState({ whichChart: item.props.headerText });
} }
updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => { updateSearchFilterType = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
...@@ -97,100 +98,97 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> ...@@ -97,100 +98,97 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
render(): React.ReactNode { render(): React.ReactNode {
const { tablePageSize, whichChart, searchType } = this.state; const { tablePageSize, whichChart, searchType } = this.state;
const { columnList, changeColumn } = this.props;
const source = TRIALS.filter(this.state.searchFilter); const source = TRIALS.filter(this.state.searchFilter);
const trialIds = TRIALS.filter(this.state.searchFilter).map(trial => trial.id); 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 ( return (
<div> <AppContext.Consumer>
<div className="trial" id="tabsty"> {(value): React.ReactNode =>
<Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}> <React.Fragment>
{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/} <div className="trial" id="tabsty">
<PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric"> <Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
<Stack className="graph"> {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
<DefaultPoint <PivotItem headerText="Default metric" itemIcon="HomeGroup" key="Default metric">
trialIds={trialIds} <Stack className="graph">
visible={whichChart === 'Default metric'} <DefaultPoint
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast} trialIds={trialIds}
/> visible={whichChart === 'Default metric'}
/>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfhyper} key="2"> */}
<PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter">
<Stack className="graph">
<Para
trials={source}
searchSpace={EXPERIMENT.searchSpaceNew}
whichChart={whichChart}
/>
</Stack>
</PivotItem>
{/* <PivotItem tab={this.titleOfDuration} key="3"> */}
<PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration">
<Duration source={source} whichChart={whichChart} />
</PivotItem>
{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */}
<PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result">
{/* *why this graph has small footprint? */}
<Intermediate source={source} whichChart={whichChart} />
</PivotItem>
</Pivot>
</div>
{/* trial table list */}
<div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack> </Stack>
</PivotItem> <Stack horizontal className="allList">
{/* <PivotItem tab={this.titleOfhyper} key="2"> */} <StackItem grow={50}>
<PivotItem headerText="Hyper-parameter" itemIcon="Equalizer" key="Hyper-parameter"> <DefaultButton
<Stack className="graph"> text="Compare"
<Para className="allList-compare"
trials={source} // use child-component tableList's function, the function is in child-component.
searchSpace={EXPERIMENT.searchSpaceNew} onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
whichChart={whichChart} />
/> </StackItem>
<StackItem grow={50}>
<Stack horizontal horizontalAlign="end" className="allList">
<DefaultButton
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack> </Stack>
</PivotItem> <TableList
{/* <PivotItem tab={this.titleOfDuration} key="3"> */} pageSize={tablePageSize}
<PivotItem headerText="Duration" itemIcon="BarChartHorizontal" key="Duration"> tableSource={source.map(trial => trial.tableRecord)}
<Duration source={source} whichChart={whichChart} /> columnList={value.columnList}
</PivotItem> changeColumn={value.changeColumn}
{/* <PivotItem tab={this.titleOfIntermediate} key="4"> */} trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
<PivotItem headerText="Intermediate result" itemIcon="StackedLineChart" key="Intermediate result"> // TODO: change any to specific type
{/* *why this graph has small footprint? */} ref={(tabList): any => this.tableList = tabList}
<Intermediate source={source} whichChart={whichChart} />
</PivotItem>
</Pivot>
</div>
{/* trial table list */}
<div style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
<span style={{ marginRight: 12 }}>{tableListIcon}</span>
<span>Trial jobs</span>
</Stack>
<Stack horizontal className="allList">
<StackItem grow={50}>
<DefaultButton
text="Compare"
className="allList-compare"
// use child-component tableList's function, the function is in child-component.
onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
/> />
</StackItem> </div>
<StackItem grow={50}> </React.Fragment>
<Stack horizontal horizontalAlign="end" className="allList"> }
<DefaultButton </AppContext.Consumer>
className="allList-button-gap"
text="Add column"
onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
/>
<Dropdown
selectedKey={searchType}
options={searchOptions}
onChange={this.updateSearchFilterType}
styles={{ root: { width: 150 } }}
/>
<input
type="text"
className="allList-search-input"
placeholder={`Search by ${this.state.searchType}`}
onChange={this.searchTrial}
style={{ width: 230 }}
ref={(text): any => (this.searchInput) = text}
/>
</Stack>
</StackItem>
</Stack>
<TableList
pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList}
changeColumn={changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
// TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList}
/>
</div>
</div>
); );
} }
} }
......
src/webui/src/components/Buttons/Icon.tsx → src/webui/src/components/buttons/Icon.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { Icon, initializeIcons } from 'office-ui-fabric-react'; import { Icon, initializeIcons } from '@fluentui/react';
initializeIcons(); initializeIcons();
const infoIcon = <Icon iconName='info' />; const infoIcon = <Icon iconName='info' />;
...@@ -11,7 +11,7 @@ const copy = <Icon iconName='Copy' />; ...@@ -11,7 +11,7 @@ const copy = <Icon iconName='Copy' />;
const tableListIcon = <Icon iconName='BulletedList' />; const tableListIcon = <Icon iconName='BulletedList' />;
const downLoadIcon = { iconName: 'Download' }; const downLoadIcon = { iconName: 'Download' };
const infoIconAbout = { iconName: 'info' }; const infoIconAbout = { iconName: 'info' };
const timeIcon = { iconName: 'ReminderTime' }; const timeIcon = { iconName: 'Refresh' };
const disableUpdates = { iconName: 'DisableUpdates' }; const disableUpdates = { iconName: 'DisableUpdates' };
const requency = { iconName: 'Timer' }; const requency = { iconName: 'Timer' };
const closeTimer = { iconName: 'Blocked2' }; const closeTimer = { iconName: 'Blocked2' };
......
src/webui/src/components/Buttons/ModalTheme.tsx → src/webui/src/components/buttons/ModalTheme.tsx
View file @ 4668fc08
import { getTheme, mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react'; import { getTheme, mergeStyleSets, FontWeights, FontSizes } from '@fluentui/react';
// Themed styles for the example. // Themed styles for the example.
const theme = getTheme(); const theme = getTheme();
const contentStyles = mergeStyleSets({ const contentStyles = mergeStyleSets({
......
src/webui/src/components/Modals/ChangeColumnComponent.tsx → src/webui/src/components/modals/ChangeColumnComponent.tsx
View file @ 4668fc08
import * as React from 'react'; 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'; import { OPERATION } from '../../static/const';
interface ChangeColumnState { interface ChangeColumnState {
......
src/webui/src/components/Modals/Compare.tsx → src/webui/src/components/modals/Compare.tsx
View file @ 4668fc08
import * as React from 'react'; 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 ReactEcharts from 'echarts-for-react';
import IntermediateVal from '../public-child/IntermediateVal'; import IntermediateVal from '../public-child/IntermediateVal';
import { TRIALS } from '../../static/datamodel'; import { TRIALS } from '../../static/datamodel';
import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface'; import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme'; import { contentStyles, iconButtonStyles } from '../buttons/ModalTheme';
import '../../static/style/compare.scss'; import '../../static/style/compare.scss';
const dragOptions: IDragOptions = { const dragOptions: IDragOptions = {
......
src/webui/src/components/Modals/CustomizedTrial.tsx → src/webui/src/components/modals/CustomizedTrial.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import axios from 'axios'; import axios from 'axios';
import { Stack, StackItem, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'; import { Stack, StackItem, PrimaryButton, DefaultButton } from '@fluentui/react';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog'; import { Dialog, DialogType, DialogFooter } from '@fluentui/react/lib/Dialog';
import { MANAGER_IP } from '../../static/const'; import { MANAGER_IP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { warining, errorBadge, completed } from '../Buttons/Icon'; import { warining, errorBadge, completed } from '../buttons/Icon';
import './customized.scss'; import './customized.scss';
interface CustomizeProps { interface CustomizeProps {
......
src/webui/src/components/Modals/ExperimentPanel.tsx → src/webui/src/components/modals/ExperimentPanel.tsx
View file @ 4668fc08
...@@ -2,7 +2,7 @@ import * as React from 'react'; ...@@ -2,7 +2,7 @@ import * as React from 'react';
import { downFile } from '../../static/function'; import { downFile } from '../../static/function';
import { import {
Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem Stack, PrimaryButton, DefaultButton, Panel, StackItem, Pivot, PivotItem
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import { DRAWEROPTION } from '../../static/const'; import { DRAWEROPTION } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import MonacoEditor from 'react-monaco-editor'; import MonacoEditor from 'react-monaco-editor';
......
src/webui/src/components/Modals/Killjob.tsx → src/webui/src/components/modals/Killjob.tsx
View file @ 4668fc08
...@@ -3,9 +3,9 @@ import { ...@@ -3,9 +3,9 @@ import {
Stack, FocusTrapCallout, DefaultButton, Stack, FocusTrapCallout, DefaultButton,
FocusZone, FocusZone,
PrimaryButton, getTheme, mergeStyleSets, FontWeights PrimaryButton, getTheme, mergeStyleSets, FontWeights
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import { killJob } from '../../static/function'; import { killJob } from '../../static/function';
import { blocked } from '../Buttons/Icon'; import { blocked } from '../buttons/Icon';
const theme = getTheme(); const theme = getTheme();
const styles = mergeStyleSets({ const styles = mergeStyleSets({
......
src/webui/src/components/Modals/LogPanel.tsx → src/webui/src/components/modals/LogPanel.tsx
View file @ 4668fc08
...@@ -3,8 +3,8 @@ import axios from 'axios'; ...@@ -3,8 +3,8 @@ import axios from 'axios';
import { import {
Stack, StackItem, Panel, PrimaryButton, DefaultButton, Stack, StackItem, Panel, PrimaryButton, DefaultButton,
Pivot, PivotItem Pivot, PivotItem
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import { infoIcon } from '../Buttons/Icon'; import { infoIcon } from '../buttons/Icon';
import { DOWNLOAD_IP } from '../../static/const'; import { DOWNLOAD_IP } from '../../static/const';
import { downFile } from '../../static/function'; import { downFile } from '../../static/function';
import MonacoHTML from '../public-child/MonacoEditor'; import MonacoHTML from '../public-child/MonacoEditor';
......
src/webui/src/components/Modals/MessageInfo.tsx → src/webui/src/components/modals/MessageInfo.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react'; import { MessageBar, MessageBarType } from '@fluentui/react';
interface MessageInfoProps { interface MessageInfoProps {
info: string; info: string;
......
src/webui/src/components/overview/BasicInfo.tsx
View file @ 4668fc08
import * as React from 'react'; import React from 'react';
import { Stack, TooltipHost, getId } from 'office-ui-fabric-react'; import { Stack, TooltipHost } from '@fluentui/react';
import { EXPERIMENT } from '../../static/datamodel'; import { EXPERIMENT } from '../../static/datamodel';
import { formatTimestamp } from '../../static/function'; import { formatTimestamp } from '../../static/function';
interface BasicInfoProps { export const BasicInfo = (): any => (
experimentUpdateBroadcast: number; <Stack horizontal horizontalAlign="space-between" className="main">
} <Stack.Item grow={3} className="padItem basic">
<p>Name</p>
class BasicInfo extends React.Component<BasicInfoProps, {}> { <div>{EXPERIMENT.profile.params.experimentName}</div>
// Use getId() to ensure that the ID is unique on the page. </Stack.Item>
// (It's also okay to use a plain string without getId() and manually ensure uniqueness.) <Stack.Item grow={3} className="padItem basic">
// for tooltip user the log directory <p>ID</p>
private _hostId: string = getId('tooltipHost'); <div>{EXPERIMENT.profile.id}</div>
constructor(props: BasicInfoProps) { </Stack.Item>
super(props); <Stack.Item grow={3} className="padItem basic">
} <p>Start time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
render(): React.ReactNode { </Stack.Item>
return ( <Stack.Item grow={3} className="padItem basic">
<Stack horizontal horizontalAlign="space-between" className="main"> <p>End time</p>
<Stack.Item grow={3} className="padItem basic"> <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
<p>Name</p> </Stack.Item>
<div>{EXPERIMENT.profile.params.experimentName}</div> <Stack.Item className="padItem basic">
</Stack.Item> <p>Log directory</p>
<Stack.Item grow={3} className="padItem basic"> <div className="nowrap">
<p>ID</p> <TooltipHost
<div>{EXPERIMENT.profile.id}</div> // Tooltip message content
</Stack.Item> content={EXPERIMENT.profile.logDir || 'unknown'}
<Stack.Item grow={3} className="padItem basic"> calloutProps={{ gapSpace: 0 }}
<p>Start time</p> styles={{ root: { display: 'inline-block' } }}
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div> >
</Stack.Item> {/* show logDir */}
<Stack.Item grow={3} className="padItem basic"> {EXPERIMENT.profile.logDir || 'unknown'}
<p>End time</p> </TooltipHost>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div> </div>
</Stack.Item> </Stack.Item>
<Stack.Item className="padItem basic"> <Stack.Item className="padItem basic">
<p>Log directory</p> <p>Training platform</p>
<div className="nowrap"> <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
<TooltipHost </Stack.Item>
// Tooltip message content </Stack>
content={EXPERIMENT.profile.logDir || 'unknown'} );
id={this._hostId} \ No newline at end of file
calloutProps={{ gapSpace: 0 }}
styles={{ root: { display: 'inline-block' } }}
>
{/* show logDir */}
{EXPERIMENT.profile.logDir || 'unknown'}
</TooltipHost>
</div>
</Stack.Item>
<Stack.Item className="padItem basic">
<p>Training platform</p>
<div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
</Stack.Item>
</Stack>
);
}
}
export default BasicInfo;
src/webui/src/components/overview/Details.tsx
View file @ 4668fc08
import * as React from 'react'; 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'; import OpenRow from '../public-child/OpenRow';
interface DetailsProps { interface DetailsProps {
......
src/webui/src/components/overview/NumInput.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { Stack, PrimaryButton } from 'office-ui-fabric-react'; import { Stack, PrimaryButton } from '@fluentui/react';
interface ConcurrencyInputProps { interface ConcurrencyInputProps {
value: number; value: number;
......
src/webui/src/components/overview/Progress.tsx
View file @ 4668fc08
...@@ -2,16 +2,16 @@ import * as React from 'react'; ...@@ -2,16 +2,16 @@ import * as React from 'react';
import { import {
Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets, Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets,
getId, getTheme, StackItem, TooltipHost getId, getTheme, StackItem, TooltipHost
} from 'office-ui-fabric-react'; } from '@fluentui/react';
import axios from 'axios'; import axios from 'axios';
import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const'; import { MANAGER_IP, CONCURRENCYTOOLTIP } from '../../static/const';
import { EXPERIMENT, TRIALS } from '../../static/datamodel'; import { EXPERIMENT, TRIALS } from '../../static/datamodel';
import { convertTime } from '../../static/function'; import { convertTime } from '../../static/function';
import ConcurrencyInput from './NumInput'; import ConcurrencyInput from './NumInput';
import ProgressBar from './ProgressItem'; import ProgressBar from './ProgressItem';
import LogDrawer from '../Modals/LogPanel'; import LogDrawer from '../modals/LogPanel';
import MessageInfo from '../Modals/MessageInfo'; import MessageInfo from '../modals/MessageInfo';
import { infoIcon } from "../Buttons/Icon"; import { infoIcon } from "../buttons/Icon";
import '../../static/style/progress.scss'; import '../../static/style/progress.scss';
import '../../static/style/probar.scss'; import '../../static/style/probar.scss';
interface ProgressProps { interface ProgressProps {
......
src/webui/src/components/overview/ProgressItem.tsx
View file @ 4668fc08
import * as React from 'react'; import * as React from 'react';
import { Stack, StackItem, ProgressIndicator } from 'office-ui-fabric-react'; import { Stack, StackItem, ProgressIndicator } from '@fluentui/react';
interface ProItemProps { interface ProItemProps {
who: string; who: string;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment