"...src/components/experiment/overview/table/SuccessTable.tsx" did not exist on "de7b268524d6d497370b8df2dbcf05e6ce7039b0"
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
...@@ -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",
......
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;
...@@ -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';
......
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,34 +66,39 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -66,34 +66,39 @@ 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';
return (
<AppContext.Consumer>
{(value): React.ReactNode => {
const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = value;
const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3'); const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3'); const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
return ( return (
<div className="overview"> <div className="overview">
{/* status and experiment block */} {/* status and experiment block */}
<Stack className="bottomDiv bgNNI"> <Stack className="bottomDiv bgNNI">
<Title1 text="Experiment" icon="11.png" /> <TitleContext.Provider value={{ text: "Experiment", icon: "11.png", fontColor: '' }}>
<BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} /> <Title1 />
</TitleContext.Provider>
<BasicInfo />
</Stack> </Stack>
<Stack horizontal className="overMessage bottomDiv"> <Stack horizontal className="overMessage bottomDiv">
{/* status block */} {/* status block */}
<Stack.Item grow className="prograph bgNNI borderRight"> <Stack.Item grow className="prograph bgNNI borderRight">
<Title1 text="Status" icon="5.png" /> <TitleContext.Provider value={{ text: "Status", icon: "5.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<Progressed <Progressed
bestAccuracy={bestAccuracy} bestAccuracy={bestAccuracy}
concurrency={trialConcurrency} concurrency={trialConcurrency}
...@@ -102,15 +107,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -102,15 +107,18 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/> />
</Stack.Item> </Stack.Item>
{/* experiment parameters search space tuner assessor... */} {/* experiment parameters search space tuner assessor... */}
<Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI"> <Stack.Item grow styles={{ root: { width: 450 } }} className="overviewBoder borderRight bgNNI">
<Title1 text="Search space" icon="10.png" /> <TitleContext.Provider value={{ text: "Search space", icon: "10.png", fontColor: '' }}>
<Title1 />
</TitleContext.Provider>
<Stack className="experiment"> <Stack className="experiment">
<SearchSpace searchSpace={EXPERIMENT.searchSpace} /> <SearchSpace searchSpace={EXPERIMENT.searchSpace} />
</Stack> </Stack>
</Stack.Item> </Stack.Item>
{/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */} <Stack.Item grow styles={{ root: { width: 450 } }} className="bgNNI">
<Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> <TitleContext.Provider value={{ text: "Config", icon: "4.png", fontColor: '' }}>
<Title1 text="Config" icon="4.png" /> <Title1 />
</TitleContext.Provider>
<Stack className="experiment"> <Stack className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/} {/* the scroll bar all the trial profile in the searchSpace div*/}
<div className="experiment searchSpace"> <div className="experiment searchSpace">
...@@ -123,21 +131,25 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -123,21 +131,25 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
</Stack.Item> </Stack.Item>
</Stack> </Stack>
<Stack style={{backgroundColor: '#fff'}}> <Stack style={{ backgroundColor: '#fff' }}>
<Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}> <Stack horizontal className="top10bg" style={{ position: 'relative', height: 42 }}>
<div <div
className="title" className="title"
onClick={this.clickMaxTop} onClick={this.clickMaxTop}
> >
<Title1 text="Top maximal trials" icon="max.png" fontColor={titleMaxbgcolor} /> <TitleContext.Provider value={{ text: "Top maximal trials", icon: "max.png", fontColor: titleMaxbgcolor }}>
<Title1 />
</TitleContext.Provider>
</div> </div>
<div <div
className="title minTitle" className="title minTitle"
onClick={this.clickMinTop} onClick={this.clickMinTop}
> >
<Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} /> <TitleContext.Provider value={{ text: "Top minimal trials", icon: "min.png", fontColor: titleMinbgcolor }}>
<Title1 />
</TitleContext.Provider>
</div> </div>
<div style={{position: 'absolute', right: '2%', top: 8}}> <div style={{ position: 'absolute', right: '2%', top: 8 }}>
<Dropdown <Dropdown
selectedKey={bestTrialEntries} selectedKey={bestTrialEntries}
options={entriesOption} options={entriesOption}
...@@ -147,26 +159,30 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -147,26 +159,30 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
</div> </div>
</Stack> </Stack>
<Stack horizontal tokens={stackTokens}> <Stack horizontal tokens={stackTokens}>
<div style={{ width: '40%', position: 'relative'}}> <div style={{ width: '40%', position: 'relative' }}>
<Accuracy <Accuracy
accuracyData={accuracyGraphData} accuracyData={accuracyGraphData}
accNodata={noDataMessage} accNodata={noDataMessage}
height={404} height={404}
/> />
</div> </div>
<div style={{ width: '60%'}}> <div style={{ width: '60%' }}>
<SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} /> <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
</div> </div>
</Stack> </Stack>
</Stack> </Stack>
</div> </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));
......
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,17 +98,13 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> ...@@ -97,17 +98,13 @@ 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>
{(value): React.ReactNode =>
<React.Fragment>
<div className="trial" id="tabsty"> <div className="trial" id="tabsty">
<Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}> <Pivot defaultSelectedKey={"0"} className="detial-title" onLinkClick={this.handleWhichTabs} selectedKey={whichChart}>
{/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/} {/* <PivotItem tab={this.titleOfacc} key="1"> doesn't work*/}
...@@ -116,7 +113,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> ...@@ -116,7 +113,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
<DefaultPoint <DefaultPoint
trialIds={trialIds} trialIds={trialIds}
visible={whichChart === 'Default metric'} visible={whichChart === 'Default metric'}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
/> />
</Stack> </Stack>
</PivotItem> </PivotItem>
...@@ -183,14 +179,16 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState> ...@@ -183,14 +179,16 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
<TableList <TableList
pageSize={tablePageSize} pageSize={tablePageSize}
tableSource={source.map(trial => trial.tableRecord)} tableSource={source.map(trial => trial.tableRecord)}
columnList={columnList} columnList={value.columnList}
changeColumn={changeColumn} changeColumn={value.changeColumn}
trialsUpdateBroadcast={this.props.trialsUpdateBroadcast} trialsUpdateBroadcast={this.context.trialsUpdateBroadcast}
// TODO: change any to specific type // TODO: change any to specific type
ref={(tabList): any => this.tableList = tabList} ref={(tabList): any => this.tableList = tabList}
/> />
</div> </div>
</div> </React.Fragment>
}
</AppContext.Consumer>
); );
} }
} }
......
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' };
......
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({
......
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 {
......
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 = {
......
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 {
......
...@@ -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';
......
...@@ -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({
......
...@@ -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';
......
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;
......
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;
}
class BasicInfo extends React.Component<BasicInfoProps, {}> {
// 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 (
<Stack horizontal horizontalAlign="space-between" className="main"> <Stack horizontal horizontalAlign="space-between" className="main">
<Stack.Item grow={3} className="padItem basic"> <Stack.Item grow={3} className="padItem basic">
<p>Name</p> <p>Name</p>
...@@ -41,7 +27,6 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> { ...@@ -41,7 +27,6 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<TooltipHost <TooltipHost
// Tooltip message content // Tooltip message content
content={EXPERIMENT.profile.logDir || 'unknown'} content={EXPERIMENT.profile.logDir || 'unknown'}
id={this._hostId}
calloutProps={{ gapSpace: 0 }} calloutProps={{ gapSpace: 0 }}
styles={{ root: { display: 'inline-block' } }} styles={{ root: { display: 'inline-block' } }}
> >
...@@ -54,10 +39,5 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> { ...@@ -54,10 +39,5 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
<p>Training platform</p> <p>Training platform</p>
<div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div> <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
</Stack.Item> </Stack.Item>
</Stack> </Stack>
); );
} \ No newline at end of file
}
export default BasicInfo;
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 {
......
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;
......
...@@ -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 {
......
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