Skip to content

GitLab

Unverified Commit cbc6273a authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

fix bug and refactor tooltip component (#5062)

parent 588f299b
Show whitespace changes
Inline Side-by-side
Showing with 187 additions and 212 deletions
ts/webui/src/components/common/CopyButton.tsx
View file @ cbc6273a
import React, { useRef } from 'react'; import React, { useRef } from 'react';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import { IconButton, FontSizes, TooltipHost } from '@fluentui/react'; import { IconButton, FontSizes, TooltipHost } from '@fluentui/react';
import { TOOLTIP_BACKGROUND_COLOR } from '@static/const'; import { TOOLTIPSTYLE } from '@static/const';
interface CopyButtonProps { interface CopyButtonProps {
value: string; value: string;
...@@ -38,15 +38,7 @@ const CopyButton = (props: CopyButtonProps): any => { ...@@ -38,15 +38,7 @@ const CopyButton = (props: CopyButtonProps): any => {
content='Copied' content='Copied'
componentRef={ref} componentRef={ref}
delay={0} delay={0}
tooltipProps={{ tooltipProps={TOOLTIPSTYLE}
calloutProps: {
styles: {
beak: { background: TOOLTIP_BACKGROUND_COLOR },
beakCurtain: { background: TOOLTIP_BACKGROUND_COLOR },
calloutMain: { background: TOOLTIP_BACKGROUND_COLOR }
}
}
}}
/> />
</div> </div>
); );
......
ts/webui/src/components/common/TooltipHostIndex.tsx 0 → 100644
View file @ cbc6273a
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;
ts/webui/src/components/experiment/overview/command/Command1.tsx → ts/webui/src/components/experiment/overview/Config.tsx
View file @ cbc6273a
import React from 'react'; import * as React from 'react';
import { Stack } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel'; import { EXPERIMENT } from '@static/datamodel';
import { rightEidtParam } from '../count/commonStyle'; import { leftProgress, rightEditParam } from './count/commonStyle';
import TooltipHostIndex from '@components/common/TooltipHostIndex';
import '@style/experiment/overview/command.scss'; import '@style/experiment/overview/command.scss';
export const Command1 = (): any => { // 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 tuner = EXPERIMENT.profile.params.tuner;
const advisor = EXPERIMENT.profile.params.advisor; const advisor = EXPERIMENT.profile.params.advisor;
const assessor = EXPERIMENT.profile.params.assessor; const assessor = EXPERIMENT.profile.params.assessor;
...@@ -25,7 +30,14 @@ export const Command1 = (): any => { ...@@ -25,7 +30,14 @@ export const Command1 = (): any => {
} }
return ( return (
<div className='basic' style={rightEidtParam}> <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> <div>
<p className='command'>Training platform</p> <p className='command'>Training platform</p>
<div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div> <div className='ellipsis'>{EXPERIMENT.trainingServicePlatform}</div>
...@@ -33,5 +45,8 @@ export const Command1 = (): any => { ...@@ -33,5 +45,8 @@ export const Command1 = (): any => {
<div className='ellipsis'>{builtinName.join('/')}</div> <div className='ellipsis'>{builtinName.join('/')}</div>
</div> </div>
</div> </div>
</Stack>
); );
}; };
export default Config;
ts/webui/src/components/experiment/overview/Overview.tsx
View file @ cbc6273a
...@@ -10,8 +10,7 @@ import { BasicInfo } from './params/BasicInfo'; ...@@ -10,8 +10,7 @@ import { BasicInfo } from './params/BasicInfo';
import { ExpDuration } from './count/ExpDuration'; import { ExpDuration } from './count/ExpDuration';
import { ExpDurationContext } from './count/ExpDurationContext'; import { ExpDurationContext } from './count/ExpDurationContext';
import { TrialCount } from './count/TrialCount'; import { TrialCount } from './count/TrialCount';
import { Command1 } from './command/Command1'; import Config from './Config';
import { Command2 } from './command/Command2';
import { TitleContext } from './TitleContext'; import { TitleContext } from './TitleContext';
import { itemStyleSucceed, entriesOption } from './overviewConst'; import { itemStyleSucceed, entriesOption } from './overviewConst';
import '@style/experiment/overview/overview.scss'; import '@style/experiment/overview/overview.scss';
...@@ -185,9 +184,8 @@ class Overview extends React.Component<{}, OverviewState> { ...@@ -185,9 +184,8 @@ class Overview extends React.Component<{}, OverviewState> {
/> />
</div> </div>
</div> </div>
<Stack className='overviewCommand' horizontal> <Stack className='overviewCommand'>
<Command2 /> <Config />
<Command1 />
</Stack> </Stack>
</div> </div>
</div> </div>
......
ts/webui/src/components/experiment/overview/command/Command2.tsx deleted 100644 → 0
View file @ 588f299b
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>
);
};
ts/webui/src/components/experiment/overview/count/ExpDuration.tsx
View file @ cbc6273a
import React from 'react'; import React from 'react';
import { Stack, ProgressIndicator, TooltipHost, DirectionalHint } from '@fluentui/react';
import { EXPERIMENT } from '@static/datamodel'; 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 { convertDuration, convertTimeAsUnit } from '@static/function';
import { EditExperimentParam } from './EditExperimentParam'; import { EditExperimentParam } from './EditExperimentParam';
import { ExpDurationContext } from './ExpDurationContext'; import { ExpDurationContext } from './ExpDurationContext';
import ProgressBar from './ProgressBar';
import { EditExpeParamContext } from './context'; import { EditExpeParamContext } from './context';
import { leftProgress, rightEidtParam, progressHeight } from './commonStyle';
import '@style/experiment/overview/count.scss'; import '@style/experiment/overview/count.scss';
export const ExpDuration = (): any => ( export const ExpDuration = (): any => (
...@@ -18,35 +17,14 @@ export const ExpDuration = (): any => ( ...@@ -18,35 +17,14 @@ export const ExpDuration = (): any => (
const execDurationStr = convertDuration(execDuration); const execDurationStr = convertDuration(execDuration);
const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString(); const maxExecDurationStr = convertTimeAsUnit(maxDurationUnit, maxExecDuration).toString();
return ( return (
<Stack horizontal className='ExpDuration'> <React.Fragment>
<div style={leftProgress}> <ProgressBar
<TooltipHost tooltip={`${convertDuration(tooltip)} remaining`}
content={`${convertDuration(tooltip)} remaining`} percent={percent}
directionalHint={DirectionalHint.bottomCenter} latestVal={execDurationStr}
tooltipProps={{ presetVal={`${maxExecDurationStr} ${maxDurationUnit}`}
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> <div className='editExpDuration'>
{/* 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}>
<EditExpeParamContext.Provider <EditExpeParamContext.Provider
value={{ value={{
editType: CONTROLTYPE[0], editType: CONTROLTYPE[0],
...@@ -61,7 +39,7 @@ export const ExpDuration = (): any => ( ...@@ -61,7 +39,7 @@ export const ExpDuration = (): any => (
<EditExperimentParam /> <EditExperimentParam />
</EditExpeParamContext.Provider> </EditExpeParamContext.Provider>
</div> </div>
</Stack> </React.Fragment>
); );
}} }}
</ExpDurationContext.Consumer> </ExpDurationContext.Consumer>
......
ts/webui/src/components/experiment/overview/count/ProgressBar.tsx 0 → 100644
View file @ cbc6273a
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;
ts/webui/src/components/experiment/overview/count/TrialCount.tsx
View file @ cbc6273a
import * as React from 'react'; 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 { 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 { EditExperimentParam } from './EditExperimentParam';
import ProgressBar from './ProgressBar';
import { EditExpeParamContext } from './context'; import { EditExpeParamContext } from './context';
import { ExpDurationContext } from './ExpDurationContext'; import { ExpDurationContext } from './ExpDurationContext';
import { leftProgress, rightEidtParam, progressHeight } from './commonStyle'; import { leftProgress, rightEditParam } from './commonStyle';
const line1Tokens: IStackTokens = { const line1Tokens: IStackTokens = {
childrenGap: 60 childrenGap: 60
...@@ -29,34 +30,12 @@ export const TrialCount = (): any => { ...@@ -29,34 +30,12 @@ export const TrialCount = (): any => {
const { updateOverviewPage } = value; const { updateOverviewPage } = value;
return ( return (
<React.Fragment> <React.Fragment>
<Stack horizontal className='ExpDuration'> <ProgressBar
<div style={leftProgress}> tooltip={`${bar2.toString()} trials`}
<TooltipHost percent={bar2Percent}
content={`${bar2.toString()} trials`} latestVal={String(bar2)}
directionalHint={DirectionalHint.bottomCenter} presetVal={String(maxTrialNum)}
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>
<Stack horizontal className='marginTop'> <Stack horizontal className='marginTop'>
<div style={leftProgress}> <div style={leftProgress}>
<Stack horizontal className='status-count' tokens={line1Tokens}> <Stack horizontal className='status-count' tokens={line1Tokens}>
...@@ -85,7 +64,7 @@ export const TrialCount = (): any => { ...@@ -85,7 +64,7 @@ export const TrialCount = (): any => {
</Stack> </Stack>
</div> </div>
<div style={rightEidtParam}> <div style={rightEditParam}>
<EditExpeParamContext.Provider <EditExpeParamContext.Provider
value={{ value={{
title: MAX_TRIAL_NUMBERS, title: MAX_TRIAL_NUMBERS,
......
ts/webui/src/components/experiment/overview/count/commonStyle.ts
View file @ cbc6273a
...@@ -2,11 +2,11 @@ const leftProgress: React.CSSProperties = { ...@@ -2,11 +2,11 @@ const leftProgress: React.CSSProperties = {
width: '60%', width: '60%',
position: 'relative' position: 'relative'
}; };
const rightEidtParam: React.CSSProperties = { const rightEditParam: React.CSSProperties = {
paddingLeft: '9%', paddingLeft: '9%',
boxSizing: 'border-box' boxSizing: 'border-box'
}; };
const progressHeight = 8; const progressHeight = 8;
export { leftProgress, rightEidtParam, progressHeight }; export { leftProgress, rightEditParam, progressHeight };
ts/webui/src/components/experiment/trialdetail/table/TableList.tsx
View file @ cbc6273a
import React from 'react'; import React from 'react';
import { import { DefaultButton, IColumn, Icon, PrimaryButton, Stack, StackItem, Checkbox } from '@fluentui/react';
DefaultButton,
IColumn,
Icon,
PrimaryButton,
Stack,
StackItem,
TooltipHost,
DirectionalHint,
Checkbox
} from '@fluentui/react';
import { Trial } from '@model/trial'; import { Trial } from '@model/trial';
import { TOOLTIP_BACKGROUND_COLOR } from '@static/const';
import { EXPERIMENT, TRIALS } from '@static/datamodel'; import { EXPERIMENT, TRIALS } from '@static/datamodel';
import { convertDuration, formatTimestamp, copyAndSort, parametersType, _inferColumnTitle } from '@static/function'; import { convertDuration, formatTimestamp, copyAndSort, parametersType, _inferColumnTitle } from '@static/function';
import { SortInfo, SearchItems } from '@static/interface'; import { SortInfo, SearchItems } from '@static/interface';
...@@ -26,6 +15,7 @@ import KillJobIndex from './tableFunction/killJob/KillJobIndex'; ...@@ -26,6 +15,7 @@ import KillJobIndex from './tableFunction/killJob/KillJobIndex';
import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction'; import { getTrialsBySearchFilters } from './tableFunction/search/searchFunction';
import PaginationTable from '@components/common/PaginationTable'; import PaginationTable from '@components/common/PaginationTable';
import CopyButton from '@components/common/CopyButton'; import CopyButton from '@components/common/CopyButton';
import TooltipHostIndex from '@components/common/TooltipHostIndex';
require('echarts/lib/chart/line'); require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip'); require('echarts/lib/component/tooltip');
...@@ -380,66 +370,15 @@ class TableList extends React.Component<TableListProps, TableListState> { ...@@ -380,66 +370,15 @@ class TableList extends React.Component<TableListProps, TableListState> {
) )
}), }),
...(k === 'message' && { ...(k === 'message' && {
onRender: (record): React.ReactNode => onRender: (record): React.ReactNode => <TooltipHostIndex value={record.message} />
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>
)
}), }),
...((k.startsWith('metric/') || k.startsWith('space/')) && { ...((k.startsWith('metric/') || k.startsWith('space/')) && {
// show tooltip // show tooltip
onRender: (record): React.ReactNode => ( onRender: (record): React.ReactNode => <TooltipHostIndex value={record[k]} />
<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>
)
}), }),
...(k === 'latestAccuracy' && { ...(k === 'latestAccuracy' && {
// FIXME: this is ad-hoc // FIXME: this is ad-hoc
onRender: (record): React.ReactNode => ( onRender: (record): React.ReactNode => <TooltipHostIndex value={record._formattedLatestAccuracy} />
<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>
)
}), }),
...(['startTime', 'endTime'].includes(k) && { ...(['startTime', 'endTime'].includes(k) && {
onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span> onRender: (record): React.ReactNode => <span>{formatTimestamp(record[k], '--')}</span>
......
ts/webui/src/components/experimentManagement/FilterBtns.tsx
View file @ cbc6273a
...@@ -60,6 +60,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> { ...@@ -60,6 +60,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
ariaLabel='Select a date' ariaLabel='Select a date'
value={selectedStartDate} value={selectedStartDate}
onSelectDate={getSelectedData.bind(this, 'start')} onSelectDate={getSelectedData.bind(this, 'start')}
className='filter-condition-date'
/> />
<DatePicker <DatePicker
label='End time' label='End time'
...@@ -69,6 +70,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> { ...@@ -69,6 +70,7 @@ class FilterBtns extends React.Component<FilterBtnsProps, {}> {
ariaLabel='Select a date' ariaLabel='Select a date'
value={selectedEndDate} value={selectedEndDate}
onSelectDate={getSelectedData.bind(this, 'end')} onSelectDate={getSelectedData.bind(this, 'end')}
className='filter-condition-date'
/> />
<DefaultButton onClick={setSearchSource.bind(this)} className='reset'> <DefaultButton onClick={setSearchSource.bind(this)} className='reset'>
<Icon iconName='Refresh' /> <Icon iconName='Refresh' />
......
ts/webui/src/static/const.ts
View file @ cbc6273a
...@@ -70,6 +70,15 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [ ...@@ -70,6 +70,15 @@ const SUPPORTED_SEARCH_SPACE_TYPE = [
]; ];
const TOOLTIP_BACKGROUND_COLOR = '#484848'; 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 MAX_TRIAL_NUMBERS = 'Max trial No.';
const RETIARIIPARAMETERS = 'mutation_summary'; const RETIARIIPARAMETERS = 'mutation_summary';
...@@ -88,7 +97,7 @@ export { ...@@ -88,7 +97,7 @@ export {
METRIC_GROUP_UPDATE_SIZE, METRIC_GROUP_UPDATE_SIZE,
CONCURRENCYTOOLTIP, CONCURRENCYTOOLTIP,
SUPPORTED_SEARCH_SPACE_TYPE, SUPPORTED_SEARCH_SPACE_TYPE,
TOOLTIP_BACKGROUND_COLOR, TOOLTIPSTYLE,
MAX_TRIAL_NUMBERS, MAX_TRIAL_NUMBERS,
RETIARIIPARAMETERS RETIARIIPARAMETERS
}; };
ts/webui/src/static/interface.ts
View file @ cbc6273a
...@@ -27,7 +27,7 @@ interface MultipleAxes { ...@@ -27,7 +27,7 @@ interface MultipleAxes {
} }
interface TableRecord { interface TableRecord {
key: string; _key: string;
sequenceId: number; sequenceId: number;
startTime: number; startTime: number;
endTime?: number; endTime?: number;
...@@ -37,7 +37,7 @@ interface TableRecord { ...@@ -37,7 +37,7 @@ interface TableRecord {
message: string; message: string;
intermediateCount: number; intermediateCount: number;
latestAccuracy: number | undefined; latestAccuracy: number | undefined;
formattedLatestAccuracy: string; // format (LATEST/FINAL), _formattedLatestAccuracy: string; // format (LATEST/FINAL),
} }
interface SearchSpace { interface SearchSpace {
......
ts/webui/src/static/model/trial.ts
View file @ cbc6273a
...@@ -184,7 +184,7 @@ class Trial { ...@@ -184,7 +184,7 @@ class Trial {
const duration = (endTime - this.info.startTime!) / 1000; const duration = (endTime - this.info.startTime!) / 1000;
return { return {
key: this.info.trialJobId, _key: this.info.trialJobId,
sequenceId: this.info.sequenceId, sequenceId: this.info.sequenceId,
id: this.info.trialJobId, id: this.info.trialJobId,
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
...@@ -195,7 +195,7 @@ class Trial { ...@@ -195,7 +195,7 @@ class Trial {
message: this.info.message ?? '--', message: this.info.message ?? '--',
intermediateCount: this.intermediates.length, intermediateCount: this.intermediates.length,
latestAccuracy: this.latestAccuracy, latestAccuracy: this.latestAccuracy,
formattedLatestAccuracy: this.formatLatestAccuracy() _formattedLatestAccuracy: this.formatLatestAccuracy()
}; };
} }
......
ts/webui/src/static/style/experiment/overview/count.scss
View file @ cbc6273a
...@@ -5,14 +5,6 @@ $margin: 24px; ...@@ -5,14 +5,6 @@ $margin: 24px;
margin-top: $margin; margin-top: $margin;
} }
.ExpDuration {
margin-top: $margin;
.maxTrialNum {
margin-bottom: 10px;
}
}
.exp-progress { .exp-progress {
margin-top: 9px; margin-top: 9px;
...@@ -39,6 +31,7 @@ $margin: 24px; ...@@ -39,6 +31,7 @@ $margin: 24px;
} }
.maxTrialNum { .maxTrialNum {
margin-bottom: 10px;
.editparam { .editparam {
position: relative; position: relative;
top: -7px; top: -7px;
...@@ -55,6 +48,14 @@ $margin: 24px; ...@@ -55,6 +48,14 @@ $margin: 24px;
top: -4px; top: -4px;
} }
.editExpDuration{
box-sizing: border-box;
width: 31%;
position: relative;
left: 69%;
bottom: 33%;
}
.concurrency { .concurrency {
.editparam { .editparam {
margin-top: 5px; margin-top: 5px;
......
ts/webui/src/static/style/experimentManagement/experiment.scss
View file @ cbc6273a
...@@ -59,6 +59,10 @@ $pageMargin: 24px; ...@@ -59,6 +59,10 @@ $pageMargin: 24px;
&-platform { &-platform {
width: 150px; width: 150px;
} }
&-date {
width: 162px;
}
} }
.hidden { .hidden {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment