Some little style (#2762)

Co-authored-by: Lijiao <15910218274@163.com>

src/webui/src/components/Modals/Compare.tsx

 import * as React from 'react';
-import { Stack, Modal, IconButton } from 'office-ui-fabric-react';
+import { Stack, Modal, IconButton, IDragOptions, ContextualMenu } from 'office-ui-fabric-react';
 import ReactEcharts from 'echarts-for-react';
 import IntermediateVal from '../public-child/IntermediateVal';
 import { TRIALS } from '../../static/datamodel';
+import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
 import { contentStyles, iconButtonStyles } from '../Buttons/ModalTheme';
 import '../../static/style/compare.scss';
-import { TableRecord, Intermedia, TooltipForIntermediate } from '../../static/interface';
+
+const dragOptions: IDragOptions = {
+    moveMenuItemText: 'Move',
+    closeMenuItemText: 'Close',
+    menu: ContextualMenu
+};
 
 // the modal of trial compare
 interface CompareProps {
@@ -79,7 +85,8 @@ class Compare extends React.Component<CompareProps, {}> {
                 containLabel: true
             },
             legend: {
-                data: idsList
+                // more than 10 trials will hide legend
+                data: idsList.length > 10 ? null : idsList
             },
             xAxis: {
                 type: 'category',
@@ -209,6 +216,8 @@ class Compare extends React.Component<CompareProps, {}> {
                 isOpen={true}
                 containerClassName={contentStyles.container}
                 className="compare-modal"
+                allowTouchBodyScroll={true}
+                dragOptions={dragOptions}
             >
                 <div>
                     <div className={contentStyles.header}>

src/webui/src/components/Overview.tsx

@@ -12,6 +12,18 @@ import TrialInfo from './overview/TrialProfile';
 import '../static/style/overview.scss';
 import '../static/style/logPath.scss';
 
+const stackTokens: IStackTokens = {
+    childrenGap: 30,
+};
+
+const entriesOption = [
+    { key: '10', text: 'Display top 10 trials' },
+    { key: '20', text: 'Display top 20 trials' },
+    { key: '30', text: 'Display top 30 trials' },
+    { key: '50', text: 'Display top 50 trials' },
+    { key: '100', text: 'Display top 100 trials' }
+];
+
 interface OverviewProps {
     experimentUpdateBroadcast: number;
     trialsUpdateBroadcast: number;
@@ -70,17 +82,6 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         const titleMaxbgcolor = (metricGraphMode === 'max' ? '#333' : '#b3b3b3');
         const titleMinbgcolor = (metricGraphMode === 'min' ? '#333' : '#b3b3b3');
 
-        const stackTokens: IStackTokens = {
-            childrenGap: 30,
-        };
-
-        const entriesOption = [
-            { key: '10', text: 'Display top 10 trials' },
-            { key: '20', text: 'Display top 20 trials' },
-            { key: '30', text: 'Display top 30 trials' },
-            { key: '50', text: 'Display top 50 trials' },
-            { key: '100', text: 'Display top 100 trials' }
-        ];
         return (
             <div className="overview">
                 {/* status and experiment block */}
@@ -123,7 +124,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                 </Stack>
 
                 <Stack style={{backgroundColor: '#fff'}}>
-                    <Stack horizontal className="top10bg" style={{position: 'relative'}}>
+                    <Stack horizontal className="top10bg" style={{position: 'relative', height: 42}}>
                         <div
                             className="title"
                             onClick={this.clickMaxTop}
@@ -136,7 +137,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                         >
                             <Title1 text="Top minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
                         </div>
-                        <div style={{position: 'absolute', right: 52, top: 6}}>
+                        <div style={{position: 'absolute', right: '2%', top: 8}}>
                             <Dropdown
                                 selectedKey={bestTrialEntries}
                                 options={entriesOption}

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

@@ -723,6 +723,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                             style={{
                                 width: 0.5 * modalIntermediateWidth,
                                 height: 0.7 * modalIntermediateHeight,
+                                maxHeight: 534,
                                 padding: 20
                             }}
                             theme="my_theme"

src/webui/src/static/function.ts

@@ -131,7 +131,8 @@ const intermediateGraphOption = (intermediateArr: number[], id: string): any =>
         yAxis: {
             name: 'Default metric',
             type: 'value',
-            data: intermediateArr
+            data: intermediateArr,
+            scale: true
         },
         series: [{
             symbolSize: 6,

src/webui/src/static/style/compare.scss

 .compare-modal{
     /* decide modal size */
     .ms-Dialog-main{
-        max-width: 70%;
+        width: 50%;
+        overflow: hidden;
     }
 
     /* compare-md: table style */
     &-table{
         width: 92%;
-        table-layout: fixed;
         margin: 0 auto;
+        margin-bottom: 20px;
+        border: 1px solid transparent;
+        overflow: auto;
         color: #333;
         tr{
             line-height: 30px;

src/webui/src/static/style/overview.scss

@@ -12,7 +12,7 @@
     padding: 15px 20px;
     height: 100%;
     min-width: 500px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 .padItem{

src/webui/src/static/style/succTable.scss

 #succTable{
     height: 404px;
-    overflow-y: scroll;
+    overflow: auto;
     position: relative;
     .succTable-tooltip{
         position: absolute;

src/webui/src/static/style/table.scss

@@ -7,7 +7,7 @@
     height: 324px;
     overflow: hidden;
     #succeTable .commonTableStyle{
-        overflow-y: scroll;
+        overflow-y: auto;
     }
 }
 
@@ -55,5 +55,5 @@
 }
 .columns-height{
     max-height: 335px;
-    overflow-y: scroll;
+    overflow-y: auto;
 }