Skip to content

GitLab

Unverified Commit e2d8cc1b authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

[webui] format code by eslint and prettier (#2744) 



* update

* format as prettier

* fix error

* add stylelint for scss css file

* add arrow-parens rule

* update

* fix lint

* fix conflict
Co-authored-by: default avatarLijiao <15910218274@163.com>
Co-authored-by: default avatarLijiao <Lijiaoa@outlook.com>
Co-authored-by: default avatarLijiao <1425861283@qq.com>
parent 4668fc08
Hide whitespace changes
Inline Side-by-side
Showing with 346 additions and 412 deletions
src/webui/src/components/overview/Accuracy.tsx
View file @ e2d8cc1b
...@@ -15,10 +15,8 @@ interface AccuracyProps { ...@@ -15,10 +15,8 @@ interface AccuracyProps {
} }
class Accuracy extends React.Component<AccuracyProps, {}> { class Accuracy extends React.Component<AccuracyProps, {}> {
constructor(props: AccuracyProps) { constructor(props: AccuracyProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
...@@ -29,14 +27,14 @@ class Accuracy extends React.Component<AccuracyProps, {}> { ...@@ -29,14 +27,14 @@ class Accuracy extends React.Component<AccuracyProps, {}> {
option={accuracyData} option={accuracyData}
style={{ style={{
height: height, height: height,
margin: '0 auto', margin: '0 auto'
}} }}
theme="my_theme" theme='my_theme'
/> />
<div className="showMess">{accNodata}</div> <div className='showMess'>{accNodata}</div>
</div> </div>
); );
} }
} }
export default Accuracy; export default Accuracy;
\ No newline at end of file
src/webui/src/components/overview/BasicInfo.tsx
View file @ e2d8cc1b
...@@ -4,28 +4,28 @@ import { EXPERIMENT } from '../../static/datamodel'; ...@@ -4,28 +4,28 @@ import { EXPERIMENT } from '../../static/datamodel';
import { formatTimestamp } from '../../static/function'; import { formatTimestamp } from '../../static/function';
export const BasicInfo = (): any => ( export const BasicInfo = (): any => (
<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>
<div>{EXPERIMENT.profile.params.experimentName}</div> <div>{EXPERIMENT.profile.params.experimentName}</div>
</Stack.Item> </Stack.Item>
<Stack.Item grow={3} className="padItem basic"> <Stack.Item grow={3} className='padItem basic'>
<p>ID</p> <p>ID</p>
<div>{EXPERIMENT.profile.id}</div> <div>{EXPERIMENT.profile.id}</div>
</Stack.Item> </Stack.Item>
<Stack.Item grow={3} className="padItem basic"> <Stack.Item grow={3} className='padItem basic'>
<p>Start time</p> <p>Start time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div> <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
</Stack.Item> </Stack.Item>
<Stack.Item grow={3} className="padItem basic"> <Stack.Item grow={3} className='padItem basic'>
<p>End time</p> <p>End time</p>
<div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div> <div className='nowrap'>{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
</Stack.Item> </Stack.Item>
<Stack.Item className="padItem basic"> <Stack.Item className='padItem basic'>
<p>Log directory</p> <p>Log directory</p>
<div className="nowrap"> <div className='nowrap'>
<TooltipHost <TooltipHost
// Tooltip message content // Tooltip message content
content={EXPERIMENT.profile.logDir || 'unknown'} content={EXPERIMENT.profile.logDir || 'unknown'}
calloutProps={{ gapSpace: 0 }} calloutProps={{ gapSpace: 0 }}
styles={{ root: { display: 'inline-block' } }} styles={{ root: { display: 'inline-block' } }}
...@@ -35,9 +35,9 @@ export const BasicInfo = (): any => ( ...@@ -35,9 +35,9 @@ export const BasicInfo = (): any => (
</TooltipHost> </TooltipHost>
</div> </div>
</Stack.Item> </Stack.Item>
<Stack.Item className="padItem basic"> <Stack.Item className='padItem basic'>
<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
src/webui/src/components/overview/Details.tsx
View file @ e2d8cc1b
...@@ -11,7 +11,6 @@ interface DetailsState { ...@@ -11,7 +11,6 @@ interface DetailsState {
} }
class Details extends React.Component<DetailsProps, DetailsState> { class Details extends React.Component<DetailsProps, DetailsState> {
constructor(props: DetailsProps) { constructor(props: DetailsProps) {
super(props); super(props);
this.state = { isExpand: false }; this.state = { isExpand: false };
...@@ -22,9 +21,11 @@ class Details extends React.Component<DetailsProps, DetailsState> { ...@@ -22,9 +21,11 @@ class Details extends React.Component<DetailsProps, DetailsState> {
const { isExpand } = this.state; const { isExpand } = this.state;
return ( return (
<div> <div>
<div onClick={(): void => { <div
this.setState(() => ({ isExpand: !isExpand })); onClick={(): void => {
}}> this.setState(() => ({ isExpand: !isExpand }));
}}
>
<DetailsRow {...detailsProps} /> <DetailsRow {...detailsProps} />
</div> </div>
{isExpand && <OpenRow trialId={detailsProps.item.id} />} {isExpand && <OpenRow trialId={detailsProps.item.id} />}
...@@ -33,4 +34,4 @@ class Details extends React.Component<DetailsProps, DetailsState> { ...@@ -33,4 +34,4 @@ class Details extends React.Component<DetailsProps, DetailsState> {
} }
} }
export default Details; export default Details;
\ No newline at end of file
src/webui/src/components/overview/NumInput.tsx
View file @ e2d8cc1b
...@@ -23,32 +23,29 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc ...@@ -23,32 +23,29 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
this.props.updateValue(this.input.current.value); this.props.updateValue(this.input.current.value);
this.setState({ editting: false }); this.setState({ editting: false });
} }
} };
cancel = (): void => { cancel = (): void => {
this.setState({ editting: false }); this.setState({ editting: false });
} };
edit = (): void => { edit = (): void => {
this.setState({ editting: true }); this.setState({ editting: true });
} };
render(): React.ReactNode { render(): React.ReactNode {
if (this.state.editting) { if (this.state.editting) {
return ( return (
<Stack horizontal className="inputBox"> <Stack horizontal className='inputBox'>
<input <input
type="number" type='number'
className="concurrencyInput" className='concurrencyInput'
defaultValue={this.props.value.toString()} defaultValue={this.props.value.toString()}
ref={this.input} ref={this.input}
/> />
<PrimaryButton text='Save' onClick={this.save} />
<PrimaryButton <PrimaryButton
text="Save" text='Cancel'
onClick={this.save}
/>
<PrimaryButton
text="Cancel"
style={{ display: 'inline-block', marginLeft: 1 }} style={{ display: 'inline-block', marginLeft: 1 }}
onClick={this.cancel} onClick={this.cancel}
/> />
...@@ -56,17 +53,9 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc ...@@ -56,17 +53,9 @@ class ConcurrencyInput extends React.Component<ConcurrencyInputProps, Concurrenc
); );
} else { } else {
return ( return (
<Stack horizontal className="inputBox"> <Stack horizontal className='inputBox'>
<input <input type='number' className='concurrencyInput' disabled={true} value={this.props.value} />
type="number" <PrimaryButton text='Edit' onClick={this.edit} />
className="concurrencyInput"
disabled={true}
value={this.props.value}
/>
<PrimaryButton
text="Edit"
onClick={this.edit}
/>
</Stack> </Stack>
); );
} }
......
src/webui/src/components/overview/Progress.tsx
View file @ e2d8cc1b
import * as React from 'react'; import * as React from 'react';
import { import {
Stack, Callout, Link, IconButton, FontWeights, mergeStyleSets, Stack,
getId, getTheme, StackItem, TooltipHost Callout,
Link,
IconButton,
FontWeights,
mergeStyleSets,
getId,
getTheme,
StackItem,
TooltipHost
} from '@fluentui/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';
...@@ -11,7 +19,7 @@ import ConcurrencyInput from './NumInput'; ...@@ -11,7 +19,7 @@ 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 {
...@@ -100,20 +108,21 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -100,20 +108,21 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
hideSucceedInfo = (): void => { hideSucceedInfo = (): void => {
this.setState(() => ({ isShowSucceedInfo: false })); this.setState(() => ({ isShowSucceedInfo: false }));
} };
/** /**
* info: message content * info: message content
* typeInfo: message type: success | error... * typeInfo: message type: success | error...
* continuousTime: show time, 2000ms * continuousTime: show time, 2000ms
*/ */
showMessageInfo = (info: string, typeInfo: string): void => { showMessageInfo = (info: string, typeInfo: string): void => {
this.setState(() => ({ this.setState(() => ({
info, typeInfo, info,
typeInfo,
isShowSucceedInfo: true isShowSucceedInfo: true
})); }));
setTimeout(this.hideSucceedInfo, 2000); setTimeout(this.hideSucceedInfo, 2000);
} };
editTrialConcurrency = async (userInput: string): Promise<void> => { editTrialConcurrency = async (userInput: string): Promise<void> => {
if (!userInput.match(/^[1-9]\d*$/)) { if (!userInput.match(/^[1-9]\d*$/)) {
...@@ -144,30 +153,33 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -144,30 +153,33 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
if (error.response && error.response.data.error) { if (error.response && error.response.data.error) {
this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error'); this.showMessageInfo(`Failed to update trial concurrency\n${error.response.data.error}`, 'error');
} else if (error.response) { } 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) { } else if (error.message) {
this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error'); this.showMessageInfo(`Failed to update trial concurrency\n${error.message}`, 'error');
} else { } else {
this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error'); this.showMessageInfo(`Failed to update trial concurrency\nUnknown error`, 'error');
} }
} }
} };
isShowDrawer = (): void => { isShowDrawer = (): void => {
this.setState({ isShowLogDrawer: true }); this.setState({ isShowLogDrawer: true });
} };
closeDrawer = (): void => { closeDrawer = (): void => {
this.setState({ isShowLogDrawer: false }); this.setState({ isShowLogDrawer: false });
} };
onDismiss = (): void => { onDismiss = (): void => {
this.setState({ isCalloutVisible: false }); this.setState({ isCalloutVisible: false });
} };
onShow = (): void => { onShow = (): void => {
this.setState({ isCalloutVisible: true }); this.setState({ isCalloutVisible: true });
} };
render(): React.ReactNode { render(): React.ReactNode {
const { bestAccuracy } = this.props; const { bestAccuracy } = this.props;
...@@ -187,123 +199,117 @@ class Progressed extends React.Component<ProgressProps, ProgressState> { ...@@ -187,123 +199,117 @@ class Progressed extends React.Component<ProgressProps, ProgressState> {
const execDuration = convertTime(EXPERIMENT.profile.execDuration); const execDuration = convertTime(EXPERIMENT.profile.execDuration);
return ( return (
<Stack className="progress" id="barBack"> <Stack className='progress' id='barBack'>
<Stack className="basic lineBasic"> <Stack className='basic lineBasic'>
<p>Status</p> <p>Status</p>
<Stack horizontal className="status"> <Stack horizontal className='status'>
<span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span> <span className={`${EXPERIMENT.status} status-text`}>{EXPERIMENT.status}</span>
{ {EXPERIMENT.status === 'ERROR' ? (
EXPERIMENT.status === 'ERROR' <div>
? <div className={styles.buttonArea} ref={(val): any => (this.menuButtonElement = val)}>
<div> <IconButton
<div className={styles.buttonArea} ref={(val): any => this.menuButtonElement = val}> iconProps={{ iconName: 'info' }}
<IconButton onClick={isCalloutVisible ? this.onDismiss : this.onShow}
iconProps={{ iconName: 'info' }} />
onClick={isCalloutVisible ? this.onDismiss : this.onShow}
/>
</div>
{isCalloutVisible && (
<Callout
className={styles.callout}
ariaLabelledBy={this.labelId}
ariaDescribedBy={this.descriptionId}
role="alertdialog"
gapSpace={0}
target={this.menuButtonElement}
onDismiss={this.onDismiss}
setInitialFocus={true}
>
<div className={styles.header}>
<p className={styles.title} id={this.labelId}>Error</p>
</div>
<div className={styles.inner}>
<p className={styles.subtext} id={this.descriptionId}>
{EXPERIMENT.error}
</p>
<div className={styles.actions}>
<Link className={styles.link} onClick={this.isShowDrawer}>
Learn about
</Link>
</div>
</div>
</Callout>
)}
</div> </div>
: {isCalloutVisible && (
null <Callout
} className={styles.callout}
ariaLabelledBy={this.labelId}
ariaDescribedBy={this.descriptionId}
role='alertdialog'
gapSpace={0}
target={this.menuButtonElement}
onDismiss={this.onDismiss}
setInitialFocus={true}
>
<div className={styles.header}>
<p className={styles.title} id={this.labelId}>
Error
</p>
</div>
<div className={styles.inner}>
<p className={styles.subtext} id={this.descriptionId}>
{EXPERIMENT.error}
</p>
<div className={styles.actions}>
<Link className={styles.link} onClick={this.isShowDrawer}>
Learn about
</Link>
</div>
</div>
</Callout>
)}
</div>
) : null}
</Stack> </Stack>
</Stack> </Stack>
<ProgressBar <ProgressBar
who="Duration" who='Duration'
percent={percent} percent={percent}
description={execDuration} description={execDuration}
bgclass={EXPERIMENT.status} bgclass={EXPERIMENT.status}
maxString={`Max duration: ${maxDuration}`} maxString={`Max duration: ${maxDuration}`}
/> />
<ProgressBar <ProgressBar
who="Trial numbers" who='Trial numbers'
percent={bar2Percent} percent={bar2Percent}
description={bar2.toString()} description={bar2.toString()}
bgclass={EXPERIMENT.status} bgclass={EXPERIMENT.status}
maxString={`Max trial number: ${maxTrialNum}`} maxString={`Max trial number: ${maxTrialNum}`}
/> />
<Stack className="basic colorOfbasic mess" horizontal> <Stack className='basic colorOfbasic mess' horizontal>
<StackItem grow={50}> <StackItem grow={50}>
<p>Best metric</p> <p>Best metric</p>
<div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div> <div>{isNaN(bestAccuracy) ? 'N/A' : bestAccuracy.toFixed(6)}</div>
</StackItem> </StackItem>
<StackItem> <StackItem>
{isShowSucceedInfo && <MessageInfo className="info" typeInfo={typeInfo} info={info} />} {isShowSucceedInfo && <MessageInfo className='info' typeInfo={typeInfo} info={info} />}
</StackItem> </StackItem>
</Stack> </Stack>
<Stack horizontal horizontalAlign="space-between" className="mess"> <Stack horizontal horizontalAlign='space-between' className='mess'>
<span style={itemStyles} className="basic colorOfbasic"> <span style={itemStyles} className='basic colorOfbasic'>
<p>Spent</p> <p>Spent</p>
<div>{execDuration}</div> <div>{execDuration}</div>
</span> </span>
<span style={itemStyles} className="basic colorOfbasic"> <span style={itemStyles} className='basic colorOfbasic'>
<p>Remaining</p> <p>Remaining</p>
<div className="time">{remaining}</div> <div className='time'>{remaining}</div>
</span> </span>
<span style={itemStyles}> <span style={itemStyles}>
{/* modify concurrency */} {/* modify concurrency */}
<TooltipHost content={CONCURRENCYTOOLTIP}> <TooltipHost content={CONCURRENCYTOOLTIP}>
<p className="cursor">Concurrency<span className="progress-info">{infoIcon}</span></p> <p className='cursor'>
Concurrency<span className='progress-info'>{infoIcon}</span>
</p>
</TooltipHost> </TooltipHost>
<ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} /> <ConcurrencyInput value={this.props.concurrency} updateValue={this.editTrialConcurrency} />
</span> </span>
<span style={itemStyles} className="basic colorOfbasic"></span> <span style={itemStyles} className='basic colorOfbasic'></span>
</Stack> </Stack>
<Stack horizontal horizontalAlign="space-between" className="mess"> <Stack horizontal horizontalAlign='space-between' className='mess'>
<div style={itemStyles} className="basic colorOfbasic"> <div style={itemStyles} className='basic colorOfbasic'>
<p>Running</p> <p>Running</p>
<div>{count.get('RUNNING')}</div> <div>{count.get('RUNNING')}</div>
</div> </div>
<div style={itemStyles} className="basic colorOfbasic"> <div style={itemStyles} className='basic colorOfbasic'>
<p>Succeeded</p> <p>Succeeded</p>
<div>{count.get('SUCCEEDED')}</div> <div>{count.get('SUCCEEDED')}</div>
</div> </div>
<div style={itemStyles} className="basic"> <div style={itemStyles} className='basic'>
<p>Stopped</p> <p>Stopped</p>
<div>{stoppedCount}</div> <div>{stoppedCount}</div>
</div> </div>
<div style={itemStyles} className="basic"> <div style={itemStyles} className='basic'>
<p>Failed</p> <p>Failed</p>
<div>{count.get('FAILED')}</div> <div>{count.get('FAILED')}</div>
</div> </div>
</Stack> </Stack>
{/* learn about click -> default active key is dispatcher. */} {/* learn about click -> default active key is dispatcher. */}
{isShowLogDrawer ? ( {isShowLogDrawer ? <LogDrawer closeDrawer={this.closeDrawer} activeTab='dispatcher' /> : null}
<LogDrawer
closeDrawer={this.closeDrawer}
activeTab="dispatcher"
/>
) : null}
</Stack> </Stack>
); );
} }
} }
export default Progressed; export default Progressed;
src/webui/src/components/overview/ProgressItem.tsx
View file @ e2d8cc1b
...@@ -10,10 +10,8 @@ interface ProItemProps { ...@@ -10,10 +10,8 @@ interface ProItemProps {
} }
class ProgressBar extends React.Component<ProItemProps, {}> { class ProgressBar extends React.Component<ProItemProps, {}> {
constructor(props: ProItemProps) { constructor(props: ProItemProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
...@@ -21,18 +19,19 @@ class ProgressBar extends React.Component<ProItemProps, {}> { ...@@ -21,18 +19,19 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
return ( return (
<div> <div>
<Stack horizontal className={`probar ${bgclass}`}> <Stack horizontal className={`probar ${bgclass}`}>
<div className="name">{who}</div> <div className='name'>{who}</div>
<div className="showProgress" style={{ width: '78%' }}> <div className='showProgress' style={{ width: '78%' }}>
<ProgressIndicator <ProgressIndicator barHeight={30} percentComplete={percent} />
barHeight={30} <Stack horizontal className='boundary'>
percentComplete={percent}
/>
<Stack horizontal className="boundary">
<StackItem grow={30}>0</StackItem> <StackItem grow={30}>0</StackItem>
<StackItem className="right" grow={70}>{maxString}</StackItem> <StackItem className='right' grow={70}>
{maxString}
</StackItem>
</Stack> </Stack>
</div> </div>
<div className="description" style={{ width: '22%' }}>{description}</div> <div className='description' style={{ width: '22%' }}>
{description}
</div>
</Stack> </Stack>
<br /> <br />
</div> </div>
...@@ -40,4 +39,4 @@ class ProgressBar extends React.Component<ProItemProps, {}> { ...@@ -40,4 +39,4 @@ class ProgressBar extends React.Component<ProItemProps, {}> {
} }
} }
export default ProgressBar; export default ProgressBar;
\ No newline at end of file
src/webui/src/components/overview/SearchSpace.tsx
View file @ e2d8cc1b
...@@ -7,20 +7,18 @@ interface SearchspaceProps { ...@@ -7,20 +7,18 @@ interface SearchspaceProps {
} }
class SearchSpace extends React.Component<SearchspaceProps, {}> { class SearchSpace extends React.Component<SearchspaceProps, {}> {
constructor(props: SearchspaceProps) { constructor(props: SearchspaceProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
const { searchSpace } = this.props; const { searchSpace } = this.props;
return ( return (
<div className="searchSpace"> <div className='searchSpace'>
<MonacoEditor <MonacoEditor
height="361" height='361'
language="json" language='json'
theme="vs-light" theme='vs-light'
value={JSON.stringify(searchSpace, null, 2)} value={JSON.stringify(searchSpace, null, 2)}
options={MONACO} options={MONACO}
/> />
...@@ -29,4 +27,4 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> { ...@@ -29,4 +27,4 @@ class SearchSpace extends React.Component<SearchspaceProps, {}> {
} }
} }
export default SearchSpace; export default SearchSpace;
\ No newline at end of file
src/webui/src/components/overview/SuccessTable.tsx
View file @ e2d8cc1b
...@@ -59,7 +59,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -59,7 +59,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
tooltipStr = ( tooltipStr = (
<div> <div>
<p>The experiment is running, please wait for the final metric patiently.</p> <p>The experiment is running, please wait for the final metric patiently.</p>
<div className="link">You could also find status of trial job with <span>{DETAILTABS}</span> button.</div> <div className='link'>
You could also find status of trial job with <span>{DETAILTABS}</span> button.
</div>
</div> </div>
); );
...@@ -73,7 +75,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -73,7 +75,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick onColumnClick: this.onColumnClick
}, { },
{
name: 'ID', name: 'ID',
key: 'id', key: 'id',
fieldName: 'id', fieldName: 'id',
...@@ -83,7 +86,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -83,7 +86,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
className: 'tableHead leftTitle', className: 'tableHead leftTitle',
data: 'string', data: 'string',
onColumnClick: this.onColumnClick onColumnClick: this.onColumnClick
}, { },
{
name: 'Duration', name: 'Duration',
key: 'duration', key: 'duration',
minWidth: 100, minWidth: 100,
...@@ -92,12 +96,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -92,12 +96,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
fieldName: 'duration', fieldName: 'duration',
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => { onRender: (item: any): React.ReactNode => (
return ( <div className='durationsty'>
<div className="durationsty"><div>{convertDuration(item.duration)}</div></div> <div>{convertDuration(item.duration)}</div>
); </div>
}, )
}, { },
{
name: 'Status', name: 'Status',
key: 'status', key: 'status',
minWidth: 140, minWidth: 140,
...@@ -105,11 +110,10 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -105,11 +110,10 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
isResizable: true, isResizable: true,
fieldName: 'status', fieldName: 'status',
onRender: (item: any): React.ReactNode => { onRender: (item: any): React.ReactNode => {
return ( return <div className={`${item.status} commonStyle`}>{item.status}</div>;
<div className={`${item.status} commonStyle`}>{item.status}</div>
);
} }
}, { },
{
name: 'Default metric', name: 'Default metric',
key: 'accuracy', key: 'accuracy',
fieldName: 'accuracy', fieldName: 'accuracy',
...@@ -119,15 +123,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -119,15 +123,13 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => { onRender: (item: any): React.ReactNode => {
return ( return <DefaultMetric trialId={item.id} />;
<DefaultMetric trialId={item.id} />
);
} }
} }
]; ];
componentDidUpdate(prevProps: SuccessTableProps): void { componentDidUpdate(prevProps: SuccessTableProps): void {
if(this.props.trialIds !== prevProps.trialIds){ if (this.props.trialIds !== prevProps.trialIds) {
const { trialIds } = this.props; const { trialIds } = this.props;
this.setState(() => ({ source: TRIALS.table(trialIds) })); this.setState(() => ({ source: TRIALS.table(trialIds) }));
} }
...@@ -135,20 +137,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -135,20 +137,20 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
render(): React.ReactNode { render(): React.ReactNode {
const { columns, source } = this.state; const { columns, source } = this.state;
const isNoneData = (source.length === 0) ? true : false; const isNoneData = source.length === 0 ? true : false;
return ( return (
<div id="succTable"> <div id='succTable'>
<DetailsList <DetailsList
columns={columns} columns={columns}
items={source} items={source}
setKey="set" setKey='set'
compact={true} compact={true}
onRenderRow={this.onRenderRow} onRenderRow={this.onRenderRow}
selectionMode={0} // close selector function selectionMode={0} // close selector function
className="succTable" className='succTable'
/> />
{isNoneData && <div className="succTable-tooltip">{this.tooltipStr}</div>} {isNoneData && <div className='succTable-tooltip'>{this.tooltipStr}</div>}
</div> </div>
); );
} }
......
src/webui/src/components/overview/Title1.tsx
View file @ e2d8cc1b
...@@ -5,13 +5,11 @@ import '../../static/style/overviewTitle.scss'; ...@@ -5,13 +5,11 @@ import '../../static/style/overviewTitle.scss';
export const Title1 = (): any => ( export const Title1 = (): any => (
<TitleContext.Consumer> <TitleContext.Consumer>
{ {(value): React.ReactNode => (
(value): React.ReactNode => ( <Stack horizontal className='panelTitle'>
<Stack horizontal className="panelTitle"> <img src={require(`../../static/img/icon/${value.icon}`)} alt='icon' />
<img src={require(`../../static/img/icon/${value.icon}`)} alt="icon" /> <span style={{ color: value.fontColor }}>{value.text}</span>
<span style={{ color: value.fontColor }}>{value.text}</span> </Stack>
</Stack> )}
)
}
</TitleContext.Consumer> </TitleContext.Consumer>
); );
\ No newline at end of file
src/webui/src/components/overview/TrialProfile.tsx
View file @ e2d8cc1b
...@@ -9,15 +9,19 @@ interface TrialInfoProps { ...@@ -9,15 +9,19 @@ interface TrialInfoProps {
} }
class TrialInfo extends React.Component<TrialInfoProps, {}> { class TrialInfo extends React.Component<TrialInfoProps, {}> {
constructor(props: TrialInfoProps) { constructor(props: TrialInfoProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
const blacklist = [ const blacklist = [
'id', 'logDir', 'startTime', 'endTime', 'id',
'experimentName', 'searchSpace', 'trainingServicePlatform' 'logDir',
'startTime',
'endTime',
'experimentName',
'searchSpace',
'trainingServicePlatform'
]; ];
const filter = (key: string, val: any): any => { const filter = (key: string, val: any): any => {
if (key === 'trialConcurrency') { if (key === 'trialConcurrency') {
...@@ -28,12 +32,12 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> { ...@@ -28,12 +32,12 @@ class TrialInfo extends React.Component<TrialInfoProps, {}> {
const profile = JSON.stringify(EXPERIMENT.profile, filter, 2); const profile = JSON.stringify(EXPERIMENT.profile, filter, 2);
return ( return (
<div className="profile"> <div className='profile'>
<MonacoEditor <MonacoEditor
width="100%" width='100%'
height="361" height='361'
language="json" language='json'
theme="vs-light" theme='vs-light'
value={profile} value={profile}
options={MONACO} options={MONACO}
/> />
......
src/webui/src/components/public-child/DefaultMetric.tsx
View file @ e2d8cc1b
...@@ -13,9 +13,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> { ...@@ -13,9 +13,7 @@ class DefaultMetric extends React.Component<DefaultMetricProps, {}> {
render(): React.ReactNode { render(): React.ReactNode {
const accuracy = TRIALS.getTrial(this.props.trialId).accuracy; const accuracy = TRIALS.getTrial(this.props.trialId).accuracy;
return ( return <div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>;
<div>{accuracy !== undefined ? formatAccuracy(accuracy) : '--'}</div>
);
} }
} }
......
src/webui/src/components/public-child/IntermediateVal.tsx
View file @ e2d8cc1b
...@@ -11,9 +11,7 @@ class IntermediateVal extends React.Component<IntermediateValProps, {}> { ...@@ -11,9 +11,7 @@ class IntermediateVal extends React.Component<IntermediateValProps, {}> {
} }
render(): React.ReactNode { render(): React.ReactNode {
return ( return <div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>;
<div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>
);
} }
} }
......
src/webui/src/components/public-child/LogPathChild.tsx
View file @ e2d8cc1b
...@@ -6,10 +6,8 @@ interface LogpathChildProps { ...@@ -6,10 +6,8 @@ interface LogpathChildProps {
} }
class LogPathChild extends React.Component<LogpathChildProps, {}> { class LogPathChild extends React.Component<LogpathChildProps, {}> {
constructor(props: LogpathChildProps) { constructor(props: LogpathChildProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
...@@ -17,16 +15,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> { ...@@ -17,16 +15,15 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
const isLink = /^http/gi.test(eachLogpath); const isLink = /^http/gi.test(eachLogpath);
return ( return (
<div className="logpath"> <div className='logpath'>
<span className="logName">{logName}</span> <span className='logName'>{logName}</span>
{ {isLink ? (
isLink <a className='logContent logHref' rel='noopener noreferrer' href={eachLogpath} target='_blank'>
? {eachLogpath}
<a className="logContent logHref" rel="noopener noreferrer" href={eachLogpath} target="_blank">{eachLogpath}</a> </a>
: ) : (
<span className="logContent">{eachLogpath}</span> <span className='logContent'>{eachLogpath}</span>
)}
}
</div> </div>
); );
} }
......
src/webui/src/components/public-child/MonacoEditor.tsx
View file @ e2d8cc1b
...@@ -10,7 +10,6 @@ interface MonacoEditorProps { ...@@ -10,7 +10,6 @@ interface MonacoEditorProps {
} }
class MonacoHTML extends React.Component<MonacoEditorProps, {}> { class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
public _isMonacoMount!: boolean; public _isMonacoMount!: boolean;
constructor(props: MonacoEditorProps) { constructor(props: MonacoEditorProps) {
...@@ -28,34 +27,25 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> { ...@@ -28,34 +27,25 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
render(): React.ReactNode { render(): React.ReactNode {
const { content, loading, height } = this.props; const { content, loading, height } = this.props;
return ( return (
<div className="just-for-log"> <div className='just-for-log'>
{ {loading ? (
loading <Spinner
? label='Wait, wait...'
<Spinner ariaLive='assertive'
label="Wait, wait..." labelPosition='right'
ariaLive="assertive" styles={{ root: { width: '100%', height: height } }}
labelPosition="right" >
styles={{ root: { width: '100%', height: height } }}
>
<MonacoEditor
width="100%"
height={height}
language="json"
value={content}
options={DRAWEROPTION}
/>
</Spinner>
:
<MonacoEditor <MonacoEditor
width="100%" width='100%'
height={height} height={height}
language="json" language='json'
value={content} value={content}
options={DRAWEROPTION} options={DRAWEROPTION}
/> />
} </Spinner>
) : (
<MonacoEditor width='100%' height={height} language='json' value={content} options={DRAWEROPTION} />
)}
</div> </div>
); );
} }
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ e2d8cc1b
...@@ -23,7 +23,6 @@ interface OpenRowState { ...@@ -23,7 +23,6 @@ interface OpenRowState {
} }
class OpenRow extends React.Component<OpenRowProps, OpenRowState> { class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
constructor(props: OpenRowProps) { constructor(props: OpenRowProps) {
super(props); super(props);
this.state = { this.state = {
...@@ -35,17 +34,17 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> { ...@@ -35,17 +34,17 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
hideMessageInfo = (): void => { hideMessageInfo = (): void => {
this.setState(() => ({ isHidenInfo: true })); this.setState(() => ({ isHidenInfo: true }));
} };
/** /**
* info: message content * info: message content
* typeInfo: message type: success | error... * typeInfo: message type: success | error...
* continuousTime: show time, 2000ms * continuousTime: show time, 2000ms
*/ */
getCopyStatus = (info: string, typeInfo: string): void => { getCopyStatus = (info: string, typeInfo: string): void => {
this.setState(() => ({ info, typeInfo, isHidenInfo: false })); this.setState(() => ({ info, typeInfo, isHidenInfo: false }));
setTimeout(this.hideMessageInfo, 2000); setTimeout(this.hideMessageInfo, 2000);
} };
copyParams = (trial: Trial): void => { copyParams = (trial: Trial): void => {
// get copy parameters // get copy parameters
...@@ -55,83 +54,79 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> { ...@@ -55,83 +54,79 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
} else { } else {
this.getCopyStatus('Failed !', 'error'); this.getCopyStatus('Failed !', 'error');
} }
} };
openTrialLog = (type: string): void => { openTrialLog = (type: string): void => {
window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`); window.open(`${MANAGER_IP}/trial-log/${this.props.trialId}/${type}`);
} };
render(): React.ReactNode { render(): React.ReactNode {
const { isHidenInfo, typeInfo, info } = this.state; const { isHidenInfo, typeInfo, info } = this.state;
const trialId = this.props.trialId; const trialId = this.props.trialId;
const trial = TRIALS.getTrial(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 ( return (
<Stack className="openRow"> <Stack className='openRow'>
<Stack className="openRowContent"> <Stack className='openRowContent'>
<Pivot> <Pivot>
<PivotItem headerText="Parameters" key="1" itemIcon="TestParameter"> <PivotItem headerText='Parameters' key='1' itemIcon='TestParameter'>
{ {trial.info.hyperParameters !== undefined ? (
trial.info.hyperParameters !== undefined <Stack id='description'>
? <Stack className='bgHyper'>
<Stack id="description"> <JSONTree
<Stack className="bgHyper"> hideRoot={true}
<JSONTree shouldExpandNode={(): boolean => true} // default expandNode
hideRoot={true} getItemString={(): null => null} // remove the {} items
shouldExpandNode={(): boolean => true} // default expandNode data={trial.description.parameters}
getItemString={(): null => null} // remove the {} items />
data={trial.description.parameters}
/>
</Stack>
<Stack horizontal className="copy">
<PrimaryButton
onClick={this.copyParams.bind(this, trial)}
text="Copy as json"
styles={{ root: { width: 128, marginRight: 10 } }}
/>
{/* copy success | failed message info */}
{!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
</Stack>
</Stack> </Stack>
: <Stack horizontal className='copy'>
<Stack className="logpath"> <PrimaryButton
<span className="logName">Error: </span> onClick={this.copyParams.bind(this, trial)}
<span className="error">{`This trial's parameters are not available.'`}</span> text='Copy as json'
styles={{ root: { width: 128, marginRight: 10 } }}
/>
{/* copy success | failed message info */}
{!isHidenInfo && <MessageInfo typeInfo={typeInfo} info={info} />}
</Stack> </Stack>
} </Stack>
) : (
<Stack className='logpath'>
<span className='logName'>Error: </span>
<span className='error'>{`This trial's parameters are not available.'`}</span>
</Stack>
)}
</PivotItem> </PivotItem>
<PivotItem headerText="Log" key="2" itemIcon="M365InvoicingLogo"> <PivotItem headerText='Log' key='2' itemIcon='M365InvoicingLogo'>
{ {// FIXME: this should not be handled in web UI side
// FIXME: this should not be handled in web UI side EXPERIMENT.trainingServicePlatform !== 'local' ? (
EXPERIMENT.trainingServicePlatform !== 'local' <PaiTrialLog
? logStr={logPathRow}
<PaiTrialLog id={trialId}
logStr={logPathRow} logCollection={EXPERIMENT.logCollectionEnabled}
id={trialId} />
logCollection={EXPERIMENT.logCollectionEnabled} ) : (
/> <div>
: <TrialLog logStr={logPathRow} id={trialId} />
<div> {/* view each trial log in drawer*/}
<TrialLog logStr={logPathRow} id={trialId} /> <div id='trialog'>
{/* view each trial log in drawer*/} <div className='copy' style={{ marginTop: 15 }}>
<div id="trialog"> <PrimaryButton
<div className="copy" style={{ marginTop: 15 }}> onClick={this.openTrialLog.bind(this, 'TRIAL_LOG')}
<PrimaryButton text='View trial log'
onClick={this.openTrialLog.bind(this, 'TRIAL_LOG')} />
text="View trial log" <PrimaryButton
/> onClick={this.openTrialLog.bind(this, 'TRIAL_ERROR')}
<PrimaryButton text='View trial error'
onClick={this.openTrialLog.bind(this, 'TRIAL_ERROR')} styles={{ root: { marginLeft: 15 } }}
text="View trial error" />
styles={{ root: { marginLeft: 15 } }}
/>
</div>
</div> </div>
</div> </div>
} </div>
)}
</PivotItem> </PivotItem>
</Pivot> </Pivot>
</Stack > </Stack>
</Stack> </Stack>
); );
} }
......
src/webui/src/components/public-child/PaiTrialChild.tsx
View file @ e2d8cc1b
...@@ -9,41 +9,30 @@ interface PaiTrialChildProps { ...@@ -9,41 +9,30 @@ interface PaiTrialChildProps {
} }
class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> { class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
constructor(props: PaiTrialChildProps) { constructor(props: PaiTrialChildProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
const { logString, id, logCollect } = this.props; const { logString, id, logCollect } = this.props;
return ( return (
<div> <div>
{ {logString === '' ? null : (
logString === '' <div>
? {logCollect ? (
null <a
: target='_blank'
<div> rel='noopener noreferrer'
{ href={`${DOWNLOAD_IP}/trial_${id}.log`}
logCollect style={{ marginRight: 10 }}
? >
<a Trial stdout
target="_blank" </a>
rel="noopener noreferrer" ) : (
href={`${DOWNLOAD_IP}/trial_${id}.log`} <LogPathChild eachLogpath={logString} logName='Trial stdout:' />
style={{ marginRight: 10 }} )}
> </div>
Trial stdout )}
</a>
:
<LogPathChild
eachLogpath={logString}
logName="Trial stdout:"
/>
}
</div>
}
</div> </div>
); );
} }
......
src/webui/src/components/public-child/PaiTrialLog.tsx
View file @ e2d8cc1b
...@@ -10,60 +10,42 @@ interface PaitrialLogProps { ...@@ -10,60 +10,42 @@ interface PaitrialLogProps {
} }
class PaitrialLog extends React.Component<PaitrialLogProps, {}> { class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
constructor(props: PaitrialLogProps) { constructor(props: PaitrialLogProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
const { logStr, id, logCollection } = this.props; const { logStr, id, logCollection } = this.props;
const isTwopath = logStr.indexOf(',') !== -1 const isTwopath = logStr.indexOf(',') !== -1 ? true : false;
?
true
:
false;
return ( return (
<div> <div>
<div> <div>
{ {isTwopath ? (
isTwopath <div>
? {logCollection ? (
<div> <div>
{ <a
logCollection target='_blank'
? rel='noopener noreferrer'
<div> href={`${DOWNLOAD_IP}/trial_${id}.log`}
<a style={{ marginRight: 10 }}
target="_blank" >
rel="noopener noreferrer" Trial stdout
href={`${DOWNLOAD_IP}/trial_${id}.log`} </a>
style={{ marginRight: 10 }} <a target='_blank' rel='noopener noreferrer' href={logStr.split(',')[1]}>
> NFS log
Trial stdout </a>
</a> </div>
<a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>NFS log</a> ) : (
</div> <div>
: <LogPathChild eachLogpath={logStr.split(',')[0]} logName='Trial stdout:' />
<div> <LogPathChild eachLogpath={logStr.split(',')[1]} logName='Log on NFS:' />
<LogPathChild </div>
eachLogpath={logStr.split(',')[0]} )}
logName="Trial stdout:" </div>
/> ) : (
<LogPathChild <PaiTrialChild logString={logStr} id={id} logCollect={logCollection} />
eachLogpath={logStr.split(',')[1]} )}
logName="Log on NFS:"
/>
</div>
}
</div>
:
<PaiTrialChild
logString={logStr}
id={id}
logCollect={logCollection}
/>
}
</div> </div>
</div> </div>
); );
......
src/webui/src/components/public-child/TrialLog.tsx
View file @ e2d8cc1b
...@@ -7,10 +7,8 @@ interface TrialLogProps { ...@@ -7,10 +7,8 @@ interface TrialLogProps {
} }
class TrialLog extends React.Component<TrialLogProps, {}> { class TrialLog extends React.Component<TrialLogProps, {}> {
constructor(props: TrialLogProps) { constructor(props: TrialLogProps) {
super(props); super(props);
} }
render(): React.ReactNode { render(): React.ReactNode {
...@@ -18,10 +16,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> { ...@@ -18,10 +16,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
return ( return (
<div> <div>
<LogPathChild <LogPathChild eachLogpath={logStr} logName='Log path:' />
eachLogpath={logStr}
logName="Log path:"
/>
</div> </div>
); );
} }
......
src/webui/src/components/stateless-component/NNItabs.tsx
View file @ e2d8cc1b
...@@ -2,25 +2,21 @@ import * as React from 'react'; ...@@ -2,25 +2,21 @@ import * as React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
const OVERVIEWTABS = ( const OVERVIEWTABS = (
<NavLink to={'/oview'} activeClassName="selected" className="common-tabs"> <NavLink to={'/oview'} activeClassName='selected' className='common-tabs'>
Overview Overview
</NavLink> </NavLink>
); );
const DETAILTABS = ( const DETAILTABS = (
<NavLink to={'/detail'} activeClassName="selected" className="common-tabs"> <NavLink to={'/detail'} activeClassName='selected' className='common-tabs'>
Trials detail Trials detail
</NavLink> </NavLink>
); );
const NNILOGO = ( const NNILOGO = (
<NavLink to={'/oview'}> <NavLink to={'/oview'}>
<img <img src={require('../../static/img/logo2.png')} alt='NNI logo' style={{ height: 40 }} />
src={require('../../static/img/logo2.png')}
alt="NNI logo"
style={{height: 40}}
/>
</NavLink> </NavLink>
); );
export { OVERVIEWTABS, DETAILTABS, NNILOGO }; export { OVERVIEWTABS, DETAILTABS, NNILOGO };
\ No newline at end of file
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ e2d8cc1b
...@@ -14,11 +14,11 @@ const EmptyGraph = { ...@@ -14,11 +14,11 @@ const EmptyGraph = {
}, },
xAxis: { xAxis: {
name: 'Trial', name: 'Trial',
type: 'category', type: 'category'
}, },
yAxis: { yAxis: {
name: 'Default metric', name: 'Default metric',
type: 'value', type: 'value'
} }
}; };
...@@ -29,7 +29,7 @@ interface DefaultPointProps { ...@@ -29,7 +29,7 @@ interface DefaultPointProps {
interface DefaultPointState { interface DefaultPointState {
bestCurveEnabled?: boolean | undefined; bestCurveEnabled?: boolean | undefined;
startY: number; // dataZoomY startY: number; // dataZoomY
endY: number; endY: number;
} }
...@@ -45,7 +45,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -45,7 +45,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => { loadDefault = (ev: React.MouseEvent<HTMLElement>, checked?: boolean): void => {
this.setState({ bestCurveEnabled: checked }); this.setState({ bestCurveEnabled: checked });
} };
shouldComponentUpdate(nextProps: DefaultPointProps): boolean { shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
return nextProps.visible; return nextProps.visible;
...@@ -54,31 +54,37 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -54,31 +54,37 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
metricDataZoom = (e: EventMap): void => { metricDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) { if (e.batch !== undefined) {
this.setState(() => ({ this.setState(() => ({
startY: (e.batch[0].start !== null ? e.batch[0].start : 0), startY: e.batch[0].start !== null ? e.batch[0].start : 0,
endY: (e.batch[0].end !== null ? e.batch[0].end : 100) endY: e.batch[0].end !== null ? e.batch[0].end : 100
})); }));
} }
} };
generateGraphConfig(maxSequenceId: number): any { generateGraphConfig(maxSequenceId: number): any {
const { startY, endY } = this.state; const { startY, endY } = this.state;
return { return {
grid: { grid: {
left: '8%', left: '8%'
}, },
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
enterable: true, enterable: true,
position: (point: number[], data: TooltipForAccuracy): number[] => ( position: (point: number[], data: TooltipForAccuracy): number[] => [
[(data.data[0] < maxSequenceId ? point[0] : (point[0] - 300)), 80] data.data[0] < maxSequenceId ? point[0] : point[0] - 300,
), 80
formatter: (data: TooltipForAccuracy): React.ReactNode => ( ],
formatter: (data: TooltipForAccuracy): React.ReactNode =>
'<div class="tooldetailAccuracy">' + '<div class="tooldetailAccuracy">' +
'<div>Trial No.: ' + data.data[0] + '</div>' + '<div>Trial No.: ' +
'<div>Default metric: ' + data.data[1] + '</div>' + data.data[0] +
'<div>Parameters: <pre>' + JSON.stringify(data.data[2], null, 4) + '</pre></div>' + '</div>' +
'<div>Default metric: ' +
data.data[1] +
'</div>' +
'<div>Parameters: <pre>' +
JSON.stringify(data.data[2], null, 4) +
'</pre></div>' +
'</div>' '</div>'
),
}, },
dataZoom: [ dataZoom: [
{ {
...@@ -92,27 +98,23 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -92,27 +98,23 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
], ],
xAxis: { xAxis: {
name: 'Trial', name: 'Trial',
type: 'category', type: 'category'
}, },
yAxis: { yAxis: {
name: 'Default metric', name: 'Default metric',
type: 'value', type: 'value',
scale: true, scale: true
}, },
series: undefined, series: undefined
}; };
} }
generateScatterSeries(trials: Trial[]): any { generateScatterSeries(trials: Trial[]): any {
const data = trials.map(trial => [ const data = trials.map(trial => [trial.sequenceId, trial.accuracy, trial.description.parameters]);
trial.sequenceId,
trial.accuracy,
trial.description.parameters,
]);
return { return {
symbolSize: 6, symbolSize: 6,
type: 'scatter', type: 'scatter',
data, data
}; };
} }
...@@ -124,7 +126,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -124,7 +126,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
const trial = trials[i]; const trial = trials[i];
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const delta = trial.accuracy! - best.accuracy!; 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) { if (better) {
data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]); data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
best = trial; best = trial;
...@@ -136,36 +138,33 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState> ...@@ -136,36 +138,33 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
return { return {
type: 'line', type: 'line',
lineStyle: { color: '#FF6600' }, lineStyle: { color: '#FF6600' },
data, data
}; };
} }
render(): React.ReactNode { render(): React.ReactNode {
const graph = this.generateGraph(); const graph = this.generateGraph();
const accNodata = (graph === EmptyGraph ? 'No data' : ''); const accNodata = graph === EmptyGraph ? 'No data' : '';
const onEvents = { 'dataZoom': this.metricDataZoom }; const onEvents = { dataZoom: this.metricDataZoom };
return ( return (
<div> <div>
<Stack horizontalAlign="end" className="default-metric"> <Stack horizontalAlign='end' className='default-metric'>
<Toggle label="Optimization curve" <Toggle label='Optimization curve' inlineLabel onChange={this.loadDefault} />
inlineLabel
onChange={this.loadDefault}
/>
</Stack> </Stack>
<div className="default-metric-graph"> <div className='default-metric-graph'>
<ReactEcharts <ReactEcharts
option={graph} option={graph}
style={{ style={{
width: '100%', width: '100%',
height: 402, height: 402,
margin: '0 auto', margin: '0 auto'
}} }}
theme="my_theme" theme='my_theme'
notMerge={true} // update now notMerge={true} // update now
onEvents={onEvents} onEvents={onEvents}
/> />
<div className="default-metric-noData">{accNodata}</div> <div className='default-metric-noData'>{accNodata}</div>
</div> </div>
</div> </div>
); );
......
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