Skip to content

GitLab

Commit 56be400c authored by Lijiao's avatar Lijiao Committed by Yan Ni
Browse files

[webui] eslint fix (#1864)

parent f9580cd1
Hide whitespace changes
Inline Side-by-side
Showing with 284 additions and 260 deletions
src/webui/src/components/public-child/IntermediateVal.tsx
View file @ 56be400c
......@@ -10,7 +10,7 @@ class IntermediateVal extends React.Component<IntermediateValProps, {}> {
super(props);
}
render() {
render(): React.ReactNode {
return (
<div>{TRIALS.getTrial(this.props.trialId).formatLatestAccuracy()}</div>
);
......
src/webui/src/components/public-child/LogPath.tsx
View file @ 56be400c
......@@ -12,7 +12,7 @@ class LogPath extends React.Component<LogpathProps, {}> {
}
render() {
render(): React.ReactNode {
const { logStr } = this.props;
const isTwopath = logStr.indexOf(',') !== -1
?
......
src/webui/src/components/public-child/LogPathChild.tsx
View file @ 56be400c
......@@ -12,7 +12,7 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
}
render() {
render(): React.ReactNode {
const { eachLogpath, logName } = this.props;
const isLink = /^http/gi.test(eachLogpath);
......@@ -22,7 +22,7 @@ class LogPathChild extends React.Component<LogpathChildProps, {}> {
{
isLink
?
<a className="logContent logHref" href={eachLogpath} target="_blank">{eachLogpath}</a>
<a className="logContent logHref" rel="noopener noreferrer" href={eachLogpath} target="_blank">{eachLogpath}</a>
:
<span className="logContent">{eachLogpath}</span>
......
src/webui/src/components/public-child/MonacoEditor.tsx
View file @ 56be400c
......@@ -17,15 +17,15 @@ class MonacoHTML extends React.Component<MonacoEditorProps, {}> {
super(props);
}
componentDidMount() {
componentDidMount(): void {
this._isMonacoMount = true;
}
componentWillUnmount() {
componentWillUnmount(): void {
this._isMonacoMount = false;
}
render() {
render(): React.ReactNode{
const { content, loading, height } = this.props;
return (
<div className="just-for-log">
......
src/webui/src/components/public-child/OpenRow.tsx
View file @ 56be400c
......@@ -30,19 +30,19 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
};
}
showFormatModal = (trial: Trial) => {
showFormatModal = (trial: Trial): void => {
// get copy parameters
const params = JSON.stringify(trial.info.hyperParameters, null, 4);
// open modal with format string
this.setState({ isShowFormatModal: true, formatStr: params });
}
hideFormatModal = () => {
hideFormatModal = (): void => {
// close modal, destroy state format string data
this.setState({ isShowFormatModal: false, formatStr: '' });
}
copyParams = () => {
copyParams = (): void => {
// json format
const { formatStr } = this.state;
if (copy(formatStr)) {
......@@ -55,7 +55,7 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
this.hideFormatModal();
}
render() {
render(): React.ReactNode {
const { isShowFormatModal, formatStr } = this.state;
const trialId = this.props.trialId;
const trial = TRIALS.getTrial(trialId);
......@@ -73,10 +73,17 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
Trails for multiphase experiment will return a set of parameters,
we are listing the latest parameter in webportal.
<br />
For the entire parameter set, please refer to the following "
<a href={trialLink} target="_blank">{trialLink}</a>".
For the entire parameter set, please refer to the following &quot;
<a
href={trialLink}
rel="noopener noreferrer"
target="_blank"
style={{marginLeft: 2}}
>
{trialLink}
</a>&quot;
<br />
Current Phase: {multiProgress}.
Current Phase:{multiProgress}.
</Row>
:
<div />
......@@ -88,8 +95,8 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
<Row className="bgHyper">
<JSONTree
hideRoot={true}
shouldExpandNode={() => true} // default expandNode
getItemString={() => (<span />)} // remove the {} items
shouldExpandNode={(): boolean => true} // default expandNode
getItemString={(): any => (<span />)} // remove the {} items
data={trial.description.parameters}
/>
</Row>
......@@ -103,8 +110,8 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
</Row>
:
<Row className="logpath">
<span className="logName">Error: </span>
<span className="error">'This trial's parameters are not available.'</span>
<span className="logName" style={{marginRight: 2}}>Error:</span>
<span className="error">&apos;This trial&apos;s parameters are not available.&apos;</span>
</Row>
}
</TabPane>
......
src/webui/src/components/public-child/PaiTrialChild.tsx
View file @ 56be400c
......@@ -15,7 +15,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
}
render() {
render(): React.ReactNode {
const { logString, id, logCollect } = this.props;
return (
<div>
......@@ -30,6 +30,7 @@ class PaiTrialChild extends React.Component<PaiTrialChildProps, {}> {
?
<a
target="_blank"
rel="noopener noreferrer"
href={`${DOWNLOAD_IP}/trial_${id}.log`}
style={{ marginRight: 10 }}
>
......
src/webui/src/components/public-child/PaiTrialLog.tsx
View file @ 56be400c
......@@ -17,7 +17,7 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
}
render() {
render(): React.ReactNode {
const { logStr, id, logCollection } = this.props;
const isTwopath = logStr.indexOf(',') !== -1
?
......@@ -37,12 +37,13 @@ class PaitrialLog extends React.Component<PaitrialLogProps, {}> {
<Row>
<a
target="_blank"
rel="noopener noreferrer"
href={`${DOWNLOAD_IP}/trial_${id}.log`}
style={{ marginRight: 10 }}
>
Trial stdout
</a>
<a target="_blank" href={logStr.split(',')[1]}>hdfsLog</a>
<a target="_blank" rel="noopener noreferrer" href={logStr.split(',')[1]}>hdfsLog</a>
</Row>
:
<Row>
......
src/webui/src/components/public-child/TrialLog.tsx
View file @ 56be400c
......@@ -13,7 +13,7 @@ class TrialLog extends React.Component<TrialLogProps, {}> {
}
render() {
render(): React.ReactNode {
const { logStr } = this.props;
return (
......
src/webui/src/components/trial-detail/DefaultMetricPoint.tsx
View file @ 56be400c
......@@ -7,7 +7,20 @@ import { TooltipForAccuracy, EventMap } from '../../static/interface';
require('echarts/lib/chart/scatter');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
const EmptyGraph = {
grid: {
left: '8%'
},
xAxis: {
name: 'Trial',
type: 'category',
},
yAxis: {
name: 'Default metric',
type: 'value',
scale: true,
}
};
interface DefaultPointProps {
trialIds: string[];
visible: boolean;
......@@ -30,15 +43,55 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
};
}
loadDefault = (checked: boolean) => {
loadDefault = (checked: boolean): void => {
this.setState({ bestCurveEnabled: checked });
}
shouldComponentUpdate(nextProps: DefaultPointProps, nextState: DefaultPointState) {
shouldComponentUpdate(nextProps: DefaultPointProps): boolean {
return nextProps.visible;
}
render() {
generateScatterSeries = (trials: Trial[]): any => {
const data = trials.map(trial => [
trial.sequenceId,
trial.accuracy,
trial.description.parameters,
]);
return {
symbolSize: 6,
type: 'scatter',
data,
};
}
generateBestCurveSeries = (trials: Trial[]): any => {
let best = trials[0];
const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
for (let i = 1; i < trials.length; i++) {
const trial = trials[i];
if (trial.accuracy !== undefined) {
if (best.accuracy !== undefined) {
const delta = trial.accuracy - best.accuracy;
const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
if (better) {
data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
best = trial;
} else {
data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
}
}
}
}
return {
type: 'line',
lineStyle: { color: '#FF6600' },
data,
};
}
render(): React.ReactNode {
const graph = this.generateGraph();
const accNodata = (graph === EmptyGraph ? 'No data' : '');
const onEvents = { 'dataZoom': this.metricDataZoom };
......@@ -67,21 +120,21 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
);
}
private generateGraph() {
private generateGraph(): any {
const trials = TRIALS.getTrials(this.props.trialIds).filter(trial => trial.sortable);
if (trials.length === 0) {
return EmptyGraph;
}
const graph = this.generateGraphConfig(trials[trials.length - 1].sequenceId);
if (this.state.bestCurveEnabled) {
(graph as any).series = [generateBestCurveSeries(trials), generateScatterSeries(trials)];
(graph as any).series = [this.generateBestCurveSeries(trials), this.generateScatterSeries(trials)];
} else {
(graph as any).series = [generateScatterSeries(trials)];
(graph as any).series = [this.generateScatterSeries(trials)];
}
return graph;
}
private generateGraphConfig(maxSequenceId: number) {
private generateGraphConfig(maxSequenceId: number): any {
const { startY, endY } = this.state;
return {
grid: {
......@@ -90,10 +143,10 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
tooltip: {
trigger: 'item',
enterable: true,
position: (point: Array<number>, data: TooltipForAccuracy) => (
position: (point: number[], data: TooltipForAccuracy): number[] => (
[(data.data[0] < maxSequenceId ? point[0] : (point[0] - 300)), 80]
),
formatter: (data: TooltipForAccuracy) => (
formatter: (data: TooltipForAccuracy): any => (
'<div class="tooldetailAccuracy">' +
'<div>Trial No.: ' + data.data[0] + '</div>' +
'<div>Default metric: ' + data.data[1] + '</div>' +
......@@ -124,7 +177,7 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
};
}
private metricDataZoom = (e: EventMap) => {
private metricDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) {
this.setState(() => ({
startY: (e.batch[0].start !== null ? e.batch[0].start : 0),
......@@ -134,55 +187,4 @@ class DefaultPoint extends React.Component<DefaultPointProps, DefaultPointState>
}
}
const EmptyGraph = {
grid: {
left: '8%'
},
xAxis: {
name: 'Trial',
type: 'category',
},
yAxis: {
name: 'Default metric',
type: 'value',
scale: true,
}
};
function generateScatterSeries(trials: Trial[]) {
const data = trials.map(trial => [
trial.sequenceId,
trial.accuracy,
trial.description.parameters,
]);
return {
symbolSize: 6,
type: 'scatter',
data,
};
}
function generateBestCurveSeries(trials: Trial[]) {
let best = trials[0];
const data = [[best.sequenceId, best.accuracy, best.description.parameters]];
for (let i = 1; i < trials.length; i++) {
const trial = trials[i];
const delta = trial.accuracy! - best.accuracy!;
const better = (EXPERIMENT.optimizeMode === 'minimize') ? (delta < 0) : (delta > 0);
if (better) {
data.push([trial.sequenceId, trial.accuracy, trial.description.parameters]);
best = trial;
} else {
data.push([trial.sequenceId, best.accuracy, trial.description.parameters]);
}
}
return {
type: 'line',
lineStyle: { color: '#FF6600' },
data,
};
}
export default DefaultPoint;
src/webui/src/components/trial-detail/Duration.tsx
View file @ 56be400c
......@@ -8,7 +8,7 @@ require('echarts/lib/component/title');
interface Runtrial {
trialId: Array<string>;
trialTime: Array<number>;
trialTime: number[];
}
interface DurationProps {
......@@ -32,7 +32,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
};
}
getOption = (dataObj: Runtrial) => {
getOption = (dataObj: Runtrial): any => {
const { startDuration, endDuration } = this.state;
return {
tooltip: {
......@@ -73,10 +73,10 @@ class Duration extends React.Component<DurationProps, DurationState> {
};
}
drawDurationGraph = (source: Array<TableObj>) => {
drawDurationGraph = (source: Array<TableObj>): any => {
// why this function run two times when props changed?
const trialId: Array<string> = [];
const trialTime: Array<number> = [];
const trialTime: number[] = [];
const trialRun: Array<Runtrial> = [];
const trialJobs = source.filter(filterDuration);
Object.keys(trialJobs).map(item => {
......@@ -91,7 +91,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
return this.getOption(trialRun[0]);
}
shouldComponentUpdate(nextProps: DurationProps, nextState: DurationState) {
shouldComponentUpdate(nextProps: DurationProps): boolean {
const { whichGraph, source } = nextProps;
if (whichGraph === '3') {
......@@ -116,7 +116,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
return false;
}
render() {
render(): React.ReactNode {
const { source } = this.props;
const graph = this.drawDurationGraph(source);
......@@ -134,7 +134,7 @@ class Duration extends React.Component<DurationProps, DurationState> {
);
}
private durationDataZoom = (e: EventMap) => {
private durationDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) {
this.setState(() => ({
startDuration: (e.batch[0].start !== null ? e.batch[0].start : 0),
......
src/webui/src/components/trial-detail/Intermediate.tsx
View file @ 56be400c
......@@ -46,7 +46,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
};
}
drawIntermediate = (source: Array<TableObj>) => {
drawIntermediate = (source: Array<TableObj>): void => {
if (source.length > 0) {
this.setState({
length: source.length,
......@@ -68,7 +68,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
const legend: Array<string> = [];
// max length
const length = trialIntermediate[0].data.length;
const xAxis: Array<number> = [];
const xAxis: number[] = [];
Object.keys(trialIntermediate).map(item => {
const temp = trialIntermediate[item];
legend.push(temp.name);
......@@ -80,14 +80,14 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
tooltip: {
trigger: 'item',
enterable: true,
position: function (point: Array<number>, data: TooltipForIntermediate) {
position: function (point: number[], data: TooltipForIntermediate): number[] {
if (data.dataIndex < length / 2) {
return [point[0], 80];
} else {
return [point[0] - 300, 80];
}
},
formatter: function (data: TooltipForIntermediate) {
formatter: function (data: TooltipForIntermediate): any {
const trialId = data.seriesName;
let obj = {};
const temp = trialIntermediate.find(key => key.name === trialId);
......@@ -154,7 +154,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
}
// confirm btn function [filter data]
filterLines = () => {
filterLines = (): void => {
const filterSource: Array<TableObj> = [];
this.setState({ isLoadconfirmBtn: true }, () => {
const { source } = this.props;
......@@ -195,19 +195,19 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
});
}
switchTurn = (checked: boolean) => {
switchTurn = (checked: boolean): void => {
this.setState({ isFilter: checked });
if (checked === false) {
this.drawIntermediate(this.props.source);
}
}
componentDidMount() {
componentDidMount(): void {
const { source } = this.props;
this.drawIntermediate(source);
}
componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState) {
componentWillReceiveProps(nextProps: IntermediateProps, nextState: IntermediateState): void {
const { isFilter, filterSource } = nextState;
const { whichGraph, source } = nextProps;
......@@ -226,7 +226,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
}
}
shouldComponentUpdate(nextProps: IntermediateProps, nextState: IntermediateState) {
shouldComponentUpdate(nextProps: IntermediateProps, nextState: IntermediateState): boolean {
const { whichGraph, source } = nextProps;
const beforeGraph = this.props.whichGraph;
if (whichGraph === '4') {
......@@ -271,7 +271,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
return false;
}
render() {
render(): React.ReactNode {
const { interSource, isLoadconfirmBtn, isFilter } = this.state;
const IntermediateEvents = { 'dataZoom': this.intermediateDataZoom };
return (
......@@ -285,18 +285,18 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
<span className="filter-x"># Intermediate result</span>
<input
// placeholder="point"
ref={input => this.pointInput = input}
ref={(input): any => this.pointInput = input}
className="strange"
/>
<span>Metric range</span>
<input
// placeholder="range"
ref={input => this.minValInput = input}
ref={(input): any => this.minValInput = input}
/>
<span className="hyphen">-</span>
<input
// placeholder="range"
ref={input => this.maxValInput = input}
ref={(input): any => this.maxValInput = input}
/>
<Button
type="primary"
......@@ -330,7 +330,7 @@ class Intermediate extends React.Component<IntermediateProps, IntermediateState>
);
}
private intermediateDataZoom = (e: EventMap) => {
private intermediateDataZoom = (e: EventMap): void => {
if (e.batch !== undefined) {
this.setState(() => ({
startMediaY: (e.batch[0].start !== null ? e.batch[0].start : 0),
......
src/webui/src/components/trial-detail/Para.tsx
View file @ 56be400c
......@@ -76,13 +76,13 @@ class Para extends React.Component<ParaProps, ParaState> {
getParallelAxis =
(
dimName: Array<string>, parallelAxis: Array<Dimobj>,
accPara: Array<number>, eachTrialParams: Array<string>,
accPara: number[], eachTrialParams: Array<string>,
lengthofTrials: number
) => {
): void => {
// get data for every lines. if dim is choice type, number -> toString()
const paraYdata: number[][] = [];
Object.keys(eachTrialParams).map(item => {
let temp: Array<number> = [];
const temp: number[] = [];
for (let i = 0; i < dimName.length; i++) {
if ('type' in parallelAxis[i]) {
temp.push(eachTrialParams[item][dimName[i]].toString());
......@@ -122,11 +122,11 @@ class Para extends React.Component<ParaProps, ParaState> {
this.setState({ paraBack: paraData });
}
hyperParaPic = (source: Array<TableObj>, searchSpace: string) => {
hyperParaPic = (source: Array<TableObj>, searchSpace: string): void => {
// filter succeed trials [{}, {}, {}]
const dataSource = source.filter(filterByStatus);
const lenOfDataSource: number = dataSource.length;
const accPara: Array<number> = [];
const accPara: number[] = [];
// specific value array
const eachTrialParams: Array<string> = [];
// experiment interface search space obj
......@@ -148,6 +148,7 @@ class Para extends React.Component<ParaProps, ParaState> {
if (isNested === false) {
for (i; i < dimName.length; i++) {
const searchKey = searchRange[dimName[i]];
const data: Array<string> = [];
switch (searchKey._type) {
case 'uniform':
case 'quniform':
......@@ -167,7 +168,6 @@ class Para extends React.Component<ParaProps, ParaState> {
});
break;
case 'choice':
const data: Array<string> = [];
for (let j = 0; j < searchKey._value.length; j++) {
data.push(searchKey._value[j].toString());
}
......@@ -220,11 +220,10 @@ class Para extends React.Component<ParaProps, ParaState> {
} else {
for (i; i < dimName.length; i++) {
const searchKey = searchRange[dimName[i]];
const data: Array<string> = [];
switch (searchKey._type) {
case 'choice':
const data: Array<string> = [];
let j = 0;
for (j; j < searchKey._value.length; j++) {
for (let j = 0; j < searchKey._value.length; j++) {
const item = searchKey._value[j];
Object.keys(item).map(key => {
if (key !== '_name' && key !== '_type') {
......@@ -292,7 +291,7 @@ class Para extends React.Component<ParaProps, ParaState> {
show: true
},
axisLabel: {
formatter: function (value?: string) {
formatter: function (value?: string): string | null {
if (value !== undefined) {
const length = value.length;
if (length > 16) {
......@@ -340,7 +339,7 @@ class Para extends React.Component<ParaProps, ParaState> {
if (isNested !== false) {
eachTrialParams.forEach(element => {
Object.keys(element).forEach(key => {
let item = element[key];
const item = element[key];
if (typeof item === 'object') {
Object.keys(item).forEach(index => {
if (index !== '_name') {
......@@ -363,16 +362,14 @@ class Para extends React.Component<ParaProps, ParaState> {
}
// get percent value number
percentNum = (value: string) => {
percentNum = (value: string): void => {
let vals = parseFloat(value);
this.setState({ percent: vals }, () => {
this.reInit();
});
const vals = parseFloat(value);
this.setState({ percent: vals }, () => { this.reInit(); });
}
// deal with response data into pic data
getOption = (dataObj: ParaObj, lengthofTrials: number) => {
getOption = (dataObj: ParaObj, lengthofTrials: number): void => {
// dataObj [[y1], [y2]... [default metric]]
const { max, min } = this.state;
const parallelAxis = dataObj.parallelAxis;
......@@ -407,7 +404,7 @@ class Para extends React.Component<ParaProps, ParaState> {
show: true
},
axisLabel: {
formatter: function (value: string) {
formatter: function (value: string): string {
const length = value.length;
if (length > 16) {
const temp = value.split('');
......@@ -442,16 +439,16 @@ class Para extends React.Component<ParaProps, ParaState> {
}
// get swap parallel axis
getSwapArr = (value: Array<string>) => {
getSwapArr = (value: Array<string>): void => {
this.setState({ swapAxisArr: value });
}
reInit = () => {
reInit = (): void => {
const { dataSource, expSearchSpace } = this.props;
this.hyperParaPic(dataSource, expSearchSpace);
}
swapReInit = () => {
swapReInit = (): void => {
const { clickCounts, succeedRenderCount } = this.state;
const val = clickCounts + 1;
this.setState({ isLoadConfirm: true, clickCounts: val, });
......@@ -509,12 +506,12 @@ class Para extends React.Component<ParaProps, ParaState> {
});
}
sortDimY = (a: Dimobj, b: Dimobj) => {
sortDimY = (a: Dimobj, b: Dimobj): number => {
return a.dim - b.dim;
}
// deal with after swap data into pic
swapGraph = (paraBack: ParaObj, swapAxisArr: string[]) => {
swapGraph = (paraBack: ParaObj, swapAxisArr: string[]): void => {
const paralDim = paraBack.parallelAxis;
const paraData = paraBack.data;
let temp: number;
......@@ -563,18 +560,18 @@ class Para extends React.Component<ParaProps, ParaState> {
});
}
componentDidMount() {
componentDidMount(): void {
this.reInit();
}
componentWillReceiveProps(nextProps: ParaProps) {
componentWillReceiveProps(nextProps: ParaProps): void {
const { dataSource, expSearchSpace, whichGraph } = nextProps;
if (whichGraph === '2') {
this.hyperParaPic(dataSource, expSearchSpace);
}
}
shouldComponentUpdate(nextProps: ParaProps, nextState: ParaState) {
shouldComponentUpdate(nextProps: ParaProps, nextState: ParaState): boolean {
const { whichGraph } = nextProps;
const beforeGraph = this.props.whichGraph;
......@@ -601,7 +598,7 @@ class Para extends React.Component<ParaProps, ParaState> {
return false;
}
render() {
render(): React.ReactNode {
const { option, paraNodata, dimName, isLoadConfirm } = this.state;
return (
<Row className="parameter">
......
src/webui/src/components/trial-detail/TableList.tsx
View file @ 56be400c
......@@ -55,6 +55,95 @@ interface ColumnIndex {
index: number;
}
const AccuracyColumnConfig: ColumnProps<TableRecord> = {
title: 'Default metric',
className: 'leftTitle',
dataIndex: 'accuracy',
sorter: (a, b, sortOrder) => {
if (a.latestAccuracy === undefined) {
return sortOrder === 'ascend' ? 1 : -1;
} else if (b.latestAccuracy === undefined) {
return sortOrder === 'ascend' ? -1 : 1;
} else {
return a.latestAccuracy - b.latestAccuracy;
}
},
render: (text, record): React.ReactNode => <div>{record.formattedLatestAccuracy}</div>
};
const SequenceIdColumnConfig: ColumnProps<TableRecord> = {
title: 'Trial No.',
dataIndex: 'sequenceId',
className: 'tableHead',
sorter: (a, b) => a.sequenceId - b.sequenceId
};
const IdColumnConfig: ColumnProps<TableRecord> = {
title: 'ID',
dataIndex: 'id',
className: 'tableHead leftTitle',
sorter: (a, b) => a.id.localeCompare(b.id),
render: (text, record): React.ReactNode => (
<div>{record.id}</div>
)
};
const StartTimeColumnConfig: ColumnProps<TableRecord> = {
title: 'Start Time',
dataIndex: 'startTime',
sorter: (a, b) => a.startTime - b.startTime,
render: (text, record): React.ReactNode => (
<span>{formatTimestamp(record.startTime)}</span>
)
};
const EndTimeColumnConfig: ColumnProps<TableRecord> = {
title: 'End Time',
dataIndex: 'endTime',
sorter: (a, b, sortOrder) => {
if (a.endTime === undefined) {
return sortOrder === 'ascend' ? 1 : -1;
} else if (b.endTime === undefined) {
return sortOrder === 'ascend' ? -1 : 1;
} else {
return a.endTime - b.endTime;
}
},
render: (text, record): React.ReactNode => (
<span>{formatTimestamp(record.endTime, '--')}</span>
)
};
const DurationColumnConfig: ColumnProps<TableRecord> = {
title: 'Duration',
dataIndex: 'duration',
sorter: (a, b) => a.duration - b.duration,
render: (text, record): React.ReactNode => (
<span className="durationsty">{convertDuration(record.duration)}</span>
)
};
const StatusColumnConfig: ColumnProps<TableRecord> = {
title: 'Status',
dataIndex: 'status',
className: 'tableStatus',
render: (text, record): React.ReactNode => (
<span className={`${record.status} commonStyle`}>{record.status}</span>
),
sorter: (a, b) => a.status.localeCompare(b.status),
filters: trialJobStatus.map(status => ({ text: status, value: status })),
onFilter: (value, record) => (record.status === value)
};
const IntermediateCountColumnConfig: ColumnProps<TableRecord> = {
title: 'Intermediate result',
dataIndex: 'intermediateCount',
sorter: (a, b) => a.intermediateCount - b.intermediateCount,
render: (text, record): React.ReactNode => (
<span>{`#${record.intermediateCount}`}</span>
)
};
class TableList extends React.Component<TableListProps, TableListState> {
public intervalTrialLog = 10;
......@@ -80,7 +169,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
};
}
showIntermediateModal = async (id: string) => {
showIntermediateModal = async (id: string): Promise<void> => {
const res = await axios.get(`${MANAGER_IP}/metric-data/${id}`);
if (res.status === 200) {
const intermediateArr: number[] = [];
......@@ -113,7 +202,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
// intermediate button click -> intermediate graph for each trial
// support intermediate is dict
selectOtherKeys = (value: string) => {
selectOtherKeys = (value: string): void => {
const isShowDefault: boolean = value === 'default' ? true : false;
const { intermediateData, intermediateId } = this.state;
......@@ -143,20 +232,20 @@ class TableList extends React.Component<TableListProps, TableListState> {
});
}
hideIntermediateModal = () => {
hideIntermediateModal = (): void => {
this.setState({
modalVisible: false
});
}
hideShowColumnModal = () => {
hideShowColumnModal = (): void => {
this.setState({
isShowColumn: false
});
}
// click add column btn, just show the modal of addcolumn
addColumn = () => {
addColumn = (): void => {
// show user select check button
this.setState({
isShowColumn: true
......@@ -164,7 +253,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
// checkbox for coloumn
selectedColumn = (checkedValues: Array<string>) => {
selectedColumn = (checkedValues: Array<string>): void => {
// 9: because have nine common column,
// [Intermediate count, Start Time, End Time] is hidden by default
let count = 9;
......@@ -216,17 +305,17 @@ class TableList extends React.Component<TableListProps, TableListState> {
this.props.changeColumn(wantResult);
}
openRow = (record: TableRecord) => {
openRow = (record: TableRecord): any => {
return (
<OpenRow trialId={record.id} />
);
}
fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>) => {
fillSelectedRowsTostate = (selected: number[] | string[], selectedRows: Array<TableRecord>): void => {
this.setState({ selectRows: selectedRows, selectedRowKeys: selected });
}
// open Compare-modal
compareBtn = () => {
compareBtn = (): void => {
const { selectRows } = this.state;
if (selectRows.length === 0) {
......@@ -236,26 +325,26 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
// close Compare-modal
hideCompareModal = () => {
hideCompareModal = (): void => {
// close modal. clear select rows data, clear selected track
this.setState({ isShowCompareModal: false, selectedRowKeys: [], selectRows: [] });
}
// open customized trial modal
setCustomizedTrial = (trialId: string) => {
setCustomizedTrial = (trialId: string): void => {
this.setState({
isShowCustomizedModal: true,
copyTrialId: trialId
});
}
closeCustomizedTrial = () => {
closeCustomizedTrial = (): void => {
this.setState({
isShowCustomizedModal: false,
copyTrialId: ''
});
}
render() {
render(): React.ReactNode {
const { pageSize, columnList } = this.props;
const tableSource: Array<TableRecord> = JSON.parse(JSON.stringify(this.props.tableSource));
const { intermediateOption, modalVisible, isShowColumn,
......@@ -264,7 +353,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
} = this.state;
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selected: string[] | number[], selectedRows: Array<TableRecord>) => {
onChange: (selected: string[] | number[], selectedRows: Array<TableRecord>): void => {
this.fillSelectedRowsTostate(selected, selectedRows);
}
};
......@@ -341,7 +430,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
dataIndex: 'operation',
key: 'operation',
render: (text: string, record: TableRecord) => {
let trialStatus = record.status;
const trialStatus = record.status;
const flag: boolean = (trialStatus === 'RUNNING') ? false : true;
return (
<Row id="detail-button">
......@@ -407,15 +496,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
break;
case (cc):
// remove SEARCH_SPACE title
const realItem = item.replace(' (search space)', '');
// const realItem = item.replace(' (search space)', '');
showColumn.push({
title: realItem,
title: item.replace(' (search space)', ''),
dataIndex: item,
key: item,
render: (text: string, record: TableRecord) => {
const eachTrial = TRIALS.getTrial(record.id);
return (
<span>{eachTrial.description.parameters[realItem]}</span>
<span>{eachTrial.description.parameters[item.replace(' (search space)', '')]}</span>
);
},
});
......@@ -430,7 +519,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
<Row className="tableList">
<div id="tableList">
<Table
ref={(table: Table<TableRecord> | null) => this.tables = table}
ref={(table: Table<TableRecord> | null): any => this.tables = table}
columns={showColumn}
rowSelection={rowSelection}
expandedRowRender={this.openRow}
......@@ -509,95 +598,4 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
const SequenceIdColumnConfig: ColumnProps<TableRecord> = {
title: 'Trial No.',
dataIndex: 'sequenceId',
className: 'tableHead',
sorter: (a, b) => a.sequenceId - b.sequenceId
};
const IdColumnConfig: ColumnProps<TableRecord> = {
title: 'ID',
dataIndex: 'id',
className: 'tableHead leftTitle',
sorter: (a, b) => a.id.localeCompare(b.id),
render: (text, record) => (
<div>{record.id}</div>
)
};
const StartTimeColumnConfig: ColumnProps<TableRecord> = {
title: 'Start Time',
dataIndex: 'startTime',
sorter: (a, b) => a.startTime - b.startTime,
render: (text, record) => (
<span>{formatTimestamp(record.startTime)}</span>
)
};
const EndTimeColumnConfig: ColumnProps<TableRecord> = {
title: 'End Time',
dataIndex: 'endTime',
sorter: (a, b, sortOrder) => {
if (a.endTime === undefined) {
return sortOrder === 'ascend' ? 1 : -1;
} else if (b.endTime === undefined) {
return sortOrder === 'ascend' ? -1 : 1;
} else {
return a.endTime - b.endTime;
}
},
render: (text, record) => (
<span>{formatTimestamp(record.endTime, '--')}</span>
)
};
const DurationColumnConfig: ColumnProps<TableRecord> = {
title: 'Duration',
dataIndex: 'duration',
sorter: (a, b) => a.duration - b.duration,
render: (text, record) => (
<span className="durationsty">{convertDuration(record.duration)}</span>
)
};
const StatusColumnConfig: ColumnProps<TableRecord> = {
title: 'Status',
dataIndex: 'status',
className: 'tableStatus',
render: (text, record) => (
<span className={`${record.status} commonStyle`}>{record.status}</span>
),
sorter: (a, b) => a.status.localeCompare(b.status),
filters: trialJobStatus.map(status => ({ text: status, value: status })),
onFilter: (value, record) => (record.status === value)
};
const IntermediateCountColumnConfig: ColumnProps<TableRecord> = {
title: 'Intermediate result',
dataIndex: 'intermediateCount',
sorter: (a, b) => a.intermediateCount - b.intermediateCount,
render: (text, record) => (
<span>{`#${record.intermediateCount}`}</span>
)
};
const AccuracyColumnConfig: ColumnProps<TableRecord> = {
title: 'Default metric',
className: 'leftTitle',
dataIndex: 'accuracy',
sorter: (a, b, sortOrder) => {
if (a.latestAccuracy === undefined) {
return sortOrder === 'ascend' ? 1 : -1;
} else if (b.latestAccuracy === undefined) {
return sortOrder === 'ascend' ? -1 : 1;
} else {
return a.latestAccuracy - b.latestAccuracy;
}
},
render: (text, record) => (
<div>{record.formattedLatestAccuracy}</div>
)
};
export default TableList;
src/webui/src/registerServiceWorker.ts
View file @ 56be400c
......@@ -18,14 +18,14 @@ const isLocalhost = Boolean(
)
);
function registerValidSW(swUrl: string) {
function registerValidSW(swUrl: string): void {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
registration.onupdatefound = (): void => {
const installingWorker = registration.installing;
if (installingWorker) {
installingWorker.onstatechange = () => {
installingWorker.onstatechange = (): void => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
......@@ -49,14 +49,14 @@ function registerValidSW(swUrl: string) {
});
}
function checkValidServiceWorker(swUrl: string) {
function checkValidServiceWorker(swUrl: string): void {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type')!.indexOf('javascript') === -1
response.headers.get('content-type')!.indexOf('javascript') === -1// eslint-disable-line @typescript-eslint/no-non-null-assertion
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
......@@ -76,11 +76,11 @@ function checkValidServiceWorker(swUrl: string) {
});
}
export default function register() {
export default function register(): void {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(
process.env.PUBLIC_URL!,
process.env.PUBLIC_URL!, // eslint-disable-line @typescript-eslint/no-non-null-assertion
window.location.toString()
);
if (publicUrl.origin !== window.location.origin) {
......@@ -104,7 +104,7 @@ export default function register() {
}
}
export function unregister() {
export function unregister(): void {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
......
src/webui/src/static/function.ts
View file @ 56be400c
......@@ -3,7 +3,7 @@ import { message } from 'antd';
import { MANAGER_IP } from './const';
import { MetricDataRecord, FinalType, TableObj } from './interface';
const convertTime = (num: number) => {
const convertTime = (num: number): string => {
if (num <= 0) {
return '0';
}
......@@ -17,7 +17,7 @@ const convertTime = (num: number) => {
};
// trial's duration, accurate to seconds for example 10min 30s
const convertDuration = (num: number) => {
const convertDuration = (num: number): string => {
if (num < 1) {
return '0s';
}
......@@ -39,7 +39,7 @@ const convertDuration = (num: number) => {
// get final result value
// draw Accuracy point graph
const getFinalResult = (final?: MetricDataRecord[]) => {
const getFinalResult = (final?: MetricDataRecord[]): number => {
let acc;
let showDefault = 0;
if (final) {
......@@ -58,7 +58,7 @@ const getFinalResult = (final?: MetricDataRecord[]) => {
};
// get final result value // acc obj
const getFinal = (final?: MetricDataRecord[]) => {
const getFinal = (final?: MetricDataRecord[]): any => {
let showDefault: FinalType;
if (final) {
showDefault = JSON.parse(final[final.length - 1].data);
......@@ -72,7 +72,7 @@ const getFinal = (final?: MetricDataRecord[]) => {
};
// detail page table intermediate button
const intermediateGraphOption = (intermediateArr: number[], id: string) => {
const intermediateGraphOption = (intermediateArr: number[], id: string): any => {
const sequence: number[] = [];
const lengthInter = intermediateArr.length;
for (let i = 1; i <= lengthInter; i++) {
......@@ -108,7 +108,7 @@ const intermediateGraphOption = (intermediateArr: number[], id: string) => {
};
// kill job
const killJob = (key: number, id: string, status: string, updateList?: Function) => {
const killJob = (key: number, id: string, status: string, updateList?: Function): void => {
axios(`${MANAGER_IP}/trial-jobs/${id}`, {
method: 'DELETE',
headers: {
......@@ -138,16 +138,16 @@ const killJob = (key: number, id: string, status: string, updateList?: Function)
});
};
const filterByStatus = (item: TableObj) => {
const filterByStatus = (item: TableObj): any => {
return item.status === 'SUCCEEDED';
};
// a waittiong trial may havn't start time
const filterDuration = (item: TableObj) => {
const filterDuration = (item: TableObj): any => {
return item.status !== 'WAITING';
};
const downFile = (content: string, fileName: string) => {
const downFile = (content: string, fileName: string): void => {
const aTag = document.createElement('a');
const isEdge = navigator.userAgent.indexOf('Edge') !== -1 ? true : false;
const file = new Blob([content], { type: 'application/json' });
......
src/webui/src/static/interface.ts
View file @ 56be400c
......@@ -42,7 +42,7 @@ interface ErrorParameter {
interface Parameters {
parameters: ErrorParameter;
logPath?: string;
intermediate: Array<number>;
intermediate: number[];
multiProgress?: number;
}
......
src/webui/src/static/model/experiment.ts
View file @ 56be400c
......@@ -41,6 +41,7 @@ class Experiment {
if (!this.profileField) {
throw Error('Experiment profile not initialized');
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.profileField!;
}
......@@ -73,6 +74,7 @@ class Experiment {
if (!this.statusField) {
throw Error('Experiment status not initialized');
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.statusField!.status;
}
......@@ -80,6 +82,7 @@ class Experiment {
if (!this.statusField) {
throw Error('Experiment status not initialized');
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.statusField!.errors[0] || '';
}
}
......
src/webui/src/static/model/trial.ts
View file @ 56be400c
......@@ -19,10 +19,12 @@ class Trial implements TableObj {
if (!this.sortable || !otherTrial.sortable) {
return undefined;
}
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.finalAcc! - otherTrial.finalAcc!;
}
get info(): TrialJobInfo {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.infoField!;
}
......@@ -30,6 +32,7 @@ class Trial implements TableObj {
const ret: MetricDataRecord[] = [ ];
for (let i = 0; i < this.intermediates.length; i++) {
if (this.intermediates[i]) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
ret.push(this.intermediates[i]!);
} else {
break;
......@@ -66,12 +69,14 @@ class Trial implements TableObj {
get tableRecord(): TableRecord {
const endTime = this.info.endTime || new Date().getTime();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const duration = (endTime - this.info.startTime!) / 1000;
return {
key: this.info.id,
sequenceId: this.info.sequenceId,
id: this.info.id,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
startTime: this.info.startTime!,
endTime: this.info.endTime,
duration,
......@@ -97,6 +102,7 @@ class Trial implements TableObj {
get duration(): number {
const endTime = this.info.endTime || new Date().getTime();
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return (endTime - this.info.startTime!) / 1000;
}
......@@ -203,6 +209,7 @@ class Trial implements TableObj {
} else if (this.intermediates.length === 0) {
return '--';
} else {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const latest = this.intermediates[this.intermediates.length - 1]!;
return `${formatAccuracy(metricAccuracy(latest))} (LATEST)`;
}
......
src/webui/src/static/model/trialmanager.ts
View file @ 56be400c
......@@ -7,6 +7,7 @@ function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDat
const ret = new Map<string, MetricDataRecord[]>();
for (const metric of metrics) {
if (ret.has(metric.trialJobId)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
ret.get(metric.trialJobId)!.push(metric);
} else {
ret.set(metric.trialJobId, [ metric ]);
......@@ -35,14 +36,17 @@ class TrialManager {
}
public getTrial(trialId: string): Trial {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.trials.get(trialId)!;
}
public getTrials(trialIds: string[]): Trial[] {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return trialIds.map(trialId => this.trials.get(trialId)!);
}
public table(trialIds: string[]): TableRecord[] {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return trialIds.map(trialId => this.trials.get(trialId)!.tableRecord);
}
......@@ -61,6 +65,7 @@ class TrialManager {
}
public sort(): Trial[] {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
return this.filter(trial => trial.sortable).sort((trial1, trial2) => trial1.compareAccuracy(trial2)!);
}
......@@ -77,6 +82,7 @@ class TrialManager {
]);
for (const trial of this.trials.values()) {
if (trial.initialized()) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
cnt.set(trial.info.status, cnt.get(trial.info.status)! + 1);
}
}
......@@ -89,6 +95,7 @@ class TrialManager {
if (response.status === 200) {
for (const info of response.data as TrialJobInfo[]) {
if (this.trials.has(info.id)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
updated = this.trials.get(info.id)!.updateTrialJobInfo(info) || updated;
} else {
this.trials.set(info.id, new Trial(info, undefined));
......@@ -141,6 +148,7 @@ class TrialManager {
let updated = false;
for (const [ trialId, metrics ] of groupMetricsByTrial(allMetrics).entries()) {
if (this.trials.has(trialId)) {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const trial = this.trials.get(trialId)!;
updated = (latestOnly ? trial.updateLatestMetrics(metrics) : trial.updateMetrics(metrics)) || updated;
} else {
......
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