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)

src/webui/src/components/Overview.tsx

@@ -74,7 +74,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
 
                 <Stack horizontal className="overMessage">
                     {/* 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" />
                         <Progressed
                             bestAccuracy={bestAccuracy}
@@ -84,13 +84,13 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                         />
                     </Stack.Item>
                     {/* 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" />
                         <Stack className="experiment">
                             <SearchSpace searchSpace={searchSpace} />
                         </Stack>
                     </Stack.Item>
-                    <Stack.Item styles={{root: {width: 400}}}>
+                    <Stack.Item grow styles={{root: {width: 450}}}>
                         <Title1 text="Config" icon="4.png" />
                         <Stack className="experiment">
                             {/* the scroll bar all the trial profile in the searchSpace div*/}

src/webui/src/components/overview/SuccessTable.tsx

@@ -61,7 +61,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             key: 'sequenceId',
             fieldName: 'sequenceId', // required!
             minWidth: 60,
-            maxWidth: 80,
+            maxWidth: 120,
+            isResizable: true,
             data: 'number',
             onColumnClick: this.onColumnClick
         }, {
@@ -69,7 +70,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             key: 'id',
             fieldName: 'id',
             minWidth: 80,
-            maxWidth: 150,
+            maxWidth: 100,
+            isResizable: true,
             className: 'tableHead leftTitle',
             data: 'string',
             onColumnClick: this.onColumnClick
@@ -77,7 +79,8 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             name: 'Duration',
             key: 'duration',
             minWidth: 100,
-            maxWidth: 150,
+            maxWidth: 210,
+            isResizable: true,
             fieldName: 'duration',
             data: 'number',
             onColumnClick: this.onColumnClick,
@@ -89,8 +92,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
         }, {
             name: 'Status',
             key: 'status',
-            minWidth: 100,
-            maxWidth: 150,
+            minWidth: 140,
+            maxWidth: 210,
+            isResizable: true,
             fieldName: 'status',
             onRender: (item: any): React.ReactNode => {
                 return (
@@ -101,8 +105,9 @@ class SuccessTable extends React.Component<SuccessTableProps, SuccessTableState>
             name: 'Default metric',
             key: 'accuracy',
             fieldName: 'accuracy',
-            minWidth: 100,
-            maxWidth: 150,
+            minWidth: 120,
+            maxWidth: 360,
+            isResizable: true,
             data: 'number',
             onColumnClick: this.onColumnClick,
             onRender: (item: any): React.ReactNode => {

src/webui/src/components/trial-detail/TableList.tsx

@@ -31,7 +31,6 @@ echarts.registerTheme('my_theme', {
     color: '#3c8dbc'
 });
 
-
 interface TableListProps {
     pageSize: number;
     tableSource: Array<TableRecord>;
@@ -142,7 +141,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         key: 'sequenceId',
         fieldName: 'sequenceId',
         minWidth: 80,
-        maxWidth: 120,
+        maxWidth: 240,
         className: 'tableHead',
         data: 'string',
         onColumnClick: this.onColumnClick,
@@ -166,7 +165,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         key: 'startTime',
         fieldName: 'startTime',
         minWidth: 150,
-        maxWidth: 200,
+        maxWidth: 400,
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
@@ -179,8 +178,8 @@ class TableList extends React.Component<TableListProps, TableListState> {
         name: 'End Time',
         key: 'endTime',
         fieldName: 'endTime',
-        minWidth: 150,
-        maxWidth: 200,
+        minWidth: 200,
+        maxWidth: 400,
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
@@ -194,7 +193,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         key: 'duration',
         fieldName: 'duration',
         minWidth: 150,
-        maxWidth: 200,
+        maxWidth: 300,
         isResizable: true,
         data: 'number',
         onColumnClick: this.onColumnClick,
@@ -209,7 +208,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
         fieldName: 'status',
         className: 'tableStatus',
         minWidth: 150,
-        maxWidth: 200,
+        maxWidth: 250,
         isResizable: true,
         data: 'string',
         onColumnClick: this.onColumnClick,
@@ -248,11 +247,13 @@ class TableList extends React.Component<TableListProps, TableListState> {
             }
             // intermediateArr just store default val
             Object.keys(res.data).map(item => {
-                const temp = parseMetrics(res.data[item].data);
-                if (typeof temp === 'object') {
-                    intermediateArr.push(temp[intermediateKey]);
-                } else {
-                    intermediateArr.push(temp);
+                if(res.data[item].type === 'PERIODICAL'){
+                    const temp = parseMetrics(res.data[item].data);
+                    if (typeof temp === 'object') {
+                        intermediateArr.push(temp[intermediateKey]);
+                    } else {
+                        intermediateArr.push(temp);
+                    }
                 }
             });
             const intermediate = intermediateGraphOption(intermediateArr, id);