Merge pull request #246 from microsoft/master

merge master

src/webui/src/components/Modals/Killjob.tsx

@@ -77,7 +77,7 @@ class KillJob extends React.Component<KillJobProps, KillJobState> {
     onKill = (): void => {
         this.setState({ isCalloutVisible: false }, () => {
             const { trial } = this.props;
-            killJob(trial.key, trial.id, trial.status);
+            killJob(trial.key, trial.jobId, trial.status);
         });
     }
 

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}>
@@ -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,7 +142,8 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                     </Pivot>
                 </div>
                 {/* trial table list */}
-                <Stack horizontal className="panelTitle">
+                <div style={{ backgroundColor: '#fff' }}>
+                    <Stack horizontal className="panelTitle" style={{ marginTop: 10 }}>
                         <span style={{ marginRight: 12 }}>{tableListIcon}</span>
                         <span>Trial jobs</span>
                     </Stack>
@@ -177,7 +178,6 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                                     ref={(text): any => (this.searchInput) = text}
                                 />
                             </Stack>
-
                         </StackItem>
                     </Stack>
                     <TableList
@@ -190,6 +190,7 @@ class TrialsDetail extends React.Component<TrialsDetailProps, TrialDetailState>
                         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/components/public-child/OpenRow.tsx

@@ -3,7 +3,6 @@ import * as copy from 'copy-to-clipboard';
 import { Stack, PrimaryButton, Pivot, PivotItem } from 'office-ui-fabric-react';
 import { Trial } from '../../static/model/trial';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { MANAGER_IP } from '../../static/const';
 import JSONTree from 'react-json-tree';
 import PaiTrialLog from '../public-child/PaiTrialLog';
 import TrialLog from '../public-child/TrialLog';
@@ -60,31 +59,12 @@ class OpenRow extends React.Component<OpenRowProps, OpenRowState> {
         const { isHidenInfo, typeInfo, info } = this.state;
         const trialId = this.props.trialId;
         const trial = TRIALS.getTrial(trialId);
-        const trialLink: string = `${MANAGER_IP}/trial-jobs/${trialId}`;
         const logPathRow = trial.info.logPath || 'This trial\'s log path is not available.';
-        const multiProgress = trial.info.hyperParameters === undefined ? 0 : trial.info.hyperParameters.length;
         return (
             <Stack className="openRow">
                 <Stack className="openRowContent">
                     <Pivot>
                         <PivotItem headerText="Parameters" key="1" itemIcon="TestParameter">
-                            {
-                                EXPERIMENT.multiPhase
-                                    ?
-                                    <Stack className="link">
-                                        {
-                                            `
-                                        Trails for multiphase experiment will return a set of parameters,
-                                        we are listing the latest parameter in webportal.
-                                        For the entire parameter set, please refer to the following "
-                                        `
-                                        }
-                                        <a href={trialLink} rel="noopener noreferrer" target="_blank">{trialLink}</a>{`".`}
-                                        <div>Current Phase: {multiProgress}.</div>
-                                    </Stack>
-                                    :
-                                    null
-                            }
                             {
                                 trial.info.hyperParameters !== undefined
                                     ?

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

@@ -9,7 +9,7 @@ import { LineChart, blocked, copy } from '../Buttons/Icon';
 import { MANAGER_IP, COLUMNPro } from '../../static/const';
 import { convertDuration, formatTimestamp, intermediateGraphOption, parseMetrics } from '../../static/function';
 import { EXPERIMENT, TRIALS } from '../../static/datamodel';
-import { TableRecord } from '../../static/interface';
+import { TableRecord, TrialJobInfo } from '../../static/interface';
 import Details from '../overview/Details';
 import ChangeColumnComponent from '../Modals/ChangeColumnComponent';
 import Compare from '../Modals/Compare';
@@ -231,18 +231,23 @@ class TableList extends React.Component<TableListProps, TableListState> {
         )
     };
 
-    showIntermediateModal = async (id: string, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
+    showIntermediateModal = async (record: TrialJobInfo, event: React.SyntheticEvent<EventTarget>): Promise<void> => {
         event.preventDefault();
         event.stopPropagation();
-        const res = await axios.get(`${MANAGER_IP}/metric-data/${id}`);
+        const res = await axios.get(`${MANAGER_IP}/metric-data/${record.jobId}`);
         if (res.status === 200) {
             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
             const { intermediateKey } = this.state;
-            const otherkeys: string[] = [ ];
-            if (res.data.length !== 0) {
+            const otherkeys: string[] = [];
+            // One trial job may contains multiple parameter id
+            // only show current trial's metric data
+            const metricDatas = res.data.filter(item => {
+                return item.parameterId == record.parameterId;
+            });
+            if (metricDatas.length !== 0) {
                 // just add type=number keys
                 const intermediateMetrics = parseMetrics(res.data[0].data);
                 for (const key in intermediateMetrics) {
@@ -252,9 +257,10 @@ class TableList extends React.Component<TableListProps, TableListState> {
                 }
             }
             // intermediateArr just store default val
-            Object.keys(res.data).map(item => {
-                if (res.data[item].type === 'PERIODICAL') {
-                    const temp = parseMetrics(res.data[item].data);
+            metricDatas.map(item => {
+
+                if (item.type === 'PERIODICAL') {
+                    const temp = parseMetrics(item.data);
                     if (typeof temp === 'object') {
                         intermediateArr.push(temp[intermediateKey]);
                     } else {
@@ -262,12 +268,12 @@ class TableList extends React.Component<TableListProps, TableListState> {
                     }
                 }
             });
-            const intermediate = intermediateGraphOption(intermediateArr, id);
+            const intermediate = intermediateGraphOption(intermediateArr, record.id);
             this.setState({
                 intermediateData: res.data, // store origin intermediate data for a trial
                 intermediateOption: intermediate,
                 intermediateOtherKeys: otherkeys,
-                intermediateId: id
+                intermediateId: record.id
             });
         }
         this.setState({ modalVisible: true });
@@ -426,8 +432,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
     // when user click [Add Column] need to use the function
     private initTableColumnList = (columnList: string[]): IColumn[] => {
         // const { columnList } = this.props;
-        // [supportCustomizedTrial: true]
-        const supportCustomizedTrial = (EXPERIMENT.multiPhase === true) ? false : true;
         const disabledAddCustomizedTrial = ['DONE', 'ERROR', 'STOPPED'].includes(EXPERIMENT.status);
         const showColumn: IColumn[] = [];
         for (const item of columnList) {
@@ -479,7 +483,7 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     <PrimaryButton
                                         className="detail-button-operation"
                                         title="Intermediate"
-                                        onClick={this.showIntermediateModal.bind(this, record.id)}
+                                        onClick={this.showIntermediateModal.bind(this, record)}
                                     >
                                         {LineChart}
                                     </PrimaryButton>
@@ -494,9 +498,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                             <KillJob trial={record} />
                                     }
                                     {/* Add a new trial-customized trial */}
-                                    {
-                                        supportCustomizedTrial
-                                            ?
                                     <PrimaryButton
                                         className="detail-button-operation"
                                         title="Customized trial"
@@ -505,9 +506,6 @@ class TableList extends React.Component<TableListProps, TableListState> {
                                     >
                                         {copy}
                                     </PrimaryButton>
-                                            :
-                                            null
-                                    }
                                 </Stack>
                             );
                         },

src/webui/src/static/const.ts

@@ -2,7 +2,10 @@
 const METRIC_GROUP_UPDATE_THRESHOLD = 100;
 const METRIC_GROUP_UPDATE_SIZE = 20;
 
-const MANAGER_IP = `/api/v1/nni`;
+let MANAGER_IP = `/api/v1/nni`;
+if (process.env.NODE_ENV == "development") {
+    MANAGER_IP = `//${window.location.hostname}:8080` + MANAGER_IP;
+}
 const DOWNLOAD_IP = `/logs`;
 const WEBUIDOC = 'https://nni.readthedocs.io/en/latest/Tutorial/WebUI.html';
 const trialJobStatus = [
@@ -34,7 +37,7 @@ const OPERATION = 'Operation';
 const COLUMN = ['Trial No.', 'ID', 'Duration', 'Status', 'Default', OPERATION];
 // all choice column !dictory final
 const COLUMNPro = ['Trial No.', 'ID', 'Start Time', 'End Time', 'Duration', 'Status',
-'Intermediate result', 'Default', OPERATION];
+    'Intermediate result', 'Default', OPERATION];
 const CONCURRENCYTOOLTIP = 'Trial concurrency is the number of trials running concurrently.';
 
 export {

src/webui/src/static/interface.ts

@@ -18,6 +18,8 @@ interface TableRecord {
     startTime: number;
     endTime?: number;
     id: string;
+    jobId: string;
+    parameterId: string;
     duration: number;
     status: string;
     intermediateCount: number;
@@ -99,6 +101,7 @@ interface Intermedia {
 interface MetricDataRecord {
     timestamp: number;
     trialJobId: string;
+    trialId: string;
     parameterId: string;
     type: string;
     sequence: number;
@@ -107,6 +110,8 @@ interface MetricDataRecord {
 
 interface TrialJobInfo {
     id: string;
+    jobId: string;
+    parameterId: string;
     sequenceId: number;
     status: string;
     startTime?: number;
@@ -126,7 +131,6 @@ interface ExperimentParams {
     maxTrialNum: number;
     searchSpace: string;
     trainingServicePlatform: string;
-    multiPhase?: boolean;
     multiThread?: boolean;
     versionCheck?: boolean;
     logCollection?: string;

src/webui/src/static/model/experiment.ts

@@ -66,10 +66,6 @@ class Experiment {
         return !!(this.profile.params.logCollection && this.profile.params.logCollection !== 'none');
     }
 
-    get multiPhase(): boolean {
-        return !!(this.profile.params.multiPhase);
-    }
-
     get status(): string {
         if (!this.statusField) {
             throw Error('Experiment status not initialized');

src/webui/src/static/model/trial.ts

@@ -4,7 +4,7 @@ import { getFinal, formatAccuracy, metricAccuracy, parseMetrics, isArrayType } f
 class Trial implements TableObj {
     private metricsInitialized: boolean = false;
     private infoField: TrialJobInfo | undefined;
-    private intermediates: (MetricDataRecord | undefined)[] = [ ];
+    private intermediates: (MetricDataRecord | undefined)[] = [];
     public final: MetricDataRecord | undefined;
     private finalAcc: number | undefined;
 
@@ -29,7 +29,7 @@ class Trial implements TableObj {
     }
 
     get intermediateMetrics(): MetricDataRecord[] {
-        const ret: MetricDataRecord[] = [ ];
+        const ret: MetricDataRecord[] = [];
         for (let i = 0; i < this.intermediates.length; i++) {
             if (this.intermediates[i]) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -80,6 +80,8 @@ class Trial implements TableObj {
             key: this.info.id,
             sequenceId: this.info.sequenceId,
             id: this.info.id,
+            jobId: this.info.jobId,
+            parameterId: this.info.parameterId,
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             startTime: this.info.startTime!,
             endTime: this.info.endTime,
@@ -122,8 +124,8 @@ class Trial implements TableObj {
 
     get description(): Parameters {
         const ret: Parameters = {
-            parameters: { },
-            intermediate: [ ],
+            parameters: {},
+            intermediate: [],
             multiProgress: 1
         };
         const tempHyper = this.info.hyperParameters;
@@ -142,7 +144,7 @@ class Trial implements TableObj {
             ret.logPath = this.info.logPath;
         }
 
-        const mediate: number[] = [ ];
+        const mediate: number[] = [];
         for (const items of this.intermediateMetrics) {
             if (typeof parseMetrics(items.data) === 'object') {
                 mediate.push(parseMetrics(items.data).default);

src/webui/src/static/model/trialmanager.ts

@@ -6,13 +6,29 @@ import { Trial } from './trial';
 function groupMetricsByTrial(metrics: MetricDataRecord[]): Map<string, MetricDataRecord[]> {
     const ret = new Map<string, MetricDataRecord[]>();
     for (const metric of metrics) {
-        if (ret.has(metric.trialJobId)) {
+        const trialId = `${metric.trialJobId}-${metric.parameterId}`;
+        metric.trialId = trialId;
+        if (ret.has(trialId)) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ret.get(metric.trialJobId)!.push(metric);
+            ret.get(trialId)!.push(metric);
         } else {
-            ret.set(metric.trialJobId, [ metric ]);
+            ret.set(trialId, [metric]);
         }
     }
+    // to compatiable with multi-trial in same job, fix offset of sequence
+    ret.forEach((trialMetrics) => {
+        let minSequenceNumber = Number.POSITIVE_INFINITY;
+        trialMetrics.map((item) => {
+            if (item.sequence < minSequenceNumber && item.type !== "FINAL") {
+                minSequenceNumber = item.sequence;
+            }
+        });
+        trialMetrics.map((item) => {
+            if (item.type !== "FINAL") {
+                item.sequence -= minSequenceNumber;
+            }
+        });
+    });
     return ret;
 }
 
@@ -31,7 +47,7 @@ class TrialManager {
     }
 
     public async update(lastTime?: boolean): Promise<boolean> {
-        const [ infoUpdated, metricUpdated ] = await Promise.all([ this.updateInfo(), this.updateMetrics(lastTime) ]);
+        const [infoUpdated, metricUpdated] = await Promise.all([this.updateInfo(), this.updateMetrics(lastTime)]);
         return infoUpdated || metricUpdated;
     }
 
@@ -71,14 +87,14 @@ class TrialManager {
 
     public countStatus(): Map<string, number> {
         const cnt = new Map<string, number>([
-            [ 'UNKNOWN', 0 ],
-            [ 'WAITING', 0 ],
-            [ 'RUNNING', 0 ],
-            [ 'SUCCEEDED', 0 ],
-            [ 'FAILED', 0 ],
-            [ 'USER_CANCELED', 0 ],
-            [ 'SYS_CANCELED', 0 ],
-            [ 'EARLY_STOPPED', 0 ],
+            ['UNKNOWN', 0],
+            ['WAITING', 0],
+            ['RUNNING', 0],
+            ['SUCCEEDED', 0],
+            ['FAILED', 0],
+            ['USER_CANCELED', 0],
+            ['SYS_CANCELED', 0],
+            ['EARLY_STOPPED', 0],
         ]);
         for (const trial of this.trials.values()) {
             if (trial.initialized()) {
@@ -89,19 +105,71 @@ class TrialManager {
         return cnt;
     }
 
+    public static expandJobsToTrials(jobs: TrialJobInfo[]): TrialJobInfo[] {
+        const trials: TrialJobInfo[] = [];
+
+        for (const jobInfo of jobs as TrialJobInfo[]) {
+            if (jobInfo.hyperParameters) {
+                let trial: TrialJobInfo | undefined;
+                let lastTrial: TrialJobInfo | undefined;
+                for (let i = 0; i < jobInfo.hyperParameters.length; i++) {
+                    const hyperParameters = jobInfo.hyperParameters[i]
+                    const hpObject = JSON.parse(hyperParameters);
+                    const parameterId = hpObject["parameter_id"];
+                    trial = {
+                        id: `${jobInfo.id}-${parameterId}`,
+                        jobId: jobInfo.id,
+                        parameterId: parameterId,
+                        sequenceId: parameterId,
+                        status: "SUCCEEDED",
+                        startTime: jobInfo.startTime,
+                        endTime: jobInfo.startTime,
+                        hyperParameters: [hyperParameters],
+                        logPath: jobInfo.logPath,
+                        stderrPath: jobInfo.stderrPath,
+                    };
+                    if (jobInfo.finalMetricData) {
+                        for (const metricData of jobInfo.finalMetricData) {
+                            if (metricData.parameterId == parameterId) {
+                                trial.finalMetricData = [metricData];
+                                trial.endTime = metricData.timestamp;
+                                break;
+                            }
+                        }
+                    }
+                    if (lastTrial) {
+                        trial.startTime = lastTrial.endTime;
+                    } else {
+                        trial.startTime = jobInfo.startTime;
+                    }
+                    lastTrial = trial;
+                    trials.push(trial);
+                }
+                if (lastTrial !== undefined) {
+                    lastTrial.status = jobInfo.status;
+                    lastTrial.endTime = jobInfo.endTime;
+                }
+            } else {
+                trials.push(jobInfo);
+            }
+        }
+        return trials;
+    }
+
     private async updateInfo(): Promise<boolean> {
         const response = await axios.get(`${MANAGER_IP}/trial-jobs`);
         let updated = false;
         if (response.status === 200) {
-            for (const info of response.data as TrialJobInfo[]) {
-                if (this.trials.has(info.id)) {
+            const newTrials = TrialManager.expandJobsToTrials(response.data);
+            for (const trialInfo of newTrials as TrialJobInfo[]) {
+                if (this.trials.has(trialInfo.id)) {
                     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    updated = this.trials.get(info.id)!.updateTrialJobInfo(info) || updated;
+                    updated = this.trials.get(trialInfo.id)!.updateTrialJobInfo(trialInfo) || updated;
                 } else {
-                    this.trials.set(info.id, new Trial(info, undefined));
+                    this.trials.set(trialInfo.id, new Trial(trialInfo, undefined));
                     updated = true;
                 }
-                this.maxSequenceId = Math.max(this.maxSequenceId, info.sequenceId);
+                this.maxSequenceId = Math.max(this.maxSequenceId, trialInfo.sequenceId);
             }
             this.infoInitialized = true;
         }
@@ -146,7 +214,7 @@ class TrialManager {
 
     private doUpdateMetrics(allMetrics: MetricDataRecord[], latestOnly: boolean): boolean {
         let updated = false;
-        for (const [ trialId, metrics ] of groupMetricsByTrial(allMetrics).entries()) {
+        for (const [trialId, metrics] of groupMetricsByTrial(allMetrics).entries()) {
             if (this.trials.has(trialId)) {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                 const trial = this.trials.get(trialId)!;

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;
@@ -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;