refactor best trials (#2417)

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

src/webui/src/App.scss

@@ -29,7 +29,18 @@
   margin: 0 auto;
   margin-top: 74px;
   margin-bottom: 30px;
-  background: #fff;
+}
+
+.bottomDiv{
+  margin-bottom: 10px;
+}
+
+.bgNNI{
+  background-color: #fff;
+}
+
+.borderRight{
+  margin-right: 10px;
 }
 
 /* office-fabric-ui */

src/webui/src/App.tsx

@@ -14,6 +14,7 @@ interface AppState {
     metricGraphMode: 'max' | 'min'; // tuner's optimize_mode filed
     isillegalFinal: boolean;
     expWarningMessage: string;
+    bestTrialEntries: string; // for overview page: best trial entreis
 }
 
 class App extends React.Component<{}, AppState> {
@@ -30,7 +31,8 @@ class App extends React.Component<{}, AppState> {
             trialsUpdateBroadcast: 0,
             metricGraphMode: 'max',
             isillegalFinal: false,
-            expWarningMessage: ''
+            expWarningMessage: '',
+            bestTrialEntries: '10'
         };
     }
 
@@ -92,9 +94,14 @@ class App extends React.Component<{}, AppState> {
         this.setState({ metricGraphMode: val });
     }
 
+    // overview best trial module
+    changeEntries = (entries: string): void => {
+        this.setState({bestTrialEntries: entries});
+    }
+
     render(): React.ReactNode {
         const { interval, columnList, experimentUpdateBroadcast, trialsUpdateBroadcast,
-            metricGraphMode, isillegalFinal, expWarningMessage 
+            metricGraphMode, isillegalFinal, expWarningMessage, bestTrialEntries
         } = this.state;
         if (experimentUpdateBroadcast === 0 || trialsUpdateBroadcast === 0) {
             return null;  // TODO: render a loading page
@@ -106,7 +113,8 @@ class App extends React.Component<{}, AppState> {
                     columnList, changeColumn: this.changeColumn,
                     experimentUpdateBroadcast,
                     trialsUpdateBroadcast,
-                    metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode
+                    metricGraphMode, changeMetricGraphMode: this.changeMetricGraphMode,
+                    bestTrialEntries, changeEntries: this.changeEntries
             })
         );
 

src/webui/src/components/Overview.tsx

 import * as React from 'react';
-import { Stack, IStackTokens } from 'office-ui-fabric-react';
+import { Stack, IStackTokens, Dropdown } from 'office-ui-fabric-react';
 import { EXPERIMENT, TRIALS } from '../static/datamodel';
 import { Trial } from '../static/model/trial';
 import Title1 from './overview/Title1';
@@ -16,7 +16,9 @@ interface OverviewProps {
     experimentUpdateBroadcast: number;
     trialsUpdateBroadcast: number;
     metricGraphMode: 'max' | 'min';
+    bestTrialEntries: string;
     changeMetricGraphMode: (val: 'max' | 'min') => void;
+    changeEntries: (entries: string) => void;
 }
 
 interface OverviewState {
@@ -38,6 +40,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         changeMetricGraphMode('max');
     }
 
+
     clickMinTop = (event: React.SyntheticEvent<EventTarget>): void => {
         event.stopPropagation();
         const { changeMetricGraphMode } = this.props;
@@ -48,9 +51,16 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         this.setState({ trialConcurrency: val });
     }
 
+    // updateEntries = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption | undefined): void => {
+    updateEntries = (event: React.FormEvent<HTMLDivElement>, item: any): void => {
+        if (item !== undefined) {
+            this.props.changeEntries(item.key);
+        }
+    }
+
     render(): React.ReactNode {
         const { trialConcurrency } = this.state;
-        const { experimentUpdateBroadcast, metricGraphMode } = this.props;
+        const { experimentUpdateBroadcast, metricGraphMode, bestTrialEntries } = this.props;
         const searchSpace = this.convertSearchSpace();
         const bestTrials = this.findBestTrials();
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -58,23 +68,31 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
         const accuracyGraphData = this.generateAccuracyGraph(bestTrials);
         const noDataMessage = bestTrials.length > 0 ? '' : 'No data';
 
-        const titleMaxbgcolor = (metricGraphMode === 'max' ? '#999' : '#b3b3b3');
-        const titleMinbgcolor = (metricGraphMode === 'min' ? '#999' : '#b3b3b3');
+        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 */}
-                <Stack>
+                <Stack className="bottomDiv bgNNI">
                     <Title1 text="Experiment" icon="11.png" />
                     <BasicInfo experimentUpdateBroadcast={experimentUpdateBroadcast} />
                 </Stack>
 
-                <Stack horizontal className="overMessage">
+                <Stack horizontal className="overMessage bottomDiv">
                     {/* status block */}
-                    <Stack.Item grow className="prograph overviewBoder cc">
+                    <Stack.Item grow className="prograph bgNNI borderRight">
                         <Title1 text="Status" icon="5.png" />
                         <Progressed
                             bestAccuracy={bestAccuracy}
@@ -84,13 +102,14 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                         />
                     </Stack.Item>
                     {/* experiment parameters search space tuner assessor... */}
-                    <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder">
+                    <Stack.Item grow styles={{root: {width: 450}}} className="overviewBoder borderRight bgNNI">
                         <Title1 text="Search space" icon="10.png" />
                         <Stack className="experiment">
                             <SearchSpace searchSpace={searchSpace} />
                         </Stack>
                     </Stack.Item>
-                    <Stack.Item grow styles={{root: {width: 450}}}>
+                    {/* <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI"> */}
+                    <Stack.Item grow styles={{root: {width: 450}}} className="bgNNI">
                         <Title1 text="Config" icon="4.png" />
                         <Stack className="experiment">
                             {/* the scroll bar all the trial profile in the searchSpace div*/}
@@ -104,19 +123,27 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                     </Stack.Item>
                 </Stack>
 
-                <Stack>
-                    <Stack horizontal className="top10bg">
+                <Stack style={{backgroundColor: '#fff'}}>
+                    <Stack horizontal className="top10bg" style={{position: 'relative'}}>
                         <div
                             className="title"
                             onClick={this.clickMaxTop}
                         >
-                            <Title1 text="Top10 Maximal trials" icon="max.png" bgcolor={titleMaxbgcolor} />
+                            <Title1 text="Top Maximal trials" icon="max.png" fontColor={titleMaxbgcolor} />
                         </div>
                         <div
                             className="title minTitle"
                             onClick={this.clickMinTop}
                         >
-                            <Title1 text="Top10 Minimal trials" icon="min.png" bgcolor={titleMinbgcolor} />
+                            <Title1 text="Top Minimal trials" icon="min.png" fontColor={titleMinbgcolor} />
+                        </div>
+                        <div style={{position: 'absolute', right: 52, top: 6}}>
+                            <Dropdown
+                                selectedKey={bestTrialEntries}
+                                options={entriesOption}
+                                onChange={this.updateEntries}
+                                styles={{ root: { width: 170 } }}
+                            />
                         </div>
                     </Stack>
                     <Stack horizontal tokens={stackTokens}>
@@ -128,7 +155,7 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
                             />
                         </div>
                         <div style={{ width: '60%'}}>
-                        <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
+                            <SuccessTable trialIds={bestTrials.map(trial => trial.info.id)} />
                         </div>
                     </Stack>
                 </Stack>
@@ -155,10 +182,11 @@ class Overview extends React.Component<OverviewProps, OverviewState> {
 
     private findBestTrials(): Trial[] {
         const bestTrials = TRIALS.sort();
+        const { bestTrialEntries } = this.props;
         if (this.props.metricGraphMode === 'max') {
-            bestTrials.reverse().splice(10);
+            bestTrials.reverse().splice(JSON.parse(bestTrialEntries));
         } else {
-            bestTrials.splice(10);
+            bestTrials.splice(JSON.parse(bestTrialEntries));
         }
         return bestTrials;
     }

src/webui/src/components/TrialsDetail.tsx

@@ -142,53 +142,54 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     </Pivot>
                 </div>
                 {/* trial table list */}
-                <Stack horizontal className="panelTitle">
-                    <span style={{ marginRight: 12 }}>{tableListIcon}</span>
-                    <span>Trial jobs</span>
-                </Stack>
-                <Stack horizontal className="allList">
-                    <StackItem grow={50}>
-                        <DefaultButton
-                            text="Compare"
-                            className="allList-compare"
-                            // use child-component tableList's function, the function is in child-component.
-                            onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
-                        />
-                    </StackItem>
-                    <StackItem grow={50}>
-                        <Stack horizontal horizontalAlign="end" className="allList">
+                <div style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
+                        <span style={{ marginRight: 12 }}>{tableListIcon}</span>
+                        <span>Trial jobs</span>
+                    </Stack>
+                    <Stack horizontal className="allList">
+                        <StackItem grow={50}>
                             <DefaultButton
-                                className="allList-button-gap"
-                                text="Add column"
-                                onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
+                                text="Compare"
+                                className="allList-compare"
+                                // use child-component tableList's function, the function is in child-component.
+                                onClick={(): void => { if (this.tableList) { this.tableList.compareBtn(); } }}
                             />
-                            <Dropdown
-                                selectedKey={searchType}
-                                options={searchOptions}
-                                onChange={this.updateSearchFilterType}
-                                styles={{ root: { width: 150 } }}
-                            />
-                            <input
-                                type="text"
-                                className="allList-search-input"
-                                placeholder={`Search by ${this.state.searchType}`}
-                                onChange={this.searchTrial}
-                                style={{ width: 230 }}
-                                ref={(text): any => (this.searchInput) = text}
-                            />
-                        </Stack>
-
-                    </StackItem>
-                </Stack>
-                <TableList
-                    pageSize={tablePageSize}
-                    tableSource={source.map(trial => trial.tableRecord)}
-                    columnList={columnList}
-                    changeColumn={changeColumn}
-                    trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
-                    // TODO: change any to specific type
-                    ref={(tabList): any => this.tableList = tabList}
-                />
+                        </StackItem>
+                        <StackItem grow={50}>
+                            <Stack horizontal horizontalAlign="end" className="allList">
+                                <DefaultButton
+                                    className="allList-button-gap"
+                                    text="Add column"
+                                    onClick={(): void => { if (this.tableList) { this.tableList.addColumn(); } }}
+                                />
+                                <Dropdown
+                                    selectedKey={searchType}
+                                    options={searchOptions}
+                                    onChange={this.updateSearchFilterType}
+                                    styles={{ root: { width: 150 } }}
+                                />
+                                <input
+                                    type="text"
+                                    className="allList-search-input"
+                                    placeholder={`Search by ${this.state.searchType}`}
+                                    onChange={this.searchTrial}
+                                    style={{ width: 230 }}
+                                    ref={(text): any => (this.searchInput) = text}
+                                />
+                            </Stack>
+                        </StackItem>
+                    </Stack>
+                    <TableList
+                        pageSize={tablePageSize}
+                        tableSource={source.map(trial => trial.tableRecord)}
+                        columnList={columnList}
+                        changeColumn={changeColumn}
+                        trialsUpdateBroadcast={this.props.trialsUpdateBroadcast}
+                        // TODO: change any to specific type
+                        ref={(tabList): any => this.tableList = tabList}
+                    />
+                </div>
             </div>
         );
     }

src/webui/src/components/overview/BasicInfo.tsx

@@ -22,12 +22,16 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                 <Stack.Item grow={3} className="padItem basic">
                     <p>Name</p>
                     <div>{EXPERIMENT.profile.params.experimentName}</div>
+                </Stack.Item>
+                <Stack.Item grow={3} className="padItem basic">
                     <p>ID</p>
                     <div>{EXPERIMENT.profile.id}</div>
                 </Stack.Item>
                 <Stack.Item grow={3} className="padItem basic">
                     <p>Start time</p>
                     <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.startTime)}</div>
+                </Stack.Item>
+                <Stack.Item grow={3} className="padItem basic">
                     <p>End time</p>
                     <div className="nowrap">{formatTimestamp(EXPERIMENT.profile.endTime)}</div>
                 </Stack.Item>
@@ -45,6 +49,8 @@ class BasicInfo extends React.Component<BasicInfoProps, {}> {
                             {EXPERIMENT.profile.logDir || 'unknown'}
                         </TooltipHost>
                     </div>
+                </Stack.Item>
+                <Stack.Item  className="padItem basic">
                     <p>Training platform</p>
                     <div className="nowrap">{EXPERIMENT.profile.params.trainingServicePlatform}</div>
                 </Stack.Item>

src/webui/src/components/overview/Title1.tsx

@@ -4,7 +4,7 @@ import '../../static/style/overviewTitle.scss';
 interface Title1Props {
     text: string;
     icon?: string;
-    bgcolor?: string;
+    fontColor?: string;
 }
 
 class Title1 extends React.Component<Title1Props, {}> {
@@ -14,11 +14,11 @@ class Title1 extends React.Component<Title1Props, {}> {
     }
 
     render(): React.ReactNode {
-        const { text, icon, bgcolor } = this.props;
+        const { text, icon, fontColor } = this.props;
         return (
-            <Stack horizontal className="panelTitle" style={{ backgroundColor: bgcolor }}>
+            <Stack horizontal className="panelTitle">
                 <img src={require(`../../static/img/icon/${icon}`)} alt="icon" />
-                <span>{text}</span>
+                <span style={{ color: fontColor }}>{text}</span>
             </Stack>
         );
     }

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

@@ -25,7 +25,6 @@
     padding: 15px 0;
     color: #212121;
     width: 95%;
-    margin: 0 auto;
 }
 
 .nowrap{

src/webui/src/static/style/overviewTitle.scss

-$titleBgcolor: #b3b3b3;
 $iconPaddingVal: 14px;
 
-.overview .overviewBoder{
-    height: 100%;
-    border-right: 2px solid white;
-}
-
 .panelTitle{
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     width: 100%;
     height: 38px;
-    padding: 0 $iconPaddingVal;
-    background: $titleBgcolor;
-
+    padding: 4px $iconPaddingVal;
+    box-sizing: border-box;
+    
     img{
         height: 22px;
         /* (38 - 22 ) / 2 */
@@ -40,7 +34,6 @@ $iconPaddingVal: 14px;
 }
 
 .top10bg{
-    background-color: $titleBgcolor;
 
     .top10Title{
         width: 160px;

src/webui/src/static/style/trialsDetail.scss

-$bg: #b3b3b3;
 #tabsty{
+    background-color: #fff;
     .ms-Pivot{
         .ms-Button{
             padding: 0;
@@ -7,13 +7,6 @@ $bg: #b3b3b3;
             margin-right: 0;
             border-right: 2px solid #fff;
             transition: 0.3s;
-
-            &:hover{
-                background-color: $bg;
-            }
-            .ms-Button-flexContainer{
-                background-color: $bg;
-            }
         }
 
         .ms-Pivot-link::before{
@@ -45,10 +38,7 @@ $bg: #b3b3b3;
     /* graph, title total height */
     width: 100%;
     height: 500px;
-    /* graph all title bg*/
-    .ms-FocusZone{
-        background-color: $bg;
-    }
+
     .graph{
         height: 432px;
         margin: 0 auto;