Skip to content

GitLab

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