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

Remove final val in the intermediate result graph and fix layout style...

Remove final val in the intermediate result graph and fix layout style bug(table | search space | config) on desktop (#2111)
parent cdeafa63
...@@ -74,7 +74,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -74,7 +74,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
<Stack horizontal className="overMessage"> <Stack horizontal className="overMessage">
{/* status block */} {/* status block */}
<Stack.Item styles={{ root: { maxWidth: 440 } }} className="prograph overviewBoder cc"> <Stack.Item grow className="prograph overviewBoder cc">
<Title1 text="Status" icon="5.png" /> <Title1 text="Status" icon="5.png" />
<Progressed <Progressed
bestAccuracy={bestAccuracy} bestAccuracy={bestAccuracy}
...@@ -84,13 +84,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> { ...@@ -84,13 +84,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
/> />
</Stack.Item> </Stack.Item>
{/* experiment parameters search space tuner assessor... */} {/* experiment parameters search space tuner assessor... */}
<Stack.Item styles={{root: {width: 400}}} className="overviewBoder"> <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder">
<Title1 text="Search space" icon="10.png" /> <Title1 text="Search space" icon="10.png" />
<Stack className="experiment"> <Stack className="experiment">
<SearchSpace searchSpace={searchSpace} /> <SearchSpace searchSpace={searchSpace} />
</Stack> </Stack>
</Stack.Item> </Stack.Item>
<Stack.Item styles={{root: {width: 400}}}> <Stack.Item grow styles={{root: {width: 450}}}>
<Title1 text="Config" icon="4.png" /> <Title1 text="Config" icon="4.png" />
<Stack className="experiment"> <Stack className="experiment">
{/* the scroll bar all the trial profile in the searchSpace div*/} {/* the scroll bar all the trial profile in the searchSpace div*/}
......
...@@ -61,7 +61,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -61,7 +61,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
key: 'sequenceId', key: 'sequenceId',
fieldName: 'sequenceId', // required! fieldName: 'sequenceId', // required!
minWidth: 60, minWidth: 60,
maxWidth: 80, maxWidth: 120,
isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick onColumnClick: this.onColumnClick
}, { }, {
...@@ -69,7 +70,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -69,7 +70,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
key: 'id', key: 'id',
fieldName: 'id', fieldName: 'id',
minWidth: 80, minWidth: 80,
maxWidth: 150, maxWidth: 100,
isResizable: true,
className: 'tableHead leftTitle', className: 'tableHead leftTitle',
data: 'string', data: 'string',
onColumnClick: this.onColumnClick onColumnClick: this.onColumnClick
...@@ -77,7 +79,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -77,7 +79,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'Duration', name: 'Duration',
key: 'duration', key: 'duration',
minWidth: 100, minWidth: 100,
maxWidth: 150, maxWidth: 210,
isResizable: true,
fieldName: 'duration', fieldName: 'duration',
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -89,8 +92,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -89,8 +92,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
}, { }, {
name: 'Status', name: 'Status',
key: 'status', key: 'status',
minWidth: 100, minWidth: 140,
maxWidth: 150, maxWidth: 210,
isResizable: true,
fieldName: 'status', fieldName: 'status',
onRender: (item: any): React.ReactNode => { onRender: (item: any): React.ReactNode => {
return ( return (
...@@ -101,8 +105,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState> ...@@ -101,8 +105,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
name: 'Default metric', name: 'Default metric',
key: 'accuracy', key: 'accuracy',
fieldName: 'accuracy', fieldName: 'accuracy',
minWidth: 100, minWidth: 120,
maxWidth: 150, maxWidth: 360,
isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
onRender: (item: any): React.ReactNode => { onRender: (item: any): React.ReactNode => {
......
...@@ -31,7 +31,6 @@ echarts.registerTheme('my_theme', { ...@@ -31,7 +31,6 @@ echarts.registerTheme('my_theme', {
color: '#3c8dbc' color: '#3c8dbc'
}); });
interface TableListProps { interface TableListProps {
pageSize: number; pageSize: number;
tableSource: Array<TableRecord>; tableSource: Array<TableRecord>;
...@@ -142,7 +141,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -142,7 +141,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'sequenceId', key: 'sequenceId',
fieldName: 'sequenceId', fieldName: 'sequenceId',
minWidth: 80, minWidth: 80,
maxWidth: 120, maxWidth: 240,
className: 'tableHead', className: 'tableHead',
data: 'string', data: 'string',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -166,7 +165,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -166,7 +165,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'startTime', key: 'startTime',
fieldName: 'startTime', fieldName: 'startTime',
minWidth: 150, minWidth: 150,
maxWidth: 200, maxWidth: 400,
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -179,8 +178,8 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -179,8 +178,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
name: 'End Time', name: 'End Time',
key: 'endTime', key: 'endTime',
fieldName: 'endTime', fieldName: 'endTime',
minWidth: 150, minWidth: 200,
maxWidth: 200, maxWidth: 400,
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -194,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -194,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
key: 'duration', key: 'duration',
fieldName: 'duration', fieldName: 'duration',
minWidth: 150, minWidth: 150,
maxWidth: 200, maxWidth: 300,
isResizable: true, isResizable: true,
data: 'number', data: 'number',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -209,7 +208,7 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -209,7 +208,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
fieldName: 'status', fieldName: 'status',
className: 'tableStatus', className: 'tableStatus',
minWidth: 150, minWidth: 150,
maxWidth: 200, maxWidth: 250,
isResizable: true, isResizable: true,
data: 'string', data: 'string',
onColumnClick: this.onColumnClick, onColumnClick: this.onColumnClick,
...@@ -248,11 +247,13 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -248,11 +247,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
} }
// intermediateArr just store default val // intermediateArr just store default val
Object.keys(res.data).map(item => { Object.keys(res.data).map(item => {
const temp = parseMetrics(res.data[item].data); if(res.data[item].type === 'PERIODICAL'){
if (typeof temp === 'object') { const temp = parseMetrics(res.data[item].data);
intermediateArr.push(temp[intermediateKey]); if (typeof temp === 'object') {
} else { intermediateArr.push(temp[intermediateKey]);
intermediateArr.push(temp); } else {
intermediateArr.push(temp);
}
} }
}); });
const intermediate = intermediateGraphOption(intermediateArr, id); const intermediate = intermediateGraphOption(intermediateArr, id);
......
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