fix bug and refactor tooltip component (#5062)

2022-08-18 12:58:56 +08:00 · 2022-08-18 12:58:56 +08:00 · cbc6273ae8
--- a/ts/webui/src/components/common/CopyButton.tsx
+++ b/ts/webui/src/components/common/CopyButton.tsx
@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import copy from 'copy-to-clipboard';
 import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { TOOLTIPSTYLE } from '@static/const';

 interface CopyButtonProps {
    value: string;
@ -38,15 +38,7 @@ const CopyButton = (props: CopyButtonProps): any => {
                content='Copied'
                componentRef={ref}
                delay={0}
-                tooltipProps={{
-                    calloutProps: {
-                        styles: {
-                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                        }
-                    }
-                }}
+                tooltipProps={TOOLTIPSTYLE}
            />
        </div>
    );
--- a/ts/webui/src/components/common/TooltipHostIndex.tsx
+++ b/ts/webui/src/components/common/TooltipHostIndex.tsx
@ -0,0 +1,31 @@
+import * as React from 'react';
+import { TOOLTIPSTYLE } from '@static/const';
+import { DirectionalHint, TooltipHost } from '@fluentui/react';
+
+interface TooltipHostIndexProps {
+    value: string;
+}
+
+const TooltipHostIndex = (props: TooltipHostIndexProps): any => {
+    const { value } = props;
+    const length = String(value).length;
+    return (
+        <>
+            {length >= 15 ? (
+                <div>
+                    <TooltipHost
+                        content={value}
+                        directionalHint={DirectionalHint.bottomLeftEdge}
+                        tooltipProps={TOOLTIPSTYLE}
+                    >
+                        <div className='ellipsis'>{value}</div>
+                    </TooltipHost>
+                </div>
+            ) : (
+                <div>{value}</div>
+            )}
+        </>
+    );
+};
+
+export default TooltipHostIndex;
--- a/ts/webui/src/components/experiment/overview/Config.tsx
+++ b/ts/webui/src/components/experiment/overview/Config.tsx
@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Stack } from '@fluentui/react';
+import { EXPERIMENT } from '@static/datamodel';
+import { leftProgress, rightEditParam } from './count/commonStyle';
+import TooltipHostIndex from '@components/common/TooltipHostIndex';
+import '@style/experiment/overview/command.scss';
+
+// This file is for showing the experiment some important params,
+// Log directory, trial command, training platform and tuner/advisor message
+
+const Config = (): any => {
+    const tuner = EXPERIMENT.profile.params.tuner;
+    const advisor = EXPERIMENT.profile.params.advisor;
+    const assessor = EXPERIMENT.profile.params.assessor;
+    const title: string[] = [];
+    const builtinName: string[] = [];
+    if (tuner !== undefined) {
+        title.push('Tuner');
+        builtinName.push(tuner.name || tuner.className || 'unknown');
+    }
+
+    if (advisor !== undefined) {
+        title.push('Advisor');
+        builtinName.push(advisor.name || advisor.className || 'unknown');
+    }
+
+    if (assessor !== undefined) {
+        title.push('Assessor');
+        builtinName.push(assessor.name || assessor.className || 'unknown');
+    }
+
+    return (
+        <Stack horizontal>
+            <div className='basic' style={leftProgress}>
+                <p className='command'>Log directory</p>
+                <TooltipHostIndex value={EXPERIMENT.profile.logDir || 'unknown'} />
+                <p className='lineMargin'>Trial command</p>
+                <TooltipHostIndex value={EXPERIMENT.config.trialCommand || 'unknown'} />
+            </div>
+            <div className='basic' style={rightEditParam}>
+                <div>
+                    <p className='command'>Training platform</p>
+                    <div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
+                    <p className='lineMargin'>{title.join('/')}</p>
+                    <div className='ellipsis'>{builtinName.join('/')}</div>
+                </div>
+            </div>
+        </Stack>
+    );
+};
+
+export default Config;
--- a/ts/webui/src/components/experiment/overview/Overview.tsx
+++ b/ts/webui/src/components/experiment/overview/Overview.tsx
@ -10,8 +10,7 @@ import { BasicInfo } from './params/BasicInfo';
 import { ExpDuration } from './count/ExpDuration';
 import { ExpDurationContext } from './count/ExpDurationContext';
 import { TrialCount } from './count/TrialCount';
-import { Command1 } from './command/Command1';
-import { Command2 } from './command/Command2';
+import Config from './Config';
 import { TitleContext } from './TitleContext';
 import { itemStyleSucceed, entriesOption } from './overviewConst';
 import '@style/experiment/overview/overview.scss';
@ -185,9 +184,8 @@ class Overview extends React.Component<{}, OverviewState> {
                                        />
                                    </div>
                                </div>
-                                <Stack className='overviewCommand' horizontal>
-                                    <Command2 />
-                                    <Command1 />
+                                <Stack className='overviewCommand'>
+                                    <Config />
                                </Stack>
                            </div>
                        </div>
--- a/ts/webui/src/components/experiment/overview/command/Command1.tsx
+++ b/ts/webui/src/components/experiment/overview/command/Command1.tsx
@ -1,37 +0,0 @@
-import React from 'react';
-import { EXPERIMENT } from '@static/datamodel';
-import { rightEidtParam } from '../count/commonStyle';
-import '@style/experiment/overview/command.scss';
-
-export const Command1 = (): any => {
-    const tuner = EXPERIMENT.profile.params.tuner;
-    const advisor = EXPERIMENT.profile.params.advisor;
-    const assessor = EXPERIMENT.profile.params.assessor;
-    const title: string[] = [];
-    const builtinName: string[] = [];
-    if (tuner !== undefined) {
-        title.push('Tuner');
-        builtinName.push(tuner.name || tuner.className || 'unknown');
-    }
-
-    if (advisor !== undefined) {
-        title.push('Advisor');
-        builtinName.push(advisor.name || advisor.className || 'unknown');
-    }
-
-    if (assessor !== undefined) {
-        title.push('Assessor');
-        builtinName.push(assessor.name || assessor.className || 'unknown');
-    }
-
-    return (
-        <div className='basic' style={rightEidtParam}>
-            <div>
-                <p className='command'>Training platform</p>
-                <div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
-                <p className='lineMargin'>{title.join('/')}</p>
-                <div className='ellipsis'>{builtinName.join('/')}</div>
-            </div>
-        </div>
-    );
-};
--- a/ts/webui/src/components/experiment/overview/command/Command2.tsx
+++ b/ts/webui/src/components/experiment/overview/command/Command2.tsx
@ -1,51 +0,0 @@
-import React from 'react';
-import { TooltipHost, DirectionalHint } from '@fluentui/react';
-import { EXPERIMENT } from '@static/datamodel';
-import { leftProgress } from '../count/commonStyle';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
-import '@style/experiment/overview/command.scss';
-
-export const Command2 = (): any => {
-    return (
-        <div className='basic' style={leftProgress}>
-            <p className='command'>Log directory</p>
-            <div className='ellipsis'>
-                <TooltipHost
-                    content={EXPERIMENT.profile.logDir || 'unknown'}
-                    className='ellipsis'
-                    directionalHint={DirectionalHint.bottomCenter}
-                    tooltipProps={{
-                        calloutProps: {
-                            styles: {
-                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                            }
-                        }
-                    }}
-                >
-                    {EXPERIMENT.profile.logDir || 'unknown'}
-                </TooltipHost>
-            </div>
-            <p className='lineMargin'>Trial command</p>
-            <div className='ellipsis'>
-                <TooltipHost
-                    content={EXPERIMENT.config.trialCommand || 'unknown'}
-                    className='ellipsis'
-                    directionalHint={DirectionalHint.bottomCenter}
-                    tooltipProps={{
-                        calloutProps: {
-                            styles: {
-                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                            }
-                        }
-                    }}
-                >
-                    {EXPERIMENT.config.trialCommand || 'unknown'}
-                </TooltipHost>
-            </div>
-        </div>
-    );
-};
--- a/ts/webui/src/components/experiment/overview/count/ExpDuration.tsx
+++ b/ts/webui/src/components/experiment/overview/count/ExpDuration.tsx
@ -1,12 +1,11 @@
 import React from 'react';
-import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
 import { EXPERIMENT } from '@static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR } from '@static/const';
+import { CONTROLTYPE } from '@static/const';
 import { convertDuration, convertTimeAsUnit } from '@static/function';
 import { EditExperimentParam } from './EditExperimentParam';
 import { ExpDurationContext } from './ExpDurationContext';
+import ProgressBar from './ProgressBar';
 import { EditExpeParamContext } from './context';
-import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
 import '@style/experiment/overview/count.scss';

 export const ExpDuration = (): any => (
@ -18,35 +17,14 @@ export const ExpDuration = (): any => (
            const execDurationStr = convertDuration(execDuration);
            const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
            return (
-                <Stack horizontal className='ExpDuration'>
-                    <div style={leftProgress}>
-                        <TooltipHost
-                            content={`${convertDuration(tooltip)} remaining`}
-                            directionalHint={DirectionalHint.bottomCenter}
-                            tooltipProps={{
-                                calloutProps: {
-                                    styles: {
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <ProgressIndicator
-                                className={EXPERIMENT.status}
-                                percentComplete={percent}
-                                barHeight={progressHeight}
-                            />
-                        </TooltipHost>
-                        {/* execDuration / maxDuration: 20min / 1h */}
-                        <div className='exp-progress'>
-                            <span className={`${EXPERIMENT.status} bold`}>{execDurationStr}</span>
-                            <span className='joiner'>/</span>
-                            <span>{`${maxExecDurationStr} ${maxDurationUnit}`}</span>
-                        </div>
-                    </div>
-                    <div style={rightEidtParam}>
+                <React.Fragment>
+                    <ProgressBar
+                        tooltip={`${convertDuration(tooltip)} remaining`}
+                        percent={percent}
+                        latestVal={execDurationStr}
+                        presetVal={`${maxExecDurationStr} ${maxDurationUnit}`}
+                    />
+                    <div className='editExpDuration'>
                        <EditExpeParamContext.Provider
                            value={{
                                editType: CONTROLTYPE[0],
@ -61,7 +39,7 @@ export const ExpDuration = (): any => (
                            <EditExperimentParam />
                        </EditExpeParamContext.Provider>
                    </div>
-                </Stack>
+                </React.Fragment>
            );
        }}
    </ExpDurationContext.Consumer>
--- a/ts/webui/src/components/experiment/overview/count/ProgressBar.tsx
+++ b/ts/webui/src/components/experiment/overview/count/ProgressBar.tsx
@ -0,0 +1,41 @@
+import React from 'react';
+import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
+import { EXPERIMENT } from '@static/datamodel';
+import { TOOLTIPSTYLE } from '@static/const';
+import { leftProgress, progressHeight } from './commonStyle';
+import '@style/experiment/overview/count.scss';
+
+interface ProgressBarProps {
+    tooltip: string;
+    percent: number;
+    latestVal: string;
+    presetVal: string;
+}
+
+const ProgressBar = (props: ProgressBarProps): any => {
+    const { tooltip, percent, latestVal, presetVal } = props;
+    return (
+        <Stack horizontal className='marginTop'>
+            <div style={leftProgress}>
+                <TooltipHost
+                    content={tooltip}
+                    directionalHint={DirectionalHint.bottomCenter}
+                    tooltipProps={TOOLTIPSTYLE}
+                >
+                    <ProgressIndicator
+                        className={EXPERIMENT.status}
+                        percentComplete={percent}
+                        barHeight={progressHeight}
+                    />
+                </TooltipHost>
+                <div className='exp-progress'>
+                    <span className={`${EXPERIMENT.status} bold`}>{latestVal}</span>
+                    <span className='joiner'>/</span>
+                    <span>{presetVal}</span>
+                </div>
+            </div>
+        </Stack>
+    );
+};
+
+export default ProgressBar;
--- a/ts/webui/src/components/experiment/overview/count/TrialCount.tsx
+++ b/ts/webui/src/components/experiment/overview/count/TrialCount.tsx
@ -1,11 +1,12 @@
 import * as React from 'react';
-import { Stack, TooltipHost, ProgressIndicator, DirectionalHint, IStackTokens } from '@fluentui/react';
+import { Stack, IStackTokens } from '@fluentui/react';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
-import { CONTROLTYPE, TOOLTIP_BACKGROUND_COLOR, MAX_TRIAL_NUMBERS } from '@static/const';
+import { CONTROLTYPE, MAX_TRIAL_NUMBERS } from '@static/const';
 import { EditExperimentParam } from './EditExperimentParam';
+import ProgressBar from './ProgressBar';
 import { EditExpeParamContext } from './context';
 import { ExpDurationContext } from './ExpDurationContext';
-import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
+import { leftProgress, rightEditParam } from './commonStyle';

 const line1Tokens: IStackTokens = {
    childrenGap: 60
@ -29,34 +30,12 @@ export const TrialCount = (): any => {
                const { updateOverviewPage } = value;
                return (
                    <React.Fragment>
-                        <Stack horizontal className='ExpDuration'>
-                            <div style={leftProgress}>
-                                <TooltipHost
-                                    content={`${bar2.toString()} trials`}
-                                    directionalHint={DirectionalHint.bottomCenter}
-                                    tooltipProps={{
-                                        calloutProps: {
-                                            styles: {
-                                                beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                                beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                                calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                            }
-                                        }
-                                    }}
-                                >
-                                    <ProgressIndicator
-                                        className={EXPERIMENT.status}
-                                        percentComplete={bar2Percent}
-                                        barHeight={progressHeight}
-                                    />
-                                </TooltipHost>
-                                <div className='exp-progress'>
-                                    <span className={`${EXPERIMENT.status} bold`}>{bar2}</span>
-                                    <span className='joiner'>/</span>
-                                    <span>{maxTrialNum}</span>
-                                </div>
-                            </div>
-                        </Stack>
+                        <ProgressBar
+                            tooltip={`${bar2.toString()} trials`}
+                            percent={bar2Percent}
+                            latestVal={String(bar2)}
+                            presetVal={String(maxTrialNum)}
+                        />
                        <Stack horizontal className='marginTop'>
                            <div style={leftProgress}>
                                <Stack horizontal className='status-count' tokens={line1Tokens}>
@ -85,7 +64,7 @@ export const TrialCount = (): any => {
                                </Stack>
                            </div>

-                            <div style={rightEidtParam}>
+                            <div style={rightEditParam}>
                                <EditExpeParamContext.Provider
                                    value={{
                                        title: MAX_TRIAL_NUMBERS,
--- a/ts/webui/src/components/experiment/overview/count/commonStyle.ts
+++ b/ts/webui/src/components/experiment/overview/count/commonStyle.ts
@ -2,11 +2,11 @@ const leftProgress: React.CSSProperties = {
    width: '60%',
    position: 'relative'
 };
-const rightEidtParam: React.CSSProperties = {
+const rightEditParam: React.CSSProperties = {
    paddingLeft: '9%',
    boxSizing: 'border-box'
 };

 const progressHeight = 8;

-export { leftProgress, rightEidtParam, progressHeight };
+export { leftProgress, rightEditParam, progressHeight };
--- a/ts/webui/src/components/experiment/trialdetail/table/TableList.tsx
+++ b/ts/webui/src/components/experiment/trialdetail/table/TableList.tsx
@ -1,17 +1,6 @@
 import React from 'react';
-import {
-    DefaultButton,
-    IColumn,
-    Icon,
-    PrimaryButton,
-    Stack,
-    StackItem,
-    TooltipHost,
-    DirectionalHint,
-    Checkbox
-} from '@fluentui/react';
+import { DefaultButton, IColumn, Icon, PrimaryButton, Stack, StackItem, Checkbox } from '@fluentui/react';
 import { Trial } from '@model/trial';
-import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
 import { EXPERIMENT, TRIALS } from '@static/datamodel';
 import { convertDuration, formatTimestamp, copyAndSort, parametersType, _inferColumnTitle } from '@static/function';
 import { SortInfo, SearchItems } from '@static/interface';
@ -26,6 +15,7 @@ import KillJobIndex from './tableFunction/killJob/KillJobIndex';
 import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
 import PaginationTable from '@components/common/PaginationTable';
 import CopyButton from '@components/common/CopyButton';
+import TooltipHostIndex from '@components/common/TooltipHostIndex';

 require('echarts/lib/chart/line');
 require('echarts/lib/component/tooltip');
@ -380,66 +370,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
                    )
                }),
                ...(k === 'message' && {
-                    onRender: (record): React.ReactNode =>
-                        record.message.length > 15 ? (
-                            <TooltipHost
-                                content={record.message}
-                                directionalHint={DirectionalHint.bottomCenter}
-                                tooltipProps={{
-                                    calloutProps: {
-                                        styles: {
-                                            beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                        }
-                                    }
-                                }}
-                            >
-                                <div>{record.message}</div>
-                            </TooltipHost>
-                        ) : (
-                            <div>{record.message}</div>
-                        )
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record.message} />
                }),
                ...((k.startsWith('metric/') || k.startsWith('space/')) && {
                    // show tooltip
-                    onRender: (record): React.ReactNode => (
-                        <TooltipHost
-                            content={record[k]}
-                            directionalHint={DirectionalHint.bottomCenter}
-                            tooltipProps={{
-                                calloutProps: {
-                                    styles: {
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <div className='ellipsis'>{record[k]}</div>
-                        </TooltipHost>
-                    )
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record[k]} />
                }),
                ...(k === 'latestAccuracy' && {
                    // FIXME: this is ad-hoc
-                    onRender: (record): React.ReactNode => (
-                        <TooltipHost
-                            content={record._formattedLatestAccuracy}
-                            directionalHint={DirectionalHint.bottomCenter}
-                            tooltipProps={{
-                                calloutProps: {
-                                    styles: {
-                                        beak: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
-                                        calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
-                                    }
-                                }
-                            }}
-                        >
-                            <div className='ellipsis'>{record.formattedLatestAccuracy}</div>
-                        </TooltipHost>
-                    )
+                    onRender: (record): React.ReactNode => <TooltipHostIndex value={record._formattedLatestAccuracy} />
                }),
                ...(['startTime', 'endTime'].includes(k) && {
                    onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span>
--- a/ts/webui/src/components/experimentManagement/FilterBtns.tsx
+++ b/ts/webui/src/components/experimentManagement/FilterBtns.tsx
@ -60,6 +60,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
                    ariaLabel='Select a date'
                    value={selectedStartDate}
                    onSelectDate={getSelectedData.bind(this, 'start')}
+                    className='filter-condition-date'
                />
                <DatePicker
                    label='End time'
@ -69,6 +70,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
                    ariaLabel='Select a date'
                    value={selectedEndDate}
                    onSelectDate={getSelectedData.bind(this, 'end')}
+                    className='filter-condition-date'
                />
                <DefaultButton onClick={setSearchSource.bind(this)} className='reset'>
                    <Icon iconName='Refresh' />
--- a/ts/webui/src/static/const.ts
+++ b/ts/webui/src/static/const.ts
@ -70,6 +70,15 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [
 ];

 const TOOLTIP_BACKGROUND_COLOR = '#484848';
+const TOOLTIPSTYLE = {
+    calloutProps: {
+        styles: {
+            beak: { background: TOOLTIP_BACKGROUND_COLOR },
+            beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
+            calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
+        }
+    }
+};
 const MAX_TRIAL_NUMBERS = 'Max trial No.';
 const RETIARIIPARAMETERS = 'mutation_summary';

@ -88,7 +97,7 @@ export {
    METRIC_GROUP_UPDATE_SIZE,
    CONCURRENCYTOOLTIP,
    SUPPORTED_SEARCH_SPACE_TYPE,
-    TOOLTIP_BACKGROUND_COLOR,
+    TOOLTIPSTYLE,
    MAX_TRIAL_NUMBERS,
    RETIARIIPARAMETERS
 };
--- a/ts/webui/src/static/interface.ts
+++ b/ts/webui/src/static/interface.ts
@ -27,7 +27,7 @@ interface MultipleAxes {
 }

 interface TableRecord {
-    key: string;
+    _key: string;
    sequenceId: number;
    startTime: number;
    endTime?: number;
@ -37,7 +37,7 @@ interface TableRecord {
    message: string;
    intermediateCount: number;
    latestAccuracy: number | undefined;
-    formattedLatestAccuracy: string; // format (LATEST/FINAL),
+    _formattedLatestAccuracy: string; // format (LATEST/FINAL),
 }

 interface SearchSpace {
--- a/ts/webui/src/static/model/trial.ts
+++ b/ts/webui/src/static/model/trial.ts
@ -184,7 +184,7 @@ class Trial {
        const duration = (endTime - this.info.startTime!) / 1000;

        return {
-            key: this.info.trialJobId,
+            _key: this.info.trialJobId,
            sequenceId: this.info.sequenceId,
            id: this.info.trialJobId,
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@ -195,7 +195,7 @@ class Trial {
            message: this.info.message ?? '--',
            intermediateCount: this.intermediates.length,
            latestAccuracy: this.latestAccuracy,
-            formattedLatestAccuracy: this.formatLatestAccuracy()
+            _formattedLatestAccuracy: this.formatLatestAccuracy()
        };
    }

--- a/ts/webui/src/static/style/experiment/overview/count.scss
+++ b/ts/webui/src/static/style/experiment/overview/count.scss
@ -5,14 +5,6 @@ $margin: 24px;
    margin-top: $margin;
 }

-.ExpDuration {
-    margin-top: $margin;
-
-    .maxTrialNum {
-        margin-bottom: 10px;
-    }
-}
-
 .exp-progress {
    margin-top: 9px;

@ -39,6 +31,7 @@ $margin: 24px;
 }

 .maxTrialNum {
+    margin-bottom: 10px;
    .editparam {
        position: relative;
        top: -7px;
@ -55,6 +48,14 @@ $margin: 24px;
    top: -4px;
 }

+.editExpDuration{
+    box-sizing: border-box;
+    width: 31%;
+    position: relative;
+    left: 69%;
+    bottom: 33%;
+}
+
 .concurrency {
    .editparam {
        margin-top: 5px;
--- a/ts/webui/src/static/style/experimentManagement/experiment.scss
+++ b/ts/webui/src/static/style/experimentManagement/experiment.scss
@ -59,6 +59,10 @@ $pageMargin: 24px;
        &-platform {
            width: 150px;
        }
+
+        &-date {
+            width: 162px;
+        }
    }

    .hidden {