Skip to content

GitLab

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

Support nested experiment more friendly (#2554)

parent 16fd8a21
Hide whitespace changes
Inline Side-by-side
Showing with 107 additions and 65 deletions
src/webui/src/components/Modals/Compare.tsx
View file @ 0101f887
...@@ -5,7 +5,7 @@ import IntermediateVal from '../public-child/IntermediateVal'; ...@@ -5,7 +5,7 @@ import IntermediateVal from '../public-child/IntermediateVal';
import { TRIALS } from '../../static/datamodel'; import { TRIALS } from '../../static/datamodel';
import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme'; import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
import '../../static/style/compare.scss'; import '../../static/style/compare.scss';
import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface'; // eslint-disable-line no-unused-vars import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
// the modal of trial compare // the modal of trial compare
interface CompareProps { interface CompareProps {
......
src/webui/src/components/trial-detail/Duration.tsx
View file @ 0101f887
import * as React from 'react'; import * as React from 'react';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { TableObj, EventMap } from '../../static/interface'; // eslint-disable-line no-unused-vars import { TableObj, EventMap } from '../../static/interface';
import { filterDuration, convertDuration } from '../../static/function'; import { filterDuration, convertDuration } from '../../static/function';
import 'echarts/lib/chart/bar'; import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/tooltip';
......
src/webui/src/components/trial-detail/Para.tsx
View file @ 0101f887
...@@ -2,8 +2,8 @@ import * as React from 'react'; ...@@ -2,8 +2,8 @@ import * as React from 'react';
import ReactEcharts from 'echarts-for-react'; import ReactEcharts from 'echarts-for-react';
import { filterByStatus } from '../../static/function'; import { filterByStatus } from '../../static/function';
import { EXPERIMENT } from '../../static/datamodel'; import { EXPERIMENT } from '../../static/datamodel';
import { Stack, PrimaryButton, Dropdown, IDropdownOption, } from 'office-ui-fabric-react'; // eslint-disable-line no-unused-vars import { Stack, PrimaryButton, Dropdown, IDropdownOption } from 'office-ui-fabric-react';
import { ParaObj, Dimobj, TableObj } from '../../static/interface'; // eslint-disable-line no-unused-vars import { ParaObj, Dimobj, TableObj } from '../../static/interface';
import 'echarts/lib/chart/parallel'; import 'echarts/lib/chart/parallel';
import 'echarts/lib/component/tooltip'; import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title'; import 'echarts/lib/component/title';
...@@ -28,6 +28,8 @@ interface ParaState { ...@@ -28,6 +28,8 @@ interface ParaState {
// office-fabric-ui // office-fabric-ui
selectedItem?: { key: string | number | undefined }; // percent Selector selectedItem?: { key: string | number | undefined }; // percent Selector
swapyAxis?: string[]; // yAxis Selector swapyAxis?: string[]; // yAxis Selector
paraYdataNested: number[][];
isNested: false;
} }
interface ParaProps { interface ParaProps {
...@@ -68,7 +70,9 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -68,7 +70,9 @@ class Para extends React.Component<ParaProps, ParaState> {
succeedRenderCount: 10000000, succeedRenderCount: 10000000,
clickCounts: 1, clickCounts: 1,
isLoadConfirm: false, isLoadConfirm: false,
swapyAxis: [] swapyAxis: [],
paraYdataNested: [],
isNested: false
}; };
} }
...@@ -79,23 +83,29 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -79,23 +83,29 @@ class Para extends React.Component<ParaProps, ParaState> {
lengthofTrials: number lengthofTrials: number
): void => { ): void => {
// get data for every lines. if dim is choice type, number -> toString() // get data for every lines. if dim is choice type, number -> toString()
const paraYdata: number[][] = []; let paraYdata: number[][] = [];
Object.keys(eachTrialParams).map(item => { const { isNested } = this.state;
const temp: number[] = []; if (isNested === false) {
for (let i = 0; i < dimName.length; i++) { for (const item of eachTrialParams) {
if ('type' in parallelAxis[i]) { const temp: number[] = [];
temp.push(eachTrialParams[item][dimName[i]].toString()); for (let i = 0; i < dimName.length; i++) {
} else { if ('type' in parallelAxis[i]) {
// default metric temp.push(item[dimName[i]].toString());
temp.push(eachTrialParams[item][dimName[i]]); } else {
// default metric
temp.push(item[dimName[i]]);
}
} }
paraYdata.push(temp);
} }
paraYdata.push(temp); } else {
}); paraYdata = this.state.paraYdataNested;
}
// add acc // add acc
Object.keys(paraYdata).map(item => { Object.keys(paraYdata).map(item => {
paraYdata[item].push(accPara[item]); paraYdata[item].push(accPara[item]);
}); });
// according acc to sort ydata // sort to find top percent dataset // according acc to sort ydata // sort to find top percent dataset
if (paraYdata.length !== 0) { if (paraYdata.length !== 0) {
const len = paraYdata[0].length - 1; const len = paraYdata[0].length - 1;
...@@ -133,7 +143,7 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -133,7 +143,7 @@ class Para extends React.Component<ParaProps, ParaState> {
const lenOfDataSource: number = dataSource.length; const lenOfDataSource: number = dataSource.length;
const accPara: number[] = []; const accPara: number[] = [];
// specific value array // specific value array
const eachTrialParams: string[] = []; const eachTrialParams: Array<any> = [];
// experiment interface search space obj // experiment interface search space obj
const searchRange = searchSpace !== undefined ? JSON.parse(searchSpace) : ''; const searchRange = searchSpace !== undefined ? JSON.parse(searchSpace) : '';
// nest search space // nest search space
...@@ -144,13 +154,15 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -144,13 +154,15 @@ class Para extends React.Component<ParaProps, ParaState> {
return; return;
} }
}); });
const dimName = Object.keys(searchRange); let dimName: string[] = [];
this.setState({ dimName: dimName });
const parallelAxis: Array<Dimobj> = []; const parallelAxis: Array<Dimobj> = [];
// search space range and specific value [only number] // search space range and specific value [only number]
let i = 0; let i = 0;
const yAxisOrderList = new Map();
this.setState({ isNested: isNested });
if (isNested === false) { if (isNested === false) {
dimName = Object.keys(searchRange);
this.setState({ dimName: dimName });
for (i; i < dimName.length; i++) { for (i; i < dimName.length; i++) {
const data: string[] = []; const data: string[] = [];
const searchKey = searchRange[dimName[i]]; const searchKey = searchRange[dimName[i]];
...@@ -223,37 +235,25 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -223,37 +235,25 @@ class Para extends React.Component<ParaProps, ParaState> {
} }
} }
} else { } else {
for (i; i < dimName.length; i++) { for (const parallelAxisName in searchRange) {
const searchKey = searchRange[dimName[i]]; const data: any[] = [];
const data: string[] = []; dimName.push(parallelAxisName);
let j = 0;
switch (searchKey._type) { for (const choiceItem in searchRange[parallelAxisName]) {
case 'choice': if (choiceItem === '_value') {
for (j; j < searchKey._value.length; j++) { for (const item in searchRange[parallelAxisName][choiceItem]) {
const item = searchKey._value[j]; data.push(searchRange[parallelAxisName][choiceItem][item]._name);
Object.keys(item).map(key => {
if (key !== '_name' && key !== '_type') {
Object.keys(item[key]).map(index => {
if (index !== '_type') {
const realChoice = item[key][index];
Object.keys(realChoice).map(m => {
data.push(`${item._name}_${realChoice[m]}`);
});
}
});
}
});
} }
data.push('null'); yAxisOrderList.set(parallelAxisName, JSON.parse(JSON.stringify(data)));
parallelAxis.push({ parallelAxis.push({
dim: i, dim: i,
name: dimName[i],
type: 'category',
data: data, data: data,
name: parallelAxisName,
type: 'category',
boundaryGap: true, boundaryGap: true,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
type: 'dotted', // axis type,solid dashed dotted type: 'dotted', // axis type,solid，dashed，dotted
width: 1 width: 1
} }
}, },
...@@ -266,16 +266,44 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -266,16 +266,44 @@ class Para extends React.Component<ParaProps, ParaState> {
show: true, show: true,
interval: 0, interval: 0,
// rotate: 30 // rotate: 30
}, }
});
break;
default:
parallelAxis.push({
dim: i,
name: dimName[i]
}); });
i++;
for (const item in searchRange[parallelAxisName][choiceItem]) {
for (const key in searchRange[parallelAxisName][choiceItem][item]) {
if (key !== '_name') {
dimName.push(key);
parallelAxis.push({
dim: i,
data: searchRange[parallelAxisName][choiceItem][item][key]._value.concat('null'),
name: `${searchRange[parallelAxisName][choiceItem][item]._name}_${key}`,
type: 'category',
boundaryGap: true,
axisLine: {
lineStyle: {
type: 'dotted', // axis type,solid，dashed，dotted
width: 1
}
},
axisTick: {
show: true,
interval: 0,
alignWithLabel: true,
},
axisLabel: {
show: true,
interval: 0,
// rotate: 30
}
});
i++;
}
}
}
}
} }
} }
this.setState({ dimName: dimName });
} }
parallelAxis.push({ parallelAxis.push({
dim: i, dim: i,
...@@ -291,6 +319,7 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -291,6 +319,7 @@ class Para extends React.Component<ParaProps, ParaState> {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
parallel: { parallel: {
parallelAxisDefault: { parallelAxisDefault: {
tooltip: { tooltip: {
...@@ -332,7 +361,7 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -332,7 +361,7 @@ class Para extends React.Component<ParaProps, ParaState> {
} else { } else {
Object.keys(dataSource).map(item => { Object.keys(dataSource).map(item => {
const trial = dataSource[item]; const trial = dataSource[item];
eachTrialParams.push(trial.description.parameters || ''); eachTrialParams.push(trial.description.parameters);
// may be a succeed trial hasn't final result // may be a succeed trial hasn't final result
// all detail page may be break down if havn't if // all detail page may be break down if havn't if
if (trial.acc !== undefined) { if (trial.acc !== undefined) {
...@@ -341,22 +370,35 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -341,22 +370,35 @@ class Para extends React.Component<ParaProps, ParaState> {
} }
} }
}); });
// nested search space, deal data // nested search space, fill all yAxis data
if (isNested !== false) { if (isNested !== false) {
eachTrialParams.forEach(element => { const renderDataSource: Array<any> = [];
Object.keys(element).forEach(key => { for (const i in eachTrialParams) {
const item = element[key]; const eachTrialData: Array<any> = [];
if (typeof item === 'object') { for (const m in eachTrialParams[i]) {
Object.keys(item).forEach(index => { const eachTrialParamsObj = eachTrialParams[i][m];
if (index !== '_name') { for (const n in yAxisOrderList.get(m)) {
element[key] = `${item._name}_${item[index]}`; if (yAxisOrderList.get(m)[n] === eachTrialParamsObj._name) {
for (const index in eachTrialParamsObj) {
if (index !== '_name') {
eachTrialData.push(eachTrialParamsObj[index].toString());
}
if (eachTrialParamsObj[index] === 'Empty') {
eachTrialData.push('Empty');
}
}
} else {
if (yAxisOrderList.get(m)[n] === 'Empty') {
eachTrialData.push(eachTrialParamsObj._name.toString());
} else { } else {
element[key] = 'null'; eachTrialData.push('null');
} }
}); }
} }
}); }
}); renderDataSource.push(eachTrialData);
}
this.setState({ paraYdataNested: renderDataSource });
} }
// if not return final result // if not return final result
const maxVal = accPara.length === 0 ? 1 : Math.max(...accPara); const maxVal = accPara.length === 0 ? 1 : Math.max(...accPara);
...@@ -592,7 +634,7 @@ class Para extends React.Component<ParaProps, ParaState> { ...@@ -592,7 +634,7 @@ class Para extends React.Component<ParaProps, ParaState> {
} }
componentDidUpdate(prevProps: ParaProps): void { componentDidUpdate(prevProps: ParaProps): void {
if(this.props.dataSource !== prevProps.dataSource) { if (this.props.dataSource !== prevProps.dataSource) {
const { dataSource, expSearchSpace, whichGraph } = this.props; const { dataSource, expSearchSpace, whichGraph } = this.props;
if (whichGraph === 'Hyper-parameter') { if (whichGraph === 'Hyper-parameter') {
this.hyperParaPic(dataSource, expSearchSpace); this.hyperParaPic(dataSource, expSearchSpace);
......
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