Commit 97829ccd authored by Lijiao's avatar Lijiao Committed by Yan Ni
Browse files

Show intermediate results other keys in intermediate modal (#1196)

* Show intermediate other keys in intermediate modal

* delete Chinese notes
parent ac6aee81
......@@ -8,6 +8,7 @@ Click the tab "Overview".
* Support to download the experiment result.
* Support to export nni-manager and dispatcher log file.
* If you have any question, you can click "Feedback" to report it.
* If your experiment have more than 1000 trials, you can change the refresh interval on here.
![](../img/webui-img/over1.png)
* See good performance trials.
......@@ -58,6 +59,10 @@ Click the tab "Trials Detail" to see the status of the all trials. Specifically:
![](../img/webui-img/addColumn.png)
* If you want to compare some trials, you can select them and then click "Compare" to see the results.
![](../img/webui-img/compare.png)
* You can use the button named "Copy as python" to copy trial's parameters.
![](../img/webui-img/copyParameter.png)
......@@ -69,6 +74,6 @@ Click the tab "Trials Detail" to see the status of the all trials. Specifically:
* Kill: you can kill a job that status is running.
* Support to search for a specific trial.
* Intermediate Result Graph.
* Intermediate Result Graph: you can see default and other keys in this graph.
![](../img/intermediate.png)
![](../img/webui-img/intermediate.png)
docs/img/webui-img/addColumn.png

26.2 KB | W: | H:

docs/img/webui-img/addColumn.png

35.7 KB | W: | H:

docs/img/webui-img/addColumn.png
docs/img/webui-img/addColumn.png
docs/img/webui-img/addColumn.png
docs/img/webui-img/addColumn.png
  • 2-up
  • Swipe
  • Onion skin
docs/img/webui-img/copyParameter.png

33.5 KB | W: | H:

docs/img/webui-img/copyParameter.png

34.9 KB | W: | H:

docs/img/webui-img/copyParameter.png
docs/img/webui-img/copyParameter.png
docs/img/webui-img/copyParameter.png
docs/img/webui-img/copyParameter.png
  • 2-up
  • Swipe
  • Onion skin
docs/img/webui-img/detail-local.png

33 KB | W: | H:

docs/img/webui-img/detail-local.png

37.2 KB | W: | H:

docs/img/webui-img/detail-local.png
docs/img/webui-img/detail-local.png
docs/img/webui-img/detail-local.png
docs/img/webui-img/detail-local.png
  • 2-up
  • Swipe
  • Onion skin
docs/img/webui-img/detail-pai.png

22.1 KB | W: | H:

docs/img/webui-img/detail-pai.png

13.8 KB | W: | H:

docs/img/webui-img/detail-pai.png
docs/img/webui-img/detail-pai.png
docs/img/webui-img/detail-pai.png
docs/img/webui-img/detail-pai.png
  • 2-up
  • Swipe
  • Onion skin
docs/img/webui-img/over1.png

61.9 KB | W: | H:

docs/img/webui-img/over1.png

67.7 KB | W: | H:

docs/img/webui-img/over1.png
docs/img/webui-img/over1.png
docs/img/webui-img/over1.png
docs/img/webui-img/over1.png
  • 2-up
  • Swipe
  • Onion skin
import * as React from 'react';
import axios from 'axios';
import ReactEcharts from 'echarts-for-react';
import { Row, Table, Button, Popconfirm, Modal, Checkbox } from 'antd';
import { Row, Table, Button, Popconfirm, Modal, Checkbox, Select } from 'antd';
const Option = Select.Option;
const CheckboxGroup = Checkbox.Group;
import { MANAGER_IP, trialJobStatus, COLUMN, COLUMN_INDEX } from '../../static/const';
import { convertDuration, intermediateGraphOption, killJob } from '../../static/function';
......@@ -42,6 +43,9 @@ interface TableListState {
selectRows: Array<TableObj>;
isShowCompareModal: boolean;
selectedRowKeys: string[] | number[];
intermediateData: Array<object>; // a trial's intermediate results (include dict)
intermediateId: string;
intermediateOtherKeys: Array<string>;
}
interface ColumnIndex {
......@@ -67,7 +71,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
isShowCompareModal: false,
columnSelected: COLUMN,
selectRows: [],
selectedRowKeys: [] // after modal closed 清掉选择的痕迹
selectedRowKeys: [], // close selected trial message after modal closed
intermediateData: [],
intermediateId: '',
intermediateOtherKeys: []
};
}
......@@ -81,6 +88,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
const intermediateArr: number[] = [];
// support intermediate result is dict because the last intermediate result is
// final result in a succeed trial, it may be a dict.
// get intermediate result dict keys array
let otherkeys: Array<string> = ['default'];
if (res.data.length !== 0) {
otherkeys = Object.keys(JSON.parse(res.data[0].data));
}
// intermediateArr just store default val
Object.keys(res.data).map(item => {
const temp = JSON.parse(res.data[item].data);
if (typeof temp === 'object') {
......@@ -92,7 +105,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
const intermediate = intermediateGraphOption(intermediateArr, id);
if (this._isMounted) {
this.setState(() => ({
intermediateOption: intermediate
intermediateData: res.data, // store origin intermediate data for a trial
intermediateOption: intermediate,
intermediateOtherKeys: otherkeys,
intermediateId: id
}));
}
}
......@@ -104,6 +120,38 @@ class TableList extends React.Component<TableListProps, TableListState> {
}
}
selectOtherKeys = (value: string) => {
const isShowDefault: boolean = value === 'default' ? true : false;
const { intermediateData, intermediateId } = this.state;
const intermediateArr: number[] = [];
// just watch default key-val
if (isShowDefault === true) {
Object.keys(intermediateData).map(item => {
const temp = JSON.parse(intermediateData[item].data);
if (typeof temp === 'object') {
intermediateArr.push(temp[value]);
} else {
intermediateArr.push(temp);
}
});
} else {
Object.keys(intermediateData).map(item => {
const temp = JSON.parse(intermediateData[item].data);
if (typeof temp === 'object') {
intermediateArr.push(temp[value]);
}
});
}
const intermediate = intermediateGraphOption(intermediateArr, intermediateId);
// re-render
if (this._isMounted) {
this.setState(() => ({
intermediateOption: intermediate
}));
}
}
hideIntermediateModal = () => {
if (this._isMounted) {
this.setState({
......@@ -230,7 +278,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
const { entries, tableSource, updateList } = this.props;
const { intermediateOption, modalVisible, isShowColumn, columnSelected,
selectRows, isShowCompareModal, selectedRowKeys } = this.state;
selectRows, isShowCompareModal, selectedRowKeys, intermediateOtherKeys } = this.state;
const rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: (selected: string[] | number[], selectedRows: Array<TableObj>) => {
......@@ -475,6 +523,27 @@ class TableList extends React.Component<TableListProps, TableListState> {
destroyOnClose={true}
width="80%"
>
{
intermediateOtherKeys.length > 1
?
<Row className="selectKeys">
<Select
className="select"
defaultValue="default"
onSelect={this.selectOtherKeys}
>
{
Object.keys(intermediateOtherKeys).map(item => {
const keys = intermediateOtherKeys[item];
return <Option value={keys} key={item}>{keys}</Option>;
})
}
</Select>
</Row>
:
<div />
}
<ReactEcharts
option={intermediateOption}
style={{
......
......@@ -35,3 +35,13 @@ Button.mediateBtn{
margin: 0 32px;
}
/* each row's Intermediate btn -> Modal*/
.selectKeys{
/* intermediate result is dict, select box for keys */
.select{
width: 120px;
float: right;
margin-right: 10%;
}
}
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